Técnicas Avanzadas Web
Módulo 2: Javascript
Módulo Segundo
Conceptos básicos de
Javascript
1
Javier Infante Porro
Técnicas Avanzadas Web
Modulo 2: Javascript
● Javascript != Java
● Creado por Bredan Eich para Navigator 2.0
● Lenguaje ligero interpretado en
navegadores web (aunque no
exclusivamente).
● Javascript es una implementación de
ECMAScript (lenguaje de scripting basado
en prototipos)
2
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● INCLUSIÓN en (X)HTML:
– Inline en el documento:
<script type="text/javascript">
//<![CDATA[
// código....
//]]>
</script>
– Separando estructura(xhtml) / diseño(css) y
ahora programación(js)
<script type="text/javascript"
src="[Link]"></script>
3
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Tipos básicos de datos
var intValue = 1;
var floatValue = 3.0;
var stringValue = "This is a string\n";
var sqString = 'This is also a string';
● Javascript es un lenguaje con tipo de datos
dinámicos
● Las variables son declaradas con la
palabra clave “var”
● Todos los tipos simples de datos están
soportados
4
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Arrays: Un array es un objeto interno de
Javascript.
var cadena = new Array();
var cadena = [2,'33',123];
● Mapas de Propiedades
var MAPA = {propiedad : “valor”, otra : “valor2”;}
alert([Link]); // valor
alert(MAPA[“otra”]);
delete MAPA.prop4;
for (var key in MAPA) alert(MAPA[key]);
5
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Funciones
– Una función en javascript es un objeto: puede
ser creado dinámicamente, almacenado, pasado
y devuelto como cualquier otro valor.
function miMiniFuncion(arg1,arg2) {
alert("Hola "+arg1+" de "+arg2);
}
miMiniFuncion("Jose","Valencia");
var miFuncion = function(arg1,arg2) {
alert("Hola "+arg1+" de "+arg2);
}
miFuncion("Pedro","Cuenca");
6
Javier Infante Porro
Técnicas Avanzadas Web
Modulo 2: Javascript
● Objetos
– Javascript Orientación a Objetos basada en
prototipos (no en clases).
– Es necesario un objeto constructor, que no es
otra cosa que una función normal.
– palabra reservada “this”, hace referencia a la
instancia en sí.
function Calculadora(o1,o2) {
this.op1 = o1;
this.op2 = o2;
}
var cal = new Calculadora(6,4);
alert(cal.op1);
7
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– Es necesario que un objeto tenga métodos, y no
sólo propiedades: PROTOTYPE:
[Link]() {
return this.op1+this.op2;
}
var cal = new Calculadora(6,4);
alert(cal.op1+”+”+cal.op2+”=”[Link]());
8
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● DOM (Document Object Model)
– Interfaz independiente de la plataforma que
accede y puede modificar dinámicamente la
estructura y el estilo de documentos.
– Existe un “estandar”: W3C DOM
● implementado “parcialmente” por casi todos los
navegadores comerciales.
– Los documentos HTML poseen una estructura
hereditaría representada como una estructura
de árbol.
– Conjunto de propiedades y métodos para
recorrer árboles XML (HTML), y examinar o
modificar sus nodos.
9
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Partiendo de este código HTML:
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h2>
<p>This is a <i>simple</i> document.
</body>
</html>
10
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Ésta sería su representación en forma de
árbol:
11
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Nodo document
– Nodo del que cuelgan todos los elementos de un
documento HTML. (éstos, heredarán sus
métodos).
– Métodos (más útiles)
● [Link](iden)
– Devuelve 1 único elemento identificado por el
atributo único “id”;
● [Link](“tag”)
– Devuelve un array con todos los nodos cuyo tag
coincida con “tag”.
12
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Tipos de Nodos (NodeType)
– Elemento (1)
<p>Hola</p>
– Texto (3)
<p>Hola</p>
– Atributo (2)
<p class=”estilo”>Hola</p>
13
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Propiedades
– attributes
● Devuelve array con los atributos de un nodo.
HTML:
<p id=”par1” class=”est_par”>ejemplo</p>
JS:
alert([Link]("par1").attributes.l
ength); // 2
– childNodes
● Devuelve array con los nodos hijos.
HTML:
<p id=”p1”><strong>Hola</strong><em>¿que tal?</em>
JS:
alert([Link](“p1”).[Link]
gth); //
14
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– data
● Devuelve el contenido dentro de un nodo. (tener en
cuenta que un texto, está a su vez dentro de un
nodo)
HTML:
<p id=”p1”>hola que tal?</p>
JS:
alert([Link](“p1”).[Link]
a); // alert->hola que tal?
– firstChild
● Devuelve el primer nodo hijo.
HTML:
<p id=”p1”><strong>hola</strong> que tal?</p>
JS:
[Link](“p1”).[Link]
[Link]=”adios”;
15
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– lastChild
● Devuelve el último nodo hijo.
HTML:
<p id=”p1”><strong>hola</strong> ¿que tal?</p>
JS:
[Link](“p1”).[Link]=”
¿como estás?”;
– nextSibling
● Devuelve el siguiente nodo hermano.
HTML:
<p id=”p1”>hola</p><p id=”p2”>que tal?</p>
JS:
alert([Link](“p1”).[Link]
[Link]); // alert->que tal?
16
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– nodeName
● Devuelve el nombre de un nodo.
HTML:
<p id=”p1”><strong>hola</strong> ¿que tal?</p>
JS:
p = [Link](“p1”);
alert([Link]); // strong
alert([Link]); // #text
– nodeType
● Devuelve el tipo de un nodo.
HTML:
<p id=”p1”><strong>hola</strong> ¿que tal?</p>
JS:
p = [Link](“p1”);
alert([Link]); // 1
alert([Link]); // 3 17
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– nodeValue
● Devuelve para nodos de texto y atributos, el valor
del nodo. Para nodos elementos, NULL.
HTML:
<p id=”p1”><strong>hola</strong> ¿que tal?</p>
JS:
p = [Link](“p1”);
alert([Link]); // NULL
alert([Link]); // ¿que tal?
– parentNode
● Devuelve el Padre de un nodo.
HTML:
<p><strong id=”s1”>hola</strong> ¿que tal?</p>
JS:
alert([Link](“s1”).[Link]
[Link]); // ¿que tal? 18
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– previousSibling
● Devuelve el nodo hermano anterior.
HTML:
<p id=”p1”>hola</p><p id=”p2”>que tal?</p>
JS:
alert([Link](“p2”).previousSiblin
[Link]); // hola
19
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Métodos
– appendChild()
● Inserta un nodo hijo en la última posición.
HTML:
<p id=”p1”><strong>hola</strong></p>
JS:
var cursiva = [Link](“em”);
var texto = [Link](“adios”);
[Link](texto);
[Link](cursiva);
20
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– appendData()
● Inserta un “data” (texto) al final del data de una
nodo.
HTML:
<p id=”p1”>hola</p>
JS:
[Link](“p1”).[Link]
a(“ ¿que tal?”);
– cloneNode()
● Clona un nodo a otro nodo.
HTML:
<p id=”p1”><strong>hola</strong></p>
JS:
p = [Link](“p1”);
var St2 = [Link](true);
[Link](St2); 21
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– getAttribute()
● Devuelve un attributo determinado.
HTML:
<p id=”p1” class=”estilo_parrado”>hola</p>
JS:
[Link](“p1”).getAttribute(“class”
); // estilo_parrafo
– setAttribute()
● introduce / modifica un attributo de un nodo.
HTML:
<p id=”p1” class=”estilo_parrafo”>hola</p>
JS:
[Link](“p1”).setAttribute(“class”
,”estilo_parrafo2”);
22
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– insertBefore()
● Inserta un nodo, bajo un nodo padre, antes de un
nodo hermano.
HTML:
<p id=”p1”><strong id=”s1”>hola</strong></p>
JS:
var o = [Link](“em”);
[Link]([Link](“adios”));
[Link](“p1”).insertBefore(o,docum
[Link](“s1”));
– removeChild()
● Elimina un nodo
HTML:
<p id=”p”><strong id=”s”>hola</strong>que tal</p>
JS:
[Link](“p1”).removeChild(document 23
.getElementById(“s1”)); Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– hasChildNodes()
● Devuelve valor booleano (si un nodo tiene hijos o
no)
HTML:
<p id=”p1”><strong>hola</strong> que tal</p>
JS:
p = [Link](“p1”);
[Link](); // true
[Link](); // false
24
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Manejadores de Eventos
– EVENTO: método que se activa tras la
interactuación del usuario o del navegador.
– Son la esencia principal del Javascript; sin
eventos, no sirve de nada.
– Existen diferentes implementaciones del sistema
de eventos entre todas los navegadores del
mercado.
● TIPOS DE EVENTOS
– TECLADO
● keydown / keypress /keydown
25
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– RATÓN
● click
● dblclick
● mouseover
● mousemove
– INTERFAZ
● load / unload
● resize / scroll
● focus / blur
– FORMULARIO
– submit / reset
– change / select
26
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Registrando Eventos
– Método tradicional inline
● Se trata de añadir un atributo a los nodos HTML.
● El nombre de ese atributo será el evento que se
quiere disparar en ese nodo concreto, con el prefijo
“on”.
<input type=”text” onclick=”javascript:go();” />
● DESACONSEJADO.
– dificil mantenimiento.
– rompe la regla de separar diseño / funcionalidad.
27
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– Tradicional
● Asignando funciones a objetos:
[Link] = nombre_funcion;
[Link] = funcion () { //codigo }
– W3C (no funciona en IE)
● addEventListener
[Link]('click',funcion,true);
– Microsoft
● attachEvent
[Link] ('onclick',funcion);
28
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Propiedades de un Evento
– Al asignar una función a un evento determinado,
tendremos acceso a un objeto de tipo evento
con información muy valiosa del mismo (sobre
que objeto ha saltado el evento, que botón del
ratón se ha pulsado, que letra has pulsado...)
– Dependiendo del tipo de evento, el objeto
evento tendrá unas propiedades u otras.
– El acceso al objeto evento, así como sus
propiedades son dependientes del navegador.
29
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Accediendo al evento:
– W3C:
● Depende del tercer parámetro en el método
addEventListener
● El método recibe como argumento el evento en sí:
function haz_click(e) {
alert([Link]);
}
[Link](“boton1”).addEventListener
(“click”,haz_click,false);
30
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– Microsoft IE
● El evento esta disponible en una propiedad del
objeto window:
function haz_click() {
alert([Link]);
}
[Link](“boton1”).atachEvent(“oncl
ick”,haz_click);
31
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Propiedades más comunes:
– [Link] (W3C) / [Link] (IE)
● Sin duda, la propiedad más importante que nos
trae el evento: El objeto origen sobre el que se ha
disparado.
● W3C:
function haz_click(e) {
alert([Link]); // alerta-> GO!
}
--
[Link](“boton1”).addEventListener
(“click”,haz_click,false);
--
<input type=”button” id=”boton1” value=”GO!” />
32
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– Microsoft IE
function haz_click() {
alert([Link]); //
alerta-> GO!
}
--
[Link](“boton1”).atachEvent(“oncl
ick”,haz_click);
--
<input type=”button” id=”boton1” value=”GO!” />
33
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– [Link]
● Devuelve el código ASCII de la tecla pulsada.
– [Link] / [Link] (No IE)
● Devuelve las coordinadas x e y del puntero del
ratón relativas al documento.
– [Link] / [Link]
● Devuelve las coordinadas x e y del puntero del
ratón relativas a la pantalla.
– [Link]
● Identifica qué botón del ratón se ha pulsado:
– IE: 1(izda) / 2(dcha) / 4(centro)
– W3C: 0(izda) / 1(centro) / 2(dcha)
34
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● XMLHttpRequest
– Objeto interno Javascript, encargado de hacer
peticiones al servidor web y procesar la salida
de éste.
– Creado como control ActiveX por MS, esta
implementado nativamente en otros
navegadores (y realiza el mismo trabajo).
– No es un objeto nuevo, simplemente ha sido
puesto de moda por Gmail y la moda WEB2.0.
35
Javier Infante Porro
Técnicas Avanzadas Web
● Instanciando el objeto
– Nativamente:
var oXML = new XMLHttpRequest();
– ActiveX
var oXML = new ActiveXObject(“[Link]”);
– CrossBrowser
if ([Link])
var oXML = new XMLHttpRequest();
else if ([Link])
var oXML = new
ActiveXObject(“[Link]”);
36
Javier Infante Porro
Técnicas Avanzadas Web
● Métodos:
– abort() - Detiene la petición en curso.
– getAllResponseHeaders() - Devuelve todas las
cabeceras de la respuesta (etiquetas y valores)
como una cadena.
– getResponseHeader(etiqueta) - Devuelve el
valor de la etiqueta en las cabeceras de la
respuesta.
– open(método,URL,asíncrona,nombre,passwo
rd)
● Abre una conexión con esa URL mediante ese
metodo (GET o POST), aplicando los valores
opcionales de la derecha.
– send(contenido) - Envía la petición.
– setRequestHeader(etiqueta,valor) - Establece
el valor de las cabeceras de petición. Javier Infante Porro37
Técnicas Avanzadas Web
Módulo 2: Javascript
● Propiedades
– onreadystatechange - Contiene el nombre de
la función a ejecutar cuando el estado de la
conexión cambie.
– readyState - Estado de la conexión:
● 0 : No iniciado
● 1: Cargando
● 2: Cargado pero sin incorporar el contenido a los
objetos correspondientes
● 3: Incorporando contenido a los objetos
correspondientes
● 4: Carga completada
38
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– responseText - Datos devueltos por el servidor
en formato cadena.
– responseXML - Datos devueltos por el servidor
en forma de documento XML que puede ser
recorrido mediante las funciones del DOM.
– status - Código enviado por el servidor, del tipo
404 (documento no encotrado) o 200 (OK).
– statusText - Mensaje de texto enviado por el
servidor junto al código (status), para el caso de
código 200 contendrá “OK”
39
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– Ejemplo GET
if ([Link])
var oXML = new XMLHttpRequest();
else if ([Link])
var oXML = new
ActiveXObject("[Link]");
[Link]("GET","[Link]?op1=3");
[Link] = cambiaestado;
[Link](null);
function cambiaestado() {
if ([Link]==4)
alert([Link]);
}
40
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
– Ejemplo POST
// creación oXML...
var str = “op1=valor1&op2=valor2”;
[Link]("POST","[Link]");
[Link] = cambiaestado;
[Link]("Content-Type",
"application/x-www-form-urlencoded");
[Link]("Content-Length",
[Link]);
[Link](str);
function cambiaestado() {
if ([Link]==4)
alert([Link]);
}
41
Javier Infante Porro
Técnicas Avanzadas Web
Módulo 2: Javascript
● Enlaces interesantes
– [Link]
– [Link]
– [Link]
– [Link]
– [Link]
– [Link]
– [Link]
42
Javier Infante Porro
