<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body style="color:white;background-color:black">
<h4>Codigo para pruebas</h4>
<p id="campo_para_mostrar_datos"></p>
<!-- "campo_para_mostrar_datos" es como se identifica el campo -->
<!-- Puedes modificar el id para tus necesidades -->
<input
type="text"
id="campo_para_ingresar_datos"
placeholder="Ingrese informacion">
<!-- "campo_para_ingresar_datos" es como se identifica el campo -->
<!-- Puedes modificar el id para tus necesidades -->
<button onclick="fn_Presionar_Boton()">
Mensaje en el boton
</button>
<!-- Cada vez que se presiona el boton se llama a la fn_Presionar_Boton -->
<!-- Puedes modificar el nombre de la funcion "asignada" para tus necesidades -->
<script>
// En esta sección se copia/escribe el codigo JavaScript
// Codigo de ejemplo al presionar el boton
function fn_Presionar_Boton()
{
console.log("Iniciando fn_Presionar_Boton");
alert("Hago algo al presionar el boton");
//Codigo para recuperar
let info_campo = document.getElementById("campo_para_ingresar_datos").value;
info_campo = info_campo.trim(); // Elimina los espacios en blanco
let longitud_campo = info_campo.length; // Determina la longitud del campo.
if (longitud_campo==0) // Verifica el campo tenga texto
{ alert("No ingresaste nada"); }
else
{
alert ("Ingresaste ["+info_campo+"] con longitud ["+longitud_campo+"]" )
//Codigo para copiar el contenido dentro del campo de texto
document.getElementById("campo_para_mostrar_datos").textContent = "Información ingresada : "+info_campo;
}
}//fin de function fn_Presionar_Boton()
</script>
</body>
</html>
Qué es forEach
JavaScript ofrece una variedad de métodos incorporados sobre los arrays que facilitan tareas frecuentes que podemos realizar con ellos, como encontrar un elemento, filtrar el array y mucho más.
El método forEach de los arrays se encarga de ejecutar una función específica para cada elemento de un array. Por tanto, no podemos decir que sea exactamente un bucle, sino un mecanismo de alto nivel para realizar un comportamiento por cada uno de los elementos de un array.
Al final, podemos entenderlo como un medio de recorrer los elementos del array y hacer algo para cada uno de ellos. Ese algo lo expresaremos mediante una función que enviaremos al bucle forEach como parámetro.
METODO forEach()
El método forEach() es una función de los arreglos (arrays) en JavaScript que permite ejecutar una función para cada elemento del arreglo.
Sintaxis: arreglo.forEach(función);
Argumentos:
- función: La función que se ejecutará para cada elemento del arreglo.
Funcionamiento
- El método
forEach() recorre cada elemento del arreglo.
- Para cada elemento, se llama a la función especificada.
- La función puede recibir hasta tres argumentos: valor, índice y arreglo.
- valor: El valor del elemento actual.
- indice: El índice del elemento actual.
- arreglo: El arreglo original.
Ventajas :
- No requiere un bucle explícito (como
for o while).
- No necesita mantener un índice manualmente.
- Es más conciso y legible.
Ejemplo
<script>
let frutas = ["manzana", "banana", "naranja"];
frutas.forEach(function(valor, indice) {
console.log('Fruta ['+indice '] = ['+ valor+']');
});
//Salida a consola
//Fruta 0: manzana
//Fruta 1: banana
//Fruta 2: naranja
</script>
ACTIVIDADES A REALIZAR
Utiliza el codigo base que esta al inicio de la pagina
Requerimientos :
- Una variable externa/global tipo
array llamada listadoMascotas.
- Existiran las siguientes funciones :
anadirMascotas y mostrarMascotas.
anadirMascotas : procesara la informacion desde input y activada por un button. mostrarMascotas presentara en el HTML usando el metodo forEach() para recorrer el contenido de la variable listadoMascotas en un parrafo HTML. - Cada nuevo ingreso debera actualizar el listado.
Procura no copiar directamente la respuesta desde una IA