JavaScript - advanced - Lección nº 7
Matrices (arrays)
¿De qué trata esta lección?
En esta lección aprendemos cómo almacenar múltiples datos en una variable. Esto es importante por muchas razones, una de las cuales es que hasta ahora no podíamos recuperar los elementos de un documento por clase o nombre de etiqueta, porque los métodos utilizados devuelven más valores en una matriz.
Nuevos métodos en esta lección:
getElementsByClassName(nombre de la clase) – Con este método del documento y otros objetos HTML, podemos acceder a los elementos utilizando su nombre de clase. Funciona como el método getElementById, y el resultado solo puede ser una lista de varios elementos (como su nombre lo indica). El resultado es una matriz de objetos y se puede manejar como uno.
getElementsByTagName(nombre de la etiqueta) – con este método del documento y otros objetos HTML podemos acceder a todos los elementos que tienen la misma etiqueta HTML / mismo tipo. El resultado es una matriz.
querySelectorAll(nombre del selector) – Este método se puede usar para encontrar elementos por nombre de etiqueta, nombre de clase, pero se puede usar para agregar búsquedas más complejas combinando más clases, etiquetas y otros selectores.
charAt(index)– con este método de un objeto de cadena podemos solicitar una letra del texto desde la posición definida como parámetro.
Nueva propiedad en esta lección:
length – una propiedad con este nombre es utilizada por cadenas y también por arreglos. Podemos pedir el número de elementos para una matriz. Cuando definimos una matriz obtenemos un objeto, por lo que esta propiedad se refiere con el nombre de la matriz adjunta antes de su nombre.
¿Qué es un array?
Una matriz es un tipo de datos (datatype). Una variable de este tipo contiene una lista de valores. Por lo general, los valores son en su mayoría del mismo tipo (pueden ser números, cadenas, fecha u objetos, incluso otras matrices).
Las matrices son geniales porque podemos usar un nombre para referirnos a una lista de elementos, sin tener en cuenta el número de elementos, se puede cambiar:
Usando matrices, tenemos que definir:
var t=[1, 2, 3, 4]; a=["x", "y", "v", "w"]
Cada elemento de una matriz tiene un número de secuencia y se puede alcanzar utilizando este número. Esta "numeración" comienza desde 0. Conociendo este número de secuencia, podemos acceder / cambiar cada elemento.
Ejemplo de acceso a todos los elementos para cambiarlos todos a 5.:
for (i=0;i<t.length;i++) t[i]=5;
Ejemplo de definición y uso de una matriz:
En el ejemplo anterior, definimos una matriz con algunos nombres de colores incluidos.
Se llama a la función set si se hace clic en el div y cambia su color de fondo. Usamos la propiedad length para averiguar cuántos elementos hay en la matriz. Entonces, si agregamos algunos colores más tarde, no tenemos que corregir el código, ya que avanzamos a través de todos ellos con un bucle.
Generamos un número aleatorio entre 0 y 4 (Math.random () genera números en el intervalo [0, 1)). y podemos referirnos a uno de los elementos utilizando el número generado. Este será el color utilizado.
Ejemplo sobre el uso de getElementsByClassName:
En el ejemplo anterior, tenemos tres elementos HTML diferentes que utilizan la misma clase para la configuración de CSS.
Al hacer clic en el botón (el último), el color del texto cambia a naranja en los tres elementos. Obtenemos la referencia a ellos utilizando el método getElementsByClassName. La matriz con los resultados es d_elements.
Cada elemento de esta matriz es un elemento / objeto HTML.
Ejemplo sobre el uso de números de secuencia en cadenas:
En esta lección aprendemos cómo almacenar múltiples datos en una variable. Esto es importante por muchas razones, una de las cuales es que hasta ahora no podíamos recuperar los elementos de un documento por clase o nombre de etiqueta, porque los métodos utilizados devuelven más valores en una matriz.
Nuevos métodos en esta lección:
getElementsByClassName(nombre de la clase) – Con este método del documento y otros objetos HTML, podemos acceder a los elementos utilizando su nombre de clase. Funciona como el método getElementById, y el resultado solo puede ser una lista de varios elementos (como su nombre lo indica). El resultado es una matriz de objetos y se puede manejar como uno.
getElementsByTagName(nombre de la etiqueta) – con este método del documento y otros objetos HTML podemos acceder a todos los elementos que tienen la misma etiqueta HTML / mismo tipo. El resultado es una matriz.
querySelectorAll(nombre del selector) – Este método se puede usar para encontrar elementos por nombre de etiqueta, nombre de clase, pero se puede usar para agregar búsquedas más complejas combinando más clases, etiquetas y otros selectores.
charAt(index)– con este método de un objeto de cadena podemos solicitar una letra del texto desde la posición definida como parámetro.
Nueva propiedad en esta lección:
length – una propiedad con este nombre es utilizada por cadenas y también por arreglos. Podemos pedir el número de elementos para una matriz. Cuando definimos una matriz obtenemos un objeto, por lo que esta propiedad se refiere con el nombre de la matriz adjunta antes de su nombre.
¿Qué es un array?
Una matriz es un tipo de datos (datatype). Una variable de este tipo contiene una lista de valores. Por lo general, los valores son en su mayoría del mismo tipo (pueden ser números, cadenas, fecha u objetos, incluso otras matrices).
Las matrices son geniales porque podemos usar un nombre para referirnos a una lista de elementos, sin tener en cuenta el número de elementos, se puede cambiar:
Usando matrices, tenemos que definir:
var t=[1, 2, 3, 4]; a=["x", "y", "v", "w"]
Cada elemento de una matriz tiene un número de secuencia y se puede alcanzar utilizando este número. Esta "numeración" comienza desde 0. Conociendo este número de secuencia, podemos acceder / cambiar cada elemento.
Ejemplo de acceso a todos los elementos para cambiarlos todos a 5.:
for (i=0;i<t.length;i++) t[i]=5;
Ejemplo de definición y uso de una matriz:
En el ejemplo anterior, definimos una matriz con algunos nombres de colores incluidos.
Se llama a la función set si se hace clic en el div y cambia su color de fondo. Usamos la propiedad length para averiguar cuántos elementos hay en la matriz. Entonces, si agregamos algunos colores más tarde, no tenemos que corregir el código, ya que avanzamos a través de todos ellos con un bucle.
Generamos un número aleatorio entre 0 y 4 (Math.random () genera números en el intervalo [0, 1)). y podemos referirnos a uno de los elementos utilizando el número generado. Este será el color utilizado.
Ejemplo sobre el uso de getElementsByClassName:
En el ejemplo anterior, tenemos tres elementos HTML diferentes que utilizan la misma clase para la configuración de CSS.
Al hacer clic en el botón (el último), el color del texto cambia a naranja en los tres elementos. Obtenemos la referencia a ellos utilizando el método getElementsByClassName. La matriz con los resultados es d_elements.
Cada elemento de esta matriz es un elemento / objeto HTML.
Ejemplo sobre el uso de números de secuencia en cadenas:
En el ejemplo anterior podemos ver cómo funciona el método charAt. Existe la palabra Firefox y una matriz con números: los posibles índices de la palabra.
El primer bucle agrega las letras de la palabra en el orden original al primer párrafo. Podríamos agregarlo de una vez, pero de esta manera podemos poner espacios entre las letras.
El segundo bucle agrega las mismas letras en un orden definido por la matriz t.
El primer bucle agrega las letras de la palabra en el orden original al primer párrafo. Podríamos agregarlo de una vez, pero de esta manera podemos poner espacios entre las letras.
El segundo bucle agrega las mismas letras en un orden definido por la matriz t.
Ejercicios
1. Modifica el archivo aspects.html agregando al azar una de las cuatro citas a continuación para reemplazar el texto citado de la imagen. Las citas son: "Extreme programming is an emotional experience.", "In theory, theory and practice are the same. In practice, they’re not.", "Measuring programming progress by lines of code is like measuring aircraft building progress by weight.", "The best thing about a boolean is even if you are wrong, you are only off by a bit.".
Implementa los siguientes pasos:
Ver el resultado
Implementa los siguientes pasos:
- La selección y la inyección de la cita deben realizarse cuando se carga la página, así que vincule la función al evento onload de la etiqueta del cuerpo.
- Agrega las cuatro comillas a una matriz.
- Identifica el div para "escribir" en, aleatoriza un índice a la matriz e inserta la cita.
2. Modifica el archivo toplangs.html cambiando el tamaño de la fuente del dibujo SVG a 24px, si el cursor se mueve sobre el dibujo. El tamaño original debe ser restaurado (18px) si se quita el cursor. Puedes buscar todos los elementos <text> y colocarlos en una matriz.
Ver el resultado
3. Modifica el archivo form.html para evaluar la prueba de multiplicación que construimos anteriormente:
Crea la función que se llamará si ocurre el evento de envío.
Puedes crear una lista de los elementos del formulario (si usas “*” como nombre de etiqueta), no uses el valor de los botones de envío.
Tienes la pregunta original como valor de la propiedad de marcador de posición: calcula la respuesta correcta. Compáralo con el valor introducido en el cuadro de texto.
Cuenta las respuestas correctas y muestra el resultado.
Ver el resultado
Crea la función que se llamará si ocurre el evento de envío.
Puedes crear una lista de los elementos del formulario (si usas “*” como nombre de etiqueta), no uses el valor de los botones de envío.
Tienes la pregunta original como valor de la propiedad de marcador de posición: calcula la respuesta correcta. Compáralo con el valor introducido en el cuadro de texto.
Cuenta las respuestas correctas y muestra el resultado.
4. Modifica el archivo gallery.html, agregando un título a las imágenes de la parte de imágenes aleatorias. Los títulos deben ser 8 palabras aleatorias u oraciones de tu agrado, que debea agregar a una matriz.
Es posible que debas saber que el evento de cambio no funciona con la imagen, por lo que debes llamar a la función que maneja esta tarea dos veces: una vez desde la función que maneja el cambio aleatorio y otra que maneja el elemento de rango.
La forma más fácil es dar como parámetro el número de la imagen. Dependiendo de cómo manejaste los problemas hasta ahora, es posible que debas obtener el número del nombre de la imagen. Si lo haces, es posible que necesites saber que la propiedad src contiene la ruta absoluta a la imagen para que sea más fácil encontrar el número buscando desde el final.
Ver el resultado
Es posible que debas saber que el evento de cambio no funciona con la imagen, por lo que debes llamar a la función que maneja esta tarea dos veces: una vez desde la función que maneja el cambio aleatorio y otra que maneja el elemento de rango.
La forma más fácil es dar como parámetro el número de la imagen. Dependiendo de cómo manejaste los problemas hasta ahora, es posible que debas obtener el número del nombre de la imagen. Si lo haces, es posible que necesites saber que la propiedad src contiene la ruta absoluta a la imagen para que sea más fácil encontrar el número buscando desde el final.
Cuestionario
1. Examina el código a continuación y selecciona la descripción más correcta:
var t=[5, 6, 9, 15, 7];
for (i=4;i>=0;i--) this.innerHTML+=t[i]+ " ";
2. ¿Cuál de los siguientes métodos no tiene como resultado una matriz?
3. Examina el código de abajo. ¿Cuál será el resultado mostrado?
<img id="im1" src="pic.jpg">
var t=document.getElementById("im1").src;
var nr=t.length;
alert(nr);
4. Examina el código de abajo. ¿Cuál será el resultado mostrado?
var text="A Truth thats told with bad intent Beats all the Lies you can invent";
var nr=text.length;
var i=nr-5;
var j=5;
this.innerHTML=text.charAt(i)+" "+ text.charAt(j);
Información suplementaria
Puedes leer más sobre esta lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/js/js_arrays.asp;
https://www.w3schools.com/jsref/met_document_queryselectorall.asp.
https://www.w3schools.com/js/js_arrays.asp;
https://www.w3schools.com/jsref/met_document_queryselectorall.asp.
