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



¿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



Í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


2

1

3
¿Cómo vamos a hacer los ejemplos?

4


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.


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


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>


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>


Í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


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.


Í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(); return false;"> cierrala</a>
- 13 Julio 2007 40


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


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



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


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];



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


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


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 - 13 Julio 2007
</SCRIPT> 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 );
<SCRIPT>hora()</SCRIPT>
Ceuta 9 - 13 Julio 2007 67 } Ceuta 9 - 13 Julio 2007 68
</BODY></HTML>


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…)


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

Javascript 4en4

Recomendados

Mais conteúdo relacionado

Semelhante a Javascript 4en4

Semelhante a Javascript 4en4 (20)

Último

Último (20)

Javascript 4en4