0% acharam este documento útil (0 voto)

2K visualizações

Comecando Com JavaScript - 30 at Guto Xavier

Enviado por

Fabiana Santo

Direitos autorais

Formatos disponíveis

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

0% acharam este documento útil (0 voto)

2K visualizações

Comecando Com JavaScript - 30 at Guto Xavier

Enviado por

Fabiana Santo

Direitos autorais

Formatos disponíveis

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

Você está na página 1/ 143

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:

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:

</script>

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:

</script>

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:

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

</script>

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:

</script>

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:

alert("Vamos aumentar");

while(contador <= 10){

console.log(contador);

contador++;
}
alert("Vamos diminuir");

while(contador2 >= 0){

console.log(contador2);

contador2--;
}
</script>

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:

</script>

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:

</script>

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:

</script>

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 é:

carros[3] = "Fit";
console.dir(carros);

</script>

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

carros.pop();

Veja como está o código completo:

carros[3] = "Fit";
carros.pop();

console.dir(carros);
</script>

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:

carros[3] = "Fit";
carros.pop();
carros.push("Agile");
carros.push("Sandero");

console.dir(carros);
</script>
Salve e abra seu arquivo no navegador para ver algo parecido com isso:

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:

</script>

Missão

Vamos criar um programa onde o usuário escolhe um animal e são exibidas algumas
informações sobre esse animal.

Vamos declarar as variáveis que vão controlar a exibição, armazenar a opção do animal a
ser exibido e o array que vai armazenar as informações dos animais. 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:

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

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");

}

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:

</script>

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:

</script>

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:

</script>

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:

</script>

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:

var idade = prompt("Informe sua idade","Digite aqui");

document.write("<br>");
document.write(idade);
</script>
E podemos incrementar um pouco mais nosso código:
Dia 23 - Missão: Refinando nosso cálculo de média
Objetivo:

● Laço de repetição(for)

Descrição:

Abra o VS Code, aperte CTRL+S e salve o arquivo com o nome de Missao23.html e já

digite:

</script>

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:

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

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

while(contador < 4){

document.write("A média de " + nome);

document.write(" é " + media.toFixed(1));
</script>

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:

</script>

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:

</script>

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:

</script>

Missão

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

function AbrirGlobo(){
alert("O site GLOBO será aberto");
window.open("https://globo.com");
}
</script>
Salve, abra no Google Chrome, abra o console, digite o nome da função ( AbrirUOL();
ou AbrirGlobo(); ) , pressione enter, preencha as informações e visualize o resultado.
Dia 26 - JavaScript Quiz
Caso queira responder online, click no link https://goo.gl/forms/ydQRFdrlcde38fK13.
As respostas se encontram na última página.

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:

</script>

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:

</script>

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:

</script>

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:

function ExibirClassificacoes(){
var numEstrelas = "";
for(contador = 0 ; contador < filmes.length ; contador++){

numEstrelas = "";

for(contadorEstrelas = 1; contadorEstrelas <= classificacao[contador] ;

contadorEstrelas++){
numEstrelas += "*";
}

console.log(filmes[contador] + " " + numEstrelas + " estrelas " );

}
}

Veja o código inteiro:

var classificacao = [];

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

function ExibirClassificacoes(){
var numEstrelas = "";
for(contador = 0 ; contador < filmes.length ; contador++){

numEstrelas = "";

for(contadorEstrelas = 1; contadorEstrelas <= classificacao[contador] ;

contadorEstrelas++){
numEstrelas += "*";
}

console.log(filmes[contador] + " " + numEstrelas + " estrelas " );

}
}

</script>
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