Aprende a programar desde cero con el libro "Aprender a programar. Algoritmos y fundamentos de programación orientados a la ingeniería y ciencias". 748 pgs. Editorial aprenderaprogramar.com.
Mostrar Mensajes
Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio tabla editable</title>
<link rel="stylesheet" href="css/editar-tabla-estilos.css">
<script src="js/funciones.js"></script>
</head>
<body>
<section>
<table id="tabla">
<tr>
<th>Alimento</th>
<th>Calorias (kCal)</th>
<th>Grasas (g)</th>
<th>Proteínas (g)</th>
<th>Carbohidratos (g)</th>
<th>Acciones</th>
</tr>
<tr>
<td>Arándano</td>
<td>49</td>
<td>0.2</td>
<td>0.4</td>
<td>12.7</td>
<td><span onclick="transformEditar(this)">Editar</span></td>
</tr>
<tr>
<td>Plátano</td>
<td>90</td>
<td>0.3</td>
<td>1.0</td>
<td>23.5</td>
<td><span onclick="transformEditar(this)">Editar</span></td>
</tr>
<tr>
<td>Ceréza</td>
<td>46</td>
<td>0.4</td>
<td>0.9</td>
<td>10.9</td>
<td><span onclick="transformEditar(this)">Editar</span></td>
</tr>
<tr>
<td>Fresa</td>
<td>37</td>
<td>0.5</td>
<td>0.8</td>
<td>8.3</td>
<td><span onclick="transformEditar(this)">Editar</span></td>
</tr>
</table>
<form action="#" name="formulario1" id="formulario1" method="get" onreset="anular()">
<div class="botones">
<p>Pulse Aceptar para guardar los cambios o cancelar para anularlos</p>
<input type="button" onclick="enviarForm()" class="btn-aceptar" value="Aceptar">
<input type="reset" class="btn-cancelar" value="Cancelar">
</div>
</form>
<div id="hidden-form">
</div>
</section>
</body>
</html>
section {
width: 750px;
overflow-x: auto;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
text-align: left;
}
#tabla th {
background: #1E90FF;
color: #fff;
padding-top: 11px;
padding-bottom: 11px;
}
th, td {
padding: 8px;
border: 1px solid #aaaaaa;
}
span {
color:#337ab7;
cursor: default;
}
.en-edicion {
color: #e61717;
}
.btn-aceptar, .btn-cancelar {
padding: 8px;
border-radius: 3px;
cursor: pointer;
transition: all ease 1s;
}
.btn-aceptar {
background: #1E90FF;
border: 1px solid #1777d4;
color: #FFFFFF;
}
.btn-cancelar {
background: #cccccc;
border: 1px solid #b4b4b4;
color: #000000;
}
.btn-aceptar:hover {
background: #286090;
}
.btn-cancelar:hover {
background: #b7b4b4;
}
.botones {
text-align: right;
margin-top: 8px;
margin-right: 8px;
display: none;
}var editando = false;
function transformEditar(nodo) {
if (editando == true) {alert('Solo se puede editar una línea. Pulse Cancelar para poder editar otra');}
else {
var tr = nodo.parentNode.parentNode;
var valPorDef = tr.querySelectorAll('td');
tr.innerHTML = '<td><input type="text" name="alimento" id="alimento" size="6" value="' + valPorDef[0].textContent + '"></td><td><input type="text" name="calorias" id="calorias" size="5" value="' + valPorDef[1].textContent + '"></td><td><input type="text" name="grasas" id="grasas" size="5" value="' + valPorDef[2].textContent + '"></td> <td><input type="text" name="proteinas" id="proteinas" size="5" value="' + valPorDef[3].textContent + '"></td><td><input type="text" name="carbohidratos" id="carbohidratos" size="5" value="' + valPorDef[4].textContent + '"></td><td><span class="en-edicion">En edición</span></td>';
document.querySelector('.botones').style.display = 'block';
editando = true;
}
}
function anular () {
window.location.reload();
}
function enviarForm () {
document.querySelector('#hidden-form').innerHTML =
'<input type="hidden" form="formulario1" name="alimento" value="'+document.querySelector('#alimento').value+'">'+
'<input type="hidden" form="formulario1" name="calorias" value="'+document.querySelector('#calorias').value+'">'+
'<input type="hidden" form="formulario1" name="grasas" value="'+document.querySelector('#grasas').value+'">'+
'<input type="hidden" form="formulario1" name="proteinas" value="'+document.querySelector('#proteinas').value+'">'+
'<input type="hidden" form="formulario1" name="carbohidratos" value="'+document.querySelector('#carbohidratos').value+'">';
document.getElementById('formulario1').submit();
}var alimento = nodosEnTr[0].textContent; var calorias = nodosEnTr[1].textContent;
var grasas = nodosEnTr[2].textContent; var proteina = nodosEnTr[3].textContent;
var carbohidratos = nodosEnTr[4].textContent; var opciones = nodosEnTr[5].textContent;Crea un documento html con un texto en una etiqueta h1 como “Ejercicio curso aprenderaprogramar.com” y un div a continuación. Genera un script que pida cinco números al usuario usando un bucle for normal (usa prompt para pedir los datos y conviértelos a valor numérico posteriormente). Almacena los números introducidos por el usuario en un array. A continuación, accede al nodo del div y establece que muestre un texto informando del resultado de multiplicar cada uno de los números por 3 (para ello usa textContent).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejercicio textContent</title>
<script>
function ejemplo () {
var introducNumeros = [];
for (i = 0; i<5; i++) {
introducNumeros[i] = Number(prompt("Introduce un número"));
}
var numMultiplicados = "Tus numeros se han multiplicado por 3: ";
var lugar = document.getElementById('place');
for (j in introducNumeros) {
var calc = introducNumeros[j] * 3;
numMultiplicados = numMultiplicados + introducNumeros[j] + ' X 3 = ' + calc + ', ';
}
lugar.textContent = numMultiplicados;
}
window.addEventListener('load', ejemplo, false);
</script>
</head>
<body>
<h1>Ejercicio curso aprenderaprogramar.com</h1>
<div id="place"></div>
</body>
</html><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>For, for in</title>
<script>
function forForIn () {
var coleccion = [];
var msg = 'Numeros multiplicado por 5 = ';
for (i = 0; i<5; i++){
coleccion[i] = Number(prompt('Introducir numero'));
}
for (j in coleccion) {
var multiplicar = coleccion[j] * 5;
msg += multiplicar + ', ';
}
alert('Numeros introducidos = ' + coleccion + '\n' + msg);
}
window.onload = forForIn ();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center;}
#calculadora { font: bold 14px Arial,sans-serif; background-color: #9DD2EA;
border-radius: 3px; height: auto; margin: 0 auto; padding: 20px 20px 9px; width: 295px;
}
.parteSuperior .pantalla {
background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFFFFF; float: right; font-size: 17px;
height: 40px; letter-spacing: 1px; line-height: 40px; padding: 0 10px; text-align: right; width: 180px;
}
.teclas, .parteSuperior {overflow: hidden; }
.teclas span, .parteSuperior span.limpiar { background-color: #FFFFFF; border-radius: 3px; color: #888888;
cursor: pointer; float: left; height: 36px; line-height: 36px; margin: 0 7px 11px 0;
text-align: center; transition: all 0.4s ease 0s; width: 66px;
}
.parteSuperior span.limpiar { background-color:#FF7C87;}
.teclas span.operador { background-color: #FFDAB9; margin-right: 0; }
.teclas span.igual { background-color: #F1FF92; color: #888E5F;}
.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }
.teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover { background-color: #9C89F6;
color: #FFFFFF; }
#contenedor {width:285px;margin: 40px auto; overflow:hidden;}
#marcaNumeros, #marcaOperadores, #marcarC, #marcarPunto, #marcarPantalla {padding:15px; width: 90px; display: inline-block;
margin: 10px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#marcaNumeros:hover, #marcaOperadores:hover, #marcarC:hover, #marcarPunto:hover, #marcarPantalla:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function marcarOperadores() {
var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
var nodoIgual = document.querySelector (".igual");
for (var i=0; i<listaNodosOperadores.length; i++) {
listaNodosOperadores[i].style.backgroundColor = "yellow";
listaNodosOperadores[i].style.color = "black";
listaNodosOperadores[i].style.border = "solid 1px";
}
nodoIgual.style.backgroundColor = "yellow";
nodoIgual.style.color = "black";
nodoIgual.style.border = "solid 1px";
}
function marcarNumeros() {
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
for (var i=0; i<listaNodosNumeros.length; i++) {
listaNodosNumeros[i].style.backgroundColor = "black";
listaNodosNumeros[i].style.color = "white";
listaNodosNumeros[i].style.border = "solid 1px";
}
}
function marcarC () {
var teclaC = document.querySelector('#calculadora .parteSuperior span.limpiar');
teclaC.style.backgroundColor = "red";
teclaC.style.color = "#fff";
}
function marcarPunto () {
var teclaPunto = document.querySelector('.teclas .punto');
teclaPunto.style.backgroundColor = '#9400D3';
teclaPunto.style.color = '#fff';
}
function marcarPantalla () {
var pantalla = document.querySelector('.pantalla');
pantalla.style.backgroundColor = '#0000ff';
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</div>
<!-- Calculadora -->
<div id="calculadora">
<!-- pantalla y tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
</div>
<div class="teclas">
<!-- operadores y otras teclas -->
<span class = "numero" onclick="pulsada('7')">7</span>
<span class = "numero" onclick="pulsada('8')">8</span>
<span class = "numero" onclick="pulsada('9')">9</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span class = "numero" onclick="pulsada('4')">4</span>
<span class = "numero" onclick="pulsada('5')">5</span>
<span class = "numero" onclick="pulsada('6')">6</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span class = "numero" onclick="pulsada('1')">1</span>
<span class = "numero" onclick="pulsada('2')">2</span>
<span class = "numero" onclick="pulsada('3')">3</span>
<span class="operador" onclick="pulsada('/')">÷</span>
<span class = "numero" onclick="pulsada('0')">0</span>
<span class ="punto" onclick="pulsada('.')">.</span>
<span class="igual" onclick="pulsada('=')">=</span>
<span class="operador" onclick="pulsada('*')">x</span>
</div>
</div>
<div id="contenedor">
<div id ="marcaNumeros" onclick="marcarNumeros()"> Marcar números </div>
<div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
<div id="marcarC" onclick="marcarC()">Marcar tecla "C"</div>
<div id="marcarPunto" onclick="marcarPunto()">Marcar tecla "."</div>
<div id="marcarPantalla" onclick="marcarPantalla()">Marcar panatalla</div>
</div>
</body>
</html>function pulsada (tecla) {
var listaNodosPantalla = document.getElementsByClassName('pantalla');
var nodoTextoPantalla = listaNodosPantalla[0].firstChild;
if (tecla == 'C') {
nodoTextoPantalla.nodeValue = ' ';
} else if (tecla == '=') {
var resultado = eval(nodoTextoPantalla.nodeValue);
nodoTextoPantalla.nodeValue = resultado;
} else {
nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Botones con eval</title>
<style>
div {
width: 300px;
height: 450px;
margin: auto;
overflow: hidden;
background: rgba(146, 212, 24, .5);
text-align: center;
}
a {
width: 90%;
height: 350px;
background: rgba(245, 245, 245, .8);
margin: 10px auto;
display: block;
}
button {
display: inline-block;
padding: 15px;
margin: 10px 20px 0 20px;
}
</style>
<script type="text/javascript">
function componer (sentido) {
var texto1 = 'Has pulsado el boton';
var aEvaluar = texto1 + ' ' + sentido;
alert (aEvaluar);
eval (aEvaluar);
}
</script>
</head>
<body>
<div>
<a href="#"></a>
<button type="button" onclick="componer('Atras');">Atrás</button>
<button type="button" onclick="componer('Adelante');">Adelante</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Practica de Galeria</title>
<style>
#gallery-screen {
width: 400px;
height: 400px;
margin: 20px auto;
padding: 5px;
border: 1px solid #ddd;
}
#thumb {
text-align: center;
}
#thumb div {
display: inline-block;
margin: 0 5px;
padding: 5px;
border: 1px solid #ddd;
width: 90;
height: 90;
}
#thumb div:hover {
border: 1px solid #777;
}
#thumb div img {
max-width: 100%;
}
</style>
<script>
//GALERIA
function iniciar () {
var miniatus1 = document.getElementById('1');
var miniatus2 = document.getElementById('2');
var miniatus3 = document.getElementById('3');
var miniatus4 = document.getElementById('4');
var foto = document.getElementById('foto');
miniatus1.addEventListener('click',camb1,false);
miniatus2.addEventListener('click',camb2,false);
miniatus3.addEventListener('click',camb3,false);
miniatus4.addEventListener('click',camb4,false);
function camb1() {
foto.src = "http://lorempixel.com/400/400/transport/1";
}
function camb2() {
foto.src = "http://lorempixel.com/400/400/sports/2";
}
function camb3() {
foto.src = "http://lorempixel.com/400/400/food/3";
}
function camb4() {
foto.src = "http://lorempixel.com/400/400/animals/4";
}
}
</script>
</head>
<body onload="iniciar()">
<div class="gallery">
<div id="gallery-screen">
<img id="foto" src="http://lorempixel.com/400/400/transport/1" alt="">
</div>
<div id="thumb">
<div id="1"><img src="http://lorempixel.com/90/90/transport/1" alt=""></div>
<div id="2"><img src="http://lorempixel.com/90/90/sports/2" alt=""></div>
<div id="3"><img src="http://lorempixel.com/90/90/food/3" alt=""></div>
<div id="4"><img src="http://lorempixel.com/90/90/animals/4" alt=""></div>
</div>
</div>
</body>
</html>
EJERCICIO
1) Crea una función que pida una palabra al usuario y usando un bucle while y el método charAt, muestre cada una de las letras que componen la entrada. Por ejemplo si se introduce “ave” debe mostrar:
Letra 1: a Letra 2: v Letra 3: e
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"><style type="text/css">body {background-color:white; font-family: sans-serif;}.boton{padding:15px; width: 200px; text-align:center; clear:both;color: white; border-radius: 40px; background: rgb(202, 60, 60);}</style>
<script type="text/javascript">
function ejemploDoWhile() {
var palabra, msg, i;
palabra = prompt('Introduce una palabra para ser deletreada: ');
i = 0;
msg = '';
while (i < palabra.length) {
msg = msg + 'Letra '+ (i+1) + ': ' + palabra.charAt(i) + '\n';
i++;
}
alert(msg);
}
</script>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
<h3 class="boton" onclick="ejemploDoWhile()">Pulsa aquí</h3>
</body></html>1) Crea una función que pida una palabra al usuario y usando un bucle for y el método charAt, muestre cada una de las letras que componen la entrada. Por ejemplo si se introduce “ave” debe mostrar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 4 - bucle for</title>
</head>
<body>
<h1>AprenderAProgramar.Com</h1>
<script>
var texto, msg; //empieza ejercicio 1
var contenedorLetras = [];
msg = '';
texto = prompt('Ingrese un texto');
for (i = 0; i < texto.length; i++) {
contenedorLetras[i] = texto.charAt(i);
}
for (i = 0; i < texto.length; i++) {
msg = msg + 'Letra ' + (i+1) + ': ' + contenedorLetras[i] + '\n\n';
}
alert(msg); //fin ejercicio 1
</script>
</body>
</html>2) Crea una función denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de tipo párrafo, muestre el texto que contienen.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 4.2 - bucle for</title>
<style>
div, button {margin-left: 30px;}
section {background: #83fccb; padding: 5px; width: 50%}
</style>
</head>
<body>
<h1>AprenderAProgramar.Com</h1>
<section>
<div>
<p>Tecla</p>
<p>Ordenador</p>
<p>Procesador</p>
<p>Agua</p>
<p>Móvil</p>
<p>Manzana</p>
<p>Pera</p>
<p>Persimón y caqui</p>
</div>
</section>
<button type="button" onclick="mostrarContParrafos();"> Obtener parrafos </button>
<script>
function mostrarContParrafos () { //empieza ejercicio 2
var parrafos = document.getElementsByTagName('p'),
msg = '';
for (i = 0; i < parrafos.length; i++) {
msg = msg + 'El párrafo ' + (i+1) + ' contiene: ' + parrafos[i].firstChild.nodeValue + '\n\n';
}
alert(msg); //fin ejercicio 2
}
</script>
</body>
</html>
<!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-idioma {background: #fd7416; width: 150px; margin: 10px 0 10px 100px; 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 cambiarIdioma (elemento2) {
var elementosLabel = document.getElementsByTagName(elemento2);
elementosLabel[0].childNodes[0].firstChild.nodeValue = 'Name:';
elementosLabel[1].childNodes[0].firstChild.nodeValue = 'Surname:';
elementosLabel[2].childNodes[0].firstChild.nodeValue = 'E-mail:';
}
function cambiarIdioma2 (elemento2) {
var elementosLabel = document.getElementsByTagName(elemento2);
elementosLabel[0].childNodes[0].firstChild.nodeValue = 'Nombre:';
elementosLabel[1].childNodes[0].firstChild.nodeValue = 'Apellidos:';
elementosLabel[2].childNodes[0].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>
<!-- Formulario de contacto -->
<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 class="boton-idioma" id="ingles" onclick="cambiarIdioma('label');">Cambiar a ingles</div>
<div class="boton-idioma" id="espanol" onclick="cambiarIdioma2('label');">Cambiar a español</div>
</div>
</body>
</html><html><head><title>Curso JavaScript aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroImagenActual = 9;
function moverImagen(movimiento) {
var carousel, valorSrc = [], valorAlt = [], valorTitle = [];
carousel = document.getElementById('imgCarrusel');
valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
valorSrc[1] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
valorSrc[2] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
valorAlt[0] = 'Camiseta 9 aprenderaprogramar.com';
valorAlt[1] = 'Camiseta 6 aprenderaprogramar.com';
valorAlt[2] = 'Camiseta 11 aprenderaprogramar.com';
valorTitle[0] = 'Diálogo entre informáticos';
valorTitle[1] = 'Desbordado por los números';
valorTitle[2] ='Estudiando programacion';
if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
carousel.src = valorSrc[0];
carousel.alt = valorAlt[0];
carousel.title = valorTitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
carousel.src = valorSrc[1];
carousel.alt = valorAlt[1];
carousel.title = valorTitle[1];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
carousel.src = valorSrc[2];
carousel.alt = valorAlt[2];
carousel.title = valorTitle[2];
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div >
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div>
</body>
</html>
a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?
b) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.
c) Utilizando la propiedad length aplicada a la colección de nodos obtenida mediante getElementsByName, modifica el código para que el resultado sea que al enviar el formulario el mensaje que aparezca sea “El número total de animales disponibles era … y usted ha elegido …”.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo JavaScript - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:inline-block; padding:5px;}
</style>
<script type="text/javascript">
function informarItemsElegidos(nombre1) {
var elementosObtenidos = document.getElementsByName(nombre1);
var msg = 'Animales que ha elegido que le gustan incluye: ';
var elegidos = 0;
if (elementosObtenidos[0].checked == true) {
msg = msg + elementosObtenidos[0].value;
elegidos=elegidos+1;
}
if (elementosObtenidos[1].checked == true && elegidos >= 1) {
msg = msg + ', ';
msg = msg + elementosObtenidos[1].value;
elegidos=elegidos+1;
} else if (elementosObtenidos[1].checked == true) {
msg = msg + elementosObtenidos[1].value;
elegidos=elegidos+1;
}
if (elementosObtenidos[2].checked == true && elegidos >= 1) {
msg = msg + ', ';
msg = msg + elementosObtenidos[2].value;
elegidos=elegidos+1;
} else if (elementosObtenidos[2].checked == true) {
msg = msg + elementosObtenidos[2].value;
elegidos=elegidos+1;
}
if (elementosObtenidos[3].checked == true && elegidos >= 1) {
msg = msg + ', ';
msg = msg + elementosObtenidos[3].value;
elegidos=elegidos+1;
} else if (elementosObtenidos[3].checked == true) {
msg = msg + elementosObtenidos[3].value;
elegidos=elegidos+1;
}
if (elegidos == 0 ) {
msg = '¡No ha elegido ningún animal!';
}
alert (msg);
alert ('El numero de animales disponibles era: ' + elementosObtenidos.length + '\n Y usted ha seleccionado: ' + elegidos);
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<!-- Formulario de contacto -->
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="" onsubmit="informarItemsElegidos('animal')">
<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>
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="leon" />
<label for="leon">León </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" />
<label for="tigre">Tigre </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo" />
<label for="guepardo">Guepardo </label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar" />
<label for="jaguar">Jaguar </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>
</body>
</html>
<!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-idioma {background: #fd7416; width: 150px; margin: 10px 0 10px 100px; 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 cambiarIdioma (elemento2) {
var elementosLabel = document.getElementsByTagName(elemento2);
elementosLabel[0].childNodes[0].firstChild.nodeValue = 'name';
elementosLabel[1].childNodes[0].firstChild.nodeValue = 'surname';
elementosLabel[2].childNodes[0].firstChild.nodeValue = 'E-mail';
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<!-- Formulario de contacto -->
<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 class="boton-idioma" id="ingles" onclick="cambiarIdioma('label');">Cambiar a ingles</div>
<div class="boton-idioma" id="espanol">cambiar a español</div>
</div>
</body>
</html>
Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.
Abraham Lincoln (1808-1865) Presidente estadounidense.
aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación
RSS -
WAP2