Scribd
Cargar
142 vistas42 páginas

JavaScript (Complutense)

Lenguaje de script (guión: secuencia de instrucciones) para la creación de páginas web dinámicas Crear visualizaciones más atractivas y mayor interactividad Permite gestionar diferencias de implementación entre los distintos navegadores

Cargado por

Lluni
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
142 vistas42 páginas

JavaScript (Complutense)

Lenguaje de script (guión: secuencia de instrucciones) para la creación de páginas web dinámicas Crear visualizaciones más atractivas y mayor interactividad Permite gestionar diferencias de implementación entre los distintos navegadores

Cargado por

Lluni
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 42

JavaScript

Aplicaciones Web/Sistemas Web

Juan Pavn Mestras


Dep. Ingeniera del Software e Inteligencia Artificial
Facultad de Informtica
Universidad Complutense Madrid

Material bajo licencia Creative Commons

JavaScript

Lenguaje de script (guin: secuencia de instrucciones) para la


creacin de pginas web dinmicas

Lenguaje interpretado (no se compila)

Basa su sintaxis en C

Mltiples frameworks

El navegador se encarga de interpretar y ejecutar el cdigo JavaScript

JavaScript NO es Java

Crear visualizaciones ms atractivas y mayor interactividad


Permite gestionar diferencias de implementacin entre los distintos
navegadores

jQuery, Mootols, etc.


JSON (Javascript Object Notation) para transmisin de datos
Ajax
Integracin con el objeto Canvas de HTML5

JavaScript en el servidor (tendencia en auge):

Node.js, Jaxer, EJScript, RingoJS, AppengineJS

Juan Pavn - UCM 2012-13

JavaScript

Seguridad de JavaScript

Por seguridad, los scripts solo se pueden ejecutar dentro del


navegador y con ciertas limitaciones:

No pueden comunicarse con recursos que no pertenezcan al mismo


dominio desde el que se descarg el script
No pueden cerrar ventanas que no hayan abierto esos mismos scripts
No pueden acceder al sistema de ficheros, ni para leer ni para escribir
No pueden acceder a las preferencias del navegador
Si la ejecucin de un script dura demasiado tiempo el navegador
informa al usuario de que el script est consumiendo demasiados
recursos y le da la posibilidad de detener su ejecucin
Esto podra ocurrir por un error de programacin del script o alguno
malicioso

Es posible firmar digitalmente los scripts para que el usuario


permita realizar algunas de esas acciones

Juan Pavn - UCM 2012-13

JavaScript

Historia de JavaScript

LiveScript (Brendan Eich, 1995): lenguaje de script para


Netscape Navigator 2.0

JavaScript: acuerdo entre Netscape y Sun

Estandarizacin

ECMA-262 ECMAScript Language Specification (1997)


Actualmente, versin 5.1 (2011)
Adoptado por ISO como ISO/IEC 16262

Variantes

Microsoft: JScript
Firefox: JavaScript
Chrome: JavaScript
Opera: ECMAScript
AdobeFlash: ActionScript 3

Juan Pavn - UCM 2012-13

JavaScript

Inclusin de JavaScript en documentos XHTML

Cdigo JavaScript en el documento XHTML

Con etiquetas <script> en cualquier parte del documento


Pero se recomienda ponerlo en la parte de cabecera <head>
<head>
...
<scripttype="text/javascript">
alert("Unmensajedeprueba");
</script>
</head>

En un archivo externo (extensin .js)


Ms fcil para compartir cdigo en varios documentos
<scripttype="text/javascript"src="/js/codigo.js"></script>

El fichero codigo.js tendra el cdigo:


alert("Unmensajedeprueba");

Dentro de los elementos (generalmente para manejar eventos o para


escribir cdigo dentro de la pgina). Es menos mantenible
<inputtype="button"value="Pulseestebotn"
onclick="alert('Haspulsadoelbotn!');">

Juan Pavn - UCM 2012-13

JavaScript

Cuando el navegador no soporta JavaScript

La etiqueta <noscript> permite definir qu texto proporcionar al


usuario cuando el navegador no soporta o no tiene activado
JavaScript

Esta etiqueta tiene que ir dentro del <body>

<body>
<noscript>
<p>
EstapginarequiereJavaScriptparasucorrectofuncionamiento.
CompruebesiJavaScriptestdeshabilitadoenelnavegador.
</p>
</noscript>
<p>Textodeldocumento</p>
</body>

Juan Pavn - UCM 2012-13

JavaScript

Cuando el navegador no soporta JavaScript

El cdigo de los scripts se suele poner dentro de comentarios

Para evitar problemas con navegadores antiguos


O bien si el usuario ha desactivado JavaScript

