Você está na página 1de 49

Fundamentos e Desenvolvimento WEB JavaScript

Prof. Werley P. Santos

Contedo
Contextualizao do JavaScript Tratativas de sintaxe da linguagem Hierarquia de objetos Gerenciador de eventos Exemplos da linguagem

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

Contextualizao
Originalmente chama-se LiveScript JavaScript e Java so completamente diferentes
JavaScript : Linguagem de Hipertexto interpretada pelo cliente Java: Linguagem interpretada pela JVM

O nome JavaScript foi escolhido para fins comerciais diante do sucesso do JAVA O processamento ocorre do lado do cliente assim como o HTML
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 3

Contextualizao
No que o JavaScript podem nos ajudar?
Processamento simples de aplicaes como clculos matemticos Rpido no processamento Formatao dinmica Validao de campos Evita trfego de informaes Evita sobrecarga do servidor

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

Contextualizao
Caractersticas
case-sensitivy: myVar diferente de MyVar Encerramento de linha (;) opcional mas fortemente sugerido como boas prticas Tipagem fraca
No h definies de tipos de variveis As variveis so tipificadas dinamicamente So convertidas automaticamente de acordo com o contedo atribudo

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

Contextualizao
Para o servidor o JavaScript apenas um texto, assim como o HTML No h tratamento especial O navegador do cliente faz sua interpretao ao encontrar a etiqueta (TAG) indicativa
<script language=JavaScript [type=text/javascript] > statements; </script>

Pode ser atribudo no HEAD ou no em qualquer parte do BODY de uma pgina HTML
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 6

Contextualizao
Exemplo:
<html> <head> <title> Teste JavaScript </title> <script language="JavaScript" type="text/javascript"> alert("Hello"); </script> </head> <body> <script language="JavaScript" type="text/javascript"> document.write("Hello"); </script> </body> </html>
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 7

Contextualizao
possvel ainda implementar os scripts do JavaScript em um arquivo separado com no CSS
<script language=JavaScript src=arquivo>

Em geral utilizado apenas para funes A extenso padro do arquivo JS


<script language=JavaScript src=MyFunctions.js>

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

Tratativas de sintaxe da linguagem


Definies de comentrios
// Comentrio de uma linha */ Comentrio de vrias linhas */

Definies de variveis var myVar = 1; Definies de strings


var s1 = teste; var s2 = teste;

Definies de blocos atravs de chaves { }


Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 9

Tratativas de sintaxe da linguagem


Estrutura condicional IF:
if(expression) { statments...; } [else if (expression){ statments...; }] [else { statments...; }]

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

10

Tratativas de sintaxe da linguagem


Exemplo IF:
var a = 5; var b = 5; var c = 10; if(a == b) { alert(a e b so iguais); } else if (a == c){ alert(a e c so iguais); } else { alert(a diferente de b e c); }
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 11

Tratativas de sintaxe da linguagem


Estrutura seletora SWITCH:
switch(expression) { case 1: statments...; break; case 2: statments...; break; case n: statments...; break; default : statments...; }

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

12

Tratativas de sintaxe da linguagem


Exemplo SWITCH:
var farol = amarelo; switch(farol) { case vermelho: alert(Pare!); break; case amarelo: alert(Ateno!); break; case verde: alert(Prossiga); break; default : alert(Cor inexistente!); }

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

13

Tratativas de sintaxe da linguagem


Estrutura repetitiva WHILE:
while(expression) { statments...; }

Exemplo WHILE:
var myVar = 1; while(myVar <= 5) { alert(myVar); myVar ++; }
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 14

Tratativas de sintaxe da linguagem


Estrutura repetitiva FOR:
for(initialize; expression test; increment) { statments... }

Exemplo FOR:
for(var i = 0; i <= 5; i++) { alert(i); }
15

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

Tratativas de sintaxe da linguagem


Tratamento de objeto com WITH:
with (object) { statments... }

Exemplo WITH:
with (document) { var varTitle = title; alert(varTitle); }
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 16

Tratativas de sintaxe da linguagem


