├── Readme.md
├── aula04
    └── ex001.html
├── aula06
    ├── ex002.html
    ├── ex003.html
    └── ex004.html
├── aula09
    └── ex005.html
├── aula10
    ├── ex006.html
    └── ex007.html
└── exercicios
    ├── anotacoes.md
    ├── exercicio1.html
    ├── exercicio10.html
    ├── exercicio2.html
    ├── exercicio3.html
    ├── exercicio4.html
    ├── exercicio5.html
    ├── exercicio6.html
    ├── exercicio7.html
    ├── exercicio8.html
    └── exercicio9.html


/Readme.md:
--------------------------------------------------------------------------------
 1 | Curso de JS do professor Guanabara!
 2 | 
 3 | Anotações que considero importante deixarei anotado aqui, especificando a aula e o módulo da respectiva anotação!
 4 | 
 5 | 
 6 | Dando os Primeiros passos - Curso JS #03:
 7 | 
 8 | Livros para aprender mais sobre JS: 
 9 | - Javascript - O guia definitivo --- David Fanagan (?) --- é pago
10 | - Javascript - Guia do programador --- Maurício ---  é pago
11 | 
12 | - Guia de referência mozilla (link: https://developer.mozilla.org/pt-BR/)
13 | - Guia de referência ecma
14 | 
15 | 
16 | Variáveis e Tipos Primitivos - curso JS #05
17 |  - vaga a1 = carro 1 ---- um único sinal de igual em JS significa RECEBE, ou seja, vaga a1 RECEBE carro 1
18 |  - no JS, definimos uma variável como "var" ou como "let"  
19 |  - os nomes das variáveis que formos criar, chamadas de IDENTIFICADORES, possuem algumas regras:
20 |  1. podem começar com letra, $ ou _
21 |  2. NÃO podem começar com números
22 |  3. PODE usar acentos e símbolos
23 |  4. NÃO podem conter espaços
24 |  5. NÃO podem ser paçavras reservadas que já existam na linguagem
25 |  
26 | 
27 | 
28 |  Tratamento de Dados - Curso JS #06
29 |  - Sinal de + serve para concatenar as strings
30 |  - Com o comando Number vc transforma string em número (está na pasta aula06 e no arquivo ex003)
31 |  - Para passar número para String: String(nome da variável que quer transformar)
32 | 
33 |  - `O aluno ${nome} com ${idade} anos tirou a nota ${nota}` -- neste comando, você constrói a frase dentro das duas crases invertidas fazendo uso do ${nome de sua variável}
34 | 
35 |  - Formatando strings:
36 |  var s = 'Javascript'
37 |  s.lenght -- quantas caracteres a string tem
38 |  s.toUpperCase() -- tudo para maiúscula
39 |  s.toLowerCase -- tudo para minúscula
40 | 
41 |  - document.write('Algum texto') --  este comando exibe a mensagem no documento do texto e não mais no prompt da janela. Para entender melhor vá até a pasta aula06 e no arquivo ex004.html
42 | 
43 |  
44 |  Operadores (parte1) - curso JS #07
45 |  5 + 2 = 7 -- SOMA
46 |  5 -2 = 3 -- SUBTRAÇAO
47 |  5 * 2 = 10 -- MULTIPLICAÇAO
48 |  5 / 2 = 2.5 -- DIVISAO
49 |  5 % 2 = 1 -- RESTO DA DIVISAO
50 |  5 ** 2 = 25 -- POTENCIAÇAO
51 | 
52 |  - Ordem de precedência dos operadores aritméticos: 
53 |  1 . ()
54 |  2. **
55 |  3. * / %
56 |  4. + -
57 | 
58 | 
59 |  - Simplificando:
60 |  n = n + 4 ------- n +=4
61 |  n = n - 4 ------- n -=4
62 |  n = n * 4 ------- n *=4
63 |  n = n / 4 ------- n /=4
64 |  n = n ** 4 ------- n **=4
65 |  n = n % 4 ------- n %=4
66 | 
67 | 
68 | 
69 |  Operadores (parte 2) - curso JS #08
70 | 
71 |  - IDENTIDADE DE OPERADORES RELACIONAIS:
72 |  5 == 5 --- true
73 |  5 == '5' -- true
74 |  5 === '5' --- false, os três sinais de iguais comparam tanto o valor como o tipo, enquanto os dois sinais testam apenas os valores
75 |  5 === 5 --- true dnv 
76 | 
77 |  - PRECEDÊNCIA DOS OPERADORES LOGICOS:
78 |  Primeiro o "!"
79 |  Depois o "&&"
80 |  E por último o "||"
81 | 
82 |  - OPERADORES TERNÁRIOS: 
83 |  ? e : em uma mesma expressão
84 |  Sintaxe: teste ? true : false
85 |  Exemplo: media >= 7.0?"Aprovado":"Reprovado"
86 | 
87 | 
88 |  Introdução ao DOM - curso JS #09
89 |  - TAGS PARA SELECIONAR DO HTML PARA JS:
90 |  por marca: getElementsByTagName('nome da tag')[indíce da tag]
91 |  por ID: getElementById('nome do id')
92 |  por nome: getElementsByName('nome do elemento')[indíce do nome ]
93 |  por classe: getElementsByClassName('nome da classe')


--------------------------------------------------------------------------------
/aula04/ex001.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Primeiro Programa</title>
 7 |     <style>
 8 |         body{
 9 |             background-color: rgb(120, 120, 165);
10 |         }
11 |     </style>
12 | </head>
13 | <body>
14 |     <h1>Olá, mundo</h1>
15 |     <p>
16 |         Já me livrei da maldição
17 |     </p>
18 | 
19 |     <script>
20 |         window.alert('Minha primeira mensagem');
21 |         window.confirm('Está gostando de JS?');
22 |         window.prompt('Qual é o seu nome?');
23 |     </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/aula06/ex002.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Primeiro Programa</title>
 7 |     <style>
 8 |         body{
 9 |             background-color: rgb(120, 120, 165);
10 |         }
11 |     </style>
12 | </head>
13 | <body>
14 |     <h1>Olá, mundo</h1>
15 |     <p>
16 |         Já me livrei da maldição
17 |     </p>
18 | 
19 |     <script>
20 |         var nome = window.prompt('Qual é o seu nome?');
21 |         window.alert('É um grande prazer te conhecer, ' + nome + '!'); // o sinal de + neste caso serve para concatenar
22 |     </script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/aula06/ex003.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Primeiro Programa</title>
 7 |     <style>
 8 |         body{
 9 |             background-color: rgb(120, 120, 165);
10 |         }
11 |     </style>
12 | </head>
13 | <body>
14 |     <h1>Olá, mundo</h1>
15 |     <p>
16 |         Já me livrei da maldição
17 |     </p>
18 | 
19 |     <script>
20 |        var n1 = Number(window.prompt('Digite um número: ')); // não é necessário usar parseInt ou parseFloat, apenas o Number já resolve
21 |        var n2 = Number(window.prompt('Digite outro número: ')); // não é necessário usar parseInt ou parseFloat, apenas o Number já resolve
22 |        var s = n1 + n2;
23 |        window.alert(`A soma entre ${n1} e ${n2} é igual a ${s}`); // para entender este comando vá até o README 
24 | 
25 |        // (number + number) para adição
26 |        // (string + string) para concatenação
27 |     </script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/aula06/ex004.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <style>
 9 |     body{
10 |         font: normal 20pt arial;
11 |     }
12 | </style>
13 | <body>
14 |     
15 |     <script>
16 |         var nome = window.prompt('Qual é o seu nome?');
17 |         document.write(`Olá ${nome}. Seu nome tem ${nome.length} letras <br/>`); // este comando exibirá a mensagem no corpo do documento e não mais na janelinha do prompt
18 |         document.write(`Olá ${nome}. Seu nome em maiúsculas fica ${nome.toUpperCase()} <br/>`); // exibira o nome tudo em letra maiúscula
19 |         document.write(`Olá ${nome}. Seu nome em minúsculas fica ${nome.toLowerCase()} <br/>`);
20 |     </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/aula09/ex005.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 |     <style>
 8 |         body {
 9 |             background: rgb(29, 112, 138);
10 |             color: white;
11 |             font: normal 18pt arial;
12 |         }
13 |     </style>
14 | </head>
15 | <body>
16 |     <h1>Iniciando os estudos com DOM</h1>
17 |     <p>Aqui vai o resultado</p>
18 |     <p>Aprendendo a usar o <strong>DOM</strong></p>
19 |     <div id="msg">clique em mim</div>
20 | 
21 |     <script>
22 |         var corpo = window.document.body;
23 |         corpo.style.background = 'black'; // mudará a cor do fundo para preto
24 |         var p1 = window.document.getElementsByTagName('p')[0]; // seleciona por tag, neste caso a tag p e o 0 se refere à primeira tag p apenas
25 |         window.document.write('Está escrito assim: ' + p1.innerText); // exibe novamente a primeira tag p
26 |         p1.style.color = 'blue'; // o texto escrito da primeira tag p se tornará azul
27 | 
28 |         var d = window.document.getElementById('msg');
29 |         d.style.background = 'green';
30 |         d.innerHTML = 'Olá!'; // mudará a mensagem de cima por essa
31 |     </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/aula10/ex006.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Eventos DOM</title>
 7 | 
 8 |     <style>
 9 |         div#area{
10 |             font: normal 20pt arial;
11 |             background: green;
12 |             color: white;
13 |             width: 200px;
14 |             height: 200px;
15 |             line-height: 200px;
16 |             text-align: center;
17 |         }
18 |     </style>
19 | </head>
20 | <body>
21 |     <div id="area">
22 |         Clique aqui
23 |     </div>
24 | 
25 |     <script>
26 |         var area = window.document.getElementById('area');
27 |         area.addEventListener('click', clicar);
28 |         area.addEventListener('mouseenter', entrar);
29 |         area.addEventListener('mouseout', saiu);
30 |         
31 |         function clicar() {
32 |             area.innerText = 'Clicou!';
33 |             area.style.background = 'red';
34 |         }
35 |         function entrar() {
36 |             area.innerText = 'Entrou!';
37 |             area.style.background = 'blue';
38 |         }
39 |         function saiu() {
40 |             area.innerText = 'Saiu!';
41 |             area.style.background = 'green';
42 |         }
43 |     </script>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/aula10/ex007.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Somando números</title>
 7 | 
 8 |     <style>
 9 |         body{
10 |             font: normal 18pt arial;
11 |         }
12 |         input{
13 |             width: 100px;
14 |             font: normal 18pt arial;
15 |         }
16 |         div#res{
17 |             margin-top: 20px;
18 |         }
19 |     </style>
20 | </head>
21 | <body>
22 |     <h1>Somando valores</h1>
23 |     <input type="number" name="txtn1" id="txtn1">
24 |     <input type="number" name="txtn2" id="txtn2">
25 |     <input type="button" value="Somar" onclick="somar()">
26 |     <div id="res">Resultado</div>
27 | 
28 |     <script>
29 |         function somar() {
30 |             var tn1 = window.document.getElementById('txtn1');
31 |             var tn2 = window.document.getElementById('txtn2');
32 |             var n1 = Number(tn1.value);
33 |             var n2 = Number(tn2.value);
34 |             var s = n1 + n2;
35 |             var res = window.document.getElementById('res');
36 |             res.innerHTML = `A soma entre ${n1} e ${n2} é igual a ${s}`;
37 |         }
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/exercicios/anotacoes.md:
--------------------------------------------------------------------------------
1 | Exercícios para fixação
2 | 
3 | Link dos exercícios: https://gustavoguanabara.github.io/javascript/exercicios/


--------------------------------------------------------------------------------
/exercicios/exercicio1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Exercicio 1 do PDF</title>
 7 | </head>
 8 | <body>
 9 |     <h1>Primeiro Javascript</h1>
10 | </body>
11 | 
12 | <script>
13 |     window.alert('Olá, Mundo!!!')
14 | </script>
15 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio10.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Ações</title>
 7 | 
 8 |     <style>
 9 |         @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
10 | 
11 | body { font: 12pt Arial; }
12 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;}
13 | button { font-size: 12pt; padding: 30px; }
14 |     </style>
15 | </head>
16 | <body>
17 |     <h1>Javascript Externo</h1>
18 |     <button onclick="acao1()">Ação 1</button>
19 |     <button onclick="acao2()">Ação 2</button>
20 |     <button onclick="acao3()">Ação 3</button>
21 |     <button onclick="acao4()">Ação 4</button>
22 | 
23 |     <section id="saida">
24 |         <p>Aqui vou registrar suas ações com os botões acima</p>
25 |     </section>
26 | 
27 |     <script>
28 |         let resp = window.document.getElementById('saida')
29 | // Lembre-se que toda variável declarada aqui fora possui escopo global. Veja mais sobre escopo no seu material em PDF, na aula 07.
30 | 
31 | function acao1() {
32 |     resp.innerHTML += '<p>Clicou no primeiro botão</p>'
33 | }
34 | 
35 | function acao2() {
36 |     resp.innerHTML += '<p>Clicou no segundo botão</p>'
37 | }
38 | 
39 | function acao3() {
40 |     resp.innerHTML += '<p>Clicou no terceiro botão</p>'
41 | }
42 | 
43 | function acao4() {
44 |     resp.innerHTML += '<p>Clicou no quarto botão</p>'
45 | }
46 |     </script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Exercício 2 do PDF</title>
 7 | </head>
 8 | <body>
 9 |     <h1>Interagindo com o botão</h1>
