Tag: 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

JavaScript Básico: Break e Continue

 

Você já conhece o break e continue e suas utilidades? Conheça neste artigo:

BREAK:

O comando “break” serve para encerrar a leitura. O break é um comando que podemos utilizar quando queremos parar/encerrar o laço de repetição na hora. A instrução break interrompe o laço e continua executando o código após o loop (se houver).

Exemplo:

let carros = ["BMW", "Volvo", "Saab", "Ford"];

list: {
    console.log(carros[0]);
    console.log(carros[1]);
    break list;
    console.log(carros[2]);
    console.log(carros[3]);
}

CONTINUE:

Com este comando, é possível iniciar a próxima repetição do loop. A instrução continue interrompe uma iteração (no laço de repetição), se uma condição específica ocorrer, e continua com a próxima iteração no laço de repetição.

for (let i = 1; i < 10; i++) {
    if (i === 3) {
        continue;
    }
    console.log("O número atual é: " + i);
}

Com a instrução continue, você poderá utilizá-la para apenas ignorar  uma iteração de loop.

A instrução break pode ser utilizada para pular de um loop ou de um switch. Ela pode ser usada para pular qualquer bloco de código.

Exercício 1:

Crie um laço de repetição FOR. Este laço deverá começar a iterar no número 1. Enquanto o índice for menor que 10, o laço deverá continuar iterando.

Com o laço criado, cria um estrutura condicional que, utilizando o comando break, pare a iteração quando ela alcançar o valor 5. Caso esta condição seja atendida, mostre os números utilizando o console.log.

Exercício 2:

Crie um vetor que contenha os seguintes nomes: “André”, “Ana Paula”, “Júlio”, “Marcela”, “Rubem”. Utilize o laço de repetição FOR para percorrer esta lista. Quando a leitura for igual a “Júlio”, utilize o comando continue. Ele irá exibir todos os outros nomes deste vetor. Utilize o console.log para logar os dados no console.

Gostou deste artigo? Comente abaixo!

Publicado em

JavaScript Básico: While

 

É um loop que funciona de forma bem simples. Chamado de “enquanto” (while) a condição for verdadeira (true), o código será executado. Fazendo isso, você cria um laço de repetição que irá executar para cada vez que a condição for verdadeira.

A Sintaxe do While:

while (condição){
    rotina;
}
Onde:
  • condição: é uma expressão que vai ser avaliada antes de cada vez que o laço for executado. Se a condição for verdadeira, a rotina será executada. Quando a condição for avaliada como falsa, a execução continuará na declaração que vem depois do laço while.
  • rotina: é uma declaração que será executada quando/enquanto a condição for avaliada como verdadeira.

Por exemplo:

// Variavel numero que recebe o valor numérico 10
let número = 10;

// Enquanto o número for menor que 100
while (numero < 100){
    // Irá mostrar o valor acrescentando 1 até que se alcance o total
    console.log("valor:" + numero);
     numero++;
}

Você precisará fornecer uma forma para que o loop termine, caso contrário terá um loop infinito.

let número = 10;

// Enquanto o número for menor que 100
while (numero < 100){
    let valor = 0;
    console.log("valor:" + valor);
    valor = valor + 2;
}

Exercício 1:

Crie um laço while que irá iterar enquanto n for menor ou igual a 5. Mostre no console os valores obtidos.

Dica:

Para realizar este exercício, crie uma variável n que receberá o valor zero. Crie o laço de repetição while que irá ter a condição n menor ou igual a 5. Coloque a rotina a ser seguida dentro do laço de repetição.

 

Exercício 2:

Crie um vetor chamado carros. Este vetor irá conter os valores “Gol”, “Uno”, “S10”, “Kadett”. Você também precisa criar uma variável que será o índice para percorrer este laço de repetição. No seu laço de repetição while, utilize o console.log para mostrar todos os nomes dos carros que estão contidos no seu vetor.

 

Gostou deste artigo? Comente abaixo os seus resultados e tire as suas dúvidas!

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

JavaScript Básico: For

Você sabe utilizar o laço de repetição FOR em JavaScript?

O For é um dos laços de repetições que tem a função de executar uma instrução “x” determinada quantia de vezes. Com ele, podemos:

  • Percorrer listas inteiras
  • Acessar e alterar valores nestas listas
  • Descobrir o valor e índice de cada elemento contido nas listas
  • Entre outras funções.

Existem vários tipos de laços de repetição, mas eles realizam a mesma coisa: repetir uma determinada ação. Neste artigo veremos exclusivamente o laço FOR.

O laço FOR é repetido até que uma condição seja especificada. Por exemplo:

Iniciar a contagem de elementos de um vetor, começando no índice zero até o último índice (este vetor contém um total 5 índices):

let vetor = [0, 1, 2, 3, 4];
for (let indice = 0; indice <= 4; indice++){
    console.log(vetor[indice]);
}
// 1
// 2
// 3
// 4

Sintaxe:

for ([inicialização]; [condição]; [expressão final]){
    declaração;
}

Onde:

  • Inicialização: é uma expressão ou declaração de variáveis. É usada para iniciar o contador de variáveis.
  • Condição: é a expressão que será avaliada antes da iteração do loop. Se esta expressão for TRUE, a declaração será executada. É um teste de condição. Enquanto a condição for atendida, o seu código será executado.
  • Expressão final: é validada ao final de cada iteração que acontece no laço FOR. Utilizada para incrementar ou atualizar a variável. Um exemplo prático é a varredura de elementos que vimos no exemplo acima.
  • Declaração: é o trecho de código que será executado caso a condição seja verdadeira.

Exercício 1:

Crie um algoritmo usando o for que leia uma lista. Mostre no console apenas os números pares. Esta lista deve ser assim: [1, 2, 3, 4, 5, 6, 7, 8, 9];

Exercício 2:

Utilizando a lista do exercício anterior, crie um algoritmo que mostre de maneira decrescente os elementos desta lista.

Resolva estes exercícios para melhor aprendizado!

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