TEMA 4 AW

ELABORACIÓN DE PÁGINAS WEB CON LENGUAJES DE MARCAS: JAVASCRIPT

4.1.-INTEGRACIÓN DE SCRIPTS (JAVASCRIPT)
Los lenguajes de script sirven principalmente para añadir contenido “dinámico” a las páginas web (gráficos,
textos y demás).
El contenido dinámico puede cambiar dependiendo de las operaciones que realiza el usuario a lo largo de su
ejecución.
Vamos a ver programas script realizados en el lenguaje JavaScript cuya principal función es incluir contenido
dinámico a las páginas web.
El código JavaScript se cierra entre las etiquetas <script> y </script>.
Se puede incluir en cualquier parte del documento, habitualmente dentro de head y la forma más estándar de
incluir el código es la siguiente:
<script type=“text/javascript”>
<!--Aquí irá el código
-->
</script>

El lenguaje JavaScript es sensible a mayúsculas y minúsculas.

4.1.1.-VARIABLES EN JAVASCRIPT
Podemos definir una variable como un depósito/contenedor donde hay un valor.
La variable consta de un nombre y pertenece a un tipo.

Provincia -> Cadena de caracteres

Salario -> Numérico

Los nombres de la variable atienden a las siguientes reglas:

1.-Deben comenzar con una letra.

2.-Una variable no puede tener el mismo nombre que una palabra clave o reservada del lenguaje.

Una variable se declara o se define anteponiéndole la palabra clave o la palabra reservada “var”. Se pueden
declarar varias variables en la misma línea.

var salario = 6000;

var edad = 19;

4.1.2.-ELECCIÓN DEL NOMBRE DE UNA VARIABLE

Una variable se puede definir e inmediatamente inicializarla con un valor.
Debemos elegir nombres de variables representativos. Salario y edad son nombres representativos de su
contenido.

Cuando visualizamos una variable no debemos ponerla entre comillas simples.

Una variable es de un tipo determinado cuando le asignamos un valor.
Para mostrar el contenido de una variable en pantalla utilizamos la función “write”, que pertenece al objeto
“document”.
document.write(“Texto”);
document.write(“Salario: ”+salario+” Edad: ”+edad);  Para meter variables en un write

jsHelloJavascript+Nombre.html
Escribid un script de Javascript en un documento HTML en el que escriba en pantalla "Hola mundo, este
es mi primer código en Javascript".

jsNombreyEdad+Nombre.html
Escribid un script en el que haya tres variables (var): nombre, apellidos y edad. La variable nombre la
declaráis poniendo vuestro nombre, en apellidos vuestros apellidos y en la variable edad ponéis vuestra
edad.

Tenéis que escribir un document.write en el que salgan las variables de nombre, apellidos y edad.

4.1.3.-VENTANA EMERGENTE (PROMPT)

Para la entrada de datos desde el teclado tenemos la función prompt.

salario=prompt(“Introduzca su salario: “);

jsNombreyEdadPrompt+Nombre.html
En el ejercicio anterior, en vez de poner directamente el valor de vuestro nombre, apellidos y la edad en las
tres variables, tenéis que poner un prompt para introducir el nombre, apellidos y la edad.

4.1.4.-FUNCIÓN ALERT
Muestra un mensaje utilizando una ventana.

alert(“Mensaje de alerta”);

4.1.5.-OPERACIONES MATEMÁTICAS EN JAVASCRIPT

La función parseInt hace que los valores de las variables se sumen como enteros y no como cadena de
caracteres.

var a, b, suma, producto;

a=parseInt(a);

Para realizar operaciones matemáticas, simplemente hay que añadir el símbolo correspondiente (+ para
suma, - para resta, * para multiplicación y / para división) a las variables con las que se quiera hacer la
operación.

jsSumaProducto+Nombre.html
Realizad la suma y el producto de dos variables, las cuales habrá que introducir en pantalla a través de un
prompt. El resultado debe aparecer escrito en pantalla, al igual que el ejercicio anterior.
4.1.6.-ESTRUCTURAS CONDICIONALES (if Y else)
Cuando hay que tomar una decisión aparecen las estructuras condicionales.
La instrucción if lleva la condición entre paréntesis y else entre corchetes.

Para poner condiciones podemos utilizar los operadores relacionales y los operadores lógicos.

Relacionales
> mayor que
< menor que
>= mayor o igual que
<= menor o igual que
== igual a
!= distinto a
var numero=5
if (condicion){
*opción 1*
}
else{
*opción 2*
}

jsNotaAlumno+Nombre.html
Codificad en Javascript un programa que visualice un mensaje de felicitación, si el alumno ha aprobado.
El nombre y la nota hay que introducirlos con un prompt.
Ejemplo de ejecución:

nombre: María.

nota: 7

Muestra en pantalla: Enhorabuena María, has aprobado!!

jsAprobadoSuspenso+Nombre.html
Codificad un programa javascript que lea nombre y nota de un alumno. Nos mostrará si ha aprobado o no.
Hay que utilizar la instrucción condicional COMPUESTA (parte if y parte else) para mostrar en una opción
un mensaje en caso de aprobar, y en la otra un mensaje en caso de suspender.

jsMayorde2num+Nombre.html
Codificad un programa javascript que lea dos números por teclado y muestre el mayor de los dos
números introducidos. Los números deben ser introducidos en un prompt.
4.1.7.-OPERADORES LÓGICOS EN LAS ESTRUCTURAS CONDICIONALES
Se emplea para utilizar condiciones compuestas.

&& = AND
|| = OR
! = NOT
Con el operador “AND” la condición será verdadera cuando las dos sean verdaderas.

Con el operador “OR” la condición será verdadera cuando al menos una de ellas sea verdadera.

Con el operador “NOT” la condición será verdadera cuando sea distinta al valor elegido.

jsMayorde3num+Nombre.html
Codificad un programa javascript que lea 3 números enteros distintos desde teclado, y visualice el mayor
de los 3.
Utilizad if-else y condiciones compuestas.

jsParImpar+Nombre.html
Codificad un programa Javascript que lea un número desde teclado y visualice si el número es par o impar. Para
calcularlo, hay que calcular primero el resto de un número. Esto se hace en programación de la siguiente forma:
resto = numero%2, donde el símbolo % calcula el resto de un número. Si el resto es 0, será par, y en caso
contrario impar.

jsTriangulos+Nombre.html
Codificad un programa Javascript que lea tres ángulos y determine si forman o no un triángulo. Primero, hay que
comprobar si el triángulo existe, por lo que hay que comprobar si la suma de los 3 ángulos es igual a 180. Luego,
hay que decir qué tipo de triángulo es: equilátero (si tiene tres ángulos iguales), isósceles (si tiene dos ángulos
iguales) o escaleno (si tiene tres ángulos desiguales).

Utilizad if-else y condiciones compuestas.

4.1.8.-BUCLE WHILE EN JAVASCRIPT

Se utiliza para repetir un bloque o un grupo de instrucciones mientras la condición sea verdadera. La sintaxis
es la siguiente:

while (condición){
(operación deseada)
condición = condición + 1; (por ejemplo)
}
i++; ---> i=i+1;
i--; ----> i=1-1;

¿Cómo funciona?
Se evalúa la condición, si es verdadera se ejecuta el bloque de instrucciones que contiene el bucle. Cuando
terminamos con la última instrucción del bucle, vuelve a evaluar la condición, si es verdadera vuelve a entrar.
En el momento en el que la condición es falsa, se sale del bucle.

jsParesHastaNum+Nombre.html
Codificad un programa Javascript que visualice todos los pares menores que el número entero y positivo
introducido por teclado (por ejemplo, el 20). Para ello, tened en cuenta que el menor número par es el 2.

Utilizad una estructura while para codificar el programa.

jsTablaMultiplicarWhile+Nombre.html
Codificad un programa Javascript que visualice la tabla de multiplicar de un número leído por teclado,
utilizando un bucle while.

Ej de ejecución:

introduciendo: 6

mostrará:

La tabla de multiplicar del número 6 es:

6x1=6

6 x 2 = 12

6 x 3 = 18

.............

6 x 10 = 60

jsParesDesde50+Nombre.html
Codificad un programa que lea un número mayor que 50 desde teclado y visualice los pares entre 50 y el
número introducido. Hay que comprobar primero si el número introducido es mayor de 50 con un if-else.

Nota: Utilizad un bucle while para resolverlo.

jsMayorHasta0+Nombre.html
Codificad un programa Javascript que lea números hasta que se introduzca un 0. Finalmente, se visualizará el
mayor de los números introducidos.

4.1.9.-BUCLE FOR
Cualquier programa que requiera una estructura repetitiva se puede resolver empleando la estructura while,
pero existe otra estructura repetitiva cuyo formato es más adecuado para ciertas situaciones. Se trata de
situaciones en las que conocemos la cantidad de veces (iteraciones) que queremos que se ejecute el bloque
de instrucciones.
Por ejemplo: leer 10 números, cargar los nombres de 20 alumnos.

Sintaxis:

for(<Inicialización>;<condición>;<incremento o decremento>)
{
Instrucción-1;
Instrucción-2;
}

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

document.write(i+’<br>’);
}
Bloques:
Inicialización: se inicializa la variable de control del bucle for. En el ejemplo la variable de control es la i y la
inicializamos a 1.
Condición: se especifica la condición de permanencia en el bucle; es decir estaremos en el bucle si la
condición es verdadera.
Incremento o decremento: se especifica la variación de la variable de control en cada iteración.

