Escuela Complutense Latinoamericana

Escola Complutense Latinoamericana

Programación para Internet

Programación
en el lado del cliente
con JavaScript

Universidade Federal de Santa Catarina

Florianópolis, Brasil
21 de mayo a 1 de junio de 2007

Los lenguajes de guiones

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 guiones.
Lenguajes de programación interpretados con los que se
pueden crear guiones (secuencias de instrucciones) para
insertarlos entre el código HTML de las páginas web.
El código de los guiones 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 guiones, siendo VBScript y
JavaScript los dos más conocidos y usados.

El lenguaje JavaScript JavaScript: 0 - 1

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Guiones (secuencias de órdenes)

Las secuencias de órdenes que constituyen un guión se

pueden ejecutar en el cliente o en el servidor.
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.
Se usa para añadir comportamiento a la página web en
la que se encuentra el guión (la secuencia de órdenes).
Programación en el lado del servidor:
La secuencia de órdenes se ejecuta en el servidor antes
de enviar la página web al navegador cliente.
Se usa para construir dinámicamente la página con
posibles accesos a bases de datos que determinan el
contenido de la página.
Aquí nos vamos a ocupar de la programación en el lado
del cliente con guiones en el lenguaje JavaScript.

El lenguaje JavaScript JavaScript: 0 - 2

¿Qué podemos hacer con JavaScript?

Básicamente, crear interfaces de usuario (atr)activas.
Dinamizar las páginas con efectos.
Validar la información suministrada por el usuario en un
formulario (antes de enviar los datos y evitando ese
trabajo al servidor).
Generar páginas web sobre la marcha, de acuerdo con
las acciones realizadas por el usuario.
Controlar las ventanas del navegador
Y mucho más...

¿También algo "malo"?

No, pues por definición los guiones tienen fuertes
restricciones de acceso a los recursos de la máquina
cliente, evitando que puedan dañar esos recursos.

El lenguaje JavaScript JavaScript: 0 - 3

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 El lenguaje JavaScript
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 nombre único.
JavaScript es un lenguaje basado en objetos.

Propiedades (atributos)
Características de los objetos descritas en sus clases.
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.

El lenguaje JavaScript JavaScript: 0 - 4

El lenguaje JavaScript
Eventos
Sucesos que se producen en el navegador debidos a la
interacción del usuario, tales como la pulsación con el
ratón o el envío de los datos de un formulario.
A cada evento posible se le asocia un manejador de
evento, un código a ejecutar automáticamente cuando
se produce el evento.
No todos los eventos han de tener asociado un
manejador. Tan sólo aquellos a los que se quiera
responder.

Funciones
Bloques de código que se definen como una unidad
independiente con nombre; 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.

El lenguaje JavaScript JavaScript: 0 - 5

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 El lenguaje JavaScript
Sintaxis basada en el lenguaje Java
(¡ahí acaban las similitudes!)
Distingue entre minúsculas y mayúsculas
Ya están predefinidas muchas clases de objetos.
Para acceder a una propiedad de un objeto o pasarle
un mensaje se hace uso de la sintaxis de punto.
Para acceder a la propiedad status (la barra de estado)
del objeto window (la ventana) se usa window.status.
Para enviar un mensaje a la ventana para que se cierre:
window.close(). Se ejecuta el método close() del
objeto window (los métodos son funciones).
Un manejador de evento es una función concreta cuyo
nombre se asocia al evento correspondiente.
onClick, onMouseover, onSubmit, ...

El lenguaje JavaScript JavaScript: 0 - 6

El lenguaje JavaScript
Valores y variables (var)
Un valor es un dato: un número, una cadena de
caracteres, un booleano (true/false) o un objeto;
también se puede indicar la ausencia de valor
estableciéndolo como nulo.
Los números literales se escriben de forma similar a
como se hace en otros lenguajes de programación:
241, 3.1416, ...
Las cadenas de caracteres se escriben como secuencias
de caracteres encerradas entre comillas (simples o
dobles, pero las mismas para empezar y para acabar).
Booleanos: 1 (true) y 0 (false).
Las variables contienen valores; los nombres de las
variables son sus identificadores.

El lenguaje JavaScript JavaScript: 0 - 7

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 El lenguaje JavaScript
Operadores

+ suma o concatenación
- resta
* multiplicación
/ división
% módulo
++ incremento
-- decremento
- cambio de signo

El lenguaje JavaScript JavaScript: 0 - 8

El lenguaje JavaScript
Asignaciones

= asigna el valor de la derecha a la variable de la izquierda.

El valor puede ser el resultado de evaluar una expresión.
Algunas expresiones de asignación se pueden abreviar:
variable = variable operador otra_variable
es lo mismo que
variable operador= otra_variable
x += y es igual que x = x + y
x -= y es igual que x = x - y
x *= y es igual que x = x * y
etc...

El lenguaje JavaScript JavaScript: 0 - 9

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 El lenguaje JavaScript
Comparaciones

Los operadores relacionales y lógicos son los del lenguaje C:

== igual que
!= distinto de
< menor que
<= menor o igual que
> mayor que
>= mayor o igual que
&& Y
|| O
! NO
Comentarios
En los guiones se pueden colocar comentarios de usa sola
línea (// ...) o de varias líneas (/* ... */), igual que en
C++ o Java.

El lenguaje JavaScript JavaScript: 0 - 10

Primeros pasos con JavaScript

¿Dónde ponemos los guiones?
O en la cabecera (sección HEAD) o en el cuerpo (sección BODY)
del archivo HTML.
<HTML>
<HEAD>

</HEAD>
<BODY>

</BODY>
</HTML>
Puede haber múltiples guiones en un archivo HTML.
Los guiones que haya en la cabecera se ejecutan al abrir
la página, mientras que los que haya en el cuerpo se ejecutan
a medida que se encuentran durante la construcción de la
página web.

El lenguaje JavaScript JavaScript: 0 - 11

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Primeros pasos con JavaScript

¿Cómo indicar que se trata de un guión y no HTML?

Encerrando todo el código del guión dentro de un elemento
SCRIPT de HTML:
<SCRIPT> ... </SCRIPT>
El intérprete de HTML ignora el contenido del elemento SCRIPT
y deja que se ocupe de él el intérprete de guiones.

¿Cómo sabe el navegador qué lenguaje de guiones uso?

Porque se lo indicamos explícitamente en la marca SCRIPT
inicial:
<SCRIPT LANGUAGE="JavaScript">
// código del guión ...
</SCRIPT>
Normalmente el lenguaje se detecta automáticamente.

El lenguaje JavaScript JavaScript: 0 - 12

Primeros pasos con JavaScript

Problemas con los navegadores antiguos
Los navegadores antiguos no conocen el elemento
SCRIPT de HTML, por lo que lo ignoran Así, si el guión se
encuentra en el cuerpo, el texto que contiene se
muestra como si fuera texto normal a visualizar.
Se pueden encerrar los guiones entre comentarios HTML
para evitar que un navegador antiguo pueda mostrarlo
directamente:
<SCRIPT LANGUAGE ="JavaScript">
<!-- Ocultar el guión a navegadores antiguos
// código del guión ...
Fin de la ocultación del guión -->
</SCRIPT>
Conviene ocultar los guiones, aunque nosotros
no lo hagamos aquí por cuestiones de espacio

El lenguaje JavaScript JavaScript: 0 - 13

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Alertas

<HTML> JS01.html
<HEAD>
<TITLE>Alertas de JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
alert("¡Bienvenido a mi página!")
</SCRIPT>
</HEAD>
Alternativa para navegadores
<BODY> que no admitan JavaScript
<NOSCRIPT> (o que lo tengan desactivado)

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

</NOSCRIPT>
</BODY>
</HTML>

El lenguaje JavaScript JavaScript: 0 - 14

Alertas

Navegador
antiguo

El lenguaje JavaScript JavaScript: 0 - 15

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Funciones

Las funciones permiten reutilizar código, ejecutándolo

tantas veces como se necesite.
function nombre() {
// código de la función
}
El código de la función es una secuencia de instrucciones.
Las instrucción van separadas por punto y coma (;).
Para ejecutar el código de la función se invoca ésta
escribiendo su nombre seguido de paréntesis
nombre()
Se pueden proporcionar datos a las funciones en forma
de parámetros incluyendo los correspondientes
argumentos en la llamada, entre los paréntesis y
separados por comas.
También, las funciones pueden devolver un resultado

El lenguaje JavaScript JavaScript: 0 - 16

Funciones

<HTML> JS02.html
<HEAD>
<TITLE>Alertas de JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function alerta() {
alert("¡Bienvenido a mi página!");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
alerta();
</SCRIPT>
</BODY>
</HTML>

El lenguaje JavaScript JavaScript: 0 - 17

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Funciones y manejadores de eventos

Se puede establecer una función como manejadora

de un evento asignando su nombre al atributo del
manejador de ese evento:
<HTML> JS03.html
<HEAD>
<TITLE>Manejadores de eventos</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function alerta(mensaje) {
alert(mensaje);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Manejadores de eventos</H1><HR>
<FORM>
(sigue...)

El lenguaje JavaScript JavaScript: 0 - 18

Funciones y manejadores de eventos

<INPUT TYPE="button" VALUE="Botón 1"

onClick="alerta('Has pulsado el botón nº 1')">
<INPUT TYPE="button" VALUE="Botón 2"
onClick="alerta('Has pulsado el botón nº 2')">
<INPUT TYPE="button" VALUE="Botón 3"
onClick="alerta('Has pulsado el botón nº 3')">
</FORM>
</BODY>
</HTML>

El lenguaje JavaScript JavaScript: 0 - 19

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Marquesina en la barra de estado

<HTML> La propiedad status del objeto window

representa la barra de estado de la ventana
<HEAD>
<TITLE>Marquesina en barra de estado</TITLE>
<SCRIPT LANGUAGE="JavaScript">
mens="Este es un mensaje animado que va " +
"desplazándose por la barra de estado ... ";
i=0;
function Marquesina() {
window.status = mens.substring(i,mens.length) +
mens.substring(0,i-1);
if(i < mens.length) {
i++; JS04.html
}
else{ Bifurcación
condicional
i=0;
}
(sigue...)

El lenguaje JavaScript JavaScript: 0 - 20

Marquesina en la barra de estado

setTimeout() hace que se ejecute la función

que se indica en primer lugar transcurridos
el número de milisegundos indicados en segundo lugar
(aquí produce una recursión continua)

setTimeout("Marquesina()",100);
}
</SCRIPT>
</HEAD>
<BODY onLoad="Marquesina()">
Tras cargar la página
<H2>
¡Mira cómo pasa el mensaje por la barra de estado!
</H2>
</BODY>
</HTML>

El lenguaje JavaScript JavaScript: 0 - 21

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Marquesina en la barra de estado

El lenguaje JavaScript JavaScript: 0 - 22

Información en la barra de estado

Se puede asignar todo el código JavaScript que sea

necesario como manejador de un evento.
<HTML> JS05.html
<HEAD>
<TITLE>Información en barra de estado</TITLE>
</HEAD>
<BODY>
<H1>Información en la barra de estado</H1><HR>
<P>Desde aquí puedes acceder a la
<A HREF="http://www.ucm.es"
onMouseover="window.status='www.ucm.es';return true;"
onMouseout="window.status='';return true;">
Universidad Complutense</A> o a la

onMouseOver: cuando el ratón esté sobre el vínculo

onMouseOut: cuando el ratón salga del vínculo
(sigue...)

El lenguaje JavaScript JavaScript: 0 - 23

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Información en la barra de estado

Las instrucciones return true son necesarias

para que funcione en algunos navegadores
(para forzar la actualización
del contenido de la barra de estado)

<A HREF="http://www.upm.es"
onMouseover="window.status='www.upm.es';return true;"
onMouseout="window.status='';return true;">
Universidad Politécnica</A>.</P>
<P>¡Fíjate cómo aparecen los URL en la barra de
estado cuando estás sobre un vínculo!</P>
</BODY>
</HTML>

El lenguaje JavaScript JavaScript: 0 - 24

Información en la barra de estado

El lenguaje JavaScript JavaScript: 0 - 25

Universidad Complutense de Madrid Universidade Federal de Santa Catarina