JavaScript: Tworzenie tablic jedno i wielowymiarowych
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.
Już mniej więcej czym są tablice, a w tej lekcji pokażę ci, jak dokładnie tablice tworzyć i jak z nimi
pracować
W kodzie JavaScript. Przechodzimy zatem od razu do pliku
scripts.js
i będę chciał utworzyć nową tablicę, która będzie przechowywać liczby. Utworzymy zatem zmienną abyśmy
gdzieś to mogli przechowywać.
Zmienną nazwę numbers i przypiszemy tutaj równa się i teraz jak najprościej w języku JavaScript utworzyć
tablicę.
Mianowicie wpisujemy parę nawiasów kwadratowych.
W tym momencie mamy poprawny kod JavaScript i utworzyliśmy pustą tablicę. Do niej odpowiednimi metodami,
o których w kolejnych lekcjach jeszcze będę mówił.
Możemy dodawać elementy, te elementy modyfikować czy usuwać.
Natomiast chciałbym od razu tutaj wpisać kilka różnych elementów.
Skoro nazwaliśmy zmienną numbers, to chciałbym tutaj przechowywać liczbę. Wpiszę tutaj zatem 1 i
również to jest poprawny kod.
Natomiast, jeżeli chcemy podać więcej elementów i tutaj są to właśnie te komórki tabeli, które pokazywałem
ci w lekcji poprzedniej, to robimy to po przecinku, a więc 1 przecinek, wpiszmy sobie 3, 4, 5.
Tutaj mamy jakby osobne komórki tabeli. Dokładnie tablice i ta tablica zawiera cztery elementy.
Pierwsza komórka, druga, trzecia i czwarta to są różne elementy przechowywane w jednym miejscu w tablicy
i teraz widzisz, że działa to troszkę podobnie jak obiekty, bo w przypadku obiektów również mogliśmy jakby
pod jedną zmienną tak jak tutaj mamy numbers przechowywać różne wartości, ale musieliśmy im nadawać nazwy
np. firstName Jan.
Tutaj nie musimy nadawać żadnych nazw, możemy te wartości przechowywać i są one po prostu indeksowane,
a więc tutaj to jest 0, 1, 2 oraz 3.
Skoro mamy taką tablicę, to teraz spróbujmy w konsoli coś z niej wyświetlić.
Odwołamy się rzecz jasna do numbers.
I teraz tak jak ci pokazywałem w poprzedniej lekcji poprzez nawiasy kwadratowe, podajemy indeks komórki,
którą chcielibyśmy wyświetlić.
Powiedzmy, że chce odwołać się do liczby 4, która tutaj została zapisana, a więc indeks 0, 1, 2.
Wpiszę tutaj 2, czyli podam ten indeks.
W efekcie jest to trzeci element w tabeli i teraz, jeżeli sobie to wyświetlimy, to mamy tutaj wartość
4, z tej tablicy właśnie pobrano.
Teraz pokażę ci kolejną bardzo ważną rzecz, z której będziesz często korzystał.
Mianowicie właściwość tej tablicy, bo wspominałem ci, że tablica jest obiektem, a więc ma ona właściwości
oraz metody i chcemy odwołać się do jednej z właściwości, która pozwoli nam stwierdzić ile elementów
tej tablicy się znajduje.
Tutaj widzimy, że są to cztery elementy.
Zrobimy sobie zatem console.log, znowu numbers i do właściwości obiektów już wiesz odwołujemy się po kropce.
Dlatego wpiszemy tutaj length.
Tak nazywa się ta właściwość.
Oczywiście mógłbyś do niej się odwołać tak jak w przypadku obiektów, również w ten sposób.
I tutaj podać string. Natomiast nie jest to dobrą praktyką i tak nie powinieneś z tego korzystać.
Chciałbym ci tylko pokazać, że jest to obiekt i można tak w ten sposób to zapisać.
Natomiast numbers.length, czyli długość powinna zwrócić w konsoli
4. Odświeżmy i mamy tutaj 4.
Ta czwórka jest to indeks, który pobraliśmy wcześniej, a ta czwórka jest to length,
czyli długość tablicy.
Teraz chciałbym ci pokazać, że w takiej tablicy możemy przechowywać jeszcze różne inne elementy. Dlatego otworzymy
tablicę, którą nazwiemy things, czyli rzeczy i przypiszemy tutaj znowu taki oto zapis, więc po prostu jest to
zapis tabeli i teraz jako pierwszą rzecz, będę chciał sobie podać obiekt.
Obiekty tak tworzymy.
Już to wiesz i w tym obiekcie wpiszę firstName i będzie to na przykład Anna i nic więcej w tym obiekcie
się znajdować nie będzie.
Po przecinku podaje kolejny element w tablicy. Dokładnie tak jak miało to miejsce tutaj wyżej.
Jeszcze warto, abyś wiedział że oczywiście jeżeli taki obiekt gdzieś wcześniej zapiszesz sobie w zmiennej, to
tu możesz podać po prostu tą zmienną i również w tej tablicy ten element zostanie umieszczony,
a konkretnie do niego referencja.
Tak jak to miało miejsce w przypadku przypisywania obiektów do zmiennych. Jako drugi element
podamy tutaj 2, a jako trzeci 2 + 8.
Myślę, że na tym etapie jest jasne, ale chciałem ci uzmysłowić, że to wszystko zostanie poprawnie zapisane
w tabeli, z odpowiednią kolejnością, a więc tutaj najpierw 2 zostanie dodane do 8 i 10 zostanie
tutaj zapisana. Tutaj bezpośrednio 2, a tutaj cały obiekt który utworzyliśmy.
Teraz jeśli to zapisze i przejdziemy do przeglądarki to będę mógł się odwołać do zmiennej things,
w ten sposób i co widzimy tutaj jest to tablica.
Pierwszy element jest to Object, potem 2, a potem 10.
I teraz gdybym chciał się odwołać do tego obiektu, to mogę sobie tutaj wpisać things, 0, bo chcemy się odwołać
do pierwszego indeksu tej tablicy, czyli pierwszy jest zerowy. Zapamiętaj i tutaj nam zostanie zwrócony
ten obiekt i od tego momentu operujemy sobie na tym zapisie dokładnie tak jak gdybyśmy już byli przy tym obiekcie,
więc jeżeli chce odczytać firstName, to mogę po prostu napisać kropka firstName.
No i widzisz, że jest to Anna.
Mogę bez problemu to zmienić na
Patryk.
Nie ma to znaczenia, jeżeli teraz odwołam się do things, to oczywiście w tym obiekcie zostało to bez problemu
zmienione. Dlatego, że things, 0 kieruje po prostu na referencje do tego obiektu i później możemy z nim robić
dowolne rzeczy. Moglibyśmy stworzyć nową zmienną i jej przypisali byśmy things, 0 i w tejże zmiennej przechowywali
byśmy referencje do tego obiektu.
Ostatnia rzecz jaką chciałbym Ci pokazać, jest to tworzenie tablic wielowymiarowych. Dlatego stworzymy
kolejną zmienną, którą nazwę arrays, jak tablice i stworzymy tutaj pierwszą tablicę w ten sposób, a jako
jej pierwszy element stworzę kolejną tablicę.
Wygląda to może dziwnie, ale jeżeli tutaj wpiszę 2, 3, 4 to pierwszy element tej tablicy zewnętrznej jest to taka
nowa tablica. Po przecinku podaje sobie kolejne elementy.
No i stwórzmy tutaj jakąś jeszcze inną tablicę, która będzie mieć 4, 2, 1 i np. jeszcze
jedną tablicę wewnątrz, która z kolei będzie przechowywać jeden element i będzie to string Jan.
Jak widzisz, mamy tutaj trzy różne tablice. To jest tablica zewnętrzna,
przechowuje ona w środku jeden element oraz drugi element, a ta tablica przechowuje jeden, dwa, trzy, cztery
dodatkowe elementy.
I teraz, jak się do tego odwołać, bo jeżeli odświeżę. Wpiszemy sobie arrays, to w ten sposób nam to konsola przeglądarki
wyświetla.
I możemy sobie zerknąć co tam się znajduje.
Ale gdybym chciał się do konkretnego elementu odwołać np. do tej 2, to musimy się najpierw odwołać
do arrays. Następnie do 0, a więc pobierzemy pierwszy element tej tablicy, a pierwszym elementem jest taka
tablica. Wcisnę Enter, zobaczmy. Jak widzisz ta tablica została zwrócona, więc jeżeli chce się teraz odwołać
np. do czwórki, to w tej tablicy pamiętasz 0, 1, 2, czyli jeżeli ta tablica jest zwracana poprzez arrays
0 to teraz znowu mogę podać takie nawiasy i wpisać sobie 2, czyli w tym momencie odwołuję się do indeksu
drugiego, tej zwróconej tablicy, czyli 0, 1, 2. Czwórka powinna zostać zwrócona.
I tak też się dzieje.
Spróbujmy teraz odwołać się do słowa Jan. Wiemy, że w tej pierwszej tablicy,
drugim elementem jest ta tablica, czyli drugi element to jest indeks i jeden. Wpiszmy sobie znowu arrays jeden
i teraz wewnątrz tej tablicy będziemy chcieli się odwołać do ostatniego elementu, czyli mamy tutaj raz,
dwa, trzy, cztery.
Ale pamiętaj, że jest to od 0, czyli 0, 1, 2, 3. Trójka powinna nam zwrócić Jan. Zwraca nam tablicę, a w
tej tablicy, to co tutaj widzisz, czyli string, jest to wartość pod indeksem zerowym, czyli tutaj możemy sobie to zapisać
w ten sposób. Mam nadzieję, że to łapiesz i teraz odwołamy się konkretnie do wartości
Jan, bo gdybym to zrobił tak jak tutaj i użył operatora np. typeof, to będziemy mieli object, bo tak jest
reprezentowana tablica.
Natomiast, jeżeli dopisze tutaj jeszcze 0, to w tym momencie jest nam już zwracany ten string
Jan, bez żadnego oplatania tego taką tablicą, czyli odwołaliśmy się do tej zagnieżdżonej wartości. Tyle zapamiętaj
z tej lekcji, że możemy w jednej tablicy przechowywać inne tablice i dowolnie je sobie zagnieżdżać.
A jeżeli chcemy się do nich odwołać, to musimy po prostu dokładnie na to spojrzeć i odwołując się po
kolei do kolejnych tablic.
Robimy to w taki oto sposób.
Kod
Tworzenie tablic jedno i wielowymiarowych · 1 min
var numbers = [1, 3, 4, 5];
console.log(numbers[2]);
console.log(numbers.length);
var things = [{firstName: "Anna"}, 2, 2 + 8];
var arrays = [[2, 3, 4], [4, 2, 1, ["Jan"]]];