Curso de HTML JavaScript e CSS do Básico ao Avançado

O Início da sua Jornada 🚀

Seja muito bem-vindo à Cuptoast Cursos! O seu objetivo a partir de agora é dominar as três linguagens que constroem 100% dos sites que você usa diariamente:

🧱 HTML (A Estrutura): É o esqueleto. Define onde ficam os textos, as imagens e os botões.
🎨 CSS (O Estilo): É a roupagem. Define as cores, as fontes e os alinhamentos.
🧠 JavaScript (O Cérebro): É a ação. Faz o site pensar, calcular e interagir com o usuário.

⚡ Como vamos estudar?

Você não precisa instalar nada agora! Todas as nossas aulas práticas possuem um Editor de Código Nativo. Você vai ler a explicação, digitar o código na caixa escura na sua própria tela, e o resultado aparecerá ao vivo ao lado.

Nota para o futuro: Quando formos criar projetos avançados e reais fora da plataforma (para enviar a clientes, por exemplo), nós usaremos o Visual Studio Code. Mas não se preocupe com isso agora, eu avisarei quando for a hora certa de baixá-lo.

Tudo pronto? Clique no Módulo 2 (que também está liberado) e vamos escrever o seu primeiro código!

A Anatomia de uma Tag HTML 🦴

Chegou a hora! Tudo o que você vê na web é construído através de Tags (etiquetas). Pense nas tags como caixas invisíveis que guardam o seu conteúdo e dizem ao navegador o que aquele texto significa (se é um título, um botão, uma imagem, etc.).

A tag mais importante de qualquer site é o <h1>, que significa Heading 1 (Título de Nível 1). É ele que diz ao Google e a quem está a ler qual é o assunto principal da sua página.

A Regra do Sanduíche 🥪

Quase todas as tags no HTML funcionam como um sanduíche. Você precisa de uma fatia de pão em cima (a tag de abertura), o recheio no meio (o seu texto), e uma fatia de pão em baixo para fechar. A tag de fechamento sempre tem uma barra reta /.

🟢 Abertura: <h1>
🥩 O Recheio: Olá, Mundo!
🔴 Fechamento: </h1>

🎯 A sua Missão Prática

Olhe para o nosso editor de código escuro acima. Ele está vazio, esperando o seu comando para ganhar vida.

Ação: Clique na linha 2 do editor e digite exatamente o código abaixo (incluindo os sinais de menor e maior). Se quiser, pode trocar o "Olá, Mundo" pelo seu próprio nome!

<h1>Olá, Mundo!</h1>

Assim que terminar, clique no botão verde "Verificar Código" no fundo do editor.

🧠 Exercício de Fixação

Você acabou de abrir uma tag <h1> e escreveu o título principal do seu site. Qual é a forma correta de avisar ao navegador que o título terminou (ou seja, fechar a tag)?

<h1> </h1> <\h1>

A Hierarquia da Informação 📚

No Módulo 2, você aprendeu que o <h1> é o "rei" da página, o título principal. Mas um site não vive só de um título gigante, certo?

Para organizar o conteúdo de forma lógica, o HTML possui uma hierarquia de títulos que vai do H1 ao H6 (Heading 1 até Heading 6), e uma tag específica para blocos de texto normais, o P (Paragraph).

⚠️ Por que não apenas aumentar o tamanho da letra?

Você poderia pensar: "Não posso simplesmente usar a tag <p> e usar CSS para deixar a letra grande e parecer um título?" Visualmente sim, mas para os "bastidores" da internet, isso é um desastre! Usar a hierarquia correta (h1, h2, h3) é fundamental por dois motivos:

SEO (Motores de Busca): O Google e outros buscadores leem as tags de título para entender qual é o assunto principal da sua página e como ela está estruturada. É assim que o seu site aparece nas pesquisas.
Acessibilidade: Pessoas com deficiência visual usam "Leitores de Tela" (programas que leem o site em voz alta). Esses programas usam a hierarquia (h1, h2) para permitir que a pessoa navegue rapidamente pelos tópicos do site sem precisar ouvir o texto inteiro.

Como estruturar um texto na prática

Pense no seu site como se fosse a estrutura de um livro impresso:

👑 <h1> O Título do Livro: O assunto principal (Só deve existir UM por página).
📑 <h2> O Título do Capítulo: Divide a página em grandes secções.
🔖 <h3> O Subtítulo: Divide um capítulo em partes menores.
📝 <p> O Parágrafo: O texto normal, onde você conta a história.

🎯 A sua Missão Prática

No editor abaixo, eu já deixei um <h1> pronto para você.

A sua missão é dar continuidade a esse site adicionando dois novos elementos na ordem correta:

Abaixo do H1, crie uma tag <h2> e escreva um subtítulo (ex: "Sobre Mim").
Abaixo do H2, crie uma tag <p> e escreva um parágrafo contando algo sobre si mesmo.

Quando terminar, clique em Verificar Código para ver se a nossa inteligência aprova a sua estrutura!

🧠 Exercício de Fixação

Por que é fundamental usar a hierarquia correta de títulos (h1, h2, h3) em vez de apenas aumentar o tamanho da fonte de um texto normal usando CSS?

Porque o HTML não permite alterar o tamanho das fontes, sendo os títulos a única forma de deixar letras grandes. Porque os motores de busca (como o Google) e os leitores de tela para deficientes visuais usam essa hierarquia para entender a estrutura e a relevância do conteúdo. Porque usar as tags h2 e h3 faz com que o site carregue muito mais rápido do que usar a tag p.

Dando Vida às Palavras 🎨

Ler um bloco gigante de texto na internet pode ser cansativo. É por isso que nós usamos formatações para destacar o que é mais importante e guiar os olhos do usuário.

No HTML moderno, não usamos apenas tags para "mudar o visual", usamos tags para dar significado àquela palavra (o que chamamos de HTML Semântico). Isso ajuda os leitores de ecrã (para pessoas com deficiência visual) e o Google a entenderem a sua página.

As Tags de Destaque

💪 Negrito (Forte): Usamos a tag <strong>. Indica que aquele texto tem uma forte importância.
✨ Itálico (Ênfase): Usamos a tag <em>. Vem da palavra "emphasis" e dá um tom de voz diferente à palavra.

Como usar? É só aplicar a regra do sanduíche dentro do seu parágrafo!

      <p>Eu adoro <strong>café</strong> logo de manhã.</p>
    

🎯 A sua Missão Prática

No editor abaixo, eu escrevi um parágrafo normal. A sua tarefa é editá-lo colocando as tags de formatação diretamente no meio da frase:

Envolva a palavra "pizza" com a tag <strong>.
Envolva a palavra "deliciosa" com a tag <em>.

Faça as alterações e clique em Verificar Código!

🧠 Exercício de Fixação

Qual é o principal motivo de usarmos as tags <strong> e <em> no HTML5 atual?

Apenas para deixar o texto mais bonito e colorido. Para dar significado e importância à palavra para os leitores de ecrã e motores de busca. Para criar links clicáveis para outras páginas.

Criando Pontes 🌉

O que faz da internet uma verdadeira "Teia" (Web)? A capacidade de pularmos de um site para o outro através de um clique. Para isso, nós usamos a tag <a>, que significa Anchor (Âncora).

O Poder dos Atributos

Até agora, as nossas tags eram simples. Mas a tag <a> precisa de um "poder especial" para funcionar: ela precisa saber para onde o usuário deve ir quando clicar nela. É aqui que entram os Atributos.

Atributos são informações extras que colocamos dentro da tag de abertura. Para os links, usamos o atributo href (Hypertext Reference - Referência de Hipertexto).

      <a href="https://www.site.com">Clique Aqui</a>
    

🔗 A Tag: <a> e </a> delimitam onde o clique funciona.
📍 O Atributo (href="..."): Fica colado à letra "a", e o link de destino fica sempre entre aspas.
🖱️ O Texto Visível: É o recheio do sanduíche (no exemplo acima, "Clique Aqui").

🎯 A sua Missão Prática

No editor de código, abaixo das linhas comentadas, escreva uma tag de link <a> do zero.

O atributo href deve conter o endereço exato: https://www.google.com
O texto no meio da tag que ficará azul e clicável deve ser: Acessar o Google

Não se esqueça de fechar a tag com </a> e clique em verificar!

🧠 Exercício de Fixação

Se você criasse uma tag <a> mas esquecesse de colocar o atributo href="..." nela, o que aconteceria com o seu site?

O site iria crashar e dar um erro vermelho no navegador. O link iria automaticamente para o Google, que é o padrão da internet. O texto apareceria na tela, mas não funcionaria como um link, pois o navegador não saberia para onde levar o usuário.

Uma Imagem Vale Mais Que Mil Palavras 🖼️

A internet não é feita apenas de blocos de texto. Para trazermos fotos, ícones e ilustrações para o nosso site, usamos a tag <img> (Image).

⚠️ A Exceção à Regra do Sanduíche!

Lembra-se de que ensinámos que toda a tag precisa de ser fechada (ex: <h1> e </h1>)? A tag <img> é uma das poucas "Tags Órfãs" (ou vazias) do HTML. Como ela não "engloba" nenhum texto dentro de si, ela não tem tag de fechamento! Você simplesmente abre e coloca os atributos.

Os Dois Atributos Obrigatórios

Para uma imagem funcionar perfeitamente e profissionalmente, ela precisa de 2 atributos na sua abertura:

🔗 src (Source / Fonte): É o link (URL) de onde a foto está hospedada na internet.
📝 alt (Alternative Text / Texto Alternativo): É uma descrição em texto do que aparece na imagem. Se a internet do usuário falhar e a imagem não carregar, é este texto que aparece na tela. Além disso, o Google não "vê" imagens, ele lê o atributo alt para entender o que está lá!

      <img src="link-da-foto.jpg" alt="Foto de um Gato">
    

🎯 A sua Missão Prática

Chegou a hora de inserir a sua primeira imagem! Vá ao editor acima e crie uma tag <img> abaixo dos comentários.

No atributo src, copie e cole o link gigante que eu deixei na linha 5 do editor.
No atributo alt, escreva exatamente: Imagem de Teste

Lembre-se: não tente fechar a tag com </img>, isso não existe! Apenas feche o sinal de maior > no final dos atributos.

🧠 Exercício de Fixação

O que acontece se você criar uma tag de imagem apenas com o atributo src, mas esquecer completamente de colocar o atributo alt?

