JAVASCRIPT III

Clases y objetos nativos de Javascript

En todos los lenguajes de programación existen librerías de funciones que sirven para hacer cosas diversas y muy repetitivas a la hora de programar, estas ahorran la tarea de escribir las funciones comunes que por lo general pueden necesitar los programadores.

Javascript contiene una buena cantidad de funciones en sus librerías. Como se trata de un lenguaje que trabaja con objetos muchas 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.

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.1.- Función eval

Esta función es muy importante, tanto que hay algunas aplicaciones de Javascript que no se podrían realizar si no la utilizamos.

Vamos a utilizarla en una sentencia un poco rara y bastante inservible, pero si la conseguimos entender conseguiremos entender también la 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.- Función parseInt

Esta función recibe un número, escrito como una cadena de caracteres, y un número que indica una base. En realidad puede recibir otros tipos de variables, dado que las variables no tienen tipo en Javascript, pero se suele utilizar pasándole un string para convertir la variable de texto en un número.

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.

Todos estos ejemplos, un tanto inconexos, sobre cómo trabaja parseInt los revisaremos más adelante en ejemplos más prácticos cuando tratemos el trabajo con formularios.

2.3.- Función isNaN

Esta función devuelve un boleano dependiendo de si lo que recibe es un número o no. Lo único que puede recibir es un número o la expresión NaN. 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.

3.- Objetos en Javascript

Todas las cosas en Javascript, incluso las más sencillas, las vamos a realizar a través del manejo de objetos.

La programación orientada a objetos (POO) representa una nueva manera de pensar a la hora de hacer un programa.

Javascript no es un lenguaje de programación orientado a objetos, aunque los utiliza en muchas ocasiones: podemos crear nuevos objetos y utilizar muchos que están creados desde un principio.

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. Recordamos que 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.

En javascript para crear un objeto a partir de una clase se utiliza la instrucción new, de esta manera.

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. En realidad lo que se hace cuando se crea un objeto es llamar al constructor de esa clase y el constructor es el encargado de crearlo e inicializarlo.

3.2.- Cómo acceder a propiedades y métodos de los objetos

En Javascript podemos acceder a las propiedades y métodos de objetos con el operador punto (".").

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

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. Del siguiente modo:

miObjeto.miMetodo(parametro1,parametro2)

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

miObjeto.miMetodo()

4.- Objetos incorporados en Javascript

Las clases que se encuentran disponibles de manera nativa en Javascript, y que vamos a ver a continuación, son las siguientes:

• 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.

Las clases se escriben con la primera letra en mayúsculas. Las clases son descripciones de la forma y funcionamiento de los objetos. Con las clases generalmente no se realiza ningún trabajo, sino que se hace con los objetos, que creamos a partir de las clases.

Hay otros que pertenecen a este mismo conjunto

• Array

• También la clase Function

• Hay otra clase RegExp que sirve para construir patrones que veremos tal vez junto con Function cuando tratemos temas más avanzados todavía. Manual

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.

5.- Clase String en Javascript

En javascript las variables de tipo texto son objetos de la clase String. Esto quiere decir que cada una de las variables que creamos de tipo texto tienen una serie de propiedades y métodos. Recordamos que 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. 

También se puede crear un objeto string con el operador new, que veremos más adelante. La única diferencia es que en versiones de Javascript 1.0 no funcionará new para crear los Strings.

5.1.- Propiedades de String

Length

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

5.2.- Métodos de String

Los objetos de la clase String tienen una buena cantidad de métodos para realizar muchas cosas interesantes.

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>.

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.

Ejemplos de funcionamiento de la clase String

• Ejemplo 1

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.

• Ejemplo 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.

6.- Clase Date en Javascript

Sobre la clase Date recae todo el trabajo con fechas en Javascript, como obtener una fecha, el día la hora actuales y otras cosas. Para trabajar con fechas necesitamos instanciar un objeto de la clase Date y con él ya podemos realizar las operaciones

que necesitemos.

Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado podemos crear el objeto con el día y hora actuales y por otro podemos crearlo con un día y hora distintos a los actuales.

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)

Los valores que debe recibir el constructor son siempre numéricos. Un detalle, el mes comienza por 0, es decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha se crea con hora 00:00:00.

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.

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.

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.

Ejemplo de funcionamiento de Date

//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)

Hay que destacar un detalle antes de acabar y es que el número del mes puede empezar desde 0.
Hay más detalles a destacar, pues resulta que en Netscape el método getFullYear() devuelve los años trascurridos desde 1900, con lo que al obtener el año de una fecha de, por ejemplo, 2005.

7.- Clase Math en Javascript

Proporciona los mecanismos para realizar operaciones matemáticas

en Javascript. Algunas operaciones se resuelven rápidamente con los operadores aritméticos que ya conocemos, como la multiplicación o la suma, pero hay una serie de operaciones matemáticas adicionales que se tienen que realizar usando la clase Math como pueden ser calcular un seno o hacer una raiz cuadrada.

7.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.

7.2.- Métodos de Math

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.

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

document.write ("<br>")

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

2 PI radianes es el resultado de multiplicar 2 por el número PI. Ese resultado es lo que recibe el método cos, y da como resultado 1. En el caso del seno el resultado no es exactamente 0 pero está aproximado con una exactitud de más de una millonésima de fracción. Se escriben los el seno y coseno con un salto de línea en medio para que quede más claro.

8.- 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.

• Ejemplo 

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

8.1.- Propiedades de la clase Number

Esta clase también nos ofrece varias propiedades que contienen los siguientes valores:

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.

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)

9.- Clase Boolean en Javascript

Esta clase nos sirve para crear 

valores boleanos.

Dependiendo de lo que reciba el constructor de la clase Bolean el valor del objeto boleano que se crea será verdadero o falso, de la siguiente manera

- 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.


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

Introducción a la programación orientada a objetos en Javascript

1.- Creación de clases en Javascript

Para crear nuestros propios objetos debemos crear una clase, que recordamos que es algo así como la definición de un objeto con sus propiedades y métodos. Para crear la clase en Javascript debemos escribir una función especial, que se encargará de construir el objeto en memoria e inicializarlo. Esta función se le llama constructor en la terminología de laprogramación orientada a objetos.


