Prosta strona, jak moja, zawiera tagi HTML, takie jak te.
A żeby nadać stronie styl, jak wprowadzamy CSS?
Dodajemy tag "style".
Przeglądarka, widząc ten tag, wie,
że do jego przetwarzania ma używać CSS-u.
Zwykle tag "style" umieszczamy w "head",
by mieć pewność, że przeglądarka przetworzy style,
zanim wykona tagi HTML.
Inaczej, jeśli umieścimy "style" tutaj, u dołu,
nastąpi tzw. błąd FOUC (flash of unstyled content)
i ludzie zobaczą naszą stronę gołą. Fuj!
Niech ten tag wróci na miejsce.
No dobrze. Teraz strona ma styl.
A jak wprowadzamy JavaScript,
żeby strona była interaktywna?
W tym celu dodajemy tag "script".
Najlepiej będzie wpisać go na samym dole strony,
tuż przed tagiem końcowym "/body".
Umieściłam go tutaj. Później objaśnię, dlaczego.
A co mogę wpisać w tym tagu "script"?
Każdy prawidłowy kod JavaScript, np. "var four = 2 +2;".
Ale to nieciekawe, bo na stronie nie dzieje się nic,
a użytkownicy Khan Academy wiedzą, że 2 + 2 = 4.
Żeby sprawdzić, czy to działa,
napiszę tu tę linię kodu.
Dobrze. Nic nie widzicie, prawda?
Może jeszcze nie znacie tej funkcji.
Funkcja "console.log" jest stosowana
w wielu środowiskach JS, m.in w przeglądarkach.
Będziemy wpisywać różne rzeczy w konsolę JS.
Znajdziecie ją w swojej przeglądarce.
Trzeba wcisnąć Command-Option-I
lub Control-Option-I,
albo wcisnąć prawy przycisk myszy i wybrać "Zbadaj element".
Przerwijcie oglądanie i wywołajcie konsolę, żeby zobaczyć, jak wygląda.
Widzieliście? Świetnie.
Już możecie zamknąć. Zajmuje dużo miejsca!
I rozprasza nas, bo pokazuje każdy błąd w trakcie pisania.
Ale to świetne narzędzie do debugowania,
nie zapomnijcie o nim.
Zrobię coś na stronie za pomocą JavaScript.
Użyję kodu, który na razie wyda się bezsensowny.
...na stronie...
Widzicie, co się stało? Strona zniknęła.
Widać komunikat hakera.
Później objaśnię szczegółowo, jak działa ten program.
W skrócie: znalazł tag "body" i zastąpił zawartość.
A co by było, gdybym skopiowała i wkleiła ten tag "script"
do tagu "head" razem z tagiem "style"?
Nie działa. Dlaczego?
Bo strona odczytuje tag "script", zanim zobaczy tag "body".
I mówi: "Jeszcze nie widziałam `document.body`,
a wy przy nim majstrujecie. Tak nie wolno!".
Dlatego musimy umieścić tag "script" u dołu strony.
Żeby strona najpierw zobaczyła tag "body"
i całą jego zawartość. Dopiero wtedy możemy coś z tym zrobić.
Najpierw upewnijmy się, że strona istnieje.
W języku CSS jest inaczej:
tag "style" umieszczamy na początku, bo analizator CSS
bez problemu nadaje styl rzeczom, których jeszcze nie ma.
Zastosuje go, gdy się pojawią. JavaScript DOM tak nie robi.
Wpisujcie więc ten tag u dołu.
Spróbujcie dodać "script" w następnym zadaniu. Pamiętajcie, ma być u dołu.
A później opowiem więcej o tej linii kodu.