Autor Tema: Ejemplos de bucles en JavaScript mostrar letras de palabras Ejercicio CU01131E# (Leído 5118 veces)

pedro,, · « **en:** 05 de Octubre 2015, 23:06 »

Aquí van las dos partes del ejercicio:

Citar

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

y el código:

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Concepto de Bucles. Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
		<script type="text/javascript">
			function deletrearPalabra(){
				var palabra;
				var msg = 'Letra ';
				palabra = prompt('Introduzca el primer nombre: ');
				for(var i=1; i<=palabra.length; i++){
					if(i==palabra.length){
						msg = msg + i + ': ' + palabra.charAt(i-1);
					}else{
						msg = msg + i + ': ' + palabra.charAt(i-1) + '\nLetra ';
					}
				}
				alert(msg);
			}
		</script>
	</head>
	<body>
		<div>
			<p>
				<p>EJERCICIO 1</p>
				<p>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.</p>
				<p>Por ejemplo si se introduce “ave” debe mostrar:</p>
				<p>Letra 1: a</p>
				<p>Letra 2: v</p>
				<p>Letra 3: e</p>
			</p>
			<img onclick="deletrearPalabra()" src="http://i.imgur.com/0rendoU.png" alt="Ejercicio 1" title="Ejercicio 1 CU01131E">
		</div>
	</body>
</html>

y el segundo ejercicio:

Citar

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

Código: [Seleccionar]

<!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;}
			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);}
		</style>
		<script type="text/javascript">
			function mostrarParrafos(){
				var msg = 'Párrafo ';
				var parrafosObtenidos = document.getElementsByTagName('p');
				for(var i=0; i<parrafosObtenidos.length; i++){
					if((i+1)==parrafosObtenidos.length){
						msg = msg + (i+1) + ' contiene:  ' + parrafosObtenidos[i].childNodes[0].nodeValue;
					}else{
						msg = msg + (i+1) + ' contiene:  ' + parrafosObtenidos[i].childNodes[0].nodeValue + '\nPárrafo ';
					}
				}
					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><p>Ciruela</p>
			<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="mostrarParrafos()">Pulse aquí para contar los párrafos</h3>
	</body>
</html>

Saludos.

Mario R. Rancel · « **Respuesta #1 en:** 08 de Octubre 2015, 08:19 »

Hola Pedro ambos ejercicios están resueltos a la perfección.

Para otras personas que lo revisen voy a comentar dos cosas interesantes:

for(var i=1; i<=palabra.length; i++){ empieza a contar en 1. Fijarse en el <= que permite contar todos los elementos.

for(var i=0; i<parrafosObtenidos.length; i++){ empieza a contar en 0. Fijarse en el < que permite que el conteo sea correcto.

Ambas formas son válidas, no obstante tener en cuenta que cuando vayamos a acceder a índices de arrays el primer índice es cero. Esto suele ser motivo de error cuando no se tiene práctica.

Otra cosa a comentar es que en el segundo ejercicio los párrafos no tienen aspecto de párrafos debido a que tienen aplicada una regla CSS que modifica su aspecto:

Código: [Seleccionar]

p {font-size: 24px; color: maroon; float: left; margin:10px; border: solid black; padding:10px;}
Saludos

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

Noticias: