Home Assistant Fácil

Curso de Home Assistant y domótica

Usted está aquí: Inicio / Tutoriales / Fragmentos / JavaScript / Eventos: JavaScript vs jQuery

Eventos: JavaScript vs jQuery

Luis del Valle Hernández

En este fragmento de código vamos a comparar JavaScript con jQuery. Vamos a ver como utilizar los mismos eventos para acceder al DOM y modificar el CSS con ambas tecnologías y así podremos asimilar mejor sus diferencias y comenzar a practicar con jQuery.

Comencemos pintando un botón en nuestro HTML y capturando el evento onClick de este con JavaScript:

<html>
<head>
	<title>Ejemplo onclick JavaScript</title>
	<script type="text/javascript" src="scriptJS.js"></script>
</head>
<body>
	<button id="boton" onclick="LanzaEvento()">Dale al botón</button>
</body>
</html>
 
//scriptJS.js
function LanzaEvento()
{
	alert("Hola has lanzado el evento onclick");
}

El ejemplo es muy simple, lo puedes ver y modificar aquí. En elemento con id=»boton» llamamos a la función LanzarEvento() con el evento onclick y la función muestra un pop-up con un mensaje.

Para realizar este código con jQuery lo realizaríamos así:

<html>
<head>
	<title>Ejemplo onclick jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="scriptjQuery.js"></script>
</head>
<body>
	<button id="boton">Dale al botón</button>
</body>
</html>
 
//scriptjQuery.js
$("#boton").click(function(){
    alert("Hola has lanzado el evento onclick");
});

Como veis en el HTML ademas de añadir la librería jQuery hemos eliminado el evento onclick del elemento button manteniendo el atributo id=»boton». El resto es igual de simple. En el JS con $(«#boton») obtenemos el nodo del elemento boton, le asociamos el evento onclick mediante la función click y una vez dentro de ella ejecutamos el mensaje por pop-up. Podéis verlo y modificarlo aquí.

Veamos otro ejemplo donde utilizaremos el evento onclick pero modificaremos el CSS cambiando el estilo a algún\os elementos de nuestra página.

En este caso, en nuestro HTML después del botón vamos a pintar un cuadrado azul con un borde naranja y cuando le demos al botón se intercambiaran los colores de este cuadrado:

<head>
	<title>Ejemplo onclick JavaScript</title>
	<style type="text/css">
		#Cuadrado{
			width: 100px;
			height: 100px;
			background: #2980b9; 
			border-color: #FF622C;
			border-style: solid;
			border-radius: 25px;
		}
	</style>
	<script type="text/javascript" src="scriptJS.js"></script>
</head>
<body>
	<button id="boton" onclick="LanzaEvento()">Cambia Color</button>
	<p>
	<div id="Cuadrado"></div>
</body>
</html>
 
//scriptJS.js
var inicio = true;

function LanzaEvento()
{
	if(inicio){
		document.getElementById("Cuadrado").style.backgroundColor="#2980b9";
		document.getElementById("Cuadrado").style.borderColor ="#FF622C";
		inicio = false;
	}
	else{
		document.getElementById("Cuadrado").style.backgroundColor="#FF622C";
		document.getElementById("Cuadrado").style.borderColor ="#2980b9";
		inicio = true;
	}
}

De la misma forma que el ejemplo anterior cuando damos al botón se lanza en evento onclick que llama a la función LazaEvento. En esta función utilizamos una variable boleana para controlar a que color se debe cambiar el cuadrado. Pero lo interesante viene en las dos lineas siguiente:

document.getElementById("Cuadrado").style.backgroundColor="#2980b9";
document.getElementById("Cuadrado").style.borderColor ="#FF622C";

Con el método getElementById obtenemos el nodo del cuadrado, con style accedemos a las propiedades del estilo y ya con backgroundColor y borderColor accedemos a la propiedad del color de fondo y color de borde respectivamente. Como veis le asignamos un valor, y en el esle del script el contrario. Os dejo el fragmento aquí.

Como alguno de vosotros ya se habrá dado cuenta no es necesario utilizar la variable boleana, ya que podríamos haber utilizado la siguiente linea en el if:

if(document.getElementById("Cuadrado").style.backgroundColor == 'rgb(41,128,185)')

El problema es que esto no se cumple en todos los navegadores. Unos nos devuelven el valor de la propiedad backgroudColor en hexadecimal y otros en rgb. Y como no es cuestión de este fragmento en entrar en dificultades, he optado por una simple variable boleana. Recordar que en programación hay múltiples formas de llegar al mismo resultado.

Veamos el mismo ejemplo en jQuery:

<html>
<head>
	<title>Ejemplo onclick jQuery</title>
	<style type="text/css">
		#Cuadrado{
			width: 100px;
			height: 100px;
			background: #2980b9; 
			border-color: #FF622C;
			border-style: solid;
			border-radius: 25px;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="scriptjQuery.js"></script>
</head>
<body>
	<button id="boton">Cambia Color</button>
	<p><div id="Cuadrado"></div>
</body>
</html>
 
var inicio = true;

$(document).ready(function() {

	$("#boton").click(function(){
		if(inicio){
			$("#Cuadrado").css({"background-color":"#FF622C", "border-color":"#2980b9"});
			inicio = false;
		}
		else{
			$("#Cuadrado").css({"background-color":"#2980b9", "border-color":"#FF622C"});
			inicio = true;
		}
	});
});

Mantenemos el manejador de eventos click para el elemento button de la misma forma que en el primer ejemplo de jQuery. Una vez dentro de esta función lo primero que vemos es la forma de obtener el nodo del cuadrado $(«#Cuadrado»):

document.getElementById("Cuadrado") //Obtenemos nodo Cuadrado en JavaScript 
$("#Cuadrado") //Obtenemos nodo Cuadrado en jQuery

Y mediante el método css actualizamos las propiedades que queramos del objeto a modificar:

$("#Cuadrado").css({"background-color":"#FF622C", "border-color":"#2980b9"});

Aquí podéis ver y modificar este código.

En el siguiente PodCast veremos las funciones propias de la libreria jQuery con las que podremos realizar efectos y crear animaciones y publicaremos más fragmentos de código para mostraros ejemplos.

Entradas relacionadas: