🚀 Roteiro para criar um programa em JavaScript

Guia passo a passo para criar seu primeiro programa usando HTML, Bootstrap e JavaScript.

Parte 1

🌐 Preparando o HTML

Siga os passos abaixo para preparar a página.

1 Abra o VS Code

Abra o Visual Studio Code para começar o projeto.

Abrindo o VS Code

2 Crie um novo arquivo base.html

Criando arquivo HTML

3 Digite HTML 5

HTML 5

4 Mude o idioma

Configure o documento para utilizar pt-br.

Configurando idioma

5 Abra o Bootstrap

Bootstrap

6 Pegue o link do Bootstrap

Link do Bootstrap
💡 Sempre coloque o link do Bootstrap abaixo da tag <meta>.

7 Organize seu código

⌨️ Use Alt + Shift + F para organizar automaticamente o código.

8 Crie o comando container

Criando container

Depois, pressione Enter.

9 Crie o título do programa

Utilize o comando h1 para colocar a descrição do programa.

Comando h1

10 Crie o label e o input

Label e input

11 Crie um comentário

Use Ctrl + ; para criar um comentário.

Criando comentário

12 Coloque um ID nos inputs

⚠️ Todo input precisa ter um id para poder ser identificado pelo JavaScript.
ID no input

13 Insira um botão do Bootstrap

Botões Bootstrap

Depois, coloque um id no botão.

ID do botão

14 Crie um espaço para exibir o resultado

Exibindo resultado

15 Insira o Script

Coloque o comando <script> antes do fechamento do <body>.

Script JavaScript
Parte 2

⚡ JavaScript

Agora vamos adicionar a lógica do programa.

1 Crie um arquivo JavaScript

Criando arquivo JavaScript

2 Declare o botão

Declarando botão

3 Relacione o botão com o clique

Evento de clique

4 O nome da função é igual

Nome da função

5 Relacione os inputs

Relacionando inputs

6 Crie uma condição

Crie uma condição utilizando os valores de sexo F ou M.

Condição JavaScript

🎉 Parabéns!

Você chegou ao final do roteiro e já possui uma base para criar programas utilizando HTML, Bootstrap e JavaScript.