├── .gitignore ├── README.md ├── media ├── daytime.gif ├── modelo-divertimentos.JPG ├── node_terminal.png ├── node_vscode.png └── precedencia_operadores.JPG ├── modulo_a ├── 4_criando_seu_primeiro_script │ └── divertimento_01.html ├── 6_tratamento_de_dados │ ├── divertimento_02.html │ ├── divertimento_03.html │ └── divertimento_04.html └── README.md ├── modulo_b └── README.md ├── modulo_c ├── 10_eventos_DOM │ ├── divertimento_06.html │ └── divertimento_07.html ├── 9_introducao_ao_DOM │ └── divertimento_05.html └── README.md ├── modulo_d ├── 11_Condicoes_Parte_Um │ ├── divertimento_08.js │ ├── divertimento_09.js │ ├── divertimento_10.html │ └── homework_01.html ├── 12_Condicoes_Parte_Dois │ ├── divertimento_11.js │ ├── divertimento_12.js │ └── divertimento_13.js ├── Divertimentos │ ├── divertimento_1_modelo │ │ ├── modelo.html │ │ ├── script.js │ │ └── style.css │ ├── divertimento_2 │ │ ├── afternoon.png │ │ ├── daytime.html │ │ ├── morning.png │ │ ├── night.png │ │ ├── script.js │ │ └── style.css │ └── divertimento_3 │ │ ├── adult-female.jpg │ │ ├── adult-male.jpg │ │ ├── baby-female.jpg │ │ ├── baby-male.jpg │ │ ├── elder-female.jpg │ │ ├── elder-male.jpg │ │ ├── gif.gif │ │ ├── script.js │ │ ├── style.css │ │ ├── verificador_de_idade.html │ │ ├── young-female.jpg │ │ └── young-male.jpg └── README.md ├── modulo_e ├── 13_repeticoes_parte_um │ └── ambiente.js ├── 14_repeticoes_parte_dois │ └── ambiente.js ├── README.md └── divertimentos │ ├── divertimento_5 │ ├── script.js │ ├── style.css │ └── vamos_contar.html │ ├── divertimento_6 │ ├── script.js │ ├── style.css │ └── tabuada.html │ └── divertimento_modelo │ ├── modelo.html │ ├── script.js │ └── style.css └── modulo_f ├── 15_variaveis_compostas ├── ambiente.js └── vetor_na_tela.js ├── 16_funcoes ├── funcao01.js ├── funcao02.js ├── funcao03.js ├── funcao04.js └── funcao05.js ├── 17_proximos_passos ├── objetoUm.js └── proximos_passos.md ├── README.md └── divertimentos ├── divertimento_7 ├── analisador.html ├── script.js └── style.css └── divertimento_modelo ├── modelo.html ├── script.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # README do curso de fundamentos do JavaScript (Gustavo Guanabara) 2 | 3 | ![Screenshot_2020-08-04 Próximos Passos - Curso JavaScript #17 - YouTube](https://user-images.githubusercontent.com/24235344/89306581-71970980-d646-11ea-808e-fe0f3141638d.png) 4 | 5 | # Requisitos 6 | 7 | - Um navegador (de preferência, o Chrome, que é o navegador usado pelo Gustavo) 8 | - Um editor de textos (de preferência, o VSCode, que é o editor usado pelo Gustavo) 9 | - O Node.js 10 | - Extensão [Watch in Chrome](https://marketplace.visualstudio.com/items?itemName=sneezry.watch-in-chrome) (VSCode) e [VS Code Watch in Chrome](https://chrome.google.com/webstore/detail/vs-code-watch-in-chrome/mmbnmofkiadlcapnmgnkheoadkpeefii) (Chrome) 11 | - Eu sugiro usar a extensão [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) (VSCode), pois faz a mesma coisa e não requer que você instale uma extensão no seu navegador ou que sequer esteja no Chrome 12 | - Extensão [Node Exec](https://marketplace.visualstudio.com/items?itemName=miramac.vscode-exec-node) (VSCode) 13 | 14 | # Módulo A: Conhecento o JavaScript 15 | 16 | - Aula 1: [O que o JavaScript é capaz de fazer](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_a#aula-1-o-que-o-javascript-%C3%A9-capaz-de-fazer) 17 | - Aula 2: [Como chegamos até aqui](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_a#aula-2-como-chegamos-at%C3%A9-aqui) 18 | - Aula 3: [Dando os primeiros passos](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_a#aula-3-dando-os-primeiros-passos) 19 | - Aula 4: [Criando seu primeiro script](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_a#aula-4-criando-seu-primeiro-script) 20 | 21 | # Módulo B: Comandos básicos do JavaScript 22 | 23 | * Aula 5: [Variáveis e tipos primitivos](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_b#aula-5-vari%C3%A1veis-e-tipos-primitivos) 24 | * Aula 6: [Tratamento de dados](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_b#aula-5-vari%C3%A1veis-e-tipos-primitivos) 25 | * Aula 7: [Operadores (Parte 1/2)](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_b#aula-7-operadores-parte-12) 26 | * Aula 8: [Operadores (Parte 2/2)](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_b#aula-8-operadores-parte-22) 27 | 28 | # Módulo C: Entendendo o DOM 29 | 30 | * Aula 9: [Introdução ao DOM](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_c#aula-9-introdu%C3%A7%C3%A3o-ao-dom) 31 | * Aula 10: [Eventos DOM](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_c#aula-10-eventos-dom) 32 | 33 | # Módulo D: Condições em JavaScript 34 | 35 | * Aula 11: [Condições (Parte 1/2)](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_d#aula-11-condi%C3%A7%C3%B5es-parte-12) 36 | * Aula 12: [Condições (Parte 2/2)](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_d#aula-12-condi%C3%A7%C3%B5es-parte-22) 37 | * Exercícios JavaScript ([Parte 1/7](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_d#aula-12-exerc%C3%ADcios-javascript-parte-18)): modelo 38 | * Exercícios JavaScript ([Parte 2/7](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_d#exerc%C3%ADcios-javascript-parte-18) 39 | * Exercícios JavaScript ([Parte 3/7](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_d#exerc%C3%ADcios-javascript-parte-38)) 40 | 41 | # Módulo E: Repetições em JavaScript 42 | 43 | * Aula 13: Repetições ([Parte 1/2](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_e#aula-13-repeti%C3%A7%C3%B5es-parte-1)) 44 | * Aula 14: Repetições ([Parte 2/2](https://github.com/guiemi-learning-center/curso-javascript-guanabara/tree/master/modulo_e#aula-14-repeti%C3%A7%C3%B5es-parte-2)) 45 | * Exercícios JavaScript ([Parte 4/7](https://github.com/guiemi-learning-center/Curso-JavaScript-Guanabara/blob/master/modulo_e/divertimentos/divertimento_5/vamos_contar.html)): vamos contar 46 | * Exercícios JavaScript ([Parte 5/7](https://github.com/guiemi-learning-center/Curso-JavaScript-Guanabara/blob/master/modulo_e/divertimentos/divertimento_6/tabuada.html)): tabuada 47 | 48 | # Módulo F: Avançando os estudos em JavaScript 49 | 50 | * Aula 15: [Variáveis compostas](https://github.com/guiemi-learning-center/Curso-JavaScript-Guanabara/tree/master/modulo_f#aula-15-vari%C3%A1veis-compostas) 51 | * Aula 16: [Funções](https://github.com/guiemi-learning-center/Curso-JavaScript-Guanabara/tree/master/modulo_f#aula-16-fun%C3%A7%C3%B5es) 52 | * Exercícios JavaScript ([Parte 7/7](https://github.com/guiemi-learning-center/Curso-JavaScript-Guanabara/blob/master/modulo_f/divertimentos/divertimento_7/analisador.html)): analisador 53 | * Aula 17: [Próximos passos](https://github.com/guiemi-learning-center/Curso-JavaScript-Guanabara/blob/master/modulo_f/17_proximos_passos/proximos_passos.md) 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /media/daytime.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/media/daytime.gif -------------------------------------------------------------------------------- /media/modelo-divertimentos.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/media/modelo-divertimentos.JPG -------------------------------------------------------------------------------- /media/node_terminal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/media/node_terminal.png -------------------------------------------------------------------------------- /media/node_vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/media/node_vscode.png -------------------------------------------------------------------------------- /media/precedencia_operadores.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/media/precedencia_operadores.JPG -------------------------------------------------------------------------------- /modulo_a/4_criando_seu_primeiro_script/divertimento_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Meu primeiro programa 8 | 18 | 19 | 20 |

Olá, mundo!

21 |

Já me livrei da maldição!

22 | 27 | 28 | -------------------------------------------------------------------------------- /modulo_a/6_tratamento_de_dados/divertimento_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Meu primeiro programa 8 | 18 | 19 | 20 |

Olá, mundo!

21 |

Já me livrei da maldição!

22 | 26 | 27 | -------------------------------------------------------------------------------- /modulo_a/6_tratamento_de_dados/divertimento_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Meu primeiro programa 8 | 18 | 19 | 20 |

Olá, mundo!

21 |

Já me livrei da maldição!

22 | 28 | 29 | -------------------------------------------------------------------------------- /modulo_a/6_tratamento_de_dados/divertimento_04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 13 | 14 | 15 | 16 | 22 | 23 | -------------------------------------------------------------------------------- /modulo_a/README.md: -------------------------------------------------------------------------------- 1 | # Módulo A: Conhecendo o JavaScript (Aulas 1-4) 2 | 3 | # Aula 1: O que o JavaScript é capaz de fazer 4 | 5 | - Client x Server 6 | - Website é composto por basicamente 3 tecnologias: 7 | * Jornalista (**HTML**): escreve texto, usa imagens, cataloga vídeos e imagens etc. 8 | * Designer (**CSS**): pega as mídias e torna-se bonitas, organizando-as em formatos diferentes 9 | * Programador (**JavaScript**): trata da engenharia da entrega do jornal 10 | - O HTML organiza os textos, o conteúdo 11 | - O CSS pega o texto e o organiza para torná-lo mais agradável 12 | - O JS faz as interações, como uma legenda em uma imagem, amplia uma imagem ao passar o mouse em cima dela etc. Ele inclusive modifica elementos escritos em HTML e CSS 13 | - Quem utiliza o JS? 14 | 15 | * Google, YouTube, LinkedIn, Netflix etc. 16 | 17 | 18 | 19 | # Aula 2: como chegamos até aqui 20 | 21 | Uma (interessantíssima) aula com um breve histórico do JavaScript (doravante **JS**) — e da própria web em si. 22 | 23 | # Aula 3: Dando os primeiros passos 24 | 25 | ## Como aprender? 26 | 27 | * 💻 Assistindo aos vídeos das aulas 28 | * ⌨️ Escrevendo código 29 | * 📒 Lendo livros sobre JS e outros materiais de referência 30 | * Livro: [JavaScript: O Guia Definitivo (David Flanagan)](https://www.amazon.com.br/JavaScript-Guia-Definitivo-David-Flanagan/dp/856583719X) 31 | * Livro: [JavaScript: Guia do Programador (Maurício Samy Silva)](https://novatec.com.br/livros/javascript-guia-programador/) 32 | * Livro: [JavaScript Eloquente - 2ª edição (Marijn Haverbeke)](https://github.com/braziljs/eloquente-javascript) 33 | * Guia de referência: [Referência JavaScript (Mozilla)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference) 34 | * Guia de referência: [ECMAScript® Language Specification](https://www.ecma-international.org/ecma-262/9.0/index.html#Title) 35 | * 📘 Fazendo anotações (como esta) das aulas 36 | * 👨‍👩‍👧‍👦 Interagindo com outras pessoas 37 | * Estudar em conjunto 38 | * Tirar dúvidas com outras pessoas 39 | * 🖥 Desenvolver projetos próprios 40 | * Aplicar a ferramenta de programação para solucionar problemas reais do dia a dia 41 | 42 | ## Dúvidas comuns de quem está começando a programar 43 | 44 | ### 👨🏿‍Será que eu sou velho demais ou novo demais para começar a aprender a programar? 45 | 46 | Não existe idade mínima e máxima para aprender. Cada um aprende no seu ritmo. Além disso, não ouça pessoas que tentarem te convencer de que você está velho demais ou novo demais. 47 | 48 | ### 👩🏾‍💻 Programação não é 'coisa de homem'? 49 | 50 | * Bom, pra começar a primeira linguagem de programação foi desenvolvida por uma matemática chamada [Ada Lovelace](https://pt.wikipedia.org/wiki/Ada_Lovelace). Historicamente, os primeiros profissionais da computação foram, na verdade, mulheres (Fonte: [Wikipedia](https://en.wikipedia.org/wiki/Women_in_computing)). Todos podem aprender a programar, independentemente de fatores como sexo, gênero, orientação sexual ou etnia. 51 | 52 | ### 🏡 Eu preciso morar em uma cidade grande? 53 | 54 | Com a internet, o fator lugar deixa de ser tão relevante, pois todos em teoria têm acesso aos conteúdos "*core*", necessários ao aprendizado, disponibilizados online. 55 | 56 | ### 🤓 Eu preciso ser 'nerd' para gostar de programar? 57 | 58 | Não. Você só precisa querer aprender a programar. Ninguém é *especial* só porque sabe programar. 59 | 60 | ### 🇺🇸 É obrigatório ser bom em matemática e/ou ser bom em inglês para aprender a programar? 61 | 62 | Há hoje ótimos materiais em português para quem está começando. E não é necessário ter aptidão para matemática para aprender, basta **querer** aprender. 63 | 64 | ### ♟ Aprender lógica de programação é perda de tempo? 65 | 66 | Assim como, no filme Karate Kid, o personagem principal é colocado para aprender a pintar cerca para poder aprender Karatê, na programação, quando você aprende lógica, você aprende a moldar o seu *mindset*, o que tornará o seu processo de aprendizado mais assertivo. 67 | 68 | ### 💵 Todo programador ganha muito dinheiro? 69 | 70 | Programadores iniciantes não vão ganhar muito dinheiro, nem o melhor emprego. Quando você tiver experiência, o seu salário não será mais seu objetivo, ele será sua consequência. 71 | 72 | ### 🏆 Qual a melhor linguagem de programação que existe? 73 | 74 | A resposta é: nenhuma. Linguagens de programação cumprem propósitos específicos. Não seja o tipo de pessoa que defende uma linguagem em detrimento das demais. 75 | 76 | ### 📒 É mais fácil aprender JS através de frameworks? 77 | 78 | Não. O ECMAScript/JavaScript é o ponto de partida de todo mundo que está querendo programar. Não tente começar a partir da complexidade. 79 | 80 | Literalmente **todo mundo** que você conhece um dia começou com um "*Hello, world!*". 81 | 82 | ## Requerimentos de Software 83 | 84 | * Um computador 85 | * Um browser (Google Chrome, Firefox, Safari etc.) 86 | * Um editor de código (Visual Studio Code, Sublime Texto, Atom etc.) 87 | * Node.js (*sem etc.*) 88 | 89 | # Aula 4: Criando seu primeiro script 90 | 91 | Aprendemos onde a tag fica no HTML e onde o fica. Aprendemos também a usar o `window.alert()`, o `window.confirm()` e o `window.prompt()`. -------------------------------------------------------------------------------- /modulo_b/README.md: -------------------------------------------------------------------------------- 1 | # Módulo B (aulas 5 - 8) 2 | 3 | # Aula 5: Variáveis e tipos primitivos 4 | 5 | ## Adicionando comentários em JS: 6 | 7 | Para comentar uma linha, utilize barras duplas: 8 | 9 | ````javascript 10 | var testVar = "Variável de teste." // isto é um comentário em JS. 11 | ```` 12 | 13 | Para comentar duas ou mais linhas, utilize **barra + asterisco** para abrir e **asterisco + barra** para fechar: 14 | 15 | ````javascript 16 | /* Isto é um comentário em uma linha. 17 | 18 | JAVASCRIPTO EH TOPSTER <3 19 | 20 | E isto é a linha final de um comentário. */ 21 | 22 | var testVar = "Isto é um código fora da área de comentários."; 23 | ```` 24 | 25 | ## Variáveis 26 | 27 | * Um único sinal de igual (=) nunca é chamado de 'igual', sempre de '**recebe**'. 28 | * Se vocie atribui `Null` a uma variável, tudo dentro dela é destruído. 29 | 30 | **Curiosidade**: No JavaScript moderno, além de utilizar a palavra **var**, também podemos usar a palavra **let** para definir variáveis. 31 | 32 | ````javascript 33 | var n1 = 5 34 | var n2 = 8.5 35 | var n3 = 15 36 | 37 | var s1 = "JavaScript" 38 | var s2 = `Curso em vídeo` 39 | var s3 = 'Guanabara' 40 | ```` 41 | 42 | ### Identificadores 43 | 44 | As variáveis se chamam identificadores, e eles possuem regras de formação. 45 | 46 | * Variáveis podem começar com **letra**, **$** (cifrão) ou **_** (*underscore*). 47 | * Não podem começar com **números** 48 | * É possível usar **letras** ou **números** 49 | * É possível utilizar **acentos** e **símbolos** 50 | * Não podem conter **espaços** 51 | * Não podem ser **palavras reservadas** (uma variável chamada `var`, por exemplo.) 52 | 53 | ### Node.js 54 | 55 | #### Shell do Node.js no terminal: 56 | 57 | ![Shell do Node no Terminal](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/media/node_terminal.png) 58 | 59 | #### Shell do Node.js no terminal do VSCode: 60 | 61 | ![Shell do Node no VSCode](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/media/node_vscode.png) 62 | 63 | ### Dicas na hora de nomear identificadores 64 | 65 | * **Maiúsculas** e **minúsculas** fazem diferença 66 | * Tente escolher **nomes coerentes** para as variáveis 67 | * Evite se tornar um **programador alfabeto** ou um **programador contador** 68 | * O programador alfabeto é aquele que nomeia todas as variáveis como `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h` ou `x`, `y`, `z` 69 | * O programador contador é aquele que nomeia todas as variáveis como `n1`, `n2`, `n3`, `n4`, `n5` 70 | 71 | ## Tipos primitivos 72 | 73 | O JS trata diferentemente tipos diferentes de dados. Há três deles que são especiais e conhecidos como *tipos primitivos primordiais*, — `number`, `string` e `boolean` —, pois deles são derivados outros tipos. Em JS, há uma série de outros tipos primitivos e alguns subtipos, derivados dos tipos primitivos. 74 | 75 | * Dentro de **number**, temos os subtipos: 76 | * Infinity 77 | * NaN (Not a Number) 78 | * **null** 79 | * **undefined** 80 | * O **object** também possui vários subtipos, dentre eles: 81 | * Array 82 | * **function** 83 | 84 | Usando o operador `tipeof` e passando para ele qualquer tipo, você pede para a linguagem checar para você com qual tipo ela está lidando: 85 | 86 | ````javascript 87 | > var n = 200 // atribuindo à variável n o número 200 88 | undefined 89 | > n // chamando a variável n 90 | 200 91 | > typeof n // pedindo o tipo de n 92 | 'number' 93 | > n = "DuckDuckGo" // atribuindo agora uma string à variável 94 | 'DuckDuckGo' 95 | > typeof n // checando se o tipo foi alterado 96 | 'string' 97 | > typeof 6 98 | 'number' 99 | > typeof 6.5 100 | 'number' 101 | > typeof "6.5" 102 | 'string' 103 | > typeof [] 104 | 'object' 105 | > typeof {} 106 | 'object' 107 | > typeof function(){} 108 | 'function' 109 | > typeof undefined 110 | 'undefined' 111 | > typeof NaN 112 | 'number' 113 | > typeof Infinity 114 | 'number' 115 | > typeof null 116 | 'object' 117 | 118 | ```` 119 | 120 | Um detalhe interessante é que o JS considera `null` um objeto. 121 | 122 | # Aula 6: Tratamento de dados 123 | 124 | * Esta aula fala principalmente sobre os tipos **number** e **string**. 125 | 126 | * Para printar no `alert()` uma variável juntamente com uma string, basta concatená-las usando o operador `+`: 127 | ```javascript 128 | var nome = window.prompt("Qual é o seu nome?") 129 | ``` 130 | Ou -- como eu gosto de fazer -- você pode usar um recurso chamado *string interpolation* (Interpolação de string): 131 | ```javascript 132 | window.alert("É um grande prazer te conhecer, " + nome) 133 | window.alert(`É um grande prazer te conhecer, ${nome}.`) 134 | ``` 135 | 136 | ## Conversão de string para Number 137 | 138 | Como o operador `+` serve tanto para soma quanto para concatenação, você precisa dizer ao JS qual tipo de ação você está requerindo desse operador, visto que, por exemplo, o `window.prompt` automaticamente converte o que recebe para **string**. Há várias maneiras, no JS, de se fazer a conversão de **string** para **number**: 139 | 140 | * `Number.parseInt(n)`: converte um número para um número **inteiro** 141 | * `Number.parseFloat(n)`: converte um número para um **float**/**real** 142 | * `Number()`: modo mais moderno de conversão, tanto para **inteiro** quanto para **float** 143 | 144 | ## Conversão para String 145 | 146 | * `String(n)` 147 | * `n.toString()` 148 | 149 | ## Outros métodos de String 150 | 151 | * `s.length` 152 | * `s.toUpperCase()` 153 | * `s.toLowerCase()` 154 | 155 | ## Outros métodos de Number 156 | 157 | * `n1.toFixed(n)` 158 | * Substituir ponto por vírgula em números decimais: `n1.toFixed(2).replace('.', ',')` 159 | 160 | * `n1.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})`: 161 | * --> R$ 1,545.50 162 | 163 | # Aula 7: Operadores (Parte 1/2) 164 | 165 | Os operadores que veremos no curso serão os operadores: **aritméticos**, de **atribuição**, **relacionais**, **lógicos ** e **ternário**. 166 | 167 | * Nesta aula, focaremos nos operadores **aritméticos** e nos operadores de **atribuição**. 168 | 169 | ## Operadores Aritméticos: 170 | 171 | * `+`: soma/concatenação 172 | * `-`: subtração 173 | * `*`: multiplicação 174 | * `/`: divisão real 175 | * `%`: módulo/resto 176 | * `**`: potenciação 177 | 178 | ## Operadores de atribuição 179 | 180 | * `var a = (5 + 3)` 181 | 182 | #### LEMBRETE: um cuidado com o qual sempre devemos tomar é com a precedência dos operadores ([PEMDAS](https://pt.khanacademy.org/math/pre-algebra/pre-algebra-arith-prop/pre-algebra-order-of-operations/v/more-complicated-order-of-operations-example)): 183 | 184 | * Ordem de precedência na programação: Parênteses **>** Potência **>** Multiplicação, Divisão, Módulo **>** Adição, Subtração 185 | 186 | ## Há também as **autoatribuições**: 187 | 188 | ```javascript 189 | var n = 3 190 | n = n + 4 191 | n = n - 5 192 | n = n * 4 193 | n = n / 2 194 | n = n ** 2 195 | n = n % 5 196 | ``` 197 | 198 | ### Simplificando as autoatribuições em JavaScript: 199 | 200 | ```javascript 201 | var n = 3 202 | n += 4 203 | n -= 5 204 | n *= 4 205 | n /= 2 206 | n %= 5 207 | ``` 208 | 209 | ### Simplificando ainda mais as autoatribuições em JavaScript usando incrementos e decrementos 210 | 211 | ```javascript 212 | var n = 3 213 | n++ 214 | n-- 215 | 216 | // ou 217 | 218 | ++n 219 | --n 220 | ``` 221 | 222 | # Aula 8: Operadores (Parte 2/2) 223 | 224 | Nesta aula, falaremos sobre **operadores relacionais**, **operadores lógicos** e sobre o **operador ternário**. 225 | 226 | ## Operadores Relacionais 227 | 228 | * Os operadores relacionais são: 229 | * `>` (maior) 230 | * `<` (menor) 231 | * `>=` (maior ou igual) 232 | * `<=` (menor ou igual) 233 | * `==`(igual) 234 | * `!=` (diferente) 235 | 236 | Note que: o resultado de expressões que utilizam operadores relacionais será sempre booleano (*true* ou *false*): 237 | 238 | ```javascript 239 | 5 > 2 240 | true 241 | 242 | 7 < 4 243 | false 244 | 245 | 8 >= 8 246 | true 247 | 248 | 9 <= 7 249 | false 250 | 251 | 5 == 5 252 | true 253 | 254 | 4 != 4 255 | false 256 | 257 | ``` 258 | 259 | ### Operadores de identidade 260 | 261 | Há também os operadores de identidade: 262 | 263 | ```javascript 264 | 5 == 5 // retorna true 265 | 5 == '5' // returna true 266 | ``` 267 | 268 | O operador de igualdade do JavaScript **não testa tipos**, então **'5'** continua sendo **5**. 269 | 270 | O operador de identidade é o "**===**", também chamado de **operador de igualdade restrita**: 271 | 272 | ```javascript 273 | 5 === '5' // retorna false, pois 5 é do tipo number e '5' é do tipo string. 274 | ``` 275 | 276 | ## Operadores Lógicos 277 | 278 | O JS possui 3 operadores lógicos: 279 | 280 | * A exclamação (`!`) significa **negação**; 281 | * Os dois &&s comerciais (`&&`) significam **conjunção** ou **e**; 282 | * Os dois pipes (`||`) significam **disjunção** ou **ou**. 283 | 284 | ### Negação (!) 285 | 286 | O operador de negação é **unário**, ou seja, ele só possui um único operando. 287 | 288 | ```javascript 289 | !true --> false 290 | !false -- true 291 | ``` 292 | 293 | ### Conjunção (&&) 294 | 295 | O operador de conjunção é **binário**, isto é, ele aceita dois operadores lógicos, um de cada lado. 296 | 297 | ```javascript 298 | true && true --> true 299 | true && false --> false 300 | false && true --> false 301 | false && false --> false 302 | ``` 303 | 304 | ### Disjunção (||) 305 | 306 | O operador de disjunção, assim como o de conjunção, também é **binário**. 307 | 308 | ```javascript 309 | true || true --> true 310 | true || false --> true 311 | false || true --> true 312 | false || false -- false 313 | ``` 314 | 315 | Exemplos: 316 | 317 | ```javascript 318 | var a = 5 319 | var b = 8 320 | a > b && b % 2 == 0 321 | false 322 | ``` 323 | 324 | O exemplo retorna *false* porque primeiro são feitos os **operadores aritméticos**, depois os **operadores relacionais** e depois os **operadores lógicos**: 325 | 326 | * `b % 2 == 0` é `true` 327 | * `a > b` é `false` 328 | * então `false && true` retorna `false` 329 | 330 | ```javascript 331 | var a = 5 332 | var b = 8 333 | a <= b || b / 2 == 2 334 | true 335 | ``` 336 | 337 | * `b / 2 == 2` retorna `false` 338 | * `a <= b` retorna `true` 339 | * então `true` || `false` retorna `true` 340 | 341 | ```javascript 342 | idade >= 15 && idade <= 17 // idade está entre 15 e 17? 343 | estado == "RJ" || estado == "SP" // o estado é RJ ou SP? 344 | salario > 1500 && sexo != "M" // o salário é acima de R$ 1.500,00 e não é homem? 345 | ``` 346 | 347 | **Importante**: se numa mesma expressão houver vários operadores lógicos, primeiro é computada a **negação**, depois a **conjunção** e depois a **disjunção**. 348 | 349 | ## Precedência de operadores 350 | 351 | ![precedencia_de_operadores](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/media/precedencia_operadores.JPG) 352 | 353 | ## Operador Ternário 354 | 355 | Ele é composto por dois símbolos, o `?` e o `:`, que aparecem na mesma operação. O nome dele é **ternário** porque ele é composto por três argumentos: 356 | 357 | ```javascript 358 | media >= 7.0? "Aprovado" : "Reprovado" 359 | ``` 360 | 361 | ```javascript 362 | var res = x % 2 == 0? 5: 9 363 | res 364 | 5 365 | 366 | // Eu achei isso MARAVILHOSO 367 | ``` 368 | 369 | ```javascript 370 | var idade = 19 371 | var r = idade >= 18? "Maior": "Menor" 372 | r 373 | 'Maior' 374 | 375 | // ADOREI o operador ternário do JS! 376 | ``` -------------------------------------------------------------------------------- /modulo_c/10_eventos_DOM/divertimento_06.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Eventos DOM 8 | 19 | 20 | 21 |
22 | Interaja... 23 |
24 | 25 | 47 | 48 | -------------------------------------------------------------------------------- /modulo_c/10_eventos_DOM/divertimento_07.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Somando números 9 | 10 | 25 | 26 | 27 | 28 | 29 |

