Relembrando...

Apesar dos nossos programas não serem mais concretos, eles tão pouco eram customizáveis.

Para alterarmos o valor da nossa entrada, era necessário alterar o código-fonte e alterar o valor armazenado nas variáveis que serviam como entrada do nosso programa.

Logo, apesar do modelo ser potencialmente generalizável, o nosso programa ainda não era generalizado pois não calculava o mesmo processo para qualquer entrada, fornecendo saídas diferentes.

Entradas

As interfaces de entrada nos permitem "dialogar" com o usuário para que ele possa alterar os parâmetros da computação e generalizar o nosso modelo.

Existem diversos métodos de entrada, mas os mais comuns com os quais iremos trabalhar são o teclado e o mouse.

• O teclado funcionará como método padrão de entrada de dados. Exemplo: entrada de nome, email, telefone, etc em um formulário. Os dados serão "lidos" ao coletar os dados inseridos no teclado.
• O mouse funcionará como método de entrada para dizer quando iremos enviar os dados para o programa. Pense no formulário. Nós sinalizamos ao programa que terminamos de preencher os dados ao clicar em um botão "enviar", por exemplo.

Existem 2 formas de entrada no JS: prompt ou conexão com o HTML.

Prompt

O prompt funciona tanto no navegador quanto na REPL, mas de formas diferentes.

O comando para ler um dado, de qualquer tipo, do teclado do usuário é:

O prompt permite que os valores das variáveis sejam inseridos durante a execução do programa.

Como temos um modelo genérico, utilizando variáveis, e agora os valores podem ser alterados durante a execução isso nos permite criar uma solução de um problema para qualquer computação (Entrada -> Processo -> Saída).

Lendo entradas do HTML

O HTML é uma linguagem de marcação de dados. Ela possui componentes de entrada, tais como inputs, ou de ações, como os buttons.Integrando JavaScript com HTML é possível utilizar os valores inseridos nos campos HTML como valores de criação de variáveis no JavaScript:

1. Você deve conectar o seu arquivo HTML com um arquivo JavaScript declarando dentro da seção head do HTML o caminho para o seu arquivo JavaScript: <script src="script.js"></script>
2. O arquivo chamado script.js vai conter o código-fonte em JavaScript do seu programa, e deve estar na mesma pasta do seu arquivo HTML
3. No HTML:Cada input ou botão deve ter um nome para que possa ser identificado posteriormente. No HTML, o nome de elementos é feito usando a propriedade id. Por exemplo, input pode ter um nome (inputNumero) <input id="inputNumero" type="number">
4. No JavaScript: Você vai criar um comando que será acionado toda vez que um botão for clicado. Damos a esse comando o nome de evento. Por exemplo, vamos criar o evento calcularMetade
   let calcularMetade = function(){ }. Todos os comandos dentro do { } (ou seja, um bloco) serão executados quando clicarmos no botão.
5. No HTML: Nós dizemos ao HTML o que deve acontecer quando clicarmos no botão associando o evento ao botão: <button onclick="calcularMetade()"> Calcular </button>

Lendo entradas do HTML

6. No JavaScript: Dentro do comando calcularMetade, ou seja, no código que vai dentro do { }, você pode colocar qualquer instrução em JavaScript. Para ler o valor de um input no HTML, temos que conectá-lo ao JavaScript utilizando o ID do input (declarado no HTML):
   calcularMetade = function(){
  let valorEntrada = document.getElementById("inputNumero").value
}


7. No JavaScript: Nós podemos repetir esse processo para quantas entradas forem necessárias!
   cliqueiNobtnEnviar = function(){
  let nome = document.getElementById('nomeInput').value
  let ano = document.getElementById('anoInput').value
  let cidade = document.getElementById('cidadeInput').value
}
8. No JavaScript: Tendo os valores de entrada das variáveis, podemos trabalhar com elas normalmente.
   continuando o código acima ...

   let valorEntrada = document.getElementById("inputNumero").value
let metade = valorEntrada / 2

Saídas

Também existem dois métodos para apresentar saídas no JavaScript: através do console ou linkando com o HTML

Console

Como já conhecemos, o console.log() pode apresentar qualquer expressão no console do browser ou da REPL.

Saídas no HTML

Assim como nas entradas, os elementos de texto no HTML podem ser nomeados

Como apresentar uma saída utilizando um elemento de texto HTML:

1. No HTML: Nomeie um elemento de texto. Pode ser um header (h1, h2, ...) span, etc.
   <h1 id="saidaResultado"></h1>
2. No JavaScript: Nós associamos uma variável a um elemento HTML usando
   let saida = document.getElementById('saidaResultado')
   Nós só precisamos fazer a associação uma vez, e usar a variável para apresentar a saida quantas vezes forem necessárias.
3. Depois de associada a variável em JavaScript com o elemento em HTML, para apresentar a saída usamos:
   saida.innerHTML = metade
4. Lembre-se: Se quiser apresentar várias saídas ao mesmo tempo você tem duas opções: 1) Ou junta todas as saídas (concatena) em uma única string e coloca na saída HTML, ou 2) Cria vários elementos HTML , cada um recebendo a saída correspondente.