Entrada e saída de dados

Até então, os exemplos de operações que foram apresentados envolveram a entrada de dados por meio de atribuição direta de valores, como nesse exemplo:

let nomeSalada = 'Salada Top Dallas';

Mas, esse tipo de atribuição, apesar de funcionar e ser a primeira maneira que conhecemos para a entrada de dados/valores, sempre é realizada somente no código-fonte que você está criando. Na vida real, esse nome de salada, por exemplo, seria digitado em um formulário web. Por enquanto, não precisamos ir tão a fundo, pois, estamos no básico do básico, lembra?! Sendo assim, vamos com uma solução paliativa, que nos permite solicitar dados para quem estará executando nossos programas.

A entrada de dados básica em JavaScript pode ser feita por meio de diversos métodos/comandos. Os mecanismos mais comuns são:

• Entrada de texto pelo prompt()
• Input (<input>) ou outros elementos de entrada em formulários HTML;

Já a saída de dados, a forma com a qual os resultados são apresentados em tela, pode ser realizada no console do navegador conforme segue:

• Saída de texto no console do navegador web por meio do método console.log();
• Saída de texto de alerta no navegador web por meio do método alert();
• Saída no documento HTML por meio do método document.write();

Esses comandos de entrada e seguida serão descritos e exemplificados a seguir.

Cuidados com relação à Entrada de Dados

A entrada de dados é um processo crítico em qualquer sistema ou aplicativo, pois a precisão, a integridade e a consistência dos dados inseridos podem afetar diretamente a qualidade das informações geradas pelo sistema. Por isso, é importante garantir que os dados sejam inseridos corretamente e de forma segura, utilizando métodos de validação e verificação para evitar erros e inconsistências. Ainda não vamos conseguir nos primeiro exemplos de estudo resolver esse problemas. Contudo, precisamos ter ciência de que esse cuidado é essencial.

Entrada por meio do prompt

O prompt() é uma função que exibe uma caixa de diálogo ao usuário com uma mensagem e um campo de entrada. O usuário pode digitar um valor nesse campo e pressionar OK ou Cancelar. O valor digitado é então retornado como uma string. Por exemplo:

let nomeSalada = prompt("Nome da salada");
let valorSalada = +prompt("Valor da salada");
console.log("Salada " + nomeSalada + " criada com sucesso! Seu valor é R$ " + valorSalada);

Nesse exemplo, as seguintes ações acontecem em sequência:

• o prompt exibe a mensagem "Nome da salada" e o usuário pode digitar o nome da salada que deseja cadastrar;
• o nome da salada é atribuído e armazenado na variável nomeSalada;
• o prompt exibe a mensagem "Valor da salada" e o usuário pode digitar o valor da salada que está cadastrando;
• o valor da salada é atribuído e armazenado na variável nomeSalada. Note que aqui acontece a coerção de valores com o operador +. Vale lembrar que o retorno do prompt é sempre um valor textual (String). Então, precisamos transformar o texto retornado em um valor numérico;
• Por fim, mostramos no console do navegador (console.log) uma mensagem concatenada.

Essa solução pode ser um pouco melhor caso utilizarmos Templates Strings, conforme apresentamos na seção Tipos de dados e Variáveis. A mensagem concatenada que colocamos no console é confusa, pois concatena muita coisa de uma vez só. Imagine se, ao invés de duas variáveis, tivéssemos diversas outras referentes à salada que está sendo cadastrada? Essa string concatenada seria gigantesca e confusa.

Então, segue uma solução com Template String:

let nomeSalada = prompt("Nome da salada");
let valorSalada = +prompt("Valor da salada");

console.log(`
    Salada: ${nomeSalada} criada com sucesso!
    Seu valor é R$ ${valorSalada}
`);

Você não concorda que essa solução é bem mais elegante e fácil de se manter ao longo do tempo? Qualquer nova variável que precisarmos mostrar nesse resultado no console pode ser facilmente inserida. Vamos fazer isso pra lhe provar de vez que essa solução é bem mais eficaz:

let nomeSalada = prompt("Nome da salada");
let ingredientes = prompt("Ingredientes da salada");
let valorSalada = +prompt("Valor da salada");

console.log(`
    Salada: ${nomeSalada} criada com sucesso!
    Ingredientes: ${ingredientes}
    Seu valor é R$ ${valorSalada}
`);

Código fonte no JSFiddle

Se quiser testar esse código agora no editor online JSFiddle, acesse aqui o link para a implementação. Contudo, não se esqueça de voltar aqui para continuar a leitura.

Entrada por meio de formulários HTML

O input de formulário é uma forma mais avançada de entrada de dados que permite ao usuário preencher campos de um formulário HTML. Não se preocupe com isso agora, mas, queremos lhe mostrar que isso existe e que funciona bem também.

Nessa abordagem, o JavaScript pode acessar os campos através do DOM (Document Object Model) para recuperar os valores digitados. É algo que, no futuro, você precisará estudar. Mas, vamos ver esse exemplo logo:

index.html

<form>
  <label for="nome-salada">Nome da Salada:</label>
  <input type="text" id="nome-salada">
  <label for="nome-salada">Valor da Salada:</label>
  <input type="number" id="valor-salada">
  <input type="button" onclick="cadastrarSalada()" value="Cadastrar">
</form>

script.js

function cadastrarSalada() {
  let nomeSalada = document.getElementById("nome-salada").value;
  let valorSalada = document.getElementById("valor-salada").value;
  
    console.log(`
    Nome da Salada: ${nomeSalada}
    Valor da Salada: ${valorSalada}
  `)
}

Código fonte no JSFiddle

Novamente, se quiser testar esse código no editor online JSFiddle, acesse aqui o link para a implementação.

Note que o formulário na aba HTML contém dois campos de entrada (um para texto e um para valor numérico) e um botão que chama a função cadastrarSalada() quando clicado. Essa função recupera os valores digitados nos campos de entrada através da propriedade value do elemento e exibe uma mensagem de confirmação no console do navegador.

Como havíamos lhe tranquilizado, essa abordagem é mais avançada. Para a sequência deste material, vamos utilizar o prompt por bastante tempo. Vale lembrar que existem muitas outras formas de interagir com o usuário e receber informações em uma aplicação web.