Javascript

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

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

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

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

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

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

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

<!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'> </td>"); else document.write("<td bgcolor='white' width='30' height='30'> </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> </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

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

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
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 /âna/ /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] [âbc] [a-z] [A-Z] [a-zA-Z] [0-9] [0-9a-zA-Z] Match No Match
[înicio-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

Javascript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

INF1030 Conceitos de Informtica INF1407 Programao para a Web

*Ementa HTML XHTML CSS Javascript

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

*Critrio de Avaliao INF1030 apenas

*Sistema de Avaliao INF1030 apenas

Obs.: no temos 2a chamada

*Data das Avaliaes INF1030 apenas

*Programao das Aulas INF1030 apenas

Mquina cliente: requista pginas web

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

O servidor web um computador

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

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

*Documento HTML = Pgina Web Documentos HTML:

*Documento HTML = Pgina Web

Tag de abertura <p> <br />

Elemento contido Este um pargrafo

Tag de fechamento </p> </a>

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

*Sintaxe dos elementos HTML

*No esquea a tag de fechamento!

*Atributos HTML Elementos HTML podem ter atributos Atributos:

*Dica: utilize letras minsculas

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

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

*Atributo style Utilize no lugar das seguintes tags:

E dos seguintes atributos:

Tipo, cor e tamanho de fonte:

*Folha de estilo externa

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

*Mais sobre estilos Uma folha de estilos interna

*Mais sobre estilos Estilos inline

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

*Um link HTML

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

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

Um link para esta ncora dentro da mesma pgina:

Um link para esta ncora em outra pgina web

Um link para esta ncora em outra pgina de outro site

*Tabelas Definio da tabela em si:

*Tabelas Aplicando cores na tabela:

*Tabela com cabealho

*Tabela com clula vazia

Campo de upload de arquivo

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

*Tag <meta> Descrio da pgina:

Definio de palavras chaves:

Outros atributos de meta (???)

*Links Um link tem o seguinte formato:

Download via ftp

Link para uma outra pgina em outro site:

*Exemplos Link para uma outra pgina no meu site:

Link para um arquivo no mesmo diretrio

Para mudar de protocolo

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

*Eventos Eventos relativos a janelas

*Eventos Eventos relativos a formulrios

*Eventos Eventos de teclado

*Eventos Eventos relativos a mouse

*Instalando o Visual Web Developer 2010 Express Edition

Veja os slides no arquivo correspondente e boa sorte!

Instalando um Servio Web

Veja os slides nos arquivos correspondentes e boa sorte!

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