Javascript 4en4

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
Sería útil poder interaccionar y programar acciones asociadas

a ciertos elementos de la página
Pedro A. Castillo Valdivieso
Universidad de Granada
Ceuta 9 - 13 Julio 2007 1 Ceuta 9 - 13 Julio 2007 2
Introducción al Javascript Introducción al Javascript
Javascript es un lenguaje 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
1
¿Qué no es Javascript? Í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 window y document
Javascript NO es Java Definición de matrices y objetos

Sintaxis de Javascript Operaciones con cadenas y números
Toma su sintaxis de lenguajes de programación más conocidos …con cadenas

C++ y Pascal cad1 = “las cosas”;
Se concatenan ambas
cad2 = “van mejorando”;
cadenas y se guarda en cad3
Definición de variables: cad3 = cad1 + cad2 ;
Hemos definido dos
<HTML>
variables, una de tipo cadena
<SCRIPT> y la otra de tipo numérico …con variables numéricas
numero = 73; num1 = 7;
cadena = “contenido de la cadena”; num2 = 2; Se suman los valores y el
</SCRIPT> num3 = num1 + num2 ; resultado se guarda en num3
2
Índice de la presentación ¿Cómo se usa Javascript?

Crearemos una página HTML
Introducción <HTML> e insertaremos el programa
entre etiquetas <SCRIPT> y
<HEAD> </SCRIPT>
Sintaxis básica de Javascript <SCRIPT>
variable = 45 * 3 ;
Cómo trabajar con Javascript cadena = “ un contenido “;
</SCRIPT>
Eventos. Objetos window y document </HEAD>
La página HTML se
<BODY> interpreta y se muestra. Al
encontrar los scripts, se
Definición de matrices y objetos ... ejecutan línea por línea
3
¿Cómo vamos a hacer los ejemplos?
4
3
Sentencias en los programas Probar el primer ejemplo...
La asignación de valores a variables se hace como en C++ <HTML>

<BODY>
Veamos cómo mostrar mensajes y valores de variables <b>esta página mostrará un mensaje en una ventana</b>
y cómo realizar entradas de datos: <SCRIPT>
<HTML> variable = 1;
<SCRIPT> alert(“mensaje en la ventana” + variable);
alert(“ un mensaje en una ventana “); </SCRIPT>
Crear una página HTML.
</SCRIPT> </BODY> El navegador ejecuta las
La sentencia ALERT sentencias del JS y
... </HTML> muestra el mensaje.
muestra una ventana
Ceuta 9 - 13 Julio 2007 con el mensaje13 Ceuta 9 - 13 Julio 2007 14
Probar el segundo ejemplo... Índice de la presentación
<HTML> Cómo trabajar con Javascript

<BODY>
<b>Contenido escrito directamente en la página</b> Sintaxis básica de Javascript
<SCRIPT>
variable = 1; Eventos. Objetos window y document
document.writeln(“y escrito desde JS”);
</SCRIPT> Definición de matrices y objetos
Crear una página HTML.
</BODY> Lo que escribamos con
WRITELN aparece en el
</HTML> documento.
4
Definición de funciones 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: <HTML>
<HTML> <SCRIPT>
<SCRIPT> function suma3 () {
function suma3 () { var numero = numero + 3;
numero = numero + 3; }
En este ejemplo estamos
} definiendo una variable que
En este ejemplo estamos sólo existe dentro del
suma3(); suma3();
usando una variable global cuerpo de la función
</SCRIPT> </SCRIPT>
Sentencias en los programas Sentencias en los programas
Recordemos cómo 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: <HTML>
<SCRIPT>
<HTML> dato = prompt(“Dame el dato:“);
<SCRIPT> alert( “has tecleado: “ + dato );
alert(“ un mensaje en una ventana “); </SCRIPT>
</SCRIPT> ... La sentencia PROMPT
... ... pide un dato por teclado.
La sentencia ALERT
La sentencia ALERT lo
muestra una ventana
muestra en una ventana.
con el mensaje
5
Ejercicio: Sentencias en los programas
Hacer una página web que incluya un programa Para escribir en el documento, usaremos WRITELN:
en Javascript que pida los datos personales <BODY>
y luego los muestre concatenados <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
Ejemplo: prompt + alert Ejemplo: status
<HTML> <HTML>
<BODY> <BODY>
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); </SCRIPT>
</SCRIPT> </BODY>
</BODY> </HTML> </HTML>
6
Estructuras de control condicionales Estructuras de control iterativas
if (condicion) { switch (variable) { while (condicion) {

sentencias_true case valor: { sentencias;
}else{ sentencias; }
sentencias-else break; } for(inic;condic;increm){
} case otrovalor: { sentencias;
sentencias; do { }
break; } sentencias;
default: sentencias; }while ( condicion );
}
Ejemplo: crear una tabla con javascript Ejercicio:

<SCRIPT>
Hacer una página web que incluya un programa
filas = 7;
en Javascript que pida los nombres de cinco
Colum = 7;
personas y después los imprima en el mismo documento.
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>
7
Índice de la presentación Eventos en Javascript
Cómo trabajar con Javascript Un evento es algo que puede ocurrir mientras se ejecuta un programa
Sintaxis básica de Javascript • Mover el ratón

• Pulsar una tecla
Eventos. • etc.
Objetos window y document Queremos ejecutar ciertas acciones cuando

suceda uno de esos eventos
Definición de matrices y objetos

Eventos en Javascript Ejemplo: onMouseOver
Para asociar un evento a un elemento de la página HTML : <SCRIPT>

function gracias() {
alert( "parece que el ejemplo funciona" );
<ETIQUETA atributo=valor onEvento=“programaJS;”>
}
Cuando suceda ese evento al
elemento, se ejecuta un programa
</SCRIPT>
Entre comillas dobles podemos llamar a una función Javascript

o poner varias instrucciones directamente <A HREF="http://www.ugr.es" onMouseOver="gracias();">
pasa el cursor por encima de este enlace</A>
Debemos conocer los eventos que pueden asociarse a cada elemento
8
Ejemplo: status Tabla de eventos asociados a etiquetas

Eventos Objetos que los soportan
<HTML> abort image

blur window,frame, elementos de form
<BODY> click button,radio,checkbox,submit,reset,link
Al pasar por el enlace la barra de estado cambia Change text,textarea,select
load body
focus window,frame,elementos de form
<A href="http://www.google.es" error image,window
onMouseOver="window.status=‘mensaje en la barra';”> mouseout area,link
mouseover link
el enlace...</A>
reset form
select text,textarea
</BODY> submit submit

unload body
</HTML>
Ejemplo: onMouseOver / OnMouseOut Ejemplo: onLoad / onUnload

<SCRIPT>
<HTML> function entrada() {
<BODY> alert("acabas de llegar a mi web");
<a href="http://www.google.com" }
function salida() {
onClick="alert('Has pulsado el enlace');"
alert("¿tan pronto quieres irte?");
onMouseOver="alert('encima del enlace');" }
onMouseOut="alert('fuera del enlace');"> </SCRIPT>
acerca el cursor a este enlace</a>
<BODY onLoad="entrada();"
</BODY>
onUnLoad="salida();">
</HTML>
la web que saluda al entrar y te pide que no te vayas.
9
Índice de la presentación 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
Objetos window y document Ejemplo: abrir y cerrar ventanas
A partir del objeto window podemos abrir una nueva ventana para ver <SCRIPT>
var nueva;
una nueva página en ella: 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: </SCRIPT>
<a href=""
variable.close(); onClick="abrir(); return false;"> abre una ventana </a>
<a href=""
Ceuta 9 - 13 Julio 2007 39 Ceuta 9 onClick="cerrar();
- 13 Julio 2007 return false;"> cierrala</a> 40
10
Ejercicio: El objeto history

