Snippets básicos de Vanilla JS

Estamos en la moda de los frameworks y plugins. Parece ser que sin estos elementos es imposible realizar cualquier acción con Javascript, como si no existiese el Javascript plano, el que hemos utilizado los dinosaurios en la programación como yo desde hace años. A raiz de todo esto nació el término Vanilla JS, que es como se conoce al lenguaje Javascript cuando no se utiliza ninguna librería ni ningún framework. Surgió como una mofa o burla de un sector de programadores frontend para igualarse a aquellos desarrolladores que endiosan los frameworks de Javascript y que no saben defenderse sin ellos. Con esto quieren hacer que notar que el Javascript de toda la vida es lo suficientemente potente para realizar las acciones que hacen las demás librerías y frameworks, es posible que con más esfuerzo, pero es capaz de hacerlo. Además el hecho de utilizar Javascript plano tiene múltiples ventajas, como la rentabilidad en términos de velocidad de ejecución.

Si te descargas el supuesto “framework” Vanilla JS desde su web oficial, te llevarás un buen chasco, ya que no contiene ningún código, solamente unas cabeceras que te indican que estás utilizando el framework “Vanilla”.

En esta ocasión, vamos a ver unas cuantas operaciones básicas que se suelen hacer mediante librerías o frameworks, pero traducidos a Vanilla JS. ¿Os apetece la idea? ¡Pues vamos a ello!

Iniciar Vanilla, el evento Document Ready

Ejecuta código después de que el navegador haya terminado de cargar todo el documento, incluyendo imágenes y báners de publicidad.

document.addEventListener('DOMContentLoaded', function() 
{
//JavaScript methods go here. 
});

Evento click

Contiene código Javascript plano. Aquí linkID es el ID del enlace, es decir, del elemento a. Puedes evitar su comportamiento por defecto llamando a e.preventDefault();

document.addEventListener('DOMContentLoaded', function()
{
//Click Event Code 
document.querySelector("#linkID").addEventListener("click", function(e)
{
alert("Click event triggered");
e.preventDefault();
});

});

//HTML Code
<a href="#" id="linkID">Click Event</a>

Ocultar y mostrar div

El divBlock desaparece lentamente cuando se hace click en hideLink.

document.querySelector("#hideLink").addEventListener("click", function()
{
document.getElementById('divBlock').style.display = 'none'
});

document.querySelector("#showLink").addEventListener("click", function()
{
document.getElementById('divBlock').style.display = ''
});

//HTML Code
<a href="#" id="hideLink">Hide</a> --- <a href="#" id="showLink">Show</a>
<div id="divBlock">

</div>

Añadir y eliminar clases

Vamos a ver cómo añadiríamos y eliminaríamos clases con Vanilla JS

Código CSS

Tendrás que incluir el siguiente código CSS dentro del tag head de tu página web

.hidden{display:none}

Usa el siguiente código dentro de la función HTMLElement.classList para permitir añadir i eliminar la calse de un elemento.

document.getElementById('divBlock').classList.add('hidden');

document.getElementById('divBlock').classList.remove('hidden');

//HTML Code
<a href="#" id="hideLink">Hide</a> --- <a href="#" id="showLink">Show</a>
<div id="divBlock">

</div>

Clase Toggle

Este método simplemente muestra y oculta a la vez cualquier elemento. Aquí, en este código le añadimos dicha clase y eliminamos la clase hidden.

document.querySelector("#toggle").addEventListener("click", function()
{
document.getElementById('divBlock').classList.toggle('hidden');
});
//HTML Code
<a href="#" id="hideLink">Toggle</a>
<div id="divBlock">

</div>

Mouse Over y Mouse Out

Cambia el comportamiento del div según el movimiento del ratón

Código HTML

<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="grid"></div>

Javascript

Aquí grid es la clase de los divs. Usando this haremos referencia al elemento DOM seleccionado.

//MouseOver
[].forEach.call(document.querySelectorAll(".grid"), function(el) {
el.addEventListener("mouseover", function() {
this.classList.add('hover');
});
});

//MouseOut
[].forEach.call(document.querySelectorAll(".grid"), function(el) {
el.addEventListener("mouseout", function() {
this.classList.remove('hover');
});
});

Código CSS

.grid
{
width:180px; height: 100px;
background-color:#333333;display: block;cursor:pointer;
float:left;margin-right: 10px
}
.hover
{
background-color: #cc0000 !important
}