├── 001 - Introdução
├── 001 - Primeiro Código
│ ├── index.html
│ └── index.js
└── 002 - Sitaxe e Comentário
│ └── index.js
├── 002 - Tipos Primitivos
├── 001 - String
│ └── index.js
├── 002 - Number
│ └── index.js
├── 003 - Boolean
│ └── index.js
├── 004 - undefined e null
│ └── index.js
├── 005 - Array
│ └── index.js
└── 006 - Object
│ └── index.js
├── 003 - Operadores aritméticos
├── 001 - Adição
│ └── index.js
├── 002 - Subtração
│ └── index.js
├── 003 - Multiplicação e Divisão
│ └── index.js
├── 004 - Remainder
│ └── index.js
├── 005 - Atribuição
│ └── index.js
├── 006 - Comparação
│ └── index.js
├── 007 - Lógicos
│ └── index.js
└── 008 - Precedência
│ └── index.js
├── 004 - Variáveis
├── 001 - Entendendo as variáveis
│ └── index.js
├── 002 - Nomeando variáveis
│ └── index.js
└── 003 - Escopo
│ └── index.js
├── 005 - Condicionais
├── 001 - if - else
│ └── index.js
├── 002 - Falsy e Truthy
│ └── index.js
├── 003 - Operador Ternário
│ └── index.js
└── 004 - Switch
│ └── index.js
├── 006 - Exercicios
├── 001 - Calculadora IMC
│ └── index.js
├── 002 - Tabuada
│ └── index.js
├── 003 - Letras Repetidas
│ └── index.js
├── 004 - Contador de vogais
│ └── index.js
├── 005 - Valores multiplos
│ └── index.js
├── 006 - Palíndromo
│ └── index.js
├── 007 - Contador de palavras em texto
│ └── index.js
├── 008 - Gerador de senha
│ └── index.js
├── 009 - Calculadora de idade
│ └── index.js
└── 010 - Quantos dias faltam para o final do mês
│ └── index.js
├── 007 - Funções
├── 001 - O que é uma função
│ └── index.js
├── 002 - Arguments
│ └── index.js
├── 003 - Hoisting
│ └── index.js
├── 004 - Function x Arrow Function
│ └── index.js
├── 005 - IIFE Expressão de função invocada imediatamente
│ └── index.js
├── 006 - use strict
│ └── index.js
├── 007 - Funções construtoras
│ └── index.js
└── 008 - Closures
│ └── index.js
├── 008 - Object a Fundo
├── 001 - O que é um objeto
│ └── index.js
├── 002 - Propriedades, Métodos e Valores curtos
│ └── index.js
├── 003 - Acessando Valores do Objeto
│ └── index.js
├── 004 - Destructuring
│ └── index.js
├── 005 - Verificação de Existência de Propriedade e Valor
│ └── index.js
├── 006 - Adicionando e Atualizando dados do Objeto
│ └── index.js
├── 007 - Removendo Propriedades do Objeto
│ └── index.js
├── 008 - Mesclando e Clonando objetos
│ └── index.js
└── 009 - Clonagem de objetos rasos e profundos
│ └── index.js
├── 009 - Array a Fundo
├── 001 - O que é um Array
│ └── index.js
├── 002 - Indices e Elementos
│ └── index.js
├── 003 - Matrizes multidimensionais
│ └── index.js
├── 004 - Destructuring
│ └── index.js
├── 005 - Spread Operator
│ └── index.js
├── 006 - Adicionando elementos
│ └── index.js
├── 007 - Removendo elementos
│ └── index.js
├── 008 - Removendo elementos 2
│ └── index.js
├── 009 - Ordenando e Revertendo Valores
│ └── index.js
├── 010 - Loop for… for…in e for…of
│ └── index.js
├── 011 - Continue e Break
│ └── index.js
├── 012 - Foreach
│ └── index.js
├── 013 - Map
│ └── index.js
├── 014 - Filter
│ └── index.js
├── 015 - Find
│ └── index.js
├── 016 - Every
│ └── index.js
├── 017 - Some
│ └── index.js
└── 018 - Reduce
│ └── index.js
├── 010 - DOM
├── 001 - O que é e para que serve o DOM
│ ├── index.html
│ └── script.js
├── 002 - Selecionando Elementos
│ ├── 001 - querySelector
│ │ ├── index.html
│ │ └── script.js
│ ├── 002 - querySelectorAll
│ │ ├── index.html
│ │ └── script.js
│ ├── 003 - getElementById
│ │ ├── index.html
│ │ └── script.js
│ ├── 004 - getElementsByTagName
│ │ ├── index.html
│ │ └── script.js
│ ├── 005 - getElementsByClassName
│ │ ├── index.html
│ │ └── script.js
│ └── 006 - Qual devo usar
│ │ ├── index.html
│ │ └── script.js
├── 003 - Manipulando valores
│ ├── 001 - textContent e innerText
│ │ ├── index.html
│ │ └── script.js
│ ├── 002 - innerHTML versus createElement
│ │ ├── index.html
│ │ └── script.js
│ ├── 003 - Input value
│ │ ├── index.html
│ │ └── script.js
│ ├── 004 - Atributos
│ │ ├── index.html
│ │ └── script.js
│ ├── 005 - createDocumentFragment
│ │ ├── index.html
│ │ └── script.js
│ └── 006 - Removendo elementos
│ │ ├── index.html
│ │ └── script.js
├── 004 - Manipulando Style
│ ├── 001 - Style
│ │ ├── index.html
│ │ └── script.js
│ ├── 002 - ClassList
│ │ ├── index.html
│ │ └── script.js
│ └── 003 - ClassName
│ │ ├── index.html
│ │ └── script.js
├── 005 - Encontrando elementos
│ ├── 001 - Pai ( parentElement e parentNode )
│ │ ├── index.html
│ │ └── script.js
│ ├── 002 - Filhos ( children, childNodes )
│ │ ├── index.html
│ │ └── script.js
│ ├── 003 - Filhos ( firstChild, firstElementChild )
│ │ ├── index.html
│ │ └── script.js
│ ├── 004 - Filhos ( lastChild, lastElementChild )
│ │ ├── index.html
│ │ └── script.js
│ ├── 005 - Irmãos ( nextSibling, nextElementSibling )
│ │ ├── index.html
│ │ └── script.js
│ ├── 006 - Irmãos ( previousSibling, previousElementSibling )
│ │ ├── index.html
│ │ └── script.js
│ ├── 007 - append e appendChild
│ │ ├── index.html
│ │ └── script.js
│ ├── 008 - insertBefore
│ │ ├── index.html
│ │ └── script.js
│ └── 009 - after e before
│ │ ├── index.html
│ │ └── script.js
├── 006 - Eventos
│ ├── 001 - Atributos do manipulador de eventos HTML
│ │ ├── index.html
│ │ └── script.js
│ ├── 002 - Manipuladores de eventos DOM Nível 0
│ │ ├── index.html
│ │ └── script.js
│ ├── 003 - Manipuladores de eventos DOM Nível 2
│ │ ├── index.html
│ │ └── script.js
│ ├── 004 - Removendo manipuladores de eventos
│ │ ├── index.html
│ │ └── script.js
│ ├── 005 - Preventing Default
│ │ ├── index.html
│ │ └── script.js
│ ├── 006 - Event Delegation
│ │ ├── index.html
│ │ └── script.js
│ └── 007 - Validando eventos
│ │ ├── index.html
│ │ └── script.js
└── 007 - Formulários
│ ├── 001 - Acessando os formulários
│ ├── index.html
│ └── script.js
│ ├── 002 - Submetendo formulário + FormData
│ ├── index.html
│ └── script.js
│ ├── 003 - Manipulando Input
│ ├── index.html
│ └── script.js
│ ├── 004 - Manipulando Radio Button
│ ├── index.html
│ └── script.js
│ └── 005 - Manipulando Checkbox
│ ├── index.html
│ └── script.js
├── 011 - Bug e Debug
├── 001 - Debugando
│ ├── index.html
│ └── index.js
├── 002 - exception
│ └── index.js
└── 003 - Try and Catch
│ └── index.js
├── 012 - Timers
├── 001 - setTimeout
│ └── index.js
├── 002 - clearTimeout
│ └── index.js
├── 003 - setInterval
│ └── index.js
└── 004 - clearInterval
│ └── index.js
└── 013 - Javascript assíncrono
├── 001 - Conceito do Callback
└── index.js
├── 002 - O que é uma Promise
└── index.js
├── 003 - Async - Await
└── index.js
├── 004 - Promise All
└── index.js
├── 005 - Promise Race
└── index.js
└── 006 - Promise AllSettled
└── index.js
/001 - Introdução/001 - Primeiro Código/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Curso
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/001 - Introdução/001 - Primeiro Código/index.js:
--------------------------------------------------------------------------------
1 | console.log("Olá Mundo!");
2 |
--------------------------------------------------------------------------------
/001 - Introdução/002 - Sitaxe e Comentário/index.js:
--------------------------------------------------------------------------------
1 | // Comentei
2 |
3 | /*
4 | Comentei 1
5 | Comentei 2
6 | Comentei 3
7 | */
8 |
9 | /*
10 | console.log("Olá Mundo!");
11 | */
12 |
--------------------------------------------------------------------------------
/002 - Tipos Primitivos/001 - String/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Como podemos escrever uma string
3 | 'Aqui vai uma string'
4 | "Aqui vai uma string"
5 | `Aqui vai uma string`
6 | */
7 |
8 | console.log('"Aqui vai uma string"');
9 | console.log("Aqui vai uma string");
10 | console.log(`Aqui vai uma string`);
11 | console.log(String(20));
12 |
--------------------------------------------------------------------------------
/002 - Tipos Primitivos/002 - Number/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Forma correta de se usar
3 | Number 123
4 | Number 123 + 123 = 246
5 | Number("123") - 1 = 122
6 |
7 |
8 | Cuidado que assim pode gerar Bugs
9 | Number "123" - 1 = 122
10 | Number "123" * 2 = 246
11 | */
12 |
13 | console.log(123);
14 | console.log(Number("123") + 1);
15 |
16 | console.log("******************");
17 |
18 | console.log(typeof 123);
19 | console.log(typeof Number("123"));
20 | console.log(typeof "123");
21 |
--------------------------------------------------------------------------------
/002 - Tipos Primitivos/003 - Boolean/index.js:
--------------------------------------------------------------------------------
1 | console.log(typeof false);
2 |
3 | console.log("******");
4 |
5 | console.log(false);
6 | console.log(true);
7 |
8 | console.log("******");
9 |
10 | console.log(1 === 2);
11 | console.log(2 === 2);
12 |
13 | /*
14 | Boolean é verdeiro ou falso
15 | true / false
16 | */
17 |
--------------------------------------------------------------------------------
/002 - Tipos Primitivos/004 - undefined e null/index.js:
--------------------------------------------------------------------------------
1 | console.log(undefined);
2 | console.log(null);
3 |
4 | console.log(undefined === null);
5 | console.log("" === null);
6 |
7 | /*
8 | undefined = algo que não foi definido no momento
9 | null = algo que veio nulo
10 | undefined é diferente de null
11 | */
12 |
--------------------------------------------------------------------------------
/002 - Tipos Primitivos/005 - Array/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Array
3 | 0 - Lista de Dados
4 | 1 - Conjunto de Dados
5 | */
6 |
7 | console.log(["Lista de Dados", "Conjunto de Dados"]);
8 | console.log(["Lista de Dados", "Conjunto de Dados"].length);
9 |
10 | ["Lista de Dados", "Conjunto de Dados"].forEach((res, index) => {
11 | console.log(res, index);
12 | });
13 |
--------------------------------------------------------------------------------
/002 - Tipos Primitivos/006 - Object/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Objeto: Tenis (Propriedade) "cadarço", "palmilha"
3 | Objeto: Celular (Propriedade)
4 | Objeto: Drone (Propriedade)
5 |
6 | Propriedades / Atributos / Funcionalidades
7 | */
8 |
9 | console.log({
10 | proprieadade: "Atributo",
11 | });
12 |
13 | console.log({
14 | tenis: [
15 | {
16 | preco: 150,
17 | disponivel: true,
18 | estoque: 150,
19 | cardaco: {
20 | cor: "rosa",
21 | tamaho: "G",
22 | },
23 | palmilha: {
24 | tamanho: 43,
25 | cor: "roxo",
26 | },
27 | },
28 | {
29 | preco: 30,
30 | disponivel: true,
31 | estoque: 5,
32 | cardaco: {
33 | cor: "rosa",
34 | tamaho: "G",
35 | },
36 | palmilha: {
37 | tamanho: 43,
38 | cor: "roxo",
39 | },
40 | },
41 | ],
42 | });
43 |
44 | console.log([
45 | {
46 | tenis: {
47 | preco: 150,
48 | disponivel: true,
49 | estoque: 150,
50 | cardaco: {
51 | cor: "rosa",
52 | tamaho: "G",
53 | },
54 | palmilha: {
55 | tamanho: 43,
56 | cor: "roxo",
57 | },
58 | },
59 | },
60 | {
61 | celular: {
62 | marca: "Motorola",
63 | },
64 | },
65 | ]);
66 |
--------------------------------------------------------------------------------
/003 - Operadores aritméticos/001 - Adição/index.js:
--------------------------------------------------------------------------------
1 | console.log(1 + 1);
2 | console.log(25 + 50);
3 |
4 | console.log("Dener " + "Troquatte");
5 | console.log("Nome:" + "Dener Troquatte" + ", " + "idade: " + 29 + 1);
6 | console.log("Nome:" + "Dener Troquatte" + ", " + "idade: " + (29 + 1));
7 |
8 | /*
9 | + Soma
10 | + Concatena
11 | */
12 |
--------------------------------------------------------------------------------
/003 - Operadores aritméticos/002 - Subtração/index.js:
--------------------------------------------------------------------------------
1 | console.log(1 - 1);
2 | console.log("250" - 1);
3 | console.log("ola250" - 1);
4 |
5 | /*
6 | - Subtração
7 | 1 - 1 = 0
8 | "1" - 1 = 0
9 | "olá250" - 1 = NaN
10 | */
11 |
--------------------------------------------------------------------------------
/003 - Operadores aritméticos/003 - Multiplicação e Divisão/index.js:
--------------------------------------------------------------------------------
1 | console.log(2 * 10);
2 | console.log(20 / 10);
3 |
4 | console.log(10 * 5);
5 | console.log(50 / 10);
6 |
7 | /*
8 | * Multiplicação
9 | 2 * 10 = 20
10 | 5 * 10 = 50
11 |
12 | / Divisão
13 | 20 / 10 = 2
14 | 50 / 10 = 5
15 | */
16 |
--------------------------------------------------------------------------------
/003 - Operadores aritméticos/004 - Remainder/index.js:
--------------------------------------------------------------------------------
1 | console.log(4 % 2);
2 | console.log(4 % 3);
3 |
4 | /*
5 | % Remainder, Porcentagem ou Resto
6 | 4 % 2 = 0 Valor Par
7 | 4 % 3 = 1 Valor Impar
8 | */
9 |
--------------------------------------------------------------------------------
/003 - Operadores aritméticos/005 - Atribuição/index.js:
--------------------------------------------------------------------------------
1 | let a = 6;
2 | let b = 2;
3 |
4 | // console.log(a);
5 | // console.log(a + b);
6 |
7 | a += 1;
8 | // a = a + 1
9 |
10 | a -= 1;
11 | // a = a - 1
12 |
13 | a *= 2;
14 | // a = a * 2
15 |
16 | a /= 3;
17 | // a = a / 3
18 |
19 | console.log(a);
20 | /*
21 | =, += -= *= /=
22 | */
23 |
--------------------------------------------------------------------------------
/003 - Operadores aritméticos/006 - Comparação/index.js:
--------------------------------------------------------------------------------
1 | console.log(1 == 1); // true
2 | console.log(1 == "1"); // true
3 | console.log(1 === 1); // true
4 | console.log(1 === "1"); // false
5 |
6 | console.log(1 != "1"); // false
7 | console.log(1 !== 1); // false
8 |
9 | console.log(3 > 2); // true
10 | console.log(3 < 2); // false
11 |
12 | console.log(2 >= 2); // true
13 | console.log(1 <= 2); // true
14 |
15 | /*
16 | ==, ===, != , !==, >, <, >=, <=
17 | */
18 |
--------------------------------------------------------------------------------
/003 - Operadores aritméticos/007 - Lógicos/index.js:
--------------------------------------------------------------------------------
1 | // console.log(1 === 1 && 2 >= 1);
2 | // console.log(1 === 1 && 1 >= 2);
3 |
4 | // console.log(1 === 2 || 1 === 1);
5 |
6 | console.log(!true);
7 | /*
8 | && ( E ), || (ou), ! ( Negação )
9 | */
10 |
--------------------------------------------------------------------------------
/003 - Operadores aritméticos/008 - Precedência/index.js:
--------------------------------------------------------------------------------
1 | (15 * 20) / 10;
2 | 15 * (20 / 10);
3 |
4 |
5 | (15 * 20 ) / 10 === 15 && 10 * 10 === 14;
6 | (false && false) = false
7 |
8 |
--------------------------------------------------------------------------------
/004 - Variáveis/001 - Entendendo as variáveis/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | var // Ele é utilizado globalmente
3 | let // Ele é gerando dentro de um escopo
4 | const // Ele é gerando dentro de um escopo porém podemos armazenar dados apenas 1x
5 | */
6 |
7 | var cachorro = "Kyara";
8 | console.log(cachorro);
9 |
10 | cachorro = "Teca";
11 | console.log(cachorro);
12 |
13 | let lanche = "Bolovo";
14 | console.log(lanche);
15 |
16 | lanche = "Misto quente";
17 | console.log(lanche);
18 |
19 | const nome = "Dener";
20 | console.log(nome);
21 |
22 | nome = "Dener Troquatte";
23 | console.log(nome);
24 |
--------------------------------------------------------------------------------
/004 - Variáveis/002 - Nomeando variáveis/index.js:
--------------------------------------------------------------------------------
1 | let cachorroIdade; // Correto
2 | let cachorro_idade; // Correto
3 | let nomeSobrenome$; // Correto porém utilizado em casos especificos
4 |
5 | let cachorro-idade; // Errado
6 | let cachorro Idade; // Errado
7 | let 123; // Errado
8 |
9 | let nome1; // Certo porém não faz sentido o nome escreva nomes claros e objetivos
10 |
11 | let retur; // Errado pois é uma palavra reservada no javascript
12 | let break; // Errado pois é uma palavra reservada no javascript
--------------------------------------------------------------------------------
/004 - Variáveis/003 - Escopo/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Escopo:
3 | Determina quais
4 | são os dados que podem
5 | ser acessados em uma determinada
6 | parte do código.
7 | */
8 |
9 | {
10 | var nome = "Dener"; // Var sempre será global cuidado ao utilizar
11 | }
12 |
13 | {
14 | let idade = 30; // Let funciona dentro de um escopo/bloco de código
15 | console.log(nome); // Var sempre será global cuidado ao utilizar
16 | console.log(idade);
17 | }
18 |
19 | {
20 | const sobrenome = "Troquatte"; // const funciona dentro de um escopo/bloco de código
21 | console.log(nome); // Var sempre será global cuidado ao utilizar
22 | console.log(idade); // Vai dar Erro devido a let em outro espcopo
23 | console.log(sobrenome);
24 | }
25 |
--------------------------------------------------------------------------------
/005 - Condicionais/001 - if - else/index.js:
--------------------------------------------------------------------------------
1 | let soma = -10;
2 |
3 | if (soma >= 0) {
4 | console.log("Você está com o saldo positivo");
5 | } else if (soma === 0) {
6 | console.log("Você está com o saldo zerado");
7 | } else {
8 | console.log("Você está com o saldo negativo");
9 | }
10 |
--------------------------------------------------------------------------------
/005 - Condicionais/002 - Falsy e Truthy/index.js:
--------------------------------------------------------------------------------
1 | // Falsy = false, 0, "", NaN, undefined e null
2 | // Truthy = Todos os outros diferentes do [ falsy ]
3 |
4 | if ("Dener" * 10) {
5 | console.log("Bom dia!");
6 | } else {
7 | console.log("Boa noite!");
8 | }
9 |
10 | if (!null) {
11 | console.log("Falsy or False");
12 | }
13 |
14 | if (1 + 1) {
15 | console.log("True");
16 | }
17 |
--------------------------------------------------------------------------------
/005 - Condicionais/003 - Operador Ternário/index.js:
--------------------------------------------------------------------------------
1 | const velocidade = 86;
2 | const warn = 85;
3 |
4 | // condicao ? true : false;
5 |
6 | const condicacao =
7 | velocidade >= warn
8 | ? console.log("Recebeu uma Multa!")
9 | : console.log("Continua Andando!");
10 |
11 | if (velocidade >= warn) {
12 | console.log("Recebeu uma Multa!");
13 | } else {
14 | console.log("Continua Andando!");
15 | }
16 |
--------------------------------------------------------------------------------
/005 - Condicionais/004 - Switch/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Janeiro
3 | Fevereiro
4 | Março
5 | Abril
6 | Maio
7 | Junho
8 | Julho
9 | Agosto
10 | Setembro
11 | Outubro
12 | Novembro
13 | Dezembro
14 | */
15 |
16 | const mes = "Janeiro";
17 | switch (mes) {
18 | case 1:
19 | console.log("Janeiro");
20 | break;
21 | case 2:
22 | console.log("Fevereiro");
23 | break;
24 | case 3:
25 | console.log("Março");
26 | break;
27 | case 4:
28 | console.log("Abril");
29 | break;
30 | case 5:
31 | console.log("Maio");
32 | break;
33 | case 6:
34 | console.log("Junho");
35 | break;
36 | case 7:
37 | console.log("Julho");
38 | break;
39 | case 8:
40 | console.log("Agosto");
41 | break;
42 | case 9:
43 | console.log("Setembro");
44 | break;
45 | case 10:
46 | console.log("Outubro");
47 | break;
48 | case 11:
49 | console.log("Novembro");
50 | break;
51 | case 12:
52 | console.log("Dezembro");
53 | break;
54 |
55 | default:
56 | console.log("Este mês não existe");
57 | break;
58 | }
59 |
--------------------------------------------------------------------------------
/006 - Exercicios/001 - Calculadora IMC/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | IMC é a sigla para Índice de Massa Corpórea,
3 | parâmetro adotado pela Organização Mundial
4 | de Saúde para calcular o peso ideal de cada pessoa.
5 |
6 | Como calcular o IMC?
7 | O IMC é calculado dividindo o peso (em kg) pela
8 | altura ao quadrado (em m), de acordo com a seguinte
9 | fórmula: IMC = peso / (altura x altura).
10 |
11 | E nosso calculo devemos retornar os seguintes valores para o usuário:
12 |
13 | Resultado do Calc | Resultado para o usuário
14 | Abaixo de 17 | Muito abaixo do peso
15 | Entre 17 e 18.49 | Abaixo do peso
16 | Entre 18.5 e 24.99 | Peso normal
17 | Entre 25 e 29.99 | Acima do peso
18 | Entre 30 e 34.99 | Obesidade I
19 | Entre 35 e 39.99 | Obesidade II
20 | */
21 |
22 | const peso = 75;
23 | const altura = 1.7;
24 | const imc = Number((peso / (altura * altura)).toFixed(2));
25 |
26 | switch (true) {
27 | case imc < 17:
28 | console.log("Muito abaixo do peso");
29 | break;
30 |
31 | case imc >= 17 && imc <= 18.49:
32 | console.log("Abaixo do peso");
33 | break;
34 |
35 | case imc >= 18.5 && imc <= 24.99:
36 | console.log("Peso normal");
37 | break;
38 |
39 | case imc >= 25 && imc <= 29.99:
40 | console.log("Acima do peso");
41 | break;
42 |
43 | case imc >= 30 && imc <= 34.99:
44 | console.log("Obesidade I");
45 | break;
46 |
47 | case imc >= 35 && imc <= 39.99:
48 | console.log("Obesidade II");
49 | break;
50 | }
51 |
--------------------------------------------------------------------------------
/006 - Exercicios/002 - Tabuada/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos mostrar a tabuada no console de 0 até 10 neste seguinte formato:
3 |
4 | multiplicador x número = resultado
5 | multiplicador x 0 = resultado
6 | multiplicador x 1 = resultado
7 | multiplicador x 2 = resultado
8 | multiplicador x 3 = resultado
9 | ...
10 | multiplicador x 10 = resultado
11 |
12 | Obs.: não podemos criar varios consoles.log(multiplicador x 3 = resultado)
13 | */
14 |
15 | const multiplicador = 8;
16 |
17 | // let i = 0
18 | // Chegará até o valor desejado = 10
19 | // Ele add + 1 sobre o valor então sempre que acabar o código ele add + 1 = 1 + 1 = 2
20 | for (let i = 0; i <= 100; i++) {
21 | const calc = multiplicador * i;
22 | console.log(`${multiplicador} x ${i} = ${calc}`);
23 | }
24 |
--------------------------------------------------------------------------------
/006 - Exercicios/003 - Letras Repetidas/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos mostrar quantas letras repetiras aparecem em uma palvra
3 | exp.: Abacate = { a: 3, b: 1, c: 1, t: 1, e: 1 }
4 | */
5 |
6 | const palavra = "Abacate".toLowerCase();
7 |
8 | let letras = {};
9 |
10 | for (let i = 0; i < palavra.length; i++) {
11 | if (letras[palavra[i]]) {
12 | letras[palavra[i]]++;
13 | } else {
14 | letras[palavra[i]] = 1;
15 | }
16 | }
17 |
18 | console.log(letras);
19 |
--------------------------------------------------------------------------------
/006 - Exercicios/004 - Contador de vogais/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos desenvolver um contador de vogais que não apenas calcule a quantidade
3 | de vogais em uma frase, mas também retorne as vogais que foram utilizadas.
4 |
5 | exp.: Abacate = { total: x, vogais: [x,y,z] }
6 | */
7 |
8 | let minhaString = "Dener São Pedro Troquatte";
9 | minhaString = minhaString.toLowerCase();
10 |
11 | const vogais = [...minhaString].filter((vogal) =>
12 | /[aeiouáéíóúàèìòùãẽĩõũâêîôûäëïöü]/.test(vogal)
13 | );
14 |
15 | const total = vogais.length;
16 | console.log({ total, vogais });
17 |
--------------------------------------------------------------------------------
/006 - Exercicios/005 - Valores multiplos/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos desenvolver um contador que substitua os múltiplos
3 | de 3 por "Javascript" e os múltiplos de 5 por "Typescript"
4 |
5 | Para isso use o operador % Remainder.
6 |
7 | exp.: 3, 6, 9...etc por "Javascript" e 5, 10, 15...etc por "Typescript"
8 | */
9 |
10 | for (let i = 1; i <= 100; i++) {
11 | switch (true) {
12 | case i % 3 === 0 && i % 5 === 0:
13 | console.log("Javascript / Typescript");
14 | break;
15 |
16 | case i % 3 === 0:
17 | console.log("Javascript");
18 | break;
19 |
20 | case i % 5 === 0:
21 | console.log("Typescript");
22 | break;
23 |
24 | default:
25 | console.log(i);
26 | break;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/006 - Exercicios/006 - Palíndromo/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos desenvolver uma ferramenta que verifique se a palavra é um palíndromo
3 |
4 | exp.: arara = true
5 | exp.: dener = false
6 | */
7 |
8 | let palavra = "Arara";
9 | palavra = palavra.toLowerCase();
10 |
11 | const palindromo = palavra === palavra.split("").reverse().join("");
12 |
13 | if (palindromo) {
14 | return console.log(palavra + " é um palíndromo.");
15 | }
16 |
17 | return console.log(palavra + " não é um palíndromo.");
18 |
--------------------------------------------------------------------------------
/006 - Exercicios/007 - Contador de palavras em texto/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos desenvolver uma ferramenta que conte palavras em um texto
3 |
4 | exp.: javascript = 15
5 | */
6 |
7 | const buscarPalavra = "Jujubes".toLowerCase();
8 | const frase =
9 | "Jujubes ice cream biscuit cheesecake marshmallow lemon drops. Gummi bears cotton candy toffee cupcake cotton candy. Powder cookie soufflé chupa chups cake chupa chups. Powder cotton candy bonbon topping topping. Donut fruitcake macaroon dessert ice cream. Wafer chocolate bar candy dragée sesame snaps donut candy canes lemon drops. Ice cream liquorice gingerbread sweet gummies cake oat cake chocolate candy. Cookie croissant toffee halvah tootsie roll dessert sweet lemon drops gummi bears. Biscuit muffin jelly pie sweet jelly chocolate cake jujubes. Donut jelly beans jelly beans bear claw cotton candy chocolate cake candy canes marzipan icing. Bonbon chocolate lollipop dragée soufflé tart icing pie lollipop. Liquorice jelly oat cake fruitcake tiramisu pudding gummies. Jelly-o apple pie cake cookie lemon drops oat cake jujubes oat cake. Jelly-o toffee danish pastry cake brownie. Sweet roll chocolate bar fruitcake pie sweet roll gingerbread cake chupa chups. Jelly candy topping cake jelly beans chupa chups cookie pie. Gummi bears pudding liquorice jujubes topping croissant.".toLowerCase();
10 |
11 | const contarPalavras = frase
12 | .split(" ")
13 | .filter((palavra) => palavra === buscarPalavra).length;
14 |
15 | console.log({ buscarPalavra, contarPalavras });
16 |
--------------------------------------------------------------------------------
/006 - Exercicios/008 - Gerador de senha/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos desenvolver uma ferramenta gere senhas aletórias de acordo com tamanho especifico
3 |
4 | exp.: new pass = BXUwPof1fh47fF1qYKQD
5 | */
6 |
7 | const caracteres =
8 | "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
9 | const tamanhoSenha = 12;
10 |
11 | let senha = "";
12 |
13 | for (let i = 1; i <= tamanhoSenha; i++) {
14 | const indice = Math.floor(Math.random() * caracteres.length);
15 | senha += caracteres.charAt(indice);
16 | }
17 |
18 | console.log(senha);
19 |
--------------------------------------------------------------------------------
/006 - Exercicios/009 - Calculadora de idade/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos desenvolver uma ferramenta que calcule a idade da pessoa de acordo
3 | com a data especifica
4 |
5 | exp.: A idade da pessoa é x anos.
6 | */
7 |
8 | let dataNascimento = "20/12/1991";
9 | dataNascimento = dataNascimento.split("/").reverse();
10 |
11 | const hoje = new Date();
12 |
13 | if (dataNascimento.length !== 3) {
14 | return console.log("Formato de data inválido. Use o formato DD/MM/AAAA");
15 | }
16 |
17 | dataNascimento = new Date(dataNascimento.join("-"));
18 |
19 | let idade = hoje.getFullYear() - dataNascimento.getFullYear();
20 |
21 | const mesAtual = hoje.getMonth() + 1;
22 | const mesNascimento = dataNascimento.getMonth() + 1;
23 |
24 | if (
25 | mesAtual < mesNascimento ||
26 | (mesAtual === mesNascimento && hoje.getDate() < dataNascimento.getDate())
27 | ) {
28 | idade--;
29 | }
30 |
31 | console.log("A idade da pessoa é de " + idade + " anos.");
32 |
--------------------------------------------------------------------------------
/006 - Exercicios/010 - Quantos dias faltam para o final do mês/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Precisamos desenvolver uma ferramenta que calcule quantos dias faltam para
3 | o final do mês
4 |
5 | exp.: `Faltam x dias para o fim do mês.
6 | */
7 |
8 | const dataAtual = new Date();
9 | const ano = dataAtual.getFullYear();
10 | const mes = dataAtual.getMonth();
11 |
12 | const proximoMes = new Date(ano, mes + 1, 1);
13 |
14 | const umDia = 1000 * 60 * 60 * 24;
15 | const diffTempo = Math.abs(proximoMes - dataAtual);
16 | const diffDias = Math.ceil(diffTempo / umDia);
17 |
18 | console.log("Faltam " + diffDias + " dias para o fim do mês.");
19 |
--------------------------------------------------------------------------------
/007 - Funções/001 - O que é uma função/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | O que é uma função?
3 | É um conjunto de instruções que executa uma tarefa ou calcula um valor.
4 | */
5 |
6 | // 1 - Functions declaration
7 | function isValidDeclaration() {
8 | const soma = 1 + 2;
9 |
10 | if (soma === 3) {
11 | return true;
12 | }
13 |
14 | return false;
15 | }
16 | // console.log(isValidDeclaration());
17 |
18 | // 2 - Functions expression
19 | const isValidExpression = function () {
20 | return false;
21 | };
22 |
23 | // console.log(isValidExpression());
24 | // 3 - Arrow Functions
25 | const isValidArrow = () => {
26 | const multiplicacao = 2 * 2;
27 | return multiplicacao;
28 | };
29 |
30 | console.log(isValidArrow());
31 |
--------------------------------------------------------------------------------
/007 - Funções/002 - Arguments/index.js:
--------------------------------------------------------------------------------
1 | // function soma(num1, num2) {
2 | // if (typeof num1 === "number" && typeof num2 === "number") {
3 | // return num1 + num2;
4 | // }
5 |
6 | // return "Você passou dados diferentes!";
7 | // }
8 |
9 | // console.log(soma(5, 5));
10 |
11 | const subtracao = (num1 = 0, num2 = 0) => {
12 | if (typeof num1 === "number" && typeof num2 === "number") {
13 | return num1 - num2;
14 | }
15 |
16 | return "Você passou dados diferentes!";
17 | };
18 |
19 | console.log(subtracao(1, 2));
20 |
--------------------------------------------------------------------------------
/007 - Funções/003 - Hoisting/index.js:
--------------------------------------------------------------------------------
1 | console.log(x);
2 | console.log(soma());
3 |
4 | function soma() {
5 | return 1 + 1;
6 | }
7 |
8 | var x = 10;
9 |
--------------------------------------------------------------------------------
/007 - Funções/004 - Function x Arrow Function/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | 1 - Nome de função
3 | 2 - Retorno
4 | 3 - Não tem Hoisting
5 | 4 - Arguments
6 | */
7 |
8 | function nomeFunc() {
9 | return "Dener Troquatte";
10 | }
11 |
12 | console.log(nomeFunc());
13 |
14 | const nomeFuncArrow = () => {
15 | return "Dener Troquatte";
16 | };
17 |
18 | console.log(nomeFuncArrow());
19 |
20 | const nomeFuncArrowReturn = () => "Dener Troquatte";
21 |
22 | console.log(nomeFuncArrowReturn());
23 |
24 | const nomeFuncArrowHoisting = () => {
25 | return "Dener Troquatte";
26 | };
27 |
28 | console.log(nomeFuncArrowHoisting());
29 |
30 | // Não funciona o arguments
31 | // const nomeFuncArrowArguments = () => {
32 | // return arguments;
33 | // };
34 | // console.log(nomeFuncArrowArguments());
35 |
36 | function nomeFuncArguments() {
37 | return arguments;
38 | }
39 |
40 | console.log(nomeFuncArguments("Dener Troquatte"));
41 |
42 | const nomeFuncArrowParams = (param) => param;
43 |
44 | /*
45 | 5 - Não pode ser invocada com New
46 | */
47 |
48 | function newFunc() {
49 | return "Dener Troquatte";
50 | }
51 |
52 | console.log(new newFunc());
53 |
54 | const newFuncArrow = () => {
55 | return "Dener Troquatte";
56 | };
57 |
58 | console.log(new newFuncArrow()); // o New não vai Funcionar na Arrow Function
59 |
60 | /*
61 | 6 - Contexto
62 | Arrow functions possuem this léxico enquanto o modelo normal possui this dinâmico.
63 |
64 | Isso significa que arrow functions herdam o contexto local de onde foi declarado,
65 | enquanto o modelo normal possui o contexto associado ao objeto que ele está vinculado
66 | no momento da chamada
67 |
68 | Se ele não estiver associado a ninguém na chamada, ele assumirá this automaticamente
69 | como o contexto global, que no caso dos navegadores é window
70 | */
71 |
72 | const lanches = {
73 | cardapio: [
74 | { nome: "x-salada", preco: "R$ 25" },
75 | { nome: "x-bolovo", preco: "R$ 30" },
76 | ],
77 |
78 | meuPedidoFunc: function (select) {
79 | return console.log(this.cardapio[select]);
80 | },
81 |
82 | meuPedidoFuncTimeOut: function () {
83 | setTimeout(
84 | function () {
85 | console.log(this.cardapio);
86 | console.log(this);
87 | }.bind(this),
88 | 1000
89 | );
90 | },
91 |
92 | meuPedidoArrowFunc: (select) => {
93 | this.cardapio = [
94 | { nome: "x-salada", preco: "R$ 25" },
95 | { nome: "x-bolovo", preco: "R$ 30" },
96 | ];
97 |
98 | return console.log(this.cardapio[select]);
99 | },
100 | };
101 |
102 | lanches.meuPedidoFunc(1);
103 | lanches.meuPedidoArrowFunc(1);
104 | lanches.meuPedidoFuncTimeOut();
105 |
106 | /*
107 | 7 - Constructor
108 | Arrow functions não podem ser constructors, então não é possível usar o operador
109 | new com a mesma.
110 | */
111 |
112 | class newFunc {
113 | constructor(nome) {
114 | this.nome = nome;
115 | }
116 | }
117 |
118 | const a = new newFunc("Dener Troquatte");
119 | console.log(a.nome);
120 |
--------------------------------------------------------------------------------
/007 - Funções/005 - IIFE Expressão de função invocada imediatamente/index.js:
--------------------------------------------------------------------------------
1 | // IIFE = Immediately Invoked Function Expression
2 | // IIFE = Expressão de função invocada imediatamente
3 |
4 | (() => {
5 | var teste = "teste1";
6 | console.log(teste);
7 | })();
8 |
9 | (() => {
10 | var teste = "teste2";
11 | console.log(teste);
12 | })();
13 |
14 | console.log(teste);
15 |
--------------------------------------------------------------------------------
/007 - Funções/006 - use strict/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | O strict mode elimina alguns erros silenciosos
3 | que passariam batido do JavaScript e os faz emitir erros.
4 |
5 | Além disso, essa forma corrige alguns erros que tornam o JavaScript
6 | difícil de ser otimizado, então algumas vezes os códigos no modo estrito
7 | rodam mais otimizados e velozes do que os códigos no ‘modo normal’.
8 |
9 | link: https://www.geeksforgeeks.org/strict-mode-javascript/
10 | */
11 | "use strict";
12 |
13 | (() => {
14 | teste = "teste";
15 | })();
16 |
17 | console.log(teste);
18 |
--------------------------------------------------------------------------------
/007 - Funções/007 - Funções construtoras/index.js:
--------------------------------------------------------------------------------
1 | // Name
2 | function Name(name, sobrenome) {
3 | this.name = name;
4 |
5 | this.sobreNome = () => {
6 | const nomeCompleto = `${this.name} ${sobrenome}`;
7 | return nomeCompleto;
8 | };
9 | }
10 |
11 | const dener = new Name("Dener", "Troquatte");
12 |
13 | console.log(dener.sobreNome());
14 | // end Name
15 |
16 | // Calculadora
17 | function Calculadora() {
18 | this.soma = (num1, num2) => {
19 | return `${num1 + num2}`;
20 | };
21 |
22 | this.subtracao = (num1, num2) => {
23 | return `${num1 - num2}`;
24 | };
25 | }
26 |
27 | const calculadora = new Calculadora();
28 |
29 | console.log(calculadora.soma(1, 2));
30 | console.log(calculadora.subtracao(5, 1));
31 | // end Calculadora
32 |
--------------------------------------------------------------------------------
/007 - Funções/008 - Closures/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Uma closure ocorre normalmente quando uma função
3 | é declarada dentro do corpo de outra, e a função interior
4 | referencia variáveis locais da função exterior.
5 | */
6 |
7 | // function QualSeuNome(name) {
8 | // const msg = `O seu nome é:`;
9 |
10 | // function SeuName() {
11 | // return `${msg} ${name}`;
12 | // }
13 |
14 | // return SeuName();
15 | // }
16 |
17 | // console.log(QualSeuNome("Dener"));
18 |
19 | function Calculadora(num1, num2) {
20 | const msg = "Resultado:";
21 |
22 | const soma = () => {
23 | return `${msg} ${num1 + num2}`;
24 | };
25 |
26 | const subtracao = () => {
27 | return `${msg} ${num1 - num2}`;
28 | };
29 |
30 | const multiplicacao = () => {
31 | return `${msg} ${num1 * num2}`;
32 | };
33 |
34 | const divisao = () => {
35 | return `${msg} ${num1 / num2}`;
36 | };
37 |
38 | return {
39 | soma: soma(),
40 | subtracao: subtracao(),
41 | multiplicacao: multiplicacao(),
42 | divisao: divisao(),
43 | };
44 | }
45 |
46 | console.log(Calculadora(10, 5));
47 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/001 - O que é um objeto/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Objeto: Tenis (Propriedade) "cadarço", "palmilha"
3 | Objeto: Celular (Propriedade)
4 | Objeto: Drone (Propriedade)
5 |
6 | Propriedades / Atributos / Funcionalidades
7 | */
8 |
9 | let Tenis = {
10 | tipo: "Tenis de Corrida",
11 | cardaco: "G",
12 | estoque: false,
13 | tamanho: {
14 | palmilha: 39,
15 | tenis: 40,
16 | caixa: {
17 | altura: 35,
18 | largura: 40,
19 | profunidade: 10,
20 | },
21 | },
22 | marcaArrayValores: ["Nike", "Adidas", "etc"],
23 | marcaArrayObj: [
24 | {
25 | nome: "Nike",
26 | },
27 | {
28 | nome: "Adidas",
29 | },
30 | {
31 | nome: "etc",
32 | },
33 | ],
34 | getMarcaArrayValores: function (param) {
35 | return this.marcaArrayObj[param];
36 | },
37 | getMarcaArrayObj: function (param) {
38 | return this.marcaArrayObj[param].nome;
39 | },
40 | };
41 |
42 | console.log(Tenis);
43 | console.log(Tenis.tipo);
44 | console.log(Tenis.tamanho);
45 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/002 - Propriedades, Métodos e Valores curtos/index.js:
--------------------------------------------------------------------------------
1 | function Tenis(tamanho, estoque, preco) {
2 | return {
3 | tamanho,
4 | estoque,
5 | preco,
6 | };
7 | }
8 |
9 | console.log(Tenis(35, true, "R$ 35"));
10 |
11 | const tamanho = 35;
12 | const estoque = true;
13 | const preco = "R$ 35";
14 |
15 | const Tenis2 = {
16 | tamanho,
17 | estoque,
18 | preco,
19 | };
20 |
21 | console.log(Tenis2);
22 |
23 | const Tenis3 = {
24 | getTamanho() {
25 | return 35;
26 | },
27 | };
28 |
29 | console.log(Tenis3.getTamanho());
30 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/003 - Acessando Valores do Objeto/index.js:
--------------------------------------------------------------------------------
1 | const Tenis = {
2 | tamanho: 45,
3 | marca: "Nike",
4 | };
5 |
6 | console.log(Tenis.marca);
7 | console.log(Tenis.tamanho);
8 |
9 | console.log(typeof Tenis.tamanho);
10 | console.log(Tenis.tamanho + 5);
11 | console.log("Marca " + Tenis.marca + " é muito boa");
12 | console.log(`Marca ${Tenis.marca} é muito boa`);
13 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/004 - Destructuring/index.js:
--------------------------------------------------------------------------------
1 | const Tenis = {
2 | tamanho: 45,
3 | estoque: true,
4 | marcas: [{ nome: "Nike" }, { nome: "Adidas" }],
5 | secret: 123456,
6 | n: 5,
7 | link: { a: "a é = a", b: { c: "C é = c" } },
8 | };
9 |
10 | const { tamanho, estoque, marcas = "Não possui Marca alguma!" } = Tenis;
11 | console.log(tamanho, estoque, marcas);
12 |
13 | const { secret: randomNumber, n: avaliacoes } = Tenis;
14 | console.log(secret);
15 | console.log(randomNumber);
16 | console.log(avaliacoes);
17 |
18 | const {
19 | link: {
20 | a,
21 | b: { c },
22 | },
23 | } = Tenis;
24 |
25 | console.log(a);
26 |
27 | console.log(Tenis.link.a, Tenis.link.b.c);
28 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/005 - Verificação de Existência de Propriedade e Valor/index.js:
--------------------------------------------------------------------------------
1 | const Tenis = {
2 | tamanho: 45,
3 | estoque: true,
4 | marcas: [{ nome: "Nike" }, { nome: "Adidas" }],
5 | secret: 123456,
6 | n: 5,
7 | link: { a: "a é = a", b: { c: "C é = c" } },
8 | };
9 |
10 | // hasOwnProperty | propertyName in Tenis
11 |
12 | console.log(Tenis.hasOwnProperty("tamanho"));
13 | if (Tenis.hasOwnProperty("tamanho")) {
14 | console.log("Existe tamanho");
15 | } else {
16 | console.log("Não Existe tamanho");
17 | }
18 |
19 | console.log("tamanho" in Tenis);
20 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/006 - Adicionando e Atualizando dados do Objeto/index.js:
--------------------------------------------------------------------------------
1 | let Tenis = {
2 | tamanho: 45,
3 | estoque: true,
4 | };
5 |
6 | Tenis.tamanho = 42;
7 | Tenis.estoque = false;
8 | // Tenis.preco = "R$ 42";
9 | Tenis["preco"] = "R$ 42";
10 |
11 | console.log(Tenis);
12 | console.log(Tenis["preco"]);
13 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/007 - Removendo Propriedades do Objeto/index.js:
--------------------------------------------------------------------------------
1 | let Tenis = {
2 | tamanho: 45,
3 | estoque: true,
4 | };
5 |
6 | delete Tenis.estoque;
7 |
8 | console.log(Tenis);
9 |
10 | Tenis.estoque = true;
11 |
12 | console.log(Tenis);
13 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/008 - Mesclando e Clonando objetos/index.js:
--------------------------------------------------------------------------------
1 | let Tenis = {
2 | tamanho: 45,
3 | estoque: true,
4 | };
5 |
6 | let link = { link: { a: "a", b: { c: "c" } } };
7 |
8 | let clone1 = Tenis;
9 | let mesclar1 = Object.assign(Tenis, link);
10 | let mesclar2 = { ...Tenis, ...link };
11 |
12 | console.log(clone1);
13 |
14 | clone1.estoque = false;
15 | mesclar1.link.a = "ABC";
16 |
17 | console.log(mesclar1);
18 | console.log(mesclar2);
19 | console.log(Tenis);
20 |
--------------------------------------------------------------------------------
/008 - Object a Fundo/009 - Clonagem de objetos rasos e profundos/index.js:
--------------------------------------------------------------------------------
1 | let Tenis = {
2 | tamanho: 45,
3 | estoque: true,
4 | };
5 |
6 | let link = { link: { a: "a", b: { c: "c" } } };
7 |
8 | function cloneObject(objc) {
9 | return JSON.parse(JSON.stringify(objc));
10 | }
11 |
12 | let clone1 = cloneObject(Tenis);
13 |
14 | console.log(1, clone1);
15 | console.log(2, Tenis);
16 |
17 | let mesclar1 = Object.assign(cloneObject(Tenis), cloneObject(link));
18 | let mesclar2 = {
19 | ...cloneObject(Tenis),
20 | ...cloneObject(link),
21 | };
22 |
23 | clone1.estoque = false;
24 | mesclar1.link.a = "ABC";
25 |
26 | console.log(3, clone1);
27 | console.log(4, Tenis);
28 | console.log(5, mesclar1);
29 | console.log(6, mesclar2);
30 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/001 - O que é um Array/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Array
3 | 0 - Lista de Dados
4 | 1 - Conjunto de Dados
5 | */
6 |
7 | console.log([1, 2, 3, 4, true, "Dener", { nome: "Dener Troquatte" }]);
8 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/002 - Indices e Elementos/index.js:
--------------------------------------------------------------------------------
1 | const arr = [1, 2, 3, 4, true, "Dener", "Troquatte"];
2 |
3 | console.table(arr);
4 | console.log(arr[6]);
5 | console.log(arr.length);
6 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/003 - Matrizes multidimensionais/index.js:
--------------------------------------------------------------------------------
1 | const arr = [
2 | [1, 2, 3],
3 | [4, 5, 6],
4 | [7, 8, 9],
5 | [
6 | [1, 2, 3],
7 | [4, 5, 6],
8 | [7, 8, 9],
9 | [
10 | [1, 2, 3],
11 | [4, 5, 6],
12 | [7, 8, 9],
13 | ],
14 | ],
15 | ];
16 |
17 | console.table(arr);
18 | console.log(arr[3][2][2]);
19 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/004 - Destructuring/index.js:
--------------------------------------------------------------------------------
1 | const [a, b, c] = ["Arroz", "Feijão", "Bife"];
2 | const comida = ["Arroz", "Feijão", "Bife"];
3 |
4 | console.log(a);
5 | console.log(b);
6 | console.log(c);
7 |
8 | console.log(comida[0], comida[1], comida[2]);
9 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/005 - Spread Operator/index.js:
--------------------------------------------------------------------------------
1 | const num = [1, 2, 33, 4, 5];
2 |
3 | console.log(...num);
4 | console.log(num[0], num[1]);
5 | // console.log(Math.max(1, 2, 3, 4, 5));
6 |
7 | console.log(Math.max(...num));
8 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/006 - Adicionando elementos/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | unshift = add item no inicio do Array
3 | push = add item no final do Array
4 | */
5 |
6 | let arr = [1, 2, 3, 4, 5];
7 |
8 | // arr[5] = 6;
9 |
10 | arr.unshift(0);
11 | arr.unshift(-1);
12 | arr.unshift(-2);
13 | arr.push(6);
14 | arr.push(7);
15 | arr.push(8);
16 |
17 | console.log(arr);
18 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/007 - Removendo elementos/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | shifit = remove o primeiro elemento de um array e retorna esse elemento
3 | pop = remove o último elemento de um array e retorna este elemento
4 | */
5 |
6 | let arr = [1, 2, 3, 4, 5];
7 |
8 | console.table(arr);
9 |
10 | console.log("shift =>", arr.shift());
11 | console.log("pop =>", arr.pop());
12 |
13 | console.table(arr);
14 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/008 - Removendo elementos 2/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | slice = pega os dados dentro de um range sem quebrar o Array
3 | splice = remove os dados do Array dentro de um range
4 | */
5 | let arr = [
6 | { nome: "Dener", tel: "(99) 99999 9999" },
7 | { nome: "Mozao", tel: "(99) 99999 9999" },
8 | { nome: "Amigo 1", tel: "(99) 99999 9999" },
9 | { nome: "Amigo 2", tel: "(99) 99999 9999" },
10 | { nome: "Amigo 3", tel: "(99) 99999 9999" },
11 | ];
12 |
13 | console.table(arr);
14 |
15 | console.log(arr.splice(4, 1));
16 |
17 | // const newArray = arr.slice(2, 4);
18 | // console.table(newArray);
19 |
20 | console.table(arr);
21 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/009 - Ordenando e Revertendo Valores/index.js:
--------------------------------------------------------------------------------
1 | const stringArray = ["A", "C", "D", "W", "L", "B"];
2 |
3 | console.log(stringArray.sort());
4 | console.log(stringArray.reverse());
5 |
6 | /**
7 | * sort((a, b) => a - b)
8 | * se retornar um valor negativo, o valor de "a" será ordenado antes de "b".
9 | * se retornar 0, a ordenação de "a" e "b" não mudará.
10 | * se retornar um valor positivo, o valor em "b" será ordenado antes de "a".
11 | **/
12 |
13 | const numberArray = [10, 20, 30, 40, 50, 1000, 1, 55, 15];
14 |
15 | console.log(numberArray.sort((a, b) => a - b));
16 | console.log(numberArray.sort((a, b) => b - a));
17 | console.log(numberArray.sort((a, b) => a - b).reverse());
18 |
19 | const objArray = [
20 | {
21 | nome: "Dener Troquatte",
22 | },
23 | {
24 | nome: "Nay Troquatte",
25 | },
26 | {
27 | nome: "José Troquatte",
28 | },
29 | {
30 | nome: "Isabel Troquatte",
31 | },
32 | {
33 | nome: "Marcio Troquatte",
34 | },
35 | {
36 | nome: "Valentina Troquatte",
37 | },
38 | ];
39 |
40 | console.log(objArray.sort((a, b) => a.nome.localeCompare(b.nome)));
41 | console.log(objArray.sort((a, b) => b.nome.localeCompare(a.nome)));
42 | console.log(objArray.sort((a, b) => a.nome.localeCompare(b.nome)).reverse());
43 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/010 - Loop for… for…in e for…of/index.js:
--------------------------------------------------------------------------------
1 | const myArray = [1, 2, 3, 4, 5, 6];
2 | const myArrayObj = [
3 | {
4 | nome: "Dener",
5 | sobreNome: "Troquatte",
6 | },
7 | {
8 | nome: "Nay",
9 | sobreNome: "Troquatte",
10 | },
11 | {
12 | nome: "José",
13 | sobreNome: "Troquatte",
14 | },
15 | ];
16 |
17 | // for ([inicialização]; [condição]; [expressão final])
18 | // for (let i = 0; i < myArrayObj.length; i++) {
19 | // console.log(myArrayObj[i].nome, myArrayObj[i].sobreNome);
20 | // }
21 |
22 | // for Of
23 | // for (let item of myArray) {
24 | // console.log(item);
25 | // }
26 |
27 | // for in
28 | // const obj = { nome: "Dener", sobreNome: "Troquatte" };
29 |
30 | // for (let item in obj) {
31 | // console.log(item);
32 | // }
33 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/011 - Continue e Break/index.js:
--------------------------------------------------------------------------------
1 | const myArrayObj = [
2 | {
3 | nome: "Dener",
4 | sobreNome: "Troquatte",
5 | },
6 | {
7 | nome: "Nay",
8 | sobreNome: "Troquatte",
9 | },
10 | {
11 | nome: "José 0",
12 | sobreNome: "Troquatte",
13 | },
14 | {
15 | nome: "José 1",
16 | sobreNome: "Troquatte",
17 | },
18 | {
19 | nome: "José 2",
20 | sobreNome: "Troquatte",
21 | },
22 | {
23 | nome: "José 3",
24 | sobreNome: "Troquatte",
25 | },
26 | ];
27 |
28 | for (let item of myArrayObj) {
29 | if (item.nome === "Nay") {
30 | console.log("O mozão ta te esperando");
31 | continue;
32 | }
33 |
34 | if (item.nome === "José 1") {
35 | console.log("Lembrar de enviar um SMS");
36 | break;
37 | }
38 | console.log(item);
39 | }
40 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/012 - Foreach/index.js:
--------------------------------------------------------------------------------
1 | const myArrayObj = [
2 | {
3 | nome: "Dener",
4 | sobreNome: "Troquatte",
5 | },
6 | {
7 | nome: "Nay",
8 | sobreNome: "Troquatte",
9 | },
10 | {
11 | nome: "José",
12 | sobreNome: "Troquatte",
13 | },
14 | ];
15 |
16 | myArrayObj.forEach((item, index) => {
17 | if (item.nome === "Nay") {
18 | return console.log("O Mozão ta te esperando");
19 | }
20 |
21 | console.log(index, item.nome);
22 | });
23 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/013 - Map/index.js:
--------------------------------------------------------------------------------
1 | const pedidos = [
2 | {
3 | id: 420,
4 | nome: "Dener",
5 | alimento: "Sandubão de Bacon",
6 | bebida: "Suco Limão",
7 | },
8 | {
9 | id: 152,
10 | nome: "Naiady",
11 | alimento: "Sandubão Vegano",
12 | bebida: "Suco de Laranja",
13 | },
14 | { id: 29, nome: "Marcio", alimento: "Coxinha", bebida: "Suco de Uva" },
15 | {
16 | id: 33,
17 | nome: "Isabel",
18 | alimento: "Sandubão de Picanha",
19 | bebida: "Refrigerante",
20 | },
21 | { id: 55, nome: "José", alimento: "Pizza", bebida: "Refrigerante" },
22 | ];
23 |
24 | /**
25 | * O método Map além de iterar todo o Array ele é muito bom para editar o iterado ( resumindo o Array ).
26 | **/
27 |
28 | pedidos.map((element, index) => {
29 | if (element.id === 29 && element.alimento === "Coxinha") {
30 | return (element.alimento = "kibe");
31 | }
32 | });
33 |
34 | console.log(pedidos);
35 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/014 - Filter/index.js:
--------------------------------------------------------------------------------
1 | const pedidos = [
2 | {
3 | id: 420,
4 | nome: "Dener",
5 | alimento: "Sandubão de Bacon",
6 | bebida: "Suco Limão",
7 | },
8 | {
9 | id: 152,
10 | nome: "Naiady",
11 | alimento: "Sandubão Vegano",
12 | bebida: "Suco de Laranja",
13 | },
14 | { id: 29, nome: "Marcio", alimento: "Coxinha", bebida: "Suco de Uva" },
15 | {
16 | id: 33,
17 | nome: "Isabel",
18 | alimento: "Sandubão de Picanha",
19 | bebida: "Refrigerante",
20 | },
21 | { id: 55, nome: "José", alimento: "Pizza", bebida: "Refrigerante" },
22 | ];
23 |
24 | /**
25 | * Como o nome já diz, esse método deve ser utilizado quando temos a necessidade de filtrar nossa lista.
26 | **/
27 |
28 | const filterRefri = pedidos.filter((element, index) => {
29 | return element.bebida === "Refrigerante";
30 | });
31 |
32 | console.log(1, pedidos);
33 | console.log(2, filterRefri);
34 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/015 - Find/index.js:
--------------------------------------------------------------------------------
1 | const pedidos = [
2 | {
3 | id: 420,
4 | nome: "Dener",
5 | alimento: "Sandubão de Bacon",
6 | bebida: "Suco Limão",
7 | },
8 | {
9 | id: 152,
10 | nome: "Naiady",
11 | alimento: "Sandubão Vegano",
12 | bebida: "Suco de Laranja",
13 | },
14 | { id: 29, nome: "Marcio", alimento: "Coxinha", bebida: "Suco de Uva" },
15 | {
16 | id: 33,
17 | nome: "Isabel",
18 | alimento: "Sandubão de Picanha",
19 | bebida: "Refrigerante",
20 | },
21 | { id: 55, nome: "José", alimento: "Pizza", bebida: "Refrigerante" },
22 | ];
23 |
24 | /**
25 | * Nome bem subjetivo também, mas ele procura e te retorna 1 o primeiro valor encontrado da array.
26 | **/
27 |
28 | const findId = pedidos.find((element) => {
29 | return element.bebida === 29;
30 | });
31 |
32 | console.log(findId);
33 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/016 - Every/index.js:
--------------------------------------------------------------------------------
1 | const pedidos = [
2 | {
3 | id: 420,
4 | nome: "Dener",
5 | alimento: "Sandubão de Bacon",
6 | bebida: "Suco Limão",
7 | },
8 | {
9 | id: 152,
10 | nome: "Naiady",
11 | alimento: "Sandubão Vegano",
12 | bebida: "Suco de Laranja",
13 | },
14 | { id: 29, nome: "Marcio", alimento: "Coxinha", bebida: "Suco de Uva" },
15 | {
16 | id: 33,
17 | nome: "Isabel",
18 | alimento: "Sandubão de Picanha",
19 | bebida: "Refrigerante",
20 | },
21 | { id: 55, nome: "José", alimento: "Pizza", bebida: "Refrigerante" },
22 | ];
23 |
24 | /**
25 | * É bacana entender que, se você tem uma condição, ela vai tratar toda sua Array,
26 | * assim podemos verificar se eles estão ok.
27 | **/
28 |
29 | const temRefri = pedidos.every((element, index) => {
30 | return element.bebida === "Refrigerante";
31 | });
32 |
33 | console.log(temRefri);
34 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/017 - Some/index.js:
--------------------------------------------------------------------------------
1 | const pedidos = [
2 | {
3 | id: 420,
4 | nome: "Dener",
5 | alimento: "Sandubão de Bacon",
6 | bebida: "Suco Limão",
7 | },
8 | {
9 | id: 152,
10 | nome: "Naiady",
11 | alimento: "Sandubão Vegano",
12 | bebida: "Suco de Laranja",
13 | },
14 | { id: 29, nome: "Marcio", alimento: "Coxinha", bebida: "Suco de Uva" },
15 | {
16 | id: 33,
17 | nome: "Isabel",
18 | alimento: "Sandubão de Picanha",
19 | bebida: "Refrigerante",
20 | },
21 | { id: 55, nome: "José", alimento: "Pizza", bebida: "Refrigerante" },
22 | ];
23 |
24 | /**
25 | * O Some pergunta se apenas 1 dos valores da Array equivale a sua condição.
26 | **/
27 |
28 | const existeAlimento = pedidos.some((element, index) => {
29 | return element.alimento === "Pizza";
30 | });
31 |
32 | console.log(existeAlimento);
33 |
--------------------------------------------------------------------------------
/009 - Array a Fundo/018 - Reduce/index.js:
--------------------------------------------------------------------------------
1 | const pedidos = [
2 | {
3 | id: 420,
4 | nome: "Dener",
5 | alimento: "Sandubão de Bacon",
6 | bebida: "Suco Limão",
7 | preco: 100,
8 | },
9 | {
10 | id: 152,
11 | nome: "Naiady",
12 | alimento: "Sandubão Vegano",
13 | bebida: "Suco de Laranja",
14 | preco: 59,
15 | },
16 | {
17 | id: 29,
18 | nome: "Marcio",
19 | alimento: "Coxinha",
20 | bebida: "Suco de Uva",
21 | preco: 33,
22 | },
23 | {
24 | id: 33,
25 | nome: "Isabel",
26 | alimento: "Sandubão de Picanha",
27 | bebida: "Refrigerante",
28 | preco: 79,
29 | },
30 | {
31 | id: 55,
32 | nome: "José",
33 | alimento: "Pizza",
34 | bebida: "Refrigerante",
35 | preco: 47,
36 | },
37 | ];
38 |
39 | /**
40 | * A ideia dele é pegar todos os valores um Array e condensá-los em um só.
41 | **/
42 |
43 | const balancete = pedidos.reduce((total, element) => {
44 | return total + element.preco;
45 | }, 0);
46 |
47 | console.log(balancete);
48 |
--------------------------------------------------------------------------------
/010 - DOM/001 - O que é e para que serve o DOM/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | O que é e para que serve o DOM
8 |
9 |
10 |
11 |
12 | O que é e para que serve o DOM
13 |
14 |
15 |
--------------------------------------------------------------------------------
/010 - DOM/001 - O que é e para que serve o DOM/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const h1 = document.querySelector("h1");
4 | h1.style.background = "red";
5 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/001 - querySelector/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Selecionando Elementos
8 |
9 |
10 |
11 |
12 | Selecionando Elementos
13 | Lorem Ipsum TESTE
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
17 | industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/001 - querySelector/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | // Retorna a primeira Tag no querySelector("SUA TAG AQUI")
4 | const h1 = document.querySelector("h1"); // TAG HTML5
5 | const classP = document.querySelector(".paragrafo"); // .CLASS
6 | const idP = document.querySelector("#paragrafo"); // #ID
7 |
8 | console.log(h1);
9 | console.log(classP);
10 | console.log(idP);
11 |
12 | let timer = 0;
13 | const title = document.querySelector("title");
14 |
15 | setInterval(() => {
16 | title.innerText = timer;
17 | timer++;
18 | }, 1000);
19 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/002 - querySelectorAll/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Selecionando Elementos
8 |
9 |
10 |
11 |
12 | Selecionando Elementos
13 | Lorem Ipsum TESTE
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
17 | industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/002 - querySelectorAll/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | // Retorna todos os elementos em um NodeList no formato Array
4 | // [ todos os p, dentro de um Array ]
5 | // NodeList [p.paragrafo, p#paragrafo]
6 | const p = document.querySelectorAll("p");
7 |
8 | p.forEach((element, index) => {
9 | element.style.color = "#FFF";
10 | element.style.padding = "20px";
11 |
12 | if (index === 0) {
13 | element.style.background = "blue";
14 | }
15 |
16 | if (index === 1) {
17 | element.style.background = "red";
18 | }
19 | });
20 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/003 - getElementById/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Selecionando Elementos
8 |
9 |
10 |
11 |
12 | Selecionando Elementos
13 | Lorem Ipsum TESTE
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
17 | industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/003 - getElementById/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | // Retorna o Elemento com o ID selecionado
4 | const p = document.getElementById("paragrafo");
5 |
6 | console.log(p);
7 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/004 - getElementsByTagName/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Selecionando Elementos
8 |
9 |
10 |
11 |
12 | Selecionando Elementos
13 | Lorem Ipsum TESTE
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
17 | industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry. Lorem Ipsum
23 |
24 |
25 |
26 | 3 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
27 | industry.
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/004 - getElementsByTagName/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | // Retorna todas as classes com o mesmo nome
4 | const p = document.getElementsByClassName("paragrafo");
5 | console.log(p);
6 |
7 | // Só conseguimos iterar o Array dos elementos ( HTMLCollection ) com o FOR
8 | for (let element of p) {
9 | console.log(element);
10 | }
11 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/005 - getElementsByClassName/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Selecionando Elementos
8 |
9 |
10 |
11 |
12 | Selecionando Elementos
13 | Lorem Ipsum TESTE
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
17 | industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry. Lorem Ipsum
23 |
24 |
25 |
26 | 3 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
27 | industry.
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/005 - getElementsByClassName/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | // Retorna todas as TAGS com o mesmo nome
4 | const p = document.getElementsByTagName("p");
5 | console.log(p);
6 |
7 | // Só conseguimos iterar o Array dos elementos ( HTMLCollection ) com o FOR
8 | for (let element of p) {
9 | console.log(element);
10 | }
11 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/006 - Qual devo usar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Selecionando Elementos
8 |
9 |
10 |
11 |
12 | Selecionando Elementos
13 | Lorem Ipsum TESTE
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
17 | industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry. Lorem Ipsum
23 |
24 |
25 |
26 | 3 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
27 | industry.
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/010 - DOM/002 - Selecionando Elementos/006 - Qual devo usar/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | /**
4 | * Mas qual devo Usar?
5 | *******************************
6 | * Gosto muito desses dois
7 | * querySelector
8 | * querySelectorAll => NodeList
9 | *******************************
10 | * Pode usar porém não gosto ou uso bem POUCO
11 | * getElementById
12 | * getElementsByClassName
13 | * getElementsByTagName
14 | *******************************
15 | **/
16 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/001 - textContent e innerText/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando valores
8 |
9 |
10 |
11 |
12 | Manipulando valores
13 |
14 |
15 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
16 | industry. Lorem Ipsum
17 |
18 |
19 |
20 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
21 | industry.
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/001 - textContent e innerText/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | /**
4 | * textContent => Retorna o text COM formatações, mas sem os elementos html.
5 | * innerText => Retorna somente o texto, sem formatações ou elementos html.
6 | **/
7 |
8 | const classP = document.querySelector(".paragrafo");
9 | const idP = document.querySelector("#paragrafo");
10 |
11 | console.log(classP.textContent);
12 | console.log(idP.innerText);
13 |
14 | classP.textContent = "Dener Troquatte";
15 | idP.innerText = "Dener Troquatte";
16 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/002 - innerHTML versus createElement/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando valores
8 |
9 |
10 |
11 |
12 | Manipulando valores
13 |
14 | Vamos alterar esse camarada aqui...
15 |
16 |
17 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/002 - innerHTML versus createElement/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | /**
4 | * innerHtml => Retorna o texto, COM formatações e COM elementos html.
5 | * createElement => Cria um elemento HTML
6 | */
7 |
8 | const div = document.querySelector("div");
9 | console.log(1, div);
10 |
11 | div.innerHTML = `${div.innerHTML} Esse é meu texto alterado`;
12 | console.log(2, div);
13 |
14 | const elementUl = document.createElement("ul");
15 | [1, 2, 3].forEach((element) => {
16 | const elementLi = document.createElement("li");
17 | elementLi.innerText = element;
18 | elementUl.appendChild(elementLi);
19 | });
20 |
21 | div.appendChild(elementUl);
22 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/003 - Input value/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando valores
8 |
9 |
10 |
11 |
12 | Manipulando valores
13 |
14 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/003 - Input value/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const input = document.querySelector("#name");
4 |
5 | console.log(input.value);
6 |
7 | setTimeout(() => {
8 | input.value = "Abacate";
9 | console.log(input.value);
10 | }, 1000);
11 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/004 - Atributos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando valores
8 |
9 |
10 |
11 |
12 | Manipulando valores
13 |
14 | Vamos alterar esse camarada aqui...
15 |
16 |
17 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/004 - Atributos/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const div = document.querySelector("div");
4 | div.setAttribute("id", "teste");
5 |
6 | div.setAttribute("class", `${div.getAttribute("class")} active`);
7 | div.setAttribute("class", `${div.getAttribute("class")} background-red`);
8 |
9 | div.removeAttribute("id");
10 | console.log(div);
11 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/005 - createDocumentFragment/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando valores
8 |
9 |
10 |
11 |
12 | Manipulando valores
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/005 - createDocumentFragment/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const ul = document.querySelector("ul");
4 | const fragment = document.createDocumentFragment();
5 |
6 | const lanches = ["Lanche 1", "Lanche 2", "Lanche 3", "Lanche 4"];
7 |
8 | lanches.forEach((element) => {
9 | const li = document.createElement("li");
10 | li.textContent = element;
11 | fragment.append(li);
12 | });
13 |
14 | ul.append(fragment);
15 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/006 - Removendo elementos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando valores
8 |
9 |
10 |
11 |
12 | Manipulando valores
13 |
14 |
15 | - Item 1
16 | - Item 2
17 | - Item 3
18 | - Item 4
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/010 - DOM/003 - Manipulando valores/006 - Removendo elementos/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const h1 = document.querySelector("h1");
4 | h1.remove();
5 |
6 | const li = document.querySelectorAll("li");
7 | li[2].remove();
8 |
--------------------------------------------------------------------------------
/010 - DOM/004 - Manipulando Style/001 - Style/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando Style
8 |
9 |
10 |
11 |
12 | Manipulando Style
13 |
14 |
15 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
16 | industry. Lorem Ipsum
17 |
18 |
19 |
20 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
21 | industry.
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/010 - DOM/004 - Manipulando Style/001 - Style/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const h1 = document.querySelector("h1");
4 |
5 | // style="font-family: 'arial'"
6 | h1.style.fontFamily = "Arial";
7 | h1.style.color = "red";
8 |
9 | const p = document.querySelectorAll("p");
10 |
11 | p.forEach((element) => {
12 | element.style.fontFamily = "Arial";
13 | element.style.fontSize = "12px";
14 | });
15 |
--------------------------------------------------------------------------------
/010 - DOM/004 - Manipulando Style/002 - ClassList/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando Style
8 |
14 |
15 |
16 |
17 | Manipulando Style
18 |
19 |
20 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
21 | industry. Lorem Ipsum
22 |
23 |
24 |
25 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
26 | industry.
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/010 - DOM/004 - Manipulando Style/002 - ClassList/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const h1 = document.querySelector("h1");
4 | h1.classList.add("active", "Teste1", "Teste2");
5 | h1.classList.remove("Teste2", "Teste1");
6 | h1.classList.toggle("Teste2");
7 |
8 | if (h1.classList.contains("active")) {
9 | alert("Existe a classe active");
10 | }
11 |
12 | console.log(h1);
13 |
--------------------------------------------------------------------------------
/010 - DOM/004 - Manipulando Style/003 - ClassName/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Manipulando Style
8 |
14 |
15 |
16 |
17 | Manipulando Style
18 |
19 |
20 | 1 Class = Lorem Ipsum is simply dummy text of the printing and typesetting
21 | industry. Lorem Ipsum
22 |
23 |
24 |
25 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
26 | industry.
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/010 - DOM/004 - Manipulando Style/003 - ClassName/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const h1 = document.querySelector("h1");
4 |
5 | console.log(h1.className);
6 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/001 - Pai ( parentElement e parentNode )/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Encontrando elementos
8 |
9 |
10 |
11 |
12 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
Olá Dener
");
6 |
7 | const newDiv = document.createElement("div");
8 | newDiv.innerText = "Olá Dener";
9 |
10 | container.appendChild(newDiv);
11 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/008 - insertBefore/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Encontrando elementos
8 |
9 |
10 |
11 |
12 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
13 |
Encontrando elementos
14 |
15 |
16 | 1 Class = Lorem Ipsum is simply dummy text of the printing and
17 | typesetting industry. Lorem Ipsum
18 |
19 |
20 |
21 | 2 ID = Lorem Ipsum is simply dummy text of the printing and typesetting
22 | industry.
23 |
24 |
13 | - Home
14 | - Sobre
15 | - Contato
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/007 - Validando eventos/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const menu = document.querySelector("#menu");
4 |
5 | if (menu) {
6 | menu.addEventListener("click", (event) => {
7 | const { target } = event;
8 | const body = document.querySelector("body");
9 |
10 | switch (target.getAttribute("class")) {
11 | case "home":
12 | body.style.background = "blue";
13 | break;
14 |
15 | case "sobre":
16 | body.style.background = "red";
17 | break;
18 |
19 | case "contato":
20 | body.style.background = "#fff";
21 | break;
22 | }
23 | });
24 | }
25 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/001 - Acessando os formulários/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Formulários
8 |
9 |
10 |
11 |
12 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/001 - Acessando os formulários/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const form = document.forms.namedItem("registration");
4 |
5 | form.addEventListener("submit", (event) => {
6 | event.preventDefault();
7 | const name = form.name.value;
8 | const password = form.password.value;
9 |
10 | console.log(name, password);
11 | });
12 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/002 - Submetendo formulário + FormData/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Formulários
8 |
9 |
10 |
11 |
12 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/002 - Submetendo formulário + FormData/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const form = document.forms.namedItem("registration");
4 |
5 | form.addEventListener("submit", (event) => {
6 | event.preventDefault();
7 |
8 | const name = form.name.value;
9 | const password = form.password.value;
10 |
11 | const formData = new FormData(form);
12 |
13 | formData.set("name", name);
14 | formData.set("password", password);
15 |
16 | console.log(formData.has("name"));
17 | console.log(formData.has("password"));
18 |
19 | console.log(formData.get("name"));
20 | console.log(formData.get("password"));
21 |
22 | // DELETE
23 | formData.delete("name");
24 | console.log(formData.has("name"));
25 |
26 | // if (name && password) {
27 | // console.log(name, password);
28 | // form.submit();
29 | // }
30 | });
31 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/003 - Manipulando Input/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Formulários
8 |
9 |
10 |
11 |
12 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/003 - Manipulando Input/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const form = document.forms.namedItem("registration");
4 |
5 | form.addEventListener("input", (event) => {
6 | event.preventDefault();
7 |
8 | const name = form.name.value;
9 |
10 | const newDivElement = document.createElement("div");
11 | newDivElement.innerText = name.toUpperCase();
12 |
13 | form.nextElementSibling.remove();
14 | form.after(newDivElement);
15 | });
16 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/004 - Manipulando Radio Button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Formulários
8 |
9 |
10 |
11 |
12 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/004 - Manipulando Radio Button/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const form = document.forms.namedItem("select-radio");
4 | const submit = document.querySelector("#submit");
5 | const change = document.querySelector("#change");
6 |
7 | form.addEventListener("submit", (event) => {
8 | event.preventDefault();
9 |
10 | const radio = form.radio;
11 | submit.innerHTML = radio.value;
12 |
13 | // console.log(radio.value);
14 | // radio.forEach((res) => {
15 | // if (res.checked) {
16 | // console.log(res);
17 | // }
18 | // });
19 | });
20 |
21 | form.radio.forEach((res) => {
22 | res.addEventListener("change", (event) => {
23 | const { target } = event;
24 |
25 | if (target.checked) {
26 | change.innerHTML = target.value;
27 | }
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/005 - Manipulando Checkbox/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Formulários
8 |
9 |
10 |
11 |
12 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/010 - DOM/007 - Formulários/005 - Manipulando Checkbox/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const form = document.forms.namedItem("select-checkbox");
4 | const submit = document.querySelector("#submit");
5 | const change = document.querySelector("#change");
6 |
7 | let checkedValues = [];
8 |
9 | form.addEventListener("submit", (event) => {
10 | event.preventDefault();
11 | submit.innerHTML = checkedValues;
12 | });
13 |
14 | form.checkbox.forEach((element) => {
15 | element.addEventListener("change", (event) => {
16 | hasChecked(event, element);
17 | change.innerHTML = checkedValues;
18 | });
19 | });
20 |
21 | const hasChecked = (event, element) => {
22 | const { target } = event;
23 |
24 | if (target.checked) {
25 | return checkedValues.push(element.value);
26 | }
27 |
28 | if (!target.checked) {
29 | return checkedValues.map((checkdValue, index) => {
30 | if (element.value === checkdValue) {
31 | return checkedValues.splice(index, 1);
32 | }
33 | });
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/011 - Bug e Debug/001 - Debugando/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/011 - Bug e Debug/001 - Debugando/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * *** BUG
3 | * Um bug é um termo utilizado na programação para descrever um erro,
4 | * defeito ou comportamento indesejado em um software.
5 | *
6 | * Ele ocorre quando o código do programa não se comporta como esperado
7 | * e produz resultados incorretos, inesperados ou inconsistentes.
8 | *
9 | * *** DEBUG
10 | * O debug (depuração) é o processo de identificar, analisar e corrigir bugs
11 | * em um programa de computador. Envolve a investigação e a resolução
12 | * de problemas para entender e corrigir o comportamento indesejado
13 | * do software.
14 | *
15 | * O objetivo do debug é encontrar a causa raiz do bug e corrigi-lo
16 | * para garantir que o programa funcione corretamente.
17 | **/
18 |
19 | const bugNum = () => {
20 | const number = "123";
21 |
22 | console.log(number === 123);
23 | if (number === 123) {
24 | return "Seu número é 123 - type Number";
25 | }
26 | console.log(number);
27 |
28 | return "Deu Ruim";
29 | };
30 |
31 | console.log(bugNum());
32 |
--------------------------------------------------------------------------------
/011 - Bug e Debug/002 - exception/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Uma exceção (ou exceção em inglês, "exception") é um evento ou condição
3 | * anormal que ocorre durante a execução de um programa de computador
4 | * e interrompe o fluxo normal de execução.
5 | *
6 | * Ela indica que algo inesperado aconteceu e que o programa não pode
7 | * continuar sua execução normal.
8 | **/
9 |
10 | const bugNum = () => {
11 | const number = "123";
12 |
13 | console.log(number === 123);
14 | if (number === 123) {
15 | return "Seu número é 123 - type Number";
16 | }
17 | console.log(number);
18 |
19 | throw new Error("Deu Ruim");
20 | };
21 |
22 | console.log(bugNum());
23 |
--------------------------------------------------------------------------------
/011 - Bug e Debug/003 - Try and Catch/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * try-catch é uma construção de controle de fluxo em várias linguagens
3 | * de programação, incluindo JavaScript, que permite lidar com exceções
4 | * de forma estruturada.
5 | *
6 | * A construção try-catch consiste em dois blocos de código:
7 | * o bloco try e o bloco catch.
8 | */
9 |
10 | const bugNum = () => {
11 | try {
12 | const number = "123";
13 |
14 | if (number === 123) {
15 | return "Seu número é 123 - type Number";
16 | }
17 |
18 | throw new Error("Deu Ruim");
19 | } catch (error) {
20 | throw error;
21 | }
22 | };
23 |
24 | console.log(bugNum());
25 | console.log("Continua executando!");
26 |
--------------------------------------------------------------------------------
/012 - Timers/001 - setTimeout/index.js:
--------------------------------------------------------------------------------
1 | setTimeout(() => {
2 | console.log("Meu timer foi iniciado!");
3 | }, 10000);
4 |
5 | console.log("Meu console!");
6 |
--------------------------------------------------------------------------------
/012 - Timers/002 - clearTimeout/index.js:
--------------------------------------------------------------------------------
1 | const timer = setTimeout(() => {
2 | console.log("Meu timer foi iniciado!");
3 | }, 10000);
4 |
5 | console.log("Meu console!");
6 | clearTimeout(timer);
7 |
--------------------------------------------------------------------------------
/012 - Timers/003 - setInterval/index.js:
--------------------------------------------------------------------------------
1 | setInterval(() => {
2 | console.log("Meu timer foi iniciado!");
3 | }, 1000);
4 |
5 | console.log("Meu console!");
6 |
--------------------------------------------------------------------------------
/012 - Timers/004 - clearInterval/index.js:
--------------------------------------------------------------------------------
1 | const timer = setInterval(() => {
2 | console.log("Meu timer foi iniciado!");
3 | }, 1000);
4 |
5 | console.log("Meu console!");
6 |
7 | setTimeout(() => {
8 | clearInterval(timer);
9 | }, 3000);
10 |
--------------------------------------------------------------------------------
/013 - Javascript assíncrono/001 - Conceito do Callback/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * O conceito de callbacks está relacionado à programação assíncrona,
3 | * onde certas operações podem levar tempo para serem concluídas,
4 | * como chamadas de API, manipulação de arquivos ou consultas a bancos de dados.
5 | *
6 | * Em vez de esperar que essas operações sejam concluídas antes de continuar
7 | * a execução do código, os callbacks permitem que o código continue a ser
8 | * executado, e quando a operação assíncrona é finalizada, o callback é chamado
9 | * para lidar com o resultado.
10 | */
11 |
12 | setInterval(() => {
13 | returnConsole();
14 | }, 3000);
15 |
16 | const returnConsole = () => {
17 | return console.log("meu console funcionou");
18 | };
19 |
20 | const meuCallback = (func) => {
21 | console.log(func());
22 | };
23 |
24 | meuCallback(() => {
25 | return 1 + 1;
26 | });
27 |
--------------------------------------------------------------------------------
/013 - Javascript assíncrono/002 - O que é uma Promise/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Promises: As Promises são objetos que representam a conclusão (ou falha)
3 | * de uma tarefa assíncrona. Elas fornecem uma sintaxe mais limpa e estruturada
4 | * para lidar com código assíncrono, permitindo encadear chamadas e tratar erros
5 | * de forma mais eficiente.
6 | */
7 |
8 | const pedido = (pedido) => {
9 | return new Promise((resolve, reject) => {
10 | if (pedido === "Pizza") {
11 | return reject(`Não temos o seu pedido: [${pedido}]`);
12 | }
13 |
14 | setTimeout(() => {
15 | resolve(`Chegou o seu pedido [${pedido}]`);
16 | }, 5000);
17 | });
18 | };
19 |
20 | pedido("Pizza")
21 | .then((resPedido) => {
22 | console.log(resPedido);
23 | })
24 | .catch((err) => {
25 | console.log(err);
26 | })
27 | .finally(() => {
28 | console.log("Deu bom todo o processo do pedido!");
29 | });
30 |
--------------------------------------------------------------------------------
/013 - Javascript assíncrono/003 - Async - Await/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Async/Await: O async/await é uma forma mais recente e mais legível
3 | * de lidar com tarefas assíncronas em JavaScript.
4 | *
5 | * Essa abordagem utiliza as palavras-chave async e await para indicar funções
6 | * assíncronas e pausar a execução até que uma Promise seja resolvida.
7 | */
8 |
9 | const pedido = (pedido) => {
10 | return new Promise((resolve, reject) => {
11 | if (pedido === "Pizza") {
12 | return reject(`Não temos o seu pedido: [${pedido}]`);
13 | }
14 |
15 | setTimeout(() => {
16 | resolve(`Chegou o seu pedido [${pedido}]`);
17 | }, 5000);
18 | });
19 | };
20 |
21 | const reservarPedido = async () => {
22 | try {
23 | console.log(await pedido("Arroz"));
24 | console.log(await pedido("Carninha"));
25 | console.log(await pedido("Pizza"));
26 | } catch (error) {
27 | console.log(error);
28 | }
29 | };
30 |
31 | reservarPedido();
32 |
--------------------------------------------------------------------------------
/013 - Javascript assíncrono/004 - Promise All/index.js:
--------------------------------------------------------------------------------
1 | const pedido = (pedido) => {
2 | return new Promise((resolve, reject) => {
3 | if (pedido === "Pizza") {
4 | return reject(`Não temos o seu pedido: [${pedido}]`);
5 | }
6 |
7 | setTimeout(() => {
8 | resolve(`Chegou o seu pedido [${pedido}]`);
9 | }, 5000);
10 | });
11 | };
12 |
13 | Promise.all([pedido("Arroz"), pedido("Feijão"), pedido("Pizza")])
14 | .then((resPedidos) => {
15 | console.log(resPedidos[0]);
16 | console.log(resPedidos[1]);
17 | })
18 | .catch((error) => {
19 | console.log(error);
20 | });
21 |
--------------------------------------------------------------------------------
/013 - Javascript assíncrono/005 - Promise Race/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A principal utilidade do Promise.race é quando você deseja executar
3 | * várias operações assíncronas simultaneamente e obter o resultado
4 | * da primeira operação que for concluída.
5 | *
6 | * Isso é especialmente útil quando você tem um conjunto de promessas
7 | * e está interessado apenas no resultado da primeira a ser resolvida
8 | * ou rejeitada, ignorando as demais.
9 | */
10 |
11 | const promise1 = new Promise((resolve, reject) => {
12 | setTimeout(() => {
13 | return resolve("Promise 1");
14 | }, 3000);
15 | });
16 |
17 | const promise2 = new Promise((resolve, reject) => {
18 | setTimeout(() => {
19 | return resolve("Promise 2");
20 | }, 4000);
21 | });
22 |
23 | const promise3 = new Promise((resolve, reject) => {
24 | setTimeout(() => {
25 | return reject("Promise 3");
26 | }, 1000);
27 | });
28 |
29 | Promise.race([promise1, promise2, promise3])
30 | .then((res) => {
31 | console.log(1, res);
32 | })
33 | .catch((err) => {
34 | console.log(2, err);
35 | });
36 |
--------------------------------------------------------------------------------
/013 - Javascript assíncrono/006 - Promise AllSettled/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A função Promise.allSettled é usada em JavaScript para lidar com várias
3 | * promessas de forma assíncrona e obter os resultados de todas as promessas,
4 | * independentemente de terem sido resolvidas ou rejeitadas.
5 | *
6 | * Ela retorna uma nova promessa que é resolvida com um array de objetos que
7 | * descrevem o resultado de cada promessa.
8 | *
9 | * A principal utilidade do Promise.allSettled é quando você deseja aguardar
10 | * a conclusão de um conjunto de promessas e obter informações sobre todas elas,
11 | * mesmo que algumas tenham sido rejeitadas.
12 | *
13 | * Diferentemente do Promise.all, que é interrompido se alguma das promessas
14 | * for rejeitada, o Promise.allSettled aguardará a conclusão de todas as promessas,
15 | * independentemente do resultado.
16 | */
17 |
18 | const promise1 = new Promise((resolve, reject) => {
19 | setTimeout(() => {
20 | return resolve("Promise 1");
21 | }, 3000);
22 | });
23 |
24 | const promise2 = new Promise((resolve, reject) => {
25 | setTimeout(() => {
26 | return resolve("Promise 2");
27 | }, 4000);
28 | });
29 |
30 | const promise3 = new Promise((resolve, reject) => {
31 | setTimeout(() => {
32 | return reject("Promise 3");
33 | }, 1000);
34 | });
35 |
36 | Promise.allSettled([promise1, promise2, promise3]).then((resAllSettled) => {
37 | resAllSettled.forEach((item) => {
38 | if (item.status === "fulfilled") {
39 | console.log(item.value);
40 | } else if (item.status === "rejected") {
41 | console.log(item.reason);
42 | }
43 | });
44 | });
45 |
--------------------------------------------------------------------------------