martes, 3 de julio de 2012

Desarrollo en JavaScript

JavaScript es un lenguaje de programación interpretado, similar a lenguaje C y con algunas similitudes con el lenguaje Java. Es orientado a objetos, y fue diseñado especialmente para ser ejecutado en entornos de páginas Web en el lado del cliente. 

Actualmente, todos los navegadores tienen compatibilidad con este lenguaje, y pueden ejecutar scripts embebidos en páginas Web.

JavaScript es muy útil para creación de efectos, animaciones, apariencia e interacciones en páginas Web. Para esta aplicación existe un paquete muy completo, llamado JQuery, con el cual es posible desarrollar una gran cantidad de interacciones para una página Web, sin necesidad de complementos adicionales. Más adelante se mostrará un ejemplo que hace uso de esta herramienta.

Por otra parte, otra aplicación que se le puede dar al lenguaje JavaScript es la de hacer cálculos matemáticos y operaciones complejas dentro de una página Web.

Finalmente, una de las aplicaciones más importantes de JavaScript hoy en día es la interacción con las APIs de los principales servidores de mapas y de cartografía existentes (Google, OpenStreet, Yahoo, Bing, entre otros). De esta forma, a través de un paquete libre, llamado OpenLayers, es posible insertar un mapa dentro de cualquier página Web, sin necesidad de tener un servidor de mapas propio, y de una forma muy sencilla y directa.

Ayuda de calendario usando JQuery

Muchas veces es necesario insertar dentro de un formulario una fecha; sin embargo, existen una gran cantidad de formatos para el ingreso de la misma, y puede llegar a ser muy tedioso para el usuario. La forma más sencilla para solucionar esta situación, es que el usuario pueda buscar la fecha en un calendario, y al hacer clic sobre la misma, se llene automáticamente el formulario.

El código HTML para esta aplicación es el siguiente:

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8' />
  <title>Ejemplo jquery</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>
  <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
  
  <script>
    $(function() {
        $( "#datepicker" ).datepicker($.datepicker.regional['es']);
    });
  </script>

</head>

<body>

<p>Fecha: <input type="text" id="datepicker"></p>


</body>
</html>

Como se puede ver, el código es bastante simple. En este ejemplo se llaman unos archivos de estilo CSS y los archivos .js, los cuales se pueden descargar de la página de JQuery de forma libre.

Se adiciona un Script en el head de la página, con el cual se crea el objeto tipo datepicker, y se relaciona al cuadro de texto con id "datepicker".

Finalmente en el body de la página, se inserta una entrada de tipo texto, con la cual se activará el calendario para la selección de fecha.

En la página oficial de JQuery se pueden encontrar muchos más ejemplos útiles para el uso de esta librería de JavaScript.