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>
Programação Web - JavaScript 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.
Programação Web - JavaScript 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.
Programação Web - JavaScript 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>
Programação Web - JavaScript 6 DICA Figura como link e outra figura aparecer quando mouse sobrevoar. <a > </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" 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.
Programação Web - JavaScript 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.
Programação Web - JavaScript 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
Programação Web - JavaScript 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;
Programação Web - JavaScript 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.");
Programação Web - JavaScript 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.
Programação Web - JavaScript 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. Para retornar um valor, a função deve ter uma indicação do retorno que especifique o valor 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á, + nome +! ); else{ document.write( Hello, + nome +! ); </SCRIPT>
Programação Web - JavaScript 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 seguir: Outra forma de acesso é através do atributo ID. O acesso é ocorrido através do comando a 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>
Programação Web - JavaScript 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>
Programação Web - JavaScript 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.