Os materiais didáticos aqui disponibilizados estão licenciados através de Creative Commons Atribuição-SemDerivações-SemDerivados CC BY-NC-ND. Você possui a permissão para visualizar e compartilhar, desde que atribua os créditos do autor. Não poderá alterá-los e nem utilizá-los para fins comerciais.
Atribuição-SemDerivações-SemDerivados
CC BY-NC-ND
Cursos / Informática para Internet / Desenvolvimento Web I / Aula
Para começar a desenvolver seus primeiros scripts em JavaScript, poucos requisitos são necessários,como descritos a seguir:
Se você já possui todos os requisitos necessários para fazer um programa JavaScript, então é hora de começarmos. Caso sinta necessidade, revise algumas de nossas aulas anteriores para relembrar um pouco de HTML! Como já foi comentado antes, o código JavaScript é embutido dentro de uma página HTML, mais especificamente, ele é colocado dentro da tag <SCRIPT> do HTML. O trecho de código a seguir demonstra como o JavaScript funciona integrado ao código HTML.
Essa página, ao ser carregada, vai exibir uma caixa de diálogo com o texto “Olá mundo” e um botão OK. Isso é feito através da função alert() do JavaScript.
Outro exemplo simples do JavaScript é imprimir uma mensagem diretamente na página HTML. Para isso, você pode usar o comando documento.write() para adicionar textos dentro da página HTML, utilizando inclusive tags HTML para incrementar o texto, como pode ser visto no exemplo a seguir:
Nos dois exemplos que você viu, a tag <script> foi incluída dentro do corpo da página (tag <body>). Entretanto, isso não é uma regra, pois às vezes o JavaScript é incluído dentro da tag <head>, como veremos no decorrer da disciplina. Dentro da tag <body> ela pode aparecer em qualquer ordem em relação às outras tags, tais como: <img>, <form> etc., bastando respeitar a sintaxe do HTML (regras de aninhamento de tags).
Uma coisa que você deve notar é que o browser carrega uma página Web lendo seu conteúdo de cima para baixo, assim como uma pessoa geralmente faz ao ler o arquivo. Muitas vezes, instruções HTML carregadas no início do arquivo só poderão ser executadas após o navegador ter carregado todos os elementos necessários para sua execução. Isso significa dizer que os elementos a serem manipulados por uma instrução JavaScript devem ser carregados antes para que a instrução possa ser executada.
Por exemplo, o código a seguir pode não funcionar corretamente, visto que o código JavaScript, representado pela instrução entre as linhas 7 e 9, acessa a imagem com id=”ordem”, que está definida somente na linha 10.
Como era de se esperar, o mesmo problema ocorreria se um script tentasse acessar uma variável ou função que só está declarada depois dela. Por essa razão, para assegurar que scripts funcionem corretamente, é uma boa prática declarar funções e variáveis que são usadas em vários lugares dentro da tag <head>. Como essa tag vem antes do <body>, seus elementos serão naturalmente carregados antes de qualquer elemento que estiver do <body>, como é apresentado no trecho a seguir:
Como pode ser visto, a instrução da linha 10 usa uma variável chamada mensagem, que foi definida na linha 5 (na próxima seção serão explicados mais detalhes sobre declaração de variáveis), em um trecho de script declarado dentro da tag <head>. Apesar do exemplo mostrar somente um bloco de <script> dentro do <head> e outro dentro do <body>, é possível colocar vários blocos de <script> nos dois casos, como pode ser visto no código abaixo.
Uma outra maneira de usar código JavaScript sem ter que necessariamente misturar os comandos HTML com JavaScript é utilizar referências para arquivos externos que possuam código JavaScript. No exemplo a seguir dois arquivos são criados, um contendo somente código HTML e outro contendo somente código JavaScript.
Arquivo HTML:Arquivo JavaScript (codigo.js):
Versão 5.3 - Todos os Direitos reservados