1
00:00:00,920 --> 00:00:06,290
Prosta strona, jak moja,
zawiera tagi HTML, takie jak te.

2
00:00:07,236 --> 00:00:11,890
A żeby nadać stronie styl,
jak wprowadzamy CSS?

3
00:00:12,798 --> 00:00:14,562
Dodajemy tag "style".

4
00:00:14,703 --> 00:00:17,158
Przeglądarka, widząc ten tag, wie,

5
00:00:17,258 --> 00:00:20,195
że do jego przetwarzania
ma używać CSS-u.

6
00:00:21,032 --> 00:00:23,681
Zwykle tag "style"
umieszczamy w "head",

7
00:00:23,781 --> 00:00:27,424
by mieć pewność, że przeglądarka
przetworzy style,

8
00:00:27,539 --> 00:00:30,020
zanim wykona tagi HTML.

9
00:00:30,959 --> 00:00:34,802
Inaczej, jeśli umieścimy "style"
tutaj, u dołu,

10
00:00:35,530 --> 00:00:40,468
nastąpi tzw. błąd FOUC
(flash of unstyled content)

11
00:00:40,568 --> 00:00:44,071
i ludzie zobaczą
naszą stronę gołą. Fuj!

12
00:00:44,889 --> 00:00:47,830
Niech ten tag wróci na miejsce.

13
00:00:48,981 --> 00:00:51,924
No dobrze. Teraz strona ma styl.

14
00:00:52,024 --> 00:00:55,427
A jak wprowadzamy JavaScript,

15
00:00:55,527 --> 00:00:57,533
żeby strona była interaktywna?

16
00:00:58,532 --> 00:01:01,500
W tym celu dodajemy
tag "script".

17
00:01:01,600 --> 00:01:06,267
Najlepiej będzie wpisać go
na samym dole strony,

18
00:01:07,571 --> 00:01:10,128
tuż przed tagiem końcowym "/body".

19
00:01:11,279 --> 00:01:14,590
Umieściłam go tutaj.
Później objaśnię, dlaczego.

20
00:01:16,035 --> 00:01:18,720
A co mogę wpisać
w tym tagu "script"?

21
00:01:20,037 --> 00:01:24,934
Każdy prawidłowy kod
JavaScript, np. "var four = 2 +2;".

22
00:01:25,688 --> 00:01:30,112
Ale to nieciekawe,
bo na stronie nie dzieje się nic,

23
00:01:30,212 --> 00:01:33,947
a użytkownicy Khan Academy wiedzą,
że 2 + 2 = 4.

24
00:01:34,957 --> 00:01:37,630
Żeby sprawdzić, czy to działa,

25
00:01:37,730 --> 00:01:39,829
napiszę tu tę linię kodu.

26
00:01:42,258 --> 00:01:45,889
Dobrze. Nic nie widzicie, prawda?

27
00:01:46,017 --> 00:01:48,927
Może jeszcze nie znacie tej funkcji.

28
00:01:49,674 --> 00:01:52,499
Funkcja "console.log"
jest stosowana

29
00:01:52,599 --> 00:01:56,117
w wielu środowiskach JS,
m.in w przeglądarkach.

30
00:01:56,217 --> 00:01:59,160
Będziemy wpisywać różne rzeczy
w konsolę JS.

31
00:01:59,263 --> 00:02:01,577
Znajdziecie ją w swojej przeglądarce.

32
00:02:01,677 --> 00:02:05,462
Trzeba wcisnąć Command-Option-I

33
00:02:05,860 --> 00:02:10,402
lub Control-Option-I,

34
00:02:10,502 --> 00:02:14,927
albo wcisnąć prawy przycisk myszy
i wybrać "Zbadaj element".

35
00:02:15,027 --> 00:02:20,372
Przerwijcie oglądanie i wywołajcie
konsolę, żeby zobaczyć, jak wygląda.

36
00:02:21,931 --> 00:02:24,404
Widzieliście? Świetnie.

37
00:02:24,504 --> 00:02:28,324
Już możecie zamknąć.
Zajmuje dużo miejsca!

38
00:02:28,424 --> 00:02:32,862
I rozprasza nas, bo pokazuje
każdy błąd w trakcie pisania.

39
00:02:32,962 --> 00:02:35,411
Ale to świetne narzędzie
do debugowania,

40
00:02:35,515 --> 00:02:37,709
nie zapomnijcie o nim.

41
00:02:38,834 --> 00:02:42,171
Zrobię coś na stronie
za pomocą JavaScript.

42
00:02:42,325 --> 00:02:46,352
Użyję kodu, który na razie
wyda się bezsensowny.

43
00:02:50,805 --> 00:02:55,264
...na stronie...

44
00:02:57,347 --> 00:03:00,405
Widzicie, co się stało?
Strona zniknęła.

45
00:03:00,505 --> 00:03:03,127
Widać komunikat hakera.

46
00:03:03,229 --> 00:03:07,614
Później objaśnię szczegółowo,
jak działa ten program.

47
00:03:07,714 --> 00:03:11,552
W skrócie: znalazł tag "body"
i zastąpił zawartość.

48
00:03:12,460 --> 00:03:16,430
A co by było, gdybym skopiowała
i wkleiła ten tag "script"

49
00:03:16,530 --> 00:03:19,837
do tagu "head" razem z tagiem "style"?

50
00:03:21,077 --> 00:03:23,366
Nie działa. Dlaczego?

51
00:03:24,325 --> 00:03:28,697
Bo strona odczytuje tag "script",
zanim zobaczy tag "body".

52
00:03:28,797 --> 00:03:33,581
I mówi: "Jeszcze nie widziałam
`document.body`,

53
00:03:33,681 --> 00:03:37,954
a wy przy nim majstrujecie.
Tak nie wolno!".

54
00:03:39,028 --> 00:03:43,762
Dlatego musimy umieścić
tag "script" u dołu strony.

55
00:03:43,874 --> 00:03:46,761
Żeby strona najpierw
zobaczyła tag "body"

56
00:03:46,861 --> 00:03:50,995
i całą jego zawartość. Dopiero
wtedy możemy coś z tym zrobić.

57
00:03:51,095 --> 00:03:54,550
Najpierw upewnijmy się,
że strona istnieje.

58
00:03:54,650 --> 00:03:56,672
W języku CSS jest inaczej:

59
00:03:56,772 --> 00:04:00,277
tag "style" umieszczamy na początku,
bo analizator CSS

60
00:04:00,377 --> 00:04:04,435
bez problemu nadaje styl
rzeczom, których jeszcze nie ma.

61
00:04:04,535 --> 00:04:09,803
Zastosuje go, gdy się pojawią.
JavaScript DOM tak nie robi.

62
00:04:09,909 --> 00:04:12,360
Wpisujcie więc ten tag u dołu.

63
00:04:13,920 --> 00:04:18,510
Spróbujcie dodać "script" w następnym
zadaniu. Pamiętajcie, ma być u dołu.

64
00:04:18,610 --> 00:04:23,931
A później opowiem więcej
o tej linii kodu.