Java Script 50

Emanuel Barbosa Vicente
Emanuel.barbosa@yousoftdevelopers.com
JavaScript
Referncias
Websites interativos com JavaScript
Helder da Rocha IBPINET

HTML dinmico (Parte III)
Ramalho Berkeley

Netscape (documentao completa)
http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htm
http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm
http://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
Introduo
O que JavaScript?
Para que serve JavaScript?
Exemplos de JavaScript
Onde escrever um JavaScript?
1
O que JavaScript?
uma linguagem de programao
Desenvolvida pela Netscape

Microsoft
tem o VBScript no tanto utilizado quanto

o 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

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
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
Exerccio:
Mestre-Cuca
olhos0.gif
olhos315.gif
olhos45.gif olhos135.gif
olhos90.gif
olhos180.gif
olhos225.gif
olhos270.gif
olhosani.gif
Ol
<HTML>

<HEAD>
<TITLE>Ol</TITLE>
</HEAD>

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

</SCRIPT>
</BODY>
Rodap, v1
<BODY>
<SCRIPT language="JavaScript">

</SCRIPT>
</BODY>
OBS1:
nome uma varivel armazena uma informao
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+"</B> !!!" uma expresso soma textos
Contedo Personalizado
<BODY>

</SCRIPT>
</BODY>
Rodap, v2
<BODY>

</SCRIPT>
</BODY>
OBS1:
document uma objeto

OBS2:
document.lastModified uma propriedade do documento retorna
a data (mm/dd/aa) e hora da ltima modificao do documento
Rodap, v3
<HTML>
<HEAD>
<TITLE>Pgina com nome do leitor</TITLE>

</SCRIPT>
</HEAD>

<BODY>
<P>Aqui escrevo qualquer coisa</P>
Rodape();
</SCRIPT>
</BODY>
</HTML>
OBS:
Rodape() uma funo (definida pelo programador) escreve o rodap
Ttulo e Rodap, v1
<HTML>
<HEAD>
<TITLE>Pgina com nome do leitor</TITLE>

</SCRIPT>
</HEAD>

<BODY>
<SCRIPT>Titulo();</SCRIPT>
<P>Aqui escrevo qualquer coisa</P>
<SCRIPT>Rodape();</SCRIPT>
</BODY>
</HTML>
Ttulo 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>");
}
geral.js
<HTML>

<HEAD>
<TITLE>1 - Introduo</TITLE>
<SCRIPT language="JavaScript" src="geral.js">
</SCRIPT>
</HEAD>

<BODY>
<H2>Captulo 1 - Introduo</H2>
<P>Bl bl bl...</P>
</BODY>
capitulo1.html
<HTML>

<HEAD>
<TITLE>2 - Fundamentos</TITLE>
<SCRIPT language="JavaScript" src="geral.js">
</SCRIPT>
</HEAD>

<BODY>
<H2>Captulo 2 - Fundamentos</H2>
<P>Bl bl bl...</P>
</BODY>
capitulo2.html
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
Conceitos de programao
Dados, Variveis, Expresses e Operadores
Tomada de deciso, Repetio
Funes, Eventos, Objetos
O que preciso para
programar em JavaScript?
Exerccios
Programando
2
Conceitos de Programao
JavaScript

linguagem de programao

processar informaes

resolver um problema

Processar informaes (ou seja, resolver um problema) exige um
tipo de pensamento particular Lgica de Programao
Dado = informao
Tipos de Dados: Mariano 75 1.57 true

Varivel armazena dado
nome = Mariano
Idade = 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)
Tomada de deciso ( necessrio testar: if)
if (x<10) {
alert(x menor que 10);
}
else{
alert(x maior ou igual a 10);
}

Repetio
x = "";
while (x != "fim"){
document.write(x);
x = prompt("Entre com um texto HTML ('fim' para terminar):","");
}
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;
}
Evento se alguma coisa acontece,
ento faa algo...

<FORM>
<INPUT type="button" value="Par ou Impar?" onClick="Classifica()">
</FORM>
EVENTO
O boto, ao se clicado,
chama a funo Classifica()
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("<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 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 a
Lgica de Programao !!!
Algoritmo
O que preciso para programar
em JavaScript?

3 passos para desenvolver a
Lgica de programao:

1 Faa exerccios
2 Faa mais exerccios
3 - Continue fazendo !
desenvolver a
Lgica de Programao !!!
Exerccios
Apostila, p 1.9 1.13 (Exerccio Resolvido)

Reutilizar (adaptando) o cdigo de exemplos:
Eventos e Objetos
3
Eventos
Objetos
Window
Location
History
Document
Form
TextArea, Text, Password
Select
Frame
Image
Eventos
<BODY onLoad="alert('Pgina carregada.')"
onUnLoad="alert('Vou sair da pgina...')">
<P>Testando alguns eventos...</P>
<FORM>
<INPUT type="button"
value="No aperte este boto!"
onClick="alert('Clique o boto Ok para formatar o HD')">
</FORM>
</BODY>
<INPUT type="button" value= "Formatar o HD"
onClick="confirm(Tem certeza?')">
Eventos
A, IMG*
A, IMG
A, IMG*
A, IMG
A, IMG
A, IMG, Botes,
SELECT

Caixa de Texto
Caixa de Texto
Caixa de Texto
Ponteiro do mouse entra
Ponteiro 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)
onMouseOver
onMouseMove
onMouseOut
onMouseDown
onMouseUp
onClick

