Í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?
(Gp:) Chequear Formularios
Comprobar que se han rellenado correctamente antes de enviarlos y que el servidor de error
Validar Campo
(Gp:) Realizar cálculos simples
Índice de Masa Corporal
(Gp:) O simplemente… Chorradillas
Mouse Trail Clock
(Gp:) Hacer interactiva una página web
Check All
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)
Sintaxis
Atributo SRC: fichero código fuente
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.
< SCRIPT type="text/javascript" src="fuente.js">< /SCRIPT>
La TAG < SCRIPT> < /SCRIPT>
< 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>
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)
(Gp:) Evento
(Gp:) Ocurre Cuando
(Gp:) Gestor
(Gp:) blur
(Gp:) El usuario quita el cursor de un elemento de formulario
(Gp:) onBlur
(Gp:) click
(Gp:) El usuario clica un link o un elemento de formulario
(Gp:) onClick
(Gp:) change
(Gp:) El usuario cambia el valor de un texto, un área de texto o selecciona un elemento.
(Gp:) onChange
(Gp:) focus
(Gp:) El usuario coloca el cursor en un elemento de formulario.
(Gp:) onFocus
(Gp:) load
(Gp:) El usuario carga una página en el Navegador
(Gp:) onLoad
(Gp:) Mouseover
(Gp:) El usuario mueve el ratón sobre un link
(Gp:) onMouseOver
(Gp:) Select
(Gp:) El usuario selecciona un campo del elemento de un formulario
(Gp:) onSelect
(Gp:) Submit
(Gp:) Se envía un formulario
(Gp:) onSubmit
(Gp:) Unload
(Gp:) Se descarga la página
(Gp:) 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
< HTML>
< HEAD>
< TITLE>Ejemplo sencillo de página HTML< /TITLE>
< /HEAD>
< 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">
< /FORM>
< HR>
Clica aquí para ir al
< A href="#principio">principio< /A> de la página // link
< /BODY>
< /HTML>
(Gp:) document.title
(Gp:) document.anchors[0].name
(Gp:) document.forms[0].method
(Gp:) document.forms[0].elements[1].value
(Gp:) document.links[0].href