10 |     <button onclick="clicou()">Clica em mim!</button>
11 | </body>
12 | 
13 | <script>
14 |     function clicou() {
15 |         window.alert('Você clicou no botão!');
16 |     }
17 | </script>
18 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Exercício 3 do PDF</title>
 7 | </head>
 8 | <body>
 9 |     <h1>Trabalhando com dados v1.0</h1>
10 | 
11 |     <button onclick="clicou()">Clique para começar</button>
12 | </body>
13 | 
14 | <script>
15 |     function clicou() {
16 |       var nome = window.prompt('Qual é o seu nome?');
17 |       document.write(`Olá ${nome}, é um prazer te conhecer!`)
18 |     }
19 | </script>
20 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | 
 8 |     <style>
 9 |          div#area{
10 |             font: normal 20pt arial;
11 |             background: green;
12 |             color: white;
13 |             width: 400px;
14 |             height: 200px;
15 |             line-height: 200px;
16 |             text-align: center;
17 |         }
18 |         div#exibir{
19 |             font: normal 20pt arial;
20 |             color: black;
21 |         }
22 |     </style>
23 | </head>
24 | <body>
25 |     <h1>Trabalhando com dados v2.0</h1>
26 |     <div id="area" onclick="clicou()">
27 |         Clique aqui para começar
28 |     </div>
29 | 
30 |     <div id="exibir">
31 |         Aqui irá aparecer o resultado
32 |     </div>
33 | 
34 |     <script>
35 |         function clicou() {
36 |             var clicar = window.prompt('Qual é o seu nome?');
37 |             var d = document.getElementById('exibir');
38 |         d.innerText = 'Olá ' + clicar + '! É um grande prazer te conhecer!'
39 |         }
40 |     </script>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Exercício 5</title>
 7 | 
 8 |     <style>
 9 |         
10 |         body { font: 12pt Arial; }
11 |         button { font-size: 12pt; padding: 30px;  }
12 |     
13 |     </style>
14 | </head>
15 | <body>
16 |     <button id="clique" onclick="clicar()">Clique aqui para calcular!</button>
17 |     <div id="exibir">
18 |         O resultado vem aqui...
19 |     </div>
20 | 
21 |     <script>
22 |         function clicar() {
23 |             var n1 = Number(window.prompt('Digite um número: '));
24 |             var dobro = n1 * 2;
25 |             var dividir = n1 / 2;
26 |             var d = document.getElementById('exibir');
27 |             d.innerHTML = 'O dobro de ' + n1 + ' é ' + dobro + ' e a metade de ' + n1 + ' é ' + dividir;
28 |         }
29 |     </script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Exercício 6</title>
 7 | 
 8 |     <style>
 9 |         
10 |         body { font: 12pt Arial; }
11 |         button { font-size: 12pt; padding: 30px;  }
12 | 
13 |         div#exibir{
14 |             margin-top: 2%;
15 |         }
16 |     </style>
17 | </head>
18 | <body>
19 |     <h1>Somando números</h1>
20 |     <button id="somar" onclick="soma()">Iniciar a soma</button>
21 |     <div id="exibir">A soma aparecerá aqui...</div>
22 | 
23 |     <script>
24 |         function soma() {
25 |             var n1 = Number(window.prompt('Digite um número: '));
26 |             var n2 = Number(window.prompt('Digite um número: '));
27 |             var somando = n1 + n2;
28 |             var d = document.getElementById('exibir');
29 |             d.innerHTML = 'A soma entre ' + n1 + ' e ' + n2 + ' é igual a ' + somando;
30 |         }
31 |     </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Calcular média do aluno</title>
 7 | 
 8 |     <style>
 9 |         
