Mariano Gomes Pimentel

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

Referências Websites interativos com JavaScript
Helder da Rocha – IBPINET HTML dinâmico (Parte III) Ramalho – Berkeley Netscape (documentação completa) Tony’s JavaScript (exemplos) HTML (para revisão)

1 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

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çã”
<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

Exercício: “Mestre-Cuca”
olhos90.gif olhos135.gif olhos45.gif olhos180.gif olhos0.gif olhosani.gif olhos225.gif olhos315.gif olhos270.gif

Exemplos de JavaScript: “Olá”
<HTML> <HEAD> <TITLE>Olá</TITLE> </HEAD> <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

Exemplos de JavaScript: “Conteúdo Personalizado”
<BODY> <SCRIPT language="JavaScript">  </SCRIPT> </BODY> 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

<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> Rodape(); </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">  </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”
geral.js 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); capitulo1.html capitulo2.html <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> <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>

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

2 Programando Conceitos de programação O que é preciso para
Dados, Variáveis, Expressões e Operadores Tomada de decisão, Repetição Funções, Eventos, Objetos O que é preciso para programar em JavaScript? Exercícios

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ção Tipos de Dados: “Mariano” true Variável  armazena dado nome = “Mariano” Idade = 25 Expressão e Operador  opera dados x = (y – 5) / é diferente de x = y – 5 / 7 string inteiro real (ponto-flutuante) boleano (verdadeiro ou falso) operadores operadores precedência

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ção x = ""; 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> <INPUT type="button" value="Par ou Impar?" onClick="Classifica()"> </FORM> EVENTO O 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(" "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 a Ló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ícios 2 – Faça mais exercícios 3 - Continue fazendo ! desenvolver a Lógica de Programação !!!

Exercícios Apostila, p 1.9 – 1.13 (Exercício Resolvido)
Reutilizar (adaptando) o código de exemplos:

3 Eventos e Objetos 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> <INPUT type="button" value= "Formatar o HD" onClick="confirm(‘Tem certeza?')">

Eventos Ponteiro do mouse entra Ponteiro do mouse se movimenta
onMouseOver onMouseMove onMouseOut onMouseDown onMouseUp onClick onKeyDown onKeyUp onKeyPress Ponteiro do mouse entra Ponteiro do mouse se movimenta Ponteiro do mouse sai Botão do mouse é apertado Botão do mouse é desapertado Clique (MouseDown + MouseUp) Tecla apertada Tecla desapertada Tecla “clicada” (KeyDown + KeyUp) A, IMG* A, IMG A, IMG, Botões, SELECT Caixa de Texto * Funciona somente no Internet Explorer

Eventos onSubmit onReset onFocus onBlur onChange onLoad onUnLoad
onResize onMove onError onAbort antes de enviar o formulário antes 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 BODY antes de sair da página BODY quando a janela é redimensionada quando a janela é arrastada quando um erro ocorre ao carregar quando interrompe-se carregamento FORM compts. de FORM, BODY SELECT, TEXTAREA, INPUT:text, INPUT:passw. BODY BODY, IMG IMG

Objetos TextArea Text Password Radio Select Reset Submit FileUpload
Hidden Button Frame Document Location History Link Image Area Anchor Applet Plugin Form Window Option

Window (exemplo) <HTML> <HEAD>
<SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <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(" "j1"); Nome da Janela mesmo com várias chamadas à função AbrirJanela(), somente uma janela será aberta window.open(" ""); Nome não especificado Netscape: 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 resizable=yes|no permite o usuário redimensionar a janela menubar=yes|no exibe a barra de menu toolbar=yes|no exibe 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“

Abrir uma janela e escrever o conteúdo dinamicamente:
Window (exemplo) Abrir uma janela e escrever o conteúdo dinamicamente: 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=" target="_blank">'); janela.document.write("Quero Conhecer</A></P>"); janela.document.close(); janela.focus(); }

Window (exemplo) Abrir uma página “bloqueadora”: ibpinet.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> ibpinet.html <BODY> <SCRIPT> </SCRIPT> </BODY> index.html

Window (propriedades e métodos)
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

Location (propriedades e métodos)
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) <BODY> <SCRIPT language="JavaScript">
 </SCRIPT>

History (propriedades e métodos)
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ção a posição atual (+n ou –n) go("string") vai para a página mais recente cujo título ou URL contenha a string especificada. Obs.: o sistema diferencia maiúsculas e minúsculas. toString() retorna uma tabela HTML com ligações para todas as 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)
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)
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 do formulário (atributo TARGET) Métodos submit() envia o formulário

TextArea, Text, Password (exemplo)
<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> elements[0]=Caixa de texto “txtNome”; elements[1]=Caixa de texto “txtLogin”; elements[2]=Botão “btnCadastrar”;

