Você está na página 1de 406

INF1030 Conceitos de Informtica INF1407 Programao para a Web

Alexandre Meslin
meslin@inf.puc-rio.br

*Ementa HTML XHTML CSS Javascript


Variveis Operadores Comandos Objetos

*Referncias
HTML/CSS Criando Sites com HTML, Silva, M, Novatec Design Criativo com HTML, Weinman, L e outros, Cincia Moderna Javascript Use a Cabea Javascript, Monison, M, Altabooks S Javascript, Yank, K, Bookman

Bibliografia

Na Internet

http://cursos.meslin.com.br/home/javascript http://www.w3.org http://www.w3schools.com

*Critrio de Avaliao INF1030 apenas


Critrio de avaliao: categoria 1
Categoria I A avaliao do aproveitamento feita pelo professor ser expressa por meio de dois graus de qualificao, apresentados numericamente, em escala de zero (0) a dez (10), do seguinte modo:
a) o primeiro grau de qualificao, de peso dois (2), representando o aproveitamento de aluno na disciplina, ser obtido atravs de testes, relatrios, trabalho ou prova realizada no meio do perodo letivo, tendo em vista um programa parcialmente lecionado; b) o segundo grau de qualificao, de peso trs (3), resultante de prova escrita, oral ou de projeto e sua defesa, cobrindo toda ou parte da matria lecionada no perodo letivo. Neste grau podem ser includos testes e relatrios relativos a programa parcialmente lecionado; c) o Grau Final ser calculado conforme um dos dois casos a seguir:
c-1) Se o segundo grau for igual ou maior que trs (3,0), o Grau Final ser a mdia ponderada das duas avaliaes, de acordo com os itens anteriores. c-2) Se o segundo grau for menor que trs (3,0), o Grau Final ser calculado tendo o primeiro grau peso um (1) e o segundo grau peso trs (3).

*Sistema de Avaliao INF1030 apenas

G1:
1 trabalho prtico individual em sala de aula 2 dias de trabalho = 1 nota

G2:
1 trabalho prtico individual em sala de aula 2 dias de trabalho = 1 nota

Obs.: no temos 2a chamada


5

*Data das Avaliaes INF1030 apenas

G1:
13/09/2013 20/09/2013

G2:
01/11/2013 08/11/2013
6

*Programao das Aulas INF1030 apenas


Data Semana Aula #Descrio 16/08/2013 6 1Parte 1 - HTML + Web + Exerccios (30 min) 23/08/2013 6 2Javascript+exerccios 30/08/2013 6 3Aula 3 - Desvio Condicional 06/09/2013 6 4exerccios 13/09/2013 6 5Prova prtica 20/09/2013 6 6Prova prtica 27/09/2013 6 7Aula 4 - Loops + Exerccios 04/10/2013 6 8Aula 5 - Objetos 11/10/2013 6 9Aula 6 - Mais Objetos 18/10/2013 6 10Exerccios 25/10/2013 6 11Exerccios 01/11/2013 6 12Prova prtica 08/11/2013 6 13Prova prtica 15/11/2013 6 Proclamao da Repblica
7

Perguntas

Aula 1 HTML

*Reviso
Servidor web (web server)
Armazena pginas web

Mquina cliente: requista pginas web


Seu computador o cliente quando voc requisita uma pgina web

A Internet conecta o servidor e o cliente web Seu site web


Armazenado em um servidor web Composto por:
Pginas HTML Arquivos de imagem

O servidor web um computador


Possui pastas (diretrios) e arquivos
10

*Cliente x Servidor

11

*Arquivo HTML
O que uma pgina web?
Uma pgina um arquivo texto (abra uma pgina qualquer e utilize "visualizar fonte")

Browser (navegador)
Interpreta o HTML Exibe a pgina formatada Ex (2013).:
Internet Explorer (14,3%) Firefox (30,2%) Chrome (48,4%) Safari (4,2%) Opera (1,9%)
12

*HTML Hypertext Markup Language (Linguagem de Marcao de Hipertexto)


Hipertexto: links dentro de uma pgina web HTML no uma linguagem de programao HTML utiliza tags para realizar a marcao do texto das pginas web

13

*Tags HTML Tags de marcao HTML so chamadas simplesmente de tags HTML


Tags HTML so palavras chaves dentro de < e > como por exemplo <html> Tags HTML geralmente aparecem aos pares como <b> e </b> A primeira tag de um par a tag de abertura e a segunda a tag de fechamento

14

*Documento HTML = Pgina Web Documentos HTML:


Descrevem pginas web Contm tags HTML e texto puro Tambm chamadas de pginas web

A finalidade de um browser ler o documento HTML e o exibir como uma pgina web O browser no mostra as tags HTML, mas as utiliza para interpretar o contedo da pgina
15

*Documento HTML = Pgina Web


<html> <body> <h1>Meu primeiro cabealho</h1> <p>Meu primeiro pargrafo</p> </body> </html>

16

*Elementos HTML
Um elemento HTML tudo desde a tag de abertura at a tag de fechamento

Tag de abertura <p> <br />

Elemento contido Este um pargrafo

Tag de fechamento </p> </a>

<a href="pagina.html"> Este um link

17

*Sintaxe dos elementos HTML


Um elemento HTML inicia com uma tag de abertura Um elemento HTML termina com uma tag de fechamento O elemento contido qualquer coisa entre o incio e o fim Algumas tags HTML tem contedo vazio Elementos vazios so fechados na tag de abertura Algumas tags podem possuir atributos

18

*Elementos HTML Aninhados A maior parte dos elementos HTML podem ser aninhados podem conter outros elementos HTML Um documento HTML consiste de elementos HTML aninhados
<html> <body> <h1>Meu primeiro cabealho</h1> <p>Meu <b>pri<i>meiro</i> pargrafo</b></p> </body> </html>
19

*No esquea a tag de fechamento!


A maior parte dos browsers iro exibir corretamente mesmo se voc esquecer as tags de fechamento
<p>Isto um pargrafo <p>Isto outro pargrafo

O exemplo acima ir funcionar na maioria dos browsers, mas no confine nisto. Esquecer a tag de fechamento pode causar resultados inesperados ou erros em verses futuras de browsers Obs.: verses futuras de HTML no permitiro que voc no use as tags de fechamento
20

*Elementos HTML vazios Elementos HTML sem contedo so chamados de elementos vazios Elementos vazios podem ser fechados na tag de abertura <br> um elemento que no possui uma tag de fechamento Em XHTML, XML e verses futuras de HTML, todos os elementos devero ser fechados Utilize <... /> em tags vazias (sem contedo) - <br />
21

*Atributos HTML Elementos HTML podem ter atributos Atributos:


Fornecem informaes adicionais sobre o elemento Somente so especificados na tag de abertura Aparecem em pares do tipo nome/valor: nome="valor"

22

*Exemplo de atributo Links HTML so especificados pela tag <a> O endereo do link fornecido como um atributo
<a href='http://www.meslin.com.br'>Este um link</a>

23

*Utilize cotas para valores dos atributos Os valores dos atributos devem ser escritos entre aspas " ou entre plics ' (aspas simples)
<a href="http://www.meslin.com.br">Este um link</a> <a href='http://www.meslin.com.br'>Este um link</a>

24

*Dica: utilize letras minsculas


Tags HTML no diferenciam letras maisculas de minsculas.
<P> e <p> significam a mesma coisa

W3C recomenda o uso de letras minsculas em HTML 4 Futuras verses de HTML e XHTML utilizaro somente tags com letras minsculas Nome do atributo e seu valor tambm no diferenciam maisculas de minsculas Da mesma forma, o uso de letras minsculas para o nome do atributo recomendvel Utilize tambm letras minsculas para o valor do atributo, exceto quando o uso de letras maisculas for necessrio
25

*Cabealhos HTML
Cabealhos so definidos por tags de <h1> (maior letra) at <h6> (menor letra) Exemplo:
<html> <body> <h1>Este um cabealho H1</h1> <h2>Este um cabealho H2</h2> <h3>Este um cabealho H3</h3> </body> </html>

Obs.: o browser adiciona uma quebra de linha antes e depois de um cabealho

26

*Linhas em HTML
A tag <hr /> utilizada para criar uma linha horizontal
<html> <body> <h1>Este um cabealho H1</h1> <hr /> <h2>Este um cabealho H2</h2> <hr /> <h3>Este um cabealho H3</h3> </body> </html>

27

*Comentrio HTML Comentrios devem ser includos nos cdigos HTML para melhorar a legibilidade e o entendimento Comentrios so ignorados pelo browser eles no so exibidos
<!-- este um comentrio -->

Ateno: existe um ponto de exclamao no incio da tag, mas no no final


28

*Pargrafos
Pargrafos so definidos pela tag <p>
<html> <body> <p>Isto um pargrafo</p> <p>Isto outro pargrafo</p> </body> </html>

29

*Quebra de linhas
Utilize <br /> se voc quiser quebrar uma linha sem comear um novo pargrafo
<html> <body> <p>Isto um pargrafo</p> <p>Isto outro pargrafo</p> <p>Este um <br />par<br /> grafo com quebra de linha</p> </body> </html>

30

*Formatao

31

*Atributo style Utilize no lugar das seguintes tags:


Tag <center> <font> <s> <u> Estilo style="text-align: center;" style="color:#ABACA7; font-family: courier; font-size: 10px" style="text-decoration:line-through;" style="text-decoration: underline;"

E dos seguintes atributos:


Atributo align bgcolor Estilo style="text-align: center;" style="background-color: #ABACA7"

32

*Exemplos de style
Cor do fundo:
Define uma cor de fundo para uma pgina: <body style="background-color:yellow">

Tipo, cor e tamanho de fonte:


Define um estilo para um pargrafo <p style="font-family:courier new; color:red; font-size:20px"> <p style="font-family:courier new; color:#FF0000; fontsize:20px">

Alinhamento de texto:
Define um alinhamento para um cabealho <h1> <h1 style="text-align:center">
33

*Modificando fontes
A tag <font> desaconselhada Devemos utilizar o atributo style
<html> <body> <h1 style="font-family:verdana">Cabealho</h1> <p style="font-family:courier">Pargrafo</p> </body> </html>

Tamanho de fontes
<html> <body> <h1 style="font-size:150%">Cabealho</h1> <p style="font-size:80%">Pargrafo</p> </body> </html>
34

*Mais fontes
Cor do texto
<html> <body> <h1 style="color:blue">Cabealho</h1> <p style="color:red">Pargrafo</p> </body> </html>

Combinando tudo...
<html> <body> <p style="font-family:verdana;font-size:80%;color:green"> Este um pargrafo em verdana, com 80% do tamanho na cor verde. </p> </body> </html>
35

*Folha de estilo externa


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Folha de estilo externa</title> <link rel="stylesheet" type="text/css" href="externo.css"> </head> <body> <p>Um pargrafo.</p> <p>Outro pargrafo.</p> </body> </html>

body {background-color: red} p {margin-left: 20px}

externo.css
36

*Mais sobre estilos Uma folha de estilos interna


<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>

37

*Mais sobre estilos Estilos inline


<p style="color:red; margin-left:20px"> Pargrafo </p>

38

*Hiperlinks, ncoras e links Hiperlink uma referncia a um recurso na web Hiperlink pode apontar para qualquer recurso da web:
Uma pgina HTML Uma imagem Um arquivo de som Um arquivo de filme

ncora o termo utilizado para o destino de um hiperlink dentro de um documento


39

*Um link HTML


Sintaxe:
<a href="url">texto do link</a>

Obs.: o "texto do link" no precisa ser um texto, pode ser uma imagem ou qualquer outro elemento HTML O atributo href define o endereo destino do link
<a href='http://www.meslin.com.br'>Meu site</a>

O cdigo acima ir ser exibido em um browser da seguinte forma:


Meu site
40

*O atributo target O atributo target define onde o documento referenciado dever ser aberto
<a href="http://www.meslin.com.br" target="_blank">Meu site</a>

O cdigo acima ir abrir o documento em uma nova janela do browser

41

*O atributo name
Quando o atributo name utilizado, a tag <a> define uma ncora dentro de um documento HTML Uma ncora invisvel para o usurio Sintaxe:
<a name="lugar">qualquer contedo (geralmente vazio)</a>

Um link para esta ncora dentro da mesma pgina:


<a href="#lugar">o link</a>

Um link para esta ncora em outra pgina web


<a href="pagina.html#lugar">o link</a>

Um link para esta ncora em outra pgina de outro site


<a href="http://www.meslin.com.br/pagina.html#lugar">o link</a>
42

*Imagens
Em HTML, uma imagem definida por uma tag <img> A tag <img> vazia O atributo src indica o endereo (url) da imagem Sintaxe:
<img src="url" />

Exemplo:
Imagem no mesmo diretrio do arquivo HTML <img src="imagem.gif"> Imagem em outro diretrio <img src="diretorio/imagem.gif" /> Imagem em outro site <img src="http://www.meslin.com.br/diretorio/imagem.gif" />

43

*O atributo alt
Utilizado para definir um texto alternativo Texto definido pelo autor Ferramentas de acessibilidade utilizam este texto para descrever a imagem para deficientes visuais O texto ser mostrado
Se o endereo da imagem estiver errado Se a imagem demorar a ser carregada Se o usurio desabilitar a possibilidade do browser exibir imagem

Sintaxe:
<img src="imagem.gif" alt="um texto alternativo"/>
44

*Tabelas Definio da tabela em si:


<table> .... </table>

Atributos:
border = largura da borda em pixels cellspacing = espao entre as clulas cellpadding = espao entre o texto e as bordas width = largura da tabela

45

*Tabelas
Definio dos elementos da tabela:
<tr>....</tr> - Linha <th>....</th> - Cabealho <td>....</td> - Clula Atributos:
valign = alinhamento vertical (TOP, MIDDLE ou BOTTOM) align = alinhamento horizontal (LEFT, CENTER ou RIGHT) rowspan = nmero de linhas ocupadas pela clula colspan = nmero de colunas ocupadas pela clula width = largura da clula height = altura da clula bgcolor = cor de fundo nowrap

46

*Tabelas Aplicando cores na tabela:


bgcolor pode ser usado dentro de
<table> <tr> <td>

47

*Exemplos de tabelas
<html> <body> <table border="1"> <tr> <td>linha 1, clula <td>linha 1, clula </tr> <tr> <td>linha 2, clula <td>linha 2, clula </tr> </table> </body> </html>

1</td> 2</td>

1</td> 2</td>

48

*Tabela com cabealho


<html> <body> <table border="1"> <tr> <th>Cabealho</th> <th>Outro Cabealho</th> </tr> <tr> <td>linha 1, clula 1</td> <td>linha 1, clula 2</td> </tr> <tr> <td>linha 2, clula 1</td> <td>linha 2, clula 2</td> </tr> </table> </body> </html>
49

*Tabela com clula vazia


<html> <body> Uma tabela <table border="1"> <tr> <td>linha 1, clula <td>linha 1, clula </tr> <tr> <td>linha 2, clula <td></td> </tr> </table> Outra tabela <table border="1"> <tr> <td>linha 1, clula <td>linha 1, clula </tr> <tr> <td>linha 2, clula <td>&nbsp;</td> </tr> </table> </body> </html>

1</td> 2</td>

1</td>

1</td> 2</td>

1</td>

50

*Formulrios Um formulrio uma rea onde so colocados os elementos de um formulrio Elementos de um formulrio permitem ao usurio entrar com informaes Um formulrio definido pela tag <form>
<form> Elementos de entrada </form>
51

*Formulrios: Codificao Bsica <form method="post|get" action="URL do CGI"> ... definio dos tens do formulrio ... </form> Para enviar o formulrio por e-mail:
<form action="mailto:nome@servidor" enctype="text/plain">
52

*Campo de Texto
Conta:<input type="text" name="conta" size="20" maxlength="20" /> Senha:<input type="password" name="senha" size="20" maxlength="20" />

53

*rea de Texto Comentrios:<br /> <textarea name="texto" rows="3" cols="40"> Digite aqui um texto qualquer. </textarea>

54

*Menus Sexo:
<select name="sexo"> <option selected="selected value="M">Masculino</option> <option value="F">Feminino</option> </select>

55

*Botes "Sim ou No" reas de interesse: <br /> <input type="checkbox" name="b1" value="v1" />Redes<br /> <input type="checkbox" name="b2" value="v2" />Bancos de Dados<br />

56

*Botes de Rdio
Sexo: <input type="radio" name="sexo" value="M" /> Masculino <input type="radio" name="sexo" value="F" /> Feminino

57

*Outros Campos
Campo escondido
<input type="hidden" name="nome" value="valor" />

Campo de upload de arquivo


<input type="file" name="nome" value="valor" />

58

*Botes de Envio <input type="submit" value="Envia" /> <input type="reset" value=" Limpa" />

59

*Dicas sobre formulrios Use listas dropdown, checkbox e botes do tipo rdio para minimizar os erros do usurio Indique quais campos so obrigatrios Use o atributo maxlength para limitar o tamanho do texto Use validao do lado do cliente e do lado do servidor
60

*Caracteres especiais

61

*Elementos de um cabealhos Dentro das tags <head></head> podemos encontrar:


<base> : define a base para os links neste documento <link> : define uma referncia para recursos <meta> : define meta-informaes <title> : define o ttulo do documento <style> : define um estilo <script> : permite a criao de scripts

62

*Tag <meta> Descrio da pgina:


<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

Definio de palavras chaves:


<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript" />

Outros atributos de meta (???)


<meta name="security" content="low" />
63

*Links Um link tem o seguinte formato:


esquema://[host].domnio[:porta][/caminho][/arq uivo] esquema: tipo de servio host: nome da mquina domnio: domnio onde est a mquina porta: nmero da porta caminho: pasta ou diretrio arquivo: o arquivo propriamente dito

64

*Alguns esquemas

65

*Exemplos
Acesso a newsgroup
<a href="news:alt.html">HTML Newsgroup</a>

Download via ftp


<a href="ftp://ftp.meslin.com.br/ftp/winzip.exe">Downloa d WinZip</a>

Enviando email
<a href="mailto:alguem@correio.com.br">Enviar email para algum</a>

Link para uma outra pgina em outro site:


<a href='http://www.outrosite.com.br/diretorio/arquivo'>O link</a>

66

*Exemplos Link para uma outra pgina no meu site:


<a href='/diretorio/arquivo'>O link</a> Equivalente a <a href='http://www.meusite.com.br/diretorio/arq uivo'>O link</a>

Link para um arquivo no mesmo diretrio


<a href='arquivo.html'>O link</a>

Para mudar de protocolo


href='https://www.meusite.com.br/diretorio/arq uivo'>O link</a>
67

*Scripts (em javascript, bvio!) No confunda Java com Javascript!


<html> <body> <script type="text/javascript"> document.write("Alo mundo!"); </script> </body> </html>

68

*Eventos Eventos relativos a janelas


Somente vlidos em body e em frameset

69

*Eventos Eventos relativos a formulrios


Somente vlidos em elementos de formulrios

70

*Eventos Eventos de teclado

71

*Eventos Eventos relativos a mouse

72

Perguntas?
http://www.inf.puc-rio.br/~meslin/Javascript

73

*Instalando o Visual Web Developer 2010 Express Edition

Veja os slides no arquivo correspondente e boa sorte!

74

Instalando um Servio Web

Veja os slides nos arquivos correspondentes e boa sorte!


Instalao de Java Instalao de Tomcat

75

Perguntas?

76

Exerccios

77

*Exerccios Crie uma pgina chamada poema.html com o seguinte contedo:

78

*Exerccios Crie uma pgina chamada "preco.htm" com o seguinte contedo:

79

*Exerccios Crie uma pgina chamada "viagem.html" com o seguinte contedo:


1. Seleo do destino Litoral ou interior Distncia a percorrer Tempo disponvel Meio de transporte Areo Terrestre Martimo Fazendo as malas O que levar O que no levar No esquecer

2.

3.

80

*Exerccios Crie uma pgina chamada "voar.html" com o seguinte contedo:

Curso de HTML Exerccios da Primeira Aula

1. 2.

SNEA garante que voar mais seguro Preos das passagens areas nacionais

81

*Exerccios
Crie uma pgina chamada "roteiro.html" com o seguinte contedo (para que a pgina funcione melhor, inclua mais texto em cada tpico):
Opes de Roteiros
1. 2. 3. Viagem a Bahia Rio Selvagem Pantanal

Viagem a Bahia Este tpico mostra uma viso geral sobre uma viagem a Bahia Volta ao ndice

Rio Selvagem Este tpico mostra como explorar diversos rios e corredeiras. Volta ao ndice

Pantanal Este tpico cobre assuntos mais complexos que requerem um planejamento mais profundo da viagem. Volta ao ndice

82

*Exerccios Alterar as cores da pgina criada no exerccio anterior de acordo com a seguinte tabela:
Elemento Cor de fundo Cor do texto Cor de links Cor de links seguidos Cor do ttulo principal Cor dos subttulos Nome da cor Beige Maroon Blue Red Navy Darkgreen

83

*Exerccios Criar a seguinte pgina em HTML:

84

*Exerccios Crie as seguintes pginas de WEB, utilizando os arquivos de imagem verde.gif, amarelo.gif, vermelho.gif e azul.gif:
Figuras em http://www.inf.puc-rio.br/~meslin/Javascript

85

*Exerccio Implemente a seguinte pgina HTML


Cor do texto: #CCCCCC

86

*Exerccios - Formulrio de Cadastro


Criar uma pgina HTML com um formulrio de cadastro de clientes para a Agncia de Turismo Virtual. Este formulrio deve conter os seguintes campos:
Nome (texto 40 mximo) Data de Nascimento (dd/mm/aaaa) Nome da Me (texto 40 mximo) Nome do Pai (texto 40 mximo) Tipo de Viagem (select com as opes Amaznica, Nordeste, Praias, Pantanal, Rstico, Ecolgico, Trabalho, Indivulgvel, Naturista, Outros) Temporada (Alta ou Baixa radiobutton) Adicionais (checkbox com Guia para Idosos, Grupos, Individual, Lua de mel, Famlia, Outro Telefone (max 8 carac + DDD + ramal) E-mail (max 40 carac)

87

*Layout com HTML Uso de tabelas Uso de frames Uso de div

88

*Tabelas Com tabelas, podemos facilmente dividir uma pgina em colunas e clulas

89

*Frames Com frames, podemos mostra mais do que um documento HTML na mesma janela do browser Cada documento HTML se localiza em um frame Os frames so independentes Problemas:
Vrios documentos HTML Pode gerar dificuldades com a impresso
90

*A tag <frameset> Define como a janela ser dividida em frames Cada <frameset> define um conjunto de linhas OU colunas

91

*A tag <frame>
Define o documento HTML que ir ocupar o frame Exemplo:
Um conjunto de duas colunas A primeira com 25% da largura O documento frameA.html ocupar a primeira coluna enquanto o documento frameB.html a segunda <frameset cols="25%,*"> <frame src="frameA.html" /> <frame src="frameB.html" /> </frameset>

Obs.: o tamanho da coluna pode ser especificado em pixels


92

*Exemplo
<html> <frameset rows="*,50%"> <frame noresize="noresize" src="frame_a.htm" name="FrameA"> <frameset cols="250,*"> <frame noresize="noresize" src="frame_b.htm" name="FrameB"> <frame noresize="noresize" src="frame_c.htm" name="FrameC"> </frameset> </frameset> </html>

93

*Exemplo de uso de <iframe>


<html> <body> <iframe src="default.asp"/> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html>

94

*Listas no numeradas <ul type="circle" | "disc" | "square"> <li type="circle" | "disc" | "square" value="numero"> Texto </li> </ul>

95

*Listas no numeradas
<ul> <li> Correio Eletrnico </li> <li> Telnet </li> <li> FTP </li> </ul>

Obs:
Listas podem ser aninhadas </li> opcional atualmente, mas devemos nos lembrar de colocar
96

*Listas Numeradas <ol start="numero" type="A" | "a" | "I" | "i" | "1"> <li type="circle" | "disc" | "square" | "A" | "a" | "I" | "i" | "1" value="numero"> Texto </li> </ol>
97

*Listas numeradas
<ol> <li> Correio Eletrnico </li> <li> Telnet </li> <li> FTP </li> </ol>

98

*Listas usando estilo


<ol style="list-style-type: tipo;"> tipo:
decimal nmeros decimais comeando de 1 decimal-leading-zero nmeros decimais comeando com zero (ex: 01, 02, 03, ..., 98, 99). lower-roman: algarismos romanos minsculos upper-roman : algarismos romanos maisculos hebrew: nmeros hebraicos tradicionais georgian: nmeros "Georganos" tradicionais(an, ban, gan, ..., he, tan, in, in-an, ...). armenian: nmeros armenianos tradicionais cjk-ideographic: nmeros plenamente ideograficos hiragana: a, i, u, e, o, ka, ki, ... Katakana: A, I, U, E, O, KA, KI, ... hiragana-iroha: i, ro, ha, ni, ho, he, to, ... katakana-iroha: I, RO, HA, NI, HO, HE, TO, ...
99

*Exemplo de listas
Lista no ordenada <ul> <li> Correio Eletrnico </li> <li> Telnet </li> <li> FTP </li> </ul> Lista ordenada <ol> <li> Correio Eletrnico </li> <li> Telnet </li> <li> FTP </li> </ol> Romano Minsculo <ol style="list-style-type: lower-roman;"> <li> Este o primeiro item.</li> <li> Este o segundo item.</li> <li> Este o terceiro item.</li> </ol> Decimal <ol style="list-style-type: decimal;"> <li> Este o primeiro item.</li> <li> Este o segundo item.</li> <li> Este o terceiro item.</li> </ol> Romano Maisculo <ol style="list-style-type: upper-roman;"> <li> Este o primeiro item.</li> <li> Este o segundo item.</li> <li> Este o terceiro item.</li> </ol> Alfabtico minsculo <ol style="list-style-type: lower-alpha;"> <li> Este o primeiro item.</li> <li> Este o segundo item.</li> <li> Este o terceiro item.</li> </ol> Alfabtico minsculo <ol style="list-style-type: upper-alpha;"> <li> Este o primeiro item.</li> <li> Este o segundo item.</li> <li> Este o terceiro item.</li> </ol>

100

Javascript

101

*Javascript Linguagem script popular Suportada por diversos navegadores web e outras ferramentas Interage com HTML, adicionando interatividade Normalmente as pginas HTML so estticas
Janelas pop-up Iterao com formulrios Clculos Efeitos especiais
102

*Javascript x Java para no confundir nunca mais

Javascript
Interpretado pelo computador no lado do cliente

Java
Compilado no servidor antes de ser executado

Referncias a objetos so verificados Referncias a objetos so verificados em tempo de execuo em tempo de compilao No precisa declarao de tipos de dados Pode acessar objetos do navegador Tipos de dados precisam ser declarados No pode acessar objetos do navegador

103

*Termos
Objeto: dados e funcionalidade juntos Propriedade: atributos (valores) que so associados a alguma coisa Mtodo: uma ao que um objeto pode realizar Evento: uma ao iniciada por um usurio ou pelo computador Varivel: um lugar para armazenar valores em um computador (propriedade est relacionada a objeto) Funo: uma rotina ou procedimento que realiza uma ao (mtodo est relacionado a objeto)
104

*Como incluir Javascript em uma pgina HTML

Javascript dentro da pgina HTML


<html> <body> <script type="text/javascript"> document.write("Alo mundo!"); </script> </body> </html>

O comando document.write() um comando padro do Javascript para escrever em uma pgina HTML
105

*Como incluir Javascript em uma pgina HTML

O mesmo exemplo, agora com tags HTML dentro do Javascript


<html> <body> <script type="text/javascript"> document.write("<h1>Alo mundo!</h1>"); </script> </body> </html>

106

*Onde incluir o Javascript


Javascript executado durante a carga da pgina HTML Nem sempre queremos que ele execute durante Algumas vezes necessrio que ele execute antes ou aps o carregamento da pgina Incluir o Javascript no cabealho (<head>) de uma pgina garante que ele ser executando antes da carga da pgina
107

*Exemplo
<html> <head> <script type="text/javascript"> document.write("<title>Ttulo da pgina</title>"); </script> </head> <body> <script type="text/javascript"> document.write("<h1>Contedo da pgina</h1>"); </script> </body> </html>

108

*Utilizando um arquivo Javascript externo


<html> <head> <title>Pgina com Javascript externo</title> <script type="text/javascript" src="arquivo.js"> </script> </head> <body> Corpo da Pgina </body> // cdigo javascript </html> /* * aqui eu posso colocar qualquer * comando Javascript */ alert("Alo mundo!");

arquivo.js

109

*Comandos Javascript A linguagem Javascript case-sensitive Um comando Javascript executado pelo navegador Normalmente termina-se um comando Javascript com ; (boa prtica de programao, mas desnecessrio) O uso de ; permite escrever mais de um comando por linha
110

*Cdigo Javascript Cdigo Javascript uma sequncia de comandos Javascript O cdigo executado sequencialmente, comando por comando Exemplo:
<script type="text/javascript"> document.write("<h1>Este um cabealho</h1>"); document.write("<p>Isto um pargrafo.</p>"); document.write("<p>Este outro pargrafo.</p>"); </script>

111

*Bloco de comandos
Comandos Javascript podem ser agrupados em blocos Um bloco inicia por um { e termina por um } A finalidade do bloco agrupar os comandos para que eles sejam tratados como se fossem apenas um nico comando (comando composto) Exemplo:
<script type="text/javascript"> { document.write("<h1>Este um cabealho</h1>"); document.write("<p>Isto um pargrafo.</p>"); document.write("<p>Este outro pargrafo.</p>"); } </script>
112

*Comentrios Finalidade: documentao Comentrios podem ser adicionados para explicar o cdigo Javascript Exemplo:
<script type="text/javascript"> // escreve um cabealho document.write("<h1>Este um cabealho</h1>"); // escreve um pargrafo document.write("<p>Isto um pargrafo.</p>"); document.write("<p>Este outro pargrafo.</p>"); </script>
113

*Comentrios em mltiplas linhas Um comentrio de mltiplas linhas comea por /* e termina com */ Exemplo:
<script type="text/javascript"> /* Este cdigo a seguir escrever: - Um cabealho - Dois pargrafos */ document.write("<h1>Este um cabealho</h1>"); document.write("<p>Isto um pargrafo.</p>"); document.write("<p>Este outro pargrafo.</p>"); </script>
114

*Comentrios e cdigo Podemos utilizar comentrios para evitar que algum comando seja executado Muito utilizado durante a fase de desenvolvimento Exemplo:
<script type="text/javascript"> document.write("<h1>Este um cabealho</h1>"); // document.write("<p>Isto um pargrafo.</p>"); document.write("<p>Este outro pargrafo.</p>"); </script>
115

*Comentrios e comandos Podemos acrescentar comentrios no final de uma linha de comando Exemplo:
<script type="text/javascript"> document.write("<h1>Este um cabealho</h1>"); //cabealho document.write("<p>Isto um pargrafo.</p>"); /* pargrafo */ document.write("<p>Este outro pargrafo.</p>"); </script>

116

*Estrutura da Linguagem
Valores constantes:
"Alexandre Meslin" 'Linguagem Javascript' 8752 -2578 0257 -0752 0xAB12 -0x3CD4 3.14 -2.7 2.3E11 true false String entre aspas String entre plics Inteiro na base 10 Inteiro na base 8 Inteiro na base 16 Nmero em ponto flutuante Valores booleanos

117

*Declarao e uso de variveis


Nomes de variveis
Letras, nmeros, _ e $ No podem comear por nmeros No podem ser iguais a palavras reservadas

Exemplo:
var i; // cria a varivel i = 8752; // cria e inicializa a varivel i com 8752 var i = 8752; // cria e inicializa a varivel i com 8752 Os tipos de dados so assumidos dinamicamente
i = 25; i = "vinte e cinco";

118

*Armadilhas... Cuidado: no utilize nomes com escritas diferentes mas pronncias iguais ou parecidas. Exemplo: no crie as seguintes variveis:
Nome e nome Idade e idade Num1 e num1

Voc vai acabar confundindo nome com Nome!


119

*Tipos de Dados
Javascript pertimite que uma mesma varivel contenha diferentes tipos de dados Tipos de dados primitivos:
Nmero: inteiro e ponto flutuante Booleano: true e false String: sequncia de caracteres

Tipos de dados compostos


Objeto: uma coleo de dados nomeada Array: uma coleo de dados ordenada numericamente

Tipos de dados especiais


Null: nulo Undefined: valor de uma varivel criada mas sem valor atribuido
120

*Entrada e sada de dados document.write()


Escreve alguma coisa na pgina Pode escrever na seo <head> ou <body>
<html> <head> <script type="text/javascript"> document.write("<title>Ttulo da pgina</title>"); </script> </head> <body> <script type="text/javascript"> document.write("<h1>Contedo da pgina</h1>"); </script> </body> </html>
121

*Entrada e sada de dados window.alert() alert()


Abre uma janela para exibir um aviso ao usurio
<html> <body> <script type="text/javascript"> window.alert("Senha incorreta, acesso negado"); alert("Senha incorreta, acesso negado"); </script> </body> </html>

122

*Entrada e sada de dados


window.confirm() confirm()
Abre uma janela para o usurio confirmar ou no
<html> <head> <title>Exemplo de confirm()</title> </head> <body> <script type="text/javascript"> if (confirm("Quer realmente sair da pgina ?")) alert("Ento adeus!"); </script> </body> </html>
123

*Entrada e sada de dados window.prompt() prompt()


Abre uma janela para pedir uma string ao usurio
<html> <body> <script type="text/javascript"> var nome=prompt("Qual o seu nome?"); </script> </body> </html>
124

*Entrada e sada de dados Um valor padro (default) pode ser fornecido Evita que aparea undefined na linha da resposta
<html> <body> <script type="text/javascript"> nome=prompt("Qual o seu nome?", "(sem nome)"); </script> </body> </html>
125

*Exemplo:
<html> <body> Alo mundo em html <script type="text/javascript"> document.write("Alo mundo em Javascript"); </script> Alo mundo novamente em html </body> </html>

126

*Meu Segundo Javascript

<html> <head> <title>Alo Personalizado</title> <script type="text/javascript"> var nome = prompt("Qual o seu nome?"); </script> </head> <body> <h1>Minha Pgina</h1> <script type="text/javascript"> document.write("<h3>"+nome+", seja bem-vindo a minha pgina</h3>"); </script> </body> </html>
127

*Expresses Conjunto de constantes, variveis, operadores, funes que resultam em um nico valor As expresses podem ser do tipo (tipo do resultado):
Aritmticas Logicas Strings Condicionais
128

*Tipos de Operadores Aritmtico Lgico Relacional String Bit-wise Atribuio Condicional

129

*Operadores
Aritmticos
Soma +
a+b

Subtrao
ab

Multiplicao *
a*b

Diviso /
a/b

Resto da diviso de inteiros %


a%b

Incremento de uma unidade ++


++a a++

Decremento de uma unidade


a a
130

*Operadores Atribuio
Simples =
a=b+c

Composta +=
a += b

-=

*=

/=

%=

(a = a + b)

131

*Operadores
Relacionais
Equivalente ==
a == b

Estritamente equivalente === (no h converso de tipo)


a === b

Diferente !=
a != b

Estritamente diferente !== (no h converso de tipo)


a !== b

Menor <
a < b

Maior >
a > b

Menor ou igual <=


a <= b

Maior ou igual >=


a >= b
132

O operador typeof
Operador unrio Retorna o tipo atual da varivel: number, string, boolean, object, function, undefined, null
<body> <script language="javascript"> function f() {} var a = "texto", b = 8752, document.write("A varivel document.write("A varivel document.write("A varivel document.write("A varivel document.write("A varivel document.write("A varivel document.write("A varivel document.write("A varivel </script> </body> </html>

c a b c d e f g h

2.1, d = false, e, g = Object(); " + typeof a + "<br/>"); " + typeof b + "<br/>"); " + typeof c + "<br/>"); " + typeof d + "<br/>"); " + typeof e + "<br/>"); " + typeof f + "<br/>"); " + typeof g + "<br/>"); " + typeof h + "<br/>");

133

Operadores de Manipulao de Bits Realizam operaes em bits


Operador Nome Descrio

& | ^ << >>

Bitwise AND Bitwise OR Bitwise XOR Bitwise left shift Bitwise signed right shift

AND bit a bit OU bit a bit OU Exclusivo bit a bit Deslocamento para a esquerda inserindo zeros Deslocamento para a direita mantendo o sinal

>>>

Bitwise zero- Delocamento para a direita inserindo zeros fill right shift

134

Operadores de comparao
<html> <head> <title>Exemplo de comparao</title> </head> <body> <script type="text/javascript"> var n =8752, s = '8752'; document.write("n == s: " + (n == s) + '<br/>'); document.write("n === s: " + (n === s) + '<br/>'); </script> </body> </html>
135

*Operaces String
Contatenao
nome = "Alexandre"; sobrenome = "Meslin"; nomeCompleto = nome + " " + sobrenome;

Comparao
3 == "3"

Outras operaes
x = "8752"; a = x +10; b = x -10; // x string // a 875210 // b 8742
136

*Converso explcita de tipos parseInt (str) ou parseInt(str, base)


Converte uma string para um nmero inteiro Exemplo:
num = "3A"; x = parseInt(num); y = parseInt(num, 16); // x // y 3 58

parseFloat(str)
Converte uma string em um nmero real Exemplo
z = parseFloat("3.14");
137

Curiosidades Para formatar o texto de sada:


toFixed() toPrecision() toExponential()

138

Ordem de Precedncia
Precedncia 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Operador Parnteses, chamada de funo ~, -, ++, --, new, void, delete *, /, % +, <<, >>, >>> <, <=, >, >= ==, !=, ===, !== & ^ | && || ?: =, +=, -=, *=, Operador vrgula (,)
139

Perguntas?

140

*Exerccios Faa uma pgina que some 25 com 78 e mostre o resultado em:
Uma pgina Uma janela de alerta Formato de sada:
25 + 78 = 103

141

Resposta A
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Soma na Mesma Pgina</title> </head> <body> <script type="text/javascript"> var n1 = 25; var n2 = 78; var res = n1 + n2; document.write(n1, " + ", n2, " = ", res); </script> </body> </html>

142

Resposta B
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Soma em um alert</title> </head> <body> <script type="text/javascript"> var n1, n2, res; n1 = 25; n2 = 78; res = n1 + n2; // o alert somente recebe um nico valor // logo, eu preciso concatenar os diversos valores em um nico alert(n1 + " + " + n2 + " = " + res); </script> </body> </html>

143

*Exerccios Faa uma pgina de boas vindas personalizada

144

Resposta
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Pgina de Boas Vindas</title> </head> <body> <script type="text/javascript"> var nome = prompt("Infome o seu nome: "); document.write("<H1>Bem vindo, " + nome + "</h1>"); </script> resto do contedo da pgina... </body> </html>

145

*Exerccios Faa uma pgina para somar 2 nmeros informados pelo usurio

146

Resposta
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Soma de 2 nmeros</title> </head> <body> <script type="text/javascript"> var sN1, sN2, n1, n2, res; sN1 = prompt("Informe o primeiro nmero"); sN2 = prompt("Informe o segundo nmero"); n1 = parseFloat(sN1); n2 = parseFloat(sN2); res = n1 + n2; document.write(n1, " + ", n2, " = ", res); </script> </body> </html>

147

*Exerccios Faa uma pgina para somar 3 nmeros informados pelo usurio

148

Resposta
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Soma de 3 nmeros</title> </head> <body> <script type="text/javascript"> var sN1 = prompt("Informe o primeiro nmero"); var sN2 = prompt("Informe o segundo nmero"); var sN3 = prompt("Informe o terceiro nmero"); var n1 = parseFloat(sN1); var n2 = parseFloat(sN2); var n3 = parseFloat(sN3); var res = n1 + n2 + n3; document.write(n1, " + ", n2, " + ", n3, " = ", res); </script> </body> </html>

149

Aula 3 Desvio Condicional Funes Sintaxe mnima de funes Funes com parmetros Eventos

150

*Comandos condicionais if() if()-else switch()-case

151

*O comando if()
Utilizado para executar determinado cdigo se a condio for verdadeira Sintaxe:
if(condio) { cdigo que ser executado se a condio for verdadeira } OU if(condio) UM comando que ser executado se a condio for verdadeira
152

*O comando if() Lembre-se que Javascript case-sensitive. O comando if() deve ser escrito em letras minsculas

153

*Exemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1"> <title>Saudao</title> O que acontece </head> s 12h e s 18h? <body> <script type="text/javascript"> var data = new Date(); var hora = data.getHours(); if (hora<12) document.write("<b>Bom dia</b>"); if (hora>12) if (hora<18) document.write("<b>Boa tarde</b>"); if (hora>18) document.write("<b>Boa noite</b>"); </script> </body> </html>
154

*Comando if()-else
Utilizado para executar um entre dois cdigos. O cdigo ligado ao else somente ser executado se a condio for falsa Obs.: o else no tem condio Sintaxe:
if(condio) { cdigo que ser executado se a condio for verdadeira } else { cdigo que ser executado se a condio for falsa } OU if(condio) UM comando que ser executado se a condio for verdadeira else UM comando que ser executado se a condio for falsa OU qualquer combinao das sintaxes anteriores
155

*Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Saudao</title> </head> <body> <script type="text/javascript"> var data, hora; data = new Date(); hora = data.getHours(); if (hora<12) document.write("<b>Bom dia</b>"); else if (hora<18) document.write("<b>Boa tarde</b>"); else document.write("<b>Boa noite</b>"); </script> </body> </html>

156

*O mesmo exemplo com outro formato


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Saudao</title> </head> <body> <script type="text/javascript"> var data, hora; data = new Date(); hora = data.getHours(); if (hora<12) document.write("<b>Bom dia</b>"); else if (hora<18) document.write("<b>Boa tarde</b>"); else document.write("<b>Boa noite</b>"); </script> </body> </html>

157

*Exemplos de if-else
Exemplos:
if (estado=="RJ") cidade = "Rio de Janeiro"; if ( hora < 12 ) { manha = true; document.write ("bom dia!"); } else { manha = false; document.write ("boa tarde!"); }

158

*Operadores Lgicos Concatenam operaes lgicas


&& operador E
if((a > b) && (a > c)) Se a maior do que b E a maior do que c

|| operador OU
if((a > b) || (a > c)) Se a maior do que b OU a maior do que c

! operador NO
if(!(a > b)) Se NO a maior do que b

159

*Exemplo
Exemplos:
if ( hora >= 12 && hora < 18 ) { manha = false; document.write ("boa tarde!"); }

160

Operador Ternrio
Substitui um if/else simples Use com parcimnia
<body> <script type="text/javascript"> if (3 > 2) { alert("True"); } else { alert("False"); } (3 > 2) ? alert("True") : alert("False"); </script> </body>
161

*O Comando switch()-case Quando necessitamos escolher uma entre duas alternativas utilizamos o comando if ou if-else. Mas isto se torna extremamente trabalhoso quando existem vrias alternativas para se escolher. Nestes casos utiliza-se o comando switch

162

*O Comando switch()-case
Sintaxe: switch (expresso) { case constante1: comando1; case constante2: comando2; default: comandoN; }
163

*O Comando switch()-case
Sintaxe simplificada:
switch (expresso) { case constante1: comando1; break; case constante2: comando2 break case constante3: comando3; break; default: comandoN; }

Um pouco mais sofisticada


switch (expresso) { case constante1: comando1; break; case constante2: comando2 case constante3: case constante4: comando3; break; default: comandoN; }
164

*Exemplo
<html> <body> <script type="text/javascript"> var data; data = new Date(); semana = data.getDay(); switch(semana) { case 1: document.write("Hoje break; case 2: document.write("Hoje break; case 3: document.write("Hoje break; case 4: document.write("Hoje break; case 5: document.write("Hoje break; case 6: document.write("Hoje break; case 7: document.write("Hoje break; default: document.write("Hoje } </script> </body> </html>

2a feira");

3a feira");

4a feira");

5a feira");

6a feira");

sbado");

domingo");

no um dos dias da semana")

165

*Exemplo
<html> <body> <script type="text/javascript"> var data; data = new Date(); semana = data.getDay(); switch(semana) { case 1: case 2: case 3: case 4: case 5: document.write("Hoje um dia da semana"); break; case 6: document.write("Hoje sbado"); break; case 7: document.write("Hoje domingo"); break; default: document.write("Hoje no um dos dias da semana") } </script> </body> </html>

166

Funes

167

*Funo
Uma funo uma poro de cdigo que resolve um problema muito especfico, parte de um problema maior (Wikipdia) Uma funo contm cdigo que ser executado por um evento ou uma chamada explcita Voc pode chamar uma funo de qualquer lugar de uma pgina Funes podem ser definidas na seo <head> ou <body> Para garantir que a funo j foi carregada antes de sua chamada, a funo deve ser definida na seo <head>
168

*Definio de Funo
Sintaxe:
function nomeDaFuncao(var1, var2, ..., varN) { Lista de variveis, cdigo executvel separadas por vrgula }

Os parmetros var1, var2, etc. so variveis ou valores passados para a funo Os { e } definem o incio e o fim da funo Nota: uma funo sem parmetros precisa dos () depois do nome

169

*Exemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function mostraMensagem() { alert("Alo mundo!"); } </script> <title>Mostra uma mensagem</title> </head> <body> <form> <input type="button" value="No aperte o boto" onclick="mostraMensagem()"> </form> </body> </html>
170

*O comando return
O comando return utilizado para especificar um valor que ser retornado da funo chamada para quem a chamou Sintaxe:
return; // apenas retorna da funo OU return valor; // retorna um valor da funo

171

*Exemplo de uso de return


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function produto(a,b) { var c; c = a * b; return c; // poderia ser return a * b; } </script> <title>Comando return</title> </head> <body> <script type="text/javascript"> document.write(produto(4,3)); </script> </body> </html>
172

*Exemplo de uso de return


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function produto(a,b) { var c; c = a * b; return c; // poderia ser return a * b; } </script> <title>Comando return</title> </head> <body> <script type="text/javascript"> result = produto(4, 3); document.write(result); </script> </body> </html>
173

*Ciclo de vida de uma varivel


Varivel declarada dentro de uma funo
Varivel local Somente pode ser acessada dentro da funo Se a funo chamar outra funo, a varivel continua existindo, mas a funo chamada no tem acesso a ela Podemos ter variveis locais com o mesmo nome em funes diferentes A varivel destruda ao trmino da funo

Variveis declaradas fora da funo


Variveis globais Podem ser acessada em qualquer parte do cdigo, inclusive dentro de outras funes A varivel passa a existir depois da sua declarao e continua existindo at a pgina ser fechada
174

*Exemplo do uso de var


<html> <head> <script type="text/javascript"> function executaFuncao() { var numero = 8752; document.write("O valor do nmero no incio da funo " + numero + "<br/>"); numero += 2; document.write("O valor do nmero no final da funo " + numero + "<br/>"); } </script> </head> <body> <script type="text/javascript"> var numero = 5; document.write("O valor inicial do nmero " + numero + "<br/>"); numero++; document.write("O valor do nmero antes da chamada da funo " + numero + "<br/>"); executaFuncao() document.write("O valor do nmero depois da chamada da funo " + numero + "<br/>"); </script> </body> </html> <html> <head> <script type="text/javascript"> function executaFuncao() { numero = 8752; document.write("O valor do nmero no incio da funo " + numero + "<br/>"); numero += 2; document.write("O valor do nmero no final da funo " + numero + "<br/>"); } </script> </head> <body> <script type="text/javascript"> var numero = 5; document.write("O valor inicial do nmero " + numero + "<br/>"); numero++; document.write("O valor do nmero antes da chamada da funo " + numero + "<br/>"); executaFuncao() document.write("O valor do nmero depois da chamada da funo " + numero + "<br/>"); </script> </body> </html>

175

*Funes Predefinidas
isNaN (valor)
Retorna "true" se o valor no for numrico Exemplo: x =prompt("Entre um numero:", " "); if (isNaN(x)) window.alert("Valor no numrico !");

window.confirm (pergunta)
Abre uma janela para pedir uma string ao usurio Exemplo: if (confirm("Quer realmente sair da pgina ?")) alert("Ento adeus!");

176

Eventos

177

*Eventos Eventos so aes que ocorrem como resultado de atividades do browser ou interaes do usurio com a pgina Web
Uso do mouse clique, duplo clique, movimento, Entrada de dados apertar uma tecla, digitar, soltar uma tecla, Carga de uma pgina ou figura, Envio de formulrio

178

*Manipuladores de Eventos Quando um evento ocorre, o segmento de cdigo que executado em resposta ao evento especfico chamado de manipulador do evento (handler do evento) Formato geral:
<TagHTML evento=cdigo Javascript>

179

*Alguns Eventos Definidos em Javascript


Mouse Events Property onclick ondblclick onmousedown Description The event occurs when the user clicks on an element The event occurs when the user double-clicks on an element The event occurs when a user presses a mouse button over an element DOM 2 2 2

onmousemove onmouseover onmouseout

The event occurs when the pointer 2 is moving while it is over an element The event occurs when the pointer is moved onto an element The event occurs when a user moves the mouse pointer out of an element The event occurs when a user releases a mouse button over an element 2 2

onmouseup

180

*Alguns Eventos Definidos em Javascript

Keyboard Events Attribute onkeydown onkeypress onkeyup Description DOM

The event occurs when the user is 2 pressing a key The event occurs when the user presses a key The event occurs when the user releases a key 2 2

181

*Alguns Eventos Definidos em Javascript


Frame/Object Events Attribute onabort Description The event occurs when an image is stopped from loading before completely loaded (for <object>) The event occurs when an image does not load properly (for <object>, <body> and <frameset>) The event occurs when a document, frameset, 2 or <object> has been loaded The event occurs when a document view is resized The event occurs when a document view is scrolled The event occurs once a page has unloaded (for <body> and <frameset>) 2 2 2 DOM 2

onerror

onload onresize onscroll onunload

182

*Alguns Eventos Definidos em Javascript


Form Events Attribute onblur onchange Description The event occurs when a form element loses focus The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>) The event occurs when an element gets focus (for <label>, <input>, <select>, textarea>, and <button>) The event occurs when a form is reset The event occurs when a user selects some text (for <input> and <textarea>) The event occurs when a form is submitted DOM 2 2

onfocus

onreset onselect onsubmit

2 2 2

183

*Um pouco sobre eventos...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Cdigo Javascript <html> <head> (sem as tags script) <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <form> <input type="button" value="No clique aqui" onclick='alert("Voc clicou no boto")'> </form> </body> </html>

184

*Mais um pouco sobre eventos


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exemplo de evento onclick com funo</title> <script type="text/javascript"> function advertencia() { return confirm("Aluno de Javascript do Alexandre?"); } </script> </head> <body> <a href='http://cursos.meslin.com.br' onclick="return advertencia();"> Acesso somente para alunos de Javascript </a> </body> </html>
185

*Mais um pouco ainda sobre eventos


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1"> <title>Exemplo de evento onload</title> </head> <body onload="alert('Bem vindo, usurio')" onunload="alert('Obrigado por visitar a pgina')"> <p>Exemplo de eventos onload e onunload.</p> </body> </html>

186

*Eventos e Formulrios
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exemplo de evento onclick com formulrio</title> <script type="text/javascript"> function naoClique() { alert('Eu falei para no clicar!'); } </script> </head> <body> <form> <input type="button" value="No clique aqui." onclick="naoClique()"/> </form> </body> </html>
187

*Um pouco sobre objetos


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function funcao() { alert(document.formulario.texto.value); } </script> <title>Insert title here</title> O documento tem um formulrio </head> O formulrio tem um campo texto <body> O campo texto tem um valor <form name="formulario"> <input type="text" name="texto"> <input type="button" value="No clique aqui!" onclick="funcao()"> </form> </body> </html>
188

*Explicando...
Observe a construo HTML: <form name="formulario"> <input type="text" name="texto"> </form> Neste caso, no existe a varivel texto, apenas o campo chamado texto do formulrio, ou seja, fazer algo do tipo:
alert(texto)

no possvel, mas podemos escrever:


alert(document.formulario.texto.value)
Escreve o valor (value) do campo chamado texto que est no <form> chamado formulario dentro do documento (document)
189

Outros atributos de campo (alm de value)


<form name="formulario"> <input type="text" name="texto"> <input type="button" value="No clique aqui!" onclick="funcao()"> </form> document.formulario.texto.value
Propriedade defaultvalue form maxlength name size type value Descrio O valor inicialmente mostrado no campo Referencia o formulrio onde o campo est Nmero mximo de caracteres permitidos no campo O nome do campo O tamanho do campo em caracteres (aproximadamente) O tipo do campo (button, checkbox, text, hidden, etc.) O valor atual do campo
190

Continuao Para podermos fazer alguma operao com uma varivel devemos copiar o campo chamado texto para uma varivel. <form name="formulario"> <input type="text" name="texto"> </form> Exemplo:
variavel = document.formulario.texto.value
191

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function pessoa() { // converte o campo nomeBastimo para varivel nome var nome = document.familia.nomeBatismo.value; // converte o campo nomeFamilia para varivel sobrenome var sobrenome = document.familia.nomeFamilia.value; // escreve uma string constante: "Voc " // concatenada com uma string varivel: nome // concatenada com uma string constante: " " // concatenada com uma string varivel: sobrenome alert("Voc " + nome + " " + sobrenome); } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Nome &amp; Sobrenome</title> </head> <body> <form name="familia"> Nome: <input type="text" name="nomeBatismo"><br/> Sobrenome: <input type="text" name="nomeFamilia"><br/> <input type="button" value="Quem voc..." onclick="pessoa()"> </form> </body> </html>

Exemplo (escreve nome e sobrenome)

Exemplo campo texto ou password


Propriedade defaultValue form maxlength name size type Value Mtodo blur() focus() select() Descrio O valor inicialmente mostrado Referncia ao formulrio Nmero mximo de caracteres Nome do campo Tamanho do campo em caracteres Tipo do campo <input> O valor atual do campo Descrio Remove o foco do campo Coloca o campo em foco Seleciona o campo

193

Exemplo campo text ou password


<html> <head> <title>Obtendo o valor de um campo texto de um formulrio</title> <script type="text/javascript"> function mostraValor() { alert(document.formulario.campoTexto.value); } </script> </head> <body> <form name="formulario"> Campo texto: <input type="text" name="campoTexto"/> <input type="button" onclick="mostraValor()" value="Clique aqui"/> </form> </body> </html>
194

Exemplo de campo checkbox

Propriedade checked defaultChecked name value

Descrio Valor booleano indicando se o campo est atualmente selecionado Valor booleano indicando se o campo selecionado por default Nome do campo Valor do campo

195

Exemplo de campo checkbox


<html> <head> <title>Obtendo o valor de um campo radio de um formulrio</title> <script type="text/javascript"> function mostraValor() { var i; for(i=0; i<document.formularioTransporte.campoMeio.length; i++) if(document.formularioTransporte.campoMeio[i].checked) alert("Meio de transporte favorito: " + document.formularioTransporte.campoMeio[i].value); } </script> </head> <body> <form name="formularioTransporte"> Meio de transporte favorito:<br/> <input type="radio" value="carro" name="campoMeio" />Eu prefiro carro<br/> <input type="radio" value="moto" name="campoMeio" />Eu prefiro motocicleta<br/> <input type="radio" value="pe" name="campoMeio" />Eu prefiro andar a p<br/> <input type="radio" value="bicicleta" name="campoMeio" />Eu prefiro bicicleta<br/> <input type="button" value="Clique aqui" onclick="mostraValor()"/> </form> </body> </html>

196

Exemplo campo select (simples ou mltiplo)


Propriedade <select> length name options selectedIndex defaultSelected <option> index selected text value Descrio Nmero de opes na lista Nome da lista Lista de opes ndice do item selecionado da lista Valor booleano indicando se o item selecionado por default O valor do ndice da opo Valor booleano indicando se o item est selecionado O texto associado opo O valor associado opo

197

Exemplo campo select (simples ou mltiplo)


<html> <head> <title>Obtendo o valor de um campo select de um formulrio</title> <script type="text/javascript"> function mostraValor() { var i; for(i=0; i<document.formularioTransporte.campoMeio.length; i++) if(document.formularioTransporte.campoMeio.options[i].selected) alert("Meio de transporte favorito: " + document.formularioTransporte.campoMeio.options[i].value); } </script> </head> <body> <form name="formularioTransporte"> Meio de transporte favorito:<br/> <select name='campoMeio'> <option value="carro">Eu prefiro carro</option> <option value="moto">Eu prefiro motocicleta</option> <option value="pe">Eu prefiro andar a p</option> <option value="bicicleta">Eu prefiro bicicleta</option> </select> <input type="button" value="Clique aqui" onclick="mostraValor()"/> </form> </body> </html>

198

Perguntas?

199

Exerccios

200

*Pura matemtica Considere a funo f(x) = 2x + 5 Calcule manualmente:


f(1) f(8) f(7) f(5) f(2)

201

*Pura matemtica Considere a funo f(x, y) = 2x + 5y + 7 Calcule manualmente:


f(1, f(8, f(7, f(5, f(2, 8) 7) 5) 2) 0)

202

*Pura matemtica Considere a funo f(x) = 2x + 5 Calcule manualmente f(x) para x variando de 1 at 5

203

*Pura matemtica Considere a funo f(x, y) = 2x + 5y + 7 Calcule manualmente f(x, y) para x variando de 1 at 3 e y variando de 5 at 8

204

*Exerccio Faa uma pgina HTML onde o usurio poder entrar com o valor de x. Mostre o resultado de f(x) = 2x + 5 (use uma funo feita por voc)

205

*Exerccio Faa uma pgina HTML onde o usurio poder entrar com os valores de x e y. Mostre o resultado de f(x, y) = 2x + 5y + 7 (use uma funo feita por voc).

206

*Exerccios
Faa uma pgina HTML contendo um formulrio com um boto. A pgina dever exibir uma mensagem quando o usurio clicar no boto.

207

Resposta:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exercicios\Evento\Mensagem.html</title> </head> <body> <form> <input type="button" onclick='alert("Uma mensagem")' value="Aperte aqui"/> </form> </body> </html>

208

*Exerccios
Faa uma pgina com um formulrio contendo um campo texto onde o usurio ir escrever o seu nome. A pgina dever saudar o usurio

209

Resposta:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function sauda() { var data, hora; data = new Date(); hora = data.getHours(); if(hora<12) { alert("Bom dia " + document.conhecimento.nomePessoa.value); } else { if(hora<18) { alert("Boa tarde " + document.conhecimento.nomePessoa.value); } else { alert("Boa noite" + document.conhecimento.nomePessoa.value); } } } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exercicios\Evento\Saudacao.html</title> </head> <body> <form name="conhecimento"> Nome: <input type="text" name="nomePessoa" /><br/> <input type=button" value="Aperte aqui" onclick="sauda()"> </form> </body> </html>

210

*Exerccios
Faa uma pgina com um formulrio contendo dois campos texto. A pgina dever exibir a soma dos valores digitados nos campos

211

Resposta:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function opera() { var num1, num2, resultado; num1 = parseFloat(document.calculadora.op1.value); num2 = parseFloat(document.calculadora.op2.value); resultado = num1 + num2; document.write("A soma de " + num1 + " com " + num2 + " " + resultado); } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exercicios\Evento\Soma.html</title> </head> <body> <form name="calculadora"> Operando 1: <input type="text" name="op1"><br/> Operando 2: <input type="text" name="op2"><br/> <input type=button" value="Calcula" onclick="opera()"> </form> </body> </html>

212

Outra resposta:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function opera(sNum1, sNum2) { var num1 = parseFloat(sNum1); var num2 = parseFloat(sNum2); var resultado = num1 + num2; document.write("A soma de " + num1 + " com " + num2 + " " + resultado); } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exercicios\Evento\Soma2.html</title> </head> <body> <form name="calculadora"> Operando 1: <input type="text" name="op1"><br/> Operando 2: <input type="text" name="op2"><br/> <input type=button" value="Calcula" onclick="opera(document.calculadora.op1.value, document.calculadora.op2.value)"> </form> </body> </html>

213

*Desafio Fazer uma pgina HTML contendo um formulrio com quatro campos: operando1, operador (+-*/), operando2 e resultado e um boto de igual.

215

Resposta:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function opera() { var num1, num2, operacao; num1 = parseFloat(document.calculadora.op1.value); num2 = parseFloat(document.calculadora.op2.value); operacao = document.calculadora.operador.value; if(operacao == '+') resultado = num1 + num2; else if(operacao == '-') resultado = num1 - num2; else if(operacao == '*') resultado = num1 * num2; else resultado = num1 / num2; document.calculadora.result.value = resultado; } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exercicios\Evento\Calculadora2.html</title> </head> <body> <h1>4 Operaes</h1> <form name="calculadora"> <input type="text" name="op1"> <select name="operador"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" name="op2"> <input type="button" value=" = " onclick="opera()"> <input type="text" name="result"> </form> </body> </html>

216

Outra resposta:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function opera(sNum1, sNum2, operacao) { var num1 = parseFloat(sNum1); var num2 = parseFloat(sNum2); if(operacao == '+') resultado = num1 + num2; else if(operacao == '-') resultado = num1 - num2; else if(operacao == '*') resultado = num1 * num2; else resultado = num1 / num2; document.calculadora.result.value = resultado; } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exercicios\Evento\Calculadora.html</title> </head> <body> <h1>4 Operaes</h1> <form name="calculadora"> <input type="text" name="op1"> <select name="operador"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" name="op2"> <input type="button" value=" = " onclick="opera(document.calculadora.op1.value, document.calculadora.op2.value, document.calculadora.operador.value)"> <input type="text" name="result"> </form> </body> </html>

217

*Exerccios
Faa uma pgina HTML que leia o valor de 2 nmeros fracionrios atravs de comandos prompt. A pgina dever informar o valor do maior nmero lido. Faa 4 verses diferentes desta pgina:
1) Utilize uma funo que leia os 2 nmeros e escreva o maior. 2) Utilize uma funo que leia os 2 nmeros e retorne o maior (esta funo no escreva nada). 3) Utilize uma funo que receba os 2 nmeros e escreva o maior (esta funo no l nada). 4) Utilize uma funo que receba os 2 nmeros e retorne o maior (esta funo no l e no escreve nada).
218

*Exerccios
Complete a pgina HTML a seguir:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Quadrado</title> </head> <body> <script type="text/javascript"> var i = parseFloat(prompt("Informe um nmero")); var q = quad (i); alert(i + " ao quadrado = " + q); </script> </body> </html>

Modifique a sua pgina para no utilizar a varivel q


219

*Exerccios
Complete a pgina HTML a seguir:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exerccio de Funo</title> </head> <body> <script type="text/javascript"> var n1, n2, n3, aux, npares, tot; n1 = parseFloat(prompt("Entre com o primeiro nmero")); n2 = parseFloat(prompt("Entre com o o segundo nmero")); n3 = parseFloat(prompt("Entre com o terceiro nmero")); aux = maior (n1, n2); alert("O maior numero lido = " + maior(aux, n3)); alert("Media dos numeros lidos = " + media (n1, n2, n3)); npares = par(n1) + par(n2) + par(n3); alert("Total de numeros pares lidos = " + npares); tot = media(n1, n2, n3); alert("Total de valores acima da media = " + total(n1, n2, n3, tot)); </script> </body> </html>

220

*Exerccios Faa uma pgina HTML que leia o valor de 2 nmeros fracionrios atravs de comandos prompt. A pgina dever mostrar os 2 valores em ordem crescente. Crie uma nova verso para 3 nmeros Desafio: crie uma verso para CINCO nmeros!

221

*Exerccios Defina uma funo chamada maximo() que recebe 2 argumentos como parmetro e retorna o maior deles. Faa uma pgina para testar a sua funo.

222

*Exerccios Defina uma funo chamada maiorDe3() que recebe 3 nmeros como parmetros e retorna o maior deles. Faa uma pgina para testar a sua funo

223

Aula 4

Lao while Lao for Comando break Comando continue

224

*Repetio Permite a execuo repetida de um ou mais comandos


Repetio determinada Repetio indeterminada

225

*Laos while Permite repetir um comando ou bloco enquanto uma condio for verdadeira Forma geral:
Falsa Condio

while(condio) { comandos; }

Verdadeira Comandos

226

*Exemplo
<html> <head> <title>Exemplo de while()</title> </head> <body> <h2>Repetio com while()</h2> <script type="text/javascript"> var i = 1; while(i <= 10) { document.write(i + "<br>"); i++; } </script> </body> </html>
227

*Laos do while
Repete um bloco de comandos enquanto uma condio for verdadeira. Teste da condio realizado no final da iterao. Comandos so executados pelo menos uma vez Sintaxe:
do { comandos; } while (condio);
Verdadeira Condio Comandos

Falsa
228

*Exemplo:
<html> <head> <title>Exemplo de do-while()</title> </head> <body> <h2>Repetio com do-while()</h2> <script type="text/javascript"> var i = 0; do { document.write (i + "<br>"); i++; } while ( i <= 10 ); </script> </body> </html>
229

*Comparao entre while() e do-while()


<html> <head> <title>Exemplo de while()</title> </head> <body> <h2>Repetio com while()</h2> <script type="text/javascript"> var i = 8752; while ( i <= 10 ) { document.write(i + "<br>"); i++; } </script> </body> </html> <html> <head> <title>Exemplo de dowhile()</title> </head> <body> <h2>Repetio com dowhile()</h2> <script type="text/javascript"> var i = 8752; do { document.write (i + "<br>"); i++; } while ( i <= 10 ); </script> </body> </html>

230

*Laos for()
Repete um comando ou bloco controlado por uma varivel. Forma geral:
for (atribuio; condio; incremento) { comandos; } seguinte;
F condio V comandos incremento

atribuio

seguinte

231

*Exemplo:
<html> <head> <title>Exemplo de for</title> </head> <body> <h2>Exemplo de for()</h2> <script type="text/javascript"> for ( i = 0; i < 5; i++ ) document.write (i + "<br>"); </script> </body> </html>

232

Separador de comandos no for() A vrgula funciona como separador de comandos na atribuio e no incremento Sintaxe:
for (inic1, inic2, inic3, ...; condio; atual1, atual2, atual3, ...) { comandos; }
233

Exemplo:
<html> <head> <title>Exemplo de for com vrgula</title> </head> <body> <script type="text/javascript"> document.write ("<h3>Tabela de Fatoriais</h3>"); for ( i = 1, fat = 1; i < 6; i++, fat *= i ) document.write(i, "! = ", fat, "<br>"); </script> </body> </html>

234

*Comandos break e continue Permitem um controle adicional sobre os laos de repetio break;
Pare a repetio j!

continue;
Passe para a prxima iterao do lao!

235

*Exemplo de uso de break:


<html> <head> <title>Exemplo de for</title> </head> <body> <h2>Exemplo de for()</h2> <script type="text/javascript"> for(i = 0; i < 5; i++) { if(i == 2) break; document.write (i + "<br>"); } </script> </body> </html>
236

*Exemplo de uso de continue:


<html> <head> <title>Exemplo de for</title> </head> <body> <h2>Exemplo de for()</h2> <script type="text/javascript"> for(i = 0; i < 5; i++) { if(i == 2) continue; document.write (i + "<br>"); } </script> </body> </html>
237

Exemplo de for-in Cria um ndice para percorrer um array Sintaxe:


for (contador in objeto) { comandos; }

238

Exemplo de for-in
<html> <head> <title>Exemplo de for-in</title> </head> <body> <script type="text/javascript"> var diaSemana= new Array(); diaSemana[0] = "domingo"; diaSemana[1] = "segunda-feira"; diaSemana[2] = "tera-feira"; diaSemana[3] = "quarta-feira"; diaSemana[4] = "quinta-feira"; diaSemana[5] = "sexta-feira"; diaSemana[6] = "sbado"; for (var i in diaSemana) document.write(i + " " + diaSemana[i] + "<br />"); </script> </body> </html>

239

Perguntas?

240

Exerccios

241

*Exerccios Faa um programa que imprima todos os nmeros de 0 (inclusive) at 10 (exclusive)

242

Sugesto de Soluo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Nmeros de 0 at 10</title> </head> <body> <script type="text/javascript"> for(i=0; i<10; i++) document.write(i + " "); </script> </body> </html>

243

*Exerccios Faa um programa que imprima todos os nmeros pares de 0 at 25

244

Sugesto de Soluo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Nmeros Pares</title> </head> <body> <script type="text/javascript"> for(i=0; i<25; i=i+2) document.write(i + " "); </script> </body> </html>

245

*Exerccios Faa um programa que imprima todos os nmeros pares de um intervalo


Faa uma verso lendo os dados de um formulrio HTML Faa uma verso lendo os dados atravs de um prompt()

246

Sugesto de Soluo do Item A


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function lista() { var inicio = parseInt(document.dados.inicio.value); if(inicio%2 != 0) inicio++; var fim = parseInt(document.dados.fim.value); for(i=inicio; i<fim; i=i+2) document.write(i + " "); } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Pares em um intervalo com formulrio</title> </head> <body> <form name="dados"> Incio: <input type="text" name="inicio"> Fim: <input type="text" name="fim"><br/> <input type="button" onclick="lista()" value="Imprime"> </form> </body> </html>

247

Sugesto de Soluo do Item B


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Pares em um intervalo com formulrio</title> </head> <body> <script type="text/javascript"> var inicio, fim; inicio = parseInt(prompt("Inicio")); if(inicio%2 != 0) inicio++; fim = parseInt(prompt("Fim")); for(i=inicio; i<fim; i=i+2) document.write(i + " "); </script> </body> </html>

248

*Exerccios Faa um programa que imprima a tabuada de um nmero lido


Faa uma verso lendo de um formulrio HTML Faa uma verso lendo de um prompt()

249

Sugesto de Soluo do Item A


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function tabuada() { var valor, i; valor = parseInt(document.dados.valor.value); for(i=0; i<=10; i++) document.write(i + " x " + valor + " = " + (i * valor) + "<br/>"); } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Pares em um intervalo com formulrio</title> </head> <body> <form name="dados"> Tabuada: <input type="text" name="valor"><input type="button" onclick="tabuada()" value="Imprime"> </form> </body> </html>

250

Sugesto de Soluo do Item B


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Pares em um intervalo com formulrio</title> </head> <body> <script type="text/javascript"> var valor = parseInt(prompt("Tabuada de...")); for(i=0; i<=10; i++) document.write(i + " x " + valor + " = " + (i * valor) + "<br/>"); </script> </body> </html>

251

*Calculadora com Repetio Faa uma pgina HTML que receba do usurio 2 nmeros reais atravs de um prompt() e mostre a sua soma. Aps mostrar a soma, a pgina dever perguntar se o usurio deseja somar novamente atravs do mtodo confirm()

252

*Exerccios Faa um programa que imprima o fatorial de um nmero lido


Faa uma verso lendo de um formulrio HTML Faa uma verso lendo de um prompt()

253

Sugesto de Soluo do Item A


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function fatorial() { var resultado = 1; var valor = parseInt(document.dados.valor.value); for(i=valor; i>0; i--) resultado = resultado * i; document.write("O fatorial de " + valor + " " + resultado); } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Fatorial</title> </head> <body> <form name="dados"> Fatorial: <input type="text" name="valor"><input type="button" onclick="fatorial()" value="Imprime"> </form> </body> </html>

254

Sugesto de Soluo do Item B


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Fatorial</title> </head> <body> <script type="text/javascript"> var resultado = 1; var valor = parseInt(prompt("Fatorial de...")); for(i=valor; i>0; i--) resultado = resultado * i; document.write("O fatorial de " + valor + " " + resultado); </script> </body> </html>

255

*Desafios Faa um programa que imprima TODA a tabuada

256

Sugesto de Soluo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <table> <tr> <td> <center><h1>Tabuada</h1></center> <hr/> <table> <tr bgcolor="green"><td width='30' height='30' align='center' valign='middle'>X</td> <script type="text/javascript"> for(i=1; i<10; i++) document.write("<td width='30' height='30' align='center' valign='middle'>" + i + "</td>"); document.write("</tr>"); for(i=1; i<10; i++) { document.write("<tr><td bgcolor='green' height='30' align='center' valign='middle'>" + i + "</td>"); for(j=1; j<10; j++) document.write("<td bgcolor='brown' height='30' align='center' valign='middle'>" + (i*j) + "</td>"); document.write("</tr>"); } </script> </table> </td> </tr> </table> </body> </html>

257

*Desafios Faa um programa que imprima um tabuleiro de xadrez

258

Sugesto de Soluo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Tabuleiro de Xadrez</title> </head> <body> <table border="1"> <script type="text/javascript"> for(i=0; i<8; i++) { document.write("<tr>"); for(j=0; j<8; j++) if((i+j)%2 == 0) document.write("<td bgcolor='black' width='30' height='30'>&nbsp;</td>"); else document.write("<td bgcolor='white' width='30' height='30'>&nbsp;</td>"); document.write("</tr>"); } </script> </table> </body> </html>

259

*Grande desafio Obtenha a data de hoje (no para ler) e monte uma pgina com o calendrio, destacando o dia de hoje (em vermelho, por exemplo).

260

Sugesto de Soluo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Calendrio</title> </head> <body> <table> <tr> <td align="center">Calendrio</td> </tr> <tr> <td> <table border='1'> <script type="text/javascript"> var mes = new Array(12); var ndias = new Array(12); mes[0]="Janeiro"; mes[1]="Fevereiro"; mes[2]="Maro"; mes[3]="Abril"; mes[4]="Maio"; mes[5]="Junho"; mes[6]="Julho"; mes[7]="Agosto"; mes[8]="Setembro"; mes[9]="Outubro"; mes[10]="Novembro"; mes[11]="Dezembro"; var data = new Date(); document.write("<tr><th colspan='7' align='center'>" + mes[data.getMonth()] + " de " + data.getYear() + "</th></tr>"); var proximoMes = new Date(); if(data.getMonth() == 11) proximoMes.setFullYear(data.getYear() + 1, 0, 1); else proximoMes.setFullYear(data.getYear(), data.getMonth() +1, 1); </script> <tr> <th>Dom</th><th>Seg</th><th>Ter</th><th>Qua</th><th>Qui</th><th>Sex</th><th>Sb</th> </tr> <script type="text/javascript"> var agora = new Date(); var diaMes = 1; do { document.write("<tr>"); for(i=0; i<7; i++) { agora.setDate(diaMes); if(((diaMes == 1) &&(i == data.getDay())) || ((diaMes != 1) && (agora < proximoMes))) { if(data.getDate() == diaMes) document.write("<td><font color='red'>" + diaMes + "</font></td>"); else document.write("<td>" + diaMes + "</td>"); diaMes++; } else document.write("<td>&nbsp;</td>"); } document.write("</tr>"); } while (agora < proximoMes); </script> </table> </td> </tr> </table> </body> </html>

261

*Enorme Desafio: Jogo da Senha


Faa o Jogo da Senha Funcionamento:
2 jogadores Jogador 1:
O jogador 1 informa um nmero entre 0 e 9, inclusive os extremos. A leitura realizada atravs de um campo do tipo senha. O programa no aceita nmeros invlidos. Neste caso, pede para entrar com o nmero novamente O jogador 1 informa o nmero mximo de tentativas do jogador 2

Jogador 2:
Chuta um nmero Se for errado ou invlido, perde a chance e chuta novamente Se o nmero for vlido mas errado, informado se o chute foi muito grande ou pequeno. Se o chute estiver 1 unidade de distncia da senha, o usurio informado que o chute foi quente, caso contrrio, frio (o jogador 2 no informado se o nmero maior ou menor que a senha)

262

*Outro desafio: Faa uma funo que receba um nmero inteiro como parmetro e retorne verdadeiro se o nmero for primo, caso contrrio, retorne falso Faa um script que informe os N primeiros nmeros primos.

263

Aula 5 - Objetos

264

*Introduo Javascript uma linguagem de programao orientada a objetos (OO) Uma linguagem de programao OO permite a definio de novos objetos e novos tipos de dados

265

*Programao OO
Podemos utilizar os objetos j definidos na linguagem ou criar novos objetos Comearemos utilizando objetos pr-definidos na linguagem. Um objeto apenas um tipo especial de dado. Um objeto possui propriedades e mtodos. Um objeto uma coisa, qualquer coisa, como uma coisa no mundo real
Ex.: carros, pssaros, dinheiro, livros, etc.

No navegador, objetos so o prprio navegador, formulrios, botes, caixas de texto, etc.


266

*Propriedades
So os valores associados a um objeto No exemplo abaixo usamos a propriedade length do objeto String para retornar a quantidade de caracteres de um texto Exemplo:
<script type="text/javascript"> var txt="Oi Turma!"; document.write(txt.length); </script>

O cdigo acima ter como sada o valor 9

267

*Mtodos
So as aes que podem ser executadas por um objeto No exemplo abaixo estamos usando o mtodo UpperCase() o objeto String para exibir o texto em letras maisculas Exemplo
<script type="text/javascript"> var str="Oi Turma!"; document.write(str.toUpperCase()); </script>

O cdigo acima ter como sada o texto OI TURMA!


268

*Objeto Em resumo, um objeto um conjunto de:


Propriedades Mtodos

Classe

varA varC FuncA ( FuncC ( ) )

varB varD FuncB ( FuncD ( ) )


269

*Criando uma Instncia de um Objeto Voc pode usar o operador new para criar instncias de objetos de uma classe em particular
variavel = new tipoDoObjeto(parametros);

tipoDoObjeto() chamado construtor Ex.: Date um objeto pr-definido


Criando um objeto
objA = new Date();

Criando um objeto com uma data pr-definida


objB = new Date(2013, 8, 17);
270

*Objeto String Permite a manipulao de strings (textos) ou de partes de um texto Esta manipulao pode ser feita atravs da chamada de mtodos Existem vrios mtodos pr-definidos para o objeto String

271

*Exemplo utilizando estilos no texto a ser exibido


<html> <body> <script type="text/javascript"> txt="Oi Turma!"; document.write("<p>Big: " + txt.big() + "</p>"); document.write("<p>Small: " + txt.small() + "</p>"); document.write("<p>Bold: " + txt.bold() + "</p>"); document.write("<p>Italic: " + txt.italics() + "</p>"); document.write("<p>Blink: " + txt.blink() + "</p>"); document.write("<p>Fixed: " + txt.fixed() + "</p>"); document.write("<p>Strike: " + txt.strike() + "</p>"); document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>"); document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>"); document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>"); document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>"); document.write("<p>Subscript: " + txt.sub() + "</p>"); document.write("<p>Superscript: " + txt.sup() + "</p>"); document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>"); </script> </body> </html>

272

*Objeto String: mtodo indexOf()


Exemplo usando o mtodo indexOf() para retornar a posio da primeira ocorrncia de um texto especfico em um texto
<html> <body> <script type="text/javascript"> var str="Oi Turma!"; document.write(str.indexOf("Oi") + "<br />"); document.write(str.indexOf("Turma") + "<br />"); document.write(str.indexOf("turma")); </script> </body> </html>

O cdigo acima ter como sada os valores:


0 3 -1
273

*Objeto String: mtodo charAt()


O mtodo charAt(posio) retorna o caracter na posio informada. <body> <script type="text/javascript"> var texto = "Este um texto"; var posicao = 8; var caracter = texto.charAt(posicao); document.write("O caracter que est na posio " + posicao + " " + caracter + "<br/>"); document.write("Ou seja, " + texto[posicao]); </script> </body> </html>
274

Objeto String: mtodo match()


Exemplo usando o mtodo match() para procurar um texto especfico dentro de um texto e caso encontre retorna o valor do texto <html> <body> <script type="text/javascript"> var str="Oi Turma!"; document.write(str.match("turma") + "<br />"); document.write(str.match("Turma") + "<br />"); document.write(str.match("turna") + "<br />"); document.write(str.match("Turma!")); </script> </body> </html> O exemplo acima ter como sada:
null Turma null Turma!
275

Objeto String: mtodo replace() Exemplo usando o mtodo replace() para substituir alguns caracteres por outros em um texto
<html> <body> <script type="text/javascript">
var str="Oi Turma!"; document.write(str.replace(/Turma/,"Pessoal"));

document.write(str); </script> </body> </html>

O resultado da pgina ser:


Oi Pessoal Oi Turma!
276

*Objeto String - Propriedades

277

*Objeto String - Mtodos

278

*Objeto Array Um objeto Array utilizado para armazenar vrios valores em uma nica varivel Todos os valores armazenados em um array so de um mesmo tipo Necessita de um ndice para podermos nos referenciarmos a um dos dados armazenados no array O ndice do array um nmero inteiro. O primeiro ndice de um array sempre o 0 (zero).
279

*Objeto Array: criao Exemplo criando um objeto Array


<html> <body> <script type="text/javascript"> var diaSemana= new Array(); diaSemana[0] = "domingo"; diaSemana[1] = "segunda-feira"; diaSemana[2] = "tera-feira"; diaSemana[3] = "quarta-feira"; diaSemana[4] = "quinta-feira"; diaSemana[5] = "sexta-feira"; diaSemana[6] = "sbado"; for (i=0;i<diaSemana.length;i++) document.write(diaSemana[i] + "<br />"); </script> </body> </html>
280

*Objeto Array: mtodo sort()


Exemplo utilizando o mtodo sort() que ordena o array em ordem crescente
<html> <body> <script type="text/javascript"> var estado = new Array(5); estado [0] = "Rio de Janeiro"; estado [1] = "Minas Gerais"; estado [2] = "Paran"; estado [3] = "Bahia"; estado [4] = "So Paulo"; document.write(estado + "<br />"); document.write(estado .sort()); </script> </body> </html>

281

*Outro exemplo de criao de Array


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Nomes dos Estados</title> </head> <body> <script type="text/javascript"> var estado = ["Rio de Janeiro", "Minas Gerais", "Paran", "Bahia", "So Paulo"]; document.write(estado + "<br />"); document.write(estado.sort() + "<br/>"); document.write(estado.reverse() + "<br />"); </script> </body> </html>

282

Salada de Frutas
<html> <head> <title>Salada de Frutas</title> </head> <body> <script type="text/javascript"> var vetor = new Array(); vetor[0] = "indice 0"; vetor[1] = 8752; vetor.campo2 = "Campo 2"; vetor["campo3"] ="Campo 3"; document.write(vetor[0] + "<br/>"); document.write(vetor[1] + "<br/>"); document.write(vetor.campo2 + "<br/>"); document.write(vetor.campo3 + "<br/>"); document.write(vetor["campo2"] + "<br/>"); document.write(vetor["campo3"] + "<br/>"); </script> </body> </html> 283

*Referncia completa do objeto array


Method concat() join() pop() push() reverse() shift() slice() sort() splice() toSource() toString() unshift() valueOf() Description Joins two or more arrays and returns the result Puts all the elements of an array into a string. The elements are separated by a specified delimiter Removes and returns the last element of an array Adds one or more elements to the end of an array and returns the new length Reverses the order of the elements in an array Removes and returns the first element of an array Returns selected elements from an existing array Sorts the elements of an array Removes and adds new elements to an array Represents the source code of an object Converts an array to a string and returns the result Adds one or more elements to the beginning of an array and returns the new length Returns the primitive value of an Array object

284

*Objeto Date

Permite a utilizao de datas e horas Criando um objeto data:


var minhaData = new Date(); Obs.: o objeto data possuir automaticamente a data e a hora atual como valor inicial
285

*Objeto Date: mtodo Date() Exemplo usando o mtodo Date() para obteno da data e hora corrente
<html> <body> <script type="text/javascript"> document.write(Date()); </script> </body> </html>
286

*Objeto Date: mtodo Date()


Exemplo usando o mtodo Date() e um array para exibir o dia da semana <html> <body> <script type="text/javascript"> var data=new Date(); var diaSemana=new Array(7); diaSemana[0]="domingo"; diaSemana[1]="segunda-feira"; diaSemana[2]="tera-feira"; diaSemana[3]="quarta-feira"; diaSemana[4]="quinta-feira"; diaSemana[5]="sexta-feira"; diaSemana[6]="sbado"; document.write("Hoje " + diaSemana[data.getDay()]); </script> </body> </html>
287

*Configurando datas
Criar um objeto data representado o dia 28 de agosto de 1970 <html> <head> <title>Configurando a Data</title> </head> <body> <script type="text/javascript"> var data = new Date(); // 27 de agosto de 1970 data.setFullYear(1970, 7, 27); document.write("Data: " + data); </script> </body> </html>

288

*Comparando Duas Datas


<html> <head> <title>Comparao de Datas</title> </head> <body> <script type="text/javascript"> var minhaData = new Date(); minhaData.setFullYear(1970, 6, 27); var hoje = new Date(); if (hoje > minhaData) alert ("Hoje depois de 27/07/1970"); else alert ("Hoje antes de 27/07/1970"); </script> </body> </html>

289

*Referncia do Objeto Date

Method Date() getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay()

Description Returns today's date and time Returns the day of the month from a Date object (from 1-31) Returns the day of the week from a Date object (from 0-6) Returns the year, as a four-digit number, from a Date object Returns the hour of a Date object (from 0-23) Returns the milliseconds of a Date object (from 0-999) Returns the minutes of a Date object (from 0-59) Returns the month from a Date object (from 0-11) Returns the seconds of a Date object (from 0-59) Returns the number of milliseconds since midnight Jan 1, 1970 Returns the difference in minutes between local time and Greenwich Mean Time (GMT) Returns the day of the month from a Date object according to universal time (from 1-31) Returns the day of the week from a Date object according to universal time (from 0-6)

290

*Referncia do Objeto Date


Method getUTCMonth() getUTCFullYear() getUTCHours() getUTCMinutes() getUTCSeconds() getUTCMilliseconds() getYear() parse() setDate() setFullYear() setHours() setMilliseconds() setMinutes() Description Returns the month from a Date object according to universal time (from 0-11) Returns the four-digit year from a Date object according to universal time Returns the hour of a Date object according to universal time (from 0-23) Returns the minutes of a Date object according to universal time (from 0-59) Returns the seconds of a Date object according to universal time (from 0-59) Returns the milliseconds of a Date object according to universal time (from 0-999) Returns the year, as a two-digit or a three/four-digit number, depending on the browser. Use getFullYear() instead !! Takes a date string and returns the number of milliseconds since midnight of January 1, 1970 Sets the day of the month in a Date object (from 1-31) Sets the year in a Date object (four digits) Sets the hour in a Date object (from 0-23) Sets the milliseconds in a Date object (from 0-999) Set the minutes in a Date object (from 0-59)

291

*Referncia do Objeto Date


Method setMonth() setSeconds() setTime() setUTCDate() setUTCMonth() setUTCFullYear() setUTCHours() setUTCMinutes() setUTCSeconds() setUTCMilliseconds() setYear() Description Sets the month in a Date object (from 0-11) Sets the seconds in a Date object (from 0-59) Calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970 Sets the day of the month in a Date object according to universal time (from 1-31) Sets the month in a Date object according to universal time (from 0-11) Sets the year in a Date object according to universal time (four digits) Sets the hour in a Date object according to universal time (from 0-23) Set the minutes in a Date object according to universal time (from 0-59) Set the seconds in a Date object according to universal time (from 0-59) Sets the milliseconds in a Date object according to universal time (from 0-999) Sets the year in the Date object (two or four digits). Use setFullYear() instead !!

292

*Referncia do Objeto Date

Method toDateString() toGMTString() toLocaleDateString() toLocaleTimeString() toLocaleString() toSource() toString() toTimeString() toUTCString() UTC() valueOf()

Description Returns the date portion of a Date object in readable form Converts a Date object, according to Greenwich time, to a string. Use toUTCString() instead !! Converts a Date object, according to local time, to a string and returns the date portion Converts a Date object, according to local time, to a string and returns the time portion Converts a Date object, according to local time, to a string Represents the source code of an object Converts a Date object to a string Returns the time portion of a Date object in readable form Converts a Date object, according to universal time, to a string Takes a date and returns the number of milliseconds since midnight of January 1, 1970 according to universal time Returns the primitive value of a Date object

293

Perguntas?

294

Exerccios

295

*Data de Hoje Faa uma pgina HTML que mostre a data de hoje no formato: Quinta-feira, 25 de setembro de 2013

296

*Data de Nascimento Faa uma pgina que pergunte ao usurio os nmeros do dia, do ms e do ano do nascimento dele. Informe a data completa, incluindo o dia da semana, por extenso do nascimento do usurio

297

*Exerccios Faa uma pgina com um formulrio com um campo de e-mail e um boto. O usurio dever digitar o seu endereo de e-mail e a pgina dever mostrar o domnio do e-mail do usurio.
Dicas:
O mtodo de string chamado de indexOf(texto) devolve a primeira ocorrncia de texto dentro da string A propriedade de string chamada de length equivale ao nmero de caracteres da string O mtodo de string chamado de substring(incio, fim) retorna uma parte da string
299

*Exerccios Fazer uma pgina HTML que informe qual o browser que o usurio est utilizando. Dica: utilize a propriedade appName do objeto navigator. Informe se o browser :
MS Internet Explorer Mozila Firefox Apple Safari Google Chrome Opera Outros
300

*Exerccios Fazer um programa em javascript que leia duas strings e monte uma pgina indicando a posio de todas as ocorrncias da segunda string na primeira.
Exemplo:
Primeira string: Este um texto que contm um texto com a palavra texto Segunda string: texto Resultado: 10 30 50

301

*Exerccios Fazer uma pgina que cada vez que recarregada exibe um banner escolhido aleatoriamente. Desta vez, utilize um vetor de nomes de figuras.
Dica:
Para obter um nmero aleatrio entre 0 e 4, utilize parseInt(Math.random()*5) Coloque o endereo das figuras em um array de strings

Obs.: Utilize pelo menos 5 figuras diferentes.

302

*Exerccios Obtenha a data de hoje (no para ler) e monte uma pgina com o calendrio, destacando o dia de hoje (em vermelho, por exemplo).

303

*Exerccios Escreva uma funo que recebe um caracter e retorna verdadeiro (true) se for uma vogal, falso (false) caso contrrio. Faa uma pgina HTML para testar a sua funo

304

*Exerccios Defina uma funo soma() e uma funo multiplica() que soma e multiplica, respectivamente, todos os numeros em um vetor (array). Por exemplo:
soma([1,2,3,4]) deve retornar 10 multiplica([1,2,3,4]) deve retornar 24

Faa uma pgina HTML para testar a sua funo.

305

*Exerccios Defina uma funo reverso() que inverta uma string. Por exemplo, reverso("um teste") deve retornar "etset mu" Faa uma pgina HTML para testar a sua funo

306

*Exerccios Escreva uma funo chamada achaAMaiorPalavra() que recebe um vetor de palavras e retorna a maior palavra. Faa uma pgina HTML para testar a sua funo.

307

*Exerccios Rvarsprket um jogo Sueco onde se codifica um texto duplicando cada consoante e incluindo uma letra o entre cada uma delas. Vogais so mantidas intactas como no exemplo a seguir:
Este seria um texto! Esostote soseroria umom totexoxtoto!

Implemente uma pgina que contenha um formulrio para implementar o jogo.

308

Aula 6 - Mais Objetos

309

*Objetos do browser
O navegador cria automaticamente uma hierarquia de objetos refletindo alguns elementos inseridos na pgina. Os atributos da tag viram propriedades do objeto. Algumas propriedades podem ter seu valor modificado. O navegador mantm a coerncia entre o valor da propriedade e o que est sendo visualizado pelo usurio.
310

*Hierarquia de Objetos JavaScript


navigator window
frames [ ] document
forms [ ]
elements [ ] : button, checkbox, radio, text, textarea... options [ ] (quando o elemento um select)

links [ ] anchors [ ] images [ ]

history location

311

*Pgina exemplo

images[0] forms[0] elements[0] elements[1] elements[2] images[1] links[0] links[1]

312

*Pgina exemplo
<body> <h1 align="center">Home Page</h1> <form> <table align="center"> <tr> <td align="right">Nome:</td> <td><input type='text' name='nome' value='Alexandre' /></td> </tr> <tr> <td align="right">e-mail:</td> <td><input type='text' name='email' value='alexandre.meslin@gmail.com' /></td> </tr> <tr> <td colspan="2" align="center"><input type='submit' value='Envia'></input></td> </tr> </table> </form> <a href='http://www.meusite.com.br'>Link para meu site</a><br> <a href='http://wwww.outrosite.com.br'>Link para outro site</a><br> <hr /> <script type="text/javascript"> document.write(document.forms[0].elements[0].value + '<br/>'); document.write(document.forms[0].elements[1].value + '<br/>'); document.write(document.links[0] + '<br/>'); document.write(document.links[1] + '<br/>'); </script> </body>

313

Hierarquia de Objetos DOM

314

*O Objeto window
o objeto de mais alto nvel na hierarquia de objetos do browser em Javascript o objeto default Criado automaticamente quando a pgina carregada Como objeto default, pode ser omitido
window.document.write(texto); document.write(texto);

Cada janela possui um objeto window Inclui vrios mtodos e propriedades


https://developer.mozilla.org/en-US/docs/Web/API/Window
315

*Objeto window Escreve na barra de status


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Coloca uma mensagem em uma barra de status</title> <script type="text/javascript"> window.status = Modificando a barra de status"; </script> </head> <body> <p> Veja uma mensagem na barra de status. </p> A barra de status </body> tem que ser habilitada </html>

316

*Descobrindo o tipo de browser Algumas coisas no funcionam em determinados browsers Algumas coisas devem ser escritas de forma diferentes em diferentes browsers para obtermos o mesmo efeito Para detectarmos o tipo de browser, utilizamos o objeto navigator

317

*Objeto navigator Objeto navigator


Permite configurar as aplicaes para navegadores diferentes Propriedades:
appCodeName appName appVersion platform language (no explorer userLanguage e systemLanguage)

318

*Objeto navigator

<html> <head> <title>Tipo de Browser</title> </head> <body> <script type="text/javascript"> var browser = navigator.appName; var b_versao = navigator.appVersion; var versao = parseFloat(b_versao); document.write("Browser: " + browser + "<br/>"); document.write("Verso: " + versao + "<br/>"); </script> </body> </html>

319

*Alguns detalhes do objeto navigator

<script type="text/javascript"> document.write ("<b>Browser:</b> "+ navigator.appName + "<br/>"); document.write ("<b>Veso:</b> " + navigator.appVersion + "<br/>"); document.write ("<b>Nome do cdigo:</b> " + navigator.appCodeName + "<br/>"); document.write ("<b>Altura:</b> " + navigator.availHeight + "<br/>"); document.write ("<b>Largura:</b> " + navigator.availWidth + "<br/>"); document.write ("<b>Nmero de cores:</b> " + navigator.colorDepth + "<br/>"); document.write ("<b>Suporte a cookies:</b> " + navigator.cookieEnabled + "<br/>"); document.write ("<b>Altura:</b> " + navigator.height + "<br/>"); document.write ("<b>Plataforma</b>: " + navigator.platform + "<br/>"); document.write ("<b>Agente:</b> " + navigator.userAgent + "<br/>"); document.write ("<b>Largura:</b> " + navigator.width + "<br/>"); document.write ("<b>Suporte a Java:</b> " + navigator.javaEnabled() + "<br/>"); </script>

320

*O objeto document o objeto mais importante em uma janela ou frame O objeto document representa um documento web ou uma pgina em um navegador Inclui vrios mtodos e propriedades
https://developer.mozilla.org/enUS/docs/Web/API/Document
321

*Objeto document
Serve para definir/consultar caractersticas do documento corrente Algumas Propriedades:
bgcolor, fgcolor, linkcolor, vlinkcolor, alinkcolor lastModified, referrer, title, etc

Objetos contidos num documento


links[ ]; anchors[ ]; forms [ ]; images[ ]; etc

Escrevendo texto num documento:


write (valor1, valor2, , valorN) writeln (valor1, valor2, , valorN)

322

*Javascript e DOM HTML Javascript pode ser utilizado para modificar o contedo ou os atributos de elementos HTML
Modificando o contedo:
document.getElementById(id).innerHTML = novo HTML

Modificando um atributo:
document.getElementById(id).atributo = novo valor

Modificando um estilo:
document.getElementById(id).style.propriedade = novo estilo

323

*Javascript e DOM HTML

<html> <body> <p id="paragrafo">Um teste!</p> <form> <input type="button" value="Muda contedo!" onclick='document.getElementById("paragrafo").innerHTML = "outro texto"'> <input type="button" value="Muda cor!" onclick='document.getElementById("paragrafo").style.color = "red"'> </form> </body> </html>

324

*Javascript e DOM HTML

<html> <head> <script type="text/javascript"> function mudaTexto() { document.getElementById("paragrafo").innerHTML = "outro texto"; } function mudaCor() { document.getElementById("paragrafo").style.color = "red"; } </script> </head> <body> <p id="paragrafo">Um teste!</p> <form> <input type="button" value="Muda contedo!" onclick='mudaTexto()'> <input type="button" value="Muda cor!" onclick='mudaCor()'> </form> </body> </html>

325

*Modificando uma figura

<html> <body> <img src='imagens/smile1.gif' id='imagem' onmouseover='document.getElementById("imagem").src=" imagens/smile2.gif"' onmouseout='document.getElementById("imagem").src="i magens/smile1.gif"'/> </body> </html>
326

*Modificando uma figura

<html> <head> <script type="text/javascript"> function mudaComMouse() { document.getElementById("imagem").src="imagens/smile2.gif" } function mudaSemMouse() { document.getElementById("imagem").src="imagens/smile1.gif" } </script> </head> <body> <img src='imagens/smile1.gif' id='imagem' onmouseover='mudaComMouse()' onmouseout='mudaSemMouse()'/> </body> </html>

327

Criando um Objeto HTML


<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Adiciona um campo</title> <script type="text/javascript"> function adiciona() { var campoInput = document.createElement("input"); campoInput.setAttribute("type", "button"); campoInput.setAttribute("value", "boto criado"); campoInput.setAttribute("id", "idCriado"); var formulario = document.getElementById("idFormulario"); formulario.appendChild(campoInput); } function remove() { var formulario = document.getElementById("idFormulario"); var campoCriado = document.getElementById("idCriado"); formulario.removeChild(campoCriado); } </script> </head> <body> <form id="idFormulario"> <input type="button" onclick="adiciona()" value="Aperte para criar um boto" id="idCria" /><br/> <input type="button" onclick="remove()" value="Aperte para remover um boto" id="idRemove" /><br/> </form> </body> </html>

328

*Eventos HTML Cada elemento em uma pgina HTML tem eventos que podem disparar scripts em Javascript Exemplos de eventos:
Um clique de mouse Uma pgina carregada Uma imagem carregada A Seleo de um campo de entrada em um formulrio HTML O envio de um formulrio O acionar de uma tecla
329

*Exemplo

<html> <body> <h1 id="cabecalho" onclick='document.getElementById("cabecalho").innerH TML="Eu falei para no clicar"'>No clique aqui</h1> <h1 id="cabecalho" onclick='this.innerHTML="Eu falei para no clicar"'>No clique aqui</h1> </body> </html>
330

*Exemplo

<html> <head> <title>Insert title here</title> <script type="text/javascript"> function mudaPeloID(idObjeto) { document.getElementById(idObjeto).innerHTML="Eu falei para no clicar" } function mudaPeloObjeto(objeto) { objeto.innerHTML="Eu falei para no clicar" } </script> </head> <body> <h1 id="cabecalho" onclick='mudaPeloID(idObjeto)'>No clique aqui</h1> <h1 id="cabecalho" onclick='mudaPeloObjeto(this)'>No clique aqui</h1> </body> </html>

331

*O Objeto this this, como o nome est dizendo, referencia ao prprio objeto
Exemplo: <h1 id="cabecalho" onclick='this.innerHTML="Eu falei para no clicar"'>No clique aqui</h1>

No exemplo anterior, this faz referncia ao objeto representado por esta instncia de <h1>
332

*Exemplo

<html> <head> <script type="text/javascript"> function muda(objeto) { objeto.innerHTML = "Eu falei para no clicar" } </script> <title>Muda com funo</title> </head> <body> <h1 onclick='muda(this)'>No clique aqui</h1> <p onclick='muda(this)'>No clique aqui</p> </body> </html>

333

*Exemplo

<html> <body> <h1 id="cabecalho" onclick='this.style.color="red"'>Ttulo do Texto</h1> <p onclick='document.getElementById("cabecalho").style.color= "blue"'>Um pargrafo</p> </body> </html>

334

*Mais um exemplo
<html> <head> <script type="text/javascript"> function mudaCor(nomeDoObjeto, cor) { document.getElementById(nomeDoObjeto).style.color = cor; } </script> </head> <body> <h1 id="cabecalho" onclick='mudaCor("cabecalho", "#104175")'>Ttulo do Texto</h1> <p onclick='mudaCor("cabecalho", "blue")'>Um pargrafo</p> <a href='www.meslin.com' id='umLink'>No meu site</a> <div onmouseover='mudaCor("umLink", "yellow")' onmouseout='mudaCor("umLink", "black")'>Muda cor do link</div> </body> </html>
335

Navegando entre Campos


objeto.focus() e objeto.blur()
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplo de focus() e blur()</title> </head> <body> <form> <button onmouseover='document.getElementById("texto").focus()'> Foco no campo a direita </button> <input type="text" id="texto"/><br/> <input type="text" onfocus="this.blur()" value="Campo inalcanvel"/> </form> </body> </html>

336

Perguntas?

337

Exerccios

338

*Exerccios Faa uma pgina HTML com uma figura. Ao clicar na figura, esta dever mudar.

339

*Exerccio Faa uma pgina HTML contendo um formulrio com os campos:


Nome: somente letras maisculas Data de nascimento: formato dd/mm/aaaa CEP: formato nnnnn-nnn CPF: formato nnn.nnn.nnn-dd

Ao selecionar o campo que ser preenchido, o usurio dever visualizar, no topo da pgina, as instrues referentes ao campos

340

*Exerccio
Implemente a pgina HTML mostrada na figura.
Ao passar o mouse no texto, este dever ser habilitado (ao sair, desabilitado) Ao clicar no texto, a figura dever mudar

Desafio: inclua uma descrio em formato texto abaixo da figura (a descrio muda com a figura)
341

*Exerccio Faa uma pgina HTML com vrios links. Faa com que o estilo do link mude ao passar o mouse por cima. No se esquea de voltar ao estilo normal aps o mouse sair (voc escolhe o estilo).

342

*Exerccio Faa uma pgina com um formulrio com um campo para o usurio informar o seu nome e outro para informar o gnero. Ao clicar no boto, uma janela de confirmao dever ser aberta apresentando os dados informados.
1) Use radio para selecionar o gnero 2) Use select para selecionar o gnero
Veja observao no prximo slide

