Artykuł
15.10.2021

Kurs JavaScript - Komunikacja z użytkownikiem - pobieranie informacji

Autor: Mateusz Mikulski

Opublikowano: 2011-12-19

Praktycznie każda aplikacja musi posiadać możliwość interakcji z użytkownikiem. Bardzo częstym zjawiskiem jest pobieranie od użytkownika pewnych informacji w celu ich dalszego przetworzenia. Ten samouczek zawiera informacje, jak można to wykonać w języku JavaScript za pomocą pola tekstowego input type=text oraz okien prompt i confirm.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

jak wykorzystać pole tekstowe input type=text do pobierania danych od użytkownika,
jak wykorzystać okno typu prompt do pobierania danych od użytkownika,
jak wykorzystać okno typu confirm do pobierania danych od użytkownika.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, zobacz Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie utworzenie skryptu, który po wciśnięciu klawisza wyślij będzie pobierał imię z pola tekstowego, podane przez użytkownika, a następnie przekazywał je do okna typu prompt, w którym z kolei użytkownik zostanie zapytany o nazwisko. W przypadku, jeśli podane zostanie nazwisko, na stronie wyświetli się informacja o imieniu i nazwisku użytkownika (Rys. 1.).

Rys. 1. Docelowy wynik skryptu, w którym użytkownik podał swoje imię i nazwisko.

Jeśli użytkownik nie będzie chciał podać nazwiska, na stronie zostanie wyświetlone jedynie jego imię (Rys. 2.).

Rys. 2. Wynik skryptu, w którym użytkownik nie podał swojego nazwiska.

Pobranie danych za pomocą pola input type=text

Najbardziej podstawowym sposobem pobierania danych od użytkownika jest pobranie ich poprzez pole tekstowe. Możesz to zrobić poprzez odwołanie się do właściwości obiektu polavalue. Najczęściej wynik ten będziesz przechowywał w zmiennej. Możesz tego dokonać za pomocą następującego polecenia:

var imie = document.getElementById("mojTekst").value;

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip.
Wciśnij przycisk F12 lub wybierz Tools–>F12 developer Tools.

Rys. 3. Narzędzia programistyczne do JavaScript w Internet Explorer 9.

* *

W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys. 3.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 3.), wpisz:

document.getElementById("butWyslij").onclick = function text() {
    var imie = document.getElementById("mojTekst").value;
    alert("Twoje imie to: "+imie);
}

Informacja

Pierwsza część podanego skryptu odpowiada za dodanie do istniejącego na stronie przycisku metody onclick(), która umożliwia wykonanie operacji po kliknięciu na przycisk. Więcej na temat zdarzeń, w języku JavaScript, dowiesz się z samouczka Zdarzenia w JavaScript.

Kliknij przycisk Run Script.
W polu tekstowym na stronie wpisz swoje imię i kliknij na przycisk wyślij. Wówczas powinien pokazać się komunikat, jak na Rys 4.

Rys. 4. Okno komunikatu, który zawiera dane pobrane z pola text.

Pobranie danych za pomocą okna confirm

Podczas tworzenia aplikacji, czasami może zdarzyć się również sytuacja, w której będziesz chciał uzyskać potwierdzenie pewnej akcji przez użytkownika. Do tego typu zadań należy posłużyć się oknem typu confirm. Wyświetla ono podany komunikat i umożliwia sprawdzenie, który przycisk został naciśnięty przez użytkownika. Więcej na temat okna confirm dowiesz się z encyklopedii: Jak wyświetlić komunikat.

W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys. 3.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 3.), wpisz:

document.getElementById("butWyslij").onclick = function text() {
    var imie = document.getElementById("mojTekst").value;
    var odp = confirm( imie + ' lubisz swoje imię?');
if (odp) {
    alert('My też!')
}
else {
    alert('To nie dobrze ');
}
};

Kliknij przycisk ENTER.
W polu tekstowym na stronie, wpisz swoje imię i kliknij przycisk wyślij. Wówczas na ekranie powinno zostać wyświetlone okno typu confirm (Rys. 5.).

Rys. 5. Okno typu confirm, które zawiera dane z pola text.

Jeśli klikniesz na przycisk OK, zostanie wyświetlony komunikat zawierający zdanie: "My Też!". Jeżeli klikniesz na przycisk Cancel/Anuluj, pojawi się komunikat zawierający zdanie: "To niedobrze".

Pobranie danych za pomocą okna prompt

Ostatnim, z omawianych w tym samouczku sposobów na pobranie danych od użytkownika, jest okno typu prompt, w którym użytkownik może wpisać dane do pola tekstowego, znajdującego się w wywołanym oknie. Więcej na temat okna typu prompt dowiesz się z encyklopedii: Jak wyświetlić komunikat.

W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys. 3.), a następnie w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 3.), wpisz:

document.getElementById("butWyslij").onclick = function text() {
    var imie = document.getElementById("mojTekst").value;
    var odp = confirm( imie + ' czy chcesz podać też swoje nazwisko?');
if (odp) {
    odp = prompt('Podaj Nazwisko', '');
    document.getElementById("pokaz").innerHTML = "Twoje imię i nazwisko to: " + imie + ' ' + odp;
}
else {
    document.getElementById("pokaz").innerHTML = "Twoje imię to: " + imie;
}
};

Kliknij przycisk ENTER.
W polu tekstowym na stronie, wpisz swoje imię i kliknij na przycisk wyślij. Wówczas na ekranie zostanie wyświetlone okno typu confirm, które w przypadku kliknięcia przycisku OK, wywoła okno typu prompt. Okno to zostało przedstawione na Rys. 6.

Rys. 6. Okno typu prompt, które pobiera nazwisko użytkownika.

Po wpisaniu nazwiska przez użytkownika, na górze strony, powinna pojawić się informacja podobna do przedstawionej na Rys. 1. W przypadku, gdy użytkownik nie będzie chciał podać swojego nazwiska, strona powinna wyglądać tak, jak na Rys. 2.

Podsumowanie

W tym samouczku nauczyłeś się, jak pobierać dane od użytkownika z wykorzystaniem pola typu input type=text oraz okien confirm i prompt.

W kolejnym samouczku nauczysz się, jak tworzyć i odczytywać dane z plików Cookie.

Dodatkowo zobacz: