You are on page 1of 79

Aplicaciones Web Lenguajes de script: JAVASCRIPT

APLICACIONES WEB
LENGUAJES DE SCRIPT: JAVASCRIPT

EJERCICIOS BÁSICOS

EJERCICIOS BÁSICOS

0) Hacer un programa JavaScript que muestre por pantalla el mensaje “Hola Mundo”.

1) Confeccionar una programa en JavaScript que defina e inicialice una variable real donde almacenar el
sueldo de un operario y otra de tipo cadena de caracteres donde almacenaremos el nombre. Imprimir
cada variable en una línea distinta en pantalla.

2) Confeccionar un programa que permita definir e inicializar variables con el nombre de un usuario y su
mail. Mostrar posteriormente los datos en la página HTML.

3) Usando una variable inicializada con el lado de un cuadrado, mostrar por pantalla el perímetro del
mismo (El perímetro de un cuadrado se calcula multiplicando el valor del lado por cuatro).

4) Realizar un programa que cargue cuatro variables con valores numéricos y muestre su suma y su
producto.

5) Escribir un programa en el cual se capturen por pantalla cuatro números, calcular y mostrar la suma de
los dos primeros y el producto del tercero y el cuarto.

6) Desarrollar un programa que pida por pantalla el precio de un artículo y la cantidad que lleva el cliente.
Mostrar lo que debe abonar el comprador.

EJERCICIOS CON “if”

7) Se ingresan por pantalla tres notas de un alumno, si el promedio es mayor o igual a siete mostrar el
mensaje 'Promocionado'. Tener en cuenta que para obtener el promedio debemos operar
suma=nota1+nota2+nota3; y luego hacer promedio=suma/3;

8) Solicitar que se capture dos veces una clave. Mostrar un mensaje si son iguales (tener en cuenta que
para ver si dos variables tienen el mismo valor almacenado debemos utilizar el operador ==).

9) Realizar un programa que lea por teclado dos números, si el primero es mayor al segundo mostrar su
suma y diferencia, en caso contrario mostrar el producto y la división del primero respecto al segundo.

10) Se ingresan tres notas de un alumno, si el promedio es mayor o igual a 6 mostrar un mensaje „bien‟, si
está entre 4 y 6 'regular', sino 'mal'.

11) Se cargan por teclado tres números distintos. Mostrar por pantalla el mayor de ellos.

12) Se ingresa por teclado un valor entero, mostrar una leyenda que indique si el número es positivo, cero o
negativo.

13) Se ingresan tres valores por teclado, si todos son iguales se imprime la suma del primero con el segundo
y a este resultado se lo multiplica por el tercero. En caso contrario sacar un mensaje que diga que son
distintos.

14) Se ingresan por teclado tres números, si todos los valores ingresados son menores a 10, imprimir en la
página la leyenda ' Todos los números son menores a diez'.

Página 1 / 2
Aplicaciones Web Lenguajes de script: JAVASCRIPT

15) De un operario se conoce su sueldo y los años de antigüedad. Se pide confeccionar un programa que lea
los datos de entrada e informe:

a) Si el sueldo es inferior a 500 y su antigüedad es igual o superior a 10 años, otorgarle un


aumento del 20 %, mostrar el sueldo a pagar.
b) Si el sueldo es inferior a 500 pero su antigüedad es menor a 10 años, otorgarle un aumento de
5 %.
c) Si el sueldo es mayor o igual a 500 mostrar el sueldo en la página sin cambios.

16) Crear un script que pida al usuario un número.

Si el número introducido es PAR aparecerá un mensaje indicándolo y si el número es IMPAR aparecerá otro
distinto.

17) Crear un script que pida al usuario un número del 1 al 12. Dependiendo de su valor, sacar el nombre
del mes (utiliza un switch) y almacénalo en una variable, que luego se sacará por pantalla.

18) Crear un script que pida el punto cardinal (Norte, Sur, Este, Oeste). Dependiendo de su valor, sacar un
cuadro de diálogo diferente (utiliza un switch).

Página 2 / 2
Ejercicios básicos- Daniel Rodríguez
EJERCICIO 0
<!--Daniel Rodríguez-->
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio 0</title>
<script type="text/JavaScript" language=”JavaScript”>
alert ('Hola mundo');
</script>
</head>
<body>
</body>
</html>

EJERCICIO 1
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var nombre='Manolo';
var sueldo=12378;
document.write(nombre);
document.write('<br>');
document.write(sueldo);
</script>

</body>
</html>

EJERCICIO 2
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio2</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var usuario;
var correo;
usuario=prompt('Nombre de usuario ');
correo=prompt('E-mail');
document.write('Tu nombre es ');
document.write(usuario);
document.write('<br>');
document.write('Tu correo electrónico es ');
document.write(correo);
</script>

</body>
</html>
EJERCICIO 3
<!--Daniel Rodríguez-->
<html>
<head>
<title>Ejercicio 3</title>
<meta charset="UTF-8">
<title>Ejercicio 3</title>
<script type="text/JavaScript" language=”JavaScript”>
var lado=prompt("Lado")
var perimetro=lado*4
alert("El perímetro del cuadrado es "+(perimetro)+"")
</script>
</head>
<body>
</body>
</html>
EJERCICIO 4
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 4</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var num1;
var num2;
var num3;
var num4;
num1=prompt('Primer valor');
num2=prompt('Segundo valor');
num3=prompt('Tercer valor');
num4=prompt('Cuarto valor');
var suma;

suma=parseInt(num1)+parseInt(num2)+parseInt(num3)+parseInt(num4);
var producto;

producto=parseInt(num1)*parseInt(num2)*parseInt(num3)*parseInt(num
4);
document.write('La suma es ');
document.write(suma);
document.write('<br>');
document.write('El producto es ');
document.write(producto);
</script>

</body>
</html>
EJERCICIO 5
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 5</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var num1;
var num2;
var num3;
var num4;
num1=prompt('Primer valor');
num2=prompt('Segundo valor');
num3=prompt('Tercer valor');
num4=prompt('Cuarto valor');
var suma;
suma=parseInt(num1)+parseInt(num2);
var producto;
producto=parseInt(num3)*parseInt(num4);
document.write('La suma de los dos primeros valores es:');
document.write(suma);
document.write('<br>');
document.write('El producto del tercer y cuarto valor es:');
document.write(producto);
</script>

</body>
</html>
EJERCICIO 6
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 6</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var precio;
var cantidad;
precio=prompt('Precio');
cantidad=prompt('Nº de artículos');
var coste;
coste=parseInt(precio)*parseInt(cantidad);
document.write('El coste total es de ');
document.write(coste);
</script>

</body>
</html>
EJERCICIO 7
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 7</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var nota1;
var nota2;
var nota3;
nota1=prompt('Primera nota');
nota1=parseInt(nota1);
nota2=prompt('Segunda nota');
nota2=parseInt(nota2);
nota3=prompt('Tercera nota');
nota3=parseInt(nota3);
var suma;
suma=nota1+nota2+nota3;
var promedio;
promedio=suma/3;
if (promedio>=7)
{
document.write('Promocionado');
}
</script>

</body>
</html>

EJERCICIO 8
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 8</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var clave1;
var clave2;
clave1=prompt('Introduce una clave');
clave2=prompt('Repítela');
if (clave1==clave2)
{
document.write('Las dos claves coinciden');
}
</script>

</body>
</html>
EJERCICIO 9
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 9</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var num1,num2;
num1=prompt('Primer número');
num2=prompt('Segundo número');
num1=parseInt(num1);
num2=parseInt(num2);
if (num1>num2)
{

suma=num1+num2;
resta=num1-num2;
document.write('La suma es:'+suma);
document.write('La resta es:'+resta);
}
else
{

var multiplicacion=num1*num2;
var division=num1/num2;
document.write('El producto es '+multiplicacion);
document.write('<br>');
document.write('La división es:'+division);
}
</script>

</body>
</html>
EJERCICIO 10
<!--Daniel Rodríguez -->
<!DOCTYPE html>
<html>
<head>
<title>Ej10</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var nota1,nota2,nota3;
nota1=prompt('Primera nota');
nota1=parseInt(nota1);
nota2=prompt('Segunda nota');
nota2=parseInt(nota2);
nota3=prompt('Tercera nota');
nota3=parseInt(nota3);
var suma;
suma=nota1+nota2+nota3;
var media;
media=suma/3;
if (media>=6)
{
document.write('Bien');
}

else if(media>4 && media<6) {


document.write('Regular');
}
else
{
document.write('Mal');
}
</script>

</body>
</html>
EJERCICIO 11
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 11</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var num1
var num2
var num3
num1=prompt('Primer número');
num1=parseInt(num1);
num2=prompt('Segundo número');
num2=parseInt(num2);
num3=prompt('Tercer número');
num3=parseInt(num3);
if (num1<num2)
{
if (num1<num3)
{
document.write('El mayor de los tres es:'+num3);
}
else
{
document.write('El mayor de los tres es:'+num1);
}
}
else
{
if (num2<num3)
{
document.write('El mayor de los tres es:'+num3);
}
else
{
document.write('El mayor de los tres es:'+num2);
}
}
</script>

</body>
</html>
EJERCICIO 12
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio12</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var num;
num=prompt('Introduce un número entero:');
num=parseInt(num);
if (num==0)
{
document.write('El número ingresado es cero');
}
else
{
if (num>0)
{
document.write('Positivo');
}
else
{
document.write('Negativo');
}
}
</script>

</body>
</html>
EJERCICIO 13
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 13</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var num1
var num2
var num3
num1=prompt('Ingrese primer valor','');
num1=parseInt(num1);
num2=prompt('Ingrese segundo valor','');
num2=parseInt(num2);
num3=prompt('Ingrese tercer valor','');
num3=parseInt(num3);
if (num1==num2 && num1==num3)
{
var suma=(num1+num2)*num3;
document.write('La operación da:'+suma);
}
else
{ document.write('Los números son diferentes');}
</script>

</body>
</html>
EJERCICIO 14
<!--Daniel Rodríguez -->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 14</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var num1
var num2
var num3
num1=prompt('Primer número:');
num1=parseInt(num1);
num2=prompt('Segundo número:');
num2=parseInt(num2);
num3=prompt('Tercer número:');
num3=parseInt(num3);
if (num1<10 && num2<10 && num3<10)
{
document.write('Todos los números son menores a diez');
}
</script>

</body>
</html>
EJERCICIO 15
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 15</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var sueldo;
var antiguedad;
var sueldofinal;
sueldo=prompt('Sueldo');
sueldo=parseInt(sueldo);
antiguedad=prompt('Antigüedad:');
antiguedad=parseInt(antiguedad);
if (sueldo<500 && antiguedad>=10)
{

document.write('Aumento del 20%');


document.write('<br>');
sueldofinal=sueldo+sueldo*0.20;
document.write('El sueldo total es:'+sueldofinal);

}
else
{
if (sueldo<500 && antiguedad<10)
{
document.write('Aumento del 5%');
document.write('<br>');
sueldofinal=sueldo+sueldo*0.05;
document.write('El sueldo total es:'+sueldofinal);
}
else
{
document.write('El sueldo se queda igual:'+sueldo);
}
}
</script>
</body>
</html>
EJERCICIO 16
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 16</title>
<meta charset="UTF-8">
</head>
<body>

<script>
numero=prompt('Introduce un número');

if (numero % 2 == 0)

document.write('El numero '+(numero)+' es par');

else {document.write('El numero '+(numero)+' es impar');}

</script>

</body>
</html>

EJERCICIO 17

<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 17</title>
<meta charset="UTF-8">
</head>
<body>

<script>

mes=prompt('Introduce un mes')
mes=parseInt(mes);

switch (mes) {
case 1:
document.write("Enero");
break;
case 2:
document.write("Febrero");
break;
case 3:
document.write("Marzo");
break;
case 4:
document.write("Abril");
break;
case 5:
document.write("Mayo");
break;
case 6:
document.write("Junio");
break;
case 7:
document.write("Julio");
break;
case 8:
document.write("Agosto");
break;
case 9:
document.write("Septiembre");
break;
case 10:
document.write("Octubre");
break;
case 11:
document.write("Noviembre");
break;
case 12:
document.write("Diciembre");
break;

default:
document.write("Ese mes no existe");

</script>

</body>
</html>

EJERCICIO 18

<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 18</title>
<meta charset="UTF-8">
</head>
<body>

<script>

puntocardinal=prompt('Introduce el punto cardinal')

switch (puntocardinal) {
case 'Norte':
alert("El Norte de Castilla es un periódico español, publicado en
Valladolid. ");
break;
case 'Sur':
alert("El Sur es un periódico español de carácter regional
publicado en Málaga. ");
break;
case 'Este':
alert("La palabra «este» proviene del inglés antiguo east, el cual
a su vez deriva del protogermánico austra, y este del
protoindoeuropeo aus, que significa ‘aurora’.");
break;
case 'Oeste':
alert("Viejo Oeste, Antiguo Oeste, Salvaje Oeste, Lejano Oeste o
la Frontera (en inglés Old West, Wild West, Far West o The
Frontier) son los términos con que se denomina popularmente a los
hechos históricos (con sus personajes protagonistas) que tuvieron
lugar en el siglo XIX durante la expansión de la frontera de los
Estados Unidos de América hacia la costa del océano Pacífico.");
break;

default:
document.write("Por favor, introduce un punto cardinal");

</script>

</body>
</html>
Aplicaciones Web Lenguajes de script: JAVASCRIPT

APLICACIONES WEB
LENGUAJES DE SCRIPT: JAVASCRIPT

EJERCICIOS DE BUCLES

1.- Hacer un programa JavaScript que muestre los números pares del 2 al 100.

2.- Hacer un programa JavaScript que muestre la suma de los 100 primeros números naturales.

3.- Hacer un programa JavaScript que muestre los números impares menores de 100 y su suma total.

4.- Hacer un programa JavaScript que muestre los números del 100 al 0, en orden descendente.

5.- Hacer un programa JavaScript que muestre la tabla de multiplicar de un número que se pide por
pantalla.

6.- Hacer un programa JavaScript que muestre las tablas de multiplicar del 1 al 10.

7.- Hacer un programa JavaScript que muestre los primeros 20 números factoriales.

8.- Hacer un programa JavaScript que muestre los primeros 50 números impares en una tabla. Y su suma.

9.- Hacer un programa que capture un número entero y que calcule la suma de los números impares
menores que ese número. Además que calcule la suma de los pares. Sacar el resultado en una única línea.

10.- Hacer un programa que capture dos números enteros y que calcule la suma de los números pares
comprendidos entre esos dos números enteros capturados.

11.- Hacer un programa que capture un número entero, que será el número de líneas y que saque en cada
línea grupos de 4 asteriscos (solo se puede utilizar 1 asterisco en el programa). Por ejemplo:
* * * *
* * * *
* * * * etc..

12.- Hacer un programa que saque en cada línea grupos de 3 números naturales desde 1 al 30. Por
ejemplo:
1 2 3
4 5 6
7 8 9 etc…

13.- Hacer un programa que capture un número entero. Si es par debe mostrar los 5 números siguientes y
si es impar los 5 anteriores.

14.- Hacer un programa que pida 10 números (con un bucle), asegurándose de que se han digitado datos
numéricos, y obtener su suma y su media aritmética.
Después hacer lo mismo pero utilizando un ARRAY para almacenar los números.

1 de 2
Aplicaciones Web Lenguajes de script: JAVASCRIPT

15.- Hacer un programa que pida 10 números (con un bucle), asegurándose de que se han digitado datos
numéricos, después mostrar el texto “Ya se han introducido los 10 números, ahora voy a mostrarlos al
revés “ y después mostrar los números en orden inverso a como se han introducido.

16.- Hacer un programa que pida y almacene 10 números (con un bucle), después mostrar el texto “Ya se
han introducido los 10 números “ y después mostrar los números que sean múltiplos de 3.

17.- Hacer un programa que capture 4 números enteros y diga cual es el menor. Utilizar un bucle para
introducir los números y asegurarse de que son datos numéricos.
Después hacer lo mismo pero para 15 números (puedes usar o no un ARRAY para almacenar los
números).

2 de 2
EJERCICIO 1

<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1</title>
</head>
<body>
<script>
var i=2
for (i=2; i<=100; i++) {
if (i%2==0)
{
document.write(i)
document.write('<br>')
}

}
</script>
</body>
</html>

EJERCICIO 2
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1</title>
</head>
<body>
<script>
var i=0
var suma=0
for (i=0; i<=100; i++) {
var suma=suma+i
document.write(suma)
document.write('<br>')
}
</script>
</body>
</html>

</html>
EJERCICIO 3
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 3</title>
</head>
<body>
<script>
var i=0
var suma=0
for (i=0; i<=100; i++) {
if (i%2!=0)
{
document.write(i)
document.write('<br>')
suma=suma+i
}
}
document.write('La suma es ')
document.write(suma)
</script>
</body>
</html>
EJERCICIO 4
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 4</title>
</head>
<body>
<script>
var i=1
for (i=100; i>=0; i--) {
document.write(i)
document.write('<br>')}
</script>
</body>
</html>
EJERCICIO 5
<!--Daniel Rodríguez-->

<!DOCTYPE HTML>
<head>
<title>Ejercicio 5</title>
</head>
<body>
<script type= "text/javascript">
num=prompt('Introduce un número');
num=parseInt(num);
var i=0

document.write('Tabla del ');


document.write(num);
document.write('<br>');

for (i=0; i<=10; i++) {


document.write(num)
document.write('*')
document.write(i)
document.write('=')
document.write((num*i))
document.write('<br>')
}
i=i+1
i=0
num=num+1
</script>
</body>
</html>
EJERCICIO 6
<!--Daniel Rodríguez-->

<!DOCTYPE HTML>
<head>
<title>Ejercicio 6</title>
</head>
<body>
<script type= "text/javascript">
var num=1;
num=parseInt(num);
var i=0
var j=0;

for (j=0; j<=10; j++) {


document.write('Tabla del ' +j);
document.write('<br>');
for (i=0; i<=10; i++) {
document.write(j+'*'+i+'=' )
document.write((i*j))
document.write('<br>')
}
document.write('<br>')
}

//se crean dos bucles uno dentro de otro, el de fuera aumenta el


valor del primer número, y el de dentro del segundo; así se van
generando las tablas
</script>
</body>
</html>
EJERCICIO 7
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 7</title>
</head>
<body>
<script>
var num=20 //esta es la variable del numero a hacer el factorial
var suma=num
var i=0

document.write(num)
document.write('!=')
for (i=num-1; i>0; i--) {
if (i!=1)
document.write(+(i)+'*'); //esto sirve para que te ponga la
multiplicación y que quede maś estético
else
document.write(i + "="); //si ya se ha llegado al 1, te pone
el igual
suma=suma*i

}
document.write(suma)
</script>
</body>
</html>

</html>

EJERCICIO 8
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 8</title>
<meta charset="UTF-8">
</head>
<body>

<script>
document.write('<table border="1" width="50">')

document.write('<th> Impares</th>')
document.write('<th> Suma')
document.write('<tr>')
var num=1;
var suma=0;

for (i=1;i<=50; i++) {

if (i % 2 != 0)

{
document.write('<tr>')
document.write('<td>')
document.write(i) //hago que escriba el número, dentro de la tabla
document.write('</td>')
suma=suma+i

}
}
document.write('<td>')
document.write('La suma de los números es ')
document.write(suma)
document.write('</td>')
document.write('</table>')

</script>

</body>
</html>

EJERCICIO 9
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 9</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var i=0
var j=0
var sumaimpares=0
var sumapares=0
var numcomprobar=0 //he creado una variable para comprobar si es
par
var numcomprobar2=0 //he creado otra variable para el otro bucle,
de impares
num1=prompt('Introduce un número entero');
num1=parseInt(num1)

for (i=0;i<=num1; i++) {


numcomprobar=i

if (numcomprobar%2 !=0)
{

sumaimpares=sumaimpares+i

}
}

for (j=0;j<=num1; j++) {


numcomprobar2=j

if (numcomprobar2%2 ==0)
{

sumapares=sumapares+j

}
}
document.write('La suma de impares es ' +sumaimpares )
document.write(' y la de pares es '+sumapares)

</script>

</body>
</html>

EJERCICIO 10
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 10</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var numcomprobar; //esta variable es el número que iremos
comprobando si es par o impar
var sumapares=0; //esta variable sumará los números pares
comprendidos entre los números que pongamos
num1=prompt('Introduce un número entero');
num2=prompt('Introduce otro número entero');
num1=parseInt(num1)
num2=parseInt(num2)

for (i=num1;i<=num2; i++) {


numcomprobar=i
if (numcomprobar % 2 == 0)

document.write(numcomprobar+',')

sumapares=sumapares+numcomprobar

}
}
document.write ('...La suma es ' +sumapares)

</script>

</body>
</html>

EJERCICIO 11
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 11</title>
<meta charset="utf-8"
</head>
<body>
<script>
var i;
var j;
var nlin;
nlin=prompt('Número de líneas:')
nlin=parseInt(nlin)
for (i=1; i<=nlin; i++){ //saca tantas filas como le
indiquemos
for (j=0; j<4; j++){
document.write("*"); //escribe cuatro asteriscos
}
document.write("<br />");
}

</script>
</body>
</html>

</html>

</script>

</body>
</html>
EJERCICIO 12
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 12</title>
</head>
<body>
<script>
var i=1
for (i=1; i<=30; i++) {
document.write(i)
document.write(' ')
document.write(i+1)
document.write(' ')
document.write(i+2)
document.write('<br>')
i=i+2 //si la i vale 1 al principio del bucle, sacará 1,2,3; y
tengo que hacer que sumarle dos para que luego el bucle le sume
uno (1+3=4; y seguiría 4,5,6)
}
</script>
</body>
</html>

</html>

</script>

</body>
</html>
EJERCICIO 13
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 13</title>
<meta charset="UTF-8">
</head>
<body>
<script>

var numero=0
var i=0
numero=prompt('Introduce un número entero');
numero=parseInt(numero)

if (numero%2 ==0)
{ for (i=1;i<=5; i++) {
document.write(numero+i)
document.write(',')

}
}
else {for(i=1;i<=5;i++) {
document.write(numero-i)
document.write(',')
}
}
</script>

</body>
</html>
EJERCICIO 14
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 14</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var suma=0;
var i=0;
var media;
var numarray= new Array();

for (i=0;i<10; i++) {

var numero=parseInt(prompt('Introduce un número'))


if (isNaN(numero)) {
i=i-1 //hago que disminuuya en 1 el valor de la "i", así no lo
cuenta como un número
}
else
{
numarray[i]=numero //introduzco los datos del array en la variable
para operar mejor con ellos
var suma=suma+numero
var media=suma/10
}
}
document.write('La suma es ')
document.write(suma)
document.write('<br>')
document.write('La media es ')
document.write(media)
document.write('<br>')
document.write('Los números introducidos son ')
document.write(numarray)
</script>

</body>
</html>
EJERCICIO 15
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 15</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var numero=new Array();
var i=0;
var j=0;

for (i=0;i<10; i++) {


numero[i]=parseInt(prompt('Introduce un número'))
if (isNaN(numero[i])) {i=i-1}
}

alert ('Ya se han introducido los números, ahora voy a mostrarlos


al revés')
for (j=9;j>=0;j--) {

document.write(numero[j]+',')
}
</script>

</body>
</html>

EJERCICIO 16
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 16</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var numero=new Array();
var i=0;
var j=0;

for (i=0;i<10; i++) {


numero[i]=parseInt(prompt('Introduce un número'))
if (isNaN(numero[i])) {i=i-1}
else {
if ((numero[i]%3)==0) {
document.write(numero[i] +',' ) }
}
}

if (i=10) //le indico que cuando salga del bucle muestre el


mensaje
{alert('Ya se han introducido los diez números')}
</script>

</body>
</html>

EJERCICIO 17
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 17</title>
<meta charset="UTF-8">
</head>
<body>
<script>

var numero=new Array();


var i=0;
var maximo=100000; //le pongo un valor muy alto

for (i=0;i<15; i++) {


numero[i]=parseInt(prompt('Introduce un número'))
}

for (j=0;j<15;j++)
{ if (maximo>numero[j]) { //hago que si el numero alto es mayor
que el número del array el maximo sea ese numero, asi voy
ajustando el limite a los numeros que tengo
maximo=numero[j];

}
}
document.write(maximo)

//si quiero que en lugar de 15 números sean 3, cambio el valor de


i y j a 3 en los bucles.

</script>

</body>
</html>
Aplicaciones Web Lenguajes de script: JAVASCRIPT

APLICACIONES WEB
LENGUAJES DE SCRIPT: JAVASCRIPT

EJERCICIOS DE CADENAS

1. Programa que lee dos cadenas, pega la primera a la segunda y muestra el resultado por
pantalla.

2. Escribir un programa que pida varias cadenas de caracteres y las vaya mostrando en pantalla.
El programa terminará cuando se introduzca la cadena “salir”.

3. Programa que verifica la introducción de contraseñas. Devuelve 0 en caso de fallo y 1 en


caso de éxito. La contraseña es “abracadabra”.

4. Realizar un programa que reciba una cadena y devuelva el número de espacios blancos que
aparecen en ella.

5. Realizar una función que filtre una entrada de tipo entero, es decir que si se lee un número se
comprueba que no hay ningún carácter extraño en la entrada, devolviendo el número entero
los de funciones no
si la entrada es correcta. son
funciones,revisar
6. Realizar una función que copie una cadena en otra carácter a carácter.

7. Realizar una función que elimine los espacios blancos de una cadena leída por teclado
me queda hacerlo sin usar un
utilizando un bucle. Investiga como poner hacerlo sin usar un bucle. bucle
tendria qeu buscar con una
8. Crear una función que simule el funcionamiento de la función strrev, es decir
fucnion que invierta
la posicion de la cadena
una cadena. que es un espacio en blacno y
elimianrla
9. Realizar un programa que simule el funcionamiento de la función strupr, es decir, transforme
una cadena de caracteres a su equivalente en mayúsculas. Los caracteres en mayúsculas y los
caracteres no alfabéticos se deberán dejar igual.

10. Realizar un programa que a partir de una cadena de caracteres de cómo salida la misma
cadena pero con un espacio en blanco detrás de cada letra. Por ejemplo, para la entrada “hola
a todos” se obtendrá como salida “h o l a a t o d o s”.
OJO, detrás de los espacios blancos no debe aparecer ningún espacio blanco adicional.

11. Haz un programa que pida una cadena y dos posiciones, y devuelva la subcadena que está
entre esas dos posiciones.

Página 1
EJERCICIO 1
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var cadena1=prompt('Primera cadena')
var cadena2=prompt('Segunda cadena')
document.write(cadena1+cadena2)
</script>

</body>
</html>

EJERCICIO 2
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 2</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var cadena
var i=0
for (i=0; i<10000; i++) { //pongo un número alto para que podamos
escribir las palabras que queramos prácticamente

var cadena=prompt('Introduce cadena')


alert(cadena)
switch(cadena) {
case 'salir':
alert ('Se acabó')
i=10000
break;

</script>

</body>
</html>
EJERCICIO 3
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 3</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var pass='abracadabra'
var estado=0
var intento=prompt('Introduce contraseña')
var comprob
var i=0
for (i=0; i<1; i++) {
switch(intento) {
case 'abracadabra':
estado=1
comprob=10 //así hago que salga del bucle si es correcta
break;

}
if (comprob=10) {
document.write(estado)
}
}

</script>

</body>
</html>

EJERCICIO 4

<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 4</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var i=0
var num=0
var cadena=prompt('Introduce una cadena')
for (i=0;i<cadena.length;i++) {
if (cadena.substring(i,i+1)==' ') { //si es un espacio en blanco
var num=num+1 //aumento el contador
}
}
document.write(num)
</script>

</body>
</html>

EJERCICIO 5
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 5</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var i=0
function filtro(cadena){
for (i=0;i<1;i++){
if (isNaN(
(parseInt(cadena.substring(i,i+1))
)
)
)
{
document.write('La entrada no es correcta ')}

else {
cadena=parseInt(cadena)
document.write(cadena)}
}
}

cadena=prompt('Introduce un número')
filtro(cadena)

</script>

</body>
</html>
EJERCICIO 6
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 6</title>
<meta charset="UTF-8">
<script>
function copiacadena(cadena1) {
var cadena2=new String()
for (i=0;i<cadena1.length;i++)
{
trozo= cadena1.substring(i,i+1)
cadena2=cadena2+trozo
document.write(trozo)
document.write('<br>')

document.write('Esta es la demostración de que se copia carácter


por carácter la cadena:')
document.write('<br>')
document.write(cadena2)
}
</script>

</head>
<body>

<script>
copiacadena('otorrinolaringólogo')

</script>

</body>
</html>

EJERCICIO 7
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 7</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var i=0
function noblanco(cadena) {
for (i=0;i<cadena.length;i++) {
if (cadena.substring(i,i+1)==' ') { //si la cadena tiene un
espacio en blanco
document.write(cadena.substring(i+2,i+2)) //escribo justo lo
siguiente al espacio en blanco
}
else {document.write(cadena.substring(i,i+1)) //y si no, escribo
el valor que estoy leyendo
}
}
}
cadena=prompt('Introduce una cadena')
noblanco(cadena)
</script>

</body>
</html>

EJERCICIO 8
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 8</title>
<meta charset="UTF-8">
</head>
<body>

<script>
function invierte(cadena){
var i=0
for (i=cadena.length;i>0;i--) {
document.write(cadena.substring(i,i-1)) //recorro la cadena al
revés, y la voy escribiendo
}
}
invierte('patatas')
</script>

</body>
</html>

EJERCICIO 9
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 9</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var i=0
var cadena=prompt('Introduce una cadena')
document.write(cadena.toUpperCase()); //esta función transforma
los caracteres en minúsculas a a mayúsculas

</script>

</body>
</html>

EJERCICIO 10
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 10</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var i=0
var cadena=prompt('Introduce una cadena')
for (i=0;i<cadena.length;i++) {
document.write(cadena.substring(i,i+1))
document.write(' ') //introducimos un espacio en blanco por cada
posición de la cadena
}

</script>

</body>
</html>

EJERCICIO 11

<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 11</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var i=0
var cadena=prompt('Introduce una cadena')
var pos1=prompt('Posición1')
var pos2=prompt('Posicion2')

document.write(cadena.substring(pos1,pos2))

</script>

</body>
</html>
Aplicaciones Web Lenguajes de script: JAVASCRIPT

APLICACIONES WEB
LENGUAJES DE SCRIPT: JavaScript

EJERCICIOS DE EVENTOS

1) Diseñar la siguiente Web en la que, cada vez que se pulsa una tecla, aparece la ventana de la imagen
en la que se puede leer “Has pulsado”.

2) Diseñar la siguiente Web en la que, cuando el ratón pasa por encima de las imágenes de los colores,
se cambia el color de fondo al color por el que se ha pasado. El color de fondo inicial es el blanco
#FFFFFF. Las imágenes que se usan son white.gif, blue.gif, red.gif, yellow.gif y green.gif.

Página 1/5
Aplicaciones Web Lenguajes de script: JAVASCRIPT

3) Diseñar la siguiente Web de forma que, al pasar el ratón por encima de la imagen IMG2.GIF, dicha
imagen cambiará a IMG1.GIF. Cuando el ratón sale de la imagen, la página vuelve a su estado inicial
(se vuelve a ver la imagen IMG2.GIF).

4) Diseñar la siguiente página en la que se incluye un botón, una caja de texto, un texto normal y, en la
cuarta línea, aparece un texto que será el que controle la página. Las 3 primeras líneas desaparecen
cuando el ratón pasa por encima, y vuelven a aparecer cuando se hace click en la cuarta línea.

5) Diseñar la siguiente página Web de forma que, cuando se pasa el ratón por algún color, el color de
fondo cambia a dicho color. El color de fondo inicial será el blanco (#FFFFFF)

Página 2/5
Aplicaciones Web Lenguajes de script: JAVASCRIPT

6) Diseña un formulario donde se introduzca un texto y, debajo, aparezca el número de caracteres que
se han introducido.

7) Utilizando la función dada que genera un número aleatorio entre dos números dados, diseña una
página que pida dos números y genere un número aleatorio entre ellos.

Página 3/5
Aplicaciones Web Lenguajes de script: JAVASCRIPT

8) Crea una página como la que se muestra que cambie el color de fondo en función de la opción
seleccionada.

9) Crear una página que muestre un enlace con el texto “Pulsa aquí para cerrar esta página”, y, cuando
el usuario pulse, se debe cerrar la página actual y abrirse la página www.desarrolloweb.com

10) Hacer una página para probar varias de las capturas de eventos que hemos visto. Al menos debes
utilizar 5 “manejadores de eventos” distintos.

11) Crear una lista desplegable con 6 colores distintos, de forma que cuando el usuario pulse uno de estos
colores, se modifique el color de fondo de la página.

12) Haz una calculadora como la de la figura que funcione correctamente. Utilice la función EVAL para
calcular el resultado y la concatenación de cadenas.

13) Diseñar un test como el de la figura.

Página 4/5
Aplicaciones Web Lenguajes de script: JAVASCRIPT

Cuando se cargue el test debe aparecer un texto explicativo del funcionamiento del test como el que
se muestra a continuación:

Cuando se pulsa RESPUESTAS CORRECTAS aparecerá el siguiente texto:

Cuando se pulsa REINICIAR, aparecerá el siguiente mensaje:

Cuando se pulsa RESULTADO DEL TEST se muestra la siguiente información:

Página 5/5
EJERCICIO 1
<!--Daniel Rodríguez-->
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 1</title>
</head>
<body onkeypress="funcion()">
<script>
function funcion() {
alert ('Has pulsado') }
</script>
<br>
<br>
<hr>
<center>
<form name="formdani" action=''>
<br /> Cada vez que se pulse una tecla del teclado,se ejecuta la
instrucción de JavaScript
<br /><br />
</form>
<hr>
<center>
</body>
</html>
EJERCICIO 2
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Ejercicio 2</title>

<script type="text/JavaScript">
function changecolor(code) {
document.bgColor=code }
</script>
<body bgColor=#ffffff>
<h1>Evento "onMouseOver"</h1>
<hr>

