JavaScript

Javascript é uma linguagem criada pela Netscape que serve  para aumentar os recursos do navegador.

Todas as páginas escritas com HTML são estáticas. Conseguem fazer com que o browser apenas leia o que há no código e reproduza friamente aquele conjunto de instruções. Um dos principais recursos do Javascript é a possibilidade de fazer com que a página HTML seja dinâmica, ou seja, capaz de fazer com que o usuário possa interagir com a página, ou usar outros recursos para fazer com que o documento Web se altere sem necessidade de um novo carregamento de página. Enfim, o Javascript é uma poderosa ferramenta para quem deseja fazer belas e apresentáveis páginas para a Internet.

Como funciona?

O Javascript é uma linguagem de programação que funciona interativamente com o código HTML. O Javascript consegue ler, entender e manipular os objetos de uma página HTML, tendo a facilidade necessária para altera-los automaticamente, quando programado. São inseridos nas páginas de uma maneira peculiar, podendo ter apenas uma área para scripts ou espalhados pelo código, do jeito que melhor se adapte às necessidades de cada usuário.

Como estamos falando de uma linguagem de simples, todos podem aprendê-la. Nessas lições, começaremos do básico, por isso vamos falar para quem nunca programou uma linha de Javascript. Porém é necessário ter bons conhecimentos da linguagem HTML que não será explicada aqui, porém será muito utilizada.

Javascript veio do Java?

Não. O Java é uma linguagem também utilizada na Web, porém não tem ligação estreita com o Javascript, apesar dos nomes muito parecidos. A primeira tem muita semelhança com a linguagem C e C++, utilizada para programação, já o Javascript é uma linguagem dinâmica, orientada aos objetos constantes do HTML, bastante leve e prática.

Para compreender melhor esta linguagem, precisamos verificar alguns conceitos básicos: O que são variáveis, funções, objetos e eventos.

Variáveis: São valores que são atribuídos dinamicamente, ou seja, não têm um valor pré-definido. Podem ser definidos pelo usuário, bem como por qualquer outro método.

Funções: São comandos ou conjuntos de comandos utilizados para cumprir certos objetivos dentro do script, roteiro de programação. Existem dois tipos de funções em Javascript: As funções internas ou intrínsecas, e as funções externas ou definidas pelo usuário.

Funções internas ou intrínsecas são aquelas que não precisam ser especificadas, pois o próprio Javascript já as reconhece e sabe o que fazer com elas. Um exemplo pode ser a função alert() que veremos ainda nesta lição

Funções externas ou definidas pelo usuário são aquelas que o usuário precisa explicar para o Javascript quais são as ações que ele precisa tomar, pois a linguagem desconhece seu nome. Um exemplo que veremos nessa lição será a função Diga_ola().

Objetos: São os componentes de uma página HTML. É um dos tópicos mais extensos do Javascript. No final das lições teremos um guia hierárquico dos objetos. Em uma visão figurativa, podemos ilustrar uma escrivaninha como uma página HTML. Seu objeto maior é a escrivaninha em si, tendo como um de seus objetos o computador que está sobre ela. O computador tem como seu objeto o teclado, o monitor, o mouse. E por sua vez, o mouse tem os botões como seus objetos, enquanto o teclado tem as teclas, e assim temos uma cadeia de objetos hierarquicamente formada. Podemos dizer que as teclas pertencem ao teclado que pertencem ao computador que pertence à escrivaninha.

Eventos: São importantes aliados ao programador de Javascript. O evento, como o próprio nome diz, é algo que acontece. É como se o Javascript aguardasse pelo acontecimento do evento para acionar algum procedimento. Por exemplo, o clique sobre algum objeto da página é um evento. Passar o mouse sobre uma figura é um evento. Carregar e descarregar uma página é um evento. Selecionar um campo de formulário é um evento. Assim temos total controle sobre as ações exercidas pelo usuário podendo criar diversas situações.

Vamos começar ?

Para começarmos a utilizar o Javascript, precisamos saber onde colocamos os dados do script. Este é sempre colocado dentro das tags <SCRIPT> .... </SCRIPT>. Outra maneira que é geralmente utilizada é quando especificamos a linguagem do script para que o navegador possa identificar com mais facilidade. Quando colocamos apenas as tags <SCRIPT>, por convenção, é Javascript, mas também é correto utilizarmos as seguintes tags: <SCRIPT language="JavaScript"> ... </SCRIPT>.

Podemos incluir os scripts onde quisermos dentro da página. Mas podemos incluir também em uma localidade genérica, que seria dentro do cabeçalho da página, ou seja, dentro das tags <HEAD> ... </HEAD>, isso fica a critério do freguês. Com o tempo cada um adaptará qual a melhor situação para utilizar o Javascript em determinada parte da página.

Podemos agora começar com um código simples. Os números que antecedem cada linha não precisam ser digitados, eles estão sendo usados apenas para explicarmos o que cada uma delas faz.

 1 <HTML>
 2 <HEAD>
 3 <TITLE>Meu primeiro JavaScript</TITLE>
 4 <SCRIPT>
 5 function Diga_ola(nome) {
 6 	alert("Olá, " + nome)
 7 }
 8 </SCRIPT>
 9 </HEAD>
10 <BODY>
11 Esta página dará um exemplo de função intrínseca e
12 externa, bem como explicará o que são variáveis.<P>
13 <SCRIPT>
14 Diga_ola("Clara")
15 Diga_ola("carlos")
16 </SCRIPT>
17 </BODY>
18 </HTML>

Linha 1 a 3: cabeçalho da página

Linha 4: inicia um bloco em linguagem Javascript

Linha 5: cria a função Diga_ola(nome)

Linha 6: com a função interna alert(), exibe a mensagem selecionada

Linha 7: encerra a função Diga_ola(nome)

Linha 8: encerra o bloco em Javascript

Linha 10: corpo da página

Linha 11 e 12: insere texto na página

Linha 13: inicia um bloco em Javascript

Linha 14: chama a função Diga_ola(), passando o valor "Clara" como nome

Linha 15: chama a função Diga_ola(), passando o valor "Carlos" como nome

Linha 16: encerra um bloco em Javascript

Linha 17 e 18: indica o fim da página

Para que possamos entender melhor o exemplo acima, vamos estudá-lo por partes.

Uma função é sempre criada pela palavra-chave function, seguida do nome da função. Toda função recebe "()" no final, podendo estar ou não vazio, de acordo com os valores que se querem passar. Neste caso, criamos uma função chamada Diga_ola() onde o valor que vier com ela será chamado de nome.

Toda função tem sua abertura feita pelo símbolo "{" e seu fechamento por "}".

A função interna alert(x), exibe uma caixa de diálogo com o botão OK para o usuário, com a mensagem que for colocada no lugar de "x". Ou seja, se colocarmos alert("Olá, mundo") em um código, assim que for acionado exibirá uma caixa de diálogo.

Qualquer que seja a mensagem aplicada entre os parênteses da função interna alert() será exibido em uma caixa de diálogo como este exemplo. Na função anteriormente criada teremos como texto Ola, Maria e na outra caixa teremos Olá, João.

Usando novamente o script dentro da tag <BODY>, criamos a chamada para a função Diga_ola(), passando como valores Maria e João.

Experimente copiar o código acima utilizado como exemplo e execute-o em seu navegador.

Depois, tente mudar os nomes na área Diga_ola("Maria") e Diga_ola("João") para outros nomes que você quiser. Execute novamente para ver o resultado.

Assim, dizemos que Diga_ola(nome) é uma função, e "nome" é a variável que terá seu valor atribuído pelo texto colocado na chamada que é feita dentro do código