Parte 2: Clases y objetos nativos

2.1 Libreria de funciones Javascript

Javascript pone a nuestra disposición un conjunto de funciones que llamamos funciones nativas de Javascript.

Javascript contiene una buena cantidad de funciones en sus librerías. Como se trata de un lenguaje que trabaja con objetosmuchas de las librerías se implementan a través de objetos. Por ejemplo, las funciones matemáticas o las de manejo de strings se implementan mediante los objetos Math y String. Sin embargo, existen algunas funciones que no están asociadas a ningún objeto y son las que veremos en este capítulo.

Estas son las funciones que Javascript pone a disposición de los programadores.

eval(string) 

Esta función recibe una cadena de caracteres y la ejecuta como si fuera una sentencia de Javascript. 

parseInt(cadena,base)

Recibe una cadena y una base. Devuelve un valor numérico resultante de convertir la cadena en un número en la base indicada. 

parseFloat(cadena) 

Convierte la cadena en un número y lo devuelve. 

escape(carácter) 

Devuelve un el carácter que recibe por parámetro en una codificación ISO Latin 1. 

unescape(carácter) 

Hace exatamente lo opuesto a la función escape. 

isNaN(número)

Devuelve un boleano dependiendo de lo que recibe por parámetro. Si no es un número devuelve un true, si es un numero devuelve false.

2.2 Ejemplos de funciones de la librería Javascript

Varios ejemplos de funciones de la librería: eval(), parseInt(), isNaN().

2.2.1 Función eval

var miTexto = "3 + 5" 

eval("document.write(" + miTexto +")") 

Primero creamos una variable con un texto, en la siguiente línea utilizamos la función eval y como parámetro le pasamos una instrucción javascript para escribir en pantalla. Si concatenamos los strings que hay dentro de los paréntesis de la función eval nos queda esto. 

document.write(3 + 5) 

La función eval ejecuta la instrucción que se le pasa por parámetro, así que ejecutará esta sentencia, lo que dará como resultado que se escriba un 8 en la página web. Primero se resuelve la suma que hay entre paréntesis, con lo que obtenemos el 8 y luego se ejecuta la instrucción de escribir en pantalla.

2.2.2 Función parseInt

Esta función recibe un número escrito como una cadena de caracteres, y un número que indica una base. Se suele utilizar pasándole un string para convertir la variable de texto en un número.

Veamos una serie de llamadas a la función parseInt para ver lo que devuelve y entender un poco más la función. 

document.write (parseInt("34")) 
Devuelve el numero 34 

document.write (parseInt("101011",2)) 
Devuelve el numero 43 

document.write (parseInt("34",8)) 
Devuelve el numero 28 

document.write (parseInt("3F",16)) 
Devuelve el numero 63 

Esta función se utiliza en la práctica para un montón de cosas distintas en el manejo con números, por ejemplo obtener la parte entera de un decimal. 

document.write (parseInt("3.38")) 
Devuelve el numero 3 

También es muy habitual su uso para saber si una variable es numérica, pues si le pasamos un texto a la función que no sea numérico nos devolverá NaN (Not a Number) lo que quiere decir que No es un Número. 

document.write (parseInt("desarrolloweb.com")) 
Devuelve el numero NaN 

Este mismo ejemplo es interesante con una modificación, pues si le pasamos una combinación de letras y números nos dará lo siguiente. 

document.write (parseInt("16XX3U")) 
Devuelve el numero 16 

document.write (parseInt("TG45")) 
Devuelve el numero NaN 

Como se puede ver, la función intenta convertir el string en número y si no puede devuelve NaN.



2.2.3 Función isNaN

Esta función devuelve un boleano. Si recibe un NaN devuelve true y si recibe un número devuelve false.

La función suele trabajar en combinación con la función parseInt o parseFloat, para saber si lo que devuelven estas dos funciones es un número o no. 

miInteger = parseInt("A3.6") 
isNaN(miInteger) 

En la primera línea asignamos a la variable miInteger el resultado de intentar convertir a entero el texto A3.6. Como este texto no se puede convertir a número la función parseInt devuelve NaN. La segunda línea comprueba si la variable anterior es NaN y como si que lo es devuelve un true. 

miFloat = parseFloat("4.7") 
isNaN(miFloat) 

En este ejemplo convertimos un texto a número con decimales. El texto se convierte perfectamente porque corresponde con un número. Al recibir un número la función isNaN devuelve un false.

2.3 Objetos en Javascript

En los ejemplos realizados hasta ahora los hemos utilizado en alguna ocasión, solo vamos a aprender una especie de estructura nueva.

2.3.1 Cómo instanciar objetos

Instanciar un objeto es la acción de crear un ejemplar de una clase para poder trabajar con él luego. Un objeto se crea a partir de una clase y la clase es la definición de las características y funcionalidades de un objeto. Con las clases no se trabaja, estas sólo son definiciones, para trabajar con una clase debemos tener un objeto instanciado de esa clase.

Para crear un objeto a partir de una clase se utiliza la instrucción new:

var miObjeto = new miClase()

