Fernando%20Alonso%20Bl

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

• Qué es un lenguaje Script?
• Qué es JavaScript?
• Qué se puede hacer con JavaScript?
• Generalidades de JavaScript
• La TAG ltSCRIPTgt lt/SCRIPTgt
• Modelo de Eventos de JavaScript
• Gestores de Eventos (Event Handlers)
• Clases en JavaScript
• Jerarquía de Clases

3
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

4
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

5
Qué se puede hacer con JavaScript?
6
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)

7
La TAG ltSCRIPTgt lt/SCRIPTgt

• Sintaxis
• Atributo SRC fichero código fuente
• Colocarlo en la sección ltHEADgt del HTML
• No es necesario que esté todo el código allí
• Asegura que todo el código haya sido definido
  antes del ltBODYgt del documento.

ltSCRIPT type"text/javascript" src"fuente.js"gtlt/S
CRIPTgt
ltSCRIPT type"text/javascript"gt function
valor_abs(form) var num
eval(form.expr.value) if (num gt 0)
form.result.value num else num -num
form.result.value num lt/SCRIPTgt
8
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
• ltBODY onLoad"cargarfuncion()" onUnload"descargar
  funcion()"gt
• ltFORM name"nombre_del_formulario" ...
• onSubmit"función_o_sentencia"gt
• ltINPUT type"button" name"mycheck" value"HA!"
  onClick "alert(Te he dicho que no me
  aprietes)"gt

9
Gestores de Eventos (Event Handlers)
10
Estructura de un HTML con JavaScript

• Funciones JavaScript
• Dentro de un bloque ltSCRIPTgtlt/SCRIPTgt
• Dentro del ltHEADgt del documento
• HTML no interactivo
• Dentro del ltBODYgt del documento
• HTML interactivo
• Atributos Gestores de Eventos cuyos valores son
  funciones de JavaScript definidas en el bloque
  ltHEADgt del HTML

11
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

12
Jerarquía de Clases
13
Ejemplo
ltHTMLgt ltHEADgt ltTITLEgtEjemplo sencillo de
página HTMLlt/TITLEgt lt/HEADgt ltBODYgt ltA
name"principio"gtEste es el principio de la
páginalt/Agt // ancla ltHRgt ltFORM
method"POST"gt ltPgt Introduzca su
nombreltINPUT type"text" name"me" size"70"gt
lt/Pgt ltINPUT type"reset" value"Borrar
Datos"gt ltINPUT type"submit"
value"OK"gt lt/FORMgt ltHRgt Clica
aquí para ir al ltA href"principio"gtprinci
piolt/Agt de la página // link lt/BODYgt lt/HTMLgt
Prueba de valores formulario
14
Para finalizar...

• Ejemplos

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