Solución del ejercicio CU01152E del curso JavaScript desde cero.
Código original:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo aprendeaprogramar.com</title>
<script type="text/javascript">
function ejemplo() {
var htmlADevolver='';
var colorUsuario=prompt('Elija color red, yellow o blue');
htmlADevolver+= colorUsuario ? '<h1 style="background-color:'+colorUsuario+';"> Usted elegió: '+colorUsuario+'</h1>':'<h1>No elegió color</h1>';
var nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div style="color: blue;" id="pulsador" onclick="ejemplo()">Probar Ejercicio</div>
</body>
</html>Preguntas:
a) ¿Qué significa el operador += que se emplea en el código?
Significa sumar lo siguiente. Por ejemplo, si pone: a+=b es lo mismo que: a=a+b
b) ¿Por qué usamos [ 0 ] para establecer nodoBody?
Porque "document.getElementsByTagName('body')" devuelve un Array. Y como sólo existe un elemento con etiqueta "body" y es el primero (más que nada, porque no existen más" y los Arrays siempre se empiezan a contar desde "0", pues para referenciarnos al primer Array con etiqueta "body" tenemos que poner el número del Array [ 0 ].
c) ¿Qué ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qué ocurre esto.
Si no entramos ningún valor a la variable "colorUsuario" el compilador no tendrá ningún valor para poner en la propiedad "background-color", por lo tanto será como no puesta y el fondo del h1 se mostrará como está configurada por defecto por nuestro navegador.
d) ¿Qué ocurre si escribimos pink cuando nos pide el color? Razona por qué ocurre esto.
Realmente, cuando escribimos en el "prompt" nuestro color (siempre y cuando sea un color válido), este se aplica como color para la propiedad "background-color" de la etiqueta h1. Por eso, cuando ponemos "pink" el JavaScript utiliza el valor de la variable como valor para el "background-color" y lee: "background-color: pink".
e) Modifica el código para que usando el operador ternario, si el usuario no introduce como color red, yellow o blue aparezca el mensaje ‘No eligió color o el color es no válido’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo aprendeaprogramar.com</title>
<script type="text/javascript">
function ejemplo() {
var htmlADevolver='';
var colorUsuario=prompt('Elija color red, yellow o blue');
var msg='El htmlADevolver vale: '+htmlADevolver+'\nY la colorUsuario vale: '+colorUsuario;
alert(msg);
htmlADevolver = colorUsuario=='yellow' || colorUsuario=='red' || colorUsuario=='blue' ? '<h1 style="background-color:'+colorUsuario+';"> Usted elegió: '+colorUsuario+'</h1>':'<h1>No elegió color o el color no es válido</h1>';
var nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div style="color: blue;" id="pulsador" onclick="ejemplo()">Probar Ejercicio</div>
</body>
</html>f) Reescribe el código inicial de partida sustituyendo el condicional ternario por if tradicionales.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejemplo aprendeaprogramar.com</title>
<script type="text/javascript">
function ejemplo() {
var htmlADevolver='';
var colorUsuario=prompt('Elija color red, yellow o blue');
var msg='El htmlADevolver vale: '+htmlADevolver+'\nY la colorUsuario vale: '+colorUsuario;
alert(msg);
if(colorUsuario=='yellow' || colorUsuario=='red' || colorUsuario=='blue'){
htmlADevolver ='<h1 style="background-color:'+colorUsuario+';"> Usted elegió: '+colorUsuario+'</h1>'
}else{
htmlADevolver='<h1>No elegió color o el color no es válido</h1>';
}
var nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div style="color: blue;" id="pulsador" onclick="ejemplo()">Probar Ejercicio</div>
</body>
</html>PD: En los apartados "e" y "f" coloqué antes de ejecutarse los cambios en el etiqueta "h1" un alert para comprobar los valores de las dos variables. Lo hice con la finalidad de comprobar si se cumplia la función, pero tampoco lo entendí. Supongo que la variable "htmlADevolver" al estar inicializada como una cadena de texto devuelve "true".
Para resolver los apartados "e" y "f" me he servido con la ayuda del foro de "pedro,," desde el siguente enlace:
https://www.aprenderaprogramar.com/foros/index.php?topic=3416.msg14934#msg14934Gracias.
Tema: Operador ternario JavaScript condicional interrogante innerHTML código CU01152E (Leído 4560 veces)
RSS -
WAP2