Przetwarzanie formularzy przy użyciu zdarzeń (Wersja Wideo)

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki.
Polecamy obejrzenie oryginalnej sesji na Khan Academy, gdzie możecie zatrzymać sesje, by edytować własny kod, jak również zobaczyć zapis kodu w wyższej rozdzielczości:
http://www.khanacademy.org/computer-programming

Formularz to sposób, w który strona
przesyła informacje do serwera.

W Khan Academy nie pozwalamy
na kontakt stron z serwerami

- z przyczyn bezpieczeństwa.
Nie uczymy tu formularzy.

Ale skoro zgłębiacie JavaScript,
by modyfikować strony,

pokażę, jak używać go
do przetwarzania elementów formularza.

Nie trzeba będzie
wysyłać ich do serwera.

Zrobiłam na tej stronie
kilka formularzy,

by poznać nazwę użytkownika
oraz język.

Chcę, by strona
pisała powitanie w tym języku,

gdy użytkownik kliknie na przycisk.

Krok pierwszy:

element "przycisk"
musi być przechowywany w zmiennej.

Napiszemy więc:
"document.getElementById("button")".

Następny krok - to zdefiniować
funkcję odbiornika zdarzeń:

"var onButtonClick = function(){",

a wewnątrz

zaczniemy od wiadomości.

Zatem:
"document.getElementById("message")",

i już mamy "div".
Teraz wystarczy napisać:

textContent +=

"Zostałem kliknięty!
Dziękuję bardzo!".

"Div" pełen wdzięczności!

I wreszcie krok trzeci:

dodamy detektor zdarzeń do przycisku,

by kliknięcie przywoływało tę funkcję.

Piszę więc: "("click", onButtonClick)".

Zatrzymajcie odtwarzanie
i sprawdźcie sami,

czy to działa tak,
jak się spodziewaliście.

A teraz niech program
powie coś na podstawie formularza.

Musimy wymyślić, jak zdobyć nazwę,

którą użytkownik
wpisał w odpowiednie pole.

Zróbmy w tym celu zmienną.

Piszę: "var name ="...

"document.getElementById",

bo nazwa ma ID.

Mamy to tutaj.

Zróbmy nowy ciąg dla powitania

i dołączmy nazwę.

Więc: "var greeting = "Heyaz"

(moje ulubione powitanie) + name".
No dobrze.

Mamy ciąg i to,
co jest przechowywane w zmiennej.

Ten ciąg tekstu

to powinno być powitanie.

Zobaczmy... Znaleźliśmy
pole wprowadzania imienia,

zrobiliśmy ciąg powitania
i połączyliśmy go z "div".

Zatrzymajcie odtwarzanie
i sprawdźcie, czy się udało.

Nie całkiem, prawda?

Zobaczyliście: "Heyaz [object Object]"

albo "Heyaz object Element"?

Jeśli wasze imię nie brzmi "Object"

(bez urazy, jeśli brzmi, ładne imię!),

to znaczy, że coś jest nie tak.

Spodziewaliśmy się zobaczyć
to, co wpisaliście,

a zamiast tego zobaczyliśmy "object".

To znaczy, że nazwa "zmienna"
wskazuje na obiekt,

nie zaś na ciąg,
na który miała wskazywać.

Może już rozgryźliście ten problem.

Przechowywaliśmy cały obiekt
"element" w zmiennej "name".

A obiekt "element" jest duży,

zawiera mnóstwo informacji o elemencie:
o jego atrybutach i metodach.

Aby się dowiedzieć, co wpisał
użytkownik, musimy wejść

do szczególnej właściwości
elementu: jego wartości.

Wpiszę więc "value"

i powinno już być w porządku.

Zatrzymajcie odtwarzanie
i sprawdźcie jeszcze raz.

Udało się, prawda?

To częsty błąd, więc bądźcie uważni.

Chcę pokazać
jeszcze jedną częstą pomyłkę.

Zaznaczę tę linię i...

i przeniosę ją poza funkcję.

Teraz przerwijcie odtwarzanie,

wpiszcie input i naciśnijcie przycisk.

Jeśli jest tak, jak powinno,
to zobaczycie

pusty ciąg zamiast swojego imienia.
Wiecie, dlaczego?

Zastanówcie się nad tym, kiedy
wykonywany jest każdy wiersz kodu.

W kodzie bieżącym

przeglądarka ładuje stronę

i wykonuje JavaScript
wiersz po wierszu.

Najpierw przechowuje
element "przycisk" w zmiennej.

Później umieszcza w zmiennej
wartość elementu input.

Ale przechowuje wartość w czasie,
gdy strona się ładuje,

a wtedy to pusty ciąg.

Następnie definiuje funkcję
i przypisuje detektor zdarzeń.

Gdy zostaje on przywołany,

nazwa - to ten sam ciąg,
co podczas ładowania strony.

Detektor nie pozna ostatniej rzeczy,
którą wpisał użytkownik.

Dlatego ta linia kodu musi być

wewnątrz tej funkcji
detektora zdarzeń.

Znajdzie wartość w czasie,
gdy dochodzi do zdarzenia.

Dodajmy kod,
żeby przyjrzeć się wartości "język".

Upewnimy się, że rozumiecie.

W detektorze zdarzeń umieszczę
tę wartość w zmiennej "lang" (język).

Spójrzcie na to okropne wcięcie!

Wyrównajmy te wiersze.

No dobrze...

"var lang = document.getElementByID"...

("lang").value".

Zauważcie,
że nazywam zmienne tak samo, jak ID

- chociaż wy nie musicie tego robić.

Chcę, żeby zależnie od wybranego języka
pojawiała się inna wiadomość.

Zwróćcie uwagę, że wartość to nie
to samo, co w liście rozwijalnej.

To atrybut wartości w HTML.

Zatem "lang" powinien
mieć wartość "en", "es" lub "plt".

Czyli: "if (lang === "es")",

powinno się wyświetlić
powitanie "Hola".

Zróbmy tę powitalną zmienną tutaj.

Wtedy "greeting" będzie mieć
postać "Hola" plus imię.

A jeśli wartość języka to "plt",
czyli Pig Latin (świńska łacina),

to powitanie będzie brzmieć

"Ello-hey" plus imię.

I użyjemy polecenia "else"
dla angielskiego.

Przeniosę to tutaj. No dobrze.

A jeśli chcecie
wesołe zadanie dodatkowe,

spróbujcie napisać
konwerter nazw na świńską łacinę,

żeby przekładane było
całe powitanie, z imieniem.

Byłoby super!

Przerwijcie odtwarzanie,
wprowadźcie imię,

wybierzcie inny język
i wypróbujcie program.

Nieźle, co?

Z formularzami i odrobiną JavaScript
można robić świetne rzeczy:

gry słowne i liczbowe,
wymyślanie opowiastek...

A jeśli macie serwer
poza Khan Academy,

używajcie JavaScript
do przetworzenia formularza

przed wysłaniem go do serwera.

W formularzach jest więcej zdarzeń
do nasłuchu:

wciskanie klawiszy i wybranie elementu.

Pamiętajcie, by patrzeć
na wartość pola do wprowadzania

i sprawdzać ją w odpowiednim momencie.

Poćwiczycie to w następnym zadaniu!