Introducción

De WikiEducator
Saltar a: navegación, buscar



Requerimientos previos

  • html
  • Conocimiento básico de javascript
  • Conocimiento básico de document object model (DOM)

¿Qué es jQuery?

  • jQuery es una librería de funciones JavaScript:
  • “Write less, do more” (escribe menos, haz más)
  • Funcionalidad:
Selección y manipulación de elementos HTML y CSS
Funciones de eventos en HTML
Efectos y animaciones de JavaScript
AJAX
Compatibilidad con todos los navegadores
Versión actual de jQuery: 1.8.2
Licencia MIT

Versiones de jQuery

  • Versión de producción:
Minified y comprimida
Aproximadamente 30KB
  • Versión de desarrollo:
Sin comprimir
Aproximadamente 8 veces más pesada, aproximadamente 240KB
  • Se puede descargar de jQuery.com (versión producción y versión desarrollo) e incluirla en nuestra web:
Versión de producción:
	<script type="text/javascript" src="jquery.js"></script>
Versión de desarrollo
	<script type="text/javascript" src="jquery.min.js"></script>

Uso de un CDN

  • También a través de un CDN (Content Delivery Network).
  • ¿Qué es un CDN? Grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros):
  • CDN de Google:
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  • CDN de Microsoft:
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  • CDN del propio jQuery:
Minified:
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
Full:
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

Momento de Ejecución del código Javascript

  • Cuando la página se ha cargado.
window.onload = function(){ /*Aquí viene mi código de javascript*/ }
  • ¿Por qué? No se puede ejecutar hasta que el DOM se haya cargado completamente
  • Desventaja: Habrá que esperar la carga completa de imágenes y anuncios para su ejecución.


Icon activity.jpg

Hola Mundo mediante javascript

  • Crea una página web con un enlace que muestre un alert con el texto "Hola Mundo" y que "anule" el enlace.
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Hola Mundo en javaScript</title>
   <script type="text/javascript">
   window.onload = function() { 
   		document.getElementById("holamundo").onclick = holaMundo;
   }
   function holaMundo()
   {
	   alert ("Hola Mundo");
	   return false;
   }
   </script>
 </head>
 <body>
   <a id="holamundo" href="http://jquery.com/">jQuery</a>
 </body>
 </html>




Momento de Ejecución del código jQuery

  • Cuando el documento (DOM) esté preparado para ser manipulado.
  • Antes de que se carguen imágenes o anuncios.
$(document).ready(function(){
   // Aquí viene mi código jQuery
});



Icon activity.jpg

Hola Mundo mediante jQuery

  • Descarga una versión de jQuery e inserta las siguientes instrucciones de jQuery:
		$("a").click(function(event) {
			alert("Hola Mundo");
			event.preventDefault();
		});




  • Resultado actividad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hola Mundo con jquery</title>
<script src="jquery-1.8.2.min.js"></script>
<script>
	$(document).ready(function() {
		$("a").click(function(event) {
			alert("Hola Mundo");
			event.preventDefault();
		});
	});
</script>
</head>
<body>
	<a href="http://jquery.com/">jQuery</a>
</body>
</html>

Instalación plugin de jQuery para Eclipse Juno

  • Instalamos el marketPlace de Eclipse desde Help->Install new Software
  • Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
  • Configuración:
Project Explorer->JavaScript Resources
Properties (botón derecho) y pulsamos en Add JavaScript Library y seleccionamos jQuery.
$(document).ready(function(){
   // Aquí viene mi código jQuery
});

</div>