DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
El lenguaje HTML Hasta ahora habéis hecho páginas HTML completas y vistosas
Introducción al Javascript
Una vez cargadas en el navegador no podemos interaccionar interaccionar Sería útil poder interaccionar y programar acciones asociadas a ciertos elementos elementos de de la página
Pedro A. Castillo Valdivieso Universidad de Granada Ceuta 9 - 13 Julio 2007
1
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Introducción al Javascript
2
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Introducción al Javascript
Javascript es un lenguaje interpretado interpretado
Los programas se ejecutan en el navegador (cliente):
Desarrollo en web Ejecución de los programas en el navegador cliente: Es el navegador el que interpreta las instrucciones
servidor
cliente navegador
No hay intervención por parte del servidor Ceuta 9 - 13 Julio 2007
3
Ceuta 9 - 13 Julio 2007
4
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
¿Qué no es Javascript?
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Índice de la presentación
Javascript no es un lenguaje de propósito general.
Introducción
Pequeños trozos de programa de unas pocas líneas de código. Sintaxis básica de Javascript No da control a todos los recursos del ordenador Cómo trabajar con Javascript No podemos leer o escribir en disco, sólo acceder al documento HTML en el que va inmerso
Eventos. Objetos
Javascript NO es Java
window y document
Definición de matrices y objetos
Ceuta 9 - 13 Julio 2007
5
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Sintaxis de Javascript
6
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Operaciones con cadenas y números
Toma su sintaxis de lenguajes de programación más conocidos
…con cadenas
cad1 = “las cosas”;
C++ y Pascal
cad2 = “van mejorando”; cad3 = cad1 + cad2 ;
Definición de variables:
<SCRIPT>
Hemos definido dos variables, una de tipo cadena y la otra de tipo numérico
…con variables numéricas
numero = 73;
num1 = 7;
cadena = “contenido de la cadena”;
num2 = 2; num3 = num1 + num2 ;
Ceuta 9 - 13 Julio 2007
Se concatenan ambas cadenas y se guarda en cad3
7
Ceuta 9 - 13 Julio 2007
Se suman los valores y el resultado se guarda en num3 8
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Índice de la presentación
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
¿Cómo se usa Javascript? Crearemos una página HTML e insertaremos el programa entre etiquetas <SCRIPT> y
Introducción
<SCRIPT>
Sintaxis básica de Javascript
variable = 45 * 3 ; cadena = “ un contenido “;
Cómo trabajar con Javascript
Eventos. Objetos
window y document
La página HTML se interpreta y se muestra. Al encontrar los scripts, se ejecutan línea por línea
...
Definición de matrices y objetos Ceuta 9 - 13 Julio 2007
9
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
10
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
2 1
3
¿Cómo vamos a hacer los ejemplos? 4 Ceuta 9 - 13 Julio 2007
11
Ceuta 9 - 13 Julio 2007
12
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Sentencias en los programas
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Probar el primer ejemplo...
La asignación de valores a variables se hace como en C++
Veamos cómo
mostrar mensajes y valores de variables
esta página mostrará un mensaje en una ventana <SCRIPT>
y cómo realizar entradas de datos:
variable = 1;
alert(“mensaje en la ventana” + variable);
<SCRIPT>
alert(“ un mensaje en una ventana “);
Crear una página HTML. El navegador ejecuta las sentencias del JS y muestra el mensaje.
La sentencia ALERT muestra una ventana con el mensaje13
... Ceuta 9 - 13 Julio 2007
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Probar el segundo ejemplo...
14
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Índice de la presentación
Cómo trabajar con Javascript
Contenido escrito directamente en la página
Sintaxis básica de Javascript
<SCRIPT> variable = 1;
Eventos. Objetos
window y document
document.writeln(“y escrito desde JS”); Ceuta 9 - 13 Julio 2007
Crear una página HTML. Lo que escribamos con WRITELN aparece en el documento. 15
Definición de matrices y objetos
Ceuta 9 - 13 Julio 2007
16
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Definición de funciones
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Funciones (variables locales)
Podemos agrupar trozos de código que se vayan a usar repetidas veces
Para definir variables locales a la función:
en una función, para llamarla posteriormente:
<SCRIPT>
function suma3 () {
<SCRIPT>
function suma3 () {
var numero = numero + 3;
numero = numero + 3;
}
} En este ejemplo estamos usando una variable global
suma3();
suma3();
Ceuta 9 - 13 Julio 2007
17
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Sentencias en los programas Recordemos cómo
En este ejemplo estamos definiendo una variable que sólo existe dentro del cuerpo de la función 18
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Sentencias en los programas
mostrar mensajes y valores de variables
Entradas de datos se suelen hacer en elementos de formulario o con:
y veamos cómo realizar entradas de datos:
<SCRIPT>
dato = prompt(“Dame el dato:“);
<SCRIPT>
alert( “has tecleado: “ + dato );
alert(“ un mensaje en una ventana “);
... Ceuta 9 - 13 Julio 2007
... La sentencia ALERT muestra una ventana con el mensaje 19
... Ceuta 9 - 13 Julio 2007
La sentencia PROMPT pide un dato por teclado. La sentencia ALERT lo muestra en una ventana. 20
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio:
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Sentencias en los programas
Hacer una página web que incluya un programa en Javascript que pida los datos personales y luego los muestre concatenados
Para escribir en el documento, usaremos WRITELN:
<SCRIPT>
document.writeln(“ algo que aparece “); document.writeln(“ en el documento “); ...
Ceuta 9 - 13 Julio 2007
21
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: prompt + alert
22
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: status
La página de
Un ejemplo que cambia la barra de estado
<SCRIPT>
<SCRIPT>
nombre = prompt(“Cómo te llamas? “);
nombre = prompt(“Cómo te llamas? “);
alert( “Hola, “ + nombre );
window.status= nombre ;
document.write(nombre);
Ceuta 9 - 13 Julio 2007
Lo que escribamos en el documento aparecerá como si lo hubiésemos escrito al crear la página HTML
23
Ceuta 9 - 13 Julio 2007
24
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Estructuras de control condicionales if (condicion) {
Estructuras de control iterativas while (condicion) {
switch (variable) {
sentencias_true
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
sentencias;
case valor: {
}else{
}
sentencias;
sentencias-else
for(inic;condic;increm){
break; }
}
sentencias;
case otrovalor: { do {
sentencias;
}
sentencias;
break; } default: sentencias;
}while ( condicion );
} Ceuta 9 - 13 Julio 2007
25
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: crear una tabla con javascript <SCRIPT> filas = 7; Colum = 7; for (i=0; i
"); for (j=0; j["+i+","+j+"]" ); } document.writeln( "" ); } Ceuta 9 - 13 Julio 2007 27
26
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio: Hacer una página web que incluya un programa en Javascript que pida los nombres de cinco personas y después los imprima en el mismo documento.
Ceuta 9 - 13 Julio 2007
28
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Índice de la presentación
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Eventos en Javascript
Cómo trabajar con Javascript
Un evento es algo que puede ocurrir mientras se ejecuta un programa • Mover el ratón
Sintaxis básica de Javascript
• Pulsar una tecla • etc.
Eventos.
Queremos ejecutar ciertas acciones cuando
Objetos window y document
suceda uno de esos eventos Definición de matrices y objetos Ceuta 9 - 13 Julio 2007
29
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Eventos en Javascript
30
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: onMouseOver <SCRIPT>
Para asociar un evento a un elemento de la página HTML :
Cuando suceda ese evento al elemento, se ejecuta un programa
function gracias() { alert( "parece que el ejemplo funciona" ); }
Entre comillas dobles podemos llamar a una función Javascript o poner varias instrucciones directamente
pasa el cursor por encima de este enlace
Debemos conocer los eventos que pueden asociarse a cada elemento Ceuta 9 - 13 Julio 2007
31
Ceuta 9 - 13 Julio 2007
32
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: status
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Tabla de eventos asociados a etiquetas Eventos
Objetos que los soportan
abort
image
blur
window,frame, elementos de form button,radio,checkbox,submit,reset,link
click
Al pasar por el enlace la barra de estado cambia
Change
text,textarea,select body
load
el enlace...
focus
window,frame,elementos de form
error
image,window
mouseout
area,link
mouseover
link
reset
form
select
text,textarea
submit
submit
unload
Ceuta 9 - 13 Julio 2007
33
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: onMouseOver / OnMouseOut
body
34
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: onLoad / onUnload <SCRIPT> function entrada() { alert("acabas de llegar a mi web"); } function salida() { alert("¿tan pronto quieres irte?"); }
onClick="alert('Has pulsado el enlace');" onMouseOver="alert('encima del enlace');" onMouseOut="alert('fuera del enlace');"> acerca el cursor a este enlace
la web que saluda al entrar y te pide que no te vayas. Ceuta 9 - 13 Julio 2007
35
Ceuta 9 - 13 Julio 2007
36
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Índice de la presentación
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Objetos window y document
Sintaxis básica de Javascript
Para cada página HTML, el navegador define un objeto window y un document para usarlos con Javascript
Eventos. A partir del window podemos acceder a ciertas propiedades de la Objetos window y document
ventana en la que vemos la página
Definición de matrices y objetos
A partir del document podemos acceder a todos los elementos de la página HTML que estamos viendo
Ejemplos avanzados Ceuta 9 - 13 Julio 2007
37
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Objetos window y document
38
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: abrir y cerrar ventanas
A partir del objeto window podemos abrir una nueva ventana para ver una nueva página en ella:
<SCRIPT>
var nueva; function
abrir() {
nueva = window.open("http://www.google.com", "abierta", "toolbar=yes,location=yes,menubar=yes,resizable=yes" );
variable = window.open(“URL”,”nombre”,”propiedades”);
} function
cerrar() {
nueva.close(); }
Para cerrarla, usamos la variable creada:
variable.close();
onClick="abrir(); return false;"> abre una ventana
Ceuta 9 - 13 Julio 2007
39
Ceuta 9 onClick="cerrar(); - 13 Julio 2007 return false;"> cierrala
40
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio:
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
El objeto history El navegador guarda un historial de las páginas visitadas.
Hacer una página web que incluya un programa en Javascript que abre una ventana nueva y muestra un texto de ayuda (una página nueva).
Ceuta 9 - 13 Julio 2007
Normalmente usamos los botones de la barra de herramientas. Desde Javascript podemos obtener el mismo resultado con el objeto history
41
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: history
42
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Manejo de imágenes desde Javascript
con history.back() retrocedemos una página en el historial visitado
A partir del objeto document podemos acceder a las imágenes de la
con history.back(-2) retrocedemos dos páginas en el historial visitado :
página y cambiarlas
Ceuta 9 - 13 Julio 2007
Eso sería el nombre de una imagen definida en la página
cambia automáticamente 43
Ceuta 9 - 13 Julio 2007
44
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: imágenes
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio: Hacer una página web que muestra un menú hecho a base de imágenes. Hacer la programación Javascript para que cuando pase el ratón sobre alguna de las imágenes (opciones) cambie la imagen y se vea resaltada.
onMouseOver="document.images['prueba'].src='uno.gif';" onMouseOut="document.images['prueba'].src='dos.gif';" onClick="return false;"> cambiar la imagen
Es importante ponerle un nombre a la imagen para acceder después Ceuta 9 - 13 Julio 2007
45
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Manejo de los elementos de formulario
46
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Manejo de los elementos de formulario
Podemos controlar los elementos de formulario desde Javascript:
Igual que accedemos a las imágenes, podemos acceder a los elementos de formulario
•
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
document.nombreFormulario.nombreElemento.value Accedemos al valor de uno de los elementos del formulario definido
Sin teclear nada, podemos cambiar el contenido del elemento desde Javascript
Ceuta 9 - 13 Julio 2007
47
Ceuta 9 - 13 Julio 2007
48
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: elementos de formulario
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio: Hacer una página web que muestre un formulario con tres elementos de texto (nombre, teléfono y dirección).
onMouseOver="document.formu.caja.value='hola';" onClick="return false;"> un mensaje en la caja de texto
onMouseOver="document.formu.caja.value='adios';" onClick="return false;"> otro mensaje en la caja
Hacer la programación Javascript para que cuando se pulse el botón de enviar, se compruebe que cada elemento tiene un valor (no está vacío).
Ceuta 9 - 13 Julio 2007
49
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio (ayuda)
50
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Uso de temporizadores
En ocasiones querremos planificar cierta acción para un tiempo futuro
function validar( formulario ) { if (formulario.campo.value == '') { alert(“campo vacio”); return false; } else { return true; } }
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 51
Ceuta 9 - 13 Julio 2007
52
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: temporizador
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
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.
<SCRIPT>
function mensaje() { setTimeout("alert(‘Salgo a los 2 segundos');",2000); }
Página con un temporizador. Ceuta 9 - 13 Julio 2007
El evento onLoad se activa cuando se carga la página HTML
53
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Índice de la presentación
54
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Uso de matrices en Javascript
Eventos.
Para crear programas complejos necesitamos el tipo de dato MATRIZ
Objetos window y document
En Javascript son dinámicas. Se crean con new Array
var matriz = new Array( 5 );
Definición de matrices y objetos
matriz[0] = 45; matriz[1] = 3 + 4;
Ejemplos avanzados
matriz[2] = matriz[0] + matriz[1]; Ceuta 9 - 13 Julio 2007
55
Ceuta 9 - 13 Julio 2007
56
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Uso de matrices en Javascript
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio:
Podemos crearlas y asignarles valor directamente. Para calcular el tamaño podemos usar la propiedad length
var matriz = new Array( “cadena”,23,45,”juan” );
Hacer una página web que incluye un programa Javascript que pide siete nombres, los va guardando en un array y posteriormente los muestre concatenados usando un “alert”.
for(i=0; i< matriz.length ; i++){ alert( “elemento “+ i +”=“+ matriz[i] ); }
Ceuta 9 - 13 Julio 2007
57
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Índice de la presentación
58
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Creación de objetos en Javascript
Objetos window y document
Para crear un objeto y asignarle propiedades, debemos hacer una función constructor
Definición de matrices De esta forma encapsulamos varias propiedades de un mismo objeto. Definición de objetos Para crear en el programa una instancia del objeto, usamos new Ejemplos avanzados Se pueden añadir funciones miembro a un objeto, y posteriormente acceder a sus propiedades o a sus funciones miembro Ceuta 9 - 13 Julio 2007
59
Ceuta 9 - 13 Julio 2007
60
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo de uso de objetos
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Índice de la presentación
function amigo( nombre , tlf ){
Objetos window y document
this.nombre = nombre; this.tlf = tlf;
Definición de matrices y objetos
} Ejemplos avanzados
var amigo1 = new amigo(“juan”,956453412); var amigo2 = new amigo(“pepe”,666777888); alert( amigo1.nombre ); Ceuta 9 - 13 Julio 2007
61
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplos avanzados
62
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Cómo calcular la hora y fecha
Fecha y hora
Podemos calcular la hora y fecha con:
new Date() Días hasta un cumpleaños podemos asignarlo a una variable que después nos dará hora, minutos, Reloj
segundos, mes, día y año:
d.getDate()
d.getMonth()
d.getFullYear()
d.getHours()
d.getMinutes()
d.getSeconds()
Cronómetro Uso de ficheros para guardar los programas Javascript Ceuta 9 - 13 Julio 2007
63
Ceuta 9 - 13 Julio 2007
64
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: fecha y hora
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: Cumpleaños <SCRIPT LANGUAGE="JavaScript">
<SCRIPT LANGUAGE="JavaScript">
var now=new Date(); var cumple=new Date("2007, 09, 23");
var d = new Date(); fecha = d.getDate() + "/"; fecha += (d.getMonth()+1) + "/“; fecha += d.getFullYear();
var dif= cumple.getTime() - now.getTime(); dif = Math.floor(dif/(1000*60*60*24)) + 1;
Eso da el número de milisegundos
if( dif == 0 ){ document.write(" Hoy es mi cumpleaños "); }else{ document.write(" Aún faltan "+ dif +" dias "); }
hora = d.getHours() + ":"; hora += d.getMinutes() + ":"; hora += d.getSeconds(); document.write( " Fecha: " + fecha + " ); document.write( " Hora: " + hora + );
Ceuta 9 - 13 Julio 2007
65
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: reloj
Usamos un TIMER para llamar la función cada segundo
Ceuta <SCRIPT>hora() 9 - 13 Julio 2007
66
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: cronómetro (primera parte)
<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 ); }
Ceuta 9 - 13 Julio 2007
67
var 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 ); } Ceuta 9 - 13 Julio 2007 68
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: cronómetro (segunda parte)
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejemplo: fichero externo
function crono_stop() { clearTimeout( crono ); } function crono_reset() { h_ini=new Date(); crono_pon(); }
<SCRIPT SRC="http://servidor.com/directorio/fichero.js“>
<SCRIPT> funcion() Ceuta 9 - 13 Julio 2007
69
Ceuta 9 - 13 Julio 2007
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio:
70
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
Ejercicio final:
Modificar el ejemplo del cronómetro para poner las funciones Javascript en un fichero externo a la página web.
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…)
Ceuta 9 - 13 Julio 2007
71
Ceuta 9 - 13 Julio 2007
72
DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA
¡eso es todo! Pedro A. Castillo Valdivieso Universidad de Granada Ceuta 9 - 13 Julio 2007
73