A imagem nunca vai aparecer na tela, pois o HTML bloqueia imagens sem texto alternativo. A imagem vai aparecer normalmente, mas o seu site perderá pontos de SEO no Google e pessoas com deficiência visual não saberão o que a imagem representa. O navegador vai gerar um texto aleatório automaticamente para tentar descrever a foto para o usuário.

Colocando Ordem no Caos 📋

Imagine tentar ler uma receita de bolo onde todos os ingredientes estão escritos num único parágrafo gigante, separados apenas por vírgulas. Seria horrível! Para organizar tópicos de forma limpa, o HTML possui um sistema de Listas.

O Conceito de "Tag Pai" e "Tag Filho"

Aqui nós aprendemos algo novo e muito importante: o Aninhamento. Uma lista não é feita de uma tag só, ela precisa de uma tag para "abraçar" tudo (o Pai) e tags menores lá dentro para cada item (os Filhos).

Primeiro, escolhemos o tipo da lista (O Pai):

⏺️ <ul> (Unordered List): Lista Não Ordenada. Cria aqueles pontinhos pretos (marcadores) antes de cada item. Ideal para listas de compras.
🔢 <ol> (Ordered List): Lista Ordenada. Cria números (1, 2, 3...) automaticamente. Ideal para um passo a passo.

Depois, colocamos os itens (Os Filhos) dentro dessa lista principal:

📝 <li> (List Item): O Item da Lista. Cada novo <li> que você coloca gera um novo pontinho ou um novo número.

Exemplo Prático (Como o código fica):

      <ul>

        <li>Maçã</li>

        <li>Banana</li>

      </ul>

🎯 A sua Missão Prática

Vamos organizar as compras! No editor de código acima:

Abra uma tag <ul> e já a feche algumas linhas abaixo.
No espaço entre elas (dentro da ul), crie pelo menos dois itens usando a tag <li>.
Escreva um produto de mercado à sua escolha dentro de cada <li>.

Clique em verificar quando os pontinhos pretos aparecerem com os seus produtos ao lado!

🧠 Exercício de Fixação

Se você estivesse a criar um site de receitas e precisasse listar o "Passo a Passo" de como fazer o bolo (Passo 1, Passo 2, Passo 3...), qual tag principal de lista deveria usar?

<ul> (Unordered List) <li> (List Item) <ol> (Ordered List)

if (codigoBruto.includes('</input>')) {
        return "❌ Opa! Lembre-se que a tag <input> é uma tag órfã (igual à de imagem). Ela não tem tag de fechamento </input>!";
    }

const input = document.querySelector('input');

if (!input) {
        return "❌ Não encontrei a tag <input>. Você a digitou corretamente abrindo com o sinal de menor?";
    }
    
    const type = input.getAttribute('type');
    if (!type || type.toLowerCase() !== 'text') {
        return "❌ Faltou o atributo type='text' na sua tag <input>! O navegador precisa de saber que tipo de caixa é essa.";
    }

const placeholder = input.getAttribute('placeholder');
    if (!placeholder) {
        return "❌ Faltou o atributo placeholder! Ele é essencial para o utilizador saber o que deve digitar na caixa.";
    }

if (placeholder.trim().toLowerCase() !== "digite o seu nome") {
        return "❌ O texto do placeholder está incorreto. Escreva exatamente 'Digite o seu nome' dentro das aspas do atributo.";
    }
    
    return true;

Conversando com o Utilizador 💬

A web seria muito chata se fôssemos apenas espectadores. Para criar sites reais (como páginas de login, calculadoras e redes sociais), nós precisamos de permitir que o visitante digite informações. Para isso, usamos a família dos Formulários, liderada pela tag <input> (Entrada).

⚠️ Outra Exceção à Regra!

Assim como a tag de imagem (<img>) que vimos no Módulo 6, o <input> também é uma Tag Órfã! Ele não tem texto no meio para envolver, portanto, nunca feche com </input>. Apenas abra a tag e coloque os atributos.

O Poder do Atributo "Type"

A tag <input> é um autêntico camaleão. O que define a forma como ela se vai comportar no ecrã é o atributo type (tipo). Veja alguns exemplos fantásticos:

📝 type="text" : Uma caixa de texto normal (para nomes, cidades, etc).
🔑 type="password" : Uma caixa de texto onde as letras viram "bolinhas" pretas (para senhas).
📧 type="email" : Obriga o utilizador a digitar um @ para ser válido.
🔘 type="checkbox" : Aquela famosa caixinha quadrada de marcar (ex: "Li e aceito os termos").

O Atributo Placeholder

Já reparou naqueles textos clarinhos que ficam dentro da caixa a dizer "Escreva aqui..." e que desaparecem mal você começa a digitar? Isso não é magia, é o atributo placeholder!

      <input type="email" placeholder="O seu melhor email">
    

🎯 A sua Missão Prática

Vamos construir o primeiro passo de um sistema de registo!

No editor acima, crie uma tag <input> (não se esqueça de que é órfã!).
Adicione o atributo type configurado como text.
Adicione o atributo placeholder com a frase exata: Digite o seu nome

Clique em verificar assim que a sua caixa de texto estiver pronta a ser usada!

🧠 Exercício de Fixação

Se você estivesse a criar um sistema bancário e precisasse de um campo onde o utilizador digitasse a sua senha secreta (sem que as pessoas ao lado pudessem ler), como deveria configurar a tag input?

<input type="text" placeholder="senha"> <input secret="true"> <input type="password">

if (!codigoBruto.includes('</div>')) return "❌ Opa! Você esqueceu de fechar a tag <div> com </div>.";
    if (!codigoBruto.includes('</span>')) return "❌ Opa! Você esqueceu de fechar a tag <span> com </span>.";

const div = document.querySelector('div');
    if (!div) return "❌ Não encontrei a tag <div>. Lembre-se de a abrir antes do h2.";

const h2InDiv = div.querySelector('h2');
    const pInDiv = div.querySelector('p');
    
    if (!h2InDiv || !pInDiv) {
        return "❌ A sua <div> não está a 'abraçar' o texto corretamente. A tag de abertura <div> tem de ficar acima do h2, e a de fechamento </div> abaixo do parágrafo.";
    }

const span = document.querySelector('span');
    if (!span) return "❌ Faltou a tag <span>! Tente envolver a palavra 'Web' com ela.";

let textoSpan = span.textContent.replace(/[.,!]/g, '').trim().toLowerCase();
    if (textoSpan !== "web") {
        return "❌ Palavra errada no Span! Você colocou a tag englobando: '" + textoSpan + "'. A missão era apenas a palavra 'Web'.";
    }
    
    return true;

As Caixas Invisíveis 📦

Até agora, aprendemos tags que têm um significado muito claro: títulos, parágrafos, imagens e listas. Mas e se você quiser juntar uma imagem, um título e um botão num único grupo (como um "Card" de produto no Mercado Livre)?

Para isso, usamos as tags de agrupamento genéricas. Elas não mudam o visual sozinhas, mas criam "caixas" para organizarmos o nosso site. As duas mais famosas são a <div> e a <span>.

A Diferença entre Bloco e Linha

🧱 A Div (Division)

A <div> é como um caixote de mudanças. É um elemento de Bloco. Ela ocupa toda a largura do ecrã e empurra o que vier depois para a linha de baixo. Usamos a Div para agrupar grandes secções do site (ex: cabeçalho, rodapé, barra lateral).

🖊️ O Span (Extensão)

O <span> é como um marca-texto. É um elemento de Linha (Inline). Ele não quebra a linha, apenas envolve um pedaço de texto dentro de um parágrafo. Usamos o Span quando queremos aplicar uma cor ou efeito especial apenas a uma palavra específica sem estragar a frase.

      <div>

        <h3>Oferta do Dia</h3>

        <p>Compre agora com <span>50% de desconto</span>!</p>

      </div>

🎯 A sua Missão Prática

No editor acima, temos um cartão de visitas desmontado. Vamos organizá-lo para que o CSS (na próxima aula) saiba quem ele é!

Na Linha 1 (antes do h2), abra uma tag <div>.
Na Linha 3 (depois do p), feche a tag com </div> (fazendo um grande sanduíche com os dois textos).
No meio da frase do parágrafo, envolva apenas a palavra "Web" com a tag <span>.

Clique em verificar quando tiver construído as caixas invisíveis corretamente!

🧠 Exercício de Fixação

Você tem um parágrafo gigante e quer mudar a cor de apenas uma palavra específica no meio da frase, sem que essa palavra vá para a linha de baixo. Qual tag de agrupamento você deve usar para isolar essa palavra?

A tag <div>, pois é a caixa principal de agrupamento. A tag <span>, pois é um elemento de linha e não quebra a estrutura do texto. A tag <p>, criando um novo parágrafo apenas para aquela palavra.

A Magia do CSS 🎨

Até agora, você foi o "engenheiro" do site, construindo paredes e colocando portas usando o HTML. Mas concorda que ninguém quer morar numa casa sem reboco e sem pintura? Chegou a hora de ser o "decorador"!

Para adicionar estilo e beleza, nós usamos uma linguagem chamada CSS (Folhas de Estilo em Cascata). E para avisar ao navegador que vamos parar de escrever HTML e começar a escrever CSS, usamos a tag mágica <style>.

A Anatomia de uma Regra CSS

Escrever CSS é como dar ordens a um pintor. Você precisa de dizer quem ele vai pintar, e o que ele vai pintar.

      <style>

        h1 {

          color: red;

        }

      </style>

🎯 O Seletor (h1): Dizemos ao navegador qual tag queremos modificar.
🗜️ As Chaves { } : Tudo o que estiver dentro das chaves será aplicado àquele seletor.
🖌️ A Propriedade (color): O que queremos mudar (neste caso, a cor do texto).
💎 O Valor (red): O resultado desejado (neste caso, vermelho).
🛑 O Ponto e Vírgula ( ; ): Obrigatório no final de cada ordem para avisar que aquele comando terminou!

🎯 A sua Missão Prática

Vamos pintar esse título sem graça!

Na parte de baixo do editor, abra a tag <style> e a feche com </style>.
No espaço entre elas, escreva uma regra CSS para selecionar a tag h1.
Mude a propriedade color para a cor blue (azul em inglês). Não se esqueça das chaves e do ponto e vírgula!

Veja o título ficar azul na mesma hora e depois clique em Verificar!

🧠 Exercício de Fixação

Qual é a analogia correta que usamos para diferenciar o HTML do CSS na criação de um site moderno?

O HTML é o cérebro que faz os cálculos, e o CSS é o esqueleto. O HTML é o banco de dados seguro, e o CSS é a linguagem de segurança. O HTML é a estrutura e os tijolos da casa (esqueleto), enquanto o CSS é a pintura e a decoração (estilo).

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue();

