Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/conceptosGenerales»

De WikiEducator
Saltar a: navegación, buscar
 
Línea 1: Línea 1:
 
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
 
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
 
{{__TOC__}}
 
{{__TOC__}}
 +
<br />
 +
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.
  
−
====Seleccionar elementos del DOM con JQuery====
+
===Para qué sirve JQuery===
−
*Como ya hemos visto la acción de selección empieza por '''''$()''''', y entre paréntesis se especifica la selección que se desea realizar
+
*Para usar JQuery, hemos de conocer las tecnologías en las cuales lo vamos a utilizar
−
*La selección se puede hacer por los siguientes criterios
+
#HTML
−
#nombre
+
#CSS
−
#id
+
#JavaScript
−
#clases
+
JQuery es un entorno ligero que parte de la filosofía '''''escribe menos, haz mas'''''
−
#tipos
+
*Cosas que se pueden hacer con JQuery:
−
#atributos
+
Manipular la página HTML a través del DOM
−
#valores de atributos
+
Manipular CSS
−
#otros mas
+
Acceder y controlar los eventos de la página html
−
*Ahora vamos a ver unos ejemplos
+
#Efectos y animaciones
−
'''$(selector).action()'''
+
#AJAX
−
*'''$''': Simbolo para definir JQuery (podríamos usar también JQuery)
+
#Incorporar Utilidades
−
:'''selector''': Consulta sobre los elementos HTML (sintaxis muy similar a CSS)
+
#HTML/DOM manipulation
−
:'''action''': Acción que se ejecuta sobre los elementos
+
#CSS manipulation
 +
#HTML event methods
 +
#Effects and animations
 +
#AJAX
 +
#Utilities realizadas en JQuery
  
−
*Ejemplos:
+
===Cómo usar JQuery===
−
<source lang="javascript">
+
*Para usar jquery debemos especificar el fichero donde están los fuentes de la librería
−
$(this).hide() //oculta el elemento actual
+
{{Nota|*Al final solo son una librerías de javascript que van a hacer más facil hacer ciertas tareas}}
−
$("p").hide() //oculta todos los elementos de tipo párrafo
+
*Podemos indicar dónde está el fuente en internet o descargarlo a nuestro ordenador
−
$("p.test").hide() //oculta todos los párrafos con class=test
+
# descargarlo https://jquery.com/download/
−
$("#test").hide() //oculta todos los elementos con id=test
+
# Especificar su ubucación en internet
−
</source>
+
Versión de producción:
−
</div>
+
−
 
+
−
<div class="slide">
+
−
*En este enlace puedes ver una lista mas elaborada de ejemplos
+
−
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
+
−
 
+
−
==== Seleccionando elementos del DOM con JQuery  ====
+
−
;Todos los elementos del documento
+
 
<source lang=javascript>
 
<source lang=javascript>
−
$("*");
+
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
 
</source>
 
</source>
−
;Selección por nombre de elemento o nodo
+
Versión de desarrollo
−
*Los elementos concretos de un determinado tipo. Selección por nombre de elemento o nodo
+
 
<source lang=javascript>
 
<source lang=javascript>
−
//todos los párrafos
+
<script type="text/javascript" src="jquery-1.10.2.js"></script>
−
$("p");
+
−
//todas las imagenes
+
−
$("img");
+
−
//todas los formularios
+
−
$("form")
+
−
 
+
−
</source>
+
−
;Selección por id
+
−
*En esta selección debemos anteponer el '''''#''''' al valor del '''''id''''' seleccionado
+
−
<source lang=javascript>
+
−
<h1 id="titulo"> .. </h1>
+
−
...
+
−
$("#titulo")
+
−
//Seleccionaría el elemento titulo
+
 
</source>
 
</source>
  
−
;Selección por class
+
==== Uso de un CDN ====
−
*En este caso ante del valor de la clase se pone un '''''.''''' (punto) .
+
−
<source lang=javascript>
+
−
<h1 id="titulo" class="principal">  .. </h1>
+
−
...
+
−
$(".principal")
+
−
//Seleccionaría el elemento h1 cuya clase es principal
+
−
</source>
+
  
