Hola. Dejo la entrega del ejercicio CU1152E Operadores ternarios js desde cero del curso gratuito de programación JavaScript de aprenderaprogramar.
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?
Se asigna a operador operador y lo que sigue detras del igual
Es lo mismo que operador=operador + "Lo que sigue al signo +"
b) ¿Por qué usamos '['0']' para establecer nodoBody?
Porque queremos que coja del arbol DOM el primer elemento body
c) ¿Qué ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qué ocurre esto.
Nos da un mensaje para decirnos que no hemos introducido un color.
Ocurre que al evaluar la condición no se cumple porque colorUsuario esta vacio y devuelve falso.
Al devolver falso se pasa a la siguiente condición.
? = si verdadero, : = en caso contrario;
? en este caso es falso y se pasa a : en caso contrario
d) ¿Qué ocurre si escribimos pink cuando nos pide el color? Razona por qué ocurre esto.
El fondo se pone de color rosa y se imprime el texto.
Ocurre por que nos pide un valor para colorUsuario y aunque en el mensaje de texto hayamos introducido tres colores, se presentará por pantalla el color introducido en la caja de texto (Siempre que ese color exista).
Si le damos cualquier otro valor diferente a los colores que acepta HTML nos pondrá el fondo con el color por defecto.
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>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
function ejemplo()
{
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</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 </div>
</body>
</html>
f) Reescribe el código inicial de partida sustituyendo el condicional ternario por if tradicionales.
<!DOCT<<YPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
function ejemplo()
{
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</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 </div>
</body>
</html>
Tema: JavaScript cómo se interpreta o qué es condicional con interrogante CU01152E (Leído 2125 veces)
RSS -
WAP2