Curso de JavaScript e HTML: desenvolva um

jogo e pratique logica de programacao

1° Modulo (Começando a programar hoje).

Aula 5. Criando seu próprio arquivo HTML.

 Modo de identificar o código para o navegador entender a linguagem que esta sendo
passada:

Coloca o nome do arquivo e ao final coloca . e a linguagem: ex: Teste.html

 Abrir programa no chorme, programa em HTML.

Aberta Crtl+0 para abrir a pasta de arquivo e seleciona

 TAG de pular linha HTML, pular linha no editor de texto no meu caso no sublime, e ao
subir no navegador já vir com essas linhas que eu pulei.

Uso <br>

 TAG para dar destaque em texto HTML, usado para dar destaques em títulos etc.

Usa <h1> no começo do texto que deseja destacar e no final do destaque uso </h1>, a barra
indica que é final.
  TAG para deixar texto grande HTML.

Aula 6. Dando Alo ao mundo.

 TAG HTML ancora, serve para colocar link URL de acesso.

Em vermelho é o comando para iniciar e limitar o ancora link, o URL é colocado em aspas
duplas, em laranja é o texto que vai ser indicando para pessoa clicar, </a> no final serve para
indicar que vc esta encerrando o ancora.

 Exibir um POP-UP de alerta com informativo em tela em Java Script(JS).

Obs* Primeiro tem que indicar que a linguagem usada é Java Script e você faz isso colocando
<script> no começo para indicar, e no final </script> para indicar que ali finaliza comando em
JS (Javascript) . Já o pop-up é informado alert no começo para indicar que é um alerta, e o
texto do alerta tem vir dentro de aspas duplas.

 TAG em HTML para corrigir erros de acentuações.

Quando coloco esse comando dou uma mista para o navegador como ele teve interpretar as
acentuações. Coloco no começo do código.

 Verificar se tenho erros no meu código, F12 (inspecionar)  console.

Nesse exemplo cometi um erro de sintaxe na linha dez do meu código, esqueci de colocar os
parênteses no alerta

Aula 7. Resumo.

Utilizamos o editor de texto sublime. HTML é uma linguagem estática de exibir informações e
direcionar páginas, já o JavaScript(JS) é dinâmico e interativo pode colocar alertas , cálculos e
etc. É para colocar a linguagem JavaScrip no editor preciso informar a ele que os trechos serão
em JavaScript colocando o comando <script> para começar e </script> para finalizar, isso ajuda
o navegador a identificar a linguagem que está sendo passada.

Todo texto em Js vem dentro de aspas duplas.

EXERCICIO 1:

*Boas praticas para salvar arquivos. Todas abaixo estão incorretas, porém tem exemplos de
como deve ser.
EXERCICIO 2:

Todo navegador (ou Browser, em inglês) consegue ler e entender HTML que é a linguagem
utilizada para a apresentação de dados e informações.

Sobre o HTML podemos dizer:

A) Sua sigla significa Hyper Text Markup Language, ou seja, é uma linguagem de marcação
de texto caracterizada pelo uso de TAGS.

B) TAG indicam instruções especiais a serem interpretadas pelo navegador.

C) A TAG <h1> é usada para criar links para que o usuário seja levado de uma página para
outra.
D) <meta> é o exemplo de uma TAG HTML.

Resposta: Só a C é incorreta.

EXERCICIO 3:
A linguagem HTML é uma linguagem baseada em tags. Sobre tags podemos dizer:
A) Toda tag começa com < e termina com >. Por exemplo, existem as tags <h1> e <a>.
B) Dependendo da tag, ela pode ou não ter fechamento. Por exemplo, a tag <h1> precisa de
fechamento para delimitar seu conteúdo. Já a tag <meta> não. Ela define o valor de diferentes
atributos, como o que vimos mais cedo, o chamado charset.
C) O seguinte exemplo é de uma tag válida: <h1>Olá<h1>.
Sobre as afirmações acima podermos dizer que:
PRIMEIRO TESTE E ENTEDENDO O RESULTADO:

Para você avançar no treinamento com passos firmes, precisamos consolidar bem nosso
conhecimento sobre alguns processos. Sendo assim, nada mais indicado do que praticar.
Vamos criar um programa simples que talvez não faça muita coisa, mas é a base necessária
para nossa evolução.
1 - Crie o arquivo texto_puro.html em seu editor de texto favorito salvando-o dentro
da pasta logica. Depois, escreva o seguinte texto dentro deste arquivo (inclusive você pode
copiar os dois parágrafos abaixo e colá-los dentro do arquivo):

CODIGO A SER COPIADO ABAIXO.

A convenção que usaremos para criar nosso programa é adotar letras

minúsculas e não usar acentos e, claro, usar a extensão .html.

Outro ponto importante é que toda alteração feita no arquivo .html

deve ser salva e, além disso, o navegador precisa recarregar a página
para que a última alteração do arquivo entre em vigor.

2 - Agora que você tem o arquivo texto_puro.html criado dentro da pasta logica abra-o
em seu navegador. Por exemplo, se você esta usando o Chrome, vá até o menu "Arquivo ->
Abrir arquivo ..." se sua versão do Google Chrome não possui mais o menu, utilize o
atalho CTRL + O. O navegador solicitará que você escolha qual arquivo deseja abrir.
Selecione o arquivo texto_puro.html que criamos. Este procedimento será repetido
diversas vezes ao longo do treinamento, por isso, revisá-lo é importante.

Quando o arquivo for aberto, o navegador irá interpretar cada linha que você escreveu nele
exibindo o conteúdo. Contudo, veja na prática que os acentos não são exibidos corretamente e
que não houve pulo de linha entre um parágrafo e outro.

3 - Com base no que aprendeu neste capítulo, altere o arquivo para que ele exiba
corretamente a acentuação e pule uma linha. Você não precisa submeter a resposta do
exercício aqui. No entanto, se o resultado não sair conforme o esperado, não deixe de buscar
ajuda no fórum.
RESPOSTA:
EXERCICIO 4:

Exibir dois aletas em seguida:

Primeiro:

Ao dar OK abre o segundo alerta:

2° Modulo (Começando a programar hoje).

Aula 1. Recapitulando.

 Convenção de código.

1. As TAG em HTML deve ser em letras minúsculas. Ex: <h1>, <meta>, <br>, <script> e etc.
2. Em JavaScript as chamadas, por exemplo um alert que é um pop-up na tela, o alert tem
que ser escrito em letra minúscula.
3. No sublime, Crt+N (abre novo arquivo) , Crt+ESC (para salvar novo arquivo).
4. Todos os arquivos tem que ser salvo como nome_arquivo.extensão, exemplo
teste.html
5. Abrir Html no navegador: Crt+O e seleciona o arquivo
6. Para tirar erros de acentuações : Uso a seguinte TAG no começo do código (<meta
charset=”UTF-8”> sendo charset um atributo.
7. Se quero escrever código em javaScript o código precisa estar dentro da TAG <script>
no começo e final </script>
8. Pop-up de alert serve para mostrar mensagem de alerta na tela, exemplo abaixo para
exibir o alerta. Dentro do alerte tem um parâmetro, ou seja, um texto entre aspas
duplas com e dentro de parenteses e ; no final

<script>

alert (“ Mensagem de alerta”);

</script>

Aula 1. Concatenação.

 Escrever um HTML dentro de um JavaScript. *Não é usado pq eu posso usar html

fora do mundo JavaScript, uso apenas para aplicar condições ou para deixar mais
dinâmico. Ex escreve isso se isso acontecer

Pra isso eu uso o document.write(“texto desejado”) , sendo a tradução de document wite

como documento para escrever, logo eu faço isso dentro do mundo JavaScript, ou seja, como
o exemplo abaixo:

*obs: Como 18 não é um texto ele poderia ser escrito sem aspas dentro do document.write

 Escrever um HTML dentro de Java Script e pulas linha:

 Escrever um HTML dentro de Java Script e fazer operações matemáticas.

Posso fazer soma, subtração, multiplica etc

 Escrever um HTML dentro de Java Script e fazer concatenação de números.

Ou seja quando está dentro de aspas significa que não um numero e é subentendido que é
junção.
Aula 2 . Operações com números e textos.

*obs: Nos exemplos abaixo estou usando a linguagem Javascript com a função textos que
também serve para realizar operações matemáticas. Além disso em HTML não consigo fazer
operações.

 Operações matemáticas com número.

a) Primeira opção

b) Segunda opção

 Operação de média.
a) Primeira opção:

b) Segunda opção, soma string com número:

 Varias operações no mesmo comando, aprendendo a pula linha dentro do ambiente

JavaScript.
a) primeira opção com concatenação.
 b) segunda opção.

 Calcular porcentagem:

Rafaela, aspirante à carreira de programadora, criou um pequeno programa para saber qual é
sua porcentagem de acertos em uma prova de 50 questões de múltipla escolha. O cálculo
matemático comporta dividir a quantidade de acertos pelo total de questões e multiplicar o
resultado final por 100.
Rafaela acertou 15 questões e quer saber o percentual de acertos. Seu código é:
<meta charset="UTF-8">
<script>
document.write("Eu acertei: " + 15/50*100 + "%" );
</script>

 Exercício de concatenação.

Temos o seguinte código:

<meta charset="UTF-8">
<script>
document.write("A" + "B" + 20 + 10 + "C" + (5 + 10) + "D");
</script>

A resposta do código é:

AB2010C15D

3° Torne seu programa dinâmico com variável.

Aula 1. Reduzindo alterações.

 Declarando uma variável, nesse exemplo usamos essa variável para diminuir as
alterações.
a) Declarando uma variável ano, e usando uma forma de pular linha.
 b) Declarando uma variável ano, e usando outra forma de pular linha.

c) Declarando uma varia e logo em seguida alterando o valor da variável.

