Fernando Alonso Blázquez Programación en páginas Web: JavaScript 04 de Marzo de 2004

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 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 CampoValidar Campo Realizar cálculos simples –Indice de Masa CorporalIndice de Masa Corporal Juegos –BattleshipBattleship O simplemente... pasar el tiempo –Mouse Trail ClockMouse Trail Clock Hacer interactiva una página web –Graficar FuncionesGraficar Funciones –Check AllCheck 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 del HTML –No es necesario que esté todo el código allí –Asegura que todo el código haya sido definido antes del del documento. La TAG function valor_abs(form) { var num = eval(form.expr.value) if (num >= 0) form.result.value = num else num = -num form.result.value = num }

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 <FORM name="nombre_del_formulario"... onSubmit="función_o_sentencia">

Gestores de Eventos (Event Handlers) EventoOcurre CuandoGestor blurEl usuario quita el cursor de un elemento de formularioonBlur clickEl usuario clica un link o un elemento de formularioonClick changeEl usuario cambia el valor de un texto, un área de texto o selecciona un elemento. onChange focusEl usuario coloca el cursor en un elemento de formulario.onFocus loadEl usuario carga una página en el NavegadoronLoad MouseoverEl usuario mueve el ratón sobre un linkonMouseOver SelectEl usuario selecciona un campo del elemento de un formularioonSelect SubmitSe envía un formularioonSubmit UnloadSe descarga la páginaonUnload

Estructura de un HTML con JavaScript Funciones JavaScript –Dentro de un bloque –Dentro del del documento HTML no interactivo –Dentro del del documento HTML interactivo –Atributos Gestores de Eventos cuyos valores son funciones de JavaScript definidas en el bloque 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 Ejemplo sencillo de página HTML Este es el principio de la página // ancla Introduzca su nombre: Clica aquí para ir al principio de la página // link 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: JavaScript 04 de Marzo de 2004