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