JavaScript: Tworzenie funkcji
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.
Tej lekcji poznasz jedną z najważniejszych konstrukcji w języku JavaScript, ale także w innych językach
programowania, a mianowicie funkcje.
W jaki sposób tworzyć funkcję?
Już teraz ci pokażę.
Aby stworzyć w języku JavaScript funkcję, używamy słowa kluczowego function.
Tak jak przy zmiennych używaliśmy var, tak przy funkcjach używamy function i teraz, aby funkcje móc nazwać,
bo mamy również funkcję nienazwane, czyli anonimowe, o których powiem w jednej z kolejnych lekcji.
Natomiast tutaj chcemy jakąś funkcję nazwać, aby do niej móc się odwołać.
Przypisujemy tutaj po spacji po prostu nazwę.
Może to być dowolna nazwa.
Zgodnie z tymi zasadami nazewnictwa, które przytaczałem ci w przypadku zmiennych, więc nie może również
zaczynać się od cyfr itd.
Nazwiemy sobie funkcję sayHello, czyli powiedz cześć i teraz musimy podać zawsze parę nawiasów okrągłych.
Oczywiście zgodnie z tym, że JavaScript nie zwraca uwagi na białe znaki, możemy tutaj postawić spacje,
ale ja tego zazwyczaj nie robię, więc tak zapisujemy sobie funkcje i aby to było poprawne musimy do tego
dodać jeszcze parę takich nawiasów klamrowych, abyśmy mogli coś tam wpisać to od razu sobie to rozwinę.
Tak wygląda deklaracja funkcji sayHello.
Jest to bardzo poprawna funkcja, która po prostu nic nie robi i teraz chcielibyśmy, aby taka funkcja wyświetlała
w konsoli np. Witaj.
I zauważ, że do tej pory korzystaliśmy już z console.log.
Jest to nic innego jak funkcja, ale jest zapisana w obiekcie console, więc nazywamy ją metodą. Zauważ, że do
takiej funkcji przekazujemy jakiś parametr.
O tym będę mówił w kolejnych lekcjach i ona coś dla nas robi.
Teraz stworzyliśmy nową funkcję, która korzysta z innej funkcji, która jest tutaj dostępna.
No i teraz jeżeli będziemy chcieli skorzystać z funkcji sayHello, to musimy ją wywołać dokładnie tak,
jak to robiliśmy w przypadku funkcji log, czyli wpisujemy nazwę tej funkcji, sayHello i podajemy nawiasy
okrągłe.
Jeżeli to wpiszemy w ten sposób, to tak jak gdybyśmy chcieli podstawić referencje do tej funkcji i moglibyśmy
wtedy to zapisać w jakiejś zmiennej,
ale jeżeli podamy tutaj nawiasy okrągłe to mówimy wywołaj tę funkcję, a więc cały kod, który jest wewnątrz
ma zostać w tym właśnie momencie wykonany.
Zapisuje to, przechodzę do przeglądarki i mamy tutaj console.log Witaj, który wykonał się właśnie z tej
oto funkcji.
Teraz pokażę ci drugi sposób na to, jak możemy tworzyć funkcje.
Stworzyliśmy funkcję sayHello poprzez nadanie jej nazwy po słowie kluczowym function.
Natomiast możemy stworzyć zmienną, czyli var. Nazwiemy je sobie sayHello2, bo nie możemy tutaj nazwać tak samo
jak w funkcji, bo widzisz, że odwołujemy się do tej nazwy i interpreter nie wiedziałby czy chodzi o funkcje
czy chodzi o zmienną, która te funkcje przechowuje, więc sayHello2.
I tutaj przypisze funkcję.
Ja mówiłem ci w lekcji o zmiennej, że zmienne mogą przechowywać dowolny typ, jaki w JavaScript jest reprezentowany.
Jeżeli wpiszemy tutaj string, to jest on przechowywany tutaj jako typ prymitywny, a jeżeli podamy funkcje
lub jakiś obiekt, to jest tutaj przechowywana referencja i co ciekawe funkcja jest również obiektem, więc
jeżeli tutaj podamy funkcję i nie musimy nadawać jej nazwy to pod sayHello przechowujemy referencje
do tejże funkcji.
Czyli gdybym teraz tworzył nową zmienną i przypisał do niej sayHello, to pamiętaj nie kopiujemy całej
funkcji, ale tak jak w przypadku obiektów przekazujemy tylko referencje do tej funkcji.
Co tutaj chce ci ci pokazać?
Otóż to, że wcześniej stworzyliśmy funkcję, którą nazwaliśmy w ten sposób, a teraz tworzę zmienną, która
przechowuje nie nazwaną funkcję.
I ta funkcja może nam wyświetlić np. console.log cześć i możemy bez trudu do niej się odwołać. Jeżeli
wpisze tylko sayHello2,
to odwołujemy się, jak widzisz, do tej funkcji, która została wyświetlona,
ale jeżeli podamy nawiasy okrągłe, to poprzez referencje odwołujemy się do tej funkcji i po prostu ją
wywołamy i mamy tutaj cześć. Teraz rzecz bardzo istotna i na pewno zastanawiasz się jaka jest różnica pomiędzy
tymi dwoma zapisami, a więc czy korzystać ze zmiennej, która przechowuje funkcje czy nazywać funkcje w
ten sposób.
Różnica jest znacząca.
Otóż funkcje, które są nazwane w ten sposób, a więc bez użycia zmiennej mamy do nich przypisaną nazwę.
Te funkcje są wynoszone na samą górę zakresu zmiennych. Inaczej mówiąc zakresu zmiennych o którym będę
mówił w jednej z kolejnych lekcji. Z angielskiego takie zjawisko jest nazywane hoisting. O co tutaj
chodzi?
Otóż możemy z tej funkcji sayHello skorzystać zanim została zdefiniowana.
Natomiast ze zmiennej już nie, o czym w tym kursie jeszcze nie mówiłem, ale myślę że się domyśliłeś,
jak to działa, jeżeli definiujemy jakąś zmienną var, na przykład, text równa się cześć, to nie możemy gdzieś
wyżej skorzystać ze zmiennej text, bo ona jeszcze jakby w tym miejscu nie istnieje.
Natomiast co jest ciekawe, mogę w tym miejscu wywołać funkcję sayHello. To sobie stąd wyrzucimy i zobacz, że ona
została zdefiniowana później, ale w przeglądarce Witaj zostało bez problemu wyświetlone.
Z tego powodu, że jeżeli funkcje nazwiemy sobie po słowie kluczowym function, to ona jest jakby wynoszona na samą górę
zakresu i możemy z niej wcześniej skorzystać niż została zdefiniowana.
Jeżeli chodzi o sayHello2, to spróbujmy w tym miejscu skorzystać z niej wywołując ją i zobaczmy i jak
widzisz mamy błąd sayHello2 is not a function, dlatego że, jeszcze taka funkcja nie została do zmiennej
przypisana, a więc taka jest podstawowa różnica.
I teraz jeszcze trzeci zapis, który tutaj możemy stworzyć, to będzie to stworzenie zmiennej np.
sayHello3.
I tutaj function, być może również już na to wpadłeś.
I co jeżeli dam sobie nazwę np. hello i będzie to znowu jakiś console.log.
Mieliśmy Witaj, mieliśmy Czesć, to tutaj napiszemy Siema i teraz skoro tutaj nadałeł nazwę, to czy do tej
nazwy możemy się odwołać. Przejdźmy tutaj, odświeżmy.
Może to wykomentuję, aby błąd nam zniknął i spróbujmy skorzystać z funkcji hello.
I okazuje się, że hello is not defined.
Taka funkcja nie istnieje.
Tutaj przypisali sobie w ten sam sposób nazwę i nazwa działa, a tutaj przypisano nazwę hello i okazuje
się, że nie mamy takiego czegoś w zakresie zmiennych, ale
sayHello3,
co możemy sprawdzić, bez trudu nam zadziała.
Wyświetlone zostało Siema i mógłbyś się zastanawiać o co chodzi.
Mianowicie taki zapis. On jest rzadziej spotykany, jest tylko po to, abyśmy mogli wewnątrz tej funkcji
odwołać się do niej samej.
Czyli gdybyśmy tutaj chcieli sobie napisać np. console.log hello, to tutaj hello będzie już dla nas
dostępne.
Zobaczmy, wywołamy sobie sayHello3, bo tylko tak możemy się z zewnątrz do tego odwołać i console.log, hello,
to jest właśnie ten zapis, a następnie Siema,
czyli nie możemy skorzystać z hello gdzieś na zewnątrz, ale wewnątrz tej funkcji możemy skorzystać z
takiego odwołania.
Będzie to przydatne przy funkcjach rekurencyjnych.
To jest nieco bardziej zaawansowany temat, ale zdarzają się funkcje, które wywołują same siebie.
Gdybyśmy w ten sposób nie zapisali to moglibyśmy się odwołać do tej funkcji jedynie przez sayHello3.
W ten sposób, zobaczmy czy nam się to poprawnie wyświetli.
Mamy jakiś błąd.
Ok.
Odświeżam i raz jeszcze skorzystamy z sayHello3
i widzisz, że to zadziałało.
Ale jeżeli zmienimy nazwę zmiennej, to również tutaj musielibyśmy to zmieniać.
A tak możemy tutaj wpisać po prostu hello. Choć może na razie wydawać się to zagmatwane.
To właśnie opisałem ci mechanizm tworzenia funkcji.
Na te trzy różne sposoby, o którym zapewniam Cię.
Wiele osób które całymi latami piszą w Script'cie i nie zdaje sobie sprawy.
A więc nie do końca wie, jak to działa i jakie są różnice pomiędzy tymi zapisami.
Dlatego ja w tym kursie staram się poświęcać czas na rzeczy bardzo istotne, które jeżeli już dzisiaj
zrozumiesz i zapamiętasz to w przyszłości będzie ci dużo prościej czytać kod, który ktoś inny napisał
lub samemu tworzyć lepszy kod JavaScript. Na sam koniec chciałbym ci jeszcze pokazać jedną bardzo ważną
rzecz odnośnie właśnie tego wynoszenia, czyli hoisting, które ci pokazałem. Tutaj pokazałem ci, że możemy
skorzystać z funkcji zanim została ona zadeklarowana.
I teraz pytanie, jak będzie ze zmiennymi, gdybym tutaj góry utworzył zmienną, którą nazwiemy tekst i przypisze
jej wartość Witaj.
A tutaj w console.log będę chciał tą zmienną przekazać.
Pewnie się domyślasz, że nam to zadziała.
Więc jeżeli teraz odświeże, jak widzisz Witaj się tutaj wyświetliło.
Ale co, jeżeli tutaj stworzę zmienną, którą również nazwę
text i przypisze jej wartość
Cześć. Co się stanie?
Jak widzisz mamy tutaj text.
Mógłbyś sobie pomyśleć, to jest ta zmienna, w tym miejscu,
stworzyłem kolejną zmienną
i to nie jest błąd, bo mógłbyś tak pomyśleć, że kolejny raz tak samo nazwaliśmy zmienną,
otóż tak nie jest. W jednej z kolejnych lekcji
powiem ci o zakresie zmiennych. Możemy wewnątrz funkcji dokładnie tak nazwać zmienną, jak gdzieś indziej.
I wyobraź sobie, że logicznie byłoby w tym miejscu podstawić Witaj,
bo tekst został zadeklarowany dopiero później. Sprawdźmy, co zostanie wyświetlone?
undefined.
No i teraz co się okazuje.
Otóż jeżeli tutaj wewnątrz funkcji tworzymy taką zmienną, to zmienne również są wynoszone, a więc mamy
to zjawisko z angielskiego określane jako variable hoisting, czyli ta zmienna jest wynoszono jakby na
samą górę, ale nie ma ona jeszcze żadnej wartości, a więc wiesz że jest to undefined.
I w tym miejscu, kiedy interpreter wie, że wewnątrz tej funkcji taka zmienna jest tworzona ignoruje zmienną
tekstura, która była utworzona wyżej, ale że wartość tej zmiennej jest ustanawiana dopiero tutaj to dopiero
w tym miejscu przestaje to być undefined
i gdybyśmy tutaj zrobili console.log, text, to będziemy mieli Cześć.
Najpierw będzie undefined, potem cześć.
Czyli mam nadzieję, że to rozumiesz. Jeżeli wewnątrz funkcji tworzymy zmienne,
to one jakby zawsze są na samą górę wynoszone,
ale jeżeli wartość jest przypisywana później to dopiero później będzie ona dostępna.
Czyli wygląda to tak jak ten tutaj napisał tekst, a tutaj dopiero przypisał wartość do tejże zmiennej.
To są koncepcje bardzo ważne do zapamiętania, dlatego chciałem na nie poświęcić trochę więcej czasu, ale
już od kolejnej lekcji pokażę ci to, co jest istotą tworzenia i wykorzystywania funkcji.
Kod
Tworzenie funkcji · 1 min
var text = "Witaj";
sayHello();
function sayHello() {
console.log(text);
var text = "Cześć";
console.log(text);
}
// sayHello2();
var sayHello2 = function() {
console.log("Cześć!");
};
var sayHello3 = function hello() {
console.log(hello);
console.log("Siema!");
};