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: Cabanota en 27 de Abril 2015, 08:47
-
Hola compañeros. Aquí traigo resuelto el punto 2 del ejercicio de este tema CU01133E del tutorial JavaScript de aprenderaprogramar.
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,
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);
var tmpFunc = new Function(llamada);
tmpFunc();
}
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.
Espero que lo haya entendido bien y que así sea lo que se esta pidiendo, en caso contrario me gustaría entonces que me explicaran bien. De ante mano, muchas gracias.
Código respuesta ejercicio:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
#caja{
text-align: center;
font-size: 30px;
border: 1px solid black;
width: 200px;
height: 30px;
padding-bottom: 8px;
}
</style>
<script type="text/javascript">
var lado;
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);
}
function moverImagen(sentido) {
lado = document.getElementById("caja");
var haciaDonde = lado.childNodes[0];
if (sentido == "adelante") {
haciaDonde.nodeValue = sentido;
} else if (sentido == "atras") {
haciaDonde.nodeValue = sentido;
};
}
</script>
</head>
<body>
<div id="caja"> </div>
<input id="botonAdelante" type="button" value="Adelante" onclick="componer('adelante')" />
<input id="botonAtras" type="button" value="Atras" onclick="componer('atras')" />
</body>
</html>
-
Hola Cabanota, ejercicio perfectamente resuelto, eso era lo que pedía. Te falta el apartado 1), recomendamos completar todos los ejercicios con el fin de poder detectar vicios y corregirlos.
Saludos!
-
Buenas tardes,, gracias.. yo lo hice, pero lo modifique a mi gusto porque no tenia la intención de subirlo, plasme de manera independiente el html, css y javascript. Aparte de eso que cambie la funcion: getElementByClassName por la funcion: getElementById, con intención de probar de diferentes manera con el mismo resultado, pero lo que pedia el ejercicio como tal, lo de cambiar el swicth por condiciones if y else si lo hice tal cual como lo pedía el ejercicio. Vuelvo y repito, modifique a mi gusto porque no tenia la intención de subirlo.
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).
--------------------------------------------------------------------
HTML
<!DOCTYPE html>
<html style="border:none">
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="calculadora.css">
<script type="text/javascript" src="calculadora.js"></script>
</head>
<body style="border:none">
<header> <!-- Cabezera -->
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</header>
<div id="calculadora"> <!-- contenedor -->
<!-- pantalla y la tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div id="pantallota" class="pantalla"> </div> <!-- Se deja un espacio dentro de la etiqueta para poder agarrarlo con el nodeValue -->
</div>
<div class="teclas">
<!-- Operadores y otras letras -->
<span onclick="pulsada('7')">7</span>
<span onclick="pulsada('8')">8</span>
<span onclick="pulsada('9')">9</span>
<span onclick="pulsada('+')" class="operador">+</span>
<span onclick="pulsada('4')">4</span>
<span onclick="pulsada('5')">5</span>
<span onclick="pulsada('6')">6</span>
<span onclick="pulsada('-')" class="operador">-</span>
<span onclick="pulsada('1')">1</span>
<span onclick="pulsada('2')">2</span>
<span onclick="pulsada('3')">3</span>
<span onclick="pulsada('/')" class="operador">÷</span>
<span onclick="pulsada('0')">0</span>
<span onclick="pulsada('.')">.</span>
<span onclick="pulsada('=')" class="igual">=</span>
<span onclick="pulsada('*')" class="operador">x</span>
<span id="probandoAndo" onclick="miPrueba()">probar</span>
</div>
</div>
</body>
</html>-------------------------------------------------------------------------
CSS
body{
font-family: sans-serif;
text-align: center;
}
#calculadora{
font: bold 14px Arial, sans-serif;
background-color: #9DD2EA;
margin: 0 auto;
padding: 20px 20px 9px;
width: 285px;
border-radius: 3px;
/*height: auto;*/
}
.parteSuperior, .teclas{
overflow: hidden;
}
div.parteSuperior div.pantalla{
background-color: rgba(0, 0, 0, 0.2);
color: #FFF;
float: right;
width: 180px;
height: 40px;
font-size: 17px;
border-radius: 3px;
padding: 0 10px;
text-align: right;
letter-spacing: 1px;/*espaciado entre caractere*/
line-height: 40px;
}
.parteSuperior span.limpiar, .teclas span{
background-color: #FFFFFF;
color: #888888;
cursor: pointer;
float: left;
border-radius: 3px;
height: 36px;
width: 66px;
margin: 0 7px 11px 0;
line-height: 36px;
text-align: center;
transition: all 1s ease 0s;
}
.parteSuperior span.limpiar{
background-color: #FF7C87;
}
.teclas span.operador{
margin-right: 0;
background-color: #FFDAB9;
}
.teclas span.igual{
background-color: #F1FF92;
color: #888E5F;
}
.parteSuperior span.limpiar:hover, .teclas span:hover{
background-color: #9C89F6;
color: #FFFFFF;
}
header{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 325px;
margin: 0 auto;
border-radius: 3px;
}
header h2, header h3{
margin: 0;
padding: 5px;
}
header h3{
background-color: #E59DEA;
}
header h2{
background-color: #FFBBF6;
}
.teclas span#probandoAndo{
width: 100%;
}---------------------------------------------------------------------------
javascript
var listaNodoPantalla;
function pulsada(tecla) {
listaNodoPantalla = document.getElementsByClassName("pantalla");
var nodoTextoPantalla = listaNodoPantalla[0].childNodes[0];//Segunda opcion: listaNodoPantalla[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;
}
}
-
Hola lo que te comentaba es la recomendación que hacemos para asegurar el avance. Comentabas que habías cambiado el swith por if, pero yo lo que veo en el código que has pegado es el switch :-[
Saludos
-
JAJAJAJA.. QUE PENAAAA..
AQUI DE NUEVO:
var nodoClass = "";
function pulsada (tecla) {
nodoClass = document.getElementById("pantallota");
var prueba = nodoClass.childNodes[0];
if(tecla == "C"){
prueba.nodeValue = ""; //esta es una manera.
}else if(tecla == "="){
var resultado = eval(prueba.nodeValue);
pantallota.innerHTML = resultado; //esta es otra manera.
}else{
prueba.nodeValue = prueba.nodeValue + tecla;
}
}
// function miPrueba () {
// var probador = nodoClass[0].childNodes[0];
// alert(probador.length);
// }
-
OK!!! ;D