Talvez a aplicação mais intrigante do DOM em javascript é a capacidade de permitir que o usuário se comunicar com o programa através da página web HTML5, sem todas aquelas caixas de diálogo irritantes. Aqui está uma página com um formulário web que contém duas caixas de texto e um botão.

Quando você clica no botão, algo emocionante acontece.

Video: HTML5 Canvas tutorial 2 | Rectangles, internal CSS javascript

Claramente, de entrada e de saída com base em forma é preferível à interrupção constante de caixas de diálogo.

Video: Thinking in Angular1 5 - HTML, CSS and JS What you need to know

Apresentando programação orientada a eventos

interfaces gráficas geralmente usam uma técnica chamada programação orientada a eventos. A idéia é simples.

1. Criar uma interface de usuário.

   Em páginas da Web, a interface do usuário normalmente é construído de HTML e CSS.

2. Identificar eventos o programa deve responder.

   Se você tem um botão, os usuários vão clicar nele. (Se você quiser garantir que clicar nele, colocar o texto “Iniciar o Missiles” no botão.) Botões quase sempre têm eventos. Alguns outros elementos, também.

3. Escreva uma função para responder a cada evento.

   Para cada evento que pretende testar, escrever uma função que faz tudo o que precisa acontecer.

4. Obter informações a partir de elementos de formulário.

   Agora que você está acessando o conteúdo de elementos de formulário para obter informações do usuário. Você precisa de um mecanismo para obter informações a partir de um campo de texto e outros elementos do formulário.

5. Usar elementos de formulário para saída.

Criando o formulário HTML

O primeiro passo na construção de um programa que pode administrar a entrada de texto e de saída é criar a estrutura HTML. Aqui está o código HTML:

Texto Caixa de Entrada e Saída

Como você olhar sobre o código, anote algumas idéias importantes:

• A página usa CSS externo. O estilo CSS é bom, mas não é importante na discussão aqui. Ele permanece encapsulado com segurança em seu próprio arquivo. Claro, você é bem-vindo para olhar sobre ele ou alterá-lo.

  Video: HTML, CSS, and javascript in Netbeans

• A maior parte da página é uma forma. Todos os elementos do formulário deve estar dentro de um formulário.

• UMA fieldset é utilizado para conter os elementos de formulário. entrada elementos precisam estar dentro de algum tipo de elemento nível de bloco, e uma fieldset é uma escolha natural.

• 
  
  
  

  Há um campo de texto chamado txtName. Este campo de texto contém o nome.

• O segundo elemento é um botão. Você não precisa dar o botão uma identificação (como ele não vai ser referido no código), mas tem um onclick () evento.

• evento do botão refere-se a uma função (ainda indefinido). Neste exemplo, é nomeado "diga oi()".

• Uma segunda caixa de texto contém o cumprimento. Esta segunda caixa de texto é chamado txtOutputporque é o campo de texto destinado a saída.

Depois de configurar a página HTML, a função torna-se muito fácil escrever porque você já identificou todas as grandes construções. Você sabe que precisa de uma função chamada diga oi, e esta função lê o texto do txt-Name campo e escreve ao txtOutputcampo.

Use getElementById para obter acesso à página

HTML é uma coisa, e javascript é outra. Você precisa de alguma maneira de transformar um elemento de formulário HTML em algo javascript pode ler. o mágico getElementById () método faz exatamente isso. Primeiro, olhe para as duas primeiras linhas da diga oi() função (definido no cabeçalho como habitual).

 funcionar sayHi () {var txtName = document.getElementById ("txtName") -var txtOutput = document.getElementById ("txtOutput") -

Você pode extrair todos os elementos criados em sua página web, cavando através do DOM. Nos velhos tempos, essa abordagem é como os desenvolvedores usado para acessar elementos de formulário. Era feio e tedioso. Navegadores modernos ter a maravilhosa getElementById () funcionar em seu lugar. Esta beleza procura através do DOM e retorna uma referência a um objeto com o ID solicitado.

UMA referência é simplesmente um indicador onde o objeto especificado está na memória. Você pode armazenar uma referência em uma variável. Manipular esta variável manipula o objeto que ele representa. Se você quiser, você pode pensar nisso como fazer a caixa de texto em uma variável.

Manipulando os campos de texto

Depois de ter acesso aos campos de texto, você pode manipular os valores destes campos com o valor propriedade:

 var name = txtName.value-txtOutput.value = "Olá, " + Nome + "!"

Os campos de texto (e, de fato, todos os campos de entrada) têm um valor propriedade. Você pode ler este valor como uma cadeia variável comum. Você também pode escrever para esta propriedade, e o campo de texto será atualizado em tempo real.

Este código lida com a entrada e saída de dados:

1. Criar uma variável para o nome.

   Esta é uma cadeia variável comum.

2. Copie o valor da caixa de texto para a variável.

   Agora que você tem uma variável que representa a caixa de texto, você pode acessar sua propriedade para obter o valor digitado pelo usuário.

3. Criar uma mensagem para o usuário.

   Use concatenação comum.

4. Enviar a mensagem para o saída caixa de texto.

   Você também pode escrever um texto para o valor propriedade, que altera o conteúdo do campo de texto na tela.

Os campos de texto sempre retornam valores de cadeia (como prompts fazer). Se você quer puxar um valor numérico de um campo de texto, você pode ter que convertê-lo com o parselnt () ou parseFloat () funções.