Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.

Mariano Gomes Pimentelmariano@nce.ufrj.br

JavaScript

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

Introdução

• O que é JavaScript?• Para que serve JavaScript?• Exemplos de JavaScript• Onde escrever um JavaScript?

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

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

Exemplos de JavaScript:“Maçã”

maca1.gif maca2.gif maca3.gif maca4.gif maca5.gif

Exercício:“Mestre-Cuca”

olhos0.gif

olhos315.gif

olhos45.gifolhos135.gif

olhos90.gif

olhos180.gif

olhos225.gif

olhos270.gif

olhosani.gif

Exemplos de JavaScript:“Olá”

<HTML>

<BODY><P>Script que escreve "olá":</P><SCRIPT></SCRIPT></BODY>

Exemplos de JavaScript:“Rodapé, v1”

<BODY><SCRIPT language="JavaScript"></SCRIPT></BODY>

OBS1:nome é uma variável armazena uma informação

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

<HTML><HEAD><TITLE>Página com nome do leitor</TITLE><SCRIPT language="JavaScript"></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é

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>

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

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

• 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

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

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

• 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):",""); }

• 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;}

• Evento se alguma coisa acontece, então faça algo...

<FORM>

EVENTOO botão, ao se clicado,

chama a função Classifica()

• 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");

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

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

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

Eventos e Objetos33

• Eventos• Objetos

• Window• Location• History• Document• Form

• TextArea, Text, Password• Select

• Frame• Image

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>

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

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

Objetos

Window

Document

Location

History Link

Anchor

Applet

Plugin

FormOption

TextArea

Password

Select

Submit

FileUpload

Hidden

Button

Window(exemplo)

<BODY><A href="javascript:AbrirJanela();">Abrir Janela</A></BODY></HTML>

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

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

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“

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:

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></SCRIPT></BODY> index.html

ibpinet.html

http://www.ibpinet.com.br/webdesigner/mariano/javascript/aula2/janelas.html

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

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

Location(exemplo)

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>

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

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

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

<HTML><HEAD><SCRIPT language="JavaScript"></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”;

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

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

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

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

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

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

Indeterminado» NaN (Not a Number)

Infinito:» Infinity» -Infinity

Decimal»734.25

Hexadecimal (Ex.: cores)»0xFF87C1

Octal»0677

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

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;

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; */

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) {...}

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!");}

Tomada de Decisão

• if ... else

if (condição) { // instruções caso condição==true }else { // instruções caso condição==false }

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

Funções

• function NomeFuncao(param1, param2) {...}

function Soma(x, y) { return x + y;}

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)

Exemplo: Antes de enviar o formulário, verificar se o campo ‘Nome’ foi preenchido

Solução<HTML><HEAD><SCRIPT language="javascript"></SCRIPT></HEAD>

</HTML>

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:

<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

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

Exercício: Fazer um formulário que seja validado antes de ser enviado

Validar:preenchimento de Nomevalidade de Data

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

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

Exercício: Fazer um site que indica em que seção o cliente se encontra (indicação no frame)

Objetos Nativos55

• Math• String• Date• Array• Novos Objetos

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

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

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();

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

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)

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

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();

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();}

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

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(); }}

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>"); } }}

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

Obs: setTimeout() e clearTimeout() são funções nativas

Exemplo

<HTML>

</HTML>

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>

Java Applet’s(NÃO é JavaScript !) 88

http://www.javaboutique.com

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

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

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)

Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.

Documents

Transcript of Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript.

CDTC - Javascript

JavaScript TruquesMagicos

DOMinando JavaScript

JavaScript - Aula05

Algoritmos Javascript

Capítulo 10 - nce.ufrj.br

Linguagem JavaScript

Capítulo 1 - nce.ufrj.br

3317 Javascript

Javascript Manual

Aprenda JavaScript

Javascript Ref

Capítulo 3 - nce.ufrj.br

JavaScript - Aula03

JavaScript - abussador.files.wordpress.com · Usar JavaScript em conformidade com os Padrões Web implica, entre outras práticas, que, na ausência de um interpretador JavaScript,

jQuery - Javascript para quem não sabe Javascript

Entendendo de JavaScript

JavaScript - Aula07

Apostila JavaScript

Minicurso Javascript