Diferencia entre revisiones de «Usuario:Juanda/jQuery/Sintaxis»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con '{{Usuario:juanda/jQuery/nav }} {{MiTitulo| Sintaxis}}')
 
Línea 1: Línea 1:
 
{{Usuario:juanda/jQuery/nav }}
 
{{Usuario:juanda/jQuery/nav }}
 +
{{#widget:Slides}} {{MiTitulo| Curso de jQuery}}
 +
<div class="slides layout-regular template-default">
 +
<div class="slide">
  
−
{{MiTitulo| Sintaxis}}
+
= Introducción =
 +
</div>
 +
 
 +
<div class="slide">
 +
=== Requerimientos previos ===
 +
*html
 +
*Conocimiento básico de javascript
 +
*Conocimiento básico de document object model (DOM)
 +
</div>
 +
 
 +
<div class="slide">
 +
=== ¿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'''
 +
:[http://jquery.org/license/ Licencia MIT]
 +
</div>
 +
 
 +
<div class="slide">
 +
 
 +
=== 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 [http://www.jquery.com/download la web de jQuery]
 +
</div>
 +
<div class="slide">
 +
*Versión de producción:
 +
<source lang="javascript">
 +
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
 +
</source>
 +
*Versión de desarrollo
 +
<source lang="javascript">
 +
<script type="text/javascript" src="jquery-1.8.2.js"></script>
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
 
 +
=== 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:
 +
<source lang="javascript">
 +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 +
</source>
 +
*CDN de Microsoft:
 +
<source lang="javascript">
 +
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
 +
</source>
 +
*CDN del propio jQuery:
 +
: Minified:
 +
<source lang="javascript">
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 +
</source>
 +
:Full:
 +
<source lang="javascript">
 +
<script type="http://code.jquery.com/jquery-1.8.2.js"></script>
 +
</source>
 +
</div>
 +
 
 +
<div class="slide">
 +
=== Momento de Ejecución del código Javascript ===
 +
* Cuando la página se ha cargado.
 +
<source lang="javascript">
 +
window.onload = function(){ /*Aquí viene mi código de javascript*/ }
 +
</source>
 +
* ¿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.
 +
 
 +
<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.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>
 +
</source>
 +
-->
 +
}}
 +
</div>
 +
<div class="slide">
 +
=== 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.
 +
</div>
 +
</div>

Revisión de 09:21 27 oct 2012


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
…
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
  • Versión de producción: 
	<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  • Versión de desarrollo 
	<script type="text/javascript" src="jquery-1.8.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.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://code.jquery.com/jquery-1.8.2.min.js"></script>
Full: 
	<script type="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.




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();
		});




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.
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/Sintaxis&oldid=10001»