Programación en JavaScript

Cada vez cobra más importancia la inclusión de código en la capa cliente de una aplicación Web.
La validación de datos de un formulario o la utilización de AJAX para mejorar la experiencia de
usuario son algunas de las funciones que requieren de la utilización de este código universal que
es JavaScript.
En este curso puedes aprender todo eso, además del uso de tecnologías y frameworks adicionales,
como JQuery y AngularJS, que permiten desarrollar auténticas aplicaciones para esta capa.

MÓDULO 1. PÁGINAS DINÁMICAS

Introducción

Una página web dinámica es una página que se actualiza conforme el usuario va haciendo
peticiones, navegando por la página o actualizando su contenido. Suelen venir cargadas de alto
contenido visual, opciones para discapacitados o aprendizaje de las elecciones que ha ido
tomando el usuario.
En contra a lo que ocurre con las páginas estáticas, en las que su contenido e información se
encuentra predeterminado, en las páginas dinámicas la información va apareciendo según el ciclo
de vida del usuario en la aplicación.
Esto se hace posible porque una página dinámica tiene asociada una aplicación web o una Base de
Datos desde la que se permite visualizar el contenido.
Para la creación de este tipo de páginas deberán utilizarse etiquetas HTML y algún lenguaje de
programación que se ejecute tanto del “lado servidor” como del “lado cliente”.
Los lenguajes utilizados para la creación de este tipo de páginas son principalmente: ASP, PHP, JSP,
pero, sobre todo, mucho Javascript (JS).
Ventajas y desventajas

Ventajas
 El proceso de actualización y creación es sumamente sencillo, sin necesidad de entrar en
el servidor.
 Gran número de funcionalidades y desarrollos tales como bases de datos, foros,
contenido dinámico, etc.
 Facilitan tener actualizada diariamente toda la información.
 Diferentes áreas de diferentes empresas pueden participar en la creación y el
mantenimiento.
 Dominación total sobre la administración de todos los contenidos.
 Contenidos fácilmente reutilizables.
 Una mayor interactividad con el usuario.
 Presentación de contenidos en diversos dispositivos y formatos, como los terminales
móviles.
 Los autores del contenido no requieren conocimientos técnicos.

Desventajas
 Mayores requerimientos técnicos para su alojamiento en Servidores de pago y, por
tanto, costes de alojamiento mayores.
 En algunos casos, un mayor coste de desarrollo que implican mayor cantidad de recursos
en el apartado visual de la aplicación.
JavaScript

Básicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario

hacer nada con estos programas, ni tan siquiera compilarlos. Los programas escritos con
JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos
intermedios.
Integrar JavaScript y HTML es muy sencillo y variado, destacamos tres maneras de incluir
JavaScript en un documento HTML:

Escribir JavaScript en el propio documento HTML

Las sentencias JavaScript se encierran entre etiquetas, o tags, <script> y se incluyen en cualquier
parte del documento.

Definir JavaScript en un archivo externo a nuestro documento

Las sentencias JavaScript se pueden escribir en un archivo externo de tipo JavaScript (.js) que los
documentos HTML enlazan mediante la etiqueta (o tag) <script>. Se pueden enlazar todos los
archivos JavaScript que se necesiten y cada documento HTML puede enlazar tantos ficheros
JavaScript como utilice.
Incluir JavaScript dentro de las propias etiquetas HTML

Esta última forma es la menos utilizada, ya que consiste en crear bloques de JavaScript dentro del
código HTML del documento.

MÓDULO 2. SINTAXIS DEL LENGUAJE JAVASCRIPT.

La sintaxis de JavaScript es muy similar a la de otros lenguajes:

 No importan las nuevas líneas y los espacios en blanco al igual que sucede en HTML
ya que el propio intérprete del lenguaje los ignora.
 Es case sensitive: distingue entre las mayúsculas y minúsculas.
  En contra de otros lenguajes de programación no se definen el tipo de las variables
(var). En JavaScript nunca sabemos el tipo de datos que va a contener una variable
por lo que una misma variable puede almacenar diferentes tipos de datos.
 Cada sentencia en JavaScript acaba con el carácter; (punto y coma) Aunque no en
necesario ya que el intérprete lee cada sentencia, aunque no exista este carácter.
Por convenio deberíamos incluirlo.
 Existe la opción de incluir comentarios para añadir información en el código fuente
del programa. Estos comentarios suelen servir para dar información al propietario
del código u otro desarrollador sobre el contenido del bloque de código en
JavaScript. Los comentarios pueden ser de una sola línea o de varias líneas (en
bloque).

Variables

Sin las variables sería imposible escribir y crear "programas genéricos", es decir, códigos que
funcionan de la misma manera independientemente de los valores concretos usados. Las variables
en JavaScript se utilizan mediante la palabra reservada ‘var’.

La palabra ‘var’ solamente se indica al definir por primera vez la variable, y a eso lo llamamos
‘declarar’ una variable.

El nombre de una variable también se le conoce como identificador y debe cumplir la siguiente
normativa:
 El identificador únicamente puede estar formado por números, letras, y los símbolos ‘$’ y
‘_’ a lo sumo.
 El primer carácter del identificador no debe ser un número.
Tipos de datos

Ya sabemos que todas las variables en JavaScript se crean a través de la palabra

reservada “var” pero dependiendo de los valores que almacenen pueden ser de un tipo u otro.

Numéricos
Se usan para contener valores numéricos enteros (llamados integer) o decimales (llamados float).

Cadenas de Texto
Se usan para contener caracteres, palabras y/o frases de texto

Arrays
Un array es una colección de variables, sin importar los tipos de los que sean cada una. Los arrays
sirven para guardar colecciones de valores, de manera que serviría para agrupar diferentes
variables. Por ejemplo, tenemos esta sucesión de variables con los días de la semana:

Ese conjunto de datos no se puede manipular de forma conjunta, pues cada uno está en una
variable diferente. Si los almacenamos en un array, estarían todos los datos apuntados por una
variable que podría recorrerse con una instrucción for. Para guardarlos en un array sería:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"]

Este array luego se puede recorrer para, por ejemplo, mostrar sus valores:

for(var i=0;i<dias.length;i++){ alert(dias [i]);}

Booleanos
Las variables de tipo booleano también son llamadas o denominadas con el nombre de variables
de tipo lógico. Estas variables suelen servir para condiciones o para la programación lógica.
Operadores

Los operadores manipulan los valores de las variables, realizan cálculos matemáticos y comparan
los valores de diferentes variables.

Veamos los diferentes tipos:

Asignación
Sirve para asignar un valor a una variable.

Incremento y decremento
Ambos operadores sirven para decrementar o incrementar el valor de una variable.

Lógicos
Los operadores lógicos son adecuados para realizar condiciones y lógica matemática.

Negación
El operador de negación se utiliza para dar el valor contrario a una variable.

Matemáticos
Los operadores declarados son: suma (+), resta (-), multiplicación (*) y división (/).

Relacionales
Los relacionales: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que
(==) y distinto de (!=).
AND
Este operador sirve para combinar los valores de dos variables, usando lógica matemática y solo
dando true si ambos valores son true

OR
Este operador sirve para combinar los valores de dos variables, usando lógica matemática y solo
dando true si alguno de los valores es true. En otro caso el valor final es false.

Objetos del navegador

Cuando se carga una página en un navegador se crean un número de objetos característicos del
navegador según el contenido de la página.
La siguiente figura muestra la jerarquía de clases del Modelo de Objetos del Documento
(Document Object Model - DOM).

contiene propiedades básicas de la ventana y sus componentes.

defaultStatus: mensaje que aparece en la barra de estado

frames: matriz que representa a todos los frames de la ventana

length: número de frames de la ventana

name: nombre de la ventana

self: hace referencia a la propia ventana activa

Objeto Location: contiene información sobre la URL que se está visualizando

Objeto Screen: información de la resolución de la pantalla.

Objeto Documento: características de la página. Como color de fondo, color de sus enlaces.

Objeto History: enlaces visitados por el usuario. Sirve para generar botones de avance o retroceso.

