mariano gomes pimentel [email protected] javascript

88
Mariano Gomes Pimentel [email protected] JavaScrip t

Upload: internet

Post on 17-Apr-2015

155 views

Category:

Documents


5 download

TRANSCRIPT

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

Mariano Gomes [email protected]

JavaScript

Page 2: Mariano Gomes Pimentel mariano@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

Page 3: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Introdução

• O que é JavaScript?• Para que serve JavaScript?• Exemplos de JavaScript• Onde escrever um JavaScript?

11

Page 4: Mariano Gomes Pimentel mariano@nce.ufrj.br 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

Page 5: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 6: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 7: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Exercício:“Mestre-Cuca”

olhos0.gif

olhos315.gif

olhos45.gifolhos135.gif

olhos90.gif

olhos180.gif

olhos225.gif

olhos270.gif

olhosani.gif

Page 8: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Exemplos de JavaScript:“Olá”

<HTML>

<HEAD> <TITLE>Olá</TITLE></HEAD>

<BODY><P>Script que escreve &quot;olá&quot;:</P><SCRIPT><!-- document.write("<B>Olá!</B>");//--></SCRIPT></BODY>

Page 9: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 10: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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>

Page 11: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 12: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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é

Page 13: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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>

Page 14: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 15: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 16: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

• 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

Page 17: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 18: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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)

Page 19: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 20: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 21: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 22: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 23: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 24: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 25: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 26: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Eventos e Objetos33

• Eventos• Objetos

• Window• Location• History• Document• Form

• TextArea, Text, Password• Select

• Frame• Image

Page 27: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 28: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 29: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 30: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Objetos

Window

Frame

Document

Location

History Link

Image

Area

Anchor

Applet

Plugin

FormOption

TextArea

Text

Password

Radio

Select

Reset

Submit

FileUpload

Hidden

Button

Page 31: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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>

Page 32: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 33: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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“

Page 34: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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:

Page 35: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 36: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 37: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 38: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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>

Page 39: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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>

Page 40: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 41: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 42: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 43: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 44: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 45: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 46: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 47: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 48: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 49: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 50: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 51: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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;

Page 52: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 53: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 54: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 55: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Tomada de Decisão

• if ... else

if (condição) { // instruções caso condição==true }else { // instruções caso condição==false }

Page 56: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 57: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Funções

• function NomeFuncao(param1, param2) {...}

function Soma(x, y) { return x + y;}

Page 58: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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)

Page 59: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 60: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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>

Page 61: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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:

Page 62: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

<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

Page 63: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 64: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Exercício: Fazer um formulário que seja validado antes de ser enviado

Validar:preenchimento de Nomevalidade de Data

Page 65: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 66: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 67: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 68: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

Objetos Nativos55

• Math• String• Date• Array• Novos Objetos

Page 69: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 70: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 71: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 72: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 73: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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)

Page 74: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 75: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 76: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 77: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 78: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 79: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 80: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 81: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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(&quot;"+

produto[0]+"&quot;)'>Excluir Produto</A></P>"); } }}

Page 82: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 83: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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>

Page 84: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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>

Page 85: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 86: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 87: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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

Page 88: Mariano Gomes Pimentel mariano@nce.ufrj.br JavaScript

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)