Nesse exemplo ao alterar a variável a informação anterior so será valida acima da
segunda variável.

Aula 2. Variável.

 Declarando uma variável dentro de outra.

Nesse exemplo eu as variáveis que são as pessoas, e a variável para fazer a operação
matemática média. Estou usando a função math.round para arredondar.
Exercício 1: Álcool ou gasolina.

Agora temos um grande desafio!

Você agora é uma pessoa desenvolvedora e gostaria de aplicar seus conhecimentos em

programação para resolver problemas do cotidiano.

O primeiro problema que surge é sobre o consumo de combustível de seu carro, vamos olhar
com mais atenção os detalhes? Portanto, confira as informações abaixo:

Seu carro tem um tanque de 40 litros e pode utilizar álcool ou gasolina.

Com gasolina e usando todo o tanque você percorre um caminho com gasolina
de 480 quilômetros. Qual é o consumo de gasolina`?
Com álcool, um tanque de 40 litros fez um caminho com Álcool de 300 quilômetros. Qual é
o consumo de Álcool?

Certo! Agora que entendemos o problema, precisamos materializar sua solução em código.
Confira:

Primeiro temos a estrutura mínima para que o programa rode. Vamos aproveitar e já colocar o
título do programa no mundo HTML:

<meta charset="UTF-8">

<h3>Álcool ou Gasolina?</h3>

<script>
...
</script>

Agora, organize as contas com variáveis legíveis.Você pode usar o exemplo abaixo:

caminhoComGasolina
consumoDeGasolina
caminhoComAlcool
consumoDeAlcool
Para o cálculo do consumo, divida a distância percorrida pela quantidade de litros gastos.
Imprima o valor utilizando document.write.

Após analisar essas informações, qual das alternativas corresponde ao comportamento

esperado do programa?

Resposta:
<meta charset="UTF-8">

<h3>Álcool ou Gasolina?</h3>

<script>

var tanque = 40;

var caminhoComGasolina = 480;

var consumoDeGasolina = caminhoComGasolina/tanque;

var caminhoComAlcool = 300;

var consumoDeAlcool = caminhoComAlcool/tanque;

document.write("O consumo de Gasolina é " + consumoDeGasolina + "

km/L");

document.write("<br>");

document.write("O consumo de Álcool é " + consumoDeAlcool + " km/L");

</script>

3° Crie suas próprias funcionalidades.

Aula 1. Melhorando a manutenção do código.

 Criando uma variável para facilitar o entendimento e leitura do código.

Nesse exemplo eu crio uma variável que tem como função pular linha, como <br> é
abstrato criar uma variável ajuda.

Aula 2. Funções.

Para criar uma função a regra é escrever function NOME DA FUNÇÂO(){

document.write(“o que deseja”);

}

Ou seja o comando vai dentro das chaves. Uso função pra deixar legível o código

 Criar uma função e dentro dela passar um comando:

No exemplo a função por objetivo pular Linha

 Colocar mais de uma instrução dentro de uma função

No exemplo coloquei duas instruções de pular linha. Mas nesse caso poderia colocar uma
intrução document.write(“<br><br>”);

Aula 5. Funções com parâmetros.

 Nesse exemplo vou declara uma função com parâmetro, vou criar uma função que
troca document.write por mostra. E dentro desse exemplo uso uma função dentro da
outra já declarada anteriormente.
 Exercício 1:

A pegadinha que deu errado

Rafaela, estudante de programação, quis fazer uma brincadeira com sua amiga Bruna. Ela criou
um programa que, ao ser aberto, exibe 9 alertas. Isso fará com que sua amiga clique 1 vez em
cada um deles e fique entediada(9 vezes ao todo). Cada alerta é uma mensagem brincando
com ela. Contudo, para fazer bonito, ela colocou as 9 instruções dentro de uma função que
chamou fazPegadinha:
<meta charset="UTF-8">
<script>
function fazPegadinha() {
alert("Olá");
alert("amiga!");
alert("Tá");
alert("bastante");
alert("entediada?");
alert("Em ficar");
alert("Clicando em");
alert("Ok");
alert("né?");h1
}
</script>

Rafaela, ansiosa para ver a reação de sua amiga Bruna, ao ver o programa aberto ficou
surpresa. Pois, nenhum dos nove alertas foi exibido na tela.

Por que a armadilha de Rafaela não funcionou e como você consertaria o código dela para que
os 9 alertas fossem exibidos?

Assinale a alternativa que corresponde ao programa que apresenta o comportamento

esperado.

RESPOSTA:

<meta charset="UTF-8">
<script>
 function fazPegadinha() {
alert("Olá");
alert("amiga!");
alert("Tá");
alert("bastante");
alert("entediada?");
alert("Em ficar");
alert("Clicando em");
alert("Ok");
alert("né?");
}

fazPegadinha();

</script>

Obs* Para que a função seja executada precisamos chamá-la! Logo após a declaração da
função, usamos seu nome fazPegadinha seguido de ()

Exercício 2:

Tuane tem o hábito de colocar sempre três asteriscos antes e depois das mensagens de
alerta. Vejamos um exemplo de seu código:
<meta charset="UTF-8">
<script>
var idade1 = 10;
var idade2 = 20;
var idade3 = 30;
var totalIdades = idade1 + idade2 + idade3;
var mediaIdades = totalIdades/3;
alert("***Total de idades é " + totalIdades + "***");
alert("***A média das idades é " + mediaIdades + "***");
</script>

Qual das opções abaixo cria corretamente a função exibeAlerta, que recebe como
parâmetro o texto que queremos exibir no alerta, e que realiza a concatenação com os
três asteriscos?

RESPOSTA:

<meta charset="UTF-8">
<script>
function exibeAlerta(mensagem) {
alert("***" + mensagem + "***");
}

var idade1 = 10;

var idade2 = 20;
var idade3 = 30;
 var totalIdades = idade1 + idade2 + idade3;
var mediaIdades = totalIdades/3;

exibeAlerta("Total de idades é " + totalIdades);

exibeAlerta("A média das idades é " + mediaIdades);
</script>

Obs*: Na função exibeAlerta estamos recebendo como parâmetro mensagem e dentro

da função estamos passando esse parâmetro para passar o alert.

EXERCICIO 3.

Ricardo mostrou seu programa para Pedro. Assim que Pedro abriu o programa ele viu o
seguinte resultado na tela:
**************************************************
BEM-VINDO AO MEU PROGRAMA
**************************************************
ELE REALMENTE FUNCIONA
**************************************************
EU USEI FUNÇÃO PARA FAZER ISSO

O problema é que Ricardo não quis mostrar para Pedro como o programa foi feito, mas ele
deu uma pista quando exibiu a informação na tela: ele usou uma função para escrever
cada linha.

Qual das opções abaixo possui um código que ao ser executado, possui a mesma saída que
Pedro viu no programa de Ricardo?

RESPOSTA:

<meta charset="UTF-8">
<script>

function pulaLinha() {

document.write("<br>");
}

function mostra(frase) {

document.write("**************************************************");
pulaLinha();
document.write(frase);
pulaLinha();
}

mostra("BEM-VINDO AO MEU PROGRAMA");

mostra("ELE REALMENTE FUNCIONA");
mostra("EU USEI FUNÇÃO PARA FAZER ISSO");

</script>
 OBS* Veja que a função mostra teve que chamar a função pulaLinha duas vezes. Uma vez
após imprimir a linha com os asteriscos e outra logo após imprimir a frase passada para a
função.

EXERCICIO 4:

O problema das gerações

Em média, um casal tem filhos quando atinge a idade de 28 anos. Seguindo essa média, se os

portugueses chegaram em 1500 no Brasil, então, a primeira geração de brasileiros surgiu em

1528, a segunda em 1556 e assim por diante. Desde 1500 até o ano atual, quantas gerações se

passaram?

Vamos criar um programa para resolver a tarefa!

Imprima esse número da seguinte maneira: calcule quantos anos passaram desde 1500 e

divida o resultado pela média de 28 anos.

Não esqueça de usar o pulaLinha() e o mostra().

RESPOSTA:
<meta charset="UTF-8">

<script>
function pulaLinha() {
document.write("<br>");
}

function mostra(frase) {
document.write(frase);
pulaLinha();
}
var idadeMediaQuandoTemFilhos = 28;
var anoAtual = 2016;
var quantidadeDeGeracoes = (anoAtual - 1500) /
idadeMediaQuandoTemFilhos;
mostra(quantidadeDeGeracoes);
</script>

5° Pratique resolvendo problemas do seu dia a dia.

Aula 1. Calculando imc.

 Calculando IMC usando função.

Nesse exemplo temos a função de pular linha, função de mostrar frase+pularlinha, função
de calcular IMC com variável e a função de mostrar.

EXERCICIO 1:

Helena teve a ideia de criar a função somaDoisNumeros. Esta função precisa receber dois
parâmetros e imprimir como resultado a soma desses dois números.

Qual das opções declara e chama corretamente esta função?

<meta charset="UTF-8">

<script>

function pulaLinha() {
document.write("<br>");
}

function mostra(frase) {
document.write(frase);
pulaLinha();
}

function somaDoisNumeros(numero1, numero2) {

mostra("A soma dos dois números é : " + (numero1 + numero2) );
}

somaDoisNumeros(10, 40);
</script>
Aula 2. Retorno de funções.

 Soma de dois IMC´s

 Calcular dois IMC´s usando RETURN

1° forma.

2° forma de igual resultado, está circulado em vermelho o que tem de diferente.

 Imc´s usando a função retorn, e mostrando como resultado a soma de dois imcs.

1° primeira forma

2° forma dando o mesmo resultado, a diferença está circulada.

Aula 3. Interagindo com o usuário.

Nessa aula vamos usar o prompt para abrir na tela uma janela para colher informação.

 Calcular IMC pedindo peso e altura para o usuário usando prompt.

 Calcular IMC pedindo para o usuário NOME, PESO e ALTURA e passando informação
personalizada.
 EXERCICIO 1:

Temos as seguintes afirmativas sobre a função prompt.

A) Ela é uma função que recebe parâmetro e não possui retorno.

B) Ela é uma função que não recebe parâmetro e possui retorno.

C) Ela é uma função que nem recebe parâmetro e nem possui retorno.

D) Ela é uma função que recebe parâmetro e possui retorno.

Qual das afirmações acima é verdadeira?

EXERCICIO 2:

Se quisermos exibir um pop-up, que mostre uma pergunta e permita ao usuário entrar com
um valor, fazemos uso da função prompt.
Usando a função prompt, qual das opções abaixo lê dois números, do teclado, e exibe a
multiplicação de um por outro para o usuário?

RESPOSTA:

<meta charset="UTF-8">

<script>
function pulaLinha() {

document.write("<br>");
}

function mostra(frase) {
document.write(frase);
pulaLinha();
}

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

var numero2 = prompt("Digite o segundo número");

mostra("O valor de " + numero1 + " vezes " + numero2 + " é: " +
(numero1 * numero2));

</script>

6° Executes códigos diferentes dependendo.

Aula 1. Convertendo textos em número.

Quando usando o prompt para coletar informações do usuário mesmo sendo informado
numero ele retorna a informação do tipo texto, e para converter esse texto para numero
preciso fazer uma operação matemática de multiplicação ou divisão para se tornar em
número.

 Exemplo de pontuação de futebol, eu multipliquei o empate por 1 para se tornar em

um numero o empate informado.
 Usar o paseInt para já coloetar no prompt e converter para numero, o mesmo
exemplo acima.
Aula 2. Trabalhando com condições.

 Comparando total de pontos do campeonato, sendo que ano passado meu time
obteve 28 pontos. A regra é pontos vitorias * 3, e pontos de empates * 1. Sendo o
total de pontos a soma vitorias *3 + empates*1. No ultimo if eu poderia substituir
por else sem falar dos pontos, colocaria assim else{ mostre(“...”) }
 Melhorando o calculo do IMC usando condição:
Aula 3. Jogo de advinha.

 Montar jogo de advinha de 0 a 10, usando math.random( ) * 10, por que quero gerar
um número aleatório de 0 há 10. E para arredondar uso math.round, logo uma função
dentro da outro.
7° Repita tarefas.
Aula 1. Repetir enquanto.

Vamos aprender a instrução de repetição while

 Nesta aula, aprenderemos a criar um programa que exiba todos os anos em que houve
copas do mundo de futebol, desde 1930, data do primeiro campeonato.Usando
repetição while
EXERICIO 1:

Roberta quer uma dificuldade um pouco maior em seu programa. Agora ela precisa imprimir
todos os números entre 30 e 40 (inclusive 30 e 40), porém os números 33 e 37 não devem ser
impressos! No final, o trecho de código precisa ter a palavra "FIM". Use o while para essa
tarefa.

Com base nisso, qual é a alternativa com a escrita de código correta?

DICA: o if pode ajudar a Roberta!

Resposta:
O código de Roberta é:
<meta charset="UTF-8">
<script>
function pulaLinha() {
document.write("<br>");
}

function mostra(frase) {
document.write(frase);
pulaLinha();
}

var contador = 30;

while(contador <= 40) {

if( contador == 33 ) {
contador = contador + 1;
 }
else if(contador == 37) {
contador = contador + 1;
}
else {
mostra(contador);
contador = contador + 1;
}
}

mostra("FIM");

</script>

EXERCICIO 2:

Agora é sua vez. Roberta lançou o desafio para você imprimir em ordem decrescente todos os
números entre 20 e 0, incluindo os limites! No final, escreva a palavra "FIM".
DICA: você pode decrementar uma variável!

Selecione a alternativa que corresponde ao programa com o comportamento esperado:

<meta charset="UTF-8">
<script>
function pulaLinha() {
document.write("<br>");
}

function mostra(frase) {
document.write(frase);
pulaLinha();
}

var contador = 20;

while( contador >= 0) {

mostra(contador);
contador = contador - 1;
}

mostra("FIM");
</script>

EXERCICIO 3:

É comum programas terem uma tela de login, isto é, a tela que identifica o usuário no sistema.
Para que o acesso seja permitido, o nome de usuário e senha devem ser iguais aos valores
armazenados pela aplicação, independente do local onde as informações foram guardadas.
Também não é raro a prática de permitir no máximo três tentativas e a partir da terceira o
sistema recusar-se a identificar o usuário e notifica ao administrador do sistema ou até mesmo
ao dono da conta.
Segue o código que efetua o login, mas ATENÇÃO, ele só dá uma tentativa para o usuário:

<meta charset="UTF-8">
<script>

var loginCadastrado = "alura";

var senhaCadastrada = "alura321";

var loginInformado = prompt("Informe seu login");

var senhaInformada = prompt("Informe sua senha");

if( loginCadastrado == loginInformado && senhaCadastrada ==

senhaInformada ) {

alert("Bem-vindo ao sistema " + loginInformado);

} else {

alert("Login inválido. Tente novamente");

}
</script>

Altere o código anterior para que o usuário tenha 3 tentativas para realizar o login.

Atenção: Se ele acerta na primeira tentativa, não faz sentido continuar a perguntar seu login e
senha.

RESPOSTA:

<meta charset="UTF-8">

<script>

var loginCadastrado = "alura";

var senhaCadastrada = "alura321";

var maximoTentativas = 3;
var tentativaAtual = 1;

while(tentativaAtual <= maximoTentativas) {

var loginInformado = prompt("Informe seu login");

var senhaInformada = prompt("Informe sua senha");

if( loginCadastrado == loginInformado && senhaCadastrada ==

senhaInformada ) {

alert("Bem-vindo ao sistema, " + loginInformado);

tentativaAtual = maximoTentativas; // acertou, então faço

o gasto de todas as tentativas para sair do loop. Lá embaixo vai
incrementar + 1!

} else {
 if (tentativaAtual == 3) {
alert("Número permitido de tentativas ultrapassado!");
} else {
alert("Login inválido. Tente novamente");
}
}

// vai para a próxima tentativa

tentativaAtual = tentativaAtual +1
}

</script>

EXERCICIO 4 : Função isNaN

Daniel teve uma ideia, primeiro, ele apresentou o seguinte trecho de código para seus amigos:
var idade = parseInt(prompt("Digite sua idade"));COPIAR CÓDIGO
Aprendemos que a função prompt() retorna o que é digitado como texto e a
função parseInt() converte um texto em número. Contudo, o que acontece se no lugar da
idade for digitado um nome? O valor idade será NaN (not a number). Isso faz todo sentido,
pois a função parseInt não é capaz de converter um texto como "Calopsita" para um
número.
A ideia de Daniel é que enquanto o usuário não digitar um número, deve ser mostrado um
aviso pedindo para que a idade seja digitada. Aprendemos que while é uma maneira de
repetir instruções, em nosso caso, queremos repetir a leitura do teclado. Assim, Daniel
escreveu o seguinte código:
var idade = parseInt(prompt("Digite sua idade"));

while( idade == NaN ) {

idade = parseInt(prompt("Digite sua idade"));
}

alert(idade);COPIAR CÓDIGO
Agora, quando o usuário digitar "Calopsita" idade será NaN. Portanto, a condição de repetição
do while será a idade ser NaN. Perfeito! Mas estranhamente essa solução não funcionará!
Daniel verificou que se ele digitar qualquer coisa, seja um texto como "Calopsita" ou um
número", o laço do while nunca é executado. Ele esta quase solucionando o problema, mas
tem um detalhe, não podemos comparar nenhum valor, como NaN, usando ==. Se você abrir
seu console agora e escrever NaN == NaN isso será falso! Esse resultado bizarro é uma
característica da linguagem.
Para saber se um valor é NaN precisamos usar uma função específica, a isNaN. Essa função
recebe um parâmetro e retorna true ou false caso o valor seja NaN ou não.
Sabendo que a função isNaN recebe um parâmetro e retorna true caso o parâmetro
passado seja NaN, qual das opções abaixo altera corretamente o código de Daniel para usar a
função isNaN?
RESPOSTA:

var idade = parseInt(prompt("Digite sua idade"));

while( isNaN(idade) ) {
idade = parseInt(prompt("Digite sua idade"));
}

alert(idade);
Aula 2. Outra forma de repetir.

 Tabuada 7 usando repetição while.

 Tabuada do 7 usando repetição usando for.

Lembrete for passa três parâmetros< for (variável; condição; incremento)

EXERICIO 1

Geralda e Haroldo são casados e ambos são médicos. Contudo, sempre foram interessados por
tecnologia e se matricularam na Alura para aprender lógica de programação.

Eles receberam como dever de casa, o seguinte código:

var contador = 1;
while(contador <= 10) {
 alert("Contador atual: " + contador);
contador = contador + 1;
}

Eles precisam convertê-lo de maneira a usar a instrução for.

Qual das opções abaixo realiza essa conversão corretamente?

RESPOTA:
for( var contador = 1; contador <= 10; contador = contador + 1 ) {
alert("Contador atual: " + contador);
}

SOBRE parseInt() E parseFloat()

Aprendemos a utilizar parseInt() para converter um texto em número. Certo? Contudo,

ele converte um texto para um número inteiro e nem sempre queremos abdicar dos números
decimais. Como podemos então para converter em “números reais”?
Vejamos um exemplo:
var numero = parseInt("12.13");
O valor de numero será 12. Para que as casas decimais sejam mantidas, usamos o
método parseFloat():
var numero = parseFloat("12.13");
O valor de numero será 12.13.

Não é necessário usar o parseFloat() quando lemos os dados de peso e altura no cálculo
do IMC, pois são como operações de divisão e multiplicação. O JavaScript já realiza a
conversão implícita para nós. Contudo, é uma boa prática
usar parseInt() ou parseFloat() se queremos ler números inteiros ou decimais
fornecido pela função prompt. Nem sempre a conversão implícita vai dar certo, como é o caso
do número de vitórias e empates.

8° Interaja com o usuário.

Aula 1. Campo de texto e botão.

No mundo HTML posso usar a TAG para adicionar um campo para receber mensagem e isso
se torna possível com a TAG <input/> , já para adicionar botão uso a TAG
(<buton>mensagem</buton>).
E para acessar essas TAGS criadas no mundo HTML e colocar para Java Script crio uma
variável para chamar essa TAG , ex

 Jogo de advinha de 0 á 10 usando as TAGS <input/> para abrir um campo para inserir
informação e a TAG <button>mensagem</button>
EXERCICO 1

Ao longo do treinamento aprendemos a capturar a entrada do usuário através da

função prompt(). Não há nada de errado nisso para quem esta aprendendo lógica de
programação, mas nem por isso vamos deixar de aprender algo um pouco mais sofisticado e
melhor para o usuário, não é mesmo?

A linguagem HTML possui tags para capturar a entrada do usuário, inclusive aquelas que
representam botões.

Vejamos um exemplo:

<meta charset="UTF-8">

<input/>
<button>Clique-me</button>

<script>

</script>

Quando o código é carregado, é exibido para o usuário um campo de entrada (input)

retangular para que ele insira dados e um botão (button). Contudo, o HTML é uma linguagem
estática, tanto o input quanto o button são exibidos e nada acontece. A boa notícia é que o
mundo JavaScript pode acessar as tags do mundo HTML . Isso significa que somos capazes de
capturar o que o usuário digitou no input, inclusive, programar uma resposta para quando
ele clicar no button.
Qual das opções abaixo captura as TAG's input e button no mundo HTML?

RESPOSTA:

<meta charset="UTF-8">

<input />
<button>Clique-me</button>

<script>
 var entrada = document.querySelector("input");
var botao = document.querySelector("button");
</script>

Você aprendeu que através de document.write escrevemos na tela, mas o document sabe fazer
mais coisas. É através de document.querySelector que podemos ir lá no mundo HTML e trazer o
elemento para o mundo JavaScript para que possamos manipulá-lo. Mas cuidado, o correto
é querySelector com S maiúsculo. Se por acaso você escrever com 's' minúsculo cometerá um erro
de sintaxe.
Continuando... O document.querySelector recebe um parâmetro o nome da tag que desejamos
buscar do mundo HTML. Ele é mais poderoso do que você imagina e aceita receber outros tipos de
parâmetros, mas para nosso treinamento, entender que se passarmos o nome de uma tag HTML ele nos
devolverá a tag no mundo JavaScript é suficiente. Há outros jargões envolvidos nesse processo, mas não
se preocupe. Você saberá todos eles se quiser continuar seus estudos na linguagem JavaScript.

EXERCICO 1

Emanuelle estava ajudando seus colegas a se prepararem para a próxima prova de lógica de
programação. Eles pediram para que ela resolvesse a seguinte questão que era certo que cairia
na prova: "ler do mundo HTML um texto digitado pelo usuário e no clique de um botão exibir o
que foi digitado".

Ela começou pela estrutura mínima de todo o programa:

<meta charset="UTF-8">

<script>
</script>COPIAR CÓDIGO
Depois, adicionou um campo de entrada e um botão com as tag's <input/> e <button>,
respectivamente:
<meta charset="UTF-8">

<input/>
<button>Exibir texto digitado</button>

<script>
</script>

Depois, buscou do mundo JavaScript a tag <input/> lá do mundo HTML. Ela explicou que isso
era necessário, pois só assim o JavaScript seria capaz de ler o que está escrito no <input>:
<meta charset="UTF-8">

<input/>
<button>Exibir texto digitado</button>

<script>
var input = document.querySelector("input");
</script>

Na sequência ela explicou que precisa programar dentro de uma função quais instruções
devem ser executadas quando o botão for clicado. O problema é que ela criou apenas a
função, não as instruções. Sua intenção é terminá-la no final:
<meta charset="UTF-8">

<input/>
<button>Exibir texto digitado</button>

<script>
var input = document.querySelector("input");

function exibeTexto() {

}
</script>

Em seguida, com muita calma, ela disse que a função exibeTexto precisa ser chamada
pelo botão e que, primeiro, ela precisa obter lá do mundo HTML o botão e realizar a
associação:

<meta charset="UTF-8">

<input/>
<button>Exibir texto digitado</button>

<script>
var input = document.querySelector("input");

function exibeTexto() {

var button = document.querySelector("button");

button.onclick = exibeTexto;
</script>

Veja que nesta última mudança, ela associou a função ao button.onclick. Com essa
associação, toda vez que o botão for clicado ele executará o exibeTexto, é como se, por
debaixo dos panos, o navegador fizesse exibeTexto() toda vez que o botão é clicado.
Mas, quando Emanuelle começou a explicar o código da função exibeTexto sua aula
começou e ela teve que correr para dentro de sala.

E agora? Será que seus amigos conseguem terminar o código?

Qual das opções abaixo possui o código completo da função exibeTexto? Mas é preciso
que o código funcione conforme esperado, que é exibir um alerta para o usuário.

RESPOSTA:

<meta charset="UTF-8">

<input/>
<button>Exibir texto digitado</button>

<script>
var input = document.querySelector("input");

function exibeTexto() {

alert(input.value);
}

var button = document.querySelector("button");

button.onclick = exibeTexto;
</script>

Quando a função exibeTexto for chamada, ela passará como parâmetro da função alert o
valor input.value. Não podemos passar simplesmente input, porque o input corresponde a TAG
e queremos dessa TAG seu valor (value). Por isso passamos input.value.

 Jogo de advinha de 0 á 10 usando as TAGS <input/> para abrir um campo para inserir
informação e a TAG <button>mensagem</button>, **Melhorado**.
No código criado vou apagar o campo input para o usuário colocar o novo valor, esta circulado em
vermelho.

Dar foco na caixinha que o usuário passa as informações, esta circulado em laranja.

Deixar segredo gerar números aleatórios entre 0 a 10, circulado em roxo.

Quero que ao recarregar tela imput ganhe foco, circulado em amarelo.

9° Trabalhando com muitos dados.

Usando ARRAY (lista), declaro a variável usando [] aos invés de (), essa função é utilizada
quando você quer ter uma lista de opção de variável.

Aula 1. Armazenando muitos dados.

 Usando array no arquivo adivinha.

EXERCICO 1
Ao longo do curso, aprendemos a lidar com tipos diferentes como, texto, número e booleano
(ex.: 'true' ou 'false'). Exemplos desses tipos são:
var nome = "Regina"; // texto, ou tecnicamente falando, uma string
var idade = 22; // número
var temCarteira = true; // booleano

Por fim, aprendemos sobre o tipo de dado chamado array. Ele permite que uma variável
possua vários valores.

Qual das opções abaixo declara corretamente um array?

RESPOSTA:

var coisas = ["Gisele", 12, true];

EXERCICO 2

Giordano adora pizza. Acessando um sistema de pedido online ele escolheu a pizza de Atum
em uma lista com outras pizzas de diversos sabores.

Colocando um "raio X" no programa que ele acessou, é bem provável que ele fosse feito em
JavaScript e tivesse a seguinte lista:

var pizzas = ["Portuguesa", "Mussarela", "Atum", "Margherita" ];

Qual das opções abaixo acessa corretamente ao item da lista que é a pizza de Atum?

RESPOSTA:

pizzas[2]

EXERCICO 3

Temos a seguinte array:

var codigos = ["IDNOCLIP" , "IDDQD", "IDKFA"];

Aprendemos que podemos saber o tamanho do array através de:

RESPOSTA:
codigos.length

Aula 2. Manipulando Array.

 Aprender a adicionar array aleatório a lista.

EXERCICO 4

Temos a seguinte lista de frutas:

var frutas = ["abacaxi", "banana", "melão"];
Se quisermos adicionar mais um item no array de frutas, o que devemos fazer?
RESPOSTA:

frutas.push("abacate");

Todo array possui a função push que permite "empurrar" elementos para dentro da lista.

EXERCICO 5

Yan teve a ideia de criar um programa para criar receitas. Nele, há uma lista
no qual o usuário pode adicionar ingredientes. Vamos observar:
<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>
var ingredientes = [];

var quantidade = parseInt(prompt("Quantos ingredientes você vai

adicionar?"));

var contador = 1;

while( contador <= quantidade) {

var ingrediente = prompt("Informe o ingrediente " + contador);

ingredientes.push(ingrediente);

contador++;
}

console.log(ingredientes);
</script>

Ao testar o código verificamos que ele funciona! O problema é que podemos

adicionar na lista de uma receita ingredientes repetidos. Altere o código para
que os ingredientes repetidos não possam ser adicionados.

Como fica o código com as novas implementações?

RESPOSTA:
<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>
var ingredientes = [];
 var quantidade = parseInt(prompt("Quantos ingredientes você vai
adicionar?"));

var contador = 1;

while( contador <= quantidade) {

var ingrediente = prompt("Informe o ingrediente " + contador);

var existe = false;

for( var posicao = 0; posicao < ingredientes.length; posicao+

+) {

if( ingredientes[posicao] == ingrediente) {

existe = true;
break;
}
}

if( existe == false) {

ingredientes.push(ingrediente);
contador++;
}
}

console.log(ingredientes);
</script>