SlideShare una empresa de Scribd logo
Javascript Clásico.

                                    Javascript Clásico




Javier Infante <jabi@irontec.com>

Donosti :: EHU / UPV ::16/10/2009
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>
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.
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.
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>
Javascript Clásico.
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”.
Javascript Clásico.


●   Propiedad nodeType

      –   Elemento (1)
           ●   <p>Hola</p>
      –   Texto (3)
           ●   <p>Hola</p>
      –   Atributo (2)
           ●   <p class=”estilo”>Hola</p>
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”
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”;
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”;
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.
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);
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.
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
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
Javascript Clásico.

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


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


–   FORMULARIO
     ●   submit / reset
     ●   change / select
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.
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);
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.
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);
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);
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!” />
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)
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!
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”);
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.
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.
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);
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).

Más contenido relacionado

La actualidad más candente

(Muy breve) Introduccion a jQuery
(Muy breve) Introduccion a jQuery(Muy breve) Introduccion a jQuery
(Muy breve) Introduccion a jQuery
Víctor Manuel Rivas Santos
 
Presentacion diseño web con jquery
Presentacion diseño web con jqueryPresentacion diseño web con jquery
Presentacion diseño web con jquery
Eutobar
 
Gwt III - Avanzado
Gwt III - AvanzadoGwt III - Avanzado
Gwt III - Avanzado
Manuel Carrasco Moñino
 
El Mal Odiado Javascript
El Mal Odiado JavascriptEl Mal Odiado Javascript
El Mal Odiado Javascript
El Jota
 
Todo lo que un desarrollador no puede desconocer de javascript tutorial j q...
Todo lo que un desarrollador no puede desconocer de javascript   tutorial j q...Todo lo que un desarrollador no puede desconocer de javascript   tutorial j q...
Todo lo que un desarrollador no puede desconocer de javascript tutorial j q...
Marcelino Ortiz
 
Taller de Jquery
Taller de JqueryTaller de Jquery
Taller de Jquery
Rebecca Casais
 
Fundamento de poo en php
Fundamento de poo en phpFundamento de poo en php
Fundamento de poo en php
Robert Moreira
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
David Arango
 
Creación de Builders y DSL's con Groovy
Creación de Builders y DSL's con GroovyCreación de Builders y DSL's con Groovy
Creación de Builders y DSL's con Groovy
Jose Juan R. Zuñiga
 
2/9 Curso JEE5, Soa, Web Services, ESB y XML
2/9 Curso JEE5, Soa, Web Services, ESB y XML2/9 Curso JEE5, Soa, Web Services, ESB y XML
2/9 Curso JEE5, Soa, Web Services, ESB y XML
Juan Carlos Rubio Pineda
 
Creación de archivos de clases en c#
Creación de archivos de clases en c#Creación de archivos de clases en c#
Creación de archivos de clases en c#
UVM
 
Guia jQuery INCES Militar - Kurt Gude
Guia jQuery INCES Militar - Kurt GudeGuia jQuery INCES Militar - Kurt Gude
Guia jQuery INCES Militar - Kurt Gude
José Ricardo Tillero Giménez
 
Java Script de canibaless
Java Script de canibalessJava Script de canibaless
Java Script de canibaless
briant pati
 
Todo Javascript para canibales
Todo Javascript para canibalesTodo Javascript para canibales
Todo Javascript para canibales
briant pati
 
Greach 2011 - Engrandeciendo Grails con Mongo DB
Greach 2011 - Engrandeciendo Grails con Mongo DBGreach 2011 - Engrandeciendo Grails con Mongo DB
Greach 2011 - Engrandeciendo Grails con Mongo DB
greach_es
 
dajaxproject.com
dajaxproject.comdajaxproject.com
dajaxproject.com
Jorge Bastida
 
Introduccion silverlight
Introduccion silverlightIntroduccion silverlight
Introduccion silverlight
Escuela Virtual de Caldas
 
Apuntes: los objetos del navegador de Javascript
Apuntes: los objetos del navegador de JavascriptApuntes: los objetos del navegador de Javascript
Apuntes: los objetos del navegador de Javascript
Francisco Javier Arce Anguiano
 
Object Oriented Javascript
Object Oriented JavascriptObject Oriented Javascript
Object Oriented Javascript
Gabriel Chertok
 

La actualidad más candente (19)

(Muy breve) Introduccion a jQuery
(Muy breve) Introduccion a jQuery(Muy breve) Introduccion a jQuery
(Muy breve) Introduccion a jQuery
 
Presentacion diseño web con jquery
Presentacion diseño web con jqueryPresentacion diseño web con jquery
Presentacion diseño web con jquery
 
Gwt III - Avanzado
Gwt III - AvanzadoGwt III - Avanzado
Gwt III - Avanzado
 
El Mal Odiado Javascript
El Mal Odiado JavascriptEl Mal Odiado Javascript
El Mal Odiado Javascript
 
Todo lo que un desarrollador no puede desconocer de javascript tutorial j q...
Todo lo que un desarrollador no puede desconocer de javascript   tutorial j q...Todo lo que un desarrollador no puede desconocer de javascript   tutorial j q...
Todo lo que un desarrollador no puede desconocer de javascript tutorial j q...
 
Taller de Jquery
Taller de JqueryTaller de Jquery
Taller de Jquery
 
Fundamento de poo en php
Fundamento de poo en phpFundamento de poo en php
Fundamento de poo en php
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
 
Creación de Builders y DSL's con Groovy
Creación de Builders y DSL's con GroovyCreación de Builders y DSL's con Groovy
Creación de Builders y DSL's con Groovy
 
2/9 Curso JEE5, Soa, Web Services, ESB y XML
2/9 Curso JEE5, Soa, Web Services, ESB y XML2/9 Curso JEE5, Soa, Web Services, ESB y XML
2/9 Curso JEE5, Soa, Web Services, ESB y XML
 
Creación de archivos de clases en c#
Creación de archivos de clases en c#Creación de archivos de clases en c#
Creación de archivos de clases en c#
 
Guia jQuery INCES Militar - Kurt Gude
Guia jQuery INCES Militar - Kurt GudeGuia jQuery INCES Militar - Kurt Gude
Guia jQuery INCES Militar - Kurt Gude
 
Java Script de canibaless
Java Script de canibalessJava Script de canibaless
Java Script de canibaless
 
Todo Javascript para canibales
Todo Javascript para canibalesTodo Javascript para canibales
Todo Javascript para canibales
 
Greach 2011 - Engrandeciendo Grails con Mongo DB
Greach 2011 - Engrandeciendo Grails con Mongo DBGreach 2011 - Engrandeciendo Grails con Mongo DB
Greach 2011 - Engrandeciendo Grails con Mongo DB
 
dajaxproject.com
dajaxproject.comdajaxproject.com
dajaxproject.com
 
Introduccion silverlight
Introduccion silverlightIntroduccion silverlight
Introduccion silverlight
 
Apuntes: los objetos del navegador de Javascript
Apuntes: los objetos del navegador de JavascriptApuntes: los objetos del navegador de Javascript
Apuntes: los objetos del navegador de Javascript
 
Object Oriented Javascript
Object Oriented JavascriptObject Oriented Javascript
Object Oriented Javascript
 

Destacado

Estrategias de desarrollo en sharepoint
Estrategias de desarrollo en sharepointEstrategias de desarrollo en sharepoint
Estrategias de desarrollo en sharepoint
Daniel Laco
 
Web 2.0 sus herramientas y marcadores sociales
Web 2.0 sus herramientas y marcadores socialesWeb 2.0 sus herramientas y marcadores sociales
Web 2.0 sus herramientas y marcadores sociales
Drylan Naranjo
 
Bootstrap
BootstrapBootstrap
Video en boostrap
Video en boostrapVideo en boostrap
Video en boostrap
Mynor Marroquin
 
Manual de php con ejercicios
Manual de php con ejerciciosManual de php con ejercicios
Manual de php con ejercicios
william kozisck
 
Sitio web (bootstrap 3)
Sitio web (bootstrap 3)Sitio web (bootstrap 3)
Sitio web (bootstrap 3)
Emerson Garay
 
Analisis y diseño de algoritmos
Analisis y diseño de algoritmosAnalisis y diseño de algoritmos
Analisis y diseño de algoritmos
Yulyana López
 
Fundamentos de programacion
Fundamentos de programacionFundamentos de programacion
Fundamentos de programacion
Vale
 
Java orientado a objetos
Java orientado a objetosJava orientado a objetos
Java orientado a objetos
Salvador Fernández Fernández
 
Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScript
Javier Vélez Reyes
 

Destacado (10)

Estrategias de desarrollo en sharepoint
Estrategias de desarrollo en sharepointEstrategias de desarrollo en sharepoint
Estrategias de desarrollo en sharepoint
 
Web 2.0 sus herramientas y marcadores sociales
Web 2.0 sus herramientas y marcadores socialesWeb 2.0 sus herramientas y marcadores sociales
Web 2.0 sus herramientas y marcadores sociales
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Video en boostrap
Video en boostrapVideo en boostrap
Video en boostrap
 
Manual de php con ejercicios
Manual de php con ejerciciosManual de php con ejercicios
Manual de php con ejercicios
 
Sitio web (bootstrap 3)
Sitio web (bootstrap 3)Sitio web (bootstrap 3)
Sitio web (bootstrap 3)
 
Analisis y diseño de algoritmos
Analisis y diseño de algoritmosAnalisis y diseño de algoritmos
Analisis y diseño de algoritmos
 
Fundamentos de programacion
Fundamentos de programacionFundamentos de programacion
Fundamentos de programacion
 
Java orientado a objetos
Java orientado a objetosJava orientado a objetos
Java orientado a objetos
 
Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScript
 

Similar a Javascript Clásico

Intro Jquery
Intro JqueryIntro Jquery
Intro Jquery
Eddy Ernesto Rios
 
Introduccion a j_query
Introduccion a j_queryIntroduccion a j_query
Introduccion a j_query
Canío CaminoSolo
 
Tutorial Java Script
Tutorial Java ScriptTutorial Java Script
Tutorial Java Script
semuvi
 
JQuery con ejemplos cortos
JQuery con ejemplos cortosJQuery con ejemplos cortos
JQuery con ejemplos cortos
José Ricardo Tillero Giménez
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery
Danae Aguilar Guzmán
 
6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)
Laura Folgado Galache
 
INFOSAN Objetos del navegador
INFOSAN Objetos del navegador INFOSAN Objetos del navegador
INFOSAN Objetos del navegador
FRANCIACOCO
 
Java script
Java scriptJava script
Java script
victdiazm
 
Introducción a JQuery
Introducción a JQueryIntroducción a JQuery
Introducción a JQuery
Continuum
 
Unidad 3 AJAX
Unidad 3 AJAX Unidad 3 AJAX
Unidad 3 AJAX
Iosdy Campos
 
Unidad3ajax
Unidad3ajaxUnidad3ajax
Unidad3ajax
Iosdy Campos
 
Jquery
JqueryJquery
Jquery
Oscar
 
Clase 8 Manipulación del DOM
Clase 8 Manipulación del DOMClase 8 Manipulación del DOM
Clase 8 Manipulación del DOM
José Ricardo Tillero Giménez
 
JQuery-Tema 1
JQuery-Tema 1JQuery-Tema 1
JQuery-Tema 1
Renny Batista
 
Jquery parte 1
Jquery parte 1Jquery parte 1
Jquery parte 1
Cesar Eduardo Suarez T
 
Guiajquery
GuiajqueryGuiajquery
Guiajquery
lissette_torrealba
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Irontec
 
Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6
Gabriela Bosetti
 
Js
JsJs
javascript.ppt
javascript.pptjavascript.ppt
javascript.ppt
PedroAlonzo20
 

Similar a Javascript Clásico (20)

Intro Jquery
Intro JqueryIntro Jquery
Intro Jquery
 
Introduccion a j_query
Introduccion a j_queryIntroduccion a j_query
Introduccion a j_query
 
Tutorial Java Script
Tutorial Java ScriptTutorial Java Script
Tutorial Java Script
 
JQuery con ejemplos cortos
JQuery con ejemplos cortosJQuery con ejemplos cortos
JQuery con ejemplos cortos
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery
 
