Código JavaScript en el elemento script

Se puede escribir código JavaScript en el contenido del elemento script, el cual debe ser hijo directo de head o body. El siguiente ejemplo muestra los cuadrados de los primeros 20 números naturales:

   
Cuadrados naturales
   

]]>

Mientras el navegador está cargando un documento web, va mostrando sus elementos (títulos, párrafos, imágenes, tablas, etc.), a medida que los encuentra. Lo mismo pasa con los scripts. Inmediatamente que el navegador encuentra un elemento script, ejecuta su código.

En el ejemplo del js_square_list_1, se invoca al método write() del objeto document que representa al documento ante JavaScript. El método document.write() recibe una lista de valores separados por coma y su salida es insertada como código HTML inmediatamente después del elemento script que lo invoca, es decir, su invocación altera la estructura del documento. Una vez que el script ha terminado su ejecución, el navegador continúa procesando el resto del documento como de costumbre, y procesará tanto el código provisto por el autor en el documento original como el código insertado con document.write() tras ejecutar el script.

Existen diferencias si el código JavaScript está en un documento HTML o XHTML. En XHTML el objeto document no dispone de un método write(), ya que XML prohíbe modificar el documento mientras éste se esté cargando [W3C]. Incluso en HTML, el uso de document.write() se considera ahora una pobre práctica de programación, sin embargo se utilizará en la primera parte de este capítulo por ser fácil de comprender. Si se incrusta código JavaScript en un documento XHTML que tiene caracteres especiales como menor que (<), mayor que (>), o ampersand (&), se debe encerrar en una sección CDATA:

]]>

Como se puede deducir del js_square_list_1, JavaScript interpreta el texto entre apóstrofes ('') y entre comillas ("") como cadenas de caracteres. Las variables no se declaran precedidas por su tipo de datos, sino por la palabra reservada var. Y el ciclo for tiene la misma sintaxis de C.

El elemento script tiene cinco atributos opcionales: type, src, charset, defer y async. El atributo type indica el lenguaje de programación utilizado por el script. Hasta la fecha sólo existe un lenguaje reconocido: JavaScript, y es el considerado por defecto en HTML5, por lo que el programador puede omitirlo, como se hará en el resto de este capítulo. Los demás atributos se estudiarán en la próxima sección.

Código JavaScript en un archivo externo

El elemento script permite escribir código JavaScript en su contenido, pero el Consorcio Web recomienda sacar el comportamiento del documento web a un recurso reutilizable, por convención, un archivo con extensión .js. Este es el segundo lugar donde se puede escribir código JavaScript. El mismo elemento script permite hacer la inclusión del archivo externo con el atributo src. El ejemplo del js_square_list_2_xhtml tiene el mismo efecto que el ejemplo del js_square_list_1. Es importante resaltar que un script debe tener contenido o un recurso externo en el atributo src, pero no ambos, de lo contrario generará un documento inválido en (X)HTML5.

   
Cuadrados naturales 2
   

]]>

\n');
for ( var n = 1; n <= 20; ++n )
   document.write('
', n, '2 = ', n * n, '
\n');
document.write('\n');
]]>

En HTML la etiqueta de cierre </script> es siempre requerida, aunque el contenido del script sea vacío; es decir, siempre se deben escribir de la forma <script src="archivo.js"></script>. En XHTML se puede tener una etiqueta vacía de la forma <script src="archivo.js"/>.

Cuando el código de un script se encuentra en un archivo externo, el atributo charset permite indicar la codificación empleada del archivo .js si ésta difiere de la codificación del documento (X)HTML. Los atributos defer y asinc permiten controlar en qué momento se debe ejecutar el script, como se indica en la js_script_defer_async.

]]>

]]>

]]>

Los atributos defer y async se pueden especificar únicamente cuando el script externo no haga uso de document.write(); ya que una invocación a este método obliga al navegador detener el cargado del documento, esperar a que el script termine de generar contenido, analizarlo (parse) y luego continuar con el resto del documento.

Código JavaScript en los eventos intrínsecos

El tercer lugar donde se puede especificar código JavaScript es en los eventos intrínsecos de ciertos elementos, tales como onload, onmouseover y onclick, como se ilustra en el js_intrinsic_events_ex1. Este código JavaScript es ejecutado únicamente si el evento es accionado. Los eventos intrínsecos se estudiarán más adelante en este capítulo.

   
Eventos en JavaScript
   Un botón!

]]>

Código JavaScript en el pseudoprotocolo javascript:

El cuarto lugar donde se puede ejecutar código JavaScript es en la barra de direcciones del navegador, en el destino de un enlace o cualquier otro lugar donde se pueda escribir un URL; con el pseudoprotocolo javascript:, que es seguido por una o varias instrucciones JavaScript separadas por punto y coma. El resultado de estas instrucciones, si lo hay, se toma como un string, y es desplegado en la ventana del navegador. Ejemplos:

javascript:5%2
javascript:x = 3; (x < 5) ? 'x is less' : 'x is greater'
javascript:d = new Date(); typeof d
javascript:for(i=0,j=1,k=0,fib=1; i>5; i++,fib=j+k,k=j,j=fib) alert(fib);
javascript:s=''; for(i in navigator) s+=i+':'+navigator[i]+'\n'; alert(s);

El pseudoprotocolo javscript: ha caído en desuso, y algunos navegadores como Chrome y Safari los ejecutan pero no reemplazan el documento actual por el resultado de la expresión, lo que produce la sensación de ser ignorados.

Números

JavaScript no hace diferencia entre números enteros y de punto flotante. Todos son representados internamente como punto flotante de 64bits (IEEE 754). Las constantes literales numéricas de JavaScript siguen las mismas convenciones de C, excepto los números octales que no son parte de ECMAScript. La js_numeric_literals muestra algunos ejemplos de constantes literales numéricas.

Cuando un valor flotante llega a ser más grande que el más grande de los representables, se almacena con el valor especial Infinity o su opuesto negativo. Cuando se hace una operación indefinida, se genera un número especial NaN (not-a-number), el cual nunca es igual a nada, incluso ni a él mismo, por eso debe usarse la función especial isNaN(). Otra función práctica es isFinite(), que prueba si un número no es Infinite y no es NaN. A continuación una lista de constantes numéricas especiales:

• Infinity. Valor especial usado en lugar de un número gigante que no cabe en un double de 64 bits, por ejemplo el resultado de la expresión 17/0.
• NaN. Acrónimo de "not-a-number". Es un valor especial usado cuando una expresión no genera un número válido, como la división 0/0 o tratar de convertir un string no apto a un número como parseInt("cinco").
• Number.MAX_VALUE. El número más grande representable en un double de 64 bits.
• Number.MIN_VALUE. El número decimal más pequeño (cercano a cero) representable en un double de 64 bits.
• Number.NaN. Igual a NaN.
• Number.POSITIVE_INFINITY. Igual a +Infinity.
• Number.NEGATIVE_INFINITY. Igual a -Infinity.

Cadenas de caracteres (strings)

Las cadenas literales en JavaScript se encierran entre comillas dobles o simples y se pueden anidar estos separadores dentro de la cadena. Ya que es común escribir código HTML dentro de JavaScript y viceversa, es conveniente que el desarrollador adquiera el hábito de uniformar las comillas para cada cual. El siguiente ejemplo utiliza comillas dobles para valores de atributos de (X)HTML y comillas simples para strings en JavaScript:

Thanks]]>

Igual que en C/C++, JavaScript emplea secuencias de escape iniciadas en backslash (\) para anular el efecto de un carácter especial del lenguaje de progamación, tales como \n para el cambio de línea, \r para el retorno de carro, \" para comillas dobles, \' para apóstrofe o comilla simple, \0 para el carácter nulo y \\ para la barra invertida (backslash). Se puede utilizar el backslash frente a un cambio de línea para continuar un string en varias líneas si el intérprete de JavaScript soporta EcmaScript 5, lo cual ocurre en la mayoría de navegadores modernos. El js_newline_scape muestra una cadena multilínea.

  var str = 'Cada una de estas líneas\n\
    tiene dos cambios de línea\n\
    el primero es parte del string,\n\
    el segundo es ignorado por JavaScript.'

  str = str.replace(/\t/g, '');
  document.write('
', str, '
');

]]>

La línea 7 del js_newline_scape emplea expresiones regulares para quitar los tabuladores que son parte del string, y el resultado es asignado al string mismo. Esta asignación debe hacerse obligatoriamente si se quiere reflejar el cambio en el string original, ya que todos los string en JavaScript son inmutables, es decir, ninguna operación puede modificar los caracteres de un string ya que son de sólo lectura.

En JavaScript las cadenas de caracteres o strings son un tipo de datos atómico, no un arreglo de caracteres. De hecho JavaScript no tiene el concepto de carácter (char) como sí ocurre en otros lenguajes de programación. Un carácter se representa como un string de longitud 1. El método str.charAt(i) permite obtener un string con el carácter que está en la posición i de str, donde el índice i está basado en cero, es decir, 0 representa el primer carácter de la cadena. El siguiente código muestra varias operaciones con strings:

var visitorName = 'Chema';
var str = 'Bienvenido ' + visitorName;       // concatenación de textos
var len = str.length;                        // longitud de cadena
var lastChar = str.charAt(str.length - 1);   // obtener un carácter de la cadena
var sub = str.substring(6, 4);               // obtiene 'nido'
var i = str.indexOf('e');                    // la posición de la primera letra 'e' en str (2)
var dbg = 'i = ' + i;                        // concatenación con conversión, genera 'i = 2'

