WEBVTT

00:00:00.920 --> 00:00:06.290
Prosta strona, jak moja,
zawiera tagi HTML, takie jak te.

00:00:07.236 --> 00:00:11.890
A żeby nadać stronie styl,
jak wprowadzamy CSS?

00:00:12.798 --> 00:00:14.562
Dodajemy tag "style".

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

00:00:17.258 --> 00:00:20.195
że do jego przetwarzania
ma używać CSS-u.

00:00:21.032 --> 00:00:23.681
Zwykle tag "style"
umieszczamy w "head",

00:00:23.781 --> 00:00:27.424
by mieć pewność, że przeglądarka
przetworzy style,

00:00:27.539 --> 00:00:30.020
zanim wykona tagi HTML.

00:00:30.959 --> 00:00:34.802
Inaczej, jeśli umieścimy "style"
tutaj, u dołu,

00:00:35.530 --> 00:00:40.468
nastąpi tzw. błąd FOUC
(flash of unstyled content)

00:00:40.568 --> 00:00:44.071
i ludzie zobaczą
naszą stronę gołą. Fuj!

00:00:44.889 --> 00:00:47.830
Niech ten tag wróci na miejsce.

00:00:48.981 --> 00:00:51.924
No dobrze. Teraz strona ma styl.

00:00:52.024 --> 00:00:55.427
A jak wprowadzamy JavaScript,

00:00:55.527 --> 00:00:57.533
żeby strona była interaktywna?

00:00:58.532 --> 00:01:01.500
W tym celu dodajemy
tag "script".

00:01:01.600 --> 00:01:06.267
Najlepiej będzie wpisać go
na samym dole strony,

00:01:07.571 --> 00:01:10.128
tuż przed tagiem końcowym "/body".

00:01:11.279 --> 00:01:14.590
Umieściłam go tutaj.
Później objaśnię, dlaczego.

00:01:16.035 --> 00:01:18.720
A co mogę wpisać
w tym tagu "script"?

00:01:20.037 --> 00:01:24.934
Każdy prawidłowy kod
JavaScript, np. "var four = 2 +2;".

00:01:25.688 --> 00:01:30.112
Ale to nieciekawe,
bo na stronie nie dzieje się nic,

00:01:30.212 --> 00:01:33.947
a użytkownicy Khan Academy wiedzą,
że 2 + 2 = 4.

00:01:34.957 --> 00:01:37.630
Żeby sprawdzić, czy to działa,

00:01:37.730 --> 00:01:39.829
napiszę tu tę linię kodu.

00:01:42.258 --> 00:01:45.889
Dobrze. Nic nie widzicie, prawda?

00:01:46.017 --> 00:01:48.927
Może jeszcze nie znacie tej funkcji.

00:01:49.674 --> 00:01:52.499
Funkcja "console.log"
jest stosowana

00:01:52.599 --> 00:01:56.117
w wielu środowiskach JS,
m.in w przeglądarkach.

00:01:56.217 --> 00:01:59.160
Będziemy wpisywać różne rzeczy
w konsolę JS.

00:01:59.263 --> 00:02:01.577
Znajdziecie ją w swojej przeglądarce.

00:02:01.677 --> 00:02:05.462
Trzeba wcisnąć Command-Option-I

00:02:05.860 --> 00:02:10.402
lub Control-Option-I,

00:02:10.502 --> 00:02:14.927
albo wcisnąć prawy przycisk myszy
i wybrać "Zbadaj element".

00:02:15.027 --> 00:02:20.372
Przerwijcie oglądanie i wywołajcie
konsolę, żeby zobaczyć, jak wygląda.

00:02:21.931 --> 00:02:24.404
Widzieliście? Świetnie.

00:02:24.504 --> 00:02:28.324
Już możecie zamknąć.
Zajmuje dużo miejsca!

00:02:28.424 --> 00:02:32.862
I rozprasza nas, bo pokazuje
każdy błąd w trakcie pisania.

00:02:32.962 --> 00:02:35.411
Ale to świetne narzędzie
do debugowania,

00:02:35.515 --> 00:02:37.709
nie zapomnijcie o nim.

00:02:38.834 --> 00:02:42.171
Zrobię coś na stronie
za pomocą JavaScript.

00:02:42.325 --> 00:02:46.352
Użyję kodu, który na razie
wyda się bezsensowny.

00:02:50.805 --> 00:02:55.264
...na stronie...

00:02:57.347 --> 00:03:00.405
Widzicie, co się stało?
Strona zniknęła.

00:03:00.505 --> 00:03:03.127
Widać komunikat hakera.

00:03:03.229 --> 00:03:07.614
Później objaśnię szczegółowo,
jak działa ten program.

00:03:07.714 --> 00:03:11.552
W skrócie: znalazł tag "body"
i zastąpił zawartość.

00:03:12.460 --> 00:03:16.430
A co by było, gdybym skopiowała
i wkleiła ten tag "script"

00:03:16.530 --> 00:03:19.837
do tagu "head" razem z tagiem "style"?

00:03:21.077 --> 00:03:23.366
Nie działa. Dlaczego?

00:03:24.325 --> 00:03:28.697
Bo strona odczytuje tag "script",
zanim zobaczy tag "body".

00:03:28.797 --> 00:03:33.581
I mówi: "Jeszcze nie widziałam
`document.body`,

00:03:33.681 --> 00:03:37.954
a wy przy nim majstrujecie.
Tak nie wolno!".

00:03:39.028 --> 00:03:43.762
Dlatego musimy umieścić
tag "script" u dołu strony.

00:03:43.874 --> 00:03:46.761
Żeby strona najpierw
zobaczyła tag "body"

00:03:46.861 --> 00:03:50.995
i całą jego zawartość. Dopiero
wtedy możemy coś z tym zrobić.

00:03:51.095 --> 00:03:54.550
Najpierw upewnijmy się,
że strona istnieje.

00:03:54.650 --> 00:03:56.672
W języku CSS jest inaczej:

00:03:56.772 --> 00:04:00.277
tag "style" umieszczamy na początku,
bo analizator CSS

00:04:00.377 --> 00:04:04.435
bez problemu nadaje styl
rzeczom, których jeszcze nie ma.

00:04:04.535 --> 00:04:09.803
Zastosuje go, gdy się pojawią.
JavaScript DOM tak nie robi.

00:04:09.909 --> 00:04:12.360
Wpisujcie więc ten tag u dołu.

00:04:13.920 --> 00:04:18.510
Spróbujcie dodać "script" w następnym
zadaniu. Pamiętajcie, ma być u dołu.

00:04:18.610 --> 00:04:23.931
A później opowiem więcej
o tej linii kodu.