├── 1_Introducao
└── 1_Hello-World.md
├── 2_Resumo
└── 1_Resumo.md
├── 3_Ambiente
└── 1_Editores-e-plugins.md
├── 4_Basico
├── 10_Exceptions.md
├── 11_Operadores_de_Atribuicao.md
├── 12_PrincipaisMetodosArray.md
├── 13_Entendendo_o_this.md
├── 14_Objetos.md
├── 15_Promise.md
├── 1_Saida.md
├── 2_Comentarios.md
├── 3_Tipos-de-dados.md
├── 4_Variaveis.md
├── 5_Operadores-Aritmeticos.md
├── 6_Operadores-Logicos.md
├── 7_Condicionais.md
├── 8_Estruturas-de-repeticao.md
└── 9_Funcoes.md
├── 5_DOM-DocumentObjectModel
├── 1_Introducao.md
├── 2_Metodos-DOM.md
├── 3_Acessando-Elementos.md
├── 4_Alterando-Elementos.md
├── 5_Removendo-Elementos.md
├── 6_Event-Handlers.md
└── 7_Event-Listener.md
├── 6_Atividades
├── Atividades.txt
└── Resolucao-Atividades-01.js
├── LICENSE
├── README.md
└── assets
├── 3-1-saida-exemplo.png
├── gavetaObj.png
├── javascript.png
├── navigator.png
├── promise_catch_result.png
├── promise_then_result.png
└── retorno_da_promise.png
/1_Introducao/1_Hello-World.md:
--------------------------------------------------------------------------------
1 | ## 1.1 Hello World
2 |
3 | JavaScript é uma linguagem de programação que apareceu pela primeira vez na década de 90, com o intuito de dar aos navegadores seu primeiro tipo de funcionalidade inteligente.
4 |
5 | O JavaScript moderno é realmente um alvo amplo e comovente. Você pode ter aprendido JavaScript há cinco anos e algumas dessas técnicas podem ser consideradas antigas pelos padrões de hoje, assim como você conhece técnicas de JavaScript de mais de 20 anos atrás, que ainda são consideradas práticas recomendadas modernas.
6 | Aqui no nosso curso daremos um guia através dos vários detalhes de JavaScript para aprender o JavaScript moderno, como é conhecido hoje.
7 |
8 | ### Um pouco de história
9 |
10 | ECMAScript é a especificação na qual o JavaScript se baseia. Como especificação, significa que o ECMAScript é um modelo ao qual os motores JavaScript (implementações) devem aderir. O ECMAScript esteve relativamente estagnado até 2015 com o aparecimento do *ECMAScript 6* - antes disso, o ECMAScript 3 foi publicado em 1999, o ECMAScript 4 foi abandonado, o ECMAScript 5 foi publicado em 2009 e o ECMAScript 5.1 foi publicado em 2011.
11 |
12 | O lançamento do ECMAScript 6 em 2015 marcou mudanças significativas para abordar os recursos exigidos pelo crescimento explosivo do JavaScript. E a velocidade das alterações de recursos foi tão grande que o ECMAScript 7 se tornou realidade em 2016 e o ES8 em 2017.
13 |
14 | #### Por que isso é importante?
15 |
16 | Porque você enfrentará constantemente situações em que o JavaScript comum é compatível com ES5 / ES5.1, ES6, ES7 ou ES8.
17 |
18 | Será JavaScript da mesma forma, mas não será executado em todos os motores JavaScript, porque estes estão em constante fluxo para suportar diferentes versões do ES.
19 |
20 | ### Motores JavaScript
21 |
22 | *Para ficar claro, um "motor JavaScript" é basicamente um programa que lê código JavaScript e roda ele.*
23 |
24 | A seguir, é apresentada uma lista dos principais motores JavaScript e seu suporte a ES:
25 |
26 | ##### SpiderMonkey
27 |
28 | Usado pelo navegador Firefox e Adobe Acrobat. Suporta ES5.1, recursos do ES6, ES7 e ES8.
29 |
30 | ##### V8
31 |
32 | Usado pelo navegador Google Chrome, Opera e Node.js. Suporta ES6 e recursos do ES7 e ES8.
33 |
34 | ##### WebKit
35 |
36 | Usado pelo navegador Apple Safari. Suporta ES6 e recursos do ES7 e ES8.
37 |
38 | ##### Chakra
39 |
40 | Usado pelo navegador Microsoft Edge. Suporta ES5.1 e recursos do ES6, além de alguns recursos do ES7.
41 |
42 | [Proximo Capitulo](../2_Resumo/1_Resumo.md)
--------------------------------------------------------------------------------
/2_Resumo/1_Resumo.md:
--------------------------------------------------------------------------------
1 | # 2.1 Resumo
2 |
3 | ## JavaScript
4 |
5 | O JavaScript é uma linguagem de programação interpretada, conhecida também como linguagem de script em alto nível para páginas Web, sendo uma linguagem leve e multi-paradigma, consistindo as três tecnologias principais da World Wide Web.
6 |
7 | Permitindo tornar as aplicações interativas, o JavaScript é uma parte essencial da web, compondo a grande maioria dos sites disponíveis e também ganhando um espaço dedicado do motor dos principais navegadores acessíveis.
8 |
9 | **Nota:**
10 | Nem todos os motores fazem somente interpretação do código.
11 | Alguns também tem passos de compilação durante a execução, conhecido como JIT (Just In Time), mas não precisa se preocupar com isso por enquanto.
12 |
13 | ## História
14 |
15 | Tudo nasceu com a Netscape, com a criação do Netscape Navigator, *Imagem 1*, que em pouco tempo o navegador mais dominante dessa década, logo chegou à conclusão que a web teria que se tornar mais dinâmica, pois o Navigator tinha sempre que fazer uma requisição ao servidor para obter uma resposta do navegador.
16 |
17 |
24 |
25 |
26 | Em 1995 a Netscape contratou Brendan Eich para criar uma linguagem que proporcionasse esse dinamismo no navegador. A proposta inicial era a implementação da linguagem Scheme, baseada em LISP, puramente funcional, no Navigator. Porém a Netscape tinha projetos anteriores em conjunto com a Sun Microsystems para colocar sua mais recente e promissora linguagem de programação, o Java, no Navigator. Isso elevou uma discussão interna do motivo de ter duas linguagens.
27 |
28 | Obviamente predominou a escolha de uma única linguagem com a sintaxe baseada em Java. O argumento foi que o Scheme, por ter uma sintaxe e complexidade características de linguagens funcionais, se tornaria impopular (conforme o código abaixo). O objetivo da Netscape com a nova linguagem era exatamente o oposto.
29 |
30 | ```scheme
31 | (import
32 | (rnrs)
33 | (ironscheme clr))
34 |
35 | ;Define a function write-ln
36 | (define (write-ln fmt . args)
37 | (clr-static-call System.Console WriteLine (clr-cast System.String fmt)
38 | (clr-cast System.Object[]
39 | (list->vector args))))
40 |
41 | ; And invoke it!
42 | (write-ln "{0}" "Hello World!")
43 | ```
44 |
45 |
46 |
47 | *Código de exemplo da linguagem Scheme.*
48 |
49 |
50 |
51 |
52 | Mesmo com sintaxe “javanesa” e com outras características do Java (valores primitivos e objetos), o JavaScript logo de início sofreu a influência funcional do Scheme, e mais tarde de linguagens como o Self (protótipos), Perl e Python (Strings, arrays e expressões regulares).
53 |
54 | Para defender o JavaScript contra outras propostas, um protótipo foi criado por Eich em dez dias, em Maio de 1995. Marc Andreesen nomeou o protótipo de Mocha. O nome da linguagem mudou de novo para LiveScript por causa de patentes e porque vários produtos estavam levando o “Live” como sufixo. No começo de Dezembro de 1995, o Java estava no seu ápice e a linguagem foi renomeada para JavaScript.
55 |
56 | ### O ECMAScript
57 |
58 | Depois que o JavaScript foi criado, a Microsoft criou, em Agosto de 1996, uma linguagem idêntica para ser usada no Internet Explorer 3. Para conter a ambição da Microsoft, a Netscape decidiu normatizar a linguagem através da organização ECMA International, companhia que era especializada em padrões e normativas.
59 |
60 | Os trabalhos em cima da normativa ECMA-262 começaram em Novembro de 1996. O nome JavaScript já era patenteado pela Sun Microsystems (hoje Oracle) e não poderia ser usado. Portanto, o nome composto por ECMA e JavaScript foi usado, resultando em ECMAScript.
61 |
62 | O ECMAScript esteve relativamente estagnado até 2015 com o aparecimento do *ECMAScript 6* - antes disso, o ECMAScript 3 foi publicado em 1999, o ECMAScript 4 foi abandonado, o ECMAScript 5 foi publicado em 2009 e o ECMAScript 5.1 foi publicado em 2011.
63 |
64 | O lançamento do ECMAScript 6 em 2015 marcou mudanças significativas para abordar os recursos exigidos pelo crescimento explosivo do JavaScript. E a velocidade das alterações de recursos foi tão grande que o ECMAScript 7 se tornou realidade em 2016 e o ES8 em 2017. E hoje em dia temos o ECMAScript 11.
65 |
66 | #### Por que isso é importante?
67 |
68 | Porque você enfrentará constantemente situações em que o JavaScript comum é compatível com ES5 / ES5.1, ES6, ES7 ou ES8.
69 |
70 | Será JavaScript da mesma forma, mas não será executado em todos os motores JavaScript, porque estes estão em constante fluxo para suportar diferentes versões do ES.
71 |
72 | ### Motores JavaScript
73 |
74 | *Para ficar claro, um "motor JavaScript" é basicamente um programa que lê código JavaScript e roda ele.*
75 |
76 | A seguir, é apresentada uma lista dos principais motores JavaScript e seu suporte a ES:
77 |
78 | ##### SpiderMonkey
79 |
80 | Usado pelo navegador Firefox e Adobe Acrobat. Suporta ES5.1, recursos do ES6, ES7 e ES8.
81 |
82 | ##### V8
83 |
84 | Usado pelo navegador Google Chrome, Opera e Node.js. Suporta ES6 e recursos do ES7 e ES8.
85 |
86 | ##### WebKit
87 |
88 | Usado pelo navegador Apple Safari. Suporta ES6 e recursos do ES7 e ES8.
89 |
90 | ##### Chakra
91 |
92 | Usado pelo navegador Microsoft Edge. Suporta ES5.1 e recursos do ES6, além de alguns recursos do ES7.
93 |
94 | [Proximo Capitulo](../3_Ambiente/1_Editores-e-plugins.md)
--------------------------------------------------------------------------------
/3_Ambiente/1_Editores-e-plugins.md:
--------------------------------------------------------------------------------
1 | ## 3.1 Editor de Texto
2 |
3 | Como a abordagem do curso será a parte básica do JavaScript, não será necessário o uso de uma IDE robusta.
4 | Portanto, utilizaremos o Visual Studio Code para escrevermos nossos códigos.
5 |
6 | Caso tenham preferência por algum outro editor ou mesmo uma IDE, fiquem a vontade para utilizá-la a fim de realizar os códigos que serão apresentados ao longo do curso.
7 |
8 | [Proximo Capitulo](../4_Basico/1_Saida.md)
9 |
--------------------------------------------------------------------------------
/4_Basico/10_Exceptions.md:
--------------------------------------------------------------------------------
1 | # 4.10 - Exceptions
2 |
3 | Descrição: Uma exceção representa uma situação que normalmente não ocorre e representa algo de estranho ou inesperado no sistema.
4 |
5 | `try` - permite definir um bloco de código a ser testado quanto a erros enquanto ele está sendo executado.
6 |
7 | `catch` - instrução permite definir um bloco de código a ser executado, se ocorrer um erro no bloco `try`.
8 |
9 | A `throw` permite criar erros personalizados.
10 |
11 | A `finally` permite executar o código, após tentar e capturar, independentemente do resultado.
12 |
13 | ```javascript
14 | try {
15 | // Bloco do código
16 | } catch (err) {
17 | // Código para lidar com os erros
18 | }
19 | ```
20 |
21 | Exemplo:
22 | ```javascript
23 | function UserException(message) {
24 | this.message = message;
25 | this.name = "UserException";
26 | }
27 |
28 | function getMonthName(mes) {
29 | mes = mes - 1; // Ajusta o número do mês para index de array (1=Jan, 12=Dec)
30 | var meses = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
31 |
32 | if (meses[mes] !== undefined) {
33 | return meses[mes];
34 | } else {
35 | throw new UserException("MesInvalido");
36 | }
37 | }
38 |
39 | try {
40 | // statements to try
41 | var meuMes = 15; // 15 não é um valor válido.
42 | nomeMes = getMonthName(meuMes);
43 | } catch (e) {
44 | nomeMes = "não informado";
45 | console.log(e.message, e.name); // mostra no console a mensagem e o erro que foram pegos.
46 | }
47 | ```
48 | [Proximo Capitulo](./11_Operadores_de_Atribuicao.md)
--------------------------------------------------------------------------------
/4_Basico/11_Operadores_de_Atribuicao.md:
--------------------------------------------------------------------------------
1 | # 4.11 - Operadores de Atribuição
2 |
3 | Descrição: Operadores de atribuição são capazes de atribuir valores ao operando da esquerda baseado no operando da direita.
4 |
5 | Além o operador de atribuição básico(`=`), é possível utilizar os operadores aritméticos(`+`, `-`, `*`, `/`, `**` e `%`) em conjunto com o operador de atribuição. Permitindo realizar operações aritméticas entre os operandos e, em seguida, armazenar o valor.
6 |
7 | Tabela dos operadores e seus significados:
8 | | Operador | Significado |
9 | | -------- | ----------- |
10 | | x = y | x = y |
11 | | x += y | x = x + y |
12 | | x -= y | x = x - y |
13 | | x *= y | x = x * y |
14 | | x /= y | x = x / y |
15 | | x **= y | x = x ** y |
16 | | x %= y | x = x % y |
17 |
18 | Exemplos de uso:
19 | ```javascript
20 | let foo = 2;
21 | const bar = 3;
22 |
23 | foo += bar; // foo = foo + bar = 2 + 3
24 | console.log(foo); // 5
25 |
26 | foo *= bar; // foo = foo * bar = 5 * 3
27 | console.log(foo); // 15
28 | ```
29 |
30 | > *Atenção, diferente de outras linguagens de programação, o JavaScript não permite alterar a ordem do operador para realizar as operações. Pode gerar erros ou resultados indesejados.*
31 |
32 | Exemplo:
33 |
34 | ```javascript
35 | let foo = 2;
36 |
37 | foo =+ '9'; // foo = +'9' = 9
38 | console.log(foo); // 9
39 |
40 | foo =- '9'; // foo = -'9' = -9
41 | console.log(foo); // -9
42 |
43 | foo =* 5; // Erro de sintaxe
44 | console.log(foo); // Não é executado pois ocorreu um erro na linha anterior
45 | ```
46 |
47 | [Proximo Capitulo](./12_PrincipaisMetodosArray.md)
--------------------------------------------------------------------------------
/4_Basico/12_PrincipaisMetodosArray.md:
--------------------------------------------------------------------------------
1 | # 4.11 - Principais métodos de Array
2 |
3 | ## Map
4 |
5 | O método map é utilizado geralmente quando você deseja percorrer um array e fazer uma alteração em cada elemento. E como consequência o método map gerar um array novo.
6 | ### Argumentos
7 |
8 | 1. Valor atual: É o item atual do array com que a função está trabalhando
9 |
10 | 2. Índice ou index: Esse valor é o índice do item dentro do array no qual você está trabalhando.
11 |
12 | 3. Array original: Você pode pegar todo o array e trabalhar com ele dentro do map também.
13 |
14 | Os 3 argumentos são recebidos na função de callback que você irá passar para dentro do map.
15 |
16 | ```javascript
17 |
18 | const numeros = [1,2,3,4,5]
19 | const adicionarUm = numeros.map((number, index, array) => {
20 |
21 | console.log(`Índice ${index} - Number: ${number}`);
22 | console.log('Array de origem:');
23 | console.table(array); // Vai mostrar o índice e cada valor do array no índice em questão
24 | return number + 1;
25 | })
26 | console.log(adicionarUm)
27 | /** Saida
28 | * Índice 0 - Number: 1
29 | Array de origem:
30 | Índice 1 - Number: 2
31 | Array de origem:
32 | Índice 2 - Number: 3
33 | Array de origem:
34 | Índice 3 - Number: 4
35 | Array de origem:
36 | Índice 4 - Number: 5
37 | Array de origem:
38 | [ 2, 3, 4, 5, 6 ]
39 | */
40 | ```
41 | ## Filter
42 |
43 | O método filter é usado para filtrar os itens de um array e apenas devolver aqueles que satisfazem a condição passada na função.
44 |
45 | ### Argumentos
46 |
47 | 1. Valor atual: É o item atual do array com que a função está trabalhando
48 |
49 | 2. Índice ou index: Esse valor é o índice do item dentro do array no qual você está trabalhando.
50 |
51 | 3. Array original: Você pode pegar todo o array e trabalhar com ele dentro do filter também.
52 |
53 | Os 3 argumentos são recebidos na função de callback que você irá passar para dentro do map.
54 |
55 | > O segundo e terceiro parâmetro (Índice e Array original) se repetem logo não irei adicionar novos exemplos deles.
56 |
57 | ```javascript
58 | const numeros = [1,2,3,4,5]
59 | const apenasNumerosImpares = numeros.filter((numero, indice, array) => {
60 | return numero % 2 !== 0;
61 | });
62 | console.log(apenasNumerosImpares)
63 | /**
64 | * Saida
65 | * [ 1, 3, 5 ]
66 | */
67 | ```
68 |
69 | ## Reduce
70 |
71 | Como o nome sugere o método reduce é usado para reduzir o array para um único valor.
72 |
73 | ### Argumentos
74 |
75 | 1. Acumulador: Essa parâmetro é responsável por guardar todo o valor acumulado durante a execução do reduce. O mesmo será retorno no fim da execução.
76 |
77 | 2. Valor atual: É o valor atual do array.
78 |
79 | 4. Índice ou index: Esse valor é o índice do item dentro do array no qual você está trabalhando.
80 |
81 | 5. Array original: Você pode pegar todo o array e trabalhar com ele dentro do filter também.
82 |
83 | ```javascript
84 | const numeros = [1,2,3,4,5]
85 | const somaDeTodosOsValoresDoArray = numeros.reduce((acumulador, valorAtual) => {
86 | return acumulador + valorAtual
87 | });
88 | console.log(somaDeTodosOsValoresDoArray);
89 | /**
90 | * Saida
91 | * > 15
92 | */
93 |
94 | const nome = ['D','a','n','i','e','l'];
95 | const nomeConcatenado = nome.reduce((acumulador, letra) => {
96 | return acumulador + letra;
97 | });
98 | console.log(nomeConcatenado);
99 | /**
100 | * Saida
101 | * > Daniel
102 | */
103 | ```
104 | ## Join
105 |
106 | O método join junta todos os elementos de um array em uma única string.
107 |
108 | ### Argumentos
109 |
110 | 1. Separador: Especifica a string que vai separar os elementos
111 |
112 | > Caso o separador seja omitido, os elementos vão ser separados por virgula
113 |
114 | ```javascript
115 | const palavras = ["Aprendendo", "como", "o", "Javascript", "funciona"]
116 | const frase = palavras.join(" ")
117 | console.log(frase)
118 |
119 | /**
120 | * Saida
121 | * > Aprendendo como o Javascript funciona
122 | */
123 |
124 | // Note que o separador é um espaço em branco " ", é diferente de ""
125 | // Se o separador fosse "", as palavras não iriam ser separadas por espaço
126 | ```
127 |
128 | ## Push
129 |
130 | O método push adiciona N elementos no final do array e retorna o valor do novo tamanho do array
131 |
132 | ### Argumentos
133 |
134 | 1. Elementos a serem adicionados
135 |
136 | ```javascript
137 | const numeros = [1,2,3,4,5]
138 | const novoTamanho = numeros.push(6,7,8,9)
139 | console.log(numeros) // Saida: [1, 2, 3, 4, 5, 6, 7, 8, 9]
140 | console.log(novoTamanho) // Saida: 9
141 | ```
142 |
143 | ## Pop
144 |
145 | O método pop remove o último elemento do array, e retorna o valor do elemento removido
146 | > Pop não recebe parãmetros
147 |
148 | ```javascript
149 | const numeros = [1, 2, 3, 4, 5]
150 | const elementoRemovido = numeros.pop();
151 | console.log(numeros) // Saida: [1, 2, 3, 4]
152 | console.log(elementoRemovido) // Saida: 5
153 | ```
154 |
155 | ## Unshift
156 | O método unshift adiciona N elementos no inicio do array e, assim como o push, retorna o valor do novo tamanho do array
157 |
158 | ### Argumentos
159 |
160 | 1. Elementos a serem adicionados
161 |
162 | ``` javascript
163 | const numeros = [5, 6, 7, 8]
164 | const novoTamanho = numeros.unshift(1, 2, 3, 4)
165 | console.log(numeros) // Saida: [1, 2, 3, 4, 5, 6, 7, 8]
166 | console.log(novoTamanho) // Saida: 8
167 | ```
168 |
169 | ## Shift
170 |
171 | O método shift remove o primeiro elemento do array, e assim como o método pop, retorna o valor do elemento removido
172 | > Shift não recebe parãmetros
173 |
174 | ```javascript
175 | const numeros = [1, 2, 3, 4, 5]
176 | const elementoRemovido = numeros.shift()
177 | console.log(numeros) // Saida: [2, 3, 4, 5]
178 | console.log(elementoRemovido) // Saida: 1
179 | ```
180 |
181 | ## Concat
182 |
183 | O método concat concatena os dados de um ou mais arrays
184 |
185 | ### Argumentos
186 |
187 | 1. Array a se concatenar
188 |
189 | ```javascript
190 | const comidas = ["Cereal","Sanduíche","Mingau"]
191 | const bebidas = ["Café","Suco de Laranja"]
192 | const cafeDaManha = comidas.concat(bebidas)
193 | console.log(cafeDaManha) // Saida: ["Cereal","Sanduíche","Mingau","Café","Suco de Laranja"]
194 | ```
195 |
196 | ## Length
197 |
198 | O método length retorna o tamanho de um array
199 | > length não recebe parâmetros
200 |
201 | ```javascript
202 | const linguagens = ["Javascript","C#","PHP","Golang"]
203 | const tamanho = linguagens.length
204 | console.log(tamanho) // Saida: 4
205 | ```
206 |
207 | ## Every
208 |
209 | O método every passa por todos elementos do array, verificando se todos os elementos do array obedecem ao critério retornando `true` ou `falso`
210 |
211 | ### Argumentos
212 |
213 | 1. Elementos a serem verificados
214 |
215 | ```javascript
216 | const numbers = [2,4,6,8,10,12]
217 | numbers.every(number => number%2 == 0) //true pois verificou que todos os numeros são pares
218 | ```
219 |
220 | ## Some
221 |
222 | O método some passa por todos elementos do array, verificando se pelo menos 1 dos elementos obedece as condições e retorna `true`
223 |
224 | ### Argumentos
225 |
226 | 1. Elementos a serem verificados
227 |
228 | ```javascript
229 | const users = ["Luiz","Carla","Daniel","Vanessa"]
230 | if (users.some(user => user === "Daniel")) { //true pois o usuário Daniel já existe dentro do array
231 | console.log("User already exists!");
232 | }
233 | ```
234 |
235 | [Proximo Capitulo](./13_Entendendo_o_this.md)
--------------------------------------------------------------------------------
/4_Basico/13_Entendendo_o_this.md:
--------------------------------------------------------------------------------
1 | # 4.13 Entendendo o this no Javascript.
2 |
3 | ## A palavra "this".
4 |
5 | A palavra this, dentro da linguagem Javascript tem um papel importantíssimo ao referir-se ao escopo no qual aquela linha de código está sendo construida.
6 |
7 | ### O que é o escopo ?
8 |
9 | Para entendermos escopo, podemos fazer a seguinte analogia:
10 |
11 | Dentro de um país, temos diversos estados, e dentro dos estados temos municípios e dentro desse último os bairros. No código, por sua vez, temos o escopo do node, que seria equivalente ao país, o escopo do módulo, que seria os estados, e por fim as classes que podem ter funções dentro delas com seus escopos próprios.
12 |
13 | Ou seja, há diferentes "reinos" dentro de um mesmo arquivo .JS, de forma que uma variável dentro de uma função não é acessível para quem está fora dela, ou então o valor de uma variável que está fora, pode ser alterada dentro de uma classe, porém seu valor fora dela continua não mudando.
14 |
15 | Para poder transitar entre os diferentes escopos usamos a palavra reservada "this".
16 |
17 | ### O this na prática.
18 |
19 | ```javascript
20 | // No primeiro exemplo, teremos a let C dentro do escopo da função.
21 |
22 | function Exemplo() {
23 | let c = 10;
24 | return console.log(c);
25 | }
26 | Exemplo();
27 | console.log(c);
28 |
29 | // Espera-se recebermos um erro de que "C" não está definida.
30 |
31 | /*Agora faremos um exemplo elevando o escopo da variável c,
32 | permitindo que ela seja acessada fora do escopo da função */
33 |
34 | function Exemplo() {
35 | this.c = 10;
36 | return console.log(c);
37 | }
38 | Exemplo();
39 | console.log(c);
40 |
41 | // Espera-se receber 10 em ambas as chamadas.
42 | ```
43 |
44 | ### O escopo global: node.
45 |
46 | Como dito anteriormente, a palavra this permite que possamos acessar escopos mais elevados do que estamos, sendo o mais alto deles o escopo do próprio node, ganhando acesso a propriedades como o prototype dos objetos, podemos, então, definir uma nova constante dentro da própria classe Object usando o this.
47 |
48 | ```javascript
49 |
50 | this.Object.prototype = {
51 | A: "Nova variável";
52 | }
53 | ```
54 |
55 | ### Cuidados que devemos ter com o this.
56 |
57 | O this é uma palavra poderosa dentro do Javascript, porém perigosa. O uso dele deve ser restrito a cenários onde é necessário acessar uma variável que está acima e deve se evitar ao máximo chegar no escopo do módulo. Isso porque o uso excessivo do this pode causar uma confunção no código sobre responsabilidades e localização conforme a aplicação for escalonando.
58 |
59 | É preferível que crie-se classes ou componentes e os importe ( via sistema de módulos) do que usar descontroladamente o this.
60 |
61 | [Proximo Capitulo](./14_Objetos.md)
--------------------------------------------------------------------------------
/4_Basico/14_Objetos.md:
--------------------------------------------------------------------------------
1 | # 4.14 Objetos
2 |
3 | ## o que é um objeto?
4 |
5 | É bem simples. Podemos imaginar um objeto como sendo uma gaveta, onde nessa gaveta existem pastas. Cada dado é armazenado em seu arquivo pela chave. Confira na figura a seguir:
6 |
7 | 
8 |
9 | A sintaxe de um objeto também é bem simples. Exemplo:
10 | ```javascript
11 | let he4rt = {
12 | comunidade: "Ativa",
13 | devs: "Incríveis"
14 | };
15 | ```
16 | Nesse exemplo, temos o objeto "he4rt", onde as chaves desse objeto são "comunidade" e "devs". Essas chaves também podem conter outros objetos, funções etc.
17 |
18 | Também é possível criar um objeto vazio através do "object constructor". Exemplo:
19 | ```javascript
20 | let user = new Object();
21 | let user = {}
22 | ```
23 |
24 | Para adicionar porteriormente uma key num objeto já criado, basta usar o ponto (.). Exemplo:
25 | ```javascript
26 | let he4rt = {
27 | comunidade: "Ativa",
28 | devs: "Incríveis"
29 | };
30 | console.log(he4rt) // {comunidade: "Ativa", devs: "Incríveis"}
31 | // ADICIONANDO UMA NOVA KEY
32 | he4rt.key = "adicionada"
33 | console.log(he4rt) // {comunidade: "Ativa", devs: "Incríveis", key: "adicionada"}
34 | ```
35 |
36 | Outra forma de adicionar objetos, é usando []. Exemplo:
37 | ```javascript
38 | let he4rt = {
39 | comunidade: "Ativa",
40 | devs: "Incríveis"
41 | };
42 |
43 | he4rt["nome"] = "Vitor"
44 |
45 | console.log(he4rt) // {comunidade: "Ativa", devs: "Incríveis", nome: "Vitor"}
46 | ```
47 |
48 | Agora que conseguimos declara-los em hard code, um vazio, e adicionar uma chave em um objeto já declarado, como remover? Exemplo:
49 | ```javascript
50 | let he4rt = {
51 | comunidade: "Ativa",
52 | devs: "Incríveis"
53 | };
54 | console.log(he4rt) // {comunidade: "Ativa", devs: "Incríveis"}
55 |
56 | delete he4rt.devs;
57 | console.log(he4rt) // {comunidade: "Ativa"}
58 | ```
59 |
60 | ### Acessando objetos
61 |
62 | Agora que conseguimos manipular a criação e como deletar chaves num objeto, como podemos imprimir a frase "Hello World" usando duas keys dentro de um objeto? Simples.
63 |
64 | ```javascript
65 | let helloWorld = {
66 | hello: "Hello ",
67 | world: "World"
68 | }
69 |
70 | console.log(helloWorld.hello + helloWorld.world) // Hello World
71 | ```
72 | Aqui, estou dizendo para. entrar em "helloWorld" e acessar "hello." Dessa forma, o "console.log" conseguiu imprimir a string da chave.
73 |
74 | [Proximo Capitulo](../5_DOM-DocumentObjectModel/1_Introducao.md)
--------------------------------------------------------------------------------
/4_Basico/15_Promise.md:
--------------------------------------------------------------------------------
1 | # Promise
2 |
3 | As Promises ou Promessa traduzido para o português, é nada mais que um objeto javascript que sempre retorna um resultado seja de sucesso ou erro.
4 |
5 | ### Funcionamento da promise
6 |
7 | A promise sempre irá retornar um resultado independente se for de sucesso ou erro, e ainda assim é possível definir o que irá retornar em caso de sucesso ou em caso de erro. Vamos ver na prática para entendermos melhor.
8 |
9 | Eu tenho uma função que a partir de dois parâmetros soma e retorna o calculo.
10 |
11 | ```
12 | function calcular(soma1, soma2) {
13 | return soma1 + soma2;
14 | }
15 | ```
16 |
17 | A partir do resultado da função de `calcular()` eu quero decidir se será retornado o resultado da função ou então caso ocorra um erro o que seria retornado. Sendo assim, criaremos uma variável que receberá o resultado dessa promise.
18 |
19 | ```
20 | const promise = new Promise(function (resolve, reject) {
21 | const soma1 = 2;
22 | const soma2 = 5;
23 |
24 | const result = calcular(soma1, soma2);
25 |
26 | if (result != null) {
27 | resolve(result);
28 | } else {
29 | reject(false);
30 | }
31 | });
32 | ```
33 |
34 | Dentro da promise será criado uma função de callback onde deverá ter dois parâmetros, sendo eles o `resolve` eo `reject`. O resolve irá retornar tudo o que for referente a uma operação bem sucedida, já o reject se refere a uma operação que houve falha. Neste exemplo podemos ver que eu crio duas variáveis (`soma1` e `soma2`), atribuo um valor a elas e então é criado outra variável para receber o resultado da função `calcular()`.
35 | A partir do resultado obtido na variável `result` será feita uma validação para definir se houve um valor de fato ou não, caso haja o `resolve` será acionado retornando assim o valor que estiver na variável `result`, caso não haja valor nenhum o reject será acionado retornando false.
36 |
37 | > Lembrando os valores no `resolve` e no `reject` eu defini desta maneira, você por sua vez poderá retornar o que fizer mais sentido no seu caso.
38 |
39 | Depois de ter criado a promise e definido os retornos que a mesma dará ainda não acaba por ai, pois o resultado da variável `promise` que haviamos definido para receber o resultado da promise também terá um retorno em um objeto promise. Se colocarmos a variável em um console.log será possível perceber que é retornado esse objeto promise.
40 |
41 | ```
42 | console.log(promise)
43 | ```
44 |
45 | Valor na variável `promise`
46 |
47 | 
48 |
49 | Então, o que poderá ser feito para obter o resultado destá promise? Precisamos utilizar os métodos `then()` e `catch()`!
50 |
51 | > Caso você nunca tenha visto sobre [then()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) e [catch()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) é possível verificar na MDN Web Docs.
52 |
53 | Para que possamos obter o resultado da promise é bem simples!
54 |
55 | `````
56 | // Variável promise
57 | promise
58 | .then(function (result) {
59 | console.log(`O resultado foi: ${result}`); // Resultado da função ````calcular()```
60 | })
61 | .catch(function (error) {
62 | console.error("Houve um erro na função: ", error); // Resultado obtido na promise, no nosso caso será "Houve um erro na função: { error }"
63 | });
64 | `````
65 |
66 | Ambos os métodos `then()` e `catch()` necessitam de uma função de callback, sendo assim criamos uma função de callback em cada método passando um parâmetro que no caso do `then()` retornada o resultado e no caso do `catch()` retornará o erro.
67 |
68 | Agora vamos ver como ficaria o código completo.
69 |
70 | ### Código completo
71 |
72 | ```
73 | function calcular(soma1, soma2) {
74 | return soma1 + soma2;
75 | }
76 |
77 | const promise = new Promise(function (resolve, reject) {
78 | const soma1 = 2;
79 | const soma2 = 5;
80 |
81 | const result = calcular(soma1, soma2);
82 |
83 | if (result != null) {
84 | resolve(result);
85 | } else {
86 | reject(false);
87 | }
88 | });
89 |
90 | promise
91 | .then(function (result) {
92 | console.log(`O resultado foi: ${result}`);
93 | })
94 | .catch(function (error) {
95 | console.error("Houve um erro na função: ", error);
96 | });
97 | ```
98 |
99 | ### Resultados
100 |
101 | Esperamos que se ocorrendo tudo da forma esperada seja retornado a soma das variáveis `soma1` e `soma2`, sendo no total 7. Então deverá ser retornado da seguinte forma: "O resultado foi: 7".
102 |
103 | 
104 |
105 | Mas e se eventualmente ocorrer um erro o que deverá ser retornado? Para isso irei provocar um erro para mostrar o resultado.
106 | Neste caso irei na função `calcular()` e alterar para retornar somente `null`.
107 |
108 | ```
109 | function calcular(soma1, soma2) {
110 | return null;
111 | }
112 | ```
113 |
114 | Então o retorno para este caso será:
115 |
116 | 
117 |
--------------------------------------------------------------------------------
/4_Basico/1_Saida.md:
--------------------------------------------------------------------------------
1 | # 4.1 - Funções de Saída
2 |
3 | Após o nosso ambiente montado com todas as ferramentas necessárias, vamos agora ver um código na prática.
4 |
5 | Como iremos usar o nosso console em uma boa parte do curso, precisaremos de algumas funções para nos auxiliar a visualizar qualquer saída de dados do nosso código. Nessa lição, iremos conhecer essas funções.
6 |
7 | ## Função -> Console.log()
8 |
9 | Descrição: Exibe uma mensagem no console do navegador.
10 |
11 | Sempre que fizermos um trecho de código, precisamos entender se ele funcionou ou não.
12 | Na maior parte do tempo, iremos usar o `console.log()` para fazer essa verificação.
13 | Utilizando essa função, a mensagem, variável ou o que quisermos, será impresso no console.
14 |
15 | Veja este primeiro exemplo:
16 |
17 | ```js
18 | console.log("He4rtDevs <3");
19 |
20 | console.log(123);
21 |
22 | console.log([1, 2, 3]);
23 |
24 | console.log({ curso: "js4noobs" });
25 | ```
26 |
27 | Saída rodando o código no NodeJS:
28 |
29 | ```
30 | He4rtDevs <3
31 | 123
32 | [1, 2, 3]
33 | { curso: "js4noobs" }
34 | ```
35 |
36 | A saida rodando o código no navegador:
37 |
38 |
39 |
40 |
41 |
42 | Imagem 1 - Tela do navegador chrome, utilizando o console.
43 |
44 |
45 | ### Algumas observações:
46 |
47 | Como é possível notar, o `console.log()` automaticamente faz uma quebra de linha após fazer uma impressão.
48 |
49 | É interessante notar também que quando passamos um array (no caso o `[1,2,3]`), os valores são impressos dentro dos colchetes, reforçando que é um array. No caso de visualizar no console do browser ainda é possível clicar naquela setinha que está à esquerda no começo da linha para expandir as informações do array.
50 |
51 | Algo semelhante ocorre quando passamos um objeto (no caso o `{ curso: "js4noobs" }`), os campos são impressos dentro de chaves, reforçando que aquelas informações fazem parte de um objeto. Novamente, visualizar no console do browser também traz vantagens, pois é possível clicar naquela setinha que está à esquerda no começo da linha para expandir as informações do objeto.
52 |
53 | ## Outras funções do Console
54 |
55 | ### Assert
56 |
57 | Descrição: Escreve uma mensagem de erro para o `console` caso a expressão passada como primeiro argumento resulte em `false`. Case resulte em `true`, nada acontece.
58 |
59 | ```js
60 | const boolean = false;
61 | console.assert(boolean, "mensagem a ser exibida se o boolean for falso");
62 | ```
63 | Saída:
64 |
65 | ```
66 | mensagem a ser exibida se o boolean for falso.
67 | ```
68 |
69 | No caso acima, usamos uma simples variável contendo um valor booleano, mas poderia ser uma expressão mais complexa, por exemplo:
70 |
71 | ```js
72 | console.assert((5 + 4) > 8, "mensagem a ser exibida se o boolean for falso");
73 | ```
74 |
75 | Nesse caso, nada será impresso, afinal, 9 é maior que 8 e o primeiro argumento receberá o valor `true`.
76 |
77 | ### count
78 |
79 | Descrição: Exibe no console o número de vezes em que a chamada `count()` em particular foi invocada.
80 |
81 | ```js
82 | let label = "";
83 |
84 | function consoleLabel() {
85 | console.count(label);
86 | return "label: " + label;
87 | }
88 |
89 | label = "he4rt";
90 | consoleLabel();
91 | label = "devs";
92 | consoleLabel();
93 | consoleLabel();
94 | console.count();
95 | ```
96 |
97 | Saída:
98 |
99 | ```
100 | he4rt: 1
101 | devs: 1
102 | devs: 2
103 | devs: 3
104 | ```
105 |
106 | ### dir
107 |
108 | Descrição: Exibe uma lista interativa das propriedades do objeto JavaScript especificado. A saída é apresentada como uma lista hierárquica com triângulos que permitem ver o conteúdo de objetos-filho.
109 |
110 | ```javascript
111 | const comunidade = {
112 | nome: "he4rt",
113 | };
114 |
115 | console.dir(comunidade);
116 | ```
117 |
118 | Saída no NodeJS:
119 |
120 | ```
121 | nome: 'he4rt';
122 | ```
123 |
124 | Saída no browser:
125 |
126 | ```
127 | ▶ Object
128 | ```
129 |
130 | Caso clique no triângulo:
131 |
132 | ```
133 | ▼ Object
134 | nome: "he4rt"
135 | ▶ __proto__: Object
136 |
137 | ```
138 |
139 | ### error & exception
140 |
141 | Descrição: 'Escreve' uma mensagem de erro no Web Console.
142 |
143 | ```js
144 | console.error("Erro aqui irmão!");
145 | // Erro aqui irmão!
146 |
147 | Descrição: Um atalho para o `error`.
148 |
149 | console.exception("Erro aqui irmão! mas de outra forma");
150 | // Erro aqui irmão! mas de outra forma
151 | ```
152 |
153 | ### group
154 |
155 | Descrição: cria e separa as mensagens em grupos alinhados.
156 |
157 | ```js
158 | console.log("Canais do discord");
159 | console.group();
160 | console.log("global");
161 | console.group();
162 | console.log("bate-papo");
163 | console.log("aprendizado-diário");
164 | console.groupEnd();
165 | console.groupEnd();
166 |
167 | // Canais do discord
168 | // | global
169 | // | | bate-papo
170 | // | | aprendizado-diário
171 | ```
172 |
173 | ## table
174 |
175 | Descrição: Exibe as informações em forma de tabela.
176 |
177 | ```js
178 | console.table(["he4rt", "devs", "discord"]);
179 | ```
180 |
181 | Saída:
182 |
183 | | (index) | Values |
184 | | ------- | ------- |
185 | | 0 | he4rt |
186 | | 1 | devs |
187 | | 2 | discord |
188 |
189 | Para mais informações e usos, confira a [documentação do console.table()](https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table).
190 |
191 | ## Time & TimeEnd
192 |
193 | Descrição:
194 | `time()` Inicia um cronômetro com precisão de milissegundos.
195 |
196 | `timeEnd()` termina e exibe a contagem do tempo.
197 |
198 | ```js
199 | console.time();
200 | for(let i = 0; i < 10; ++i) {
201 | // alguma ação
202 | };
203 | console.timeEnd();
204 | ```
205 |
206 | Saída:
207 |
208 | ```
209 | default: 0.00830078125ms
210 | ```
211 |
212 | Note que esse tempo cronometrado é só um exemplo, você provavelmente irá receber um valor diferente na sua máquina caso rode o código acima sem alterações.
213 |
214 | Note também que o valor cronometrado recebeu o nome de "default", isso pode não ser muito útil, então é interessante que a gente dê um nome quando usarmos essa função:
215 |
216 | ```js
217 | const label = 'for vazio';
218 |
219 | console.time(label);
220 | for(let i = 0; i < 100; ++i) {
221 | };
222 | console.timeEnd(label);
223 | ```
224 |
225 | Saída:
226 |
227 | ```
228 | for vazio: 0.030029296875ms
229 | ```
230 |
231 | ### warning
232 |
233 | Descrição: Escreve uma mensagem de alerta no Console Web.
234 |
235 | Usado para mostrar mensagens de erro para o usuário pelo console.
236 |
237 | ```js
238 | console.warn("Texto de alerta!");
239 | ```
240 |
241 | Saída:
242 |
243 | ```
244 | Texto de alerta!
245 | ```
246 |
247 | Caso rode no browser, note que a linha onde é impresso o texto toma a cor amarela.
248 |
249 | [Proximo Capitulo](./2_Comentarios.md)
--------------------------------------------------------------------------------
/4_Basico/2_Comentarios.md:
--------------------------------------------------------------------------------
1 | # 4.2 - Comentários
2 |
3 | Descrição: Um comentário é uma parte de código que não é interpretada pelo motor JavaScript. Pode ser utilizada, também, para colocar textos que ajudam a identificar o que está sendo feito naquele trecho de código.
4 |
5 | Claro que idealmente devemos tentar ao máximo deixar nosso código o mais legível possível, usando nomes de variáveis que sejam explícitos no que elas representam. Assim como funções cujos nomes sejam explícitos em relação ao que a função faz.
6 | Entretanto, em trabalhos em equipe, inevitavelmente lidaremos com pessoas de vários níveis diferentes, então é interessante além de ter o código legível, também ter comentários em trechos que possam ser obscuros para alguns.
7 |
8 | Existem dois tipos de comentários em JavaScript:
9 |
10 | ### Comentários de uma única linha de código.
11 |
12 | São iniciados com duas barras `//`.
13 |
14 | Veja o código abaixo:
15 |
16 | ```js
17 | // Este é um comentário q vai explicar tudo abaixo
18 | console.log("He4rtDevs <3");
19 | // E também não será interpretado, quer ver?
20 | // console.log("Nada vai aparecer");
21 | ```
22 |
23 | ### Comentários de várias linhas de código.
24 | iniciados com `/*` e terminados com `*/`.
25 |
26 | ```javascript
27 | /* Exemplo de comentário
28 | com várias linhas.
29 |
30 | Basta escolher o início
31 | e o fim. */
32 | ```
33 | [Proximo Capitulo](./3_Tipos-de-dados.md)
--------------------------------------------------------------------------------
/4_Basico/3_Tipos-de-dados.md:
--------------------------------------------------------------------------------
1 | # 4.3 - Tipo de dados primitivos
2 |
3 | ## Tipagem dinâmica
4 |
5 | - JavaScript é uma linguagem de tipagem dinâmica.
6 |
7 | - Isso significa que não necessita declarar o tipo de dado de uma variável antes de sua atribuição. O tipo será automaticamente determinado quando o programa for processado.
8 |
9 | - Você pode reatribuir a uma variável um tipo de dado diferente.
10 |
11 | ## Tipos de dados
12 |
13 | Descrição: Os tipos de dados em JavaScript são basicamente os tipos de valores que podemos manipular com a linguagem.
14 |
15 | Elas podem ser dos tipos:
16 |
17 | - Strings
18 | - Numbers
19 | - Booleans
20 | - Arrays
21 | - Objetos
22 | - null
23 | - undefined
24 |
25 | ### Strings
26 |
27 | Descrição: O tipo `String` em JavaScript é usado para representar textos, ou cadeias de caracteres.
28 |
29 | Para declarar strings podemos usar aspas simples ' ' ou aspas duplas " ". Tudo que estiver dentro das aspas vai ser considerado texto exemplo "1".
30 |
31 | Mais para a frente iremos ver que existe ainda uma terceira forma que usa crases:
32 |
33 | ```js
34 | const valor = 8;
35 |
36 | const texto = `Valor: ${8}`;
37 | ```
38 |
39 | Isso é o que chamamos de `template string`, ou seja, um modelo de string.
40 | No código acima, o motor JavaScript iria processar a `template string` de forma que a string armazenada pela variável `texto` seria `"Valor: 8"`.
41 |
42 | ### Numbers
43 |
44 | Descrição: O tipo `Number` é usado para representar números, independente se for um número inteiro tipo `7` ou um número real como `32.4`.
45 |
46 | Para declarar números não tem muito segredo, simplesmente atribua o número.
47 |
48 | Note que o valor de exemplo acima usa ponto e não vírgula para separar os decimais, afinal a linguagem utiliza o padrão Inglês.
49 |
50 | ### Boolean
51 |
52 | Descrição: O tipo `Boolean` representa uma entidade lógica e pode ter dois valores:
53 |
54 | - verdadeiro(`true`) ou
55 | - falso(`false`).
56 |
57 | Normalmente os valores desse tipo, a gente consegue através da avaliação de uma condição, por exemplo:
58 |
59 | ```
60 | 1 == 1 (mesma coisa que 1 é igual a 1)
61 |
62 | essa condição nos retorna um valor booleano, nesse caso, `true`
63 | ```
64 |
65 | ### bigInt
66 |
67 | Descrição: É um tipo de dado numérico que representa inteiros no formato de precisão arbitrária. Em outras linguagens de programação existem tipos numéricos diferentes, como por exemplo: Integers, Floats, Doubles ou Bignums.
68 |
69 | ### Arrays
70 |
71 | Descrição: `Array` é uma variável que contêm vários valores. Ele é comumente usados para armazenar um grupo de valores relacionados.
72 |
73 | Os `Arrays` podem armazenar quaisquer outro tipo de dados.
74 | Podemos ter um array de arrays, array de objetos, array de números, strings, booleanos, etc...
75 |
76 | Podemos declarar um `Array` com colchetes [ ], todo e qualquer tipo de dados que estiver dentro dele vai ser armazenado, exemplos:
77 |
78 | ```js
79 | const numeros = [1, 2, 3, 4, 5, 6];
80 |
81 | const palavras = ["He4rt", "Dev", "Melhor", "Comunidade"];
82 |
83 | const misto = ["He4rt", 1, 27.5, 3];
84 |
85 | const array_com_arrays = ["Heart", "Dev", [1, "Melhor Comunidade"]];
86 | ```
87 |
88 | ### Objetos
89 |
90 | Descrição: Os objetos são muito semelhantes aos `Arrays`, pois são variáveis que podem conter vários valores.
91 | No entanto, os objetos têm uma propriedade-chave que ajuda a dar mais significado às informações armazenadas neles.
92 |
93 | Podemos declarar `Objetos literais` utilizando chaves `{ }`.
94 | Segue a mesma regra dos `Arrays` porem devemos informar uma chave para eles e para cada chave/valor devemos colocar uma virgula para informamos a proxima chave/valor, exemplo:
95 |
96 | ```js
97 | const professor = {
98 | nome: "He4rt",
99 | nota: 10, // avaliação do professor
100 | classes: [1, 2, 3, 4, 5] // ids das classes que leciona.
101 | };
102 | ```
103 |
104 | Note que os espaços são puramente para alinhar e facilitar a leitura, é possível deixar um espaço só caso prefira, ou mesmo utilizar outra formatação.
105 |
106 | ```js
107 | // mesma coisa:
108 | const professor = {
109 | nome: "He4rt",
110 | nota: 10, // avaliação do professor
111 | classes: [1, 2, 3, 4, 5] // ids das classes que leciona.
112 | };
113 | ```
114 |
115 | Não temos restrição para o valor que cada chave recebe, pode ser um valor `Boolean`, `Array`, `Number`, `String`, outro objeto, etc...
116 |
117 | ### Null e Undefined
118 |
119 | Descrição: O tipo `Null` tem exatamente um valor: `null`(nulo).
120 |
121 | O tipo `Undefined` é um valor um tanto único.
122 | Uma variável que não tenha recebido nenhum valor específico, assume o valor `undefined` (indefinido).
123 | Outra forma de se obter `undefined` seria tentar pegar o retorno de uma função que não retorna nada, ou mesmo tentar acessar um parâmetro de função que não tenha recebido um argumento, mas isso veremos mais para a frente.
124 |
125 | [Proximo Capitulo](./4_Variaveis.md)
--------------------------------------------------------------------------------
/4_Basico/4_Variaveis.md:
--------------------------------------------------------------------------------
1 | # 4.4 - Variáveis
2 |
3 | > **Descrição**:
4 | As variáveis podem ser consideradas como contêineres que permitem armazenar dados sobre elas. \
5 | Isso nos ajudará a escrever o código, permitindo salvar e reutilizar quaisquer dados para atingir seu objetivo.
6 |
7 | Existem 3 maneiras de declarar variáveis:
8 | - var
9 | - let
10 | - const
11 |
12 | o problema que temos com a variável `var` é que ela tem um pequeno problema de ESCOPO.
13 |
14 | ---
15 |
16 | ## Mas o que é ESCOPO?
17 |
18 | > **Descrição**: \
19 | A grande maioria das linguagens possui o conceito de ESCOPO, e JavaScript não é diferente. \
20 | ESCOPO é a acessibilidade de objetos, variáveis e funções em diferentes partes do código.
21 |
22 | Em outras palavras, o que determina quais são os dados que podem ser acessados em uma determinada parte do código é o ESCOPO.
23 |
24 | ### Escopo Local e Escopo Global
25 |
26 | Escopo local basicamente é um bloco que tudo o que for declarado, executado dentro dele somente ira existir nele, exemplo:
27 |
28 | ```javascript
29 | function soma() {
30 | var numero = 0
31 |
32 | Tudo o que está dentro da chaves é o nosso escopo local
33 |
34 | }
35 |
36 | console.log( numero ) <- não consigo ter acesso a variável x pois foi declarada dentro do escopo local da função soma
37 | ```
38 |
39 | Escopo global é tudo o que for declarado, criado fora do bloco, por conta disso toda a nossa aplicação tem acesso a eles, exemplo:
40 |
41 | ```javascript
42 | var numero = 1
43 |
44 | function soma(){
45 | return numero + 1 <-- estamos a retornado a soma do numero acrescentando mais 1
46 | }
47 |
48 | console.log(numero)
49 | ```
50 |
51 | No JS em especifico até o ES2016 (ECMAScript2016), tínhamos um grande problema ao declarar variáveis usando **`var`** dentro de blocos de instrução (IF, FOR, WHILE, etc...) pois esses blocos não criam o seu próprio escopo, o que fazia com que todas as variáveis declaradas com **`var`** dentro dele se tornassem globais.
52 |
53 | Por conta disso evitamos ao máximo o uso da **`var`**, pois a **`let`** nasceu dessa necessidade de podermos declarar variáveis com escopo local dentro de blocos de instrução, exemplo:
54 |
55 | ```javascript
56 | if(1 == 1) {
57 | var x = 'Ela foi criada e inicializada no escopo global da aplicação.'
58 | }
59 |
60 | console.log(x) /*
61 | conseguimos acessar a variável pois blocos de instrução não criam escopo.
62 |
63 | Se fizermos a mesma verificação e declarar a variável x usando let, conseguimos criar um escopo local para ela:
64 |
65 | */
66 |
67 | if(1 == 1) {
68 | let x = 'Agora ela possui um escopo local.'
69 | }
70 |
71 | console.log(x) /* <- não conseguimos mais ter acesso a variável. */
72 | ```
73 |
74 | E para declaração de constantes, cujo valor é fixo que não serão possíveis atribuir um novo valor, são criada como **`const`**.
75 |
76 | Para usarmos variáveis, podemos fazer:
77 |
78 | ```javascript
79 | let x;
80 | const y;
81 |
82 | let foo = 1;
83 | let bar = 2 + 1; // bar = 3
84 | let biz = foo + bar; // biz = 4
85 |
86 | const texto = 'Os melhores cursos são na ';
87 | const plataforma = 'He4rt!';
88 | const frase = texto + plataforma; // frase = Os melhores cursos são na He4rt!
89 |
90 | const cores = [ ' vermelho ' , ' azul ' , ' rosa ' , ' preto ' ];
91 |
92 | let usuario = {
93 | nome : 'Fulano' ,
94 | idade : 22
95 | };
96 | ```
97 | [Proximo Capitulo](./5_Operadores-Aritmeticos.md)
--------------------------------------------------------------------------------
/4_Basico/5_Operadores-Aritmeticos.md:
--------------------------------------------------------------------------------
1 | # 4.5 - Operadores Aritméticos
2 |
3 | Descrição: Operadores aritméticos tomam valores numéricos como seus operandos e retornam um único valor numérico.
4 |
5 | Os operadores aritméticos padrões são:
6 |
7 | - **os de soma (`+`)**,
8 | - **subtração (`-`)**,
9 | - **multiplicação (`*`)**,
10 | - **divisão (`/`)**,
11 |
12 | Estes operadores trabalham da mesma forma como na maioria das linguagens de programação quando utilizados com números de ponto flutuante.
13 |
14 | - **Módulo(Resto da Divisão) (`%`)** Irá retornar o resto da divisão.
15 | - **Exponencial (`**`)** Retorna o resultado de uma variável elevada a outra.
16 |
17 | ## Incremento (`++`)
18 |
19 | Descrição: O operador de incremento acrescenta um no dado tratado.
20 |
21 | Se usado depois da variável, ele incrementa o valor depois retorna.
22 |
23 | ```javascript
24 | let numero = 1;
25 | console.log(numero); // 1
26 | console.log(numero++); // 1
27 | console.log(numero); // 2
28 | ```
29 |
30 | Se usado antes da variável, ele retorna o valor depois incrementa.
31 |
32 | ```javascript
33 | let numero = 1;
34 | console.log(numero); // 1
35 | console.log(++numero); // 2
36 | console.log(numero); // 2
37 | ```
38 |
39 | ## Decremento (`--`)
40 |
41 | Descrição: O operador de decremento subtrai um no dado tratado.
42 |
43 | Se usado depois da variável, ele subtrai o valor depois retorna.
44 |
45 | ```javascript
46 | let numero = 2;
47 | console.log(numero); // 2
48 | console.log(numero--); // 1
49 | console.log(numero); // 1
50 | ```
51 |
52 | Se usado antes da variável, ele retorna o valor depois subtrai.
53 |
54 | ```javascript
55 | let numero = 2;
56 | console.log(numero); // 2
57 | console.log(--numero); // 2
58 | console.log(numero); // 1
59 | ```
60 |
61 | ## Negação (`-`)
62 |
63 | Descrição: O operador de negação unária precede seu operando e o nega.
64 |
65 | ```javascript
66 | let numero = 1;
67 | console.log(numero); // 1
68 | console.log(-numero); // -1
69 | ```
70 |
71 | ## Soma Unária (`+`)
72 |
73 | Descrição: o `+` antes de uma variável, é a forma mais rápida e a forma preferida de converter alguma coisa em um número, porque ele não realiza nenhuma outra operação no número.
74 |
75 | ```javascript
76 | console.log(+3); // 3
77 | console.log(+"3"); // 3
78 | console.log(+true); // 1
79 | console.log(+false); // 0
80 | console.log(+null); // 0
81 | ```
82 |
83 | [Proximo Capitulo](./6_Operadores-Logicos.md)
--------------------------------------------------------------------------------
/4_Basico/6_Operadores-Logicos.md:
--------------------------------------------------------------------------------
1 | # 4.6 - Operadores
2 |
3 | ## Lógicos
4 |
5 | Descrição: Operadores lógicos são tipicamente usados com valores Booleanos (lógicos - `TRUE/FALSE`).
6 |
7 | - **`var1 && var2` - AND** = Retorna `var1` caso possa ser convertido para `FALSE`; senão, retorna `var2`. Assim, quando utilizado com valores booleanos, && retorna `TRUE` caso ambos operandos sejam verdadeiros; caso contrário, retorna `FALSE`.
8 |
9 | - **`var1 || var2` - OR** = Retorna `var1` caso possa ser convertido para `TRUE`; senão, retorna `var2`. Assim, quando utilizado com valores booleanos, || retorna `TRUE` caso ambos os operandos sejam verdadeiro; se ambos forem falsos, retorna `FALSE`.
10 |
11 | - **`!var1` - NOT** = Retorna `FALSE` caso o único operando possa ser convertido para `TRUE`; senão, retorna `TRUE`.
12 |
13 | ## Comparação
14 |
15 | Descrição: Operadores de comparação retornam um valor lógico se a comparação é verdadeira.
16 |
17 | As únicas exceções a esta regra são os operadores `===` e o `!==`, que realizam comparações de igualdade e desigualdade "estritas".
18 |
19 | - **Igual (==)** = Retorna `TRUE` caso os operandos sejam iguais.
20 |
21 | - **Não igual (!=)** = Retorna `TRUE` caso os operandos não sejam iguais.
22 |
23 | - **Estritamente igual (===)** = Retorna `TRUE` caso os operandos sejam iguais **e do mesmo tipo**.
24 |
25 | - **Estritamente não igual (!==)** = Retorna `TRUE` caso os operandos não sejam iguais **e/ou não sejam do mesmo tipo**.
26 |
27 | - **Maior que (>)** = Retorna `TRUE` caso o operando da esquerda seja maior que o da direita.
28 |
29 | - **Maior que ou igual (>=)** = Retorna `TRUE` caso o operando da esquerda seja maior ou igual ao da direita.
30 |
31 | - **Menor que (<)** = Retorna `TRUE` caso o operando da esquerda seja menor que o da direita.
32 |
33 | - **Menor que ou igual (<=)** = Retorna `TRUE` caso o operando da esquerda seja menor ou igual ao da direita.
34 |
35 | [Proximo Capitulo](./7_Condicionais.md)
--------------------------------------------------------------------------------
/4_Basico/7_Condicionais.md:
--------------------------------------------------------------------------------
1 | # 4.7 - Condicionais
2 |
3 | ## Lógicos
4 |
5 | ### IF ... ELSE
6 |
7 | Descrição: De longe o tipo mais comum de declaração condicional que você usará em JavaScript — as modestas declarações `if ... else.`
8 |
9 | ```javascript
10 | if (condicao) {
11 | // código para executar caso a condição seja verdadeira
12 | } else {
13 | // senão, executar este código
14 | }
15 | ```
16 |
17 | ### ELSE IF
18 |
19 | Descrição: Existe uma maneira de encadear escolhas/resultados extras ao seu `if...else` — usando `else if`.
20 | Cada escolha extra requer um bloco adicional para colocar entre `if() { ... }` e `else { ... }`
21 |
22 | ```javascript
23 | if (condicao) {
24 | // código para executar caso a condição seja verdadeira
25 | } else if (outraCondicao) {
26 | // senão, executar este código caso outra condição seja verdadeira
27 | }
28 | ```
29 |
30 | ### Operador ternário
31 |
32 | Descrição: Os operadores ternários testam uma condição e retorna um valor/expressão se for `TRUE`, e outro caso seja `FALSE` — isso pode ser útil em algumas situações e pode ocupar muito menos código que um bloco `if...else` se você simplesmente tiver duas opções escolhidas entre uma condição *TRUE/FALSE condition*.
33 |
34 | ```javascript
35 | condicao ? valor1 : valor2;
36 | ```
37 |
38 | Se condição for `TRUE`, o operador terá o valor de `valor1`. Caso contrário, terá o valor de `valor2`. Você pode utilizar o operador condicional em qualquer lugar onde utilizaria um operador padrão.
39 |
40 | Outra maneira de utilizarmos o operador ternário é usá-lo para simplificar a condicional if...else if...else.
41 |
42 | ```javascript
43 | condicao ? valor1 : outraCondicao ? valor2 : valor3;
44 | ```
45 |
46 | Se condição for `TRUE`, o operador terá o valor de `valor1`. Caso contrário, irá para a `outraCondicao` e se for `TRUE`, o operador terá o valor de `valor2` e por último se não corresponder a nenhuma condição caíra no else e o operador terá o valor de `valor3`. Você pode utilizar o operador condicional em qualquer lugar onde utilizaria um operador padrão.
47 |
48 | ### SWITCH
49 |
50 | Descrição: Em alguns casos você terá diversas condições, este é o trabalho do `switch`.
51 | Eles tomam uma única expressão/valor como uma entrada e, em seguida, examinam várias opções até encontrarem um que corresponda a esse valor, executando o código correspondente que o acompanha.
52 |
53 | Usando o `break`, encerra o loop atual;
54 | Usando o `continue`, encerrará a iteração do loop e continua para o próximo iterando.
55 |
56 | ```javascript
57 | switch (expression) {
58 | case choice1:
59 | // código para executar
60 | break;
61 |
62 | case choice2:
63 | // código para executar
64 | break;
65 |
66 | // podem ser incluídos quantos casos precisar.
67 |
68 | default:
69 | // se não for nenhum caso, executa este caso
70 | }
71 | ```
72 |
73 | Outro exemplo de uso do switch é o `Multi-caso: Operação Simples` (Multi-case : single operation)
74 |
75 | Utilizar esse método tem a vantagem de não ter um `break` depois do case e continuara sendo executado mesmo que o critério não seja correspondido.
76 |
77 | No exemplo abaixo temos uma operação sequencial simples, onde três valores diferentes retornam a mesma coisa
78 |
79 | ```javascript
80 | var Color = 'Red';
81 | switch (Color) {
82 | case 'Pink':
83 | case 'Purple':
84 | case 'Orange':
85 | console.log('This is not a primary color.');
86 | break;
87 | case 'Blue':
88 | default:
89 | console.log('This is a primary color.');
90 | }
91 | [Proximo Capitulo](./8_Estruturas-de-repeticao.md)
--------------------------------------------------------------------------------
/4_Basico/8_Estruturas-de-repeticao.md:
--------------------------------------------------------------------------------
1 | # 4.8 - Estruturas de repetição (laços)
2 |
3 | Descrição: Estruturas de repetição, também chamados de laços, são uma maneira fácil e rápido de executar uma ação várias vezes com pouco código.
4 |
5 | ### FOR
6 |
7 | Um laço `for` é repetido até que a condição especificada seja `FALSE`.
8 |
9 | ```javascript
10 | for ([expressaoInicial]; [condicao]; [incremento]) {
11 | // ações a serem repetidas
12 | }
13 | ```
14 |
15 | Quando um `for` é executado, ocorre o seguinte:
16 |
17 | - A expressão `expressaoInicial` é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.
18 |
19 | - A expressão `condicao` é avaliada, caso o resultado de `condicao` seja `TRUE`, o laço é executado. Se o valor de `condicao` é `FALSE`, então o laço terminará. Se a expressão `condicao` é omitida, a `condicao` é assumida como `TRUE`.
20 |
21 | - A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco (`{ ... }`) para agrupá-las.
22 |
23 | - A atualização da expressão `incremento`, se houver, executa, e retorna o controle para o próximo passo.
24 |
25 | ### DO ... WHILE
26 |
27 | A instrução `do...while` repetirá até que a condição especificada seja `FALSE`.
28 |
29 | ```javascript
30 | do {
31 | // ações a serem repetidas
32 | } while (condicao);
33 | ```
34 |
35 | A instrução será executada uma vez antes da condição ser verificada.
36 | Caso a condicao seja `TRUE`, então o laço será executado novamente.
37 | Ao final de cada execução, a `condicao` é verificada.
38 | Quando a condição contida no `while` for `FALSE` a execução do laço é terminada.
39 |
40 | ### WHILE
41 |
42 | Uma declaração `while` executa suas instruções, desde que uma condição especificada seja avaliada como `TRUE`.
43 |
44 | ```javascript
45 | while (condicao) {
46 | // ações a serem repetidas
47 | }
48 | ```
49 |
50 | O teste da condição ocorre antes que o laço seja executado.
51 |
52 | ### FOR.. IN
53 |
54 | O laço `for.. in` passa por todas propriedades de um objeto.
55 |
56 | ```javascript
57 | const numeros = [1,2,3,4,5];
58 | for ( numero in numeros) {
59 | // ações a serem feitas
60 | console.log(numero);
61 | }
62 |
63 | // resultado: 1, 2, 3, 4, 5
64 | ```
65 |
66 | ### FOR.. OF
67 |
68 | O laço `for.. of` passa por todos os elementos de um coleção (`Array`, `Map`, `Set`, `Arguments`, `Object`).
69 |
70 | ```javascript
71 | const numeros = [1,2,3,4,5];
72 | for (numero of numeros) {
73 | // ações a serem feitas
74 | console.log(numero);
75 | }
76 |
77 | // resultado: 0, 1, 2, 3, 4
78 | ```
79 |
80 | [Proximo Capitulo](./9_Funcoes.md)
--------------------------------------------------------------------------------
/4_Basico/9_Funcoes.md:
--------------------------------------------------------------------------------
1 | # 4.8 - Funções
2 |
3 | Descrição: é um bloco de códigos, que conseguimos utilizar sempre que chamarmos em qualquer parte da nossa aplicação, para realizar uma ação.
4 |
5 | Uma função é definida pela palavra reservada `function`, seguida por um _nome_ e então os parenteses `()`.
6 |
7 | - Os nomes das funções podem conter letras, números, sublinhado e caracteres especiais.
8 |
9 | - Dentro dos parenteses, você insere os parâmetros - os parâmetros são dados enviados a função, aos quais serão processados pela função.
10 |
11 | - O código a ser executado pela função, deve estar dentro de Chaves `{}`
12 |
13 | ```javascript
14 | function nome_funcao(param1, param2) {
15 | // código a ser executado
16 | }
17 | ```
18 |
19 | Basicamente caso eu precisar multiplicar um número com outro eu preciso fazer o procedimento a seguir:
20 |
21 | ```javascript
22 | // criação da função
23 | function multiplicar(param1, param2) {
24 | // aqui vai entrar o seu código
25 | let result = param1 * param2;
26 |
27 | return result;
28 | }
29 |
30 | // chamar a função passando os parâmetros
31 | let resultado = multiplicar(2, 2);
32 |
33 | console.log(resultado); // mostra no console o resultado (4)
34 | ```
35 |
36 | ### Para que isso?
37 |
38 | Nós podemos _reutilizar os códigos_ a partir de funções, por exemplo sempre que precisarmos multiplicar números, podemos usar a função citada acima.
39 |
40 | ### Além disso
41 |
42 | #### Funções anonimas
43 |
44 | Além de declarar funções podemos usar funções anonimas, que nos permite passar uma função como um objeto qualquer.
45 |
46 | ```javascript
47 | var fibonacci = function (num) {
48 | if (num == 1 || num == 2) return 1;
49 | else return fibonacci(num - 1) + fibonacci(num - 2);
50 | };
51 |
52 | console.log(fibonacci(10)); // 55
53 | ```
54 |
55 | ### Função auto-invocável
56 |
57 | IIFE (Immediately Invoked Function Expression)
58 |
59 | É uma função anônima entre parênteses, seguida por outro par de parênteses, que representa sua chamada e vai ser executada assim que o arquivo for executado.
60 |
61 | ```javascript
62 | (
63 | function() {
64 | let name = 'salve quebrada!'
65 | return name;
66 | }
67 | )();
68 |
69 | //salve quebrada!
70 | ```
71 |
72 | Também pode ser utilizada com parâmetros ou armazenar o seu retorno em uma variável.
73 |
74 | ```javascript
75 | (
76 | function(a, b) {
77 | return a+b;
78 | }
79 | )(1, 2);
80 | // Imediatamente gera a saída:
81 | //3
82 |
83 |
84 | //armazenando o valor em uma variavel
85 | const soma = (
86 | function(a, b) {
87 | return a+b;
88 | }
89 | )(1, 2);
90 | // Imediatamente gera a saída:
91 | // soma
92 | // "3"
93 | ```
94 |
95 | [Proximo Capitulo](./10_Exceptions.md)
96 |
--------------------------------------------------------------------------------
/5_DOM-DocumentObjectModel/1_Introducao.md:
--------------------------------------------------------------------------------
1 | # 5.1 - Introdução a DOM (Documento Object Model)
2 |
3 | Descrição: Sempre que uma página é carregada, o navegador cria um *DOM* (Document Object Model) para a gente.
4 |
5 | Com este *DOM* criado, podemos acessar e mudar qualquer elemento utilizando o javascript.
6 |
7 |
8 |
9 | uma ilustração mostrando como o DOM estabelece os elementos no DOM.
10 |
11 |
12 | O DOM define:
13 | - Os elementos como objetos,
14 | - As propriedades dos elementos,
15 | - Os métodos,
16 | - Os eventos.
17 |
18 | Basicamente, o DOM define um maneira de pegar(`get`), mudar(`change`), adicionar(`set`) ou deletar(`delete`) cada elemento HTML no DOM.
19 |
20 | [Proximo Capitulo](./2_Metodos-DOM.md)
--------------------------------------------------------------------------------
/5_DOM-DocumentObjectModel/2_Metodos-DOM.md:
--------------------------------------------------------------------------------
1 | # 5.2 - Métodos do DOM
2 |
3 | Descrição: Através do DOM pode-se ter acesso às propriedades. Estas propriedades servem para poder pegar (`get`) e alterar (`set`) os elementos que foram processados.
4 |
5 | O DOM nos dá acesso também aos métodos, os quais são ações que conseguimos desempenhar na nossa aplicação. Estas ações podem ser, adicionar, remover, alterar entre diversas outras coisas.
6 |
7 | Um exemplo do método é o `document.getElementById()`, veja a seguir:
8 |
9 | ```html
10 |
11 |
12 |
15 | ```
16 |
17 | Neste exemplo, usamos o método `getElementById` e a propriedade `innerHTML`.
18 |
19 | [Proximo Capitulo](./3_Acessando-Elementos.md)
--------------------------------------------------------------------------------
/5_DOM-DocumentObjectModel/3_Acessando-Elementos.md:
--------------------------------------------------------------------------------
1 | # 5.3 - Acessando Elementos
2 |
3 | - Métodos para encontrar um ou mais elementos no DOM.
4 |
5 | É possível localizar elementos HTML:
6 |
7 | - por ID;
8 | - por data-attribute;
9 | - pelo nome da tag;
10 | - pelo nome da classe;
11 | - por seletores CSS;
12 | - por coleções de objetos HTML.
13 |
14 | | Método | Descrição |
15 | | ------------------------------------------ | ---------------------------------------------------------------------------------- |
16 | | document.getElementById(id) | Encontra um elemento por seu Id |
17 | | document.querySelector("[data-attribute]") | Encontra um elemento por seu data-attribute |
18 | | document.getElementsByClassName(nome) | Encontra um elemento pela classe |
19 | | document.getElementsByTagName(tag) | Encontra um elemento pela sua tag HTML |
20 | | document.querySelector(nome) | Encontra o primeiro elemento com o valor informado (id, nome, tag, data-attribute) |
21 | | document.querySelectorAll(name) | Encontra todos os elementos com o valor informado (id, nome, tag, data-attribute) |
22 |
23 | [Proximo Capitulo](./4_Alterando-Elementos.md)
--------------------------------------------------------------------------------
/5_DOM-DocumentObjectModel/4_Alterando-Elementos.md:
--------------------------------------------------------------------------------
1 | # 5.4 - Alterando elementos
2 |
3 | - Métodos para alterar o elemento do DOM.
4 |
5 | | Método | Descrição |
6 | | -------------------------------------- | ----------------------------------------------- |
7 | | element.innerHTML = new html content | Alterar o HTML interno de um elemento |
8 | | element.attribute = new value | Alterar o valor do atributo de um elemento HTML |
9 | | element.style.property = new style | Alterar o estilo de um elemento HTML |
10 | | element.setAttribute(attribute, value) | Alterar o valor do atributo de um elemento HTML |
11 |
12 | ## Alterando Conteúdo
13 | - A maneira mais fácil de modificar o conteúdo do HTML é usando a propriedade `innerHTML`.
14 |
15 | ```javascript
16 | document.getElementById(id).innerHTML = new HTML();
17 | ```
18 |
19 | ## Alterando Atributos
20 | - Podemos alterar também atributos, como por exemplo:
21 |
22 | ```javascript
23 | document.getElementById(id).attribute = new value;
24 | ```
25 |
26 | ## Alterando Estilos
27 | - Para alterar estilos de um elemento HTML usa-se:
28 |
29 | ```javascript
30 | document.getElementById(id).style.property = new style;
31 | ```
32 | [Proximo Capitulo](./5_Removendo-Elementos.md)
--------------------------------------------------------------------------------
/5_DOM-DocumentObjectModel/5_Removendo-Elementos.md:
--------------------------------------------------------------------------------
1 | # 5.4 - Removendo elementos do DOM
2 |
3 | - Métodos para remover um elemento do DOM.
4 |
5 | | Método | Descrição |
6 | | ------------------------------- | ------------------------------ |
7 | | document.createElement(element) | Criar um elemento HTML |
8 | | document.removeChild(element) | Remover um elemento HTML |
9 | | document.appendChild(element) | Adicionar um elemento HTML |
10 | | document.replaceChild(new, old) | Substituir um elemento HTML |
11 | | document.write(text) | Escreva no fluxo de saída HTML |
12 |
13 |
14 | [Proximo Capitulo](./6_Event-Handlers.md)
--------------------------------------------------------------------------------
/5_DOM-DocumentObjectModel/6_Event-Handlers.md:
--------------------------------------------------------------------------------
1 | # 5.6 - Event Handlers
2 |
3 | - Podemos executar um script quando um evento ocorre.
4 |
5 | Os eventos podem ser quando:
6 |
7 | - Um usuário clica no mouse;
8 | - Uma página da web é carregada;
9 | - Uma imagem é carregada;
10 | - O mouse se move sobre um elemento;
11 | - Um campo de entrada é alterado;
12 | - Um formulário HTML é enviado;
13 | - Um usuário pressiona uma tecla.
14 |
15 | ## Atributos de evento HTML
16 |
17 | - Para atribuir eventos a elementos HTML, você pode usar atributos de evento.
18 |
19 | ```html
20 |
21 | ```
22 |
23 | ## Atribuir eventos usando o DOM HTML
24 |
25 | - O DOM HTML permite atribuir eventos a elementos HTML usando JavaScript:
26 |
27 | ```javascript
28 | document.getElementById("myBtn").onclick = fazAlgumaCoisa;
29 | ```
30 |
31 | ## Os eventos onload e onunload
32 |
33 | - Os eventos `onload` e `onunload` são acionados quando o usuário entra ou sai da página.
34 |
35 | - O `onload` evento pode ser usado para verificar o tipo e a versão do navegador do visitante e carregar a versão adequada da página da Web com base nas informações.
36 |
37 | - Os eventos `onload` e `onunload` podem ser usados para lidar com cookies.
38 |
39 | ```html
40 |
41 | ```
42 |
43 | ## O evento onchange
44 |
45 | - O evento `onchange` é frequentemente usado em combinação com a validação dos campos de entrada.
46 |
47 | ```html
48 |
49 | ```
50 |
51 | ## Os eventos onmouseover e onmouseout
52 |
53 | - Os eventos `onmouseover` e `onmouseout` podem ser usados para disparar uma função quando o usuário passa o mouse sobre ou fora de um elemento HTML:
54 |
55 | ```html
56 |
57 | Mouse Over Me
58 |
59 | ```
60 |
61 | ## Eventos onmousedown, onmouseup e onclick
62 |
63 | - Os eventos `onmousedown`, `onmouseup` e `onclick` são todos partes de um clique do mouse. Primeiro, quando um botão do mouse é clicado, o evento `onmousedown` é acionado; depois, quando o botão do mouse é liberado, o evento `onmouseup` é acionado; finalmente, quando o clique do mouse é concluído, o evento `onclick` é acionado.
64 |
65 | ```html
66 |
67 | Click Me
68 |
69 | ```
70 |
71 | ## Evento onfocus
72 |
73 | - Altera atributos quando um campo de entrada recebe o foco.
74 |
75 | ```html
76 |
77 | ```
78 |
79 | [Proximo Capitulo](./7_Event-Listener.md)
--------------------------------------------------------------------------------
/5_DOM-DocumentObjectModel/7_Event-Listener.md:
--------------------------------------------------------------------------------
1 | # 5.7 - Event Listener
2 |
3 | - O método `addEventListener()` anexa um manipulador de eventos ao elemento especificado, facilitando o controle de como o elemento reage a cada interação com o usuário.
4 |
5 | - Você pode adicionar ouvintes de eventos a qualquer objeto DOM, não apenas aos elementos HTML, ou seja, o objeto da janela.
6 |
7 | ## Sintaxe
8 |
9 | ```javascript
10 | element.addEventListener(event, function);
11 | ```
12 |
13 | 1. O primeiro parâmetro é o tipo de evento (como explicado em [Event Handlers](/5_DOM-DocumentObjectModel/7_Event-Handlers.md)).
14 |
15 | 2. O segundo parâmetro é a função que queremos chamar quando o evento ocorrer.
16 |
17 | [Atividades](../6_Atividades/Atividades.txt)
--------------------------------------------------------------------------------
/6_Atividades/Atividades.txt:
--------------------------------------------------------------------------------
1 | ATIVIDADES DE LÓGICA DE PROGRAMAÇÃO COM JAVASCRIPT
2 |
3 | 01 - Crie uma função que retorna a string "Olá, " concatenada com um argumento text (a ser passado para a função) e
4 | com ponto de exclamação "!" no final.
5 |
6 | Exemplo:
7 |
8 | cumprimentar("Leonardo") // retornará "Olá, Leonardo!"
9 |
10 | ----------------------------------------------------------------------------------------------------------
11 |
12 | 02 - Escreva uma função que receba a idade de uma pessoa em anos e retorne a mesma idade em dias.
13 | OBS: Considere que um ano tem 365 dias. Desconsidere anos bissextos (com 366 dias) e desconsidere
14 | também dias decorridos desde o último aniversário.
15 |
16 | Exemplo:
17 |
18 | converterIdadeEmAnosParaDias(25) // retornará 9125
19 |
20 | ----------------------------------------------------------------------------------------------------------
21 |
22 | 03 - Desenvolva uma função que recebe dois parâmetros, um é a quantidade de horas trabalhadas por um funcionário
23 | num mês, e o quanto ele recebe por hora. A função deverá calcular o salário líquido mensal do funcionário, que é
24 | da quantidade de horas trabalhadas no mês multiplicada pelo valor da sua hora. Desse valor, deve ser subtraído
25 | 30%, relativo a impostos. O retorno da função deve ser a string "Salário líquido é igual a R$ X", em que X é o salário líquido do funcionário no mês.
26 |
27 | Exemplo:
28 |
29 | calcularSalarioLiquido(180, 60) //Retornará "Salário igual a R$ 7560".
30 |
31 | ----------------------------------------------------------------------------------------------------------
32 |
33 | 04 - Crie uma função que recebe um número (de 1 a 12 e retorne o mês correspondente como uma string. Por
34 | exemplo, se a entrada for 2, a função deverá retornar "fevereiro", pois este é o 2° mês.
35 |
36 | Exemplo:
37 |
38 | receberNomeDoMes(1) // retornará "janeiro"
39 |
40 | ----------------------------------------------------------------------------------------------------------
41 |
42 | 05 - Crie uma função que receba dois números e retorne se o primeiro é maior ou igual ao segundo. Deverá diferenciar
43 | números de strings.
44 |
45 | Exemplo:
46 |
47 | maiorOuIgual(0, 0) // retornará true
48 | maiorOuIgual(0, "0") //retornará false
49 |
50 | ----------------------------------------------------------------------------------------------------------
51 |
52 | 06 - Escreva uma função que receba um valor booleano ou numérico. Se o parâmetro fornecido for booleano, o
53 | retorno da função deverá ser o inverso. Por exemplo, se a entrada for false, retornará true. Se o parâmetro for
54 | numérico, o retorno será o número inverso. Por exemplo, se for fornecido 1, o retorno será 1. Se o parâmetro de
55 | entrada não for de nenhum dos tipo acima, retorne "booleano ou número esperados, mas o parâmetro é do tipo ...".
56 |
57 | Exemplo:
58 |
59 | inverso(true) // retornará false
60 | inverso("6") // retornará "booleano ou número esperados, mas o parâmetro é do tipo string"
61 |
62 | ----------------------------------------------------------------------------------------------------------
63 |
64 | 07 - Crie uma função que receba quatro números como parâmetro (numero, minimo, maximo, inclusivo) e retorne se o
65 | parâmetro numero (o primeiro) está entre minimo e maximo. Quando o parâmetro inclusivo for true, tenha "entre"
66 | como inlusivo, ou seja, considerando se numero é igual a minimo ou a maximo. Caso o parâmetro inclusivo não
67 | seja informado, seu valor padrão deverá ser false, portanto, a lógica será exclusiva, não considerando se numero
68 | é igual a minimo ou a maximo.
69 |
70 | Exemplo:
71 |
72 | estaEntre(10, 10, 50) // retornará true
73 | estaEntre(16, 100, 160) // retornará false
74 |
75 | ----------------------------------------------------------------------------------------------------------
76 |
77 | 08 - Desenvolva uma função que recebe dois números inteiros não negativos (maiores ou iguais a zero) e realize a
78 | multiplicação deles. Porém, não utilize o operador de mutiplicação.
79 |
80 | Exemplo:
81 |
82 | multiplicar(5, 5) // retornará 25
83 | multiplicar(0, 7) // retornará 0
84 |
85 | ----------------------------------------------------------------------------------------------------------
86 |
87 | 09 - Escreva uma função que receba dois parâmetros. O primeiro parâmetro é o elemento que repetirá, enquanto que
88 | o segundo será o número de vezes que haverá repetição. Um array será retornado.
89 |
90 | Exemplo:
91 |
92 | repetir("código", 2) // retornará ["código", "código"]
93 | repetir(7, 3) // retornará [7, 7, 7]
94 |
95 | ----------------------------------------------------------------------------------------------------------
96 |
97 | 10 - Elabore uma função que recebe um número como parâmetro e retorne uma string com o símbolo "+" na
98 | quantidade especificada no parâmetro.
99 |
100 | Exemplo:
101 |
102 | simboloMais(2) // retornará "++"
103 | simboloMais(4) // retornará "++++"
--------------------------------------------------------------------------------
/6_Atividades/Resolucao-Atividades-01.js:
--------------------------------------------------------------------------------
1 | /* RESOLUÇÃO DAS ATIVIDADES-01 */
2 |
3 | /* OBS: PODEM EXISTIR OUTRAS FORMAS DE RESOLUÇÃO */
4 |
5 | //01
6 | function cumprimentar(nome) {
7 | return `Olá, ${nome}!`;
8 | }
9 |
10 | //02
11 | function converterIdadeParaDias(idade) {
12 | const diasdoAno = 365;
13 | return diasdoAno * idade;
14 | }
15 |
16 | //03
17 | function calcularSalarioLiquido(horasTrabalhadas, ganhoPorHora) {
18 | const salarioBruto = horasTrabalhadas * ganhoPorHora;
19 | const salarioLiquido = salarioBruto - salarioBruto * 30 / 100;
20 |
21 | return `Salário igual a R$ ${salarioLiquido}`;
22 | }
23 |
24 |
25 | //04
26 | function receberNomeDoMes(numeroDoMes) {
27 | const meses = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
28 |
29 | return meses[--numeroDoMes];
30 | }
31 |
32 | //05
33 | function maiorOuIgual(primeiro, segundo) {
34 | if (typeof primeiro != typeof segundo) {
35 | return false
36 | }
37 |
38 | return primeiro >= segundo;
39 | }
40 |
41 | //06
42 | function inverso(valor) {
43 | const tipo = typeof valor;
44 |
45 | if (tipo === "boolean") {
46 | return !valor;
47 | } else if (tipo === "number") {
48 | return -valor;
49 | } else {
50 | return `Booleano ou Número esperados, mas o parâmetro é do tipo ${tipo}`;
51 | }
52 | }
53 |
54 | //07
55 | function estaEntre(min, max, numero, inclusivo = false) {
56 | if (inclusivo) {
57 | return numero >= min && numero <= max;
58 | } else {
59 | return numero > min && numero < max;
60 | }
61 |
62 | //RESOLUÇÃO COM OPERADORES TERNÁRIOS
63 | //return inclusivo ? numero >= min && numero <= max : numero > min && numero < max;
64 | }
65 |
66 | //08
67 | function multiplicar(numeroA, numeroB) {
68 | let resultado = 0
69 |
70 | for (let i = 0; i < numeroB; i++) {
71 | resultado += numeroA
72 | }
73 |
74 | return resultado
75 | }
76 |
77 | //09
78 | function repetir(item, qtd) {
79 | return Array(qtd).fill(item);
80 | }
81 |
82 | //10
83 | function simboloMais(qtd) {
84 | return "+".repeat(qtd);
85 | }
86 |
87 |
88 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Vinicius Silva
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Javascript4Noobs
2 |
3 |
4 |
5 |
6 |
Tutorial de Javascript para iniciantes na linguagem.
12 |
13 |
14 |
15 | ## Sobre o Projeto
16 |
17 | ### Olá viajante...
18 |
19 | A jornada pelo mundo da Web não é nada fácil, mas se você chegou até aqui é por que tem vontade de adentrar esse mundo. Sem mais obstáculos pelo caminho, vamos lá...
20 |
21 | Bem vindo ao curso de Javascript da He4rt Developers.
22 |
23 | Ficamos muito felizes de você ter chegado até aqui em nosso curso! Estaremos trabalhando nos próximos passos para que você ganhe um conhecimento básico para começar a programar em **JavaScript**.
24 |
25 | > _Como estaremos usando inicialmente o Github para a hospedagem deste material, pedimos para que no caso de qualquer dúvida ou até sugestões de melhoria, que você cria um [**Issue**](https://github.com/ThiagoDellaNoce/javascript4noobs/issues) neste mesmo repositório, assim, conseguimos resolver essas questões dentro do nosso projeto._
26 |
27 | ## Módulos
28 |
29 | ### Introdução
30 |
31 | 1. [Hello World](/1_Introducao/1_Hello-World.md)
32 |
33 | ### Resumo
34 |
35 | 1. [Resumo](/2_Resumo/1_Resumo.md)
36 |
37 | ### Ambiente
38 |
39 | 1. [Editores e plugins](/3_Ambiente/1_Editores-e-plugins.md)
40 |
41 | ### Básico
42 |
43 | 1. [Saída](/4_Basico/1_Saida.md)
44 | 2. [Comentários](/4_Basico/2_Comentarios.md)
45 | 3. [Tipos de dados](/4_Basico/3_Tipos-de-dados.md)
46 | 4. [Variáveis](/4_Basico/4_Variaveis.md)
47 | 5. [Operadores Aritméticos](/4_Basico/5_Operadores-Aritmeticos.md)
48 | 6. [Operadores Lógicos](/4_Basico/6_Operadores-Logicos.md)
49 | 7. [Condicionais](/4_Basico/7_Condicionais.md)
50 | 8. [Estruturas de repetição](/4_Basico/8_Estruturas-de-repeticao.md)
51 | 9. [Funções](/4_Basico/9_Funcoes.md)
52 | 10. [Exceptions](/4_Basico/10_Exceptions.md)
53 | 11. [Operadores de Atribuição](/4_Basico/11_Operadores_de_Atribuicao.md)
54 | 12. [Principais métodos de Array](/4_Basico/12_PrincipaisMetodosArray.md)
55 | 13. [Entendendo o this](/4_Basico/13_Entendendo_o_this.md)
56 | 14. [Objetos](/4_Basico/14_Objetos.md)
57 |
58 | ### DOM (Document Object Model)
59 |
60 | 1. [Introdução](/5_DOM-DocumentObjectModel/1_Introducao.md)
61 | 2. [Métodos do DOM](/5_DOM-DocumentObjectModel/2_Metodos-DOM.md)
62 | 3. [Métodos de Acesso ao DOM](/5_DOM-DocumentObjectModel/3_Acessando-Elementos.md)
63 | 4. [Métodos de Alteração do DOM](/5_DOM-DocumentObjectModel/4_Alterando-Elementos.md)
64 | 5. [Métodos de Remoção de elementos do DOM](/5_DOM-DocumentObjectModel/5_Removendo-Elementos.md)
65 | 6. [Event Handlers](/5_DOM-DocumentObjectModel/6_Event-Handlers.md)
66 | 7. [Event Listener](/5_DOM-DocumentObjectModel/7_Event-Listener.md)
67 |
68 | ### Atividades
69 | 1. [Atividades](/6_Atividades/Atividades.txt)
70 | 2. [40 Atividades Básicas de Javacript](https://github.com/gabrieldarezzo/helpjs-ravi)
71 |
72 | # Como Contribuir com o 4noobs
73 |
74 | Contribuições fazem com que a comunidade open source seja um lugar incrível para aprender, inspirar e criar. Todas contribuições
75 | são **extremamente apreciadas**
76 |
77 | 1. Realize um Fork do projeto
78 | 2. Crie um branch com a nova feature (`git checkout -b feature/featureBraba`)
79 | 3. Realize o Commit (`git commit -m 'Add some featureBraba'`)
80 | 4. Realize o Push no Branch (`git push origin feature/featureBraba`)
81 | 5. Abra um Pull Request
82 |
83 | ## Autores
84 |
85 | - **Thiago Della Noce** - _Front-end Developer_ - [Linkedin](https://www.linkedin.com/in/thiagodellanoce/)
86 |
87 |
40 | 
9 | uma ilustração mostrando como o DOM estabelece os elementos no DOM.
10 | 
5 |
6 | 