JS ARRAYS 2

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 multidimensionales

Los arrays pueden tener items que a su vez sean arrays. Podemos usarlos como arrays multidimensionales, por ejemplo para almacenar matrices:

Codigo

<script>
  let matrix = 
  [
    [1, 2, 3],  // Fila 1
    [4, 5, 6],  // Fila 2
    [7, 8, 9]   // Fila 3
  ];

  // matrix[fila][columna]
  alert( matrix[1][1] ); // 5, el elemento central

</script>

En este caso la matriz bidimensional es una estructura de datos que se compone de filas y columnas. La matriz tiene 3 filas y 3 columnas.

Estructura de la matriz: La matriz se define utilizando un arreglo de arreglos

Accediendo a los elementos: Para acceder a un elemento específico de la matriz, se utiliza la siguiente sintaxis:

matrix[fila][columna]
fila: El índice de la fila (comienza en 0).
columna: El índice de la columna (comienza en 0).

Ejemplos:

matrix[0][0] devuelve el elemento en la fila 1, columna 1 (valor 1).
matrix[1][2] devuelve el elemento en la fila 2, columna 3 (valor 6).
matrix[2][1] devuelve el elemento en la fila 3, columna 2 (valor 8).

Propiedades y métodos

La matriz es un arreglo de arreglos, por lo que se pueden utilizar las propiedades y métodos de los arreglos en JavaScript, como:

length Devuelve el número de filas en la matriz.
push() Agrega una nueva fila al final de la matriz.
pop() Elimina la última fila de la matriz.

Sin embargo, es importante tener en cuenta que la matriz bidimensional no es un tipo de dato nativo en JavaScript, sino más bien una representación de una matriz utilizando arreglos anidados.

No compares arrays con ==

Las arrays en JavaScript, a diferencia de otros lenguajes de programación, no deben ser comparadas con el operador ==.

Este operador no tiene un tratamiento especial para arrays, trabaja con ellas como con cualquier objeto.

Recordemos las reglas:

Dos objetos son iguales == solo si hacen referencia al mismo objeto.
Si uno de los argumentos de == es un objeto y el otro es un primitivo, entonces el objeto se convierte en primitivo.
Con la excepción de null y undefined que son iguales == entre sí y nada más.

La comparación estricta === es aún más simple, ya que no convierte tipos.

Entonces, si comparamos arrays con ==, nunca son iguales, a no ser que comparemos dos variables que hacen referencia exactamente a la misma array.

Codigo de comparación erronea con ==

<script>
  //Comparacion de  arrays
  alert( [] == [] ); // falso
  alert( [0] == [0] ); // falso

  //Comparacion primitivo vs arrays
  alert( 0 == [] ); // verdadero
  alert('0' == [] ); // falso
</script>

Explicacion la comparación erronea

Los arrays vacios [] son técnicamente objetos diferentes. Así que no son iguales. El operador == no hace comparaciones de elemento a elemento.

Comparaciones con primitivos también pueden dar resultados aparentemente extraños.

Cuando comparamos un primitivo con un objeto array. Entonces array [] se convierte a primitivo para el propósito de comparar y se convierte en una string vacía ''.

CODIGO PARA CAPTURAR EN UN ARRAY COMPARANDO LOS VALORES

  <!DOCTYPE html>
  <html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista sin duplicados</title>
  </head>
  <body style="color:white;background-color:black">
    <h1>Lista sin duplicados</h1>
    <p id="lista"></p>
    <script>
      let lista = [];
  
    while (true) 
    {
      let valor = prompt("Ingrese un valor (o cancelar para salir):");
      if (valor === null) 
      {
        break;
      }//fin if
      
      valor = valor.trim().toLowerCase();
      let encontrado = false;
  
      for (let i = 0; i < lista.length; i++) 
      {
        if (lista[i] === valor) 
        {
          encontrado = true;
          break;
        }
      }//fin for 
  
      if (encontrado==false) 
      {
        lista.push(valor);
      } 
      else 
      {
        alert("Valor duplicado, no se añadirá.");
      }
      
    }//Fin while (true) 
  
    document.getElementById("lista").innerHTML = lista.join(", ");
    //El método join() es una función de los arreglos (arrays) en 
    //JavaScript que se utiliza para unir todos los elementos del 
    //arreglo en una sola cadena de texto.        
          
    </script>
  </body>
  </html>

ACTIVIDADES A REALIZAR

Realiza la modificación del HTML para capturar nombres de mascotas que usa funciones

Antes de añadir el nuevo nombre de mascota,verifica que no este duplicado

Crea una funcion verificarDuplicadoMascota

Esta funcion recorrera todo el array

Retornara true

Usa el metodo push para añadir nuevas mascotas.

Permitira continuar ingresando elementos hasta que el valor del input este vacio.

Procura no copiar directamente la respuesta desde una IA

Metodo include

El método includes() es una función de los arreglos (arrays) en JavaScript que verifica si un valor específico existe dentro del arreglo.

Sintaxis : lista.includes(valor)

Argumentos: valor El valor que se busca dentro del arreglo.

Funcionamiento

El método includes() recorre todos los elementos del arreglo.
Verifica si alguno de los elementos es igual al valor especificado.
Si no encuentra ninguna coincidencia, devuelve false
Si encuentra una coincidencia, devuelve true.

Es sensible a mayúsculas y minúsculas.
Busca coincidencias exactas, no parciales.

Ejemplo

<script>
  let frutas = ["manzana", "banana", "naranja"];

  // Verificar si existe "manzana"
  frutas.includes("manzana") // devuelve true

  // Verificar si existe "fresa"
  frutas.includes("fresa") // devuelve false
</script>

ACTIVIDADES A REALIZAR

Realiza la modificacion del HTML para capturar nombres de mascotas que usa funciones

Antes de añadir el nuevo nombre de mascota,verifica que no este duplicado

Crea una funcion verificarDuplicadoMascota

Utiliza el metodo include para detectar duplicados

Procura no copiar directamente la respuesta desde una IA

METODO JOIN

El método join() es una función de los arreglos (arrays) en JavaScript que se utiliza para unir todos los elementos del arreglo en una sola cadena de texto.

Sintaxis:lista.join(separador)

Argumentos:separador: Es la cadena de texto que se utiliza para separar los elementos del arreglo. Puede ser una coma (","), un espacio (" "), un guión ("-"), etc.

Funcionamiento

El método join() recorre todos los elementos del arreglo.
Cada elemento se convierte en una cadena de texto.
Los elementos se unen en una sola cadena de texto, utilizando el separador especificado.
Si el arreglo está vacío, join() devuelve una cadena vacía.
Si el separador es undefined, join() utiliza una coma (",") como separador predeterminado.

Ejemplo

<script>
  let frutas = ["manzana", "banana", "naranja"];

  // Unir con coma
  frutas.join(", ") // devuelve "manzana, banana, naranja"

  // Unir con espacio
  frutas.join(" ") // devuelve "manzana banana naranja"

  // Unir con guión
  frutas.join("-") // devuelve "manzana-banana-naranja"
</script>

ACTIVIDADES A REALIZAR

Realiza la modificación del HTML para capturar nombres de mascotas que usa funciones

Actualiza la funcion Mostrar_Mascotas

Utiliza el metodo join unir el array en un string [cadena de texto]

Procura no copiar directamente la respuesta desde una IA

METODO indexOf

El método indexOf() es una función de los arreglos (arrays) en JavaScript que busca la posición (índice) del primer elemento que coincide con un valor específico.

Sintaxis: array.indexOf(valor, inicio)

Argumentos:

valor : El valor que se busca en el arreglo.
inicio (opcional) : La posición desde la que se inicia la búsqueda.

Funcionamiento

El método indexOf() recorre el arreglo desde la posición inicio (0 [cero] si no se especifica).
Verifica si cada elemento es igual al valor buscado.
Si encuentra una coincidencia, devuelve el indice de esa posición.
Si no encuentra ninguna coincidencia, devuelve -1 .

Nota

Es sensible a mayúsculas y minúsculas.
Busca coincidencias exactas, no parciales.

Ejemplo

<script>
  let frutas = ["manzana", "banana", "naranja", "fresa"];

  // Buscar "banana"
  frutas.indexOf("banana") // devuelve 1

  // Buscar "fresa" desde la posición 2
  frutas.indexOf("fresa", 2) // devuelve 3

  // Buscar "uva" (no existe)
  frutas.indexOf("uva") // devuelve -1
</script>

ACTIVIDADES A REALIZAR

Utiliza el codigo base que esta al inicio de la pagina

Requerimientos :

Una variable externa/global tipo array llamada listadoMascotas.

listadoMascotas debe iniciar con 8 nombres de mascotas.

Existiran las siguientes funciones : buscarMascotas y mostrarMascotas

mostrarMascotas presentara mediante console.log() y metodo join() el contenido de la variable listadoMascotas.

buscarMascotas se invocara mediante button y el nombre de la mascota a retirar se obtendra de un input.

Realizar la busqueda mediante indexOf y presentara en console.log() el indice en caso de encontrar la posicion

Procura no copiar directamente la respuesta desde una IA

METODO splice

El método splice() es una función de los arreglos (arrays) en JavaScript que permite agregar, eliminar o reemplazar elementos en una posición específica del arreglo.

Sintaxis: arreglo.splice(indice, cantidad, ...elementos)

Argumentos:

indice La posición donde se realizará la operación.
cantidad: El número de elementos a eliminar.
...elementos: Los elementos a agregar (opcional).

Funcionamiento

El método splice() modifica el arreglo original.
Si cantidad es mayor que 0, elimina los elementos en la posición indice y siguientes.
Si se proporcionan elementos, los agrega en la posición indice.
Devuelve un arreglo con los elementos eliminados.

Nota

El método splice() modifica el arreglo original.
Si indice es negativo, se cuenta desde el final del arreglo.
Si cantidad es 0, no se eliminan elementos.

Ejemplo eliminar elementos

<script>
  let frutas = ["manzana", "banana", "naranja", "fresa"];
  frutas.splice(1, 2); // elimina "banana" y "naranja"
  console.log(frutas); // ["manzana", "fresa"]
  frutas.splice(1, 1); // elimina "manzana" 
  console.log(frutas); // [ "fresa"]
</script>

Ejemplo agregar elementos

<script>
  let frutas = ["manzana", "naranja"];
  frutas.splice(1, 0, "banana", "fresa"); // agrega "banana" y "fresa"
  console.log(frutas); // ["manzana", "banana", "fresa", "naranja"]
</script>

Ejemplo reemplazar elementos

<script>
  let frutas = ["manzana", "banana", "naranja"];
  frutas.splice(1, 1, "fresa"); // reemplaza "banana" por "fresa"
  console.log(frutas); // ["manzana", "fresa", "naranja"]
</script>

ACTIVIDADES A REALIZAR

Utiliza el codigo base que esta al inicio de la pagina

Requierimientos :

Una variable externa/global tipo array llamada listadoMascotas.

listadoMascotas debe iniciar con 8 nombres de mascotas.

Existiran las siguientes funciones : retirarMascotas y mostrarMascotas

mostrarMascotas presentara en el HTML usando el metodo join() el contenido de la variable listadoMascotas.

retirarMascotas solicitara mediante button y el nombre de la mascota a retirar desde input.

Se actualizara el listado cada vez que se retire un elemento.

Procura no copiar directamente la respuesta desde una IA