« anterior próximo »
Páginas: [1]

Autor Tema: Función eval calculadora JavaScript. getElementsByClassname ejemplo CU01133E  (Leído 2586 veces)

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Función eval calculadora JavaScript. getElementsByClassname ejemplo CU01133E
« en: 18 de Enero 2017, 22:03 »
Buenas noches aquí dejo una posible solución a los ejercicios del curso de fundamentos de programación web con JavaScript......

Citar
EJERCICIOS

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).

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 ejercicio 1.

Código: [Seleccionar]
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Ejemplo Calculadora Aprenderaprogramar.com</title>
    <style media="screen">
        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 {
            border-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 {
            border-color: #FFFFFF;
            border-radius: 3px;
            color: #888888;
            cursor: pointer;
            float: left;
            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;
        }

        .parteSuperior 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;
            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>
        <span class="pantalla"> </span> <!-- OjO tenemos un espacio para que exista nodeValue -->
    </div>

    <div class="teclas">jfkhkkgfkg
        <!-- 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>

Código ejercicio 2.

Código: [Seleccionar]
<!DOCTYPE html>
<html>

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

    <style media="screen">
        #presentacion {
            text-align: center;
            font-size: 35px;
            border: 2px double black;
            width: 200px;
            height: 50px;
        }
    </style>
    <script type="text/javascript">
        var lado;
        function componer(sentido) {
        var accion = 'mover';
        var sobreElemento = 'Imagen';
        var haciaDonde = sentido;
        var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
        eval(llamada);
        }

        function moverImagen(sentido) {
        lado = document.getElementById("presentacion");
        var haciaDonde = lado.childNodes[0];

        if (sentido == "adelante") {
        haciaDonde.nodeValue = sentido;

        } else if (sentido == "atras") {
        haciaDonde.nodeValue = sentido;
        };
        }

    </script>
</head>

<body>
        <div id="presentacion"> </div>
            <input id="botonAdelante" type="button"  value="Adelante" onclick="componer('adelante')" />
            <input id="botonAtras" type="button"  value="Atras" onclick="componer('atras')" />

</body>

</html>


Saludos..... ;D
« Última modificación: 19 de Marzo 2017, 21:39 por Ogramar »
En línea

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:CU01133E Función eval JavaScript. getElementsByClassname
« Respuesta #1 en: 19 de Enero 2017, 11:22 »
En el ejercicio 1 en el div de la clase teclas hay una letras que descolocan los botones de la calculadora.

OK!
En línea

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:CU01133E Función eval JavaScript. getElementsByClassname
« Respuesta #2 en: 25 de Enero 2017, 21:38 »
Tienes razón no se que he echo, dejo el código modificado.

Código: [Seleccionar]
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Ejemplo Calculadora Aprenderaprogramar.com</title>
    <style media="screen">
        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 {
            border-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 {
            border-color: #FFFFFF;
            border-radius: 3px;
            color: #888888;
            cursor: pointer;
            float: left;
            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;
        }

        .parteSuperior 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;
            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>
        <span class="pantalla"> </span> <!-- 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>
 

Saludos y gracias por la corrección..... ;D
En línea
Páginas: [1]
« anterior próximo »
 

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".