Manejo de JavaScript potenciado con jQuery

Salu2 a todos, yo sé que estaban esperando este post, les anticipo que es uno de muchos que vamos a escribir aquí, primero vamos a aclarar varios conceptos.

 

¿Qué es JavaScript y donde se ejecuta?

Este es un lenguaje interpretado, es decir, no requiere compilación, y se ejecuta en el lado del cliente más especificamente en el navegador, otro detalle importante apareció en el 95 y adivinen quien lo creó nada más y nada menos que Netscape los de Mozilla Fundation, anoto un punto a favor.

 

¿Qué es jQuery y con qué se come eso?

Esta es una librería o más bien un framework basado en JavaScript y nos permite potenciar y simplificar este código en varios aspectos:

  • Selección de elementos HTML (DOM)
  • Muchos efectos y animaciónes
  • Manejo simplificado de la técnica AJAX
  • Manejo de hojas de estilo en cascada CSS
  • Interacción con elementos

Teniendo una idea básica del lenguaje y su hijo pródigo podemos empezar con lo necesario para incluirlos en nuestros proyectos.

Primer “Hola Mundo” en JavaScript

Como ya sabemos que JavaScript es un lenguaje que viene “incrustado” en el navegador, simplemente tenemos que llamarlo para que se ejecute, y esto lo hacemos dentro de las etiquetas:

<script type="text/javascript">
    código javascript...
</script>

Generalmente esta etiqueta <script> la debemos colocar dentro del <head></head> del documento HTML pero esto es según la utilidad, también puede estar declarada en el <body></body>, incialmente vamos a trabajarla en el HEAD, entonces probamos nuestra aplicación JavaScript:

<head>
  <script type="text/javascrit">
     alert("Hola mundo");
  </script>
</head>

Con este código lo que hacemos es imprimir por pantalla este mensaje y con esto concluyo de manera permanente la explicación de JavaScript, ahora vamos a centrarnos en el manejo de jQuery, los que aún están un poco crudos con este lenguaje les recomiendo unos tutoriales básicos más abajo encontrarán los links.

 

Incluir la librería jQuery en nuestro código HTML

Ahora viene la parte más interesante de este post, vamos a incluir la librería jQuery en nuestro proyecto HTML, para esto necesitamos bajar la última versión del jQuery la pueden encontrar en la Página Oficial, al hacer clic en el botón de Dowload, nos abre una página con un código tecleamos Ctrl + S, y lo guardamos en la carpeta donde se encuentra el/los archivo/s en HTML.

personalmente me gusta nombrar a este archivo de una manera sencilla de recordar y guardarlo en una carpeta solo para los scripts en JavaScript:

directorio_del_proyecto/script/jquery.js

Ahora lo inluímos en el documento como si fuera un código JavaScript sólo que como un archivo externo:

 <script src="script/jquery.js"></script>

Ahora con jQuery incluído vamos a probar si funciona con un “hola mundo”:

<head>
 <script src="script/jquery.js"></script>
 <script>
   $(document).ready(function(){
      alert("Hola Mundo con jQuery");
   });
 </script>
</head>

Lo que hacemos en este ejemplo es seleccionar el elemento document en el evento ready y ejecutamos una función, en otras palabras lo que hace este código es: ejecutar el alert(); cuando el documento HTML se encuentre completamente cargado, algunas personas dirán “¿y para qué *a@¿?#! hacemos esto?”, por una sencilla razón, como incialmente lo mencionamos esta librería permite interacción con los elementos del HTML, entonces ¿como vamos a tener interacción con los elementos si aún no existen?

No existen por la siguiente razón:  supongamos un caso donde queremos hacer que cuando el usuario haga clic en un hipervínculo, nos muestre un mensaje de alerta, si lo hacemos de esta manera:

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
      $("a").click(function(){
         alert("Hola mundo");
      });
  </script>
 </head>
 <body>
     <a href="#">Haz click para mostrar</a>
 </body>
</html>

Este ejemplo no va a funcionar, sencillamente porque le estamos diciendo a jQuery que cuando haga click en cualquier <a> muestre el alert(“Hola mundo”);  y todo esto lo hacemos dentro del <head></head> donde por obvias razones el <a> aún no existe en esta parte del documento, por eso debemos hacerlo en el evento ready del document esto para esperar a que se cargue toda la página y ahí si trabajar con los elementos:

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
   $(document).ready(function(){
       $("a").click(function(){
          alert("Hola mundo");
       });
   });
  </script>
 </head>
 <body>
     <a href="#">Haz click para mostrar</a>
 </body>
</html>

Aquí terminamos por ahora, en el próximo post vamos a ver selectores y efectos.

 

Archivos del Ejercicio: jquery.rar

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s