Cómo funciona el operador % módulo o resto lógica de su funcionamiento CU01131E

[Salvadoruve2]

Hola buenas.. habiendo comprendido la dinámica de los bucles 'for', ahora en el segundo exjemplo de este apartado del curso hay todavía algo que no tengo tan claro. Estoy en la entrega CU01131E del tutorial de programación con JavaScript desde cero de aprenderaprogramar.com

Código: [Seleccionar]

var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow'];

var elementosObtenidos = document.getElementsByTagName(elemento);

if (izqda_dcha == true) {

                for (var i=0; i<elementosObtenidos.length; i++) {

                elementosObtenidos[i].style.backgroundColor = color[i%4];

si i=0; color[i%4]= 0 y de aquí obtenemos el nuevo color para elementosObtenidos[0] = Manzana verdad?

Pero no entiendo como funciona el operador %, no encuentro la lógica de su funcionamiento incluso habiendo releido su definición unas 50 veces. Podrías por favor ponerme un ejemplo de como se opera y como obtenemos el 'resto' de la division?

después no tengo muy claro el siguiente apartado del ejemplo, quería confirmar que es así como funciona

Código: [Seleccionar]

for (var j=elementosObtenidos.length-1; j>=0; j--) {

                elementosObtenidos[j].style.backgroundColor = color[(j+3)%4]

aquí j=elementosObtenidos.length-1; significa que j=13 ??
Si es así color[(j+3)%4] debería ser color[16%4] que su resultado es 0.

si j=13; elementosObtenidos[j], ha de ser el elmento 13 del Array que es frambuesa, es correcto?

En definitiva no se muy bien si estoy comprendiendo la función length y sobre todo no comprendo el operador %.

y por ultimo si me lo permites, no consigo entender del todo como funciona el mecanismo 'izqda_dcha' para hacer rotar las posiciones de los colores. Por una lado declaramos la var izqda_dcha fuera de la función, no se por que.. y luego al final de la función utilizamos un If else con la sentencia if (izqda_dcha == false) { izqda_dcha = true; } else { izqda_dcha = false; }..

Si pudieras darme algunas nociones sobre esto te lo agradecería mucho.

Gracias

[pedro,,]

Hola sobre el resto de la división te puedo explicar poco, ¿esto lo entiendes?:



La función lenght te devuelve el número de elementos que contiene un array, en este caso,  elementosObtenidos.length, serán 14 elementos. Siempre que tengas dudas puedes usar "alert(elementosObtenidos.length);", para comprobar el valor de variables o de funciones.
A "j" se le resta 1, porque el array contiene 14 elementos, pero los índices de dicho array están comprendidos entre 0 y 13.

La variable "izqda_dcha" se declara de forma global, por eso está fuera de cualquier función. En este código esto se hace así para que cuando se pulse el botón "Pulse aquí para cambiar colores", "izqda_dcha" contenga el último valor que se le halla dado, si ya se ha ejecutado una vez la función cambiarColores(), su valor será  false.
No le des mucha importancia de momento a las variables declaradas con ámbito global, más adelante en el curso se hablará de ellas.

Saludos.   

[Salvadoruve2]

Muchas gracias, como siempre gran ayuda

[pedro,,]

De nada, para eso estamos.

Cambié la imagen, puesto que tenía un error.

Saludos.