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: Pandemia en 10 de Enero 2017, 21:20
-
Buenas noches amigos aquí dejo una posible solución al ejercicio CU01131E del curso de programación web básica con JavaScript.....
EJERCICIO
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:
Letra 1: a
Letra 2: v
Letra 3: e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Curso javascript aprenderaprogramar.com</title>
<style type="text/css">
body {
background-color: #F5F5DC;
font-family: sans-serif;
}
.boton {
padding: 15px;
width: 200px;
text-align: center;
clear: both;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
.boton:hover { background: #8A2BE2;}
</style>
<script type="text/javascript">
function mostrarPalabrasLetraALetra() {
var palabra=prompt('Por favor introduzca una palabra. ')
var msg='';
for (i=1; i<=palabra.length; i++) {
msg=msg+'Letra'+i+': '+palabra.charAt(i-1)+'\n';
}
alert(msg);
}
</script>
</head>
<body>
<h3 class="boton" onclick="mostrarPalabrasLetraALetra()">Clic aquí para ver palabra letra a letra</h3>
</body>
</html>
EJERCICIO
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. Por ejemplo para el código de ejemplo visto anteriormente el resultado debería ser: Párrafo 1 contiene: manzana; Párrafo 2 contiene: pera. Párrafo 3 contiene: fresa. Párrafo 4 contiene … (etc., hasta que no haya más párrafos).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Curso javascript aprenderaprogramar.com</title>
<style type="text/css">
body {
background-color: white;
font-family: sans-serif;
}
p {
font-size: 24px;
color: maroon;
float: left;
margin: 10px;
border: solid black;
padding: 10px;
}
.boton {
padding: 15px;
width: 330px;
text-align: center;
clear: both;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
.boton:hover {
background: rgb(66, 184, 221);
}
.boton1 {
padding: 15px;
width: 200px;
text-align: center;
clear: both;
float: left;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
.boton1:hover { background: #8A2BE2;}
</style>
<script type="text/javascript">
var izqda_dcha = true;
function cambiarColores(elemento) {
var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow'];
var elementosObtenidos = document.getElementsByTagName(elemento);
if (izqda_dcha == true) {
for (var i=0; i<elementosObtenidos.length; i++) {
elementosObtenidos[i].style.backgroundColor = color[i%4];
}
} else {
for (var j=elementosObtenidos.length-1; j>=0; j--) {
elementosObtenidos[j].style.backgroundColor = color[(j+3)%4];
}
}
if (izqda_dcha == false) { izqda_dcha = true; } else { izqda_dcha = false; }
}
function mostrarContParrafos() {
var elementosObtenidos = document.getElementsByName('p');
var msg = '';
for (var i=1; i<=elementosObtenidos.length; i++) {
msg=msg+'Párrafo'+i+': '+elementosObtenidos[i-1].firstChild.nodeValue+'\n';
}
alert(msg);
}
</script>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
<div style="width:500px; float:left; margin-bottom:30px;">
<p>Manzana</p><p>Pera</p><p>Fresa</p><p>Ciruela</p>
<p>Naranja</p><p>Kiwi</p><p>Pomelo</p><p>Melón</p>
<p>Sandía</p><p>Mango</p><p>Papaya</p><p>Cereza</p>
<p>Nectarina</p><p>Frambuesa</p></div>
<h3 class="boton" onclick="cambiarColores('p')">CLICK AQUÍ PARA CAMBIAR COLORES</h3>
<h3 class="boton1" onclick="mostrarContParrafos()">CLICK AQUÍ PARA VER EL CONTENIDO DE LOS PÁRRAFOS</h3>
</body>
</html>
Espero sus correcciones pues en el segundo ejercicio tengo algunas inseguridades....
Saludos y gracias de antemano..... :D
-
Hola Pandemia,
el código no hace nada pero sólo tienes un pequeño error al trabajar en el DOM.
Recuerda para que sirve 'getElementsByName' , esto recoge todos los elementos de un array que tengan el atributo name y no es lo que nosotros vamos buscando. Queremos recoger en un array todos los elementos que esten contenidos en un elemento p.
Piensalo un poco.