Desarrollo de Soluciones Web

CSS y JavaScript
 Contenido de Laboratorio

• ¿Qué es CSS(Hojas de Estilo en Cascada)?

• Ventajas de utilizar CSS
• Estructura de un archivo CSS
• Como Asociar CSS a un HTML.

• ¿Qué es JavaScript?
• Ubicación del código
• Elementos de JavaScript
• Objetos Predefinidos
• Eventos

• Ejercicio
 ¿Qué es CSS?

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para
definir la presentación estética de un documento estructurado y escrito en HTML.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura y el contenido de
la presentación estética en un documento HTML.

Esto permite un control mayor del documento y sus atributos convirtiendo al HTML en un
documento muy versátil y liviano.
 Ventajas de utilizar CSS

-Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma
considerable la actualización del mismo.

-El documento HTML en sí mismo es más claro de entender y se consigue reducir

considerablemente su tamaño.

-Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será
aplicada a un sitio web remoto, con lo que aumenta considerablemente la accesibilidad. Por
ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para
aumentar el tamaño del texto o remarcar más los enlaces.
 Estructura de un archivo CSS

Una hoja de estilo esta formada por un numero de reglas de estilo, que tienen las siguiente
estructura:

Ejemplo
 Como Asociar CSS a un HTML

-Enlace a una hoja .css externa

A través del elemento link de la cabecera HTML

Sintaxis

mediatype: representa el tipo de medio para el que la hoja de estilo define las reglas de
presentacion
 Como Asociar CSS a un HTML

-Enlace de estilo embebida en el encabezado HTML

Por medio del elemento style de la siguiente forma:

Sintaxis
 ¿Qué JavaScript?

Se trata de un lenguaje de tipo script ,basado en objetos y guiado por eventos , El codigo
JavaScript va inscrustado en los documentos HTML, y se encargan de realizar acciones en el
cliente, como pueden ser pedir datos, confirmaciones,mostrar mensajes,crear animaciones,
comprobar campos etc.

Al ser un lenguaje del tipo script significa que no es un lenguaje compilado, si no es un lenguaje
interpretado por el navegador, es decir cual se va leyendo se ejecuta por el cliente. Al estar
basado por objetos, esta guiado por eventos significa que no vamos a tener un programa
que se ejecute de principio a fin en cuanto se carguemos la pagina web. Significa que cuando
en el navegador suceda algún evento ,pasara algo.
 Ubicación del Código

Script dentro del documento HTML(body)

 Ubicación del Código

Script dentro del documento HTML(head)

 Ubicación del Código

Script en un archivo separado

 Elemento de JavaScript

Comentarios de JavaScript

Declaración de Variables
Para declarar una variable se puede emplear
 Elemento de JavaScript

Operadores
 Elemento de JavaScript

Operadores
 Elemento de JavaScript

Operadores
 Elemento de JavaScript

Estructuras de Control
Tienen la misma sintaxis que en java
 Elemento de JavaScript

Funciones
Son una serie de instrucciones que realizan una determinada tarea , la forma de declarar una
función en JavaScript es de la siguiente manera:

Los argumentos son variables que la función necesita para realizar su tarea. La manera de invocar
una función
 Elemento de JavaScript

Funciones Predefinidas
JavaScript trae consigo muchas funciones predefinidas señalemos aquí algunas de las mas
importantes:

•parseInt(textonumero): Convierte una cadena a un numero

•parseFloat(textonumero):Convierte una cadena a un real
•isNaN(expresion) : Devuelve verdadero si la expresión tiene un contenido no numérico.
 Elemento de JavaScript

Objetos Predefinidas
 Elemento de JavaScript

Objetos Predefinidas

Windows
Representa a la ventana del navegador

Propiedades
-status: Mensaje de la barra de estado
-Document:Documento HTML vizualizado

Metodos
-alert(msg): Muestra una ventana con un mensaje
 Elemento de JavaScript

Objetos Predefinidas

Windows

Metodos
-confirm(msg):Muestra una ventana con un boton de cancelar y otro de aceptar,devuelve
true si se ha pulsado aceptar y false si se ha pulsado cancelar
 Elemento de JavaScript

Objetos Predefinidas

Windows

Metodos
-prompt(msg,default): Muestra una ventana de entrada de datos , con un valor por defecto.

-Open(url,nombre,opt):Abre una ventana del navegador

-close():cierra la ventana
 Elemento de JavaScript

Objetos Predefinidas
 Elemento de JavaScript

Objetos Predefinidas
 Elemento de JavaScript

Objetos Predefinidas
Eventos
Eventos
Eventos
Eventos
Eventos