onKeyDown
onKeyUp
onKeyPress
* Funciona somente no Internet Explorer
Eventos
antes de enviar o formulrio
antes 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 redimensionada
quando a janela arrastada

quando um erro ocorre ao carregar
quando interrompe-se carregamento
onSubmit
onReset

onFocus
onBlur

onChange

onLoad
onUnLoad
onResize
onMove

onError
onAbort
FORM
FORM

compts. de FORM, BODY
compts. de FORM, BODY

SELECT, TEXTAREA,
INPUT:text, INPUT:passw.

BODY
BODY
BODY
BODY

BODY, IMG
IMG
Objetos
Window
Frame
Document
Location
History
Link
Image
Area
Anchor
Applet
Plugin
Form
Option
TextArea
Text
Password
Radio
Select
Reset
Submit
FileUpload
Hidden
Button
Window
(exemplo)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>

<BODY>
<A href="javascript:AbrirJanela();">Abrir Janela</A>
</BODY>
</HTML>
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 Janela
mesmo com vrias chamadas
funo AbrirJanela(),
somente uma janela ser aberta
window.open("http://www.ibpinet.com.br", "");
Nome no especificado
Netscape: Abre s 1 janela
Internet Explorer: Abre vrias janelas
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
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 contedo 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 pgina bloqueadora:
<BODY>
<SCRIPT>
</SCRIPT>
</BODY>
index.html
ibpinet.html
http://www.ibpinet.com.br/webdesigner/mariano/javascript/aula2/janelas.html
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.htm
http://www.gilbertogil.com.br
Location
Propriedades
href URL completo
protocol protocolo utilizado
host nome e port do host
hostname nome do 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

Location
(exemplo)
<BODY>

</SCRIPT>
<BODY>
History
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 URL
contenha a string especificada. Obs.: o sistema
diferencia maisculas e minsculas.
toString() retorna uma tabela HTML com ligaes para todas
as entradas da lista de diretrio
Ex.: <A href="javascript:history.back()">Voltar</A>
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 para
todas as pginas de seu site
Document
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("<B>Ol</B>");
window.document.bgColor="silver";
Form
Propriedades
elements Array. Vetor de elementos do formulrio
elements.length Nmero de elementos do formulrio
name contedo do atributo NAME
action contedo do atributo ACTION
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

<HTML>
<HEAD>

</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]=Boto btnCadastrar;
<HTML>
<HEAD>

</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;
...
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 Navegao</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
Exerccios
Reutilizar (adaptando) cdigos de:

Ler captulos 5 a 10 da Apostila...
e fazer os exerccios!!!
Lgica de Programao
4
Variveis
Tipos de Dados
Operadores
Tomada de Deciso (if...else)
Repetio (while e for)
Funes

Exemplos e Exerccios
Variveis
Varivel armazena dado
nome="Mariano";
idade=25;

nome="Mariano"; /*no precisa declarar nem tipar a 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

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 pgina HTML.;
123

number
T
I
P
O

R
E
P
R
E
S
E
N
T
A
O

Indeterminado
NaN (Not a Number)
Infinito:
Infinity
-Infinity

V
A
L
O
R
E
S

E
S
P
E
C
I
A
I
S

Decimal
734.25
Hexadecimal (Ex.: cores)
0xFF87C1
Octal
0677
Tipos de Dados
true
false

undefined
valor ainda no definido
Ex.: var nome; /* nome=undefined */

null
valor nulo (invlido)

object
objetos: documento, janela, componente de formulrio etc.
boolean
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;
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; */
Operadores
Comparao
> maior
>= maior ou igual
< menor
<= menor ou igual
== igual
!= diferente
if (x<10) {...}

if (senha!="12345") {alert("Senha invlida!");}

if (x==y) {...}
Operadores
Lgicos
&& e
|| ou
! not
if ( (x<y) && (y<z) ) {alert(x +" menor que " +z);}

if ( (x<z) || (y<z) ) {...}

if !(senha=="12345") {alert("Senha invlida!");}
Tomada de Deciso
if ... else