function MiClase (valor_inicializacion){//Inicializo las propiedades y métodosthis.miPropiedad = valor_inicializacionthis.miMetodo = nombre_de_una_funcion_definida}


Eso era un constructor. Utiliza la palabra this para declarar las propiedades y métodos del objeto que se está construyendo.This hace referencia al objeto que se está construyendo, pues recordemos que a esta función la llamaremos para construir un objeto. A ese objeto que se está construyendo le vamos asignando valores en sus propiedades y también le vamos asignando nombres de funciones definidas para sus métodos. Al construir un objeto técnicamente es lo mismo declarar una propiedad o un método, solo difiere en que a una propiedad le asignamos un valor y a un método le asignamos una función.


1.1.- La clase AlumnoUniversitario


En este ejemplo vamos a crear un objeto estudiante universitario. Como estudiante tendrá unas características como el nombre, la edad o el número de matrícula. Además podrá
tener algún método como por ejemplo matricular al alumno.

1.2.- Constructor: Colocamos propiedades


Veamos cómo definir el constructor de la clase Alumnouniversitario, pero solamente vamos a colocar por ahora las propiedades de la clase.


function AlumnoUniversitario(nombre, edad){
this.nombre = nombre
this.edad = edad
this.numMatricula = null
}


Los valores de inicialización los recibe el constructor como parámetros, en este caso es sólo el nombre y la edad, porque el número de matrícula no lo recibe un alumno hasta que es matriculado. Es por ello que asignamos a null la propiedad numMatrícula.


Para construir un método debemos crear una función. Una función que se construye con intención de que sea un método para una clase puede utilizar también la variable this, que hace referencia al objeto sobre el que invocamos el método. Pues debemos recordar que para llamar a un método debemos tener un objeto y this hace referencia a ese objeto.


function matriculate(num_matricula){
this.numMatricula = num_matricula
}


La función matricular recibe un número de matrícula por parámetro y lo asigna a la propiedad numMatricula del objeto que recibe este método. Así rellenamos el la propiedad del objeto que nos faltaba.
Vamos a construir otro método que imprime los datos del alumno.


function imprimete(){
document.write("Nombre: " + this.nombre)
document.write("<br>Edad: " + this.edad)
document.write("<br>Número de matrícula: " + this.numMatricula)
}



Esta función va imprimiendo todas las propiedades del objeto que recibe el método.


1.3.-Constructor: Colocamos métodos


Para colocar un método en una clase debemos asignar la función que queremos que sea el método al objeto que se está creando. Veamos cómo quedaría el constructor de la clase AlumnoUniversitario con el método matricular.


function AlumnoUniversitario(nombre, edad){
this.nombre = nombre
this.edad = edad
this.numMatricula = null
this.matriculate = matriculate
this.imprimete = imprimete

}


Vemos que en las últimas líneas asignamos a los métodos los nombres de las funciones que contienen su código.

1..4.-Para instanciar un objeto

Para instanciar objetos de la clase AlumnoUniversitario utilizamos la sentencia new, que ya hemos tenido ocasión de ver en otras ocasiones.

miAlumno = new AlumnoUniversitario("José Díaz",23)

Para ilustrar el trabajo con objetos y terminar con el ejemplo del AlunnoUniversitario, vamos a ver todo este proceso en un solo script en el que definiremos la clase y luego la utilizaremos un poquito.


//definimos el método matricularte para la clase AlumnoUniversitario
function matriculate(num_matricula){
this.numMatricula = num_matricula
}
//definimos el método imprimete para la clase AlumnoUniversitario
function imprimete(){
document.write("<br>Nombre: " + this.nombre)
document.write("<br>Edad: " + this.edad)
document.write("<br>Número de matrícula: " + this.numMatricula)
}
//definimos el constructor para la clase
function AlumnoUniversitario(nombre, edad){
this.nombre = nombre
this.edad = edad
this.numMatricula = null
this.matriculate = matriculate
this.imprimete = imprimete
}
//creamos un alumno
miAlumno = new AlumnoUniversitario("José Díaz",23)
//le pedimos que se imprima
miAlumno.imprimete()
//le pedimos que se matricule
miAlumno.matriculate(305)
//le pedimos que se imprima de nuevo (con el número de matricula relleno)

miAlumno.imprimete()

Los objetos del navegador: DOM de la página

1.- Jerarquía de objetos del navegador

Cuando se carga una página, el navegador crea una jerarquía de objetos en memoria que sirven para controlar los distintos elementos de dicha página.

Vamos a ver ahora como está compuesta esta jerarquía. Los objetos que forman parte de ella están representados en el gráfico siguiente.

Como se puede apreciar, todos los objetos comienzan en un objeto que se llama window. Este objeto ofrece una serie de métodos y propiedades para controlar la ventana del navegador. Con ellos podemos controlar el aspecto de la ventana, la barra de estado, abrir ventanas secundarias y otras cosas que veremos más adelante cuando expliquemos con detalle el objeto.

Además de ofrecer control, el objeto window da acceso a otros objetos como el documento (La página web que se está visualizando), el historial de páginas visitadas o los distintos frames de la ventana. De modo que para acceder a cualquier otro objeto de la jerarquía deberíamos empezar por el objeto window.

1.1.- Las propiedades de un objeto pueden ser a su vez otros objetos

Muchas de las propiedades del objeto window son a su vez otros objetos. Es el caso de objetos como el historial de páginas web o el objeto documento, que tienen a su vez otras propiedades y métodos.

Entre ellos destaca el objeto document, que contiene todas las propiedades y métodos necesarios para controlar muchos aspectos de la página.

Muchas propiedades de este objeto son a su vez otros objetos, como los formularios.

1.2.- Navegación a través de la jerarquía

Cuando una página se carga, el navegador construye en memoria la jerarquía de objetos. De manera adicional, construye también estos arrays de objetos. Por ejemplo, en el caso de las imágenes, va creando el array colocando en la posición 0 la primera imagen, en la posición 1 la segunda imagen y así hasta que las introduce todas. Vamos a ver un bucle que recorre todas las imágenes de la página e imprime su propiedad src, que contiene la URL donde está situada la imagen.

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

document.write(document.images[i].src)

document.write("<br>")

}

