Linguagem de Programação Web

Unidade B
Linguagem de Programao Web

B
Linguagem do lado cliente
Unidade B
B
Linguagem do lado cliente
27
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Introduo
Esta unidade tem por objetivo estudar uma linguagem do lado cliente, que permite incorporar s pginas
(X)HTML a possibilidade de interao com o usurio, ou seja, vai proporcionar o comportamento da
pgina.
Na unidade anterior vimos que a (X)HTML possibilita, por meio de marcaes, a estruturao do
documento com seu contedo. Porm, no conseguimos introduzir lgica em um documento usando
apenas (X)HTML, por exemplo:
se acontecer isso, ento faa aquilo...
se o usurio interagir com a pgina desta forma, ento faa aquilo...
se o usurio est utlizando o navegador tal, ento mostre tal objeto...
Por isso, precisamos conhecer a linguagem JavaScript para que possamos introduzir comportamento
aos documentos que vamos construir. Assim, a seguir abordaremos a sintaxe bsica da linguagem, como
capturar eventos, criao de funes, interao com formulrios (X)HTML, manipulao de janelas, entre
outros. Ento, mos a obra...
Introduo a linguagem JavaScript
Histrico e caractersticas
JavaScript uma linguagem criada especificamente para a Web, por isso, leve e interpretada pelo
navegador. Como j comentamos no nosso documento introdutrio, ela uma linguagem do lado cliente,
e possibilita a interao com o usurio, uma vez que possvel controlar a pgina e seus elementos.
Ateno:
No faa confuso da linguagem JavaScript com a linguagem JAVA. Elas podem at ter alguma semelhana
de sintaxe em alguns comandos, mas no vai alm disso. Vale lembrar que a linguagem JAVA permite a
criao de aplicaes para desktop, web e dispositivos, ou seja, uma plataforma mais completa.
A linguagem foi desenvolvida inicialmente pela Netscape e foi chamada de LiveScript. J no fim de 1995, a
Sun (que tambm desenvolveu o Java) se incorporou ao projeto e a linguagem foi nomeada de JavaScript.
A verso da JavaScript atual e disponvel nos navegadores a 1.5.
Vamos conhecer algumas caractersticas da linguagem JavaScript:
linguagem no-tipada:
Isto significa que as variveis no precisam ser criadas com um tipo especfico. Os tipos so associados
LINGUAGEM DO LADO CLIENTE
UNIDADE
B
28
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
com valores atribudos, no com variveis. Por exemplo, a varivel x poderia ser associada a um nmero
e mais tarde associada a uma string.
Case sensitive:
Significa dizer, que o interpretador diferencia minsculas de maisculas, tanto para variveis/funes
definidas pelo programador, como para todos os comandos da linguagem. Isso faz com que os comandos
tenham que ser escritos da mesma forma que so apresentados. Caso isso no ocorra o comando passa
a ser interpretado como uma varivel.
Baseada em objetos:
uma linguagem baseada em objetos nativos ou criados pelo programador, ou seja, trata todos os
elementos de uma pgina como objetos, que normalmente so agrupados por tipo ou finalidade.
Sintaxe
Para comear, a programao JavaScript includa dentro dos documentos (X)HTML, porm precisamos
indicar que estamos programando em JavaScript. Para isso, identifica-se da seguinte forma:
<script>
comandos...
</script>
Tudo que for escrito entre o <script></script> ser considerado programao JavaScript. Porm,
recomenda-se utilizar o atributo type que define o tipo de contedo do script. Ficando assim:
<script type=text/javascript>
comandos...
</script>
Outro forma gerar um documento com a programao JavaScript a parte e fazer referncia a este
arquivo. Para tanto se utiliza o atributo src. Isso bastante comum e at recomendado. Veja o exemplo
abaixo.
<script type=text/javascript src=js/funcoes.js>
</script>
Neste caso s vai a referncia ao arquivo e o elemento fechado. Veja que o padro para extenso de
arquivos que contenham programao JavaScript js. Tambm recomendado que se crie uma pasta
especfica para estes arquivos.
Alm disso, importante observar que existe uma padronizao quanto a incluso da programao
JavaScript no documento. A conveno especifica que o elemento script deva estar dentro do cabealho
do documento. Veja na figura B1.
29
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Comentrios
A conveno JavaScript para comentrios apresentada abaixo:
Tudo o que est escrito entre o // e o fim da linha ser ignorado.
// comentrio de linha
Tambm possvel incluir comentrios em diversas linhas como abaixo:
/* comentrio em
diversas linhas */
Ateno:
No confundir os comentrios Javascript e os comentrios (X)HTML (<!comentrio -->).
Dicas:
Faa uso dos comentrios ao longo da sua programao, isso pode ajudar na manuteno posterior do
cdigo e ainda faz voc compreender melhor os recursos da linguagem.
Variveis
Trabalhar com variveis na linguagem JavaScript vai parecer mais fcil que outras linguagens, pois no
necessrio declarar o tipo da varivel. Para fazer a declarao use a palavra var. O nome da varivel pode
ser de qualquer tamanho, conter nmeros, dgitos e underlines (_). Exemplos:
<script type=text/javascript>
var nome;
var preco_unitario;
var valor1;
var email = aaaa@teste.com.br;
30
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
</script>
A varivel assumir um tipo de acordo com o valor que lhe for atribudo. Cabe ressaltar que a palavra var
opcional, porm altamente recomendado que faa uso na declarao de forma a evitar erros.
Ateno:
Como JavaScript case sensitive, a varivel de nome teste diferente da varivel de nome Teste.
Dicas:
Na linguagem JavaScript voc pode usar tanto aspas simples como duplas para indicar que um contedo
String.
Na linguagem JavaScript o ponto e vrgula (;) no fim da linha de comando opcional, porm seu uso
recomendado.
Primeiro Script
Bem pessoal, vamos fazer o nosso Ol mundo! em JavaScript. Vocs podem usar o bloco de notas para
codificar (no se esqueam de salvar o arquivo com a extenso html). Veja o cdigo da figura B.2:
Na linha 11 foi criada a varivel chamada teste com valor ol mundo!!.
Na linha 12 estamos mostrando o valor da varivel teste no navegador. Para isso, estamos usando o document.
write(). Isto signifca que estamos escrevendo no documento.
Ateno:
Na figura B.2 o script est dentro do elemento body, isso porque estamos escrevendo no documento.
A figura B.3 mostra o resultado da pgina no navegador.
31
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Operadores Lgicos
Operadores lgicos so operadores normalmente utilizados em comandos condicionais, como if, for e
while
Operador lgico Finalidade
== Igual
!= Diferente
> Maior
< Menor
>= Maior ou igual
<= Menor ou igual
&& E
|| Ou (pipeline)
Operadores Lgicos
Operadores Matemticos
Operador Matemtco Finalidade
+ Este operador serve para adio de valores e ao mesmo tempo, este operador
pode ser usado na concatenao de strings. (concatenao = juno ou unio)
Exemplo: programao + I //retorna programaoI
- Subtrao de valores
* Multiplicao de valores
/ Diviso de valores
% Retorna o resto de uma diviso.
Exemplo:
150 % 13 retornar 7
7 % 3 retornar 1
Operadores Matemticos
32
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
Expresses Simples com operadores
Operador Matemtco Finalidade
+= Concatena /adiciona ao string/valor j existente.
Exemplo:
x += y o mesmo que x = x + y, da mesma forma podem ser utilizados: -= ,
*= , /= ou %=
++ Acrescenta 1 no valor
Exemplo:
X = 3;
X++; // X valer 4
-- Decrementa 1 no valor
Exemplo:
X = 3;
X--; // X valer 2
Expresses Simples com operadores
Converso de tipos
Em expresses que envolvam valores numricos e strings com o operador +, os valores numricos sero
convertidos implicitamente para strings. Exemplo:
X = A resposta + 35; // retorna A resposta 35
Y = 35 + a resposta // retorna 35 a resposta
Y = 37 + 7 // retorna 377
Assim, as vezes torna-se necessrio fazer a converso de valores que esto como string para que possamos
fazer clculos. Para converter explicitamente strings em nmeros existem as funes predefinidas
parseInt e parseFloat.
parseInt: Converte uma string em um nmero inteiro.
Ex.:
num = 3A;
x = parseInt(num); // x recebe 3
parseFloat: Converte uma string em um nmero real.
Ex.:
z = parseFloat(3.15); // z recebe 3.15
Instrues
33
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
A seguir veremos as principais instrues condicionais e de repetio. Veremos que seguem uma sintaxe
muito parecida de outras linguagens.
if
A instruo if utilizada quando necessrio tomar decises. Sua estrutura :
if (<expresso>)
<Instruo>
A expresso avaliada, caso seja true (verdadeira) a instruo executada, caso contrrio a instruo
no executada;
Se o bloco de instruo possuir mais de uma instruo, deve-se usar incio de bloco e fim de bloco, ou
seja {}.
if (<expresso>){
<Instruo>
}
Caso exista instruo a ser executada quando a expresso retornar false(falso), pode ser usar o else.
if (<expresso>){
<Instruo>
}else{
<instruo>
}
switch
O switch tambm pode ser utilizado para testes condicionais e indicado para situaes que exijam
vrios testes.
Sintaxe:
switch (variavel_de_controle) {
case opo1 :
comandos ;
break;
case opo2 :
comandos ;
break;
default :
34
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
comandos;
}
importante observar que a instruo break utilizada ao final de cada opo. O break faz com que a
execuo pule para o fim do switch. Isto importante, uma vez que quando uma opo verdadeira for
encontrada o switch segue executando todas as instrues at o fim se no possuir um break.
for
Para situaes em que precisamos realizar um bloco de instruo diversas vezes, uma opo de soluo
o comando de repetio for. Vamos supor que voc tenha que escrever em seu cdigo (X)HTML os
nmeros de 1 at 20. Para tanto, voc pode utilizar o lao for.
Sintaxe:
for (<inicializao>;<condio>;<atualizao varivel>){
<instrues>
}
Veja na figura B.4 como fica a construo do lao for para mostrar os nmeros de 1 a 20. Na linha 5 foi
concatenado o elemento <br/> para quebrar a linha cada vez que mostra o valor da varivel x.
while
O while semelhante ao comando for, porm s vezes o while aplicado quando no sabemos determinar
a quantidade de vezes que nosso lao vai executar as instrues. Neste lao, enquanto a condio do
while for verdadeira as instrues sero executadas.
Sintaxe:
while(<condio>){

<instrues>
{
Dicas:
Cuidado para que seu lao no seja infinito. A condio precisa ser falsa em algum momento para sair do
35
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
lao ou pode usar o comando exit para sair do lao.
A figura B.5 apresenta o exemplo que mostra os valores de 1 at 10. A varivel i que controla o lao.
Observe que dentro do comando que mostra o valor da varivel i, ela j incrementada (i++).
Objetos JavaScript
Em JavaScript utilizado o conceito de objetos para manipulao de todos os elementos. Tudo pode ser
considerado objeto no mundo (uma caneta, um animal, uma pessoa, uma mesa). Mas vamos ver como
a linguagem JavaScript trabalha baseada em objetos. Na figura B.6 podemos ver vrios objetos. A janela
do navegador um objeto, o prprio documento considerado um objeto, um formulrio, uma caixa de
texto, e assim por diante. Assim, existe uma hierarquia para manipulao dos objetos:
Janela(window) documento(document) formulrio elemento
O objeto janela ser acessado por meio do termo window e o objeto documento usando document.
Para acessar o formulrio e os demais elementos do formulrio, necessrio saber a sua identificao.
Vejamos o exemplo da figura B.7. Os objetos possuem um name e um id, que geralmente tem o mesmo
valor (o radio uma exceo). Nunca teremos dois objetos com o mesmo id, pois ele identifica de forma
nica o objeto. J em relao a propriedade name, podemos ter mais de um objeto com o mesmo name.
Observe nos bales o id/name de cada objeto.
36
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
S para relembrar vamos observar tambm o (X)HTML correspondente ao formulrio acima. Veja na
figura B.8. Observe que o id do formulrio form1.
O id e o name so propriedades dos objetos. Uma propriedade um atributo, uma caracterstica,
uma descrio do objeto. Uma propriedade tem um nome e um valor associado. Para acessar as
propriedades, utiliza-se a sintaxe:
nome_do_objeto.nome_da_propriedade
Vejamos um exemplo de propriedade para o objeto nome do nosso formulrio da figura B.7. Se
desejarmos pegar o valor que o usurio informar na caixa de texto nome, ou atribuir um valor a ele,
usamos a propriedade value. Veja com o fica:
x = document.form1.nome.value; //pegando valor
document.form1.nome.value = teste;//atribuindo valor
37
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Vamos ver como fica para os demais objetos do nosso formulrio na tabela abaixo:
Objeto Id JavaScript para pegar valor
nome
document.form1.nome.value
estado_civil
document.form1.estado_civil.value
obs.: retorna o valor do item selecionado
mensagem
document.form1.mensagem.value
mail
document.form1.mail.value
Obs.: se estiver marcado retorna o valor seno retorna
false.
Para verifcar se o campo est marcado usa-se a
propriedade checked que retorna true se estver
marcado e false se estver desmarcado:
document.form1.mail.checked
sexo Obs.: os botes de radio funcionam um pouco diferente.
Vejamos:
Os botes de radio so utlizados para escolher apenas
uma opo, e s uma, entre um conjunto. Por isso,
todos os botes tem o mesmo nome, justamente
para que seja possvel desmarcar os outros botes
de mesmo nome quando um for marcado. Assim,
cada boto est relacionado a um ndice do conjunto,
comeando com o ndice zero(0). No nosso exemplo o
primeiro boto Feminino o ndice zero e o boto
Masculino o ndice 1.
necessrio verifcar se o boto est marcado, para
ento pegar o valor dele.
if (document.form1.sexo[0].
checked){ x =
document.form1.sexo[0].value
};
Ateno:
Lembre-se que JavaScript case sensitive, ou seja diferencia maisculas e minsculas.
Outro conceito importante relacionado a objetos referente a mtodos. Vimos que as propriedades
so informaes/caractersticas dos objetos, j os mtodos, so aes realizadas sobre os objetos
(gatos miam, carros correm, canetas escrevem, etc.). Vamos ver um exemplo j usado anteriormente.
Sabemos que o nosso documento considerado um objeto e vimos que podemos escrever no
documento:
38
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
document.write(escrevendo no documento);
No exemplo acima, usamos o mtodo write() do objeto document que mostra no documento o que foi
passado como parmetro, no nosso caso a string escrevendo no documento. Vejamos outros exemplos
de mtodos:
Objeto/mtodo Finalidade
window.alert()
Mostra uma mensagem de alerta.
window.alert(ol mundo!);
window.confrm()
Mostra uma mensagem de confirmao com botes de OK e Cancelar. Se o boto
OK for acionado retorna true, se acionar o boto Cancelar retorna false.
window.confrm(Voc confrma!);
window.prompt()
Mostra uma caixa de dilogo para entrada de dados. O segundo parmetro
referente ao valor padro que aparece na caixa de texto. Ao clicar no boto OK o
valor informado ser retornado.
window.prompt(Informe sua idade:,);
Mtodos
Agora que conhecemos um pouco sobre mtodos, podemos ver outra forma de manipular os objetos.
Vamos ver o mtodo getElementById() do objeto document. Este mtodo retorna o objeto de qualquer
elemento do documento que tenha o id passado por parmetro. Por exemplo, para pegar o valor do
objeto nome do nosso formulrio da figura B.7, usamos:
var x = document.getElementById(nome).value;
Ou
var obj = document.getElementById(nome);
var x = obj.value;
39
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Quando pegamos o objeto podemos manipular seus atributos e mtodos como mostrado no exemplo
acima, com a varivel obj que recebeu o objeto nome.
Eventos JavaScript
Eventos so disparados a partir de algumas aes que ocorrem com os objetos, por exemplo, quando
se clica em algo, quando passa o mouse sobre um objeto, quando algum objeto recebe o foco. Nestes
casos existem situaes que precisamos fazer algo, por isso existem os eventos. Vejamos alguns eventos
importantes:
Eventos
click Quando clica sobre um boto, um link ou outros elementos.
load Quando a pgina carregada pelo navegador (aplicado ao elemento body).
unload Quando saia da pgina (aplicado ao elemento body).
mouseover Quando coloca o ponteiro do mouse sobre um link ou outro elemento.
mouseout Quando o ponteiro do mouse sai de um link ou outro elemento.
focus Quando um elemento de formulrio tem o foco, isto , est ativo.
blur Quando um elemento de formulrio perde o foco, isto , quando o deixa de estar
ativo.
change Quando o valor de um campo de formulrio modificado.
select Quando seleciona um campo dentro de elemento select de um formulrio.
submit Quando clica sobre o boto Submit para enviar um formulrio.
Vamos ver um exemplo na figura B.9. O elemento boto, cujo id botao, est com um cdigo no evento
onclick. Veja que est se programando em JavaScript dentro das aspas duplas. Isto pode ser feito dentro
de um evento que o navegador vai interpretar corretamente.
O resultado ser uma mensagem de alerta quando o boto for clicado. Veja na figura B.10.
40
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
Eventos so bastante utilizados em JavaScript, principalmente para chamada de funes predefinidas
pelo programador que veremos a seguir.
Funes
Uma funo um conjunto de instrues destinado a uma tarefa bem especfica e que podemos utilizar
vrias vezes. A utilizao de funes melhora bastante a leitura do script. Em Javascript existem dois
tipos de funes: as funes prprias do Javascript, que chamamos de mtodos, como j visto, e as
funes escritas pelo programador. este ltimo tipo que nos interessa agora.
Para declarar ou definir uma funo, utiliza-se a palavra function:
function nome_da_funcao(parmetros) {

// instrues
}
Ateno:
Lembre-se que JavaScript case sensitive e que o nome de uma funo deve ser nico, ou seja no
podemos ter duas funes com o mesmo nome
Os parmetros so opcionais, mas os parnteses devem sempre aparecer. Uma funo s executada
quando chamamos a funo, ou seja, apenas a sua definio no executa as instrues pertencentes a
ela. A chamada ou invocao de uma funo se faz pelo nome da funo com parnteses, por exemplo:
nome_da_funcao();
Ateno:
A funo deve estar definida antes de ser chamada, caso contrrio um erro ser gerado
Uma funo pode retornar um valor, neste caso usa-se a palavra reservada return. Vamos a um exemplo.
A figura B.11 apresenta o cdigo JavaScript que cria uma funo que recebe dois valores por parmetro.
A funo soma os dois valores e retorna o resultado. A definio da funo comea na linha 9 e termina
na linha 14. A seguir na linha 16 feita a chamada da funo passando os dois valores para clculo. Como
a funo retorna o valor total, ser mostrado no navegador o resultado conforme figura B.12.
Dicas:
conveno inserir todas as declaraes de funes no cabealho da pgina, isto entre os elementos
<head>...</head>
41
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Com as funes, importante compreender o uso de variveis locais e globais.
Uma varivel declarada dentro uma funo pela palavra chave var ser vlida apenas dentro da prpria
funo. No se pode assim us-la fora da funo. Chamamos assim varivel local. Se a varivel declarada
contextualmente (sem utilizar a palavra var), a sua invocao ser global. As variveis declaradas logo
no incio do script, fora e antes de todas as funes, sero sempre globais, quer ela seja declarada com
var ou de maneira contextual.
Atividades Parte 1
1. Faa um cdigo JavaScript que mostra uma caixa de dilogo (prompt) para o usurio informar sua idade.
Se o usurio informar uma idade menor que 18 mostrar em uma caixa de alerta a mensagem Menor de
idade. Se o usurio informar um valor maior ou igual a 18, mostrar mensagem Maior de idade.
2. Crie um formulrio de contato e torne os campos: nome, e-mail e assunto obrigatrios, validando-os
atravs de uma funo JavaScript. Para cada campo no preenchido mostre uma mensagem de alerta.
3. No processo de seleo para cargos de uma empresa, o candidato faz 3 provas, cujos os pesos so:
Prova 1 = peso 3
Prova 2 = peso 3
Prova 3 = peso 4
Para ser considerado aprovado o candidato deve ter mdia acima de 7 para o cargo de gerente e acima
de 8 para o cargo de diretor. Faa uma funo JavaXcript para calcular a nota final do candidato e mostra
em uma caixa de alerta sua situao (APROVADO/REPROVADO) considerando o formulrio abaixo.
<form name=form1 method=post action=cargo.php>
42
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
Nota prova 1 : <input name=p1 type=text id=p1> <br>
Cargo:
<select value=cargo>
<option></option>
<option value=7>Gerente</option>
<option value=8>Diretor</option>
</select>
<input name=verifcar type=submit id=Verifcar value=Verifcar>
</form>
4. Crie a funo calculadora() que considera os objetos do formulrio (dois valores e a operao que pode
ser +, -, * ou /). A funo deve fazer o clculo correspondente a operao e mostrar o resultado em uma caixa
de alerta. Considere um formulrio como da fgura abaixo. Faa a chamada da funo no evento onclick do
boto
5. Dado o enunciado abaixo marque a opo correta para a estrutura de funo:
Faa uma funo que recebe por parmetro um nome de objeto e dois valores. A funo deve fazer a
mdia dos dois valores recebidos e mostrar o resultado no objeto cujo nome foi recebido por parmetro.
a)
function fteste(x, a, b){
m = (a + b) /2;
obj = document.
getElementById(x);
x.value = m; if *
}
b)
m = (a + b) /2;
obj = document.
getElementById(x);
obj.value = m; if *
}
c)
m = (a + b) /2;
obj = document.
getElementById(x);
x.value = m; if *
}
d)
m = (a + b) /2;
x.value = m; if *
}
43
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
6. Dado o enunciado abaixo marque a opo correta para a estrutura de funo:
Faa uma funo que recebe por parmetro dois objetos. A funo deve concatenar os dois valores dos
objetos e mostrar na div cujo id prova.
a)
function fteste(a, b){
v1 = document.getElementById(a).value;
v2 = document.getElementById(b).value;
document.getElementById(prova).value = v1+v2;
}
b)
p = a + b;
document.getElementById(prova).innerHTML = p;
}
c)
p = a.value + b.value;
document.getElementById(prova).innerHTML = p;
}
d)
p = a.value + b.value;
document.getElementById(prova).value = p;
}
7. Pesquise e apresente atributos no vistos neste documento para os objetos: window, document e objeto
de formulrio select.
8. Pesquise e apresente mtodos no vistos neste documento para os objetos: window, document e objeto
de formulrio input.
9. Apresente um exemplo de uso de um evento em elementos de formulrio (diferente de onclick).
10. Como uma funo JavaScript pode ser chamada em um link? Apresente um exemplo.
44
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
Introduo a linguagem JavaScript Parte 2
Continuando a unidade sobre linguagem do lado cliente, nesta parte 2 do material abordaremos a
manipulao de arrays, strings e datas em JavaScript. Ao final desta parte so apresentadas a atividades
para realizao.
Arrays
Array, ou vetor, tambm tratado como um objeto em JavaScript. O objeto Array uma lista de elementos
indexados nos quais pode-se guardar (escrever) dados ou as invocar (ler). O primeiro elemento do Array
est no ndice zero(0). Para criar um Array precisamos inicialmente definir a sua estrutura:
var nome_do_array = new Array (num);
Onde num o nmero de elementos do array, sendo o mximo 255.
Para atribuir valores ao Array:
nome_do_array [i] = valor;
Onde i um nmero compreendido entre 0 e num menos 1.
Exemplo: uma lista de quatro frutas
var frutas = new Array(4);
frutas[0]=maa;
frutas[1]=banana;
frutas[2]=abacaxi;
frutas[3]=lima;
ou podemos definir o vetor da forma abaixo:
var frutas = new Array(maa,banana,abacaxi,lima);
Para mostrar os dados de um array muito comum usar o uma estrutura de repetio. Vejamos um
exemplo utilizando o lao for.
for(i=0; i <= frutas.length -1; i++){
document.write (<br/> + frutas[i]);
}
Veja que utilizamos a propriedade length do vetor para recuperar o nmero de elementos do vetor.
Assim, se temos um vetor de tamanho 4 (quatro elementos), nosso lao vai variar de i valendo 0 at i
igual a 3.
Alguns mtodos do objeto Array:
45
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
join()
Junta todos os elementos do array em uma nica cadeia. Os elementos so separados por
um caractere separador especificado no argumento. Por padro, este separador uma
vrgula.
var x = frutas.join();
document.write(x);
sort()
Ordena os elementos de forma crescente.
frutas.sort();
}
reverse()
Inverte a ordem dos elementos no array.
frutas.reverse();
}
Strings
String uma seqncia de letras, dgitos, caracteres de pontuao e outros, que so representados pela
linguagem como texto. Strings literais podem ser usadas delimitando por pares de aspas simples(...)
ou aspas duplas (... ). Em JavaScript, strings tambm podem ser manipuladas como objetos. A seguir
veremos as principais propriedades e mtodos associados a strings. Para criar explicitamente um objeto
String a sintaxe :
var texto = new String();
ou ainda:
var texto = new String(ol mundo!);
Considerando o objeto texto criado acima, vejamos a propriedade length que bastante utilizada:
var tamanho = texto.length;
A propriedade length etorna o tamanho da string, ou seja, quantos caracteres possui.
Agora vamos ver na tabela abaixo os principais mtodos do objeto String:
charAt()
Extrai o caractere em uma dada posio da string
var caracter = texto.charAt(4);
//retorna m
46
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
indexOf()
Pesquisa um caractere ou substring em uma string.
Retorna a posio da primeira ocorrncia da substring que aparece depois da posio
inicial. Retorna -1 se no encontrar.
var retorno= texto indexOf(!,0);
// neste exemplo est procurando o caractere ! a partir da posio 0(zero)
// retorna 9
split()
Divide um string em um array de strings, quebrando em um string delimitador.
var texto = 10/10/2012;
var vetor = texto.split(/);
// vetor conter 3 elementos que foram separados pelo delimitador /
// retorna vetor[10,10,2012]
substring()
Extrai um substring de um string.
var texto = Ol Mundo!;
var partetexto = texto.substring(4,9);
//observe que os parmetros so posio inicial e posio final; porm o caractere da
posio final no includo no retorno.
// partetexto recebe Mundo
toLowerCase()
Retorna uma cpia da string, com todos os caracteres convertidos em letras
minsculas.
var texto = Ol Mundo;
var novotexto = texto.toUpperCase();
// novotexto recebe ol mundo
toUpperCase()
Retorna uma cpia da string, com todos os caracteres convertidos em letras
maisculas.
var texto = Ol Mundo;
var novotexto = texto.toUpperCase();
// novotexto recebe OL MUNDO
Data e Hora
Trabalhar com datas e horas tambm muitas vezes necessrio para incorporar algum recurso nas
pginas (X)HTML. Por exemplo, mostrar a data atual, mostrar uma saudao de acordo com o horrio.
Em JavaScript, data e hora so manipulados como objeto, portanto precisamos criar um objeto para
conseguir manipul-los:
var datahora = new Date();
Ateno:
A data e hora retornadas no exemplo acima so do computador do utilizador. Lembre-se JavaScript
interpretado pelo navegador
47
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Se mostrar a varivel datahora ser mostrado no navegador algo semelhante a:
Tue Jun 14 2011 20:41:13 GMT-0300 (Hora ofcial do Brasil)
Quando no passamos parmetros na criao do objeto ser retornada a data hora atual. No entanto,
podemos criar um objeto data passando alguns valores. Exemplo:
var data = new Date(2000, 11, 30, 22, 50, 0);
Os valores passados por parmetro so na sequncia: ano, ms, dia, hora, minutos e segundos. Os valores
para hora so opcionais, ou seja, podemos criar um objeto passando apenas os valores da data, como no
exemplo abaixo:
var data = new Date(2000, 11, 30);
Agora que sabemos criar o objeto vamos ver os mtodos que podemos usar na tabela abaixo:
getDate()
Retorna um inteiro correspondente ao dia do ms entre 1 e 31.
var dia = datahora.getDate();
getDay()
Retorna um inteiro correspondente ao dia da semana compreendido entre 0 e 6 (0
para Domingo, 1 para Segunda-feira, ...).
var dia_semana = datahora.getDay();
getMonth()
Retorna um inteiro correspondente ao ms entre 0 e 11 (0 para janeiro, 1 para
fevereiro, 2 para maro, ...).
var mes = datahora.getMonth();
getYear()
Retorna um inteiro correspondente ao ano.
var dia = datahora.getYear();
getHours()
Retorna um inteiro correspondente a hora entre 0 e 23.
var dia = datahora.getHours();
getMinutes()
Retorna um inteiro correspondente aos minutos entre 0 e 59.
var dia = datahora.getMinutes();
getSeconds()
Retorna um inteiro correspondente aos segundos entre 0 e 59.
var dia = datahora.getSeconds();
Atividades Parte 2
1. Considerando o formulrio abaixo, faa uma funo JavaScript que valida os campos para os seguintes
critrios:
todos os campos so obrigatrios
o nome do usurio deve ter no mnimo 8 caracteres
a senha deve conter no mnimo 6 caracteres
os campos senha e senhaconf devem possuir o mesmo valor
Mostrar alertas para o usurio para cada inconsistncia encontrada.
48
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
<form name=form1 method=post action=>
Nome:<input name=nome type=text id=nome size=20> <br>
Senha:<input name=senha type=text id=senha size=20><br>
Confrma senha: <input name=senhaconf type=text id=senhaconf size=20>
<br>
<input name=Enviar type=button id=Enviar value=Enviar>
</form>
2. Dado um formulrio com um campo para informar o e-mail, faa uma funo JavaScript que verifca o
e-mail para os seguintes critrios:
campo de preenchimento obrigatrio
e-mail deve possuir no mnimo 6 caracteres
e-mail deve possuir o caractere @
e-mail deve possuir o caractere . (ponto)
Crie um formulrio para usar a funo.
3. Faa uma funo JavaScript que recebe por parmetro uma data e retorna o dia da semana por extenso
(Domingo, Segunda-feira, Tera-feira, ...). Mostre um exemplo de uso da funo.
4. Faa uma funo JavaScript que recebe por parmetro uma data e retorna o ms por extenso. Mostre um
exemplo de uso da funo.
5. Faa uma funo JavaScript que retorna a data atual e uma saudao no seguinte formato:
14/06/2011 - Boa noite!
6. Dado o formulrio abaixo, faa uma funo que calcule o gasto calrico considerando o peso, a atvidade
desenvolvida e o tempo que a atvidade foi realizada. Mostre o gasto calrico na div mensagem. Considere a
seguinte frmula para o clculo:
peso * tempo * (valor da atividade fsica) * 0.0175
Dicas:
Para verificar qual a atividade que foi selecionada, voc pode utilizar um lao. Lembre-se que o boto de
rdio considera cada opo como um ndice (atividades[0], atividades[1], atividades[2],...).
49
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Segue o cdigo (X)HTML do formulrio acima:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Gasto Calrico</title>
<script src=funcao_calorias.js type=text/javascript>
</script>
</head>
<body>
<form id=form1 name=form1 method=post action=>
<table width=600 border=0 align=center cellpadding=4 cellspacing=2>
<tr> <td colspan=2 align=center><h3><strong>Clculo do gasto calrico
</strong></h3></td>
</tr>
<tr>
<td width=185 align=right><label for=peso>Peso:</label></td>
<td width=393><input name=peso type=text id=peso size=8 /></
td>
</tr>
<tr>
<td align=right>Atividades:</td>
<td><p> <label>
<input type=radio name=atividades value=3 id=atividades_0 />
Vlei</label> <br />
<label><input type=radio name=atividades value=4
id=atividades_1 />
Remo</label> <br />
<label><input type=radio name=atividades value=4.5
id=atividades_2 />
Surfe</label> <br />
<label><input type=radio name=atividades value=5.5
id=atividades_3 />
Dana</label> <br />
50
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
id=atividades_4 />
Futebol</label> <br />
id=atividades_5 />
Basquete</label> <br />
id=atividades_6 />
Ciclismo</label> <br />
id=atividades_7 />
Tenis</label> <br />
</p></td>
</tr>
<tr>
<td align=right><label for=tempo>Tempo:</label></td>
<td><select name=tempo id=tempo>
<option value=15>15</option>
</select></td>
</tr>
<tr>
<td align=right> </td>
<td><input type=button name=botao id=botao value=Calcular
onclick=fcalorias() /></td>
</tr>
<tr>
<td align=right> </td>
<td><div id=mensagem></div></td>
</tr>
</table>
</form>
</body>
</html>
51
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Introduo a linguagem JavaScript Parte 3
Nesta ltima parte do material da linguagem JavaScript sero apresentados propriedades e mtodos dos
principais objetos JavaScript e um exemplo de resoluo de problema desenvolvido passo a passo. Ao
final desta parte, sero apresentadas as atividades para realizao.
Objeto window
O objeto window representa a janela do navegador a qual o script est em execuo. Este objeto possibilita
o acesso a propriedades e execuo de mtodos. Assim, a janela do navegador pode ser manipulada de
diferentes formas, por exemplo, modificando o seu tamanho, aparncia ou posio, podemos abrir e
fechar janelas, transferir informaes entre janelas e criar janelas de dilogo.
A tabela abaixo apresenta as principais propriedades do objeto window:
defaultStatus
Determina o contedo padro da barra de status do navegador, quando
nada de importante estiver acontecendo.
Ex: widow.defaultStatus= texto
status
Define uma mensagem que aparecer na barra de status do navegador, em
substituio, por exemplo, a URL de um link, quando o mouse estiver sobre
o link.
Ex: window.status=texto
name
Contm o nome da janela.
A tabela abaixo apresenta os principais mtodos associados ao objeto window:
open(URL) ou
open(URL,nome) ou
open(URL,nome,

caractersticas)
Abre uma nova janela contendo o documento indicado pela URL.
Opcionalmente, a janela pode ter um nome que pode ser usado em HTML,
ou especificar caractersticas como tamanho, layout, etc.
O mtodo retorna uma referncia do tipo window para a janela criada:
flha = window.open(flha.htm);
close()
Fecha uma janela.
focus()
Torna uma janela ativa (traz para frente das outras, se for
uma janela independente)
As janelas abertas podem ter suas caractersticas alteradas no momento em que so abertas. Estas
caractersticas devero vir em uma string com uma lista de opes separadas por vrgulas, como o
terceiro argumento opcional do mtodo open(). As caractersticas esto na tabela abaixo:
height=h
h a altura da janela em pixels: height=150
width=w
w a largura da janela em pixels: width=300
resizable
Se estiver presente permite redimensionar a janela
toolbar
Se estiver presente, mostra a barra de ferramentas do browser
scrollbars
Se estiver presente, mostra as barras de rolagem do browser
menubar
Se estiver presente, mostra a barra de menus do browser
52
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
location
Se estiver presente, mostra o campo para entrada de URLs
status
Se estiver presente, mostra a barra de status
Cada caracterstica pode ou no ter um valor. No dever haver espaos em qualquer lugar da lista. Por
exemplo:
window.open(teste.html, j2, height=200,width=400,status);
O cdigo acima abre uma janela de 200 pixels de altura por 400 de largura sem barra de ferramentas,
sem barra de diretrios, sem campo de entrada de URLs, sem barra de menus, no-redimensionvel e
com barra de status.
Ateno:
Vale lembrar os mtodos do objeto window que j foram abordados na parte 1 desta unidade, tais sejam:
alert() , prompt() e confirm().
Objeto history
O objeto history est associado ao objeto window e armazena as informaes sobre os URLs que foram
visitados antes e depois do atual e inclui mtodos para ir para as localizaes anteriores ou prximas:
go(n) ou
go(string)
Avana ou volta n pginas no histrico. A segunda forma procura no
histrico at encontrar a primeira pgina que tenha a string especificada no
ttulo do documento ou nas palavras da sua URL.
Ex.:
window.history.go(+1)
back()
Volta uma pgina no histrico (simula o boto Back ou Voltar do
browser).
Ex.:
window.history.back()
forward()
Avana uma pgina no histrico (simula o boto Forward ou
Avanar do browser).
Ex.:
window.history.forward()
Objeto Navigator
O objeto navigator (associado ao objeto window) representa as propriedades do navegador. Usando
suas propriedades e mtodos possvel identificar caractersticas do navegador e desenvolver pginas
personalizadas com contedo especfico para aproveitar ao mximo os recursos existentes. Veja abaixo
uma lista de propriedades vinculadas ao navigator:
53
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
userAgent
Uma string com a informao contida no cabealho HTTP User-Agent. Esta
propriedade a combinao das propriedades appCodeName e appVersion.
Exemplos:
Mozilla/4.0 (compatible; MSIE 4.0; Windows 95)
Mozilla/4.5 [en] (Win95; I)
appCodeName
Contm o nome interno do navegador.
Exemplo: Mozilla
appVersion
Contm informaes sobre a verso.
Exemplos:
4.0 (compatible; MSIE 4.0; Windows 95)
4.5 [en] (Win95; I)
appName
Contm o nome oficial do browser.
Exemplos:
Microsoft Internet Explorer
Netscap
Objeto document
O objeto document representa o documento HTML atual. document uma propriedade de window e,
portanto, pode ser usado sem fazer referncia a window:
window.document // ou simplesmente document
As principais propriedades do tipo document esto listadas na tabela abaixo:
title
Recupera o ttulo do documento
location
Contm String com URL do documento. Pode ser alterado.
Ex.:
document.location = http://www.ifsul.edu.br;
URL
Mesma coisa que location.
lastModifed
Contm a data da ltima modificao do arquivo. Est no formato de data
do sistema. Pode ser convertida usando Date.parse() e transformada em
objeto ou automaticamente em String.
Ateno:
Com relao aos principais mtodos de document, j vimos na parte 1 desta unidade. Vale relembrar,
por exemplo, do document.write utilizado para escrever algo no documento.
54
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
Soluo passo a passo
O objetivo de soluo de um problema passo a passo mostrar de forma integrada a utilizao dos
recursos estudados e que auxiliaro no desenvolvimento das atividades propostas.
Ento, mos obra. O enunciando do nosso problema :
O formulrio abaixo solicita que o usurio informe o peso, escolha uma atividade fsica e o tempo em
que a atividade foi realizada. Dado este formulrio, calcule, de acordo com a atividade fsica, o peso e o
tempo de exerccio, quantas calorias voc queima praticando esporte. O clculo usa a seguinte frmula:
GastoCalorico = peso * tempo * (valor da atividade fsica) * 0.0175
Agora vamos soluo. Primeiro vamos construir o formulrio:
a) Criar um arquivo HTML nomeado exercicio.html
b) Incluir um ttulo para o documento (Exerccio passo a passo)
c) Incluir um elemento form
d) Incluir um elemento table com a seguinte formatao:
8 linhas
2 colunas
width=50%
border=0
align=center
cellpadding=0
cellspacing=10
Dica:
Vamos utilizar uma tabela com duas colunas para organizar os elementos do formulrio de forma que
fiquem alinhados.
55
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Agora vamos incluir os elementos de formulrio:
a) uma caixa de texto para peso (id= peso)
<input type=text id=peso name=peso />
b) botes de rdio para as atvidades (name=atvidade)
c) um menu de lista para o tempo (id=tempo)
d) uma div para o resultado (id=resultado)
e) um boto (id=btnCalcular)
A parte de programao JavaScript ser feita em um arquivo separado (js.js). Esta a forma recomendada
de incluirmos nossa funes JavaScript no HTML, uma vez que geralmente temos vrias funes que so
utilizadas nas nossas pginas. O nome da nossa funo ser calcula() e ser chamada no evento onClick
do boto Calcular.
Antes de partirmos para a programao JavaScript vamos analisar todo o cdigo HTML que mostrado
abaixo em duas figuras.
A figura B.18 mostra o cdigo do arquivo exercicio.html da linha 1 at a linha 30.
56
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
A figura B.19 apresenta a cdigo do arquivo HTML das linhas 31 60.
Tendo nosso arquivo exercicio.html completo, vamos codificao JavaScript. A figura B.20 apresenta a
funo calcula() do arquivo js.js.
Agora vamos analisar todo o cdigo da funo:
Linha 2: Definio da funo (no recebe parmetros).
Linhas 4 e 5: Pega os valores dos elementos cujo id so respectivamente peso e tempo.
Ateno:
O mtodo getElementById j foi visto na parte 1 desta unidade sobre JavaScript. Este mtodo retorna o
objeto de qualquer elemento do documento que tenha o id passado por parmetro.
Linha 6: Veja que para pegar a atividade foi utilizado um mtodo diferente (document.getElementsByName),
isso porque existem vrios elementos do tipo rdio com o mesmo name (neste caso atividade - quando
um item selecionado pelo usurio os demais itens com o mesmo nome so desmarcados). O mtodo
57
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
document.getElementsByName retorna um array, contendo todos os elementos que possuem o nome
passado por parmetro. Nesse caso, vamos precisar de um lao para percorrer todo o array.
Linha 7: Inicia varivel valor_atividade com zero. Essa varivel ser utilizada para pegar o valor
correspondente atividade selecionada.
Linhas 9 a 14: Inicialmente criada uma varivel mensagem sem valor. Nessas linhas, verificado se
foram informados valores para o peso e tempo. Caso no tenha sido informado, atribuda mensagem
para a varivel mensagem. Observe que na linha 14 feita uma concatenao (+=). Isso significa que a
varivel mensagem mantm o seu valor e concatena com o novo valor passado.
Linhas 16 a 22: Este conjunto de cdigo tem por objetivo verificar se alguma atividade foi selecionada
e neste caso pegar o valor correspondente.
Linha 16: cria varivel fag com valor false.
Linha 17: lao for que percorre todas as opes de atvidades (atvidade.length retorna o nmero de opes, neste
caso 10).
Linha 18: verifca a propriedade checked da atvidade. Se for true signifca que est marcada.
Linha 19: atribui true para varivel fag. Signifca que tem atvidade selecionada.
Linha 20: pega o valor correspondente atvidade. A funo parseFloat converte o valor que string para o tpo
foat necessrio para fazer o clculo.
Linhas 24 e 25: Verifica o valor de flag. Se continuar com false atribui uma mensagem.
Linha 27: Verifica se mensagem possui valor. Caso no possua valor procede ao clculo.
Linha 28: Realiza o clculo. Utiliza as funes parseFloat e parseInt para converter os valores
respectivamente para Float e Int (necessrio para realizar o clculo).
Linha 29: Atribui uma mensagem com o resultado do clculo. A funo toFixed(2) (calorias.toFixed(2))
faz com que o valor apresente apenas 2 casas decimais.
Linha 32: Atribui o valor da varivel mensagem para a div resultado.
Nossa soluo est completa. Lembre-se de que um problema pode ter diferentes formas de soluo.
Aqui apresentamos uma soluo que busca mostrar de forma didtica cada passo realizado para a
soluo do problema.
Atividades Parte 3
1. Crie duas pginas (X)HTML como mostrado na fgura abaixo. A primeira pgina deve ter um boto Abre
Janela que, quando clicado, deve abrir uma nova janela nas dimenses de 360 de largura x 280 de altura
(pixels). Depois de aberta, a nova janela dever estar na frente da antga (use focus()). A segunda pgina deve
conter um boto fechar que, ao ser atvado, fecha a janela.
58
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
2. Considerando o cdigo (X)HTML do formulrio cujo cdigo disponibilizado abaixo, faa:
a) Validar se todas as perguntas foram respondidas. Caso haja perguntas no respondidas mostrar na div
resultado;
b) Calcular a pontuao de acordo com o valor de cada opo e mostrar na caixa pontos.
c) Mostrar na div resultado o diagnstco de risco conforme pontuao calculada (conforme abaixo).
59
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
Segue o cdigo (X)HTML do formulrio acima:
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 />
<title>PESQUISA</title>
<script language=javascript src=js.js></script>
</head>
<body>
<form id=form1 name=form1 method=POST action=>
<table width=50% border=0 align=center cellpadding=0 cellspacing=3
bgcolor=#FFFFFF>
<tr>
<td align=center><strong>QUESTIONÁRIO</strong></td>
</tr>
<tr>
<td><p><strong>1.Qual a sua idade?</strong><br />
<input name=perg1 type=radio value=-1 /> até 34
anos<br />
<input name=perg1 type=radio value=0 /> de 35 a 39 anos
<input name=perg1 type=radio value=1 /> de 40 a 44
anos<br />
anos<br />
anos<br />
<input name=perg1 type=radio value=7 /> Mais de 70 anos
</p>

