JavaScript: Sortowanie 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.
Pozostajemy nadal w temacie tablic i teraz powiem ci o kolejnej bardzo ważnej koncepcji. Mianowicie o
sortowaniu elementów tablicy.
Przejdziemy od razu do kodu i będę chciał tutaj utworzyć dwie zmienne, które będą przechowywać referencje
do tablic.
Wygląda to w następujący sposób arr oraz
arr2.
Tutaj mamy same liczby, a tutaj mamy stringi,
czyli po prostu ciągi znaków.
I teraz będziemy chcieli tę tablicę.
W jakiś sposób posortować, konkretnie chcielibyśmy tablicę pierwszą, czyli arr posortować tutaj według
numerów, czyli rosnąco, według liczb od 1 w górę, tak jak to tutaj mamy, a tutaj chcielibyśmy to zrobić
alfabetycznie. Przejdziemy niżej i pokażę ci kolejną bardzo ważną metodę tablicy, która nazywa się array
sort. Natomiast najpierw będę chciał poprzez console.log wyświetlić sobie pierwszą tablicę.
Przejdźmy tutaj. Odświeżmy i będziemy tę tablicę mogli tutaj podejrzeć.
I teraz korzystamy z metody, o której wspomniałem, a więc arr sort. Tyle wystarczy, aby tablice posortować.
Natomiast zobacz w jaki sposób ona zostanie posortowana.
W zasadzie, najlepiej abyśmy sobie zrobili znowu console.log.
Ta metoda oczywiście modyfikuje tablicę, na której została wykonana, bo mamy czasami również takie metody
obiektów, które nam biorą dane z tego obiektu i zwracają nam nowe dane, czyli mogłyby posortować tablice
i zwrócić nową posortowane tablicę.
Tutaj jednak tak to nie działa.
Tutaj działa to tak jak mógłby się tego spodziewać.
A więc ta tablica oryginalna poprzez tą metodę zostanie zmodyfikowana. Dlatego teraz po posortowaniu zobaczymy
jak to się będzie prezentować.
No jak możesz zobaczyć, oryginalnie wyglądało to tak jak tutaj u góry.
A po sortowaniu wygląda to następująco.
Natomiast, jak widzisz, nie jest to to czego byśmy oczekiwali.
Oczekiwalibyśmy 1, 1 a następnie 2.
Natomiast tutaj mamy 1, 1, następnie 1, 8 itd.
A więc jest to posortowane, jak gdyby to były stringi, jak gdyby to alfabetycznie było sortowane.
Teraz pokażę ci, jak możemy zmodyfikować metodę sort w taki sposób, abyśmy mogli wpływać na to jak będą
te wyniki tutaj sortowane.
Dlatego przejdźmy tutaj i w tej metodzie sort przekażemy jako parametr funkcję.
Jeżeli jeszcze nie do końca rozumiesz jak działają funkcje, to polecam ci po rozdziale o funkcjach wrócić
do tej lekcji.
Wpisujemy tutaj funkcje albo oczywiście możemy przekazać jej nazwę czy też możemy przekazać zmienną,
która przechowuje referencje do takiej funkcji, nie ma to znaczenia. Natomiast ta funkcja będzie przyjmowała
dwa parametry i jeżeli już wiesz jak działają funkcje to wiesz, że te parametry możemy dowolnie sobie nazwać,
tak jak zmienne.
Natomiast ja sobie je nazwę a oraz b.
I często tak jest to nazywane tutaj.
Ciało funkcji, czyli metody sort przekazujemy taką właśnie funkcję, która powinna nam to wszystko posortować.
Jeżeli oczywiście dobrze ją tutaj uzupełnimy. Funkcja przyjmuje dwa parametry i ja sobie je oznaczyłem
jako a oraz b.
I teraz co to będzie a i co to będzie b?
Wyobraź sobie, że sortowanie całej tej tablicy będzie trochę podobne do pętli i Aa oraz b będą to kolejne
elementy tej tablicy, więc na samym początku a, to będzie piątka, z tej tablicy, b to będzie ósemka.
Czyli możemy tutaj porównać 5 oraz 8 i w zależności od tego, co zwróci ta funkcja, tak zostanie to posortowane.
I teraz na szybko, abyś dobrze zrozumiał o co chodzi.
Jeżeli z tej funkcji zwrócimy poprzez return.
W ten sposób -1, to oznacza, że chcemy, aby element był przed elementem b.
W tym przypadku mamy 5 i 8. 5 jest mniejsza od 8, więc chcemy, aby było przed elementem 8.
Czyli zwracamy z funkcji minus jeden.
Jeżeli zwrócimy z funkcji 0, to oznacza, że te elementy są takie same i nie powinny być przestawione
miejscami. Na przykład jedynka i jedynka.
Gdyby a to było 1 oraz b to było 1.
Natomiast, jeżeli zwrócimy 1, to oznacza tylko tyle, że b powinno być przed a.
Czyli gdybyśmy tutaj mieli na przykład a oraz b, to b chcemy mieć przed a. Tutaj pokazałem ci -1,
0 oraz 1.
Tak naprawdę nie musi to być -1, wystarczy, że jest to jakakolwiek wartość negatywna, czyli minusowa.
0 to oczywiście 0, a jeżeli chodzi o 1, to musi to być jakakolwiek wartość dodatnia.
Wtedy te elementy zostaną zamienione miejscami.
No i teraz najprościej jak moglibyśmy to zrobić.
Napiszmy tutaj if a jest mniejsza od b, to wówczas chcemy zwrócić -1.
Już do tego wrócę,
abyś dobrze zrozumiał. Jeżeli A to będzie 5, b, to będzie 8, to chcemy sprawdzić czy 5 jest mniejsza od
8.
Tak.
Czyli powinno być przed ósemką. Zwracany -1.
Wtedy a będzie przed b.
Teraz możemy napisać sobie elsye if, w ten sposób, a jest większe od b.
I tak będzie np. w tym przypadku, kiedy przy kolejnej iteracji to będzie a to będzie b.
Czyli jeżeli 8 jest większa od 1, zgadza się, to chcemy zwrócić 1, a więc wkleimy sobie tutaj return 1.
No i jeżeli te elementy są równe, czyli w przeciwnym wypadku, chcemy zwrócić 0.
No i teraz możemy sobie sprawdzić czy to faktycznie dobry sposób zadziała.
Odświeżam.
No i zobacz teraz te elementy zostały poprawnie posortowane.
Jeżeli mamy np. 1, 1, to one są obok siebie i potem 2, 4, 5 itd.
Wszystko działa poprawnie. Natomiast ten zapis może być dużo krótszy, dlatego że wspominałem ci, iż nie
musimy zwracać -1, 3, 1, ale muszą to być wartości negatywne, pozytywne lub po prostu zero.
Dlatego zrobimy to krócej. Zapiszemy sobie tu return a minus b.
Możesz się domyślić, że a - b.
Wróćmy jeszcze do przykładu np. 5 - 8, będzie to -3, a więc z tej funkcji zostanie zwrócone
-3.
Jeżeli zwrócimy wartość negatywną, to znaczy, że a powinno być przed b.
Jeżeli mamy 8 - 1, czyli a -b, chcemy zwrócić, to będzie 7, wartość pozytywna.
No i wszystko się zgadza, dokładnie tak, jak to zrobiliśmy tutaj.
Więc ten kod mogę wykomentować i wystarczy, że w tej funkcji będzie return a minus b. Sprawdzimy czy efekt
jest ten sam.
Po odświeżeniu możesz zobaczyć, że nic się tutaj nie zmienia, a kod jest dużo krótszy.
Kiedy jednak będziemy korzystać z takichif'ów jak tutaj.
Otóż możemy w takiej funkcji sort porównywać najróżniejsze właściwości. Gdybyśmy w tej tablicy mieli
różne obiekty, a nie np. number czy string, tak jak tutaj, to możemy bez problemu, jeżeli tutaj będzie a
i b, to będzie jakiś obiekt. Odwołać się do a kropka jakaś właściwość obiektu i porównywać te właściwości
obiektu i na tej podstawie zwracać wartości negatywne pozytywne lub zero.
Teraz chce ci pokazać jak alfabetycznie możemy posortować tablicę arr2, a więc zróbmy tutaj console.log
arr2, powinna nam się ona wyświetlić.
Tak też się dzieje i teraz przejdziemy do napisania kolejnej funkcji sort. Zrobię tutaj tylko troszkę
miejsca. Ok napiszemy arr2.sort.
Znowu podamy tutaj funkcje i ona znowu będzie przyjmować a oraz b.
Dokładnie tak jak wyżej i teraz będziemy chcieli a oraz b przyjmować tutaj właśnie testingi i jakoś porównywać.
Nie pokazałem ci w lekcji o operatorach porównania, a więc o takich operatorach, że możemy nimi porównywać
również stringi.
Jeżeli napiszemy sobie a jest mniejsza od b to zostanie to alfabetycznie porównane.
Czyli jeżeli będziemy mieli Anita i Tomek to okaże się, że Anita jest mniejsza niż Tomek. Chodzi tutaj
o literę w alfabecie, a więc o porównanie alfabetyczne, przy czym pierwszeństwo mają duże litery, a więc
Ania będzie wcześniej niż Ania pisane małymi literami jak możemy sobie to teraz porównać.
Otóż znowu zrobimy if a jest mniejsza od b.
To chcemy zwrócić minus -1 else if, czyli tak jak to zrobiłem wyżej, a jest większa od b, to chcemy zwrócić
0, w zasadzie 1, a tutaj chcemy zwrócić 0.
I teraz zobaczmy czy ta tablica będzie posortowana.
Oczywiście musimy ją wyświetlić a więc arr2.
Jak widzisz została posortowana, ale tak jak wspominałem duża litera a jest wcześniej w alfabecie niż
mała litera A.
Niemniej jednak, ta tablica została posortowana.
I teraz dlaczego tutaj nie moglibyśmy skorzystać z takiego zapisu jak wyżej, czyli return a minus b.
Sprawdźmy.
Może zrobimy nawet z tej funkcji console.log a - b, abyś mógł zobaczyć, co się w konsoli logu wyświetli
i jak widzisz nam się wyświetla.
Gdybyśmy chcieli właśnie odjąć sobie np. Andrzej minus powiedzmy Piotr.
Jak widzisz jest to Not a Number, czyli z tej funkcji zwracali byśmy
Not a Number.
Dlatego to musimy robić takie oto porównania.
I wówczas nam to bez problemu zadziała bo już
a mniejsze od b, czyli tak jest opisane wyżej.
Jeśli sobie zapiszemy, to jak widzisz mamy zwrócone true, bo Andrzej będzie alfabetycznie wcześniej niż
Piotr.
No i to jest wszystko, jeżeli chodzi o sortowanie.
Jak widzisz możemy bez trudu sortować sobie dowolnie nasze tablice.
Dlatego, że pod tymi parametrami a oraz b będziemy mieli kolejne dwa elementy tablicy.
Jak wspominałem, to mogą być obiekty, więc tutaj dowolna logika sortowania może być zaimplementowana.
Ważne aby zwracać.
Minus 1, 1 lub 0 albo generalnie wartość negatywne, pozytywne lub zero.
Kod
Sortowanie elementów tablicy · 1 min
var arr = [5, 8, 1, 2, 1, 33, 23, 18, 4],
arr2 = ["anita", "Tomek", "Ania", "Andrzej", "Mateusz", "Kasia"];
console.log(arr);
arr.sort(function(a, b) {
return a - b;
// if(a < b) {
// return -1;
// } else if(a > b) {
// return 1;
// } else {
// return 0;
// }
});
console.log(arr);
console.log(arr2);
arr2.sort(function(a, b) {
console.log(a - b);
if(a < b) {
return -1;
} else if(a > b) {
return 1;
} else {
return 0;
}
});