Javascript Clásico

Javascript Clásico.

Javascript Clásico

Javier Infante <jabi@irontec.com>

Donosti :: EHU / UPV ::16/10/2009


● Incluir Javascript en nuestros documentos
– INCLUSIÓN en (X)HTML:

● Inline en el documento:
<script type="text/javascript">
//<![CDATA[
// código....
//]]>
</script>

● Separando contenido de estructura:
<script type="text/javascript"
src="scripts.js"></script>


● Tipos de datos:
– var intValue = 1;
– var floatValue = 3.0;
– var stringValue = "This is a stringn";
– var sqString = 'This is also a string';
– var array = [1,2,3];
– var obj = {1,2,3};
– var function = new function() {};
● Javascript es un lenguaje con tipado débil.
● Las variables son declaradas con la palabra
reservada “var”, y són válidas en su ámbito
de declaración.


● DOM
– 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
omodificar sus nodos.


<html>
<head>
<title>Sample Document</title>
</head>
<body>
<h1>An HTML Document</h2>
<p>This is a <i>simple</i> document.
</body>
</html>


● Document
– Nodo del que cuelgan (y heredan
propiedades y métodos) todos los
elementos de un documento HTML.

● document.getElementById(iden)
– Devuelve 1 único elemento identificado por el
atributo único “id”;
● document.getElementsByTagName(“tag”)
– Devuelve un array con todos los nodos cuyo tag
coincida con “tag”.


● Propiedad nodeType

– Elemento (1)
● <p>Hola</p>
– Texto (3)
● <p>Hola</p>
– Atributo (2)
● <p class=”estilo”>Hola</p>


● Propiedad attributes
– Devuelve array con los atributos de un nodo.
– HTML:
<p id=”par1” class=”est_par”>ejemplo</p>
– JS:
alert(document.getElementById("par1").attributes.length);
// Muestra “2”
● Propiedad childNodes
– Devuelve array con los nodos hijos.
– HTML:
<p id=”p1”><strong>Hola</strong><em>¿que tal?</em>
– JS:
alert(document.getElementById(“p1”).childNodes.length);
// Muestra “2”


● Propiedad data
– Devuelve el contenido dentro de un nodo.
– HTML:
<p id=”p1”>hola que tal?</p>
– JS:
alert(document.getElementById(“p1”).firstChild.data);
//Muestra “hola que tal?”

● Propiedad firstChild
– Devuelve el primer nodo hijo.
– HTML:
<p id=”p1”><strong>hola</strong> que tal?</p>
– JS:
document.getElementById(“p1”).firstChild.firstChild.data=
”adios”;


● Propiedad lastChild / nextSibling
– Devuelve el último / anterior nodo hijo.
● Propieddad nodeName
– Devuelve el nombre(tag) de un nodo.
● Propiedad nodeType
– Devuelve el tipo de nodo (1|2|3)
● Propiedad nodeValue
– Devuelve el contenido del nodo (si es de texto)
– O NULL en caso de atributo.
● Propiedad parentNode
– Devuelve el Nodo Padre
● Propiedad previousSibling
– Devuelve el nodo hermano anterior.
● Propiedad innerHTML
– Devuelve el contenido HTML debajo del nodo.


● Método createElement
– Crea un nodo de tipo elemento
var oEM = document.createElement(“em”);
● Método createTextNode
– Crea un nodo de tipo Texto
var oTxt = document.createTextNode(“hola”);
● Método appendChild()
– Inserta un elemento como último hijo de otro
oEM.appendChild(oTxt);
● Método appendData
– Inserta texto dentro de un nodo de texto
oEM.lastChild.appendData(“ ¿Qué tal?”);
● Método cloneNode
– Clona un elemento
var oEM2 = oEM.cloneNode(true);


● Método insertBefore
– Inserta un nodo, antes de un nodo hijo espefico.
var o = document.createElement(“em”);

o.appendChild(document.createTextNode(“adios”));

document.getElementById(“p1”).insertBefore(o,documnet.get
ElementById(“s1”));

● Método removeChild
– Elimina un nodo hijo determinado

● Método hasChildNodes
– Devuelve true/false si un nodo tiene o no, nodos
descendientes.


● Método getAttribute
– Devuelve el atributo de un nodo.
alert(document.getElementById(“p1”).getAttribute(“id”));
// Muestra p1

● Método setAttribute
– Cambia el valor de atributo
document.getElementById(“p1”).setAttribute(“class”,”r2”);

● Método removeAttribute
– Elimina un atributo de un nodo


● 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 hay interactuación.
– Existen diferentes implementaciones del
sistema de eventos entre todas los
navegadores del mercado (para variar).

● TIPOS DE EVENTOS
– TECLADO
keydown / keypress /keydown


