fernando alonso blázquez
DESCRIPTION
Programación en páginas Web: JavaScript 04 de Marzo de 2004. Fernando Alonso Blázquez. Indice. ¿Qué es un lenguaje Script ? ¿Qué es JavaScript ? ¿Qué se puede hacer con JavaScript ? Generalidades de JavaScript La TAG Modelo de Eventos de JavaScript - PowerPoint PPT PresentationTRANSCRIPT
Fernando Alonso Blázquez
Programación en
páginas Web:
JavaScript04 de Marzo de 2004
Indice
• ¿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– Indice de Masa Corporal
• Juegos– Battleship
• O simplemente... pasar el tiempo– Mouse Trail Clock
• Hacer interactiva una página web– Graficar Funciones– 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)
Evento Ocurre Cuando Gestorblur 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
<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>
document.title
document.anchors[0].name
document.forms[0].method
document.forms[0].elements[1].value
document.links[0].href
Para finalizar...
• Referencia de JavaScript
• Ejemplos
Fernando Alonso Blázquez
Programación en
páginas Web:
JavaScript04 de Marzo de 2004