JavaScript: Globalny obiekt window
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.
Tą lekcją zaczynamy poznawanie obiektowego modelu dokumentu i zaczniemy od obiektu, który jest nazywany
globalnym obiektem i w hierarchii obiektów stoi najwyżej w obiektowy model dokumentu.
Jest to window, czyli okno przejdziemy od razu do kodu i pokażę ci na czym sprawa polega.
Zróbmy sobie console.log.
To jest funkcja, która dla nas jest dostępna i wpiszemy tutaj window.
Oznacza to tylko tyle, że mamy taką zmienną
window, to jest nasz zapis
JavaScript'owy, ale wewnątrz przeglądarki tak jak wspomniałem dzięki obiektowe modelowi dokumentu będziemy
mieli pewne zmienne czy obiekty, do których się można odwołać.
Jednym z nich jest właśnie window i odświerzymy stronę.
Jak widzisz windows został wyświetlony.
Możemy do niego zajrzeć i bardzo wiele rzeczy tutaj się znajduje.
Między innymi to, co już znasz czyli infinity.
Pamiętasz jak pokazywałem ci że mamy taką zmienną jak infinity?
Okazuje się, że ona jest tutaj w window akurat w tym przypadku.
Tutaj będzie bardzo dużo rzeczy i w zależności od przeglądarki to się może różnić w zależności od tego
jakie API wspiera przeglądarka np. tutaj widzimy audio.
Jest to funkcja, która kieruje na taki konstruktor HTML audio element.
Natomiast jeśli bylibyśmy w przeglądarce, która nie wspiera audio to tego byśmy tutaj nie zobaczyli.
Nie martw się, że tych rzeczy jest jednak bardzo dużo, bo w większości z nich nigdy nie musimy korzystać
natomiast mamy właśnie taki obiekt window i teraz co ciekawe jest to obiekt który w hierarchii jest
najwyżej.
I chcę ci teraz pokazać jakie ma to konsekwencje.
Przejdźmy sobie do kodu i będę chciał może to wykomentować.
Stworzyć funkcję o nazwie szybko sayHello i teraz wewnątrz tej funkcji stworzę zmienną message.
Napiszę Cześć.
Zauważ, że tą zmianą stworzyłem bez słowa kluczowego var.
Na razie jest wszystko OK i odwołamy się do alert funkcja, którą już widziałeś message, ale jest to właśnie
funkcja dostępna na nas przeglądarce, czyli w obiektowym modelu dokumentu, właśnie w tym API można powiedzieć
odświeżamy, zobaczmy, nic się nie stało, ale teraz tę funkcję oczywiście musimy wywołać. To może zróbmy
to od razu tutaj, sayHello, odświeżam.
No i właśnie okienko alert zostało dla nas wyświetlone, tak jak ci wspominałem w prezentacji,
to nie jest sam JavaScript, ale poprzez JavaScript je wywołaliśmy. Mamy tutaj
Cześć. Natomiast co się teraz stało?
Użyłem tutaj utworzenia nowej zmiennej czyli message bez słowa kluczowego var.
Mówiłem ci już o zasięgu zmiennych o zakresie zmiennych.
To znaczy, jeżeli tworzymy zmienną wewnątrz funkcji to ona tylko wewnątrz tej funkcji jest dostępna.
Jeżeli nie użyjemy var, to taka zmienna staje się globalna czyli będzie widoczna na zewnątrz.
Gdybym teraz pisał console.log message, no to zobaczysz, że
zobaczymy tutaj Cześć, czyli utworzyliśmy zmienną, która tutaj się gdzieś w tym zakresie znajduje.
I dlaczego mówię o tym w przypadku wndow? Właśnie dlatego, że to co tutaj zrobiliśmy jest alternatywne
do zapisania window.message równa się Cześć. Ja to wykomentuję.
Jak widzisz więc, nie zapisujemy tego w tym momencie, utworzymy po prostu w ten sposób zmienną,
ale jeżeli tutaj przejdę do window, to mogę się odwołać do właściwości tego obiektu, która będzie się
nazywał message,
bo tak nazwałem zmienną i kieruje ona tutaj na ten string Cześć.
Czyli jeżeli utworzymy zmienną globalną, czego nie powinniśmy robić, tak jak tutaj nie używając słowa kluczowego var,
to od razu zostanie ona przypisana do obiektu globalnego, a w przypadku przeglądarki obiektem globalnym
jest window.
Przy okazji, chcę ci jeszcze pokazać kilka innych funkcji.
Oczywiście do window będziemy się odwoływać w różnych przypadkach jeszcze, to w tym kursie zobaczysz, bo
tam jest wiele ciekawych właściwości i metod, ale kilka funkcji, które są dostępne takie jak alert, chce ci
jeszcze pokazać.
Przy okazji skoro do alert możemy się odwołać jako do globalnej funkcji, to być może się domyślasz, że
ona się znajduje pod window, windows.alert kieruje na funkcję i przy okazji widzisz ten świat, o którym
mówiłem,
w przeglądarce mamy interpreter JavaScript'u czyli JavaScript Engine i ten drugi Engine czyli DOM API
i właśnie tak jak mówiłem jeśli w JavaScript nie skorzystamy z funkcji alert, którą tutaj mamy przekażemy jakiś
parametr.
To jak widzisz nie możemy zobaczyć, co ona robi wewnątrz. To okienko które się wyświetla,
nie wiemy jak ono jest wyświetlane.
Tutaj mamy taki zapis native code czyli native code, kod natywny, który jest gdzieś wewnątrz.
Tutaj widać, że stąd to co przekażemy przechodzi do tego natywnego świata i dopiero później coś się dzieje.
Tak jak wspomniałem już wracając do tego jeżeli coś jest globalne to jest dostępne pod window
kropka
właśnie ta nazwa, ale dla uproszczenia korzystamy z takiej funkcji jako alert i mamy jeszcze dwie takie
ciekawe funkcje, które są tutaj dostępne, a nie ma ich w jądrze języka JavaScript, specyfikacji.
Warto tutaj z nich skorzystać.
Pierwsza z nich jest to funkcja confirm, więc możemy utworzyć zmienną nazwę ją con i odwołujemy się
do funkcji confirm, wywołujemy ją.
I tutaj podajemy string, który się wyświetli. Na przykład: "Czy wyrażasz zgodę?"
Teraz ta funkcja, jak już wiesz, zostanie wywołana, to co ona zwróci, zostanie zapisane tutaj.
Ta funkcja może zwrócić true lub false. Zobaczmy, czy wyrażasz zgodę.
Jeżeli dam OK to pod con, niestety tu się do tego nie odwołamy, bo jest to wewnątrz funkcji, więc może
zróbmy console.log jeszcze raz.
Czy wyrażasz zgodę?
Ok.
Zwróciło nam true.
Jeżeli wcisnę Cancel, to tutaj będzie zwrócone false,
czyli dzięki tej funkcji, która jest dostępna możesz zapytać użytkownika czy na coś wyraża zgodę.
Jeżeli wyrazi to tu będziesz miał true i możemy skorzystać z if'a.
Jeżeli nie, to będzie tutaj false.
No i teraz to może wykomentuje.
Pokażę ci jeszcze jedną funkcję, która nazywa się prompt i np. możemy nazwać zmienną ans jak answer,
czyli odpowiedź, prompt. Cały czas przypominam, że kiedy odwołujemy się do prompt, to jest tak samo jak byśmy napisali
window.prompt.
Odwołamy się do prompt i tutaj jako pierwszy parametr też podajemy pytanie np. "Jak masz na imię?" A jako
drugi możemy, ale nie musimy podać,
będzie to tekst który będzie tam domyślnie się znajdował. Na przykład podaj swoje imię i teraz będziemy
chcieli ans tutaj wyświetlić.
Jak widzisz, wygląda to w ten sposób, ten drugi parametr, czyli text znajduje się tutaj.
Jeżeli sobie wpisze Maciej to Maciej, to Maciej zostanie tutaj zwrócone.
To są takie przydatne funkcje, które od razu na obiekcie window są dostępne, czyli bezpośrednio do nich
się można odwoływać. Z tej lekcji chcę aby zapamiętał, że obiekt window jest globalny i jeżeli utworzymy
zmienną gdziekolwiek nie będzie ona miała var, to ona zostanie przypisana do tego globalnego obiektu
i nie powinniśmy tego robić powinniśmy na to uważać.
Chyba, że celowo chcemy coś wypuścić na zewnątrz i w tej funkcji dużo rzeczy możemy zdefiniować.
One nie są na zewnątrz widoczne, ale na końcu możemy napisać window, nazwać jakoś nasz obiekt, na przykład
myObject i przypisać do niego tutaj jakąś referencje, a ten obiekt może stąd różne rzeczy pobierać.
Na razie może nie wydaje się to przydatne, ale jeżeli tak zapiszemy to myObject będzie dostępne we
wszystkich innych funkcjach w globalnym zakresie.
Kod
Globalny obiekt window · 1 min
// console.log(window);
function sayHello() {
// window.message = "Cześć!";
message = "Cześć!";
// alert(message);
// var con = confirm("Czy wyrażasz zgodę?");
var ans = prompt("Jak masz na imię?", "Podaj swoje imię");
console.log(ans);
}
sayHello();
console.log(message);