Autor Tema: JavaScript transformar switch en if y ejemplo función eval mover imagen CU01133E (Leído 2506 veces)

paramonso · « **en:** 18 de Octubre 2017, 11:25 »

Hola.

Entrego los ejercicios CU01133E 1 y 2 de Función eval del curso de JavaScript.
getElementsByClassname.

Ejercicio 1

1) Modifica el código del ejemplo de la calculadora javascript para que en lugar del condicional switch uses el condicional if (con if else ó if else if cuando sea necesario).

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">

/*********************ejercicio 1 *************************/
function pulsada (tecla) {
var listaNodosPantalla = document.getElementsByClassName('pantalla');
var nodoTextoPantalla = listaNodosPantalla[0].firstChild;

if (tecla=='='){var resultado = eval(nodoTextoPantalla.nodeValue);nodoTextoPantalla.nodeValue = resultado;}
else {nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;}
if (tecla=="C"){nodoTextoPantalla.nodeValue = ' '; }

}
</script>
/*************************************************************/

<style type="text/css">
body {font-family: sans-serif; text-align:center;}
#calculadora { font: bold 14px Arial,sans-serif; background-color: #9DD2EA;  border-radius: 3px; height: auto; margin: 0 auto;
    padding: 20px 20px 9px; width: 285px;}
.parteSuperior .pantalla { background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFFFFF; float: right; font-size: 17px; height: 40px; letter-spacing: 1px; line-height: 40px; padding: 0 10px; text-align: right; width: 180px;}
.teclas, .parteSuperior {overflow: hidden; }
.teclas span, .parteSuperior span.limpiar {     background-color: #FFFFFF; border-radius: 3px; color: #888888; cursor: pointer;
    float: left; height: 36px; line-height: 36px; margin: 1px 7px 11px 3px; text-align: center; transition: all 0.4s ease 0s; width: 61px;}
.parteSuperior span.limpiar { background-color:#FF7C87;}
.teclas span.operador { background-color: #FFDAB9; margin-right: 0; }
.teclas span.igual { background-color: #F1FF92; color: #888E5F;}
.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }
.teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover {
    background-color: #9C89F6; color: #FFFFFF;
    box-shadow:2px 2px 2px 2px white;
	color:white;
}
#calculadora,  span{box-shadow:2px 2px 2px 2px black;
	color:black;}
</style>


</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo calculadora JavaScript</h3></div>
<!-- Calculadora -->
<div id="calculadora">
                <!-- pantalla y tecla limpiar -->
                <div class="parteSuperior">
                               <span class="limpiar" onclick="pulsada('C')">C</span>
                               <div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
                </div>
                <div class="teclas">
                               <!-- operadores y otras teclas -->
                               <span onclick="pulsada('7')">7</span>
                               <span onclick="pulsada('8')">8</span>
                               <span onclick="pulsada('9')">9</span>
                               <span class="operador" onclick="pulsada('+')">+</span>
                               <span onclick="pulsada('4')">4</span>
                               <span onclick="pulsada('5')">5</span>
                               <span onclick="pulsada('6')">6</span>
                               <span class="operador" onclick="pulsada('-')">-</span>
                               <span onclick="pulsada('1')">1</span>
                               <span onclick="pulsada('2')">2</span>
                               <span onclick="pulsada('3')">3</span>
                               <span class="operador" onclick="pulsada('/')">÷</span>
                               <span onclick="pulsada('0')">0</span>
                               <span onclick="pulsada('.')">.</span>
                               <span class="igual" onclick="pulsada('=')">=</span>
                               <span class="operador" onclick="pulsada('*')">x</span>
                </div>
</div>
</body>
</html>

Ejercicio 2

2) Utilizando el ejemplo de código que usa la función eval en la función <<function componer(sentido)>> que hemos visto dentro del código de los ejemplos, crea una página web donde existan dos botones que pongan “Adelante” y “Atrás”, de modo que cuando se pulsen den lugar a que se llame la función componer(sentido). En esta función, a través de la función eval se ejecutará moverImagen('adelante') ó moverImagen('atras') según el parámetro recibido. La función moverImagen(sentido) puede contener un simple mensaje indicando el valor del parámetro <<sentido>> recibido.

Código: [Seleccionar]

<html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

<script type="text/javascript">

/**********************Ejercicio 2 ******************/
function componer(sentido) {
var accion = 'mover';
var sobreElemento = 'Imagen';
var haciaDonde = sentido;
var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
alert ('La unión del texto genera ' + llamada);
eval(llamada);
}

/************************************************/
var numeroImagenActual =9;
function moverImagen(movimiento) { 
if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt = 'Camiseta 9 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title = 'Diálogo entre informáticos';
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt = 'Camiseta 6 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title = 'Desbordado por los números';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt = 'Camiseta 11 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title = 'Estudiando programacion';
}
numeroImagenActual = valorNuevoNumeroImagen;

document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}

</script>


<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>

</head>
<body>
<div >
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="componer('atras')"> <<< Atrás </div>
<div id="adelante" onclick="componer('adelante')" >Adelante >>></div>
</div>
</div></body></html>

Ogramar · « **Respuesta #1 en:** 26 de Enero 2018, 20:01 »

Buenas paramonso

En el ejercicio 1 el código propuesto funciona, no obstante no es la forma más elegante de escribirlo

Código: [Seleccionar]

if (tecla=='='){var resultado = eval(nodoTextoPantalla.nodeValue);nodoTextoPantalla.nodeValue = resultado;}
else {nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;}
if (tecla=="C"){nodoTextoPantalla.nodeValue = ' '; }

Si te fijas, en el caso de pulsarse C en primer lugar se ejecuta el else del primer if, y luego el segundo if. Estás ejecutando dos sentencias cuando solo te haría falta una como puede verse en https://www.aprenderaprogramar.com/foros/index.php?topic=2461.msg11750#msg11750

El ejercicio 2 funciona bien. En realidad bastaba con mostrar el sentido del movimiento

Puedes ver una solución en el mismo hilo que he puesto antes

Salu2

paramonso · « **Respuesta #2 en:** 27 de Enero 2018, 11:39 »

Hola Ogramar.

Tienes razón en lo del código.
Tenia que haber puesto en primer lugar la evaluación de la tecla "C" para que no entrara en el primer if.

Código: [Seleccionar]

if (tecla=="C")
	{
		nodoTextoPantalla.nodeValue = ' ';
    }
if (tecla=='=')
	{
		var resultado = eval(nodoTextoPantalla.nodeValue);
		nodoTextoPantalla.nodeValue = resultado;
	}
else 
	{
		nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
	}

Fue un despiste de las prisas.
Por lo demás los codigos son casi idénticos.

En el ejercicio 2 y en el ejemplo que me pones lo veo algo corto a la hora de ver el funcionamiento de ir adelante o atras.
Ya que por mucho que pulses en los botones no se ve si avanza, retrocede o ya no puede avanzar o retroceder.

Si me dices que con la solución de Cabonata era suficiente par ver el funcionamiento estoy totalmente de acuerdo con tu corrección.

Yo lo hice asi por practicar un poco más y que se viera el efecto de ir hacia delante, hacia atras y no se podia avanzar o retroceder.

Gracias por corregirme.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: