Autor Tema: DOM y modificar nodos con JavaScript. nodeValue. Ejercico tutorial CU01128E (Leído 3943 veces)

Cabanota · « **en:** 14 de Abril 2015, 20:06 »

Buenas tardes colegas. Aquí quiero hacer entrega del ejercicio propuesto por este tema. Lo hice y la verdad me a ido muy bien(o eso creo) porque me dio el resultado esperado. Lo posteo con la intención de saber y existe una manera aun mas fácil y corta de realizarlo. Estare muy agradecido con sus respuestas. De ante mano muchas gracias..

Citar

Modifica el código anterior para introducir div que simule un botón con el texto “Cambiar a Inglés” y otro div simulando un botón “Cambiar a español”. Al pulsar sobre el botón cambiar a inglés, debes acceder a los nodos del DOM de tipo label y usando relaciones de parentesco entre nodos acceder a aquellos nodos cuyo nodeValue es Nombre:, Apellidos:, y Correo electrónico: y cambiar su nodeValue por Name:, Surname: y e-mail:.

Código: [Seleccionar]


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style type="text/css">
	label{
		color: maroon;
		display: block;
		padding: 5px;
	}
	body{
		background-color: white;
		font-family: sans-serif;
	}
	#idioma{
		display: inline-block;
		padding: 5px;
	}
	</style>

</head>
<body>
	<div id="cabecera">
		<h1>Portal web aprendiendoaprogramar.com</h1>
		<h2>Didactica y divulgacionde la programacion</h2>
	</div>
	<!--Formularion del contacto-->
	<div style="width:450px; border: 1px solid black; padding: 0px 4px">
		<form name="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('label')">
			<p>Si quieres contactar con nosotros envianos este formulario relleno:</p>	
			<label for="nombre"><span>Nombre: </span><input id="nombre" type="text" name="nombre" /></label>
			<label for="apellidos"><span>Apellidos: </span><input id="apellidos" type="text" name="apellidos" /></label>
			<label for="email"><span>Correo electronico: </span><input id="email" type="text" name="email" /></label>
			<label>
				<input type="submit" value="Enviar" />
				<input type="reset" value="Cancelar" />
			</label>
			<div id="idioma">
				<div style="width: 130px; height: 20px; border: 1px solid black; display: inline-block" onclick="ingles()">Cambiar a ingles</div>
				<div style="width: 137px; height: 20px; border: 1px solid black; display: inline-block" onclick="español()">Cambiar a Español</div>
			</div>
			</form>
			<script type="text/javascript">
		function cambiarAspecto (elemento) {
			var elementosObtenidos = document.getElementsByTagName(elemento);
			elementosObtenidos[0].style.backgroundColor = "#FF6633";
			elementosObtenidos[1].style.backgroundColor = "#FF9933";
			elementosObtenidos[2].style.backgroundColor = "#FFCC33";	
		}	
		function español () {
			var esp = document.getElementsByTagName("span");
			esp[0].childNodes[0].nodeValue = "Nombre: ";
			esp[1].childNodes[0].nodeValue = "Apellidos: ";
			esp[2].childNodes[0].nodeValue = "Correo electronico: ";
		}
		function ingles () {
			var eng = document.getElementsByTagName("span");
			eng[0].childNodes[0].nodeValue = "Name: ";
			eng[1].childNodes[0].nodeValue = "Surname: ";
			eng[2].childNodes[0].nodeValue = "E-mail: ";
		}
	</script>
	</div>
</body>
</html>

jimmorrison · « **Respuesta #1 en:** 15 de Abril 2015, 04:57 »

en javascript ya no se usa type=text/javascript solo
<script> codigo </script>
lo mismo para css

me gusto como te quedo ahora si quieres ir reduciendo codigo usa archivos externos con css y javascript solo te quedaria codigo html y enlazas tu codigo hacia tu pagina carga mas rapido.

nota: no se si los label se sigan utilizando en html5 o se omitieron

buen codigo
saludos

Ogramar · « **Respuesta #2 en:** 15 de Abril 2015, 10:04 »

Hola Cabanota, el ejercicio lo veo muy bien, hace perfectamente lo que se pedía.

Los navegadores modernos reconocen tanto <script type="text/javascript"> como <script> aunque para tener más compatibilidad con los navegadores antiguos en el curso se usa la primera forma.

El uso de archivos externos sí es recomendado, aunque para realizar el curso es más sencillo hacerlo todo en un solo archivo (sabiendo que si estuviéramos haciendo una web real sería preferible independizar en distintos archivos el css y el javascript).

Por compatibilidad te recomendaría también no usar la eñe en el código, no usar function español () { sino function espanol () { ó function espanyol () {, porque así te aseguras que no habrá problemas en computadores o navegadores donde tengan otra configuración de caracteres o de lenguaje.

Salu2

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

Noticias: