Programación en
páginas Web:
JavaScript
18 de Febrero de 2009
Índice
•
•
•
•
•
•
•
•
•
¿Qué es un lenguaje Script?
¿Qué es JavaScript?
¿Qué se puede hacer con JavaScript?
Generalidades de JavaScript
La TAG <SCRIPT> </SCRIPT>
Modelo de Eventos de JavaScript
Gestores de Eventos (Event Handlers)
Clases en JavaScript
Jerarquía de Clases
¿Qué es un lenguaje Script?
• Scripting – system programming
– Unos no sustituyen a los otros sino que están
orientados a cosas diferentes
• Extienden las capacidades de la aplicación
con la que trabajan
• Raramente se usan para algoritmos y
estructuras de datos complejas
• Tienden a ser Typeless
–
–
–
–
Detección de errores en tiempo de ejecución
Código y datos son intercambiables
Un programa puede escribir otro y ejecutarlo
Menos código y programas más flexibles
• Problemas de SEGURIDAD
¿Qué es JavaScript?
•
•
•
•
Es un lenguaje Script
Extiende las capacidades de las páginas Web
El código está integrado en el HTML
Se interpreta en el ordenador que recibe el
HTML, no se compila
• Ejecución dinámica
– Los programas y funciones no se chequean hasta
que se ejecutan
• Tiene programación orientada a objetos
• Trabaja con los elementos del HTML
• No se declaran los tipos de variables
¿Qué se puede hacer con JavaScript?
• Chequear Formularios
– Comprobar que se han rellenado correctamente
antes de enviarlos y que el servidor de error
– Validar Campo
• Realizar cálculos simples
– Índice de Masa Corporal
• Hacer interactiva una página web
– Check All
• O simplemente... Chorradillas
– Mouse Trail Clock
Generalidades de JavaScript
• Modelo orientado al WWW
• Elementos de una página HTML pueden
causar un evento que ejecutará una acción
• Esa acción se ejecutará a través de una
serie de sentencias JavaScript
• Comandos de JavaScript:
–
–
–
–
–
Variables
Expresiones
Estructuras de control
Funciones (bloques de sentencias)
Clases, objetos y arrays (agrupaciones de datos)
La TAG <SCRIPT> </SCRIPT>
• Sintaxis
<SCRIPT type="text/javascript" src="fuente.js"></SCRIPT>
• Atributo SRC: fichero código fuente
<SCRIPT type="text/javascript">
function valor_abs(form) {
var num = eval(form.expr.value)
if (num >= 0) form.result.value = num
else num = -num
form.result.value = num
}
</SCRIPT>
• Colocarlo en la sección <HEAD> del HTML
– No es necesario que esté todo el código allí
– Asegura que todo el código haya sido definido
antes del <BODY> del documento.
Modelo de Eventos de JavaScript
• Los eventos suceden a tres niveles:
– A nivel del documento HTML
– A nivel de un formulario individual
– A nivel de un elemento de un formulario
• El evento es gestionado por una sección de
código en JavaScript (Gestor de Eventos)
• Declaración de Gestores de Eventos: similar a
los atributos en HTML
<BODY onLoad="cargarfuncion()" onUnload="descargarfuncion()">
<FORM name="nombre_del_formulario" ...
onSubmit="función_o_sentencia">
<INPUT type="button" name="mycheck" value="HA!" onClick=
"alert(‘Te he dicho que no me aprietes’)">
Gestores de Eventos (Event Handlers)
Evento
Ocurre Cuando
Gestor
blur
El usuario quita el cursor de un elemento de formulario
onBlur
click
El usuario clica un link o un elemento de formulario
onClick
change
El usuario cambia el valor de un texto, un área de texto o
selecciona un elemento.
onChange
focus
El usuario coloca el cursor en un elemento de formulario.
onFocus
load
El usuario carga una página en el Navegador
onLoad
Mouseover
El usuario mueve el ratón sobre un link
onMouseOver
Select
El usuario selecciona un campo del elemento de un formulario
onSelect
Submit
Se envía un formulario
onSubmit
Unload
Se descarga la página
onUnload
Estructura de un HTML con JavaScript
• Funciones JavaScript
– Dentro de un bloque <SCRIPT></SCRIPT>
– Dentro del <HEAD> del documento
• HTML no interactivo
– Dentro del <BODY> del documento
• HTML interactivo
– Atributos Gestores de Eventos cuyos valores son
funciones de JavaScript definidas en el bloque
<HEAD> del HTML
Clases en JavaScript
• Clases Predefinidas
– Clase String: Cada vez que se asigna una cadena
de caracteres a una variable, se crea un objeto
de la clase String
– Clase Math: Se usa para efectuar cálculos
matemáticos
– Clase Date: Para el manejo de fechas y horas
• Clases del Browser o Navegador
– Tienen que ver con la navegación
• Clases del Documento HTML
– Están asociadas con cualquier elemento de una
página Web (link, ancla, formulario, etc.)
• Clases definidas por el usuario
Jerarquía de Clases
Ejemplo
document.title
<HTML>
document.anchors[0].name
<HEAD>
<TITLE>Ejemplo sencillo de página HTML</TITLE>
</HEAD>
document.forms[0].method
<BODY>
<A name="principio">Este es el principio de la página</A> // ancla
<HR>
<FORM method="POST">
<P> Introduzca su nombre:<INPUT type="text" name="me" size="70">
</P>
<INPUT type="reset" value="Borrar Datos">
<INPUT type="submit" value="OK">
document.forms[0].elements[1].value
</FORM>
<HR>
Clica aquí para ir al
<A href="#principio">principio</A> de la página // link
</BODY>
</HTML>
document.links[0].href
Descargar

JavaScript - Arabako Campusa