343

*Uso do campo <select> (mltiplo ou no)


Para saber o nmero de opes:
document.formulario.campoSelect.length

Para saber o ndice do ltimo item selecionado:


document.formulario.campoSelect.selectedIndex

Para referenciar uma opo em particular em um objeto do tipo select:


document.formulario.campoSelect.options[indice]

Para referenciar o seu valor:


document.formulario.campoSelect.options[indice].value

Para referenciar o seu texto:


document.formulario.campoSelect.options[indice].text

Para saber se a opo foi selecionada (booleano):


document.formulario.campoSelect.options[indice].selected

Para saber se a opo pr-selecionada (booleano):


document.formulario.campoSelect.options[indice].defaultSelected

344

*Exerccio Faa uma pgina com um formulrio contendo um campo para o usurio informar o seu nome e campos checkbox para que seja informado os tipos de atividades desejadas. Ao clicar no boto, uma janela de confirmao dever ser aberta apresentando os dados informados. Desafio: modifique o exerccio para que o usurio possa clicar no texto relacionado ao checkbox para marcar o checkbox
345

*Exerccios Faa uma pgina HTML que possua dois botes, um para aumentar o tamanho do fonte e outro para diminu-lo. Coloque um texto com vrios pargrafos

346

*Desafio! Refaa o exerccio do tamanho do fonte e inclua entre um pargrafo e outro, o exerccio da figura que muda ao passar o mouse por cima