Utilizamos la propiedad length del array images para limitar el número de iteraciones del bucle. Luego utilizamos el método write() del objeto document pasándole el valor de cada una de las propiedades src de cada imagen.

f or (i=0;i<document.forms[0].elements.length;i++){

document.write(document. forms[0].elements[i].value)

document.write("<br>")

}

Es un bucle muy parecido al que teníamos para recorrer las imágenes, con la diferencia que ahora recorremos el vector de elements, al que accedemos por la jerarquía de objetos pasando por el array de formularios en su posición 0, que corresponde con el primer formulario de la página.

2.- Objeto window de Javascript

4.1.- Propiedades del objeto window

closed

Indica la posibilidad de que se haya cerrado la ventana. (Javascript 1.1)

defaultStatus

Texto que se escribe por defecto en la barra de estado del navegador.

document

Objeto que contiene el la página web que se está mostrando.

Frame

Un objeto frame de una página web. Se accede por su nombre.

frames array

El vector que contiene todos los frames de la página. Se accede por su índice a partir de 0.

history

Objeto historial de páginas visitadas.

innerHeight

Tamaño en pixels del espacio donde se visualiza la página, en vertical. (Javascript 1.2)

innerWidth

Tamaño en pixels del espacio donde se visualiza la página, en horizontal. (Javascript 1.2)

length

Numero de frames de la ventana.

location

La URL del documento que se está visualizando. Podemos cambiar el valor de esta propiedad para movernos a otra página.

locationbar

Objeto barra de direcciones de la ventana. (Javascript 1.2)

menubar

Objeto barra de menús de la ventana. (Javascript 1.2)

name

Nombre de la ventana. Lo asignamos cuando abrimos una nueva ventana.

opener

Hace referencia a la ventana de navegador que abrió la ventana donde estamos trabajando.

outherHeight

Tamaño en pixels del espacio de toda la ventana, en vertical. Esto incluye las barras de desplazamiento, botones, etc.

outherWidth

Tamaño en pixels del espacio de toda la ventana, en horizontal. Esto incluye las barras de desplazamiento. (Javascript 1.2)

parent

Hace referencia a la ventana donde está situada el frame donde estamos trabajando.

personalbar

Objeto barra personal del navegador. (Javascript 1.2)

self

Ventana o frame actual.

scrollbars

Objeto de las barras de desplazamiento de la ventana.

status

Texto de la barra de estado.

statusbar

Objeto barra de estado del navegador. (Javascript 1.2)

toolbar

Objeto barra de herramientas. (Javascript 1.2)

top

Hace referencia a la ventana donde está situada el frame donde estamos trabajando. Como la propiedad parent.

window

Hace referencia a la ventana actual, igual que la propiedad self.

Los manejadores de eventos se colocan en etiquetas HTML, en nuestro caso lo colocamos en un botón de formulario. Las sentencias Javascript asociadas al evento onclick del botón se ejecutarán cuando pulsemos el botón.

<form>

<input type="Button" value="Pulsame!" onclick="window.status='Hola a todo el mundo!'">

</form>

Simplemente asignamos un texto a la propiedad status del objeto window. El texto que colocamos en la barra de estado está escrito entre comillas simples porque estamos escribiendo dentro de unas comillas dobles.

3.- Métodos de window en Javascript

Vamos a ver ahora los distintos métodos que tiene el objeto window.

alert(texto)

Presenta una ventana de alerta donde se puede leer el texto que recibe por parámetro

back()

Ir una página atrás en el historial de páginas visitadas. Funciona como el botón de volver de la barra de herramientas.(Javascript 1.2)

blur()

Quitar el foco de la ventana actual. (Javascript 1.1)

captureEvents(eventos)

Captura los eventos que se indiquen por parámetro (Javascript 1.2).

clearInterval()

Elimina la ejecución de sentencias asociadas a un intervalo indicadas con el método setInterval().(Javascript 1.2)

clearTimeout()

Elimina la ejecución de sentencias asociadas a un tiempo de espera indicadas con el método setTimeout().

close()

Cierra la ventana. (Javascript 1.1)

confirm(texto)

Muestra una ventana de confirmación y permite aceptar o rechazar.

find()

Muestra una ventanita de búsqueda. (Javascript 1.2 para Netscape)

focus()

Coloca el foco de la aplicación en la ventana. (Javascript 1.1)

forward()

Ir una página adelante en el historial de páginas visitadas. Como si pulsásemos el botón de adelante del navegador.

home()

Ir a la página de inicio que haya configurada en el explorador. (Javascript 1.2)

moveBy(pixelsX, pixelsY)

Mueve la ventana del navegador los pixels que se indican por parámetro hacia la derecha y abajo. (Javascript 1.2)

moveTo(pixelsX, pixelsY)

Mueve la ventana del navegador a la posición indicada en las coordenadas que recibe por parámetro. (Javascript 1.2)

open()

Abre una ventana secundaria del navegador.

print()

Como si pulsásemos el botón de imprimir del navegador. (Javascript 1.2)

prompt(pregunta,inicializacion_de_la_respuesta)

Muestra una caja de diálogo para pedir un dato. Devuelve el dato que se ha escrito.

releaseEvents(eventos)

Deja de capturar eventos del tipo que se indique por parámetro. (Javascript 1.2)

resizeBy(pixelsAncho,pixelsAlto)

Redimensiona el tamaño de la ventana, añadiendo a su tamaño actual los valores indicados en los parámetros. El primero para la altura y el segundo para la anchura. Admite valores negativos si se desea reducir la ventana. (Javascript 1.2)

resizeTo(pixelsAncho,pixelsAlto)

Redimensiona la ventana del navegador para que ocupe el espacio en pixels que se indica por parámetro (Javascript 1.2)

routeEvent()

Enruta un evento por la jerarquía de eventos. (Javascript 1.2)

scroll(pixelsX,pixelsY)

Hace un scroll de la ventana hacia la coordenada indicada por parámetro. Este método está desaconsejado, pues ahora se debería utilizar scrollTo()(Javascript 1.1)

scrollBy(pixelsX,pixelsY)

