javascript avanzado

UNIVERSIDAD NACIONAL DE INGENIERIAFacultad de Ingeniería Industrial y de Sistemas

Centro de Cómputo – Sistemas UNI

JavaScript avanzado

En esta sección desarrollamos algunos aspectos avanzados de la programación en JavaScript de cliente.Iremos añadiendo apartados con regularidad, para abordar el más amplio abanico de cuestiones.

Preparación de los scripts para el año 2000: los métodos getYear y getFullYear

El año 2000 ha generado un problema en la mayoría de los sistemas informáticos y equipos basados en microprocesadores. El precio de la memoria a principios de la era de la informática era tan alto, que los diseñadores optaron por ahorrar representando el año de las fechas con 2 dígitos. No dieron importancia a los efectos que se producirían al llegar el año 2000, cuya representación según este esquema coincide con la del año 1900 (será el año 00).Los lenguajes de programación heredaron durante mucho tiempo esta filosofía. Esto se refleja en la existencia de funciones que no son compatibles con el año 2000 y en la aparición de correcciones a estas funciones en las versiones más modernas de la mayoría de los lenguajes de programación.Como ejemplo, los scripts JavaScript que utilicen el método getYear del objeto Date tendrán el problema del año 2000, ya que esta función se comporta de la siguiente manera:

Para años mayores que 1999, el valor que devuelve getYear es 100 o superior. Por ejemplo, para el año 2010, devuelve 110.

Para años etre 1900 y 1999, el valor que devuelve está entre 0 y 99. Así, para el año 1970 devuelve 70.

Para años inferiores a 1900, el valor que devuelve la función getYear es negativo. Así, para el año 1800 da el valor -100.

Como puede verse, esta función no está preparada para el año 2000, por lo que debe ser sustituida por el método getFullYear (a partir de la versión 1.3 de JavaScript), que devuelve un valor de 4 dígitos para años comprendidos entre 1000 y 9999.Se recomienda no utilizar getYear nunca más. Su existencia queda para permitir la compatibilidad con versiones anteriores de JavaScript.

Prof. Daniel Ramos Castañeda Pag. 1 - 29 [email protected]



Compatibilidad entre versiones

Indice

1. Introducción 2. Versiones de JavaScript y navegadores que las incorporan 3. Objetos JavaScript del Navigator 4.0 y navegadores que los

soportan 4. Manegadores de eventos y versiones a partir de las cuales están

disponibles

1. Introducción

Las sucesivas versiones de JavaScript han ampliando el número de objetos soportados, pero a la vez han provocado confusión entre los desarrolladores de aplicaciones, dificultando la portabilidad de los scripts. Para intentar aclarar un poco esta situación, incluimos en esta sección una serie de tablas, con información sobre los objetos y métodos que soporta cada versión de JavaScript y cada navegador (Navigator y Explorer).

2. Versiones de JavaScript y navegadores que las incorporan

Navegador Versión de JavaScript

NAV 2.0 1.0

NAV 3.0 1.1

NAV 4.0 - 4.05 1.2

NAV 4.06 o superior 1.3 (aproximadamente sigue el estándar ECMA)

MIE 3.0 JScript (aproximadamente JavaScript 1.0, pero con muchos errores)

MIE 4.0 o superior Estándar ECMA


http://www.elcodigo.net/tutoriales/jsavanzado/#punto3








3. Objetos JavaScript del Navigator 4.0 y navegadores que los soportan

Objeto Versión a partir de la cual está soportado

Navigator Explorer

image 3.0 4.0 (soportado desde la 3.0 para Macintosh)

area 3.0 4.0

fileUpload 3.0 4.0 (no usa la misma terminología)

applet 3.0 3.0

layer 4.0 No soportado

screen 4.0 4.0 (contenido en el objeto window)

Array 3.0 3.0 con la versión 2 de JScript.dll

Number 3.0 3.0 con la versión 2 de JScript.dll

navigator 2.0 4.0 (contenido en el objeto window)

function 3.0 3.0 con la versión 2 de JScript.dll

plugin 3.0 No soportado

mimeType 3.0 No soportado

RegExp 4.0 4.0

event 4.0 No soportado




4. Manejadores de eventos y versiones a partir de las cuales están disponibles

Manejador Versión

onAbort 1.1

onBlur 1.0

onChange 1.0 (1.1 para FileUpload)

onClick 1.0

onDblClick 1.2 (no implementado en Mac)

onDragDrop 1.2

onError 1.1

onFocus 1.1 (1.2 para Layer)

onKeyDown 1.2

onKeyPress 1.2

onKeyUp 1.2

onLoad 1.0 (1.1 para image)

onMouseDown 1.2

onMouseMove 1.2

onMouseOut 1.1

onMouseOver 1.0 (1.1 para area)

onMouseUp 1.2

onMove 1.2

onReset 1.1

onResize 1.2

onSelect 1.0

onSubmit 1.0

onUnload 1.0




La seguridad en JavaScript

Indice

1. Introducción 2. El marcado de datos (data tainting) 3. El firmado de scripts

1. Introducción

JavaScript tiene un mecanismo de seguridad por el cual ningún script puede acceder a las propiedades de documentos que procedan de un servidor distinto. Se basa en el concepto del mismo origen, según el cual cuando se carga un documento de un determinado origen, un script cargado de otro origen (y en otra ventana o marco) no puede obtener ni establecer propiedades de objetos del primer documento.El origen en este contexto queda definido como la parte de la URL que contiene el protocolo, el nombre de la máquina, el dominio y el puerto.La política de seguridad por defecto, en todas las versiones de JavaScript, sigue la regla del mismo origen. No obstante, las versiones 1.1 y 1.2 de JavaScript han introducido variaciones sobre este modelo:

2. El marcado de datos (data tainting)

