Javascript 1
-
Upload
gianfranco-manrique-valentin -
Category
Documents
-
view
39 -
download
0
description
Transcript of 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
}
Propiedad Significado
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
Propiedad Significado
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";