Como criar uma caixa de entrada no JavaScript?

JavaScript é uma das linguagens de programação mais famosas do mundo, que ajudam a criar aplicativos da Web dinâmicos e interativos. Como qualquer outra linguagem dinâmica, é uma necessidade de ler, salvar, processar e sair dados de um usuário.

Quando você precisa lidar com dados do usuário sem enviá -los de volta ao servidor, o JavaScript é extremamente benéfico. O JavaScript é significativamente mais rápido do que enviar tudo ao servidor a ser processado, mas você deve poder receber entrada do usuário e operar com ele usando a sintaxe adequada. O foco deste tutorial será a obtenção de entrada do usuário e exibi -lo na tela usando elementos HTML ou prompts.

Método 1: Usando prompts

Para se conectar com os usuários, o JavaScript nos oferece alguns métodos de objeto de janela de qual é o incitar() método. A função básica do método prompt () é exibir uma caixa de diálogo e obter informações de um usuário. O incitar() O método é mais comumente usado para armazenar/salvar pequenas quantidades de informações sobre o usuário e é mais comumente usado quando o desenvolvedor deseja que o usuário insira dados antes de prosseguir para a página da web.

Sintaxe

Prompt (texto, padrão)

O incitar() o método leva dois parâmetros: o primeiro é o texto parâmetro, que aparece na caixa de diálogo, e o segundo é o padrão Parâmetro, que é o texto padrão exibido na caixa de entrada do prompt. Essas opções são opcionais e podem ser deixadas em branco.

Prompt () Método Exemplo

Var Nome = Prompt ("Digite seu nome", "Digite o nome");
if (nome != null)
alerta ("Olá! "+ nome)

No código JavaScript acima, chamamos o incitar() método e pediu ao usuário que insira seu nome. O valor padrão será Insira o nome:

Vamos remover o nome inserir e digitar seu nome:

Agora, quando você clica no OK Botão você verá o Olá! Nas Alerta de mensagem:

Método 2: HTML e JavaScript

Outro método para criar uma caixa de entrada no JavaScript é usar uma caixa de entrada HTML e, em seguida, referenciar isso no JavaScript e obter seu valor.

Html:

Crie caixa de entrada

Salvar

No código acima, primeiro, definimos uma caixa de entrada e depois um botão com o anime de Salvar. Nós então referenciamos o código.JS Arquivo usando a tag de script. No código.JS arquivo, todo o nosso código JavaScript estará presente.

JavaScript:

const btn = documento.getElementById ("btn");
btn.addEventListener ('click', function ()
Var Nome = Documento.getElementById ("MyName").valor;
alerta ("nome:"+ nome);
);

No código acima, referenciamos o botão com o ID de btn do html e depois adicionou um ouvinte de evento de clique que vai ouvir continuamente e quando alguém clicar no botão Salvar uma função será executada. Nesta função, primeiro, obtemos o valor da caixa de entrada usando o ID dado a ela que é o meu nome. Então alertamos este valor.

Conclusão

JavaScript é a linguagem de programação cuja comunidade está aumentando dia a dia e com razão, pois é a linguagem de programação que torna a nossa página da web interativa. O JavaScript nos oferece para interagir com os usuários, recebendo informações do usuário e salvando essa entrada ou exibindo essa entrada.

Neste artigo, tiramos a contribuição do usuário e exibimos essa entrada usando dois métodos i-e incitar() Método e referência a uma caixa de entrada da HTML em JavaScript.