Hace un scroll del contenido de la ventana relativo a la posición actual. (Javascript 1.2)

scrollTo(pixelsX,pixelsY)

Hace un scroll de la ventana a la posición indicada por el parámetro. Este método se tiene que utilizar en lugar de scroll.

setInterval()

Define un script para que sea ejecutado indefinidamente en cada intervalo de tiempo. 

(Javascript 1.2)

setTimeout(sentencia,milisegundos)

Define un script para que sea ejecutado una vez después de un tiempo de espera determinado.

stop()

Como pulsar el botón de stop de la ventana del navegador. (Javascript 1.2)

<form>

<input type="button" value="Ventana de búsqueda (Solo Netscape)" onClick="window.find()">

<br>

<br>

<input type="button" value="Mover la ventana 10 derecha,10 abajo" onClick="moveBy(10, 10)">

<br>

<br>

<input type="button" value="Mover la ventana al punto (100,10)" onClick="moveTo(100, 10)">

<br>

<br>

<input type="button" value="Imprimir esta página" onClick="print()">

<br>

<br>

<input type="button" value="Aumenta la ventana 10 ancho,10 largo" onClick="resizeBy(10, 10)">

<br>

<br>

<input type="button" value="Fija el tamaño de la ventana en 400 x 200" onClick="resizeTo(400, 200)">

<br>

<br>

<input type="button" value="Scroll arriba del todo" onClick="scroll(0,0)">

<br>

<br>

<input type="button" value="Scroll arriba 10 pixels" onClick="scrollBy(0,-10)">

</form>

4.- Objeto document en Javascript

alinkColor

Color de los enlaces activos 

Anchor

Un ancla de la página. Se consigue con la etiqueta <A name="nombre_del_ancla">. Se accede por su nombre. 

anchors array

Un array de las anclas del documento. 

Applet

Un applet de la página. Se accede por su nombre. (Javascript 1.1) 

applets array

Un array con todos los applets de la página. (Javascript 1.1) 

Area

Una etiqueta <AREA>, de las que están vinculadas a los mapas de imágenes (Etiqueta ). Se accede por su nombre.

bgColor

El color de fondo del documento. 

classes

Las clases definidas en la declaración de estilos CSS. (Javascript 1.2) 

cookie

Una cookie 

domain

Nombre del dominio del servidor de la página. 

Embed

Un elemento de la pagina incrustado con la etiqueta <EMBED>. Se accede por su nombre. (Javascript 1.1) 

embeds array

Todos los elementos de la página incrustados con <EMBED>. (Javascript 1.1) 

fgColor

El color del texto. Para ver los cambios hay que reescribir la página.

From

Un formulario de la página. Se accede por su nombre. 

forms array

Un array con todos los formularios de la página. 

ids

Para acceder a estilos CSS. (Javascript 1.2) 

Image

Una imagen de la página web. Se accede por su nombre. (Javascript 1.1) 

images array

Cada una de las imágenes de la página introducidas en un array. (Javascript 1.1) 

lastModified

La fecha de última modificación del documento. 

linkColor

El color de los enlaces. 

Link

Un enlace de los de la página. Se accede por su nombre. 

links array

Un array con cada uno de los enlaces de la página. 

location

La URL del documento que se está visualizando. Es de solo lectura. 

referrer

La página de la que viene el usuario. 

tags

Estilos definidos a las etiquetas de HTML en la página web. (Javascript 1.2) 

title

El titulo de la página. 

URL

Lo mismo que location, pero es aconsejable utilizar location ya que URL no existe en todos los navegadores. 

vlinkColor

El color de los enlaces visitados.

4.1.- Métodos de document

captureEvents() 

Para capturar los eventos que ocurran en la página web. Recibe como parámetro el evento que se desea capturar. 

close() 

Cierra el flujo del documento.

contextual()

Ofrece una línea de control de los estilos de la página. En el caso que deseemos especificarlos con Javascript.

handleEvent()

Invocas el manejador de eventos del elemento especificado. 

open()

Abre el flujo del documento. 

releaseEvents()

Liberar los eventos capturados del tipo que se especifique, enviándolos a los objetos siguientes en la jerarquía. 

routeEvent()

Pasa un evento capturado a través de la jerarquía de eventos habitual. 

write()

Escribe dentro de la página web. Podemos escribir etiquetas HTML y texto normal. 

writeln()

Escribe igual que el método write(), aunque coloca un salto de línea al final. 

Los eventos de document sirven principalmente para controlar dos cosas. Un grupo nos ofrece una serie de funciones para el control de los documentos, como escribir, abrirlos y cerrarlos.

El otro grupo ofrece herramientas para el control de los eventos en el documento

El ejemplo consiste en una página que tiene un poco de texto y un botón. En la página podremos seleccionar algo de texto y luego apretar el botón, que llama a una función que muestra en una caja alert el texto que se ha seleccionado. El código es el siguiente: 

<html> 

<head> 

<title>Rescatar lo seleccionado</title> 

<script language="JavaScript"> 

function mostrarSeleccionado(){ 

 alert("Has seleccionado:n" + document.getSelection()) 

} 

</script> 

</head> 

<body> 

<h1>Rescatar lo seleccionado</h1> 

<br> 

<form> 

<input type="button" value="pulsame!" onClick="mostrarSeleccionado()"> 

</form> 

Selecciona cualquier texto de la página y pulsa sobre el botón. 

</body> 

</html>

4.2.- Flujo de escritura del documento

El proceso en el que el navegador está escribiendo la página le llamamos flujo de escritura del documento. El flujo comienza cuando se empieza a escribir la página y dura hasta que ésta ha terminado de escribirse. Una vez terminada la escritura de la página el flujo de escritura del documento.

Una vez cerrado el flujo no se puede escribir en la página web, ni texto ni imágenes ni otros elementos. 

En javascript tenemos que respetar el flujo de escritura del documento forzosamente. Es por ello que sólo podemos ejecutar

sentencias document.write() (método write() del objeto document) cuando está abierto el flujo de escritura del documento, o

• Ejecución de los scripts mientras que carga la página. Aquí podremos ejecutar document.write()

