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.