Autor Tema: Ejercicio: CU01131E - for JavaScript (bucles) Saber tamaño de array con length. (Leído 2707 veces)

Cabanota · « **en:** 21 de Abril 2015, 20:12 »

Buenas tardes colegas. Aquí traigo solución a los dos puntos dejados en este tema. Espero que si pueden ayudarme a mejorar el código y hacerlo mucho mas fácil, estaría agradecido.Gracias de ante mano.

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

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var palabra, insertar;

		function inicio() {
			var resul = "";
			palabra = document.getElementById("caja").value;

			for (var i = 0; i < palabra.length; i++) {
				resul += "Letra " + (i + 1)+ ": " + palabra.charAt(i) + "\n\n";
			};
			mostrar.innerText = "\n" + resul;
		}
	</script>
</head>
<body>

<h1>Retando mis conocimientos.</h1>
<label>Palabra a evaluar: </label><input type="text" id="caja" />
<brs>
<label>Resultado: </label>
<div id="mostrar"></div>
<input type="button" id="boton" value="Acep" onclick="inicio()">
</body>
</html>

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>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			border: 1px solid black;
			float: left;	
			width: 500px;
			margin-bottom: 30px;
			text-align: center;
		}
		#caja2{
			border: 1px solid black;
			width: 240px;
			height: 290px;
			position: absolute;
			left: 530px;
			text-align: left;
			padding: 5px;
		}
		body{
			background-color: white;
			font-family: sans-serif;
		}
		p{
			float: left;
			font-size:24px;
			color: maroon;
			margin: 10px;
			border: solid black;
			padding: 10px;
		}
		.boton{
			padding: 15px;
			width: 350px;
			text-align: center;
			clear: both;
			color: white;
			border-radius:40px;
			background: rgb(202, 60, 60);		
		}
		.boton2{
			padding: 15px;
			width: 230px;
			text-align: center;
			color: white;
			border-radius:40px;
			background: rgb(202, 60, 60);
			margin-left: 515px;		
			margin-top: -70px;
		}
		.boton:hover, .boton2:hover{
			background: rgb(66, 184, 221);
		}
	</style>
	<script type="text/javascript">
		var izda_dcha = true;
		var elementos;
		
		function inicio() {
			elementos = document.getElementsByTagName("p");
		}

		function cambiarColores (elemento) {
			var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow'];	

  			if (izda_dcha) {
				for (var i = 0; i < elementos.length; i++) {
					elementos[i].style.backgroundColor = color[i%4];				
				}
			}else{
				for (var i = elementos.length - 1; i >= 0; i--) {
					elementos[i].style.backgroundColor = color[(i+3)%4];	
				}
			}
			if (izda_dcha) {
				izda_dcha = false;
			}else{
				izda_dcha = true;
			}
		}

		function mostrarContParrafos() {
			var resul = "";
			for (var i = 0; i < elementos.length; i++) {
				resul += "Parrafo " + (i+1) + " contiene: " + elementos[i].childNodes[0].nodeValue + "." +"\n";
			};		
			caja2.innerText = resul;
		}
	</script>
</head>
<body>
	<h1>Ing. Javier Cabana Padilla.</h1>
	<h2>Aprendiendo a programar.</h2>
	<div>
		<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>
	<div id="caja2"> </div>
	<h3 class="boton" onclick="cambiarColores()">Pulse para cambiar colores</h3>	
	<h3 class="boton2" onclick="mostrarContParrafos()">Nombre frutas</h3>	
	<script type="text/javascript">
		inicio();
	</script>
</body>
</html>

Ogramar · « **Respuesta #1 en:** 21 de Abril 2015, 23:42 »

Hola, el código está bien resuelto en ambos casos aunque al probarlo no me ha funcionado por lo que explico más abajo.

Estás usando algunos elementos que no han sido explicados en el curso. De hecho, en la entrega CU01136E aparece esto:

Citar

Hay una alternativa de funcionamiento muy similar a textContent que ha sido utilizada por algunos navegadores: innerText. Su comportamiento es muy similar al de textContent, aunque no exactamente igual. innerText no es reconocido por todos los navegadores y no se considera un estándar válido, por ello no le prestaremos más atención y no lo usaremos. No obstante, hemos considerado conveniente citarlo por si lo encuentras mientras revisas el código en alguna página web.

He probado con mi navegador y no me funcionan los códigos...

Pero en el primer código simplemente cambiando la forma de mostrar el resultado

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript">
		var palabra, insertar;

		function inicio() {
			var resul = "";
			palabra = document.getElementById("caja").value;

			for (var i = 0; i < palabra.length; i++) {
				resul += "Letra " + (i + 1)+ ": " + palabra.charAt(i) + "\n\n";
			};
			alert(resul);
		}
	</script>
</head>
<body>

<h1>Retando mis conocimientos.</h1>
<label>Palabra a evaluar: </label><input type="text" id="caja" />
<br>
<input type="button" id="boton" value="Aceptar" onclick="inicio()">
</body>
</html>

Sí funciona perfecto, por ejemplo si introducimos manzana muestra

Letra 1: m
Letra 2: a
Letra 3: n
Letra 4: z
Letra 5: a
Letra 6: n
Letra 7: a

Lo que quiere decir que toda la lógica está bien.

La segunda parte (la de las frutas) tampoco me ha funcionado, pero por el mismo problema. Simplemente cambiando caja2.innerText = resul; por caja2.innerHTML = resul; ya he conseguido que funcionara

Salu2

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

Noticias: