JavaScript
¿Qué es un lenguaje Script? 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 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 Características:
Se interpreta en el ordenador que recibe el HTML, no se compila (client-side)
No se declaran los tipos de variables Muy simple Basado en objetos: no es un lenguaje totalmente orientado a
objetos como Java. Pero podemos definir objetos, instanciarlos y acceder a sus métodos. Objetos predefinidos
Dinámico: responder a eventos producidos en tiempo real
JavaScript, JScript, ECMAScript JavaScript fue desarrollado por Netscape Poco después Microsoft saco su propio lenguaje de
script, VBScript, para hacer frente a NetScape. Posteriormente Internet Explorer pasaría a soportar
JavaScript, pero no el de Netscape, sino una interpretación del mismo: JScript
ECMAScript: estándar.JavaScript & JScript son ahora compatibles con la especificación ECMA-262 (aunque contienen extensiones diferentes...) Algunas extensiones JavaScript sólo funcionan en
Netscape (y otras extensiones JScript sólo funcionan en Internet Explorer…)
¿Qué se puede hacer con JavaScript? Validar formularios Realizar cálculos simples Personalización de las páginas Web Hacer interactiva una página Web Inclusión de datos del sistema (hora…). Crear
relojes animados… Manipular los elementos HTML de una página Juegos
http://petra.euitio.uniovi.es/~mariarf/tresenraya/tresenraya.html
Chorradas …
JavaScript y los Navegadores Cada navegador acepta una versión de
JavaScript ligeramente diferente (o no lo acepta en absoluto)
No existe... podemos probarlo en un número razonable de
navegadores: NN 4 (document.layers) IE 5 (document.all) NN 6/7 & IE 6 (document.getElementById)
podemos incluir código para detectar el navegador, así como diferentes versiones de algunas funciones, una para cada navegador
¿SOLUCIÓN?
Generalidades de JavaScript 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)
Funcionamiento
Los navegadores pueden interpretar JavaScript 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
Sintaxis
¿Dónde se colocan los scripts? en general, dentro de <head> ... </head> si genera una salida, dentro de <body> ... </body> si hace referencia a un elemento HTML, después de
dicho elemento en algunos casos, en los atributos de algunas etiquetas
(eventos) en un fichero externo <SCRIPT type="text/javascript"
src="fuente.js"></SCRIPT>
La etiqueta <SCRIPT> </SCRIPT>
<SCRIPT type="text/javascript">//instrucciones javaScript</SCRIPT>
Navegadores que no aceptan JavaScript Resulta aconsejable escribir los scripts así:
También podemos incluir la etiqueta:
<script language=“JavaScript” type=“text/javascript”><!--...instrucciones javascript...//--></script>
<noscript>Su página no acepta Javascript. Pruebe con <a href=“no_jscript.html”>esta página</a></noscript>
Algunos ejemplos
Guión: http://petra.euitio.uniovi.es/~mariarf Mostrar un mensaje Escribir datos en una página HTML
Mostrar un mensaje
<html><head> <script language="JavaScript"> <!-- alert("Hola mundo!") //--> </script></head><body></body></html>
Visualización de errores
En IE: Herramientas/Opciones de Internet/Opciones
avanzadas/seleccionar “Mostrar una notificación sobre cada error de secuencia de comandos”
En Firefox: Tareas/Herramientas/Consola de JavaScript Para que se active automáticamente, incluir la siguiente
línea en el fichero prefs.js:user_pref(“javascript.console.open_on_error”, true);
Escribir datos en la página HTML<html>
<head> <title>Escribir datos en la página</title></head><body> Texto HTML normal.<br><br>
<script language="JavaScript" type="text/javascript"> <!-- document.write(“<h3>Texto generado con JavaScript:</h3> <br>") document.write("La página se modificó por última vez con fecha: " + document.lastModified + "<br><br>") //--> </script>
Este vuelve a ser texto HTML normal.</body></html>
Tipos de datos
Tipos disponibles elementales: Numérico (42, 3.14159, etc) Booleano (true y false) String (“Hola mundo”) null, que denota el valor nulo undefined/NaN, que denota un valor indefinido Object
Tipado “dinámico”: no es necesario declarar el tipo de las variables se pueden convertir automáticamente de un tipo a otro
durante la ejecución
Ejemplo<script language=“JavaScript” type=“text/javascript”><!--
venta = prompt(“introduce el importe: ”)impuestos = venta * 0.6total = venta + impuestos
alert(“El total es: ” + total)
//--></script>
alert(“El total es: ” + eval(venta + impuestos))
•Alternativa:
Variables Los nombres son case sensitive. Deben comenzar por una letra o guión bajo. No deben
coincidir con palabras reservadas
Se podrían definir como variables: Nombre_Opción15mes3
Declaración: Asignándole un valor: x = 42 Con la palabra reservada “var”: var x O bien ambos: var x = 42
Estarían mal definidas las siguientes variables:
7opcion&inicio¿nombre
Tiempo de vida de las variables Las variables pueden ser
Locales: dentro de una función Su valor perdura dentro de ellas
Globales: fuera de las funciones disponible desde cualquier parte de código JavaScript que
haya en la página
El uso de var para declarar una variable global es opcional... Aunque si se introduce una variable en una función y no se
declara, tendrá ámbito globalglobal! Para las variables locales, el uso de var es muy
recomendable para evitar problemas...
Sentencias condicionales
switch (expresion){ case etiqueta1:
//código si la expresion = label1break
case etiqueta2://código si la expresion = label2break
default://código si la expresión no es
ninguna de las anteriores}
if (condicion){//código para condición = true }else{//código para condición = false}
Operadores
Aritméticos: +, -, *, /, %, ++, -- Asignación: =, +=, -=, *=, /=, %= Comparación: ==, !=, >, <, >=, <= Lógicos: &&, ||, !
Complementación ~Complementa, o niega, una cadena binaria conviertiendo los 1 en 0 y los 0 en 1.Por ejemplo el número 38 escrito en sistema binario es 00100110 si le aplicamos este operador se convierte en 11011001, o sea el -39 (JavaScript usa codificación en complemento a 2 para los números negativos).
El ordenador, internamente, trata cualquier tipo de datos como una cadena binaria ( ceros y unos). Así los números se representan en sistema binario de numeración mientras que los caracteres se convierten a código ASCII, que son números que se almacenan por tanto codificados en binario. JavaScript ofrece los operadores típicos para trabajar con estas cadenas a nivel de bit (cada uno de los ceros o unos de las cadenas binarias). Para trabajar con estos operadores es conveniente tener una idea previa sobre la codificación binaria.
Operadores binarios
Desplazamiento izquierda <<Desplaza los bits a la izquierda los lugares que se le indique rellenando con ceros por la derecha y desechando los bits de mayor peso, esto equivale a multiplicar por potencias de 2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la izquierda tendremos el 01101000 (104). var num = 26, res;res = num << 2; /* num contendrá 104 */
Desplazamiento derecha >>Desplaza los bits a la derecha los lugares que se le indique rellenando con ceros por la izquierda y desechando los bits de menor peso, esto equivale a una división entera por potencias de 2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la derecha tendremos el 00000110 (6). var num = 26, res;res = num << 2; /* num contendrá 104 */
AND lógico binario &Realiza un AND lógico bit a bit entre dos valores. El AND lógico da como resultado 1 sólo si ambos bits son 1. Por ejemplo 0 1 1 0 1 1 0 1 (109) AND 0 0 1 0 0 1 1 0 (38)resultado: 0 0 1 0 0 1 0 0 (36) var op1 = 109, op2 = 38, res;res = op1 & op2; /*res contiene 36 */OR lógico binario |Realiza un OR lógico bit a bit entre dos valores. El OR lógico da como resultado 0 sólo si ambos bits son 0. Por ejemplo 0 0 1 1 1 0 1 0 (58) OR 0 1 0 1 0 0 1 0 (82)resultado: 0 1 1 1 1 0 1 0 (122) En el ejemplo podemos ver la sintaxis del operadorvar op1 = 58, op2 = 82, res;res = op1 | op2; /*res contiene 122 */ XOR lógico binario ^Realiza un XOR lógico bit a bit entre dos valores. El XOR lógico da como resultado 1 si uno sólo de los bits es 1. Por ejemplo 0 0 1 1 1 0 1 0 (58) OR 0 1 0 1 0 0 1 0 (82)resultado: 0 0 1 0 1 0 0 0 (40)En el ejemplo podemos ver la sintaxis del operador var op1 = 109, op2 = 38, res;res = op1 ^ op2; /*res contiene 40*/
Pop ups
Tipo alert alert("sometext")
Tipo confirm confirm("sometext")
Tipo prompt prompt("sometext","defaultvalue")
Funciones
Sintaxisfunction mifuncion(argument1,argument2,etc)
{//Codigo}
Se puede usar la palabra reservada return pero no hay que indicar nada en la declaración de la función
Ejemplo: Cronómetro<html><head><script type="text/javascript">var c=0; var t;function timedCount(){
document.getElementById('txt').value=cc=c+1t=setTimeout("timedCount()",1000)}
function stopCount(){clearTimeout(t)}
</script></head>
<body> <form>
<input type="button" value="Comenzar!" onClick="timedCount()"><input type="text" id="txt"><input type="button" value="Parar!" onClick="stopCount()">
</form></body></html>
Bucles While while (condicion){ //código
}
Do … while do {//código}
while (condicion)
For for (inicializacion; condicion; incremento){//código}
For in for (variable in object) { code to be executed
}
Comentarios
Una línea:
// comentario de una línea Varias líneas:/* comentario de varias líneas*/
Modelo de Eventos de JavaScript 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
Crear páginas web dinámicas Las acciones son detectadas por JavaScript Ejemplos:
Click de ratón Carga de la página Mandar un formulario…
Gestores de Eventos (Event Handlers)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
Ejemplo: Manipulación de eventos<html><head> <title>manipulación de un evento</title> <script language="JavaScript" type="text/javascript"> <!-- function adiosHola() {
//comentar la siguiente linea para salir... window.open(window.location) } //--> </script></head><body onUnLoad="adiosHola()"></body></html>
Clases en JavaScript Clases Predefinidas
String: Cada vez que se asigna una cadena de caracteres a una variable, se crea un objeto de la clase String
Math: Se usa para efectuar cálculos matemáticos Date: Para el manejo de fechas y horas Array: almacena un conjunto de valores Boolean
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
Métodos comunes String:
length(): longitud del string replace(): reemplaza un texto por otro ToUpperCase ():pasa a mayúsculas
Date: getTime() getFullYear() getDay
Array sort(): ordena elementos concat(): concatena dos arrays
Math Round() Max(), min()
Objetos y propiedades
Podemos acceder a las propiedades de un objeto:nombreObjeto.nombrePropiedad
Las propiedades se definen asignándole un valorasignándole un valor
EjemploEjemplo. Dado el objeto miCoche, definimos las propiedades marca, modelo y año como sigue:miCoche.marca = “Ford” // miCoche[“marca”] = “Ford”miCoche.modelo = “Focus” // miCoche[“modelo”] = “Focus”miCoche.año = 2000 // miCoche[“año”] = 2000
Creación de nuevos objetos
Es posible definir nuevos objetos de dos formas diferentes: Mediante inicializadores de objeto (dando el
valor inicial del mismo) Mediante una función constructora y “new”
Inicializadores de objeto (JS>1.1) Consiste en asignarle a una variable un literal de objeto:nomObj = { prop1: val1, prop2: val2, ..., propN: valN }
donde nomObj es el nombre del nuevo objeto prop1,...,propN son identificadores que representan las
propiedades del objeto val1,...,valN son los valores asignados a cada propiedad del
objeto
Si no vamos a volver a necesitar el objeto, no es necesario asignarle un nombre
Pero, JavaScript debe interpretarinterpretar el objeto cada vez que aparezca una referencia al mismo en el código (lento...)
Funciones constructoras La creación de un objeto mediante una función constructora
consiste en dos pasos:1.- definimos el perfil del objeto mediante una función (constructora)
2.- creamos un objeto usando “new”
function persona(nom, edad, sexo) {
thisthis.nombre = nom
thisthis.edad = edad
thisthis.sexo = sexo
}
Juan = new persona(“Juan García”,31,“H”)
Rosa = new persona(“Rosa Martínez”,28,“M”)
...
Funciones constructoras (2) Es posible definir propiedades que sean a su vez objetos:
function coche(marca, modelo, prop) {
this.marca = marca
this.modelo = modelo
this.propietario = prop
}
coche1 = new coche(“Ford”, “Focus”, Juan)
coche2 = new coche(“Seat”, “Toledo”, Rosa)
...
Para acceder al nombre del propietario de coche1:coche1.propietario.nombre // “Juan García”
Acceso a las propiedades Podemos acceder de dos formas:
mediante un índice miCoche[5] mediante el nombre miCoche.color / miCoche[“color”]
Sin embargo, si se creó con un índice, sólo se puede acceder con dicho índice si se creó con un nombre, sólo se puede acceder con dicho
nombre
ExcepciónExcepción: objetos predefinidos de HTML (por ej., forms)document.forms[0].listaCoches // índice
document.forms[“formCoches”].listaCoches // nombre
document.formCoches.listaCoches
Definición de métodos Un método es una función asociadaasociada a un objeto:
se definen como cualquier otra función
se asocian a un objeto mediante la sentencia:objeto.nombreMétodo = nombreFunción
donde “objeto” debe ser un objeto existente
y se pueden invocar así:objeto.nombreMétodo(parámetros)
Si asociamos el método en la función constructora para un tipo de objetos, estará disponible para todos ellos
Definición de métodos: Ejemplofunction verDatos() {
var str = “Datos del coche: ” + this.marca + “ ” +
this.modelo + “ de color ” + this.color
document.write(str + “<br>”)
}
function coche(marca, modelo, color) {
this.marca = marca
this.modelo = modelo
this.color = color
this.verDatos = verDatos
}
coche2 = new coche(“Seat”, “Toledo”, “rojo”)
coche2.verDatos()
// “Datos del coche: Seat Toledo de color rojo”
JavaScript & DHTML DHTML (HTML + CSS + DOM + JavaScript)DHTML (HTML + CSS + DOM + JavaScript) JavaScript interactúa con los elementos HTML a través del
DOM del navegador
Básicamente, existen 4 modelos de DOM: DOM nivel 0 (>NN2.x, >IE 3.x)
el modelo original, introducido por Netscape muy compatible, debería usarse siempre que fuera posible
DOM Netscape (sólo NN 4.x) introduce document.layers (capas)
DOM Internet Explorer (>IE 4.x) introduce document.all
(acceso a todos los elementos) W3C DOM nivel 1/2/… (>NN 6.x, >IE 5.x)
introduce document.getElementById
Guerra de los navegadores!!
DOM Cuando se carga una página, se crean una serie de objetos
JavaScript asociados con los “principales” elementos HTML de la página:
windowwindow TexareaTexarea
FrameFrame TextText
documentdocument LinkLink FileUploadFileUpload
LocationLocation ImageImage PasswordPassword
HistoryHistory AnchorAnchor HiddenHidden
EmbedEmbed SubmitSubmit
AppletApplet ResetReset
navigatornavigator PluginPlugin RadioRadio
appNameappName ...... CheckboxCheckbox
mimeTypesmimeTypes FormForm ButtonButton
SelectSelect
Acceso a los elementos Cuando se carga la página, se crea una jerarquía de
objetos que refleja el contenido de la misma:<html><h1>Ejemplo</h1><img src=“logoupv.gif” name=“xxx”><form name=“formulario”><input type=“text” name=“campo1”>...
de forma que podemos acceder a ellos (desde JavaScript) indicando la “trayectoría” completa:window.document.xxx // window.document.images[0]window.document.formulario // window.document.forms[0]…
el atributo “name” es esencial para acceder a los elementos
Operaciones Cada elemento dispone de
propiedades: que se pueden consultar y, en ocasiones, modificar window.document.bgColor
métodos: que nos permiten ejecutar acciones relacionadas con el objeto window.open()
LimitacionesLimitaciones: no hay acceso a todos los elementos de la página la mayor parte de las propiedades son de “sólo lectura”
Ejemplo
<HTML> <HEAD>
<TITLE>Ejemplo sencillo de página HTML</TITLE> </HEAD> <BODY> <A name="principio">Este es el principio de la página</A> // ancla <HR> <FORM method="POST"> <P> Introduzca su nombre:<INPUT type="text" name="me" size="70"> </P> <INPUT type="reset" value="Borrar Datos"> <INPUT type="submit" value="OK"> </FORM> <HR> Clica aquí para ir al <A href="#principio">principio</A> de la página // link </BODY> </HTML>
document.title
document.anchors[0].name
document.forms[0].method
document.forms[0].elements[1].value
document.links[0].href
Ejemplo Cambiar el color de letra y de fondo
Script:
function colores(fondo, frente) {
document.bgColor = fondo
document.fgColor = frente HTML:
<form>
<input type=“button” value=“Fondo rojo, texto blanco”
onClick=“colores(‘red’, ‘white’”>
<input type=“button” value=“Fondo blanco, texto rojo”
onClick=“colores(‘white’, ‘red’)”>
</form>
DOM W3C ESTANDAR La principal ventaja es que dispone de facilidades para
mover parte del documento a otro lugar crear nuevos elementos y añadirlos en cualquier punto organizar y manipular fragmentos del documento antes de
insertarlos en el mismo Algunos cambios:
var oParent = oNode.parentElement DHTML var oParent = oNode.parentNode W3C DOM oNode.innerHTML="The new label"; DHTML oNode.childNodes[0].nodeValue="The new label"; WC3 DOM …
Acceso a los elementos La principal novedad es el método
getElementById: por ejemplo, dado un documento:
...
<div id=“div1”>
...
</div>
...
oNode = getElementById(“div1”) devuelve
en oNode una referencia al objeto div
Creación de nodos
Existen dos formas básicas: createElement:
createElement + innerText + appendChild createElement + innerText + insertBefore
createTextNode createTextNode + childNodes + replaceNode
Ejemplos: Insertar cabecera, insertar item Modificar valor de un nodo
Recorrer el árbol Aparecen 2 métodos para recorrer nodos:
nextSibling y previousSibling<SCRIPT>
// devuelve el item etiquetado “List Item 2”var oSibling = oList.childNodes(0).nextSibling;// devuelve el item etiquetado “List Item 1”var oSiblingP = oSibling.previousSibling;
</SCRIPT><BODY>
<UL ID = oList><LI>List Item 1</LI><LI>List Item 2</LI><LI>List Item 3</LI>
</UL> <BODY>
Referencias W3schools. http://www.w3schools.com “Standard ECMA-262: ECMAScript Language
Specification”. http://www.ecma-international.org/publications/standards/Ecma-262.htm Explorer:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp
Mozilla: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
Tabla de compatibilidad: http://www.quirksmode.org/