Clase 6- JavaScript I
Anuncio
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
