Post on 17-Apr-2015
Mariano Gomes Pimentelmariano@nce.ufrj.br
JavaScript
Referências
• Websites interativos com JavaScriptHelder da Rocha – IBPINET
• HTML dinâmico (Parte III)Ramalho – Berkeley
• Netscape (documentação completa)http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htmhttp://developer.netscape.com/docs/manuals/communicator/jsref/index.htmhttp://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html
• Tony’s JavaScript (exemplos)http://www.geocities.com/ResearchTriangle/4084/js2.htm
• HTML (para revisão)http://www.nce.ufrj.br/cursos/html
Introdução
• O que é JavaScript?• Para que serve JavaScript?• Exemplos de JavaScript• Onde escrever um JavaScript?
11
O que é JavaScript?
• É uma linguagem de programação– Desenvolvida pela Netscape®
• Microsoft® tem o VBScript não é tanto utilizado quanto o JavaScript
• JavaScript também roda no Microsoft Internet Explorer®
– O código é escrito dentro da página HTML (client-server)
– Simples e Útil (para fazer coisas simples)
Obs.: JavaScript NÃO É Java– Java entra nas páginas HTML através de applets
• JavaScript é escrito dentro da página HTML
http://www.geocities.com/ResearchTriangle/4084/js2.htm
Para que serve “JavaScript”?
• Efeitos visuais • Efeitos interativos• Geração dinâmica de conteúdo (on-the-fly)
• Adequações para a resolução do monitor• Padronização da apresentação• Armazenamento de informações (cookies)
Personalização do conteúdo
• Manipular objetos de interface• Janelas, Barra de status, Formulários etc.
• Operações matemáticas e textuais• Validação de dados de um formulário• Animações
• DHTML
Exemplos de JavaScript:“Maçã”
<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”
olhos0.gif
olhos315.gif
olhos45.gifolhos135.gif
olhos90.gif
olhos180.gif
olhos225.gif
olhos270.gif
olhosani.gif
Exemplos de JavaScript:“Olá”
<HTML>
<HEAD> <TITLE>Olá</TITLE></HEAD>
<BODY><P>Script que escreve "olá":</P><SCRIPT><!-- document.write("<B>Olá!</B>");//--></SCRIPT></BODY>
Exemplos de JavaScript:“Rodapé, v1”
<BODY><SCRIPT language="JavaScript"><!-- nome = "Mariano Gomes Pimentel"; document.write("<HR>"); document.write("<I>Autor: </I>"); document.write(nome);//--></SCRIPT></BODY>
OBS1:nome é uma variável armazena uma informação
OBS1:prompt é uma função faz alguma coisa: - Abre uma janela de diálogo para o usuário entrar com um texto - Retorna o texto digitado pelo usuário
OBS2:“Seja bem vindo"+nome+"</B> !!!" é uma expressão soma textos
Exemplos de JavaScript:“Conteúdo Personalizado”
<BODY><SCRIPT language="JavaScript"><!-- nome = prompt("Qual o seu nome?",""); document.write("Seja bem vindo <B>"+nome+"</B> !!!");//--></SCRIPT></BODY>
Exemplos de JavaScript:“Rodapé, v2”
<BODY><SCRIPT language="JavaScript"><!-- nome = "Mariano Gomes Pimentel"; document.write("<HR>"); document.write("<I>Autor: </I>"+nome+"<BR>"); document.write("<I>Última Modificação: </I>"+ document.lastModified);//--></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
Exemplos de JavaScript:“Rodapé, v3”
<HTML><HEAD><TITLE>Página com nome do leitor</TITLE><SCRIPT language="JavaScript"><!--function Rodape(){ document.write("<HR><I>Autor:</I> Mariano Gomes Pimentel<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); }//--></SCRIPT></HEAD>
<BODY><P>Aqui escrevo qualquer coisa</P><SCRIPT language="JavaScript"> Rodape();</SCRIPT></BODY></HTML>
OBS:Rodape() é uma função (definida pelo programador) escreve o rodapé
Exemplos de JavaScript:“Título e Rodapé, v1”
<HTML><HEAD><TITLE>Página com nome do leitor</TITLE><SCRIPT language="JavaScript"><!--function Titulo(){ document.write("<H1 align=center><I>Curso de JavaScript</I></H1>"); }
function Rodape(){ document.write("<HR><I>Autor: </I>Mariano Gomes Pimentel<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); }//--></SCRIPT></HEAD>
<BODY><SCRIPT>Titulo();</SCRIPT><P>Aqui escrevo qualquer coisa</P><SCRIPT>Rodape();</SCRIPT></BODY></HTML>
Exemplos de JavaScript:“Título e Rodapé, v2”
function Titulo(){ document.write("<H1 align=center><I>Curso de JavaScript</I></H1>"); }
function Rodape(){ document.write("<HR><I>Autor: </I>Mariano Gomes Pimentel<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); }
geral.js
<HTML>
<HEAD><TITLE>1 - Introdução</TITLE><SCRIPT language="JavaScript" src="geral.js"></SCRIPT></HEAD>
<BODY><SCRIPT>Titulo();</SCRIPT><H2>Capítulo 1 - Introdução</H2><P>Blá blá blá...</P><SCRIPT>Rodape();</SCRIPT></BODY>
capitulo1.html<HTML>
<HEAD><TITLE>2 - Fundamentos</TITLE><SCRIPT language="JavaScript" src="geral.js"></SCRIPT></HEAD>
<BODY><SCRIPT>Titulo();</SCRIPT><H2>Capítulo 2 - Fundamentos</H2><P>Blá blá blá...</P><SCRIPT>Rodape();</SCRIPT></BODY>
capitulo2.html
Onde escrever um JavaScript?
• Solução 1: Embutido na página HTML
– 1.1 - Como evento de um elemento (IMG, A, INPUT etc):• Maçã • Mestre-Cuca
– 1.2 - Como elemento SCRIPT dentro de BODY:• Olá• Rodapé, v1• Conteúdo Personalisado• Rodapé, v2
– 1.3 - Como função, dentro de HEAD• Rodapé, v3• Título e Rodapé, v1
• Solução 2: Num arquivo a ser importado• Título e Rodapé, v2
• Conceitos de programação– Dados, Variáveis, Expressões e Operadores– Tomada de decisão, Repetição– Funções, Eventos, Objetos
• O que é preciso paraprogramar em JavaScript?
• Exercícios
Programando22
Conceitos de Programação
JavaScript
linguagem de programação
processar informações
resolver um problema
Processar informações (ou seja, resolver um problema) exige um tipo de pensamento particular Lógica de Programação
Conceitos de Programação
• Dado = informaçãoTipos de Dados: “Mariano” 75 1.57 true
• Variável armazena dadonome = “Mariano”Idade = 25
• Expressão e Operador opera dados
x = (y – 5) / 7 é diferente de x = y – 5 / 7
operadores
operadores precedência
string inteiro real(ponto-flutuante)
boleano(verdadeiro ou falso)
Conceitos de Programação
• Tomada de decisão (é necessário testar: if)if (x<10) { alert(“x é menor que 10”); }else{ alert(“x é maior ou igual a 10”); }
• Repetiçãox = "";while (x != "fim"){ document.write(x); x = prompt("Entre com um texto HTML ('fim' para terminar):",""); }
Conceitos de Programação
• 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;}
Conceitos de Programação
• Evento se alguma coisa acontece, então faça algo...
<FORM>
<INPUT type="button" value="Par ou Impar?" onClick="Classifica()"></FORM>
EVENTOO botão, ao se clicado,
chama a função Classifica()
Conceitos de Programação
• Objetos elementos de uma página Web
– Propriedades (variáveis)document.title; (contém o título do documento)document.location; (contém a URL do documento)
– Métodos (funções)document.write("<B>Bom Dia!</B>");window.open("http://www.ibpinet.com.br", "IBPI");
O que é preciso para programar em JavaScript?
• Saber programar
– Quebrar o problema em pedaços (funções)– Resolver os pedaços do problemas utilizando:
• dados, variáveis e operações • decisões + repetições
• Conhecer os eventos e saber utilizá-los
• Conhecer os objetos e saber utilizá-los
desenvolver aLógica de Programação !!!
Algoritmo
O que é preciso para programar em JavaScript?
3 passos para desenvolver a Lógica de programação:
1 – Faça exercícios2 – Faça mais exercícios3 - Continue fazendo !
desenvolver aLógica de Programação !!!
Exercícios
• Apostila, p 1.9 – 1.13 (Exercício Resolvido)
• Reutilizar (adaptando) o código de exemplos:http://www.geocities.com/ResearchTriangle/4084/js2.htm
Eventos e Objetos33
• Eventos• Objetos
• Window• Location• History• Document• Form
• TextArea, Text, Password• Select
• Frame• Image
Eventos
<BODY onLoad="alert('Página carregada.')" onUnLoad="alert('Vou sair da página...')"><P>Testando alguns eventos...</P><FORM><INPUT type="button" value="Não aperte este botão!" onClick="alert('Clique o botão Ok para formatar o HD')"></FORM></BODY>
<INPUT type="button" value= "Formatar o HD" onClick="confirm(‘Tem certeza?')">
Eventos
A, IMG*A, IMGA, IMG*A, IMGA, IMGA, IMG, Botões,SELECT
Caixa de TextoCaixa de TextoCaixa de Texto
Ponteiro do mouse entraPonteiro do mouse se movimentaPonteiro do mouse saiBotão do mouse é apertadoBotão do mouse é desapertadoClique (MouseDown + MouseUp)
Tecla apertadaTecla desapertadaTecla “clicada” (KeyDown + KeyUp)
onMouseOveronMouseMoveonMouseOutonMouseDownonMouseUponClick
onKeyDownonKeyUponKeyPress
* Funciona somente no Internet Explorer
Eventos
antes de enviar o formulárioantes de limpar o formulário
quando elemento recebe o foco quando elemento perde o foco
quando modifica-se texto ou seleção
após carregar uma página BODYantes de sair da página BODYquando a janela é redimensionadaquando a janela é arrastada
quando um erro ocorre ao carregarquando interrompe-se carregamento
onSubmitonReset
onFocusonBlur
onChange
onLoadonUnLoadonResizeonMove
onErroronAbort
FORMFORM
compts. de FORM, BODYcompts. de FORM, BODY
SELECT, TEXTAREA, INPUT:text, INPUT:passw.
BODYBODYBODYBODY
BODY, IMGIMG
Objetos
Window
Frame
Document
Location
History Link
Image
Area
Anchor
Applet
Plugin
FormOption
TextArea
Text
Password
Radio
Select
Reset
Submit
FileUpload
Hidden
Button
Window(exemplo)
<HTML><HEAD><SCRIPT language="JavaScript"><!--function AbrirJanela(){ window.open("http://www.ibpinet.com.br"); }//--></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("http://www.ibpinet.com.br", "j1");
Nome da Janelamesmo com várias chamadas
à função AbrirJanela(), somente uma janela será aberta
window.open("http://www.ibpinet.com.br", "");
Nome não especificadoNetscape: Abre só 1 janela
Internet Explorer: Abre várias janelas
Window(exemplo)
window.open("http://www.ibpinet.com.br","j1", "width=400,height=400,resizable=no");
Opções:
• width=número largura da janela• height=número altura da janela• left=número posição do canto esquerdo da janela• top=número posição do topo da janela
• resizable=yes|no permite o usuário redimensionar a janela • menubar=yes|no exibe a barra de menu• toolbar=yes|noexibe 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“
Window(exemplo)
function AbrirJanela(){ janela=window.open("","wndPropaganda","width=300,height=100"); janela.document.open(); janela.document.write("<DIV align=center><P>Você já conhece o curso IBPINET?</P>"); janela.document.write('<P><A href="http://www.ibpinet.com.br" target="_blank">');
janela.document.write("Quero Conhecer</A></P>"); janela.document.close(); janela.focus(); }
Abrir uma janela e escrever o conteúdo dinamicamente:
Window(exemplo)
<HTML><HEAD></HEAD><BODY onBlur="window.focus()"><P><A href="javascript:window.close();">Fechar</A></P><FORM> <INPUT type="button" value="Fechar" onClick="window.close()"></FORM></BODY></HTML>
Abrir uma página “bloqueadora”:
<BODY><SCRIPT><!--window.open("ibpinet.html", "", "width=300,height=100");//--></SCRIPT></BODY> index.html
ibpinet.html
http://www.ibpinet.com.br/webdesigner/mariano/javascript/aula2/janelas.html
Window(propriedades e métodos)
• Propriedades• frames[index] quadros filhos, indexados pela ordem de criação• frames.length número de quadros existentes• self janela atual• parent janela pai• top janela mais antiga• opener janela que a abriu
• Métodos• alert("texto") exibe caixa de diálogo para exibir um aviso• confirm("texto") exibe caixa de diálogo para exibir um aviso• prompt("texto","inicial") exibe caixa de diálogo para entrada de texto
• open("URL", "nome", "opções") cria janela cliente• close() fecha janela
http://www.uol.com.br/chicobuarque/construcao/menu_alfabetica1.htmhttp://www.gilbertogil.com.br
Location(propriedades e métodos)
• Propriedades• href URL completo• protocol protocolo utilizado• host nome e port do host• hostname nome do host• port port do host• path diretório e arquivo (exclui protocolo e host)• hash URL após sinal #• search URL após sinal ?
• Métodos• toString() retorna uma string• assign("string") ajusta a localização• reload(true) recarrega a página atual incondicionalmente
Location(exemplo)
<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>
History(propriedades e métodos)
• Propriedades• back penúltimo URL acessado• foward URL posterior da lista de URLs acessados• current URL da página atual• length tamanho da lista de histórico atual
• Métodos• back() volta uma posição no histórico• foward() avança uma posição no histórico• go(n) vai para o URL localizado em n posições em
relaçãoa posição atual (+n ou –n)
• go("string") vai para a página mais recente cujo título ou URLcontenha a string especificada. Obs.: o
sistemadiferencia maiúsculas e minúsculas.
• toString() retorna uma tabela HTML com ligações para todasas entradas da lista de diretório
Ex.: <A href="javascript:history.back()">Voltar</A>
Exercício: “BarraNavegacao()”
Escrever a função BarraNavegacao() que insere imagens (através de document.write)para disponibilizar botões de navegação:
• back• forward• reload• home
Obs.: Esta função poderá ser utilizada na construção de um cabeçalho para todas as páginas de seu site
Document(propriedades e métodos)
• Propriedades• title• location• lastModified
• Métodos• write("textoHTML") escreve uma linha de texto HTML• writeln("textoHTML") escreve e adiciona um avanço de linha• clear() limpa o texto do documento• close() fecha o documento
• bgColor• fgColor• linkColor• aLinkColor• vLinkColor
• form[index]• form.length• links[index]• links.length• anchors[index]• anchors.length
Ex.: window.document.write("<B>Olá</B>");window.document.bgColor="silver";
Form(propriedades e métodos)
• Propriedades• elements Array. Vetor de elementos do formulário• elements.length Número de elementos do formulário• name conteúdo do atributo NAME• action conteúdo do atributo ACTION• encoding conteúdo do atributo ENCTYPE• method valor do atributo METHOD ("get"=0; "post"=1)• target janela alvo usada para resposta após
envio doformulário (atributo TARGET)
• Métodos• submit() envia o formulário
<HTML><HEAD><SCRIPT language="JavaScript"><!--function Cadastrar(){ wndCadastro = window.open("","jc","width=300,height=80"); wndCadastro.document.open(); wndCadastro.document.write("<B>Nome: </B>"); wndCadastro.document.write(window.document.frmCadastro.txtNome.value); wndCadastro.document.write("<BR>"); wndCadastro.document.write("<B>Idade: </B>"); wndCadastro.document.write(window.document.forms[0].elements[1].value); wndCadastro.document.close(); wndCadastro.focus(); }//--></SCRIPT></HEAD>
<BODY><FORM name="frmCadastro"> Nome: <INPUT type=text size=35 name=txtNome><BR> Login: <INPUT type=text size=10 name=txtLogin></P> <INPUT type=button value="Cadastrar Dados" name="btnCadastrar" onClick="Cadastrar()"></FORM></BODY></HTML>
TextArea, Text, Password(exemplo)
elements[0]=Caixa de texto “txtNome”;elements[1]=Caixa de texto “txtLogin”;elements[2]=Botão “btnCadastrar”;
<HTML><HEAD><SCRIPT language="JavaScript"><!--function Navegar(){ var x = document.frmSites.slcSites.selectedIndex; if (x==0){} if (x==1){document.location.href="http://www.ibpinet.com.br"} if (x==2){document.location.href="http://www.nce.ufrj.br/cursos/html"} if (x==3){document.location.href="http://www.ibpinet.com.br/webdesigner/mariano"}}//--></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 Navegação</TITLE></HEAD><FRAMESET rows="50,*" frameborder=0 border=0> <FRAME name="menu" src="menu.html" scrolling="no"> <FRAME name="principal" src="branco.html"></FRAMESET></HTML>
menuframes.html
menu.html
Exercícios
• Reutilizar (adaptando) códigos de:http://www.geocities.com/ResearchTriangle/4084/js2.htm
• Ler capítulos 5 a 10 da Apostila...e fazer os exercícios!!!
Lógica de Programação44
• Variáveis• Tipos de Dados• Operadores• Tomada de Decisão (if...else)• Repetição (while e for)• Funções
• Exemplos e Exercícios
Variáveis
• Variável armazena dado• nome="Mariano";• idade=25;
• nome="Mariano"; /*não precisa declarar nem tipar a variável*/
• var nome; /*declaração sem atribuição de valor*/
• var nome="Mariano"; /*declaração com atribuição de valor*/
• Identificador de variável• letras, números e "_" (underscore)• tem que começar com um letra• case sentive nome Nome NoMe
Inteiro:»5»14509
Ponto-flutuante»14.075»1.78e-45
Tipos de Dados
• string (cadeia de letras)• “Mariano Gomes Pimentel”; • “Qualquer ‘texto’, inclusive, toda uma página HTML.”;• “123”
• number
TIP
O
REPR
ESEN
TA
ÇÃ
O
Indeterminado» NaN (Not a Number)
Infinito:» Infinity» -Infinity
VA
LOR
ES
ESPEC
IAIS
Decimal»734.25
Hexadecimal (Ex.: cores)»0xFF87C1
Octal»0677
Tipos de Dados
• true• false
• undefinedvalor ainda não definidoEx.: var nome; /* nome=undefined */
• nullvalor nulo (inválido)
• object– objetos: documento, janela, componente de formulário etc.
boolean
Operadores
• Aritméticos• * multiplicação• / divisão• + soma• - subtração• % resto
• String• + concatenação
x = 5 / 3;x = 5 % 3;x = 5 + (5 - 2) / 2;x = (5 + (5 – 2)) / 2;
nome = "Mariano";sobreNome = "Pimentel";meioNome = "Gomes";nomeCompleto = nome + " " + meioNome + " " + sobreNome;
Operadores
• Atribuição• = (Ex.: x = 5)• op= (atribuição com operação)
• Incrementais• var++ ou ++var• var-- ou --var
x += y; x = x + y;x –= y; x = x – y;x /= y; x = x / y;x *= y; x = x * y;x %= y; x = x % y;
x = 5;y = ++x;/* x=6; y=6; */
x=5;y = x++;/* y=5; x=6; */
Operadores
• Comparação• > maior• >= maior ou igual• < menor• <= menor ou igual• == igual• != diferente
if (x<10) {...}
if (senha!="12345") {alert("Senha inválida!");}
if (x==y) {...}
Operadores
• Lógicos• && e• || ou• ! not
if ( (x<y) && (y<z) ) {alert(x +" é menor que " +z);}
if ( (x<z) || (y<z) ) {...}
if !(senha=="12345") {alert("Senha inválida!");}
Tomada de Decisão
• if ... else
if (condição) { // instruções caso condição==true }else { // instruções caso condição==false }
Repetição
• for (inicialização; condição; incremento){...}
• while (condição) {...}
for (i=1; i<=1000; i = i + 1) { document.write("<P>" + i + "</P>");}
i=1;while (i<=1000) { document.write("<P>" + i + "</P>"); i = i + 1;}
Funções
• function NomeFuncao(param1, param2) {...}
function Soma(x, y) { return x + y;}
Funções nativasp.3-2
parseInt(string) Converte a string num número inteiro texto="7"; x = parseInt(texto); x = numero + 5; //x==12 (7 + 5) texto = texto + 5; //texto=="75" ("7" +"5“) x = parseInt("7.5"); //x==7 x = parseInt("7a"); //x==7
Converte a string num número real x = parseFloat("7.5"); //x==7.5
Retorna true se a string não é número texto = prompt("Entre com um número:",""); if ( isNaN(texto) ) { alert("Você não digitou um número válido.") }
Executa o conteúdo de uma string resultado = eval(“5 + 6 / 2”); // resultado = 8
escape = ("João"); // nome = "Jo%E3o" unescape("Jo%E3o"); // nome = "João"
parseFloat(string)
eval(string)
isNaN(string)
escape(string)unescape(string)
Exemplo: Antes de enviar o formulário, verificar se o campo ‘Nome’ foi preenchido
Solução<HTML><HEAD><SCRIPT language="javascript"><!--function Enviar(){ if (window.document.Cadastro.nome.value==""){ alert("O campo 'Nome' precisa ser preenchido"); window.document.Cadastro.nome.focus(); } else{ alert("Os dados do formulário foram preenchidos corretamente"); //window.document.Cadastro.submit(); }}//--></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
• Verificar se o texto é um número• Verificar se este número é inteiro• Se ambas as condições forem verdadeiras, então retornar true caso contrário, retornar false.
Passos:
<HTML><HEAD><SCRIPT language="javascript"><!--
function isInt(texto){ bValido=true; //testar se texto é um número if ( isNaN(texto) ) {bValido=false} else{ //testar se texto é um número inteiro if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false} } return bValido;}//--></SCRIPT></HEAD><BODY><SCRIPT language="javascript"><!--
numero = prompt("Digite um número inteiro:","");if ( isInt(numero) ) {alert("Ok, o número é inteiro")}else {alert("Você não digitou um número inteiro")}//--></SCRIPT></BODY></HTML>
Solução 1
function isInt(texto){ if ( isNaN(texto) ) {return false} else{ return ( parseInt(texto)==parseFloat(texto) ) }}
Solução 2
function isInt(texto){ bValido=true; if ( isNaN(texto) ) {bValido=false} else{ if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false} } return bValido;}
Exercício: Fazer um formulário que seja validado antes de ser enviado
Validar:preenchimento de Nomevalidade de Data
Exercício: Fazer uma função para escrever um “produto” na página (passando como parâmetro a imagem do produto, o nome e o preço).
Exercício: Fazer uma função para escrever uma “barra de navegação” para página anterior, posterior e inicial
Ex.: http://www.nce.ufrj.br/cursos/html
Exercício: Fazer um site que indica em que seção o cliente se encontra (indicação no frame)
Objetos Nativos55
• Math• String• Date• Array• Novos Objetos
Mathp. 4-13
random() número pseudo-aleatório entre 0 e 1
min(a, b) min(5, 7) -> 5
max(a,b) max(5, 7) -> 7
abs(x) abs(-5.7) -> 5.7
floor(x) floor(5.7) -> 5
ceil(x) ceil(5.4) -> 6
round(x) round(5.7) -> 6; round(5.4) -> 5
Ex.:x = 1 + Math.floor(Math.random()*50);
// x recebe um número entre 1 e 50
Stringp. 4-7
txt = "Mariano"
charAt(n) txt.charAt(2) "r"
indexOf("sub-string") txt.indexOf("a") 1txt.indexOf("n") 5txt.indexOf("k") -1
split("separdor") txt="20/02/1975";data = txt.split("/");
// data[0] = "20";// data[1] = "02";// data[2] = "1975";
*length; txt = "Mariano";x = txt.length; // x = 7
0 1 2 3 4 5 6
Date p. 4-15
• dataHoje = new Date();
dataHoje.getDay(); //dia da semana (0 a 6)
dataHoje.getData(); //dia do mês (1 a 31)
dataHoje.getMonth();dataHoje.getYear();dataHoje.getHour();dataHoje.getMinutes();dataHoje.getSeconds();
Arrayp. 4-10
• Armazena dados indexados
data = new Array(3);data[0] = 20;data[1] = 02;data[2] = 1975;
data = new Array(20,02,1975);
data = new Array(); //sem indexação prédefinidadata[0] = "20";data[2] = "1975";if (data[1]==null) {data[1]=prompt("Entre com o mês", "");}
txt = "20/02/1975";data = txt.split("/");data.length 3 // length é uma propriedade de Array
produtos = "1:Porta retrato PHT:21.00;2:Abajur Róse:35.50; 34:Cesta lixo valise:5.99";
produtosArray = produtos.split(";");for (i=0; i < produtosArray.length; i++){ prod = produtosArray[i].split(":"); document.write(prod[0] + "<BR>"); document.write(prod[1] + "<BR>"); document.write(prod[2] + "<BR>");}
Array(continuação)
Novos Objetosp. 4-2
function Produto(aCodigo, aNome, aPreco){ this.codigo = aCodigo; this.nome =aNome; this.preco = aPreco;}
...p1 = new Produto(1, “Porta retrato PHT”, 21.00);P2 = new Produto(2, “Abajur Róse”, 35.50);P3 = new Produto (34, “Cesta lixo valise”, 5.99);
...document.write(p1.nome);
Cookies66document.cookie =
nomeCookie=texto_escape;expires=dataGMT;
Ex.:document.cookies = "cliente=Mariano; expires= Monday, 22-Feb-99 00:00:00 GMT"document.cookies = "RG=123456789"
alert(document.cookie); //cliente=Mariano; RG=123456789
dataMorte = new Date(05,12,31);document.cookies =
"nome="+escape("João Grandão")+"; expires="+dataMorte.toGMTString();
Criando funções paraComércio-eletrônico com Cookies
function 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 funções paraComércio-eletrônico com Cookies
function CancelarCookie(nome){ diaHoje = new Date(); diaOntem = new Date( diaHoje.getTime() - 1000*60*60*24 ); diaOntemGMT = diaOntem.toGMTString(); document.cookie = nome+"=; expires=" + diaOntemGMT;}
function CancelarCompras(){ CancelarCookie("compras"); window.location.reload();}
Criando funções paraComércio-eletrônico com 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&Castiçal&Modaluz&15.90&1
Criando funções paraComércio-eletrônico com Cookies
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 funções paraComércio-eletrônico com Cookies
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(); }}
Criando funções paraComércio-eletrônico com Cookies
function ListarCompras(){ sacola=getConteudoCookie("compras"); if (sacola!=""){ produtos=sacola.split("*"); for (i=0; i<=produtos.length-1; i++){ produto = produtos[i].split("&"); document.write("<P><B>Produto:</B>"+produto[1]+" - "+
produto[2]+"<BR>"); document.write("<B>Preço:</B>"+produto[3]+"<BR>"); document.write("<B>Quantidade:</B>"+produto[4]+"<BR>"); document.write("<A href='javascript:ExcluirProduto(""+
produto[0]+"")'>Excluir Produto</A></P>"); } }}
Relógios
• id = setTimeout("funcao()", 1000);Cria um relógio (id) para chamar uma função após n milisegundos
• clearTimeout(id)Cancela o relógio
77
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"><!--var relogio;var posicao=0;
function RolarMsg(){ msg=" Seja bem vindo à página do Mariano! "; msgMontada = msg+msg; msgMontada = msgMontada.substring(posicao, posicao+msg.length); window.document.frmMensagem.txtMensagem.value=msgMontada; posicao++; if (posicao==msg.length){posicao=0} relogio = setTimeout("RolarMsg()",100);}
function Rolar(){ if (window.document.frmMensagem.chkRolar.checked) {RolarMsg()} else {clearTimeout(relogio)}}//--></SCRIPT></HEAD>
Java Applet’s(NÃO é JavaScript !) 88
<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 programação
Lógica deProgramação
•Eventos•Objetos (propriedade e métodos)•Sintaxe (for, if...else, function, etc.)•Funções nativas•Objetos nativos (Date, Array etc.)
Usuário 1 – Iniciante 2 – Bom
Programador 3 – Iniciante 4/5 – Intermediário 6 - Profissional
Em relação a JavaScript, você é:
Leigo (0)
0 – Não consegue copiar e colar código JavaScript1 - Consegue usar o código, mas não conseguir modificar parâmetros2 – Consegue modificar parâmetros, mas não “ler” o código3 – Consegue ler o código, mas não modificá-lo4 – Consegue adaptar o código (poucas coisas)5 – Desenvolver uma nova função6 – Desenvolver todo um novo programa
Auto-avaliação
Avaliação
http://www.geocities.com/ResearchTriangle/4084/
A) tjs_banner1.htm Copiar e modificar parâmetros para mostrar novos banners (0 - 2)
B) tjs_resolucao2.htmAdaptar o código para redirecionar a página em funçãoda resolução do monitor (3 - 5)
C) Contar (mostrando) quanto tempo o cliente está na página. Se decorrido mais de um minuto, abrir janela “Ajuda”.
6 – Não adaptar código algum; somente consultar apostilas5 – Adaptar códigos (p. ex., ver timesp.htm)