Objeto Navigator: permite obtener información sobre el navegador que se está utilizando en el
momento.

MÓDULO 3. CONTROL DE FLUJO.

Los códigos que se pueden escribir usando solo variables y operadores, son una sucesión de
instrucciones básicas.
Hay programas complejos como recorrer un array o establecer una condición que no pueden ser
realizadas simplemente con una sucesión de instrucciones básicas, es por ello que necesitamos
instrucciones de control de flujo que nos permite elegir líneas para ejecutar dentro de nuestro
código o repetir una serie de líneas un número de veces según una condición.

on instrucciones del tipo:

"si se cumple esta condición, hazlo; si no se cumple, haz esto otro"
"repite esto mientras se cumpla esta condición".

Utilizar este tipo de estructuras de control de flujo, convierte a los programas en “inteligentes”
permitiendo tomar decisiones en función del valor de las variables utilizadas.

Estructuras

A continuación vamos a ver las estructuras más representativas de JavaScript

Funciones

Para manejar nuestras diferentes variables JavaScript hace uso de funciones y propiedades, que ya
se encuentran en el propio lenguaje. A continuación, veremos las funciones según su utilidad.

Funciones para cadenas de texto

 Length, halla la longitud de una cadena de texto

 +, se emplea para concatenar varias cadenas de texto
 toUpperCase(), convierte los caracteres a mayúsculas.
 toLowerCase(), convierte los caracteres a minúsculas.
 charAt(posicion), halla el carácter de la posición.
 indexOf(caracter), halla la posición en la que se encuentra el carácter indicado. Si
no está devuelve -1, y si está varias veces su primera aparición.
 lastIndexOf(caracter), halla la última posición en la que se encuentra el carácter. Si
no está devuelve -1.
 substring(inicio, final), saca un trozo de una cadena de texto. El parámetro ‘final’ no
es obligatorio. Si no se pone corta la cadena de texto hasta el final del string.

Funciones útiles para arrays

 length, halla el número de elementos dentro de un array.

 concat(), concatena los elementos de varios arrays.
 join(separador), une los elementos de un array para formar una cadena de texto. Es
lo contrario al “split”.
 pop(), suprime el último elemento del array y lo mete en la variable seleccionada.
 push(), agrega un elemento (o varios) a nuestro array.
 shift(), suprime el primer elemento de nuestro array y lo mete en la variable
seleccionada.
 unshift(), agrega un elemento (o varios) al principio de nuestro array.
 reverse(), coloca los elementos de un array en su orden inverso.

Funciones útiles para números

 Infinity, es el valor de infinito cuando las operaciones dan dicho resultado.

 toFixed(digitos), fija el número de decimales que tiene que resolver una operación
y redondea si es necesario.
MÓDULO 4. EVENTOS Y OBJETOS.

Eventos

Hasta el momento, todos los códigos que hemos visto siguen ejecutándose sentencia a sentencia,
sin interactuar con el usuario.
Estos códigos son poco útiles en programas de JavaScript normales ya que se espera y desea una
interacción con los clientes que estén usando esa página web. Así, clickar con el botón del ratón en
ciertos apartados, mover el mismo ratón, o teclear pueden ser eventos que se produzcan dentro
de nuestra aplicación y se traduzcan en funciones que se tienen que ejecutar en ciertos momentos
en JavaScript.
El propio lenguaje nos aporta una serie de eventos para medir la interacción del usuario con
nuestra aplicación. Estas funciones creadas en JavaScript son denominadas “manejadores de
eventos” o “event handlers”.

Hay tres tipos de manejadores de eventos:

 Como atributos de las etiquetas HTML.

 Como funciones en código JavaScript externo.
 "Semánticos".

Objetos

