Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Pandemia en 04 de Enero 2017, 22:25
-
Buenas noches amigos aquí dejo una posible solución al ejercicio CU01130E del tutorial básico de programación web con JavaScript....
EJERCICIO
Responde a las siguientes preguntas:
a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?
b) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.
c) Utilizando la propiedad length aplicada a la colección de nodos obtenida mediante getElementsByName, modifica el código para que el resultado sea que al enviar el formulario el mensaje que aparezca sea “El número total de animales disponibles era … y usted ha elegido …”. Por ejemplo, si tenemos 4 animales (León, Tigre, Guepardo, Jaguar) y hemos elegido Tigre nos debe aparecer el mensaje “El número total de animales disponibles era 4 y usted ha elegido 1”.
a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?
Funcionar si funciona, ¿porque? porque cualquier valor introducido en un if lo interpreta como un valor booleano (true o false). En este caso cuando el intérprete recibe if (elementosObtenidos[1].checked) lo que hace es evaluar elementosObtenidos[1].checked y determina si su valor es equivalente a true ó false.
b)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Curso JavaScript - aprenderaprogramar.com</title>
<style type="text/css">
body {
background-color: yellow;
font-family: fantasy;
}
label {
color: #5CF044;
display: inline-block;
padding: 5px;
}
</style>
<script type="text/javascript">
function informarItemsElegidos(elemento) {
var elementosObtenidos = document.getElementsByName(elemento);
var msg = 'Los animales que usted ha elegido son: ';
var elegidos = 0;
if (elementosObtenidos[0].checked ) {msg = msg + elementosObtenidos[0].value; elegidos=elegidos+1;}
if (elementosObtenidos[1].checked && elegidos>=1) {msg = msg + ', ';}
if (elementosObtenidos[1].checked) {msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;}
if (elementosObtenidos[2].checked && elegidos>=1) {msg = msg + ', ';}
if (elementosObtenidos[2].checked) {msg = msg + elementosObtenidos[2].value; elegidos=elegidos+1;}
if (elementosObtenidos[3].checked && elegidos>=1) {msg = msg + ', ';}
if (elementosObtenidos[3].checked) {msg = msg + elementosObtenidos[3].value; elegidos=elegidos+1;}
if (elegidos == 0 ) {msg = '¡No ha elegido ningún animal!';}
alert (msg);
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<!--Formulario de contacto-->
<div style="width: 450px;">
<form name="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarItemsElegidos('animal')">
<p>Si quieres contactar con nosotros envíanos este formulario relleno: </p>
<label for="nombre"><span>Nombre:</span><input id="nombre" type="text" name="nombre"></label>
<label for="apellidos"><span>Apellidos:</span><input id="apellidos" type="text" name="apellidos"></label>
<p>Elige los animales que te gusten: </p>
<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León & nbsp;& nbsp;& nbsp; </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre & nbsp;& nbsp;& nbsp; </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo & nbsp;& nbsp;& nbsp; </label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar</label>
<label for="email"><span>Correo electrónico</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" name="Enviar" />
<input type="reset" name="Cancelar" />
</label>
</form>
</div>
</body>
</html>
c)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Curso JavaScript - aprenderaprogramar.com</title>
<style type="text/css">
body {
background-color: yellow;
font-family: fantasy;
}
label {
color: #5CF044;
display: inline-block;
padding: 5px;
}
</style>
<script type="text/javascript">
function informarItemsElegidos(elemento) {
var elementosObtenidos = document.getElementsByName(elemento);
var msg = 'El número disponible de animales era: ';
var elegidos = 0;
if (elementosObtenidos[0].checked ) {elegidos=elegidos+1;}
if (elementosObtenidos[1].checked) {elegidos=elegidos+1;}
if (elementosObtenidos[2].checked) {elegidos=elegidos+1;}
if (elementosObtenidos[3].checked) {elegidos=elegidos+1;}
alert (msg + elementosObtenidos.length + ' Y ha elegido: ' + elegidos);
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<!--Formulario de contacto-->
<div style="width: 450px;">
<form name="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarItemsElegidos('animal')">
<p>Si quieres contactar con nosotros envíanos este formulario relleno: </p>
<label for="nombre"><span>Nombre:</span><input id="nombre" type="text" name="nombre"></label>
<label for="apellidos"><span>Apellidos:</span><input id="apellidos" type="text" name="apellidos"></label>
<p>Elige los animales que te gusten: </p>
<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León & nbsp;& nbsp;& nbsp; </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre & nbsp;& nbsp;& nbsp; </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo & nbsp;& nbsp;& nbsp; </label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar</label>
<label for="email"><span>Correo electrónico</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" name="Enviar" />
<input type="reset" name="Cancelar" />
</label>
</form>
</div>
</body>
</html>
Saludos Y gracias de antemano..... :D
-
Hola Pandemia.
Tus respuestas al ejercicio son correctas, sobre el apartado a, en el siguiente enlace hay una explicación que deja más claro el motivo.
https://www.aprenderaprogramar.com/foros/index.php?topic=3867.msg16522#msg16522
Saludos. ;D
-
Comentarte una cosa, los caracteres que quieres introducir precedidos de & va todo junto. En este caso en el apartado b), el espacio sería ' '. Por lo demás, ya te lo dijo pedro,,
Saludos.