Download
1 / 15
150 likes | 312 Views
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 <SCRIPT> </SCRIPT> Modelo de Eventos de JavaScript
E N D
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 <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
Hacer interactiva una página web • Graficar Funciones • Check All • 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 ¿Qué se puede hacer con JavaScript?
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 • 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. <SCRIPTtype="text/javascript" src="fuente.js"></SCRIPT> <SCRIPTtype="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 <BODYonLoad="cargarfuncion()"onUnload="descargarfuncion()"> <FORMname="nombre_del_formulario" ... onSubmit="función_o_sentencia"> <INPUTtype="button"name="mycheck"value="HA!"onClick= "alert(‘Te he dicho que no me aprietes’)">
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 Gestores de Eventos (Event Handlers)
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
document.title document.anchors[0].name document.forms[0].method document.forms[0].elements[1].value document.links[0].href Ejemplo <HTML> <HEAD> <TITLE>Ejemplo sencillo de página HTML</TITLE> </HEAD> <BODY> <Aname="principio">Este es el principio de la página</A> // ancla <HR> <FORMmethod="POST"> <P> Introduzca su nombre:<INPUT type="text" name="me" size="70"> </P> <INPUTtype="reset" value="Borrar Datos"> <INPUTtype="submit" value="OK"> </FORM> <HR> Clica aquí para ir al <Ahref="#principio">principio</A> de la página // link </BODY> </HTML>
Para finalizar... • Referencia de JavaScript • Ejemplos
Programación en páginas Web: JavaScript 04 de Marzo de 2004 Fernando Alonso Blázquez
