JavaScript: Funkcje anonimowe
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.
Przyszedł czas, aby wrócić do funkcji anonimowych, które już w kursie widziałeś, ale chcę Ci pokazać na
czym cała rzecz polega.
Dlatego przejdziemy od razu do kodu i tutaj w tym globalnym zakresie, który w przeglądarce, w konsoli
będzie widoczny, a także w innych skryptach.
Chce utworzyć szybko tablicę.
To co już widzieliśmy. Mam taką oto tablicę i pokazywałem ci już jak tablicę możemy sortować poprzez
arr, czyli odwołanie się do tej tablicy sort i pamiętasz, że tutaj podawaliśmy funkcję, która przyjmowała
sobie parametry, które nazywaliśmy a i b.
Pamiętaj, że możesz je dowolnie nazywać.
I ta funkcja tutaj nam coś robiła.
No właśnie.
Jest to funkcja anonimowa, dlatego że podaliśmy tutaj funkcje bez żadnej nazwy w tym miejscu.
Dla nas jest to funkcja anonimowa, którą podaliśmy bezpośrednio tutaj. Ona nam sortowała, zróbmy sobie return
a minus b i ta tablica dla nas zostanie posortowana.
Tak działają funkcje anonimowe, ale przecież w tym miejscu bez trudu moglibyśmy tę funkcję wyjąć, zadeklarować
ją w innym miejscu nadając jej nazwę.
Czy to tutaj powiedzmy sortFunc, czy moglibyśmy zrobić to w zmiennej,
tak jak już ci pokazywałem, mamy taką funkcję, a tutaj możemy przekazać tylko jej nazwę.
Pamiętaj, aby nie przekazywać tego w ten sposób, bo wówczas chciałbyś taką funkcję wywołać.
Natomiast jeżeli przekazujesz ją tylko przez nazwę to działa to tak, że przekazujesz tutaj referencje do
tej funkcji.
A metoda sort sama już dba o to, aby dla każdych dwóch elementów tej tablicy czyli a i b, wykonywać taką
metodę,
taką funkcję, którą tutaj zadeklarowaliśmy, więc przed momentem zobaczyłeś funkcję anonimową, chociaż wcale
nie musielibyśmy tego w ten sposób wpisywać.
No i teraz pytanie do czego nam się przydają funkcje anonimowe.
Ano właśnie do tego, jeżeli raz chcemy gdzieś przekazać jakąś funkcję, jeżeli nie będziemy jej używać
w innych miejscach przekazaliśmy ją do sort jednorazowo
i ta funkcja się wywoła i zostanie z pamięci usunięta.
Natomiast w tym momencie, jeżeli tak to zapiszemy, to zadeklarowaliśmy taką funkcję w pamięci i ona będzie
dostępna do końca działania tego skryptu.
Póki garbage collector jej nie usunie. A że jesteśmy w tym globalnym zakresie, bo nie ogranicza nas tutaj
żadna inna funkcja, to ta funkcja cały czas będzie na naszej stronie.
Póki nie odświeżymy lub nie zamkniemy przeglądarki, dostępna.
Funkcje anonimowe przydają się właśnie w takich momentach, gdzie raz chcemy coś wykorzystać, nie ma potrzeby
definiowania tej funkcji gdzieś wyżej i podawania referencji. Możemy bez trudu tę funkcję wpisać właśnie
w tym miejscu i być może zróbmy to w ten sposób jak wcześniej.
I tak chciałbym Ci to pozostawić tę nazwę usuniemy.
Pokażę ci teraz, że funkcję możemy przekazywać w dowolny sposób, w dowolne miejsce, tak jak inne wartości
w JavaScript'cie, co nie jest takie oczywiste, bo nie w każdym języku programowania jest to dostępne.
Powiedzmy, że stworzymy funkcję znowu sayHello, która będzie przyjmować dwa parametry, text to będzie taki
przedrostek i funkcje getName, dowolnie je sobie nazwałem.
I teraz co ja chce zrobić? Możemy tu od razu zwrócić albo stworzyć zmienną, którą nazwiemy result.
Chciałbym, żeby tutaj było np. Witaj, ale to będzie podawane do tej funkcji jako tekst, więc wpiszemy tekst
plus
i chciałbym tutaj, aby imię było zwracane z funkcji getName.
No i teraz jak możemy to zrobić? Wywołamy sobie getName.
Widzisz, że odwołujemy się tutaj do funkcji, która musi być przekazana i ją wywołujemy.
To co ona zwróci zostanie połączone z tekstem, który zostanie przekazany tutaj.
I teraz to zwrócimy.
Zaraz dokładnie zobaczysz jak to działa.
Teraz, aby to mogło zadziałać, to musimy wywołać funkcję.
Może zróbmy to w console.log sayHello.
Jak widzisz my za każdym razem też do console.log jako argument, przekazujemy to co nam np. zwróci jakaś
funkcja, więc jak najbardziej jest to możliwe.
sayHello.
I tutaj będzie Witaj.
I chcę, żeby właśnie to Witaj dostępne pod text, zostało połączone z jakimś imieniem.
I gdybym tutaj podał np. Piotr, to nie mógłbym tego wywoływać w ten sposób.
Tutaj pod getName Piotr zostały podstawione i tu zostały połączone sprawdźmy
czy to zadziała.
Witaj Piotr.
Działa.
Ale jeżeli ja będę chciał to wywołać, to będziemy mieli błąd, bo przekazywałem string pod tę nazwę.
No i na stringu nie możemy go wywołać jako funkcji. Sprawdźmy czy błąd nam się wyświetli.
TypeError getName is not a function, czyli get to nie jest funkcja.
I teraz pokażę ci jak przekazać tutaj funkcję anonimową.
Właśnie nie zapisując jej wcześniej nigdzie.
Ale przekazując tak jak tutaj.
Wyobraź sobie, że w tym miejscu zamiast Piotr wpiszę funkcja.
Ja ją teraz tutaj definiuje.
Jest to taka pusta funkcja, która zwraca Piotr. Oczywiście, to może być dużo więcej logiki.
Ale zauważ, że przekazaliśmy tutaj jako parametr getName całą taką funkcję.
Ona się nigdzie nie wykonuje, do momentu, aż nie zostanie wysłana funkcja sayHello, czyli tutaj właśnie
przekazujemy funkcję.
Pomyśl sobie, że w pamięci taka funkcja zostanie utworzona.
Referencja do niej zostanie przekazana tutaj, a tutaj zostanie ona wywołana, czyli w tym momencie wywołujemy
tak naprawdę tę funkcję.
Ona zwraca Piotr i to zostaje tutaj połączone z tekstem Witaj.
To nie jest może najlepszy przykład, ale pokazuje że funkcje anonimowe możemy przekazywać jako parametry.
i dokładnie tak też zrobiliśmy to tutaj.
Teraz to zostanie zwrócone i powinniśmy zobaczyć Witaj Piotr.
Nie ma żadnego problemu, tu oczywiście mógłbym przekazać tak jak wcześniej nazwę do funkcji, która
gdzieindziej byłaby zapisana w zmiennej albo nazwana tak jak Ci już to pokazywałem.
Na koniec chcę ci pokazać jedną bardzo użyteczną rzecz, otóż wiesz, że taka tablica array, dla nas będzie tutaj
dostępna.
A nie jest dobrą praktyką, aby tutaj globalnie było wszystko dostępne, bo w innych skryptach, jeżeli ktoś
stworzy zmienną array, to otrzyma błąd.
Z tego powodu, że my już taką stworzyliśmy. Pokazywałem jak to wszystko można opleść.
Funkcją, którą nazwałem init i później ją wywoływałem,
ale wcale nie musimy jej tak nazywać.
Możemy stworzyć funkcję anonimową, w ten sposób. Zrobię trochę miejsca i wszystko do tej funkcji wstawię.
Ale teraz zapytasz, w jaki sposób można by taką funkcję wywołać.
Jeżeli nie nadałem jej żadnej nazwy. Jak taką funkcję wywołać. Ona z automatu się nam nie wywoła.
Otóż możemy opleść ją dodatkowym nawiasem w ten sposób, co sprawi, że cała ta funkcja będzie wyrażeniem
i teraz zgadnij jak wywołujemy funkcje.
Wiesz już, że funkcję wywołujemy odwołując się do nich i przypisując takie właśnie nawiasy.
Tu oczywiście mogą być parametry, ale nie muszą.
Więc jeżeli teraz to wszystko opleciemy takimi nawiasami, mogę napisać tutaj coś takiego.
Te dwa kołowe nawiasy wywołują całą funkcję, która tutaj się znajduje, z angielskiego taka funkcja jest
nazywana self invoking anonymouse function, czyli samo wywołująca się w funkcja anonimowa. Ona nie ma nazwy,
ale sama się wykona i oznacza to tylko tyle, że cały kod, który jest wewnątrz będzie wykonany, a w globalnej
przestrzeni nie będzie wszystkich tych zmiennych. Jeżeli bym teraz odświeżył, kod się wykonał, ale gdybym
musiał się odwołać do array i nie ma takiej zmiennej i taki będzie przez nas pożądany efekt, kiedy będziemy
chcieli pracować w ten sposób, aby nasze nazwy zmiennych czy funkcji, nie były widoczne na zewnątrz.
Kod
Funkcje anonimowe · 1 min
(function() {
var arr = [1, 45, 22, 31, 3];
arr.sort(function(a, b) {
return a - b;
});
function sayHello(text, getName) {
var result = text + getName();
return result;
}
console.log( sayHello("Witaj, ", function() {
return "Piotr";
}) );
})();