Javascript

AUTARQUIA EDUCACIONAL DO VALE DO SÃO FRANCISCO – AEVSF
FACULDADE DE CIÊNCIAS APLICADAS E SOCIAIS DE PETROLINA – FACAPE

CURSO DE CIÊNCIA DA COMPUTAÇÃO
PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO
APOSTILA DE PROGRAMAÇÃO WEB
JavaScript
Petrolina-PE, 2008
Programação Web - JavaScript 2
INTRODUÇÃO
JavaScript é uma linguagem inicialmente conhecida como LiveScript, desenvolvida pela

Netscape, para tornar mais poderoso o seu browser, proporcionando maior interatividade com os
usuários.
Os programas JavaScript permitem que manipulemos praticamente tudo no browser do
usuário, desde apresentação de novas janelas, manipulação de imagens e muitas outras ações que
podem tornar nossas páginas extremamente interativas.
Os programas JavaScript são colocados diretamente nas páginas HTML e são delimitadas
pelas <SCRIPT> e </SCRIPT>. Podemos inserir todo o código necessário entre estas tags, ou
chamar uma biblioteca JavaScript.
<SCRIPT LANGUAGE="Javascript">...</SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="arquivo.js"></SCRIPT>
As tags que delimitam o código Javascript são <SCRIPT> e </SCRIPT>. O atributo language
recebe o valor "Javascript".
Estas tags podem ficar entre as tags <HEAD> e </HEAD>. Isso quando a execução do código
deva ser antes do carregamento da parte visual do site. Também podem ficar entre as tags <BODY>
e </BODY>. Assim, o código será executado durante o carregamento da parte visual do site.
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Novo Documento</TITLE> <TITLE>Novo Documento</TITLE>
<SCRIPT LANGUAGE=”Javascript”> </HEAD>
... <BODY>
</SCRIPT> ...
</HEAD> <SCRIPT LANGUAGE=”Javascript”>
<BODY> ...
... </SCRIPT>
</BODY> ...
</HTML> </BODY>
</HTML>
ESTRUTURA
JavaScript entende os vários elementos de um documento HTML. Para esta linguagem script
os formulários, imagens, janelas e o próprio documento aberto são todos objetos distinto que
obedecem a hierarquias.
// para uma única linha (obs: não precisa ser fechado no final da linha).
/* quando o que vamos escrever tem mais de uma linha, ou seja o texto tem várias linhas e é preciso
fechar no final */
NAVIGATOR
Este objeto contém informações sobre o navegador (browser) que está sendo utilizado. Os
exemplos citados nas duas primeiras propriedades são do Internet Explorer e Mozilla Firefox,
respectivamente.
appName - Especifica o nome do navegador. Ex.: navigator.appName; pode obter ‘Microsoft Internet
Explorer’ ou ‘Netscape’.
appVersion – Especifica a versão do navegador. Ex.: navigator.appVersion pode obter ‘4.0

(compatible; MSIE 6.0; Windows NT 5.0; FDM)’ ou ‘5.0 (Windows; pt-BR)’.
platform – Indica o tipo da máquina para que o navegador foi compilado. Ex.: navigator.platform pode
obter principais valores como ‘Win32’, ‘Win16’,’Mac68k’, ‘MacPPC’, ‘Unix’.
DOCUMENT
Este objeto contém informações sobre o documento web atual.
PROPRIEDADES
alinkColor – Especifica a cor do link ativo (momento do mouse clicado no link).

Ex.: document.alinkColor = “red”; // também pode “FF0000”
bgColor – Especifica a cor de fundo do documento.
Ex.: document.bgColor = “aqua”;
fgColor – Especifica a cor do texto do documento.
Ex.: document.fgColor = “blue”;
lastModified – Especifica a data e a hora da última modificação do documento.
Ex.: document.lastModified;
linkColor – Especifica a cor do link padrão.
Ex.: document.linkColor = “red”;
title – Obtém o título do documento.
Ex.: document.title;
URL – Obtém o endereço do documento.
Ex.: document.URL;
vlinkColor – Especifica a cor do link visitado (link já acessado).
Ex.: document.vlinkColor = “orange”;
MÉTODOS
write – Escreve um ou mais expressões HTML no documento.

