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: Salvadoruve2 en 26 de Junio 2016, 00:37
-
Hola aqui os dejo la resolución del ejercicio CU01138E del tutorial de programación web desde cero con JavaScript.
He tenido algunas dificultades con el css, por que no tengo frescos los conocimientos. Por ejemplo no he sabido cuadrar el texto en el medio de la caja sin que ello me desmoronase la estructura cuadrada... En fin cuando acabe con Javascript tendré que darle una vuelta a CSS..
Por lo demás creo que la solución no está del todo desencaminada
<!DOCTYPE html>
<html>
<head>
<title>Pawa</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {text-align: center;}
#contenedor {width: 400px; height: 400px; margin: 0 auto; margin-top: 50px; ba border-style: solid; border-width: 0px;}
#superior {width: 400px; height: 200px; }
#inferior {width: 400px; height: 200px; }
#caja1 {border-style: solid; border-width: 2px; width: 196px; height: 196px; margin: 0px; float: left;}
#caja2 {border-style: solid; border-width: 2px; width: 196px; height: 196px; margin: 0px; display: inline-block;}
#caja3 {border-style: solid; border-width: 2px; width: 196px; height: 196px; margin: 0px; float: left;}
#caja4 {border-style: solid; border-width: 2px; width: 196px; height: 196px; margin: 0px; display: inline-block;}
#adelante {padding:15px; width: 130px; margin: 0 auto; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroActual = 1;
function cambiarImagen(movimiento){
if (numeroActual == 1 && movimiento == 'adelante') {
var valorNuevoImagen = 2;
document.getElementById('caja1').innerHTML='<div style=\' background-color: black; height: 196px; color: white; \'>El</div>';
}
if (numeroActual == 2 && movimiento == 'adelante') {
var valorNuevoImagen = 3;
document.getElementById('caja2').innerHTML='<div style=\' height: 196px; \'>poder</div>';
}
if (numeroActual == 3 && movimiento == 'adelante') {
var valorNuevoImagen = 4;
document.getElementById('caja3').innerHTML='<div style=\' height: 196px; \'>de</div>';
}
if (numeroActual == 4 && movimiento == 'adelante') {
var valorNuevoImagen = 5
document.getElementById('caja4').innerHTML='<div style=\' background-color: yellow; height: 196px; color: black; \'>javascript</div>';
}
if (numeroActual == 5 && movimiento == 'adelante'){
alert('No se puedde continuar');
}
numeroActual = valorNuevoImagen;
}
</script>
</head>
<body>
<div id="contenedor">
<div id="superior">
<div id="caja1">?</div>
<div id="caja2">?</div>
</div>
<div id="inferior">
<div id="caja3">?</div>
<div id="caja4">?</div>
</div>
</div>
<div id="adelante" onclick="cambiarImagen('adelante')">Pulsa aquí</div>
</body>
</html>
-
Buenas noches, el ejercicio está bien resuelto. Como has comentado, se puede mejorar lo que es la presentación y uso de CSS. De hecho, si has visto otros hilos en los foros, en general recomendamos seguir este orden para los cursos de programación web: primero HTML, luego CSS, luego JavaScript, luego PHP y luego Ajax.
Saludos.
-
Hola gracias por la respuesta...
Y aprovecho para hacerte una pregunta ya que has mencionado el hilo de aprendizaje para los cursos de programación.
Y es que como has indicado ya he realizado los cursos de HTML y CSS. Actualmente sigo el curso de Javascript.. Mi pregunta es si es necesario después hacer el curso de php. Se que todo depende de si se quiere especializar alguine en Front o en Back-end.. Yo por mi parte no lo tengo muy claro.. Me gusta el lenguaje JAvascript y me gustaría seguir avanzando en él.. pero no se muy bien hacia que dirección...
Gracias
-
Buenas, yo recomendaría seguir el curso de php y el curso de ajax porque son cursos básicos que te dan una buena orientación de programación web. Luego ya podrías decantarte por especializarte en algo
Salu2