Select (exemplo) <HTML> <HEAD>
<SCRIPT language="JavaScript">  </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> slcSites.options[0]=“Sites”; slcSites.options[1]=“IBPINET”; slcSites.options[2]=“HTML”; slcSites.options[3]=“Mariano”;

Frame (exemplo) menuframes.html menu.html <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> menu.html ... function Navegar(){ var x = document.frmSites.slcSites.selectedIndex; if (x==0){} if (x==1){parent.principal.document.location.href=" if (x==2){parent.frames[1].document.location.href=" if (x==3){window.parent.principal.document.location.href= " }

Exercícios Reutilizar (adaptando) códigos de:
Ler capítulos 5 a 10 da Apostila... e fazer os exercícios!!!

4 Lógica de Programação 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 Identificador de variável
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

Tipos de Dados string (cadeia de letras) number TIPO
“Mariano Gomes Pimentel”; “Qualquer ‘texto’, inclusive, toda uma página HTML.”; “123” number Indeterminado NaN (Not a Number) Infinito: Infinity -Infinity VALORES ESPECIAIS Inteiro: 5 14509 Ponto-flutuante 14.075 1.78e-45 TIPO Decimal 734.25 Hexadecimal (Ex.: cores) 0xFF87C1 Octal 0677 REPRESENTAÇÃO

Tipos de Dados true false boolean undefined null object
valor ainda não definido Ex.: var nome; /* nome=undefined */ null valor nulo (inválido) object objetos: documento, janela, componente de formulário etc. boolean

Operadores Aritméticos String * 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 Incrementais = (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 nativas p.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) isNaN(string) eval(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> <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>

Exemplo: Fazer uma função para saber se um texto é ou não um número inteiro
Passos: 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.

Solução 1 function isInt(texto){ bValido=true;
<HTML> <HEAD> <SCRIPT language="javascript"> </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")} </BODY></HTML>

Solução 2 function isInt(texto){ if ( isNaN(texto) ) {return false}
else{ return ( parseInt(texto)==parseFloat(texto) ) } } 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 Nome validade 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.:

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

Objetos Nativos 5 Math String Date Array Novos Objetos

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

String p. 4-7 txt = "Mariano" charAt(n) txt.charAt(2)  "r"
indexOf("sub-string") txt.indexOf("a")  1 txt.indexOf("n")  5 txt.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

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

Array p. 4-10 Armazena dados indexados data = new Array(3);
data = new Array(); //sem indexação prédefinida data[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

Array (continuação) 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>"); }

Novos Objetos p. 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);

6 Cookies document.cookie = nomeCookie=texto_escape; expires=dataGMT;
document.cookies = "cliente=Mariano; expires= Monday, 22-Feb-99 00:00:00 GMT" document.cookies = "RG= " alert(document.cookie); //cliente=Mariano; RG= dataMorte = new Date(05,12,31); document.cookies = "nome="+escape("João Grandão")+ "; expires="+dataMorte.toGMTString();

Criando funções para Comé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 "";

function CancelarCookie(nome){ diaHoje = new Date(); diaOntem = new Date( diaHoje.getTime() *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>"); }

7 Relógios id = setTimeout("funcao()", 1000); clearTimeout(id)
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> <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>

Exemplo <HEAD> <SCRIPT language="javascript">  </SCRIPT> </HEAD>

Java Applet’s (NÃO é JavaScript !)
8 <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>

Resumo JavaScript é uma linguagem de programação Lógica de Programação
Eventos Objetos (propriedade e métodos) Sintaxe (for, if...else, function, etc.) Funções nativas Objetos nativos (Date, Array etc.) Lógica de Programação

Auto-avaliação 0 – Não consegue copiar e colar código JavaScript
1 - Consegue usar o código, mas não conseguir modificar parâmetros 2 – Consegue modificar parâmetros, mas não “ler” o código 3 – Consegue ler o código, mas não modificá-lo 4 – Consegue adaptar o código (poucas coisas) 5 – Desenvolver uma nova função 6 – Desenvolver todo um novo programa Leigo (0) Usuário 1 – Iniciante 2 – Bom Em relação a JavaScript, você é: Programador 3 – Iniciante 4/5 – Intermediário 6 - Profissional

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.htm Adaptar o código para redirecionar a página em função da 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 apostilas 5 – Adaptar códigos (p. ex., ver timesp.htm)

Mariano Gomes Pimentel

Apresentações semelhantes

Apresentação em tema: "Mariano Gomes Pimentel"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Mariano Gomes Pimentel

Apresentações semelhantes

Apresentação em tema: "Mariano Gomes Pimentel"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback