JavaScript: Zmienna arguments
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 omówimy zmienną arguments.
Niestety często pomijaną w różnych publikacjach czy innych kursach. Natomiast jest to zmienna, która bardzo
może nam się przydać i ważne, aby już na początku swojej przygody z językiem JavaScript miał świadomość tego,
jak taka zmienna działa i że w ogóle istnieje.
Przejdźmy sobie do kodu i ta zmienna dla nas będzie dostępna w kontekście funkcji, więc utworze funkcję, która
będzie nazywała się sum, czyli suma. Już mieliśmy podobną funkcję wcześniej, więc napiszemy tutaj num1,
czyli numer jeden, numer dwa.
I co będziemy chcieli zrobić? Otóż będziemy chcieli zwrócić tutaj poprzez return to już znasz,
num1+num2, czyli będzie to funkcja, która sumuje dwie liczby, które tutaj podamy i teraz co chciałbym
Ci pokazać, to właśnie zmienną arguments, która tutaj jest dla nas dostępna.
Mówiłem ci już o różnicy między tym czym są parametry, a czym argumenty.
I mówiłem ci, że parametry są to te zmienne które tutaj nazywamy.
A argumenty to te przekazane tutaj przy wywoływaniu funkcji.
Jeżeli teraz bym sobie wywołał funkcję i napisał dwa i powiedzmy pięć, to to są argumenty tej funkcji.
I co jest bardzo ciekawe, możemy się do nich odwołać poprzez jedną zmienną, która się znajduje tutaj wewnątrz
każdej funkcji i ta zmienna nazywa się argument.
Dlatego też nie powinniśmy tutaj tworzyć własnej zmiennej, którą byśmy tak nazywali.
Jak widzisz, jest ona już dla nas wcześniej stworzona.
Użyłem tutaj console.log, aby przy wywołaniu w tym miejscu, tej funkcji, zobaczyć co to jest tak naprawdę
ta zmienna arguments z konsoli przeglądarki. Odświeżam.
I jak widzisz zostało nam tutaj zwrócone coś co już znamy.
Czyżby to była tablica?
Wygląda jak tablica. Ma dwójkę i ma piątkę.
Czyli tutaj w tej zmiennej arguments, mamy to co zostało tutaj przekazane.
Natomiast mamy tutaj num1,
num2.
A co jeżeli przekaże tutaj jeszcze 10, czyli trzeci argument, z którego tutaj nie da się teoretycznie skorzystać.
Odświeżmy. Zobacz, zmienna arguments przechowuje wszystkie argumenty, które zostały przekazane do funkcji.
Nie ma znaczenia, czy one tutaj w ogóle są zadeklarowane, jeżeli to będzie zapisane w ten sposób również
to samo tutaj otrzymamy.
Mamy oczywiście błąd, bo nie mamy zmiennej num1, ale tutaj zmienna arguments wygląda tak samo i
teraz czy to tak naprawdę jest tablica?
Jest to obiekt, który będziemy nazywać obiektem tablicopodobnym i w publikacjach w języku angielskim
będziesz mógł się spotkać z takim określeniem jak Array-like. Właśnie obiekt tablicopodobny. Dlatego,
że możemy tutaj się odwołać do arguments na przykład length, czyli do długości tej tablicy, bo wygląda to
jak tablica.
Teraz powinniśmy mieć tutaj trzy argumenty, więc length powinno zwrócić
3.
Czy tak się stanie?
Dokładnie tak jest. Natomiast nie do końca jest tablica, bo pokazywałem ci metody tablic takie jak pop,
slice itd.
I na arguments nie możemy z nich skorzystać.
Nie są one tutaj po prostu dostępne, bo nie jest to taka prawdziwa tablica.
Jest to obiekt tablicopodobny, ale z tego właśnie powodu możemy się do niego odwoływać jak na przykład
do arguments 0, może wrócimy tutaj do num1,
num2.
Jeżeli odwołamy się do arguments 0, to pierwsza wartość będzie dla nas przekazana, czyli arguments 0 w
tym przypadku, jest to dokładnie to samo co num1 i sprawdźmy to sobie.
Mamy tutaj dwójkę.
Natomiast co jest bardzo istotne, przekazaliśmy tutaj 2 i 5. 10 usuniemy i tu mamy num1.
Gdybym ja tutaj przypisał do arguments 0, czyli do tego 10, to zostanie nadpisana ta zmienna num1, czyli
tutaj będzie 10 plus 5, powinno zostać zwrócone 15, jeżeli taką funkcję wywołamy.
Zróbmy to w ten sam sposób.
Nie mieliśmy tutaj console.log, więc wpiszemy 2 i 5.
Jak widzisz 15, więc tak naprawdę zmodyfikowaliśmy sobie to co tutaj widzimy i teraz mógłbyś się zastanawiać
po co w ogóle jest nam potrzebna taka zmienna arguments.
Co z nią możemy zrobić? Bardzo wiele możemy z nią zrobić.
Przede wszystkim możemy sprawdzić czy podane zostały te parametry, które sobie życzyliśmy.
Mówiłem ci wcześniej, że w innych językach programowania.
Jeżeli ustalimy, że mają być dwa parametry, a ktoś poda jeden albo 3, to będzie błąd. W JavaScript'cie nie.
Jeżeli podamy jeden, to drugi będzie miał wartość undefined.
Natomiast poprzez argument, możemy sprawdzić np. if'em arguments. Chcemy sumować, chcemy mieć tutaj tylko dwie
liczby, więc możemy sprawdzić czy argument length równa się 2, czyli czy podane zostały dwa argumenty.
To może być oczywiście więcej sprawdzeń, gdzie możemy sprawdzić, czy są to liczby, czy ich typ jest to
number, a nie np. string.
Wiesz już jak moglibyśmy to zrobić,
moglibyśmy tutaj napisać np. typeof.
Oczywiście and wcześniej.
typeof i napisalibyśmy num1 równa się number.
No i tutaj byśmy napisali typeof. Wiesz, że ten operator nam zwróci właśnie string number albo object albo string.
Moglibyśmy tutaj napisać num2 równa się number.
No i teraz sprawdzamy czy na pewno zostały podane dwa parametry, tak jak w tym miejscu i czy obydwa są
to elementy typu number.
Możemy to w ten sposób zostawić.
No i teraz.
Jeżeli tak, to będziemy chcieli zwrócić ich sumę.
Sprawdzimy czy to w ogóle działa.
Może zróbmy sobie tutaj console.log, sum, żeby nam to w konsoli się wyświetliło.
Mogę tutaj zrobić trochę miejsca abyś dokładnie widział gdzie funkcja się wywołuje.
To co ona zwróci poprzez return przekazujemy do console.log.
Zobaczymy. Mamy undefined, z jakiego powodu? już widzę. Błąd tutaj napisano length,
a powinno być w ten sposób.
Teraz jest to podświetlone.
Zobaczmy.
7.
Wszystko działa poprawnie.
Ale gdybym do tej funkcji sobie teraz chciał przekazać string. Oczywiście w ten sposób powinniśmy na
to pozwolić, więc tutaj powinny być takie porównania,
ale teraz mówimy, że nie, musi to być number.
Zobaczmy.
Nic nie zostało zwrócone, dlatego tutaj możemy sobie zrobić else i na przykład zwrócić:
Podaj poprawne parametry albo argumenty.
Pokażę ci jeszcze w jednej z lekcji, że nie będziemy zwracać takiej stringów.
Możemy zwracać obiekty błędów, ale to jeszcze omówimy w tym kursie.
Natomiast, zobaczmy jak to będzie wyglądać.
Podaj poprawne argumenty, a jeżeli podamy poprawne, to wszystko będzie działać tak jak należy.
I teraz czwórka powinna zostać zwrócona.
Tak też się dzieje.
Teraz pokażę ci jeszcze jedną rzecz, która może być bardzo przydatna jeżeli chodzi o arguments.
Tutaj zdefiniowaliśmy, że dwa argumenty mają być przekazane, ale co gdybyśmy chcieli stworzyć funkcję,
może tę nazwę sum1 i to usuniemy, a teraz tworzymy nową, którą nazwę sum, która nie przyjmuje żadnych
parametrów, ale ile przyjmie argumentów, to tyle chcemy ze sobą dodać. Być może się domyślasz jak to zrobić.
Mówiłem ci, że jeżeli taką funkcję wywołamy, zróbmy sobie znowu jako console.log, będzie to sum i podamy 2, 3, 5, 6, to to
wszystko będzie dla nas dostępne pod zmienną arguments. Zróbmy jeszcze console.log, abyś był tego pewny.
Wywołujemy tutaj sum i to co przekazałem powinno nam się wyświetlić.
Tutaj nie może być średnika, OK.
Mamy taką tablicę i teraz sobie przeiterujemy po całej tej tablicy bardzo szybko, poprzez for. Zrobimy
var i, już to wszystko znasz i będzie mniejsze od arguments.length.
Bo widzisz, że argument zachowuje się jak tablica i++ i tutaj wyżej stworzymy zmienną, ona jest
lokalna, już to wiesz.
W takiej właśnie funkcji, którą nazwiemy total. Przypisze jej wartość 0, abyśmy do niej mogli później dodawać.
Bo jeżeli mielibyśmy to zrobione w ten sposób to później gdybyśmy próbowali coś dodać to undefined plus
cokolwiek, byłoby to Not a Number, więc na początku będzie to zero i w każdej iteracji pętli total będę chciał
zrobić plus równa się, czyli to co tam jest plus
i teraz arguments i czyli np. to będzie 2 w kolejnej iteracji 3, 5 itd.
Po przejściu całej tej pętli, tutaj w total, będziemy mieli wszystkie liczby dodane i na końcu sobie je zwrócimy,
czyli return total.
Zobaczmy.
No i jak widzisz, jest to 16, jeżeli tutaj dodamy jeszcze kolejny argument 10, to powinniśmy mieć 26.
No i dokładnie tak się dzieje.
Z tej lekcji zapamiętaj sobie tylko tyle, że możemy poprzez arguments odwoływać się do poszczególnych
argumentów, które zostały podane i np. sprawdzać ich ilość, typ możemy sprawdzać, tak jak tutaj pokazałem
albo mogliśmy wpisać arguments 0, arguments 1.
Byłoby to dokładnie to samo albo możemy tworzyć funkcje, które tutaj parametru nie mają,
ale ile im argumentów przekażemy, to możemy na nich jakąś pętlę wykonać.
Tak jak widzisz to w tym miejscu.
Kod
Zmienna arguments · 1 min
function sum1(num1, num2) {
if(arguments.length === 2 && typeof num1 === "number" && typeof num2 === "number") {
return num1 + num2;
} else {
return "Podaj poprane argumenty";
}
}
function sum() {
var total = 0;
for(var i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log( sum(2, 3, 5, 6, 10) );