Aprende Web Resumen manual de Javascript

Resumen Javascript
Este es un resumen de lo visto en el manual de Javascript de Aprende Web
[Link]

1. Lo bsico

1.1. Introduccin
En este tema haremos un resumen de lo visto en el manual de javascript. El resumen
puede servirnos de recordatorio o de consulta para nuestros trabajos.
Aunque no sigamos exactamente el mismo orden que en el manual, pondremos todo lo
ms importante concerniente al cdigo javascript.
En breves dispondremos tambin del resumen en formato PDF ... estamos trabajando en
ello

1.2. Preparacin

1.2.1. Escribir el cdigo

Espacios y tabulaciones: no se tienen en cuenta espacios extra o tabulaciones al esccribir
el cdigo, al igual que en HTML y CSS.
Maysculas y minsculas: s se distingue entre maysculas y minsculas.
Comentarios: De una lnea; empiezan por dos barras inclinadas // y hasta el cambio de
lnea. De varias lneas; encerrados entre /* ... */.
Sentencias: Cada sentencia o instruccin se escribe en una lnea aparte. De no ser as
debe acabar por un punto y coma (;). No poner una misma sentencia en dos lneas
distintas.

1.2.2. Insertar el cdigo

En el mismo documento: mediante la etiqueta de "script":
<script type="text/javascript"> ... </script>

En un documento aparte: Enlazndolo mediante la etiqueta de "script":

<script type="text/javascript" src="ruta_del_archivo"></script>

En los elementos HTML: mediante los atributos de eventos u otros que enlacen con
javascript.
<p onclick=" /*codigo javascript*/ "> ... </p>

-1-
Aprende Web Resumen manual de Javascript

1.2.3. A tener en cuenta

El Doctype: La pgina HTML tiene que tener declarado el Doctype para que funcione
correctamente javascript en todos los navegadores.
Validacin: Tener bien escrito el cdigo HTML es necesario para un correcto
funcionamiento de javascript. La validacin garantiza un cdigo bien escrito.
Etiqueta noscript: Podemos usar la etiqueta <noscript> ... </noscript> para mostrar
un texto alternativo en caso de que el usuario no tenga activado javascript.
Correccin de errores: Para buscar los errores que podamos hacer al escribir el cdigo,
la mayora de los navegadores tienen una "consola de errores" en la que podemos verlos.

1.3. Variables
Variable: Elemento que se emplea para guardar un dato o valor.

1.3.1. Definir una variable

Mediante la palabra reservada var : var variable
Asignndole un valor : variable = 8
Con las dos formas anteriores a la vez : var variable = 8

1.3.2. Normas para nombrar las variables

Una variable puede tener cualquier nombre salvo algunas excepciones:
No usar las palabras reservadas para el lenguaje javascript.
Solo podemos usar letras, nmeros, y los signos $ (dlar) y _ (guin bajo)
El primer carcter no puede ser un nmero.

1.3.3. Tipos de variables

Dependiendo del dato que almacene, la variable puede ser de alguno de los siguientes
tipos:
Numrico: Su valor es un nmero. Pueden ser nmeros enteros, con decimales o en
notacin cientfica. Tambin admite nmeros en sistema octal o hexadecimal.
Cadena: Su valor es una cadena de texto. Para escribirlo debemos ponerlo entre comillas.
ej.: var texto = "esta es una cadena de texto".
Booleano: Indica si se cumple una condicin. Los nicos valores posibles son true
(verdadero) y false (falso).
Objetos: Elementos ms complejos que veremos ms adelante, como pueden ser arrays,
funciones, elementos del DOM, etc.

-2-
Aprende Web Resumen manual de Javascript

1.3.4. Caracteres de escape

Podemos usar comillas simples y dobles para poner comillas dentro de un cdigo que ya
est entre comillas, pero no podemos ir ms all. En este caso debemos usar los caracteres de
escape. Estos son:
\n : Salto de lnea.
\" : Comillas dobles.
\' : Comillas simples.
\t : Tabulador.
\r : Retorno del carro.
\f : Avance de pgina.
\b : Retroceder espacio.
\\ : Contrabarra.
La forma de escribir los caracteres especiales es usando la contrabarra seguida del
carcter a mostrar o de una referencia a la accin que se quiere obtener.

2. Operadores

2.1. Definicin
Los operadores son elementos que permiten hacer operaciones entre los distintos datos
que se manejan con javascript.
stas pueden hacerse utilizando el dato directamente o con la variable que lo contiene.
Aunque la mayora de operadores se utilizan con datos numricos, tambin hay algunos
que pueden utilizarse con otro tipo de datos.

2.2. Operadores numricos

Realizan las operaciones aritmticas clsicas entre dos nmeros, a la que se le aade la
operacin mdulo, que es el resto de la divisin. Los nmeros pueden pasarse directamente o
con variables.
Operadores numricos

Nombre Signo Descripcin Ejemplo

Suma de dos nmeros. Tambin podemos pasar cadenas de
Suma + c = a + b
texto, la segunda cadena se escribe seguida de la primera.
Resta - Resta de dos nmeros c = a - b

Multiplicacin * Multiplicacin de dos nmeros c = a * b

Divisin / Divisin entre dos nmeros c = a / b

Mdulo % Resto de la divisin entre dos nmeros c = a % b

La suma puede aplicarse tambin a las cadenas de texto, en este caso el resultado es una
cadena que contiene a la primera cadena seguida por la segunda. Podemos sumar tambin
cadenas con nmeros, en este caso el nmero se convierte en cadena.

-3-
Aprende Web Resumen manual de Javascript

2.3. Operadores de incremento

Utilizados con nmeros enteros (aunque tambin pueden usarse con nmeros con
decimales), modifican en una unidad el nmero al que se refieren.
Operadores de incremento
Nombre Signo Descripcin Ejemplo
Incremento ++ Aumenta en una unidad el nmero. ++a
creciente
Incremento --
Disminuye en una unidad el nmero --a
decreciente

2.3.1. Posicin del operador

Delante: (++a) Primero se produce el incremento y depus las dems operaciones.
Detrs: (a++) Primero se hace el resto de operaciones y despus se incrementa.

2.4. Operadores de asignacin

2.4.1. Operador de asignacin simple

Es el signo igual (=), y su principal misin es asignar un nuevo valor a las variables, o
crearlas dndoles un valor, si no existan antes.

2.4.2. Operadores de asignacin compuestos

Combinan los operadores numricos con el operador se asignacin simple. Ej.:
a += b // mismo resultado que a = a + b

Operadores de asignacin compuestos

Nombre Signo Descripcin Ejemplo

Suma y asignacin += Suma dos nmeros y asigna el resultado al primero. a += b

Resta y asignacin -= Resta dos nmeros y asigna el resultado al primero. a -= b

Multiplicacin y Multiplica dos nmeros y asigna el resultado al

*= a *= b
asignacin primero

Divisin y asignacin / Divide dos nmeros y asigna el resultado al primero a /= b

Calcula el resto de la divisin entre dos nmeros y
Mdulo y asignacin %= a %= b
asigna su valor al primero

2.5. Operadores condicionales

Comprueban si un elemento cumple una condicin. El resultado es siempre un valor

booleano. Si la condicin se cumple, el resultado es true (verdadero) y si no se cumple
el resultado es false (falso). El operador indica la condicin que debe cumplir.

-4-
Aprende Web Resumen manual de Javascript

Operadores condicionales

Nombre Signo Descripcin Ejemplo

igual == Comprueba si los dos elementos son iguales num1 == num2
Comprueba si los dos elementos son iguales, pero
idntico === aqu se comprueba tambin que los datos sean del num1 === num2
mismo tipo.
Comprueba si los dos elementos son distintos, si son
No igual != num1 != num2
iguales devuelve false
Igual que el anterior, pero tambin comprueba si los
No idntico !== num1 !== num2
datos son del mismo tipo
Comprueba si el primer valor es mayor que el
Mayor que > segundo, si es as devuelve true y si no devuelve num1 > num2
false
Comprueba si el primer valor es menor que el
Menor que < num1 == num2
segundo
Comprueba si el primer valor es mayor o igual que el
Mayor o igual que >= num1 >= num2
segundo.
Comprueba si el primer valor es mayor o igual que el
Menor o igual que <= num1 <= num2
segundo.

2.6. Operadores lgicos

Cuando debe cumplirse (o no cumplirse) ms de una condicin al mismo tiempo, se
utilizan los operadores lgicos. Los valores que devuelven los operadores lgicos son siempre
booleanos e indican si lo indicado por el operador se cumple o no.
Operadores lgicos

Nombre Signo Descripcin Ejemplo

Devuelve true slo si las dos condiciones son
AND && n1 != n2 && n1 != n3
verdaderas, si no es as devuelve false
Devuelve true slo si una de las dos condiciones es
OR || n1 == n2 || n1 == n3
verdadera, slo si las dos son falsas devuelve false
Cambia el valor del elemento al que se le aplica es decir,
Negacin ! !variable
si variable vale true, !variable valdr false

3. Estructuras

3.1. Arrays
Definicin: Lista o coleccin de datos que se guardan con un slo nombre, dentro de un
elemento.
Podemos guardar en un array todo tipo de datos, (numricos, cadenas, objetos, etc ..)
pudiendo cada dato de un mismo array ser de distinto tipo que los otros.

-5-
Aprende Web Resumen manual de Javascript

3.1.1. Formas de crear un array

Indicando sus elementos: stos se ponen entre corchetes y separados por comas.
var direccion = ["norte","sur","este","oeste"];

Mediante la instruccin new Array():

Aqu podemos tambin indicar los elementos.
var direccion = new Array("norte","sur","este","oeste");

Podemos crear tambin un array sin elementos, para aadrselos ms tarde:

var direccion = new Array();

Y podemos indicar solamente el nmero de elementos que va a tener, por ejemplo para
un array de 4 elementos:
var direccion = new Array(4);

3.1.2. Acceso y modificacin de los datos

Para acceder a un dato concreto escribiremos el nombre del array y luego entre corchetes
la posicin en la que est. sta se empieza a contar desde el nmero 0.
dato1 = direccion[0] // valor de dato1 = primer elemento del array

Para cambiar el valor de un elemento o crear uno nuevo basta con asignarle un nuevo
valor:
direccion[4] = "noroeste"

Al dar un nuevo valor a un elemento pueden pasar varias cosas:

El elemento ya exista antes y tena un valor. En este caso el nuevo valor sustituye al
antiguo.
El elemento exista antes pero no tena valor. El elemento toma el valor que se le ha
asignado.
El elemento no exista anteriormente al ser el array ms corto. Se crea el nuevo elemento y
se alarga el nmero de elementos del array hasta el indicado. Si hace falta, se crean
nuevos elementos sin valor para alcanzar el nmero indicado.

3.1.3. Saber el nmero de elementos de un array.

la propiedad .length nos dice el nmero de elementos que tiene un array:
num=[Link];

3.2. Funciones
Una funcin es un bloque de cdigo que lo aislamos del resto para poder ejecutarlo una o
varias veces desde otro punto del cdigo.

-6-
Aprende Web Resumen manual de Javascript

3.2.1. Sintaxis.
La sintaxis de la estructura para crear una funcin es la siguiente:
function miFuncion(a,b) {
//cdigo del interior de la funcin, aislado del resto
return valorRetorno;
}

Veamos las partes de esta estructura:

function: Palabra reservada function que ponemos siempre al principio.
miFuncion: Nombre que le damos a la funcin para poder llamarla despus y distinguirla
de otras. Si ignoramos este paso tendremos una funcin annima.
(a,b): Argumentos o parmetros. Son datos que pasamos al interior de la funcin para
que opere con ellos. Podemos pasar 0, 1, varios argumentos. Cuando hay ms de uno
van separados por comas. Los parntesis son siempre obligatorios, aunque no pasemos
argumentos.
{ ... } : Entre llaves escribiremos el cdigo javascript que se ejecuta al llamar a la
funcin.
return valorRetorno : Valor que devuelve la funcin una vez ejecutado el cdigo.
Consta de la palabra reservada return seguido de la variable donde hemos guardado el
valor que queremos retornar. Lo pondremos siempre al final del cdigo de la funcin. No es
obligatorio si no queremos que devuelva un valor.

3.2.2. Llamada a una funcin

Una vez creada la funcin podemos llamarla desde cualquier parte del cdigo,
simplemente escribiendo su nombre seguido del parntesis (con parmetros o no). Por ejemplo
en la funcin anterior:
miFuncin(2,5);

Esta llamada ejecutar el cdigo del interior de la funcin. Pero si queremos recoger el
valor de retorno debemos guardar la llamada en una variable:
resultado=miFuncion(2,5)

La variable resultado recoge el valor de retorno de la funcin.

3.3. Estructuras condicionales

Las estructuras condicionales comprueban si se cumple una determinada condicin. Si
sta se cumple se ejecuta un cdigo, si no es as se ejecuta otro cdigo o ninguno.

3.3.1. Estructura if
La sintaxis bsica de la estructura if es la siguiente
if (a==b /*condicin*/ ) {
//cdigo cuando se cumple la condicin.
}

-7-
Aprende Web Resumen manual de Javascript

if: Se pone en primer lugar la palabra reservada if.

(/*condicin*/): Entre parntesis escribimos la condicin que debe cumplirse
(normalmente se emplean los operadores condicionales y lgicos para escribir la
condicin).
{...}: Entre llaves se escribe el cdigo que debe ejecutarse en el caso de que la
condicin se cumpla.
Podemos ampliar este cdigo escribiendo tambin lo que debe hacer javascript cuando la
condicin no se cumple:
if (a==b /*condicin*/ ) {
//cdigo cuando se cumple la condicin.
}
else { //cdigo cuando la condicin no se cumple.
}

else : Ponemos la palabra reservada else

{ ... } : Escribimos despus entre llaves el cdigo que debe ejecutarse cuando la
condicin no se cumple.

Comprobar varias condiciones.

Cuando hay varias condiciones que deben cumplirse podemos anidar varias estructuras if
- else de la siguiente manera:
if (a==b /*condicin*/ ) {
//cdigo cuando se cumple la primera condicin.
}
else if (a==c /*condicin*/ ) {
//cdigo cuando se cumple la segunda condicin.
}
/* ....
.... */
else if (a==n /*condicin*/ ) {
//cdigo cuando se cumple la ensima condicin.
}
else { //cdigo cuando no se cumple ninguna condicin de las anteriores.
}

-8-
Aprende Web Resumen manual de Javascript

3.3.2. Estructura switch

La estructura condicional switch comprueba los diferentes valores que puede tomar una
variable, de manera que con cada valor puede ejecutare un cdigo diferente. Su sintaxis es:
switch (variable) {
case valor_1 :
//cdigo a ejecutar para el valor 1
break;
case valor_2 :
//cdigo a ejecutar para el valor 2
break;
/*....
....*/
case valor_n :
//cdigo a ejecutar para el valor n
break;
default:
//Cdigo a ejecutar en caso de que no tenga ningn valor de los anteriores
break;
}

