Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/conceptosGenerales»
De WikiEducator
< Usuario:ManuelRomero | JavaScript | jquery
(→Ejemplos de uso del selector de jQuery) |
|||
| (3 revisiones intermedias por el mismo usuario no mostrado) | |||
| Línea 238: | Línea 238: | ||
</div> | </div> | ||
<div class="slide"> | <div class="slide"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Última revisión de 22:59 8 abr 2016
LENGUAJE JAVASCRIPT: JavaScript un lenguaje de programación web
Programación web al lado del cliente
JavaScript Un lenguaje de script en el cliente
http://www.desarrolloweb.com/manuales/manual-jquery.html
Qué es JQuery
- Es una librería de funciones de javascript que facilita el uso de javascript
- Nosotros nos vamos a centrar en la parte del DOM (elementos y eventos en la página html)
- También se conoce como un framework, que viene siendo un entorno para desarrollar software en un determinado lenguaje, donde se facilita al desarrollador muchas acciones a la hora de hacer un programa.
Para qué sirve JQuery
- Para usar JQuery, hemos de conocer las tecnologías en las cuales lo vamos a utilizar
- HTML
- CSS
- JavaScript
JQuery es un entorno ligero que parte de la filosofía escribe menos, haz mas
- Cosas que se pueden hacer con JQuery:
Manipular la página HTML a través del DOM Manipular CSS Acceder y controlar los eventos de la página html
- Efectos y animaciones
- AJAX
- Incorporar Utilidades
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities realizadas en JQuery
Cómo usar JQuery
- Para usar jquery debemos especificar el fichero donde están los fuentes de la librería
(
: *Al final solo son una librerías de javascript que van a hacer más facil hacer ciertas tareas)
- Podemos indicar dónde está el fuente en internet o descargarlo a nuestro ordenador
- descargarlo https://jquery.com/download/
- Especificar su ubucación en internet
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>
</div>
Sintaxis
- La sintaxis de JQuery es muy sencilla
- La filosofía de uso es hacer una acción sobre un conjunto (1 o mas) elementos seleccionados.
- La sintaxis básica es
$(selector).accion();
- Donde
- $ indica que vamos a acceder a la bliblioteca jQuery
- selector permitirá identificar el elemento o elementos de la página a la que nos referimos (un determando id, elementos de tipo img, ...
- accion() es la acción que queremos realizar (ocultar, escibir, modificar propiedades , ...)
Especificar cuando se ejecuta
- Hasta ahora la forma de asignar acciones a los eventos es ir elemento a elemento, especificando en el atributo del evento correspondiente la acción deseada
- Tomemos el siguiente ejemplo
| A partir de una página html que tenga un enlace, hacemos un programa javascript que la hacer click en el enlace salga un saludo con un alert en lugar de ir al enlace
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hola Mundo con jquery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- <script src="jquery-1.10.2.min.js"></script> --> <script> function saluda(elEventoClick){ alert("Hola Mundo"); elEventoClick.preventDefault(); } </script> </head> <body> <a href="http://jquery.com/" onclick="saluda(event);">jQuery</a> </body> </html>
}}
<a href="http://jquery.com/" onclick="saluda(event);">jQuery</a>
function saluda(elEventoClick){ alert("Hola Mundo"); elEventoClick.preventDefault(); }
|
- Otra forma de asignar código a un a un elemento es hacerlo todo desde el script. Es decir asignar a un envento a un elemento o grupo de elementos concretos una acción concreta.
// .... document.getElementById("holamundo").onclick = holaMundo; // ... function holaMundo() { alert ("Hola Mundo"); return false; }
- Es importante ver lo peculiar del código anterior.
|
|
Title "Asignano funciones a variables"
|
- Pero ahora nos queda el tema de cuando asignar este código.
- Debemos de hacerlo una vez que se haya cargado todo la página.
- Si queremos hacerlo escribiendo el código en la cabecera, podemos usar el evento de que la página se haya cargado
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, que requieren más tiempo.
<!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>
|
$("a").click(function(event) {
alert("Hola Mundo");
event.preventDefault();
});
<!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>
|
