▶ Curso Básico de Javascript desde cero – Estructuras de Datos 【Arreglos Unidimensionales - Arrays (Lectura y Recorrido de Elementos)】.

Curso JavaScript: Listado de Lecciones

Introduccion - Mis primeras lineas de código Variables, Tipos De Variables y Operadores Aritmeticos Estructuras De Control Estructura Condicional (if-else, else if, switch-case) Estructuras Repetitivas (for, while, do while) Bucle For Bucle While Bucle Do While Arrays o Arreglos (Unidimensional y Bidimensional) Arreglos Unidimensionales - Arrays (Concepto y Sintaxis) Arreglos Unidimensionales - Arrays (Lectura y Recorrido) Funciones - Functions Ejercicios Practicos, Interacción con el Front-End

Hola amigos lectores y seguidores de The Big Web Developer, seguimos explicando las temáticas de nuestro curso de JavaScript, en la entrada anterior estuvimos trabajando con los arrays o arreglos unidimensionales, estuvimos tratando lo básico como lo es el concepto y la sintaxis de este; si aún no has leído esta entrada te dejaré el vinculo por aqui para que te adentres en este tema, ▶ Curso Básico de Javascript desde cero – Estructuras de Datos 【Arreglos Unidimensionales - Arrays (Concepto y Sintaxis)】.

El dia de hoy profundizaremos más en el tema de los arrays el dia de hoy aprenderemos a leer y hacer un recorrido de los elementos almacenados en el array por lo tanto pondremos en práctica conceptos que ya conocemos cómo es el uso de bucles, al final de este tutorial habrás aprendido a pedir datos por teclado, almacenarlos en un arreglo unidimensional y listar estos datos accediendo a las posiciones de memoria que correspondan o que tenga el arreglo. 
No siendo mas ¡comencemos!

Explicación por Videotutorial.

Si deseas puedes ver el Videotutorial que hicimos especialmente para ti, el cual tiene toda la información relevante del tema a tratar el dia de hoy.

Explicación por Fototutorial.

Iniciamos explicando cómo recorrer y agregar datos a un arreglo unidimensional de manera dinámica, estudiaremos varios casos de uso y estaremos detallando los procesos que realicemos, notaremos que los arrays en Javascript son una herramienta muy versátil y potente a la hora de trabajar en nuestros proyectos de programación .

1. Agregar Datos a un Array DINÁMICAMENTE. 

Tenemos tres formas para declarar arreglos las cuales explicamos de manera detallada en la entrada anterior( ▶ Curso Básico de Javascript desde cero – Estructuras de Datos 【Arreglos Unidimensionales - Arrays (Concepto y Sintaxis)】.) la diferencia es que no hemos asignado ningún elemento a los respectivos arrays, en si estamos creando arrays de longitud cero(arrayInicial, arraySecundario) a diferencia del arrayTerciario al cual le hemos asignado una longitud de cuatro; para asignar datos de manera dinámica a los respectivos arrays vamos a trabajar con bucles para realizar el recorrido de las respectivas posiciones que tenga dicho array.

Creamos tres arreglos unidimensionales

Recordemos que al trabajar con arrays en Javascript la longitud de este no es estática por el contrario puede variar por lo tanto no es necesario reservar espacio en memoria con anterioridad, dicho esto hemos creado un bucle el cual se repetirá 100 veces, tenemos la variable contadora (i) la cual servirá como índice para acceder a las posiciones del array por lo tanto es obligatorio iniciar esta desde cero(0), una vez entrado al bucle asignamos un elemento al array para esto debemos acceder a la posición donde queremos almacenar dicho elemento (arrayInicial[i]) simplemente vamos asignarle un valor numérico el cual será i+1 esto para asegurarnos que el primer elemento a agregar sea el número 1 hasta llegar a 100.
Para finalizar simplemente imprimimos los elementos del array uno a uno, lo haremos en formato HTML, por lo tanto utilizamos la función document.write(), llamamos al array y accedemos a la posición (arrayInicial[i]) por último concatenamos con un salto de línea "<br>", esto para organizar los elementos a mostrar. 

