0:00:00.952,0:00:05.828
Formularz to sposób, w który strona[br]przesyła informacje do serwera.

0:00:05.964,0:00:09.961
W Khan Academy nie pozwalamy[br]na kontakt stron z serwerami

0:00:10.103,0:00:13.653
- z przyczyn bezpieczeństwa.[br]Nie uczymy tu formularzy.

0:00:13.753,0:00:17.134
Ale skoro zgłębiacie JavaScript,[br]by modyfikować strony,

0:00:17.234,0:00:20.758
pokażę, jak używać go[br]do przetwarzania elementów formularza.

0:00:20.846,0:00:23.738
Nie trzeba będzie[br]wysyłać ich do serwera.

0:00:23.859,0:00:26.679
Zrobiłam na tej stronie[br]kilka formularzy,

0:00:26.811,0:00:30.093
by poznać nazwę użytkownika[br]oraz język.

0:00:30.159,0:00:33.854
Chcę, by strona[br]pisała powitanie w tym języku,

0:00:33.965,0:00:36.604
gdy użytkownik kliknie na przycisk.

0:00:36.720,0:00:38.103
Krok pierwszy:

0:00:38.156,0:00:41.721
element "przycisk"[br]musi być przechowywany w zmiennej.

0:00:41.814,0:00:48.181
Napiszemy więc:[br]"document.getElementById("button")".

0:00:49.778,0:00:53.173
Następny krok - to zdefiniować[br]funkcję odbiornika zdarzeń:

0:00:53.275,0:00:56.796
"var onButtonClick = function(){",

0:00:57.928,0:01:00.429
a wewnątrz

0:01:00.591,0:01:03.831
zaczniemy od wiadomości.

0:01:03.971,0:01:08.614
Zatem:[br]"document.getElementById("message")",

0:01:08.764,0:01:12.214
i już mamy "div".[br]Teraz wystarczy napisać:

0:01:12.792,0:01:14.861
textContent +=

0:01:15.650,0:01:20.805
"Zostałem kliknięty![br]Dziękuję bardzo!".

0:01:20.989,0:01:22.864
"Div" pełen wdzięczności!

0:01:23.475,0:01:24.971
I wreszcie krok trzeci:

0:01:25.087,0:01:28.491
dodamy detektor zdarzeń do przycisku,

0:01:28.652,0:01:31.509
by kliknięcie przywoływało tę funkcję.

0:01:32.125,0:01:35.158
Piszę więc: "("click", onButtonClick)".

0:01:36.733,0:01:39.488
Zatrzymajcie odtwarzanie[br]i sprawdźcie sami,

0:01:39.588,0:01:43.007
czy to działa tak,[br]jak się spodziewaliście.

0:01:43.107,0:01:47.438
A teraz niech program[br]powie coś na podstawie formularza.

0:01:47.568,0:01:50.372
Musimy wymyślić, jak zdobyć nazwę,

0:01:50.472,0:01:53.568
którą użytkownik[br]wpisał w odpowiednie pole.

0:01:53.681,0:01:56.146
Zróbmy w tym celu zmienną.

0:01:57.051,0:02:00.047
Piszę: "var name ="...

0:02:00.147,0:02:04.923
"document.getElementById",

0:02:05.026,0:02:07.202
bo nazwa ma ID.

0:02:07.341,0:02:10.425
Mamy to tutaj.

0:02:11.889,0:02:15.024
Zróbmy nowy ciąg dla powitania

0:02:15.124,0:02:17.250
i dołączmy nazwę.

0:02:17.389,0:02:21.200
Więc: "var greeting = "Heyaz"

0:02:21.348,0:02:24.753
(moje ulubione powitanie) + name".[br]No dobrze.

0:02:24.845,0:02:29.281
Mamy ciąg i to,[br]co jest przechowywane w zmiennej.

0:02:30.674,0:02:33.878
Ten ciąg tekstu

0:02:34.083,0:02:38.127
to powinno być powitanie.

0:02:39.358,0:02:43.182
Zobaczmy... Znaleźliśmy[br]pole wprowadzania imienia,

0:02:43.344,0:02:47.996
zrobiliśmy ciąg powitania[br]i połączyliśmy go z "div".

