Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript Mariano Gomes Pimentel mariano@nce.ufrj.br
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
1 Introdução O que é JavaScript? Para que serve JavaScript? Exemplos de JavaScript Onde escrever um JavaScript?
O que é JavaScript? É uma linguagem de programação Desenvolvida pela Netscape® Microsoft® tem o VBScript não é tanto utilizado quanto o JavaScript JavaScript também roda no Microsoft Internet Explorer® O código é escrito dentro da página HTML (client-server) Simples e Útil (para fazer coisas simples) Obs.: JavaScript NÃO É Java Java entra nas páginas HTML através de applets JavaScript é escrito dentro da página HTML 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” olhos90.gif olhos135.gif olhos45.gif olhos180.gif olhos0.gif olhosani.gif olhos225.gif olhos315.gif olhos270.gif
Exemplos de JavaScript: “Olá” <HTML> <HEAD> <TITLE>Olá</TITLE> </HEAD> <BODY> <P>Script que escreve "olá":</P> <SCRIPT> <!-- 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
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> 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: “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> Rodape(); </BODY> </HTML> OBS: Rodape() é uma função (definida pelo programador) escreve o rodapé
Exemplos de JavaScript: “Título e Rodapé, v1” <HTML> <HEAD> <TITLE>Página com nome do leitor</TITLE> <SCRIPT language="JavaScript"> <!-- 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” geral.js function Titulo(){ document.write("<H1 align=center><I>Curso de JavaScript</I></H1>"); } function Rodape(){ document.write("<HR><I>Autor: </I>Mariano Gomes Pimentel<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); capitulo1.html capitulo2.html <HTML> <HEAD> <TITLE>1 - Introdução</TITLE> <SCRIPT language="JavaScript" src="geral.js"> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo();</SCRIPT> <H2>Capítulo 1 - Introdução</H2> <P>Blá blá blá...</P> <SCRIPT>Rodape();</SCRIPT> </BODY> <HTML> <HEAD> <TITLE>2 - Fundamentos</TITLE> <SCRIPT language="JavaScript" src="geral.js"> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo();</SCRIPT> <H2>Capítulo 2 - Fundamentos</H2> <P>Blá blá blá...</P> <SCRIPT>Rodape();</SCRIPT> </BODY>
Onde escrever um JavaScript? Solução 1: Embutido na página HTML 1.1 - Como evento de um elemento (IMG, A, INPUT etc): Maçã Mestre-Cuca 1.2 - Como elemento SCRIPT dentro de BODY: Olá Rodapé, v1 Conteúdo Personalisado Rodapé, v2 1.3 - Como função, dentro de HEAD Rodapé, v3 Título e Rodapé, v1 Solução 2: Num arquivo a ser importado Título e Rodapé, v2
2 Programando Conceitos de programação O que é preciso para Dados, Variáveis, Expressões e Operadores Tomada de decisão, Repetição Funções, Eventos, Objetos O que é preciso para programar em JavaScript? Exercícios
Conceitos de Programação JavaScript linguagem de programação processar informações resolver um problema Processar informações (ou seja, resolver um problema) exige um tipo de pensamento particular Lógica de Programação
Conceitos de Programação Dado = informação Tipos de Dados: “Mariano” 75 1.57 true Variável armazena dado nome = “Mariano” Idade = 25 Expressão e Operador opera dados x = (y – 5) / 7 é diferente de x = y – 5 / 7 string inteiro real (ponto-flutuante) boleano (verdadeiro ou falso) operadores operadores precedência
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ção x = ""; 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> EVENTO O 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 a Lógica de Programação !!! Algoritmo
O que é preciso para programar em JavaScript? 3 passos para desenvolver a Lógica de programação: 1 – Faça exercícios 2 – Faça mais exercícios 3 - Continue fazendo ! desenvolver a Lógica de Programação !!!
Exercícios Apostila, p 1.9 – 1.13 (Exercício Resolvido) Reutilizar (adaptando) o código de exemplos: http://www.geocities.com/ResearchTriangle/4084/js2.htm
3 Eventos e Objetos Eventos Objetos Window Location History Document Form TextArea, Text, Password Select Frame Image
Eventos <BODY onLoad="alert('Página carregada.')" onUnLoad="alert('Vou sair da página...')"> <P>Testando alguns eventos...</P> <FORM> <INPUT type="button" value="Não aperte este botão!" onClick="alert('Clique o botão Ok para formatar o HD')"> </FORM> </BODY> <INPUT type="button" value= "Formatar o HD" onClick="confirm(‘Tem certeza?')">
Eventos Ponteiro do mouse entra Ponteiro do mouse se movimenta onMouseOver onMouseMove onMouseOut onMouseDown onMouseUp onClick onKeyDown onKeyUp onKeyPress Ponteiro do mouse entra Ponteiro do mouse se movimenta Ponteiro do mouse sai Botão do mouse é apertado Botão do mouse é desapertado Clique (MouseDown + MouseUp) Tecla apertada Tecla desapertada Tecla “clicada” (KeyDown + KeyUp) A, IMG* A, IMG A, IMG, Botões, SELECT Caixa de Texto * Funciona somente no Internet Explorer
Eventos onSubmit onReset onFocus onBlur onChange onLoad onUnLoad onResize onMove onError onAbort antes de enviar o formulário antes de limpar o formulário quando elemento recebe o foco quando elemento perde o foco quando modifica-se texto ou seleção após carregar uma página BODY antes de sair da página BODY quando a janela é redimensionada quando a janela é arrastada quando um erro ocorre ao carregar quando interrompe-se carregamento FORM compts. de FORM, BODY SELECT, TEXTAREA, INPUT:text, INPUT:passw. BODY BODY, IMG IMG
Objetos TextArea Text Password Radio Select Reset Submit FileUpload Hidden Button Frame Document Location History Link Image Area Anchor Applet Plugin Form Window Option
Window (exemplo) <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- 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 Janela mesmo com várias chamadas à função AbrirJanela(), somente uma janela será aberta window.open("http://www.ibpinet.com.br", ""); Nome não especificado Netscape: Abre só 1 janela Internet Explorer: Abre várias janelas
Window (exemplo) window.open("http://www.ibpinet.com.br","j1", "width=400,height=400,resizable=no"); Opções: width=número largura da janela height=número altura da janela left=número posição do canto esquerdo da janela top=número posição do topo da janela resizable=yes|no permite o usuário redimensionar a janela menubar=yes|no exibe a barra de menu toolbar=yes|no exibe a barra de ferramentas location=yes|no exibe a barra de endereço directories=yes|no exibe a barra de ferramentas status=yes|no exibe a barra de status scrollbars=yes|no exibe as barras de rolamento Obs.: Quando uma opção do tipo yes|no é apenas declarada, seu valor é yes. Caso contrário, seu valor é no. Ex.: "width=400, height=400, menubar, status“
Abrir uma janela e escrever o conteúdo dinamicamente: Window (exemplo) Abrir uma janela e escrever o conteúdo dinamicamente: function AbrirJanela(){ janela=window.open("","wndPropaganda","width=300,height=100"); janela.document.open(); janela.document.write("<DIV align=center><P>Você já conhece o curso IBPINET?</P>"); janela.document.write('<P><A href="http://www.ibpinet.com.br" target="_blank">'); janela.document.write("Quero Conhecer</A></P>"); janela.document.close(); janela.focus(); }
Window (exemplo) Abrir uma página “bloqueadora”: ibpinet.html <HEAD></HEAD> <BODY onBlur="window.focus()"> <P><A href="javascript:window.close();">Fechar</A></P> <FORM> <INPUT type="button" value="Fechar" onClick="window.close()"> </FORM> </BODY> </HTML> ibpinet.html <BODY> <SCRIPT><!-- window.open("ibpinet.html", "", "width=300,height=100"); //--> </SCRIPT> </BODY> index.html http://www.ibpinet.com.br/webdesigner/mariano/javascript/aula2/janelas.html
Window (propriedades e métodos) frames[index] quadros filhos, indexados pela ordem de criação frames.length número de quadros existentes self janela atual parent janela pai top janela mais antiga opener janela que a abriu Métodos alert("texto") exibe caixa de diálogo para exibir um aviso confirm("texto") exibe caixa de diálogo para exibir um aviso prompt("texto","inicial") exibe caixa de diálogo para entrada de texto open("URL", "nome", "opções") cria janela cliente close() fecha janela http://www.uol.com.br/chicobuarque/construcao/menu_alfabetica1.htm http://www.gilbertogil.com.br
Location (propriedades e métodos) href URL completo protocol protocolo utilizado host nome e port do host hostname nome do host port port do host path diretório e arquivo (exclui protocolo e host) hash URL após sinal # search URL após sinal ? Métodos toString() retorna uma string assign("string") ajusta a localização reload(true) recarrega a página atual incondicionalmente
Location (exemplo) <BODY> <SCRIPT language="JavaScript"> <!-- alert("Você está em "+ window.location.href); novoHREF=prompt("entre com um novo endereço:","http://"); window.location.href=novoHREF; //--> </SCRIPT>
History (propriedades e métodos) back penúltimo URL acessado foward URL posterior da lista de URLs acessados current URL da página atual length tamanho da lista de histórico atual Métodos back() volta uma posição no histórico foward() avança uma posição no histórico go(n) vai para o URL localizado em n posições em relação a posição atual (+n ou –n) go("string") vai para a página mais recente cujo título ou URL contenha a string especificada. Obs.: o sistema diferencia maiúsculas e minúsculas. toString() retorna uma tabela HTML com ligações para todas as entradas da lista de diretório Ex.: <A href="javascript:history.back()">Voltar</A>
Exercício: “BarraNavegacao()” Escrever a função BarraNavegacao() que insere imagens (através de document.write) para disponibilizar botões de navegação: back forward reload home Obs.: Esta função poderá ser utilizada na construção de um cabeçalho para todas as páginas de seu site
Document (propriedades e métodos) title location lastModified Métodos write("textoHTML") escreve uma linha de texto HTML writeln("textoHTML") escreve e adiciona um avanço de linha clear() limpa o texto do documento close() fecha o documento bgColor fgColor linkColor aLinkColor vLinkColor form[index] form.length links[index] links.length anchors[index] anchors.length Ex.: window.document.write("<B>Olá</B>"); window.document.bgColor="silver";
Form (propriedades e métodos) elements Array. Vetor de elementos do formulário elements.length Número de elementos do formulário name conteúdo do atributo NAME action conteúdo do atributo ACTION encoding conteúdo do atributo ENCTYPE method valor do atributo METHOD ("get"=0; "post"=1) target janela alvo usada para resposta após envio do formulário (atributo TARGET) Métodos submit() envia o formulário
TextArea, Text, Password (exemplo) <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- 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> elements[0]=Caixa de texto “txtNome”; elements[1]=Caixa de texto “txtLogin”; elements[2]=Botão “btnCadastrar”;
Select (exemplo) <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> slcSites.options[0]=“Sites”; slcSites.options[1]=“IBPINET”; slcSites.options[2]=“HTML”; slcSites.options[3]=“Mariano”;
Frame (exemplo) menuframes.html menu.html <HTML> <HEAD><TITLE>Menu de Navegação</TITLE></HEAD> <FRAMESET rows="50,*" frameborder=0 border=0> <FRAME name="menu" src="menu.html" scrolling="no"> <FRAME name="principal" src="branco.html"> </FRAMESET> </HTML> menu.html ... function Navegar(){ var x = document.frmSites.slcSites.selectedIndex; if (x==0){} if (x==1){parent.principal.document.location.href="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"} }
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!!!
4 Lógica de Programação Variáveis Tipos de Dados Operadores Tomada de Decisão (if...else) Repetição (while e for) Funções Exemplos e Exercícios
Variáveis Variável armazena dado Identificador de variável nome="Mariano"; idade=25; nome="Mariano"; /*não precisa declarar nem tipar a variável*/ var nome; /*declaração sem atribuição de valor*/ var nome="Mariano"; /*declaração com atribuição de valor*/ Identificador de variável letras, números e "_" (underscore) tem que começar com um letra case sentive nome Nome NoMe
Tipos de Dados string (cadeia de letras) number TIPO “Mariano Gomes Pimentel”; “Qualquer ‘texto’, inclusive, toda uma página HTML.”; “123” number Indeterminado NaN (Not a Number) Infinito: Infinity -Infinity VALORES ESPECIAIS Inteiro: 5 14509 Ponto-flutuante 14.075 1.78e-45 TIPO Decimal 734.25 Hexadecimal (Ex.: cores) 0xFF87C1 Octal 0677 REPRESENTAÇÃO
Tipos de Dados true false boolean undefined null object valor ainda não definido Ex.: var nome; /* nome=undefined */ null valor nulo (inválido) object objetos: documento, janela, componente de formulário etc. boolean
Operadores Aritméticos String * multiplicação / divisão + soma - subtração % resto String + concatenação x = 5 / 3; x = 5 % 3; x = 5 + (5 - 2) / 2; x = (5 + (5 – 2)) / 2; nome = "Mariano"; sobreNome = "Pimentel"; meioNome = "Gomes"; nomeCompleto = nome + " " + meioNome + " " + sobreNome;
Operadores Atribuição Incrementais = (Ex.: x = 5) op= (atribuição com operação) Incrementais var++ ou ++var var-- ou --var x += y; x = x + y; x –= y; x = x – y; x /= y; x = x / y; x *= y; x = x * y; x %= y; x = x % y; x = 5; y = ++x; /* x=6; y=6; */ x=5; y = x++; /* y=5; x=6; */
Operadores Comparação > maior >= maior ou igual < menor <= menor ou igual == igual != diferente if (x<10) {...} if (senha!="12345") {alert("Senha inválida!");} if (x==y) {...}
Operadores Lógicos && e || ou ! not if ( (x<y) && (y<z) ) {alert(x +" é menor que " +z);} if ( (x<z) || (y<z) ) {...} if !(senha=="12345") {alert("Senha inválida!");}
Tomada de Decisão if ... else if (condição) { // instruções caso condição==true } else { // instruções caso condição==false
Repetição for (inicialização; condição; incremento){...} while (condição) {...} for (i=1; i<=1000; i = i + 1) { document.write("<P>" + i + "</P>"); } i=1; while (i<=1000) { document.write("<P>" + i + "</P>"); i = i + 1; }
Funções function NomeFuncao(param1, param2) {...} function Soma(x, y) { return x + y; }
Funções nativas p.3-2 parseInt(string) Converte a string num número inteiro texto="7"; x = parseInt(texto); x = numero + 5; //x==12 (7 + 5) texto = texto + 5; //texto=="75" ("7" +"5“) x = parseInt("7.5"); //x==7 x = parseInt("7a"); //x==7 Converte a string num número real x = parseFloat("7.5"); //x==7.5 Retorna true se a string não é número texto = prompt("Entre com um número:",""); if ( isNaN(texto) ) { alert("Você não digitou um número válido.") } Executa o conteúdo de uma string resultado = eval(“5 + 6 / 2”); // resultado = 8 escape = ("João"); // nome = "Jo%E3o" unescape("Jo%E3o"); // nome = "João" parseFloat(string) isNaN(string) eval(string) escape(string) unescape(string)
Exemplo: Antes de enviar o formulário, verificar se o campo ‘Nome’ foi preenchido
Solução <HTML> <HEAD> <SCRIPT language="javascript"> <!-- 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 Passos: Verificar se o texto é um número Verificar se este número é inteiro Se ambas as condições forem verdadeiras, então retornar true caso contrário, retornar false.
Solução 1 function isInt(texto){ bValido=true; <HTML> <HEAD> <SCRIPT language="javascript"><!-- 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")} </BODY></HTML>
Solução 2 function isInt(texto){ if ( isNaN(texto) ) {return false} else{ return ( parseInt(texto)==parseFloat(texto) ) } } function isInt(texto){ bValido=true; if ( isNaN(texto) ) {bValido=false} else{ if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false} } return bValido;
Exercício: Fazer um formulário que seja validado antes de ser enviado Validar: preenchimento de Nome validade de Data
Exercício: Fazer uma função para escrever um “produto” na página (passando como parâmetro a imagem do produto, o nome e o preço).
Exercício: Fazer uma função para escrever uma “barra de navegação” para página anterior, posterior e inicial Ex.: 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 Nativos 5 Math String Date Array Novos Objetos
Math p. 4-13 random() número pseudo-aleatório entre 0 e 1 min(a, b) min(5, 7) -> 5 max(a,b) max(5, 7) -> 7 abs(x) abs(-5.7) -> 5.7 floor(x) floor(5.7) -> 5 ceil(x) ceil(5.4) -> 6 round(x) round(5.7) -> 6; round(5.4) -> 5 Ex.: x = 1 + Math.floor(Math.random()*50); // x recebe um número entre 1 e 50
String p. 4-7 txt = "Mariano" charAt(n) txt.charAt(2) "r" indexOf("sub-string") txt.indexOf("a") 1 txt.indexOf("n") 5 txt.indexOf("k") -1 split("separdor") txt="20/02/1975"; data = txt.split("/"); // data[0] = "20"; // data[1] = "02"; // data[2] = "1975"; *length; txt = "Mariano"; x = txt.length; // x = 7 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();
Array p. 4-10 Armazena dados indexados data = new Array(3); data = new Array(); //sem indexação prédefinida data[0] = "20"; data[2] = "1975"; if (data[1]==null) {data[1]=prompt("Entre com o mês", "");} txt = "20/02/1975"; data = txt.split("/"); data.length 3 // length é uma propriedade de Array
Array (continuação) produtos = "1:Porta retrato PHT:21.00;2:Abajur Róse:35.50; 34:Cesta lixo valise:5.99"; produtosArray = produtos.split(";"); for (i=0; i < produtosArray.length; i++){ prod = produtosArray[i].split(":"); document.write(prod[0] + "<BR>"); document.write(prod[1] + "<BR>"); document.write(prod[2] + "<BR>"); }
Novos Objetos p. 4-2 function Produto(aCodigo, aNome, aPreco){ this.codigo = aCodigo; this.nome =aNome; this.preco = aPreco; } ... p1 = new Produto(1, “Porta retrato PHT”, 21.00); P2 = new Produto(2, “Abajur Róse”, 35.50); P3 = new Produto (34, “Cesta lixo valise”, 5.99); document.write(p1.nome);
6 Cookies document.cookie = nomeCookie=texto_escape; expires=dataGMT; document.cookies = "cliente=Mariano; expires= Monday, 22-Feb-99 00:00:00 GMT" document.cookies = "RG=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 para Comércio-eletrônico com Cookies function getConteudoCookie(nome){ cookies = document.cookie.split("; "); for (i=0; i<=cookies.length-1; i++){ cookies[i] = cookies[i].split("="); nomeCookie = unescape(cookies[i][0]); if (nomeCookie==nome) {return unescape(cookies[i][1])} } return "";
Criando funções para Comé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 para Comé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 para Comé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 para Comé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 para Comé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>"); }
7 Relógios id = setTimeout("funcao()", 1000); clearTimeout(id) Cria um relógio (id) para chamar uma função após n milisegundos clearTimeout(id) Cancela o relógio Obs: setTimeout() e clearTimeout() são funções nativas
Exemplo <HTML> <HEAD> </HEAD> <BODY onLoad="Rolar()"> <FORM name="frmMensagem"> <DIV align=center> <INPUT type="text" size=40 name="txtMensagem"> <INPUT type="checkbox" checked name="chkRolar" onClick="Rolar()"> </DIV> </FORM> </BODY> </HTML>
Exemplo <HEAD> <SCRIPT language="javascript"> <!-- 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 !) 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 programação Lógica de Programação Eventos Objetos (propriedade e métodos) Sintaxe (for, if...else, function, etc.) Funções nativas Objetos nativos (Date, Array etc.) Lógica de Programação
Auto-avaliação 0 – Não consegue copiar e colar código JavaScript 1 - Consegue usar o código, mas não conseguir modificar parâmetros 2 – Consegue modificar parâmetros, mas não “ler” o código 3 – Consegue ler o código, mas não modificá-lo 4 – Consegue adaptar o código (poucas coisas) 5 – Desenvolver uma nova função 6 – Desenvolver todo um novo programa Leigo (0) Usuário 1 – Iniciante 2 – Bom Em relação a JavaScript, você é: Programador 3 – Iniciante 4/5 – Intermediário 6 - Profissional
Avaliação http://www.geocities.com/ResearchTriangle/4084/ A) tjs_banner1.htm Copiar e modificar parâmetros para mostrar novos banners (0 - 2) B) tjs_resolucao2.htm Adaptar o código para redirecionar a página em função da resolução do monitor (3 - 5) C) Contar (mostrando) quanto tempo o cliente está na página. Se decorrido mais de um minuto, abrir janela “Ajuda”. 6 – Não adaptar código algum; somente consultar apostilas 5 – Adaptar códigos (p. ex., ver timesp.htm)