javascript
TRANSCRIPT
-
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
linha 2, clula 1linha 2, clula 2
-
50
*Tabela com clula vazia
Uma tabela
linha 1, clula 1linha 1, clula 2
linha 2, clula 1
Outra tabela
linha 1, clula 1linha 1, clula 2
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
Correio Eletrnico Telnet FTP
-
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
Correio Eletrnico Telnet FTP
Lista ordenada
Correio Eletrnico Telnet FTP
Romano Minsculo
Este o primeiro item. Este o segundo item. Este o terceiro item.
Decimal
Este o primeiro item. Este o segundo item. Este o terceiro item.
Romano Maisculo
Este o primeiro item. Este o segundo item. Este o terceiro item.
Alfabtico minsculo
Este o primeiro item. Este o segundo item. Este o terceiro item.
Alfabtico minsculo
Este o primeiro item. Este o segundo item. Este o terceiro item.
-
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
document.write("Alo mundo!");
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
document.write("Alo mundo!");
-
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:
{
document.write("Este um cabealho");
document.write("Isto um pargrafo.");
document.write("Este outro pargrafo.");
}
-
113
*Comentrios
Finalidade: documentao
Comentrios podem ser adicionados para explicar o cdigo Javascript
Exemplo:
// escreve um cabealho
document.write("Este um cabealho");
// escreve um pargrafo
document.write("Isto um pargrafo.");
document.write("Este outro 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
*/
document.write("Este um cabealho");
document.write("Isto um pargrafo.");
document.write("Este outro pargrafo.");
-
115
*Comentrios e cdigo
Podemos utilizar comentrios para evitar que algum comando seja executado
Muito utilizado durante a fase de desenvolvimento
Exemplo:
document.write("Este um cabealho");
// document.write("Isto um pargrafo.");
document.write("Este outro 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 */
document.write("Este outro 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
*Entrada e sada de dados
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
*Entrada e sada de dados
window.prompt() prompt()
Abre uma janela para pedir uma string ao usurio
var nome=prompt("Qual o seu nome?");
-
125
*Entrada e sada de dados
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 n2 = parseFloat(sN2);
var n3 = parseFloat(sN3);
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();
hora = data.getHours();
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
case constante3:comando3;break;
default:comandoN;
}
Um pouco mais sofisticadaswitch (expresso){
case constante1:comando1;break;
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:
document.write("Hoje 3a feira");
break;
case 3:
document.write("Hoje 4a feira");
break;
case 4:
document.write("Hoje 5a feira");
break;
case 5:
document.write("Hoje 6a feira");
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
chamada da funo " + numero + "");
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
chamada da funo " + numero + "");
executaFuncao()
document.write("O valor do nmero depois da
chamada da funo " + numero + "");
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
-
*Alguns Eventos Definidos em Javascript
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
-
*Alguns Eventos Definidos em Javascript
182
Attribute Description DOM
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
-
*Alguns Eventos Definidos em Javascript
183
Attribute Description DOM
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
function mostraValor()
{
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
function mostraValor()
{
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();
hora = data.getHours();
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);
num2 = parseFloat(document.calculadora.op2.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 num2 = parseFloat(sNum2);
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;
num1 = parseFloat(document.calculadora.op1.value);
num2 = parseFloat(document.calculadora.op2.value);
operacao = document.calculadora.operador.value;
if(operacao == '+') resultado = num1 + num2;
else if(operacao == '-') resultado = num1 - num2;
else if(operacao == '*') resultado = num1 * num2;
else resultado = num1 / num2;
document.calculadora.result.value = resultado;
}
Exercicios\Evento\Calculadora2.html
4 Operaes
+
-
*
/
-
217
Outra resposta:
function opera(sNum1, sNum2, operacao)
{
var num1 = parseFloat(sNum1);
var num2 = parseFloat(sNum2);
if(operacao == '+') resultado = num1 + num2;
else if(operacao == '-') resultado = num1 - num2;
else if(operacao == '*') resultado = num1 * num2;
else resultado = num1 / num2;
document.calculadora.result.value = resultado;
}
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++ )
document.write (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;
document.write (i + "");
}
-
237
*Exemplo de uso de continue:
Exemplo de for
Exemplo de for()
for(i = 0; i < 5; i++)
{
if(i == 2) continue;
document.write (i + "");
}
-
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
Sugesto de Soluo do Item A
function tabuada()
{
var valor, i;
valor = parseInt(document.dados.valor.value);
for(i=0; i
-
251
Sugesto de Soluo do Item B
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
Sugesto de Soluo do Item A
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
Sugesto de Soluo do Item B
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
*Referncia do Objeto Date
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
*Referncia do Objeto Date
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
*Referncia do Objeto Date
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
*Javascript e DOM HTML
Um teste!
-
325
*Javascript e DOM HTML
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