O que é HTML e como a Web funciona. 🌴 TRILHA HTML 🟠 Etapa 01

    Seja muito bem-vindo à Academy Code Christ!  

🌍 Academy Code Christ está disponível em vários idiomas.

Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 

e aprender no seu idioma.

📚 Continue sua jornada de aprendizado

A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  

📋 Menus correspondentes:

👉 Acesse Aqui o Menu Completo do Curso de 🟠 HTML!

👉 Acesse aqui o menu completo do Curso de 🎨 CSS!

👉Acesse aqui o menu completo do Curso de 🚀 JavaScript!

👉 Acesse aqui o menu completo do Curso de 🐍 Python!

👉 Acesse aqui o menu completo do Curso de ⚙️ C Sharp!

👉 Acesse aqui o menu completo do Curso de 🐘 PHP!

💻 Pratique o que você aprende

👉 Acesse o Code Editor Mr Digitals e comece a praticar 

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.

🚀 Etapa 03 

 O que você vai aprender nesta aula?

Quando se aprende um novo idioma, o primeiro passo é conhecer as palavras e entender como combiná-las. Com a programação é a mesma coisa. 

Nesta aula, você vai aprender as palavras e expressões básicas do JavaScript  aquelas que o computador usa para armazenar, processar e manipular informações.

Pense em cada linha de código como uma frase que o computador precisa entender para realizar uma ação, mas, para escrever essas “frases”, você primeiro precisa saber quais são os elementos fundamentais da linguagem.

🧠 O que é uma variável

Uma variável é um espaço na memória do computador reservado para armazenar valores temporários.
 Pense nela como uma caixinha com um rótulo o rótulo é o nome da variável, e dentro dela você guarda o valor que quiser.

💬 Exemplo de analogia simples:

Imagine três caixas:

●     Uma chamada nome → guarda “Maria”;

●     Uma chamada idade → guarda 25;

●     Uma chamada cidade → guarda “São Paulo”.

Em JavaScript, isso é feito assim:

var nome = "Maria";

var idade = 25;

var cidade = "São Paulo";

 

Essas informações ficam disponíveis para serem usadas, modificadas e combinadas em outras partes do programa.

🧩 Tipos de Variáveis: var, let e const

Em JavaScript, há três palavras-chave para criar variáveis:
 var, let e const.

🔹 var 

É a forma mais antiga de declarar variáveis.

 Funciona, mas hoje em dia não é a mais recomendada, pois pode causar confusão em projetos grandes (o escopo dela é amplo demais).

var cidade = "São Paulo";

 

🔹 let 

É a forma mais usada atualmente.

 Ela cria variáveis que podem mudar de valor durante o programa.

let comida = "feijão";

comida = "arroz"; // Mudou o valor

console.log(comida); // Mostra "arroz"

 

🔹 const 

É usada quando você não quer que o valor mude. 

Ou seja, a variável é “constante”.

const pais = "Brasil";

pais = "Chile"; // ERRO! Não podemos reatribuir.

 

Use let quando o valor pode mudar e const quando não deve mudar.
 Essa é uma prática moderna e profissional.

💡 Exemplo:

let nome = "Carlos";

const anoNascimento = 1990;

var cidade = "Rio de Janeiro";

 

💬 Explicação:

●     let → É usada para valores mutáveis (podem mudar depois);

●     const → É usada para valores fixos (não devem mudar);

●     var → É o modo antigo ainda funciona, mas deve ser evitado em códigos modernos, pois sua forma de escopo é menos previsível.

⚙️ Diferenças entre var, let e const

 

var  → Pode ser alterada? ✅ Sim. Escopo →  Função. Recomendado? → ⚠️ Evite (legado)  

let  → Pode ser alterada? ✅ Sim. Escopo → Bloco. Recomendado? →  ✅ Sim

const  → Pode ser alterada? ❌ Não. Escopo →  Bloco. Recomendado? →  ✅ Sim

💬 “Escopo de bloco” significa que a variável só existe dentro das chaves { } onde foi criada.

 Isso evita conflitos e torna o código mais previsível.

⚡ Nomeando variáveis corretamente

Apesar de você poder escolher o nome que quiser, existem regras e boas práticas.

✅ Regras obrigatórias

1.    O nome deve começar com uma letra, $ ou _;

2.    Não pode começar com número;

3.    Não pode conter espaços ou caracteres especiais;

4.    É sensível a maiúsculas e minúsculas (nome ≠ Nome).

💡 Exemplo correto:

let nomeUsuario = "Ana";

let idadeUsuario = 28;

let possuiCarteira = true;

 

🚫 Exemplo incorreto:

let 2nome = "Pedro";   // não pode começar com número

let meu-nome = "Lucas"; // não pode usar hífen

let var = "teste";      // palavra reservada do JS

 

Dica de estilo: use a convenção camelCase, onde a primeira palavra é minúscula e as seguintes começam com maiúscula (ex.: numeroDaConta, corFavorita).

💬 Tipos de dados no JavaScript

O JavaScript é uma linguagem com tipagem dinâmica, o que significa que o tipo de uma variável é determinado automaticamente pelo valor nela contido.

🔹 Principais tipos de dados: Exemplo e Descrição

String → "João", 'Aula 3' → Texto, sempre entre aspas simples ou duplas

Number  → 10, 3.14, -7  → Números (inteiros ou decimais)

Boolean → true, false → Verdadeiro ou falso (lógico)

Null  →  null  → Valor nulo (intencionalmente vazio)

Undefined → undefined  → Variável criada mas sem valor

Object  → {nome: 'Maria', idade: 25}  → Estrutura de dados com propriedades

Array  → [1, 2, 3], ["A", "B"] → Lista de valores

🧩 Trabalhando com Strings

Strings são usadas para textos e mensagens. Você pode usar aspas simples, duplas ou crases (para template strings).

let nome = "Carla";

let cidade = 'Recife';

let saudacao = `Olá, ${nome}, seja bem-vinda a ${cidade}!`;

Exemplo: Com "Olá Mundo"

let texto1 = "Olá";

let texto2 = 'Mundo';

let texto3 = `${texto1} ${texto2}!`; // Usando Template String

console.log(texto3);

O resultado será:

Olá Mundo! 

As Template Strings (entre crases) são muito úteis para unir textos e variáveis de forma mais elegante:

let nome = "Carlos";

let idade = 22;

console.log(`Meu nome é ${nome} e tenho ${idade} anos.`); 