XHTML
<scriptlanguage="JavaScript" type="text/javascript"><![CDATA[
<!
...
//>]]></script>

HTML
<scriptlanguage="JavaScript" type="text/javascript">
<!
...
//>
</script>
el fin del comentario HTML va en un comentario de lnea JavaScript
Juan Pavn - UCM 2012-13

JavaScript

Ejercicio

Escribir el siguiente script y ejecutarlo en el navegador

Probar a desactivar JavaScript en el navegador y ver qu ocurre


Poner el script en un fichero holamundo.js y probar a importarlo

<!DOCTYPEhtml PUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="ContentType"content="text/html;charset=utf8"/>
<title>ElscriptHolaMundo</title>
<scripttype="text/javascript">
alert("HolaMundo!");
</script>
</head>
<body>
<noscript><p>EstapginarequiereJavaScriptparasucorrectofuncionamiento.
CompruebesiJavaScriptestdeshabilitadoenelnavegador.</p>
</noscript>
<p>Unscriptconlafrasemsfamosadelaprogramacin.</p>
</body>
</html>
Juan Pavn - UCM 2012-13

JavaScript

Ejercicio

Se puede probar a incluir un texto en el cdigo HTML con


document.write("texto")

Ms habitual que sacar ventanas de dilogo


Probar el siguiente cdigo

<!DOCTYPEhtml PUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="ContentType"content="text/html;charset=utf8"/>
<title>ElscriptHolaMundo</title>
</head>
<body>
<noscript><p>EstapginarequiereJavaScriptparasucorrectofuncionamiento.
CompruebesiJavaScriptestdeshabilitadoenelnavegador.</p>
</noscript>
<p>Unscriptconlafrasemsfamosadelaprogramacin.</p>
<script>document.write("HolaMundo!");</script>
</body>
</html>

Juan Pavn - UCM 2012-13

JavaScript

JavaScript

Elementos del lenguaje JavaScript

Sintaxis de JavaScript

Javascript distingue entre maysculas y minsculas

Javascript ignora espacios en blanco, tabuladores y saltos de


lnea entre tokens

while (correcto)
While, WHILE (incorrectos)

token: palabra reservada, nmero, string, nombre de funcin,


Conviene utilizar sangrado para que los scripts sean ms legibles

El uso de ; al final de cada instruccin es opcional (aunque


recomendable)
return
true

return;
true;

Comentarios como en Java

Comentario de varias lneas entre /* y */


Comentario hasta el final de la lnea con // comentario

Juan Pavn - UCM 2012-13

JavaScript

11

Identificadores

Similar a C/Java:

Deben comenzar por una letra o por '_'


Pueden contener letras, dgitos y '_'
No pueden coincidir con las palabras reservadas

Palabras reservadas de JavaScript


break
case, catch, continue
default, delete, do
else
finally, for, function
if, in, instanceof
new
return
switch
this, throw, try, typeof
var, void
while, with

Juan Pavn - UCM 2012-13

JavaScript

12

Literales

Nmeros

Valores lgicos (Booleanos)

Internamente las operaciones se realizan en punto flotante


Representacin:
Enteros: 0,1,44,...
Decimales (float): 0.20,3.1415,3.23e+6
Hexadecimal, empiezan por 0x: 0xFF,0x1A
true y false

Strings

Secuencia de caracteres entre comillas dobles " o simples '


"EstoesunString"
<aonclick="alert('Haspulsadoelenlace')">...</a>
Secuencias de escape, para representar caracteres especiales:
\' Comilla simple
\" Comilla doble
\b Retroceso
\f Salto de pgina
\n Salto de lnea
\t Tabulacin
\\ Barra inclinada \

Juan Pavn - UCM 2012-13

JavaScript

13

Variables

JavaScript es un lenguaje dbilmente tipado

No se especifica el tipo de las variables


Se deduce por el contenido de la variable y el contexto

Para declarar una variable se usa la palabra reservada var


seguida por una lista de nombres de variables a declarar
separadas por ,

El nombre de una variable puede estar formado por letras, nmeros y


los smbolos $ (dlar) y _ (guin bajo)
El primer carcter no puede ser un nmero
var variable1,$variable,_tmp;
var x=1;
var y=2;
z=x+y; //znoestdeclaradaperoalusarlaporprimeravez
//secreacomovariableglobal

Para dejar una variable indefinida se le asigna el valor null


indefinida=null;

Juan Pavn - UCM 2012-13

JavaScript

14

Expresiones

Asignacin

Expresiones numricas

Guarda un valor especfico en una variable


var x=0;
Operadores aritmticos:
+ , ++, -, --, *, /, % (mdulo)
+=, -=, *=, /=, ^= (exponenciacin), %=

Expresiones lgicas

Operadores lgicos: && (and), || (or), ! (not)

Juan Pavn - UCM 2012-13

JavaScript

15

Expresiones

Expresiones de comparacin

Operadores relacionales: ==, !=, >, <, >=, <=, ===, !==
Conversin automtica de tipos en las comparaciones
JavaScript realiza conversiones automticas entre tipos para llevar a
cabo la comparacin cuando sea necesario
Si un operando es una cadena y el otro un nmero, se intenta convertir la
cadena a nmero. Si no se puede convertir la comparacin devuelve false
Si uno de los operandos es un booleano y el otro un nmero se convierte el
booleano a nmero (true 1, false 0)

Comparacin estricta (===, !==): no se realiza conversin alguna

Reglas de precedencia de operadores

() [] . (el operador punto sirve para los objetos)


! - ++ -*/%
+<< >> >>> (desplazamientos a nivel de bit)
< <= > >=
== !=
& ^ | (lgicos a nivel de bit)
&& || (lgicos boleanos)
= += -= *= /= %= <<= >>= >>>= &= ^= != (asignacin)

Juan Pavn - UCM 2012-13

JavaScript

16

Control de flujo

Instrucciones condicionales

if
if (condicin){
//Instrucciones
}
else {
//Instrucciones
}

//0,""ynull equivalenafalse

switch
switch (expresin){//Laexpresindevuelveunnumero,
//unvalorlgicoounstring
casevalor1:
//Instruccionescaso1
break; //paraacabarelswitch
casevalor2:
//Instruccionescaso2
break;
default: //opcional
//Instruccionessinosedieraningncaso
}

Juan Pavn - UCM 2012-13

JavaScript

17

Ejercicio

Realizar una pgina con un script que calcule el valor de la letra


de un nmero de identificacin fiscal (NIF)

El algoritmo es el siguiente:
Comprobar que el nmero est entre 0 y 99999999
Calcula el resto de la divisin entera del nmero de DNI y el nmero
23
Selecciona la letra dentro del array de letras siguiente:
var letras=['T','R','W','A','G','M','Y','F','P','D','X','B',
'N','J','Z','S','Q','V','H','L','C','K','E','T'];
Esto es, si el resto de la divisin es 0, la letra del DNI es la T, si el resto es 1
la letra es la R, etc.

El script tiene que solicitar un nmero al usuario


Para solicitar el nmero se puede usar la funcin prompt():
var numero=prompt("IntroducetunmerodeDNI(sinlaletra)");

Si el nmero no es correcto, indicar un mensaje de error


Si fuera correcto, calcular y mostrar el NIF completo

Juan Pavn - UCM 2012-13

JavaScript

18

Control de flujo

Bucles

for
for (inicializacin;condicin;actualizacin){
//Instrucciones
}
Ejemplo:
for (var i=0;i<array.length;i++){
procesa(array[i]);
}
for in
for (indice inarray ){
//Instrucciones
}
Ejemplo:
for (iinarray){
procesa(array[i]);
}

Juan Pavn - UCM 2012-13

JavaScript

19

Control de flujo

Bucles

while
while(condicin){
//Instrucciones
}
Ejemplo:
while(true){
bucle_infinito();
}
do while
do{
//Instrucciones
}while(condicin)

Sentencias para control de bucles

Salir del bucle break


Saltar a la siguiente iteracin continue

Juan Pavn - UCM 2012-13

JavaScript

20

Control de flujo

Excepciones: try..catch
try{
//Cdigo aejecutar
}
catch(err){
//Gestin deerrores
}

Se puede lanzar una excepcin con throw

throw excepcion

Juan Pavn - UCM 2012-13

JavaScript

21

Funciones

function ()

function nombre_funcion (arg1,arg2,...){


//instrucciones
return; //oreturn resultado;
}
Entre parntesis la lista de parmetros, sin tipo, separados por comas
El tipo de resultado no se declara, y se devuelve con return

Se pueden definir funciones anidadas


function hipotenusa(a,b){
function cuadrado(x){return x*x;}
return Math.sqrt(cuadrado(a)+cuadrado(b));
}

Juan Pavn - UCM 2012-13

JavaScript

22

Funciones

arguments

El objeto arguments permite acceder a los argumentos de una funcin


como un array
Los argumentos se acceden con arguments[i]
El nmero de argumentos se accede con la propiedad length

function max(){
var m=Number.NEGATIVE_INFINITY;
for(var i=0;i<arguments.length;i++)
if (arguments[i]>m)m=arguments[i];
return m;
}

JavaScript

Juan Pavn - UCM 2012-13

23

mbito de las variables

Locales

Se definen dentro de una funcin con var

Globales

Se definen fuera de cualquier funcin


O dentro de una funcin sin especificar var

Dentro de una funcin una variable local prevalece sobre la global

Ejercicio: Qu mensajes se muestran con el siguiente cdigo?


var m="global";
function muestraMensaje(){
m="local";
alert(m);
}
alert(m);
muestraMensaje();
alert(m);

Juan Pavn - UCM 2012-13

JavaScript

24

Objetos

Se dice que JavaScript es un lenguaje basado en objetos

En JavaScript no se definen clases, solo objetos


Es un lenguaje basado en prototipos (no basado en clases)
Se pueden crear objetos copiando prototipos de otros objetos

Un objeto en JavaScript es un conjunto de variables con un


nombre

Las variables del objeto se denominan propiedades


Las propiedades pueden ser valores de cualquier tipo de datos:
arrays, funciones y otros objetos
Las propiedades que son funciones se llaman mtodos

Juan Pavn - UCM 2012-13

JavaScript

25

Objetos

Se puede crear un objeto directamente indicando sus


propiedades:

persona=newObject();
persona.nombre="Juan";
persona.id=12893;
O en una sola instruccin, indicando las propiedades entre llaves:
var persona={nombre:"Juan",id:12893}
O definir un constructor
function persona(nombre,id){
this.nombre=nombre;
this.id=id;
}
Y as crear varios objetos:
var juan=newpersona("Juan",12893);
var adela=newpersona("Adela",23782);

Acceso a sus propiedades:


nombre=persona.nombre;//dosformasdeaccederauna
nombre=persona.["nombre"];//propiedaddelobjeto

Juan Pavn - UCM 2012-13

JavaScript

26

Objetos

Se pueden definir mtodos para un objeto dentro del constructor


function persona(nombre,id){
this.nombre=nombre;
this.id=id;
function renombra(nombre) {
this.nombre=nombre;
}
}

Y se invoca sobre el objeto:


var juan=newpersona("Juan",12893);
juan.renombra("Juanjo");

Juan Pavn - UCM 2012-13

JavaScript

27

Tipos de objetos

Objetos del lenguaje


Object, Boolean, Number, Math, Date, String, Array, RegExp

Objetos del navegador


Window, Navigator, Screen, Location, History, Timing, Cookies

Objetos DOM

Core DOM
Node, NodeList, NameNodeMap, Document, Element, Attr
HTML DOM
Document, Events, Elements
Anchor, Area, Base, Body, Button, Form, Frame, Frameset, Image,
Input, Link, Meta, Object, Option, Select, Style, Table, Textarea

Objetos definidos por el usuario

Juan Pavn - UCM 2012-13

JavaScript

28

JavaScript

Objetos del lenguaje

Objetos del lenguaje

Dan soporte para manejar tipos bsicos

Todos los objetos del lenguaje tienen las propiedades

constructor
Devuelve la funcin que crea el objeto
objeto.constructor
Devolver algo as
function Boolean(){[native code]}

prototype
Es un constructor que permite aadir propiedades y mtodos al
objeto
Se aplicar a todos los objetos de ese tipo
Boolean.prototype.nuevaFuncion=function(){
//cdigo
}

Y los mtodos

toString(): Devuelve una representacin como string del objeto


valueOf(): Devuelve el valor primitivo (true/false, un nmero, etc.)
del objeto

Juan Pavn - UCM 2012-13

JavaScript

30

Objeto Boolean

Permite convertir objetos no booleanos a booleanos

Creacin de un objeto booleano:


var unBooleano=newBoolean(otro);

El valor ser false si se crea con uno de los siguientes valores

0
-0
null
""
false
undefined
NaN

En el resto de los casos el valor ser true

Juan Pavn - UCM 2012-13

JavaScript

31

Objeto Number

Solo hay un tipo de nmeros que se puede escribir con o sin


decimales

Todos los nmeros se almacenan con 64 bits

Creacin de un objeto Number:


var num =newNumber(valor);

Propiedades:

MAX_VALUE: mayor nmero posible (1.7976931348623157e+308)


MIN_VALUE: menor nmero posible (5e-324)
NEGATIVE_INFINITY: -
POSITIVE_INFINITY :
NaN: para indicar que el valor no es un nmero

Mtodos:

toExponential(x): pone el nmero en notacin cientfica (1.23e+3)


toFixed(x): formatea el nmero con x decimales
toPrecision(x): formatea el nmero con longitud x

Juan Pavn - UCM 2012-13

JavaScript

32

Objeto Math

Ofrece varias operaciones matemticas

Constantes matemticas
Math.E
Math.PI
Math.SQRT2: raz cuadrada de 2
Math.SQRT1_2: raz cuadrada de 1/2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Mtodos
round(decimal): redondeo
random(): devuelve un nmero aleatorio entre 0 y 1
max(x, y)
min(x, y)

Juan Pavn - UCM 2012-13

JavaScript

33

Objetos String

Mtodos sobre strings

length: nmero de caracteres de un string: s.length


Concatenacin de strings: operador +
Al igual que en Java, si el primer operando es un string, los dems
operandos se convertirn a strings para concatenarse
var cad ="2"+2+2 "222"
toUpperCase(), toLowerCase()
var m="Juan";
var m2=m.toUpperCase();//m2="JUAN"
charAt(posicion)
indexOf(caracter), lastIndexOf(caracter)
Cuenta desde 0. Si no estuviera el carcter devuelven -1
var posicion =m.indexOf('a');//posicion =2
substring(inicio, final)
var resto=m.substring(1);//resto="uan"
split(separador)
varletras=m.split("");//letras=["J","u","a","n"]
m="Hola Juan";palabras=m.split("")//palabras=["Hola","Juan"]

Juan Pavn - UCM 2012-13

JavaScript

34

Objeto Date

Proporciona la fecha y hora


newDate() //fecha yhora actual
newDate(milisegundos)//milisegundos desde 1deenero 1970
newDate(string)
newDate(anno,mes,dia,horas,minutos,segundos,milisegundos)

Mtodos:

getTime(): devuelve el nmero de milisegundos desde 01.01.1970


getFullYear(): devuelve el ao (cuatro dgitos)
getDate(): devuelve el da del mes (1..31)
getDay(): devuelve el da de la semana (0..6)
getHours(): devuelve la hora (0..23)
getMinutes(): devuelve los minutos (0..59)
Los equivalentes setDate, setHours, etc.
setFullYear(): cambia la fecha
d.setFullYear(2020,10,3);
toUTCString(): convierte la fecha a un string con formato de fecha de
tiempo universal (Wed,30Jan 201307:03:25GMT)

Juan Pavn - UCM 2012-13

JavaScript

35

Arrays

Coleccin de variables

Pueden ser todas del mismo tipo o cada una de un tipo diferente
var nombre_array =[valor1,valor2,...,valorN];
var sin_inicializar =newArray(5);
Se accede a los elementos con nombre_array[ndice]
ndice es un valor entre 0 y N-1

Propiedades y mtodos

length: nmero de elementos de un array


concat(): concatenar los elementos de varios arrays
a1=[1,2,3];
a2=a1.concat(4,5,6);//a2=[1,2,3,4,5,6]
a3=a1.concat([4,5,6]);//a3=[1,2,3,4,5,6]
pop(): elimina y devuelve el ltimo elemento del array
push(elemento): aade un elemento al final del array
shift(): elimina y devuelve el primer elemento del array
unshift(elemento): aade un elemento al principio del array
reverse(): coloca los elementos del array en el orden inverso a su
posicin original
a1.reverse();//a1=[3,2,1]

Juan Pavn - UCM 2012-13

JavaScript

36

Ejercicios

Crea un script para visualizar un reloj en una pgina

Crea un script que visualice el da de la semana

usa la funcin getDay() y un array con los nombres de los das de la


semana

Juan Pavn - UCM 2012-13

JavaScript

37

Objeto RegExp

Para trabajar con expresiones regulares

Los modificadores pueden ser

i: no diferencia maysculas de minsculas


g: encuentra todas las correspondencias

Operaciones sobre una expresin:

Permite expresar patrones de caracteres y buscar correspondencias


(matching) en un string
Una expresin regular consta de un patrn y modificadores:
var er=newRegExp(patron,modificadores);
Se puede crear tambin con la notacin ms sencilla:
var expresion_regular=/patron/modificadores;

test(string) devuelve true si se cumple el patrn en el string


exec(string) devuelve el texto del texto correspondiente
O null si no hay ninguna correspondencia

Ejercicio: Qu devolver el siguiente cdigo?


var patron=newRegExp("e");
document.write(patron.test("JavaScriptnoes difcil"));

Juan Pavn - UCM 2012-13

JavaScript

38

Objeto Global

Hay un conjunto de propiedades y mtodos que pueden


accederse directamente

Propiedades globales

Infinity valor numrico que representa el infinito


NaN valor que no es un nmero ("Not a Number")
Number.NaN
undefined una variable que no tiene asignado un valor
var variable;
if (variable===undefined){
//enestecasovariableestindefinida
}

Juan Pavn - UCM 2012-13

JavaScript

39

Objeto Global

Mtodos globales

eval(string) Evalua una cadena de texto como si fuera un programa


JavaScript
parseInt(string, base) Convierte una cadena de texto a un nmero
entero
base indica el sistema de numeracin (2..36) (si no se indica se
puede derivar del inicio del string ("0x" hex, "0" octal, o decimal)
Si no puede hacer la conversin devuelve Number.NaN
parseFloat(string) Convierte una cadena de texto a un float
isNan(valor) Devuelve true si valor no es un nmero, false si lo es
isFinite(valor) Devuelve true si su argumento no es NaN o Infinity
encodeURI(uri) Codifica los caracteres especiales de una URI
excepto , / ? : @ & = + $ #
Para codificar tambin estos se usa encodeURIComponent()
decodeURI(uri_codificada) Descodifica una URI codificada

Juan Pavn - UCM 2012-13

JavaScript

40

JavaScript

Objetos del navegador

Objetos del navegador

Browser Object Model (BOM)

JavaScript proporciona objetos que permiten interactuar con el


navegador
No son parte del estndar pero casi todos los navegadores los
implementan

Jerarqua de objetos:
window

objetos BOM

navigator
screen

forms[]

history

anchors[]

location

links[]

document

images[]

objetos DOM
Juan Pavn - UCM 2012-13

JavaScript

42

Objeto window

Objeto que contiene todos los dems

Por ejemplo, el ms usado: window.document


Aunque algunos navegadores permiten omitir en ocasiones la referencia a
window por ser un objeto tan comn que se sobreentiende

Propiedades

innerHeight altura interior de la ventana del navegador


innerWidth anchura interior de la ventana del navegador
Para que funcione en versiones de IE 8 y anteriores, se puede poner:
var w=window.innerWidth ||document.documentElement.clientWidth
||document.body.clientWidth;

Mtodos
resizeTo(ancho, alto) cambia el tamao de la ventana
moveTo(x, y) mueve la ventana actual

Juan Pavn - UCM 2012-13

JavaScript

43

Objeto window

Aparte de la ventana del navegador se pueden crear otras


ventanas

open(URL, nombre, parmetros)


Los parmetros son una lista de algunos de los siguientes elementos:

toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels

var nuevaVentana=window.open("http://www.ucm.es");
var otraVentana=window.open("","","width=200,height=100");
otraVentana.document.write("<p>Estaesotraventana</p>");
otraVentana.focus();

Y destruirlas

ventana.close()

Juan Pavn - UCM 2012-13

JavaScript

44

Objeto window

Ventanas de dilogo

alert(mensaje) Muestra una ventana de alerta con un mensaje


confirm(mensaje) Muestra una ventana de confirmacin con los
botones OK y Cancel
prompt(mensaje, valorPredeterminado) Muestra una ventana de
dilogo para solicitar una informacin
Se indica un mensaje
Se puede indicar un valor por defecto para el rea de la respuesta
Como resultado se espera recibir un string

Estos mtodos se pueden invocar sobre el objeto window o


directamente:
var valor=window.prompt("Introduzcaelvalor:","");
var valor=prompt("Introduzcaelvalor:","");

Juan Pavn - UCM 2012-13

JavaScript

45

Ejercicios

Utiliza el objeto screen para obtener la dimensin de la pantalla y


abre una nueva ventana en el centro de la pantalla

Escribir un script con un botn para crear una nueva ventana. La


nueva ventana tendr a su vez un botn para cerrarla

En una ventana creada se puede escribir sobre el objeto document que


contiene:
var ventana=open();
ventana.document.write("<p>Untexto</p>");
ventana.document.write("<p>Otroprrafo</p>");
Para asociar una funcin JavaScript al evento de pulsar un botn, se
especifica al declarar el botn:
<FORM>
<INPUTTYPE="button"VALUE="Abrir Ventana"onClick="nueva();">
</FORM>
En este ejemplo, nueva() es una funcin JavaScript declarada dentro
de un elemento <script>

Juan Pavn - UCM 2012-13

JavaScript

46

Objeto screen

Contiene propiedades con la informacin de la pantalla del


usuario
No es necesario indicar window.screen, basta con screen

<p>Propiedadesdelapantalla:
<script>
document.write("Anchurayalturatotal:");
document.write(screen.width +"x"+screen.height);
document.write("<br>");
document.write("Anchurayalturadisponible:");
document.write(screen.availWidth +"x"+screen.availHeight);
document.write("<br>");
document.write("Profundidaddelcolor:");
document.write(screen.colorDepth);
document.write("<br>");
document.write("Resolucindelcolor:");
document.write(screen.pixelDepth);
</script>
</p>
Juan Pavn - UCM 2012-13

JavaScript

47

Objeto navigator

No es muy til porque se implementa de maneras bastante


diferentes

Adems es posible que el usuario configure el navegador para que


declare que es otro, luego la informacin no es fiable

<divid="navegador"></div>
<script>
txt ="<h3>Propiedadesdelnavegador:</h3>";
txt+="<p>CodeName:"+navigator.appCodeName +"</p>";
txt+="<p>Name:"+navigator.appName +"</p>";
txt+="<p>Versin:"+navigator.appVersion +"</p>";
txt+="<p>Cookiespermitidos:"+navigator.cookieEnabled +"</p>";
txt+="<p>Plataforma:"+navigator.platform +"</p>";
txt+="<p>Useragent header:"+navigator.userAgent +"</p>";
txt+="<p>Lenguajedelsistema:"+navigator.systemLanguage +"</p>";
document.getElementById("navegador").innerHTML=txt;
</script>

Juan Pavn - UCM 2012-13

JavaScript

48

Objeto history

Para proteger la privacidad, este objeto tiene una funcionalidad


bastante limitada, bsicamente para avanzar o retroceder
pginas

history.length indica cuntas pginas estn registradas (realmente


sirve para saber si hay alguna anterior)
history.back() carga la pgina precedente (si la hubiera)
history.forward() carga la pgina siguiente (si la hubiera)
history.go(nmero) carga la pgina de la lista hacia delante o atrs
indicada por el nmero, segn sea positivo o negativo

<script>
functionatras(){
window.history.back()
}
</script>

Juan Pavn - UCM 2012-13

JavaScript

49

Objeto location

Facilita la manipulacin del URL actual y la posibilidad de recargar


la pgina o redireccionar a otra pgina

Propiedades

location.href devuelve el URL


document.write(location.href);

location.hostname devuelve el dominio del host web


location.path devuelve el camino del fichero de la pgina actual
location.port devuelve el puerto (p.ej., 80 o 443)
location.protocol devuelve el protocolo usado (http:// o https://)
location.search devuelve la parte del URL tras ? (includo)
location.hash devuelve el anchor (la parte del URL tras #, includo)

Mtodos

location.assign(url) carga la pgina indicada


functionnuevoDoc(){
window.location.assign("http://www.ucm.com")
}

reload() recarga la pgina


Normalmente desde la cach, pero se puede forzar con reload(true)

Juan Pavn - UCM 2012-13

JavaScript

50

Ejercicio

Crea un script para que al pulsar a una referencia a una pgina


aparezca una ventana de confirmacin. En caso afirmativo se
cargar la nueva pgina, y en caso negativo se mantendr la
actual

window.confirm permite sacar la ventana de dilogo


El objeto location permite cambiar de pgina
Habr que asociar una funcin de script al evento de seleccionar una
nueva pgina

Juan Pavn - UCM 2012-13

JavaScript

51

Cookies

Un cookie es una variable que se almacena en el navegador, que


la enviar al servidor en las siguientes invocaciones que le enve

Los cookies tienen una fecha de expiracin

Creacin de un cookie

functioncreaCookie (nombre,valor,dias){
var fechaExpiracion=newDate();
fechaExpiracion.setDate(fechaExpiracion.getDate()+dias);
var valorCookie=escape(valor)+((dias==null)?"":
";expira="+fechaExpiracion.toUTCString());
document.cookie=nombre +"="+valorCookie;
}

Juan Pavn - UCM 2012-13

JavaScript

52

Cookies

Recuperacin de un cookie

functionrecuperaCookie(nombre){
var i,x,y,cookies=document.cookie.split(";");
for(i incookies){
x=cookies[i].substr(0,cookies[i].indexOf("="));
y=cookies[i].substr(cookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if(x==c_name){
returnunescape(y);
}
}
}

Juan Pavn - UCM 2012-13

JavaScript

53

Cookies

Utilizacin del cookie

Para invocar el mtodo se puede hacer por ejemplo al cargar la pgina


<body onload="usaCookie()">

functionusaCookie(){
var usuario=getCookie("nombreusuario");
if(usuario!=null&&usuario!=""){
alert("Bienvenido denuevo,"+usuario);
}
else{
usuario=prompt("Por favor,introduzca su nombre:","");
if(usuario!=null&&usuario!=""){
setCookie("nombreusuario",usuario,365);
}
}
}

Juan Pavn - UCM 2012-13

JavaScript

54

Ejercicio

Define una pgina que la primera vez solicite el nombre del


usuario y las siguientes le salude sin necesidad de pedir el
nombre

Para ello se almacena el nombre en un cookie


Probarlo en el navegador habitual

Juan Pavn - UCM 2012-13

JavaScript

JavaScript

DOM

55

DOM

Definido por W3C

Modelo de Objetos del Documento (Document Object Model)

Los elementos de un documento se organizan en una jerarqua


(rbol): jerarqua DOM

DOM define objetos y propiedades de los elementos HTML y XML, y los


mtodos para acceder a ellos
Representacin de documentos HTML y XML
API para consultar y manipular los documentos (contenido,
estructura, estilo)

Los elementos del documento son los nodos del rbol


Las relaciones entre los nodos representan las interconexiones de los
elementos

El API DOM proporciona operaciones para poder acceder a estos


objetos y manipularlos

Juan Pavn - UCM 2012-13

57

JavaScript

DOM

El navegador transforma el cdigo del documento en un rbol DOM

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML
1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta httpequiv="ContentType"
content="text/html;charset=iso88591"/>
<title>Ejemplo</title>
</head>
<body>
<p>Ejemplo depgina <em>sencilla</em></p>
</body>
</html>

Documento
XHTML
Elemento
HEAD
Elemento
META

Elemento
TITLE

Elemento
BODY
Elemento
P

Texto
Texto
Elemento
Ejemplo Ejemplo de pgina STRONG
Texto
sencilla

Juan Pavn - UCM 2012-13

JavaScript

58

Tipos de nodos

Los nodos bsicos de un documento HTML son:

Document nodo raz del que derivan todos los dems nodos del
rbol
Element representa cada una de las etiquetas
Es el nico nodo que puede contener atributos
Attr representa cada uno de los atributos de las etiquetas
Hay uno por cada par atributo=valor
Text contiene el texto encerrado por una etiqueta XHTML
Comment representa los comentarios incluidos en la pgina

Otros tipos de nodos menos utilizados:

DocumentType interfaz a las entidades definidas para el documento


CDataSection una seccin CDATA (que no analiza el parser)
DocumentFragment un documento "ligero" (una parte)
Entity una entidad
EntityReference una referencia a una entidad
ProcessingInstruction una instruccin de procesado
Notation una notacin declarada en la DTD

Juan Pavn - UCM 2012-13

JavaScript

59

Acceso a nodos

Acceso directo

Acceso por ID: document.getElementById(id)


Devuelve el objeto correspondiente al elemento que tenga el id
especificado (solo puede haber uno) o null si no lo hubiera
Este es un mtodo del objeto document
var x=document.getElementById("principal");
Devuelve el elemento con id="principal" dentro del documento

Acceso por etiqueta: getElementsByTagName(etiqueta)


Devuelve un array de nodos que tienen la etiqueta especificada
Este mtodo se puede aplicar a cualquier nodo
var enlaces=x.getElementsByTagName("a");
Devuelve todos los enlaces <a> dentro del elemento x (id="principal")

Juan Pavn - UCM 2012-13

JavaScript

60

Acceso a nodos

Desde el nodo padre

Acceder al nodo raz (document), y navegar por los hijos hasta el nodo
deseado
Se utilizan propiedades y mtodos de los nodos
Propiedades

childNodes NodeList (array) que contiene todos los hijos del nodo
firstChild y lastChild primer y ltimo hijo de un nodo
parentNode el padre del nodo
nextSibling y previousSibling nodos siguiente y anterior en el mismo
nivel

Mtodos
hasChildNodes()

Juan Pavn - UCM 2012-13

JavaScript

61

Mtodos de los nodos

Todos los nodos tienen un conjunto de mtodos para manipular


los hijos:

appendChild()
insertBefore()
isSameNode()
removeChild()
replaceChild()

Y otros mtodos para acceder a los atributos del nodo

getAttribute("atributo") devuelve el valor del atributo


setAttribute("atributo", "valor") permite modificar el valor del
atributo, o aadir un nuevo atributo

Juan Pavn - UCM 2012-13

JavaScript

62

Cambios en el documento y en elementos

document.write(string) para escribir en el documento:


document.write("texto");
document.write(Date());
document.writeln("Saltaalasiguientelnea");

Propiedad innerHTML para cambiar el contenido de un


elemento
document.getElementById(id).innerHTML="nuevocdigoHTML"

Otra posibilidad, ms eleborada:


var padre=document.getElementById("elPadre");
padre.removeChild(padre.firstChild);

Cambio de un atributo de un elemento


document.getElementById(id).atributo="nuevovalor"

Cambio del estilo


document.getElementById(id).style.property="nuevovalor"

Juan Pavn - UCM 2012-13

JavaScript

63

Creacin de un nuevo elemento

Para crear un nuevo elemento hay que:

Crear el elemento: createElement(etiqueta) y


createTextNode(string)
Aadirlo a un elemento existente (padre) con la operacin
appendChild(hijo)

<divid="seccion">
<pid="p1">Primerprrafo.</p>
<pid="p2">Segundoprrafo.</p>
</div>
<script>
/*Secrea elnuevo prrafo,incluyendo unnodo para eltexto */
var nuevop=document.createElement("p");
var nodo=document.createTextNode("Unnuevo prrafo.");
nuevop.appendChild(nodo);
//elnuevo prrafo consu texto
/*Seaade elprrafo alfinaldelaseccin corresponsidente */
var elemento=document.getElementById("seccion");
elemento.appendChild(nuevop);
</script>
Juan Pavn - UCM 2012-13

JavaScript

64

Eliminacin de un elemento

Para eliminar un nuevo elemento hay que:

Localizar el padre del elemento


Eliminar el nodo hijo que corresponde al elemento con la operacin
removeChild(hijo)

<divid="seccion">
<pid="p1">Primerprrafo.</p>
<pid="p2">Segundoprrafo.</p>
</div>
<script>
var padre=document.getElementById("seccion");
var hijo=document.getElementById("p1");
padre.removeChild(hijo);
</script>
//Ms corto:
var hijo=document.getElementById("p1");
hijo.parentNode.removeChild(hijo);
Juan Pavn - UCM 2012-13

JavaScript

JavaScript

Eventos

65

Eventos

HTML DOM permite asociar cdigo JavaScript a los eventos

Cada evento tiene una propiedad (event handler) a la que como


valor se le puede asignar la funcin que se invocar cuando se
produzca el evento

Esta propiedad suele llevar el prefijo on seguido del nombre de evento

<html>
<head><title>Gestin deeventos</title>
<scripttype="text/javascript"><!
functionpaginaCargada(){
alert("Lapagina hasido cargada");
}
window.onload=paginaCargada;
//></script>
</head>
<body>
<form>
<inputtype="button"value="Hola"onClick="window.alert('Hola')"/>
</form>
</body>
</html>
Juan Pavn - UCM 2012-13

JavaScript

67

Eventos

El cdigo a ejecutar por un evento se puede declarar en varios


lugares

En el propio elemento (como un atributo)


<h1onclick="this.innerHTML='Ole!'">Haz clickeneste texto</h1>
En una funcin llamada desde el manejador del evento
<script>
function cambiaElTexto(id){id.innerHTML="Ole!";}
</script>
//...
<h1onclick="cambiaElTexto(this)">Haz clickeneste texto</h1>
La variable this se refiere al elemento que ha provocado el evento
Fuera del elemento
document.getElementById("primero").onclick=function(){
cambiaElTexto(this)};
Nota: Si se invoca getElementById enunscriptdentrodel<head>,
normalmentedevolvernull porque no se habra construido an el
rbol DOM
La solucin consiste en incluir ese cdigo dentro de onLoad (ver ejemplo en
la siguente pgina)

Juan Pavn - UCM 2012-13

JavaScript

68

Eventos
<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttpequiv="ContentType"content="text/html;charset=utf8"/>
<title>Gestin deeventos</title>
<scripttype="text/javascript"><!
window.onload =function(){
document.getElementById("primero").onclick=function(){cambiaTexto(this)};
}
functioncambiaTexto(id){id.innerHTML="Ole!";}
//></script>
</head>
<body>
<h1id="primero">Haz clickeneste texto</h1>
</body>
</html>

Juan Pavn - UCM 2012-13

JavaScript

69

Eventos

Sobre la pgina (se refieren al elemento <body>)

onload Al cargar una pgina o una imagen

onunload Cuando se abandona la pgina

onresize Al modificar el tamao de la ventana del navegador

Sobre elementos

onfocus Cuando el foco se dirige a un objeto

onblur Cuando se cambia el foco a otro objeto

onclick Cuando se hace click sobre un objeto

ondblclick Cuando se hace doble click sobre un objeto

Sobre formularios

onsubmit Al pulsar el botn de envo de un formulario

onchange Al cambiar el valor de un campo de un formulario

onreset Al inicializar el formulario (borra todos los datos)

Juan Pavn - UCM 2012-13

JavaScript

70

Eventos

Teclado

onkeydown Cuando se pulsa un tecla

onkeyup Cuando se suelta una tecla

onkeypress Cuando se pulsa y suelta una tecla

Ratn

onmousedown Cuando se pulsa un botn del ratn

onmouseup Cuando se suelta el botn del ratn

onmousemove Al mover el ratn

onmouseover Cuando se mueve el puntero del ratn sobre un


elemento (cuando entra al elemento)
onmouseout Cuando el puntero del ratn abandona un elemento

Juan Pavn - UCM 2012-13

JavaScript

71

Eventos

Algunos eventos (onclick, onkeydown, onkeypress, onreset,


onsubmit) ya tienen una accin por defecto que se puede
modificar al definir un manejador de evento

Algunas acciones pueden dar lugar a una sucesin de eventos

Por ejemplo, al pulsar sobre un botn de tipo "submit" se


desencadenan los eventos onmousedown, onclick, onmouseup y
onsubmit de forma consecutiva

Juan Pavn - UCM 2012-13

JavaScript

72

Ejercicios

Realiza un script que muestre las teclas que va pulsando el


usuario

Se explica cmo hacerlo en


http://librosweb.es/javascript/capitulo_6/obteniendo_informacion_del_
evento_objeto_event.html

Haz un script que vaya mostrando los elementos donde se hace


click con el ratn

Juan Pavn - UCM 2012-13

JavaScript

JavaScript

Formularios

73

Forms

Al cargar la pgina el navegador crea automticamente un array


llamado forms que contiene la referencia a todos los formularios
de la pgina
document.forms

Dentro de cada form hay un array de elementos


document.forms[i].elements[j]//i:0..n,j:0..m

Como la estructura de los formularios puede cambiar es ms


eficaz utilizar el atributo id en cada elemento del formulario que
se quiere tratar

Juan Pavn - UCM 2012-13

JavaScript

75

Forms

Se pueden utilizar las siguientes propiedades de cada elemento:

type
Para los elementos de tipo <input> (text, button, checkbox, etc.)
coincide con el valor de su atributo type
Para las listas desplegables normales (elemento <select>) su valor
es select-one
Para las listas que permiten seleccionar varios elementos a la vez su
valor es select-multiple
Para los elementos de tipo <textarea>, el valor de type es textarea
form: referencia directa al formulario al que pertenece el elemento
document.getElementById("id_del_elemento").form
name: valor del atributo name de XHTML (no se puede modificar)
value: valor del atributo value de XHTML
Para los campos de texto (<input type="text"> y <textarea>)
proporciona el texto que ha escrito el usuario
<inputtype="text"id="linea"/>
var valor=document.getElementById("linea").value;
Para los botones se trata de sabe el texto del botn seleccionado:

Juan Pavn - UCM 2012-13

JavaScript

76

Forms

Eventos ms utilizados en el manejo de los formularios

onclick cuando se pincha con el ratn sobre un elemento


Generalmente con los botones (button, submit, image)
onchange cuando el usuario cambia el valor de un elemento de
texto
Generalmente con entrada de tipo text o textarea
Tambin se produce cuando el usuario selecciona una opcin en una
lista desplegable (<select>), al pasar el usuario al siguiente campo
del formulario
onfocus cuando el usuario selecciona un elemento del formulario
onblur cuando el usuario pasa a otro elemento del formulario

Juan Pavn - UCM 2012-13

JavaScript

77

Ejercicio

Crea una funcin validar() para validar la entrada de datos de


un formulario

En http://librosweb.es/javascript/capitulo_7/validacion.html hay varios


ejemplos de cmo hacerlo

Para evitar que se enve un formulario varias veces conviene


deshabilitar el botn de envo tras enviarlo una vez. Escribe un
script para gestionar el envo del formulario:

Deshabilita el botn "Enviar"


Cambia el mensaje que muestra el botn de "Enviar" a "Enviando"
Cuando se haya enviado genera una pgina nueva indicando que se ha
enviado correctamente y muestra la informacin que se ha enviado

Juan Pavn - UCM 2012-13

JavaScript

78

JavaScript

Libreras y frameworks

Libreras JavaScript

jQuery

Prototype

Usa selectores CSS para acceder y manipular los elementos HTML de


una pgina web, lo que simplifica mucho el manejo del rbol DOM
Un framework de interfaz de usuario para gestionar los eventos
Mltiples plugins que facilitan el desarrollo de las aplicaciones
Manejo simple del rbol DOM
Incluye el uso de clases y herencia en JavaScript

Moo Tools (My Object Oriented Tools)

Implementa el uso de clases


Proporciona facilidades de animacin

YUI - The Yahoo! User Interface Framework

script.aculo.us Efectos visuales

Una buena lista: http://javascriptlibraries.com/

Juan Pavn - UCM 2012-13

JavaScript

80

Libreras JavaScript

90.2%: JQuery

http://w3techs.com
8.1%:
6.1%:
5.1%:
4.7%:
2.5%:

Juan Pavn - UCM 2012-13

MooTools
Prototype
ASP.NET Ajax
Script.aculo.us
YUI Library

JavaScript

81

Tecnologas de script

AJAX (Asynchronous JavaScript And XML)

Creacin de aplicaciones Web interactivas


Las aplicaciones se ejecutan en el cliente
Pueden comunicarse asncronamente con el servidor
El contenido de las pginas se actualiza sin necesidad de volver a
cargarlas => Mayor dinamismo e interactividad
Comprende varias tecnologas:
XHTML y CSS: Presentacin basada en estndares
DOM: Interaccin y manipulacin dinmica de la presentacin
XML, XSLT y JSON: Intercambio y manipulacin de informacin
XMLHttpRequest: Intercambio asncrono de informacin
JavaScript: Unin del resto de tecnologas
En AJAX el cliente hace una peticin al servidor por medio del objeto
XMLHttpRequest
El servidor procesa la peticin y devuelve una respuesta en XML en
lugar de una pgina (X)HTML
El propio objeto XMLHttpRequest procesa dicha respuesta y actualiza
nicamente las secciones necesarias de la pgina, evitando tener que
recargarla por completo

Juan Pavn - UCM 2012-13

JavaScript

82

Depuracin de JavaScript

Para depurar JavaScript

Con Firefox: consola JavaScript


Web Developer -> Error console (o con ctrl-mayusculas-J)
Con Aptana Studio
https://wiki.appcelerator.org/display/tis/About+the+Debug+perspective

Juan Pavn - UCM 2012-13

JavaScript

83

Bibliografa

http://librosweb.es/javascript/

http://www.w3schools.com/js/default.asp

Una buena coleccin de ejemplos:


http://www.w3schools.com/js/js_ex_dom.asp

Artculos varios: http://javascript.about.com/

Juan Pavn - UCM 2012-13

JavaScript

84

También podría gustarte