• Ejecución de los scripts cuando la página ha sido cargada, como respuesta a un evento del usuario. Aquí no podemos hacerlo porque la página ha terminado de cargarse

<form>

<INPUT type=button value=escribir onclick="window.document.write('hola')"> 

</form>

Si nos fijamos, en el manejador de eventos onclick hemos colocado la jerarquía de objetos desde el principio, es decir,

empezando por el objeto window. Esto es porque hay algunos navegadores que no sobreentienden el objeto window en las sentencias escritas en los manejadores de eventos.

El resultado de la ejecución puede variar de un navegador a otro, pero en cualquier caso se borrará la página que se está ejecutando.

4.3.- Métodos open() y close() de document

Los métodos open() y close() del objeto document sirven para controlar el flujo del documento desde Javascript. Nos permiten abrir y cerrar el documento explícitamente.

El ejemplo de escritura en la página anterior se debería haber escrito con su correspondiente apertura y cierre del documento y hubiese quedado algo parecido a esto. 

<script> 

function escribe(){ 

 document.open() 

 window.document.write('Hola') 

 document.close() 

} 

</script> 

<form>

Trabajo con formularios en Javascript

1.-Trabajo con formularios en Javascript

El objeto form depende en la jerarquía de objetos del objeto document. En un objeto form podemos encontrar algunos métodos y propiedades, pero lo más destacado que podremos encontrar son cada uno de los elementos del formulario. Es decir, de un formulario dependen todos los elementos que hay dentro, como pueden ser campos de texto, cajas de selección,

áreas de texto, botones de radio, etc. 

Para acceder a un formulario desde el objeto document podemos hacerlo de dos formas. 

1. A partir de su nombre, asignado con el atributo NAME de HTML. 

2. Mediante la matriz de formularios del objeto document, con el índice del formulario al que queremos acceder. 

Para este formulario 

<FORM name="f1"> 

<INPUT type=text name=campo1> 

<INPUT type=text name=campo2> 

</FORM> 

Podremos acceder con su nombre de esta manera.

document.f1

O con su índice, si suponemos que es el primero de la página. 

document.forms[0] 

De similar manera accedemos a los elementos de un formulario, que dependen del objeto form. 

1. A partir del nombre del objeto asignado con el atributo NAME de HTML. 

2. Mediante la matriz de elementos del objeto form, con el índice del elemento al que queremos acceder. 

Podríamos acceder al campo 1 del anterior formulario de dos maneras. Con su nombre lo haríamos así. 

document.f1.campo1 

o a partir del array de elementos.  document.f1.elements[0] (utilizamos el índice 0 porque es el primer elemento y en Javascript los arrays empiezan por 0.) 

Si deseamos acceder al segundo campo del formulario escribiríamos una de estas dos cosas: 

document.f1.campo2 

document.f1.elements[1] 

recordamos que también podemos acceder a un fomulario por el array de forms, indicando el índice del formulario al que acceder. De este modo, el acceso al campo2 sería el siguiente: 

document.forms[0].campo2 

document.forms[0].elements[1] 

En estos casos hemos supuesto que este formulario es el primero que hay escrito en el código HTML, por eso accedemos a él con el índice 0.

2.-Propiedades y métodos del objeto form

action

Es la acción que queremos realizar cuando se submite un formulario. Se coloca generalmente una dirección de correo o la URL a la que le mandaremos los datos. Corresponde con el atributo ACTION del formulario. 

elements array

La matriz de elementos contiene cada uno de los campos del formulario. 

encoding

El tipo de codificación del formulario 

length

El número de campos del formulario. 

method

El método por el que mandamos la información. Corresponde con el atributo METHOD del formulario. 

name

El nombre del formulario, que corresponde con el atributo NAME del formulario. 

target

La ventana o frame en la que está dirigido el formulario. Cuando se submita se actualizará la ventana o frame indicado. Corresponde con el atributo target del formulario.

Con estas propiedades podemos cambiar dinámicamente con Javascript los valores de los atributos del formulario para hacer con él lo que se desee dependiendo de las exigencias del momento.

2.1.-Métodos del objeto form

Estos son los métodos que podemos invocar con un formulario.

submit()

Para hacer que el formulario se submita, aunque no se haya pulsado el botón de submit.

reset()

Para reinicializar todos los campos del formulario, como si se hubiese pulsado el botón de reset. (Javascript 1.1)

3.- Control de campos de texto con Javascript

3.1.-Campo text

Es el campo que resulta de escribir la etiqueta <INPUT type="text">.

3.2.- Propiedades del campo text

Vemos la lista de propiedades de estos tipos de campo.

defaultValue

Es el valor por defecto que tiene un campo. Lo que contiene el atributo VALUE de la etiqueta <INPUT>.

form

Hace referencia al formulario.

name

Contiene el nombre de este campo de formulario

type

Contiene el tipo de campo de formulario que es.

value

El texto que hay escrito en el campo.

Vamos a ver un ejemplo sobre lo que puede hacer la propiedad defaultValue. En este ejemplo tenemos un formulario y un botón de reset. Si pulsamos el botón de reset el campo de texto se vacía porque su value de HTML era un string vacío. Pero si pulsamos el botón siguiente llamamos a una función que cambia el valor por defecto de ese campo de texto, de modo que al pulsar el botón de reset mostrará el nuevo valor por defecto.

<html>

<head>

<title>Cambiar el valor por defecto</title>

<script>

function cambiaDefecto(){

document.miFormulario.campo1.defaultValue = "Hola!!"

}

</script>

</head>

<body>

<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">

<input type="Text" name="campo1" value="" size="12">

<input type="Reset">

<br>

<br>

<input type="button" value="Cambia valor por defecto" onclick="cambiaDefecto()">

</form>

</body>

3.3.- Métodos del objeto text

Se pueden invocar los siguientes métodos sobre los objetos tipo Text.

blur()

Retira el foco de la aplicación del campo de texto.

focus()

Pone el foco de la aplicación en el campo de texto.

select()

Selecciona el texto del campo.

Como ejemplo vamos a mostrar una función que selecciona el texto de un campo de texto de un formulario como el de la página del ejemplo anterior. Para hacerlo hemos utilizado dos métodos, el primero para pasar el foco de la aplicación al campo de texto y el segundo para seleccionar el texto.

