Dossier de ejercicios JavaScript -...

Dossier de ejercicios JavaScript

Ejercicio1 En este ejercicio trabajarás con variables numéricas, de texto y booleanas. Utilizarás los

conocimientos adquiridos en el libro para aplicarlo a ejercicios prácticos. 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, tendrás que mostrar los siguientes mensajes en pantalla uno

después del otro:

Ahora deberás declarar en el mismo documento a continuación las siguientes variables:

Nombre Valor

texto1 Esta es una frase para “Javascript”

texto2 que se mostrara en 2 líneas

si true

no false

Con estas 4 variables deberás mostrar las siguientes cajas de diálogo:

La solución de este ejercicio la podrás encontrar en Ejercicios/Dossier/Resueltos/Ejercicio1.html

Ejercicio 2 En este ejercicio pedirás datos al usuario por medio de la función prompt y los mostrarás en

un formato de salida específico. 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 asignarás 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 persona !!!

Introduce la edad de la segunda persona !!!

Introduce la edad de la tercera persona !!!

Al haber declarado las variables con su valor prompt, ya estás pidiendo información al usuario,

que quedará almacenada en las variables. Si todo funciona correctamente, al abrir la página

deberás ver el siguiente resultado:

En la segunda parte de este ejercicio deberás mostrar la información recogida del usuario y

mostrarla con unas características especiales:

En el primer mensaje deberás mostrar el primer nombre, colocar una tabulación, la edad de la

primera persona y un salto de línea; luego seguirán la segunda y la tercera persona de la

misma manera para mostrar toda la información en un solo cuadro de diálogo. El resultado

deberá ser el siguiente:

Y como último paso del ejercicio deberás mostrar un cuadro de diálogo 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 serán tratadas como texto, por lo tanto para poder sumar las variables

correctamente deberás convertirlas mediante la función parseInt a variables de tipo numérico.

El resultado de esta acción deberá ser el siguiente:


Ejercicio 3 En este ejercicio crearás un control que te permitirá comprobar usuario, contraseña 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

código fuente de la página, realmente para esta función se utilizará algún 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

continuación declara 3 variables con las siguientes características:

Nombre Valor Mensaje

nombre prompt Introduce tu nombre:

contra prompt Introduce tu contraseña:

edad prompt Introduce tu edad:

Antes de empezar deberás conocer el término “anidar”, que hace referencia a colocar un

condicional dentro de otro, entonces si se cumple la primera evaluación, se pasará a evaluar

las que estén dentro de ella. Este ejercicio servirá para reforzar los conocimientos de la

sentencia if else.

La primera comprobación que deberás hacer es comparar el usuario que ha introducido por

medio del prompt con el usuario “Cipsa”. Si esta comprobación es falsa, deberás mostrar un

alert con el mensaje “Usuario incorrecto.” .

Y si esta comprobación es verdadera deberás anidar un if dentro de este, comparando el valor

introducido mediante el prompt con el valor “Barcelona”. Si esta comparación es falsa,

deberás mostrar un alert con el mensaje “Contraseña incorrecta.”. En cambio si es verdadera

deberás hacer una última comprobación, que será la edad del usuario, mayor de 18 años

deberás 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 años.”.


Ejercicio 4 En este ejercicio deberás utilizar el condicional switch para simular el funcionamiento de un

cajero automático. En este cajero básico 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. Deberás declarar las siguientes variables con los valores

correspondientes.


dineroInicial 1000 ---

opcion prompt Que desea hacer: 1)Retirar dinero 2)Ingresar dinero 3)Consultar

numero Convertir el valor obtenido del prompt a valor numérico

---

Al ejecutar la página el prompt preguntará al usuario que desea hacer, y se le plantearán las 3

opciones. Para seguir adelante con el ejercicio deberás plantear una estructura switch con 3

posibles casos y un default (por defecto). El switch se regirá por la variable número, que es el

valor que el usuario ingresa por medio del prompt y ya está convertido a tipo numérico.

En el caso que el usuario teclee la opción 1 deberás preguntar al usuario “Cuanto dinero desea

retirar?”, por medio de un prompt y guardar este valor en una variable llamada “cantidad”. A

continuación declararás una variable llamada total que será igual a el dineroInicial – cantidad,

y mostrarás un alert de “Su saldo actual es: ” y el dinero que actualmente tenga la cuenta.

En el caso que el usuario teclee la opción 2 será necesario que repitas la misma operación

anterior, pero mostrando en el prompt en mensaje “Cuanto dinero desea ingresar?” y sumar

cantidad y dineroInicial en vez de restarlos.

La tercera opción posible simplemente mostrará el saldo de esta cuenta que siempre será

1000, porque realmente cada vez que reinicies la página tendrá ese valor.

Y si tecleas cualquier otra opción deberás mostrar un mensaje que diga “Esa opción no existe

!!!”.


Ejercicio 5 En este ejercicio crearás un pequeño 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

también ingresado por otro prompt. Deberás utilizar la sentencia de control de bucle while y la

sentencia de control if, else if , else.

Primero que nada deberás declarar las siguientes variables con sus respectivos valores y en el

orden que aparecen.


importeTexto prompt Cual es el importe de su compra?

dineroTexto prompt Con cuanto dinero paga?

importe Converión numérica del valor importeTexto ---

dinero Converión numérica del valor importeDinero

---

diferencia dinero - importe ---

bill50 0 ---

bill20 0 ---

bill10 0 ---

bill5 0 ---

Resto 0 ---

A continuación de la declaración de variables deberás declarar un bucle while que se repita

mientras la variable diferencia sea mayor que cero. Es muy importante que no ejecutes ahora

la página ya que si lo hicieras entraría en un bucle infinito, colgando la página. Ahora anidarás

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 comprobación no es verdadera, y por medio de algunos else

if, deberás comprobar lo mismo para los billetes de 20, 10 y 5. Y al final de toda esta estructura

en el “else”, darás el valor de diferencia a la variable resto, que se encargará de controlar si la

vuelta es menor que un billete de 5 y darás a la variable diferencia un valor 0 que será el

encargado de salir del bucle.

Si ejecutas ahora la página verás que después de mostrar los dos prompt, no hace nada más,

porque realmente no hay ningún alert que muestre información. Por lo tanto deberás crear un

alert que muestre la información de la siguiente manera:


Ejercicio 6 Este ejercicio está diseñado para que utilices la sentencia de control de bucles for. En el

deberás crear una aplicación que muestre en un alert la tabla de multiplicar que el usuario

quiera. Comenzarás abriendo Tú editor de texto, creando un nuevo documento y colocando las

etiquetas necesarias para empezar a trabaja con Javascript.

Para realizar este ejercicio necesitarás las siguientes variables con sus respectivos valores:


num prompt Que tabla quieres ver?

numConvertido Convertir a valor numérico la variable num ---

resultado Inicializado pero vacío

Ahora deberás 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 crearás 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, deberás colocar un alert que muestre el contenido de la

variable resultado, que deberá ser similar a este:


Ejercicio 7 Antes de empezar con el ejercicio tienes que tener algunos conceptos muy claros, función:

trozo de código que se ejecutará cuando tú quieras o cuando el programa lo requiera,

permitiendo realizar ese trozo de código tantas veces como sea necesario; parámetro: variable

local de la función que es enviada desde la línea de llamada de la función; devolución o return:

es el valor que devuelve la función 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 función, el

parametro1 y el parametro2 cogen sus valores de la llamada de la función, estos dos

parámetros 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 valdría 6.

Ahora que están claros estos conceptos, deberás abrir un nuevo documento de Tú editor de

texto y colocar las etiquetas necesarias para inicial el script. A continuación debes crear cuatro

funciones con las siguientes características:

Nombre Parámetros return

sumar numero1, numero2 total

restar numero1, numero2 total

multiplicar numero1, numero2 total

dividir numero1, numero2 total

Ahora que ya tienes las funciones creadas, llamarás a cada una de ellas dentro de un alert y

sumarás los valores devueltos. En cada llamada a cada función deberás enviar estos

parámetros:

Función Parámetro 1 Parámetro 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.


Ejercicio 8 En este ejercicio trabajarás con matrices y funciones, el ejercicio consiste en tener 2 matrices,

una de usuarios y otra de contraseñas; y comprobar si los datos introducidos por el usuario

existen o no.

Para este fin deberás crear 2 matrices:

Nombre de la matriz usuarios

Valor 1 Antonio

Valor2 Juan

Valor 3 Jorge

Valor 4 Javier

A continuación deberás declarar 4 variables con los siguientes valores:


usuario prompt Nombre de usuario:

contra prompt Cuál es su contraseña?

valor1 vacia ---

valor2 vacia ---

Nombre de la matriz contras

Valor 1 1234

Valor 2 4321

Valor 3 5678

Valor 4 8765

Ahora deberás crear 2 funciones muy parecidas, que solamente se diferenciarán en que cada

una leerá una matriz diferente. Cada función 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 deberás

llamarlas compUsuario y compContras.

Tendrás que ir paso a paso, primero empezarás por el for que deberá recorrer la matriz desde

el índice 0 hasta el final (length). Luego colocarás 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 comparación es verdadera, es decir si se encuentra el usuario o

la contraseña deberás 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

después del for ubicarás un return false.

Una vez tengas las dos funciones declaradas, deberás utilizar las dos variables que tienes

definidas, pero vacías 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 expresión 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 deberás informarle que los

datos son incorrectos.


Ejercicio 9 En este ejercicio utilizarás una matriz multidimensional, que te permitirá guardar valores

referentes a libros (Titulo, editorial y autor). Pero antes de comenzar sería bueno que tuvieras

claros los conceptos. Mientras una matriz de una dimensión se representaría con una tabla de

una sola columna, una matriz bidimensional se representaría con una tabla de más de una

columna y una de tres dimensiones se representaría con más de una tabla que contengan más

de una columna cada una de ellas.

Con este gráfico entenderás más la definición de matrices. En programación para acceder al

primer valor de la matriz utilizarías matriz[0], siendo matriz el nombre de la matriz. En cambio

para acceder al “Valor 2-2” de la matriz bidimensional deberías utilizar la siguiente sentencia

matriz[1][1], recuerda que el primer índice de la matriz siempre es 0. Y para acceder a una

multidimensional utilizarás 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 están más claras deberás 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 utilizarás 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 llamarás x hasta el máximo (length),

mientras el for interno recorrerá desde el índice 0 que llamarás y, hasta la longitud máxima de

libros*x+. Dentro del for interno deberás “imprimir” los datos que vaya leyendo mediante la

función document.write. Y dentro del for externo y después de ejecutar el interno deberás

colocar un salto de línea ( ) también mediante la función document.write.

Al ejecutar este código tendrás listados los libros separados por un espacio entre cada uno de

ellos.


Ejercicio 10 Este ejercicio trata sobre todo de encadenar funciones, y tratará también el tema “ámbito de

variables”. Para entender más sobre el tema “ámbito de variables” debes saber que

básicamente hay dos ámbitos, público o privado. Se entenderá por variable pública, todas

aquellas variables que estén fuera de las funciones, y se podrán utilizar tanto dentro como

fuera de las funciones. En cambio las variables privadas solo las podrás utilizar dentro de las

funciones, en el caso de intentar utilizar una variable privada desde fuera de la función donde

está definida creará un error de funcionamiento en la aplicación. Los parámetros que define

una función también son considerados como variables privadas, por lo tanto para enviar

valores de una función a otra se utilizarán los parámetros. Una recomendación es declarar

todas las variables públicas 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 concatenarán más texto se muestre un saludo de

bienvenida a la persona. Para realizar el ejercicio solo necesitarás una variable pública llamada

nombre que cogerá el valor de un prompt con el texto “Introduce tu nombre:”.

Deberás crear tres funciones con los nombres primera, segunda y tercera. La primera será una

función que no requiere parámetros, pero deberás definir dentro de ella una variable llamada

texto que tenga el valor “Hola ”. Después de definir esta variable deberás 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 enviarás como parámetro a

la función llamada segunda.

Lógicamente si la primera función ejecuta a la segunda y le envía un parámetro la función debe

estar preparada para recibir este parámetro, por lo que debes modificar esta segunda función

añadiéndole un parámetro llamado “parametro”. Ahora en la segunda función debes crear

una variable llamada texto con el valor “, que”, y concatenarás el parámetro con esta variable

para formar la cadena “Hola nombre introducido, que”. El siguiente paso es enviar este valor a

la tercera función por medio de un parámetro.

Deberás modificar la tercera función para recibir este parámetro con el nombre final y

declararás una variable llamada texto con el valor “tal??”. Ahora tienes que concatenar el

parámetro creado con la variable para lograr tener la cadena “Hola nombre introducido, que

tal?”. Una vez tengas todo esto deberás crear un alert que muestre todo el contenido de la

variable, este alert debe estar dentro de la función tercera.

Si guardas el documento y lo ejecutas verás que no funciona, y es por una sencilla razón, 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 función llamada primera deberás ver un

mensaje como este:

En este ejercicio, si lo ves detenidamente tienes tres variables llamadas texto, al ser privadas

de cada función esto es posible, si por cualquier motivo intentaras crear tres variables

llamadas texto en el ámbito público, la que funcionaría sería la última declarada sobre

escribiendo las anteriores.


Ejercicio 11 En este ejercicio trabajaras con cadenas de texto, deberás 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 colocarán al final

del documento, pero más adelante podrás colocar estas etiquetas donde realmente te haga

falta. Con la función document.write(), puedes escribir mensajes directamente en el

navegador, solamente con colocar este texto entre comillas y dentro de los paréntesis. Pero y

que pasaría si tu colocaras al principio de la cadena de texto la etiqueta “” y al final “”,

estarás creando un nuevo párrafo de contenido en la página actual. En este ejercicio deberás

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 podrás dar

estilo en línea con el atributo style de HTML. Por lo tanto para crear un nuevo párrafo de color

rojo escribirás la siguiente sentencia:

document.write(“ ”+ “Este es el texto rojo” +””);

Crea un nuevo documento HTML en Tú editor de texto y escribe las etiquetas necesarias para el

funcionamiento de Javascript. Trabajarás 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 vivía

un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.” .

Ahora deberás 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 párrafos los diferentes trozos separados por comas de color

verde. Aquí también deberás crear un bulce.

4) Mostrar en que posición se encuentra la palabra “hidalgo”, con el formato: “La palabra

hidalgo esta en la posición: x”.

5) Mostrar la frase en letras mayúsculas.

6) Mostrar la frase en letras minúsculas.

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:


Ejercicio 12 Este ejercicio se basa en elementos numéricos, deberás pedir al usuario que introduzca dos

números mediante dos prompt y trabajarás sobre ellos. En programación 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

números, si no controlas esta posibilidad es muy probable que la página deje de funcionar

inesperadamente.

Por lo tanto crea dos variables llamadas num1 y num2 que pidan al usuario que introduzca

números. Una vez tengas los dos valores controlarás por medio de la función isNaN si los

valores son numéricos o no. Si no lo son muestra un alert con el siguiente mensaje :” Los

valores introducidos deben ser números”.

Si los dos valores son numéricos deberás mostrar la siguiente información:

1) El mayor de los dos con el formato “El número mayor es: x”.

2) El menor de los dos con el formato “El número menor es: x”.

3) Súmale 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 número aleatorio

comprendido entre 1 y 100.

Si has realizado todo correctamente deberás ver una página bastante parecida a esta:


Ejercicio 13 En este ejercicio deberás 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 días de la semana el segundo los 12 meses del año. Abre un nuevo documento HTML en Tú

editor de texto y escribe las etiquetas necesarias, luego declara estas 2 matrices llamadas días

y meses respectivamente.

Después declara 5 variables con el siguiente contenido:

Nombre Valor

fecha Un nuevo objeto date con la fecha completa actual

nomDia El nombre del día actual basado en la matriz

numDia El número del día actual

mes El nombre del mes actual basado en la matriz

anio El año actual

Una vez tengas toda esta información mostrarás la fecha en el documento actual con el

formato estipulado.


Ejercicio 14 En este ejercicio utilizarás el objeto window para abrir ventanas de diferente tamaño, y con

diferentes páginas 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 deberás tener una función llamada

abrirVentana, la cual pedirá 3 parámetros al usuario: opción, alto y ancho. Dentro de la función

declara la variable enlace e iníciala como vacía.

Ahora y todavía dentro de la función 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 deberás definir la variable enlace de una manera diferente y hacer la llamada a la

función window.open() pasándole como parámetro 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 deberás 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 función “abrirVentana”.

Los parámetros que debes enviar en cada función son los siguientes:

Nombre del Botón 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 página en cualquier navegador, cuando hagas click sobre cualquiera de los

botones, cada uno de ellos abrirá una ventana de diferente tamaño y abrirá otra página

diferente.


Ejercicio 15 Antes de comenzar el ejercicio tienes que aprender una técnica de creación de elementos, con

esta técnica podrás crear y agregar nuevas etiquetas HTML al documento sin borrar lo

existente. Hasta ahora habías visto la función document.write() que funciona muy bien en

determinados casos, pero tiene la desventaja de borrar el contenido de la página para

“imprimir” lo que se le envíe como parámetro. En cambio con la creación de elementos

dinámica podrás crear elemento y agregarlos al código existente sin eliminar nada necesario.

Esta técnica consiste en 3 pasos:

1) Crear la etiqueta

2) Dar estilos y propiedades

3) Agregarla al documento.

Para crear la etiqueta se utiliza la función 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 deberás 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,

deberás agregarlo al documento por medio de la función “appenChild”.

En el siguiente ejemplo se crea un párrafo 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 párrafo 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 más a fondo en otro capítulo del libro, y los intervalos de

tiempo vistos en este capítulo harás una primera animación 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 serán las encargadas de hacer

funcionar la animación.

La función empieza será la encargada de inicializar la variable tiempo, con un temporizador de

intervalo que ejecute la función “ejecuta” cada medio segundo.

La función parar se encargará solamente de detener el temporizador.

Realmente la función más importante es “ejecuta”, ya que contiene la funcionalidad básica de

la animación. Como primer paso dentro de esta función deberás crear una sentencia de

control if que compruebe si la variable contador es menor que la longitud de la variable

“textos”, si la comprobación es falsa debes ejecutar la función “parar”. Y si la comprobación es

verdadera deberás declarar una nueva variable dentro del if llamada aleatorio, que genere un

número del 1 al 10. Después de este paso deberás crear un nuevo elemento span en el

documento, con las siguientes características:

Nombre de propiedad

Valor Explicación

innerHTML +=textos.charAt(contador) El texto que debe contener es el carácter que

se encuentra en la posición contador.

style.color colores[aleatorio] Coge un color de la matriz de colores

asignándole un color aleatorio a cada carácter

style.fontSize "30pt" Define el tamaño 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

asígnales las funciones “empieza” y “parar” respectivamente al evento “onclick” de cada uno

de ellos.

Si todo ha funcionado correctamente, cuando ejecutes la página y hagas click sobre el botón

start, verás la animación creada.


Ejercicio 16 En este ejercicio cambiarás los estilos de los textos que contiene una div, por medio de listas

desplegables. Podrás cambiar el tipo de fuente, el tamaño y el color de todos los párrafos

contenidos por la div.

Con Tú editor de texto, abre el archivo “Cambiar estilo de textos.html” que encontrarás dentro

de la carpeta de Ejercicios del Dossier, porque deberás 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 función llamada “cambia” que será la encargada de hacer todos los cambios en el

documento. Si lees atentamente el documento HTML podrás ver que existe un formulario con

3 elemento select dentro. Cada uno de estos select tiene un ID asignado, por el cual deberás

coger el elemento. En los dos primeros select deberás coger sus valores innerHTML ya que

contienen la información que necesitas y concuerda con la que quieres mostrar, pero en el

tercer select no deberás coger el innerHTML, sino que el value, ya que los valores que deseas

enseñar en la página no son los mismos que quieres utilizar internamente en el programa.

Por lo tanto crea tres variables llamadas “familia, tam y col”, que serán las encargadas de

guardar el texto seleccionado de las opciones y asígnales los valores de los elementos

seleccionados del documento.

Como segundo paso deberás utilizar cada uno de estos valores para cambiar la propiedad que

corresponda, es decir, el tipo de fuente, el tamaño y el color. Una vez hecho esto ya tienes la

función lista, solo debes agregar en el botón del formulario la función onclick para que ejecute

la función que has creado.

Si pruebas el ejercicio verás que con unos simples cambios podrás “formatear” el documento,

para que tome diferentes aspectos.


Ejercicio 17 En este ejercicio crearás un zoom sobre imágenes, es decir que cuando pases el ratón por

encima, la foto se ampliará. Este efecto es muy común hoy en día en muchos sitios web, y

realmente es muy fácil 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 programación, son elementos

que tienen propiedades y funciones. Las propiedades definen los valores que el objeto

guardará, mientras que las funciones dirán como se debe comportar el objeto. Por ejemplo

“innerHTML” es una propiedad ya que se encarga de guardar la información de texto que

contiene la etiqueta HTML, en cambio “onclick” controla una acción o evento, por lo tanto está

ligado al funcionamiento del elemento, por lo tanto es una función de elemento. La palabra

“this” representa el objeto actual o el que está ejecutando la función, a veces es un poco

complicado el utilizarlo correctamente, pero con un poco más de experiencia lo dominarás

perfectamente. “This” te permitirá crear funciones que traten a muchos elementos de la

misma manera sin necesidad de crear una función independiente para cada elemento.

Abre la plantilla llamada “Ejercicio17Inicial.html” y declara las etiquetas necesarias para poder

añadir script en la página. Ahora crea dos funciones llamadas zoom y normal, ambas deben

requerir un parámetro llamado “obj”.

En la función “zoom”, debes asignar al parámetro “obj”, que lógicamente recibirá un objeto,

los siguientes estilos:

Propiedad Valor

Width 300px

Height 300px

Top -30px

Left -30px

Y en la función normal, debes volver a dejar los valores iniciales de las fotografías, es decir:

Propiedad Valor

Width 200px

Height 200px

Top 20px

Left 20px

Una vez que tengas las dos funciones creadas, verás que no hacen referencia directa a ningún

elemento del HTML, estás funciones son totalmente genéricas, 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 función zoom enviándole como parámetro “this”,

es decir, el objeto de esta imagen, y “onmouseout” llamará a la función normal enviándole

como parámetro también la palabra reservada “this”.

Si todo ha funcionado correctamente al ejecutar la página y pasar el ratón por encima de las

imágenes estas ejecutarán un efecto de zoom. Normalmente al hacer esta acción deberían

moverse el resto de las imágenes, pero las propiedades position: absolute y relative

previamente creadas en la plantilla del documento solucionan este problema.


Ejercicio 18 En este ejercicio recogerás los datos introducidos en un formulario y los mostrarás 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 características

es controlar si los nombres e id de los elementos html estén bien asignados y que no haya

conflictos entre ellos, en este caso no los hay.

Entonces como siguiente paso crea una función que se ejecute al clickar sobre el botón

“Probar”, llamada “muestra” y asígnale esa función a dicho botón.

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 estén “llenas”, debes crear

dinámicamente 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 código, al pulsar el botón Probar, deberá recoger todos los valores del

formulario y mostrarlos en pantalla.


Ejercicio 19 En este ejercicio deberás controlar 3 aspectos fundamentales de la programación de páginas

web dinámicas, el cambio de los contenidos de texto, el cambio de tamaño de imágenes, y el

control de eventos del usuario.

Abre el documento “plantillaEjercicio19.html” y verás que el documento consta de 2 botones,

una imagen , un campo del tipo select y 5 párrafos vacíos. Los 2 botones se encargarán de

cargar los textos en los párrafos correspondientes, la imagen cambiará al pasar el ratón por

encima, y por medio del select, podrás cambiar el tamaño 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

párrafos.

2) Define 7 funciones con los nombres eng,esp, cargaVariables, carga, cambia, rest y

tamano

Ahora deberás vincular las funciones con los eventos html que la ejecutarán. Deberás

vincularlos de la siguiente manera:

Elemento Evento Función

body Onload cargaVariables

Botón castellano Onclick esp

Botón inglés Conclick eng

Imagen Onmouseover cambia

Imagen Onmouseout rest

ampo select onchange tamano

La función cargaVariables se encargará de inicializar todas las variables públicas 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 encargarán de inicializar la variable idioma como una matriz que contenga la información de los párrafos y el título. Para ello deberás darle los siguientes valores:

Español Inglés

Indice de la matriz Valor Indice de la matriz Valor

0 Español 0 Inglés

1 Aprendiendo Javascript 1 Learn Javascript

2 En ejercicios prácticos 2 With excercises

3 Orientado a objetos 3 object oriented

4 Fáciles de resolver 4 easy to resolve

5 Y divertidos 5 and makes fun

Y después de definir la matriz en cada caso realizarán una llamada a la función carga.

La función carga simplemente dará los valores a los elementos de texto de la página, tal y

como está organizada la matriz el índice 0 es el h1 de la página, por lo tanto la propiedad

innerHTML del objeto titulo deberá coger este valor. En cuanto a los párrafos, debes utilizar un

for que parta desde el índice 1 hasta la cantidad máxima de elementos (length) y recorra los

elementos asignándoles sus valores.

En las funciones cambia y rest deberás cambiar la propiedad src de la imagen, la función

cambia establecerá como src el archivo “Ejercicio17_2.jpg” , mientras que la función rest

restablecerá la imagen a su src original, es decir “Ejercicio17_1.jpg”.

Y por último la función tamano se encargará de cambiar el tamaño de la imagen cuando

selecciones algunas de las medidas contenidas en el campo select. Para ello dentro de la

función deberás crear dos variables llamadas selección y valor, que contengan el índice del

elemento seleccionado y el valor recogido del campo seleccionado respectivamente. Y luego

como último paso deberás asignar este valor recogido a la propiedad width de la imagen.


Ejercicio 20 En este ejercicio deberás cambiar las propiedades css de los elemento para crear una div con

pestañas que cambie su contenido dependiendo de la pestaña donde el usuario haga click.

Para ello abre el documento “plantillaEjercicio20.html”, y ejecútalo en el navegador, verás que

la estructura ya está creada en html y css, y que por defecto ya se visualiza la primera pestaña.

Es muy importante que analices el código 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 página y

crea una función llamada cambiarContenido que reciba un parámetro llamado “pest”.

Dentro de la función declara la variable “pestanas” que coja todos los elementos del tipo li de

la página, es decir todas las pestañas. 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 función deberá ejecutarse cada vez que el usuario haga click sobre cada una de las

pestañas, por lo tanto la función cambiará todas las pestañas a su posición inicial es decir top:

0px y luego cambiará la clickada a top:3px. También deberá ocultar los contenidos creados, y

mostrar solamente el correspondiente a la pestaña que se ha clickado.

Para ello utilizarás un for que recorra los tres elementos y cambie estas propiedades. Y lo

siguiente que debes hacer es colocar el siguiente código dentro de la función pero después del

for:

pestanas[pest].style.top= "3px"; cont[pest].style.display = "block"; Como puedes ver este código se encargará de cambiar el estilo del top y la propiedad display, para que se visualicen las pestañas correctamente, utilizando el parámetro pest. Este parámetro lo deberás enviar desde el evento onclick de cada una de las pestañas de la siguiente manera:

Pestaña Función con parámetro

Mostrar Primero cambiarContenido(0);

Mostrar Segundo cambiarContenido(1)

