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 todos aqueles irritantes caixas de diálogo. 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.

Claramente, a entrada e saída baseada em formulário é preferível à interrupção constante de caixas de diálogo.

Apresentando programação orientada a eventos

interfaces gráficas normalmente usam uma técnica chamada programação orientada a eventos. A ideia é 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 # 147 Inicie o Mísseis # 148- no botão.) Os botões têm quase sempre eventos. Alguns outros elementos fazer, também.

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

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

4. Obter informações a partir de elementos do 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 de formulário.

5. Use elementos de formulário para a 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 é para criar a estrutura HTML. Aqui está o código HTML:

Caixa de Texto 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.

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

• UMA fieldset é usado para conter elementos de formulário. entrada elementos precisam estar dentro de algum tipo de elemento de 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.

• eventos do botão refere-se a uma função (ainda a ser definido). Neste exemplo, é nomeado # 147 sayHi () # 148-.

• Uma segunda caixa de texto contém a saudação. Esta segunda caixa de texto é chamada 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 você precisa de uma função chamada diga oi, e esta função lê o texto do txt-Name campo e escreve para o 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() function (definido no cabeçalho como de costume).

 função sayHi () {var txtName = document.getElementById ( "txtName") - var txtOutput = document.getElementById ( "txtOutput") -

Você pode extrair cada elemento criado 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. Manipulando essa 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.

Manipular 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 = "Hi there," + Nome + "!"

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

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

1. Criar uma variável para o nome.

   Esta é uma variável de cadeia comum.

2. Copiar o valor da caixa de texto na 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. Envie 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 parseInt () ou parseFloat () funções.