Javascript nativo y jquery

Ivan Martil

Podríamos decir que jquery es “la librería” de javascript por excelencia. En los últimos años prácticamente todos los proyectos arrancaban con jquery en su entrañas. La compatibilidad entre navegadores, la facilidad de uso y la extensa comunidad de desarrolladores creando plugins le garantizaron el éxito.

Muchos no conocen javascript fuera de jquery. Las personas tendemos a intentar construir la casa siempre por el tejado. Sabemos que no es la manera, que primero son los cimientos, pero la ansia por llegar a la meta nos precipita hacia un fracaso inevitable. Mi tejado fue jquery.

Así es, en el intento de construir mi casa (aprender javascript) leí  algún manual de javascript y rápidamente me lancé con jquery. Es mucho más tentador. Desde el primer día empiezas a utilizar plugins de terceros,  no tienes ni idea de cómo hace lo que hace, pero lo hace y eso te vale. Pasas más tiempo configurando plugins que aprendiendo las bases del lenguaje. Esta forma de aprender en la web no es exclusiva de javascript. Con css pasa exactamente lo mismo. La gente se mete directamente en bootstrap ,foundation o cualquiera de las miles de librerías actuales sin tener claros ni tan solo los selectores o los modelos de caja. Somos así. Luego encontramos ciento de webs cargadas hasta reventar de plugins de jquery en , cómo no, un theme de bootstrap que tiene cientos de selectores que se superponen unos a otros o con la omnipresencia de div como la etiqueta universal.

Ya os digo, yo no soy diferente al resto. La mayoría tropezamos siempre en las mismas piedras. Pero llega un día que te das cuenta. Tienes un momento de lucidez entre tanto nuevo framework y decides dar un paso atrás, respirar y construir tus propios cimientos. En eso estamos hoy. Actualmente utilizo jquery para el menú responsive que aparece en esta web. Vamos a ver como hacer exactamente lo mismo en javascript nativo. Sin prisas, respirando primero y con tiempo de asimilar lo que haga falta. A nivel personal destaco dos puntos fuertes de jquery los selectores y los eventos. Veamos como javascript puede ayudarnos con eso.

Selectores

Una de las grandes ventajas de jquery es su simplicidad y la selección de elementos es un claro ejemplo. Si estás familiarizado con css ya sabes seleccionar elementos en jquery, así de simple. En Javascript teníamos getElementById, getElementsByClassName etc.. y no eran muy de mi agrado. Pero las cosas han cambiado bastante. Ahora tenemos de manera nativa dos métodos que aceptan cualquier tipo de selector css: querySelector() y querySelectorAll(). Si obviamos internet explorer 8 (y si no lo hacéis os compadezco ) disponemos de  dos métodos compatibles  con los principales navegadores.

querySelector()

Devuelve el primer elemento que coincide con el selector.

querySelectorAll()

Devuelve  un array con todos los elementos que coinciden con el selector.

Poco que comentar en querySelector() porque es así de simple. Si no conocemos los selectores css y estas leyendo esto. En serio,  aprende primero un mínimo de css. El problema viene en querySelectorAll(). Imaginad que tenemos un article con tres <p> en su interior.


<article>
  <p class="primeraP">Soy un párrafo</p>
  <p class="segundaP">Soy un párrafo</p>
  <p class="terceraP">Soy un párrafo</p>
</article>

Si queremos añadir un color de fondo a la primera <p> accederemos a ella utilizando el selector de clase o querySelector("article p");


/*selecciona el primer elemento dentro de article con la etiqueta p*/
//jquery
$("article p").first().css("background", "blue");
//jsnativo
document.querySelector("article p ").style.backgroundColor = "red"; 

Sin embargo si el objetivo fuera añadir el color de fondo a todos los párrafos dentro de article la cosa cambia. En jquery si eliminamos el método .first() estaremos añadiendo el fondo a todas los párrafos. Jquery recibe todas las etiquetas p seleccionadas y va añadiendo el css a cada una de ellas. Utilizando queryselectorAll() recibimos un array con todas las p. Pero debemos ser nosotros quienes controlemos que hacer con ellas. Podemos interactuar con ellas mediante su índice en el array o usar un bucle for para actuar sobre todas.


//añade el fondo a la primera p
document.querySelectorAll("article p ")[0].style.backgroundColor = "red"; 
//añade el fondo a la tercera p
document.querySelectorAll("article p ")[2].style.backgroundColor = "red"; 

// hacemos un bucle para añadir el fondo a cada una de las p
function fondo() {
 var elementsP= document.querySelectorAll("article p ");
  for (var i = 0; i<elementsP.length; i++) {
    elementsP[i].style.backgroundColor = "purple";
  }
}
fondo();

Eventos

Lejos de una explicación exacta podríamos decir que los eventos son las acciones que suceden en el navegador (presionar un botón, mover el ratón, tocar la pantalla…). En Jquery usamos el método .on() para asociar eventos con elementos del dom.


 $("article p").first().on('click',function(){
   alert('saludos');
 }); //Ejemplo en jquery

Con javascript nativo existen varias modos de hacerlo, pero el estándar html5 introduce el método addEventListener.


var p = document.querySelector("article p");
p.addEventListener('click', function(){
	alert('saludos fun');
}, false);

La sintaxi de addEventListener() la componen:

  • Nombre del evento
  • Función a ser ejecutada
    • En este caso es una función anónima pero podría ser el nombre de una función concreta.
  • Orden de propagación
    • Admite los valores true (fase de captura) o false (fase de burbuja).

Existen dos fases en la propagación de eventos, la fase de captura y la de burbuja.

La fase de captura se ejecuta antes del inicio del click y empieza en el nivel superior del árbol Dom. Recorre los elementos de padre a hijos.La fase de burbuja se ejecuta al finalizar el evento y funciona en el orden inverso, de hijos a padres.

Si nuestro booleano en addEventlistener es true el evento se ejecuta en la fase de captura mientras que false ejecuta el evento en la fase de burbuja.

Veamos el siguiente ejemplo:


//la p
var p = document.querySelector("article p ");
p.addEventListener('click', function(){
	alert('saludos desde p');
}, false);

//el article
var arti = document.querySelector("article");
arti.addEventListener('click', function(){
	alert('saludos desde article');
}, false);

Pasando el booleano false en ambos casos estamos lanzando el evento en la fase de burbujeo y como esta se ejecuta de hijos a padres el primer saludo que recibimos es el de p. Si cambiamos el booleano de article a true se ejecutará en la fase de captura y pasará a ser el primer saludo recibido. Si ambos eventos se ejecutan en la fase de captura (true/true) el primer saludo sería el de article porque en la fase de captura se lee de padres a hijos y article es el padre de p. Es algo confuso. En la práctica casi siempre usaremos el valor false, pero comprender el funcionamiento de nuestro propio código es algo fundamental.

Ahora ya sabemos cómo seleccionar elementos y lanzar eventos. En las próximas semanas iremos descubriendo nuevos elementos y avanzaremos en la práctica de crear el menú.

Comentarios 0

Nadie ha comentado nada aún. Te animas ha ser el primero!! ;)

Opina libremente

Tu dirección de correo electrónico no será publicada.Todos los campos son obligatorios.