Dossier de ejercicios JavaScript

Ejercicio1
En este ejercicio trabajars con variables numricas, de texto y booleanas. Utilizars los
conocimientos adquiridos en el libro para aplicarlo a ejercicios prcticos. Abre un nuevo
documento en T editor de texto y coloca las etiquetas de apertura y cierre del script dentro
del body y sigue los siguientes pasos.

Como primer paso declara las siguientes 3 variables con sus respectivos valores:

Nombre Valor
primera 20
segunda 40
tercera 15

Una vez declaradas las variables, tendrs que mostrar los siguientes mensajes en pantalla uno
despus del otro:

Ahora debers declarar en el mismo documento a continuacin las siguientes variables:

Nombre Valor
texto1 Esta es una frase para Javascript
texto2 que se mostrara en 2 lneas
si true
no false
Con estas 4 variables debers mostrar las siguientes cajas de dilogo:

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio1.html

Ejercicio 2
En este ejercicio pedirs datos al usuario por medio de la funcin prompt y los mostrars en
un formato de salida especfico. Abre un nuevo documento en T editor de texto y coloca las
etiquetas de apertura y cierre del script dentro del body y sigue los siguientes pasos.

Declara las siguientes variables:

nombre1 nombre2 nombre3

edad1 edad2 edad3

A cada una de ellas le asignars un valor prompt, con los siguientes mensajes:

Introduce el primer nombre!!! Introduce el segundo nombre Introduce el tercer nombre !!!
!!!
Introduce la edad de la primera Introduce la edad de la Introduce la edad de la
persona !!! segunda persona !!! tercera persona !!!

Al haber declarado las variables con su valor prompt, ya ests pidiendo informacin al usuario,
que quedar almacenada en las variables. Si todo funciona correctamente, al abrir la pgina
debers ver el siguiente resultado:
En la segunda parte de este ejercicio debers mostrar la informacin recogida del usuario y
mostrarla con unas caractersticas especiales:
En el primer mensaje debers mostrar el primer nombre, colocar una tabulacin, la edad de la
primera persona y un salto de lnea; luego seguirn la segunda y la tercera persona de la
misma manera para mostrar toda la informacin en un solo cuadro de dilogo. El resultado
deber ser el siguiente:

Y como ltimo paso del ejercicio debers mostrar un cuadro de dilogo en el cual se muestre el
promedio de las edades, ten en cuenta que las variables que contienen las edades provienen
de un prompt y sern tratadas como texto, por lo tanto para poder sumar las variables
correctamente debers convertirlas mediante la funcin parseInt a variables de tipo numrico.
El resultado de esta accin deber ser el siguiente:

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio2.html

Ejercicio 3
En este ejercicio crears un control que te permitir comprobar usuario, contrasea y edad, de
la persona que entre en tu sitio web. Este es solo un ejercicio, y realmente no funcionar de
esta manera en un sitio web porque el javascript es visible para todo el mundo, accediendo al
cdigo fuente de la pgina, realmente para esta funcin se utilizar algn lenguaje de lado
servidor como puede ser PHP o ASP.

Abre un nuevo documento en T editor de texto y coloca las etiquetas script necesarias. A
continuacin declara 3 variables con las siguientes caractersticas:

Nombre Valor Mensaje

nombre prompt Introduce tu nombre:
 contra prompt Introduce tu contrasea:
edad prompt Introduce tu edad:
Antes de empezar debers conocer el trmino anidar, que hace referencia a colocar un
condicional dentro de otro, entonces si se cumple la primera evaluacin, se pasar a evaluar
las que estn dentro de ella. Este ejercicio servir para reforzar los conocimientos de la
sentencia if else.

La primera comprobacin que debers hacer es comparar el usuario que ha introducido por
medio del prompt con el usuario Cipsa. Si esta comprobacin es falsa, debers mostrar un
alert con el mensaje Usuario incorrecto. .

Y si esta comprobacin es verdadera debers anidar un if dentro de este, comparando el valor

introducido mediante el prompt con el valor Barcelona. Si esta comparacin es falsa,
debers mostrar un alert con el mensaje Contrasea incorrecta.. En cambio si es verdadera
debers hacer una ltima comprobacin, que ser la edad del usuario, mayor de 18 aos
debers darle la bienvenida con un alert Bienvenid@ los datos son correctos, mientras que si
es menor el mensaje ser No pueden acceder los menores de 18 aos..

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio3.html

Ejercicio 4
En este ejercicio debers utilizar el condicional switch para simular el funcionamiento de un
cajero automtico. En este cajero bsico el dinero inicial sobre el que trabajar el programa
son 1000. Te permitir ejecutar 3 tipos de consultas que son: Ingreso de dinero, retiro de
dinero y ver el saldo actual.

Abre un nuevo documento de T editor de texto y crea las etiquetas necesarias para que
funcione el JavaScript. Debers declarar las siguientes variables con los valores
correspondientes.

Nombre Valor Mensaje

dineroInicial 1000 ---
opcion prompt Que desea hacer: 1)Retirar
dinero 2)Ingresar dinero
3)Consultar
numero Convertir el valor obtenido ---
del prompt a valor numrico

Al ejecutar la pgina el prompt preguntar al usuario que desea hacer, y se le plantearn las 3
opciones. Para seguir adelante con el ejercicio debers plantear una estructura switch con 3
posibles casos y un default (por defecto). El switch se regir por la variable nmero, que es el
valor que el usuario ingresa por medio del prompt y ya est convertido a tipo numrico.

En el caso que el usuario teclee la opcin 1 debers preguntar al usuario Cuanto dinero desea
retirar?, por medio de un prompt y guardar este valor en una variable llamada cantidad. A
continuacin declarars una variable llamada total que ser igual a el dineroInicial cantidad,
y mostrars un alert de Su saldo actual es: y el dinero que actualmente tenga la cuenta.

En el caso que el usuario teclee la opcin 2 ser necesario que repitas la misma operacin
anterior, pero mostrando en el prompt en mensaje Cuanto dinero desea ingresar? y sumar
cantidad y dineroInicial en vez de restarlos.

La tercera opcin posible simplemente mostrar el saldo de esta cuenta que siempre ser
1000, porque realmente cada vez que reinicies la pgina tendr ese valor.

Y si tecleas cualquier otra opcin debers mostrar un mensaje que diga Esa opcin no existe
!!!.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio4.html

Ejercicio 5
En este ejercicio crears un pequeo programa que gestionar la vuelta que debe dar un
cajero al cliente dado un importe ingresado por prompt y el dinero que el cliente entrega
tambin ingresado por otro prompt. Debers utilizar la sentencia de control de bucle while y la
sentencia de control if, else if , else.

Primero que nada debers declarar las siguientes variables con sus respectivos valores y en el
orden que aparecen.

Nombre Valor Mensaje

importeTexto prompt Cual es el importe de su
compra?
dineroTexto prompt Con cuanto dinero paga?
importe Converin numrica del valor importeTexto ---
dinero Converin numrica del valor ---
importeDinero
diferencia dinero - importe ---
bill50 0 ---
bill20 0 ---
bill10 0 ---
bill5 0 ---
Resto 0 ---

A continuacin de la declaracin de variables debers declarar un bucle while que se repita

mientras la variable diferencia sea mayor que cero. Es muy importante que no ejecutes ahora
la pgina ya que si lo hicieras entrara en un bucle infinito, colgando la pgina. Ahora anidars
dentro de la estructura while un if, que compare si la diferencia es mayor o igual a 50, reste 50
a la diferencia e incremente en un valor la variable bill50 (que va a contener la cantidad de
billetes de 50 necesarios). Si esta comprobacin no es verdadera, y por medio de algunos else
if, debers comprobar lo mismo para los billetes de 20, 10 y 5. Y al final de toda esta estructura
en el else, dars el valor de diferencia a la variable resto, que se encargar de controlar si la
vuelta es menor que un billete de 5 y dars a la variable diferencia un valor 0 que ser el
encargado de salir del bucle.

Si ejecutas ahora la pgina vers que despus de mostrar los dos prompt, no hace nada ms,
porque realmente no hay ningn alert que muestre informacin. Por lo tanto debers crear un
alert que muestre la informacin de la siguiente manera:

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio5.html

Ejercicio 6
Este ejercicio est diseado para que utilices la sentencia de control de bucles for. En el
debers crear una aplicacin que muestre en un alert la tabla de multiplicar que el usuario
quiera. Comenzars abriendo T editor de texto, creando un nuevo documento y colocando las
etiquetas necesarias para empezar a trabaja con Javascript.

Para realizar este ejercicio necesitars las siguientes variables con sus respectivos valores:

Nombre Valor Mensaje

num prompt Que tabla quieres ver?
numConvertido Convertir a valor numrico la variable num ---
resultado Inicializado pero vaco

Ahora debers crear un bucle for que comience de la variable x que tenga el valor 0, mientras
sea menor o igual, se vaya incrementando x de uno en uno. Y dentro del bucle crears una
cadena de texto que se vaya concatenando a la variable resultado y tenga mas o menos el
formato 1 x 1 = 1.

Como ltimo paso y fuera del bucle, debers colocar un alert que muestre el contenido de la
variable resultado, que deber ser similar a este:
La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio6.html

Ejercicio 7
Antes de empezar con el ejercicio tienes que tener algunos conceptos muy claros, funcin:
trozo de cdigo que se ejecutar cuando t quieras o cuando el programa lo requiera,
permitiendo realizar ese trozo de cdigo tantas veces como sea necesario; parmetro: variable
local de la funcin que es enviada desde la lnea de llamada de la funcin; devolucin o return:
es el valor que devuelve la funcin generalmente a la variable que la ejecuta. En este ejemplo
se puede entender mejor el funcionamiento:

En este ejemplo se muestra el comportamiento de los elementos de una funcin, el

parametro1 y el parametro2 cogen sus valores de la llamada de la funcin, estos dos
parmetros se suman guardando sus valor en la variable suma y se devuelven mediante la
palabra reservada return a la variable resultado, en este ejemplo resultado valdra 6.
Ahora que estn claros estos conceptos, debers abrir un nuevo documento de T editor de
texto y colocar las etiquetas necesarias para inicial el script. A continuacin debes crear cuatro
funciones con las siguientes caractersticas:

Nombre Parmetros return

sumar numero1, numero2 total
restar numero1, numero2 total
multiplicar numero1, numero2 total
dividir numero1, numero2 total

Ahora que ya tienes las funciones creadas, llamars a cada una de ellas dentro de un alert y
sumars los valores devueltos. En cada llamada a cada funcin debers enviar estos
parmetros:

Funcin Parmetro 1 Parmetro 2

sumar 2 2
restar 3 1
multiplicar 2 2
dividir 12 2

Si has realizado todo correctamente el resultado que debe aparecer en el alert es 16.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio7.html

Ejercicio 8
En este ejercicio trabajars con matrices y funciones, el ejercicio consiste en tener 2 matrices,
una de usuarios y otra de contraseas; y comprobar si los datos introducidos por el usuario
existen o no.

Para este fin debers crear 2 matrices:

Nombre de la matriz usuarios Nombre de la matriz contras

Valor 1 Antonio Valor 1 1234
Valor2 Juan Valor 2 4321
Valor 3 Jorge Valor 3 5678
Valor 4 Javier Valor 4 8765

A continuacin debers declarar 4 variables con los siguientes valores:

Nombre Valor Mensaje

