Curso jQuery: 5 Eventos y Funciones
Nueva noticia publicada en https://amdisenoweb.es/curso-jquery-5-eventos-funciones/
Curso jQuery: 5 Eventos y Funciones
Cuando el usuario interactua con el navegador o con una pagina web siempre se interactua mediante eventos, los mas conocidos son click, mouseover, foucs, blur, submit … Cuando el usuario pincha en alguna parte de la web esta ejecutando el evento on click, si se sitúa encima de un componente podría estar ejecutándose el evento on mouse over. Diagmos que todo lo que hacemos en entorno de windows se dispara o realiza mediante eventos.
Una definición para modificar un evento seria algo similar a:
$(document).ready(function() $('componente').evento(function(e) $('componenteQueCambia').efecto(); ); );
En lugar de evento pondríamos uno de los eventos que queremos utilizar click, bind, submit, focusin, focusout, por ejemplo si deseamos que al pinchar sobre un botón cambie algo lo haríamos como sigue.
<input type="buton" value="pinchame" class="pulsar"> ... <script type="text/javascript"> $(document).ready(function() $(".pulsar").click(function(e) alert("Has pulsado el boton"); ); ); </script>
Con este código lo que hacemos es que cuando pulsamos en el botón se visualiza un mensaje por pantalla, si retomamos el código del ejercicio de la entrada 4 podríamos codificarlo para que cuando pinchemos en un botón nos diga el nombre que hemos escrito.
Nombre :<input type="text" class="nombre"> <input type="buton" value="pinchame" class="pulsar"> <script type="text/javascript"> $(document).ready(function(e) $(".pulsar").click(function(e) var nombre; nombre=$(".nombre").val(); alert("Te llamas "+nombre); ); ); </script>
Con este código lo que haríamos seria que nos visualizara el contenido del input nombre cuando pulsamos en el botón, si por el contrario en lugar de visualizar un mensaje queremos que nos los visualice en un div lo haríamos como sigue:
Nombre :<input type="text" class="nombre"> <input type="buton" value="pinchame" class="pulsar"> <div class="resultado"></div> <script type="text/javascript"> $(document).ready(function(e) $(".pulsar").click(function(e) var nombre; nombre=$(".nombre").val(); $(".resultado").html("Te llamas "+nombre); ); ); </script>
Al igual que usamos el click en un botón podríamos usarlo sobre cualquier componente web, sobre un enlace, una imagen, un párrafo, etc.. Al hacerlo sobre un enlace hay que tener en cuenta que como es un enlace entonces intentara abrir la página del enlace, entonces o en el href le ponemos javascript:void(0); o en la función click ponemos e.preventDefault();
//forma 1 <a href="javascript:void(0)" class="pulsar">texto</a> <script type="text/javascript"> $(document).ready(function(e) $(".pulsar").click(function(e) //resto del codigo ); ); </script> ...... //forma 2 <a href="#" class="pulsar">texto</a> <script type="text/javascript"> $(document).ready(function(e) $(".pulsar").click(function(e) e.preventDefaul(); //resto del codigo ); ); </script>
Funciones
Las funciones es un bloque de código que se va a ejecutar repetidamente, se las puede o no pasar argumentos y pueden o no devolver un valor, para declarar una función en jQuery se puede hacer de dos forma:
function funci() //código de la función var funci=function() //código de la función
Si bien ambas formas son correctas la mas idónea es la segunda por razones técnicas. Para llamar a la función basta con poner el nombre de la función donde queramos.
Por ejemplo si queremos crear una función que sume dos números y nos devuelva la suma lo podríamos hacer así:
var suma=function(num1, num2) var resultado=num1+num2; return resultado; var resul=suma(4,5); //resul tomara el valor 9 que podremos visualizar con un alert o en un div //o hacer las operaciones pertinentes