100% acharam este documento útil (3 votos)

3K visualizações111 páginas

Começando Com JavaScript - 30 Atividades para Iniciar o Aprendizado de JavaScript (#30DiasDeCodigo Livro 1)

Enviado por

Dri de Freitas

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 PDF, TXT ou leia on-line no Scribd

100% acharam este documento útil (3 votos)

3K visualizações111 páginas

Começando Com JavaScript - 30 Atividades para Iniciar o Aprendizado de JavaScript (#30DiasDeCodigo Livro 1)

Enviado por

Dri de Freitas

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 PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 111

Série #30DiasDeCodigo

Começando com JavaScript

30 atividades para iniciar o aprendizado de JavaScript
Guto Xavier
Copyright © 2019 Guto Xavier. Todos os direitos reservados. Este ebook
ou qualquer parte dele não pode ser reproduzido ou usado de forma alguma
sem autorização expressa, por escrito, do autor ou editor, exceto pelo uso de
citações breves em uma resenha do ebook.
Versão 2019.4.21
● Correção da missão do dia 7.
● Acréscimo de link para responder o Quiz JavaScript da missão do dia
26.
● Acréscimo das respostas do Quiz JavaScript da missão do dia 26.

Sobre o autor
Guto Xavier possui mais de 10 anos de experiência no ensino de tecnologias
para diferentes públicos, além da experiência com desenvolvimento de
sistemas. Atualmente exerce a atividade de consultor em projetos para
internet e docente em cursos de programação de sistemas e jogos. Em sua
carreira, teve passagens por empresas de diferentes portes e segmentos, desde
multinacionais do ramo automobilístico até startups da área imobiliária.
Sobre o autor
Introdução
Dia 1 - Missão: Pedir o nome e a idade do usuário e escrever essas informações de uma forma
amigável.
Dia 2 - Missão: Realizar contas no console.
Dia 3 - Missão: Calcular a média de venda à partir dos valores vendidos em cada um dos meses
do 1º Trim de 2018 de um vendedor
Dia 4 - Missão: Validar se um candidato pode ou não iniciar o processo de CNH
Dia 5 - Missão: Verificar se é dia, tarde ou noite e mostrar uma mensagem personalizada.
Dia 6 - Missão: Calcular as horas extras de um funcionário a partir das horas semanais
trabalhadas. Considerar a carga horária do funcionário de 44 horas por semana.
Dia 7 - Missão: Exibir dia da semana por extenso.
Dia 8 - Missão: Efetuar uma das 4 operações matemáticas básicas.
Dia 9 - Missão: Verificando confirmação para o usuário.
Dia 10 - Missão: Melhorando nossa produtividade.
Dia 11 - Missão: Exibindo uma mensagem várias vezes.
Dia 12 - Missão: Calcular a média de N alunos.
Dia 13 - Missão: Calcular a média de N números.
Dia 14 - Missão: Criar um contador.
Dia 15 - Missão: Armazenando lista de carros de um estacionamento
Dia 16 - Missão: Adicionando e removendo elementos da lista de carros
Dia 17 - Missão: Era uma vez o JavaScript
Dia 18 - Missão: Dicionário de animais
Dia 19 - Missão: Dicionário de animais
Dia 20 - Missão: Exibir os alunos de uma lista
Dia 21 - Missão: Criando uma agenda de contatos
Dia 22 - Missão: Escrevendo na tela
Dia 23 - Missão: Refinando nosso cálculo de média
Dia 24 - Missão: Tornando a cálculo da média reutilizável
Dia 25 - Missão: Abrindo site de notícias
Dia 26 - JavaScript Quiz
Dia 27 - Missão: Abrindo qualquer site
Dia 28 - Missão: Acréscimo e desconto
Dia 29 - Missão: Classificação de filmes
Dia 30 - Missão: CONCLUÍDA COM SUCESSO
Sobre as versões anteriores
2019.4.3
Correção de blablabla

Introdução
#30DaysOfCode
Objetivos:
- melhorar a lógica
- aprender uma linguagem de programação
- aplicar os conceitos de lógica de programação na prática
Esse livro não irá te ensinar a programar em 30 dias!
A ideia desse livro é do leitor se desafiar durante 30 dias, executando uma
missão por dia. Esse desafio é conhecido como 30 dias de código. Ao fim das
leituras e práticas, esperamos que o estudante esteja criando pequenos
programas e tendo compreensão dos códigos digitado.
Para esse projeto, foram criadas missões guiadas, ou seja, um guia passo-à-
passo do que deverá ser feito, sempre comentado e detalhado. Estas missões
foram escritas levando em consideração que o estudante realize ao menos
uma por dia na ordem proposta. O tempo de dedicação por missão varia de
pessoa para pessoa, mas as soluções levam em média 20 minutos.
Seria extremamente útil que o estudante registre os problemas que tiver e
como encontrou a solução, uma espécie de diário, às vezes os problemas
podem reaparecer e isso evitaria errar a mesma coisa. Outra sugestão é
registrar suas dúvidas para medir sua evolução.

Para entender mais sobre esse projeto (inspirado em #100DaysOfCode) leia

os artigos dos links
https://medium.com/gdgcampinas/100daysofcode-o-que-eu-aprendi-em-20-
dias-1a65f4d8ad3f
https://medium.com/@JCSerraCampos/100diasdecodigo-c8c1c912907a
https://medium.com/@barbaraknupp/hello-world-100-dias-de-
c%C3%B3digo-ab8153165b81
Dia 1 - Missão: Pedir o nome e a idade do usuário e
escrever essas informações de uma forma amigável.
Objetivo:
● Conhecer o console
● Trabalhar comandos de entrada e saída de dados do JavaScript

Descrição:
Abra o navegador Google Chrome, com o navegador aberto, aperte a tecla
F12 (do teclado). Irá aparecer algo parecido com a imagem a seguir:

Esse painel é chamado de Web Dev Tools.

Observação: Caso a Web Dev Tools não esteja do lado de baixo e você
queira deixar ela assim você pode clicar nos 3 pontos no fim dela e escolher
como ela vai ficar:
Click na aba Console do Web Dev Tools:

No console digite o comando clear(); depois pressione enter para executar o

comando. O comando clear(); irá limpar o console:

Sempre que quiser limpar o console você pode executar o comando clear.

Comandos de entrada de dados

Digite os comandos abaixo no console e pressione enter
var nome = prompt("Informe seu nome" , " Digite aqui
");

O comando prompt produz essa caixa para que o usuário possa entrar com
informações.
No caso, foi criado uma variável chamada nome e o valor informado pelo
usuário será armazenado nesta variável.
Continue com o código
Exibindo os dados
Após ter pedido o usuário as informações nome e idade, chegou o momentos
de exibir essas informações. Digite os seguintes códigos:
console.log("Seu nome
é");
console.log(nome);
O comando console.log() exibe no console do navegador o que estiver entre
aspas ( “ ” ) ou o conteúdo da variável, no caso a variável nome. Ele está
exibindo em duas linhas, caso você queira exibir tudo em uma linha só pode
executar o seguinte comando.
console.log("Seu nome é " + nome);
E que tal melhorar a mensagem para completar o desafio:
console.log("Seja bem vindo " + nome + "!!! Você tem " + idade + "
anos.");

Pronto, o desafio está completo, mas como experimento, troque o comando

console.log(). pelo comando alert().
alert("Seja bem vindo " + nome + "!!! Você tem " + idade + " anos.");
O comando alert() produz uma caixa de mensagem similar a do comando
prompt(), com a diferença de que a do alert é apenas para saída de dados.
O código inteiro ficou assim:

Faça experimentos em cima desse exemplo, incremente ele pedindo outras

informações como data de nascimento ou endereço e mude suas mensagens e
formas de exibição.
Dia 2 - Missão: Realizar contas no console.
Objetivo:
● Trabalhar com operadores matemáticos em Javascript
Descrição:
Abra o console do Google Chrome, e já execute o comando para limpar o
console:

Operadores aritméticos
O console permite que você realize contas, execute os comandos abaixo e
veja os resultados.

Esses são os operadores aritméticos mais comuns:

● + → adição
● - → subtração
● / → Divisão
● * → Multiplicação
Além desses operadores temos mais alguns como:
● % → módulo (pega o resto da divisão e não o resultado)

● ** → exponenciação (um número elevado a outro)

Execute os comandos abaixo como exemplo:

Operadores relacionais
Operações utilizando os operadores relacionais retornam sempre true ou
false, execute os comandos abaixo para ver um exemplo:
Os operadores relacionais mais utilizados são:
● == → verifica a igualdade entre dois valores
● != → verifica se dois valores são diferentes
● > → verifica se um valor é maior que outro
● < → verifica se um valor é menor que outro
● >= → verifica se um valor é maior ou igual a outro
● <= → verifica se um valor é menor ou igual a outro
Digite os exemplos abaixo para ver os operadores funcionando:

Agora que você sabe que tem uma calculadora no seu navegador crie suas
contas e exemplos para praticar, crie contas mais complexas para ver o
comportamento e resultado das contas. Exemplo:

Lembre-se que dentro da matemática existe a precedência de operadores

(click aqui e aqui para ler mais sobre isso) e o parênteses quebra essa
precedência.
Mais uma missão concluída, para aprender mais e ver quais outros
operadores existem consulte a documentação da Mozilla que ajuda muito.

Dia 3 - Missão: Calcular a média de venda à partir

dos valores vendidos em cada um dos meses do 1º
Trim de 2018 de um vendedor
Objetivo:
● Declarar variáveis
● Conversão de valores
Descrição:
Abra o console do Google Chrome, e já execute o comando para limpar o
console:

Variáveis
No Javascript a declaração de variáveis não é obrigatória, porém muito
recomendada. Digite o código abaixo para entender:
valor1;

Ao digitar valor1; será exibido um erro dizendo que não está definido.
Esse erro acontece porque não declaramos essa variável. Execute o comando
abaixo para declarar a variável valor1:

var
valor1;

E agora digite novamente o nome da variável no console:

valor1;

Dessa vez não existiu o erro, porém foi informado a mensagem undefined
que significa que essa variável está indefinida, sem um valor. Vamos atribuir
um valor à essa variável:

valor1 =
50;

E agora vamos digitar o nome da variável novamente no console:

valor1;

Observe que agora, após de você digitar apenas o nome da variável foi
exibido o valor 50. O operador de atribuição é o = (igual), quando você
utiliza o igual ele pega o que tiver do lado direito e atribui ao que estiver ao
lado esquerdo do operador (Ex: valor1 = 50).
Voltando à declaração de variáveis, podemos declarar uma variável apenas a
iniciando com um valor. Digite:

valor2 =
100;
valor2;
Ou mesmo se lembrar da primeira missão onde temos a seguinte linha:
var nome = prompt("Informe seu nome" , " Digite aqui ");
Nessa linha estamos declarando a variável e já inserindo um valor dentro
dela, o que também é possível. Afim de boas práticas recomenda-se sempre
utilizar o var para definir suas variáveis, juntas ou separadas. Exemplo:

var
valor1;
var
valor2;

var valor1,
valor2;

var valor1 = 50;

var valor2 =
100;

Missão
Declare as variáveis que serão utilizadas:

var vendedor, jan, fev, mar,

media;

Peça as informações e armazene nas variáveis:

vendedor = prompt("Informe o nome do vendedor", "Digite aqui");

jan = prompt("Informe o valor dar vendas de janeiro", "Digite aqui");
fev = prompt("Informe o valor dar vendas de fevereiro", "Digite
aqui");
mar = prompt("Informe o valor dar vendas de março", "Digite aqui");
Calcule a média, lembrando que o cálculo da média é (jan + fev + mar)/3 :

media = ( parseFloat(jan) + parseFloat(fev) + parseFloat(mar)

)/3

Quando você entra com dados utilizando o comando prompt esses valores são
armazenados como string(texto), o comando parseFloat(); converte os valores
para ponto flutuante (número decimal);
Exiba as informações com uma mensagem amigável:

console.log("A média de vendas do " + vendedor + " no 1º trim foi " +

media);
alert("A média de vendas do " + vendedor + " no 1º trim foi " + media);

O código inteiro fica assim:

Bem com isso mude o exemplo, exiba o total de vendas do primeiro

trimestre, peça informações referentes ao segundo trimestre também, crie
seus exemplos.
Dia 4 - Missão: Validar se um candidato pode ou
não iniciar o processo de CNH
Objetivo:
● Estrutura de decisão if (se)
Descrição:
Abra o console do Google Chrome, e já execute o comando para limpar o
console:

Estrutura de decisão
No Javascript temos algumas estruturas de decisão, nesse momento vamos
conhecer o if (se). Digite os códigos abaixo para testar:

Observação: para digitar como está no if utilize shift + enter para mudar de
linha e o comando não ser executado.
O comando if tem a seguinte estrutura:

if ( condição ) {
instruções se a condição for
verdadeiro
}else{
instruções se a condição for falsa
}

No código de exemplo como 7 é menor do que 10 será executado os

comandos contidos no bloco else.
Digite esse outro exemplo:

Nesse exemplo será exibida a mensagem “Mais uma vez” pois será executado
os comandos no bloco verdadeiro do if pois a variável continuar possui um
valor igual à “sim”.

Missão
Vamos primeiro pedir que o usuário digite o nome do candidato e a idade do
candidato:

var nome = prompt("Informe o nome do candidato" , "Digite

aqui");
var idade = prompt("Informe a idade do candidato" , "Digite
aqui");

Agora vamos verificar se o candidato está apto a iniciar o processo e informar

o usuário disso:

if( parseInt(idade) >= 18 ){

alert("O candidato " + nome + " está apto à iniciar o processo.");
}else{
alert("O candidato " + nome + " não está apto à iniciar o
processo.");
}

Observação: o comando parseInt(); é utilizado para converter o conteúdo da

variável para inteiro. Para relembrar mais sobre o assunto revisite a missão 3.
O código inteiro fica da seguinte forma:

Missão concluída, agora crie seus exemplos como por exemplo perguntar
para o usuário se ele é casado ou solteiro e personalizar a mensagem de
acordo com a resposta.
Dia 5 - Missão: Verificar se é dia, tarde ou noite e
mostrar uma mensagem personalizada.
Objetivo:
● Estrutura de decisão if (se)
● Objeto Date
Descrição:
Abra o console do Google Chrome, e já execute o comando para limpar o
console:

Objeto Date
Antes de tudo, precisamos declarar uma variável e descobrir a hora. Para isso
iremos criar um objeto date. Digite o código abaixo:

var dataCompleta;
dataCompleta = new
Date;

Na variável dataCompleta foi criado uma instância do objeto chamado Date.

Através do objeto Date podemos pegar todas as informações da data
completa como dia, mês, ano, hora, minuto, segundo. Digite os exemplos
abaixo para ver o funcionamento:
dataCompleta.getDay(); // dia da semana em
número
dataCompleta.getDate(); // dia do mês
dataCompleta.getMonth();
dataCompleta.getFullYear();
dataCompleta.getHours();
dataCompleta.getMinutes();
dataCompleta.getSeconds();

De posse dessas informações podemos solucionar nosso problema.

Missão
Iremos personalizar a mensagem que iremos mostrar ao usuário, para isso
iremos considerar que até antes do meio dia será “bom dia”, que até antes das
18 será “ boa tarde” e antes da 00:00 será “boa noite”.
Criar uma variável para armazenar a data completa e uma variável para
armazenar apenas à hora atual:

var
dataCompleta;
var horaAtual;

Agora vamos criar a instância do objeto Date e pegar a hora atual:

dataCompleta = new Date();

horaAtual =
dataCompleta.getHours();

Neste momento precisamos apena fazer a verificação para emitir a

mensagem:
if(horaAtual < 12){
alert("Bom dia");
}else if(horaAtual < 18){
alert("Boa
tarde");
}else{
alert("Boa
noite");
}

O código completo fica assim:

Crie seu exemplo agora, como por exemplo verificando o dia e dizendo se
está na primeira quinzena do mês, se é o dia do pagamento (dia 5), etc.
Dia 6 - Missão: Calcular as horas extras de um
funcionário a partir das horas semanais
trabalhadas. Considerar a carga horária do
funcionário de 44 horas por semana.
Objetivo:
● Estrutura de decisão if (se)
Descrição:
Abra o console do Google Chrome, e já execute o comando para limpar o
console:

Missão
Iremos calcular em quantas horas o funcionário excedeu de sua carga horária
semanal, as horas excedidas são as horas extras. Exemplo: O funcionário
Pedro tem uma carga horária semanal de 44 horas, mas ele trabalhou 50 horas
nesta semana, logo, Pedro fez 6 horas extras.
Para deixar mais completo nosso sistema, vamos verificar também se o
funcionário está “devendo” horas. Por exemplo, se Pedro tem uma carga
horária de 44 horas mas essa semana trabalhou 40, ele está com 4 horas
negativas.
Vamos criar as variáveis para armazenar a carga horária semanal do
funcionário, o saldo de horas, e, uma para armazenar as horas semanais
trabalhadas. Essa última informação deve ser informado pelo usuário. Digite:

var cargaHorariaSemanal = 44;

var saldoHoras = 0;
var horasTrabalhadas = prompt("Informe o total de horas trabalhadas do
funcionário nessa semana:","Digite aqui");
Agora, vamos calcular o saldo de horas. Digite:

saldoHoras = horasTrabalhadas -
cargaHorariaSemanal;

Agora, em cima do saldo de horas vamos fazer as verificações. Se o saldo de

horas for positivo ( >0 ), significa que existem horas extras. Se for negativo (
<0 ), significa que o usuário trabalhou menos do que sua carga horária, e está
em débito. Se nada disso acontecer significa que as horas trabalhadas e a
carga horária semanal são iguais, por isso não existe nem horas extras nem
horas em débito. Digite:

if(saldoHoras > 0){

alert("O funcionário fez " + saldoHoras + " hora(s) extra(s) nesta
semana.");
}else if(saldoHoras < 0){
alert("O funcionário está devendo " + (saldoHoras * -1) + "
hora(s) nesta semana.");
}else{
alert("O funcionário não possui hora extra essa semana");
}

O código completo fica da seguinte forma:

Observe o trecho destacado abaixo:

alert("O funcionário está devendo " + (saldoHoras * -1) + " hora(s) nesta
semana.");

Porque foi utilizado a expressão (saldoHoras * -1) ?

Isso foi puramente estético, como nesse ponto o saldoHoras é negativo (pois
o funcionário está devendo) eu multiplico por -1 para mostrar o saldoHoras
sem o sinal de “-”. Veja como seria uma mensagem sem a expressão:
O funcionário está devendo -10 hora(s) nesta semana.
Veja como a mensagem fica estranha, você falar que ele está devendo menos
dez. E agora depois de multiplicar por -1:
O funcionário está devendo 10 hora(s) nesta semana.
Bem, agora crie seus exemplos, faça por exemplo ao invés de utilizar a carga
horária semanal utilize a carga horária mensal do funcionário, solicite o nome
do funcionário, etc.

Dia 7 - Missão: Exibir dia da semana por extenso.

Objetivo:
● Estrutura de decisão if (se)
● Estrutura de decisão switch (caso)
Descrição:
Abra o console do Google Chrome, e já execute o comando para limpar o
console:

Estrutura de decisão switch

Nas missões anteriores utilizamos a estrutura de decisão if(se), porém ela não
é a única estrutura de decisão existente. Vamos relembrar a estrutura de
decisão if, digite:
var numero = prompt("Digite um número entre 1 e 3","Digite
aqui");
if(numero == 1){
console.log("Número 1");
}else if(numero == 2){
console.log("Número 2");
}else if(numero == 3){
console.log("Número 3");
}else{
console.log("Opção inválida");
}

Para resolver a mesma situação poderíamos utilizar o comando switch. Em

suma, a estrutura de controlo switch é um um if para operar sobre a mesma
variável ou expressão de entrada. Digite:

var numero = prompt("Digite um número entre 1 e 3","Digite

aqui");
switch (numero) {
case "1":
console.log("Número 1");
break;
case "2":
console.log("Número 2");
break;
case "3":
console.log("Número 3");
break;
default:
console.log("Opção inválida");
break;
}

A instrução switch é similar a uma série de instruções IF sobre a mesma

expressão. Em muitas ocasiões, você pode querer comparar a mesma variável
(ou expressão) com muitos valores diferentes, executando uma peça diferente
do código dependendo de qual valor ele se encaixar. Este é exatamente o que
a instrução switch faz. Ao invés do bloco else para o resultado falso ele
possui o bloco default que cumpre o mesmo objetivo.

Missão
Nossa missão é verificar qual dia é hoje(da semana) e escrever por extenso.
Exemplo: Hoje é segunda-feira.
Primeiro vamos criar variáveis para para armazenar a o objeto date, o dia da
semana em número e o dia da semana por extenso. Digite:

var data = new Date();

var diaDaSemana =
data.getDay();
var diaDaSemanaExtenso;

Agora vamos fazer a verificação para preencher a variável do dia da semana

por extenso. Digite:

switch(diaDaSemana){
case 1:
diaDaSemanaExtenso = "domingo";
break;
case 2:
diaDaSemanaExtenso = "segunda-
feira";
break;
case 3:
diaDaSemanaExtenso = "terça-feira";
break;
case 4:
diaDaSemanaExtenso = "quarta-feira";
break;
case 5:
diaDaSemanaExtenso = "quinta-feira";
break;
case 6:
diaDaSemanaExtenso = "sexta-feira";
break;
default:
diaDaSemanaExtenso = "sábado";
break;
}

Agora é personalizar a mensagem para o usuário. Digite:

console.log("Hoje é " + diaDaSemanaExtenso +

".");

Segue o código inteiro:

Crie um outro exemplo agora, como por exemplo pegando o número do mês
com getMonth(); e escrevendo em extenso. Exemplo: mês 1 = janeiro.
Dia 8 - Missão: Efetuar uma das 4 operações
matemáticas básicas.
Objetivo:
● Estrutura de decisão switch (caso)
Descrição:
Abra o console do Google Chrome, e já execute o comando para limpar o
console:

Missão
Vamos efetuar um cálculo à partir de dois valores informados pelo usuário e
de acordo com a operação escolhida pelo usuário. Vamos pedir os valores e a
operação. Digite:

var numero1 = prompt("Informe o primeiro número","Digite aqui");

var numero2 = prompt("Informe o segundo número","Digite aqui");
var operacao = prompt("Informe o operador: \nAdição (+) \nSubtração (-)
\nMultiplicação (*) \nDivisão(\\)","Digite aqui");
var resultado;

Agora vamos verificar qual operação foi escolhida e executar a operação.

Digite:

switch(operacao){
case "+":
resultado = parseFloat(numero1) +
parseFloat(numero2);
break;
case "-":
resultado = parseFloat(numero1) -
parseFloat(numero2);
break;
case "*":
resultado = parseFloat(numero1) *
parseFloat(numero2);
break;
case "/":
resultado = parseFloat(numero1) /
parseFloat(numero2);
break;
default:
alert("Operação inválida");
break;
}

Por final, vamos apresentar o resultado. Digite:

console.log("O resultado é " +

resultado);

O código todo fica assim:

Tente adicionar mais operações, como exponenciação.
Dia 9 - Missão: Verificando confirmação para o
usuário.
Objetivo:
● Estrutura de decisão switch (caso)
Descrição:
Abra o console do Google Chrome, e já execute o comando para limpar o
console:

Confirm
O comando confirm cria uma janela parecida com o prompt, porém nesta
janela existem apenas dois botões: OK e Cancelar. Digite:

confirm("Deseja salvar o
arquivo?");

A janela produzia será igual à esta:

Se você clicar no botão “OK” o retorno será true, se clicar no botão
“Cancelar” o retorno será false. Podemos armazenar esse retorno em uma
variável. Digite:

var decisao = confirm("Deseja salvar o

arquivo?");
decisao;

Missão
Vamos fazer uma pergunta para o usuário utilizando o comando confirm e de
acordo com o botão que ele pressionar vamos mostrar uma mensagem.
Primeiro, vamos criar a variável que vai armazenar o resultado do comando
confirm e já escrever este comando também. Digite:
var continuar = var continuar = confirm("Deseja continuar a
operação?");

Agora, vamos verificar qual foi o botão pressionado utilizando a estrutura de

decisão if e de acordo com o botão exibir a mensagem. Digite:

if(continuar == true){
console.log("Você clicou no botão OK. Vamos continuar a
operação.");
}else{
console.log("Você clicou no botão CANCELAR. Vamos
cancelar a operação.");
}

Veja como ficou o código inteiro:

Pense em mais situações onde você pode utilizar o confirm e crie seus
exemplos.
Dia 10 - Missão: Melhorando nossa produtividade.
Objetivo:
● Instalar uma IDE
Descrição:
Tudo o que fizemos até agora nas outras missões fizemos no console do
navegador o Google Chrome, o que é muito bom pois para começar a
programar foi bem simples. Uma das piores coisas em praticar no console é
que ele não salva nada, então ao fechar o navegador, ou mesmo atualizar a
janela, aquilo que você digitou era perdido. Nesse momento é hora de
melhorar nosso ambiente de trabalho e instalar uma IDE para podermos
salvar nossos códigos.
IDE (Integrated Development Environment) é um Ambiente de
Desenvolvimento Integrado, ou seja, um editor de códigos com alguns
recursos que melhoram a nossa produtividade.
Existem ide’s de vários portes, desde aquelas que são basicamente editores de
códigos mais simples(Notepad++) até aqueles que possuem tantos recursos
que talvez você nem utilize todos eles (Visual Studio).
Dentre essas que são mais simples, talvez as mais famosas sejam:
● Notepad++
● Visual Studio Code
● Atom
● Sublime Text
● Brackets

Notepad++
Visual Studio Code

Atom

Sublime Text

Brackets
Basicamente, todos esses editores são muito parecidos entre si, a grande
mudança entre eles são exatamente os plugins e extensões disponíveis para
cada um. Plugins e extensões são as funções adicionais desenvolvidas para
esses editores, essas funções podem ser desenvolvidas por qualquer pessoa da
comunidade e não apenas funcionários das empresas.

Missão
Durante nossas missões irei utilizar o Visual Studio Code como IDE padrão
para realizar as atividades a partir desse momento.
Acesse o site do Visual Studio Code e faça download.

Após o download, instale o VS Code ( o software não está disponível em

português, pode instalar em inglês mesmo).
Terminada a instalação, abra o VS Code.

Ao abrir o VS Code você já verá as janelas para instalar o pacote para

português (Brazil) disponível. Como estamos iniciando nosso estudo em
programação, se quiser, pode instalar a tradução, eu não recomendo, vou
utilizar em inglês.
Pressione CTRL+N (ou click em File → New File ) para criar um novo
arquivo, observe que ele criou uma nova aba chamada Untitled-1.
Pressione CTRL+S para salvar o arquivo, coloque o nome de
“Missao10.html” e click em salvar.

Digite:

Perceba que ao digitar <script> o editor colocar automaticamente </script>.

Todo nosso código JavaScript deverá ficar entre as tag’s <script></script>.

Click entre as tag’s script e insira algumas linhas em branco:

Digite a linha de comando como na imagem abaixo.

Perceba que na frente do nome do arquivo existe uma bolinha, essa bolinha
significa que existem coisas que não foram salvas nesse arquivo. Pressione
CTRL+S para salvar o arquivo e veja que essa bolinha vai sumir.
Depois de salvar o arquivo minimize o VS code, e abra o arquivo
Missao10.html no Google Chrome (click com o botão direito no arquivo e
escolha a opção Abrir com → Google Chrome ), abra o console do
navegador e veja nossa mensagem.

Agora sua vez de praticar, escolha algumas (ou todas) das missões anteriores
e crie arquivos separados no VS Code (Missao1.html, Missao2.html,
Missao3.html, etc) e realize-as utilizando o VS Code.
Dia 11 - Missão: Exibindo uma mensagem várias
vezes.
Objetivo:
● Laço de repetição (while)
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao11Exemplo.html

O laço de repetição permite que você repita uma série de instruções até a
condição para o laço se tornar falsa. Veja o exemplo a seguir, digite no VS
Code dentro da tag script:

Vamos entender linha à linha o que aconteceu:

Primeiro temos var contador = 1; nessa linha declaramos uma variável que
vai servir para controlar quantas vezes o laço de repetição foi executado. A
cada vez que o laço executar, na última linha dentro do laço existe o comando
contador = contador + 1; que acrescenta mais um à essa variável de controle.
Essa variável começa o programa valendo 1, mas depois de executar o laço
uma vez ela vale 2, e depois 3 e assim sucessivamente.
Depois temos while( contador <= 5 ){ aqui é a condição que deve ser
satisfeita para que os comandos dentro do laço sejam executados. O contador
começa valendo 1, como 1 é menor ou igual à 5 ele entra no laço e realiza um
loop, a cada loop aumenta 1 no valor da variável contador, depois de 5 loops
o contador tem o valor de 6, o que faz com que a condição seja falsa e o laço
de repetição não seja mais executado.
Esse é o laço de repetição chamado enquanto...faça, ou seja enquanto a
condição for verdadeira faça o que estiver dentro do laço.
Vamos criar uma outra situação, tipo eu quero uma contagem regressiva,
começando em 10 e depois que chegar a zero apareça a mensagem “OLHA A
EXPLOSÃO!”. Volte ao VS Code e altere o código para esse:

Salve seu arquivo e abra ele no Google Chrome novamente e veja o

resultado:

Missão
Abra o VS Code, aperte CTRL+N para criar um arquivo novo, aperte
CTRL+S e salve o arquivo com o nome de Missao11.html
A missão consiste em repetir uma mesma frase uma certa quantidade de
vezes. Nós já fizemos isso no exemplo sobre laço de repetição, para essa
missão vamos perguntar para o usuário quantas vezes ele quer repetir a
mensagem.
Vamos criar uma variável para ser nosso contador e perguntar quantas vezes
ele deseja repetir a mensagem. Digite:

var contador = 1;
var numeroRepeticao = prompt("Informe o numero de vezes que a
mensagem deve aparecer", "Digite aqui");

Vamos criar o laço de repetição para repetir a mensagem. Digite:

while(contador <= numeroRepeticao){

console.log("Mensagem numero " +
contador);
contador = contador + 1;
}

Veja como ficou o código completo:

Salve seu arquivo e abra no Google Chrome para ver o resultado:

Tente criar um exemplo de contagem regressiva onde o usuário informa qual
o maior número para ir diminuindo.
Dia 12 - Missão: Calcular a média de N alunos.
Objetivo:
● Laço de repetição (while)
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao12.html e digite:

Missão
Vamos fazer um programa para calcular a média de um aluno. Ao apresentar
o resultado, o programa deve perguntar se gostaria de calcular a média de
outro aluno, caso a resposta seja SIM, o programa deve executar novamente.
Declare as variáveis que irão armazenar o nome, as notas e a média do aluno.
Digite:

var nome, nota1, nota2, nota3, nota4,

media;

Agora, declare a variável que vai armazenar a resposta do usuário que será
um true ou false. Nós vamos inicializar ela com true para entrar no laço de
repetição pelo menos a primeira vez. Digite:

var resposta =
true;
Crie o laço de repetição, onde dentro do laço será pedido o nome do aluno,
cada uma das notas, a média será calculada, será exibido o nome do aluno e
sua respectiva nota e ao final será exibido uma janela com os botões OK ou
CANCELAR para saber se deve ser executado o laço novamente. Digite:

while(resposta==true){
nome = prompt("Informe o nome do aluno(a)","Digite aqui");
nota1 = prompt("Informe a nota do 1º bimestre","Digite aqui");
nota2 = prompt("Informe a nota do 2º bimestre","Digite aqui");
nota3 = prompt("Informe a nota do 3º bimestre","Digite aqui");
nota4 = prompt("Informe a nota do 4º bimestre","Digite aqui");
media = (parseFloat(nota1) + parseFloat(nota2) + parseFloat(nota3) +
parseFloat(nota4))/4;
alert("O(A) estudande " + nome + " obteve a media " + media);
resposta = confirm("Calcular a media de outro aluno?");
}

O código inteiro fica da seguinte forma:

Salve o arquivo e abra no Google Chrome para ver o resultado.

Dia 13 - Missão: Calcular a média de N números.
Objetivo:
● Laço de repetição (while)
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao13.html e já digite:

Missão
Nosso programa vai calcular a média de quantos números o usuário quiser
digitar. Relembrando o cálculo da média é a SOMA DE TODOS OS
NÚMEROS DIVIDIDO PELA QUANTIDADE DE NÚMEROS. Por
exemplo, se eu tenho 3 números, a média é a soma desses 3 números dividido
por 3.
No nosso programa depois de digitar o número será perguntado se o usuário
deseja digitar outro número, se ele disser que SIM, aparece a opção para
inserir um novo número, se disser que não será exibido a média
Primeiro, vamos declarar as variáveis que irão armazenar a quantidade de
números que o usuário digitou, a variável que vai armazenar se o usuário irá
inserir um novo número, a variável que irá armazenar a média, a variável que
vai armazenar a soma total dos números digitados e por último a variável que
vai armazenar o número atual digitado. Digite:

var quantidadeNumeros =
0;
var novoNumero = "S";
var media = 0;
var somaNumeros = 0;
var numero = 0;

Agora vamos criar o laço de repetição, onde dentro do laço terão as

instruções perguntando o número novo, somando esse novo número ao total
já existente, aumentando em 1 a quantidade de números digitados e
perguntando se o usuário deseja digitar mais um número. Digite:

while(novoNumero == "S"){
numero = prompt("Informe um numero","Digite aqui!");
somaNumeros = parseFloat(somaNumeros) + parseFloat(numero);
quantidadeNumeros = quantidadeNumeros + 1;
novoNumero = prompt("Deseja informar mais um numero?
\n[S]im\n[N]ao");
}

Depois de terminado o laço vamos calcular a média e exibir o resultado.

Digite:

media = somaNumeros / quantidadeNumeros;

console.log("A media dos numeros informados é " +
media);

O código inteiro fica assim:

Salve o arquivo e abra no Google Chrome para ver o resultado, não esqueça
de abrir o console.
Dia 14 - Missão: Criar um contador.
Objetivo:
● Laço de repetição (while)
● Operadores de incremento e decremento
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao14.html e já digite:

Missão
Vamos criar um contador que vai de 0 à 10 aumentando de um em um, e
depois volta de 10 à 0 diminuindo de um em um.
Até agora quando queríamos aumentar de um em um em nossos exemplos
utilizamos algo como:

contador = contador +
1;

E quando queríamos diminuir usamos:

contador = contador -
1;

Porém existem operadores específicos para incrementar (+1) e decrementar

(-1) valores, são os operadores ++ e -- e são eles que utilizaremos nessa
missão.
Primeiro vamos declarar as duas variáveis que vão servir como contadores,
uma que deverá aumentar e outra que deverá diminuir. Digite:

var contador = 0;
var contador2 =
10;

Agora crie o laço de repetição que deve mostrar de 0 à 10, aumentando de um

por um por causa da instrução contador++. Digite:

alert("Vamos
aumentar");
while(contador <= 10){
console.log(contador);
contador++;
}

Agora crie o laço de repetição que deve mostrar de 10 à 0, diminuindo de um

por um por causa da instrução contador2--. Digite:

alert("Vamos diminuir");
while(contador2 >= 0){
console.log(contador2);
contador2--;
}

O código completo fica assim:

Salve o arquivo e abra no Google Chrome para ver o resultado, não esqueça
de abrir o console.
Dia 15 - Missão: Armazenando lista de carros de
um estacionamento
Objetivo:
● Utilizando Array
● Laço de repetição(while)
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao15Exemplo.html e já digite:

Array
Array é um tipo de variável(não confundir com tipo de dados) utilizado para
armazenar múltiplos valores. A grande característica do array é que ele pode
ter subdivisões endereçadas(índice) e em cada uma dessas subdivisões
armazenar um valor diferente.
Por exemplo, vamos imaginar que você precise guardar o nome de 5 alunos,
normalmente, com o que aprendemos até aqui você faria da seguinte forma,
digite:

var aluno1 = "Maria";

var aluno2 = "Rose";
var aluno3 = "Claudio";
var aluno4 = "Renata";
var aluno5 =
"Fernando";
E para exibir o nome de cada aluno você faria algo parecido com isso, digite:

console.log(aluno1);
console.log(aluno2);
console.log(aluno3);
console.log(aluno4);
console.log(aluno5);

O código completo até aqui:

Salve seu arquivo e abra no Google Chrome para visualizar o resultado que
estará no console:
Dessa forma conseguimos produzir o resultado esperado, que era armazenar o
nome dos alunos e exibi-los posteriormente. Mas será que essa é a melhor
maneira? Até aqui é a maneira possível, portanto, a melhor maneira dentro do
que aprendemos.

Array na prática
Um pouco mais acima está escrito que “array é um tipo de variável utilizado
para armazenar múltiplos valores” vamos ver o funcionamento de array na
prática para resolver nosso problema.
Para criarmos um array a sintaxe é:

var nome_array = [ valor1 , valor2 , valor3 , valor 4 ,

...];

Vamos substituir as 5 primeiras linhas do código que criamos, onde foram

declaradas as variáveis, por uma linha apenas. Digite:

var alunos = ["Maria" , "Rose" , "Claudio" , "Renata" ,

"Fernando"];

As variáveis aluno1, aluno2, aluno3, aluno4 e aluno5 foram substituídas pela

variável alunos. A variável alunos é um array que contém todos os nomes dos
alunos, ou seja contém um conjunto de valores.
O array alunos contém 5 valores, logo falamos que ela contém 5 posições.
Para acessar cada uma das posições utilizamos um índice. Esse índice inicia
em 0. Observe a tabela abaixo:

0 1 2 3 4
Maria Rose Claudio Renata Fernando

Se eu quiser trocar o nome da Renata por Renato eu preciso acessar a posição

3 do array alunos e substituir o valor. Digite:
alunos[3] =
"Renato";

Para mostrar cada nome disponível no array alunos basta eu utilizar o

comando console.log utilizando cada uma das posições do array alunos.
Digite:

console.log(alunos[0]);
console.log(alunos[1]);
console.log(alunos[2]);
console.log(alunos[3]);
console.log(alunos[4]);

O código inteiro até o momento está assim:

Salve e abra no navegador para ver o resultado no console:

Veja que nosso código já está menor do que o anterior, e também mais
performático, pois ao invés de utilizarmos 5 variáveis na memória estamos
utilizando apenas uma.
Podemos utilizar o que já aprendemos sobre laço de repetição e melhorar
também a exibição dos nomes dos alunos. Digite:

var contador = 0;
while(contador<=4){
console.log(alunos[contador]);
contador++;
}

Veja o código completo:

Salve e abra no navegador para ver o resultado no console.

Podemos dar uma melhor organizada no nosso código e comparar com a
primeira versão. versão atual:

Primeira versão:
Missão
Crie um arquivo novo no VS Code, aperte CTRL+S e salve o arquivo com o
nome de Missao15.html e já digite:

Nossa missão consiste e em armazenar a lista de carros de um

estacionamento.
Primeiro vamos declarar a variável responsável por armazenar a lista de
carros e o contador. Digite:

var carros = ["Carro1" , "Carro2" , "Carro3" , "Carro4" ,

"Carro5"];
var contador = 0;

Agora crie o laço de repetição responsável por popular o array carros com os
modelos dos carros. Digite:

while(contador<=4){
carros[contador] = prompt("Informe o modelo do carro nº " + contador ,
"Digite aqui");
contador++;
}

Agora vamos zerar novamente a variável contador para que ela possa ser
utilizada para criar um outro loop. Digite:

contador =
0;

Por fim, vamos criar o laço de repetição responsável por exibir os carros no
console. Digite:

while(contador <= 4){

console.log("Modelo nº " + contador + ": " +
carros[contador]);
contador++;
}

O código completo fica assim:

Salve o arquivo e abra no Google Chrome para ver o resultado, não esqueça
de abrir o console.
Dia 16 - Missão: Adicionando e removendo
elementos da lista de carros
Objetivo:
● Utilizando Array
● Métodos do Array
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao16.html e já digite:

Missão
Vamos criar uma lista de carros e manipular os elementos delas, removendo
carros existentes e adicionando novos.
Primeiro vamos criar o array com a lista de carros. Digite:

var carros = ["Uno" , "Gol" , "Celta" , "Civic" , "Palio" , "Siena"

];

Nesse momento criamos um array com o nome de carros e armazenamos

todos os valores à frente dele. Se fôssemos representar o array carros
graficamente seria algo parecido com:

0 1 2 3 4 5
Uno Gol Celta Civic Palio Siena
Temos então um array com 6 posições que possui índices de 0 à 5.
Uma forma que podemos fazer para visualizar o conteúdo deste array é
utilizar o comando console.dir. Digite:

console.dir(carros);

Salve o arquivo e abra no Google Chrome para ver o resultado, não esqueça
de abrir o console para ver o resultado que será algo como:

Vamos alterar o “Civic” para “Fit”. Digite:

carros[3] =
"Fit";

E já utilize o console.dir novamente para ver o resultado. Digite:

console.dir(carros);

Salve o arquivo e abra no Google Chrome para ver o resultado, não esqueça
de abrir o console para ver o resultado que será algo como:
Observe que da primeira exibição para a segunda o valor da posição 3 foi
alterado.
O código inteiro até o momento é:

Vamos remover o último valor do array carros. Digite:

carros.pop();

Veja como está o código completo:

O método pop do array remove o último elemento do array. Salve e abra seu
arquivo no navegador para ver algo parecido com isso:

Observe que agora a primeira exibição do array possui 6 posições e a segunda

5, pois entre as exibições foi aplicado o método pop. Click nas setinhas para
expandir e ver o conteúdo dos arrays:
Agora vamos inserir mais dois valores no array carros, vamos inserir “Agile”
e “Sandero”. Logo depois da linha do comando “pop” digite:

carros.push("Agile");
carros.push("Sandero");

Veja o código completo:

O método push insere um valor ao final do array. Veja que a primeira

exibição do array possui 6 posições, e a segunda 7, entre a primeira e a
segunda foi aplicado o método pop, que removeu uma posição fazendo nosso
array ficar com 5 posições e depois aplicado duas vezes o método push,
fazendo o array ficar com 7 posições.
Dia 17 - Missão: Era uma vez o JavaScript
Objetivo:
● Conhecendo mais sobre o JavaScript
Primeiro, JavaScript é DIFERENTE de Java.
Você pode estar se perguntando: "por que se comenta tanto sobre JavaScript
hoje em dia? Por que essa linguagem ganhou tanta popularidade, e por que
eu, desenvolvedor, tenho que aprendê-la?"
Para iniciarmos nossa conversa sobre JavaScript, vale avisar que ela é a
linguagem de programação nativa da Web. Qualquer navegador que você
esteja utilizando, incluindo o Google Chrome, com certeza dá suporte ao JS,
afinal ele é utilizado para dar dinamismo a nossas páginas. Por exemplo,
quando clicamos na ferramenta de busca do em algum site, o fato de que seja
detectado o evento de clique no ícone da lupa e, em seguida, ocorra uma
pequena animação para exibir a caixa de busca, é realizável com JS.
Talvez você tenha conhecimento maior sobre HTML e CSS e garanta que
seja possível fazer o mesmo usando o transform, já que também podemos
criar algumas animações apenas com CSS puro. Porém, certas ações como
algumas validações específicas nos formulários, como aquelas realizadas nos
campos de "nome" e "e-mail", não são possibilitadas unicamente com
HTML. Esse tipo de dinamismo e interatividade que temos atualmente nos
formulários e nas páginas Web vieram com o JavaScript.
Graças ao JS, aumentamos a usabilidade do usuário nas páginas web. Um
exemplo é quando clicamos em alguma categoria no menu de algum site, ele
filtra os conteúdos. Isso só é possível com JavaScript.
É uma linguagem bastante poderosa que permite que o usuário consiga
interagir com a página. Isto já seria um excelente motivo para despertar seu
interesse pela linguagem, mas além de ser dominante nos cenários dos
navegadores, o JavaScript recentemente também se expandiu para o lado do
servidor com o lançamento do Node.js, um ambiente que permite criarmos
um servidor Web completo utilizando JavaScript. Desta forma, a linguagem
ganhou grande popularidade e caiu no gosto dos desenvolvedores, tornando-
se parte do coletivo imaginário de qualquer programador moderno.
O Javascript não "ganhou terreno" apenas no servidor, sendo possível
programarmos um Arduíno com a biblioteca Johnny-Five, criarmos um
aplicativo para Desktop utilizando o framework Electron, e até mesmo
encontramos um banco de dados como o MongoDB, que utiliza a sintaxe do
JavaScript em suas queries.
O JavaScript está presente em diversas áreas do desenvolvimento, ampliando
as habilidades de desenvolvedor para os mais diversos ramos da tecnologia, e
é claro, controlando e manipulando qualquer página Web!
Para finalizar, assista o vídeo abaixo até o minuto 10:00, até esse minuto é
explicado a origem do JavaScript.
https://www.youtube.com/watch?v=jXPU0uAzmYY

Dia 18 - Missão: Dicionário de animais

Objetivo:
● Array
● Laço de repetição
● Estrutura de decisão
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao18.html e já digite:

var continuar = "S";

var animalExibir;
var animais = new
Array(4);

A linha var animais = new Array(4); cria um array chamado animais com 4
posições.
Vamos agora colocar informações no array animais. Digite:

animais[0] = "Cuidado,a picada de uma radioativa pode te transformar em

super-herói";
animais[1] = "Escorpião é o oitavo signo astrológico do zodíaco";
animais[2] = "Cobra é uma denominação genérica, utilizada
frequentemente na língua portuguesa como sinônimo para serpente."
animais[3] = "Na linguagem vulgar, chama-se lagarta ao primeiro estágio
larval dos insetos da ordem dos Lepidoptera.";

Vamos criar o laço de exibição e a estrutura de decisão que vai verificar a

opção escolhida para exibir as informações dos animais. Digite:

while(continuar == "S"){
console.clear();

animalExibir = prompt("Escolha uma opcao abaixo:\n[0] Aranha \n[1]

Escorpiao \n[2] Cobra \n[3] Lagarta", "Digite aqui");

switch(animalExibir){
case "0":
console.log("Aranha");
console.log(animais[animalExibir]);
break;

case "1":
console.log("Escorpião");
console.log(animais[animalExibir]);
break;

case "2":
console.log("Cobra");
console.log(animais[animalExibir]);
break;

case "3":
console.log("Lagarto");
console.log(animais[animalExibir]);
break;

default:
console.log("Opcao invalida");
break;
}

continuar = prompt("Deseja ver outro animal? [S]im / [N]ao", "Digite

aqui");
}

E por fim, vamos limpar o console exibir uma mensagem para finalizar o
programa. Digite:

console.clear();
console.log("Obrigado!");
O código inteiro fica assim:

animalExibir = prompt("Escolha uma opcao abaixo:\n[0] Aranha \n[1]

Escorpiao \n[2] Cobra \n[3] Lagarta", "Digite aqui");

switch(animalExibir){
case "0":
console.log("Aranha");
console.log(animais[animalExibir]);
break;

case "1":
console.log("Escorpião");
console.log(animais[animalExibir]);
break;

case "2":
console.log("Cobra");
console.log(animais[animalExibir]);
break;
case "3":
console.log("Lagarto");
console.log(animais[animalExibir]);
break;

default:
console.log("Opcao invalida");
break;
}

continuar = prompt("Deseja ver outro animal? [S]im / [N]ao", "Digite

aqui");
}
console.clear();
console.log("Obrigado!");
</script>

Salve o arquivo e abra no Google Chrome para ver o resultado, não esqueça
de abrir o console.
Dia 19 - Missão: Dicionário de animais
Objetivo:
● Array
● Laço de repetição
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao19.html e já digite:

Missão
Vamos criar um programa para o controle de cursos, onde o usuário deve
informar o nome do curso, o código do curso e o conteúdo programático para
o curso. No caso do conteúdo programático, o usuário pode informar quantas
vezes quiser.
Vamos declarar as variáveis que vão armazenar o nome do curso, o código do
curso, a variável de controle para informar um novo conteúdo, uma variável
para armazenar temporariamente o conteúdo, o array de conteúdos e a
variável de contador. Digite:

var nomeCurso = prompt("Informe o nome do curso" , "Digite aqui");

var codigoCurso = prompt("Informe o codigo do curso" , "Digite
aqui");
var novoConteudo = "S";
var conteudoTemp = "";
var conteudoCurso = [];
var contador = 0;
Vamos criar o laço de repetição que vai pedir as informações de conteúdo.
Digite:

while(novoConteudo == "S"){
conteudoTemp = prompt("Informe o conteudo do curso" , "Digite aqui");
conteudoCurso.push(conteudoTemp);
novoConteudo = prompt("Deseja cadastrar um novo conteúdo para o
curso?[S]im / [N]ao" , "Digite aqui");
}

No laço acima, o conteúdo é armazenado em uma variável e depois inserido

no array através da linha conteudoCurso.push(conteudoTemp);
Agora crie as instruções para exibir as informações do curso e o laço que vai
percorrer o array exibindo o conteúdo do curso. Digite:

console.clear();
console.log("Codigo: " + codigoCurso);
console.log("Curso: " + nomeCurso);
console.log("Conteudo: ");
while(contador < conteudoCurso.length)
{

console.log(conteudoCurso[contador]);
contador++;
}

O código completo fica assim:

Salve o arquivo e abra no Google Chrome para ver o resultado, não esqueça
de abrir o console.
Dia 20 - Missão: Exibir os alunos de uma lista
Objetivo:
● Laço de repetição(for)
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao20Exemplo.html e já digite:

Mais um laço de repetição

Assim como temos algumas estruturas de decisão (vimos o if e o switch)
temos também diversos laços de repetição:
● for
● for...in
● while
● do..while
Qualquer problema que você resolve com um laço é possível resolver com
outro, claro que pode ser que tenha uma solução “mais fácil” dependendo do
problema e do laço utilizado, mas em geral você pode utilizar o que você
conseguir para resolver o problema.
Nós já estudamos o laço while e agora vamos ver o laço for.
Laço de repetição FOR
Vamos criar um exemplo para ver o laço for. Digite:

for(contador = 1 ; contador <= 10 ; contador++)

{
console.log(contador);
}

Salve o arquivo e abra no Google Chrome, abra o console e veja o resultado:

O laço for que criamos irá executar 10 vezes e em cada uma das vezes vai
exibir o conteúdo da variável contador. Vamos entender o laço for:

for( declararação_de_variável ; condição ; incremento

){
}

declaração de variável → contador = 1

condição → contador <= 10
incremento → contador++

Missão
Crie um arquivo novo no VS Code, aperte CTRL+S e salve o arquivo com o
nome de Missao20.html e já digite:

Nossa missão será criar um array com o nome dos alunos de um curso e
exibir o nome de cada um dos alunos no console.
Fizemos algo muito parecido em um exemplo na missão 15. Veja:

Iremos fazer a mesma coisa, mas utilizando o laço for para evidenciar as
diferenças.
Digite:
var alunos = ["Maria" , "Rose" , "Claudio" , "Renata" , "Fernando"];
for(contador = 0; contador < 5 ; contador++){
console.log(alunos[contador]);
}

Primeiro temos a variável contador. A condição diz que o laço vai se repetir
enquanto contador for menor que 5, pois 5 é a quantidade de posições do
array alunos. E a cada repetição do laço será executado à instrução
contador++ que fará com que o valor de contador seja aumentado de um por
um.
Salve, abra no Google Chrome e visualize o resultado no console:
Veja o código inteiro:

Compare agora com o exemplo da missão 15 e veja como esse código ficou
mais enxuto, porém, para quem está iniciando, talvez um pouco mais
complexo:

Um bom exercício é revisitar as missões anteriores e tentar utilizar o laço for

para resolver as missões que envolverem laço de repetição.
Dia 21 - Missão: Criando uma agenda de contatos
Objetivo:
● Laço de repetição(for)
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao21.html e já digite:

Missão
A missão consiste em criar uma agenda de contatos que contenham os
seguintes dados: nome, telefone e cidade. Para cada parte de informação
teremos um array diferente, então nosso código terá os arrays: nomes,
telefones e cidades. Observe os exemplos:
Nomes

0 1 2

João Maria Joana

Telefones

0 1 2
99111-1111 99222-2222 99333-3333

Cidades
0 1 2
Americana Piracicaba Campinas

A ligação entre as informações será através do índice, por exemplo: o contato

0 é o João, com o telefone 99111-1111 da cidade Americana.
Vamos começar o código declarando as variáveis e arrays que vamos utilizar.
Digite:

var nomes = [];

var telefones = [];
var cidades = [];
var novoContato =
"S";
var contador = 0;

Agora, vamos criar o laço que pega as informações e popula os arrays.

Digite:

while(novoContato == "S"){
nomes[contador] = prompt("Informe o nome","");
telefones[contador] = prompt("Informe o telefone","");
cidades[contador] = prompt("Informe a cidade","");
novoContato = prompt("Cadastrar novo contato?[S]im /
[N]ao","");
contador++;
}

Por fim, crie o laço que exibe as informações cadastradas. Digite:

for(i=0;i < nomes.length ; i++){
console.log("Nome: " + nomes[i]);
console.log("Telefone: " +
telefones[i]);
console.log("Cidade: " + cidades[i]);
console.log("----------");
}
Veja o código inteiro:

for(i=0;i < nomes.length ; i++){

console.log("Nome: " + nomes[i]);
console.log("Telefone: " + telefones[i]);
console.log("Cidade: " + cidades[i]);
console.log("----------");
}
</script>
Salve, abra no Google Chrome, preencha as informações e visualize no
console as informações.
Dia 22 - Missão: Escrevendo na tela
Objetivo:
● Laço de repetição(for)
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao22.html e já digite:

Missão
Todas as saídas de dados que trabalhamos até agora foram no console ou
utilizando alert. Agora vamos pegar informações do usuário e escrever dentro
de sua página html. Para fazer isso vamos utilizar o comando
document.write(). Digite:

var nome = prompt("Informe seu nome","Digite

aqui");
document.write(nome);

Salve, abra no Google Chrome, preencha as informações e visualize o

seguinte resultado:
Agora vamos pedir a idade do usuário. Digite:

var idade = prompt("Informe sua idade","Digite

aqui");
document.write(idade);

Salve e veja o resultado:

Veja que o nome e a idade ficaram “colados”, vamos colocar uma informação
em cada linha. Para isso insira a linha a seguir antes da linha
document.write(idade); .Digite:

document.write("
<br>");

Salve e veja o resultado:

Veja o código inteiro:

Missão
Vamos pedir o nome do aluno e 4 notas para calcular a média, porém vamos
verificar se cada uma das notas digitadas é realmente um número, caso não
seja iremos pedir que o usuário informe a nota novamente. Também iremos
utilizar um comando para limitar a média à uma casa decimais(e não mais
ficar apresentando resultados tipo 7.89999999999999).
Vamos declarar as variáveis que irão armazenar a nota, a média e nosso
contador, e depois disso já vamos pedir o nome do aluno. Digite:

var media = 0, nota = 0, contador = 0;

var nome = prompt("Informe o nome do aluno","Digite
aqui!!!");

Nada de novo até aqui, agora criamos o laço de repetição que “prenderá” o
usuário até que ele digite 4 notas válidas(números). Digite:

while(contador < 4){

nota = prompt("Informe a nota do aluno","Digite
aqui");
if(isNaN(nota)){
alert("Voce nao digitou um numero valido");
}else{
media = parseFloat(media) + parseFloat(nota);
contador++;
}
}

A novidade aqui é a função isNaN(nota), essa função verifica se o conteúdo

dentro dos parênteses Não É um Número(isNaN = is Not a Number), caso
não seja um número ele executa as instruções da parte true do if, ou seja
exibe a mensagem “Voce nao digitou um numero valido”. Se for um número,
são executadas as instruções da parte false do if, ou seja, o novo valor é
somado à variável media e o contador é incrementado em 1.
Vamos agora fazer o cálculo da média e apresentar as informações na página.
Digite:

media = media / 4;
document.write("A média de " + nome);
document.write(" é " +
media.toFixed(1));

Nessa parte do código a novidade é o toFixed(1), que faz com que o conteúdo
da variável media seja apresentado utilizando apenas 1 casa decimal.
Veja o código inteiro:

Salve, abra no Google Chrome, preencha as informações e visualize o

resultado.
Dia 24 - Missão: Tornando a cálculo da média
reutilizável
Objetivo:
● Criando funções personalizadas
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao24Exemplo.html e já digite:

Nós já fizemos algumas missões onde o objetivo era criar o cálculo da média,
porém o problema que temos é de esses códigos não serem reutilizáveis, e
toda vez que queremos calcular uma média diferente precisamos recarregar a
página. Isso ainda acontece pois não trabalhamos com funções!
Funções, de um jeito bem simples, é quando você pega um conjunto de
instruções e dá um nome, de modo que toda vez que você chame por esse
nome sejam executadas aquelas instruções.
Vamos criar um exemplo: precisamos efetuar um cálculo de multiplicação
entre dois números. Digite:

function Multiplicacao(){
var resultado = 0;
var n1 = prompt("Informe o primeiro numero" , "Digite
aqui!");
var n2 = prompt("Informe o segundo numero" , "Digite
aqui!");
resultado = n1 * n2;
document.write("O resultado é " + resultado);
}

O que temos de novo é a function. A sintaxe para se criar uma função é a

seguinte:
function NomeDaFunção(){
instruções;
instruções;
instruções;
}
As regras para o nome da função são basicamente os mesmos de variáveis.
Salve seu arquivo e abra no Google Chrome, e veja que nada vai acontecer.
Em todos nossos outros exemplos, quando você abria o arquivo o código já
era executado automaticamente, dessa vez não foi pois todo o código está
dentro de uma função, e para esse código ser executado você deve chamar
essa função. Abra o console e digite o nome da função e pressione enter:

Veja que agora sim seu código foi executa, os dois números foram pedidos e
o resultado apareceu na tela:
O legal é que agora, sempre que precisar fazer o cálculo é só “chamar” a
função.

Missão
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao24.html e já digite:

Vamos pedir as notas e calcular a média, vamos colocar essa lógica dentro de
uma função. Digite:
function Media(){
var media = 0, nota = 0, contador = 0;
var nome = prompt("Informe o nome do aluno","Digite
aqui!!!");
while(contador < 4){
nota = prompt("Informe a nota do aluno","Digite aqui");
if(isNaN(nota)){
alert("Voce nao digitou um numero valido");
}else{
media = parseFloat(media) + parseFloat(nota);
contador++;
}
}
media = media / 4;
document.write("Aluno(a).: " + nome );
document.write("<br>");
document.write("Media....: " + media );
}
Salve, abra no Google Chrome, abra o console, digite o nome da função (
Media(); ) , pressione enter, preencha as informações e visualize o resultado.
Dia 25 - Missão: Abrindo site de notícias
Objetivo:
● Criando funções personalizadas
● Utilizar funções diversas do JavaScript
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao25.html e já digite:

Missão
Vamos criar uma função que abra o site do UOL e uma que abra o site
GLOBO. Digite:

1) Qual elemento HTML que devemos colocar nosso código JavaScript?

a) <js>
b) <script>
c) <javascript>
d) <scripting>
2) Como você pode escrever "Hello World" em uma caixa de mensagem? *
a) msg("Hello World");
b) alertBox("Hello World");
c) msgBox("Hello World");
d) alert("Hello World");
3) Como criar uma função em JavaScript? *
a) function = myFunction()
b) function:myFunction()
c) function myFunction()
4) Como faço para executar uma função chamada "myFunction"? *
a) myFunction()
b) call myFunction()
c) call function myFunction()
5) Como escrever um IF em JavaScript? *
a) if i = 5
b) if i = 5 then
c) if (i == 5)
d) if i == 5 then
6) Como escrever um IF em que a condição seja que "i" não é igual à 5? *
a) if i =! 5 then
b) if (i != 5)
c) if i <> 5
d) if (i <> 5)
7) Como criar um laço WHILE? *
a) while i = 1 to 10
b) while (i <= 10; i++)
c) while (i <= 10)
8) Como criar um laço FOR?
a) for (i = 0; i <= 5)
b) for i = 1 to 5
c) for (i = 0; i <= 5; i++)
d) for (i <= 5; i++)
9) Como adicionar um comentário em JavaScript? *
a) 'This is a comment
b) 
c) //This is a comment
10) Como inserir um comentário com várias linhas? *
a) /*This comment has more than one line*/
b) 
c) //This comment has more than one line//
11) Qual a forma correta de declarar um array em JavaScript? *
a) var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")
b) var colors = (1:"red", 2:"green", 3:"blue")
c) var colors = "red", "green", "blue"
d) var colors = ["red", "green", "blue"]
12) JavaScript é a mesma coisa de Java. *
a) True
b) False
13) Como declarar uma variável em JavaScript? *
a) v carName;
b) var carName;
c) variable carName;
14) Qual o operador utilizado para atribuir um valor para uma
variável? *
a) x
b) =
c) *
d) -
15) Qual será o retorno do código: Boolean(10 > 9) *
a) true
b) NaN
c) false
16) O JavaScript é case-sensitive? *
a) Yes
b) No
Dia 27 - Missão: Abrindo qualquer site
Objetivo:
● Criando funções personalizadas com parâmetros
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao27.html e já digite:

