Introducción a JavaScript

¿Qué es JavaScript?

JavaScript es un lenguaje de programación orientado a objetos, utilizado para acceder a objetos en los documentos HTML. Principalmente, se utiliza integrado en un navegador Web permitiendo el desarrollo de interfaces de usuario mejoradas y páginas Web dinámicas. JavaScript se ejecuta en el navegador o también llamado agente de usuario, al mismo tiempo que las instrucciones van descargándose junto con el código HTML.

¿Qué es DHTML?

El HTML Dinámico o DHTML (del inglés Dynamic HTML) designa el conjunto de técnicas que permiten crear sitios Web interactivos utilizando una combinación de lenguaje HTML estático, un lenguaje en agente de usuario como JavaScript, el lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de objetos de un DOM (Document Object Model).

Una página de HTML Dinámico es una página Web en la que los scripts en el navegador, cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario.

¿Qué es el DOM?

El Document Object Model , abreviado DOM, es esencialmente una interfaz de programación de aplicaciones que proporciona un conjunto estándar de objetos para representar documentos HTML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas escritos en JavaScript pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML.

Referencia a los Objetos del DOM

El DOM define la manera en que los objetos y elementos se relacionan entre sí en el navegador y el documento HTML. En el lenguaje de programación JavaScript, cada objeto tiene un nombre, el cual es exclusivo y único. Cuando existen más de un objeto del mismo tipo en un documento Web, estos se organizan en un Arreglo. Algunos nombres de objetos comunes son los siguientes:

window, html, document, body, div, p

Prácticamente se pueden manipular todas las etiquetas HTML usando JavaScript, mediante el modelo de objeto DOM.

¿Como interactúa JavaScript con el documento?

1) El navegador recibe el documento que tiene las etiquetas HTML

<!DOCTYPE html>

<head>

<title>My Title</title>

</head>

<body>

<h1>My Header</h1>

</body>

</html

2) El navegador mediante estas etiquetas forma el DOM. La estructura en árbol de un documento HTML permite observar la jerarquía de los elementos en el DOM.

3) JavaScript puede interactuar con el DOM para tener acceso a los elementos y a su contenido. JavaScript también permite crear o aumentar elementos. Cuando JavaScript modifica el DOM, el navegador actualiza la página dinámicamente para que se pueda ver el nuevo contenido de la página.

Ejercicio propuesto

Utilizando el siguiente documento HTML, cree el árbol del DOM

<!doctype html>

<head>

</head>

<body>

<h2>Avistamiento de aves</h2>

<p>

Hoy vi algunos patos salvajes.

</p>

<p>

Tome fotos a alguno de ellos...

</p>

</div>

</body>

</html>

Incorporando código JavaScript

Siguiendo los mismos lineamientos que en CSS, existen tres técnicas para incorporar código JavaScript dentro de HTML. Sin embargo, al igual que en CSS, solo la inclusión de archivos externos es la recomendada a usar en HTML5.

· Código en línea

· Código embebido

· Código en archivo externo

En línea

Esta es una técnica simple para insertar JavaScript en nuestro documento que se aprovecha de atributos disponibles en elementos HTML. Estos atributos son manejadores de eventos que ejecutan código de acuerdo a la acción del usuario. Los manejadores de eventos más usados son, en general, los relacionados con el ratón, como por ejemplo onclick, onMouseOver, u onMouseOut. Sin embargo, encontraremos sitios web que implementan eventos de teclado y de la ventana, ejecutando acciones luego de que una tecla es presionada o alguna condición en la ventana del navegador cambia (por ejemplo, onload u onfocus).

Ejercicio:

Copie el siguiente código en el editor HTML y guárdelo como js-enlinea.html, ábralo en el navegador Web.

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<p onclick=”alert(‘hizo clic!’)”>Hacer Clic</p>

<p>No puede hacer clic</p>

</div>

</body>

</html>

Usando el manejador de eventos onclick, un código es ejecutado cada vez que el usuario hace clic con el ratón sobre el texto que dice “Hacer Clic”. Lo que el manejador onclick está diciendo es algo como: “cuando alguien haga clic sobre este elemento ejecute este código” y el código en este caso es una función predefinida en JavaScript que muestra una pequeña ventana con el mensaje “hizo clic!”.

