A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Mariano Gomes Pimentel JavaScript.

Apresentações semelhantes


Apresentação em tema: "Mariano Gomes Pimentel JavaScript."— Transcrição da apresentação:

1 Mariano Gomes Pimentel JavaScript

2 Referências Websites interativos com JavaScript Helder da Rocha – IBPINET HTML dinâmico (Parte III) Ramalho – Berkeley Netscape (documentação completa) Tonys JavaScript (exemplos) HTML (para revisão)

3 Introdução O que é JavaScript? Para que serve JavaScript? Exemplos de JavaScript Onde escrever um JavaScript? 1 1

4 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

5 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

6 Exemplos de JavaScript: Maçã maca1.gifmaca2.gifmaca3.gifmaca4.gifmaca5.gif

7 Exercício: Mestre-Cuca olhos0.gif olhos315.gif olhos45.gifolhos135.gif olhos90.gif olhos180.gif olhos225.gif olhos270.gif olhosani.gif

8 Exemplos de JavaScript: Olá Olá Script que escreve "olá":

9 Exemplos de JavaScript: Rodapé, v1 OBS1: nome é uma variável armazena uma informação

10 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+" !!!" é uma expressão soma textos Exemplos de JavaScript: Conteúdo Personalizado

11 Exemplos de JavaScript: Rodapé, v2 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

12 Exemplos de JavaScript: Rodapé, v3 Página com nome do leitor Aqui escrevo qualquer coisa Rodape(); OBS: Rodape() é uma função (definida pelo programador) escreve o rodapé

13 Exemplos de JavaScript: Título e Rodapé, v1 Página com nome do leitor Titulo(); Aqui escrevo qualquer coisa Rodape();

14 Exemplos de JavaScript: Título e Rodapé, v2 function Titulo(){ document.write(" Curso de JavaScript "); } function Rodape(){ document.write(" Autor: Mariano Gomes Pimentel "); document.write(" Última Modificação: "+document.lastModified); } geral.js 1 - Introdução Titulo(); Capítulo 1 - Introdução Blá blá blá... Rodape(); capitulo1.html 2 - Fundamentos Titulo(); Capítulo 2 - Fundamentos Blá blá blá... Rodape(); capitulo2.html

15 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

16 Conceitos de programação –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 Programando 2 2

17 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

18 Conceitos de Programação Dado = informação Tipos de Dados: Mariano 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 operadores precedência stringinteiroreal (ponto-flutuante) boleano (verdadeiro ou falso)

19 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):",""); }

20 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; }

21 Conceitos de Programação Evento se alguma coisa acontece, então faça algo... EVENTO O botão, ao se clicado, chama a função Classifica()

22 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(" Bom Dia! "); window.open("http://www.ibpinet.com.br", "IBPI");

23 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

24 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 !!!

25 Exercícios Apostila, p 1.9 – 1.13 (Exercício Resolvido) Reutilizar (adaptando) o código de exemplos:

26 Eventos e Objetos 3 3 Eventos Objetos Window Location History Document Form TextArea, Text, Password Select Frame Image

27 Eventos Testando alguns eventos...

28 Eventos A, IMG* A, IMG A, IMG* A, IMG A, IMG, Botões, SELECT Caixa de Texto 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) onMouseOver onMouseMove onMouseOut onMouseDown onMouseUp onClick onKeyDown onKeyUp onKeyPress * Funciona somente no Internet Explorer

29 Eventos 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 onSubmit onReset onFocus onBlur onChange onLoad onUnLoad onResize onMove onError onAbort FORM compts. de FORM, BODY SELECT, TEXTAREA, INPUT:text, INPUT:passw. BODY BODY, IMG IMG

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

31 Window (exemplo) Abrir Janela

32 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

33 Window (exemplo) window.open("http://www.ibpinet.com.br","j1", "width=400,height=400,resizable=no"); Opções: width=númerolargura da janela height=númeroaltura da janela left=númeroposição do canto esquerdo da janela top=númeroposição do topo da janela resizable=yes|nopermite o usuário redimensionar a janela menubar=yes|noexibe a barra de menu toolbar=yes|noexibe a barra de ferramentas location=yes|noexibe a barra de endereço directories=yes|noexibe a barra de ferramentas status=yes|noexibe a barra de status scrollbars=yes|noexibe 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

34 Window (exemplo) function AbrirJanela(){ janela=window.open("","wndPropaganda","width=300,height=100"); janela.document.open(); janela.document.write (" Você já conhece o curso IBPINET? "); janela.document.write(' '); janela.document.write(" Quero Conhecer "); janela.document.close(); janela.focus(); } Abrir uma janela e escrever o conteúdo dinamicamente:

35 Window (exemplo) Fechar Abrir uma página bloqueadora: index.html ibpinet.html