<p><strong>2.Qual é a sua pressão arterial
(sistólica / diastólica )?
</strong></p>
60
F
o
m
e
n
t
o

a
o

U
s
o

d
a
s

T
e
c
n
o
l
o
g
i
a
s

d
a

I
n
f
o
r
m
a
o

e

C
o
m
u
n
i
c
a
o
<input name=perg2 type=radio value=0 /> inferior a 12 - inferior a
8<br>
<input name=perg2 type=radio value=0 /> de 12 a 12,9 - de 8 a 8,4<br>
<input name=perg2 type=radio value=1 /> de 13 a 13,9 - de 8,5 a 8,9<br>
<input name=perg2 type=radio value=2 />de 14 a 15,9 - de 9 a 9,9<br>
<input name=perg2 type=radio value=3 /> 16 ou mais- 10 ou mais
<p> <strong>3. Qual é o seu nível de colesterol? </strong><br />
<strong>Nível de LDL, o colesterol "ruim" (em mg/dl)</
strong><br />

<input name=perg3 type=radio value=-3 /> inferior a
100
<input name=perg3 type=radio value=0 /> de 100 a
129<br />
190<br />
<input name=perg3 type=radio value=2 /> Superior a
190</p>

<p><strong>4.Nível de HDL, o colesterol "bom" (em mg/dl)</
strong><br />
<input name=perg4 type=radio value=2 /> inferior a 35
<input name=perg4 type=radio value=1 /> de 35 a 44<br
/>
49
<input name=perg4 type=radio value=0 /> de 50 a 59<br
/>
<input name=perg4 type=radio value=-1/> superior a
60</p>