if (condio) {
// instrues caso condio==true
}
else {
// instrues caso condio==false
}
Repetio
for (inicializao; condio; incremento){...}

while (condio) {...}
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;
}
Funes
function NomeFuncao(param1, param2) {...}
function Soma(x, y) {
return x + y;
}
Funes nativas
p.3-2
parseInt(string)
Converte a string num nmero 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 nmero real
x = parseFloat("7.5"); //x==7.5

Retorna true se a string no nmero
texto = prompt("Entre com um nmero:","");
if ( isNaN(texto) ) {
alert("Voc no digitou um nmero vlido.")
}

Executa o contedo de uma string
resultado = 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: Antes de enviar o formulrio, verificar se o
campo Nome foi preenchido
Soluo
<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 funo para saber se um
texto ou no um nmero inteiro
Verificar se o texto um nmero
Verificar se este nmero inteiro
Se ambas as condies forem verdadeiras,
ento retornar true
caso contrrio, retornar false.
Passos:
<HTML>
<HEAD>
<SCRIPT language="javascript">
</SCRIPT>
</HEAD>
<BODY>

</SCRIPT>
</BODY></HTML>
Soluo 1
if ( isNaN(texto) ) {return false}
else{ return ( parseInt(texto)==parseFloat(texto) ) }
}
Soluo 2
bValido=true;
if ( isNaN(texto) ) {bValido=false}
else{
if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false}
}
return bValido;
}
Exerccio: Fazer um formulrio que seja
validado antes de ser enviado
Validar:
preenchimento de Nome
validade de Data
Exerccio: Fazer uma funo para escrever um
produto na pgina (passando como parmetro a
imagem do produto, o nome e o preo).
Exerccio: Fazer uma funo para escrever
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
seo o cliente se encontra (indicao no frame)
Objetos Nativos
5
Math
String
Date
Array
Novos Objetos
Math
p. 4-13
random() nmero pseudo-aleatrio 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 nmero 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
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 ms (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[0] = 20;
data[1] = 02;
data[2] = 1975;

data = new Array(20,02,1975);

data = new Array(); //sem indexao prdefinida
data[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
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] + "<BR>");
}
Array
(continuao)
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 Rse, 35.50);
P3 = new Produto (34, Cesta lixo valise, 5.99);

...
document.write(p1.nome);
Cookies
6
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
Comrcio-eletrnico 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 "";
}
Criando funes para
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
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
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
}
}
Criando funes para
function ExcluirProduto(codigo){
if (ehProdutoComprado(codigo)){
produtos = sacola.split("*");
CancelarCookie("compras");
produto=produtos[i].split("&");
if
(produto[0]!=codigo){Comprar(produto[0],produto[1],produto
[2],produto[3],produto[4])}
}
window.location.reload();
}
}
Criando funes para
function ListarCompras(){
if (sacola!=""){
produtos=sacola.split("*");
produto = produtos[i].split("&");
document.write("<P><B>Produto:</B>"+produto[1]+" - "+
produto[2]+"<BR>");
document.write("<B>Preo:</B>"+produto[3]+"<BR>");
document.write("<B>Quantidade:</B>"+produto[4]+"<BR>");
document.write("<A href='javascript:ExcluirProduto(""+
produto[0]+"")'>Excluir Produto</A></P>");
}
}
}
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
<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>
</HEAD>
Java Applets
(NO 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>
http://www.javaboutique.com
Resumo
JavaScript uma linguagem de programao
Lgica de
Programao
Eventos
Objetos (propriedade e mtodos)
Sintaxe (for, if...else, function, etc.)
Funes nativas
Objetos nativos (Date, Array etc.)
Usurio
1 Iniciante
2 Bom
Programador
3 Iniciante
4/5 Intermedirio
6 - 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 parmetros
2 Consegue modificar parmetros, mas no ler o cdigo
3 Consegue ler o cdigo, mas no modific-lo
4 Consegue adaptar o cdigo (poucas coisas)
5 Desenvolver uma nova funo
6 Desenvolver todo um novo programa
Auto-avaliao
Avaliao
http://www.geocities.com/ResearchTriangle/4084/

A) tjs_banner1.htm
Copiar e modificar parmetros para mostrar
novos banners (0 - 2)

B) tjs_resolucao2.htm
Adaptar o cdigo para redirecionar a pgina em funo
da resoluo do monitor (3 - 5)

C) Contar (mostrando) quanto tempo o cliente est na pgina. Se
decorrido mais de um minuto, abrir janela Ajuda.
6 No adaptar cdigo algum; somente consultar apostilas
5 Adaptar cdigos (p. ex., ver timesp.htm)

Java Script 50

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Java Script 50

Caricato da

Copyright:

Formati disponibili

Emanuel Barbosa Vicente

tem o VBScript no tanto utilizado quanto

Potrebbero piacerti anche