De jQuery a javaScript: Tabla de traducción

Ahora mismo soy profesor en el IES Triana donde enseño “Lenguaje de Marcas” y “Gestión de Bases de Datos”. En la primera de las asignaturas básicamente hacemos un introducción al desarrollo web en cliente. Apenas son 128 horas en un año año y debemos cubrir muchas cosas así que centro mis zopciones en HTML,CSS, jQuery y JavaScript

El caso es que aunque jQuery está construido con javaScript yo explico y enseño a usar jQuery antes que javaScript. ¿Por qué?, básicamente por las siguientes razones:

  • Se pueden hacer muchas cosas utilizando jQuery y sin saber programar.
  • Los selectores jQuery y los selectores CSS son casi iguales y explico jQuery justo tras explicar CSS.
  • La síntaxis es más sencilla y corta lo cuál facilita mucho la cosa ya que los alumnos no tienen conocimientos previos de programación. Nadie entiende cómo un título de grado  superior en Informática, aunque sea de administración de sistemas, no tiene una asignatura específica de programación.

Ofrezco a los alumnos una plantilla con el jQuery ya instalado (de manera local) y ellos sólo tienen que, partiendo un un HTML y CSS dado añadir el código jQuery necesario para la funcionalidad solicitada aquí:

Tras acabar con jQuery realizando muchos ejercicios y efectos que puedes ver aquí, empiezo a profundizar en javaScript mostrando las equivalencias (aproximadas, tampoco puedo entrar en mucho detalles)  entre el jQuery que hemos visto y cómo sería el equivalente en javaScript. Si bien es cierto que antes dejo muy claro que los objetos jQuery lo que hacen es encapsular típicos objectos javaScript pero dotándolos de muchas más propiedades y funcionalidades. De momento ahí va una propuesta de tabla de traducción:

jQuery – JavaScript
$(“#someid”)
document.getElementById(“someid)
$(“.someclass”)
document.getElementByClassName(“someClass”)
$(” any selector”)
document.querySelectorAll(“any selector”)
$(“any selector”).eq(0)
document.querySelector(“any selector”)
$(“#someid”).val()
document.getElementById(“someid”).value
$(“#someid”).val(somevalue)
document.getElementById(“someid”).value= somevalue;
$(“#someid”).html()
document.getElementById(“someid”).innerHTML
$(“#someid”).html(“some text”)
document.getElementById(“someid”).innerHTML = “some text”
$(“#someid”).css()
document.getElementById(“someid”).style
$(“#someid”).css(“color”,”red”)
document.getElementById(“someid”).style.color=red
$(“#someid”).addClass(“className”)
document.getElementById(“someid”).classList.add(“className”)
$(“#someid”).removeClass(“className”)
document.getElementById(“someid”).classList.remove(“className”)
$(“#someid”).next()
document.getElementById(“someid”).nextElementSibling
$(“#someid”).append(“Some text”)
document.getElementById(“someid”).innerHTML= document.getElementById(“someid”).innerHTML+”Some Text”
$(“#someid”).prepend(“Some text”)
document.getElementById(“someid”).innerHTML= “Some Text” +document.getElementById(“someid”).innerHTML
$(“#someid”).click(function (event) {
//Things to do});function myFunction(event) {//Things to do}<xxx id=”someid” onclick=”myFunction(event)” >$(“#someid”).on(“eventName”, function(event) {

//Things to do

});

<xxx id=”someid” onXXXX=”myFunction(event)” >

No están todas las equivalencias pero es más que suficiente para empezar.

Para el tema de los eventos podemos ver aquí una lista de los eventos jQuery y aquí una lista de los posible eventos en javaScript

Fijaros que si los selectores nos devuelven varios elementos  (no sólo uno como estamos haciendo con $(“#someid”) tendremos que recorrer dicho vector. Si tomamos como ejemplo el caso de CSS sería algo así:

Para poder entender todo esto también es muy importante repasar los selectores. Eso lo podéis hacer aquí.

Un saludo y hasta el próximo post.