0:02:48.160,0:02:51.818
Zatrzymajcie odtwarzanie[br]i sprawdźcie, czy się udało.

0:02:53.151,0:02:55.519
Nie całkiem, prawda?

0:02:55.638,0:02:59.343
Zobaczyliście: "Heyaz [object Object]"

0:02:59.458,0:03:01.998
albo "Heyaz object Element"?

0:03:02.144,0:03:04.854
Jeśli wasze imię nie brzmi "Object"

0:03:04.954,0:03:08.048
(bez urazy, jeśli brzmi, ładne imię!),

0:03:08.148,0:03:10.456
to znaczy, że coś jest nie tak.

0:03:10.549,0:03:13.840
Spodziewaliśmy się zobaczyć[br]to, co wpisaliście,

0:03:13.975,0:03:16.487
a zamiast tego zobaczyliśmy "object".

0:03:16.592,0:03:20.666
To znaczy, że nazwa "zmienna"[br]wskazuje na obiekt,

0:03:20.782,0:03:24.033
nie zaś na ciąg,[br]na który miała wskazywać.

0:03:24.242,0:03:26.541
Może już rozgryźliście ten problem.

0:03:26.617,0:03:31.069
Przechowywaliśmy cały obiekt[br]"element" w zmiennej "name".

0:03:32.253,0:03:35.109
A obiekt "element" jest duży,

0:03:35.183,0:03:39.637
zawiera mnóstwo informacji o elemencie:[br]o jego atrybutach i metodach.

0:03:39.744,0:03:42.886
Aby się dowiedzieć, co wpisał[br]użytkownik, musimy wejść

0:03:42.986,0:03:46.749
do szczególnej właściwości[br]elementu: jego wartości.

0:03:46.905,0:03:49.622
Wpiszę więc "value"

0:03:49.770,0:03:52.060
i powinno już być w porządku.

0:03:52.178,0:03:56.253
Zatrzymajcie odtwarzanie[br]i sprawdźcie jeszcze raz.

0:03:56.391,0:03:58.128
Udało się, prawda?

0:03:58.244,0:04:01.464
To częsty błąd, więc bądźcie uważni.

0:04:02.346,0:04:04.854
Chcę pokazać[br]jeszcze jedną częstą pomyłkę.

0:04:04.935,0:04:08.570
Zaznaczę tę linię i...

0:04:09.403,0:04:11.820
i przeniosę ją poza funkcję.

0:04:14.451,0:04:16.487
Teraz przerwijcie odtwarzanie,

0:04:16.587,0:04:19.668
wpiszcie input i naciśnijcie przycisk.

0:04:23.546,0:04:26.050
Jeśli jest tak, jak powinno,[br]to zobaczycie

0:04:26.166,0:04:29.653
pusty ciąg zamiast swojego imienia.[br]Wiecie, dlaczego?

0:04:29.755,0:04:34.111
Zastanówcie się nad tym, kiedy[br]wykonywany jest każdy wiersz kodu.

0:04:34.200,0:04:35.613
W kodzie bieżącym

0:04:35.682,0:04:37.315
przeglądarka ładuje stronę

0:04:37.465,0:04:39.893
i wykonuje JavaScript[br]wiersz po wierszu.

0:04:40.035,0:04:43.237
Najpierw przechowuje[br]element "przycisk" w zmiennej.

0:04:43.299,0:04:46.859
Później umieszcza w zmiennej[br]wartość elementu input.

0:04:46.958,0:04:50.597
Ale przechowuje wartość w czasie,[br]gdy strona się ładuje,

0:04:50.732,0:04:52.269
a wtedy to pusty ciąg.

0:04:52.769,0:04:56.495
Następnie definiuje funkcję[br]i przypisuje detektor zdarzeń.

0:04:56.589,0:04:58.097
Gdy zostaje on przywołany,

0:04:58.210,0:05:02.625
nazwa - to ten sam ciąg,[br]co podczas ładowania strony.

0:05:02.748,0:05:06.565
Detektor nie pozna ostatniej rzeczy,[br]którą wpisał użytkownik.

0:05:06.665,0:05:10.551
Dlatego ta linia kodu musi być

