Mariano Gomes Pimentel [email protected] JavaScript.
Transcript of Mariano Gomes Pimentel [email protected] JavaScript.
![Page 2: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/2.jpg)
Referências
• Websites interativos com JavaScriptHelder da Rocha – IBPINET
• HTML dinâmico (Parte III)Ramalho – Berkeley
• Netscape (documentação completa)http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htmhttp://developer.netscape.com/docs/manuals/communicator/jsref/index.htmhttp://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html
• Tony’s JavaScript (exemplos)http://www.geocities.com/ResearchTriangle/4084/js2.htm
• HTML (para revisão)http://www.nce.ufrj.br/cursos/html
![Page 3: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/3.jpg)
Introdução
• O que é JavaScript?• Para que serve JavaScript?• Exemplos de JavaScript• Onde escrever um JavaScript?
11
![Page 4: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/4.jpg)
O que é JavaScript?
• É uma linguagem de programação– Desenvolvida pela Netscape®
• Microsoft® tem o VBScript não é tanto utilizado quanto o JavaScript
• JavaScript também roda no Microsoft Internet Explorer®
– O código é escrito dentro da página HTML (client-server)
– Simples e Útil (para fazer coisas simples)
Obs.: JavaScript NÃO É Java– Java entra nas páginas HTML através de applets
• JavaScript é escrito dentro da página HTML
http://www.geocities.com/ResearchTriangle/4084/js2.htm
![Page 5: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/5.jpg)
Para que serve “JavaScript”?
• Efeitos visuais • Efeitos interativos• Geração dinâmica de conteúdo (on-the-fly)
• Adequações para a resolução do monitor• Padronização da apresentação• Armazenamento de informações (cookies)
Personalização do conteúdo
• Manipular objetos de interface• Janelas, Barra de status, Formulários etc.
• Operações matemáticas e textuais• Validação de dados de um formulário• Animações
• DHTML
![Page 6: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/6.jpg)
Exemplos de JavaScript:“Maçã”
<IMG src="maca1.gif" name="maca" onMouseOver="maca.src='maca2.gif'" onMouseDown="maca.src='maca3.gif'" onMouseUp="maca.src='maca4.gif'" onMouseOut="maca.src='maca5.gif'">
maca1.gif maca2.gif maca3.gif maca4.gif maca5.gif
![Page 7: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/7.jpg)
Exercício:“Mestre-Cuca”
olhos0.gif
olhos315.gif
olhos45.gifolhos135.gif
olhos90.gif
olhos180.gif
olhos225.gif
olhos270.gif
olhosani.gif
![Page 8: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/8.jpg)
Exemplos de JavaScript:“Olá”
<HTML>
<HEAD> <TITLE>Olá</TITLE></HEAD>
<BODY><P>Script que escreve "olá":</P><SCRIPT><!-- document.write("<B>Olá!</B>");//--></SCRIPT></BODY>
![Page 9: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/9.jpg)
Exemplos de JavaScript:“Rodapé, v1”
<BODY><SCRIPT language="JavaScript"><!-- nome = "Mariano Gomes Pimentel"; document.write("<HR>"); document.write("<I>Autor: </I>"); document.write(nome);//--></SCRIPT></BODY>
OBS1:nome é uma variável armazena uma informação
![Page 10: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/10.jpg)
OBS1:prompt é uma função faz alguma coisa: - Abre uma janela de diálogo para o usuário entrar com um texto - Retorna o texto digitado pelo usuário
OBS2:“Seja bem vindo"+nome+"</B> !!!" é uma expressão soma textos
Exemplos de JavaScript:“Conteúdo Personalizado”
<BODY><SCRIPT language="JavaScript"><!-- nome = prompt("Qual o seu nome?",""); document.write("Seja bem vindo <B>"+nome+"</B> !!!");//--></SCRIPT></BODY>
![Page 11: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/11.jpg)
Exemplos de JavaScript:“Rodapé, v2”
<BODY><SCRIPT language="JavaScript"><!-- nome = "Mariano Gomes Pimentel"; document.write("<HR>"); document.write("<I>Autor: </I>"+nome+"<BR>"); document.write("<I>Última Modificação: </I>"+ document.lastModified);//--></SCRIPT></BODY>
OBS1:document é uma objeto
OBS2:document.lastModified é uma propriedade do documento retorna a data (mm/dd/aa) e hora da última modificação do documento
![Page 12: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/12.jpg)
Exemplos de JavaScript:“Rodapé, v3”
<HTML><HEAD><TITLE>Página com nome do leitor</TITLE><SCRIPT language="JavaScript"><!--function Rodape(){ document.write("<HR><I>Autor:</I> Mariano Gomes Pimentel<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); }//--></SCRIPT></HEAD>
<BODY><P>Aqui escrevo qualquer coisa</P><SCRIPT language="JavaScript"> Rodape();</SCRIPT></BODY></HTML>
OBS:Rodape() é uma função (definida pelo programador) escreve o rodapé
![Page 13: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/13.jpg)
Exemplos de JavaScript:“Título e Rodapé, v1”
<HTML><HEAD><TITLE>Página com nome do leitor</TITLE><SCRIPT language="JavaScript"><!--function Titulo(){ document.write("<H1 align=center><I>Curso de JavaScript</I></H1>"); }
function Rodape(){ document.write("<HR><I>Autor: </I>Mariano Gomes Pimentel<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); }//--></SCRIPT></HEAD>
<BODY><SCRIPT>Titulo();</SCRIPT><P>Aqui escrevo qualquer coisa</P><SCRIPT>Rodape();</SCRIPT></BODY></HTML>
![Page 14: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/14.jpg)
Exemplos de JavaScript:“Título e Rodapé, v2”
function Titulo(){ document.write("<H1 align=center><I>Curso de JavaScript</I></H1>"); }
function Rodape(){ document.write("<HR><I>Autor: </I>Mariano Gomes Pimentel<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); }
geral.js
<HTML>
<HEAD><TITLE>1 - Introdução</TITLE><SCRIPT language="JavaScript" src="geral.js"></SCRIPT></HEAD>
<BODY><SCRIPT>Titulo();</SCRIPT><H2>Capítulo 1 - Introdução</H2><P>Blá blá blá...</P><SCRIPT>Rodape();</SCRIPT></BODY>
capitulo1.html<HTML>
<HEAD><TITLE>2 - Fundamentos</TITLE><SCRIPT language="JavaScript" src="geral.js"></SCRIPT></HEAD>
<BODY><SCRIPT>Titulo();</SCRIPT><H2>Capítulo 2 - Fundamentos</H2><P>Blá blá blá...</P><SCRIPT>Rodape();</SCRIPT></BODY>
capitulo2.html
![Page 15: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/15.jpg)
Onde escrever um JavaScript?
• Solução 1: Embutido na página HTML
– 1.1 - Como evento de um elemento (IMG, A, INPUT etc):• Maçã • Mestre-Cuca
– 1.2 - Como elemento SCRIPT dentro de BODY:• Olá• Rodapé, v1• Conteúdo Personalisado• Rodapé, v2
– 1.3 - Como função, dentro de HEAD• Rodapé, v3• Título e Rodapé, v1
• Solução 2: Num arquivo a ser importado• Título e Rodapé, v2
![Page 16: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/16.jpg)
• Conceitos de programação– Dados, Variáveis, Expressões e Operadores– Tomada de decisão, Repetição– Funções, Eventos, Objetos
• O que é preciso paraprogramar em JavaScript?
• Exercícios
Programando22
![Page 17: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/17.jpg)
Conceitos de Programação
JavaScript
linguagem de programação
processar informações
resolver um problema
Processar informações (ou seja, resolver um problema) exige um tipo de pensamento particular Lógica de Programação
![Page 18: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/18.jpg)
Conceitos de Programação
• Dado = informaçãoTipos de Dados: “Mariano” 75 1.57 true
• Variável armazena dadonome = “Mariano”Idade = 25
• Expressão e Operador opera dados
x = (y – 5) / 7 é diferente de x = y – 5 / 7
operadores
operadores precedência
string inteiro real(ponto-flutuante)
boleano(verdadeiro ou falso)
![Page 19: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/19.jpg)
Conceitos de Programação
• Tomada de decisão (é necessário testar: if)if (x<10) { alert(“x é menor que 10”); }else{ alert(“x é maior ou igual a 10”); }
• Repetiçãox = "";while (x != "fim"){ document.write(x); x = prompt("Entre com um texto HTML ('fim' para terminar):",""); }
![Page 20: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/20.jpg)
Conceitos de Programação
• Função bloco de programa; quebra do problema em partes!
function Par(x){ resto = x % 2; alert(resto); if (resto==0) {return true} else {return false}}
function Classifica(){ numero = prompt("Entre com um número:",""); if (Par(numero)) {alert("O número "+numero+" é par.");} else {alert("O número "+numero+" é impar.");}}
function Par(x){ return (x % 2)==0;}
![Page 21: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/21.jpg)
Conceitos de Programação
• Evento se alguma coisa acontece, então faça algo...
<FORM>
<INPUT type="button" value="Par ou Impar?" onClick="Classifica()"></FORM>
EVENTOO botão, ao se clicado,
chama a função Classifica()
![Page 22: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/22.jpg)
Conceitos de Programação
• Objetos elementos de uma página Web
– Propriedades (variáveis)document.title; (contém o título do documento)document.location; (contém a URL do documento)
– Métodos (funções)document.write("<B>Bom Dia!</B>");window.open("http://www.ibpinet.com.br", "IBPI");
![Page 23: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/23.jpg)
O que é preciso para programar em JavaScript?
• Saber programar
– Quebrar o problema em pedaços (funções)– Resolver os pedaços do problemas utilizando:
• dados, variáveis e operações • decisões + repetições
• Conhecer os eventos e saber utilizá-los
• Conhecer os objetos e saber utilizá-los
desenvolver aLógica de Programação !!!
Algoritmo
![Page 24: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/24.jpg)
O que é preciso para programar em JavaScript?
3 passos para desenvolver a Lógica de programação:
1 – Faça exercícios2 – Faça mais exercícios3 - Continue fazendo !
desenvolver aLógica de Programação !!!
![Page 25: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/25.jpg)
Exercícios
• Apostila, p 1.9 – 1.13 (Exercício Resolvido)
• Reutilizar (adaptando) o código de exemplos:http://www.geocities.com/ResearchTriangle/4084/js2.htm
![Page 26: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/26.jpg)
Eventos e Objetos33
• Eventos• Objetos
• Window• Location• History• Document• Form
• TextArea, Text, Password• Select
• Frame• Image
![Page 27: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/27.jpg)
Eventos
<BODY onLoad="alert('Página carregada.')" onUnLoad="alert('Vou sair da página...')"><P>Testando alguns eventos...</P><FORM><INPUT type="button" value="Não aperte este botão!" onClick="alert('Clique o botão Ok para formatar o HD')"></FORM></BODY>
<INPUT type="button" value= "Formatar o HD" onClick="confirm(‘Tem certeza?')">
![Page 28: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/28.jpg)
Eventos
A, IMG*A, IMGA, IMG*A, IMGA, IMGA, IMG, Botões,SELECT
Caixa de TextoCaixa de TextoCaixa de Texto
Ponteiro do mouse entraPonteiro do mouse se movimentaPonteiro do mouse saiBotão do mouse é apertadoBotão do mouse é desapertadoClique (MouseDown + MouseUp)
Tecla apertadaTecla desapertadaTecla “clicada” (KeyDown + KeyUp)
onMouseOveronMouseMoveonMouseOutonMouseDownonMouseUponClick
onKeyDownonKeyUponKeyPress
* Funciona somente no Internet Explorer
![Page 29: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/29.jpg)
Eventos
antes de enviar o formulárioantes de limpar o formulário
quando elemento recebe o foco quando elemento perde o foco
quando modifica-se texto ou seleção
após carregar uma página BODYantes de sair da página BODYquando a janela é redimensionadaquando a janela é arrastada
quando um erro ocorre ao carregarquando interrompe-se carregamento
onSubmitonReset
onFocusonBlur
onChange
onLoadonUnLoadonResizeonMove
onErroronAbort
FORMFORM
compts. de FORM, BODYcompts. de FORM, BODY
SELECT, TEXTAREA, INPUT:text, INPUT:passw.
BODYBODYBODYBODY
BODY, IMGIMG
![Page 30: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/30.jpg)
Objetos
Window
Frame
Document
Location
History Link
Image
Area
Anchor
Applet
Plugin
FormOption
TextArea
Text
Password
Radio
Select
Reset
Submit
FileUpload
Hidden
Button
![Page 31: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/31.jpg)
Window(exemplo)
<HTML><HEAD><SCRIPT language="JavaScript"><!--function AbrirJanela(){ window.open("http://www.ibpinet.com.br"); }//--></SCRIPT></HEAD>
<BODY><A href="javascript:AbrirJanela();">Abrir Janela</A></BODY></HTML>
![Page 32: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/32.jpg)
Window(exemplo)
window.open("http://www.ibpinet.com.br");
Cada chamada à função AbrirJanela(),irá abrir uma nova janela
window.open("http://www.ibpinet.com.br", "j1");
Nome da Janelamesmo com várias chamadas
à função AbrirJanela(), somente uma janela será aberta
window.open("http://www.ibpinet.com.br", "");
Nome não especificadoNetscape: Abre só 1 janela
Internet Explorer: Abre várias janelas
![Page 33: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/33.jpg)
Window(exemplo)
window.open("http://www.ibpinet.com.br","j1", "width=400,height=400,resizable=no");
Opções:
• width=número largura da janela• height=número altura da janela• left=número posição do canto esquerdo da janela• top=número posição do topo da janela
• resizable=yes|no permite o usuário redimensionar a janela • menubar=yes|no exibe a barra de menu• toolbar=yes|noexibe a barra de ferramentas• location=yes|no exibe a barra de endereço• directories=yes|no exibe a barra de ferramentas• status=yes|no exibe a barra de status• scrollbars=yes|no exibe as barras de rolamento
Obs.: Quando uma opção do tipo yes|no é apenas declarada, seu valor é yes. Caso contrário, seu valor é no. Ex.: "width=400, height=400, menubar, status“
![Page 34: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/34.jpg)
Window(exemplo)
function AbrirJanela(){ janela=window.open("","wndPropaganda","width=300,height=100"); janela.document.open(); janela.document.write("<DIV align=center><P>Você já conhece o curso IBPINET?</P>"); janela.document.write('<P><A href="http://www.ibpinet.com.br" target="_blank">');
janela.document.write("Quero Conhecer</A></P>"); janela.document.close(); janela.focus(); }
Abrir uma janela e escrever o conteúdo dinamicamente:
![Page 35: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/35.jpg)
Window(exemplo)
<HTML><HEAD></HEAD><BODY onBlur="window.focus()"><P><A href="javascript:window.close();">Fechar</A></P><FORM> <INPUT type="button" value="Fechar" onClick="window.close()"></FORM></BODY></HTML>
Abrir uma página “bloqueadora”:
<BODY><SCRIPT><!--window.open("ibpinet.html", "", "width=300,height=100");//--></SCRIPT></BODY> index.html
ibpinet.html
http://www.ibpinet.com.br/webdesigner/mariano/javascript/aula2/janelas.html
![Page 36: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/36.jpg)
Window(propriedades e métodos)
• Propriedades• frames[index] quadros filhos, indexados pela ordem de criação• frames.length número de quadros existentes• self janela atual• parent janela pai• top janela mais antiga• opener janela que a abriu
• Métodos• alert("texto") exibe caixa de diálogo para exibir um aviso• confirm("texto") exibe caixa de diálogo para exibir um aviso• prompt("texto","inicial") exibe caixa de diálogo para entrada de texto
• open("URL", "nome", "opções") cria janela cliente• close() fecha janela
http://www.uol.com.br/chicobuarque/construcao/menu_alfabetica1.htmhttp://www.gilbertogil.com.br
![Page 37: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/37.jpg)
Location(propriedades e métodos)
• Propriedades• href URL completo• protocol protocolo utilizado• host nome e port do host• hostname nome do host• port port do host• path diretório e arquivo (exclui protocolo e host)• hash URL após sinal #• search URL após sinal ?
• Métodos• toString() retorna uma string• assign("string") ajusta a localização• reload(true) recarrega a página atual incondicionalmente
![Page 38: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/38.jpg)
Location(exemplo)
<BODY><SCRIPT language="JavaScript"><!-- alert("Você está em "+ window.location.href); novoHREF=prompt("entre com um novo endereço:","http://"); window.location.href=novoHREF;//--></SCRIPT><BODY>
![Page 39: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/39.jpg)
History(propriedades e métodos)
• Propriedades• back penúltimo URL acessado• foward URL posterior da lista de URLs acessados• current URL da página atual• length tamanho da lista de histórico atual
• Métodos• back() volta uma posição no histórico• foward() avança uma posição no histórico• go(n) vai para o URL localizado em n posições em
relaçãoa posição atual (+n ou –n)
• go("string") vai para a página mais recente cujo título ou URLcontenha a string especificada. Obs.: o
sistemadiferencia maiúsculas e minúsculas.
• toString() retorna uma tabela HTML com ligações para todasas entradas da lista de diretório
Ex.: <A href="javascript:history.back()">Voltar</A>
![Page 40: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/40.jpg)
Exercício: “BarraNavegacao()”
Escrever a função BarraNavegacao() que insere imagens (através de document.write)para disponibilizar botões de navegação:
• back• forward• reload• home
Obs.: Esta função poderá ser utilizada na construção de um cabeçalho para todas as páginas de seu site
![Page 41: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/41.jpg)
Document(propriedades e métodos)
• Propriedades• title• location• lastModified
• Métodos• write("textoHTML") escreve uma linha de texto HTML• writeln("textoHTML") escreve e adiciona um avanço de linha• clear() limpa o texto do documento• close() fecha o documento
• bgColor• fgColor• linkColor• aLinkColor• vLinkColor
• form[index]• form.length• links[index]• links.length• anchors[index]• anchors.length
Ex.: window.document.write("<B>Olá</B>");window.document.bgColor="silver";
![Page 42: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/42.jpg)
Form(propriedades e métodos)
• Propriedades• elements Array. Vetor de elementos do formulário• elements.length Número de elementos do formulário• name conteúdo do atributo NAME• action conteúdo do atributo ACTION• encoding conteúdo do atributo ENCTYPE• method valor do atributo METHOD ("get"=0; "post"=1)• target janela alvo usada para resposta após
envio doformulário (atributo TARGET)
• Métodos• submit() envia o formulário
![Page 43: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/43.jpg)
<HTML><HEAD><SCRIPT language="JavaScript"><!--function Cadastrar(){ wndCadastro = window.open("","jc","width=300,height=80"); wndCadastro.document.open(); wndCadastro.document.write("<B>Nome: </B>"); wndCadastro.document.write(window.document.frmCadastro.txtNome.value); wndCadastro.document.write("<BR>"); wndCadastro.document.write("<B>Idade: </B>"); wndCadastro.document.write(window.document.forms[0].elements[1].value); wndCadastro.document.close(); wndCadastro.focus(); }//--></SCRIPT></HEAD>
<BODY><FORM name="frmCadastro"> Nome: <INPUT type=text size=35 name=txtNome><BR> Login: <INPUT type=text size=10 name=txtLogin></P> <INPUT type=button value="Cadastrar Dados" name="btnCadastrar" onClick="Cadastrar()"></FORM></BODY></HTML>
TextArea, Text, Password(exemplo)
elements[0]=Caixa de texto “txtNome”;elements[1]=Caixa de texto “txtLogin”;elements[2]=Botão “btnCadastrar”;
![Page 44: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/44.jpg)
<HTML><HEAD><SCRIPT language="JavaScript"><!--function Navegar(){ var x = document.frmSites.slcSites.selectedIndex; if (x==0){} if (x==1){document.location.href="http://www.ibpinet.com.br"} if (x==2){document.location.href="http://www.nce.ufrj.br/cursos/html"} if (x==3){document.location.href="http://www.ibpinet.com.br/webdesigner/mariano"}}//--></SCRIPT></HEAD>
<BODY><FORM name="frmSites"> <SELECT size="1" name="slcSites" onChange="Navegar()"> <OPTION>Sites:</OPTION> <OPTION>IBPINET</OPTION> <OPTION>HTML</OPTION> <OPTION>Mariano</OPTION> </SELECT></FORM></BODY></HTML>
Select(exemplo)
slcSites.options[0]=“Sites”;slcSites.options[1]=“IBPINET”;slcSites.options[2]=“HTML”;slcSites.options[3]=“Mariano”;
![Page 45: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/45.jpg)
...function Navegar(){ var x = document.frmSites.slcSites.selectedIndex; if (x==0){} if (x==1){parent.principal.document.location.href="http://www.ibpinet.com.br"} if (x==2){parent.frames[1].document.location.href="http://www.nce.ufrj.br/cursos/html"} if (x==3){window.parent.principal.document.location.href= "http://www.ibpinet.com.br/webdesigner/mariano"}}...
Frame(exemplo)
<HTML><HEAD><TITLE>Menu de Navegação</TITLE></HEAD><FRAMESET rows="50,*" frameborder=0 border=0> <FRAME name="menu" src="menu.html" scrolling="no"> <FRAME name="principal" src="branco.html"></FRAMESET></HTML>
menuframes.html
menu.html
![Page 46: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/46.jpg)
Exercícios
• Reutilizar (adaptando) códigos de:http://www.geocities.com/ResearchTriangle/4084/js2.htm
• Ler capítulos 5 a 10 da Apostila...e fazer os exercícios!!!
![Page 47: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/47.jpg)
Lógica de Programação44
• Variáveis• Tipos de Dados• Operadores• Tomada de Decisão (if...else)• Repetição (while e for)• Funções
• Exemplos e Exercícios
![Page 48: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/48.jpg)
Variáveis
• Variável armazena dado• nome="Mariano";• idade=25;
• nome="Mariano"; /*não precisa declarar nem tipar a variável*/
• var nome; /*declaração sem atribuição de valor*/
• var nome="Mariano"; /*declaração com atribuição de valor*/
• Identificador de variável• letras, números e "_" (underscore)• tem que começar com um letra• case sentive nome Nome NoMe
![Page 49: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/49.jpg)
Inteiro:»5»14509
Ponto-flutuante»14.075»1.78e-45
Tipos de Dados
• string (cadeia de letras)• “Mariano Gomes Pimentel”; • “Qualquer ‘texto’, inclusive, toda uma página HTML.”;• “123”
• number
TIP
O
REPR
ESEN
TA
ÇÃ
O
Indeterminado» NaN (Not a Number)
Infinito:» Infinity» -Infinity
VA
LOR
ES
ESPEC
IAIS
Decimal»734.25
Hexadecimal (Ex.: cores)»0xFF87C1
Octal»0677
![Page 50: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/50.jpg)
Tipos de Dados
• true• false
• undefinedvalor ainda não definidoEx.: var nome; /* nome=undefined */
• nullvalor nulo (inválido)
• object– objetos: documento, janela, componente de formulário etc.
boolean
![Page 51: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/51.jpg)
Operadores
• Aritméticos• * multiplicação• / divisão• + soma• - subtração• % resto
• String• + concatenação
x = 5 / 3;x = 5 % 3;x = 5 + (5 - 2) / 2;x = (5 + (5 – 2)) / 2;
nome = "Mariano";sobreNome = "Pimentel";meioNome = "Gomes";nomeCompleto = nome + " " + meioNome + " " + sobreNome;
![Page 52: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/52.jpg)
Operadores
• Atribuição• = (Ex.: x = 5)• op= (atribuição com operação)
• Incrementais• var++ ou ++var• var-- ou --var
x += y; x = x + y;x –= y; x = x – y;x /= y; x = x / y;x *= y; x = x * y;x %= y; x = x % y;
x = 5;y = ++x;/* x=6; y=6; */
x=5;y = x++;/* y=5; x=6; */
![Page 53: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/53.jpg)
Operadores
• Comparação• > maior• >= maior ou igual• < menor• <= menor ou igual• == igual• != diferente
if (x<10) {...}
if (senha!="12345") {alert("Senha inválida!");}
if (x==y) {...}
![Page 54: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/54.jpg)
Operadores
• Lógicos• && e• || ou• ! not
if ( (x<y) && (y<z) ) {alert(x +" é menor que " +z);}
if ( (x<z) || (y<z) ) {...}
if !(senha=="12345") {alert("Senha inválida!");}
![Page 55: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/55.jpg)
Tomada de Decisão
• if ... else
if (condição) { // instruções caso condição==true }else { // instruções caso condição==false }
![Page 56: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/56.jpg)
Repetição
• for (inicialização; condição; incremento){...}
• while (condição) {...}
for (i=1; i<=1000; i = i + 1) { document.write("<P>" + i + "</P>");}
i=1;while (i<=1000) { document.write("<P>" + i + "</P>"); i = i + 1;}
![Page 57: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/57.jpg)
Funções
• function NomeFuncao(param1, param2) {...}
function Soma(x, y) { return x + y;}
![Page 58: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/58.jpg)
Funções nativasp.3-2
parseInt(string) Converte a string num número inteiro texto="7"; x = parseInt(texto); x = numero + 5; //x==12 (7 + 5) texto = texto + 5; //texto=="75" ("7" +"5“) x = parseInt("7.5"); //x==7 x = parseInt("7a"); //x==7
Converte a string num número real x = parseFloat("7.5"); //x==7.5
Retorna true se a string não é número texto = prompt("Entre com um número:",""); if ( isNaN(texto) ) { alert("Você não digitou um número válido.") }
Executa o conteúdo de uma string resultado = eval(“5 + 6 / 2”); // resultado = 8
escape = ("João"); // nome = "Jo%E3o" unescape("Jo%E3o"); // nome = "João"
parseFloat(string)
eval(string)
isNaN(string)
escape(string)unescape(string)
![Page 59: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/59.jpg)
Exemplo: Antes de enviar o formulário, verificar se o campo ‘Nome’ foi preenchido
![Page 60: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/60.jpg)
Solução<HTML><HEAD><SCRIPT language="javascript"><!--function Enviar(){ if (window.document.Cadastro.nome.value==""){ alert("O campo 'Nome' precisa ser preenchido"); window.document.Cadastro.nome.focus(); } else{ alert("Os dados do formulário foram preenchidos corretamente"); //window.document.Cadastro.submit(); }}//--></SCRIPT></HEAD>
<BODY><FORM name="Cadastro" onSubmit="return false">Nome:<INPUT name="nome" type=text size=50><BR><INPUT type=button value="Enviar" onClick="Enviar()"></FORM></BODY>
</HTML>
![Page 61: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/61.jpg)
Exemplo: Fazer uma função para saber se um texto é ou não um número inteiro
• Verificar se o texto é um número• Verificar se este número é inteiro• Se ambas as condições forem verdadeiras, então retornar true caso contrário, retornar false.
Passos:
![Page 62: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/62.jpg)
<HTML><HEAD><SCRIPT language="javascript"><!--
function isInt(texto){ bValido=true; //testar se texto é um número if ( isNaN(texto) ) {bValido=false} else{ //testar se texto é um número inteiro if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false} } return bValido;}//--></SCRIPT></HEAD><BODY><SCRIPT language="javascript"><!--
numero = prompt("Digite um número inteiro:","");if ( isInt(numero) ) {alert("Ok, o número é inteiro")}else {alert("Você não digitou um número inteiro")}//--></SCRIPT></BODY></HTML>
Solução 1
![Page 63: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/63.jpg)
function isInt(texto){ if ( isNaN(texto) ) {return false} else{ return ( parseInt(texto)==parseFloat(texto) ) }}
Solução 2
function isInt(texto){ bValido=true; if ( isNaN(texto) ) {bValido=false} else{ if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false} } return bValido;}
![Page 64: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/64.jpg)
Exercício: Fazer um formulário que seja validado antes de ser enviado
Validar:preenchimento de Nomevalidade de Data
![Page 65: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/65.jpg)
Exercício: Fazer uma função para escrever um “produto” na página (passando como parâmetro a imagem do produto, o nome e o preço).
![Page 66: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/66.jpg)
Exercício: Fazer uma função para escrever uma “barra de navegação” para página anterior, posterior e inicial
Ex.: http://www.nce.ufrj.br/cursos/html
![Page 67: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/67.jpg)
Exercício: Fazer um site que indica em que seção o cliente se encontra (indicação no frame)
![Page 68: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/68.jpg)
Objetos Nativos55
• Math• String• Date• Array• Novos Objetos
![Page 69: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/69.jpg)
Mathp. 4-13
random() número pseudo-aleatório entre 0 e 1
min(a, b) min(5, 7) -> 5
max(a,b) max(5, 7) -> 7
abs(x) abs(-5.7) -> 5.7
floor(x) floor(5.7) -> 5
ceil(x) ceil(5.4) -> 6
round(x) round(5.7) -> 6; round(5.4) -> 5
Ex.:x = 1 + Math.floor(Math.random()*50);
// x recebe um número entre 1 e 50
![Page 70: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/70.jpg)
Stringp. 4-7
txt = "Mariano"
charAt(n) txt.charAt(2) "r"
indexOf("sub-string") txt.indexOf("a") 1txt.indexOf("n") 5txt.indexOf("k") -1
split("separdor") txt="20/02/1975";data = txt.split("/");
// data[0] = "20";// data[1] = "02";// data[2] = "1975";
*length; txt = "Mariano";x = txt.length; // x = 7
0 1 2 3 4 5 6
![Page 71: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/71.jpg)
Date p. 4-15
• dataHoje = new Date();
dataHoje.getDay(); //dia da semana (0 a 6)
dataHoje.getData(); //dia do mês (1 a 31)
dataHoje.getMonth();dataHoje.getYear();dataHoje.getHour();dataHoje.getMinutes();dataHoje.getSeconds();
![Page 72: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/72.jpg)
Arrayp. 4-10
• Armazena dados indexados
data = new Array(3);data[0] = 20;data[1] = 02;data[2] = 1975;
data = new Array(20,02,1975);
data = new Array(); //sem indexação prédefinidadata[0] = "20";data[2] = "1975";if (data[1]==null) {data[1]=prompt("Entre com o mês", "");}
txt = "20/02/1975";data = txt.split("/");data.length 3 // length é uma propriedade de Array
![Page 73: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/73.jpg)
produtos = "1:Porta retrato PHT:21.00;2:Abajur Róse:35.50; 34:Cesta lixo valise:5.99";
produtosArray = produtos.split(";");for (i=0; i < produtosArray.length; i++){ prod = produtosArray[i].split(":"); document.write(prod[0] + "<BR>"); document.write(prod[1] + "<BR>"); document.write(prod[2] + "<BR>");}
Array(continuação)
![Page 74: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/74.jpg)
Novos Objetosp. 4-2
function Produto(aCodigo, aNome, aPreco){ this.codigo = aCodigo; this.nome =aNome; this.preco = aPreco;}
...p1 = new Produto(1, “Porta retrato PHT”, 21.00);P2 = new Produto(2, “Abajur Róse”, 35.50);P3 = new Produto (34, “Cesta lixo valise”, 5.99);
...document.write(p1.nome);
![Page 75: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/75.jpg)
Cookies66document.cookie =
nomeCookie=texto_escape;expires=dataGMT;
Ex.:document.cookies = "cliente=Mariano; expires= Monday, 22-Feb-99 00:00:00 GMT"document.cookies = "RG=123456789"
alert(document.cookie); //cliente=Mariano; RG=123456789
dataMorte = new Date(05,12,31);document.cookies =
"nome="+escape("João Grandão")+"; expires="+dataMorte.toGMTString();
![Page 76: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/76.jpg)
Criando funções paraComércio-eletrônico com Cookies
function getConteudoCookie(nome){ cookies = document.cookie.split("; "); for (i=0; i<=cookies.length-1; i++){ cookies[i] = cookies[i].split("="); nomeCookie = unescape(cookies[i][0]); if (nomeCookie==nome) {return unescape(cookies[i][1])} } return "";}
![Page 77: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/77.jpg)
Criando funções paraComércio-eletrônico com Cookies
function CancelarCookie(nome){ diaHoje = new Date(); diaOntem = new Date( diaHoje.getTime() - 1000*60*60*24 ); diaOntemGMT = diaOntem.toGMTString(); document.cookie = nome+"=; expires=" + diaOntemGMT;}
function CancelarCompras(){ CancelarCookie("compras"); window.location.reload();}
![Page 78: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/78.jpg)
Criando funções paraComércio-eletrônico com Cookies
function Comprar(codigo,produto,fabricante,preco,quantidade){ if (!ehProdutoComprado(codigo)){ sacola=getConteudoCookie("compras"); if (sacola!=""){sacola+="*"} sacola+= codigo+"&"+produto+"&"+fabricante+"&"+
preco+"&"+quantidade; document.cookie = "compras="+escape(sacola); }}
21&Abajur&Modaluz&22.90&1*22&Castiçal&Modaluz&15.90&1
![Page 79: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/79.jpg)
Criando funções paraComércio-eletrônico com Cookies
function ehProdutoComprado(codigo){ sacola = getConteudoCookie("compras"); if (sacola=="") {return false} else{ produtos = sacola.split("*"); for (i=0; i<=produtos.length-1; i++){ produto=produtos[i].split("&"); if (produto[0]==codigo){return true} } return false } }
![Page 80: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/80.jpg)
Criando funções paraComércio-eletrônico com Cookies
function ExcluirProduto(codigo){ if (ehProdutoComprado(codigo)){ sacola=getConteudoCookie("compras"); produtos = sacola.split("*"); CancelarCookie("compras"); for (i=0; i<=produtos.length-1; i++){ produto=produtos[i].split("&"); if (produto[0]!=codigo)
{Comprar(produto[0],produto[1],produto[2],produto[3],produto[4])}
} window.location.reload(); }}
![Page 81: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/81.jpg)
Criando funções paraComércio-eletrônico com Cookies
function ListarCompras(){ sacola=getConteudoCookie("compras"); if (sacola!=""){ produtos=sacola.split("*"); for (i=0; i<=produtos.length-1; i++){ produto = produtos[i].split("&"); document.write("<P><B>Produto:</B>"+produto[1]+" - "+
produto[2]+"<BR>"); document.write("<B>Preço:</B>"+produto[3]+"<BR>"); document.write("<B>Quantidade:</B>"+produto[4]+"<BR>"); document.write("<A href='javascript:ExcluirProduto(""+
produto[0]+"")'>Excluir Produto</A></P>"); } }}
![Page 82: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/82.jpg)
Relógios
• id = setTimeout("funcao()", 1000);Cria um relógio (id) para chamar uma função após n milisegundos
• clearTimeout(id)Cancela o relógio
77
Obs: setTimeout() e clearTimeout() são funções nativas
![Page 83: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/83.jpg)
Exemplo
<HTML>
<HEAD></HEAD>
<BODY onLoad="Rolar()"><FORM name="frmMensagem"><DIV align=center><INPUT type="text" size=40 name="txtMensagem"><INPUT type="checkbox" checked name="chkRolar" onClick="Rolar()"></DIV></FORM></BODY>
</HTML>
![Page 84: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/84.jpg)
Exemplo<HEAD><SCRIPT language="javascript"><!--var relogio;var posicao=0;
function RolarMsg(){ msg=" Seja bem vindo à página do Mariano! "; msgMontada = msg+msg; msgMontada = msgMontada.substring(posicao, posicao+msg.length); window.document.frmMensagem.txtMensagem.value=msgMontada; posicao++; if (posicao==msg.length){posicao=0} relogio = setTimeout("RolarMsg()",100);}
function Rolar(){ if (window.document.frmMensagem.chkRolar.checked) {RolarMsg()} else {clearTimeout(relogio)}}//--></SCRIPT></HEAD>
![Page 85: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/85.jpg)
Java Applet’s(NÃO é JavaScript !) 88
<APPLET CODE="3dcube.class" WIDTH=90 HEIGHT=90> <PARAM name="background" value="FFFFFF"> <PARAM name="target" value=“_self"> <PARAM name="sleeptime" value="5"> <PARAM name="anglestep" value="1"> <PARAM name="image0" value="publico.jpg"> <PARAM name="image1" value="maritmo.jpg"> <PARAM name="image2" value="fabrica.jpg"> <PARAM name="image3" value="senhas.jpg"> <PARAM name="image4" value="enguico.jpg"> <PARAM name="image5" value="participa.jpg"> <PARAM name="url0" value="publico.htm"> <PARAM name="url1" value="maritmo.htm"> <PARAM name="url2" value="fabrica.htm"> <PARAM name="url3" value="senhas.htm"> <PARAM name="url4" value="enguico.htm"> <PARAM name="url5" value="participa.htm"></APPLET>
http://www.javaboutique.com
![Page 86: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/86.jpg)
Resumo
JavaScript é uma linguagem de programação
Lógica deProgramação
•Eventos•Objetos (propriedade e métodos)•Sintaxe (for, if...else, function, etc.)•Funções nativas•Objetos nativos (Date, Array etc.)
![Page 87: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/87.jpg)
Usuário 1 – Iniciante 2 – Bom
Programador 3 – Iniciante 4/5 – Intermediário 6 - Profissional
Em relação a JavaScript, você é:
Leigo (0)
0 – Não consegue copiar e colar código JavaScript1 - Consegue usar o código, mas não conseguir modificar parâmetros2 – Consegue modificar parâmetros, mas não “ler” o código3 – Consegue ler o código, mas não modificá-lo4 – Consegue adaptar o código (poucas coisas)5 – Desenvolver uma nova função6 – Desenvolver todo um novo programa
Auto-avaliação
![Page 88: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.](https://reader033.fdocumentos.com/reader033/viewer/2022052301/552fc105497959413d8c04c1/html5/thumbnails/88.jpg)
Avaliação
http://www.geocities.com/ResearchTriangle/4084/
A) tjs_banner1.htm Copiar e modificar parâmetros para mostrar novos banners (0 - 2)
B) tjs_resolucao2.htmAdaptar o código para redirecionar a página em funçãoda resolução do monitor (3 - 5)
C) Contar (mostrando) quanto tempo o cliente está na página. Se decorrido mais de um minuto, abrir janela “Ajuda”.
6 – Não adaptar código algum; somente consultar apostilas5 – Adaptar códigos (p. ex., ver timesp.htm)