wr 2
Lenguaje JavaScript
JavaScript es un lenguaje de programacién de la web que se utiliza para agregar funcionalidad, validar los datos, comunicarse
con los servidores web, es decir para afiadir contenido dinémico a las paginas web. El o6digo JavaScript va incrustado en
las paginas HTML y es el lenguaje de script mas utilizado en internet, los navegadores son los encargados de interpretar
este cédigo.
Un script es un programa que puede acompafiar a un documento HTML o estar contenido en su interior. Las instrucciones
del programa se ejecutan cuando se carga el documento, o cuando se produce alguna circunstancia tal como la activacién
de un enlace o pulsacién de un botén por parte del usuario. Este segundo tipo de acciones desencadenan lo que se conoce
como eventos.
En esta unidad se estudiaré este lenguaje y sus caracteristicas a través de ejemplos précticos que mostrarén distintas
funcionalidades del mismo.
Oars
Empezando con JavaScript
Entrada de datos de teclado
Elementos basicos de programacién
Conover as estructuras basicas de programacién,
‘Conover os elementos basicos del lenguaje JavaScript.
Realizar sort sencillos para la entrada y vaidacion de
Estructuras de control
Estructuras repetitivas
Funciones tiles para manejar cadenas de texto
Funciones en JavaScript
datos.
Manejarfunciones JavaScript.
Realizar script sencillos creando funciones. Pete nea
SABIAS QUE:
JavaScript es un lenguae interpretado
;uro (ni compilacién, ni generacién de
‘ntermedios codficados de ningin tipo)
y sensible a mayisculas y mindsculas,
‘uiere decir que no es lo mismo escribir
‘una variable o una insrucién en mayts-
ula que en miniscula, Asi noes fo mis-
‘mo escribir alert) que Alert) alert
correcta y Alert es un ero.
—~
Ky)
8.1 Empezando con JavaScript
La integracién de JavaScript en documentos XHTML y HTML es muy flexible,
ya que existen al menos tres formas para incluir c6digo JavaScript en las pa-
ginas web: dentro de la etiqueta , dentro de la etiqueta 0 en
un archivo externo.
Normalmente el c6digo JavaScript se encierra entre etiquetas
Los caracteres // se utilizarén para aiiadir comentarios de linea dentro del
‘c6digo, lo que se escribe dentro no se interpreta, solo se utliza para comen-
tar. También existen los comentarios de varias lineas que utllizan los ca-
racteres /* para abrir la primera linea del comentario y */ para cerrar la
titima linea del comentario.
8.1.4 Incluir el script dentro de la etiqueta
En este primer ejemplo, se crea un script en JavaScript que visualiza un men-
saje de bienvenida en una alerta y en una linea dentro de la pagina. Se vi-
sualizarén al abrir a pagina y antes de lo que aparece dentro de la etiqueta
.
Ejemplo 1
Haz clic en este pérrafo
y se visualiza una alerta.
El mayor inconveniente de este método es que ensucia innecesariamente el
‘c6digo XHTML 0 HTML de la pagina y complica el mantenimiento del codigo
JavaScript. En general, este método solo se utiliza para definir algunos even-
tos y en algunos otros casos especiales.
onan ee
‘Aflade a los ejercicios anteriores una alerta y un mensaje en la pagina que visual-
ce tu nombre y tu centro. Utliza las drdenes alert), y document.write)
8.2 Entrada de datos de teclado
JavaScript, como cualquier otro lenguaje, permite la entrada de datos por
teclado, todos los datos tecleados se consideran de tipo texto. En este
ejemplo vamos a leer el nombre de una persona y su edad, y lo vamos a vi-
sualizar, en una alerta y como un texto normal. Introducimos el concepto de
‘que seré necesaria para guardar en memoria lo que se lee de te-
Para leer los datos de teclado se utiliza la orden prompt. Pondremos
prompt(“mensaje”,"texto_por_defecto”), esta orden al ejecutarse visualiza
‘el mensaje en una ventana, y asigna el valor por defecto, si se escribe el tex.
to_por_defecto. Este no es obligatorio.
Lo que se lee se debe almacenar en variables para luego trabajar con esa
informacién, por eso se deciaran las variables utilizando var. Crea el docu-
mento Ejemplo2.htm! con este cédigo:
<1DOcTYPE html>
Ejemplo 2
Ejemplo 4 ‘tos elementos, como son las funcones.
© Bempios +
A= t0yB=12
AaB es false
Bes fal
Figura 8.10. Vieuallzacion dela pina det Ejemplo6.
eens
A partir del ejercicio anterior, aiade las lineas necesarias para visualizar las com-
paracones de A menor que 8.
Guarda con el nombre Ejempio6_1.
Cambia el ejercicio anterior, gudrdale con el nombre Ejemplo6_2. Ahora en lugar
de asignar valores a Ay a B, haz que se lean de teciado y se muestre en la pa
ina y en una alerta el resultado de comparar si son iguales, si la suma de los
dos ntimeros es mayor de 100, y sila resta de A~B es menor de 100. Antes
de comparar hay que sumar los ndmeros y guardarlos en una variable, y restar-
los y guardarlos en otra variable. Pon titulos de nivel para que la pagina se
uestre como en la Figura 8.11.
CO tiemplo62
Figura 8.1, Visualizacion de la pagina del Ejemplo6 2.
Pra
‘el mensae, para que se visuaice el sig-
no < lo escibiemos entre espacos, ya
‘que el navegador puede pensar que es
tna etiqueta HTML; es decir, esto A
Esto esté dentro del body.
ean sa ney Escribe un ejercicio con nombre Ejemplo3_i.htmI, que lea de teclado la poble- cin, la provincia y la calle y visualice en Ia pantalla os datos lefdos, cada uno en una linea. Visualizarlo también en una alerta, 8.3.2 Operadores y expresiones Los operadores sirven para manejar o transformar la informacién, para realizar célculos y para comparar informacion. Las expresiones son com- binaciones de variables, constantes y operadores que devuelven un valor realizando determinadas operaciones. Asf pues, en una expresi6n nos en- contramos: + Operandos son los elementos cuyo valor se manipula u opera, serén variables, constantes o expresiones. + Operador u operadores son los elementos que determinan el tipo de operacion a realizar: Ejemplo de expresiones son: 330 Expresion, Operandos Suma, A, B AB RESUL=A* 20 RESUL, A, 20 (A==B && 050) A.B,C,D Podemos establecer la siguiente clasificacién de operadores: Pres Nombre de operador Operador Ejemplo de expresiones De asignacién, asigna un valor. Numero = 10; De coneatenacién, une cadenas de . “EI nombre nuevo es: * + nombre caracteres. nombre + apetlido Suma: + total = importe + iva Resta: - Salario = base - retenciones Aritméticos, se utlizan para Mutipccon: * | porte = pei *unidades cats artnétensu operaciones | Bese weoutadot ented /5 ‘ Dison ertera:\. | testa = carla (5 Resto ela duision:% | resto =cantdad % 5 De comparacin, se ilzan para——| ‘gal (cd == 92) compara i yn on quale comparar valores, deweten tue | Dito: <> (r= 12} compara sind yn2 san dite. false, dependiondo de s'se cumple | Mayor que: > {ri > n} compara nd es menor auen2. rola comparacién Se ulzan | Menor a (rt <2) compara snes mayor que n2 ‘en programacién para toma de Mayor 0 igual: >= (nd >= n2), compara sin’ es mayor o igual que n2. decisiones. Mere a (ri <= 12} compara sin es menor 0 ual que m2. (ND) aa (ra = n2) €& (A), evade 8m es Igual a n2 y A 5 mayor que B, devahers tue si se cumpon las dos conactones coo loc) (rl > na) (>), eval si mayor ue 02,0 mayor naa Que 5.81 so cumple cualeulora de las dos condiciones, ' devolvrs tu No (NOT): ¥ A>B) Dewuelve true cuando el operando es falso. Es decir devuelve true cuando NO es A mayor que B. En el siguiente ejemplo (Ejemplo4.htm!) se declaran tres variables, n1. y n2, que se len de teclado, y suma que almacenaré la suma de los dos ntime- ros. Una vez lefdas ni y n2, se calcula la suma y se visualiza el resultado en una alerta y en el documento: IMPORTANTE: Para leer datos numéricos enteros. seint(): yremos la orden par- parseInt (prompt (“Mensaje a visualizar”, valor_por_defecto)); Esta orden convierte el dato tipo texto a numérico. Si no lo ponemos asf, en la suma de los ntimeros apareceré como resultado la concatenacién de los, nuimeros tecleados. En el Ejemplod escribiremos: No todas la expresiones requieren de la ni=parseInt (prompt(“Teclea el numero 1:",0)); ae eee n2=parseInt (prompt(“Teclea el numero 2:",0)); ‘solo se requiere que devuelva un valor. En este sentido podemos considerar que una constant o una variable constituyen OCTYPE htm1> ori sola una expresin, En las expresiones pueden intervenir para que la pagina se
uestre como en la Figura 8.11.
CO tiemplo62
Figura 8.1, Visualizacion de la pagina del Ejemplo6 2.
Pra
‘el mensae, para que se visuaice el sig-
no < lo escibiemos entre espacos, ya
‘que el navegador puede pensar que es
tna etiqueta HTML; es decir, esto AA ||B==C). Copia y prueba el siguiente c6di
0, gudrdalo como Ejemplo7. html.
document .write(“
A"=B && C==D: “ + (AS=B EE C==D));
document .write(“
A>B && C>D: “ + (A>B && C>D));
document .write("
A< B && C< Di " + (AS B && C
A==B || C==D: “ + (Ae=B || C==D));
document.write(“
D>A || C>D: “ + (D>A || C>D));
document.write(“
a< B || C> D: “ + (A< B || C> D));
document .write( “
1(D>A): " + 1(D>A))7
document.write(*
1(A< B): “ + 1(A< B)
eta
Cambia el ejercicio anterior y muestra las comparaciones de evaluar si C y D
son distintos. Si A no es mayor que B. SiC es mayor que Ay que B. SiD es me~
‘nor que Ay que B. SiA es menor que B 0 A es mayor que D. Si A es igual a B 0
A igual a C. Utliza los operadores légicos. Guérdalo con el nombre Ejemplo7_1.
8.4 Estructuras de control
Las pruebas realizadas hasta ahora han consistido en la ejecucién lineal de
tuna serie de instrucciones basicas. En este apartado vamos a incluir las es-
tructuras de control de flujo que van a permitir realizar una serie de instruc-
clones 0 realizar otra serle de instrucciones dependiendo de si se cumple 0
no una condicién. Es decir, vamos a poder preguntar por el valor de las va-
riables 0 expresiones y dependiendo del resultado se ejecutardn unas accio-
nes 0 se ejecutarén otras.
8.4.1 Estructura if
‘Se emplea para tomar decisiones en funcién de una condicién. Si se cum
ple una determinada condicién se ejecutaré un conjunto de instrucciones,
sino se cumple no se hace nada, sigue en secuencia. El diagrama de flujo
se representa en la Figura 8.12 y el formato es el siguiente: 8 LENGUAJE JAVASCRIPT
v
False
Tre
<<7/Condicién >
Instruecionest.
I
Instrucciones2
Figura 8.12. Estructura if
if (condicién)
{
// se afaden las instrucciones a ejecutar
//si se cumple 1a condicién
Instrucciones:
Instrucciones:
Donde:
* condicién es cualquier expresién que devuelva un valor légico (true/
false). Si la condicién se cumple (es decir, si su valor es true) se eje-
cutan todas las instrucciones que se encuentran dentro de {...}. Si
la condicién no se cumple (es decir, si su valor es false) no se eje-
cuta ninguna instruccién contenida en {...} yel programa continda
ejecutando el resto de instrucciones del script.
+ instrucciones es un bloque de una o més instrucciones que se ejecu-
taran solo en el caso de que se cumpla la condici6n. Si se trata de
Una sola instruccién podemos prescindir de las llaves ({)).
El c6digo del siguiente script (E/emplo8.htm!) visualiza la alerta con la varia-
ble Mensaje, cuyo contenido es: “Probando 1a estructura if” por
que [a variable mostrarMensaje es igual a true. Prueba el mismo ejemplo
asignando false a la variable mostrarMensaje.
El ejemplo se podria reescribir también como:
var Mensaje= “Probando la estructura if";
var mostrarMensaje = true;
if (mostrarMensaje==true)
{
alert (Mensaje);
}
El siguiente ejemplo (Ejempio09.htmi) lee una nota introducida por teclado y,
sila nota es igual 0 mayor que 5, visualizaré una alerta con el texto FAPRO-
BADO!, en caso contrario no haré nada.
on ansa ne)
Modifica la Actividad propuesta 8.7, indicando si la media del alumno es ma-
Yor o igual a 5 que visualice APROBADO, y si no lo es que visualice SUSPENSO.
Guérdalo como Efemplo9_2.html.
Realiza una pagina que lea el nombre, la edad y la nota de un alumno y visuall-
ce en el documento (utiliza document write) el nombre del alumno, su edad, si
les mayor de edad 0 menor de edad, su nota y si esté aprobado o suspenso. Uti
liza titulos. Gudrdalo como Ejemplo9_3.ntm!.
‘Todas las estructuras de control se pueden anidar, es decir escribir una den-
‘ro de otra. En el siguiente ejemplo (Ejemplo40.htm!) se utiliza el at
to de estructuras para realizar comprobaciones adicionales.
<1DOcTYPE htm1>
Ejemplo 10
Esto esta dentro del body.
Un programa que se escibe en un en=
-guaje de alto nivel tiene que traducirse a
ch si oe oom ey
~ crea una pghe que okay unset que lea (mediante prompt) na can. | | L2SPOURMER atcen an pbon
ded nod por tela, sl 98100 que eule ena octets ia | | rsa
Cantidad y la cantidad més 200. Si la cantidad esté entre 101 y 200 que vi-
sSualice en el documento la cantidad y la cantidad multiplicada por 2. Si la
Cantidad es negativa que visualice en el documento la cantidad y ES NEGATI-
VA, en otro caso que visualice en el documento la cantidad y la cantidad mul-
tiplicada por 3. Guardalo como Ejemplo10_1.html.
+ Crea una pagina que incluya un seript que lea (mediante prompt) una edad
Introducida por tectado y visualice que no es correcta la edad si es mayor de
110, 0 es menor de 0. Visualice que es mayor de edad si es mayor de 18, y
Visualice menor de edad si es menor de 18. Utliza la orden document.write.
Guérdalo como Ejemplo10_2.htm!.
*+ Crea una pagina que incluya un script para introducir por teclado el sexo, que
|
deberd ser Ho Moh o my visualizar en una alerta Hombre si es H on, Mu- ara leer datos numéricosenteos utiza-
Jer si es Mo my eror sino es H,h, mo M. Guardalo como Ejempio10_3. remos la orden parse).
nem.
*+ Crea una pagina que incluya un script para leer de teclado dos nimeros y vi-
sualizar si son iguales, 0 cual es el mayor y cual el menor. Guérdalo como
Ejemplo10_4.hum
8.4.3 Estructura alternativa miiltiple
Esta opcién se utiliza cuando se quiere comprobar los multiples valores que
puede tomar una variable o una expresién, puede sustituir a muchos if en-
cadenados. El diagrama de flujo se muestra en la Figura 8.14 y el formato
es el siguiente:
switch (expresién)
{ case valor.
instrucciones1;
break;
case valor2:
instrucciones2;
break;
case valor3:
instrucciones3;
break;
case valorn:
instruccionesn;
break;
[default
instrucciones;} 8 LENGUAJE JAVASCRIPT
‘Un compitador es un programa que pue-
de leer otro programa escrito en un de-
terminado lenguaj (un lengua fuente) y
‘radu en un programa equivalete en
‘otro lenguale enguele destin), El com-
Dilador devolverderrores si el programa
en el lenguae fuente no est ben esto.
El programa destino se podra ajecutar st
el lenguaje destino es drectament eje-
| eutabl porta maquina,
340
Dondi
+ expresi6n es cualquier expresi6n o variable valida con la que se com-
pararén los valores que acompafian a la cléusula case.
+ valori,..valorn son valores que suponemos puede tomar la expresién
o variable a los que les sigue la instruccién o instrucciones que que-
remos que se ejecuten en cada caso.
+ defautt es una cléusula opcional, se ejecutarén las instrucciones que
la siguen en el caso de que el valor no coincidiese con ninguno de los
casos contemplados.
El funcionamiento de esta estructura es el siguiente:
1. Calcula el valor de expresian.
2. Comprueba desde el principio cada valor que acompafia a las cléusu-
las case hasta encontrar alguno que coincida con el valor de expre-
sin.
3. Cuando encuentra un valor que coincida con expresién ejecuta las ins-
trucciones correspondientes hasta que encuentra la cléusula break.
Los valores si no se pasan a numéricos (por ejemplo, al leer, si se
pone parseint aseguramos que la entrada es un nimero entero) se
han de preguntar entre comillas, como caracteres 0 cadenas, porque
los considera caracteres.
4, Sino encuentra ningun valor que coincida con expresién ejecuta las
instrucciones correspondientes a la cléusula default (si existe, en
caso contrario no hard nada).
5. Sale del bloque de la estructura switch..case.
Observaciones:
* La cldusula break que aparece en este formato no es obligatoria pero
sino se utiliza cambiard el funcionamiento de la estructura switch
case. Esta cldusula es la responsable la salida del bloque una vez
‘ue se ejecuten las instrucciones de una de las cldusulas case. Sino
se pone, se seguirdn ejecutando todas las instrucciones hasta llegar al
final. Es decir, las cldusulas ease sin break actuarfan como puntos de
entrada a la estructura, siendo la salida la misma en todos los casos.
+ Para una misma cléusula case se pueden especificar diversos valores.
en lugar de un nico valor, en este caso se indicarén los valores sepa-
rados por comas segiin el formato:
case valor:
case valor2:
case valor3: instrucciones;
break;
Por ejemplo, se visualiza una alerta si la expresién que se evalla vale 10,
20.030:
case 10
case 2
case 30: alert("E1 valor de la variable es 10, 20 0
30");
break; Pres
Los intérpretes son otra aterativapa-
ra traduor os programas escrts en ln-
quale de ato nivel. En este caso, en vez
de producir un programa destino como
resultado del proceso de traducci6n,
intérprete nos da la apariencia de eecu-
‘tar drectamente las operaciones espe-
‘ficadas en el programa fuente con las
‘entradas proporionadas por él. Cada vez
El siguiente ejemplo (Ejemplo11.html) muestra la utilizacién de una estruc: que se ejecuta una instruccién se debe
tura alternativa multiple anidada dentro de una estructura alternativa doble. interpretarytraduciralenguaje maquina
Ejemplo 11
Esto estd dentro del body.
En esta ocasi6n, en lugar de ejecutar una alerta para cada caso, se ha opta-
do por guardar el texto a mostrar en la alerta en la variable Calificacion para,
al final, mostrar el contenido de dicha variable. Observa también que la va-
Tiable Nota se redondea antes de comprobar su contenido (Nota = Math.
round(Nota);) ya que los valores de las cldusulas case deben ser exactos (5,
6, eto.)
El siguiente script (Ejemplo12.htmi) lee el numero del dia de la semana y vi
sualiza en una alerta el nombre del dia, el 1 es lunes, el 2 es martes, el 3
es miércoles, el 4 es jueves, y asf sucesivamente.
onrehatcante
*+ Crea una pagina que incluya un script que permita leer un mes de teclado (el
‘ndmero de mes), y visualice en una alerta el nombre del mes lefdo: enero, fe-
brero, marzo, etc. Guarda el ejercicio como Ejemplo12_thtm
*+ Crea una pagina que incluya un script que permita leer dos numero de te-
clado y un carécter que seré la operacion de célculo a realizar. Este carécter
seré * para multiplicar, + para sumar, ~ para restar y / para divdi. Utliza una
estructura switch para preguntar por la operacion y realiza el calculo. Visualiza
el resultado de Ia operacion en el documento de manera que se vean los dos
‘ndmeros, la operacién y el resultado. Por ejemplo, si leemos de teclado 10,
30 y +, se ha de visualizar en la pagina: 10 + 30 = 40,
Sila operacién tecleada es errénea se visualiza en el documento el mensaje
“Error en la operacién.”
Guarda el ejercicio como Ejemplo12_2.html. Pea
* Crea una pagina que incluya un script que permita leer un ndmero de mes de
teclado y a partir de ese mes calcula la productividad. La productividad es
1100 + el factor del mes. Y el factor del mes es el siguiente:
Los meses enero, febrero y marzo tienen factor 15.
Los meses abril, mayo y junio tienen factor 17.
Los meses septiembre, octubre y noviembre tienen factor 20.
Y diciembre tiene factor 21.
‘Sino son esos meses el factor es 0.
Visualiza la productividad en el documento, indicando:
El nombre de mes es Nombre:Mes y Ia productividad resultado.
Visualiza “Error en e/ mes” si el ndmero de mes tecleado no esta entre 1
yi2.
Guarda el ejercicio como Ejempio12_3.htm|.
+ Crea una pagina que inciuya un script para leer de teclado el nombre de em-
pleado, su salario y su niimero de departamento. Se pretende subir el salario
de los empleados, Para subir el salario preguntamos por el niimero de depar-
tamento,
Siel departamento es 10, la subida de salario serd de 100.
Siel departamento es 20, la subida de salario seré del 5 %
Sil departamento es 30, la subida de salario seré del 4 %.
Sies otro departamento la subida serd de 75.
Visualiza en el documento el nombre del empleado, el salario, la subida
de salario, y el nuevo salarlo que sera la suma del salario mas la subida.
Visualiza:
Nombre empleado: nombye_leido, su salario es: salario_Jeido, su departamento
es: depart leido, la subide es: subida_calculada, y el nuevo salaro es: salario_
leido més ia subida_caleulada.
Guarda el elercicio como Ejempio12_4.htm|.
8.5 Estructuras repetitivas
En ocasiones necesitaremos que un bloque de instrucciones se ejecute va-
rias veces seguidas; en estos casos utilizaremos estructuras repetitivas 0
bucles. En JavaScript disponemos de las siguientes:
False
8.5.1 Estructuras while
La estructura while ejecuta un bloque de instrucciones y repite dicha ejecu-
cién mientras que se cumpla una condicién. El diagrama de flujo se repre-
senta como se muestra en la Figura 8.45 y el formato es el siguiente:
Instruciones
er L_]
{ Flew 825. Etec whl,
instruceiones;
+ Dondi
+ condicién es la condicién a evaluar, si su valor es true se entraré en el
bucle y se repetiré mientras se cumpla la condicién. Sera comproba-
do antes de cada nueva ejecucién del bloque de instrucciones.
+ instrucciones es el bloque de instrucciones que se ejecutara si se
cumple la condici6n.
Funcionamiento:
1. Al encontrar la estructura while lo primero que hace (antes de entrar
or primera vez en el bucle) es evaluar la condicién: si es verdadera
entra en el bucle y ejecuta el bloque de instrucciones, pero si es falsa
ni siquiera llegard a entrar en el bucle.
2. Una ver ejecutadas las instrucciones del bucle se evalda de nuevo la
condicién para determinar si se vuelve a ejecutar el bloque 0 no (si es
verdadera se ejecuta, si es falsa deja de ejecutarse). Este punto se
repite hasta que la condicién deja de ser verdadera
3, Cuando al evaluar la condici6n el resultado es false, el flujo del pro-
‘grama va a la linea siguiente al final del bucle.
EI siguiente ejemplo (Ejemplo13.htm) utliza esta estructura para validar la
lectura de una nota, lo que hace es leer una nota que esté comprendida en-
tre Oy 10y asi asegurarse que se teclea una nota correcta. Primero se lee
la nota y el bucle verifica que sea correcta. La ultima instruccién del bucle
es volver a leer la nota. Se saldré del bucle cuando se teclee la nota correc-
ta. El while se ejecuta mientras la nota sea menor de 0 (error, nota negativa)
© la nota sea mayor de 10 (nota errénea), en ese caso se lee.
Observaciones:
+ Hay que asegurarse de que en algtin momento se produzca la salida
del bucle ya que de lo contrario estarfamos ante un bucle infnito. Por
ejemplo, si en lugar de la condicién while (Nota <0 || Nota > 10) hu
biésemos escrito: while (Nota > 0 || Nota < 10) el bucle hubiese es-
tado iterando constantemente y no finalizaria nunca,
+ Para que esta salida se produzca se deberé modificar el valor de la
expresion. En nuestro caso la modificacién se produce al leer un nue-
vo valor del teclado ‘+ Se puede forzar una salida del bucle en cualquier momento mediante
la cldusula break.
+ También se puede forzar a realizar un nuevo ciclo atin sin terminar to-
das las instrucciones del bucle mediante la cléusula continue.
Pero ninguna de estas dos ditimas opciones es recomendable ya que
dificultan la legibilidad de los programas y, por tanto, su posterior
mantenimiento,
Pea asa eee
+ Utiizando et cédigo anterior, anade las Instrucciones necesarias para leer la
Variable sexo y validar que sea un valor correcto, H 0 h para Hombre y Mom
para Mujer. Visualiza con document.write los valores correctos. Guarda el ejer-
ciclo con el nombre Ejemplo13_4.htm.
+ Crea una pagina que incluya un script para leer niimeros de teclado y visuali-
zatlos en la pagina. Leer ndmeros hasta que sea un 0, cuando el niimero lefdo
sea un O finalizar el bucle. El bucle se ejecutaré mientras el ndmero lefdo sea
distinto de 0. Guarda el ejercicio con el nombre Ejemplo13_2.html.
8.5.2 Estructuras do...while
La estructura do...while es similar a la anterior, pero en este caso la compro-
bacién se produce después de ejecutar el bloque de instrucciones. El diagra-
‘ma de flujo se representa como se muestra en la Figura 8.16 y el formato
es el siguiente:
do
{
Instrucciones;
t
while(condici6én);
La tinica diferencia entre la estructura while y la estructura do...while esté en
la primera vez que se ejecuta el bucle:
+ [a estructura while comprueba la condicién antes de entrar por prime-
ra vez en el bucle y si la condicién no se cumple, 0 no entrara.
+ {a estructura do...while ejecuta el bucle la primera vez sin comprobar
la condicién.
Para las demés iteraciones el funcionamiento es idéntico en ambas estruc-
turas (linicamente se producen variaciones en el caso de utilizar la clausu-
la continue).
EI siguiente ejemplo (Ejemplo14.htmi) utiliza un bucle do.
el ejercicio del Ejemplo13.html, pero ahora utilizando do.
while para resolver
ple.
co)
El siguiente cédigo (Ejemplo16.html) es igual que el anterior pero devolverd,
ademés, la media de los nmeros tecleados. Para calcular la media se nece-
sita contar el ntimero de valores que han sido introducidos y sumarlos. Ast,
la media es el resultado de dividir la suma de los numeros lefdos entre e!
contador de nuimeros lefdos. Antes de dividir hay que comprobar que el con-
tador de numeros sea mayor que 0, porque si es O dard error al dividir por 0,
Las medias se calculan cuando finaliza el bucle.
ea
objeto window utlizado en JavaScript
‘26 o objeto bisico, es decir ol elemento
Brincipal del modelo de objetos, y repre
‘seta en si mismo a propio navegador y
las ventanas que se abren. Los métodos
Drincipales de este objeto son: opend),
‘lose, alert, confirm), prompt). Pete nea
La sintaxis basic para utlizar el método
window open ea siguiente:
‘window. open (URL, nombre)
En UAL se espeotca la deccin a abi
En nombre se puede especticar el nom-
‘bre dela ventana o también ls siguientes
atibuios de destino:
__blank— La UAL se carga en una nueva
ventana, sel valor por defect.
__parent —La URL se carga dentro dela
ventana pare.
_-solf—La URL susttuye ala pigina actual.
top ~La UAL sustuye a todas ls pagi-
‘as que fueron cargadas.
RET)
Act
Maia)
Resuelve el ejerciclo anterior utilzando un bucte do...while. Guarda el ejercicio
‘como Ejemplo16_1.ntm.
Crea una pagina que incluya un script que lea cinco ndmeros de teclado y
que visualice la suma de ellos. Utiiza un bucle do...while. Guarda el ejercicio
‘como Ejemplo16_2.htm.
Resuelve el ejercicio anterior utlizando un bucle while. Guarda el ejercicio
‘como Ejemplo16_3.htmi.
Crea una pagina que incluya un scriot para leer el nombre y Ia edad de tres
alunos. Y calcula la edad media de los alumnos. Al leer le edad hay que
validarla comprobando que esté entre 13 y 100, utiliza para ello un bucle,
do...wile, 0 while. Guarda el ejercicio como Ejemplo16_4.htm).
Realiza los cambios necesarios al ejercicio anterior para que lea también el
‘sexo del alumno, H 0 h para hombres y M om para mujeres. Valida esta en-
‘trada, Guarda el ejerciclo como Ejemplo16. 5.htr.
Realiza los cambios necesarios al ejercicio anterior para que cuente el nu-
mero de hombres y el ndmero de mujeres que se han lefdo, y los visualice.
Guarda el ejercicio como Ejempio16_6.html.
Realiza los cambios necesarios al ejercicio anterior para que lea también la
nota del alumno. Valida esta entrada haciendo que la nota sea valida si esta
entre 0 y 10. Y que visualice también la nota media. Guarda el ejercicio como
Elemplot6.7.ntml.
8.5.3 Estructura for
Lae
trolai
sstructura for ejecuta un bucle un numero determinado de veces con-
indo automaticamente el numero de repeticiones o iteraciones. La uti-
lizaremos siempre que sepamos previamente el ntimero de veces que se
ejecutard el bucle. Su formato genético es el siguiente:
for (Variablecontrol = ValorInicio;
Condiciéncontinuacién; ExpresiénIncremento)
{
Instrucciones;
Donde:
VariableControl: es una variable interna o local al bucle (no hay que
declararla previamente) que se utiliza normalmente como contador
del ntimero de ejecuciones del bucle en cada momento.
Valorinicio: es el valor inicial que tomaré la VariableControl
CondiciénContinuacién: es una condicién que seré comprobada antes
de realizar cada ejecucién del bucle. Si se cumple, se ejecutard el blo-
que de instrucciones; en caso contrario, pasard el control a la linea si-
guiente al final de la estructura
Expresiénincremento: es una expresién que modificaré el valor de la
variable de control. Normalmente se trata de una simple suma pero
puede ser cualquier expresién que permita en algin momento la sali
da del programa. \Veamos un ejemplo sencillo.
El siguiente c6digo (Ejemplo18.htm)) lee un ntimero de teclado y calcula y
visualiza su factorial. Sabiendo que el factorial de un nimero N se calcula
‘multiplicando los nimeros desde 1 hasta é! mismo incluido, es decir facto-
rial de N= 1 * 2 * 3...* N. Si el ndimero N es O, el factorial de N es 4. El
factorial acumula productos con lo que es necesario iniciarlo a 1, si se ink
cializa a 0, al multiplicar por 0, nos devolverd 0.
Pres
Prueba el siguiente ejemplo de uso de
los atributs de window.opend:
<1pocryre ntml>
button onelicke"vindow.
fopen( "https //www.goosle-
fes')">Ventana Nievac/button>
button oneLick="window.
open( 'attps / ww. google.
5", '_parent ')">Ventana
Padrec/batton>
button onclick="window.
fopen( "http: / new. google.
"_self')">Ventana Selt
A"=B && C==D: “ + (AS=B EE C==D)); document .write(“
A>B && C>D: “ + (A>B && C>D)); document .write("
A< B && C< Di " + (AS B && C
A==B || C==D: “ + (Ae=B || C==D)); document.write(“
D>A || C>D: “ + (D>A || C>D)); document.write(“
a< B || C> D: “ + (A< B || C> D)); document .write( “
1(D>A): " + 1(D>A))7 document.write(*
1(A< B): “ + 1(A< B) eta Cambia el ejercicio anterior y muestra las comparaciones de evaluar si C y D son distintos. Si A no es mayor que B. SiC es mayor que Ay que B. SiD es me~ ‘nor que Ay que B. SiA es menor que B 0 A es mayor que D. Si A es igual a B 0 A igual a C. Utliza los operadores légicos. Guérdalo con el nombre Ejemplo7_1. 8.4 Estructuras de control Las pruebas realizadas hasta ahora han consistido en la ejecucién lineal de tuna serie de instrucciones basicas. En este apartado vamos a incluir las es- tructuras de control de flujo que van a permitir realizar una serie de instruc- clones 0 realizar otra serle de instrucciones dependiendo de si se cumple 0 no una condicién. Es decir, vamos a poder preguntar por el valor de las va- riables 0 expresiones y dependiendo del resultado se ejecutardn unas accio- nes 0 se ejecutarén otras. 8.4.1 Estructura if ‘Se emplea para tomar decisiones en funcién de una condicién. Si se cum ple una determinada condicién se ejecutaré un conjunto de instrucciones, sino se cumple no se hace nada, sigue en secuencia. El diagrama de flujo se representa en la Figura 8.12 y el formato es el siguiente: 8 LENGUAJE JAVASCRIPT v False Tre <<7/Condicién > Instruecionest. I Instrucciones2 Figura 8.12. Estructura if if (condicién) { // se afaden las instrucciones a ejecutar //si se cumple 1a condicién Instrucciones: Instrucciones: Donde: * condicién es cualquier expresién que devuelva un valor légico (true/ false). Si la condicién se cumple (es decir, si su valor es true) se eje- cutan todas las instrucciones que se encuentran dentro de {...}. Si la condicién no se cumple (es decir, si su valor es false) no se eje- cuta ninguna instruccién contenida en {...} yel programa continda ejecutando el resto de instrucciones del script. + instrucciones es un bloque de una o més instrucciones que se ejecu- taran solo en el caso de que se cumpla la condici6n. Si se trata de Una sola instruccién podemos prescindir de las llaves ({)). El c6digo del siguiente script (E/emplo8.htm!) visualiza la alerta con la varia- ble Mensaje, cuyo contenido es: “Probando 1a estructura if” por que [a variable mostrarMensaje es igual a true. Prueba el mismo ejemplo asignando false a la variable mostrarMensaje. El ejemplo se podria reescribir también como: var Mensaje= “Probando la estructura if"; var mostrarMensaje = true; if (mostrarMensaje==true) { alert (Mensaje); } El siguiente ejemplo (Ejempio09.htmi) lee una nota introducida por teclado y, sila nota es igual 0 mayor que 5, visualizaré una alerta con el texto FAPRO- BADO!, en caso contrario no haré nada. on ansa ne) Modifica la Actividad propuesta 8.7, indicando si la media del alumno es ma- Yor o igual a 5 que visualice APROBADO, y si no lo es que visualice SUSPENSO. Guérdalo como Efemplo9_2.html. Realiza una pagina que lea el nombre, la edad y la nota de un alumno y visuall- ce en el documento (utiliza document write) el nombre del alumno, su edad, si les mayor de edad 0 menor de edad, su nota y si esté aprobado o suspenso. Uti liza titulos. Gudrdalo como Ejemplo9_3.ntm!. ‘Todas las estructuras de control se pueden anidar, es decir escribir una den- ‘ro de otra. En el siguiente ejemplo (Ejemplo40.htm!) se utiliza el at to de estructuras para realizar comprobaciones adicionales. <1DOcTYPE htm1>
Esto esta dentro del body.
Un programa que se escibe en un en= -guaje de alto nivel tiene que traducirse a ch si oe oom ey ~ crea una pghe que okay unset que lea (mediante prompt) na can. | | L2SPOURMER atcen an pbon ded nod por tela, sl 98100 que eule ena octets ia | | rsa Cantidad y la cantidad més 200. Si la cantidad esté entre 101 y 200 que vi- sSualice en el documento la cantidad y la cantidad multiplicada por 2. Si la Cantidad es negativa que visualice en el documento la cantidad y ES NEGATI- VA, en otro caso que visualice en el documento la cantidad y la cantidad mul- tiplicada por 3. Guardalo como Ejemplo10_1.html. + Crea una pagina que incluya un seript que lea (mediante prompt) una edad Introducida por tectado y visualice que no es correcta la edad si es mayor de 110, 0 es menor de 0. Visualice que es mayor de edad si es mayor de 18, y Visualice menor de edad si es menor de 18. Utliza la orden document.write. Guérdalo como Ejemplo10_2.htm!. *+ Crea una pagina que incluya un script para introducir por teclado el sexo, que | deberd ser Ho Moh o my visualizar en una alerta Hombre si es H on, Mu- ara leer datos numéricosenteos utiza- Jer si es Mo my eror sino es H,h, mo M. Guardalo como Ejempio10_3. remos la orden parse). nem. *+ Crea una pagina que incluya un script para leer de teclado dos nimeros y vi- sualizar si son iguales, 0 cual es el mayor y cual el menor. Guérdalo como Ejemplo10_4.hum 8.4.3 Estructura alternativa miiltiple Esta opcién se utiliza cuando se quiere comprobar los multiples valores que puede tomar una variable o una expresién, puede sustituir a muchos if en- cadenados. El diagrama de flujo se muestra en la Figura 8.14 y el formato es el siguiente: switch (expresién) { case valor. instrucciones1; break; case valor2: instrucciones2; break; case valor3: instrucciones3; break; case valorn: instruccionesn; break; [default instrucciones;} 8 LENGUAJE JAVASCRIPT ‘Un compitador es un programa que pue- de leer otro programa escrito en un de- terminado lenguaj (un lengua fuente) y ‘radu en un programa equivalete en ‘otro lenguale enguele destin), El com- Dilador devolverderrores si el programa en el lenguae fuente no est ben esto. El programa destino se podra ajecutar st el lenguaje destino es drectament eje- | eutabl porta maquina, 340 Dondi + expresi6n es cualquier expresi6n o variable valida con la que se com- pararén los valores que acompafian a la cléusula case. + valori,..valorn son valores que suponemos puede tomar la expresién o variable a los que les sigue la instruccién o instrucciones que que- remos que se ejecuten en cada caso. + defautt es una cléusula opcional, se ejecutarén las instrucciones que la siguen en el caso de que el valor no coincidiese con ninguno de los casos contemplados. El funcionamiento de esta estructura es el siguiente: 1. Calcula el valor de expresian. 2. Comprueba desde el principio cada valor que acompafia a las cléusu- las case hasta encontrar alguno que coincida con el valor de expre- sin. 3. Cuando encuentra un valor que coincida con expresién ejecuta las ins- trucciones correspondientes hasta que encuentra la cléusula break. Los valores si no se pasan a numéricos (por ejemplo, al leer, si se pone parseint aseguramos que la entrada es un nimero entero) se han de preguntar entre comillas, como caracteres 0 cadenas, porque los considera caracteres. 4, Sino encuentra ningun valor que coincida con expresién ejecuta las instrucciones correspondientes a la cléusula default (si existe, en caso contrario no hard nada). 5. Sale del bloque de la estructura switch..case. Observaciones: * La cldusula break que aparece en este formato no es obligatoria pero sino se utiliza cambiard el funcionamiento de la estructura switch case. Esta cldusula es la responsable la salida del bloque una vez ‘ue se ejecuten las instrucciones de una de las cldusulas case. Sino se pone, se seguirdn ejecutando todas las instrucciones hasta llegar al final. Es decir, las cldusulas ease sin break actuarfan como puntos de entrada a la estructura, siendo la salida la misma en todos los casos. + Para una misma cléusula case se pueden especificar diversos valores. en lugar de un nico valor, en este caso se indicarén los valores sepa- rados por comas segiin el formato: case valor: case valor2: case valor3: instrucciones; break; Por ejemplo, se visualiza una alerta si la expresién que se evalla vale 10, 20.030: case 10 case 2 case 30: alert("E1 valor de la variable es 10, 20 0 30"); break; Pres Los intérpretes son otra aterativapa- ra traduor os programas escrts en ln- quale de ato nivel. En este caso, en vez de producir un programa destino como resultado del proceso de traducci6n, intérprete nos da la apariencia de eecu- ‘tar drectamente las operaciones espe- ‘ficadas en el programa fuente con las ‘entradas proporionadas por él. Cada vez El siguiente ejemplo (Ejemplo11.html) muestra la utilizacién de una estruc: que se ejecuta una instruccién se debe tura alternativa multiple anidada dentro de una estructura alternativa doble. interpretarytraduciralenguaje maquinaEsto estd dentro del body.
En esta ocasi6n, en lugar de ejecutar una alerta para cada caso, se ha opta- do por guardar el texto a mostrar en la alerta en la variable Calificacion para, al final, mostrar el contenido de dicha variable. Observa también que la va- Tiable Nota se redondea antes de comprobar su contenido (Nota = Math. round(Nota);) ya que los valores de las cldusulas case deben ser exactos (5, 6, eto.) El siguiente script (Ejemplo12.htmi) lee el numero del dia de la semana y vi sualiza en una alerta el nombre del dia, el 1 es lunes, el 2 es martes, el 3 es miércoles, el 4 es jueves, y asf sucesivamente. onrehatcante *+ Crea una pagina que incluya un script que permita leer un mes de teclado (el ‘ndmero de mes), y visualice en una alerta el nombre del mes lefdo: enero, fe- brero, marzo, etc. Guarda el ejercicio como Ejemplo12_thtm *+ Crea una pagina que incluya un script que permita leer dos numero de te- clado y un carécter que seré la operacion de célculo a realizar. Este carécter seré * para multiplicar, + para sumar, ~ para restar y / para divdi. Utliza una estructura switch para preguntar por la operacion y realiza el calculo. Visualiza el resultado de Ia operacion en el documento de manera que se vean los dos ‘ndmeros, la operacién y el resultado. Por ejemplo, si leemos de teclado 10, 30 y +, se ha de visualizar en la pagina: 10 + 30 = 40, Sila operacién tecleada es errénea se visualiza en el documento el mensaje “Error en la operacién.” Guarda el ejercicio como Ejemplo12_2.html. Pea * Crea una pagina que incluya un script que permita leer un ndmero de mes de teclado y a partir de ese mes calcula la productividad. La productividad es 1100 + el factor del mes. Y el factor del mes es el siguiente: Los meses enero, febrero y marzo tienen factor 15. Los meses abril, mayo y junio tienen factor 17. Los meses septiembre, octubre y noviembre tienen factor 20. Y diciembre tiene factor 21. ‘Sino son esos meses el factor es 0. Visualiza la productividad en el documento, indicando: El nombre de mes es Nombre:Mes y Ia productividad resultado. Visualiza “Error en e/ mes” si el ndmero de mes tecleado no esta entre 1 yi2. Guarda el ejercicio como Ejempio12_3.htm|. + Crea una pagina que inciuya un script para leer de teclado el nombre de em- pleado, su salario y su niimero de departamento. Se pretende subir el salario de los empleados, Para subir el salario preguntamos por el niimero de depar- tamento, Siel departamento es 10, la subida de salario serd de 100. Siel departamento es 20, la subida de salario seré del 5 % Sil departamento es 30, la subida de salario seré del 4 %. Sies otro departamento la subida serd de 75. Visualiza en el documento el nombre del empleado, el salario, la subida de salario, y el nuevo salarlo que sera la suma del salario mas la subida. Visualiza: Nombre empleado: nombye_leido, su salario es: salario_Jeido, su departamento es: depart leido, la subide es: subida_calculada, y el nuevo salaro es: salario_ leido més ia subida_caleulada. Guarda el elercicio como Ejempio12_4.htm|. 8.5 Estructuras repetitivas En ocasiones necesitaremos que un bloque de instrucciones se ejecute va- rias veces seguidas; en estos casos utilizaremos estructuras repetitivas 0 bucles. En JavaScript disponemos de las siguientes: False 8.5.1 Estructuras while La estructura while ejecuta un bloque de instrucciones y repite dicha ejecu- cién mientras que se cumpla una condicién. El diagrama de flujo se repre- senta como se muestra en la Figura 8.45 y el formato es el siguiente: Instruciones er L_] { Flew 825. Etec whl, instruceiones; + Dondi + condicién es la condicién a evaluar, si su valor es true se entraré en el bucle y se repetiré mientras se cumpla la condicién. Sera comproba- do antes de cada nueva ejecucién del bloque de instrucciones. + instrucciones es el bloque de instrucciones que se ejecutara si se cumple la condici6n. Funcionamiento: 1. Al encontrar la estructura while lo primero que hace (antes de entrar or primera vez en el bucle) es evaluar la condicién: si es verdadera entra en el bucle y ejecuta el bloque de instrucciones, pero si es falsa ni siquiera llegard a entrar en el bucle. 2. Una ver ejecutadas las instrucciones del bucle se evalda de nuevo la condicién para determinar si se vuelve a ejecutar el bloque 0 no (si es verdadera se ejecuta, si es falsa deja de ejecutarse). Este punto se repite hasta que la condicién deja de ser verdadera 3, Cuando al evaluar la condici6n el resultado es false, el flujo del pro- ‘grama va a la linea siguiente al final del bucle. EI siguiente ejemplo (Ejemplo13.htm) utliza esta estructura para validar la lectura de una nota, lo que hace es leer una nota que esté comprendida en- tre Oy 10y asi asegurarse que se teclea una nota correcta. Primero se lee la nota y el bucle verifica que sea correcta. La ultima instruccién del bucle es volver a leer la nota. Se saldré del bucle cuando se teclee la nota correc- ta. El while se ejecuta mientras la nota sea menor de 0 (error, nota negativa) © la nota sea mayor de 10 (nota errénea), en ese caso se lee. Observaciones: + Hay que asegurarse de que en algtin momento se produzca la salida del bucle ya que de lo contrario estarfamos ante un bucle infnito. Por ejemplo, si en lugar de la condicién while (Nota <0 || Nota > 10) hu biésemos escrito: while (Nota > 0 || Nota < 10) el bucle hubiese es- tado iterando constantemente y no finalizaria nunca, + Para que esta salida se produzca se deberé modificar el valor de la expresion. En nuestro caso la modificacién se produce al leer un nue- vo valor del teclado ‘+ Se puede forzar una salida del bucle en cualquier momento mediante la cldusula break. + También se puede forzar a realizar un nuevo ciclo atin sin terminar to- das las instrucciones del bucle mediante la cléusula continue. Pero ninguna de estas dos ditimas opciones es recomendable ya que dificultan la legibilidad de los programas y, por tanto, su posterior mantenimiento, Pea asa eee + Utiizando et cédigo anterior, anade las Instrucciones necesarias para leer la Variable sexo y validar que sea un valor correcto, H 0 h para Hombre y Mom para Mujer. Visualiza con document.write los valores correctos. Guarda el ejer- ciclo con el nombre Ejemplo13_4.htm. + Crea una pagina que incluya un script para leer niimeros de teclado y visuali- zatlos en la pagina. Leer ndmeros hasta que sea un 0, cuando el niimero lefdo sea un O finalizar el bucle. El bucle se ejecutaré mientras el ndmero lefdo sea distinto de 0. Guarda el ejercicio con el nombre Ejemplo13_2.html. 8.5.2 Estructuras do...while La estructura do...while es similar a la anterior, pero en este caso la compro- bacién se produce después de ejecutar el bloque de instrucciones. El diagra- ‘ma de flujo se representa como se muestra en la Figura 8.16 y el formato es el siguiente: do { Instrucciones; t while(condici6én); La tinica diferencia entre la estructura while y la estructura do...while esté en la primera vez que se ejecuta el bucle: + [a estructura while comprueba la condicién antes de entrar por prime- ra vez en el bucle y si la condicién no se cumple, 0 no entrara. + {a estructura do...while ejecuta el bucle la primera vez sin comprobar la condicién. Para las demés iteraciones el funcionamiento es idéntico en ambas estruc- turas (linicamente se producen variaciones en el caso de utilizar la clausu- la continue). EI siguiente ejemplo (Ejemplo14.htmi) utiliza un bucle do. el ejercicio del Ejemplo13.html, pero ahora utilizando do. while para resolver ple. co) El siguiente cédigo (Ejemplo16.html) es igual que el anterior pero devolverd, ademés, la media de los nmeros tecleados. Para calcular la media se nece- sita contar el ntimero de valores que han sido introducidos y sumarlos. Ast, la media es el resultado de dividir la suma de los numeros lefdos entre e! contador de nuimeros lefdos. Antes de dividir hay que comprobar que el con- tador de numeros sea mayor que 0, porque si es O dard error al dividir por 0, Las medias se calculan cuando finaliza el bucle. ea objeto window utlizado en JavaScript ‘26 o objeto bisico, es decir ol elemento Brincipal del modelo de objetos, y repre ‘seta en si mismo a propio navegador y las ventanas que se abren. Los métodos Drincipales de este objeto son: opend), ‘lose, alert, confirm), prompt). Pete nea La sintaxis basic para utlizar el método window open ea siguiente: ‘window. open (URL, nombre) En UAL se espeotca la deccin a abi En nombre se puede especticar el nom- ‘bre dela ventana o también ls siguientes atibuios de destino: __blank— La UAL se carga en una nueva ventana, sel valor por defect. __parent —La URL se carga dentro dela ventana pare. _-solf—La URL susttuye ala pigina actual. top ~La UAL sustuye a todas ls pagi- ‘as que fueron cargadas. RET) Act Maia) Resuelve el ejerciclo anterior utilzando un bucte do...while. Guarda el ejercicio ‘como Ejemplo16_1.ntm. Crea una pagina que incluya un script que lea cinco ndmeros de teclado y que visualice la suma de ellos. Utiiza un bucle do...while. Guarda el ejercicio ‘como Ejemplo16_2.htm. Resuelve el ejercicio anterior utlizando un bucle while. Guarda el ejercicio ‘como Ejemplo16_3.htmi. Crea una pagina que incluya un scriot para leer el nombre y Ia edad de tres alunos. Y calcula la edad media de los alumnos. Al leer le edad hay que validarla comprobando que esté entre 13 y 100, utiliza para ello un bucle, do...wile, 0 while. Guarda el ejercicio como Ejemplo16_4.htm). Realiza los cambios necesarios al ejercicio anterior para que lea también el ‘sexo del alumno, H 0 h para hombres y M om para mujeres. Valida esta en- ‘trada, Guarda el ejerciclo como Ejemplo16. 5.htr. Realiza los cambios necesarios al ejercicio anterior para que cuente el nu- mero de hombres y el ndmero de mujeres que se han lefdo, y los visualice. Guarda el ejercicio como Ejempio16_6.html. Realiza los cambios necesarios al ejercicio anterior para que lea también la nota del alumno. Valida esta entrada haciendo que la nota sea valida si esta entre 0 y 10. Y que visualice también la nota media. Guarda el ejercicio como Elemplot6.7.ntml. 8.5.3 Estructura for Lae trolai sstructura for ejecuta un bucle un numero determinado de veces con- indo automaticamente el numero de repeticiones o iteraciones. La uti- lizaremos siempre que sepamos previamente el ntimero de veces que se ejecutard el bucle. Su formato genético es el siguiente: for (Variablecontrol = ValorInicio; Condiciéncontinuacién; ExpresiénIncremento) { Instrucciones; Donde: VariableControl: es una variable interna o local al bucle (no hay que declararla previamente) que se utiliza normalmente como contador del ntimero de ejecuciones del bucle en cada momento. Valorinicio: es el valor inicial que tomaré la VariableControl CondiciénContinuacién: es una condicién que seré comprobada antes de realizar cada ejecucién del bucle. Si se cumple, se ejecutard el blo- que de instrucciones; en caso contrario, pasard el control a la linea si- guiente al final de la estructura Expresiénincremento: es una expresién que modificaré el valor de la variable de control. Normalmente se trata de una simple suma pero puede ser cualquier expresién que permita en algin momento la sali da del programa. \Veamos un ejemplo sencillo. El siguiente c6digo (Ejemplo18.htm)) lee un ntimero de teclado y calcula y visualiza su factorial. Sabiendo que el factorial de un nimero N se calcula ‘multiplicando los nimeros desde 1 hasta é! mismo incluido, es decir facto- rial de N= 1 * 2 * 3...* N. Si el ndimero N es O, el factorial de N es 4. El factorial acumula productos con lo que es necesario iniciarlo a 1, si se ink cializa a 0, al multiplicar por 0, nos devolverd 0. Pres Prueba el siguiente ejemplo de uso de los atributs de window.opend: <1pocryre ntml>