Exercícios de lógica de programação JavaScript com gabarito

Quais são os melhores exercícios lógica de programação JavaScript? Colocar em prática os exercícios de lógica de programação em JavaScript é de extrema importância para o desenvolvimento de habilidades e o aprimoramento das técnicas de programação. Ao realizar exercícios, é possível aplicar os conceitos aprendidos teoricamente, desenvolver o raciocínio lógico e ganhar fluência na linguagem.

Os exercícios proporcionam um ambiente de aprendizado ativo, permitindo que o programador resolva problemas reais e crie soluções funcionais. Identificando, assim, lacunas de conhecimento, aprimorando a capacidade de análise e promovendo a busca por soluções eficientes.

A Hora de Codar disponibiliza um compilado de atividades de lógica de programação em JavaScript, que abrange desde conceitos básicos até desafios mais avançados. Nossos exercícios são desenvolvidos para ajudar você a praticar e aperfeiçoar suas habilidades, além de fornecer soluções e explicações detalhadas.

Convido você a conhecer nosso compilado de exercícios de lógica de programação JavaScript, onde encontrará uma variedade de atividades para testar suas habilidades e aprimorar seus conhecimentos. A prática constante é fundamental para se tornar um programador experiente e eficiente. 

Vamos embarcar nessa jornada de aprendizado juntos!

❌Para conhecer conteúdos grátis de Javascript, visite nosso blog e canal do Youtube!

Exercícios de lógica de programação iniciante Javascript

Confira, abaixo, uma lista com os melhores exercícios de lógica de programação iniciante Javascript. Ah, e no final, também deixamos o gabarito com soluções. Dessa forma, você saberá exatamente onde acertou e onde errou, ok?

1. Variáveis e tipos de dados: Escreva um programa que declare duas variáveis, “nome” e “idade”, e as imprima em um console em uma frase que diga “Olá, meu nome é [nome] e eu tenho [idade] anos”.
2. Operadores: Crie um programa que solicite ao usuário dois números e exiba o resultado da soma, subtração, multiplicação e divisão desses números.
3. Condições: Escreva um programa que pergunte ao usuário sua idade e imprima se ele é maior ou menor de idade.
4. Loops: Crie um loop que imprima todos os números de 1 a 100.
5. Funções: Escreva uma função que aceite dois números como argumentos e retorne sua soma.
6. Arrays: Escreva um programa que declare um array de suas frutas favoritas e imprima cada fruta na lista usando um loop.
7. Objetos: Crie um objeto que represente um livro, com propriedades para título, autor e número de páginas. Imprima cada propriedade no console.
8. Eventos DOM: Crie uma página HTML com um botão que, quando clicado, exiba um alerta que diga “Você clicou no botão!”.
9. Manipulação de Strings: Escreva uma função que receba uma string e retorne a mesma string, mas com a primeira letra de cada palavra em maiúsculas.
10. Promises e Fetch API: Use a Fetch API para fazer uma chamada para uma API pública (como a API do JSONPlaceholder) e exibir os resultados no console.

Gabaritos dos exercícios de Javascript online

Solução dos exercícios de Javascript.

1 – Variáveis e tipos de dados:

let nome = "João";

let idade = 25;

console.log(`Olá, meu nome é ${nome} e eu tenho ${idade} anos`);

2 – Operadores:

let num1 = prompt("Digite um número:");

let num2 = prompt("Digite outro número:");

num1 = Number(num1);

num2 = Number(num2);

console.log(`A soma é: ${num1 + num2}`);

console.log(`A subtração é: ${num1 - num2}`);

console.log(`A multiplicação é: ${num1 * num2}`);

console.log(`A divisão é: ${num1 / num2}`);

3 – Condições:

let userAge = prompt("Quantos anos você tem?");

userAge = Number(userAge);

if (userAge >= 18) {

    console.log("Você é maior de idade.");

} else {

    console.log("Você é menor de idade.");

}

4 – Loops:

for (let i = 1; i <= 100; i++) {

    console.log(i);

}

5 – Funções:

function soma(num1, num2) {

    return num1 + num2;

}

