JavaScript (I) 1
Lenguajes de Script Qué son los Lenguajes de Script? Scritps de cliente: son programas que pueden acompañar a un documento HTML o bien ir incrustados en él. Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro de un documento HTML. Se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo especial como puede ser el pulsar sobre un enlace. 2
Lenguajes de Script Características El programa se ejecuta en la maquina cliente Son lenguajes sencillos en comparación con el resto de los lenguajes Son independientes de la plataforma en la que se muestre el documento html. Son Diseñados para usarlos en Páginas Web 3
Lenguajes de Script JavaScript Qué es JavaSctript? Javascript es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web. Es un lenguaje de programación del lado del cliente más utilizado 4
JavaScript JavaScript es un lenguaje de script No es un lenguaje orientado a objetos Se organiza entorno a: El núcleo del Lenguaje El lado del Cliente El lado del Servidor 5
JavaScript Básico Palabras reservadas Sintaxis sentencias y programas Reglas para expresiones, variables y literales Modelo de objetos (aunque JavaScript cliente y servidor tienen objetos predefinidos diferentes) Objetos predefinidos y funciones (como Math) 6
JavaScript Cliente Los navegadores pueden interpretar JavaScript en el cliente Cuando un navegador solicita una página, el servidor manda tanto el código HTML como los scripts incluidos en dicho código El navegador lee la página de arriba abajo, mostrando el código HTML y ejecutando los scripts en el orden en que aparecen o son invocados Los scripts pueden reaccionar a los eventos del usuario (ratón, forms, etc) Ejemplo típico: comprobar la corrección de los datos introducidos (antes de mandarlos al servidor) ahorra tiempo! En general, cuando se desarrolla una aplicación web, debemos realizar tanto como sea posible en la parte del cliente 7
Qué se puede hacer con JavaScript? mostrar la fecha/hora del usuario realizar cálculos matemáticos averiguar el navegador del usuario y su versión redireccionar el navegador a otra página crear un árbol de navegación dinámico que facilite la visita de un sitio web validar (localmente) los datos de un formulario antes de enviarlos al servidor crear animaciones (textos con movimiento, imágenes,...) manipular los elementos HTML de una página almacenar temporariamente datos en el cliente 8
Qué NO se puede hacer con JavaScript? escribir datos en un archivo acceder a los archivos del servidor averiguar la dirección de correo del usuario, su dirección IP, etc obtener datos de una BD del servidor gestionar la transmisión de ficheros al servidor... 9
Cómo incluir código JavaScript en un Documento? Incluir código dentro de un elemento <script> <script language = JavaScript > Sentencias Javascript </script> Especificando un archivo externo <script language = JavaScript src= ArchivoJS.js > 10
Cómo incluir código JavaScript en un Documento? Dando valor a un atributo de un elemento HTML Incluido en otras etiquetas HTML como respuesta a algún evento. Ejemplo <form name= f1 > <input type= button name=&{var1}; onclick= fun1; > </form> 11
JavaScript Resulta aconsejable escribir los scripts de la siguiente forma: </HEAD> <script language= JavaScript type= text/javascript > <!--...instrucciones javascript... --> </script> <BODY> 12
JavaScript - DOM Características de los objetos del documento HTML Son creados por el navegador a medida que se carga la página El nombre de un objeto se corresponde con el atributo Name o Id 13
JavaScript El Modelo de Eventos Los eventos son sucesos que ocurren: Provocados por el usuario Acciones sobre el navegador Sobre un elemento de una página 14
El Modelo de Eventos Javascript ofrece para el tratamiento de eventos: El objeto event. La captura de eventos 15
JavaScript - Eventos onfocus usuario mueve el foco al objeto onblur usuario remueve el foco del objeto onselect usuario selecciona texto onchange usuario cambia el valor de un objeto onsubmit usuario entrega el formulario onclick usuario hace un click en un botón o link onmouseover usuario pone el cursos sobre un link Ejemplo onmouseout usuario saca el cursos del link onload página termina de cargarse - Ejemplo onunload usuario abandona la página onabort usuario aborta la carga de la página onerror se encuentra un error en el script 16
DOM: Modelo de Objetos del Documento Qué es el DOM? Es el medio a través del cual JavaScript interactúa con los elementos HTML Es el conjunto de objetos predefinidos que nos permite acceder a todos los elementos de una página y a ciertas características específicas del navegador Es una jerarquía de objetos predefinidos que describen los elementos de la página web que está mostrando el navegador 17
Jerarquía de Objetos del DOM Screen 18