|
|
| Línea 54: |
Línea 54: |
| | | | |
| | <div class="slide"> | | <div class="slide"> |
| | + | === Efectos === |
| | | | |
| − | === 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> |
| | <div class="slide"> | | <div class="slide"> |
| − | *Versión de producción:
| + | === Callback functions === |
| − | <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> |
| | | | |
| | <div class="slide"> | | <div class="slide"> |
| | | | |
| − | === Uso de un CDN === | + | === Manipulación de html === |
| | | | |
| − | *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> |
| | | | |
| | <div class="slide"> | | <div class="slide"> |
| − | === Momento de Ejecución del código Javascript === | + | === Manipulación de css === |
| − | * 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> |
| − | <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> | | </div> |