6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)
 
INFOSAN Objetos del navegador
INFOSAN Objetos del navegador INFOSAN Objetos del navegador
INFOSAN Objetos del navegador
 
Java script
Java scriptJava script
Java script
 
Introducción a JQuery
Introducción a JQueryIntroducción a JQuery
Introducción a JQuery
 
Unidad 3 AJAX
Unidad 3 AJAX Unidad 3 AJAX
Unidad 3 AJAX
 
Unidad3ajax
Unidad3ajaxUnidad3ajax
Unidad3ajax
 
Jquery
JqueryJquery
Jquery
 
Clase 8 Manipulación del DOM
Clase 8 Manipulación del DOMClase 8 Manipulación del DOM
Clase 8 Manipulación del DOM
 
JQuery-Tema 1
JQuery-Tema 1JQuery-Tema 1
JQuery-Tema 1
 
Jquery parte 1
Jquery parte 1Jquery parte 1
Jquery parte 1
 
Guiajquery
GuiajqueryGuiajquery
Guiajquery
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
 
Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6
 
Js
JsJs
Js
 
javascript.ppt
javascript.pptjavascript.ppt
javascript.ppt
 

Más de Irontec

Gestion de proyectos con GitLab en tiempos de teletrabajo
Gestion de proyectos con GitLab en tiempos de teletrabajoGestion de proyectos con GitLab en tiempos de teletrabajo
Gestion de proyectos con GitLab en tiempos de teletrabajo
Irontec
 
Sobre cómo gestionamos centenares de despliegues de VoIP
Sobre cómo gestionamos centenares de despliegues de VoIPSobre cómo gestionamos centenares de despliegues de VoIP
Sobre cómo gestionamos centenares de despliegues de VoIP
Irontec
 
Presente y futuro del nuevo IVOZ Provider
Presente y futuro del nuevo IVOZ ProviderPresente y futuro del nuevo IVOZ Provider
Presente y futuro del nuevo IVOZ Provider
Irontec
 
Automated Testing para aplicaciones VoIP, WebRTC
Automated Testing para aplicaciones VoIP, WebRTCAutomated Testing para aplicaciones VoIP, WebRTC
Automated Testing para aplicaciones VoIP, WebRTC
Irontec
 
Asterisk: Liberando y generando modelos de negocio en gran cuenta y operador ...
Asterisk: Liberando y generando modelos de negocio en gran cuenta y operador ...Asterisk: Liberando y generando modelos de negocio en gran cuenta y operador ...
Asterisk: Liberando y generando modelos de negocio en gran cuenta y operador ...
Irontec
 
LA REVOLUCIÓN DEL CLOUD COMPUTING: NUEVA ERA DE DESARROLLO - OpenExpo17
LA REVOLUCIÓN DEL CLOUD COMPUTING: NUEVA ERA DE DESARROLLO - OpenExpo17LA REVOLUCIÓN DEL CLOUD COMPUTING: NUEVA ERA DE DESARROLLO - OpenExpo17
LA REVOLUCIÓN DEL CLOUD COMPUTING: NUEVA ERA DE DESARROLLO - OpenExpo17
Irontec
 
IVOZ Provider Open Source - La solución VoIP opensource para operadores e int...
IVOZ Provider Open Source - La solución VoIP opensource para operadores e int...IVOZ Provider Open Source - La solución VoIP opensource para operadores e int...
IVOZ Provider Open Source - La solución VoIP opensource para operadores e int...
Irontec
 
Escalabilidad “horizontal” en soluciones VoIP basadas en Asterisk / Kamailio
Escalabilidad “horizontal” en soluciones VoIP basadas en Asterisk / KamailioEscalabilidad “horizontal” en soluciones VoIP basadas en Asterisk / Kamailio
Escalabilidad “horizontal” en soluciones VoIP basadas en Asterisk / Kamailio
Irontec
 
VoIP2DAY 2015 - Workshop comercial ivoz provider
VoIP2DAY 2015 - Workshop comercial ivoz providerVoIP2DAY 2015 - Workshop comercial ivoz provider
VoIP2DAY 2015 - Workshop comercial ivoz provider
Irontec
 
