Caderno de Exercicios Javascript

JJavaScript
avaS
Script
i
JavaScriptp
JavaScript
JavaScript
Java
Ja vaSc
Scri
ript
pt
JavaScript
JJavaScript
avaS
Script
i
JavaScriptp
JavaScript
JavaScript
Java
Ja vaSc
Scri
ript
pt
JavaScript
JavaScript
JavaScriptp
JavaScript
JavaScript
Java
Ja vaSc
Scri
ript
pt
JavaScript
JavaScript
JavaScript
Java
Ja vaSc
Scri
ript
pt
JavaScript
JavaScript
Java
Ja vaSc
Scri
ript
pt
JavaScript
JavaScript
JavaScript
Java
Ja vaSc
Scri
ript
pt
JavaScript
JJavaScript
avaS
Scriiptt
JavaScript
JavaScript
JavaScript
Java
Ja vaSc
Scri
ript
pt
JavaScript
JJavaScript
avaS
Script
i
JavaScriptp
Caderno de Exercícios JavaScript
JavaScript JavaScript
Java
Ja vaSc
Scri
ript
JavaScript
pt
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
Copyright © 2020
Todos os direitos reservados. Lei 9.610/98 e atualizações.
Nenhuma parte desta publicação impressa poderá ser re-
produzida ou transmi da, por quaisquer meios empregados,
sejam eletrônicos, mecânicos, fotográficos, gravações, etc.
Todas as marcas e imagens de hardware, so ware e outros,
u lizados e/ou mencionados nesta obra, são propriedades de
seus respec vos fabricantes, donos e/ou criadores.
2
Sumário
1. Introdução ao Javascript .................................................................................................................... 5

2. Estrutura de Codificação ................................................................................................................... 5
3. Variáveis e Tipos de Dados ................................................................................................................ 8
4. Operadores Matemá cos ................................................................................................................ 10
5. Strings .............................................................................................................................................. 12
6. Criação de Arrays ............................................................................................................................. 15
7. Funções ........................................................................................................................................... 17
8. Criação de Objetos .......................................................................................................................... 21
9. Condições ........................................................................................................................................ 23
10. Estrutura Switch ............................................................................................................................ 25
11. Ciclo For ......................................................................................................................................... 28
12. Ciclo While..................................................................................................................................... 30
13. Introdução aos Eventos ................................................................................................................. 32
14. Eventos de Clique .......................................................................................................................... 35
15. Eventos de Carregamento ............................................................................................................. 37
16. Tratamento de Exceções ................................................................................................................ 40
17. Manipulação de Data .................................................................................................................... 43
18. Criação de Valores ......................................................................................................................... 45
19. Controle de Janela ......................................................................................................................... 47
20. Funções de Tempo ......................................................................................................................... 50
21. Projeto de Exemplo - 1 .................................................................................................................. 52
3
4
1. INTRODUÇÃO AO JAVASCRIPT
No primeiro capítulo conhecemos as funções do JavaScript. Resolva os exercícios referentes
para colocar em prá ca o seu aprendizado.
1. O que é o JavaScript? O que ele permite?
2. Qual é a diferença entre JavaScript e Java?
3. O que é necessário para u lizar a linguagem JavaScript?
4. Nas lacunas a seguir marque V para verdadeiro ou F para falso de acordo com as afirmações:
( ) O JavaScript é executado pelo navegador diretamente do lado do cliente.

( ) A codificação em JavaScript fica dentro da tag style.
( ) Um arquivo inteiramente em JavaScript é salvo com a extensão js.
( ) O JavaScript é uma linguagem muito segura, não sendo possível alterar o código.
2. ESTRUTURA DE CODIFICAÇÃO
Conhecemos diferentes maneiras de se inserir códigos JavaScript em um documento HTML.
Faça as a vidades a seguir para pra car seus estudos.
1. Como se exibe um elemento na página com um código JavaScript?
5
2. Geralmente, que po de códigos JavaScript se escreve em head e em body?
Passo a passo:
1. Para começar abra o Sublime Text.

2. Clique em File e selecione New File.
3. Acesse o menu File e selecione Save As.
4. Escolha um local para armazenar uma nova pasta de arquivos. Depois, clique em Nova
pasta.
5. Nomeie a pasta como Arquivos JavaScript.
6. Abra a nova pasta para armazenar o arquivo.
7. No campo Nome digite exemplo.html e clique em Salvar para confirmar.
8. Com o arquivo criado, inicie a estrutura do HTML digitando: <html
9. Tecle <Enter> para aceitar a sugestão do programa.
10. Com o cursor posicionado entre as tags de tulo, digite: Exemplo JavaScript
11. Coloque o cursor após a tag de fechamento de Ɵtle e tecle <Enter>.
12. Digite a tag script: <script></script>
13. Posicione o cursor entre as tags de abertura e fechamento do script e tecle <Enter>.
14. Digite o comando: document.write("Bem-vindo!");
<!DOCTYPE html>
<html>
<head>
<title>Exemplo JavaScript</title>
<script type="text/JavaScript">
document.write("Bem-vindo!");
</script>
</head>
<body>
</body>
</html>
Arquivo exemplo.html
15. Salve as alterações acessando o menu File e clicando em Save.

16. Abra o arquivo exemplo.html no navegador.
Visualização da mensagem de Bem-vindo
6
17. Observe o texto exibido na página. Depois, retorne ao Sublime.

18. Selecione a tag script com o seu conteúdo e tecle <Ctrl> + <X> para recortá-la.
19. Coloque o cursor dentro de body e tecle <Tab> para aplicar a indentação correta.
20. Cole os códigos teclando a combinação <Ctrl> + <V>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/JavaScript">
</script>
</body>
</html>
Código JS em <body>
21. Salve as alterações. Depois, volte ao navegador e atualize a página.
Visualização no navegador
22. Retorne ao Sublime para testarmos outro método de codificação.

23. Crie um novo arquivo chamado exemplo.js. Salve-o na pasta Arquivos JavaScript.
24. Acesse o documento HTML e selecione a linha do comando document.write. Tecle a com-
binação <Ctrl> + <C> para copiar o código.
25. Volte ao arquivo JavaScript e tecle <Ctrl> + <V> para colar o comando.
26. Salve as alterações e retorne ao documento HTML.
27. Selecione e apague a tag script com o seu conteúdo.
28. Coloque o cursor após a tag de fechamento do tulo e tecle <Enter>.
29. Digite o código para vincular o arquivo JavaScript: <script src="exemplo.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="exemplo.js"></script>
</head>
<body>
</body>
</html>
Arquivo JS externo
30. Salve as alterações no documento, acesse o navegador e atualize a página.
7
31. Visualize que nada se alterou. Feche o navegador.
Visualização da mensagem
32. Para finalizar feche os arquivos e o Sublime.
3. VARIÁVEIS E TIPOS DE DADOS

Durante esse capítulo aprendemos a criar variáveis no JavaScript, conhecendo diferentes pos
de dados. Para desenvolver o seu entendimento acerca do assunto faça os exercícios referentes.
1. Ao que se refere uma variável?
2. O que é preciso fazer para exibir o valor de uma variável na página?
Passo a passo:
1. Abra o Sublime Text.

2. Acesse o menu File e clique em Open File.
3. Abra os arquivos exemplo.html e exemplo.js, presentes dentro da pasta Arquivos JavaScript.
4. Acesse o arquivo JavaScript, posicione o cursor após o ponto e vírgula do primeiro co-
mando e tecle <Enter> duas vezes.
5. Digite a variável: var numero = 10;
6. Tecle <Enter> duas vezes e digite: document.write(numero);
var numero = 10;
document.write(numero);
Adicionando variável
7. Salve as alterações no arquivo e abra o arquivo exemplo.html no navegador.
8
8. Após visualizar a página, retorne ao Sublime.

9. Posicione o cursor antes das aspas que fecha o texto do primeiro comando document.
write. Então, digite: <br><br>
document.write("Bem-vindo! <br><br>");
var numero = 10;
document.write(numero);
Adicionando tag <br>
10. Salve as alterações e atualize a página no navegador.

11. Retorne ao Sublime. Depois, posicione o cursor após a declaração da variável número e
tecle <Enter>.
12. Digite a nova variável: var nome = "Aluno";
13. Posicione o cursor antes do parêntese que fecha o segundo comando document.write,
tecle <Espaço> e digite: + "<br>" + nome
14. Atualize a página no navegador após salvar as alterações no arquivo.
15. Volte ao Sublime, posicione o cursor após a declaração da variável nome, tecle <Enter> e
digite: var frase = false;
16. Coloque o cursor antes do parêntese que fecha o segundo comando document.write, te-
cle <Espaço> e digite: + "<br>" + frase
var numero = 10;

