Bienvenidos sean a este post, hoy continuaremos con los eventos.
En el post anterior vimos muy basicamente que es un evento, asi como algunos como el tema de cuando se carga un elemento o cuando hacemos click sobre uno de ellos, el hecho de trabajar con ellos se considera que se estan «manejando», es decir que ya hemos manejado dos eventos hasta ahora, pero tambien disponemos de algunos mas como los siguientes:
- onchange, cuando un elemento cambia de estado o de valor
- onsubmit, cuando confirmamos un formulario
- onresize, cuando cambiamos el tamaño de la ventana
- onmouseover, cuando el mouse pasa sobre un elemento
Y estos son solo algunos de los principales, existen muchisimos mas pero se deben ajustar de acuerdo a las necesidades del momento, para entender vamos a crear un nuevo ejemplo donde trabajaremos con varias cosas, para ello generen un nuevo directorio y en este almacenaremos los archivos, lo siguiente sera crear un archivo con el nombre de estilo.css y le agregaremos el siguiente codigo:
estilo.css
html, body {
margin:0;
padding:0;
}
body {
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#contenedor {
font-size: 1.2em;
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom:0;
}
h2 {
font-size: 1.3em;
margin-bottom:.5em;
}
h3 {
font-size: 1.1em;
margin-bottom:0;
}
.capitulo {
margin: 1em;
}
.cambiador {
float: right;
background-color:#ddd;
border: 1px solid #000;
margin: 10px;
padding: 10px;
font-size: .9em;
}
.cambiador h3 {
margin: .5em 0;
}
#encabezado {
clear: both;
}Este seran algunas de las clases que implementaremos en la pagina, por otro lado tambien tocamos algunas temas de diseño de la pagina en si, nuestro siguiente paso sera la creacion de la pagina en si, para ello en el mismo directorio deben crear un nuevo archivo con el nombre de libro.html y le agregaremos el siguiente codigo:
libro.html
<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="codigo.js"></script>
<title>La llamada de Cthulhu</title>
</head>
<body>
<div id="contenedor">
<div id="cambiador" class="cambiador">
<h3>Cambiador de estilo</h3>
<button id="el-default">
Default
</button>
<button id="el-chico">
Achicar
</button>
<button id="el-grande">
Agrandar
</button>
</div>
<div id="encabezado">
<h2>La llamada de Cthulhu</h2>
<div class="autor">H.P. Lovecraft</div>
</div>
<div class="capitulo" id="cap-prefacio">
<h3 class="capitulo-titulo">Prefacio</h3>
<p>Es imposible que tales potencias o seres hayan sobrevivido... hayan
sobrevivido a una época infinitamente remota donde... la conciencia se
manifestaba, quizá, bajo cuerpos y formas que ya hace tiempo se retiraron ante
la marea de la ascendiente humanidad... formas de las que sólo la poesía y la
leyenda han conservado un fugaz recuerdo con el nombre de dioses,
monstruos, seres míticos de toda clase y especie...</p>
<p class="autor">Algernoon Blackwood</p>
</div>
<div class="capitulo" id="cap-1">
<h3 class="capitulo-titulo">1. El bajorrelieve de arcilla</h3>
<p>No hay en el mundo fortuna mayor, creo, que la incapacidad de la mente
humana para relacionar entre sí todo lo que hay en ella. Vivimos en una isla de
plácida ignorancia, rodeados por los negros mares de lo infinito, y no es
nuestro destino emprender largos viajes. Las ciencias, que siguen sus caminos
propios, no han causado mucho daño hasta ahora; pero algún día la unión de
esos disociados conocimientos nos abrirá a la realidad, y a la endeble posición
que en ella ocupamos, perspectivas tan terribles que enloqueceremos ante la
revelación, o huiremos de esa funesta luz, refugiándonos en la seguridad y la
paz de una nueva edad de las tinieblas. Algunos teósofos han sospechado la
majestuosa grandeza del ciclo cósmico del que nuestro mundo y nuestra raza
no son más que fugaces incidentes. Han señalado extrañas supervivencias en
términos que nos helarían la sangre si no estuviesen disfrazados por un blando
optimismo. Pero no son ellos los que me han dado la fugaz visón de esos
dones prohibidos, que me estremecen cuando pienso en ellos, y me
enloquecen cuando sueño con ellos. Esa visión, como toda temible visión de la
verdad, surgió de una unión casual de elementos diversos; en este caso, el
artículo de un viejo periódico y las notas de un profesor ya fallecido. Espero
que ningún otro logre llevar a cabo esta unión; yo, por cierto, si vivo, no añadiré
voluntariamente un sólo eslabón a tan espantosa cadena. Creo, por otra parte,
que el profesor había decidido, también, no revelar lo que sabía, y que si no
hubiese muerto repentinamente, hubiera destruido sus notas. </p>
</div>
</div>
</body>
</html>
En realidad es mucho texto nomas pero es bastante simple, en el bloque correspondiente al head, tenemos el titulo (title), la linea link encargada de cargar el archivo .css que creamos anteriormente, luego tenemos la linea encargada de cargar desde internet la libreria de jQuery y por ultimo llamamos al archivo encargado de nuestro codigo de jQuery, por el momento no existe, y finalmente tenemos el body donde tendremos varios div para trabajar:
- contenedor, sera el que contendra todos los div restantes.
- cambiador, este contiene tres botones que en un momento usaremos con nuestro codigo de jQuery
- encabezado, simplemente es un encabezado con el titulo del libro y el autor
- cap-prefacio, contiene el prefacio del libro en cuestion
- cap-1, un extracto del primer capitulo del libro
En estos iremos trabajando con el pasar de este post, por el momento este es nuestro codigo base si cargan la pagina se vera de la siguiente manera
Con esto comentado podemos pasar a escribir nuestro codigo, pero antes debemos hacer una pequeña modificacion en nuestro archivo estilo.css y agreguemos el siguiente segmento de codigo:
.seleccionado {
font-weight: bold;
}
body.agrandar .capitulo {
font-size: 1.5em;
}
body.achicar .capitulo {
wide: 250px;
}Simplemente agregamos tres clases nuevas, la primera la usaremos para hacer el efecto de seleccionado y las otras dos las usaremos para hacer los efectos de agrandar y achicar con esto comentado lo siguiente sera pasar al codigo de jQuery y para ello primero crearemos un nuevo archivo en el mismo directorio que los anteriores llamado codigo.js y le agregaremos este primer codigo:
codigo.js
$(document).ready(function()
{
$('#el-chico')
.on('click', function() {
$('body').addClass('achicar');
$('body').removeClass('agrandar');
$('#cambiador button')
.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
});Aqui aplicamos el evento ready para cuando se cargue la pagina, dentro de esta seleccionaremos el boton que identificamos como «el-chico«, aqui aplicamos la funcion on la cual nos permite asignarle el evento que necesitemos, para este caso utilizamos a click para que trabaje cada vez que pulsemos este boton, observen que las primeras dos lineas dentro de la funcion asociada al evento sera seleccionar a body, en la primera aplicamos la clase achicar y en la segunda removemos la clase agrandar, esto es asi para cambiar el tamaño de como veremos la pagina, lo siguiente sera seleccionar a todos los botones dentro de la div cambiador (la cual contiene todos los botones) y removemos la clase seleccionado de todos ellos, para luego seleccionar el boton que estamos usando por medio de this y le aplicamos la clase seleccionado, si lo prueban ahora solamente achicara y seleccionara el boton presionado, tomemos el codigo anterior y modifiquemoslo de la siguiente manera:
$(document).ready(function()
{
$('#el-chico')
.on('click', function() {
$('body').addClass('achicar');
$('body').removeClass('agrandar');
$('#cambiador button')
.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
$('#el-grande')
.on('click', function() {
$('body').addClass('agrandar');
$('body').removeClass('achicar');
$('#cambiador button')
.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
});Este es exactamente igual al segmento anterior pero en esta oportunidad seleccionamos el boton identificado como «el-grande» pero aqui aplicaremos la clase agrandar y luego removemos la clase achicar en el body, es decir lo contrario que hicimos anterioremente para dar el efecto de agrandar la pagina, el resto hace exactamente lo mismo que antes, o sea ya tenemos como achicar y agrandar la pagina pero si queremos restaurarla, como hacemos? bueno para ello debemos modificar el codigo de la siguienta manera:
$(document).ready(function()
{
$('#el-chico')
.on('click', function() {
$('body').addClass('achicar');
$('body').removeClass('agrandar');
$('#cambiador button')
.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
$('#el-grande')
.on('click', function() {
$('body').addClass('agrandar');
$('body').removeClass('achicar');
$('#cambiador button')
.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
$('#el-default')
.addClass('seleccionado')
.on('click', function() {
$('body').removeClass('achicar');
$('body').removeClass('agrandar');
$('#cambiador button')
.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
});Aqui volvemos a repetir el procedimiento pero esta vez con el boton denominado como «el-default«, en este caso como va a ser el boton predeterminado lo primero que haremos sera aplicar la clase seleccionado, despues volvemos a hacer lo mismo que antes pero esta vez removeremos las dos clases y no aplicaremos ninguna y volvemos a hacer lo del seleccionado, con todo esto comentado veamos como trabaja la pagina mediante el siguiente video
Hasta aqui tenemos un codigo funcional? si pero repetimos mucho codigo sin necesidad, recuerden que en cualquier lenguaje de programacion lo ideal es tratar de resumirlo de la mejor manera posible, para ello vamos a tomar el codigo y lo modificaremos de la siguiente manera:
$(document).ready(function()
{
$('#el-default').addClass('seleccionado');
$('#cambiador button')
.on('click', function() {
$('body').removeClass();
$('#cambiador button')
.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
$('#el-grande')
.on('click', function() {
$('body').addClass('agrandar');
});
$('#el-chico')
.on('click', function() {
$('body').addClass('achicar');
});
});En este caso como sabemos que el boton el-default sera siempre seleccionado al inicio le asignamos esta clase, despues todas las acciones que haciamos en cada boton la resumimos en una sola, donde ante el evento click no removemos una sola clase sino todas las asignadas en body, despues removemos todas las clases de los botones y le aplicamos la clase al que apretamos, tal como haciamos en el codigo anterior, despues simplemente seleccionamos cada uno de los botones le asignamos el evento click y usamos las clases que corresponderia en body, si prueban la pagina deberia seguir funcionando como antes pero con un codigo mas simplificado y mejor estructurado en comparacion del anterior, por ultimo vamos a hacer un cambio mas y para ello volveremos al archivo estilo.css y agregaremos la siguiente clase:
.oculto {
display: none;
}Esta asignara el valor de none a un elemento y por lo tanto lo escondera, lo siguiente sera volver al archivo codigo.js, tomaremos el codigo anterior y lo modificaremos de la siguiente manera:
$(document).ready(function()
{
$('#el-default').addClass('seleccionado');
$('#cambiador button')
.on('click', function() {
$('body').removeClass();
$('#cambiador button')
.removeClass('seleccionado');
$(this).addClass('seleccionado');
});
$('#el-grande')
.on('click', function() {
$('body').addClass('agrandar');
});
$('#el-chico')
.on('click', function() {
$('body').addClass('achicar');
});
$('#cambiador h3')
.on('click', function() {
$('#cambiador button')
.toggleClass('oculto');
});
});Del codigo anterior no cambiamos nada, solamente agregamos un nuevo seleccionador donde le especificamos que seleccione al elemento h3 del div cambiador, le asignaremos el evento click y en ella seleccionaremos a todos los botones en este div y a traves de toggleClass aplicaremos y quitaremos la clase que agregamos anteriormente, veamos el siguiente video como funciona nuestra pagina ahora
Como pueden ver ahora no solamente afectamos la pagina sino tambien podemos dar la capacidad de mostrar u ocultar los botones que la afectan, esto es una forma muy simple de manejar eventos e inclusive podemos mejorarlo pero por el momento lo dejaremos aqui, antes de finalizar les dejo los archivos finales que vimos en este post:
En resumen, hoy hemos visto un poco mas profundamente como manejar eventos, hemos creado unos efectos bien simples pero efectivos, pero esto continuara aca no termina, espero les haya sido util 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 