Autor Tema: JavaScript Función Eval acceso nodo con getElementsByClassName ejemplo CU001133E (Leído 2151 veces)

victorchinea · « **en:** 01 de Mayo 2020, 20:29 »

Hola. Dejo mi solución propuesta para el ejercicio CU001133E del tutorial de desarrollo web con JavaScript de aprenderaprogramar.

Me ha costado bastante entender la función "eval". Pero espero no tenerla que utilizar mucho con eso de que es un "evil"...

Adjunto los ejercicios del tema:

Citar

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">
<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: 0 7px 11px 0; text-align: center; transition: all 0.4s ease 0s; width: 66px;}
.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;
}
</style>
<script type="text/javascript">
function pulsada (tecla) {
  var listaNodosPantalla = document.getElementsByClassName('pantalla');
  var nodoTextoPantalla = listaNodosPantalla[0].firstChild;
  /*switch(tecla) {
    case 'C':
    nodoTextoPantalla.nodeValue = ' ';
    break;
    case '=':
    var resultado = eval(nodoTextoPantalla.nodeValue);
    nodoTextoPantalla.nodeValue = resultado;
    break;
    default:
    nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
    break;}*/
  if (tecla == 'C') {
    nodoTextoPantalla.nodeValue = ' ';}
  else if (tecla == '=') {
    var resultado = eval(nodoTextoPantalla.nodeValue);
    nodoTextoPantalla.nodeValue = resultado;}
  else {
    nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;}  
}
</script>
</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>

Citar

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]

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JavaScript - Función Eval y acceso nodo usando getElementsByClassName - CU001133E</title>
    <style type="text/css">
      #cont_botones {
        background-color: grey;
        border: solid 2px black;
        border-radius: 5px;
        min-width: ;
        width: 500px;
        margin: auto;
        overflow: hidden;
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .botones {
        border: 2px solid white;
        float: left;
        background-color: green;
        border-radius: 5px;
        height: 40px;
        width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        }
      .botones:hover {
        background-color: blue;
        color: white;
      }
    </style>
    <script type="text/javascript">
    function componer(sentido) {
      var accion = 'mover';
      var sobreElemento = 'Imagen';
      var haciaDonde = sentido;
      var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
      alert ('<<' + sentido + '>>');
      eval(llamada);
    }
    </script>
  </head>
  <body>
    <div id="cont_botones">
      <div class="botones" onclick="componer('adelante')">
        <span>Adelante</span>
      </div>
      <div class="botones" onclick="componer('atras')">
        <span>Atrás</span>
      </div>
    </div>
  </body>
</html>

Gracias, un saludo.

Alex Rodríguez · « **Respuesta #1 en:** 02 de Mayo 2020, 22:35 »

Hola, vas muy bien encaminado pero tienes dos errores en el código. Un primer error salta por tener la línea min-width: ; al estar vacía genera un error.

Otro error lo tienes con el eval. Fíjate que eval ejecuta aquello que recibe (o al menos lo intenta). Tú le estás pasando a eval por ejemplo moverImagen('adelante'), que es la cadena que creas. Y esto genera un error del tipo ReferenceError: moverImagen is not defined

¿Por qué? Porque estás llamando a una función que no existe.

Para resolver el ejercicio, tienes que definir la función moverImagen para que al invocar ésta, sea ésta quien se encargue de mostrar el mensaje, en lugar de la función componer(sentido). La función componer sólo debe encargarse de preparar la llamada a la otra función. El propio ejercicio dice que "La función moverImagen(sentido) puede contener un simple mensaje indicando el valor del parámetro <<sentido>> recibido."
Tu código hace algo: mostrar un mensaje cuando se pulsa un botón, pero eval aquí no está haciendo nada y ese no es el objetivo.

Saludos

victorchinea · « **Respuesta #2 en:** 05 de Mayo 2020, 23:18 »

Hola Alex

Ahora acabo de ver realmente el sentido a "eval". Hago las correcciones y espero esté bien ahora resuelto el ejercicio 2.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JavaScript - Función Eval y acceso nodo usando getElementsByClassName - CU001133E</title>
    <style type="text/css">
      #cont_botones {
        background-color: grey;
        border: solid 2px black;
        border-radius: 5px;
        width: 500px;
        margin: auto;
        overflow: hidden;
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .botones {
        border: 2px solid white;
        float: left;
        background-color: green;
        border-radius: 5px;
        height: 40px;
        width: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        }
      .botones:hover {
        background-color: blue;
        color: white;
      }
    </style>
    <script type="text/javascript">
    function moverImagen(sentido){
      alert ('<<' + sentido + '>>');
    }

    function componer(sentido) {
      var accion = 'mover';
      var sobreElemento = 'Imagen';
      var haciaDonde = sentido;
      var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
      eval(llamada);
    }
    </script>
  </head>
  <body>
    <div id="cont_botones">
      <div class="botones" onclick="componer('adelante')">
        <span>Adelante</span>
      </div>
      <div class="botones" onclick="componer('atras')">
        <span>Atrás</span>
      </div>
    </div>
  </body>
</html>

Un saludo y gracias!!

Alex Rodríguez · « **Respuesta #3 en:** 06 de Mayo 2020, 08:35 »

Ahora sí que lo veo todo correcto. Saludos.

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

Noticias:

Autor Tema: JavaScript Función Eval acceso nodo con getElementsByClassName ejemplo CU001133E (Leído 2151 veces)

victorchinea

JavaScript Función Eval acceso nodo con getElementsByClassName ejemplo CU001133E

Alex Rodríguez

Re:JavaScript - Función Eval y acceso nodo usando getElementsByClassName CU001133E

victorchinea

Re:JavaScript - Función Eval y acceso nodo usando getElementsByClassName CU001133E

Alex Rodríguez

Re:JavaScript - Función Eval y acceso nodo usando getElementsByClassName CU001133E

Preguntas y respuestas