var nome = "Aluno";
var frase = false;
document.write(numero + "<br>" + nome + "<br>" + frase);
Arquivo exemplo.js
Resultado final
18. Visualize os dados exibidos na página. Depois, feche o navegador, os arquivos e o Sublime.
9
4. OPERADORES MATEMÁTICOS
Nesse capítulo aprendemos a u lizar operadores matemá cos para realizar cálculos com as va-
riáveis. A seguir encontram-se alguns exercícios para prá ca.
1. O que são os operadores? O que eles permitem?
2. Relacione os operadores a seguir com suas respec vas descrições:
1. Operador de soma
2. Operador de subtração
3. Operador de mul plicação
4. Operador de divisão
( ) É representado pelo caractere asterisco (*).

( ) É representado pelo sinal de adição (+).
( ) É representado pelo caractere barra (/).
( ) É representado pelo caractere de hífen (-).
Passo a passo:
1. Comece abrindo o Sublime com os arquivos exemplo.html e exemplo.js, presentes na

pasta Arquivos JavaScript.
2. Acesse o arquivo JavaScript. Depois, selecione e apague as variáveis existentes.
3. Digite a variável: var num1 = 12;
4. Tecle <Enter> e digite a segunda variável: var num2 = 7;
5. Tecle <Enter> e digite a variável do resultado: var resultado = num1 + num2;
6. Selecione o conteúdo presente dentro dos parênteses do segundo document.write e tecle
<Delete> para apagá-lo. No lugar digite: resultado
document.write("Bem-vindo!<br><br>");
var num1 = 12;
var num2 = 7;
var resultado = num1 + num2;
document.write(resultado);
Somando as variáveis
7. Salve as alterações e abra o arquivo exemplo.html no navegador.

8. Visualize o valor apresentado e, depois, retorne ao Sublime.
9. Apague o valor da variável num2 e, no lugar, digite: "4"
10. Atualize a página no navegador após salvar as alterações.
11. Retorne ao Sublime e tecle <Ctrl> + <Z> até voltar ao valor numérico na variável num2.
10
12. Apague o sinal de adição da variável resultado e, no lugar, digite o operador de subtração (-)
var num1 = 12;
var num2 = 7;
var resultado = num1 - num2;
Subtraindo as variáveis
13. Salve as alterações no arquivo e atualize a página.

14. Retorne ao Sublime, apague o sinal de subtração e, no lugar, digite o operador de mul -
plicação (*)
var num1 = 12;
var num2 = 7;
var resultado = num1 * num2;
MulƟplicando as variáveis
15. Após salvar as alterações, atualize a página no navegador.

16. Volte ao Sublime, apague o sinal de mul plicação e digite o operador de divisão (/)
var num1 = 12;
var num2 = 7;
var resultado = num1 / num2;
Dividindo as variáveis
17. Salve as modificações e atualize a página.
Resultado da divisão
18. Visualize o resultado. Depois, retorne ao Sublime, apague o sinal de divisão e digite o
operador módulo (%)
19. Atualize a página no navegador após salvar as modificações.
20. Volte ao Sublime, posicione o cursor após a declaração da variável num2 e tecle <Enter>.
11
21. Digite o comando de incremento: num1++;

22. Selecione e apague o valor da variável resultado. No lugar digite: num1
var num1 = 12;
var num2 = 7;
num1++;
var resultado = num1;
Incremento

24. Volte ao Sublime e apague os sinais de adição do comando de incremento. No lugar digite
o operador de decremento (--)
25. Atualize a página depois de salvar as alterações no arquivo.
26. Volte ao Sublime, apague o operador de decremento e, no lugar, digite: +=10
27. Salve as alterações e atualize a página.
28. Retorne ao Sublime, apague o sinal do operador e digite: -=
var num1 = 12;
var num2 = 7;
num1-=10;
var resultado = num1;
Decremento
29. Após salvar as alterações, atualize a página.
Resultado no navegador
30. Feche o navegador, os arquivos e o Sublime.
5. STRINGS
Aprendemos a inserir e manipular strings no JavaScript. Na sequência encontram-se algumas
a vidades referentes ao conteúdo apresentado.
12
1. O que é preciso fazer para criar uma variável do po string?
2. Na linguagem JavaScript o que a barra inver da faz?
Passo a passo:
1. Abra o Sublime e os arquivos exemplo.html e exemplo.js, que estão na pasta Arquivos

JavaScript.
2. Acesse o arquivo JavaScript, selecione as variáveis presentes no arquivo e tecle <Delete>
para apagá-las.
3. Digite a variável: var texto = "Exemplo de texto";
4. Selecione e apague a variável presente dentro do segundo comando document.write. No
lugar digite: texto
var texto = "Exemplo de texto";
document.write(texto);
Variável texto
Visualização da variável no navegador
6. Observe o texto exibido. Depois, retorne ao Sublime.

7. Posicione o cursor após a declaração da variável, tecle <Enter> e digite: texto = texto.
toUpperCase();
texto = texto.toUpperCase();
Variável texto em maiúsculo
13
8. Salve as alterações no arquivo e atualize a página no navegador.
Exibição do texto em maiúsculo no navegador
9. Volte ao Sublime, selecione e apague a palavra toUpperCase e, no lugar, digite: toLower-

Case
10. Após salvar as modificações, atualize a página no navegador.
11. Retorne ao Sublime, selecione e apague o comando do método toLowerCase. No lugar
digite: texto = texto.length;
texto = texto.length();
Tamanho da variável
12. Salve as alterações no arquivo e atualize a página.
Exibindo o tamanho da variável
13. Retorne ao Sublime, selecione o comando da propriedade length e tecle <Delete> para
removê-lo.
14. Digite a variável do po string: var texto2 = " no JavaScript";
15. Tecle <Enter> e digite a variável da concatenação: var concatenacao = texto + texto2;
16. Selecione e apague o conteúdo dentro dos parênteses do segundo document.write. No
lugar digite: concatenacao
var texto2 = " no JavaScript";
var concatenacao = texto + texto2;
document.write(concatenacao);
Concatenando as variáveis
14
Visualização da concatenação
18. Retorne ao Sublime e coloque a palavra JavaScript entre aspas.

19. Salve as modificações e atualize a página no navegador.
20. Volte ao Sublime, posicione o cursor antes das duas aspas da palavra JavaScript e digite
a barra inverƟda.
var texto2 = " no \"JavaScript\"";
var concatenacao = texto + texto2;
document.write(concatenacao);
Adicionando aspas
22. Observe como ficou o texto. Para encerrar feche o navegador, os arquivos e o Sublime.
6. CRIAÇÃO DE ARRAYS
Aqui aprendemos a criar arrays, declarando diversos valores para uma mesma variável. A seguir
se tem algumas a vidades para pra car seu entendimento sobre o tema.
1. Em programação o que é um array?
15
2. Como a linguagem JavaScript iden fica um array?
Passo a passo:
1. Comece abrindo o Sublime e os arquivos exemplo.html e exemplo.js, que estão na pasta

Arquivos JavaScript.
2. Acesse o arquivo JavaScript, selecione as variáveis presentes no arquivo e tecle <Delete>
para removê-las.
3. Digite o array: var frutas = ["morango", "laranja", "uva", "abacate"];
4. Selecione o conteúdo presente dentro do segundo comando document.write e tecle
<Delete> para apagá-lo.
5. No lugar digite: frutas
var frutas = ["morango", "laranja" , "uva", "abacate"];
document.write(frutas);
Adicionando array
Visualização do array
7. Visualize os valores exibidos na página e retorne ao Sublime.