El operador de suma (+) cuando alguno de sus operandos es una cadena, hace concatenación. En ECMAScript 5, el operador [] permite acceder a un carácter específico del string de la misma forma que el método str.charAt(). Debe tenerse claro que ambos retornan un nuevo string con el carácter solicitado, por lo que el original no se puede modificar.

Conversiones entre números y strings

Cuando un número aparece en un contexto donde se requiere un string, JavaScript lo convierte automáticamente. Por ejemplo, si uno de los operandos de + es una cadena y el otro es un número, el operador + actuará como el operador de concatenación y convertirá el número en una cadena, como se hace en la línea 3 del js_number_to_string_operator_plus.

', text, '
\n');]]>

Las conversiones explícitas se pueden hacer con el constructor String(numero), y varios métodos de la clase Number: numero.toString(base), numero.toFixed(decimales), numero.toExponential(decimales) y numero.toPrecision(decimales). Ejemplos:

En la dirección opuesta, cuando un string se utiliza en un contexto donde se requiere un número, será traducido automáticamente por JavaScript, por ejemplo:

var product = "21" * "2";  // product == 42.

Con la notación anterior no se podrá sumar un string a un número con el operador +, ya que será interpretado como concatenación. El constructor Number(str) convierte el string str en un número, siempre que str tenga formato de número en base 10 y no inicie con espacios en blanco. Las funciones globales parseInt(str,base) y parseFloat(str,base) son más flexibles, y asumen que str está en base base (10, si se omite) y lo convierten en un número entero o real respectivamente. Ejemplos:

Si la cadena a convertir inicia con "0x" se interpreta que está en hexadecimal. Si inicia con 0 su resultado es indefinido, ya que algunas implementaciones podría interpretar octal o decimal, por lo que es conveniente siempre especificar la base como segundo parámetro de parseInt(). Si no se puede convertir a un número, estas funciones retornan NaN.

Booleanos

Los valores booleanos sólo pueden contener los valores literales false o true. Cuando se usa un booleano en un contexto numérico, se convierten automáticamente a los valores respectivos 0 y 1. Si se usan en un contexto string, JavaScript los convierte implícitamente a las cadenas "false" y "true". Los valores especiales NaN, null, undefined y la cadena vacía ("") siempre se convierten a false; todos los demás a true (como Infinity). Para hacer explícita la conversión, es recomendable emplear la función constructora Boolean():

var x_as_boolean = Boolean(x);

Funciones

El programador puede declarar sus propias funciones con la palabra reservada function, el nombre opcional de la función, los parámetros sin tipos entre paréntesis ( ), y el cuerpo de la función entre llaves { }. Las funciones en JavaScript son un tipo de datos más, por ende, una función es un valor; así, las funciones se pueden almacenar en variables, miembros de objetos, arreglos, y pasarse por parámetros en una forma más natural que en C/C++. Cuando una función se asigna a un objeto como un miembro, recibe el nombre especial de método. En caso de asignarse a una variable, puede omitirse el nombre de la función, lo que en JavaScript se llama función literal o función lambda en homenaje al lenguaje Lisp que fue uno de los primeros en permitir funciones sin nombre:

Una tercera forma de definir una función es pasar sus argumentos y cuerpo como strings a la función constructora Function(), lo cual es poco usado e incluso, menos eficiente. Cuando el valor de una variable es una función, se puede invocar ésta usando el operador paréntesis () tras el nombre de la variable, como se hizo en la línea 11 del js_function_declaration_types con square2.

Objetos

Un objeto es una colección de valores nombrados, que usualmente se les refiere como propiedades, campos o miembros del objeto, y se les accede utilizando el operador punto. Por ejemplo:

image.width
image.height
document.myform.button
document.write("write es un método: una propiedad cuyo tipo de datos es una función");

El operador punto permite acceder a las propiedades utilizando identificadores. Pero JavaScript permite también usar cadenas de caracteres para acceder a las propiedades, con el operador corchetes []. Esta segunda notación es mucho más flexible ya las cadenas de caracteres pueden ser el resultado de evaluar una expresión. De esta forma, el operador corchetes permite emplear los objetos de JavaScript como arreglos asociativos, también llamados mapas (maps) o tablas de dispersion (hash). Ejemplos:

image["width"]
image["height"]
document["myform"]["button"]
document["write"]("write es un método: una propiedad cuyo tipo de datos es una función");

Los objetos se crean llamando funciones constructoras con el operador new, después de lo cual se usan como de costumbre. Estos objetos son almacenados en memoria dinámica por el navegador, el cual incorpora un recolector de basura (garbage collector), de tal forma que ahorra al programador la responsabilidad de liberar la memoria de cada objeto creado.

En la línea 4 del js_new_operator el objeto point se creó como un objeto vacío, y sus propiedades se fueron agregando luego con el operador de asignación (líneas 5 y 6). Existe una notación para definir objetos literales, con o sin propiedades, útil para inicializaciones:

Las llaves {} en una sección de declaración de variables (var) de JavaScript indican la creación de un objeto literal. Los nombres de las propiedades pueden declararse como identificadores (como se hizo con property1 en js_literal_object_notation) o como strings (como se hizo con "property2" en js_literal_object_notation). Los valores de cada propiedad pueden ser de cualquier tipo de datos de JavaScript (booleano, numérico, string, función, arreglo, u objeto), sea como valores literales o como resultado de una expresión aritmética. Cada propiedad debe separarse por una coma, y no por punto y coma. Las declaraciones de objetos literales se pueden anidar como se hizo con rectangle en el js_json_ex1.

La notación presentada en el js_json_ex1 para escribir objetos literales, es importante, y recibe el nombre de JavaScript Object Notation (JSON). Es ampliamente usada para representar datos y funciones que deben ser intercambiados entre el servidor web y el navegador, en bases de datos orientadas a documentos, y un número creciente de tecnologías. Más adelante se completará esta notación para representar arreglos.

Cada vez que JavaScript evalúa un objeto literal, se crea un objeto diferente, debido a que los valores de las propiedades pueden ser expresiones que cambian de una evaluación a otra, por ejemplo, en un ciclo. El js_literal_objects muestra un programa JavaScript que construye una tabla (X)HTML con una lista de personas ficticias generadas aleatoriamente a partir de un arreglo de nombres y apellidos. El programa consta de dos declaraciones de variables globales, cuatro declaraciones de funciones y una invocación de función (línea 37). Al ser invocada, la función imprimirPersonas() recibe el número deseado de personas y por cada una de ellas invoca a crearPersona(), la cual crea un objeto literal (líneas 13 a 17), lo almacena en una variable local, y luego retorna una referencia a dicho objeto. La función imprimirPersonas() recibe el objeto creado (línea 33) y lo pasa por parámetro a imprimirPersona() quien genera la línea correspondiente en la tabla. Es importante notar que en cada iteración del ciclo la evaluación del objeto literal (líneas 13 a 17) genera una persona distinta, y no el mismo objeto, incluso aunque el valor de sus propiedades no cambiaran.

', numero, '',persona.nombre,
      '', persona.edad, '', persona.ingreso, '');
}

// Crea e imprime en una tabla (X)HTML la cantidad solicitada de personas aleatorias
function imprimirPersonas(cantidad)
{
   document.write('');
   for ( var i = 1; i <= cantidad; ++i )
      imprimirPersona( crearPersona(), i );
   document.write('');
}

imprimirPersonas(300);
]]>

Si un objeto se emplea en un contexto booleano, se traduce a true si el objeto no es null. Si un objeto aparece en un contexto string se invocará su método toString() para hacer la conversión. Si un objeto aparece en un contexto numérico, JavaScript invocará valueOf() para hacer la conversión. El desarrollador puede sobrescribir estos métodos en sus propios objetos, lo cual es una práctica recomendada de programación.

Arreglos

En JavaScript un arreglo es una colección de datos enumerados. Se acceden con un índice entero, basado en 0, escrito entre corchetes tras el nombre del arreglo. El siguiente ejemplo obtiene el ancho en pixeles de la segunda imagen en el documento:

document.images[1].width

Los arreglos pueden tener datos heterogéneos, de cualquiera de los 7 tipos de datos de JavaScript. Así un elemento del arreglo puede contener otro arreglo. Los arreglos se crean con el constructor Array() y sus elementos se pueden agregar simplemente asignándolos a sus índices o bien, como parámetros del constructor Array(); pero si se pasa un único entero a este constructor, de la forma Array(N) se creará un arreglo con N elementos indefinidos. La propiedad length permite acceder al número de elementos en el arreglo. Ejemplos:

var a = new Array();                // Arreglo vacío, lo mismo que: var a = [];
a[0] = 1.2;                         // Un elemento es insertado en la posición 0
a[1] = "JavaScript";                // Un elemento es insertado en la posición 1
a[2] = true;
a[4] = { x:1, y:3 };                // La posición 3 tiene un elemento con el valor undefined
a[5] = function(x) { return x*x; }; // a[5](7) retornará 49
a[6] = new Array();                 // Elemento a[6] almacena un arreglo vacío
a[6][0] = -Infinity;                // Inserta un elemento en el arreglo que está en a[6]
console.log(a.length);              // Imprime la cantidad de elementos en el arreglo: 7

var b = new Array(1.2, "JavaScript", true, { x:1, y:3 });
console.log(b.length);              // 4 elementos

var c = new Array(10);              // Arrreglo de 10 elementos indefinidos
console.log(c.length);              // Imprime 10 y no 1

JavaScript permite crear arreglos literales, preferiblemente utilizados para inicialización, y son una lista de valores separados por comas dentro de corchetes, que se asignan secuencialmente empezando en 0. Los elementos también pueden ser indefinidos lo cual se logra omitiendo el valor entre comas:

var b = [ 1.2, "JavaScript", true, { x:1, y:3 } ];

var matrix = [[1,2,3], [4,5,6], [7,8,9]];           // matrix[2][1] == 8

var base = 1024;
var table = [base, base+1, base+2, base+3];

var sparseArray = [1,,,,5];

Valores especiales

El valor especial undefined indica que una variable u objeto fue declarado pero nunca se le ha asignado un valor, y en tal caso, JavaScript la inicializa con el valor especial undefined. Si una función no retorna un valor, JavaScript asume undefined. Si una función se invoca con menos parámetros de los esperados, éstos últimos recibirán el valor undefined. Si lo desea, el programador puede asignar explícitamente undefined a una variable.

El valor especial null se utiliza para indicar que un objeto sí está declarado e inicializado pero ningún otro valor de su dominio aplica momentáneamente. Aunque ambos, undefined y null sirven para indicar ausencia de valor, undefined debería considerarse como una indicación de error porque un valor se esperaba y no fue provisto; mientras que null como una natural indicación de que una variable no tiene valor. Por ejemplo, si al extraer el último elemento de un arreglo con arr.pop() se obtiene undefined, el programador debe considerar que trató de extraer un elemento de un arreglo vacío; pero si arr.pop() retornó null, el programador sabrá que el arreglo tenía elementos y el último era precisamente el valor null.

Objetos especiales

El lenguaje de programación JavaScript provee varios objetos útiles: Date, RegExp, Boolean, Number y String. El objeto Date sirve para obtener y manipular fechas u horas, como se ilustra en el js_date_object.

 25 )
   {
      christmas.setFullYear( now.getFullYear() + 1 );
      text = 'la próxima ';
   }

   // Convertir la cantidad de milisegundos que faltan para navidad en dias
   var dias = (christmas.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
   text = 'Faltan ' + dias.toFixed(0) + ' días para ' + text + 'navidad';
}

document.write('
', text, '
\n');
]]>

El objeto especial RegExp permite manipular expresiones regulares en JavaScript, siguiendo la misma notación de Perl. [Contenido pendiente: este tema se cubrirá en el futuro].

Los 7 tipos de datos de JavaScript pueden dividirse en dos grupos: valores primitivos (números, booleanos, strings y valores especiales (undefined y null)), los cuales no pueden tener métodos; y los valores objeto (objetos, arreglos y funciones), los cuales sí pueden tener métodos. Como se dijo, ningún valor primitivo en JavaScript tiene métodos, sin embargo, se puede saber la longitud de un arreglo o convertir un número en un string con métodos, por ejemplo:

var longitud = 'ácido desoxirribonucleico'.length;
var num = 777;
var bin_str = num.toString(2);

Esto es posible ya que JavaScript define tres clases correspondientes a cada uno de los tipos de datos primitivos, llamadas wrapper objects: Number, String y Boolean. Cuando a un valor primitivo se le invoca un método, JavaScript automáticamente construye un objeto temporal de la clase correspondiente y lo inicializa con el dato primitivo, invoca el método y finalmente destruye el objeto temporal. Es decir, cuando se escribe algo como

var str = "Hola mundo!";
var len = str.length;

La propiedad length no proviene del string str, sino de un objeto temporal String inicializado con str. Nótese que el objeto String contiene una copia del texto original, y después de usarse, se desecha. Este comportamiento también aplica para los datos primitivos de Number y Boolean.

Por valor o por referencia

En JavaScript algunos datos se manipulan por valor y otros por referencia cuando se copia un dato de una variable a otra, cuando se pasa por parámetro a una función y cuando se compara. Automáticamente JavaScript sigue esta regla: los valores primitivos (booleanos, números, strings y valores especiales) son manipulados por valor; los valores objeto (objetos, arreglos y funciones), son manipulados por referencia. No existe una notación especial para que el programador pueda decidir cuáles manipular por referencia y cuales por valor. Debe ajustarse a las reglas expuestas y tener los cuidados respectivos. Por ejemplo, cuando se invoca a una función, las copias y referencias simplemente se harán de acuerdo al tipo de dato enviado:

var n = 1;   // Es un número, el literal 1 se copia por valor a n
var t = n;   // t será un número, copia el valor de n. Un cambio en n no afecta el valor de t

// Los parametros de la funcion no tienen tipo de datos, reciben por valor o referencia
// de acuerdo a los datos enviados en la invocacion
function addto(total, value) { total += value; }

// Se invoca con dos numeros, al llamar a addto, total y value tendrán copias por valor
// así que la funcion no tendra el efecto que quiere conseguir, y por ende, t se mantendra
// intalterado con su valor 1
addto(t, n);

// La comparacion se hace por valor, es decir, se comparan byte a byte variables distintas
if ( t == n ) document.write('Los números son copiados');   // Se evaluará como true

Cuando los datos se manipulan por referencia, se hace una copia de la dirección del objeto. Es decir, se copian, pasan por parámetro y comparan direcciones que apuntan a lo mismo, de forma similar a los punteros C. Por ejemplo:

// Crea un objeto y su direccion la copia a hoy
var hoy = new Date();

// Copia la direccion de hoy a navidad, ambas variables refieren al mismo objeto
var navidad = hoy;

// Modifica al objeto apuntado, por ende, 'hoy' tambien referirá al 25 de diciembre
navidad.setMonth(11);
navidad.setDate(25);

// Si se comparan, se hará una comparación de direcciones, y se evaluará como true
if ( hoy == navidad ) document.write('Hoy es navidad!');

// se crea otro objeto distinto pero con iguales datos
var navidad2 = new Date(navidad.getFullYear(), 11, 25);

// Esta comparacion evaluara como falsa, ya que tienen direcciones distintas
if ( navidad == navidad2 ) document.write('La navidad es universal!');


// Una funcion recibira por valor o referencia dependiendo de como se le invoque
function addDays(date, days)
{
   date.setDate( date.getDate() + days );
}

// En esta invocacion, date recibira una copia de direccion de navidad y days una copia del
// literal 6 logrando el efecto deseado para navidad, pero 'hoy' se vera afectado tambien.
addDays(navidad, 6);

// Esta funcion no provoca el efecto deseado pero ilustra como trabajan las direcciones
function addDaysB(dateB, daysB)
{
   var tmpDate = new Date(dateB);
   tmpDate.setDate( tmpDate.getDate() + daysB );
   dateB = tmpDate; // Esto solo modifica la direccion de dateB y no al objeto real
}

// Al hacer esta invocacion la funcion addDaysB crea otro objeto internamente y lo asigna a su
// parametro temporal dateB y no a navidad2. Al salir de la función, navidad2 permanece
// inalterada. Esto también explica cómo actuar cuando no se quiere alterar datos que son pasados
// por referencia: haciendo copias
addDaysB(navidad2, 6);

Dado a que los strings son inmutables, se comportan por valor como muestra el js_string_by_value_or_reference:

Variables

Una de las primeras diferencias visibles con otros lenguajes como C es que las variables de JavaScript no tienen un tipo de datos, por lo que es perfectamente válido asignarles un valor de un tipo y luego otro de diferente naturaleza:

var i = 16;
i = "dieciséis";

Antes de que se pueda usar una variable, debe haberse declarado con la palabra reservada var, o JavaScript declarará una implícitamente; lo cual puede traer efectos secundarios indeseados. En ECMAScript 5 el autor puede incluir la cadena literal 'use strict';. Esta constante literal provoca que en adelante el intérprete sólo cree variables cuando están en una sección var y genere un error en otras circunstancias. La instrucción 'use strict'; además activa otras restricciones acordes a las prácticas sanas de programación, por lo cual se recomienda incluir esta cadena al inicio de todos sus programas JavaScript.

En la declaración se deben inicializar las variables, sino JavaScript lo hará con el valor undefined. Si una variable se declara dos veces en secciones var distintas y la segunda declaración tiene inicialización actúa como una simple asignación. Se pueden declarar variables en cualquier lugar donde pueda haber una sentencia, y en la primera sección de la cláusula for o for/in.

// Crea una variable i. Al terminar el ciclo i tendrá el valor 10
for(var i = 0; i < 10; ++i) document.write(i, '\n');

// No crea otra variable i, sino que reutiliza la existente
for(var i in obj) document.write(i, '\n');

Cuando se trata de leer una variable que no existe, se genera un error y el navegador detiene la ejecución del script. Si se le trata de asignar algo a una variable inexistente, se creará una variable global implícita. Las variables globales son visibles en cualquier lugar donde haya código JavaScript.

Las variables locales son aquellas creadas en secciones var en los cuerpos de las funciones, incluyendo a los parámetros. Las variables locales se superponen a las globales. A diferencia de C y Java, JavaScript no tiene diferente alcance (scope) en cada bloque de código. Mejor dicho, los bloques de JavaScript lo definen las mismas funciones y no las parejas { }, así todas las variables de una función comparten el mismo alcance, indiferentemente del nivel de anidamiento de llaves en que se declaren las variables. En el siguiente ejemplo; las variables o, i, j, k comparten el mismo alcance.

function test(obj)
{
   var i = 0;                        // i is defined throughout function
   if (typeof obj == "object")
   {
      var j = 0;                     // j is defined everywhere, not just block
      for(var k=0; k < 10; ++k)   // k is defined everywhere, not just loop
      {
         document.write(k);
      }
      document.write(k);             // k is still defined: prints 10
   }
   document.write(j);                // j is defined, but may not be initialized
}