function seleccionaFoco(){

document.miFormulario.campo1.focus()

document.miFormulario.campo1.select()

}

3.4.- Campos Password

Estos funcionan igual que los hidden, con la peculiaridad que el contenido del campo no puede verse escrito en el campo, por lo que salen asteríscos en lugar del texto.

3.5.- Campos Hidden

Los campos hidden son como campos de texto que están ocultos para el usuario, es decir, que no se ven en la página. Son muy útiles en el desarrollo de webs para pasar variables en los formularios a las que no debe tener acceso el usuario.

Se colocan en con HTML con la etiqueta <INPUT type=hidden> y se rellenan de datos con su atributo value. Mas tarde podremos cambiar el dato que figura en el campo accediendo a la propiedad value del campo de texto igual que lo hemos hecho antes.

document.miFormulario.CampoHidden.value = "nuevo texto"

El campo hidden sólo tiene algunas de las propiedades de los campos de texto. En concreto tiene la propiedad value y las propiedades que son comunes de todos los campos de formulario: name, from y type.

4.- Control de Checkbox en Javascript

Los checkbox son las unas cajas que permiten marcarlas o no para verificar alguna cosa en un formulario.

Los checkbox se consiguen con la etiqueta <INPUT type=checkbox>. Con el atributo NAME de la etiqueta <INPUT> le podemos dar un nombre para luego acceder a ella con javascript. Con el atributo CHECKED indicamos que el campo debe aparecer chequeado por defecto.

4.1.- Propiedades de un checkbox

Las propiedades que tiene un checkbox son las siguientes.

checked

Informa sobre el estado del checkbox. Puede ser true o false.

defaultChecked

Si está chequeada por defecto o no.

value

El valor actual del checkbox.

También tiene las propiedades form, name, type como cualquier otro elemento de formulario.

4.2.- Métodos del checkbox

Veamos la lista de los métodos de un checkbox.

click()

Es como si hiciésemos un click sobre el checkbox, es decir, cambia el estado del checkbox.

blur()

Retira el foco de la aplicación del checkbox.

focus()

Coloca el foco de la aplicación en el checkbox.

<html>

<head>

<title>Ejemplo Checkbox</title>

<script>

function alertaChecked(){

alert(document.miFormulario.miCheck.checked)

}

function alertaValue(){

alert(document.miFormulario.miCheck.value)

}

function metodoClick(){

document.miFormulario.miCheck.click()

}

</script>

</head>

<body>

<form name="miFormulario" action="mailto:promocion@guiarte.com" enctype="text/plain">

<input type="checkbox" name="miCheck">

<br>

<br>

<input type="button" value="informa de su propiedad checked" onclick="alertaChecked()">

<input type="button" value="informa de su propiedad value" onclick="alertaValue()">

<br>

<br>

<input type="button" value="Simula un click" onclick="metodoClick()">

</form>

5.- Control de botones de radio en Javascript

El botón de radio (o radio button en inglés) es un elemento de formulario que permite seleccionar una opción y sólo una, sobre un conjunto de posibilidades.

Se consiguen con la etiqueta <INPUT type=radio>. Con el atributo NAME de la etiqueta <INPUT> les damos un nombre para agrupar los radio button y que sólo se pueda elegir una opción entre varias. Con el atributo value indicamos el valor de cada uno de los radio buttons. El atributo checked nos sirve para indicar cuál de los radio butons tiene que estar

seleccionado por defecto.

Los objetos radio dependen del formulario y se puede acceder a ellos por el array de elements, Este array depende del formulario y tiene el mismo nombre que los botones de radio.

5.1.- Propiedades del objeto radio

Veamos una lista de las propiedades de este elemento.

checked

Indica si está chekeado o no un botón de radio.

defaultChecked

Su estado por defecto.

value

El valor del campo de radio, asignado por la propiedad value del radio.

Length (como propiedad del array de radios)

El número de botones de radio que forman parte en el grupo. Accesible en el vector de radios.

5.2.- Métodos del objeto radio

Son los mismos que los que tenía el objeto checkbox

Ejemplo

Veamos con un ejemplo el método de trabajo con los radio buttons en el que vamos a colocar un montón de ellos y cada uno tendrá asociado un color. También habrá un botón y al pulsarlo cambiaremos el color de fondo de la pantalla al color que esté seleccionado en el conjunto de botones de radio.

<html>

<head>

<title>Ejemplo Radio Button</title>

<script>

function cambiaColor(){

var i

for (i=0;i<document.fcolores.colorin.length;i++){

if (document.fcolores.colorin[i].checked)

break;

}

document.bgColor = document.fcolores.colorin[i].value

}

</script>

</head>

<body>

<form name=fcolores>

<input type="Radio" name="colorin" value="ffffff" checked> Blanco

<br>

<input type="Radio" name="colorin" value="ff0000"> Rojo

<br>

<input type="Radio" name="colorin" value="00ff00"> Verde

<br>

<input type="Radio" name="colorin" value="0000ff"> Azul

<br>

<input type="Radio" name="colorin" value="ffff00"> Amarillo

<br>

<input type="Radio" name="colorin" value="00ff00"> Turquesa

<br>

<input type="Radio" name="colorin" value="ff00ff"> Morado

<br>

<input type="Radio" name="colorin" value="000000"> Negro

<br>

<br>

<input type="Button" name="" value="Cambia Color" onclick="cambiaColor()">

</form>

</body>

</html>

Primero podemos fijarnos en el formulario y en la lista de botones de radio. Todos se llaman "colorin", así que están asociados en un mismo grupo. Además vemos que el atributo value de cada botón cambia. También vemos un botón abajo del todo.

Con esta estructura de formulario tendremos un array de elements de 9 elementos, los 8 botones de radio y el botón de abajo.

Además tendremos un array de botones de radio que se llamará colorín y depende del formulario, accesible de esta manera.

document.form.colorin

Este array tiene en cada posición uno de los botones de radio. Así en la posición 0 está el botón del color blanco, en la posición 1 el del color rojo... Para acceder a esos botones de radio lo hacemos con su índice.

document.fcolores.colorin[0]

Si queremos acceder por ejemplo a la propiedad value del último botón de radio escribimos lo siguiente.

document.fcolores.colorin[7].value

La propiedad length del array de radios nos indica el número de botones de radio que forman parte del grupo.

document.fcolores.colorin.length

En este caso la propiedad length valdrá 8.

6.- Control de campos select con Javascript

El objeto select de un formulario es una de esas listas desplegables que nos permiten seleccionar un elemento. Se despliegan apretando sobre una flecha, a continuación se puede escoger un elemento y para acabar se vuelven a plegar

Uno de estos elementos se puede obtener utilizando la etiqueta <SELECT> dentro de un formulario. A la etiqueta le podemos añadir un atributo para darle el nombre, NAME, para luego acceder a ese campo mediante Javascript. Para expresar cada una de las posibles opciones del campo select utilizamos una etiqueta <OPTION> a la que le introducimos

un atributo VALUE para expresar su valor. El texto que colocamos después de la etiqueta <OPTION> sirve como etiqueta de esa opción, es el texto que ve el usuario asociado a esa opción.

6.1.- Propiedades del objeto select

length

Guarda la cantidad de opciones del campo select. Cantidad de etiquetas <OPTION>

Option

Hace referencia a cada una de sus opciones. Son por si mismas objetos.

options

Un array con cada una de las opciones del select.

selectedIndex

Es el índice de la opción que se encuentra seleccionada. Aparte de las conocidas propiedades comunes a todos los elementos de formulario: form y name y type.

6.2.-Métodos del objeto select

blur()

Para retirar el foco de la aplicación de ese elemento de formulario.

focus()

Para poner el foco de la aplicación.

Objeto option

Tenemos que pararnos a ver también este objeto para entender bien el campo select. Recordamos que las option son las distintas opciones que tiene un select, expresadas con la etiqueta <OPTION>.

6.3.-Propiedades de option

defaultSelected

Indica con un true o un false si esa opción es la opción por defecto. La opción por defecto se consigue con HTML colocando el atributo selected a un option.

index

El índice de esa opción dentro del select.

selected

Indica si esa opción se encuentra seleccionada o no.

text

Es el texto de la opción. Lo que puede ver el usuario en el select, que se escribe después de la etiqueta <OPTION>.

value

Indica el valor de la opción, que se introduce con el atributo VALUE de la etiqueta <OPTION>.

<form name="fomul">

Valoración sobre este web:

<select name="miSelect">

<option value="10">Muy bien

<option value="5" selected>Regular

<option value="0">Muy mal

</select>

<br>

<br>

<input type=button value="Dime propiedades" onclick="dimePropiedades()">

</form>

Ahora vamos a ver una función que recoge las propiedades más significativas del campo select y las presenta en una caja alert.

function dimePropiedades(){

var texto

texto = "El numero de opciones del select: " + document.formul.miSelect.length

var indice = document.formul.miSelect.selectedIndex

texto += "nIndice de la opcion escogida: " + indice

var valor = document.formul.miSelect.options[indice].value

texto += "nValor de la opcion escogida: " + valor

var textoEscogido = document.formul.miSelect.options[indice].text

texto += "nTexto de la opcion escogida: " + textoEscogido

alert(texto) }

6.4.-Propiedad value de un objeto select

Para acceder al valor seleccionado de un campo select podemos utilizar la propiedad value del campo select en lugar de acceder a partir del vector de options.

formul.miSelect.value

sólo está presente en navegadores Internet Explorer

7.-Control de elementos Textarea en Javascript

Un campo textarea se consigue con la etiqueta <TEXTAREA>. Con el atributo name le podemos dar un nombre para acceder al campo textarea mediante Javascript. Otros atributos interesantes son cols y rows que sirven para indicar la anchura y altura del campo textarea en caracteres, cols indica el número de columnas y rows el de filas. aunque no se puede acceder a ellos con Javascript

7.1.-Propiedades de textarea

defaultValue

Que contiene el valor por defecto del textarea.

value

Que contiene el texto que hay escrito en el textarea.

Además tiene las conocidas propiedades de elementos de formulario form, name y type.

7.2.-Métodos de textarea

Veamos una lista de los métodos, que son los mismos que en un campo de texto.

blur()

Para quitar el foco de la aplicación del textarea.

focus()

Para poner el foco de la aplicación en el textarea.

select()

Selecciona el texto del textarea.

Vamos a ver un ejemplo a continuación que presenta un formulario que tiene un textarea y un botón. Al apretar el botón se cuenta el número de caracteres y se coloca en un campo de texto.

<html>

<head>

<title>Ejemplo textarea</title>

<script>

function cuenta(){

numCaracteres = document.formul.textito.value.length

document.formul.numCaracteres.value = numCaracteres

}

</script>

</head>

<body>

<form name="formul">

<textarea name=textito cols=40 rows=3>

Este es el texto por defecto

</textarea>

<br>

<br>

Número de caracteres <input type="Text" name="numCaracteres" size="4">

<br>

<br>

<input type=button value="Cuenta caracteres" onclick="cuenta()">

</form>

</body>

</html>

Eventos en JavaScript

Los eventos son acciones que puede hacer un usuario en una etiqueta.

1.- Cómo se define un evento

Existen muchos tipos de manejadores de eventos, para muchos tipos de acciones del usuario. El manejador de eventos se coloca en la etiqueta HTML del elemento de la página que queremos que responda a las acciones del usuario.

Por ejemplo tenemos el manejador de eventos onclick, que sirve para describir acciones que queremos que se ejecuten cuando se hace un click. Si queremos que al hacer click sobre un botón pase alguna cosa, escribimos el manejador onclick en la etiqueta <INPUT type=button> de ese botón.

Se coloca un atributo nuevo en la etiqueta que tiene el mismo nombre que el evento, en este caso onclick. El atributo se iguala a las sentencias Javascript que queremos que se ejecuten al producirse el evento.

Cada elemento de la página tiene su propia lista de eventos soportados.

Dentro de los manejadores de eventos podemos colocar tantas instrucciones como deseemos, pero siempre separadas por punto y coma. Lo habitual es colocar una sola instrucción, y si se desean colocar más de una se suele crear una función con todas las instrucciones y dentro del manejador se coloca una sola instrucción que es la llamada a la función.

Sin embargo, tantas instrucciones puestas en un manejador quedan un poco confusas, habría sido mejor crear una función.

2.-Manejadores de eventos

Abort (onabort): 

Se lanza cuando se abortó la carga de un elemento de la página, por ejemplo una imagen.

Blur (onblur): 

Se procesa este evento cuando un elemento de la página, generalmente un elemento de formulario, pierde el foco de la aplicación.

Change (onchange): 

Este evento se produce cuando el usuario cambia el contenido de un elemento de formulario, tipo select, input o textarea.

Click (onclick): 

Se lanza cuando el usuario hace clic sobre un elemento de la página, que puede ser un botón, un enlace,etc.

DblClick (ondblclick): 

Este evento es lanzado cuando el usuario hace doble click en un elemento de formulario o un link.

DragDrop (ondragdrop):

Este evento se produce cuando el usuario arrastra y suelta un objeto en la ventana del

navegador.

Error (onerror): 

producido cuando hubo un error en la carga de un elemento de la página o de un documento.

Focus (onfocus): 

Se produce este evento cuando un elemento de la página, generalmente un elemento de formulario, gana el foco de la aplicación.

KeyDown (onkeydown): 

Este evento se lanza cuando el usuario pulsa una tecla.

KeyPress (onkeypress):

Se lanza el evento onkeypress cuando el usuario pulsa o mantiene pulsada una tecla.

KeyUp (onkeyup): 

Se produce cuando el usuario suelta una tecla que tenía pulsada.

Load (onload): 

Se ejecuta cuando se termina de cargar la página, o bien todos los frames del conjunto de FRAMESET.

MouseDown (onmousedown):

Este evento se produce cuando el usuario aprieta el botón del ratón.

MouseMove (onmousemove): 

Se ejecuta cuando el usuario mueve el ratón.

MouseOut (onmouseout): 

Se lanza cuando el usuario retira el puntero del ratón. Por ejemplo, si colocamos onmouseout sobre una imagen, el evento se lanzaría en el momento que el usuario sale con el puntero del ratón de esa imagen.

MouseOver (onmouseover):

Este evento se desata cuando el usuario mueve el puntero del ratón sobre un elemento.

Imaginemos que colocamos este evento en una imagen, entonces se lanza, una sola vez, en el momento de entrar con el puntero en el área que ocupa esa imagen.

MouseUp (onmouseup): 

Este evento se produce cuando el usuario suelta o deja de apretar el botón del ratón.

Move (onmove): 

Se produce cuando el usuario o un script mueven la ventana del navegador.

Reset (onreset): 

El evento se ejecuta cuando se resetea el contenido de un formulario, haciendo clic en un botón de reset del formulario, si es que lo tiene.

Resize (onresize): 

Se lanza cuando el usuario, o un script, alteran el tamaño de una ventana del navegador o de un frame.

Select (onselect): 

El evento se produce cuando el usuario selecciona un texto de un textarea o bien de un campo de texto normal.

Submit (onsubmit):

Se lanza cuando se aprieta el botón de submitir de un formulario, así que permite ejecutar código cuando el usuario envía el formulario.

UnLoad (onunload): 

Evento que se produce cuando el usuario sale de un documento, osea, al salir de la página web, ya sea por pulsar un enlace que lleva a otra página o por cerrar la ventana del navegador.

Epílogo

Muchos lenguajes de programación utilizan las cláusulas try … catch para cazar errores y realizar cosas cuando ocurran.

Estas cláusulas las podemos utilizar para tratar de ejecutar una porción de código, que sabemos que podría desatar un error en tiempo de ejecución.

Cuando ocurre un error en Javascript, se hace un tratamiento determinado (mostrar el error al usuario, ya sea mediante un mensaje o la consola Javascript, o simplemente mostrar un icono y detener la ejecución de ese código). Nosotros con try … catch podemos evitar que el error se trate de manera predeterminada y que se realicen unas acciones determinadas ante el error. Además, podemos conseguir que el código se siga ejecutando sin ningún problema.

try {

//intento algo que puede producir un error

}catch(mierror){

//hago algo cuando el error se ha detectado

}

El Bloque try se ejecuta tal cual, hasta que un posible error se ha detectado.

• Si no se detecta un error durante la ejecución del bloque try, el catch se deja del lado y no se realiza.

• En caso que sí se detecte un error en el bloque try, se ejecuta las sentencias que teníamos en el catch.

Si nos fijamos, podemos ver que el bloque catch recibe un dato, que en este caso hemos almacenado en la variable "mierror". Esa variable contiene información sobre el error detectado, que puede ser útil para realizar el tratamiento al error.

try {

//intento algo que puede producir un error

funcion_que_no_existe()

}catch(mierror){

alert("Error detectado: " + mierror.description)

}

Cuando se ejecute el try, se detectará un error, al tratar de ejecutar una función que no existe. Entonces se ejecutará la cláusula catch, mostrando el error que se ha detectado. Si nos fijamos, se muestra una descripción del error detectado mediante mierror.description.

Pero la propiedad description del error sólo existe en Internet Explorer. En Firefox, para mostrar una descripción del error lo hacemos directamente con la variable. Así:

try {

//intento algo que puede producir un error

funcion_que_no_existe()

}catch(mierror){

alert("Error detectado: " + mierror)

}

Entonces, para hacer un bloque try … catch como este que funcione en los dos navegadores deberíamos hacer esto:

try {

//intento algo que puede producir un error

funcion_que_no_existe()

}catch(mierror){

if (mierror.description){

alert("Error detectado: " + mierror.description)

}else{

alert("Error detectado: " + mierror)

}

}

También, dentro de un bloque try, podemos lanzar nosotros mismos una excepción, sin que tenga por qué haberse producido un error. Esto lo hacemos con la sentencia trow.

try {

throw "miexcepcion"; //lanza una excepción

}

catch (e) {

//tratamos la excepción

alert(e);

}

Este código, válido tanto para Internet Explorer como Firefox, lanza una excepción en el bloque try. Luego, en el bloque catch, se muestra la excepción que se ha detectado.