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

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

Mariano Gomes Pimentel

Apresentações semelhantes


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

1 Mariano Gomes Pimentel mariano@nce.ufrj.br
JavaScript Mariano Gomes Pimentel

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

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

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çã”
<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

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

8 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> ", "width": "800" }

9 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: nome é uma variável  armazena uma informação.", "width": "800" }

10 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 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.", "width": "800" }

11 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 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.", "width": "800" }

12 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é

Aqui escrevo qualquer coisa

Rodape(); OBS: Rodape() é uma função (definida pelo programador)  escreve o rodapé.", "width": "800" }

13 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>

Aqui escrevo qualquer coisa

", "width": "800" }

14 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>

Capítulo 1 - Introdução

Blá blá blá...

2 - Fundamentos

Capítulo 2 - Fundamentos

Blá blá blá...

", "width": "800" }

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

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) / é diferente de x = y – 5 / 7 string inteiro real (ponto-flutuante) boleano (verdadeiro ou falso) operadores operadores precedência

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... <FORM> <INPUT type="button" value="Par ou Impar?" onClick="Classifica()"> </FORM> 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("<B>Bom Dia!</B>"); 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 3 Eventos e Objetos Eventos Objetos Window Location History Document
Form TextArea, Text, Password Select Frame Image

27 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?')">

28 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

29 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

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

31 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> Abrir Janela ", "width": "800" }

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ú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“

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

35 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 index.html. http://www.ibpinet.com.br/webdesigner/mariano/javascript/aula2/janelas.html.", "width": "800" }

36 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

37 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

38 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> ", "width": "800" }

39 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>

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

42 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

43 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”;

Nome:
Login:

elements[0]=Caixa de texto txtNome ; elements[1]=Caixa de texto txtLogin ; elements[2]=Botão btnCadastrar ;", "width": "800" }

44 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”;

slcSites.options[0]= Sites ; slcSites.options[1]= IBPINET ; slcSites.options[2]= HTML ; slcSites.options[3]= Mariano ;", "width": "800" }

45 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"} }

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

47 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

48 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

49 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

50 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

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

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

53 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) {...}

54 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!");}

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("<P>" + i + "</P>"); } i=1; while (i<=1000) { document.write("<P>" + i + "</P>"); 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) isNaN(string) eval(string) escape(string) unescape(string)

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

60 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>

Nome:
", "width": "800" }

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

62 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>

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

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 Math String Date Array Novos Objetos

69 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

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

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

72 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

73 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>"); }

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

82 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

83 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>

84 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> ", "width": "800" }

85 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>

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.) Lógica de Programação

87 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

88 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)


Carregar ppt "Mariano Gomes Pimentel"

Apresentações semelhantes


Anúncios Google