Clase 7: Martes 18 de Diciembre

JavaScript

Anteriormente se habló un poco de JavaScript, al igual que de CSS y HTML. En esta clase se verá más a fondo el tema de JavaScript

DOM(Document Object Model)

Una de las caracteristicas más interesantes de Javascript es la forma en que puede controlar los elementos de un HTML. Los elementos se almacenan de forma jerárquica por lo cual un nodo puede tener un nodo padre y n nodos hijos por ejemplo si se tiene el siguiente código HTML

HTML tiene dos nodos llamados HEAD Y BODY.

HEAD dos nodos llamados TITLE y SCRIPT...

LI tiene un padre llamado UL y este a su vez es hijo de BODY.

De esta forma se puede acceder a los elementos del html en javaScript

Un nodo se puede obtener utilizando el método getElementBy... de 3 formas diferentes

• getElementById: Se da como parámetro un id como por ejemplo "myH1"
• getElementsByClassName: Se da como parámetro una clase y retorna un array de elementos con esa clase ejemplo "ListElement"
• getElementByTagName: Se da como parámetro un tag y retorna un array de elementos con ese tag como por ejemplo "li"

Ahora se hará un pequeño ejemplo para mostrar el uso de los elementos en JavaScript.

El código anterior da como resultado la siguiente vista.

En esta se puede apreciar un h1, h2, 2 inputs, 3 li en un ul y 2 botones

Ejemplo 1

La idea es usando DOM poder hacer que al precionar el boton se los inputs intercambiar el texto del h1 y h2 por el de los inputs y viceversa. El siguiente código muestra como se hace. Recuerda revisar los ids de los elementos en el HTML anterior.

Como resultado al ingresar los datos HELLO WORLD en ambos inputs y presionando el botón da el siguiente resultado.

ejemplo 2

Este es un poco más complejo ya que se usan funciones como childNodes y parentNode para obtener los nodos padres y nodos hijos. lo recomendable es revisar el HTML y ver quien es padre de quien y quien es hijo de quien.

La idea de este ejemplo es al presionar uno de los números este será eliminado de la lista y al presionar el botón este agregará un nuevo número aumentando el de más abajo. O sea si se presiona el botón aparecerá el número 4 y  luego el 5...

El código se dividirá en dos, la función de eliminación

la función de inserción

Cabe destacar que se le añadió un adicional el cual hace que la lista cambie de color a la hora de agregar o eliminar un elemento.

Este es el resultado a la hora de eliminar el 2 y agregar un nuevo valor

JQuery

JQuery es una biblioteca adicional de JavaScript la cual se puede decir que se utiliza para facilitar la codificación. tiene ciertas características como que todos sus comandos deben iniciar con el signo de $.

document.getElementById("id").innerHTML se puede traducir a Jquery como  $("#id").html

document.getElementById("id").value se puede traducir a Jquery como  $("#id").val

    $('#boton').click(function(){
      //código
    });

Forma de asignar una función al darle click al elemento del id boton

$.ajax({



  url: "/api/getWeather",



  data: {



    zipcode: 97201



  },



  success: function( result ) {



    $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" );



  }



});

función de ajax para hacer consultas a una url, el resultado puede retornar un JSON o un XML como por ejemplo.