Funes:
function functionName(arg1, arg2, ..., arg-n) { statments... }

Exemplo de funo recursiva:


function fatorial(n) { if(n <= 1) return 1; else return n * fatorial(n-1); }
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 17

Tratativas de sintaxe da linguagem


Operadores comparativos
Operador == === != > >= < <= Significado Igual Exatamente igual (valor e tipo) Diferente Maior que Maior ou igual Menor que Menor ou igual

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

18

Tratativas de sintaxe da linguagem


Operadores lgicos

Operador && || !

Indica e (and) ou (or) no (not)

Exemplo (x < 10 && y > 1) (x==5 || y==5) !(x==y)

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

19

Tratativas de sintaxe da linguagem


Operadores de atribuio
Operador = += -= *= /= %= Exemplo x=10; y=5; x+=y x-=y x*=y x/=y x%=y x=x+y x=x-y x=x*y x=x/y x=x%y Mesmo que Resultado x=5 e y=10 x=15 x=5 x=50 x=2 x=0

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

20

Hierarquia de objetos
window Janela corrente

location Localizao

document Documento corrente

history Histrico

links[ ] Matriz de links

forms[ ] Matriz de formulrios

imagens[ ] Matriz de imangens

elements[ ] Matriz de elementos

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

21

Hierarquia de objetos
Ao se referenciar um objeto deve colocar o caminho completo de sua hierarquia Objeto window opcional. Sintaxe: document.forms[0].elements[0].value = teste; Consultar o arquivo 04 - FDW - JavaScript Objetos.pdf para informaes sobre:
Propriedades de objetos Mtodos Tratamento do objeto String e Date
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 22

Gerenciador de eventos
O JavaScript acrescenta interatividade ao HTML Isso ocorre atravs de cdigos direcionados eventos que ocorrem na aplicao Fatos que ocorrem durante a execuo do sistema O desenvolvedor pode definir aes a serem realizadas pelo programa em cada um desses eventos
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 23

Gerenciador de eventos
Evento:
onLoad: Ocorre quanto a pgina ou a imagem so carregados suportado por: body e img
<body onload="alert(Oi!')"> </body> <img scr=foto.jpg onLoad="alert(A foto foi carregada!)">

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

24

Gerenciador de eventos
Evento:
onUnload: Ocorre quando o usurio sa da pgina suportado por: body
<body onUnload="alert(Tchau!')"> </body>

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

25

Gerenciador de eventos
Evento:
onChange: Ocorre quando o contedo de um campo alterado suportado por: text, select e textarea
<input type="text" name=nome onChange=alert(Mudei)">

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

26

Gerenciador de eventos
Evento:
onBlur: Ocorre quando o objeto perde o foco suportado por: button, checkbox, fileUpload, layer, frame, password, radio, reset, submit, text, textarea, window
<input type="text" name=nome onBlur=alert(Perdi o foco)">

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

27

Gerenciador de eventos
Evento:
onFocus: Ocorre quando o objeto recebe o foco suportado por: button, checkbox, fileUpload, layer, frame, password, radio, reset, submit, text, textarea, window
<input type="text" name=nome onFocus=alert(Recebi o foco)">

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

28

Gerenciador de eventos
Evento:
onClick: Ocorre quando o objeto recebe o click do mouse suportado por: button, document, checkbox, link, radio, reset, submit
<input type=button" name=clique value=Clique aqui onClick=alert(Ok)">

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

29

Gerenciador de eventos
Evento:
onMouseOver: Ocorre quando o ponteiro do mouse passa por sobre o objeto suportado por: layer, link, img
<img src=foto.jpg onMouseOver="alert(Sobre a foto!')" />

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

30

Gerenciador de eventos
Evento:
onMouseOut: Ocorre quando o ponteiro do mouse sai de sobre o objeto suportado por: layer, link, img
<img src=foto.jpg onMouseOut="alert(Tirou o mouse!')" />

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

31

Gerenciador de eventos
Evento:
onReset: Ocorre quando o boto de reset (limpar) do formulrio recebe o clique do mouse onSubmit: Ocorre quando o boto de submit (submeter) do formulrio recebe o clique do mouse suportado por: form Ambos precisam de um retorno (true ou false)
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 32

Gerenciador de eventos
Eventos onReset e onSubmit:
<HTML> </HEAD> <SCRIPT LANGUAGE="JavaScript"> function limpar() { return window.confirm(Limpar form?") } function enviar() { return window.confirm(Enviar form?") } </SCRIPT> </HEAD> <BODY> <FORM ACTION=# onReset="return limpar()" onSubmit="return enviar()"> </FORM> </BODY> </HTML>
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 33

Gerenciador de eventos
Lista de objetos e eventos suportados (1/2):
Objeto area button checkbox document Eventos onDblClick(), onMouseOut(), onMouseOver() onBlur(), onClick(), onFocus(), onMousedown(), onMouseup() onBlur(), onClick(), onFocus() onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseUp() onBlur(), onChange(), onFocus() onReset(), onSubmit() onBlur(), onDragDrop(), onError(), onFocus(), onLoad(), onMove(), onResize(), onUnload() onAbort(), onError(), onKeyDown(), onKeyPress(), onKeyUp(), onLoad() onMouseOver(), onMouseOut(), onLoad(), onFocus(), onBlur()

fileupload form frame image layer

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

34

Gerenciador de eventos
Lista de objetos e eventos suportados (2/2):
Objeto link Eventos onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseOut(), onMouseUp(), onMouseOver() onBlur(), onFocus() onBlur(), onClick(), onFocus() onBlur(), onClick(), onFocus() onBlur(), onChange(), onFocus() onBlur(), onClick(), onFocus() onBlur(), onChange(), onFocus(), onSelect() onBlur(), onChange(), onFocus(), onKeyDown(), onKeyPress(), onKeyUp(), onSelect() onBlur(), onDragDrop(), onError(), onFocus(), onLoad(), onMove(), onResize() onUnload()

password radio reset select submit text textarea window

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

35

