javascript 4en4

1

Ceuta 9 - 13 Julio 2007 1

DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA

Introducción al Javascript

Pedro A. Castillo ValdiviesoUniversidad de Granada



El lenguaje HTML

Hasta ahora habéis hecho páginas HTML completas y vistosas

Una vez cargadas en el navegador no podemos interaccionar

Sería útil poder interaccionar y programar acciones asociadas a ciertos elementos de la página




Javascript es un lenguaje interpretado

Desarrollo en web

Ejecución de los programas en el navegador cliente:Es el navegador el que interpreta las instrucciones

No hay intervención por parte del servidor




Los programas se ejecutan en el navegador (cliente):

servidor clientenavegador

2



¿Qué no es Javascript?

Javascript no es un lenguaje de propósito general.Pequeños trozos de programa de unas pocas líneas de código.

No da control a todos los recursos del ordenador

No podemos leer o escribir en disco, sólo acceder al documento HTML en el que va inmerso

Javascript NO es JavaCeuta 9 - 13 Julio 2007 6


Índice de la presentación

Introducción

Sintaxis básica de Javascript

Cómo trabajar con Javascript

Eventos. Objetos window y document

Definición de matrices y objetos



Sintaxis de Javascript

Toma su sintaxis de lenguajes de programación más conocidosC++ y Pascal

Definición de variables:<HTML>

<SCRIPT>

numero = 73;

cadena = “contenido de la cadena”;

</SCRIPT>

Hemos definido dos variables, una de tipo cadena

y la otra de tipo numérico



Operaciones con cadenas y números

…con cadenascad1 = “las cosas”;

cad2 = “van mejorando”;

cad3 = cad1 + cad2 ;

…con variables numéricasnum1 = 7;

num2 = 2;

num3 = num1 + num2 ;

Se concatenan ambas cadenas y se guarda en cad3

Se suman los valores y el resultado se guarda en num3

3




Introducción




Definición de matrices y objetosCeuta 9 - 13 Julio 2007 10


¿Cómo se usa Javascript?

<HTML>

<HEAD>

<SCRIPT>

variable = 45 * 3 ;

cadena = “ un contenido “;

</SCRIPT>

</HEAD>

<BODY>

...

Crearemos una página HTMLe insertaremos el programa entre etiquetas <SCRIPT> y

</SCRIPT>

La página HTML se interpreta y se muestra. Al

encontrar los scripts, se ejecutan línea por línea

Ceuta 9 - 13 Julio 2007 11


¿Cómo vamos a hacer los ejemplos?

Ceuta 9 - 13 Julio 2007 12


1

2

3

4

4

Ceuta 9 - 13 Julio 2007 13


Sentencias en los programas

La asignación de valores a variables se hace como en C++

Veamos cómo mostrar mensajes y valores de variablesy cómo realizar entradas de datos:

<HTML>

<SCRIPT>

alert(“ un mensaje en una ventana “);

</SCRIPT>

... La sentencia ALERT muestra una ventana

con el mensaje Ceuta 9 - 13 Julio 2007 14


Probar el primer ejemplo...

<HTML>

<BODY>

<b>esta página mostrará un mensaje en una ventana</b>

<SCRIPT>

variable = 1;

alert(“mensaje en la ventana” + variable);

</SCRIPT>

</BODY>

</HTML>

Crear una página HTML.El navegador ejecuta las

sentencias del JS y muestra el mensaje.

Ceuta 9 - 13 Julio 2007 15


Probar el segundo ejemplo...

<HTML>

<BODY>

<b>Contenido escrito directamente en la página</b>

<SCRIPT>

variable = 1;

document.writeln(“y escrito desde JS”);

</SCRIPT>

</BODY>

</HTML>

Crear una página HTML.Lo que escribamos con WRITELN aparece en el

documento.Ceuta 9 - 13 Julio 2007 16







5

Ceuta 9 - 13 Julio 2007 17


Definición de funciones

Podemos agrupar trozos de código que se vayan a usar repetidas vecesen una función, para llamarla posteriormente:

<HTML>

<SCRIPT>

function suma3 () {

numero = numero + 3;

}

suma3();

</SCRIPT>

En este ejemplo estamos usando una variable global

Ceuta 9 - 13 Julio 2007 18


Funciones (variables locales)

Para definir variables locales a la función:<HTML>

<SCRIPT>

function suma3 () {

var numero = numero + 3;

}

suma3();

</SCRIPT>

En este ejemplo estamos definiendo una variable que

sólo existe dentro del cuerpo de la función