En una variable que llamamos miObjeto asigno un nuevo (new) ejemplar de la clase miClase. Los paréntesis se rellenan con los datos que necesite la clase para inicializar el objeto, si no hay que meter ningún parámetro los paréntesis se colocan vacíos.

2.3.2 Cómo acceder a propiedades y métodos de los objetos

Las propiedades se acceden colocando el nombre del objeto seguido de un punto y el nombre de la propiedad que se desea acceder:

miObjeto.miPropiedad


Para llamar a los métodos utilizamos una sintaxis similar pero poniendo al final entre paréntesis los parámetros que pasamos a los métodos: 


miObjeto.miMetodo(parametro1,parametro2)

Si el método no recibe parámetros colocamos los paréntesis también, pero sin nada dentro. 

miObjeto.miMetodo()

2.4 Objetos incorporados en Javascript

Vamos a introducirnos en el manejo de objetos en Javascript y para ello vamos a empezar con el estudio de las clases predefinidas que implementan las librerías para el trabajo con strings, matemáticas, fechas etc.

Las clases que se encuentran disponibles de manera nativa en Javascript,

• String, para el trabajo con cadenas de caracteres.

• Date, para el trabajo con fechas. 

• Math, para realizar funciones matemáticas. 

• Number, para realizar algunas cosas con números 

• Boolean, trabajo con boleanos.

Nota: Las clases se escriben con la primera letra en mayúsculas. Las clases son descripciones de la forma y funcionamiento de los objetos.

Hay otros que pertenecen a este mismo conjunto, los enumeramos aquí para que quede constancia de ellos, pero no los vamos a tocar en capítulos siguientes.

Number, que es una clase se escribe con la primera en mayúscula. 

RegExp, que es el nombre de otra clase compuesto por dos palabras, tiene la primera letras de las dos palabras en mayúscula. 

miCadena, que supongamos que es un objeto de la clase String, se escribe con la primera letra en minúscula y la primera letra de la segunda palabra en mayúscula. 

fecha, que supongamos que es un objeto de la clase Date, se escribe en minúsculas por ser un objeto. 

miFunción(), que es una función definida por nosotros, se acostumbra a escribir con minúscula la primera.

2.5 Clase String en Javascript

En javascript las variables de tipo texto son objetos de la clase String. Las propiedades son las características, como por ejemplo longitud en caracteres del string y los métodos son funcionalidades, como pueden ser extraer un substring o poner el texto en mayúsculas.

Para crear un objeto de la clase String lo único que hay que hacer es asignar un texto a una variable. El texto va entre comillas, como ya hemos visto en los capítulos de sintaxis.

2.5.1 Propiedades de String

Length

La clase String sólo tiene una propiedad: length, que guarda el número de caracteres del String.

2.5.2 Métodos de String

Los objetos de la clase String tienen una buena cantidad de métodos:

charAt(indice)

Devuelve el carácter que hay en la posición indicada como índice. Las posiciones de un string empiezan en 0. 

indexOf(carácter,desde)

Devuelve la posición de la primera vez que aparece el carácter indicado por parámetro en un string. Si no encuentra el carácter en el string devuelve -1. El segundo parámetro es opcional y sirve para indicar a partir de que posición se desea que empiece la búsqueda.

lastIndexOf(carácter,desde)

Busca la posición de un carácter exáctamente igual a como lo hace la función indexOf pero desde el final en lugar del principio. El segundo parámetro indica el número de caracteres desde donde se busca, igual que en indexOf. 

replace(substring_a_buscar,nuevoStr)

Implementado en Javascript 1.2, sirve para reemplazar porciones del texto de un string por otro texto, por ejemplo, podríamos uilizarlo para reemplazar todas las apariciones del substring "xxx" por "yyy". El método no reemplaza en el string, sino que devuelve un resultante de hacer ese reemplazo. Acepta expresiones regulares como substring a buscar. 

split(separador)

Este método sólo es compatible con javascript 1.1 en adelante. Sirve para crear un vector a partir de un String en el que cada elemento es la parte del String que está separada por el separador indicado por parámetro. 

substring(inicio,fin)

Devuelve el substring que empieza en el carácter de inicio y termina en el carácter de fin. Si intercambiamos los parámetros de inicio y fin también funciona. Simplemente nos da el substring que hay entre el carácter menor y el mayor. 

toLowerCase()

Pone todas los caracteres de un string en minúsculas. 

toUpperCase()

Pone todas los caracteres de un string en mayúsculas. 

toString()

Este método lo tienen todos los objetos y se usa para convertirlos en cadenas. 

Hasta aquí hemos visto los métodos que nos ayudarán a tratar cadenas. Ahora vamos a ver otros métodos que son menos útiles, pero hay que indicarlos para que quede constancia de ellos. Todos sirven para aplicar estilos a un texto y es como si utilizásemos etiquetas HTML. Veamos cómo. 

anchor(name)

Convierte en un ancla (sitio a donde dirigir un enlace) una cadena de caracteres usando como el atributo name de la etiqueta

<A> lo que recibe por parámetro. 

big()

