APOSTILA DE PROGRAMAÇÃO WEB

(1)

APOSTILA DE 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.

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> <HEAD> <TITLE>Novo Documento</TITLE> <SCRIPT LANGUAGE=”Javascript”> ... </SCRIPT> </HEAD> <BODY> ... </BODY> </HTML> <HTML> <HEAD> <TITLE>Novo Documento</TITLE> </HEAD> <BODY> ... <SCRIPT LANGUAGE=”Javascript”> ... </SCRIPT> ... </BODY> </HTML>

(3)

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

(4)

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

(5)

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>

(6)

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.

(7)

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.

(8)

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

(9)

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; }

(10)

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":

(11)

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.

(12)

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; }

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!”.

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>

(13)

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>

MANIPULAÇÃO DE OBJETOS

Cada campo, cada tag é considerada um objeto contendo suas propriedades e estados. É através do identificador que conseguimos acessar/manipular essas propriedades e alterar estados. Existem duas formas de uso destes identificadores, pelos atributos NAME e ID. Pelo atributo NAME conseguimos acessar a propriedade ou o estado a partir do identificador de maior nível hierárquico até chegar no estilo ou atributo da tag, conforme mostra a seguir:

NAMEDOFORM.NAMEDOCAMPO.ATRIBUTODOCAMPO ou

NAMEDATAGDEMAIORNIVEL.NAMEDATAGDEMENORNIVEL.ATRIBUTODATAGDEMENORNIVEL

Outra forma de acesso é através do atributo ID. O acesso é ocorrido através do comando a seguir:

document.getElementById(‘VALOR_ID’).ATRIBUTO

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.

<title> Exemplo Javascript Manipulação de valores de objetos</title> </head> <script> function mudarCores(){ document.bgColor = f.cores.value; } function mudarCoresTexto(){ document.fgColor = document.getElementById('coresTexto').value; } </script> <body> <form name='f' >

<p>Mude a cor do fundo: <select onclick='mudarCores()' name='cores'> <option value='white'>Branco</option>

(14)

<option value='red'>Vermelho</option> <option value='green'>Verde</option> <option value='blue'>Azul</option> </select></p> </form> <BR><BR><BR> <form name='f' >

<p>Mude a cor do TEXTO: <select onclick='mudarCoresTexto()' id='coresTexto'> <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> </body> </html>

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>

</form> </body> </html>

(15)

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’.