JavaScript: Dodawanie elementów do tablicy
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.
Zobaczmy teraz, w jaki sposób możemy dodawać element do tablicy. W sposób inny niż pokazałem ci w lekcji
poprzedniej, a mianowicie tam wpisywaliśmy te elementy do tablicy od razu, kiedy była ona tworzona.
Przechodzimy do kodu i utworzę zmienną arr, jak array.
I będzie to pusta tablica.
Jak już wiesz, jest to poprawny zapis w JavaScript'cie.
Jest to tablica, która nie ma żadnych elementów.
I teraz.
Gdybym chciał do tej tablicy dodać jakiś element to będę musiał podać indeks, pod którym chciałbym taki
element dodać.
Pokazywałem ci już, że Jeżeli wpiszemy np. arr, 0 to odwołamy się do pierwszego indeksu o takiej tablicy
i pobierzemy jej pierwszy element.
Skoro ta tablica nie ma żadnych elementów, to gdybyśmy teraz chcieli zobaczyć co tam jest.
Zostałaby nam zwrócona wartość undefined.
Natomiast jeżeli jako pierwszy element tablicy chciałbym coś dodać, to możesz się domyślić, że jeżeli
tutaj wpisze równa się, to mogę tutaj przypisać dowolną konstrukcję jaka jest dostępna. Wpiszmy
zatem Kasia i spróbujemy taką tablicę wyświetlić sobie w konsoli poprzez console.log, arr.
Przejdźmy tutaj.
Odświeżymy.
No i jak widzisz, mamy tablicę, która ma jeden element
i jest to string Kasia, który przypisaliśmy. Przypiszmy
tutaj od razu jeszcze może kopiując to drugi element.
Chciałbym, aby był on pierwszym indeksem, czyli jako drugi, bo jeżeli zapisze to jako 0 to oczywiście nadpiszę
wartość którą linijkę wyżej przypisałeł Wpiszmy sobie Tomek. Zapisuje i teraz oczywiście będziemy tutaj mieli
dwa elementy.
Gdybym chciał się odwołać do długości tej tablicy, o czym już ci mówiłem to możemy skorzystać z właściwości
length.
Jeżeli tutaj wpisze array.length. W ten sposób, to zobaczymy, że mamy tam dwa elementy.
Natomiast teraz pokażę ci rzecz inną, bo skoro tutaj przypisujemy elementy podając ich indeks, to co stanie
się jeżeli odwołamy się do arr i powiemy że chcemy po dziesiątym indeksem przypisać sobie jakąś inną wartość
np. 33.
Nie mamy indeksów drugiego, trzeciego, czwartego, piątego, szóstego itd.
Aż do dziesięciu.
Teraz jak to będzie wyglądać? Pozostawię sobie tutaj arr.length.
Wiesz, że przed momentem było to 2, bo mieliśmy dwa elementy.
Teraz teoretycznie powinno to być 3, ale zobaczymy.
Niestety jest to 11.
I teraz mógłbyś zapytać, co stało się z tymi wszystkimi indeksami, które są pomiędzy 1 a 10.
Możemy to zobaczyć w bardzo prosty sposób mianowicie odwołując się do arr i teraz,
Jak to wygląda?
Jak widzisz, mamy tutaj w konsoli przeglądarki pokazane undefined
razy 8.
W skrócie jest to tutaj jakby zapisane.
Jest to taka graficzna reprezentacja, ale oznacza to tylko tyle, że ta tablica została uzupełniona takimi
wartościami undefined.
Dokładnie w taki sposób jak gdybyśmy napisali np. arr, 2, równa się undefined.
Czyli w ten sposób. Czy jest to jakiś duży problem?
Nie, dlatego że zazwyczaj nie będziemy w ten sposób się odwoływać i przypisywać jakiegoś dziwnego indeksu
jakiejś wartości.
Zazwyczaj do tablicy będziemy dodawać sobie wartości po prostu dodając je na końcu.
I teraz jakbyśmy to mogli zrobić?
Wiesz, że arr.length zwraca nam długość tablicy.
Ja może to usunę, tak abyś był pewien, że na tym etapie array.length jest to 2.
Czyli, jeżeli chciałbym dodać element na końcu, to chcę dodać w tym przypadku do indeksu 2. 0 jest to pierwsze
1 jest to drugi, a 2 będzie to trzeci.
Skoro arr.length zwraca nam 2, to moglibyśmy sobie tutaj, bez problemu napisać arr i podać tutaj arr.length.
Tutaj zostanie wstawiona 2 i przypiszemy sobie jakąś dowolną wartość.
Niech to będzie Piotrek, powiedzmy, i to oznacza, że tę wartość przypiszemy w kolejności, czyli będzie to 0, 1
i tutaj 2.
Zobaczmy sobie.
No i jak widzisz, teraz mamy tutaj 3. Działa nam w poprawny sposób, dlatego że zostało tutaj zwrócone
poprzez console.log, arr.length mamy trzy elementy.
I gdybym teraz odwołał się do arr, to oczywiście wygląda to tak, jak można się tego spodziewać.
Natomiast to jeszcze nie jest taki sposób, w jaki zazwyczaj będziesz dodawał sobie na koniec tablicy
jakieś elementy. Aby dodać jakiś element na koniec tablicy posłużymy się metodą push, która jest na tablicach
dostępna.
Ja ci już mówiłem, że tablice są obiektami w języku JavaScript, a więc mają metody i właściwości.
Właściwością jest na przykład length, którą możemy, jak widzisz, odczytywać, również możemy ją przypisywać,
co jeszcze ci pokaże w jednej z kolejnych lekcji, ale mamy również taką metodę. Jedną z wielu, która nazywa
się push.
Jeżeli odwołamy się do metody po kropce, w ten sposób, arr.push, to będziemy chcieli dodać na koniec tablicy
dowolny element.
I tu oczywiście może być zmienna, która przechowuje jakiś element.
To może być string, cokolwiek.
Jeżeli wpiszemy teraz np. Monika, to będziemy chcieli taki element, czyli string dodać na koniec tej tablicy.
Odświeżam teraz tutaj jak widzisz length,
jest to 4.
Jeżeli odwołam się do arr, to mamy tutaj na końcu element Monika.
I teraz ostatnia rzecz, którą chciałbym ci pokazać.
Jest to dodawanie elementu na samym początku, bo gdybym teraz wpisał arr, 0.
I chciał tutaj coś innego przypisać i napiszemy tutaj np. Ania.
To nie dodamy elementu na początek tablicy, ale nadpiszemy ten, który już tutaj się znajduje.
Jeżeli teraz wpisze arr widzisz, że dokładnie tak się stało.
Więc gdybyśmy chcieli dodać element na początek tablicy, to nie możemy tego zrobić za pomocą indeksów,
bo na koniec mogliśmy wpisać tak jak ci pokazałem właśnie arr.length i coś sobie dodać ale na początek już tak nie możemy
zrobić.
Dlatego skorzystamy z kolejnej metody, która nazywa się unsshift.arr.unshift.
Jest to metoda, która działa dokładnie tak samo jak push, ale dodaje element na początku tablicy. Wszystkie
inne przesuwając w prawo.
Więc jeżeli teraz tutaj dodamy na przykład Patryk zapiszę to tutaj. Odświeżę i odwołamy się do
arr,
to, jak widzisz, został tutaj taki element dodany, a każdy kolejny został przesunięty,
można powiedzieć w prawo, więc jeżeli teraz byśmy chcieli do Kasia, się odwołać, to musimy podać arr
1, a nie 0, tak jak to było wcześniej.
Dlatego, że tutaj to w ten sposób przypisałem.
Kod
Dodawanie elementów do tablicy · 1 min
var arr = [];
arr[0] = "Kasia";
arr[1] = "Tomek";
arr[arr.length] = "Piotrek";
arr.push("Monika");
arr.unshift("Patryk");
console.log(arr.length);