0:05:10.651,0:05:13.399
wewnątrz tej funkcji[br]detektora zdarzeń.

0:05:13.514,0:05:17.788
Znajdzie wartość w czasie,[br]gdy dochodzi do zdarzenia.

0:05:18.763,0:05:21.828
Dodajmy kod,[br]żeby przyjrzeć się wartości "język".

0:05:21.965,0:05:24.258
Upewnimy się, że rozumiecie.

0:05:24.396,0:05:29.744
W detektorze zdarzeń umieszczę[br]tę wartość w zmiennej "lang" (język).

0:05:30.536,0:05:34.297
Spójrzcie na to okropne wcięcie!

0:05:34.397,0:05:36.735
Wyrównajmy te wiersze.

0:05:36.875,0:05:37.896
No dobrze...

0:05:38.079,0:05:43.613
"var lang = document.getElementByID"...

0:05:43.798,0:05:46.603
("lang").value".

0:05:47.572,0:05:51.300
Zauważcie,[br]że nazywam zmienne tak samo, jak ID

0:05:51.400,0:05:55.102
- chociaż wy nie musicie tego robić.

0:05:55.236,0:05:59.909
Chcę, żeby zależnie od wybranego języka[br]pojawiała się inna wiadomość.

0:06:00.048,0:06:03.879
Zwróćcie uwagę, że wartość to nie[br]to samo, co w liście rozwijalnej.

0:06:04.011,0:06:06.735
To atrybut wartości w HTML.

0:06:06.928,0:06:11.194
Zatem "lang" powinien[br]mieć wartość "en", "es" lub "plt".

0:06:12.076,0:06:17.370
Czyli: "if (lang === "es")",

0:06:17.995,0:06:23.988
powinno się wyświetlić[br]powitanie "Hola".

0:06:24.084,0:06:26.844
Zróbmy tę powitalną zmienną tutaj.

0:06:26.932,0:06:32.068
Wtedy "greeting" będzie mieć[br]postać "Hola" plus imię.

0:06:35.452,0:06:41.612
A jeśli wartość języka to "plt",[br]czyli Pig Latin (świńska łacina),

0:06:41.750,0:06:44.298
to powitanie będzie brzmieć

0:06:44.398,0:06:48.531
"Ello-hey" plus imię.

0:06:48.627,0:06:53.470
I użyjemy polecenia "else"[br]dla angielskiego.

0:06:53.570,0:06:56.612
Przeniosę to tutaj. No dobrze.

0:06:57.425,0:07:00.559
A jeśli chcecie[br]wesołe zadanie dodatkowe,

0:07:00.689,0:07:03.903
spróbujcie napisać[br]konwerter nazw na świńską łacinę,

0:07:04.023,0:07:08.338
żeby przekładane było[br]całe powitanie, z imieniem.

0:07:08.469,0:07:09.662
Byłoby super!

0:07:10.367,0:07:13.284
Przerwijcie odtwarzanie,[br]wprowadźcie imię,

0:07:13.400,0:07:16.943
wybierzcie inny język[br]i wypróbujcie program.

0:07:19.553,0:07:20.575
Nieźle, co?

0:07:20.675,0:07:24.755
Z formularzami i odrobiną JavaScript[br]można robić świetne rzeczy:

0:07:24.930,0:07:27.680
gry słowne i liczbowe,[br]wymyślanie opowiastek...

0:07:27.801,0:07:30.188
A jeśli macie serwer[br]poza Khan Academy,

0:07:30.302,0:07:33.462
używajcie JavaScript[br]do przetworzenia formularza

0:07:33.590,0:07:35.558
przed wysłaniem go do serwera.

0:07:35.658,0:07:38.544
W formularzach jest więcej zdarzeń[br]do nasłuchu:

0:07:38.644,0:07:40.883
wciskanie klawiszy i wybranie elementu.

0:07:40.975,0:07:44.163
Pamiętajcie, by patrzeć[br]na wartość pola do wprowadzania

0:07:44.263,0:07:47.835
i sprawdzać ją w odpowiednim momencie.

0:07:48.014,0:07:52.154
Poćwiczycie to w następnym zadaniu!