<p>Uso del evento "onMouseOver" para cambiar el color de fondo


moviendo el ratón sobre la imagen</p>

<a onmouseover="changecolor('ffffff')">
<img height=20 hspace=10 src="blanco.jpg" width=20 vspace=10> </a>
<a onmouseover="changecolor('ff0000')">
<img height=20 hspace=10 src="rojo.jpg" width=20 vspace=10> </a>
<a onmouseover="changecolor('ffff00')">
<img height=20 hspace=10 src="amarillo.jpg" width=20 vspace=10>
</a>

<a onmouseover="changecolor('64fe2e')" href="http://www.">


<img height=20 hspace=10 src="verde.jpg" width=20 vspace=10></a>
<a onmouseover="changecolor('0000ff')" href="http://www.">
<img height=20 hspace=10 src="azul.png" width=20 vspace=10></a>
<hr>
</body>
</html>
EJERCICIO 3
<!--Daniel Rodríguez-->
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 3</title>
</head>
<body>
<center>
<a >
<img onmouseover=this.src="img2.gif"
onmouseout=this.src="img1.gif" height=200 hspace=10 src="img1.gif"
width=200 vspace=10> </a>
</form>
</body>
</html>
EJERCICIO 4
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Ejercicio 4</title>

<script type="text/javascript">
function out(magia)
{
magia.style.visibility="hidden"
}
function fin()
{
button.style.visibility="visible"
box.style.visibility="visible"
text.style.visibility="visible"
}
</script>
</head>
<body>
<input type=button id="button"
value="Botón que desaparece"
onmouseover="out(this)"><br><br>

<input type=text id="box"


value="Caja que desaparece"
onmouseover="out(this)"><br>

<p id="text"
onmouseover="out(this)">
Texto que desaparece </p><br>
<p onclick="fin()"> Pulsa aquí para que todo aparezca </p>
</body>
</html>
EJERCICIO 5
<!--Daniel Rodríguez-->

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Ejercicio 5</title>

<style>
table,th,td{border:4px solid black;border-collapse:collapse;}

</style>

<script type="text/JavaScript">
function changecolor(code) {
document.bgColor=code }
</script>
<body bgColor=#ffffff>
<p>Cambio dinámico de color <br>
<p>Al pasar el ratón sobre los elementos de color cambia el color
de fondo del documento (que vuelve a su color original cuando el
ratón deja de estar sobre el elemento)</p>

<table style="margin: 0 auto;width:350px;height:250px;font-


size:18px;border:2px solid black;">

<tr>
<th style="background-color:white;"
onmouseover="changecolor(white)"></th> <!--aquí no pongo la
propiedad onmouseout, porque el color ya es blanco -->
<th style="background-color:rgb(241,155,239);"
onmouseover="changecolor('#F19BEF')"
onmouseout="changecolor('white')"></th> <!--así el color vuelve al
original, en este caso blanco-->
<th style="background-color:rgb(158,155,241);"
onmouseover="changecolor('9E9BF1')"
onmouseout="changecolor('white')" ></th>
<th style="background-color:rgb(39,34,172);"
onmouseover="changecolor('#2722AC')"
onmouseout="changecolor('white')"></th>
</tr>

<tr>

<th style="background-color:rgb(90,84,236);"
onmouseover="changecolor('#5A54EC')"
onmouseout="changecolor('white')"></th>
<th style="background-color:rgb(136,10,54);"
onmouseover="changecolor('#880A36')"
onmouseout="changecolor('white')"></th>
<th style="background-color:gray;"
onmouseover="changecolor('#9A9898')"
onmouseout="changecolor('white')"></th>
<th style="background-color:rgb(244,188,210);"
onmouseover="changecolor('#F4BCD2')"
onmouseout="changecolor('white')"></th>

</tr>

<tr>
<th style="background-color:rgb(78,208,152);"
onmouseover="changecolor('#4ED098')"
onmouseout="changecolor('white')"></th>
<th style="background-color:rgb(205,204,190);"
onmouseover="changecolor('#CDCCBE')"
onmouseout="changecolor('white')"></th>
<th style="background-color:yellow;"
onmouseover="changecolor('#F3E30B')"
onmouseout="changecolor('white')"></th>
<th style="background-color:rgb(245,241,184);"
onmouseover="changecolor('#F5F1B8')"
onmouseout="changecolor('white')"></th>

</tr>

</table>
</body>
</html>
EJERCICIO 6
<!--Daniel Rodríguez-->
<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
<title> Ejercicio 6 </title>
</head>
<body>
<h1>Cuenta los caracteres escritos en un textarea</h1>
<form>
<table>
<tr>
<td>Texto:</td>
<td><textarea cols="40" rows="5" name="texto"
onKeyDown="characters()" onKeyUp="characters()"></textarea></td>
<!--llama a la función al presionar y soltar cualquier tecla, así
se actualiza al momento-->
</tr>
<tr>
<td>Caracteres:</td>
<td><input type="text" name=caracteres size=4></td>
</tr>
</table>
</form>
<script>
function characters(){

document.forms[0].caracteres.value=document.forms[0].texto.value.l
ength //cuenta los caracteres del text area
}
</script>
</body>
</html>
EJERCICIO 7
<!--Daniel Rodríguez-->
<html>
<head>
<title>Calculando aleatorios</title>
<script>
function aleatorio(menor,mayor){ //Menor es el número mayor
que ponagmos, y mayor el número mayor

numPosibilidades = mayor - menor //las posibilidades de


aleatoriedad serán la diferencia entre los dos
naleatorio = Math.random() * numPosibilidades //genero el
numero aleatorio, por ejemplo, entre 250 y 255 los números serán
0(250),1(251),etc.
return Math.round(parseInt(menor) + naleatorio) //sumo el
número aleatorio al número menor
}

function calcula_aleatorio_formulario(){
minimo = document.daniform.minimo.value //detecta el
valor mínimo del formulario
maximo = document.daniform.maximo.value //detecta el
valor máximo del formulario
resultado = aleatorio(minimo,maximo) //el resultado sale
de ejecutar la función aleatorio
document.daniform.resultado.value = resultado
}
</script>

</head>

<body>
<form name="daniform">
Primer número: <input type="text" name="minimo" size="5"
maxlength="5">
<br>
Segundo número: <input type="text" name="maximo" size="5"
maxlength="5">
<br>
<br>
<input type="button" value="calcular aleatorio"
onclick="calcula_aleatorio_formulario()">
<br>
<br>
Resultado aleatorio: <input type="text" name="resultado" size="5"
maxlength="5">
</form>

</body>
</html>
EJERCICIO 8
<!--Daniel Rodríguez-->
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 8</title>
<script>
function changecolor() {
if(formulario.elements[0].checked
)
{ document.bgColor='#FFFFFF'
}
if(formulario.elements[1].checked
)
{ document.bgColor='#F94A08'
}
if(formulario.elements[2].checked
)
{ document.bgColor='#08F946'
}
if(formulario.elements[3].checked
)
{ document.bgColor='#0000FF'
}
if(formulario.elements[4].checked
)
{ document.bgColor='#F9EA08'
}
if(formulario.elements[5].checked
)
{ document.bgColor='#51E7D3'
}
if(formulario.elements[6].checked
)
{ document.bgColor='#3C0CB4'
}
if(formulario.elements[7].checked
)
{ document.bgColor='#000000'

}
}

</script>
<body>
<div style="border:2px solid blue;width:100px;height:200px;">
<form method = "POST" name = "formulario">
<input type="radio" name="color" value="blanco" > Blanco<br>
<input type="radio" name="color" value="rojo" > Rojo<br>
<input type="radio" name="color" value="verde" > Verde<br>
<input type="radio" name="color" value="azul"> Azul<br>
<input type="radio" name="color" value="amarillo" > Amarillo<br>
<input type="radio" name="color" value="turquesa" >
Turquesa<br>
<input type="radio" name="color" value="morado" > Morado<br>
<input type="radio" name="color" value="negro"> Negro<br><br>
<input type="submit" value="Cambia color" name="enviar"
onmousedown="changecolor()">
</div>
</form>

</form>
</body>
</script>
</head>
</html>
EJERCICIO 9
<!--Daniel Rodríguez-->
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 9</title>
<a href="javascript:abrir('https://www.desarrolloweb.com')">Pulsa
aquí para cerrar esta página</a>
<script language=javascript>
function abrir(url){
window.close()
window.open(url, "Diseño Web", "width=2000, height=2000")
}
</script>
</head>
</html>

EJERCICIO 10
<!--Daniel Rodríguez-->
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 1</title>
</head>
<body>
<script>
function funcion() {
alert ('Has pulsado') }

function funcion2() {
alert ('Has hecho doble click') }

function funcion3() {
alert ('Has quitado el ratón') }

function funcion4() {
alert ('Has hecho un click') }

function funcion5() {
alert ('Has pulsado fuera del campo después de seleccionarlo') }

function funcion6() {
alert ('Has cambiado el contenido del campo') }
</script>

<center>
<form name="formdani" action='' onreset="alert('Has resetado')">
<br /> Al pulsar una tecla
<br /><br />
<input type="text" onkeypress="funcion()">

<br /> Al hacer doble click


<br /><br />
<input type="text" ondblclick="funcion2()">

<br /> Cuando quitas el ratón


<br /><br />
<input type="text" onmouseout="funcion3()">

<br /> Al hacer un click


<br /><br />
<input type="text" onclick="funcion4()">

<br /> Al deseleccionar el campo


<br /><br />
<input type="text" onblur="funcion5()">

<input type="reset">

