PDF de programación - Tema 3: Programación en el lado del cliente - Aplicaciones web

APLICACIONES WEB
APLICACIONES WEB
APLICACIONES WEB
APLICACIONES WEB

TEMA 3:  PROGRAMACIÓN EN EL LADO DEL CLIENTE

Objetivos

 Introducir lenguaje de programación JavaScript (JS)
 Mostrar el Modelo de Objetos del Documento (DOM)
 Mostrar el modelo de eventos de JS
 Mostrar la utilización de JS para la validación de formularios

Índice: Temas 3.1 y 3.2

3.1 Lenguajes de Script

3.1.1 El lenguaje JavaScript
3.1.2 Primeros pasos con JavaScript

3.2 La sintaxis del lenguaje JavaScript

3.2.1 Variables
3.2.2 Objetos
3 2 3 Instrucciones de control
3.2.3 Instrucciones de control
3.2.4 Funciones

Índice: Temas 3.1 y 3.2

3.1 Lenguajes de Script

3.1.1 El lenguaje JavaScript
3.1.2 Primeros pasos con JavaScript

3.2 La sintaxis del lenguaje JavaScript

3.2.1 Variables
3.2.2 Objetos
3 2 3 Instrucciones de control
3.2.3 Instrucciones de control
3.2.4 Funciones

3.1
3.1.1

LENGUAJES DE SCRIPT
EL LENGUAJE JAVASCRIPT

 Motivación

 HTML ofrece una funcionalidad básica para la construcción de páginas web.

 Para dotar de un mayor dinamismo a las páginas web se puede complementar 

HTML con otros lenguajes: los lenguajes de Script.

 Los lenguajes de Scripts son lenguajes de programación interpretados con los que 

se pueden crear secuencias de instrucciones (scripts) para insertarlos entre el 
código HTML de las páginas web.

 El código de los scripts se ejecuta a medida que se encuentra durante la 

construcción de la página web.

 Con ese código se pueden dinamizar las páginas, mostrar controles o conectar con 

bases de datos.

 Hay varios lenguajes de script: VBScript, JavaScript, PHP, etc…

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

4

3.1
3.1.1

LENGUAJES DE SCRIPT
EL LENGUAJE JAVASCRIPT

 Ejecución de Scripts

 Las secuencias de órdenes que constituyen un script se pueden ejecutar en el 

cliente o en el servidor:

 Programación en el lado del cliente
Programación en el lado del cliente

• La secuencia de órdenes se ejecuta en la máquina cliente, aquella en la que se está usando 

el navegador.

g

• Se usa para añadir comportamiento a la página web en la que se encuentra el script.

 P
 Programación en el lado del servidor

l l d d l

ió

id

• La secuencia de órdenes se ejecuta en el servidor antes de enviar la página web al 

navegador cliente.

d

li

t

• Se usa para construir dinámicamente la página con posibles accesos a bases de datos que 

determinan el contenido de la página
determinan el contenido de la página.

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

5

3.1
3.1.1

LENGUAJES DE SCRIPT
EL LENGUAJE JAVASCRIPT

 El lenguaje JavaScript

 Aquí nos vamos a ocupar de la programación en el lado del cliente utilizando el 

lenguaje JavaScript.

 Con JavaScript se puede, por ejemplo:
Con JavaScript se puede, por ejemplo:

• Dinamizar las páginas con efectos: texto que aparece y desaparece, animaciones, etc…

• Controlar el navegador: crear ventanas emergentes, mostrar mensajes al usuario, etc…
Controlar el navegador: crear ventanas emergentes, mostrar mensajes al usuario, etc…

• Validar la información suministrada por el usuario en un formulario.

• Responder a los sucesos generados al interactuar el usuario con el navegador, etc…
Responder a los sucesos generados al interactuar el usuario con el navegador, etc…

 Con JavaScript no se puede, por ejemplo:

• Leer o modificar las preferencias del navegador.

• Acceder a los archivos del ordenador del usuario.

• Comunicarse con recursos que no pertenezcan al mismo dominio del script.

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

6

3.1
3.1.1

LENGUAJES DE SCRIPT
EL LENGUAJE JAVASCRIPT

 Características (1)

 Sintaxis basada en el lenguaje Java (¡y ahí acaban las similitudes!).

 Es un lenguaje interpretado: no se compila.

 Es un lenguaje débilmente tipado: no se define el tipo de las variables sino que se
 Es un lenguaje débilmente tipado: no se define el tipo de las variables, sino que se 

deduce por el contexto.

 Distingue las mayúsculas y minúsculas
 Distingue las mayúsculas y minúsculas.

 No se tienen en cuenta los espacios en blanco y las nuevas líneas, por lo que 

podemos sangrar nuestros scripts para que sean más legibles
podemos sangrar nuestros scripts para que sean más legibles.

 No es necesario terminar cada sentencia con el carácter de punto y coma (;), 

aunque si es recomendable
aunque si es recomendable.

 Se pueden incluir comentarios al estilo C/C++ o Java.

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

7

3.1
3.1.1

LENGUAJES DE SCRIPT
EL LENGUAJE JAVASCRIPT

 Características (2)

 Tiene algunas características de orientación a objetos:

• Elementos que se pueden manipular: ventanas, formularios, elementos de formularios, …

• Cada objeto es de una clase (tipo de objeto): un objeto es un ejemplar de su clase con 

