Diferencia entre revisiones de «Usuario:Juanda/jQuery/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(→‎Instalación plugin de jQuery para Eclipse Kepler)
 
(39 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{Usuario:juanda/jQuery/nav }}
 
{{Usuario:juanda/jQuery/nav }}
−
{{MiTitulo| Introducción}}
+
{{#widget:Slides}} {{MiTitulo| Curso de jQuery-Introducción}}  
−
 
+
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
Línea 16: Línea 15:
  
 
<div class="slide">
 
<div class="slide">
−
 
 
=== ¿Qué es jQuery? ===
 
=== ¿Qué es jQuery? ===
 
*jQuery es una librería de funciones JavaScript:
 
*jQuery es una librería de funciones JavaScript:
Línea 27: Línea 25:
 
:Compatibilidad con todos los navegadores
 
:Compatibilidad con todos los navegadores
 
:…
 
:…
−
: Versión actual de jQuery: '''1.8.2'''
 
−
:[http://jquery.org/license/|Licencia MIT]
 
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
 +
===Versiones de jQuery===
 +
*Versión actual de jQuery: '''1.10.2''' y '''2.0.3'''
 +
*[http://jquery.org/license/ Licencia MIT]
 +
*La funcionalidad es la misma
 +
*La rama 2.x no es compatible con IE 6-8
 +
*La rama 2.x es algo más ligera
 +
*Usaremos la rama 1.x:
 +
:Misma funcionalidad
 +
:Mayor compatibilidad
 +
</div>
 +
 +
<div class="slide">
 +
 
=== Versiones de jQuery ===
 
=== Versiones de jQuery ===
 
*Versión de producción:
 
*Versión de producción:
 
:Minified y comprimida
 
:Minified y comprimida
−
:Aproximadamente 30KB
+
:Aproximadamente 90KB
 
*Versión de desarrollo:
 
*Versión de desarrollo:
 
: Sin comprimir
 
: Sin comprimir
−
: Aproximadamente 8 veces más pesada
+
: Aproximadamente 3 veces más pesada, en torno a 270KB
−
</div>
+
  
 +
*La rama 2.x pesa un 10% menos, resulta inapreciable
 +
 +
*Se puede descargar de [http://www.jquery.com/download la web de jQuery]
 +
</div>
 
<div class="slide">
 
<div class="slide">
−
=== Uso de un CDN ===
+
*Versión de producción:
−
*Se puede descargar de jQuery.com (versión producción y versión desarrollo) e incluirla en nuestra web:
+
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="jquery.js"></script>
+
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
 
</source>  
 
</source>  
 +
*Versión de desarrollo
 +
<source lang="javascript">
 +
<script type="text/javascript" src="jquery-1.10.2.js"></script>
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
 +
=== Uso de un CDN ===
 +
 
*También a través de un '''CDN''' (Content Delivery Network).
 
*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):
 
*¿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:
 
* CDN de Google:
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
</source>  
 
</source>  
 
*CDN de Microsoft:
 
*CDN de Microsoft:
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
+
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
 
</source>  
 
</source>  
 
*CDN del propio jQuery:
 
*CDN del propio jQuery:
 
: Minified:
 
: Minified:
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
</source>  
 
</source>  
 
:Full:
 
:Full:
 
<source lang="javascript">
 
<source lang="javascript">
−
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
+
<script type="http://code.jquery.com/jquery-1.10.2.js"></script>
 
</source>  
 
</source>  
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
=== Nuestro primer ejercicio ===
+
 
−
*Versión de producción:
+
=== Momento de Ejecución del código Javascript ===
−
:Minified y comprimida
+
* Cuando la página se ha cargado.
−
:Aproximadamente 30KB
+
<source lang="javascript">
−
*Versión de desarrollo:
+
window.onload = function(){ /*Aquí viene mi código de javascript*/ }
−
: Sin comprimir
+
</source>
−
: Aproximadamente 8 veces más pesada
+
* ¿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.
 +
</div>
 +
<div class="slide">
 +
{{Actividad|
 +
Title=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.
 +
<source lang="html4strict">
 +
<!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>
 +
</source>
 +
}}
 +
</div>
 +
<div class="slide">
 +
 
 +
=== 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.
 +
* ¡Ojo al efectuar acciones sobre imágenes si no están todavía cargadas!
 +
 
 +
<source lang="javascript">
 +
 
 +
$(document).ready(function(){
 +
  // Aquí viene mi código jQuery
 +
});
 +
</source>
 +
</div>
 +
<div class="slide">
 +
{{Actividad|
 +
Title=Hola Mundo mediante jQuery|
 +
* Descarga una versión de jQuery e inserta las siguientes instrucciones de jQuery:
 +
 
 +
<source lang="html4strict">
 +
$("a").click(function(event) {
 +
alert("Hola Mundo");
 +
event.preventDefault();
 +
});
 +
</source>
 +
*Resultado actividad:
 +
<source lang="html4strict">
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
<head>
 +
<meta charset="utf-8">
 +
<title>Hola Mundo con jquery</title>
 +
<script src="jquery-1.10.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>
 +
</source>
 +
}}
 +
</div>
 +
<div class="slide">
 +
 
 +
=== Instalación plugin de jQuery para Eclipse Kepler o Luna ===
 +
*Instalamos el Marketplace de Eclipse desde Help->Install new Software (por defecto ya está instalado en Eclipse Kepler)
 +
*Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
 +
*Seleccionamos el proyecto y pulsamos en properties (botón derecho) y pulsamos JavaScript->Include Patht Library y seleccionamos jQuery.
 +
 
 +
*Si el plugin de jQuery no funciona, tocará utilizar Eclipse Juno :-(
 +
*En Brackets funciona correctamente :-)
 +
</div>
 +
<div class="slide">
 +
 
 +
===Sintaxis===
 +
'''$(selector).action()'''
 +
*'''$''': Simbolo para definir JQuery (podríamos usar también JQuery)
 +
:'''selector''': Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
 +
:'''action''': Acción que se ejecuta sobre los elementos
 +
 
 +
*Ejemplos:
 +
<source lang="javascript">
 +
$(this).hide() //oculta el elemento actual
 +
$("p").hide() //oculta todos los elementos de tipo párrafo
 +
$("p.test").hide() //oculta todos los párrafos con class=test
 +
$("#test").hide() //oculta todos los elementos con id=test
 +
</source>
 +
 
 +
</div>
 +
 
 +
<div class="slide">
 +
 
 +
=== Ejemplos de uso del selector de jQuery  ===
 +
<source lang="javascript">
 +
$("p")  //se seleccionan todos los elementos de tipo párrafo
 +
$("p.intro")  //todos los párrafos con class=intro
 +
$("p#demo")  //todos los párrafos con id=demo
 +
$("[href]") //todos los elementos con atributo href
 +
$("[href='#']") //todos los elementos con atributo href="#"
 +
$("[href!='#']")  //todos los elementos con atributo href diferente de "#"
 +
$("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg
 +
$("p").css("background-color","yellow"); //modificamos el background-color de todos los párrafos a amarillo
 +
$("p#intro:first") //El primer párrafo con id="intro"
 +
$("ul li:first") El primer elemento <li> de cada <ul>
 +
$("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro"
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
===jQuery.noConflict()===
 +
* Utilizamos jQuery.noConflict() para evitar conflictos de nombre con otras librerías de JavaScript.
 +
<source lang="javascript">
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<script src="jquery.js"></script>
 +
<script>
 +
var jq=jQuery.noConflict();
 +
jq(document).ready(function(){
 +
  jq("button").click(function(){
 +
    jq("p").hide();
 +
  });
 +
});
 +
</script>
 +
</head>
 +
<body>
 +
<p>Esto es un párrafo.</p>
 +
<button>Pulsa aquí</button>
 +
</body>
 +
</html>
 +
</source>
 +
 
 
</div>
 
</div>
  

Última revisión de 05:24 19 nov 2013


Introducción

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
…

Versiones de jQuery

  • Versión actual de jQuery: 1.10.2 y 2.0.3
  • Licencia MIT
  • La funcionalidad es la misma
  • La rama 2.x no es compatible con IE 6-8
  • La rama 2.x es algo más ligera
  • Usaremos la rama 1.x:
Misma funcionalidad
Mayor compatibilidad

Versiones de jQuery

  • Versión de producción:
Minified y comprimida
Aproximadamente 90KB
  • Versión de desarrollo:
Sin comprimir
Aproximadamente 3 veces más pesada, en torno a 270KB
  • La rama 2.x pesa un 10% menos, resulta inapreciable
  • Versión de producción: 
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
  • Versión de desarrollo 
	<script type="text/javascript" src="jquery-1.10.2.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.10.2/jquery.min.js"></script>
  • CDN de Microsoft: 
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
  • CDN del propio jQuery:
Minified: 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
Full: 
	<script type="http://code.jquery.com/jquery-1.10.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.
  • ¡Ojo al efectuar acciones sobre imágenes si no están todavía cargadas! 
$(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.10.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 Kepler o Luna

  • Instalamos el Marketplace de Eclipse desde Help->Install new Software (por defecto ya está instalado en Eclipse Kepler)
  • Ejecutamos Help->Eclipse Marketplace y buscamos JSDT jQuery y lo instalamos
  • Seleccionamos el proyecto y pulsamos en properties (botón derecho) y pulsamos JavaScript->Include Patht Library y seleccionamos jQuery.
  • Si el plugin de jQuery no funciona, tocará utilizar Eclipse Juno :-(
  • En Brackets funciona correctamente :-)

Sintaxis

$(selector).action()

  • $: Simbolo para definir JQuery (podríamos usar también JQuery)
selector: Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
action: Acción que se ejecuta sobre los elementos
  • Ejemplos: 
$(this).hide() 		//oculta el elemento actual
$("p").hide() 		//oculta todos los elementos de tipo párrafo
$("p.test").hide() 	//oculta todos los párrafos con class=test
$("#test").hide() 	//oculta todos los elementos con id=test

Ejemplos de uso del selector de jQuery

$("p")  //se seleccionan todos los elementos de tipo párrafo
$("p.intro")  //todos los párrafos con class=intro
$("p#demo")  //todos los párrafos con id=demo
$("[href]") //todos los elementos con atributo href
$("[href='#']") //todos los elementos con atributo href="#"
$("[href!='#']")  //todos los elementos con atributo href diferente de "#"
$("[href$='.jpg']") //todos los elmentos con atributo href que acabe en .jpg
$("p").css("background-color","yellow"); //modificamos el background-color de todos los párrafos a amarillo
$("p#intro:first") 	//El primer párrafo con id="intro"
$("ul li:first") 	El primer elemento <li> de cada <ul>
$("div#intro .head") //Todos los elementos con class="head" dentro de un <div> con id="intro"

jQuery.noConflict()

  • Utilizamos jQuery.noConflict() para evitar conflictos de nombre con otras librerías de JavaScript. 
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var jq=jQuery.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").hide();
  });
});
</script>
</head>
<body>
<p>Esto es un párrafo.</p>
<button>Pulsa aquí</button>
</body>
</html>


Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/Introducción&oldid=13875»