JavaScript: Usuwanie elementów 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.
Wiesz już jak dodawać elementy do tablicy.
Dlatego teraz pokażę ci, jak te elementy usuwać.
Chociaż przyznam szczerze, że niezbyt często jest to zadanie nam potrzebne, aby elementy z tablicy usuwać.
Niemniej jednak jest to możliwe i teraz pokażę ci, jak to zrobić.
Przejdziemy do kodu i szybko utworze nową tablicę, która będzie przechowywała kilka imion i teraz wyświetlimy sobie
w konsoli długość tej tablicy. Już wiesz, że jest to właściwość tego obiektu, która nazywa się length.
W naszym przypadku powinno to być 4.
Przechodzimy tutaj. Odświeżam.
Jak widzisz, mamy tutaj 4.
Dlatego, że właśnie length, jest to własnie 4 elementy w tej tablicy i teraz za pomocą właściwości length możemy również
usuwać elementy tablicy, czego nie robimy również zbyt często, ale jest to możliwe.
Zobacz, co stanie się jeżeli wpisze arr.length i przypisze 2.
Przy okazji jeszcze w tym kursie nie wspominałem ci o tym, że pewne właściwości obiektów, które są dla
nas już wcześniej zdefiniowane w języku JavaScript, takie jak np. length mogą być tylko do odczytu, a więc
read only.
Oznacza to tylko tyle, że możemy z nich skorzystać ale nie możemy zmieniać ich wartości.
Jeżeli chodzi o właściwość tablic length jest to właściwość nie tylko read only, lecz dlatego, że możemy do
niej wartości przypisywać.
I teraz właśnie, wiedząc, że ta tablica ma arr.length równa 4.
Przepisałem tutaj dwójkę.
I co to oznacza? Odświeżmy tutaj stronę.
I teraz mamy tutaj znowu 4, z tego wcześniejszego console.log,
ale w piszmy arr i zobacz co się stało.
Otóż tablica została przycięta do dwóch elementów.
Wcześniej miała 4 elementy, tak jak możesz zobaczyć, a teraz tylko dwa.
Z tego powodu że pisaliśmy arr.length właśnie 2, czyli te dwa elementy z końca zostały usunięte.
Możesz się zatem domyślić, że gdybyśmy chcieli wyczyścić całą tablicę, to możemy przypisać arr.length 0.
Jest to zadanie, z którego od czasu do czasu będziemy korzystać.
Kolejną możliwością usunięcia elementu z tablicy jest skorzystanie z operatora delete.
Dlatego to może sobie wykomentuje, abyśmy nadal mieli cztery elementy i pokażę ci teraz, że możemy skorzystać z
delete.
Tak jak w przypadku właściwości obiektów, wpiszę delete i teraz wpiszemy arr, na przykład 2.
Pamiętasz, że 2, to będzie trzeci element 0, 1, 2, czyli Jacek powinien zostać usunięty.
Sprawdźmy to sobie i teraz wpisze arr.
No i jak widzisz, Jacek nie zostało tak naprawdę usunięty, ale został zastąpiony undefined, czyli taką
prymitywną wartością. Nie ma do końca możliwości w ten sposób, czyli operatorem delete,
aby usunąć ten element, a wszystkie elementy przesunąć tutaj w lewo. Tak nie możemy tego zrobić.
Przy okazji jeszcze pokażę ci jedną rzecz. Mianowicie pokazałem ci, że jeżeli przypiszemy arr.length równa
się 2, to przytniemy tą tablicę, ale co stanie się jeżeli przypiszemy arr.length równa się np. 10.
Myślę, że już się domyślasz.
Sprawdźmy teraz arr.
No i będziemy tutaj mieli, jak widzisz, dodane pozostałe elementy, jako wartości undefined.
Podobnie jak pokazywałem ci, kiedy pisaliśmy do tablicy np. pod indeksem dziesiątym jakąś wartość, a nie
mieliśmy wcześniej
dziewięciu pozostałych indeksów.
Są jeszcze trzy sposoby na usuwanie elementów z tablicy, które teraz chce ci pokazać. Tutaj sobie,
może to znowu wykomentujemy. Odświeżymy stronę.
Będziemy mieli tutaj całą tablicę i pokażę ci teraz kolejną rzecz. Mianowicie jest to metoda tablic,
która nazywa się pop.
Jeżeli to wpiszemy w ten sposób, to mówimy, że chcemy z tej tablicy czyli arr, która jest tej zmiennej
usunąć ostatni element. Będzie to w tym przypadku Mariusz.
Sprawdzimy to.
Odświeżyłem i wpiszmy arr.
Jak widzisz ostatni element zniknął.
Co jednak jest ważne, abyś sobie zapamiętał.
To ta metoda zwraca nam ten ostatni element, czyli modyfikuje tablicę, na której została wykonana, ale
ten element nam zwraca, więc gdybym utworzył zmienną last równa się arr.pop i odświeżę raz jeszcze.
To teraz pod zmienną last będziemy mieli właśnie element Mariusz i czasami jest to dla nas przydatne, kiedy
chcemy jakoś zmodyfikować ostatni element.
Natomiast pamiętaj, że on z tej tablicy zostanie wyrzucony.
I teraz kolejna metoda jest to array shift.
Możemy od razu utworzyć sobie zmienną, bo ta metoda jest odwrotnością pop, a więc zwraca nam i usuwa pierwszy
element, czyli mogę napisać first równa się arr.shift.
Pamiętasz, że unshift dodawało nam na początku nowy element, a shift
ten element usuwa i zwraca.
Czyli jeżeli teraz sobie to zapiszemy to ta metoda usunie nam Mariusza, a ta metoda usunie nam Tomka,
czyli powinniśmy w tablicy mieć Ania oraz Jacek. Odświeżam i zobaczmy czy faktycznie tak się stanie.
Ania i Jacek. Natomiast w zmiennej first
mamy teraz Tomka, czyli tak jakbyśmy się tego spodziewali.
Jest to pierwszy element tablicy i ostatnia możliwość usuwania elementów z tablicy, w której myślę, że
najczęściej będziesz korzystał jeżeli będzie to dla ciebie potrzebne.
Jest to metoda która nazywa się splice.
Skorzystamy z niej poprzez arr.spilice.
I tutaj, co jest ważne, jak ta metoda działa.
Otóż, podajemy jako pierwszy argument liczbę całkowitą, czyli w tym przypadku po prostu jakiś number, który
reprezentuje indeks, od którego chcemy zacząć usuwanie z tej tablicy.
No i co to oznacza.
Jeżeli chcielibyśmy zacząć usuwanie od Ani, to wpiszemy indeks 1, bo pamiętasz 0, 1, czyli wpisuje sobie
1.
Teraz stawiam przecinek i podaje drugi parametr do tej metody i będzie to ilość elementów, które chcemy
usunąć.
Jeżeli wpisze 1, to oznacza tyle, że chcemy zacząć od tego indeksu i usunąć jeden element, a więc tylko
Anie sobie z tej tablicy usuniemy. Sprawdźmy, czy nam to zadziała.
Może wcześniej tę metodę wykomentuje, abyśmy mieli cztery elementy tablicy i teraz piszemy arr i Jak widzisz
wszystko działa, czyli od tego zaczęliśmy.
I tylko Anie usunęliśmy. Jeżeli bym sobie tutaj wpisał arr.spilice(1) i nie podał drugiego parametru to do końca
wszystkie elementy usuniemy, a więc w tablicy powinien pozostać tylko Tomek.
Sprawdźmy to i dokładnie tak się też stało.
Tak jak wspomniałem, podajemy indeks, od którego chcemy zacząć.
Jeżeli byśmy chcieli od początku to podajemy po prostu 0.
A tutaj ilość elementów do usunięcia jest tutaj również możliwość usuwania od końca, więc gdybyśmy chcieli
zacząć np. od Jacka i usunąć Jacka oraz Mariusza to możemy tutaj wpisać minus dwa. Minus jeden będzie
oznaczało ostatni element minus dwa to będzie przedostatni element.
I tutaj znowu podajemy ilość elementów, czyli zaczynamy tutaj, na Jacku, to jest minus 2 i chcemy usunąć
dwa elementy, czyli w tablicy pozostanie Tomek oraz Ania. Tak powinno to zadziałać. Sprawdzimy. No i dokładnie
tak też się dzieje.
Co jest ważne to do metody splie możemy podać jeszcze kolejne parametry, czyli od trzeciego parametru,
które tutaj podamy będą to elementy, które chcemy dodać do tablicy, więc gdybym tutaj wpisał na przykład
Piotr i tutaj Andrzej to te elementy zostaną do tablicy dodane zamiast Jacka i Mariusza. Odświeżam. Sprawdźmy sobie
raz jeszcze.
I jak widzisz dokładnie tak się stało.
No i ostatnia rzecz, która jest istotna w kontekście arr.splice, to jest fakt, że te elementy podobnie
jak w przypadku shift czy pop zostają zwrócone.
Czyli jeżeli tutaj bym sobie napisał lastTwo, czyli dwa ostatnie, to powinniśmy w tej zmiennej mieć Jacka
oraz Mariusza.
I zobaczymy jak to zadziała.
Odwołamy się do last'u.
No jak widzisz mamy tablicę, w której mamy Jacek oraz Mariusz, tak jak byśmy się tego mogli spodziewać,
gdybyśmy tutaj chcieli usunąć tylko jeden element.
Zobaczmy. Odwołamy się do tej zmiany lastTwo.
Mamy jeden element, ale również jest on w tablicy. Cofnę to może do dwóch elementów, tak jak mieliśmy
wcześniej.
I na tym tę lekcję możemy zakończyć.
Przedstawiłem tutaj metody, które pozwalają usuwać elementy z tablicy i najczęściej będziesz korzystał
z zerowania tablicy poprzez arr.length równa się zero.
A także z metody arr.splice, chociaż często korzystamy również z metody arr, kiedy ostatni element
tablicy nas interesuje.
Kod
Usuwanie elementów tablicy · 1 min
var arr = ["Tomek", "Ania", "Jacek", "Mariusz"];
// console.log(arr.length);
// arr.length = 2;
// delete arr[2];
// var last = arr.pop();
// var first = arr.shift();
var lastTwo = arr.splice(-2, 2, "Piotr", "Andrzej");