INF1030 – Conceitos de Informática INF1407 – Programação para a Web

Alexandre Meslin
meslin@inf.puc-rio.br

*Ementa HTML XHTML CSS Javascript
Variáveis Operadores Comandos Objetos

2

*Referências
• HTML/CSS • Criando Sites com HTML, Silva, M, Novatec • Design Criativo com HTML, Weinman, L e outros, Ciência Moderna • Javascript • Use a Cabeça – 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

3

*Critério de Avaliação – INF1030 apenas
Critério de avaliação: categoria 1
Categoria I – A avaliação do aproveitamento feita pelo professor será expressa por meio de dois graus de qualificação, apresentados numericamente, em escala de zero (0) a dez (10), do seguinte modo:
a) o primeiro grau de qualificação, de peso dois (2), representando o aproveitamento de aluno na disciplina, será obtido através de testes, relatórios, trabalho ou prova realizada no meio do período letivo, tendo em vista um programa parcialmente lecionado; b) o segundo grau de qualificação, de peso três (3), resultante de prova escrita, oral ou de projeto e sua defesa, cobrindo toda ou parte da matéria lecionada no período letivo. Neste grau podem ser incluídos testes e relatórios 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 três (3,0), o Grau Final será a média ponderada das duas avaliações, de acordo com os itens anteriores. c-2) Se o segundo grau for menor que três (3,0), o Grau Final será calculado tendo o primeiro grau peso um (1) e o segundo grau peso três (3).

4

*Sistema de Avaliação – INF1030 apenas

G1:
• 1 trabalho prático individual em sala de aula • 2 dias de trabalho = 1 nota

G2:
• 1 trabalho prático individual em sala de aula • 2 dias de trabalho = 1 nota

Obs.: não temos 2a chamada
5

*Data das Avaliações – INF1030 apenas

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

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

*Programação das Aulas – INF1030 apenas
Data Semana Aula #Descrição 16/08/2013 6 1Parte 1 - HTML + Web + Exercícios (30 min) 23/08/2013 6 2Javascript+exercícios 30/08/2013 6 3Aula 3 - Desvio Condicional 06/09/2013 6 4exercícios 13/09/2013 6 5Prova prática 20/09/2013 6 6Prova prática 27/09/2013 6 7Aula 4 - Loops + Exercícios 04/10/2013 6 8Aula 5 - Objetos 11/10/2013 6 9Aula 6 - Mais Objetos 18/10/2013 6 10Exercícios 25/10/2013 6 11Exercícios 01/11/2013 6 12Prova prática 08/11/2013 6 13Prova prática 15/11/2013 6 Proclamação da República
7

Perguntas

Aula 1 HTML 9 .

*Revisão Servidor web (web server) Armazena páginas web Máquina cliente: requista páginas web Seu computador é o cliente quando você requisita uma página web A Internet conecta o servidor e o cliente web Seu site web Armazenado em um servidor web Composto por: Páginas HTML Arquivos de imagem O servidor web é um computador Possui pastas (diretórios) e arquivos 10 .

*Cliente x Servidor 11 .

3%) Firefox (30.9%) 12 .*Arquivo HTML O que é uma página web? Uma página é um arquivo texto (abra uma página qualquer e utilize "visualizar fonte") Browser (navegador) Interpreta o HTML Exibe a página formatada Ex (2013).: Internet Explorer (14.2%) Chrome (48.4%) Safari (4.2%) Opera (1.

*HTML Hypertext Markup Language (Linguagem de Marcação de Hipertexto) Hipertexto: links dentro de uma página web HTML não é uma linguagem de programação HTML utiliza tags para realizar a marcação do texto das páginas web 13 .

*Tags HTML Tags de marcação HTML são chamadas simplesmente de tags HTML Tags HTML são 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 .

mas as utiliza para interpretar o conteúdo da página 15 .*Documento HTML = Página Web Documentos HTML: Descrevem páginas web Contém tags HTML e texto puro Também chamadas de páginas web A finalidade de um browser é ler o documento HTML e o exibir como uma página web O browser não mostra as tags HTML.

*Documento HTML = Página Web <html> <body> <h1>Meu primeiro cabeçalho</h1> <p>Meu primeiro parágrafo</p> </body> </html> 16 .

html"> Este é um link 17 .*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 parágrafo Tag de fechamento </p> </a> <a href="pagina.

*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 início e o fim Algumas tags HTML tem conteúdo vazio Elementos vazios são 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 cabeçalho</h1> <p>Meu <b>pri<i>meiro</i> parágrafo</b></p> </body> </html> 19 .

mas não confine nisto.: versões futuras de HTML não permitirão que você não use as tags de fechamento 20 . Esquecer a tag de fechamento pode causar resultados inesperados ou erros em versões futuras de browsers Obs.*Não esqueça a tag de fechamento! A maior parte dos browsers irão exibir corretamente mesmo se você esquecer as tags de fechamento <p>Isto é um parágrafo <p>Isto é outro parágrafo O exemplo acima irá funcionar na maioria dos browsers.

/> em tags vazias (sem conteúdo) .<br /> 21 .. todos os elementos deverão ser fechados Utilize <.*Elementos HTML vazios Elementos HTML sem conteúdo são chamados de elementos vazios Elementos vazios podem ser fechados na tag de abertura <br> é um elemento que não possui uma tag de fechamento Em XHTML.. XML e versões futuras de HTML.

*Atributos HTML Elementos HTML podem ter atributos Atributos: Fornecem informações adicionais sobre o elemento Somente são especificados na tag de abertura Aparecem em pares do tipo nome/valor: nome="valor" 22 .

meslin.com.br'>Este é um link</a> 23 .*Exemplo de atributo Links HTML são especificados pela tag <a> O endereço do link é fornecido como um atributo <a href='http://www.

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

exceto quando o uso de letras maiúsculas for necessário 25 .*Dica: utilize letras minúsculas Tags HTML não diferenciam letras maiúsculas de minúsculas. <P> e <p> significam a mesma coisa W3C recomenda o uso de letras minúsculas em HTML 4 Futuras versões de HTML e XHTML utilizarão somente tags com letras minúsculas Nome do atributo e seu valor também não diferenciam maiúsculas de minúsculas Da mesma forma. o uso de letras minúsculas para o nome do atributo é recomendável Utilize também letras minúsculas para o valor do atributo.

*Cabeçalhos HTML Cabeçalhos são definidos por tags de <h1> (maior letra) até <h6> (menor letra) Exemplo: <html> <body> <h1>Este é um cabeçalho H1</h1> <h2>Este é um cabeçalho H2</h2> <h3>Este é um cabeçalho H3</h3> </body> </html> Obs.: o browser adiciona uma quebra de linha antes e depois de um cabeçalho 26 .

*Linhas em HTML A tag <hr /> é utilizada para criar uma linha horizontal <html> <body> <h1>Este é um cabeçalho H1</h1> <hr /> <h2>Este é um cabeçalho H2</h2> <hr /> <h3>Este é um cabeçalho H3</h3> </body> </html> 27 .

mas não no final 28 .*Comentário HTML Comentários devem ser incluídos nos códigos HTML para melhorar a legibilidade e o entendimento Comentários são ignorados pelo browser – eles não são exibidos <!-.este é um comentário --> Atenção: existe um ponto de exclamação no início da tag.

*Parágrafos Parágrafos são definidos pela tag <p> <html> <body> <p>Isto é um parágrafo</p> <p>Isto é outro parágrafo</p> </body> </html> 29 .

*Quebra de linhas Utilize <br /> se você quiser quebrar uma linha sem começar um novo parágrafo <html> <body> <p>Isto é um parágrafo</p> <p>Isto é outro parágrafo</p> <p>Este é um <br />pará<br /> grafo com quebra de linha</p> </body> </html> 30 .

*Formatação 31 .

font-size: 10px" style="text-decoration:line-through." style="background-color: #ABACA7" 32 .*Atributo style Utilize no lugar das seguintes tags: Tag <center> <font> <s> <u> Estilo style="text-align: center." style="color:#ABACA7." E dos seguintes atributos: Atributo align bgcolor Estilo style="text-align: center." style="text-decoration: underline. font-family: courier.

*Exemplos de style Cor do fundo: Define uma cor de fundo para uma página: <body style="background-color:yellow"> Tipo. cor e tamanho de fonte: Define um estilo para um parágrafo <p style="font-family:courier new. fontsize:20px"> Alinhamento de texto: Define um alinhamento para um cabeçalho <h1> <h1 style="text-align:center"> 33 . font-size:20px"> <p style="font-family:courier new. color:red. color:#FF0000.

*Modificando fontes A tag <font> é desaconselhada Devemos utilizar o atributo style <html> <body> <h1 style="font-family:verdana">Cabeçalho</h1> <p style="font-family:courier">Parágrafo</p> </body> </html> Tamanho de fontes <html> <body> <h1 style="font-size:150%">Cabeçalho</h1> <p style="font-size:80%">Parágrafo</p> </body> </html> 34 .

<html> <body> <p style="font-family:verdana. com 80% do tamanho na cor verde.font-size:80%.color:green"> Este é um parágrafo em verdana.*Mais fontes Cor do texto <html> <body> <h1 style="color:blue">Cabeçalho</h1> <p style="color:red">Parágrafo</p> </body> </html> Combinando tudo. </p> </body> </html> 35 ...

css 36 .org/TR/html4/loose.dtd"> <html> <head> <title>Folha de estilo externa</title> <link rel="stylesheet" type="text/css" href="externo.</p> <p>Outro parágrafo.</p> </body> </html> body {background-color: red} p {margin-left: 20px} externo.01 Transitional//EN" "http://www.css"> </head> <body> <p>Um parágrafo.*Folha de estilo externa <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.w3.

*Mais sobre estilos Uma folha de estilos interna <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> 37 .

margin-left:20px"> Parágrafo </p> 38 .*Mais sobre estilos Estilos inline <p style="color:red.

âncoras e links Hiperlink é uma referência a um recurso na web Hiperlink pode apontar para qualquer recurso da web: Uma página 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 .*Hiperlinks.

: o "texto do link" não precisa ser um texto.br'>Meu site</a> O código acima irá ser exibido em um browser da seguinte forma: Meu site 40 . pode ser uma imagem ou qualquer outro elemento HTML O atributo href define o endereço destino do link <a href='http://www.*Um link HTML Sintaxe: <a href="url">texto do link</a> Obs.meslin.com.

br" target="_blank">Meu site</a> O código acima irá abrir o documento em uma nova janela do browser 41 .meslin.*O atributo target O atributo target define onde o documento referenciado deverá ser aberto <a href="http://www.com.

html#lugar">o link</a> Um link para esta âncora em outra página de outro site <a href="http://www.br/pagina.com.meslin. a tag <a> define uma âncora dentro de um documento HTML Uma âncora é invisível para o usuário Sintaxe: <a name="lugar">qualquer conteúdo (geralmente vazio)</a> Um link para esta âncora dentro da mesma página: <a href="#lugar">o link</a> Um link para esta âncora em outra página web <a href="pagina.*O atributo name Quando o atributo name é utilizado.html#lugar">o link</a> 42 .

gif" /> Imagem em outro site <img src="http://www.gif"> Imagem em outro diretório <img src="diretorio/imagem.*Imagens Em HTML.meslin.gif" /> 43 .com.br/diretorio/imagem. uma imagem é definida por uma tag <img> A tag <img> é vazia O atributo src indica o endereço (url) da imagem Sintaxe: <img src="url" /> Exemplo: Imagem no mesmo diretório do arquivo HTML <img src="imagem.

*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 endereço da imagem estiver errado Se a imagem demorar a ser carregada Se o usuário desabilitar a possibilidade do browser exibir imagem Sintaxe: <img src="imagem.gif" alt="um texto alternativo"/> 44 .

</table> Atributos: border = largura da borda em pixels cellspacing = espaço entre as células cellpadding = espaço entre o texto e as bordas width = largura da tabela 45 ....*Tabelas Definição da tabela em si: <table> .

.</td> .</tr> ... MIDDLE ou BOTTOM) align = alinhamento horizontal (LEFT..</th> ..Célula Atributos: valign = alinhamento vertical (TOP.Cabeçalho <td>.Linha <th>..*Tabelas Definição dos elementos da tabela: <tr>.... CENTER ou RIGHT) rowspan = número de linhas ocupadas pela célula colspan = número de colunas ocupadas pela célula width = largura da célula height = altura da célula bgcolor = cor de fundo nowrap 46 .

*Tabelas Aplicando cores na tabela: bgcolor pode ser usado dentro de <table> <tr> <td> 47 .

célula <td>linha 1.*Exemplos de tabelas <html> <body> <table border="1"> <tr> <td>linha 1. célula </tr> </table> </body> </html> 1</td> 2</td> 1</td> 2</td> 48 . célula <td>linha 2. célula </tr> <tr> <td>linha 2.

célula 2</td> </tr> </table> </body> </html> 49 . célula 1</td> <td>linha 2.*Tabela com cabeçalho <html> <body> <table border="1"> <tr> <th>Cabeçalho</th> <th>Outro Cabeçalho</th> </tr> <tr> <td>linha 1. célula 2</td> </tr> <tr> <td>linha 2. célula 1</td> <td>linha 1.

célula <td>linha 1. célula <td>linha 1. célula <td></td> </tr> </table> Outra tabela <table border="1"> <tr> <td>linha 1. célula </tr> <tr> <td>linha 2. célula <td>&nbsp.</td> </tr> </table> </body> </html> 1</td> 2</td> 1</td> 1</td> 2</td> 1</td> 50 . célula </tr> <tr> <td>linha 2.*Tabela com célula vazia <html> <body> Uma tabela <table border="1"> <tr> <td>linha 1.

*Formulários Um formulário é uma área onde são colocados os elementos de um formulário Elementos de um formulário permitem ao usuário entrar com informações Um formulário é definido pela tag <form> <form> Elementos de entrada </form> 51 .

... </form> Para enviar o formulário por e-mail: <form action="mailto:nome@servidor" enctype="text/plain"> 52 .. definição dos ítens do formulário .*Formulários: Codificação Básica <form method="post|get" action="URL do CGI"> .

*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 Comentários:<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 .

*Botões "Sim ou Não" Á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 .

*Botões de Rádio 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 .

*Botões de Envio <input type="submit" value="Envia" /> <input type="reset" value=" Limpa" /> 59 .

checkbox e botões do tipo rádio para minimizar os erros do usuário Indique quais campos são obrigatórios Use o atributo maxlength para limitar o tamanho do texto Use validação do lado do cliente e do lado do servidor 60 .*Dicas sobre formulários Use listas dropdown.

*Caracteres especiais 61 .

*Elementos de um cabeçalhos Dentro das tags <head></head> podemos encontrar: <base> : define a base para os links neste documento <link> : define uma referência para recursos <meta> : define meta-informações <title> : define o título do documento <style> : define um estilo <script> : permite a criação de scripts 62 .

and XHTML" /> Definição de palavras chaves: <meta name="keywords" content="HTML. XML. CSS. XHTML.*Tag <meta> Descrição da página: <meta name="description" content="Free Web tutorials on HTML. XML. DHTML. JavaScript" /> Outros atributos de meta (???) <meta name="security" content="low" /> 63 . CSS.

domínio[:porta][/caminho][/arq uivo] esquema: tipo de serviço host: nome da máquina domínio: domínio onde está a máquina porta: número da porta caminho: pasta ou diretório arquivo: o arquivo propriamente dito 64 .*Links Um link tem o seguinte formato: esquema://[host].

*Alguns esquemas 65 .

*Exemplos Acesso a newsgroup <a href="news:alt.exe">Downloa d WinZip</a> Enviando email <a href="mailto:alguem@correio.br/ftp/winzip.com.html">HTML Newsgroup</a> Download via ftp <a href="ftp://ftp.com.outrosite.com.meslin.br/diretorio/arquivo'>O link</a> 66 .br">Enviar email para alguém</a> Link para uma outra página em outro site: <a href='http://www.

com.br/diretorio/arq uivo'>O link</a> Link para um arquivo no mesmo diretório <a href='arquivo.meusite.meusite.html'>O link</a> Para mudar de protocolo href='https://www.com.br/diretorio/arq uivo'>O link</a> 67 .*Exemplos Link para uma outra página no meu site: <a href='/diretorio/arquivo'>O link</a> Equivalente a <a href='http://www.

é óbvio!) Não confunda Java com Javascript! <html> <body> <script type="text/javascript"> document.*Scripts (em javascript. </script> </body> </html> 68 .write("Alo mundo!").

*Eventos Eventos relativos a janelas Somente válidos em body e em frameset 69 .

*Eventos Eventos relativos a formulários Somente válidos em elementos de formulários 70 .

*Eventos Eventos de teclado 71 .

*Eventos Eventos relativos a mouse 72 .

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

*Instalando o Visual Web Developer 2010 Express Edition Veja os slides no arquivo correspondente e boa sorte! 74 .

Instalando um Serviço Web Veja os slides nos arquivos correspondentes e boa sorte! Instalação de Java Instalação de Tomcat 75 .

Perguntas? 76 .

Exercícios 77 .

html com o seguinte conteúdo: 78 .*Exercícios Crie uma página chamada poema.

*Exercícios Crie uma página chamada "preco.htm" com o seguinte conteúdo: 79 .

html" com o seguinte conteúdo: 1. Seleção do destino • Litoral ou interior • Distância a percorrer • Tempo disponível Meio de transporte • Aéreo • Terrestre • Marítimo Fazendo as malas • O que levar • O que não levar • Não esquecer 2.*Exercícios Crie uma página chamada "viagem. 3. 80 .

*Exercícios Crie uma página chamada "voar. SNEA garante que voar é mais seguro Preços das passagens aéreas nacionais 81 .html" com o seguinte conteúdo: Curso de HTML Exercícios da Primeira Aula 1. 2.

html" com o seguinte conteúdo (para que a página funcione melhor. Viagem a Bahia Rio Selvagem Pantanal Viagem a Bahia Este tópico mostra uma visão geral sobre uma viagem a Bahia Volta ao índice Rio Selvagem Este tópico mostra como explorar diversos rios e corredeiras. Volta ao índice Pantanal Este tópico cobre assuntos mais complexos que requerem um planejamento mais profundo da viagem. inclua mais texto em cada tópico): Opções de Roteiros 1. Volta ao índice 82 . 3. 2.*Exercícios Crie uma página chamada "roteiro.

*Exercícios Alterar as cores da página criada no exercício anterior de acordo com a seguinte tabela: Elemento Cor de fundo Cor do texto Cor de links Cor de links seguidos Cor do título principal Cor dos subtítulos Nome da cor Beige Maroon Blue Red Navy Darkgreen 83 .

*Exercícios Criar a seguinte página em HTML: 84 .

*Exercícios Crie as seguintes páginas de WEB. amarelo. utilizando os arquivos de imagem verde.gif.inf.br/~meslin/Javascript 85 .gif e azul. vermelho.gif: Figuras em http://www.gif.puc-rio.

*Exercício Implemente a seguinte página HTML Cor do texto: #CCCCCC 86 .

Este formulário deve conter os seguintes campos: Nome (texto 40 máximo) Data de Nascimento (dd/mm/aaaa) Nome da Mãe (texto 40 máximo) Nome do Pai (texto 40 máximo) Tipo de Viagem (select com as opções Amazônica. Pantanal. Trabalho. Indivulgável.Formulário de Cadastro Criar uma página HTML com um formulário de cadastro de clientes para a Agência de Turismo Virtual. Outro Telefone (max 8 carac + DDD + ramal) E-mail (max 40 carac) 87 . Rústico.*Exercícios . Família. Grupos. Praias. Lua de mel. Nordeste. Individual. Outros) Temporada (Alta ou Baixa radiobutton) Adicionais (checkbox com Guia para Idosos. Ecológico. Naturista.

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

*Tabelas Com tabelas. podemos facilmente dividir uma página em colunas e células 89 .

podemos mostra mais do que um documento HTML na mesma janela do browser Cada documento HTML se localiza em um frame Os frames são independentes Problemas: Vários documentos HTML Pode gerar dificuldades com a impressão 90 .*Frames Com frames.

*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.*"> <frame src="frameA.html" /> <frame src="frameB.html ocupará a primeira coluna enquanto o documento frameB.html" /> </frameset> Obs.html a segunda <frameset cols="25%.: o tamanho da coluna pode ser especificado em pixels 92 .

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

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

*Listas não numeradas <ul type="circle" | "disc" | "square"> <li type="circle" | "disc" | "square" value="numero"> Texto </li> </ul> 95 .

*Listas não numeradas <ul> <li> Correio Eletrônico </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 Eletrônico </li> <li> Telnet </li> <li> FTP </li> </ol> 98 .

. RO... katakana-iroha: I. U. gan. ki. ban. . Katakana: A... u. O. HO."> tipo: decimal – números decimais começando de 1 decimal-leading-zero – números decimais começando com zero (ex: 01... HE. ho. . 98.*Listas usando estilo <ol style="list-style-type: tipo. ha. ro. KA.. he. in. i.. E. NI. tan. I.. hiragana-iroha: i.. o. KI. . HA. 02. e.). .. he. in-an.. ni. 03. lower-roman: algarismos romanos minúsculos upper-roman : algarismos romanos maiúsculos hebrew: números hebraicos tradicionais georgian: números "Georganos" tradicionais(an.... 99 . ka. to.. 99). armenian: números armenianos tradicionais cjk-ideographic: números plenamente ideograficos hiragana: a. . . TO.

</li> <li> Este é o terceiro item.</li> </ol> Alfabético minúsculo <ol style="list-style-type: upper-alpha."> <li> Este é o primeiro item.</li> <li> Este é o terceiro item.</li> </ol> 100 .</li> <li> Este é o terceiro item.</li> <li> Este é o segundo item.</li> <li> Este é o segundo item.</li> </ol> Decimal <ol style="list-style-type: decimal.*Exemplo de listas Lista não ordenada <ul> <li> Correio Eletrônico </li> <li> Telnet </li> <li> FTP </li> </ul> Lista ordenada <ol> <li> Correio Eletrônico </li> <li> Telnet </li> <li> FTP </li> </ol> Romano Minúsculo <ol style="list-style-type: lower-roman.</li> <li> Este é o segundo item.</li> <li> Este é o terceiro item.</li> </ol> Alfabético minúsculo <ol style="list-style-type: lower-alpha.</li> <li> Este é o segundo item."> <li> Este é o primeiro item.</li> <li> Este é o terceiro item.</li> <li> Este é o segundo item."> <li> Este é o primeiro item."> <li> Este é o primeiro item.</li> </ol> Romano Maiúsculo <ol style="list-style-type: upper-roman."> <li> Este é o primeiro item.

Javascript 101 .

adicionando interatividade Normalmente as páginas HTML são estáticas Janelas pop-up Iteração com formulários Cálculos Efeitos especiais 102 .*Javascript Linguagem script popular Suportada por diversos navegadores web e outras ferramentas Interage com HTML.

*Javascript x Java – para não confundir nunca mais

Javascript
Interpretado pelo computador no lado do cliente

Java
Compilado no servidor antes de ser executado

Referências a objetos são verificados Referências a objetos são verificados em tempo de execução em tempo de compilação Não precisa declaração de tipos de dados Pode acessar objetos do navegador Tipos de dados precisam ser declarados Não pode acessar objetos do navegador

103

*Termos
Objeto: dados e funcionalidade juntos Propriedade: atributos (valores) que são associados a alguma coisa Método: uma ação que um objeto pode realizar Evento: uma ação iniciada por um usuário ou pelo computador Variável: um lugar para armazenar valores em um computador (propriedade está relacionada a objeto) Função: uma rotina ou procedimento que realiza uma ação (método está relacionado a objeto)
104

*Como incluir Javascript em uma página HTML

Javascript dentro da página HTML
<html> <body> <script type="text/javascript"> document.write("Alo mundo!"); </script> </body> </html>

O comando document.write() é um comando padrão do Javascript para escrever em uma página HTML
105

*Como incluir Javascript em uma página 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 página HTML Nem sempre queremos que ele execute durante Algumas vezes é necessário que ele execute antes ou após o carregamento da página Incluir o Javascript no cabeçalho (<head>) de uma página garante que ele será executando antes da carga da página
107

*Exemplo
<html> <head> <script type="text/javascript"> document.write("<title>Título da página</title>"); </script> </head> <body> <script type="text/javascript"> document.write("<h1>Conteúdo da página</h1>"); </script> </body> </html>

108

*Utilizando um arquivo Javascript externo
<html> <head> <title>Página com Javascript externo</title> <script type="text/javascript" src="arquivo.js"> </script> </head> <body> Corpo da Página </body> // código 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 prática de programação, mas desnecessário) O uso de ; permite escrever mais de um comando por linha
110

comando por comando Exemplo: <script type="text/javascript"> document.write("<p>Este é outro parágrafo. </script> 111 .write("<h1>Este é um cabeçalho</h1>").</p>").*Código Javascript Código Javascript é uma sequência de comandos Javascript O código é executado sequencialmente. document.</p>"). document.write("<p>Isto é um parágrafo.

</p>"). document.*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("<p>Este é outro parágrafo. document.write("<p>Isto é um parágrafo.</p>").write("<h1>Este é um cabeçalho</h1>"). } </script> 112 .

write("<p>Isto é um parágrafo.write("<h1>Este é um cabeçalho</h1>"). </script> 113 . // escreve um parágrafo document.write("<p>Este é outro parágrafo. document.</p>").*Comentários Finalidade: documentação Comentários podem ser adicionados para explicar o código Javascript Exemplo: <script type="text/javascript"> // escreve um cabeçalho document.</p>").

</script> 114 . document.Um cabeçalho .</p>"). document.write("<p>Isto é um parágrafo.</p>").write("<p>Este é outro parágrafo.Dois parágrafos */ document.write("<h1>Este é um cabeçalho</h1>").*Comentários em múltiplas linhas Um comentário de múltiplas linhas começa por /* e termina com */ Exemplo: <script type="text/javascript"> /* Este código a seguir escreverá: .

document.</p>").*Comentários e código Podemos utilizar comentários para evitar que algum comando seja executado Muito utilizado durante a fase de desenvolvimento Exemplo: <script type="text/javascript"> document.write("<p>Este é outro parágrafo. </script> 115 .</p>").write("<h1>Este é um cabeçalho</h1>"). // document.write("<p>Isto é um parágrafo.

</script> 116 .write("<p>Este é outro parágrafo.*Comentários e comandos Podemos acrescentar comentários no final de uma linha de comando Exemplo: <script type="text/javascript"> document. /* parágrafo */ document.write("<p>Isto é um parágrafo.</p>").</p>").write("<h1>Este é um cabeçalho</h1>"). //cabeçalho document.

7 2.14 -2.*Estrutura da Linguagem Valores constantes: "Alexandre Meslin" 'Linguagem Javascript' 8752 -2578 0257 -0752 0xAB12 -0x3CD4 3.3E11 true false String entre aspas String entre plics Inteiro na base 10 Inteiro na base 8 Inteiro na base 16 Número em ponto flutuante Valores booleanos 117 .

números. 118 . // cria a variável i = 8752. i = "vinte e cinco". _ e $ Não podem começar por números Não podem ser iguais a palavras reservadas Exemplo: var i. // cria e inicializa a variável i com 8752 Os tipos de dados são assumidos dinamicamente i = 25. // cria e inicializa a variável i com 8752 var i = 8752.*Declaração e uso de variáveis Nomes de variáveis Letras.

Cuidado: não utilize nomes com escritas diferentes mas pronúncias iguais ou parecidas. Exemplo: não crie as seguintes variáveis: Nome e nome Idade e idade Num1 e num1 Você vai acabar confundindo nome com Nome! 119 .*Armadilhas...

*Tipos de Dados Javascript pertimite que uma mesma variável contenha diferentes tipos de dados Tipos de dados primitivos: Número: inteiro e ponto flutuante Booleano: true e false String: sequência de caracteres Tipos de dados compostos Objeto: uma coleção de dados nomeada Array: uma coleção de dados ordenada numericamente Tipos de dados especiais Null: nulo Undefined: valor de uma variável criada mas sem valor atribuido 120 .

*Entrada e saída de dados document. </script> </body> </html> 121 .write("<title>Título da página</title>").write() Escreve alguma coisa na página Pode escrever na seção <head> ou <body> <html> <head> <script type="text/javascript"> document. </script> </head> <body> <script type="text/javascript"> document.write("<h1>Conteúdo da página</h1>").

alert() alert() Abre uma janela para exibir um aviso ao usuário <html> <body> <script type="text/javascript"> window.alert("Senha incorreta. </script> </body> </html> 122 . alert("Senha incorreta. acesso negado").*Entrada e saída de dados window. acesso negado").

*Entrada e saída de dados window.confirm() confirm() Abre uma janela para o usuário confirmar ou não <html> <head> <title>Exemplo de confirm()</title> </head> <body> <script type="text/javascript"> if (confirm("Quer realmente sair da página ?")) alert("Então adeus!"). </script> </body> </html> 123 .

prompt() prompt() Abre uma janela para pedir uma string ao usuário <html> <body> <script type="text/javascript"> var nome=prompt("Qual o seu nome?").*Entrada e saída de dados window. </script> </body> </html> 124 .