Somando valores

30 | + 31 | 32 | 33 |
Resultado
34 | 35 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /modulo_c/9_introducao_ao_DOM/divertimento_05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document Object Model 8 | 15 | 16 | 17 |

Iniciando Estudos de DOM

18 |

Aqui vai o resultado

19 |

Aprendendo a usar o DOM em JavaScript

20 |
Clique em mim
21 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /modulo_c/README.md: -------------------------------------------------------------------------------- 1 | # Módulo C (aulas 9 - 10) 2 | 3 | # Aula 9: Introdução ao DOM 4 | 5 | DOM é um acrônimo para **Document Object Model**. É um conjunto de objetos que darão acesso aos componentes internos de um website. 6 | 7 | O DOM está estruturado em forma de árvore (tree structure) cujo ramo mais alto é o `window`: 8 | 9 | * `window` 10 | * `location` 11 | * `document` 12 | * `html` 13 | * `head` 14 | * `meta` 15 | * `title` 16 | * `body` 17 | * `h1` 18 | * `p` 19 | * `p` 20 | * `strong` 21 | * `div` 22 | * `history` 23 | 24 | ## Seleção de elementos 25 | 26 | Nesta aula, veremos 5 métodos de acesso a elementos: 27 | 28 | * por Marca (TagName) 29 | 30 | * `getElementsByTagName()` 31 | 32 | * por ID 33 | 34 | * `getElementById()` 35 | 36 | * por Nome 37 | 38 | * `getElementsByName()` 39 | 40 | * por Classe 41 | 42 | * `getElementsByClassName()` 43 | 44 | * por Seletor CSS 45 | 46 | * `querySelector()` 47 | * `querySelectorAll()` 48 | 49 | 50 | 51 | # Aula 10: Eventos DOM 52 | 53 | ## Exemplos de Eventos 54 | 55 | Há vários tipos de eventos de interação. Os mais comuns são os de mouse, tais como, por exemplo: 56 | 57 | * `mouseenter`: apontar o mouse dentro de um elemento 58 | * `mousemove`: mover o mouse dentro da área do elemento 59 | * `mousedown`: clicar e segurar o botão esquerdo do mouse no elemento 60 | * `mouseup`: soltar o botão esquerdo do mouse 61 | * `click`: clique normal dentro do elemento 62 | * `mouseout`: mover o mouse para fora do elemento 63 | 64 | ## Funções (ou funcionalidades) 65 | 66 | São um conjunto de códigos que só são executados quando um determinado evento ocorrer. 67 | 68 | Esses conjuntos são também chamados de blocos e são delimitados por chaves (`{}`). 69 | 70 | ```javascript 71 | function nomeDaAção(parâmetro) { 72 | // aqui fica o código da função. 73 | } 74 | ``` 75 | 76 | -------------------------------------------------------------------------------- /modulo_d/11_Condicoes_Parte_Um/divertimento_08.js: -------------------------------------------------------------------------------- 1 | var vel = 78.2 2 | console.log(`A velocidade do seu carro é ${vel}km/h!`) 3 | 4 | if (vel > 60) { // condição simples 5 | console.log(`ATENÇÃO: Você ultrapassou a velocidade permitida. MULTADO!`) 6 | } 7 | console.log(`Dirija sempre usando cinto de segurança.`) -------------------------------------------------------------------------------- /modulo_d/11_Condicoes_Parte_Um/divertimento_09.js: -------------------------------------------------------------------------------- 1 | var pais = "Brasil" 2 | 3 | console.log(`Vivendo em ${pais}`) 4 | 5 | if (pais == "Brasil") { 6 | console.log("Você é brasileiro") 7 | } else { 8 | console.log("Você é estrangeiro") 9 | } -------------------------------------------------------------------------------- /modulo_d/11_Condicoes_Parte_Um/divertimento_10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Sistema de Multas

11 | Velocidade do carro: Km/h 12 | 13 |
14 | 15 |
16 | 28 | 29 | -------------------------------------------------------------------------------- /modulo_d/11_Condicoes_Parte_Um/homework_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercício sobre países 8 | 9 | 23 | 24 | 25 | 26 |

Países: conferindo se você é estrangeiro

27 | Em qual país você nasceu? 28 | 29 | 30 |
31 | 32 | 45 | 46 | -------------------------------------------------------------------------------- /modulo_d/12_Condicoes_Parte_Dois/divertimento_11.js: -------------------------------------------------------------------------------- 1 | // Idade para votar 2 | 3 | var idade = 67 4 | console.log(`Você tem ${idade} anos.`) 5 | if (idade < 16) { 6 | console.log("Não vota.") 7 | } else if (idade < 18 || idade > 65) { 8 | console.log("Voto opcional.") 9 | } else { 10 | console.log("Voto obrigatório.") 11 | } 12 | -------------------------------------------------------------------------------- /modulo_d/12_Condicoes_Parte_Dois/divertimento_12.js: -------------------------------------------------------------------------------- 1 | // Bom dia, boa tarde, boa noite. 2 | 3 | var agora = new Date() 4 | var horas = agora.getHours() 5 | console.log(`Agora são exatamente ${horas} horas.`) 6 | 7 | if (horas < 12) { 8 | console.log("Bom dia") 9 | } else if (horas <= 18) { 10 | console.log("Boa tarde") 11 | } else { 12 | console.log("Boa noite") 13 | } 14 | -------------------------------------------------------------------------------- /modulo_d/12_Condicoes_Parte_Dois/divertimento_13.js: -------------------------------------------------------------------------------- 1 | // Switch 2 | 3 | var agora = new Date() 4 | var diaSem = agora.getDay() 5 | 6 | /* 7 | 0 = Domingo 8 | 1 = Segunda-feira 9 | 2 = Terça-feira 10 | 3 = Quarta-feira 11 | 4 = Quinta-feira 12 | 5 = Sexta-feira 13 | 6 = Sábado 14 | 15 | */ 16 | 17 | switch(diaSem) { 18 | case 0: 19 | console.log("Domingo") 20 | break 21 | case 1: 22 | console.log("Segunda-feira") 23 | break 24 | case 2: 25 | console.log("Terça-feira") 26 | break 27 | case 3: 28 | console.log("Quarta-feira") 29 | break 30 | case 4: 31 | console.log("Quinta-feira") 32 | break 33 | case 5: 34 | console.log("Sexta-feira") 35 | break 36 | case 6: 37 | console.log("Sábado") 38 | break 39 | default: 40 | console.log("Dia inválido!") 41 | break 42 | } 43 | -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_1_modelo/modelo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modelo de exercício 8 | 9 | 10 | 11 |
12 |

Título

13 |
14 |
15 |
16 | Testando... 17 |
18 |
19 |
20 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_1_modelo/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_1_modelo/script.js -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_1_modelo/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: cornflowerblue; 3 | font: normal 15pt Arial; 4 | 5 | } 6 | 7 | header { 8 | color: white; 9 | text-align: center; 10 | } 11 | 12 | section { 13 | background: white; 14 | border-radius: 10px; 15 | padding: 15px; 16 | width: 500px; 17 | margin: auto; 18 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); 19 | } 20 | 21 | footer { 22 | color: white; 23 | text-align: center; 24 | font-style: italic; 25 | } 26 | -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_2/afternoon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_2/afternoon.png -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_2/daytime.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hora do dia 8 | 9 | 10 | 11 |
12 |

Hora do dia

13 |
14 |
15 |
16 | Aqui vai aparecer a mensagem... 17 |
18 |
19 | Foto do dia 20 |
21 |
22 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_2/morning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_2/morning.png -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_2/night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_2/night.png -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_2/script.js: -------------------------------------------------------------------------------- 1 | function carregar() { 2 | var msg = window.document.getElementById("msg") 3 | var img = window.document.getElementById("imagem") 4 | 5 | var data = new Date() 6 | var hora = data.getHours() 7 | msg.innerHTML = `Agora são ${hora}h!` 8 | 9 | if(hora >= 0 && hora < 12) { 10 | // Bom dia 11 | img.src = "morning.png" 12 | document.body.style.background = "#be6f0a" 13 | } else if(hora >= 12 && hora <= 18) { 14 | // Boa tarde 15 | img.src = "afternoon.png" 16 | document.body.style.background = "#f6e7ea" 17 | } else { 18 | // Boa noite 19 | img.src = "night.png" 20 | document.body.style.background = "#023c4a" 21 | 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: cornflowerblue; 3 | font: normal 15pt Arial; 4 | 5 | } 6 | 7 | header { 8 | color: white; 9 | text-align: center; 10 | } 11 | 12 | section { 13 | background: white; 14 | border-radius: 10px; 15 | padding: 15px; 16 | width: 500px; 17 | margin: auto; 18 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); 19 | } 20 | 21 | div { 22 | text-align: center; 23 | padding: 8px; 24 | } 25 | 26 | footer { 27 | color: white; 28 | text-align: center; 29 | font-style: italic; 30 | } 31 | -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/adult-female.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/adult-female.jpg -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/adult-male.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/adult-male.jpg -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/baby-female.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/baby-female.jpg -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/baby-male.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/baby-male.jpg -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/elder-female.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/elder-female.jpg -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/elder-male.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/elder-male.jpg -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/gif.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/gif.gif -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/script.js: -------------------------------------------------------------------------------- 1 | // var birthDate = document.querySelector("#birthDate").value 2 | // var result = document.querySelector("#result") 3 | 4 | // function submitInfo(){ 5 | // } 6 | 7 | // document.querySelector("#result").innerHTML = birthDate 8 | 9 | function verificar() { 10 | var data = new Date() 11 | var ano = data.getFullYear() 12 | var fAno = document.getElementById("txtano") 13 | var res = document.querySelector("div#result") 14 | 15 | if(fAno.value.length == 0 || fAno.value > ano) { 16 | window.alert("Verifique os dados e tente novamente") 17 | } else { 18 | var fsex = document.getElementsByName("radsex") 19 | var idade = ano - Number(fAno.value) 20 | var genero = '' 21 | var img = document.createElement("img") 22 | img.setAttribute("id", "foto") 23 | 24 | if (fsex[0].checked) { 25 | genero = "masculino" 26 | if (idade >= 0 && idade < 10) { 27 | // Criança 28 | img.setAttribute("src", "baby-male.jpg") 29 | } else if (idade < 21) { 30 | // Jovem 31 | img.setAttribute("src", "young-male.jpg") 32 | } else if (idade < 50) { 33 | // Adulto 34 | img.setAttribute("src", "adult-male.jpg") 35 | } else { 36 | // Idoso 37 | img.setAttribute("src", "elder-male.jpg") 38 | } 39 | } else if(fsex[1].checked) { 40 | genero = "feminino" 41 | if(idade >= 0 && idade < 10) { 42 | // Criança 43 | img.setAttribute("src", "baby-female.jpg") 44 | } else if(idade < 21) { 45 | // Jovem 46 | img.setAttribute("src", "young-female.jpg") 47 | } else if(idade < 50) { 48 | // Adulto 49 | img.setAttribute("src", "adult-female.jpg") 50 | } else { 51 | // Idoso 52 | img.setAttribute("src", "elder-female.jpg") 53 | } 54 | 55 | } 56 | res.style.textAlign = "center" 57 | res.innerHTML = `Detectamos gênero ${genero} com ${idade} anos!` 58 | res.appendChild(img) 59 | } 60 | } -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: cornflowerblue; 3 | font: normal 15pt Arial; 4 | 5 | } 6 | 7 | header { 8 | color: white; 9 | text-align: center; 10 | } 11 | 12 | section { 13 | background: white; 14 | border-radius: 10px; 15 | padding: 15px; 16 | width: 500px; 17 | margin: auto; 18 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); 19 | } 20 | 21 | footer { 22 | color: white; 23 | text-align: center; 24 | font-style: italic; 25 | } 26 | -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/verificador_de_idade.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Verificador de idade 8 | 9 | 10 | 11 |
12 |

Verificador de Idade

13 |
14 |
15 |
16 |

Ano de nascimento: 17 | 18 |

19 |

20 | 21 | 22 | 23 | 24 |

25 | 26 |

27 | 28 |

29 |
30 | 31 |
32 |

Preencha os dados acima para ver o resultado!

33 |
34 |
35 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/young-female.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/young-female.jpg -------------------------------------------------------------------------------- /modulo_d/Divertimentos/divertimento_3/young-male.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_d/Divertimentos/divertimento_3/young-male.jpg -------------------------------------------------------------------------------- /modulo_d/README.md: -------------------------------------------------------------------------------- 1 | # Módulo D: Condições em JavaScript 2 | 3 | # Aula 11: Condições (Parte 1/2) 4 | 5 | ## Sequências x Condições 6 | 7 | ### Sequências 8 | 9 | Sequências de códigos são construídas para que todas as linhas sejam executadas e em ordem. 10 | 11 | ```javascript 12 | // Sequência: 13 | var n = 3 14 | n += 2 15 | window.alert(n) 16 | ``` 17 | 18 | ### Condições (if/else) 19 | 20 | Já as condições definem caminhos lógicos, distintos, pelos quais a linguagem irá interpretar o código escrito. 21 | 22 | ```javascript 23 | if (condição) { 24 | // quando o if for true 25 | } else { 26 | // quando o if for false 27 | } 28 | 29 | ``` 30 | 31 | Existem alguns tipos de condição. Nesta aula, veremos dois deles. 32 | 33 | ```javascript 34 | // Condição simples: 35 | if (condição) { 36 | true 37 | } 38 | 39 | // Condição composta: 40 | if (condição) { 41 | true 42 | } else { 43 | false 44 | } 45 | ``` 46 | 47 | ## Divertimentos: 48 | 49 | Em aula transformamos o **[divertimento_08.js](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/modulo_d/11_Condicoes_Parte_Um/divertimento_08.js)** em um site. Transforme o **[divertimento_09.js](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/modulo_d/11_Condicoes_Parte_Um/divertimento_09.js)** em um site. 50 | 51 | And there it goes: **[divertimento_11.html](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/modulo_d/11_Condicoes_Parte_Um/divertimento_11.html)** 52 | 53 | # Aula 12: Condições (Parte 2/2) 54 | 55 | ## Condições aninhadas (else if) 56 | 57 | ```javascript 58 | if (condiçãoUm) { 59 | blocoUm 60 | } else { 61 | if (condiçãoDois) { 62 | blocoDois 63 | } else { 64 | blocoTrês 65 | } 66 | } 67 | ``` 68 | 69 | ## Condições múltiplas (Switch) 70 | 71 | Serve para valores fixos. 72 | 73 | ```javascript 74 | // Sintaxe do Switch: 75 | switch(expressão) { 76 | case valor1: 77 | // 78 | break 79 | case valor2: 80 | // 81 | break 82 | case valor3: 83 | // 84 | break 85 | default: 86 | // 87 | } 88 | ``` 89 | 90 | * O Switch só funciona com números inteiros e strings 91 | * O **break** é imprescindível, senão a lógica do bloco quebra 92 | 93 | # Exercícios JavaScript (Parte 1/8) 94 | 95 | Nesta aula, nós construímos um modelo de HTML + CSS para orientar a resolução dos próximos exercícios de JS. 96 | 97 | ![modelo-divertimentos](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/media/modelo-divertimentos.JPG) 98 | 99 | # Exercícios JavaScript (Parte 2/8) 100 | 101 | Nesta aula, nós construímos uma página que mostra dinamicamente uma imagem e um background de acordo com o período do dia, tudo isso usando JavaScript. 102 | 103 | ![daytime](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/media/daytime.gif) 104 | 105 | # Exercícios JavaScript (Parte 3/8) 106 | 107 | Nesta aula, nós construímos uma página que mostra dinamicamente a idade e uma foto de acordo com o gênero e o ano de nascimento que o usuário imputa em uma caixa de texto (número) e input radios. 108 | 109 | ![person-gif](https://github.com/guiemi-learning-center/curso-javascript-guanabara/blob/master/modulo_d/Divertimentos/divertimento_3/gif.gif) -------------------------------------------------------------------------------- /modulo_e/13_repeticoes_parte_um/ambiente.js: -------------------------------------------------------------------------------- 1 | // while 2 | var counter = 1 3 | while (counter <= 6) { 4 | console.log(`Tudo bem? (${counter}x) `) 5 | counter++ 6 | } 7 | 8 | // do...while 9 | var counter = 0 10 | do { 11 | console.log(`Tudo bem? (${counter}x) `) 12 | counter++ 13 | } while (counter <= 6) 14 | 15 | // GoHorse 16 | console.log("Tudo bem?") 17 | console.log("Tudo bem?") 18 | console.log("Tudo bem?") 19 | console.log("Tudo bem?") 20 | console.log("Tudo bem?") 21 | 22 | -------------------------------------------------------------------------------- /modulo_e/14_repeticoes_parte_dois/ambiente.js: -------------------------------------------------------------------------------- 1 | /* var c = 1 2 | var d = 1 3 | while (c<= 5) { 4 | console.log(c) 5 | c++ 6 | } 7 | 8 | do { 9 | console.log(d) 10 | d++ 11 | } while (d <= 5) 12 | */ 13 | console.log("Vai começar") 14 | for (var c = 1;c <= 5 ; c++ ) { 15 | console.log(c) 16 | } 17 | console.log("Fim!") 18 | -------------------------------------------------------------------------------- /modulo_e/README.md: -------------------------------------------------------------------------------- 1 | # Módulo E: Repetições em JavaScript 2 | 3 | No módulo E, entraremos em contato com 3 tipos de laços de repetição em JS: 4 | 5 | 1. Repetição com teste no início (while loop) 6 | 2. Repetição com teste no final (do…while loop) 7 | 3. Repetições com controle (for loop) 8 | 9 | Obviamente o módulo terá exercícios propostos também. 10 | 11 | # Aula 13: Repetições (Parte 1) 12 | 13 | As estruturas de repetição também podem ser chamadas, além de **repetições**, de **laços** e **iterações**. 14 | 15 | ## O laço while 16 | 17 | Exemplo de repetição usando uma função chamada `comerPizza()`: 18 | 19 | ```javascript 20 | function comerPizza() { 21 | comerFatia() 22 | comerFatia() 23 | comerFatia() 24 | comerFatia() 25 | comerFatia() 26 | comerFatia() 27 | comerFatia() 28 | comerFatia() 29 | } 30 | ``` 31 | 32 | ```javascript 33 | // Sintaxe básica do while: 34 | 35 | while(condição) { 36 | // write code here 37 | } 38 | ``` 39 | 40 | ```javascript 41 | function comerPizza() { 42 | while (temFatia()) { 43 | comerFatia() 44 | } 45 | } 46 | ``` 47 | 48 | ## O laço do…while 49 | 50 | ```javascript 51 | do { 52 | // write some code here 53 | } while (condição) 54 | ``` 55 | 56 | # Aula 14: Repetições (Parte 2) 57 | 58 | Nesta aula, veremos a estrutura **for**. 59 | 60 | > "Não adianta você tentar chegar no meio da festa e perguntar se tá na hora de cantar parabéns." 61 | > 62 | > (GUANABARA, G., 2019) 63 | 64 | > "O Guanabara tem umas frases de efeito nada a ver, mas a gente gosta dele ainda assim." 65 | > 66 | > (TEIXEIRA, G., 2019) 67 | 68 | No **for** existem três passos: a **inicialização**, o **teste lógico** e o **incremento**. 69 | 70 | ```javascript 71 | // Sintaxe do for: 72 | for (inicio; teste; incremento) { 73 | // Write some code here 74 | } 75 | ``` 76 | 77 | ```javascript 78 | // Exemplo de como o while() funciona: 79 | var c = 1 80 | while (c <= 10) { 81 | // Faz algo 82 | c++ 83 | } 84 | 85 | // O mesmo código, só que no for: 86 | for (var c=1; c<=10; c++) { 87 | // Faz algo 88 | } 89 | ``` 90 | 91 | # Exercícios JavaScript (Parte 4/8) -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_5/script.js: -------------------------------------------------------------------------------- 1 | function contar() { 2 | var startNumber = document.getElementById("start") 3 | var endNumber = document.getElementById("end") 4 | var stepNumber = document.getElementById("step") 5 | var result = document.getElementById("result") 6 | 7 | if (startNumber.value.length == 0 || endNumber.value.length == 0 || stepNumber.value.length == 0) { 8 | result.innerHTML = "Impossível contar!" 9 | } else { 10 | result.innerHTML = "Contando:
" 11 | result.innerHTML += "🏠 " 12 | let i = Number(startNumber.value) 13 | let f = Number(endNumber.value) 14 | let p = Number(stepNumber.value) 15 | 16 | if (p <= 0) { 17 | window.alert("Passo inválido. Considerando passo 1") 18 | p = 1 19 | } 20 | if (i < f) { 21 | // Contagem crescente 22 | for (let c = i; c<= f; c+=p) { 23 | result.innerHTML += `${c} 👉🏾 ` 24 | } 25 | } else { 26 | // Contagem regressiva 27 | for (c = i; c>=f; c-=p) 28 | result.innerHTML += `${c} 👉🏾 ` 29 | } 30 | result.innerHTML += `⚐` 31 | } 32 | } -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_5/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: cornflowerblue; 3 | font: normal 15pt Arial; 4 | 5 | } 6 | 7 | header { 8 | color: white; 9 | text-align: center; 10 | } 11 | 12 | section { 13 | background: white; 14 | border-radius: 10px; 15 | padding: 15px; 16 | width: 500px; 17 | margin: auto; 18 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); 19 | } 20 | 21 | footer { 22 | color: white; 23 | text-align: center; 24 | font-style: italic; 25 | } 26 | -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_5/vamos_contar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vamos contar 8 | 9 | 10 | 11 |
12 |

Vamos contar

13 |
14 |
15 |
16 |

Início:

17 |

Fim:

18 |

Passo:

19 |

20 |
21 |
22 |

Preparando a contagem...

23 |
24 |
25 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_6/script.js: -------------------------------------------------------------------------------- 1 | function generateTable() { 2 | let num = document.getElementById("number") 3 | let result = document.getElementById("result") 4 | if (num.value.length == 0) { 5 | window.alert("Você precisa digitar um número!") 6 | } else { 7 | var n = Number(num.value) 8 | result.innerHTML = "" 9 | for (i=1; i<=10; i++) { 10 | let item = document.createElement("option") 11 | item.text = `${n} x ${i} = ${n*i}` 12 | result.appendChild(item) 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_6/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: cornflowerblue; 3 | font: normal 15pt Arial; 4 | 5 | } 6 | 7 | header { 8 | color: white; 9 | text-align: center; 10 | } 11 | 12 | section { 13 | background: white; 14 | border-radius: 10px; 15 | padding: 15px; 16 | width: 500px; 17 | margin: auto; 18 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); 19 | } 20 | 21 | footer { 22 | color: white; 23 | text-align: center; 24 | font-style: italic; 25 | } 26 | -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_6/tabuada.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabuada 8 | 9 | 10 | 11 |
12 |

Tabuada

13 |
14 |
15 |
16 |

17 | Número: 18 | 19 |

20 |
21 |
22 | 25 |
26 |
27 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_modelo/modelo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modelo de exercício 8 | 9 | 10 | 11 |
12 |

Título

13 |
14 |
15 |
16 | Testando... 17 |
18 |
19 |
20 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_modelo/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_e/divertimentos/divertimento_modelo/script.js -------------------------------------------------------------------------------- /modulo_e/divertimentos/divertimento_modelo/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: cornflowerblue; 3 | font: normal 15pt Arial; 4 | 5 | } 6 | 7 | header { 8 | color: white; 9 | text-align: center; 10 | } 11 | 12 | section { 13 | background: white; 14 | border-radius: 10px; 15 | padding: 15px; 16 | width: 500px; 17 | margin: auto; 18 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); 19 | } 20 | 21 | footer { 22 | color: white; 23 | text-align: center; 24 | font-style: italic; 25 | } 26 | -------------------------------------------------------------------------------- /modulo_f/15_variaveis_compostas/ambiente.js: -------------------------------------------------------------------------------- 1 | let nums = [5, 8, 2, 9, 3] 2 | nums.push(1) 3 | nums.sort() 4 | console.log(nums) 5 | console.log(`Nosso vetor tem ${nums.length} posições`) 6 | console.log(`O primeiro valor do vetor é: ${nums[0]}`) 7 | 8 | let pos = nums.indexOf(8) 9 | if (pos == -1) { 10 | console.log("Valor não encontrado.") 11 | } else { 12 | console.log(`O valor 8 está na posição ${pos}`) 13 | 14 | } -------------------------------------------------------------------------------- /modulo_f/15_variaveis_compostas/vetor_na_tela.js: -------------------------------------------------------------------------------- 1 | let valores = [8, 1, 7, 4, 2, 9] 2 | // console.log(valores) 3 | // console.log(valores[0]) 4 | // console.log(valores[1]) 5 | // console.log(valores[2]) 6 | // console.log(valores[3]) 7 | // console.log(valores[4]) 8 | // console.log(valores[5]) 9 | 10 | // for(pos=0; pos < valores.length; pos++) { 11 | // console.log(`A ${pos+1}ª posição tem o valor ${valores[pos]}.`) 12 | // } 13 | 14 | for(let pos in valores) { 15 | console.log(`A ${pos}ª posição tem o valor ${valores[pos]}.`) 16 | } 17 | -------------------------------------------------------------------------------- /modulo_f/16_funcoes/funcao01.js: -------------------------------------------------------------------------------- 1 | function parImpar(num) { 2 | if(num % 2 == 0) { 3 | return `O número ${num} é par.` 4 | } else { 5 | return `O número ${num} é ímpar.` 6 | } 7 | } 8 | 9 | console.log(parImpar(7)) -------------------------------------------------------------------------------- /modulo_f/16_funcoes/funcao02.js: -------------------------------------------------------------------------------- 1 | function soma(num1, num2=0) { 2 | result = num1 + num2 3 | return `${num1} + ${num2} = ${result}` 4 | } 5 | 6 | console.log(soma(5)) 7 | -------------------------------------------------------------------------------- /modulo_f/16_funcoes/funcao03.js: -------------------------------------------------------------------------------- 1 | let variable = function(x){ 2 | return x**2 3 | } 4 | 5 | console.log(variable(5)) 6 | 7 | // Essa função atribui uma potência à variável. -------------------------------------------------------------------------------- /modulo_f/16_funcoes/funcao04.js: -------------------------------------------------------------------------------- 1 | // Fatorial 2 | 3 | // 5! = 5 * 4 * 3 * 2 * 1 4 | 5 | function fatorial(num) { 6 | let fat = 1 7 | for(let c = num; c > 1; c--) { 8 | fat *= c 9 | } 10 | return `${num}! = ${fat}` 11 | } 12 | 13 | console.log(fatorial(4)) 14 | 15 | -------------------------------------------------------------------------------- /modulo_f/16_funcoes/funcao05.js: -------------------------------------------------------------------------------- 1 | // Recursividade: 2 | 3 | function fatorial(num) { 4 | if(num == 1) { 5 | return 1 6 | } else { 7 | return num * fatorial(num - 1) 8 | } 9 | } 10 | 11 | console.log(fatorial(5)) 12 | 13 | /* 14 | Formalização: 15 | 16 | 5! = 5 * 4 * 3 * 2 * 1 17 | 5! = 5 * 4! 18 | 19 | n! = n * (n-1)! 20 | 21 | */ -------------------------------------------------------------------------------- /modulo_f/17_proximos_passos/objetoUm.js: -------------------------------------------------------------------------------- 1 | let amigo = { 2 | nome: "José", 3 | sexo: 'M', 4 | peso: 85.4, 5 | engordar(p=0) { 6 | console.log('Engordou') 7 | this.peso += p 8 | } 9 | } 10 | 11 | amigo.engordar(2) 12 | console.log(`${amigo.nome} pesa ${amigo.peso} Kg`) -------------------------------------------------------------------------------- /modulo_f/17_proximos_passos/proximos_passos.md: -------------------------------------------------------------------------------- 1 | # Aula 17: Próximos Passos 2 | 3 | # O que vimos até aqui 4 | 5 | * Fundamentos 6 | * O que é o JS, como ele surgiu, sua evolução, seu paradigma (client-server) 7 | * Variáveis e dados 8 | * Variáveis, tipos de dados, tipos primitivos 9 | * Operadores 10 | * Tratando valores com operações (operadores aritméticos, lógicos e relacionais) 11 | * Condições 12 | * if/else simples, composto, aninhado 13 | * switch 14 | * Repetições 15 | * while, do while, for 16 | * Arrays 17 | * Variáveis compostas 18 | * Funções 19 | * A importância das funções 20 | * DOM 21 | * JS conversando com o HTML e o CSS 22 | 23 | # Quais são os próximos passos? 24 | 25 | * Faça o curso de HTML 5 e CSS 26 | * Estude muito as funções 27 | * Arrow functions 28 | * callbacks 29 | * funções anônimas 30 | * IIFEs (Immediately Invoked Function Expression) 31 | * Fundamentos do JavaScript funcional 32 | * Objetos 33 | * Modularização 34 | * RegEx 35 | * JSON 36 | * AJAX 37 | * NodeJS 38 | * Frameworks 39 | * JQuery 40 | * VueJS 41 | * Angular 42 | * ReactJS 43 | 44 | # Fundamentos dos objetos em JavaScript 45 | 46 | ```javascript 47 | // Arrays 48 | let num = [5, 8, 4] 49 | 50 | // objeto 51 | 52 | let amigo = { 53 | nome: "José", 54 | sexo: 'M', 55 | peso: 85.4, 56 | engordar(p=0) { 57 | console.log('Engordou') 58 | this.peso += p 59 | } 60 | } 61 | 62 | amigo.engordar(2) 63 | console.log(`${amigo.nome} pesa ${amigo.peso} Kg`) 64 | ``` 65 | 66 | -------------------------------------------------------------------------------- /modulo_f/README.md: -------------------------------------------------------------------------------- 1 | # Módulo F: Avançando os estudos em JavaScript (Aulas 15-17) 2 | 3 | # Conteúdos deste módulo: 4 | 5 | * Variáveis compostas (arrays) 6 | * Uso de funções e eventos 7 | * Passagem de parâmetros 8 | * Exercícios propostos 9 | * Último vídeo: próximos passos 10 | 11 | # Aula 15: Variáveis Compostas 12 | 13 | Nesta aula, trabalharemos com vetores/arrays. 14 | 15 | ## Diferença entre variável simples e variável composta 16 | 17 | * As **variáveis simples** são aquelas que armazenam apenas **um valor** por vez. 18 | * As **variáveis compostas** são capazes de armazenar vários valores em uma mesma estrutura. 19 | 20 | ## Exemplo prático 21 | 22 | Em vez de criar uma variável para cada item que precisa ser armazenado, como por exemplo carros: 23 | 24 | ```javascript 25 | var a1 = "carroUm" 26 | var a2 = "carroDois" 27 | var a3 = "carroTres" 28 | var a4 = "carroQuatro" 29 | var a5 = "carroCinco" 30 | ``` 31 | 32 | é possível agrupar todos os carros em uma variável só chamada `automoveis`. 33 | 34 | Para identificar cada carro dentro da variável, usamos índices dentro de colchetes `[]`. 35 | 36 | ### Sintaxe de atribuição de um array/vetor: 37 | 38 | ```javascript 39 | vaga a = ["carroUm", "carroDois","carroTres"] 40 | ``` 41 | 42 | ```javascript 43 | let nums = [5,8,4] 44 | ``` 45 | 46 | ### Adicionando um valor ao vetor 47 | 48 | ```javascript 49 | num[3] = 6 // Adicionando usando índice como critério 50 | num.push(7) // Adicionando um item ao fim do vetor 51 | ``` 52 | 53 | ### Descobrindo o tamanho do vetor 54 | 55 | ```javascript 56 | num.length // O length JS não tem parênteses, porque o length não é um método, é um atributo 57 | ``` 58 | 59 | ### Sort 60 | 61 | ```javascript 62 | num.sort() // Reordena todos os elementos em ordem crescente 63 | ``` 64 | 65 | ### Mostrar um vetor de forma otimizada 66 | 67 | ```javascript 68 | var nums = [4, 6, 5, 8, 7] 69 | nums.sort() // reordena para [4, 5, 6, 7, 8] 70 | 71 | console.log(nums[0]) 72 | console.log(nums[1]) 73 | console.log(nums[2]) 74 | console.log(nums[3]) 75 | 76 | // Usando o for: 77 | 78 | for(pos=0; pos 2 | 3 | 4 | 5 | 6 | 7 | 8 | Analisador de números 9 | 10 | 11 | 12 | 13 |
14 |

Analisador de números

15 |
16 |
17 | 18 |
19 | Número (entre 1 e 100): 20 | 21 | 22 | 23 | 24 |

27 |
28 | 29 | 30 |
31 |

Resultados

32 |
33 | 34 |
35 | 36 | 40 |
41 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /modulo_f/divertimentos/divertimento_7/script.js: -------------------------------------------------------------------------------- 1 | // ANALISADOR DE NUMEROS 2 | 3 | // var result = document.getElementById("result") 4 | // var lista = document.getElementById("adicionados") 5 | // var userInput = document.getElementById("userInput") 6 | // var listaNumeros = new Array() 7 | 8 | let num = document.querySelector('input#fnum') 9 | let lista = document.querySelector('select#flista') 10 | let res = document.querySelector('div#res') 11 | // let valores = [1, 2, 3, 4, 5, 5, 5] 12 | let valores = [] 13 | 14 | function isNumero(n) { 15 | if (Number(n) >= 1 && Number(n) <= 100) { 16 | return true 17 | } else { 18 | return false 19 | } 20 | } 21 | 22 | function inLista(n, l) { 23 | if (l.indexOf(Number(n)) != -1) { 24 | return true 25 | } else { 26 | return false 27 | } 28 | } 29 | 30 | function adicionar() { 31 | if (isNumero(num.value) && !inLista(num.value, valores)) { 32 | // Adiciona na lista 33 | valores.push(Number(num.value)) 34 | console.log(`${num.value} adicionado à lista`) 35 | 36 | // Mostra na caixa 37 | const opt = document.createElement('option'); 38 | opt.appendChild(document.createTextNode(`Valor ${num.value} adicionado`)) 39 | lista.appendChild(opt) 40 | res.innerHTML = '' 41 | 42 | } else { 43 | window.alert('Valor inválido ou já encontrado na lista') 44 | } 45 | num.value = '' 46 | num.focus() 47 | } 48 | 49 | function gerarResultado() { 50 | if (valores.length == 0) { 51 | window.alert('Adicione valores antes de finalizar!') 52 | } else { 53 | 54 | console.log("Função gerarResultado chamada") 55 | const numerosCadastrados = valores.length 56 | const maiorValor = valores.reduce((x, y) => { 57 | return Math.max(x, y) 58 | }) 59 | const menorValor = valores.reduce((x, y) => { 60 | return Math.min(x, y) 61 | }) 62 | 63 | const somatoria = valores.reduce((x, y) => { 64 | return x + y 65 | }) 66 | 67 | const media = (somatoria / numerosCadastrados) 68 | 69 | res.innerHTML = '' 70 | res.innerHTML += `

Ao total, temos ${numerosCadastrados} números cadastrados

` 71 | res.innerHTML += `

O maior número informado foi: ${maiorValor}

` 72 | res.innerHTML += `

O menor número informado foi: ${menorValor}

` 73 | res.innerHTML += `

Somando todos os valores, temos ${somatoria}

` 74 | res.innerHTML += `

A média dos valores digitados é: ${media}

` 75 | // const resultados = [numerosCadastrados, maiorValor, menorValor, somatoria, media] 76 | const resultados = { 77 | 78 | } 79 | return resultados 80 | 81 | console.log(`Tamanho da lista: ${numerosCadastrados} números`) 82 | console.log(`Maior valor: ${maiorValor}`) 83 | console.log(`Menos valor: ${menorValor}`) 84 | console.log(`Somatória: ${somatoria}`) 85 | console.log(`Média: ${media}`) 86 | } 87 | 88 | } 89 | 90 | // function mostrarResultado(gerarResultado) { 91 | 92 | // gerarResultado.map((res) => { 93 | 94 | // }) 95 | // } 96 | -------------------------------------------------------------------------------- /modulo_f/divertimentos/divertimento_7/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: cornflowerblue; 3 | font: normal 15pt Arial; 4 | 5 | } 6 | 7 | header { 8 | color: white; 9 | text-align: center; 10 | } 11 | 12 | section { 13 | background: white; 14 | border-radius: 10px; 15 | padding: 15px; 16 | width: 500px; 17 | margin: auto; 18 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); 19 | } 20 | 21 | select#flista{ 22 | width: 150px; 23 | } 24 | 25 | footer { 26 | color: white; 27 | text-align: center; 28 | font-style: italic; 29 | } 30 | -------------------------------------------------------------------------------- /modulo_f/divertimentos/divertimento_modelo/modelo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modelo de exercício 8 | 9 | 10 | 11 |
12 |

Título

13 |
14 |
15 |
16 | Testando... 17 |
18 |
19 |
20 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /modulo_f/divertimentos/divertimento_modelo/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divertimentos/Curso-JavaScript-Guanabara/ff7602162b1516ff12a1fd193448ba98161e72b4/modulo_f/divertimentos/divertimento_modelo/script.js -------------------------------------------------------------------------------- /modulo_f/divertimentos/divertimento_modelo/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: cornflowerblue; 3 | font: normal 15pt Arial; 4 | 5 | } 6 | 7 | header { 8 | color: white; 9 | text-align: center; 10 | } 11 | 12 | section { 13 | background: white; 14 | border-radius: 10px; 15 | padding: 15px; 16 | width: 500px; 17 | margin: auto; 18 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329); 19 | } 20 | 21 | footer { 22 | color: white; 23 | text-align: center; 24 | font-style: italic; 25 | } 26 | --------------------------------------------------------------------------------