IES San Sebastián
Huelva
2012 J. J. Taboada León
IES San Sebastián
Huelva
2013 J. J. Taboada León
UNA APROXIMACIÓN
19/11/2013 Lenguajes de Marcas y Sistemas de Gestión
de la Información. HTML5 y CSS3
Java Script y
HTML5
IES San Sebastián
Huelva
2012 J. J. Taboada León
¿Qué es JavaScript? Es un Lenguaje de programación que se utiliza
principalmente para crear páginas web dinámicas
Es un lenguaje de programación interpretado
(se pueden probar directamente en cualquier navegador)
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
Una página web dinámica incorpora efectos :
texto que aparece y desaparece, animaciones,
acciones que se activan al pulsar botones y
ventanas con mensajes de aviso al usuario.
Una página web dinámica incorpora efectos :
texto que aparece y desaparece, animaciones,
acciones que se activan al pulsar botones y
ventanas con mensajes de aviso al usuario.
IES San Sebastián
Huelva
2012 J. J. Taboada León
Cómo incluir JavaScript en
documentos HTML5
Tres formas:
En el mismo documento HTML
Definir JavaScript en un archivo externo
Incluir JavaScript en los elementos HTML (es el menos utilizado)
Ver ejemplo
19/11/2013
Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
•El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier
parte del documento.
•Se recomienda definir el código JavaScript dentro de la etiqueta <head> Ver
ejemplo
•El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier
parte del documento.
•Se recomienda definir el código JavaScript dentro de la etiqueta <head> Ver
ejemplo
Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo
JavaScript que los documentos HTML enlazan mediante la etiqueta <script>
Ver ejemplo
Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo
JavaScript que los documentos HTML enlazan mediante la etiqueta <script>
Ver ejemplo
IES San Sebastián
Huelva
2012 J. J. Taboada León
Etiqueta noscript Se utiliza para aquellos navegadores que no disponen de
soporte completo de JavaScript (se incluye al principio de la etiqueta
body)
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
<head> ... </head> <body> <noscript>
<p>Bienvenido a Mi Sitio</p> <p>La página que estás viendo requiere para su funcionamiento el uso de JavaScript. Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript> </body>
<head> ... </head> <body> <noscript>
<p>Bienvenido a Mi Sitio</p> <p>La página que estás viendo requiere para su funcionamiento el uso de JavaScript. Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript> </body>
IES San Sebastián
Huelva
2012 J. J. Taboada León
Glosario básico Script: cada uno de los programas, aplicaciones o trozos de
código creados con el lenguaje de programación JavaScript
Sentencia: cada una de las instrucciones que forman un
script
Palabras reservadas: son las palabras (en inglés) que se
utilizan para construir las sentencias de JavaScript. (break, case, catch, continue, default, delete, do, else, finally,
for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with)
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Sintaxis No se tienen en cuenta los espacios en blanco y las
nuevas líneas
Se distinguen las mayúsculas y minúsculas
No se define el tipo de las variables
No es necesario terminar cada sentencia con el
carácter de punto y coma (;), pero si conveniente
Se pueden incluir comentarios
una sola línea: // a continuación se muestra un mensaje
varias líneas: /* Comentario */
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Posibilidades y limitaciones Flash disminuyó la popularidad de javaScript
AJAX se la ha devuelto
Limitaciones: JavaScript no puede comunicarse con recursos que no pertenezcan al
mismo dominio desde el que se descargó el script.
No pueden cerrar ventanas que no hayan abierto esos mismos scripts.
No pueden acceder a los archivos del ordenador del usuario (ni en modo
lectura ni en modo escritura)
No pueden leer o modificar las preferencias del navegador.
Podemos saltar algunas limitaciones Firmar digitalmente el script y solicitar al
usuario el permiso para realizar esas acciones.
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
JavaScript en otros entornos Adobe Acrobat permiten incluir código JavaScript en
archivos PDF
Photoshop permite realizar pequeños scripts mediante
JavaScript
La versión 6 de Java incluye un nuevo paquete denominado
(javax.script) que permite integrar ambos lenguajes
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
El primer script <!DOCTYPE html
<html lang=“es”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>El primer script</title>
<script>
alert("Hola Mundo!");
</script>
</head>
<body> <p>Esta página contiene el primer script</p>
</body>
</html>
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Ejercicios (1) 1.a Escribe el código anterior y pruébalo en distintos
navegadores
1.b Modificar el primer script para que:
1. Todo el código JavaScript se encuentre en un archivo externo
llamado codigo.js y el script siga funcionando de la misma manera.
2. Después del primer mensaje, se debe mostrar otro mensaje que diga
"Soy el primer script"
3. Añadir algunos comentarios que expliquen el funcionamiento del
código
4. Añadir en la página HTML un mensaje de aviso para los navegadores
que no tengan activado el soporte de JavaScript
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Ejemplo (JavaScript en documentos HTML)
<!DOCTYPE html>
<html lang=“es”>
<head>
<title>Código JavaScript en el propio documento</title>
<script>
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Ejemplo (JavaScript en un archivo externo) Archivo codigo.js
alert("Un mensaje de prueba");
Documento XHTML
<!DOCTYPE html>
<html lang=“es”>
<head>
<title>JavaScript en el propio documento</title>
<script src="/js/codigo.js"></script>
</head>
<body>……
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Ejemplo (Incluir JavaScript en los elementos HTML)
<!DOCTYPE html>
<html lang=“es”>
<head>
<title>Código JavaScript en elementos</title>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>
</body>
</html>
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Funciones Una función es un conjunto de instrucciones que se agrupan
para realizar una tarea concreta y que se pueden reutilizar
fácilmente.
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
function nombre_funcion(valor) { ... }
function nombre_funcion(valor) { ... }
function mensaje(m) { alert(m); } mensaje(“Bienvenidos a mi WEB”); mensaje(“Encontrarás lo que necesites”);
function mensaje(m) { alert(m); } mensaje(“Bienvenidos a mi WEB”); mensaje(“Encontrarás lo que necesites”);
Definición Definición
Llamada Llamada
Parámetro Parámetro
IES San Sebastián
Huelva
2012 J. J. Taboada León
Referencia a elementos HTML Al colocar el código java script en ficheros externo, es
necesario referenciar los elementos HTML de alguna
manera:
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
getElementsByTagName() :obtiene todos los elementos de la página
HTML cuya etiqueta sea igual que el parámetro que se le pasa a la función.
getElementsByName(): buscan los elementos cuyo atributo name sea
igual al parámetro proporcionado
getElementById(): devuelve el elemento HTML cuyo atributo id
coincide con el parámetro indicado en la función. (es el mas utilizado
debido a la unicidad (id) )
querySelector(): retorna el primer elemento que concuerda con el
grupo de selectores especificados entre paréntesis
querySelectorAll(): retorna todos los elementos que concuerda con el
grupo de selectores especificados entre paréntesis
getElementsByTagName() :obtiene todos los elementos de la página
HTML cuya etiqueta sea igual que el parámetro que se le pasa a la función.
getElementsByName(): buscan los elementos cuyo atributo name sea
igual al parámetro proporcionado
getElementById(): devuelve el elemento HTML cuyo atributo id
coincide con el parámetro indicado en la función. (es el mas utilizado
debido a la unicidad (id) )
querySelector(): retorna el primer elemento que concuerda con el
grupo de selectores especificados entre paréntesis
querySelectorAll(): retorna todos los elementos que concuerda con el
grupo de selectores especificados entre paréntesis
IES San Sebastián
Huelva
2012 J. J. Taboada León
Ejemplo: referencia a elementos HTML Documento HTML
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
<!DOCTYPE html> <html lang=“es”> <head> <title>Referencia a elementos</title>
<script src="/js/codigo.js"></script>
</head> <body>
<div id=“caja1”> <p>párrafo 1. Haz clic</p> <p>párrafo 2. Haz clic</p>
</div> </body>
<!DOCTYPE html> <html lang=“es”> <head> <title>Referencia a elementos</title>
<script src="/js/codigo.js"></script>
</head> <body>
<div id=“caja1”> <p>párrafo 1. Haz clic</p> <p>párrafo 2. Haz clic</p>
</div> </body>
IES San Sebastián
Huelva
2012 J. J. Taboada León
Ejemplo: referencia a elementos HTML
Código javaScript
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
//codigo.js function prueba(){ document.querySelector(“#caja1 p:first-child”).onclick=mostrarMensaje; } function mostrarMensaje(){ alert(‘hizo clic en el párrafo’);
} window.onload=prueba;
//codigo.js function prueba(){ document.querySelector(“#caja1 p:first-child”).onclick=mostrarMensaje; } function mostrarMensaje(){ alert(‘hizo clic en el párrafo’);
} window.onload=prueba;
Ejercicio 2: Ejercicio 2:
1. Crea el documento HTML y el script codigo.js del ejemplo
2. Muéstra en el navegador el documento HTML
3. Haz clic en ambos párrafos para ver como funciona querySelector()
IES San Sebastián
Huelva
2012 J. J. Taboada León
Eventos
Los scripts se dedican a esperar a que el usuario "haga algo" (que
pulse una tecla, que mueva el ratón, que cierre la ventana del navegador).
A continuación, el script responde a la acción del usuario
normalmente procesando esa información y generando un
resultado.
La acciones del usuario se llaman eventos
También hay eventos que son disparados por el sistema como
“load” (se dispara cuando se carga el documento por completo)
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Manejadores de eventos El código que responde a un evento se llama manejador del
evento: Prueba() es el manejador para atender el evento load
mostrarMensaje() es el manejador para atender el evento onclick
en el ejercicio 2 con el que hemos practicado
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Modelo básico de eventos (I)
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Modelo básico de eventos (II)
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
IES San Sebastián
Huelva
2012 J. J. Taboada León
Asociar un manejador de evento a un
evento en HTML5
Se suele utilizar el método addEventListener (“escuchar el
evento”)
Cuenta con tres parámetros o argumentos:
Nombre del evento
La función manejadora del evento
Un valor booleano (falso o verdadero) para controlar los
eventos en elementos superpuestos
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
Ejemplo: window.addEventListener(‘load’,prueba,false); Ejemplo: window.addEventListener(‘load’,prueba,false);
IES San Sebastián
Huelva
2012 J. J. Taboada León
Ejercicio 3
19/11/2013 Lenguajes de Marcas y Sistemas de
Gestión de la Información. HTML5 y CSS3
//codigo.js function prueba(){ //document.querySelector(“#caja1 p:first-child”).onclick=mostrarMensaje; var elemento=document.querySelector(“#caja1 p:first-child”) elemento.addEventListener(‘click’,mostrarMensaje,false); } function mostrarMensaje(){ alert(‘hizo clic en el párrafo’);
} //window.onload=prueba; window.addEventListener(‘load’,prueba,false);
//codigo.js function prueba(){ //document.querySelector(“#caja1 p:first-child”).onclick=mostrarMensaje; var elemento=document.querySelector(“#caja1 p:first-child”) elemento.addEventListener(‘click’,mostrarMensaje,false); } function mostrarMensaje(){ alert(‘hizo clic en el párrafo’);
} //window.onload=prueba; window.addEventListener(‘load’,prueba,false);