347

*Desafio Faa um menu no estilo Windows (ou Mac ou Linux)

348

Definindo Classes e Objetos

349

Criando um objeto On-The-Fly


Para criar um campo em um objeto, basta atribuir um valor a um campo. Se o campo no existir, ele ser criado naquele momento. Ex.:
<script type="text/javascript"> var objeto = new Object(); objeto.campo1 = "valor 1"; objeto.campo2 = 8752 alert(objeto.campo1 + objeto.campo2); </script>
350

Criando um objeto On-The-Fly


Outro exemplo:
<script type="text/javascript"> var objeto1 = new Object(); var objeto2 = new Object(); objeto1.x = 8; objeto1.y = 7; objeto1.z = 5; objeto2 = {x:8, y:7, z:5}; alert(objeto1.x); alert(objeto2.y); </script>
351

Criando um Construtor
Em Javascript, um construtor apenas uma funo que atribui a

this

Javascript no tem nada exatamente equivalente a uma definio de classe Java Exemplo:
<script type="text/javascript"> function Barco(x, y, velocidade, direcao) { this.x = x; this.y = y; this.velocidade = velocidade; this.direcao = direcao; } var barco = new Barco(1, 2, 3, 4); alert(barco.x); alert(barco.y); alert(barco.velocidade); alert(barco.direcao); </script>
352

Outro exemplo de construtor


Construtor com mtodo e propriedade
<script type="text/javascript"> function late() { alert ('Au'); } function Cachorro(nome) { this.nome = nome; this.late = late; } var cachorro = new Cachorro("Rex"); alert(cachorro.nome); cachorro.late(); </script> <script type="text/javascript"> function Carro() { this.acelera = function() { alert("Acelerando."); } this.cor = "vermelho"; } var carro = new Carro(); carro.acelera(); alert(carro.cor); </script>

353

Herana em Javascript
<script type="text/javascript"> function Bipede() { this.caminha = function() { alert("Caminhando...");}; } Ave.prototype = new Bipede(); function Ave(peso) { this.peso = peso; this.voa = function() { alert('Voando...'); }; } Pato.prototype = new Ave(); function Pato(nome, peso) { this.peso = peso; // Pato() ou Ave()??? this.nome = nome; this.grasna = function() { alert('Grasnando...'); }; } var patolino = new Pato('Patolino', 5); alert(patolino.nome); alert(patolino.peso); patolino.grasna(); patolino.voa(); patolino.caminha(); </script>

354

Armadilhas Protected e Private


Em Javascript no existe o conceito de mtodos ou propriedades privadas

Cuidado com o nome das propriedades


Se voc fizer uma atribuio a uma propriedade que no exista em um objeto, esta passar a existir. Logo, cuidado com os nomes das propriedades e dos mtodos.

355

Manipulao de Erros e Excees

356

Manipulao de Erros e Excees Erros ou excees ocorrem durante o tempo de execuo Como contornar erros e excees:
Utilizar Utilizar Utilizar Utilizar o o o o evento onerror objeto Error comando throw block try-catch-finally

357

Quando ocorrem erros Erros podem ocorrer devido a:


Erros de sintaxe: algum comando escrito errado Erros de execuo: o script tenta executar alguma coisa que o browser no pode

358

Uso de onerror
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exemplo de tratamento de erro com evento onError</title> <script type="text/javascript"> function manipuladorDeErros() { alert("Aconteceu um erro!"); } window.onerror = manipuladorDeErros; </script> </head> <body> <script type="text/javascript"> document.writeln("Incio..."); document.writeln(erro de sintaxe); document.writeln("FIM!"); </script> </body> </html> 359

Uso de onerror com detalhes do erro


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exemplo de tratamento de erro com evento onError e detalhes</title> <script type="text/javascript"> window.onerror = function (msg, url, linha) { alert("Aconteceu um erro!"); alert('Mensagem de erro: ' + msg + '\nURL: ' + url + '\nLinha: ' + linha); }; </script> </head> <body> <script type="text/javascript"> document.writeln("Incio..."); document.writeln(erro de sintaxe); document.writeln("FIM!"); </script> </body> </html> 360

Manipulao de Exceo em Javascript


Exceo um erro gerado pelo script uma operao invlida O cdigo que manipula a exceo chamado de handler Sintaxe:
try { cdigo normal que pode resultar em exceo } catch(objetoError) { cdigo para tratar o erro } finally // opcional { cdigo que ser executado com ou sem erro }
361

O Objeto Error
Error Constructors Name MSIE NNav Notes Error() 5 6

Error Methods Name MSIE NNav Notes 6

toString() 5

Error Functions Name MSIE NNav Notes Error() 5 6

Error Properties Name MSIE NNav 6 6 6 6 6 The ECMA standard describes this property as Error.message. MSIE supports it as the description property. Notes

constructor 5 description 5 message name number prototype 5.5 5.5 5 5

362

Exemplo do uso de try-catch-finally


<html> <head> <title>Exemplo de try-catch-finally</title> </head> <body> <script type="text/javascript"> try { document.write("Incio do bloco try...<br/>"); // erro var x = parseInt(a); } catch(e) { document.writeln("Exceo capturada<br/>"); document.writeln("Nome do erro: " + e.name + "<br/>"); document.writeln("Mensagem de erro: " + e.message + "<br/>"); document.writeln("Nmero do erro: " + e.number + "<br/>"); document.writeln("Descrio do erro: " + e.description + "<br/>"); } finally { document.write("Bloco finally.<br/>") } </script> </body> </html>

363

Perguntas?

364

Exerccios

365

Cookies

366

O que so cookies

Texto Envido primeiramente do servidor para o cliente Armazenado no cliente Cliente envia cookie de volta para o servidor
367

Problemas com cookies


Privacidade x Segurana
Servidores podem usar cookies para lembrar suas aes anteriores Servidores podem compartilhar cookies com terceiros, como por exemplo, com doubleclick.net Sites feitos por programadores ruins (no meus alunos) podem armazenar informaes sensveis nos cookies Antigos browsers possuem bugs que permitem acesso a cookies atravs de javascript

Em resumo:
Somente use cookies se realmente no houver outra alternativa Nunca ponha informaes confidenciais em cookies
368

Cookies de sesso e cookies persistentes Cookies de sesso


Armazenados apenas em memria So removidos quando o browser fechado No possuem tempo de validade

Cookies persistentes
Armazenados no disco do cliente Continuam existindo mesmo depois do computador desligado e ligado Possuem tempo de validade

369

Exemplo de envio e recebimento de cookies


<html> <head> <title>Envia e recebe cookies</title> <script type="text/javascript"> document.cookie = "nome1=" + escape("valor 1"); document.cookie = "nome2=valor 2; expires=2029/09/25"; document.cookie = "nome3=valor 3; path=/"; document.cookie = "nome4=valor 4; domain=meslin.com.br"; document.cookie = "nome5=valor 5; expires=2029/09/25; path=/; domain=meslin.com.br"; function pegaCookie(nome) { var cookies = document.cookie; var inicio = cookies.indexOf(nome); if(inicio < 0) return null; else { inicio = cookies.indexOf("=", inicio) +1; var fim = cookies.indexOf(";", inicio); if(fim < 0) fim = cookies.length; var valor = unescape(cookies.substring(inicio, fim)); return valor; } } </script> </head> <body> <script type="text/javascript"> document.write(document.cookie +"<br/>"); document.write(pegaCookie("nome1") +"<br/>"); document.write(pegaCookie("nome2") +"<br/>"); document.write(pegaCookie("nome3") +"<br/>"); document.write(pegaCookie("nome4") +"<br/>"); document.write(pegaCookie("nome5") +"<br/>"); </script> </body> </html>

370

DHTML

371

DHTML
Da Wikipedia:
Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model. DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load. By contrast, a dynamic web page is a broader concept, covering any web page generated differently for each user, load occurrence, or specific variable values. This includes pages created by client-side scripting, and ones created by server-side scripting (such as PHP, Perl, JSP or ASP.NET) where the web server generates content before sending it to the client. DHTML is differentiated from AJAX by the fact that a DHTML page is still request/reloadbased. With DHTML, there may not be any interaction between the client and server after the page is loaded; all processing happens in Javascript on the client side. By contrast, an AJAX page uses features of DHTML to initiate a request (or 'subrequest') to the server to perform actions such as loading more content.

372

Adicionando algum texto em uma pgina Passos


1. Criar um novo elemento 2. Criar um novo texto 3. Adicionar o novo texto ao novo elemento 4. Procurar um elemento j existente 5. Adicionar o novo elemento ao elemento j existente
373

1) Criando um novo elemento Criar um objeto pargrafo <p> Associar o novo objeto a uma varivel
var node; node = document.createElement("p");

374

2) Criar um novo texto