</script> </body> </html> 125 . "(sem nome)").*Entrada e saída de dados Um valor padrão (default) pode ser fornecido Evita que apareça “undefined” na linha da resposta <html> <body> <script type="text/javascript"> nome=prompt("Qual o seu nome?".

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

*Meu Segundo Javascript <html> <head> <title>Alo Personalizado</title> <script type="text/javascript"> var nome = prompt("Qual o seu nome?"). seja bem-vindo a minha página</h3>"). </script> </head> <body> <h1>Minha Página</h1> <script type="text/javascript"> document.write("<h3>"+nome+". </script> </body> </html> 127 .

*Expressões Conjunto de constantes. variáveis. funções que resultam em um único valor As expressões podem ser do tipo (tipo do resultado): Aritméticas Logicas Strings Condicionais 128 . operadores.

*Tipos de Operadores Aritmético Lógico Relacional String Bit-wise Atribuição Condicional 129 .

*Operadores Aritméticos Soma + a+b Subtração – a–b Multiplicação * a*b Divisão / a/b Resto da divisão de inteiros % a%b Incremento de uma unidade ++ ++a a++ Decremento de uma unidade – – – –a a– – 130 .

*Operadores Atribuição Simples = a=b+c Composta += a += b -= *= /= %= (a = a + b) 131 .

*Operadores Relacionais Equivalente == a == b Estritamente equivalente === (não há conversão de tipo) a === b Diferente != a != b Estritamente diferente !== (não há conversão de tipo) a !== b Menor < a < b Maior > a > b Menor ou igual <= a <= b Maior ou igual >= a >= b 132 .

undefined. document.write("A variável document. b = 8752.write("A variável document. " + typeof c + "<br/>").1. d = false. " + typeof b + "<br/>"). " + typeof d + "<br/>"). " + typeof g + "<br/>"). " + typeof a + "<br/>"). " + typeof f + "<br/>").write("A variável </script> </body> </html> c a b c d e f g h = é é é é é é é é 2.write("A variável document. null <body> <script language="javascript"> function f() {} var a = "texto". " + typeof h + "<br/>"). g = Object(). function. boolean.write("A variável document. object.write("A variável document. e. 133 .write("A variável document. " + typeof e + "<br/>"). string.write("A variável document.O operador typeof Operador unário Retorna o tipo atual da variável: number.

Delocamento para a direita inserindo zeros fill right shift 134 .Operadores de Manipulação de Bits Realizam operações em bits Operador Nome Descrição & | ^ << >> 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.

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

b = x -10. Comparação 3 == "3" Outras operações x = "8752". // x string // a 875210 // b 8742 136 . nomeCompleto = nome + " " + sobrenome.*Operacões String Contatenação nome = "Alexandre". sobrenome = "Meslin". a = x +10.

// x // y 3 58 parseFloat(str) Converte uma string em um número real Exemplo z = parseFloat("3. x = parseInt(num).*Conversão explícita de tipos parseInt (str) ou parseInt(str.14"). y = parseInt(num. 137 . base) Converte uma string para um número inteiro Exemplo: num = "3A". 16).

Curiosidades Para formatar o texto de saída: toFixed() toPrecision() toExponential() 138 .

!== & ^ | && || ?: =.) 139 . /. >>> <.Ordem de Precedência Precedência 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Operador Parênteses. <<. ===. new. delete *. >. >= ==. +=. !=. >>. … Operador vírgula (. <=. void. -=. ++. % +. chamada de função ~. *=. -. --.

Perguntas? 140 .

*Exercícios Faça uma página que some 25 com 78 e mostre o resultado em: Uma página Uma janela de alerta Formato de saída: 25 + 78 = 103 141 .

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

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

*Exercícios Faça uma página de boas vindas personalizada 144 .

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

*Exercícios Faça uma página para somar 2 números informados pelo usuário 146 .

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

*Exercícios Faça uma página para somar 3 números informados pelo usuário 148 .

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

Aula 3 Desvio Condicional Funções Sintaxe mínima de funções Funções com parâmetros Eventos 150 .

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

*O comando if() Utilizado para executar determinado código se a condição for verdadeira Sintaxe: if(condição) { código que será executado se a condição for verdadeira } OU if(condição) UM comando que será executado se a condição for verdadeira 152 .

O comando if() deve ser escrito em letras minúsculas 153 .*O comando if() Lembre-se que Javascript é case-sensitive.

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

: o else não tem condição Sintaxe: if(condição) { código que será executado se a condição for verdadeira } else { código que será executado se a condição for falsa } OU if(condição) UM comando que será executado se a condição for verdadeira else UM comando que será executado se a condição for falsa OU qualquer combinação das sintaxes anteriores 155 . O código ligado ao else somente será executado se a condição for falsa Obs.*Comando if()-else Utilizado para executar um entre dois códigos.

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

write("<b>Boa tarde</b>"). else if (hora<18) document.w3.org/TR/html4/loose.write("<b>Bom dia</b>").write("<b>Boa noite</b>"). data = new Date(). hora = data. </script> </body> </html> 157 .01 Transitional//EN" "http://www. hora. else document.*O mesmo exemplo com outro formato <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. if (hora<12) document.getHours().dtd"> <html> <head> <title>Saudação</title> </head> <body> <script type="text/javascript"> var data.

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

*Operadores Lógicos Concatenam operações lógicas && – 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 NÃO if(!(a > b)) Se NÃO a maior do que b 159 .

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

</script> </body> 161 .Operador Ternário Substitui um if/else simples Use com parcimônia <body> <script type="text/javascript"> if (3 > 2) { alert("True"). } (3 > 2) ? alert("True") : alert("False"). } else { alert("False").

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

case constante2: comando2. default: comandoN.*O Comando switch()-case Sintaxe: switch (expressão) { case constante1: comando1. } 163 .

break. } 164 . break. case constante2: comando2 break case constante3: comando3. } Um pouco mais sofisticada switch (expressão) { case constante1: comando1. default: comandoN. break. case constante2: comando2 case constante3: case constante4: comando3. break.*O Comando switch()-case Sintaxe simplificada: switch (expressão) { case constante1: comando1. default: comandoN.

case 5: document. case 2: document. é 6a feira").write("Hoje break. case 6: document.write("Hoje break. case 4: document. case 7: document.write("Hoje break.write("Hoje } </script> </body> </html> é 2a feira"). não é um dos dias da semana") 165 . é 5a feira").write("Hoje break. é domingo").*Exemplo <html> <body> <script type="text/javascript"> var data. default: document. case 3: document. é 4a feira"). é 3a feira").write("Hoje break.write("Hoje break. semana = data. é sábado").write("Hoje break.getDay(). switch(semana) { case 1: document. data = new Date().

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

Funções 167 .

*Função
Uma função é uma porção de código que resolve um problema muito específico, parte de um problema maior (Wikipédia) Uma função contém código que será executado por um evento ou uma chamada explícita Você pode chamar uma função de qualquer lugar de uma página Funções podem ser definidas na seção <head> ou <body> Para garantir que a função já foi carregada antes de sua chamada, a função deve ser definida na seção <head>
168

*Definição de Função
Sintaxe:
function nomeDaFuncao(var1, var2, ..., varN) { Lista de variáveis, código executável separadas por vírgula }

Os parâmetros var1, var2, etc. são variáveis ou valores passados para a função Os { e } definem o início e o fim da função Nota: uma função sem parâmetros 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="Não aperte o botão" onclick="mostraMensagem()"> </form> </body> </html>
170

*O comando return
O comando return é utilizado para especificar um valor que será retornado da função chamada para quem a chamou Sintaxe:
return; // apenas retorna da função OU return valor; // retorna um valor da função

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 variável
Variável declarada dentro de uma função
Variável local Somente pode ser acessada dentro da função Se a função chamar outra função, a variável continua existindo, mas a função chamada não tem acesso a ela Podemos ter variáveis locais com o mesmo nome em funções diferentes A variável é destruída ao término da função

Variáveis declaradas fora da função
Variáveis globais Podem ser acessada em qualquer parte do código, inclusive dentro de outras funções A variável passa a existir depois da sua declaração e continua existindo até a página ser fechada
174

*Exemplo do uso de var
<html> <head> <script type="text/javascript"> function executaFuncao() { var numero = 8752; document.write("O valor do número no início da função é " + numero + "<br/>"); numero += 2; document.write("O valor do número no final da função é " + numero + "<br/>"); } </script> </head> <body> <script type="text/javascript"> var numero = 5; document.write("O valor inicial do número é " + numero + "<br/>"); numero++; document.write("O valor do número antes da chamada da função é " + numero + "<br/>"); executaFuncao() document.write("O valor do número depois da chamada da função é " + numero + "<br/>"); </script> </body> </html> <html> <head> <script type="text/javascript"> function executaFuncao() { numero = 8752; document.write("O valor do número no início da função é " + numero + "<br/>"); numero += 2; document.write("O valor do número no final da função é " + numero + "<br/>"); } </script> </head> <body> <script type="text/javascript"> var numero = 5; document.write("O valor inicial do número é " + numero + "<br/>"); numero++; document.write("O valor do número antes da chamada da função é " + numero + "<br/>"); executaFuncao() document.write("O valor do número depois da chamada da função é " + numero + "<br/>"); </script> </body> </html>

175

confirm (pergunta) Abre uma janela para pedir uma string ao usuário Exemplo: if (confirm("Quer realmente sair da página ?")) alert("Então adeus!"). window. " "). if (isNaN(x)) window.alert("Valor não é numérico !").*Funções Predefinidas isNaN (valor) Retorna "true" se o valor não for numérico Exemplo: x =prompt("Entre um numero:". 176 .

Eventos 177 .

movimento. … Carga de uma página ou figura.*Eventos Eventos são ações que ocorrem como resultado de atividades do browser ou interações do usuário com a página Web Uso do mouse – clique. … Entrada de dados – apertar uma tecla. duplo clique. … Envio de formulário … 178 . digitar. soltar uma tecla.

o segmento de código que é executado em resposta ao evento específico é chamado de manipulador do evento (handler do evento) Formato geral: <TagHTML evento=“código Javascript”> 179 .*Manipuladores de Eventos Quando um evento ocorre.

*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 2 180 .

*Alguns Eventos Definidos em Javascript Keyboard Events Attribute onkeydown onkeypress onkeyup Description DOM The event occurs when the user is 2 pressing a key The event occurs when the user presses a key The event occurs when the user releases a key 2 2 181 .

<body> and <frameset>) The event occurs when a document. 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 . frameset.*Alguns Eventos Definidos em Javascript Frame/Object Events Attribute onabort Description The event occurs when an image is stopped from loading before completely loaded (for <object>) The event occurs when an image does not load properly (for <object>.

<select>. <select>. textarea>.*Alguns Eventos Definidos em Javascript Form Events Attribute onblur onchange Description The event occurs when a form element loses focus The event occurs when the content of a form element. the selection. or the checked state have changed (for <input>. and <textarea>) The event occurs when an element gets focus (for <label>. 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 2 onreset onselect onsubmit 2 2 2 183 . <input>.

org/TR/html4/loose.*Um pouco sobre eventos.. charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <form> <input type="button" value="Não clique aqui" onclick='alert("Você clicou no botão")'> </form> </body> </html> 184 .w3.01 Transitional//EN" "http://www. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4..dtd"> Código Javascript <html> <head> (sem as tags script) <meta http-equiv="Content-Type" content="text/html.

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

w3.</p> </body> </html> 186 .org/TR/html4/loose.*Mais um pouco ainda sobre eventos… <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. usuário')" onunload="alert('Obrigado por visitar a página')"> <p>Exemplo de eventos onload e onunload. charset=ISO8859-1"> <title>Exemplo de evento onload</title> </head> <body onload="alert('Bem vindo.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.

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

} </script> <title>Insert title here</title> • O documento tem um formulário </head> • O formulário tem um campo texto <body> • O campo texto tem um valor <form name="formulario"> <input type="text" name="texto"> <input type="button" value="Não clique aqui!" onclick="funcao()"> </form> </body> </html> 188 .*Um pouco sobre objetos <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.formulario.01 Transitional//EN" "http://www.value).dtd"> <html> <head> <script type="text/javascript"> function funcao() { alert(document.w3.texto.org/TR/html4/loose.

fazer algo do tipo: alert(texto) não é possível..*Explicando..value) Escreve o valor (value) do campo chamado texto que está no <form> chamado formulario dentro do documento (document) 189 . mas podemos escrever: alert(document. não existe a variável texto. apenas o campo chamado texto do formulário.formulario. ou seja.texto. Observe a construção HTML: <form name="formulario"> <input type="text" name="texto"> </form> Neste caso.

etc.formulario.value Propriedade defaultvalue form maxlength name size type value Descrição O valor inicialmente mostrado no campo Referencia o formulário onde o campo está Número máximo de caracteres permitidos no campo O nome do campo O tamanho do campo em caracteres (aproximadamente) O tipo do campo (button. checkbox. text.) O valor atual do campo 190 . hidden.Outros atributos de campo (além de value) <form name="formulario"> <input type="text" name="texto"> <input type="button" value="Não clique aqui!" onclick="funcao()"> </form> document.texto.

texto. <form name="formulario"> <input type="text" name="texto"> </form> Exemplo: variavel = document.value 191 .Continuação Para podermos fazer alguma operação com uma variável devemos copiar o campo chamado texto para uma variável.formulario.

.dtd"> <html> <head> <script type="text/javascript"> function pessoa() { // converte o campo nomeBastimo para variável nome var nome = document. 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ê. charset=ISO-8859-1"> <title>Nome &amp.familia. } </script> <meta http-equiv="Content-Type" content="text/html.nomeBatismo. // converte o campo nomeFamilia para variável sobrenome var sobrenome = document.org/TR/html4/loose. // escreve uma string constante: "Você é " // concatenada com uma string variável: nome // concatenada com uma string constante: " " // concatenada com uma string variável: sobrenome alert("Você é " + nome + " " + sobrenome).value.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.familia.w3.value.." onclick="pessoa()"> </form> </body> </html> Exemplo (escreve nome e sobrenome) .nomeFamilia.01 Transitional//EN" "http://www.

Exemplo – campo texto ou password Propriedade defaultValue form maxlength name size type Value Método blur() focus() select() Descrição O valor inicialmente mostrado Referência ao formulário Número máximo de caracteres Nome do campo Tamanho do campo em caracteres Tipo do campo <input> O valor atual do campo Descrição Remove o foco do campo Coloca o campo em foco Seleciona o campo 193 .

value).campoTexto.formulario. } </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 – campo text ou password <html> <head> <title>Obtendo o valor de um campo texto de um formulário</title> <script type="text/javascript"> function mostraValor() { alert(document.

Exemplo de campo checkbox Propriedade checked defaultChecked name value Descrição 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 .

} </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 .value).campoMeio[i].campoMeio[i].formularioTransporte.formularioTransporte.campoMeio. for(i=0.length. i<document.formularioTransporte. i++) if(document.Exemplo de campo checkbox <html> <head> <title>Obtendo o valor de um campo radio de um formulário</title> <script type="text/javascript"> function mostraValor() { var i.checked) alert("Meio de transporte favorito: " + document.

Exemplo – campo select (simples ou múltiplo) Propriedade <select> length name options selectedIndex defaultSelected <option> index selected text value Descrição Número de opções na lista Nome da lista Lista de opções Índice do item selecionado da lista Valor booleano indicando se o item é selecionado por default O valor do índice da opção Valor booleano indicando se o item está selecionado O texto associado à opção O valor associado à opção 197 .

Exemplo – campo select (simples ou múltiplo)
<html> <head> <title>Obtendo o valor de um campo select de um formulário</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

Exercícios

200

*Pura matemática Considere a função f(x) = 2x + 5 Calcule manualmente:
f(1) f(8) f(7) f(5) f(2)

201

*Pura matemática Considere a função 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 matemática Considere a função f(x) = 2x + 5 Calcule manualmente f(x) para x variando de 1 até 5

203

*Pura matemática Considere a função 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

*Exercício Faça uma página HTML onde o usuário poderá entrar com o valor de x. Mostre o resultado de f(x) = 2x + 5 (use uma função feita por você)

205

*Exercício Faça uma página HTML onde o usuário poderá entrar com os valores de x e y. 206 . Mostre o resultado de f(x. y) = 2x + 5y + 7 (use uma função feita por você).

*Exercícios Faça uma página HTML contendo um formulário com um botão. A página deverá exibir uma mensagem quando o usuário clicar no botão. 207 .

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

*Exercícios Faça uma página com um formulário contendo um campo texto onde o usuário irá escrever o seu nome. A página deverá saudar o usuário 209 .

conhecimento. charset=ISO-8859-1"> <title>Exercicios\Evento\Saudacao.w3.Resposta: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. } } } </script> <meta http-equiv="Content-Type" content="text/html.value).value). } else { alert("Boa noite" + document.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 .value). hora.nomePessoa.dtd"> <html> <head> <script type="text/javascript"> function sauda() { var data.org/TR/html4/loose.conhecimento. } else { if(hora<18) { alert("Boa tarde " + document. if(hora<12) { alert("Bom dia " + document. hora = data.getHours().nomePessoa.01 Transitional//EN" "http://www.nomePessoa.conhecimento. data = new Date().

*Exercícios Faça uma página com um formulário contendo dois campos texto. A página deverá exibir a soma dos valores digitados nos campos 211 .

num1 = parseFloat(document.op1.calculadora.dtd"> <html> <head> <script type="text/javascript"> function opera() { var num1. } </script> <meta http-equiv="Content-Type" content="text/html. resultado. document.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 .op2. num2 = parseFloat(document.org/TR/html4/loose. resultado = num1 + num2.w3.01 Transitional//EN" "http://www. num2.value).Resposta: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.calculadora. charset=ISO-8859-1"> <title>Exercicios\Evento\Soma.write("A soma de " + num1 + " com " + num2 + " é " + resultado).value).

var resultado = num1 + num2.calculadora.calculadora. } </script> <meta http-equiv="Content-Type" content="text/html.value. document. document.01 Transitional//EN" "http://www.op1. charset=ISO-8859-1"> <title>Exercicios\Evento\Soma2. sNum2) { var num1 = parseFloat(sNum1).op2.dtd"> <html> <head> <script type="text/javascript"> function opera(sNum1.org/TR/html4/loose.Outra resposta: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.write("A soma de " + num1 + " com " + num2 + " é " + resultado).value)"> </form> </body> </html> 213 .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.w3. var num2 = parseFloat(sNum2).

215 . operando2 e resultado e um botão de igual.*Desafio Fazer uma página HTML contendo um formulário com quatro campos: operando1. operador (+-*/).

calculadora. num2 = parseFloat(document.value. operacao.value = resultado.dtd"> <html> <head> <script type="text/javascript"> function opera() { var num1. charset=ISO-8859-1"> <title>Exercicios\Evento\Calculadora2.org/TR/html4/loose. num1 = parseFloat(document. document.calculadora. else resultado = num1 / num2.w3.result.value).Resposta: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. else if(operacao == '*') resultado = num1 * num2.html</title> </head> <body> <h1>4 Operações</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 . if(operacao == '+') resultado = num1 + num2. num2.calculadora.calculadora. } </script> <meta http-equiv="Content-Type" content="text/html.value). else if(operacao == '-') resultado = num1 .num2. operacao = document.op1.operador.op2.

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

*Exercícios Faça uma página HTML que leia o valor de 2 números fracionários através de comandos prompt. 4) Utilize uma função que receba os 2 números e retorne o maior (esta função não lê e não escreve nada). 3) Utilize uma função que receba os 2 números e escreva o maior (esta função não lê nada). A página deverá informar o valor do maior número lido. 218 . 2) Utilize uma função que leia os 2 números e retorne o maior (esta função não escreva nada). Faça 4 versões diferentes desta página: 1) Utilize uma função que leia os 2 números e escreva o maior.

