Aula 01 — O navegador vai te obedecer | Curso de JavaScript gustavoweb

// entendendo

Como funciona

Você já sabe montar uma página. Agora falta o cérebro dela.

HTML — o esqueleto: o que existe na página.
CSS — a roupa: como isso aparece.
JavaScript — o cérebro: o que a página faz quando alguém mexe.

Todo comando que você escrever aqui é JavaScript de verdade — o mesmo que roda no Instagram, no Spotify e no site do banco. Dois comandos pra começar:

console.log("aparece na saída, só o programador vê");
alert("abre uma caixinha na tela, o usuário vê");

E o comentário — texto que o computador ignora, serve pra você se lembrar depois:

// isso aqui é um comentário, o JS nem olha

// mão na massa

Agora é com você

Os campos abaixo estão vazios de propósito. Escreva, clique em Rodar e veja o resultado. Errou? Ótimo — leia o erro e tente de novo. (Atalho: Ctrl+Enter roda o código.)

Sua primeira linha de código

Escreva um console.log que mostre o seu nome. Depois clique em Rodar.

a1e1.js

// escreva abaixo o seu primeiro comando
// dica: console.log("seu nome aqui");

Preciso de uma dica

A estrutura é sempre: console.log( abre parêntese, o texto entre aspas, fecha parêntese, ponto e vírgula. Exemplo: console.log("Ana");

Observação: Texto sempre entre aspas. Se você escrever console.log(Ana) sem aspas, o JS vai achar que Ana é o nome de uma variável que não existe e dar erro.

Falando com o usuário

Agora use alert pra abrir uma caixinha de aviso com uma mensagem sua. Vai aparecer na tela de verdade.

a1e2.js

// abra uma caixinha de aviso com a mensagem que quiser

Preciso de uma dica

Funciona igual ao console.log, só troca o nome: alert("Bem-vindo!");

Observação: Diferença importante: console.log é o bastidor (só quem programa vê). alert é o palco (o usuário vê e precisa clicar em OK).

Várias linhas + comentários

Escreva três console.log, um em cada linha, com: seu nome, sua cidade e sua série. Coloque um comentário explicando o que o código faz.

a1e3.js

// meu cartão de apresentação

Preciso de uma dica

Cada comando em sua própria linha. O JS executa de cima pra baixo, na ordem que você escreveu.

Observação: Repare que a ordem importa: o JS lê como você lê um livro — linha 1, depois linha 2, depois linha 3.

// desafio

a ficha do personagem

Desafio: a ficha do personagem

Imagine que você é um personagem de jogo. Mostre no console: o nome do personagem, a classe (mago, arqueiro, hacker...) e uma frase de efeito. Solte a criatividade.

a1d1.js DESAFIO

// FICHA DO PERSONAGEM

Preciso de uma dica

São três console.log. Você pode usar emoji dentro das aspas: console.log("⚔️ Guerreiro");

Observação: Não existe resposta certa aqui — existe código que roda. Se rodou sem erro vermelho, você acertou.