Ejer Cici Os Javascript
Ejer Cici Os 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:
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:
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.
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:
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:
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. .
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.
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
!!!.
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.
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:
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:
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:
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:
Si has realizado todo correctamente el resultado que debe aparecer en el alert es 16.
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.
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.
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:
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.
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.
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:
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. .
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 has realizado todo correctamente debers ver una pgina bastante parecida a esta:
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.
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:
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.
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.
1) Crear la etiqueta
2) Dar estilos y propiedades
3) Agregarla al documento.
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.
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.
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.
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.
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.
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.
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.
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:
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 Ingls
Indice de la matriz Valor Indice de la matriz Valor
0 Espaol 0 Ingls
1 Aprendiendo Javascript 1 Learn Javascript
2 En ejercicios prcticos 2 With excercises
3 Orientado a objetos 3 object oriented
4 Fciles de resolver 4 easy to resolve
5 Y divertidos 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.
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.
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.
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 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]);
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.
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.
borrarContenido();
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:
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.