|
|
| Línea 7: |
Línea 7: |
| | = Introducción = | | = Introducción = |
| | </div> | | </div> |
| | + | |
| | <div class="slide"> | | <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? === | | === ¿Qué es jQuery? === |
| − |
| |
| | *jQuery es una librería de funciones JavaScript: | | *jQuery es una librería de funciones JavaScript: |
| − | *“Write less, do more” (escribe menos, haz más) | + | *'''“Write less, do more”''' (escribe menos, haz más) |
| | *Funcionalidad: | | *Funcionalidad: |
| | :Selección y manipulación de elementos HTML y CSS | | :Selección y manipulación de elementos HTML y CSS |
| Línea 22: |
Línea 30: |
| | :[http://jquery.org/license/|Licencia MIT] | | :[http://jquery.org/license/|Licencia MIT] |
| | </div> | | </div> |
| | + | |
| | <div class="slide"> | | <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 |
| | + | </div> |
| | | | |
| − | === CDN === | + | <div class="slide"> |
| − | | + | === Uso de un CDN === |
| | *Se puede descargar de jQuery.com (versión producción y versión desarrollo) e incluirla en nuestra web: | | *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"> |
| Línea 50: |
Línea 67: |
| | </source> | | </source> |
| | </div> | | </div> |
| − | <div class="slide">
| |
| | | | |
| − | === Etiquetas de JavaScript en el código html ===
| |
| − | <source lang="html4strict">
| |
| − | <html>
| |
| − | <body>
| |
| − | <script type="text/javascript">
| |
| − | <!--
| |
| − | document.write("¡Hola Mundo!");
| |
| − | //-->
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − | *Etiquetas de JavaScript:
| |
| − | <source lang="javascript">
| |
| − |
| |
| − | <script type="text/javascript"> </script>
| |
| − | </source>
| |
| − | * Comentario en html (para que el navegador no muestre el javascript como texto si no lo sabe ejecutar). ¡Se debe poner para hacer validación W3C!
| |
| − | </div>
| |
| | <div class="slide"> | | <div class="slide"> |
| − | <source lang="html4strict">
| + | === Nuestro primer ejercicio === |
| − | <!-- -->
| + | *Versión de producción: |
| − | </source>
| + | :Minified y comprimida |
| − | * Comentario en JavaScript, útil en el ejemplo anterior, para que no se interprete dentro del JavaScript la marca de comentario de html: | + | :Aproximadamente 30KB |
| − | <source lang="javascript">
| + | *Versión de desarrollo: |
| − | // Comentario en JavaScript
| + | : Sin comprimir |
| − | </source>
| + | : Aproximadamente 8 veces más pesada |
| − | | + | |
| − | * Método write del objeto document para escribir en la página web: | + | |
| − | <source lang="javascript">
| + | |
| − | document.write
| + | |
| − | </source>
| + | |
| | </div> | | </div> |
| − | <div class="slide">
| |
| | | | |
| − | ===Colocación del JavaScript===
| |
| − | ====JavaScript en el head====
| |
| − | <source lang="html4strict">
| |
| − | <html>
| |
| − | <head>
| |
| − | <script type="text/javascript">
| |
| − | ....
| |
| − | </script>
| |
| − | </head>
| |
| − | ...
| |
| − | </html>
| |
| − | </source>
| |
| − | *Ejecución mediante llamada, al “disparar” (trigger) un evento.
| |
| − | *Ejecución previa a la renderización del del body
| |
| | | | |
| − | </div>
| |
| − | <div class="slide">
| |
| − | ====JavaScript en el body====
| |
| − | <source lang="html4strict">
| |
| − | <html>
| |
| − | <head>
| |
| − | </head>
| |
| − | <body>
| |
| − | <script type="text/javascript">
| |
| − | ....
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − | * Ejecución: Al cargar la página (generará contenido de la página)
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − | ====JavaScript en un fichero externo====
| |
| − | <source lang="html4strict">
| |
| − | <html>
| |
| − | <head>
| |
| − | <script type="text/javascript" src="xxx.js"></script>
| |
| − | </head>
| |
| − | <body>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − |
| |
| − | *Para ahorrar código si se van a ejecutar los mismos scripts en varias páginas html.
| |
| − | *El script de JavaScript externo debe tener extensión .js
| |
| − | * El type nos lo podemos ahorrar si codificamos en html5
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − | ====JavaScript como valor de un atributo ====
| |
| − | <source lang="html4strict">
| |
| − | <html>
| |
| − | <head>
| |
| − | </head>
| |
| − | <body>
| |
| − | <p onclick=”funcion();">
| |
| − | Ejemplo de Javascript
| |
| − | </p>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − |
| |
| − | * Ensucia el código html y complica el mantenimiento del JavaScript
| |
| − | * Solo lo utilizaremos aquí para algunos casos especiales
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − | === Etiqueta noscript===
| |
| − | *El javascript puede estar deshabilitado por el usuario o por el navegador.
| |
| − |
| |
| − | *Si la página web requiere JavaScript para su correcto funcionamiento, se incluya un mensaje de aviso al usuario indicándole que debería activar JavaScript para disfrutar completamente de la página.
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − | ====Ejemplo uso etiqueta noscript====
| |
| − | <source lang="html4strict">
| |
| − | <head>
| |
| − | ….
| |
| − | </head>
| |
| − | <body>
| |
| − | <noscript>
| |
| − | <p>Bienvenido a Mi Sitio</p>
| |
| − | <p>
| |
| − | Esta página requiere para su funcionamiento el uso de JavaScript.
| |
| − | Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.
| |
| − | </p>
| |
| − | </noscript>
| |
| − | </body>
| |
| − |
| |
| − | </source>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="slide">
| |
| − | ===Actividades===
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="slide">
| |
| − |
| |
| − | {{Actividad|
| |
| − | Title=Javascript en el head|
| |
| − | * Crea una página web con el siguiente código y observa el orden de carga en el navegador.
| |
| − | <source lang="html4strict">
| |
| − | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| |
| − | <html xmlns="http://www.w3.org/1999/xhtml">
| |
| − | <head>
| |
| − | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| |
| − | <title>Ejemplo de código JavaScript en el propio documento</title>
| |
| − | <script type="text/javascript">
| |
| − | alert("Hola Mundo");
| |
| − | </script>
| |
| − | </head>
| |
| − | <body>
| |
| − | <p>Mi primer programa con Javascript</p>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − | }}
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="slide">
| |
| − |
| |
| − |
| |
| − | {{Actividad|
| |
| − | Title=Javascript en el body|
| |
| − | * Crea una página web con el siguiente código y observa el orden de carga en el navegador.
| |
| − | <source lang="html4strict">
| |
| − | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| |
| − | <html xmlns="http://www.w3.org/1999/xhtml">
| |
| − | <head>
| |
| − | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| |
| − | <title>Ejemplo de código JavaScript en el propio documento</title>
| |
| − | </head>
| |
| − | <body>
| |
| − | <p>Mi primer programa con Javascript</p>
| |
| − | <script type="text/javascript">
| |
| − | alert("Hola Mundo");
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − | }}
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − | ===Tareas===
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − |
| |
| − | {{DGA tarea|
| |
| − | Title=Ejercicio 1|
| |
| − | Crea los ejercicios anteriores pero con el JavaScript como elemento inline
| |
| − | }}
| |
| − |
| |
| − | </div>
| |
| − | <div class="slide">
| |
| − | * Solución Ejercicio 1
| |
| − | ¡Ojo con las comillas!
| |
| − | <source lang="html4strict">
| |
| − | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| |
| − | <html xmlns="http://www.w3.org/1999/xhtml">
| |
| − | <head>
| |
| − | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| |
| − | <title>Ejercicio 1</title>
| |
| − | </head>
| |
| − | <body>
| |
| − | <p onclick="alert('Hola Mundo')">
| |
| − | Mi primer programa con Javascript
| |
| − | </p>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="slide">
| |
| − |
| |
| − | {{DGA tarea|
| |
| − | Title=Ejercicio 2|
| |
| − | Modificar el ejercicio anterior para que:
| |
| − | *Todo el código JavaScript se encuentre en un archivo externo llamado codigo.js y el script siga funcionando de la misma manera.
| |
| − | *Después del primer mensaje, se debe mostrar otro mensaje que diga "Soy el primer script"
| |
| − | *Añadir algunos comentarios que expliquen el funcionamiento del código
| |
| − | *Añadir en la página html un mensaje de aviso para los navegadores que no tengan activado el soporte de JavaScript
| |
| − | }}
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="slide">
| |
| − | * Solución Ejercicio 2
| |
| − | Página html:
| |
| − | <source lang="html4strict">
| |
| − | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| |
| − | <html xmlns="http://www.w3.org/1999/xhtml">
| |
| − | <head>
| |
| − | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| |
| − | <title>Ejercicio 2 - Archivo externo y varios mensajes</title>
| |
| − | <script type="text/javascript" src="codigo.js"></script>
| |
| − | </head>
| |
| − | <body>
| |
| − | <noscript>
| |
| − | Esta página <strong>requiere</strong> el uso de JavaScript
| |
| − | </noscript>
| |
| − | <p>Esta página muestra 2 mensajes</p>
| |
| − | </body>
| |
| − | </html>
| |
| − | </source>
| |
| − | </div>
| |
| − |
| |
| − | <div class="slide">
| |
| − | * Solución Ejercicio 2
| |
| − | Página codigo.js:
| |
| − | <source lang="html4strict">
| |
| − | // Al cargarse el archivo JavaScript, se muestra un mensaje
| |
| − | alert("Hola Mundo!");
| |
| − | // Despues del primer mensaje, se muestra otro mensaje seguido
| |
| − | alert("Hola Mundo por segunda vez!");
| |
| − |
| |
| − | </source>
| |
| − | </div>
| |
| | | | |
| | </div> | | </div> |
