Tutorial Para Um Novo Programa

1 - Abra o VS Code

2 - Escolher arquivo/ Abrir pasta

3 - Crie arquivo base.html

4 - Digitar html5

5 - Mude a linguagem para, lang="pt-br"

6 - Mude o título para "Programa Exemplo"

7 - Na internet entre no getbootstrap.com, clique no read the docs

8 - Pegue o link do bootstrap <link href ....copie e cole entre o último meta name= e o <title>.

(Sempre apertando Alt + Shift + f , para organizar as linhas)

9 - Criar comando container <div class="container">

10 - Digitar o comando h1 como descrição do programa <h1> Nome e Gênero </h1>

11 - Criar o input (Lembrando que: Todo input precisa de um id= )

12 - Para criar comentários Ctrl + ;

13 - Para adicional um label ao projeto . Vá ao site getbootstrap , clique na aba Forms / Form control e pegue o link

14 - Para inserir um comando button , utilize do bootstrap

15 - Insira o comando para exibir o Resultado <h2 id="resultado">

16 - Após a ultima </div >.Inserir o comando <script src="base.js">

Roteiro para o Javascript

1 - Criar Novo arquivo , nesse exemplo criamos o base.js

2 - Declare o id= que tenha sido utilizado no botão. Nesse exemplo utilizamos o "exibir"

const exibir=document.getElementById('exibir')

3 - Relacione o botão a função "click"

Ao final do código

exibir.addEventListener('click', mostrarmensagem)

4 - Com o mesmo nome ao final da função click , criar a função "function"

function mostrarmensagem(){ }

5 - Relacione o input com os elementos

let nome = document.getElementById('nome').value; let sexo = document.getElementById('sexo').value; let resultado = document.getElementById('resultado');

6 - Criar uma condição com os valores Sexo F / M

if(sexo=='M' || sexo == 'm') { resultado.textContent = nome + ' é do sexo Masculino'; } else { resultado.textContent = nome + ' é do sexo Feminino'; }