Bienvenidos sean a este post, hoy veremos un versus interesante.
Al momento de crearse y comenzar a implementarse jQuery teniamos un Javascript que era muy limitado en muchos aspectos, por ejemplo no tenia constantes 😶 y era mas una cuestion de honor, dado que se establecia como tal pero se podia modificar si no prestabamos atencion, y a su vez no tenia una forma simple de como manejar muchos de los elementos en nuestra paginas HTML, por lo tanto la implementacion de jQuery le dio un soplo de aire fresco y permitio que se pudieran hacer muchas mas cosas pero con la llegada de HTML5 y una colaboracion de Google para mejorar el engine de Javascript termino con un lenguaje mucho mas poderoso y con muchas de las capacidades que nos aportaba jQuery aunque si bien la libreria sigue pisando fuerte en Internet no lo hace como hace unos cuantos años atras, por esta razon hoy veremos como se parecen y se diferencian el lenguaje y la libreria, para ello vamos a crear un ejemplo y solo deben crear un archivo en su pc con el nombre de javas.html y le agregaremos el siguiente codigo:
javas.html
<html>
<head>
<title>Pagina de Javascript</title>
<style>
<!--
#foto
{
width: 720;
height: 405;
}
//-->
</style>
<script language="javascript">
<!--
function funcion()
{
var boton=document.getElementsByTagName("button");
boton[0].addEventListener("click", function()
{
document.getElementById("foto").style.visibility="hidden";
}, false);
}
//-->
</script>
</head>
<body onload="funcion()">
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0"><br><br>
<button>Pulsa para Accionar</button>
</body>
</html>Esta sera la primera version de nuestro codigo de ejemplo, en este caso nos enfocaremos en Javascript, este es el mismo codigo que vinimos utilizando en posts anteriores donde cargamos una imagen de internet y le establecemos un formato por medio del tag style, pero tenemos varias diferencias con respecto a lo visto anteriormente, veamos el primero de ellos:
<button>Pulsa para Accionar</button>En este caso agregamos un boton para activar nuestro codigo de Javascript, lo hacemos simple para poder trabajar de forma simple en nuestro codigo, pasemos a hablar sobre el tag script:
<script language="javascript">
<!--
function funcion()
{
var boton=document.getElementsByTagName("button");
boton[0].addEventListener("click", function()
{
document.getElementById("foto").style.visibility="hidden";
}, false);
}
//-->
</script>En este caso definimos una funcion donde por medio de getElementsByTagName establecemos un enlace de todos los botones que se encuentren en nuestra pagina, como tenemos uno solo sera este unicamente pero si existieran mas estaran enlazadas en esta variable, como este sera de tipo array para utilizarlo debemos usar la variable seguida de la posicion del array, en este usaremos la funcion addEventListener para «escuchar» un evento asignado, en este caso le pasamos el click, y dentro definiremos una funcion anonima donde por medio de getElementById buscaremos la imagen identificada como foto y estableceremos su visibilidad como escondida o hidden, es decir al momento de presionar el boton o hacer click se procede a esconder la imagen, por ultimo tenemos esta modificacion en el tag body:
<body onload="funcion()">Esto hara que al momento de cargar el contenido de este tag se llame a la funcion antes definida, esto permitira hacer todas las vinculaciones que mencionamos anteriormente, antes de probarlo podemos usar el siguiente codigo:
<html>
<head>
<title>Pagina de Javascript</title>
<style>
<!--
#foto
{
width: 720;
height: 405;
}
//-->
</style>
</head>
<body>
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0"><br><br>
<button>Pulsa para Accionar</button>
<script language="javascript">
<!--
var boton=document.getElementsByTagName("button");
boton[0].addEventListener("click", function()
{
document.getElementById("foto").style.visibility="hidden";
}, false);
//-->
</script>
</body>
</html>En este caso es algo que les comente en este post, el script tag por convencion se ubica dentro del tag head pero no es obligatorio, en este otro codigo lo ubicamos despues de cargado todos los elementos, esto nos elimino la necesidad de utilizar el evento onload y la funcion porque al tener todos los elementos cargados simplemente aplicamos el codigo y este los encontrara, el resto es todo lo que hablamos anteriormente, veamos como trabaja mediante el siguiente video
Ya tenemos una pagina que realiza una accion mediante Javascript, vamos a tomar este codigo y lo convertiremos en jQuery:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").hide();
});
});
</script>
<title>Pagina de Jquery</title>
<style>
<!--
#foto
{
width: 720;
height: 405;
}
//-->
</style>
</head>
<body>
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0"><br><br>
<button>Pulsa para Accionar</button>
</body>
</html>
Como dijimos en este caso implementamos a jQuery, primero importaremos la libreria despues tenemos un codigo similar al visto en el post anterior, pero observemos las simplificaciones con respecto a Javascript, primero por medio de ready analizaremos el documento o la pagina solo cuando este cargada y lista, el signo de dolar ($) es un comando selector, de esto hablaremos proximamente, pero en resumidas cuentas nos permite seleccionar lo que le informemos, en este caso lo usaremos para obtener los elementos de la pagina, como son unicos no tendremos inconvenientes pero si son varios se debera hacer de otra forma, en este caso primero lo relacionaremos al boton y la accion click sobre este y con esta accion le diremos que esconda a la imagen en la pagina, veamos como trabaja mediante el siguiente video
Como podemos ver logramos lo mismo tanto con Javascript como con jQuery pero en cierto punto con jQuery se nos facilito porque ya no dependemos de un evento como onload o ver donde ubicar nuestro codigo, de crear una funcion solo para eso y con solamente la funcion ready que al momento de estar cargada nuestra pagina asignara las acciones correspondientes a cada uno de ellos, pero no debemos olvidar que para jQuery debemos implementar si o si su libreria y Javascript ya viene embuido practicamente en todos los navegadores existentes sin necesidad de implementar nada simplemente usandolo, por esta razon siempre deben adecuarse a sus necesidades.
En resumen, hoy hemos visto como implementar acciones en una pagina primero por medio de Javascript y luego con jQuery, hemos analizado las diferencias entre cada una, tanto sus pros como sus contras, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 