Mostrar Tercero cambiarContenido(2)

Si ejecutas la página web con las modificaciones, verás que al hacer click sobre cada una de las

pestañas estas cambiarán el contenido y también la manera de visualizarse.


Ejercicio 21 En este ejercicio implementarás el uso de Cookies para facilitar al usuario el uso de la página

web. Si utilizas nuevamente el ejercicio anterior podrás ver que las pestañas funcionan

correctamente, pero cuando recargas la página, siempre es la primera pestaña la que está

seleccionada.

Según el tipo de página que diseñes, 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 función grabaCookie deberá utilizar un parámetro

llamado pestan.

La función grabaCookie se ejecutará cada vez que clickes sobre una pestaña, es decir que la

llamada a la función se ejecutará al final de la función cambiarContenido(creada en el ejercicio

anterior), y cogerá como parámetro la variable pest de dicha función. Esa variable es la

encargada de identificar cada pestaña, por lo tanto será la variable que deberás guardar en a

cookie.

Dentro de la función grabaCookie, solamente deberás ejecutar el grabado con el nombre

pestana y el valor deberá ser el de la pestaña seleccionada. Por lo tanto deberás colocar el

siguiente código dentro de la función:

document.cookie = "pestana=" + pestan;

En cuanto a la función leeCookie, deberás ejecutarla al finalizar de cargar la página, 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 acción deberás realizarla siempre, ya que la primera vez que visites la

página no existirá la cookie, por lo tanto es posible que se “cuelgue” la página al no poder

leerla.

Dentro del condicional if deberás crear 2 variables una llamada galleta que deberás 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 símbolo ”=”. 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

después de crear e inicializar estas variables escribirás el siguiente código dentro de la función:

cambiarContenido(valores[1]);

Esta sentencia ejecutará la función encargada de cambiar la pestaña, al ejecutarse después de

cargar el body, cargará mágicamente la última pestaña visitada por el usuario.


Ejercicio 22 En este ejercicio utilizarás AJAX para recuperar información de un archivo XML, y así actualizar

dinámicamente un menú desplegable de un formulario. Abre el documento llamado

“plantillaEjercicio22” y agrega las etiquetas necesarias para ejecutar un script.

Para ello deberás crear 3 variables llamadas “consulta, seleccionada, ciudad” sin inicializar, ya

que los valores los cogerán dentro de una función.

Y también debes crear 3 funciones llamadas “cargaCiudades, cargarXML, borrarContenido” .

Dentro de la función cargaCiudades colocarás el siguiente código, que será el encargado de

realizar la llamada asíncrona 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 función inicializarás las variables ciudad y país, que cogerás los valores de los campos

desplegables llamados países y ciudades. Luego dentro de la estructura try, catch comprobarás

si el navegador es internet explorer o los demás, inicializando el objeto consulta. Cada vez que

cambie el estado de la consulta, llamará a la función cargarXML, asignándosela como evento.

Luego abrirás la consulta, con los parámetros POST, el nombre del archivo y true, para decir

que la carga debe ser asíncrona. Y por último en esta función ejecutarás la función send

enviando como parámetro el valor null, ya que no interesa enviar valores al servidor.

La función cargarXML, se encargará de comprobar si el estado actual de la consulta es 4, es

decir si la consulta está completada. Dentro de la función agrega el siguiente código:

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 función recuperará el contenido del archivo, luego seleccionará las etiquetas del XML por

nombre, borrará el contenido del campo select por medio de una función, y luego creará

dinámicamente 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 función borrarContenido eliminará el contenido del campo select, para que cuando la

función cargarXML vuelva a generar elementos, este esté vacío. El contenido de la función

deberá ser el siguiente:

while(ciudad.options.length > 0){ ciudad.remove(0);

} Ahora lo único que falta es vincular el select que muestra los países, con la función ajax, añadiéndole 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 solución de este ejercicio la podrás encontrar en Ejercicios/Dossier/Resueltos/Ejercicio22.html

Dossier de ejercicios JavaScript -...

Documents

Transcript of Dossier de ejercicios JavaScript -...