WEBVTT

00:00:00.952 --> 00:00:05.828
Formularz to sposób, w który strona
przesyła informacje do serwera.

00:00:05.964 --> 00:00:09.961
W Khan Academy nie pozwalamy
na kontakt stron z serwerami

00:00:10.103 --> 00:00:13.653
- z przyczyn bezpieczeństwa.
Nie uczymy tu formularzy.

00:00:13.753 --> 00:00:17.134
Ale skoro zgłębiacie JavaScript,
by modyfikować strony,

00:00:17.234 --> 00:00:20.758
pokażę, jak używać go
do przetwarzania elementów formularza.

00:00:20.846 --> 00:00:23.738
Nie trzeba będzie
wysyłać ich do serwera.

00:00:23.859 --> 00:00:26.679
Zrobiłam na tej stronie
kilka formularzy,

00:00:26.811 --> 00:00:30.093
by poznać nazwę użytkownika
oraz język.

00:00:30.159 --> 00:00:33.854
Chcę, by strona
pisała powitanie w tym języku,

00:00:33.965 --> 00:00:36.604
gdy użytkownik kliknie na przycisk.

00:00:36.720 --> 00:00:38.103
Krok pierwszy:

00:00:38.156 --> 00:00:41.721
element "przycisk"
musi być przechowywany w zmiennej.

00:00:41.814 --> 00:00:48.181
Napiszemy więc:
"document.getElementById("button")".

00:00:49.778 --> 00:00:53.173
Następny krok - to zdefiniować
funkcję odbiornika zdarzeń:

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

00:00:57.928 --> 00:01:00.429
a wewnątrz

00:01:00.591 --> 00:01:03.831
zaczniemy od wiadomości.

00:01:03.971 --> 00:01:08.614
Zatem:
"document.getElementById("message")",

00:01:08.764 --> 00:01:12.214
i już mamy "div".
Teraz wystarczy napisać:

00:01:12.792 --> 00:01:14.861
textContent +=

00:01:15.650 --> 00:01:20.805
"Zostałem kliknięty!
Dziękuję bardzo!".

00:01:20.989 --> 00:01:22.864
"Div" pełen wdzięczności!

00:01:23.475 --> 00:01:24.971
I wreszcie krok trzeci:

00:01:25.087 --> 00:01:28.491
dodamy detektor zdarzeń do przycisku,

00:01:28.652 --> 00:01:31.509
by kliknięcie przywoływało tę funkcję.

00:01:32.125 --> 00:01:35.158
Piszę więc: "("click", onButtonClick)".

00:01:36.733 --> 00:01:39.488
Zatrzymajcie odtwarzanie
i sprawdźcie sami,

00:01:39.588 --> 00:01:43.007
czy to działa tak,
jak się spodziewaliście.

00:01:43.107 --> 00:01:47.438
A teraz niech program
powie coś na podstawie formularza.

00:01:47.568 --> 00:01:50.372
Musimy wymyślić, jak zdobyć nazwę,

00:01:50.472 --> 00:01:53.568
którą użytkownik
wpisał w odpowiednie pole.

00:01:53.681 --> 00:01:56.146
Zróbmy w tym celu zmienną.

00:01:57.051 --> 00:02:00.047
Piszę: "var name ="...

00:02:00.147 --> 00:02:04.923
"document.getElementById",

00:02:05.026 --> 00:02:07.202
bo nazwa ma ID.

00:02:07.341 --> 00:02:10.425
Mamy to tutaj.

00:02:11.889 --> 00:02:15.024
Zróbmy nowy ciąg dla powitania

00:02:15.124 --> 00:02:17.250
i dołączmy nazwę.

00:02:17.389 --> 00:02:21.200
Więc: "var greeting = "Heyaz"

00:02:21.348 --> 00:02:24.753
(moje ulubione powitanie) + name".
No dobrze.

00:02:24.845 --> 00:02:29.281
Mamy ciąg i to,
co jest przechowywane w zmiennej.

00:02:30.674 --> 00:02:33.878
Ten ciąg tekstu

00:02:34.083 --> 00:02:38.127
to powinno być powitanie.

00:02:39.358 --> 00:02:43.182
Zobaczmy... Znaleźliśmy
pole wprowadzania imienia,

00:02:43.344 --> 00:02:47.996
zrobiliśmy ciąg powitania
i połączyliśmy go z "div".

00:02:48.160 --> 00:02:51.818
Zatrzymajcie odtwarzanie
i sprawdźcie, czy się udało.

00:02:53.151 --> 00:02:55.519
Nie całkiem, prawda?

00:02:55.638 --> 00:02:59.343
Zobaczyliście: "Heyaz [object Object]"

00:02:59.458 --> 00:03:01.998
albo "Heyaz object Element"?

00:03:02.144 --> 00:03:04.854
Jeśli wasze imię nie brzmi "Object"

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

00:03:08.148 --> 00:03:10.456
to znaczy, że coś jest nie tak.

00:03:10.549 --> 00:03:13.840
Spodziewaliśmy się zobaczyć
to, co wpisaliście,

00:03:13.975 --> 00:03:16.487
a zamiast tego zobaczyliśmy "object".

00:03:16.592 --> 00:03:20.666
To znaczy, że nazwa "zmienna"
wskazuje na obiekt,

00:03:20.782 --> 00:03:24.033
nie zaś na ciąg,
na który miała wskazywać.

00:03:24.242 --> 00:03:26.541
Może już rozgryźliście ten problem.

00:03:26.617 --> 00:03:31.069
Przechowywaliśmy cały obiekt
"element" w zmiennej "name".

00:03:32.253 --> 00:03:35.109
A obiekt "element" jest duży,

00:03:35.183 --> 00:03:39.637
zawiera mnóstwo informacji o elemencie:
o jego atrybutach i metodach.

00:03:39.744 --> 00:03:42.886
Aby się dowiedzieć, co wpisał
użytkownik, musimy wejść

00:03:42.986 --> 00:03:46.749
do szczególnej właściwości
elementu: jego wartości.

00:03:46.905 --> 00:03:49.622
Wpiszę więc "value"

00:03:49.770 --> 00:03:52.060
i powinno już być w porządku.

00:03:52.178 --> 00:03:56.253
Zatrzymajcie odtwarzanie
i sprawdźcie jeszcze raz.

00:03:56.391 --> 00:03:58.128
Udało się, prawda?

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

00:04:02.346 --> 00:04:04.854
Chcę pokazać
jeszcze jedną częstą pomyłkę.

00:04:04.935 --> 00:04:08.570
Zaznaczę tę linię i...

00:04:09.403 --> 00:04:11.820
i przeniosę ją poza funkcję.

00:04:14.451 --> 00:04:16.487
Teraz przerwijcie odtwarzanie,

00:04:16.587 --> 00:04:19.668
wpiszcie input i naciśnijcie przycisk.

00:04:23.546 --> 00:04:26.050
Jeśli jest tak, jak powinno,
to zobaczycie

00:04:26.166 --> 00:04:29.653
pusty ciąg zamiast swojego imienia.
Wiecie, dlaczego?

00:04:29.755 --> 00:04:34.111
Zastanówcie się nad tym, kiedy
wykonywany jest każdy wiersz kodu.

00:04:34.200 --> 00:04:35.613
W kodzie bieżącym

00:04:35.682 --> 00:04:37.315
przeglądarka ładuje stronę

00:04:37.465 --> 00:04:39.893
i wykonuje JavaScript
wiersz po wierszu.

00:04:40.035 --> 00:04:43.237
Najpierw przechowuje
element "przycisk" w zmiennej.

00:04:43.299 --> 00:04:46.859
Później umieszcza w zmiennej
wartość elementu input.

00:04:46.958 --> 00:04:50.597
Ale przechowuje wartość w czasie,
gdy strona się ładuje,

00:04:50.732 --> 00:04:52.269
a wtedy to pusty ciąg.

00:04:52.769 --> 00:04:56.495
Następnie definiuje funkcję
i przypisuje detektor zdarzeń.

00:04:56.589 --> 00:04:58.097
Gdy zostaje on przywołany,

00:04:58.210 --> 00:05:02.625
nazwa - to ten sam ciąg,
co podczas ładowania strony.

00:05:02.748 --> 00:05:06.565
Detektor nie pozna ostatniej rzeczy,
którą wpisał użytkownik.

00:05:06.665 --> 00:05:10.551
Dlatego ta linia kodu musi być