</form>
<hr>
<center>
</body>
</html>
EJERCICIO 11
<!--Daniel Rodríguez-->
<html>
<head>
<title>Ejercicio 11</title>
<meta charset="utf-8">
<script type="text/JavaScript" language="JavaScript">
function col(){
if(formulario.elements[0].value=='verde') {
document.body.style.backgroundColor="green"
}

if(formulario.elements[0].value=='amarillo') {

document.body.style.backgroundColor="yellow"
}

if(formulario.elements[0].value=='azul') {

document.body.style.backgroundColor="blue"
}

if(formulario.elements[0].value=='naranja') {

document.body.style.backgroundColor="orange"
}

if(formulario.elements[0].value=='negro') {
document.body.style.backgroundColor="black"
}

if(formulario.elements[0].value=='blanco') {
document.body.style.backgroundColor="white"
}
}
</script>
</head>
<body>
<form method = "POST" name = "formulario" onsubmit="return
col(this);">
Introduce día de la semana:
<select name="escoger">
<option value="Debes escoger una opción" selected>Escoge una
opción
<option value="verde">Verde
<option value="amarillo">Amarillo
<option value="azul">Azul
<option value="naranja">Naranja
<option value="negro" >Negro
<option value="blanco">Blanco
</select>
<input type=submit value="Seleccionar" onmouseover="col()" >
</form>
</body>
</html>
EJERCICIO 12