– RATÓN
● click
● dblclick
● ouseover
● mousemove

– INTERFAZ
● load / unload
● resize / scroll
● focus / blur

– FORMULARIO
● submit / reset
● change / select


● 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.


– Método propuesto por el W3C
● AddEventListener
elemento.addEventListener('click',funcion,true);

– Método propuesto por Microsoft
● AttachEvent
elemento.attachEvent ('onclick',funcion);

● 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 se ha disparado
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.

● Accediendo al evento
– W3C:
● Depende del tercer parámetro en el método
addEventListener.
● El método recibe como argumento el objeto
evento.
function haz_click(e) {
alert(e.type);
}
document.getElementById(“boton1”).addEventListener
(“click”,haz_click,false);

● Accediendo al evento
– Microsoft IE
● El evento esta disponible en una propiedad del
objeto global window:

function haz_click() {
alert(window.event.type);
}

document.getElementById(“boton1”).atachEvent(“onclick”,
haz_click);

● Propiedades del evento
– e.target (W3C) / e.srcElement (IE)
● La propiedad más importante que nos posee un
evento es el objeto origen que lo ha invocado.
– W3C:
function haz_click(e) {
alert(e.target.value); // alerta> GO!
}
document.getElementById(“boton1”).addEventListener(“click
”,haz_click,false);

<input type=”button” id=”boton1” value=”GO!” />
– Microsoft IE
function haz_click() {
alert(window.event.srcElement.value); // alerta> GO!
}
document.getElementById(“boton1”).atachEvent(“onclick”,ha
z_click);
<input type=”button” id=”boton1” value=”GO!” />

● Mas propiedades del eventos
– e.keyCode
● Devuelve el código ASCII de la tecla pulsada.
– e.pageX / e.pageY (No IE)
● Devuelve las coordinadas x e y del puntero del
ratón relativas al documento.
– e.screenX / e.screenY
● Devuelve las coordinadas x e y del puntero del
ratón relativas a la pantalla.
– e.button
● Identifica qué botón del ratón se ha pulsado:
– IE: 1(izda) / 2(dcha) / 4(centro)
– W3C: 0(izda) / 1(centro) / 2(dcha)

● XMLHttpRequest

– Objeto interno Javascript, encargado de
hacer peticiones al servidor web y procesar
la salida de éstas.
– Creado como control ActiveX por MS, esta
implementado nativamente en otros
navegadores (e implementa las mismas
funcionalidades).

– AJAX!

● Instanciando XMLHttpRequest

– Nativamente:
var oXML = new XMLHttpRequest();

– ActiveX
var oXML = new ActiveXObject(“Microsoft.XMLHTTP”);

– CrossBrowser
if (window.XMLHttpRequest)
else if (window.ActiveXObject)
var oXML = new ActiveXObject(“Microsoft.XMLHTTP”);

● Métodos XMLHttpRequest
– 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,password)
● Abre una conexión con esa URL mediante ese
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.

● Propiedades XMLHttpRequest
– onreadystatechange – Función que se invoca al
cambiarse un estado en la conexión.
– 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
– responseText - Datos devueltos por el servidor
en formato string.
– responseXML - Datos devueltos por el servidor
en forma de documento XML que puede ser
recorrido mediante las funciones del DOM.
– status / statusText - Código respuesta HTTP.

● Ejemplo GET
if (window.XMLHttpRequest)
else if (window.ActiveXObject)
  var oXML = new ActiveXObject("Microsoft.XMLHTTP");

oXML.open("GET","llamando.php?op1=3");
oXML.onreadystatechange = cambiaestado;
oXML.send(null);
function cambiaestado() {
  if (oXML.readyState==4)
    alert(oXML.responseText);
}
● Ejemplo POST
var str = “op1=valor1&op2=valor2”;
oXML.open("POST","llamando.php");
oXML.onreadystatechange = cambiaestado;
oXML.setRequestHeader("ContentType","application/xwww
formurlencoded");
oXML.setRequestHeader("ContentLength",str.length);
oXML.send(str);


Licencias / Créditos

Licencia
Este documento está protegido bajo la licencia Reconocimiento-
SinObraDerivada 2.1 España de Creative Common
(http://creativecommons.org/licenses/by-nc-sa/3.0/es/)
Copyright © 2009 Javier Infante <jabi@irontec.com>
Se permite la copia, modificación, distribución, uso comercial y
realización de la obra, siempre y cuando se reconozca la autoría de la
misma, a no sea ser que se obtenga permiso expreso del autor. El
autor no permite distribuir obras derivadas a esta. Esta nota no es la
licencia completa de la obra, sinouna traducción de la nota orientativa
de la licenciaoriginal completa (jurídicamente válida).

Javascript Clásico

Más contenido relacionado

Javascript Clásico