En primer lugar ponemos la palabra reservada switch seguida de un parntesis donde

escribiremos del nombre de la variable que queremos comprobar.
Despus dentro de las llaves, escribimos una serie de instrucciones que se repiten para
cada valor. En cada uno de estos bloques pondremos:
En la primera lnea escribimos la palabra reservada case seguida del valor que queremos
comprobar. cerramos la lnea con el signo de dos puntos.
Las siguientes lneas constan del cdigo a ejecutar en el caso de que la variable tenga el
valor indicado.
La ltima lnea del bloque es la palabra reservada break, que indica que hemos
encontrado la coincidencia y se sale de la estructura.
El ltimo de estos bloques no empieza por case valor_n:, sino por default:.
Indicamos aqu el cdigo a ejecutar cuando ninguna de las condiciones anteriores se dan.

3.4. Bucles
Un bucle es una estructura en la cual hay un cdigo que se repite una y otra vez mientras
se cumpla una condicin.
El bucle, por tanto consta de dos partes, el cdigo que se repite, y la condicin. En cada
repeticin se comprueba si la condicin se cumple. Cuando esta deja de cumplirse se sale del
bucle.
Por tanto para que el bucle no se repita indefinidamente debemos cambiar en cada
repeticin la variable que controla el bucle, de forma que haya un momento en que la condicin
no se cumpla.

-9-
Aprende Web Resumen manual de Javascript

3.4.1. Estructura for

Es la estructura ms comn para crear un bucle, y su sintaxis es la siguiente:
for (i=1 /*inicializacin*/ ; i<=10 /*condicin*/ ; i++ /*actualizacin*/ ) {
//cdigo javascript que se repite en cada vuelta del bucle.
}

En primer lugar escribimos la palabra reservada for. Despus dentro de un parntesis

escribimos tres sentencias separadas por punto y coma, estas son:
Inicializacin: Damos un valor inicial a la variable que controla el bucle.
Condicin: Indicamos una condicin para la variable que controla el bucle, de manera que
cuando no se cumpla deje de repetirse.
Actualizacin: Cambiamos aqu el valor de la variable que controla el bucle, para que
llegue un momento en que la condicin deje de cumplirse.
Despus entre llaves escribimos el cdigo que debe repetirse. Dentro de este cdigo
podemos poner tambin la variable que controla el bucle; sta tendr diferente valor en cada
vuelta.

3.4.2. Estructura for in para arrays

Esta es una estructura especial para recorrer los elementos de un array. Es similar a la
anterior, sin embargo cambia lo que ponemos dentro del parntesis. Su sintaxis es la siguiente:
for ( i in miarray ) {
[Link](miarray[i]);//En cada vuelta mostramos un elemento del array.
}

Dentro del parntesis escribimos en primer lugar la variable que controla el bucle i
seguida de la palabra reservada in y el nombre del array
La variable i toma un valor inicial de 0, en cada vuelta aumenta en una unidad y
comprueba si existe el elemento del array correspondiente miarray[i]. Si no existe detiene
el bucle.
En cada repeticin podemos obtener el elemento correspondiente mediante su cdigo.
miarray[i].

3.4.3. Estructura while

La estructura while forma un bucle en el cual el cdigo indicado se repite mientras se
cumpla una determinada condicin. Su sintaxis es:
while( /*condicion*/ ) {
//Cdigo que se repite
}

Escribimos en primer lugar la palabra reservada while seguida de la condicin entre

parntesis. Despus entre llaves ponemos las sentencias que deben repetirse.
Para que esta estructura funcione correctamente dentro de la condicin debe estar la
variable o el elemento que controla el bucle, el cual debe estar definido anteriormente. En el
cdigo que se repite debe cambiar en cada vuelta la variable o elemento de control, de manera
que haya un momento en el cual la condicin no se cumpla.

-10-
Aprende Web Resumen manual de Javascript

3.4.4. Estructura do while

Como una variante de la estructura while tenemos la etructura do while con la
siguiente sintaxis:
do { //Cdigo que se repite
}
while( /*condicion*/ )

Aqu, aparte de usar la palabra reservada do, la condicin se indica al final. Esto hace que
el cdigo que se indica dentro de la estructura se ejecuta siempre al menos una vez, aunque la
condicin no se cumpla.
Por lo dems funciona igual que la estructura while.

4. Acceso al DOM

4.1. El DOM o Document Object Model

El DOM Es el Modelo de Objeto de Documento, es decir, es un modelo de estructura que
deben seguir todas las pginas Web.
Aunque estas se escriben de manera secuencial, los distintos elementos que componen la
pgina siguen un modelo jerrquico, de manera que dependen unos de otros. Estos elementos
se llaman tambin objetos:
En la pgina hay un objeto inicial (elemento padre), el objeto document (etiqueta HTML).
De l dependen dos elementos secundarios (elementos hijos) que son las etiquetas head y
body. De stas parten todos los dems elementos.
El objeto document depende a su vez del objeto window que es el navegador. El objeto
window tiene tambin otros elementos hijos adems del document.

4.2. Objetos, mtodos y propiedades

Concepto Definicin
Cualquier cosa que pueda guardarse en una variable, desde simples datos hasta elementos
Objetos
complejos (arrays, funciones, fechas, etc.)
Forma de trabajar: funciones predefinidas. Para aplicar un mtodo debemos llamar a la
Mtodos
funcin que lo contiene
Elementos que definen o cambian caractersticas de un objeto. Pueden ser de slo lectura o
Propiedades de lectura y escritura. La propiedad puede ser a su vez un objeto del que dependan otras
propiedades.

Acceso desde javascript: Javascript utiliza el operador punto ( . ) para acceder a los
diferentes mtodos y propiedades de un elemento.
n=[Link]

-11-
Aprende Web Resumen manual de Javascript

n=[Link]()
Debemos distinguir entre dos tipos de objetos, los objetos de javascript propiamente
dicho, y los objetos del DOM. En este apartao nos referiremos exclusivamente a los objetos del
DOM

4.3. Estructura del DOM

El DOM es la estructura de la
pgina, la cual est construida de
manera jerrquica, al depender
unos elementos de otros.
Cada elemento se denomina
nodo y estos dependen unos de
otros de manera jerrquica, de
modo que cada nodo tiene su
nodo padre y puede tener nodo
hijos.
Objeto inicial: es el objeto
del que depende todo. Este es el
objeto window, que es el
navegador. Como se sobreentiende no hay que escribirlo, por lo que la pgina depende del
objeto document, hijo del anterior. El objeto document marca el inicio de la pgina, y se
corresponde con la etiqueta <html>

4.4. Tipos de nodos

Aunque existen 12 tipos de nodos, en realidad, para manipular las pginas web slo
necesitamos los 5 siguientes:
Tipos de nodos en HTML
document Cada una de las etiquetas HTML
element Nodo raz del que derivan los dems
attr Cada uno de los atributos de las etiquetas HTML
text Texto encerrado en las etiquetas HTML
comment Comentarios de la pgina HTML

Los nodos attr y text son siempre hijos del nodo element (etiqueta) que lo contiene.
Solamente los nodos document y element pueden tener nodos hijo.
Los nodos comment son los comentarios que el programador pone en la pgina, y son
hijos del nodo element en el que estn escritos.

4.5. Lectura de elementos de la pgina.

Se accede a los elementos de la pgina mediante los siguientes mtodos. Todos ellos van
precedidos siempre de document. .

-12-
Aprende Web Resumen manual de Javascript

getElementsByTagName("etiqueta") Crea un array con todas las etiquetas cuyo nombre sea
"etiqueta"

getElementsByName("valor") Crea un array con todas las etiquetas cuyo atributo name sea
"valor"
getElementById("valor") Accede al nodo cuyo atributo id sea "valor"

4.6. Crear una nueva etiqueta

Pasos para crear una nueva etiqueta

Paso Cdigo y explicacin

Cdigo var escribir="nuevo texto."
1
Explicacin Variable con el nuevo texto

Cdigo var etiqueta = [Link]("tag")

2
Explicacin Crear el nodo de la etiqueta. "tag"=etiqueta HTML.

Cdigo var texto = [Link](escribir)

3 Crear el nodo de texto. Como argumento pasamos el texto, ya sea en una variable o
Explicacin
directamente entre comillas.
Cdigo var nuevoElemento = [Link](texto)
4
Explicacin Se inserta el nodo de texto como hijo del nodo de etiqueta.

Estos pasos muestran cmo crear un nodo element (de etiqueta) que contiene un nodo
text (de texto). Sin embargo esta estructura no est integrada en la pgina, sino que solamente
existe en una variable. El siguiente paso es integrar la estructura en la pgina.

4.7. Insertar o reemplazar un nodo en la pgina.

Siguiendo con el ejemplo anterior, una vez creado el nodo de etiqueta con su texto,
debemos insertarlo en la pgina o remplazarlo por otro ya existente. Veamos las opciones:

4.7.1. Insertar despus de un elemento

Insertar el nodo al final de un elemento padre: mtodo appendChild().
insertar mediante "appendChild()"

Paso Cdigo y explicacin

Cdigo [Link]("caja1").appendChild(nuevoElemento)

5 Especificamos el nodo (etiqueta) de la pgina en el que queremos introducir el nuevo

Explicacin elemento -[Link](("..")- e insertamos el elemento como
hijo. El nuevo elemento se colocar detrs de los ya existentes en ese nodo.

4.7.2. Insertar antes de un elemento.

Insertar el nuevo elemento antes de un elemento concreto de la pgina. Mtodo
insertBefore.

-13-
Aprende Web Resumen manual de Javascript

insertar mediante "insertBefore()"

Paso Cdigo y explicacin

Cdigo var referencia = [Link]("ref")
5
Explicacin Guardamos en una variable el nodo de referencia para poder insertarlo antes de ste.

Cdigo var padre = [Link]

6 En una variable guardamos el nodo padre del nodo de referencia, localizado mediante la
Explicacin
propiedad parentNode.
Cdigo [Link](nuevoElemento,referencia)

7 Desde el elemento padre insertamos el nuevo elemento con el mtodo

Explicacin insertBefore(.. , ..) donde el primer argumento ser el elemento a insertar, y el
segundo el elemento de referencia.

4.7.3. Reemplazar un elemento

Para remplazar el nuevo elemento por otro ya existente utilizamos el mtodo
replaceChild.
Remplazar mediante "replaceChild()"

Paso Cdigo y explicacin

Cdigo var viejoElemento = [Link]("remplazar")
5
Explicacin En una variable guardamos el nodo que queremos remplazar.

Cdigo var padre = [Link]

6 En una variable guardamos el nodo padre del nodo que queremos remplazar, localizado
Explicacin
mediante la propiedad parentNode.
Cdigo [Link](nuevoElemento,viejoElemento)

7 Desde el elemento padre remplazmos el nuevo elemento con el mtodo

Explicacin replaceChild(nuevo,viejo) donde el primer argumento ser el elemento a
insertar, y el segundo el elemento a remplazar.

4.8. Eliminar un nodo

Para eliminar un nodo utilizamos el mtodo removeChild()

Eliminar mediante "removeChild()"

Paso Cdigo y explicacin

Cdigo var suprimir = "[Link]("provisional")
1
Explicacin En una variable guardamos el nodo que queremos eliminar.

Cdigo [Link](suprimir)
2 Localizamos primero su elemento padre parentNode y desde ah lo eliminamos
Explicacin
mediante el mtodo removeChild pasndolo como argumento.

-14-
Aprende Web Resumen manual de Javascript

4.9. Cambiar un nodo de sitio

Para cambiar un elemento de sitio seguimos los mismos pasos que para eliminarlo
(removeChild()). El elemento, aunque est eliminado, ha quedado guardado en una
variable. Esto permite recuperarlo mediante el mtodo appendChild().
Trasladar mediante "removeChild()" y "appendChild()"

Paso Cdigo y explicacin

Cdigo var trasladar = "[Link]("elemento1")
1
Explicacin En una variable guardamos el nodo que queremos trasladar.

Cdigo [Link](trasladar)
2 Eliminamos de la pgina el elemento que queremos trasladar, sin embargo ste sigue
Explicacin
guardado en la variable.
Cdigo [Link]("caja1").appendChild(trasladar)
3 Insertamos el elemento en otro nodo mediante el mtodo appendChild tal como
Explicacin
haramos con un elemento nuevo.

Tambin podemos insertar el elemento mediante el mtodo insertBefore() siguiendo

los pasos vistos anteriormente para insertar con este mtodo.

4.10. Copiar un nodo

Para copiar un elemento en otro lugar de la pgina, conservando el original, utilizamos el
mtodo cloneNode(true).
Copiar mediante "cloneNode(true)"

Paso Cdigo y explicacin

Cdigo var elemento1 = "[Link]("elem1")
1
Explicacin En una variable guardamos el nodo que queremos copiar.
Cdigo var copia = [Link](true)
2 Hacemos una copia mediante el mtodo cloneNode(true), la cual queda guardada
Explicacin
en una variable.
Cdigo [Link]("caja1").appendChild(copia)
3 Copiamos el elemento en otro nodo mediante el mtodo appendChild tal como
Explicacin
haramos con un elemento nuevo.

Tambin podemos utilizar el mtodo insertBefore() siguiendo los pasos vistos

anteriormente para insertar con este mtodo.

4.11. Propiedad "innerHTML"

La propiedad innerHTML permite leer y escribir el cdigo HTML que hay dentro de una
etiqueta. Esto permite escribir directamente el contenido HTML que habr dentro de una
etiqueta, es decir podemos escribir directamente etiquetas anidadas.

-15-
Aprende Web Resumen manual de Javascript

[Link]:
Paso Cdigo y explicacin
Cdigo var contenido = [Link]("elem1").innerHTML
1
Explicacin Guarda en una variable el contenido HTML del elemento.

Aqu hemos usado el mtodo getElementById() para acceder al elemento, pero

podemos usar otros mtodos o utilizar variables en las que hayamos guardado variables del
tipo element.

4.11.2. Escritura
Paso Cdigo y explicacin
[Link]("elem1").innerHTML = "<a href =
Cdigo '[Link] a Google</a>"
1 Localizamos el elemento en la pgina mediante getElementById() , aplicamos
Explicacin despus la propiedad innerHTML a la cual le damos como valor el contenido HTML que
queremos que haya dentro de esa etiqueta.

La operacin de escritura borra el contenido antiguo que tena el elemento al que se le

aplica, y lo remplaza por el que le hemos dado.

4.11.3. Aadir contenido a un elemento

Podemos escribir ms contenido dentro de una etiqueta sin borrar el anterior utilizando el
operador +=.

Paso Cdigo y explicacin

Cdigo var contenido = [Link]("elem1")
1
Explicacin Guardamos el elemento en una variable, para poder manejarlo mejor.

Cdigo [Link] += "<p>aadir otro prrafo</p>"

2 Aplicamos la propiedad innerHTML con el operador de suma y asignacin +=, de esta
Explicacin
manera el cdigo que se escribe se aade al que ya tena el elemento.

4.12. Acceso a atributos

4.12.1. Acceso como propiedades

Los atributos son en realidad propiedades del nodo element (etiqueta) que los contiene,
por lo que podemos acceder a ellos de la misma manera que se accede a un propiedad de un
elemento, es decir mediante la forma .nombre_atributo. Podemos acceder tanto a su
lectura como a su escritura
Lectura del atributo

Paso Cdigo y explicacin

Cdigo var valor = [Link]("enlace1").href
1 Para leer el valor del atributo localizamos el elemento que lo contiene y lo escribimos
Explicacin
detrs como una propiedad. La variable valor ser el valor que tenga el atributo.

-16-
Aprende Web Resumen manual de Javascript

Escritura de atributo

Paso Cdigo y explicacin

Cdigo [Link]("enlace1").href = "[Link]

1 Localizamos el nodo que contiene el atributo y lo escribimos detrs como una

Explicacin propiedad. Le asignamos un nuevo valor. ste podemos escribirlo directamente o en
una variable.

Al escribir un atributo, si ste ya exista, el valor antiguo se remplaza por el nuevo. Si no

exista se crea el nuevo atributo con el valor asignado.

4.12.2. Acceso con mtodos

Podemos acceder a los atributos mediante los mtodos getAttribute() (lectura) y
setAttribute() (escritura).

Lectura de atributo

Paso Cdigo y explicacin

Cdigo valor = [Link]("elem1").getAttribute("align")

1 Localizamos el nodo que contiene el atributo y le aplicamos el mtodo

Explicacin getAtribute("..") . Como argumento pasamos el nombre del atributo.
Obtenemos as su valor

Escritura de atributo

Paso Cdigo y explicacin

Cdigo [Link]("elem1").setAttribute("align","center")

1 Localizamos el nodo que contiene el atributo y le aplicamos el mtodo

Explicacin setAtribute("..","..") . Como primer argumento pasamos el nombre del
atributo, y como segundo su valor.

Al escribir un atributo, si ste ya exista, el valor antiguo se remplaza por el nuevo. Si no

exista se crea el nuevo atributo con el valor asignado.

4.13. Acceso al cdigo CSS

Para acceder al cdigo CSS utilizamos las propiedades .[Link].

4.13.1. Acceso a CSS: Escritura

Paso Cdigo y explicacin
Cdigo [Link]("elem1").[Link] = "1.5em"

1 Localizamos el nodo al que queremos aplicar la propiedad. Ponemos despus la

Explicacin propiedad .style seguido de un punto y la propiedad CSS; le asignamos despus un
nuevo valor a la propiedad.

-17-
Aprende Web Resumen manual de Javascript

Si la propiedad ya exista antes se le cambia su valor, y si no exista se crea como nueva

con el valor indicado.
Si el nombre de la propiedad tiene ms de una palabra (separadas por guiones en CSS),
lo escribiremos todo junto y empezando por mayscula la segunda palabra y siguientes.
Escribiremos los valores entre comillas (a no ser que est guardado en una variable), y al
igual que en CSS en las medidas indicaremos el tipo. Solo en el caso de que el valor sea un
nmero (sin indicacin de medida) puede escribirse sin comillas.

4.13.2. Acceso a CSS: Lectura

Slo se puede acceder a la lectura de una propiedad CSS si sta ha sido escrita con
javascript en la forma indicada anteriormente.

Paso Cdigo y explicacin

Cdigo var valor =[Link]("elem1").[Link]

1 Localizamos el nodo que contiene la propiedad y aplicamos las mismas propiedades

Explicacin vistas anteriormente; pero aqu no le damos un nuevo valor, sino que guardamos el
valor que tiene en una variable.

4.14. Propiedades tipo array

El DOM tiene una serie de propiedades de tipo array que nos devuelven un array con
todos los elementos que tienen una serie de caractersticas. Estas son:
Propiedades tipo array

Propiedad Explicacin
[Link] Devuelve un array con todos los enlaces que hay en el documento

[Link] Devuelve un array con todos los formularios del documento

[Link] Devuelve un array con todas las imgenes del documento

Devuelve un array con todos los enlaces tipo referencia <a name="..">...</a> del
[Link]
documento

En los siguientes apartados veremos este tipo de propiedades:

4.15. Acceso a enlaces

Mediante [Link] accedemos a un array que contiene todos los enlaces de la
pgina.
enlaces = [Link]

El orden de los enlaces en el array es el mismo de aparicin en el cdigo de la pgina.

Accedemos a cada enlace mediante su nmero en el array:
enlace1=enlaces[0]

Despus podemos acceder a la ruta o al texto tanto en modo lectura como escritura:
Ruta lectura : var ruta = [Link][0].href
Texto lectura : var texto = [Link][0].innerHTML

-18-
Aprende Web Resumen manual de Javascript

Ruta escritura : [Link][0].href = "[Link]

Texto escritura : [Link][0].innerHTML = "Ir a Yahoo"
Esto podemos aplicarlo tambin para las dems propiedades de tipo array, en las cuales
podemos buscar los elementos por su posicin.
Adems en las propiedades de tipo array si la etiqueta HTML lleva el atributo name
podemos usar su valor para buscarlo en el array:

Lenguaje Cdigo
HTML <a href="[Link] name="buscador">ir a Google</a>

Javascript(1) ruta = [Link]["buscador"].href

Javascript(2) ruta = [Link]

El valor del atributo name es la referencia para buscar el enlace en el array.

Sin embargo, con los enlaces ([Link]) la bsqueda por el atributo name no
funciona en Internet Explorer, por lo que si queremos que se vea tambin en este navegador
debemos hacerlo por el nmero de posicin en el array.

4.16. Acceso a imgenes

Podemos acceder a todas las imgenes de la pgina mediante el array
[Link]
Una vez hemos accedido al array, podemos acceder a cada una de ellas mediante el
nmero de posicin en la pgina o mediante su atributo name, de la misma manera que hemos
visto para los enlaces. El acceso mediante name s que funciona en todos los navegadores,
incluido Internet Explorer.
Ejemplo: Supongamos que la siguiente imagen con el siguiente cdigo HTML es la
primera de la pgina:
<img src="[Link]" alt="Este es mi coche" name="imagenCoche">
Podemos acceder a la imagen de cualquiera de estas tres formas:
micoche = [Link][0];
micoche = [Link]["imagenCoche"];
micoche = [Link];
Una vez que accedemos a la imagen podemos acceder a cualquiera de sus atributos,
tanto para lectura como para escritura.

Cdigo Explicacin
var ruta = [Link]; Lee la ruta de la imagen
Cambia la ruta de la imagen y por tanto la imagen que
[Link] = "[Link]";
visualizamos.
var comentario = [Link]; Lee el atributo alt.
[Link] = "Mi coche nuevo"; cambia el valor del atributo alt.

4.17. Acceso a enlaces de referencia

El acceso a los enlaces de referencia se hace mediante el array [Link].

-19-
Aprende Web Resumen manual de Javascript

Para acceder a los elementos de este array podemos hacer igual que con los arrays
anteriores.
Al igual que sucede con el acceso a enlaces ([Link]) el acceso mediante el
atributo name no funciona con Internet Explorer. Veamos un ejemplo en el que el enlace de
referencia tiene el siguiente cdigo HTML y es el primero de la pgina:
<a name="ref1">Ir a seccin primera</a>

Acceso para todos los navegadores:

seccion1 = [Link][0];

Acceso a todos los navegadoes excepto Internet Explorer:

seccion1 = [Link]["ref1"];
seccion1 = [Link].ref1;

Una vez hemos accedido al elemento podemos acceder a sus atributos o al contenido del
texto mediante innerHTML.

4.18. Acceso a formularios.

El acceso a los formularios de la pgina se hace mediante el array [Link]
Esto crea un array con los distintos formularios de la pgina. Para acceder a cada uno de
ellos se procede como en los casos anteriores. En la etiqueta form ponemos el atributo name:
<form action="#" method="post" name="datos" > /* ... */ </form>
Suponiendo que sea ste el primer formulario de la pgina podemos acceder de
cualquiera de estas formas:
form1 = [Link][0];
form1 = [Link]["datos"];
form1 = [Link];
form1 = [Link];

4.18.1. Acceso a los campos del formulario

Dentro de cada formulario se crea un array elements con los elementos o campos que
ste contiene. Podemos acceder a los campos del formulario mediante su posicin en el array
o mediante el atributo name:
Por ejemplo en el formulario anterior ponemos el primer campo:
Nombre: <input type="text" name="nombre" />

Podemos acceder a l de cualquiera de estas maneras:

elem1 = [Link][0];
elem1 = [Link]["nombre"];
elem1 = [Link]

-20-
Aprende Web Resumen manual de Javascript

4.18.2. Propiedades comunes a los campos de formulario

Una vez obtenido el elemento hay varias propiedades comunes que pueden sernos tiles:
Propiedades comunes a elementos de formulario

Propiedad Ejemplo de cdigo Explicacin

Indica el tipo de elemento. Normalmente coincide con el valor
del atributo type. En los "textarea" su valor es textarea. En los
type tipo = [Link]
"select" su valor puede ser select-one o select-multiple
(slo lectura).
formulario1 = Se accede al elemento padre o formulario (slo lectura).
form [Link]
valorName = Se accede al valor del atributo name (slo lectura).
name [Link]
Permite leer y escribir el atributo value. En campos de texto
("text", "password", "textarea"), accedemos al texto escrito por
value texto = [Link]
el usuario. En campos de tipo botn ("submit", "reset",
"button"), accedemos al texto escrito en el botn.

4.18.3. Acceso a campos de texto

En los campos de tipo texto se accede al texto escrito por el usuario mediante la
propiedad .value, tal como se ha visto antes.

4.18.4. Acceso a botones radio

En un grupo de botones radio llevan todos ellos el mismo atributo name.
<form action="#" name="elegir">
<input type="radio" value="red" name="color" /> Rojo <br/>
<input type="radio" value="green" name="color" /> Verde <br/>
<input type="radio" value="blue" name="color" /> Azul <br/>
<input type="radio" value="black" name="color" /> Negro <br/>
</form>

El acceso mediante el atributo name crea un array en el que estn todos los botones
radio:
botones = [Link]

Despus con la propiedad checked aplicada a cada botn nos dir si ste est
seleccionado o no (devuelve true o false).
Mediante un bucle recorremos los elementos del array para comprobar cual est
seleccionado. El cdigo completo para el ejemplo anterior es el siguiente:
botones = [Link];
for (i=0; i<[Link]; i++) {
valor = botones[i].checked;
if (valor == true) {
elegido = botones[i];
}
}
pulsado=[Link]

-21-
Aprende Web Resumen manual de Javascript

En el cdigo anterior obtenemos el botn pulsado en la variable elegido. Despus

mediante la propiedad value podemos distinguirlo de los dems.

4.18.5. Acceso a botones checkbox

Accedemos al botn checkbox mediante el atributo name, de la misma manera que a los
dems elementos.
Despus la propiedad checked nos dir si el botn est seleccionado (true) o no
(false). Ejemplo:
<form action="#" name="condiciones">
<p><input type="checkbox" name="aceptar" /> Acepto las condiciones.</p>
</form>

Comprobamos el botn mediante el siguiente cdigo javascript:

function compruebaBoton() {
boton=[Link];
if ([Link]==true) {
acepto="si";
}
else {
acepto="no";
}
return acepto;
}

Tal como hemos hecho aqu lo normal es poner el cdigo dentro de una funcin para
llamarla cuando tengamos que comprobar el botn.

4.18.6. Acceso a listas desplegables simples

Lo que queremos saber al acceder a una lista desplegable es qu opcin ha elegido el
usuario. Para ello accedemos primero a etiqueta select, la cual llevar el atributo name.
Tenemos por ejemplo el siguiente formulario.
<form action="#" name="elegir">
<select name="color">
<option value="red">Rojo</option>
<option value="green">Verde</option>
<option value="blue">Azul</option>
<option value="black">negro</option>
</select>
</form>

Accedemos primero a la etiqueta select:

lista = [Link]

Mediante la propiedad options obtenemos el array con las opciones:

opciones = [Link];

-22-
Aprende Web Resumen manual de Javascript

Mediante la propiedad selectedIndex obtenemos el nmero que ocupa en el array el

primer elemento seleccionado.
num = [Link];

Ahora podemos acceder en el array al elemento seleccionado:

seleccionado = opciones[num];

Una vez tenemos el elemento podemos acceder al atributo value:

valor = [Link]

Tambin podemos acceder al texto de la etiqueta option mediante la propiedad text.

texto = [Link]

Podemos resumir todos estos pasos mediante un cdigo en el que los enlazamos:
valor = [Link][[Link]].value

4.18.7. Acceso a listas de seleccin mltiple

Para acceder a las listas de seleccin mltiple seguimos los mismos pasos que para las
de seleccin simple hasta obtener el array de opciones.
Una vez obtenido el array de opciones, la propiedad selectedIndex no nos sirve, ya
que solamente nos dara la primera opcin seleccionada.
Sin embargo tenemos la propiedad .selected, que aplicada a los elementos del array
nos devuelve true si ste est seleccionado, o false si no lo est. Para encontrar los
elementos seleccionados recorreremos los elementos del array en un bucle, aplicando a cada
uno de ellos la propiedad .selected. Con esto podemos encontrar los elementos que estn
seleccionados.

4.19. El objeto window

El objeto window o navegador tiene tambin sus mtodos y propiedades. Podemos verlos
todos en el Manual de Dom. Sin embargo aqu veremos aquellos con los que podemos realizar
acciones en javascript.

4.19.1. Ventanas de alerta

Son aquellas en las que sale un mensaje en el que se alerta sobre algo de la pgina. Su
apertura se realiza mediante los siguientes mtodos del objeto window:

Mtodo Ejemplo Explicacin

alert() alert("hola mundo") Ventana de alerta que muestra el argumento.

Se muestra el argumento y un cuadro de

prompt() nombre = prompt("como te llamas") dialogo para que el usuario escriba la
respuesta. sta es guardada en una variable.
Se muestra el argumento y dos botones de
"aceptar" y "cancelar". al pulsar en los botones
confirm() elige = confirm("acepta o cancela")
obtenemos en la variable los valores true o
false.

-23-
Aprende Web Resumen manual de Javascript

4.19.2. Ventanas emergentes

Son aquellas que abren otra pgina en una ventana aparte. stas dependen del mtodo
open() de window.
El mtodo tiene tres argumentos que son:
open("URL","nombre","propiedades");

El primer argumento es la ruta o URL hacia la pgina que queremos abrir.

El segundo argumento es un nombre arbitrario que le daremos a la ventana, por ejemplo
"ventana1".
El tercer argumento es opcional, y es una lista de propiedades que puede tener la
ventana. stas se escribirn seguidas y separadas por comas. Por ejemplo.
open("[Link]

Veamos cuales son las propiedades que podemos poner en el tercer argumento:

propiedad Explicacin
toolbar=yes/no Mostrar o no la barra de herramientas.

statusbar=yes/no Mostrar o no la barra de estado.

titlebar=yes/no Mostrar o no la barra de ttulo.

menubar=yes/no Mostrar o no la barra de mens.

scrollbars=yes/no Mostrar o no las barras de desplazamiento

Establece si se puede redimensionar el tama de la ventana. Slo funciona en

resizable=yes/no
Internet Explorer.
width=num Ancho de la ventana en pixels (num = nmero de pixels).

height=num Alto de la ventana en pixels (num = nmero de pixels).

Distancia en pixels (num) desde el borde superior de la pantalla al borde superior

top=num
de la ventana.
Distancia en pixels (num) desde el borde izquierdo de la pantalla al borde
left=num
izquierdo de la ventana.

4.19.3. Historial de pginas

Podemos ir hacia atrs o hacia adelante en las pginas que hemos visitado anteriormente
mediante el mtodo [Link]() de window.
Como argumento pasamos el nmero de pginas que queremos avanzar o retroceder. En
este ltimo caso el nmero ser negativo. Por ejemplo:
[Link](-1);

Este cdigo nos llevar a la pgina visitada antes de la actual.

-24-
Aprende Web Resumen manual de Javascript

4.19.4. Temporizadores
Dependiendo del objeto window hay una serie de mtodos que nos permiten retrasar el
tiempo en que se ejecuta una funcin, o hacer que sta se repita a intervalos regulares de
tiempo. Son los temporizadores.
setTimeout("funcion","tiempo")
Este mtodo hace que una funcin se ejecute despus de pasado un tiempo determinado.
Para ello en el primer argumento se escribe el nombre de la funcin (sin los parntesis), y
como segundo el nmero de milisegundos de retardo.
setInterval("funcion","tiempo")
Este mtodo hace que una funcin se ejecute repetidamente a intervalos regulares de
tiempo. Para ello en el primer argumento se escribe el nombre de la funcin (sin los
parntesis), y como segundo el nmero de milisegundos entre cada intervalo.
Para parar los temporizadores puestos en marcha con los mtodos anteriores haremos lo
siguiente:
En primer lugar debemos guardar el mtodo en una variable de referencia:
temp1=setInterval("repetir","3000");

El cdigo anterior repite la funcin repetir() (la cual debemos haber creado
previamente), cada 3 segundos. Para pararla usaremos el mtodo clearInterval() de la
siguiente manera:
clearInterval(temp1);

De la misma manera haremos con el mtodo setTimeout(). Para detener la espera y

que la funcin indicada no se ejecute, guardamos el mtodo en una variable:
temp2=setTimeout("mostrar","10000")

En este ejemplo la funcin mostrar se ejecutar diez segundos despus de haber ledo
el cdigo. Si queremos pararla antes, para que no se ejecute, javascipt debe leer el siguiente
cdigo:
clearTimeout(temp2);

4.19.5. Convertir texto en cdigo

El mtodo eval(), convierte el texto que le pasemos en el argumento en cdigo
javascript y lo ejecuta. por ejemplo :
codigo="alert='hola mundo';";
eval(codigo);

El resultado ser la ventana de alerta con el texto "hola mundo", ya que hemos convertido
una cadena de texto en cdigo javascript.

4.19.6. Redireccionar pginas

La propiedad [Link] nos devuelve la URL o direccin de la pgina en la que
estamos.
Si cambiamos la URL de la pgina, sta se redireccionar a la pgina indicada
[Link]="[Link]
Este cdigo hace que la pgina se redireccione hacia Google.

-25-
Aprende Web Resumen manual de Javascript

4.19.7. Otros mtodos y propiedades de window

Vemos aqu otros mtodos y propiedades del objeto window que pueden ser interesantes
para trabajar con javascript:

Mtodo o propiedad Explicacin

[Link]; Acceso o modificacin del color de fondo de la pgina.

[Link]; Acceso o modificacin del color del texto de la pgina.

Acceso o modificacin del ttulo de la pgina (el que aparece en la pestaa del
[Link]
navegador).
[Link] Acceso a la fecha de la ltima modificacin de la pgina.

Acceso a la informacin sobre el navegador y el sistema operativo que est

[Link]
usando el usuario.
[Link] Acceso al ancho de resolucin de pantalla que est usando el usuario.

[Link] Acceso al alto de resolucin de pantalla que est usando el usuario.

5. Eventos

5.1. Definicin
Evento es todo lo que sucede en la pgina y que pueda ser detectado por javascript.
Incluimos aqu los procesos que ocurren cuando se abre o cierra la pgina, lo que est
haciendo el usuario, etc.
Con javascript se pueden detectar cuando se produce un cambio o evento en la pgina y
a partir de ah hacer que se aplique un determinado cdigo cuando el evento se produce. De
esta forma se puede interactuar con el usuario, el cual al provocar el evento desencadena una
serie de acciones en la pgina.

5.2. Lista de eventos

El nombre del evento se construye con el prefijo "on" seguido del nombre en ingls de la
accin que desencadena el evento.
Esta es una lista de eventos que funcionan en todos los navegadores:
Eventos

Evento Descripcin Elementos a los que se aplica

<button>, <input>, <label>,
onblur Deseleccionar el elemento
<select>, <textarea>, <body>
Deseleccionar un elemento que se ha <input>, <select>,
onchange <textarea>
modificado
onclick Pulsar y soltar el ratn Todos los elementos

ondblclick Pulsar y soltar el ratn dos veces seguidas Todos los elementos
Seleccionar un elemento (con el ratn o con el <button>, <input>, <label>,
onfocus <select>, <textarea>, <body>
tabulador)
elementos de formulario y
onkeydown Pulsar una tecla (sin soltar)
<body>
elementos de formulario y
onkeypress Pulsar una tecla
<body>

-26-
Aprende Web Resumen manual de Javascript

Evento Descripcin Elementos a los que se aplica

elementos de formulario y
onkeyup Soltar una tecla pulsada
<body>
onload La pgina se ha cargado completamente <body>

onmousedown Pulsar (sin soltar) un botn del ratn todos los elementos

onmousemove Mover el ratn todos los elementos

El ratn "sale" del elemento (pasa por encima
onmouseout todos los elementos
de otro elemento)
El ratn "entra" en el elemento (pasa por
onmouseover todos los elementos
encima del elemento)
onmouseup Soltar el botn que estaba pulsado en el ratn todos los elementos

onreset Inicializar el formulario (borrar todos sus datos) <form>

Modificar el tamao de la ventana del
onresize <body>
navegador
onselect Seleccionar un texto <input>, <textarea>

onsubmit Enviar un formulario <form>

onunload abandonar o cerrar la pgina <body>

5.3. Clasificacin de eventos

Dependiendo de la manera de interactuar en la pgina podemos clasificarlos en:
Eventos del ratn: Aquellos en los que el usuario utiliza el ratn para provocarlos.
Eventos de teclado: Aquellos en los que el usuario utiliza el teclado para provocarlos.
Eventos de pgina: Aquellos en los que cambia el estado de la pgina (se carga, se
descarga, se redimensiona, etc.)
Eventos de formulario: Aquellos en los que se cambia el estado de algn elemento de un
formulario.

5.4. Interactuar con enlaces

Podemos usar un enlace para interactuar con javascript. Al pulsar el enlace nos enva a
un cdigo javascript el cual se ejecutar.
Para ello la ruta del enlace ser como en el siguiente ejemplo:
<a href="javascript: mifuncion();">iniciar mi funcion</a>;

Escribimos en el atributo href la palabra javascript seguida por dos puntos, y

despus la del cdigo javascript; normalmente la llamada a la funcin que queremos
ejecutar.

-27-
Aprende Web Resumen manual de Javascript

5.5. Insertar eventos

Tenemos tres maneras de insertar los eventos en la pgina:

5.5.1. En la etiqueta HTML directamente

En la etiqueta de HTML que debe producir el evento insertamos el evento como un
atributo de la misma. El valor del atributo es el cdigo javascript que queremos que se
produzca al producirse el evento.
onclick=alert('hola mundo');

5.5.2. En la etiqueta HTML con una funcin

Igual que el anterior, pero el cdigo javascript consiste en llamar a una funcin que
contiene el cdigo que se va a ejecutar:
onclick="mifuncion();"

5.5.3. En el propio cdigo javascript

Primero creamos la funcin donde estar el cdigo a ejecutar por el evento:
function mifuncion() { /*...*/}

Despus buscamos en la pgina el elemento al que se le aplica el evento, para incorporar

el evento como una propiedad:
[Link]("elem1").onclick = mifuncion

Como valor de la propiedad pasamos el nombre de la funcin (sin parntesis).

5.6. Funcin [Link] =function()

Muchas veces necesitamos que la pgina ya se haya cargado completamente antes de
ejecutar un cdigo javascript. Tal es el caso de la bsqueda de elementos del DOM en la
pgina. Utilizamos para ello el evento onload al que le aplicamos una funcin annima:
[Link] = function () {
/*cdigo que se ejecutar despus de cargarse la pgina completamente*/
}

La lectura de la pgina se realiza de manera secuencial, por lo que si llamamos a un

elemento del DOM antes de que ste se haya cargado, javascript no lo encontrar, ignorando
el cdigo; sobre todo si ponemos el cdigo al principio de la pgina.
Para evitar esto debemos poner las llamadas a elementos del DOM y el cdigo que
necesite que la pgina est cargada dentro de esta funcin annima.

5.7. El elemento this

Este elemento o palabra clave hace referencia al mismo elemento HTML en el que est el
evento; de manera que no lo tengamos que buscar en el DOM. Segn la forma de insertar el
evento el cdigo ser distinto:

-28-
Aprende Web Resumen manual de Javascript

Si insertamos el evento directamente en el HTML pondremos "this" para referirnos al

propio elemento:
<p onclick="[Link]='green';">Pulsa para cambiar el color</p>

Si insertamos el cdigo en el HTML mediante una funcin el elemento "this" debemos

pasarlo como argumento de la funcin:
<p onclick="mifuncion(this);">Cambia el color del texto</p>

Recogemos en la funcin el argumento para usarlo como el acceso al propio elemento del
DOM:
function mifuncion(elem) {
[Link]="green";
}

Si insertamos el cdigo directamente en javascript, podemos utilizar el elemento "this"

dentro de la funcin, por ejemplo creamos primero la funcin.
function mifuncion() {
[Link]="green";
}

Despus provocamos el evento con el cdigo:

[Link]("texto1").onclick = mifuncion;

5.8. El objeto event

Una vez producido un evento a veces necesitamos tener ms informacin sobre el mismo.
Para ello utilizamos el objeto "event".
La mayora de los navegadores obtienen este objeto al pasarlo como un argumento
implcito a la funcin que es llamada por el evento. Sin embargo Internet Explorer la considera
como una propiedad del objeto "window", por lo que el cdigo es distinto.
El cdigo compatible con todos los navegadores es el siguiente:
function manejaEventos(elEvento) {
var evento = elEvento || [Link];
/* cdigo para extraer la informacin del evento */
}

Obtenemos as el objeto "event" en la variable evento, el cual tiene una serie de

propiedades que nos darn la informacin sobre el evento.

-29-
Aprende Web Resumen manual de Javascript

5.9. Informacin del evento

5.9.1. Tipo de evento

La propiedad .type aplicada al objeto "event" nos dar la informacin del tipo de evento
que se produce:
function manejaEventos(elEvento) {
var evento = elEvento || [Link];
tipo = [Link];
}

La variable tipo nos da el nombre del evento que se ha producido, pero sin el prefijo on.
Por ejemplo si el evento es onclick, el valor de type ser "click".

5.9.2. Informacin sobre el ratn

La informacin que ms nos puede interesar sobre el ratn es la posicin del mismo, es
decir las coordenadas del puntero del ratn en la pgina.

Coordenadas del ratn

Una vez obtenido el objeto "event" (en evento), hay varias propiedades para obtener las
coordenadas del ratn. Todas ellas se miden en pxeles. Dependiendo del origen de coorde-
nadas tenemos:

Respecto a la pantalla completa: Origen de coordenadas en la esquina superior

izquierda de la pantalla:
var ooordX = [Link]; : Distancia horizontal al borde izquierdo de la
pantalla.
var ooordY = [Link]; : Distancia vertical al borde superior de la pantalla.

Respecto a la ventana del navegador: Origen de coordenadas en la esquina superior

izquierda de la parte visible de la pgina (ventana del navegador donde se muestra la pgina)
var ooordX = [Link]; : Distancia horizontal al borde izquierdo de ventana
del navegador.
var ooordY = [Link]; : Distancia vertical al borde superior de la ventana
del navegador.

Respecto al origen de la pgina: Origen de coordenadas en la esquina superior

izquierda de la propia pgina web (sta puede estar desplazada y no verse completa en el
navegador, por lo que puede no coincidir con el anterior).

var ooordX = [Link]; : Distancia horizontal al borde izquierdo de la

pgina.
var ooordY = [Link]; : Distancia vertical al borde superior de la pgina.

Esta opcin no es compatible con Internet Explorer. Para obtener las oordenadas en
Internet Explorer, obtendremos las coordenadas del navegador y le sumaremos el
desplazamiento de la pgina. El cdigo es el siguiente:

-30-
Aprende Web Resumen manual de Javascript

coordX = [Link] + [Link];

coordY = [Link] + [Link];

Los dems navegadores tambin admiten esta forma de obtener las coordenadas de la
pgina.

Botones del ratn

Otro tipo de informacin que podemos obtener es cul es el botn que se ha pulsado en el
ratn. Para ello utilizaremos la propiedad .button del objeto "event".
boton = [Link];

La propiedad slo funciona con los eventos onmousedown y onmouseup. Los dems
eventos ignoran esta propiedad.
El resultado es un nmero que indica el botn pulsado. Sin embargo da distinto resultado
en Internet Explorer que en el resto de navegadores:
En Internet Explorer : 1 = botn izquierdo; 2 = botn derecho; 3 = botn izquierdo y derecho
a la vez; 4 = botn central.
En resto de navegadores :0 = botn izquierdo; 1 = botn central; 2 = botn izquierdo.

5.9.3. Informacin sobre el teclado

El objeto "event" puede darnos informacin sobre los eventos que se producen desde el
teclado. Para ello utiliza las propiedades .keyCode y .charCode.
Estas propiedades estn disponibles para los eventos de teclado, los cuales se producen
cuando el usuario pulsa una tecla. Al pulsar una tecla se producen los siguientes eventos y en
este orden:
onkeydown: Corresponde al hecho de pulsar una tecla y no soltarla.
onkeypress: Corresponde a la propia pulsacin de la tecla.
onkeyup: Corresponde al hecho de soltar una tecla que estaba pulsada.
Las propiedades .keyCode y .charCode son admitidas por los eventos anteriores, pero
su resultado es distinto dependiendo del evento al que se le aplique. Adems en Internet
Explorer hay algunos resultados que pueden ser diferentes.
Los datos que podemos obtener con estas propiedades son:
El cdigo interno: Es un cdigo que identifica a la tecla en s, cada tecla tiene un nmero
independientemente de si con ella se pueden escribir uno, dos o tres caracteres.
Cdigo del carcter: Cada carcter asociado a una tecla tiene un cdigo, una tecla puede
tener uno dos o tres, cdigos asociados, dependiendo de si se pulsa normalmente, en
maysculas o con la tecla AlrGr.
Para saber cul es el carcter pulsado se utiliza la funcin [Link](), que
convierte el cdigo de carcter a una cadena de texto que contiene el caracter pulsado.
caracter = [Link](cod_Caracter)

-31-
Aprende Web Resumen manual de Javascript

La informacin que muestran las propiedades anteriores puede resumirse de la siguiente

manera:
Propiedades de "event" para eventos de teclado

Eventos Navegador Propiedad Valor obtenido

onkeydown keyCode Cdigo interno
Todos
onkeyup charCode No definido
keyCode Cdigo de carcter
Internet Explorer
charCode No definido
onkeypress Teclas normales: no definido
keyCode
Todos excepto Teclas especiales: cdigo interno
Internet Explorer Teclas normales: cdigo carcter
charCode
Teclas especiales: 0

Son teclas especiales aquellas que no sirven para escribir un carcter sino para cambiar
algn aspecto de la escritura (maysculas, Alt, retroceso, tabulador, etc.).

6. Objetos javascript

6.1. Introduccin
Todo elemento de javascript que puede guardarse en una variable es considerado un
objeto en javascript.
Hay dos tipos de objetos que podemos utilizar con javascript: los elementos el DOM y los
propios objetos de javascript.
Ya hemos visto los objetos del DOM en un tema anterior. Veremos ahora cules son los
objetos de javascript.
Javascript organiza sus objetos por clases, de manera que cada clase de objetos tiene
sus mtodos y sus propiedades. Todo objeto en javascript pertenece a una clase, y por lo tanto
se le pueden aplicar los mtodos y propiedades de su clase.
En javascript tenemos las siguientes clases de objetos:
Clases de objetos en javascript

Clase Explicacin
Cadenas de texto: Cualquier contenido escrito entre comillas es considerado una cadena de
String
texto.
Number Nmeros: tanto enteros como con decimales, en notacin cientfica, o en base 2, 8, o 16;

Date Permite manejar fechas, guardarlas en variable y trabajar con ellas.

Array Los arrays son tambin una clase de objetos y tienen sus mtodos y sus propiedades.

Boolean Esta clase incluye los valores booleanos true y false

Function Las funciones tambin son una clase de objetos

Expresiones regulares: Una clase de objetos para comprobar si un cadena de texto se ajusta a un
RegExp
determinado patrn.
Todos los objetos anteriores dependen jerrquicamente del objeto Object, punto de origen de
Object
los dems objetos en javascript.

-32-
Aprende Web Resumen manual de Javascript

A estos aadiremos el objeto Math, que no es una clase de objetos, pero depende
tambin del objeto Object; y que sirve para hacer algunas operaciones matemticas complejas
(races, nmero PI, potenciacin, logaritmos, etc).
Al crear una nueva variable javascript la asigna siempre a una clase de objetos, segn el
contenido de la variable sta pertenecer a una clase u otra de objetos. Si cambiamos el valor
de una variable, se cambia tambin la clase de objetos a la que pertenece si el nuevo valor se
ajusta ms a otra clase.
Tambin hay una forma general de crear cualquier objeto mediante la palabra reservada
new seguido del nombre de la clase de objeto al cual le aadimos un parntesis. dentro del
parntesis pondremos como argumento el valor del objeto :
var num = new Number(5);

6.2. La clase Number()

Al asignar a una variable un nmero como valor, sta pasa a ser automticamente un
objeto de la clase Number().
Pertenecen a esta clase todas las variables que contienen nmeros y adems pueden
contener algunos valores especiales relacionados con los nmeros (Infinity, -Infinity,
NaN);

6.2.1. Mtodos de la clase Number()

Mtodo Number()
El mtodo intentar convertir el elemento que se le pase como argumento en un nmero.
Si no lo consigue devuelve el valor NaN. Valor especial que significa "No es un nmero" ("Not a
Number"). Pueden darse los siguientes casos dependiendo del argumento que pasemos:

Argumento: Ejemplo Resultado

Un nmero num = Number(23); El resultado es el propio nmero
Cadena que representa a un Convierte el texto en el nmero que
num = Number("23");
nmero representa
Cadena con nmeros y letras num = Number("23px"); El resultado es NaN (Not a Number).
Cadena con slo texto num = Number("un texto"); El resultado es NaN (Not a Number).

Valor booleano true num = Number(true); El resultado es el nmero 1

Valor booleano false num = Number(false); El resultado es el nmero 0

Mtodo isNaN()
Este mtodo comprueba si el elemento que pasamos como argumento es un nmero.
Devuelve siempre un valor booleano: true cuando NO es un nmero, y false cuando S es
un nmero.
valor = isNaN("texto"); // valor == true;
valor = isNaN(23); // valor == false;

Mtodo parseInt()
Convierte un nmero que est escrito en una base que no es base 10 a nmero en base
10. El primer argumento recoge el nmero (en base 2, 8, 16 o otra base); el segundo indica la
base en la que est el nmero.
num = parseInt("7b",16)

-33-
Aprende Web Resumen manual de Javascript

Podemos pasar tambin un nmero escrito en sistema octal o hexadecimal para

convertirlo a base 10. En este caso no se necesita el segundo argumento:
num = parseInt(0x7b)

Mtodo toFixed()
Este mtodo redondea el valor del nmero al que se le aplica en el nmero de decimales
que se especifica en el argumento: si el nmero es negativo el redondeo se hace a nivel de
decenas (-1), centenas(-2), etc. Si no se especifica el argumento se redondea al nmero entero
ms prximo.
numero = 1234.56789
num1 = [Link](2) // num1 = 1234.57
num2 = [Link](4) // num2 = 1234.5679
num3 = [Link]() // num3 = 1235
num4 = [Link](-2) // num3 = 1200

6.2.2. Propiedades del objeto Number

Las propiedades del objeto Number son slo de lectura y devuelven una serie de valores
que pueden ser numricos o valores especiales. Son las siguientes:
Propiedades de Number

Propiedad Ejemplo Valor

NaN num = [Link] el valor devuelto es NaN
Devuelve el valor mximo que puede
MAX_VALUE num = Number.MAX_VALUE soportar el ordenador. En windows es
1.7976931348623157e+308
Devuelve el valor mnimo que puede
MIN_VALUE num = Number.MIN_VALUE soportar el ordenador. En windows es
5e-324
POSITIVE_INFINITY num = Number.POSITIVE_INFINITY el valor devuelto es Infinity

NEGATIVE_INFINITY num = Number.NEGATIVE_INFINITY el valor devuelto es -Infinity

6.3. El objeto Math

El objeto Math nos permite realizar una serie de operaciones matemticas ms
complicadas que las simples operaciones normales hechas con operadores. No es una clase
de objetos, y utiliza los objetos de la clase Number en sus propiedades y mtodos.

6.3.1. Propiedades de Math

Las propiedades del objeto Math son una serie de nmeros o valores bastante utilizados
en matemticas. Estas propiedades son de slo lectura. Son las siguientes:
Math.E: Nmero e o constante de Euler, base de los logaritmos neperianos.
Math.LN2: Logaritmo neperiano de 2.
Math.LN10: Logaritmo neperiano de 10.

-34-
Aprende Web Resumen manual de Javascript

Math.LOG2E: Logaritmo en base 2 de e.

Math.LOG10E: Logaritmo en base 10 de e.
[Link]: Nmero pi, que relaciona la circunferencia con su dimetro.
Math.SQRT1_2: Raz cuadrada de un medio.
Math.SQRT2: Raz cuadrada de 2.
Para emplear estas propiedades basta con asignarlas a una variable, o utilizarlas
directamente en las operaciones

6.3.2. Mtodos de Math

Los mtodos del objeto Math permiten realizar una serie de operciones con los nmeros
que no podemos hacer con los operadores. Podemos clasificarlos segn el tipo de operacin
que hagan.

Mtodos trigonomtricos
Las funciones trigonomtricas son aquellas que muestran la relacin entre un ngulo y los
lados de un tringulo rectngulo. Tres son las funciones principales, seno, coseno y tangente.
El valor de los ngulos debemos expresarlos en radianes, por lo que si los tenemos en
grados debemos pasarlos a radianes. La siguiente expresin nos pasa los grados a radianes.
radianes = ([Link]/180)*grados

Mtodos trigonomtricos

Nombre Ejemplo Explicacin

Devuelve el valor del seno del ngulo pasado en el
sin seno = [Link](ang);
argumento.
Devuelve el valor del coseno del ngulo pasado en el
cos coseno = [Link](ang);
argumento.
Devuelve el valor de la tangente del ngulo pasado en el
tan tangente = [Link](ang);
argumento.
Arcoseno: Operacin contraria al seno. Pasamos un nmero
asin arcsen = [Link](num); como argumento y devuelve el ngulo cuyo seno
corresponde a ese nmero.
Arcocoseno: Operacin contraria al coseno. Pasamos un
acos arccos = [Link](num); nmero como argumento y devuelve el ngulo cuyo coseno
corresponde a ese nmero.
Arcotangente: Operacin contraria a la tangente. Pasamos
atan arctan = [Link](num); un nmero como argumento y devuelve el ngulo cuya
tangente corresponde a ese nmero.
Arcotangente(2): Calcula el ngulo que forma un punto del
ang = plano (recta entre el punto y el origen de coordenadas), con
atan2 Math.atan2(coordX,coordY); la recta X (horizontal) de su origen de coordenadas. Como
argumento se pasan las coordenadas del punto.

Mtodos de cambio de nmero

Lo que hacen estos mtodos es transformar un nmero en otro que sea ms asequible a
la utilidad que le queremos dar. En concreto tenemos las siguientes transformaciones: pasarlo
a valor absoluto, redondearlo, y crear un nmero aleatorio. Los mtodos son los siguientes:

-35-
Aprende Web Resumen manual de Javascript

Mtodos de cambio de nmero

Nombre Ejemplo Explicacin

Devuelve el valor absoluto del nmero pasado en el
abs valor = [Link](num);
argumento (siempre en positivo).
Redondeo por exceso: redondea el nmero pasado en el
ceil valor = [Link](num);
argumento al entero inmediatamente superior.
Redondeo por defecto: redondea el nmero pasado en el
floor valor = [Link](num);
argumento al entero inmediatamente inferior.
Redondeo al ms prximo: redondea el nmero pasado en el
round valor = [Link](num);
argumento al entero ms prximo.
Crea un nmero aleatorio decimal entre 0 y 1; A este mtodo
random valor = [Link]();
no se le pasa ningn argumento.

Si queremos que el nmero aleatorio creado por random est entre otros valores
deberemos transformarlo. Por ejemplo si lo que queremos un nmero aleatorio entero entre 0 y
100 haremos:
azar = [Link]()*100; azar = [Link](azar);

Mtodos de clculo
Calculan ciertas operaciones complejas que no pueden realizarse con los operadores
normales.
Mtodos de clculo

Nombre Ejemplo Explicacin

Numero e elevado a num. Multiplica el nmero e o
exp valor = [Link](num); constante de Euler por s mismo las veces indicadas
en el argumento: enum .
Logaritmo neperiano de num. Devuelve el logaritmo
log valor = [Link](num);
neperiano del nmero pasado como argumento.
Mayor de dos nmeros. Se le pasan dos nmeros
max valor = [Link](num1,num2);
como argumentos, y el resultado es el mayor de ellos
Menor de dos nmeros. Se le pasan dos nmeros
min valor = [Link](num1,num2);
como argumentos, y el resultado es el menor de ellos
Potenciacin: se le pasan como argumento dos
nmeros, base,exp; eleva el primero de ellos al
pow valor = [Link](base,exp);
segundo, es decir el primero se multiplica por s
mismo tantas veces como indica el segundo.
Raz cuadrada: Obtiene la raz cuadrada del nmero
sqrt valor = [Link](num);
num pasado como argumento.

6.4. La clase Date

La clase de objetos Date permite guardar y manejar fechas en javascript.
Para crear objetos de la clase Date utilizaremos la forma habitual de crear nuevos
objetos.
fecha = new Date()

-36-
Aprende Web Resumen manual de Javascript

Si no pasamos ningn argumento en el parntesis obtendremos la fecha actual (fecha del

ordenador del usuario).
Podemos pasar una fecha distinta de la actual indicndolo con los siguientes argumentos:
fechaAnterior = new Date(anno,mes,dia,hora,minuto,segundo)

Los argumentos que pasemos deben ser todos nmeros e ir en este orden, y adems
debemos tener en cuenta lo siguiente:
El ao (anno) debe escribirse con las cuatro cifras (ej.: 2012, y no 12);
Los meses empiezan a contar desde 0 de manera que enero = 0, febrero = 1 ... diciembre =
11.
No debemos poner ceros delante de ningn nmero (por ejemplo 7, y no 07) tanto en
meses, como en horas, minutos o segundos.
Las horas van desde 0 a 23, (no existe la hora 24). Los minutos y los segundos van desde
0 a 59.
Podemos prescindir de los tres ltimos argumentos, y poner nicamente el ao, el mes y
el da:
fechaAnterior = new Date(anno,mes,dia)
En este caso la hora, minuto y segundo sern igual a 0.
Al acceder directamente a un objeto de la clase Date obtenemos la fecha en un formato
que no es muy habitual. Ser parecido a lo siguiente:
Mon Mar 01 2010 12:23:15 GMT+0100

Esto se interpreta de la siguiente manera:

Mon: da de la semana en ingls (lunes).
Mar: Mes del ao en ingls (Marzo)
01: da del mes (de 1 a 31)
2010: ao
12:23:15: Hora, minuto y segundo respectivamente.
GMT+0100: Diferencia entre la hora local y la hora internacional, o la del meridiano de
Greenwich."
Para poder ver las fechas en un formato ms normal, usaremos los mtodos de lectura de
la clase Date. Tambin hay mtodos de escritura que nos periten modificar las fechas.
Veamos primero los mtodos de lectura:

6.4.1. Mtodos de lectura.

En la siguiente tabla partimos del siguiente objeto:
fecha = new Date()

La variable fecha contiene la fecha actual. A partir de ah con los mtodos de lectura
obtenemos diferentes datos de la fecha.

-37-
Aprende Web Resumen manual de Javascript

Mtodos de lectura de Date

Nombre Ejemplo Explicacin

getDate() dia = [Link](); Devuelve el da del mes.
Devuelve el da de la semana en formato
getDay() diaSem = [Link](); numrico. La semana empieza en domingo y le
corresponde el 0, y se acaba el sbado con el 6.
Devuelve el mes en formato numrico. Empieza
getMonth() mes = [Link](); a contar en el mes de enero con el 0, y acaba en
diciembre con el 11.
Devuelve el ao completo escrito con sus
getFullYear() anno = [Link]();
cuatro cifras.
Devuelve el ao en formato corto: al ao
completo se le resta 1900; en fechas anteriores
al ao 2000 se muestran los dos ltimos dgitos;
getYear() annoCorto = [Link]()
a partir del 2000 se muestran los dos ltimos
dgitos con un 1 delante. En Internet Explorer
devuelve el ao completo igual que el anterior.
getHours() hora = getHours(); Devuelve la hora en formato de 0 a 23.
getMinutes() minuto = getMinutes(); Devuelve el minuto en formato de 0 a 59.
getSeconds() segundo = getSeconds(); Devuelve el segundo en formato de 0 a 59.
getMilliseconds() miliseg = getMilliseconds(); Devuelve el milisegundo en formato de 0 a 999.
Devuelve la cantidad de segundos transcurridos
desde el 1 de enero de 1970. Es lo que se
getTime() tiempo = getTime();
conoce como tiempo Unix. Se emplea
habitualmente para clculos con fechas
Devuelve la diferencia horaria expresada en
minutos,entre la zona en la que estamos y la
getTimezoneOffset() local = getTimezoneOffset();
hora oficial internacional o del meridiano de
Greenwich

Los mtodos de lectura empiezan todos por la palabra get, y en el parntesis no

pondremos ningn argumento.
Obtenemos mediante estos mtodos las diferentes partes de una fecha. Tal vez los ms
problemticos sean los meses y los das de la semana. Podemos usar para mostrarlos mejor
un array donde hayamos guardado los nombres de los meses, y otro array con los das de la
semana. Para mostrarlos hacemos referencia a los elementos de estos arrays con los nmeros
obtenidos en los mtodos.
Otro concepto nuevo es el del "tiempo Unix". Esta es la forma que tienen los ordenadores
de manejar el tiempo. Toda fecha se puede convertir en un nico nmero de "tiempo Unix". El
tiempo Unix se empieza a contar en milisegundos a partir del 1 de enero de 1970 a 0 horas, 0
min. 0 seg. Toda fecha anterior ser un nmero negativo. El tiempo Unix nos permite hacer
operaciones matemticas con fechas.

6.4.2. Mtodos de escritura.

Los mtodos de escritura permiten modificar parte de una fecha o la fecha completa,
reescribindola entera o slo en parte.
Los mtodos de lectura empiezan todos por get. Si cambiamos get por set, tenemos los
mtodos de escritura. Estos son los siguientes.

-38-
Aprende Web Resumen manual de Javascript

Mtodos de escritura de Date

Nombre Ejemplo Explicacin

Cambia el da del mes al recibido en el
setDate() [Link](dia);
argumento.
Cambia el mes al indicado en el argumento. Este
setMonth() [Link](mes); debe estar escrito en formato numrico (0=
Enero ... 11=Diciembre).
Cambia el ao al indicado en el argumento. Este
setFullYear() [Link](anno); debe escribirse en formato completo (con sus 4
cifras).
Cambia el ao al indicado en el argumento: Este
setYear() [Link](annoCorto) debe escribirse en formato corto, tal como se
indic para getYear() .
Cambia la hora a la indicada en el argumento.
setHours() [Link](hora);
sta debe escribirse en formato de 0 a 23.
Cambia el minuto al indicado en el argumento.
setMinutes() [Link](minuto);
ste debe escribirse en formato de 0 a 59.
Cambia el segundo al indicado en el argumento.
setSeconds() [Link](segundo);
ste debe escribirse en formato de 0 a 59.
Cambia el milisegundo al indicdo en el
setMilliseconds() [Link](miliseg); argumento. ste debe escribirse en formato de 0
a 999.
Cambia el tiempo Unix de la fecha por el
indicado en el argumento. De esta manera
setTime() [Link](tiempo);
podemos cambiar la fecha entera por la que
representa el nmero indicado.

Todos los mtodos de lectura tienen su correspondiente mtodo de escritura, excepto los
mtodos getDay() (dia de la semana) y getTimezoneOffset (zona horaria).

6.4.3. Operaciones con fechas

Para hacer operaciones con fechas, podemos utilizar las fechas en tiempo Unix. Hay que
tener en cuenta que el tiempo Unix est en milisegundos, por lo que un da es igual a
dia = 24*60*60*1000

Tambin podemos sumar o restar das a una fecha aadindolas al mtodo

correspondiente. El siguiente ejemplo indica cmo buscar qu fecha ser dentro de 120 das:
fecha = new Date(); //fecha actual.
diaActual = [Link](); //dia actual del mes.
diaBuscado = diaActual + 120; //le sumamos 120 das.
[Link](diaBuscado); //pasamos el resultado a formato de fecha.

6.5. La clase String

La clase String incluye las cadenas de texto. Cualquier variable que tenga como valor una
cadena de texto es un objeto de la clase String.
Crear un objeto de la clase String es tan simple como asignarle un valor de cadena de
texto a una variable; aunque tambin podemos utilizar el mtodo general par crear objetos:
var texto = new String("mi texto");

-39-
Aprende Web Resumen manual de Javascript

6.5.1. Propiedades
La nica propiedad de String es la propiedad .length que devuelve el nmero de
caracteres que contiene la cadena de texto.
caracteres = [Link]

6.5.2. Mtodos habituales

La clase String es la que ms mtodos tiene. stos podemos dividirlos en mtodos
habituales y en mtodos de estilo. Estos ltimos cambian el estilo del texto, y son poco usados,
ya que es preferible cambiar el estilo cambiando las propiedades CSS.
Mtodos habituales de String

Nombre Ejemplo y explicacin

texto = [Link]();
toString() Convierte cualquier elemento en una cadena de texto, por lo que en realidad no se aplica a
cadenas de texto, sino a cualquier variable.

nuevoTexto = [Link](texto2);
concat() Junta dos cadenas. A la cadena texto1 se le suma la cadena texto2 pasada como
argumento. El resultado es una nueva cadena; igual que cuando las sumamos.
textoMay = [Link]();
toUpperCase() Crea la misma cadena de texto, pero en la que todos los caracteres se han escrito en letras
maysculas
textoMin = [Link]();
toLowerCase() Crea la misma cadena de texto, pero en la que todos los caracteres se han escrito en letras
minsculas.
posicion = [Link](caracter);
Pasamos como argumento un carcter. El mtodo lo busca en la cadena, y devuelve un
indexOf() nmero que indica la posicin del carcter encontrado. Si hay ms de uno da la posicin del
primero. Se empieza a contar desde 0, (primer carcter = 0). Si no se encuentra devuelve -1.
Podemos pasar como argumento una cadena con ms de un carcter . Se busca la cadena y
si est est dentro del texto nos dir en qu posicin empieza
posicion = [Link](caracter);
lastIndexOf() Igual que el anterior pero empieza a buscar desde el final de la cadena. El resultado es la
posicin empezando a contar por el principio a partir del 0.
porcionTexto = [Link](num1,num2);

substring() Crea una subcadena que va desde el carcter que est en el num1 al caracter
inmediatamente anterior al que est en el num2. El segundo nmero es opcional, y si no se
indica la cadena devuelta va hasta el final. La cuenta de caracteres empieza en el 0.
porcionTexto = [Link](num1,num2);

substr() Crea una subcadena que empieza en el carcter que est en el num1 y de una longitud
indicada por num2. El segundo nmero es opcional, y si no se pone, la cadena va hasta el
final. La cuenta de caracteres empieza en el 0.
nuevoArray = [Link](separador);

split() Convierte la cadena de texto en un array. Como argumento se escribe el caracter que
separa los elementos del array, por ejemplo un espacio en blanco (" ") los separa en
palabras. Si no se pasa ningn argumento el caracter por defecto es la coma.
cambiado = [Link](buscarTexto,nuevoTexto);

replace() Remplaza una porcin de texto por otra. para ello el primer argumento buscarTexto
es el trozo de texto que hay que reemplazar. El segundo argumento textoNuevo es el
texto por el cual va a ser reemplazado el primero.

-40-
Aprende Web Resumen manual de Javascript

Nombre Ejemplo y explicacin

letra = [Link](num);
charAt() Devuelve el carcter que se encuentra en la posicin indicada por el nmero que se le pasa
como argumento. Las posiciones se empiezan a contar desde el 0.
codigo = [Link](num);
charCodeAt() Devuelve el cdigo Unicode del carcter que se encuentra en la posicin indicada por el
nmero que se le pasa como argumento. Las posiciones se empiezan a contar desde el 0.
enlace = [Link]("[Link]
link()
Convierte el texto en un enlace. En el argumento se le pasa la URL del enlace.

6.5.3. Mtodos de estilo de String

Estos mtodos modifican el estilo del texto. Suelen ser poco empleados ya que
normalmente se prefiere cambiar el estilo cambiando las propiedades CSS.
Mtodos de estilo de String

Nombre Ejemplo y explicacin

masGrande = [Link]();
big()
Aumenta en un punto el tamao del texto
masPequeno = [Link]();
small()
Disminuye en un punto el tamao del texto
negrita = [Link]();
bold()
Pone el texto en negrita.
cursiva = [Link]();
italics()
Pone el texto en cursiva.
monotipo = [Link]();
fixed()
Pone el texto en estilo monotype o espaciado fijo
tachado = [Link]();
strike()
Tacha el texto con una lnea horizontal en medio.
parpadeo = [Link]();
blink()
Pone el texto parpadeante.
subindice = [Link]();
sub()
El texto se muestra como un subndice.
superindice = [Link]();
sup()
El texto se muestra como un superndice.
colorTexto = [Link]("color") :
fontcolor() Cambia el color del texto al indicado en el argumento. El color puede indicarse en su
nombre en ingls para ciertos colores, o en sistema hexadecimal.
tamano = [Link](num);
fontsize()
Cambia el tamao del texto al indicado en el argumento

-41-
Aprende Web Resumen manual de Javascript

6.6. La clase Array

Los arrays o listas de elementos son considerados objetos en javascript y forman una
clase.
Ya se ha visto anteriormente la forma de crear y definir un array, por lo que no insistiremos
en ello.
La clase array tiene tambin mtodos y propiedades propios, que veremos a continuacin.

6.6.1. Propiedades
La nica propiedad de Array es la propiedad .length que devuelve el nmero de
elementos que contiene el array.
elementos = [Link]

6.6.2. Mtodos
Estos son los mtodos que pueden aplicarse a la clase Array, y por tanto a cualquier
array.

Mtodos de Array

Nombre Ejemplo y explicacin

texto = [Link]("separador");
join() Convierte un array en una cadena de texto. Como argumento pondremos el carcter o
texto que separa los elementos del array. ste es opcional y de no ponerse ser la coma.
inverso = [Link]();
reverse()
Invierte el orden de los elementos del array.
porcion = [Link](num1,num2);

slice() Devuelve un nuevo array que es una porcin del array original. El num1 indica el principio,
El num2 indica el final y este elemento no est incluido. Los elementos se empiezan a
contar desde 0. Si se omite el segundo argumento el nuevo array llega hasta el final.
ultimo = [Link]();
pop()
Elimina el ltimo elemento del array original, y lo devuelve en la variable que se le asigna.
[Link]("elemento");
push() Aade un elemento al array original, el cual lo pasamos como argumento. El elemento se
coloca despus del ltimo, modificando el array en un elemento ms.
primero = [Link]();
shift()
Elimina el primer elemento del array original, y lo devuelve en la variable que se le asigna.
[Link]("elemento");
unshift() Aade un elemento al array original, el cual se pasa como argumento. El elemento se coloca
antes del primero, modificando el array en un elemento ms.
array3 = [Link](array2);
concat() Crea un nuevo array consistente en la suma del array1, con el array2, (pasado como
argumento). El array2 coloca sus elementos despus de los del array1<*/code>.
ordenado = [Link]();
sort() Crea un array ordenado alfabticamente. El problema est en que en espaol no tiene en
cuenta la ee ni las vocales acentuadas, las cuales las pone al final.

-42-
Aprende Web Resumen manual de Javascript

6.7. La clase Boolean

La clase de objetos Boolean incluye las variables booleanas o lgicas que slo pueden
tomar los valores true y false.
Para construir un objeto de clase Boolean basta con asignar un valor booleano a una
variable, pero tambin podemos crearlo por el mtodo general:
booleano = new Boolean();

Segn el valor que le pasemos en el argumento nos devlover true o false. Si

pasamos directamente los valores true o false, nos devolver esos valores. Si no pasamos
ningn valor o pasamos como valor el nmero 0 o una cadena de texto vaca, devolver false.
En los dems casos devolver true.
La clase Boolean no tiene propiedades y mtodos propios, sino los heredados del objeto
Object.

6.8. La clase Function

Las funciones son una clase de objetos en Javascript, la clase Function. Aunque la forma
ms habitual de declararlas es: function miFuncion() { ...}; tambin lo podemos
hacer mediante la forma general de construir objetos:
miFuncin = new Function() { ... }

La clase Function no tiene propiedades y mtodos propios, sino los heredados del objeto
Object.

6.9. La clase RegExp

Las expresiones regulares son una clase de objetos en javascript. Ms adelante
dedicamos a ellas un tema en este resumen.

6.10. El objeto Object

El objeto Object es el que est en un nivel superior en la jerarqua, y del que derivan todos
los dems objetos de javascript.
Permite por lo tanto crear nuevas clases de objetos, nuevos mtodos y propiedades para
los ya existentes. Veremos ms detenidamente este objeto y cmo crear nuevos objetos en un
tema posterior.
Sus mtodos y propiedades son heredados por el resto de los objetos javascript.
Los mtodos son: toString() (ya visto con las cadenas de texto) que convierte cualquier
objeto en una cadena; y valueOf() que dependiendo del objeto devuelve un valor u otro,
aunque casi siempre es el propio objeto.
Propiedades: Sus propiedades son constructor y prototype, las cuales las veremos en un
tema posterior.

-43-
Aprende Web Resumen manual de Javascript

7. Nuevos objetos

7.1. La funcin constructor

Podemos crear nuevas clases de objetos mediante una funcin constructor. sta en
principio no se diferencia del resto de funciones. Como argumentos podemos pasar algunos
elementos que nos servirn para definir sus propiedades.
Los objetos de las nuevas clases que creamos estn en s mismos vacos de contenido.
Son las propiedades y los mtodos que les pongamos los que les dan contenido. No se trabaja
con el objeto en s, sino con sus mtodos y propiedades.
Creamos una funcin, y dentro de ella se definen las propiedades y mtodos de la misma:
function operar (a,b) { /* ...*/ }

Seguiremos un ejemplo en el que creamos un objeto que pueda hacer distintas

operaciones entre dos nmeros.

7.2. Definir propiedades

Para definir nuevas propiedades dentro de la funcin constructor utilizamos la palabra
reervada this. seguida del operador punto y el nombre del mtodo, y le asignamos el valor del
argumento que le pasamos:
function Operar (a,b) {
this.n1 = a;
this.n2 = b;
}

Hemos creado aqu una clase de objetos llamada Operar, la cual tiene dos propiedades,
que son n1 y n2

7.3. Instanciar el objeto

Instanciar un objeto es crear un nuevo objeto de una clase. Para la clase creada
anteriormente escribiremos:
operar1 = new Operar(3,5)

Hemos creado el objeto operar1. Como argumentos pasamos los valores que tendrn
las propiedades del objeto.
Ahora para ver el valor de las propiedades podemos hacer:
alert(operar1.n1+" , "+operar1.n2);

Esto nos sacar en una ventana de alerta las dos propiedades del objeto.
Las propiedades son de lectura y de escritura, por lo que podemos cambiar el valor de
alguna de las propiedades del objeto instanciado:
operar1.n1=7;

El valor de la propiedad n1 para el objeto indicado habr cambiado.

-44-
Aprende Web Resumen manual de Javascript

7.4. Definir mtodos

Los mtodos son en realidad funciones en las que podemos utilizar los valores que tienen
las propiedades, refirindonos a ellas. Siguiendo el ejemplo anterior, haremos un mtodo que
sume las dos propiedades que tiene el objeto.
Para ello dentro de la funcin constructor ponemos una nueva lnea:
[Link]=sumar

Aqu indicamos que el nuevo mtodo se llamara suma y que la funcin que controla este
mtodo es la funcin sumar, la cual la crearemos a continuacin. Vemos aqu el cdigo de la
funcin constructor seguido del cdigo de la funcin sumar.
function Operar (a,b) {
this.n1 = a;
this.n2 = b;
[Link]=sumar;
}
function sumar() {
miSuma = this.n1+this.n2;
return miSuma;
}

En la funcin de referencia (sumar), sumamos las dos propiedades. Utilizamos la palabra

this para hacer referencia a las mismas. Debemos devolver el resultado mediante un return
para que el mtodo funcione.
El mtodo puede aplicarse a cualquiera de los objetos de esta clase. Por ejemplo lo
aplicamos al objeto instanciado anteriormente y sacamos el resultado en una ventana de alerta
alert([Link]());

Esto dar como resultado una ventana de alerta que mostrar la suma de los dos
nmeros que tiene el objeto como propiedades.
Puede ser que la funcin empleada para crear el mtodo necesite algn dato adicional
que lo pasaremos en el argumento. En este caso el mtodo necesitar tambin que se le pase
en el argumento ese dato para que funcione correctamente.

7.5. La propiedad prototype

Esta es una propiedad de la clase Object que nos permite crear un nuevo objeto sin
contenido y asignarle despus los mtodos y propiedades.
Despus de crear una nueva clase con una funcin constructor podemos aadirle nuevos
mtodos y propiedades fuera de la funcin constructor mediante la propiedad prototype.
Podemos crear tambin una nueva clase de objetos mediante una funcin constructor sin
propiedades ni mtodos, y aadrselos despus con la propiedad prototype.
Al ser esta una propiedad de la clase Object, es heredadada por el resto de objetos de
javascript, lo cual nos permite tambien poder crear nuevos mtodos y propiedades para los
objetos ya definidos en javascript.

7.5.1. Asignar nuevas propiedades con prototype

Una funcin sin contenido puede convertirse en una funcin constructor al asignarle
propiedades y mtodos mediante prototype. por ejemplo :

-45-
Aprende Web Resumen manual de Javascript

function Calcular() {}

Asignamos nuevas propiedades a esta funcin, mediante la propiedad prototype

function Calcular() {}
[Link].n1 = 0;
[Link].n2;

Este cdigo convierte la funcin Calcular en una nueva clase de objetos, que tiene dos
propiedades n1 y n2. La propiedad prototype permite crear nuevas propiedades. Podemos
asignar un valor a la propiedad, el cual ser su valor por defecto, o podemos no asignarle
ningn valor en principio.
Para comprobar lo anterior podemos despus instanciar un objeto de la clase, asignar un
nuevo valor a las propiedades, y comprobarlas mediante una ventana de alerta, tal como
hacemos en este cdigo:
calculo1=new Calcular();
calculo1.n1=3;
calculo1.n2=5;
alert(calculo1.n1+" , "+calculo1.n2);

7.5.2. Asignar nuevos mtodos con prototype

Crear un nuevo mtodo para una clase de objetos se hace de forma similar, slo que
antes debemos crear la funcin del mtodo, y despus incluirla en la clase con prototype.
Seguimos con el ejemplo anterior para crearle un mtodo.
function sumar() {
miSuma=this.n1+this.n2
return miSuma
}
[Link]=sumar;

Creamos primero la funcin, en la cual podemos hacer referencia a las propiedades que
tiene el objeto mediante la palabra this. La funcin debe llevar siempre un return que
devuelve el resultado buscado.
Despus aadimos la funcin al objeto como un mtodo; para ello despus de la
propiedad prototype escribimos un punto y el nombre del mtodo, y le asignamos como valor
el nombre de la funcin (sin parntesis).
Siguiendo con el ejemplo anterior, podemos comprobar que el mtodo funciona,
aplicndoselo al objeto que ya habamos instanciado:
alert([Link]());

7.6. Prototype en objetos predefinidos: propiedades.

Podemos crear nuevas propiedades en las clases de objetos predefinidos de javascript
mediante la propiedad prototype:
[Link]="miArray";

Podemos despus usar esta propiedad en cualquier array que tengamos.

-46-
Aprende Web Resumen manual de Javascript

[Link]="miArray";
semana = ["L","M","X","J","V","S","D"];
[Link]="Semana";
alert([Link])

El resultado es un ventana de alerta con la palabra "Semana", es decir, sacamos en una

ventana de alerta la nueva propiedad aplicada a un objeto concreto.
Sin embargo esto no funciona igual con todos los objetos de javascript, ya que para los
objetos de las clases Number, String y Boolean, las propiedades que crea el programador son
de slo lectura.
En esta clases, slo si el objeto ha sido creado mediante la forma general de crear objetos
(por ejemplo texto = new String("hola");), se puede modificar la propiedad con la
escritura.

7.7. Prototype en objetos predefinidos: mtodos.

Podemos crear nuevos mtodos para las clases predefinidas de javascript mediante la
propiedad prototype. Estos funcionan siempre con todas las clases, ya sea con objetos creados
con el mtodo general o simplemente por asignacin a una variable.
En los objetos creados por el programador, cuando creamos un mtodo hacemos
referencia a sus propiedades mediante la forma [Link]. Sin embargo aqu no
queremos acceder a una propiedad, sino al objeto en s, por lo que la forma ms simple de
acceder a l es igualar una variable a la palabra this.
Veamos un ejemplo en el que creamos un mtodo en el que indicamos que un nmero
representa una cantidad de dinero en la divisa que le indicamos.
function divisa(logo="") {
dinero=this;
dinero = [Link](2) + logo
return dinero
}
[Link]=divisa;

Hemos creado el mtodo moneda(). ste redondea el nmero que le pasamos a dos
decimales y le aade el smbolo de la moneda si se lo pasamos como argumento. En caso de
no pasar ningn argumento no devuelve nada, tal como indicamos en el argumento:
(logo=""). Podemos aplicar este mtodo a algunas variables con nmeros, obteniendo los
resultados que indicamos.
n1=5.247; n1=[Link](""); // resultado: 5.25
n2=7.293; n2=[Link]("$"); // resultado: 7.29$
n3=6.5; n3=[Link](); // resultado: 6.50

8. Expresiones Regulares

8.1. Definicin
Las expresiones regulares son objetos que sirven para comprobar si un determinado
elemento se ajusta a unas determinadas caractersticas.
En javascript se utilizan para saber si una cadena de texto se ajusta a un determinado
patrn. La expresin regular marca el patrn a seguir, y luego mediante los mtodos y

-47-
Aprende Web Resumen manual de Javascript

propiedades comprobamos si la cadena se ajusta a ese patrn y realizamos acciones como

buscar, remplazar, etc.
Las expresiones regulares utilizan un lenguaje propio.
No son exclusivas de javascript, otros lenguajes de programacin como Java o PHP
tambin las usan.

8.2. Crear un objeto de la clase RegExp

Las expresiones regulares tienen una sintaxis propia. Toda expresin regular empieza y
acaba por una barra inclinada: / (cdigo) /. Esto las distingue el resto de variables, por lo
que podemos crearlas al definir la variable:
var exp = /texto/

Tambin podemos crearlas mediante el mtodo general para crear objetos.

var exp = new RegExp(texto)

En este caso no debemos poner el cdigo entre barras inclinadas.

8.3. Comprobar patrones

8.3.1. Comprobar un texto

El caso ms simple es comprobar si una determinada cadena est contenida en otra. En
la expresin indicamos la cadena a comprobar.
exp = /martes/

Podemos comprobar ahora si un determinado texto contiene la palabra "martes". Aunque

veremos ms adelante los mtodos, utilizamos de momento el mtodo test().
resultado = [Link](texto)

En el ejemplo exp es la expresin regular, y texto es la cadena de texto. El mtodo

devuelve un valor booleano: true si hay coincidencia, o false si no la hay.

8.3.2. Comprobar grupos de caracteres

Si lo que se quiere comprobar es que la cadena contenga alguno de los cractere indicados
en un grupo stos se pondrn entre corchetes:
exp = /[0123456789]/;

Aqu se buscar si el texto contiene algn nmero.

Cuando los elementos de dentro del corchete forman grupos homogneos, podemos
poner la primera y la ltima y entre medio un guin:
exp = /[a-z]/;

Aqu se buscar si el texto contiene alguna de las letras del alfabeto.

Para incluir el guin en la expresin anterior podemos ponerlo al final, o tambin al
principio, pero con una barra inclinada inversa que indica que es un carcter de escape.

-48-
Aprende Web Resumen manual de Javascript

exp = /[a-z-]/;
exp = /[\-a-z]/;

Estas dos RegExp buscan si el texto contiene cualquier letra del abecedario o un guin.
Los caracteres de escape tienen la misma funcin que en los textos, y sirven para incluir
caracteres que en el cdigo de las RegExp se usan tambin para otras cosas.

8.4. Clases de caracteres

Para los casos ms habituales hay unos caracteres especiales que indican si la cadena
contiene un determinado tipo de caracteres:
/\w/ : Contiene caracteres alfanumricos.
/\W/ : Devuelve false si slo contiene caracteres alfanumricos.
/\d/ : Contiene digitos o cifras
/\D/ : Devuelve false si slo contiene dgitos.
/\s/ : Contiene alguno de los caracteres que definen espacios en blanco (espacio,
tabulador, retorno de carro ... )
/\S/ : Devuelve false si slo contiene caracteres que definen espacios en blanco.
Tenemos tambin la expresin /./ que indica "cualquier caracter" y que se utiliza para
saber si una cadena no est vaca.
Los signos ^ y $ al principio y final de la RegExp, indican que sta debe coincidir
completamente con la cadena de texto (no slo una parte).

8.5. Cuantificadores
Adems del patrn o texto a buscar, hay unos signos que ponemos detrs y que indican
las veces que debe aparecer el texto para ajustarse al patrn. Son los cuantificadores:
/a+/ : La cadena debe contener el patrn (letra "a") una o ms veces.
/a*/ : El patrn (letra a) debe aparecer cero o ms veces.
/a?/ : El patn debe aparecer cero o una vez.
/a{3}/ : El patn debe aparecer exactamente tres veces (en lugar del 3 puede ser
cualquier otro nmero).
/a{3,8}/ : El patn debe aparecer entre 3 y 8 veces (ambos inclusive).

8.6. Modificadores
Los modificadores o "flags" son unas letras con un significado especial que se ponen
detrs de la expresin regular, y matizan la forma de buscar. Estos son los siguientes:
g : /a/g :Explora la cadena hasta el final.
i : /a/i :No distingue entre maysculas y minsculas.
m : /a/m :Permite usar varios ^ y $ en la cadena.
s : /a/s :Incluye el salto de lnea en el comodn punto .
x : /a/x :ignora los espacios en el patrn .

-49-
Aprende Web Resumen manual de Javascript

Si escribimos ms de un modificador en una expresin regular, debemos ponerlos en el

mismo orden que aparecen arriba, es decir, en orden alfabtico.

8.7. Mtodos de RegExp.

La clase RegExp tiene varios mtodos. Adems tambin podemos usar algunos mtodos
de la clase String con las expresiones regulares.
Mtodos de RegExp

Nombre Ejemplo y explicacin

buscar = [Link](texto)
test() Devuelve un valor booleano que indica si la expresin (exp) est contenida o no en la
cadena(texto).
compilado = [Link](exp);
compile() Convierte la expresin en un formato interno para que la ejecucin sea ms rpida. Por ejemplo,
esto permite un uso ms eficiente de RegExp en bucles.
buscar = [Link](texto);
exec() busca la expresion en el texto, y devuelve el primer texto que concuerda con la expresin
buscada. Si no encuentra ninguna coincidencia, entonces devuleve null.

El mtodo exec tiene adems dos propiedades: .index, que nos indica la posicin en la
que se encuentra la cadena buscada; y .input, que devuelve la cadena completa en la que
estamos realizando la bsqueda.

8.8. Mtodos de String para RegExp.

Los siguientes mtodos de la clase String pueden usarse para trabajar con expresiones
regulares. En ellos la RegExp se pasa siempre como argumento.
Mtodos de String para RegExp

Nombre Ejemplo y explicacin

buscar = [Link](expresion)
search() Busca la expresin en el texto. si la encuentra devuelve un nmero indicando la posicin del
primer carcter, empezando a contar desde 0, si no la encuentra devuelve -1.
miArray = [Link](expresion);
split() Transforma el texto en un array, la expresion indica cual es el delimitador que separa los
elementos del array.
cadena = [Link](expresion,nuevo_texto)
replace() Devuelve el texto original, en la que se ha remplazado las coincidencias encontradas por la
expresion, por un nuevo_texto pasado como segundo argumento.

8.9. Propiedades de RegExp

Las propiedades del objeto RegExp se usan directamente sobre el objeto RegExp, por
tanto se escribirn de la forma: [Link]
Son de slo lectura, sin embargo se actualizan automticamente cada vez que se emplea
un mtodo, ya sea de RegExp o de String; por lo que el valor obtenido corresponder al ltimo
mtodo empleado.

-50-
Aprende Web Resumen manual de Javascript

Propiedades de RegExp

Propiedad Ejemplo y explicacin

indice = RegExp.$1
$1 ... $9 ndices que contienen las partes agrupadas con parntesis en el patrn de bsqueda.
texto = [Link]
input Devuelve la ltima cadena que se ha explorado mediante un mtodo.
texto = [Link]
lastMatch Devuelve la ltima coincidencia encontrada.
comprobar = [Link]
multiline Devuelve una variable booleana que indica si la cadena explorada incluye saltos de lnea.
texto = [Link]
lastParent Devuelve la ltima coincidencia encontrada con un patrn entre parntesis.
texto = [Link]
leftContext En la ltima cadena explorada devuelve desde el principio hasta la ltima coincidencia hallada.
texto = [Link]
rightContext En la ltima cadena explorada devuelve desde la ltima coincidencia hasta el final.

8.10. Expresiones Regulares habituales

Los ejemplos vistos hasta ahora tienen expresiones regulares sencillas. Sin embargo la
cosa puede complicarse cuando tratamos de hacer expresiones regulares que se ajusten a
patrones ms complejos, para comprobar que algunas cadenas estn escritas correctamente.
En estos casos lo ms sencillo es recurrir a una lista con las RegExp ms habituales.
Veamos algunas de ellas:
E-mail : /^[\w]+@{1}[\w]+\.[a-z]{2,3}$/
Pgina web : /^http[s]?:\/\/[\w]+([\.]+[\w]+)+$/
Nombre propio de persona : /^([A-Z]{1}[a-z]+[\s]*)+$/
Nm. telfono de Espaa : /^[9|6]{1}([\d]{2}[-]*){3}[\d]{2}$/

9. Cookies

9.1. Definicin
Las cookies son datos de la pgina que pueden guardarse en el ordenador del usuario, de
manera que ste pueda recuperarlos
Al cerrar la pgina se perdern los datos que hay en ella, a no ser que los guardemos en
cookies. En javascript podemos guardar cualquier dato o variable en una cookie. Al volver a
abrir la pgina las cookies guardadas estarn disponibles para ser usadas.
Las cookies se guardan en el ordenador del usuario, y concretamente en el navegador
que se est usando. Para ello el navegador debe tener habilitadas las cookies. Normalmente
solemos encontrar el botn para habilitar cookies en la pestaa de "herramientas/opciones", o
en "configuracin": aunque lo normal es que stas estn ya habilitadas por defecto.
Las cookies se guardan en el navegador, por lo que para recuperarlas debemos usar no
slo el mismo ordenador, sino tambin el mismo navegador en que las hemos creado. Sin
embargo una cookie creada en una pgina puede verse en otra distinta.

-51-
Aprende Web Resumen manual de Javascript

Hay ciertas limitaciones en el uso de cookies. Un usuario no puede almacenar ms de 300

cookies, y el tamao mximo de cada cookie es de 4000 bytes.

9.2. Guardar cookies

Para crear una nueva cookie usaremos la propiedad [Link] de la siguiente
manera:
[Link] = "nombre=valor";

A cada cookie le asignamos un nombre y un valor. Con el nombre identificamos la cookie

entre otras que podamos tener, y en el valor guardamos el dato que nos interesa.
En el ejemplo anterior hemos pasado los datos en forma de cadena de texto, por lo que lo
escrito es lo que guardamos. Sin embargo podemos pasar los datos mediante variables si los
sacamos de la cadena, por ejemplo:
nombre = "color";
valor = "rojo";
[Link] = nombre+"="+valor;

De esta manera podemos guardar cualquier variable en una cookie, y adems guardar su
nombre en una variable.
Para cambiar el dato almacenado en una cookie basta rescribirla cambiando slo el dato,
pero no el nombre:
[Link] = "color=rojo"; //cookie inicial
[Link] = "color=verde"; //Cambiamos el valor de la cookie

Las cookies tal como las tenemos hasta ahora no pueden ser guardadas, pues
desaparecen al cerrar la pgina. Para poder conservarlas debemos ponerles una fecha de
caducidad. Esto lo hacemos aadindole el siguiente cdigo:
[Link] = "color=rojo;expires=31 Dec 2020 23:59:59 GMT"

Despus del nombre y el valor, escribimos el punto y coma, la palabra expires y el signo
igual, a continuacin escribimos la fecha de caducidad. La fecha ir siempre en el formato que
tiene en el ejemplo, es decir: da del mes, mes abreviado en ingls, ao completo, hora minuto
y segundo separados por signos de dos puntos, y el literal GMT
Todo lo anterior, incluido el nombre y el valor, est incluido dentro de una cadena de texto.
Por lo tanto si lo tenemos guardado en variables, debemos sacar las variables de la cadena,
para unirlas a ella mediante el signo + . Ejemplo:
nombre = "color";
valor = "rojo";
fecha = "31 Dec 2020 23:59:59 GMT";
[Link] = nombre+"="+valor+";expires="+fecha;

La cookie dejar de funcionar cuando le llegue su fecha de caducidad. Entonces ser

borrada de la lista de cookies.
Por lo tanto para borrar una cookie basta con cambiarle la fecha de caducidad a una
fecha anterior a la actual.

-52-
Aprende Web Resumen manual de Javascript

9.3. Leer cookies

No hay un mtodo concreto para acceder a un valor determinado de una cookie, por lo
que seguiremos una serie de pasos.
En primer lugar accedemos a todas las cookies mediante la instruccin:
misCookies = [Link];

La variable misCookies contendr todas las cookies que tenga guardadas el usuario en
el ordenador mediante javascript. Estas se mostrarn en una cadena de texto que tiene el
siguiente formato:
"nombre1=valor1;nombre2=valor2;/* ... */nombreN=valorN"

El siguiente paso sera convertir esta cadena de texto en un array en el que cada
elemento sea una cookie, para ello utilizamos el mtodo split().
listaCookies = [Link](";")
Como separador utilizamos el punto y coma, que es el elemento que separa las cookies
dentro de la cadena. De esta manera se forma un array en el que cada elemento es una cookie
distinta.
El siguiente paso es buscar la cookie en el array. Nosotros conocemos el nombre e la
cookie, y queremos buscar su valor. Crearemos un bucle que busque la cookie dentro del
array. Utilizaremos para ello el mtodo search(). Por ejemplo buscamos una cookie llamada
"color".
for (i in listaCookies) {
busca = listaCookies[i].search("color");
if (busca > -1) {micookie=lista[i]}
}

Tenemos ya aislada la cookie en una cadena de texto (variable micookie), sin embargo
en sta se muestra tanto el nombre como su valor separados por el signo igual
("nombre=valor").
Lo que nos interesa aqu es obtener el valor, para ello utilizamos los mtodos indexOf y
substring() para aislar el valor de la cookie.
Con indexOf localizamos la posicin en la cadena del signo igual, que es el que separa
los dos valores:
pos = [Link]("=");

Esto nos devuelve el nmero de posicin del signo igual. Para tener una cadena que
tenga solamente lo que hay detrs del signo igual, utilizamos el mtodo substring()
micookie = [Link](pos+1);

Con esto obtenemos el valor de la cookie buscada.

Todo este proceso podemos ponerlo en una funcin en la que pasamos como argumento
el nombre de la cookie y nos devuelve su valor. La funcin ser la siguiente:

-53-
Aprende Web Resumen manual de Javascript

function leerCookie(nombre) {
var lista = [Link](";");
for (i in lista) {
var busca = lista[i].search(nombre);
if (busca > -1) {micookie=lista[i]}
}
var pos = [Link]("=");
var valor = [Link](pos+1);
return valor;
}

Con esta funcin podemos leer fcilmente cualquier cookie, no tenemos ms que llamarla
y pasar como argumento el nombre de la cookie para obtener su valor:
dato = leerCookie("color");

9.4. Almacenamiento Local en HTML5

El nuevo HTML5 resuelve el problema mediante un nuevo mtodo, el del almacenamiento
local. Este crea una serie de mtodos que almacenan los de datos en el ordenador del usuario
de una manera ms eficaz, dejando las cookies un tanto obsoletas. Para ver ms sobre esto
nos remitimos al manual de HTML5.

-54-
Aprende Web Resumen manual de Javascript

Contenidos
1. LO BSICO ..................................................................................................................................... 1

1.1. INTRODUCCIN................................................................................................................................ 1
1.2. PREPARACIN ................................................................................................................................. 1
1.3. VARIABLES ...................................................................................................................................... 2

2. OPERADORES ................................................................................................................................ 3

2.1. DEFINICIN..................................................................................................................................... 3
2.2. OPERADORES NUMRICOS ................................................................................................................. 3
2.3. OPERADORES DE INCREMENTO ........................................................................................................... 4
2.4. OPERADORES DE ASIGNACIN............................................................................................................. 4
2.5. OPERADORES CONDICIONALES ............................................................................................................ 4
2.6. OPERADORES LGICOS ...................................................................................................................... 5

3. ESTRUCTURAS ............................................................................................................................... 5

3.1. ARRAYS .......................................................................................................................................... 5

3.2. FUNCIONES ..................................................................................................................................... 6
3.3. ESTRUCTURAS CONDICIONALES ........................................................................................................... 7
3.4. BUCLES .......................................................................................................................................... 9

4. ACCESO AL DOM .......................................................................................................................... 11

4.1. EL DOM O DOCUMENT OBJECT MODEL ............................................................................................ 11

4.2. OBJETOS, MTODOS Y PROPIEDADES .................................................................................................. 11
4.3. ESTRUCTURA DEL DOM .................................................................................................................. 12
4.4. TIPOS DE NODOS ............................................................................................................................ 12
4.5. LECTURA DE ELEMENTOS DE LA PGINA. ............................................................................................. 12
4.6. CREAR UNA NUEVA ETIQUETA ........................................................................................................... 13
4.7. INSERTAR O REEMPLAZAR UN NODO EN LA PGINA................................................................................ 13
4.8. ELIMINAR UN NODO ....................................................................................................................... 14
4.9. CAMBIAR UN NODO DE SITIO ............................................................................................................ 15
4.10. COPIAR UN NODO .......................................................................................................................... 15
4.11. PROPIEDAD "INNERHTML" ............................................................................................................. 15
4.12. ACCESO A ATRIBUTOS ..................................................................................................................... 16
4.13. ACCESO AL CDIGO CSS .................................................................................................................. 17
4.14. PROPIEDADES TIPO ARRAY ............................................................................................................... 18
4.15. ACCESO A ENLACES ......................................................................................................................... 18
4.16. ACCESO A IMGENES ...................................................................................................................... 19
4.17. ACCESO A ENLACES DE REFERENCIA .................................................................................................... 19
4.18. ACCESO A FORMULARIOS. ................................................................................................................ 20
4.19. EL OBJETO WINDOW ....................................................................................................................... 23
5. EVENTOS ..................................................................................................................................... 26

5.1. DEFINICIN................................................................................................................................... 26
5.2. LISTA DE EVENTOS .......................................................................................................................... 26
5.3. CLASIFICACIN DE EVENTOS ............................................................................................................. 27
5.4. INTERACTUAR CON ENLACES ............................................................................................................. 27
5.5. INSERTAR EVENTOS......................................................................................................................... 28
5.6. FUNCIN [Link] =FUNCTION() ......................................................................................... 28

-55-
Aprende Web Resumen manual de Javascript

5.7. EL ELEMENTO THIS ......................................................................................................................... 28

5.8. EL OBJETO EVENT ........................................................................................................................... 29
5.9. INFORMACIN DEL EVENTO .............................................................................................................. 30

6. OBJETOS JAVASCRIPT .................................................................................................................. 32

6.1. INTRODUCCIN.............................................................................................................................. 32
6.2. LA CLASE NUMBER() ....................................................................................................................... 33
6.3. EL OBJETO MATH ........................................................................................................................... 34
6.4. LA CLASE DATE .............................................................................................................................. 36
6.5. LA CLASE STRING............................................................................................................................ 39
6.6. LA CLASE ARRAY ............................................................................................................................ 42
6.7. LA CLASE BOOLEAN ........................................................................................................................ 43
6.8. LA CLASE FUNCTION ....................................................................................................................... 43
6.9. LA CLASE REGEXP........................................................................................................................... 43
6.10. EL OBJETO OBJECT ......................................................................................................................... 43

7. NUEVOS OBJETOS ........................................................................................................................ 44

7.1. LA FUNCIN CONSTRUCTOR ............................................................................................................. 44

7.2. DEFINIR PROPIEDADES..................................................................................................................... 44
7.3. INSTANCIAR EL OBJETO .................................................................................................................... 44
7.4. DEFINIR MTODOS ......................................................................................................................... 45
7.5. LA PROPIEDAD PROTOTYPE ............................................................................................................... 45
7.6. PROTOTYPE EN OBJETOS PREDEFINIDOS: PROPIEDADES. ......................................................................... 46
7.7. PROTOTYPE EN OBJETOS PREDEFINIDOS: MTODOS. .............................................................................. 47

8. EXPRESIONES REGULARES ........................................................................................................... 47

8.1. DEFINICIN................................................................................................................................... 47
8.2. CREAR UN OBJETO DE LA CLASE REGEXP ............................................................................................. 48
8.3. COMPROBAR PATRONES .................................................................................................................. 48
8.4. CLASES DE CARACTERES ................................................................................................................... 49
8.5. CUANTIFICADORES ......................................................................................................................... 49
8.6. MODIFICADORES ........................................................................................................................... 49
8.7. MTODOS DE REGEXP. ................................................................................................................... 50
8.8. MTODOS DE STRING PARA REGEXP. ................................................................................................. 50
8.9. PROPIEDADES DE REGEXP ................................................................................................................ 50
8.10. EXPRESIONES REGULARES HABITUALES ............................................................................................... 51

9. COOKIES ...................................................................................................................................... 51

9.1. DEFINICIN................................................................................................................................... 51
9.2. GUARDAR COOKIES......................................................................................................................... 52
9.3. LEER COOKIES ................................................................................................................................ 53
9.4. ALMACENAMIENTO LOCAL EN HTML5 .............................................................................................. 54

-56-