JavaScript: Zwracanie wartości
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.
Kontynuujemy poznawanie funkcji i teraz pokażę ci, na czym polega zwracanie wartości przez funkcje, co
już w tym kursie kilkukrotnie
miałeś okazję zobaczyć, kiedy w poprzednich rozdziałach korzystaliśmy z różnych metod.
Natomiast teraz pokażę ci, w jaki sposób tak naprawdę jest to implementowane.
Stworzymy funkcję, którą nazwiemy znowu sayHello dla naszego przykładu i jak ci wcześniej pokazywałem
mieliśmy w takiej funkcji odwołanie do innej funkcji na przykład do console.log, czyli do metody obiektu
console i wpisaliśmy np. Witaj.
Natomiast sama w sobie funkcja nic nie zwracała.
Za moment ci pokaże, jeżeli sobie to zapisze i nie będę jej z tego poziomu wywoływał.
Ale przejdziemy tutaj i odświeżę i wywołam ja w konsoli JavaScriptu.
To zauważ, że mamy Witaj oraz undefined. Konsola JavaScript'u, tutaj w przeglądarce Chrome,
pokazuje nam jaka wartość została zwrócona z funkcji i tutaj zostało zwrócone
undefined, dlatego że, jeżeli nie skorzystamy w takiej funkcji ze słowa kluczowego return, o którym ci
teraz powiem, to funkcja sama z siebie zawsze zwraca wartość undefined, czyli jeżeli nic nie zwrócisz
to jest zwracane undefined.
No i teraz o co chodzi?
Otóż ta funkcja była specyficzna, bo nam coś wyświetlała, czyli console.log,
jest to taka metoda dostępna w przeglądarce, która nam w tej właśnie konsoli, czyli nigdzie na stronie,
ale w konsoli coś wyświetla.
Natomiast, co gdybyśmy chcieli z takiej funkcji skorzystać w jakiś inny sposób i ona miała by nam coś
obliczyć albo coś zwrócić.
No właśnie tutaj w funkcji możemy robić dowolne rzeczy. Wykonywać jakieś pętle, instrukcje warunkowe if itd.
Natomiast ważne jest zazwyczaj, aby funkcja coś zwracała i możemy to zrobić poleceniem return w ten
sposób, czyli zwróć, po prostu.
I tutaj możemy zwrócić rzecz dowolną, możemy tu podać zmienną, która wyżej będzie utworzona i tak dalej
albo bezpośrednio,
typ który chcemy zwrócić.
Ja chcę zwrócić string, który będzie się nazywał Witaj.
Konkretnie będzie miał taką wartość i teraz ta funkcja już coś zwraca, jeżeli odświeżę i skorzystam
z sayHello, to możesz zobaczyć, że nie mamy już tu undefind. Pozostało zwrócone Witaj. Natomiast nigdzie
w konsoli, by się to nie wyświetliło.
Gdybym tutaj skorzystał z tej funkcji, a więc sayHello w ten sposób.
Odświeżmy.
Jak widzisz nic nie ma w konsoli, bo nie skorzystaliśmy z console.log.
Ale funkcja została wywołana i zwróciła Witaj, które gdzieś tam można powiedzieć poleciało, bo nigdzie
tego nie skorzystaliśmy.
Czyli zapamiętaj sobie, że z każdej funkcji możemy coś zwrócić poprzez polecenie, poprzez słowo kluczowe
return i ono nam taką wartość jakby wyrzuci z tej funkcji.
No i właśnie co z tym możemy zrobić?
No właśnie możemy to zapisać na przykład w zmiennej czyli hello
równa się
tutaj wykonujemy funkcję, bo pamiętasz, że nawiasy okrągłe ją wykonają, a że ona zwraca return to pod
zmienną hello to powinno zostać zapisane. Odświeżam i odwołam się do hello.
I okazuje się, że mamy tam string Witaj, które z tej funkcji został zwrócony,
świetna sprawa.
No i właśnie działa to podobnie jak metody np. na tablicach, które pokazywałem np. slice, która ucinała
nam kawałek tablicy i go zwracała i mogliśmy sobie go zapisać w zmiennej.
Oczywiście nie musimy tego zapisywać zmiennej, bo możemy z takiej funkcji skorzystać w dowolnym miejscu.
Gdybym chciał tutaj wpisać console.log i np. użyć tego Witaj. Mamy to, tutaj w zmiennej hello, więc wiesz, że mogę
napisać hello plus np. Maciej i będzie OK.
Sprawdźmy.
Witaj Maciej.
Ale mogę bezpośrednio bez zapisywania tego w zmiennej wpisać tutaj sayHello i interpreter JavaScript'u najpierw
wykona tę funkcję, ona zwraca string, więc będzie tutaj on podstawiony i do niego poprzez plus, czyli
skonkatenujemy drugi string,
Maciej. Tu oczywiście mogło być wywołanie innej funkcji itd.
Zobaczysz, że rezultat w konsoli jest dokładnie ten sam, czyli funkcję możemy podstawiać jako wyrażenie
w dowolnym miejscu, tak jak zmienną, czy tak jak bezpośrednio jakiś typ.
Teraz stworzymy drugą zmienną.
Nazwiemy ją, na przykład, makeArray, czyli stwórz tablicę.
W ten sposób możemy tutaj stworzyć zmienną, którą nazwiemy arr, czyli tablica. Może tutaj być jakaś tablica
raz, dwa, trzy i na końcu możemy napisać return arr, no i jeżeli teraz przejdę tutaj i wpiszę makeArray.
Wywołuje tę funkcję i jak widzisz zwraca nam ona tablicę, co jest jeszcze bardzo istotne, to skoro wiemy,
że taka funkcja zwraca tablicę, to w JavaScript'cie, co nie jest w wielu językach programowania dostępne, tutaj
jest.
Możemy od razu zapisać tutaj np. 1 i wiesz, że skoro to jest tablica i podajemy indeks 1, czyli 0, 1, to tutaj
będziemy mogli odczytać dwójkę.
No i zobacz, że dwójka została nam zwrócona, czyli bezpośrednio po tym, co funkcja zwróci,
możemy się do tego odwołać.
Mógłbym tutaj sobie napisać make makeArray().length.
Wiemy, że zostanie zwrócona tablica, więc do length możemy się odwołać i trójka również została dla nas zwrócona.
Ostatnia bardzo ważna rzecz, to fakt, że polecenie return działa trochę jak break, który pokazywałem ci
w przypadku pętli albo np. w przypadku instrukcji warunkowej switch. Return zakończy nam działanie tej funkcji
całkowicie.
Dlatego utworzymy teraz nową funkcję, którą nazwę hi, w ten sposób i tutaj będę chciał sobie zrobić
if'a, jeżeli 3 jest większe od 1. Oczywiście nie będziemy tego ręcznie tak wpisywać, bo funkcje będą przyjmować
parametry itd.
O tym będzie w kolejnych lekcjach, ale jeżeli 3 jest większe od 1, to chcę napisać return.
Wystarczy, że tyle zrobię.
I wtedy ta funkcja zwróci nam undefined, tak jakbyśmy w ogóle nie użyli return, ale zakończy działanie tej
funkcji w tym miejscu. Natomiast mogę dopisać return false itd.
Więc tam gdzie wywołamy tę funkcję, będziemy mogli się do tego odwołać.
A poniżej będę chciał zrobić console.log,
Cześć.
No i wiemy, że 3 jest większa od 1.
Tutaj będzie true, więc ten warunek się wykona, ten kod, czyli będzie return false.
Przejdźmy teraz tutaj i spróbuje skorzystać z funkcji hi.
No i jak widzisz mamy false, a nigdzie nie wyświetlił się console.log.
Ale jeżeli warunek odwrócę. Sprawdźmy, hi.
Tu jak widzisz mamy console.log Cześć i undefined.
Bo funkcja nie zwróciła tutaj false, ale wyświetliła console.log i że nic nie zwróciliśmy to zwróciło
undefined.
Oczywiście, możemy tutaj napisać return true, na przykład.
Jeśli raz jeszcze to wykonam, to będziemy mieli tutaj true.
Warto z tego zapamiętać tylko tyle, że na początku jakiejś funkcji od razu możemy pewne warunki sprawdzić.
Jeżeli coś nam się nie zgadza, coś nam nie pasuje, możemy powiedzieć return i ta funkcja zostanie zakończona
i kod, który jest poniżej w ogóle się nie wykona.
Tutaj mamy w dwóch miejscach return, ale wiesz, że on się wykona tylko w jednym z tych miejsc, bo jeżeli tutaj będziemy
mieli prawdę, to będziemy mieli return false.
Jeżeli nie, to ten warunek, ten kod, w ogóle tutaj, w tych blokach, w ogóle się nie wykona i przejdziemy dalej.
Kod
Zwracanie wartości · 1 min
function sayHello() {
return "Witaj, ";
}
// var hello = sayHello();
console.log(sayHello() + "Maciej");
function makeArray() {
var arr = [1, 2, 3];
return arr;
}
function hi() {
if(3 < 1) {
return false;
}
console.log("Cześć!");
return true;
}