Guia-3 Javascript Univ Don Bosco
Guia-3 Javascript Univ Don Bosco
Guia-3 Javascript Univ Don Bosco
I. OBJETIVOS
Que el estudiante:
Adquiera dominio en el uso de sentencias repetitivas, ciclos o lazos del lenguaje JavaScript.
Aplique sentencias repetitivas en la solución 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 solución de problemas prácticos.
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.
Las sentencias repetitivas son el medio que brindan los lenguajes de programación para poder repetir un
bloque o conjunto de instrucciones más de una vez. Estas sentencias suelen llamarse lazos, ciclos o bucles. El
número de veces que se repite el ciclo o lazo es controlado mediante una condición o mediante el valor de un
contador. Cuando se trata de una condición, 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 automática, cada vez que se
ejecuta el lazo hasta llegar a un valor máximo 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 número determinado de veces. Utiliza una variable
contador, una condición de comparación, una instrucción de incremento (o decremento) del contador y una o
más instrucciones que forman parte del cuerpo del lazo o bucle. Estas instrucciones se repetirán tantas veces
hasta que la condición de comparación se evalúe como falsa.
1 / 26
Guía # 3: Estructuras de control: sentencias repetitivas
Ejemplo:
document.write("Conteo hacia atrás<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 sintáctica es completamente diferente. La estructura básica es:
while (condicion) {
//bloque de código ;
}
Donde, condicion es cualquier expresión JavaScript válida que se evalúe a un valor booleano. El bloque de
código se ejecuta mientras que la condición 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 construcción sintáctica es muy diferente. El ciclo
comprueba la expresión y continúa la ejecución del código mientras la evaluación 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 ejecución del lazo.
La diferencia con el anterior bucle estriba en que la expresión condicional se evalúa después de ejecutar el bloque
de código, lo que garantiza que al menos una vez se ha de ejecutar, aún cuando la condición sea false desde el
principio.
var nTotal = 35;
var con = 36;
do {
alert("El contador con es igual a: " + con);
con++;
} while (con <= nTotal);
var con = 3;
do {
if (con == 20)
break;
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 repetición del bloque de
código, sin completar el pase actual por el bloque de comandos.
En el ejemplo, cuando la variable con alcance los valores 10, 20, 30 y 40 continue salta el resto del bloque de
código y comienza un nuevo ciclo sin ejecutar el método 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 instrucción with permite utilizar una notación abreviada al hacer referencia a los objetos. Es muy
conveniente a la hora de escribir dentro del código 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("Estás aprendiendo el uso de una nueva instrucción de JavaScript.");
Una matriz es una colección ordenada de valores, donde cada valor individual se denomina elemento y cada
elemento es ubicado en una posición numérica dentro de la matriz. Esta posición es conocida como índice.
Tome en cuenta que como JavaScript es un lenguaje débilmente tipificado, los elementos de la matriz pueden
ser de cualquier tipo y los distintos elementos de una misma matriz pueden ser también de tipos diferentes.
Incluso, estos elementos pueden ser también matrices, lo que permitiría 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 posición del elemento deseado entre corchetes (“[“, “]”). Primero se coloca el nombre y, a
continuación, encerrado entre corchetes el índice. Por ejemplo, para acceder al tercer elemento del arreglo
llamado miArreglo, debe digitar lo siguiente: miArreglo[2].
Cuando se usa el constructor Array() es posible definir el tamaño del arreglo colocando entre paréntesis el
número de elementos que tendrá el arreglo con un valor entero. Como se muestra a continuación:
var dias = new Array(5);
La instrucción anterior crea un arreglo llamado dias y define que el número de elementos de este arreglo será
cinco.
A continuación, 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
//Asignando una lista de valores al arreglo
var dias = ["Domingo", "Lunes", "Martes", "Miércoles"];
//Pasando argumentos al constructor Array()
var dias = new Array("Domingo", "Lunes", "Martes", "Miércoles");
Si se quiere imprimir en la ventana del navegador el valor del sexto elemento de un arreglo, debería escribir
una instrucción como la siguiente:
document.write(“Hoy es ” + dias[5] + “ 13 de Agosto del 2004”);
Cuando se intente acceder a un elemento de un arreglo que no ha sido asignado todavía, obtendrá un valor
undefined.
Algo que debe tener en cuenta es que en JavaScript no es necesario agregar elementos de forma consecutiva,
esto significa que si se tienen cuatro elementos, como en el ejemplo anterior, puede agregar dos elementos
más en cualquier posición. Es decir, si vemos el ejemplo anterior, podríamos haber agregado en lenguajes[7] y
lenguajes[8] los elementos “Java” y “ASP”, en lugar de hacerlo en lenguajes[4] y lenguajes[5] como se hizo en
el ejemplo.
Ejemplo:
var colores = ["rojo", "verde", "azul"];
delete colores[1];
alert("colores[" + 1 + "] = " + colores[1]);
Para poder eliminar realmente un elemento para que todos los elementos con índice de posición superior a
este se desplacen a posiciones con índice menor, se tienen que utilizar el método de matriz Array.shift()
para eliminar el primer elemento de la matriz y Array.pop() para eliminar el último elemento, y
Array.splice() para eliminar un rango contiguo de elementos desde una matriz.
Ejemplo:
var lugares = ["primero", "segundo", "tercer", "cuarto"];
var primerlugar = lugares.shift(); //El primer elemento es eliminado del arreglo
//y asignado a la variable primerlugar
alert(lugares.toSource());
El valor mostrado será de tres. Sin embargo, si más adelante decide agregar otros elementos sin tener cuidado
del índice último del arreglo ocupado. Puede darse lo siguiente:
trimestre[7] = "Julio";
trimestre[8] = "Agosto";
trimestre[9] = "Septiembre";
alert("El tamaño del arreglo es: " + trimestre.length);
El nuevo tamaño mostrado será de 10. Por esta razón parece razonable utilizar posiciones adyacentes en el
índice de los arreglos para no obtener resultados inesperados en un script.
concat()
Este método devuelve el arreglo que resulta de añadir los argumentos al arreglo sobre el que se ha invocado.
Por ejemplo, las siguientes instrucciones:
var miArreglo = ["rojo", "verde", "azul"];
alert(miArreglo.concat("amarillo, morado"));
Debe tomar en cuenta que concat() no modifica el arreglo original. Es decir, si se manda a imprimir miArreglo
solamente se imprimirían los tres colores que le fueron asignados.
join()
El método join() convierte el arreglo en una cadena y permite al programador especificar cómo se separan los
elementos en la cadena resultante. Normalmente, cuando se imprime un arreglo, la salida es una lista de
elementos separados por coma. Si se utiliza join() se puede establecer el carácter de separación entre
elementos. Por ejemplo, en el siguiente código:
var miArreglo = ["rojo", "verde", "azul"];
var stringVersion = miArreglo.join(" | ");
alert(stringVersion);
Se imprimiría:
rojo | verde | azul
El arreglo original no se destruye como efecto secundario al devolver la cadena de sus elementos enlazada. Si
se desea hacer esto deberá asignar al mismo objeto la cadena devuelta. Así:
var miArreglo = ["rojo", "verde", "azul"];
miArreglo = miArreglo.join(" | ");
reverse()
Este método invierte el orden de los elementos de un arreglo en particular. Este método si altera el arreglo
original, de modo que si se manda a imprimir, nos mostraría los elementos invertidos. Por ejemplo, si se tiene:
var miArreglo = ["rojo", "verde", "azul"];
miArreglo.reverse();
alert(miArreglo);
La salida será:
azul, verde, rojo
slice()
Este método devuelve un subarreglo; del arreglo sobre el que se invoca. Como no actúa sobre el arreglo, el
arreglo original queda intacto. El método tiene dos argumentos que son el índice inicial y el índice final.
Devuelve un arreglo que contiene los elementos desde el índice inicial hasta el índice final, excluyéndolo. Si
sólo se proporciona un argumento, el método devuelve los elementos desde el índice dado hasta el final del
arreglo. Observe el siguiente ejemplo:
var miArreglo = [1, 2, 3, 4, 5];
miArreglo.slice(2); //Devuelve [3, 4, 5]
miArreglo.slice(1, 3); //Devuelve [2, 3]
miArreglo.slice(-3); //Devuelve [3, 4, 5]
miArreglo.slice(-4, 3); //Devuelve [2, 3]
Observe el resultado cuando se utilizan índices negativos y trate de determinar por qué el resultado es el que
se muestra en los comentarios.
splice()
Este método se utiliza para añadir, reemplazar o eliminar elementos de un arreglo particular. Devuelve los
elementos que se eliminan. Posee tres argumentos, que se muestran en la siguiente sintaxis:
splice(inicio, cantidad_borrar, valores);
sort()
Es uno de los métodos más útiles utilizados con arreglos en JavaScript. El método clasifica los elementos del
arreglo lexicográficamente. Lo hace convirtiendo primero los elementos del arreglo en cadenas y luego los
ordena. Esto significa que si ordena números podría obtener resultados inesperados. Vea el siguiente ejemplo:
var miArreglo = [14, 52, 3, 14, 45, 36];
miArreglo.sort();
alert(miArreglo);
La función sort es muy flexible y permite pasar como argumento una función de comparación que permita
ordenar numéricamente y no alfabéticamente los elementos. Las funciones se analizarán en la guía sobre
funciones.
toString()
El método toString() devuelve una cadena que contiene los valores del arreglo separados por comas. Este
método se invoca automáticamente cuando se imprime un arreglo. Equivale a invocar join() sin argumentos.
Ejemplo:
var numeros = [1, 2, 3, 4, 5];
var letras = ['a', 'b', 'c', 'd'];
alert(numeros.toString()); //Devuelve '1, 2, 3'
alert(letras.toString()); //Devuelve 'a, b, c'
IV. PROCEDIMIENTO
Ejercicio #1: Cálculo 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.
Guión 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>
Guión 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";
font-weight:600;
font-size:2.2em;
color:blue;
}
h3 {
color:brown;
font-family:"Bookman Old Style";
font-weight:600;
font-size:1.8em;
text-align:center;
}
Guión 3: promedio.js
//Declaración de las variables a utilizar
var i,num,nota,notaactual,promedio;
//Captura de la cantidad de notas que se ingresarán
num = parseInt(prompt("¿Cuántos notas va a ingresar?",""));
//Definiendo un valor de inicialización 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 cálculo 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:
Guión 1: navegador.html
<!DOCTYPE html>
<html>
<head>
<title>Propiedades del navegador</title>
<link rel="stylesheet" href="css/nav.css" />
<script type="text/javascript" src="js/propiedadesnav.js"></script>
</head>
<body>
</body>
</html>
Guión 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;
}
Guión 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){
str += "<tr>";
str += "<td>" + propiedad + " </td><td> " + navigator[propiedad] + "</td>";
str += "</tr>";
}
document.write(str + "</table>");
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 emitirán los resultados. Se
utiliza una técnica conocida como ciclo infinito para implementar la solución.
Guión 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>
Guión 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;
.number {
text-align:right;
}
Guión 3: encuesta.js
//Declaración 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 cuántas personas están 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('¿Cuál es su Voto ?',''));
switch (voto){
case 1:
cont1++;
break;
case 2:
cont2++;
break;
case 3:
cont3++;
break;
default:
alert('¡Voto no válido!');
}
//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:
Ejemplo #4: Uso de la sentencia with para reducir la cantidad de código a escribir cuando se recorren las
propiedades de un objeto.
Guión 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>
Guión 2: math.css
p {
background-color:PapayaWhip;
border:ridge 6px OrangeRed;
color:OrangeRed;
font-family:Perpetua;
font-size:11pt;
font-weight:500;
}
Guión 3: with.js
//Inicializar variables
var area, peri, coorx, coory;
//Solicitar el valor para el radio del círculo
var radio = parseInt(prompt('Ingrese un numero',''));
document.write("<p>");
//Recorrer propiedades del objeto Math usando la instrucción with
with(Math){
//Área de un círculo 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));
pericir = 2*PI*radio;
perirec = 2*coorx + 2*coory;
//Invocar la propiedad write del objeto documento con with
with(document){
write("El área es: " + area);
write("<br>El lado x del rectángulo generado es: " + coorx);
write("<br>El lado y del rectángulo generado es: " + coory);
write("<br>El perímetro del circulo es: " + pericir);
write("<br>El perímetro del rectángulo es: " + perirec);
}
}
document.write("</p>");
Ejercicio #5: Creación de campos de formulario del tipo seleccionado en tiempo de ejecución con
JavaScript.
Primer archivo: forms.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Creación de controles de formulario dinámicamente</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 contraseña</option>
<option value="checkbox">Casillas de verificación</option>
<option value="radio">Botones de opción</option>
<option value="file">Control de archivo</option>
<option value="button">Botones genéricos</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>
Guión 2: basic.css
h1 {
background-color:Lavender;
border:ridge 8px Indigo;
color:Indigo;
font-family:"Bookman Old Style";
font-size:18pt;
font-weight:600;
}
hr {
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;
}
Guión 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;
font-family:Georgia;
font-size:10pt;
font-weight:600;
}
Guión 4: formcontrols.js
function crearform(control, numero, estilo){
var html,tag,i;
html = "<!DOCTYPE html>\n";
html += "<html lang=\"es\">\n<head>\n<title>\nCreación de formularios
dinámicos\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";
Ejercicio #6: Método de ordenación por burbuja, solicitando los valores a ingresar y luego mostrando el
listado ingresado y el listado de valores ordenados usando el método de la burbuja.
Guión 1: burbuja.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ordenación por burbuja</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/burbuja.css" />
<script type="text/javascript" src="js/burbuja.js"></script>
</head>
<body>
</body>
</html>
Guión 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;
}
Guión 3: burbuja.js
//Inicialización de variables
var numeros = new Array();
var i, max, temp;
//Validación para que el número de elementos del arreglo sea
//numérico y mayor o igual que 2
do {
max = prompt("Cuántos números va a ingresar (valor entero):", "");
//Verificar que se ingrese un dato numérico
if(isNaN(max)){
alert("El valor digitado no es numérico.");
continue;
}
//Verificar que el valor ingresado sea mayor o igual que 2
if(max < 2){
alert("El arreglo debe ser de dimensión 2 o superior");
}
}while(isNaN(max) || max < 2);
//Lazo para solicitar el ingreso de los elementos del arreglo
for(i=0; i<max; i++){
numeros[i] = parseInt(prompt("Número " + (parseInt(i) + 1), ""));
}
with(document){
writeln("<h1>Números ingresados</h1>");
writeln("<hr>");
//Lazo para ingresar los elementos ingresados en el arreglo
writeln("<table><tr>");
//Lazo que muestra los elementos del arreglo en una tabla
for(i=0; i<max; i++){
write("<td class=\"Off\" onmouseover=\"this.className='On'\"
onmouseout=\"this.className='Off'\">" + numeros[i] + "</td>");
}
write("</tr></table>");
//Lazo que ordena el arreglo mediante el método de la burbuja
for(i=0; i<max-1; i++){
for(j=i+1; j<max; j++){
if(numeros[i]>numeros[j]){
temp = numeros[j];
numeros[j] = numeros[i];
numeros[i] = temp;
}
}
}
write("<h1>Números ordenados ascendentemente</h1>");
write("<hr>");
write("<table><tr>");
//Lazo que muestra los elementos del arreglo que han sido
//ordenados con el método de la burbuja
for(i=0; i<max; i++) {
write("<td class=\"Off\" onMouseOver=\"this.className='On'\"
onMouseOut=\"this.className='Off'\">" + numeros[i] + "</td>");
}
write("</tr></table>");
}
Ejercicio #7: Tabla de colores rgb válidos 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.
Guión 1: colores.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Tabla de colores con Javascript</title>
Guión 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;
Guión 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
Array("00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF");
//Creamos tres bucles anidando uno dentro de otro
for(i=0;i<r.length;i++) {
for(j=0;j<g.length;j++) {
for(k=0;k<b.length;k++) {
//Se crea el color
var nuevocol = "#" + r[i] + g[j] + b[k];
if(ncel % 7 == 0){
document.write("<tr>");
ncel++;
}
//Se imprime el color
document.write("<td style='text-align:center; background-color:" + nuevocol +
"'>" + nuevocol + "</td>");
ncel++;
if(ncel % 7 == 0){
document.write("</tr>");
ncel++;
}
}
}
}
document.write("</table>");
Resultado:
Ejemplo #8: Cálculo 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.
Guión 1: promedionotas.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Promedio notas</title>
<meta charset="utf-8" />
</body>
</html>
Guión 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;
}
Guión 3: promedio.js
//Declarando e inicializando variables
var i, contador = 1, promedio = 0.0;
var alumno, tabla = "";
var notas = [];
var n = parseInt(prompt("¿Cuántas 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";
Resultado:
Ejemplo #9: Manejo de dos listas desplegables dependientes con JavaScript. El ejemplo muestra cómo al
cambiar de país, se pueden cambiar las ciudades en el control de lista desplegable dependiente. Además,
se ha incorporado la funcionalidad de agregar nuevas ciudades mediante un botón Agregar.
Guión 1: ciudades.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Interacción con menús de selección</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/ciudades.css" />
Guión 2: ciudades.css
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
}
h1 {
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;
}
Guión 3: ciudades.js
//Creando un arreglo para guardar las ciudades de cada país
var cities = new Array(4);
//Esta función limpia todas las opciones del menú desplegable de las ciudades
function removeOptions(optionMenu){
for(i=0; i<optionMenu.options.length; i++){
optionMenu.options[i] = null;
}
}
Resultado:
V. DISCUSION DE RESULTADOS
1. Elabore un script que calcule la suma de los números impares comprendidos entre 10 y 50,
incluyéndolos, y simultáneamente indique cuántos números para hay comprendidos entre ese mismo
par de número.
2. Cree un script que permita el ingreso de un número entero y muestre en pantalla la siguiente
información: 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.
3. 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 más
productos, debe mostrar el total de la venta del día.
4. En el ejemplo del ordenamiento por el método 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 diálogo de ingreso de datos (prompt) el tipo de ordenamiento. Sólo
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 números para el arreglo, muéstrelos ordenados en la forma que el usuario lo
haya pedido (ascendente o descendentemente).
1. Investigue para qué se utilizan las siguientes funciones del objeto Math: abs(), round(), ceil(), floor(), exp(),
log() y random(). Ponga un ejemplo, de su utilización.
2. Investigue cómo implementar ciclos infinitos utilizando sentencias while y for. Muestre un ejemplo de cada
una.
3. Investigue para qué se utilizan los métodos push() y pop() en JavaScript utilizados con arreglos. Muestre
algún ejemplo sencillo que le ayude a comprender la utilidad de ambas funciones. Realice un solo ejemplo.
4. Investigue qué tarea realiza la función matricial reverse(). Muestre un pequeño script de ejemplo en donde
se ilustre su funcionamiento
VII. BIBLIOGRAFIA
Flanagan, David. JavaScript La Guía Definitiva. 1ra Edición. Editorial ANAYA Multimedia. 2007. Madrid,
España.
Powell, Thomas / Schneider, Fritz. JavaScript Manual de Referencia. 1ra Edición. Editorial McGraw-Hill.
2002. Madrid, España.
Deitel, Paul / Deitel, Harvey / Deitel, Abbey. Internet & World Wide Web. Cómo programar. 5ta Edición.
Editorial Pearson. 2014. México D.F.
McFedries, Paul. JavaScript Edición Especial. 1ra Edición. Editorial Prentice Hall. 2002. Madrid, España.
Tom Negrino / Dori Smith. JavaScript & AJAX Para Diseño Web. 6ª Edición. Editorial Pearson – Prentice
Hall. 2007. Madrid España.