Javascript

INF1030 Conceitos de InformticaINF1407 Programao para a Web

Alexandre [email protected]

2*Ementa

HTML XHTML CSS Javascript

Variveis Operadores Comandos Objetos

3*Referncias

HTML/CSS Criando Sites com HTML, Silva, M, Novatec Design Criativo com HTML, Weinman, L e outros, Cincia Moderna

Javascript Use a Cabea Javascript, Monison, M, Altabooks S Javascript, Yank, K, Bookman

Bibliografia

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

Na Internet

4*Critrio de Avaliao INF1030 apenas Critrio de avaliao: categoria 1

Categoria I A avaliao do aproveitamento feita pelo professor ser expressa por meio de dois graus de qualificao, apresentados numericamente, em escala de zero (0) a dez (10), do seguinte modo: a) o primeiro grau de qualificao, de peso dois (2), representando o aproveitamento de aluno na disciplina, ser obtido atravs de testes, relatrios, trabalho ou prova realizada no meio do perodo letivo, tendo em vista um programa parcialmente lecionado;

b) o segundo grau de qualificao, de peso trs (3), resultante de prova escrita, oral ou de projeto e sua defesa, cobrindo toda ou parte da matria lecionada no perodo letivo. Neste grau podem ser includos testes e relatrios relativos a programa parcialmente lecionado;

c) o Grau Final ser calculado conforme um dos dois casos a seguir: c-1) Se o segundo grau for igual ou maior que trs (3,0), o Grau Final ser a mdia ponderada das duas avaliaes, de acordo com os itens anteriores.

c-2) Se o segundo grau for menor que trs (3,0), o Grau Final ser calculado tendo o primeiro grau peso um (1) e o segundo grau peso trs (3).

5*Sistema de Avaliao INF1030 apenas

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

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

Obs.: no temos 2a chamada

6*Data das Avaliaes INF1030 apenas

G1:13/09/201320/09/2013

G2:01/11/201308/11/2013

*Programao das Aulas INF1030 apenas

7

Data SemanaAula #Descrio

16/08/2013 6 1Parte 1 - HTML + Web + Exerccios (30 min)23/08/2013 6 2Javascript+exerccios30/08/2013 6 3Aula 3 - Desvio Condicional06/09/2013 6 4exerccios13/09/2013 6 5Prova prtica20/09/2013 6 6Prova prtica27/09/2013 6 7Aula 4 - Loops + Exerccios04/10/2013 6 8Aula 5 - Objetos11/10/2013 6 9Aula 6 - Mais Objetos18/10/2013 6 10Exerccios25/10/2013 6 11Exerccios01/11/2013 6 12Prova prtica08/11/2013 6 13Prova prtica15/11/2013 6 Proclamao da Repblica

Perguntas

9Aula 1

HTML

10

*Reviso Servidor web (web server)

Armazena pginas web Mquina cliente: requista pginas web

Seu computador o cliente quando voc requisita uma pgina web

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

Armazenado em um servidor web Composto por:

Pginas HTML Arquivos de imagem

O servidor web um computador Possui pastas (diretrios) e arquivos

11

*Cliente x Servidor

12

*Arquivo HTML

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

Browser (navegador) Interpreta o HTML Exibe a pgina formatada Ex (2013).:

Internet Explorer (14,3%) Firefox (30,2%) Chrome (48,4%) Safari (4,2%) Opera (1,9%)

13

*HTML

Hypertext Markup Language (Linguagem de Marcao de Hipertexto) Hipertexto: links dentro de uma pgina web HTML no uma linguagem de programao HTML utiliza tags para realizar a marcao do texto das pginas web

14

*Tags HTML

Tags de marcao HTML so chamadas simplesmente de tags HTML Tags HTML so palavras chaves dentro de < e > como por exemplo

Tags HTML geralmente aparecem aos pares como e

A primeira tag de um par a tag de abertura e a segunda a tag de fechamento

15

*Documento HTML = Pgina Web

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

A finalidade de um browser ler o documento HTML e o exibir como uma pgina web

O browser no mostra as tags HTML, mas as utiliza para interpretar o contedo da pgina

16

*Documento HTML = Pgina Web

Meu primeiro cabealhoMeu primeiro pargrafo

17

*Elementos HTML

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

Tag de abertura Elemento contido Tag de fechamento

Este um pargrafo

Este um link

18

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

19

*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

Meu primeiro cabealhoMeu primeiro pargrafo

20

*No esquea a tag de fechamento!

A maior parte dos browsers iro exibir corretamente mesmo se voc esquecer as tags de fechamentoIsto um pargrafo

Isto outro pargrafo

O exemplo acima ir funcionar na maioria dos browsers, mas no confine nisto.

Esquecer a tag de fechamento pode causar resultados inesperados ou erros em verses futuras de browsers

Obs.: verses futuras de HTML no permitiro que voc no use as tags de fechamento

21

*Elementos HTML vazios

Elementos HTML sem contedo so chamados de elementos vazios

Elementos vazios podem ser fechados na tag de abertura

um elemento que no possui uma tag de fechamento

Em XHTML, XML e verses futuras de HTML, todos os elementos devero ser fechados

Utilize em tags vazias (sem contedo) -

22

*Atributos HTML

Elementos HTML podem ter atributos Atributos:

Fornecem informaes adicionais sobre o elemento

Somente so especificados na tag de abertura Aparecem em pares do tipo nome/valor: nome="valor"

23

*Exemplo de atributo

Links HTML so especificados pela tag O endereo do link fornecido como um atributo

Este um link

24

*Utilize cotas para valores dos atributos

Os valores dos atributos devem ser escritos entre aspas " ou entre plics ' (aspas simples)

Este um link

Este um link

25

*Dica: utilize letras minsculas Tags HTML no diferenciam letras maisculas de minsculas. e significam a mesma coisa

W3C recomenda o uso de letras minsculas em HTML 4

Futuras verses de HTML e XHTML utilizaro somente tags com letras minsculas

Nome do atributo e seu valor tambm no diferenciam maisculas de minsculas

Da mesma forma, o uso de letras minsculas para o nome do atributo recomendvel

Utilize tambm letras minsculas para o valor do atributo, exceto quando o uso de letras maisculas for necessrio

26

*Cabealhos HTML Cabealhos so definidos por tags de (maior letra) at (menor

letra) Exemplo:

Este um cabealho H1Este um cabealho H2Este um cabealho H3

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

27

*Linhas em HTML A tag utilizada para criar uma linha horizontal

Este um cabealho H1

Este um cabealho H2

Este um cabealho H3

28

*Comentrio HTML

Comentrios devem ser includos nos cdigos HTML para melhorar a legibilidade e o entendimento

Comentrios so ignorados pelo browser eles no so exibidos

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

29

*Pargrafos

Pargrafos so definidos pela tag

Isto um pargrafoIsto outro pargrafo

30

*Quebra de linhas Utilize se voc quiser quebrar uma linha sem comear um novo pargrafo

Isto um pargrafoIsto outro pargrafoEste um pargrafo com quebra de linha

31

*Formatao

32

*Atributo style

Utilize no lugar das seguintes tags:

E dos seguintes atributos:

Tag Estilo

style="text-align: center;"

style="color:#ABACA7; font-family: courier; font-size: 10px"

style="text-decoration:line-through;"

style="text-decoration: underline;"

Atributo Estilo

align style="text-align: center;"

bgcolor style="background-color: #ABACA7"

33

*Exemplos de style Cor do fundo:

Define uma cor de fundo para uma pgina:

Tipo, cor e tamanho de fonte: Define um estilo para um pargrafo

Alinhamento de texto: Define um alinhamento para um cabealho

34

*Modificando fontes A tag desaconselhada Devemos utilizar o atributo style

CabealhoPargrafo

Tamanho de fontes

CabealhoPargrafo

35

*Mais fontes Cor do texto

CabealhoPargrafo

Combinando tudo...

Este um pargrafo em verdana, com 80% do tamanho na cor verde.

36

*Folha de estilo externa

Folha de estilo externa

Um pargrafo.

Outro pargrafo.

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

externo.css

37

*Mais sobre estilos

Uma folha de estilos interna

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

38

*Mais sobre estilos

Estilos inline

Pargrafo

39

*Hiperlinks, ncoras e links

Hiperlink uma referncia a um recurso na web

Hiperlink pode apontar para qualquer recurso da web: Uma pgina HTML Uma imagem Um arquivo de som Um arquivo de filme

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

40

*Um link HTML

Sintaxe:texto do link

Obs.: o "texto do link" no precisa ser um texto, pode ser uma imagem ou qualquer outro elemento HTML

O atributo href define o endereo destino do linkMeu site

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

41

*O atributo target

O atributo target define onde o documento referenciado dever ser abertoMeu site

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

42

*O atributo name Quando o atributo name utilizado, a tag define uma ncora dentro de um documento HTML

Uma ncora invisvel para o usurio Sintaxe:

qualquer contedo (geralmente vazio)

Um link para esta ncora dentro da mesma pgina:o link

Um link para esta ncora em outra pgina webo link

Um link para esta ncora em outra pgina de outro siteo link

43

*Imagens Em HTML, uma imagem definida por uma tag A tag vazia O atributo src indica o endereo (url) da imagem

Sintaxe:

Exemplo: Imagem no mesmo diretrio do arquivo HTML

Imagem em outro diretrio

Imagem em outro site

44

*O atributo alt

Utilizado para definir um texto alternativo Texto definido pelo autor Ferramentas de acessibilidade utilizam este texto para descrever a imagem para deficientes visuais

O texto ser mostrado Se o endereo da imagem estiver errado Se a imagem demorar a ser carregada Se o usurio desabilitar a possibilidade do browser exibir imagem

Sintaxe:

45

*Tabelas

Definio da tabela em si: ....

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

46

*Tabelas

Definio dos elementos da tabela: .... - Linha .... - Cabealho .... - Clula Atributos:

valign = alinhamento vertical (TOP, MIDDLE ou BOTTOM) align = alinhamento horizontal (LEFT, CENTER ou RIGHT) rowspan = nmero de linhas ocupadas pela clula colspan = nmero de colunas ocupadas pela clula width = largura da clula height = altura da clula bgcolor = cor de fundo nowrap

47

*Tabelas

Aplicando cores na tabela:

bgcolor pode ser usado dentro de

48

*Exemplos de tabelas

linha 1, clula 1

linha 1, clula 2

linha 2, clula 1

linha 2, clula 2

49

*Tabela com cabealho

CabealhoOutro Cabealho

linha 1, clula 1linha 1, clula 2


50

*Tabela com clula vazia

Uma tabela


linha 2, clula 1

Outra tabela


linha 2, clula 1

51

*Formulrios

Um formulrio uma rea onde so colocados os elementos de um formulrio

Elementos de um formulrio permitem ao usurio entrar com informaes

Um formulrio definido pela tag

Elementos de entrada

52

*Formulrios: Codificao Bsica

. . .definio dos tens do formulrio. . .

Para enviar o formulrio por e-mail:

53

*Campo de Texto

Conta:

Senha:

54

*rea de Texto

Comentrios:

Digite aqui um texto qualquer.

55

*Menus

Sexo:

56

*Botes "Sim ou No"

reas de interesse: RedesBancos de Dados

57

*Botes de RdioSexo: Masculino Feminino

58

*Outros Campos

Campo escondido

Campo de upload de arquivo

59

*Botes de Envio

*Dicas sobre formulrios

Use listas dropdown, checkbox e botes do tipo rdio para minimizar os erros do usurio

Indique quais campos so obrigatrios

Use o atributo maxlength para limitar o tamanho do texto

Use validao do lado do cliente e do lado do servidor

60

61

*Caracteres especiais

62

*Elementos de um cabealhos

Dentro das tags podemos encontrar: : define a base para os links neste documento

: define uma referncia para recursos : define meta-informaes : define o ttulo do documento : define um estilo : permite a criao de scripts

63

*Tag

Descrio da pgina:

Definio de palavras chaves:

Outros atributos de meta (???)

64

*Links

Um link tem o seguinte formato:esquema://[host].domnio[:porta][/caminho][/arquivo]

esquema: tipo de servio host: nome da mquina domnio: domnio onde est a mquina porta: nmero da porta caminho: pasta ou diretrio arquivo: o arquivo propriamente dito

65

*Alguns esquemas

66

*Exemplos Acesso a newsgroup

HTML Newsgroup

Download via ftpDownload WinZip

Enviando emailEnviar email para algum

Link para uma outra pgina em outro site:O link

67

*Exemplos

Link para uma outra pgina no meu site:O link Equivalente a O link

Link para um arquivo no mesmo diretrioO link

Para mudar de protocolohref='https://www.meusite.com.br/diretorio/arquivo'>O link

68

*Scripts (em javascript, bvio!)

No confunda Java com Javascript!

document.write("Alo mundo!");

69

*Eventos

Eventos relativos a janelas Somente vlidos em body e em frameset

70

*Eventos

Eventos relativos a formulrios Somente vlidos em elementos de formulrios

71

*Eventos

Eventos de teclado

72

*Eventos

Eventos relativos a mouse

73

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

*Instalando o Visual Web Developer 2010 Express Edition

Veja os slides no arquivo correspondente e boa sorte!

74

Instalando um Servio Web

Veja os slides nos arquivos correspondentes e boa sorte! Instalao de Java Instalao de Tomcat

75

76

Perguntas?

77

Exerccios

78

*Exerccios

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

79

*Exerccios

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

80

*Exerccios

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

1. Seleo do destino

Litoral ou interior

Distncia a percorrer

Tempo disponvel 2. Meio de transporte

Areo

Terrestre

Martimo 3. Fazendo as malas

O que levar

O que no levar

No esquecer

81

*Exerccios

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

Curso de HTML

Exerccios da Primeira Aula

1. SNEA garante que voar mais seguro 2. Preos das passagens areas nacionais

82

*Exerccios

Crie uma pgina chamada "roteiro.html" com o seguinte contedo (para que a pgina funcione melhor, inclua mais texto em cada tpico):

Opes de Roteiros

1. Viagem a Bahia 2. Rio Selvagem 3. Pantanal

Viagem a Bahia

Este tpico mostra uma viso geral sobre uma viagem a Bahia

Volta ao ndice

Rio Selvagem

Este tpico mostra como explorar diversos rios e corredeiras.

Volta ao ndice

Pantanal

Este tpico cobre assuntos mais complexos que requerem um planejamento mais profundo da viagem.

Volta ao ndice

83

*Exerccios

Alterar as cores da pgina criada no exerccio anterior de acordo com a seguinte tabela:

Elemento Nome da cor

Cor de fundo Beige Cor do texto Maroon Cor de links Blue Cor de links seguidos Red Cor do ttulo principal Navy Cor dos subttulos Darkgreen

84

*Exerccios

Criar a seguinte pgina em HTML:

85

*Exerccios

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

*Exerccio

Implemente a seguinte pgina HTML Cor do texto: #CCCCCC

86

87

*Exerccios - Formulrio de Cadastro Criar uma pgina HTML com um

formulrio de cadastro de clientes para a Agncia de Turismo Virtual. Este formulrio deve conter os seguintes campos: Nome (texto 40 mximo) Data de Nascimento (dd/mm/aaaa) Nome da Me (texto 40 mximo) Nome do Pai (texto 40 mximo) Tipo de Viagem (select com as

opes Amaznica, Nordeste, Praias, Pantanal, Rstico, Ecolgico, Trabalho, Indivulgvel, Naturista, Outros)

Temporada (Alta ou Baixa radio-button)