console.log(soma(5, 3));  // Saída: 8

6 – Arrays:

let frutas = ["maçã", "banana", "manga", "uva"];

for (let i = 0; i < frutas.length; i++) {

    console.log(frutas[i]);

}

7 – Objetos:

let livro = {

    titulo: "A Revolução dos Bichos",

    autor: "George Orwell",

    numeroDePaginas: 144

};

console.log(livro.titulo);      // Saída: A Revolução dos Bichos

console.log(livro.autor);       // Saída: George Orwell

console.log(livro.numeroDePaginas);  // Saída: 144

8 – Eventos DOM:

<button id="myButton">Clique em mim!</button>

<script>

document.getElementById("myButton").addEventListener("click", function() {

    alert("Você clicou no botão!");

});

</script>

9 – Manipulação de Strings:

function capitalize(str) {

    return str.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');

}

console.log(capitalize("hello world"));  // Saída: "Hello World"

10 – Promises e Fetch API:

fetch('<https://jsonplaceholder.typicode.com/posts')>

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.log('Erro:', error));

Exercícios avançados de lógica de programação Javascript

1. Exercício de Fibonacci

Neste exercício, você deve criar uma função em JavaScript para calcular o n-ésimo número na sequência de Fibonacci.

A sequência de Fibonacci é uma série de números em que cada número é a soma dos dois precedentes. Ela começa normalmente com 0 e 1. Os primeiros números da sequência são: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, e assim por diante.

Seu objetivo é criar uma função chamada fibonacci, que aceite um número inteiro positivo n como argumento e retorne o n-ésimo número na sequência de Fibonacci.

2. Desafio: Encontre a palavra mais longa

Dado um texto, escreva uma função que encontre a palavra mais longa presente nele.

Gabarito dos exercícios avançados de Javascript

Exercício de Fibonacci

function fibonacci(n) {
    if (typeof n !== 'number' || n <= 0 || Math.floor(n) !== n) {
        throw new Error('O argumento fornecido deve ser um número inteiro positivo');
    }

    let fib = [0, 1]; // Os primeiros dois números na sequência de Fibonacci

    for(let i = 2; i <= n; i++) {
        fib[i] = fib[i - 1] + fib[i - 2]; // Calcula o próximo número na sequência
    }

    return fib[n - 1]; // Retorna o n-ésimo número
}

2. Encontre a palavra mais longa

function encontrarPalavraMaisLonga(texto) {

  // Remove pontuação e quebra o texto em palavras

  const palavras = texto.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, "").split(" ");

  let palavraMaisLonga = "";

  // Itera sobre as palavras para encontrar a mais longa

  for (let i = 0; i < palavras.length; i++) {

    const palavraAtual = palavras[i];

    if (palavraAtual.length > palavraMaisLonga.length) {

      palavraMaisLonga = palavraAtual;

    }

  }

  return palavraMaisLonga;

}

// Exemplo de uso

const texto = "O céu é azul e o sol brilha intensamente";

const palavraMaisLonga = encontrarPalavraMaisLonga(texto);

console.log(palavraMaisLonga); // Saída: "intensamente"

Projetos de Javascript para fazer como exercício

Confira, abaixo, alguns dos projetos que a Hora de Codar vai te ensinar a fazer com vídeos! Portanto, visite o nosso canal para ficar por dentro de tudo, ok?

Faça uma To Do List do zero

Uma “to-do list” ou lista de tarefas é uma ferramenta simples e eficaz para organizar e gerenciar as atividades diárias. Ela permite que você anote as tarefas a serem realizadas, priorize-as e marque quando estiverem concluídas.

Com a ajuda do JavaScript, é possível criar uma to-do list interativa do zero. Utilizando conceitos como manipulação do DOM, eventos e funções, é possível adicionar funcionalidades como adicionar, remover e marcar tarefas como concluídas.

Para desenvolver este projeto, será necessário definir a estrutura HTML básica, estilizá-la com CSS e, em seguida, utilizar o JavaScript para manipular a lista de tarefas. Inclua  a captura dos eventos de clique em botões, a atualização do DOM para refletir as alterações e o armazenamento dos dados em uma estrutura adequada, como um array.

Ao criar sua própria to-do list com JavaScript, terá a flexibilidade de personalizar e adaptar a ferramenta de acordo com suas necessidades. Além de ajudar na organização pessoal, é especialmente útil para programadores, permitindo que acompanhem as tarefas relacionadas ao desenvolvimento de projetos, correções de bugs, implementação de novos recursos, entre outros.

Teste de velocidade de digitação

O teste de velocidade de digitação é uma aplicação básica que utiliza os conceitos de HTML, CSS e JavaScript. Através dessa programação, desenvolverá uma ferramenta que mede a velocidade e precisão de digitação do usuário.

Utilizando HTML, cria-se a estrutura básica do teste, como a caixa de texto para digitação e o espaço para exibir o resultado. Com o CSS, estilizará a página, deixando-a mais atrativa e legível para o usuário.

Enquanto isso, o JavaScript é responsável por realizar o cálculo da velocidade de digitação, contar o número de palavras digitadas por minuto e exibir o resultado ao usuário. Também é possível adicionar funcionalidades extras, como a contagem de erros e o tempo decorrido.

A Hora de Codar disponibiliza um vídeo no YouTube que mostra o passo a passo para criar um teste de velocidade de digitação. Esse conteúdo é uma excelente oportunidade para aprimorar os conhecimentos em HTML, CSS e JavaScript, além de proporcionar uma experiência prática na criação de uma aplicação simples.

Contador de caracteres e palavras 

Desenvolver um contador de caracteres e palavras é uma tarefa interessante para colocar em prática os conhecimentos em HTML, JavaScript e CSS. Aqui estão algumas dicas para iniciar esse projeto:

Estrutura básica: Comece criando a estrutura básica do projeto em HTML, definindo os elementos como caixa de texto e área de exibição dos resultados.

Manipulação do texto: Utilize JavaScript para capturar o texto digitado e realizar a contagem de caracteres e palavras. Utilize as funções de manipulação de strings para separar as palavras e contar seus caracteres.

Atualização em tempo real: Utilize eventos em JavaScript para atualizar a contagem de caracteres e palavras conforme o usuário digita. Assim, os resultados serão exibidos em tempo real.

Estilização com CSS: Termine com o CSS para estilizar o contador, tornando-o visualmente atraente e legível.

Disponibilizamos um vídeo em nosso canal no YouTube que ensina passo a passo como desenvolver um contador de caracteres e palavras utilizando HTML, JavaScript e CSS. Esse vídeo é uma ótima oportunidade para praticar os conceitos teóricos aprendidos, além de aprimorar suas habilidades de programação!

Programar um Cronômetro com JavaScript

Programar um cronômetro do zero utilizando JavaScript é uma ótima maneira de praticar seus conhecimentos e explorar os recursos da linguagem. Mas, como fazer isso? Existe alguma dica para começar?

• HTML: Crie a estrutura básica do cronômetro utilizando tags HTML, como divs para exibir os números e botões para controlar o cronômetro.
• CSS: Aplique cores, fontes e animações para deixá-lo mais interessante.
• JavaScript: Utilize JavaScript para criar as funcionalidades do cronômetro. Defina variáveis para controlar o tempo, crie funções para iniciar, pausar e reiniciar o cronômetro, e atualize a exibição dos números de acordo com o tempo decorrido.
• Eventos: Utilize eventos em JavaScript para capturar as interações do usuário, como clicar nos botões de controle do cronômetro.

Comece o seu projeto mesmo com um conhecimento básico, pois o desafio oferece a oportunidade de explorar conceitos mais avançados, como manipulação de datas e temporizadores.

Programar um cronômetro é um exercício prático e divertido para aprimorar suas habilidades de programação em JavaScript. É uma ótima maneira de colocar em prática os conceitos aprendidos e criar algo funcional e que seja útil para alguns tipos de usuários.

Gerador de box shadow com JavaScript

Um gerador de box shadow com JavaScript é uma aplicação que permite criar e visualizar diferentes estilos de sombras para elementos HTML. O box shadow é uma propriedade que adiciona sombras a caixas, botões e outros elementos na página.

Ao criar um gerador de box shadow, estará aprimorando seus conhecimentos em JavaScript, CSS e manipulação do DOM. 

Através da interação com controles deslizantes ou campos de entrada, ajustará os parâmetros da sombra, como o deslocamento horizontal e vertical, o desfoque, a cor e a opacidade. Assim, verá instantaneamente como a sombra se comporta em tempo real.

Além de ser um projeto prático para praticar programação, criar um gerador de box shadow permite explorar os conceitos de manipulação do DOM, eventos, e atualização dinâmica de estilos. Sem contar que conseguirá criar interfaces interessantes e interativas.

Com um gerador de box shadow, experimentará diferentes estilos de sombra, ajustando as configurações para atender às suas necessidades de design. Uma ótima forma de praticar e explorar a criatividade, além de ser uma ferramenta útil para adicionar um toque visualmente atraente aos seus projetos web.

Melhores cursos de Javascript para colocar projetos e exercícios em prática

Você sabia que a Hora de Codar tem os melhores cursos de Javascript do mercado e que podem ser uma excelente forma de colocar em prática os projetos e desafios? Quer saber quais são as principais indicações do dia?

Abaixo, deixamos algumas indicações que vão do básico ao avançado. Olha só!

20+ Projetos de JavaScript – Aprenda HTML, CSS e JavaScript

O curso “20+ Projetos de JavaScript – Aprenda HTML, CSS e JavaScript“ oferecido pela Hora de Codar é uma excelente opção para quem deseja colocar em prática os conhecimentos em JavaScript. 

A formação foi elaborada Matheus Battisti e abrange uma variedade de projetos que permitem aos alunos desenvolver suas habilidades em HTML, CSS e JavaScript.

Durante o curso, terá a oportunidade de criar projetos reais utilizando as principais tecnologias web. O foco principal é dominar os conceitos de DOM (Document Object Model) e desenvolver funcionalidades que são aplicadas no mercado de trabalho. 

Os projetos são estruturados para incentivar os alunos a pensar como desenvolvedores e resolver problemas de forma efetiva utilizando o JavaScript.

As aulas de Javascript abordam a importância de seguir boas práticas de programação, como a escrita de código limpo e de alto desempenho. Habilidades estas que são fundamentais para garantir a qualidade e a eficiência dos projetos desenvolvidos.

O curso é voltado para desenvolvedores, programadores e qualquer pessoa que deseje criar projetos em JavaScript. Também é uma ótima opção para aqueles que desejam aprimorar seus conhecimentos em HTML, CSS e JavaScript.

Para aproveitar ao máximo o curso, é recomendado que os alunos possuam um conhecimento básico em HTML, CSS e JavaScript, além de estar familiarizados com o conceito de DOM.

Ao concluir o curso, os alunos estarão aptos a desenvolver projetos em JavaScript com confiança, aplicando conceitos avançados e seguindo as melhores práticas.

JavaScript do básico ao avançado (c/ Node.js e projetos)

O curso “JavaScript do básico ao avançado (c/ Node.js e projetos)” oferecido pela Hora de Codar é uma oportunidade incrível para aprender tudo sobre JavaScript, desde os conceitos básicos até tópicos avançados. É um sucesso na plataforma Udemy.

Durante o curso, mergulhará em todos os aspectos do JavaScript, incluindo o uso de recursos modernos como o ES6+. A lógica de programação será explorada em detalhes, permitindo que desenvolva habilidades sólidas. 

Além disso, o curso aborda a programação orientada a objetos no JavaScript, um dos pilares fundamentais dessa linguagem.

Aprenderá sobre estruturas de condição, repetição e funções, bem como programação web com Node.js e Express. Essas habilidades permitirão que eles criem aplicativos web completos e dinâmicos usando as tecnologias mais recentes.

Nas aulas, aborda-se a manipulação do DOM (Document Object Model) e a programação de eventos em JavaScript, elementos essenciais para a construção de interfaces interativas e responsivas.

