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: pedro,, en 30 de Septiembre 2015, 01:08
-
Respuestas al ejercicio CU01128E del tutorial de programación web con JavaScript desde cero:
Modifica el código anterior para que en vez de pasarse como parámetro label pases como parámetro: div, input, h1 y h2. ¿Se usan los tres índices del array en todos los casos? ¿Qué ocurre si aparecen más índices que elementos realmente existen en el documento html?
No, solo con los input y los label, porque hay tres o mas etiquetas input o label.
Solo se ejecutan los tres que hay.
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:.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
.boton{padding:20px ;width:180px; float:left; color:yellow; border-radius: 33px; background: blue; text-align:center;}
#cambiarEspanol:hover, #cambiarIngles:hover{background:red; cursor:pointer;}
</style>
<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 cambioDeIdioma(idioma){
//var contenidoLabel1 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[3].childNodes[1].childNodes[0];
//var contenidoLabel2 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[5].childNodes[1].childNodes[0];
//var contenidoLabel3 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[7].childNodes[1].childNodes[0];
var elementoLabel = document.getElementsByTagName('label');
if (idioma=='ingles'){
elementoLabel[0].firstChild.nextSibling.firstChild.nodeValue = 'Name:'
elementoLabel[1].firstChild.nextSibling.firstChild.nodeValue = 'Surname:'
elementoLabel[2].firstChild.nextSibling.firstChild.nodeValue = 'e-mail:'
}else{
elementoLabel[0].firstChild.nextSibling.firstChild.nodeValue = 'Nombre:'
elementoLabel[1].firstChild.nextSibling.firstChild.nodeValue = 'Apellidos:'
elementoLabel[2].firstChild.nextSibling.firstChild.nodeValue = 'Correo electrónico:'
}
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('label')">
<p>Si quieres contactar con nosotros envíanos 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 electrónico:</span>
<input id="email" type="text" name="email" />
</label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>
<div>
<div class="boton" id="cambiarIngles" onclick="cambioDeIdioma('ingles')">Cambiar a inglés</div>
<div class="boton" id="cambiarEspanol" onclick="cambioDeIdioma('espanol')">Cambiar a español</div>
</div>
</body>
</html>
Espero vuestros comentarios.
Saludos.
-
Hola si hay más de tres elementos y sólo tenemos previsto el tratamiento de tres el resto no se verán afectados.
El código funciona bien. ¿Serías capaz de describir cómo sería el esquema que hace que la expresión elementoLabel[0].firstChild.nextSibling.firstChild.nodeValue = 'Name:' funcione?
Me refiero a un esquema similar a los que aparecen en el curso, sólo a partir del nodo del label
Salu2
-
Esta sería la representación:
(http://i.imgur.com/XK3GDeg.png)
Y la explicación del código
elementoLabel[0].firstChild.nextSibling.firstChild.nodeValue = 'Name:'
firstChild corresponde al elemento hijo de label, situado más a la izquierda, que es Texto vacío.
nextSibling corresponde al elemento hermano mas próximo hacia la derecha de Texto vacío, que sería la etiqueta span.
firstChild corresponde al primer hijo de span.
Saludos.
-
Perfecta la explicación, el código era un poco complejo y a veces se pone código sin saber lo que significa pero este no es el caso. Con esto queda más que aclarado el ejercicio
Salu2!
-
Gracias Ogramar.
Cuando empecé a intentar resolver el ejercicio vi que no me había quedado claro el tema, así que para poder entenderlo bien tuve que hacerme el árbol de nodo completo, de ahí que en el código tenga estas tres lineas con comentarios:
//var contenidoLabel1 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[3].childNodes[1].childNodes[0];
//var contenidoLabel2 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[5].childNodes[1].childNodes[0];
//var contenidoLabel3 = document.childNodes[1].childNodes[2].childNodes[3].childNodes[1].childNodes[7].childNodes[1].childNodes[0];
Saludos.
-
Genial la explicación.. la verdad es que no sabía como resolver el ejercicio y me ha quedado muy claro. No se me había ocurrido recurrir a la sentencia If else para hacer funcionar los botones...
Gracias pedro,,