BIenvenidos sean a este post, hoy veremos un tema muy particular de las paginas.
Empecemos con lo mas basico, los eventos son todas las acciones en nuestra pagina, estas van desde la carga de la pagina hasta los clicks sobre elementos, asi como la carga de formularios, modificar el tamaño de la ventana, etc.
Los eventos se pueden manejar de varias formas, las principales son:
- html
- Javascript
- jQuery
En este post cuando hablamos de como trabajan tanto Javascript como jQuery, en el codigo HTML para el tag de body usamos el siguiente «escuchador» de evento:
<body onload="funcion()">En este usamos al evento load, el cual durante la carga del elemento asociado llama a la funcion de Javascript asociada, en este caso nos referimos al cuerpo de la pagina pero puede ser una imagen, boton o cualquier otra cosa, aunque esta no es la unica forma ya que podemos tambien hacerlo de la siguiente manera en el tag script:
window.onload=funcion();Donde el evento lo asignamos a la ventana en si, en este caso la funcion debe estar definida previamente, igual que en el caso anterior, esto es en su forma mas basica pero si vienen de los posts anteriores en jQuery estuvimos haciendo lo mismo:
$(document).ready(function() {...El metodo ready hace la misma accion porque al seleccionar el documento por medio del selector, el metodo ejecutara la funcion que le pasemos como argumento solo cuando la pagina este cargada sin importar donde declaramos nuestro codigo de jQuery, a diferencia de Javascript, si repasamos los ejemplos que hemos visto anteriormente en esta funcion siempre ejecutamos un conjunto de instrucciones para nuestra pagina, especialmente en los ultimos posts donde modificamos el contenido de la pagina, para entenderlo vamos a crear un nuevo ejemplo, en este caso lo primero que haremos es crear un directorio y ahi una serie de archivos, pasemos al primero como es el HTML, simplemente generen un archivo con el nombre de pagina.html y le agregaremos el siguiente codigo:
pagina.html
<html>
<head>
<title>Bloggeando un poco :D</title>
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script>
<script src="codigo.js"></script>
</head>
<body>
<p>Texto de Prueba</p>
<button>Pulsalo</button>
</body>
</html>
Aqui simplemente estableceremos un parrafo y un boton, los cuales no solo mostraremos sino que trabajaremos con ellos, tambien cargamos la libreria de jQuery y el archivo que sera el encargado de contener nuestro codigo de jQuery, nuestro siguiente paso sera crear un nuevo archivo en el mismo directorio con el nombre de codigo.js y le agregaremos el siguiente codigo:
codigo.js
$(document).ready(function(){
$('button').click(function(){
$('p').hide();
});
});Aqui manejaremos dos eventos, el primero sera ready, el cual comentamos anteriormente, despues seleccionaremos al boton para interceptar el evento click, por lo tanto cada vez que presionemos el boton ocultaremos el parrafo mediante la funcion hide, veamos como trabaja mediante el siguiente video
Si vienen de los posts anteriores no notaran nada raro con lo que vinimos haciendo hasta ahora, aunque vamos a hacer nuestra primera modificacion, tomemos el codigo de jQuery y cambiemoslo de la siguiente manera:
$(function(){
$('button').click(function(){
$('p').hide();
});
});Esta es una forma de abreviar el llamado al meteodo ready, porque de manera predeterminada el lenguaje al pasar el selector de esta forma nos estamos refiriendo a la pagina (document) y al metodo ready, si bien esto puede ser mas practico siempre es preferible saber que esta haciendo el codigo y es mas recomendable usar su version completa pero en codigos simples como los vistos en estos ejemplos tranquilamente podemos reemplazarlo porque no representa ningun problema de legibilidad.
Un ultimo tema que debemos tratar es sobre la libreria en si, porque como se daran cuenta podemos manejar mas de una libreria de Javascript para facilitar nuestro trabajo y esto puede ocasionar conflicto entre estas y jQuery, especialmente por el uso de $ dado que esta muy generalizado, por ello tomemos el contenido de head de pagina.html y cambiemoslo de la siguiente manera:
<head>
<title>Bloggeando un poco :D</title>
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script>
jQuery.noConflict();
</script>
<script src="codigo.js"></script>
</head>
Observen que simplemente agregamos un tag script con un llamado:
jQuery.noConflict();Para explicarlo de una forma simple, esta funcion nos libera a $ para que podamos usarlo con otras librerias pero ahora en lugar de usar $ debemos usar a jQuery, para entenderlo tomemos el codigo del archivo codigo.js y modifiquemoslo de la siguiente manera:
jQuery(document).ready(function(){
jQuery('button').click(function(){
jQuery('p').text("Este es otro texto");
});
});En este caso como liberamos al selector de siempre lo debimos reemplazar con jQuery para que siga redireccionando con la libreria correspondiente, despues el resto del codigo trabaja de forma similar pero ahora en lugar de ocultar el parrafo modificamos el texto que posee, veamos como trabaja ahora
Esta es una simple introduccion de los eventos, asi como una explicacion de los que estuvimos viendo hasta ahora, en los proximos posts ahondaremos mas sobre los eventos y jQQuery, por ultimo les dejo los archivos que utilizamos en este post:
En resumen, hoy hemos visto los eventos, los distintos interpretes que pueden manejarlos, una explicacion sobre ready, hemos visto un ejemplo donde pusimos en practica un par, tambien vimos como abreviarlos, asi como tambien liberar al selector y usarlo de otra forma, 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 