Podstawy js, tablica, prosty skrypt, slider

pytanie zadane 12 maja 2018 w JavaScript przez xxx1990 Początkujący (490 p.)

Witam mam problem proszę mi łopatologicznie wytłumaczyć czym jest zmienna "pojedynczy obraz" i dlaczego jest w nawiasach kwadratowych ? Co oznacza zapis :

1." img.src = "gfx/" + obrazy[pojedynczy_obraz];"

2. console.log(obrazy[pojedynczy_obraz]);

<html>
    <head>
        <title>Slider</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .slider{
                height: 350px;
                width: 400px;
                opacity: 1; 
                transition: opacity 1s;
            }

        </style>
    </head>
    <body>
        <img class="slider" src="gfx/img1.jpg" alt="fotka1">             
        <script>
            var obrazy = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "img5.jpg", "img6.jpg", "img7.jpg"];
            var img = document.querySelector(".slider");
            console.log(img.src);
//            img.src = "gfx/img2.jpg";

            setInterval(zmienObraz, 2000);
            var pojedynczy_obraz = 1;


            setTimeout(zanikanie, 1200);
            function zmienObraz() {
                img.src = "gfx/" + obrazy[pojedynczy_obraz];
                console.log(obrazy[pojedynczy_obraz]);
                setTimeout(pokazObraz, 200);
                pojedynczy_obraz++;
                if (pojedynczy_obraz == obrazy.length) {
                    pojedynczy_obraz = 0;
                }
                setTimeout(zanikanie, 1200);
            }

            function zanikanie() {
                img.style.opacity = 0;
            }

            function pokazObraz() {
                img.style.opacity = 1;
            }

        </script> 
    </body>
</html>

1 odpowiedź

odpowiedź 12 maja 2018 przez Tomek Sochacki Ekspert (227,490 p.)

img.src = "gfx/" + obrazy[pojedynczy_obraz];

tutaj po prostu przypisujesz wartość do właściwości src elementu img (jest to referencja to elementu DOM). Używasz tutaj tzw. konkatenacji ciągów znakowych, czyli łączysz ciąg "gfx/" i ciąg zawarty w tablicy "obrazy" pod indeksem wskazanym przez zmienną pojedynczy_obraz.

console.log(obrazy[pojedynczy_obraz]);

Tutaj w konsoli wyświetlasz po prostu wskazany element tablicy "obrazy", która zawiera elementy typu string.

komentarz 12 maja 2018 przez xxx1990 Początkujący (490 p.)

Czy jest sens stosować wogóle zmienną "pojedynczy obraz"? No bo rozumiem , że ma ona początkowo wartość 1, czyli zamiast pojedynczy obraz = 1 , byłoby po prostu obrazy[i][1]? Sory jeśli idiotyczne pytanie ;) Bo to chodzi o indeks taak ?

komentarz 12 maja 2018 przez Tomek Sochacki Ekspert (227,490 p.)

obrazy[i][1] nie, bo Ty masz tablicę zawierającą stringi, a nie dodatkowe "podtablice". Musiałbyś więc odwołać się do obrazy[1] jako do drugiego elementu tablicy (indeksy zaczynają się od zera!).

Ty jednak gdzieś tam w kodzie widziałem, że inkrementujesz pojedynczy_obraz więc nie ustawiasz na sztywno konkretnego indeksu.

komentarz 12 maja 2018 przez xxx1990 Początkujący (490 p.)

Aaaa jasne jasne , dziękuję bardzo ! Mam jeszcze jedno pytanie, czy mógłbyś równie łopatologicznie wyjaśnić te linijki ? Co nam daje inkrementacja tej zmiennej ? (być może za małą część kodu skopiowałem , jeśli tak to przepraszam ).

setTimeout(pokazObraz, 200);
                pojedynczy_obraz++;
                if (pojedynczy_obraz == obrazy.length) {
                    pojedynczy_obraz = 0;
                }

komentarz 12 maja 2018 przez Tomek Sochacki Ekspert (227,490 p.)

po upływie 200ms wywołujesz funkcję pokazObraz().

W dalszej części kodu zwiększasz o jeden wartość pojedynczy_obraz, a jeśli będzie to wartość równa długości tablicy obrazy to zerujesz ją (aby wskazywała pewnie na indeks pierwszego elementu).

Ta inkrementacja jednak nie wykona się po setTimeout ale przed. Nie wnikałem w cały kod bo tak dziś z doskoku tylko tu wpadam, ale musiałbyś poczytać o tzw. asynchroniczności w JS to wyjaśni Ci się wszystko.