usuario prompt Nombre de usuario:
contra prompt Cul es su contrasea?
valor1 vacia ---
valor2 vacia ---
Ahora debers crear 2 funciones muy parecidas, que solamente se diferenciarn en que cada
una leer una matriz diferente. Cada funcin debe recorrer o leer cada uno de los valores de su
matriz por medio de una sentencia de control de bucle for con un if anidado que comprobar
si el valor existe en el ndice de la matriz al que est apuntando el bucle. Las funciones debers
llamarlas compUsuario y compContras.

Tendrs que ir paso a paso, primero empezars por el for que deber recorrer la matriz desde
el ndice 0 hasta el final (length). Luego colocars dentro el if que compare el valor que est
mirando el for en ese momento (usuario[x], por ejemplo) con el valor que introdujo el usuario
por medio del prompt. Si esta comparacin es verdadera, es decir si se encuentra el usuario o
la contrasea debers devolver por medio del return el valor del ndice encontrado, en este
caso x. Si el for recorre toda la matriz y no encuentra coincidencias devolver false, es decir
despus del for ubicars un return false.

Una vez tengas las dos funciones declaradas, debers utilizar las dos variables que tienes
definidas, pero vacas para coger el valor de los returns. La variable valor1 coger el return de
compUsuario y valor2 el de compContras.

Ahora que ya tienes los valores falta solamente comparar estos valores con un if de dos
comparaciones unidas por un y(&&) . La expresin debe comparar si los dos valores son
iguales y si valor2 es totalmente diferente (!==) a false. Si las dos comparaciones se cumplen
debes dar la bienvenida al usuario, y si alguna de ellas no se cumple debers informarle que los
datos son incorrectos.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio8.html

Ejercicio 9
En este ejercicio utilizars una matriz multidimensional, que te permitir guardar valores
referentes a libros (Titulo, editorial y autor). Pero antes de comenzar sera bueno que tuvieras
claros los conceptos. Mientras una matriz de una dimensin se representara con una tabla de
una sola columna, una matriz bidimensional se representara con una tabla de ms de una
columna y una de tres dimensiones se representara con ms de una tabla que contengan ms
de una columna cada una de ellas.
Con este grfico entenders ms la definicin de matrices. En programacin para acceder al
primer valor de la matriz utilizaras matriz[0], siendo matriz el nombre de la matriz. En cambio
para acceder al Valor 2-2 de la matriz bidimensional deberas utilizar la siguiente sentencia
matriz[1][1], recuerda que el primer ndice de la matriz siempre es 0. Y para acceder a una
multidimensional utilizars la siguiente sentencia matriz[tabla][columna][fila] donde tabla es el
identificador de la tabla (siempre 0 es la primera) y columna y fila como lo has visto en el
ejemplo de bidimensional.

Ahora que las matrices estn ms claras debers declarar una matriz bidimensional que guarde
los datos de los libros. Declara tres matrices por separado con los nombres, libro1, libro2 y
libro3. Cada una de ellas con el siguiente contenido:

libro1 libro2 libro3

Javascript PHP HTML
RA-MA Inforbooks Anaya
Lopez Perez Fernandez

Y luego una nueva matriz que contenga estas 3, llamada libros, ahora ya tienes la matriz
bidimensional. Para acceder a los datos de la matriz utilizars 2 bucles for anidados, cada uno
de ellos se encargar de recorrer cada una de las dimensiones existentes.

El primero de ellos recorrer desde el ndice 0 que llamars x hasta el mximo (length),
mientras el for interno recorrer desde el ndice 0 que llamars y, hasta la longitud mxima de
libros*x+. Dentro del for interno debers imprimir los datos que vaya leyendo mediante la
funcin document.write. Y dentro del for externo y despus de ejecutar el interno debers
colocar un salto de lnea (<br/>) tambin mediante la funcin document.write.

Al ejecutar este cdigo tendrs listados los libros separados por un espacio entre cada uno de
ellos.
La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio9.html

Ejercicio 10
Este ejercicio trata sobre todo de encadenar funciones, y tratar tambin el tema mbito de
variables. Para entender ms sobre el tema mbito de variables debes saber que
bsicamente hay dos mbitos, pblico o privado. Se entender por variable pblica, todas
aquellas variables que estn fuera de las funciones, y se podrn utilizar tanto dentro como
fuera de las funciones. En cambio las variables privadas solo las podrs utilizar dentro de las
funciones, en el caso de intentar utilizar una variable privada desde fuera de la funcin donde
est definida crear un error de funcionamiento en la aplicacin. Los parmetros que define
una funcin tambin son considerados como variables privadas, por lo tanto para enviar
valores de una funcin a otra se utilizarn los parmetros. Una recomendacin es declarar
todas las variables pblicas al principio del script que desarrolles, para que no haya
confusiones y dobles declaraciones que te pueden llevar a acciones inesperadas.

Crea un nuevo documento HTML en T editor de texto, escribe las etiquetas necesarias para
realizar el script y sigue los siguientes pasos.

El ejercicio consiste en que el usuario pueda introducir su nombre por medio de un prompt y
que por medio de 3 funciones que concatenarn ms texto se muestre un saludo de
bienvenida a la persona. Para realizar el ejercicio solo necesitars una variable pblica llamada
nombre que coger el valor de un prompt con el texto Introduce tu nombre:.

Debers crear tres funciones con los nombres primera, segunda y tercera. La primera ser una
funcin que no requiere parmetros, pero debers definir dentro de ella una variable llamada
texto que tenga el valor Hola . Despus de definir esta variable debers concatenar el texto
de esa variable con el nombre introducido en el prompt; a partir de ahora el valor que
contiene la variable es Hola nombre introducido. Este valor se lo enviars como parmetro a
la funcin llamada segunda.

