[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.92,0:00:06.29,Default,,0000,0000,0000,,Prosta strona, jak moja,\Nzawiera tagi HTML, takie jak te.
Dialogue: 0,0:00:07.24,0:00:11.89,Default,,0000,0000,0000,,A żeby nadać stronie styl,\Njak wprowadzamy CSS?
Dialogue: 0,0:00:12.80,0:00:14.56,Default,,0000,0000,0000,,Dodajemy tag "style".
Dialogue: 0,0:00:14.70,0:00:17.16,Default,,0000,0000,0000,,Przeglądarka, widząc ten tag, wie,
Dialogue: 0,0:00:17.26,0:00:20.20,Default,,0000,0000,0000,,że do jego przetwarzania\Nma używać CSS-u.
Dialogue: 0,0:00:21.03,0:00:23.68,Default,,0000,0000,0000,,Zwykle tag "style"\Numieszczamy w "head",
Dialogue: 0,0:00:23.78,0:00:27.42,Default,,0000,0000,0000,,by mieć pewność, że przeglądarka\Nprzetworzy style,
Dialogue: 0,0:00:27.54,0:00:30.02,Default,,0000,0000,0000,,zanim wykona tagi HTML.
Dialogue: 0,0:00:30.96,0:00:34.80,Default,,0000,0000,0000,,Inaczej, jeśli umieścimy "style"\Ntutaj, u dołu,
Dialogue: 0,0:00:35.53,0:00:40.47,Default,,0000,0000,0000,,nastąpi tzw. błąd FOUC\N(flash of unstyled content)
Dialogue: 0,0:00:40.57,0:00:44.07,Default,,0000,0000,0000,,i ludzie zobaczą\Nnaszą stronę gołą. Fuj!
Dialogue: 0,0:00:44.89,0:00:47.83,Default,,0000,0000,0000,,Niech ten tag wróci na miejsce.
Dialogue: 0,0:00:48.98,0:00:51.92,Default,,0000,0000,0000,,No dobrze. Teraz strona ma styl.
Dialogue: 0,0:00:52.02,0:00:55.43,Default,,0000,0000,0000,,A jak wprowadzamy JavaScript,
Dialogue: 0,0:00:55.53,0:00:57.53,Default,,0000,0000,0000,,żeby strona była interaktywna?
Dialogue: 0,0:00:58.53,0:01:01.50,Default,,0000,0000,0000,,W tym celu dodajemy\Ntag "script".
Dialogue: 0,0:01:01.60,0:01:06.27,Default,,0000,0000,0000,,Najlepiej będzie wpisać go\Nna samym dole strony,
Dialogue: 0,0:01:07.57,0:01:10.13,Default,,0000,0000,0000,,tuż przed tagiem końcowym "/body".
Dialogue: 0,0:01:11.28,0:01:14.59,Default,,0000,0000,0000,,Umieściłam go tutaj.\NPóźniej objaśnię, dlaczego.
Dialogue: 0,0:01:16.04,0:01:18.72,Default,,0000,0000,0000,,A co mogę wpisać\Nw tym tagu "script"?
Dialogue: 0,0:01:20.04,0:01:24.93,Default,,0000,0000,0000,,Każdy prawidłowy kod\NJavaScript, np. "var four = 2 +2;".
Dialogue: 0,0:01:25.69,0:01:30.11,Default,,0000,0000,0000,,Ale to nieciekawe,\Nbo na stronie nie dzieje się nic,
Dialogue: 0,0:01:30.21,0:01:33.95,Default,,0000,0000,0000,,a użytkownicy Khan Academy wiedzą,\Nże 2 + 2 = 4.
Dialogue: 0,0:01:34.96,0:01:37.63,Default,,0000,0000,0000,,Żeby sprawdzić, czy to działa,
Dialogue: 0,0:01:37.73,0:01:39.83,Default,,0000,0000,0000,,napiszę tu tę linię kodu.
Dialogue: 0,0:01:42.26,0:01:45.89,Default,,0000,0000,0000,,Dobrze. Nic nie widzicie, prawda?
Dialogue: 0,0:01:46.02,0:01:48.93,Default,,0000,0000,0000,,Może jeszcze nie znacie tej funkcji.
Dialogue: 0,0:01:49.67,0:01:52.50,Default,,0000,0000,0000,,Funkcja "console.log"\Njest stosowana
Dialogue: 0,0:01:52.60,0:01:56.12,Default,,0000,0000,0000,,w wielu środowiskach JS,\Nm.in w przeglądarkach.
Dialogue: 0,0:01:56.22,0:01:59.16,Default,,0000,0000,0000,,Będziemy wpisywać różne rzeczy\Nw konsolę JS.
Dialogue: 0,0:01:59.26,0:02:01.58,Default,,0000,0000,0000,,Znajdziecie ją w swojej przeglądarce.
Dialogue: 0,0:02:01.68,0:02:05.46,Default,,0000,0000,0000,,Trzeba wcisnąć Command-Option-I
Dialogue: 0,0:02:05.86,0:02:10.40,Default,,0000,0000,0000,,lub Control-Option-I,
Dialogue: 0,0:02:10.50,0:02:14.93,Default,,0000,0000,0000,,albo wcisnąć prawy przycisk myszy\Ni wybrać "Zbadaj element".
Dialogue: 0,0:02:15.03,0:02:20.37,Default,,0000,0000,0000,,Przerwijcie oglądanie i wywołajcie\Nkonsolę, żeby zobaczyć, jak wygląda.
Dialogue: 0,0:02:21.93,0:02:24.40,Default,,0000,0000,0000,,Widzieliście? Świetnie.
Dialogue: 0,0:02:24.50,0:02:28.32,Default,,0000,0000,0000,,Już możecie zamknąć.\NZajmuje dużo miejsca!
Dialogue: 0,0:02:28.42,0:02:32.86,Default,,0000,0000,0000,,I rozprasza nas, bo pokazuje\Nkażdy błąd w trakcie pisania.
Dialogue: 0,0:02:32.96,0:02:35.41,Default,,0000,0000,0000,,Ale to świetne narzędzie\Ndo debugowania,
Dialogue: 0,0:02:35.52,0:02:37.71,Default,,0000,0000,0000,,nie zapomnijcie o nim.
Dialogue: 0,0:02:38.83,0:02:42.17,Default,,0000,0000,0000,,Zrobię coś na stronie\Nza pomocą JavaScript.
Dialogue: 0,0:02:42.32,0:02:46.35,Default,,0000,0000,0000,,Użyję kodu, który na razie\Nwyda się bezsensowny.
Dialogue: 0,0:02:50.80,0:02:55.26,Default,,0000,0000,0000,,...na stronie...
Dialogue: 0,0:02:57.35,0:03:00.40,Default,,0000,0000,0000,,Widzicie, co się stało?\NStrona zniknęła.
Dialogue: 0,0:03:00.50,0:03:03.13,Default,,0000,0000,0000,,Widać komunikat hakera.
Dialogue: 0,0:03:03.23,0:03:07.61,Default,,0000,0000,0000,,Później objaśnię szczegółowo,\Njak działa ten program.
Dialogue: 0,0:03:07.71,0:03:11.55,Default,,0000,0000,0000,,W skrócie: znalazł tag "body"\Ni zastąpił zawartość.
Dialogue: 0,0:03:12.46,0:03:16.43,Default,,0000,0000,0000,,A co by było, gdybym skopiowała\Ni wkleiła ten tag "script"
Dialogue: 0,0:03:16.53,0:03:19.84,Default,,0000,0000,0000,,do tagu "head" razem z tagiem "style"?
Dialogue: 0,0:03:21.08,0:03:23.37,Default,,0000,0000,0000,,Nie działa. Dlaczego?
Dialogue: 0,0:03:24.32,0:03:28.70,Default,,0000,0000,0000,,Bo strona odczytuje tag "script",\Nzanim zobaczy tag "body".
Dialogue: 0,0:03:28.80,0:03:33.58,Default,,0000,0000,0000,,I mówi: "Jeszcze nie widziałam\N`document.body`,
Dialogue: 0,0:03:33.68,0:03:37.95,Default,,0000,0000,0000,,a wy przy nim majstrujecie.\NTak nie wolno!".
Dialogue: 0,0:03:39.03,0:03:43.76,Default,,0000,0000,0000,,Dlatego musimy umieścić\Ntag "script" u dołu strony.
Dialogue: 0,0:03:43.87,0:03:46.76,Default,,0000,0000,0000,,Żeby strona najpierw\Nzobaczyła tag "body"
Dialogue: 0,0:03:46.86,0:03:50.100,Default,,0000,0000,0000,,i całą jego zawartość. Dopiero\Nwtedy możemy coś z tym zrobić.
Dialogue: 0,0:03:51.10,0:03:54.55,Default,,0000,0000,0000,,Najpierw upewnijmy się,\Nże strona istnieje.
Dialogue: 0,0:03:54.65,0:03:56.67,Default,,0000,0000,0000,,W języku CSS jest inaczej:
Dialogue: 0,0:03:56.77,0:04:00.28,Default,,0000,0000,0000,,tag "style" umieszczamy na początku,\Nbo analizator CSS
Dialogue: 0,0:04:00.38,0:04:04.44,Default,,0000,0000,0000,,bez problemu nadaje styl\Nrzeczom, których jeszcze nie ma.
Dialogue: 0,0:04:04.54,0:04:09.80,Default,,0000,0000,0000,,Zastosuje go, gdy się pojawią.\NJavaScript DOM tak nie robi.
Dialogue: 0,0:04:09.91,0:04:12.36,Default,,0000,0000,0000,,Wpisujcie więc ten tag u dołu.
Dialogue: 0,0:04:13.92,0:04:18.51,Default,,0000,0000,0000,,Spróbujcie dodać "script" w następnym\Nzadaniu. Pamiętajcie, ma być u dołu.
Dialogue: 0,0:04:18.61,0:04:23.93,Default,,0000,0000,0000,,A później opowiem więcej\No tej linii kodu.