You are on page 1of 88

JavaScript

Referências
• Websites interativos com JavaScript
Helder da Rocha – IBPINET

• HTML dinâmico (Parte III)
Ramalho – Berkeley

• Netscape (documentação 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

• 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

1

• • • •

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 (clientserver) – 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

Formulários etc. • Operações matemáticas e textuais • Validação de dados de um formulário • Animações • DHTML . Barra de status.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.

src='maca5.src='maca3.gif maca2.gif" name="maca" onMouseOver="maca.gif maca4.src='maca2.gif maca5.gif'"> maca1.gif maca3.gif'" onMouseDown="maca.src='maca4.gif'" onMouseOut="maca.gif'" onMouseUp="maca.gif .Exemplos de JavaScript: “Maçã” <IMG src="maca1.

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

write("<B>Olá!</B>").:</P> <SCRIPT> <!-document.Exemplos de JavaScript: “Olá” <HTML> <HEAD> <TITLE>Olá</TITLE> </HEAD> <BODY> <P>Script que escreve &quot. //--> </SCRIPT> </BODY> .olá&quot.

v1” <BODY> <SCRIPT language="JavaScript"> <!-nome = "Mariano Gomes Pimentel".write("<I>Autor: </I>"). //--> </SCRIPT> </BODY> OBS1: nome é uma variável  armazena uma informação . document. document.Exemplos de JavaScript: “Rodapé. document.write("<HR>").write(nome).

Abre uma janela de diálogo para o usuário entrar com um texto . //--> </SCRIPT> </BODY> OBS1: prompt é uma função  faz alguma coisa: ."").Exemplos de JavaScript: “Conteúdo Personalizado” <BODY> <SCRIPT language="JavaScript"> <!-nome = prompt("Qual o seu nome?".Retorna o texto digitado pelo usuário OBS2: “Seja bem vindo"+nome+"</B> !!!" é uma expressão  soma textos .write("Seja bem vindo <B>"+nome+"</B> !!!"). document.

write("<HR>").write("<I>Autor: </I>"+nome+"<BR>").lastModified). document.write("<I>Última Modificação: </I>"+ document.Exemplos de JavaScript: “Rodapé. document. v2” <BODY> <SCRIPT language="JavaScript"> <!-nome = "Mariano Gomes Pimentel".lastModified é uma propriedade do documento  retorna a data (mm/dd/aa) e hora da última modificação do documento . //--> </SCRIPT> </BODY> OBS1: document é uma objeto OBS2: document. document.

</SCRIPT> </BODY> </HTML> OBS: Rodape() é uma função (definida pelo programador)  escreve o rodapé .Exemplos de JavaScript: “Rodapé.write("<I>Última Modificação: </I>"+document.lastModified). document.write("<HR><I>Autor:</I> Mariano Gomes Pimentel<BR>"). v3” <HTML> <HEAD> <TITLE>Página com nome do leitor</TITLE> <SCRIPT language="JavaScript"> <!-function Rodape(){ document. } //--> </SCRIPT> </HEAD> <BODY> <P>Aqui escrevo qualquer coisa</P> <SCRIPT language="JavaScript"> Rodape().

</SCRIPT> <P>Aqui escrevo qualquer coisa</P> <SCRIPT>Rodape(). v1” . document.</SCRIPT> </BODY> </HTML> “Título e Rodapé.write("<H1 align=center><I>Curso de JavaScript</I></H1>").write("<I>Última Modificação: </I>"+document. } function Rodape(){ document. } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo().lastModified).Exemplos de JavaScript: <HTML> <HEAD> <TITLE>Página com nome do leitor</TITLE> <SCRIPT language="JavaScript"> <!-function Titulo(){ document.write("<HR><I>Autor: </I>Mariano Gomes Pimentel<BR>").

Fundamentos</H2> <P>Blá blá blá.html <HTML> <HEAD> <TITLE>1 .</P> <SCRIPT>Rodape().lastModified). v2” function Titulo(){ document.Fundamentos</TITLE> <SCRIPT language="JavaScript" src="geral.write("<H1 align=center><I>Curso de JavaScript</I></H1>"). document..Introdução</H2> <P>Blá blá blá.js"> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo().write("<HR><I>Autor: </I>Mariano Gomes Pimentel<BR>").Introdução</TITLE> <SCRIPT language="JavaScript" src="geral.. } capitulo1.</SCRIPT> <H2>Capítulo 1 .Exemplos de JavaScript: geral. } function Rodape(){ document.html <HTML> <HEAD> <TITLE>2 .</P> <SCRIPT>Rodape().</SCRIPT> <H2>Capítulo 2 .write("<I>Última Modificação: </I>"+document.</SCRIPT> </BODY> capitulo2.js “Título e Rodapé...</SCRIPT> </BODY> .js"> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo().

2 .Onde escrever um JavaScript? • Solução 1: Embutido na página HTML – 1. v3 • Título e Rodapé. INPUT etc): • Maçã • Mestre-Cuca – 1. v1 Conteúdo Personalisado Rodapé.3 . dentro de HEAD • Rodapé.Como função. v2 . A. v1 • Solução 2: Num arquivo a ser importado • Título e Rodapé.Como evento de um elemento (IMG.1 .Como elemento SCRIPT dentro de BODY: • • • • Olá Rodapé. v2 – 1.

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

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 .

Conceitos de Programação • Dado = informação Tipos de Dados: “Mariano” string 75 inteiro 1.57 true real boleano (ponto-flutuante) (verdadeiro ou falso) • Variável  armazena dado nome = “Mariano” Idade = 25 • Expressão e Operador  opera dados operadores x = (y – 5) / 7 operadores é diferente de x=y–5/7 precedência .

while (x != "fim"){ document.write(x). } • Repetição x = "". } else{ alert(“x é maior ou igual a 10”)."").Conceitos de Programação • Tomada de decisão (é necessário testar: if) if (x<10) { alert(“x é menor que 10”). } . x = prompt("Entre com um texto HTML ('fim' para terminar):".

} } . } function Classifica(){ numero = prompt("Entre com um número:". alert(resto).} else {alert("O número "+numero+" é impar. if (Par(numero)) {alert("O número "+numero+" é par.Conceitos de Programação • Função  bloco de programa. quebra do problema em partes! function Par(x){ resto = x % 2. if (resto==0) {return true} else {return false} } function Par(x){ return (x % 2)==0.").")."").

<FORM> <INPUT type="button" value="Par ou Impar?" onClick="Classifica()"> </FORM> EVENTO O botão..Conceitos de Programação • Evento  se alguma coisa acontece.. ao se clicado. chama a função Classifica() . então faça algo.

window.com. . "IBPI").location.write("<B>Bom Dia!</B>").Conceitos de Programação • Objetos  elementos de uma página Web – Propriedades (variáveis) document.open("http://www.br". (contém o título do documento) (contém a URL do documento) – Métodos (funções) document.ibpinet. document.title.

variáveis e operações • decisões + repetições Algoritmo • Conhecer os eventos e saber utilizá-los • Conhecer os objetos e saber utilizá-los .O que é preciso para programar em JavaScript? • Saber programar  desenvolver a Lógica de Programação !!! – Quebrar o problema em pedaços (funções) – Resolver os pedaços do problemas utilizando: • dados.

O que é preciso para programar em JavaScript? desenvolver a Lógica de Programação !!! 3 passos para desenvolver a Lógica de programação: 1 – Faça exercícios 2 – Faça mais exercícios 3 .Continue fazendo ! .

htm .9 – 1.Exercícios • Apostila.com/ResearchTriangle/4084/js2. p 1.geocities.13 (Exercício Resolvido) • Reutilizar (adaptando) o código de exemplos: http://www.

Eventos e Objetos 3 • Eventos • Objetos • • • • • Window Location History Document Form • TextArea. Password • Select • Frame • Image . Text.

Eventos <BODY onLoad="alert('Página carregada.')" onUnLoad="alert('Vou sair da página.</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?')"> ..')"> <P>Testando alguns eventos....

SELECT onKeyDown onKeyUp onKeyPress Tecla apertada Caixa de Texto Tecla desapertada Caixa de Texto Tecla “clicada” (KeyDown + KeyUp) Caixa de Texto * Funciona somente no Internet Explorer .Eventos onMouseOver onMouseMove onMouseOut onMouseDown onMouseUp onClick 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) A. IMG A. IMG. IMG A. Botões. IMG* A. IMG A. IMG* A.

de FORM. INPUT:passw. IMG IMG onChange quando modifica-se texto ou seleção onLoad onUnLoad onResize onMove onError onAbort 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 . INPUT:text. BODY SELECT. BODY BODY BODY BODY BODY.Eventos onSubmit antes de enviar o formulário onReset antes de limpar o formulário onFocus onBlur quando elemento recebe o foco quando elemento perde o foco FORM FORM compts. BODY compts. de FORM. TEXTAREA.

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

open("http://www. } //--> </SCRIPT> </HEAD> <BODY> <A href="javascript:AbrirJanela().br").">Abrir Janela</A> </BODY> </HTML> .Window (exemplo) <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-function AbrirJanela(){ window.com.ibpinet.

"").ibpinet. Nome não especificado Netscape: Abre só 1 janela Internet Explorer: Abre várias janelas .ibpinet. Cada chamada à função AbrirJanela().br".com. irá abrir uma nova janela window.open("http://www.com.com.open("http://www. mesmo com várias chamadas à função AbrirJanela().open("http://www.ibpinet.Window (exemplo) window. "j1").br").br". somente uma janela será aberta Nome da Janela window.

open("http://www.height=400. height=400. Ex. status“ .resizable=no").br". Caso contrário. Opções: • • • • • • • • • • • width=número height=número left=número top=número resizable=yes|no menubar=yes|no toolbar=yes|no location=yes|no directories=yes|no status=yes|no scrollbars=yes|no largura da janela altura da janela posição do canto esquerdo da janela posição do topo da janela permite o usuário redimensionar a janela exibe a barra de menu exibe a barra de ferramentas exibe a barra de endereço exibe a barra de ferramentas exibe a barra de status exibe as barras de rolamento Obs. "width=400. seu valor é no. seu valor é yes.: "width=400.Window (exemplo) window."j1". menubar.: Quando uma opção do tipo yes|no é apenas declarada.ibpinet.com.

document. janela.open().write('<P><A href="http://www.height=100")."width=300.write("<DIV align=center><P>Você já conhece o curso IBPINET?</P>").document.br" target="_blank">').document. janela. } . janela.open("".Window (exemplo) Abrir uma janela e escrever o conteúdo dinamicamente: function AbrirJanela(){ janela=window."wndPropaganda".com. janela.ibpinet.focus().document.write("Quero Conhecer</A></P>").document. janela. janela.close().

close()"> </FORM> </BODY> </HTML> <BODY> <SCRIPT><!-window.html index. //--> </SCRIPT> </BODY> ibpinet. "".com.">Fechar</A></P> <FORM> <INPUT type="button" value="Fechar" onClick="window.html".html http://www.br/webdesigner/mariano/javascript/aula2/janelas. "width=300.close().open("ibpinet.Window (exemplo) Abrir uma página “bloqueadora”: <HTML> <HEAD></HEAD> <BODY onBlur="window.focus()"> <P><A href="javascript:window.html .height=100").ibpinet.

"inicial") exibe caixa de diálogo para entrada de texto • open("URL".br/chicobuarque/construcao/menu_alfabetica1.(propriedades e métodos) • Propriedades • • • • • • frames[index] frames.com.htm http://www.gilbertogil. indexados pela ordem de criação número de quadros existentes janela atual janela pai janela mais antiga janela que a abriu Window • 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".uol.br .com. "nome".length self parent top opener quadros filhos. "opções") • close() cria janela cliente fecha janela http://www.

(propriedades e métodos)
• Propriedades
• • • • • • • • href protocol host hostname port path hash search URL completo protocolo utilizado nome e port do host nome do host port do host diretório e arquivo (exclui protocolo e host) URL após sinal # URL após sinal ?

Location

• Métodos
• toString() • assign("string") • reload(true) retorna uma string ajusta a localização recarrega a página atual incondicionalmente

Location
(exemplo)
<BODY> <SCRIPT language="JavaScript"> <!-alert("Você está em "+ window.location.href); novoHREF=prompt("entre com um novo endereço:","http://"); window.location.href=novoHREF; //--> </SCRIPT> <BODY>

(propriedades e métodos)
• Propriedades
• • • • back foward current length penúltimo URL acessado URL posterior da lista de URLs acessados URL da página atual tamanho da lista de histórico atual

History

• Métodos
• back() • foward() • go(n) • go("string") volta uma posição no histórico avança uma posição no histórico vai para o URL localizado em n posições em relação a posição atual (+n ou –n) 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. retorna uma tabela HTML com ligações para todas as entradas da lista de diretório

• toString()

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

length links[index] links.document.document.: window. window.(propriedades e métodos) • Propriedades • title • location • lastModified • • • • • bgColor fgColor linkColor aLinkColor vLinkColor • • • • • • form[index] form.length Document • Métodos • • • • write("textoHTML") writeln("textoHTML") clear() close() escreve uma linha de texto HTML escreve e adiciona um avanço de linha limpa o texto do documento fecha o documento Ex.write("<B>Olá</B>").length anchors[index] anchors.bgColor="silver". .

(propriedades e métodos) • Propriedades • • • • • • • elements Array. "post"=1) target janela alvo usada para resposta após envio do formulário (atributo TARGET) Form • Métodos • submit() envia o formulário .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. Vetor de elementos do formulário elements.

document.document.document.write(window. wndCadastro.elements[1].write("<B>Nome: </B>").forms[0].close(). Password <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-function Cadastrar(){ wndCadastro = window.document. wndCadastro.value).open().document.txtNome. wndCadastro.focus().value).write("<BR>"). wndCadastro. wndCadastro."width=300.document.write(window. } elements[0]=Caixa de texto “txtNome”.document. wndCadastro.open("". </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> (exemplo) . wndCadastro.frmCadastro."jc".write("<B>Idade: </B>").TextArea.document. </SCRIPT> elements[2]=Botão “btnCadastrar”. Text. wndCadastro.height=80"). //--> elements[1]=Caixa de texto “txtLogin”.document.

options[2]=“HTML”.href="http://www. <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.(exemplo) <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-function Navegar(){ var x = document.br"} if (x==2){document.href="http://www.location.options[1]=“IBPINET”.selectedIndex.nce.ibpinet.frmSites.com. if (x==0){} if (x==1){document.ufrj.com.options[3]=“Mariano”. Select .href="http://www.ibpinet. </HEAD> slcSites.br/webdesigner/mariano"} } //--> slcSites.options[0]=“Sites”.location. </SCRIPT> slcSites.slcSites.location.br/cursos/html"} if (x==3){document.

com.document.document.frmSites.br"} if (x==2){parent.location.href="http://www.com.(exemplo) menuframes.parent.ibpinet.ibpinet.slcSites.html <HTML> <HEAD><TITLE>Menu de Navegação</TITLE></HEAD> <FRAMESET rows="50...href= "http://www.. .html" scrolling="no"> <FRAME name="principal" src="branco.principal..*" frameborder=0 border=0> <FRAME name="menu" src="menu.nce. if (x==0){} if (x==1){parent.location.br/webdesigner/mariano"} } .ufrj.html"> </FRAMESET> </HTML> Frame menu.selectedIndex.location.document.br/cursos/html"} if (x==3){window.html .frames[1].href="http://www. function Navegar(){ var x = document.principal.

.geocities..htm • Ler capítulos 5 a 10 da Apostila. e fazer os exercícios!!! .Exercícios • Reutilizar (adaptando) códigos de: http://www.com/ResearchTriangle/4084/js2.

else) Repetição (while e for) Funções • Exemplos e Exercícios ..Lógica de Programação 4 • • • • • • Variáveis Tipos de Dados Operadores Tomada de Decisão (if..

• var nome. números e "_" (underscore) • tem que começar com um letra • case sentive  nome  Nome  NoMe . • idade=25. /*não precisa declarar nem tipar a variável*/ /*declaração sem atribuição de valor*/ /*declaração com atribuição de valor*/ • Identificador de variável • letras. • nome="Mariano".Variáveis • Variável armazena dado • nome="Mariano". • var nome="Mariano".

78e-45  Decimal »734. • “Qualquer „texto‟.: cores) »0xFF87C1  Octal »0677 .075 »1.”. toda uma página HTML. inclusive.25  Hexadecimal (Ex.Tipos de Dados • string (cadeia de letras) • “Mariano Gomes Pimentel”. • “123” VALORES ESPECIAIS  Indeterminado » NaN (Not a Number) • number  Inteiro:  Infinito: » Infinity » -Infinity TIPO »5 »14509 REPRESENTAÇÃO  Ponto-flutuante »14.

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

meioNome = "Gomes". • String •+ concatenação nome = "Mariano".Operadores • Aritméticos • • • • • * / + % multiplicação divisão soma subtração resto x x x x = = = = 5 / 3.2) / 2. nomeCompleto = nome + " " + meioNome + " " + sobreNome. 5 + (5 . (5 + (5 – 2)) / 2. . sobreNome = "Pimentel". 5 % 3.

/* y=5. –= y.ou --var x = 5. y = x++. x x x x x = = = = = x x x x x + y. y=6. %= y. • Incrementais • var++ ou ++var • var-. */ x=5. y = ++x. – y. * y. /* x=6. % y. x=6. *= y. */ .Operadores • Atribuição •= (Ex.: x = 5) • op= (atribuição com operação) x x x x x += y. /= y. / y.

.} if (senha!="12345") {alert("Senha inválida!").} if (x==y) {..Operadores • Comparação • • • • • • > >= < <= == != maior maior ou igual menor menor ou igual igual diferente if (x<10) {.} ...

} if !(senha=="12345") {alert("Senha inválida!").Operadores • Lógicos • && • || •! e ou not if ( (x<y) && (y<z) ) {alert(x +" é menor que " +z)...} .} if ( (x<z) || (y<z) ) {.

Tomada de Decisão • if .. else if (condição) { // instruções caso condição==true } else { // instruções caso condição==false } ..

} i=1.Repetição • for (inicialização.} for (i=1. condição. while (i<=1000) { document. } • while (condição) {. i = i + 1) { document. incremento){.write("<P>" + i + "</P>"). i = i + 1... } . i<=1000...write("<P>" + i + "</P>").

param2) {..Funções • function NomeFuncao(param1. y) { return x + y.. } .} function Soma(x.

// resultado = 8 // nome = "Jo%E3o" // nome = "João" .Funções nativas p.") } eval(string) escape(string) unescape(string) Executa o conteúdo de uma string resultado = eval(“5 + 6 / 2”). x = parseInt("7."").5"). x = parseInt(texto). x = parseInt("7a").5 Retorna true se a string não é número texto = prompt("Entre com um número:". texto = texto + 5.3-2 parseInt(string) Converte a string num número inteiro texto="7". //x==12 (7 + 5) //texto=="75" ("7" +"5“) //x==7 //x==7 parseFloat(string) isNaN(string) Converte a string num número real x = parseFloat("7. x = numero + 5. if ( isNaN(texto) ) { alert("Você não digitou um número válido. unescape("Jo%E3o").5"). escape = ("João"). //x==7.

Exemplo: Antes de enviar o formulário. verificar se o campo „Nome‟ foi preenchido .

value==""){ alert("O campo 'Nome' precisa ser preenchido").Solução <HTML> <HEAD> <SCRIPT language="javascript"> <!-function Enviar(){ if (window.nome.Cadastro.nome.document. } } //--> </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> .Cadastro.document. window.Cadastro.focus().submit().document. //window. } else{ alert("Os dados do formulário foram preenchidos corretamente").

então retornar true caso contrário. .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. retornar false.

""). } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT language="javascript"> <!-- numero = prompt("Digite um número inteiro:".<HTML> <HEAD> <SCRIPT language="javascript"><!-- Solução 1 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. if ( isInt(numero) ) {alert("Ok. o número é inteiro")} else {alert("Você não digitou um número inteiro")} //--> </SCRIPT> </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). .

br/cursos/html .nce.ufrj. posterior e inicial Ex.: http://www.Exercício: Fazer uma função para escrever uma “barra de navegação” para página anterior.

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 .

random()*50).7 floor(5. 7) -> 5 max(5.4) -> 6 round(5. 7) -> 7 abs(-5.7) -> 6. // x recebe um número entre 1 e 50 .: x = 1 + Math. round(5.4) -> 5 Ex.Math p. b) max(a. 4-13 random() min(a.7) -> 5 ceil(5.b) abs(x) floor(x) ceil(x) round(x) número pseudo-aleatório entre 0 e 1 min(5.floor(Math.7) -> 5.

split("/").indexOf("a")  1 txt. 4-7 txt = "Mariano" 0 1 2 3 4 5 6 charAt(n) indexOf("sub-string") txt. split("separdor") *length. // data[1] = "02".String p.indexOf("k")  -1 txt="20/02/1975". // x = 7 . txt = "Mariano".charAt(2)  "r" txt. // data[0] = "20".indexOf("n")  5 txt. data = txt. x = txt.length. // data[2] = "1975".

getSeconds(). //dia da semana (0 a 6) //dia do mês (1 a 31) .Date p. dataHoje.getData().getHour(). dataHoje. dataHoje. dataHoje.getMinutes().getMonth(). 4-15 • dataHoje = new Date().getDay().getYear(). dataHoje. dataHoje. dataHoje.

"").length  3 // length é uma propriedade de Array . data.} txt = "20/02/1975". data[1] = 02. data[2] = 1975.1975). 4-10 • Armazena dados indexados data = new Array(3). data = new Array(). if (data[1]==null) {data[1]=prompt("Entre com o mês". //sem indexação prédefinida data[0] = "20". data = txt. data = new Array(20.split("/"). data[2] = "1975". data[0] = 20.02.Array p.

34:Cesta lixo valise:5.split(":"). } Array . for (i=0.00.write(prod[2] + "<BR>"). document. i < produtosArray.write(prod[0] + "<BR>"). i++){ prod = produtosArray[i].(continuação) produtos = "1:Porta retrato PHT:21.split(". document.").length.2:Abajur Róse:35. document.write(prod[1] + "<BR>"). produtosArray = produtos.99".50.

4-2 function Produto(aCodigo.50).99).. “Abajur Róse”. “Cesta lixo valise”. document.preco = aPreco. “Porta retrato PHT”.00)..codigo = aCodigo. } .nome). P3 = new Produto (34.. P2 = new Produto(2. . this. p1 = new Produto(1. aNome. .. 35.nome =aNome.Novos Objetos p. aPreco){ this.write(p1. 5. 21. this.

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

for (i=0. ").cookie. if (nomeCookie==nome) {return unescape(cookies[i][1])} } return "".Criando funções para Comércio-eletrônico com Cookies function getConteudoCookie(nome){ cookies = document. i<=cookies.length-1. nomeCookie = unescape(cookies[i][0]). } . i++){ cookies[i] = cookies[i].split("=").split(".

reload(). window. } function CancelarCompras(){ CancelarCookie("compras").cookie = nome+"=. } . expires=" + diaOntemGMT.Criando funções para Comércio-eletrônico com Cookies function CancelarCookie(nome){ diaHoje = new Date().location. document.1000*60*60*24 ).getTime() . diaOntemGMT = diaOntem.toGMTString(). diaOntem = new Date( diaHoje.

90&1 .90&1*22&Castiçal&Modaluz&15.produto.fabricante.Criando funções para Comércio-eletrônico com Cookies function Comprar(codigo.quantidade){ if (!ehProdutoComprado(codigo)){ sacola=getConteudoCookie("compras").cookie = "compras="+escape(sacola).preco. if (sacola!=""){sacola+="*"} sacola+= codigo+"&"+produto+"&"+fabricante+"&"+ preco+"&"+quantidade. document. } } 21&Abajur&Modaluz&22.

split("&").Criando funções para Comércio-eletrônico com Cookies function ehProdutoComprado(codigo){ sacola = getConteudoCookie("compras"). i++){ produto=produtos[i]. if (sacola=="") {return false} else{ produtos = sacola. if (produto[0]==codigo){return true} } return false } } .length-1. for (i=0. i<=produtos.split("*").

split("*"). for (i=0. CancelarCookie("compras").length-1.location.produto [2]. } } .Criando funções para Comércio-eletrônico com Cookies function ExcluirProduto(codigo){ if (ehProdutoComprado(codigo)){ sacola=getConteudoCookie("compras"). i++){ produto=produtos[i]. if (produto[0]!=codigo){Comprar(produto[0].split("&").reload().produto[3]. i<=produtos.produto[1].produto[4])} } window. produtos = sacola.

if (sacola!=""){ produtos=sacola. } } } . document."+ produto[2]+"<BR>"). document.split("*").write("<P><B>Produto:</B>"+produto[1]+" ."+ produto[0]+"&quot. document. i<=produtos.)'>Excluir Produto</A></P>").Criando funções para Comércio-eletrônico com Cookies function ListarCompras(){ sacola=getConteudoCookie("compras"). for (i=0.write("<A href='javascript:ExcluirProduto(&quot. i++){ produto = produtos[i]. document.write("<B>Preço:</B>"+produto[3]+"<BR>").length-1.split("&").write("<B>Quantidade:</B>"+produto[4]+"<BR>").

1000).Relógios • id = setTimeout("funcao()". Cria um relógio (id) para chamar uma função após n milisegundos 7 • 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> .

100).document. if (posicao==msg. posicao++.length){posicao=0} relogio = setTimeout("RolarMsg()". posicao+msg.value=msgMontada. msgMontada = msg+msg.Exemplo <HEAD> <SCRIPT language="javascript"> <!-var relogio.substring(posicao.frmMensagem.chkRolar. } function Rolar(){ if (window. function RolarMsg(){ msg=" Seja bem vindo à página do Mariano! ". msgMontada = msgMontada.checked) {RolarMsg()} else {clearTimeout(relogio)} } //--> </SCRIPT> </HEAD> .txtMensagem. var posicao=0. window.frmMensagem.document.length).

jpg"> <PARAM name="url0" value="publico.htm"> <PARAM name="url5" value="participa.jpg"> <PARAM name="image2" value="fabrica.Java Applet‟s <APPLET CODE="3dcube.htm"> <PARAM name="url4" value="enguico.htm"> <PARAM name="url1" value="maritmo.jpg"> <PARAM name="image3" value="senhas.javaboutique.jpg"> <PARAM name="image5" value="participa.jpg"> <PARAM name="image1" value="maritmo.htm"> <PARAM name="url3" value="senhas.htm"> <PARAM name="url2" value="fabrica.com .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.htm"> </APPLET> (NÃO é JavaScript !) 8 http://www.jpg"> <PARAM name="image4" value="enguico.

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

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

6 – Não adaptar código algum. abrir janela “Ajuda”.com/ResearchTriangle/4084/ A) tjs_banner1..5) C) Contar (mostrando) quanto tempo o cliente está na página.htm Adaptar o código para redirecionar a página em função da resolução do monitor (3 . Se decorrido mais de um minuto.geocities.Avaliação http://www.htm) . ver timesp.2) B) tjs_resolucao2. somente consultar apostilas 5 – Adaptar códigos (p.htm Copiar e modificar parâmetros para mostrar novos banners (0 . ex.