domingo, 20 de noviembre de 2011

JavaScript & jQuery - Apuntes#1

Buen día, en esta ocasión comenzaremos con una serie de post sobre el lenguaje de programación para Web JavaScript y un poco de jQuery. Al igual que los post de Java-Apuntes el objetivo es recopilar información de diferentes fuentes y aplicarla en uno o varios post.

Para comenzar este post, utilizaremos el libro JavaScript & jQuery: The Missing Manual del autor David Sawyer McFarland.

¿Qué es JavaScript?
Es un lenguaje de programación que permite supercargar tu HTML con animaciones, interactividad, y efectos visuales dinámicos.

JavaScript puede hacer las páginas Web más útiles para proveer una respuesta inmediata. Por ejemplo, una página con JavaScript de un carrito de compras puede instantáneamente mostrar el costo total, con impuesto y la compra, el momento en el que el visitante selecciona un producto para comprar.

GoogleMaps es un buen ejemplo de la acción de JavaScript (http://maps.google.com). Google Maps permite ver un mapa de tu ciudad (o de cualquier lado), hacer zoom para tener un detalle de las calles y paradas de buses. Google Mpas trabaja sin refrescar la página es decir que responde inmediatamente a tus selecciones.

Un poco de Historia de JavaScript.
Inventado por NetScape por 1995, JavaScript es casi tan antiguo como la web misma. Mientras JavaScript está bien respecto ahora, tiene un pasado a cuadros. Fue considerado como un lenguaje de programación aficionado, usado para agregar no tán útiles efectos como mensajes que se desplazan al fondo de una barra de navegador, mariposas animadas que siguen los movimientos alrededor de la página. Era difícil que corriera en todos los navegadores.

En el pasado, JavaScript también sufrió incompatibilidades entre los dos navegadores destacados, Netscape Navigator y Internet Explorer. Porque Microsoft siempre trato de sobresalir entre los navegadores añadiendo nuevas y (aparentemente) mejores características, los dos navegadores actuaron en diferentes formas, haciendo difícil crear programas JavaScript que trabajaran en los dos.

Afortunadamente lo malo de esos días se ha casi ido y los navegadores contemporáneos como Firefox, Safari, Chrome, Opera, e Internet Explorer 9 han estandarizado mucho la forma en que manejan JavaScript, haciendo más fácil escribir programas JavaScript que funcionan casi para todos.

¿Que es jQuery?
JavaScript tiene un embarazoso secreto: escribirlo es difícil. Mientras es más simple que otros lenguajes de programación. Y muchas personas, incluyendo diseñadores Web, encuentran difícil programarlo.

Entonces es cuando jQuery aparece. jQuery es una librería de JavaScript que pretende hacer la programación en JavaScript fácil y divertida. Una librería JavaScript es un complejo programa que simplifica tareas difíciles y resuelve problemas de incompatibilidades de navegador.

jQuery es un arma secreta de un diseñador web en batalla a la programación con JavaScript. Con jQuery, puedes lograr tareas en una singular linea de código que permite de otra manera tomar cientos de línea de código y muchas horas de pruebas en navegador para lograrlo con tu código JavaScript.

HTML: La esquelética estructura.
JavaScript no es muy bueno sin los dos pilares del diseño web- HTML y CSS. Muchos programadores hablan de los tres lenguajes como formando "capas" de una página web. HTML provee la capa estructural, organizando el contenido como imágenes y palabras en un lenguaje significativo; CSS (Cascade Styling Sheets) provee la capa de presentación; Haciendo que el contenido de HTML se vea bien; Y JavaScript agrega la capa de comportamiento; brindando vida a una página web que interactúa con el visitante.

En otras palabras, para poder entender JavaScript, tiene que tener un buen entendimiento de HTML y de CSS.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Hey, I[m the title of this web page.</title>
</head>
<body>
Hey, I am some body text on this web page.
</body>
</html>

Este ejemplo tiene todo los elementos básicos que una página web necesita. La página comienza con la declaración del tipo de documento que indica que tipo de documento tiene la página y que estándar lo conforma. HTML actualmente viene en diferentes versiones, y usas diferente doctype con cada una. En este ejemplo, el doctype es para HTML5; el doctype para un HTML 4.01 o XHTML es más largo e incluye una URL que apunta al navegador a un archivo en Internet que contiene la definición para el tipo de archivo.

En esencia, el doctype le dice al navegador como desplegar la página. El doctype puede afectar el trabajo de CSS y JavaScript. Con un incorrecto o perdido doctype, puedes encontrar problemas de compatibilidad en los navegadores con diferencias en los scripts.

Hay cinco tipos de HTML comunmente usados ahora:

  1. HTML 4.0.1 Transitional.
  2. HTML 4.0.1 Strict.
  3. XHTML 1.0 Transitional.
  4. XHTML 1.0 Strict.
  5. HTML 5 (el nuevo chico del barrio).

No hay comentarios:

Publicar un comentario en la entrada