Exemplos da linguagem
Alerta em mltiplas linhas
<html> <head> <script type="text/javascript"> function disp_alert() { alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!"); } </script> </head> <body> <input type="button" onclick="disp_alert()" value="Display alert box" /> </body> </html>

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

36

Exemplos da linguagem
Prompt de confirmao
<html> <head> <script type="text/javascript"> function show_confirm(){ var r=confirm("Press a button"); if (r==true) { alert("You pressed OK!"); }else{ alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html>
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 37

Exemplos da linguagem
Prompt de caixa de texto
<html> <head> <script type="text/javascript"> function show_prompt(){ var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body> </html>

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

38

Exemplos da linguagem
Navegador, sistema operacional e resoluo:
<!-- coloque entre as tags <BODY> </BODY> --> <script LANGUAGE="JAVASCRIPT"> <!-document.write(navigator.appName + "<br>") document.write(navigator.appVersion + "<br>") document.write(screen.width+ x + screen.height + "<br>") //--> </script>

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

39

Exemplos da linguagem
Redirecionamento
<! Redirecionamento imediato --> <script language="javascript"> location.href=pagina.html; </script> <! Redirecionamento com tempo de 5 mil milesegundos equivale 5 segundos --> <script language="javascript"> setTimeout("location.href='pagina.html'",5000); </script>

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

40

Exemplos da linguagem
Validao de dados (1/2)
<! Formulrio HTML --> <form name="frm" action="obrigado.html" onSubmit="return validaDados(this)"> nome: <input type="text" name="nome" obrigatorio="sim"> <input type="submit" name="btnEnviar" value="Enviar"> </form>

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

41

Exemplos da linguagem
Validao de dados (2/2)
<! Funo JavaScript --> function validaDados(p_form){ if(!confirm("Deseja enviar os dados?")){ return false; }else{ var elementos = p_form.elements; for (var i=0; i< elementos.length; i++){ if(elementos[i].getAttribute("obrigatorio") == "sim"){ alert("O elemento " + elementos[i].getAttribute("name") + " obrigatrio!"); } } } return true; } </script

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

42

Exemplos da linguagem
Arrays
<script LANGUAGE="JAVASCRIPT"> lista = new Array(3); lista[0]="Beth"; lista[1]="Paulo"; lista[2]="Angelo"; document.write(lista.length + "<br>"); document.write(lista.join() + "<br>"); lista.reverse(); document.write(lista.join("-") + "<br>"); lista.sort(); document.write(lista.join("-") + "<br>"); </script> //Imprime 3 //Imprime Beth,Paulo,Angelo // Inverte a ordem //Imprime Angelo-Paulo-Beth // Ordena //Imprime Angelo-Beth-Paulo

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

43

Exemplos da linguagem
Objetos e cookies (1/3)
<script LANGUAGE="JAVASCRIPT"> function CookieClass(){ // Propriedades var validade = new Date(); // Vlido por 7 dias validade.setTime(validade.getTime() + (7 * 24 * 60 * 60 * 1000)); // Mtodos (funes) this.setCookie = function( chave, valor ){ document.cookie = chave + "=" + escape(valor) + ";expires=" + validade.toGMTString(); }; ... CONTINUA

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

44

Exemplos da linguagem
Objetos e cookies (2/3)
this.getCookie = function( chave ){ var prefixo = chave + "="; var valor = null; if (document.cookie.length > 0) { posIni = document.cookie.indexOf(prefixo); if(posIni != -1){ posIni += prefixo.length; posFin = document.cookie.indexOf(";", posIni); if(posFin == -1) posFin = document.cookie.length; valor = unescape(document.cookie.substring(posIni, posFin)); } } return valor; }; } ... CONTINUA
Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 45

Exemplos da linguagem
Objetos e cookies (3/3)
var ck = new CookieClass(); ck.setCookie("user", "werley"); alert(ck.getCookie("user")); </script>

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

46

Exerccio
Continuao do currculo (1/2)
Crie um subdiretrio denominado scripts abaixo de onde foi salvo o projeto do seu CV; Crie um arquivo nesse diretrio para tratativa das funes JavaScript denominado myFunctions.js. Nesse arquivo dever conter: Uma funo para validar o envio do formulrio de contato no seu CV. Essa funo dever validar se os campos obrigatrios foram devidamente preenchidos. Veja o exemplo nos slides 41 e 42. Caso o dado que est sendo avaliado no tenha sido preenchido, mude a cor de fundo deste objeto (caixa de texto, caixa de seleo, etc) para uma cor que indique ao usurio qual campo no est preenchido corretamente (exemplo, amarelo). ATENO: isso deve ser feito atravs da aplicao de um estilo CSS que voc dever implementar. Ao final da funo uma nica mensagem deve ser exibida para o usurio informando que os campos na cor X devem ser preenchidos. A funo dever impedir a submisso do formulrio at que todos os campos obrigatrios tenham sido preenchidos Uma funo para transformar o email em minsculo depois que o usurio alterar o campo. Veja a tabela de evento no slide 35

Vincule esse arquivo pgina contato.html do seu CV.


Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos 47

Exerccio
Continuao do currculo (2/2)
Crie um outro arquivo no diretrio scripts para tratativa das classes JavaScript denominado myClasses.js. Nesse arquivo dever conter uma classe para tratar

cookies (incluso, obteno e excluso) . Veja o exemplo nos slides 44, 45 e 46


Modifique seu CV de forma que no topo do menu seja exibido o nome do usurio e a data do ltimo login buscado atravs de um cookie na mquina do usurio. Caso no haja essa informao no cookie solicite ao usurio seu nome atravs de um prompt. Adicione um link no menu para que o usurio possa limpar seus dados, ou seja, apagar o cookie. Ao faz-lo o usurio dever informar novamente seu nome atravs de um prompt. No permita que o usurio fique no site sem informar seus dados. Use sua criatividade, pesquise!

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

48

Contedo
Contextualizao do JavaScript Tratativas de sintaxe da linguagem Hierarquia de objetos Gerenciador de eventos Exemplos da linguagem

Fundamentos e Desenvolvimento WEB - prof. Werley P. Santos

49