Para facilitar, o texto ser atribuido a uma varivel (opcional)
var novoTexto; novoTexto = document.crateTextNode("Um texto.");

375

3) Adicionar o novo texto ao novo elemento Para que o texto aparea na pgina Web, ele dever ser adicionado ao novo elemento
node.appendChild(novoTexto);

376

4) Procurar um elemento existente O texto ainda no foi incluido na pgina Web O novo elemento precisa ser incluido em um elemento j existente Para facilitar, o elemento existente ser atribuido a uma varivel
var elemento; elemento = document.getElementById("id");

377

5) Adicionar o novo elemento ao elemento j existente

Finalmente incluir o novo elemento e o seu texto a um elemento j existente


elemento.appendChild(node);

378

Colocando tudo junto


<html> <head> <title>Exemplo de incluso de elemento</title> <script type="text/javascript"> var texto; texto = "Este texto ser dinamicamente incluido na pgina."; function incluiTexto(lugar) { var novoNo, novoTexto, elemento; novoNo = document.createElement("p"); novoTexto = document.createTextNode(texto); novoNo.appendChild(novoTexto); elemento = document.getElementById(lugar); elemento.appendChild(novoNo); } </script> </head> <body> <p> <a href="#" onclick="incluiTexto('lugar')">Clique aqui para inclui o novo texto na pgina</a> </p> <p id="lugar">O novo texto ir aparecer abaixo deste texto.</p> <p>Este apenas mais um texto nesta pgina</p> </body> </html>

