Introduccion a Jquery
Para poder entender Jquery deberias ya de tener antes algun conocimiento solido de Javascript, Javascript es el primero en agregar contenido dinamico a una pagina web, con la diferencia de que PHP es del lado del servidor y Javascript del lado del cliente (Javascript ha comenzado a ser usado del lado del servidor pero todavia le falta mas). PHP precisamente por que es del lado del servidor no conoce del navegador y es posible que por ello algunos script arrojen diferentes resultados en diferentes navegadores. Por el contrario el codigo javascript puede ser personalizado para la variacion de navegadores. Superar este obstaculo es una de las varias fuerzas de jquery (www.jquery.com).Jquery es un framework de javascript, este framework solo es una libreria de codigo que simplifica y hace mas rapido el trabajo en javascript. El nucle de jquery es capaz de manejar todas las funcionalidades claves de javascript. El framework puede extenderse via plugins agregando otras caracteristicas tal como crear una tabla dinamica y ordenarla. Jquery tambien contiene una interface que te puede ser de mucha ayuda (www.jqueryui.com).
Hay muchos frameworks javascript fuera de este, esto no quiere decir que jquery sea el mejor. Sin embargo es facil de aprender y ademas puedes manejar el DOM (Document Object Model) a tu antojo. El dom es para referirse a los elementos de la pagina, ya sea guardar valores de algun formulario, agregar o quitar cualquier elemento HTML, cambiar las propiedades de tales, y demas.
Antes de comenzar a utilizar Jquery debes comprender que Jquery es un framework de javascript, significa que lo siguiente que veremos sera un poco de Javascript, javascript es un poco similar a php de alguna forma y de otra forma no tal como las variables son creadas, la concatenacion y demas.
Un ejemplo de Javascript del lado del servidor es NodeJs (www.nodejs.com).
Una manera de saber si tenemos errores en Jquery es ver con el inspeccionador de elementos y en consola puedes ver que errores puede tener, chrome y firefox traen inspeccionador de elementos por defecto...
Incorporando Jquery
Jquery es un framework de codigo, atraves, en orden para usarlo, a una pagina web se le debe incorporar la libreria jquery.Para incluir cualquier archivo externo en javascript en la pagina web implica la etiqueta script de HTML,proporcionando el nombre al archivo externo como valor del atributo src.
<script src="archivo.js" type="text/javascript" charset="utf-8"></script>
El archivo jquery deberia ser nombrado de esta forma: jquery.x-y-x.js donde xyz es el numero de version. La parte min del nombre del archivo indica que el archivo javascript ha sido minificado. La minificacion es remover espacios, nuevas lineas, y comentarios desde el codigo, el resultado es apenas legible, pero es completamente funcional. El beneficio de minificar el codigo es que el archivo carga mas rapido en el navegador por que tiene menos peso.
Los pasos a seguir para incorporar jquery al navegador son los siguientes:
1.- nos dirigimos a www.jquery.com
2.- damos clic en download jquery y elegimos la ultima version en produccion
3.- guardamos el archivo en nuestra computadora
4.- movemos el archivo jquery a el directorio web y lo colocamos dentro de una carpeta donde se encuentren todos nuestros archivos javascript, normalmente yo creo una llamada js
5.- creamos una estructura HTML y en el head incluimos nuestro archivo jquery (prueba.html):
<!DOCTYPE html> <html> <head> <title>Jquery</title> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> </head> <body> </body> </html>
Muchas veces utilizamos jQuery de manera continua en nuestra pagina web, si estamos utilizando un hosting gratis esto generara muchas peticiones a ese mismo archivo, lo mejor es que lo hagas desde un archivo externo, algunas paginas como son Google o Microsoft tienen sus CDN (red de entrega de contenidos) de manera que podemos usar sus enlaces gastando menos ancho de banda en nuestro servidor, un ejemplo utilizando google CDN, seria de la siguiente manera:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Usando Jquery
Una vez que ya has incorporado correctamente jquery en tu pagina web, tu puedes comenzar a usarlo. Jquery, o cualquier codigo javascript, puede ser escrito en medio de las etiquetas abrir y cerrar de script.<script type="text/javascript">//el codigo va aqui</script>
(Nota que en javascript la doble barra crea un comentario al igual que en PHP).
Alternativamente tu puedes incluir un archivo externo utilizando codigo jquery y la liberia jquery arriba de el llamado, puedes incluir multiples archivos externos y el navegador los leera siempre que esten en la etiqueta script.
Un problema que no encontramos es que si llamamos al DOM desde el archivo que contenga jquery analizara primero el archivo jquery que esta dentro de la etiqueta script que antes de haber cargado el DOM, para ello debemos estar seguros de que la pagina ha sido cargada y podemos utilizar el siguiente codigo javascript:
window.Onload o simplemente utilizando jquery:
$(document).ready(alguna_funcion);
La sintaxis de jquery puede parecer extraña para los iniciados es por eso que vamos a explicar el codigo:
$(document), con $ hacemos referencia a una parte del documento en este caso document que hace referencia a todo el documento de la pagina web.
Con ready(), vemos si el documento esta listo y si es asi ejecutamos alguna_funcion().
Una alternativa para esta sintaxis es utilizar una funcion anonima sin definir el nombre de tal (en PHP tambien es posible pero no es muy comun utilizarla), para utilizar una funcion anonima es de la siguiente manera:
$(document).ready(function(){ // codigo a ejecutar });
Ya que se necesita mucho este tipo de funcion en jquery, para verificar si el dom esta cargado, sea ha creado una sintaxis mas corta de manera de no alargar tanto el codigo fuente:
$(function(){});
Para probar jquery vamos a crear una simple alerta cuando el documento haya sido cargado mostraremos la alerta.
1.- creamos un archivo llamado prueba.js
2.- creamos la alerta, con el siguiente codigo:
$(function(){
alert('Listo!')
});
la funcion alert() muestra una caja con nuestro mensaje como argumento.
3.- guardamos el archivo .js en nuestra carpeta js en el directorio web
4.- abrimos el archivo con el codigo prueba.html haciendo referencia a el:
Notas:
El codigo $() es una abreviatura para llamar a la funcion jQuery()
Seleccionando elementos de la pagina
Una vez que sabe la funcionalidad basica de jQuery, el siguiente paso a aprender es como seleccionar los elementos de la pagina. Al ser capaz de hacerlo le permitira ocultar y mostrar imagenes o bloques de texto, manipular formularios y mas. Ya has visto como seleccionar el documento web de la pagina: $(document). Para seleccionar otros elementos de la pagina, podemos usar selectores CSS en lugar de document.* #algo selecciona el elemento con un id de valor de algo
* .algo selecciona cada elemento con una valor de clase de algo
* algo selecciona todos los elementos de algo escrito (por ejemplo: p selecciona todos los parrafos)
Estas tres reglas son mas que suficientes para comenzar pero a diferencia de el document estas deben ir colocadas entre comillas.
Por ejemplo, el codigo $('a') selecciona cada enlace de la pagina, y $('#caption') selecciona cada elemento con el id caption, para hacer referencia a elementos individuales en la pagina #algo es la solucion mas facil.
Estas reglas pueden ser combiandas tambien:
* $('img.paisaje') selecciona cada imagen con la clase paisaje
* $(#registrar input) selecciona cada elemento input que encuentre con el id registrar
Manejo de eventos
Javascript al igual que PHP se utiliza a menudo para responder a eventos, en terminos de javascript los eventos son las acciones del usuario dentro del navegador web, como por ejemplo:* al mover el cursor sobre una imagen o parte del texto
* hacer clic en un enlace
* cambiar el valor de un elemento del formulario
* el envio de un formulario
Para controlar los eventos en javascript, debemos aplicar un detector de eventos (event listener) tambien llamado manejador de eventos a un elemento, es decir, cuando sucede un evento en el elemento B llamar a la funcion C. En jQuery los detectores de eventos son asignados utilizando la siguiente sintaxis:
seleccion.Tipodeevento(function)
La parte seleccion seria como $('.algo') o $('a') o lo que sea, elemento o elementos a los que el controlador de eventos debe aplicarse. El valor Tipodeevento sera diferente a la base seleccion. Los valores comunes son change, mouseover, click, submit, y seleccionar diferentes eventos que pueden ser activados por diferentes elementos del HTML. Comunmente la funcion es llamada en una sola linea anonimamente. Por ejemplo para manejar el evento de una imagen donde pasan el cursor sobre ella:
$('img').mouseover(function(){ // hacer algo })
Con el fin de hacer una calculadora de IVA necesitamos saber una cosa mas, en busca de los valores introducidos en los inputs requerimos la funcion val(). Que devuelve el valor de la seleccion.
calc.html
<!DOCTYPE html> <html> <head> <title>Calculador IVA</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="js/calculador.js"></script> </head> <body> <form action="" method="post" id="calculator"> <p>Precio: <input type="text" name="precio" id="precio"></p> <p><input type="submit"></p> </form> </body> </html>
calculador.js
// si el documento esta listo
$(function(){
// si se envio el formulario
$('#calculator').submit(function(){
precio = $('#precio').val();
resultado = precio * 0.16;
alert(resultado);
return false;
}) // fin del envio del formulario
}) // fin de la lectura del documento web
Lo unico que hacemos es enviar un precio y nos saca el iva que es el 16% del precio real, en este caso enviamos el precio y no los muestra en una ventana de alerta, al final retornamos falso para que el formulario no sea enviado.
Manipulacion del DOM
Uno de los usos mas criticos de javascript, y en jQuery en particular es la manipulacion del DOM, cambiar de cualquier manera el contenido del navegador web. Normalmente la manipulacion del DOM se manifiesta por alterar lo que el usuario ve, la facilidad con la que jQuery puede hacer esto es una de sus fortalezas.Una vez que haya seleccionado el elemento o elementos para ser manipulados, para comenzar la funcion hide() y show(), ocultar y mostrar, nos sirven por ejemplo si tenemos un formulario el cual queremos ocultar cuando la informacion haya sido enviada, se podria hacer de la siguiente manera:
$('#FormularioÁctual').hide();
La funcion toggle(), cuando es llamada alterna entre mostrar y ocultar, si el elemento esta visible lo oculta y si esta oculto lo hace visible.
Similar a show() y hide() estan las funciones fadeIn() fadeOut(). Estas funciones tambien muestran y ocultan la seleccion solo que con un poco de efecto dentro.
Otra forma de impactar el DOM es cambiar las clases CSS que se aplican a una seleccion. La funcion addClass() aplica una clase CSS y removeClass() quita una clase. El codigo siguiente agrega una clase de enfasis a un bloque individual y la elimina de todos los parrafos:
$('#bloqueID').addClass('enfasis');
$('p').removeClass('enfasis');
La funcion toggleClass() alterna la aplicacion de CSS para una clase en la seleccion.
Las funciones mencionadas anteriormente cambian las propiedades de los elementos de la pagina, pero tambien se puede cambiar el contenido de los elementos. Anteriormente utilizamos val() que devuelve el valor de un elemento de formulario, pero cuando se le proporciona un argumento val() asigna un nuevo valor al elemento del formulario:
$('#algo').val('gato');
Del mismo modo la funcion html() devuelve el contenido html de un elemento y text() devuelve el contenido textual ambas funciones pueden tomar argumentos para asignar nuevo html o texto, en consecuencia.
Veamos un ejemplo del calculador del IVA agregando algunas clases y estilos:
calc.html
<!DOCTYPE html>
<html>
<head>
<title>Calculador IVA</title>
<style type="text/css">
.error{
text-align: center;
width: 250px;
height: 50px;
background-color: yellow;
border-style: solid;
border-color:black;
font-family: arial;
font-weight: bold;
font-size: 17px;
color: red;
}
.correcto{
text-align: center;
width: 250px;
height: 50px;
background-color: yellow;
border-style: solid;
border-color:black;
font-family: arial;
font-weight: bold;
font-size: 17px;
color: green;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/calculador.js"></script>
</head>
<body>
<form action="" method="post" id="calculator">
<p id="result"></p>
<p>Precio: <input type="text" name="precio" id="precio"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
calculator.js
// si el documento esta listo
$(function(){
$('#result').hide();
// si se envio el formulario
$('#calculator').submit(function(){
if ($('#precio').val() >= 100) {
precio = $('#precio').val();
resultado = precio * 0.16;
$('#result').show();
$('#result').removeClass('error');
$('#result').addClass('correcto').text(resultado);
}else{
$('#result').show();
$('#result').removeClass('correcto');
$('#result').addClass('error').text('El precio debe ser igual o mayor a $100');
}
return false;
}) // fin del envio del formulario
}) // fin de la lectura del documento web
Algunas notas importantes:
jQuery no genera un error si trata de seleccionar elementos de la pagina que no existen, tampoco si llama una funcion a un elemento que no existe.
En javascript como en otros lenguajes de programacion orientado a objetos, usted puede llamar a las funciones en "cadenas" juntos, la realizacion de multiples funciones en el mismo tiempo. Un ejemplo de esto se puede hacer modificando nuestro script de javascript anterior calculator.js:
// si el documento esta listo
$(function(){
$('#result').hide();
// si se envio el formulario
$('#calculator').submit(function(){
if ($('#precio').val() >= 100) {
precio = $('#precio').val();
resultado = precio * 0.16;
$('#result').show().removeClass('error').addClass('correcto').text(resultado);
}else{
$('#result').show().removeClass('correcto').addClass('error').text('El precio debe ser igual o mayor a $100');
}
return false;
}) // fin del envio del formulario
}) // fin de la lectura del documento web
Tambien puedes cambiar los atributos de una seleccion utilizando la funcion attr() el primer argumento y el elemento seleccionado se vera afectado, el primer argumento es el atributo y el segundo valor es el valor, un ejemplo desabilitando un boton seria:
$('#submitButton').attr('disabled','disabled');
Tu puedes añadir, mover o eliminar elementos utilizando las funciones prepend(), append(), remove() y otras funciones. Para mas informacion sobre esta y otras funciones podemos consultar la documentacion de jQuery: http://api.jquery.com/.
Usando Ajax
Junto con la manipulacion del DOM, otro uso clave de Javascript y jQuery es Ajax.Ajax es simplemente el uso de javascript para realizar una peticion al servidor sin conocimiento del usuario. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicacion asincrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las paginas sin necesidad de recargarlas, mejorando la interactividad, velocidad, y usabilidad en las aplicaciones.
Vamos a crear un archivo el cual valide nuestro inicio de sesion utilizando ajax, en este caso no utilizaremos base de datos ni tampoco sesiones ya que solo es una simple prueba.
Primero que nada crearemos un archivo login.php el cual contendra el formulario para iniciar sesion, algunos mensajes de error, y un parrafo donde mostrara el resultado para cada cosa...
login.php
<!DOCTYPE html> <html> <head> <title>Iniciar sesion</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="login.js"></script> </head> <body> <h1>Iniciar sesion</h1> <p id="results"></p> <form action="login.php" method="post" id="login"> <p id="emailP">Correo electronico: <input type="text" name="email" id="email" /></p><span class="errorMessage" id="emailError">Por favor coloque su correo electronico</span> <p id="passwordP">Clave: <input type="password" name="password" id="password" /></p><span class="errorMessage" id="passwordError">Por favor coloque su clave</span> <p><input type="submit" id="submit" name="submit" value="Iniciar Sesion!" /></p> </form> </body> </html>
Explicando un poco el codigo:
1.- Agregamos jquery CDN de google y tambien llamamos a un archivo externo llamado login.js
2.- creamos un parrafo con el id results el cual contendra los resultados
3.- creamos un formulario, el cual contiene algunos mensajes de errores que estaran ocultos.
El segundo archivo es de validacion:
login_ajax.php
<?php
if (isset($_GET['email']) && isset($_GET['password'])) {
if (filter_var($_GET['email'],FILTER_VALIDATE_EMAIL)) {
if (($_GET['email'] == 'email@example.com') && ($_GET['password'] == 'testpass')) {
echo "Correcto";
}else{
echo "Incorrecto";
}
}else{
echo "Email invalido";
}
}else{
echo "Incompleto";
}
?>
1.- validamos si el correo y la clave existen y sino es asi mostramos un mensaje diciendo que esta incompleto
2.- validamos el email, si es correcto podremos proceder, sino decimos que el Email invalido
3.- Si todo esta bien mostrara un mensaje donde dira que es correcto pero si no es asi mostrara un mensaje diciendo que es incorrecto
En este caso nuestras credenciales se encuentran en el mismo php y son para email: email@example.com y para password: testpass
Por ultimo vamos a crear nuestro script de javascript login.js el cual contendra el codigo para enviar nuestro formulario por medio de ajax, en este caso vamos a crear unos objetos antes de eso veremos un poco sobre esto.
En este caso crearemos dos objetos, uno va a representar los datos que vamos a enviar, y el segundo va a representar las opciones para la peticion. Para crear un objeto utilizamos la siguiente sintaxis:
var nombredeobjeto = new Object();Una vez creado el objeto podemos crear valores para el mismo, utilizando la siguiente sintaxis:
nombredeobjeto.propiedad = valor;Si eres nuevo en Programacion orientada a objetos en javascript puedes pensar que el objeto generico es como un array con sus indices, con nombre y valor correspondientes. La segunda nueva pieza de informacion es el uso de la funcion de jQuery ajax() esta funcion realiza una peticion ajax, toma como unico argumento la configuracion de la solicitud, siendo parte de la libreria jQuery se invoca asi:
$.ajax(configuracion);Ya hecho esto vamos a ver el codigo y explicar un poco de el:
$(function(){
// ocultamos todos los mensajes de error
$('.errorMessage').hide();
$('#login').submit(function(){
var email, password;
if ($('#email').val().length >= 6) {
email = $('#email').val();
$('#emailP').removeClass('error');
$('#emailError').hide();
}else{
$('#emailP').addClass('error');
$('#emailError').show();
}
if ($('#password').val().length > 0) {
password = $('#password').val();
$('#passwordP').removeClass('error');
$('#passwordError').hide();
}else{
$('#passwordP').addClass('error');
$('#passwordError').show();
}
if (email && password) {
var data = new Object();
data.email = email;
data.password = password;
var options = new Object();
options.data = data;
options.dataType = 'text';
options.type = 'get';
options.success = function(response){
if (response == 'Correcto') {
$('#login').hide();
$('#results').removeClass('error');
$('#results').text('Ahora has iniciado sesion');
}else if(response == 'Incorrecto'){
$('#results').text('No coinciden las credenciales enviadas');
$('#results').addClass('error');
}else if(response == 'Incompleto'){
$('#results').text('Por favor llene los campos');
$('#results').addClass('error');
}else if(response == 'Email invalido'){
$('#results').text('Por favor ponga un correo valido');
$('#results').addClass('error');
}
} // fin de success
options.url = 'login_ajax.php';
$.ajax(options);
} // fin de email y password if
//para prevenir que se envie el formulario
return false;
});
});
Explicando el codigo:
1.- Verificamos que el documento este complementamente cargado utilizando $(function(){})
2.- ocultamos todos los mensajes de error
3.- creamos un evento de escucha para cuando el formulario sea enviado
4.- inicializamos las variables email y password
5.- validamos el email tiene que contener un tamaño de 6 caracteres como minimo, si es asi quitamos los errores y lo guardamos en la variable email y sino mostramos los errores
6.- validamos la password que tiene que contener mas de 0 caracteres como minimo, si es asi quitamos los errores y lo guardamos en la variable password y sino mostramos los errores
7.- si recibimos ambos valores, creamos un nuevo objeto data donde guardaremos los datos que fueron enviados desde el formulario. Para que se entienda en terminos equivalentes a PHP esto seria algo como:
$data = array();
$data['email'] = $email;
$data['password'] = $password;
8.- Creamos otro nuevo objeto de opciones en el cual hay una opcion data a la cual le asignamos el objeto que habiamos creado anteriormente. Luego creamos algunas otras propiedades como el tipo de dato que sera arrojado el cual sera de tipo texto y la forma en que sera enviado que es por el metodo get.
9.- Dependiendo de la respuesta que nos de que sera de tipo texto, vamos a crear diferentes cosas, como mostrar errores, de si el correo es incorrecto, que faltan datos por llenar, o que se ha iniciado sesion correctamente.
Algunos tips:
Correr el script PHP directamente para hacer un debug en caso de que suceda un error.
Desde el complemento firebug de firefox se puede ver la peticion enviada por metodo get:
Si desabilitan el javascript del navegador todo esto no tendra efecto alguno.
Hasta aqui terminamos la novena parte de PHP, en este caso no se vio mucho de PHP se vio mas de jQuery esto lo hicimos para llegar a Ajax y como podemos implementar la tecnologia Javascript y PHP juntos de manera que realicen un trabajo mas interactivo en la pagina web.
No hay comentarios:
Publicar un comentario