1
00:00:00,952 --> 00:00:05,828
Formularz to sposób, w który strona
przesyła informacje do serwera.

2
00:00:05,964 --> 00:00:09,961
W Khan Academy nie pozwalamy
na kontakt stron z serwerami

3
00:00:10,103 --> 00:00:13,653
- z przyczyn bezpieczeństwa.
Nie uczymy tu formularzy.

4
00:00:13,753 --> 00:00:17,134
Ale skoro zgłębiacie JavaScript,
by modyfikować strony,

5
00:00:17,234 --> 00:00:20,758
pokażę, jak używać go
do przetwarzania elementów formularza.

6
00:00:20,846 --> 00:00:23,738
Nie trzeba będzie
wysyłać ich do serwera.

7
00:00:23,859 --> 00:00:26,679
Zrobiłam na tej stronie
kilka formularzy,

8
00:00:26,811 --> 00:00:30,093
by poznać nazwę użytkownika
oraz język.

9
00:00:30,159 --> 00:00:33,854
Chcę, by strona
pisała powitanie w tym języku,

10
00:00:33,965 --> 00:00:36,604
gdy użytkownik kliknie na przycisk.

11
00:00:36,720 --> 00:00:38,103
Krok pierwszy:

12
00:00:38,156 --> 00:00:41,721
element "przycisk"
musi być przechowywany w zmiennej.

13
00:00:41,814 --> 00:00:48,181
Napiszemy więc:
"document.getElementById("button")".

14
00:00:49,778 --> 00:00:53,173
Następny krok - to zdefiniować
funkcję odbiornika zdarzeń:

15
00:00:53,275 --> 00:00:56,796
"var onButtonClick = function(){",

16
00:00:57,928 --> 00:01:00,429
a wewnątrz

17
00:01:00,591 --> 00:01:03,831
zaczniemy od wiadomości.

18
00:01:03,971 --> 00:01:08,614
Zatem:
"document.getElementById("message")",

19
00:01:08,764 --> 00:01:12,214
i już mamy "div".
Teraz wystarczy napisać:

20
00:01:12,792 --> 00:01:14,861
textContent +=

21
00:01:15,650 --> 00:01:20,805
"Zostałem kliknięty!
Dziękuję bardzo!".

22
00:01:20,989 --> 00:01:22,864
"Div" pełen wdzięczności!

23
00:01:23,475 --> 00:01:24,971
I wreszcie krok trzeci:

24
00:01:25,087 --> 00:01:28,491
dodamy detektor zdarzeń do przycisku,

25
00:01:28,652 --> 00:01:31,509
by kliknięcie przywoływało tę funkcję.

26
00:01:32,125 --> 00:01:35,158
Piszę więc: "("click", onButtonClick)".

27
00:01:36,733 --> 00:01:39,488
Zatrzymajcie odtwarzanie
i sprawdźcie sami,

28
00:01:39,588 --> 00:01:43,007
czy to działa tak,
jak się spodziewaliście.

29
00:01:43,107 --> 00:01:47,438
A teraz niech program
powie coś na podstawie formularza.

30
00:01:47,568 --> 00:01:50,372
Musimy wymyślić, jak zdobyć nazwę,

31
00:01:50,472 --> 00:01:53,568
którą użytkownik
wpisał w odpowiednie pole.

32
00:01:53,681 --> 00:01:56,146
Zróbmy w tym celu zmienną.

33
00:01:57,051 --> 00:02:00,047
Piszę: "var name ="...

34
00:02:00,147 --> 00:02:04,923
"document.getElementById",

35
00:02:05,026 --> 00:02:07,202
bo nazwa ma ID.

36
00:02:07,341 --> 00:02:10,425
Mamy to tutaj.

37
00:02:11,889 --> 00:02:15,024
Zróbmy nowy ciąg dla powitania

38
00:02:15,124 --> 00:02:17,250
i dołączmy nazwę.

39
00:02:17,389 --> 00:02:21,200
Więc: "var greeting = "Heyaz"

40
00:02:21,348 --> 00:02:24,753
(moje ulubione powitanie) + name".
No dobrze.

41
00:02:24,845 --> 00:02:29,281
Mamy ciąg i to,
co jest przechowywane w zmiennej.

42
00:02:30,674 --> 00:02:33,878
Ten ciąg tekstu

43
00:02:34,083 --> 00:02:38,127
to powinno być powitanie.

44
00:02:39,358 --> 00:02:43,182
Zobaczmy... Znaleźliśmy
pole wprowadzania imienia,

45
00:02:43,344 --> 00:02:47,996
zrobiliśmy ciąg powitania
i połączyliśmy go z "div".

46
00:02:48,160 --> 00:02:51,818
Zatrzymajcie odtwarzanie
i sprawdźcie, czy się udało.

47
00:02:53,151 --> 00:02:55,519
Nie całkiem, prawda?

48
00:02:55,638 --> 00:02:59,343
Zobaczyliście: "Heyaz [object Object]"

49
00:02:59,458 --> 00:03:01,998
albo "Heyaz object Element"?

50
00:03:02,144 --> 00:03:04,854
Jeśli wasze imię nie brzmi "Object"

51
00:03:04,954 --> 00:03:08,048
(bez urazy, jeśli brzmi, ładne imię!),

52
00:03:08,148 --> 00:03:10,456
to znaczy, że coś jest nie tak.

53
00:03:10,549 --> 00:03:13,840
Spodziewaliśmy się zobaczyć
to, co wpisaliście,

54
00:03:13,975 --> 00:03:16,487
a zamiast tego zobaczyliśmy "object".

55
00:03:16,592 --> 00:03:20,666
To znaczy, że nazwa "zmienna"
wskazuje na obiekt,

56
00:03:20,782 --> 00:03:24,033
nie zaś na ciąg,
na który miała wskazywać.

57
00:03:24,242 --> 00:03:26,541
Może już rozgryźliście ten problem.

58
00:03:26,617 --> 00:03:31,069
Przechowywaliśmy cały obiekt
"element" w zmiennej "name".

59
00:03:32,253 --> 00:03:35,109
A obiekt "element" jest duży,

60
00:03:35,183 --> 00:03:39,637
zawiera mnóstwo informacji o elemencie:
o jego atrybutach i metodach.

61
00:03:39,744 --> 00:03:42,886
Aby się dowiedzieć, co wpisał
użytkownik, musimy wejść

62
00:03:42,986 --> 00:03:46,749
do szczególnej właściwości
elementu: jego wartości.

63
00:03:46,905 --> 00:03:49,622
Wpiszę więc "value"

64
00:03:49,770 --> 00:03:52,060
i powinno już być w porządku.

65
00:03:52,178 --> 00:03:56,253
Zatrzymajcie odtwarzanie
i sprawdźcie jeszcze raz.

66
00:03:56,391 --> 00:03:58,128
Udało się, prawda?

67
00:03:58,244 --> 00:04:01,464
To częsty błąd, więc bądźcie uważni.

68
00:04:02,346 --> 00:04:04,854
Chcę pokazać
jeszcze jedną częstą pomyłkę.

69
00:04:04,935 --> 00:04:08,570
Zaznaczę tę linię i...

70
00:04:09,403 --> 00:04:11,820
i przeniosę ją poza funkcję.

71
00:04:14,451 --> 00:04:16,487
Teraz przerwijcie odtwarzanie,

72
00:04:16,587 --> 00:04:19,668
wpiszcie input i naciśnijcie przycisk.

73
00:04:23,546 --> 00:04:26,050
Jeśli jest tak, jak powinno,
to zobaczycie

74
00:04:26,166 --> 00:04:29,653
pusty ciąg zamiast swojego imienia.
Wiecie, dlaczego?

75
00:04:29,755 --> 00:04:34,111
Zastanówcie się nad tym, kiedy
wykonywany jest każdy wiersz kodu.

76
00:04:34,200 --> 00:04:35,613
W kodzie bieżącym

77
00:04:35,682 --> 00:04:37,315
przeglądarka ładuje stronę

78
00:04:37,465 --> 00:04:39,893
i wykonuje JavaScript
wiersz po wierszu.

79
00:04:40,035 --> 00:04:43,237
Najpierw przechowuje
element "przycisk" w zmiennej.

80
00:04:43,299 --> 00:04:46,859
Później umieszcza w zmiennej
wartość elementu input.

81
00:04:46,958 --> 00:04:50,597
Ale przechowuje wartość w czasie,
gdy strona się ładuje,

82
00:04:50,732 --> 00:04:52,269
a wtedy to pusty ciąg.

83
00:04:52,769 --> 00:04:56,495
Następnie definiuje funkcję
i przypisuje detektor zdarzeń.

84
00:04:56,589 --> 00:04:58,097
Gdy zostaje on przywołany,

85
00:04:58,210 --> 00:05:02,625
nazwa - to ten sam ciąg,
co podczas ładowania strony.

86
00:05:02,748 --> 00:05:06,565
Detektor nie pozna ostatniej rzeczy,
którą wpisał użytkownik.

87
00:05:06,665 --> 00:05:10,551
Dlatego ta linia kodu musi być

88
00:05:10,651 --> 00:05:13,399
wewnątrz tej funkcji
detektora zdarzeń.

89
00:05:13,514 --> 00:05:17,788
Znajdzie wartość w czasie,
gdy dochodzi do zdarzenia.

90
00:05:18,763 --> 00:05:21,828
Dodajmy kod,
żeby przyjrzeć się wartości "język".

91
00:05:21,965 --> 00:05:24,258
Upewnimy się, że rozumiecie.

92
00:05:24,396 --> 00:05:29,744
W detektorze zdarzeń umieszczę
tę wartość w zmiennej "lang" (język).

93
00:05:30,536 --> 00:05:34,297
Spójrzcie na to okropne wcięcie!

94
00:05:34,397 --> 00:05:36,735
Wyrównajmy te wiersze.

95
00:05:36,875 --> 00:05:37,896
No dobrze...

96
00:05:38,079 --> 00:05:43,613
"var lang = document.getElementByID"...

97
00:05:43,798 --> 00:05:46,603
("lang").value".

98
00:05:47,572 --> 00:05:51,300
Zauważcie,
że nazywam zmienne tak samo, jak ID

99
00:05:51,400 --> 00:05:55,102
- chociaż wy nie musicie tego robić.

100
00:05:55,236 --> 00:05:59,909
Chcę, żeby zależnie od wybranego języka
pojawiała się inna wiadomość.

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

102
00:06:04,011 --> 00:06:06,735
To atrybut wartości w HTML.

103
00:06:06,928 --> 00:06:11,194
Zatem "lang" powinien
mieć wartość "en", "es" lub "plt".

104
00:06:12,076 --> 00:06:17,370
Czyli: "if (lang === "es")",

105
00:06:17,995 --> 00:06:23,988
powinno się wyświetlić
powitanie "Hola".

106
00:06:24,084 --> 00:06:26,844
Zróbmy tę powitalną zmienną tutaj.

107
00:06:26,932 --> 00:06:32,068
Wtedy "greeting" będzie mieć
postać "Hola" plus imię.

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

109
00:06:41,750 --> 00:06:44,298
to powitanie będzie brzmieć

110
00:06:44,398 --> 00:06:48,531
"Ello-hey" plus imię.

111
00:06:48,627 --> 00:06:53,470
I użyjemy polecenia "else"
dla angielskiego.

112
00:06:53,570 --> 00:06:56,612
Przeniosę to tutaj. No dobrze.

113
00:06:57,425 --> 00:07:00,559
A jeśli chcecie
wesołe zadanie dodatkowe,

114
00:07:00,689 --> 00:07:03,903
spróbujcie napisać
konwerter nazw na świńską łacinę,

115
00:07:04,023 --> 00:07:08,338
żeby przekładane było
całe powitanie, z imieniem.

116
00:07:08,469 --> 00:07:09,662
Byłoby super!

117
00:07:10,367 --> 00:07:13,284
Przerwijcie odtwarzanie,
wprowadźcie imię,

118
00:07:13,400 --> 00:07:16,943
wybierzcie inny język
i wypróbujcie program.

119
00:07:19,553 --> 00:07:20,575
Nieźle, co?

120
00:07:20,675 --> 00:07:24,755
Z formularzami i odrobiną JavaScript
można robić świetne rzeczy:

121
00:07:24,930 --> 00:07:27,680
gry słowne i liczbowe,
wymyślanie opowiastek...

122
00:07:27,801 --> 00:07:30,188
A jeśli macie serwer
poza Khan Academy,

123
00:07:30,302 --> 00:07:33,462
używajcie JavaScript
do przetworzenia formularza

124
00:07:33,590 --> 00:07:35,558
przed wysłaniem go do serwera.

125
00:07:35,658 --> 00:07:38,544
W formularzach jest więcej zdarzeń
do nasłuchu:

126
00:07:38,644 --> 00:07:40,883
wciskanie klawiszy i wybranie elementu.

127
00:07:40,975 --> 00:07:44,163
Pamiętajcie, by patrzeć
na wartość pola do wprowadzania

128
00:07:44,263 --> 00:07:47,835
i sprawdzać ją w odpowiednim momencie.

129
00:07:48,014 --> 00:07:52,154
Poćwiczycie to w następnym zadaniu!