El navegador guarda un historial de las páginas visitadas.
Hacer una página web que incluya un programa
Normalmente usamos los botones de la barra de herramientas.
en Javascript que abre una ventana nueva y muestra
un texto de ayuda (una página nueva).
Desde Javascript podemos obtener el mismo resultado con el objeto history
Ejemplo: history 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
<HTML>
<BODY>
Existe un array de imágenes dentro de document :
<FORM>
<input type="button" value="Atras" document.images[‘cabecera’].src
onClick="history.back();">
Eso sería el nombre
<input type="button" value="2 Atras"
de una imagen
onClick="history.go(-2);">
Si asignamos un nuevo fichero, la imagen definida en la página
</FORM>
</BODY>
</HTML>
cambia automáticamente
11
Ejemplo: imágenes Ejercicio:
Hacer una página web que muestra un menú hecho

<HTML>
<BODY> a base de imágenes.
<A HREF=""
onMouseOver="document.images['prueba'].src='uno.gif';" Hacer la programación Javascript para que cuando pase el ratón
onMouseOut="document.images['prueba'].src='dos.gif';" sobre alguna de las imágenes (opciones) cambie la imagen
onClick="return false;">
cambiar la imagen</a> y se vea resaltada.
<p>
<IMG SRC="dos.gif" NAME="prueba">
</BODY>
</HTML>
Es importante ponerle un
nombre a la imagen para
acceder después
Manejo de los elementos de formulario 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
document.nombreFormulario.nombreElemento.value
• Asignar valores a los campos de formulario en función de eventos Accedemos al valor de uno
de los elementos del
formulario definido
• Comprobar el formato del dato que contiene un elemento Sin teclear nada, podemos cambiar el contenido del elemento
desde Javascript
12
Ejemplo: elementos de formulario Ejercicio:
<HTML><BODY> Hacer una página web que muestre un formulario

<a href="" 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 </a>
Hacer la programación Javascript para que cuando
<a href=""
onMouseOver="document.formu.caja.value='adios';" se pulse el botón de enviar, se compruebe que cada elemento
onClick="return false;"> otro mensaje en la caja </a> tiene un valor (no está vacío).
<FORM NAME="formu">
<INPUT TYPE="text" NAME="caja" SIZE="40" VALUE="">
ay
</FORM>
ud
a…
</BODY></HTML>
Ejercicio (ayuda) Uso de temporizadores

</SCRIPT>
function validar( formulario ) { En ocasiones querremos planificar cierta acción para un tiempo futuro
if (formulario.campo.value == '') {
alert(“campo vacio”);
return false;
Para eso utilizaremos un temporizador:
} else {
return true;
}
}
setTimeout( “sentenciasJS;“ , milisegundos );
</SCRIPT> clearTimeout(variable)
<form name=“miform" action=“pagina.htm"
onSubmit="return validar(this);">
También podremos hacer que una acción se repita indefinidamente
<input type="text" name=“campo" VALUE=""> cada cierto número de segundos
<input type="submit" value="Enviar" name="enviar">
Ceuta 9 - 13 Julio 2007
</form> 51 Ceuta 9 - 13 Julio 2007 52
13
Ejemplo: temporizador Ejercicio:

<HTML>
<HEAD> Hacer una página web que muestra dos enlaces.
Al pulsar el primero debe aparecer inmediatamente una
<SCRIPT>
function mensaje() { ventana mostrando un mensaje.
setTimeout("alert(‘Salgo a los 2 segundos');",2000);
} Al pulsar el segundo debe aparecer, dos segundos después,
</SCRIPT> una ventana mostrando otro mensaje.
</HEAD>
<BODY onLoad="mensaje();">
Página con un temporizador.
</BODY>
</HTML>
El evento onLoad se activa
cuando se carga la página HTML
Índice de la presentación 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
Definición de matrices y objetos var matriz = new Array( 5 );

matriz[0] = 45;
Ejemplos avanzados matriz[1] = 3 + 4;
matriz[2] = matriz[0] + matriz[1];
14
Uso de matrices en Javascript Ejercicio:
Podemos crearlas y asignarles valor directamente. Para calcular el Hacer una página web que incluye un programa Javascript
tamaño podemos usar la propiedad length que pide siete nombres, los va guardando en un array
y posteriormente los muestre concatenados usando
var matriz = new Array( “cadena”,23,45,”juan” ); un “alert”.
for(i=0; i< matriz.length ; i++){
alert( “elemento “+ i +”=“+ matriz[i] );
}
Índice de la presentación 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
15
Ejemplo de uso de objetos Í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 );
Ejemplos avanzados 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()
Cronómetro
d.getHours() d.getMinutes() d.getSeconds()
Uso de ficheros para guardar los programas Javascript
16
Ejemplo: fecha y hora Ejemplo: Cumpleaños

<SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript">
var d = new Date(); var now=new Date();

var cumple=new Date("2007, 09, 23"); Eso da el número
fecha = d.getDate() + "/"; de milisegundos
fecha += (d.getMonth()+1) + "/“; var dif= cumple.getTime() - now.getTime();
fecha += d.getFullYear(); dif = Math.floor(dif/(1000*60*60*24)) + 1;
hora = d.getHours() + ":"; if( dif == 0 ){

hora += d.getMinutes() + ":"; document.write(" Hoy es mi cumpleaños ");
hora += d.getSeconds(); }else{
document.write(" Aún faltan "+ dif +" dias ");
document.write( " Fecha: " + fecha + " ); }
document.write( " Hora: " + hora + );
</SCRIPT>
Ceuta 9</SCRIPT>
- 13 Julio 2007 65 Ceuta 9 - 13 Julio 2007 66
var h_ini;
Ejemplo: reloj var crono; Ejemplo: cronómetro (primera parte)
function crono_start() {
<HTML><HEAD> h_ini=new Date();
<SCRIPT> crono_cuenta();
function hora() { }
var h=new Date(); function crono_pon() {
document.f1.hora.value = h.getHours()+":"; var h_act=new Date();
document.f1.hora.value += h.getMinutes()+":"; milisec=(h_act-h_ini);
document.f1.hora.value += h.getSeconds(); h_crono=Math.floor( milisec/3600000 ) % 24;
setTimeout( "hora();" , 1000 ); m_crono=Math.floor( milisec/60000 ) % 60;
} Usamos un TIMER s_crono=Math.floor( milisec/1000 ) % 60;
</SCRIPT> para llamar la función milisec=milisec%1000;
</HEAD> cada segundo
document.f1.crono.value=h_crono+":"+m_crono+":"+s_crono+"."+milisec;
<BODY> }
<FORM name="f1"> function crono_cuenta() {
Hora: <INPUT TYPE="text" NAME="hora" SIZE="8"> crono_pon();
</FORM> crono=setTimeout( "crono_cuenta();",53 );
Ceuta 9<SCRIPT>hora()</SCRIPT>
- 13 Julio 2007 67 } Ceuta 9 - 13 Julio 2007 68
</BODY></HTML>
17
Ejemplo: cronómetro (segunda parte) Ejemplo: fichero externo

function crono_stop() {
clearTimeout( crono ); <HTML>
} <HEAD>
function crono_reset() {
h_ini=new Date(); <SCRIPT SRC="http://servidor.com/directorio/fichero.js“> </SCRIPT>
crono_pon();
} </HEAD>
<BODY>
<SCRIPT> funcion() </SCRIPT>

<FORM name="f1">
Crono: <INPUT TYPE="text" NAME="crono" SIZE="12" VALUE="00:00:00.000"> </BODY>
<INPUT TYPE="button" VALUE="Start" onClick="crono_start();"> </HTML>
<INPUT TYPE="button" VALUE="Stop" onClick="crono_stop();">
<INPUT TYPE="button" VALUE="Reset" onClick="crono_reset();">
</FORM>
Ejercicio: Ejercicio final:
Modificar el ejemplo del cronómetro para poner las funciones Haz una página web que incluya una calculadora
Javascript en un fichero externo a la página web. 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…)
18
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
19

Javascript 4en4

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Javascript 4en4

Diunggah oleh

Hak Cipta:

Format Tersedia

DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA

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

Introducción al Javascript Una vez cargadas en el navegador no podemos interaccionar

Sería útil poder interaccionar y programar acciones asociadas

Ceuta 9 - 13 Julio 2007 1 Ceuta 9 - 13 Julio 2007 2

Introducción al Javascript Introducción al Javascript

Javascript es un lenguaje interpretado Los programas se ejecutan en el navegador (cliente):

Ejecución de los programas en el navegador cliente:

No hay intervención por parte del servidor

Ceuta 9 - 13 Julio 2007 3 Ceuta 9 - 13 Julio 2007 4

¿Qué no es Javascript? Índice de la presentación

Javascript no es un lenguaje de propósito general. Introducción

Javascript NO es Java Definición de matrices y objetos

Sintaxis de Javascript Operaciones con cadenas y números

Toma su sintaxis de lenguajes de programación más conocidos …con cadenas

Ceuta 9 - 13 Julio 2007 7 Ceuta 9 - 13 Julio 2007 8

Índice de la presentación ¿Cómo se usa Javascript?

Sentencias en los programas Probar el primer ejemplo...

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

Probar el segundo ejemplo... Índice de la presentación

<HTML> Cómo trabajar con Javascript

Definición de funciones Funciones (variables locales)

Sentencias en los programas Sentencias en los programas

Ejercicio: Sentencias en los programas

Ejemplo: prompt + alert Ejemplo: status

Estructuras de control condicionales Estructuras de control iterativas

if (condicion) { switch (variable) { while (condicion) {

Ejemplo: crear una tabla con javascript Ejercicio:

Índice de la presentación Eventos en Javascript

Sintaxis básica de Javascript • Mover el ratón

Objetos window y document Queremos ejecutar ciertas acciones cuando

Definición de matrices y objetos

Eventos en Javascript Ejemplo: onMouseOver

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

Entre comillas dobles podemos llamar a una función Javascript

Ejemplo: status Tabla de eventos asociados a etiquetas

<HTML> abort image

</BODY> submit submit

Ejemplo: onMouseOver / OnMouseOut Ejemplo: onLoad / onUnload

Índice de la presentación Objetos window y document

Objetos window y document Ejemplo: abrir y cerrar ventanas

Ejercicio: El objeto history

Ceuta 9 - 13 Julio 2007 41 Ceuta 9 - 13 Julio 2007 42

Ejemplo: history Manejo de imágenes desde Javascript

Ejemplo: imágenes Ejercicio:

Hacer una página web que muestra un menú hecho

Manejo de los elementos de formulario Manejo de los elementos de formulario

Ceuta 9 - 13 Julio 2007 47 Ceuta 9 - 13 Julio 2007 48

Ejemplo: elementos de formulario Ejercicio:

<HTML><BODY> Hacer una página web que muestre un formulario

Ejercicio (ayuda) Uso de temporizadores

Ejemplo: temporizador Ejercicio:

Índice de la presentación Uso de matrices en Javascript

Eventos. Para crear programas complejos necesitamos el tipo de dato MATRIZ

Definición de matrices y objetos var matriz = new Array( 5 );

Ceuta 9 - 13 Julio 2007 55 Ceuta 9 - 13 Julio 2007 56

Uso de matrices en Javascript Ejercicio:

Ceuta 9 - 13 Julio 2007 57 Ceuta 9 - 13 Julio 2007 58

Índice de la presentación Creación de objetos en Javascript

Ejemplo de uso de objetos Índice de la presentación

function amigo( nombre , tlf ){ Objetos window y document

Ejemplos avanzados Cómo calcular la hora y fecha

Fecha y hora Podemos calcular la hora y fecha con:

Ejemplo: fecha y hora Ejemplo: Cumpleaños