Jak utworzyć pole wejściowe w JavaScript?

JavaScript jest jednym z najbardziej znanych na świecie języków programowania, który pomaga w tworzeniu dynamicznych i interaktywnych aplikacji internetowych. Jak każdy inny dynamiczny język, konieczne jest odczytanie, zapisywanie, przetwarzanie i wysuwanie danych od użytkownika.

Kiedy musisz obsługiwać dane użytkownika bez wysyłania ich z powrotem na serwer, JavaScript jest niezwykle korzystny. JavaScript jest znacznie szybszy niż wysyłanie wszystkiego na serwer w celu przetworzenia, ale musisz być w stanie odbierać wejście użytkownika i działać z nim za pomocą odpowiedniej składni. Ten samouczek skupia się na uzyskaniu wejścia użytkownika i wyświetlanie go na ekranie za pomocą elementów lub monitów HTML.

Metoda 1: Korzystanie z monitów

Aby połączyć się z użytkownikami, JavaScript oferuje nam kilka metod obiektów okien podpowiedź() metoda. Podstawową funkcją metody monit () jest wyświetlenie okna dialogowego i przejęcie danych wejściowych od użytkownika. podpowiedź() Metoda jest najczęściej stosowana do przechowywania/zapisywania niewielkich ilości informacji o użytkowniku i jest najczęściej używana, gdy programista chce, aby użytkownik wprowadził dane przed przejściem na stronę internetową.

Składnia

monit (tekst, domyślnie)

podpowiedź() Metoda przyjmuje dwa parametry: Pierwszy to tekst parametr, który pojawia się w polu dialogu, a drugi to domyślny parametr, który jest domyślnym tekstem wyświetlonym w polu wejściowym wiersza. Te opcje są opcjonalne i mogą być puste.

Przykład metody monit ()

var name = monit („Wprowadź nazwisko”, „Wprowadź nazwę”);
if (nazwa != null)
Alert („Witam! "+ nazwa)

W powyższym kodzie JavaScript zadzwoniliśmy podpowiedź() Metoda i poprosił użytkownika o wprowadzenie jego nazwiska. Wartość domyślna będzie Wprowadź imię:

Usuńmy nazwę Enter i wpiszmy swoje imię:

Teraz po kliknięciu OK przycisk zobaczysz Cześć! NAS powiadomienie:

Metoda 2: HTML i JavaScript

Inną metodą utworzenia pola wejściowego w JavaScript jest użycie pola wejściowego HTML, a następnie odniesienie tego w JavaScript i uzyskanie jego wartości.

HTML:

Utwórz pole wejściowe

Ratować

W powyższym kodzie najpierw zdefiniowaliśmy pole wejściowe, a następnie przycisk z anime Ratować. Następnie odnieśliśmy się do kod.JS Plik za pomocą znacznika skryptu. w kod.JS Plik, cały nasz kod JavaScript będzie obecny.

JavaScript:

const btn = dokument.getElementById („btn”);
Btn.addEventListener („kliknij”, funkcja ()
var name = dokument.getElementById („MyName”).wartość;
alert („nazwa:”+ nazwa);
);

W powyższym kodzie odwoływaliśmy się do przycisku z identyfikatorem Btn z HTML, a następnie dodał do niego słuchacz zdarzeń, który będzie słuchał ciągle, a gdy ktoś kliknie przycisk Zapisz, funkcja będzie działać. W tej funkcji najpierw otrzymujemy wartość pola wejściowego za pomocą podanego identyfikatora moje imię. Następnie powiadomimy tę wartość.

Wniosek

JavaScript to język programowania, którego społeczność rośnie z dnia na dzień i słusznie, ponieważ jest to język programowania, który sprawia, że ​​nasza strona internetowa jest interaktywna. JavaScript oferuje nam interakcję z użytkownikami, przyjmując dane wejściowe od użytkownika, a następnie zapisywanie tego wejścia lub wyświetlania tego wejścia.

W tym artykule wzięliśmy dane wejściowe od użytkownika i wyświetliśmy ten wejście za pomocą dwóch metod I-E podpowiedź() Metoda i odwołanie się do pola wejściowego z HTML w JavaScript.