├── calculadora_simples ├── index.html ├── scripts.js └── styles.css ├── quiz ├── index.html ├── scripts.js └── styles.css └── teoria ├── avancando.js ├── avancando_exercicios.js ├── dom.js ├── fundamentos.js ├── fundamentos_exercicios.js ├── index.html ├── javascript_moderno.js └── styles.css /calculadora_simples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calculadora simples 7 | 8 | 9 | 10 | 11 |

12 |

13 | 14 |

15 |

16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |

33 |

34 | 35 | 36 | -------------------------------------------------------------------------------- /calculadora_simples/scripts.js: -------------------------------------------------------------------------------- 1 | // 2 | // D: Curso de Projetos 3 | // 4 | 5 | // Seleção dos elementos 6 | const display = document.querySelector("#displayInput"); 7 | const botaoIgual = document.querySelector(".igual"); 8 | const botaoPonto = document.querySelector(".ponto"); 9 | const botoesNumeros = document.querySelectorAll(".num"); 10 | const botoesOperadores = document.querySelectorAll(".operador"); 11 | 12 | // Variáveis globais 13 | let operacaoAtual = ""; 14 | let operador = null; 15 | let valorAnterior = ""; 16 | let calculando = false; 17 | 18 | // Funções 19 | const atualizaDisplay = () => { 20 | display.value = operacaoAtual; 21 | }; 22 | 23 | const insereNumero = (evento) => { 24 | if (calculando) { 25 | operacaoAtual = evento.target.textContent; 26 | calculando = false; 27 | } else { 28 | operacaoAtual += evento.target.textContent; 29 | } 30 | atualizaDisplay(); 31 | }; 32 | 33 | const insereOperador = (evento) => { 34 | if (operacaoAtual !== "") { 35 | if (!calculando) { 36 | if (operador !== null) calcula(); 37 | valorAnterior = operacaoAtual; 38 | operacaoAtual = ""; 39 | } 40 | operador = evento.target.textContent; 41 | } 42 | }; 43 | 44 | const calcula = () => { 45 | let resultado = null; 46 | const operandoAnterior = parseFloat(valorAnterior); 47 | const operandoAtual = parseFloat(operacaoAtual); 48 | 49 | switch (operador) { 50 | case "+": 51 | resultado = operandoAnterior + operandoAtual; 52 | break; 53 | case "-": 54 | resultado = operandoAnterior - operandoAtual; 55 | break; 56 | case "*": 57 | resultado = operandoAnterior * operandoAtual; 58 | break; 59 | case "/": 60 | if (operandoAtual !== 0) { 61 | resultado = operandoAnterior / operandoAtual; 62 | } else { 63 | alert("Erro: Divisão por zero não é permitida!"); 64 | return; 65 | } 66 | break; 67 | } 68 | operacaoAtual = String(resultado); 69 | valorAnterior = operacaoAtual; 70 | calculando = true; 71 | atualizaDisplay(); 72 | }; 73 | 74 | const inserePonto = () => { 75 | if (operacaoAtual.indexOf(".") === -1) { 76 | operacaoAtual += "."; 77 | atualizaDisplay(); 78 | } 79 | }; 80 | 81 | // EventListeners 82 | botaoIgual.addEventListener("click", () => { 83 | if (operador !== null && operacaoAtual !== "" && !calculando) { 84 | calcula(); 85 | operador = null; 86 | } 87 | }); 88 | botaoPonto.addEventListener("click", inserePonto); 89 | botoesNumeros.forEach((botao) => botao.addEventListener("click", insereNumero)); 90 | botoesOperadores.forEach((botao) => 91 | botao.addEventListener("click", insereOperador) 92 | ); 93 | 94 | // 95 | // D: Formação Front-end 96 | // 97 | -------------------------------------------------------------------------------- /calculadora_simples/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background-color: #f5f5f5; 7 | margin: 0; 8 | font-family: Arial, sans-serif; 9 | } 10 | 11 | #calculadora { 12 | width: 200px; 13 | background-color: #fff; 14 | box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1); 15 | } 16 | 17 | #display { 18 | width: 100%; 19 | height: 50px; 20 | border-bottom: 1px solid #ccc; 21 | display: flex; 22 | justify-content: flex-end; 23 | align-items: center; 24 | padding: 0 10px; 25 | box-sizing: border-box; 26 | } 27 | 28 | #displayInput { 29 | text-align: right; 30 | width: 100%; 31 | border: none; 32 | } 33 | 34 | #teclado { 35 | display: grid; 36 | grid-template-columns: repeat(4, 1fr); 37 | } 38 | 39 | button { 40 | height: 60px; 41 | border: none; 42 | font-size: 2em; 43 | transition: background-color 0.3s ease; 44 | cursor: pointer; 45 | } 46 | 47 | button:hover { 48 | background-color: #ccc6c6; 49 | } 50 | 51 | button:active { 52 | background-color: #eee; 53 | } 54 | 55 | button.num, 56 | button.ponto, 57 | button.igual { 58 | color: #333; 59 | } 60 | 61 | button.operador { 62 | color: #f7931b; 63 | } 64 | -------------------------------------------------------------------------------- /quiz/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Quiz 7 | 8 | 9 | 10 | 11 |

12 |

Quiz Interativo

13 |

Pontuação: 0

14 |

Erros: 0

15 |

16 |

17 | 18 | 19 | 20 | 21 |

22 | 23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /quiz/scripts.js: -------------------------------------------------------------------------------- 1 | const questions = [ 2 | { 3 | question: "Qual é a capital do Brasil?", 4 | choices: ["Brasília", "Rio de Janeiro", "São Paulo", "Salvador"], 5 | answer: "Brasília", 6 | }, 7 | { 8 | question: "Qual é a capital da Argentina?", 9 | choices: ["Buenos Aires", "Brasília", "Lisboa", "Paris"], 10 | answer: "Buenos Aires", 11 | }, 12 | { 13 | question: "Qual é a capital da França?", 14 | choices: ["Roma", "Madri", "Paris", "Londres"], 15 | answer: "Paris", 16 | }, 17 | { 18 | question: "Qual é a capital da Espanha?", 19 | choices: ["Lisboa", "Madri", "Barcelona", "Valência"], 20 | answer: "Madri", 21 | }, 22 | { 23 | question: "Qual é a capital da Itália?", 24 | choices: ["Veneza", "Milão", "Roma", "Nápoles"], 25 | answer: "Roma", 26 | }, 27 | { 28 | question: "Qual é a capital do Canadá?", 29 | choices: ["Toronto", "Vancouver", "Ottawa", "Montreal"], 30 | answer: "Ottawa", 31 | }, 32 | { 33 | question: "Qual é a capital dos Estados Unidos?", 34 | choices: ["Nova York", "Los Angeles", "Chicago", "Washington D.C."], 35 | answer: "Washington D.C.", 36 | }, 37 | { 38 | question: "Qual é a capital do Reino Unido?", 39 | choices: ["Liverpool", "Manchester", "Edimburgo", "Londres"], 40 | answer: "Londres", 41 | }, 42 | ]; 43 | 44 | const questionElement = document.getElementById("question"); 45 | const choiceElements = Array.from(document.getElementsByClassName("choice")); 46 | const nextButton = document.getElementById("next"); 47 | const scoreElement = document.getElementById("score"); 48 | const wrongElement = document.getElementById("wrong"); 49 | 50 | let currentQuestion = 0; 51 | let score = 0; 52 | let wrong = 0; 53 | let answerChosen = false; 54 | 55 | function loadQuestion() { 56 | const currentQuestionData = questions[currentQuestion]; 57 | questionElement.innerText = currentQuestionData.question; 58 | 59 | const choices = shuffleArray(currentQuestionData.choices); 60 | for (let i = 0; i < choiceElements.length; i++) { 61 | choiceElements[i].innerText = choices[i]; 62 | } 63 | answerChosen = false; // reset flag when loading new question 64 | } 65 | 66 | function checkAnswer(e) { 67 | if (answerChosen) return; // prevent multiple answers 68 | answerChosen = true; 69 | 70 | if (e.target.innerText === questions[currentQuestion].answer) { 71 | score++; 72 | scoreElement.innerText = "Pontuação: " + score; 73 | alert("Correto!"); 74 | } else { 75 | wrong++; 76 | wrongElement.innerText = "Erros: " + wrong; 77 | alert( 78 | "Errado! A resposta correta é " + questions[currentQuestion].answer + "." 79 | ); 80 | } 81 | } 82 | 83 | choiceElements.forEach((element) => { 84 | element.addEventListener("click", checkAnswer); 85 | }); 86 | 87 | function restartQuiz() { 88 | currentQuestion = 0; 89 | score = 0; 90 | wrong = 0; 91 | scoreElement.innerText = "Pontuação: 0"; 92 | wrongElement.innerText = "Erros: 0"; 93 | loadQuestion(); 94 | } 95 | 96 | nextButton.addEventListener("click", () => { 97 | if (!answerChosen) { 98 | alert("Por favor, escolha uma resposta antes de prosseguir."); 99 | return; 100 | } 101 | 102 | currentQuestion++; 103 | 104 | if (currentQuestion < questions.length) { 105 | loadQuestion(); 106 | } else { 107 | alert( 108 | "Fim do Quiz! Você acertou " + 109 | score + 110 | " de " + 111 | questions.length + 112 | " perguntas." 113 | ); 114 | restartQuiz(); 115 | } 116 | }); 117 | 118 | function shuffleArray(array) { 119 | let currentIndex = array.length, 120 | temporaryValue, 121 | randomIndex; 122 | 123 | while (0 !== currentIndex) { 124 | randomIndex = Math.floor(Math.random() * currentIndex); 125 | currentIndex -= 1; 126 | 127 | temporaryValue = array[currentIndex]; 128 | array[currentIndex] = array[randomIndex]; 129 | array[randomIndex] = temporaryValue; 130 | } 131 | 132 | return array; 133 | } 134 | 135 | loadQuestion(); 136 | -------------------------------------------------------------------------------- /quiz/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | background-color: #f5f5f5; 10 | } 11 | 12 | .container { 13 | text-align: center; 14 | box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1); 15 | padding: 20px; 16 | background-color: #fff; 17 | width: 500px; 18 | } 19 | 20 | .choice { 21 | margin: 10px; 22 | border: 1px solid #000; 23 | padding: 10px; 24 | cursor: pointer; 25 | } 26 | 27 | .choice:hover { 28 | background-color: #f0f0f0; 29 | } 30 | 31 | #next { 32 | margin-top: 20px; 33 | padding: 10px 20px; 34 | border: none; 35 | background-color: #007bff; 36 | color: white; 37 | cursor: pointer; 38 | } 39 | 40 | #score, 41 | #wrong { 42 | font-size: 1.2em; 43 | color: #007bff; 44 | margin-top: 20px; 45 | } 46 | -------------------------------------------------------------------------------- /teoria/avancando.js: -------------------------------------------------------------------------------- 1 | // 3 - Avançando em JavaScript 2 | 3 | // 3.1 Manipulação de arrays 4 | 5 | const frutas = ["Maçã", "Banana"]; 6 | frutas.unshift("Laranja"); // Adiciona "Laranja" ao começo do array 7 | console.log(frutas); 8 | 9 | frutas.shift(); // Remove o primeiro elemento do array 10 | console.log(frutas); 11 | 12 | const numeros = [1, 2, 3, 4, 5, 6]; 13 | const numeroPar = numeros.find((num) => num % 2 === 0); // Encontra o primeiro número par 14 | console.log(numeroPar); // 2 15 | 16 | const numerosPares = numeros.filter((num) => num % 2 === 0); // Filtra todos os números pares 17 | console.log(numerosPares); // [2, 4, 6] 18 | 19 | // 3.2 Manipulação de strings avançada 20 | const frase = " Olá, mundo! "; 21 | const palavras = frase.trim().split(" "); // Remove espaços extra e divide a string em palavras 22 | console.log(palavras); // ["Olá,", "mundo!"] 23 | 24 | const stringSemEspacos = frase.trim(); // Remove espaços no início e no final da string 25 | console.log(stringSemEspacos); // "Olá, mundo!" 26 | 27 | const frase2 = "JavaScript é incrível!"; 28 | 29 | console.log(frase2.startsWith("Java")); // true 30 | console.log(frase2.endsWith("!")); // true 31 | 32 | // 3.3 Exceções e tratamento de erros 33 | /* 34 | 35 | const idade = 15; 36 | if (idade < 18) { 37 | throw new Error("Você deve ter pelo menos 18 anos."); 38 | } 39 | 40 | try { 41 | const idade = 15; 42 | if (idade < 18) { 43 | throw new Error("Você deve ter pelo menos 18 anos."); 44 | } 45 | } catch (erro) { 46 | console.log(erro.message); // "Você deve ter pelo menos 18 anos." 47 | } 48 | */ 49 | 50 | // 3.4 Callbacks 51 | function cumprimentar(nome, callback) { 52 | console.log("Olá, " + nome); 53 | callback(); 54 | } 55 | 56 | function mostrarSaudacao() { 57 | console.log("Como você está?"); 58 | } 59 | 60 | cumprimentar("Maria", mostrarSaudacao); // "Olá, Maria" "Como você está?" 61 | 62 | function mostrarMensagem() { 63 | console.log("Esta é uma mensagem após 3 segundos"); 64 | } 65 | 66 | setTimeout(mostrarMensagem, 3000); // Mostra a mensagem após 3 segundos 67 | 68 | // 3.5 Promises 69 | const promessa = new Promise((resolve, reject) => { 70 | const condicao = true; 71 | if (condicao) { 72 | resolve("A condição é verdadeira!"); 73 | } else { 74 | reject("A condição é falsa!"); 75 | } 76 | }); 77 | 78 | promessa 79 | .then((mensagem) => console.log(mensagem)) // "A condição é verdadeira!" 80 | .catch((erro) => console.log(erro)); 81 | 82 | const promessa1 = Promise.resolve(3); 83 | const promessa2 = new Promise((resolve, reject) => 84 | setTimeout(resolve, 100, "foo") 85 | ); 86 | 87 | Promise.all([promessa1, promessa2]).then((valores) => console.log(valores)); // [3, "foo"] 88 | 89 | // 3.6 Async/Await 90 | async function obterValor() { 91 | const promessa = new Promise((resolve, reject) => { 92 | setTimeout(() => resolve("Valor obtido!"), 2000); 93 | }); 94 | 95 | const valor = await promessa; 96 | console.log(valor); // "Valor obtido!" 97 | } 98 | 99 | obterValor(); 100 | 101 | /* 102 | 103 | async function obterValorComErro() { 104 | try { 105 | const promessa = new Promise((resolve, reject) => { 106 | setTimeout(() => reject("Erro ao obter valor!"), 2000); 107 | }); 108 | 109 | const valor = await promessa; 110 | console.log(valor); 111 | } catch (erro) { 112 | console.error(erro); // "Erro ao obter valor!" 113 | } 114 | } 115 | 116 | obterValorComErro(); 117 | 118 | */ 119 | 120 | // 3.7 JSON 121 | const objeto = { nome: "João", idade: 30 }; 122 | const jsonString = JSON.stringify(objeto); 123 | console.log(jsonString); // "{"nome":"João","idade":30}" 124 | 125 | const jsonString2 = '{"nome":"João","idade":30}'; 126 | const objeto2 = JSON.parse(jsonString); 127 | console.log(objeto); // { nome: "João", idade: 30 } 128 | -------------------------------------------------------------------------------- /teoria/avancando_exercicios.js: -------------------------------------------------------------------------------- 1 | // Exercício de Manipulação de Array 2 | 3 | // Crie uma lista de compras que é inicialmente vazia. 4 | // Adicione 5 itens à lista usando push(). 5 | // Agora, remova o primeiro item da lista usando shift(). 6 | // Imprima a lista final no console. 7 | 8 | const listaDeCompras = []; 9 | listaDeCompras.push("Leite", "Ovos", "Pão", "Manteiga", "Queijo"); 10 | listaDeCompras.shift(); 11 | console.log(listaDeCompras); // ['Ovos', 'Pão', 'Manteiga', 'Queijo'] 12 | 13 | // Exercício de Manipulação de Array - find() 14 | 15 | // Você tem um array de números: [3, 7, 14, 21, 29, 36, 42]. 16 | // Use a função find() para encontrar o primeiro número que é divisível por 7 17 | // e maior que 10. 18 | 19 | const numeros = [3, 7, 14, 21, 29, 36, 42]; 20 | const resultado = numeros.find((num) => num > 10 && num % 7 === 0); 21 | console.log(resultado); // 14 22 | 23 | // 24 | // D: Curso Desafios de JavaScript 25 | // 26 | 27 | // Exercício de Manipulação de Array - filter() 28 | 29 | // Dado o array de números: [5, 10, 15, 20, 25, 30, 35, 40]. 30 | // Use a função filter() para criar um novo array que contenha apenas os números 31 | // que são maiores que 20. 32 | 33 | const numeros2 = [5, 10, 15, 20, 25, 30, 35, 40]; 34 | const filtrados = numeros2.filter((num) => num > 20); 35 | console.log(filtrados); // [25, 30, 35, 40] 36 | 37 | // Exercício de Manipulação de String - split(), trim() 38 | 39 | // Dada a string: " Bom dia, mundo! ". 40 | // Remova os espaços em branco no início e no final da string e, 41 | // em seguida, divida a string em palavras. 42 | 43 | const frase = " Bom dia, mundo! "; 44 | const palavras = frase.trim().split(" "); 45 | console.log(palavras); // ["Bom", "dia,", "mundo!"] 46 | 47 | // Exercício de Manipulação de String - startsWith(), endsWith() 48 | 49 | // Dada a string: "O rato roeu a roupa do rei de Roma". 50 | // Verifique se a string começa com a palavra "O" e termina com a palavra "Roma". 51 | 52 | const frase2 = "O rato roeu a roupa do rei de Roma"; 53 | const comecaComO = frase2.startsWith("O"); 54 | const terminaComRoma = frase2.endsWith("Roma"); 55 | console.log(`Começa com 'O'? ${comecaComO}`); // true 56 | console.log(`Termina com 'Roma'? ${terminaComRoma}`); // true 57 | -------------------------------------------------------------------------------- /teoria/dom.js: -------------------------------------------------------------------------------- 1 | // 4 - DOM 2 | 3 | // 4.1 Selecionando elementos no DOM 4 | 5 | // Selecionando um elemento pelo id 6 | const elementoPorId = document.querySelector("#meuId"); 7 | 8 | console.log(elementoPorId); 9 | 10 | // Selecionando todos os elementos com a classe 'minhaClasse' 11 | const elementosPorClasse = document.querySelectorAll(".minhaClasse"); 12 | 13 | console.log(elementosPorClasse); 14 | 15 | // 4.2 Manipulando conteúdo de texto 16 | const elemento = document.querySelector("#meuId"); 17 | 18 | // Obtendo o conteúdo de texto 19 | console.log(elemento.textContent); 20 | 21 | // Alterando o conteúdo de texto 22 | elemento.textContent = "Novo Conteúdo"; 23 | 24 | // 4.3 Trabalhando com atributos 25 | const link = document.querySelector("a"); 26 | 27 | // Obtendo um atributo 28 | console.log(link.getAttribute("href")); 29 | 30 | // Definindo um atributo 31 | link.setAttribute("href", "https://www.novosite.com"); 32 | 33 | // Verificando se um atributo existe 34 | console.log(link.hasAttribute("target")); 35 | 36 | // Removendo um atributo 37 | link.removeAttribute("target"); 38 | 39 | // 40 | // D: Curso de JavaScript 41 | // 42 | 43 | // 4.4 Manipulando classes CSS 44 | const elemento2 = document.querySelector("#meuId"); 45 | 46 | // Adicionando uma classe 47 | elemento2.classList.add("novaClasse"); 48 | 49 | // Removendo uma classe 50 | elemento2.classList.remove("minhaClasse"); 51 | 52 | // Alternando uma classe 53 | elemento2.classList.toggle("outraClasse"); 54 | 55 | // 4.5 Trabalhando com estilos CSS 56 | const elemento3 = document.querySelector("#meuId"); 57 | 58 | // Alterando um estilo 59 | elemento3.style.color = "red"; 60 | 61 | // 4.6 Navegação entre nós 62 | 63 | const elemento4 = document.querySelector("#meuInput"); 64 | 65 | // Obtendo o elemento pai 66 | const pai = elemento4.parentNode; 67 | 68 | console.log(pai); 69 | 70 | // Obtendo o primeiro filho 71 | const primeiroFilho = pai.firstChild; 72 | 73 | console.log(primeiroFilho); 74 | 75 | // Obtendo o último filho 76 | const ultimoFilho = pai.lastChild; 77 | 78 | console.log(ultimoFilho); 79 | 80 | // 4.7 Manipulando a estrutura do DOM 81 | 82 | // Criando um novo elemento 83 | const novoElemento = document.createElement("div"); 84 | 85 | // Adicionando o novo elemento ao final do body 86 | document.body.appendChild(novoElemento); 87 | 88 | novoElemento.textContent = "Testando"; 89 | 90 | // Inserindo o novo elemento antes do primeiro filho do body 91 | document.body.insertBefore(novoElemento, document.body.firstChild); 92 | 93 | // Removendo um elemento 94 | document.body.removeChild(novoElemento); 95 | 96 | // 5 - Introdução aos Eventos 97 | 98 | // 5.1 Evento de click 99 | const botao = document.querySelector("button"); 100 | 101 | // Adicionando um ouvinte de eventos 102 | botao.addEventListener("click", function () { 103 | alert("Botão clicado!"); 104 | }); 105 | 106 | // 5.2 Eventos de mouse 107 | const elemento5 = document.querySelector("#meuId"); 108 | 109 | // Ouvindo o evento de passar o mouse 110 | elemento5.addEventListener("mouseover", function () { 111 | console.log("Mouse passou sobre o elemento!"); 112 | }); 113 | 114 | // 5.3 Eventos de teclado 115 | const campoInput = document.querySelector("input"); 116 | 117 | // Ouvindo o evento de pressionar tecla 118 | campoInput.addEventListener("keydown", function () { 119 | console.log("Tecla pressionada!"); 120 | }); 121 | 122 | // 5.4 Eventos de formulário 123 | 124 | const formulario = document.querySelector("form"); 125 | 126 | // Ouvindo o evento de submissão do formulário 127 | formulario.addEventListener("submit", function (evento) { 128 | // Previne a submissão do formulário 129 | evento.preventDefault(); 130 | 131 | console.log("Formulário submetido!"); 132 | }); 133 | 134 | // 5.5 Propagação de Eventos 135 | 136 | // Adicionando um ouvinte de eventos para a fase de captura 137 | document.querySelector("#elementoPai").addEventListener( 138 | "click", 139 | function () { 140 | console.log("Clique capturado no pai!"); 141 | }, 142 | true 143 | ); 144 | 145 | // Adicionando um ouvinte de eventos para a fase de propagação 146 | document.querySelector("#elementoFilho").addEventListener( 147 | "click", 148 | function () { 149 | console.log("Clique propagado no filho!"); 150 | }, 151 | false 152 | ); 153 | 154 | // 5.6 PreventDefault e StopPropagation 155 | document.querySelector("#meuLink").addEventListener("click", function (evento) { 156 | // Previne a ação padrão do link 157 | evento.preventDefault(); 158 | 159 | // Parar a propagação do evento 160 | evento.stopPropagation(); 161 | }); 162 | 163 | // 5.7 Eventos de Delegação 164 | 165 | // Adicionando um ouvinte de eventos no pai para delegar o evento 166 | document 167 | .querySelector("#elementoPai") 168 | .addEventListener("click", function (evento) { 169 | if (evento.target.matches(".classeDosFilhos")) { 170 | console.log("Evento delegado para o filho!"); 171 | } 172 | }); 173 | -------------------------------------------------------------------------------- /teoria/fundamentos.js: -------------------------------------------------------------------------------- 1 | // 1 - Configuração do ambiente de desenvolvimento 2 | // VS Code e teste de JS no console 3 | 4 | // 2 - Fundamentos de JavaScript 5 | 6 | // 2.1 Sintaxe básica 7 | var minhaVariavel = "Olá, mundo!"; 8 | 9 | console.log(minhaVariavel); 10 | 11 | // 2.2 Comentários 12 | 13 | // Isto é um comentário de uma linha 14 | /* Isto é um 15 | comentário de várias linhas */ 16 | 17 | // 2.3 Variáveis e tipos de dados 18 | var meuNumero = 10; // Number 19 | 20 | console.log(typeof meuNumero); 21 | 22 | var minhaString = "Texto"; // String 23 | 24 | console.log(typeof minhaString); 25 | 26 | var meuBooleano = true; // Boolean 27 | 28 | console.log(typeof meuBooleano); 29 | 30 | var meuObjeto = {}; // Object 31 | var meuArray = []; // Array 32 | var minhaNull = null; // Null 33 | var meuUndefined; // Undefined 34 | 35 | // 2.4 let e const 36 | let teste = 1; 37 | const PI = 3.14; 38 | 39 | console.log(teste, PI); 40 | 41 | // 2.5 Operadores 42 | const x = 10; 43 | const y = 5; 44 | 45 | // Operadores aritméticos 46 | console.log(x + y); // 15 47 | console.log(x - y); // 5 48 | console.log(x * y); // 50 49 | console.log(x / y); // 2 50 | 51 | // Operadores de comparação 52 | console.log(x == y); // false 53 | console.log(x != y); // true 54 | 55 | // Operadores lógicos 56 | console.log(x > y && y < 10); // true 57 | console.log(x > y || y > 10); // true 58 | 59 | // 2.6 Conversão de tipos 60 | const meuNumero2 = "123"; // String 61 | const meuNumeroConvertido = Number(meuNumero2); // Number 62 | console.log(typeof meuNumeroConvertido); // "number" 63 | 64 | // 65 | // D: Curso Formação Front-end 66 | // 67 | 68 | // 2.7 Estruturas de controle de fluxo 69 | 70 | // Condição if, else if, else 71 | const idade = 20; 72 | 73 | if (idade < 13) { 74 | console.log("Criança"); 75 | } else if (idade < 20) { 76 | console.log("Adolescente"); 77 | } else { 78 | console.log("Adulto"); 79 | } 80 | 81 | // Condição switch 82 | const fruta = "Maçã"; 83 | 84 | switch (fruta) { 85 | case "Banana": 86 | console.log("Eu gosto de bananas!"); 87 | break; 88 | case "Maçã": 89 | console.log("As maçãs são ok."); 90 | break; 91 | default: 92 | console.log("Nenhuma fruta selecionada"); 93 | } 94 | 95 | // 2.7 Estruturas de loop 96 | // Loop for 97 | for (let i = 0; i < 5; i++) { 98 | console.log(i); // 0, 1, 2, 3, 4 99 | } 100 | 101 | // Loop while 102 | let i = 0; 103 | while (i < 5) { 104 | console.log(i); // 0, 1, 2, 3, 4 105 | i++; 106 | } 107 | 108 | // Loop do while 109 | let j = 0; 110 | do { 111 | console.log(j); // 0, 1, 2, 3, 4 112 | j++; 113 | } while (j < 5); 114 | 115 | // 2.8 Funções 116 | 117 | function cumprimentar(nome) { 118 | console.log(`Olá, ${nome}!`); 119 | } 120 | cumprimentar("Maria"); // Olá, Maria! 121 | 122 | // 2.9 Escopo de Variáveis 123 | 124 | // Escopo global 125 | let cor = "azul"; 126 | 127 | function mostrarCor() { 128 | // Escopo local 129 | let cor = "verde"; 130 | console.log(cor); // verde 131 | } 132 | 133 | mostrarCor(); 134 | console.log(cor); // azul 135 | 136 | // 2.10 Hoisting 137 | testeHoisting(); 138 | 139 | function testeHoisting() { 140 | console.log("Deu certo!"); 141 | } 142 | 143 | // 2.11 Arrow function 144 | const testandoArrow = () => console.log("Isso também é uma função"); 145 | 146 | // 2.12 Truthy e Falsy 147 | const minhaVariavel1 = ""; // Falsy 148 | const minhaVariavel2 = "Algum texto"; // Truthy 149 | 150 | if (minhaVariavel1) { 151 | console.log("Variável1 é truthy"); 152 | } else { 153 | console.log("Variável1 é falsy"); // Isso será exibido 154 | } 155 | 156 | if (minhaVariavel2) { 157 | console.log("Variável2 é truthy"); // Isso será exibido 158 | } else { 159 | console.log("Variável2 é falsy"); 160 | } 161 | 162 | // 2.13 Arrays 163 | 164 | // Array 165 | const numeros = [1, 2, 3, 4, 5]; 166 | console.log(numeros[0]); // 1 167 | 168 | // Adição de elementos 169 | numeros.push(6); 170 | console.log(numeros); // [1, 2, 3, 4, 5, 6] 171 | 172 | // Remoção de elementos 173 | numeros.pop(); 174 | console.log(numeros); // [1, 2, 3, 4, 5] 175 | 176 | // 2.14 Manipulação de Strings 177 | 178 | // String 179 | const minhaStringNova = "Olá, Mundo!"; 180 | 181 | // Concatenação 182 | const minhaString2 = minhaStringNova + " Como você está?"; 183 | console.log(minhaString2); // Olá, Mundo! Como você está? 184 | 185 | // Interpolação 186 | const minhaString3 = `${minhaStringNova} Como você está?`; 187 | console.log(minhaString3); // Olá, Mundo! Como você está? 188 | 189 | // Métodos comuns 190 | console.log(minhaString3.length); // 31 191 | console.log(minhaString3.toUpperCase()); // OLÁ, MUNDO! COMO VOCÊ ESTÁ? 192 | 193 | // 2.15 Data e Hora 194 | 195 | // Data atual 196 | const agora = new Date(); 197 | console.log(agora); 198 | 199 | // Data específica 200 | const natal = new Date(2023, 11, 25); 201 | console.log(natal); 202 | 203 | // 2.16 Objeto Math 204 | 205 | // Número PI 206 | console.log(Math.PI); // 3.141592653589793 207 | 208 | // Arredondamento 209 | console.log(Math.round(3.6)); // 4 210 | 211 | // Raiz quadrada 212 | console.log(Math.sqrt(16)); // 4 213 | 214 | // Potência 215 | console.log(Math.pow(2, 3)); // 8 216 | -------------------------------------------------------------------------------- /teoria/fundamentos_exercicios.js: -------------------------------------------------------------------------------- 1 | // Exercício 1: Olá, Mundo! 2 | // Crie um script JavaScript que imprima "Olá, Mundo!" no console. 3 | 4 | console.log("Olá, Mundo!"); 5 | 6 | // Exercício 2: Conversão de Tipos 7 | // Dado o valor de uma string "1234", converta-o em um número e exiba o tipo da variável no console. 8 | 9 | const valorString = "1234"; 10 | const valorNumber = Number(valorString); 11 | console.log(typeof valorNumber); // "number" 12 | 13 | // 14 | // D: Curso Desafios de JavaScript 15 | // 16 | 17 | // Exercício 3: Manipulação de Strings 18 | // Dado uma string "JavaScript é incrível", escreva um código que conte quantos caracteres a string tem e quantas palavras existem na frase. 19 | 20 | const minhaString = "JavaScript é incrível"; 21 | const numeroDeCaracteres = minhaString.length; 22 | const numeroDePalavras = minhaString.split(" ").length; 23 | 24 | console.log(`Número de caracteres: ${numeroDeCaracteres}`); // Número de caracteres: 23 25 | console.log(`Número de palavras: ${numeroDePalavras}`); // Número de palavras: 3 26 | 27 | // Exercício 4: Loops e Arrays 28 | // Crie um array com cinco nomes. Use um loop for para imprimir cada nome no console. 29 | 30 | const nomes = ["Ana", "João", "Carlos", "Maria", "Beatriz"]; 31 | for (let i = 0; i < nomes.length; i++) { 32 | console.log(nomes[i]); 33 | } 34 | 35 | // Exercício 5: Funções, Strings e Math 36 | // Crie uma função que aceita uma string representando um horário no formato de 24 horas (por exemplo, "14:30"). A função deve retornar uma string que converta o horário para o formato de 12 horas (por exemplo, "2:30 PM"). Use o objeto Math para auxiliar nesta conversão. Certifique-se de que sua função lida corretamente com horários na meia-noite e no meio-dia. 37 | 38 | function converterHorario(horario24) { 39 | const [hora, minuto] = horario24.split(":"); 40 | let hora12 = hora % 12 || 12; 41 | const periodo = hora < 12 ? "AM" : "PM"; 42 | return `${hora12}:${minuto} ${periodo}`; 43 | } 44 | 45 | console.log(converterHorario("14:30")); // "2:30 PM" 46 | console.log(converterHorario("00:00")); // "12:00 AM" 47 | console.log(converterHorario("12:00")); // "12:00 PM" 48 | -------------------------------------------------------------------------------- /teoria/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Curso de JavaScript com exercícios e projetos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Curso de JavaScript

18 | 19 | 20 | 21 | 22 |

Olá, mundo!

23 | Google 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 38 | 39 | 40 |

41 | Pai 42 |

Filho

43 |

44 | 45 | 46 | Link para o Google 47 | 48 | 49 | -------------------------------------------------------------------------------- /teoria/javascript_moderno.js: -------------------------------------------------------------------------------- 1 | // 4.0 JavaScript moderno 2 | 3 | // 4.1 let e const 4 | let numero = 10; // Declaração com 'let', pode ser reatribuída 5 | numero = 20; 6 | console.log(numero); // 20 7 | 8 | const nome = "João"; // Declaração com 'const', não pode ser reatribuída 9 | console.log(nome); // João 10 | 11 | function testeVar() { 12 | var x = 1; 13 | if (true) { 14 | var x = 2; // mesma variável 15 | console.log(x); // 2 16 | } 17 | console.log(x); // 2 18 | } 19 | 20 | function testeLet() { 21 | let x = 1; 22 | if (true) { 23 | let x = 2; // variável diferente 24 | console.log(x); // 2 25 | } 26 | console.log(x); // 1 27 | } 28 | 29 | testeVar(); 30 | testeLet(); 31 | 32 | // 4.2 Arrow Functions 33 | 34 | const soma = (a, b) => a + b; 35 | console.log(soma(3, 5)); // 8 36 | 37 | const quadrado = (numero) => numero * numero; 38 | console.log(quadrado(4)); // 16 39 | 40 | const cumprimento = (nome) => { 41 | const mensagem = `Olá, ${nome}!`; 42 | return mensagem; 43 | }; 44 | console.log(cumprimento("João")); // Olá, João! 45 | 46 | // 4.3 Template Literals: 47 | 48 | const nome2 = "Maria"; 49 | const idade = 22; 50 | console.log(`Meu nome é ${nome} e eu tenho ${idade} anos.`); 51 | 52 | const produto = "carro"; 53 | const preco = 50000; 54 | console.log(`O ${produto} custa R$ ${preco}.`); 55 | 56 | // 4.4 Destructuring 57 | 58 | const pessoa = { nome: "Carlos", idade: 30 }; 59 | const { nome3, idade2 } = pessoa; 60 | console.log(nome); // Carlos 61 | console.log(idade); // 30 62 | 63 | const numeros = [1, 2, 3, 4]; 64 | const [primeiro, segundo] = numeros; 65 | console.log(primeiro); // 1 66 | console.log(segundo); // 2 67 | 68 | // 4.5 Spread e Rest Operators 69 | 70 | const array1 = [1, 2, 3]; 71 | const array2 = [...array1, 4, 5, 6]; 72 | console.log(array2); // [1, 2, 3, 4, 5, 6] 73 | 74 | const soma2 = (...args) => args.reduce((total, numero) => total + numero, 0); 75 | console.log(soma(1, 2, 3, 4)); // 10 76 | 77 | // 4.6 Default Parameters: 78 | 79 | const saudacao = (nome = "visitante") => `Olá, ${nome}!`; 80 | console.log(saudacao()); // Olá, visitante! 81 | console.log(saudacao("Lucas")); // Olá, Lucas! 82 | 83 | // 4.7 Object Literal Enhancements 84 | 85 | const nomeNovo = "Felipe"; 86 | const idadeNova = 27; 87 | const pessoaNova = { nome, idade }; 88 | console.log(pessoa); // {nome: 'Felipe', idade: 27} 89 | 90 | const metodoPessoa = { 91 | dizerOi() { 92 | console.log("Oi!"); 93 | }, 94 | }; 95 | metodoPessoa.dizerOi(); // Oi! 96 | 97 | // 4.8 Array Methods (map, filter, reduce) 98 | 99 | const numerosNovos = [1, 2, 3, 4, 5]; 100 | const dobrados = numerosNovos.map((numero) => numero * 2); 101 | console.log(dobrados); // [2, 4, 6, 8, 10] 102 | 103 | const pares = numerosNovos.filter((numero) => numero % 2 === 0); 104 | console.log(pares); // [2, 4] 105 | 106 | const somaReduce = numerosNovos.reduce((total, numero) => total + numero, 0); 107 | console.log(soma); // 15 108 | 109 | // 4.9 Classes e Herança: 110 | 111 | class Pessoa { 112 | constructor(nome, idade) { 113 | this.nome = nome; 114 | this.idade = idade; 115 | } 116 | falar() { 117 | console.log(`Oi, meu nome é ${this.nome}.`); 118 | } 119 | } 120 | const pessoa1 = new Pessoa("Carlos", 25); 121 | pessoa1.falar(); // Oi, meu nome é Carlos. 122 | 123 | class Funcionario extends Pessoa { 124 | constructor(nome, idade, salario) { 125 | super(nome, idade); 126 | this.salario = salario; 127 | } 128 | falar() { 129 | super.falar(); 130 | console.log(`Eu ganho R$${this.salario}.`); 131 | } 132 | } 133 | const funcionario1 = new Funcionario("Ana", 30, 5000); 134 | funcionario1.falar(); // Oi, meu nome é Ana. Eu ganho R$5000. 135 | -------------------------------------------------------------------------------- /teoria/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | } 4 | 5 | #meuId { 6 | padding: 20px; 7 | margin: 20px 0; 8 | background-color: #f5f5f5; 9 | color: #333; 10 | } 11 | 12 | .minhaClasse { 13 | border: 1px solid #ccc; 14 | } 15 | 16 | button { 17 | display: block; 18 | margin: 10px 0; 19 | padding: 10px 20px; 20 | background-color: #4caf50; 21 | color: white; 22 | border: none; 23 | cursor: pointer; 24 | } 25 | 26 | button:hover { 27 | background-color: #45a049; 28 | } 29 | 30 | input[type="text"] { 31 | padding: 10px; 32 | margin: 10px 0; 33 | display: block; 34 | } 35 | 36 | form { 37 | margin: 20px 0; 38 | } 39 | 40 | form button { 41 | background-color: #008cba; 42 | } 43 | 44 | form button:hover { 45 | background-color: #007b9a; 46 | } 47 | 48 | a { 49 | display: block; 50 | margin: 20px 0; 51 | color: #333; 52 | } 53 | --------------------------------------------------------------------------------