jueves, 1 de agosto de 2019

Lanzar el script desde jQuery (1/2)

Esta entrada forma parte de una serie.
Habitualmente lo que interesa es ejecutar el código JavaScript después de que los elementos del DOM ya estén escritos en la página para luego poder interactuar con esas etiquetas, ids y clases desde el código JavaScript. Veamos posibles soluciones para conseguir esto.
  1. Poner el script justo antes de que se cierre el body. Antes del fin de etiqueta </body>. Esto no es muy aconsejable ya que lo indicado es que la llamada a los script se sitúen en el head.
  2. Usar document.onload tal y como se cuenta en la entrada: Comenzar la ejecución de un programa en Javascript al ir a una página
  3. Usar una función jQuery que llama al código JavaScript. Esta es la opción que vamos a tratar en este post.
Puede ver el código corriendo en:

HTML

Disponemos de una lista de frutas con tres clases.
  • <li class="rojas">
  • <li class="citricos">
  • <li class="cucurbitaceas">
  • <li class="dulces">
Llamamos en el head al código JavaScript usando un sistema propio de jQuery. Observe las dos líneas en el head. Primero llamamos al script js que contiene la versión 3.4.1 de jQuery. Seguidamente llamamos a nuestro script denominado dom5.js.


 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>lanzar el JS desde el head</title>  
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
   <script type="text/javascript" src="dom5.js"></script>  
  </head>  
  <body>  
   <h1>Frutas</h1>  
   <ul>  
    <li class="rojas">Cereza</li>  
    <li class="citricos">Mandarina</li>  
    <li class="rojas">Frambuesa</li>  
    <li class="cucurbitaceas">Sandia</li>  
    <li class="dulces">Uvas</li>  
    <li class="rojas">Fresa</li>  
    <li class="citricos">Naranja</li>  
    <li class="dulces">Higos</li>  
    <li class="citricos">Pomelo</li>  
    <li class="rojas">Moras</li>  
    <li class="dulces">Piña</li>  
    <li class="cucurbitaceas">Melón</li>  
   </ul>  
   </section>  
  </body>  
 </html>  

JavaScript


Usando jQuery lo que hacemos es envolver todo el código JavaScript dentro de una función del tipo:

 $(function() {   
   //código js  
 });  

En el código JS lo que hacemos es establecer el color del fondo según cada uno de los cuatro tipos de clases que hemos definido. Esto nos permite establecer cuatro formas diferentes de trabajar con clases, para ilustrar diferentes formas de trabajar con el DOM.

  1. trabajando con getElementsByClassName y for(..of..)
  2. trabajando con getElementsByClassName y for clásico
  3. trabajando con querySelectorAll y forEach con función anónima
  4. trabajando con querySelectorAll y forEach con función de flecha
Podemos consultar una página que nos habla de querySelectorAll:
 $(function() {  
   'use strict'  
    
   //trabajando con getElementsByClassName y FOR(OF)  
   var claseRojas = document.getElementsByClassName("rojas");  
   for(var roja of claseRojas){  
    roja.style.background="pink";  
   };  
    
   //trabajando con getElementsByClassName y FOR clásico  
   var claseDulces=document.getElementsByClassName('dulces');  
   for(var i=0;i<claseDulces.length;i++){  
     claseDulces[i].style.backgroundColor="#00FF00";//verde   
   };  
    
   //trabajando con querySelectorAll y una clase (ver el .)  
   var claseCitricos=document.querySelectorAll(".citricos");  
   claseCitricos.forEach(function(item,index){  
    item.style.background="cyan";  
    console.log(index+": "+item.textContent);  
   });  
    
   //trabajando con querySelectorAll y forEach con función de flecha  
   var claseCucur=document.querySelectorAll(".cucurbitaceas");  
   claseCucur.forEach(item => item.style.background="yellow");  
   
  });  

¿Qué método prefieres de los cuatro para trabajar con clases?

No hay comentarios:

Publicar un comentario