Urgente! Falta de conteúdo!

Tive exatamente a mesma avaliação que você, até fiquei preocupado, se era só eu que não estava ligando os pontos.

Comecei o curso hoje e estou com o mesmo sentimento. Vou recorrer aos videos do youtube para aprender o básico antes de fazer os exercícios.

Fazendo uma analogia, é a mesma sensação de se começar um curso de Inglês que deveria ser do zero, o professor ensinar a contar até dez e logo depois sumir no meio da aula e você receber uma prova para transcrever e interpretar um texto do Inglês para o Português. Daí você tem que sair e procurar aprender fora do curso pra depois voltar e prosseguir.

Boa noite, pessoal!

Permita-me apresentar, meu nome é Nádia Oliveira, Líder Técnica da equipe de Suporte Educacional aqui na Alura, responsável por acompanhar de perto as dúvidas e sugestões que surgem no fórum. Agradeço a vocês pelos feedbacks. Já repassei para a equipe responsável pelos conteúdos, e vamos melhorar.

Enquanto isso, estou aqui para ajudar vocês. Então, nas próximas mensagens, vou explicar a base: começando pelo que é lógica de programação, para que serve, como usar no dia a dia, e por que isso é importante. Com essa base, seguimos para as ferramentas, depois variáveis e condicionais. Por fim, vamos resolver juntos os exercícios da atividade. Pode ficar um pouco extenso, mas acompanhem comigo.

O que é lógica de programação?

Quando falamos em lógica de programação, estamos nos referindo à capacidade de organizar e estruturar ideias para resolver problemas usando códigos. Ou seja, antes de programar, precisamos pensar como um programa: em passos, instruções e condições.

Eu gosto de pensar no exemplo de montar um sanduíche. Como você montaria um sanduíche? Pega o pão primeiro? Coloca o queijo antes da mortadela? Usa maionese antes ou depois da alface? Se você parar para descrever os passos, perceberá que está criando um algoritmo — ou seja, uma sequência lógica de ações para alcançar um objetivo. Esse é um exemplo de lógica aplicada à resolução de uma tarefa, mesmo fora do computador. Na programação, fazemos algo muito parecido: descrevemos instruções em uma sequência lógica, para que o computador as execute.

Você deve estar se perguntando: Tá, mas para quê serve isso? Porque eu tenho que saber lógica de programação? A lógica de programação é a base do raciocínio computacional. Não importa se você vai desenvolver sites, aplicativos, sistemas para empresas, jogos ou até automações com inteligência artificial: tudo começa com a lógica. Ela te ajuda a pensar de forma estruturada. Quando você aprende lógica, você está desenvolvendo uma habilidade que será usada em diferentes áreas, desde desenvolvimento de sites e aplicativos ou automação de tarefas.

Mais do que escrever código, quem trabalha com tecnologia precisa entender o problema, planejar a solução e transformá-la em etapas executáveis através de código. É exatamente isso que a lógica de programação treina em você. Mesmo que, no início, pareça abstrato, dominar essa base vai facilitar o aprendizado de qualquer linguagem e ferramenta no futuro.

Com essa base em mente, é bem provável que, se eu te perguntasse agora - Qual seria a lógica para calçar um sapato?, você saberia organizar isso em passos: pegar o par de sapatos e as meias, sentar, colocar um de cada vez, ajustar, amarrar. Mesmo sem usar código, você já entende como descrever uma sequência lógica. E é exatamente isso que a lógica de programação desenvolve: a capacidade de pensar em soluções estruturadas para os mais diversos tipos de problemas. Com isso em mente, vamos entender agora mais um pilar importante.

O que é uma linguagem de programação?

Computadores não entendem a nossa linguagem natural (como o português). Para conversar com eles, usamos uma linguagem de programação, que é um conjunto de regras, palavras e símbolos que nos permite escrever instruções que o computador consegue interpretar e executar. É como se fosse um novo idioma. Existem muitas linguagens, como:

• JavaScript (usada em sites e aplicações web),
• Python (muito usada em ciência de dados, IA e automações),
• Java, C#, Ruby, entre outras.

Neste curso, estamos usando o JavaScript porque:

• É uma linguagem bastante popular e utilizada no mercado e é a base de todo site que você vê na internet.
• Funciona direto no navegador.
• Permite ver o resultado de forma rápida, o que ajuda no aprendizado.

Como preparar seu computador para este curso?

Antes de mais nada, precisamos de um local onde possamos escrever nossos códigos. Embora fosse possível usar até o bloco de notas do Windows, esse tipo de editor não é ideal para programar, pois não possui recursos que facilitam a leitura e a escrita do código, como realce de sintaxe, sugestões automáticas e organização dos arquivos do projeto. Por isso, vamos utilizar o Visual Studio Code, uma das ferramentas mais utilizadas por quem programa, tanto por iniciantes quanto por profissionais. Para fazer o download e a instalação, basta seguir os passos:

1. Acesse este link oficial.

2. Clique na opção Windows.

3. O download será iniciado automaticamente.

4. Ao finalizar, você verá um arquivo com um nome parecido com VSCodeUserSetup-x64-1.99.3.exe.

5. Dê dois cliques no arquivo e vá clicando em "next" até a instalação ser concluída. Após a instalação, você pode abrir o programa buscando por "Visual Studio Code" na barra de pesquisa do Windows:

   

Como foi dito anteriormente, o JavaScript, diferente de outras linguagens, roda diretamente no navegador. Isso significa que você pode testar seus códigos usando o Google Chrome, Firefox, Edge, Opera, ou o navegador de sua preferência — sem precisar instalar nada além do VS Code.

Como baixar o projeto base da aula?

Agora que temos o Visual Studio Code instalado, o próximo passo é baixar o projeto base que será utilizado ao longo do curso. Esse projeto contém:

• Imagens que serão usadas nas aulas futuras;
• Um arquivo HTML, responsável por estruturar o site e carregar os outros arquivos;
• Um arquivo CSS, que define o estilo visual da página (cores, fontes, tamanhos, etc);
• Um arquivo JavaScript, onde vamos escrever todos os códigos e exercícios.

Neste momento, vamos focar exclusivamente no arquivo JavaScript, pois é nele que colocaremos em prática tudo o que estamos aprendendo sobre lógica de programação. Para baixar e configurar o projeto base:

1. Clique neste link direto de download.
2. Um arquivo com o nome projeto_inicial.zip será baixado para o seu computador.
3. Esse arquivo está compactado. Para usá-lo, você precisa descompactar:
   • Clique com o botão direito sobre o arquivo.
   • Escolha a opção "Extrair tudo".
   • Depois, clique em "Extrair" novamente.
4. Uma nova pasta será criada com o conteúdo descompactado. Dentro dela, você encontrará os arquivos de código e a pasta com imagens.
5. Abra essa nova pasta e copie o caminho da pasta na barra superior do Explorador de Arquivos (você vai precisar dele no próximo passo).
6. Agora, abra o Visual Studio Code.
   • Vá até o menu Arquivo > Abrir Pasta (ou File > Open Folder, se estiver em inglês).
   • Cole o caminho da pasta copiado anteriormente.
   • Clique em Selecionar Pasta.

Pronto! O projeto foi aberto no Visual Studio Code e você pode visualizar os arquivos. No GIF abaixo, você poderá visualizar esse processo completo, passo a passo:

Como abrir o projeto no navegador?

Para visualizar o resultado dos nossos códigos JavaScript, precisamos abrir o arquivo index.html no navegador, e não o arquivo .js diretamente. Isso acontece porque o navegador precisa de um ponto de entrada para carregar a página — e esse ponto é o arquivo HTML. Ele é responsável por estruturar o conteúdo da página e também por indicar ao navegador quais outros arquivos devem ser carregados, como o CSS (estilo) e o JavaScript (lógica). Ou seja: o HTML chama o JavaScript, e é por isso que é ele quem abrimos para ver os resultados. Sendo assim:

