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: Pandemia 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......
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.
<!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.
<!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
-
En el ejercicio 1 en el div de la clase teclas hay una letras que descolocan los botones de la calculadora.
OK!
-
Tienes razón no se que he echo, dejo el código modificado.
<!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