JavaScript 1.1 introduce el marcado de datos, que sólo está disponible en esta versión, habiendo sido sustituido en las versiones posteriores por el firmado de scripts. Cuando el marcado de datos está habilitado, un script de una ventana o marco puede ver las propiedades de un documento de otra ventana o marco, independientemente del origen de ambos.Sin embargo, los desarrolladores pueden marcar (taint) los elementos de sus documentos que desean que sean privados o seguros. Si un script intenta acceder a propiedades marcadas, se mostrará un mensaje de aviso en el navegador, de modo que el usuario puede conceder o denegar el acceso a esa información. Cuando el marcado de datos está deshabilitado, se sigue la regla del mismo origen.Algunas de las propiedades y métodos están marcadas por defecto. El autor de la página puede marcar o desmarcar los elementos de sus scripts, utilizando las funciones taint() y untaint(). En cualquier caso, para que el marcado de datos tenga efecto, debe estar habilitado, lo cual sólo puede hacerlo el usuario final, estableciendo el valor de la variable de entorno NS_ENABLE_TAINT a 1.

3. El firmado de scripts







La versión 1.2 de JavaScript elimina el marcado de datos, sustituyéndolo por el firmado de scripts, basado en el modelo de seguridad de Java para objetos firmados. Para firmar un script se utiliza la herramienta Netscape Signing Tool. Mediante este software se pueden asociar firmas digitales a scripts de una página HTML, a manejadores de eventos, a entidades JavaScript o a scripts en ficheros independientes. La firma digital y un identificador del script se almacenan en ficheros .JAR.Los scripts firmados solicitarán privilegios especiales para ganar acceso a la información restringida, utilzando las clases Java de la Java Capabilites API. Estas clases añaden funcionalidades y mejoran el control que proporciona la clase estándar Security Manager de Java.

Funciones recursivas

Indice

1. Introducción 2. Ejemplo de función recursiva 3. Explicación del ejemplo 4. Ventajas e inconvenientes

1. Introducción

La recursividad es una técnica de programación potente pero peligrosa. Para entender mejor en qué consiste, vamos a ver un ejemplo típico: el cálculo del factorial de un número.

2. Ejemplo de función recursiva

Repasando las matemáticas (estas cosas se olvidan fácilmente) vemos que para calcular el factorial de un número n utilizamos la siguiente fórmula:n! = n * (n-1) * (n-2) * ... * (1)

El siguiente script implementa este algoritmo haciendo uso de la recursividad:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">function factorial(numero) { if (numero > 0) { return numero * (factorial(numero - 1)) } else { return 1 }}</SCRIPT>

3. Explicación del ejemplo








Vamos a intentar comprender cómo funciona el script anterior. La función factorial() utiliza una sentencia condicional if...then...else para determinar cuándo debe llamarse a sí misma. En cada ejecución, la función se llama a sí misma con un valor que es una unidad inferior al valor anterior. Así se implementa la recursividad del algoritmo.

El proceso se prolongaría hasta el infinito si no controláramos el parámetro de entrada de la función. Si el parámetro de entrada de la función es mayor o igual que 1, se llama a sí misma con ese valor menos uno. En la próxima multiplicación utiliza ese valor.Si el parámetro de entrada de la función es menor que 1, devuelve 1 y se inicia el retorno (hay que observar que se retorna en cadena de todas las funciones factorial que hayan sido llamadas).

4. Ventajas e inconvenientes

La recursividad es confusa y, más aún, peligrosa. No es difícil que una programa recursivo deje sin memoria a la máquina sobre la que se está ejecutando, debido a un algoritmo mál codificado. Incluso cuando el programa es correcto, su ejecución con determinados parámetros de entrada puede requerir tantas llamadas recursivas que llegue a agotar los recursos del sistema (cada llamada implica el alamacenamiento de variables de estado y otros parámetros).Otro inconvieniente está en la velocidad. Las sucesivas llamadas a sí misma que realiza la fución recursiva ralentizan la ejecución de todo el proceso.La única gran ventaja de la recursividad está en la reducción, en algunos casos notable, del tamaño del código. Sin embargo, este aspecto nunca pesa más que la creación de un código seguro, rápido y estable.




Expresiones regulares

Indice

1. Introducción 2. Creación de una expresión regular 3. Creación de los patrones 4. Aplicación a la validación de campos de formularios

1. Introducción

Las Expresiones Regulares son patrones que permiten buscar coincidencias con combinaciones de caracteres dentro de cadenas de texto. Estos patrones pueden utilizarse con los metodos exec y text del objeto RegExp, y con los metodos match, replace, search y split del objeto String.Las expresiones regulares están disponibles a partir de la versión 1.2 de JavaScript (Netscape Navigator 4.x y Microsoft Internet Explorer 4.x).

2. Creación de una expresión regular

Par crear una expresión regular, puede utilizarse uno de los siguientes métodos:

exp_reg = /ab+c/exp_reg = new RegExp("ab+c")

La primera opción compila la expresion regular cuando se evalúa el script, por lo que es mejor cuando la expresión regular es una constante y no va a variar a lo largo de la ejecución del programa. La segunda opción compila la expresión regular en tiempo de ejecución.

3. Creación de los patrones

Una expresión regular es una combinación de carácteres normales con carácteres espciales. Por ejemplo, la expresión regular /ejemplo/ encontrará la subcadena "ejemplo" dentro de la cadena "Esto es un ejemplo."

Con la utilización de carácteres especiales se consigue encontrar coincidencias con los retornos de carro, los tabuladores, el inicio o el final de las palabras, las repeticiones de caracteres...

La siguiente tabla muestra una lista de los carácteres especiales más importantes, así como su significado y un ejemplo de aplicacion:

Caracter Significado Ejemplo

\ Indica que el siguiente caracter normal debe ser /\n/ encuentra un








