Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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).
<!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.
<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>
;)
-
Buenas paramonso
En el ejercicio 1 el código propuesto funciona, no obstante no es la forma más elegante de escribirlo
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
-
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.
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.
;) ;D