Funcionamiento:

1.-Se inicializa la variable de control.

2.-Se evalúa la condición. En caso de ser verdadera se ejecuta el bloque de instrucciones, en caso contrario
se sale del bucle y continúa el programa.
3.-Ejecuta las instrucciones.
4.-Ejecuta el 3er argumento (incremento o decremento).
5.-Se repiten sucesivamente los pasos del 2 al 4.

jsTablaMultiplicarFor+Nombre.html
Codificad un programa Javascript que visualice la tabla de multiplicar de un número leído por teclado, utilizando
una estructura for, con orden descendente. (del 10 al 1)

Ej de ejecución:

Introduciendo: 14

Mostrará:

La tabla de multiplicar del número 14 es:

14 x 10 = 140

14 x 9 = 126

14 x 8 = 112

.............

14 x 1 = 14

jsImparesDesde100+Nombre.html
Codificad en Javascript un programa que visualice todos los impares entre 100 y un número introducido por
teclado (menor que 100), de forma descendente. Hacedlo con un bucle for.

jsParImparHasta0+Nombre.html
Codificad un programa Javascript que lea números hasta que se introduzca un 0, y vaya visualizando si son pares
o impares. El 0 no debería ser par ni impar. Usad un bucle while.

jsSumaParesHasta0+Nombre.html
Codificad un programa en Javascript que lea números hasta introducir un 0, vaya mostrando los pares, y al final,
muestre la suma de todos los pares introducidos. Usad un bucle while.
jsMediaHasta0+Nombre.html
Codificad un programa Javascript con un bucle while que visualice la media de los números introducidos por
teclado. El proceso termina cuando introducimos un 0.

jsDivisores+Nombre.html
Codificad un programa Javascript que lea un número entero y positivo y visualice los divisores de dicho número.

Para saber si un número es divisor de otro, tenéis que sacar el resto. Utilizad un bucle for.

Ej.- 15
Los divisores son: 1,3,5,15

jsMayorYJoven+Nombre.html
Codificad un programa que lea por teclado edad y nombre de un grupo de alumnos y que se detenga
preguntando si quieres seguir o no.

Y que al final salga el nombre del mayor y el nombre del más joven introducido.

Variables a usar
Variable ¿Se inicializa?
nombre No
edad No
edadmayor Sí (número pequeño, 1 o 0)
edadmenor Sí (número grande)
nombremayor No
nombremenor No
seguir Sí ("sí" o "seguir", por ejemplo")

La variable seguir será que se use en el bucle para comprobar si seguir introduciendo nombres o no.

jsPrimo+Nombre.html
Codificad un programa Javascript que lea desde teclado un número entero y positivo, y al final muestre si dicho
número es primo o no lo es. Recordad que un número es primo cuando sus únicos divisores son él mismo y el 1,
y un número es divisor de otro cuando el resto es igual a 0.

jsFactorial+Nombre.html
Codificad un programa Javascript que lea un numero entero y positivo, y muestre su factorial. El factorial de un
número es el resultado de la multiplicación de un número por todos los números que le anteceden, excluyendo
el 0. Ejemplo: El factorial de 4 = 4*3*2*1 = 24

Utilizad un bucle FOR para codificar la solución.

jsPrimosMenores25+Nombre.html
Codificad un programa Javascript que visualice todos los números primos menores que 25. Consejo: consultad el
ejercicio jsPrimo.
jsPerfecto+Nombre.html
Codificad un programa Javascript que lea desde teclado un número entero y positivo, y al final muestre si dicho
número es perfecto o no lo es.

Un número perfecto es aquél que es igual a la suma de sus divisores, exceptuando él mismo.

Ej. de número perfecto: 6

Suma de los divisores: 1+2+3 = 6.

4.1.10.-FUNCIONES JAVASCRIPT
Hasta ahora hemos visto cómo realizar código de una forma estructurada con sentencias de control que nos
permiten dominar la ejecución del programa, ¿pero qué ocurre si queremos reutilizar un código en varios
programas? Esto se resuelve gracias a las funciones. Las funciones son segmentos de código o subprogramas
que tienen nombre y que podemos utilizar en cualquier parte del código realizando lo que se conoce como
una llamada.

function datos_personales(nombre, apellidos){

document.write(“Hola “+nombre + “ “ + apellidos);
}

datos_personales(“Fernando”, “Velasco”);
datos_personales(“Pepito”, “Grillo”);

jsFDatosPersonales+Nombre.html
Realizad el programa propuesto en clase, en el que creáis la función datos_personales. En vez de poner solo
nombre y apellidos como en clase, poned también la edad y el salario.

jsFTablaMultiplicar+Nombre.html
Codificad un programa Javascript que muestre la tabla de multiplicar de varios números, haciendo varias
llamadas a la función fuera de ella (al menos 3). Para ello, utilizaremos una función con el siguiente formato:
fmultiplicar (num), que se encarga de mostrar la tabla de multiplicar del valor pasado en la llamada a la función.
Por ejemplo: fmultiplicar(7) llamará a la función donde creáis la tabla de multiplicar, y imprimirá la tabla de
multiplicar del 7.

Utilizad en la función la tabla de multiplicar que hicisteis en ejercicios anteriores.

jsFTablaMultiplicarHasta50+Nombre.html
Codificad un programa Javascript que muestre la tabla de multiplicar de los primeros 50 números. Será parecido
al anterior ejercicio, pero esta vez en vez de usar tres números en la función tabla_multiplicar, lo hará del 1 al 50.
Tenéis que utilizar un bucle.

jsFDivisores+Nombre.html
El programa Javascript tendrá una funcion "fdivisores(n1)" que mostrará los divisores del número pasado como
parámetro. Los divisores se mostrarán dentro de la propia función. En el programa principal se introducirá el
número desde teclado y se realizará la llamada adecuada.

Por lo tanto, será como el ejercicio de Divisores que hicisteis anteriormente, pero haciendo la llamada a la
función.

Hemos visto funciones que se llaman y hacen cierta operación. Habrá ocasiones en las que queramos llamar
a una función, y después utilizar el resultado de la función fuera de ella. Esto se hace con la instrucción return.

function suma(a, b){

suma = a+b;

return suma;

var n1 = parseInt(prompt(“Introduce el número 1”));

var n2 = parseInt(prompt(“Introduce el número 2”));

var sumatorio = suma(n1, n2);

if (sumatorio > 10){

document.write(“Es mayor que 10”);

else{

document.write(“Es menor que 10”);

En el ejemplo vemos la diferencia entre el programa principal y la función, donde el programa principal toma
el valor obtenido en la función para la variable sumatorio.

jsFPerfecto+Nombre.html
El programa Javascript tendrá una función "fperfecto(n1)" que devolverá si el número entero y positivo pasado
como parámetro es perfecto o no lo es (la función devuelve un valor verdadero o falso, a través de la instrucción
return).
En el programa principal se introducirá el número desde teclado, se realizará la llamada adecuada y finalmente se
mostrará el resultado.

Ej de ejecución.-
introduciendo: 7
mostrará: el numero 7 NO es perfecto

jsFPerfectoMenoresDe1000+Nombre.html
El programa Javascript tendrá una función "fperfecto(n1)" que devolverá si el número pasado como parámetro
es perfecto o no lo es (valor entero).
En el programa principal se mostrará la lista de todos los número perfectos entre 1 y 1000.
(Se reutiliza la función, igual que en el programa anterior)

jsFParesMenorMayor+Nombre.html
Codificad un programa que lea 2 números enteros y positivos y visualice los números pares entre el menor y el
mayor de un programa Javascript de los dos números introducidos. Lo que quiere decir, tiene que leer los dos
números en un prompt y pasarlos a la función.

La lista de los pares la visualizará una función con la siguiente cabecera:

function f_pares(menor, mayor)

En el programa principal, se leerán los números y según cuál sea el menor y el mayor, se modificará el orden de
los argumentos en la llamada a la función.

4.1.11.-CONDICIONAL SWITCH
Otra forma de escribir condicionales en Javascript en lugar de con un if-else, es con la instrucción switch. La
estructura de switch es la siguiente:

switch (expresión) {
case valor1:
//Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor1
[break;]
case valor2:
//Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor2
[break;]
...
case valorN:
//Declaraciones ejecutadas cuando el resultado de expresión coincide con valorN
[break;]
default:
//Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión
[break;]
}

Ejemplo:

var opción = prompt("Elige una opción del 1 al 3");

opción = parseInt(opción)
switch(opción){
case 1:
document.write("Opción 1");
break;
case 2:
document.write("Opción 2");
break;
case 3:
document.write("Opción 3");
break;
default:
document.write("Por favor, introduce una opción posible");
 break;
}

jsMenuNumero+Nombre.html
Codificad un programa que lea un número entero y positivo y muestre el siguiente menú de opciones:

Estaremos repitiendo el menú (bucle) hasta que elijamos la opción 6, (salir del programa)

1. Mostrar los divisores del número.

2. Mostrar si es par o impar.
3. Decir si el número es perfecto.
4. Decir si el número es primo
5. Mostrar el factorial del número.
6. Salir del programa.

Por lo tanto, primero pedirá un número en un prompt que será el que utilicéis en cada una de las opciones, y
luego habrá un prompt para elegir las opciones. Cada una de las opciones del menú será una función distinta, las
cuales ya habéis creado en otros ejercicios. Usad una instrucción condicional switch para el menú.