Ex.: document.write(“<p>Hello World!</p><p>Esta página foi modificada em:
+document.lastModified);
WINDOW
Este objeto contém informações sobre a janela atual.

MÉTODOS
alert – Abre uma janela de alerta (Contém somente um botão OK).

Ex.: window.alert(“Hello World!”);
blur – Retira o foco do navegador (Semelhante a selecionar outra janela).
Ex.: window.blur();
close – Fecha a janela do navegador.
Ex.: window.close();
confirm – Abre uma janela de alerta (Contêm os botões OK e Cancelar).
Ex.: window.confirm();
open – Abre uma nova janela (popup).
Ex.: window.open(<documento web>,<nome>,<parâmetros>);
directories Barra de diretórios [ 0 | 1 ]
height Altura em pixels
location Barra de endereço [ 0 | 1 ]
menubar Barra de Menu (Arquivo, Editar, etc...) [ 0 | 1 ]
resizable Se a janela pode ser redimensionada ou não [ 0 | 1 ]
scrollbars Barra de Rolagem [ 0 | 1 ]
status Barra de Status [ 0 | 1 ]
titlebar Barra de Título [ 0 | 1 ]
toolbar Barra de Ferramentas [ 0 | 1 ]
width Largura em pixels
print – Imprime (manda para a impressora) o documento.
Ex.: window.print();
prompt– Abre uma janela de alerta (Contêm um campo text, os botões OK e Cancelar).
Ex.: window.prompt();
PRINCIPAIS EVENTOS
OnClick Quando o botão do mouse é clicado.

OnMouseOver Quando o mouse sobrevoa o elemento.
OnMouseOut Quando o mouse deixa de sobrevoar o elemento.
OnChange Quando clica no SELECT, em um valor diferente do atual.
OnLoad Quando carrega o site.
OnUnload Quando fecha o site.
Exemplo:
<a href="#" onclick="window.alert('Onclick')" onMouseOver="window.alert('onMouseOver')"
onMouseOut="window.alert('onMouseOut')">Popup</a>
DICA
Figura como link e outra figura aparecer quando mouse sobrevoar.
<a
href="index.html"
onmouseover="document.images['nome'].src = 'arquivo de imagem ';"
onmouseout="document.images['nome'].src = 'arquivo de imagem ';"
>
<img
name="nome"
src="arquivo de imagem"
border="0"
>
</a>
TIPOS DE VARIÁVEIS
Variáveis servem para armazenar "coisas" que serão utilizadas no decorrer de um programa
ou parte dele. Eu poderia dizer que armazenam valores ou dados, mas acredito que "coisas" é uma
definição melhor: pois podem ser números, cadeias de caracteres, objetos e até, estranhamente,
funções!
Em Javascript lidamos com alguns tipos básicos. São eles: numérico, booleano e cadeia de
caracteres. Para facilitar a abordagem, vamos esquecer que variáveis podem guardar referência a
funções ou se referir a objetos e consideremos a existência de apenas esses três tipos de dados
básicos - são, afinal de contas, os únicos citados que podem ser classificados como "tipos básicos".
NUMÉRICO
Variáveis do tipo numérico guardarão números que poderão ser positivos, nulos ou negativos,
inteiros ou pontos flutuantes. Com eles pode-se fazer operações matemáticas em geral. Na verdade,
é provável que JavaScript separe inteiros de flutuantes, mas isso é totalmente transparente ao
usuário.
BOOLEANO
Variáveis do tipo booleano armazenam apenas verdadeiro ou falso, em Javascript, como na

maioria das linguagens, representados, respectivamente, por true e false. Algumas linguagens não
trazem este tipo, exigindo o uso de números: 1 representando verdadeiro e 0 representando falso.
SEQÜÊNCIA DE CARACTERES
Variáveis do tipo cadeia de caracteres armazenam cadeias – ou seqüências - de caracteres.