−
;Selección de elementos que tengan un atributo definido
+
*También a través de un '''CDN''' (Content Delivery Network).
−
*Para ello se especifica el atributo entre corchetes '''''[]''''' .
+
*¿Qué es un CDN? Grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros):
−
<source lang=javascript>
+
* CDN de Google:
−
<h1 id="titulo" class="principal" name="nombreTitulo1">  .. </h1>
+
<source lang="javascript">
−
<h2 id="titulo2" class="segunda" name="nombreTitulo2">  .. </h1>
+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
−
...
+
</source>  
−
$("[name]")
+
*CDN de Microsoft:
−
//Seleccionaría los elementos que tengan definido el atributo name independientemente del valor
+
<source lang="javascript">
−
</source>
+
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
−
;elementos que tengan un atributo con un determinado valor $("[atributo=valor]")
+
</source>
−
*En este caso se especifica el valor esperado del atributo
+
*CDN del propio jQuery:
−
<source lang=javascript>
+
: Minified:
−
<h1 id="titulo" class="principal" name="nombreTitulo1">  .. </h1>
+
−
<h2 id="titulo2" class="segunda" name="nombreTitulo2"> .. </h1>
+
−
...
+
−
$("[name=nombreTitulo1]")
+
−
//Seleccionaría los elementos que tengan definido el atributo name con el valor especificado.
+
−
 
+
−
 
+
−
 
+
−
;Ejemplos
+
 
<source lang="javascript">
 
<source lang="javascript">
−
$("p")  //se seleccionan todos los elementos de tipo párrafo
+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
−
$("p.intro")  //todos los párrafos con class=intro
+
</source>
−
$("p#demo")  //todos los párrafos con id=demo
+
:Full:
−
$("[href]") //todos los elementos con atributo href
+
<source lang="javascript">
−
$("[href='#']") //todos los elementos con atributo href="#"
+
<script type="http://code.jquery.com/jquery-1.10.2.js"></script>
−
$("[href!='#']")  //todos los elementos con atributo href diferente de "#"
+
</source>  
−
$("[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>
  
 
<div class="slide">
 
<div class="slide">
−
{{Actividad
 
−
|Title=Dado el siguiente código oculta todos los elementos
 
−
|
 
  
−
<source lang=html5>
+
===Sintaxis===
−
<!DOCTYPE html>
+
*La sintaxis de JQuery es muy sencilla
−
<html>
+
*La filosofía de uso es hacer una acción sobre un conjunto (1 o mas) elementos seleccionados.
−
<head>
+
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+
−
<script>
+
−
$(document).ready(function(){
+
−
    $("selector").hide();
+
−
});
+
−
</script>
+
−
</head>
+
−
<body>
+
  
−
<h2>This is a heading</h2>
+
*La sintaxis básica es
−
 
+
<source lang=javascript>
−
<p>This is a paragraph.</p>
+
$(selector).accion();
−
<p>This is another paragraph.</p>
+
−
 
+
−
</body>
+
−
</html>
+
 
</source>
 
</source>
−
}}
+
*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
 
{{Actividad
 
{{Actividad
−
|Title=Oculta el elemento con id=test.
+
|Title=saludo al hacer click en un enlace
−
|
+
|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 }}
−
<source lang=html5>
+
<source lang=javascript>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
<html>
+
<html lang="en">
 +
 
 
<head>
 
<head>
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+
    <meta charset="utf-8">
−
<script>
+
    <title>Hola Mundo con jquery</title>
−
$(document).ready(function(){
+
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
−
    $("selector").hide();
+
  <!-- <script src="jquery-1.10.2.min.js"></script> -->
−
});
+
    <script>
−
</script>
+
    function saluda(elEventoClick){
 +
            alert("Hola Mundo");
 +
            elEventoClick.preventDefault();
 +
    }
 +
    </script>
 
</head>
 
</head>
 
<body>
 
<body>
−
 
+
    <a href="http://jquery.com/" onclick="saluda(event);">jQuery</a>
−
<p>This is a paragraph.</p>
+
−
<p id="test">This is a paragraph with id="test".</p>
+
−
 
+
 
</body>
 
</body>
 
</html>
 
</html>
 
</source>
 
</source>
 
}}
 
}}
−
{{Actividad
+
{{Actividad|
−
|Title=Oculta todos los elementos del documento
+
Title=Comentado el código
 
|
 
|
−
<source lang=html5>
+
<source lang=javascript>
−
<!DOCTYPE html>
+
<a href="http://jquery.com/" onclick="saluda(event);">jQuery</a>
−
<html>
+
</source>
−
<head>
+
;Observa cómo se pasa como argumento a la función <i><u>saluda</u></i> el propio evento que se genera al hacer un click en el enlace
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+
<hr />
−
<script>
+
<source lang=javascript>
−
$(document).ready(function(){
+
    function saluda(elEventoClick){
−
    $("selector").hide();
+
            alert("Hola Mundo");
−
});
+
            elEventoClick.preventDefault();
−
</script>
+
    }
−
</head>
+
−
<body>
+
−
 
+
−
<h1>This is a heading</h1>
+
−
<h2>This is another heading</h2>
+
−
 
+
−
<p>This is a paragraph.</p>
+
−
<p>This is another paragraph.</p>
+
−
 
+
−
<div>This is a div element.</div>
+
−
<button>This is a button</button>
+
−
 
+
−
</body>
+
−
</html>
+
−
 
+
 
</source>
 
</source>
 +
;esta función recibe el evento en una variable llamada elEventoClick, parámetro de la función
 +
;Lo que hago es usar un método de ese objeto para anular la acción básica que es ir al enlace especificado en el atributo href del elemento a
 
}}
 
}}
 +
*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.
 +
<source lang=javascript>
 +
// ....
 +
document.getElementById("holamundo").onclick = holaMundo;
 +
// ...
 +
function holaMundo()
 +
  {
 +
  alert ("Hola Mundo");
 +
  return false;
 +
  }
 +
</source>
 +
*Es importante ver lo peculiar del código anterior.
 
{{Actividad
 
{{Actividad
−
|Title=Oculta los elementos con un atributo href
+
|Title=Asignando el nombre de una función
 
|
 
|
−
<source lang=html5>
+
;En javascipt puedo asignar  el nombre de una función a una variable
−
<!DOCTYPE html>
+
*En este caso no hace falta asignar paréntensis
−
<html>
+
*Es como si estuviéramos creando un alias o asignando a una  variable el código de una función (Concepto de funciones anónimas)
−
<head>
+
*Cuando escriba en nombre de la variable, se ejecuta la función
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+
}}
−
<script>
+
{{Actividad|
 +
Title "Asignano funciones a variables"
 +
|Asignar a  una variable la función saludar, la cual saque un mensaje por pantalla mediante un alert
 +
}}
 +
*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.
 +
<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, que requieren más tiempo.
 +
</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(){
 
$(document).ready(function(){
−
    $("selector").hide();
+
  // Aquí viene mi código jQuery
 
});
 
});
−
</script>
+
</source>  
−
</head>
+
</div>
−
<body>
+
<div class="slide">
 +
{{Actividad|
 +
Title=Hola Mundo mediante jQuery|
 +
* Descarga una versión de jQuery e inserta las siguientes instrucciones de jQuery:
  
−
<p>This is a paragraph.</p>
+
<source lang="html4strict">
−
<p>This is another paragraph.</p>
+
$("a").click(function(event) {
−
<a href="http://www.w3schools.com/html/">HTML Tutorial</a>
+
alert("Hola Mundo");
−
<a href="http://www.w3schools.com/css/">CSS Tutorial</a>
+
event.preventDefault();
−
 
+
});
−
</body>
+
−
</html>
+
 
</source>
 
</source>
−
}}
+
*Resultado actividad:
−
 
+
<source lang="html4strict">
−
{{Actividad
+
−
|Title=Oculta todas las filas pares de la tabla
+
−
|
+
−
<source lang=html5>
+
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
<html>
+
<html lang="en">
 
<head>
 
<head>
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+
<meta charset="utf-8">
 +
<title>Hola Mundo con jquery</title>
 +
<script src="jquery-1.10.2.min.js"></script>
 
<script>
 
<script>
−
$(document).ready(function(){
+
$(document).ready(function() {
−
    $("selector").hide();
+
$("a").click(function(event) {
−
});
+
alert("Hola Mundo");
 +
event.preventDefault();
 +
});
 +
});
 
</script>
 
</script>
 
</head>
 
</head>
 
<body>
 
<body>
−
 
+
<a href="http://jquery.com/">jQuery</a>
−
<table border="1">
+
−
  <tr>
+
−
    <th>Company</th>
+
−
    <th>Country</th>
+
−
  </tr>
+
−
  <tr>
+
−
    <td>Alfreds Futterkiste</td>
+
−
    <td>Germany</td>
+
−
  </tr>
+
−
  <tr>
+
−
    <td>Berglunds snabbköp</td>
+
−
    <td>Sweden</td>
+
−
  </tr>
+
−
  <tr>
+
−
    <td>Centro comercial Moctezuma</td>
+
−
    <td>Mexico</td>
+
−
  </tr>
+
−
  <tr>
+
−
    <td>Ernst Handel</td>
+
−
    <td>Austria</td>
+
−
  </tr>
+
−
  <tr>
+
−
    <td>Island Trading</td>
+
−
    <td>UK</td>
+
−
  </tr>
+
−
</table>
+
−
 
+
 
</body>
 
</body>
 
</html>
 
</html>
 
</source>
 
</source>
 
}}
 
}}
−
 
+
</div>
−
====Acciones con html====
+
<div class="slide">
−
==== Manipulación del contenido html ====
+
−
*Cambia el contenido del elemento/s html seleccionado/s:
+
−
<source lang="javascript">
+
−
$(selector).html(contenido)
+
−
</source>
+
−
*Añaden contenido en el elemento HTML seleccionado:
+
−
<source lang="javascript">
+
−
$(selector).append(content)
+
−
$(selector).prepend(content)
+
−
</source>
+
−
*Añaden contenido después o antes del elemento HTML seleccionado:
+
−
<source lang="javascript">
+
−
$(selector).after(content)
+
−
$(selector).before(content)
+
−
</source>
+
−
====Aplicando efectos con JQuery====
+
−
====Encadenando métodos en JQuery====
+
−
====Dom y JQuery; Modificando elemntos====
+
−
====Dom y JQuery; Accediendo a los atributos====
+
−
==== JQuery y CSS====
+
−
==== JQuery y Formularios====
+
−
==== JQuery y Eventos====
+
−
==== JQuery Validando formularios con plugin====
+
−
==== JQueryUI: Interfaz gráfico con JQuery====
+

Última revisión de 21:59 8 abr 2016



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
  1. HTML
  2. CSS
  3. 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

  1. Efectos y animaciones
  2. AJAX
  3. Incorporar Utilidades
  4. HTML/DOM manipulation
  5. CSS manipulation
  6. HTML event methods
  7. Effects and animations
  8. AJAX
  9. Utilities realizadas en JQuery

Cómo usar JQuery

  • Para usar jquery debemos especificar el fichero donde están los fuentes de la librería

(Comment.gif: *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
  1. descargarlo https://jquery.com/download/
  2. 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
  1. $ indica que vamos a acceder a la bliblioteca jQuery
  2. selector permitirá identificar el elemento o elementos de la página a la que nos referimos (un determando id, elementos de tipo img, ...
  3. 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


Icon activity.jpg

saludo al hacer click en un enlace

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>

}}


Icon activity.jpg

Comentado el código

 <a href="http://jquery.com/" onclick="saluda(event);">jQuery</a>
Observa cómo se pasa como argumento a la función saluda el propio evento que se genera al hacer un click en el enlace 
    function saluda(elEventoClick){
            alert("Hola Mundo");
            elEventoClick.preventDefault();
    }
esta función recibe el evento en una variable llamada elEventoClick, parámetro de la función
Lo que hago es usar un método de ese objeto para anular la acción básica que es ir al enlace especificado en el atributo href del elemento a




  • 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.


Icon activity.jpg

Asignando el nombre de una función

En javascipt puedo asignar el nombre de una función a una variable
  • En este caso no hace falta asignar paréntensis
  • Es como si estuviéramos creando un alias o asignando a una variable el código de una función (Concepto de funciones anónimas)
  • Cuando escriba en nombre de la variable, se ejecuta la función






Icon activity.jpg

Actividad

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.


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>




Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/conceptosGenerales&oldid=19319»