Las variables locales ocultan las globales, y las locales tienen alcance (scope) de toda la función. Esto puede generar resultados confusos o sorprendentes. Por ejemplo:

var str = "global";
function f( )
{
   alert(str);         // Displays "undefined", not "global"
   var str = "local";  // Variable initialized here, but defined everywhere
   alert(str);         // Displays "local"
}
f( );

En la función anterior no se imprime "global" en el primer alert de la línea 4, porque se está usando la variable str local de la línea 5, la cual no ha sido inicializada aún. Este comportamiento equivale al siguiente código:

var str = "global";
function f( )
{
   var str;
   alert(str);         // Displays "undefined", not "global"
   str = "local";      // Variable initialized here, but defined everywhere
   alert(str);         // Displays "local"
}
f( );

El consejo de mantener las variables tan locales como sea posible, no aplica para JavaScript. Algunos programadores prefieren incluso declarar sus variables juntas al inicio de cada función JavaScript. Es importante que el programador tenga claro que en JavaScript una variable es global si no aparece en el cuerpo de una función, y que una variable es local si aparece en algún lugar del cuerpo de una función, no importa el nivel de anidamiento de llaves en que se encuentre.

En JavaScript una variable puede estar declarada o no declarada. Una variable es declarada si el programador lo hace formalmente en una sección var, incluso aunque no sea inicializada (en cuyo caso JavaScript le asigna el valor undefined). Naturalmente una variable no declarada es la que no aparece en una sección var. Intentar acceder a una variable no declarada es siempre un error y el intérprete podría detener la ejecución del script. Sin embargo, el comportamiento de asignar una variable no declarada depende del modo de ejecución del script. En modo estricto se considerará un error, mientras que en modo no estricto (el por defecto), JavaScript creará una nueva variable global, le asignará el valor, y a partir de ese momento se comportará como una variable declarada.

var x;     // Una variable declarada no inicializada. Su valor es undefined
alert(u);  // Tratar de leer una variable no declarada es un error
c = 2413;  // Asignar un valor a una variable no declarada crea una variable global

Cuando se inicia un intérprete de JavaScript, lo primero que hace antes de ejecutar el código fuente, es crear el objeto global (global object), que es un objeto como cualquier otro con la misión de almacenar todas las variables globales que se declaren en el código. Cada vez que se declara una variable global, realmente está declarando una propiedad del global object.

El intérprete de JavaScript también define convenientemente otras propiedades (variables y métodos) en el global object que son de uso común, como NaN, Infinity, parseInt(), y Math. La palabra reservada this usada en un contexto global (fuera del cuerpo de una función), referencia específicamente al global object. En el caso del navegador, el global object es además la ventana del navegador (window), y se cumple:

this == this.window == window

Si las variables globales son propiedades de un global object ¿qué son las variables locales? También son propiedades, pero de un objeto temporal llamado call object, el cual se construye en cada invocación de una función, y mantiene juntos los parámetros, variables declaradas en el cuerpo de la función y el código de la misma. Este objeto es el que impide que las variables locales sobrescriban las globales cuando tienen el mismo nombre. Dentro de una función, this hace referencia al call object en lugar del global object.

Operadores

Los operadores aritméticos de resta (-), multiplicación (*), división (/) y módulo (%) sólo trabajan con números. Si se usan con operandos de otro tipo de datos, JavaScript intentará convertirlos a números invocándoles el método valueOf(). Ya que todo número en JavaScript es un flotante, la división siempre es real, es decir, no hay división entera como ocurre en otros lenguajes. El operador + actúa como operador de suma si sus operandos son numéricos, y como el operador de concatenación si al menos uno de ellos es string.

JavaScript tiene dos operadores para determinar semejanza. El operador de igualdad (==) indica si dos valores son el mismo incluso tras hacer conversiones de tipos. El operador de identidad (===) es más estricto y dice que dos valores son idénticos si son iguales y tienen el mismo tipo de datos. Sus opuestos respectivos son el operador de desigualdad (!=) y de no identidad (!==). Por ejemplo:

"0" ==  false        // produce true  (hace conversiones)
"0" === false        // produce false (no hace conversiones)

"037.50" ==  37.5    // produce true
"037.50" === 037.50  // produce false

Los operadores de comparación <, <=, >, >= actúan como de costumbre si sus operandos son del mismo tipo, sino se tratan de convertir a números, y si esta conversión falla se generará NaN, que siempre se evalúa como false en un contexto booleano.

1 + 2        // Addition. Result is 3.
"1" + "2"    // Concatenation. Result is "12".
"1" + 2      // Concatenation; 2 is converted to "2". Result is "12".
11 < 3       // Numeric comparison. Result is false.
"11" < "3"   // String comparison. Result is true.
"11" < 3     // Numeric comparison; "11" converted to 11. Result is false.
"one" < 3    // Numeric comparison; "one" converted to NaN. Result is false.

Los operadores lógicos son los mismos de C/C++/Java para conjunción (&&), disyunción (||) y negación (!). Pero guardan una diferencia. Los operandos se convierten a Boolean temporalmente para hacer la evaluación del operador, pero el resultado final del operador no es booleano, sino del tipo de datos del último operando evaluado. A esto se le puede sacar ventaja. En el siguiente ejemplo, la variable max adquirirá el primer valor numérico que no sea null en lugar de un valor booleano.

// If max_width is defined, use that. Otherwise look for a value in
// the preferences object. If that is not defined use a hard-coded constant.
var max = max_width || preferences.max_width || 480;

El operador ternario ?: funciona igual que en C. Los operadores de bits (bitwise operators): and (&), or (|), xor (^), not (~), shift left (<<), signed shift right (>>) y shift right with zero fill (>>>), sólo trabajan con enteros de 32 bits y su uso es inusual en JavaScript.

El operador in recibe al lado izquierdo un string y al derecho un objeto o arreglo. Se evalúa como true si el string es el nombre de una propiedad del objeto al lado derecho, incluso si es heredada. Ejemplos:

var point = { x:1, y:1 };        // Define an object
var has_x_coord = "x" in point;  // Evaluates to true
var has_y_coord = "y" in point;  // Evaluates to true
var has_z_coord = "z" in point;  // Evaluates to false; not a property of point
var tstr = "toString" in point;  // Inherited property from Object; evaluates to true

El operador instanceof espera al lado izquierdo un objeto y al lado derecho el nombre de una clase (realmente una función constructora). Evalúa a true si el lado izquierdo (el objeto) es una instancia de la clase o un objeto descendiente de dicha clase.

var d = new Date();  // Create a new object with the Date() constructor
d instanceof Date;   // Evaluates to true; d was created with Date()
d instanceof Object; // Evaluates to true; all objects are instances of Object
d instanceof Number; // Evaluates to false; d is not a Number object

var a = [1, 2, 3];   // Create an array with array literal syntax
a instanceof Array;  // Evaluates to true; a is an array
a instanceof Object; // Evaluates to true; all arrays are objects
a instanceof RegExp; // Evaluates to false; arrays are not regular expressions

El operador unario typeof genera un string con el nombre del tipo de datos de su argumento a la derecha, que puede o no estar entre paréntesis. Típicos resultados son "number", "string", "boolean", "object" (incluye los arreglos y null), "function" y "undefined" cuando el parámetro no ha sido declarado. Ejemplo:

typeof undefined      // retorna "undefined"
typeof false          // retorna "boolean"
typeof (3 / 1.1)      // retorna "number"
typeof '0'            // retorna "string"
typeof {}             // retorna "object"
typeof []             // retorna "object"
typeof null           // retorna "object"
typeof function() {}  // retorna "function"

return typeof value == "string" ? "'" + value + "'" : value;

Ya que typeof retorna "object" para objetos de diversa naturaleza, su utilidad se reduce a saber si su operando es o no de un tipo de datos primitivo. Para saber la clase de un objeto hay que recurrir a otras técnicas como el operador instanceof, o la propiedad Object.constructor, como se verá luego.

Igual que en C++ y Java, el operador new crea un objeto vacío, invoca un constructor para que lo inicialice, y retorna la dirección de memoria del objeto. Si el constructor no recibe parámetros, puede omitirse sus paréntesis.

o = new Object;    // Optional parentheses omitted here
d = new Date();    // Returns a Date object representing the current time

// Una función constructora
function Point(x, y)
{
   this.x = x;
   this.y = y;
}

p = new Point(3.0, 4.0);   // Crea un objeto vacío y lo inicializa con la función constructora

El operador delete intenta eliminar una propiedad de un objeto, un elemento de un arreglo o la variable especificada como operando. Retorna true si la eliminación fue exitosa. Algunas variables o propiedades no pueden ser eliminadas, como las declaradas en secciones var. Si el único argumento de delete no existe, se retorna true. Ejemplos:

var o = {x:1, y:2};  // Define a variable; initialize it to an object
delete o.x;          // Delete one of the object properties; returns true
typeof o.x;          // Property does not exist; returns "undefined"
delete o.x;          // Delete a nonexistent property; returns true
delete o;            // Can't delete a declared variable; returns false
delete 1;            // Can't delete an integer; returns true
x = 1;               // Implicitly declare a variable without var keyword
delete x;            // Can delete this kind of variable; returns true
x;                   // Runtime error: x is not defined

Nótese que el operador delete no trata de eliminar memoria dinámica como ocurre en C++, lo cual se hace en JavaScript con el recolector de basura (garbage collector), no hay otra forma. El delete de JavaScript elimina una propiedad, es decir, deja de existir; no es que se le asigne undefined:

var my = new Object( );   // Create an object named "my"
my.hire = new Date( );    // my.hire refers to a Date object
my.fire = my.hire;        // my.fire refers to the same object
delete my.hire;           // hire property is deleted; returns true
document.write(my.fire);  // But my.fire still refers to the Date object

Sentencias

Una sentencia en un lenguaje de programación es un comando que al ser ejecutado produce un efecto. Un programa es una secuencia de sentencias que se ejecutan una tras otra, sin embargo, el lenguaje de programación provee estructuras de control que permiten ejecutar sentecias condicional o repetitivamente. Las sentencias en JavaScript deben terminar en punto y coma, aunque no es obligatorio. Las estructuras de control condicional son las mismas de C: if, else y switch, como muestra el siguiente ejemplo.

if (username != null)
   alert("Hello " + username + "\nWelcome to my blog.");
else if ( askname )
{
   username = prompt("Welcome!\n What is your name?");
   alert("Hello " + username);
}
else
   alert("Hello there");

La estructura de control switch es más flexible que en C. Al ser un lenguaje interpretado, los casos del switch son expresiones, no sólo constantes. El parámetro del switch se compara contra cada case utilizando el operador de identidad ===, hasta encontrar una coincidencia o el default si fue provisto por el programador.

En muchas situaciones una estructura switch puede ser reemplazada por un arreglo común o un arreglo asociativo (también conocido como tabla de dispersión (hash), o mapa (map)) si trabaja con valores primitivos; o por polimorfismo si el switch trabaja con objetos; lo cual tiene algunas ventajas como mejor mantenimiento del código. Por ejemplo, el mismo efecto del js_switch_normal puede conseguirse con un arreglo asociativo como se muestra en el js_switch_hash.

El js_switch_hash construye un objeto normal, llamado methods, cuyas propiedades son referencias a funciones, y que se pueden acceder con el operador punto, por ejemplo methods.ftp(), o con el operador corchetes methods['ftp'](). Ya que la función transfer() (línea 14) recibe el método de transferencia como un string, resulta conveniente utilizar el operador corchetes. La línea 16 pregunta si el objeto methods tiene una propiedad con el nombre del método enviado por parámetro. Si es así, accede a la propiedad con el operador corchetes [], la cual se evalúa como una función, y finalmente con el operador paréntesis () la invoca pasándole el archivo (file) por parámetro.

Dado a que las funciones transfer_method() son globales, JavaScript las declara ya como propiedades de un objeto global (window en el caso del navegador). De esta forma, el programador podría acceder a ellas directamente como se ve en el js_switch_global_object, en lugar de crear el objeto methods.

Como es de esperar, las estructuras de control para reiteración de sentencias de JavaScript son las mismas de C: for, while y do/while. Por ejemplo:

');
]]>

5 pts. Cree una función JavaScript que reciba un número n y retorne un arreglo con los primeros n números de Fibonacci. Utilice su función para crear un arreglo con los primeros 40 números de Fibonacci e imprímalos en una lista ordenada.

JavaScript provee un tipo de ciclo más, el ciclo for/in, cuya sintaxis es:

for (property_name in object)
   /* do something with */ object[property_name];

donde property_name se refiere al nombre de una variable, una declaración var, un elemento de un arreglo, la propiedad de un objeto, o incluso una expresión. object se refiere a un objeto o una expresión que evalúa en un objeto. El cuerpo del for/in, se ejecuta una vez por cada propiedad del objeto y en cada iteración, property_name adquiere el nombre de la propiedad y no su valor, es decir, property_name es siempre un string. Para obtener el valor de la propiedad debe entonces utilizarse el operador corchetes [] de la forma object[property_name]. Por ejemplo:

Ya que property_name puede ser una expresión arbitraria, cada vez que se itera se podría evaluar de forma diferente. Por ejemplo, este código copia los nombres de un objeto en un arreglo:

var obj = {x:1, y:2, z:3};
var arr = new Array( );
var i = 0;
for( arr[i++] in obj )
   ;

// Imprime cada nombre en el arreglo
for(i in arr) alert(i);

No hay forma de especificar en un for/in el orden de recorrido, es dependiente de la implementación de JavaScript; lo único que asegura el estándar es que se recorrerán todas las propiedades enumerables del objeto. Una propiedad es enumerable si es definida por el objeto mismo, es decir, no es heredada de otro objeto.

function genSpecialValue() { return Math.random() < 0.5 ? null : undefined; }
function genBoolean() { ... }
function genNumber() { ... }
function genString() { ... }
function genFunction() { ... }

function genObject() { ... }
function genArray() { ... }

function genRandomValue() { ... }

[
	8.1,
	false,
	{
		dicob: null,
		pavuwe:
			[
			]
		gofirute: "hekava",
	},
	function anonymous( /**/) { return "gisite"; },
],

[Contenido pendiente: Manejo de excepciones (try/catch/finally)].

Propiedades de Object

Todos los objetos de JavaScript heredan de la pseudoclase Object, y por ende, todos los objetos de JavaScript tienen las propiedades que esta pseudoclase defina. En lo siguiente se presentarán algunas de ellas. Cuando se crea un objeto siempre se guarda una referencia a la función que se utilizó para inicializar el objeto, en la propiedad constructor. Por ejemplo:

var d1 = new Date();
d1.constructor == Date    // Se evalúa como true

La propiedad constructor sirve para saber si un objeto es instancia directa de una psudoclase particular, mientras que el operador instanceof sirve para determinar si el objeto es descendiente de una pseudoclase dada. Por ejemplo:

var d1 = new Date();
d1.constructor == Date    // true
d1.constructor == Object  // false
d1 instanceof Date        // true
d1 instanceof Object      // true, todo objeto es descendiente de Object
d1 instanceof Array       // false

var o1 = new Object();
var o2 = {};
o1.constructor == Object  // true
o2.constructor == Object  // true
o1 instanceof Object      // true
o2 instanceof Object      // true

var a1 = new Array();
var a2 = [];
a1.constructor == Array   // true
a2.constructor == Array   // true
a1.constructor == Object  // false
a2.constructor == Object  // false
a1 instanceof Array       // true
a2 instanceof Array       // true
a1 instanceof Object      // true
a2 instanceof Object      // true

function f1() {};
var f2 = function() {};
var f3 = new Function('', ';');
f*.constructor == Function // true
f*.constructor == Object   // false
f* instanceof Function     // true
f* instanceof Object       // true

El método toString() heredado de la pseudoclase Object es invocado automáticamente por JavaScript cuando necesita convertir el objeto en un string. La implementación por defecto retorna la cadena "[object Object]" que es poco significativa. Por ende, este método debería ser sobrescrito por clases descendientes.

El método valueOf() es invocado automáticamente por JavaScript cuando el objeto se utiliza en un contexto numérico. El programador también debería sobrescribirlo para clases propias, si su objeto puede convertirse automáticamente a un número.

Propiedades de Array

La propiedad más natural de un arreglo es length que indica la cantidad de elementos que hay almacenados en él. De hecho es la principal diferencia entre un arreglo y un objeto tradicional. La tabla js_array_methods muestra una lista de métodos que cada arreglo hereda de la pseudoclase Array. Es importante resaltar que algunos de estos métodos modifican el arreglo directamente.

[1,2,3].push(9,null) // retorna 5, deja [1,2,3,9,null]

[1,2,3].pop() // deja [1,2]

[1,2,3].unshift(9,null) // retorna 5, deja [9,null,1,2,3]

[1,2,3].shift() // deja [2,3]

[1,2,3].join() // genera "1,2,3"
[1,2,3].join('; ') // genera "1; 2; 3"

[1,[8,9],2].toString() // retorna "1,8,9,2"

[1,2,3].reverse() // genera [3,2,1]

[7, 200, 81].sort() // genera [200,7,81]
[7, 200, 81].sort(function(a,b){return a-b;}) // genera [7,81,200]

[1,2,3,4,5].slice(1,3) // genera [2,3]

El operador corchetes [] se utiliza en JavaScript tanto para acceder a los elementos de un arreglo, como a las propiedades de un objeto. De esta forma, un objeto podría utilizarse para simular un arreglo, almacenando los elementos en propiedades con nombres numéricos ('1', '2', '3', ...), más una propiedad length asignada de manera acorde a la cantidad de elementos alojados en el objeto. Por ejemplo:

Cada vez que la función generarNombres() del js_array_like_objects_example es invocada, creará un objeto vacío resultado (línea 5), el cual llenará con número aleatorio de propiedades cuyo nombre son precísamente números secuenciales. En la línea 11 le crea una propiedad length y retorna una referencia al objeto. Las líneas 16 a 20 crean uno de estos objetos y lo utilizan como si fuese un arreglo normal. Sin embargo no lo es, hay algunas diferencias importantes, en especial que carece de los métodos heredados de la pseudoclase Array, y por ende el objeto tipo arreglo (array-like object) tiene poca funcionalidad para ser modificado. Es decir, se ha creado un arreglo de "sólo lectura", lo cual es una cualidad importante en JavaScript y ampliamente explotada por los navegadores para acceder al modelo de objetos del documento (DOM, Document Object Model) como se verá adelante.

Propiedades de Function

En JavaScript las funciones son objetos y por ende también tienen propiedades. Una función puede ser invocada con igual, menos o más argumentos de los esperados por la función; lo cual no genera un error de sintaxis. Por el contrario, JavaScript permite al programador determinar la cantidad real de parámetros enviados, y por tanto, es fácil implementar funciones que trabajan adecuadamente con cantidades arbitrarias de argumentos.