Aumenta el tamaño de letra del string. Es como si colocásemos en un string al principio la etiqueta <BIG> y al final </BIG>. 

blink()

Para que parpadee el texto del string, es como utilizar la etiqueta <BLINK>. Solo vale para Netscape. 

bold()

Como si utilizásemos la etiqueta <B>. 

fixed()

Para utilizar una fuente monoespaciada, etiqueta <TT>. 

fontColor(color)

Pone la fuente a ese color. Como utilizar la etiqueta <FONT color=el_color_indicado>. 

fontSize(tamaño) 

Pone la fuente al tamaño indicado. Como si utilizásemos la etiqueta <FONT> con el atributo size. 

italics()

Pone la fuente en cursiva. Etiqueta <I>. 

link(url)

Pone el texto como un enlace a la URL indicada. Es como si utilizásemos la etiqueta <A> con el atributo href indicado como parámetro. 

small()

Es como utilizar la etiqueta <SMALL> 

strike()

Como utilizar la etiqueta <STRIKE>, que sirve para que el texto aparezca tachado.

sub()
Actualiza el texto como si se estuviera utilizando la etiqueta <SUB>, de subíndice. 

sup()

Como si utilizásemos la etiqueta <SUP>, de superíndice.

2.6 Ejemplos de funcionamiento de la clase String

2.6.1 Ejemplo de strings 1

Vamos a escribir el contenido de un string con un carácter separador ("-") entre cada uno de los caracteres del string. 

var miString = "Hola Amigos" 
var result = "" 

for (i=0;i<miString.length-1;i++) { 
 result += miString.charAt(i) 
 result += "-" 
} 

result += miString.charAt(miString.length - 1) 
document.write(result) 

• Primero creamos dos variables, una con el string a recorrer y otra con un string vacío, donde guardaremos el resultado.

• Luego hacemos un bucle que recorre desde el primer hasta el penúltimo carácter del string -utilzamos la propiedad length para conocer el número de caracteres del string- y en cada iteración colocamos un carácter del string seguido de un carácter separador "-". 

• Como aun nos queda el último carácter por colocar lo ponemos en la siguiente línea después del bucle.

• Utilizamos la función charAt para acceder a las posiciones del string. 

• Finalmente imprimimos en la página el resultado.

2.6.2 Ejemplo de strings 2

Vamos a hacer un script que rompa un string en dos mitades y las imprima por pantalla. Las mitades serán iguales, siempre que el string tenga un número de caracteres par. En caso de que el número de caracteres sea impar no se podrá hacer la mitad exacta, pero partiremos el string lo más aproximado a la mitad. 

var miString = "0123456789" 
var mitad1,mitad2 

posicion_mitad = miString.length / 2 

mitad1 = miString.substring(0,posicion_mitad) 
mitad2 = miString.substring(posicion_mitad,miString.length) 

document.write(mitad1 + "<br>" + mitad2) 

• Las dos primeras líneas sirven para declarar las variables que vamos a utilizar e inicializar el string a partir. 

• En la siguiente línea hallamos la posición de la mitad del string. 

• En las dos siguientes líneas es donde realizamos el trabajo de poner en una variable la primera mitad del string y en la otra la segunda. Para ello utilizamos el método substring pasándole como inicio y fin en el primer caso desde 0 hasta la mitad y en el segundo desde la mitad hasta el final. 

• Para finalizar imprimimos las dos mitades con un salto de línea entre ellas.

2.7 Clase Date en Javascript

Para crear un objeto fecha con el día y hora actuales colocamos los paréntesis vacíos al llamar al constructor de la clase Date.

miFecha = new Date() 

Para crear un objeto fecha con un día y hora distintos de los actuales tenemos que indicar entre paréntesis el momento con que inicializar el objeto.

miFecha = new Date(año,mes,dia,hora,minutos,segundos)

miFecha = new Date(año,mes,dia)

*enero es el mes 0.

Los objetos de la clase Date no tienen propiedades pero si un montón de métodos:

getDate()
Devuelve el día del mes. 

getDay()
Devuelve el día de la semana. 

getHours()
Retorna la hora. 

getMinutes()
Devuelve los minutos. 

getMonth()
Devuelve el mes (atención al mes que empieza por 0). 

getSeconds()
Devuelve los segundos. 

getTime()
Devuelve los milisegundos transcurridos entre el día 1 de enero de 1970 y la fecha correspondiente al objeto al que se le pasa el mensaje.

getYear()
Retorna el año, al que se le ha restado 1900. Por ejemplo, para el 1995 retorna 95, para el 2005 retorna 105. Este método está obsoleto en Netscape a partir de la versión 1.3 de Javascript y ahora se utiliza getFullYear(). 

getFullYear()
Retorna el año con todos los dígitos. Usar este método para estar seguros de que funcionará todo bien en fechas posteriores al año 2000. 

setDate()
Actualiza el día del mes. 

setHours()
Actualiza la hora. 

setMinutes()
Cambia los minutos. 

setMonth()
Cambia el mes (atención al mes que empieza por 0). 

setSeconds()
Cambia los segundos. 

setTime()
Actualiza la fecha completa. Recibe un número de milisegundos desde el 1 de enero de 1970. 

setYear()
Cambia el año recibe un número, al que le suma 1900 antes de colocarlo como año de la fecha. Por ejemplo, si recibe 95 colocará el año 1995. Este método está obsoleto a partir de Javascript 1.3 en Netscape. Ahora se utiliza setFullYear(), indicando el año con todos los dígitos. 

setFullYear()
Cambia el año de la fecha al número que recibe por parámetro. El número se indica completo ej: 2005 o 1995. Utilizar este método para estar seguros que todo funciona para fechas posteriores a 2000.

2.8 Ejemplo de funcionamiento de Date

En este ejemplo vamos a crear dos fechas, una con el instante actual y otra con fecha del pasado. Luego las imprimiremos las dos y extraeremos su año para imprimirlo también. Luego actualizaremos el año de una de las fechas y la volveremos a escribir con un formato más legible.

//en estas líneas creamos las fechas 
miFechaActual = new Date() 
miFechaPasada = new Date(1998,4,23) 

//en estas líneas imprimimos las fechas. 
document.write (miFechaActual) 
document.write ("<br>") 
document.write (miFechaPasada) 

//extraemos el año de las dos fechas 
anoActual = miFechaActual.getFullYear() 
anoPasado = miFechaPasada.getFullYear() 

//Escribimos en año en la página 
document.write("<br>El año actual es: " + anoActual) 
document.write("<br>El año pasado es: " + anoPasado) 

//cambiamos el año en la fecha actual 
miFechaActual.setFullYear(2005) 

//extraemos el día mes y año 
dia = miFechaActual.getDate() 
mes = parseInt(miFechaActual.getMonth()) + 1 
ano = miFechaActual.getFullYear() 

//escribimos la fecha en un formato legible 
document.write ("<br>") 
document.write (dia + "/" + mes + "/" + ano)

2.9 Clase Math en Javascript

La clase Math proporciona los mecanismos para realizar operaciones matemáticas. Para trabajar con la clase Math no deberemos utilizar la instrucción new y utilizaremos el nombre de la clase para acceder a sus propiedades y métodos.


2.9.1 Propiedades de Math

E
Número E o constante de Euler, la base de los logaritmos neperianos. 

LN2
Logaritmo neperiano de 2. 

LN10
Logaritmo neperiano de 10. 

LOG2E
Logaritmo en base 2 de E. 

LOG10E
Logaritmo en base 10 de E. 

PI
Conocido número para cálculo con círculos. 

SQRT1_2
Raiz cuadrada de un medio. 

SQRT2
Raiz cuadrada de 2. 



2.9.2 Métodos de Math

Así mismo, tenemos una serie de métodos para realizar operaciones mateméticas típicas, aunque un poco complejas. Todos los que conozcan las matemáticas a un buen nivel conocerán el significado de estas operaciones. 

abs()
Devuelve el valor absoluto de un número. El valor después de quitarle el signo. 

acos()
Devuelve el arcocoseno de un número en radianes. 

asin()
Devuelve el arcoseno de un numero en radianes. 

atan()
Devuelve un arcotangente de un numero. 

ceil()
Devuelve el entero igual o inmediatamente siguiente de un número. Por ejemplo, ceil(3) vale 3, ceil(3.4) es 4. 

cos()
Retorna el coseno de un número. 

exp()
Retorna el resultado de elevar el número E por un número. 

floor()
Lo contrario de ceil(), pues devuelve un número igual o inmediatamente inferior. 

log()

Devuelve el logaritmo neperiano de un número.

max()
Retorna el mayor de 2 números. 

min()
Retorna el menor de 2 números. 

pow()
Recibe dos números como parámetros y devuelve el primer número elevado al segundo número. 

random()
Devuelve un número aleatorio entre 0 y 1. Método creado a partir de Javascript 1.1. 

round()
Redondea al entero más próximo. 

sin()
Devuelve el seno de un número con un ángulo en radianes. 

sqrt()
Retorna la raiz cuadrada de un número. 

tan()

Calcula y devuelve la tangente de un número en radianes.


Vamos a ver un sencillo ejemplo sobre cómo utilizar métodos y propiedaes de la clase Math

document.write (Math.cos(2 * Math.PI))

document.write ("<br>") 


document.write (Math.sin(2 * Math.PI))

2.10 Clase Number en Javascript

La clase Number nos sirve para crear objetos que tienen datos numéricos como valor.


El valor del objeto Number que se crea depende de lo que reciba el constructor de la clase Number. Con estas reglas: 

- Si el constructor recibe un número, entonces inicializa el objeto con el número que recibe. Si recibe un número

entrecomillado lo convierte a valor numérico, devolviendo también dicho número. 

- Devuelve 0 en caso de que no reciba nada. 

- En caso de que reciba un valor no numérico devuelve NaN, que significa "Not a Number" (No es un número) 

- Si recibe false se inicializa a 0 y si recibe true se inicializa a 1. 

