Your SlideShare is downloading. ×
Javascript Clásico
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Javascript Clásico

2,692
views

Published on

Resumen sobre Javascript old-school... DOM, métodos y Cross-Browsing

Resumen sobre Javascript old-school... DOM, métodos y Cross-Browsing

Published in: Technology

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,692
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
126
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Javascript Clásico. Javascript Clásico Javier Infante <jabi@irontec.com> Donosti :: EHU / UPV ::16/10/2009
  • 2. Javascript Clásico. ● 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>
  • 3. Javascript Clásico. ● 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.
  • 4. Javascript Clásico. ● 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.
  • 5. Javascript Clásico. <html> <head> <title>Sample Document</title> </head> <body> <h1>An HTML Document</h2> <p>This is a <i>simple</i> document. </body> </html>
  • 6. Javascript Clásico.
  • 7. Javascript Clásico. ● 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”.
  • 8. Javascript Clásico. ● Propiedad nodeType – Elemento (1) ● <p>Hola</p> – Texto (3) ● <p>Hola</p> – Atributo (2) ● <p class=”estilo”>Hola</p>
  • 9. Javascript Clásico. ● 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”
  • 10. Javascript Clásico. ● 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”;
  • 11. Javascript Clásico. ● 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”;
  • 12. Javascript Clásico. ● 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.
  • 13. Javascript Clásico. ● 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);
  • 14. Javascript Clásico. ● 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.
  • 15. Javascript Clásico. ● 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
  • 16. Javascript Clásico. ● 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
  • 17. Javascript Clásico. – RATÓN ● click ● dblclick ● ouseover ● mousemove – INTERFAZ ● load / unload ● resize / scroll ● focus / blur – FORMULARIO ● submit / reset ● change / select
  • 18. Javascript Clásico. ● 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.
  • 19. Javascript Clásico. – Método propuesto por el W3C ● AddEventListener elemento.addEventListener('click',funcion,true); – Método propuesto por Microsoft ● AttachEvent elemento.attachEvent ('onclick',funcion);
  • 20. Javascript Clásico. ● 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.
  • 21. Javascript Clásico. ● 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);
  • 22. Javascript Clásico. ● 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);
  • 23. Javascript Clásico. ● 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!” />
  • 24. Javascript Clásico. ● 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)
  • 25. Javascript Clásico. ● 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!
  • 26. Javascript Clásico. ● Instanciando XMLHttpRequest – Nativamente: var oXML = new XMLHttpRequest(); – ActiveX var oXML = new ActiveXObject(“Microsoft.XMLHTTP”); – CrossBrowser if (window.XMLHttpRequest)    var oXML = new XMLHttpRequest(); else if (window.ActiveXObject)   var oXML = new ActiveXObject(“Microsoft.XMLHTTP”);
  • 27. Javascript Clásico. ● 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.
  • 28. Javascript Clásico. ● 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.
  • 29. Javascript Clásico. ● Ejemplo GET if (window.XMLHttpRequest)   var oXML = new 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("Content­Type","application/x­www­ form­urlencoded"); oXML.setRequestHeader("Content­Length",str.length); oXML.send(str);
  • 30. Javascript Clásico. 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).