Atenção: esse artigo tem um vídeo complementar. Clique e assista!
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.
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.
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.
...
