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

Autor Tema: Calculadora Javascript código con Acceso a nodos document.querySelector CU01134E  (Leído 1899 veces)

Pepote21

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 92
    • Ver Perfil
Calculadora Javascript código con Acceso a nodos document.querySelector CU01134E
« en: 15 de Mayo 2017, 18:12 »
Hola a todos. Os paso mi código para el ejercicio CU01134E del curso sobre fundamentos de programación web con JavaScript.
Gracias
Un saludo

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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: 295px;}
            .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; }
            #contenedor {width:285px;margin: 40px auto; overflow:hidden;}
            #marcaNumeros, #marcaOperadores, #marcaTeclaC, #marcaTeclaPunto, #marcaPantalla, #limpiaTodo {padding:15px; width: 90px;
display: inline-block; margin: 10px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
            #marcaNumeros:hover, #marcaOperadores:hover, #marcaTeclaC:hover, #marcaTeclaPunto:hover, #marcaPantalla:hover, #limpiaTodo:hover {
background: rgb(66, 184, 221);}
        </style>
        <script type="text/javascript">
            function marcarOperadores() {
                var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
                var nodoIgual = document.querySelector (".igual");
                for (var i=0; i<listaNodosOperadores.length; i++) {
                    listaNodosOperadores[i].style.backgroundColor = "yellow";
                    listaNodosOperadores[i].style.color = "black";
                    listaNodosOperadores[i].style.border = "solid 1px";
                }
                nodoIgual.style.backgroundColor = "yellow";
                nodoIgual.style.color = "black";
                nodoIgual.style.border = "solid 1px";
            }
            function marcarNumeros() {
                var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
                for (var i=0; i<listaNodosNumeros.length; i++) {
                    listaNodosNumeros[i].style.backgroundColor = "black";
                    listaNodosNumeros[i].style.color = "white";
                    listaNodosNumeros[i].style.border = "solid 1px";
                }
            }
function marcarTeclaC(){
    var nodoC=document.querySelector(".limpiar");
nodoC.style.backgroundColor="pink";
nodoC.style.color="white";
}
function marcarTeclaPunto(){
    var nodoPunto=document.querySelector("#calculadora .teclas span.punto");
nodoPunto.style.backgroundColor="violet";
nodoPunto.style.color="white";
}
function marcarPantalla(){
    var nodoPantalla=document.querySelector("#calculadora .parteSuperior div.pantalla");
nodoPantalla.style.backgroundColor="blue";
}
function limpiarTodo(){
    var nodoC=document.querySelector(".limpiar");
nodoC.style.backgroundColor="#FF7C87";
nodoC.style.color="black";

var nodoPunto=document.querySelector("#calculadora .teclas span.punto");
nodoPunto.style.backgroundColor="#FFFFFF";
nodoPunto.style.color="black";

var nodoPantalla=document.querySelector("#calculadora .parteSuperior div.pantalla");
nodoPantalla.style.backgroundColor="rgba(0, 0, 0, 0.2)";

var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
                for (var i=0; i<listaNodosNumeros.length; i++) {
                    listaNodosNumeros[i].style.backgroundColor = "#FFFFFF";
                    listaNodosNumeros[i].style.color = "#888888";
                    listaNodosNumeros[i].style.border = "3px";
}

var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
                var nodoIgual = document.querySelector (".igual");
                for (var i=0; i<listaNodosOperadores.length; i++) {
                    listaNodosOperadores[i].style.backgroundColor = "#FFDAB9";
                    listaNodosOperadores[i].style.color = "#888888";
                    listaNodosOperadores[i].style.border = "3px";
                }
                nodoIgual.style.backgroundColor = "#F1FF92";
                nodoIgual.style.color = "#888E5F";
                nodoIgual.style.border = "3px";
}

        </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 class = "numero" onclick="pulsada('7')">7</span>
                <span class = "numero" onclick="pulsada('8')">8</span>
                <span class = "numero" onclick="pulsada('9')">9</span>
                <span class="operador" onclick="pulsada('+')">+</span>
                <span class = "numero" onclick="pulsada('4')">4</span>
                <span class = "numero" onclick="pulsada('5')">5</span>
                <span class = "numero" onclick="pulsada('6')">6</span>
                <span class="operador" onclick="pulsada('-')">-</span>
                <span class = "numero" onclick="pulsada('1')">1</span>
                <span class = "numero" onclick="pulsada('2')">2</span>
                <span class = "numero" onclick="pulsada('3')">3</span>
                <span class="operador" onclick="pulsada('/')">÷</span>
                <span class = "numero" onclick="pulsada('0')">0</span>
                <span class ="punto" onclick="pulsada('.')">.</span>
                <span class="igual" onclick="pulsada('=')">=</span>
                <span class="operador" onclick="pulsada('*')">x</span>
            </div>
        </div>
        <div id="contenedor">
            <div id ="marcaNumeros" onclick="marcarNumeros()"> Marcar números </div>
            <div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
<div id="marcaTeclaC" onclick="marcarTeclaC()">Marcar tecla C</div>
<div id="marcaTeclaPunto" onclick="marcarTeclaPunto()">Marcar tecla Punto</div>
<div id="marcaPantalla" onclick="marcarPantalla()">Marcar pantalla</div>
<div id="limpiaTodo" onclick="limpiarTodo()">Limpiar todo</div>
        </div>
    </body>
</html>
« Última modificación: 15 de Junio 2017, 20:01 por Ogramar »
En línea

Pepote21

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 92
    • Ver Perfil
Re:Javascript Acceso a nodos por selectores. Ejercicio CU01134E
« Respuesta #1 en: 15 de Mayo 2017, 18:44 »
Hola. No me he dado cuenta y he pasado el código sin realizar la función de las operaciones. Debido a ello he copiado esta función del ejercicio CU01133E.
Os paso el código completo
Gracias
Un saludo

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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: 295px;}
            .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; }
            #contenedor {width:285px;margin: 40px auto; overflow:hidden;}
            #marcaNumeros, #marcaOperadores, #marcaTeclaC, #marcaTeclaPunto, #marcaPantalla, #limpiaTodo {padding:15px; width: 90px;
display: inline-block; margin: 10px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
            #marcaNumeros:hover, #marcaOperadores:hover, #marcaTeclaC:hover, #marcaTeclaPunto:hover, #marcaPantalla:hover, #limpiaTodo:hover {
background: rgb(66, 184, 221);}
        </style>
        <script type="text/javascript">
            function marcarOperadores() {
                var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
                var nodoIgual = document.querySelector (".igual");
                for (var i=0; i<listaNodosOperadores.length; i++) {
                    listaNodosOperadores[i].style.backgroundColor = "yellow";
                    listaNodosOperadores[i].style.color = "black";
                    listaNodosOperadores[i].style.border = "solid 1px";
                }
                nodoIgual.style.backgroundColor = "yellow";
                nodoIgual.style.color = "black";
                nodoIgual.style.border = "solid 1px";
            }
            function marcarNumeros() {
                var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
                for (var i=0; i<listaNodosNumeros.length; i++) {
                    listaNodosNumeros[i].style.backgroundColor = "black";
                    listaNodosNumeros[i].style.color = "white";
                    listaNodosNumeros[i].style.border = "solid 1px";
                }
            }
function marcarTeclaC(){
    var nodoC=document.querySelector(".limpiar");
nodoC.style.backgroundColor="pink";
nodoC.style.color="white";
}
function marcarTeclaPunto(){
    var nodoPunto=document.querySelector("#calculadora .teclas span.punto");
nodoPunto.style.backgroundColor="violet";
nodoPunto.style.color="white";
}
function marcarPantalla(){
    var nodoPantalla=document.querySelector("#calculadora .parteSuperior div.pantalla");
nodoPantalla.style.backgroundColor="blue";
}
function limpiarTodo(){
    var nodoC=document.querySelector(".limpiar");
nodoC.style.backgroundColor="#FF7C87";
nodoC.style.color="black";

var nodoPunto=document.querySelector("#calculadora .teclas span.punto");
nodoPunto.style.backgroundColor="#FFFFFF";
nodoPunto.style.color="black";

var nodoPantalla=document.querySelector("#calculadora .parteSuperior div.pantalla");
nodoPantalla.style.backgroundColor="rgba(0, 0, 0, 0.2)";

var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
                for (var i=0; i<listaNodosNumeros.length; i++) {
                    listaNodosNumeros[i].style.backgroundColor = "#FFFFFF";
                    listaNodosNumeros[i].style.color = "#888888";
                    listaNodosNumeros[i].style.border = "3px";
}

var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
                var nodoIgual = document.querySelector (".igual");
                for (var i=0; i<listaNodosOperadores.length; i++) {
                    listaNodosOperadores[i].style.backgroundColor = "#FFDAB9";
                    listaNodosOperadores[i].style.color = "#888888";
                    listaNodosOperadores[i].style.border = "3px";
                }
                nodoIgual.style.backgroundColor = "#F1FF92";
                nodoIgual.style.color = "#888E5F";
                nodoIgual.style.border = "3px";
}
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;
                }
}

        </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 class = "numero" onclick="pulsada('7')">7</span>
                <span class = "numero" onclick="pulsada('8')">8</span>
                <span class = "numero" onclick="pulsada('9')">9</span>
                <span class="operador" onclick="pulsada('+')">+</span>
                <span class = "numero" onclick="pulsada('4')">4</span>
                <span class = "numero" onclick="pulsada('5')">5</span>
                <span class = "numero" onclick="pulsada('6')">6</span>
                <span class="operador" onclick="pulsada('-')">-</span>
                <span class = "numero" onclick="pulsada('1')">1</span>
                <span class = "numero" onclick="pulsada('2')">2</span>
                <span class = "numero" onclick="pulsada('3')">3</span>
                <span class="operador" onclick="pulsada('/')">÷</span>
                <span class = "numero" onclick="pulsada('0')">0</span>
                <span class ="punto" onclick="pulsada('.')">.</span>
                <span class="igual" onclick="pulsada('=')">=</span>
                <span class="operador" onclick="pulsada('*')">x</span>
            </div>
        </div>
        <div id="contenedor">
            <div id ="marcaNumeros" onclick="marcarNumeros()"> Marcar números </div>
            <div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
<div id="marcaTeclaC" onclick="marcarTeclaC()">Marcar tecla C</div>
<div id="marcaTeclaPunto" onclick="marcarTeclaPunto()">Marcar tecla Punto</div>
<div id="marcaPantalla" onclick="marcarPantalla()">Marcar pantalla</div>
<div id="limpiaTodo" onclick="limpiarTodo()">Limpiar todo</div>
        </div>
    </body>
</html>
En línea

miguelito

  • Visitante
Re:Javascript Acceso a nodos por selectores. Ejercicio CU01134E
« Respuesta #2 en: 15 de Mayo 2017, 19:55 »
muy bueno
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".