Adicionais (checkbox com Guia para Idosos, Grupos, Individual, Lua de mel, Famlia, Outro

Telefone (max 8 carac + DDD + ramal)

E-mail (max 40 carac)

88

*Layout com HTML

Uso de tabelas Uso de frames Uso de div

89

*Tabelas

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

90

*Frames

Com frames, podemos mostra mais do que um documento HTML na mesma janela do browser

Cada documento HTML se localiza em um frame

Os frames so independentes

Problemas: Vrios documentos HTML Pode gerar dificuldades com a impresso

91

*A tag

Define como a janela ser dividida em frames

Cada define um conjunto de linhas OU colunas

92

*A tag Define o documento HTML que ir ocupar o frame

Exemplo: Um conjunto de duas colunas A primeira com 25% da largura O documento frameA.html ocupar a primeira coluna enquanto o documento frameB.html a segunda

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

93

*Exemplo

94

*Exemplo de uso de

Some older browsers don't support iframes.If they don't, the iframe will not be visible.

95

*Listas no numeradas

Texto

96

*Listas no numeradas

Correio Eletrnico Telnet FTP

Obs: Listas podem ser aninhadas opcional atualmente, mas devemos nos lembrar de colocar

97

*Listas Numeradas

Texto

98

*Listas numeradas


99

*Listas usando estilo tipo:

decimal nmeros decimais comeando de 1 decimal-leading-zero nmeros decimais comeando com zero (ex: 01, 02, 03, ..., 98, 99).

lower-roman: algarismos romanos minsculos upper-roman : algarismos romanos maisculos hebrew: nmeros hebraicos tradicionais georgian: nmeros "Georganos" tradicionais(an, ban, gan, ..., he, tan, in, in-an, ...).

armenian: nmeros armenianos tradicionais cjk-ideographic: nmeros plenamente ideograficos hiragana: a, i, u, e, o, ka, ki, ... Katakana: A, I, U, E, O, KA, KI, ... hiragana-iroha: i, ro, ha, ni, ho, he, to, ... katakana-iroha: I, RO, HA, NI, HO, HE, TO, ...

100

*Exemplo de listasLista no ordenada


Lista ordenada


Romano Minsculo

Este o primeiro item. Este o segundo item. Este o terceiro item.

Decimal


Romano Maisculo


Alfabtico minsculo


Alfabtico minsculo


101

Javascript

102

*Javascript

Linguagem script popular Suportada por diversos navegadores web e outras ferramentas

Interage com HTML, adicionando interatividade

Normalmente as pginas HTML so estticas Janelas pop-up Iterao com formulrios Clculos Efeitos especiais

103

*Javascript x Java para no confundir nunca mais

Javascript JavaInterpretado pelo computador no lado do cliente

Compilado no servidor antes de ser executado

Referncias a objetos so verificados em tempo de execuo

Referncias a objetos so verificados em tempo de compilao

No precisa declarao de tipos de dados

Tipos de dados precisam ser declarados

Pode acessar objetos do navegador No pode acessar objetos do navegador

104

*Termos Objeto: dados e funcionalidade juntos

Propriedade: atributos (valores) que so associados a alguma coisa

Mtodo: uma ao que um objeto pode realizar

Evento: uma ao iniciada por um usurio ou pelo computador

Varivel: um lugar para armazenar valores em um computador (propriedade est relacionada a objeto)

Funo: uma rotina ou procedimento que realiza uma ao (mtodo est relacionado a objeto)

105

*Como incluir Javascript em uma pgina HTML

Javascript dentro da pgina HTML


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

106

*Como incluir Javascript em uma pgina HTML

O mesmo exemplo, agora com tags HTML dentro do Javascript


107

*Onde incluir o Javascript

Javascript executado durante a carga da pgina HTML

Nem sempre queremos que ele execute durante

Algumas vezes necessrio que ele execute antes ou aps o carregamento da pgina

Incluir o Javascript no cabealho () de uma pgina garante que ele ser executando antes da carga da pgina

108

*Exemplo

document.write("Ttulo da pgina");

document.write("Contedo da pgina");

109

*Utilizando um arquivo Javascript externo

Pgina com Javascript externo

Corpo da Pgina

// cdigo javascript/* * aqui eu posso colocar qualquer* comando Javascript*/

alert("Alo mundo!");

arquivo.js

110

*Comandos Javascript

A linguagem Javascript case-sensitive

Um comando Javascript executado pelo navegador

Normalmente termina-se um comando Javascript com ; (boa prtica de programao, mas desnecessrio)

O uso de ; permite escrever mais de um comando por linha

111

*Cdigo Javascript

Cdigo Javascript uma sequncia de comandos Javascript

O cdigo executado sequencialmente, comando por comando

Exemplo:

document.write("Este um cabealho");

document.write("Isto um pargrafo.");

document.write("Este outro pargrafo.");

112

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

{




}

113

*Comentrios

Finalidade: documentao

Comentrios podem ser adicionados para explicar o cdigo Javascript

Exemplo:

// escreve um cabealho


// escreve um pargrafo



114

*Comentrios em mltiplas linhas

Um comentrio de mltiplas linhas comea por /* e termina com */

Exemplo:

/*

Este cdigo a seguir escrever:

- Um cabealho

- Dois pargrafos

*/




115

*Comentrios e cdigo

Podemos utilizar comentrios para evitar que algum comando seja executado

Muito utilizado durante a fase de desenvolvimento

Exemplo:


// document.write("Isto um pargrafo.");


116

*Comentrios e comandos

Podemos acrescentar comentrios no final de uma linha de comando

Exemplo:

document.write("Este um cabealho"); //cabealho

document.write("Isto um pargrafo."); /* pargrafo */


117

*Estrutura da Linguagem

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

118

*Declarao e uso de variveis

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

Exemplo: var i; // cria a varivel i = 8752; // cria e inicializa a varivel i com 8752 var i = 8752; // cria e inicializa a varivel i com 8752

Os tipos de dados so assumidos dinamicamente i = 25; i = "vinte e cinco";

119

*Armadilhas...

Cuidado: no utilize nomes com escritas diferentes mas pronncias iguais ou parecidas.

Exemplo: no crie as seguintes variveis: Nome e nome Idade e idade Num1 e num1

Voc vai acabar confundindo nome com Nome!

*Tipos de Dados Javascript pertimite que uma mesma varivel contenha diferentes tipos de dados

Tipos de dados primitivos: Nmero: inteiro e ponto flutuante Booleano: true e false String: sequncia de caracteres

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

Tipos de dados especiais Null: nulo Undefined: valor de uma varivel criada mas sem valor atribuido

120

121

*Entrada e sada de dados

document.write() Escreve alguma coisa na pgina Pode escrever na seo ou

document.write("Ttulo da pgina");

document.write("Contedo da pgina");

122


window.alert() alert()

Abre uma janela para exibir um aviso ao usurio

window.alert("Senha incorreta, acesso negado");

alert("Senha incorreta, acesso negado");

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

Abre uma janela para o usurio confirmar ou no

Exemplo de confirm()

if (confirm("Quer realmente sair da pgina ?"))

alert("Ento adeus!");

123

124


window.prompt() prompt()

Abre uma janela para pedir uma string ao usurio

var nome=prompt("Qual o seu nome?");

125


Um valor padro (default) pode ser fornecido

Evita que aparea undefined na linha da resposta

nome=prompt("Qual o seu nome?", "(sem nome)");

126

*Exemplo:

Alo mundo em html

document.write("Alo mundo em Javascript");

Alo mundo novamente em html

127

*Meu Segundo Javascript

Alo Personalizado

var nome = prompt("Qual o seu nome?");

Minha Pgina

document.write(""+nome+", seja bem-vindo a minha pgina");

*Expresses

Conjunto de constantes, variveis, operadores, funes que resultam em um nico valor

As expresses podem ser do tipo (tipo do resultado): Aritmticas Logicas Strings Condicionais

128

*Tipos de Operadores

Aritmtico Lgico Relacional String Bit-wise Atribuio Condicional

129

130

*Operadores Aritmticos

Soma + a + b

Subtrao a b

Multiplicao * a * b

Diviso / a / b

Resto da diviso de inteiros % a % b

Incremento de uma unidade ++ ++a a++

Decremento de uma unidade a a

131

*Operadores

Atribuio Simples =

a = b + c

Composta += -= *= /= %= a += b (a = a + b)

132

*Operadores Relacionais

Equivalente == a == b

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

Diferente != a != b

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

Menor < a < b

Maior > a > b

Menor ou igual = b

O operador typeof Operador unrio Retorna o tipo atual da varivel:

number, string, boolean, object, function, undefined, null

function f() {}

var a = "texto", b = 8752, c = 2.1, d = false, e, g = Object();

document.write("A varivel a " + typeof a + "");

document.write("A varivel b " + typeof b + "");

document.write("A varivel c " + typeof c + "");

document.write("A varivel d " + typeof d + "");

document.write("A varivel e " + typeof e + "");

document.write("A varivel f " + typeof f + "");

document.write("A varivel g " + typeof g + "");

document.write("A varivel h " + typeof h + "");

133

Operadores de Manipulao de Bits

Realizam operaes em bits

134

Operador Nome Descrio

& Bitwise AND AND bit a bit

| Bitwise OR OU bit a bit

^ Bitwise XOR OU Exclusivo bit a bit

> Bitwise signed right

shift

Deslocamento para a direita mantendo o sinal

>>> Bitwise zero-fill right shift

Delocamento para a direita inserindo zeros

Operadores de comparao

Exemplo de comparao

var n =8752, s = '8752';

document.write("n == s: " + (n == s) + '');

document.write("n === s: " + (n === s) + '');

135

136

*Operaces

String Contatenao

nome = "Alexandre";sobrenome = "Meslin";nomeCompleto = nome + " " + sobrenome;

Comparao3 == "3"

Outras operaesx = "8752"; // x stringa = x +10; // a 875210b = x -10; // b 8742

137

*Converso explcita de tipos

parseInt (str) ou parseInt(str, base) Converte uma string para um nmero inteiro Exemplo:

num = "3A";x = parseInt(num); // x 3y = parseInt(num, 16); // y 58

parseFloat(str) Converte uma string em um nmero real Exemplo

z = parseFloat("3.14");

Curiosidades

Para formatar o texto de sada: toFixed() toPrecision() toExponential()

138

Ordem de PrecednciaPrecedncia Operador

1 Parnteses, chamada de funo

2 ~, -, ++, --, new, void, delete

3 *, /, %

4 +, -

5 , >>>

6 =

7 ==, !=, ===, !==

8 &

9 ^

10 |

11 &&

12 ||

13 ?:

14 =, +=, -=, *=,

15 Operador vrgula (,)139

140

Perguntas?

141

*Exerccios

Faa uma pgina que some 25 com 78 e mostre o resultado em: Uma pgina Uma janela de alerta

Formato de sada:25 + 78 = 103

142

Resposta A

Soma na Mesma Pgina

var n1 = 25;

var n2 = 78;

var res = n1 + n2;

document.write(n1, " + ", n2, " = ", res);

143

Resposta B

Soma em um alert

var n1, n2, res;

n1 = 25;

n2 = 78;

res = n1 + n2;

// o alert somente recebe um nico valor

// logo, eu preciso concatenar os diversos valores em um nico

alert(n1 + " + " + n2 + " = " + res);

144

*Exerccios

Faa uma pgina de boas vindas personalizada

145

Resposta

Pgina de Boas Vindas

var nome = prompt("Infome o seu nome: ");

document.write("Bem vindo, " + nome + "");

resto do contedo da pgina...

146

*Exerccios

Faa uma pgina para somar 2 nmeros informados pelo usurio

147

Resposta

Soma de 2 nmeros

var sN1, sN2, n1, n2, res;

sN1 = prompt("Informe o primeiro nmero");

sN2 = prompt("Informe o segundo nmero");

n1 = parseFloat(sN1);

n2 = parseFloat(sN2);

res = n1 + n2;

document.write(n1, " + ", n2, " = ", res);

148

*Exerccios

Faa uma pgina para somar 3 nmeros informados pelo usurio

149

Resposta

Soma de 3 nmeros

var sN1 = prompt("Informe o primeiro nmero");

var sN2 = prompt("Informe o segundo nmero");

var sN3 = prompt("Informe o terceiro nmero");

var n1 = parseFloat(sN1);



var res = n1 + n2 + n3;

document.write(n1, " + ", n2, " + ", n3, " = ", res);

Aula 3

Desvio Condicional Funes Sintaxe mnima de funes Funes com parmetros Eventos

150

151

*Comandos condicionais

if()

if()-else

switch()-case

152

*O comando if() Utilizado para executar determinado cdigo se a condio for verdadeira

Sintaxe:if(condio){cdigo que ser executado se a condio for verdadeira

}

OU

if(condio)UM comando que ser executado se a condio for verdadeira

153

*O comando if()

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

154

*Exemplo

Saudao

var data = new Date();

var hora = data.getHours();

if (hora12)

if (hora18) document.write("Boa noite");

O que acontece s 12h e s 18h?

155

*Comando if()-else Utilizado para executar um entre dois cdigos. O cdigo ligado ao else somente ser executado se a condio for falsa Obs.: o else no tem condio Sintaxe:

if(condio){

cdigo que ser executado se a condio for verdadeira}else{

cdigo que ser executado se a condio for falsa}

OU

if(condio)UM comando que ser executado se a condio for verdadeira

elseUM comando que ser executado se a condio for falsa

OU qualquer combinao das sintaxes anteriores

156

*Exemplo:

Saudao

var data, hora;

data = new Date();

hora = data.getHours();

if (hora

157

*O mesmo exemplo com outro formato

Saudao

var data, hora;

data = new Date();


if (hora

158

*Exemplos de if-else

Exemplos:if (estado=="RJ")

cidade = "Rio de Janeiro";

if ( hora < 12 )

{

manha = true;

document.write ("bom dia!");

}

else

{

manha = false;

document.write ("boa tarde!");

}

159

*Operadores Lgicos

Concatenam operaes lgicas && operador E

if((a > b) && (a > c))

Se a maior do que b E a maior do que c

|| operador OU if((a > b) || (a > c))

Se a maior do que b OU a maior do que c

! operador NO if(!(a > b))

Se NO a maior do que b

160

*Exemplo

Exemplos:

if ( hora >= 12 && hora < 18 )

{

manha = false;

document.write ("boa tarde!");

}

Operador Ternrio Substitui um if/else simples Use com parcimnia

if (3 > 2)

{

alert("True");

}

else

{

alert("False");

}

(3 > 2) ? alert("True") : alert("False");

161

*O Comando switch()-case

Quando necessitamos escolher uma entre duas alternativas utilizamos o comando if ou if-else.

Mas isto se torna extremamente trabalhoso quando existem vrias alternativas para se escolher. Nestes casos utiliza-se o comando switch

162

*O Comando switch()-case Sintaxe:

switch (expresso)

{

case constante1:

comando1;

case constante2:

comando2;

default:

comandoN;

}

163

Sintaxe simplificada:switch (expresso){

case constante1:comando1;break;

case constante2:comando2break


default:comandoN;

}

Um pouco mais sofisticadaswitch (expresso){


case constante2:comando2

case constante3:case constante4:

comando3;break;

default:comandoN;

}

164

*O Comando switch()-case

*Exemplo

var data;

data = new Date();

semana = data.getDay();

switch(semana)

{

case 1:

document.write("Hoje 2a feira");

break;

case 2:


break;

case 3:


break;

case 4:


break;

case 5:


break;

case 6:

document.write("Hoje sbado");

break;

case 7:

document.write("Hoje domingo");

break;

default:

document.write("Hoje no um dos dias da semana")

}

165

*Exemplo

var data;

data = new Date();

semana = data.getDay();

switch(semana)

{

case 1:

case 2:

case 3:

case 4:

case 5:

document.write("Hoje um dia da semana");

break;

case 6:

document.write("Hoje sbado");

break;

case 7:

document.write("Hoje domingo");

break;

default:

document.write("Hoje no um dos dias da semana")

}

166

167

Funes

168

*Funo

Uma funo uma poro de cdigo que resolve um problema muito especfico, parte de um problema maior (Wikipdia)

Uma funo contm cdigo que ser executado por um evento ou uma chamada explcita

Voc pode chamar uma funo de qualquer lugar de uma pgina

Funes podem ser definidas na seo ou

Para garantir que a funo j foi carregada antes de sua chamada, a funo deve ser definida na seo

169

*Definio de Funo Sintaxe:

function nomeDaFuncao(var1, var2, ..., varN){cdigo executvel

}

Os parmetros var1, var2, etc. so variveis ou valores passados para a funo

Os { e } definem o incio e o fim da funo

Nota: uma funo sem parmetros precisa dos () depois do nome

Lista de variveis, separadas por vrgula

170

*Exemplo

function mostraMensagem(){

alert("Alo mundo!");}

Mostra uma mensagem

171

*O comando return

O comando return utilizado para especificar um valor que ser retornado da funo chamada para quem a chamou

Sintaxe:return; // apenas retorna da funo

OU

return valor; // retorna um valor da funo

172

*Exemplo de uso de return

function produto(a,b){

var c;c = a * b;return c; // poderia ser return a * b;

}

Comando return

document.write(produto(4,3));

173

*Exemplo de uso de return

function produto(a,b){

var c;c = a * b;return c; // poderia ser return a * b;

}

Comando return

result = produto(4, 3);document.write(result);

174

*Ciclo de vida de uma varivel Varivel declarada dentro de uma funo

Varivel local Somente pode ser acessada dentro da funo Se a funo chamar outra funo, a varivel continua existindo, mas a funo chamada no tem acesso a ela

Podemos ter variveis locais com o mesmo nome em funes diferentes

A varivel destruda ao trmino da funo Variveis declaradas fora da funo

Variveis globais Podem ser acessada em qualquer parte do cdigo, inclusive dentro de outras funes

A varivel passa a existir depois da sua declarao e continua existindo at a pgina ser fechada

*Exemplo do uso de var

function executaFuncao()

{

var numero = 8752;

document.write("O valor do nmero no incio

da funo " + numero + "");

numero += 2;

document.write("O valor do nmero no final

da funo " + numero + "");

}

var numero = 5;

document.write("O valor inicial do nmero

" + numero + "");

numero++;

document.write("O valor do nmero antes da

chamada da funo " + numero + "");

executaFuncao()

document.write("O valor do nmero depois da


function executaFuncao()

{

numero = 8752;

document.write("O valor do nmero

no incio da funo " + numero + "");

numero += 2;

document.write("O valor do nmero

no final da funo " + numero + "");

}

var numero = 5;

document.write("O valor inicial do nmero

" + numero + "");

numero++;

document.write("O valor do nmero antes da


executaFuncao()

document.write("O valor do nmero depois da


175

176

*Funes Predefinidas isNaN (valor)

Retorna "true" se o valor no for numrico Exemplo:

x =prompt("Entre um numero:", " ");if (isNaN(x))

window.alert("Valor no numrico !");

window.confirm (pergunta) Abre uma janela para pedir uma string ao usurio Exemplo:

if (confirm("Quer realmente sair da pgina ?"))alert("Ento adeus!");

177

Eventos

*Eventos

Eventos so aes que ocorrem como resultado de atividades do browser ou interaes do usurio com a pgina Web Uso do mouse clique, duplo clique, movimento,

Entrada de dados apertar uma tecla, digitar, soltar uma tecla,

Carga de uma pgina ou figura, Envio de formulrio

178

*Manipuladores de Eventos

Quando um evento ocorre, o segmento de cdigo que executado em resposta ao evento especfico chamado de manipulador do evento (handler do evento)

Formato geral:

179

*Alguns Eventos Definidos em Javascript

Property Description DOM

onclick The event occurs when the user clicks on an element

2

ondblclick The event occurs when the user double-clicks on an element

2

onmousedown The event occurs when a user presses a mouse button over an element

2

onmousemove The event occurs when the pointer is moving while it is over an element

2

onmouseover The event occurs when the pointer is moved onto an element

2

onmouseout The event occurs when a user moves the mouse pointer out of an element

2

onmouseup The event occurs when a user releases a mouse button over an element

2

180

Mouse Events


181

Attribute Description DOM

onkeydown The event occurs when the user is pressing a key

2

onkeypress The event occurs when the user presses a key

2

onkeyup The event occurs when the user releases a key

2

Keyboard Events


182


onabort The event occurs when an image is stopped from loading before completely loaded (for )

2

onerror The event occurs when an image does not load properly (for , and )

onload The event occurs when a document, frameset, or has been loaded

2

onresize The event occurs when a document view is resized

2

onscroll The event occurs when a document view is scrolled

2

onunload The event occurs once a page has unloaded (for and )

2

Frame/Object Events


183


onblur The event occurs when a form element loses focus

2

onchange The event occurs when the content of a form element, the selection, or the checked state have changed (for , , and )

2

onfocus The event occurs when an element gets focus (for , , , textarea>, and )

2

onreset The event occurs when a form is reset 2

onselect The event occurs when a user selects some text (for and )

2

onsubmit The event occurs when a form is submitted 2

Form Events

184

*Um pouco sobre eventos...

Insert title here

Cdigo Javascript(sem as tags script)

*Mais um pouco sobre eventos

Exemplo de evento onclick com funo

function advertencia()

{

return confirm("Aluno de Javascript do Alexandre?");

}

Acesso somente para alunos de Javascript

185

*Mais um pouco ainda sobre eventos

Exemplo de evento onload

Exemplo de eventos onload e onunload.

186

*Eventos e Formulrios

Exemplo de evento onclick com formulrio

function naoClique()

{

alert('Eu falei para no clicar!');

}

187

188

*Um pouco sobre objetos

function funcao(){

alert(document.formulario.texto.value);}

Insert title here

O documento tem um formulrio O formulrio tem um campo texto O campo texto tem um valor

189

*Explicando... Observe a construo HTML:

Neste caso, no existe a varivel texto, apenas o campo chamado texto do formulrio, ou seja, fazer algo do tipo:alert(texto)

no possvel, mas podemos escrever:alert(document.formulario.texto.value) Escreve o valor (value) do campo chamado texto que est no chamado formulario dentro do documento (document)

Outros atributos de campo (alm de value)

document.formulario.texto.value

Propriedade Descrio

defaultvalue O valor inicialmente mostrado no campo

form Referencia o formulrio onde o campo est

maxlength Nmero mximo de caracteres permitidos no campo

name O nome do campo

size O tamanho do campo em caracteres (aproximadamente)

type O tipo do campo (button, checkbox, text, hidden, etc.)

value O valor atual do campo190

191

Continuao

Para podermos fazer alguma operao com uma varivel devemos copiar o campo chamado texto para uma varivel.

Exemplo:variavel = document.formulario.texto.value

function pessoa()

{

// converte o campo nomeBastimo para varivel nome

var nome = document.familia.nomeBatismo.value;

// converte o campo nomeFamilia para varivel sobrenome

var sobrenome = document.familia.nomeFamilia.value;

// escreve uma string constante: "Voc "

// concatenada com uma string varivel: nome

// concatenada com uma string constante: " "

// concatenada com uma string varivel: sobrenome

alert("Voc " + nome + " " + sobrenome);

}

Nome & Sobrenome

Nome:

Sobrenome:

Exemplo (escreve nom

e e sobrenome)

Exemplo campo texto ou password

Propriedade Descrio

defaultValue O valor inicialmente mostrado

form Referncia ao formulrio

maxlength Nmero mximo de caracteres

name Nome do campo

size Tamanho do campo em caracteres

type Tipo do campo

Value O valor atual do campo

Mtodo Descrio

blur() Remove o foco do campo

focus() Coloca o campo em foco

select() Seleciona o campo

193

Exemplo campo text ou password

Obtendo o valor de um campo texto de um formulrio

function mostraValor()

{

alert(document.formulario.campoTexto.value);

}

Campo texto:

194

Exemplo de campo checkbox

Propriedade Descrio

checked Valor booleano indicando se o campo est atualmente selecionado

defaultChecked Valor booleano indicando se o campo selecionado por default

name Nome do campo

value Valor do campo

195

Exemplo de campo checkbox

Obtendo o valor de um campo radio de um formulrio


{

var i;

for(i=0; i

Exemplo campo select (simples ou mltiplo)

Propriedade Descrio

length Nmero de opes na lista

name Nome da lista

options Lista de opes

selectedIndex ndice do item selecionado da lista

defaultSelected Valor booleano indicando se o item selecionado por default

index O valor do ndice da opo

selected Valor booleano indicando se o itemest selecionado

text O texto associado opo

value O valor associado opo

197

Exemplo campo select (simples ou mltiplo)

Obtendo o valor de um campo select de um formulrio


{

var i;

for(i=0; i

199

Perguntas?

200

Exerccios

*Pura matemtica

Considere a funo f(x) = 2x + 5

Calcule manualmente: f(1) f(8) f(7) f(5) f(2)

201

*Pura matemtica

Considere a funo f(x, y) = 2x + 5y + 7

Calcule manualmente: f(1, 8) f(8, 7) f(7, 5) f(5, 2) f(2, 0)

202

*Pura matemtica

Considere a funo f(x) = 2x + 5

Calcule manualmente f(x) para x variando de 1 at 5

203

*Pura matemtica

Considere a funo f(x, y) = 2x + 5y + 7

Calcule manualmente f(x, y) para x variando de 1 at 3 e y variando de 5 at 8

204

*Exerccio

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

205

*Exerccio

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

206

207

*Exerccios

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

208

Resposta:

Exercicios\Evento\Mensagem.html

209

*Exerccios

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

210

Resposta:

function sauda()

{

var data, hora;

data = new Date();


if(hora

211

*Exerccios

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

212

Resposta:

function opera()

{

var num1, num2, resultado;

num1 = parseFloat(document.calculadora.op1.value);


resultado = num1 + num2;

document.write("A soma de " + num1 + " com " + num2 + " " + resultado);

}

Exercicios\Evento\Soma.html

Operando 1:

Operando 2:

213

Outra resposta:

function opera(sNum1, sNum2)

{

var num1 = parseFloat(sNum1);


var resultado = num1 + num2;

document.write("A soma de " + num1 + " com " + num2 + " " + resultado);

}

Exercicios\Evento\Soma2.html

Operando 1:

Operando 2:

215

*Desafio

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

216

Resposta:

function opera()

{

var num1, num2, operacao;



operacao = document.calculadora.operador.value;

if(operacao == '+') resultado = num1 + num2;

else if(operacao == '-') resultado = num1 - num2;

else if(operacao == '*') resultado = num1 * num2;

else resultado = num1 / num2;

document.calculadora.result.value = resultado;

}

Exercicios\Evento\Calculadora2.html

4 Operaes

+

-

*

/

217

Outra resposta:

function opera(sNum1, sNum2, operacao)

{



if(operacao == '+') resultado = num1 + num2;

else if(operacao == '-') resultado = num1 - num2;

else if(operacao == '*') resultado = num1 * num2;

else resultado = num1 / num2;

document.calculadora.result.value = resultado;

}

Exercicios\Evento\Calculadora.html

4 Operaes

+

-

*

/

*Exerccios Faa uma pgina HTML que leia o valor de 2 nmeros fracionrios atravs de comandos prompt. A pgina dever informar o valor do maior nmero lido.

Faa 4 verses diferentes desta pgina:1) Utilize uma funo que leia os 2 nmeros e

escreva o maior.2) Utilize uma funo que leia os 2 nmeros e

retorne o maior (esta funo no escreva nada).3) Utilize uma funo que receba os 2 nmeros e

escreva o maior (esta funo no l nada).4) Utilize uma funo que receba os 2 nmeros e

retorne o maior (esta funo no l e no escreve nada).

218

*Exerccios Complete a pgina HTML a seguir:

Quadrado

var i = parseFloat(prompt("Informe um nmero"));

var q = quad (i);

alert(i + " ao quadrado = " + q);

Modifique a sua pgina para no utilizar a varivel q

219

*Exerccios Complete a pgina HTML a seguir:

Exerccio de Funo

var n1, n2, n3, aux, npares, tot;

n1 = parseFloat(prompt("Entre com o primeiro nmero"));

n2 = parseFloat(prompt("Entre com o o segundo nmero"));

n3 = parseFloat(prompt("Entre com o terceiro nmero"));

aux = maior (n1, n2);

alert("O maior numero lido = " + maior(aux, n3));

alert("Media dos numeros lidos = " + media (n1, n2, n3));

npares = par(n1) + par(n2) + par(n3);

alert("Total de numeros pares lidos = " + npares);

tot = media(n1, n2, n3);

alert("Total de valores acima da media = " + total(n1, n2, n3, tot));

220

*Exerccios

Faa uma pgina HTML que leia o valor de 2 nmeros fracionrios atravs de comandos prompt. A pgina dever mostrar os 2 valores em ordem crescente.

Crie uma nova verso para 3 nmeros

Desafio: crie uma verso para CINCO nmeros!

221

*Exerccios

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

222

*Exerccios

Defina uma funo chamada maiorDe3() que recebe 3 nmeros como parmetros e retorna o maior deles.

Faa uma pgina para testar a sua funo

223

224

Aula 4

Lao while Lao for Comando break Comando continue

*Repetio

Permite a execuo repetida de um ou mais comandos Repetio determinada Repetio indeterminada

225

226

*Laos while

Permite repetir um comando ou bloco enquanto uma condio for verdadeira

Forma geral:

while(condio)

{

comandos;

}

Condio

Comandos

Verdadeira

Falsa

227

*Exemplo

Exemplo de while()

Repetio com while()

var i = 1;

while(i

228

*Laos do while

Repete um bloco de comandos enquanto uma condio for verdadeira.

Teste da condio realizado no final da iterao.

Comandos so executados pelo menos uma vez

Sintaxe:do

{

comandos;

}

while (condio);

Comandos

CondioVerdadeira

Falsa

229

*Exemplo:

Exemplo de do-while()

Repetio com do-while()

var i = 0;

do

{

document.write (i + "");

i++;

}

while ( i

230

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

Exemplo de

while()

Repetio com

while()

var i = 8752;while ( i

231

*Laos for()

Repete um comando ou bloco controlado por uma varivel.

Forma geral:

for (atribuio;

condio;

incremento)

{

comandos;

}

seguinte;

atribuio

condio

comandos

V

incremento

seguinte

F

232

*Exemplo:

Exemplo de for

Exemplo de for()

for ( i = 0; i < 5; i++ )


233

Separador de comandos no for()

A vrgula funciona como separador de comandos na atribuio e no incremento

Sintaxe:

for (inic1, inic2, inic3, ...; condio;atual1, atual2, atual3, ...)

{

comandos;

}

234

Exemplo:

Exemplo de for com vrgula

document.write ("Tabela de Fatoriais");

for ( i = 1, fat = 1; i < 6; i++, fat *= i )

document.write(i, "! = ", fat, "");

235

*Comandos break e continue

Permitem um controle adicional sobre os laos de repetio

break; Pare a repetio j!

continue; Passe para a prxima iterao do lao!

236

*Exemplo de uso de break:

Exemplo de for

Exemplo de for()

for(i = 0; i < 5; i++)

{

if(i == 2) break;


}

237

*Exemplo de uso de continue:

Exemplo de for

Exemplo de for()

for(i = 0; i < 5; i++)

{

if(i == 2) continue;


}

Exemplo de for-in

Cria um ndice para percorrer um array Sintaxe:

for (contador in objeto){

comandos;}

238

Exemplo de for-in

Exemplo de for-in

var diaSemana= new Array();

diaSemana[0] = "domingo";

diaSemana[1] = "segunda-feira";

diaSemana[2] = "tera-feira";

diaSemana[3] = "quarta-feira";

diaSemana[4] = "quinta-feira";

diaSemana[5] = "sexta-feira";

diaSemana[6] = "sbado";

for (var i in diaSemana)

document.write(i + " " + diaSemana[i] + "");

239

240

Perguntas?

241

Exerccios

242

*Exerccios

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

243

Sugesto de Soluo

Nmeros de 0 at 10

for(i=0; i

244

*Exerccios

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

245

Sugesto de Soluo

Nmeros Pares

for(i=0; i

246

*Exerccios

Faa um programa que imprima todos os nmeros pares de um intervalo Faa uma verso lendo os dados de um formulrio HTML

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

247

Sugesto de Soluo do Item A

function lista()

{

var inicio = parseInt(document.dados.inicio.value);

if(inicio%2 != 0) inicio++;

var fim = parseInt(document.dados.fim.value);

for(i=inicio; i

248

Sugesto de Soluo do Item B

Pares em um intervalo com formulrio

var inicio, fim;

inicio = parseInt(prompt("Inicio"));

if(inicio%2 != 0) inicio++;

fim = parseInt(prompt("Fim"));

for(i=inicio; i

249

*Exerccios

Faa um programa que imprima a tabuada de um nmero lido Faa uma verso lendo de um formulrio HTML Faa uma verso lendo de um prompt()

250


function tabuada()

{

var valor, i;

valor = parseInt(document.dados.valor.value);

for(i=0; i

251


Pares em um intervalo com formulrio

var valor = parseInt(prompt("Tabuada de..."));

for(i=0; i

*Calculadora com Repetio

Faa uma pgina HTML que receba do usurio 2 nmeros reais atravs de um prompt() e mostre a sua soma.

Aps mostrar a soma, a pgina dever perguntar se o usurio deseja somar novamente atravs do mtodo confirm()

252

253

*Exerccios

Faa um programa que imprima o fatorial de um nmero lido Faa uma verso lendo de um formulrio HTML Faa uma verso lendo de um prompt()

254


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

}

Fatorial

Fatorial:

255


Fatorial

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

256

*Desafios

Faa um programa que imprima TODA a tabuada

257

Sugesto de Soluo

Insert title here

Tabuada

X

for(i=1; i

258

*Desafios

Faa um programa que imprima um tabuleiro de xadrez

259

Sugesto de Soluo

Tabuleiro de Xadrez

for(i=0; i

260

*Grande desafio

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

261

Sugesto de Soluo

Calendrio

Calendrio

var mes = new Array(12);var ndias = new Array(12);mes[0]="Janeiro";mes[1]="Fevereiro";mes[2]="Maro";mes[3]="Abril";mes[4]="Maio";mes[5]="Junho";mes[6]="Julho";mes[7]="Agosto";mes[8]="Setembro";mes[9]="Outubro";mes[10]="Novembro";mes[11]="Dezembro";var data = new Date();document.write("" + mes[data.getMonth()] + " de " + data.getYear() + "");var proximoMes = new Date();if(data.getMonth() == 11)

proximoMes.setFullYear(data.getYear() + 1, 0, 1);else

proximoMes.setFullYear(data.getYear(), data.getMonth() +1, 1);

DomSegTerQuaQuiSexSb

var agora = new Date();var diaMes = 1;do{

document.write("");for(i=0; i

*Enorme Desafio: Jogo da Senha Faa o Jogo da Senha Funcionamento:

2 jogadores Jogador 1:

O jogador 1 informa um nmero entre 0 e 9, inclusive os extremos. A leitura realizada atravs de um campo do tipo senha.

O programa no aceita nmeros invlidos. Neste caso, pede para entrar com o nmero novamente

O jogador 1 informa o nmero mximo de tentativas do jogador 2 Jogador 2:

Chuta um nmero Se for errado ou invlido, perde a chance e chuta novamente Se o nmero for vlido mas errado, informado se o chute foi muito grande ou pequeno.

Se o chute estiver 1 unidade de distncia da senha, o usurio informado que o chute foi quente, caso contrrio, frio (o jogador 2 no informado se o nmero maior ou menor que a senha)

262

*Outro desafio:

Faa uma funo que receba um nmero inteiro como parmetro e retorne verdadeiro se o nmero for primo, caso contrrio, retorne falso

Faa um script que informe os N primeiros nmeros primos.

263

264

Aula 5 - Objetos

265

*Introduo

Javascript uma linguagem de programao orientada a objetos (OO)

Uma linguagem de programao OO permite a definio de novos objetos e novos tipos de dados

266

*Programao OO Podemos utilizar os objetos j definidos na linguagem ou criar novos objetos

Comearemos utilizando objetos pr-definidos na linguagem.

Um objeto apenas um tipo especial de dado. Um objeto possui propriedades e mtodos.

Um objeto uma coisa, qualquer coisa, como uma coisa no mundo real Ex.: carros, pssaros, dinheiro, livros, etc.

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

267

*Propriedades So os valores associados a um objeto

No exemplo abaixo usamos a propriedade length do objeto String para retornar a quantidade de caracteres de um texto

Exemplo:

var txt="Oi Turma!";document.write(txt.length);

O cdigo acima ter como sada o valor 9

268

*Mtodos So as aes que podem ser executadas por um objeto

No exemplo abaixo estamos usando o mtodo UpperCase() o objeto String para exibir o texto em letras maisculas

Exemplo

var str="Oi Turma!";document.write(str.toUpperCase());

O cdigo acima ter como sada o texto OI TURMA!

*Objeto

Em resumo, um objeto um conjunto de: Propriedades Mtodos

269

ClassevarA varBvarC varD

FuncA ()

FuncC ()

FuncB ()

FuncD ()

*Criando uma Instncia de um Objeto

Voc pode usar o operador new para criar instncias de objetos de uma classe em particularvariavel = new tipoDoObjeto(parametros);

tipoDoObjeto() chamado construtor

Ex.: Date um objeto pr-definido Criando um objeto

objA = new Date(); Criando um objeto com uma data pr-definida

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

271

*Objeto String

Permite a manipulao de strings (textos) ou de partes de um texto

Esta manipulao pode ser feita atravs da chamada de mtodos

Existem vrios mtodos pr-definidos para o objeto String

272

*Exemplo utilizando estilos no texto a ser exibido

txt="Oi Turma!";document.write("Big: " + txt.big() + "");document.write("Small: " + txt.small() + "");

document.write("Bold: " + txt.bold() + "");document.write("Italic: " + txt.italics() + "");

document.write("Blink: " + txt.blink() + "");document.write("Fixed: " + txt.fixed() + "");document.write("Strike: " + txt.strike() + "");

document.write("Fontcolor: " + txt.fontcolor("Red") + "");document.write("Fontsize: " + txt.fontsize(16) + "");

document.write("Lowercase: " + txt.toLowerCase() + "");document.write("Uppercase: " + txt.toUpperCase() + "");

document.write("Subscript: " + txt.sub() + "");document.write("Superscript: " + txt.sup() + "");

document.write("Link: " + txt.link("http://www.w3schools.com") + "");

273

*Objeto String: mtodo indexOf() Exemplo usando o mtodo indexOf() para retornar a posio da primeira ocorrncia de um texto especfico em um texto

var str="Oi Turma!";document.write(str.indexOf("Oi") + "");document.write(str.indexOf("Turma") + "");document.write(str.indexOf("turma"));

O cdigo acima ter como sada os valores:03-1

*Objeto String: mtodo charAt() O mtodo charAt(posio) retorna o caracter na posio informada.

var texto = "Este um texto";var posicao = 8;

var caracter = texto.charAt(posicao);document.write("O caracter que est na posio " + posicao + " " + caracter + "");

document.write("Ou seja, " + texto[posicao]);

274

275

Objeto String: mtodo match() Exemplo usando o mtodo match() para procurar um texto especfico

dentro de um texto e caso encontre retorna o valor do texto

var str="Oi Turma!";document.write(str.match("turma") + "");document.write(str.match("Turma") + "");document.write(str.match("turna") + "");document.write(str.match("Turma!"));

O exemplo acima ter como sada:nullTurmanullTurma!

276

Objeto String: mtodo replace() Exemplo usando o mtodo replace() para substituir alguns caracteres por outros em um texto

var str="Oi Turma!";document.write(str.replace(/Turma/,"Pessoal"));document.write(str);

O resultado da pgina ser:Oi PessoalOi Turma!

*Objeto String - Propriedades

277

*Objeto String - Mtodos

278

279

*Objeto Array

Um objeto Array utilizado para armazenar vrios valores em uma nica varivel

Todos os valores armazenados em um array so de um mesmo tipo

Necessita de um ndice para podermos nos referenciarmos a um dos dados armazenados no array

O ndice do array um nmero inteiro. O primeiro ndice de um array sempre o 0 (zero).

280

*Objeto Array: criao Exemplo criando um objeto Array

var diaSemana= new Array();diaSemana[0] = "domingo";diaSemana[1] = "segunda-feira";diaSemana[2] = "tera-feira";diaSemana[3] = "quarta-feira";diaSemana[4] = "quinta-feira";diaSemana[5] = "sexta-feira";diaSemana[6] = "sbado";

for (i=0;i

281

*Objeto Array: mtodo sort() Exemplo utilizando o mtodo sort() que ordena o array em ordem crescente

var estado = new Array(5);estado [0] = "Rio de Janeiro";estado [1] = "Minas Gerais";estado [2] = "Paran";estado [3] = "Bahia";estado [4] = "So Paulo";

document.write(estado + "");document.write(estado .sort());

*Outro exemplo de criao de Array

Nomes dos Estados

var estado = ["Rio de Janeiro", "Minas Gerais", "Paran", "Bahia", "So Paulo"];

document.write(estado + "");

document.write(estado.sort() + "");

document.write(estado.reverse() + "");

282

Salada de Frutas

Salada de Frutas

var vetor = new Array();

vetor[0] = "indice 0";

vetor[1] = 8752;

vetor.campo2 = "Campo 2";

vetor["campo3"] ="Campo 3";

document.write(vetor[0] + "");

document.write(vetor[1] + "");

document.write(vetor.campo2 + "");

document.write(vetor.campo3 + "");

document.write(vetor["campo2"] + "");

document.write(vetor["campo3"] + "");

283

284

*Referncia completa do objeto array

Method Description

concat() Joins two or more arrays and returns the result

join() Puts all the elements of an array into a string. The elements are separated by a specified delimiter

pop() Removes and returns the last element of an array

push() Adds one or more elements to the end of an array and returns the new length

reverse() Reverses the order of the elements in an array

shift() Removes and returns the first element of an array

slice() Returns selected elements from an existing array

sort() Sorts the elements of an array

splice() Removes and adds new elements to an array

toSource() Represents the source code of an object

toString() Converts an array to a string and returns the result

unshift() Adds one or more elements to the beginning of an array and returns the new length

valueOf() Returns the primitive value of an Array object

285

*Objeto Date

Permite a utilizao de datas e horas

Criando um objeto data:var minhaData = new Date();

Obs.: o objeto data possuir automaticamente a data e a hora atual como valor inicial

286

*Objeto Date: mtodo Date() Exemplo usando o mtodo Date() para obteno da data e hora corrente

document.write(Date());

287

*Objeto Date: mtodo Date() Exemplo usando o mtodo Date() e um array para exibir o dia da semana

var data=new Date();var diaSemana=new Array(7);diaSemana[0]="domingo";diaSemana[1]="segunda-feira";diaSemana[2]="tera-feira";diaSemana[3]="quarta-feira";diaSemana[4]="quinta-feira";diaSemana[5]="sexta-feira";diaSemana[6]="sbado";

document.write("Hoje " + diaSemana[data.getDay()]);

288

*Configurando datas Criar um objeto data representado o dia 28 de agosto de 1970

Configurando a Data

var data = new Date();// 27 de agosto de 1970data.setFullYear(1970, 7, 27);document.write("Data: " + data);

289

*Comparando Duas Datas

Comparao de Datas

var minhaData = new Date();minhaData.setFullYear(1970, 6, 27);var hoje = new Date();

if (hoje > minhaData)alert ("Hoje depois de 27/07/1970");

elsealert ("Hoje antes de 27/07/1970");

290

*Referncia do Objeto Date

Method Description

Date() Returns today's date and time

getDate() Returns the day of the month from a Date object (from 1-31)

getDay() Returns the day of the week from a Date object (from 0-6)

getFullYear() Returns the year, as a four-digit number, from a Date object

getHours() Returns the hour of a Date object (from 0-23)

getMilliseconds() Returns the milliseconds of a Date object (from 0-999)

getMinutes() Returns the minutes of a Date object (from 0-59)

getMonth() Returns the month from a Date object (from 0-11)

getSeconds() Returns the seconds of a Date object (from 0-59)

getTime() Returns the number of milliseconds since midnight Jan 1, 1970

getTimezoneOffset() Returns the difference in minutes between local time and

Greenwich Mean Time (GMT)

getUTCDate() Returns the day of the month from a Date object according to

universal time (from 1-31)

getUTCDay() Returns the day of the week from a Date object according to

universal time (from 0-6)

291


Method Description

getUTCMonth() Returns the month from a Date object according to universal

time (from 0-11)

getUTCFullYear() Returns the four-digit year from a Date object according to

universal time

getUTCHours() Returns the hour of a Date object according to universal time

(from 0-23)

getUTCMinutes() Returns the minutes of a Date object according to universal

time (from 0-59)

getUTCSeconds() Returns the seconds of a Date object according to universal

time (from 0-59)

getUTCMilliseconds() Returns the milliseconds of a Date object according to universal time (from 0-999)

getYear() Returns the year, as a two-digit or a three/four-digit number, depending on the browser. Use getFullYear() instead !!

parse() Takes a date string and returns the number of milliseconds since midnight of January 1, 1970

setDate() Sets the day of the month in a Date object (from 1-31)

setFullYear() Sets the year in a Date object (four digits)

setHours() Sets the hour in a Date object (from 0-23)

setMilliseconds() Sets the milliseconds in a Date object (from 0-999)

setMinutes() Set the minutes in a Date object (from 0-59)

292


Method Description

setMonth() Sets the month in a Date object (from 0-11)

setSeconds() Sets the seconds in a Date object (from 0-59)

setTime() Calculates a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970

setUTCDate() Sets the day of the month in a Date object according to universal time (from 1-31)

setUTCMonth() Sets the month in a Date object according to universal time

(from 0-11)

setUTCFullYear() Sets the year in a Date object according to universal time (four

digits)

setUTCHours() Sets the hour in a Date object according to universal time

(from 0-23)

setUTCMinutes() Set the minutes in a Date object according to universal time

(from 0-59)

setUTCSeconds() Set the seconds in a Date object according to universal time

(from 0-59)

setUTCMilliseconds() Sets the milliseconds in a Date object according to universal

time (from 0-999)

setYear() Sets the year in the Date object (two or four digits). Use

setFullYear() instead !!

293


Method Description

toDateString() Returns the date portion of a Date object in readable form

toGMTString() Converts a Date object, according to Greenwich time, to a string. Use toUTCString() instead !!

toLocaleDateString() Converts a Date object, according to local time, to a string and returns the date portion

toLocaleTimeString() Converts a Date object, according to local time, to a string and returns the time portion

toLocaleString() Converts a Date object, according to local time, to a string

toSource() Represents the source code of an object

toString() Converts a Date object to a string

toTimeString() Returns the time portion of a Date object in readable form

toUTCString() Converts a Date object, according to universal time, to a string

UTC() Takes a date and returns the number of milliseconds since midnight of January 1, 1970 according to universal time

valueOf() Returns the primitive value of a Date object

294

Perguntas?

295

Exerccios

*Data de Hoje

Faa uma pgina HTML que mostre a data de hoje no formato:

Quinta-feira, 25 de setembro de 2013

296

*Data de Nascimento

Faa uma pgina que pergunte ao usurio os nmeros do dia, do ms e do ano do nascimento dele.

Informe a data completa, incluindo o dia da semana, por extenso do nascimento do usurio

297

*Exerccios

Faa uma pgina com um formulrio com um campo de e-mail e um boto.

O usurio dever digitar o seu endereo de e-mail e a pgina dever mostrar o domnio do e-mail do usurio. Dicas:

O mtodo de string chamado de indexOf(texto) devolve a primeira ocorrncia de texto dentro da string

A propriedade de string chamada de length equivale ao nmero de caracteres da string

O mtodo de string chamado de substring(incio, fim) retorna uma parte da string

299

300

*Exerccios

Fazer uma pgina HTML que informe qual o browser que o usurio est utilizando. Dica: utilize a propriedade appName do objeto navigator.

Informe se o browser : MS Internet Explorer Mozila Firefox Apple Safari Google Chrome Opera Outros

301

*Exerccios

Fazer um programa em javascript que leia duas strings e monte uma pgina indicando a posio de todas as ocorrncias da segunda string na primeira.

Exemplo: Primeira string: Este um texto que contm um texto com a palavra texto

Segunda string: texto Resultado: 10 30 50

302

*Exerccios

Fazer uma pgina que cada vez que recarregada exibe um banner escolhido aleatoriamente. Desta vez, utilize um vetor de nomes de figuras. Dica:

Para obter um nmero aleatrio entre 0 e 4, utilize parseInt(Math.random()*5)

Coloque o endereo das figuras em um array de strings

Obs.: Utilize pelo menos 5 figuras diferentes.

303

*Exerccios

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

*Exerccios

Escreva uma funo que recebe um caracter e retorna verdadeiro (true) se for uma vogal, falso (false) caso contrrio.

Faa uma pgina HTML para testar a sua funo

304

*Exerccios

Defina uma funo soma() e uma funo multiplica() que soma e multiplica, respectivamente, todos os numeros em um vetor (array).

Por exemplo: soma([1,2,3,4]) deve retornar 10 multiplica([1,2,3,4]) deve retornar 24

Faa uma pgina HTML para testar a suafuno.

305

*Exerccios

Defina uma funo reverso() que inverta uma string. Por exemplo, reverso("um teste") deve retornar "etset mu"

Faa uma pgina HTML para testar a sua funo

306

*Exerccios

Escreva uma funo chamada achaAMaiorPalavra() que recebe um vetor de palavras e retorna a maior palavra.

Faa uma pgina HTML para testar a sua funo.

307

*Exerccios

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

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

308

309

Aula 6 - Mais Objetos

310

*Objetos do browser

O navegador cria automaticamente uma hierarquia de objetos refletindo alguns elementos inseridos na pgina.

Os atributos da tag viram propriedades do objeto.

Algumas propriedades podem ter seu valor modificado.

O navegador mantm a coerncia entre o valor da propriedade e o que est sendo visualizado pelo usurio.

311

*Hierarquia de Objetos JavaScript navigator

window frames [ ] document

forms [ ] elements [ ] : button, checkbox, radio, text, textarea...

options [ ] (quando o elemento um select) links [ ] anchors [ ] images [ ]

history location

312

*Pgina exemplo

images[0]

forms[0]

images[1]

elements[0]

elements[1]

elements[2]

links[0]

links[1]

313

*Pgina exemplo

Home Page

Nome:

e-mail:

Link para meu

siteLink para

outro site

document.write(document.forms[0].elements[0].value +

'');document.write(document.forms[0].elements[1].value +

'');document.write(document.links[0] + '');document.write(document.links[1] + '');

Hierarquia de Objetos DOM

314

*O Objeto window o objeto de mais alto nvel na hierarquia de objetos do browser em Javascript

o objeto default

Criado automaticamente quando a pgina carregada

Como objeto default, pode ser omitido window.document.write(texto); document.write(texto);

Cada janela possui um objeto window

Inclui vrios mtodos e propriedades https://developer.mozilla.org/en-US/docs/Web/API/Window

315

*Objeto window

Escreve na barra de status

Coloca uma mensagem em uma barra de status

window.status = Modificando a barra de status";

Veja uma mensagem na barra de status.

316

A barra de status tem que ser habilitada

317

*Descobrindo o tipo de browser

Algumas coisas no funcionam em determinados browsers

Algumas coisas devem ser escritas de forma diferentes em diferentes browsers para obtermos o mesmo efeito

Para detectarmos o tipo de browser, utilizamos o objeto navigator

318

*Objeto navigator

Objeto navigator Permite configurar as aplicaes para navegadores diferentes

Propriedades: appCodeName appName appVersion platform language (no explorer userLanguage e systemLanguage)

319

*Objeto navigator

Tipo de Browser

var browser = navigator.appName;var b_versao = navigator.appVersion;var versao = parseFloat(b_versao);

document.write("Browser: " + browser + "");document.write("Verso: " + versao + "");

320

*Alguns detalhes do objeto navigator

document.write ("Browser: "+ navigator.appName + "");document.write ("Veso: " + navigator.appVersion + "");document.write ("Nome do cdigo: " + navigator.appCodeName + "");document.write ("Altura: " + navigator.availHeight + "");document.write ("Largura: " + navigator.availWidth + "");document.write ("Nmero de cores: " + navigator.colorDepth + "");document.write ("Suporte a cookies: " + navigator.cookieEnabled + "");document.write ("Altura: " + navigator.height + "");document.write ("Plataforma: " + navigator.platform + "");document.write ("Agente: " + navigator.userAgent + "");document.write ("Largura: " + navigator.width + "");document.write ("Suporte a Java: " + navigator.javaEnabled() + "");

*O objeto document

o objeto mais importante em uma janela ou frame

O objeto document representa um documento web ou uma pgina em um navegador

Inclui vrios mtodos e propriedades https://developer.mozilla.org/en-US/docs/Web/API/Document

321

322

*Objeto document Serve para definir/consultar caractersticas do documento corrente

Algumas Propriedades: bgcolor, fgcolor, linkcolor, vlinkcolor, alinkcolor lastModified, referrer, title, etc

Objetos contidos num documento links[ ]; anchors[ ]; forms [ ]; images[ ]; etc

Escrevendo texto num documento: write (valor1, valor2, , valorN) writeln (valor1, valor2, , valorN)

323

*Javascript e DOM HTML

Javascript pode ser utilizado para modificar o contedo ou os atributos de elementos HTML Modificando o contedo:

document.getElementById(id).innerHTML = novo HTML

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

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

324


Um teste!

325


function mudaTexto()

{

document.getElementById("paragrafo").innerHTML = "outro texto";

}

function mudaCor()

{

document.getElementById("paragrafo").style.color = "red";

}

Um teste!

326

*Modificando uma figura

327

*Modificando uma figura

function mudaComMouse()

{

document.getElementById("imagem").src="imagens/smile2.gif"

}

function mudaSemMouse()

{

document.getElementById("imagem").src="imagens/smile1.gif"

}

Criando um Objeto HTML

Adiciona um campo

function adiciona(){

var campoInput = document.createElement("input");campoInput.setAttribute("type", "button");

campoInput.setAttribute("value", "boto criado");

campoInput.setAttribute("id", "idCriado");

var formulario = document.getElementById("idFormulario");formulario.appendChild(campoInput);

}

function remove(){

var formulario = document.getElementById("idFormulario");var campoCriado = document.getElementById("idCriado");formulario.removeChild(campoCriado);

}

328

329

*Eventos HTML

Cada elemento em uma pgina HTML tem eventos que podem disparar scripts em Javascript

Exemplos de eventos: Um clique de mouse Uma pgina carregada Uma imagem carregada A Seleo de um campo de entrada em um formulrio HTML

O envio de um formulrio O acionar de uma tecla

330

*Exemplo

No clique aqui

No clique aqui

331

*Exemplo

Insert title here

function mudaPeloID(idObjeto)

{

document.getElementById(idObjeto).innerHTML="Eu falei para no clicar"

}

function mudaPeloObjeto(objeto)

{

objeto.innerHTML="Eu falei para no clicar"

}

No clique aqui

No clique aqui

332

*O Objeto this

this, como o nome est dizendo, referencia ao prprio objeto Exemplo:No clique aqui

No exemplo anterior, this faz referncia ao objeto representado por esta instncia de

333

*Exemplo

function muda(objeto){

objeto.innerHTML = "Eu falei para no clicar"}

Muda com funo

No clique aquiNo clique aqui

334

*Exemplo

Ttulo do TextoUm pargrafo

335

*Mais um exemplo

function mudaCor(nomeDoObjeto, cor){

document.getElementById(nomeDoObjeto).style.color = cor; }

Ttulo do Texto

Um pargrafoNo meu siteMuda cor do link

Navegando entre Campos objeto.focus() e objeto.blur()

Exemplo de focus() e blur()

Foco no campo a direita

336

337

Perguntas?

338

Exerccios

339

*Exerccios

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

*Exerccio

Faa uma pgina HTML contendo um formulrio com os campos: Nome: somente letras maisculas Data de nascimento: formato dd/mm/aaaa CEP: formato nnnnn-nnn CPF: formato nnn.nnn.nnn-dd

Ao selecionar o campo que ser preenchido, o usurio dever visualizar, no topo da pgina, as in

Documents

Javascript