considerado como especial. También se utiliza como caracter de escape para los caracteres especiales.

salto de líena. Si se desea buscar el caracter '\', habrá que utilizar /\\/

^ Se utiliza para encontrar el comienzo de una línea. /a/ encuentra una 'a' en cualquier lugar, pero /^a/ haya una coincidencia con el caracter 'a' si se encuentra al comienzo de una línea.

$ Se utiliza para encontrar el final de una línea.

* Encuentra coincidencia del caracter que le precede cuando aparece 0 o más veces en la cadena.

/hola*/ encuentra coincidencias en las cadena "hol", "hola" y "holaaaa".

+ Igual que el '*', pero cuando el caracter aparece 1 o más veces.

? Igual que el '*', pero cuando el caracter aparece 0 o 1 vez.

. Se utiliza para encontrar cualquier caracter que no sea un caracter de nueva línea.

/.sa/ encontrará coincidencias en las cadenas "casa", "cosa" y "cesa", pero no en "asa".

(x) Encuentra coincidencias con 'x', y recuerda el patrón para su posterior utilización.

x|y Encuentra coincidencia si aparece el caracter 'x' o el caracter 'y'.

{n} Encuentra coincidencia si hay exactamente n apariciones del caracter que precede.

Por ejemplo, /a{3}/ encuentra coincidencia en "holaaa", pero no en "holaa".

{n,} Encuentra coincidencia si hay al menos n apariciones del caracter que precede.

{n,m} Encuentra coincidencia si hay como mínimo n y com máximo m apariciones del caracter que precede.

[xyz] Representa un conjunto de caracteres individuales. /[aeiou]/ encuentra coincidencias con cualquier vocal. Si se utiliza el caracter '-' se pueden definir rangos. Por ejemplo, /[0-3]/ encuentra coincidencias si aparecen en la cadena los caracteres '0', '1', '2' o '3'.

[^xyz] Representa un conjunto de caracteres individuales complementario. Encunetra coincidencias con aquellos caracteres que NO aparezcan en el conjunto. Al igual que en el caso anterior, con el '-' se pueden definir rangos.




[\b] Encuentra coincidencia con el caracter de retroceso.

\b Encuentra coincidencias con los límites de las palabras.

Por ejemplo, /\bola/ encuentra la cadena "ola" en "Viene una ola", pero no en "Viene una cola".

4. Aplicación a la validación de campos de formularios

Una de las aplicaciones más habituales de las expresiones regulares es la validación de campos de formularios. Para ello, se crea una función de validación que contiene una expresión regular por cada tipo de campo que se desea validar.Por ejemplo, podemos crear una expresión regular para campos de teléfono, que compruebe que se han introducido sólo números, espacios o el caracter '-' en el campo correspondiente.Para validar los campos se utiliza el método test de la expresión regular correspondiente. Este método compara la cadena que se le pasa como argumento con el patrón de la expresión regular.El siguiente ejemplo valida campos de teléfono y direcciones de correo electrónico:

function ValidaCampos(formulario) { //expresion regular para telefonos //permite campos vacios y guiones var er_tlfono = /(^[0-9\s\+\-])+$/

//expresion regular para emails var er_email = /^(.+\@.+\..+)$/

//comprueba campo tlfono de formu //usa el metodo test de expresion regular if(!er_tlfono.test(formu.tlfono.value)) { alert('Campo TELEFONO no válido.') return false //no submit }

//comprueba el campo email de formu //usa metodo test de la expresion regular if(!er_email.test(formu.email.value)) { alert('Campo E-MAIL no válido.') return false //no submit }

return true //pasa al submit}

La función de validación se invoca utilizando el evento onSubmit del formulario. Cuando la validación no da positivo, la función de validación devuelve false. Esto cancela el submit, de modo que el usuario pueda corregir la entrada incorrecta. En caso contrario, se devuelve true. El tag form quedaría así:

<form name="formu" action="enviar.cgi" onSubmit="return ValidaCampos(this)">

El gran inconveniente de este procedimiento es que sólo funciona a partir de las versiones 4.0 de los navegadores de Microsoft y Netscape.




Compactando el código de los scripts

Indice

1. Introducción 2. Eliminado espacios, líneas en blanco y carácteres de punto y coma 3. La sentencia condicional if ... else 4. Trabajando con objetos 5. Compartiendo el código

1. Introducción

El tamaño de una página es un aspecto a tener en cuenta, tanto más cuando la velocidad de la conexión a Internet de la mayoría de nuestros visitantes es la de un módem a 33 o 56 Kbps (o incluso menor).Si bien el tamaño de las imágenes suele pesar más en la carga, es la suma de todo lo que al final hace que una página tarde en bajarse 2 minutos en vez de 5 o 10 segundos.A continuación vamos a describir algunas técnicas JavaScript que reducen el tamaño de los scripts, conservando su funcionalidad intacta. Son formas de codificar alternativas, a veces algo más confusas, pero muy utilizadas por los programadores avanzados.

2. Eliminado espacios, líneas en blanco y carácteres de punto y coma

Comenzamos por lo más sencillo: ¿son necesarios los espacios, las líneas en blanco y los puntos y coma que aparecen en el script? La respuesta es simple: todos no.En efecto, para separar sentencias JavaScript basta con un retorno de carro, y no es en absouto necesario poner el punto y coma (;) al final de la línea. Sí es necesario cuando en esa misma línea se va a continuar con otra sentencia.En cuanto a los espacios en blanco, se pueden eliminar todos los que aparezcan al final de una línea. Siempre es conveniente escribir un código legible, pero los espacios en blanco al final de una línea no aportan nada.Finalmente, una separación de varias líenas en blanco entre diferentes sentencias tampoco aporta nada: lo único que añade es tamaño a tu página web. Con un sólo retorno de carro es suficiente.

3. La sentencia condicional if ... else

Una de las sentencias más utilizadas en JavaScript es el if ... else. Vemos un ejemplo:

if ( hola == true ) alert('¡Hola!')









else alert('¡Adios!')

Esta codificación es clara y no deja lugar a dudas sobre lo que hace el script. Sin embargo, existe una forma de simplificarla.Para empezar, la evaluación de ( hola == true ) puede tomar dos valores: true (verdadero) o false (falso). Ahora bien, la evaluación de ( hola ) toma igualmente esos mismos valores. Por ello, las líneas anteriores pueden escribirse como:

if ( hola ) alert('¡Hola!')else alert('¡Adios!')

Esto es muy habitual en la mayoría de los lenguajes de programación. De hecho, es posible utilizar este truco incluso cuando el valor de la variable que se utiliza en la condición es numérico, ya que en JavaScript (al igual que en otros lenguajes de programación, como el C) un valor numérico de 0 es evaluado como false, y cualquier otro valor es true.Sin embargo, todavía podemos reducir más el tamaño de las sentencias condicionales. Las 4 líenas anteriores pueden convertirse en una sóla si se utiliza el operador ?. Este operador evalúa la condición a su izquierda y devuelve el primer valor a su derecha si es verdadera, y el que aparece tras el caracter ":" si es falsa. Vemos como queda nuestro ejemplo:

( hola ) ? alert('¡Hola!') : alert('¡Adios!)

Increible, pero cierto.Nota: como nos ha sugerido José Juan, un visitante de /*El Código*/ al que damos las gracias por su colaboración, aún es posible reducir más el ejemplo anterior. Esta codificación es más lógica aunque quizá más difícil de entender.

alert( hola ? '¡Hola!' : '¡Adios!')

4. Trabajando con objetos

JavaScript es un lenguaje basado en un modelo de objetos. Los objetos JavaScript representas los elementos de una página HTML y permiten realizar acciones sobre ellos. Cuando trabajamos con formularios, es frecuente tener que escribir líneas como estas:

formulario.campo1.value = '¡Hola!'formulario.campo2.value = 10if ( formulario.lista.selectedIndex == 2 ) formulario.campo3.value = formulario.campo4.value...

Como se observa, para acceder a elementos del objeto formulario tenemos que nombrarlo en primer lugar (así el script sabe a qué formulario concreto nos estamos refiriendo).Existe una forma de resumir el código anterior, utilizando la sentencia with:

with ( formulario ) { campo1.value = '¡Hola!'




campo2.value = 10 if ( lista.selectedIndex == 2 ) campo3.value = campo4.value}

Como se observa, ya no tenemos que añadir "formulario." cada vez que queramos referirnos a un elemento del objeto formulario.

5. Compartiendo el código

No podemos finalizar este capítulo dedicado a la reducción del tamaño que ocupa el código sin mencionar el encapsulamiento en archivos .js de los scripts que utilicemos en varias páginas. Podemos copiar nuestro código en un fichero a parte (de extensión .js) y cargarlo con la página, del siguiente modo:

<script languaje="JavaScript" src="codigo.js"></script>

Realmente, esto no reduce el tamaño del script, pero tiene dos ventajas claras: El código sólo se carga una vez. Para el resto de páginas en que aparezca

la líena anterior, el navegador utilizará la copia del fichero que tiene en la caché (no lo descarga de nuevo).

Modificando un sólo fichero cambiamos el código de todas las páginas en las que se utiliza (esto es algo realmente importante).

Sin embargo, hay que tener en cuenta que la incluisión de JavaScript en ficheros externos sólo está soportada a partir de las versiones 3.x del IE y del Navigator.




El Modelo de Ojetos de Documento (DOM)

Indice

1. Introducción 2. ¿Qué es el DOM? 3. Compatibilidad entre los DOMs 4. El DOM según Netscape 5. Acceso a los elementos del modelo

1. Introducción

La programación orientada a objetos se ha popularizado enormemente en los últimos días, y ya resulta difícil encontrar lenguajes de programación que no tengan una versión o que no estén basados en esta filosofía.JavaScript no se queda al margen de esta tendencia, y aunque no permite dos de las características clásicas de los lenguajes orientados a objetos (ni la herencia ni el polimorfismo), sí permite la creación y manipulación de objetos sencillos, y la definición de métodos y propiedades para dichos objetos.Sin embargo, lo que verdaderamente nos interesa conocer de un lenguaje de scripts como JavaScript, es el Modelo de Objetos de Documento (DOM, Document Object Model). El DOM es el conjunto de objetos predefinidos que nos permite acceder a todos los elementos de una página y a ciertas características específicas del navegador. Vamos a intentar arrojar luz sobre el oscuro DOM.

2. ¿Qué es el DOM?

El DOM es una jerarquía de objetos predefinidos que describen los elementos de la página web que está mostrando el navegador, así como otras características del proceso de navegación (como son el historial, el tamaño de la ventana de navegación o el contenido de la barra de estado del navegador). Si no se está familiarizado con la programación orientada a objetos, el concepto de objeto puede resultar algo difuso. Un objeto es, en el fondo, un conjunto de variables y funciones que actúa sobre dichas variables, encapsuladas en un mismo paquete. El acceso a las funciones y a las variables se realiza mediante una interfaz bien definida que aisla al programador de la necesidad de conocer cómo están implementadas internamente dichas funciones. De este modo, la programación orientada a objetos resulta muy intuitiva, y más próxima al conocimiento humano.Veamos un ejemplo sencillo. En JavaScript, para escribir un mensaje en un cuadro de diálogo utilizamos:window.alert("¡Hola mundo!")Si bien no conocemos como funciona internamente la función alert(), sabemos cómo invocarla. La abstracción es tal que nos basta con saber que se trata de una función del objeto window. A estas funciones se las llama métodos, y a las variables propiedades.









3. Compatibilidad entre los DOMs

Aunque puede parecer paradigmático, actualmente no existe una gran diferencia entre el soporte de JavaScript que ofrecen los fabricantes de los dos navegadores dominantes, Netscape Navigator y Microsoft Internet Explorer. Lo que verdaderamente les diferencia es el Modelo e Objetos de Documento que incorporan.De hecho, el DOM podría considerarse algo independiente del propio lenguaje de scripts. Esta es la idea recogida en el esfuerzo del W3C (World Wide Web Consortium) por obtener un estándar par el Modelo de Objetos de Documento. El estándar, que está aún en desarrollo, se divide en 3 partes:

DOM Nivel 1 Core (definiciones fundamentales) DOM Nivel 1 HTML DOM Nivel 1 XML

Si este estándar triunfa y tanto Netscape como Microsoft se adhieren a él, el futuro de los scripts para la red será mucho más diáfano, al desaparecer las incompatibilidades entre los diferentes navegadores (pensemos, por ejemplo, en lo costoso que resulta realizar diferentes versiones de un mismo código para que sea ejecutable por todos los navegadores).

4. El DOM según Netscape

El Modelo de Objetos de Documento que propone Netscape en sus versiones 4.x del Navigator resultaba suficiente cuando el DHTML era sólo una idea. Sin embargo, ahora que es ya una realidad, el DOM de IE 4.x/5.x de Microsoft resulta mucho más potente y versátil. No debe extrañarnos, por tanto, que el futuro estándar del W3C se aproxime al de Microsoft. La futura nueva versión del Navigator (bautizca como Netscape 6) soportará el DOM estándar del W3C.Realmente el DOM del Navigator 4.x es un subconjunto del DOM del IE 4.x/5.x. Esto es lo que hace que el Navigator presente limitaciones importantes en su capacidad de acceder a ciertos elementos de una página y de modificar sus propiedades.El siguiente esquema muestra el DOM del Netscape Navigator 4.x:




Para establecer una comparación, mostramos a continuación el DOM de Microsoft (aunque sólo hasta un segundo nivel). En este esquema hemos marcado los objetos comunes con Netscape en color verde, y los que sólo soporta Netscape en azul.




5. Acceso a los elementos del modelo

Para acceder a una propiedad de un objeto del modelo se utiliza la siguiente nomenclatura:

nombre_objeto.nombre_propiedad

Para acceder a un método, se utiliza una sintáxis similar:

nombre_objeto.nombre_metodo()

Entre paréntesis se le pasan al método los argumentos necesarios para su ejecución. Un objeto de JavaScript es, básicamente un array. Esto quiere decir que es posible acceder a las propieades del objeto utilizando también la sintáxis siguiente:

nombre_objeto["nombre_propiedad"]




Si observamos el DOM de la figura anterior, todos los objetos dependen jerárquicamente del objeto window. Para acceder al objeto document, sería necesario usar siempre la sintaxis window.document. Sin embargo, en JavaScript el objeto window es el objeto por defecto, de modo que puede omitirse.




Detección y corrección de errores en JavaScript

Indice

1. Introducción 2. Tipos de errores 3. Consolas de error de los navegadores 4. Errores más frecuentes en JavaScript 5. Algunos trucos para encontrar errores 6. Conclusión

1. Introducción

Todo programador, sea novel o experimentado, se ha encontrado en más de una ocasión ante la necesidad de corregir errores en el código de un programa. A estos errores se les llama, típicamente, bugs, y de esta palabra inglesa (que podríamos traducir como bichos) viene el concepto de debuggin o depuración del código.La mayoría de lenguajes de alto nivel incluyen en sus interfaces de programación sofisticadas herramientas de depuración de código. Estas aplicaciones permiten la ejecución de los fragmentos de código erróneos por separado, y paso a paso, con la posibilidad de incorporar ventanas para visualizar los valores de las variables que intervienen en la ejecución, introducir puntos de ruptura para detener la ejecución cuando se cumple cierta condición, etc.Desgraciadamente, JavaScript no tiene todavía un buen depurador de código, y los programadores debemos echar mano del ingenio (y la experiencia) para localizar los errores. Este capítulo pretende ser una guía de ayuda a la hora de detectar y corregir errores en nuestros scripts.

2. Tipos de errores

En JavaScript pueden producirse 3 tipos de errores: errores en tiempo de carga, errores en tiempo de ejecución y errores lógicos. Vamos a ver en qué se caracteriza cada uno de ellos:

2.1 Errores en tiempo de carga

Este tipo de errores son los que el intérprete de JavaScript encuentra en el momento en que se carga la página. En su mayoría son errores de sintaxis debidos al incumplimiento de alguna de las reglas básicas de la escritura de código en el lenguaje JavaScript. Un ejemplo típico sería la definición de una variable de tipo cadena si utilizar las comillas. Por ejemplo:

var cadena = ¡Hola mundo!

La línea anterior provocará un error en tiempo de carga. Este tipo de errores se caracterizan por la aparición en la ventana del navegador de un cuadro de advertencia de la existencia del error. En este cuadro aparecerá una descripción Prof. Daniel Ramos Castañeda Pag. 19 - 29 [email protected]









del error (más o menos útil), la línea que lo contiene y su número de línea. Esta información, aunque de gran ayuda, puede no corresponderse con la línea real del error.Para dificultar más nuestra labor, las distintas versiones de los navegadores muestran mensajes diferentes para el mismo error, con ventanas de aviso también diferentes. En el apartado siguiente trataremos esto en detalle.

2.2 Errores en tiempo de ejecución

Aunque nuestra página se cargue sin ningún error, eso no quiere decir que, posteriormente no se vaya a producir un error en tiempo de ejecución del script. Este tipo de errores se deben, normalmente, a un uso inapropiado de las funciones y objetos del lenguaje. Como ejemplo típico, intentar utilizar el valor de una variable no definida produce error en tiempo de ejución:

var Nombre = "Pedro"document.write(nombre)

Observese en el ejemplo anterior que la primera variable es Nombre y la segunda nombre, con minúscula. Como para JavaScript son dos variables distintas, la variable nombre no existe y produce un error en tiempo de ejecución.Este tipo de errores también producen la aparición de cuadros de aviso, con el tipo de error y la línea donde podría estar el problema.

2.3 Errores lógicos

Finálmente, podemos tener un script perfecto codificado, y sin ninguna clase de error en tiempo de ejecución, pero que cuando se desea que cambie el color de un texto a rojo, lo ponga en verde. Este tipo de problemas son debidos a errores lógicos, y suelen ser más difíciles de detectar que los anteriores.

3. Consolas de error de los navegadores

Como ya se ha comentado, cada navegador es un mundo, y trata de diferente forma los errores que aparezcan en el código. El Internet Explorer 4.0 abre un cuadro de aviso con cada error que aparezca en el script. Desgraciadamente, los mensajes de error que muestra son de poca ayuda, y el número de línea que indica suele estar equivocado. La versión 5.0 de este navegador mejora este comportamiento, y además permite elegir una navegación sin mensajes de error, avisándonos de que hay un error mediante un icono en la barra de estado:

Pulsando sobre el icono, aparecerá un cuadro con información sobre los errores encontrados. Vamos a ponerlo a prueba con este ejemplo:

window.write("¡Hola mundo!")

En la línea anterior (línea 11 de la página de pruebas) existe un error de ejecución, ya que el método write pertenece al objeto document, y no al objeto window. En el Internet Explorer 5.0, tras pulsar sobre el icono, nos aparece esta ventana:




Como se observa, el navegador nos informa correctamente de que el error está en la línea 11, y de que es porque "El objeto no acepta esta propiedad o método". En este caso, el mensaje es de bastante ayuda.El Netscape Navigator utiliza un sistema similar, pero ya desde las versiones 4.x. Cuando detecta un error en la página, aparece el texto "JavaScript error. Type javascript: into location for details" en la barra de estado. Este mensaje indica que escribiendo javascript: en la barra de direcciones y pulsando intro obtendremos más información sobre el error. Al hacerlo, se abre la consola de errores JavaScript del Navigator. En el ejemplo anterior:

En esta ventana aparecen listados los errores recientes de la página. Su contenido puede borrarse (para comenzar una nueva depuración). Además, la ventana puede dejarse permanentemente abierta para mayor comodidad. También incorpora un cuadro de texto para introducir líneas de código y ejecutarlas, lo que nos permite comprobar si tienen errores.Como se ve, la información suministrada también es correcta, aunque está en perfecto inglés (la versión utilizada es la 4.7, que a día de hoy no tiene traducción).

4. Errores más frecuentes en JavaScript




Vamos a describir a continuación algunos de los errores más habituales que se cometene en JavaScript. Esta lista puede servir de guía para encontrar el origen de nuestros errores, y para intentar evitarlos en un futuro.

4.1 Utilización de cadenas sin las comillas

Aunque puede parecer tonto, este error sintáctico es uno de los má frecuentes. Sobre todo cuando dentro de una cadena tenemos que usarr el propio caracter de las comillas, y utilizamos para ello comillas simples y comillas dobles (JavaScript permite esta dualidad dentro de las cadenas, para facilitar la inclusión de código JavaScript en parámetros de etiquetas HTML). Por ejemplo:

<body onLoad="EscribeTitulo(Título de la página)">

En este ejemplo, se invoca la función EscribeTitulo() desde el evento onLoad. Si esta función recibe un parámetro tipo cadena, la cadena debe ir entre comillas simples, o se produce un error en tiempo de carga.También es muy frecuente olvidarse de cerrar las comillas (simples o dobles) en una sentencia que las utiliza indistintamente (muy frecuente, debido a la dificultad de la lectura de este tipo de codificación).

4.2 Utilización de un sólo signo de igualdad en sentencias de comparación

Este error es tan común, que casi todo programador de lenguajes como C o JavaScript lo ha cometido en algún momento. Para estos lenguajes, no es lo mismo:

variable1 = variable2

que

variable1 == variable2

Lo primero es una asignación (el contenido de la variable2 se asigna a variable1). Lo segundo es una operació de comparación, que devuelve verdadero o falso. Este error se comete habitualmente en sentencias de bifurcación del tipo if (condicion) ... else ...

if (nombre = "Pedro") document.write("Pedro")

Como se aprecia en el ejemplo, donde se quiere hacer una comparación se está realizando una asignación.

4.3 Acceso a objetos que no existen todavía

Otro error muy frecuente es intentar usar métodos o propiedades de objetos que todavía no existen. El procesamiento de una página HTML se produce según se va cargando. Si un script se ejecuta en la cabecera de una página, y sin que se lance su ejecución mediante una función asociada a un evento, en el momento de su ejecución pueden no existir objetos de la página como formularios, imágenes, etc. a los cuales el script puede querer acceder. Por ejemplo:




<html><head><script language="javascript">document.formulario.texto.value = "¡Hola!"</script><body><form name="formulario"><input type="text" name="texto"></form></body>

Este error también se produce cuando un script de un marco intenta acceder a propiedades de la página de otro marco. Puede suceder que esta página todavía no se haya cargado en el momento en que se ejecuta el script.

4.4 Uso incorrecto la jerarquía de objetos

Este error es muy frecuente cuando se está aprendiendo JavaScript y no se conoce la jerarquía de objetos con precisión. Se produce cuando intentamos acceder a una propiedad o método de un objeto, pero nos equivocamos en la jerarquía. Por ejemplo:

document.forms[0].value = "¡Hola!"

La propiedad value no existe en el objeto forms (que representa a un formulario), sino en los objetos cuadro de texto del formulario.

4.5 Mala colocación de las llaves de bolques

Otro error muy frecuente es la falta de alguna llave de cierre de bloque de sentencias de código, o la mala colocación de la misma. Este error, difícil de detectar, conduce a mensajes que, con frecuencia, nada tienen que ver con el error. Se produce en la definición de funciones, en la creación de sentencias de bifurcación anidadas, etc. Veamos un ejemplo:

if (nombre == "Pedro" { document.write("¡Hola Pedro!")else { alert("¡Hola!"}

Como se ve, delante del else falta una llave de cierre de bloque de sentencias de código, que nos llevará a un error en tiempo de carga.

4.6 Uso incorrecto de los nombres de variables

Este error tiene muchas variantes. Para empezar, JavaScript distingue entre mayúsculas y minúsculas, lo que hace que miVariable y mivariable sean dos variables distintas.Por otra parte, existen una serie de palabras reservadas que no pueden utilizarse como nombres de variables. Por ejemplo, una variable en JavaScript no puede llamarse var, porque esta palabra reservada la usa el lenguaje para la declaración de variables.Este problema se puede extender a la utilización incorrecta de los nombres de la jerarquía de objetos. Confusiones del tipo:

document.writte("¡Hola!")




no son infrecuentes (obsérvese cómo se ha escrito write).

5. Algunos trucos para encontrar errores

Como sucede en la mayoría de las actividades humanas, la experiencia nos lleva al uso de ciertos trucos que pueden facilitar mucho las cosas en la ardúa tarea que queremos acometer. En la depuración de código existen también algunas técnicas, que describimos a continuación:

5.1 Establecimiento de puntos de inspección

Conocidos como watchpoints, los puntos de inspección nos permiten conocer el valor de una variable o propiedad en algún momento de la ejecución del programa. Como no disponemos de un depurador de código, para tener puntos de inspección podemos recurrir al simple truco de añadir sentencias alert() con el nombre de la variable que queremos monitorizar. Ejemplo:

<script language="javascript">var contador......//monitorizando contadoralert("Variable contador: " + contador)...</script>

Como se ve, hemos introducido en la funcion alert() un indicador de la variable cuyo valor se va a mostrar. De lo contrario podemos crear gran confusión, y perder noción de lo que se está mostrando.

5.2 Eliminación parcial de segmentos del código

Otra técnica muy utilizada es la eliminación de partes del código para verificar si es en ellas donde se encuentra el error. Para ello, se utilizan los caracteres para comentar código que incorpora JavaScript. Para comentar una sóla línea podemos usar los caracteres //. Si lo que se quiere es impedir la ejecución de bloques enteros de código, es preferible usar el comentario de tipo /* ... */. Encerrando entre ellos parte del código impedimos su ejecución.

5.3 Prueba de líneas de código

Si dudamos sobre la validez de cierta codificación, puede ser útil esta técnica. Teclenado javascript: en la barra de direcciones del Navigator, y a continuación una sentencia JavaScript, ésta será ejecutada, lo que nos permite verificar si hay errores en ella. De igual modo puede utilizarse el cuadro de texto de la consola de errores del Navigator.Si el código que queremos probar contiene más de una sentencia, pueden separarse empleando el caracter ; (punto y coma).

5.4 Utilizacion de editores de texto específicos

Aunque puede parecer trivial, la detección y corrección de errores se ve enormemente facilitada si utilizamos editores de texto específicos, que inorporen




funcionalidades como la coloración del código según la sintaxis, la detección de bloques entre llaves y paréntesis, la inclusión del número de línea, etc.Basta con observar cómo cambia el aspecto de un mismo bloque de código de un editor a otro:

En el segundo caso estamos usando el Ultra Edit, un editor de texto muy potente y que ofrece grandes ventajas. Si quieres saber más sobre este editor, visita la sección Nuestro análisis.

6. Conclusión

Como hemos visto a lo largo de este capítulo, la corrección de errores en JavaScript no es tarea sencilla. Siguiendo unas técnicas básicas, conociendo los tipos de errores y a qué suelen ser debidos, y empleando las herramientas adecuadas, podemos dar con los problemas más rápidamente y ahorrarnos muchos minutos de codificación.

Comandos de la línea de direcciones del Navigator

Los siguientes comandos pueden ejecutarse directamente desde la línea de direcciones del Netscape Communicator. Permiten obtener información sobre ciertos aspectos del navegador (documentos almacenados en la cache, historial, etc.) o realizar operaciones especiales (abrir la consola de JavaScript, realizar un FTP).


http://www.elcodigo.net/recursos/analisis.html



javascript: Lanza la consola de JavaScript del Communicator, que permite visualizar los mensajes de error que se han producido durante la ejecución de los scripts de una página. También permite ejecutar comandos JavaScript.

JavaScript:<codigo JavaScript>;

Lanza el interprete JavaScript y ejecuta el código JavaScript que se especifique. Ejemplo: JavaScript:alert(document.cookie); permite ver las cookies que nos han enviado durante la sesión actual.

about:global Aparece en la ventana del navegador la lista completa de los últimos sitios que ha visitado. Si se rellenó algún formulario, también aparecen los datos suministrados (siempre y cuando el método de envío fuera GET).

about:plugins Visualiza información sobre los plug-ins instalados.

about:cache Aparece en la ventana del navegador la lista completa de los documentos, imágenes, etc. almacenadas en la cache del disco duro.

about:memory-cache Muestra en la ventan del navegador una lista de los documentos, imágenes, etc. que se encuentran en la cache de la memoria.

about:mozilla Muestra una página con un texto en inglés extraido del libro "The Book of Mozilla". Una broma del equipo de desarrollo de Netscape.

view-source:http://... De esta forma podemos obtener el código fuente de una página Web, sin descargarla. Es interesante cuando la página que se descarga ejecuta código JavaScript que escribe en la página. La opción del menú Ver - Origen, no permite ver el código real de la página.

ftp://login:password@url De esta forma puede realizarse con el Navigator un FTP no anónimo, en el que especificamos nuestro login (identificador de usuario) y nuestro password.

Si no se especifica login:password, se realiza un FTP anónimo.




Seguridad en el Navigator

La seguridad de nuestro navegador es importante, de cara a utilizar determinados servicios que Internet pone a nuestra disposición y que están cobrando gran importancia (comprar en una tienda virtual, realizar operaciones bancarias, descargar software, ...). En esta página se responde a algunas cuestiones habituales relacionadas con la seguridad del Communicator.

Indice

1. ¿Usa mi navegdor criptografía fuerte? 2. ¿Son seguras las transacciones que utilizan el protocolo SSL? 3. He olvidado la palabra de paso de la base de datos de certificados

1. ¿Usa mi navegador criptografía fuerte?

Como es sabido, el gobierno de los Estados Unidos pone limitaciones a la exportación de productos criptográficos. Estas limitaciones implican que las versiones legales de los navegadores de Netsacpe y Microsoft distribuidas en Europa utilicen claves de cifrado simétrico de 40 bits (en lugar de utilizar claves largas, de 128 o 256 bits, más seguras).Con la potencia de cálculo adecuada (al alcance ya de grandes organizaciones), se ha demostrado que claves DES de 40 bits pueden romperse en cuestión de días. Por ello, para aplicaciones financieras y determinados organismos públicos, las limitaciones de exportación se han relajado, de modo que los servidores estas organizaciones pueden utilizar criptografía fuerte.Las versiones 4.x de los navegadores de Netscape y Microsoft soportan la utilización de claves de 128 bits, pero estas funcionalidades están bloquedas, y sólo se activan cuando se realiza una comunicación SSL con un servidor que esté aprobado por el programa Verisign Global Server para ofrecer internacionalmente servicios Web con criptografía fuerte.En cualquier otro caso los navegadores utilizan criptografía de débil (con claves de 40 bits) aunque el servidor haya sido desarrollado fuera de los Estados Unidos y soporte cirptografía fuerte (por ejemplo, Apache-SSL).Se puede encontrar más información sobre este tema en la siguiente URL (en inglés): http://www.fortify.net (esta empresa distribuye un plug-in para dar soporte de criptografía fuerte a los navegadores de Netscape y Microsoft).

2. ¿Son seguras las transacciones que utilizan el protocolo SSL?

El protocolo SSL (Secure Sockets Layer) fue creado por Netscape en 1994 e incorporado en la primera versión del Navigator, para dotar de seguridad las comunicaciones TCP/IP. La versión 3 de este protocolo es la más utilizada en la actualidad (Navigator 3.0 o superior e Internet Explorer 3.0 o superior), dotando a los navegadores de mecanismos para garantizar:


http://www.fortify.net/

http://www.elcodigo.net/netscape/#seguridad3





Confidencialidad: la información viaja cifrada (incluyendo los contenidos de los formularios, las cookies y las propias cabeceras HTTP).

Integridad: si por el camino se produce una modificación de la información, el sistema es capaz de detectarlo.

Autenticación de servidores (y opcionalmente, de clientes): los servidores poseen certificados digitales emitidos por una Autoridad de Certificación que garantiza que pertenecen a la organización o entidad a la que representan.

Sin embargo, existen algunos aspectos que todavía deben mejorarse:

I. Debido a las leyes de exportación del govierno americano, el software desarrollado en Estados Unidos y exportado a paises extranjeros sólo puede utilizar criptografía débil. Vea el punto ¿Usa mi navegador criptografía fuerte?

II. Para que la información de un formulario viaje cifrada con SSL, la URL del tag ACTION debe comenzar con https://... (esto le indica al navegador que utilice el protocolo HTTP sobre SSL). Un usuario rellena un formulario de una página recibida utilizando el protocolo SSL pensando que es segura. Sin embargo, cuando realiza el submit del formulario, puede estar enviando sus datos en claro.

III. Y después de enviar nuestros datos... ¿qué pasa con ellos? El protocolo SSL asegura el canal de comunicación, pero cuando los datos sean recibidos por el servidor (y probablemente almacenados en una base de datos) están expuestos a múltiples ataques, y su seguridad depende ya de los medios de seguridad que incorpore el servidor.

3. He olvidado la palabra de paso de la base de datos de certificados

El Communicator almacena los certificados digitales en un base de datos, protegida por una palabra de paso que puede establecer el usuario. Si el usuario olvida este password, no puede utilizar su clave privada, lo que impide que pueda firmar mensajes y descifrar los mensajes que reciba encriptados.Como solución parcial al problema, es posible modificar la configuración del Communicator para que NO solicite la palabra de paso de la base de datos de certificados. Para ello, deben seguirse los siguientes pasos:

1. Cerrar todas las instancias del Communicator que estén abiertas.2. Renombrar el fichero key3.db del perfil del usuario en cuestión a key3.old.

3. Al reiniciar el Communicator, podrá accederse a la base de datos de certificados sin suministrar un password.

Nota: debe observarse el riesgo que supone dar la posibilidad de utilizar una clave privada sin suministrar palabra de paso. También hay que observar que si la máquina de un usuario está accesible, la operación descrita anteriormente puede ser realizada por terceras personas para utilizar las claves del usuario real.






Más información en http://www.thawte.com/personal/navigator.html.


http://www.thawte.com/support/personal/navigator.html

javascript avanzado

Documents