Apostila Java Script

2010
JavaScript
Professora Luclia Oliveira
Sumrio
INTRODUO .....................................................................................................................................................................3 Exemplos prticos ................................................................................................................................................................4 Variveis .............................................................................................................................................................................5 Operadores..........................................................................................................................................................................6 Lista de Exercios 01.............................................................................................................................................................7 Estruturas de controle ...........................................................................................................................................................8 Estrutura If ...........................................................................................................................................................................8 Estrutura SWITCH ................................................................................................................................................................9 Estruturas de Repetio ......................................................................................................................................................10 Loop FOR ..........................................................................................................................................................................10 Loops WHILE e DO WHILE .................................................................................................................................................10 Funes em Javascript .......................................................................................................................................................11 Funes pr-definidas de Javascript ....................................................................................................................................12 Exerccios: Estruturas de controle ........................................................................................................................................13 Manipuladores de eventos...................................................................................................................................................14 Validao de Formulrios ....................................................................................................................................................17 Objetos..............................................................................................................................................................................21 Outros Exemplos ................................................................................................................................................................27 Exerccios de Reviso.........................................................................................................................................................29
INTRODUO A linguagem JavaScript foi criada em 1995 pela Netscape, com o objetivo de permitir a manipulao dinmica dos elementos de uma pgina HTML. Devido ao seu grande sucesso, a Microsoft decidiu implementar sua verso do JavaScript que seria utilizada no Internet Explorer.
Existem trs maneiras de incluir JavaScript em pginas HTML: 1. Colocando as instrues entre as tags <script> e </script> <html> <head><title>Uso de JavaScript I</title> </head> <body> <script type = text/javascript> <!Var nome = Ol Luclia! Document.write(nome); --> </script> </body> </html>
2. Inserindo manipuladores de eventos dentro de tags HTML especficas. <html> <head><title>Uso de JavaScript II</title> <script type = text/javascript> <!function mensagem(){ document.alert(Seja bem-vindo(a)!!!); } --> </script> </head> <body onload = mensagem();> </body> </html> 3. Inserindo cdigo JavaScript dentro de um arquivo com extenso .js e colocando o seu nome como valor do atributo src no documento HTML: function mensagem(){ exemplo.js nome = document.prompt(Informe o seu nome: ); document.alert(nome + ,Seja bem-vindo(a)!!!); } <html> <head><title>Uso de JavaScript II</title> <script type = text/javascript src = exemplo.js> </script> </head> <body onload = mensagem();> </body> </html> 3
Existem muitos tipos de eventos distintos, por exemplo, a pulsao de um boto, o movimento do mouse ou a seleo de texto da pgina. Como funcionam esses eventos, veremos mais adiante. Para evitar que o texto dos scripts se escreva na pgina quando os navegadores no os entendem, temos que ocult-los com comentrios HTML (). Exemplo de como se devem ocultar os scripts. <SCRIPT> <!-Cdigo Javascript //--> </SCRIPT>
Exemplos prticos
Abrir uma janela secundria, inserir a data atual e inserir um boto para voltar. Por exemplo: abrir uma janela secundria sem barras de menus que mostre o buscador Google: <html> <head> <title>Exemplos JS</title> </head> <body> <script type="text/javascript"> <!-Var data = new Date(); //Data no formato dd/mm/aaaa document.write(Hoje + data.getDate() + / + data.getMonth() + / + data.getFullYear()); window.open("http://www.google.com.br","Google","width=300,height=300"); //--> </script> <br /> <input type="button" value="Atrs" onclick="history.go(-1)"> </body> </html>
Maisculas e minsculas
JavaScript faz distino entre maisculas e minsculas e devemos sempre usar letras minsculas em nome de variveis e utilizar o padro camelCase. Apesar da linguagem no nos obrigar a utilizar (;) ponto e vrgula ao final das instrues, esta uma boa prtica, pois, outras linguagens como Java ou C obrigam a utiliz-las e estaremos nos acostumando a realizar uma sintaxe mais parecida habitual em torno de programaes avanadas.
Variveis
Uma varivel um espao em memria onde se armazena um dado. Exemplo: parcela1 = 23 parcela2 = 33 soma = parcela1 + parcela2 Nomes no vlidos para variveis: 12meses comea com nmero seu nome contm espao return palavra reservada pe%pe caracter especial Em JavaScript no obrigatrio a declarao de variveis, mas, pode-se declarar utilizando a palavra var antes do nome da varivel. Exempo: var numero; Tambm permitido declarar e atribuir em um mesmo comando. Exemplo: Var numero = 10;
Escopo das variveis

As variveis podem ser locais e globais. Variveis globais As variveis globais so as que esto declaradas no mbito mais amplo possvel, que em Javascript uma pgina web. Para declarar uma varivel global pgina simplesmente faremos em um script, com a palavra var. <script type="text/javascript"> var varivelGlobal; </script>
Variveis locais Tambm poderemos declarar variveis em lugares mais dimensionados, como por exemplo, uma funo. A estas variveis chamaremos de locais. Quando se declarem variveis locais somente poderemos acess-las dentro do lugar aonde tenha sido declaradas. As variveis podem ser locais em uma funo, mas tambm podem ser locais a outros mbitos, como por exemplo, um lao de repetio. Exemplo: <script type="text/javascript"> function minhaFuncao) (){ var variavelLocal } </script> 5
A varivel s poder ser local se utilizarmos a palavra var e se estiver dentro de uma funo ou bloco de repetio, por exemplo. Exemplo de utilizao das variveis: var parcela1 = 23 var parcela2 = "33" var soma = parcela1 + parcela2 document.write(soma)
Operadores
Exemplos preo = 128 //introduzo um 128 na varivel preo unidades = 10 //outra atribuio, logo veremos operadores de atribuio fatura = preo * unidades //multiplico preo por unidades, obtenho o valor fatura resto = fatura % 3 //obtenho o resto de dividir a varivel fatura por 3 preo++ //incrementa em uma unidade o preo (agora vale 129) Operadores Lgicos ! Operador NO ou negao. Se true passa a false e vice-versa. && Operador Y, se so os dois verdadeiros vale verdadeiro. || Operador O, vale verdadeiro se pelo menos um deles for verdadeiro. Exemplo meuBoleano = true meuBoleano = !meuBoleano //meuBoleano agora vale false tenhofome = true tenhoComida = true comoComida = tenhoFome && tenhoComida Operadores Condicionais == Comprova se dois nmeros so iguais != Comprova se dois nmeros so distintos > Maior que, devolve true se o primeiro operador for maior que o segundo < Menor que, true quando o elemento da esquerda for menor que o da direita >= Maior igual. <= Menor igual Caracteres Especiais Alguns caracteres especiais que so permitidos em valores do tipo string: \b: retrocesso (backspace); \f: nova pgina (form feed); \n: nova linha (line feed); \r: retorno de carro (carriage return); \t: caracter de tabulao (tab). 6
Lista de Exercios 01
Para a soluo dos exerccios a seguir, use o mtodo prompt() para fazer as entradas de dados e o mtodo alert() para mostrar os resultados.
Escolha uma das trs formas de insero de JavaScript de sua preferncia.
1.
Faa um programa que leia dois nmeros, calcule e imprima a soma desses dois nmeros.
2.
Faa um programa que receba dois nmeros, calcule e imprima a diviso do primeiro nmero pelo segundo.
3.
Faa um programa que leia um nmero e informe a metade e o dobro desse nmero.
4.
Escrever um programa que permita receber o nome e a idade de uma pessoa e em seguida, informar o nome digitado e a idade da pessoa daqui a 30 anos.
5.
Faa um programa que leia trs notas de um aluno, calcule e imprima a mdia aritmtica entre essas notas.
6.
Faa um programa que receba dois nmeros inteiros, calcule e imprima: - soma do dois nmeros; - subtrao do primeiro pelo segundo; - subtrao do segundo pelo primeiro; - produto dos dois nmeros; - diviso do primeiro pelo segundo; - quociente inteiro da diviso do primeiro pelo segundo; - resto da diviso do primeiro pelo segundo.
Estruturas de controle
Tomada de decises
So usadas para realizar umas aes ou outras em funo do estado das variveis. Ou seja, tomar decises para executar umas instrues ou outras dependendo do que esteja ocorrendo neste instante em nossos programas. Por exemplo, dependendo se o usurio que entra em nossa pgina for maior de idade ou no, podemos lhe permitir ou no ver os contedos de nossa pgina. Se idade maior que 18 ento: Deixo-lhe ver o contedo para adultos Se no Mando-lhe fora da pgina Em JavaScript podemos tomar decises usando duas estruturas distintas:

IF SWITCH
Loops Os loops se utilizam para realizar certas aes repetidamente. So muito utilizados em todos os nveis na programao. Com um loop podemos por exemplo, imprimir em uma pgina os nmeros de 1 ao 100 sem a necessidade de escrever cem vezes a instruo a imprimir. Desde o 1 at o 100 Imprimir o nmero atual Em javascript existem vrios tipos de loops, cada um est indicado para um tipo de repetio distinto e so os seguintes:

