JavaScript es un lenguaje interpretado por el navegador web que permite al autor manipular dinámicamente el documento, sus estilos y la ventana misma del navegador, para hacer la experiencia del lector más natural y amena.
JavaScript fue creado en 1995 por Brendan Eich cuando trabajaba para Netscape. Un año después Microsoft produjo su propia versión llamada JScript. También en 1996, Netscape sometió JavaScript a la asociación Ecma International para consideración como estándar de la industria, el resultado fue ECMAScript.
JavaScript es un lenguaje genérico que puede utilizar cualquier software que quiera permitir al usuario automatizar tareas propias; como ocurre en la actualidad para programación de dispositivos móviles, acceso a bases de datos orientadas a documentos, animación digital y otros. Pero su uso más difundido ha sido históricamente el web, en la programación en el lado del cliente y más recientemente en el servidor web. En este documento se presentará este lenguaje ligado al navegador web.
Generalidades
JavaScript es un lenguaje similar a C/C++/Java. Es sensitivo a mayúsculas y minúsculas, por lo que resulta más consistente con XHTML que con HTML. Aunque no es obligatorio, cada sentencia en JavaScript debe terminar en punto y coma, y se considera una mala práctica omitirlos. Los comentarios utilizan la notación de C++:
// comentario hasta el final de línea
/* comentario que puede
extenderse varias líneas */
El código JavaScript puede aparecer en cuatro lugares: en el elemento script, en un archivo .js externo, en un evento intrínseco, y con el pseudoprotocolo javascript:.
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:
<body>
<h1>Cuadrados naturales 1</h1>
<script type="text/javascript">
<!--
document.write('<ul>\n');
for ( var n = 1; n <= 20; ++n )
document.write('<li>' + n + '<sup>2</sup> = ' + (n * n) + '</li>\n');
document.write('</ul>\n');
-->
</script>
</body>
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 anterior, se invoca al método write() del objeto document que representa al documento ante JavaScript. La salida del método document.write() es insertada como código (X)HTML inmediatamente después del elemento script que lo invoca. 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 insertado con document.write() así como el provisto por el autor en el documento original.
Como se puede deducir del ejemplo anterior, JavaScript interpreta el texto entre apóstrofes ('') como cadenas de caracteres. El operador de suma (+) cuando alguno de sus operandos es una cadena, hace concatenación. 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.
Ejercicio. ¿Por qué el código JavaScript en el ejemplo anterior se escribió dentro de un comentario (X)HTML? ¿Por qué el navegador ejecuta este código en lugar de ignorarlo como cualquier otro comentario? ¿Qué pasa si se retira este comentario del código?
Ejercicio. En un documento aparte, modifique el ejemplo anterior para desplegar en una tabla HTML, las tablas de multiplicar del 1 al 20. Asegúrese de que su documento sea válido ante los estándares.
Ejercicio. En el mismo documento, agregue después una tabla HTML con las primeras 10 potencias naturales de los números 1 a 20. Recuerde validar su documento.
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 siguiente ejemplo tiene el mismo efecto que el ejemplo anterior:
<body>
<h1>Cuadrados naturales 2</h1>
<script type="text/javascript" src="squares_list2.js"></script>
</body>
El código JavaScript puede estar en un recurso externo y ser importado con el atributo
src del elemento
script.
Correr este ejemplo.
document.write('<ul>\n');
for ( var n = 1; n <= 20; ++n )
document.write('<li>' + n + '<sup>2</sup> = ' + (n * n) + '</li>\n');
document.write('</ul>\n');
El archivo JavaScript squares_list2.js referido en el ejemplo anterior.
La especificación (X)HTML dice que si un elemento script tiene tanto código JavaScript en el contenido como un archivo referido en el atributo src, el contenido será ignorado por completo en favor del archivo externo.
Ejercicio. Extraiga el código JavaScript que escribió en los ejercicios anteriores a uno o varios archivos .js externos.
Ejercicio. Escriba algunas instrucciones JavaScript en el contenido de un elemento script que también referencia un archivo externo con el atributo src. Verifique cuáles instrucciones son ejecutadas.
Ejercicio. Al retirar el código JavaScript del contenido del elemento script para moverlo a un archivo externo, el elemento script queda vacío, y según el estándar XML es válido emplear una etiqueta vacía de la forma <script src="path/to/file.js"/>. Pruebe esto en su documento web. Valídelo contra el estándar. ¿Cómo reacciona el navegador ante este cambio?
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. Por ejemplo:
<body>
<h1>Eventos en JavaScript</h1>
<button onclick="alert('No me toque');">Un botón!</button>
</body>
El autor puede proveer código JavaScript se que ejecuta cuando un evento ha ocurrido, como presionar un botón en este caso.
Correr este ejemplo.
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, 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);
Tipos de datos y variables
JavaScript define siete tipos de datos: booleanos, números, cadenas de caracteres (strings), funciones, objetos, arreglos, y valores especiales. En las siguientes secciones se explorará cada uno de ellos.
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 numéricas de JavaScript siguen las mismas convenciones de C, excepto los números octales que no son parte de ECMAScript.
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.
Ejercicio. Escriba un script que genere una tabla con las siguientes columnas: el nombre de la constante, el valor real de dicha constante, el valor que precede a la constante, el valor sucesor de la constante, el resultado de invocar isNaN() con la constante, y el resultado de invocar isFinite() con la constante. Llene las filas de la tabla con cada una de las constantes listadas anteriormente.
Ejercicio. Agregue dos filas más a la tabla del ejercicio anterior. La primera con una expresión aritmética que genera un valor real, y la segunda que genere un valor indefinido.
Cadenas de caracteres (strings)
Las cadenas literales en JavaScript se encierran entre comillas dobles o simples y se pueden anidar éstos. Ya que es común escribir código HTML dentro de JavaScript y viceversa, es conveniente uniformar las comillas para cada cual. Por ejemplo:
<a href="" onclick="alert('You\'re welcome')">Thanks</a>
A diferencia de otros lenguajes de programación, Las cadenas literales tienen que ser escritas en una única línea, no pueden romperse en dos o más de ellas.
Igual que en C/C++, JavaScript emplea secuencias de escape iniciadas en backslash (\) para representar caracteres especiales, 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).
No se debe utilizar el backslash frente a un cambio de línea para tratar de continuar un string en varias líneas; JavaScript probablemente lo ignorará. 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 str = 'Welcome ' + visitorName; // concatenación
var len = str.length; // longitud de cadena
var lastChar = str.charAt(str.length - 1); // obtener un caracter de la cadena
var sub = str.substring(3, 4); // obtiene 'come'
var i = str.indexOf('e'); // Encuentra la posición de la primera letra 'e' en str
Aunque algunas implementaciones permiten el uso del operador [] para acceder a un carácter específico del string, es recomendable evitar su uso, ya que no forma parte del estándar ECMAScript.
Ejercicio. Escriba un poema de su agrado (o cualquier otro texto con varios párrafos) en una variable string de JavaScript. Imprima las estrofas (no las líneas que lo componen) en orden inverso en el documento.
Ejercicio. Para hacer notorio al lector que las estrofas están en orden inverso, imprima el número de la estrofa y con estilos CSS haga a este número visiblemente grande y ubicado a la izquierda o derecha de la estrofa.
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.
var hdd_gb = 500; // 500 GB
var hdd_gib = 500 * Math.pow(10, 9) / Math.pow(2, 30); // 465.661287 GiB
var text = 'Un disco duro de ' + hdd_gb + 'GB equivale a ' + hdd_gib + 'GiB';
document.write('<p>', text, '</p>\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:
hdd_gib + ""; // "465.66128730773926"
String(hdd_gib); // "465.66128730773926"
hdd_gib.toString(); // "465.66128730773926"
hdd_gib.toString(2); // "111010001.1010100101001010001"
hdd_gib.toString(16); // "1d1.a94a2"
hdd_gib.toFixed(0); // "466"
hdd_gib.toFixed(2); // "465.66"
hdd_gib.toExponential(0); // "5e+2"
hdd_gib.toExponential(3); // "4.657e+2"
hdd_gib.toPrecision(4); // "465.7"
hdd_gib.toPrecision(7); // "465.6613"
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 parseInt(str,base) y parseFloat(str,base) asumen que str está en base base (10, si se omite) y lo convierten en un número entero o real respectivamente. Ejemplos:
parseInt("3 blind mice"); // Returns 3
parseFloat("3.14 meters"); // Returns 3.14
parseInt("12.34"); // Returns 12
parseInt("0xFF"); // Returns 255
parseInt("11", 2); // Returns 3 (1*2 + 1)
parseInt("ff", 16); // Returns 255 (15*16 + 15)
parseInt("zz", 36); // Returns 1295 (35*36 + 35)
parseInt("077", 8); // Returns 63 (7*8 + 7)
parseInt("077", 10); // Returns 77 (7*10 + 7)
parseInt("eleven"); // Returns NaN
parseFloat("$72.47"); // Returns NaN
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. 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 0 y 1. Si se usan en un contexto string, JavaScript los convierte automáticamente a "false" y "true" respectivamente. El recíproco también es válido. 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 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 función nombrada
function square1(x) { return x*x; }
// una función literal o "lambda"
var square2 = function(x) { return x*x; }
// una función construida a partir de strings
var square3 = new Function("x", "return x*x;");
// invoca la función a través de la variable square2
square2(2.5);
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 () tras el nombre de la variable, como se hizo en el ejemplo anterior con square2.
Ejercicio. Programe la función factorial recursivamente. Imprima en una lista no ordenada el factorial de los primeros 20 naturales. ¿Qué sucede si llama su función con un número muy grande o con parámetro no numérico?
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 permite ver a los objetos como arreglos asociativos. 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.
var now = new Date();
var pattern = new RegExp("\\sjava\\s", "i");
var point = new Object();
point.x = 2.3;
point.y = -1.2;
En el ejemplo anterior el objeto point se creó como un objeto vacío, y sus propiedades se fueron agregando luego con el operador de asignación. Existe una notación para definir objetos literales, útil para inicializaciones:
{ property1: value1; "property2": value2; ...; propertyN: valueN }
Las llaves {} en JavaScript indican la creación de un objeto literal. Los nombres de las propiedades pueden declararse como identificadores o como strings. 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. Así los objetos se pueden anidar como es de esperar:
var point = { x:2.3, y:-1.2 };
var activo1 =
{
"tipo": "disco_duro",
"precio": 30000, // colones
'tamanno': 500 * Math.pow(10, 9) / Math.pow(2, 30) // GiB
};
var rectangle =
{
color : "#a4f0ca",
background:
{
color: "lightgray",
image: "img/bricks.png",
repeat: "repeat"
},
geometry:
{
topLeft: { x: 45, y: 10 },
extend: { width: 21.93, height: 38.34 }
}
};
Si un objeto se emplea en un contexto Boolean, se traduce a true si no es null. Si el contexto es string se llamará al metodo toString() y si es numérico a valueOf().
Ejercicio. Escriba un objeto Círculo, Triángulo y Rectángulo. En cada uno de ellos almacene su posición y dimensiones. Provea dos métodos en cada objeto, uno para calcular el perímetro y otro para el área. Haga un programa en JavaScript que imprima cada figura: su tipo, posición, dimensiones, perímetro y área. Nota: si A, B y C son los vértices de un triángulo, su área y perímetro se pueden obtener mediante (requiere Firefox para visualizar las fórmulas):
Ejercicio. Agregue otro triángulo a la colección de figuras hechas en el ejercicio anterior. ¿Puede reutilizar el código de los métodos del primer triángulo? Haga que su nuevo triángulo aparezca en la salida del programa. Sugerencia: puede verificar el área de sus triángulos contra esta aplicació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. Así un elemento del arreglo puede contener otro arreglo, pero no hay arreglos multidimensionales. 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. 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";
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]
var b = new Array(1.2, "JavaScript", true, { x:1, y:3 }); // 4 elementos
var c = new Array(10); // Arrreglo de 10 elementos indefinidos
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];
Ejercicio. Almacene las figuras que haya creado en los ejercicios 11 y 12 en un arreglo. Con un ciclo imprima cada figura, su perímetro y su área.
Ejercicio. Escriba una función que crea y retorna una figura geométrica aleatoriamente cada vez que se invoca. Llene un arreglo de 20 figuras aleatorias e imprímalas como hizo en el ejercicio anterior. Puede apoyarse en los métodos Math.random() y Math.floor().
Ejercicio. Escriba un inventario compuesto de una jerarquía de activos en JavaScript. Programe métodos para imprimir cada activo e imprima el inventario en un documento XHTML. Haga que cada activo genere un div en el documento, de tal forma que los div mantengan el mismo anidamiento que los objetos. Con estilos CSS gregue bordes a los div para que sea visualmente clara la relación entre estos.
Valores especiales
El valor especial null se utiliza para indicar que un objeto no tiene valor. El valor especial undefined indica que una variable u objeto nunca ha sido declarado o nunca se le ha asignado un valor.
Objetos especiales
JavaScript provee varios objetos útiles: Date, RegExp, Boolean, Number y String. El objeto Date sirve para obtener y manipular fechas u horas, como se aprecia en el siguiente ejemplo.
var text = '';
var now = new Date();
// Los meses inician en 0. Diciembre es el 11
if ( now.getMonth() == 11 && now.getDate() == 25 )
{
text = 'Hoy es navidad!';
}
else
{
// Fijar en un objeto Date la proxima navidad
var christmas = new Date( now.getFullYear(), 11, 25, 00, 00, 000 );
if ( now.getMonth() == 11 && now.getDate() > 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('<p>', text, '</p>\n');
El objeto especial RegExp permite manipular expresiones regulares en JavaScript, siguiendo la misma notación de Perl.
Ningún valor primitivo en JavaScript tiene métodos, sin embargo, en algunos ejemplos anteriores, se han invocado algunos a través de valores primitivos. 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 y luego invoca el método. Es decir, cuando se escribe algo como
var s = "Hola mundo!";
var len = s.length;
La propiedad length no proviene del string s, sino de un objeto temporal String inicializado con s, una copia, que después de usarse, se desecha. Este comportamiento también aplica para los datos primitivos de Number y Boolean.
Ejercicio. Calcule el tiempo que tarda en ejecutarse todos los scripts en conjunto, que haya programado en este laboratorio. Presente el resultado al usuario, en milisegundos o segundos (si se tarda más de uno).
Por valor o por referencia
En JavaScript los datos se manipulan por valor y por referencia. Automáticamente JavaScript sigue esta regla: valores primitivos (booleanos y números) son manipulados por valor; los objetos, arreglos y funciones, 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.
La manipulación tiene tres escenarios: cuando se copia un dato, cuando se pasa por parámetro a una función y cuando se compara. Cuando se invoca a una función, las copias y referencias simplemente se harán de acuerdo al tipo de dato enviado. Por ejemplo:
var n = 1; // Es un número, el literal 1 se copia por valor a n
var t = n; // t será un número, se copia también por valor
// 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é explica cómo actuar cuando no se quiere alterar datos que son pasados
// por referencia: haciendo copias
addDaysB(navidad2, 6);
Los strings no caben en ninguna de esas dos categorías. Una vez creado un string, JavaScript no permite modificarlo, es decir, son inmutables. Asi que no tiene importancia saber si se pasa por copia o por referencia. Puede pensarse lo segundo por razones de eficiencia. Lo único que se puede averiguar es si se comparan por valor o por referencia, de esta forma:
// Determining whether strings are compared by value or reference is easy.
// We compare two clearly distinct strings that happen to contain the same
// characters. If they are compared by value they will be equal, but if they
// are compared by reference, they will not be equal:
var s1 = "hello";
var s2 = "hell" + "o";
document.write(s1 == s2 ? "Strings compared by value" : "Strings compared by reference");
Variables
Una de las primeras diferencias 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 usted pueda usar una variable, tiene que haberla declarado con la palabra reservada var, o JavaScript declarará una implícitamente por usted. Lo cual puede traer efectos secundarios. 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. Todas las variables declaradas en una sección var son permanentes, es decir, no se pueden eliminar con el operador delete. La primera sección de la cláusula for o for/in, permite también declarar variables.
for(var i = 0; i < 10; ++i) document.write(i, '\n');
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. 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 scope.
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( );
La moraleja es siempre declare sus variables juntas al inicio de una función JavaScript. Se puede distinguir dos tipos de variables: undefined y unassigned. Una variable sería indefinida si nunca se ha declarado. Al tratar de leerla se generará un error y el navegador detiene la ejecución del script. Una variable es unassigned si está declarada pero no se le ha asignado un valor aún. Al tratar de leerla, se evaluará con el valor especial undefined (posiblemente mejor hubiera sido llamado unassigned).
var x; // Declare an unassigned variable. Its value is undefined.
alert(u); // Using an undeclared variable causes an error.
j = 3; // Assigning a value to an undeclared variable creates the variable.
Cuando se inicia un intérprete de JavaScript, lo primero que hace antes de ejecutar el código fuente, es crear el global object, el cual se encarga de almacenar todas las variables globales que se declaren en el código. Cuando usted declara una variable global, realmente está declararando 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 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, 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 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.
Expresiones
Operadores
Los operadores aritméticos de resta (-), multiplicación (*), división (/) y módulo (%) sólo trabajan con números. Si se usan con 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 (===) 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
"0" === false // produce false
"037.50" == 37.5 // produce true
"037.50" === 037.50 // produce false
Ejercicio. Pruebe todas las expresiones que aparecen en los ejemplos de esta sección en el intérprete de JavaScript de su navegador. Por ejemplo, Chrome provee una "JavaScript Console" (Ctrl+Alt+J), donde puede introducir sentencias que serán evaluadas "en vivo". Sugerencia cognitiva: escriba cada expresión manualmente, en lugar de copiarla y pegarla.
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 expresiones lógicas.
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: &&, || y !. Pero guardan una diferencia. Los operandos se convierten a Boolean temporalmente para hacer la evaluación del operador, pero el resultado del operador no es Boolean, sino del tipo de datos del operando izquierdo. 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 || 500;
El operador ternario ?: funciona igual que en C. Los operadores de bits (bitwise operators): and (&), or (|), xor (^), not (~), shift left (<<), shift right con signo (>>) 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.
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 tanta 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
function Point(x, y) { this.x = x; this.y = y; } // Una función constructora
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 delete no se trata de eliminar memoria dinámica como ocurre en C++, lo cual se hace en JavaScript con el 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
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.
function transfer(file, method)
{
switch(method)
{
case 'none':
break;
case 'ftp':
return transfer_ftp(file);
case 'rsync':
default:
return transfer_rsync(file);
}
}
Los ciclos for, while y do/while tienen la misma sintaxis de C. Por ejemplo:
// Llenar un arreglo con 20 factoriales: del 0 al 19
var factorials = new Array(20);
for(var i = 0; i < factorials.length; ++i)
factorials[i] = i ? i * factorials[i - 1] : 1;
// Imprimir el arreglo en el documento
for(var i = 0; i < factorials.length; ++i)
document.write(i, '! = ', factorials[i], '<br>');
Ejercicio. 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 agrega un tipo de ciclo más, el ciclo for/in, cuya sintaxis es:
for (property_name in object)
statement;
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 la propiedad, es decir, un string. Por ejemplo:
for (var prop_name in my_object)
document.write("name: " + prop_name + "; value: " + my_object[prop_name], "<br/>");
Ejercicio. Utilice un ciclo for/in para imprimir recursivamente los activos del inventario que hizo en el ejercicio 5.16.
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.
Ejercicio. Cree un juego de funciones que cada vez que son invocadas generan un valor aleatorio de uno de los siete tipos de datos de JavaScript: valor especial, booleano, número, string, función, objeto, y arreglo. Por ejemplo:
function genSpecialValue() { return Math.random() < 0.5 ? null : undefined; }
function genBoolean() { ... }
function genNumber() { ... }
function genString() { ... }
function genFunction() { ... }
function genObject() { ... }
function genArray() { ... }
function genRandomValue() { ... }
Cree una función genRandomValue(), que invoca aleatoriamente a cualquiera de las funciones anteriores para retornar un valor aleatorio de un tipo de datos aleatorio.
Modifique genArray() para que genere un arreglo con n elementos aleatorios, cada uno resultado de invocar a genRandomValue().
Modifique genObject() para que genere un objeto con n propiedades aleatorias. Haga que el nombre de la propiedad sea un string aleatorio generado por genString() (considere si se debe mejor implementar una función genIdentifier()). Haga que el valor de la propiedad sea generado por genRandomValue().
Ejercicio. Provea una función (o un juego de funciones) que reciba por parámetro un valor de cualquier tipo de datos, y lo escriba en el documento utilizando la misma notación de objetos de JavaScript (JSON). Note que esta función (o funciones) debe ser recursiva. Idee algún mecanismo para mantener una indentación impecable en el resultado.
Ejercicio. Invoque a su función genArray() para generar un arreglo de elementos aleatorios, e imprímalo en el documento utilizando la función que escribió en el ejercicio anterior. Debe ocurrir que cada vez que se refresque el documento, el navegador genere una estructura de datos distinta, con niveles de composición aleatorios.
Arreglos y funciones como objetos
En JavaScript los arreglos y las funciones son objetos, y por ende tienen propiedades heredadas de las pseudoclases Array y Function respectivamente. A su vez, estas pseudoclases heredan de Object. Esta sección da una introducción de algunas propiedades que estas clases proveen.
Propiedades de Object
Cuando se crea un objeto 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. También debería ser sobrescrito para clases descencientes.
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 siguiente tabla muestra una lista de métodos heredados de la pseudoclase Array.
Métodos de Array
| Método |
Detalles |
push(elems) |
Inserta los elementos enviados por parámetro al final del arreglo. Retorna la cantidad de elementos que quedan en el arreglo.
[1,2,3].push(9,null) // retorna 5, deja [1,2,3,9,null] |
pop() |
Elimina y retorna el último elemento del arreglo. Si está vacío, retorna undefined.
[1,2,3].pop() // deja [1,2] |
unshift(elems) |
Inserta los elementos enviados por parámetro al inicio del arreglo. Retorna la cantidad de elementos que quedan en el arreglo.
[1,2,3].unshift(9,null) // retorna 5, deja [9,null,1,2,3] |
shift() |
Elimina y retorna el primer elemento del arreglo
[1,2,3].shift() // deja [2,3] |
join(sep) |
Retorna un string resultado de concatenar todos los elementos en el arreglo, separados por la cadena sep, o comas si se omite.
[1,2,3].join() // genera "1,2,3"
[1,2,3].join('; ') // genera "1; 2; 3"
|
toString() |
Está sobrescrito para hacer lo mismo que join().
[1,[8,9],2].toString() // retorna "1,8,9,2" |
reverse() |
Invierte el orden de los elementos en el arreglo.
[1,2,3].reverse() // genera [3,2,1] |
sort(comp) |
Ordena los elementos en el arreglo de acuerdo a la función comparadora comp(), sino los ordena alfabéticamente invocando toString() a cada uno de sus elementos.
[7, 200, 81].sort() // genera [200,7,81]
[7, 200, 81].sort(function(a,b){return a-b;}) // genera [7,81,200] |
slice(i,j) |
Retorna un nuevo subarreglo con los elementos encontrados desde la posición i hasta j - 1, es decir, el que está en j no se incluye.
[1,2,3,4,5].slice(1,3) // genera [2,3] |
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. En JavaScript es fácil, incluso, implementar una función que reciba una cantidad arbitraria de parámetros.
Cada vez que se invoca una función, JavaScript llena un objeto-arreglo 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 arguments[i] accede al argumento i + 1 en la lista. El siguiente es un ejemplo de una función tradicional:
// Sea una funcion que espera dos parametros, ignora los demas
function min(a,b) { return a < b ? a : b; }
// En JavaScript es completamente valido invocarla con menos o mas parametros
min(3, 0.07, -0.5); // retorna 0.07
// Al hacer la invocacion anterior en min() ocurre lo siguiente:
// a == 3
// b == 0.07
// arguments[0] == 3
// arguments[1] == 0.07
// arguments[2] == -0.5
// arguments.length == 3
// min.length == 2 // la cantidad de argumentos declarados en la funcion
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. Por ejemplo:
// Esta version de min solo trabaja con dos parametros
function min(a,b)
{
// Si el numero dado de argumentos es diferente del esperado, lance un error
if ( arguments.length != min.length )
throw new Error('min(): expected ' + min.length + ' arguments, sent ' + arguments.length);
// Solo dos parametros fueron provistos como se esperaba
return a < b ? a : b;
}
try
{
min(); // Lanza excepcion
min(3); // Lanza excepcion
min(3, 0.07); // Retorna 0.07
min(3, 0.07, -0.5); // Lanza excepcion
}
catch(exc)
{
document.write(exc);
}
Sin embargo, en JavaScript es fácil escribir una función que trabaje con un número arbitrario de parámetros, como se ve a continuación.
function min()
{
var result = arguments.length ? Number.MAX_VALUE : undefined;
for (var i = 0; i < arguments.length; ++i)
if ( arguments[i] < result )
result = arguments[i];
return result;
}
min(); // retorna undefined
min(3); // retorna 3
min(3, 0.07, -0.5); // retorna -0.5
Ejercicio. Escriba una función que calcule el promedio de una cantidad arbitraria de parámetros. Si es invocada sin parámetros retorna undefined. Llame su función con algunos parámetros y compruebe que el resultado es correcto.
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, las cuales 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.
// Crea una "variable estática" como propiedad de la función. JavaScript "parsea" el código
// antes de ejecutarlo, por lo que el nombre de la función puede usarse antes de ser declarada
countCalls.count = 0;
function countCalls()
{
// Usar la propiedad como si fuese una variable estática
document.write('<p>countCalls() ha sido llamada ' + ++countCalls.count + ' veces</p>');
}
countCalls(); // Imprime "countCalls() ha sido llamada 1 veces"
countCalls(); // Imprime "countCalls() ha sido llamada 2 veces"
countCalls(); // Imprime "countCalls() ha sido llamada 3 veces"
Pseudoclases
JavaScript no tiene el concepto de clase como sí C++ o Java, sino que las clases se simulan con funciones inicializadoras, objetos y prototipos de objetos. Una función constructora o función inicializadora es una función cualquiera que recibe un objeto por parámetro this y le crea propiedades y métodos. Por ejemplo:
// Construye un rectángulo. Recibe un objeto en el parámetro oculto this
function Rectangle(w, h)
{
// Declara propiedades y las inicializa
this.width = w;
this.height = h;
// También puede crear métodos
this.area = function() { return this.width * this.height; }
}
Las funciones constructoras son invocadas con el operador new. Este operador hace lo siguiente. Crea un objeto vacío, sin propiedades. Invoca a la función constructora pasándole el objeto vacío por parámetro para que lo incialice. Finalmente retorna la dirección de memoria del nuevo objeto.
var rect1 = new Rectangle(2, 4); // rect1 = { width:2, height:4 };
var rect2 = new Rectangle(8.5, 11); // rect2 = { width:8.5, height:11 };
document.write("Area of rect2: " + rect2.area() ); // Imprime "Area of rect2: 93.5"
Todos los objetos que sean inicializados con la función Rectangle() tendrán un width y un heigth, el desarrollador puede utilizar con confianza estas propiedades. La función constructora no debe retornar un valor, ya que reemplazará el resultado de la expresión new. Nótese que nunca hubo una clase, sino una función constructora y objetos tradicionales que son inicializados con ella. Por esto se les llama pseudoclases y la función constructora es quien da nombre a la pseudoclase.
Como es de esperarse, todos los objetos inicializados con Rectangle() tienen su propia copia independiente de width y height. Esto implica que en el ejemplo anterior, si a rect2.width se le asigna otro valor, no afectará al valor de rect1.width, como el programador naturalmente espera. Sin embargo, esto mismo ocurre con los métodos: cada objeto inicializado con la función constructura Rectangle() tendrá su propia copia independiente del método area(), lo cual es ineficiente. Esta redundancia se elimina con los objetos prototipo.
Todas las funciones que el programador defina, tendrán automáticamente otra propiedad llamada prototype creada por Function, de la misma forma que length y arguments. La propiedad prototype es un objeto, definido como una "variable estática" y por tanto, todas las invocaciones a la función tendrán acceso al mismo prototype.
Como la funciones constructoras son funciones normales, también tienen una propiedad prototype, y cada vez que se invoca el operador new, éste implícitamente agrega una propiedad al nuevo objeto para que apunte al prototype de la función constructora. El siguiente pseudocódigo explica lo que hace el operador new internamente:
// El programador define una función constructora
function Constructor(a,b) { this.prop1 = a; this.prop2 = b; }
// La pseudoclase Function inserta una propiedad length en la función implícitamente
Constructor.length = 2;
// La pseudoclase Function inserta una propiedad prototype en la función implícitamente
Constructor.prototype = {};
// El programador crea un nuevo objeto con su función constructora
var obj1 = new Constructor(a,b);
// El operador new hace esto internamente:
// 1. Crea un objeto vacío
var newObject = {};
// 2. Crea una propiedad prototype en el objeto que apunta al prototipo de la función
newObject.prototype = Constructor.prototype;
// 3. Invoca a la función constructora para que inicialice el nuevo objeto, la cual
// creará las propiedades prop1 y prop2
Constructor.call(newObject, a, b);
// 4. Retorna el objeto recién inicializado
return newObject;
// obj1 tendrá al final las siguientes propiedades:
obj1.prop1
obj1.prop2
obj1.prototype
El lenguaje JavaScript especifica que cualquier propiedad asignada al objeto Constructor.prototype, será automáticamente una propiedad compartida por todos los objetos construidos con la función Constructor, incluso, aunque dicha propiedad sea asignada después de que los objetos fueron creados. De esta forma, las propiedades creadas por la función constructora directamente en el objeto serán copias independientes en cada objeto, y las propiedades creadas en el prototipo de la misma, serán propiedades compartidas por todos los objetos (lo que en C++ y Java se conoce como miembros estáticos). Por ejemplo:
// Construye un rectángulo. Recibe un objeto en el parámetro oculto this
function Rectangle(w, h)
{
// Cada objeto tendrá una copia independiente de estas propiedades
this.width = w;
this.height = h;
}
// Este método será compartido por todos los objetos creados con new Rectangle()
Rectangle.prototype.area = function() { return this.width * this.height; }
Nótese que el método area() no se definió dentro de la función constructora. Si eso se hubiera hecho, se haría la asignación por cada rectángulo creado durante la ejecución del programa, lo cual es ineficiente.
El prototype es el lugar ideal para definir métodos, constantes y variables compartidas por todos los objetos de una misma pseudoclase. El programador querrá la mayor parte del tiempo tratar estas propiedades como de sólo lectura. Si modifica una propiedad en el prototipo directamente, el cambio afectará a todos los demás objetos inmediatamente; pero si intenta modificar la propiedad a través de un objeto cualquiera, creará una nueva propiedad en ese objeto que oculta la del prototipo. Por ejemplo:
// El programador define una pseudoclase con una función constructora
function Circle(radius) { this.radius = radius; }
// Y un método que será compartido por todos los objetos creados con new Rectangle()
Circle.prototype.area = function() { return Math.PI * this.radius * this.radius; }
// circle1 y circle2 tienen su respectivo radius, son copias independientes
var circle1 = new Circle(7);
var circle2 = new Circle(2.5);
// circle1 y circle2 comparten el mismo método area()
if ( circle1.area === circle2.area )
{
document.write('circle1.area() = ', circle1.area() ); // Imprime 153.94
document.write('circle2.area() = ', circle2.area() ); // Imprime 19.63
}
else
document.write('Circles do not share the same area() method!');
// El programador trata de modificar el método area() a traves de un objeto
circle2.area = function() { return Math.PI * this.radius * this.radius / 2; }
// Lo anterior crea una propiedad area() sólo en circle2 que tapa la del prototipo
document.write('circle1.area() = ', circle1.area() ); // Imprime 153.94
document.write('circle2.area() = ', circle2.area() ); // Imprime 9.82
// Al modificar una propiedad del prototipo afecta a todos los objetos, creados o nuevos
Circle.prototype.area = function() { return 0; }
// Un nuevo objeto aparece
var circle3 = new Circle(3.1);
// Todos los objetos reflejan el cambio excepto aquellos que han sobrescrito la propiedad
document.write('circle1.area() = ', circle1.area() ); // Imprime 0
document.write('circle2.area() = ', circle2.area() ); // Imprime 9.82
document.write('circle3.area() = ', circle3.area() ); // Imprime 0
Idealmente cuando un programador define una pseudoclase, debe redefinir algunos métodos heredados de la pseudoclase Object. El método toString() debe regresar una representación "string" del objeto. Opcionalmente puede redefinir el método parse(). Si su pseudoclase se puede convertir en un valor primitivo, implemente también valueOf().
Ejercicio. Escriba una jerarquía de pseudoclases (funciones constructoras) que generen un documento XHTML válido de longitud y estructura aleatoria. Por ejemplo, comience con la pseudoclase Document. Su función constructora crea las propiedades de un documento típico: el encabezado y el cuerpo, los cuales son a su vez otros objetos cnstruidos con pseudoclases.
La función constructora de Body crea un arreglo de una cantidad aleatoria de elementos hijos escogidos también aleatoriamente. Para efectos de este ejercicio, basta con la siguiente jerarquía.
Document: Header, Body
Header: Style
Body: (Paragraph|Heading|List)+
List: ListItem+
ListItem: Text|Paragraph+|List
De esta forma cada elemento de su jerarquía tendrá al menos: un arreglo de elementos hijos (llámese children); y un método print() que imprime el elemento usando document.write(), y propaga el llamado a todos sus hijos. El método print() debe declararse en el prototipo de la función constructora para que sea compartido por todos los objetos de la misma pseudoclase.
Escriba un documento XHTML que cree un objeto Document y llame su método print(), el cual debe imprimir el cuerpo del documento. Sugerencia, puede utilizar el siguiente ejemplo:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Random document</title>
<script type="text/javascript" src="random_doc.js"></script>
<script type="text/javascript">
var doc = new Document();
doc.printHeader();
</script>
</head>
<body>
<script type="text/javascript">
doc.print();
</script>
</body>
</html>
Ejercicio. Implemente en su jerarquía de elementos una pseudoclase Style que es hijo de Header y que se encarga de generar estilos CSS aleatorios en el documento, de tal forma que al refrescar, la apariencia del mismo sea compleamente aleatoria. Para esto, agregue un método printHeader() a su pseudoclase Document, el cual invoca al print() de Header y éste al de Style.
Programación del navegador
JavaScript es un lenguaje genérico que cualquier software puede implementar para permitir al usuario programarlo. Aunque el número de sistemas que implementan JavaScript va en crecimiento, han sido los navegadores web el ejemplo histórico más evidente. El navegador web utiliza el lenguaje de programación JavaScript para exponer cierta funcionalidad al autor de un sitio web, quien debe aprovecharla sólo para mejorar la experiencia del usuario con su obra, haciéndole más fácil obtener o transmitir información. Por ejemplo, creando efectos visuales que guíen al usuario, ordenando los valores de una tabla para ayudarle a encontrar lo que necesita, ocultado o mostrando información que le es de interés, o intercambiando información con el servidor de tal forma que el usuario no se confunda con una recarga completa de la página.
Ha ido ganando popularidad una corriente llamada Unobtrusive JavaScript (JavaScript no impertinente). Este paradigma sustenta que JavaScript no debería tratar de llamar la atención a sí mismo. No consiste en una variación del lenguaje, sino en un conjunto de prácticas recomendadas, por ejemplo:
- Accesibilidad al contenido (X)HTML. Si JavaScript dificulta al usuario el acceso al contenido; por ejemplo, lanzando ventanas emergentes; el usuario tendrá excelentes provocaciones para deshabilitar el intérprete de JavaScript en su navegador.
- Graceful degradation. Significa que en caso de que el usuario tenga deshabilitado JavaScript en su navegador, o éste no sea compatible en su totalidad, siempre se pueda tener acceso al contenido (X)HTML.
- Separación del contenido y el comportamiento. El programador debe escribir su código JavaScript en un archivo externo e incluirlo en el documento (X)HTML con un elemento
<script src="program.js">. Esto ahorra ancho de banda, permite reutilizar el comportamiento a lo largo del sitio y facilita el mantenimiento del código.
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 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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Global properties</title>
<script type="text/javascript">
// Global property, same as window.genRandom = function() {...}
function genRandom(maxValue)
{
return Math.floor(Math.random() * maxValue);
}
</script>
</head>
<body>
<p>Su número de la suerte es:
<script type="text/javascript">
// genRandom() is defined in another script. It can be called here
// because both scripts share the same global object: window
var num = genRandom(100); // Same as window.num = window.genRandom(100);
document.write( num == 13 ? '(no juegue lotería esta semana)' : window.num );
</script>
.</p>
</body>
</html>
El modelo de ejecución de JavaScript
El código almacenado en los elementos script se ejecuta sólo una única vez: cuando el documento (X)HTML es cargado en el navegador. Una vez que se ha completado la carga, la interacción se realiza mediante eventos. Cuando ocurre un evento, normalmente generado por el usuario, el navegador puede invocar código JavaScript del autor que reaccione al evento, el cual se asocia al objeto que genere eventos a través de atributos intrínsecos. En el siguiente ejemplo, cuando el usuario hace click en la imagen se invoca el método next() del objeto window.player, y mientras el mismo botón se mantiene presionado, se invoca el método forward del mismo objeto.
<img onclick="player.next();" onmousedown="player.forward();" src="img/button_next.svg">
El modelo de ejecución de código JavaScript sigue esta regla. El código que aparece en los elementos script es ejecutado en el mismo orden en que aparecen, durante la carga (parsing) el documento web. Cuando un elemento script termina de ejecutarse, es reemplazado por su salida, la cual es el resultado de las posibles invocaciones a document.write() que se hayan hecho. Inmediatamente el navegador continúa analizando esta salida como cualquier otro código (X)HTML, y posteriormente el resto del documento web.
Una vez que el documento ha terminado de analizarse, todos los elementos script se habrán ejecutado y el contenido externo, como imágenes o sonidos, habrá sido cargado; el navegador dispara el primer evento: onload. El código manejador de este evento se escribe como valor del atributo onload del elemento body. El código ejecutado en este punto, puede hacer modificaciones libremente sobre la estructura del documento, ya que éste se encuentra totalmente cargado y analizado (parsed); pero no debe invocar a document.write(), ya que hará algo inesperado, como reemplazar el documento por completo.
Después de cargar el documento, correr los elementos script y atender el evento onload, el navegador entra en la fase de manejo de eventos (event-driven phase), ejecutando el código JavaScript que se haya asociado a los atributos intrínsecos según los vaya disparando el usuario. Estos manejadores de eventos tampoco deben invocar a document.write(), ya que construirán un nuevo documento, remplazando el anterior.
Finalmente, cuando el usuario abandona la página, el browser dispara el evento onunload también de body, dando una oportunidad final al código JavaScript de correr. Este debe ser eficiente y silencioso, por ejemplo para hacer alguna limpieza necesaria, evitando demoras que confundan al usuario. La siguiente tabla resume los eventos intrínsecos que el autor dispone para mejorar la comunicación con el lector.
Eventos intrínsecos
| Evento |
Descripción |
onclick |
onclick se dispara cuando el usuario hace click sobre el elemento. Si onclick retorna false, el browser no efectúa la operación por defecto asociada al elemento, por ejemplo, no seguirá el hiperlink en caso de un enlace (a), o no enviaría un formulario en caso de un botón submit. |
onmousedown, onmouseup |
onmousedown es disparado cuando el usuario presiona el ratón sobre un elemento y onmouseup cuando suelta el botón del ratón. Si ambos eventos ocurren sobre el mismo lugar de un elemento, se generará un onclick. La mayoría de elementos (X)HTML implementan estos dos eventos. |
onmouseover, onmouseout |
onmouseover se dispara mientras el cursor del ratón está sobre un elemento (X)HTML y onmouseout cuando sale de él. |
onchange |
El manejador onchange se dispara en los elementos que permiten ingresar texto, como input, select y textarea cuando el usuario cambia el valor desplegado del elemento y después mueve el foco hacia otro elemento. |
onload |
El evento onload sólo se puede asociar a body y es lanzado cuando el documento y su contenido externo, incluyendo imágenes, han sido completamente cargados. |
Supóngase que en una ventana del navegador el documento actual es reemplazado por otro, por ejemplo, cuando el usuario escribe un nuevo URL. El nuevo documento no puede acceder a las propiedades que el documento previo creó en la ventana, ya que el objeto window es reestablecido (reset) por el navegador. Esto implica que todas las funciones y propiedades que los scripts definan, durarán mientras el documento actual se mantenga activo.
Consideraciones de seguridad
El hecho de que código ajeno sea ejecutado en su máquina a través de un navegador, da oportunidad a que intenciones malignas puedan llevarse a cabo. Por esto, los navegadores simplemente no soportan ciertas funcionalidades que en otros lenguajes son naturales, como la capacidad de leer, escribir o eliminar archivos en la computadora cliente.
Otras funcionalidades están limitadas. Por ejemplo, JavaScript puede emplear el protocolo HTTP para intercambiar información con el servidor pero no puede abrir un socket o utilizar alguna primitiva de programación de red. Algunas de estas restricciones son controlables por el usuario, ajustando la política de seguridad del navegador. De acuerdo a esta configuración su programa JavaScript:
- Podría abrir nuevas ventanas pero sólo en respuesta a un evento del usuario (onclik).
- Podría cerrar ventanas, pero sólo las abiertas por sí mismo.
- No puede ocultar el texto en la barra de estado cuando el cursor se mueve sobre un enlace.
- No puede crear una ventana de área pequeña o muy grande, sin barra de título ni estado.
- No puede leer ni modificar documentos cargados de servidores diferentes (same-origin policy).
La política del mismo origen (same-origin policy) indica que un script puede acceder únicamente a contenido que tiene el mismo origen que el documento que contiene el script. Es decir, que su código no puede acceder a otro documento que tenga cargado su navegador en otra ventana obtenido de otro sitio web. También dicta que el código JavaScript puede comunicarse a través del objeto XMLHttpRequest sólo con el servidor web de donde se obtuvo el documento.
El objeto window
El objeto global window provee varios métodos y otras propiedades para manipular el navegador, ventanas, direcciones, el historial y similares.
Temporizadores y animaciones
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 volver a establecer un setTimeout() o bien usar el método timer = window.setInterval(code, period), el cual ejecuta el código code repetitivamente en intervalos de period milisegundos, hasta que se invoque window.clearInterval(timer). Esto es muy útil para realizar animaciones, como el siguiente reloj digital.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Digital clock</title>
<style type="text/css">
body { background: black; margin: 4cm 0; text-align: center; }
#clock { font-size: 6em; color: #151520; text-shadow: 2px 2px 7px lightgray; }
</style>
</head>
<body>
<div id="clock">HH:MM:SS</div>
<script type="text/javascript">
window.setInterval( 'updateClock()', 1000 );
function updateClock()
{
var date = new Date();
document.getElementById('clock').innerHTML = date.toLocaleTimeString();
}
</script>
</body>
</html>
En el documento anterior, 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 13 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.
Ejercicio. Modifique el ejemplo del reloj digital para que muestre los milisegundos, y se actualice al menos cuatro veces cada segundo.
El siguiente ejemplo 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 el estilo CSS del elemento con identificador text dinámicamente. 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 -esto se estudiará con más detalle luego-. En este ejemplo, cada vez que se invoca, animateText() calcula en la variable global textLeft la nueva posición del texto (líneas 18 y 19); y en la línea 21 asigna el resultado de este cálculo a la propiedad style.left, cuyo efecto es el mismo a haber escrito #text { left: textLeft; } en CSS. Para que esto funcione, el elemento #text debe "flotar" sobre el documento, lo cual se hizo en la línea 6 indicando que su posición es absoluta.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Texto animado</title>
<style type="text/css">
body { margin: 0; background: #ccc; color: #C8C8C8; font-size: 3em; }
#text { position: absolute; top: 2em; text-shadow: 1px 1px white, -1px -1px #444; }
</style>
</head>
<body>
<div id="text">Su nombre aquí</div>
<script type="text/javascript">
<!--
window.setInterval( 'animateText()', 50 );
var textLeft = 0;
function animateText()
{
textLeft += 5;
if ( textLeft > 320 ) textLeft = -320;
var element = document.getElementById('text');
element.style.left = Math.abs(textLeft) + 'px';
}
-->
</script>
</body>
Un texto animado con JavaScript para desplazarse en vaivén de izquierda a derecha.
Correr este ejemplo.
Ejercicio. Modifique el ejemplo del texto animado para que cuando el usuario haga click en el texto, la animación se detenga, y si se vuelve a hacer click, la animación se reanude.
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:
Propiedades para obtener la geometría del navegador
| Propiedad |
Descripción |
window.outerWidth, window.outerHeight |
Ancho y alto de la ventana del navegador. |
window.screenX, window.screenY |
Posición del navegador en el escritorio del usuario. |
window.innerWidth, window.innerHeight |
Tamaño del área donde el documento se despliega (también llamada área cliente o viewport. Equivale al tamaño de la ventana del navegador sin las barras de menú, herramientas, scrollbars, etc. |
window.pageXOffset, window.pageYOffset |
El segmento del documento actualmente desplegado en la ventana del navegador, expresado como la posición de las barras de desplazamiento (scrollbars). |
Ejercicio. Modifique su solución del texto animado para que el texto no esté limitado a un ancho de 320 pixeles, sino que se ajuste dinámicamente al ancho del navegador.
Ejercicio. En su solución del texto animado, reemplace el texto por una imagen, como una esfera o algún gráfico de su agrado. Haga que el gráfico se mueva aleatoriamente por el área de la ventana sin salirse de esta. Es decir, que el gráfico siempre es visible aún cuando se acerque a los extremos de la ventana.
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 venana 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.
Ejercicio. Escriba un programa JavaScript que genere una o varias tablas con la información del navegador, la ventana y la pantalla citada anteriormente. No utilice document.write(), sino que su programa debe llenar un elemento div del documento. Provea un botón "Actualizar" que cada vez que se presiona, refresca la información anterior. Recuerde aprovechar el operador for-in.
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 ha cometido la 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, repHistory) 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, 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 repHistory 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. 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 con el método window.close() que cierra gráficamente la ventana pero no destruye el objeto window.
<button id="helpButton" onclick="toggleHelp()">Ayuda</button>
<script type="text/javascript">
var helpWindow;
function toggleHelp()
{
if ( helpWindow )
{
helpWindow.close();
helpWindow = undefined;
document.getElementById('helpButton').innerHTML = 'Ayuda';
}
else
{
helpWindow = window.open('help.html', 'help_window', 'width=400,height=350,status=yes,resizable=yes');
document.getElementById('helpButton').innerHTML = 'Cerrar ayuda';
}
}
</script>
El parámetro features 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 siguiente ejemplo, genera un documento dinámicamente en una nueva ventana.
var subwindow = window.open(); // Create a new window with no content
var subdoc = subwindow.document; // Get its Document object
subdoc.open(); // Start a new document (optional)
subdoc.write("<h1>Hello world!</h1>"); // Output document content
subdoc.close(); // End the document
Nótese que tanto document como window tinen métodos open() y close(). El 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. Sino nunca se llama a document.close(), el navegador creerá que está ante un documento incompleto.
Ejercicio. Modifique el ejemplo de la ventana de ayuda. Cuando se presiona el botón, cree una nueva ventana con un documento vacío, es decir, el parámetro url de window.open() debe estar vacío. Haga que su programa JavaScript genere un documento dinámicamente en la nueva ventana, cuyo contenido sea la misma del ejercicio anterior. Puede utilizar subwindow.document.write() si lo desea.
El objeto window tiene métodos para mover y redimensionar la ventana, lo cual es una pobre práctica, ya que esto 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.
Ejercicio. Haga que la ventana emergente del ejercicio anterior aparezca en el mejor lugar. Para esto, defina un ancho mínimo de la ventana emergente. Si en el escritorio hay campo a la izquierda o a la derecha del navegador, use el que tenga mayor espacio y ocupe ese ancho por completo, de tal forma que la nueva ventana aparecerá al lado del navegador y tendrá su misma altura. Si no hay espacio, sitúe la ventana emergente centrada en el navegador.
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:
Propiedades del objeto window.location
| Propiedad |
Descripción |
href |
Es un string con el texto completo del URL. |
protocol, host, pathname, search |
Representan partes individuales del URL. |
reload() |
Recarga la página como si el usuario lo hiciera en el navegador. |
replace(url) |
Reemplaza el documento actual en la ventana por uno nuevo cuyo URL es dado por parámetro. No genera una entrada en el historial de la ventana, de modo que el usuario no tiene forma de regresar al documento previo. |
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. Obligatoriamente.
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 de cerrar el navegador. 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 usuario errores que no eran de él. Los navegadores han cambiado a ocultar los errores y el programador debe buscarlos en alguna bitácora o similar.
El objeto document
En esencia un navegador es un programa que despliega un documento web en una ventana. La sección anterior explica cómo manipular con JavaScript esa ventana. Esta sección explica cómo manipular dinámicamente el documento en ella.
Las propiedades más conocidas del objeto document, son los métodos write() y writeln(). Ambos reciben una cantidad arbitraria de parámetros y los escriben en el documento para que sean analizados (parsed) por el navegador posteriormente. Por eso, estos métodos sólo se deben invocar mientras se está cargando (parsing) el documento. Como es de esperar, writeln() después de imprimir todos sus parámetros, agrega un carácter de cambio de línea. Otras propiedades útiles de document son:
Propiedades del objeto window.document
| Propiedad |
Descripción |
document.title |
Accede al título del documento que se encuentra en el encabezado del mismo. |
document.lastModified |
Contiene un string con la fecha de última modificación del documento. |
document.URL |
Es un string con el URL completo de donde se obtuvo el documento. |
document.referrer |
Es un string con el URL del recurso a través del cual el usuario llegó al documento actual. |
document.domain |
Indica el dominio al cual pertenece el documento, y es usado por la política del mismo origen (same origin policy). |
Las propiedades anteriores permiten, por ejemplo, escribir un pie de página dinámico, como el siguiente:
document.writeln('<address>');
document.write('<strong><a href="', document.URL, '">', document.title,'</a></strong>');
document.writeln('. Última actualización: ', document.lastModified, '.<br/>');
document.write('©', new Date().getFullYear());
document.write(' <strong><a href="http://', document.domain,'">Mi Sitio</a></strong>');
document.writeln('. Todos los derechos reservados.');
document.writeln('</address>');
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. 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 siguiente ilustración muestra un documento sencillo y el árbol de nodos que el navegador genera a partir de él.
Las relaciones jerárquicas entre nodos implican que un nodo puede tener cero o más nodos hijos (child nodes), nodos hermanos (siblings), un nodo padre (parent), nodos descendientes y nodos ancestros. Estas relaciones se implementan como propiedades de la pseudoclase Node. Dado un nodo se puede acceder a los otros nodos con los que está relacionado. Estas y otras propiedades se resumen en la siguiente tabla.
Propiedades de la pseudoclase Node del XML DOM
| Propiedad |
Descripción |
Node.childNodes[] |
Un arreglo que contiene los hijos del nodo actual en el mismo orden en que fueron definidos en el documento. Si el nodo actual no tiene hijos, este arreglo estará vacío. |
Node.firstChild |
El primer nodo hijo del nodo actual, o null si no tiene hijos. |
Node.lastChild |
El último nodo hijo del nodo actual, o null si no tiene hijos. |
Node.nextSibling |
El nodo hermano que continúa al actual o null si es el último hijo del nodo padre (parentNode). Equivale al nodo que sigue al actual en el arreglo parentNode.childNodes[]. |
Node.previousSibling |
El nodo hermano que precede al actual o null si es el primer hijo del nodo padre (parentNode). Equivale al nodo que precede al actual en el arreglo parentNode.childNodes[]. |
Node.parentNode |
El nodo padre o contenedor del nodo actual. Es null en el caso del nodo raíz, nodos que han sido separados (removidos) del documento, o nodos creados libremente que aún no han sido insertados en el documento. |
Node.nodeType |
Un entero que indica el tipo de nodo, por ejemplo: elemento (1), texto (3), comentarios (8). |
Node.nodeName |
Un string con un posible nombre para el nodo. Si el nodo es un elemento se utiliza el nombre del elemento ("body", "div", "p", etc.). Para los demás tipos de nodos se utiliza un texto generado de concatenar el símbolo de número con el tipo de nodo, por ejemplo "#text", "#comment", "#document", etc. |
Node.nodeValue |
Si el nodo es de texto (nodeType == 3) o comentario (nodeType == 8), esta propiedad tendrá un string con dicho texto; de lo contrario el valor null. |
Node.textContent |
Contiene el texto si el nodo es de texto (nodeType == 3) o comentario (nodeType == 8), en la misma forma que nodeValue. Para un elemento (nodeType == 1) contiene el texto resultado de concatenar todos los nodos de texto descendientes. |
Node.ownerDocument |
Una referencia hacia el documento que contiene este nodo. Sirve, por ejemplo, para saber si dos nodos son parte del mismo documento. |
El siguiente código recorre recursivamente todos los nodos del documento e imprime algunas de las propiedades heredadas de la pseudoclase Node. La cantidad de nodos está fuertemente influenciada por el espacio en blanco que se utilice para indentar el marcado, ya que el parser lo interpretará como datos de carácter y los almacenará en nodos de texto. [Para este ejemplo, la impresión con document.write() debe hacerse en un documento distinto, ya que si se hace sobre el mismo, generará una recursión infinita].
function printNodes(node, doc)
{
printProperties(node, doc);
for ( var i = 0; i < node.childNodes.length; ++i )
printNodes( node.childNodes[i], doc );
}
function printProperties(node, doc)
{
var properties = ['firstChild', 'lastChild', 'previousSibling', 'nextSibling',
'nodeName', 'nodeType', 'nodeValue', 'textContent' ];
for ( var i = 0; i < properties.length; ++i )
doc.writeln(properties[i], ': ', node[properties[i]]);
}
Además de las propiedades para acceder a nodos relacionados, la pseudoclase Node provee métodos para modificarlos:
Métodos de la pseudoclase Node del XML DOM
| Propiedad |
Descripción |
Node.appendChild(newChild) |
Agrega el nodo newChild al final del arreglo childNodes[]. El cambio se ve reflejado de inmediato en el documento cargado en el navegador. Si newChild ya forma parte del documento, será removido de su posición actual y reinsertado en la nueva posición. |
Node.insertBefore(newChild, referenceChild) |
Inserta el nodo newChild en el arreglo childNodes[] justo antes que el nodo referenceChild, el cual obligatoriamente debe existir y ser hijo del nodo al cual se le invocó este método. Si referenceChild es null, newChild se insertará al final. Si newChild ya es parte del documento, será removido de su posición actual y reinsertado en la nueva posición. |
Node.replaceChild(newChild, oldChild) |
Reemplaza oldChild con newChild. Si newChild ya es parte del documento, será removido de su posición actual y reinsertado en la nueva posición. oldChild es separado del documento y el cambio se refleja en el navegador. El objeto oldChild no es eliminado de la memoria, sino que sigue vigente y puede ser reinsertado en el documento posteriormente. |
Node.removeChild(child) |
Quita al nodo child del arreglo childNodes[] y del documento (el cambio se refleja visualmente en el navegador). El objeto nodo child no es eliminado de la memoria, y puede ser reinsertado en el documento posteriormente. |
Node.cloneNode(recursively) |
Retorna una copia del nodo al cual este método es invocado. No clona los hijos y descendientes del nodo a menos que se envíe true en el parámetro recursively. El nodo retornado no es parte del documento, por lo que debe ser insertado posteriormente si se quiere que sea visible al lector. |
Node.isEqualNode(other) |
Retorna true si el nodo es idéntico al enviado por parámetro, es decir, tienen los mismos valores para sus propiedades de datos (como el nombre y tipo), y así recursivamente para todos sus hijos. |
Los métodos anteriores permiten mover nodos existentes de un lugar a otro, o clonarlos. El siguiente ejemplo ordena los nodos existentes de una lista alfabéticamente.
<body>
<h1>Reubicar nodos en el documento</h1>
<ol id="sortable_list">
<!-- Note: comments and text nodes will be ignored -->
<li>Los</li>
<li>12</li>
<li>elementos</li>
<li>de</li>
<li>esta</li>
<li>lista</li>
<li>serán</li>
<li>ordenados</li>
<li>alfabéticamente</li>
<li>sin contar</li>
<li>Mayúsculas</li>
<li><p>Incluyendo <strong>este párrafo</strong>.</p></li>
</ol>
<p><button id="sort_button" onclick="sort_list()">Ordenar</button></p>
<script type="text/javascript">
<!--
function sort_list()
{
// Get the parent node whose children will be sorted
var list_element = document.getElementById('sortable_list');
// Do not sort list_element.childNodes[] in place to avoid flickering
// Get an array of the elements to be processed and work with this array
var elements = [];
// Fill the working array with only the desired nodes to be sorted
for ( var child = list_element.firstChild; child; child = child.nextSibling )
if ( child.nodeName.toLowerCase() == 'li' )
elements.push(child);
// Function used to sort the array
function sort_elements(nodeA, nodeB)
{
var textA = nodeA.textContent.toLowerCase();
var textB = nodeB.textContent.toLowerCase();
return textA < textB ? -1 : textA > textB ? 1 : 0;
}
// Sort the elements alphabetically
elements.sort(sort_elements);
// Now elements are sorted in the array, not in the document, reinsert them
// in the desired order. Note, each node will be dettached from its current
// position and reinserted in the desired position automatically
for ( var i = 0; i < elements.length; ++i )
list_element.appendChild( elements[i] );
}
-->
</script>
</body>
Nótese que en el ejemplo anterior se construyó un arreglo temporal (llamado elements[]), el cual se llenará únicamente con los elementos que deben ser ordenados, y luego serán reinsertados en el documento. ¿Por qué no se hizo este cambio directamente en list_element.childNodes[]? Hay varias razones. La más importante es porque childNodes[] no es realmente un arreglo, sino un objeto que se comporta como tal definiendo la propiedad length y una propiedad con nombre numérico para cada elemento que se inserte en él. A estos objetos se les llama "objetos que aparentan ser arreglos" (array-like objects), y su propósito es proveer un arreglo controlado, casi de sólo lectura. Por ejemplo, el programador no puede invocar a list_element.childNodes.sort() porque el array-like object no implementa este método.
La segunda razón es que el arreglo list_element.childNodes[] muy probablemente contiene otros hijos que no son de importancia ordenar, como nodos de texto (surgidos de los espacios en blanco usados para indentar el código fuente) o comentarios. Por esto, es una práctica común construir un nuevo arreglo escogiendo los nodos que realmente se quieren modificar, afectar al arreglo y cuando el procesamiento esté listo, actualizar el documento. Esto reduce además un desagradable efecto de parpadeo (flickering) que confunde al lector al ver partes del documento cambiar arbitrariamente.
Ejercicio. Modifique el ejemplo de ordenar elementos de la lista para que cuando se presiona el botón, ordene intercaladamente en forma ascendente o descendente la lista de elementos.
Cuando se debe crear un nuevo nodo en el documento, no se debe hacer con el operador new, sino utilizar los métodos document.createXxx(data) de la pseudoclase Document. Por ejemplo, document.createElement(tagName) crea un nodo elemento con la etiqueta tagName; document.createTextNode(string) crea un nodo de texto con el string como contenido; document.createComment(string) crea un comentario. Todos ellos crean un nuevo nodo el cual no está asociado al documento. El programador debe insertarlo posteriormente en la jerarquía de nodos para que sea visible al lector, usando alguno de los métodos de la pseudoclase Node como appendChild(), insertBefore() o replaceChild(). El siguiente ejemplo inserta nodos en una lista ordenada.
<body>
<h1>Crear e insertar nodos en el documento</h1>
<p><button onclick="create_node()">Agregar nodo</button></p>
<ol id="dynamic_list">
<li>Presione el botón para agregarle elementos a la lista</li>
</ol>
<script type="text/javascript">
var counter = 0;
function create_node()
{
var list_item = document.createElement('li');
var text_node = document.createTextNode('Elemento autogenerado ' + ++counter);
list_item.appendChild( text_node );
document.getElementById('dynamic_list').appendChild(list_item);
}
</script>
</body>
Ejercicio. Escriba un documento XHTML con un poema, y un botón que al ser presionado invierte el orden de las estrofas (no de los versos), utilizando los métodos de la pseudoclase Node. Imprima los números de las estrofas y resáltelos con estilos CSS para que el cambio sea visualmente evidente.
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:
Tipos de Node del XML DOM
| 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 |
-- |
|
El siguiente ejemplo muestra una función que recorre recursivamente todos los nodos del documento contando cuántos de ellos son elementos:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conteo de elementos</title>
<script type="text/javascript">
<!--
function countElements(node)
{
var count = 0;
if ( node.nodeType == Node.ELEMENT_NODE )
++count;
for ( var i = 0; i < node.childNodes.length; ++i )
count += countElements(node.childNodes[i]);
return count;
}
function fillCount()
{
document.getElementById('count').innerHTML = countElements(document);
}
-->
</script>
</head>
<body onload="fillCount()">
<h1>Conteo de elementos</h1>
<p>El <em>número de elementos</em> presentes en este documento es:
<strong id="count"></strong></p>
</body>
</html>
Una función recursiva que recorre el árbol de nodos del documento y retorna cuántos de ellos son de tipo elemento.
Correr este ejemplo.
Ejercicio. Escriba una función que recorre el documento en que fue invocada y retorna un string con el texto de todo el documento. Imprima este string en un elemento pre al final del documento. Puede usar este enunciado de laboratorio para probar.
Por cada tipo de nodo hay una pseudoclase hija de Node, que aparece en la tercera columna de la tabla anterior. Por ejemplo, cuando el navegador carga el documento y encuentra un comentario, construye un objeto de la pseudoclase Comment, la cual es hija de Node, y cuando encuentra un párrafo creará un objeto Element que es también hijo de Node. Esta jerarquía de pseudoclases se ilustra a continuación.
Cada subclase agrega propiedades a la pseudoclase Node. Por ejemplo, la pseudoclase Element define las siguientes propiedades útiles:
Propiedades de Element en el XML DOM
| Propiedad |
Descripción |
Element.tagName |
String con el nombre del elemento, por ejemplo: "body", "p", etc. |
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. |
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. |
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. 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 figura {ver arriba}. 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 el string src que puede cambiarse dinámicamente con JavaScript. 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 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.
Ejercicio. Reimplemente el ejercicio 5.25 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.
Métodos de HTMLDocument para localizar elementos
| Método |
Descripción |
document.getElementById(id) |
Localiza el único elemento que tiene el identificador id en su atributo homónimo. Retorna el objeto HTMLElement que tiene este identificador o null si ningún elemento en el documento está identificado con el string id. |
document.getElementsByTagName(tagName) |
Selecciona todos los elementos en el documento que fueron creados con la etiqueta tagName, y los retorna en un arreglo que tiene el mismo orden en que aparecen en el documento. Por ejemplo, document.getElementsByTagName('table') retorna un arreglo con todas las tablas del documento. La búsqueda se hace sin importar mayúsculas y minúsculas por compatibilidad con HTML, y si se envía un asterisco '*' en tagName retorna todos los elementos del documento. |
document.getElementsByClassName(classValue) |
El atributo class="c1 c2 ... cN" indica que el elemento pertenece a una o más clases separadas por espacios (y no por comas). Una clase es una agrupación de elementos que comparten características comunes; por ejemplo, una clase ejercicio podría usarse para distinguir todos los párrafos que representen ejercicios en un libro (<p class="ejercicio">...</p>) y aplicarles estilos diferenciados. En JavaScript se puede tener un arreglo con todos los elementos del documento que pertenecen a una o a varias clases con el método document.getElementsByClassName(), que recibe un string con la lista de clases separadas por espacios sin importar el orden. |
document.querySelectorAll(selector) |
CSS tiene una notación estándar para seleccionar elementos a los cuales aplicarles reglas de estilo; por ejemplo, el selector ".ejemplo" recupera todos los elementos que tienen el atributo class="ejemplo" y "#cap01 a[rel='external']" selecciona a todos los enlaces que tienen el atributo <a rel="external"> y que son descendientes del elemento identificado con id="cap01". En JavaScript el método document.querySelectorAll(selector) retorna un arreglo con todos los elementos que satisfacen el selector enviado por parámetro. |
document.querySelector(selector) |
Hace lo mismo que querySelectorAll(), pero sólo regresa el primer elemento que satisface el selector en lugar de una lista de elementos. |
document.getElementByName(name) |
El atributo name sirve para identificar varios objetos relacionados, especialmente una familia de botones de radio (radio buttons). Ya que varios elementos pueden tener el mismo nombre, este método retorna un arreglo de elementos que comparten dicho nombre. |
La pseudoclase Element también define los métodos Element.getElementsByTagName(tagName) y Element.getElementsByClassName(classValue), que 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, como es de esperar:
document.head == document.getElementsByTagName('head')[0];
document.body == document.getElementsByTagName('body')[0];
document.documentElement == document.getElementsByTagName('html')[0];
Manejo de eventos
El manejo de eventos estático consiste en que el autor asocie una función o código JavaScript a un atributo mientras escribe el documento. Por ejemplo:
<body onload="fixExternalLinks(); insertIndex();">
Esto es una mala práctica, ya que el documento (X)HTML sólo debe especificar contenido y no estilo o comportamiento. Así que la asignación debería hacerse con JavaScript, lo cual es muy simple, por ejemplo:
document.body.onload = function() { fixExternalLinks(); insertIndex(); }
Aunque la asignación anterior se hizo con JavaScript y no en el documento (X)HTML, el esquema anterior tiene varios problemas. Supóngase que la asignación anterior se hizo por un archivo1.js que es parte de una biblioteca 1. Un programador que estuviese creando una biblioteca 2 en JavaScript que es independiente de la anterior, probablemente necesitará invocar una función suya cuando el documento (X)HTML se ha cargado. En nuestro ejemplo esto implicaría tener que agregar una tercera función al evento onload de body ¿Cómo hacer para agregar esta tercera función y mantener las otras funciones que pueda ya tener asociadas?. Es deseable disponer de algún mecamismo que diga simplemente "agregue este manejador al evento onload" sin importar cuántos eventos tiene ya asociados. De esto se encarga el método addEventListener().
El método element.addEventListener(event, function, phase) hace que la función function sea invocada cuando el elemento element produce el evento event. El nombre del evento en el primer parámetro es un string sin el prefijo 'on', por ejemplo "mousedown". El segundo parámetro es una función que debe recibir sólo un parámetro: un objeto de tipo Event y debe retornar nada. El tercer parámetro es un booleano, con true indica que el evento puede ser atendido por uno de sus ancestros, mientras que con false se le da primero oportunidad al elemento antes de que a sus ancestros (el por defecto). Esto se explicará más adelante. El siguiente ejemplo muestra un archivo .js que al ser incluido por un documento (X)HTML, invoca dos funciones cuando éste termina de cargarse.
<!-- onload_event_dom2.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eventos del DOM 2</title>
<script src="onload_event_dom2.js"></script>
</head>
<body>
<h1>Manejo de eventos del DOM level 2</h1>
</body>
</html>
// onload_event_dom2.js
function showInfo()
{
window.alert('Esta función JavaScript fue llamada sin que el documento hiciere' +
' nada especial, mas que incluir este archivo .js');
}
function addInfo()
{
var text = 'Este párrafo es producto de un segundo manejador de eventos.';
var paragraph = document.createElement('p');
paragraph.appendChild( document.createTextNode(text) );
document.body.appendChild( paragraph );
}
window.addEventListener('load', showInfo, false);
window.addEventListener('load', addInfo, false);
Un archivo
.js que al ser incluido por un documento, agrega dos manejadores de eventos.
Correr este ejemplo.
El método Element.addEventListener() es parte de lo que se conoce como DOM Level 2, el 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 llama en una de las siguientes tres fases:
- Capturing phase. El evento recorre desde el documento hasta el elemento esperando ser atendido.
- 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() 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 (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() 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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Estallar burbujas</title>
<style type="text/css">
body { margin: 2cm; }
#wrap { width: 600px; height: 216px; margin: 0 auto; border: 5px solid #64859e;
background: #a4c5de; position: relative; }
#wrap img { position: absolute; border: 0; }
</style>
<script type="text/javascript" src="bubble_wrap_min.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
// bubble_wrap_min.js
// Fills the game area with bubble images
function loadGame()
{
// Get the game area
var wrap = document.getElementById('wrap');
// Assume the bubble image dimensions and area dimensions
var imgWidth = 75;
var imgHeight = 72;
var rows = 3;
var cols = 8;
// Fill the game area creating img elements with onclick attribute set
for ( var i = 0; i < rows; ++i )
{
for ( var j = 0; j < cols; ++j )
{
// Create the image as a new node
var img = document.createElement('img');
img.src = 'air.jpg';
// Position the image, CSS must specify 'position:absolute' for img
img.style.top = (i * imgHeight) + 'px';
img.style.left = (j * imgWidth) + 'px';
// When user clicks this image, replace it for a popped image
img.onclick = popBubble;
// Insert the new image as child of the game area
wrap.appendChild(img);
}
}
}
// Called when a image is clicked
function popBubble()
{
// Replace the current image for a popped one
this.src = 'pop.jpg';
// This image cannot be popped again
this.onclick = null;
// Play an auditive feedback
var snd = new Audio('pop.mp3');
snd.play();
}
// Initializes the game when the document is loaded
window.addEventListener('load', loadGame, false);
La función que se envía en el segundo parámetro de element.addEventListener() recibe un objeto Event por parámetro. En el ejemplo del juego de la bolsa de burbujas, el método popBubble() ignora este parámetro. El objeto Event tiene varias propiedades útiles, entre las que sobresalen currentTarget que es una referencia al objeto que generó el evento (equivalente a this); el método stopPropagation() que al ser invocado evita que otros nodos sigan procesando el evento; y preventDefault() que cancela el efecto que tendría normalmente el evento en el navegador, como por ejemplo seguir un enlace si el elemento fuera un hipervínculo. En algunos eventos el navegador envía un objeto MouseEvent que contiene información sobre el puntero del ratón, como su posición (clientX, clientY), el botón usado (button), si hubo teclas modificadoras presionadas en el teclado y otros.
Ejercicio. Escriba un programa JavaScript en un archivo .js que al ser incluido en un documento, busca todas las tablas de la clase class="sortable" y convierte sus encabezados en elementos que reaccionan al clic del ratón. Cuando se presiona un encabezado de columna, se ordenan las filas alfabéticamente por los valores de esa columna.
Ejercicio. Modifique su solución del ejercicio anterior para que el ordenamiento ascendente y descendente se alternativo. Es decir, cuando se presiona el encabezado de una columna se ordena ascendentemente, pero si se vuelve a presionar el encabezado de dicha columna, se ordenan los datos de la tabla en forma descendente. Una tercera vez en orden ascendente, y así sucesivamente.
Ejercicio. Escriba un programa JavaScript en un archivo .js que al ser incluido en un documento, busca un elemento identificado con id="word_index" y crea en él un índice de materias, obtenido de las definiciones (elemento dfn) dispersas por el documento. Cada entrada en su índice de materias debe estar compuesto de enlaces, de tal forma que al hacer click en una de ellas, lleva a la definición en el documento. Puede tomar el libro del curso para sus pruebas.
