Ao escrever aplicações em javascript, você deve enfrentar algumas questões antes de ser realmente pronto para eles. É um cenário de galinha-ou-ovo - que técnica que você deve abordar em primeiro lugar? Isso é como é com a saída do aplicativo.

Para ver como algumas técnicas de programação funcionar, você precisa saber como escrever a saída para a tela do aplicativo. Claro, você realmente precisa saber mais sobre javascript antes de poder dominar a técnica de escrever qualquer coisa na tela.

Como escrever a um elemento HTML

Os documentos HTML são compostas de elementos individuais. A elemento é qualquer marca que você usa para armazenar conteúdo, tais como,

, ou tag. Você pode gravar informações em qualquer um desses elementos usando javascript. O exemplo a seguir mostra como você pode escrever para elementos específicos.

Criação de saída Elemento HTML
Mude-me

Neste caso, a página contém uma

tag com um identidade do myText. Este parágrafo contém o texto Mude-me. Além disso, há uma tag que cria um botão o usuário pode clicar. Quando o usuário clica no botão Clique Me, o aplicativo chama a WriteText () função que aparece no do documento dentro da tag.

javascript tem vários objetos globais que você pode acessar com o seu código. Um dos objetos mais importantes é documento, que se refere a todo o documento HTML. Claro, você não quer mudar a toda document- quiser alterar apenas um elemento dentro do documento. o getElementById () função recupera qualquer elemento que tem um identidade atributo pelo nome desse atributo, que é myText nesse caso.

Neste ponto, você tem acesso a todo o

elemento com o nome myText. Você quer mudar o texto dentro desse elemento. o innerHTML propriedade fornece acesso ao texto dentro do

elemento. Você pode ler o conteúdo ou modificá-lo. utilização innerHTML =, como mostrado no código, modifica o conteúdo. Ele faz com que o conteúdo igual ao que se segue, que é Clicado! nesse caso.

Ao tentar o exemplo, você vê inicialmente uma página com algum texto e um botão. Clique no botão, eo valor das alterações de texto. Esta técnica funciona com qualquer elemento que exibe texto. Você poderia facilmente usá-lo com uma ou qualquer outra tag que pode exibir texto.

Esta técnica só funciona quando você interage com elementos que contêm texto dentro de uma tag de abertura e fechamento, tais como

. Ao trabalhar com um ou outro elemento que utiliza atributos para armazenar conteúdo, você precisa usar um método diferente. Neste caso, você deve acessar o atributo dentro do controle e fazer a mudança lá, como mostrado aqui:

document.getElementById ( "btnClickMe") setAttribute ( "value", "clicado!"). -

Neste caso, você pergunta o javascript para obter o acesso às btnClickMe o elemento em documento e, em seguida, para definir o valor atribuir a Clicado!. O resultado é o mesmo que quando se trabalha com o

etiqueta, mas a abordagem é ligeiramente diferente. o innerHTML propriedade é útil apenas para elementos que têm um valor atribuído a essa propriedade.

Como criar documento de saída direta javascript

Em alguns casos, você não quer interagir com um elemento existente, para que você criar um novo elemento que contém o conteúdo que você quer ver. Por exemplo, você pode adicionar um novo

tag que contém o texto que você quer ver. javascript fornece uma série de maneiras de realizar essa tarefa.

A maneira mais simples para executar a tarefa é criar um script embutido como o mostrado no exemplo a seguir que adiciona a saída desejada.

Criando saída direta

O ponto focal deste exemplo é a chamada para o document.write () função. Esta função permite que você escreva qualquer texto que deseja o documento objeto. Neste caso, o exemplo cria um novo

tag que contém uma mensagem simples.

Você poderia facilmente criar este texto, adicionando o

marcar diretamente. Esta técnica particular vem a calhar. Por exemplo, você pode usá-lo para verificar se há uma condição e, em seguida, adicionar o texto apropriado com base na condição. O que você precisa ver neste exemplo é que escrever para o documento usando um script é realmente possível.

Evitar potenciais problemas com a saída

Erros pode causar todo tipo de problemas para os usuários que, por sua vez, causam todos os tipos de problemas para você. Um dos erros mais interessantes que você pode encontrar é escrever informações num documento objeto incorretamente. O seguinte ilustra uma situação em que você vê o resultado incorreto de usar o document.write () função.

Criação de saída Elemento HTML
Mude-me

Note-se que o document.write () função é chamada depois que a página é concluída. Quando você usa o document.write () função desta maneira, ele substitui tudo o que aparece na documento objeto. Quando você clica no botão Clique-me na página, você vê a palavra Ops! na tela e nada mais.

Na verdade, a página não vai mesmo terminar o carregamento porque o navegador não sabe o que fazer com ele. Para interromper o processo de carregamento, você deve clicar manualmente do seu navegador botão carregando Parar.

Neste ponto, se você usar a capacidade do seu navegador para visualizar o código fonte da página, você verá uma única palavra, Ops!. A página não contém mais um declaração,,, ou tags, ou qualquer das outras informações que costumava conter. o document.write () função substituiu tudo.

Agora, isso não é sempre um resultado incorreto - você pode realmente precisa para substituir a página com material novo, mas você precisa para criar uma página inteiramente nova quando fazê-lo.