├── 001 - Introdução
├── 001 - Primeiro Código
│ ├── index.js
│ └── index.html
└── 002 - Sitaxe e Comentário
│ └── index.js
├── 007 - Funções
├── 003 - Hoisting
│ └── index.js
├── 005 - IIFE Expressão de função invocada imediatamente
│ └── index.js
├── 002 - Arguments
│ └── index.js
├── 006 - use strict
│ └── index.js
├── 001 - O que é uma função
│ └── index.js
├── 007 - Funções construtoras
│ └── index.js
├── 008 - Closures
│ └── index.js
└── 004 - Function x Arrow Function
│ └── index.js
├── 010 - DOM
├── 001 - O que é e para que serve o DOM
│ ├── script.js
│ └── index.html
├── 004 - Manipulando Style
│ ├── 003 - ClassName
│ │ ├── script.js
│ │ └── index.html
│ ├── 002 - ClassList
│ │ ├── script.js
│ │ └── index.html
│ └── 001 - Style
│ │ ├── script.js
│ │ └── index.html
├── 006 - Eventos
│ ├── 001 - Atributos do manipulador de eventos HTML
│ │ ├── script.js
│ │ └── index.html
│ ├── 005 - Preventing Default
│ │ ├── script.js
│ │ └── index.html
│ ├── 002 - Manipuladores de eventos DOM Nível 0
│ │ ├── script.js
│ │ └── index.html
│ ├── 003 - Manipuladores de eventos DOM Nível 2
│ │ ├── script.js
│ │ └── index.html
│ ├── 004 - Removendo manipuladores de eventos
│ │ ├── script.js
│ │ └── index.html
│ ├── 007 - Validando eventos
│ │ ├── index.html
│ │ └── script.js
│ └── 006 - Event Delegation
│ │ ├── index.html
│ │ └── script.js
├── 002 - Selecionando Elementos
│ ├── 003 - getElementById
│ │ ├── script.js
│ │ └── index.html
│ ├── 005 - getElementsByClassName
│ │ ├── script.js
│ │ └── index.html
│ ├── 004 - getElementsByTagName
│ │ ├── script.js
│ │ └── index.html
│ ├── 006 - Qual devo usar
│ │ ├── script.js
│ │ └── index.html
│ ├── 001 - querySelector
│ │ ├── script.js
│ │ └── index.html
│ └── 002 - querySelectorAll
│ │ ├── script.js
│ │ └── index.html
├── 003 - Manipulando valores
│ ├── 006 - Removendo elementos
│ │ ├── script.js
│ │ └── index.html
│ ├── 003 - Input value
│ │ ├── script.js
│ │ └── index.html
│ ├── 004 - Atributos
│ │ ├── script.js
│ │ └── index.html
│ ├── 005 - createDocumentFragment
│ │ ├── script.js
│ │ └── index.html
│ ├── 002 - innerHTML versus createElement
│ │ ├── index.html
│ │ └── script.js
│ └── 001 - textContent e innerText
│ │ ├── script.js
│ │ └── index.html
├── 005 - Encontrando elementos
│ ├── 005 - Irmãos ( nextSibling, nextElementSibling )
│ │ ├── script.js
│ │ └── index.html
│ ├── 004 - Filhos ( lastChild, lastElementChild )
│ │ ├── script.js
│ │ └── index.html
│ ├── 003 - Filhos ( firstChild, firstElementChild )
│ │ ├── script.js
│ │ └── index.html
│ ├── 009 - after e before
│ │ ├── script.js
│ │ └── index.html
│ ├── 007 - append e appendChild
│ │ ├── script.js
│ │ └── index.html
│ ├── 006 - Irmãos ( previousSibling, previousElementSibling )
│ │ ├── script.js
│ │ └── index.html
│ ├── 008 - insertBefore
│ │ ├── script.js
│ │ └── index.html
│ ├── 001 - Pai ( parentElement e parentNode )
│ │ ├── script.js
│ │ └── index.html
│ └── 002 - Filhos ( children, childNodes )
│ │ ├── script.js
│ │ └── index.html
└── 007 - Formulários
│ ├── 001 - Acessando os formulários
│ ├── script.js
│ └── index.html
│ ├── 003 - Manipulando Input
│ ├── script.js
│ └── index.html
│ ├── 004 - Manipulando Radio Button
│ ├── script.js
│ └── index.html
│ ├── 002 - Submetendo formulário + FormData
│ ├── index.html
│ └── script.js
│ └── 005 - Manipulando Checkbox
│ ├── script.js
│ └── index.html
├── 012 - Timers
├── 001 - setTimeout
│ └── index.js
├── 003 - setInterval
│ └── index.js
├── 002 - clearTimeout
│ └── index.js
└── 004 - clearInterval
│ └── index.js
├── 003 - Operadores aritméticos
├── 008 - Precedência
│ └── index.js
├── 004 - Remainder
│ └── index.js
├── 002 - Subtração
│ └── index.js
├── 007 - Lógicos
│ └── index.js
├── 003 - Multiplicação e Divisão
│ └── index.js
├── 005 - Atribuição
│ └── index.js
├── 001 - Adição
│ └── index.js
└── 006 - Comparação
│ └── index.js
├── 009 - Array a Fundo
├── 002 - Indices e Elementos
│ └── index.js
├── 001 - O que é um Array
│ └── index.js
├── 005 - Spread Operator
│ └── index.js
├── 004 - Destructuring
│ └── index.js
├── 003 - Matrizes multidimensionais
│ └── index.js
├── 006 - Adicionando elementos
│ └── index.js
├── 007 - Removendo elementos
│ └── index.js
├── 012 - Foreach
│ └── index.js
├── 008 - Removendo elementos 2
│ └── index.js
├── 010 - Loop for… for…in e for…of
│ └── index.js
├── 011 - Continue e Break
│ └── index.js
├── 015 - Find
│ └── index.js
├── 017 - Some
│ └── index.js
├── 016 - Every
│ └── index.js
├── 014 - Filter
│ └── index.js
├── 013 - Map
│ └── index.js
├── 018 - Reduce
│ └── index.js
└── 009 - Ordenando e Revertendo Valores
│ └── index.js
├── 008 - Object a Fundo
├── 007 - Removendo Propriedades do Objeto
│ └── index.js
├── 006 - Adicionando e Atualizando dados do Objeto
│ └── index.js
├── 003 - Acessando Valores do Objeto
│ └── index.js
├── 008 - Mesclando e Clonando objetos
│ └── index.js
├── 002 - Propriedades, Métodos e Valores curtos
│ └── index.js
├── 005 - Verificação de Existência de Propriedade e Valor
│ └── index.js
├── 004 - Destructuring
│ └── index.js
├── 009 - Clonagem de objetos rasos e profundos
│ └── index.js
└── 001 - O que é um objeto
│ └── 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
├── 002 - Tipos Primitivos
├── 004 - undefined e null
│ └── index.js
├── 003 - Boolean
│ └── index.js
├── 001 - String
│ └── index.js
├── 005 - Array
│ └── index.js
├── 002 - Number
│ └── index.js
└── 006 - Object
│ └── index.js
├── 011 - Bug e Debug
├── 001 - Debugando
│ ├── index.html
│ └── index.js
├── 002 - exception
│ └── index.js
└── 003 - Try and Catch
│ └── index.js
├── 006 - Exercicios
├── 003 - Letras Repetidas
│ └── index.js
├── 006 - Palíndromo
│ └── index.js
├── 008 - Gerador de senha
│ └── index.js
├── 004 - Contador de vogais
│ └── index.js
├── 010 - Quantos dias faltam para o final do mês
│ └── index.js
├── 005 - Valores multiplos
│ └── index.js
├── 002 - Tabuada
│ └── index.js
├── 009 - Calculadora de idade
│ └── index.js
├── 001 - Calculadora IMC
│ └── index.js
└── 007 - Contador de palavras em texto
│ └── index.js
├── 004 - Variáveis
├── 002 - Nomeando variáveis
│ └── index.js
├── 001 - Entendendo as variáveis
│ └── index.js
└── 003 - Escopo
│ └── index.js
└── 013 - Javascript assíncrono
├── 004 - Promise All
└── index.js
├── 001 - Conceito do Callback
└── index.js
├── 002 - O que é uma Promise
└── index.js
├── 003 - Async - Await
└── index.js
├── 005 - Promise Race
└── index.js
└── 006 - Promise AllSettled
└── index.js
/001 - Introdução/001 - Primeiro Código/index.js:
--------------------------------------------------------------------------------
1 | console.log("Olá Mundo!");
2 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/004 - Manipulando Style/003 - ClassName/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const h1 = document.querySelector("h1");
4 |
5 | console.log(h1.className);
6 |
--------------------------------------------------------------------------------
/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/003 - setInterval/index.js:
--------------------------------------------------------------------------------
1 | setInterval(() => {
2 | console.log("Meu timer foi iniciado!");
3 | }, 1000);
4 |
5 | console.log("Meu console!");
6 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/001 - Atributos do manipulador de eventos HTML/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const acionarAlert = (value) => {
4 | alert(value);
5 | };
6 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/005 - Preventing Default/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const link = document.querySelector("a");
4 |
5 | link.addEventListener("click", (event) => {
6 | event.preventDefault();
7 | console.log("Evento prevenido");
8 | });
9 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/001 - Introdução/001 - Primeiro Código/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Curso
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/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/005 - Encontrando elementos/005 - Irmãos ( nextSibling, nextElementSibling )/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const h1 = document.querySelector("h1");
4 | const p = document.querySelector(".paragrafo");
5 |
6 | console.log(p.nextSibling);
7 | console.log(p.nextElementSibling);
8 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/004 - Filhos ( lastChild, lastElementChild )/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const container = document.querySelector(".container");
4 | const p = document.querySelector(".paragrafo");
5 |
6 | console.log(p.lastChild);
7 | console.log(p.lastElementChild);
8 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/002 - Manipuladores de eventos DOM Nível 0/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const btn = document.querySelector("button");
4 |
5 | btn.onclick = function alertOne() {
6 | alert(123);
7 | };
8 |
9 | btn.onclick = function alertTwo() {
10 | alert(456);
11 | };
12 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/003 - Filhos ( firstChild, firstElementChild )/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const container = document.querySelector(".container");
4 | const p = document.querySelector(".paragrafo");
5 |
6 | console.log(p.firstChild);
7 | console.log(p.firstElementChild);
8 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/009 - after e before/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const container = document.querySelector(".container");
4 |
5 | const newP = document.createElement("p");
6 | newP.innerText = "Olá, Dener";
7 |
8 | container.before(newP);
9 | // container.after(newP);
10 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/007 - append e appendChild/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const container = document.querySelector(".container");
4 |
5 | container.append("Olá Dener
");
6 |
7 | const newDiv = document.createElement("div");
8 | newDiv.innerText = "Olá Dener";
9 |
10 | container.appendChild(newDiv);
11 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/006 - Irmãos ( previousSibling, previousElementSibling )/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const h1 = document.querySelector("h1");
4 | const p = document.querySelector(".paragrafo");
5 | const body = document.querySelector("body");
6 |
7 | console.log(body.previousSibling);
8 | console.log(body.previousElementSibling);
9 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/008 - insertBefore/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const container = document.querySelector(".container");
4 | const paragrafo = document.querySelector("#paragrafo");
5 | const h1 = document.querySelector("h1");
6 |
7 | const newH2 = document.createElement("h2");
8 | newH2.innerText = "Novo H2";
9 |
10 | container.insertBefore(newH2, paragrafo);
11 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/001 - Pai ( parentElement e parentNode )/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const strong = document.querySelector("strong");
4 | const p = document.querySelector(".paragrafo");
5 | const container = document.querySelector(".container");
6 | const body = document.querySelector("body");
7 |
8 | console.log(body.parentElement);
9 | console.log(body.parentNode);
10 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/003 - Manipuladores de eventos DOM Nível 2/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const btn = document.querySelector("button");
4 | const body = document.querySelector("body");
5 |
6 | btn.addEventListener("click", (event) => {
7 | body.style.background = "red";
8 | });
9 |
10 | btn.addEventListener("mouseleave", (event) => {
11 | body.style.background = "#FFF";
12 | });
13 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/011 - Bug e Debug/001 - Debugando/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/004 - Removendo manipuladores de eventos/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const btn = document.querySelector("button");
4 |
5 | const acionarAlert = () => {
6 | let validador = false;
7 |
8 | alert(123);
9 |
10 | validador = true;
11 |
12 | if (validador) {
13 | btn.removeEventListener("click", acionarAlert);
14 | }
15 | };
16 |
17 | btn.addEventListener("click", acionarAlert);
18 |
--------------------------------------------------------------------------------
/010 - DOM/005 - Encontrando elementos/002 - Filhos ( children, childNodes )/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const container = document.querySelector(".container");
4 |
5 | console.log(container.children); // HTMLCollection
6 | console.log(container.childNodes); // NodeList
7 |
8 | const children = Array.from(container.children);
9 |
10 | // console.log(children);
11 |
12 | children.forEach((res) => {
13 | console.log(res);
14 | });
15 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/004 - Removendo manipuladores de eventos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Eventos
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/002 - Manipuladores de eventos DOM Nível 0/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Eventos
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/003 - Manipuladores de eventos DOM Nível 2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Eventos
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/005 - Preventing Default/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Eventos
8 |
9 |
10 |
11 |
12 | Acessar o site Vidafullstack
13 |
14 |
15 |
--------------------------------------------------------------------------------
/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/006 - Eventos/001 - Atributos do manipulador de eventos HTML/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Eventos
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/006 - Eventos/007 - Validando eventos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Eventos
8 |
9 |
10 |
11 |
12 |
13 | - Home
14 | - Sobre
15 | - Contato
16 |
17 |
18 |
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 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/006 - Event Delegation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Eventos
8 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/010 - DOM/006 - Eventos/006 - Event Delegation/script.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const menu = document.querySelector("#menu");
4 |
5 | menu.addEventListener("click", (event) => {
6 | const { target } = event;
7 | const body = document.querySelector("body");
8 |
9 | switch (target.getAttribute("class")) {
10 | case "home":
11 | body.style.background = "blue";
12 | break;
13 |
14 | case "sobre":
15 | body.style.background = "red";
16 | break;
17 |
18 | case "contato":
19 | body.style.background = "#fff";
20 | break;
21 | }
22 | });
23 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
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 |
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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------