javascript50.ppt
TRANSCRIPT
-
7/13/2019 JavaScript50.ppt
1/88
Emanuel Barbosa [email protected]
JavaScript
-
7/13/2019 JavaScript50.ppt
2/88
Referncias
Websites interativos com JavaScriptHelder da Rocha IBPINET
HTML dinmico (Parte III)Ramalho Berkeley
Netscape (documentao 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
Tonys JavaScript (exemplos)http://www.geocities.com/ResearchTriangle/4084/js2.htm
HTML (para reviso)http://www.nce.ufrj.br/cursos/html
-
7/13/2019 JavaScript50.ppt
3/88
Introduo
O que JavaScript? Para que serve JavaScript? Exemplos de JavaScript
Onde escrever um JavaScript?
1
-
7/13/2019 JavaScript50.ppt
4/88
O que JavaScript?
uma linguagem de programao Desenvolvida pela Netscape
Microsofttem o VBScript no tanto utilizado quantoo JavaScript
JavaScript tambm roda no Microsoft Internet Explorer
O cdigo escrito dentro da pgina HTML(client-server)
Simples e til (para fazer coisas simples)
Obs.: JavaScript NO Java Java entra nas pginas HTML atravs de applets
JavaScript escrito dentro da pgina HTML
http://www.geocities.com/ResearchTriangle/4084/js2.htm
-
7/13/2019 JavaScript50.ppt
5/88
Para que serve JavaScript?
Efeitos visuais Efeitos interativos Gerao dinmica de contedo (on-the-fly)
Adequaes para a resoluo do monitor
Padronizao da apresentao Armazenamento de informaes (cookies) Personalizao do contedo
Manipular objetos de interface Janelas, Barra de status, Formulrios etc.
Operaes matemticas e textuais Validao de dados de um formulrio Animaes
DHTML
-
7/13/2019 JavaScript50.ppt
6/88
Exemplos de JavaScript:Ma
maca1.gif maca2.gif maca3.gif maca4.gif maca5.gif
-
7/13/2019 JavaScript50.ppt
7/88
Exerccio:Mestre-Cuca
olhos0.gif
olhos315.gif
olhos45.gifolhos135.gif
olhos90.gif
olhos180.gif
olhos225.gif
olhos270.gif
olhosani.gif
-
7/13/2019 JavaScript50.ppt
8/88
Exemplos de JavaScript:Ol
Ol
Script que escreve "ol":
-
7/13/2019 JavaScript50.ppt
9/88
Exemplos de JavaScript:Rodap, v1
OBS1:nome uma varivel armazena uma informao
-
7/13/2019 JavaScript50.ppt
10/88
OBS1:prompt uma funo faz alguma coisa:
- Abre uma janela de dilogo para o usurio entrar com um texto- Retorna o texto digitado pelo usurio
OBS2:Seja bem vindo"+nome+" !!!" uma expresso soma textos
Exemplos de JavaScript:Contedo Personalizado
-
7/13/2019 JavaScript50.ppt
11/88
Exemplos de JavaScript:Rodap, v2
OBS1:document uma objeto
OBS2:
document.lastModified umapropriedadedo documento retornaa data (mm/dd/aa) e hora da ltima modificao do documento
-
7/13/2019 JavaScript50.ppt
12/88
Exemplos de JavaScript:Rodap, v3
Pgina com nome do leitor
Aqui escrevo qualquer coisa
Rodape();
OBS:Rodape() uma funo(definida pelo programador) escreve o rodap
-
7/13/2019 JavaScript50.ppt
13/88
Exemplos de JavaScript:Ttulo e Rodap, v1
Pgina com nome do leitor
Titulo();
Aqui escrevo qualquer coisa
Rodape(); -
7/13/2019 JavaScript50.ppt
14/88
Exemplos de JavaScript:Ttulo e Rodap, v2
function Titulo(){document.write("Curso de JavaScript");}
function Rodape(){document.write("Autor: Mariano Gomes Pimentel
");document.write("ltima Modificao: "+document.lastModified);}geral.js
1 - Introduo
Titulo();Captulo 1 - Introduo
Bl bl bl...
Rodape();
capitulo1.html
2 - Fundamentos
Titulo();Captulo 2 - Fundamentos
Bl bl bl...
Rodape();
capitulo2.html
-
7/13/2019 JavaScript50.ppt
15/88
Onde escrever um JavaScript?
Soluo 1: Embutido na pgina 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 Contedo Personalisado Rodap, v2
1.3 - Como funo, dentro de HEAD Rodap, v3 Ttulo e Rodap, v1
Soluo 2: Num arquivo a ser importado
Ttulo e Rodap, v2
-
7/13/2019 JavaScript50.ppt
16/88
Conceitos de programao Dados, Variveis, Expresses e Operadores Tomada de deciso, Repetio Funes, Eventos, Objetos
O que preciso paraprogramar em JavaScript?
Exerccios
Programando2
-
7/13/2019 JavaScript50.ppt
17/88
Conceitos de Programao
JavaScript
linguagem de programao
processar informaes
resolver um problema
Processar informaes (ou seja, resolver um problema) exige umtipo de pensamento particular Lgica de Programao
-
7/13/2019 JavaScript50.ppt
18/88
Conceitos de Programao
Dado = informaoTipos de Dados: Mariano 75 1.57 true
Varivel armazena dadonome = MarianoIdade = 25
Expresso e Operador opera dados
x = (y 5) / 7 diferente de x = y 5 / 7
operadores
operadores precedncia
string inteiro real(ponto-flutuante)
boleano(verdadeiro
ou falso)
-
7/13/2019 JavaScript50.ppt
19/88
Conceitos de Programao
Tomada de deciso ( necessrio testar: if)if (x
-
7/13/2019 JavaScript50.ppt
20/88
Conceitos de Programao
Funo 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 nmero:","");if (Par(numero)) {alert("O nmero "+numero+" par.");}else {alert("O nmero "+numero+" impar.");}
}
function Par(x){
return (x % 2)==0;}
-
7/13/2019 JavaScript50.ppt
21/88
Conceitos de Programao
Evento se alguma coisa acontece,ento faa algo...
EVENTO
O boto, ao se clicado,chama a funo Classifica()
-
7/13/2019 JavaScript50.ppt
22/88
Conceitos de Programao
Objetos elementos de uma pgina Web
Propriedades (variveis)document.title; (contm o ttulo do documento)
document.location; (contm a URL do documento)
Mtodos (funes)document.write("Bom Dia!");
window.open("http://www.ibpinet.com.br", "IBPI");
-
7/13/2019 JavaScript50.ppt
23/88
O que preciso para programarem JavaScript?
Saber programar
Quebrar o problema em pedaos (funes) Resolver os pedaos do problemas utilizando:
dados, variveis e operaes decises + repeties
Conhecer os eventos e saber utiliz-los
Conhecer os objetos e saber utiliz-los
desenvolver aLgica de Programao !!!
Algoritmo
-
7/13/2019 JavaScript50.ppt
24/88
O que preciso para programarem JavaScript?
3 passos para desenvolver aLgica de programao:
1 Faa exerccios2 Faa mais exerccios3 - Continue fazendo !
desenvolver aLgica de Programao !!!
-
7/13/2019 JavaScript50.ppt
25/88
Exerccios
Apostila, p 1.9 1.13 (Exerccio Resolvido)
Reutilizar (adaptando) o cdigo de exemplos:http://www.geocities.com/ResearchTriangle/4084/js2.htm
-
7/13/2019 JavaScript50.ppt
26/88
Eventos e Objetos3
Eventos
Objetos Window Location History Document
Form TextArea, Text, Password Select
Frame Image
-
7/13/2019 JavaScript50.ppt
27/88
Eventos
Testando alguns eventos...
-
7/13/2019 JavaScript50.ppt
28/88
Eventos
A, IMG*A, IMGA, IMG*A, IMGA, IMG
A, IMG, Botes,SELECT
Caixa de TextoCaixa de Texto
Caixa de Texto
Ponteiro do mouse entraPonteiro do mouse se movimenta
Ponteiro do mouse sai
Boto do mouse apertado
Boto do mouse desapertado
Clique (MouseDown + MouseUp)
Tecla apertada
Tecla desapertada
Tecla clicada (KeyDown + KeyUp)
onMouseOveronMouseMoveonMouseOutonMouseDownonMouseUp
onClick
onKeyDownonKeyUp
onKeyPress
* Funciona somente no Internet Explorer
-
7/13/2019 JavaScript50.ppt
29/88
Eventos
antes de enviar o formulrioantes de limpar o formulrio
quando elemento recebe o foco
quando elemento perde o foco
quando modifica-se texto ou seleo
aps carregar uma pgina BODY
antes de sair da pgina BODY
quando a janela redimensionadaquando a janela arrastada
quando um erro ocorre ao carregar
quando interrompe-se carregamento
onSubmitonReset
onFocusonBlur
onChange
onLoadonUnLoad
onResizeonMove
onErroronAbort
FORMFORM
compts. de FORM, BODYcompts. de FORM, BODY
SELECT, TEXTAREA,INPUT:text, INPUT:passw.
BODYBODY
BODYBODY
BODY, IMGIMG
-
7/13/2019 JavaScript50.ppt
30/88
Objetos
Window
Frame
Document
Location
History Link
Image
Area
Anchor
Applet
Plugin
FormOption
TextArea
Text
Password
Radio
Select
Reset
Submit
FileUpload
Hidden
Button
-
7/13/2019 JavaScript50.ppt
31/88
Window(exemplo)
Abrir Janela
d
-
7/13/2019 JavaScript50.ppt
32/88
Window(exemplo)
window.open("http://www.ibpinet.com.br");Cada chamada funo AbrirJanela(),
ir abrir uma nova janela
window.open("http://www.ibpinet.com.br", "j1");
Nome da Janelamesmo com vrias chamadas
funo AbrirJanela(),somente uma janela ser aberta
window.open("http://www.ibpinet.com.br", "");
Nome no especificadoNetscape: Abre s 1 janela
Internet Explorer: Abre vrias janelas
d
-
7/13/2019 JavaScript50.ppt
33/88
Window(exemplo)
window.open("http://www.ibpinet.com.br","j1","width=400,height=400,resizable=no");
Opes:
width=nmero largura da janela height=nmero altura da janela left=nmero posio do canto esquerdo da janela top=nmero posio do topo da janela
resizable=yes|no permite o usurio 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 endereo 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 opo do tipo yes|no apenas declarada, seu valor yes.
Caso contrrio, seu valor no. Ex.: "width=400, height=400, menubar, status
Wi d
-
7/13/2019 JavaScript50.ppt
34/88
Window(exemplo)
function AbrirJanela(){janela=window.open("","wndPropaganda","width=300,height=100");janela.document.open();
janela.document.write("
Voc j conhece o curso IBPINET?
");janela.document.write('');janela.document.write("Quero Conhecer
");janela.document.close();janela.focus();}Abrir uma janela e escrever o contedo dinamicamente:
Wi d
-
7/13/2019 JavaScript50.ppt
35/88
Window(exemplo)
Fechar
Abrir uma pgina bloqueadora:
index.html
ibpinet.html
http://www.ibpinet.com.br/webdesigner/mariano/javascript/aula2/janelas.html
Wi d
-
7/13/2019 JavaScript50.ppt
36/88
Window(propriedades e mtodos)
Propriedades frames[index] quadros filhos, indexados pela ordem de criao frames.length nmero de quadros existentes self janela atual parent janela pai
top janela mais antiga opener janela que a abriu
Mtodos alert("texto") exibe caixa de dilogo para exibir um aviso
confirm("texto") exibe caixa de dilogo para exibir um aviso prompt("texto","inicial") exibe caixa de dilogo para entrada de texto
open("URL", "nome", "opes") cria janela cliente close() fecha janela
http://www.uol.com.br/chicobuarque/construcao/menu_alfabetica1.htmhttp://www.gilbertogil.com.br
L ti
-
7/13/2019 JavaScript50.ppt
37/88
Location(propriedades e mtodos)
Propriedades href URL completo protocol protocolo utilizado host nomeeportdo host hostname nomedo host
port port do host path diretrio e arquivo (exclui protocolo e host) hash URL aps sinal # search URL aps sinal ?
Mtodos toString() retorna uma string assign("string") ajusta a localizao reload(true) recarrega a pgina atual incondicionalmente
L ti
-
7/13/2019 JavaScript50.ppt
38/88
Location(exemplo)
Hi t
-
7/13/2019 JavaScript50.ppt
39/88
History(propriedades e mtodos)
Propriedades back penltimo URL acessado foward URL posterior da lista de URLs acessados current URL da pgina atual length tamanho da lista de histrico atual
Mtodos back() volta uma posio no histrico foward() avana uma posio no histrico go(n) vai para o URL localizado em n posies em relao
a posio atual (+n ou n)
go("string") vai para a pgina mais recente cujo ttulo ou URLcontenha a string especificada. Obs.: o sistemadiferencia maisculas e minsculas.
toString() retorna uma tabela HTML com ligaes para todasas entradas da lista de diretrio
Ex.: Voltar
-
7/13/2019 JavaScript50.ppt
40/88
Exerccio: BarraNavegacao()
Escrever a funo BarraNavegacao()que insere imagens (atravs de document.write)para disponibilizar botes de navegao:
back forward
reload home
Obs.: Esta funo poder ser utilizada na construo de um cabealho paratodas as pginas de seu site
D t
-
7/13/2019 JavaScript50.ppt
41/88
Document(propriedades e mtodos)
Propriedades title location lastModified
Mtodos write("textoHTML") escreve uma linha de texto HTML writeln("textoHTML") escreve e adiciona um avano 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("Ol");window.document.bgColor="silver";
F
-
7/13/2019 JavaScript50.ppt
42/88
Form(propriedades e mtodos)
Propriedades elements Array. Vetor de elementos do formulrio elements.length Nmero de elementos do formulrio name contedo do atributo NAME action contedo do atributoACTION
encoding contedo do atributo ENCTYPE method valor do atributo METHOD ("get"=0; "post"=1) target janela alvo usada para resposta aps envio do
formulrio (atributo TARGET)
Mtodos submit() envia o formulrio
T tA T t P d
-
7/13/2019 JavaScript50.ppt
43/88
Nome:
Login:TextArea, Text, Password(exemplo)
elements[0]=Caixa de texto txtNome;elements[1]=Caixa de texto txtLogin;elements[2]=Boto btnCadastrar;
Select
-
7/13/2019 JavaScript50.ppt
44/88
Sites:IBPINETHTMLMariano
Select(exemplo)
slcSites.options[0]=Sites;slcSites.options[1]=IBPINET;slcSites.options[2]=HTML;slcSites.options[3]=Mariano;
Frame
-
7/13/2019 JavaScript50.ppt
45/88
...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)
Menu de Navegao
menuframes.html
menu.html
-
7/13/2019 JavaScript50.ppt
46/88
Exerccios
Reutilizar (adaptando) cdigos de:http://www.geocities.com/ResearchTriangle/4084/js2.htm
Ler captulos 5 a 10 da Apostila...
e fazer os exerccios!!!
-
7/13/2019 JavaScript50.ppt
47/88
Lgica de Programao4
Variveis
Tipos de Dados Operadores Tomada de Deciso (if...else) Repetio (while efor)
Funes
Exemplos e Exerccios
-
7/13/2019 JavaScript50.ppt
48/88
Variveis
Varivel armazena dado nome="Mariano"; idade=25;
nome="Mariano"; /*no precisa declarar nem tipara varivel*/ var nome; /*declarao sem atribuio de valor*/ var nome="Mariano"; /*declarao com atribuio de valor*/
Identificador de varivel letras, nmeros e "_" (underscore) tem que comear com um letra case sentive nome Nome NoMe
-
7/13/2019 JavaScript50.ppt
49/88
Inteiro:5
14509Ponto-flutuante
14.0751.78e-45
Tipos de Dados
string (cadeia de letras) Mariano Gomes Pimentel;
Qualquer texto, inclusive, toda uma pgina HTML.; 123
number
TIP
O
REPRESENTAO
Indeterminado NaN (Not a Number) Infinito:
Infinity -Infinity
VALORES
ESPECIAIS
Decimal734.25
Hexadecimal (Ex.: cores)0xFF87C1
Octal0677
-
7/13/2019 JavaScript50.ppt
50/88
Tipos de Dados
true false
undefinedvalor ainda no definidoEx.: var nome; /* nome=undefined */
null
valor nulo (invlido)
object objetos: documento, janela, componente de formulrio etc.
boolean
-
7/13/2019 JavaScript50.ppt
51/88
Operadores
Aritmticos * multiplicao/ diviso + soma
- subtrao % resto
String
+ concatenao
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;
-
7/13/2019 JavaScript50.ppt
52/88
Operadores
Atribuio = (Ex.: x = 5) op= (atribuio com operao)
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; */
-
7/13/2019 JavaScript50.ppt
53/88
Operadores
Comparao > maior >= maior ou igual < menor
-
7/13/2019 JavaScript50.ppt
54/88
Operadores
Lgicos && e || ou ! not
if ( (x
-
7/13/2019 JavaScript50.ppt
55/88
Tomada de Deciso
if ... elseif (condio) {
// instrues caso condio==true}
else {// instrues caso condio==false}
-
7/13/2019 JavaScript50.ppt
56/88
Repetio
for (inicializao; condio; incremento){...}
while (condio) {...}
for (i=1; i
-
7/13/2019 JavaScript50.ppt
57/88
Funes
function NomeFuncao(param1, param2) {...}
function Soma(x, y) {return x + y;
}
Funes nativas
-
7/13/2019 JavaScript50.ppt
58/88
Funes nativasp.3-2
parseInt(string) Converte a stringnum nmero inteirotexto="7";x = parseInt(texto);x = numero + 5; //x==12 (7 + 5)texto = texto + 5; //texto=="75" ("7" +"5)x = parseInt("7.5"); //x==7x = parseInt("7a"); //x==7
Converte a stringnum nmero realx = parseFloat("7.5"); //x==7.5
Retorna truese a stringno nmerotexto = prompt("Entre com um nmero:","");if ( isNaN(texto) ) {
alert("Voc no digitou um nmero vlido.")}
Executa o contedo de uma stringresultado = eval(5 + 6 / 2); // resultado = 8
escape = ("Joo"); // nome = "Jo%E3o"unescape("Jo%E3o"); // nome = "Joo"
parseFloat(string)
eval(string)
isNaN(string)
escape(string)
unescape(string)
Exemplo: d f l f
-
7/13/2019 JavaScript50.ppt
59/88
Exemplo:Antes de enviar o formulrio, verificar se ocampo Nome foi preenchido
S l
-
7/13/2019 JavaScript50.ppt
60/88
Soluo
Nome:
Exemplo: Fazer uma funo para saber se um
-
7/13/2019 JavaScript50.ppt
61/88
Exemplo: Fazer uma funo para saber se umtexto ou no um nmero inteiro
Verificar se o texto um nmero Verificar se este nmero inteiro Se ambas as condies forem verdadeiras,
ento retornar truecaso contrrio, retornar false.
Passos:
S l 1
-
7/13/2019 JavaScript50.ppt
62/88
Soluo 1
S l 2
-
7/13/2019 JavaScript50.ppt
63/88
function isInt(texto){if ( isNaN(texto) ) {return false}else{ return ( parseInt(texto)==parseFloat(texto) ) }
}
Soluo 2
function isInt(texto){bValido=true;if ( isNaN(texto) ) {bValido=false}else{
if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false}}
return bValido;}
Exerccio: Fazer um formulrio que seja
-
7/13/2019 JavaScript50.ppt
64/88
Exerccio: Fazer um formulrio que sejavalidado antes de ser enviado
Validar:
preenchimento de Nome
validade de Data
Exerccio: Fazer uma funo para escrever um
-
7/13/2019 JavaScript50.ppt
65/88
Exerccio:produto na pgina (passando como parmetro aimagem do produto, o nome e o preo).
Exerccio: Fazer uma funo para escrever
-
7/13/2019 JavaScript50.ppt
66/88
Exerccio:uma barra de navegao para pgina anterior,posterior e inicial
Ex.: http://www.nce.ufrj.br/cursos/html
Exerccio: Fazer um site que indica em que
-
7/13/2019 JavaScript50.ppt
67/88
Exerccio: Fazer um siteque indica em queseo o cliente se encontra (indicao no frame)
Objetos Nativos
-
7/13/2019 JavaScript50.ppt
68/88
Objetos Nativos5
Math
String Date Array Novos Objetos
Math
-
7/13/2019 JavaScript50.ppt
69/88
Mathp. 4-13
random() nmero pseudo-aleatrio entre 0 e 1min(a, b) min(5, 7) -> 5max(a,b) max(5, 7) -> 7abs(x) abs(-5.7) -> 5.7
floor(x) floor(5.7) -> 5ceil(x) ceil(5.4) -> 6round(x) round(5.7) -> 6; round(5.4) -> 5
Ex.:x = 1 + Math.floor(Math.random()*50);
// x recebe um nmero entre 1 e 50
String
-
7/13/2019 JavaScript50.ppt
70/88
Stringp. 4-7
txt = "Mariano"
charAt(n) txt.charAt(2) "r"
indexOf("sub-string") txt.indexOf("a") 1
txt.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
-
7/13/2019 JavaScript50.ppt
71/88
Datep. 4-15
dataHoje = new Date();
dataHoje.getDay(); //dia da semana (0 a 6)dataHoje.getData(); //dia do ms (1 a 31)
dataHoje.getMonth();dataHoje.getYear();dataHoje.getHour();
dataHoje.getMinutes();dataHoje.getSeconds();
Array
-
7/13/2019 JavaScript50.ppt
72/88
Arrayp. 4-10
Armazena dados indexadosdata = new Array(3);data[0] = 20;data[1] = 02;data[2] = 1975;
data = new Array(20,02,1975);
data = new Array(); //sem indexao prdefinidadata[0] = "20";
data[2] = "1975";if (data[1]==null) {data[1]=prompt("Entre com o ms", "");}
txt = "20/02/1975";data = txt.split("/");
data.length 3 // length uma propriedade de Array
Array
-
7/13/2019 JavaScript50.ppt
73/88
produtos = "1:Porta retrato PHT:21.00;2:Abajur Rse: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] + "
");document.write(prod[1] + "
");document.write(prod[2] + "
");}
Array(continuao)
Novos Objetos
-
7/13/2019 JavaScript50.ppt
74/88
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 Rse, 35.50);P3 = new Produto (34, Cesta lixo valise, 5.99);
...
document.write(p1.nome);
Cookies
-
7/13/2019 JavaScript50.ppt
75/88
Cookies6
document.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("Joo Grando")+"; expires="+dataMorte.toGMTString();
Criando funes para
-
7/13/2019 JavaScript50.ppt
76/88
pComrcio-eletrnicocom Cookies
function getConteudoCookie(nome){cookies = document.cookie.split("; ");for (i=0; i
-
7/13/2019 JavaScript50.ppt
77/88
pComrcio-eletrnicocom 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();
}
Criando funes para
-
7/13/2019 JavaScript50.ppt
78/88
Comrcio-eletrnicocom 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&Castial&Modaluz&15.90&1
Criando funes para
-
7/13/2019 JavaScript50.ppt
79/88
Comrcio-eletrnicocom Cookies
function ehProdutoComprado(codigo){sacola = getConteudoCookie("compras");if (sacola=="") {return false}else{
produtos = sacola.split("*");
for (i=0; i
-
7/13/2019 JavaScript50.ppt
80/88
Comrcio-eletrnicocom Cookies
function ExcluirProduto(codigo){if (ehProdutoComprado(codigo)){sacola=getConteudoCookie("compras");produtos = sacola.split("*");CancelarCookie("compras");
for (i=0; i
-
7/13/2019 JavaScript50.ppt
81/88
Comrcio-eletrnicocom Cookies
function ListarCompras(){sacola=getConteudoCookie("compras");if (sacola!=""){
produtos=sacola.split("*");for (i=0; i
-
7/13/2019 JavaScript50.ppt
82/88
Relgios
id = setTimeout("funcao()", 1000);Cria um relgio (id)para chamar uma funo aps n milisegundos
clearTimeout(id)Cancela o relgio
7
Obs: setTimeout() e clearTimeout() so funes nativas
Exemplo
-
7/13/2019 JavaScript50.ppt
83/88
Exemplo
Exemplo
-
7/13/2019 JavaScript50.ppt
84/88
Exemplo
Java Applets
-
7/13/2019 JavaScript50.ppt
85/88
pp (NO JavaScript !)
8
-
7/13/2019 JavaScript50.ppt
86/88
Resumo
JavaScript uma linguagem de programao
Lgica deProgramao
Eventos
Objetos (propriedade e mtodos)
Sintaxe (for, if...else, function, etc.)
Funes nativas
Objetos nativos (Date, Array etc.)
Auto-avaliao
-
7/13/2019 JavaScript50.ppt
87/88
Usurio1 Iniciante
2 Bom
Programador3 Iniciante4/5 Intermedirio6 - Profissional
Em relao a JavaScript, voc :
Leigo (0)
0 No consegue copiar e colar cdigo JavaScript
1 - Consegue usar o cdigo, mas no conseguir modificar parmetros2 Consegue modificar parmetros, mas no ler o cdigo3 Consegue ler o cdigo, mas no modific-lo4 Consegue adaptar o cdigo (poucas coisas)5 Desenvolver uma nova funo6 Desenvolver todo um novo programa
Auto avaliao
Avaliao
-
7/13/2019 JavaScript50.ppt
88/88
Avaliao
http://www.geocities.com/ResearchTriangle/4084/A) tjs_banner1.htmCopiar e modificar parmetros para mostrarnovos banners (0 - 2)
B) tjs_resolucao2.htmAdaptar o cdigo para redirecionar a pgina em funoda resoluo do monitor (3 - 5)
C) Contar (mostrando) quanto tempo o cliente est na pgina. Sedecorrido mais de um minuto, abrir janela Ajuda.
6 No adaptar cdigo algum; somente consultar apostilas5 Adaptar cdigos (p. ex., ver timesp.htm)