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!