0:00:00.920,0:00:06.290
Prosta strona, jak moja,[br]zawiera tagi HTML, takie jak te.

0:00:07.236,0:00:11.890
A żeby nadać stronie styl,[br]jak wprowadzamy CSS?

0:00:12.798,0:00:14.562
Dodajemy tag "style".

0:00:14.703,0:00:17.158
Przeglądarka, widząc ten tag, wie,

0:00:17.258,0:00:20.195
że do jego przetwarzania[br]ma używać CSS-u.

0:00:21.032,0:00:23.681
Zwykle tag "style"[br]umieszczamy w "head",

0:00:23.781,0:00:27.424
by mieć pewność, że przeglądarka[br]przetworzy style,

0:00:27.539,0:00:30.020
zanim wykona tagi HTML.

0:00:30.959,0:00:34.802
Inaczej, jeśli umieścimy "style"[br]tutaj, u dołu,

0:00:35.530,0:00:40.468
nastąpi tzw. błąd FOUC[br](flash of unstyled content)

0:00:40.568,0:00:44.071
i ludzie zobaczą[br]naszą stronę gołą. Fuj!

0:00:44.889,0:00:47.830
Niech ten tag wróci na miejsce.

0:00:48.981,0:00:51.924
No dobrze. Teraz strona ma styl.

0:00:52.024,0:00:55.427
A jak wprowadzamy JavaScript,

0:00:55.527,0:00:57.533
żeby strona była interaktywna?

0:00:58.532,0:01:01.500
W tym celu dodajemy[br]tag "script".

0:01:01.600,0:01:06.267
Najlepiej będzie wpisać go[br]na samym dole strony,

0:01:07.571,0:01:10.128
tuż przed tagiem końcowym "/body".

0:01:11.279,0:01:14.590
Umieściłam go tutaj.[br]Później objaśnię, dlaczego.

0:01:16.035,0:01:18.720
A co mogę wpisać[br]w tym tagu "script"?

0:01:20.037,0:01:24.934
Każdy prawidłowy kod[br]JavaScript, np. "var four = 2 +2;".

0:01:25.688,0:01:30.112
Ale to nieciekawe,[br]bo na stronie nie dzieje się nic,

0:01:30.212,0:01:33.947
a użytkownicy Khan Academy wiedzą,[br]że 2 + 2 = 4.

0:01:34.957,0:01:37.630
Żeby sprawdzić, czy to działa,

0:01:37.730,0:01:39.829
napiszę tu tę linię kodu.

0:01:42.258,0:01:45.889
Dobrze. Nic nie widzicie, prawda?

0:01:46.017,0:01:48.927
Może jeszcze nie znacie tej funkcji.

0:01:49.674,0:01:52.499
Funkcja "console.log"[br]jest stosowana

0:01:52.599,0:01:56.117
w wielu środowiskach JS,[br]m.in w przeglądarkach.

0:01:56.217,0:01:59.160
Będziemy wpisywać różne rzeczy[br]w konsolę JS.

0:01:59.263,0:02:01.577
Znajdziecie ją w swojej przeglądarce.

0:02:01.677,0:02:05.462
Trzeba wcisnąć Command-Option-I

0:02:05.860,0:02:10.402
lub Control-Option-I,

0:02:10.502,0:02:14.927
albo wcisnąć prawy przycisk myszy[br]i wybrać "Zbadaj element".

0:02:15.027,0:02:20.372
Przerwijcie oglądanie i wywołajcie[br]konsolę, żeby zobaczyć, jak wygląda.

0:02:21.931,0:02:24.404
Widzieliście? Świetnie.

0:02:24.504,0:02:28.324
Już możecie zamknąć.[br]Zajmuje dużo miejsca!

0:02:28.424,0:02:32.862
I rozprasza nas, bo pokazuje[br]każdy błąd w trakcie pisania.

0:02:32.962,0:02:35.411
Ale to świetne narzędzie[br]do debugowania,

0:02:35.515,0:02:37.709
nie zapomnijcie o nim.

0:02:38.834,0:02:42.171
Zrobię coś na stronie[br]za pomocą JavaScript.

0:02:42.325,0:02:46.352
Użyję kodu, który na razie[br]wyda się bezsensowny.

0:02:50.805,0:02:55.264
...na stronie...

0:02:57.347,0:03:00.405
Widzicie, co się stało?[br]Strona zniknęła.

0:03:00.505,0:03:03.127
Widać komunikat hakera.

0:03:03.229,0:03:07.614
Później objaśnię szczegółowo,[br]jak działa ten program.

0:03:07.714,0:03:11.552
W skrócie: znalazł tag "body"[br]i zastąpił zawartość.

0:03:12.460,0:03:16.430
A co by było, gdybym skopiowała[br]i wkleiła ten tag "script"

0:03:16.530,0:03:19.837
do tagu "head" razem z tagiem "style"?

0:03:21.077,0:03:23.366
Nie działa. Dlaczego?

0:03:24.325,0:03:28.697
Bo strona odczytuje tag "script",[br]zanim zobaczy tag "body".

0:03:28.797,0:03:33.581
I mówi: "Jeszcze nie widziałam[br]`document.body`,

0:03:33.681,0:03:37.954
a wy przy nim majstrujecie.[br]Tak nie wolno!".

0:03:39.028,0:03:43.762
Dlatego musimy umieścić[br]tag "script" u dołu strony.

0:03:43.874,0:03:46.761
Żeby strona najpierw[br]zobaczyła tag "body"

0:03:46.861,0:03:50.995
i całą jego zawartość. Dopiero[br]wtedy możemy coś z tym zrobić.

0:03:51.095,0:03:54.550
Najpierw upewnijmy się,[br]że strona istnieje.

0:03:54.650,0:03:56.672
W języku CSS jest inaczej:

0:03:56.772,0:04:00.277
tag "style" umieszczamy na początku,[br]bo analizator CSS

0:04:00.377,0:04:04.435
bez problemu nadaje styl[br]rzeczom, których jeszcze nie ma.

0:04:04.535,0:04:09.803
Zastosuje go, gdy się pojawią.[br]JavaScript DOM tak nie robi.

0:04:09.909,0:04:12.360
Wpisujcie więc ten tag u dołu.

0:04:13.920,0:04:18.510
Spróbujcie dodać "script" w następnym[br]zadaniu. Pamiętajcie, ma być u dołu.

0:04:18.610,0:04:23.931
A później opowiem więcej[br]o tej linii kodu.