JS ARRAYS

CODIGO BASE PARA PRUEBAS

<!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>

ARRAYS

Los objetos te permiten almacenar colecciones de datos a través de nombres. Eso está bien.

Pero a menudo necesitamos una colección ordenada, donde tenemos un 1ro, un 2do, un 3er elemento y así sucesivamente. Por ejemplo, necesitamos almacenar una lista de algo: usuarios, bienes, elementos HTML, etc.

No es conveniente usar objetos aquí, porque no proveen métodos para manejar el orden de los elementos. No podemos insertar una nueva propiedad “entre” los existentes. Los objetos no están hechos para eso.

Existe una estructura llamada Array (llamada en español arreglo o matriz/vector) para almacenar colecciones ordenadas.

DECLARACION

Hay dos sintaxis para crear un array vacío:

<script>
  let arr = new Array(); //Array vacio
  let arr = [];         //Array vacio
</script>

Casi siempre se usa la segunda. Podemos suministrar elementos iniciales entre los corchetes:

<script>
  let fruits = ["Apple", "Orange", "Plum"]; // Array con informacion
</script>

Los elementos del array están numerados comenzando desde cero.

Podemos obtener un elemento por su número entre corchetes:

<script>
  let fruits = ["Apple", "Orange", "Plum"];

  alert( fruits[0] ); // Apple
  alert( fruits[1] ); // Orange
  alert( fruits[2] ); // Plum
</script>

Podemos reemplazar un elemento:

<script>
  let fruits = ["Apple", "Orange", "Plum"];
  fruits[2] = 'Pear'; // ahora ["Apple", "Orange", "Pear"]  
</script>

…o agregar uno nuevo al array:

<script>
  let fruits = ["Apple", "Orange", "Plum"];
  fruits[3] = 'Lemon'; // ahora ["Apple", "Orange", "Pear", "Lemon"]
</script>

Cantidad de elementos en el array

<script>
  let fruits = ["Apple", "Orange", "Plum"];      
  alert( fruits.length ); // 3
</script>

Bucle de un array

<script>
  let arr = ["Apple", "Orange", "Pear"];

  for (let i = 0; i < arr.length; i++) 
  {
    alert( arr[i] );
  }
</script>

ACTIVIDADES A REALIZAR

Utiliza el codigo base que esta al inicio de la pagina

Requerimientos :

Variable de alcance externo/global tipo Array llamado listado_Mascotas con 10 posiciones vacias

Variable de alcance externo/global tipo Number para llevar la cantidad de mascotas capturadas

Tendra 2 funciones : Ingresar_Mascotas y Mostrar_Mascotas.

Solicitara el ingreso de un maximo de 10 mascotas.

El ingreso de elementos se realizara mediante campoinput

Si al ingresar un nuevo elemento es vacio (longitud cero) se interrumpira el proceso de ingreso de datos

Escribira en el HTML mediante un parrafo el contenido de listado_Mascotas separado por caracter - [guion medio]

Procura no copiar directamente la respuesta desde una IA

Métodos pop/push, shift/unshift

Una cola es uno de los usos más comunes de un array. En ciencias de la computación, significa una colección ordenada de elementos que soportan dos operaciones:

push inserta un elemento al final.
shift obtiene el elemento del principio, avanzando la cola, y así el segundo elemento se vuelve primero.

Los arrays soportan ambas operaciones.

En la práctica los necesitamos muy a menudo. Por ejemplo, una cola de mensajes que necesitamos mostrar en pantalla.

Hay otro caso de uso para los arrays – la estructura de datos llamada pila.

Ella soporta dos operaciones:

push agrega un elemento al final.
pop toma un elemento desde el final.

Para las pilas, la última introducida es la primera en ser recibida, en inglés esto es llamado principio LIFO (Last-In-First-Out, última en entrar primera en salir). Para las colas, tenemos FIFO (First-In-First-Out primera en entrar, primera en salir).

Los arrays en JavaScript pueden trabajar como colas o pilas. Ellos permiten agregar/quitar elementos al/del principio o al/del final.

En ciencias de la computación, la estructura de datos que permite esto se denomina cola de doble extremo o bicola.

push Agrega el elemento al final del array:

<script>
  let fruits = ["Apple", "Orange"];

  fruits.push("Nuevo");

  alert( fruits ); // Apple, Orange, Nuevo
</script>

unshift Agrega el elemento al principio del array:

<script>
  let fruits = ["Apple", "Orange"];

  fruits.unshift("Nuevo");

  alert( fruits ); // Nuevo, Orange, Pear
</script>

ACTIVIDADES A REALIZAR

1era modificacion del script de Mascotas :

El array inicial debe estar vacio.

Usa el metodo push para añadir nuevas mascotas.

Procura no copiar directamente la respuesta desde una IA

ACTIVIDADES A REALIZAR

2nda modificacion del script de Mascotas : agrega la capacidad para eliminar informacion

Añade un boton que llame la funcion eliminarTodasMascotas.

Crea una funcion llamada eliminarTodasMascotas.

La funcion debera eliminar todo el arreglo desde el ultimo elemento.

Cada vez que elimine un elemento debera mandar a la consola mediante console.log() la longitud del arreglo.

Procura no copiar directamente la respuesta desde una IA

ARRAYS 1