Quando desenvolvemos páginas web, utilizamos como base a linguagem de marcação de hipertexto (HTML), que forma toda a estrutura do documento a partir de tags, trechos de código que são identificados e interpretados pelo navegador para montar algum elemento.
Aliando essa estrutura às CSS (Cascading Style Sheets), conseguimos estilizar os elementos da página, garantindo uma formatação visual mais completa e de fácil manutenção. Temos assim uma página bem estruturada, com vários elementos visuais (e não visuais) como formulários e tabelas bem formatados, com bordas, cores de plano de fundo, imagens, etc.
Porém, não vamos muito além disso, utilizando apenas HTML e CSS se obtemos apenas documentos ESTÁTICOS, sem interação com o usuário, como caixas de diálogo e validação de entrada de dados.
Para preencher essa lacuna, foi desenvolvida na década de 1990 uma linguagem de script chamada inicialmente de Mocha, posteriormente renomeada para LiveScript e finalmente lançada com o nome de JAVASCRIPT.
O nome JavaScript foi inicialmente motivo de confusão devido a semelhança com o nome da linguagem Java, mas estas duas tecnologias não estão diretamente relacionadas. Ou seja, JavaScript não é uma implementação especial da Java ou é baseado nesta última.
A JavaScript foi inicialmente implementada e lançada no browser Netscape 2.0, e hoje é a principal linguagem de script do lado cliente, suportada por todos os principais browsers.
Essa é chamada uma “linguagem do lado cliente” por que sua execução se dá diretamente no browser, independente de servidor. Assim, JavaScript não é uma linguagem para acesso a banco de dados, mas para tratamento e dinamização dos elementos da página.
Inserindo o código JavaScript na página HTML
Os códigos JavaScript podem ser inseridos na página HTML de duas formas:
Interno no documento: para inserir o código direto na estrutura do HTML, utilizamos as tags <script></script>, conforme mostra a Listagem 1.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//código JavaScript
</script>
</head>
<body>
</body>
</html>
Externo ao documento: o código JavaScript também pode ser mantido em um arquivo separado do HTML. Para isso, deve-se referenciar tal arquivo na página, como vemos na Listagem 2
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="meuArquivo.js"></script>
</head>
<body>
</body>
</html>
O arquivo deve ser salvo com a extensão .JS e sua estrutura é a mesma utilizada quando o código é posto internamente no documento.
Cabe aqui uma observação importante: a tag <script> requer a tag de fechamento separada, não podendo ser fechada em si própria como <script type=.. />.
Sintaxe da linguagem JavaScript
JavaScript foi criada com base na ECMAScript e sua sintaxe é bastante semelhante a linguagens de alto nível muito utilizadas como C e Java, como veremos a seguir.
Usando variáveis
Essa linguagem possui tipagem dinâmica, ou seja, não é necessário definir o tipo das variáveis ao declará-las, para isso basta usar a palavra reservada “var”. Na Listagem 3 temos alguns exemplos de utilização de variáveis.
var nome; nome = “Fulano de Tal”; var idade = 30; idade = 30 + 20 - 10*5;
Trabalhando com funções
JavaScript fornece também suporte a funções, aliado às facilidades da tipagem dinâmica, o que torna a definição de métodos simples e prática. Para criar funções, utilizamos a palavra reservada “function”.
As funções podem receber parâmetros e retornar valores, mas o tipo de retorno e o tipo dos parâmetros não precisa ser previamente definido. Nas Listagens 4 e 5temos exemplos de funções com e sem parâmetros e retorno.
function exibirMensagem()
{
alert(“Olá, seja bem vindo(a)!”);
}
Observação: a função alert será apresentada posteriormente, mas serve para exibir uma mensagem popup para o usuário.
function somar(A, B)
{
return A + B;
}
Para definir o valor de retorno da função, deve-se utilizar a palavra reservada “return” seguida do valor ou expressão do resultado.
Estruturas de controle de fluxo
Assim como a maioria das linguagens de alto nível, JavaScript possui estruturas condicionais e de repetição para controle de fluxo. Na Listagem 6 temos a sintaxe e um exemplo de uso de tais estruturas.
if(condição 1)
{
//ação se condição 1 verdadeira
}
else if (condição 2)
{
//ação se condição 2 verdadeira
}
else
{
//ação se nenhuma das condições for verdadeira
}
O bloco ELSE pode ser omitido, caso apenas uma condição precise ser avaliada. A Listagem 7 mostra um exemplo onde uma variável chamada idade é avaliada e, dependendo do seu valor, uma mensagem é exibida na tela.
if(idade > 18)
{
alert(“É maior de idade”).
}
else
{
alert(“É menor de idade”);
}
switch(variável)
{
case valor1:
//ações caso valor1
break;
case valor2:
//ações caso valor2
break;
case valor3:
//ações caso valor3
break;
default:
//ações caso nenhum dos valores
break
}
O comando switch verifica o valor de uma variável e, para cada uma das opções, executa um conjunto de ações. Se nenhum dos valores for verificado, os comandos do bloco default são executados.
O bloco default, porém, pode ser omitido caso não exista uma ação padrão a ser executada se nenhuma das opções for observada.
switch(dia)
{
case 1:
alert(“Hoje é domingo”);
break;
case 2:
alert(“Hoje é segunda”);
break;
case 3:
alert(“Hoje é terça”);
break;
default:
alert(“Hoje não é nem domingo, nem segunda, nem terça”);
break
}
while(condição)
{
//ações
}
A estrutura de repetição while é usada para executar um conjunto de ações enquanto uma condição for verdadeira. Quando a condição se tornar falsa, o bloco é finalizado. A seguir temos um exemplo que exibe uma mensagem para o usuário enquanto uma variável for menor que 5.
var contador = 0;
while(contador < 5)
{
alert(“Olá”);
contador = contador + 1;
}
Uma outra estrutura muito semelhante é a DO-WHILE, que executa um bloco de ações até que uma condição seja falsa. Porém, essa condição é avaliada após a execução dos comandos, fazendo com que estes sejam executados pelo menos uma vez.
do
{
//ações
}
while(condição)
O mesmo exemplo da Listagem 11, usando o DO-WHILE poderia ser representado como na Listagem 13
var contador = 0;
do
{
alert(“Olá”);
contador = contador + 1;
}
while(contador < 5)
Por último, temos o comando FOR, que usa um contador para executar um bloco de ações uma determinada quantidade de vezes.
for(inicialização; condição; complemento)
{
//ações
}
O entendimento dessa estrutura fica mais fácil se observarmos um exemplo prático. Na Listagem 15, uma variável “contador” é inicializada com o valor zero, e enquanto for menor que 10, o laço for deve ser executado.
var contador;
for(contador = 0; contador < 10; contador++)
{
alert(contador);
}
Exibindo mensagens para o usuário com JavaScript: Alert
A linguagem JavaScript possui um número imenso de funções nativas que precisariam de vários artigos para serem explicadas detalhadamente. Aqui, serão mostradas apenas algumas das mais utilizadas por quem está iniciando os estudos.
A primeira função apresentada é a alert, que serve para exibir uma mensagem em uma janela popup. Essa função recebe apenas um parâmetro, que é o texto a ser exibido.
Saiba mais sobre alert<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
alert("Olá, seja bem vindo ao Linha de Código.")
</script>
</head>
<body>
</body>
</html>
Salvando o conteúdo da Listagem 16 como um arquivo de extensão HTML, ao abri-lo no browser teríamos o como resultado uma mensagem como a mostrada na Figura 1.
Em seguida, temos a função prompt, que também abre uma janela popup, mas com uma caixa de texto para coletar informações do usuário. O retorno dessa função é o texto digitado.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
var nome;
nome = prompt("Qual é seu nome?");
alert("Olá, " + nome);
</script>
</head>
<body>
</body>
</html>
Nesse caso, o valor retornado pela função prompt foi atribuído a uma variável chamada “nome”, que é utilizada em seguida na função alert para saudar o usuário.
Manipulando eventos
A linguagem JavaScript também permite trabalhar com eventos dos elementos HTML como botões e caixas de texto. Eventos são disparados quando alguma ação é executada, como o clique e num botão ou a digitação de valores em um input.
No código JavaScript pode-se atribuir valores aos eventos como se fossem propriedades, desde que o valor atribuído seja um código a ser executado. Por exemplo, a Listagem 18 mostra o código de uma página com um botão que, ao ser clicado, exibe uma mensagem (alert).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button onclick="alert('Você clicou no botão');">clique aqui</button>
</body>
</html>
Vale notar que nesse caso as tags <script> não foram necessárias, pois o código encontra-se dentro do próprio button. Outro ponto a ser observado é que foram usadas aspas duplas para definir o código e aspas simples no interior do mesmo, quando precisamos escrever um texto dentro de um evento.
Caso o código a ser executado no evento seja muito extenso, é possível criar uma função para isso e associá-la ao evento em questão. Basta informar, no lugar do código, o nome da função (com parâmetros, caso existam). Na Listagem 19 temos um exemplo desse tipo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript">
function clique_botao()
{
alert("Você clicou no botão");
}
</script>
</head>
<body>
<button onclick="clique_botao();">clique aqui</button>
</body></html>
O código executado na função, para fins didáticos, é o mesmo que o da listagem anterior, mas é fácil perceber que outras linhas poderiam ser inseridas para complementar o evento.
Agora foi preciso usar as tags <script>, pois o código encontra-se separado do elemento que o utilizará.
Como vimos, o código JavaScript nos permite tornar uma página mais dinâmica, respondendo a interações do usuário. A sintaxe, bastante parecida com outras linguagens e muito intuitiva, facilita o aprendizado e utilização.
Antes de encerrar, cabe uma observação importante: alguns browsers bloqueiam a execução de scripts JavaScript, pois estes podem ser utilizados de forma indevida para comprometer informações do usuário. Portanto, caso você tenha dificuldade para testar algum dos exemplos aqui apresentados ou outros códigos que venha a desenvolver, verifique as configurações do seu browser.
Concluímos aqui este artigo, cujo objetivo foi fazer uma breve introdução à linguagem de script do lado cliente mais utilizada atualmente: JavaScript. Para garantir domínio dessa tecnologia, é preciso que o leitor busque outras fontes de informação como a documentação contida no site W3Schools.
Nenhum comentário:
Postar um comentário