Ceuta 9 - 13 Julio 2007 19



Recordemos cómo mostrar mensajes y valores de variablesy veamos cómo realizar entradas de datos:

<HTML>

<SCRIPT>

alert(“ un mensaje en una ventana “);

</SCRIPT>

... La sentencia ALERT muestra una ventana

con el mensajeCeuta 9 - 13 Julio 2007 20



Entradas de datos se suelen hacer en elementos de formulario o con:<HTML>

<SCRIPT>

dato = prompt(“Dame el dato:“);

alert( “has tecleado: “ + dato );

</SCRIPT>

...

...La sentencia PROMPT

pide un dato por teclado.La sentencia ALERT lo

muestra en una ventana.

6

Ceuta 9 - 13 Julio 2007 21


Ejercicio:

Hacer una página web que incluya un programa en Javascript que pida los datos personalesy luego los muestre concatenados

Ceuta 9 - 13 Julio 2007 22



Para escribir en el documento, usaremos WRITELN:<BODY>

<SCRIPT>

document.writeln(“ algo que aparece “);

document.writeln(“ en el documento “);

</SCRIPT>

... Lo que escribamos en el documento aparecerá como si lo hubiésemos escrito al

crear la página HTML

Ceuta 9 - 13 Julio 2007 23


Ejemplo: prompt + alert

<HTML>

<BODY>

La página de

<SCRIPT>

nombre = prompt(“Cómo te llamas? “);

alert( “Hola, “ + nombre );

document.write(nombre);

</SCRIPT>

</BODY> </HTML>

Ceuta 9 - 13 Julio 2007 24


Ejemplo: status

<HTML>

<BODY>

Un ejemplo que cambia la barra de estado

<SCRIPT>

nombre = prompt(“Cómo te llamas? “);

window.status= nombre ;

</SCRIPT>

</BODY>

</HTML>

7

Ceuta 9 - 13 Julio 2007 25


Estructuras de control condicionales

if (condicion) {

sentencias_true

}else{

sentencias-else

}

switch (variable) {

case valor: {

sentencias;

break; }

case otrovalor: {

sentencias;

break; }

default: sentencias;

}Ceuta 9 - 13 Julio 2007 26


Estructuras de control iterativas

while (condicion) {

sentencias;

}

do {

sentencias;

}while ( condicion );

for(inic;condic;increm){

sentencias;

}

Ceuta 9 - 13 Julio 2007 27


Ejemplo: crear una tabla con javascript<SCRIPT>

filas = 7;

Colum = 7;

for (i=0; i<filas; i++ ) {document.writeln("<TR>");for (j=0; j<colum; j++ ) {

document.writeln( "<TD>["+i+","+j+"]</TD>" );}document.writeln( "</TR>" );

}</SCRIPT> Ceuta 9 - 13 Julio 2007 28


Ejercicio:

Hacer una página web que incluya un programa en Javascript que pida los nombres de cincopersonas y después los imprima en el mismo documento.

8

Ceuta 9 - 13 Julio 2007 29





Eventos.

Objetos window y document

Definición de matrices y objetosCeuta 9 - 13 Julio 2007 30


Eventos en Javascript

Un evento es algo que puede ocurrir mientras se ejecuta un programa

• Mover el ratón• Pulsar una tecla• etc.

Queremos ejecutar ciertas acciones cuando suceda uno de esos eventos

Ceuta 9 - 13 Julio 2007 31


Eventos en Javascript

Para asociar un evento a un elemento de la página HTML :

<ETIQUETA atributo=valor onEvento=“programaJS;”>

Entre comillas dobles podemos llamar a una función Javascripto poner varias instrucciones directamente

Debemos conocer los eventos que pueden asociarse a cada elemento

Cuando suceda ese evento al elemento, se ejecuta un programa

Ceuta 9 - 13 Julio 2007 32


Ejemplo: onMouseOver

<SCRIPT>function gracias() {

alert( "parece que el ejemplo funciona" );}</SCRIPT>

<A HREF="http://www.ugr.es" onMouseOver="gracias();">pasa el cursor por encima de este enlace</A>

9

Ceuta 9 - 13 Julio 2007 33


Ejemplo: status

<HTML>

<BODY>

Al pasar por el enlace la barra de estado cambia

<A href="http://www.google.es"onMouseOver="window.status=‘mensaje en la barra';”>el enlace...</A>

</BODY>

</HTML>Ceuta 9 - 13 Julio 2007 34


Tabla de eventos asociados a etiquetas

bodyunload

submitsubmit

text,textareaselect

formreset

linkmouseover

area,linkmouseout

image,windowerror

window,frame,elementos de formfocus

bodyload

text,textarea,selectChange

button,radio,checkbox,submit,reset,linkclick

window,frame, elementos de formblur

imageabort

Objetos que los soportanEventos

Ceuta 9 - 13 Julio 2007 35


Ejemplo: onMouseOver / OnMouseOut

<HTML>

<BODY><a href="http://www.google.com"onClick="alert('Has pulsado el enlace');"onMouseOver="alert('encima del enlace');"onMouseOut="alert('fuera del enlace');">

acerca el cursor a este enlace</a></BODY>

</HTML>

Ceuta 9 - 13 Julio 2007 36


Ejemplo: onLoad / onUnload<SCRIPT>

function entrada() {alert("acabas de llegar a mi web");

}function salida() {

alert("¿tan pronto quieres irte?");}

</SCRIPT>

<BODY onLoad="entrada();" onUnLoad="salida();">

la web que saluda al entrar y te pide que no te vayas.

10

Ceuta 9 - 13 Julio 2007 37




Eventos.



Ejemplos avanzadosCeuta 9 - 13 Julio 2007 38



Para cada página HTML, el navegador define un objeto window yun document para usarlos con Javascript

A partir del window podemos acceder a ciertas propiedades de laventana en la que vemos la página

A partir del document podemos acceder a todos los elementos de lapágina HTML que estamos viendo

Ceuta 9 - 13 Julio 2007 39



A partir del objeto window podemos abrir una nueva ventana para veruna nueva página en ella:

variable = window.open(“URL”,”nombre”,”propiedades”);

Para cerrarla, usamos la variable creada:

variable.close();

Ceuta 9 - 13 Julio 2007 40


Ejemplo: abrir y cerrar ventanas

<SCRIPT>var nueva;function abrir() {

nueva = window.open("http://www.google.com", "abierta", "toolbar=yes,location=yes,menubar=yes,resizable=yes" );

}function cerrar() {

nueva.close();}</SCRIPT>

<a href="" onClick="abrir(); return false;"> abre una ventana </a>

<a href="" onClick="cerrar(); return false;"> cierrala</a>

11

Ceuta 9 - 13 Julio 2007 41


Ejercicio:

Hacer una página web que incluya un programa en Javascript que abre una ventana nueva y muestraun texto de ayuda (una página nueva).

Ceuta 9 - 13 Julio 2007 42


El objeto historyEl navegador guarda un historial de las páginas visitadas. Normalmente usamos los botones de la barra de herramientas.

Desde Javascript podemos obtener el mismo resultado con el objeto history

Ceuta 9 - 13 Julio 2007 43


Ejemplo: history

<HTML><BODY><FORM>

<input type="button" value="Atras" onClick="history.back();">

<input type="button" value="2 Atras" onClick="history.go(-2);">

</FORM></BODY></HTML>

con history.back() retrocedemos una página en el historial visitadocon history.back(-2) retrocedemos dos páginas en el historial visitado :

Ceuta 9 - 13 Julio 2007 44


Manejo de imágenes desde Javascript

A partir del objeto document podemos acceder a las imágenes de lapágina y cambiarlas

Existe un array de imágenes dentro de document :document.images[‘cabecera’].src

Si asignamos un nuevo fichero, la imagencambia automáticamente

Eso sería el nombre de una imagen

definida en la página

12

Ceuta 9 - 13 Julio 2007 45


Ejemplo: imágenes

<HTML><BODY><A HREF=""

onMouseOver="document.images['prueba'].src='uno.gif';" onMouseOut="document.images['prueba'].src='dos.gif';" onClick="return false;">

cambiar la imagen</a><p><IMG SRC="dos.gif" NAME="prueba"></BODY></HTML>

Es importante ponerle un nombre a la imagen para

acceder despuésCeuta 9 - 13 Julio 2007 46


Ejercicio:

Hacer una página web que muestra un menú hechoa base de imágenes.Hacer la programación Javascript para que cuando pase el ratónsobre alguna de las imágenes (opciones) cambie la imageny se vea resaltada.

Ceuta 9 - 13 Julio 2007 47


Manejo de los elementos de formulario

Podemos controlar los elementos de formulario desde Javascript:

• Comprobar si un elemento tiene valor o está vacío

• Asignar valores a los campos de formulario en función de eventos

• Comprobar el formato del dato que contiene un elemento

Ceuta 9 - 13 Julio 2007 48


Manejo de los elementos de formulario

Igual que accedemos a las imágenes, podemos acceder a los elementosde formulario