1. No Visual Studio Code, localize o arquivo index.html dentro da pasta do projeto.

2. Clique com o botão direito sobre ele.

3. Selecione a opção "Reveal in File Explorer" (ou "Revelar no Explorador de Arquivos", se o seu VS Code estiver em português).

4. Isso abrirá a pasta onde o arquivo está salvo. Agora, dê dois cliques no arquivo index.html — ele será aberto automaticamente no navegador padrão do seu computador, como mostro na imagem abaixo:

   

Importante: sempre que você fizer alterações nos arquivos dentro do Visual Studio Code, lembre-se de salvar usando o atalho Ctrl + S e recarregar a página no navegador para que as mudanças sejam aplicadas.

Até aqui, você entendeu o que é lógica de programação, o que é uma linguagem, quais ferramentas vamos usar e como abrir o projeto no navegador. Vamos seguir!

Entendendo o código JavaScript

Toda linguagem tem suas regras e com programação não é diferente. Chamamos essas regras de sintaxe. A sintaxe define como escrevemos os comandos para que o JavaScript consiga entender e executar o código. É como escrever uma frase para que alguém compreenda o que você está dizendo. Por exemplo, em, uma frase como: "comprar pão eu vou" é compreensível, mas soa estranha.

No JavaScript, a ordem, os símbolos e até a pontuação são importantes. Um pequeno erro como esquecer de fechar chaves, ou trocar uma aspa por outra pode fazer o código parar de funcionar. E está tudo certo, você vai errar algumas vezes no começo, e tudo bem.

Variáveis, alert e prompt

Variáveis são espaços na memória onde guardamos informações que queremos usar mais tarde. Podemos guardar textos, números, valores calculados ou até respostas que o usuário digita. Você pode imaginar uma variável como um baú com etiqueta: dentro dele você guarda algo, e na etiqueta você escreve um nome para lembrar o que tem lá dentro. Por exemplo, você pode ter um baú com a etiqueta nome, e dentro dele guardar o valor "Ana". Mais tarde, se precisar desse nome, basta olhar no baú nome e pegar o que está lá dentro.

A forma mais comum de criar uma variável em JavaScript é usando a palavra let, seguida do nome da variável, o sinal de igual (=) e o valor que queremos guardar. Assim:

// Guarda o nome de uma pessoa
let nome = "Ana";

// Guarda a idade
let idade = 25;

// Guarda um valor de saldo
let saldoDisponivel = 1000;

Toda variável tem:

• Um nome (como nome, idade)
• Um sinal de igual (=), que faz a atribuição
• Um valor (como "Ana" ou 25)

É através de uma variável que podemos exibir um valor na tela, fazer contas, tomar decisões ou controlar o fluxo do programa. E já que falamos em exibir algo na tela, deixa eu te apresentar uma função muito comum no JavaScript: a função alert(). Ela serve para mostrar uma mensagem na tela, em forma de uma pequena janela de aviso. É uma forma de visualizar se o código está funcionando.

Vamos testar juntos?

1. No Visual Studio Code, abra o arquivo app.js.
2. Apague qualquer linha que esteja lá.
3. Escreva o seguinte comando:

   alert("Estou aprendendo JavaScript");
   

4. Salve o arquivo (Ctrl + S).
5. Volte ao navegador onde o index.html está aberto.
6. Recarregue a página (F5 ou botão de atualizar). Se tudo deu certo, você verá uma mensagem sendo exibida na tela. Estamos evoluindo!

Agora que já sabemos guardar e exibir dados, vamos aprender a coletar informações do usuário. Para isso, usamos o comando prompt(). Ele mostra uma caixinha no navegador e espera a pessoa digitar alguma coisa. Exemplo:

// Pede o nome da pessoa e guarda na variável
let nomeUsuario = prompt("Digite seu nome");

// Pede a idade da pessoa e guarda na variável
let idadeUsuario = prompt("Digite sua idade");

Estruturas de decisão

Vamos voltar lá atrás, no exemplo do sanduíche… Antes de começar, você precisa verificar se tem pão. Se tiver pão, você faz o sanduíche. Se não tiver, você talvez opte por fazer outra coisa, como um miojo. Perceba: você está tomando uma decisão com base em uma condição. Em programação, usamos o if(se) e o else (senão) justamente para isso: verificar condições e executar diferentes ações dependendo do resultado. Vamos ver isso no código:

let temPao = prompt("Você tem pão em casa? Responda com sim ou não");

if (temPao === "sim") {
    alert("Fazer sanduíche");
} else {
    alert("Fazer miojo");
}

Nesse exemplo:

• Usamos prompt() para perguntar algo à pessoa usuária.
• A resposta é armazenada na variável temPao.
• O if verifica se a resposta foi "sim". O === é um operador de comparação. Ele serve para verificar se dois valores são iguais.
• Se for, mostramos uma mensagem. Caso contrário, mostramos outra com o else.

Esse tipo de estrutura será muito comum a partir de agora. Ela permite que seu código reaja a diferentes situações, como idade, saldo, escolha do usuário, entre outros.

Você já se sente mais preparado para encarar os exercícios? No próximo e último bloco, vamos resolvê-los juntos.

Exercício 1: Mostre um alerta com a mensagem "Boas vindas ao nosso site!"

Quando queremos exibir uma mensagem na tela, usamos a função alert().Ela mostra uma caixinha no navegador com o texto que você escolher. No Visual Studio Code, no arquivo app.js, escreva:

alert("Boas vindas ao nosso site!");

Agora, salve o arquivo e recarregue a página no navegador. Você verá a mensagem aparecendo logo ao abrir o site.

Exercício 2: Declare uma variável chamada nome e atribua a ela o valor "Lua"

Neste exercício, vamos guardar um nome em uma variável. Como vimos antes, variáveis são como baús com etiqueta, que guardam valores para usarmos depois. Para isso, usamos a palavra let, seguida do nome da variável, o sinal de igual (=) e o valor entre aspas, já que estamos lidando com um texto. No arquivo app.js, escreva:

let nome = "Lua";

Agora temos uma variável chamada nome, que guarda o texto "Lua". Não aparecerá nada no navegador neste momento porque só salvamos o texto em uma variável. Mas a título de curiosidade, caso quisesse exibir o valor dessa variável na tela por exemplo, você poderia usar alert(nome); e nesse caso, o navegador mostraria exatamente o que está guardado na variável nome. Ou seja, veríamos na tela: Lua.

Exercício 3, 4, 5, 6 e 7 Seguem a mesma lógica da resolução do exercício 01 e 02 e deixo como desafio para você tentar fazer sozinho.

Exercício 08: Use um prompt para perguntar o nome do usuário e armazená-lo na variável nome

Neste exercício, vamos usar a função prompt, que exibe uma caixinha no navegador com uma pergunta, e o que for digitado será armazenado.

let nome = prompt("Digite seu nome");

Depois disso, você pode até testar com um alert(nome); para ver o valor sendo armazenado na variável e exibido na tela.

Exercício 09 e 10 O exercício 09 segue o mesmo princípio do anterior: usar o prompt() para perguntar algo, dessa vez a idade. Já o exercício 10 envolve tudo o que aprendemos até aqui:

• uso de variável
• entrada com prompt()
• estrutura de decisão com if

Tente unir tudo o que você viu até aqui e resolva esse exercício. Lembrando que você vai precisar comparar o valor da variável idade com o número 18. Para isso, usamos operadores de comparação.

Ufa! Sei que foi muita coisa, mas espero que tenha sido útil para te deixar mais seguro para encarar os exercícios.

Fico à disposição. Conte com meu apoio!

Grande abraço, e bons estudos!

o meu também não deu certo.

Oi Fabiano, qual parte não deu certo? Pode explicar melhor?