FOR WHILE DO WHILE
Estrutura If
Sintaxe: if (expresso) { aes a realizar em caso positivo ... } else { aes a realizar em caso negativo ... } Exemplos: if (dia == "Segunda-feira") document.write ("Que tenha um timo comeo de semana") if (credito >= preo) { document.write("comprou o artigo " + novoArtigo) //mostro compra carrinho += novoArtigo //coloco o artigo no carrinho da compra credito -= preo //diminuo o crdito conforme o preo do artigo 8
} else { document.write("acabou o seu crdito"); //informo que lhe falta dinhero window.location = "carrinhodacompra. html"; //vou pgina do carrinho } if (idade > 18) document.write("pode ver esta pgina para adultos"); if (bateria == 0 && redeEletrica = 0) document.write("seu laptop vai se apagar em segundos");
Estrutura SWITCH
Utilizada para tomar decises em funo de distintos estados das variveis. Sintaxe: switch (expresso) case valor1: Sentenas a break case valor2: Sentenas a break case valor3: Sentenas a break default: Sentenas a } Exemplo: Switch (dia_da_semana) { case 1: document.write(" segunda-feira"); break; case 2: document.write(" tera-feira"); break; case 3: document.write(" quarta-feira"); break; case 4: document.write(" quinta-feira"); break; case 5: document.write(" sexta-feira "); break; case 6: document.write(" fim de semana"); break; default: document.write("Esse dia no existe") } 9 { executar se a expresso tem como valor a valor1 executar se a expresso tem como valor a valor2 executar se a expresso tem como valor a valor3 executar se o valor no nenhum dos anteriores
Estruturas de Repetio Loop FOR

Sintaxe: for (iniciao;condio;atualizao) { sentenas a executar em cada repetio } Exemplo: for (i=1;i<=1000;i+=2) document.write(i); for (i=343;i>=10;i--) document.write(i); } Exemplo de HTML e JavaScript O que desejamos escrever em uma pgina web mediante JavaScript o seguinte: <H1>Cabealho de nvel 1</H1> <H2>Cabealho de nvel 2</H2> <H3> Cabealho de nvel 3</H3> <H4> Cabealho de nvel 4</H4> <H5> Cabealho de nvel 5</H5> <H6> Cabealho de nvel 6</H6> Para isso, temos que fazer um loop que comece em 1 e termine em 6 e em cada repetio escreveremos o respectivo cabealho. for (i=1;i<=6;i++) { document.write("<H" + i + ">Cabealho de nvel " + i + "</H" + i + ">") }
Loops WHILE e DO WHILE
Estes loops se utilizam quando queremos repetir um nmero indefinido de vezes a execuo de umas sentenas, sempre que se cumpra uma condio. Sintaxe: while (condio){ sentenas a executar } e do { sentenas do loop } while (condio)
10
Exemplo: var soma = 0 while (soma < 1000){ soma += parseInt(Math.random() * 100) document.write (soma + "<br>") }
Funes em Javascript
As funes so utilizadas constantemente, no s as que voc escreve como tambm as que j esto definidas pelas linguagens, pois todas as linguagens de programao tm vrias funes para realizar processos habituais como, por exemplo, obter a hora, imprimir uma mensagem na tela ou converter variveis de um tipo a outro. J vimos alguma funo nos exemplos anteriores, quando fazamos um document.write() na verdade estvamos chamando funo write() associada ao documento da pgina que escreve um texto na pgina. Sintaxe: function nomefuncao (){ instrues da funo ... } Exemplos: function escreverBoasvindas(){ document.write("<H1>Ol a todos</H1>"); } Para chamar a funo utilizamos seu nome seguido dos parnteses. NomeDaFuncao() A funo dever estar dentro do JavaScript e tambm dever ser chamada dentro de um JavaScript. <html> <head> <title>Minha Pgina</title> <script> function minhafuncao(){ //fao algo... document.write("Isto est bom"); } </script> </head> <body> <div style=text-align:center> <script> minhafuncao() </script> </div> </body> </html> Exemplo sem funo: <html> <head> <title>Untitled</title> 11
<script type="text/javascript"> <!-num1 = prompt("Informe o primeiro nmero","Insira aqui"); num2 = prompt("Informe o segundo nmero","Insira aqui"); total = num1 + num2; alert("Soma = "+total); //--> </script> </head> <body> <p>teste</p> </body> </html>
Exemplo com funo: <html> <head> <title>Untitled</title> <script type="text/javascript"> <!-function soma(){ num1 = prompt("Informe o primeiro nmero","Insira aqui"); num2 = prompt("Informe o segundo nmero","Insira aqui"); total = num1 + num2; alert("Soma = "+total); } //--> </script> </head> <body> <button onclick="soma();">Somar</button> <p>teste</p> </body> </html>
Funes pr-definidas de Javascript

Algumas funes pr-definidas de Javascript so: eval (string), onde string representa uma expresso a ser resolvida, retornando um valor numrico. Exemplo: x = 4; eval (3 + x + 8); Resultado = 15 parseInt(string, base), onde o primeiro parmetro representa uma string a ser convertida para a base especificada no segundo parmetro.
12
Exerccios: Estruturas de controle
1. Faa um programa que receba o valor do salrio-base de um funcionrio, calcule e mostre o salrio a receber, sabendose que este funcionrio tem gratificao de 5% sobre o salrio-base e paga imposto de 7% sobre o salrio-base (Estrutura Seqencial).
2. Faa um programa que leia 10 nmeros inteiros e exiba na tela a mensagem Par se ele for um nmero par, ou mpar se ele for um nmero mpar (Estrutura de Seleo).
3. Faa um programa que receba duas notas de seis alunos, calcule e mostre (Utilize a Estrutura de Repetio Determinada FOR): A mdia aritmtica das duas notas de cada aluno; A mensagem que est na tabela a seguir: Mdia aritmtica Abaixo de 3,0 De 3,0 a 7,0 Acima de 7,0 O total de alunos aprovados; O total de alunos de exame; Total de alunos reprovados; A mdia da classe. Mensagem Reprovado Exame Aprovado
4. Faa um programa que receba a idade de 10 pessoas. O programa deve calcular e mostrar a quantidade de pessoas com idade maior que 18 anos (Estrutura de Repetio Indeterminada WHILE).
13
Manipuladores de eventos
Existem duas categorias de manipuladores de eventos: eventos de sistema e eventos de mouse. Os eventos de sistema disponveis so: OnLoad e OnUnload. Eles no exigem a interao do usurio para serem ativados. Os eventos de mouse disponveis so: OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver. Eles exigem a interao do usurio (atravs do mouse ou no) para serem ativados. ONLOAD Este evento ativado aps a pgina HTML ser completamente carregada. Exemplo: <html> <head> <script language="Javascript"> function chegada() { window.alert("A pgina foi carregada com sucesso!"); } </script> </head> <body OnLoad="chegada()"> <p> Veja que interessante utilizao do evento OnLoad. </p> </body> </html> ONUNLOAD Este evento ativado aps a pgina HTML ser abandonada (seja atravs do clique sobre algum link, ou sobre os botes de avano/retrocesso do browser). Exemplo: <html> <head> <script language="Javascript"> function saida() { window.alert("Volte sempre!"); } </script> </head> <body OnUnload="saida()"> <p> Veja que interessante utilizao do evento OnUnload. <a href="http://www.google.com.br">Google</a> </p> </body> </html> ONCLICK O evento mais bsico de mouse tratado pelo manipulador OnClick. Este evento ativado sempre que se d um clique sobre um objeto que aceita evento de clique de mouse. Objetos que aceitam um evento OnClick so links, caixas de verificao e botes. Exemplo: 14
<html> <head> <script type="text/javascript"> function mensagem() { window.alert("Voc clicou neste campo"); } </script> </head> <body> <a href="http://www.google.com.br" OnClick="mensagem()"> Link comum</a><br> <form> <div> <input type="radio" OnClick="mensagem()">Radio <br /> <input type="checkbox" OnClick="mensagem()">Checkbox <br /> <input type="reset" OnClick="mensagem()" value="Limpar"> <br /> <input type="submit" OnClick="mensagem()" value="Enviar"> <br /> </div> </form> </body> </html> ONFOCUS O foco ocorre quando um objeto torna-se o item em foco. Isto acontece quando o usurio clicar ou alternar para um objeto especfico na pgina. Este evento pode ser associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>). Exemplo: <html> <head> <script type="text/javascript"> <!-function foco() { window.alert("O campo EMAIL est em foco"); } //--> </script> </head> <body> <form> <div> Nome: <input name="nome" type="text"><br> Email: <input name="email" type="text" OnFocus="foco()"><br> Telefone: <input name="telefone" type="text"> </div> </form> </body> </html>
ONBLUR Este evento ativado quando um objeto torna-se fora de foco - quando se muda para outra janela, ou aplicativo, ou quando se passa para outro objeto utilizando cliques do mouse, ou a tecla TAB. Ele associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>). 15
Exemplo: <html> <head> <script type="text/javascript"> <!-function semFoco() { window.alert("O campo EMAIL perdeu o foco"); } //--> </script> </head> <body> <form> <div> Nome: <input name="nome" type="text"><br> Email: <input name="email" type="text" OnBlur="semFoco()"><br> Telefone: <input name="telefone" type="text"> </div> </form> </body> </html> ONCHANGE Este evento ativado sempre que um objeto perde o foco e o seu valor alterado. Ele associado aos objetos text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>). Exemplo: <html> <head> <script type="text/javascript"> function mudou1() { document.form1.completo.value=document.form1.nome.value; } function mudou2() { document.form1.completo.value=document.form1.completo.value + " " + document.form1.sobrenome.value; } </script> </head> <body> <form name="form1"> <pre> Nome: <input name="nome" type="text" OnChange="mudou1()"> Sobrenome: <input name="sobrenome" type="text" OnChange="mudou2()"> Nome completo: <input name="completo" type="text"> </pre> </form> </body> </html> Exerccio Faa uma terceira funo que receba o primeiro, segundo e ltimo nome e mostre em um quarto <input> o nome gerado pelos trs campos anteriores. 16
ONSELECT Este evento ativado quando o usurio seleciona (deixa em destaque) parte do texto em um dos objetos aos quais est associado. So eles: text, password e textarea (definidos pelas tags <INPUT> e <TEXTAREA>). Exemplo: <html> <head> <script type="text/javascript"> function selecao() { window.alert("Campo selecionado"); } </script> </head> <body> <form> <pre> Campo input texto: <input type="text" OnSelect="selecao()"> Campo input senha: <input type="password" OnSelect="selecao()"> Campo textarea: <textarea OnSelect="selecao()"></textarea> </pre> </form> </body> </html> ONSUBMIT Este evento ativado no momento de enviar os dados do formulrio. Ele associado ao objeto form (definido pela tag <FORM>). Exemplo: <html> <head> <script type="text/javascript"> function submete() { window.alert("Evento OnSubmit ativado!"); } </script> </head> <body> <div> <form name="form1" OnSubmit="submete()"> Campo 1: <input type="text" size="10" name="campo1"><br /> Campo 2: <input type="text" size="10" name="campo2"><br /> <input type="submit" value="Enviar"> </form> </div> </body> </html>
Validao de Formulrios
Muitas vezes, os dados que so inseridos em um formulrio precisam ser separados, analisados, manipulados ou verificados quanto a erros antes de serem transmitidos para o servidor. O evento OnSubmit permite a captura e, se necessrio, a interrupo do envio dos dados de um formulrio. Isto realizado chamando-se a funo a partir do manipulador OnSubmit, fazendo com que ela retorne verdadeiro ou falso. Se a funo associada ao manipulador retornar falso, os dados do formulrio no sero enviados. Esta funcionalidade pode ser verificada a partir do cdigo a seguir. 17
Exemplos: Exemplo de validao de campos do tipo text <html> <head> <script type="text/javascript"> function submete() { if (document.form1.campo1.value == "" || document.form1.campo2.value == "") { alert(" necessrio preencher todos os campos!!!"); return false; } else { alert("Dados enviados com sucesso!!!"); return true; } } </script> </head> <body> <form name="form1" action="#" OnSubmit="return submete()"> Campo 1: <input type="text" size="10" name="campo1"><br /> Campo 2: <input type="text" size="10" name="campo2"><br /> <input type="submit" value="Enviar"> </form> </body> </html> Exemplo de validao de campos numricos <html> <head> <script type="text/javascript"> function submete() { if (isNaN(document.form1.cpf.value)||isNaN(document.form1.idade.value)){ alert("Preencha os campos CPF e idade apenas nmeros!!!"); return false; } else { alert("Dados enviados com sucesso!!!"); return true; } } </script> </head> <body> <form name="form1" action="#" OnSubmit="return submete()"> CPF: <input type="text" size="10" name="cpf"><br /> Idade: <input type="text" size="10" name="idade"><br /> <input type="submit" value="Enviar"> </form> </body> </html>
com
18
Exemplo de validao de campos do tipo checkbox <html> <head> <title>Exemplo CheckBox</title> <script type="text/javascript"> <!-function verifica(){ if ((form1.cultura.checked == false)&& (form1.esporte.checked == false) && (form1.lazer.checked == false)){ alert("Marque pelo menos uma questo!"); return false; } else{ alert("Dados enviados com sucesso!!!"); return true; } } //--> </script> </head> <body> <form action="#" name="form1" OnSubmit="return verifica()"> <p>Escolha sua opção:<br /> <input type="checkbox" name="cultura" />Cultura <br /> <input type="checkbox" name="esporte" />Lazer<br /> <input type="checkbox" name="lazer" />Esporte<br /> <input type="submit" value="Enviar" /> </p> </form> </body> </html> Exemplo de validao de campos do tipo botes de radio <html> <head> <title>Exemplo CheckBox</title> <script type="text/javascript"> <!-function verifica(){ if ((form1.opcao[0].checked == false) (form1.opcao[1].checked == false) && (form1.opcao[2].checked == false)){ alert("Marque uma das opes!!!"); return false; } else{ alert("Dados enviados com sucesso!!!"); return true; } } //--> </script> </head> <body> <form action="#" name="form1" OnSubmit="return verifica()"> <p>Escolha sua opção:<br /> <input type="radio" name="opcao" />Cultura <br /> <input type="radio" name="opcao" />Lazer<br /> <input type="radio" name="opcao" />Esporte<br /> <input type="submit" value="Enviar" /> </p> </form> </body> </html> 19
&&
Exemplo de validao de campos de seleo <html> <head> <title>Exemplo CheckBox</title> <script type="text/javascript"> <!-function listaSelecao(site) { if(!(document.form1.site.options[1].selected ||document.form1.site.options[2].selected)){ alert(" obrigatria a seleo de um item"); return false; } else{ alert("Dados selecionados com sucesso!!!"); return true; } } //--> </script> </head> <body> <form action="#" name="form1" onsubmit="return listaSelecao(site)"> <p>Escolha uma das opções<br /> <select name="site"> <option value="0">Escolha uma Opção</option> <option value="1">Google</option> <option value="2">Yahoo</option> </select> <input type="submit" value="Enviar" /> </p> </form> </body> </html> ONMOUSEOVER Este evento ativado quando o ponteiro do mouse passa sobre um objeto do tipo links ou botes. Exemplo: <html> <head> <script language="Javascript"> function ativa() { window.alert("Evento OnMouseOver ativado!"); } </script> </head> <body> <a href="http://www.google.com.br" OnMouseOver="ativa()"> Passe o mouse sobre este link</a> <form> <input type="reset" value="Boto Reset" OnMouseOver="ativa()"><br /> <input type="submit" value="Boto Submit" OnMouseOver="ativa()"> </form> </body> </html>
20
Objetos
Hierarquia O nvel mais alto de objetos em Javascript consiste naqueles objetos que pertencem a navigator (navegador). Diretamente abaixo deste nvel, esto os objetos window (janela). Cada janela tem uma rvore de nveis que se ramifica a partir dela. Estas rvores consistem em location (localizao), history (histrico) e document (documento). A cada nvel h outros objetos e abaixo da rvore de documentos h outra ramificao. Neste nvel, h trs objetos array forms (formulrios), anchor (ncoras) e links. No browser, os objetos seguem a mesma estrutura hierrquica da pgina HTML: de acordo com essa hierarquia, os descendentes dos objetos so propriedades desses objetos. Quando uma pgina carregada no browser, ele cria um nmero de objetos de acordo com o contedo da pgina. Os seguintes objetos so sempre criados, independentemente do contedo da pgina: window, location, history e document. A Natureza Orientada a Objetos de XHTML Javascript considera HTML uma linguagem orientada a objetos, na qual os diversos tags HTML correspondem a diferentes tipos de objetos Javascript. Exemplo: <html> <head><title>Minha pagina</title> <script type="text/javascript"> <!-function manipulaObjetos(){ document.title = "Novo Ttulo"; } //--> </script> </head> <body> <form> <p> <script type="text/javascript"> <!-manipulaObjetos(); //--> </script> </p> </form> </body> </html> A partir do cdigo acima, obtem-se os seguintes objetos Javascript: document.title : ttulo da pgina document.formulario1 : formulrio da pgina document.formulario1.botao1 : boto do formulrio
Este apenas um exemplo dos objetos que Javascript cria automaticamente de HTML. Observe que quase todo elemento HTML pode ser usado como um objeto. Alm disso, possvel ler e atribuir valores a estes objetos dinamicamente. Tenha em mente que medida que se estrutura uma pgina, tambm est se definindo objetos e seus valores para Javascript. As prximas sees apresentam detalhadamente o conjunto de objetos da linguagem Javascript.
21
OBJETO NAVIGATOR Este objeto d informaes sobre o navegador. Ele apresenta as seguintes propriedades: appName, appVersion, appCodeName, userAgent. Propriedade appName: retorna o nome do browser do usurio. Exemplo: navigator.appName = Netscape Propriedade appVersion: retorna a verso do browser e a verso do sistema operacional em que ele est rodando. [ formato: nmero da verso (plataforma; pas) ] Exemplo: navigator.appVersion = 2.0 (Win95; I) Propriedade appCodeName: retorna o nome do cdigo de desenvolvimento interno do desenvolvedor de um browser especfico. Exemplo: navigator.appCodeName = Mozilla Propriedade userAgent: usada em cabealhos HTTP para fins de identificao, a combinao das propriedades appCodeName e appVersion. Servidores Web usam esta informao para identificar os recursos que o navegador dispe. Exemplo: navigator.userAgent=Mozilla/2.0 (Win95; I) OBJETO LOCATION Este objeto utilizado para identificar o documento corrente. Ele consiste em uma URL completa no formato protocolo//servidor:porta/caminho seguidos de ?search ou #hash. Suas propriedades so: protocol, hostname, port, pathname, search, hash. Cada uma de suas propriedades representa uma parte da URL total. Propriedade protocol: retorna o protocolo de transporte do documento. Exemplo: location.protocol = http: Propriedade hostname: identifica o nome do computador hospedeiro. Propriedade port: especifica a porta para o endereo. Esta informao utilizada apenas se uma porta no-padro estiver sendo usada. Propriedade pathname: define o caminho e o nome do arquivo. Propriedade search: retorna quaisquer comandos de consulta que possam estar embutidos na URL corrente. Valores de search so separados do resto da URL por um sinal de interrogao (?). Exemplo: location.search = nome=Joao Propriedade hash: retorna quaisquer ncoras que possam ter sido passadas na URL. Valores de hash so separados do resto da URL por um sinal de cerquilha (#). Exemplo: location.hash = capitulo1 OBJETO CHECKBOX Utilizado na construo de caixas de verificao. Suas propriedades so: name, value, checked, defaultChecked. Propriedade name: especifica o nome da caixa. Propriedade value: especifica o valor da caixa. Exemplo: nomeForm.nomeCheckbox.value = 1 Propriedade checked: valor booleano que especifica o estado de seleo da caixa (selecionada ou no-selecionada). Exemplo: if ( nomeForm.nomeCheckbox.checked == true ) { funcao(); } Propriedade defaultChecked: valor booleano que especifica o estado default de seleo da caixa. Exemplo completo: <html> <head> <title>Exemplo CheckBox</title> <script type="text/javascript"> 22
<!-function verifica(){ if (document.form1.azul.checked == true ){ window.document.body.style.backgroundColor = "blue"; } else if (document.form1.vermelho.checked == true ){ window.document.body.style.backgroundColor = "red"; } else if (document.form1.amarelo.checked == true ){ window.document.body.style.backgroundColor = "yellow"; } } //--> </script> </script> </head> <body> <form action="#" name="form1"> <p>Escolha a cor do site<br /> <input type="checkbox" name="azul" />Azul <br /> <input type="checkbox" name="vermelho" />Vermelho<br /> <input type="checkbox" name="amarelo" />Amarelo<br /> </p> </form> <p> <button onclick="verifica();">OK</button> </p> </body> </html> OBJETO RADIO Corresponde a um array de botes, onde todos os botes compartilham a mesma propriedade name. Suas propriedades so: name, checked, defaultChecked, length. Propriedade name: especifica o nome do objeto. Propriedade checked e defaultChecked: funcionamento idntico ao definido em checkbox. Propriedade length: especifica o comprimento do array. Exemplo: <html> <head> <title>Exemplo CheckBox</title> <script type="text/javascript"> <!-function verifica(){ if (form1.cor[0].checked == true ) window.document.body.style.backgroundColor = "blue"; else if (form1.cor[1].checked == true) window.document.body.style.backgroundColor = "red"; else if (form1.cor[2].checked == true) window.document.body.style.backgroundColor = "yellow"; } //--> </script> </head> 23
<body> <form action="#" name="form1"> <p>Escolha a cor do site<br /> <input type="radio" name="cor" />Azul<br /> <input type="radio" name="cor" />Vermelho<br /> <input type="radio" name="cor" />Amarelo<br /><br /> </p> </form> <p> <button onclick="verifica()">OK</button> </p> </body> </html> OBJETO HIDDEN Utilizado para enviar informaes quando o formulrio submetido (este objeto no aparece no formulrio). Suas propriedades so: name, value. Propriedade name: especifica o nome do objeto. Propriedade value: especifica a informao que est sendo passada. OBJETO TEXT Utilizado para entrada/sada de dados. Suas propriedades so: name, value, defaultValue. Propriedade name: especifica o nome do objeto. Propriedade value: especifica o valor do objeto. Propriedade defaultValue: especifica o valor default do objeto. OBJETO RESET Utilizado para limpar dados de um formulrio. Suas propriedades so: name, value. Propriedade name: especifica o nome do boto. Propriedade value: especifica o ttulo colocado na face do boto. Exemplo: document.form.botao.value=novo titulo OBJETO SUBMIT Utilizado para interfacear Javascript e outros scripts/programas. Suas propriedades so: name, value. Propriedade name: especifica o nome do boto. Propriedade value: especifica o ttulo colocado na face do boto. OBJETO BUTTON Utilizado na construo de interfaces. Suas propriedades so: name, value. Propriedade name: especifica o nome do boto. Propriedade value: especifica o ttulo colocado na face do boto. OBJETO TEXTAREA Utilizado para entrada/sada de dados. Suas propriedades so: name, value, defaultValue. Propriedade name: especifica o nome do objeto. Propriedade value: especifica o valor do objeto. Propriedade defaultValue: especifica o valor default do objeto.
24
OBJETO SELECT Utilizado para construir caixas de seleo. Suas propriedades so: name, options, length. Propriedade name: especifica o nome do objeto. Propriedade options: array que contm uma entrada para cada opo de uma caixa de seleo. Propriedade length: especifica o comprimento do array de opes. O exemplo a seguir identifica que opes foram selecionadas na caixa de seleo. Exemplo: <html> <head> <title>Exemplo CheckBox</title> <script type="text/javascript"> <!-function listaSelecao(site) { if (document.form1.site.options[1].selected){ window.open("http://www.google.com.br","Google","status:no;left:100px"); } else if (document.form1.site.options[2].selected){ window.open("http://www.yahoo.com.br"); } } //--> </script> </script> </head> <body> <form action="#" name="form1"> <p>Escolha um dos sites:<br /> <select name="site"> <option value="0">Escolha uma Opção</option> <option value="1">Google</option> <option value="2">Yahoo</option> </select> </p> </form> <p> <button onclick="listaSelecao()">OK</button> </p> </body> </html> Objetos do CORE Javascript Os objetos do CORE Javascript so os objetos instrnsecos da linguagem, isto existem tanto no cliente (navegador), quanto no servidor Web. Os objetos do Client-Side Javascript e do Server-Side Javascript somente funcionam, respectivamente, em programas escritos para o navegador e para o servidor Web. OBJETO ARRAY possvel criar um vetor atravs do objeto Array, pr-definido no Javascript. nome_do_array = new Array(10) Para inserir e consultar elementos de um array, deve-se utilizar a seguinte sintaxe: nome_do_array[x] A varivel x representa o ndice de um elemento. O primeiro elemento o de nmero 0. 25
OBJETO DATE O objeto Date lhe ajuda a manipular datas. Para criar um objeto do tipo Date, deve-se utilizar a seguinte sintaxe: nome_do_objeto = new Date(parmetros) Se no for indicado nenhum parmetro, ser criado um objeto com a data e a hora atual do sistema. possvel passar uma string representando uma data e hora como parmetro: x = new Date(October 01, 2001 08:00:00) Caso sejam omitidos hora, minuto e segundo, o valor padro ser 0. Outra forma de indicar data e hora atravs de uma srie de parmetros numricos, representando o ano, ms, dia, hora, minutos e segundos. A funo Date( ) retorna a data atual. OBJETO STRING Em Javascript, toda string um objeto, e, portanto, tem mtodos e propriedades associadas. length (propriedade): retorna o comprimento de um string. Sintaxe: string.length indexOf( ) (mtodo): retorna a posio da primeira ocorrncia do caracter procurado dentro de um string especfico. As posies dos caracteres que compem um string variam entre "0" e "comprimento do string - 1" (length - 1). Se o caracter procurado no for encontrado em nenhuma posio, o mtodo retorna "-1". Sintaxe: string.indexOf(caracter_procurado,posio_inicial_de_busca) charAt( ) (mtodo): retorna o caracter encontrado na posio indicada. Sintaxe: string.charAt(posio) toUpperCase( ) (mtodo): traduz todo caracter dentro de uma string para letra maiscula. Sintaxe: string.toUpperCase() toLowerCase( ) (mtodo): traduz todo caracter dentro de uma string para letra minscula. Sintaxe: string.toLowerCase() substring( ) (mtodo): retorna uma sequncia de caracteres de uma string maior. Sintaxe: string.substring(ndiceA, ndiceB) onde ndiceA e ndiceB so ambos valores numricos entre 0 e a propriedade de string length. OBJETO WINDOW O objeto window representa a janela do navegador ou um frame. criado um objeto window sempre que o navegador encontra uma tag <BODY>. Propriedades mais utilizadas: defaultStatus: a mensagem que ser exibida quando no tiver nenhuma outra na status bar do navegador. Cuidado para no confundir com a propriedade status, que reflete umas mensagens transitrias, adequadas para um certo momento ou ao do usurio; Height: esta propriedade contm a altura, em pixels, da janela do navegador; Width: semelhante propriedade anterior, porm trabalha com a largura; name: representa o nome da janela; status: especifica a mensagem a ser exibida na status bar do navegador. muito til para comunicar ao usurio pequenas mensagens. Mtodos mais utilizados: alert( ): exibe uma mensagem para o usurio. A string com a mensagem deve ser passada para o mtodo como parmetro; back( ): equivalente a apertar o boto back do navegador. Ou seja, volta atrs na ltima navegao feita pelo usurio; forward( ): tem o mesmo efeito do boto forward do navegador. Ou seja, se o usurio tiver apertado o boto back para voltar ltima pgina visitada, o forward avana novamente para a pgina mais recente; open( ): abre uma nova janela. O mtodo recebe como parmetros uma URL (o endereo da pgina que vai ficar na nova janela), o nome da janela e uma string com suas carctersticas; 26
close( ): fecha a janela especificada. O Javascript somente pode fechar automaticamente janelas abertas por ele. Caso contrrio, aparece uma caixa de confirmao para o usurio; confirm( ): exibe uma caixa de mensagem para o usurio com duas opes: OK e Cancel. Caso o usurio pressione OK, o mtodo retorna true. Caso contrrio, false. Ele recebe como parmetro uma string com a mensagem a ser exibida para o usurio; prompt( ): exibe uma caixa de mensagem e campo para o usurio entrar com uma string. O mtodo retorna a string digitada pelo usurio. So aceitos dois parmetros. O primeiro uma string com a mensagem a ser exibida e o segundo o valor padro da string a ser digitada pelo usurio.
Outros Exemplos
1. Exemplo de uma calculadora simples: <html> <head> <script type="text/javascript">  </script> </head> <body> <h1>Calculadora</h1> <div> <form name="form1" action="#"> Fornea uma expresso matemtica: <input type="text" name="expr" size="15" /><br /><br /> <input type="button" VALUE="Calcule" onClick="calcula(form1)" /> <input type ="reset" VALUE="Limpar"> <br /><br /> Resultado: <input type ="text" NAME="result" SIZE=15 /> </ form >
</div> </body> </html> 2. Relgio Digital
<html> <head> <title>Relgio Animado</title> <script type="text/javascript">  </script> </head> <body onLoad="relogio()"> <form name="form1"> <input type="text" value="" name="caixa"> </form> </body> </html> 3. Seguindo o ponteiro do mouse <html> <head> <title>Animacao e Eventos</title> <style type="text/css"> #bloco { position: absolute; top: 50px; left: 50px } </style> <script type="text/javascript"> function m(e) { document.getElementById("bloco").style.left=e.clientX; document.getElementById("bloco").style.top=e.clientY; } </script> </head> <body onMouseMove="m(event)"> <span id="bloco">Sempre a seguir !!!</span> </body> </html> 4. Banner <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Banners Animados</title> </head> <script type="text/javascript"> <!-var mensagens = ["um", "dois", "trs", "quatro"]; var contador = 0; 28
function animarBanner() { if(document.getElementById) document.getElementById('alvo').innerHTML=mensagens[contador]; else if(document.layers) { with (document.alvo.document) { open(); write(mensagens[contador]); close(); } } contador++; if (contador >= mensagens.length) contador = 0; setTimeout("animarBanner()",500); } //--> </script> <body onload="animarBanner()"> <div id="alvo"></div> </body> </html>
Exerccios de Reviso
1. Faa uma pgina que solicite o nome do aluno e escreva na tela uma mensagem de boas-vindas (Bem-Vindo, NomeDoAluno) em ttulo <h1>. Em seguida, apresente dois input type=text para entrada de valores inteiros e quatro botes para efetuar as operaes matemticas bsicas (+, -, %, *). O resultado deve ser impresso em um terceiro input type=text.
29
2. Faa um script que solicite a entrada da idade do usurio e apresente a seguinte sada (numa caixa de alerta): se a idade for menor que 18 : Voc pode entrar no site. Divirta-se! se a idade for igual ou maior que 18: Voc no pode entrar no site.
3. Qual a sada aps a execuo deste cdigo? <script type="text/javascript"> soma = 0; num = 1; while (num <= 20) { soma += num; num++; } document.write("Resultado : = " + soma) </script> 4. Qual a sada aps a execuo deste cdigo?
<script type="text/javascript"> test = "Professora Luclia Oliveira"; parts = test.split(" "); document.write(parts[0] + "<br>"); document.write(parts[1] + "<br>"); document.write(parts[2] + "<br>"); </script> 5. Qual a sada aps a execuo deste cdigo? <script type="text/javascript"> numero = prompt("Digite um numero"); for(num = 1; num <= 5; num++) document.write(num + numero + " "); </script>
30
6. Desenvolva um cdigo para criar o formulrio abaixo. Utilize JavaScript para validar se todos os campos esto preenchidos ou marcados. Caso no esteja, emitir ume mensagem solicitando que o campo seja preenchido.
31

Apostila Java Script

Enviado por

Dados do documento

Título original

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

Apostila Java Script

Enviado por

Direitos autorais:

Formatos disponíveis

2010

Professora Luclia Oliveira

Escopo das variveis

Escolha uma das trs formas de insero de JavaScript de sua preferncia.

FOR WHILE DO WHILE

Estruturas de Repetio Loop FOR

Loops WHILE e DO WHILE

Funes pr-definidas de Javascript

Exerccios: Estruturas de controle

</div> </body> </html> 2. Relgio Digital

Você também pode gostar