Autor Tema: innerHTML JavaScript. Modificar texto o html div en tiempo real ejemplo CU01138E (Leído 4285 veces)

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

Código: [Seleccionar]

<!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>

Mario R. Rancel · « **Respuesta #1 en:** 01 de Julio 2016, 22:23 »

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.

Salvadoruve2 · « **Respuesta #2 en:** 06 de Julio 2016, 11:42 »

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

Ogramar · « **Respuesta #3 en:** 08 de Julio 2016, 18:44 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: innerHTML JavaScript. Modificar texto o html div en tiempo real ejemplo CU01138E (Leído 4285 veces)

Salvadoruve2

innerHTML JavaScript. Modificar texto o html div en tiempo real ejemplo CU01138E

Mario R. Rancel

Re:innerHTML JavaScript. Modificar texto o html div en tiempo real ejemplo CU01138E

Salvadoruve2

Re:innerHTML JavaScript. Modificar texto o html div en tiempo real ejemplo CU01138E

Ogramar

Re:innerHTML JavaScript. Modificar texto o html div en tiempo real ejemplo CU01138E

Preguntas y respuestas