0% acharam este documento útil (0 voto)

0 visualizações204 páginas

AulaJavaScript_1103

O documento aborda o desenvolvimento em JavaScript, incluindo a instalação do Java e do servidor Apache Tomcat, além de fornecer referências bibliográficas e online. Ele também explica conceitos fundamentais da linguagem, como variáveis, operadores, e como incluir JavaScript em páginas HTML. Exemplos práticos são apresentados para ilustrar a utilização de comandos e a interação com o usuário.

Enviado por

Leila Lage

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

0 visualizações204 páginas

AulaJavaScript_1103

Enviado por

Leila Lage

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 204

Desenvolvimento em

JavaScript

JAVASCRIP
Orientação Objeto
Referências
 Bibliografia
 Javascript

Use a Cabeça – Javascript
Monison, M
Altabooks


Só Javascript
Yank, K
Bookman
 Na Internet
 http://www.inf.puc-rio.

br/~meslin/Javascript
 http://www.w3.org

 http://www.w3schools

.com
Instalando um serviço
web
 Instale Java
 Instale servidor Web
Instalação de Java
 Faça download da última versão do
J2SE em http://java.sun.com

 Instale o pacote utilizando o

método NNF
Instalação de Java
 Inicie a
instalação
Instalação de Java

 Leia atentamente os termos da

licença e somente os aceite se
concordar plenamente!

 Clique em Accept
Instalação de Java

 Selecione o que deve se

instalado
 Para economizar espaço,
podem ser retirados

Demos

Source Code
 Clique Next
Instalação de Java
 Espere
(muito!!!)
Instalação de Java
 Selecione os itens que você deseja
para a máquina virtual

 Clique Next
Instalação de Java

 Espere muito novamente...

Instalação de Java
 Clique Finish (até que enfim!!!)
Instalação do Apache Tomcat
 Instale
Apache+Tomcat
Instalação do Apache Tomcat

 No site http://www.apache.org,
faça download da última versão
do Tomcat

 Instale o pacote através de NNF,

apenas verificando o que você
gostaria que fosse instalado
Instalação do Apache Tomcat versão
5.5
 Inicie a
instalação
Instalação do Apache Tomcat

 Clique
Next
Instalação do Apache Tomcat
 Leia atentamente os termos da licença
e somente os aceite se concordar
plenamente!

 Clique em I Agree
Instalação do Apache Tomcat
 Selecione os itens que devem ser
instalados
 Para economizar espaço, podem ser
excluidos

Start Menu Itens

Documentation

Examples

Webapps
 Clique Next
Instalação do Apache Tomcat
 Selecione a pasta de instalação (pode
usar a padrão)

 Clique Next
Instalação do Apache Tomcat
 Escolha a porta do
serviço
 8080, se houver outro
servidor web instalado
(ex.: IIS)
 80, caso seja o
único servidor
web
 Entre com o User
Name e Password
para o administrador
do sistema
 Obs.:
 Não esqueça o User
Name e Password
 Lembre-se que a senha
Instalação do Apache Tomcat

 Informe a pasta onde está o JRE

 Clique em Install
Instalação do Apache Tomcat

 Espere
…
Instalação do Apache Tomcat

 Espere mais um
pouco…
Instalação do Apache Tomcat
 Espere mais um pouco…'tá quase lá...
Instalação do Apache Tomcat
 Clique
Finish
Verificação da Instalação do Apache
Tomcat
Abra o Monitor Tomcat em StartAll
Programs Apache Tomcat 6.0  Monitor
Tomcat
Verificação da Instalação do Apache
Tomcat
 No System Tray, clique como botão
direito do mouse no ícone do monitor e
selecione Configure...
Verificação da Instalação do Apache
Tomcat
Clique em
Start
Verificação da Instalação do Apache
Tomcat
 E
espere...
Verificação da Instalação do Apache
Tomcat
 Tenha certeza que o serviço foi
iniciado corretamente...
Verificação da Instalação do Apache
Tomcat
 Abra o browser
 Digite:

http://localhost:8080
 Você deve obter uma página semelhante
a esta
Javascript

 Linguagem script popular

 Suportada por diversos
navegadores web e outras
ferramentas
 Interage com HTML,
adicionando interatividade
 Normalmente as páginas
HTML são estáticas

Janelas pop-up

Iteração com formulários

Cálculos

Termos

 Objeto: dados e funcionalidade juntos

 Propriedade: atributos (valores) que são
associados a alguma coisa
 Método: uma ação que um objeto pode
realizar
 Evento: uma ação iniciada por um usuário
ou pelo computador
 Variável: um lugar para armazenar valores
em um computador (propriedade está
relacionada a objeto)
 Função: uma rotina ou procedimento que realiza
uma ação (método está relacionado a objeto)
Como incluir Javascript em uma página
HTML
 Javascript dentro da página
HTML
<html>
<body>
<script type="text/javascript">
document.write("Alo mundo!");
</script>
</body>
</html>

 O comando document.write() é
um comando padrão do
Javascript para escrever em
uma página HTML
Como incluir Javascript em uma página
HTML
 O mesmo exemplo, agora com tags
HTML dentro do Javascript

<html>
<body>
<script type="text/javascript">
document.write("<h1>Alo mundo!</h1>");
</script>
</body>
</html>
Onde incluir o Javascript

 Javascript é executado durante a carga da

página HTML
 Nem sempre queremos que ele execute
durante
 Algumas vezes é necessário que ele
execute antes ou após o carregamento da
página
 Incluir o Javascript no cabeçalho
(<head>) de uma página garante que
ele será executando antes da carga da
página
Exemplo
<html>
<head>
<script type="text/javascript">
document.write("<title>Título da página</title>");
</script>
</head>
<body>
<script type="text/javascript">
document.write("<h1>Conteúdo da página</h1>");
</script>
</body>
</html>
Utilizando um arquivo Javascript
externo
<html>
<head>
<title>Página com Javascript externo</title>
<script type="text/javascript" src="arquivo.js">
</script>
</head>
<body>
Corpo da Página
</body>
// código javascript
</html> /*
* aqui eu posso colocar qualquer
* comando Javascript
*/
alert("Alo mundo!");

arquivo.js
Comandos Javascript

 A linguagem Javascript é case-

sensitive
 Um comando Javascript é executado
pelo navegador
 Normalmente termina-se um
comando Javascript com ; (boa
prática de programação, mas
desnecessário)
 O uso de ; permite escrever mais