Lgicamente si la primera funcin ejecuta a la segunda y le enva un parmetro la funcin debe

estar preparada para recibir este parmetro, por lo que debes modificar esta segunda funcin
aadindole un parmetro llamado parametro. Ahora en la segunda funcin debes crear
una variable llamada texto con el valor , que, y concatenars el parmetro con esta variable
para formar la cadena Hola nombre introducido, que. El siguiente paso es enviar este valor a
la tercera funcin por medio de un parmetro.

Debers modificar la tercera funcin para recibir este parmetro con el nombre final y
declarars una variable llamada texto con el valor tal??. Ahora tienes que concatenar el
parmetro creado con la variable para lograr tener la cadena Hola nombre introducido, que
tal?. Una vez tengas todo esto debers crear un alert que muestre todo el contenido de la
variable, este alert debe estar dentro de la funcin tercera.

Si guardas el documento y lo ejecutas vers que no funciona, y es por una sencilla razn, has
creado toda una estructura de funciones que se llaman unas a otras, pero no has ejecutado la
desencadenante, es decir la primera. Si ejecutas la funcin llamada primera debers ver un
mensaje como este:

En este ejercicio, si lo ves detenidamente tienes tres variables llamadas texto, al ser privadas
de cada funcin esto es posible, si por cualquier motivo intentaras crear tres variables
llamadas texto en el mbito pblico, la que funcionara sera la ltima declarada sobre
escribiendo las anteriores.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio10.html

Ejercicio 11
En este ejercicio trabajaras con cadenas de texto, debers extraer algunos datos de la cadena
de texto y mostrarlos tal y como se plantea. Antes de empezar debes conocer una manera muy
til de crear nuevas etiquetas HTML en el documento actual. De momento se colocarn al final
del documento, pero ms adelante podrs colocar estas etiquetas donde realmente te haga
falta. Con la funcin document.write(), puedes escribir mensajes directamente en el
navegador, solamente con colocar este texto entre comillas y dentro de los parntesis. Pero y
que pasara si tu colocaras al principio de la cadena de texto la etiqueta <p> y al final </p>,
estars creando un nuevo prrafo de contenido en la pgina actual. En este ejercicio debers
realizar este proceso con cada uno de los mensajes que muestres, para que realmente sean
etiquetas lo que crees y no simplemente texto suelto. De esta misma manera podrs dar
estilo en lnea con el atributo style de HTML. Por lo tanto para crear un nuevo prrafo de color
rojo escribirs la siguiente sentencia:

document.write(<p style=color:red;> + Este es el texto rojo +</p>);

Crea un nuevo documento HTML en T editor de texto y escribe las etiquetas necesarias para el
funcionamiento de Javascript. Trabajars sobre una variable de texto que contenga el valor En
un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que viva
un hidalgo de los de lanza en astillero, adarga antigua, rocn flaco y galgo corredor. .

Ahora debers mostrar los siguientes datos de la cadena:

1) Cuantos caracteres tiene la cadena con el formato: El texto tiene x letras .

2) Cuantas letras a contiene la frase con el formato: La variable contiene x letras a, aqu
es muy probable que necesites utilizar un bucle for o while.
 3) Mostrar en diferentes prrafos los diferentes trozos separados por comas de color
verde. Aqu tambin debers crear un bulce.
4) Mostrar en que posicin se encuentra la palabra hidalgo, con el formato: La palabra
hidalgo esta en la posicin: x.
5) Mostrar la frase en letras maysculas.
6) Mostrar la frase en letras minsculas.
7) Crear un enlace con el texto Cipsa que tenga como href http://www.cipsa.net.

La salida en el navegador debe parecerse a la siguiente:

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio11.html

Ejercicio 12
Este ejercicio se basa en elementos numricos, debers pedir al usuario que introduzca dos
nmeros mediante dos prompt y trabajars sobre ellos. En programacin nunca debes pre-
suponer nada, por lo tanto debes controlar el ingreso de datos del usuario e informarle si se ha
equivocado, por ejemplo en este caso es posible que el usuario introduzca textos en vez de
nmeros, si no controlas esta posibilidad es muy probable que la pgina deje de funcionar
inesperadamente.

Por lo tanto crea dos variables llamadas num1 y num2 que pidan al usuario que introduzca
nmeros. Una vez tengas los dos valores controlars por medio de la funcin isNaN si los
valores son numricos o no. Si no lo son muestra un alert con el siguiente mensaje : Los
valores introducidos deben ser nmeros.

Si los dos valores son numricos debers mostrar la siguiente informacin:

1) El mayor de los dos con el formato El nmero mayor es: x.

2) El menor de los dos con el formato El nmero menor es: x.
 3) Smale a las variables 0.5 y 0.7 respectivamente y muestra los valores con el formato:
Los nuevos valores de las variables son: x y.
4) Ahora debes redondearlos hacia arriba y mostrarlos con el formato: Los valores
redondeados de las variables son: x y.
5) Como ltimo paso debes sumar estas dos variables a un nmero aleatorio
comprendido entre 1 y 100.

Si has realizado todo correctamente debers ver una pgina bastante parecida a esta:

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio12.html

Ejercicio 13
En este ejercicio debers mostrar la fecha actual con el formato Lunes, 1 de enero de 1900.

Para ello lo primero que debes hacer es crear 2 matrices, la primera que contenga los primero
7 das de la semana el segundo los 12 meses del ao. Abre un nuevo documento HTML en T
editor de texto y escribe las etiquetas necesarias, luego declara estas 2 matrices llamadas das
y meses respectivamente.

Despus declara 5 variables con el siguiente contenido:

Nombre Valor
fecha Un nuevo objeto date con la fecha completa actual
nomDia El nombre del da actual basado en la matriz
numDia El nmero del da actual
mes El nombre del mes actual basado en la matriz
anio El ao actual

Una vez tengas toda esta informacin mostrars la fecha en el documento actual con el
formato estipulado.
La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio13.html

Ejercicio 14
En este ejercicio utilizars el objeto window para abrir ventanas de diferente tamao, y con
diferentes pginas de destino. Utilizaras el evento onclick dentro de los diferentes elementos
HTML, para dirigir el programa de la manera que necesites.

Abre un nuevo documento HTML en T editor de texto y crea las etiquetas necesarias para que
funcione el script. Dentro del script solamente debers tener una funcin llamada
abrirVentana, la cual pedir 3 parmetros al usuario: opcin, alto y ancho. Dentro de la funcin
declara la variable enlace e inciala como vaca.

Ahora y todava dentro de la funcin declara una sentencia de control switch, en la cual como
argumento coja la variable opcion. Este switch debe contemplar 4 casos, el 0, 1, 2 y 3.

En cada caso debers definir la variable enlace de una manera diferente y hacer la llamada a la
funcin window.open() pasndole como parmetro el enlace, y las medidas de ancho y alto
que debe utilizar la ventana. Las referencias de enlaces que debe coger cada caso son:

Caso Href
0 http://www.cipsa.net/
1 http://www.google.es/
2 http://www.yahoo.es/
3 http://www.bing.es/

Ahora en el html debers crear 4 etiquetas button cada una con un texto diferente; Cipsa,
Google, Yahoo y Bing respectivamente, y cada etiqueta deber tener una llamada al evento
onclick llamando a la misma funcin abrirVentana.

Los parmetros que debes enviar en cada funcin son los siguientes:

Nombre del Botn Primer param. Segundo para. Tercer param.

Cipsa 0 300 300
Google 1 400 400
Yahoo 2 500 500
Bing 3 200 200

Si ejecutas la pgina en cualquier navegador, cuando hagas click sobre cualquiera de los
botones, cada uno de ellos abrir una ventana de diferente tamao y abrir otra pgina
diferente.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio14.html

Ejercicio 15
Antes de comenzar el ejercicio tienes que aprender una tcnica de creacin de elementos, con
esta tcnica podrs crear y agregar nuevas etiquetas HTML al documento sin borrar lo
existente. Hasta ahora habas visto la funcin document.write() que funciona muy bien en
determinados casos, pero tiene la desventaja de borrar el contenido de la pgina para
imprimir lo que se le enve como parmetro. En cambio con la creacin de elementos
dinmica podrs crear elemento y agregarlos al cdigo existente sin eliminar nada necesario.

Esta tcnica consiste en 3 pasos:

1) Crear la etiqueta
2) Dar estilos y propiedades
3) Agregarla al documento.

Para crear la etiqueta se utiliza la funcin document.createElement(span); que crear en

memoria el nuevo elemento, en este caso una etiqueta span. Esta sentencia se debe asignar
siempre a una variable para poder acceder a sus propiedades.

Si el elemento span anterior estuviera asignado a una variable x para dar estilos o propiedades
al elemento debers primero referenciar el elemento y luego darle las propiedades que
necesites, por ejemplo x.innerHTML = Hola; asignar el texto Hola a la span creada
anteriormente.

Una vez tengas creado el elemento y le hayas asignado todas las propiedades que necesites,
debers agregarlo al documento por medio de la funcin appenChild.

En el siguiente ejemplo se crea un prrafo nuevo y se le asigna un color rojo y un texto.

var nuevo = document.createElement(p);

nuevo.innerHTML = Hola que tal??;
nuevo.style.color = red;
document.body.appendChild(nuevo);

De esta manera has creado un nuevo prrafo le has asignado el texto Hola que tal??, le has
asignado el color rojo y lo has agregado al body del documento.

Con este ejemplo, que se explica ms a fondo en otro captulo del libro, y los intervalos de
tiempo vistos en este captulo hars una primera animacin sencilla.

Abre un nuevo documento HTML con T editor de texto y coloca las etiquetas script
necesarias.

Declara 3 variables llamadas textos, tiempo y contador con los valores JAVASCRIPT CIPSA,
null y 0 respectivamente. Y luego crea una matriz que contenga 10 colores hexadecimales.

Crea tres funciones llamadas empieza, parar y ejecuta, que sern las encargadas de hacer
funcionar la animacin.

La funcin empieza ser la encargada de inicializar la variable tiempo, con un temporizador de

intervalo que ejecute la funcin ejecuta cada medio segundo.

La funcin parar se encargar solamente de detener el temporizador.

Realmente la funcin ms importante es ejecuta, ya que contiene la funcionalidad bsica de
la animacin. Como primer paso dentro de esta funcin debers crear una sentencia de
control if que compruebe si la variable contador es menor que la longitud de la variable
textos, si la comprobacin es falsa debes ejecutar la funcin parar. Y si la comprobacin es
verdadera debers declarar una nueva variable dentro del if llamada aleatorio, que genere un
nmero del 1 al 10. Despus de este paso debers crear un nuevo elemento span en el
documento, con las siguientes caractersticas:

Nombre de
Valor Explicacin
propiedad
El texto que debe contener es el carcter que
innerHTML +=textos.charAt(contador)
se encuentra en la posicin contador.
Coge un color de la matriz de colores
style.color colores[aleatorio]
asignndole un color aleatorio a cada carcter
style.fontSize "30pt" Define el tamao de la fuente en 30 puntos

Y como ltimos pasos debes agregar el nuevo elemento creado al body del documento e
incrementar la variable contador en una unidad.

Ahora directamente en el HTML crea dos elementos button con los textos Start y Stop, y
asgnales las funciones empieza y parar respectivamente al evento onclick de cada uno
de ellos.

Si todo ha funcionado correctamente, cuando ejecutes la pgina y hagas click sobre el botn
start, vers la animacin creada.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio15.html

Ejercicio 16
En este ejercicio cambiars los estilos de los textos que contiene una div, por medio de listas
desplegables. Podrs cambiar el tipo de fuente, el tamao y el color de todos los prrafos
contenidos por la div.

Con T editor de texto, abre el archivo Cambiar estilo de textos.html que encontrars dentro
de la carpeta de Ejercicios del Dossier, porque debers hacer algunas modificaciones en el
archivo para que funcione correctamente.

Primero que nada dentro del head del documento coloca las etiquetas script necesarias. Y crea
una funcin llamada cambia que ser la encargada de hacer todos los cambios en el
documento. Si lees atentamente el documento HTML podrs ver que existe un formulario con
3 elemento select dentro. Cada uno de estos select tiene un ID asignado, por el cual debers
coger el elemento. En los dos primeros select debers coger sus valores innerHTML ya que
contienen la informacin que necesitas y concuerda con la que quieres mostrar, pero en el
tercer select no debers coger el innerHTML, sino que el value, ya que los valores que deseas
ensear en la pgina no son los mismos que quieres utilizar internamente en el programa.
Por lo tanto crea tres variables llamadas familia, tam y col, que sern las encargadas de
guardar el texto seleccionado de las opciones y asgnales los valores de los elementos
seleccionados del documento.

Como segundo paso debers utilizar cada uno de estos valores para cambiar la propiedad que
corresponda, es decir, el tipo de fuente, el tamao y el color. Una vez hecho esto ya tienes la
funcin lista, solo debes agregar en el botn del formulario la funcin onclick para que ejecute
la funcin que has creado.

Si pruebas el ejercicio vers que con unos simples cambios podrs formatear el documento,
para que tome diferentes aspectos.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio16.html

Ejercicio 17
En este ejercicio crears un zoom sobre imgenes, es decir que cuando pases el ratn por
encima, la foto se ampliar. Este efecto es muy comn hoy en da en muchos sitios web, y
realmente es muy fcil de desarrollar.

Antes de comenzar y para que entiendas correctamente el funcionamiento del ejercicio debes
entender el funcionamiento de la palabra reservada this. Como ya has visto en los ejercicios
anteriores y en el libro los objetos, desde el punto de vista de programacin, son elementos
que tienen propiedades y funciones. Las propiedades definen los valores que el objeto
guardar, mientras que las funciones dirn como se debe comportar el objeto. Por ejemplo
innerHTML es una propiedad ya que se encarga de guardar la informacin de texto que
contiene la etiqueta HTML, en cambio onclick controla una accin o evento, por lo tanto est
ligado al funcionamiento del elemento, por lo tanto es una funcin de elemento. La palabra
this representa el objeto actual o el que est ejecutando la funcin, a veces es un poco
complicado el utilizarlo correctamente, pero con un poco ms de experiencia lo dominars
perfectamente. This te permitir crear funciones que traten a muchos elementos de la
misma manera sin necesidad de crear una funcin independiente para cada elemento.

Abre la plantilla llamada Ejercicio17Inicial.html y declara las etiquetas necesarias para poder
aadir script en la pgina. Ahora crea dos funciones llamadas zoom y normal, ambas deben
requerir un parmetro llamado obj.

En la funcin zoom, debes asignar al parmetro obj, que lgicamente recibir un objeto,
los siguientes estilos:

Propiedad Valor
Width 300px
Height 300px
Top -30px
Left -30px

Y en la funcin normal, debes volver a dejar los valores iniciales de las fotografas, es decir:

Propiedad Valor
Width 200px
Height 200px
Top 20px
Left 20px

Una vez que tengas las dos funciones creadas, vers que no hacen referencia directa a ningn
elemento del HTML, ests funciones son totalmente genricas, es decir que las puedes utilizar
con cualquier objeto HTML. Ahora debes crear los eventos en las etiquetas HTML, dos por cada
imagen, el onmouseover, que llamar a la funcin zoom envindole como parmetro this,
es decir, el objeto de esta imagen, y onmouseout llamar a la funcin normal envindole
como parmetro tambin la palabra reservada this.
Si todo ha funcionado correctamente al ejecutar la pgina y pasar el ratn por encima de las
imgenes estas ejecutarn un efecto de zoom. Normalmente al hacer esta accin deberan
moverse el resto de las imgenes, pero las propiedades position: absolute y relative
previamente creadas en la plantilla del documento solucionan este problema.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio17.html

Ejercicio 18
En este ejercicio recogers los datos introducidos en un formulario y los mostrars en pantalla
generando una nueva etiqueta h2. Abre con T editor de texto el documento
plantillaEjecicio18.html y crea las etiquetas necesarias para colocar un Javascript.

El primer paso que debes llevar a cabo cuando recibas un documento de estas caractersticas
es controlar si los nombres e id de los elementos html estn bien asignados y que no haya
conflictos entre ellos, en este caso no los hay.

Entonces como siguiente paso crea una funcin que se ejecute al clickar sobre el botn
Probar, llamada muestra y asgnale esa funcin a dicho botn.

Ahora debes crear 5 variables llamadas: nom, ape, con, sistema y gustos. Las primeras tres no
tienen grandes secretos, se deben inicializar con los valores que recoja de las 3 cajas de texto.
Pero en el caso de gustos y sistema las cosas cambian un poco. En el caso de la variable gustos,
aunque hay varias maneras de coger los valores de los elementos seleccionados, es
recomendable que ejecutes una sentencia if para cada uno de ellos y vayas concatenando
los valores. Y en el caso de sistema, es recomendable crear un for que seleccione el valor del
elemento seleccionado.

Una vez que hayas recogido todos los valores y todas las variables estn llenas, debes crear
dinmicamente una etiqueta h2 y concatenar todos los valores recogidos del formulario.
Una vez hecho esto agrega esta nueva etiqueta al body del documento.

Si no hay errores de cdigo, al pulsar el botn Probar, deber recoger todos los valores del
formulario y mostrarlos en pantalla.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio18.html

Ejercicio 19
En este ejercicio debers controlar 3 aspectos fundamentales de la programacin de pginas
web dinmicas, el cambio de los contenidos de texto, el cambio de tamao de imgenes, y el
control de eventos del usuario.

Abre el documento plantillaEjercicio19.html y vers que el documento consta de 2 botones,

una imagen , un campo del tipo select y 5 prrafos vacos. Los 2 botones se encargarn de
cargar los textos en los prrafos correspondientes, la imagen cambiar al pasar el ratn por
encima, y por medio del select, podrs cambiar el tamao de la imagen de manera
permanente. Para esto sigue los siguientes pasos:

1) Crea 5 variables sin inicializar con los nombres idioma, imagen, campoSelect, titulo y
prrafos.
2) Define 7 funciones con los nombres eng,esp, cargaVariables, carga, cambia, rest y
tamano

Ahora debers vincular las funciones con los eventos html que la ejecutarn. Debers
vincularlos de la siguiente manera:

Elemento Evento Funcin

body Onload cargaVariables
Botn castellano Onclick esp
Botn ingls Conclick eng
Imagen Onmouseover cambia
Imagen Onmouseout rest
ampo select onchange tamano

La funcin cargaVariables se encargar de inicializar todas las variables pblicas del programa,
con los siguientes valores:

Variable Valor
imagen Seleccionar el elemento por id imagen
campoSelect Seleccionar el elemento por id opciones
titulo Seleccionar el elemento por id titulo
parrafos Seleccionar los elementos por nombre de etiqueta p

Las funciones esp y eng se encargarn de inicializar la variable idioma como una matriz que
contenga la informacin de los prrafos y el ttulo. Para ello debers darle los siguientes
valores:

Espaol
Indice de la matriz Valor
0 Espaol
1 Aprendiendo Javascript
2 En ejercicios prcticos
3 Orientado a objetos
4 Fciles de resolver
5 Y divertidos
Ingls
Indice de la matriz Valor
0 Ingls
1 Learn Javascript
2 With excercises
3 object oriented
4 easy to resolve
5 and makes fun

Y despus de definir la matriz en cada caso realizarn una llamada a la funcin carga.

La funcin carga simplemente dar los valores a los elementos de texto de la pgina, tal y
como est organizada la matriz el ndice 0 es el h1 de la pgina, por lo tanto la propiedad
innerHTML del objeto titulo deber coger este valor. En cuanto a los prrafos, debes utilizar un
for que parta desde el ndice 1 hasta la cantidad mxima de elementos (length) y recorra los
elementos asignndoles sus valores.
En las funciones cambia y rest debers cambiar la propiedad src de la imagen, la funcin
cambia establecer como src el archivo Ejercicio17_2.jpg , mientras que la funcin rest
restablecer la imagen a su src original, es decir Ejercicio17_1.jpg.

Y por ltimo la funcin tamano se encargar de cambiar el tamao de la imagen cuando

selecciones algunas de las medidas contenidas en el campo select. Para ello dentro de la
funcin debers crear dos variables llamadas seleccin y valor, que contengan el ndice del
elemento seleccionado y el valor recogido del campo seleccionado respectivamente. Y luego
como ltimo paso debers asignar este valor recogido a la propiedad width de la imagen.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio19.html

Ejercicio 20
En este ejercicio debers cambiar las propiedades css de los elemento para crear una div con
pestaas que cambie su contenido dependiendo de la pestaa donde el usuario haga click.

Para ello abre el documento plantillaEjercicio20.html, y ejectalo en el navegador, vers que

la estructura ya est creada en html y css, y que por defecto ya se visualiza la primera pestaa.
Es muy importante que analices el cdigo css, ya que puede ser bastante complicado entender
el funcionamiento de este ejercicio si no entiendes el css correctamente.

Una vez comprendido el css crea las etiquetas necesarias para incrustar un script en la pgina y
crea una funcin llamada cambiarContenido que reciba un parmetro llamado pest.

Dentro de la funcin declara la variable pestanas que coja todos los elementos del tipo li de
la pgina, es decir todas las pestaas. Y luego crea una matriz llamada cont de 3 elementos y
que cada uno de ellos recoja los elementos con ID contenidoUno, contenidoDos y
contenidoTres.

Esta funcin deber ejecutarse cada vez que el usuario haga click sobre cada una de las
pestaas, por lo tanto la funcin cambiar todas las pestaas a su posicin inicial es decir top:
0px y luego cambiar la clickada a top:3px. Tambin deber ocultar los contenidos creados, y
mostrar solamente el correspondiente a la pestaa que se ha clickado.

Para ello utilizars un for que recorra los tres elementos y cambie estas propiedades. Y lo
siguiente que debes hacer es colocar el siguiente cdigo dentro de la funcin pero despus del
for:

pestanas[pest].style.top= "3px";
cont[pest].style.display = "block";

Como puedes ver este cdigo se encargar de cambiar el estilo del top y la propiedad display,
para que se visualicen las pestaas correctamente, utilizando el parmetro pest. Este
parmetro lo debers enviar desde el evento onclick de cada una de las pestaas de la
siguiente manera:
Pestaa Funcin con parmetro
Mostrar Primero cambiarContenido(0);
Mostrar Segundo cambiarContenido(1)
Mostrar Tercero cambiarContenido(2)

Si ejecutas la pgina web con las modificaciones, vers que al hacer click sobre cada una de las
pestaas estas cambiarn el contenido y tambin la manera de visualizarse.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio20.html

Ejercicio 21
En este ejercicio implementars el uso de Cookies para facilitar al usuario el uso de la pgina
web. Si utilizas nuevamente el ejercicio anterior podrs ver que las pestaas funcionan
correctamente, pero cuando recargas la pgina, siempre es la primera pestaa la que est
seleccionada.

Segn el tipo de pgina que disees, a veces te interesar recordar que ha hecho el usuario,
justamente para eso se utilizan las cookies. Abre el ejercicio anterior, y agrega dos funciones
llamadas grabaCookie y leeCookie, la funcin grabaCookie deber utilizar un parmetro
llamado pestan.

La funcin grabaCookie se ejecutar cada vez que clickes sobre una pestaa, es decir que la
llamada a la funcin se ejecutar al final de la funcin cambiarContenido(creada en el ejercicio
anterior), y coger como parmetro la variable pest de dicha funcin. Esa variable es la
encargada de identificar cada pestaa, por lo tanto ser la variable que debers guardar en a
cookie.

Dentro de la funcin grabaCookie, solamente debers ejecutar el grabado con el nombre

pestana y el valor deber ser el de la pestaa seleccionada. Por lo tanto debers colocar el
siguiente cdigo dentro de la funcin:

document.cookie = "pestana=" + pestan;

En cuanto a la funcin leeCookie, debers ejecutarla al finalizar de cargar la pgina, por lo

tanto deber colocarla en el evento onload de la etiqueta body. Lo primero que debes
comprobar es si realmente existe la cookie, esto lo puedes realizar por medio de un
condicional if, esta accin debers realizarla siempre, ya que la primera vez que visites la
pgina no existir la cookie, por lo tanto es posible que se cuelgue la pgina al no poder
leerla.

Dentro del condicional if debers crear 2 variables una llamada galleta que debers asignarle el
valor de la lectura de la cookie, y otra llamada valores, que tendr el valor de la cookie
recuperada en la variable anterior dividida por el smbolo =. La variable valores ser una
matriz que coger en su ndice 0 el nombre de la variable y en su ndice 1 el valor. Por lo tanto
despus de crear e inicializar estas variables escribirs el siguiente cdigo dentro de la funcin:
 cambiarContenido(valores[1]);

Esta sentencia ejecutar la funcin encargada de cambiar la pestaa, al ejecutarse despus de

cargar el body, cargar mgicamente la ltima pestaa visitada por el usuario.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio21.html

Ejercicio 22
En este ejercicio utilizars AJAX para recuperar informacin de un archivo XML, y as actualizar
dinmicamente un men desplegable de un formulario. Abre el documento llamado
plantillaEjercicio22 y agrega las etiquetas necesarias para ejecutar un script.

Para ello debers crear 3 variables llamadas consulta, seleccionada, ciudad sin inicializar, ya
que los valores los cogern dentro de una funcin.

Y tambin debes crear 3 funciones llamadas cargaCiudades, cargarXML, borrarContenido .

Dentro de la funcin cargaCiudades colocars el siguiente cdigo, que ser el encargado de

realizar la llamada asncrona al archivo:

var pais = document.getElementById("paises");

ciudad = document.getElementById("ciudades");
seleccionada = pais.selectedIndex;

try{

if(document.ActiveXObject){
consulta = new ActiveXObject(Msxml2.XMLHTTP);
}else{
consulta = new XMLHttpRequest();
}
consulta.onreadystatechange = cargarXML;
consulta.open("POST", "ciudades.xml", true);
consulta.send(null);
}catch(error){
alert(error.description)
}
En esta funcin inicializars las variables ciudad y pas, que cogers los valores de los campos
desplegables llamados pases y ciudades. Luego dentro de la estructura try, catch comprobars
si el navegador es internet explorer o los dems, inicializando el objeto consulta. Cada vez que
cambie el estado de la consulta, llamar a la funcin cargarXML, asignndosela como evento.
Luego abrirs la consulta, con los parmetros POST, el nombre del archivo y true, para decir
que la carga debe ser asncrona. Y por ltimo en esta funcin ejecutars la funcin send
enviando como parmetro el valor null, ya que no interesa enviar valores al servidor.

La funcin cargarXML, se encargar de comprobar si el estado actual de la consulta es 4, es

decir si la consulta est completada. Dentro de la funcin agrega el siguiente cdigo:
if(consulta.readyState == 4){

var respuesta = consulta.responseXML;

var paisRecup = respuesta.getElementsByTagName("pais");
var ciudadRecup = paisRecup[seleccionada].getElementsByTagName("ciudad");

borrarContenido();

for(var x = 0 ; x < ciudadRecup.length ; x++){

var nuevo = document.createElement("option");
nuevo.innerHTML = ciudadRecup[x].firstChild.nodeValue;
ciudad.appendChild(nuevo);
}
ciudad.disabled = false;
}

Esta funcin recuperar el contenido del archivo, luego seleccionar las etiquetas del XML por
nombre, borrar el contenido del campo select por medio de una funcin, y luego crear
dinmicamente nuevos elementos option dentro del select correspondiente a las ciudades. Y
como paso final habilitar el campo selecta, para que el usuario pueda seleccionarlo.

La funcin borrarContenido eliminar el contenido del campo select, para que cuando la
funcin cargarXML vuelva a generar elementos, este est vaco. El contenido de la funcin
deber ser el siguiente:

while(ciudad.options.length > 0){

ciudad.remove(0);
}
Ahora lo nico que falta es vincular el select que muestra los pases, con la funcin ajax,
aadindole el evento onchange a dicha etiqueta.

Recuerda que este ejercicio solamente debes probarlo con el navegador firefox, ya que es uno
de los nicos que no necesita de un servidor para hacer funcionar AJAX.

La solucin de este ejercicio la podrs encontrar en Ejercicios/Dossier/Resueltos/Ejercicio22.html