Para trabajar objetos en programación vamos a utilizar JSON (JavaScript Object Notation) es un
formato para el intercambio de datos por la red, donde usualmente se utilizaba XML.
Es un conjunto de datos, comprendidos entre los que puede medir JavaScript que son objetos,
Arrays, cadenas, booleanos y números en Javascript.
Llegó sobre 2001 gracias al apoyo incondicional de Douglas Crockford. Yahoo! ayudó a su difusión
gracias a la adición de este formato en algunos de sus servicios web más innovadores. Google
comienza a realizar sus feeds en JSON para su protocolo web GData a finales del 2006.
Es considerado como un lenguaje independiente de formato de los datos cuya especificación es
descrita en RFC4627.

Manejadores de eventos

Atributos HTML

Se incluye en un atributo del propio elemento HTML.

Este método es quizás el menos práctico ya que impide la reutilización del código JavaScript (que
solo se encuentra asignado a ese atributo).

Variable this

La variable “this” es especial en JavaScript. Se usa para que tome como valor el invocador del
evento dentro del manejador. Es decir, qué componente nos ha invocado a la función.
Funciones externas

Es mucho mejor para nuestro código y para el reutilizamiento externalizar todas nuestras
sentencias JavaScript en funciones externas.
De ese modo, llamamos en nuestros manejadores de eventos a estas funciones externas.

Eventos semánticos

Esta implementación del manejador se basa en la externalización del código JavaScript,

seleccionando el componente al que queremos agregar un manejador de evento y desvinculando
completamente nuestro código HTML del código JavaScript.

Particularidades JSON sobre javaScript

Algunas de las particularidades o reglas del formato JSON a tener en cuenta son:

 Son duplas nombre-valor y los nombres van delimitados por comillas, tanto simples
como dobles, aunque pueden aparecer sin ellas.
 JSON puede representar los seis tipos de valores de JavaScript: objetos, Arrays,
números, cadenas, booleanos y null.
 Las fechas no son un tipo de objeto propio.
 Los números no pueden ir precedidos de ceros a no ser en el caso de notación
decimal (Ejemplo: 0.001).
 JSON es considerado un lenguaje independiente
 Sus objetos deben ser considerados como cadenas Javascript, no como objetos
nativos.

El estándar DOM

DOM (Document Object Model) es un agregado de utilidades diseñadas para la manipulación de

XML. Además, DOM también se usar para manipulación de documentos XHTML y HTML.
DOM es una API de funciones que se pueden usar para la manipulación de las páginas XHTML de
forma eficiente y rápida.
Antes de usar las funciones, DOM convierte internamente el XML original en una estructura
fácilmente manejable formada por una jerarquía de nodos. De esta manera, DOM transforma
el XML en una serie de nodos interconectados en árbol.
El árbol que se genera no representa únicamente los contenidos del fichero origen (mediante los
nodos del árbol) sino que representa sus relaciones (mediante las ramas del árbol que conectan
los nodos).
Manipulación de un HTML con DOM JavaScript

Una de las principales ventajas del uso del DOM es que permite a los desarrolladores web
disponer de un control preciso sobre la estructura o forma del documento HTML o XML que están
controlando. Las funciones que usa DOM permiten añadir, eliminar, modificar y reemplazar
cualquier nodo de cualquier documento sencillamente.

 Los documentos XML y HTML son convertidos por DOM en una jerarquía de nodos.
Los nodos pueden ser de diferentes tipos.
 Document: nodo raíz de los documentos HTML y XML. Todos los demás salen de él.
 DocumentType: nodo que contiene la representación del DTD empleado en la
página (indicado mediante el DOCTYPE).
 Element: contenido definido por un par de etiquetas (o tags) de apertura y cierre
(<etiqueta>...</etiqueta>) o de una etiqueta abreviada que se autocierra
(<etiqueta/>). Es el único nodo que puede tener tanto nodos hijos como atributos.
 Attr: el par nombre-de-atributo/valor.
 Text: el contenido del texto que se halla entre una etiqueta de apertura y una de
cierre. También guarda el contenido de una sección de tipo CDATA.
 CDataSection: nodo que muestra una sección tipo <![CDATA[ ]]>.
 Comment: un comentario de XML.
 Y otros menos usuales: DocumentFragment, Entity, EntityReference,
ProcessingInstruction y Notation.

Selectores y DOM

