Categoria: Exercícios

Publicado em

Exercício fácil: DOM – Escrita

Neste exercício, iremos utilizar os conceitos de escrita no DOM para realizar a alteração de classes em elementos HTML. Será necessário conhecimento básico em leitura do DOM, HTML e CSS.

Exercício:

No arquivo HTML, temos itens com a classe azul e itens com a classe vermelho.

Faça o seguinte:

– inverta as classes (itens com azul terão a classe vermelho e vermelho terão a classe azul).

Utilize o HTML disponível a seguir para realizar o seu exercício:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .azul{
            color: blue;
        }

        .vermelho{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
    </ul>
</body>
</html>

Dica:

  • Use o document.querySelectorAll() para obter uma lista de elementos;
  • Você precisará percorrer os elementos utilizando um laço de repetição;
  • Utilizando uma estrutura de condicionais, verifique as classes;
  • O uso do classList será útil;
  • Realize o seu exercício em um arquivo separado scripts.js e chame-o no seu index.html.
Resolução:
let listaElementos = document.querySelectorAll("li");
        
for (let elemento of listaElementos){
    if(elemento.classList == "azul"){
        elemento.classList.remove("azul");
        elemento.classList.add("vermelho");
    }else {
        elemento.classList.remove("vermelho");
        elemento.classList.add("azul");
    }
}

Gostou deste exercício? Achou fácil ou difícil? Resolveu de outra maneira? Conte para a gente!

Publicado em

Exercício fácil: DOM – Leitura

Neste exercício, armazenaremos elementos HTML em variáveis JavaScript! Para fazer isso, você pode usar o document.getElementById(), document.querySelector(), entre outros.

Exercício:

Crie as seguintes variáveis:

– titulo : conterá a primeira tag h1;

– descricao : conterá a tag com id = descricao;

– listaItens : conterá todas as tags com classe = itens;

Utilize o seguinte HTML como base para o seu exercício:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Titulo</h1>
    <p>subtítulo</p>
    <br/>
    <p id="descricao">Uma lista de itens</p>
    <br/>
    <ul>
        <li>Seus itens</li>
        <ol>
            <li class="itens">Livro</li>
            <li class="itens">Caneta</li>
            <li class="itens">Telefone</li>
            <li class="itens">Carteira</li>
        </ol>
        <li>Outros Itens</li>
        <ol>
            <li>N/A</li>
        </ol>
    </ul>
</body>
</html>
Dicas importantes:
  • Use a conotação (“.elemento”) para capturar por classe;
  • Use a conotação (“#elemento”) para capturar por ID;
  • Crie suas variáveis em um arquivo scripts.js;
  • Chame o seu arquivos scripts.js no seu arquivo index.html.
Confira o seu resultado:
let titulo = document.querySelector("h1");
let descricao = document.querySelector("#descricao");
let listaItens = document.querySelectorAll(".itens");

Gostou deste exercício? Teve dificuldade? Realizou de maneira diferente? Comente abaixo!

Publicado em

Exercício fácil: Multiplicando o Vetor

A função abaixo receberá 2 parâmetros, um vetor com apenas valores numéricos e um número.

Faça com que ela multiplique cada item do vetor pelo segundo parâmetro apenas se o item do vetor for maior que 5. Após isso, ela deve retornar o novo vetor.

Exemplo:

  • calcularVetor([1,5,10, 20], 2) retornará [2, 5, 20, 40] pois só 10 e 20 são maiores que 5.
  • calcularVetor([1,3,4, 5], 10) retornará [1, 3, 4, 5] pois nenhum é maior que 5.
  • calcularVetor([15, 20, 25, 30], 3) retornará [45, 60, 75, 90].

Utilize esta estrutura para realizar o exercício:

function calcularVetor(vetor, numero){
    //Seu código aqui
}

Continue lendo “Exercício fácil: Multiplicando o Vetor”

Publicado em

Exercício Fácil: Do…While

Você pode executar o mesmo código várias vezes usando o loop while.

O loop Do..While executa primeiro o código dentro do loop, para depois executar o “while” com a condição especificada. Veja este exemplo:

let nossoArray = [];
let i = 0;

do {
  nossoArray.push(i);
  i++;
} while (i < 5);

Este loop retornará um vetor com resultado : [0, 1, 2, 3, 4]. Ele difere do loop while normal que possui a condição especificada no início do loop.

Este é um loop while normal que executará enquanto a variável i for menor que 5:

let nossoArray = [];
let i = 0;

while (i < 5){
  nossoArray.push(i);
  i++;
}

Observe que inicializamos o valor de i como 5. Quando executamos a próxima linha, notamos que i não é menor que 5. Portanto, não executamos o código dentro do loop. O resultado disso é que o vetor terminará com nada sendo adicionado a ele, portanto continuará vazio.

Agora, façamos o mesmo com o do…while:

let nossoArray = [];
let i = 5;

do {
  nossoArray.push(i);
  i++;
} while (i < 5);

Nesse caso, inicializamos o valor de i como 5, assim como no exemplo anterior. Quando chegamos à proxima linha, não há verificação do valor de i. Portanto, vamospara o código dentro do loop e executamos. Adicionaremos um elemento ao vetor e incrementaremos antes de chegar à verificação da condição. Então, quando verificamos se i < 5, vemos que agora i é 6, que falha na verificação da condicional. Então, saímos do loop e terminamos. O valor de retorno será [5]. O do…while garante que o código dentro do loop seja executado pelo menos uma vez.

EXERCÍCIO:

Altere o loop while no código para um loop do…while, para que adicione o número 10 para meuVetor e o i será 11 quando seu código finalizar.

REQUISITOS:

  • Você deve usar um loop do…while para este exercício;
  • meuVetor deve ser igual a [10];
  • i deve ser igual a 11.

Você pode visualizar o resultado no código abaixo:

let meuArray = [];
let i = 10;

// Altera o código apartir desta linha
do {
  meuArray.push(i);
  i++;
} while (i < 11) ;

Gostou deste exercício? Digite seu resultado nos comentários!

Publicado em

Exercício Intermediário: multiplicando em FOR aninhado.

Uma tarefa muito comum em JavaScript é percorrer o conteúdo de um vetor. Você pode utilizar o loop FOR para isso. Lembre-se de que os vetores começam com o índice em 0, o que significa que o último elemento do vetor é o comprimento -1.

Se você tem um vetor multidimensional, você pode utilizar a mesma lógica do laço for para percorrer os vetores e os sub-vetores. Este é um exemplo:

let arr = [[1,2], [3,4], [5,6]];
for (let i=0; i < arr.length; i++) {
  for (let j=0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

Este laço de repetição aninhado percorre cada sub-elemento do sub-vetor por vez. Observe que, para percorrer o loop interno, estamos verificando o comprimento de arr[i], visto que arr[i] é, em si, um vetor.

EXERCÍCIO:

Modifique a função multiplicarTudo de modo que multiplique a variável produto por cada número nos sub-vetores do array:

function multiplicarTudo(arr) {
  let produto = 1;
  // Altere o código a partir desta linha

  // Altere o código até esta linha.
  return produto;
}

// Modifique os valores para testar o seu código.
multiplicarTudo ([[1,2],[3,4],[5,6,7]]);

RESULTADOS:

  • A função multiplicarTudo([[1],[2],[3]]) deve retornar 6;
  • A função multiplicarTudo([[1,2],[3,4],[5,6,7]]) deve retornar 5040;
  • A função multiplicarTudo([[5,1],[0.2,4, 0.5],[3,9]]) deve retornar 54;
Publicado em

Exercício Fácil: Soma de itens do vetor

Neste exercício, você terá que somar os valores de um vetor até a metade de seu tamanho e colocar a soma em um índice de um novo vetor.

Faça a soma também dos valores dos itens do vetor após a metade de seu tamanho. Coloque a soma em um índice do novo vetor.

Exemplo:

let vetor = [10, 20, 30, 40, 50, 60, 70, 80, 90];

Neste exemplo, temos um vetor de tamanho 9. Sabemos que a metade de 9 é 4.5, logo, devemos pegar todos os valores contidos em cada elemento que seja menor que a metade do tamanho do vetor. Neste caso, teremos a soma dos valores 10 + 20 + 30 + 40, que resulta em: 100.

O valor obtido, 100, deverá ser inserido na primeira posição de um novo vetor, que deverá ser criado.

let novoVetor = [];

Partindo para a próxima etapa do nosso exercício, devemos realizar a soma dos valores nos elementos restantes. Para isso, você deve realizar a soma dos elementos e inserir o resultado no índice do novo vetor. A soma dos elementos deve ser 50 + 60 + 70 + 80 + 90, que resulta em: 35.

O valor obtido, 350, deverá ser inserido na segunda posição do nosso novo vetor, que foi criado anteriormente.

O seu resultado deverá ser algo parecido como:

novoVetor = [100, 350];

Utilize o console.log() para mostrar o seus resultados.

DICA:

Para chegar no resultado correto, utilize o vetor.length -1 na sua condicional.

Você pode realizar este exercício da maneira que lhe convém, mas aconselhamos a utilizar uma estrutura condicional dentro de seu loop de repetição. Mas nada impede de você utilizar suas próprias maneiras para resolução deste exercício.

Você pode realizar a nossa resolução do exercício abaixo:

let vetor = [10, 20, 30, 40, 50, 60, 70, 80, 90];

let novo = [0, 0];

for (let indice = 0; indice < vetor.length; indice++) {
           
    if (indice < ((vetor.length-1) / 2)){
        novo[0] += vetor[indice];
           
    } else {
        novo[1] += vetor[indice];
    }
            
}
console.log(novo);

Gostou deste exercício? Comente o seu resultado e tire suas dúvidas!

 

Publicado em

Exercício Fácil: Loop em Loop

Exercício 1:

Crie uma função chamada forAninhado() que receberá como parâmetro um vetor. Este vetor deve ter sub-vetores, com valores que variam entre ímpar e par. Com o laço de repetição FOR que irá percorrer este vetor com seus sub-vetores e irá buscar os valores pares. Os valores pares devem ser adicionados em um novo vetor, e você deverá retornar este novo vetor.

Com base neste vetor de exemplo:

let vetor = [[1, 2], [3,4,5,6], [7,8,9,10]]; //Vetor principal

Se colocarmos ele na função:

forAninhado(vetor);

Esperamos o retorno:

[2, 4, 6, 8, 10]; //Novo vetor com os números pares

Lembre-se:

Não use tipos diferentes de vetor, pois não conseguirá dar procedimento no seu exercício.

Com base neste outro vetor de exemplo:

let vetor = [{numero: 2}, [2,8], [1,1,6,2]];

Se colocarmos ele na função:

forAninhado(vetor);

O retorno será:

[2, 8, 6, 2]// O Objeto não será mostrado no vetor.

Também aconselhamos não utilizar somente números ímpares, pois terá em seu retorno algo como:

[]

Exercício 2:

Baseado no código do exercício anterior, some os valores dos sub-vetores e adicione somente os números pares a um novo vetor. Retorne este novo vetor apenas com os números pares.

Com base neste exemplo:

let vetor = [[4,4], [5,2], [7,3]]; //Vetor principal

Se colocarmos ele na função:

forAninhadoPares(vetor);

Esperamos o retorno:

[8, 10]; //Vetor somente com números pares

Faça download dos códigos com as respostas no link abaixo!

[download id=”2836″]

Gostou deste exercício? Comente os seus resultados abaixo!

Publicado em

Exercício Fácil: Validando Triângulos.

Triângulos são polígonos que possuem três lados. Como qualquer outra figura geométrica, os triângulos possuem alguns elementos, que são:

  • Lados: São segmentos de reta que se encontram nas suas extremidades. Todo triângulo é uma figura geométrica que possui três lados. Os triângulos podem ser definidos de três formas diferentes.
  • Vértices: Os vértices são os pontos de encontro entre os lados.
  • Ângulos internos: Na união dos lados de um triângulo, se forma um ângulo. Os triângulos possuem três ângulos internos. Os vértices e os lados destes ângulos são, respectivamente, os vértices e os lados do triângulo.

Neste exercício, você deverá criar uma função para validar se os valores passados como parâmetro formam um triângulo equilátero, escaleno ou isósceles.

Requisitos:

Para realizar este exercício, você deverá ter conhecimento sobre:

  • Condicionais;
  • Comparadores.

Como realizar:

Crie uma função chamada validarForma(). Esta função deverá receber três parâmetros: a, b, c.

Dentro da função, utilizando condicionais e comparadores, verifique se:

  • Todos os lados são iguais, o triângulo será equilátero;
  • Se todos os lados forem diferentes, será escaleno;
  • Se nenhuma das duas condições anteriores for atendida, será isósceles.

Faça o download de uma das possíveis soluções para este exercício:

[download id=”2831″]

Gostou deste exercício? Resolveu de forma diferente? Mostre o seu resultado nos comentários!

Publicado em

Exercício Fácil: Switch

Você conhece a condicional Switch?

Ela serve para avaliar uma expressão. Combinando o valor desta expressão para a utilização de um case, as instruções associadas ao case serão executadas. O switch executa um código de acordo com diversos resultados possíveis. Ele é uma excelente alternativa para a execução de códigos com muitas comparações.

Por exemplo, podemos ter uma média escolar. Temos como dados de entrada a nota média de cada aluno. Dentro do switch, teremos vários cases (casos). Caso a nota for maior ou igual a sete, o aluno estará aprovado. Caso seja entre cinco e sete, o aluno estará em recuperação e se a nota for menor que cinco, o aluno está reprovado. Utilizando este exemplo conceitual, conseguimos aplicar na prática o uso do switch/case.

Sintaxe:

let variavel = valor;

switch (variavel) {
    case valor:
        instrução;
  break;
    default;
  instrução;
}

Onde:

  • variável: é a expressão que será avaliada;
  • valor: condição que deverá ser verificada para execução das instruções;
  • instrução: trecho de código que será executado quando a condição for especificada;
  • break: serve para encerrar a leitura do switch. Sem este comando, o código do case abaixo será executado na sequência.
  • default: executará quando nenhum case corresponder ao valor especificado.

Observação:

O switch compara valores utilizando ===. Portanto, os valores comparados devem ser do mesmo tipo de dado.

Exercício 1:

Crie uma variável chamada “fruta”. Esta variável deve receber uma string com o nome de uma fruta. Após, crie uma estrutura condicional switch que receba esta variável e que possua três casos: caso maçã, retorne no console: “Não vendemos esta fruta aqui”. Caso kiwi, retorne: “Estamos com escassez de kiwis” e caso melancia, retorne: “Aqui está, são 3 reais o quilo”. Teste com estas três opções e verifique o console do seu navegador. Crie também um default, que retornará uma mensagem de erro no console.

Exercício 2:

Um homem decidiu ir à uma revenda comprar um carro. Ele deseja comprar um carro hatch, e a revenda possui, além de carros hatch, sedans, motocicletas e caminhonetes. Utilizando uma estrutura switch/case, caso o comprador queira o hatch, retorne: “Compra efetuada com sucesso”. Nas outras opções, retorne: “Tem certeza que não prefere este modelo?”. Caso seja especificado um modelo que não está disponível, retorne no console: “Não trabalhamos com este tipo de automóvel aqui”.

Resolva estes exercícios para melhor aprendizado!

Gostou deste exercício? Mostre o seu resultado nos comentários!

Publicado em

Exercício fácil: Sequência de Fibonacci

Você conhece a Sequência de Fibonacci?

A Sequência de Fibonacci é uma sucessão de números. Esta sucessão obedece um padrão onde cada elemento subsequente é o resultado da soma dos dois elementos anteriores.

Ela pode ser definida pela seguinte fórmula:

Assim, teremos:

Fibonacci (0) = 0,

Fibonacci (1) = 1,

Fibonacci (2) = Fibonacci (0) + Fibonacci (1) =1,

Fibonacci (3) = Fibonacci (1) + Fibonacci (2) = 2,

Fibonacci (4) = Fibonacci (2) + Fibonacci (3) = 3,

Fibonacci (5) = Fibonacci (3) + Fibonacci (4)= 5,

Fibonacci (5) = Fibonacci (4) + Fibonacci (5) = 8,

E assim, sucessivamente.

Mas onde ela pode ser aplicada?

A Sequência de Fibonacci pode ser aplicada em diversas áreas, como:

  • Análise de mercados financeiros: existem relações entre picos e vales em gráficos de flutuação da bolsa financeira, que tendem a seguir razões numéricas aproximadas com as razões de números da Sequência de Fibonacci.
  • Triângulo de Pascal: os triângulos de Pascal e Pitágoras também se relacionam com a Sequência de Fibonacci.
  • Pintura e Arte: as artes utilizavam-se da Proporção Áurea.
  • Anatomia e Homem Vitruviano: medidas e funcionamento do universo conectadas pela proporção do número de ouro.
  • Entre outras diversas aplicações…

Exercício:

Neste exercício, você deverá reproduzir a Sequência de Fibonacci utilizando um laço de repetição. Utilize o laço For ou o While pra resolver este problema.

function fibonacci(n) {
    if () {
        return;
    }

    for () {
        if () {
            return;
        }
    }
}

Crie um algoritmo que retorne o valor da Sequência de Fibonacci na posição 5, na posição 7 e na posição 13. Você deverá ter um log de saída aproximadamente neste formato:

Gostou deste Exercício? Achou fácil ou difícil? Comente os seus resultados abaixo!

Você pode baixar o código-fonte com o resultado do exercício aqui: [download id=”2730″]