<p><strong>5. Você fuma? <br> </strong>
<input name=perg5 type=radio value=0/> Não
<input name=perg5 type=radio value=2/> Sim </p>

<p><strong>6. Você tem diabetes</strong><br />
<input name=perg6 type=radio value=0 /> Não
<input name=perg6 type=radio value=2 /> Sim</p></td>
</tr>
<tr>
<td align=center> </td>
</tr>
<tr>
<td align=center><label for=pontos>Pontos</label>
<input name=pontos type=text id=pontos size=4 /> <br /> <br
/>
<input name=button type=button id=button value=Ver
resultado/></td>
</table>
</form>
</body>
</html>
61
S
i
s
t
e
m
a

U
n
i
v
e
r
s
i
d
a
d
e

A
b
e
r
t
a

d
o

B
r
a
s
i
l

-

U
A
B

|

I
F

S
u
l
-
r
i
o
-
g
r
a
n
d
e
n
s
e
Unidade B
3. Considerando o formulrio abaixo, faa:
a) Validar se todas as perguntas foram respondidas. Caso haja perguntas no respondidas mostrar mensagem
em uma .
b) Mostrar o total de respostas Sim.
c) Mostrar o total de respostas No.
4. Considerando o formulrio abaixo, faa a codifcao JavaScript para:
a) Validar se todas as perguntas foram respondidas. Caso haja perguntas no respondidas mostrar mensagem
em uma div.
b) Mostrar na caixa de texto correspondente o nmero de respostas para cada cor.

Linguagem de Programação Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Linguagem de Programação Web

Uploaded by

Copyright:

Available Formats

Unidade B

Linguagem de Programao Web

You might also like