Irontec - comunicaciones unificadas en educación - biopen eduka - software li...
Irontec - comunicaciones unificadas en educación - biopen eduka - software li...Irontec - comunicaciones unificadas en educación - biopen eduka - software li...
Irontec - comunicaciones unificadas en educación - biopen eduka - software li...
Irontec
 
Comparativa Firewall: IPCop vs. pfSense
Comparativa Firewall: IPCop vs. pfSenseComparativa Firewall: IPCop vs. pfSense
Comparativa Firewall: IPCop vs. pfSense
Irontec
 
Introducción a varnish cache (@irontec)
Introducción a varnish cache (@irontec)Introducción a varnish cache (@irontec)
Introducción a varnish cache (@irontec)
Irontec
 
Curso de introducción a Sphinx | Irontec
Curso de introducción a Sphinx | IrontecCurso de introducción a Sphinx | Irontec
Curso de introducción a Sphinx | Irontec
Irontec
 
Curso de VoIP / Parte 01: VoIP y Asterisk
Curso de VoIP / Parte 01: VoIP y AsteriskCurso de VoIP / Parte 01: VoIP y Asterisk
Curso de VoIP / Parte 01: VoIP y Asterisk
Irontec
 
Curso de VoIP / Parte 03: Dialplan
Curso de VoIP / Parte 03: DialplanCurso de VoIP / Parte 03: Dialplan
Curso de VoIP / Parte 03: Dialplan
Irontec
 
Curso de VoIP / Parte 02: SIP
Curso de VoIP / Parte 02: SIPCurso de VoIP / Parte 02: SIP
Curso de VoIP / Parte 02: SIP
Irontec
 
Curso de VoIP / Parte 04: Conceptos avanzados
Curso de VoIP / Parte 04: Conceptos avanzadosCurso de VoIP / Parte 04: Conceptos avanzados
Curso de VoIP / Parte 04: Conceptos avanzados
Irontec
 
Euskera zabaltzeko gure app berriak | Nuestras apps para difundir el euskera
Euskera zabaltzeko gure app berriak | Nuestras apps para difundir el euskeraEuskera zabaltzeko gure app berriak | Nuestras apps para difundir el euskera
Euskera zabaltzeko gure app berriak | Nuestras apps para difundir el euskera
Irontec
 
Virtualizacion KVM + libvirt + HREL6
Virtualizacion KVM + libvirt + HREL6Virtualizacion KVM + libvirt + HREL6
Virtualizacion KVM + libvirt + HREL6
Irontec
 
Irontec - Presentación de servicios de telefonía IP
Irontec - Presentación de servicios de telefonía IPIrontec - Presentación de servicios de telefonía IP
Irontec - Presentación de servicios de telefonía IP
Irontec
 

Más de Irontec (20)

Gestion de proyectos con GitLab en tiempos de teletrabajo
Gestion de proyectos con GitLab en tiempos de teletrabajoGestion de proyectos con GitLab en tiempos de teletrabajo
Gestion de proyectos con GitLab en tiempos de teletrabajo
 
Sobre cómo gestionamos centenares de despliegues de VoIP
Sobre cómo gestionamos centenares de despliegues de VoIPSobre cómo gestionamos centenares de despliegues de VoIP
Sobre cómo gestionamos centenares de despliegues de VoIP
 
Presente y futuro del nuevo IVOZ Provider
Presente y futuro del nuevo IVOZ ProviderPresente y futuro del nuevo IVOZ Provider
Presente y futuro del nuevo IVOZ Provider
 
Automated Testing para aplicaciones VoIP, WebRTC
Automated Testing para aplicaciones VoIP, WebRTCAutomated Testing para aplicaciones VoIP, WebRTC
Automated Testing para aplicaciones VoIP, WebRTC
 
Asterisk: Liberando y generando modelos de negocio en gran cuenta y operador ...
Asterisk: Liberando y generando modelos de negocio en gran cuenta y operador ...Asterisk: Liberando y generando modelos de negocio en gran cuenta y operador ...
Asterisk: Liberando y generando modelos de negocio en gran cuenta y operador ...
 