alert(i + " ao quadrado = " + q).w3. </script> </body> </html> Modifique a sua página para não utilizar a variável q 219 . charset=ISO-8859-1"> <title>Quadrado</title> </head> <body> <script type="text/javascript"> var i = parseFloat(prompt("Informe um número")).org/TR/html4/loose. var q = quad (i).dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.01 Transitional//EN" "http://www.*Exercícios Complete a página HTML a seguir: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.

n2. n1 = parseFloat(prompt("Entre com o primeiro número")). alert("O maior numero lido = " + maior(aux. aux = maior (n1. npares = par(n1) + par(n2) + par(n3). alert("Total de numeros pares lidos = " + npares).01 Transitional//EN" "http://www. tot. n2. n3). n2. n2). tot = media(n1. n3 = parseFloat(prompt("Entre com o terceiro número")). tot)).*Exercícios Complete a página HTML a seguir: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. n2.w3. </script> </body> </html> 220 .org/TR/html4/loose. n3. alert("Total de valores acima da media = " + total(n1. n2 = parseFloat(prompt("Entre com o o segundo número")). n3)). n3. alert("Media dos numeros lidos = " + media (n1.dtd"> <html> <head> <title>Exercício de Função</title> </head> <body> <script type="text/javascript"> var n1. n3)). npares. aux.

*Exercícios Faça uma página HTML que leia o valor de 2 números fracionários através de comandos prompt. Crie uma nova versão para 3 números Desafio: crie uma versão para CINCO números! 221 . A página deverá mostrar os 2 valores em ordem crescente.

*Exercícios Defina uma função chamada maximo() que recebe 2 argumentos como parâmetro e retorna o maior deles. 222 . Faça uma página para testar a sua função.

*Exercícios Defina uma função chamada maiorDe3() que recebe 3 números como parâmetros e retorna o maior deles. Faça uma página para testar a sua função 223 .

Aula 4 Laço while Laço for Comando break Comando continue 224 .

*Repetição Permite a execução repetida de um ou mais comandos Repetição determinada Repetição indeterminada 225 .

} Verdadeira Comandos 226 .*Laços while Permite repetir um comando ou bloco enquanto uma condição for verdadeira Forma geral: Falsa Condição while(condição) { comandos.

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

Verdadeira Condição Comandos Falsa 228 . Teste da condição é realizado no final da iteração. Comandos são executados pelo menos uma vez Sintaxe: do { comandos. } while (condição).*Laços do – while Repete um bloco de comandos enquanto uma condição for verdadeira.

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

i++. while ( i <= 10 ) { document. } </script> </body> </html> <html> <head> <title>Exemplo de dowhile()</title> </head> <body> <h2>Repetição com dowhile()</h2> <script type="text/javascript"> var i = 8752. do { document. } while ( i <= 10 ). i++.*Comparação entre while() e do-while() <html> <head> <title>Exemplo de while()</title> </head> <body> <h2>Repetição com while()</h2> <script type="text/javascript"> var i = 8752.write(i + "<br>"). </script> </body> </html> 230 .write (i + "<br>").

Forma geral: for (atribuição.*Laços for() Repete um comando ou bloco controlado por uma variável. condição. } seguinte. incremento) { comandos. F condição V comandos incremento atribuição seguinte 231 .

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

atual1. atual3..Separador de comandos no for() A vírgula funciona como separador de comandos na atribuição e no incremento Sintaxe: for (inic1... ..) { comandos. atual2. inic3. .. condição. } 233 . inic2.

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

Passe para a próxima iteração do laço! 235 . Pare a repetição já! continue.*Comandos break e continue Permitem um controle adicional sobre os laços de repetição break.

} </script> </body> </html> 236 . document. i++) { if(i == 2) break. i < 5.*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.write (i + "<br>").

*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.write (i + "<br>"). i < 5. i++) { if(i == 2) continue. document. } </script> </body> </html> 237 .

Exemplo de for-in Cria um índice para percorrer um array Sintaxe: for (contador in objeto) { comandos. } 238 .

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

Perguntas? 240 .

Exercícios 241 .

*Exercícios Faça um programa que imprima todos os números de 0 (inclusive) até 10 (exclusive) 242 .

Sugestão de Solução <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.w3.01 Transitional//EN" "http://www. i<10. i++) document.write(i + " ").dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. </script> </body> </html> 243 . charset=ISO-8859-1"> <title>Números de 0 até 10</title> </head> <body> <script type="text/javascript"> for(i=0.org/TR/html4/loose.

*Exercícios Faça um programa que imprima todos os números pares de 0 até 25 ☺ 244 .

i=i+2) document.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. i<25.w3.write(i + " ").01 Transitional//EN" "http://www. charset=ISO-8859-1"> <title>Números Pares</title> </head> <body> <script type="text/javascript"> for(i=0.Sugestão de Solução <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/loose. </script> </body> </html> 245 .

*Exercícios Faça um programa que imprima todos os números pares de um intervalo Faça uma versão lendo os dados de um formulário HTML Faça uma versão lendo os dados através de um prompt() 246 .

w3.dtd"> <html> <head> <script type="text/javascript"> function lista() { var inicio = parseInt(document. var fim = parseInt(document.org/TR/html4/loose.Sugestão de Solução do Item A <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.dados. i<fim. for(i=inicio.01 Transitional//EN" "http://www.value). i=i+2) document.inicio. if(inicio%2 != 0) inicio++. } </script> <meta http-equiv="Content-Type" content="text/html.dados.write(i + " ").value).fim. charset=ISO-8859-1"> <title>Pares em um intervalo com formulário</title> </head> <body> <form name="dados"> Início: <input type="text" name="inicio"> Fim: <input type="text" name="fim"><br/> <input type="button" onclick="lista()" value="Imprime"> </form> </body> </html> 247 .

org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. fim. fim = parseInt(prompt("Fim")). inicio = parseInt(prompt("Inicio")). if(inicio%2 != 0) inicio++.01 Transitional//EN" "http://www. i<fim. for(i=inicio. i=i+2) document.w3.write(i + " "). </script> </body> </html> 248 .Sugestão de Solução do Item B <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. charset=ISO-8859-1"> <title>Pares em um intervalo com formulário</title> </head> <body> <script type="text/javascript"> var inicio.

*Exercícios Faça um programa que imprima a tabuada de um número lido Faça uma versão lendo de um formulário HTML Faça uma versão lendo de um prompt() 249 .

charset=ISO-8859-1"> <title>Pares em um intervalo com formulário</title> </head> <body> <form name="dados"> Tabuada: <input type="text" name="valor"><input type="button" onclick="tabuada()" value="Imprime"> </form> </body> </html> 250 .dados. i++) document. i. for(i=0.w3.01 Transitional//EN" "http://www.org/TR/html4/loose. } </script> <meta http-equiv="Content-Type" content="text/html. valor = parseInt(document.value).write(i + " x " + valor + " = " + (i * valor) + "<br/>"). i<=10.valor.Sugestão de Solução do Item A <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.dtd"> <html> <head> <script type="text/javascript"> function tabuada() { var valor.

w3. </script> </body> </html> 251 .dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.org/TR/html4/loose. charset=ISO-8859-1"> <title>Pares em um intervalo com formulário</title> </head> <body> <script type="text/javascript"> var valor = parseInt(prompt("Tabuada de.write(i + " x " + valor + " = " + (i * valor) + "<br/>")... i<=10. i++) document.01 Transitional//EN" "http://www.Sugestão de Solução do Item B <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. for(i=0.")).

a página deverá perguntar se o usuário deseja somar novamente através do método confirm() 252 . Após mostrar a soma.*Calculadora com Repetição Faça uma página HTML que receba do usuário 2 números reais através de um prompt() e mostre a sua soma.

*Exercícios Faça um programa que imprima o fatorial de um número lido
Faça uma versão lendo de um formulário HTML Faça uma versão lendo de um prompt()

253

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

254

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

255

*Desafios Faça um programa que imprima TODA a tabuada

256

Sugestão de Solução
<!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 Faça um programa que imprima um tabuleiro de xadrez

258

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

259

*Grande desafio Obtenha a data de hoje (não é para ler) e monte uma página com o calendário, destacando o dia de hoje (em vermelho, por exemplo).

260

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

Se o chute estiver 1 unidade de distância da senha.*Enorme Desafio: Jogo da Senha Faça o Jogo da Senha Funcionamento: 2 jogadores Jogador 1: O jogador 1 informa um número entre 0 e 9. O programa não aceita números inválidos. frio (o jogador 2 não é informado se o número é maior ou menor que a senha) 262 . caso contrário. o usuário é informado que o chute foi quente. pede para entrar com o número novamente O jogador 1 informa o número máximo de tentativas do jogador 2 Jogador 2: Chuta um número Se for errado ou inválido. é informado se o chute foi muito grande ou pequeno. inclusive os extremos. perde a chance e chuta novamente Se o número for válido mas errado. Neste caso. A leitura é realizada através de um campo do tipo senha.

retorne falso Faça um script que informe os N primeiros números primos. 263 . caso contrário.*Outro desafio: Faça uma função que receba um número inteiro como parâmetro e retorne verdadeiro se o número for primo.

Aula 5 .Objetos 264 .

*Introdução Javascript é uma linguagem de programação orientada a objetos (OO) Uma linguagem de programação OO permite a definição de novos objetos e novos tipos de dados 265 .

botões.: carros. Um objeto é uma coisa. formulários. pássaros. No navegador. etc. caixas de texto. Um objeto possui propriedades e métodos. objetos são o próprio navegador. Um objeto é apenas um tipo especial de dado. 266 . livros. qualquer coisa.*Programação OO Podemos utilizar os objetos já definidos na linguagem ou criar novos objetos Começaremos utilizando objetos pré-definidos na linguagem. dinheiro. como uma coisa no mundo real Ex. etc.

</script> O código acima terá como saída o valor 9 267 .length). document.*Propriedades São 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!".write(txt.

document.*Métodos São as ações que podem ser executadas por um objeto No exemplo abaixo estamos usando o método UpperCase() o objeto String para exibir o texto em letras maiúsculas Exemplo <script type="text/javascript"> var str="Oi Turma!". </script> O código acima terá como saída o texto OI TURMA! 268 .write(str.toUpperCase()).

*Objeto Em resumo. um objeto é um conjunto de: Propriedades Métodos Classe varA varC FuncA ( FuncC ( ) ) varB varD FuncB ( FuncD ( ) ) 269 .

17). 270 .: Date é um objeto pré-definido Criando um objeto objA = new Date(). tipoDoObjeto() é chamado construtor Ex. 8.*Criando uma Instância de um Objeto Você pode usar o operador new para criar instâncias de objetos de uma classe em particular variavel = new tipoDoObjeto(parametros). Criando um objeto com uma data pré-definida objB = new Date(2013.

*Objeto String Permite a manipulação de strings (textos) ou de partes de um texto Esta manipulação pode ser feita através da chamada de métodos Existem vários métodos pré-definidos para o objeto String 271 .

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

indexOf("Turma") + "<br />").write(str.indexOf("Oi") + "<br />"). document.write(str.indexOf("turma")). document.write(str. document.*Objeto String: método indexOf() Exemplo usando o método indexOf() para retornar a posição da primeira ocorrência de um texto específico em um texto <html> <body> <script type="text/javascript"> var str="Oi Turma!". </script> </body> </html> O código acima terá como saída os valores: 0 3 -1 273 .

*Objeto String: método charAt() O método charAt(posição) retorna o caracter na posição informada. var caracter = texto. " + texto[posicao]). … <body> <script type="text/javascript"> var texto = "Este é um texto". var posicao = 8. </script> </body> </html> 274 . document.write("O caracter que está na posição " + posicao + " é " + caracter + "<br/>").charAt(posicao). document.write("Ou seja.

</script> </body> </html> O exemplo acima terá como saída: null Turma null Turma! 275 .match("Turma") + "<br />").write(str.match("Turma!")).write(str. document. document.write(str.write(str.match("turna") + "<br />").Objeto String: método match() Exemplo usando o método match() para procurar um texto específico dentro de um texto e caso encontre retorna o valor do texto <html> <body> <script type="text/javascript"> var str="Oi Turma!". document.match("turma") + "<br />"). document.

"Pessoal")).write(str. document.write(str). </script> </body> </html> O resultado da página será: Oi Pessoal Oi Turma! 276 . document.Objeto String: método replace() Exemplo usando o método replace() para substituir alguns caracteres por outros em um texto <html> <body> <script type="text/javascript"> var str="Oi Turma!".replace(/Turma/.

Propriedades 277 .*Objeto String .

Métodos 278 .*Objeto String .

*Objeto Array Um objeto Array é utilizado para armazenar vários valores em uma única variável Todos os valores armazenados em um array são de um mesmo tipo Necessita de um índice para podermos nos referenciarmos a um dos dados armazenados no array O índice do array é um número inteiro. 279 . O primeiro índice de um array é sempre o 0 (zero).

i++) document. diaSemana[2] = "terça-feira".write(diaSemana[i] + "<br />"). diaSemana[1] = "segunda-feira". </script> </body> </html> 280 . diaSemana[0] = "domingo". diaSemana[4] = "quinta-feira".i<diaSemana. for (i=0. diaSemana[3] = "quarta-feira". diaSemana[6] = "sábado".*Objeto Array: criação Exemplo criando um objeto Array <html> <body> <script type="text/javascript"> var diaSemana= new Array().length. diaSemana[5] = "sexta-feira".

estado [1] = "Minas Gerais".write(estado + "<br />"). document. document. estado [0] = "Rio de Janeiro". </script> </body> </html> 281 . estado [3] = "Bahia". estado [2] = "Paraná".*Objeto Array: método sort() Exemplo utilizando o método sort() que ordena o array em ordem crescente <html> <body> <script type="text/javascript"> var estado = new Array(5).write(estado .sort()). estado [4] = "São Paulo".

*Outro exemplo de criação de Array <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/loose. </script> </body> </html> 282 . "Minas Gerais". charset=ISO-8859-1"> <title>Nomes dos Estados</title> </head> <body> <script type="text/javascript"> var estado = ["Rio de Janeiro".write(estado + "<br />").write(estado.write(estado.w3.sort() + "<br/>"). document.01 Transitional//EN" "http://www. document. "Paraná". document. "São Paulo"].reverse() + "<br />").dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. "Bahia".

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

*Referência 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 utilização 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: método Date() Exemplo usando o método Date() para obtenção da data e hora corrente <html> <body> <script type="text/javascript"> document.write(Date()). </script> </body> </html> 286 .

write("Hoje é " + diaSemana[data. diaSemana[5]="sexta-feira". var diaSemana=new Array(7). diaSemana[2]="terça-feira". diaSemana[6]="sábado". diaSemana[1]="segunda-feira". document.*Objeto Date: método Date() Exemplo usando o método Date() e um array para exibir o dia da semana <html> <body> <script type="text/javascript"> var data=new Date(). diaSemana[4]="quinta-feira".getDay()]). </script> </body> </html> 287 . diaSemana[0]="domingo". diaSemana[3]="quarta-feira".

write("Data: " + data). 7.setFullYear(1970. document. </script> </body> </html> 288 .*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). // 27 de agosto de 1970 data.

*Comparando Duas Datas <html> <head> <title>Comparação de Datas</title> </head> <body> <script type="text/javascript"> var minhaData = new Date(). minhaData. 6. 27). var hoje = new Date(). else alert ("Hoje é antes de 27/07/1970"). if (hoje > minhaData) alert ("Hoje é depois de 27/07/1970"). </script> </body> </html> 289 .setFullYear(1970.

*Referência 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. 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 . 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.

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 .*Referência do Objeto Date Method getUTCMonth() getUTCFullYear() getUTCHours() getUTCMinutes() getUTCSeconds() getUTCMilliseconds() getYear() parse() setDate() setFullYear() setHours() setMilliseconds() setMinutes() Description Returns the month from a Date object according to universal time (from 0-11) Returns the four-digit year from a Date object according to universal time Returns the hour of a Date object according to universal time (from 0-23) Returns the minutes of a Date object according to universal time (from 0-59) Returns the seconds of a Date object according to universal time (from 0-59) Returns the milliseconds of a Date object according to universal time (from 0-999) Returns the year. as a two-digit or a three/four-digit number. depending on the browser.

Use setFullYear() instead !! 292 . 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).*Referência do Objeto Date Method setMonth() setSeconds() setTime() setUTCDate() setUTCMonth() setUTCFullYear() setUTCHours() setUTCMinutes() setUTCSeconds() setUTCMilliseconds() setYear() Description Sets the month in a Date object (from 0-11) Sets the seconds in a Date object (from 0-59) Calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1.

according to Greenwich time. according to local time. to a string and returns the date portion Converts a Date object. to a string. 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. Use toUTCString() instead !! Converts a Date object. 1970 according to universal time Returns the primitive value of a Date object 293 . to a string and returns the time portion Converts a Date object. according to local time. to a string Takes a date and returns the number of milliseconds since midnight of January 1. according to universal time.*Referência do Objeto Date Method toDateString() toGMTString() toLocaleDateString() toLocaleTimeString() toLocaleString() toSource() toString() toTimeString() toUTCString() UTC() valueOf() Description Returns the date portion of a Date object in readable form Converts a Date object. according to local time.

Perguntas? 294 .

Exercícios 295 .

25 de setembro de 2013 296 .*Data de Hoje Faça uma página HTML que mostre a data de hoje no formato: Quinta-feira.

incluindo o dia da semana.*Data de Nascimento Faça uma página que pergunte ao usuário os números do dia. Informe a data completa. do mês e do ano do nascimento dele. por extenso do nascimento do usuário 297 .

Dicas: O método de string chamado de indexOf(texto) devolve a primeira ocorrência de texto dentro da string A propriedade de string chamada de length equivale ao número de caracteres da string O método de string chamado de substring(início. O usuário deverá digitar o seu endereço de e-mail e a página deverá mostrar o domínio do e-mail do usuário.*Exercícios Faça uma página com um formulário com um campo de e-mail e um botão. fim) retorna uma parte da string 299 .

Dica: utilize a propriedade appName do objeto navigator.*Exercícios Fazer uma página HTML que informe qual o browser que o usuário está utilizando. Informe se o browser é: MS Internet Explorer Mozila Firefox Apple Safari Google Chrome Opera Outros 300 .

*Exercícios Fazer um programa em javascript que leia duas strings e monte uma página indicando a posição de todas as ocorrências da segunda string na primeira. Exemplo: Primeira string: “Este é um texto que contém um texto com a palavra texto” Segunda string: “texto” Resultado: 10 30 50 301 .

Dica: Para obter um número aleatório entre 0 e 4.: Utilize pelo menos 5 figuras diferentes. utilize um vetor de nomes de figuras.*Exercícios Fazer uma página que cada vez que é recarregada exibe um banner escolhido aleatoriamente.random()*5) Coloque o endereço das figuras em um array de strings Obs. 302 . Desta vez. utilize parseInt(Math.

por exemplo). destacando o dia de hoje (em vermelho.*Exercícios Obtenha a data de hoje (não é para ler) e monte uma página com o calendário. 303 .

falso (false) caso contrário. Faça uma página HTML para testar a sua função 304 .*Exercícios Escreva uma função que recebe um caracter e retorna verdadeiro (true) se for uma vogal.

4]) deve retornar 24 Faça uma página HTML para testar a sua função.*Exercícios Defina uma função soma() e uma função multiplica() que soma e multiplica. 305 .2. Por exemplo: soma([1.3.3.4]) deve retornar 10 multiplica([1. respectivamente. todos os numeros em um vetor (array).2.

*Exercícios Defina uma função reverso() que inverta uma string. Por exemplo. reverso("um teste") deve retornar "etset mu" Faça uma página HTML para testar a sua função 306 .

307 .*Exercícios Escreva uma função chamada achaAMaiorPalavra() que recebe um vetor de palavras e retorna a maior palavra. Faça uma página HTML para testar a sua função.

308 . Vogais são mantidas intactas como no exemplo a seguir: Este seria um texto! Esostote soseroria umom totexoxtoto! Implemente uma página que contenha um formulário para implementar o jogo.*Exercícios Rövarspråket é um jogo Sueco onde se codifica um texto duplicando cada consoante e incluindo uma letra o entre cada uma delas.

Mais Objetos 309 .Aula 6 .

Os atributos da tag viram propriedades do objeto. 310 . Algumas propriedades podem ter seu valor modificado. O navegador mantém a coerência entre o valor da propriedade e o que está sendo visualizado pelo usuário.*Objetos do browser O navegador cria automaticamente uma hierarquia de objetos refletindo alguns elementos inseridos na página.

radio. text..*Hierarquia de Objetos JavaScript navigator window frames [ ] document forms [ ] elements [ ] : button. textarea.. checkbox. options [ ] (quando o elemento é um select) links [ ] anchors [ ] images [ ] history location 311 .

*Página exemplo images[0] forms[0] elements[0] elements[1] elements[2] images[1] links[0] links[1] 312 .

write(document.links[1] + '<br/>').meslin@gmail.write(document.br'>Link para meu site</a><br> <a href='http://wwww. </script> </body> 313 . document.br'>Link para outro site</a><br> <hr /> <script type="text/javascript"> document.*Página 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.value + '<br/>'). document.elements[1].write(document. document.forms[0].forms[0].com.links[0] + '<br/>').write(document.value + '<br/>').outrosite.com.elements[0].meusite.com' /></td> </tr> <tr> <td colspan="2" align="center"><input type='submit' value='Envia'></input></td> </tr> </table> </form> <a href='http://www.

Hierarquia de Objetos DOM 314 .

write(texto).*O Objeto window É o objeto de mais alto nível na hierarquia de objetos do browser em Javascript É o objeto default Criado automaticamente quando a página é carregada Como objeto default. pode ser omitido window.mozilla.org/en-US/docs/Web/API/Window 315 . document.document.write(texto). Cada janela possui um objeto window Inclui vários métodos e propriedades https://developer.

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

*Descobrindo o tipo de browser Algumas coisas não 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 aplicações para navegadores diferentes Propriedades: appCodeName appName appVersion platform language (no explorer userLanguage e systemLanguage) 318 .

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

document. document.javaEnabled() + "<br/>").write ("<b>Browser:</b> "+ navigator.appVersion + "<br/>").write ("<b>Largura:</b> " + navigator.write ("<b>Suporte a cookies:</b> " + navigator.write ("<b>Número de cores:</b> " + navigator.cookieEnabled + "<br/>").write ("<b>Altura:</b> " + navigator. </script> 320 .appName + "<br/>").width + "<br/>").write ("<b>Plataforma</b>: " + navigator.userAgent + "<br/>"). document.platform + "<br/>"). document.colorDepth + "<br/>").write ("<b>Nome do código:</b> " + navigator.write ("<b>Agente:</b> " + navigator.availHeight + "<br/>").height + "<br/>").appCodeName + "<br/>").write ("<b>Vesão:</b> " + navigator.write ("<b>Largura:</b> " + navigator.*Alguns detalhes do objeto navigator <script type="text/javascript"> document.write ("<b>Altura:</b> " + navigator. document. document. document. document. document.availWidth + "<br/>"). document.write ("<b>Suporte a Java:</b> " + navigator. document.

org/enUS/docs/Web/API/Document 321 .*O objeto document É o objeto mais importante em uma janela ou frame O objeto document representa um documento web ou uma página em um navegador Inclui vários métodos e propriedades https://developer.mozilla.

etc Objetos contidos num documento links[ ]. forms [ ]. valor2.*Objeto document Serve para definir/consultar características do documento corrente Algumas Propriedades: bgcolor. vlinkcolor. title. referrer. etc Escrevendo texto num documento: write (valor1. valorN) writeln (valor1. fgcolor. images[ ]. valorN) 322 . linkcolor. valor2. … . … . alinkcolor lastModified. anchors[ ].

*Javascript e DOM HTML Javascript pode ser utilizado para modificar o conteúdo ou os atributos de elementos HTML Modificando o conteúdo: document.getElementById(id).atributo = novo valor Modificando um estilo: document.style.getElementById(id).propriedade = novo estilo 323 .getElementById(id).innerHTML = novo HTML Modificando um atributo: document.

innerHTML = "outro texto"'> <input type="button" value="Muda cor!" onclick='document.getElementById("paragrafo").getElementById("paragrafo").style.color = "red"'> </form> </body> </html> 324 .*Javascript e DOM HTML <html> <body> <p id="paragrafo">Um teste!</p> <form> <input type="button" value="Muda conteúdo!" onclick='document.

getElementById("paragrafo").color = "red". } function mudaCor() { document.getElementById("paragrafo").innerHTML = "outro texto".style. } </script> </head> <body> <p id="paragrafo">Um teste!</p> <form> <input type="button" value="Muda conteúdo!" onclick='mudaTexto()'> <input type="button" value="Muda cor!" onclick='mudaCor()'> </form> </body> </html> 325 .*Javascript e DOM HTML <html> <head> <script type="text/javascript"> function mudaTexto() { document.

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

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

var campoCriado = document.setAttribute("value".setAttribute("id". var formulario = document.setAttribute("type".getElementById("idFormulario"). "button"). "idCriado").createElement("input"). formulario.removeChild(campoCriado). } </script> </head> <body> <form id="idFormulario"> <input type="button" onclick="adiciona()" value="Aperte para criar um botão" id="idCria" /><br/> <input type="button" onclick="remove()" value="Aperte para remover um botão" id="idRemove" /><br/> </form> </body> </html> 328 .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. } function remove() { var formulario = document.getElementById("idCriado"). formulario. "botão criado").getElementById("idFormulario"). campoInput. campoInput. campoInput.appendChild(campoInput).

*Eventos HTML Cada elemento em uma página HTML tem eventos que podem disparar scripts em Javascript Exemplos de eventos: Um clique de mouse Uma página carregada Uma imagem carregada A Seleção de um campo de entrada em um formulário HTML O envio de um formulário O acionar de uma tecla 329 .

innerHTML="Eu falei para não clicar"'>Não clique aqui</h1> </body> </html> 330 .*Exemplo <html> <body> <h1 id="cabecalho" onclick='document.getElementById("cabecalho").innerH TML="Eu falei para não clicar"'>Não clique aqui</h1> <h1 id="cabecalho" onclick='this.

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

referencia ao próprio objeto Exemplo: <h1 id="cabecalho" onclick='this.innerHTML="Eu falei para não clicar"'>Não clique aqui</h1> No exemplo anterior. this faz referência ao objeto representado por esta instância de <h1> 332 . como o nome está dizendo.*O Objeto this this.

innerHTML = "Eu falei para não clicar" } </script> <title>Muda com função</title> </head> <body> <h1 onclick='muda(this)'>Não clique aqui</h1> <p onclick='muda(this)'>Não clique aqui</p> </body> </html> 333 .*Exemplo <html> <head> <script type="text/javascript"> function muda(objeto) { objeto.

getElementById("cabecalho").*Exemplo <html> <body> <h1 id="cabecalho" onclick='this.color="red"'>Título do Texto</h1> <p onclick='document.color= "blue"'>Um parágrafo</p> </body> </html> 334 .style.style.

*Mais um exemplo <html> <head> <script type="text/javascript"> function mudaCor(nomeDoObjeto. } </script> </head> <body> <h1 id="cabecalho" onclick='mudaCor("cabecalho". "#104175")'>Título do Texto</h1> <p onclick='mudaCor("cabecalho". "yellow")' onmouseout='mudaCor("umLink".com' id='umLink'>Não é meu site</a> <div onmouseover='mudaCor("umLink".meslin. "black")'>Muda cor do link</div> </body> </html> 335 .style. "blue")'>Um parágrafo</p> <a href='www.getElementById(nomeDoObjeto). cor) { document.color = cor.

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

Perguntas? 337 .

Exercícios 338 .

esta deverá mudar. 339 . Ao clicar na figura.*Exercícios Faça uma página HTML com uma figura.

as instruções referentes ao campos 340 . no topo da página.*Exercício Faça uma página HTML contendo um formulário com os campos: Nome: somente letras maiúsculas Data de nascimento: formato dd/mm/aaaa CEP: formato nnnnn-nnn CPF: formato nnn. o usuário deverá visualizar.nnn-dd Ao selecionar o campo que será preenchido.nnn.

a figura deverá mudar Desafio: inclua uma descrição em formato texto abaixo da figura (a descrição muda com a figura) 341 . este deverá ser habilitado (ao sair.*Exercício Implemente a página HTML mostrada na figura. Ao passar o mouse no texto. desabilitado) Ao clicar no texto.

Faça com que o estilo do link mude ao passar o mouse por cima. 342 . Não se esqueça de voltar ao estilo normal após o mouse sair (você escolhe o estilo).*Exercício Faça uma página HTML com vários links.

uma janela de confirmação deverá ser aberta apresentando os dados informados. Ao clicar no botão. 1) Use radio para selecionar o gênero 2) Use select para selecionar o gênero Veja observação no próximo slide 343 .*Exercício Faça uma página com um formulário com um campo para o usuário informar o seu nome e outro para informar o gênero.

defaultSelected 344 .formulario.campoSelect.formulario.options[indice].text Para saber se a opção foi selecionada (booleano): document.selectedIndex Para referenciar uma opção em particular em um objeto do tipo select: document.selected Para saber se a opção é pré-selecionada (booleano): document.options[indice] Para referenciar o seu valor: document.value Para referenciar o seu texto: document.formulario.campoSelect.campoSelect.length Para saber o índice do último item selecionado: document.formulario.options[indice].formulario.*Uso do campo <select> (múltiplo ou não) Para saber o número de opções: document.campoSelect.options[indice].campoSelect.formulario.campoSelect.options[indice].formulario.campoSelect.

Ao clicar no botão. Desafio: modifique o exercício para que o usuário possa clicar no texto relacionado ao checkbox para marcar o checkbox 345 . uma janela de confirmação deverá ser aberta apresentando os dados informados.*Exercício Faça uma página com um formulário contendo um campo para o usuário informar o seu nome e campos checkbox para que seja informado os tipos de atividades desejadas.

um para aumentar o tamanho do fonte e outro para diminuí-lo. Coloque um texto com vários parágrafos 346 .*Exercícios Faça uma página HTML que possua dois botões.

*Desafio! Refaça o exercício do tamanho do fonte e inclua entre um parágrafo e outro. o exercício da figura que muda ao passar o mouse por cima 347 .

*Desafio Faça um menu no estilo Windows (ou Mac ou Linux) 348 .

Definindo Classes e Objetos 349 .

campo1 + objeto. </script> 350 . basta atribuir um valor a um campo.Criando um objeto On-The-Fly Para criar um campo em um objeto. objeto.campo2 = 8752 alert(objeto.campo1 = "valor 1". ele será criado naquele momento.: <script type="text/javascript"> var objeto = new Object().campo2). objeto. Ex. Se o campo não existir.