( p

)

j

j

j

j

p

nombre único, que tiene propiedades y métodos.

• Propiedades (atributos): Características de los objetos descritas en sus clases y que 

conforman el contenido de los objetos, siendo valores sencillos u objetos de otras clases.

• Métodos: Acciones que los objetos pueden realizar y que están descritas en las clases en 

forma de funciones. Para que un objeto realice una acción, se le pasa un mensaje al objeto 
con el nombre del método deseado

• Ya están predefinidas muchas clases de objetos con sus propiedades y métodos 
específicos, cuyo acceso se hace uso de la sintaxis de punto: window.status , 
window close()
window.close(). 

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

8

3.1
3.1.1

LENGUAJES DE SCRIPT
EL LENGUAJE JAVASCRIPT

 Características (3)

 También se pueden definir funciones propias:

• Bloques de código que se definen como una unidad independiente con nombre, y que se 

invocan colocando su nombre seguido de paréntesis.

• Pueden recibir valores u objetos en forma de argumentos y pueden devolver valores u 

objetos como resultado de su ejecución.

 Se puede responder a eventos:

• Sucesos que se producen en el navegador debidos a la interacción del usuario, tales como 

la pulsación o movimiento del ratón, el envío de los datos de un formulario, etc…

• A cada evento posible se le asocia un manejador de evento, función con el código a 
ejecutar cuando se produce el evento: onClick, onMouseover, onSubmit, ...
• No todos los eventos han de tener asociado un manejador, sino tan sólo aquellos a los que 

se quiera responder.

d

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

9

Índice: Temas 3.1 y 3.2

3.1 Lenguajes de Script

3.1.1 El lenguaje JavaScript
3.1.2 Primeros pasos con JavaScript

3.2 La sintaxis del lenguaje JavaScript

3.2.1 Variables
3.2.2 Objetos
3 2 3 Instrucciones de control
3.2.3 Instrucciones de control
3.2.4 Funciones

3.1
3.1.2

LENGUAJES DE SCRIPT
PRIMEROS PASOS CON JAVASCRIPT

 ¿Dónde colocar scripts en una página HTML?

 En la cabecera de la página (<head>): Se ejecutan al abrir la página.
 En el cuerpo de la página (<body>): Se ejecutan a medida que se encuentran 

durante la construcción de la página web.

 Puede haber múltiples scripts en un archivo HTML.

 ¿Cómo se invocan los scripts en una página HTML?

 Usando la etiqueta  <script>:

• Permite incluir código de script directamente en la página.

• Permite incluir una referencia que apunte a un fichero externo con el código.

 Usando los atributos de etiquetas HTML que soportan scripts: Manejadores de 

eventos, enlaces, etc…

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

11

3.1
3.1.2

LENGUAJES DE SCRIPT
PRIMEROS PASOS CON JAVASCRIPT

 Incluyendo código directamente mediante la etiqueta SCRIPT (1)

 El código con las instrucciones JS se puede incluir directamente en cualquier parte 

del documento HTML encerrándolo entre la etiqueta  <script>.

 Método utilizado para incluir pequeños bloques de código en la cabecera.
 El intérprete de HTML ignora el contenido del elemento <script> y deja que se 

ocupe de él el intérprete de scripts.

 El navegador sabe qué lenguaje de scripts se utiliza al indicarlo explícitamente en 

el atributo language del elemento <script> (normalmente se detecta):
language="JavaScript"

 Además, para que la página XHTML resultante sea válida, es necesario añadir el 
l

XHTML

ñ di

álid

á

i

l

á i

Ad
l
atributo type a la etiqueta <script>:
t
i t"
type="text/javascript"

t/j

"t

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

12

3.1
3.1.2

LENGUAJES DE SCRIPT
PRIMEROS PASOS CON JAVASCRIPT

 Incluyendo código directamente mediante la etiqueta SCRIPT (2)

 Algunos navegadores no disponen de soporte completo de JS:

• Se trata de un navegador antiguo.

• El usuario los ha deshabilitado parcial o completamente.

 En estos casos, para indicar al usuario de la necesidad de la utilización de JS para 
el correcto funcionamiento de la página, es posible incluir un aviso mediante la 
etiqueta <noscript>:
• Normalmente va al comienzo del cuerpo del documento.

• Su contenido se muestra únicamente en navegadores que no interpreten o tengan JS 

deshabilitado.
<noscript>

</noscript>
</noscript>

<p>Esta página requiere JavaScript</p>

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

13

3.1
3.1.2

LENGUAJES DE SCRIPT
PRIMEROS PASOS CON JAVASCRIPT

EJERCICIO  1

 Incluyendo código directamente mediante la etiqueta SCRIPT (3)

 Ejemplo de inclusión de código JS en un documento HTML: Ventana con alerta.

<html>

<head>

<title>Ejercicio 1</title>
<script>

alert("¡Bienvenido a mi página!")
)

( ¡

p g

</script>

</head>
<body>

<noscript>

</noscript>

</body>

</html>

<h1>Esta página requiere JavaScript</h1>

p g

/

q

p

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

14

3.1
3.1.2

LENGUAJES DE SCRIPT
PRIMEROS PASOS CON JAVASCRIPT

EJERCICIO  1

 Incluyendo código directamente mediante la etiqueta SCRIPT (4)

d

N
Navegador antiguo o con
i
JS deshabilitado

APL