8. Com o cursor posicionado após o nome da variável dentro do comando document.write,
digite: [0]
var frutas = ["morango", "laranja", "uva", "abacate"];
document.write(frutas[0]);
Adicionando array
16
Exibição do primeiro item do array
10. Volte ao Sublime e, com o cursor dentro dos parênteses do document.write, digite: , fru-
tas[3]
12. Retorne ao Sublime, selecione o conteúdo presente dentro do segundo document.write
e tecle <Delete> para apagá-lo. No lugar digite: frutas
13. Selecione e apague o valor da variável frutas. No lugar digite: new Array (3)
14. Posicione o cursor após a declaração da variável e tecle <Enter> duas vezes.
15. Digite o índice 0 com o seu valor: frutas[0] = "uva";
16. Tecle <Enter> e digite o índice 1 com o seu valor: frutas[1] = "pessego";
17. Pressione <Enter> e digite o índice 2 com o seu valor: frutas[2] = "abacaxi";
var frutas = new Array (3);
frutas[0] = "uva";
frutas[1] = "pessego";
frutas[2] = "abacaxi";
document.write(frutas);
Adicionando array
Visualização do array no navegador
19. Para encerrar feche o navegador, os arquivos e o Sublime.
7. FUNÇÕES
Foi ensinado a se criar funções e inserir parâmetros para elas. Prossiga com os seus estudos
fazendo as a vidades a seguir.
17
1. Como se cria uma função na linguagem JavaScript?
2. Analise as afirmações a seguir:
( ) O ideal é u lizar uma mesma função para executar diversas tarefas diferentes.
( ) Os parâmetros são operadores matemá cos que são u lizados dentro de uma função.
( ) A vantagem de se u lizar parâmetros é que em cada chamada da função pode-se u lizar
um valor diferente para eles.
( ) A função com o comando return executa uma tarefa e retorna um valor.
Estão corretas somente:
a) 1 e 2.
b) 1 e 4.
c) 2 e 3.
d) 3 e 4.
Passo a passo:
1. Abra o Sublime e os arquivos exemplo.html e exemplo.js, que estão dentro da pasta Ar-
quivos JavaScript.
2. Acesse o arquivo JavaScript, selecione a variável do array e as declarações de seus ele-
mentos.
3. Apague o conteúdo selecionado teclando <Delete>.
4. Comece digitando a estrutura da função: funcƟon alerta() {
5. Com o cursor posicionado entre as chaves de abertura e fechamento da função, tecle
<Enter> para organizar o bloco.
6. Digite o comando alert: alert("Bem-vindo ao site!");
function alerta() {
alert("Bem-vindo ao site!");
}
Criando uma função

8. Repare que nenhum alerta foi exibido. Retorne ao Sublime.
9. Coloque o cursor após a chave que fecha a função e tecle <Enter>.
10. Digite a invocação da função: alerta();
18
function alerta() {
alert("Bem-vindo ao site!");
}
alerta();
Criando uma função
11. Após salvar as alterações no arquivo, atualize a página no navegador.
Resultado da função
12. Clique em OK para fechar a mensagem.

13. Volte ao Sublime, posicione o cursor entre os parênteses da função e digite: mensagem
14. Selecione e apague o conteúdo dos parênteses do comando de alerta presente dentro da
função. No lugar digite: mensagem
15. Posicione o cursor dentro dos parênteses da chamada da função e digite: "Bem-vindo
novamente ao site!"
function alerta(mensagem) {
alert(mensagem);
}
alerta("Bem-vindo novamente ao site!");
Alterando a função

17. Retorne ao Sublime, posicione o cursor após a chave de fechamento da primeira função
e tecle <Enter> duas vezes.
18. Digite a nova função: funcƟon divisao (num) {
19. Com o cursor entre as chaves, tecle <Enter> para organizar o bloco.
20. Digite o comando: return num / 3;
21. Selecione o conteúdo presente dentro dos parênteses da chamada da função e tecle <De-
lete> para apagá-lo.
22. Para a chamada da função digite: "O resultado da operação é: " + divisao(15)
19
function alerta(mensagem) {
alert(mensagem);
}
function divisao (num) {
return num / 3;
}
alerta("O resultado da operação é:" + divisao(15));
Nova função

24. Clique em OK para fechar a mensagem.
25. Volte ao Sublime e acesse o documento HTML.
26. Posicione o cursor após a tag script, tecle <Enter> e digite: <meta charset="UTF-8">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Alterando o arquivo HTML
27. Salve as alterações no documento e atualize a página.

28. Visualize o alerta e, depois, clique em OK para fechá-lo.
Resultado final
20
8. CRIAÇÃO DE OBJETOS
Durante esse capítulo aprendemos a criar um objeto com diferentes propriedades. Na sequên-
cia encontram-se alguns exercícios para prá ca.
1. Qual a diferença entre a estrutura de um array e de um objeto?
2. Quando o uso de objetos é mais indicado?
Passo a passo:
1. Abra o Sublime com os arquivos exemplo.html e exemplo.js, que estão dentro da pasta
2. Acesse o arquivo JavaScript.
3. Selecione e apague as funções e sua chamada.
4. Digite o objeto: var pessoa = {nome: "Maria", sobrenome: "Castro", idade: 27};
5. Selecione e apague o conteúdo presente dentro dos parênteses do segundo comando
document.write. No lugar digite: pessoa["nome"]
var pessoa = {nome: "Maria", sobrenome: "Castro", idade: 27};
document.write(pessoa["nome"]);
Criando um objeto
21
7. Visualize a propriedade exibida na página e retorne ao Sublime.

8. Selecione e apague o conteúdo do comando document.write. Digite: pessoa.sobrenome
document.write(pessoa.sobrenome);
Exibindo conteúdo do objeto
Visualização do sobrenome
10. Retorne ao Sublime, posicione o cursor antes da chave que fecha o objeto e digite: , aler-
ta: funcƟon(){alert("Exemplo de Alerta")}
11. Selecione e apague o conteúdo dentro do document.write. No lugar digite: pessoa.
alerta()
var pessoa = {nome: "Maria", sobrenome: "Castro", idade: 27, alerta:
function(){alert("Exemplo de Alerta")}};
document.write(pessoa.alerta());
Inserindo a função alerta
Mensagem da função alerta
13. Clique em OK para fechar o alerta e retorne ao Sublime.

14. Selecione e apague o conteúdo presente dentro do document.write. Então, digite: pes-
soa.nome + " " + pessoa.sobrenome
22
16. Volte ao Sublime. Depois, posicione o cursor antes da chave que fecha o comando docu-
ment.write, tecle <Espaço> e digite: + " " + pessoa.idade
document.write(pessoa.nome + " " + pessoa.sobrenome + " " + pessoa.idade);
Exibindo conteúdo do objeto
Resultado final
9. CONDIÇÕES
Nesse capítulo aprendemos a criar estruturas de condições no código, conhecendo também
diferentes operadores de comparação e lógicos. Con nue com seus estudos resolvendo os exercícios
a seguir.
1. O que é possível fazer ao se aplicar condições no código?
2. O que os operadores lógicos permitem na estrutura de condições?
Passo a passo:
1. Para começar abra o Sublime e os arquivos exemplo.html e exemplo.js, presentes na

2. Acesse o arquivo JavaScript.
3. Selecione a variável do objeto com todas as suas propriedades. Depois, tecle <Delete>
para apagá-la.
4. Digite a variável: var n = 50;
5. Tecle <Enter> duas vezes e inicie a condição: if (n > 25) {
23
6. Com o cursor posicionado entre as chaves, tecle <Enter> para organizar o bloco.
7. Digite o comando: document.write("Condição Verdadeira");
var n = 50;
if (n > 25) {
document.write("Condição Verdadeira");
}
Inserindo condição
Resultado da condição
9. Observe o texto exibido. Depois, volte ao Sublime.

10. Selecione e apague o valor da variável n. No lugar digite: 20
11. Salve as modificações no arquivo e atualize a página no navegador.
12. Volte ao Sublime para testarmos esse recurso.
13. Posicione o cursor após a chave que fecha o bloco do if, tecle <Espaço> e digite: else {
14. Tecle <Enter> para organizar o bloco.
15. Dentro do bloco do else digite: document.write("Condição Falsa");
var n = 20;
if (n > 25) {
} else {
document.write("Condição Falsa");
}
Inserindo condição else

16. Atualize a página no navegador após salvar as modificações no arquivo.
Resultado do else
24
17. Volte ao Sublime, apague a condição do if e digite: n == 20
var n = 20;
if (n == 20) {
} else {
}
Alterando a condição do if
18. Atualize a página após salvar as alterações.

19. Retorne ao Sublime, selecione a apague o operador de igualdade do if e, no lugar, digite: !=
21. Retorne ao Sublime. Depois, posicione o cursor antes do parêntese que fecha a condição,
tecle <Espaço> e digite: && n < 100
23. Volte ao Sublime, selecione e apague o operador lógico "e". No lugar digite: ||
var n = 20;
if (n != 20 || n < 100) {
} else {
}
Inserindo condição else
24. Após salvar as modificações, atualize a página.
Resultado do operador ou
25. Para finalizar feche o navegador, os arquivos e o Sublime.
10. ESTRUTURA SWITCH

Aprendemos a criar a estrutura de controle do switch, criando diferentes exemplos como teste.
Faça as a vidades a seguir para colocar em prá ca o seu entendimento sobre o tema.
25
1. O que a estrutura de controle switch permite?
( ) Para finalizar cada caso u liza-se o default e um ponto e vírgula.

( ) Os dias da semana são representados por valores de 1 a 7, onde o 1 é o domingo (primei-
ro dia) e 7 é o sábado (úl mo dia da semana).
( ) Os casos são iniciados ao se escrever "case", colocando a condição logo em seguida.
( ) Para se trabalhar com dias da semana u liza-se a função de data (date) com o parâmetro
getDay.
Passo a passo:
2. Acesse o arquivo JavaScript. Depois, selecione e apague a estrutura das condições e a
variável presente no arquivo.
3. Digite a variável: var n = 1;
4. Pressione <Enter> duas vezes e inicie a estrutura do switch: switch (n) {
6. Digite o primeiro caso: case 1:
7. Tecle <Enter> e digite o comando: document.write("O valor é igual a 1");
8. Pressione <Enter> e digite a finalização do caso: break;
9. Tecle <Enter> e digite: default:
10. Pressione <Enter> e digite o comando: document.write("O valor é diferente de 1");
var n = 1;
switch (n) {
case 1:
document.write("O valor é igual a 1");
break;
default:
document.write("O valor é diferente de 1");
}
Inserindo condição switch
26
12. Observe o texto exibido e retorne ao Sublime.

13. Apague o valor da variável n e, no lugar, digite: 3
15. Agora é exibido um texto diferente. Volte ao Sublime, selecione a estrutura do switch e a
variável. Depois, tecle <Delete> para apagá-las.
16. Digite a variável do dia da semana: var dia = new Date().getDay();
17. Tecle <Enter> duas vezes e inicie a estrutura do switch: switch (dia) {
19. Digite o primeiro caso: case 0:
20. Tecle <Enter> e digite o comando: document.write("Hoje é domingo");
21. Pule uma linha teclando <Enter> e digite a finalização do caso: break;
var dia = new Date().getDay();
switch (dia) {
case 0:
document.write("Hoje é domingo");
break;
}
Função Date
22. Pressione <Enter> e digite os outros casos:
case 1:
document.write("Hoje é segunda-feira");
break;
case 2:
document.write("Hoje é terça-feira");
break;
case 3:
document.write("Hoje é quarta-feira");
break;
case 4:
document.write("Hoje é quinta-feira");
break;
case 5:
document.write("Hoje é sexta-feira");
break;
case 6:
document.write("Hoje é sábado");
break;
27
24. Visualize que uma mensagem exibe qual dia da semana é hoje.
11. CICLO FOR

Durante esse capítulo aprendemos a u lizar o ciclo de repe ção for. Prossiga com seus estudos
resolvendo as a vidades a seguir.
1. Para que servem os ciclos de repe ção?
2. Qual a diferença entre os comandos conƟnue e break?
Passo a passo:
1. Comece abrindo o Sublime com os arquivos exemplo.html e exemplo.js, presentes na

2. Acesse o arquivo JavaScript. Depois, selecione e apague a variável atual e a estrutura do
switch.
3. Digite a variável do array: var objetos = ["caneta","tesoura","caderno","estojo"];
4. Tecle <Enter> duas vezes e inicie a estrutura do for: for (i = 0; i < 3; i++) {
6. Digite o comando: document.write(objetos[i] + " ");
var objetos = ["caneta","tesoura","caderno","estojo"];
for (i = 0; i < 3; i++) {
document.write(objetos[i] + " ");
}
Comando for
Visualização do for
28
8. Observe os elementos exibidos. Depois, retorne ao Sublime.

9. Posicione o cursor após o operador de comparação e digite o sinal de igualdade: =
11. Volte ao Sublime, selecione e apague a condição presente no for. No lugar digite: i < ob-
jetos.length
for (i = 0; i < objetos.length; i++) {
}
Comando length
12. Atualize a página após salvar as modificações no arquivo.
Resultado
13. Retorne ao Sublime, coloque o cursor após a chave que abre os comandos do for e tecle
<Enter>.
14. Digite a condição if: if (i == 1) {
15. Pressione <Enter> para organizar o bloco. Depois, digite o comando do conƟnue: conƟnue;
for (i = 0; i < objetos.length; i++) {
if (i == 1) {
continue;
}
}
Inserindo condição dentro do for
17. Repare que um elemento não é exibido. Volte ao Sublime.
29
18. Selecione e apague o valor da condição. No lugar digite: 2

19. Apague também o comando conƟnue. Em seguida, digite o comando do break: break;
var objetos = ["caneta","tesoura","caderno","estojo"
];for (i = 0; i < objetos.length; i++) {
if (i == 2) {
break;
}
}
Inserindo condição dentro do for
Resultado do comando break
21. Observe os elementos exibidos. Para encerrar, feche o navegador, os arquivos e o Sublime.
12. CICLO WHILE

Nesse capítulo aprendemos a u lizar o ciclo de repe ção while, criando diferentes exemplos.
Coloque em prá ca o seu aprendizado, resolvendo os exercícios referentes.
1. Basicamente, como funciona o ciclo while?
2. Quando a mensagem de "undefined" é exibida na página?
Passo a passo:
2. Acesse o arquivo JavaScript, selecione a variável e a estrutura do for. Tecle <Delete> para
apagar o conteúdo selecionado.
30
3. Digite a variável do contador: var contador = 0;

4. Tecle <Enter> e digite o array: var cores = ["azul" ,"branco" ,"amarelo" ,"verde"];
5. Pressione <Enter> duas vezes e digite: while (contador < 5) {
6. Organize o bloco teclando <Enter>.
7. Digite o comando: document.write(cores[contador] + "<br>");
8. Pressione <Enter> e digite: contador++;
var contador = 0;
var cores = ["azul","branco","amarelo","verde"];
while (contador < 5) {

document.write(cores[contador] + "<br>");
contador++;
}
UƟlizando o comando while
10. Observe os elementos do array exibidos na página. Depois, retorne ao Sublime.

11. Selecione e apague o valor da condição. No lugar digite: cores.length
13. Volte ao Sublime. Selecione e apague o valor do contador. No lugar digite: 5
var contador = 5;
while (contador < cores.length) {

contador++;
}
Alterando o comando while

15. Visualize que nenhum elemento do array é exibido. Retorne ao Sublime.
16. Apague o valor da variável contador. No lugar digite: 1
31
17. Selecione o while e a sua condição. Depois, tecle <Delete> para apagá-los.
18. Antes das chaves, digite: do
19. Coloque o cursor após a chave que fecha o bloco, tecle <Espaço> e digite o while: while
(contador < cores.length);
var contador = 5;
do {
contador++;
} while (contador < cores.length);
Uso do comando do
13. INTRODUÇÃO AOS EVENTOS

Foi iniciado o estudo sobre eventos, conhecendo suas funcionalidades e aprendendo a u lizar
eventos básicos. A seguir se tem algumas a vidades para prá ca.
1. O que são os eventos do JavaScript?
2. Relacione as opções a seguir com suas respec vas descrições:
1. Atributo onclick
2. Atributo onmouseover
3. Tag buƩon
4. Propriedade getElementById
32
( ) Possibilita u lizar um elemento específico do HTML.

( ) Permite executar uma tarefa quando o mouse fica sobre um objeto.
( ) Serve para inserir um evento para quando o elemento é clicado.
( ) Serve para inserir um botão na linguagem HTML.
Passo a passo:
1. Para começar abra o Sublime com os arquivos exemplo.html e exemplo.js, que estão na
2. Posicione o cursor dentro do body e tecle <Tab> para aplicar a indentação correta.
3. Aplique quebras de linha digitando: <br><br>
4. Tecle <Enter> e digite o código do botão: <buƩon>Clique Aqui</buƩon>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br><br>
<button>Clique Aqui</button>
</body>
</html>
Arquivo HTML
Visualização do botão
6. Clique no botão e veja que nada acontece.

7. Volte ao Sublime e acesse o arquivo JavaScript.
8. Selecione e apague as variáveis e a estrutura do ciclo de repe ção.
9. Salve as modificações e retorne ao documento HTML.
10. Posicione o cursor dentro da tag de abertura de buƩon, tecle <Espaço> e digite:
onclick="alerta()"
11. Salve as alterações e acesse o arquivo JavaScript.
12. Digite a função: funcƟon alerta() {
33
13. Com o cursor entre as chaves, tecle <Enter> para organizar o bloco.
14. Digite o alerta: alert("Obrigado pelo acesso!");
function alerta() {
alert("Obrigado pelo acesso!");
}
Função alerta
Mensagem exibida após clicar no botão
16. Clique no botão.

17. Visualize o alerta e clique em OK para fechá-lo.
18. Retorne ao Sublime. Depois, acesse o documento HTML, posicione o cursor após as que-
bras de linha e tecle <Enter>.
19. Digite o parágrafo com o atributo: <p onclick="alerta()">Parágrafo de Exemplo.</p>
20. Atualize a página no navegador após salvar as alterações no documento.
21. Dê um clique no parágrafo.
22. Repare que o mesmo alerta é exibido. Clique em OK para fechar o alerta.
23. Retorne ao Sublime, coloque o cursor dentro da tag de abertura do parágrafo, tecle <Es-
paço> e digite o atributo: onmouseover="botao()"
24. Posicione o cursor dentro da tag de abertura do botão, tecle <Espaço> e digite: id="botao"
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br><br>
<p onmouseover="botao()" onclick="alerta()">Parágrafo de Exemplo.</p>
<button id="botao" onclick="alerta()">Clique Aqui</button>
</body>
</html>
Arquivo HTML
34

26. Posicione o cursor após a chave que fecha a primeira função e pressione <Enter> duas
vezes.
27. Digite a função:
function botao() {
var botao = document.getElementById("botao");
botao.innerHTML = "Clique Modificado";
}

29. Observe o nome atual do botão e direcione o cursor sobre o parágrafo.
Botão após passar o mouse
30. Agora dê um clique no parágrafo.

31. Feche o alerta clicando em OK.
14. EVENTOS DE CLIQUE

Nesse capítulo aprendemos a u lizar diferentes eventos de clique, como onclick, ondblclick, on-
mouseover e onmouseout. Con nue seus estudos resolvendo os exercícios a seguir.
1. O que o atributo ondblclick permite?
2. Qual a diferença entre os eventos onmouseover e onmouseout?
35
Passo a passo:
2. No documento HTML posicione o cursor após as quebras de linha e tecle <Enter>.
3. Digite a tag da div com seu id: <div id="div1">Elemento Div</div>
4. Coloque o cursor após a tag meta e tecle <Enter>. Digite a tag style: <style></style>
5. Posicione o cursor entre as tags de abertura e fechamento de style e pressione <Enter>.
6. Digite o bloco com as es lizações:
div {
border: 2px solid black;
background-color: grey;
width: 400px;
margin: 10px;
padding: 5px;
}
7. Apague os atributos de evento dentro da tag do parágrafo.

8. Digite o id dentro da tag de abertura do parágrafo: id="mensagem"
9. Acesse o arquivo JavaScript, posicione o cursor após a chave que fecha a úl ma função e
tecle <Enter> duas vezes.
10. Digite a variável para receber o elemento da div: var objeto = document.
getElementById("div1");
11. Tecle <Enter> duas vezes e digite a função com os seus comandos:
function cliqueDuplo() {
var msg = document.getElementById("mensagem");
msg.innerHTML = "Clique Duplo na Div";
}
12. Salve as alterações e acesse o documento HTML.

13. Coloque o cursor na tag de abertura da div, tecle <Espaço> e digite: ondblclick="cliqueDuplo()"
14. Salve as modificações e abra o arquivo exemplo.html no navegador.
15. Clique duas vezes na div para acionar o evento.
Resultado após o clique duplo
36
16. Volte ao Sublime e acesse o arquivo JavaScript.

17. Com o cursor posicionado após a chave que fecha a úl ma função, tecle <Enter> duas
vezes.
18. Digite a função e seus comandos:
function entrar() {
msg.innerHTML = "Entrou na Div";
}
19. Pressione <Enter> duas vezes e digite a função:
function sair() {
msg.innerHTML = "Saiu da Div";
}

21. Com o cursor dentro da tag de abertura da div, tecle <Espaço> e digite os atributos:
onmouseover="entrar()" onmouseout="sair()"
22. Atualize a página no navegador depois de salvar as modificações.
23. Direcione o cursor sobre a div. Depois, direcione o cursor para fora dela e observe o texto
do parágrafo.
Mensagem ao passar o mouse na div Mensagem após Ɵrar o mouse da div
24. Dê um duplo clique na div e repare no texto do parágrafo.

25. Para finalizar feche o navegador, os arquivos e o Sublime.
15. EVENTOS DE CARREGAMENTO

Aprendemos a u lizar eventos relacionados ao carregamento da página no navegador. Coloque
em prá ca o seu aprendizado com os exercícios referentes.
37
1. O que o evento onload permite?
2. Quando o evento onresize executa uma ação?
Passo a passo:
1. Comece abrindo o Sublime com os arquivos exemplo.html e exemplo.js, que estão den-
tro da pasta Arquivos JavaScript.
2. Posicione o cursor dentro da tag de abertura do body, tecle <Espaço> e digite:
onload="carregado()"
4. Selecione e apague as funções presentes no arquivo.
5. Digite a estrutura da função: funcƟon carregado() {
6. Com o cursor posicionado entre as chaves da função, tecle <Enter> para organizar o bloco.
7. Digite o comando: document.getElementById("mensagem").innerHTML="Página carre-
gada.";
function carregado() {
document.getElementById("mensagem").innerHTML="Página carregada.";
}
Função carregado()
8. Salve as modificações no arquivo e abra o arquivo exemplo.html no navegador.
9. Após observar a página, retorne ao Sublime.

10. Posicione o cursor após a chave que fecha a primeira função e tecle <Enter> duas vezes.
38
11. Digite a estrutura da função: funcƟon atualizar() {

12. Tecle <Enter> para organizar o bloco.
13. Digite o comando do alerta: alert("Página atualizada.");
function atualizar() {
alert("Página atualizada.");
}
Função atualizar()

15. Com o cursor posicionado dentro da tag de abertura do body, tecle <Espaço> e digite o
atributo do evento: onresize="atualizar()"
17. Clique no botão Restaurar Tamanho.
18. Observe que o tamanho da janela foi alterado e o alerta é exibido. Clique em OK para
fechar o alerta.
19. Volte ao tamanho anterior clicando no botão Maximizar.

20. Feche o alerta clicando em OK e volte ao Sublime.
21. Selecione os eventos presentes na div e tecle <Delete> para apagá-los.
22. Posicione o cursor após as quebras de linha e tecle <Enter>.
23. Digite a tag do formulário: <form></form>
24. Posicione o cursor entre as tags de abertura e fechamento do formulário e tecle <Enter>.
25. Digite o comando: <input type="text" onselect="selecionar()">
26. Salve as modificações e acesse o arquivo JavaScript.
27. Coloque o cursor após a chave que fecha a segunda função e tecle <Enter> duas vezes.
28. Digite a função com seu comando:
function selecionar() {
document.getElementById("mensagem").innerHTML="Conteúdo Selecionado.";
}
Função selecionar()

30. Clique no campo de formulário e digite algumas palavras.
39
31. Selecione as palavras digitadas no campo de formulário.
Mensagem após selecionar a palavra
32. Observe que o parágrafo informa que o conteúdo foi selecionado. Feche o navegador, os
arquivos e o Sublime.
16. TRATAMENTO DE EXCEÇÕES

Durante esse capítulo aprendemos a iden ficar erros no código através dos comandos try e ca-
tch. Con nue seus estudos com os exercícios a seguir.
1. No que o tratamento de exceções se baseia?
2. Analise as afirmações:
1. O comando try faz uma tenta va de executar um código, desde que ele esteja escrito
corretamente.
2. Quando o código não está funcionando corretamente, a linguagem JavaScript informa o
determinado erro ao usuário automa camente.
3. O comando catch só é executado quando um erro em um código do try é encontrado.
4. O comando throw serve para retornar um valor de acordo com a condição especificada.
Estão corretas somente:
a) 1 e 2.
b) 2 e 3.
c) 1 e 4.
d) 3 e 4.
40
Passo a passo:
2. Acesse o arquivo JavaScript, posicione o cursor após a chave que fecha a úl ma função e
tecle <Enter> duas vezes.
3. Digite o código incorreto do alerta: aalert("Bem-vindo!");
5. Nenhum alerta é exibido. Retorne ao Sublime.
6. Apague o código de alerta atual.
7. Digite o comando try com o alerta incorreto:
try {
aalert("Bem-vindo!");
}
8. Com o cursor posicionado após a chave que fecha o try, tecle <Espaço> e digite: catch(erro) {
10. Digite o novo comando de alerta: alert("Erro: " + erro);
12. Observe que um alerta informa o erro ocorrido na codificação. Clique em OK para fechar
o alerta.
Mensagem de erro
13. Retorne ao Sublime, posicione o cursor no início do código do alerta dentro do try e tecle
<Delete> para apagar uma letra "a".
try {
alert("Bem-vindo!");
} catch(erro) {
alert("Erro: " + erro);
}
Código JavaScript

15. Visualize o alerta correto. Depois, feche-o clicando em OK.
41
Mensagem correta exibida
16. Retorne ao Sublime, coloque o cursor após a chave que fecha a terceira função e pressio-
ne <Enter> duas vezes.
17. Digite a variável: var x = 5;
18. Coloque o cursor após a chave que abre o bloco do try e tecle <Enter>.
19. Digite a condição: if (x < 10) throw "O valor de x precisa ser maior que 10";
var x = 5;
try {
if (x < 10) throw "O valor de x precisa ser maior que 10";
alert("Bem-vindo!");
} catch(erro) {
alert("Erro: " + erro);
}
Condição no bloco try
20. Visualize o alerta de erro e, depois, feche-o.
Visualização da mensagem
21. Volte ao Sublime e apague o valor da variável. No lugar digite: 20

23. Observe o alerta correto e clique em OK.
42
17. MANIPULAÇÃO DE DATA

Foi ensinado a manipular a data no JavaScript, exibindo-a de diferentes maneiras na página. A
seguir encontram-se algumas a vidades para prá ca.
1. Qual a diferença entre os recursos toUTCString e toDateString?
2. O que a função getDate possibilita?
Passo a passo:
2. Acesse o arquivo JavaScript, selecione e apague os comandos e funções atuais.
3. Digite o comando: document.write(Date());
Exibindo a data
5. Observe a data e hora atuais. Então, atualize a página no navegador.

6. Retorne ao Sublime.
7. Antes do comando document.write para exibir a data, digite a variável: var d = new Date();
8. Apague o valor dentro do document.write e, no lugar, digite o nome da variável: d
var d = new Date();
document.write(d);
Exibindo a data

10. Volte ao Sublime, posicione o cursor após a variável, tecle <Enter> e digite: var d = new
Date(86400000);
43
var d = new Date();
var d = new Date(86400000);
document.write(d);
Exibindo a data
Visualização da data
12. Depois de observar a nova data, retorne ao Sublime.

13. Apague a segunda variável.
14. Coloque o cursor após o nome da variável dentro do document.write e digite: .toUTCString()
16. Volte ao Sublime e apague o recurso toUTCString.
17. No lugar digite o recurso: toDateString()
18. Após salvar as alterações, atualize a página.
19. Retorne ao Sublime e apague o recurso toDateString presente dentro do document.write.
20. No lugar digite: getDate()
Exibição da data
22. Retorne ao Sublime, posicione o cursor após o document.write da data e tecle <Enter>.
23. Digite o comando para o retornar o mês: document.write("<br>" + d.getMonth());
24. Pressione <Enter> e digite o comando para retornar o ano: document.write("<br>" +
d.getFullYear());
var d = new Date();
document.write(d.getDate());
document.write("<br>" + d.getMonth());
document.write("<br>" + d.getFullYear());
Exibindo o dia, mês e ano
44
Exibição no navegador
26. Volte ao Sublime, posicione o cursor após a função getMonth, tecle <Espaço> e digite: + 1
18. CRIAÇÃO DE VALORES

Nesse capítulo foi ensinado a criar valores aleatórios através do recurso Math.random. Coloque
em prá ca seu conhecimento com os exercícios referentes.
1. O que o recurso Math.random permite?
2. Qual a função do recurso Math.floor?
Passo a passo:
1. Para iniciar abra o Sublime com os arquivos exemplo.html e exemplo.js, que estão dentro
da pasta Arquivos JavaScript.
2. Acesse o arquivo JavaScript e apague a variável e seus comandos atuais.
3. Digite a estrutura da função: funcƟon alerta() {
4. Com o cursor posicionado entre as chaves, pressione <Enter> para organizar o bloco.
5. Digite a variável: var valor = Math.random();
6. Tecle <Enter> e digite o comando: document.getElementById("mensagem").innerHTML
= valor;
function alerta() {
var valor = Math.random();
document.getElementById("mensagem").innerHTML = valor;
}
Gerando um número randômico
45

8. Dê três cliques no botão da página e observe os números gerados.
Número gerado
9. Retorne ao Sublime, selecione e apague a variável presente na função.

function rnd() {
var valor = Math.random();
return valor;
}
12. Selecione e apague o valor atual na primeira função. No lugar digite: rnd()
14. Clique algumas vezes no botão da página e visualize os valores ob dos.
15. Retorne ao Sublime, posicione o cursor dentro dos parênteses da segunda função e digi-
te: min, max
16. Coloque o cursor dentro dos parênteses do elemento rnd da primeira função e digite: 0, 50
17. Selecione o recurso Math.random e tecle <Delete> para apagá-lo. No lugar digite: Math.
floor(Math.random())
18. Posicione o cursor após o Math.random e digite: *max
function alerta() {
document.getElementById("mensagem").innerHTML = rnd(0, 50);
}
function rnd(min, max) {
var valor = Math.floor(Math.random()*max);
return valor;
}
Arquivo JavaScript

20. Clique no botão algumas vezes para gerar valores dis ntos.
46
Visualização do número gerado
21. Retorne ao Sublime e apague os valores dentro dos parênteses da primeira função. No
lugar digite: 30, 100
22. Apague o segundo fator da mul plicação e digite: (max-min)
23. Posicione o cursor após o parêntese que fecha o Math.floor, tecle <Espaço> e digite: + min
25. Clique no botão algumas vezes e observe os valores gerados.
26. Encerre fechando o navegador, os arquivos e o Sublime.
19. CONTROLE DE JANELA

Aqui aprendemos a u lizar algumas propriedades do objeto Window, exibindo informações so-
bre a página. Faça as a vidades a seguir para desenvolver seu entendimento acerca do assunto.
1. Para que serve o objeto Window?
( ) Para exibir o tamanho da área que a página ocupa no navegador u liza-se a propriedade
innerWidth do objeto Window.
( ) Basicamente, um pixel é o menor ponto que forma uma imagem digital.
( ) Para exibir a altura da página u liza-se a propriedade innerHeight.
( ) Para exibir a coordenada horizontal da página u liza-se a propriedade screenY.
Passo a passo:
2. Acesse o arquivo JavaScript, selecione a segunda função e apague-a teclando <Delete>.
3. Apague o comando document da primeira função.
4. No lugar digite a variável: var largura = window.innerWidth;
47
5. Tecle <Enter> e digite o comando para exibir a informação de largura na página: docu-
ment.getElementById("mensagem").innerHTML = "Largura: " + largura;
7. Clique no botão da página.
Visualizando a largura da página

8. Visualize a informação exibida. Depois, clique no botão Restaurar Tamanho para diminuir
o tamanho da janela do navegador.
9. Clique novamente no botão da página e observe a nova informação de tamanho.
10. Deixe a janela em tela cheia clicando no botão Maximizar.
11. Volte ao Sublime, posicione o cursor após a primeira variável e tecle <Enter>.
12. Escreva a nova variável: var altura = window.innerHeight;
13. Coloque o cursor antes do ponto e vírgula do comando document, tecle <Espaço> e digite:
+ "<br>Altura: "+ altura
function alerta() {
var largura = window.innerWidth;
var altura = window.innerHeight;
document.getElementById("mensagem").innerHTML = "Largura: " + largura + "<br>
Altura: "+ altura;
}
Arquivo JavaScript

15. Clique no botão da página para exibir as informações de tamanho.
48
16. Retorne ao Sublime e apague a propriedade innerWidth da primeira variável. No lugar

digite: outerWidth
17. Apague o innerHeight da segunda variável e digite: outerHeight
19. Clique no botão para exibir as informações da página.
20. Diminua o tamanho da janela e clique novamente no botão para atualizar as informações.
Visualização das informações no navegador
21. Maximize o tamanho da janela. Depois, volte ao Sublime.

22. Coloque o cursor após a segunda variável e tecle <Enter>.
23. Digite a variável da coordenada horizontal: var x = window.screenX;
24. Tecle <Enter> e digite a variável da coordenada ver cal: var y = window.screenY;
25. Posicione o cursor antes do ponto e vírgula do comando document e tecle <Espaço>. Di-
gite o código: + "<br>X: " + x + "<br>Y: " + y
function alerta() {
var x = window.screenX;
var y = window.screenY;
document.getElementById("mensagem").innerHTML = "Largura: " + largura +
"<br>Altura: " + altura + "<br>X: " + x + "<br>Y: " + y;
}
Arquivo JavaScript

27. Clique no botão para exibir as informações da página.
28. Diminua o tamanho da janela e atualize as informações da página clicando em seu botão.
29. Aumente o tamanho da janela clicando em Maximizar.
49
20. FUNÇÕES DE TEMPO

Aprendemos a u lizar algumas funções de tempo, criando um contador na página. Na sequência
encontram-se alguns exercícios complementares.
1. Qual a função do método setInterval?
2. Quais são os dois parâmetros do método setInterval?
Passo a passo:
1. Comece abrindo o Sublime com os arquivos exemplo.html e exemplo.js, que estão den-
tro da pasta Arquivos JavaScript.
2. Acesse o arquivo JavaScript e apague os comandos presentes dentro da função "alerta".
3. Dentro da função digite a variável: var tempo = setInterval (funcƟon executar(){Ɵck()},
1000);
function alerta() {
var tempo = setInterval (function executar(){tick()}, 1000);
}
Arquivo JavaScript
5. Digite a estrutura da nova função: funcƟon Ɵck() {
7. Digite o comando: document.getElementById("mensagem").innerHTML = new Date().
toLocaleTimeString();
function tick() {
document.getElementById("mensagem").innerHTML = new Date().
toLocaleTimeString();
}
Arquivo JavaScript

9. Clique no botão da página para exibir o contador.
10. Observe o relógio exibido na página. Depois, retorne ao Sublime.
50
Exibição do relógio
11. Coloque o cursor após o comando document.write e tecle <Enter> duas vezes.
12. Digite a variável: var num = 0;
13. Posicione o cursor após o sinal de igualdade do comando na função "Ɵck" e tecle <Espaço>.
14. Complemente o comando digitando: num++ + " - " +
function tick() {
document.getElementById("mensagem").innerHTML = num++ + " - " + new
Date().toLocaleTimeString();
}
Arquivo JavaScript

16. Clique no botão para exibir o contador.
Visualização no navegador após clicar no botão
17. Retorne ao Sublime e acesse o documento HTML.

18. Coloque o cursor após o código do primeiro botão e tecle <Enter>.
19. Digite o código do novo botão: <buƩon onclick="parar()">Parar</buƩon>
21. Posicione o cursor após a primeira variável e pressione <Enter>.
22. Declare a variável: var tempo;
51
23. Selecione a palavra reservada "var" na primeira função e tecle <Delete> para apagá-la.
24. Coloque o cursor após a chave que fecha a segunda função e tecle <Enter> duas vezes.
25. Digite a função com seu comando:
function parar() {
clearInterval(tempo);
}

27. Clique no botão para exibir o contador.
28. Depois de alguns segundos, clique no botão Parar.
Exibição após clicar no botão Parar
29. Clique no botão para iniciar o contador novamente.

21. PROJETO DE EXEMPLO - 1

Durante esse capítulo iniciamos a personalização de um site de exemplo com comandos JavaScript,
criando dois eventos de carregamento. A seguir há a vidades para colocar em prá ca seus estudos.
1. Como se cria um alerta para quando a página é aberta no navegador?
2. Como se adiciona um alerta que avisa o usuário sempre que a página for redimensionada?
Passo a passo:
1. Para começar abra o Sublime com o arquivo index.html, localizado dentro da pasta Pro-
jeto de Exemplo. Se precisar de ajuda para encontrar o arquivo, peça ao seu instrutor.
2. Abra a página index.html no navegador e visualize seu conteúdo.
52
3. Acesse as outras quatro páginas através de seus respec vos links no menu.
4. Volte para a página inicial e, depois, retorne ao Sublime.
5. Acesse o menu File e clique em New File.
6. No novo arquivo criado, clique em File e selecione a opção Save As.
7. Salve o novo arquivo dentro da pasta Projeto de Exemplo com o nome eventos.js.
8. Após salvar o arquivo, acesse o documento HTML.
9. Posicione o cursor após a tag link e tecle <Enter>.
10. Digite a tag script: <script src="eventos.js"></script>
11. Coloque o cursor dentro da tag de abertura de body e tecle <Espaço>.
12. Digite o evento com a função: onload="inicio()"
<link rel="stylesheet" href="style.css">

<script src="eventos.js"></script>
</head>
<body onload="inicio()">
<div class="principal">
<div class="inicio">
Documento HTML
14. Digite a estrutura da função: funcƟon inicio() {
16. Digite o código de alerta: alert("Bem-vindo ao site Fotografando!");
function inicio() {
alert("Bem-vindo ao site Fotografando!");
}
Arquivo JavaScript
Página Inicial do Site de Exemplo
18. Clique em OK para fechar o alerta de boas-vindas.
53
19. Retorne ao Sublime, posicione o cursor após a chave que fecha a primeira função e tecle
<Enter> duas vezes.
20. Digite a nova função e seu comando:
function redimensionar() {
alert("Página Redimensionada.");
}

22. Com o cursor posicionado dentro da tag de abertura de body, tecle <Espaço> e digite:
onresize="redimensionar()"
25. Clique no botão Restaurar Tamanho para diminuir o tamanho da janela.
Alerta de Redimensionamento
26. Clique em OK para fechar o alerta de redimensionamento.

27. Aumente o tamanho da janela clicando no botão Maximizar.
29. Para encerrar feche o navegador, os arquivos e o Sublime.

Nesse capítulo aplicamos diferentes eventos de clique na página inicial do site de exemplo, dan-
do mais intera vidade para ela. Faça as a vidades a seguir para colocar em prá ca o seu aprendizado.
1. O que pode ser feito para aplicar um alerta quando o usuário troca de página em um site?
54
2. Relacione as opções a seguir com suas respec vas descrições:
( 1 ) Evento onclick
( 2 ) Tag link
( 3 ) Evento onmouseover
( 4 ) Evento onmouseout
( ) Executa uma ação quando o cursor é posicionado em algum elemento.

( ) É executado quando o cursor sai de cima de um elemento.
( ) É representada pela letra "a".
( ) É executado quando se dá um clique sobre o elemento.
Passo a passo:
1. Abra o Sublime com os arquivos index.html e eventos.js, presentes na pasta Projeto de

Exemplo.
2. No documento HTML, posicione o cursor dentro da tag de abertura do primeiro item da
lista do menu e tecle <Espaço>.
3. Digite o evento com sua função: onclick="pagina()"
4. Adicione esse mesmo evento com a função nos outros quatro links do menu.
<div class="menu">
<ul>
<li><a href="index.html" onclick="pagina()">Início</a></li>
<li><a href="sobre.html" onclick="pagina()">Sobre</a></li>
<li><a href="servicos.html" onclick="pagina()">Serviços</a></li>
<li><a href="clientes.html" onclick="pagina()">Clientes</a></li>
<li><a href="contato.html" onclick="pagina()">Contato</a></li>
</ul>
</div>
Documento HTML

6. Posicione o cursor após a chave que fecha o bloco da segunda função e tecle <Enter>
duas vezes.
7. Digite a estrutura da função: funcƟon pagina() {
8. Com o cursor entre as chaves, pressione <Enter> para organizar o bloco.
9. Digite o código do alerta: alert("Você será redirecionado para outra página.");
function pagina() {
alert("Você será redirecionado para outra página.");
}
Arquivo JavaScript
10. Salve as modificações no arquivo e abra a página index.html no navegador.

11. Feche o alerta de boas-vindas clicando em OK.
12. Dê um clique no segundo item do menu para acessar sua página.
13. Clique em OK no alerta para prosseguir.
55
Alerta de Redirecionamento
14. Agora clique no link da úl ma página e, depois, volte à página inicial.
15. Clique em OK para fechar o alerta.
17. Coloque o cursor dentro da tag de abertura do primeiro tulo h2, tecle <Espaço> e digite
o id: id="ƟtuloIndex"
18. Tecle <Espaço> e digite o evento de clique: onclick="entrar()"
20. Posicione o cursor após a chave que fecha a terceira função e pressione <Enter> duas
vezes.
function entrar() {
var msg = document.getElementById("tituloIndex");
msg.innerHTML = "Seja Bem-vindo!!!";
}

24. Dê um clique no primeiro tulo da página.
Alteração do Título

26. Coloque o cursor dentro da tag que inclui a imagem ponte.jpg, tecle <Espaço> e digite o
primeiro evento: onmouseover="alterarTitulo()"
27. Pressione <Espaço> e digite o segundo evento: onmouseout="sair()"
28. Posicione o cursor dentro da tag de abertura do h2 que serve de legenda para essa ima-
gem, tecle <Espaço> e digite o id: id="ƟtuloFoto"
56
<div id="destaque">
<img src="img/ponte.jpg" onmouseover="alterarTitulo()" onmouseout="sair()">
<h2 id="tituloFoto">Foto de Jardim Japonês (2012)</h2>
</div>
Documento HTML

30. Com o cursor após a chave que fecha a quarta função, tecle <Enter> duas vezes.
31. Digite a função com seus comandos:
function alterarTitulo() {
var msg = document.getElementById("tituloFoto");
msg.innerHTML = "São Paulo - SP";
}
32. Pressione <Enter> duas vezes e digite a função:
function sair() {
var msg = document.getElementById("tituloFoto");
msg.innerHTML = "Foto de Jardim Japonês (2012)";
}

35. Posicione o cursor em cima da imagem central da ponte.
Nova Legenda para a Imagem
36. Observe a nova legenda e, depois, posicione o cursor fora da imagem.

57

Adicionamos novos eventos na página inicial do site de exemplo, possibilitando a consulta de
data e hora a par r de dois botões. Os exercícios a seguir servem para complementar seus estudos.
1. O que a função getDate permite?
2. O que o método toLocaleTimeString faz?
Passo a passo:
1. Comece abrindo o Sublime com os arquivos index.html e eventos.js, localizados na pasta

Projeto de Exemplo.
2. Desça a barra de rolagem do documento HTML até o final de seu código.
3. Posicione o cursor após a tag de fechamento do h2 da div direitos e tecle <Enter>.
4. Digite o código do botão com seu evento: <buƩon onclick="data()">Data</buƩon>
5. Pressione <Enter> e digite o código do segundo botão: <buƩon onclick="hora()">Hora</
buƩon>
<div class="direitos">
<h2>© Fotografando LTDA - Todos os direitos reservados. É proibida a repro-
dução total ou parcial sem autorização.</h2>
<button onclick="data()">Data</button>
<button onclick="hora()">Hora</button>
</div>
Documento HTML
7. Posicione o cursor após a chave que fecha a úl ma função e tecle <Enter> duas vezes.
8. Digite a estrutura da função: funcƟon data() {
10. Digite a variável: var d = new Date();
11. Tecle <Enter> e digite o código do alerta: alert("Data: " + d.getDate() + "/" +
(d.getMonth()+1) + "/" + d.getFullYear());
function data() {
var d = new Date();
alert("Data: " + d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear());
}
Arquivo JavaScript
12. Salve as alterações no arquivo e abra a página index.html no navegador.

58
14. Desça a barra de rolagem até o final da página.
Botões Data e Hora
15. Clique no botão Data.

16. Visualize a informação do alerta e clique em OK para fechá-lo.
Alerta de Data
17. Retorne ao Sublime, posicione o cursor após a chave que fecha o bloco da úl ma função
e pressione <Enter> duas vezes.
18. Digite a estrutura da função: funcƟon hora() {
20. Digite o código do alerta: alert("Hora: " + new Date().toLocaleTimeString());
function hora() {
alert("Hora: " + new Date().toLocaleTimeString());
}
Arquivo JavaScript
21. Salve as modificações no arquivo e atualize a página no navegador.

23. Dê um clique no botão Hora.
24. Visualize a hora atual e clique em OK para fechar esse alerta.
Alerta de Hora
59
25. Clique novamente no botão Hora.


No úl mo capítulo finalizamos a edição do site de exemplo, aplicando novos eventos e fazendo
uma verificação nos campos do formulário. Faça os exercícios a seguir para colocar em prá ca os seus
estudos.
1. Quando o atributo onsubmit é executado?
2. O que pode ser feito para verificar se um campo de formulário recebeu entradas de texto?
Passo a passo:
1. Para começar, abra o Sublime com os arquivos index.html e eventos.js, localizados na

pasta Projeto de Exemplo.
2. Desça a barra de rolagem até o final do documento HTML.
3. Posicione o cursor após o segundo botão da div direitos e tecle <Enter>.
4. Digite o código do novo botão: <buƩon onclick="resolucao()">Resolução</buƩon>
<div class="direitos">
<h2>© Fotografando LTDA - Todos os direitos reservados. É proibida a repro-
dução total ou parcial sem autorização.</h2>
<button onclick="data()">Data</button>
<button onclick="hora()">Hora</button>
<button onclick="resolucao()">Resolução</button>
</div>
Documento HTML

function resolucao() {
alert("Largura: " + largura + " Altura: " + altura);
}
8. Salve as alterações no arquivo e abra a página index.html no navegador.
60

10. Desça a barra de rolagem até o final da página e clique no botão Resolução.
Botões Data, Hora e Resolução
11. Visualize as informações do alerta e feche-o clicando em OK.
Alerta de Resolução
12. Clique no link da página Contato presente no rodapé. Depois, retorne ao Sublime.
13. Abra o arquivo contato.html no Sublime.
14. Dentro de head, posicione o cursor após a tag de link do arquivo CSS. Tecle <Enter> e
digite o código de vínculo com o arquivo JavaScript: <script src="eventos.js"></script>
15. Desça a barra de rolagem até visualizar os códigos do formulário. Coloque o cursor den-
tro da tag de abertura do form, tecle <Espaço> e digite o atributo: onsubmit="return
validacao(this)"
<div id="formcontato">
<form action="" onsubmit="return validacao(this)">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome">
Documento HTML
16. Salve as alterações no documento e acesse o arquivo JavaScript.

18. Digite a função e sua condição:
function validacao() {
if(document.getElementById("nome").value.length < 1) {
alert("Por favor, preencha o campo Nome");
document.getElementById("nome").focus();
return false;
}
}
61
Formulário do Site de Exemplo
20. Clique no botão Enviar Mensagem para enviar as informações do formulário.
Alerta de Campo do Formulário

22. Preencha o campo Nome.
23. Com o campo preenchido, clique novamente no botão Enviar Mensagem.
24. Retorne ao Sublime, posicione o cursor após a chave que fecha a primeira condição e
tecle <Enter>.
62
25. Digite as condições e seus códigos:
if(document.getElementById("fone").value.length < 1) {
alert("Por favor, preencha o campo Telefone");
document.getElementById("fone").focus();
return false;
}
if(document.getElementById("email").value.length < 1) {
alert("Por favor, preencha o campo E-mail");
document.getElementById("email").focus();
return false;
}
if(document.getElementById("msg").value.length < 1) {
alert("Por favor, preencha o campo Mensagem");
document.getElementById("msg").focus();
return false;
}

27. Preencha todos os campos do formulário.
28. Envie as informações clicando no botão Enviar Mensagem.
29. Para finalizar, feche o navegador, os arquivos e o Sublime.
63
Anotações:
64

Caderno de Exercicios Javascript

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Caderno de Exercicios Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

JJavaScript

1. Introdução ao Javascript .................................................................................................................... 5

1. O que é o JavaScript? O que ele permite?

2. Qual é a diferença entre JavaScript e Java?

3. O que é necessário para u lizar a linguagem JavaScript?

( ) O JavaScript é executado pelo navegador diretamente do lado do cliente.

1. Como se exibe um elemento na página com um código JavaScript?

2. Geralmente, que po de códigos JavaScript se escreve em head e em body?

1. Para começar abra o Sublime Text.

15. Salve as alterações acessando o menu File e clicando em Save.

Visualização da mensagem de Bem-vindo

17. Observe o texto exibido na página. Depois, retorne ao Sublime.

21. Salve as alterações. Depois, volte ao navegador e atualize a página.

22. Retorne ao Sublime para testarmos outro método de codificação.

30. Salve as alterações no documento, acesse o navegador e atualize a página.

31. Visualize que nada se alterou. Feche o navegador.

32. Para finalizar feche os arquivos e o Sublime.

3. VARIÁVEIS E TIPOS DE DADOS

1. Ao que se refere uma variável?

2. O que é preciso fazer para exibir o valor de uma variável na página?

1. Abra o Sublime Text.

var numero = 10;

7. Salve as alterações no arquivo e abra o arquivo exemplo.html no navegador.

8. Após visualizar a página, retorne ao Sublime.

var numero = 10;

Adicionando tag <br>

10. Salve as alterações e atualize a página no navegador.

var numero = 10;

document.write(numero + "<br>" + nome + "<br>" + frase);

1. O que são os operadores? O que eles permitem?

2. Relacione os operadores a seguir com suas respec vas descrições:

( ) É representado pelo caractere asterisco (*).

1. Comece abrindo o Sublime com os arquivos exemplo.html e exemplo.js, presentes na

7. Salve as alterações e abra o arquivo exemplo.html no navegador.

13. Salve as alterações no arquivo e atualize a página.

15. Após salvar as alterações, atualize a página no navegador.

17. Salve as modificações e atualize a página.

21. Digite o comando de incremento: num1++;

23. Salve as alterações e atualize a página no navegador.

29. Após salvar as alterações, atualize a página.

30. Feche o navegador, os arquivos e o Sublime.

1. O que é preciso fazer para criar uma variável do po string?

2. Na linguagem JavaScript o que a barra inver da faz?

1. Abra o Sublime e os arquivos exemplo.html e exemplo.js, que estão na pasta Arquivos

5. Salve as alterações e abra o arquivo exemplo.html no navegador.

Visualização da variável no navegador

6. Observe o texto exibido. Depois, retorne ao Sublime.

Variável texto em maiúsculo

8. Salve as alterações no arquivo e atualize a página no navegador.

Exibição do texto em maiúsculo no navegador

9. Volte ao Sublime, selecione e apague a palavra toUpperCase e, no lugar, digite: toLower-

12. Salve as alterações no arquivo e atualize a página.

Exibindo o tamanho da variável

17. Salve as alterações no arquivo e atualize a página no navegador.

18. Retorne ao Sublime e coloque a palavra JavaScript entre aspas.

21. Atualize a página no navegador após salvar as alterações.

1. Em programação o que é um array?

2. Como a linguagem JavaScript iden fica um array?

1. Comece abrindo o Sublime e os arquivos exemplo.html e exemplo.js, que estão na pasta

6. Salve as alterações e abra o arquivo exemplo.html no navegador.

7. Visualize os valores exibidos na página e retorne ao Sublime.

9. Salve as modificações e atualize a página no navegador.

Exibição do primeiro item do array

18. Salve as alterações e atualize a página no navegador.