JavaScript: Wartości pól formularza
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji, pokażę ci, w jaki sposób możemy operować na polach formularza.
Jak odczytywać ich wartości, które w różnych przypadkach, zwracają nam różne wartości.
Zaraz ci to pokaże.
Mamy prosty formularz, który w kodzie HTML wygląda następująco. Ma on identyfikator, abyśmy mogli się do
niego odwołać i kilka różnych pól, które zauważ, że razem mają tutaj atrybuty name.
Mają również atrybuty value, tam gdzie są one potrzebne.
Mam nadzieję, że na tym etapie nauki, w ogóle tworzenia stron internetowych już w HTML'u jakieś formularze
robiłeś.
I wiesz o co w tym chodzi.
To z JavaScript'em nie ma nic wspólnego, ale będziemy poprzez JavaScript mogli się jak najbardziej do tego
odwoływać.
Jakieś pole checkbox itd.
To co tutaj, na stronie, można zobaczyć.
Przejdziemy do skryptu, gdzie od razu do zmiennej form zapisałem sobie właśnie referencje do tego formularza
i teraz pokażę ci, przy okazji, jak możemy sobie nawigować po polach formularza, w prostszy niż do tej
pory sposob.
Bo wiesz, że gdybyśmy chcieli tutaj znaleźć na przykład takie pole które ma fisrtName, to moglibyśmy
się do formularza odwołać a następnie getElementsByName, to co ci pokazywałem i firstName albo np.
querySelectorAll i podać atrybut name itd.
Natomiast co jest ciekawe, to jeżeli już mamy referencje do formularza, to do jego pól możemy odwoływać
się poprzez właśnie ich nazwy, czyli poprzez formularz kropka firstNameź odwołamy się do tego konkretnego
pola.
Chciałbym ci to teraz pokazać. Czyli form mamy wyżej zapisany i firstName.
Taka właściwość została automatycznie z tego name utworzona.
Jeśli otworzymy tutaj sobie konsolę, odświeżymy to, jak widzisz to pole zostało tutaj zwrócone i teraz
pokażę ci w jaki sposób z takiego pola odczytać wartość, zobaczymy.
Mamy tutaj wartości Jan, ale tylko z tego powodu, że przypisałem ją tutaj jako atrybut.
Teraz jeżeli się odwołam do value, to będziemy mogli odczytać wartość tego pola. Natomiast ty mógłbyś sobie
pomyśleć, że teraz odczytujemy wartość atrybutu, a to nie do końca tak jest, bo gdybyśmy tutaj napisali
getAttributeValue.
Oczywiście w tym przypadku pobierzemy wartość tego atrybutu, będzie to Jan, wpisany tekst.
Dzięki temu, że ustawiliśmy taki atrybut, to również jest Jan.
Czyli teraz to będzie po prostu Jan.
Może to jest zagmatwane, ale kropka value,
to nie jest odwołanie do atrybutu, tak jak mógłbyś się spodziewać, chociaż on teraz istnieje, bo zauważ
co stanie się, jeżeli ja tutaj napisze Jacek.
I teraz znowu będę chciał się odwołać do tego co już tutaj mieliśmy, czyli ja może to skopiuje.
Jak widzisz, Jacek zostało nam zwrócone jako string.
Przy okazji, chciałbym byś wiedział, że nie ważne co ktoś pisze w formularzu czy to będzie 23.
Zawsze to będzie zwracany jako string, gdybyśmy zrobili typeof, to zawsze jest string, to jest bardzo istotne.
Zatem widzisz, że wartość pola jaka jest tutaj, zostaje zwrócona, a nie atrybut.
A gdybym się odwołał do
getAttribute, w ten sposób i pobrał sobie value,
no to byłoby to Jan.
Czyli ustawienie na początku takiego atrybutu sprawia, że ten tekst zostaje tam wpisany.
Ale poprzez odwołanie się do tego pola w dowolny sposób musimy mieć do niego referencje np. właśnie
poprzez form firstName i do właściwości value pobieramy aktualną wartość takiego pola.
Jest to istotne.
Podobnie możemy zrobić tutaj jest lastName. Wpiszemy tutaj i zobaczysz, że jest to pusty ciąg znaków. On
tutaj został tak naprawdę zwrócony, więc zawsze w if, pamiętasz, że pusty ciąg znaków w if;ie to jest wartość
fałszywa.
Możemy w if'ie odwołać się do jakiegoś pola nazwijmy to field i następnie value.
Jeżeli ktoś nic nie wpisze, pusty ciąg znaków zostaje zwrócony i wiemy, wtedy że żadna wartość nie została
podana.
Możemy oczywiście również pusty ciąg przywoływać, w ten oto sposób, do pustego ciągu, to co ktoś podał,
oczywiście prawda czyli value,
czy nie jest to pusty ciąg znaków.
Myślę, że to na tym etapie już wiesz.
Teraz przejdźmy dalej i będę chciał ci pokazać, że wartości możemy również ustawiać.
Jeżeli teraz odwołamy się do lastName.value i napisze tutaj Kowalski, na przykład, w ten sposób.
Pomimo tego, że nic tutaj nie jest pisane po odświeżeniu pojawia się tutaj Kowalski, czyli wartości na
polach formularza można również bez problemu ustawiać.
Teraz chciałbym ci jeszcze pokazać jedną rzecz, związaną z tym atrybutem, bo pokazałem ci, że kropka value
odnosi się do aktualnej wartości, a nie do tego atrybutu. Jego możemy pobrać poprzez getAttribute, ale również
poprzez defaultValue, bo ten parametr ten atrybut, mówi nam jaka ma być domyślna wartość,
kiedy odświeżymy taki formularz.
Więc jeżeli się odwołamy znowu do form fistName.
W ten sposób następnie do defaultValue.
To możemy odczytać Jan, mimo tego że np. wpiszemy Jacek.
Oczywiście po wciśnięciu Enter, ten formularz jest jak gdyby wysłany, więc nam to nie zadziała, defaultValue
jest to Jan, ale value czyli aktualna wartość
to będzie wyglądać w ten sposób, czyli możesz sprawdzić domyślną wartość właśnie poprzez ten atrybut albo
poprzez getAttribute albo poprzez defaultValue.
Teraz odwołajmy się do tego pola, czyli textarea.
Zobaczmy jak ono wygląda.
Mamy go gdzieś poniżej. Ma ono name message.
Czyli możemy się również do niego odwołać,
form.message, czyli w skrócie, bez wyszukiwania go innymi metodami i następnie value możemy coś napisać,
treść, proszę bardzo.
I ona zostanie tutaj dodana.
Oczywiście działa to dokładnie w ten sam sposób, jeżeli ktoś tutaj coś będzie wpisywał, kiedy już pokaże
ci w tym kursie, jak odczytywać zdarzenia np. wpisywania to będziemy do takiego pola mogli się odwołać.
Następnie do kropka value i odczytać to co ktoś wpisał, więc jest również istotne, że takie wartości bez trudu
będziemy mogli odczytywać.
Teraz pokażę ci jak się zachowują
elementy select.
Mamy tutaj taki element, który ma name
subject. Tutaj oczywiście mógłby być atrybut id, żeby się do niego odwołać ale po name,
jak widzisz bez trudu możemy się odwoływać, a więc form.subject,
w ten sposób. Będziemy się odwołać do tego elementu select i teraz będziemy chcieli sprawdzić, które option
zostało wybrane, to znowu możemy się odwołać do value.
Zróbmy to w console.log'u.
W ten sposób.
Zobaczmy.
Pytanie jest wybrane, Jeżeli wybiorę zgłoszenie.
I tutaj będę chciał się do tego odwołać, skopiujemy to.
To teraz aktualna wartość,
jest to zgłoszenie, czyli to dokładnie co zostało tutaj zapisane w value.
Ale jak widzisz nie odwołujemy się do konkretnego option, ale do select i do jego value i wybrana opcja
zostanie nam zwrócona.
Jest jeszcze jedna ciekawa opcja.
Być może czasem będzie z niej korzystał.
Co gdybyś chciał tutaj, usunąć któreś z tych elementów.
Otóż jeśli odwołamy się do select, jest to dosyć ciekawe, czyli form.subject, to możemy odwołać się do
lenght. Tutaj zostanie zwrócona wartość
3,
bo mamy trzy elementy option.
Jeżeli ja tutaj przypisze 2, to usunę ostatni element trzeci. Możemy to sprawdzić.
I okazuje się, że tylko dwa elementy zostały. Jeżeli przypisze 0, to będziemy mieli pusty element.
Więc jest to również taka ciekawostka.
Gdybyś potrzebował taki element select zresetować. Teraz kolejna rzecz.
Mamy tutaj taki oto checkbox. Ma on value
1,
jak widzisz i teraz możemy do tej wartości się odwołać, odwołując się do checkbox'u poprzez np. remember.
Zróbmy znowu console.log form.remember.value.
Przejdźmy tutaj.
Odświeżmy, jak widzisz Jedynka została nam zwrócona.
Ale gdybyśmy chcieli sprawdzić czy ten checkbox jest zaznaczone czy też nie, to możemy się do niego
odwołać poprzez właściwość checked, czyli zaznaczony.
I teraz mamy false.
Jeżeli go zaznaczę i skopiuje sobie to raz jeszcze.
To, jak widzisz, mamy teraz true, czyli możemy sprawdzić czy taki element jest zaznaczony, na sam koniec
pokażę ci jeszcze, że mamy tutaj element input o typie submit, który znowu ma value wyślij i to co tutaj
podamy jest wyświetlane na tym przycisku. Tak to renderuje przeglądarka.
Teraz z kolei jeżelibyśmy się w kodzie odwołali do tego elementu.
Możemy to zrobić w następujący sposób.
Czyli querySelector input,
jak widzisz, taki selector,
submit, value.
Znowu zrobimy to w console.log'u.
To co zostaje nam zwrócone.
Jak widzisz, Wyślij.
Jeżeli byśmy tutaj zmienili tą wartość. Przypisując tutaj coś innego, to zostanie zmieniona wartość właśnie
na tym przycisku.
Mówię o tym właśnie dlatego, abyś uświadomił, że value działa inaczej, w różnych miejscach.
Pokazałem ci, że jeżeli odczytujemy value, to odczytujemy wartość konkretnego pola.
Jeżeli przypisujemy, to ustawiamy mu tę wartość, ale na przykład input'cie value
oznacza zupełnie coś innego i ustawiamy tutaj wtedy tekst, który się znajduje na takim przycisku, a w
przypadku odczytywania value, która jest ustawiona jako atrybut, tak jak ci pokazałem tutaj, od razu na
elemencie, to poprzez getAttribute możemy to odczytać albo poprzez defaultValue.
Kod
Wartości pól formularza · 1 min
var form = document.querySelector("#myForm");
console.log( form.firstName.value );
console.log( form.lastName.value );
form.lastName.value = "Kowalski";
form.message.value = "Treść";
console.log(form.subject.value);
form.subject.length = 2;
console.log( form.remember.checked );
console.log(form.querySelector("input[type='submit']").value);