VAMOS A CREAR UN NUEVO EVENTO PARA JAVASCRIPTLos eventos son algo muy importante al momento de desarrollar nuestros proyectos en js y existen muchos y muy variados en sus propiedades como :
-mousemove
-mousedown
-mouseup
-click
-dblclick
bla bla bla.....
Pero que pasa cuando necesitamos un evento en especifico para nuestro proyecto
como :
pero que necesitamos desesperará mente en este tutorial te voy a enseñar a crear un evento en especifico que he bautizado como " TWOCLICKS " que considero no se denota como muy útil al inicio pero que a largo plazo vas a amar ["por que tu lo creaste " ] y por su practicad para el usuario1-DOCUMENTO HTML 5 "DE TODA LA VIDA "
Código HTML :
<!DOCTYPE html> <html> <lang ="es"></lang> <meta charset="utf-8"> <title > ¡NUEVO EVENTO JQUERY! </title> <head> <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <link[html][/html] rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <script src="main.js"></script> </body> </html>
NOTE que el documento js esta enlazado en el final de !body¡ para que no interfiera con el render de la pagina , también el importante recordar cargar el jquery y el css3 en el !head¡
Código HTML :
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> <link[html][/html] rel="stylesheet" type="text/css" href="estilo.css">
2-EN EL DOCUMENTO JAVASCRIPT
Código Javascript :
$(document).on('ready',function()
{
});
"NOTE que lo primero que hacemos es cargar a jquery"
3-CREAMOS 2 VARIABLES
Código Javascript :
$(document).on('ready',function()
{
var x = 0;
var y = 1;
});
NOTE. que el valor de las variables es distinto por el factor de 1 es decir que una es mayor que la otra por 1
4-LE ASIGNAMOS EL EVENTO CLICK A UN DIV
el evento click de toda la vida en jquery y tambien agregamos un incremento con el ++ a las dos varibles
Código Javascript :
$(document).on('ready',function()
{
var x = 0;
var y = 1;
$("div").click(function()
{
x++
y++
});
NOTE que como va incrementando cada vez que se le da click y pero la variable [b]"y" siempre va hacer mayor por el factor de 1 [/b].
5-EVALUAMOS LAS VARIABLES
condicionamos con un
Código Javascript :
ify declaramos que la variables "x" debe ser menor a la de "y"
y ponemos un
Código Javascript :
elsepara decir que en caso de que pase ejecute el codigo de el else
y almacenamos el valor de las variables en la consola con
Código Javascript :
console.log
Código Javascript :
$(document).on('ready',function()
{
var x = 0;
var y = 1;
$("div").click(function()
{
x++
y++
if( x < y)
{
console.log( x +" " +" es menor que " + y);
}
else
{
console.log(x +" " +" es mayor que " + y);
}
});
NOTE que como va incrementando cada vez que se le da click y pero la variable "y" siempre va hacer mayor por el factor de 1 y por eso el codigo del else nunca se va ha ejecutar.
6-OK OK OK ¡AQUI OCURRE LA MAGIA !
Declaramos un if dentro del primero condicional es decir el codigo que se va a ejecutar es otra evaluación o condición y lo que dice que si la variables (x) para que la examine sin ninguna condición entonces va decrementar el valor a la variable "y" con --
Código Javascript :
$(document).on('ready',function()
{
var x = 0;
var y = 1;
$("div").click(function()
{
x++
y++
if( x < y)
{
if(x)
{
--y
console.log( x +" " +" es igual a " + y);
}
}
else
{
console.log(x +" " +" es mayor que " + y);
}
});
RECUERDE que la variable "y" vale uno y lo que queremos hacer es que la condiciones alternen el valor de esta misma volviendo la falsa en un caso y verdadera en otro todo dentro del mismo evento "click"
7-¡ALTERNAR!
Ok ahora en como la condición ya no es verdadera va ha ejecutar el codigo de el else
y lo que hacemos nosotros en el else es hacer lo contrario de lo que hicimos en el if
y le devolvemos su atributo a la variable "y" entonces básicamente lo que haces es volverla verdadera entonces cuando el evento se vuelva a dispara x < y
Código Javascript :
$(document).on('ready',function()
{
var x = 0;
var y = 1;
$("div").click(function()
{
x++
y++
if( x < y)
{
if(x)
{
--y
console.log( x +" " +" es igual a " + y);
}
}
else
{
if(x)
{
y++
console.log(x +" " +" no es igual a " + y);
}
}
});
NOTE que de esa manera logramos que la variables "y" alterne entre verdadera y falsa cada vez que se le da click "es decir cuando se le de el primer click va hacerverdadera y cuando se le vualva a dar click sera falsa"
LISTO YA CREAMOS NUESTRO EVENTO
SOLO RECUERDA LA CLAVE ESTA EN HACER QUE LA VARIABLE ALTERNE
AQUI PUEDES VER http://www.youtube.com/watch?v=sr_RCfPk-dg&feature=youtu.be LA APLICACION EL EVENTO.
PRONTO SUBIRE OTRO TUTORIAL EXPLICANDO COMO HICE EL ESTILO DEL VIDEO Y EN MAS DETALLE TODO LO QUE PARARE EN EL VÍDEO.
SI TIENES DUDAS PONTE EN CONTACTO CONMIGO https://twitter.com/esnene02
Y EL CÓDIGO DE ESTE TUTORIAL ESTA MI CUENTA DE GITHUB https://github.com/Maxtermax/nuevo_evento
JUNTO CON OTRAS "COSILLAS INTERESANTES "
GRACIAS POR ESTAR HASTA EL FINAL Y SUS COMENTARIOS SON VALIOSOS PARA MI
. 
