APOSTILA DE PROGRAMAÇÃO WEB - professor.ifsertao...

LICENCIATURA EM COMPUTAÇÃO PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO

APOSTILA DE PROGRAMAÇÃO WEB

JavaScript

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>

<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

Explorer’ ou ‘Netscape’.


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

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


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": document.write("O camisa 9 está de volta e é artilheiro.");


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

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


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.

<html> <head> <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> <option value='black'>Preto</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> <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>


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

APOSTILA DE PROGRAMAÇÃO WEB - professor.ifsertao...

Documents

Transcript of APOSTILA DE PROGRAMAÇÃO WEB - professor.ifsertao...