if (!codigoBruto.includes('.alerta')) {
        return "❌ Faltou usar o seletor de classe no CSS! Lembre-se de colocar um ponto (.) antes da palavra alerta.";
    }
    if (!codigoBruto.includes('#vip')) {
        return "❌ Faltou usar o seletor de ID no CSS! Lembre-se de colocar uma hashtag (#) antes da palavra vip.";
    }

const pAlerta = document.querySelector('.alerta');
    const pVip = document.querySelector('#vip');

if (!pAlerta || !pVip) {
        return "❌ Você apagou as tags HTML originais! Por favor, recarregue a página e edite apenas o CSS dentro da tag <style>.";
    }
    
    // O CSS traduz "red" para rgb(255, 0, 0) e "green" para rgb(0, 128, 0)
    const corAlerta = window.getComputedStyle(pAlerta).color;
    const corVip = window.getComputedStyle(pVip).color;
    
    if (corAlerta !== "rgb(255, 0, 0)") {
        return "❌ A cor da classe 'alerta' não está vermelha. Você escreveu 'color: red;' dentro das chaves do '.alerta'?";
    }
    if (corVip !== "rgb(0, 128, 0)") {
        return "❌ A cor do ID 'vip' não está verde. Você escreveu 'color: green;' dentro das chaves do '#vip'?";
    }
    
    return true;

Dando Nomes aos Bois 🏷️

No módulo passado, você usou a tag h1 no CSS para mudar a cor do título. Mas e se o seu site tiver 50 parágrafos (<p>) e você quiser que apenas UM deles seja vermelho?

Se você fizer p { color: red; }, o site inteiro vai ficar vermelho e o caos estará armado! Para resolver isso, nós colamos "etiquetas" nas nossas tags HTML para que o CSS saiba exatamente com quem está a falar. Existem dois tipos de etiquetas: Classes e IDs.

A Diferença entre Classe e ID

👥 A Classe (class) - A Farda da Equipa

A classe é como uma farda. Várias tags podem usar a mesma classe. Usamos classes para elementos que se repetem no site, como botões ou cartões de produto.
No CSS, chamamos uma classe colocando um Ponto ( . ) antes do nome.

👑 O ID (id) - O Bilhete de Identidade Único

O ID é como o seu número de identificação (CPF / NIF). Ele é único e exclusivo. Só pode existir uma tag com aquele ID na página inteira. Usamos para o menu principal, ou para uma secção muito específica.
No CSS, chamamos um ID colocando uma Hashtag ( # ) antes do nome.

Veja o exemplo de como o CSS fala com eles:

      <style>

        .botao-comprar {

          color: green;

        }

        #menu-principal {

          color: black;

        }

      </style>

🎯 A sua Missão Prática

No editor de código, temos três parágrafos. O primeiro é normal, o segundo tem uma classe chamada alerta, e o terceiro tem um ID chamado vip.

Dentro da tag <style>, crie o seletor para a classe alerta e pinte-a de red (vermelho).
Embaixo, crie o seletor para o ID vip e pinte-o de green (verde).

Lembre-se da pontuação correta (Ponto para classe, Hashtag para ID)! O parágrafo normal não deve mudar de cor.

🧠 Exercício de Fixação

Qual a principal regra que diferencia o uso de uma "class" para o uso de um "id" no HTML?

As classes só podem ser usadas em textos, e os IDs só podem ser usados em imagens. O mesmo nome de classe pode ser repetido em vários elementos da página, mas um nome de ID deve ser único e não pode repetir. As classes são usadas apenas no JavaScript, enquanto os IDs são exclusivos do CSS.

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue().toUpperCase();

if (!codigoBruto.includes('#000000')) {
        return "❌ Opa! Você precisa usar o código Hexadecimal #000000 para a cor de fundo. Não escreva 'black'.";
    }
    if (!codigoBruto.includes('#F59E0B')) {
        return "❌ Opa! Você precisa usar o código Hexadecimal #F59E0B para a cor do texto.";
    }

const cartao = document.querySelector('.cartao');
    if (!cartao) return "❌ Você apagou o HTML original! Por favor, recarregue a página e edite apenas o CSS.";

const estilo = window.getComputedStyle(cartao);
    
    if (estilo.backgroundColor !== "rgb(0, 0, 0)" && estilo.backgroundColor !== "rgba(0, 0, 0, 1)") {
        return "❌ A cor de fundo não está preta. Você usou a propriedade 'background-color' corretamente?";
    }
    
    if (estilo.color !== "rgb(245, 158, 11)") {
        return "❌ A cor do texto não está dourada. Você usou a propriedade 'color' corretamente?";
    }
    
    return true;

Pintando como um Profissional 🎨

Até agora, você usou nomes em inglês para pintar os seus textos (red, blue, green). O problema é que o navegador só conhece cerca de 140 nomes de cores. E se você quiser usar o vermelho exato da Netflix ou o roxo do Nubank?

Para ter acesso a mais de 16 milhões de cores, os programadores profissionais não usam nomes, usam códigos. O formato mais famoso na web é o Hexadecimal (Hex).

O Código Hexadecimal

