JavaScript: Używanie pętli na tablicach
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji wrócimy jeszcze do koncepcji pętli, które są często wykorzystywane po to, aby internować po elementach
tablicy.
I to właśnie będę chciał ci pokazać w tej lekcji, iterowanie po elementach tablicy jedno oraz wielowymiarowej.
Przejdźmy od razu do kodu i utworze tutaj dwie nowe zmienne.
Jak widzisz, mamy tablicę z jakimiś numerami i założymy, że są to wylosowane liczby totolotka, a tutaj
mamy tekst,
wylosowane liczby to. Mogłeś to już zobaczyć w lekcji, w której wprowadzałem do pętli i mówiłem o tym
jak możemy je m.in. wykorzystywać.
Teraz zobaczysz praktyczny tego przykład.
Będziemy chcieli przeiterować po całej tej pętli znaną nam pętlą for.
Jak pamiętasz na początku musimy zrobić taki licznik. Nazwiemy sobie zmienną i będzie ona miała wartość 0, bo
startujemy od zera.
Wiedząc, że każdy pierwszy element tablicy będzie miał indeks zero, czyli od zera chcemy zacząć iterowanie
po tej tablicy.
Następnie będziemy chcieli tak długo obracać można powiedzieć z tą pętlą, aż mamy w niej jakieś elementy.
Czyli tutaj napiszemy i mniejsze od. Możesz się domyślić numbers.length.
I tutaj jeszcze taka mała uwaga, jeżeli będziemy mieli bardzo duże pętle, to oczywiście ten warunek jest
sprawdzany za każdą iteracją, czyli za każdą iteracją odwołujemy się do numbers.length i pobieramy tę
właściwość. Dlatego, jeżeli mamy bardzo duże tablice, które mają bardzo wiele elementów, to dobrze byłoby
wcześniej napisać sobie zmienną np. arrLength.
I tutaj w niej zapisać.
W naszym przypadku numbers.length.
Co to oznacza?
Otóż tyle, że do tej zmiennej zostanie raz zwrócona długość tablicy.
I tutaj moglibyśmy to podstawić poprzez arrLength i wówczas ten warunek, kiedy będzie sprawdzany to będziemy
tylko porównywać i z wartością, która jest tutaj a nie pobierać za każdym razem length z numbers.
To w bardzo mały sposób wpływa na optymalizację przy niewielkich tablicach, ale przy bardzo dużych
może mieć już znaczenie, więc chciałbym, abyś o tym również wiedział.
Więc zostawmy sobie to w ten sposób i na końcu standardowo zwiększamy wartość licznika i w ten sposób będziemy
mieli tyle iteracji, ile jest elementów tablicy i za każdą interakcją będziemy mieli tutaj w zmiennej
i nowy numer,
czyli mamy zero za kolejną będzie 1 itd.
Możesz się już teraz domyślić, że bez trudu będziemy mogli się odwołać do numbers i podać i.
I na początku numbers i, czyli 0, to będzie 2, 1 to będzie 3 itd.
No i teraz będziemy chcieli sobie tutaj do text dodawać wylosowane liczby, które tutaj się znajdują.
Ja od razu powiem ci, że można zrobić dużo prostszy sposób, jeżeli chodzi o taki zapis to niekoniecznie
musielibyśmy korzystać z pętli, ale chcę Ci pokazać jak możemy na tablicach iterować właśnie za pomocą
pętli for. Napiszmy sobie tutaj text, a więc odwołujemy się do wyżej utworzonej zmiennej.
Plus równa się. Wiesz, że w ten sposób do tego co już jest w tej zmiennej, czyli do tego ciągu znaków będziemy
dodawać kolejne znaki i napiszemy tutaj Nnumbers.
I teraz, żeby odwołać się do pierwszego elementu to wpiszemy i, i jest 0, więc będziemy tutaj dodawać i po
prostu do tego tekstu 2 i następnie będę chciał dodać sobie tutaj przecinek i spacje i za kolejną
interakcją, czyli za następną będziemy w tej zmiennej mieli wylosowane liczby to 2, przecinek, spacja i
dodamy do tego 3 i tak dalej.
No i teraz na końcu wyświetli sobie tekst i zobaczmy jak to wygląda w przeglądarce.
Jak widzisz, wylosowane liczby to, mamy tutaj wszystkie te liczby z tablicy.
Natomiast, aby na samym końcu nie było tutaj przecinka po dziewiątce, to pokażę ci w jaki sposób sprawdzić
czy jesteśmy już podczas ostatniej iteracji.
To sobie stąd wytniemy i zrobimy tutaj instrukcję warunkową, która sprawdzi czy i nie jest równe
numbers.length - 1. Konkretnie możemy się odwołać do arrLength skoro sobie
to tutaj zapisaliśmy, nie musimy pobierać od nowa.
Wiesz, że arrLength, w przypadku takiej tablicy, jest to 6.
Będziemy tutaj mieli licznik na samym końcu na piątce, bo startowaliśmy od zera, a więc 6 - 1 zwróci
nam 5.
I tak możemy sprawdzić czy arrLength - 1 to będzie indeks ostatniego elementu tablicy.
Jeżeli i to będzie już 5, to wiemy, że jesteśmy przy ostatniej iteracji tej pętli, czyli tutaj sprawdzamy
z kolei warunek, jeżeli nie jesteśmy przy ostatniej iteracji, to chcemy do tekstu,
czyli plus równa się dodać przecinek oraz spacje.
A jeżeli będziemy już na ostatniej iteracji, czyli będziemy mieli pod i zapisaną liczbę 9, to nie chcemy
tego dodawać.
No i sprawdźmy, jak widzisz dokładnie w taki sposób to zadziałało.
Teraz pokażę ci w jaki sposób iterować po tablicach zagnieżdżonych w innych tablicach, więc przejdźmy niżej.
Troszkę miejsca tutaj zrobię i wstawię kolejną tablicę.
Jak widzisz, mamy tablicę, w której jest kilka innych tablic, a więc mamy tutaj pierwszy element, drugi
oraz trzeci.
Jest to tablica która ma Tomasz Kowalski i 23, a więc imię, nazwisko oraz wiek.
Możemy również taką strukturę spotkać i teraz pokażę ci jak potem możemy sterować. Wykomentuje to co mamy
wyżej do tego, że tutaj już wcześniej stworzyłem zmienną i,
a chcę jeszcze raz skorzystać z takiej nazwy więc sobie
to wykomentuje.
Stworzymy znowu pętlę for, var równą się 0.
Następnie I chciałbym, aby było mniejsze od arr.length.
Możemy się w ten sposób odwołać oraz i++.
W ten sposób będziemy mogli iterować po tej pierwszej tablicy, a więc po tej właśnie całości i pod i
będziemy mogli pobierać poszczególne elementy.
Więc wpiszmy sobie coś takiego console.log, DANE, zaraz ci pokaże dlaczego.
Zobaczysz ile razy nam się to wyświetli, 3 razy i będę chciał później wpisać jeszcze coś takiego jak console.log
i tutaj takie podkreślniki.
Na razie będzie nam to wyglądać następująco, dane, dane.
Dane.
Ale teraz będę chciał pomiędzy tym odwołać się do poszczególnych elementów tej tablicy. No i oczywiście
mógłbym tutaj wpisać console.log,
następnie odwołać się do arr, i,
czyli wiemy, że na początku zostanie nam zwrócony pierwszy element, czyli ta tablica.
I gdybym chciał wyświetlić np. imię to mógłbym się tutaj odwołać do 0.
To będzie imię.
Jeżeli wpisze 1, to będzie drugi element, czyli nazwisko i dwa to będzie trzeci.
Ale ja chciałbym tutaj iterować również po tej tablicy i wszystko po kolei wyświetlić.
Z tego powodu możemy bez problemu zagnieździć jedną pętlę for w drugiej pętli, więc tutaj wpiszemy kolejną
pętlę for.
Natomiast tutaj nie możemy napisać tej zmiennej, więc nazwiemy zmienną na przykład j,
znowu będzie to zero i teraz warunek to j musi być mniejsze od arr, i,
czyli odwołamy się do tej tablicy, w której aktualnie jesteśmy i następnie length.
Mam nadzieję że to łapiesz i tutaj
j++.
Teraz iterujemy sobie
po tej tablicy, czyli tak naprawdę gdybyśmy zatrzymali się w tej pętli, która przeszukuje wszystkie te
elementy i mamy kolejną pętlę, która operuje na takim jednym elemencie.
Kiedy ona zakończy, ten console.log się wykona przechodzimy do kolejnej iteracji tej dużej pętli, która pobierze
kolejny element i kolejna pętla wewnątrz się wykona.
No i teraz jeżeli będziemy chcieli wszystkie dane wyświetlić z tej wewnętrznej tablicy to możemy wpisać
console.log, arr, i,
czyli wiemy, że odwołujemy się do tej pierwszej dużej tablicy.
Kiedy podajemy tutaj i to zostanie na początku zwrócona tam mniejsza tablica.
I teraz możemy podać j, które na początku będzie miało 0, a więc Tomasz.
Potem będzie miało 1, a więc Kowalski, potem 2, a więc 23.
Mam nadzieję, że dobrze to rozumiesz.
I teraz jeżeli sobie to wpiszę, to jak widzisz wyświetliliśmy sobie dane wszystkich użytkowników zapisanych w
tej tabeli.
Mamy tutaj dane, czyli to co jest w tej pętli, która jest wyżej, wyświetlane, czyli raz i później wszystko
wyświetlamy z tablicy, która jest wewnątrz, a więc tutaj będą trzy obroty. Pierwszy, drugi oraz trzeci i znowu
jednokrotnie wyświetlamy to, co jest poza tą pętlą, czyli console.log z tymi kreskami. Przechodzimy do kolejnej
iteracji i wyświetlamy kolejne dane.
W ten sposób możemy iterować po tablicach, które są zagnieżdżone w innych tablicach.
Może ten kod wydawać się zagmatwany, ale jeżeli na spokojnie przejrzysz gdzie, co zostaje podstawione.
W jaki sposób to działa.
Jestem pewien, że to dobrze zrozumiesz.
Kod
Używanie pętli na tablicach · 1 min
var numbers = [2, 3, 17, 32, 28, 9],
text = "Wylosowane liczby to: ";
var arrLength = numbers.length;
// for(var i = 0; i < arrLength; i++) {
// text += numbers[i];
// if(i !== arrLength - 1) {
// text += ", ";
// }
// }
console.log(text);
var arr = [["Tomasz", "Kowalski", 23], ["Maria", "Nowak", 30], ["Jacek", "Zieliński", 38]];
for(var i = 0; i < arr.length; i++) {
console.log("DANE");
for(var j = 0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
console.log("-------------");
}