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: 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..
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>
<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>
-
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
-
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