10 |         body { font: 12pt Arial; }
11 |         button { font-size: 12pt; padding: 30px;  }
12 | 
13 |         div#exibir{
14 |             margin-top: 2%;
15 |         }
16 |     </style>
17 | </head>
18 | <body>
19 |     <h1>Média do aluno v1.0</h1>
20 | 
21 |     <button id="media" onclick="calcular()">Calcular a média</button>
22 | 
23 |     <div id="exibir">A média aparecerá aqui...</div>
24 | 
25 |     <script>
26 |         function calcular() {
27 |             var nome = window.prompt('Qual é o nome do aluno?');
28 |             var n1 = Number(window.prompt('Qual é a primeira nota de ' + nome));
29 |             var n2 = Number(window.prompt('Qual é a segunda nota de ' + nome));
30 |             var mediaAluno = (n1 + n2) / 2;
31 |             var res = document.getElementById('exibir');
32 |             res.innerHTML = `<p>Calculando a média final de <mark>${nome}</mark>.</p>`
33 |             res.innerHTML += `<p>As notas obtidas foram <mark>${n1} e ${n2}</mark>.</p>` // O += é necessário, pois indica um pedido de "mantenha a frase anterior, adicionando essa outra frase". Se não fosse ele, a linha anterior seria apagada.
34 |             res.innerHTML += `<p>A média final será <mark>${mediaAluno}</mark>.</p>`
35 |         }
36 |     </script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | 
 8 |     <style>
 9 |         
10 |         body { font: 12pt Arial; }
11 |         button { font-size: 12pt; padding: 30px;  }
12 | 
13 |         div#exibir{
14 |             margin-top: 2%;
15 |         }
16 |     </style>
17 | </head>
18 | <body>
19 |     <h1>Vários cálculos em JS</h1>
20 | 
21 |     <button id="calcular()" onclick="calculos()">Clique para calcular</button>
22 | 
23 |     <div id="exibir">
24 |         O resultado vem aqui...
25 |     </div>
26 | 
27 |     <script>
28 |         function calculos() {
29 |             var numero = Number(window.prompt('Digite um número: '));
30 |             var numeroAbsoluto = Math.abs(numero); // este comando calculará o valor absoluto do número escolhido no prompt
31 |             var parteInteira = Math.trunc(numero); // este comando calculará a parte inteira mais próximo de um número com casas decimais
32 |             var numeroProximo = Math.round(numero); // este comando calculará o número mais próximo de um número com casas decimais
33 |             var raizQuadrada = Math.sqrt(numero); // este comando calculará a raiz quadrada do número escolhido pelo usuário
34 |             var raizCubica = Math.cbrt(numero); // calculará a raiz cúbica
35 |             var potenciaQuadrada = Math.pow(numero, 2); // calculará a potência do número elevado ao quadrado
36 |             var potenciaCubica = Math.pow(numero, 3); // calculará o número elevado ao cubo
37 |             var res = document.getElementById('exibir');
38 |             res.innerHTML = `<p>O número a ser analisado será o <b>${numero}</b>.</p>`
39 |             res.innerHTML += `<p>O seu valor absoluto é <b>${numeroAbsoluto}</b>.</p>`
40 |             res.innerHTML += `<p>A sua parte inteira é <b>${parteInteira}</b>.</p>`
41 |             res.innerHTML += `<p>O valor inteiro mais próximo é <b>${numeroProximo}</b>.</p>`
42 |             res.innerHTML += `<p>Sua raiz quadrada é <b>${raizQuadrada}</b>.</p>`
43 |             res.innerHTML += `<p>Sua raiz cúbica é <b>${raizCubica}</b>.</p>`
44 |             res.innerHTML += `<p>Sua potência el é <b>${raizCubica}</b>.</p>`
45 |             res.innerHTML += `<p>O valor de ${numero}<sup>2</sup> é <b>${potenciaQuadrada}</b>.</p>`
46 |             res.innerHTML += `<p>O valor de ${numero}<sup>3</sup> é <b>${potenciaCubica}</b>.</p>`
47 |         }
48 |     </script>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/exercicios/exercicio9.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Contador de Cliques</title>
 7 | 
 8 |     <style>
 9 |         @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
10 | 
11 | body { font: 12pt Arial; }
12 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;}
13 | button { font-size: 12pt; padding: 30px; }
14 |     </style>
15 | </head>
16 | <body>
17 |     <h1>Contador de cliques</h1>
18 |     <button onclick="contar()">Clique em mim</button>
19 |     <button onclick="zerar()">Resetar o contador</button>
20 |     <section id="resultado">
21 |         <p>O contador está com <mark>0</mark> cliques.</p>
22 |     </section>
23 | 
24 |     <script>
25 |         let contador = 0;
26 |         let resposta = document.querySelector('section#resultado');
27 | // As variáveis declaradas aqui fora são consideradas GLOBAIS e funcionam dentro do programa inteiro
28 | 
29 | function contar() {
30 |     contador ++ // É a mesma coisa que contador = contador + 1
31 |     resposta.innerHTML = `<p>O contador está com <mark>${contador}</mark> cliques.</p>`
32 | }
33 | 
34 | function zerar() {
35 |     contador = 0
36 |     resposta.innerHTML = null
37 | }
38 |     </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------