Cada vez que se invoca una función, JavaScript llena un objeto tipo arreglo (array-like object) llamado arguments que es accesible desde la función. Como es de esperar arguments.length indica la cantidad de argumentos con que se invocó la función y la expresión arguments[i] accede al argumento i + 1 en la lista. El siguiente es un ejemplo de una función tradicional:

Como se ve en el ejemplo anterior, la invocación de min() con tres parámetros falla el resultado esperado por el llamador. La función min podría detectar esto con la propiedad length, heredada de Function, la cual indica la cantidad de parámetros especificados en la declaración de la función, tal como lo hizo el programador. Mientras que la propiedad arguments.length indica la cantidad de argumentos con que se hizo una invocación de la función. De acuerdo al js_function_arguments1, min.length siempre es dos, incluso aunque no se invoque la función nunca; mientras que el valor de arguments.length puede variar en cada invocación de la función. Cuando estas dos cantidades difieren, el programador puede saber que se ha invocado la función con menos o más argumentos de los esperados y reaccionar de alguna forma, por ejemplo:

Sin embargo, en JavaScript es fácil escribir una función que trabaje naturalmente con un número arbitrario de parámetros, como se ve a continuación.

Ya que una función es un objeto, puede tener propiedades, como la propiedad length que es creada por la pseudoclase Function, y el arreglo arguments visto anteriormente. El programador también puede crear sus propias propiedades, de la misma forma que se hace con cualquier otro objeto. Las propiedades que el programador defina tendrán el efecto de ser "variables estáticas" de la función. El siguiente ejemplo muestra una función que reporta el número de veces que ha sido invocada.

countCalls() ha sido llamada ' + ++countCalls.count + ' veces
');
}

countCalls();  // Imprime "countCalls() ha sido llamada 1 veces"
countCalls();  // Imprime "countCalls() ha sido llamada 2 veces"
countCalls();  // Imprime "countCalls() ha sido llamada 3 veces"
]]>

El ambiente de desarrollo del navegador

Utilizando JavaScript, el navegador pone a disposición del autor un conjunto de objetos que permiten manipular ventanas, cambiar el URL, modificar el contenido o estilo del documento, comunicarse con el servidor web, y otras operaciones útiles.

El objetivo primordial de un navegador web es desplegar al usuario documentos (X)HTML en una ventana. De ahí nacen los dos objetos más importantes para el programador: la ventana del navegador (window), la cual contiene al documento web (document) del autor.

El objeto window es quizá el más importante, porque no sólo es un simple objeto, es el objeto global. Todas las propiedades del objeto global son variables globales, y viceversa: las variables globales que el programador defina se crearán como propiedades del objeto global window. Así, las dos siguientes declaraciones fuera del cuerpo de una función hacen esencialmente lo mismo:

var answer = 722;
window.answer = 722;

De lo anterior se obtiene que da lo mismo escribir window.document que simplemente document. Dicho de otra forma, el objeto window es el más importante porque todos los demás objetos que existen se acceden a através de él, como se ve en la siguiente jerarquía parcial:

window
   parent
   top
   navigator
   location
   history
   screen
   document
      anchors[]
      links[]
      images[]
      applets[]
      forms[]
         elements[]

La jerarquía que nace del objeto document ha sido estandarizada por el Consorcio Web (W3C) en lo que se llama Document Object Model (DOM), de tal forma que permite a los programadores JavaScript escribir código portable entre navegadores para manipular el documento y sus estilos.

Como se indicó al iniciar este capítulo, el código JavaScript puede correr en cuatro lugares: en un elemento script, en un archivo .js externo, en atributos manejadores de eventos y en el pseudoprotocolo javascript:. Todos comparten el mismo objeto global window y su descendencia; por ende, cualquier propiedad definida en uno de estos lugares, es accesible en todos los demás. En el siguiente ejemplo, la función global genRandom() es definida en el primer script y usada en el segundo script.

   
   



   
Su número de la suerte es:
   
   .


]]>

<img onclick="player.next();" onmousedown="player.forward();" src="img/button_next.svg">

Temporizadores y animaciones

El objeto global window provee varios métodos y otras propiedades para manipular el navegador, ventanas, direcciones, el historial y similares.

El método window.setTimeout(code, delay) ejecuta el código JavaScript enviado en el parámetro code, delay milisegundos después de que se hace la invocación. Retorna un identificador opaco que necesitará el programador si desea cancelar dicho temporizador con el método window.clearTimeout(). El código es invocado sólo una vez. Si se quiere que ocurra repetitivamente, el código en code debe establecer otro setTimeout() o bien usar el método setInterval(). El método timer = window.setInterval(code, period) ejecuta el código code repetitivamente en intervalos de period milisegundos, hasta que se invoque window.clearInterval(timer). Los temporizadores son muy útiles para realizar animaciones, como el siguiente reloj digital.

   
   



   
HH:MM:SS
   


]]>

En el documento del js_clock_animation, el elemento con identificador clock de la línea 11 será utilizado para desplegar la hora local del navegador. Cuando el navegador carga el cuerpo de este documento, mostrará el div como de costumbre, aplicándole los estilos que se declararon en la parte superior. Luego encontrará un elemento script y lo ejecutará como es sabido. La invocación a setInterval() en la línea 14 le indica al navegador que debe ejecutar el código updateClock() dentro de 1 segundo, cada segundo. Al ser invocada, la función updateClock() debe cambiar el contenido del <div id="clock">...</div> con el valor actual de la hora. JavaScript requiere una referencia al objeto div que tiene el identificador clock, y la consigue invocando el método document.getElementById() que se estudiará luego. Una vez obtenida la referencia al elemento div, se cambia su contenido con la hora actual en el navegador obtenida en forma de string.

El js_text_animation muestra un texto moverse de izquierda a derecha, en un ancho de 320 pixeles. Esta vez no se modifica el contenido de un elemento particular, sino su posición, lo cual es responsabilidad de la presentación, por lo que el código JavaScript debe modificar dinámicamente el estilo CSS del elemento con identificador text (línea 12). El estilo de un elemento se accede en JavaScript a través de su propiedad style, la cual es un objeto cuyas propiedades tienen el mismo nombre que las propiedades CSS en notación "camelCase" (margin, marginTop, etc.), y sus valores son siempre un string. En js_text_animation, cada vez que se invoca, animateText() calcula en la variable global textLeft la nueva posición del texto (líneas 19 y 20); y en la línea 22 asigna el resultado de este cálculo a la propiedad style.left, cuyo efecto es el mismo a haber escrito #text { left: <textLeft>px; } en CSS. Para que esto funcione, el elemento #text debe "flotar" sobre el documento, lo cual se hizo en la línea 7 indicando que su posición es absoluta.

   
   
   



   
Su nombre aquí
   


]]>

Información del navegador, la ventana y la pantalla

El objeto global window tiene varias propiedades de sólo lectura que informan el tamaño de la ventana, el tamaño del documento y la posición del navegador en el escritorio:

El objeto window.screen provee información sobre la pantalla del usuario, por ejemplo: las dimensiones en pixeles del escritorio (screen.width y screen.height), la profundidad de color en bits por píxel (screen.pixelDepth), el área usable del escritorio sin incluir la barra de tareas (screen.availWidth y screen.availHeight). Con estas propiedades el programador puede escoger qué imágenes presentar, centrar una ventana en el escritorio o tareas similares.

El objeto window.navigator contiene información sobre el navegador mismo, como su nombre (navigator.appName), versión (navigator.appVersion), el nombre codificado (navigator.appCodeName, el sistema operativo para el que se compiló el navegador (navigator.platform), si tiene habilitados los cookies (navigator.cookieEnabled), y la identificación que el browser envía en sus encabezados HTTP (navigator.userAgent). No es recomendable utilizar esta información para escribir funcionalidad dependiente del navegador, sino para propósitos de estadísticas o bitácoras.

Abrir y manipular ventanas

JavaScript permite al autor crear nuevas ventanas de navegador en las que puede cargar documentos existentes de su servidor web o generar un nuevo documento dinámicamente. Sin embargo, el abuso que se ha cometido por publicidad y otros fines, ha obligado a los fabricantes de navegadores a restringir esta funcionalidad de acuerdo a la política de seguridad, por ejemplo, a permitir abrir ventanas sólo en respuesta a un evento del usuario.

Una invocación al método window.open(url, name, features, replaceHistory) crea y retorna una referencia hacia una nueva ventana, y por ende, un nuevo objeto window con toda su descendencia de objetos. La nueva ventana cargará un documento si se especifica un url en el primer parámetro, de lo contrario, tendrá un documento vacío. El parámetro name le da un nombre a la ventana, si ya existe una con ese nombre simplemente se reutiliza, y en tal caso, si replaceHistory es true el historial de navegación en esa ventana es reemplazado; si es false o se omite, el nuevo documento es simplemente agregado al historial (y por tanto, el usuario podría presionar el botón "atrás" para retonar a documentos cargados previamente).

El siguiente ejemplo crea una pequeña ventana emergente de ayuda cuando se presiona el botón, y la cierra cuando se vuelve a presionar el botón. Las ventanas se cierran con el método window.close() que cierra gráficamente la ventana pero no destruye su correspondiente objeto window.

Ayuda

]]>

El tercer parámetro, features, de window.open() permite especificar el tamaño de la nueva ventana y otras decoraciones gráficas. Si se omite, se le dará tamaño estándar y todas las decoraciones existentes (barra de menú, barra de estado, ...). Algunas combinaciones son restringidas por razones de seguridad, por ejemplo, una ventana muy pequeña o situada en una zona no visible.

El objeto retornado por window.open() se puede manipular como cualquier otro objeto window. El ejemplo del js_open_window_document_write, genera un documento dinámicamente en una nueva ventana, utilizando su respectivo método document.write().

Hello world!");   // Output document content
subdoc.close();                          // End the document
]]>

Nótese que tanto document como window tinen métodos open() y close(). El método document.open(url) carga un documento a partir del url o genera uno vacío si se omite url. Invocar a document.write() es seguro en una ventana nueva ya que el documento se está cargando (parsing). El método document.close() indica al navegador que el documento ha terminado de cargarse (parsing), el cual responde deteniendo la animación de carga. Si nunca se llama a document.close(), el navegador creerá que está ante un documento incompleto.

El objeto window tiene métodos para mover y redimensionar la ventana. Deben usarse con mucha cautela sólo en situaciones que realmente provean una mejor experiencia del usuario. De lo contrario es una pobre práctica, ya que la geometría y posición de la ventana debe ser un privilegio del usuario. Son los siguientes: window.moveTo(x, y) mueve la esquina superior izquierda a las coordenadas dadas; window.moveBy(despX, despY) mueve la ventana tantos pixeles relativos a la posición actual; window.resizeTo(width,height) y window.resizeBy(addToWidth, addToHeight) cambian el tamaño de la ventana.

El método window.focus() hace que la ventana sea la activa, y window.blur() hace que renuncie a serlo. Es común llamar a focus() después de hacer un window.open(), ya que las ventanas recién creadas no lo tienen por defecto.

Es común querer abrir un documento existente en una nueva ventana y luego hacer que ésta se desplace a diferentes fragmentos del documento dinámicamente. Si los fragmentos están identificados con el atributo id (como en <div id="frag1">...</div>) o con anclas (<a name="frag2">...</a>), se puede cambiar la ubicación del documento con un una de las siguientes instrucciones:

var subwindow = window.open('help.html', 'help_window');
subwindow.location.hash = "#frag1";    // crea una entrada en el History de subwindow
subwindow.location.replace("#frag1");  // no crea una entrada en el History de subwindow

Ubicación del documento

La propiedad window.location de una ventana representa el URL del documento que está desplegado en dicha ventana. Es un objeto que tiene las siguientes propiedades:

Al objeto mismo window.location se le puede asignar un string, de la forma window.location = url, que causa el mismo efecto que llamar su método window.location.replace(url), con la diferencia de que se agrega una entrada al historial de navegación de la ventana, de tal forma que el usuario puede retornar al documento previo.

Cuadros de diálogo

El objeto window provee tres métodos para desplegar cuadros de diálogo. window.alert(msg) despliega un mensaje y espera que el usuario lo acepte. window.confirm(msg) presenta un mensaje y solicita al usuario que decida si lo acepta o cancela, lo cual se retorna como un boolean. window.prompt(msg, defaultValue) presenta el mensaje msg y espera que el usuario ingrese un string el cual es retornado o null si cancela.

Deben usarse con moderación, o mejor aún, nunca. La mayoría de usuarios se sentirá molesta al experimentarlos y recuerde que ellos tienen el poder forzar el navegador a cerrarse, deshabilitarle JavaScript o nunca volver a su sitio. Así que estos métodos son de ligera utilidad para el programador durante el proceso de desarrollo. Hace varios años, el navegador reportaba errores de JavaScript utilizando diálogos, lo cual era impertinente: le reclamaba al visitante errores que no eran de él. Los navegadores han cambiado a ocultar los errores y el programador debe buscarlos en alguna bitácora, consola o similar.

El modelo de objetos del documento (DOM)

Cuando el navegador carga un documento (X)HTML crea un objeto JavaScript por cada elemento, comentario, o trozo de texto que encuentra en el archivo. Estos objetos se asocian entre sí en una jerarquía llamada modelo de objetos del documento (DOM: Document Object Model), la cual es accesible y modificable a través de JavaScript. Es decir, el DOM es una representación interna del documento utilizando objetos. Un cambio en el DOM se refleja de inmediato en el navegador, lo que permite al autor ajustar el documento dinámicamente para mejorar la comunicación con sus lectores. Es quizá la funcionalidad más importante que un autor busca de JavaScript.

Los objetos en la jerarquía del DOM reciben el nombre genérico de nodos, construidos con la pseudoclase Node. El nodo raíz es siempre el documento, el cual contiene nodos opcionales (declaración XML, declaración de tipo de documento, comentarios) y el nodo del elemento html, llamado elemento documento (document element). Este último tiene dos hijos: el nodo del encabezado (head) y el nodo del cuerpo del documento (body). Los hijos del nodo body varían de acuerdo al documento. Por ejemplo, la fig_node_tree muestra un documento sencillo y el árbol de nodos que el navegador genera a partir de él.

    
Reubicar nodos en el documento
    

        
        
Los
        
12
        
elementos
        
de
        
esta
        
lista
        
serán
        
ordenados
        
alfabéticamente
        
sin contar
        
Mayúsculas
        
Incluyendo este párrafo.
    
    
Ordenar
    

]]>

    
Crear e insertar nodos en el documento
    
Agregar nodo
    

        
Presione el botón para agregarle elementos a la lista
    
    

]]>

XML DOM y HTML DOM

Los nodos pueden ser de distinta naturaleza: elementos, atributos, comentarios, texto, etc. La propiedad Node.nodeType indica el tipo de un nodo particular; es un entero que puede tomar el valor de una de las siguientes constantes:

Valor	Constante	Pseudoclase XML	Pseudoclase HTML
1	Node.ELEMENT_NODE	Element	HTMLElement
2	Node.ATTRIBUTE_NODE	Attr
3	Node.TEXT_NODE	Text
4	Node.CDATA_SECTION_NODE	CharacterData
5	Node.ENTITY_REFERENCE_NODE	EntityReference
6	Node.ENTITY_NODE	Entity
7	Node.PROCESSING_INSTRUCTION_NODE	--
8	Node.COMMENT_NODE	Comment
9	Node.DOCUMENT_NODE	Document
10	Node.DOCUMENT_TYPE_NODE	--
11	Node.DOCUMENT_FRAGMENT_NODE	DocumentFragment
12	Node.NOTATION_NODE	--

Tipos de Node del XML DOM

El js_element_count muestra una función que recorre recursivamente todos los nodos del documento contando cuántos de ellos son elementos. Sugerencia: verifique si el conteo es correcto: cuente los elementos manualmente en el código fuente que genera la página o al inspeccionar el resultado.

   
   
   



   
Conteo de elementos
   
El número de elementos presentes en este documento es:
      


]]>

10 pts.

Escriba en un archivo .js, una función que recorre el documento en que fue invocada y retorna un string con el texto de todos los comentarios. Imprima este string en un elemento pre al final del documento. El elemento pre y su contenido debe crearlo desde JavaScript usando el DOM. Puede descargar una página que guste de la web que tenga comentarios y alterarla para incluir su script al final del cuerpo.

15 pts.