00:05:10.651 --> 00:05:13.399
wewnątrz tej funkcji
detektora zdarzeń.

00:05:13.514 --> 00:05:17.788
Znajdzie wartość w czasie,
gdy dochodzi do zdarzenia.

00:05:18.763 --> 00:05:21.828
Dodajmy kod,
żeby przyjrzeć się wartości "język".

00:05:21.965 --> 00:05:24.258
Upewnimy się, że rozumiecie.

00:05:24.396 --> 00:05:29.744
W detektorze zdarzeń umieszczę
tę wartość w zmiennej "lang" (język).

00:05:30.536 --> 00:05:34.297
Spójrzcie na to okropne wcięcie!

00:05:34.397 --> 00:05:36.735
Wyrównajmy te wiersze.

00:05:36.875 --> 00:05:37.896
No dobrze...

00:05:38.079 --> 00:05:43.613
"var lang = document.getElementByID"...

00:05:43.798 --> 00:05:46.603
("lang").value".

00:05:47.572 --> 00:05:51.300
Zauważcie,
że nazywam zmienne tak samo, jak ID

00:05:51.400 --> 00:05:55.102
- chociaż wy nie musicie tego robić.

00:05:55.236 --> 00:05:59.909
Chcę, żeby zależnie od wybranego języka
pojawiała się inna wiadomość.

00:06:00.048 --> 00:06:03.879
Zwróćcie uwagę, że wartość to nie
to samo, co w liście rozwijalnej.

00:06:04.011 --> 00:06:06.735
To atrybut wartości w HTML.

00:06:06.928 --> 00:06:11.194
Zatem "lang" powinien
mieć wartość "en", "es" lub "plt".

00:06:12.076 --> 00:06:17.370
Czyli: "if (lang === "es")",

00:06:17.995 --> 00:06:23.988
powinno się wyświetlić
powitanie "Hola".

00:06:24.084 --> 00:06:26.844
Zróbmy tę powitalną zmienną tutaj.

00:06:26.932 --> 00:06:32.068
Wtedy "greeting" będzie mieć
postać "Hola" plus imię.

00:06:35.452 --> 00:06:41.612
A jeśli wartość języka to "plt",
czyli Pig Latin (świńska łacina),

00:06:41.750 --> 00:06:44.298
to powitanie będzie brzmieć

00:06:44.398 --> 00:06:48.531
"Ello-hey" plus imię.

00:06:48.627 --> 00:06:53.470
I użyjemy polecenia "else"
dla angielskiego.

00:06:53.570 --> 00:06:56.612
Przeniosę to tutaj. No dobrze.

00:06:57.425 --> 00:07:00.559
A jeśli chcecie
wesołe zadanie dodatkowe,

00:07:00.689 --> 00:07:03.903
spróbujcie napisać
konwerter nazw na świńską łacinę,

00:07:04.023 --> 00:07:08.338
żeby przekładane było
całe powitanie, z imieniem.

00:07:08.469 --> 00:07:09.662
Byłoby super!

00:07:10.367 --> 00:07:13.284
Przerwijcie odtwarzanie,
wprowadźcie imię,

00:07:13.400 --> 00:07:16.943
wybierzcie inny język
i wypróbujcie program.

00:07:19.553 --> 00:07:20.575
Nieźle, co?

00:07:20.675 --> 00:07:24.755
Z formularzami i odrobiną JavaScript
można robić świetne rzeczy:

00:07:24.930 --> 00:07:27.680
gry słowne i liczbowe,
wymyślanie opowiastek...

00:07:27.801 --> 00:07:30.188
A jeśli macie serwer
poza Khan Academy,

00:07:30.302 --> 00:07:33.462
używajcie JavaScript
do przetworzenia formularza

00:07:33.590 --> 00:07:35.558
przed wysłaniem go do serwera.

00:07:35.658 --> 00:07:38.544
W formularzach jest więcej zdarzeń
do nasłuchu:

00:07:38.644 --> 00:07:40.883
wciskanie klawiszy i wybranie elementu.

00:07:40.975 --> 00:07:44.163
Pamiętajcie, by patrzeć
na wartość pola do wprowadzania

00:07:44.263 --> 00:07:47.835
i sprawdzać ją w odpowiednim momencie.

00:07:48.014 --> 00:07:52.154
Poćwiczycie to w następnym zadaniu!