LA REVOLUCIÓN DEL CLOUD COMPUTING: NUEVA ERA DE DESARROLLO - OpenExpo17
LA REVOLUCIÓN DEL CLOUD COMPUTING: NUEVA ERA DE DESARROLLO - OpenExpo17LA REVOLUCIÓN DEL CLOUD COMPUTING: NUEVA ERA DE DESARROLLO - OpenExpo17
LA REVOLUCIÓN DEL CLOUD COMPUTING: NUEVA ERA DE DESARROLLO - OpenExpo17
 
IVOZ Provider Open Source - La solución VoIP opensource para operadores e int...
IVOZ Provider Open Source - La solución VoIP opensource para operadores e int...IVOZ Provider Open Source - La solución VoIP opensource para operadores e int...
IVOZ Provider Open Source - La solución VoIP opensource para operadores e int...
 
Escalabilidad “horizontal” en soluciones VoIP basadas en Asterisk / Kamailio
Escalabilidad “horizontal” en soluciones VoIP basadas en Asterisk / KamailioEscalabilidad “horizontal” en soluciones VoIP basadas en Asterisk / Kamailio
Escalabilidad “horizontal” en soluciones VoIP basadas en Asterisk / Kamailio
 
VoIP2DAY 2015 - Workshop comercial ivoz provider
VoIP2DAY 2015 - Workshop comercial ivoz providerVoIP2DAY 2015 - Workshop comercial ivoz provider
VoIP2DAY 2015 - Workshop comercial ivoz provider
 
Irontec - comunicaciones unificadas en educación - biopen eduka - software li...
Irontec - comunicaciones unificadas en educación - biopen eduka - software li...Irontec - comunicaciones unificadas en educación - biopen eduka - software li...
Irontec - comunicaciones unificadas en educación - biopen eduka - software li...
 
Comparativa Firewall: IPCop vs. pfSense
Comparativa Firewall: IPCop vs. pfSenseComparativa Firewall: IPCop vs. pfSense
Comparativa Firewall: IPCop vs. pfSense
 
Introducción a varnish cache (@irontec)
Introducción a varnish cache (@irontec)Introducción a varnish cache (@irontec)
Introducción a varnish cache (@irontec)
 
Curso de introducción a Sphinx | Irontec
Curso de introducción a Sphinx | IrontecCurso de introducción a Sphinx | Irontec
Curso de introducción a Sphinx | Irontec
 
Curso de VoIP / Parte 01: VoIP y Asterisk
Curso de VoIP / Parte 01: VoIP y AsteriskCurso de VoIP / Parte 01: VoIP y Asterisk
Curso de VoIP / Parte 01: VoIP y Asterisk
 
Curso de VoIP / Parte 03: Dialplan
Curso de VoIP / Parte 03: DialplanCurso de VoIP / Parte 03: Dialplan
Curso de VoIP / Parte 03: Dialplan
 
Curso de VoIP / Parte 02: SIP
Curso de VoIP / Parte 02: SIPCurso de VoIP / Parte 02: SIP
Curso de VoIP / Parte 02: SIP
 
Curso de VoIP / Parte 04: Conceptos avanzados
Curso de VoIP / Parte 04: Conceptos avanzadosCurso de VoIP / Parte 04: Conceptos avanzados
Curso de VoIP / Parte 04: Conceptos avanzados
 
Euskera zabaltzeko gure app berriak | Nuestras apps para difundir el euskera
Euskera zabaltzeko gure app berriak | Nuestras apps para difundir el euskeraEuskera zabaltzeko gure app berriak | Nuestras apps para difundir el euskera
Euskera zabaltzeko gure app berriak | Nuestras apps para difundir el euskera
 
Virtualizacion KVM + libvirt + HREL6
Virtualizacion KVM + libvirt + HREL6Virtualizacion KVM + libvirt + HREL6
Virtualizacion KVM + libvirt + HREL6
 
Irontec - Presentación de servicios de telefonía IP
Irontec - Presentación de servicios de telefonía IPIrontec - Presentación de servicios de telefonía IP
Irontec - Presentación de servicios de telefonía IP
 

Último

SISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsxSISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsx
tamarita881
 
modelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptxmodelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptx
evelinglilibethpeafi
 
Presentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The CleanPresentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The Clean
juanchogame18
 
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB  S2. PARA VSATMANUAL DEL DECODIFICADOR DVB  S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
Ing. Julio Iván Mera Casas
 
computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
YaniEscobar2
 
Manual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputoManual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputo
doctorsoluciones34
 
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdfProjecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Festibity
 
Estructuras básicas_ conceptos de programación (1).docx
Estructuras básicas_ conceptos de programación  (1).docxEstructuras básicas_ conceptos de programación  (1).docx
Estructuras básicas_ conceptos de programación (1).docx
SamuelRamirez83524
 
absorcion de gases y practicas de laboratorios
absorcion de gases y practicas de laboratoriosabsorcion de gases y practicas de laboratorios
absorcion de gases y practicas de laboratorios
JuanAlvarez413513
 
COMPARATIVO DE SUBESTACIONES AIS VS GIS.
COMPARATIVO DE SUBESTACIONES AIS VS GIS.COMPARATIVO DE SUBESTACIONES AIS VS GIS.
COMPARATIVO DE SUBESTACIONES AIS VS GIS.
SERVANDOBADILLOPOLEN
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
ValeriaAyala48
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
JimmyTejadaSalizar
 
Desarrollo de habilidades de pensamiento.docx
Desarrollo de habilidades de pensamiento.docxDesarrollo de habilidades de pensamiento.docx
Desarrollo de habilidades de pensamiento.docx
ortizjuanjose591
 
Refrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y ForzadoRefrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y Forzado
NicandroMartinez2
 
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
bendezuperezjimena
 
Projecte Iniciativa TIC 2024 HPE. inCV.pdf
Projecte Iniciativa TIC 2024 HPE. inCV.pdfProjecte Iniciativa TIC 2024 HPE. inCV.pdf
Projecte Iniciativa TIC 2024 HPE. inCV.pdf
Festibity
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
sofiahuarancabellido
 
actividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañerosactividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañeros
aljitagallego
 
Sitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajasSitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajas
paulroyal74
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
ItsSofi
 

Último (20)

SISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsxSISTESIS RETO4 Grupo4 co-creadores .ppsx
SISTESIS RETO4 Grupo4 co-creadores .ppsx
 
modelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptxmodelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptx
 
Presentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The CleanPresentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The Clean
 
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB  S2. PARA VSATMANUAL DEL DECODIFICADOR DVB  S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
 
computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
 
Manual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputoManual de soporte y mantenimiento de equipo de cómputo
Manual de soporte y mantenimiento de equipo de cómputo
 
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdfProjecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
 
Estructuras básicas_ conceptos de programación (1).docx
Estructuras básicas_ conceptos de programación  (1).docxEstructuras básicas_ conceptos de programación  (1).docx
Estructuras básicas_ conceptos de programación (1).docx
 
absorcion de gases y practicas de laboratorios
absorcion de gases y practicas de laboratoriosabsorcion de gases y practicas de laboratorios
absorcion de gases y practicas de laboratorios
 
COMPARATIVO DE SUBESTACIONES AIS VS GIS.
COMPARATIVO DE SUBESTACIONES AIS VS GIS.COMPARATIVO DE SUBESTACIONES AIS VS GIS.
COMPARATIVO DE SUBESTACIONES AIS VS GIS.
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
 
Desarrollo de habilidades de pensamiento.docx
Desarrollo de habilidades de pensamiento.docxDesarrollo de habilidades de pensamiento.docx
Desarrollo de habilidades de pensamiento.docx
 
Refrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y ForzadoRefrigeradores Samsung Modo Test y Forzado
Refrigeradores Samsung Modo Test y Forzado
 
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
 
Projecte Iniciativa TIC 2024 HPE. inCV.pdf
Projecte Iniciativa TIC 2024 HPE. inCV.pdfProjecte Iniciativa TIC 2024 HPE. inCV.pdf
Projecte Iniciativa TIC 2024 HPE. inCV.pdf
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
 
actividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañerosactividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañeros
 
Sitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajasSitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajas
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
 

Javascript Clásico

  • 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>
  • 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).