├── README.md
├── anotacoes
└── anotacoes.md
├── boolean-e-condicionais
├── index.html
├── readme.md
└── script.js
├── dom
├── dom.md
├── index.html
└── script.js
├── exercicios
├── ex01.js
├── ex02.js
├── ex03.js
├── ex04.js
├── ex05.js
├── ex06.js
├── ex07.js
├── ex08.js
├── ex09.js
├── ex10.js
└── ex11.js
├── funcoes
├── funcoes.md
├── index.html
└── script.js
├── img
├── javascript.jpg
└── js.jpg
├── numeros-e-operadores
├── index.html
├── numero-e-operadores.md
└── script.js
├── objetos
├── index.html
├── objetos.md
└── script.js
├── scroll-suave
├── index.html
└── script.js
├── tipos de dados
├── index.html
├── script.js
└── tipos-de-dados.md
└── variaveis
├── index.html
├── script.js
└── variaveis.md
/README.md:
--------------------------------------------------------------------------------
1 | # 📒・ JavaScript: Anotações & Exercícios pessoais.
2 |
3 | 
4 |
5 |
6 | # 🎇 JavaScript: Guia Pessoal & Roadmap
7 |
8 | > Meu guia pessoal de estudos para JavaScript, feito para utilizar para consultas e me auxiliar e guiar durante todo meu aprendizado sobre essa linguagem de programação.
9 |
10 | # ◾ JavaScript - Parte 1°
11 |
12 | - [Váriaveis](https://github.com/arthurspk/javascript/blob/main/variaveis/variaveis.md)
13 | - [Classes](#)
14 | - [Funções](https://github.com/arthurspk/javascript/blob/main/funcoes/funcoes.md)
15 | - [Objetos ](https://github.com/arthurspk/javascript/blob/main/objetos/objetos.md)
16 | - [Classes](#)
17 | - [Operadores](#)
18 | - [Tipos de Dados](https://github.com/arthurspk/javascript/blob/main/tipos%20de%20dados/tipos-de-dados.md)
19 | - [Arrays e loops](#)
20 | - [Arrow functions](#)
21 | - [Funções regulares](#)
22 | - [Número e Operadores](https://github.com/arthurspk/javascript/blob/main/numeros-e-operadores/numero-e-operadores.md)
23 | - [Boolean e Condicionais](https://github.com/arthurspk/javascript/tree/main/boolean-e-condicionais)
24 | - [Atribuições e Ternário](#)
25 | - [Estruturas de Repetição](#)
26 | - [Estrutururas condicionais](#)
27 |
28 | # ◾ JavaScript - Parte 2°
29 |
30 | - [Destructuring](#)
31 | - [Rest e Spread](#)
32 | - [Factory Function](#)
33 | - [Loops e Iterable](#)
34 | - [Function Expression](#)
35 | - [Closures e Debugging](#)
36 |
37 | # ◾ JavaScript Assícrono
38 |
39 | - [JSON](#)
40 | - [Fetch](#)
41 | - [Promisses](#)
42 | - [API e HTTP](#)
43 | - [Async Await](#)
44 | - [History API](#)
45 |
46 | # ◾ Objetos
47 |
48 | - [Array](#)
49 | - [String](#)
50 | - [Object](#)
51 | - [Function](#)
52 | - [Prototype](#)
53 | - [Number e Math](#)
54 | - [Array e Iteração](#)
55 | - [Constructor Fuction](#)
56 | - [Native, Host e User](#)
57 |
58 | # ◾ Dom
59 |
60 | - [Eventos](#)
61 | - [Navegação por Tabs](#)
62 | - [Classes e Atributos](#)
63 | - [Seleção de Elementos](https://github.com/arthurspk/javascript/blob/main/dom/dom.md)
64 | - [Dimensões e Distâncias](#)
65 | - [forEach e Arrow Function](#)
66 | - [Traversing e Manipulação](#)
67 |
68 | # ◾ Efeitos no Dom
69 |
70 | - [Forms](#)
71 | - [Dataset](#)
72 | - [Modules](#)
73 | - [setTimeout](#)
74 | - [setInterval](#)
75 | - [Date Object](#)
76 | - [Event Bubble](#)
77 |
78 | # ◾ Classes
79 |
80 | - [Classes](#)
81 | - [Extends](#)
82 | - [Get e Set](#)
83 |
84 | # ◾ Repositórios sobre JavaScript
85 |
86 | - [Facebook - React](https://github.com/facebook/react)
87 | - [Awesome JavaScript Projects](https://github.com/Vishal-raj-1/Awesome-JavaScript-Projects)
88 | - [Clean Code JavaScript PT-BR](https://github.com/felipe-augusto/clean-code-javascript)
89 | - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
90 | - [JavaScript Algorithms and Data Structures](https://github.com/trekhleb/javascript-algorithms)
91 | - [33 Conceitos que todo desenvolvedor JS deve conhecer](https://github.com/tiagoboeing/33-js-concepts)
92 |
93 | # ◾ Bibliotecas e Frameworks
94 |
95 | - [Vivus](https://maxwellito.github.io/vivus/)
96 | - [Oh Snap!](https://justindomingue.github.io/ohSnap/)
97 | - [SpaceBase](https://spacebase.space150.com/)
98 | - [Picturefill](https://scottjehl.github.io/picturefill/)
99 | - [Redux](https://redux.js.org/)
100 | - [PurifyCSS](https://github.com/purifycss/purifycss)
101 | - [Lodash](https://lodash.com/)
102 | - [EaselJS](https://www.createjs.com/easeljs)
103 | - [Drop.js](https://github.hubspot.com/drop/docs/welcome/)
104 | - [Propeller](http://propeller.in/index.html)
105 | - [Core UI](https://coreui.io/)
106 | - [MJML](https://mjml.io/)
107 | - [BaguetteBox](https://feimosi.github.io/baguetteBox.js/)
108 | - [React Trend](https://unsplash.github.io/react-trend/)
109 | - [Nachos UI](https://avocode.com/nachos-ui)
110 | - [Yargs](https://yargs.js.org/)
111 | - [Extension Boilerplate](https://www.emailthis.me/open-source/extension-boilerplate)
112 | - [FitVids](http://fitvidsjs.com/)
113 | - [WebGradients](https://webgradients.com/)
114 | - [BigPicture](https://henrygd.me/bigpicture/)
115 | - [Rellax](https://dixonandmoe.com/rellax/)
116 | - [ScrollDir](https://github.com/dollarshaveclub/scrolldir)
117 | - [Reactive Listener](https://zurb.com/playground/reactive-animation-listener)
118 | - [Muuri](https://muuri.dev/)
119 | - [Eagle.js](https://zulko.github.io/eaglejs-demo/#/)
120 | - [Notyf](https://carlosroso.com/notyf/)
121 | - [Multi.js](https://fabianlindfors.se/multijs/)
122 | - [MoveTo](https://hsnaydd.github.io/moveTo/demo/)
123 | - [Anchorme](https://alexcorvi.github.io/anchorme.js/)
124 | - [Tent CSS](https://css.sitetent.com/)
125 | - [Angular.js](https://angularjs.org/)
126 | - [Vue.js](https://vuejs.org/)
127 | - [React.js](https://reactjs.org/)
128 | - [Aurelia](https://aurelia.io/)
129 | - [Ember.js](https://emberjs.com/)
130 | - [Express.js](https://expressjs.com/pt-br/)
131 | - [Moment.js](https://momentjs.com/)
132 | - [Glimmer.js](https://glimmerjs.com/)
133 | - [Underscore.js](http://underscorejs.org/)
134 | - [Animate On Scroll](https://michalsnik.github.io/aos/)
135 | - [Bideo.js](https://rishabhp.github.io/bideo.js/)
136 | - [Cleave.js](https://nosir.github.io/cleave.js/)
137 | - [Choreographer.js](https://christinecha.github.io/choreographer-js/)
138 | - [Granim.js](https://sarcadass.github.io/granim.js/)
139 | - [fullPage.js](https://github.com/alvarotrigo/fullPage.js/)
140 | - [Leaflet](https://leafletjs.com/)
141 | - [Multiple.js](https://multiple.js.org/)
142 | - [Masonry](https://masonry.desandro.com/)
143 | - [Omniscient](https://omniscientjs.github.io/)
144 | - [Parsley](http://parsleyjs.org/)
145 | - [Popper.js](https://popper.js.org/)
146 | - [Three.js](https://threejs.org/)
147 | - [Screenfull.js](https://github.com/sindresorhus/screenfull)
148 | - [Polymer](https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview)
149 | - [Voca](https://vocajs.com/)
150 | - [Particles.js](https://vincentgarreau.com/particles.js/)
151 | - [Lax.js](https://github.com/alexfoxy/lax.js)
152 | - [WOW](https://wowjs.uk/)
153 | - [Animate](https://animate.style/)
154 | - [ScrollMagic](https://scrollmagic.io/)
155 |
156 | # ◾ Bibliotecas de Fontes
157 |
158 | - [Typerface.js](https://css-tricks.com/typefacejs-a-sifr-alternative/)
159 |
160 | # ◾ Bibliotecas de Animações
161 |
162 | - [Anime.js](https://animejs.com/)
163 | - [JSTweener](https://github.com/valera-rozuvan/JSTweener)
164 |
165 | # ◾ Bibliotecas de Formulários
166 |
167 | - [wForms](https://github.com/veerwest/wforms)
168 | - [Validanguage](https://github.com/gcao/validanguage)
169 |
170 | # ◾ Bibliotecas de Base de Dados
171 |
172 | - [TaffyDB](https://taffydb.com/)
173 | - [ActiveRecorde.js](https://github.com/matthewwolfe/active-record-js)
174 |
175 | # ◾ Biblioteca de Efeitos de Imagem
176 |
177 | - [Pieces](https://github.com/lmgonzalves/pieces)
178 | - [CamanJS](http://camanjs.com/)
179 | - [ImageFX](https://github.com/s-silva/imagefx)
180 | - [Oridomi](https://oridomi.com/)
181 | - [Glfx.js](https://evanw.github.io/glfx.js/)
182 | - [StackBlur](https://github.com/flozz/StackBlur)
183 | - [VintageJS](https://vintagejs.com/)
184 | - [Sticker.js](http://stickerjs.cmiscm.com/)
185 | - [Magnifier.js](https://mark-rolich.github.io/Magnifier.js/)
186 | - [Intense Images](https://tholman.com/intense-images/)
187 | - [WebGL Image Filter](https://github.com/phoboslab/WebGLImageFilter)
188 | - [Add a little magic!](https://gist.github.com/CodeMyUI/bea97056758e585719cb)
189 | - [Blur on Scroll + Simple Parallax](https://gist.github.com/benjaminsehl/21992c8cdb534d9ff009)
190 |
191 | # ◾ Bibliotecas de Manipulação do DOM
192 |
193 | - [jQuery](https://jquery.com/)
194 | - [Umbrella JS](https://umbrellajs.com/)
195 |
196 | # ◾ Bibliotecas de Tratamento de dados
197 |
198 | - [D3.js](https://d3js.org/)
199 |
200 | # ◾ Bibliotecas de Interface do usuário e seus componentes
201 |
202 | - [React.js](https://pt-br.reactjs.org/)
203 | - [Glimmer.js](https://glimmerjs.com/)
204 |
205 | # ◾ Bibliotecas de Visualização de dados em mapas e gráficos
206 |
207 | - [Chart.js](https://www.chartjs.org/)
208 | - [Apexchart.js](https://apexcharts.com/)
209 | - [Algolia Lugares](https://community.algolia.com/places/)
210 |
211 | # ◾ Bibliotecas de Desenvolvimento de Games
212 |
213 | - [JawsJS](https://github.com/ippa/jaws)
214 | - [Crafty](https://craftyjs.com/)
215 | - [DarlingJS](https://darlingjs.github.io/)
216 | - [Enchant.js](https://github.com/wise9/enchant.js/)
217 | - [Backbone Game Engine](https://martindrapeau.github.io/backbone-game-engine/)
218 |
219 | # ◾ Bibliotecas de Toast Notification
220 |
221 | - [Noty](https://ned.im/noty/#/)
222 | - [Toastr](https://codeseven.github.io/toastr/)
223 | - [AlertifyJS](https://alertifyjs.com/)
224 | - [BootboxJS](http://bootboxjs.com/)
225 | - [SweetAlert](https://sweetalert.js.org/docs/)
226 | - [SweetAlert2](https://sweetalert2.github.io/)
227 |
228 | # ◾ Bibliotecas de Carousel
229 |
230 | - [Slick](https://kenwheeler.github.io/slick/)
231 | - [UIKit](https://getuikit.com/docs/slider)
232 | - [Splide](https://splidejs.com/)
233 | - [Swiper](https://swiperjs.com/)
234 | - [Glide.js](https://glidejs.com/)
235 | - [Owl Carousel 2](https://owlcarousel2.github.io/OwlCarousel2/)
236 | - [Embla Carousel](https://www.embla-carousel.com/)
237 |
238 | # ◾ Frameworks
239 |
240 | - [Angular](https://angularjs.org/)
241 | - [Bootstrap](https://getbootstrap.com/)
242 | - [Aurelia](http://aurelia.io/)
243 | - [Vue.js](https://vuejs.org/)
244 | - [Ember.js](https://emberjs.com/)
245 | - [Node.js](https://nodejs.org/en/)
246 | - [Backbone.js](https://backbonejs.org/)
247 | - [Next.js](https://nextjs.org/)
248 | - [Mocha](https://mochajs.org/)
249 | - [Ionic](https://ionicframework.com/)
250 | - [Webix](https://webix.com/)
251 | - [Gatsby](https://www.gatsbyjs.com/)
252 | - [Meteor.js](https://www.meteor.com/)
253 | - [MithrilJS](https://mithril.js.org/)
254 | - [ExpressJS](https://expressjs.com/)
255 |
256 |
--------------------------------------------------------------------------------
/anotacoes/anotacoes.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/anotacoes/anotacoes.md
--------------------------------------------------------------------------------
/boolean-e-condicionais/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Boolean e condicionais
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/boolean-e-condicionais/readme.md:
--------------------------------------------------------------------------------
1 | ## Boolean e Condicionais
2 |
3 | ```js
4 | | Existem dois valores booleanos false ou true.
5 |
6 | var possuiGraduacao = true;
7 | var possuiDoutorado = false;
8 | ```
9 |
10 | ## Condicionais if & else
11 |
12 | ```js
13 | | Verificar se uma expressão é verdadeira com if, caso contrário o else será ativado.
14 |
15 | var possuiGraduacao = true;
16 |
17 | if(possuiGraduacao) {
18 | console.log('Possui graduação');
19 | } else {
20 | console.log('Não possui graduação');
21 | }
22 |
23 | // retorna Possui Graduação e não executa o else
24 | // verifica se o valor possuiGraduacao é true caso o valor não seja irá retornar no
25 | // else 'Não possui graduação'
26 | ```
27 |
28 | ## Condicionais else if
29 |
30 | ```js
31 | | Se o if não for verdadeiro, ele testará o else if
32 |
33 | var possuiGraduacao = true;
34 | var possuiDoutorado = false;
35 |
36 | if(possuiDoutorado) {
37 | console.log('Possui graduação e doutorado');
38 | } else if(possuiGraduacao) {
39 | console.log('Possui graduação, mas não possui doutorado');
40 | } else {
41 | console.log('Não possui graduação');
42 | }
43 | // retorna Possui Graduação, mas não possui doutorado
44 | // verifica se (if) o primeiro valor é true caso não ele utilizara se não ele coloca a condicional se não (else if) para verificar se a próxima variavel tem o valor true, caso não tenha ele utilizará o else para indicar que o valor é false e imprimir no console.log a seguinte frase 'Não possui graduação'
45 | ```
46 |
47 | ## Switch
48 |
49 | ```js
50 | | Com o switch você pode verificar se uma variável é igual à diferentes valores utilizando o case. Caso ela seja igual, você pode fazer alguma coisa e utilizar a palavra chave break; para cancelar a continuação. O valor de default ocorrerá caso nenhuma das anteriores seja verdadeira.
51 |
52 | // Definições de inglês para PT-BR
53 | | switch = trocar
54 | | break = quebrar // Quebrar o código ou parar
55 | | case = caso
56 |
57 | var corFavorita = 'Azul';
58 |
59 | switch (corFavorita) {
60 | case 'Azul':
61 | console.log('Olhe para o céu.');
62 | break;
63 | case 'Vermelho':
64 | console.log('Olhe para rosas.');
65 | break;
66 | case 'Amarelo':
67 | console.log('Olhe para o sol.');
68 | break;
69 | default:
70 | console.log('Feche os olhos');
71 | }
72 |
73 | // Definimos a váriavel como azul, nesse caso o console irá indicar a seguinte mensagem caso a cor escolhida for azul, olhe para o céu, caso a cor escolhida não for azul e o usuário escolher a cor Vermelho o console irá indicar 'Olhe para as rosas' e assim por diante até que algum ponto uma cor não foi predefinida.
74 | ```
75 |
76 | ## Truthy e False (Verdadadeiro ou Falso) / (Verdade / Falso)
77 |
78 | ```js
79 | | Existem valores que retornam true e outros que retornam false quando verificados em uma expressão booleana.
80 |
81 | // Falsy
82 | if(false)
83 | if(0) // ou -0
84 | if(NaN)
85 | if(null)
86 | if(undefined)
87 | if('') // ou "" ou ``
88 |
89 | // Truthy
90 | if(true)
91 | if(1)
92 | if(' ')
93 | if('andre')
94 | if(-5)
95 | if({})
96 | ```
97 |
98 | ## Operador Lógico de negação
99 |
100 | ```js
101 | | O operador !, nega uma operação booleana. Ou seja, !true é igual a false
102 |
103 | // Truthy
104 | if(!true) // false
105 | if(!1) // false
106 | if(!'') // true
107 | if(!undefined) // true
108 | if(!!' ') // true
109 | if(!!'') // false
110 |
111 | | Dica, você pode utilizar o !! para verificar se uma expressão é Truthy ou Falsy
112 | ```
113 |
114 | ## Operadores de comparação
115 |
116 | ```js
117 | | Vão sempre retornar um valor booleano
118 |
119 | 10 > 5; // true
120 | 5 > 10; // false
121 | 20 < 10; // false
122 | 10 <= 10 // true
123 | 10 >= 11 // false
124 |
125 | | O == faz uma comparação não tão estrita e o === faz uma comparação estrita, ou seja, o tipo de dado deve ser o mesmo quando usamos ===
126 |
127 | 10 == '10'; // true
128 | 10 == 10; // true
129 | 10 === '10'; // false
130 | 10 === 10 // true
131 | 10 != 15 // true
132 | 10 != '10' // false
133 | 10 !== '10' // true
134 | ```
135 |
136 | ## Operadores Lógicos &&
137 |
138 | ```js
139 | | && Compara se uma expressão e a outra é verdadeira
140 | // Caso haja algum valor definido como falso a expressão sempre será considerada falsa.
141 |
142 | true && true; // true
143 | true && false; // false
144 | false && true; // false
145 | 'Gato' && 'Cão'; // 'Cão'
146 | (5 - 5) && (5 + 5); // 0
147 | 'Gato' && false; // false
148 | (5 >= 5) && (3 < 6); // true
149 |
150 | | Se ambos os valores forem true ele irá retornar o último valor verificado Se algum valor for false ele irá retornar o mesmo e não irá continuar a verificar os próximos
151 | ```
152 |
153 | ## Operadores Lógicos ||
154 |
155 | ```js
156 | || Compara se uma expressão ou outra é verdadeira
157 |
158 | true || true; // true
159 | true || false; // true
160 | false || true; // true
161 | 'Gato' || 'Cão'; // 'Gato'
162 | (5 - 5) || (5 + 5); // 10
163 | 'Gato' || false; // Gato
164 | (5 >= 5) || (3 < 6); // true
165 |
166 | | Retorna o primeiro valor true que encontrar
167 |
168 |
169 |
--------------------------------------------------------------------------------
/boolean-e-condicionais/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/boolean-e-condicionais/script.js
--------------------------------------------------------------------------------
/dom/dom.md:
--------------------------------------------------------------------------------
1 | ## Anotações do DOM
2 |
3 | > Esse README é feito com o intuito de registrar minha anotações com a manipulação do DOM
4 |
5 | ## Selecionando elementos
6 |
7 | ```js
8 | | Selecionando o elemento com document.getElementById()
9 | | Retorna a referência do elemento através do seu ID.
10 |
11 | | Sintaxe:
12 |
13 | var elemento = document.getElementById(id);
14 |
15 | | elemento é uma referência a um objeto Element, ou null se um elemento com o ID especificado não estiver contido neste documento.
16 |
17 | | id é uma string que diferência maiúsculas e minúsculas representando o ID único do elemento sendo procurado.
18 | ```
19 |
--------------------------------------------------------------------------------
/dom/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/dom/index.html
--------------------------------------------------------------------------------
/dom/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/dom/script.js
--------------------------------------------------------------------------------
/exercicios/ex01.js:
--------------------------------------------------------------------------------
1 | var nome = "Arthur";
2 | var idade = 20;
3 |
4 | var comidaFavorita;
5 | comidaFavorita = "pizza";
6 |
7 | var timePrimario,
8 | timeSecundario,
9 | timeTerciario,
10 | timeQuartenario,
11 | timeQuintenario;
--------------------------------------------------------------------------------
/exercicios/ex02.js:
--------------------------------------------------------------------------------
1 | // Exercicio de váriaveis
2 |
3 | // Declare uma váriável contendo uma string
4 | var cor = 'Branca';
5 |
6 | //Declare uma variável contendo um número dentro de uma string
7 | var ano = '2002';
8 |
9 | // Declare uma váriável com a sua idade
10 | var idade = 20;
11 |
12 | // Declare duas variáveis, uma com seu nome
13 | // e outra com seu sobrenome e some as mesmas
14 | var nome = 'Arthur';
15 | var sobrenome = 'Coutinho';
16 | var nomeCompleto = `${nome} ${sobrenome}`
17 |
18 | // Coloque a seguinte frase em uma variável: It's time
19 | var frase = `It's time`
20 |
21 | // Verifique o tipo da variável que contém o seu nome
22 | console.log(typeof nome)
23 |
24 |
--------------------------------------------------------------------------------
/exercicios/ex03.js:
--------------------------------------------------------------------------------
1 | // Exercicio de Número e Operadores
2 |
3 | // Qual o resultado da seguinte expressão
4 |
5 | var total = 10 + 5 * 2 / 2 + 20;
6 | var resultado = 35;
7 |
8 | // Cria duas expressões que retornem NaN
9 |
10 | var expressao1 = '2kg';
11 | var expressao2 = 3;
12 | var resultado1 = (expressao1 / expressao2);
13 | console.log(resultado1)
14 |
15 | var numero1 = 'Dez'
16 | var numero2 = 2;
17 | var resultadoDaSoma = (numero1 * numero2);
18 | console.log(resultadoDaSoma)
19 |
20 | // Somar a string '200' com o número 50 e retornar 250
21 |
22 | var valor1 = '200';
23 | var valor2 = 50;
24 | var resultadoDosValores = (+valor1 + valor2)
25 | console.log(resultadoDosValores)
26 |
27 | // Incremente o número 5 e retorne o seu valor incrementado
28 |
29 | var incremento = 5;
30 | var incrementado = (++incremento)
31 | console.log(incrementado)
32 |
33 | // Como dividir o peso por 2?
34 |
35 | var numero = +'80' / 2;
36 | var unidade = 'kg';
37 | var peso = numero + unidade; // 80kg
38 | console.log(pesoPorDois)
39 |
--------------------------------------------------------------------------------
/exercicios/ex04.js:
--------------------------------------------------------------------------------
1 | // Exercício de Boolean e Condicionais
2 |
3 | // Verifique se a sua idade é maior do que a de algum parente
4 | // Dependendo do resultado coloque no console 'É maior', 'É igual' ou 'É menor'
5 |
6 | var minhaIdade = 20;
7 | var idadeParente = 43;
8 |
9 | if (minhaIdade > idadeParente) {
10 | console.log('É maior')
11 | } else if (minhaIdade === idadeParente) {
12 | console.log('É igual')
13 | } else (minhaIdade < idadeParente)
14 | console.log('É menor')
15 |
16 |
17 | // Qual valor é retornado na seguinte expressão?
18 | // 3 - Pois ambas expressões são true e o primeiro resultado da expressão é igual a 3
19 | var expressao = (5 - 2) && (5 - ' ') && (5 - 2);
20 | console.log(expressao)
21 |
22 |
23 | // Verifique se as seguintes variáveis são Truthy ou Falsy
24 | var nome = 'Andre';
25 | var idade = 28;
26 | var possuiDoutorado = false;
27 | var empregoFuturo;
28 | var dinheiroNaConta = 0;
29 |
30 | console.log(!!nome, !!idade, !!possuiDoutorado, !!empregoFuturo, !!dinheiroNaConta)
31 |
32 | // Compare o total de habitantes do Brasil com China (valor em milhões)
33 | var brasil = 207;
34 | var china = 1340;
35 |
36 | brasil > china;
37 | brasil < china;
38 | brasil <= china;
39 | brasil >= china;
40 |
41 |
42 | // O que irá aparecer no console?
43 | if(('Gato' === 'gato') && (5 > 2)) {
44 | console.log('Verdadeiro');
45 | } else {
46 | console.log('Falso');
47 | }
48 |
49 | Falso
50 |
51 | // O que irá aparecer no console?
52 | if(('Gato' === 'gato') || (5 > 2)) {
53 | console.log('Gato' && 'Cão');
54 | } else {
55 | console.log('Falso');
56 | }
57 |
58 | Undefined
--------------------------------------------------------------------------------
/exercicios/ex05.js:
--------------------------------------------------------------------------------
1 | // Exercicio de funções
2 |
3 | // Crie uma função para verificar se um valor é Truthy
4 |
5 | function isTruthy(dado) {
6 | return !!dado;
7 | }
8 |
9 | // Crie uma função matemática que retorne o perímetro de um quadrado
10 | // lembrando: perímetro é a soma dos quatro lados do quadrado
11 |
12 | function perimetroQuadrado(lado){
13 | return lado * 4;
14 | }
15 |
16 |
17 | // Crie uma função que retorne o seu nome completo
18 | // ela deve possuir os parâmetros: nome e sobrenome
19 |
20 | function nomeCompleto (nome, sobrenome) {
21 | return `${nome} + ${sobrenome}`;
22 | }
23 |
24 | // Crie uma função que verifica se um número é par
25 |
26 | function isEven(numero) {
27 | var modulo = numero % 2;
28 | if(modulo === 0) {
29 | return true;
30 | } else {
31 | return false;
32 | }
33 | }
34 |
35 | // Crie uma função que retorne o tipo de
36 | // dado do argumento passado nela (typeof)
37 |
38 | function tipoDeDado(dado) {
39 | return typeof dado;
40 | }
41 |
42 | // addEventListener é uma função nativa do JavaScript
43 | // o primeiro parâmetro é o evento que ocorre e o segundo o Callback
44 | // utilize essa função para mostrar no console o seu nome completo
45 | // quando o evento 'scroll' ocorrer.
46 | addEventListener('click', function(){
47 | console.log('Arthur Coutinho')
48 | });
49 |
50 |
51 | // Corrija o erro abaixo
52 |
53 | var totalPaises = 193;
54 |
55 | function precisoVisitar(paisesVisitados) {
56 | return `Ainda faltam ${totalPaises - paisesVisitados} países para visitar`;
57 | }
58 | function jaVisitei(paisesVisitados) {
59 | return `Já visitei ${paisesVisitados} do total de ${totalPaises} países`;
60 | }
61 |
62 | precisoVisitar(20);
63 |
64 |
--------------------------------------------------------------------------------
/exercicios/ex06.js:
--------------------------------------------------------------------------------
1 | // Exercicios sobre objetos
2 |
3 | // Crie um objeto com os seus dados pessoais
4 | // Deve possui pelo menos duas propriedades nome e sobrenome
5 |
6 | var meuNome = {
7 | nome: 'Arthur',
8 | sobrenome: 'Coutinho',
9 | }
10 |
11 | meuNome.nome = 'Arthur',
12 | meuNome.sobrenome = 'Coutinho'
13 |
14 | // Resolução Origamid
15 |
16 | // var meuNome = {
17 | // nome: 'Arthur',
18 | // sobrenome: 'Coutinho',
19 | // }
20 |
21 |
22 |
23 | // Crie um método no objeto anterior, que mostre o seu nome completo
24 |
25 | var meuNome = {
26 | nome: 'Arthur', // Propriedade & Valor
27 | sobrenome: 'Coutinho',
28 | nomeCompleto: function() {
29 | const teste = () => `${this.nome} ${this.sobrenome}`
30 | return teste()
31 | }
32 | }
33 |
34 | // Resolução Origamid
35 | // meuNome.nome.Completo = function() {
36 | // return `${this.nome} ${this.sobrenome}`
37 | // }
38 |
39 | function oi (){
40 | console.log ('oi')
41 | }
42 |
43 | const ola = () => console.log ('oi')
44 |
45 | meuNome.nome = 'Arthur'
46 | meuNome.sobrenome = 'Coutinho'
47 | const nomeCompleto = meuNome.nomeCompleto()
48 | console.log(nomeCompleto)
49 |
50 | // Modifique o valor da propriedade preco para 3000
51 | var carro = {
52 | preco: 1000,
53 | portas: 4,
54 | marca: 'Audi',
55 | }
56 |
57 | carro.preco = 3000;
58 |
59 | // Crie um objeto de um cachorro que represente um labrador,
60 | // preto com 10 anos, que late ao ver um homem
61 |
62 | var cachorro = {
63 | raca: 'labrador',
64 | color: 'preto',
65 | idade: 10,
66 | latir(){
67 | console.log('Au au au')
68 | },
69 | ver(coisa){
70 | if (coisa === 'homem'){
71 | this.latir()
72 | } else {
73 | console.log('Cachorro tá mec')
74 | }
75 | }
76 | }
77 |
78 | cachorro.ver('homem')
79 |
80 | // Ctrl + Alt + N - executar o code runner
81 | // Ctrl + Shift + p - Start on current file para executar o Quokka
--------------------------------------------------------------------------------
/exercicios/ex07.js:
--------------------------------------------------------------------------------
1 | var dados = {
2 | nome: 'Arthur',
3 | sobrenome: 'Coutinho',
4 | idade: 20,
5 | cidade: 'Maceió'
6 | }
7 |
8 | dados.nomeCompleto = function() {
9 | return `${this.nome} ${this.sobrenome}`;
10 | }
11 |
12 | var cachorro = {
13 | raca: 'labrador',
14 | cor: 'preto',
15 | idade: '10',
16 | latir(pessoa) {
17 | if(pessoa === 'homem'){
18 | return 'Latir';
19 | } else {
20 | return 'Nada';
21 | }
22 | }
23 | }
24 |
25 |
--------------------------------------------------------------------------------
/exercicios/ex08.js:
--------------------------------------------------------------------------------
1 | // nomeie 3 propriedades ou métodos de strings
2 | var nome = 'Arthur';
3 | nome.toLocaleLowerCase
4 | nome.toLocaleUpperCase
5 | nome.repeat
6 |
7 | // nomeie 5 propriedades ou métodos de elementos do DOM
8 |
9 | // busque na web um objeto (método) capaz de interagir com o clipboard,
10 | // clipboard é a parte do seu computador que lida com o CTRL + C e CTRL + V
11 |
--------------------------------------------------------------------------------
/exercicios/ex09.js:
--------------------------------------------------------------------------------
1 | // Crie uma array com os anos que o Brasil ganhou a copa
2 | // 1959, 1962, 1970, 1994, 2002
3 |
4 | var copa = ['1959', '1962', '1970', '1994', '2002']
5 |
6 | // Interaja com a array utilizando um loop, para mostrar
7 | // no console a seguinte mensagem, `O brasil ganhou a copa de ${ano}`
8 |
9 | var copa = ['1959', '1962', '1970', '1994', '2002']
10 | for (var i = 0; i < copa.length; i++){
11 | console.log(`O Brasil ganhou a copa de ${copa[i]}`)
12 | }
13 |
14 | // Interaja com um loop nas frutas abaixo e pare ao chegar em Pera
15 |
16 | var frutas = ['Banana', 'Maçã', 'Pera', 'Uva', 'Melância']
17 | for(var fruta = 0; fruta < frutas.length; fruta++) {
18 | console.log(frutas[fruta]);
19 | if(frutas[fruta] === 'Pera') {
20 | break;
21 | }
22 | }
23 |
24 | // Coloque a última fruta da array acima em uma variável,
25 | // sem remover a mesma da array.
26 |
27 | var frutas = ['Banana', 'Maçã', 'Pera', 'Uva', 'Melância']
28 | var fruta = (frutas[4])
29 | console.log(fruta)
--------------------------------------------------------------------------------
/exercicios/ex10.js:
--------------------------------------------------------------------------------
1 | // Some 500 ao valor de scroll abaixo,
2 | // atribuindo o novo valor a scroll
3 | var scroll = 1000;
4 | scroll += 500;
5 |
6 | console.log(scroll)
7 |
8 | // Atribua true para a variável darCredito,
9 | // caso o cliente possua carro e casa.
10 | // E false caso o contrário.
11 | var possuiCarro = true;
12 | var possuiCasa = false;
13 | var darCredito = 'Você recebeu créditos';
14 |
15 |
16 | if (possuiCarro && possuiCasa){
17 | console.log(darCredito);
18 | } else {
19 | console.log('Você não recebeu créditos')
20 | }
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/exercicios/ex11.js:
--------------------------------------------------------------------------------
1 | // Por qual motivo o código abaixo retorna com erros?
2 | {
3 | var cor = 'preto';
4 | const marca = 'Fiat';
5 | let portas = 4;
6 | }
7 | console.log(var, marca, portas);
8 |
9 |
10 |
11 | // Como corrigir o erro abaixo?
12 | function somarDois(x) {
13 | const dois = 2;
14 | return x + dois;
15 | }
16 | function dividirDois(x) {
17 | return x + dois;
18 | }
19 | somarDois(4);
20 | dividirDois(6);
21 |
22 | // O que fazer para total retornar 500?
23 | let numero = 50;
24 |
25 | for(let numero = 50; numero < 500; numero++) {
26 | console.log(numero);
27 | }
28 |
29 | const total = 10 * numero;
30 | console.log(total);
31 |
--------------------------------------------------------------------------------
/funcoes/funcoes.md:
--------------------------------------------------------------------------------
1 | ## Funções
2 |
3 | ```js
4 | | Bloco de código que pode ser executado e reutilizado. Valores podem ser passados por uma função e a mesma retorna outro valor.
5 |
6 | function areaQuadrado(lado) {
7 | return lado * lado;
8 | }
9 |
10 | areaQuadrado(4) // 16
11 | areaQuadrado(5) // 25
12 | areaQuadrado(2) // 4
13 |
14 | | Chamada de function declaration
15 | ```
16 |
17 | ## Funções²
18 |
19 | ```js
20 | function pi() {
21 | return 3.14;
22 | }
23 |
24 | var total = 5 * pi(); // 15.7
25 |
26 | | Parênteses () executam uma função
27 | ```
28 |
29 | ## Parâmetros e Argumentos
30 |
31 | ```js
32 | | Ao criar uma função, você pode definir parâmetros.
33 | | Ao executar uma função, você pode passar argumentos.
34 |
35 |
36 | // peso e altura são os parâmetros
37 | function imc(peso, altura) {
38 | const imc = peso / (altura ** 2);
39 | return imc;
40 | }
41 |
42 | imc(80, 1.80) // 80 e 1.80 são os argumentos
43 | imc(60, 1.70) // 60 e 1.70 são os argumentos
44 |
45 | | Separar por vírgula cada parâmetro. Você pode definir mais de um parâmetro ou nenhum também
46 | ```
47 |
48 | ## Parênteses executa a função
49 |
50 | ```js
51 | function corFavorita(cor) {
52 | if(cor === 'azul') {
53 | return 'Você gosta do céu';
54 | } else if(cor === 'verde') {
55 | return 'Você gosta de mato';
56 | } else {
57 | return 'Você não gosta de nada';
58 | }
59 | }
60 | corFavorita(); // retorna 'Você não gosta de nada'
61 |
62 | // Se apenas definirmos a função com o function e não executarmos a mesma, nada que estiver dentro dela irá acontecer
63 | ```
64 |
65 | ## Argumentos podem ser funções
66 |
67 | ```js
68 | | Chamadas de Callback, geralmente são funções que ocorrem após algum evento.
69 |
70 | addEventListener('click', function() {
71 | console.log('Clicou');
72 | });
73 | // A função possui dois argumentos
74 | // Primeiro é a string 'click'
75 | // Segundo é uma função anônima
76 |
77 | | Funções anônimas são aquelas em que o nome da função não é definido, escritas como function() {} ou () => {}
78 | ```
79 | ## Pode ou não retornar um valor
80 |
81 | ```js
82 | | Quando não definimos o return, ela irá retornar undefined. O código interno da função é executado normalmente, independente de existir valor de return ou não.
83 |
84 | function imc(peso, altura) {
85 | const imc = peso / (altura ** 2);
86 | console.log(imc);
87 | }
88 |
89 | imc(80, 1.80); // retorna o imc
90 | console.log(imc(80, 1.80)); // retorna o imc e undefined
91 | ```
92 |
93 | ## Valores retornados
94 |
95 | ```js
96 | | Uma função pode retornar qualquer tipo de dado e até outras funções.
97 |
98 | function terceiraIdade(idade) {
99 | if(typeof idade !== 'number') {
100 | return 'Informe a sua idade!';
101 | } else if(idade >= 60) {
102 | return true;
103 | } else {
104 | return false;
105 | }
106 | }
107 |
108 | | Cuidado, retornar diferentes tipos de dados na mesma função não é uma boa ideia.
109 | ```
110 |
111 | ## Escopo
112 |
113 | ```js
114 | | Variáveis e funções definidas dentro de um bloco {}, não são visíveis fora dele.
115 |
116 | function precisoVisitar(paisesVisitados) {
117 | var totalPaises = 193;
118 | return `Ainda faltam ${totalPaises - paisesVisitados} paises para visitar`
119 | }
120 | console.log(totalPaises); // erro, totalPaises não definido
121 | ```
122 |
123 | ## Escopo léxico
124 |
125 | ```js
126 | | Funções conseguem acessar variáveis que foram criadas no contexto pai
127 |
128 | var profissao = 'Designer';
129 |
130 | function dados() {
131 | var nome = 'André';
132 | var idade = 28;
133 | function outrosDados() {
134 | var endereco = 'Rio de Janeiro';
135 | var idade = 29;
136 | return `${nome}, ${idade}, ${endereco}, ${profissao}`;
137 | }
138 | return outrosDados();
139 | }
140 |
141 | dados(); // Retorna 'André, 29, Rio de Janeiro, Designer'
142 | outrosDados(); // retorna um erro
143 | ```
144 |
145 | ## Hoisting
146 | ```js
147 | | Antes de executar uma função, o JS 'move' todas as funções declaradas para a memória
148 |
149 | imc(80, 1.80); // imc aparece no console
150 |
151 | function imc(peso, altura) {
152 | const imc = peso / (altura ** 2);
153 | console.log(imc);
154 | }
155 | ```
--------------------------------------------------------------------------------
/funcoes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Funções
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/funcoes/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/funcoes/script.js
--------------------------------------------------------------------------------
/img/javascript.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/img/javascript.jpg
--------------------------------------------------------------------------------
/img/js.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/img/js.jpg
--------------------------------------------------------------------------------
/numeros-e-operadores/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Números e Operadores
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/numeros-e-operadores/numero-e-operadores.md:
--------------------------------------------------------------------------------
1 | ## Número e operadores
2 |
3 | ```js
4 |
5 | | Números
6 |
7 | var idade = 28;
8 | var gols = 1000;
9 | var pi = 3.14; // ponto para decimal
10 | var exp = 2e10; // 20000000000
11 |
12 | | Precisão para até 15 digitos
13 |
14 | ```
15 |
16 | ## Operadores Aritméticos
17 |
18 | ```js
19 | var soma = 100 + 50; // 150 // " + " Realiza a soma dos valores.
20 | var subtracao = 100 - 50; // 50 // " - " Realiza a subtração do valores.
21 | var multiplicacao = 100 * 2; // 200 // " * " Realiza a multiplicação do valores.
22 | var divisao = 100 / 2; // 50 // " / " Realiza a divisão dos valores
23 | var expoente = 2 ** 4; // 16 // " ** " Realiza a expoente entre o valor.
24 | var modulo = 14 % 5; // 4 // " % " Realiza o Módulo (resto da divisão) do valor
25 | var incremento = 1++ // 3 // " ++ " Realiza o incremento do valor 1++ = 3
26 | var decremento = 3-- // 1 // " -- " Realiza o Decremento do valor 3-- = 1
27 | ```
28 |
29 | ## Operadores Aritméticos com strings
30 |
31 | ```js
32 | var soma = '100' + 50; // 10050 // Faz a junção dos 2 valores
33 | var subtracao = '100' - 50; // 50 // Realiza a subtração dos valores
34 | var multiplicacao = '100' * '2'; // 200 // Realiza a multiplicação do valores
35 | var divisao = 'Comprei 10' / 2; // NaN (Not a Number) // Retorna NaN pois Comprei 10 não é um number, logo assim a sintaxe não consegue reconhecer "Comprei" como número.
36 | ```
37 |
38 | ## Operadores Aritméticos Unários
39 |
40 | ```js
41 |
42 | // Ao colocar o incremento após a váriavel ou número, ele somente irá ler no próximo console.log
43 | var incremento = 5;
44 | console.log(incremento++); // 5
45 | console.log(incremento); // 6
46 |
47 | // Ao colocar o incremento no inicio da váriavel o incremento será lido após a declaração do primeiro console.log
48 | var incremento2 = 5;
49 | console.log(++incremento2); // 6
50 | console.log(incremento2); // 6
51 |
52 | | A mesma coisa serve para decremento --x
53 | ```
54 |
55 | ## Guia completo de operadores
56 |
57 | | https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators
58 |
59 |
--------------------------------------------------------------------------------
/numeros-e-operadores/script.js:
--------------------------------------------------------------------------------
1 | var idade = 2e10;
2 | console.log(idade);
--------------------------------------------------------------------------------
/objetos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Funções
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/objetos/objetos.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/objetos/objetos.md
--------------------------------------------------------------------------------
/objetos/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arthurspk/javascript/3c8fc620df341732a15bf33be0c1e6457182e92e/objetos/script.js
--------------------------------------------------------------------------------
/scroll-suave/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Teste
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
--------------------------------------------------------------------------------
/scroll-suave/script.js:
--------------------------------------------------------------------------------
1 | // Método 1 - Scroll Suave para o topo
2 |
3 | // const btn = document.querySelector("#topo")
4 |
5 | // btn.addEventListener("click", function () {
6 | // window.scrollTo({
7 | // top: 0,
8 | // behavior: 'smooth'
9 | // })
10 | // })
11 |
12 |
13 | // Método 2 - Scroll suave para o tpo
14 | const btn = document.querySelector("#topo")
15 |
16 | function teste() {
17 | window.scrollTo({
18 | top: 0,
19 | behavior: 'smooth'
20 | })
21 | }
22 |
23 | btn.addEventListener('click', teste)
--------------------------------------------------------------------------------
/tipos de dados/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Tipos de dados
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/tipos de dados/script.js:
--------------------------------------------------------------------------------
1 | var nome = "Arthur";
2 | var idade = 20;
3 |
4 | var comidaFavorita;
5 | comidaFavorita = "pizza";
6 |
7 | var timePrimario,
8 | timeSecundario,
9 | timeTerciario,
10 | timeQuartenario,
11 | timeQuintenario;
12 |
13 | var timeUm,
14 | timeDois,
15 | timeTres,
16 | timeQuatro,
17 | timeCincos;
18 |
19 | const valorDoCarro = true
20 | let corDoCarro = 'Azul';
21 | let portasDoCarro = '4 Portas'
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/tipos de dados/tipos-de-dados.md:
--------------------------------------------------------------------------------
1 | ## Tipos de dados
2 |
3 | ```js
4 | | Tipos de dados
5 |
6 | var nome = 'Arthur'; // String = Tipo de declarável
7 | var idade = 28; // Number - Qualquer número
8 | var possuiFaculdade = true; // Boolean - True/false
9 | var time; // Undefined - Sem definação
10 | var comida = null; // Null
11 | var simbolo = Symbol() // Symbol
12 | var novoObjeto = {} // Object
13 |
14 | | Primitivos são dados imutáveis.
15 |
16 | ```
17 |
18 | ## Soma de string
19 |
20 | ```js
21 | | Como fazer a soma de uma string e concatenar a palavra
22 |
23 | var nome = 'André';
24 | var sobrenome = 'Rafael';
25 | var nomeCompleto = nome + ' ' + sobrenome;
26 | ```
27 |
28 | ## Aspas duplaas, Simples & Template String
29 |
30 | ```js
31 | 'JavaScript é "super" fácil';
32 | "JavaScript é 'super' fácil";
33 | "JavaScript é \"super\" fácil";
34 | `JavaScript é "super" fácil"`;
35 | "JavaScript é "super" fácil"; // Inválido
36 | ```
37 |
38 | ## Template String:
39 |
40 | ```js
41 | var gols = 1000;
42 | var frase1 = 'Romário fez ' + gols + ' gols';
43 | var frase2 = `Romário fez ${gols} gols`; | Utilizando Template String '' `` ''
44 |
45 |
--------------------------------------------------------------------------------
/variaveis/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Váriaveis
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/variaveis/script.js:
--------------------------------------------------------------------------------
1 | var nome = "Arthur";
2 | var idade = 20;
3 |
4 | var comidaFavorita;
5 | comidaFavorita = "pizza";
6 |
7 | var timePrimario,
8 | timeSecundario,
9 | timeTerciario,
10 | timeQuartenario,
11 | timeQuintenario;
12 |
13 | var timeUm,
14 | timeDois,
15 | timeTres,
16 | timeQuatro,
17 | timeCincos;
18 |
19 | const valorDoCarro = true
20 | let corDoCarro = 'Azul';
21 | let portasDoCarro = '4 Portas'
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/variaveis/variaveis.md:
--------------------------------------------------------------------------------
1 | ## VARIÁVEIS
2 |
3 | ```js
4 | | Responsáveis por guardar dados na memória.
5 | | Inicia com a palavra com:
6 |
7 | var
8 | let
9 | const
10 |
11 | var nome = 'Arthur';
12 | let idade = 20;
13 | const possuiFaculdade = true;
14 |
15 | ```
16 |
17 | ```js
18 | | Evitam repetições (DRY)
19 |
20 | var preco = 20;
21 | var totalComprado = 5;
22 | var precoTotal = preco * totalComprado;
23 |
24 | ```
25 |
26 | ```js
27 | | Sintaxe de uma váriavel
28 | | Palavra chave var seguida do nome, sinal de igual e o valor.
29 |
30 | var nome = 'Arthur';
31 | var idade = 28;
32 | var possuiFaculdade = true;
33 |
34 | ```
35 |
36 | ```js
37 | | Utilização da virgula em váriaveis
38 | | Utilizei a vírgula para criar mais de uma variável, sem repetir a palavra chave var.
39 |
40 | var nome = 'Arthur',
41 | idade = 28,
42 | possuiFaculdade = true;
43 |
44 | ```
45 |
46 | ```js
47 | | Variável sem valor
48 |
49 | var precoAplicativo;
50 | // retorna undefined
51 |
52 | ```
53 |
54 | ## Sintaxe de nome de váriaveis
55 |
56 | 1° - Os nomes podem iniciar com $, _, ou letras.
57 |
58 | 2° - Podem conter números mas não iniciar com eles
59 |
60 | 3° Case sensitive - O que é? Uma letra faz diferença em sua escrita
61 | Exemplo: nome é diferente de Nome
62 |
63 | 4° - Não utilizar palavras reservadas
64 | Lista de palavras reservadas: https://www.w3schools.com/js/js_reserved.asp
65 |
66 | 5° - Camel case
67 | É comum nomearmos assim: abrirModal
68 |
69 | ```js
70 |
71 | // Inválido
72 | var §nome;
73 | var function;
74 | var 1possuiFaculdade;
75 |
76 | // Válido
77 | var $selecionar;
78 | var _nome;
79 | var possuiFaculdadeNoExterior;
80 |
81 | ```
82 |
83 | ## Declaração e Hoisting
84 |
85 | ```js
86 | 1° - Declaração
87 | | Erro ao tentar utilizar uma variável que não foi declarada.
88 |
89 | console.log(nome);
90 | // retorna nome is not defined
91 |
92 | 2° - Hoisting
93 | | São movidas para cima do código, porém o valor atribuído não é movido.
94 |
95 | console.log(nome);
96 | var nome = 'André';
97 | // Retorna undefined
98 |
99 | var profissao = 'Designer';
100 | console.log(profissao);
101 | // Retornar Designer
102 | ```
103 |
104 | ## Alteração de valores com váriáveis
105 |
106 | | É possível mudar os valores atribuídos a variáveis declaradas com var e let. Porém não é possível modificar valores das declaradas com const
107 |
108 | | Exemplo:
109 |
110 | ```js
111 | var idade = 28;
112 | idade = 29;
113 |
114 | let preco = 50;
115 | preco = 25;
116 |
117 | const possuiFaculdade = true;
118 | possuiFaculdade = false;
119 | // Retorna um erro
120 | ```
--------------------------------------------------------------------------------