CICLO: 0/2015
GUIA DE LABORATORIO #3
Nombre de la Practica: Estructuras de control: sentencias repetitivas y matrices
Lugar de Ejecucin: Centro de Cmputo
Tiempo Estimado:
2 horas con 30 minutos
MATERIA:
Lenguajes Interpretados en el Cliente
I. OBJETIVOS
Que el estudiante:
Adquiera dominio en el uso de sentencias repetitivas, ciclos o lazos del lenguaje JavaScript.
Aplique sentencias repetitivas en la solucin de problemas que requieran repetir un conjunto de
instrucciones.
Utilice sentencias repetitivas anidadas con lenguaje JavaScript.
Haga un uso apropiado de sentencias de control de ciclos o lazos (break y continue).
Utilice matrices en la solucin de problemas prcticos.
Sea capaz de definir matrices unidimensionales y multidimensionales para resolver problemas.
Sepa utilizar estructuras de control repetitivas para asignar, acceder, eliminar y ordenar los elementos de
una matriz.
Utilice funciones para facilitar el manejo de matrices en JavaScript.
II. INTRODUCCION TEORICA
Las sentencias repetitivas son el medio que brindan los lenguajes de programacin para poder repetir un
bloque o conjunto de instrucciones ms de una vez. Estas sentencias suelen llamarse lazos, ciclos o bucles. El
nmero de veces que se repite el ciclo o lazo es controlado mediante una condicin o mediante el valor de un
contador. Cuando se trata de una condicin, se involucra una variable cuyo valor cambia cada vez que se
ejecuta el lazo. En el caso de una variable contador aumenta de valor de forma automtica, cada vez que se
ejecuta el lazo hasta llegar a un valor mximo definido en el contador.
JavaScript proporciona varios tipos de sentencias repetitivas o lazos, entre ellos se pueden mencionar: for,
while y do ... while. Otras instrucciones particulares de JavaScript, relacionadas con el uso de objetos, son for
in y with.
Sentencia for
Permite crear un lazo o bucle que se ejecutar un nmero determinado de veces. Utiliza una variable
contador, una condicin de comparacin, una instruccin de incremento (o decremento) del contador y una o
ms instrucciones que forman parte del cuerpo del lazo o bucle. Estas instrucciones se repetirn tantas veces
hasta que la condicin de comparacin se evale como falsa.
La sintaxis de la sentencia for es la siguiente:
1 / 26
Ejemplo:
document.write("Conteo hacia atrs<br>");
for(var i=10; i>=0;i--){
document.write("<b>" + i + "</b>");
document.write("<br>");
}
document.write("Fin del conteo.");
El bucle while
Otra forma de crear un bucle es utilizando la sentencia while. Funciona de forma similar al for, pero su
estructura sintctica es completamente diferente. La estructura bsica es:
while (condicion) {
//bloque de cdigo ;
}
Donde, condicion es cualquier expresin JavaScript vlida que se evale a un valor booleano. El bloque de
cdigo se ejecuta mientras que la condicin sea verdadera. Por ejemplo:
var nTotal = 35;
var con = 3;
while (con <= nTotal) {
alert("El contador con es igual a: " + con);
con++;
}
El resultado es el mismo que en el ciclo for, aunque su construccin sintctica es muy diferente. El ciclo
comprueba la expresin y contina la ejecucin del cdigo mientras la evaluacin sea true. El bucle while no
tiene requiere que la variable de control del ciclo o lazo se modifique dentro del bloque de instrucciones para
que en determinado momento se pueda detener la ejecucin del lazo.
El bucle do ... while
Esta instruccin es muy similar al ciclo while, con la diferencia que en esta, primero se ejecutan las
instrucciones y luego, se verifica la condicin. Esto significa que, el bloque de instrucciones se ejecutar con
seguridad, al menos, una vez. Su sintaxis es:
do {
//bloque de cdigo ;
} while (expresin_condicional);
La diferencia con el anterior bucle estriba en que la expresin condicional se evala despus de ejecutar el bloque
de cdigo, lo que garantiza que al menos una vez se ha de ejecutar, an cuando la condicin sea false desde el
principio.
var nTotal = 35;
var con = 36;
do {
alert("El contador con es igual a: " + con);
con++;
} while (con <= nTotal);
En este ejemplo, el bucle se repetir hasta que la variable con llegue al valor 20, entonces se ejecuta la
sentencia break que hace terminar el bucle en ese punto.
El comando continue es un tanto diferente. Se utiliza para saltar a la siguiente repeticin del bloque de
cdigo, sin completar el pase actual por el bloque de comandos.
var nTotal = 70;
var con = 1;
do {
if ( con == 10 || con == 20 || con == 30 || con == 40)
continue;
alert("El contador con es igual a: " + con);
con++;
} while (con <= nTotal);
En el ejemplo, cuando la variable con alcance los valores 10, 20, 30 y 40 continue salta el resto del bloque de
cdigo y comienza un nuevo ciclo sin ejecutar el mtodo alert().
Sentencia for in
Este es un lazo o bucle relacionado con objetos y se utiliza para recorrer las diversas propiedades de un objeto.
La sintaxis es la siguiente:
for (nombredevariable in objeto) {
//instruccion o bloque de instrucciones;
}
Sentencia with
Sintaxis:
with(objeto){
instruccion o bloque de instrucciones;
}
La instruccin with permite utilizar una notacin abreviada al hacer referencia a los objetos. Es muy
conveniente a la hora de escribir dentro del cdigo del script un conjunto de instrucciones repetitivas
relacionada con el mismo objeto. Por ejemplo, si se tiene el siguiente conjunto de instrucciones:
document.write("Hola desde JavaScript.");
document.write("<br>");
document.write("Ests aprendiendo el uso de una nueva instruccin de JavaScript.");
Una matriz es una coleccin ordenada de valores, donde cada valor individual se denomina elemento y cada
elemento es ubicado en una posicin numrica dentro de la matriz. Esta posicin es conocida como ndice.
Tome en cuenta que como JavaScript es un lenguaje dbilmente tipificado, los elementos de la matriz pueden
ser de cualquier tipo y los distintos elementos de una misma matriz pueden ser tambin de tipos diferentes.
Incluso, estos elementos pueden ser tambin matrices, lo que permitira definir una estructura de datos que
sea una matriz de matriz.
Un arreglo en JavaScript es tratado como un objeto especial llamado Array. Los elementos de un arreglo en
JavaScript se comienzan a contar desde el elemento cero [0]; es decir, el elemento con ndice cero [0] es el
primer elemento del arreglo, el elemento con ndice uno [1] es el segundo, y as sucesivamente.
Para acceder a los elementos de un arreglo individualmente, debe utilizarse el nombre del arreglo y el ndice
que indica la posicin del elemento deseado entre corchetes ([, ]). Primero se coloca el nombre y, a
continuacin, encerrado entre corchetes el ndice. Por ejemplo, para acceder al tercer elemento del arreglo
llamado miArreglo, debe digitar lo siguiente: miArreglo[2].
Declaracin de matrices en JavaScript
La declaracin de arreglos en JavaScript puede hacerse de dos formas. La primera utilizando corchetes, como
se muestra a continuacin:
var impares = [];
La segunda utilizando el constructor Array() de la siguiente forma:
var pares = new Array();
Cuando se usa el constructor Array() es posible definir el tamao del arreglo colocando entre parntesis el
nmero de elementos que tendr el arreglo con un valor entero. Como se muestra a continuacin:
var dias = new Array(5);
La instruccin anterior crea un arreglo llamado dias y define que el nmero de elementos de este arreglo ser
cinco.
Introduccin de elementos en una matriz
Se pueden introducir elementos a un arreglo de varias formas. Entre las que se pueden mencionar:
a) Asignando un dato a un elemento del arreglo de forma directa,
b) Asignando una lista de valores al arreglo,
c) Pasando argumentos al constructor Array()
A continuacin, se muestran tres ejemplos de cada una de las formas de introducir elementos en un arreglo de
JavaScript:
//Asignando un dato a un elemento del arreglo
var dias = [];
dia[0] = "Domingo";//Al primer elemento del arreglo se le ha asignado el valor Domingo
dia[1] = "Lunes"; //Al segundo elemento del arreglo se le ha asignado el valor Lunes
Cantidad
1
1
1
IV. PROCEDIMIENTO
Ejercicio #1: Clculo del promedio de notas ingresado, solicitando la cantidad de notas a ingresar. En este
ejemplo el promedio se calcula como la suma de las notas entre la cantidad de notas ingresadas.
Guin 1: promedio.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Promedio de notas</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/promedio.css" />
<script type="text/javascript" src="js/promedio.js"></script>
</head>
<body>
</body>
</html>
Guin 2: promedio.css
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
}
h1
{
background-color:SkyBlue;
border:groove 5px blue;
text-align:center;
font-family:"Arial Black";
{
color:brown;
font-family:"Bookman Old Style";
font-weight:600;
font-size:1.8em;
text-align:center;
Guin 3: promedio.js
//Declaracin de las variables a utilizar
var i,num,nota,notaactual,promedio;
//Captura de la cantidad de notas que se ingresarn
num = parseInt(prompt("Cuntos notas va a ingresar?",""));
//Definiendo un valor de inicializacin para la variable que almacenar el promedio
nota = 0;
document.write("<h1>Promedio</h1><hr>");
//Ciclo o lazo que permitir ingresar cada nota
for (i=1;i<=num;i++){
notaactual = parseFloat(prompt("Ingrese la nota " + i + ": ",""));
document.write("<h3>La nota " + i + ": " + Math.round(notaactual * Math.pow(10,2)) /
Math.pow(10,2) + "</h3>");
nota += notaactual;
}
//Obteniendo el clculo del promedio
promedio = nota / (i-1);
//Imprimir el valor redondeado a dos decimales del promedio
document.write("<h3>El promedio de las notas es: " + Math.round(promedio * Math.pow(10,2))
/ Math.pow(10,2) + "</h3>");
Resultado:
Guin 2: nav.css
body {
background-color: #22CC99;
font-size: 16px;
}
h1
{
color: yellow;
font-family: "Bookman Old Style";
font-size: 20pt;
text-align: center;
}
table
{
background-color;Cornsilk;
border:outset 8px DarkCyan;
color: white;
font-family: "Century Gothic";
font-size: 12pt;
font-weight:600pt;
text-align: left;
}
th
{
background-color:Teal;
border-color:DarkCyan;
border-style:solid;
color:SpringGreen;
font-size:14pt;
font-weight:900;
text-align:center;
}
td
{
border-color:DarkCyan;
border-style:solid;
color:white;
font-size:12pt;
font-weight:600;
text-align:left;
Guin 3: propiedadesnav.js
//Declarar variables e inicializarlas, si es conveniente
var propiedad, str="";
document.write("<h1>Propiedades del objeto Navegador</h1><hr>");
document.write("<table>");
document.write("<tr><th>Propiedad</th><th>Valor</th></tr>");
for(propiedad in navigator){
10
Ejercicio #3: Encuesta que permite votar y seguir opinando sobre una pregunta. Cada vez que se emite la
opinion se vuelve a preguntar si desea seguir votando. Mientras responda que si desea continuar, se le
volver a pedir la opinion, hasta que responda que ya no. En ese momento se emitirn los resultados. Se
utiliza una tcnica conocida como ciclo infinito para implementar la solucin.
Guin 1: encuesta.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Encuesta sobre ley antimaras</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/encuesta.css" />
<script type="text/javascript" src="js/encuesta.js"></script>
</head>
<body>
</body>
</html>
Guin 2: encuesta.css
body {
background-color:Lavender;
color:Indigo;
font-family:Garamond;
}
h1
{
font-size:18pt;
font-weight:700;
text-align:center;
}
table {
border:outset 5px MediumSlateBlue;
font-family:"Century Gothic";
font-size:10pt;
color:SlateBlue;
background-color:LightCyan;
}
th
{
border-style:solid;
border-width:1px;
font-size:11pt;
color:white;
background-color:SlateBlue;
text-align:center;
vertical-align:middle;
}
td
{
border-style:solid;
border-width:1px;
color:SlateBlue;
font-size:10pt;
11
Guin 3: encuesta.js
//Declaracin de variables
var voto;
var opcion=true;
var cont1 = cont2 = cont3 = 0;
var total;
var per1, per2, per3;
//Mostrar las instrucciones para responder
document.write("<h1 align='center'>Encuesta para detectar cuntas personas estn a favor
de la ley antimaras</h1><hr>");
document.write("<b>Digite \"1\" si esta a favor</b><br>");
document.write("<b>Digite \"2\" si esta en contra</b><br>");
document.write("<b>Digite \"3\" si se abstiene de opinar</b><hr>");
//Ciclo repetitivo infinito donde se captura voto por voto
//en tanto no se de por terminada el ingreso de respuesta de la encuesta
while(opcion==true){
voto = parseInt(prompt('Cul es su Voto ?',''));
switch (voto){
case 1:
cont1++;
break;
case 2:
cont2++;
break;
case 3:
cont3++;
break;
default:
alert('Voto no vlido!');
}
//Se pregunta si se desea terminar la encuesta o continuar
opcion = confirm('Desea continuar s/n?');
}
//Obtener el total de respuestas de la encuesta
total = cont1 + cont2 + cont3;
//Obtener el porcentajes de la primera respuesta
per1 = Math.round((cont1 / total) * Math.pow(10,2)) / Math.pow(10,2);
//Obtener el porcentajes de la segunda respuesta
per2 = Math.round((cont2 / total) * Math.pow(10,2)) / Math.pow(10,2);
//Obtener el porcentajes de la tercera respuesta
per3 = Math.round((cont3 / total) * Math.pow(10,2)) / Math.pow(10,2);
//Mostrar los resultados de la encuesta
with (document){
write("<table align='center'>");
write("<tr><th>Resultado de los votos</th>");
write("<th>Votos obtenidos</th><th>Porcentaje</th></tr>");
write("<tr><td> Votos a Favor </td><td class=\"number\">" + cont1 + "</td><td
class=\"number\">" + per1 + " %</td></tr>");
write("<tr><td> Votos en Contra </td><td class=\"number\">" + cont2 + "</td><td
class=\"number\">" + per2 + " %</td></tr>");
write("<tr><td> Se abstienen de opinar </td><td class=\"number\">" + cont3 + "</td><td
class=\"number\">" + per3 + " %</td></tr>");
write("</table>");
}
Resultado:
12
Ejemplo #4: Uso de la sentencia with para reducir la cantidad de cdigo a escribir cuando se recorren las
propiedades de un objeto.
Guin 1: math.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Uso del With</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/math.css" />
<script type="text/javascript" src="js/with.js"></script>
</head>
<body>
</body>
</html>
Guin 2: math.css
p
{
background-color:PapayaWhip;
border:ridge 6px OrangeRed;
color:OrangeRed;
font-family:Perpetua;
font-size:11pt;
font-weight:500;
Guin 3: with.js
//Inicializar variables
var area, peri, coorx, coory;
//Solicitar el valor para el radio del crculo
var radio = parseInt(prompt('Ingrese un numero',''));
document.write("<p>");
//Recorrer propiedades del objeto Math usando la instruccin with
with(Math){
//rea de un crculo de radio "radio"
area = PI*radio*radio;
//Valor del lado horizontal definido por el radio
coorx = abs(radio*cos(PI/4));
//Valor del lado vertical definido por el radio
coory = abs(radio*sin(PI/4));
13
Ejercicio #5: Creacin de campos de formulario del tipo seleccionado en tiempo de ejecucin con
JavaScript.
Primer archivo: forms.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Creacin de controles de formulario dinmicamente</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/estilosform.css">
<script type="text/javascript" src="js/formcontrols.js"></script>
</head>
<body>
<header>
<h1>Creación de formularios dinámicos</h1>
</header>
<section>
<article>
<form action="javascript:void(0);" action="POST" name="frmconf"
onsubmit="crearform(document.frmconf.selcontrol.value,document.frmconf.txtnum.value,document.frmconf.
selestilo.value);">
<fieldset>
<legend>Configuración del formulario</legend>
<label for="selcontrol">Tipo de control: </label>
<select name="selcontrol">
<option value="text">Cuadro de texto</option>
<option value="password">Cuadro de contrasea</option>
<option value="checkbox">Casillas de verificacin</option>
<option value="radio">Botones de opcin</option>
<option value="file">Control de archivo</option>
<option value="button">Botones genricos</option>
</select><br>
<label for="txtnum">Número de controles: </label>
<input type="text" name="txtnum" size="2" maxlength="2"><br>
<label for="selestilo">Estilo: </label>
<select name="selestilo">
<option value="frmred">Rojo</option>
<option value="frmblue">Azul</option>
<option value="frmgreen">Verde</option>
</select><br>
<input type="submit" name="cmdenviar" value="Enviar">
</fieldset>
</form>
</article>
</section>
</body>
</html>
Guin 2: basic.css
h1
{
background-color:Lavender;
border:ridge 8px Indigo;
14
{
background-color:Lavender;
border-color:Indigo;
border-style:ridge;
height:6px;
width:98%;
}
p
{
background-color:Lavender;
border:groove 2px Indigo;
font-family:Verdana;
font-size:12px;
}
fieldset {
background-color:Lavender;
border:inset 3px Indigo;
}
Guin 3: estilosform.css
h1
{
background-color:Wheat;
border:outset 6px Brown;
font-family:Impact;
text-align:center;
text-decoration:underline;
}
.frmred
{
background-color:LightSalmon;
color:DarkRed;
font-family:"Century Gothic";
font-size:10pt;
font-weight:400;
}
.frmblue
{
background-color:LightSkyBlue;
color:MediumBlue;
font-family:"Franklin Gothic Demi";
font-size:10pt;
font-weight:300;
}
.frmgreen
{
background-color:PaleGreen;
color:DarkGreen;
font-family:"Lucida Sans";
font-size:9pt;
font-weight:400;
}
.label
{
background-color:Cornsilk;
color:DarkGreen;
15
Guin 4: formcontrols.js
function crearform(control, numero, estilo){
var html,tag,i;
html = "<!DOCTYPE html>\n";
html += "<html lang=\"es\">\n<head>\n<title>\nCreacin de formularios
dinmicos\n</title>\n";
html += "<meta charset=\"utf-8\" />\n";
html += "<link rel=\"stylesheet\" type=\"text/css\" href=\"css/estilosform.css\"
/>\n</head>\n<body>\n";
html += "<header>\n";
html += "<h1>Formulario creado desde JavaScript</h1>\n";
html += "</header>\n";
with(document){
write(html);
write("<form name=\"miform\">\n");
switch(control){
case "text":
case "password":
for(i=0; i<numero; i++){
write("<label for=\"" + control + (i+1) + "\" class=\"label\">" +
control + (i+1) + "</label>\n");
write("<input type=\"" + control + "\" name=\"" + control + (i+1) +
"\" required class=\"" + estilo + "\"><br>\n");
}
break;
case "checkbox":
case "radio":
for(i=0; i<numero; i++){
tag = "<input type=\"" + control + "\" name=\"" + control + (i+1) +
"\" class=\"" + estilo + "\">\n";
tag += "<label for=\"" + control + (i+1) + "\" class=\"label\">\n";
tag += control + (i+1) + "</label>\n" + "<br>\n";
write(tag);
}
break;
case "file":
for(i=0; i<numero; i++){
tag = "<label for=\"" + control + (i+1) + "\" class=\"label\">\n";
tag += "Seleccione el archivo \n" + (i+1) + "°</label>\n";
tag += "<input type=\"file\" name=\"" + control + (i+1) + "\"
class=\"" + estilo + "\"><br>\n";
writeln(tag);
}
break;
}
write("</form>\n</body>\n</html>\n");
}
}
Ejercicio #6: Mtodo de ordenacin por burbuja, solicitando los valores a ingresar y luego mostrando el
listado ingresado y el listado de valores ordenados usando el mtodo de la burbuja.
Guin 1: burbuja.html
<!DOCTYPE html>
<html lang="es">
16
Guin 2: burbuja.css
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
}
h1
{
background-color:LightBlue;
border:double 3px SlateBlue;
color:SteelBlue;
font-family:"Century Gothic";
font-size:2.2em;
font-weight:600;
}
table {
background-color:LemonChiffon;
border:outset 6px SlateBlue;
}
td
{
background-color:LemonChiffon;
border:solid 2px SlateBlue;
color:SlateBlue;
height:30px;
text-align:center;
font-family:"Lucida Sans";
font-size:0.8em;
font-weight:500;
width:25px;
}
.On
{
background-color:SlateBlue;
border-color:Gold;
border-width:2px;
color:Gold;
}
.Off
{
background-color:LemonChiffon;
border-color:SlateBlue;
border-width:2px;
color:SlateBlue;
}
Guin 3: burbuja.js
17
Ejercicio #7: Tabla de colores rgb vlidos en HTML, generada a partir de tres arreglos a matrices. Cada una
de las matrices representa cada una de las partes del modelo RGB (Red, Green, Blue) en valores
hexadecimales seleccionados.
Guin 1: colores.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Tabla de colores con Javascript</title>
18
Guin 2: colores.css
/* Agregando una fuente de Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
}
#wrapper {
margin: 16px auto;
width: 38%;
}
h1
{
color:#993399;
font-family:impact;
font-size:2em;
font-style:bolder;
}
table {
color:#4477AA;
font-family: 'Source Sans Pro', sans-serif;
font-size:1.2em;
font-weight:Bold;
}
Guin 3: tablacolores.js
document.write("<table border='1' align='center'>");
//Creamos tres arreglos con valores de cadena
//que representan valores hexadecimales
var ncel = 0;
var r = new
Array("00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF");
var g = new
Array("00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF");
var b = new
19
Resultado:
Ejemplo #8: Clculo del promedio de notas de un alumno usando una matriz para almacenar la cantidad
de notas que se solicita ingresar junto con el nombre del alumno. Se utiliza una estructura repetitiva para
sumar todas las notas y al resultado, se le divide entre la cantidad de notas ingresadas.
Guin 1: promedionotas.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Promedio notas</title>
<meta charset="utf-8" />
20
Guin 2: notas.css
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
line-height: 1.2;
}
caption {
font:Bold 1.2em/1 "Century Gothic",Helvetica,"Liberation Sans";
color: Olive;
}
table
{
border:outset 5px rgb(60,190,125);
color:ForestGreen;
font-family:"Century Gothic";
font-size:0.85em;
font-weight:500;
margin-left:40%;
margin-right:40%;
}
th
{
background-color:Turquoise;
}
td
{
background-color: Azure;
border:solid 1px rgb(60,190,125);
}
.nota
{
text-align:right;
}
Guin 3: promedio.js
//Declarando e inicializando variables
var i, contador = 1, promedio = 0.0;
var alumno, tabla = "";
var notas = [];
var n = parseInt(prompt("Cuntas notas va a ingresar?", ""));
alumno = prompt("Ingrese el nombre del alumno ", "");
//Ciclo o lazo que se utiliza para capturar, una a una las notas
for(i=0; i<n; i++){
notas[i] = parseFloat(prompt("Ingrese la nota " + (i+1), ""));
}
tabla += "<table>\n";
tabla += "<caption>Evaluaciones y promedio de " + alumno + "</caption>"
tabla += "<tr>\n<th>\nEvaluaciones\n</th>\n<th>Notas\n</th>\n</tr>\n";
21
Resultado:
Ejemplo #9: Manejo de dos listas desplegables dependientes con JavaScript. El ejemplo muestra cmo al
cambiar de pas, se pueden cambiar las ciudades en el control de lista desplegable dependiente. Adems,
se ha incorporado la funcionalidad de agregar nuevas ciudades mediante un botn Agregar.
Guin 1: ciudades.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Interaccin con mens de seleccin</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/ciudades.css" />
22
Guin 2: ciudades.css
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
}
23
{
background-color:Aquamarine;
border:ridge 6px LimeGreen;
color:ForestGreen;
font-family:Arial,Helvetica,"Liberation Sans";
font-size:2em;
text-align:center;
}
p
{
color:LimeGreen;
font-family:"Century Gothic",sans-serif;
font-weight:600;
font-size:0.95em;
margin-left:40%;
margin-right:40%;
text-align:justify;
}
table
{
background-color:Turquoise;
border:outset 5px rgb(60,190,125);
margin-left:40%;
margin-right:40%;
}
td
{
border:solid 1px rgb(60,190,125);
}
label {
color:Azure;
font-family:"Century Gothic",sans-serif;
font-weight:600;
font-size:0.95em;
}
select, option {
background-color:Aquamarine;
color:SlateBlue;
font-family:"Century Gothic","ITC Franklin Gothic","Arial Black";
font-size:0.9em;
font-style:italic;
}
.boton
{
background-color:ForestGreen;
color:Lavender;
font-family:Geneva,Tahoma,Verdana;
font-size:0.8em;
font-weight:600;
}
.boton:hover {
background-color:MediumSeaGreen;
color:Gold;
}
Guin 3: ciudades.js
//Creando un arreglo para guardar las ciudades de cada pas
var cities = new Array(4);
24
Resultado:
V. DISCUSION DE RESULTADOS
25
2.
3.
4.
Elabore un script que calcule la suma de los nmeros impares comprendidos entre 10 y 50,
incluyndolos, y simultneamente indique cuntos nmeros para hay comprendidos entre ese mismo
par de nmero.
Cree un script que permita el ingreso de un nmero entero y muestre en pantalla la siguiente
informacin: 1) Cantidad de cifras, 2) Suma de cifras impares, 3) Suma de cifras pares, 4) Suma de
todas las cifras, 5) Cifra mayor, 6) Cifra menor.
Cree un script que utilice arreglos que le permita a un vendedor ingresar los precios de los productos
que vende. Cada vez que ingrese un nuevo producto y su precio debe generarse una nueva celda de
una tabla que va mostrando el producto ingresado y su respectivo precio. Al terminar de ingresar los
productos, para lo cual deber preguntar luego de cada producto ingresado, si se van a ingresar ms
productos, debe mostrar el total de la venta del da.
En el ejemplo del ordenamiento por el mtodo de la burbuja muestre el ordenamiento del arreglo
pero permitiendo que el usuario decida si desea un ordenamiento ascendente o descendente. Para ello
solicite al usuario mediante un dilogo de ingreso de datos (prompt) el tipo de ordenamiento. Slo
debe aceptar dos posibles valores: "ascendente" o "descendente". Si no se ingresa ninguna de estas
cadenas, muestre un mensaje de error y vuelva a solicitar el ingreso del tipo de ordenamiento. Al final
de ingresar todos los nmeros para el arreglo, mustrelos ordenados en la forma que el usuario lo
haya pedido (ascendente o descendentemente).
VII. BIBLIOGRAFIA
Flanagan, David. JavaScript La Gua Definitiva. 1ra Edicin. Editorial ANAYA Multimedia. 2007. Madrid,
Espaa.
Powell, Thomas / Schneider, Fritz. JavaScript Manual de Referencia. 1ra Edicin. Editorial McGraw-Hill.
2002. Madrid, Espaa.
Deitel, Paul / Deitel, Harvey / Deitel, Abbey. Internet & World Wide Web. Cmo programar. 5ta Edicin.
Editorial Pearson. 2014. Mxico D.F.
McFedries, Paul. JavaScript Edicin Especial. 1ra Edicin. Editorial Prentice Hall. 2002. Madrid, Espaa.
Tom Negrino / Dori Smith. JavaScript & AJAX Para Diseo Web. 6 Edicin. Editorial Pearson Prentice
Hall. 2007. Madrid Espaa.
26