JAVASCRIPT – FUNDACIÓN TELEFÓNICA

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).
MÓDULO 2. SINTAXIS DEL LENGUAJE
JAVASCRIPT.

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).
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.
Son 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.

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:
NodeJS: Creación de un servidor HTTP
Aunque más adelante hablaremos de la introducción de módulos en NodeJS, es
necesario abordar un primer módulo imprescindible para la creación de un servidor
de HTTP. Este es el módulo http.
Las interfaces HTTP en Node están diseñadas para soportar muchas de las
características del protocolo que tradicionalmente han sido difíciles de usar. En
particular, los mensajes grandes, seguramente fragmentado. La interfaz se asegura de
que las peticiones o respuestas nunca se almacenen completamente en un búfer--se
permite al usuario hacer stream de datos. Las cabeceras de los mensajes HTTP se
representan por un objeto como este:

Para soportar el espectro completo de las posibles aplicaciones HTTP, la API HTTP de

Node es de muy bajo nivel. Se encarga únicamente de manejar el stream y del parsing
del mensaje. Parsea el mensaje en sus cabeceras y body pero no parsea las cabeceras o
el body.

Manipulación de peticiones
Para poder realizar la manipulación de peticiones es necesario instalar el módulo de
express en nuestra aplicación. Pero, ¿para qué sirve este módulo y que es lo que nos
ofrece?
¿Qué es el módulo express?
Express es un módulo de NodeJS que se puede instalar a través de la herramienta npm.
En una definición exacta sería: el framework que se lanza sobre un servidor http de
NodeJS para manipular las rutas y dar acceso de un modo sencillo al cliente para
acceder al ciclo de vida de la aplicación.
Creando rutas
Las rutas nos permiten direccionar peticiones a los controladores correctos.
Vamos a empezar agregando el código de un controlador para una ruta:

Si corremos nuestra app en la consola (parados en directorio de la aplicación) node

app.js y vamos a "http://localhost:3000/" en nuestro explorador de preferencia, debemos
ver el mensaje "¡Hola, Express!"
Recibiendo parámetros
Si queremos recibir algún parámetro en una ruta debemos especificar en el String el
nombre del parámetro son ":" adelante:

Ahora si corremos la app y vamos a "http://localhost:3000/users/oscar" veremos que se

despliega el mensaje "¡Hola, Òscar!".
Recibiendo POST
También podemos recibir requests de tipo POST de la siguiente manera:
Antes de correr este código debemos agregar bodyParser fuera del método, porque
express no parsea el cuerpo del request por defecto:

Ahora podemos hacerle un post desde cualquier app que nos permita hacerlo. Se puede
utilizar una extensión de Chrome llamada Postman, desde ahí le podemos enviar lo
siguiente a "http://localhost:3000/users":

Usando expresiones regulares como ruta

También podemos usar expresiones regulares como rutas, por ejemplo, podríamos
usar "/\/users\/(\d*)\/?(edit)?/" como una ruta, especificando así que debe haber un
dígito en el medio y que la palabra "edit" es opcional.

Si corremos la app y vamos a "http://localhost:3000/personal/15" veremos que se

despliega el mensaje "Viendo el perfil del empleado #15", y si agregamos "/edit" al final
veremos que el mensaje cambia a "Editando el perfil del empleado #15".
J.K.A.T