Missão
A resolução do nosso problema será muito parecido com o da missão 25,
porém na missão 25 se quiséssemos abrir 10 sites diferentes teríamos que
criar 10 funções diferentes, aqui vamos ter apenas uma função, porém essa
função receberá um parâmetro. Digite:

function AbrirSite(nomeSite , enderecoSite)

{
alert("O site " + nomeSite + " será aberto");
window.open(enderecoSite);
}

Salve, abra no Google Chrome, abra o console, digite o nome da função junto
com os parâmetros:

AbrirSite("UOL","https://uol.com.br");
AbrirSite("TERRA","https://terra.com.br");
Quando você chama a função desse jeito
AbrirSite("TERRA","https://terra.com.br"); o valor "TERRA" será passado
para a variável nomeSite e o valor "https://terra.com.br" será passado para a
variável enderecoSite. Utilizando parâmetros nossas funções ficam muito
mais dinâmicas e úteis.
Dia 28 - Missão: Acréscimo e desconto
Objetivo:
● Criando funções personalizadas com parâmetros
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao28.html e já digite:

Missão
Vamos criar uma função que receba 3 parâmetros: o valor total, uma
porcentagem e a operação. Se a operação for acréscimo a porcentagem deve
ser acrescida ao valor total, se a operação for desconto a porcentagem deve
ser descontada do valor total. Digite:

console.log("Total a pagar: R$" +

total_pagar.toFixed(2));
}
</script>
Salve, abra no Google Chrome, abra o console, digite o nome da função junto
com os parâmetros:

operacao(1000 , 15 ,
"acrescimo");
operacao(200 , 7 , "desconto");
Dia 29 - Missão: Classificação de filmes
Objetivo:
● Criando funções personalizadas com parâmetros
Descrição:
Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de
Missao29.html e já digite:

Missão
Vamos criar um sistema de classificação de filmes onde mostramos o filme e
o usuário da uma nota de 1 à 5. Depois exibimos o filme e sua classificação,
mostrando a classificação com estrelas(asteriscos). Vamos precisar de dois
arrays, um para armazenar os filmes e o outro para armazenar as
classificações. Digite:

var classificacao = [];

var filmes = ["Conan" , "Harry Potter" , "Matrix" ,
"Crepusculo"];

Agora vamos criar a função Classificacao, essa função será composta por um
laço que mostra filme à filme e pede a nota e armazena essa nota no array
classificacao. Digite:

function Classificacao(){
alert("Informe uma classificacao de 1 a 5 estrelas pra cada filme");
for(contador = 0 ; contador < filmes.length ; contador++){
classificacao[contador] = prompt("Informe a quantidade de estrelas pro
filmes " + filmes[contador]);
}
}

Para finalizar vamos criar a função ExibeFilmes. Nessa função temos dois
laços de repetição, um para exibir os filmes, e dentro do laço dos filmes
temos um para exibir os asteríscos, ou seja, para cada filme será montada
uma string com as estrelas(asteriscos) equivalentes à nota informada pelo
usuário. Digite:

Veja o código inteiro:

Salve, abra no Google Chrome, abra o console, digite o nome da função,

preencha os dados, e execute a segunda função:

Classificacao();
ExibirClassificacoes();
Dia 30 - Missão: CONCLUÍDA COM SUCESSO
Parabéns!!!
Se você chegou até aqui foi por sua dedicação. Acredito que hoje saiba mais
de JavaScript do que à 30 dias atrás.
A ideia dessa atividade nunca foi só JavaScript, por trás disso teve resiliência,
disposição, perseverança, dedicação, entre outras coisas.
Abra os links abaixo e compreenda o significado desses 30 dias de código (
que na verdade são 100):

● 100 dias de código

● Aprenda a programar com desafio 100 dias de Código
● O que eu aprendi escrevendo código por 100 dias

Depois de 30 dias é hora de descansar um pouco, tire alguns dias de folga, se

recompense (compre um chocolate pra você) agradeça as pessoas que te
ajudaram e avise que elas te ajudaram a ser um profissional melhor.
Depois dessa pausa inicie um novo ciclo, pegue um outro assunto e se
proponha a estudar 30 dias, criando exemplos e atividades referentes à esse
assunto. Vá documentando sua evolução, de preferência de forma visível e
física, como com uma agenda, adesivos ou post-it espalhados pelo seu
ambiente de estudo.
Caso queira se aprofundar mais em JavaScript segue uma lista de sites com
conteúdo gratuito e de qualidade:
● https://www.freecodecamp.org
● https://www.codecademy.com
● https://rocketseat.com.br/curso-javascript-basico-do-zero
● Desvendando a linguagem JavaScript
● Curso de JavaScript (Universidade XTI)

JavaScript Quiz - Respostas

1 - B , 2 - C, 3 - D, 4 - A, 5 - C, 6 - B, 7 - C, 8 - C , 9 - C, 10 - A, 11 - D, 12 - B, 13 - B, 14 - B, 15 - A,
16 - A