JavaScript: Obiekt Function
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 zajmiemy się niezwykle istotnym tematem. Mianowicie tym, że funkcja w języku JavaScript również
jest obiektem. Ma swój konstruktor, ale nie to jest najważniejsze.
Ważne jest to, że jest to wyjątkowość języka JavaScript, dlatego że niewielu językach programowania działa
w ten sposób jak tutaj. Wspominałem ci, że wszystko jest obiektem.
Oprócz kilku typów prymitywnych, więc funkcja również jest obiektem i teraz pokażę ci co z tego wynika.
Na początek pokażę ci konstruktor funkcji, bo do tej pory tworzyliśmy funkcję np. w ten sposób i możemy
ją nazwać powiedzmy sayHello.
Przyjmie ona kilka parametrów i tutaj będę chciał zwrócić pierwsze i drugie imię.
Czyli jak widzisz, nic nadzwyczajnego.
Natomiast pokazywałem ci, że string czy Array np. mają swoje konstruktory.
I podobnie jest z funkcją i będziemy bardzo rzadko z nich korzystać. Jedynie wtedy, kiedy jakiś tekst
chcemy przekształcić na funkcję.
Jest to niebezpieczne, z tego powodu, że nie powinniśmy udostępniać użytkownikom takiej możliwości, aby
jakiś kod mogli wpisywać.
Ale jest taka możliwość, warto abyś o tym wiedział.
Działa to podobnie jak funkcja eval, o której wspominałem i teraz jak to zrobić? Możemy utworzyć zmienną
f i wpiszemy new Function.
I teraz lista parametrów, które podajemy tutaj, to będą parametry takie jak widzisz w tym miejscu, ale
podajemy je jako stringi.
Czyli jeśli chcę mieć firstName i lastName, to podaję je w ten oto sposób. Tak będziemy tworzyć nową
funkcję i może ich tutaj być dowolna liczba, tych parametrów, ale ostatni z nich to będzie ciało funkcji,
czyli to co widzimy tutaj.
Również musisz wiedzieć, że to ma być zapisane jako string, więc mogę to skopiować.
Zapiszemy to jako string.
Z tym, że tutaj musimy to zamienić w ten sposób, no bo nie moglibyśmy mieć takiego jednego długiego string'u.
Zapisać, co już ci pokazywałem na samym początku tego kursu,
lekcje o stringach, OK.
W ten sposób i teraz do f została zwrócona funkcja.
Teraz gdybyśmy chcieli do f się odwołać, to będziemy mogli podać firstName
oraz lastName i zostanie nam to zwrócone,
więc najpierw spróbujmy sayHello. Odświeżmy.
Tutaj podam Jan Kowalski.
Jak widzisz, działa i teraz zróbmy to samo z funkcją f, którą utworzyliśmy w inny sposób.
Jak widzisz,
działa dokładnie w taki sam sposób, czyli funkcja jest obiektem.
Możemy ją również z konstruktora tworzyć, ale to, że jest obiektem na razie z tego nie wynika.
Teraz będę chciał ci pokazać dlaczego właśnie funkcja jest obiektem.
Bo możemy do niej dodawać różne właściwości, czy też metody, gdybyśmy sobie tego życzyli.
Stąd zapamiętaj tylko tyle, że funkcja ma swój konstruktor,
gdzie możemy jako tekst podać parametry oraz ciało tej funkcji.
Nie będziemy z tego często korzystać, ale warto wiedzieć, że taka możliwość istnieje.
Teraz chce ci pokazać właśnie dlaczego funkcja jest obiektem. Utworze teraz jeszcze jedną nową funkcję.
Może to wykomentuje, nową funkcję również nazwę f.
Stworzyłem funkcję f, działa tak samo jak ta wyżej. Będzie nam zwracać to, co tutaj podamy.
Natomiast, co by było gdybyśmy chcieli sprawdzić, ile razy taka funkcja została wywołana.
Otóż możemy tutaj pod spodem odwołać się do f, bo tutaj to zostało utworzone.
Skoro mówiłem ci, że funkcja jest obiektem no to wiadomo, że po kropce ma metody i właściwości i możemy się
do nich odwoływać albo tworzyć swoje.
Chciałbym tutaj utworzyć coś takiego jak counter i przypisać mu np. zero.
W ten sposób, w tym obiekcie będzie coś takiego zapisane i do tego będziemy mogli się tutaj odwołać, ale
nie będziemy tego robić w tym miejscu.
Zrobimy to wewnątrz funkcji. Pokażę ci w jaki sposób.
Pamiętasz, być może, że w lekcji o funkcjach pokazywałem ci, iż mamy tutaj taką specjalną zmienną, która
nazywa się arguments i mamy w niej tablicę, a raczej obiekt z tablicopodobny, który będzie zawierał
firstName czy lastName.
Ważne jest to, że możemy odwołać się do arguments,
callee, w ten sposób i dzięki temu odwołamy się do właśnie tej funkcji.
Natomiast, co jest ważne, to nie jest to standard.
Działa to praktycznie w każdym środowisku uruchomieniowym.
Ale jest w JavaScript'cie coś takiego jak stict mode, o którym mówię w drugiej części tego kursu i tam to nie
zadziała.
Więc zamiast odwoływać się arguments.callee, co kieruje na tę funkcję, to lepiej byłoby się tutaj odwołać
po prostu do f. Po to nazywamy funkcję, również w tym kursie o tym mówiłem, żeby się do nich móc odwołać,
ale powiedzmy, że na razie zostawimy arguments callee, czyli arguments callee, skoro kieruje na funkcję, to pokazywałem
ci, że możemy się odwołać do f i wpisać sobie counter, czyli tutaj również mógłbym napisać counter, w ten
sposób do obiektów właśnie tutaj, tej funkcji coś będę mógł przepisać i teraz będę chciał sprawdzić czy
wcześniej coś tam już zostało zapisane.
Czyli, kiedy pierwszy raz taką funkcję wykonamy to wiesz, że nie mamy tam czegoś takiego jak counter, bo
nie jest to standardowa właściwość.
Czyli tutaj będę chciał się znowu odwołać do tego samego.
Już ci pokazywałem taki zapis skrócony if, w lekcji o tym zapisie.
Jeżeli coś zostanie zwrócone, a nie undefined, to chcemy z tego skorzystać, a jeżeli zostanie zwrócone
undefined, to będę chciał tutaj przypisać 0.
Czyli w ten sposób, kiedy taką funkcję wykonamy to do f, czyli do tej funkcji, bo jest to obiekt. Zostanie
przypisany counter.
Jeżeli jakiś tam był, jeżeli nie to 0. I tutaj będziemy mogli napisać firstName, lastName i dopiszemy
funkcja wywołana po raz i do tego będziemy chcieli dodać tutaj jeszcze s zabrakło tylko, żeby za każdym
razem, kiedy ta funkcja będzie wykonywana zwiększać ten licznik, to pamiętasz, że możemy użyć inkrementacji,
czyli w tym momencie wyświetli sobie
funkcję wywołaną po raz, może tutaj damy 1, czyli na początku będzie po raz pierwszy, tu zostanie zwiększone.
I za każdym razem, kiedy ją wywołamy powinniśmy mieć kolejną liczbę.
Zobaczmy.
Odwołamy się do f.
Podamy znowu Jan Kowalski i zobaczmy Jan Kowalski.
Funkcja wywołana po raz pierwszy. Jeżeli ją teraz wywołałam po raz drugi, nie mają znaczenia parametry,
mogę je kompletnie zmienić.
Funkcja wywołana po raz drugi, po raz trzeci itd.
Więc tutaj pokazałem ci po prostu, że możemy do obiektu, jakim jest funkcja, przypisać sobie własną właściwość
i coś w niej przechowywać.
To nie musi być number, tam mogą być dowolne rzeczy i możemy później z tego korzystać.
I to czasem może okazać się również przydatne. W poprzednich lekcjach pokazywałem ci, że skoro string
czy boolean również jest obiektem, to ma pewne właściwości i metody.
Mógłbyś zapytać jakie właściwości i metody ma funkcja.
Jeżeli chodzi o właściwości, to możemy sprawdzić ile parametrów funkcja powinna przyjmować, więc możemy
zrobić sobie console.log(f.length),
to oznacza, że zobaczymy liczbę parametrów, jakie zostały tutaj zdefiniowane. Jak widzisz 2, a nie jakie
zostały przekazane.
To jest jedna z właściwości.
A jeśli chodzi o metody, to funkcja ma takie metody, jak np. call, apply czy bind, ale są to metody zaawansowane,
związane z programowaniem obiektowym.
Dlatego mówię o nich dopiero w drugiej części tego kursu, do której serdecznie Cię również zapraszam.
Kod
Obiekt Function · 1 min
function sayHello(firstName, lastName) {
return firstName + " " + lastName;
}
// var f = new Function("firstName", "lastName", "return firstName + ' ' + lastName;");
function f(firstName, lastName) {
arguments.callee.counter = arguments.callee.counter ? arguments.callee.counter : 1;
return firstName + " " + lastName + ", funkcja wywołana po raz " + arguments.callee.counter++;
}
console.log( f.length );