Asignar y Listar elementos de un Array

Al ejecutar nuestro script obtendremos el siguiente resultado en el cual mostramos el listado de números desde 1 hasta 100, los cuales hacen referencias a todos los elementos agregados en el array con esto concluimos que nuestro arreglo pasó de ser de longitud 0 a longitud 100.

Salida recorrido Array

Nota: Si tienes alguna duda con el manejo de bucles en específico el bucle FOR te recomiendo revises la siguiente entrada relacionada a esta temática ▶ Curso Básico de Javascript desde cero – Estructuras de control repetitivas 【BUCLE FOR】. .

2. Recorrido indefinido de un Array en Javascript. 
Podemos llevar esto a otro nivel y agregar elementos a nuestro array de forma indefinida, con esto quiero decir que realizaremos iteraciones sin conocer de antemano el número de iteraciones a realizar, para esto vamos a trabajar con el bucle Do While; si no conoces este bucle te recomiendo la siguiente entrada: ▶ Curso Básico de Javascript desde cero – Estructuras de control repetitivas 【BUCLE DO WHILE】.

• Iniciamos creando una variable la cual hemos llamado condicion la inicializamos en false esta variable será la que servirá como condición a evaluar cada vez que vayamos a iterar.
• Seguido a esto creamos nuestra variable contadora (i) la cual servirá para acceder a las posiciones de memoria del array.
• Creamos el bucle Do While el  cual realizará iteraciones de manera indefinida mientras la variable condicion sea diferente de true.
• Dentro del bucle procedemos a pedir datos por teclado haciendo uso de la función prompt(), Igualmente el valor pedido por teclado lo agregamos a nuestro array accediendo a la posición donde queremos asignar dicho elemento (arraySecundario[i]).
• Seguido a esto nuestra variable contadora(i) se le sumará +1 en cada iteración, es importante resaltar que el primer valor que tendrá esta variable será 0.
• Para finalizar hacemos uso de la función confirm() en la cual verificamos si el usuario desea terminar el proceso, dicha función devuelve true o false.

Recorrido indefinido de un array

Una vez terminadas las iteraciones procedemos a listar los elementos del array.

• Iniciamos haciendo uso de la función document.write() en la cual imprimimos un mensaje en formato HTML, encerramos nuestro texto("Listado de datos") con etiquetas <h1> las cuales las utilizamos con el fin de mostrar nuestro texto en forma de título.
• Creamos un Bucle For el cual tendrá los siguientes límites: la variable i inicia desde 0 hasta que i se menor(<) a la longitud del array, para conocer dicha longitud escribimos el nombre del arreglo que estamos trabajando (arraySecundario) seguido de la variable length la cual devolverá la longitud de este. 
• Una vez dentro del bucle recorremos cada elemento del array accediendo a sus posiciones e imprimimos los respectivos datos en pantalla. 

Listar elementos de un array en Javascript

Al finalizar el proceso tendríamos un resultado similar al que apreciamos en la imagen, al final nuestro array es de longitud 4.

Listado de elementos del Arreglo

Con esto hemos concluido la lección del dia de hoy, en próximas entradas estaremos entrando a una sección mucho más interesante en la cual iniciamos a resolver ejercicios implementando Arrays, te recomiendo que mires el video tutorial donde ampliamos mucho más la lección del dia de hoy.

Puedes visualizar todo el código que estuvimos desarrollando a lo largo de este tutorial en la página jsfiddle,  igualmente te lo dejamos por aquí. 

• Anterior
• Siguiente

Igualmente si estas interesado en desarrollar una página web, y aun no te decides en que hosting alojar dicha página te dejare una recomendación en la cual recibirás asombrosos descuentos siguiendo el siguiente Link.

🔴 CUPONES DE DESCUENTO PARA HOSTING COMPARTIDO EN 
https://geedhosting.com/  🔴
►50% DCTO. = GEEDPP50 

Estos CUPONES DE DESCUENTO, sólo son válidos para el SERVICIO DE HOSTING, mas no para el Dominio.