Escriba una función en un archivo doc_statistics.js que al ser invocada crea un nuevo documento en una ventana emergente con estadísticas del documento donde se invocó la función. El contenido de la ventana emergente es una tabla (X)HTML con las columnas: número de línea (#), el nombre del elemento (Elemento), la cantidad de veces en que aparece en el documento original (Ocurrencias), y el porcentaje de ocurrencia de dicho elemento en el documento (Porcentaje). En las filas de la tabla debe aparecer cada uno de los distintos elementos que conforman el documento, como se ve abajo. Al final agregre como pie de tabla una fila con los totales. Descargue de la web una página de su interés y modifíquela para ejecutar su script al final del documento. Note que su función sólo debe considerar elementos y no nodos de otro tipo.

#	Elemento	Ocurrencias	Porcentaje
1	html	1	0.1%
2	head	1	0.1%
...	...	...	...
45	img	95	10%
	Total	581	100%

Por cada tipo de nodo hay una pseudoclase hija de Node, que aparece en la tercera columna de la xml_dom_node_types. Por ejemplo, cuando el navegador carga el documento y encuentra un comentario, no construye un objeto Node puro, sino que construye un objeto de la pseudoclase Comment, la cual es hija de Node; y, de igual forma, cuando encuentra un párrafo creará un objeto Element que es también hijo de Node. Esta jerarquía de pseudoclases se ilustra la fig_node_inheritance.

Cada subclase agrega propiedades a la pseudoclase Node. Por ejemplo, la pseudoclase Element define las siguientes propiedades útiles:

Propiedad	Descripción
Element.tagName	String con el nombre del elemento, por ejemplo: "body", "p", etc. Equivale a Node.nodeName.
Element.attributes[]	Accede a los atributos del elemento en el orden en que fueron definidos.
Element.getAttribute(name)	Retorna el valor del atributo name como un string, o null si el elemento no tiene este atributo.
Element.setAttribute(name, value)	Asigna el string value al atributo con nombre name del elemento. Si el atributo no existe, lo crea.
Element.removeAttribute(name)	Elimina el atributo con nombre name del elemento. No produce ningún error si el atributo no existe.
Element.getAttributeNode(name)	Retorna un objeto de tipo Attr que permite por ejemplo saber si el atributo fue definido o se está usando su valor por defecto.
Element.id	El valor del atributo id="value", si fue definido para este elemento.
Element.className	El valor del atributo class="value", si fue definido para este elemento.
Element.children[]	Un arreglo que contiene únicamente los elementos hijos de este elemento, en lugar de todos los nodos como ocurre con el arreglo childNodes heredado de Node. Quizá childElements hubiese sido un nombre más apropiado.
Element.childElementCount	La cantidad de elementos hijos. Equivale a children.length. Nótese que no es la cantidad de nodos hijos.
Element.innerHTML	Un string que con el marcado HTML o XML que representa el contenido del elemento. Si se asigna otro string, será "parseado" por el navegador, el resultado reemplazará a los nodos hijos del elemento, y el efecto será inmediatamente visible en el documento.
Element.outerHTML	Un string que con el marcado HTML o XML que representa el elemento mismo más su contenido. Si se asigna otro string, será "parseado" por el navegador, el resultado reemplazará al elemento y sus nodos hijos. El efecto será inmediatamente visible en el documento.
Element.style	Un objeto CSSStyleDeclaration con los estilos definidos en el documento para este elemento. Se puede modificar dinámicamente. No contiene los estilos computados.

Propiedades de Element en el XML DOM

El objeto Attr representa un atributo de un elemento particular, aunque casi nunca se utiliza, ya que el objeto Element tiene propiedades y métodos para manipular sus atributos. Quizá su propiedad más útil es Attr.specified que permite determinar si el valor del atributo fue explícitamente escrito en el documento, sino se está tomando el valor por omisión.

Los navegadores realmente implementan dos modelos de objetos del documento (DOM), uno para XML y otro especializado para HTML (fig_node_inheritance). Dado que JavaScript utiliza XML para transferir datos entre el servidor y el cliente, requiere poder manipular estos documentos a través de una jerarquía de objetos. El DOM que se ha presentado hasta el momento se llama XML DOM, compuesto de objetos bastante genéricos como lo es también XML.

Sin embargo, el navegador provee un conjunto de pseudoclases especializadas para HTML, que componen lo que se llama HTML DOM y que heredan de las pseudoclases presentes en el XML DOM. Algunas de estas pseudoclases se presentan en verde en la fig_node_inheritance. El principal distintivo del HTML DOM es que define la pseudoclase HTMLElement para todos los elementos que sólo tienen los atributos comunes (em, span, dt, etc.) y una pseudoclase HTMLXxxElement para cada elemento Xxx que tiene atributos propios, como HTMLDocument, body (HTMLBodyElement), p (HTMLParagraphElement), ul (HTMLUListElement), etc.

Las pseudoclases HTMLXxxElement definen propiedades homónimas a los atributos (X)HTML que son de lectura y escritura. Por ejemplo HTMLImageElement define la propiedad string src que puede cambiarse dinámicamente con JavaScript y su efecto es inmediato en el navegador. Los nombres son homónimos a XHTML, en minúsculas, excepto el atributo class="" que en JavaScript se renombra className debido a que class es una palabra reservada. El tipo de datos de cada atributo es el más adecuado, por ejemplo, HTMLImageElement.src es un string, HTMLImageElement.width es un entero y HTMLBodyElement.onload es una función de JavaScript.

El autor puede utilizar estos atributos definidos por las pseudoclases HTMLXxxElement directamente con el operador punto o el operador corchetes, si está seguro de que el objeto es del tipo xxx adecuado. También puede emplear los métodos getAttribute(name) y setAttributeValue(name, value) heredados de Element en el XML DOM; que a diferencia de los atributos de HTMLXxxElement, sólo retornan y reciben valores string.

5 pts. Reimplemente el ejercicio 5.22 (documento aleatorio) usando la jerarquía de Node, en lugar de usar una jerarquía de clases propias. Provea una función que al ser invocada obtiene una referencia al elemento body y construye un documento aleatorio.

Localizar elementos en el documento

De todos los tipos de nodos el elemento es incuestionablemente el más importante para el autor, tanto que el objeto Document del XML DOM y HTMLDocument del HTML DOM, proveen varios métodos útiles para localizar elementos por algún criterio. Estos se resumen en la siguiente tabla.

Si los métodos de la htmldocument_search_element se invocan con el objeto document, buscarán elementos en el documento completo, pero a veces, es útil buscarlos sólo en un trozo del documento. La pseudoclase Element también define sus propias versiones de dichos métodos (a excepción de getElementById() y getElementsByName()), y hacen lo mismo que sus contrapartes de Document, con la diferencia de que en lugar de buscar en todo el documento, buscan únicamente en el subárbol del elemento al cual el método es invocado.

Por conveniencia la pseudoclase HTMLDocument define las propiedades document.head, document.body y document.documentElement, que hacen referencia a sus respectivos elementos, lo cual ahorra al programador el tener que localizarlos con las funciones de búsqueda del documento:

document.head == document.getElementsByTagName('head')[0];
document.body == document.getElementsByTagName('body')[0];
document.documentElement == document.getElementsByTagName('html')[0];

Ejemplo: Preguntas frecuentes

El ejemplo del js_faq_example_xhtml muestra una sencilla sección de "Preguntas frecuentes". Inicialmente se presentan sólo las preguntas y no las respuestas, lo que permite al visitante recorrerlas rápidamente. Una vez que encuentre la pregunta que le intriga, puede hacer clic en ella para desplegar su respuesta.

Este ejemplo sirve para ilustrar varios conceptos comunes de la programación en JavaScript. De acuerdo a la filosofía Unobtrusive JavaScript, el uso de este lenguaje debería ser un aditamento opcional que mejora la comunicación con el usuario. En este caso, si el visitante tiene desactivado el intérprete de JavaScript en su navegador, podrá acceder a la sección de "Preguntas frecuentes" completa. Es decir, JavaScript no debe ser un requisito indispensable para que un documento web sea funcional; pero si está disponible, JavaScript sólo debería ser usado para mejorar la experiencia del usuario con el sitio web.

El documento web no debe especificar comportamiento, sino que éste siempre debe estar en un archivo externo, el cual se liga con el atributo src del elemento script como se hizo en la línea 15 de faq.xhtml en el js_faq_example_xhtml. Si los scripts van a ejecutarse hasta después de que el documento haya sido cargado por completo, es buena práctica incluirlos hasta final del documento web. De esta forma el contenido se cargará tan rápido como sea posible, sin ser retrasado por código JavaScript que aún no va a correr.

Al procesar la línea 15 de faq.xhtml en el js_faq_example_xhtml, el navegador deberá esperar a descargar el archivo faq.js completo. Cuando esto ocurre, encontrará que sólo tiene 1 instrucción ejecutable (línea 2), las demás sólo declaran funciones como propiedades del objeto window. La línea 2 es la única que el navegador ejecuta en esta etapa y básicamente le indica al navegador que debe invocar la función initFaq() inmediatamente después de que haya terminado de cargar el documento web por completo (esto se estudiará más adelante). El navegador registra el evento y continúa analizando (parsing) el resto del documento web faq.xhtml.

Una vez que el navegador ha terminado de analizar el documento faq.xhtml, dispara el evento onload y ejecuta todos los manejadores que se hayan asociado a dicho evento. En este caso, la única función asociada es initFaq de las líneas 5 a 44, la cual se invocará con el fin de inicializar la lista de preguntas y respuestas. Inicializar esta lista significa ocultar las respuestas y hacer que los textos de las preguntas reaccionen al clic del ratón con el fin de mostrar u ocultar alternadamente dichas respuestas. Adicionalmente crea un par de botones: "Mostrar todo" para los visitantes que quieran leer o imprimir todas las preguntas, y el botón "Ocultar todo" para quienes cambien de opinión.

   

      
¿Texto de la pregunta 1?

      
Respuesta de la pregunta 1.
   
   

      
¿Texto de la pregunta 2?

      
Respuesta de la pregunta 2.
      
Esta respuesta ocupa varios párrafos.
   




   
Manejo de eventos del DOM level 2


]]>

El método Element.addEventListener() es parte de lo que se conoce como DOM Level 2, el cual establece que cuando un evento ocurre en un elemento, éste puede antenderlo o alguno de sus elementos padres, es decir, el evento se propaga por la jerarquía de elementos y puede ser atendido en una de las siguientes tres fases:

• Capturing phase. El evento recorre desde el documento hasta el elemento esperando ser atendido. Es decir, un elemento padre del elemento que generó el evento puede atenderlo.
• At target phase. El elemento que generó el evento tiene oportunidad de atenderlo.
• Bubbling phase. El evento retorna desde el elemento hacia el documento.

El tercer parámetro del método element.addEventListener(event, function, fase) controla la fase en la que será atendido del evento. Si es true se atenderá en la fase de captura, si es false en la fase objetivo o fase de ascenso (bubbling).

Otra ventaja de usar addEventListener() en lugar de asignar manejadores de eventos directamente a los atributos intrínsecos (llamado DOM Level 0), es que una misma función puede menejar eventos generados en distintos lugares del documento. Por ejemplo, si quiere hacer algo cuando el cursor del ratón pase sobre cualquier párrafo del documento, en el DOM Level 0 tendría que recorrer todos los elementos p y asignarles la función manejadora; mientras que en el DOM Level 2, simplemente registra la función en el elemento document.body con addEventListener().

Tanto en DOM Level 0 como DOM Level 1, la función que se asigna al atributo intrínseco o que se pasa en el segundo parámetro de element.addEventListener(event, function, fase) se convierte en una propiedad del elemento al cual se hizo la asignación o invocación. Es decir, esa función se convierte en un método del elemento. Cuando éste se invoca por el navegador, se hará como una invocación a un método normal del elemento, así la palabra reservada this hará referencia a dicho elemento, por lo que se puede usar dentro del código del manejador. El siguiente ejemplo muestra una mínima implementación de un juego de estallar una bolsa de burbujas. Nótese cómo la función popBubble es asignada a cada imagen de burbuja al evento onclick, lo que la convierte en un método, el cual utiliza el parámetro this para cambiar el origen de la imagen presionada por una burbuja estallada.