javascript 1

1Tema 3: JavaScriptParte I: El ncleo del lenguaje.Interfaz bsico con el navegador. DOM 0

Contenidos

Introduccin

El ncleo de JavaScript

Scripts en pginas web

Interfaz con el navegador

Eventos

El DOM nivel 0

23.1

Introduccin. Lenguajes de script

Scripts en navegadores

JavaScript (El ms difundido)

WMLScript (Dispositivos mviles: WAP)

VBScript (Invento de Microsoft para contrarrestar el xito de JavaScript. Base del ASP pre .NET)

3JavaScript

NO es: Una versin reducida de Java Un lenguaje simple

Tiene Sintaxis similar a C++ o Java, mucho menos restrictiva: el ; al

final de la sentencia es opcional, la declaracin de variables no es obligatoria, etc ...

Orientacin a objetos: distinta filosofa que C++ o Java: en JavaScript no existen

clases. Los objetos son colecciones de mtodos y propiedades.

Capacidades

Puede: Interactuar con el navegador: abrir ventanas, volver atrs/adelante, Interactuar con el documento HTML: verificar formularios,

aadir/eliminar contenido,

No puede: Dibujar grficos Abrir conexiones de red Trabajar con bases de datos

Estas capacidades no vienen del lenguaje en s, sino de la forma en la que est actualmente integrado en los navegadores

4JavaScript/JScript/ECMAScript

JavaScript (Netscape), cliente/servidorJScript (Microsoft), cliente/servidor ECMAScript (ECMA 262), solo el ncleo del lenguaje

Microsoft Internet Explorer.

Netscape Navigator. Opera.

1.0. 2.0.1.0. 1.1. 1.0. 3.0. 3.0. 3.0.

1.2. 4.0 a 4.05.

2.0. 1.3. 3.0. 4.0. 4.06 a 4.7x. 4.0, 5.0 y superior.

1.4. 5.0. 5.0.

3.0. 1.5. 5.5. 5.5 y superior.

6.0 y superior.

4.0. 2.0.

Versiones de JavaScript y navegadores que las incorporan.

ECMAScript. JavaScript. JScript.

Navegador.

3.2

El ncleo de JavaScript

5El lxico de JavaScript

Diferencia maysculas/minsculas

Comentarios tipo C/C++

Identificadores iguales que C/Java

El ; es opcional (si cada sentencia est en una lnea), aunque es recomendable para evitar problemas

a = 3b = 4

Declaracin de variables

No obligatoria, aunque aconsejable

Las variables no tienen tipo

var i;j = 27; //vlidoi = 3;i = hola; //vlido

6No declarado vs. no asignadoEs ilegal usar el valor de una variable no declaradavar i;i = j + 1;

El valor de una variable declarada pero no inicializada es undefinedvar i;alert(i);

Tipos de datos

Numrico: enteros y reales

Booleano (true==1, false==0)

Cadena

Objetos Funcin Array Fecha (clase Date) Expresin regular (clase RegExp)

7Por valor vs. por referenciaDatos primitivos: por valor

Objetos: por referencia

var a,b;a = new Array(); // un array es un objeto que se

// crea con el constructor Array() a[0] = 1;b = a; // b referencia al array aa[0] = 100;alert(b[0]); // muestra el valor 100

Operadores

Idem a C++/Java

Igualdad (==): conversin de tipos

Identidad(===): sin conversin

Eliminar referencias: delete

8Sentencias

Idem a C/Java

Uso adicional de forfor (propiedad in objeto)

sentencia;

for (p in navigator)alert(p+"="+navigator[p]);

Objetos: creacinvar o, Homer;

o = new Object();

function Persona(nombre, edad, casado) {this.nombre = nombre;this.edad = edad;this.casado = casado;

}Homer = new Persona(Homer Simpson, 34, true);

9Propiedades de objetosAcceso

Homer.edad = 40; //Notacin clsicaHomer[edad] = 40; //Como si fuera un array

Insercin y borrado dinmicovar Homer;Homer = new Object();Homer.nombre = Homer Simpson;Homer.edad = 34;Homer.casado = true;delete Homer.edad //undefined

Mtodos: propiedades que son funcionesfunction mayorDeEdad() {

if (this.edad>=18)return true;

elsereturn false;

}

var Homer;

Homer = new Object();Homer.edad = 34;Homer.mayorDeEdad = mayorDeEdad;alert (Homer.mayorDeEdad());

10

Arrays

Dispersos: no todas las posiciones tienen que contener datos. Las vacas tienen undefinedHeterogneos: cada posicin puede tener un tipo distinto

var a=new Array(); a[5]=4;a[10]=holaalert(a.length)

3.3

Scripts en pginas web

11

Insertar cdigo JavaScript

Dentro de la pgina

En un fichero aparte

En un manejador de evento

Como una URL javascript:

Insertar cdigo JavaScript (II)

function ahora() {

var h = new Date(); return h.toLocaleString();

}var verFecha = true;

if (verFecha) alert(Fecha y hora: + ahora());

12

Insertar cdigo JavaScript (III)

En un fichero aparte (.js)

En un manejador de evento

Insertar cdigo JavaScript (IV)

Como una URL javascript:

Ms informacin

13

3.4

Interfaz con el navegador

Modelo de objetos

plugins mimeTypes

all anchors applets embeds

forms frames images links scripts stylesheets

body

window

document event frames history location screen navigator/ clientinformation

Solo Explorer

Solo Mozilla

14

Objeto global: window

El objeto window determina el contexto de ejecucin Las variables globales son

propiedades de windowa = 7;alert (window.a) //7

Cuadros de dilogo modales alert(mensaje) prompt(mensaje, valor_por_defecto):

devuelve cadena introducida o null si se ha pulsado cancelar

confirm(mensaje): devuelve true o falsesegn si se pulsa Aceptar o Cancelar

alert

prompt

confirm

Objeto window: algunas propiedades

Propiedad Significado

closed valor booleano que indica si la ventana ha sido cerrada status texto de la barra de estado (para un mensaje temporal) defaultStatus texto por defecto de la barra de estado (es reemplazado

momentneamente cuando se pasa el ratn por un enlace u otros objetos)

name nombre de la ventana opener referencia al objeto window que cre la ventana actual parent si la ventana actual es un frame, referencia a la ventana que lo

contiene. En caso contrario, es lo mismo que window top si la ventana actual es un frame, referencia a la ventana de nivel

superior que lo contiene. En caso contrario, es lo mismo que window self, window la propia ventana

15

Objeto window: algunos mtodos

open(): abrir popupvar nueva = window.open(URL a mostrar, nombre, caractersticas,

reemplazar entrada actual del historial); Todos los argumentos son opcionales,si no estn, poner comas Nombre: nombre simblico para la ventana (NO nombre de fichero) Caractersticas: cadena formada por pares atributo=valor separados por comas

ancho de la ventanaN pixelswidth

coord.. y de la ventanaN pixelstop (Explorer, en Navigator screenY)

muestra barra de herramientasyes o notoolbarmuestra lnea de estadoyes o nostatusbarras de scrollyes o noscrollbarsventana redimensionable?yes o noresizablemuestra menyes o nomenubarmuestra barra de direccionesyes o nolocation

coord. x de la ventana N pixelsleft (Explorer, en Navigator es screenX)

alto de la ventanaN pixelsheight

SignificadoValoresCaracterstica

Objeto window: algunos mtodos

close(): cerrar ventana abierta por JavaScriptventana.close() //OK, siguiendo la transpa anteriorwindow.close() //En general no funcionar si la ventana

//actual no ha sido abierta con JavaScript

Mover: moveTo(x,y): mover a coordenadas de pantalla. moveBy(dx,dy): desplazar una cantidad de pixeles en x e y

Cambiar tamao resizeTo(x,y): poner ancho y alto resizeBy(dx,dy): hacer crecer o encoger una cantidad de pixeles

