Diapo04

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”></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">  </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">  </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”></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">  </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/

Diapo04

Education

Transcript of Diapo04