Respuestas al ejercicio CU01152E del tutorial de programación básica en internet con JavaScript.
a) ¿Qué significa el operador += que se emplea en el código?
el operador += es una doble operación y lo que hace es sumar la variable a operar con la variable destino y la guarda en la variable destino, son equivalentes:
variableDestino = variableDestino + variableOperar;
variableDestino += variableOperar;
b) ¿Por qué usamos [ 0 ] para establecer nodoBody?
Por que getElementsByTagName devuelve un array y al poner [ 0 ] le estamos diciendo que de ese array que nos devuelve sólo quedarnos con el de la posición 0, son equivalentes:
nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
con
nodoBody = document.getElementsByTagName('body');
nodoBody[0].innerHTML = nodoBody.innerHTML[0] + htmlADevolver;
y aprovechando la pregunta anterior, también es equivalente:
nodoBody = document.getElementsByTagName('body');
nodoBody[0].innerHTML += htmlADevolver;
c) ¿Qué ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qué ocurre esto.
se crea una etiqueta h1: "<h1>No eligió color</h1>"
esto ocurre por que tenemos el condicional ternario donde si la variable "colorUsuario"
está vacía entonces la variable htmlADevolver guarda la etiqueta h1 mencionada antes.
d) ¿Qué ocurre si escribimos pink cuando nos pide el color? Razona por qué ocurre esto.
Esto ocurre por que usamos la variable colorUsuario como valor del parametro "background-color" en la etiqueta h1, y como "pink" es una palabra reconocida por css pinta h1 de color rosa.
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>' : alert("no eligió color o el color no es válido");
var nodoBody = document.getElementsByTagName('body');
nodoBody[0].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.
<!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');
if(colorUsuario){
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. Condicional ternario getElementsByTagName devuelve un array CU01152E (Leído 1947 veces)
RSS -
WAP2