objeto1. objeto2 = {x:8. </script> 351 . objeto1.x). alert(objeto1.z = 5. alert(objeto2. objeto1. y:7.y = 7.Criando um objeto On-The-Fly Outro exemplo: <script type="text/javascript"> var objeto1 = new Object().y). z:5}. var objeto2 = new Object().x = 8.

} var barco = new Barco(1.velocidade = velocidade.x = x. velocidade. alert(barco.x).direcao). this. 3. </script> 352 . alert(barco.velocidade). this. y. this. 4). alert(barco.direcao = direcao. 2.Criando um Construtor Em Javascript. direcao) { this. um construtor é apenas uma função que atribui a this Javascript não tem nada exatamente equivalente a uma definição de classe Java Exemplo: <script type="text/javascript"> function Barco(x.y).y = y. alert(barco.

acelera = function() { alert("Acelerando.cor).Outro exemplo de construtor Construtor com método e propriedade <script type="text/javascript"> function late() { alert ('Au'). alert(cachorro. cachorro. } function Cachorro(nome) { this. carro.cor = "vermelho". </script> 353 .late(). alert(carro. this.late = late. } var cachorro = new Cachorro("Rex"). </script> <script type="text/javascript"> function Carro() { this.nome).").acelera().nome = nome. } this. } var carro = new Carro().

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

esta passará a existir. 355 . cuidado com os nomes das propriedades e dos métodos.Armadilhas Protected e Private Em Javascript não existe o conceito de métodos ou propriedades privadas Cuidado com o nome das propriedades Se você fizer uma atribuição a uma propriedade que não exista em um objeto. Logo.

Manipulação de Erros e Exceções 356 .

Manipulação de Erros e Exceções Erros ou exceções ocorrem durante o tempo de execução Como contornar erros e exceções: 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 execução: o script tenta executar alguma coisa que o browser não pode 358 .

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

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

Manipulação de Exceção em Javascript Exceção é um erro gerado pelo script – uma operação inválida O código que manipula a exceção é chamado de handler Sintaxe: try { código normal que pode resultar em exceção } catch(objetoError) { código para tratar o erro } finally // opcional { código que será executado com ou sem erro } 361 .

message. MSIE supports it as the description property.5 5 5 362 . Notes constructor 5 description 5 message name number prototype 5.5 5.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.

writeln("Número do erro: " + e. document.<br/>") } </script> </body> </html> 363 . } finally { document.name + "<br/>"). } catch(e) { document.writeln("Exceção capturada<br/>"). // erro var x = parseInt(a).writeln("Nome do erro: " + e.<br/>"). document.writeln("Descrição do erro: " + e.message + "<br/>"). document.description + "<br/>").number + "<br/>"). document.write("Bloco finally.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("Início do bloco try..writeln("Mensagem de erro: " + e..

Perguntas? 364 .

Exercícios 365 .

Cookies 366 .

O que são 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 Segurança Servidores podem usar cookies para lembrar suas ações anteriores Servidores podem compartilhar cookies com terceiros.net Sites feitos por programadores ruins (não meus alunos) podem armazenar informações sensíveis nos cookies Antigos browsers possuem bugs que permitem acesso a cookies através de javascript Em resumo: Somente use cookies se realmente não houver outra alternativa Nunca ponha informações confidenciais em cookies 368 . como por exemplo. com doubleclick.

Cookies de sessão e cookies persistentes Cookies de sessão Armazenados apenas em memória São removidos quando o browser é fechado Não 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 .

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

DHTML 371 .

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

Adicionar o novo elemento ao elemento já existente 373 . Procurar um elemento já existente 5. Criar um novo texto 3. Adicionar o novo texto ao novo elemento 4.Adicionando algum texto em uma página Passos 1. Criar um novo elemento 2.

node = document.createElement("p"). 374 .1) Criando um novo elemento Criar um objeto parágrafo <p> Associar o novo objeto a uma variável var node.

2) Criar um novo texto Para facilitar.crateTextNode("Um texto. novoTexto = document."). 375 . o texto será atribuido a uma variável (opcional) var novoTexto.

3) Adicionar o novo texto ao novo elemento Para que o texto apareça na página Web. ele deverá ser adicionado ao novo elemento node.appendChild(novoTexto). 376 .

getElementById("id").4) Procurar um elemento existente O texto ainda não foi incluido na página Web O novo elemento precisa ser incluido em um elemento já existente Para facilitar. 377 . elemento = document. o elemento existente será atribuido a uma variável var elemento.

appendChild(node). 378 .5) Adicionar o novo elemento ao elemento já existente Finalmente incluir o novo elemento e o seu texto a um elemento já existente elemento.

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

removeChild(elemento. podemos utilizar o método removeChild(id) Exemplo: function removeTexto(lugar) { var elemento. } 380 .lastChild). elemento = document.getElementById(lugar).Removendo um nó Para remover um nó. elemento.

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

Método getElementsByTagName() getElementById() permite trabalhar elementos individualmente getElementsByTagName() permite trabalhar com grupos de elementos Retorna um vetor (array) 382 .

elementos = document.length).length).getElementsByTagName("*").getElementsByTagName("li"). alert(elementos. elementos = document.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. alert(elementos. </script> </body> </html> 1</li> 2</li> 3</li> 4</li> 5</li> 383 .

firstNode lastChild no = node.parentNode childNodes no = node.Propriedades de node Algumas propriedades de node para ajudar a percorrer a árvore de nós parentNode no = node.lastNode nextSibling no = node.childNode firstChild no = node.previousNode 384 .nextSiblingNode previousSibling no = node.

“valor”).setAttribute(“atributo”.getAttribute(“atributo”). 385 . note.Atributos dos nós atributo = node.

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

Expressões Regulares 387 .

Validação de Formulários Enviando um formulário Uso do evento onsubmit Se a função retornar verdadeiro. o envio é abortado <form onsubmit='return valida()'> … </form> 388 . o formulário é enviado Se a função retornar falso.

Expressão Regular Uma expressão regular é um texto que define um padrão de caracteres Um dos usos de uma expressão regular é o teste de coincidência com um padrão definido 389 .

390 .Criando uma expressão regular Em Javascript. uma expressão regular é criada utilizando-se /…/ padrão = /expressão/.

Modificadores de expressão regular i – para tornar uma expressão regular não case-sensitive /expressão/i g – para criar uma busca por todas as coincidências /expressão/g 391 .

Indica início de texto Indica fim de texto Indica limite de palavar Indica a ausência de início de palavra Dígito de 0 até 9 Não dígito de 0 até 9 Um caracter (letra.Caracteres Especiais Caracter Descrição Expressão ^ $ \b \B \d \D \w \W \s \S . dígito ou sublinhado) Todos os outros caracteres excluidos de \w Um caracter separador Um caracter que não seja separador Qualquer caracter /^ana/ /ana$/ /\bana/ /ana\B/ /\do/ /\DS/ /\w\w/ /\W/ /a\s/m/ /a\S/m/ /./ Exemplo Match ananias ana maria ana maria banana ana maria 1o 2o AS A4 de $ # ana maria anamaria Qualquer coisa 392 Não Match banana banana banana ananias ao Do 5S $x #1 A 5 anamaria ana maria .

Modificadores de caracteres Caracter [lista] [^lista] [inicio-fim] Descrição Coincide qualquer caracter da lista Coincide qualquer carater fora da lista Coincide qualquer caracter dentro da faixa Exemplo Expressão [abc] [^abc] [a-z] [A-Z] [a-zA-Z] [0-9] [0-9a-zA-Z] Match Não Match [^inicio-fim] Coincide qualquer caracter fora da faixa 393 .

} {n .9}/ 394 . m } Descrição 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 não mais do que m vezes Exemplo /\s*/ /ve+m/ /sec?ção/ /\d{8}/ /\d{5.Caracteres de repetição Expressão * + ? {n} {n.}/ /\d{8.

3}\. 395 . muda o significado do caracter .3}\. \d{. \d{.3}\.3}\/ \d muda o significado do caracter d \.Caracter de Escape (Scape) Muda o significado do caracter seguinte Exemplos: /\d{. \d{.

2}\/\d{1. \* \+ \? \| \{ \} \( \) \^ \$ \n \r \t Descrição Caracter / Caracter \ Caracter .Caracteres Desmodificados Caracter \/ \\ \.2}\/\d{4}/ /\\o\// Match 27/8/1970 \o/ Não Match 19700827 . Caracter * Caracter + Caracter ? Caracter | Caracteres { e } Caracteres ( e ) Caracter ^ Caracter $ Mudança de linha Retorno ao início da linha tabulação 396 Exemplo Expressão /\d{1.

)?McCoy /<([a-zA-Z][a-zA-Z0-9]*)>.Grupos e Alternativas Padrão /padrão1|padrão2/ (padrão) \n (?padrão) Descrição Coindice com padrão1 ou padrão2 Permite backreference ou trata como um grupo Índice do backreference Um grupo que não conta para backreference Exemplo /ganho|ganhado/ /(Sr\.*<\/\1>/ 397 .

Usando uma string re = /padrão/flags 398 .Criando uma Expressão Regular Usando o construtor re = new RegExp(padrão. flags).

i++) document.. i<vetor.exec(texto) Procura uma expressão no texto e retorna um vetor com a coincidência e uma lista com as backreferences <script type="text/javascript"> re = /t(ex)to/i. vetor = re.Métodos de Expressão Regular Método re. for(i=0.write("Vetor[" + i + "]: " + escape(vetor[i]) + "<br/>").exec("Este é um TeXto contento a palavra texto e a palavr.. </script> 399 .length.

write("Texto: " + texto + "<br/>").Métodos de Expressão Regular Método string. document. "texto"). </script> 400 . texto = texto.replace(re.replace(/Texto/gi. novo) Substitui a expressão regular na string pela string novo <script type="text/javascript"> texto = "Este é um Texto contento a palavra texto e a palavra textos aparecendo várias vezes no TEXTO".

search(/texto/i. posicao = texto. </script> 401 .search(re) Retorna a posição da 1a ocorrência de re na string texto <script type="text/javascript"> texto = "Este é um Texto contento a palavra texto e a palavra textos aparecendo várias vezes no TEXTO".write("Posição: " + posicao).Métodos de Expressão Regular Método texto. document. "texto").

write("Vetor[" + i + "]: " + vetor[i] + "<br/>").google. vetor = texto.split(/&/). i++) document.Métodos de Expressão Regular Método texto.split(re) Divide a string delimitada pela expressão regular <script type="text/javascript"> texto = "https://www.length. </script> 402 .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". for(i=0. i<vetor.

test("Este é um TeXto contento a palavra texto e a palavra textos aparecendo várias vezes no TEXTO")). </script> 403 . document.Métodos de Expressão Regular Método re.test(texto) Retornar verdadeiro se houver coincidência no texto da expressão regular <script type="text/javascript"> re = /t(ex)to/i.write(re.

Exercícios 404 .

Espaço em branco Faça uma função para remover os espaços em branco a mais (no início e no fim) em campos de um formulário 405 .

search split() unescape() “+” “” 406 .Query String Faça uma função para separar os campos e os valores de uma query string Dicas location.

Validação Faça um formulário com o seguintes campos: Aplique validação em todos eles 407 .

puc-rio.INF1030 – Conceitos de Informática INF1407 – Programação para a Web Alexandre Meslin meslin@inf.br .

Sign up to vote on this title
UsefulNot useful