Ao concluir o curso, estará preparado para enfrentar desafios reais de desenvolvimento web usando JavaScript. Terá  uma base sólida nas principais tecnologias e conceitos relacionados a essa linguagem, além de estar familiarizado com o Node.js e suas principais bibliotecas.

Este curso é uma excelente oportunidade para aprimorar suas habilidades em JavaScript e entrar no mundo da programação web de forma abrangente e profissional. Não perca essa chance de impulsionar sua carreira e aprenda com um dos melhores instrutores do mercado.

Desafios de JavaScript – entrevistas e testes técnicos 

O curso “Desafios de JavaScript – entrevistas e testes técnicos” é uma excelente aposta para aqueles que desejam colocar em prática seus conhecimentos em JavaScript e se preparar para enfrentar desafios de entrevistas e testes técnicos. 

Com uma abordagem prática e desafiadora,há uma série de exercícios complexos que ajudarão a aprimorar suas habilidades em JavaScript.

Durante o curso, terá a oportunidade de resolver algoritmos complexos, criar eventos e alterações no HTML por meio do DOM, além de explorar estruturas de controle e repetição em JavaScript. Esses desafios práticos permitirão que desenvolva sua habilidade de resolver problemas e aprimore sua lógica de programação.

Há o ensino de programação assíncrona com JavaScript, um aspecto fundamental para o desenvolvimento de aplicações modernas e interativas. Aprenderá, assim, a como lidar com chamadas assíncronas, promessas e outros conceitos para criar aplicações eficientes e responsivas.

Ao finalizar o curso, estará preparado para enfrentar entrevistas e testes técnicos com confiança. Os exercícios e desafios abordados fornecerão uma base sólida de conhecimento em JavaScript, além de permitirem que aprimore suas habilidades de resolução de problemas, um diferencial para citar naquela entrevista técnica de vaga de emprego!

O curso “Desafios de JavaScript – entrevistas e testes técnicos” é ministrado por Matheus Battisti, fundador da Hora de Codar. Com essa formação, terá a oportunidade de aprimorar suas habilidades em JavaScript e se destacar no mercado de trabalho.

Orientação a Objetos com JavaScript (Projetos e TypeScript)

O curso “Orientação a Objetos com JavaScript (Projetos e TypeScript)” ministrado por Matheus Battisti é uma excelente oportunidade para aprofundar seus conhecimentos em Orientação a Objetos e aplicá-los no desenvolvimento de projetos reais utilizando JavaScript e TypeScript.

Durante o primeiro módulo do curso, será introduzido aos conceitos fundamentais da Orientação a Objetos. Aprenderá o que é Orientação a Objetos, como ela se aplica no mundo real e como é implementada no JavaScript. Também serão abordados aspectos práticos, como o uso do editor de texto VSCode e a execução de JavaScript tanto em arquivo quanto diretamente no navegador.

Além disso, o curso oferece recursos adicionais para maximizar seu aprendizado, como a indicação de livros e dicas de pesquisa de problemas ou dúvidas no Stack Overflow e no Google.

Ao longo do curso, terá a oportunidade de desenvolver projetos práticos, aplicando os conceitos de Orientação a Objetos em cenários reais. Possibilitando, assim, ganhar experiência na utilização desses conceitos e aprimorar todos os conhecimentos como programador.

Ainda, o curso aborda o uso do TypeScript, uma linguagem superset do JavaScript que adiciona recursos de tipagem estática e permite uma codificação mais segura e eficiente.

Com o curso “Orientação a Objetos com JavaScript (Projetos e TypeScript)”, estará preparado para aplicar os princípios da Orientação a Objetos em seus projetos, desenvolvendo código mais estruturado, modular e reutilizável. Essas são habilidades fundamentais para quem deseja se destacar como desenvolvedor JavaScript.

Não perca a oportunidade de aprimorar suas habilidades em Orientação a Objetos e dar um salto na qualidade de seus projetos. Matricule-se pela Udemy e eleve seu nível de desenvolvimento JavaScript para um patamar avançado e profissional.

E então, o que está esperando para conhecer os nossos cursos de Javascript e outros destinados para programadores e desenvolvedores?