379

Removendo um n Para remover um n, podemos utilizar o mtodo removeChild(id) Exemplo:


function removeTexto(lugar) { var elemento; elemento = document.getElementById(lugar); elemento.removeChild(elemento.lastChild); }
380

Exemplo completo
<html> <head> <title>Exemplo de incluso de elemento</title> <script type="text/javascript"> var texto; texto = "Este texto ser dinamicamente incluido na pgina."; function incluiTexto(lugar) { var novoNo, novoTexto, elemento; novoNo = document.createElement("p"); novoNo.setAttribute("id", "meio"); novoTexto = document.createTextNode(texto); novoNo.appendChild(novoTexto); elemento = document.getElementById(lugar); elemento.appendChild(novoNo); } function removeTexto(lugar) { var elemento; elemento = document.getElementById(lugar); elementoSelecionado = document.getElementById('meio'); elemento.removeChild(elementoSelecionado); } </script> </head> <p> Este apenas mais um texto nesta pgina </p> </body> </html> <p> <a href="#" onclick="incluiTexto('lugar')"> Clique aqui para inclui o novo texto na pgina </a> </p> <button onclick="removeTexto('lugar')"> Clique aqui para remover o novo texto da pgina </button> <p id="lugar"> O novo texto ir aparecer abaixo deste texto. </p> <body id='corpo'>

381

Mtodo getElementsByTagName() getElementById() permite trabalhar elementos individualmente getElementsByTagName() permite trabalhar com grupos de elementos Retorna um vetor (array)

382

Exemplo de getElementsByTagName()
<html> <head> <title>Exemplo de getElementsByTagName</title> </head> <body> <ul> <li>item <li>item <li>item <li>item <li>item </ul> <script type="text/javascript"> var elementos; elementos = document.getElementsByTagName("li"); alert(elementos.length); elementos = document.getElementsByTagName("*"); alert(elementos.length); </script> </body> </html> 1</li> 2</li> 3</li> 4</li> 5</li>

383

Propriedades de node
Algumas propriedades de node para ajudar a percorrer a rvore de ns
parentNode
no = node.parentNode

childNodes
no = node.childNode

firstChild
no = node.firstNode

lastChild
no = node.lastNode

nextSibling
no = node.nextSiblingNode

previousSibling
no = node.previousNode
384

Atributos dos ns atributo = node.getAttribute(atributo); note.setAttribute(atributo, valor);

385

Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Exemplo de getAttribute</title> <script type="text/javascript"> function mostraAtributos(atributo) { var valor, atributos; atributos = document.getElementsByTagName("p"); for(i=0; i<atributos.length; i++) { valor = atributos[i].getAttribute(atributo); alert(valor); } } </script> </head> <body> <p <p <p <p <p id='p1'>Pargrafo id='p2'>Pargrafo id='p3'>Pargrafo id='p4'>Pargrafo id='p5'>Pargrafo 1</p> 2</p> 3</p> 4</p> 5</p>

<p onclick="mostraAtributos('id')">Clique aqui para ver os atributos</p> </body> </html>

386

Expresses Regulares

387

Validao de Formulrios Enviando um formulrio


Uso do evento onsubmit Se a funo retornar verdadeiro, o formulrio enviado Se a funo retornar falso, o envio abortado <form onsubmit='return valida()'> </form>

388

Expresso Regular Uma expresso regular um texto que define um padro de caracteres Um dos usos de uma expresso regular o teste de coincidncia com um padro definido

389

Criando uma expresso regular Em Javascript, uma expresso regular criada utilizando-se //
padro = /expresso/;

390

Modificadores de expresso regular i para tornar uma expresso regular no case-sensitive


/expresso/i

g para criar uma busca por todas as coincidncias


/expresso/g

391

Caracteres Especiais
Caracter Descrio Expresso ^ $ \b \B \d \D \w \W \s \S . Indica incio de texto Indica fim de texto Indica limite de palavar Indica a ausncia de incio de palavra Dgito de 0 at 9 No dgito de 0 at 9 Um caracter (letra, dgito ou sublinhado) Todos os outros caracteres excluidos de \w Um caracter separador Um caracter que no seja separador Qualquer caracter /^ana/ /ana$/ /\bana/ /ana\B/ /\do/ /\DS/ /\w\w/ /\W/ /a\s/m/ /a\S/m/ /./ Exemplo Match ananias ana maria ana maria banana ana maria 1o 2o AS A4 de $ # ana maria anamaria Qualquer coisa 392 No Match banana banana banana ananias ao Do 5S $x #1 A 5 anamaria ana maria

Modificadores de caracteres
Caracter [lista] [^lista] [inicio-fim] Descrio Coincide qualquer caracter da lista Coincide qualquer carater fora da lista Coincide qualquer caracter dentro da faixa Exemplo Expresso [abc] [^abc] [a-z] [A-Z] [a-zA-Z] [0-9] [0-9a-zA-Z] Match No Match

[^inicio-fim]

Coincide qualquer caracter fora da faixa

393

Caracteres de repetio
Expresso * + ? {n} {n,} {n , m } Descrio Ocorre 0 ou mais vezes Ocorre 1 ou mais vezes Ocorre 0 ou 1 vez Ocorre n vezes Ocorre pelo menos n vezes Ocorre pelo menos n vezes e no mais do que m vezes Exemplo /\s*/ /ve+m/ /sec?o/ /\d{8}/ /\d{5,}/ /\d{8,9}/

394

Caracter de Escape (Scape) Muda o significado do caracter seguinte Exemplos:


/\d{,3}\. \d{,3}\. \d{,3}\. \d{,3}\/ \d muda o significado do caracter d \. muda o significado do caracter .

395

Caracteres Desmodificados
Caracter \/ \\ \. \* \+ \? \| \{ \} \( \) \^ \$ \n \r \t Descrio Caracter / Caracter \ Caracter . Caracter * Caracter + Caracter ? Caracter | Caracteres { e } Caracteres ( e ) Caracter ^ Caracter $ Mudana de linha Retorno ao incio da linha tabulao 396 Exemplo Expresso /\d{1,2}\/\d{1,2}\/\d{4}/ /\\o\// Match 27/8/1970 \o/ No Match 19700827

Grupos e Alternativas
Padro /padro1|padro2/ (padro) \n (?padro) Descrio Coindice com padro1 ou padro2 Permite backreference ou trata como um grupo ndice do backreference Um grupo que no conta para backreference Exemplo /ganho|ganhado/ /(Sr\.)?McCoy /<([a-zA-Z][a-zA-Z0-9]*)>.*<\/\1>/

397

Criando uma Expresso Regular Usando o construtor


re = new RegExp(padro, flags);

Usando uma string


re = /padro/flags

398

Mtodos de Expresso Regular Mtodo re.exec(texto)


Procura uma expresso no texto e retorna um vetor com a coincidncia e uma lista com as backreferences

<script type="text/javascript"> re = /t(ex)to/i; vetor = re.exec("Este um TeXto contento a palavra texto e a palavr... for(i=0; i<vetor.length; i++) document.write("Vetor[" + i + "]: " + escape(vetor[i]) + "<br/>"); </script>

399

Mtodos de Expresso Regular


Mtodo string.replace(re, novo)
Substitui a expresso regular na string pela string novo

<script type="text/javascript"> texto = "Este um Texto contento a palavra texto e a palavra textos aparecendo vrias vezes no TEXTO"; texto = texto.replace(/Texto/gi, "texto"); document.write("Texto: " + texto + "<br/>"); </script>

400

Mtodos de Expresso Regular


Mtodo texto.search(re)
Retorna a posio da 1a ocorrncia de re na string texto

<script type="text/javascript"> texto = "Este um Texto contento a palavra texto e a palavra textos aparecendo vrias vezes no TEXTO"; posicao = texto.search(/texto/i, "texto"); document.write("Posio: " + posicao); </script>

401

Mtodos de Expresso Regular Mtodo texto.split(re)


Divide a string delimitada pela expresso regular
<script type="text/javascript"> texto = "https://www.google.com/search?q=Alexandre+Meslin&rlz=1C1AVSC_enBR441BR441& oq=Alexandre+Meslin&sourceid=chrome&espvd=210&es_sm=93&ie=UTF8#es_sm=93&q=Alexandre+Meslin"; vetor = texto.split(/&/); for(i=0; i<vetor.length; i++) document.write("Vetor[" + i + "]: " + vetor[i] + "<br/>"); </script>

402

Mtodos de Expresso Regular Mtodo re.test(texto)


Retornar verdadeiro se houver coincidncia no texto da expresso regular
<script type="text/javascript"> re = /t(ex)to/i; document.write(re.test("Este um TeXto contento a palavra texto e a palavra textos aparecendo vrias vezes no TEXTO")); </script>

403

Exerccios

404

Espao em branco Faa uma funo para remover os espaos em branco a mais (no incio e no fim) em campos de um formulrio

405

Query String Faa uma funo para separar os campos e os valores de uma query string Dicas
location.search split() unescape() +

406

Validao Faa um formulrio com o seguintes campos: Aplique validao em todos eles

407

INF1030 Conceitos de Informtica INF1407 Programao para a Web

Alexandre Meslin
meslin@inf.puc-rio.br