16

Objeto navigator

En teora, el objeto Navigator puede servir para ejecutarun cdigo u otro dependiendo de la compatibilidad. En la prctica es ms sencillo comprobar si el mtodo o propiedad que necesitamos existe. Si no, ser null

if (document.all) { //Internet Explorer

}


appName Nombre comn del navegador. Ejemplos: Netscape, Microsoft Internet Explorer

appVersion Nmero de versin e informacin adicional. Ejemplo: en Navigator 4.6, versin inglesa para Windows tiene el valor: 4.6 [en] (Win98; I)

userAgent La informacin que enva el navegador en la cabecera http USER-AGENT

Objeto location


href cadena que representa la URL completa protocol solo la parte del protocolo (ej, http:) host solo el nombre del host pathname trayectoria hasta el recurso, incluido el mismo search parte de la URL que sigue al carcter ?,(incluido) si est presente.

Para hacer que el navegador salte a la pgina login.htmdocument.location.href=login.htm

17

Objeto screen

Propiedades Significado

width, height dimensiones de la pantalla en pixels availWidth, availHeight

dimensiones disponibles, descontando el espacio que ocupan elementos grficos permanentes o semi-permanentes (ej: barra de tareas de Windows)

colorDepth profundidad de color (n bits)

3.5

Eventos

18

Eventos y manejadores

Los eventos son acciones que ocurren generalmente porque el usuario hace algo sobre un objeto. Por ejemplo, hacer click sobre un botn, introducir texto en un campo de formulario, mover el ratn sobre un enlace ...

Se pueden controlar esas acciones con un 'manejador' de eventos (handler), para que el script reaccione ante ese suceso. Estos son los eventos que utiliza y controla javascript.

Algunos tipos de eventos

Evento Se aplica a... Ocurre cuando... Handler

abort imagenes El usuario aborta la carga de unaimagen (por ejemplo haciendo click sobre un enlace o en el boton del navegador) .

onAbort

blur ventanas, frames, y todos loselementos de formularios

El usuario cambia el foco a otroelemento (ventana, frame, o elementodel formulario).

onBlur

click Casi todos los elementos HTML El usuario hace click en algo. Devolverfalse para cancelar la accin por defecto

onClick

change campos de texto, area de texto, listasde selecisn.

El usuario cambia el valor de un elemento.

onChange

error imagenes, ventanas La carga de un documento o imagencausa un error

onError

focus ventanas, frames, y todos loselementos de formularios

El usuario pasa el foco a otro elemento(ventana, frame, o elemento del formulario).

onFocus

load body El usuario carga la pagina. onLoad

19

Algunos tipos de eventos (cont.)

Evento Se aplica a... Ocurre cuando... Handler

mouseout Casi todos los elementos HTML El usuario mueve el puntero del ratsnfuera de un area (imagen) o enlace.

onMouseout

mouseover Casi todos los elementos HTML El usuario mueve el puntero del ratsnsobre un area (imagen) o enlace. En enlaces, devolver true para que no aparezca en la barra de status

onMouseover

reset Formularios. El usuario resetea un formulario (clicks en el botsn Reset) Devolver false paraque no se haga el reset.

onReset

select campos de texto, area de texto El usuario selecciona un campo de entrada del formulario

onSelect

submit formularios El usuario enva un formulario. Devolver false para que no se haga el envo.

onSubmit

unload Body,frameset El usuario sale de la pagina onUnload

Eventos y manejadores

Definir un manejador

Valor de retorno Devolviendo true o false se puede anular el comportamiento

por defecto de algunos eventos. En algunos, para anularlo hay que devolver true y en otros false

20

3.6

El DOM nivel 0

DOM (Document Object Model)

API orientado a objetos que permite interactuar con el documento HTML Cambiar estilo Cambiar contenido

Niveles 0: impuesto por Netscape y Microsoft en la

generacin anterior de navegadores (Explorer 4,Netscape 4)

1 (W3C): contenido dinmico 2 (W3C): estilos dinmicos, eventos

21

Modelo de objetos

plugins mimeTypes

all anchors applets embeds

forms frames images links scripts stylesheets

body layers

window

document event frames history location screen navigator/ clientinformation

Solo Explorer

Solo Navigator

Generar contenidos

document.write: escribe cdigo en el lugar en que se pone la instruccin.

var vent=window.open(null,"","height=300,width=200",

true);vent.document.open();vent.document.write(" Bienvenido a este sitio

web ");vent.document.close(); //Por si acaso. Vaca el buffer de

//escritura asegurando que llega todo al //destino

22

Acceso a algunos elementosAlgunos elementos importantes (formularios, enlaces, etc.) son accesibles a travs de arrays dentro del objeto document

Se puede acceder por posicin o por nombre

HTML: JavaScript

document.images[0]document.logodocument[logo]

appletsAppletsanchorsMarcadoreslinksEnlacesimagesImgenesformsFormulariosArrayElemento

Enlaces y marcadores

Enlaces: array links[] Son objetos del tipo location

Marcadores: array anchors[] Propiedad name (Es la nica comn a

Explorer y Netscape)

23

Applets

Array applets[]

ImgenesPropiedades Significado

src URL origen de la imagen (propiedad de lectura/escritura)

lowsrc URL origen para la versin alternativa de baja resolucin (lect/escr)

width, height

Ancho y alto de la imagen (solo lectura)

complete valor booleano que especifica si el proceso de carga de la imagen ha terminado (sea con xito o con error).

hspace,vspace

espacio horizontal y vertical adicional alrededor de la imagen

name valor del atributo NAME de la imagen

border ancho del borde de la imagen en pixels

24

Formularios

Los controles pueden tener un nombre o ser accedidos por posicin Cada formulario tiene un array de controles llamado elements

function saludo() {

alert("Bienvenido, "+ document.usuario.login.value);}//valdra tambin//document.forms[0].elements[0].value

Como se ha visto en el ejemplo anterior, la mayora de controles tienen su valor en la propiedad value

Para saber si un checkbox o radio estn marcados, utilizar la propiedad booleana checked

Formularios: eventos

onsubmit: cuando el usuario le da al botn submit y los datos van a ser enviados al servidor. Devolver false para anular envo

//verificaFecha tendra que tomar una cadena y si no est en el //formato adecuado, por ejemplo dd/mm/aaa, devolver false

onreset: cuando el usuario le da al botn reset y los datos van a ser borrados. Devolver false para anular.

onchange: este es un evento de cada control, no del form. Cuando cambia el contenido del control y el foco se mueve a otro control

25

Expresiones regulares

Muy tiles para verificar formato de datos en formularios (fechas, direcciones de mail, etc)

Dos formas de definirlas: Constante: var er=/[A-Z]*/ Objeto RegExp: var er=new RegExp([A-Z]*)

Expresiones regulares (I)Significado Ejemplo Resultado

\ Marca de carcter especial

/\$ftp/ Busca la palabra $ftp

^ Comienzo de una lnea

/^-/ Lneas que comienzan por -

$ Final de una lnea

/s$/ Lneas que terminan por s

. Cualquier carcter (menos salto de lnea)

/\b.\b/ Palabras de una sla letra

| Indica opciones /(L|l|f|)ocal/ Busca Local, local, focal

( ) Agrupar caracteres

/(vocal)/ Busca vocal

[ ] Conjunto de caracteres opcionales

/escrib[aoe]/ Vale escriba, escribo, escribe

26

Expresiones regulares (II)Descripcin Ejemplo Resultado

* Repetir 0 o mas veces

/l*234/ Valen 234, 1234, 11234...

+ Repetir 1 o mas veces

/a*mar/ Valen amar, aamar, aaamar...

? 1 o 0 veces /a?mar/ Valen amar, mar.

{n} Exactamente n veces

/p{2}sado/ Vale ppsado

{n,} Al menos n veces

/(m){2}ala/ Vale mmala, mmmala....

{m,n} entre m y n veces

/tal{1,3}a/ Vale tala, talla, tallla

Expresiones regulares (III)Significado Ejemplos Resultado

\b Principio o final de palabra /\bver\b/ Encuentra ver en "ver de" , pero no en "verde"

\B Frontera entre no-palabras /\Bver\B/ Empareja ver con "Valverde" pero no con "verde"

\d Un dgito /[A-Z]\d/ No falla en "A4"\D Alfabtico (no dgito) /[A-Z]\D/ Fallara en "A4"\O Carcter nulo\t Caracter ASCII 9 (tabulador)\f Salto de pgina\n Salto de lnea

\s Carcter tipo espacio (como tab) /\sSi\s/ Encuentra Si en "Digo Si ", pero no en "Digo Sientate"

\S Opuesto a \s\cX Carcter de control X \c9 El tabulador

\oNN Carcter octal NN\xhh El hexadecimal hh /\x41/ Encuentra la A (ASCII Hex41) en

"letra A"

Opuesto a \w ([ a^-zA-Z0-9_ ])\W

Cualquier alfanumrico, [a-zA-Z0-9_ ]\w

/\W/ Hallara slo el punto (.)

/\w+/ Encuentra frase en "frase .", pero no el . (punto).

27

Expresiones regulares (IV): modificadores

Modificador Significado

g Explorar la cadena completai No distinguir maysculas de minsculas

m Multilnea. ^ y $ son inicio y fin de lnea

Para matizar la forma de bsqueda. Se ponen fuera de la E.R.

Empleo de E.R.Mtodos de la clase String: los llama un string. El parm. es una e.r.

search: pos. de la 1 ocurrencia de la E.R. en la cadena o -1 si no est match: array con las ocurrencias encontradas, si est el modif. g. Si no, 1

ocurrencia y subexpresiones (expr. entre parntesis en la E.R.)var cadena = Java y JavaScript;cadena.search(/java/i) //0cadena.match(/j[a-z]+/gi); //array: [0]=Java, [1]=Javascriptcadena.match(/j([a-z]+)/i); //array: [0]=Java, [1]=ava

Mtodos de la clase RegExp: los llama una e.r., el parm. es un String test: true si la E.R. encaja con la cadena, false en caso contrario exec: Sin g es como match sin g. Si se ejecuta varias veces con g

comienza la bsqueda donde se qued (almacena esta pos. en la propiedad lastIndex de la E.R.)

var er = /j([a-z]+)/gi;er.test("Javascript es genial");//trueer.exec("Java y JavaScript"); //[0]=Java,[1]=ava. er.lastIndex=4er.exec("Java y JavaScript"); //[0]=Javascript,[1]=avascript. er.lastIndex=17

28

CookiesSon variables de texto almacenadas en el cliente. Cuando desde un sitio se crean cookies, el navegador se compromete a enviarlas al servidor en todas las peticiones HTTP que haga apartir de ahora.La cantidad de datos es muy limitada: 20 cookies por servidor, 4K por cookieSe pueden crear desde el cliente (JavaScript) o desde el servidor (ya veremos cmo) Operaciones Leer cookies: valor de document.cookie: TODAS las cookies en el formato cookie1=valor1;cookie2=valor2; Crear cookie: asignar su valor a document.cookie. Se le pueden poner propiedades, pero luego dichas

propiedades no se pueden leer. Borrar cookie: crearla con fecha de caducidad en el pasado

Funciones de utilidad: escape(String) codifica una cadena para que se pueda almacenar en la cookie (por si tiene caracteres no alfanumricos). unescape(String) deshace la codificacin

var nombre, caduca;

caduca = new Date();caduca.setFullYear(caduca.getFullYear()+1);nombre = prompt("cmo te llamas?");document.cookie = "nombre=" + escape(nombre)

+ "; expires=" + caduca.toGMTString()+ "; path=" + "/" + "; domain=" + "ua.es" + "; secure";

javascript 1

Documents