JavaScript é uma linguagem de programação fácil de usar que pode ser incluída em sua webpage. Ela pode melhorar a dinâmica e interatividade de sua página atravês de possibilidade de se realizar cálculos, verificar o conteúdo de formulários, escrever jogos interativos, adicionar efeitos especiais, customizar a seleção de gráficos, criar senhas de segurança e muito mais.
JavaScript não tem relação alguma com a linguagem Java (que veremos mais adiante). Java é uma linguagem de programação completa, enquanto JavaScript é uma linguagem muito mais simples.
Programação orientada a objetos é uma técnica de programação projetada para simplificar conceitos de programação complicados. Em essência, programação orientada a objetos é a técnica onde se define um conjunto de informações e forma controlada de acesso e modificação a estas informações.
Algumas informações no objeto podem ser acessadas diretamente; outras informações podem requerer o uso de um método para acessá-los - talvez devido a forma como as informações são armazenadas internamente não terem significado para o usuário, ou talvez por que se deseja esconder algumas informações.
Informações que podem ser acessadas diretamente nos objetos são suas propriedades. A diferença entre informações acessadas com propriedades e informações acessadas via métodos, é que você vê exatamente o que você está fazendo com o objeto, enquanto com métodos você vê os efeitos daquilo que você está fazendo.
O documento de sua webpage é um objeto. Qualquer tabela, formulário, botão, imagem ou link em sua página também é um objeto. Cada objeto tem certas propriedades (informações sobre aquele objeto). Por exemplo, a cor de fundo do seu documento é escrita da seguinte forma document.bgcolor. Você pode mudar a cor de sua página para vermelho escrevendo a seguinte linha em JavaScript: document.bgcolor="red".
O conteúdo (ou valor) de um campo de entrada chamado "senha" em um formulário chamado "entrada" é document.entrada.senha.value.
A maioria dos objetos possui uma coleção de coisas que eles podem fazer. Objetos diferentes podem fazer coisas diferentes, assim como a porta de um carro pode abrir e fechar, enquanto uma lâmpada pode acender e apagar. Um novo documento é aberto com o método document.open(). Você pode escrever a mensagem "Ola pessoal!!" em um documento através do comando document.write("Ola pessoal!!"). open() e close são métodos do objeto document.
Eventos são a forma pela qual podemos ativar funções escritas em JavaScript. O exemplo mais simples é com um botão cuja definição inclui o seguinte: onClick="executaMinhaFuncao()". Quando o evento "onClick", que significa quando o botão do mouse for pressionado, acontecer e se o mouse estiver sobre o botão, então a executaMinhaFuncao() é ativada.
Outros exemplos de eventos incluem: onMouseOver, onMouseOut, onFocus, onBlur, onLoad, e onUnload.
JavaScript suporta um conjunto compacto de comandos com o qual você pode adicionar um grande grau de interatividade em suas webpages. Esta seção mostra um resumo destes comandos.
Este capítulo contêm as seguintes seções, que provêm um curta descrição de cada um dos comandos:
Qualquer expressão também é um comando.
Use ponto-e-vírgula (;) para separar comandos em JavaScript.
Um comando de seleção abriga um conjunto de comandos que são executados se uma condição específica é verdadeira. JavaScript suporta dois tipos de comandos de seleção: if...else e switch.
Use o comando if para executar um conjunto de comandos se uma condição lógica é verdadeira; use a cláusula opcional else para executar outro conjunto de comandos caso a condição seja falsa. Um comando if tem o seguinte formado:
if (condição) {
comandos1
}
[else {
comandos2
} ]
A condição pode ser qualquer expressão em JavaScript que gere verdadeiro ou falso. Os comandos a serem executados podem ser quaisquer comandos em JavaScript, incluindo novos comandos if aninhados. Se você inclui mais de um comando após a cláusula if ou else, você; deve colocá-los entre chaves, {}.
Não confunda as primitivas true e false do objeto Boolean com os valores true e false do objeto Boolean. Qualquer objeto que não esteja indefinido ou null, incluindo os objetos Boolean cujos valores são false, tem valor verdadeiro em uma expressão lógica. Por exemplo:
var b = new Boolean(false); if (b) // esta condição resulta em verdadeiro
Exemplo. No exemplo abaixo, a função checkData retorna o valor verdadeiro se o número de caracteres em um objeto Text é três; caso contrário mostra uma mensagem de alerta e retorna falso.
function checkData () {
if (document.form1.tresCaracteres.value.length == 3) {
return true;
} else {
alert("Digite exatamente três caracteres. " +
document.form1.tresCaracteres.value + " não é válido.");
return false;
}
}
Um comando switch permite um programa avaliar uma expressão e tentar encontrar o valor correspondente desta expressão em uma lista. Se encontrar o valor desta expressão na lista, o programa executa um conjunto de comandos associados a este valor. O comando switch tem o seguinte formato:
switch (expressão){
case valor1 :
comandos;
break;
case valor2 :
comandos;
break;
...
default : comandos;
}
O programa primeiro procura o valor que corresponda ao resultado da expressão e então executa o conjunto de comandos associado. Se não for encontrado valor algum que represente o resultado da expressão, então os comandos associados com a cláusula default são executados. Se nem a cláusula default é encontrada, o programa continua sua execução após o final do comando switch.
O comando opcional break após cada um dos conjuntos de comandos garante que após os comandos terem sido executados o comando switch é terminado. Caso o comando break seja omitido, o programa continua a execução no próximo conjunto de comandos do comando switch.
Exemplo. No exemplo abaixo, se expr resultar em "Bananas", o programa executará os comandos após case "Bananas". Quando o comando break é encontrado, o programa termina o switch e executa o comando que segue o switch. Se o comando break fosse omitido, o comando para case "Cerejas" seria executado
switch (expr) {
case "Laranjas" :
document.write("Laranjas custam R$1.99 o kilo.<BR>");
break;
case "Maças" :
document.write("Maças custam R$0.69 o kilo.<BR>");
break;
case "Bananas" :
document.write("Bananas custam R$0.99 o kilo.<BR>");
break;
case "Cerejas" :
document.write("Cerejas custam R$0.99 o kilo.<BR>");
break;
default :
document.write("Desculpe, não temos " + expr + ".<BR>");
}
document.write("Gostaria de mais algum produto?<BR>");
Um comando de repetição é aquele que executa um conjunto de comandos repetidamente até que uma determinada condição é atingida. JavaScript suporta os seguintes comandos de repetição: for, do while e while (você pode ainda criar um comando de repetição utilizando o comando label, mas como com este comando pode-se criar programas não estruturados, não o veremos aqui). Adicionalmente você pode utilizar os comandos break e continue dentro de comandos de repetição.
Um outro comando, for...in, executa comandos repetidamente mas é usado para manipulação de objetos. Veja a seção "Comandos para manipulação de objetos".
O comando de repetição for executa até que uma determinada condição é avaliada como falsa. O comando for de JavaScript é similar ao comando for em Java, C, ou C++. Um comando for tem o seguinte formato:
for ([expressãoInicial]; [condição]; [expressãoIncremental]) {
comandos
}
Quando um comando for é executado, os seguintes passos acontecem:
Exemplo. A função abaixo contem um comando for que conta o número de opções selecionadas em uma lista (um objeto Select que permite múltiplas escolhas). O comando for declara a variável i e inicializa a mesma com zero. Após testa se i é menor do que o número de opções no objeto Select, executa o comando if, e incrementao valor de i em um após cada iteração do comando for.
<SCRIPT>Os comandos acima seriam mostrados como:
function quantos(obJavaScriptelecionado) { var contSelecionados=0; for (var i=0; i < obJavaScriptelecionado.options.length; i++) { if (obJavaScriptelecionado.options[i].selected==true) contSelecionados++; } return contSelecionados; } </SCRIPT> <form name="formSeleciona"> <p>Escolha uma música e pressione o botão abaixo:</p> <select name="tiposMusica" multiple> <option selected> R&B <option> Jazz <option> Blues <option> New Age <option> Classical <option> Opera </select><br> <input type="button" value="Quantas foram selecionadas?" onClick="alert ('Número de opções selecionadas: ' + quantas(document.formSeleciona.tiposMusica))"> </form>
O comando do...while repete um conjunto de comandos até que uma determinada condição seja falsa. Um comando do...while tem o seguinte formato:
do {
comandos
} while (condição)
Os comandos são executados uma vez antes da condição ser testada. Se a condição for verdadeira, os comandos executam novamente. Após cada iteração a condição é testada. Quando a condição for falsa, o comando do...while termina.
Exemplo. No exemplo a seguir, o comando do repete os comandos pelo menos uma vez enquanto i for menor que 5.
do {
i+=1;
document.write(i);
} while (i<5);
O comando while executa seus comandos desde que uma determinada condição seja verdadeira. O comando while tem o seguinte formato:
while (condição) {
comandos
}
Se a condição é falsa, então os comandos não são executados e o controle passa para o comando após o comando while. O teste da condição acontece antes dos comandos dentro do comando while serem executados. Se a condição é verdadeira, então os comandos são executados e a condição é testada novamente.
Example 1. O comando while a seguir executa enquanto n é menor que três:
n = 0;
x = 0;
while( n < 3 ) {
n++;
x += n;
}
Com cada iteração, os comandos incrementam n e adiciona este valor em x. Desta forma, x e n terão os seguintes valores:
Após completar a terceira iteração. a condição n < 3 não é mais verdadeira, desta forma o comando while termina.
Exemplo 2: ciclo infinito. Ao programar com comandos de repetição tenha o cuidado para que a condição no comando while torne-se falsa em algum momento; caso contrário, o comando de repetição não terminará em momento algum. O exemplo a seguir mostra como o comando while executara para sempre, pois a condição é sempre verdadeira.
while (true) {
alert("Ola, pessoal!!")
}
O uso do comando break termina um comando de repetição ou um comando switch. Quando este comando é utilizado no interior de um comando while, do-while, for, ou switch, break termina o comando de repetição (ou seleção) mais interno, e transfere o controle para o comando imediatamente seguinte ao comando que está sendo terminado.
Exemplo. O exemplo a seguir percorre os elementos de um vetor até que o valor de um elemento deste vetor tenha o valor "Grêmio".
for (i = 0; i < a.length; i++) {
if (a[i] = "Grêmio");
break;
}
O comando continue pode ser utilizado para reiniciar um comando while, do-while ou for. Nestes comandos, o comando continue termina a iteração corrente, e continua a execução do comando de repetição na próxima iteração. Diferentemente do comando break, continue não termina a execução do comando de repetição. Em um comando while, por exemplo, continue retorna ao teste da condição. Em um comando for, continue vai para o parte de incremento da variável de controle do ciclo.
Exemplo. O exemplo abaixo mostra um comando while com um comando continue que é executado quando o valor de i é três. Assim, n terá os valores um, três, sete e doze.
i = 0;
n = 0;
while (i < 5) {
i++;
if (i == 3)
continue;
n += i;
}
JavaScript utiliza os comandos for...in e with para manipulação de objetos.
O comando for...in atribui a um variável todas as propriedades de um objeto. Para cada propriedade distinta, JavaScript executa o conjunto de comandos especificados. O comando for...in tem o formato abaixo:
for (variable in object) {
statements
}
Exemplo. A função abaixo recebe como parâmetro um objeto e o nome do objeto. Cada propriedade do objeto é então concatenada a uma string. Quando todas propriedades tiverem sido concatenadas a esta string, a mesma é retornada pela função.
function concatProps(obj, objName) {
var result = "";
for (var i in obj) {
result += obj_name + "." + i + " = " + obj[i] + "<br>"
}
result += "<hr>"
return result
}
Para um objeto carro com as propriedades tipo e modelo, result seria:
"carro.tipo = GM<br>carro.modelo = Vectra<br><hr>"
O comando with estabelece o objeto padrão (default) para um conjunto de comandos. JavaScript procura nomes não qualificados dentro do conjunto de comandos para determinar se os mesmos são propriedades do objeto padrão. Caso um nome não qualificado corresponda a uma propriedade, então a propriedade é utilizada no comando; caso contrário uma variável local ou global é utilizada.
O comando with tem o seguinte formato:
with (object){
statements
}
Exemplo. O comando with abaixo especifica que o objeto Math é o objeto padrão para um conjunto de comandos. Os comandos referem-se a propriedade PI, e aos métodos cos e sin, sem especificar o objeto. JavaScript assume o objeto Math para estas referências.
var a, x, y;
var r=10;
with (Math) {
a = PI * r * r;
x = r * cos(PI);
y = r * sin(PI/2);
}
Comentários são anotações para explicar o que o código em script faz. Comentários são ignorados pelo interpretador. JavaScript aceita os mesmos tipos de comantários aceitos em Java e C++::
Exemplo. O exemplo abaixo mostra dois comentários:
// Este é um comentário em uma linha.
/* Este é um comentário em mais de uma linha. Ele pode ser
de qualquer tamanho e pode conter aquilo que você quiser. */
Abaixo será mostrado com criar "rollovers" onde a aparência de um link muda quando o cursor se move sobre ele. Será mostrado também como criar um banner cíclico para diversos patrocinadores do seu documento.
Na sua forma mais comum, um rollover consiste de uma imagem que serve como um link para um outro documento. Quando o cursor do mouse está sobre a imagem, a aparência da figura muda para chamar a atenção do usuário. Por exemplo, você pode adicionar um efeito de brilho, um pouco de sombra ou simplesmente mudar a cor de fundo. Abaixo tem um exemplo:
<script type="text/javascript">
if (document.images)
{
image1 = new Image;
image2 = new Image;
image1.src = "enter1.gif";
image2.src = "enter2.gif";
}
function chgImg(name, image)
{
if (document.images)
{
document[name].src = eval(image+".src");
}
}
</script>
...
<a href="/" onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'><img name="enter"
src="enter1.gif" border="0" alt="Enter if you dare!"></a>
E abaixo como ele seria mostrado...
Se sua página tem patrocinadores, então você pode criar uma imagem link que circula por todos os anúncios dos seus patrocinadores. O primeiro passo é criar uma imagem para cada um dos patrocinadores. Todas as imagens devem ter o mesmo tamanho. As imagens e endereços para cada um dos patrocinadores é armazenado em vetores (arrays) chamados adImages e adURLs respectivamente, que é definido no início do script. O comando img para o link deve ser inicializado com a primeira imagem do vetor:
<script type="text/javascript">
if (document.images)
{
adImages = new Array("hosts/ibm.gif",
"hosts/hp.gif", "hosts/pucrs.gif");
adURLs = new Array("www.ibm.com",
"www.hp.com", "www.pucrs.br");
thisAd = 0;
}
function cycleAds()
{
if (document.images)
{
if (document.addBanner.complete)
{
if (++thisAd == adImages.length)
thisAd = 0;
document.adBanner.src = adImages[thisAd];
}
}
// muda o patrocinador a cada 3 segundos
setTimeout("cycleAds()", 3000);
}
function gotoAd()
{
document.location.href = "http://" + adURLs[thisAd];
}
</script>
...
<a href="javascript:gotoAd()"><img name="adBanner"
src="hosts/ibm.gif" border="0" alt="Nossos patrocinadores"></a>