Cambie el manejador onclick por onMouseOver, por ejemplo, y verá cómo el código es ejecutado solo pasando

el puntero del ratón sobre el elemento.

Embebido

Para trabajar con códigos extensos y funciones personalizadas debemos agrupar los códigos en un mismo lugar entre etiquetas <script>. El elemento <script> actúa exactamente igual al elemento <style> usado para incorporar estilos CSS. Nos ayuda a organizar el código en un solo lugar, afectando a los elementos HTML por medio de referencias. Del mismo modo que con el elemento <style>, en HTML5 no debemos usar ningún atributo para especificar lenguaje. Ya no es necesario incluir el atributo type en la etiqueta <script>. HTML5 asigna JavaScript como lenguaje por defecto.

Ejercicio:

Copie el siguiente código en el editor HTML guárdelo con el nombre js-embebido.html y ábralo en el navegador Web.

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

function mostraralerta(){

alert('hizo clic!');

}

function hacerclic(){

document.getElementsByTagName('p')[0].onclick=mostraralerta;

}

window.onload=hacerclic;

</script>

</head>

<body>

<p>Hacer Clic</p>

<p>No puede hacer Clic</p>

</div>

</body>

</html>

Haga clic en el texto “Hacer clic”, se abrirá una cuadro de diálogo. Si hace clic en el texto “No puede hacer clic” no pasará nada.

El elemento <script> y su contenido pueden ser posicionados en cualquier lugar del documento, dentro de otros elementos o entre ellos. Para mayor claridad, recomendamos siempre colocar sus códigos JavaScript en la cabecera del documento y luego referenciar los elementos a ser afectados usando los métodos JavaScript apropiados para ese propósito.

Archivos externos

Códigos embebidos incrementan el tamaño de nuestros documentos y los hacen repetitivos (cada documento debe volver a incluir los mismos códigos). Para reducir los tiempos de descarga, incrementar nuestra productividad y poder distribuir y reusar nuestros códigos en cada documento sin comprometer eficiencia, recomendamos grabar todos los códigos JavaScript en uno o más archivos externos y llamarlos usando el atributo src:

Ejercicio:

Copie el siguiente código en el editor HTML guárdelo con el nombre js-externo.html

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

<p>Hacer Clic</p>

<p>No puede hacer Clic</p>

</div>

</body>

</html>

El elemento <script> en el listado carga los códigos JavaScript desde un archivo externo llamado micodigo.js. De ahora es posible insertar nuestros códigos en este archivo y luego incluir el mismo en cualquier documento de nuestro sitio web que lo necesite. Desde la perspectiva del usuario, esta práctica reduce tiempos de descarga y acceso a nuestro sitio web, mientras que para nosotros simplifica la organización y facilita el mantenimiento.

Copie el siguiente código en el editor HTML guárdelo con el nombre micodigo.js

function mostraralerta(){

alert('hizo clic!');

}

function hacerclic(){

document.getElementsByTagName('p')[0].onclick=mostraralerta;

}

window.onload=hacerclic;

JavaScript Orientado a Objetos

JavaScript es un lenguaje orientado a objetos y como tal, tiene todas las características de un lenguaje basado este paradigma.

Los objetos son entidades que tienen un determinado estado, comportamiento (método) e identidad:

· El estado está compuesto de datos o informaciones; serán uno o varios atributos a los que se habrán asignado unos valores concretos (datos).

· El comportamiento está definido por los métodos o mensajes a los que sabe responder dicho objeto, es decir, qué operaciones se pueden realizar con él.

· La identidad es una propiedad de un objeto que lo diferencia del resto; dicho con otras palabras, es su identificador (concepto análogo al de identificador de una variable o una constante).

Un objeto contiene toda la información que permite definirlo e identificarlo frente a otros objetos pertenecientes a otras clases e incluso frente a objetos de una misma clase, al poder tener valores bien diferenciados en sus atributos. A su vez, los objetos disponen de mecanismos de interacción llamados métodos, que favorecen la comunicación entre ellos. Esta comunicación favorece a su vez el cambio de estado en los propios objetos. Esta característica lleva a tratarlos como unidades indivisibles, en las que no se separa el estado y el comportamiento.

Los métodos (comportamiento) y atributos (estado) están estrechamente relacionados por la propiedad de conjunto. Esta propiedad destaca que una clase requiere de métodos para poder tratar los atributos con los que cuenta. El programador debe pensar indistintamente en ambos conceptos, sin separar ni darle mayor importancia a alguno de ellos. Hacerlo podría producir el hábito erróneo de crear clases contenedoras de información por un lado y clases con métodos que manejen a las primeras por el otro. De esta manera se estaría realizando una programación estructurada camuflada en un lenguaje de programación orientado a objetos.

Objetos, métodos y eventos

document.getElementsByTagName('p')[0].onclick=mostraralerta;

En esta línea de código, document es el objeto y getElementByTagName es el método. Los métodos pueden recibir parámetros. En este caso el parámetro es el nombre de una etiqueta, la <p>. Como parámetro solo hay que escribir el nombre de la etiqueta encerrado entre comillas simples.

El número entre corchetes está haciendo referencia a la primera etiqueta <p> encontrada en el documento. La numeración de las etiquetas inicia con cero para el primero encontrado, uno para el segundo, y así sucesivamente.

onclick, es un evento, y mostraralerta es una función de usuario. En resumen, esta línea de código lo que hace es ejecutar la función mostraralerta cuando el usuario haga clic sobre el primer párrafo del documento.

Java vs JavaScript

Diferencias y similitudes

Compilador. Para programar en Java necesitamos un Kit de desarrollo y un compilador. Sin embargo, JavaScript no es un lenguaje que necesite que sus programas se compilen, sino que éstos se interpretan por parte del navegador cuando éste lee la página.

Orientado a objetos. Java es un lenguaje de programación orientado a objetos. JavaScript no es del todo orientado a objetos, esto quiere decir que podremos programar sin necesidad de crear clases, tal como se realiza en los lenguajes de programación estructurada como C.

Propósito. Java es mucho más potente que JavaScript, esto es debido a que Java es un lenguaje de propósito general, con el que se pueden hacer aplicaciones de lo más variado, sin embargo, con JavaScript sólo podemos escribir programas para que se ejecuten en páginas web.

Estructuras fuertes. Java es un lenguaje de programación fuertemente tipado, esto quiere decir que al declarar una variable tendremos que indicar su tipo y no podrá cambiar de un tipo a otro automáticamente. Por su parte Javascript no tiene esta característica, y podemos meter en una variable la información que deseemos, independientemente del tipo de ésta. Además, podremos cambiar el tipo de información de una variable cuando queramos.

Otras características. Como vemos Java es mucho más complejo, aunque también más potente, robusto y seguro. Tiene más funcionalidades que JavaScript y las diferencias que los separan son lo suficientemente importantes como para distinguirlos fácilmente.

Usos comunes de JavaScript

· Colocar texto dinámicamente en los documentos

· Atrapar eventos de usuario para responder a ellos. Como por ejemplo un clic efectuado sobre un objeto.

· Leer y cambiar el contenido de un elemento HTML en el documento.

· Validación de datos a nivel de agente de usuario.

· Detección del agente de usuario utilizado por el navegante.

· Puede ser usado para crear cookies, para almacenar y recuperar información de los usuarios que visitan una página.

Referencia del lenguaje JavaScript

Agregar comentarios

Utilice // para comentarios de una sola línea de texto.

Para bloques de texto utilice /* */

// Mostrar encabezado

document.write("<h1>Estos es título 1</h1>"); // Muestra el texto en h1

/* Esto es un

bloque de

texto para un

comentario */

Declaración de variables

Las variables deben ser declaradas con var. Las variables declaradas están vacías. El tipo de dato de la variable dependerá del tipo de dato asignado.

Las variables pueden declarase y asignárseles un valor

JavaScript diferencia los nombres de las variables escritas con caracteres mayúsculas y minúsculas.

// Declaración de variables

var x,y,z;

var p=10, j=20; // Declaración y asignación

var t=5, T=15; // Dos variables diferentes

var nombre=“Luis” // Asignación de un string (cadena)

Construcción de arreglos

Un arreglo es un conjunto ordenado de valores asociados con un único nombre de variable. El objeto global de JavaScript Array es un constructor para arreglos, que son objetos tipo lista de alto nivel

// Construcción de Arreglos en varias formas

var autos = ["Saab", "Volvo", "BMW"]; //forma 1

var autos = new Array("Saab", "Volvo", "BMW"); // forma 2

var points = new Array(40); //forma 3 - Crea arreglo de 40 elementos no definidos

// Elementos de arreglo pueden contener tipos de datos mixtos

var personas = ["John", "Doe", 46];

// Los indices del arreglo pueden ser literales

var personas = {firstName:"John", lastName:"Doe", age:46};

// Propiedades y métodos de los arreglos

var x = cars.length; // propiedad length cuenta la cantidad de elementos

var y = cars.sort(); // método sort(), Ordena el arreglo

// Acceso a los datos del arreglo

document.write(cars[1]); // Muestra volvo

document.write(personas.firstName); //muestra John

cars[cars.length] = "Chevrolet"; // agrega Chevrolet al arreglo

Operadores aritméticos

Operadores de asignación

Operador para encadenar Strings (cadenas)

El operador: +

// Encadenamiento de Strings

var c, a=“hola,” b=“Todos”

var d=5;

c = a + “ “ + b;

document.write("Resultado de c:" + c);

// Encadenar un string con un número, el resultado es un string

document.write("Resultado de c + d = " + c + d);

Operadores relacionales

Operadores Lógicos

Operador condicional

El operador condicional permite asignar un valor a una variable de acuerdo al valor lógico de una condición: ?

// Operador condicional

var a=10, b=20, c;

c = (a > b) ? 50: 100;

document.write("Resultado de c = "+ c); // La salida será 100

Sentencia condicional

La estructura de la sentencia condicional es igual a la del lenguaje C.

// Sentencia condicional If

/* Si el tiempo es menor a 12 obtendrá un saludo de Buenos Días de

lo contrario obtendrá un mensaje de Buenas Tardes */

var time = 15;

if (time < 12) {

document.write("Buenas Días!");

} else {

document.write("Buenas Tardes!");

}

Estructura de control switch

// Estructura de control switch

var dia = 2;

switch (dia) {

case 1: document.write("Es lunes");

break;

case 2: document.write("Es martes");

break;

}

Estructura de control lazos do … while

// Estructura de control do .. while

var i = 0;

do {

document.write("El número es " + i);

document.write("<br />");

i++;

}

while (i < 5);

Estructura de control lazos while

// Estructura de control while

var n = 0;

while (n < 10) {

document.write("El número es " + n);

document.write("<br />");

n++;

}

Estructura de control de lazos for

// Estructura de control for

// Mostrar como salida la lista de números del 0 al 5

var i=0;

for (i=0;i<=5;i++) {

document.write("El número es " + i);

document.write("<br />");

}

Funciones de usuario

Definición de una función de usuario. El nombre de la función debe seguir las mimas reglas para nombrar variables.

// Defincicion de una funcion

var x=10,y=20;

function suma(a,b) {

return a+b;

}

document.write(suma(x,y); // Salida 30

Referencia completa del lenguaje:

Para una referencia completa del lenguaje visite la página:

http://www.w3schools.com/jsref/default.asp

Ejercicios propuestos:

Para elaborar los siguientes ejercicios, utilice el siguiente código HTML y JavaScript como plantilla.

Código HTML

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

</head>

<body>

</body>

</html>

Código JavaScript

function salida() {

// Escriba su código aquí

// utilice document.write () para imprimir

}

window.onload = salida();

1. Escriba un programa que muestre la tabla de multiplicar del 2, del 1 al 20

2. Escriba un programa que tenga una función contar_vocales( ). Esta función debe recibir como parámetro un String (cadena) y devolver el número de vocales encontradas. Sugerencia: Utilice el método CharAt( ) y la estructura switch.

3. Se tiene dos listas de números L1 y L2. L1 tiene los siguientes elementos: 3,4,5,8,1 y L2 los siguientes: 7,9,15,3,8. Se quiere crear una tercera lista con el resultado de la suma de cada elemento. L3(n) = L1(n)+L2(n)

4. Se quiere elaborar una función para cifrar una palabra de texto (string). El algoritmo para cifrar, consiste en tomar cada letra (carácter) de la palabra y convertirlo a su número decimal ASCII respectivo, luego sumarle 4 a ese número y convertirlo de vuelta al carácter correspondiente. Por ejemplo para la palabra “ABCDE”, el número decimal ASCII de cada carácter será: 65 66 67 68. Al sumarles a cada uno el número cuatro, obtenemos el siguiente resultado: 69 70 71 72. Convertimos este número ASCII a su carácter correspondiente y finalmente obtenemos: E F G H.

5. Escriba un programa que almacene en un arreglo sólo número pares, y muestre su contenido.

Nuevos selectores:

Como vimos anteriormente, los elementos HTML tienen que ser referenciados desde Javascript para ser afectados por el código. Los métodos getElementById, getElementsByTagName y getElementsByClassName no son suficientes para contribuir a la integración que este lenguaje necesita Ahora es posible seleccionar elementos HTML aplicando toda clase de selectores CSS por medio de los nuevos métodos querySelector() y querySelectorAll().

querySelector()

Este método retorna el primer elemento que concuerda con el grupo de selectores especificados entre paréntesis. Los

selectores son declarados usando comillas y la misma sintaxis CSS, como en el siguiente ejemplo:

function hacerclic(){

document.querySelector("#principal p:firstchild").onclick=mostraralerta;

}

function mostraralerta(){

alert('hizo clic!');

}

window.onload=hacerclic;

El método getElementsByTagName usado anteriormente ha sido reemplazado por querySelector(). Los selectores para esta consulta en particular están referenciando al primer elemento <p> que es hijo del elemento identificado con el atributo id y el valor main.

Debido a que ya explicamos que este método solo retorna el primer elemento encontrado, probablemente notará que la

pseudo clase first-child es redundante. El método querySelector() en este ejemplo retornará el primer elemento <p> dentro de <div> que es, por supuesto, su primer hijo. El propósito de este ejemplo es mostrarle que querySelector() acepta toda clase de selectores válidos CSS y ahora, del mismo modo que en CSS, Javascript también provee herramientas importantes para referenciar cada elemento en el documento.

Varios grupos de selectores pueden ser declarados separados por coma. El método querySelector() retornará el

primer elemento que concuerde con cualquiera de ellos.

Ejercicio propuesto

Reemplace el código en el archivo micodigo.js por el provisto a continuación y abra el archivo js-externo.html en el navegador para ver el método querySelector() en acción.

querySelectorAll()

En lugar de uno, el método querySelectorAll() retorna todos los elementos que concuerdan con el grupo de selectores declarados entre paréntesis. El valor retornado es un arreglo (array) conteniendo cada elemento encontrado en el orden en el que aparecen en el documento.

function hacerclic(){

var lista=querySelectorAll("#principal p”);

lista[0].onclick=mostraralerta;

}

function mostraralerta(){

alert('hizo clic!');

}

window.onload=hacerclic;

El grupo de selectores especificados en el método querySelectorAll() encontrará cada elemento <p> en el documento HTML js-externo.html que es hijo del elemento <div>. Luego de la ejecución de esta primera línea, el array lista tendrá dos valores: una referencia al primer elemento <p> y una referencia al segundo elemento <p>. Debido a que el índice de cada array comienza por 0, en la próxima línea el primer elemento encontrado es referenciado usando corchetes y el valor 0 (lista[0]).

Note que este ejemplo no muestra el potencial de querySelectorAll(). Normalmente será utilizado para afectar a varios elementos y no solo uno, como en este caso. Para interactuar con una lista de elementos retornados por este método, podemos utilizar un lazo for:

function hacerclic(){

var lista=document.querySelectorAll(“#principal p”);

for(var f=0; f<lista.length; f++){

lista[f].onclick=mostraralerta;

}

function mostraralerta(){

alert('hizo clic!');

}

window.onload=hacerclic;

En este código, en lugar de seleccionar solo el primer elemento encontrado, registramos el manejador de eventos onclick para cada uno de ellos usando un bucle for. Ahora, todos los elementos <p> dentro de <div> mostrarán una pequeña ventana cuando el usuario haga clic sobre ellos.

El método querySelectorAll(), al igual que querySelector(), puede contener uno o más grupos de selectores separados por coma. Éstos y los demás métodos estudiados pueden ser combinados para referenciar elementos a los que resulta difícil llegar.

Manejadores de eventos

Como comentamos anteriormente, el código Javascript es normalmente ejecutado luego de que el usuario realiza alguna acción. Estas acciones y otros eventos son procesados por manejadores de eventos y funciones Javascript asociadas con ellos.

Existen tres diferentes formas de registrar un evento para un elemento HTML: podemos agregar un nuevo atributo al elemento, registrar un manejador de evento como una propiedad del elemento o usar el nuevo método estándar addEventListener().

Conceptos básicos: En Javascript las acciones de los usuarios son llamadas eventos. Cuando el usuario realiza una acción, como un clic del ratón o la presión de una tecla, un evento específico para cada acción y cada elemento es disparado. Además de los eventos producidos por los usuarios existen también otros eventos disparados por el sistema (por ejemplo, el evento load que se dispara cuando el documento es completamente cargado). Estos eventos son manejados por códigos o funciones. El código que responde al evento es llamado manejador. Cuando registramos un manejador lo que hacemos es definir cómo nuestra aplicación responderá a un evento en particular. Luego de la estandarización del método addEventListener(), este procedimiento es usualmente llamado “escuchar al evento”, y lo que hacemos para preparar el código que responderá a ese evento es “agregar una escucha” a un elemento en particular.

Manejadores de eventos en línea

Ya utilizamos esta técnica en el código del archivo js-enlinea.html, incluyendo el atributo onclick en el elemento <p> (revise este código

para comprobar cómo se aplica). Se trata simplemente de utilizar los atributos provistos por HTML para registrar eventos para

un elemento en particular.

Manejadores de eventos como propiedades

Para evitar las complicaciones de la técnica en línea (inline), debemos registrar los eventos desde el código Javascript. Usando selectores Javascript podemos referenciar el elemento HTML y asignarle el manejador de eventos que queremos como si fuese una propiedad. En el código del archivo js-embebido.html encontrará esta técnica puesta en práctica. Dos manejadores de eventos fueron asignados como propiedades a diferentes elementos. El manejador de eventos onload fue registrado para la ventana usando window.onload, y el manejador de eventos onclick fue registrado para el primer elemento <p> encontrado en el documento con la línea de código document.getElementsByTagName('p')[0].onclick.

Conceptos Básicos: Los nombres de los manejadores de eventos son construidos agregando el prefijo on al nombre del evento. Por ejemplo, el nombre del manejador de eventos para el evento click es onclick. Cuando estamos hablando sobre onclick usualmente hacemos referencia al código que será ejecutado cuando el evento click se produzca

Antes de HTML5, esta era la única técnica disponible para usar manejadores de eventos desde Javascript que funcionaba en todos los navegadores. Algunos fabricantes de navegadores estaban desarrollando sus propios sistemas, pero nada fue adoptado por todos hasta que el nuevo estándar fue declarado. Por este motivo recomendamos utilizar esta técnica por razones de compatibilidad, pero no la sugerimos para sus aplicaciones HTML5.

El método addEventListener()

Es la técnica ideal y la que es considerada como estándar por la especificación de HTML5. Este método tiene tres argumentos: el nombre del evento, la función a ser ejecutada y un valor booleano (falso o verdadero) que indica cómo un evento será disparado en elementos superpuestos.

Escriba el siguiente código en el editor HTML, gúardelo como js-addeventlistener.html

<!DOCTYPE html>

<head>

<title>Este texto es el título del documento</title>

function mostraralerta(){

alert('hizo clic!');

}

function hacerclic(){

var elemento=document.getElementsByTagName('p')[0];

elemento.addEventListener(‘click’, mostraralerta, false);

}

window.addEventListener(‘load’, hacerclic, false);

</script>

</head>

<body>

<p>Hacer Clic</p>

<p>No puede hacer Clic</p>

</div>

</body>

</html>

Este código presenta los mismo que el códig del archivo js-embebido.html, pero ahora una escucha fue agregada para cada evento usando el método addEventListener(). Para organizar el código en la función hacerclic(), asignamos la referencia al elemento a una variable llamada elemento y luego agregamos la escucha para el evento click usando esa variable.

Analizando la sintaxis del método addEventListener(), el primer atributo es el nombre del evento. El segundo es la función a ser ejecutada, la cual puede ser una referencia a una función (como en este caso). El tercer atributo especificará, usando true (verdadero) o false (falso), cómo múltiples eventos serán disparados. Por ejemplo, si estamos escuchando al evento click en dos elementos que se encuentran anidados (uno dentro de otro), cuando el usuario hace clic sobre estos elementos dos eventos click son disparados en un orden que depende de este valor. Si el atributo es declarado como true para uno de los elementos, entonces ese evento será considerado primero y el otro luego. Normalmente el valor false es el más adecuado para la mayoría de las situaciones.

API (Application Program Interface)

Si cuenta con alguna experiencia en programación, le resultará fácil reconocer la cantidad de código necesario para realizar tareas sencillas. Ahora imagine todo el trabajo que debería hacer para construir un sistema de bases de datos desde cero, o generar gráficos complejos en la pantalla, o crear una aplicación para manipulación de imágenes, por nombrar unos pocos.

Javascript es tan poderoso como cualquier otro lenguaje de desarrollo en este momento. Posee librerías para crear elementos gráficos, motores 3D para video juegos o interfaces para acceder a bases de datos, Javascript cuenta con APIs para ayudar a los programadores a lidiar con actividades complejas.

HTML5 introduce varias APIs (interfaces de programación de aplicaciones) para proveer acceso a poderosas librerías desde simple código Javascript.

Canvas

Canvas es una API gráfica que provee una básica pero poderosa superficie de dibujo. La posibilidad de generar e imprimir gráficos en pantalla, crear animaciones o manipular imágenes y videos (combinado con la funcionalidad restante de HTML5) abre las puertas para lo que nos podamos imaginar. Canvas genera una imagen con pixeles que son creados y manipulados por funciones y métodos provistos específicamente para este propósito.

Drag and Drop

Drag and Drop incorpora la posibilidad de arrastrar y soltar elementos en la pantalla como lo haríamos comúnmente en aplicaciones de escritorio. Ahora, con unas pocas líneas de código, podemos hacer que un elemento esté disponible para ser arrastrado y soltado dentro de otro elemento en la pantalla. Estos elementos pueden incluir no solo gráficos sino además textos, enlaces, archivos o datos en general.

Geolocation

Geolocation es utilizada para establecer la ubicación física del dispositivo usado para acceder a la aplicación. Existen varios métodos para acceder a esta información, desde señales de red hasta el Sistema de Posicionamiento Global (GPS). Los valores retornados incluyen latitud y longitud, posibilitando la integración de esta API con otras como Google Maps, por ejemplo, o acceder a nformación de localización específica para la construcción de aplicaciones prácticas que trabajen en tiempo real.

Storage

Dos APIs fueron creadas con propósitos de almacenamiento de datos: Web Storage e Indexed Database. Básicamente, estas APIs transfieren la responsabilidad por el almacenamiento de datos del servidor al ordenador del usuario, pero en el caso de Web Storage y su atributo sessionStorage, esta incorporación también incrementa el nivel de control y la eficiencia de las aplicaciones web.

Web storage es responsable por mantener consistencia sobre la duración de la sesión de una página web y preservar información temporal como el contenido de un carro de compras, asegurando los datos en caso de accidente o mal uso (cuando la aplicación es abierta en una segunda ventana, por ejemplo).

LocalStorage nos permite grabar contenidos extensos de información en el ordenador del

usuario. La información almacenada es persistente y no expira, excepto por razones de seguridad. Ambos atributos, sessionStorage y localStorage reemplazan la anterior función del sistema de cookies y fueron creados para superar sus limitaciones.

Indexed Database o IndexedDB La función elemental de un sistema de base de datos es la de almacenar información indexada. Web Storage API trabaja sobreel almacenamiento de grandes o pequeñas cantidades de información, datos temporales o permanentes, pero no datos estructurados. Esta es una posibilidad solo disponible para sistemas de base de datos y la razón de la existencia de esta

API.

File

Bajo el título de File, HTML5 ofrece varias APIs destinadas a operar con archivos. En este momento existen tres disponibles:

File, File: Directories & System, y File: Writer. Gracias a este grupo de APIs, ahora podemos crear y procesar archivos en el ordenador del usuario.

Communication

Algunas API tienen un denominador común que nos permite agruparlas juntas. Este es el caso para XMLHttpRequest Level

2, Cross Document Messaging, y Web Sockets. Permiten la comunicación entre la aplicación cliente y servidor de manera transparente sin la necesidad de recargar la página.

Web Workers

Esta es una API única que expande Javascript a un nuevo nivel. Este lenguaje no es un lenguaje multitarea, lo que significa que solo puede hacerse cargo de una sola tarea a la vez. Web Workers provee la posibilidad de procesar código detrás de escena (ejecutado aparte del resto), sin interferir con la actividad en la página web y del código principal. Gracias a esta API Javascript ahora puede ejecutar múltiples tareas al mismo tiempo.

History

Ajax cambió la forma en la que los usuarios interactúan con sitios y aplicaciones web. Y los navegadores no estabanpreparados para esta situación. History fue implementada para adaptar las aplicaciones modernas a la forma en que los navegadores hacen seguimiento de la actividad del usuario. Esta API incorpora técnicas para generar artificialmente URLs por cada paso en el proceso, ofreciendo la posibilidad de retorna a estados previos de la aplicación utilizando procedimientos.

Offline

Incluso hoy día, con acceso a Internet en cada lugar que vamos, quedar desconectado es aún posible. Dispositivos portátiles se encuentran en todas partes, pero no la señal para establecer comunicación. Y los ordenadores de escritorio también pueden dejarnos desconectados en los momentos más críticos. Con la combinación de atributos HTML, eventos controlados por Javascript y archivos de texto, Offline permitirá a las aplicaciones trabajar en línea o desconectados, de acuerdo a la situación del usuario.

Librerías externas o Frameworks

HTML5 fue desarrollado para expandir la web utilizando un set de tecnologías estándar que todo navegador pueda entender y procesar. Y fue creado para proveer todas las herramientas que un desarrollador necesita. De hecho, HTML5 fueconceptualizado para no depender de tecnologías de terceras partes. Pero por una razón u otra siempre necesitaremos contar con ayuda extra.

Antes de la aparición de HTML5, varias librerías Javascript fueron desarrolladas para superar las limitaciones de las tecnologías disponibles al momento. Algunas de estas librerías tenían propósitos específicos (desde procesamiento y validación de formularios hasta generación y manipulación de gráficos). Algunas se volvieron extremadamente populares y otras son casi imposibles de imitar por desarrolladores independientes (como es el caso de Google Maps).

Incluso cuando futuras implementaciones provean mejores métodos o funciones, los programadores siempre encontrarán una manera más fácil de lidiar con un asunto determinado. Librerías desarrolladas por terceros que facilitan tareas complicadas siempre estarán vivas y creciendo en número.

Estas librerías no son parte de HTML5 pero son una parte importante de la web y algunas de ellas son actualmente usadas en sitios web y aplicaciones exitosas:

· Angula.js

· Backbone

· Ember

· JQuery