de um comando por linha
Código Javascript

 Código Javascript é uma

sequência de comandos
Javascript
 O código é executado
sequencialmente, comando por
comando

 Exemplo:
<script type="text/javascript">
document.write("<h1>Este é um cabeçalho</h1>");
document.write("<p>Isto é um parágrafo.</p>");
Bloco de comandos
 Comandos Javascript podem ser
agrupados em blocos
 Um bloco inicia por um { e termina por
um }
 A finalidade do bloco é agrupar os
comandos para que eles sejam tratados
como se fossem apenas um único comando
(comando composto)
 Exemplo:
<script type="text/javascript">
{
document.write("<h1>Este é um cabeçalho</h1>");
document.write("<p>Isto é um parágrafo.</p>");
document.write("<p>Este é outro
Comentários
 Finalidade: documentação

 Comentários podem ser

adicionados para explicar o código
Javascript

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

 Exemplo:
<script type="text/javascript">
/*
Este código a seguir escreverá:
- Um cabeçalho
- Dois parágrafos
*/
document.write("<h1>Este é um cabeçalho</h1>");
document.write("<p>Isto é um parágrafo.</p>");
document.write("<p>Este é outro parágrafo.</p>");
</script>
Comentários e código
 Podemos utilizar comentários para
evitar que algum comando seja
executado

 Muito utilizado durante a

fase de desenvolvimento

 Exemplo:
<script type="text/javascript">
document.write("<h1>Este é um
cabeçalho</h1>");
// document.write("<p>Isto é um parágrafo.</p>");
Comentários e comandos

 Podemos acrescentar comentários

no final de uma linha de comando

 Exemplo:
<script type="text/javascript">
document.write("<h1>Este é um cabeçalho</h1>"); //cabeçalho
document.write("<p>Isto é um parágrafo.</p>"); /* parágrafo */
document.write("<p>Este é outro parágrafo.</p>");
</script>
Estrutura da Linguagem

 Valores
constantes: String entre

"Alexandre Meslin" aspas String

'Linguagem
875 - entre plics
Javascript'
2 2578 Inteiro na base

 025
0xAB12 -- 10 Inteiro na
 7
0x3CD4
3.1 0752
-2.7 base 8 Inteiro
4 fals na base 16

tru e Número em ponto
e flutuante Valores
booleanos
Declaração e uso de variáveis

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

 Cuidado: não utilize nomes com

escritas diferentes mas pronúncias
iguais ou parecidas.

 Exemplo: não crie as seguintes

variáveis:

Nome e nome

Idade e idade

Num1 e num1

 Você vai acabar confundindo nome

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

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

 window.prompt()
 prompt()

Abre uma janela para pedir uma
string ao usuário
<html>
<body>
<script type="text/javascript">
nome=prompt("Qual o seu nome?");
</script>
</body>
</html>
Exemplo:
<html>
<body>
Alo mundo em html
<script type="text/javascript">
document.write("Alo mundo em Javascript");
</script>
Alo mundo novamente em html
</body>
</html>
Meu Segundo Javascript

<html>
<head>
<title>Alo Personalizado</title>
<script type="text/javascript">
nome = prompt("Qual o seu nome?");
</script>
</head>
<body>
<h1>Minha Página</h1>
<script type="text/javascript">
document.write("<h3>"+nome+", seja
bem-vindo a minha página</h3>");
</script>
</body>
</html>
Operadores
 Aritméticos

Soma +

a+b

Subtra
ção –

a–b

Multipl
icação
*

a*b

Divisã
o/

a/b

Resto
da
divisão
Operadores

 Atribuição

Simples
=

a=b+
 c
Composta -= *= /=
+= (a = a + %=

a += b b)
Operadores
 Relacionais

Equivalente ==

a == b

Diferente !=

a != b

Menor <

a < b

Maior >

a > b

Menor ou igual
<=

a <= b

Maior ou igual
Operacões
 String

Contatenação
nome =
"Alexandre";
sobrenome =
"Meslin";
nomeCompleto =
nome + " " +
sobrenome;


Outras

Comparação
operações
3 == "3"
// x string
x = "8752"; // a
a = x +10; 875210
// b  8742
Conversão explícita de tipos
 parseInt (str) ou parseInt(str, base)

Converte uma string para um número
inteiro

Exemplo:
num = "3A";
x = parseInt(num); // x  3
y = parseInt(num, // y  58
16);

 parseFloat(str)

Converte uma string em um
número real

Exemplo
z = parseFloat("3.14");
Exercícios

 Faça uma página que some 25 com

78 e mostre o resultado em:

Uma página

Uma janela de alerta


Formato de saída:
25 + 78 = 103
Resposta A

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Soma na Mesma Página</title>
</head>
<body>
<script type="text/javascript">
n1 = 25;
n2 = 78;
res = n1 + n2;
document.write(n1, " + ", n2, "
= ", res);
</script>
</body>
</html>
Resposta B

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Soma em um alert</title>
</head>
<body>
<script type="text/javascript"> n1 = 25;
n2 = 78;
res = n1 + n2;
// o alert somente recebe um único valor
// logo, eu preciso concatenar os diversos valores em um único
alert(n1 + " + " + n2 + " = " + res);
</script>
</body>
</html>
Exercícios
 Faça uma página de boas vindas
personalizada
Resposta

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Página de Boas Vindas</title>
</head>
<body>
<script type="text/javascript">
nome = prompt("Infome o seu nome: ");
document.write("<H1>Bem vindo, " + nome + "</h1>");
</script>
resto do conteúdo da página...
</body>
</html>
Exercícios
 Faça uma página para somar 2
números informados pelo usuário
Resposta

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Soma de 2 números</title>
</head>
<body>
<script type="text/javascript">
sN1 = prompt("Informe o primeiro número");
sN2 = prompt("Informe o segundo número");
n1 = parseFloat(sN1);
n2 = parseFloat(sN2); res =
n1 + n2;
document.write(n1, " + ",
n2, " = ", res);
</script>
</body>
</html>
Exercícios
 Faça uma página para somar 3
números informados pelo usuário
Resposta
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Soma de 3 números</title>
</head>
<body>
<script type="text/javascript">
sN1 = prompt("Informe o primeiro número");
sN2 = prompt("Informe o segundo número");
sN3 = prompt("Informe o terceiro número");
n1 = parseFloat(sN1);
n2 = parseFloat(sN2);
n3 = parseFloat(sN3);
res = n1 + n2 + n3;
document.write(n1, " + ",
n2, " + ", n3, " = ", res);
</script>
</body>
</html>
 Desvio Condicional
 Funções
 Sintaxe mínima de
funções
 Funções com
parâmetros
 Eventos
Comandos
condicionais
 if()
 if()-else
 switch()-case
O comando if()

 Utilizado para executar determinado

código se a condição for verdadeira
 Sintax

e:
if(con
dição)
{
código que será executado
se a condição for verdadeira
}


OU

if(con
dição)
O comando if()

 Lembre-se que Javascript é case-

sensitive. O comando if() deve
ser escrito em letras minúsculas
Exemplo

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-
8859-1">
<title>Saudação</title>
</head>
<body>
O que
<script type="text/javascript"> acontece às
data = new Date(); 12h e às 18h?
hora = data.getHours();
if (hora<12) document.write("<b>Bom dia</b>");
if (hora>12)
if (hora<18) document.write("<b>Boa tarde</b>");
if (hora>18) document.write("<b>Boa noite</b>");
</script>
</body>
</html>
Comando if()-else
 Utilizado para executar um entre dois códigos.
 O código ligado ao else somente será executado se a condição
for falsa
 Obs.: o else não tem condição
 Sintaxe:

if(condição)
{
código que será executado se a condição for verdadeira
}
else
{
código que será executado se a condição for falsa
}


OU

if(condição)
UM comando que será executado se a condição for
verdadeira else
UM comando que será executado se a condição for
falsa
Exemplo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Saudação</title>
</head>
<body>
<script type="text/javascript">
data = new Date();
hora = data.getHours();
if (hora<12)
document.write("<b>Bom dia</b>");
else
if (hora<18)
document.write("<b>Boa
tarde</b>");
else
document.write("<b>Boa
noite</b>");
</script>
</body>
</html>
O mesmo exemplo com outro
formato
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Saudação</title>
</head>
<body>
<script type="text/javascript">
data = new Date();
hora = data.getHours();
if (hora<12)
document.write("<b>Bom
dia</b>");
else if (hora<18) document.write("<b>Boa tarde</b>");
else document.write("<b>Boa noite</b>");
</script>
</body>
</html>
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!");
}
Operadores Lógicos

 Concatenam operações lógicas


&& – operador E

if((a > b) && (a > c))

Se a maior do que b E a maior do
que c

|| – operador OU

if((a > b) || (a > c))

Se a maior do que b OU a maior do
que c

! – operador NÃO

if(!(a > b))

Se NÃO a maior do que b
Exemplo

 Exemplos:

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

{
manha = false;
document.write ("boa tarde!");
}
Função

 Uma função é uma porção de código que

resolve um problema muito específico,
parte de um problema maior (Wikipédia)
 Uma função contém código que será
executado por um evento ou uma
chamada explícita
 Você pode chamar uma função de
qualquer lugar de uma página
 Funções podem ser definidas na seção
<head> ou
<body>
 Para garantir que a função já foi carregada
Definição de Função
 Sintax
e:
function nomeDaFuncao(var1, var2, ..., varN)
{
Lista de variáveis,
código executável separadas por
} vírgula

 Os parâmetros var1, var2, etc. são variáveis ou

valores passados para a função

 Os { e } definem o início e o fim da função

 Nota: uma função sem parâmetros precisa dos ()

depois do nome
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function mostraMensagem()
{
alert("Alo mundo!");
}
</script>
<title>Mostra uma mensagem</title>
</head>
<body>
<form>
<input
type="button"
value="Não aperte o botão"
onclick="mostraMensagem()">
</form>
</body>
</html>
O comando return

 O comando return é utilizado para

especificar um valor que será
retornado da função chamada para
quem a chamou

 Sintaxe:
return; // apenas retorna da função


OU

return valor;
// retorna um valor da função
Exemplo de uso de return

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function produto(a,b)
{
var c;
c = a * b;
return c; // poderia ser
return a * b;
}
</script>
<title>Comando return</title>
</head>
<body>
<script type="text/javascript">
document.write(produto(4,3));
</script>
</body>
</html>
Exemplo de uso de return
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function produto(a,b)
{
var c;
c = a * b;
return c; // poderia ser
return a * b;
}
</script>
<title>Comando return</title>
</head>
<body>
<script type="text/javascript">
result = produto(4, 3);
document.write(result);
</script>
</body>
</html>
Ciclo de vida de uma variável
 Variável declarada dentro de uma função

Variável local

Somente pode ser acessada dentro da função

Se a função chamar outra função, a variável
continua existindo, mas a função chamada não
tem acesso a ela

Podemos ter variáveis locais com o mesmo
nome em funções diferentes

A variável é destruída ao término da função
 Variáveis declaradas fora da função

Variáveis globais

Podem ser acessada em qualquer parte do
código, inclusive dentro de outras funções

A variável passa a existir depois da sua
declaração e continua existindo até a página
Funções Predefinidas

 isNaN (valor)

Retorna "true" se o valor não for numérico

Exemplo:
x =prompt("Entre um numero:",
" "); if (isNaN(x))
window.alert("Valor não é
numérico !");

 window.confirm (pergunta)

Abre uma janela para pedir uma
string ao usuário

Exemplo:
if (confirm("Quer realmente sair da
página ?")) alert("Então adeus !");
Eventos
Um pouco sobre eventos...

<!DOCTYPE html>
<html> Código Javascript
<head> (sem as tags
script)
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="button" value="Não clique aqui" onclick='alert("Você clicou
no botão")'>
</form>
</body>
</html>
Um pouco sobre objetos

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function funcao()
{
alert(document.formulario.te
xto.value);
}
</script>
<title>Insert title
here</title>
</head>
<body>
<form name="formulario">
<input type="text"
name="texto">
<input type="button"
value="Não clique aqui!"
onclick="funcao()">
</form>
Explicando...
 Observe a construção HTML:
<form name="formulario">
<input type="text" name="texto">
</form>
 Neste caso, não existe a variável texto,

apenas o campo chamado texto do

formulário, ou seja, fazer algo do tipo:
alert(texto)
 Não é possível, mas podemos
escrever:
alert(document.formulario.texto.va
lue)

Escreve o valor (value) do campo chamado
Continuação

 Para podermos fazer alguma

operação com uma variável devemos
copiar o campo chamado texto para
uma variável.

 Exemplo:
variavel =
sobrenome)
Exemplo (escreve nome e
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function pessoa()
{
// converte o campo nomeBastimo para variável nome
nome = document.familia.nomeBatismo.value;
// converte o campo nomeFamilia para variável sobrenome
sobrenome = document.familia.nomeFamilia.value;
// escreve uma string constante: "Você é "
// concatenada com uma string variável: nome
// concatenada com uma string constante: " "
// concatenada com uma string variável: sobrenome
alert("Você é " + nome + " " + sobrenome);
}
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Nome & Sobrenome</title>
</head>
<body>
<form name="familia">
Nome: <input type="text" name="nomeBatismo"><br/>
Sobrenome: <input type="text" name="nomeFamilia"><br/>
<input type="button" value="Quem é você..."
onclick="pessoa()">
</form>
</body>
</html>
Exercícios

 Faça uma página HTML contendo um

formulário com um botão. A página
deverá exibir uma mensagem quando o
usuário clicar no botão
Resposta:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Exercicios\Evento\Mensagem.html</title>
</head>
<body>
<form>
<input type="button" onclick='alert("Uma mensagem")' value="Aperte
aqui"/>
</form>
</body>
</html>
Exercícios
 Faça uma página com um formulário
contendo um campo texto onde o usuário
irá escrever o seu nome. A página deverá
saudar o usuário
Resposta:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function sauda()
{
data = new Date(); hora =
data.getHours();
if(hora<12)
{
alert("Bom dia " +
document.conheciment
o.nomePessoa.value);
}
else
{
if(hora<18)
{
alert("Bo
a tarde "
+
document.
conhecime
nto.nomeP
essoa.val
ue);
}
else
{
alert("Bo
a noite"
+
document.
conhecime
nto.nomeP
Exercícios
 Faça uma página com um formulário
contendo dois campos texto. A página
deverá exibir a soma dos valores digitados
nos campos
Resposta:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function opera()
{
num1 =
parseFloat(document.calculadora.op1.value); num2
= parseFloat(document.calculadora.op2.value);
resultado = num1 + num2;
document.write("A soma de " + num1 + " com " +
num2 + " é " + resultado);
}
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Exercicios\Evento\Soma.html</title>
</head>
<body>
<form name="calculadora">
Operando 1: <input type="text"
name="op1"><br/> Operando 2: <input
type="text" name="op2"><br/>
<input type=“button" value="Calcula"
Outra resposta:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function opera(sNum1, sNum2)
{
num1 = parseFloat(sNum1); num2
= parseFloat(sNum2); resultado
= num1 + num2;
document.write("A soma de " +
num1 + " com " + num2 + " é "
+ resultado);
}
</script>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-
8859-1">
<title>Exercicios\Evento\
Soma2.html</title>
</head>
<body>
<form name="calculadora">
Operando 1: <input type="text"
name="op1"><br/> Operando 2: <input
type="text" name="op2"><br/>
<input type=“button" value="Calcula"
Desafio
 Fazer uma página HTML contendo
um formulário com quatro campos:
operando1, operador (+-*/),
operando2 e resultado e um botão
de igual.
Resposta:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"> function
opera()
{
num1 = parseFloat(document.calculadora.op1.value); num2 =
parseFloat(document.calculadora.op2.value); operacao =
document.calculadora.operador.value;
if(operacao == '+') resultado = num1 + num2; else
if(operacao == '-') resultado = num1 - num2; else
if(operacao == '*') resultado = num1 * num2; else
resultado = num1 / num2; document.calculadora.result.value
= resultado;
}
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Exercicios\Evento\Calculadora2.html</title>
</head>
<body>
<h1>4 Operações</h1>
<form name="calculadora">
<input type="text" name="op1">
<select name="operador">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="op2">
<input type="button" value=" = " onclick="opera()">
<input type="text" name="result">
</form>
</body>
</html>
Outra resposta:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"> function
opera(sNum1, sNum2, operacao)
{
num1 = parseFloat(sNum1);
num2 = parseFloat(sNum2);
if(operacao == '+') resultado = num1 + num2; else
if(operacao == '-') resultado = num1 - num2; else
if(operacao == '*') resultado = num1 * num2; else
resultado = num1 / num2; document.calculadora.result.value
= resultado;
}
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Exercicios\Evento\Calculadora.html</title>
</head>
<body>
<h1>4 Operações</h1>
<form name="calculadora">
<input type="text" name="op1">
<select name="operador">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="op2">
<input type="button" value=" = " onclick="opera(document.calculadora.op1.value, document.calculadora.op2.value,
document.calculadora.operador.value)">
<input type="text" name="result">
</form>
</body>
Exercícios
 Faça uma página HTML que leia o valor
de 2 números fracionários através de
comandos prompt. A página deverá
informar o valor do maior número lido.
 Faça 4 versões diferentes desta
página:
1) Utilize uma função que leia os 2
números e escreva o maior.
2) Utilize uma função que leia os 2 números
e retorne o maior (esta função não
escreva nada).
3) Utilize uma função que receba os 2
números e escreva o maior (esta função
não lê nada).
Exercícios
 Complete a página HTML a seguir:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Quadrado</title>
</head>
<body>

i = parseFloat(prompt("Informe um
número")); q = quad (i);
alert(i + " ao quadrado = " + q);

</script>

</body>
</html>

 Modifique a sua página para não

utilizar a variável q
Exercícios
 Complete a página HTML a seguir:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Exercício de Função</title>
</head>
<body>

aux = maior (n1, n2);

alert("O maior numero lido = " + maior(aux, n3));
alert("Media dos numeros lidos = " + media (n1, n2,
n3)); npares = par(n1) + par(n2) + par(n3);
alert("Total de numeros pares lidos = " +
npares); tot = media(n1, n2, n3);
alert("Total de valores acima da media = " +
total(n1, n2, n3, tot));
</script>

</body>
Exercícios
 Faça uma página HTML que leia o
valor de 2 números fracionários
através de comandos prompt. A
página deverá mostrar os 2
valores em ordem crescente.

 Crie uma nova versão para 3

números

 Desafio: crie uma versão

para CINCO números!
Exercícios

 Defina uma função chamada

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

 Defina uma função chamada

maiorDe3() que recebe 3 números
como parâmetros e retorna o maior
deles.
 Faça uma página para testar a sua
função
 Laço while
 Laço for
 Comando break
 Comando

continue

225
Laços while
 Permite repetir um comando ou
bloco enquanto uma condição for
verdadeira

 Forma geral: Condição

Fals
a

while(condição)
Verdadeir
{ a

comandos; Comando
s
}
Exemplo
<html>
<head>
<title>Exemplo de while()</title>
</head>
<body>
<h2>Repetição com while()</h2>
<script type="text/javascript">
i = 1;
while(i <= 10)
{
document.write(i, "<br>");
i++;
}
</script>
</body>
</html>
Laços do – while
 Repete um bloco de comandos
enquanto uma condição for verdadeira.
 Teste da condição é realizado no final da
iteração.
 Comandos são executados pelo menos
uma
do vez
Comando
 Sintaxe:
{ s
comandos;
}
while (condição); Condição
Verdadeir
a

Falsa
Exemplo:
<html>
<head>
<title>Exemplo de do-while()</title>
</head>
<body>
<h2>Repetição com do-while()</h2>
<script type="text/javascript">
i = 0;
do
{
document.write (i, "<br>");
i++;
}
while ( i <= 10 );
</script>
</body>
</html>
Comparação entre while() e do-
while()
<html> <html>
<head> <head>
<title>Exemplo de <title>Exemplo de do-
while()</title> while()</title>
</head> </head>
<body> <body>
<h2>Repetição com <h2>Repetição com do-
while()</h2> while()</h2>
<script <script
type="text/ type="text/
javascript"> javascript">
i = 8752; i = 8752;
while ( i <= 10 ) do
{ {
document.write(i, "<br>"); document.write (i, "<br>");
i++; i++;
} }
</script> while ( i <= 10 );
</body> </script>
</html> </body>
</html>
Laços for()
 Repete um comando
ou bloco controlado atribuição

por uma variável.

F
 Forma geral: condição

for (atribuição; V

condição; comandos incremento

incremento)
{
comandos;
seguinte
}
seguinte;
Exemplo:

<html>
<head>
<title>Exemplo de for</title>
</head>
<body>
<h2>Exemplo de for()</h2>
<script type="text/javascript">
for ( i = 0; i < 5; i++ )
document.write (i,
"<br>");
</script>
</body>
</html>
Separador de comandos no for()
 A vírgula funciona como separador
de comandos na atribuição e no
incremento
 Sintaxe:

for (inic1, inic2, inic3, ...;

condição;
atual1, atual2, atual3, ...)
{
comandos;
}
Exemplo:
<html>
<head>
<title>Exemplo de for com vírgula</title>
</head>
<body>
<script type="text/javascript">
document.write ("<h3>Tabela de Fatoriais</h3>");
for ( i = 1, fat = 1; i < 6; i++, fat *= i )
document.write(i, "! = ", fat, "<br>");
</script>
</body>
</html>
Comandos break e continue
 Permitem um controle adicional
sobre os laços de repetição

 break;

Pare a repetição já!

 continue;

Passe para a próxima iteração do laço!
Exemplo de uso de break:
<html>
<head>
<title>Exemplo de for</title>
</head>
<body>
<h2>Exemplo de for()</h2>
<script type="text/javascript">
for(i = 0; i < 5; i++)
{
if(i == 2) break;
;
document.write (i, "<br>")
}
</script>
</body>
</html>
Exemplo de uso de continue:
<html>
<head>
<title>Exemplo de for</title>
</head>
<body>
<h2>Exemplo de for()</h2>
<script type="text/javascript">
for(i = 0; i < 5; i++)
{
if(i == 2) continue;
document.write (i, "<br>");
}
</script>
</body>
</html>
Exercícios

 Faça um programa que imprima

todos os números de 0
(inclusive) até 10 (exclusive)
Sugestão de Solução

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Números de 0 até 10</title>
</head>
<body>
<script
type="text/javascript"
> for(i=0; i<10; i++)
document.write(i +
" ");
</script>
</body>
</html>
Exercícios

 Faça um programa que imprima

todos os números pares de 0 até
25 

242
Sugestão de Solução

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Números Pares</title>
</head>
<body>
<script type="text/javascript">
for(i=0; i<25; i=i+2)
document.write(i + " ");
</script>
</body>
</html>
Exercícios

 Faça um programa que imprima

todos os números pares de um
intervalo

Faça uma versão lendo os dados
de um formulário HTML

Faça uma versão lendo os dados
através de um prompt()
Sugestão de Solução do Item A
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function lista()
{
inicio = parseInt(document.dados.inicio.value);
if(inicio%2 != 0) inicio++;
fim = parseInt(document.dados.fim.value);
for(i=inicio; i<fim; i=i+2)
document.write(i + " ");
}
</script>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Pares em um intervalo com
formulário</title>
</head>
<body>
<form name="dados">
Início: <input type="text" name="inicio">
Fim: <input type="text" name="fim"><br/>
<input type="button" onclick="lista()"
value="Imprime">
Sugestão de Solução do Item B

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pares em um intervalo com formulário</title>
</head>
<body>
<script type="text/javascript">
inicio = parseInt(prompt("Inicio"));
if(inicio%2 != 0) inicio++;
fim = parseInt(prompt("Fim"));
for(i=inicio; i<fim; i=i+2)
document.write(i + " ");
</script>
</body>
</html>
Exercícios

 Faça um programa que imprima a

tabuada de um número lido

Faça uma versão lendo de um
formulário HTML

Faça uma versão lendo de um prompt()
Sugestão de Solução do Item A

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function tabuada()
{
valor = parseInt(document.dados.valor.value);
for(i=0; i<=10; i++)
document.write(i + " x " + valor + "
= " + (i * valor) + "<br/>");
}
</script>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Pares em um intervalo com
formulário</title>
</head>
Tabuada: <input type="text" name="valor"><input type="button" onclick="tabuada()" value="Imprime">
<body>
</form>
<form name="dados">
</body>
</html>
Sugestão de Solução do Item B

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pares em um intervalo com formulário</title>
</head>
<body>
<script type="text/javascript">
valor = parseInt(prompt("Tabuada de..."));
for(i=0; i<=10; i++)
document.write(i + " x " + valor + " = "
+ (i * valor) + "<br/>");
</script>
</body>
</html>
Exercícios

 Faça um programa que imprima o

fatorial de um número lido

Faça uma versão lendo de um
formulário HTML

Faça uma versão lendo de um prompt()
Sugestão de Solução do Item A

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fatorial()
{
resultado = 1;
valor = parseInt(document.dados.valor.value);
for(i=valor; i>0; i--)
resultado = resultado * i;
document.write("O fatorial de " + valor + " é
" + resultado);
}
</script>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Fatorial</title>
</head>
<body>
Fatorial: <input type="text" name="valor"><input type="button" onclick="fatorial()" value="Imprime">
<form name="dados">
</form>
</body>
</html>

251
Sugestão de Solução do Item B

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Fatorial</title>
</head>
<body>
<script type="text/javascript">
resultado = 1;
valor = parseInt(prompt("Fatorial de..."));
for(i=valor; i>0; i--)
resultado = resultado * i;
document.write("O fatorial de " + valor + "
é " + resultado);
</script>
</body>
</html>
Desafios
 Faça um programa que imprima
TODA a tabuada
Sugestão de Solução
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td>
<center><h1>Tabuada</h1></center>
<hr/>
<table>
<tr bgcolor="green"><td width='30' height='30' align='center' valign='middle'>X</td>
<script type="text/javascript">
for(i=1; i<10; i++)
document.write("<td width='30' height='30' align='center' valign='middle'>" + i + "</td>");
document.write("</tr>");
for(i=1; i<10; i++)
{
document.write("<tr><td bgcolor='green' height='30' align='center' valign='middle'>" + i +
"</td>"); for(j=1; j<10; j++)
document.write("<td bgcolor='brown' height='30' align='center' valign='middle'>" + (i*j) +
"</td>");
document.write("</tr>");
}
</script>
</table>
</td>
</tr>
</table>
</body>
</html>
Desafios

 Faça um programa que

imprima um tabuleiro de
xadrez

255
Sugestão de Solução

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tabuleiro de Xadrez</title>
</head>
<body>
<table border="1">
<script type="text/javascript">
for(i=0; i<8; i++)
{
document.write("<tr>");
for(j=0; j<8; j++)
if((i+j)%2 ==
0)
doc
ume
nt.
wri
te(
"<t
d
bgc
olo
r='
bla
ck'
wid
th=
'30
Grande desafio
 Obtenha a data de hoje (não é para
ler) e monte uma página com o
calendário, destacando o dia de
hoje (em vermelho, por exemplo).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Calendário</title>
</head>
<body>
<table>
<tr> <td align="center">Calendário</td>
</tr> <tr>
<td>
<table border='1'>
<script type="text/javascript"> mes = new Array(12);
ndias = new Array(12); mes[0]="Janeiro"; mes[1]="Fevereiro";

Sugestã
mes[2]="Março";
mes[3]="Abril";
mes[4]="Maio";
mes[5]="Junho";

o de
mes[6]="Julho";
mes[7]="Agosto"; mes[8]="Setembro"; mes[9]="Outubro";
mes[10]="Novembro"; mes[11]="Dezembro"; data = new Date();
document.write("<tr><th colspan='7' align='center'>" + mes[data.getMonth()] + " de " + data.getYear() + "</th></tr>");

Solução
proximoMes = new Date();
if(data.getMonth() == 11)
proximoMes.setFullYear(data.getYear() + 1, 0, 1);
else
proximoMes.setFullYear(data.getYear(), data.getMonth() +1, 1);
</script>
<tr>
<th>Dom</th><th>Seg</th><th>Ter</th><th>Qua</th><th>Qui</th><th>Sex</th><th>Sáb</th>
</tr>
<script type="text/javascript"> agora = new Date();
diaMes = 1; do
{
document.write("<tr>"); for(i=0; i<7; i++)
{
agora.setDate(diaMes);
if(((diaMes == 1) &&(i == data.getDay())) ||
((diaMes != 1) && (agora < proximoMes)))
{
if(data.getDate() == diaMes)
document.write("<t
d><font
color='red'>" +
diaMes +
"</font></td>");
else
document.write("<t
d>" + diaMes +
"</td>");
diaMes++;
}
else
document.write("<td> </td>");
}
document.write("</tr>");
}
while (agora < proximoMes);
</script>
Enorme Desafio: Jogo da Senha
 Faça o Jogo da Senha
 Funcionamento:
 2 jogadores
 Jogador 1:

O jogador 1 informa um número entre 0 e 9,
inclusive os extremos. A leitura é realizada através
de um campo do tipo senha.

O programa não aceita números inválidos. Neste caso,
pede para entrar com o número novamente

O jogador 1 informa o número máximo de tentativas do
jogador 2
 Jogador 2:

Chuta um número

Se for errado ou inválido, perde a chance e chuta
novamente

Se o número for válido mas errado, é informado se o
chute foi muito grande ou pequeno.

Se o chute estiver 1 unidade de distância da senha, o
usuário é informado que o chute foi quente, caso
contrário, frio (o jogador 2 não é informado se o número é
Outro desafio:

 Faça uma função que receba

um número inteiro como
parâmetro e retorne
verdadeiro se o número for
primo, caso contrário, retorne
falso
 Faça um script que informe os N
primeiros números primos.
Objetos
Introdução

 Javascript é uma linguagem de

programação orientada a objetos
(OO)

 Uma linguagem de programação

OO permite a definição de novos
objetos e novos tipos de dados
Programação OO
 Podemos utilizar os objetos já
definidos na linguagem ou criar
novos objetos

 Começaremos utilizando
objetos pré- definidos na
linguagem.

 Um objeto é apenas um tipo

especial de dado. Um objeto
possui propriedades e métodos.
Propriedades

 São os valores associados a um objeto

 No exemplo abaixo usamos a propriedade

length do objeto String para retornar a
quantidade de caracteres de um texto

 Exemplo:
<script
type="text/javascript">
var txt="Oi Turma!";
document.write(txt.lengt
h);
</script>

 O código acima terá

como saída o valor 9
Métodos
 São as ações que podem ser executadas
por um objeto
 No exemplo abaixo estamos usando o
método UpperCase() o objeto String para
exibir o texto em letras maiúsculas
 Exemplo
<script
type="text/javascript">
var str="Oi Turma!";
document.write(str.toUpper
Case());
</script>

 O código acima terá como saída o

Objeto String

 Permite a manipulação de
strings (textos) ou de partes de
um texto

 Esta manipulação pode ser feita

através da chamada de métodos

 Existem vários métodos pré-

definidos para o objeto String
Exemplo utilizando estilos no texto a ser
exibido
<html>
<body>

document.write("<p>Bold: " + txt.bold() +

"</p>"); document.write("<p>Italic: " +
txt.italics() + "</p>");

document.write("<p>Blink: " + txt.blink() +

"</p>"); document.write("<p>Fixed: " +
txt.fixed() + "</p>");
document.write("<p>Strike: " + txt.strike() +
"</p>");

document.write("<p>Fontcolor: " + txt.fontcolor("Red") +

"</p>"); document.write("<p>Fontsize: " + txt.fontsize(16)
+ "</p>");

document.write("<p>Lowercase: " + txt.toLowerCase() +

"</p>"); document.write("<p>Uppercase: " +
txt.toUpperCase() + "</p>");

document.write("<p>Subscript: " + txt.sub() +

"</p>"); document.write("<p>Superscript: " +
txt.sup() + "</p>");
Objeto String: método indexOf()
 Exemplo usando o método indexOf() para retornar
a posição da primeira ocorrência de um texto
específico em um texto
<html>
<body>
<script
type="text/javascript">
str="Oi Turma!";
document.write(str.indexOf("Oi") + "<br />");
document.write(str.indexOf("Turma") +
"<br />");
document.write(str.indexOf("turma"));
</script>
</body>
</html>

 O código acima terá como saída os

valores:
Objeto String: método match()
 Exemplo usando o método match() para procurar um texto
específico dentro de um texto e caso encontre retorna o
valor do texto
<html>
<body>
<script
type="text/javascript">
str="Oi Turma!";
document.write(str.match("turma") + "<br
/>"); document.write(str.match("Turma") +
"<br />");
document.write(str.match("turna") +
"<br />");
document.write(str.match("Turma!"));
</script>
</body>
</html>

 O exemplo acima terá como saída:

Objeto String: método replace()
 Exemplo usando o método replace()
para substituir alguns caracteres por
outros em um
texto
<html>
<body>
<script type="text/javascript">
str="Oi Turma!";
document.write(str.replace(/Turma/,"Pesso
al")); document.write(str);
</script>
</body>
</html>
 O resultado da página será:
Oi
Pessoal
Oi
Objeto String - Propriedades
Objeto String - Métodos
Objeto Array
 Um objeto Array é utilizado para
armazenar vários valores em uma
única variável
 Todos os valores armazenados em
um array são de um mesmo tipo
 Necessita de um índice para
podermos nos referenciarmos a um
dos dados armazenados no array
 O índice do array é um número
inteiro. O primeiro índice de um
array é sempre o 0 (zero).
Objeto Array: criação
 Exemplo criando um objeto
Array
<html>
<body>

for (i=0;i<diasemana.length;i++)
document.write(diasemana[i] +
"<br />");
Objeto Array: método sort()

 Exemplo utilizando o método sort() que ordena o array em ordem

crescente
<html>
<body>

document.write(estado + "<br
/>");
document.write(estado .sort());
</script>
Referência 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
Objeto Date
 Permite a utilização de
datas e horas

 Criando um objeto data:

var minhaData = new
Date();


Obs.: o objeto data possuirá
automaticamente a data
e a hora atual como valor
Objeto Date: método Date()

 Exemplo usando o método Date()

para obtenção da data e hora
corrente

</body>
Objeto Date: método Date()
 Exemplo usando o método Date() e um array para exibir o dia
da semana

 Criar um objeto data representado o dia 28 de agosto

de 1970

<html>
<head>
<title>Configurando a Data</title>
</head>
<body>

</body>
</html>
Comparando Duas Datas

<html>
<head>
<title>Comparação de Datas</title>
</head>
<body>

if (hoje > minhaData)

alert ("Hoje é depois de 27/07/1970");
else
alert ("Hoje é antes de
27/07/1970");
</script>

</body>
</html>
Referência 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)

Returns the day of the week from a Date object according to universal time (from 0-6)
getUTCDay()
Referência 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

Returns the hour of a Date object according to universal time (from 0-23)
getUTCHours()
Returns the minutes of a Date object according to universal time (from 0-59)
getUTCMinutes()
Returns the seconds of a Date object according to universal time (from 0-59)
getUTCSeconds()

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)
Referência 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)

Set the minutes in a Date object according to universal time (from 0-59)
setUTCMinutes()
Set the seconds in a Date object according to universal time (from 0-59)
setUTCSeconds()
Sets the milliseconds in a Date object according to universal time (from 0-999)
setUTCMilliseconds() setYear() Sets the year in the Date object (two or four digits). Use setFullYear() instead !!
Referência 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

Exercícios
 Faça uma página com um
formulário com um campo de e-
mail e um botão.
 O usuário deverá digitar o seu
endereço de e-mail e a página
deverá mostrar o domínio do e-mail
do usuário.

Dicas:

O método de string chamado de
indexOf(texto) devolve a primeira
ocorrência de texto dentro da string

A propriedade de string chamada de
length equivale ao número de caracteres
da string

Exercícios
 Fazer uma página HTML que informe
qual o browser que o usuário 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
Exercícios

 Fazer um programa em javascript

que leia duas strings e monte uma
página indicando a posição de todas
as ocorrências da segunda string na
primeira.


Exemplo:

Primeira string: “Este é um texto que
contém um texto com a palavra texto”

Segunda string: “texto”

Resultado: 10 30 50
Exercícios

 Fazer uma página que cada vez que

é recarregada exibe um banner
escolhido aleatoriamente. Desta vez,
utilize um vetor de nomes de figuras.

Dica:

Para obter um número aleatório entre 0 e 4,
utilize parseInt(Math.random()*5)

Coloque o endereço das figuras em um
array de strings

Obs.: Utilize pelo menos 5 figuras
diferentes.
Exercícios
 Obtenha a data de hoje (não é
para ler) e monte uma página com
o calendário, destacando o dia de
hoje (em vermelho, por exemplo).
Exercícios

 Escreva uma função que recebe

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

 Defina uma função soma() e uma

função multiplica() que soma e
multiplica, 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
 Faça uma página HTML para testar
a sua função.
Exercícios

 Defina uma função reverso()

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

 Escreva uma função chamada

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

 Rövarspråket é um jogo Sueco

onde se codifica um texto
duplicando cada consoante e
incluindo uma letra o entre cada
uma delas. Vogais são mantidas
intactas como no exemplo a seguir:

Este seria um texto!

Esostote soseroria umom totexoxtoto!
 Implemente uma página que
contenha um formulário para
implementar o jogo.
Mais Objetos
Objetos do browser
 O navegador cria automaticamente uma
hierarquia de objetos refletindo alguns
elementos inseridos na página.

 Os atributos da tag viram propriedades do

objeto.

 Algumas propriedades podem ter

seu valor modificado.

 O navegador mantém a coerência entre o

valor da propriedade e o que está sendo
visualizado pelo usuário.
Hierarquia de Objetos JavaScript

 navigator

 window

frames [ ]

document

forms [ ]
 ele
men
ts [ ]
:
butt
on,
chec
kbo
x,
radi
o,
Página exemplo

images[0]
forms[0] elements[0]
elements[1]
elements[2]
images[1]
links[0]
links[1]
Página exemplo
<body>
<h1 align="center">Home Page</h1>
<form>
<table align="center">
<tr>
<td align="right">Nome:</td>
<td><input type='text' name='nome' value='Alexandre'
/></td>
</tr>
<tr>
<td align="right">e-mail:</td>
<td><input type='text' name='email' value=
'alexandre.meslin@gmail.com' /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type='submit'
value='Envia'></input></td>
</tr>
</table>
</form>
<a href='http://www.meusite.com.br'>Link para meu
site</a><br>
<a href='http://wwww.outrosite.com.br'>Link para
outro site</a><br>
<hr />
<script type="text/javascript">
document.write(document.forms[0].elements[0].value +
'<br/>');
document.write(document.forms[0].elements[1].value +
'<br/>');
document.write(document.links[0] + '<br/>');
document.write(document.links[1] + '<br/>');
</script>
</body>
Objeto window

 Escreve na barra de status

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Coloca uma mensagem em uma barra de
status</title>
<script type="text/javascript">
window.status = “Modificando a barra de status";
</script>
</head>
<body>
<p>
Veja uma mensagem na barra de status.
</p>
</body>
</html>
Descobrindo o tipo de browser

 Algumas coisas não

funcionam em
determinados browsers
 Algumas coisas devem ser escritas
de forma diferentes em diferentes
browsers para obtermos o mesmo
efeito
 Para detectarmos o tipo de
browser, utilizamos o objeto
navigator
Objeto navigator

 Objeto navigator

Permite configurar as aplicações
para navegadores diferentes

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

<html>
<head>
<title>Tipo de Browser</title>
</head>
<body>
<script type="text/javascript">
browser = navigator.appName;
b_versao = navigator.appVersion;
versao = parseFloat(b_versao);

document.write("Browser: " + browser + "<br/>");

document.write("Versão: " + versao + "<br/>");
</script>
</body>
</html>
Alguns detalhes do objeto navigator

 Serve para definir/consultar

características 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)
Javascript e DOM HTML

 Javascript pode ser utilizado para

modificar o conteúdo ou os atributos
de elementos HTML

Modificando o conteúdo:
document.getElementById(id).innerHTML =
novo HTML

Modificando um atributo:
document.getElementById(id).atributo =
novo valor

Modificando um estilo:
document.getElementById(id).style.propried
ade = novo estilo
Javascript e DOM HTML

<html>
<body>
<p id="paragrafo">Um teste!</p>
<form>
<input type="button"
value="Muda conteúdo!"
onclick='document.getE
<input lementById("paragrafo"
).innerHTML = "outro
texto"'>
</form> type="button"
</body> value="Muda conteúdo!"
onclick='document.getE
</html> lementById("paragrafo"
).style.color =
"red"'>
Modificando uma figura

<html>
<body>
<img src='imagens/smile1.gif' id='imagem'
onmouseover='document.getElementById("imagem").src="
imagens/smile2.gif"'
onmouseout='document.getElementById("imagem").src="i
magens/smile1.gif"'/>
</body>
</html>
Eventos HTML
 Cada elemento em uma página
HTML tem eventos que podem
disparar scripts em Javascript

 Exemplos de eventos:

Um clique de mouse

Uma página carregada

Uma imagem carregada

A Seleção de um campo de entrada
em um formulário HTML

O envio de um formulário

O acionar de uma tecla
Exemplo

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

 this, como o nome está dizendo,

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

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

<html>
<body>
<h1 id="cabecalho"
onclick='this.style.color="red"'>Título do Texto</h1>
<p
onclick='document.getElementById("cabecalho").style.color=
"blue"'>Um parágrafo</p>
</body>
</html>
Mais um exemplo
<html>
<head>
<script type="text/javascript">
function mudaCor(nomeDoObjeto,
cor)
{
document.getElementById(nomeDoOb
jeto).style.color = cor;
}
</script>
</head>
<body>

<h1 id="cabecalho" onclick='mudaCor("cabecalho",

"#104175")'>Título do Texto</h1>
<p onclick='mudaCor("cabecalho", "blue")'>Um
parágrafo</p>
<a href='www.meslin.com' id='umLink'>Não é meu
site</a>
<div onmouseover='mudaCor("umLink", "yellow")'
onmouseout='mudaCor("umLink", "black")'>Muda cor
do link</div>
Exercícios

 Faça uma página com um formulário

com um campo para o usuário
informar o seu nome e outro para
informar o seu sexo. Ao clicar no
botão, uma janela de confirmação
deverá ser aberta apresentando os
dados informados.
1) Use radio para selecionar o sexo
2) Use select para selecionar o sexo
Exercícios
 Faça uma página com um
formulário contendo um campo
para o usuário informar o seu
nome e campos checkbox para
que seja informado os tipos de
atividades desejadas. Ao clicar no
botão, uma janela de confirmação
deverá ser aberta apresentando
os dados informados.

 Desafio: modifique o exercício para que

o usuário possa clicar no texto
Exercícios

 Faça uma página HTML com

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

322
Exercícios

 Faça uma página HTML com uma

figura. Ao clicar na figura, esta
deverá mudar.
Exercícios

 Faça uma página HTML que

possua dois botões, um para
aumentar o tamanho do fonte e
outro para diminuí-lo. Coloque um
texto com vários parágrafos
Exercícios

 Faça uma página HTML

contendo um formulário com os
campos:

Nome: somente letras maiúsculas

Data de nascimento: formato
dd/mm/aaaa

CEP: formato nnnnn-nnn

CPF: formato nnn.nnn.nnn-dd
 Ao selecionar o campo que será
preenchido, o usuário deverá
Desafio!

 Refaça o exercício do tamanho

do fonte e inclua entre um
parágrafo e outro, o exercício da
figura que muda ao passar o
mouse por cima
Desafio

 Faça um menu no estilo Windows (ou

Mac ou Linux)

327