36 Window (propriedades e métodos) Propriedades frames[index]quadros filhos, indexados pela ordem de criação frames.lengthnúmero de quadros existentes selfjanela atual parentjanela pai topjanela mais antiga openerjanela 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

37 Location (propriedades e métodos) Propriedades hrefURL completo protocolprotocolo utilizado hostnome e port do host hostnamenome do host portport do host pathdiretório e arquivo (exclui protocolo e host) hashURL após sinal # searchURL após sinal ? Métodos toString()retorna uma string assign("string")ajusta a localização reload(true)recarrega a página atual incondicionalmente

38 Location (exemplo)

39 History (propriedades e métodos) Propriedades backpenúltimo URL acessado fowardURL posterior da lista de URLs acessados currentURL da página atual lengthtamanho 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.: Voltar

40 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

41 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(" Olá "); window.document.bgColor="silver";

42 Form (propriedades e métodos) Propriedades elementsArray. Vetor de elementos do formulário elements.lengthNúmero de elementos do formulário nameconteúdo do atributo NAME actionconteúdo do atributo ACTION encodingconteúdo do atributo ENCTYPE methodvalor do atributo METHOD ("get"=0; "post"=1) targetjanela alvo usada para resposta após envio do formulário (atributo TARGET) Métodos submit()envia o formulário

43 Nome: Login: TextArea, Text, Password (exemplo) elements[0]=Caixa de texto txtNome; elements[1]=Caixa de texto txtLogin; elements[2]=Botão btnCadastrar;

44 Sites: IBPINET HTML Mariano Select (exemplo) slcSites.options[0]=Sites; slcSites.options[1]=IBPINET; slcSites.options[2]=HTML; slcSites.options[3]=Mariano;

45 ... function Navegar(){ var x = document.frmSites.slcSites.selectedIndex; if (x==0){} if (x==1){parent.principal.document.location.href=" "} if (x==2){parent.frames[1].document.location.href=" "} if (x==3){window.parent.principal.document.location.href= " "} }... Frame (exemplo) Menu de Navegação menuframes.html menu.html

46 Exercícios Reutilizar (adaptando) códigos de: Ler capítulos 5 a 10 da Apostila... e fazer os exercícios!!!

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

48 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

49 Inteiro: »5 »14509 Ponto-flutuante » »1.78e-45 Tipos de Dados string (cadeia de letras) Mariano Gomes Pimentel; Qualquer texto, inclusive, toda uma página HTML.; 123 number TIPO REPRESENTAÇÃO Indeterminado »NaN (Not a Number) Infinito: »Infinity »-Infinity VALORES ESPECIAIS Decimal » Hexadecimal (Ex.: cores) »0xFF87C1 Octal »0677

50 Tipos de Dados true false undefined 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

51 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;

52 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; */

53 Operadores Comparação >maior >=maior ou igual

54 Operadores Lógicos &&e ||ou !not if ( (x

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

56 Repetição for (inicialização; condição; incremento){...} while (condição) {...} for (i=1; i<=1000; i = i + 1) { document.write(" " + i + " "); } i=1; while (i<=1000) { document.write(" " + i + " "); i = i + 1; }

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

58 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) eval(string) isNaN(string) escape(string) unescape(string)

59 Exemplo: Antes de enviar o formulário, verificar se o campo Nome foi preenchido

60 Solução Nome:

61 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:

62 Solução 1

63 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; }

64 Exercício: Fazer um formulário que seja validado antes de ser enviado Validar: preenchimento de Nome validade de Data

65 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).

66 Exercício: Fazer uma função para escrever uma barra de navegação para página anterior, posterior e inicial Ex.:

67 Exercício: Fazer um site que indica em que seção o cliente se encontra (indicação no frame)

68 Objetos Nativos 5 5 Math String Date Array Novos Objetos

69 Math p 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

70 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 =

71 Date p 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();

72 Array p 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é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

73 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] + " "); document.write(prod[1] + " "); document.write(prod[2] + " "); } Array (continuação)

74 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);

75 Cookies 6 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= " alert(document.cookie);//cliente=Mariano; RG= dataMorte = new Date(05,12,31); document.cookies = "nome="+escape("João Grandão")+ "; expires="+dataMorte.toGMTString();

76 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 ""; }

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

78 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

79 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 }

80 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(); }

81 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(" Produto: "+produto[1]+" - "+ produto[2]+" "); document.write(" Preço: "+produto[3]+" "); document.write(" Quantidade: "+produto[4]+" "); document.write("Excluir Produto "); }

82 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 7 7 Obs: setTimeout() e clearTimeout() são funções nativas

83 Exemplo

84 Exemplo

85 Java Applets (NÃO é JavaScript !) 8 8

86 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.)

87 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 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 Auto-avaliação

88 Avaliação 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)


Carregar ppt "Mariano Gomes Pimentel JavaScript."

Apresentações semelhantes


Anúncios Google