Una vez DOM ha formado automáticamente el árbol completo de nodos de la página, ya es posible
usar sus funciones para obtener la información sobre los nodos o controlar su contenido.

Y a partir de este momento, podemos usar cualquier función o propiedad de DOM para nuestro
código JavaScript.
MÓDULO 5. AJAX Y JQUERY

AJAX

Se presentó por vez primera en el artículo "Ajax: A New Approach to Web Applications" de Jesse
James Garrett en 2005. Anteriormente no existía un término que hiciera referencia a un tipo
nuevo de programación web que estaba surgiendo.
Realmente, el término AJAX es un acrónimo (Asynchronous JavaScript + XML).
El artículo define AJAX de la siguiente forma:

Ajax no es una tecnología en sí mismo. En realidad, se trata de varias tecnologías

independientes que se unen de formas nuevas y sorprendentes.
JQuery

Es una librería JavaScript que nos permite acceder a los objetos del DOM de manera simple creada
por John Resig (Mozilla).
Como los desarrollos web son cada vez más complejos, con funcionalidades de autocompletar,
drag & drop, validaciones y un largo etcétera; se necesitan algunas herramientas que no nos las
hagan desarrollar desde cero. Esto son las librerías de terceros, entre ellas JQuery, que están
hechas para simplificar y aclarar nuestro código JavaScript. Adicionalmente nos suelen resolver los
problemas de códigos que funcionen de manera diferente en distintos navegadores.

Ventajas:
 Ahorra muchas líneas de código.
 Transparenta el soporte de nuestra aplicación para los principales navegadores.
 Provee un mecanismo para capturar los eventos.

Desventajas:
 Provee un conglomerado de funciones para hacer animaciones en la página de
una manera muy simple.
 Integra funcionalidades para trabajar con AJAX.

Ajax: tecnologías implicadas y funcionamiento

Tecnologías implicadas

El desarrollo de aplicaciones AJAX requiere un conocimiento avanzado de todas y cada una de las
tecnologías y componentes siguientes:

 XHTML y CSS, crea una presentación basada en estándares.

 XMLHttpRequest, es el objeto encargado del intercambio asíncrono de información.
 DOM, para la manipulación e interacción dinámica de la capa de presentación.
  XML, XSLT y JSON, son las tecnologías que constituyen el intercambio y la manipulación
de la información.
 JavaScript, como unión de todas tecnologías.

Funcionamiento

En los antiguos desarrollos web, acciones que realice nuestro cliente sobre la página
desencadenaban llamadas al servidor. Y una vez el servidor hubiera acabado con ese tráfico de
información devolvía y, por tanto, recargaba, la página web en nuestro cliente.

Veamos como es este proceso en AJAX:

Ajax: peticiones y respuestas

El objeto XMLHTTPRequest:

 Objetivo: realizar peticiones asíncronas al servidor.

 Es la columna vertebral de todos los desarrollos con AJAX.
 Aceptado por todos los clientes web (Microsoft lo mete en IE 5 como un objeto ActiveX).

Propiedades del objeto XMLHTTPREQUEST

Maneras de desarrollar con JQuery

En las librerías de terceros (como en muchas otras materias) debemos adaptarnos a sus
mecanismos de uso ya que intentar desarrollar como lo hacemos habitualmente podría hacer que
nuestro código no tuviera el nivel que fuera de esperar.
Lo adecuado sería ir viendo cual es la mecánica al trabajar con dicha librería mediante problemas
sencillos e ir complicándolo a medida que entendemos la propia librería.

La función principal de JQuery es el signo dólar “$”.

JQuery: selectores

JQuery: funciones principales

A continuación, te mostramos algunas de las funciones principales en JQuery, con estas funciones
además podemos manipular elementos del DOM y tratar eventos en nuestras selecciones, vamos
a ello.
Ajax con JQuery

Las utilidades y las funciones que están relacionadas con AJAX son parte principal de la
librería JQuery. Tenemos un método para hacer peticiones AJAX que es $.ajax() (no hay que
olvidar el punto entre $ y ajax).
La siguiente tabla muestra todas las opciones que se pueden definir para el método $.ajax