Um caractere pode ser uma letra, um número, uma exclamação, arroba, etc.. Qualquer símbolo
gráfico que possa fazer parte de um arquivo de texto puro. Eles são representados com uma regra
própria, que é a mesma de muitas linguagens existentes: devem ser colocados entre aspas ( " ) ou
apóstofros ( ' ). Se você utilizar aspas, os apóstofros que aparecerem no código serão tratados como
caracteres, e vice-versa. Para imprimir alguns caracteres especiais, você pode utilizar a contra-barra
(\). Ela indica que o que vem depois representa um caractere especial. Assim, um \n representa uma
quebra de linha (do texto, não do HTML), o \" representa aspas mesmo e \\ se refere ao caractere (\).
TIPAGEM DINÂMICA
Você não precisará se preocupar tanto com tipos em JavaScript. Isso porque, como já foi dito,
ela oferece tipagem dinâmica, o que quer dizer que uma variável é tratada como variável, não como
variável inteira ou variável booleana. Assim, uma variável pode assumir qualquer tipo no decorrer do
programa. Variáveis não precisam ser declaradas, mas sua declaração é muito importante para
mantermos programas bem-organizados. Para declarar uma variável, utilize a palavra-chave var
antes do nome. Cada variável deve ser declarada apenas uma vez (ou nenhuma, se não quiser fazê-
lo).
OPERADORES
Há cinco grupos de operadores, basicamente falando: lógicos, comparativos, aritméticos, de

strings e de atribuição.
LÓGICOS
Operadores lógicos retornam um booleano a partir de um ou mais booleanos. Há o E ou AND

(&&), que retorna verdadeiro se, e somente se os dois valores passados forem verdadeiros. Seu uso
é como em "A &&B". O OU ou OR (||) retorna verdadeiro se pelo menos um dos valores passados for
verdadeiro. Seu uso, similar ao do E, é como em "A || B". Há, para concluir, a negação (!), que retorna
verdadeiro se o valor recebido for falso. Seu uso é como em "!A". Pode-se agrupar esses operadores
e variáveis em expressões complexas e, como em expressões aritméticas, utilizar parênteses para
controlar a ordem em que a expressão será avaliada. Exemplo de expressão lógica (A, B, C e D são
variáveis booleanas): ( A && (B || ( !(C || D) ) ) ). Isso será verdadeiro para as seguintes combinações
de A, B, C e D: VVFF, VVFV, VVVF, VVVV e VFFF. Tente visualizar isso.
COMPARATIVOS
Operadores comparativos recebem dois valores e os comparam, retornando um booleano.

Existem para serem utilizados em expressões lógicas. A igualdade (==) compara duas variáveis de
qualquer tipo básico e retorna verdadeiro se: são numericamente iguais (no caso de números) ou são
literalmente iguais (no caso de strings). Seu uso é como em "A==B", "A==2.3" ou "A=='Console'". A
desigualdade (!=) funciona como "!(A==B)" funcionaria para "A==B". Ela nega a igualdade e é usada
como em "A!=B", "A!=7.8" ou "A!='Terminal'". Os outros quatro operadores são exclusivamente
numéricos: são o maior que (>), o menor que (<), o maior que ou igual a (>=) e o menor que ou igual
a (<=). Seu uso é bastante intuitivo: "A>B" retornaria verdadeiro para A=2 e B=-3, por exemplo. O
(A<=B) equivale à expressão: ( (A < B) || (A == B) ).
ARITMÉTICOS
Operadores aritméticos recebem números e retornam números. São os já conhecidos: soma (

+ ) - de uso como em "A + B" ; subtração ( – ) - de uso como em "A – B" -; multiplicação ( * ) - de uso
como em "A * B" - divisão ( / ) - de uso como em "A /B" - e mais outros. Há o resto de uma divisão
inteira, que é usado como em "A%B" e para "16%5" retornará "1", por exemplo. A potência ( ^ ) é
como em "A ^ B" e para "5 ^ 2" resultará "25".
CONCATENAÇÃO
O operador de string que existe é a concatenação, representada por "+". Assim, "E-mail " +
'enviado!', resultará na string "E-mail enviado!".
ATRIBUIÇÃO
Os operadores de atribuição servem basicamente para atribuirmos valores a variáveis. O

principal é o de atribuição simples (=), que é utilizado na forma "A=B", B podendo ser uma variável,
uma expressão lógica, aritmética, de string... Os outros operadores - exceto os lógicos - podem ser
associados ao igual, criando-se outros operadores de atribuição. A saber: (+=) como incrementação
para valores numéricos, "A+=B" incrementa "A" com "B"; (+=) como concatenação para strings,
"A+=B" adiciona o valor de "B" à string "A"; ( –= ) decrementação para valores numéricos, decrementa
"B" de "A" e se "hora" tem valor "8", "hora–=5" dará à "hora" valor "3"; ( *= ), (/=) e ( %= ) funcionam
da mesma forma.
Entre os operadores de atribuição, há os operadores especiais de incremento (++) e
decremento (--). O operador de incremento aumenta o valor da variável em 1. Já o de decremento faz
exatamente o contrário, decrementando o valor da variável de 1. Esses operadores podem ser
utilizados aplicados a uma variável como um comando ou dentro de expressões aritméticas. Neste
caso, haverá diferença entre colocá-los antes ou depois da variável. Quando antes, primeiro é feito a
alteração e, depois, a expressão é avaliada.
Quando depois, a variável só é incrementada ou decrementada depois de a análise à
expressão ter sido concluída. Isso quer dizer, para ser mais preciso, que:
x = 2 * y++
resultará, para x, em um valor diferente de
x = 2 * ++y
Vamos supor que, antes de tudo, y tenha o valor "5". No primeiro caso, terminaremos com
x=10 e y=6. No segundo, x será 12 e y, 6.
ESTRUTURAS DE DECISÃO
As estruturas de decisão servem para executar uma dada operação (ou, como sempre pode
ser, um conjunto de operações), dependendo de uma determinada condição ser verdadeira. Há dois
tipos básicos de estruturas de decisão: o IF e o SWITCH.
IF / IF – ELSE
O if (se) pode ser utilizado de duas formas diferentes. A forma mais simples é quando
queremos que um código seja executado caso uma dada expressão seja verdadeira. A forma é:
if (condicao){
comando;
}
Por exemplo, o código a seguir não permite que x assuma valor superior a 100. Assim, após
passar por este trecho de código, x necessariamente será menor que ou igual a 100.
if (x > 100){
x = 0;
}
A forma completa do if traz também a opção "else", a ser executada caso a condição não seja
verdadeira. Sua forma é
if (condicao){
comando-se-verdadeiro;
}else{
comando-se-falso;
}
Assim podemos fazer com que o código possa seguir um entre dois caminhos distintos,
dependendo de um dado valor. No exemplo a seguir temos um trecho de código que verifica se x é
par ou ímpar.
if ( (x % 2) == 0){
statusDeX = "x é par";
}else{
statusDeX = "x é ímpar";
}
SWITCH
O switch permite que, ao invés de optar entre apenas duas opções, possamos optar entre
várias opções, uma para cada valor de uma dada variável ou expressão aritmética. O normal é que o
switch seja utilizado para números, mas em JavaScript ele pode ser utilizado para variáveis do tipo
string também! Veja o uso:
switch (variavel) {
case opcao1: comando;
case opcao2: comando;
...
case opcaon: comando;
}
O switch verificará se a variável é "opcao1". Se não for, ele fará a verificação com "opcao2", e
assim por diante até encontrar a igualdade. Quando encontrá-la, o switch simplesmente não verificará
mais nada e executará todo o código que vier até o fim do switch, inclusive o das verificações
seguintes. Por isso, uma forma mais utilizada do switch é:
switch (variavel) {
case opcao1: comando; break;
case opcao2: comando; break;
...
case opcaon: comando; break;
}
No código apresentado, ao encontrar um case que seja igual à variável, o switch executa o
comando e pára. Para mais de um comando, basta colocar o break no fim. Mais de uma opção pode
ser colocada em um case, como em todas as estruturas de repetição e decisão. Para isso, basta que
coloquemos todos os comandos entre chaves onde colocaríamos um comando apenas. Mas vejamos
um exemplo de switch: vamos fazer um trecho de código que escreva na tela a posição de alguns dos
jogadores da Seleção na Copa 2002.
switch (jogador) {
case "Marcos" :
document.write("É o goleiro titular, camisa 1!");
break;
case "Ronaldo":
document.write("O camisa 9 está de volta e é artilheiro.");
break;
case "Rivaldo":
document.write("Herdou a camisa 10 foi o 'real' melhor da copa.");
break;
case "Edmilson":
document.write("Zagueiro, mas acho que ainda não falaram pra ele.")
break;
default:
document.write(“Este jogador não está cadastrado”);
}
Observe que no final da estrutura contém um comando “default”, que recebe os casos não
tratados pelo SWITCH. O “default” é opcional, a ausência dele simplesmente os casos não tratados
passam despercebidos.
ESTRUTURA DE REPETIÇÃO
Trata-se de um comando simples - ou um bloco de comandos - que será executado mais de

uma vez dentro do código maior. JavaScript utiliza as três estruturas de repetição básicas do C: o
while, e o for, este último, além da forma tradicional, de uma outra maneira bastante útil para listas
associativas.
WHILE
O while (enquanto) repete um comando ou conjunto de comandos enquanto uma

determinada expressão lógica for verdadeira. Por exemplo, o código
while (x < 10){
x++;
}
incrementará x um determinado número de vezes. Quantas vezes? Depende... Talvez nenhuma. Ele
incrementará x o número de vezes que for preciso para que x não seja mais menor que 10.
FOR
O for (para) faz uma operação um determinado número de vezes, percorrendo dado intervalo.
Seu uso convencional é da seguinte forma:
for (i = 0; i < 10; i++){
alert(i);
}
Desta forma, a variável i será inicializada com 0 e serão jogadas ao usuário 10 janelas de
alerta, cada uma apresentando um número, do 0 até o 9, pois a cada iteração o i é aumentado em
De um modo geral, há três expressões. A primeira é um comando que será executado
apenas antes da primeira iteração. A segunda é uma expressão booleana que serve de condição.
Toda vez que for iniciar uma nova iteração, o JavaScript checará se a expressão retorna verdadeiro.
Caso retorne, ele pára; senão ele continua. A terceira é outro comando, mas este é executado depois
de toda a iteração. Desta forma, o uso convencional do for é:
for ( inicializacao(); booleano; operacao() ){
comandos();
}
E isso equivale a:
inicializacao();
while (booleano) {
comandos();
operacao();
}
FUNCTION
Declara uma função do Javascript com os parâmetros especificados. Os parâmetros

aceitáveis incluem strings, números e objetos.
function nome() {
comandos;
}
function nome(parametro) {
comandos = ...parametro;
}
Para retornar um valor, a função deve ter uma indicação do retorno que especifique o valor
para retornar.
OBSERVAÇÃO: Para delimitar a quantidade de casas decimais, utilize o método toFixed(quant).
EXEMPLOS
Crie um documento web que peça que o usuário forneça o nome e, em seguida, diga se é
brasileiro. Se isto for verdade, imprima a seguinte mensagem “Olá Fulano!”, senão imprima “Hello
Fulano!”.
<SCRIPT>
var nome, br;
nome = window.prompt(‘Digite o seu nome: ’, ‘’);
br = window.confirm(‘Você é Brasileiro?’);
if(br == true){
document.write(‘Ol&aacute, ’ + nome + ‘!’);
}else{
document.write(‘Hello, ’ + nome + ‘!’);
}
</SCRIPT>
Crie um documento web que imprima todos os números entre 1 e 100, inclusive estes,
alinhados verticalmente.
<SCRIPT>
var n = 1;
while (n <= 100) {
document.write(n + '<br>');
n++;
}
</SCRIPT>
Crie um documento web que, através de um SELECT, sendo as cores branco, preto,
vermelho, verde e azul as opções de seleção, possa alterar a cor de fundo deste documento.
<form name='f' >
<p>Mude a cor do fundo: <select onclick='mudarCores()' name='cores'>
<option value='white'>Branco</option>
<option value='black'>Preto</option>
<option value='red'>Vermelho</option>
<option value='green'>Verde</option>
<option value='blue'>Azul</option>
</select></p>
</form>
<SCRIPT>
function mudarCores(){
document.bgColor = f.cores.value;
}
</SCRIPT>
Veja o exemplo abaixo:

<html>
<head>
<title>Título</title>
</head>
<script>
function escreverNome(){
f1.nome1.value=f1.op1.value;
f1.nome2.value=f1.op2.value;
}
function imprimir(){
if(f1.opcoes[0].checked == true){
f1.resultado.value = f1.nome1.value;
}else{
f1.resultado.value = f1.nome2.value;
}
}
</script>
<body>
<form name='f1'>
<p>Digite 1ª opção: <input type='text' name='op1' ></p>
<p>Digite 2ª opção: <input type='text' name='op2' ></p>
<p><input type='button' onclick='escreverNome()' name='enviar1'

value='Enviar'></p>
<hr noshade width="100%" size="2">
<p><input type="radio" name="opcoes" value="f2.nome1.value"><input
style="border: 0px white none" type='text' name='nome1' readonly></p>
<p><input type="radio" name="opcoes" value="f2.nome2.value"><input
style="border: 0px white none" type='text' name='nome2' readonly></p>
<p><input type='button' onclick='imprimir()' name='enviar2'
value='Enviar'></p>
<hr noshade width="100%" size="2">
<p><input style="border: 0px white none; font-size: 30pt" type='text'
name='resultado' readonly></p>
</form>
</body>
</html>
EXERCÍCIO
1. O preço unitário de um refrigerante de lata é de R$ 1.50, mas se for comprar acima de um

pacote (um pacote contém 12 refrigerantes de lata) o preço unitário cai para R$ 1.15. Crie um
documento web que calcule e escreva o custo total da compra.
2. Escreva um documento web que mostre os números inteiros pares que estão entre 11 e 152,
alinhados horizontalmente e separados por espaço.
3. Escreva um documento web que leia os nomes de dois times e o número de gols marcados
por cada um. Verifique o resultado e imprima o nome do vencedor. Caso não haja vencedor,
deverá ser impressa a palavra ‘EMPATE’.

Javascript

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

AUTARQUIA EDUCACIONAL DO VALE DO SÃO FRANCISCO – AEVSF

FACULDADE DE CIÊNCIAS APLICADAS E SOCIAIS DE PETROLINA – FACAPE

APOSTILA DE PROGRAMAÇÃO WEB

JavaScript é uma linguagem inicialmente conhecida como LiveScript, desenvolvida pela

<SCRIPT LANGUAGE="Javascript" SRC="arquivo.js"></SCRIPT>

appVersion – Especifica a versão do navegador. Ex.: navigator.appVersion pode obter ‘4.0

Este objeto contém informações sobre o documento web atual.

alinkColor – Especifica a cor do link ativo (momento do mouse clicado no link).

write – Escreve um ou mais expressões HTML no documento.

Este objeto contém informações sobre a janela atual.

alert – Abre uma janela de alerta (Contém somente um botão OK).

OnClick Quando o botão do mouse é clicado.

Variáveis do tipo booleano armazenam apenas verdadeiro ou falso, em Javascript, como na

Variáveis do tipo cadeia de caracteres armazenam cadeias – ou seqüências - de caracteres.

Há cinco grupos de operadores, basicamente falando: lógicos, comparativos, aritméticos, de

Operadores lógicos retornam um booleano a partir de um ou mais booleanos. Há o E ou AND

Operadores comparativos recebem dois valores e os comparam, retornando um booleano.

Operadores aritméticos recebem números e retornam números. São os já conhecidos: soma (

Os operadores de atribuição servem basicamente para atribuirmos valores a variáveis. O

resultará, para x, em um valor diferente de

Trata-se de um comando simples - ou um bloco de comandos - que será executado mais de

O while (enquanto) repete um comando ou conjunto de comandos enquanto uma

Declara uma função do Javascript com os parâmetros especificados. Os parâmetros

Veja o exemplo abaixo:

<p><input type='button' onclick='escreverNome()' name='enviar1'

1. O preço unitário de um refrigerante de lata é de R$ 1.50, mas se for comprar acima de um

Você também pode gostar