Autor Tema: condicional if interrogante JavaScript document.getElementsByTagName CU01152E  (Leído 2279 veces)

Salvadoruve2

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Hola respecto al ejercicio de este apartado CU01152E del manual de desarrollo web con JavaScript. Código propuesto por el enunciado.

Código: [Seleccionar]
<!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 ? '<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>

Preguntas:

a) ¿Qué significa el operador += que se emplea en el código?

Viene de la expresión: a += b;  equivale: a = a+b;


b) ¿Por qué usamos [ 0 ] para establecer nodoBody?

Para que el nuevo elemento H1 se anide en el hijo [ 0 ] de Body que en este caso es el mismo Body


c) ¿Qué ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qué ocurre esto.

htmlADevolver = ' ' significa que al menos hemos de escribir un caracter para que sea True la condición


d) ¿Qué ocurre si escribimos pink cuando nos pide el color? Razona por qué ocurre esto.

La sintaxis "style = background-color:" reconoce a Pink como un color verdadero y lo ejecuta según lo establecido


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’


Código: [Seleccionar]
<!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 && colorUsuario== 'yellow' || colorUsuario=='red' || 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.

Código: [Seleccionar]
<!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 (htmlADevolver += colorUsuario) {
if (colorUsuario== 'yellow') {
'<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>'
}
if (colorUsuario=='red') {
'<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>'
}
if (colorUsuario=='blue') {
'<h1 style="background-color:'+colorUsuario+

';"> Usted eligió '+colorUsuario+'</h1>'
}


else {'<h1>No eligió color</h1>'}


htmlADevolver += colorUsuario && colorUsuario== 'yellow' || colorUsuario=='red' || 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>



Este ultimo apartado he tenido un error que no he sabido solventar
« Última modificación: 06 de Agosto 2016, 18:39 por César Krall »
Dt. Crane psychiatrist

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola!

a) Bien

b) Copio un comentario de otro ejercicio

getElementsByTagName('body') devuelve un array con todos los nodos cuya etiqueta se llame body. Como solo hay una etiqueta, en un array el primer elemento es el 0 por eso se utiliza [ 0 ].

c) var htmlADevolver = ''; lo que hace es inicializar la variable htmlADevolver a una cadena vacía.

Si no escribimos nada cuando se pide un color la variable colorUsuario queda vacía, y al ser evaluada en el if se evalúa como false por estar vacía.

d) Bien

En el código del apartado f) tienes mal planteada parte del código

if (htmlADevolver += colorUsuario) no es una forma válida de expresar una condición.

Además si escribes los if tradicionales tienes que eliminar el if ternario porque si no tienes dos veces la misma evaluación

La idea sería: comprobar si el usuario introdujo un color, esto se haría escribiendo if (colorUsuario) {

Si el usuario introdujo un color, verificamos que haya introducido el color correcto, o si no es un color correcto creamos el mensaje avisando de que el color no es correcto.

El código modificado sería este:

Código: [Seleccionar]
<!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) {
if (colorUsuario== 'yellow') {
htmlADevolver += '<h1 style="background-color:'+colorUsuario+ ';"> Usted eligió '+colorUsuario+'</h1>';
}
else if (colorUsuario=='red') {
htmlADevolver += '<h1 style="background-color:'+colorUsuario+';"> Usted eligió '+colorUsuario+'</h1>';
}
else if (colorUsuario=='blue') {
htmlADevolver += '<h1 style="background-color:'+colorUsuario+';"> Usted eligió '+colorUsuario+'</h1>';
}
else {htmlADevolver += '<h1>Color elegido no válido</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>

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

Salvadoruve2

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 69
  • Good night Seattle
    • Ver Perfil
Gracias de nuevo, sobre todo por haberte tomado la molestia de corregir mis ejercicios.

Apunto las anotaciones
Dt. Crane psychiatrist

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".