Um código Hex começa sempre com uma hashtag (#) seguida de 6 letras ou números. Ele mistura Luz Vermelha, Verde e Azul para criar qualquer cor do universo.

⚫ Preto Absoluto: #000000 (Ausência de luz)
⚪ Branco Puro: #FFFFFF (Luz máxima)
🔵 Azul Facebook: #1877F2

Dica: Você nunca vai decorar esses códigos! No dia a dia, nós usamos sites como o "Color Picker" do Google para escolher a cor e copiar o código.

Texto vs Fundo da Caixa

Nós já aprendemos que a propriedade color muda a cor da letra. Mas e se quisermos pintar o fundo de uma <div> inteira? Para isso, usamos a propriedade background-color (Cor de Fundo).

      .caixa {

        /* Pinta o fundo da caixa de azul escuro */

        background-color: #0F172A;

        /* Pinta as letras que estão dentro de branco */

        color: #FFFFFF;

      }

🎯 A sua Missão Prática

Vamos criar um Cartão Premium chique e elegante! No CSS, dentro das chaves da classe .cartao:

Crie a propriedade background-color e dê-lhe o valor Hexadecimal do preto absoluto (#000000).
Crie a propriedade color e dê-lhe o valor Hexadecimal do nosso amarelo dourado (#F59E0B).

Lembre-se dos dois pontos ( : ) e do ponto e vírgula ( ; ) no final de cada linha!

🧠 Exercício de Fixação

Qual é a diferença exata entre as propriedades CSS `color` e `background-color`?

O `color` pinta as imagens do site, enquanto o `background-color` pinta os textos. O `color` altera a cor da fonte (letras/texto), enquanto o `background-color` altera a cor do fundo do elemento (a caixa onde o texto está). Não há diferença, ambas servem para pintar o fundo do site, mas o `color` é usado no HTML e o `background-color` no CSS.

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue().toLowerCase();

if (!codigoBruto.includes('sans-serif')) {
        return "❌ Opa! Você precisa usar o valor 'sans-serif' para remover a fonte antiga.";
    }
    if (!codigoBruto.includes('center')) {
        return "❌ Faltou centralizar! Use o valor 'center' para o alinhamento.";
    }
    if (!codigoBruto.includes('20px')) {
        return "❌ Faltou o tamanho da fonte! Defina o valor exato de '20px' no parágrafo.";
    }

const div = document.querySelector('.boas-vindas');
    const p = document.querySelector('p');
    if (!div || !p) return "❌ Você apagou as tags HTML originais! Recarregue a página e edite apenas o CSS.";

const estiloDiv = window.getComputedStyle(div);
    const estiloP = window.getComputedStyle(p);
    
    if (estiloDiv.textAlign !== "center" && estiloDiv.textAlign !== "-webkit-center" && estiloDiv.textAlign !== "middle") {
        return "❌ O texto não está centralizado. Lembre-se da propriedade: text-align: center;";
    }
    
    if (!estiloDiv.fontFamily.toLowerCase().includes("sans-serif")) {
        return "❌ A família da fonte não mudou. Lembre-se da propriedade: font-family: sans-serif;";
    }

if (estiloP.fontSize !== "20px") {
        return "❌ O tamanho do parágrafo não está correto. Lembre-se da propriedade: font-size: 20px;";
    }
    
    return true;

A Arte de Escrever Bonito ✍️

Se você não disser ao navegador qual letra usar, ele vai usar a fonte padrão (geralmente uma fonte com "Serifas", aqueles tracinhos nas pontas das letras, como a Times New Roman). O problema é que isso deixa o seu site com cara de jornal antigo.

Para sites modernos, nós usamos o CSS para trocar a família da fonte, o tamanho e a posição do texto na tela.

As 3 Propriedades de Ouro

🅰️ font-family (Família da Fonte): Muda o tipo da letra. O valor mais usado para um visual limpo e moderno é o sans-serif (Sem Serifas/Sem tracinhos).
📏 font-size (Tamanho da Fonte): Aumenta ou diminui a letra. Na web, medimos o tamanho em Pixels (usando a sigla px). Exemplo: 24px, 16px.
↔️ text-align (Alinhamento de Texto): Move o texto. Os valores podem ser left (esquerda), right (direita) ou center (centro).

      h1 {

        /* Deixa a letra limpa, alinhada ao centro e gigante */

        font-family: sans-serif;

        text-align: center;

        font-size: 40px;

      }

🎯 A sua Missão Prática

Vamos modernizar a nossa mensagem de boas-vindas! Edite apenas o CSS (dentro do <style>):

Dentro das chaves de .boas-vindas, crie a propriedade font-family e dê o valor de sans-serif.
Ainda dentro de .boas-vindas, adicione a propriedade text-align com o valor center. (Veja como a caixa inteira obedece!).
Agora, dentro das chaves do p (que seleciona o parágrafo), crie a propriedade font-size e digite o valor de 20px.

Lembre-se do ponto e vírgula no final de cada ordem e clique em Verificar!

🧠 Exercício de Fixação

Qual é a unidade de medida padrão que usamos na web para definir o tamanho exato de um texto (font-size) no CSS básico?

Centímetros (cm), assim como num documento do Word. Pixels (px), que representam os pequenos pontos de luz no ecrã do utilizador. Porcentagem (%), porque as fontes devem sempre ser relativas à bateria do telemóvel.

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue().toLowerCase();

if (!codigoBruto.includes('padding')) return "❌ Faltou usar a propriedade 'padding' para criar o espaço interno.";
    if (!codigoBruto.includes('30px')) return "❌ O valor do padding deve ser de exatamente 30px.";
    
    if (!codigoBruto.includes('margin')) return "❌ Faltou usar a propriedade 'margin' para criar o espaço externo.";
    if (!codigoBruto.includes('50px')) return "❌ O valor da margin deve ser de exatamente 50px.";

const caixa = document.querySelector('.caixa-azul');
    if (!caixa) return "❌ Você apagou o HTML original! Por favor, recarregue a página e edite apenas o CSS.";

const estilo = window.getComputedStyle(caixa);
    
    if (estilo.padding !== "30px") {
        return "❌ O padding (espaço interno) não foi aplicado corretamente. A sintaxe é: padding: 30px;";
    }
    
    if (estilo.margin !== "50px") {
        return "❌ A margin (espaço externo) não foi aplicada corretamente. A sintaxe é: margin: 50px;";
    }
    
    return true;

A Anatomia Invisível 📦

No CSS, absolutamente tudo é uma caixa retangular. Uma imagem é uma caixa, um parágrafo é uma caixa, um botão é uma caixa. O segredo para um site bonito, que respira e não parece espremido, é controlar os espaços ao redor e dentro dessas caixas.

Padding vs Margin

Existem dois tipos de espaços vitais que você precisa de dominar:

🎈 Padding (Preenchimento Interno)

É o espaço que fica DENTRO da caixa, entre o limite dela (a borda) e o conteúdo (o texto). Pense no padding como o plástico bolha que protege uma TV dentro de uma caixa de papelão. Quanto mais padding, mais a caixa "engorda" por dentro, afastando as bordas do texto.

🚧 Margin (Margem Externa)

É o espaço que fica FORA da caixa. É o "espaço pessoal" do elemento, que empurra as outras coisas para longe. Se você quiser separar dois botões que estão colados um no outro, você coloca uma margin entre eles.

      .botao {

        /* O botão engorda 20px para dentro */

        padding: 20px;

        /* O botão empurra os vizinhos 15px para longe */

        margin: 15px;

      }

🎯 A sua Missão Prática

Veja no editor que o texto está completamente espremido e colado às bordas azuis da caixa. Vamos dar-lhe um respiro!

Dentro das chaves de .caixa-azul, escreva a propriedade padding com o valor de 30px. Veja a caixa a "engordar"!
Agora, adicione a propriedade margin com o valor de 50px. Veja a caixa inteira a afastar-se das margens do ecrã!

Não se esqueça do ponto e vírgula e clique em Verificar!

🧠 Exercício de Fixação

Você criou um botão no seu site, mas o texto do botão está a encostar nas bordas laterais, deixando-o muito apertado por dentro. Qual propriedade CSS resolve esse problema?

margin, pois ela estica o botão empurrando os outros elementos para longe. padding, pois adiciona espaço interno, afastando a borda do botão do texto que está dentro dele. font-size, pois basta diminuir o tamanho da letra para ela caber dentro do botão.

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue().toLowerCase();

if (!codigoBruto.includes('border-radius')) return "❌ Você precisa usar a propriedade 'border-radius' para arredondar os cantos.";
    if (!codigoBruto.includes('15px')) return "❌ O cartão precisa de um arredondamento de exatos 15px.";
    if (!codigoBruto.includes('50%')) return "❌ O avatar precisa de um arredondamento de 50% para virar um círculo.";

const cartao = document.querySelector('.cartao');
    const avatar = document.querySelector('.avatar');

if (!cartao || !avatar) return "❌ Você apagou o HTML original! Recarregue a página.";

const estiloCartao = window.getComputedStyle(cartao);
    const estiloAvatar = window.getComputedStyle(avatar);
    
    if (estiloCartao.borderRadius !== "15px") {
        return "❌ O border-radius do cartão não foi aplicado corretamente. A sintaxe é: border-radius: 15px;";
    }
    
    // O navegador pode converter 50% para pixels dependendo da renderização
    if (estiloAvatar.borderRadius !== "50%" && estiloAvatar.borderRadius !== "50px") {
        return "❌ O border-radius do avatar não o transformou num círculo. Use 50%;";
    }
    
    return true;

Aparando as Arestas ✂️

Sites modernos quase não usam quinas pontiagudas de 90 graus. Cantos levemente arredondados passam uma sensação mais amigável, moderna e profissional ao utilizador. Para fazer isso no CSS, nós "lixamos" as pontas das nossas caixas usando a propriedade border-radius (Raio da Borda).

Pixels vs Porcentagem

Nós podemos arredondar os elementos de duas formas principais, dependendo do nosso objetivo:

🤏 Suavizando com Pixels (px)

Se você quiser apenas dar uma "quebrada" nas quinas (ótimo para botões e cartões de produtos), usamos um valor pequeno em pixels. Valores entre 5px e 15px são o padrão da indústria para deixar as coisas elegantes.

🔵 Criando Círculos com Porcentagem (%)

Se você tem uma caixa perfeitamente quadrada (largura igual à altura) e quer transformá-la num círculo perfeito (como uma foto de perfil do Instagram ou WhatsApp), basta usar o valor mágico de 50%. Ele arredonda metade do caminho de cada lado, fechando uma bola.

      .foto-perfil {

        width: 200px;

        height: 200px;

        /* Transforma o quadrado num círculo! */

        border-radius: 50%;

      }

🎯 A sua Missão Prática

No editor de código, temos um Cartão VIP e um Avatar (foto) totalmente quadrados. Vamos dar-lhes um banho de modernidade!

Dentro da classe .cartao, adicione a propriedade border-radius com o valor de 15px para quebrar as quinas.
Dentro da classe .avatar, adicione a propriedade border-radius com o valor de 50% para transformá-lo num círculo.

Veja a mágica acontecer ao vivo e clique em Verificar!

🧠 Exercício de Fixação

Você inseriu uma imagem de perfil totalmente quadrada no seu site usando a tag <img> (com 150px de largura e 150px de altura). Qual comando CSS você deve usar para que essa foto fique com o formato de um círculo perfeito?

border-circle: true; border-radius: 50%; margin-round: 100px;

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue().toLowerCase();

if (!codigoBruto.includes('display: flex') && !codigoBruto.includes('display:flex')) {
        return "❌ Opa! Você precisa ativar o modo flexível. Adicione 'display: flex;' dentro do .container.";
    }
    
    if (!codigoBruto.includes('space-between')) {
        return "❌ As caixas ainda estão coladas umas nas outras. Adicione 'justify-content: space-between;' para espalhá-las.";
    }

const container = document.querySelector('.container');
    if (!container) return "❌ Você apagou o HTML original! Por favor, recarregue a página e edite apenas o CSS.";

const estilo = window.getComputedStyle(container);
    
    if (estilo.display !== "flex") {
        return "❌ O display flex não foi aplicado corretamente na caixa pai.";
    }
    
    if (estilo.justifyContent !== "space-between") {
        return "❌ O alinhamento das caixas não está correto. Use a propriedade justify-content com o valor space-between.";
    }
    
    return true;

O Poder do Flexbox 🪄

Lembra-se de que a tag <div> é um elemento de Bloco e empurra tudo para a linha de baixo? E se você quiser criar um menu de navegação, onde os botões ficam lado a lado perfeitamente alinhados?

Para isso, usamos a magia do Flexbox (Caixa Flexível). Ele transforma a div principal (o Pai) num maestro que organiza todos os elementos que estão dentro dela (os Filhos).

Como ativar a magia

A regra de ouro do Flexbox é: nós damos a ordem na Caixa Pai, e os Filhos obedecem.

1️⃣ O Botão de Ligar: `display: flex;`

Assim que você coloca este comando na caixa Pai, todos os Filhos que estavam um em cima do outro passam imediatamente a ficar lado a lado numa única linha.

2️⃣ O Alinhamento Horizontal: `justify-content`

Agora que eles estão lado a lado, como quer dividi-los? Você pode usar center (juntar todos no meio), space-around (dar um espaço igual ao redor de cada um), ou o queridinho space-between (empurra o primeiro para o canto esquerdo, o último para o canto direito, e divide o espaço perfeitamente no meio).

      .caixa-pai {

        display: flex;

        justify-content: center;

      }

🎯 A sua Missão Prática

Veja no editor que temos 3 caixinhas azuis empilhadas umas em cima das outras dentro do container escuro. Vamos organizá-las!

No CSS da classe .container (que é o Pai de todas), escreva display: flex;. Veja as caixas pularem para o lado umas das outras!
As caixas estão espremidas à esquerda. Ainda no container, escreva justify-content: space-between; para espalhá-las perfeitamente pela tela.

Ficou simétrico e bonito? Clique em Verificar!

🧠 Exercício de Fixação

Se você tem um menu com 4 links e quer que eles fiquem lado a lado na tela, em qual tag você deve aplicar o comando `display: flex;`?

Eu devo colocar `display: flex;` em cada um dos 4 links individualmente. Eu devo colocar `display: flex;` na "caixa Pai" (geralmente uma div ou tag de menu) que engloba e segura esses 4 links. Não se usa Flexbox para colocar itens lado a lado, deve-se usar a propriedade `margin` negativa.

Dando Vida Aos Botões 🖱️

Você já reparou que nos sites bem feitos, quando você passa o cursor do rato por cima de um botão, ele muda de cor ou cresce um pouquinho? Isso diz ao cérebro do utilizador: "Ei, você pode clicar aqui!". É uma regra fundamental de usabilidade (UX).

Para criar essa interação no CSS, nós usamos um "Estado Especial" chamado Pseudo-classe. A mais famosa delas é a :hover (que significa "pairar" em inglês).

A Regra do Hover

Para aplicar o efeito, você pega na classe original do botão, cola dois pontos (:) no final, e escreve hover. O CSS que você colocar dentro destas novas chaves só vai acontecer quando o rato estiver em cima do elemento.

      /* O botão no seu estado normal */

      .botao-comprar {

        background-color: green;

      }

      /* O botão quando o rato passa por cima */

      .botao-comprar:hover {

        background-color: darkgreen;

      }

💎 Dica de Ouro Profissional: Transition

Se você usar apenas o :hover, a cor vai mudar de forma seca e agressiva. Nos sites modernos, nós colocamos a propriedade transition: 0.3s; na classe original do botão. Isso faz com que a cor mude de forma suave, numa transição que dura 0.3 segundos!

🎯 A sua Missão Prática

No editor acima, temos um botão bonito, mas que não reage. Vamos dar-lhe vida!

Abaixo da classe normal, crie o seletor .botao-magico:hover e abra as chaves.
Lá dentro, mude o background-color para o azul escuro: #0284C7.

Passe o rato por cima do botão no resultado ao vivo e veja a magia da transição suave. Depois, clique em Verificar!

🧠 Exercício de Fixação

O efeito `:hover` funciona perfeitamente em computadores. Mas o que acontece com este efeito quando o utilizador acede ao seu site através de um telemóvel (smartphone)?

O telemóvel ativa o `:hover` automaticamente quando o utilizador olha para o botão usando a câmara. Como não existe um "cursor do rato" para pairar sobre o ecrã no telemóvel, o efeito `:hover` geralmente é ativado apenas no exato momento em que o utilizador toca (clica) no botão. O telemóvel bloqueia sites que usam `:hover`, mostrando uma mensagem de erro.

O Despertar do Cérebro 🧠

Chegámos à terceira e última linguagem da nossa Trindade da Web! Você já domina o HTML (o esqueleto) e o CSS (a pintura). Agora, vamos adicionar os Músculos e o Cérebro: o JavaScript.

É o JavaScript (ou simplesmente JS) que permite criar calculadoras, sistemas de login, jogos, botões que funcionam de verdade e animações complexas. Ele é uma linguagem de programação completa e super poderosa!

A Tag Mágica

Assim como usávamos a tag <style> para avisar o navegador que iríamos escrever CSS, nós usamos a tag <script> para abrir um portal e começarmos a escrever comandos em JavaScript.

      <script>

        // O seu código JavaScript entra aqui!

      </script>

O Seu Primeiro Comando

O primeiro passo de qualquer programador no mundo inteiro é fazer a máquina falar. No JavaScript, um dos comandos mais clássicos para escrever algo diretamente na tela do site é o document.write() (que traduzido significa: Documento, escreva!).

🎯 A sua Missão Prática

Vamos testar se o motor do JavaScript está a funcionar!

No editor acima, abaixo dos comentários, abra e feche a tag <script>.
No espaço entre elas, escreva exatamente este comando: document.write("Olá, JavaScript!");

⚠️ Atenção aos Detalhes: O JS é rigoroso. Respeite as letras minúsculas de document.write, coloque a frase dentro de aspas e não se esqueça de fechar a linha com ponto e vírgula ( ; )!

🧠 Exercício de Fixação

Fazendo uma analogia com a construção de um ser humano, qual seria o papel exato do HTML, CSS e JavaScript, respetivamente?

HTML = Roupas, CSS = Cérebro, JS = Ossos. HTML = Esqueleto (Estrutura), CSS = Pele e Roupas (Beleza), JS = Cérebro e Músculos (Inteligência e Movimento). HTML = Cérebro (Lógica), CSS = Esqueleto (Estrutura), JS = Pele e Roupas (Beleza).

Guardando Lembranças nas Caixas 📦

Imagine que o cérebro do JavaScript é um enorme armazém vazio. Para ele se lembrar de coisas (como a pontuação de um jogo, ou o nome de quem está logado), você precisa de criar caixas, colar uma etiqueta com um nome nelas, e guardar a informação lá dentro.

No mundo da programação, nós chamamos essas caixas de Variáveis.

Como criar uma Variável?

Para criar a caixa, nós usamos a palavra-chave let (deixar/permitir). Depois damos-lhe um nome (a etiqueta) e usamos o sinal de igual (=) para guardar algo lá dentro.

      // 1. Cria a caixa "pontuacao" e guarda o número 10 nela

      let pontuacao = 10;

      // 2. Cria a caixa "cor" e guarda um texto nela

      let cor = "Azul";

A Regra de Ouro das Aspas: Se você for guardar Textos dentro da variável, eles precisam obrigatoriamente de estar entre aspas (" "). Se for guardar Números, não precisa de aspas!

Let vs Const

No JavaScript moderno, existem duas formas principais de criar essas caixas:

🔄 let (Variável Mutável): É uma caixa destrancada. Você pode guardar o número 10 hoje, e amanhã trocar pelo número 20 (muito usado em jogos para a vida do personagem).
🔒 const (Constante): É um cofre trancado! Aquilo que você guardar ali dentro NUNCA mais pode ser alterado pelo código (muito usado para guardar regras fixas, como o valor do PI na matemática).

🎯 A sua Missão Prática

Vamos ensinar o computador a decorar o seu nome!

No editor, digite let aluno = "Seu Nome Aqui"; para criar a variável (não se esqueça das aspas no nome e do ponto e vírgula no final).
Embaixo, mande o robô escrever o valor dessa caixa na tela digitando: document.write(aluno);

Cuidado: Na hora de imprimir com o document.write, não coloque aspas na palavra aluno! Se colocar, o robô vai escrever a palavra literal "aluno" em vez do seu verdadeiro nome que está guardado na caixa.

🧠 Exercício de Fixação

Imagine que você está a criar um jogo de corridas. Você precisa de criar uma "caixa" na memória para guardar a quantidade de moedas que o jogador apanha durante a corrida. Essa quantidade vai começar em 0 e ir aumentando. Qual é a forma correta de criar essa memória?

Usando o const moedas = 0;, porque a variável precisa ser constante durante o jogo. Usando o let moedas = 0;, porque o valor de moedas vai mudar (variar) o tempo todo durante a partida. Usando o document.write("moedas = 0");, porque o JavaScript guarda as memórias diretamente na tela.

A Calculadora Invisível 🧮

O JavaScript é um matemático brilhante, mas ele é muito literal. Antes de lhe pedirmos para fazer contas, precisamos de entender como ele vê o mundo. Para o computador, existem dois Tipos de Dados principais que você vai usar o tempo todo:

🔤 Strings (Textos)

Sempre que você coloca algo entre aspas (" "), o JS entende que é um Texto (String). Pode ser uma palavra, uma frase ou até um número! Se estiver entre aspas, ele não calcula, apenas lê.

🔢 Numbers (Números)

Para o JS fazer contas matemáticas, os números NÃO podem ter aspas. Se você digitar let idade = 25;, ele sabe que é um número real e está pronto para calcular.

Os Operadores Matemáticos

Fazer contas no JS é igual a usar uma calculadora de bolso. Nós usamos os seguintes símbolos (Operadores):

➕ Soma: 10 + 5 (Resultado: 15)
➖ Subtração: 10 - 5 (Resultado: 5)
✖️ Multiplicação: 10 * 5 (Resultado: 50) *Usamos o asterisco!
➗ Divisão: 10 / 5 (Resultado: 2) *Usamos a barra!

⚠️ A Pegadinha do Século (A Concatenação)

O que acontece se você somar dois Textos (Strings)? Se você fizer "10" + "10" (com aspas), o JS não soma, ele junta as duas palavras! O resultado não será 20, será 1010. Juntar textos chama-se Concatenação. Por isso, nunca use aspas nos números quando quiser fazer matemática!

🎯 A sua Missão Prática

Você tem uma loja virtual e o cliente comprou um produto. No código acima, eu já criei a memória do preco e do frete.

Crie uma nova variável chamada total (usando o let).
O valor do total será o preco + frete. Em vez de somar os números 50 e 15, some os nomes das próprias variáveis! O JS fará o trabalho duro.
Na linha de baixo, use o document.write(total); para imprimir o resultado das contas no ecrã.

O número 65 apareceu ali ao lado? Clique em Verificar!

🧠 Exercício de Fixação

Um programador iniciante escreveu o seguinte código no seu site:
let resultado = "5" + "5";
Qual será o valor exato que ficará guardado dentro da variável "resultado"?

10, porque o JavaScript é inteligente e reconhece que são números mesmo com aspas. "55", porque ao colocar aspas, os números viram Textos (Strings). O sinal de + apenas junta (concatena) os dois textos. Vai dar um erro vermelho na tela, pois é impossível usar o sinal de soma com textos.

O Segurança da Discoteca 🚪

Um programa de computador de verdade precisa saber tomar decisões baseado nas informações que ele recebe. Para ensinar o JavaScript a julgar uma situação, nós usamos a estrutura condicional If e Else (Se e Senão).

Pense no if como um segurança rigoroso na porta de uma discoteca. Ele faz uma pergunta. Se a resposta for Verdadeira (True), ele abre a porta e executa o código. Se a resposta for Falsa (False), ele pula aquele bloco e vai para o else (a alternativa).

A Estrutura do If e Else

Veja como escrevemos essa regra no código:

      // A Pergunta vai entre parênteses ( )

      if (senha === "123") {

        // O que acontece se for VERDADEIRO vai entre as chaves { }

        document.write("Login Aprovado!");

      } else {

        // O que acontece se for FALSO entra no else

        document.write("Senha Incorreta!");

      }

Os Sinais de Comparação

Para o segurança (if) fazer a pergunta matemática, nós usamos estes sinais:

🟰 === (Exatamente Igual): Verifica se duas coisas são idênticas. (Nota: no JS usamos 3 sinais de igual para perguntar se é igual, porque um só serve para guardar na variável!)
👉 > (Maior que): Ex: idade > 18
👈 < (Menor que): Ex: idade < 18
👍 >= (Maior ou igual a): Ex: idade >= 18 (18 também passa!)

🎯 A sua Missão Prática

No código acima, temos um jovem tentando entrar na discoteca, e a variável idade dele é 15.

Crie o bloco if (idade >= 18) { }. Dentro das chaves, coloque o comando document.write("Pode entrar!");.
Logo abaixo de fechar a chave do if, crie o bloco else { }. Dentro das chaves dele, coloque o comando document.write("Volte para casa!");.

Como ele só tem 15 anos, o resultado na tela preta deve ser "Volte para casa!". Após verificar e passar no teste, brinque mudando o valor da variável idade para 20 e veja o site mudar de ideia sozinho!

🧠 Exercício de Fixação

Por que usamos três sinais de igual `===` para perguntar se uma senha está correta dentro do if, em vez de usar apenas um `=`?

Porque um único sinal de igual é um erro de digitação proibido no HTML. Porque no JavaScript, um único sinal de igual (=) serve para ATRIBUIR (guardar um valor numa variável). Para COMPARAR se duas coisas são iguais, usamos os três sinais (===). Usamos três sinais apenas para aumentar a segurança do código contra invasores.

Exigências Duplas 🕵️‍♂️

Muitas vezes, uma única pergunta (um único if) não é suficiente. Imagine uma tela de Login: o computador não pode deixar a pessoa entrar só porque ela acertou o email. Ela precisa de acertar o email E a senha ao mesmo tempo.

Para juntar várias perguntas dentro do mesmo if, o JavaScript usa os Operadores Lógicos.

Os Dois Operadores de Ouro

🤝 O Operador "E" ( `&&` )

Lê-se "AND". Ele é extremamente rigoroso. Para a porta se abrir, TODAS as condições precisam de ser verdadeiras. Se uma delas for falsa, ele bloqueia tudo e atira a pessoa para o else.

        if (email === "teste@site.com" && senha === "123") { ... }
      

🔀 O Operador "OU" ( `||` )

Lê-se "OR" (são duas barras retas, geralmente perto da tecla Z ou Enter). Ele é super relaxado. Basta que APENAS UMA das condições seja verdadeira para ele abrir a porta. Muito usado para meios de pagamento.

        if (pagamento === "PIX" || pagamento === "CARTÃO") { ... }
      

🎯 A sua Missão Prática

O parque de diversões tem uma regra rígida para a Montanha Russa. O utilizador precisa de ter 12 anos ou mais, E precisa de medir 1.50m ou mais.

Crie o seu if e coloque as duas perguntas dentro dos mesmos parênteses, separadas pelo operador &&. Vai ficar assim: if (idade >= 12 && altura >= 1.50) {
Feche a lógica com o que acontece no if ("Pode entrar!") e o que acontece no else ("Não pode entrar!").

Seja o segurança perfeito da Montanha Russa e clique em Verificar!

🧠 Exercício de Fixação

Você está a programar um carrinho de compras. O cliente ganha Frete Grátis se o valor da compra for maior que 100 reais OU se ele tiver um cupom VIP. Qual é o operador lógico correto que deve colocar no meio do seu `if`?

&& (E), porque as duas coisas precisam de acontecer juntas. || (OU), porque basta que o cliente cumpra apenas uma das condições para ganhar o prémio. == (Igual), porque o valor precisa ser igual ao cupom.

Criando os seus Próprios Comandos 🕹️

Até agora, sempre que escrevíamos document.write, o texto aparecia na hora. Mas imagine que você quer criar um botão no site que, quando clicado, faz um cálculo gigantesco. Você não quer que esse cálculo rode sozinho na abertura da página, quer que ele fique "à espera".

Para empacotar blocos de código e dar-lhes um nome, usamos as Funções (function).

O Construtor e o Botão

Aprender Funções é entender dois momentos distintos: Fabricar o Comando e Ativar o Comando.

🛠️ 1. Fabricando a Função (Declarar)

Usamos a palavra function, inventamos um nome (sempre colado a parênteses vazios) e abrimos chaves { }. Tudo o que estiver dentro das chaves fica "guardado". O navegador lê, mas não executa nada ainda.

        function atirar() {

          document.write("Pew pew pew!");

        }

🔴 2. Apertando o Botão (Chamar/Invocar)

Para fazer a mágica acontecer, você precisa chamar a função pelo nome fora das chaves, como se estivesse a premir um botão no comando da televisão.

        // Agora sim o texto aparece na tela!

        atirar();

🎯 A sua Missão Prática

Vamos criar o nosso primeiro comando especial!

Crie a função com a estrutura exata: function darBoasVindas() {
No meio das chaves, mande o JS escrever na tela com document.write("Sistema Iniciado!");
Se você olhar agora, o ecrã está em branco. A função está guardada! Na última linha do código, fora das chaves, ative a função escrevendo apenas darBoasVindas();

O texto piscou na tela? Maravilha, a sua primeira função foi invocada com sucesso! Clique em Verificar.

🧠 Exercício de Fixação

Um programador júnior escreveu a função inteira perfeitamente, com todas as regras e comandos dentro das chaves, mas quando ele atualiza a página, nada acontece. Qual é o erro mais provável que ele cometeu?

Ele usou a palavra 'function' em letras minúsculas, e o JavaScript exige que seja tudo em MAIÚSCULAS. Ele apenas construiu a função, mas esqueceu de "Chamar" (invocar) a função pelo nome na parte de fora das chaves para ativá-la. O navegador bloqueou o código por segurança porque funções só podem ser usadas em servidores avançados.

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue();
    const codigoLimpo = codigoBruto.replace(/\s+/g, '');

if (!codigoLimpo.includes('document.getElementById')) {
        return "❌ Opa! Você precisa usar a ponte do DOM. Digite: document.getElementById(\"meu-titulo\")";
    }

if (!codigoLimpo.includes('.innerHTML')) {
        return "❌ Faltou a ordem de modificação! Depois de pescar o elemento, use .innerHTML = \"Novo Texto\";";
    }

if (!codigoBruto.includes('O DOM é Incrível!')) {
        return "❌ O texto novo está incorreto. Digite exatamente: \"O DOM é Incrível!\"";
    }

const h1 = document.getElementById('meu-titulo');
    if (!h1) return "❌ Você apagou a tag <h1> do HTML original! Recarregue a página.";
    
    // Verifica se o texto mudou no ecrã de verdade
    if (h1.innerHTML !== "O DOM é Incrível!") {
        return "❌ O comando parece ter um pequeno erro de sintaxe. Lembre-se: document.getElementById(\"meu-titulo\").innerHTML = \"O DOM é Incrível!\";";
    }

return true;

A Ponte Secreta 🌉

Nós temos um problema grave: O HTML e o JavaScript não falam a mesma língua. O HTML cria as caixas e textos, mas o JavaScript (que é o cérebro) é cego. Ele não consegue ver as tags HTML sozinho.

Para resolver isso, quando a página carrega, o seu navegador (Chrome, Safari, etc.) lê o seu HTML e cria um "Mapa Mapeado" do site inteiro na memória do computador. Esse mapa chama-se DOM (Document Object Model).

A Super Variável "document"

Graças ao DOM, o JavaScript ganha um superpoder: a palavra mágica document. Ela representa o seu site inteiro! Através dela, nós podemos dar ordens ao JS para "pescar" uma tag HTML específica e alterá-la ao vivo.

🎣 O Gancho: `getElementById`

Lê-se "Pegar Elemento pelo ID". Lembra-se que no CSS nós dávamos IDs únicos para as tags? Nós podemos usar o DOM para procurar no site inteiro por esse crachá único e agarrar a tag!

✍️ A Modificação: `innerHTML`

Depois de pescar o elemento, nós usamos a propriedade .innerHTML (HTML Interno) para apagar o que estava lá e enfiar um texto ou código novo à força.

      // Tradução: "No site (document), procure a tag com ID 'aviso' e mude o texto dela para 'Olá!'"

      document.getElementById("aviso").innerHTML = "Olá!";

🎯 A sua Missão Prática

Nós temos um <h1> no HTML com um texto feio, mas ele tem um crachá de identificação: id="meu-titulo".

Dentro da tag <script>, chame a ponte do DOM usando o document.getElementById("meu-titulo").
Cole o modificador logo em seguida e mude o texto com .innerHTML = "O DOM é Incrível!";

Se você digitar corretamente e respeitar as letras maiúsculas e minúsculas (o JS é sensível a isso!), você vai ver o texto do HTML ser destruído e substituído ao vivo na tela de resultados. Clique em Verificar!

🧠 Exercício de Fixação

Qual é o principal objetivo do DOM (Document Object Model) na construção de sites interativos?

O DOM é uma linguagem de banco de dados usada para salvar a senha dos utilizadores de forma segura. O DOM é uma representação (um mapa) do HTML que o navegador cria, permitindo que o JavaScript "encontre" e modifique os elementos do site ao vivo. O DOM é a propriedade CSS que arredonda as bordas dos botões, substituindo o border-radius.

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue();
    const codigoLimpo = codigoBruto.replace(/\s+/g, '');

if (!codigoLimpo.includes('querySelector')) {
        return "❌ Opa! Você precisa usar a vara de pesca moderna. Digite: document.querySelector";
    }

if (!codigoLimpo.includes("querySelector('.mensagem')") && !codigoLimpo.includes('querySelector(".mensagem")')) {
        return "❌ Você não pescou o alvo certo! Lembre-se que é uma CLASSE, então precisa do ponto (.) antes do nome, tudo dentro de aspas. Ex: querySelector('.mensagem')";
    }

if (!codigoLimpo.includes('alvo=')) {
        return "❌ Você precisa guardar o elemento numa variável chamada 'alvo'. Ex: let alvo = document.querySelector(...);";
    }

if (!codigoLimpo.includes('alvo.innerHTML=')) {
        return "❌ Depois de pescar e guardar na variável, você precisa mudar o texto usando alvo.innerHTML = ...";
    }

if (!codigoBruto.includes('Elemento pescado com sucesso!')) {
        return "❌ O texto novo está incorreto. Digite exatamente: \"Elemento pescado com sucesso!\"";
    }

const p = document.querySelector('.mensagem');
    if (!p) return "❌ Você apagou a tag <p> do HTML original! Recarregue a página.";
    
    // Verifica se o texto mudou no ecrã de verdade
    if (p.innerHTML !== "Elemento pescado com sucesso!") {
        return "❌ O comando parece ter um pequeno erro de sintaxe. Siga os três passos da missão com atenção.";
    }

return true;

A Vara de Pesca Moderna 🎣

O getElementById que aprendemos na aula passada é um clássico, mas tem um problema: ele só funciona para IDs. E se você quiser alterar uma classe inteira de botões ou uma tag normal? Para não termos de decorar dezenas de comandos diferentes, o JavaScript moderno criou o "Anel de Poder" que domina todos os outros: o querySelector (Seletor de Consultas).

Reciclando o Conhecimento de CSS

A genialidade do querySelector é que ele usa exatamente as mesmas regras do CSS para encontrar os elementos. Lembra-se do Módulo 11?

🏷️ Pescar por Tag: document.querySelector("p") (Pesca o primeiro parágrafo)
👥 Pescar por Classe: document.querySelector(".botao") (Pesca a classe, não esqueça o ponto!)
👑 Pescar por ID: document.querySelector("#menu") (Pesca o ID, não esqueça a hashtag!)

O Segredo dos Profissionais: Guardar em Variáveis

Na aula passada, escrevemos uma linha de comando gigantesca para pescar e alterar ao mesmo tempo. No mundo profissional, nós dividimos isso em duas etapas para deixar o código limpo: primeiro nós pescamos e guardamos numa variável, e só depois nós alteramos.

      // 1. Pesca a classe e guarda na caixa "meuBotao"

      let meuBotao = document.querySelector(".btn-comprar");

      // 2. Agora basta usar o nome da caixa para modificar!

      meuBotao.innerHTML = "Esgotado!";

🎯 A sua Missão Prática

O HTML acima tem um parágrafo à espera de instruções. Ele tem uma classe chamada mensagem.

Crie a variável para pescar a classe: let alvo = document.querySelector(".mensagem"); (Cuidado com o ponto!).
Na linha de baixo, troque o texto do HTML usando: alvo.innerHTML = "Elemento pescado com sucesso!";

O texto mudou no ecrã de resultados? Clique em Verificar!

🧠 Exercício de Fixação

Se você tem um título no seu HTML com a classe "titulo-principal" <h1 class="titulo-principal">, qual é o comando exato que deve usar no JavaScript para "pescar" esse elemento?

document.querySelector("titulo-principal") document.querySelector(".titulo-principal"), pois o ponto indica que estamos à procura de uma classe, tal como no CSS. document.querySelector("#titulo-principal"), pois a hashtag seleciona a classe principal.

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue();
    const codigoLimpo = codigoBruto.replace(/\s+/g, '');

if (!codigoLimpo.includes('caixa.innerHTML="ModoEscuro"') && !codigoLimpo.includes("caixa.innerHTML='ModoEscuro'")) {
        return "❌ Passo 1 incompleto: Você precisa mudar o texto usando caixa.innerHTML = \"Modo Escuro\";";
    }

if (!codigoLimpo.includes('caixa.style.backgroundColor="black"') && !codigoLimpo.includes("caixa.style.backgroundColor='black'")) {
        return "❌ Passo 2 incompleto: Mude o fundo! Lembre-se da sintaxe: caixa.style.backgroundColor = \"black\";";
    }

if (!codigoLimpo.includes('caixa.style.color="white"') && !codigoLimpo.includes("caixa.style.color='white'")) {
        return "❌ Passo 3 incompleto: As letras estão pretas no fundo preto! Mude a cor do texto usando: caixa.style.color = \"white\";";
    }

const divCaixa = document.querySelector('.caixa-tema');
    if (!divCaixa) return "❌ Você apagou a tag HTML original! Recarregue a página.";
    
    if (divCaixa.innerHTML !== "Modo Escuro") return "❌ O texto na tela não mudou corretamente.";

const estilo = window.getComputedStyle(divCaixa);
    if (estilo.backgroundColor !== "rgb(0, 0, 0)" && estilo.backgroundColor !== "rgba(0, 0, 0, 1)") {
        return "❌ A cor de fundo não ficou preta. O comando estilo falhou.";
    }
    if (estilo.color !== "rgb(255, 255, 255)") {
        return "❌ A cor do texto não ficou branca. O comando estilo falhou.";
    }

return true;

O Pintor ao Vivo 🎨

O JavaScript não altera apenas textos e números. Ele consegue assumir o controle total do CSS e mudar a pintura, o tamanho e a posição de qualquer coisa na tela em tempo real! É assim que criamos os famosos botões de "Modo Escuro" ou fazemos uma caixa de erro ficar vermelha.

A Propriedade ".style"

Para dizer ao JavaScript que queremos mexer no visual de um elemento pescado, adicionamos a palavra .style logo a seguir ao nome da variável, e depois escolhemos a propriedade CSS que queremos alterar.

      // 1. Pesca a caixa de erro

      let erro = document.querySelector(".caixa-erro");

      // 2. Pinta o texto de vermelho ao vivo!

      erro.style.color = "red";

⚠️ A Regra do Camelo (Camel Case)

Aqui há uma armadilha perigosa! No CSS normal, as palavras compostas são separadas por um traço (ex: background-color ou border-radius). O JavaScript odeia traços porque ele acha que é um sinal de subtração (menos)!

Por isso, quando usamos o JS para mudar o CSS, nós removemos o traço e colocamos a primeira letra da segunda palavra em Maiúscula. Isso chama-se "Camel Case" (Corcova de Camelo).

CSS: background-color ➡️ JS: backgroundColor
CSS: font-size ➡️ JS: fontSize

🎯 A sua Missão Prática

Vamos criar o efeito de Modo Escuro! A caixa já foi pescada e guardada na variável caixa.

Use caixa.innerHTML = "Modo Escuro"; para trocar o texto.
Lembre-se do Camel Case e mude o fundo: caixa.style.backgroundColor = "black";
Mude a cor da letra para não sumir no fundo preto: caixa.style.color = "white";

O CSS da caixa tem um "transition" escondido. Se você digitar tudo certo, vai ver a caixa escurecer suavemente como num passe de mágica! Clique em Verificar.

🧠 Exercício de Fixação

Você quer usar o JavaScript para arredondar as bordas de uma imagem pescada na variável "foto". No CSS normal, usamos a propriedade `border-radius: 50%`. Como você deve escrever essa ordem no JavaScript?

foto.style.border-radius = "50%"; foto.style.borderRadius = "50%"; (Usando o Camel Case sem o traço). foto.css.radius = "50%";

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue();
    const codigoLimpo = codigoBruto.replace(/\s+/g, '');

if (!codigoLimpo.includes('querySelector(".btn-surpresa")') && !codigoLimpo.includes("querySelector('.btn-surpresa')")) {
        return "❌ Passo 1 incompleto: Você precisa pescar o botão primeiro! Use: let alvo = document.querySelector(\".btn-surpresa\");";
    }

if (!codigoLimpo.includes('addEventListener')) {
        return "❌ Passo 2 incompleto: Faltou instalar a escuta! Use o comando .addEventListener";
    }

if (!codigoLimpo.includes('("click",explodir)') && !codigoLimpo.includes("('click',explodir)")) {
        return "❌ O ouvinte está configurado incorretamente. A sintaxe exata é: alvo.addEventListener(\"click\", explodir);";
    }

// A correção do bug invisível está aqui em baixo!
    if (codigoLimpo.includes('("click",explodir())') || codigoLimpo.includes("('click',explodir())")) {
        return "❌ Cuidado! Dentro do addEventListener, você NÃO deve colocar os parênteses na função explodir. Se colocar, ela explode sozinha! Escreva apenas 'explodir' sem parênteses.";
    }

return true;

Instalando Escutas 🎧

O JavaScript consegue "ouvir" quase tudo o que o utilizador faz no site: onde ele clica, quando ele faz scroll na página, ou qual tecla ele aperta no teclado. Nós chamamos essas ações de Eventos.

Para o site reagir, nós usamos um comando que une o clique do rato com uma Função que nós criamos. É como instalar um detonador numa bomba!

O Adicionador de Ouvintes

O comando profissional para isso é o addEventListener (Adicionar Ouvinte de Eventos). Ele precisa de duas informações vitais separadas por uma vírgula: Qual é a ação? e Qual função ele deve ligar?

      // 1. Pescamos o botão

      let meuBotao = document.querySelector(".btn-comprar");

      // 2. Colocamos o botão de "castigo" à espera de um clique

      meuBotao.addEventListener("click", confirmarCompra);

⚠️ O Erro dos Parênteses (Muito Importante!)

Lembra-se que para ativar uma função nós usávamos os parênteses, tipo confirmarCompra()?

Dentro do addEventListener, você NUNCA coloca os parênteses no nome da função! Se você colocar, o JavaScript vai ativar a função na hora que carregar a página, em vez de esperar pelo clique. Apenas passe o "nome" da função para ele guardar.

🎯 A sua Missão Prática

Temos um botão misterioso e uma função explodir pronta para agir.

Na área da missão, crie a variável alvo e pesque o botão: let alvo = document.querySelector(".btn-surpresa");
Na linha de baixo, instale a escuta no alvo: alvo.addEventListener("click", explodir);

Terminou de digitar? Agora passe o rato pelo botão no ecrã e clique nele! Se ele explodir e ficar vermelho, o seu detonador funcionou! Clique em Verificar.

🧠 Exercício de Fixação

Um desenvolvedor escreveu a seguinte linha de código para fazer um botão enviar um formulário:
botao.addEventListener("click", enviarFormulario());
Qual será o resultado dessa linha de código?

O código vai funcionar perfeitamente e enviar o formulário quando o botão for clicado. Como ele colocou os parênteses "()" na função enviarFormulario, o formulário será enviado SOZINHO assim que a página abrir, e o botão de clique vai parar de funcionar. O navegador vai travar porque a palavra "click" não pode ter aspas.

Lendo a Mente do Utilizador 🧠

Sempre que o utilizador digita um email, uma senha ou um número na nossa calculadora, essa informação fica guardada "escondida" dentro da tag <input>. O nosso trabalho agora é dar ordem ao JavaScript para ir lá buscar esse texto.

innerHTML vs value

Aqui existe uma regra fundamental que confunde muitos iniciantes. Existem duas formas de ler ou mudar informações no HTML, dependendo do tipo da tag:

🏷️ .innerHTML (Para Textos): Usamos em tags que têm uma abertura e um fechamento (como <h1>, <p>, <div>). Ele pega ou troca tudo o que está no meio das tags.
📥 .value (Para Inputs): Usamos EXCLUSIVAMENTE nas tags de formulário (como o <input> órfão). Ele captura exatamente aquilo que o utilizador digitou dentro da caixa branca.

O Momento Exato da Leitura

⚠️ O Segredo do Tempo

Se você tentar ler o .value solto no código, ele vai ler a caixa vazia assim que o site abrir! É por isso que nós sempre colocamos a ordem de leitura DENTRO da função do botão. Assim, o JS só vai "olhar" para a caixa de texto no exato milissegundo em que o botão for clicado (quando o utilizador já terminou de digitar).

🎯 A sua Missão Prática

O cenário está montado! As variáveis e o botão já foram pescados e o ouvinte está ligado à função saudarUsuario. Vamos dar inteligência a ela:

Dentro das chaves da função, crie uma variável: let nomeDigitado = inputNome.value;
Na linha seguinte, injete esse nome no subtítulo h2 da tela: mensagem.innerHTML = nomeDigitado;

Teste o seu programa! Digite o seu nome na caixa de texto branca no ecrã de resultados e clique em "Enviar". Viu o seu nome aparecer em letras grandes? Depois, clique em Verificar!

🧠 Exercício de Fixação

Você pescou um parágrafo <p> e um campo de senha <input type="password">. Quais propriedades você deve usar no JavaScript para ler o texto do parágrafo e a senha digitada pelo utilizador, respetivamente?

`.text` para o parágrafo e `.password` para a senha. `.innerHTML` para o parágrafo (porque ele tem tags de abertura e fecho) e `.value` para o input de senha (porque é um campo de formulário). `.value` para os dois, pois ambos guardam valores na tela.

Controlando o Futuro ⏳

O JavaScript é uma máquina incrivelmente rápida. Se você lhe der 10 ordens, ele vai tentar executar todas no exato momento em que você clicar num botão. Mas e se você quiser criar suspense? Ou mostrar um aviso na tela e fazê-lo desaparecer sozinho depois de alguns segundos?

Para atrasar a execução de uma função, nós usamos o Mestre do Tempo: o setTimeout.

A Matemática dos Milissegundos

A primeira coisa que precisa saber é que o JavaScript não conta o tempo em segundos normais, mas sim em Milissegundos. Portanto, você vai precisar de acrescentar três zeros à sua contagem mental:

⏱️ 1 segundo: 1000
⏱️ 3 segundos: 3000
⏱️ Meio segundo: 500

Como programar a bomba-relógio

O setTimeout funciona como um contrato. Você passa-lhe duas informações cruciais, separadas por uma vírgula: Quem vai ser executado? e Daqui a quanto tempo?

      // Tradução: "Execute a função fecharAviso daqui a 5 segundos"

      setTimeout(fecharAviso, 5000);

⚠️ A Maldição dos Parênteses Ataca Novamente

Assim como acontecia no addEventListener (Módulo 27), você NUNCA deve colocar parênteses na função que vai para o setTimeout. Se você escrever setTimeout(impacto(), 3000), o JS vai ignorar o tempo e explodir a função instantaneamente!

🎯 A sua Missão Prática

No editor de código, temos o lançamento de um míssil. Quando clica, o ecrã diz "Míssil a caminho...", mas ele nunca atinge o alvo!

Dentro da função iniciarContagem (no espaço da missão), escreva a ordem de atraso: setTimeout(impacto, 3000);

Teste o botão! Clique nele, veja a mensagem mudar para laranja e aguarde os emocionantes 3 segundos sem tocar em nada até a explosão vermelha aparecer. Depois, clique em Verificar!

🧠 Exercício de Fixação

Você criou uma notificação verde a dizer "Compra Realizada!" no seu site e quer que ela desapareça automaticamente após 8 segundos. Qual é o código correto que você deve usar?

setTimeout(desaparecer, 8); setTimeout(desaparecer, 8000);, pois 8 segundos equivalem a 8000 milissegundos. setTimeout(desaparecer(), 8000);, não esquecendo os parênteses para a função funcionar.

<div class="teclado">
    <button onclick="adicionar('7')">7</button>
    <button onclick="adicionar('8')">8</button>
    <button onclick="adicionar('9')">9</button>
    <button class="operador" onclick="adicionar('/')">/</button>

// 1. O sistema de digitação já está pronto para si!
  // Ele pega no que já está no visor e junta com a nova tecla.
  function adicionar(tecla) {
    visor.value = visor.value + tecla;
  }

// 👇 SUA MISSÃO COMEÇA AQUI 👇

// Missão 1: Crie a função limpar()
  // Ela precisa de apagar o texto do visor. Para isso, mude o visor.value para "" (vazio).
  
  
  // Missão 2: Crie a função calcular()
  // Use o supercomando eval(visor.value) para que o JS resolva a conta matemática automaticamente.
  // Depois, guarde o resultado de volta na tela: visor.value = resultado;
  
  
</script>

const codigoBruto = window.parent.ace.edit("cuptoast-editor").getValue();
    const codigoLimpo = codigoBruto.replace(/\s+/g, '');

if (!codigoLimpo.includes('functionlimpar()')) {
        return "❌ Missão 1 Incompleta: Você precisa criar a função limpar() exatamente com esse nome.";
    }
    
    if (!codigoLimpo.includes('visor.value=""') && !codigoLimpo.includes("visor.value=''")) {
        return "❌ Na função limpar, você precisa esvaziar o visor. Lembre-se da ordem: visor.value = \"\";";
    }

if (!codigoLimpo.includes('functioncalcular()')) {
        return "❌ Missão 2 Incompleta: Você precisa criar a função calcular().";
    }
    
    if (!codigoLimpo.includes('eval(visor.value)')) {
        return "❌ Na função calcular, você precisa usar a magia do eval(visor.value) para o JavaScript ler a tela e resolver a conta!";
    }

// A correção do espaçamento da avaliação da calculadora está aqui em baixo!
    if (!codigoLimpo.includes('visor.value=eval(visor.value)') && !codigoLimpo.includes('letresultado=eval(visor.value)') && !codigoLimpo.includes('visor.value=resultado')) {
        return "❌ Você usou o eval, mas esqueceu de jogar o resultado de volta para o visor! Tente: visor.value = eval(visor.value);";
    }

return true;

A Peça de Portfólio 🏆

Chegou o momento! Você já domina a estrutura, a beleza e a lógica. Agora, vai atuar como um verdadeiro Engenheiro de Software para finalizar um projeto real que você pode mostrar aos seus amigos e familiares.

O HTML e o CSS do teclado já foram construídos por mim (analise como eu usei o Flexbox e o Hover para deixá-lo tão bonito!). E eu também já deixei a função adicionar() pronta: ela liga os botões do HTML diretamente ao Visor.

O Superpoder "eval()"

Como é que vamos fazer o JavaScript ler algo como 5+5*2 na tela e calcular sozinho sem nos preocuparmos com as regras da matemática? Os criadores do JavaScript construíram uma função nativa genial chamada eval() (Evaluate / Avaliar).

Basta você entregar a ela um texto com números e sinais, e ela cospe o resultado exato!

      // Em vez de fazer a conta na mão...

      let conta = "10+10";

      let resultado = eval(conta); // O resultado vira 20 magicamente!

🎯 A sua Última Missão

A calculadora está morta. Precisamos programar os botões "C" (Limpar) e "=" (Calcular) no JavaScript.

Crie a function limpar() { }: Dentro dela, mude o visor.value para um texto vazio: "".
Crie a function calcular() { }: Dentro dela, crie uma variável resultado que recebe a magia do eval(visor.value). Depois, na linha de baixo, devolva esse resultado para a tela usando visor.value = resultado;.

Escreveu as duas funções? Tente fazer uma conta na calculadora acima: digite 8 * 8 e clique no botão verde de igual. Se o 64 aparecer, VOCÊ É OFICIALMENTE UM PROGRAMADOR WEB! Clique em Verificar para resgatar o seu certificado mental de glória!

🧠 A Pergunta de Ouro

Você completou esta jornada épica. Quando você clica num botão da sua calculadora, o que acontece nos bastidores unindo as três linguagens da web?

O HTML calcula a matemática, o CSS cria o botão e o JavaScript envia para o servidor. O utilizador clica na estrutura do HTML, que está pintada e posicionada pelo CSS, e isso dispara um Evento que acorda o Cérebro do JavaScript para fazer a matemática e alterar a tela! O botão é criado no JavaScript, que pede permissão ao CSS para ser desenhado no HTML usando a ponte do DOM.

🔒

Conteúdo Exclusivo Premium

Para assistir a esta aula e emitir o seu certificado, você precisa desbloquear o acesso completo a este curso.

Comprar Acesso Agora

Já comprou pelo Mercado Livre?

Acesso do Aluno

Criar Conta

Liberar Acesso

Curso de HTML JavaScript e CSS do Básico ao Avançado

Curso de HTML JavaScript e CSS do Básico ao Avançado

O Início da sua Jornada 🚀

⚡ Como vamos estudar?

A Anatomia de uma Tag HTML 🦴

A Regra do Sanduíche 🥪

🎯 A sua Missão Prática

A Hierarquia da Informação 📚

⚠️ Por que não apenas aumentar o tamanho da letra?

Como estruturar um texto na prática

🎯 A sua Missão Prática

Dando Vida às Palavras 🎨

As Tags de Destaque

🎯 A sua Missão Prática

Criando Pontes 🌉

O Poder dos Atributos

🎯 A sua Missão Prática

Uma Imagem Vale Mais Que Mil Palavras 🖼️

⚠️ A Exceção à Regra do Sanduíche!

Os Dois Atributos Obrigatórios

🎯 A sua Missão Prática

Colocando Ordem no Caos 📋

O Conceito de "Tag Pai" e "Tag Filho"

🎯 A sua Missão Prática

Conversando com o Utilizador 💬

⚠️ Outra Exceção à Regra!

O Poder do Atributo "Type"

O Atributo Placeholder

🎯 A sua Missão Prática

As Caixas Invisíveis 📦

A Diferença entre Bloco e Linha

🧱 A Div (Division)

🖊️ O Span (Extensão)

🎯 A sua Missão Prática

A Magia do CSS 🎨

A Anatomia de uma Regra CSS

🎯 A sua Missão Prática

Dando Nomes aos Bois 🏷️

A Diferença entre Classe e ID

👥 A Classe (class) - A Farda da Equipa

👑 O ID (id) - O Bilhete de Identidade Único

🎯 A sua Missão Prática

Pintando como um Profissional 🎨

O Código Hexadecimal

Texto vs Fundo da Caixa

🎯 A sua Missão Prática

A Arte de Escrever Bonito ✍️

As 3 Propriedades de Ouro

🎯 A sua Missão Prática

A Anatomia Invisível 📦

Padding vs Margin

🎈 Padding (Preenchimento Interno)

🚧 Margin (Margem Externa)

🎯 A sua Missão Prática

Aparando as Arestas ✂️

Pixels vs Porcentagem

🤏 Suavizando com Pixels (px)

🔵 Criando Círculos com Porcentagem (%)

🎯 A sua Missão Prática

O Poder do Flexbox 🪄

Como ativar a magia

1️⃣ O Botão de Ligar: display: flex;

2️⃣ O Alinhamento Horizontal: justify-content

🎯 A sua Missão Prática

Dando Vida Aos Botões 🖱️

A Regra do Hover

💎 Dica de Ouro Profissional: Transition

🎯 A sua Missão Prática

O Despertar do Cérebro 🧠

A Tag Mágica

O Seu Primeiro Comando

🎯 A sua Missão Prática

Guardando Lembranças nas Caixas 📦

Como criar uma Variável?

Let vs Const

🎯 A sua Missão Prática

A Calculadora Invisível 🧮

1️⃣ O Botão de Ligar: `display: flex;`

2️⃣ O Alinhamento Horizontal: `justify-content`

🤝 O Operador "E" ( `&&` )

🔀 O Operador "OU" ( `||` )

🎣 O Gancho: `getElementById`

✍️ A Modificação: `innerHTML`