Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
UNIDAD DE TRABAJO 2:
PROGRAMACIÓN DE DOCUMENTOS WEB UTILIZANDO
LENGUAJES DE "SCRIPT" DEL CLIENTE
Ejercicios de JavaScript
1) Crea un script que muestre los números enteros del 1 al 30.
2) Crea un script que muestre los números enteros pares entre 1 y 60.
3) Crea un script que muestre los números enteros múltiplos de 3 que existen entre 1 y 90.
4) Escribe un documento HTML empleando JavaScript que pida un número en una ventana
emergente y muestre el mensaje ¡Hola mundo! tantas veces como indique ese número:
5) Escribe un documento HTML empleando JavaScript que pida un número en una ventana
emergente y una cadena de caracteres en otra, y muestre esa cadena de caracteres tantas
veces como indique ese número:
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
6) Repite el ejercicio anterior, pero debes comprobar que el usuario no pulsa cancelar ni en
la introducción del número ni en la introducción de la cadena. En ese caso debes mostrar el
mensaje "El usuario canceló la acción".
7) Escribe un documento HTML empleando JavaScript que muestre en una lista ordenada
los números del 1 al 20.
8) Escribe un documento HTML empleando JavaScript que pida un número en una ventana
emergente y muestre en una lista ordenada los números del 1 hasta ese número.
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
9) Escribe un documento HTML empleando JavaScript que pida un número en una ventana
emergente y muestre en una tabla, una lista ordenada con los números impares del 1 hasta
ese número, y una lista no ordenada con los números pares del 1 hasta ese número.
10) Escribe un documento HTML empleando JavaScript que pida un número en una
ventana emergente y muestre en una tabla, los números del 1 hasta ese valor, en filas de
cinco celdas cada una, de forma que los valores pares aparezcan con el fondo en verde y
los impares con el fondo en rojo.
11) Crea un script que muestre los números enteros del 1 al 5, con sus secuencias
anteriores:
1
1, 2
1, 2, 3
1, 2, 3, 4
1, 2, 3, 4, 5
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
12) Escribe un documento HTML empleando JavaScript que muestre la siguiente "pirámide"
de números:
13) Modifica el ejercicio anterior para que pida en una ventana emergente un número para
generar posteriormente una pirámide en función del número introducido:
14) El cálculo de la letra del Documento Nacional de Identidad (DNI) es un proceso
matemático sencillo que se basa en obtener el resto de la división entera del número de
DNI y el número 23. A partir del resto de la división, se obtiene la letra seleccionándola
dentro de un array de letras.
El array de letras es:
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C',
'K', 'E', 'T'];
Por tanto si el resto de la división es 0, la letra del DNI es la T y si el resto es 3 la letra es la
A.
Con estos datos, elabora un pequeño script que:
Almacene en una variable el número de DNI indicado por el usuario y en otra
variable la letra del DNI que se ha indicado. (Pista: si se quiere pedir directamente al
usuario que indique su número y su letra, se puede utilizar la función prompt())
En primer lugar (y en una sola instrucción) se debe comprobar si el número es
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
menor que 0 o mayor que 99999999. Si ese es el caso, se muestra un mensaje al
usuario indicando que el número proporcionado no es válido y el programa no
muestra más mensajes.
Si el número es válido, se calcula la letra que le corresponde según el método
explicado anteriormente.
Una vez calculada la letra, se debe comparar con la letra indicada por el usuario. Si
no coinciden, se muestra un mensaje al usuario diciéndole que la letra que ha
indicado no es correcta. En otro caso, se muestra un mensaje indicando que el
número y la letra de DNI son correctos.
15) Crea un script que muestre los números enteros del 1 al 30, pero dentro de una tabla:
16) Construye una función que cree una tabla de enlaces con los elementos que se le
pasan en un array.
[Link]
[Link]
[Link]
Un ejemplo de llamada a la función podría ser el siguiente:
var b=new Array("[Link]", "[Link]","[Link]");
creaTablaEnlaces(b);
17) Definir una función que muestre información sobre una cadena de texto que se
le pasa como argumento. A partir de la cadena que se le pasa, la función determina si esa
cadena está formada sólo por mayúsculas, sólo por minúsculas o por una mezcla de ambas.
18) Definir una función que determine si la cadena de texto que se le pasa como parámetro
es un palíndromo, es decir, si se lee de la misma forma desde la izquierda y desde la
derecha. Ejemplo de palíndromo complejo: "La ruta nos aporto otro paso natural".
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
19) Crea dos funciones:
a) Una que reciba un texto y devuelva ese texto en itálica y minúsculas
b) Otra que reciba un texto y devuelva ese texto en itálica y mayúsculas
Ejemplo: Tres llamadas a la funciones:
[Link]('<br>' + italmin("Me llamo IAW"));
[Link]('<br>' + italmay("Me llamo iaw"));
var t=italmin("Me llamo IAW");
[Link]('<br>' + t);
Mostrarían en pantalla :
me llamo iaw
ME LLAMO IAW
me llamo iaw
20) Crea una función que reciba un texto y escriba ese texto en diferentes líneas,
un carácter por línea
M
i
T
e
x
t
o
21) Utilizando como base los ejercicios anteriores de creación de tablas a través de
funciones, diseña una función para crear una tabla con cabecera. La función debe aceptar
los siguientes parámetros: array de elementos, array de elementos de la cabecera, número
de filas y número de columnas
Ejemplo: Col1 Col2
var arr=new Array("Ele1","Ele2","Ele3","Ele4","Ele5","Ele6"); Ele1 Ele2
var b=new Array("Col1","Col2");
Ele3 Ele4
creaTabla(arr, b, 3, 2);
Ele5 Ele6
22) Escribe un documento HTML empleando JavaScript que muestre un párrafo, y que al
hacer click sobre ese párrafo, cambie de color de fondo de forma "circular", tomando los
siguientes valores para el color de fondo: rojo, verde, amarillo, azul, rojo, verde, ...
CONSEJO: Utiliza un array para almacenar los nombres de los colores.
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
23) Escribe un documento HTML empleando
JavaScript que muestre dos capas
(elementos <div>), que contengan cada
una un texto diferente, de forma que al
pulsar sobre una de ellas, se intercambien
los textos. Debe aparecer también un botón
con un icono de papelera, de forma que al
pulsarlo, se borre el texto de las capas.
24) PARA MENTES INQUIETAS: Reescribe el ejercicio 22, de forma que al mover el ratón
por encima del párrafo, cambie el color de fondo y el color del texto del párrafo, tomando
ambos, valores aleatorios entre #000000 y #FFFFFF.
25) Crea una capa que se pueda mover con 4 botones por toda la pantalla. Tiene que tener
en cuenta los límites de la ventana (comenzando por el extremo opuesto en cuanto llegue
al final de uno de ellos)
26) Diseña las capas dinámicas de los siguientes apartados, teniendo en cuenta que se
deben "cargar" una serie de palabras en las tres capas (desde tres arrays distintos) al
cargarse la página web (<body onLoad…>)
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
27) Juego de Memoria: Se tiene que copiar, en la capa destino (la de fondo amarillo), las
palabras que son comunes a todas las capas. Esto sucederá al pasar el ratón sobre la capa
destino. Las capas originales tienen el texto invisible (pero la capa si aparece) hasta que
pasamos el ratón por encima. Las palabras de las tres primeras capas se cargan desde tres
arrays al iniciarse la página web (como en el ejercicio anterior). Las palabras de la cuarta
capa (la amarilla, la capa destino) se crean dinámicamente cada vez que se pasa el ratón
por encima de la capa.
Al pasar el ratón por encima de cada una de Tras recordar el usuario los elementos
las capas tendríamos lo siguiente: comunes de las capas, comprobaríamos los
elementos que contiene la capa amarilla y
corroboraríamos su corrección:
28) Escribe un documento HTML empleando JavaScript que pida un número en un control
de texto de un formulario, otro número en otro, y al pulsar un párrafo, muestre el resultado
de la suma de los dos números en ese párrafo.
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
29) Diseña un documento que incluya un campo de texto y que compruebe que NO se
introducen números. Al salir del campo, debe mostrar un mensaje indicando que el texto
introducido es incorrecto si ha encontrado algún dígito. Puedes hacer la comprobación al
salir de la caja de texto (evento onBlur). (Pista: recorre los caracteres uno a uno, con la
función charAt()).
30) Modificar el ejercicio anterior para que en el caso de que haya dígitos se pregunte al
usuario si quiere que el sistema los borre por él. En caso de contestar que sí, se eliminan
los dígitos, y en caso contrario se elimina el contenido completo (por listo).
31) Crea un documento que incluya tres campos de texto que permitan introducir una
fecha: el primer campo serán los días (1-31), el segundo el mes (1-12) y el tercero el año
(1970-2050). Se debe comprobar al pulsar un botón de chequeo que la fecha es correcta.
Si no es correcta debe mostrar un mensaje indicando donde están los errores. Si es
correcta debe mostrar un alert con la fecha introducida. Para comprobar la corrección
debes diseñar una función que reciba tres parámetros: día, mes y año. Esta función es
reutilizable para otras cajas de texto que contengan fechas.
32) Diseña una calculadora que permita operar con +. Los resultados se muestran cada vez
que se pulsa sobre una tecla de operación. Como mejora, incluir los botones = y -.
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
33) Implementa una mini-cesta de la compra. Debe tener al menos dos productos posibles
(serán fijos). Los subtotales y el total no son editables, y se deben actualizar al pinchar
sobre añadir/quitar, así como al salir de cualquiera de las cajas de unidades o precios.
34) Diseña un código JavaScript que muestre una hoja de calendario con el día actual
(puedes hacerlo con una tabla con un borde grueso de una sola celda).
35) Implementa el código necesario para poder introducir una fecha en una caja de texto
con el formato dd/mm/yyyy. Al pulsar sobre un botón debe mostrar en otra caja el día de la
semana correspondiente a esa fecha.
36) Implementa el código necesario para poder introducir dos fechas en dos cajas de texto
con el formato dd/mm/yyyy. Al pulsar sobre un botón debe mostrar en un textarea el
número de años, meses (considerándolos de 0 días) o días que separan las dos fechas.
37) Realiza un script para que al pulsar sobre un botón se muestre en una caja de texto la
hora actual.
Región de Murcia
Consejería de Educación, Universidades y Empleo
Instituto de Educación Secundaria de
BENIAJÁN
Avda. Monteazahar, 17, 30570 BENIAJÁN (Murcia)
Tlf. 968 823 303 Fax. 968 823 505
DEPARTAMENTO DE Fondo Social Europeo
INFORMÁTICA Y COMUNICACIONES
[Link]
38) Programa una función JavaScript que reciba una fecha y muestre el calendario del mes
al que pertenece esa fecha. Por ejemplo, para 02/10/2011, mostraría:
39) Modifica la función anterior para que muestre los domingos en rojo. Además debe
recibir un array de días festivos para que éstos también aparezcan en rojo.
40) Diseña una lista que contenga nombres de ficheros gráficos. Al pinchar sobre un botón
se cargará en una nueva página las imágenes seleccionadas. La nueva página abierta
tendrá un enlace que permitirá cerrarla.