Su funcionamiento se puede resumir en estos ejemplos. 

var n1 = new Number() 
document.write(n1 + "<br>") 
//muestra un 0 

var n2 = new Number("hola") 
document.write(n2 + "<br>") 
//muestra NaN 

var n3 = new Number("123") 
document.write(n3 + "<br>") 
//muestra 123 

var n4 = new Number("123asdfQWERTY") 
document.write(n4 + "<br>") 
//muestra NaN 

var n5 = new Number(123456) 
document.write(n5 + "<br>") 
//muestra 123456 

var n6 = new Number(false) 
document.write(n6 + "<br>") 
//muestra 0 

var n7 = new Number(true) 
document.write(n7 + "<br>") 

//muestra 1



2.10.1 Propiedades de la clase Number

NaN

Como hemos visto, significa Not a Number, o en español, no es un número. 

MAX_VALUE y MIN_VALUE

Guardan el valor del máximo y el mínimo valor que se puede representar en Javascript 

NEGATIVE_INFINITY y POSITIVE_INFINITY

Representan los valores, negativos y positivos respectivamente, a partir de los cuales hay desbordamiento. 

Estas propiedades son de clase, así que accederemos a ellas a partir del nombre de la clase, tal como podemos ver en este ejemplo en el que se muestra cada uno de sus valores. 

document.write("Propiedad NaN: " + Number.NaN) 
document.write("<br>") 
document.write("Propiedad MAX_VALUE: " + Number.MAX_VALUE) 
document.write("<br>") 
document.write("Propiedad MIN_VALUE: " + Number.MIN_VALUE) 
document.write("<br>") 
document.write("Propiedad NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY) 
document.write("<br>") 

document.write("Propiedad POSITIVE_INFINITY: " + Number.POSITIVE_INFINITY)

2.11 Clase Boolean en Javascript

- Se inicializa a false cuando no pasas ningún valor al constructor, o si pasas una cadena vacía, el número 0 o la palabra

false sin comillas. 

- Se inicializa a true cuando recibe cualquier valor entrecomillado o cualquier número distinto de 0. 

Se puede comprender el funcionamiento de este objeto fácilmente si examinamos unos ejemplos. 

var b1 = new Boolean() 

document.write(b1 + "<br>") 

//muestra false 

var b2 = new Boolean("") 

document.write(b2 + "<br>") 

//muestra false 

var b25 = new Boolean(false) 

document.write(b25 + "<br>") 

//muestra false 

var b3 = new Boolean(0) 

document.write(b3 + "<br>") 

//muestra false 

var b35 = new Boolean("0") 

document.write(b35 + "<br>") 

//muestra true 

var b4 = new Boolean(3) 

document.write(b4 + "<br>") 

//muestra true 

var b5 = new Boolean("Hola") 

document.write(b5 + "<br>") 

//muestra true

PROGRAMACIÓN EN JAVASCRIPT II Parte 1: Introducción

1.1 Introducción al manual II de Javascript

Los objetivos de los siguientes capítulos cubrirán aspectos diversos de Javascript como: 

• Funciones incorporadas en el lenguaje Javascript 

• Los objetos en Javascript 

• Jerarquía de objetos del navegador 

• Trabajo con formularios 

• Control de ventanas secundarias y frames 

• Eventos

Parte 8: Epílogos primera parte

8.1 Pausa y consejos Javascript

Vamos a dar una serie de consejos a seguir a la hora de programar.


8.1.1 Distintos navegadores

Javascript es un lenguaje que se ha sido implementado poco a poco a medida que nuevas tecnologías como el DHTML se desarrollaban, los navegadores han variado su manera de manejarlas.

Nuestro consejo es que vuestras páginas sean compatibles en el mayor número de navegadores, es decir, no ir a la última, sino ser un poco conservadores.


8.1.2 Consejos para hacer un código sencillo y fácil de mantener

Una serie de consejos para que nuestra tarea como programadores sea mucho más agradable:

• Utiliza comentarios habitualmente para que lo que estás haciendo en los scripts pueda ser recordado por ti y cualquier persona que tenga que leerlos más adelante. 

• Ten cuidado con el ámbito de las variables, recuerda que existen variables globales y locales, que incluso pueden tener los mismos nombres y conoce en cada momento la variable que tiene validez. 

• Escribe un código con suficiente claridad, que se consigue con saltos de línea después de cada instrucción, un sangrado adecuado (poner márgenes a cada línea para indicar en qué bloque están incluidas), utilizar las llaves {} siempre, aunque no sean obligatorias y en general mantener siempre el mismo estilo a la hora de programar. 

• Aplica un poco de consistencia al manejo de variables. Declara las variables con var. No cambies el tipo del dato que contiene (si era numérica no pongas luego texto, por ejemplo). Dales nombres comprensibles para saber en todo momento qué contienen. Incluso a la hora de darles nombre puedes aplicar una norma, que se trata de que indiquen en sus nombres el tipo de dato que contienen. Por ejemplo, las variables de texto pueden empezar por una s (de String), las variables numéricas pueden empezar por una n o las boleanas por una b. 

• Prueba tus scripts cada poco a medida que los vas programando. Puedes escribir un trozo de código y probarlo antes de continuar para ver que todo funciona correctamente. Es más fácil encontrar los errores de código en bloques pequeños que en bloques grandes.

8.2 Tratamiento de errores en javascript

Errores comunes que podemos cometer y cómo evitarlos y depurarlos.


8.2.1 Errores comunes en Javascript

Cuando ejecutamos los scripts pueden ocurrir dos tipos de errores de sintaxis o de ejecución:

1. Errores de sintaxis ocurren a la hora de escribir el nombre de una estructura, utilizar incorrectamente las llaves o los paréntesis.
2. Errores de ejecución ocurren cuando se están ejecutando los scripts. 

En la actualidad los errores de javascript permanecen un poco más ocultos al usuario. Esto viene bien, porque si nuestras páginas tienen algún error en alguna plataforma no será muy molesto para el usuario que en muchas ocasiones ni se dará cuenta. Sin embargo para el programador puede ser un poco más molesto de revisar y se necesitará conocer la manera de que se muestren los errores para que puedan ser reparados.

8.2.2 Evitar errores comunes

• Utilizar = en expresiones condicionales en lugar de == es un error difícil de detectar cuando se comete, si utilizamos un solo igual lo que estamos haciendo es una asignación y no una comparación para ver si dos valores son iguales. 

• No conocerse la precedencia de operadores y no utilizar paréntesis para agrupar las operaciones que se desea realizar. En este caso nuestras operaciones pueden dar resultados no deseados. 

• Usar comillas dobles y simples erróneamente. Recuerda que se pueden utilizar comillas dobles o simples indistintamente, con la norma siguiente: dentro de comillas dobles se deben utilizar comillas simples y viceversa. 

• Olvidarse de cerrar una llave o cerrar una llave de más.

• Colocar varias sentencias en la misma línea sin separarlas de punto y coma. Esto suele ocurrir en los manejadores de eventos, como onclick, que veremos más adelante. 

• Utilizar una variable antes de inicializarla o no declarar las variables con var antes de utilizarlas también son errores comunes. Recuerda que si no la declaras puedes estar haciendo referencia a una variable global en lugar de una local. 

• Contar las posiciones de los arrays a partir de 1. Recuerda que los arrays empiezan por la posición 0.

8.2.3 Depurar errores javascript

Para todo tipo de errores, unos más fáciles de detectar que otros, debemos utilizar alguna técnica de depuración que nos ayude a encontrarlos. Se trata de utilizar una función predefinida, la función alert() que recibe entre paréntesis un texto y lo muestra en una pequeña ventana.

Con la función alert() podemos mostrar en cualquier momento el contenido de las variables que estamos utilizando en nuestros scripts. Para ello ponemos entre paréntesis la variable que deseamos ver su contenido. Cuando se muestra el contenido de la variable el navegador espera a que apretemos el botón de aceptar y cuando lo hacemos continúa con las siguientes instrucciones del script.



8.2.4 Conclusión


La visión que has podido tener del lenguaje será suficiente para enfrentarte a los problemas más fundamentales. En adelante veremos la jerarquía de objetos del navegador, cómo construir nuestros propios objetos, las funciones predefinidas de Javascript, características del HTML Dinámico, trabajo con formularios y otras cosas importantes para dominar todas las posibilidades del lenguaje.

8.3 Consejos para escribir código Javascript

Una serie de consejos que hará más sencillo mantener tu código Javascript ordenado


8.3.1 Conserva la sintaxis y estructura de tu código limpia y ordenada

Guardar por ejemplo un límite de longitud de línea (80 caracteres), programar funciones razonablemente pequeñas...



8.3.2 Utiliza inteligentemente los nombres de variables y funciones
Utiliza nombres de variables y funciones que sean totalmente descriptivos y recuerda que es correcto el uso de guiones o mayúsculas para concatenar diferentes palabras:

CambioFormatoFecha();
cambio_formato_fecha();



8.3.3 Comenta el código

En cualquier libro de programación cada línea tiene comentarios explicando su objetivo.

8.3.4 Diferencia las variables dependiendo de su importancia

Coloca aquellas variables que son usadas durante todo el script en la cabecera del código.


function toolLinks(){
var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;

// variables temporales
var printLinkLabel = ?print?;
var closeLinkLabel = ?close?;#

tools = document.createElement(?ul?);
closeWinItem = document.createElement(?li?);
closeWinLink = createLink(?#', closeLinkLabel, closeWindow);
closeWinItem.appendChild(closeWinLink);
tools.appendChild(closeWinItem);
printWinItem = document.createElement(?li?);
printWinLink = createLink(?#', printLinkLabel, printWindow);
printWinItem.appendChild(printWinLink);
tools.appendChild(printWinItem);
document.body.appendChild(tools);

}


8.3.5 Separa el texto del código

Puedes separar el texto del código, utilizando un documento llamado texto.js
Un ejemplo:

var locales = {
'en': {
'homePageAnswerLink':'Answer a question now',
'homePageQuestionLink':'Ask a question now',
'contactHoverMessage':'Click to send this info as a message',
'loadingMessage' : 'Loading your data...',
'noQAmessage' : 'You have no Questions or Answers yet',
'questionsDefault': 'You have not asked any questions yet',
'answersDefault': 'You have not answered any questions yet.',
'questionHeading' : 'My Questions',
'answersHeading' : 'My Answers',
'seeAllAnswers' : 'See all your Answers',
'seeAllQuestions' : 'See all your Questions',
'refresh': 'refresh'
},

'es': {
'homePageAnswerLink':'Responde una pregunta',
'homePageQuestionLink':'Haz una pregunta',
'contactHove' : 'Cargando datos...',
'noQAmessage' : 'No quedan preguntas',
'questionsDefault': 'Quedan preguntas por responder',
'answersDefault': 'No quedan preguntas pendientes',
'questionHeading' : 'Mis preguntas',
'answersHeading' : 'Mis respuestas',
'seeAllAnswers' : 'Ver todas las respuestas',
'seeAllQuestions' : 'Ver todas las preguntas',
'refresh': 'Refrescar'
},
'fr': {
}
'de': {
}

};



8.3.6 Documenta el código

Escribe una buena documentacion de tu script / librería o efecto. Una buena documentación da calidad al código.

Parte 7: Arrays

7.1 Arrays en Javascript

Qué son los arrays, para qué sirven y cómo utilizarlos. Diversas formas de crearlos, asi como definir y acceder a sus valores.

El Array es como una variable donde podemos introducir varios valores. Éstos nos permiten guardar varias variables y acceder a ellas de manera independiente, para ello utilizamos un índice (numero) que refiere a un compartimento o posición concreta.

7.1.1 Creación de Arrays

El primer paso para utilizar un array es crearlo. Para ello utilizamos una sentencia para crear un objeto array:

var miArray = new Array()

También podemos crear el array Javascript especificando el número de compartimentos que va a tener.

var miArray = new Array(10)

Indicamos que el array va a tener 10 posiciones, es decir, 10 casillas donde guardar datos.

Tanto se indique o no el número de casillas del array javascript, podemos introducir cualquier dato:

miArray[0] = 290

miArray[1] = 97

miArray[2] = 127

Se introducen indicando entre corchetes el índice de la posición donde queríamos guardar el dato. En este caso introducimos 290 en la posición 0, 97 en la posición 1  y 127 en la 2.

Los arrays en Javascript empiezan siempre en la posición 0, para recoger datos en un array lo hacemos igual. poniendo entre corchetes el índice de la posición a la que queremos acceder:

miArray[0] = 155

miArray[1] = 4

miArray[2] = 499

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

     document.write("Posición " + i + " del array: " + miArray[i])

     document.write("<br>")

}

Hemos creado un array con tres posiciones, luego hemos introducido un valor en cada una de las posiciones del array y finalmente las hemos impreso.

7.1.2 Tipos de datos

En Javascript podemos guardar distintos tipos de datos en las casillas de un mismo array.

miArray[0] = "Hola" 

miArray[1] = "a" 

miArray[2] = "todos"

miArray[0] = "desarrolloweb.com" 

miArray[1] = 1275 

miArray[1] = 0.78 

miArray[2] = true

7.1.3 Declaración e inicialización resumida de Arrays

var arrayRapido = [12,45,"array inicializado en su declaración"]

Es lo mismo que haber declarado el array con la función Array() y luego haberle cargado los valores uno a uno.

7.2 Longitud de los arrays

Los arrays además de almacenar el valor de las casillas, también almacenan el número de posiciones que tienen, mediante la propiedad length.

Para acceder a una propiedad de un objeto se ha de utilizar el operador punto.

var miArray = new Array() 

miArray[0] = 155 

miArray[1] = 499 

miArray[2] = 65 

document.write("Longitud del array: " + miArray.length)

Este código imprimiría en pantalla el número de posiciones del array, que en este caso es 3. Recordamos que un array con 3 posiciones abarca desde la posición 0 a la 2.

for (i=0;i<miArray.length;i++){ 

     document.write(miArray[i]) 

}

Vamos a crear un array con 2 posiciones y rellenar su valor. Posteriormente introduciremos otro valor en otra posición del array que denominaremos con el número 5. Finalmente imprimiremos todas las posiciones del array:

var miArray = new Array(2) 

miArray[0] = "Colombia" 

miArray[1] = "Estados Unidos" 

miArray[5] = "Brasil" 

for (i=0;i<miArray.length;i++){ 

  document.write("Posición " + i + " del array: " + miArray[i])

Se puede apreciar que hacemos un recorrido por el array desde 0 hasta el número de posiciones del array (indicado por la propiedad length). Vemos en el ejemplo como en el recorrido vamos imprimiendo el número de la posición seguido del contenido del array:

Posición 0 del array: Colombia 

Posición 1 del array: Estados Unidos 

Posición 2 del array: null 

Posición 3 del array: null 

Posición 4 del array: null 

Posición 5 del array: Brasil

El número de posiciones es 6, de la 0 a la 5. Lo que ha ocurrido es que al introducir un dato en la posición 5, todas las casillas que no estaban creadas hasta la quinta se crean también.

7.2 Arrays multidimensionales

Un array multidimensional es una estructura de datos que guarda más valores por cada posición, es decir, es como si los elementos del array fueran a su vez otros arrays.

En este ejemplo vamos a crear un array de dos dimensiones donde tendremos por un lado ciudades y por el otro la temperatura media que hace en cada una durante de los meses de invierno:

var temperaturas_medias_ciudad0 = new Array(3) 

temperaturas_medias_ciudad0[0] = 12

temperaturas_medias_ciudad0[1] = 10 

temperaturas_medias_ciudad0[2] = 11 

var temperaturas_medias_ciudad1 = new Array (3) 

temperaturas_medias_ciudad1[0] = 5 

temperaturas_medias_ciudad1[1] = 0 

temperaturas_medias_ciudad1[2] = 2 

var temperaturas_medias_ciudad2 = new Array (3) 

temperaturas_medias_ciudad2[0] = 10 

temperaturas_medias_ciudad2[1] = 8 

temperaturas_medias_ciudad2[2] = 10

Con las anteriores líneas hemos creado tres arrays de 1 dimensión y tres elementos, como los que ya conocíamos. Ahora crearemos un nuevo array de tres elementos e introduciremos dentro de cada una de sus casillas los arrays creados anteriormente, con lo que tendremos un array de arrays, es decir, un array de 2 dimensiones. 

var temperaturas_cuidades = new Array (3) 

temperaturas_cuidades[0] = temperaturas_medias_ciudad0 

temperaturas_cuidades[1] = temperaturas_medias_ciudad1 

temperaturas_cuidades[2] = temperaturas_medias_ciudad2

Para introducir el array entero hacemos referencia al mismo sin paréntesis ni corchetes, sólo con su nombre. El array temperaturas_cuidades es nuestro array bidimensinal.

Para realizar un recorrido por un array de dos dimensiones tenemos que hacer un bucle que pase por cada una de las casillas del array bidimensional y dentro de éstas hacer un nuevo recorrido para cada una de sus casillas internas. Es decir, un recorrido por un array dentro de otro. 

Para hacer este recorrido necesitamos colocar un bucle dentro de otro, lo que se llama un bucle anidado. En este ejemplo vamos a meter un bucle FOR dentro de otro. Además, vamos a escribir los resultados en una tabla, lo que complicará un poco el script, pero así podremos ver cómo construir una tabla desde Javascript a medida que realizamos el recorrido anidado al bucle.

document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>"); 

for (i=0;i<temperaturas_cuidades.length;i++){ 

   document.write("<tr>") 

   document.write("<td><b>Ciudad " + i + "</b></td>") 

   for (j=0;j<temperaturas_cuidades[i].length;j++){ 

   document.write("<td>" + temperaturas_cuidades[i][j] + "</td>") 

 } 

   document.write("</tr>") 

} 

document.write("</table>")

La primera acción consiste en escribir la cabecera de la tabla, es decir, la etiqueta <TABLE> junto con sus atributos. Con el primer bucle realizamos un recorrido a la primera dimensión del array y utilizamos la variable i para llevar la cuenta de la posición actual. Por cada iteración de este bucle escribimos una fila y para empezar la fila abrimos la etiqueta <TR>.

Además, escribimos en una casilla el numero de la ciudad que estamos recorriendo en ese momento. Posteriormente ponemos otro bucle que va recorriendo cada una de las casillas del array en su segunda dimensión y escribimos la temperatura de la ciudad actual en cada uno de los meses, dentro de su etiqueta <TD>.

7.3.1 Inicialización de arrays

Para introducir valores a un array se hace igual, pero poniendo entre los paréntesis los valores con los que deseamos rellenar las casillas separados por coma.

var diasSemana = new Array("Lunes","Martes","Miércoles,","Jueves","Viernes","Sábado","Domingo")

Ahora vamos a ver algo más complicado, se trata de declarar el array bidimensional que utilizamos antes para las temperaturas de las ciudades en los meses en una sola línea, introduciendo los valores a la vez. 


var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10))

En el ejemplo introducimos en cada casilla del array otro array que tiene como valores las temperaturas de una ciudad en cada mes.

Javascript todavía tiene una manera más resumida que es la que se explica en el primer apartado, simplemente escribimos entre corchetes los datos del array que estamos creando:

var arrayMuchasDimensiones = [1, ["hola", "que", "tal", ["estas", "estamos", "estoy"], ["bien", "mal"], "acabo"], 2, 5];

En este ejemplo hemos creado un array muy poco uniforme, porque tiene casillas con contenido de simples enteros y otras con contenido de cadena y otras que son otros arrays. Podríamos acceder a algunas de sus casillas y mostrar sus valores de esta manera:

alert (arrayMuchasDimensiones[0])
alert (arrayMuchasDimensiones[1][2])
alert (arrayMuchasDimensiones[1][3][1])