Come creare una casella di input in JavaScript?

JavaScript è uno dei linguaggi di programmazione più famosi al mondo che aiuta a creare applicazioni Web dinamiche e interattive. Come qualsiasi altro linguaggio dinamico, è una necessità leggere, salvare, elaborare i dati.

Quando è necessario gestire i dati dell'utente senza inviarli al server, JavaScript è estremamente utile. JavaScript è significativamente più veloce che inviare tutto al server per essere elaborati, ma è necessario essere in grado di ricevere input dell'utente e operare con esso utilizzando la sintassi corretta. Il focus di questo tutorial sarà sull'ottenimento di input dell'utente e la visualizzazione sullo schermo utilizzando elementi HTML o istruzioni.

Metodo 1: usando i prompt

Per connettersi con gli utenti, JavaScript ci offre alcuni metodi di oggetti finestra di cui uno è il richiesta() metodo. La funzione di base del metodo prompt () è visualizzare una finestra di dialogo e prendere input da un utente. IL richiesta() Il metodo viene più comunemente utilizzato per archiviare/salvare piccole quantità di informazioni sull'utente ed è più comunemente utilizzato quando lo sviluppatore desidera che l'utente inserisca i dati prima di procedere alla pagina Web.

Sintassi

prompt (testo, impostazione predefinita)

IL richiesta() Il metodo prende due parametri: il primo è il testo parametro, che appare nella finestra di dialogo, e il secondo è il predefinito parametro, che è il testo predefinito visualizzato nella casella di input del prompt. Queste opzioni sono entrambe opzionali e possono essere lasciate vuote.

Prompt () Esempio di metodo

var name = prompt ("immettere il tuo nome", "immettere nome");
if (nome != null)
Avviso ("Ciao! "+ nome)

Nel codice JavaScript sopra, abbiamo chiamato il richiesta() metodo e ha chiesto all'utente di inserire il suo nome. Il valore predefinito sarà Inserisci il nome:

Rimuoviamo il nome Invio e digita il tuo nome:

Ora quando fai clic su OK pulsante vedrai il Ciao! Nas Avviso dei messaggi:

Metodo 2: HTML e JavaScript

Un altro metodo per creare una casella di input in JavaScript è utilizzare una casella di input HTML e quindi fare riferimento a JavaScript e ottenere il suo valore.

Html:

Crea casella di input

Salva

Nel codice sopra, prima, abbiamo definito una casella di input e poi un pulsante con l'anime di Salva. Abbiamo quindi fatto riferimento al codice.js File usando il tag script. Nel codice.js file, tutto il nostro codice JavaScript sarà presente.

JavaScript:

const btn = documento.getElementById ("BTN");
btn.addEventListener ('click', function ()
var name = document.getElementById ("MyName").valore;
Avviso ("Nome:"+ nome);
);

Nel codice sopra, abbiamo fatto riferimento al pulsante con l'ID di btn da HTML e poi aggiunto un ascoltatore di eventi di clic su di esso che ascolterà continuamente e quando qualcuno fa clic sul pulsante Salva una funzione verrà eseguita. In questa funzione, in primo luogo, otteniamo il valore della casella di input usando l'ID che è che è il mio nome. Quindi avvisiamo questo valore.

Conclusione

JavaScript è il linguaggio di programmazione la cui comunità sta aumentando di giorno in giorno e giustamente, così come è il linguaggio di programmazione che rende la nostra pagina web interattiva. JavaScript ci offre di interagire con gli utenti prendendo input dall'utente e quindi salvando tale input o visualizzando tale input.

In questo articolo, abbiamo preso input dall'utente e visualizzato quell'input usando due metodi I-E richiesta() Metodo e riferimento a una casella di input da HTML in JavaScript.