YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Polish subtitles

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

Get Embed Code
6 Languages

Showing Revision 9 created 02/03/2016 by Lech Mankiewicz.

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

  2. W Khan Academy nie pozwalamy
    na kontakt stron z serwerami
  3. - z przyczyn bezpieczeństwa.
    Nie uczymy tu formularzy.
  4. Ale skoro zgłębiacie JavaScript,
    by modyfikować strony,
  5. pokażę, jak używać go
    do przetwarzania elementów formularza.
  6. Nie trzeba będzie
    wysyłać ich do serwera.
  7. Zrobiłam na tej stronie
    kilka formularzy,
  8. by poznać nazwę użytkownika
    oraz język.
  9. Chcę, by strona
    pisała powitanie w tym języku,
  10. gdy użytkownik kliknie na przycisk.
  11. Krok pierwszy:
  12. element "przycisk"
    musi być przechowywany w zmiennej.
  13. Napiszemy więc:
    "document.getElementById("button")".
  14. Następny krok - to zdefiniować
    funkcję odbiornika zdarzeń:
  15. "var onButtonClick = function(){",
  16. a wewnątrz
  17. zaczniemy od wiadomości.
  18. Zatem:
    "document.getElementById("message")",
  19. i już mamy "div".
    Teraz wystarczy napisać:
  20. textContent +=
  21. "Zostałem kliknięty!
    Dziękuję bardzo!".
  22. "Div" pełen wdzięczności!
  23. I wreszcie krok trzeci:
  24. dodamy detektor zdarzeń do przycisku,
  25. by kliknięcie przywoływało tę funkcję.
  26. Piszę więc: "("click", onButtonClick)".
  27. Zatrzymajcie odtwarzanie
    i sprawdźcie sami,
  28. czy to działa tak,
    jak się spodziewaliście.
  29. A teraz niech program
    powie coś na podstawie formularza.
  30. Musimy wymyślić, jak zdobyć nazwę,
  31. którą użytkownik
    wpisał w odpowiednie pole.
  32. Zróbmy w tym celu zmienną.
  33. Piszę: "var name ="...
  34. "document.getElementById",
  35. bo nazwa ma ID.
  36. Mamy to tutaj.
  37. Zróbmy nowy ciąg dla powitania
  38. i dołączmy nazwę.
  39. Więc: "var greeting = "Heyaz"
  40. (moje ulubione powitanie) + name".
    No dobrze.
  41. Mamy ciąg i to,
    co jest przechowywane w zmiennej.
  42. Ten ciąg tekstu
  43. to powinno być powitanie.
  44. Zobaczmy... Znaleźliśmy
    pole wprowadzania imienia,
  45. zrobiliśmy ciąg powitania
    i połączyliśmy go z "div".
  46. Zatrzymajcie odtwarzanie
    i sprawdźcie, czy się udało.
  47. Nie całkiem, prawda?
  48. Zobaczyliście: "Heyaz [object Object]"
  49. albo "Heyaz object Element"?
  50. Jeśli wasze imię nie brzmi "Object"
  51. (bez urazy, jeśli brzmi, ładne imię!),
  52. to znaczy, że coś jest nie tak.
  53. Spodziewaliśmy się zobaczyć
    to, co wpisaliście,
  54. a zamiast tego zobaczyliśmy "object".
  55. To znaczy, że nazwa "zmienna"
    wskazuje na obiekt,
  56. nie zaś na ciąg,
    na który miała wskazywać.
  57. Może już rozgryźliście ten problem.
  58. Przechowywaliśmy cały obiekt
    "element" w zmiennej "name".
  59. A obiekt "element" jest duży,
  60. zawiera mnóstwo informacji o elemencie:
    o jego atrybutach i metodach.
  61. Aby się dowiedzieć, co wpisał
    użytkownik, musimy wejść
  62. do szczególnej właściwości
    elementu: jego wartości.
  63. Wpiszę więc "value"
  64. i powinno już być w porządku.
  65. Zatrzymajcie odtwarzanie
    i sprawdźcie jeszcze raz.
  66. Udało się, prawda?
  67. To częsty błąd, więc bądźcie uważni.
  68. Chcę pokazać
    jeszcze jedną częstą pomyłkę.
  69. Zaznaczę tę linię i...
  70. i przeniosę ją poza funkcję.
  71. Teraz przerwijcie odtwarzanie,
  72. wpiszcie input i naciśnijcie przycisk.
  73. Jeśli jest tak, jak powinno,
    to zobaczycie
  74. pusty ciąg zamiast swojego imienia.
    Wiecie, dlaczego?
  75. Zastanówcie się nad tym, kiedy
    wykonywany jest każdy wiersz kodu.
  76. W kodzie bieżącym
  77. przeglądarka ładuje stronę
  78. i wykonuje JavaScript
    wiersz po wierszu.
  79. Najpierw przechowuje
    element "przycisk" w zmiennej.
  80. Później umieszcza w zmiennej
    wartość elementu input.
  81. Ale przechowuje wartość w czasie,
    gdy strona się ładuje,
  82. a wtedy to pusty ciąg.
  83. Następnie definiuje funkcję
    i przypisuje detektor zdarzeń.
  84. Gdy zostaje on przywołany,
  85. nazwa - to ten sam ciąg,
    co podczas ładowania strony.
  86. Detektor nie pozna ostatniej rzeczy,
    którą wpisał użytkownik.
  87. Dlatego ta linia kodu musi być
  88. wewnątrz tej funkcji
    detektora zdarzeń.
  89. Znajdzie wartość w czasie,
    gdy dochodzi do zdarzenia.
  90. Dodajmy kod,
    żeby przyjrzeć się wartości "język".
  91. Upewnimy się, że rozumiecie.
  92. W detektorze zdarzeń umieszczę
    tę wartość w zmiennej "lang" (język).
  93. Spójrzcie na to okropne wcięcie!
  94. Wyrównajmy te wiersze.
  95. No dobrze...
  96. "var lang = document.getElementByID"...
  97. ("lang").value".
  98. Zauważcie,
    że nazywam zmienne tak samo, jak ID
  99. - chociaż wy nie musicie tego robić.
  100. Chcę, żeby zależnie od wybranego języka
    pojawiała się inna wiadomość.
  101. Zwróćcie uwagę, że wartość to nie
    to samo, co w liście rozwijalnej.
  102. To atrybut wartości w HTML.
  103. Zatem "lang" powinien
    mieć wartość "en", "es" lub "plt".
  104. Czyli: "if (lang === "es")",
  105. powinno się wyświetlić
    powitanie "Hola".
  106. Zróbmy tę powitalną zmienną tutaj.
  107. Wtedy "greeting" będzie mieć
    postać "Hola" plus imię.
  108. A jeśli wartość języka to "plt",
    czyli Pig Latin (świńska łacina),
  109. to powitanie będzie brzmieć
  110. "Ello-hey" plus imię.
  111. I użyjemy polecenia "else"
    dla angielskiego.
  112. Przeniosę to tutaj. No dobrze.
  113. A jeśli chcecie
    wesołe zadanie dodatkowe,
  114. spróbujcie napisać
    konwerter nazw na świńską łacinę,
  115. żeby przekładane było
    całe powitanie, z imieniem.
  116. Byłoby super!
  117. Przerwijcie odtwarzanie,
    wprowadźcie imię,
  118. wybierzcie inny język
    i wypróbujcie program.
  119. Nieźle, co?
  120. Z formularzami i odrobiną JavaScript
    można robić świetne rzeczy:
  121. gry słowne i liczbowe,
    wymyślanie opowiastek...
  122. A jeśli macie serwer
    poza Khan Academy,
  123. używajcie JavaScript
    do przetworzenia formularza
  124. przed wysłaniem go do serwera.
  125. W formularzach jest więcej zdarzeń
    do nasłuchu:
  126. wciskanie klawiszy i wybranie elementu.
  127. Pamiętajcie, by patrzeć
    na wartość pola do wprowadzania
  128. i sprawdzać ją w odpowiednim momencie.
  129. Poćwiczycie to w następnym zadaniu!