Buenas. Respuesta al ejercicio CU01152E del tutorial de programación web con JavaScript usando Notepad++ como editor.
EJERCICIO
Ejecuta este script y responde a las siguientes preguntas (algunas de ellas corresponden a cuestiones que hemos visto a lo largo del curso):
a) ¿Qué significa el operador += que se emplea en el código?
b) ¿Por qué usamos [ 0 ] para establecer nodoBody?
c) ¿Qué ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qué ocurre esto.
d) ¿Qué ocurre si escribimos pink cuando nos pide el color? Razona por qué ocurre esto.
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’
f) Reescribe el código inicial de partida sustituyendo el condicional ternario por if tradicionales.
a) htmlADevolver += colorUsuario, es lo mismo que htmlADevolver = htmlADevolver + colorUsuario.
Aunque siendo htmlADevolver='', no le veo ninguna utilidad.
b) getElementsByTagName('body') devuelve un array con todos los nodos cuya etiqueta se llame body. Como solo hay una etiqueta, en un array el primer elementos es el 0 por eso se utiliza [ 0 ].
c) Ocurre que htmlADevolver = '<h1>No eligió color</h1>', entiendo que colorUsuario al no recibir ningún valor, devuelve false al operador ternario y se ejecuta la segunda expresión.
d)Ocurre que se ejecuta la primera expresión del ternario. Creo que es porque colorUsuario al contener un valor, sea cual sea, devuelve true al operador ternario.
El apartado e y f se resuelve en el siguiente código...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
.pulsador {padding:15px; width: auto; display: inline-block; margin: 25px;
cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
</style>
<script type="text/javascript">
function ejemploInicial() {
var htmlADevolver = '';
var colorUsuario = prompt('Elija color red, yellow o blue');
htmlADevolver += colorUsuario ? '<h1 style="background-color:'+colorUsuario+
';"> Usted eligió '+colorUsuario+'</h1>' : '<h1>No eligió color</h1>';
var nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
}
function ejemploConIf() {
var htmlADevolver = '';
var colorUsuario = prompt('Elija color red, yellow o blue');
if(colorUsuario=='red' || colorUsuario=='yellow' || colorUsuario=='blue'){
htmlADevolver = '<h1 style="background-color:'+colorUsuario+';"> Usted eligió '+colorUsuario+'</h1>';
}else{
htmlADevolver = '<h1>No eligió color o el color no es válido</h1>';
}
var nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
}
function ejemploTernario() {
var htmlADevolver = '';
var colorUsuario = prompt('Elija color red, yellow o blue');
htmlADevolver = colorUsuario=='red' || colorUsuario=='yellow' || colorUsuario=='blue' ? '<h1 style="background-color:'+
colorUsuario+';"> Usted eligió '+colorUsuario+'</h1>' : '<h1>No eligió 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></div>
<div class ="pulsador" onclick="ejemploInicial()"> Probar </div>
<div class ="pulsador" onclick="ejemploConIf()"> Probar apartado f </div>
<div class ="pulsador" onclick="ejemploTernario()"> Probar apartado e</div>
</body>
</html>,,
Tema: Operador condicional ternario JavaScript qué significa interrogante CU01152E# (Leído 4543 veces)
RSS -
WAP2