💡 A diferença das crases (`) é que elas permitem interpolar variáveis dentro do texto, usando ${ }.

🔢 Trabalhando com Numbers

Em JavaScript, todos os números (inclusive decimais) pertencem ao tipo Number.

let x = 10;

let y = 2.5;

 

Você pode realizar operações matemáticas simples:

console.log(x + y); // Soma

console.log(x - y); // Subtração

console.log(x * y); // Multiplicação

console.log(x / y); // Divisão 

Resultado:

12.5

7.5

25

4

Os números podem ser inteiros, decimais ou negativos.

let idade = 30;

let altura = 1.75;

let soma = idade + 5;     // 35

let metade = altura / 2;  // 0.875

 

💬 Assim como em matemática, o JS segue a ordem das operações, respeitando parênteses e precedência.

Exemplo:

let resultado = (10 + 5) * 2; // retorna 30 

🔹 Operadores Matemáticos: Exemplo e resultado

+  →   5 + 2   =   7

-    →   10 - 3  =   7

*   →    4 * 2   =   8

/    →      9 / 3     =  3

%   →    10 % 3   1 (resto da divisão)

**  →     2 ** 3    8 (potência)

Exemplo prático:

let resultado = (10 + 2) * 3;

console.log(resultado); // 36

✅ Trabalhando com Booleanos

O tipo boolean serve para representar valores lógicos: 

true → verdadeiro

false → falso

let possuiCarteira = true;

let maiorDeIdade = false;

Exemplo:

let chovendo = true;

let frio = false; 

if (chovendo) {

  console.log("Leve um guarda-chuva!");

} 

if (!frio) {

  console.log("Não precisa de casaco hoje!");

}

 

O símbolo ! nega a condição, ou seja, transforma true em false e vice-versa. Mais tarde, você usará esses valores nos condicionais (if, else) para tomar decisões no código.

 

🔹Operadores de Comparação

Esses operadores comparam valores e retornam true (verdadeiro) ou false (falso): Exemplo e significado.

==     →     5 == '5'  →  Igual (sem verificar tipo)

===     →      5 === '5' →  Igual e do mesmo tipo

!=     →      5 != 3   →   Diferente

>     →         10 > 5   →  Maior que

<      →        10 < 5   →  Menor que

>=    →       10 >= 10   →  Maior ou igual

<=     →      4 <= 5  →  Menor ou igual

Exemplo:

let nota = 7;

console.log(nota >= 6); // true 

Significa que o aluno foi aprovado.

 A Estrutura IF (Se)

O comando if significa literalmente “se”.

 Ele é seguido por uma condição: se ela for verdadeira (true), o bloco de código dentro dele é executado.

let nota = 8; 

if (nota >= 6) {

  console.log("Aprovado!");

} 

O programa lê:

“Se a variável nota for maior ou igual a 6, então mostre ‘Aprovado!’.”

Se nota fosse 5, nada aconteceria, porque a condição não seria satisfeita.

 O ELSE (Senão)

E se a condição for falsa?

 Usamos o else, que executa um outro bloco quando o if não for verdadeiro.

let nota = 5; 

if (nota >= 6) {

  console.log("Aprovado!");

} else {

  console.log("Reprovado!");

} 

Saída:

Reprovado!

 

💡 Dica: use else sempre que precisar oferecer um “plano B” para o código.

 Combinação de Condições com ELSE IF

Às vezes, há mais de duas possibilidades.

 Imagine um sistema de notas com três resultados:

●  Nota ≥ 6 → Aprovado

●  Nota entre 4 e 5.9 → Recuperação

● Nota < 4 → Reprovado

Podemos tratar isso usando else e if:

let nota = 5; 

if (nota >= 6) {

  console.log("Aprovado");

} else if (nota >= 4) {

  console.log("Recuperação");

} else {

  console.log("Reprovado");

} 

A lógica é lida de cima para baixo  o programa executa apenas o primeiro bloco cuja condição for verdadeira.

🧩 Null e Undefined

Ambos indicam ausência de valor, mas de maneiras diferentes.

let carro; // undefined: variável criada mas sem valor

let moto = null; // null: intencionalmente vazio

 

💬 Diferença prática:

●     undefined → O JS ainda não sabe o valor.

●     null → O programador quis esvaziar o valor.

🧱 Objetos e Arrays (visão inicial)

Você verá esses temas em profundidade nas aulas 12 e 13, mas adiantando:

Objeto:

let pessoa = {

  nome: "Lucas",

  idade: 25,

  cidade: "Curitiba"

};

 

Acesso:

console.log(pessoa.nome);

 

Array (lista):

let frutas = ["Maçã", "Banana", "Uva"];

console.log(frutas[1]); // imprime Banana

 

✍️ Comentários em JavaScript

Comentários servem para explicar o código ou desativar temporariamente trechos de código sem apagá-los.

🔹 Comentário de linha única:

// Este é um comentário de uma linha

let nome = "João"; // Comentário ao lado de um código

 

🔹 Comentário de múltiplas linhas:

/*

  Este é um comentário de várias linhas

  Ideal para documentar trechos longos de código

*/

 

💬 Boas práticas:

●     Sempre documente códigos mais complexos;

●     Explique o motivo do código existir, não apenas o que ele faz;

●     Use comentários para separar seções ou marcar melhorias futuras.

🧮 Exemplo completo

// Declaração de variáveis

let nome = "Fernanda";

const anoNascimento = 1996;

let idade = 2024 - anoNascimento; // cálculo automático

let ativo = true;

 

// Exibindo informações no console

console.log("Usuário: " + nome);

console.log("Idade: " + idade);

console.log("Ativo? " + ativo);

 

// Usando template string

console.log(`A usuária ${nome} tem ${idade} anos e status ativo: ${ativo}`);

 

Resultado no console:

Usuário: Fernanda

Idade: 28

Ativo? true

A usuária Fernanda tem 28 anos e status ativo: true

 

💻 Exercício Prático

Crie um arquivo chamado variaveis.html e adicione o seguinte conteúdo:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Variáveis e Tipos de Dados</title>

</head>

<body>

  <h1>Praticando Variáveis em JavaScript</h1>

  <p>Abra o console (F12) para ver os resultados!</p>

 

  <script>

    // Declaração de variáveis

    let nome = "Marcos";

    let idade = 34;

    let cidade = "Florianópolis";

    const pais = "Brasil";

    let estudante = false;

 

    // Exibindo no console

    console.log("Nome: " + nome);

    console.log("Idade: " + idade);

    console.log("Cidade: " + cidade);

    console.log("País: " + pais);

    console.log("É estudante? " + estudante);

  </script>

</body>

</html>

 

Abra em seu navegador e observe o resultado no console do desenvolvedor.

🧩 Desafio Final da Aula

Crie um script que:

1.    Peça ao usuário seu nome e idade (prompt());

2.    Calcule o ano de nascimento com base no ano atual;

3.    Mostre uma mensagem na tela dizendo:

 “Olá, [nome]! Você nasceu em [ano].”

💡 Dica de solução:

let nome = prompt("Qual é o seu nome?");

let idade = prompt("Quantos anos você tem?");

let anoNascimento = 2024 - idade;

 

alert(`Olá, ${nome}! Você nasceu em ${anoNascimento}.`);

🎓 Conclusão

Agora você entende como o JavaScript guarda e manipula informações,
 sabe criar, alterar e exibir dados de diversas formas e domina a estrutura básica de um script interativo.

Esses conceitos são as ferramentas fundamentais para todas as próximas aulas.
 A partir da próxima lição, você aprenderá a usar operadores e cálculos, tornando seus scripts inteligentes e funcionais.

📚 Continue aprendendo JavaScript:

🚀 Etapa 01 👉 O que é JavaScript e como funciona no navegador

🚀 Etapa 02 👉 Como inserir JavaScript no HTML

🚀 Etapa 03 👉 Você está nessa Etapa

🚀 Etapa 04 👉 Operadores Aritméticos, Relacionais e Lógicos

🚀 Etapa 05 👉 Estruturas Condicionais

🚀 Etapa 06 👉 Laços de Repetição

🚀 Etapa 07 👉 Funções

🚀 Etapa 08 👉 Eventos

🚀 Etapa 09 👉 O DOM

🚀 Etapa 10 👉 Manipulação de Estilos e Classes

🚀 Etapa 11 👉 O DOM: Acessando e Manipulando Elementos HTML 

🚀 Etapa 12 👉 Arrays, Objetos e Estruturas de Dados

🚀 Etapa 13 👉 O que é o LocalStorage e o SessionStorage

🚀 Etapa 14 👉 Mini Projeto: Gerenciador de Tarefas Inteligente

Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.

Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 

sem enrolação. 

Você pode apoiar o projeto se quiser 

com um café. 

☕ Pix: [email protected]