document.nombreFormulario.nombreElemento.value

Sin teclear nada, podemos cambiar el contenido del elementodesde Javascript

Accedemos al valor de uno de los elementos del formulario definido

13

Ceuta 9 - 13 Julio 2007 49


Ejemplo: elementos de formulario

<HTML><BODY>

<a href="" onMouseOver="document.formu.caja.value='hola';"onClick="return false;"> un mensaje en la caja de texto </a>

<a href="" onMouseOver="document.formu.caja.value='adios';" onClick="return false;"> otro mensaje en la caja </a>

<FORM NAME="formu"><INPUT TYPE="text" NAME="caja" SIZE="40" VALUE=""></FORM>

</BODY></HTML>Ceuta 9 - 13 Julio 2007 50


Ejercicio:

Hacer una página web que muestre un formulariocon tres elementos de texto (nombre, teléfono y dirección).

Hacer la programación Javascript para que cuando se pulse el botón de enviar, se compruebe que cada elementotiene un valor (no está vacío).

ayuda …

Ceuta 9 - 13 Julio 2007 51


Ejercicio (ayuda)</SCRIPT>function validar( formulario ) {

if (formulario.campo.value == '') {alert(“campo vacio”);return false;

} else {return true;

}} </SCRIPT>

<form name=“miform" action=“pagina.htm"onSubmit="return validar(this);">

<input type="text" name=“campo" VALUE=""><input type="submit" value="Enviar" name="enviar"></form> Ceuta 9 - 13 Julio 2007 52


Uso de temporizadores

En ocasiones querremos planificar cierta acción para un tiempo futuro

Para eso utilizaremos un temporizador:

setTimeout( “sentenciasJS;“ , milisegundos );

clearTimeout(variable)

También podremos hacer que una acción se repita indefinidamente cada cierto número de segundos

14

Ceuta 9 - 13 Julio 2007 53


Ejemplo: temporizador<HTML><HEAD>

<SCRIPT>function mensaje() {

setTimeout("alert(‘Salgo a los 2 segundos');",2000);}

</SCRIPT>

</HEAD><BODY onLoad="mensaje();">Página con un temporizador.</BODY></HTML>

El evento onLoad se activa cuando se carga la página HTML

Ceuta 9 - 13 Julio 2007 54


Ejercicio:

Hacer una página web que muestra dos enlaces.Al pulsar el primero debe aparecer inmediatamente una ventana mostrando un mensaje.Al pulsar el segundo debe aparecer, dos segundos después, una ventana mostrando otro mensaje.

Ceuta 9 - 13 Julio 2007 55



Eventos.



Ejemplos avanzados

Ceuta 9 - 13 Julio 2007 56


Uso de matrices en Javascript

Para crear programas complejos necesitamos el tipo de dato MATRIZ

En Javascript son dinámicas. Se crean con new Array

var matriz = new Array( 5 );

matriz[0] = 45;

matriz[1] = 3 + 4;

matriz[2] = matriz[0] + matriz[1];

15

Ceuta 9 - 13 Julio 2007 57


Uso de matrices en Javascript

Podemos crearlas y asignarles valor directamente. Para calcular eltamaño podemos usar la propiedad length

var matriz = new Array( “cadena”,23,45,”juan” );

for(i=0; i< matriz.length ; i++){

alert( “elemento “+ i +”=“+ matriz[i] );

}

Ceuta 9 - 13 Julio 2007 58


Ejercicio:

Hacer una página web que incluye un programa Javascriptque pide siete nombres, los va guardando en un arrayy posteriormente los muestre concatenados usandoun “alert”.

Ceuta 9 - 13 Julio 2007 59




Definición de matrices

Definición de objetos

Ejemplos avanzados

Ceuta 9 - 13 Julio 2007 60


Creación de objetos en Javascript

Para crear un objeto y asignarle propiedades, debemos hacer unafunción constructor

De esta forma encapsulamos varias propiedades de un mismo objeto.

Para crear en el programa una instancia del objeto, usamos new

Se pueden añadir funciones miembro a un objeto, y posteriormenteacceder a sus propiedades o a sus funciones miembro

16

Ceuta 9 - 13 Julio 2007 61


Ejemplo de uso de objetos

function amigo( nombre , tlf ){

this.nombre = nombre;

this.tlf = tlf;

}

var amigo1 = new amigo(“juan”,956453412);

var amigo2 = new amigo(“pepe”,666777888);

alert( amigo1.nombre );

Ceuta 9 - 13 Julio 2007 62





Ejemplos avanzados

Ceuta 9 - 13 Julio 2007 63


Ejemplos avanzados

Fecha y hora

Días hasta un cumpleaños

Reloj

Cronómetro

Uso de ficheros para guardar los programas JavascriptCeuta 9 - 13 Julio 2007 64


Cómo calcular la hora y fecha

Podemos calcular la hora y fecha con:new Date()

podemos asignarlo a una variable que después nos dará hora, minutos, segundos, mes, día y año:

d.getDate() d.getMonth() d.getFullYear()

d.getHours() d.getMinutes() d.getSeconds()

17

Ceuta 9 - 13 Julio 2007 65


Ejemplo: fecha y hora

<SCRIPT LANGUAGE="JavaScript">

var d = new Date();

fecha = d.getDate() + "/";fecha += (d.getMonth()+1) + "/“;fecha += d.getFullYear();

hora = d.getHours() + ":";hora += d.getMinutes() + ":";hora += d.getSeconds();

document.write( " Fecha: " + fecha + " );document.write( " Hora: " + hora + );

</SCRIPT> Ceuta 9 - 13 Julio 2007 66


Ejemplo: Cumpleaños

<SCRIPT LANGUAGE="JavaScript">

var now=new Date();var cumple=new Date("2007, 09, 23");

var dif= cumple.getTime() - now.getTime();dif = Math.floor(dif/(1000*60*60*24)) + 1;

if( dif == 0 ){document.write(" Hoy es mi cumpleaños ");

}else{document.write(" Aún faltan "+ dif +" dias ");

}

</SCRIPT>

Eso da el número de milisegundos

Ceuta 9 - 13 Julio 2007 67


Ejemplo: reloj<HTML><HEAD><SCRIPT>function hora() {var h=new Date();document.f1.hora.value = h.getHours()+":";document.f1.hora.value += h.getMinutes()+":";document.f1.hora.value += h.getSeconds();setTimeout( "hora();" , 1000 );

}</SCRIPT></HEAD>

<BODY><FORM name="f1">Hora: <INPUT TYPE="text" NAME="hora" SIZE="8">

</FORM><SCRIPT>hora()</SCRIPT>

</BODY></HTML>

Usamos un TIMER para llamar la función

cada segundo

Ceuta 9 - 13 Julio 2007 68

DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAvar h_ini;var crono;function crono_start() {h_ini=new Date();crono_cuenta();

}function crono_pon() {var h_act=new Date();milisec=(h_act-h_ini);h_crono=Math.floor( milisec/3600000 ) % 24;m_crono=Math.floor( milisec/60000 ) % 60;s_crono=Math.floor( milisec/1000 ) % 60;milisec=milisec%1000;

document.f1.crono.value=h_crono+":"+m_crono+":"+s_crono+"."+milisec;}function crono_cuenta() {crono_pon();crono=setTimeout( "crono_cuenta();",53 );

}

Ejemplo: cronómetro (primera parte)

18

Ceuta 9 - 13 Julio 2007 69


Ejemplo: cronómetro (segunda parte)

function crono_stop() {clearTimeout( crono );

}function crono_reset() {h_ini=new Date();crono_pon();

}

<FORM name="f1">Crono: <INPUT TYPE="text" NAME="crono" SIZE="12" VALUE="00:00:00.000"><INPUT TYPE="button" VALUE="Start" onClick="crono_start();"><INPUT TYPE="button" VALUE="Stop" onClick="crono_stop();"><INPUT TYPE="button" VALUE="Reset" onClick="crono_reset();">

</FORM>

Ceuta 9 - 13 Julio 2007 70


Ejemplo: fichero externo

<HTML><HEAD>

<SCRIPT SRC="http://servidor.com/directorio/fichero.js“> </SCRIPT>

</HEAD><BODY>

<SCRIPT> funcion() </SCRIPT>

</BODY></HTML>

Ceuta 9 - 13 Julio 2007 71


Ejercicio:

Modificar el ejemplo del cronómetro para poner las funcionesJavascript en un fichero externo a la página web.

Ceuta 9 - 13 Julio 2007 72


Ejercicio final:

Haz una página web que incluya una calculadora programada en Javascript.

Puedes hacer una tabla que represente las teclas, y la pantalla puede ser un elemento de formulario.

Incluye las funciones que creas oportunas(suma, resta, mutiplicación, división…)

19

Ceuta 9 - 13 Julio 2007 73


¡eso es todo!

Pedro A. Castillo ValdiviesoUniversidad de Granada

javascript 4en4

Technology