Inserir texto em uma div através de uma área de texto

[Juliana~* 26]

Olá pessoal, tenho nada pra fazer então resolvi vir postar aqui na WebCheats.

O que pretendo passar para vocês hoje, é como inserir um texto em uma div sem atualizar a pagina, com JavaScript.

O conteúdo desse tópico é bem simples, porém requer um conhecimento básico em HTML, como por exemplo.

 

Formulário

Começando com o HTML. Para fazer o que se pretende nesse tópico, será necessário :

Um formulário

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Bom, agora podemos ir para o JavaScript.

Acima do formulário você irá inserir as tags para inserção do código de programação (JavaScript), que é :

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Então vamos lá:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

Agora basta editar o botão na parte HTML da pagina, acrescentado o onClick (o evento quando se clica no botão), para chamar a função fncMensagem().

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Pronto, agora é só se divertir ! Boa sorte, duvidas ou erro, basta comentar abaixo.

 

Se você souber usar bem esse simples script, poderá fazer tantas coisas, como por exemplo, abrir outras paginas através de uma div no site, ou atualizar somente um conteúdo em uma determinada DIV, resumindo, isso é ótimo.

[@re22 0]

O atributo "language" foi depreciado há muito tempo, não deveria mais ser utilizado.

Se estiver em HTML5 não é preciso especificar o tipo do script pois todo navegador tem como padrão "text/javascript", esse é o valor padronizado pelo W3C -

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

 

Pro XHTML 1 e HTML 4 ainda é preciso usar o atributo type, do contrário vai dar algum warning.

 

Pode fazer assim também:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Tratando os eventos no código js.

[Juliana~* 26]

Também é uma boa alternativa, mas pra quem está iniciando sempre achei mais fácil adicionar o evento diretamente no botão do que no próprio JavaScript. Coisa minha !

[NoSlake 55]

Parabéns pelo tutorial, eu não sei muito da programação Java, eu usava um código PHP e tinha que redirecionar toda vez... Não tinha pensado nisso.

Valeu!

[@re22 0]

Só não esquece que Java e Javascript são coisas distintas.