Atenção: esse artigo tem um vídeo complementar. Clique e assista!

De que se trata o artigo:

Este artigo apresenta alguns recursos básicos do JavaScript sendo analisados numa abordagem prática. Através dos vários exemplos implementados é possível perceber toda a dinâmica que o JavaScript propicia às páginas HTML. No decorrer destes exemplos são estudadas funcionalidades como manipulação de conteúdos de uma página, eventos, validação de dados, entre outras.

Em que situação o tema é útil:

Este tema é útil a todos que estão iniciando seu contato com o desenvolvimento web e desejam conhecer os conceitos e recursos básicos da tecnologia JavaScript.

Resumo DevMan:

Este artigo introduz o uso do JavaScript em páginas HTML, focando em exemplos que mostram os seus benefícios e a facilidade de utilizar esta tecnologia. Ao final do mesmo, uma aplicação Java para web é implementada, integrada com uma validação simples desenvolvida em JavaScript que utiliza recursos estudados nos primeiros exemplos.

O surgimento da web ocorreu num cenário no qual os recursos computacionais eram escassos e limitados. Ainda não se tinha conhecimento das dimensões que essa poderosa ferramenta um dia atingiria.

Quando Tim Berners-Lee criou o protocolo HTTP (protocolo que possibilita a transmissão de conteúdos hipertexto), a linguagem de marcação HTML e o primeiro navegador, a internet que antes era apenas voltada para comunicação entre universidades e instituições militares, se deparou com um novo mundo para se expandir, sendo nos dias atuais um dos meios mais utilizados para entretenimento, pesquisa, transações comerciais e muitas outras atividades.

Conteúdo hipertexto é o termo usado para denominar um texto em formato digital, ao qual se agregam outros textos, imagens ou sons, cujo acesso se dá através de referências chamadas hiperlinks (ou links). Simplificando, conteúdo hipertexto são as páginas HTML. Estas podem ter diversos links que, ao serem clicados, o usuário é direcionado para outras páginas nas quais o assunto do link em questão se estende ou é complementado.

A evolução da internet e a mudança de seus propósitos trouxeram também novas necessidades. Era preciso tornar mais dinâmicas as páginas que inicialmente eram construídas apenas com conteúdo estático – tags HTML dispondo imagens, textos e links para navegar entre os documentos na rede.

Neste contexto, a Netscape, em parceria com a Sun Microsystems, com a finalidade de adicionar mais interatividade às páginas web, criou a primeira versão do JavaScript, denominada JavaScript 1.0. Esta versão foi lançada em 1995 e implementada em março de 1996 no navegador Netscape Navigator 2.0, que na época dominava o mercado.

O JavaScript rapidamente conquistou ampla aceitação como linguagem de script para a parte cliente de aplicações web, que é a parte do aplicativo que roda no navegador (como as páginas HTML). Em decorrência de sua popularidade, a Microsoft criou o JScript, que basicamente é a sua própria implementação do JavaScript. Apenas foi adotado outro nome por questões comerciais. O JScript foi incorporado ao Internet Explorer em agosto de 1996 e continua em desenvolvimento até hoje.

No decorrer dos anos, o JavaScript só ganhou força, tendo se transformado na linguagem mais popular da internet. Agora, antes de estudarmos os recursos desta tecnologia, é necessário conhecermos alguns conceitos fundamentais.

Mas afinal, o que é o JavaScript?

O JavaScript é uma linguagem de script utilizada na construção de sites. Os códigos escritos em JavaScript podem ser incorporados às páginas HTML, trazendo mais dinamismo para a aplicação. É possível, através desta linguagem, responder rapidamente a ações realizadas pelo usuário, validar dados de formulários antes de enviá-los, alterar conteúdos da página sem precisar recarregá-la, entre outras inúmeras possibilidades.

Na Listagem 1, veja um primeiro exemplo de página HTML com JavaScript. Para executá-lo, basta salvar o código em um arquivo com a extensão .html e abrir através de um navegador qualquer, como o Mozilla Firefox ou o Internet Explorer.

Listagem 1. Código do primeiro programa JavaScript.

<html>
  <head><title>Primeiro Exemplo JavaScript</title></head>
  <body>
    <p>Texto no documento HTML</p>
    <script type="text/javascript">
      document.write("<p>Meu primeiro JavaScript!</p>");
    </script>
    <p>Outro texto no documento HTML</p>
  </body>
  </html>
  

A Figura 1 mostra a tela do primeiro exemplo em execução. Observe que a segunda linha no texto (“Meu primeiro JavaScript!”) foi inserida pelo código que colocamos dentro da tag <script> da página HTML. Portanto, trata-se de um conteúdo inserido através de JavaScript.

Sempre que formos incorporar código JavaScript em uma página, devemos fazer uso da tag mencionada (<script>).

Figura 1. Tela do primeiro exemplo usando JavaScript.

É claro que este exemplo não é muito útil, uma vez que o mesmo texto poderia ser inserido no próprio código HTML, ao invés de utilizar JavaScript. Mas o objetivo é apenas demonstrar uma das funcionalidades do JavaScript: inserir, alterar ou remover conteúdos da página. E esta funcionalidade pode ser usada em circunstâncias nas quais tenha mais utilidade para a aplicação.

O objeto document, presente no código do script, corresponde ao documento HTML corrente, e através desta referência podemos acessar os vários elementos que compõem a página ou usar métodos como o write(), o qual permite escrever código HTML ou JavaScript no documento. Veja que a segunda linha do texto da página foi escrita através do método document.write(). Nos próximos exemplos, iremos utilizar novamente o objeto document para manipular os elementos da página.

...
Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo