├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── _config.yml ├── aulas-pdf ├── 01 - História do JavaScript.pdf ├── 02 - Como funciona o JS.pdf ├── 03 - Primeiros passos com JS.pdf ├── 04 - Interações básicas com o usuário.pdf ├── 05 - Interações com a página.pdf ├── 06 - Fazendo umas contas.pdf └── 07 - Ações, variáveis e dinamismo.pdf ├── desafios ├── d001 │ └── desafio-mensagens.pdf ├── d002 │ └── desafio-boas-vindas.pdf ├── d003 │ └── desafio-antes-depois.pdf ├── d004 │ └── desafio-troco.pdf ├── d005 │ └── desafio-conversor-medidas.pdf ├── d006 │ └── desafio-conversor-temperatura.pdf ├── d007 │ └── desafio-conversor-monetario.pdf ├── d008 │ └── desafio-desconto.pdf ├── d009 │ └── desafio-reajuste.pdf ├── d010 │ └── desafio-bhaskara.pdf ├── d011 │ └── desafio-ano-bissexto.pdf ├── d012 │ └── desafio-preco-mudou.pdf └── d013 │ └── desafio-situacao-aluno.pdf ├── exercicios ├── ex001 │ └── index.html ├── ex002 │ └── index.html ├── ex003 │ └── index.html ├── ex004 │ └── index.html ├── ex005 │ └── index.html ├── ex006 │ └── index.html ├── ex007 │ └── index.html ├── ex008 │ └── index.html ├── ex009 │ ├── index.html │ ├── scripts.js │ └── style.css ├── ex010 │ ├── acoes.js │ ├── index.html │ └── style.css ├── ex011 │ ├── index.html │ ├── media.js │ └── style.css ├── ex012 │ ├── index.html │ ├── parimpar.js │ └── style.css ├── ex013 │ ├── index.html │ ├── maior.js │ └── style.css ├── ex014 │ ├── functions.js │ ├── index.html │ └── style.css ├── ex015 │ ├── index.html │ ├── relogio.js │ └── style.css ├── ex016 │ ├── idade.js │ ├── index.html │ └── style.css ├── ex017 │ ├── index.html │ ├── sorteio.js │ └── style.css ├── ex018 │ ├── adivinha.js │ ├── index.html │ └── style.css ├── ex019 │ ├── index.html │ ├── script.js │ └── style.css ├── ex020 │ ├── index.html │ ├── script.js │ └── style.css ├── ex021 │ ├── index.html │ ├── script.js │ └── style.css ├── ex022 │ ├── index.html │ ├── script.js │ └── style.css ├── ex023 │ ├── index.html │ ├── script.js │ └── style.css ├── ex024 │ ├── index.html │ ├── script.js │ └── style.css ├── ex025 │ ├── index.html │ ├── script.js │ └── style.css ├── ex026 │ ├── index.html │ ├── script.js │ └── style.css ├── ex027 │ ├── index.html │ ├── script.js │ └── style.css ├── ex028 │ ├── index.html │ ├── script.js │ └── style.css ├── imagens │ ├── pdf-icon.png │ └── visual-studio-code.png ├── index.html └── style.css └── imagens └── mascote.png /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Gustavo Guanabara 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Curso de JavaScript 4 | 5 | Material público para o ensino básico de JavaScript para alunos iniciantes. Acesse o material em PDF, analise o código disponibilizado para cada exercício e veja-os funcionando em execução direta via repositório GitHub. 6 | 7 | * [Acesse os PDFs das aulas clicando aqui](https://github.com/gustavoguanabara/javascript/tree/master/aulas-pdf) 8 | * [Código disponível para os exercícios](https://github.com/gustavoguanabara/javascript/tree/master/exercicios) 9 | * [Execute os exercícios aqui](https://gustavoguanabara.github.io/javascript/exercicios/index.html) 10 | * [Resolva os desafios de programação JS aqui](https://github.com/gustavoguanabara/javascript/tree/master/desafios) 11 | 12 | ## Direitos de uso 13 | 14 | Você tem todo o direito de usar esse material para seu próprio aprendizado. Professores também podem ter acesso a todo o conteúdo e usá-los com seus alunos. Porém todos o que usarem esse material - seja para qual for a finalidade - deverão manter a referência ao material original, criado e disponibilizado pelo Prof. Gustavo Guanabara. Este conteúdo não poderá ser utilizado em nenhuma hipótese para ser replicada - integral ou parcialmente - por autores/ editoras/ instituições de ensino para criar livros ou apostilas, com finalidades de obter ganho financeiro com ele. 15 | 16 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate 2 | 3 | -------------------------------------------------------------------------------- /aulas-pdf/01 - História do JavaScript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/aulas-pdf/01 - História do JavaScript.pdf -------------------------------------------------------------------------------- /aulas-pdf/02 - Como funciona o JS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/aulas-pdf/02 - Como funciona o JS.pdf -------------------------------------------------------------------------------- /aulas-pdf/03 - Primeiros passos com JS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/aulas-pdf/03 - Primeiros passos com JS.pdf -------------------------------------------------------------------------------- /aulas-pdf/04 - Interações básicas com o usuário.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/aulas-pdf/04 - Interações básicas com o usuário.pdf -------------------------------------------------------------------------------- /aulas-pdf/05 - Interações com a página.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/aulas-pdf/05 - Interações com a página.pdf -------------------------------------------------------------------------------- /aulas-pdf/06 - Fazendo umas contas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/aulas-pdf/06 - Fazendo umas contas.pdf -------------------------------------------------------------------------------- /aulas-pdf/07 - Ações, variáveis e dinamismo.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/aulas-pdf/07 - Ações, variáveis e dinamismo.pdf -------------------------------------------------------------------------------- /desafios/d001/desafio-mensagens.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d001/desafio-mensagens.pdf -------------------------------------------------------------------------------- /desafios/d002/desafio-boas-vindas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d002/desafio-boas-vindas.pdf -------------------------------------------------------------------------------- /desafios/d003/desafio-antes-depois.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d003/desafio-antes-depois.pdf -------------------------------------------------------------------------------- /desafios/d004/desafio-troco.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d004/desafio-troco.pdf -------------------------------------------------------------------------------- /desafios/d005/desafio-conversor-medidas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d005/desafio-conversor-medidas.pdf -------------------------------------------------------------------------------- /desafios/d006/desafio-conversor-temperatura.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d006/desafio-conversor-temperatura.pdf -------------------------------------------------------------------------------- /desafios/d007/desafio-conversor-monetario.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d007/desafio-conversor-monetario.pdf -------------------------------------------------------------------------------- /desafios/d008/desafio-desconto.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d008/desafio-desconto.pdf -------------------------------------------------------------------------------- /desafios/d009/desafio-reajuste.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d009/desafio-reajuste.pdf -------------------------------------------------------------------------------- /desafios/d010/desafio-bhaskara.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d010/desafio-bhaskara.pdf -------------------------------------------------------------------------------- /desafios/d011/desafio-ano-bissexto.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d011/desafio-ano-bissexto.pdf -------------------------------------------------------------------------------- /desafios/d012/desafio-preco-mudou.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d012/desafio-preco-mudou.pdf -------------------------------------------------------------------------------- /desafios/d013/desafio-situacao-aluno.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/desafios/d013/desafio-situacao-aluno.pdf -------------------------------------------------------------------------------- /exercicios/ex001/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Primeiro JS 24 | 25 | 26 |

Primeiro JavaScript

27 | 30 | 31 | -------------------------------------------------------------------------------- /exercicios/ex002/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Interação JS 23 | 27 | 28 | 29 |

Interagindo com um botão

30 | 31 | 36 | 37 | -------------------------------------------------------------------------------- /exercicios/ex003/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Dados com JS 23 | 27 | 28 | 29 |

Trabalhando com dados v1.0

30 | 31 | 37 | 38 | -------------------------------------------------------------------------------- /exercicios/ex004/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Dados com JS 23 | 27 | 28 | 29 |

Trabalhando com Dados v2.0

30 | 31 |
32 |

Aqui vai aparecer o resultado...

33 |
34 | 43 | 44 | -------------------------------------------------------------------------------- /exercicios/ex005/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Números com JS 23 | 27 | 28 | 29 |

Trabalhando com números

30 | 31 |
32 |

O resultado vem aqui...

33 |
34 | 35 | 46 | 47 | -------------------------------------------------------------------------------- /exercicios/ex006/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Números com JS 23 | 27 | 28 | 29 |

Somando dois números

30 | 31 |
32 |

O resultado vem aqui...

33 |
34 | 35 | 46 | 47 | -------------------------------------------------------------------------------- /exercicios/ex007/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Números com JS 23 | 27 | 28 | 29 |

Média do aluno v1.0

30 | 31 |
32 |

O resultado vai aparecer aqui...

33 |
34 | 35 | 49 | 50 | -------------------------------------------------------------------------------- /exercicios/ex008/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Números com JS 23 | 27 | 28 | 29 |

Vários cálculos em JS

30 | 31 |
32 |

O resultado vai aparecer aqui...

33 |
34 | 35 | 50 | 51 | -------------------------------------------------------------------------------- /exercicios/ex009/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Contador de Cliques 23 | 24 | 25 | 26 |

Contador de cliques

27 | 28 | 29 |
30 |

O contador está com 0 cliques.

31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /exercicios/ex009/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | let contador = 0 18 | let res = document.querySelector('section#result') 19 | // As variáveis declaradas aqui fora são consideradas GLOBAIS e funcionam dentro do programa inteiro 20 | 21 | function contar() { 22 | contador ++ // É a mesma coisa que contador = contador + 1 23 | res.innerHTML = `

O contador está com ${contador} cliques.

` 24 | } 25 | 26 | function zerar() { 27 | contador = 0 28 | res.innerHTML = null 29 | } -------------------------------------------------------------------------------- /exercicios/ex009/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex010/acoes.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | let resp = window.document.getElementById('saida') 18 | // Lembre-se que toda variável declarada aqui fora possui escopo global. Veja mais sobre escopo no seu material em PDF, na aula 07. 19 | 20 | function acao1() { 21 | resp.innerHTML += '

Clicou no primeiro botão

' 22 | } 23 | 24 | function acao2() { 25 | resp.innerHTML += '

Clicou no segundo botão

' 26 | } 27 | 28 | function acao3() { 29 | resp.innerHTML += '

Clicou no terceiro botão

' 30 | } 31 | 32 | function acao4() { 33 | resp.innerHTML += '

Clicou no quarto botão

' 34 | } -------------------------------------------------------------------------------- /exercicios/ex010/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | JavaScript externo 23 | 24 | 25 | 26 |

JavaScript Externo

27 | 28 | 29 | 30 | 31 |
32 |

Aqui vou registrar suas ações com os botões acima.

33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /exercicios/ex010/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex011/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Números com JS 23 | 24 | 25 | 26 |

Média do aluno v2.0

27 | 28 |
29 |

O resultado vai aparecer aqui...

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex011/media.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function media() { 18 | let nom = window.prompt('Qual é o nome do aluno?') 19 | let n1 = Number(window.prompt(`Qual foi a primeira nota de ${nom}?`)) 20 | let n2 = Number(window.prompt(`Além de ${n1}, qual foi a outra nota de ${nom}?`)) 21 | med = (n1 + n2)/2 22 | 23 | let msg // cria uma variável e deixa ela vazia 24 | if (med >= 6) { // Se por acaso a média foi 6.0 ou mais... 25 | msg = 'Meus parabéns!' 26 | } else { // senão... 27 | msg = 'Estude um pouco mais!' 28 | } 29 | // O if é uma estrutura que cria uma CONDIÇÃO, que executa um bloco de comandos ou outro, dependendo do resultado de um teste lógico. 30 | 31 | let res = document.getElementById('situacao') 32 | res.innerHTML = `

Calculando a média final de ${nom}.

` 33 | res.innerHTML += `

As notas obtidas foram ${n1} e ${n2}.

` 34 | res.innerHTML += `

A média final será ${med}.

` 35 | res.innerHTML += `

A mensagem que temos é: ${msg}

` // Note que eu usei até um pouco de CSS pra fazer a mensagem ficar vermelha ;) 36 | } -------------------------------------------------------------------------------- /exercicios/ex011/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex012/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | O número é par ou ímpar? 23 | 24 | 25 | 26 |

É par ou é ímpar?

27 | 28 |
29 |

O resultado vai aparecer aqui...

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex012/parimpar.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function teste() { 18 | let num = Number(window.prompt('Digite um número: ')) 19 | let tipo 20 | if (num % 2 == 0) { 21 | tipo = 'PAR' 22 | } else { 23 | tipo = 'ÍMPAR' 24 | } 25 | 26 | let res = document.querySelector('section#result') 27 | res.innerHTML = `

O número ${num} que foi digitado é ${tipo}!

` 28 | } -------------------------------------------------------------------------------- /exercicios/ex012/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex013/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Maior valor 23 | 24 | 25 | 26 |

Maior valor

27 | 28 |
29 |

O resultado vai aparecer aqui...

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex013/maior.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function maior() { 18 | let n1 = Number(window.prompt('Digite um número: ')) 19 | let n2 = Number(window.prompt('Digite outro número: ')) 20 | 21 | let res = document.querySelector('section#saida') 22 | if (n1 > n2) { 23 | res.innerHTML = `

Analisando os valores ${n1} e ${n2}, o maior valor é ${n1}

` 24 | } else if (n1 < n2) { 25 | res.innerHTML = `

Analisando os valores ${n1} e ${n2}, o maior valor é ${n2}

` 26 | } else { 27 | res.innerHTML = `

Analisando os valores ${n1} e ${n2}, ambos são IGUAIS

` 28 | } 29 | } -------------------------------------------------------------------------------- /exercicios/ex013/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex014/functions.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function info() { 18 | let agora = new Date 19 | let saida = document.getElementById('saida') 20 | saida.innerHTML = `

O que eu recebi do sistema foi ${agora}

` 21 | } -------------------------------------------------------------------------------- /exercicios/ex014/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Interagindo com o sistema 23 | 24 | 25 | 26 |

Interagindo com o sistema

27 | 28 |
29 |

Aqui vai aparecer algo...

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex014/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex015/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Analisando Data e Hora 23 | 24 | 25 | 26 |

Analisando data e hora do Sistema

27 | 28 |
29 |

Aqui vai aparecer algo...

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex015/relogio.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function info() { 18 | let meses = new Array('Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez') 19 | let semana = new Array ('Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb') 20 | let agora = new Date 21 | let saida = document.getElementById('saida') 22 | let dia = agora.getDate() 23 | let mes = agora.getMonth() // Jan = 0 | Fev = 1 | Mar = 2 e assim vai... 24 | let ano = agora.getFullYear() 25 | let sem = agora.getDay() // Dom = 0 | Seg = 1 | Ter = 2 e assim vai... 26 | let hora = agora.getHours() 27 | let min = agora.getMinutes() 28 | let seg = agora.getSeconds() 29 | saida.innerHTML = `

Dia: ${dia}

` 30 | saida.innerHTML += `

Mês: ${meses[mes]}

` 31 | saida.innerHTML += `

Ano: ${ano}

` 32 | saida.innerHTML += `

Dia da semana: ${semana[sem]}

` 33 | saida.innerHTML += `

Hora: ${hora}

` 34 | saida.innerHTML += `

Minutos: ${min}

` 35 | saida.innerHTML += `

Segundos: ${seg}

` 36 | } -------------------------------------------------------------------------------- /exercicios/ex015/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex016/idade.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function calcidade() { 18 | let agora = new Date 19 | let ano = agora.getFullYear() 20 | 21 | let nasc = Number(window.prompt('Em que ano você nasceu?')) 22 | let idade = ano - nasc 23 | 24 | let saida = document.getElementById('saida') 25 | saida.innerHTML = `

Quem nasceu em ${nasc} vai completar ${idade} anos em ${ano}.

` 26 | } -------------------------------------------------------------------------------- /exercicios/ex016/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Calculando a idade 23 | 24 | 25 | 26 |

Calculando a idade

27 | 28 |
29 |

Aqui vai aparecer algo...

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex016/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex017/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Gerador de números 23 | 24 | 25 | 26 |

Gerador de números

27 | 28 | 29 |
30 |

Cada vez que você apertar o botão acima, eu penso em um número entre 1 e 100.

31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /exercicios/ex017/sorteio.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function gerar() { 18 | let min = 1 19 | let max = 100 20 | let dif = max - min 21 | let aleatorio = Math.random() // Essa função gera um valor Real aleatório entre 0 e 1 22 | let num = min + Math.trunc(dif * aleatorio) 23 | 24 | let res = document.querySelector('section#result') 25 | res.innerHTML += `

Acabei de pensar no número ${num}!

` 26 | } 27 | 28 | function limpar() { // Essa é a funcionalidade do outro botão, pra limpar tudo 29 | let res = document.querySelector('section#result') 30 | res.innerHTML = null // Vai esvaziar a section toda 31 | } -------------------------------------------------------------------------------- /exercicios/ex017/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex018/adivinha.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | // Todas as variáveis declaradas aqui em cima - fora das funções - são consideradas GLOBAIS e funcionam dentro de qualquer outra função! 18 | let res = document.querySelector('section#result') 19 | let computador = 0 20 | let jogador = 0 21 | 22 | function sortear() { 23 | let min = 1 // As variáveis declaradas aqui dentro são LOCAIS, e só funcionam dentro da função onde foram declaradas 24 | let max = 100 25 | let dif = max - min 26 | let aleatorio = Math.random() 27 | computador = min + Math.trunc(dif * aleatorio) 28 | } 29 | 30 | function jogar() { 31 | jogador = Number(window.prompt('Qual é o seu palpite?')) 32 | if (jogador < computador) { 33 | res.innerHTML += `

Você falou ${jogador}. Meu número é MAIOR!

` 34 | } else if (jogador > computador) { 35 | res.innerHTML += `

Você falou ${jogador}. Meu número é MENOR!

` 36 | } else if (jogador == computador) { 37 | res.innerHTML += `

PARABÉNS! Você acertou! Eu tinha sorteado o valor ${computador}!

` 38 | document.getElementById('botao').style.visibility = 'hidden' 39 | } 40 | } -------------------------------------------------------------------------------- /exercicios/ex018/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Jogo em JS 23 | 24 | 25 | 26 |

Tente adivinhar meu número

27 | 28 |
29 |

Já pensei em um valor entre 1 e 100...

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex018/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } -------------------------------------------------------------------------------- /exercicios/ex019/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Múltiplas ações 23 | 24 | 25 | 26 |

Múltiplas ações

27 | 28 |
29 |

Clique no botão acima para começar.

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex019/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function calc() { 18 | let n1 = Number(prompt('Primeiro valor:')) 19 | let n2 = Number(prompt('Segundo valor:')) 20 | let op = Number(prompt(`Valores informados: ${n1} e ${n2}. \nO que vamos fazer? \n[1] Somar \n[2] Subtrair \n[3] Multiplicar \n[4] Dividir`)) 21 | 22 | let saida = document.getElementById('saida') 23 | saida.innerHTML = `

Calculando...

` 24 | switch (op) { // A estrutura switch basicamente permite você testar valores dentro de uma variável ou expressão. Ela é compatível apenas com números inteiros e strings 25 | case 1: 26 | saida.innerHTML += `

${n1} + ${n2} = ${n1+n2}

` 27 | break // O break é obrigatório em cada case. Se não for colocado, acontecerá a execução de vários comandos indesejados de outros cases 28 | case 2: 29 | saida.innerHTML += `

${n1} - ${n2} = ${n1-n2}

` 30 | break 31 | case 3: 32 | saida.innerHTML += `

${n1} x ${n2} = ${n1*n2}

` 33 | break 34 | case 4: 35 | saida.innerHTML += `

${n1} / ${n2} = ${(n1/n2).toLocaleString('pt-BR')}

` // O método toLocaleString() é muito útil para mostrar números de forma mais compatível com o que usamos aqui no Brasil. 36 | break 37 | default: // Se o usuário não digitar nenhum dos valores acima, vai cair aqui 38 | saida.innerHTML += `

OPÇÃO INVÁLIDA! Você digitou ${n1} e ${n2}, mas não sei o que fazer com eles.

` 39 | break 40 | } 41 | } -------------------------------------------------------------------------------- /exercicios/ex019/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } 6 | -------------------------------------------------------------------------------- /exercicios/ex020/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Estações no Brasil 23 | 24 | 25 | 26 |

Descubra a estação do ano

27 | 28 |
29 |

Clique no botão acima para informar o mês.

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex020/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function estação() { // Sim, é possível usar acentuação 18 | let mês = prompt('Digite o mês em extenso (ex: Setembro)') 19 | let saída = document.querySelector('section#saida') 20 | let estação 21 | switch (mês.toUpperCase()) { // O método toUpperCase() transforma todas as letras de uma string para maiúsculas 22 | case 'JANEIRO': case 'FEVEREIRO': case 'MARÇO': // Podemos testar múltiplos casos em uma mesma linha, desse jeito 23 | estação = 'INVERNO' 24 | break // Nunca se esqueça do break!!! 25 | case 'ABRIL': case 'MAIO': case 'JUNHO': 26 | estação = 'PRIMAVERA' 27 | break 28 | case 'JULHO': case 'AGOSTO': case 'SETEMBRO': 29 | estação = 'VERÃO' 30 | break 31 | case 'OUTUBRO': case 'NOVEMBRO': case 'DEZEMBRO': 32 | estação = 'OUTONO' 33 | break 34 | default: 35 | estação = 'INDEFINIDA' 36 | break 37 | } 38 | saída.innerHTML = `

No mês de ${mês}, estamos na estação ${estação}.

` 39 | } 40 | 41 | // Sugestão de melhoria: refaça esse programa para que ele aceite tanto o mês por extenso quanto o número do mês. -------------------------------------------------------------------------------- /exercicios/ex020/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } 6 | -------------------------------------------------------------------------------- /exercicios/ex021/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Contando de 1 a 10 23 | 24 | 25 | 26 |

Contando de 1 a 10

27 | 28 |
29 |

Aperte o botão acima para contar

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex021/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function contar() { 18 | let saida = document.getElementById('saida') 19 | 20 | saida.innerHTML += `

Contando de 1 até 10

` 21 | 22 | let cont = 1 23 | while (cont <= 10) { 24 | saida.innerHTML += ` ${cont} 👉` 25 | cont ++ // Corresponde a cont = cont + 1 26 | } 27 | saida.innerHTML += ` 🏁` 28 | } -------------------------------------------------------------------------------- /exercicios/ex021/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } 6 | -------------------------------------------------------------------------------- /exercicios/ex022/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Contando de 1 a 10 23 | 24 | 25 | 26 |

Contando de 1 a 10 (marcando os pares)

27 | 28 |
29 |

Aperte o botão acima para contar

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex022/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function contar() { 18 | let saida = document.getElementById('saida') 19 | 20 | saida.innerHTML += `

Contando de 1 até 10, marcando os pares

` 21 | 22 | let cont = 1 23 | while (cont <= 10) { 24 | if (cont % 2 == 0) { 25 | saida.innerHTML += ` ${cont} 👉` 26 | } else { 27 | saida.innerHTML += ` ${cont} 👉` 28 | } 29 | cont ++ // Corresponde a cont = cont + 1 30 | } 31 | saida.innerHTML += ` 🏁` 32 | } -------------------------------------------------------------------------------- /exercicios/ex022/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } 6 | -------------------------------------------------------------------------------- /exercicios/ex023/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Contando de 1 a 10 23 | 24 | 25 | 26 |

Contando de 1 a 10 (mostrando só os pares)

27 | 28 |
29 |

Aperte o botão acima para contar

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex023/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function contar() { 18 | let saida = document.getElementById('saida') 19 | 20 | saida.innerHTML += `

Números pares de 1 até 10

` 21 | let cont = 2 22 | while (cont <= 10) { 23 | saida.innerHTML += ` ${cont} 👉` 24 | cont += 2 // Corresponde a cont = cont + 2 25 | } 26 | saida.innerHTML += ` 🏁` 27 | } -------------------------------------------------------------------------------- /exercicios/ex023/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } 6 | -------------------------------------------------------------------------------- /exercicios/ex024/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Contando de 10 a 1 23 | 24 | 25 | 26 |

Contagem regressiva de 10 a 1

27 | 28 |
29 |

Aperte o botão acima para contar

30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /exercicios/ex024/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function contar() { 18 | let saida = document.getElementById('saida') 19 | 20 | saida.innerHTML += `

Contagem Regressiva de 10 a 1

` 21 | let cont = 10 22 | while (cont >= 1) { 23 | saida.innerHTML += ` ${cont} 👉` 24 | cont -- // Corresponde a cont = cont - 1 25 | } 26 | saida.innerHTML += ` 🏁` 27 | } -------------------------------------------------------------------------------- /exercicios/ex024/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | button { font-size: 12pt; padding: 30px; } 6 | -------------------------------------------------------------------------------- /exercicios/ex025/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Dados de Formulário 23 | 24 | 25 | 26 |

Contando de 0 até um número positivo qualquer

27 |

Escolha o limite final para a contagem a partir do 0 (digite apenas números postivos)

28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |

Preencha os dados acima e aperte o botão.

41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /exercicios/ex025/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function contagem() { 18 | let saida = document.getElementById('saida') 19 | let num = Number(document.getElementById('fnum').value) 20 | saida.innerHTML += `

Contando de 0 até ${num}

` 21 | let cont = 0 22 | while (cont <= num) { 23 | saida.innerHTML += ` ${cont} 👉` 24 | cont ++ 25 | } 26 | saida.innerHTML += ` 🏁` 27 | } -------------------------------------------------------------------------------- /exercicios/ex025/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | input[type=number] { font-size: 12pt; } 6 | input[type=submit] { 7 | background-color: green; 8 | color: white; 9 | font-size: 12pt; 10 | padding: 5px; 11 | } -------------------------------------------------------------------------------- /exercicios/ex026/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Contagem inteligente 23 | 24 | 25 | 26 |

Contagem "inteligente"

27 |

Use qualquer valor nas caixas, simule contagens crescentes e regressivas. Use também valores negativos.

28 |
29 |
30 |

31 | 32 | 33 |

34 |

35 | 36 | 37 |

38 |

39 | 40 |

41 |
42 |
43 |
44 |

Preencha os dados acima e aperte o botão.

45 |
46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /exercicios/ex026/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function contagem() { 18 | let saida = document.getElementById('saida') 19 | let n1 = Number(document.getElementById('fn1').value) 20 | let n2 = Number(document.getElementById('fn2').value) 21 | let cont 22 | 23 | saida.innerHTML += `

Contando de ${n1} até ${n2}

` 24 | if (n1= n2) { 33 | saida.innerHTML += ` ${cont} 👉` 34 | cont -- 35 | } 36 | } else { 37 | saida.innerHTML += `Não é possível contar, pois os números são iguais` 38 | } 39 | 40 | saida.innerHTML += ` 🏁` 41 | } -------------------------------------------------------------------------------- /exercicios/ex026/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | input[type=number] { font-size: 12pt; } 6 | input[type=submit] { 7 | background-color: green; 8 | color: white; 9 | font-size: 12pt; 10 | padding: 5px; 11 | } -------------------------------------------------------------------------------- /exercicios/ex027/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Tabuada 23 | 24 | 25 | 26 |

Super Tabuada

27 |

Escreva um número na caixa a seguir e te mostrarei a tabuada dele.

28 |
29 |
30 |

31 | 32 | 33 | 34 |

35 |
36 |
37 |
38 |

Preencha os dados acima e aperte o botão.

39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /exercicios/ex027/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function tabuada() { 18 | let saida = document.getElementById('saida') 19 | let n = Number(document.getElementById('fnum').value) 20 | 21 | saida.innerHTML = `

Tabuada de ${n}

` 22 | let c = 1 23 | while (c <= 10) { 24 | saida.innerHTML += `${n} x ${c} = ${n * c}
` 25 | c ++ 26 | } 27 | } -------------------------------------------------------------------------------- /exercicios/ex027/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | input[type=number] { font-size: 12pt; } 6 | input[type=submit] { 7 | background-color: green; 8 | color: white; 9 | font-size: 12pt; 10 | padding: 5px; 11 | } -------------------------------------------------------------------------------- /exercicios/ex028/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Fatorial 23 | 24 | 25 | 26 |

Cálculo de Fatorial

27 |

Escreva um número (entre 1 e 21) na caixa a seguir e te mostrarei o Fatorial dele.

28 |
29 |
30 |

31 | 32 | 33 | 34 | 35 |

36 |
37 |
38 |
39 |

Preencha os dados acima e aperte o botão.

40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /exercicios/ex028/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | ## IMPORTANTE ## 3 | Você tem todo o direito de usar esse material 4 | para seu próprio aprendizado. Professores também 5 | podem ter acesso a todo o conteúdo e usá-los com 6 | seus alunos. Porém todos os que usarem esse 7 | material - seja para qual for a finalidade - deverão 8 | manter a referência ao material original, disponível 9 | em https://github.com/gustavoguanabara/javascript. Este 10 | material não poderá ser utilizado em nenhuma hipótese 11 | para ser replicada - integral ou parcialmente - 12 | por autores/editoras/instituições para criar livros 13 | ou apostilas, com finalidades de obter ganho financeiro 14 | com ele. 15 | */ 16 | 17 | function fatorial() { 18 | let saida = document.getElementById('saida') 19 | let n = Number(document.getElementById('fnum').value) 20 | 21 | saida.innerHTML += `

Calculando ${n}!

` 22 | let c = n 23 | let fat = 1 24 | while (c > 1) { 25 | saida.innerHTML += `${c} x ` 26 | fat *= c // Correspondente ao cálculo fat = fat * c 27 | c -- 28 | } 29 | saida.innerHTML += `1 = ${fat.toLocaleString('pt-BR')}` 30 | // Usei o toLocaleString() na linha acima apenas para aparecerem os separadores de milhar/milhões/etc... 31 | } -------------------------------------------------------------------------------- /exercicios/ex028/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); 2 | 3 | body { font: 12pt Arial; } 4 | h1, h2, h3 { font-family: 'Pacifico', cursive; font-weight: normal;} 5 | input[type=number] { font-size: 12pt; } 6 | input[type=submit] { 7 | background-color: green; 8 | color: white; 9 | font-size: 12pt; 10 | padding: 5px; 11 | } -------------------------------------------------------------------------------- /exercicios/imagens/pdf-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/exercicios/imagens/pdf-icon.png -------------------------------------------------------------------------------- /exercicios/imagens/visual-studio-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/exercicios/imagens/visual-studio-code.png -------------------------------------------------------------------------------- /exercicios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercícios de JavaScript 7 | 8 | 9 | 10 |
11 |

Exercícios de JavaScript

12 | 13 | 17 | 18 | 22 | 23 |

📁 Nível 1: JavaScript básico

24 | 36 |

📁 Nível 2: Condições em JavaScript

37 | 49 |

📁 Nível 3: Repetições em JavaScript

50 | 61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /exercicios/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(69, 69, 69); 3 | font: 13pt Arial; 4 | } 5 | 6 | main { 7 | background-color: white; 8 | width: 500px; 9 | padding: 20px; 10 | margin: auto; 11 | border-radius: 10px; 12 | box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.529); 13 | } 14 | 15 | h1 { 16 | color: darkgoldenrod; 17 | } 18 | 19 | h2 { 20 | color: rgb(125, 92, 8); 21 | } 22 | 23 | aside { 24 | display: block; 25 | font-size: 10pt; 26 | text-align: justify; 27 | background-color: rgb(222, 222, 222); 28 | padding: 10px; 29 | border-radius: 10px; 30 | margin-bottom: 10px; 31 | } 32 | 33 | aside img { 34 | width: 60px; 35 | display: block; 36 | float: left; 37 | margin-right: 10px; 38 | } 39 | 40 | a, a:visited { 41 | color: rgb(34, 34, 34); 42 | font-weight: bolder; 43 | } 44 | 45 | a:hover { 46 | color: darkgoldenrod; 47 | text-decoration: none; 48 | } -------------------------------------------------------------------------------- /imagens/mascote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Codechief09/js-exam/9af7df49c2d0473a27b4f40bc46fccffe72368c3/imagens/mascote.png --------------------------------------------------------------------------------