<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio 12</title>
<!-- en el style asigno las propiedades para la caja donde se
muestra el resultado (cajanumero), los botones normales (boton) y
los botones especiales de las operaciones (boton funcion)-->
<style type="text/css">
.cajanumero {border: 1px solid black; width: 140px; height:
26px; font-size:22px; text-align: right; }
#calculadora {background:#D8D0CE;}
#calculadora td {padding: 4px;}
.boton {width: 24px; border: 1px solid #000; font-family:
Arial; font-size: 12px; cursor: hand; background-color: #fff;}
.funcion {font-weight: bold; color: #b00;}
</style>
<script>
//declaro las variables
var num1 = 0;
var num2 = 0;
var opera;

//Esta función si el número es cero lo coloca, y si no, concatena,


para que podamos meter números de más de una cifra:
function colocar(numero){
if(num1==0){
num1 = numero;
}else{
num1 =num1+numero;
}
refrescar();
}
//Cuando presionamos el botón C, la calculadora se resetea
function darC(){
num1 = 0;
num2 = 0;
refrescar();
}
//Dependiendo del botón que pulsemos se realiza una
operación u otra
function operar(valor){
if (num1 == 0){
num1 =
parseFloat(document.getElementById("total").value); //utilizo
parseFloat para poder usar decimales
}
num2 = parseFloat(num1);
num1= 0; //reinicio el valor de num1 para poder seguir
haciendo operaciones luego
operanum = valor; //guardo en la variable operanum el
valor del número que pulsemos
}
function esIgual(){
num1 = parseFloat(num1);
switch (operanum){
case 1:
eval(num1 =num1+num2); //suma
break;
case 2:
eval(num1 = -(num1 - num2)); //resta
break;
case 3:
eval(num1 *= num2); //multiplicación
break;
case 4:
eval(num1 = num2 / num1); //división
break;
}
refrescar();
num2 = parseFloat(num1);
num1 = 0; //num1 se queda en 0 para que se le puedan
asignar más valores en el futuro
}

function refrescar(){
document.getElementById("total").value = num1;
} //cuando se ejecuta esta función (en el igual, al
colocar un número y al pulsar el botón C), se actualiza la
información

</script>
</head>
<body>
<table id="calculadora">
<tr>
<td colspan="4">
<input type="text" id="total" maxlength="20"
value="0" class="cajanumero" readonly="true">
</td>
</tr>
<tr>
<td>
<input type="Button" id="1" value="1" class="boton"
onclick="colocar('1')">
</td>
<td>
<input type="Button" id="2" value="2" class="boton"
onclick="colocar('2')">
</td>
<td>
<input type="Button" id="3" value="3" class="boton"
onclick="colocar('3')">
</td>
<td>
<input type="Button" id="Sumar" value="+" class="boton
funcion" onclick="operar(1)">

</td>
</tr>
<tr>
<td>
<input type="Button" id="4" value="4" class="boton"
onclick="colocar('4')">
</td>
<td>
<input type="Button" id="5" value="5" class="boton"
onclick="colocar('5')">
</td>
<td>
<input type="Button" id="6" value="6" class="boton"
onclick="colocar('6')">
</td>
<td>
<input type="Button" id="Restar" value="-"
class="boton funcion" onclick="operar(2)">
</td>
</td>
</tr>
<tr>

<td>
<input type="Button" id="7" value="7" class="boton"
onclick="colocar('7')">
</td>
<td>
<input type="Button" id="8" value="8" class="boton"
onclick="colocar('8')">
</td>
<td>
<input type="Button" id="9" value="9" class="boton"
onclick="colocar('9')">
</td>
<td>
<input type="Button" id="Multiplicar" value="x"
class="boton funcion" onclick="operar(3)">
</td>
</tr>

<tr>
<td>
<input type="Button" id="C" value="C" class="boton
funcion" onclick="darC()">
</td>
<td>
<input type="Button" id="0" value="0" class="boton"
onclick="colocar('0')">
</td>
<td>
<input type="Button" id="igual" value="=" class="boton
funcion" onclick="esIgual()">
<td>
<input type="Button" id="Dividir" value="/"
class="boton funcion" onclick="operar(4)">
</td>
</tr>
</table>
</body>
</html>

EJERCICIO 13
<!--Daniel Rodríguez-->
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo Radio Button</title>
<script type="text/JavaScript" language="JavaScript">
function opcionPulsada( ){
var i;
for (i=0;i<document.formulario.opciones.length;i++)
if (document.formulario.opciones[i].checked) break;
alert(document.formulario.opciones[i].value);
}
function opcionPulsada2( ){
var i;
for (i=0;i<document.formulario.opciones2.length;i++)
if (document.formulario.opciones2[i].checked) break;
alert(document.formulario.opciones2[i].value);
}

function opcionPulsada3( ){
var i;
for (i=0;i<document.formulario.opciones3.length;i++)
if (document.formulario.opciones3[i].checked) break;
alert(document.formulario.opciones3[i].value);
}

function carga() {
var texto='Bienvenido al test de conocimientos
matemáticos.Seleccione las respuestas que crea correctas teniendo
en cuenta las siguientes consideraciones \n \n *1.- Los aciertos
tienen puntuaciones variables en función de la dificultad de la
pregunta. \n *2. Las preguntas no contestadas ni suman ni restan
puntos. \n *3. Las respuestas equivocadas restan más o menos
puntos en función del tipo de fallo. \n\n NOTA: \n El test que va
a realizar a continuación carece de rigor científico. Únicamente
se utiliza para mostrar una posibilidad más de la programación en
Javascript. \nGRACIAS.'
alert (texto)
}

function correctas() {
alert ('RESPUESTAS CORRECTAS:\n\n1:A 6:A 11:B \n2:B 7:B 12:A\n3:B
8:A 13:B\n4:C 9:A 14:C \n5:B 10:C 15:A')
}

function reseteo() {
alert ('¡ATENCIÓN! Los datos del test se van a reiniciar')
}

var correcto=0;
var sincontestar=0;

function final() {

if (document.formulario.opciones.value=='a')
{correcto=correcto+1;}
if((formulario.opciones.value==''))
{sincontestar=sincontestar+1;}

if (document.formulario.opciones2.value=='b')
{correcto=correcto+1;
}
if((formulario.opciones2.value==''))
{sincontestar=sincontestar+1;}

if (document.formulario.opciones3.value=='b')
{correcto=correcto+1;
}
if((formulario.opciones3.value==''))
{sincontestar=sincontestar+1;}
alert('Su puntuación es de '+(correcto))

alert ('El número máximo de puntos que podía conseguir era de 3')
alert ('Ha dejado sin contestar '+(sincontestar))
sincontestar=0
alert('Su porcentaje de aciertos es de '+(correcto*100/3)+'%')

if (correcto==3){alert('SOBRESALIENTE. Sus conocimientos de


matemáticas son excelentes')
}
if (correcto==2){alert('NOTABLE. Sus conocimientos de matemáticas
son considerables')
}
if (correcto==1){alert('APROBADO. Sus conocimientos de matemáticas
son suficientes')
}
if (correcto==0){alert('SUSPENSO. Sus conocimientos de matemáticas
no son suficientes.')
}
correcto=0
}

//if((formulario.elements[0].value==''))
//{contadorerrores=contadorerrores+1; alert('El nombre está en
blanco')}
</script>
</head>
<body onload="return carga()" style="background-color:#FAFAFA;">
<p style="color:blue;font-weight:bold">1. ¿Cuántas rectas pasan
por un punto? </p>
<form name=formulario action=#>
<input type="Radio" name="opciones" value="a"> A.Infinitas<br />
<input
type="Radio" name="opciones" value="b"> B.Dos<br
/>
<input
type="Radio" name="opciones" value="c"> C.Depende del tamaño del
punto<br
/>
<hr>
<p style="color:blue;font-weight:bold"> 2. Por un punto del
espacio, ¿cuántas rectas paralelas a una pueden trazarse? </p>
<form name=formulario action=#>
<input type="Radio" name="opciones2" value="a"> A. Ninguna<br />
<input
type="Radio" name="opciones2" value="b"> B. Una<br
/>
<input
type="Radio" name="opciones2" value="c"> C. Infinitas.<br
/>
<hr>

<p style="color:blue;font-weight:bold"> 3.Determine el resultado


de la siguiente ecuación: 7x-28=6x-1 </p>
<form name=formulario action=#>
<input type="Radio" name="opciones3" value="a"> A. x=29<br />
<input
type="Radio" name="opciones3" value="b"> B. x=27<br
/>
<input
type="Radio" name="opciones3" value="c"> C. x=16<br
/>
<hr>

<input type="Button" name="boton" value="Resultado del test"


onclick="final( )">

<input type="reset" name="boton" value="Reiniciar test"


onclick="reseteo( )">

<input type="Button" name="boton" value="Respuestas correctas"


onclick="correctas( )">

</form>
</body>
</html>
Aplicaciones Web Lenguajes de script: JAVASCRIPT

APLICACIONES WEB
LENGUAJES DE SCRIPT: JAVASCRIPT

EJERCICIOS DE FORMULARIOS

1.- Hacer un formulario Web con 4 campos: nombre, apellidos, DNI y teléfono. No se debe permitir que
pueda enviar la información si alguno de los campos ha quedado en blanco.

2.- Añadir al formulario anterior el campo edad. Comprobar que el valor que hemos introducido en este
campo es de tipo numérico.

3.- Sobre el formulario anterior, comprobar que el valor que hemos introducido para el DNI y para el
teléfono tiene el formato correcto.

4.- Sobre el formulario anterior, añadir un nuevo campo (e-mail) y comprobar que el valor que hemos
introducido para dicho campo tiene un formato de correo electrónico válido.

5.- Hacer un formulario Web con 4 campos: nombre, apellidos, DNI y teléfono. No se debe permitir que
pueda enviar la información si alguno de los campos ha quedado en blanco, indicando el campo que no se ha
rellenado (usando la notación de vectores: formulario.elements[i] ).

6.- Hacer un formulario Web con 4 campos: nombre, apellidos, DNI y teléfono. Validar el formulario
mostrando por pantalla el nombre, el tipo, el valor y la longitud marcada de cada uno de los campos (usando
la notación de vectores: formulario.elements[i] ).

7.- Hacer un formulario Web con 1 campo para capturar un “rango de edad” de tipo radio que tenga las
siguientes opciones: < 18 años, entre 18 y 45, entre 45 y 65, > 65. Verificar que se ha marcado una y mostrar
el valor de ese campo.

8.- Hacer un formulario Web con 1 campo para seleccionar entre una lista de los días de la semana. Al pulsar
sobre un botón de “He terminado” verificar la opción marcada y mostrarla por pantalla. Si no se hubiera
marcado ninguna, mostrar una “alerta”.

1 de 1
FORMULARIOS

EJERCICIO 1
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1</title>
<meta charset="UTF-8">
</head>
<body>
<form method = "POST" name = "formulario" onSubmit = "return
validar(this)"
action = "formularios.asp">

Nombre: <input type="text" required name="nombre" size="12">


Apellidos: <input type="text" required name="apellidos" size="16">
DNI: <input type="text" required name="dni" size="8">
Teléfono: <input type="text" required name="telefono" size="12">
<input type="submit" value="Enviar datos" name="enviar">
</form>
</body>
</html>
EJERCICIO 2
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>Ejercicio 2</title>
<script>
function Valida(formulario) {
if (isNaN(parseInt(formulario.edad.value))) {
alert('El campo edad debe ser un número');
return false;
}
return true
}
</script>
</head>

<body>
<form method = "POST" name = "formulario" onSubmit="return
Valida(this);">

Nombre: <input type="text" required name="nombre" size="12">


Apellidos: <input type="text" required name="apellidos" size="16">
DNI: <input type="text" required name="dni" size="8">
Teléfono: <input type="text" required name="telefono" size="12">
Edad: <input type="text" required name="edad" size="2">
<input type="submit" value="Enviar datos" name="enviar">
</form>
</body>
</html>
EJERCICIO 3
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>Ejercicio 3</title>
<script>
function Valida(formulario) {
if (isNaN(parseInt(formulario.edad.value)))
{ //compruebo que sea un numero
alert('El campo edad debe ser un número');
return false;
}

var dni=/^\d{8}[a-zA-Z]$/

if (!(dni.test(formulario.dni.value))) { //compruebo si el
DNI es válido
alert('No es un DNI válido');

return false;
}
var telefono=/^\d{9}$/
if (!(telefono.test(formulario.telefono.value))) {
//compruebo si el teléfono es válido
alert('No es un teléfono válido');
return false; }

return true;
}

</script>
</head>

<body>
<form method = "POST" name = "formulario" onSubmit="return
Valida(this);">

Nombre: <input type="text" required name="nombre" size="12">


Apellidos: <input type="text" required name="apellidos" size="16">
DNI: <input type="text" required name="dni" size="8">
Teléfono: <input type="text" required name="telefono" size="12">
Edad: <input type="text" required name="edad" size="2">
<input type="submit" value="Enviar datos" name="enviar">

</form>
</body>
</html>
EJERCICIO 4
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>Ejercicio 4</title>
<script>
function Valida(formulario) {
if (isNaN(parseInt(formulario.edad.value))) {
alert('El campo edad debe ser un número');
return false;
}

var dni=/^\d{8}[a-zA-Z]$/

if (!(dni.test(formulario.dni.value))) { //compruebo el
DNI
alert('No es un DNI válido');

return false;
}
var telefono=/^\d{9}$/
if (!(telefono.test(formulario.telefono.value))) {
//compruebo el teléfono
alert('No es un teléfono válido');
return false; }

var email= /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/


//compruebo el email
if (!(email.test(formulario.email.value))) {
alert('No es un email válido');
return false;
}
return true;
}

</script>
</head>

<body>
<form method = "POST" name = "formulario" onSubmit="return
Valida(this);">

Nombre: <input type="text" required name="nombre" size="12">


Apellidos: <input type="text" required name="apellidos" size="16">
DNI: <input type="text" required name="dni" size="8">
Teléfono: <input type="text" required name="telefono" size="12">
Edad: <input type="text" required name="edad" size="2">
<input type="submit" value="Enviar datos" name="enviar">
<br> <br>
Email: <input type="text" required name="email" size="20">
</form>
</body>
</html>
EJERCICIO 5
<!--Daniel Rodríguez-->

<html>
<head>
<title>Ejercicio 5</title>
<script type="text/JavaScript" language="JavaScript">
function dimePropiedades( ){
contadorerrores=0 //creo una variable contador, para ver cuántos
campos se dejan en blanco. Si no se deja ninguno, se enviará el
formulario.
if((formulario.elements[0].value==''))
{contadorerrores=contadorerrores+1; alert('El nombre está en
blanco')}

if((formulario.elements[1].value==''))
{contadorerrores=contadorerrores+1;alert('Los apellidos están en
blanco')}

if((formulario.elements[2].value==''))
{contadorerrores=contadorerrores+1;alert('El DNI está en blanco')}

if((formulario.elements[3].value==''))
{contadorerrores=contadorerrores+1;alert('El teléfono está en
blanco')}

if (contadorerrores==0)
{document.write('Tu formulario ha sido enviado')}
else
{alert ('Deberías completar esos campos')}
}
</script>
</head>
<body>
<form method = "POST" name = "formulario" onSubmit="return
dimePropiedades(this);">

Nombre: <input type="text" name="nombre" size="12">


Apellidos: <input type="text" name="apellidos" size="16">
DNI: <input type="text" name="dni" size="8">
Teléfono: <input type="text" name="telefono" size="12">
<input type="submit" value="Enviar datos" name="enviar">
</form>
</body>
</html>
EJERCICIO 6
<!--Daniel Rodríguez-->

<html>
<head>
<title>Ejercicio 6</title>
<script type="text/JavaScript" language="JavaScript">
function dimePropiedades( ){
var texto='Nombre: ' +formulario.elements[0].name
var texto2='Tipo: ' +formulario.elements[0].type
var texto3='Valor: ' +formulario.elements[0].value
var texto4='Longitud: ' +formulario.elements[0].value.length

var texto5='Nombre: ' +formulario.elements[1].name


var texto6='Tipo: ' +formulario.elements[1].type
var texto7='Valor: ' +formulario.elements[1].value
var texto8='Longitud: ' +formulario.elements[1].value.length

var texto9='Nombre: ' +formulario.elements[2].name


var texto10='Tipo: ' +formulario.elements[2].type
var texto11='Valor: ' +formulario.elements[2].value
var texto12='Longitud: ' +formulario.elements[2].value.length

var texto13='Nombre: ' +formulario.elements[3].name


var texto14='Tipo: ' +formulario.elements[3].type
var texto15='Valor: ' +formulario.elements[3].value
var texto16='Longitud: ' +formulario.elements[3].value.length

var texto17='Nombre: ' +formulario.elements[4].name


var texto18='Tipo: ' +formulario.elements[4].type
var texto19='Valor: ' +formulario.elements[4].value
var texto20='Longitud: ' +formulario.elements[4].value.length
var
textofinal=texto+'<br>'+texto2+'<br>'+texto3+'<br>'+texto4+'<br><b
r>'+texto5+'<br>'+texto6+'<br>'+texto7+'<br>'+texto8+'<br><br>'+te
xto9+'<br>'+texto10+'<br>'+texto11+'<br>'+texto12+'<br><br>'+texto
13+'<br>'+texto14+'<br>'+texto15+'<br>'+texto16+'<br><br>'+texto17
+'<br>'+texto18+'<br>'+texto19+'<br>'+texto20+'<br>'
document.write(textofinal)

//Voy creando varias variables de texto, según lo que me van


pidiendo, y en la variable textofinal junto todo.

}
</script>
</head>
<body>
<form method = "POST" name = "formulario" onSubmit="return
dimePropiedades(this);">

Nombre: <input type="text" required name="nombre" size="12">


Apellidos: <input type="text" required name="apellidos" size="16">
DNI: <input type="text" required name="dni" size="8">
Teléfono: <input type="text" required name="telefono" size="12">
Edad: <input type="text" required name="edad" size="2">
<input type="submit" value="Enviar datos" name="enviar">
</form>
</body>
</html>
EJERCICIO 7
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<title>Ejercicio 7</title>

<form method = "POST" name = "formulario" onSubmit="return


Valida(this);">

Rango de edad <br>


<input type="radio" name="edad" onclick="Valida(formulario)"
id="<18"><18<br>
<input type="radio" name="edad" onclick="Valida(formulario)"
id="18-45">18-45<br>
<input type="radio" name="edad" onclick="Valida(formulario)"
id="45-65">45-65<br>
<input type="radio" name="edad" onclick="Valida(formulario)"
id=">65">>65<br>
<input type="submit" value="Enviar datos" name="enviar">

</form>

<script>
function Valida(formulario) {

var marcado = 0;
for (var i = 0; i < formulario.edad.length; i++) {
if ( formulario.edad[i].checked==true) marcado=i; //si está
marcada la opción, detecta la posición
}

alert (document.formulario.edad[marcado].id) //muestra el valor


if(marcado == 0 && formulario.edad[0].checked==false) { // si no
está marcada ninguna, muestra un mensaje
alert("Tienes que marcar una opción(la opción por defecto es
<18)");
return (false);
}
return (true);
}

</script>

</body>
</html>
EJERCICIO 8
<!--Daniel Rodríguez-->
<html>
<head>
<title>Ejercicio8</title>
<script type="text/JavaScript" language="JavaScript">
function diasemana( ){
var texto;
var indice = document.form.escoger.selectedIndex;
var valor = document.form.escoger.options[indice].value;
texto = "Día de la semana nº: " + valor;
var mostrar= document.form.escoger.options[indice].text;
texto += "\nEs: " + mostrar;
alert(texto);
}
</script>
</head>
<body>
<form action=# name="form">
Introduce día de la semana:
<select name="escoger">
<option value="¿?" selected>Escoge una opción
<option value="1">Lunes
<option value="2">Martes
<option value="3">Miércoles
<option value="4">Jueves
<option value="5">Viernes
<option value="6">Sábado
<option value="7">Domingo
</select>
<br /><br />
<input type=button value="He terminado" onclick="diasemana()">
</form>
</body>
</html>
Aplicaciones Web Lenguajes de script: JAVASCRIPT

APLICACIONES WEB
LENGUAJES DE SCRIPT: JAVASCRIPT

EJERCICIOS DE FUNCIONES

1.- Hacer un programa JavaScript que contenga una función DibujaDosRayas que saque por
pantalla 2 rayas separadas por una línea en blanco. Declarar la función en la sección <head>
del documento web y luego llamarla tres veces desde la sección <body> del mismo.

2.- Hacer un programa JavaScript que contenga una función MaquetaTitulo que reciba un
texto cualquiera y lo saque por pantalla en negrita, centrado y en un tamaño superior. Declarar
la función en la sección <head> del documento web y luego llamarla dos veces desde la
sección <body> del mismo.

3.- Hacer un programa JavaScript que contenga una función DibujaCuadrado que reciba dos
parámetros: un carácter (que puede ser cualquiera) y un número. La función debe mostrar por
pantalla un cuadrado dibujado con el carácter recibido (tantas filas y columnas como indique
el número).
Desde el body pedir por pantalla el carácter y el número; y llamar a la función pasándole estos
datos.
Ejemplo: DibujaCuadrado ("#",3)
###
###
###

3.1.- Modifica el código anterior para validar que realmente el usuario nos da un
número, para ello implementa la función PideNumero.

3.2.- Modifica el código anterior para realizar la función DibujaRectangulo que reciba
tres parámetros: un carácter (que puede ser cualquiera) y dos números para indicar el
nº de filas y el de columnas.

4.- Hacer un programa JavaScript que contenga una función Piramide que reciba 2
parámetros: un carácter (que puede ser cualquiera) y un número; la función debe mostrar por
pantalla una pirámide invertida con el carácter recibido (tantas filas y columnas como indique
el número, y de ahí descendiendo hasta 1).
Desde el programa pedir por pantalla el carácter y el número; y llamar a la función pasándole
estos datos.
function
Ejemplo: piramide(“@”,4) revisar este ejercicio PIdeNumero
@@@@ do
@@@ n=parse
parseInt
@@ while numero is
@ Nan
return n
Dibujacuadrado (concat,num);
1 de 2 a
tambien se puede hacer quitando num(pidenumero) y llamando directamente
DibujaCuadrado(caracter,numero)
Aplicaciones Web Lenguajes de script: JAVASCRIPT

5.- Hacer un programa JavaScript que contenga una función CalculaMedia que reciba tres
números como parámetros y devuelva el valor medio de los tres parámetros recibidos. Luego
desde el documento Web dar valores a tres variables y llamar a la función. Después pedir tres
valores por pantalla y volver a llamar a la función con esos datos.

6.- Hacer un programa con JavaScript que contenga una función llamada EsPrimo que reciba
un número como parámetro y devuelva 1 si es primo y 0 en caso contrario.
Usar esa función para mostrar por pantalla los 30 primeros números primos.

7.- Hacer una página con JavaScript que contenga una función DameElTiempo que reciba dos
parámetros: el tiempo que hizo ayer y el tiempo que hace hoy. Hay tres posibilidades: SOL,
NUBLADO, LLUVIA. Y en función del tiempo de ayer y el tiempo de hoy devuelva la
predicción para mañana. Esta predicción se basa en la siguiente tabla:
AYER, HOY → MAÑANA
SOL, SOL → SOL
NUBLADO, NUBLADO → NUBLADO
LLUVIA, LLUVIA → LLUVIA
SOL, NUBLADO → NUBLADO
NUBLADO, SOL → SOL
SOL, LLUVIA → NUBLADO
LLUVIA, SOL → NUBLADO
NUBLADO, LLUVIA → LLUVIA
LLUVIA, NUBLADO → NUBLADO
En el documento Web llamar a esta función con varios valores diferentes.

8.- Hacer una página con JavaScript que contenga una función CuentaVocales que reciba una
cadena de texto y devuelva el número de vocales que tiene la cadena (recordad que una
cadena de texto se comporta como un vector de caracteres).
Llamar a esta función desde el documento Web.

9.- Hacer un programa JavaScript que muestre cuantos números pares hay entre 2 números
dados y su suma. Y lo mismo para los impares. Sacar los resultados en una tabla. Realizarlo
con 2 funciones diferentes para pares e impares y ver lo que se obtiene cuando los números
dados son 10 y 100.

2 de 2
FUNCIONES

EJERCICIO 1

<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 1</title>
<meta charset="UTF-8">
<script>
function DibujaDosRayas() {
document.write('<hr>')
document.write('<br>')
document.write('<hr>')
}
</script>
</head>
<body>
<script>
DibujaDosRayas()
DibujaDosRayas()
DibujaDosRayas()
</script>
</body>
</html>

EJERCICIO 2
<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<style>
body{text-align:center;font-size:40px;}
</style>
<title>Ejercicio 2</title>
<meta charset="UTF-8">
<script>
function Maquetatitulo(texto) {
document.write('<b>'+texto+'</b>')
document.write('<br>')
}
</script>
<body>
<script>
texto=prompt('Introduce un texto')
Maquetatitulo(texto);
Maquetatitulo(texto);
</script>
</body>
</html>

EJERCICIO 3

<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 3.1</title>
<meta charset="UTF-8">
<script>
var caracter;
var numero;
var i=0;
var j=0;

function DibujaCuadrado(caracter) {
for (j=0;j<numero;j++) {
document.write('<br>')
for (i=0;i<numero;i++) {
document.write(caracter)
}
}
}
function PideNumero(numero) {
if (isNaN(numero)) {
i=100
document.write('No es un número. Recarga la página')} //si es un
número, no deja continuar
}
</script>
<body>
<script>
caracter=prompt('Caracter')
numero=prompt('Numero')
numero=parseInt(numero)
PideNumero(numero);
DibujaCuadrado(caracter);
</script>
</body>
</html>

EJERCICIO 3.2

<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 3.2</title>
<meta charset="UTF-8">
<script>
var caracter;
var numero;
var i=0;
var j=0;
caracter=prompt('Caracter')
numero=parseInt(numero)
function DibujaRectangulo() {
for (j=0;j<numerofilas;j++) {
document.write('<br>')
for (i=0;i<numerocolumnas;i++) {
document.write(caracter)
}
}
}
</script>
<body>
<script>
numerofilas=prompt('Numero de filas')
numerocolumnas=prompt('Numero de columnas')
DibujaRectangulo(numerofilas,numerocolumnas);
</script>

</body>
</html>

EJERCICIO 3

<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 3</title>
<meta charset="UTF-8">
<script>
var caracter;
var numero;
var i=0;
var j=0;
caracter=prompt('Caracter')
numero=prompt('Numero')
numero=parseInt(numero)
function DibujaCuadrado() {
for (j=0;j<numero;j++) {
document.write('<br>')
for (i=0;i<numero;i++) {
document.write(caracter)
}
}
}
</script>
<body>
<script>
DibujaCuadrado();
</script>
</body>
</html>

EJERCICIO 4

<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 4</title>
<meta charset="UTF-8">
<script>
var caracter;
var numero;
var i=numero;
var j=1;

function Piramide(caracter,numero) {
k=numero
for (j=1;j<=numero;j++) {
for (i=k;i>=1;i--) {
document.write(caracter)
}
document.write('<br>') //hago que haga un salto de línea y que
vaya disminuyendo el contador para que cada vez saque menos líneas
k=k-1
}
}

</script>
<body>
<script>
Piramide(4,12)
</script>
</body>
</html>

EJERCICIO 5

<!--Daniel Rodríguez-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 5 </title>
<script>

function CalculaMedia(num1,num2,num3) {
document.write('La media de los números es '+((num1+num2+num3)/3))
document.write('<br>')
}

</script>
</head>
<body>
<script>
CalculaMedia(10,20,30);

n1=prompt('Nº1')
n1=parseInt(n1)
n2=prompt('Nº2')
n2=parseInt(n2)
n3=prompt('Nº3')
n3=parseInt(n3)
CalculaMedia(n1,n2,n3);

</script>
</body>
</html>

EJERCICIO 6

<!--Daniel Rodríguez-->

<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 6</title>
<meta charset="UTF-8">

<body>
<script>

function EsPrimo(numero) { //creo la función EsPrimo


var l=2 //empezamos a contar desde el 2, porque aunque sea
divisible entre 1 puede ser primo
for (l=2;l<numero;l++){
if ((numero%l)==0) //si el resto de la división es cero
return false; //devuelve falso, ya que no es primo si es divisible
por números diferentes entre sí mismo y uno
}

return true; //devuelve verdadero si solo es divisible entre 1 y


sí mismo
}

var y=0 //esta variable empieza desde cero

function Primos () {
var j=0 //declaro la variable j, que será un contador
for (y=2;j<30;y++){
if (EsPrimo(y)) {
document.write(y) //si el número es primo lo escribe
document.write('<br>') //deja un salto de línea

j=j+1; //aumento el contador


}
}
}
</script>
</head>

<body>
<script>
if(EsPrimo(71)) {document.write('1' +'<br>')} else
{document.write('0' + '<br>')}
//esta línea es para que introduzcas el número en el documento web
// y te escriba 1 si es primo y 0 si no lo es
document.write('<b>'+'*NÚMEROS PRIMOS DEL 1 AL 30*'
+'<br>'+'</b>') //encabezado
Primos() //llamo a la función para los números del 1 al 30
</script>

</body>
</html>

EJERCICIO 7

<!--Daniel Rodríguez-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 7 </title>
<script>
function tiempo(ayer,hoy) { //contemplo todas las posibilidades
usando estructuras condicionales
if (ayer=='AYER')
{if (hoy=='HOY')
{ document.write('MAÑANA')}
}

if (ayer=='SOL')
{if (hoy=='SOL')
{ document.write('SOL')}
}

if (ayer=='NUBLADO')
{if (hoy=='NUBLADO')
{ document.write('NUBLADO')}
}

if (ayer=='LLUVIA')
{if (hoy=='LLUVIA')
{ document.write('LLUVIA')}
}

if (ayer=='SOL')
{if (hoy=='NUBLADO')
{ document.write('NUBLADO')}
}

if (ayer=='NUBLADO')
{if (hoy=='SOL')
{ document.write('SOL')}
}

if (ayer=='SOL')
{if (hoy=='LLUVIA')
{ document.write('NUBLADO')}
}

if (ayer=='LLUVIA')
{if (hoy=='SOL')
{ document.write('NUBLADO')}
}

if (ayer=='NUBLADO')
{if (hoy=='LLUVIA')
{ document.write('LLUVIA')}
}

if (ayer=='LLUVIA')
{if (hoy=='NUBLADO')
{ document.write('NUBLADO')}
}
}
</script>
</head>
<body>
<script>
tiempo('AYER','HOY')
</script>
</body>
</html>

EJERCICIO 8

<!--Daniel Rodríguez-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 8 </title>
<script>
i=0
contador=0

function Cuentavocales(cadena) {

for (i=0;i<cadena.length;i++)
{
switch (cadena.substring(i,i+1)) { //he hecho un switch
contemplando todas las posibilidades, tanto mayúsculas como
minúsculas
case 'a':
contador=contador+1
break;
case 'e':
contador=contador+1 //otra opción habría sido convertir a
mayúsculas todo independientemente de lo que se haya escrito, así
se simplifica
break;
case 'i':
contador=contador+1
break;
case 'o':
contador=contador+1
break;
case 'u':
contador=contador+1
break;
case 'A':
contador=contador+1
break;
case 'E':
contador=contador+1
break;
case 'I':
contador=contador+1
break;
case 'O':
contador=contador+1
break;
case 'U':
contador=contador+1
break;
}
}

document.write(contador)
}

</script>
</head>
<body>
<script>
cadena=prompt('introduce cadena')
Cuentavocales(cadena)
</script>
</body>
</html>
EJERCICIO 9

<!--Daniel Rodríguez
NOTA: Entre 2 y 10 por ejemplo hay 5 números pares (2,4,6,8,10)-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 9 </title>
<script>

function pares(num1,num2) {
document.write('<table border="1" width="50">')

document.write('<th> Pares</th>')
document.write('<th> Suma')
document.write('<tr>')

var cuentapares=0
var sumapares=0

for (i=num1;i<=num2;i++){
if (num1 % 2==0)
{

cuentapares=cuentapares+1 //hago un contador para los pares


sumapares=sumapares+num1 //sumo los pares que haya
}
num1=num1+1
}

document.write('<br>')
document.write('<tr>')
document.write('<td>')

document.write('Hay ' +cuentapares +' números pares')


document.write('</td>')
document.write('<td>')

document.write('<br>')
document.write('La suma es ' +sumapares)
}

function impares(num1,num2) {

var cuentaimpares=0
var sumaimpares=0

for (i=num1;i<=num2;i++){
if (num1 % 2!=0)
{

cuentaimpares=cuentaimpares+1 //hago un contador para los impares


sumaimpares=sumaimpares+num1 //sumo los números impares que haya
}
num1=num1+1
}
document.write('<br>')
document.write('<tr>')
document.write('<td>')
document.write('Hay ' +cuentaimpares +' números impares')
document.write('</td>')
document.write('<td>')
document.write('La suma es ' +sumaimpares)
}
</script>
</head>
<body>
<script>

pares(10,100)
document.write('<br>')
impares(10,100)

</script>
</body>
</html>
Aplicaciones Web Lenguajes de script: JAVASCRIPT

APLICACIONES WEB
LENGUAJES DE SCRIPT: JAVASCRIPT

RELACIÓN DE EJERCICIOS (VARIOS)


EJERCICIOS BÁSICOS

0) Hacer un programa JavaScript que muestre por pantalla el mensaje “Buenos días” dentro de un cuadro
de diálogo.

1) Confeccionar una programa en JavaScript que defina e inicialice una variable real donde almacenar un
importe y otra de tipo cadena de caracteres donde almacenaremos la ciudad. Imprimir cada variable en
una línea distinta en pantalla.

2) Confeccionar un programa que permita definir e inicializar variables con el nombre de un usuario y su
email. Mostrar posteriormente los datos en la página HTML.

3) Usando una variable inicializada con el lado de un triángulo equilátero, mostrar por pantalla el
perímetro del mismo.

4) Realizar un programa que cargue tres variables con valores numéricos con decimales y muestre su suma
y su producto.

5) Escribir un programa en el cual se capturen por pantalla dos números, calcular y mostrar su suma, su
resta, su producto, su división y su resto de división.

6) Desarrollar un programa que pida por pantalla el precio de un artículo y la cantidad que lleva el cliente.
Mostrar lo que debe pagar el comprador.

EJERCICIOS CON “if”

7) Se ingresan por pantalla cuatro notas de un alumno, si la media es mayor o igual a 5 mostrar el mensaje
'Aprobado', en caso contrario 'Suspendido'.

8) Solicitar que se capture dos veces una clave. Mostrar un mensaje si son iguales y otro si no lo son.

9) Realizar un programa que lea por teclado dos números, si el primero es mayor al segundo mostrar su
suma y diferencia, en caso contrario mostrar el producto y la división del primero respecto al segundo.

10) Se ingresan tres notas de un alumno, según su media se mostrará: sobresaliente, notable, bien,
aprobado o suspendido.

11) Se cargan por teclado tres números distintos. Mostrar por pantalla el menor de ellos.

12) Se ingresa por teclado un valor entero, mostrar una leyenda que indique si el número es positivo, cero o
negativo.

13) Se ingresan tres valores por teclado, si todos son iguales se imprime la suma del primero con el segundo
y a este resultado se lo multiplica por el tercero. En caso contrario sacar un mensaje que diga que son
distintos.

14) Se ingresan por teclado tres números, si todos los valores ingresados son mayores o iguales que 5,
imprimir en la página la leyenda ' Todos los números son aprobados'.

15) Escribir un programa que pida ingresar la coordenada de un punto en el plano, es decir dos valores
enteros x e y. Posteriormente imprimir en pantalla en qué cuadrante se ubica dicho punto.

Página 1 / 6
Aplicaciones Web Lenguajes de script: JAVASCRIPT
(1º Cuadrante si X > 0 y Y > 0, 2º Cuadrante: x < 0 y Y > 0, etc.)

16) Se pide un palo de la baraja española. Usando un switch sacar un mensaje diferente en cada caso.

17) Crear un script que pida al usuario un número. Decir si el número es par, impar o cero.

EJERCICIOS CON “bucles”

18) Realizar un programa que imprima 25 términos de la serie 11 - 22 - 33 - 44, etc. (No se ingresan valores
por teclado).

19) Mostrar los múltiplos de 8 hasta el valor 500. Debe aparecer en pantalla 8 -16 -24, etc.

20) Realizar un programa que acumule (sume) valores ingresados por teclado hasta ingresa el 9999 (no sumar
dicho valor, solamente indica que ha finalizado la carga). Imprimir el valor acumulado e informar si
dicho valor es cero, mayor a cero o menor a cero.

21) Desarrollar un programa que muestre la tabla de multiplicar del 5 (del 5 al 50).

22) Confeccionar un programa que permita ingresar un valor del 1 al 10 y nos muestre la tabla de multiplicar
del mismo (los primeros 12 términos)
Ejemplo: Si ingreso 3 deberá aparecer en pantalla los valores 3, 6, 9, hasta el 36.

23) Crear un script que pida al usuario un número. Si el numero introducido es PAR se deberá mostrar en la
página todos los números desde el 1 hasta el número introducido, en ORDEN ASCENDENTE y si el
número es IMPAR aparecerá lo mismo pero en ORDEN DESCENDENTE.

24) Copiar el ejercicio anterior y modificarlo de forma que si el usuario introduce un número PAR nos
devuelva la suma de todos los números desde el 1 hasta el número introducido y si es IMPAR nos diga el
número de múltiplos de 7 que hay hasta el número introducido.

Página 2 / 6
Aplicaciones Web Lenguajes de script: JAVASCRIPT

EJERCICIOS CON “bucles”, “tablas” y “cadenas”

25) Se realiza la carga de 10 valores enteros por teclado. Se desea conocer:

a) La cantidad de valores negativos ingresados.


b) La cantidad de valores positivos ingresados.
c) La cantidad de múltiplos de 15.
d) El valor acumulado de los números ingresados que son
pares.

26) Crear una página que pida un número y muestre la tabla de multiplicar de dicho número en formato
tabla.

27) Crear una página que muestre las tablas de multiplicar desde el 1 hasta el 10. Utiliza dos bucles
anidados.

28) Crear una página que pida un texto por teclado y lo muestre con los caracteres separados por guiones.

Página 3 / 6
Aplicaciones Web Lenguajes de script: JAVASCRIPT

29) Inicializar una variable cadena Inicializar una variable cadena con el texto “Esto es una cadena de
ejemplo”. Mostrarla por pantalla según el siguiente patrón.

EJERCICIOS CON “funciones”, “formularios” y “eventos”

30) Hacer una lista como la de la imagen de forma que, cada vez que se pulse el botón,
aparezca una ventana que nos indique el número de opciones marcadas.

31) Crear una estructura de opciones radio con las opciones Soltero, Casado, Viudo, Otros. Cada opción del
radio tendrá el valor de la inicial de cada una de las opciones (S, C, V, O). Cuando se pulse el botón He
terminado aparecerá una ventana que nos indique la opción que se ha pulsado. Si no se ha pulsado
nada, también se indicará.

32) Hacer una lista desplegable con 3 valores: Sí, No y Mañana lo dejo… Cuando se pulse una opción, se
mostrará el texto de la opción pulsada y el valor asociado a cada una (Si – No fuma ; No – Si fuma;
Mañana lo dejo… - No se sabe)

33) Crear dos listas desplegables como las de la figura con una entrada de texto debajo. En la
entrada de texto se indicará una posición de la lista y cuando el cuadro de texto pierda
el foco, se borrará el elemento de la posición indicada en cada una de las dos listas. Si el
número indicado no corresponde con ninguna posición de la lista no se hará nada.

34) Hacer una lista como la de la figura de forma que, cuando se pulse el botón, se
eliminará de la lista el elemento seleccionado.

35) Modificar el ejercicio anterior para que el usuario pueda añadir


elementos a la lista.

Página 4 / 6
Aplicaciones Web Lenguajes de script: JAVASCRIPT
36) Diseñar una calculadora básica como la siguiente:

37) Crear una lista desplegable para acceder a distintas secciones de la página desarrolloweb.com

Las URLs asociadas a cada opción son las siguientes:

 http://www.desarrolloweb.com/ para Portada


 http://www.desarrolloweb.com/manuales para Manuales
 http://www.desarrolloweb.com/promocion para Promoción de páginas
 http://www.desarrolloweb.com/programas para Programas
 http://www.desarrolloweb.com/noticias para Noticias
 http://www.desarrolloweb.com/cosecha para Cosecha de 2000
 http://www.desarrolloweb.com/favoritas para Favorita del mes
 http://www.desarrolloweb.com/vuestraspaginas/ para Vuestras páginas
 http://www.desarrolloweb.com/colabora/ para Colaborar
 http://www.desarrolloweb.com/listacorreo/ para Lista de correo de ayuda
 http://www.desarrolloweb.com/librovisitas/ para Libro de visitas

38) Crear un script que pida una palabra al usuario. La palabra se mostrará en la página HTML 6 veces
desplazada, hacia la derecha, 150 pixels con respecto a la palabra anterior y siempre en MAYUSCULAS
con independencia de cómo la haya introducido el usuario.

Página 5 / 6
Aplicaciones Web Lenguajes de script: JAVASCRIPT

39) Crear lo siguiente:

Está formado por 3 tablas de 1 fila cada una de ellas.

Página 6 / 6
OTROS

EJERCICIO 15

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var x,y;
x=prompt('Ingrese coordenada x','');
x=parseInt(x);
y=prompt('Ingrese coordenada y','');
y=parseInt(y);
if (x>0 && y>0)
{
document.write('Se encuentra en el primer cuadrante');
}
else
{
if (x<0 && y>0)
{
document.write('Se encuentra en el segundo cuadrante');
}
else
{
if (x<0 && y<0)
{
document.write('Se encuentra en el tercer cuadrante');
}
else
{
if (x>0 && y<0)
{
document.write('Se encuentra en el cuarto cuadrante');
}
else
{
document.write('Se encuentra sobre un eje');
}
}
}
}
</script>

</body>
</html>

EJERCICIO 25

<!--Daniel Rodríguez-->
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>

var neg=0;
var pos=0;
var multiplo=0;
var par=0;
var f;
var num;
for(f=1;f<=3;f++)
{
num=prompt('Introduce un número:','');
num=parseInt(num);
if (num<0)
{
neg=neg+1; //aumenta en uno el contador si es negativo
}
else
{
if (num>0)
{
pos=pos+1; //aumenta en uno 'pos' si es positivo
}
}
if (num%15==0 && num!=0)
{
multiplo=multiplo+1; //aumenta en uno multiplo si es
multiplo de 15
}
if (num%2==0)
{
par=par+num; //se van sumando los valores pares
}
}
document.write('Cantidad de valores negativos:'+neg+'<br>');
document.write('Cantidad de valores positivos:'+pos+'<br>');
document.write('Cantidad de múltiplos de 15:'+multiplo+'<br>');
document.write('Valor acumulado de los valores
pares:'+par+'<br>');
</script>

</body>
</html>