Exercício fácil: Parâmetros em Arrow Function

Explicação:

Uma Arrow Function é uma expressão de função. Foi introduzida no ES6 (que trouxe novas features, incluindo essa nova forma de criar funções, utilizando o =>)

Uma Arrow Function possui uma sintaxe curta e possuem alguns benefícios, por exemplo:

  • O this é definido à partir das funções onde foram definidas, tornando desnecessário o bind();
  • São menos verbosas que as maneiras anteriores de expressar funções.

As Arrow Functions não podem ser usadas como funções construtoras, pois não se pode aplicar o operador new a elas.

Vamos ao Exercício:

Exercício 1:

Declare uma função comum, utilizando uma declaração ou expressão de função. Essa nossa função deverá possuir dois parâmetros (name, lastName). A nossa função deve mostrar no console a seguinte frase: “Olá name lastName, eu sou uma função!”.

Realizada esta parte do exercício, você deverá:

Replicar o exercício anterior, utilizando Arrow Function. Utilize os mesmos parâmetros e retorne no console a mesma frase.

Exercício 2:

Agora, no exercício dois, criaremos uma função chamada descobreDiametro, onde receberemos um parâmetro chamado raio e um parâmetro chamado diametro. Dentro da função, retornaremos o resultado do seu diâmetro.

Realizada a primeira parte do exercício, replique o exercício 2 utilizando Arrow Function.

Não esqueça de mostrar o resultado no console!

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

Entendendo o Prototype

Uma das formas de criar objetos em JavaScript é usando a função construtora (constructor). Mas há um problema em criar objetos com o Constructor, pois ao executar uma função construtora, criando-se objetos, a engine JavaScript cria duas cópias da função construtora, ou seja, todo objeto criado utilizando a função Constructor terá a sua própria cópia de propriedades e métodos. Ou seja, torna-se redundante, pois não há sentido em ter duas instâncias de uma função fazendo a mesma coisa. Por exemplo:

function Humanos(nome, sobrenome){
    this.nome = nome;
    this.sobrenome = sobrenome;
    this.nomeCompleto = function(){
        return this.nome + " " + this.sobrenome;
    }
}


let pessoa1 = new Humanos("João", "Silva");
let pessoa2 = new Humanos("José", "Silveira");
console.log(pessoa1);
console.log(pessoa2);

Utilizando o console.log, verificamos a criação de duas funções nomeCompleto(), e isso resulta em desperdício de memória.

E como resolver isso?

Ao criar uma função, o mecanismo JavaScript adiciona um protótipo (prototype) à função. Essa propriedade é um objeto denominado protótipo de objeto e possui um constructor por padrão. Esse constructor aponta de volta para a função na qual o prototype é uma propriedade. Podemos acessar a propriedade prototype da função usando nomeFuncao.prototype.

No nosso exemplo, a função Humanos possui uma propriedade prototype que aponta para o objeto prototype. O objeto prototype tem uma propriedade constructor e aponta de volta para a função Humanos. Confuso? Vamos verificar isso na nossa imagem:

Para acessar nossa propriedade prototype da função Humanos:

console.log(Humanos.prototype);

E isso nos mostrará que a função possui um objeto prototype com dua propriedades:

  • constructor: aponta para a própria função Humanos;
  • __proto__: propriedade utilizada no conceito de herança.

O Objeto pessoa1 criado usando a função construtora Humanos possui um __proto__ que aponta para o protótipo de objeto da função constructor.

Podemos verificar que o protótipo pessoa1.__proto__ e a propriedade Humanos.prototype são iguais:

Humanos.prototype === pessoa1.__proto__;
//true

Criaremos agora um novo objeto, chamado pessoa 2:

let pessoa2 = new Humanos("José", "Silveira");

Verificaremos que o protótipo pessoa2.__proto__ também é igual a propriedade Humanos.prototype:

Humanos.prototype === pessoa2.__proto__;
//true

E verificamos que a propriedade __proto__ dos dois objetos pessoas são estritamente iguais! Veja só:

pessoa1 === pessoa2;
//false

pessoa1.__proto__ === pessoa2.__proto__;
//true

E isso prova que as propriedades __proto__ de pessoa1 e pessoa2 apontam para o Humanos.prototype que criamos anteriormente!

Como o prototype é um objeto, podemos anexar propriedades e métodos ao objeto protótipo. Assim, permite que os objetos criados usando a função construtora compartilhem essas propriedades e métodos:

Humanos.prototype.nome = "Maria";
console.log(Humanos.prototype.nome);

Humanos.prototype["idade"] = 30;
console.log(Humanos.prototype["idade"]);

console.log(Humanos.prototype);

Você pode ver que as propriedades nome e idade foram adicionadas ao Humanos.prototype!

Quando tentamos acessar uma propriedade de um objeto, o JavaScript primeiro tenta encontrar a propriedade no objeto e, se a propriedade estiver presente no objeto, ele gera o seu valor. Se não estiver, ele tentará encontrar a propriedade no objeto prototype. Se for encontrada, o valor será retornado.

Exemplo:

Primeiro, criaremos uma função construtora vazia:

function Pessoa(){

}

Depois, adicionaremos as propriedades nome, idade e digaOla ao prototype da função Pessoa:

Pessoa.prototype.nome = "Maria";
Pessoa.prototype.idade = 30;
Pessoa.prototype.digaOla = function(){
    console.log(this.nome + " diz Olá para você!");
};

Criaremos um objeto usando a função construtora Pessoa e acessaremos a propriedade nome usando o objeto criado:

let pessoa1 = new Pessoa();
console.log(pessoa1.nome);

E a saída será?

Maria

Gostou deste artigo? Comente abaixo!

Referência: https://medium.com/better-programming/prototypes-in-javascript-5bba2990e04b

Criando Ping Pong com JavaScript parte 3

Na nossa sequência de artigos sobre como criar um jogo Ping Pong utilizando JavaScript puro, já conseguimos renderizar nossa tela de fundo de jogo e adicionar os objetos referentes ao Jogador, ao Computador e à bolinha que serão utilizados para dar vida ao jogo. Caso você não tenha visto as partes 1 e 2 referentes a continuação deste artigo, poderá acessá-las em:

Na última parte desta nossa sequência de artigos, criaremos as animações e adicionaremos os controles, tanto do jogador quanto à IA referente ao computador.

Animação:

Começaremos adicionando o movimento. A animação da bola precisa se direcionar à raquete do jogador. Fazendo isso, alteraremos a função atualizar e adicionar essa atualização na nossa bola, com um incremento:

function atualizar(){
    bolinha.atualizar();
};

Bolinha.prototype.atualizar = function(){
    this.x += this.velocidade_x;
    this.y += this.velocidade_y;
}

As nossas pás estão paradas e precisamos verificar a existência de colisão da bola com as raquetes do jogador e computador. Também precisamos verificar se a bola atingirá as extremidades esquerda e direita do nosso campo de jogo. Também precisamos colocar as raquetes de ambos os jogadores no nosso método de atualização:

let top_x = this.x - 5;
    let top_y = this.y - 5;
    let bottom_x = this.x + 5;
    let bottom_y = this.y + 5;

    // Se bate na extremidade esquerda
    if (this.x - 5 < 0){
        this.x = 5;
        this.velocidade_x = -this.velocidade_x;
    } else if (this.x + 5 > 400){ //Se bate na extremidade direita
        this.x=395;
        this.velocidade_x = -this.velocidade_x;
    }

    //Se tocar no fim do jogo ou no início, ocorre um ponto
    if (this.y < 0 || this.y > 600){
        this.velocidade_x = 0;
        this.velocidade_y = 3;
        // E centralizamos a bolinha novamente
        this.x = 200;
        this.y = 300;
    }

    if (top_y > 300){
        if (top_y < (raquete1.y + raquete1.height) && bottom_y > raquete1.y && top_x < (raquete1.x + raquete1.width) && bottom_x > raquete1.x){
            // Acerta a raquete do jogador
            this.velocidade_y = -3;
            this.velocidade_x += (raquete1.velocidade_x /2);
            this.y += this.velocidade_y;
        }
    }else{
        if(top_y < (raquete2.y + raquete2.height) && bottom_y > raquete2.y && top_x < (raquete2.x + raquete2.width) && bottom_x > raquete2.x){
            // Acerta a raquete do computador
            this.velocidade_y = 3;
            this.velocidade_x += (raquete2.velocidade_x / 2);
            this.y += this.velocidade_y;
        }
    }

Controles:

Agora, criaremos o controle para que o jogador possa mover sua raquete, utilizando um keyDown e um addEventListener para adicionar um evento de pressionar tecla:

let keysDown = {};

window.addEventListener("keydown", function(event){
    keysDown[event.keyCode] = true;
});

window.addEventListener("keyup", function(event){
    delete keysDown[event.keyCode];
})

Agora, podemos atualizar a posição da raquete conforme a tecla for pressionada. Precisamos agora criar um código para mover a raquete ao ser pressionada a tecla:

Jogador.prototype.atualizar = function(){
    for (let key in keysDown) {
        //Captura e pega o número da tecla pressionada
        let valor = Number(key);
        // Tecla seta para esquerda (37)
        if (valor == 37) {
            this.raquete.mover(-4, 0);
        }
        // Tecla seta para direita (39)
          else if (valor == 39) {
            this.raquete.mover(4, 0);
        } else{
            this.raquete.mover(0, 0);
        }
    }
};

Raquete.prototype.mover = function(x, y){
    this.x += x;
    this.y += y;
    this.velocidade_x = x;
    this.velocidade_y = y;
    // Mover tudo para a esquerda
    if(this.x < 0){
        this.x = 0;
        this.velocidade_x = 0;
    }
    // Mover tudo para a direita
      else if (this.x + this.width > 400){
        this.x = 400 - this.width;
        this.velocidade_x = 0;
    }
}

E precisamos atualizar a nossa função atualizar:

function atualizar(){
    jogador.atualizar();
    bolinha.atualizar(jogador.raquete, computador.raquete);
};

Inteligência do Computador:

Já podemos controlar nossa raquete e a bolinha vai ricochetear de acordo com o movimento da raquete, mas ainda não temos movimento no nosso adversário, o computador. Vamos fazer a raquete do computador sempre se posicionar conforme o centro da bolinha. O computador terá velocidade máxima para ele pontuar ocasionalmente:

Computador.prototype.atualizar = function (bolinha){
    let posicao_x = bolinha.x;
    let diferenca = -((this.raquete.x + (this.raquete.width / 2)) - posicao_x);
    // Máxima velocidade para a esquerda
    if (diferenca < 0 && diferenca < -4) {
        diferenca = -5;
    } 
    // Máxima velocidade para a direita  
      else if (diferenca > 0 && diferenca > 4){
        diferenca = 5;
    }
    this.raquete.mover(diferenca, 0);
    if (this.raquete.x < 0){
        this.raquete.x = 0;
    } else if (this.raquete.x + this.raquete.width > 400){
        this.raquete.x = 400 - this.raquete.width;
    }
}

E atualizamos a nossa função atualizar:

function atualizar(){
    jogador.atualizar();
    computador.atualizar(bolinha)
    bolinha.atualizar(jogador.raquete, computador.raquete);
};

Com isso, temos uma réplica do jogo de Ping Pong funcional! Teste no seu navegador!

Gostou desta sequência de artigos? Comente abaixo!

Referências: https://thoughtbot.com/blog/pong-clone-in-javascript

 

Criando Ping Pong com JavaScript parte 2

Na parte 1 do nosso jogo, criamos a tela renderizada onde nosso jogo irá acontecer. Também criamos uma função que renderiza essa tela assim que a nossa página HTML é carregada. Você pode conferir os nossos códigos em:

Na nossa continuação, criaremos as nossas raquetes e a bola a ser utilizada no nosso jogo de Ping Pong. Como sabemos, temos dois jogadores, o Player 1 e o Player 2 (que no nosso jogo, será uma pequena inteligência artificial).

Nossos objetos deverão ser renderizados em tela. Precisamos fornecer uma posição x, y, uma altura e uma largura. Também precisamos criar velocidades para nossa bolinha. Essas velocidades atuarão no eixo X e no eixo Y:

function Raquete(x, y, width, height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.velocidade_x = 0;
    this.velocidade_y = 0;
}

Com nossa função Raquete criada, precisamos renderizar as raquetes agora. Criaremos um objeto protótipo de nossa raquete, utilizando o Prototype. A cor da nossa raquete será preta.

function Raquete(x, y, width, height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.velocidade_x = 0;
    this.velocidade_y = 0;
}

Raquete.prototype.renderizar = function(){
    contexto.fillStyle = "black";
    contexto.fillRect(this.x, this.y, this.width, this.height);
};

Já que cada raquete será controlada de forma independente, vamos criar objetos para representá-las. As coordenadas X e Y são escolhidas para colocar o Jogador na parte inferior, e o Computador na parte superior:

function Jogador(){
    this.raquete = new Raquete(175, 580, 50, 10);
}

function Computador(){
    this.raquete = new Raquete(175, 10, 50, 10);
}

E precisamos criar a função para renderizar o jogador e o computador:

Jogador.prototype.renderizar = function(){
    this.raquete.renderizar();
}

Computador.prototype.renderizar = function(){
    this.raquete.renderizar();
}

E precisamos também criar a bola. Ela será um círculo, com coordenadas x e y que representarão o centro do círculo. Também forneceremos um raio de 5, ou seja, a nossa bolinha terá 10 de diâmetro:

function Bolinha(x, y){
    this.x = x;
    this.y = y;
    this.velocidade_x = 0;
    this.velocidade_y = 3;
    this.radius = 5;
}

Bolinha.prototype.renderizar = function() {
    contexto.beginPath();
    contexto.arc(this.x, this.y, this.radius, 2 * Math.PI, false);
    contexto.fillStyle="white";
    contexto.fill();
};

E agora, vamos construir nossos objetos Jogador, Computador e Bolinha e atualizar a nossa função renderizar():

let jogador = new Jogador();

let computador = new Computador();

//A bolinha será renderizada no centro da tela
let bolinha = new Bolinha(200,300);
let renderizar = function(){
    contexto.fillStyle = "#836FFF";
    contexto.fillRect(0, 0, width, height);
    //Atualizar a partir daqui
    jogador.renderizar();
    computador.renderizar();
    bolinha.renderizar();
}

E a nossa saída será:

Gostou deste artigo? Comente abaixo e acompanhe a sequência!

Referência: https://thoughtbot.com/blog/pong-clone-in-javascript

Criando Ping Pong com JavaScript parte 1

Olá, neste artigo replicaremos o jogo Ping Pong usando JavaScript, utilizando o elemento canvas do HTML.

Mostraremos a facilidade de criar um jogo simples e que utiliza uma certa inteligência artificial para replicar o jogo Ping Pong, utilizando a máquina como adversário. Para isso, utilizaremos JavaScript puro para criar os elementos do jogo e suas ações. O canvas renderizará o jogo.

Vamos começar!

Para começar, precisamos de um arquivo chamado index.html, e chamaremos o arquivo scripts.js que será o responsável pelas ações do jogo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ping Pong</title>
    <script src="scripts.js"></script>
</head>
<body>
</body>
</html>

E no nosso scripts.js, começaremos adicionando o método requestAnimationFrame. Ele funciona de maneira semelhante ao método setTimeout, trazendo uma chamada de retorno a aproximadamente 60 frames por segundo. Ele torna-se melhor que o método setTimeout pois o navegador pode realizar otimizações na chamada. Mas, caso não haja suporte, utilizaremos o método setTimeout para realizar este retorno de 60 fps.

let animacao = window.requestAnimationFrame || function(callback){
    window.setTimeout(callback, 1000/60);
}

Renderizando:

Agora, criaremos nosso elemento canvas dinamicamente com JavaScipt. Utilizaremos uma altura de 600 e largura de 400. Este será o tamanho de nossa tela de jogo. Também utilizaremos o contexto, que será “2d”:

let canvas = document.createElement("canvas");
let width = 400;
let height = 600;
canvas.width = width;
canvas.height = height;
let contexto = canvas.getContext("2d");

E quando a página for carregada, anexaremos o nosso elemento canvas ao body do HTML e usaremos o método animacao, criado anteriormente, chamando uma função chamada step.

window.onload = function(){
    document.body.appendChild(canvas);
    animacao(step);
};

A função step será responsável por realizar três coisas:

  • Atualizar todos os objetos;
  • Renderizar os objetos;
  • Utilizar a recursão, chamando a função step novamente.
let step = function(){
    atualizar();
    renderizar();
    animacao(step);
};

Para começar exibindo algo na tela, vamos implementar a função atualizar como não operacional, e na nossa função renderizar, vamos definir o plano de fundo do nosso jogo, e utilizaremos os métodos fillStyle e fillRect que são fornecidos pelo contexto. A cor definida é o SlateBlue, com código hexadecimal #836FFF.

let renderizar = function(){
    contexto.fillStyle = "#836FFF";
    contexto.fillRect(0, 0, width, height);
}

E nossa saída será algo assim:

Gostou deste artigo? Comente abaixo e aguarde a sequência!

Referências: https://thoughtbot.com/blog/pong-clone-in-javascript

Exercício fácil – recursão com JavaScript

Neste exercício, veremos antes uma função que utiliza recursão. Essa função retorna um array de números inteiros começando com 1 pelo número passado para a função.

Teremos um exemplo para você tirar uma base de como resolver o exercício.

No nosso caso base, a função recursiva não precisa mais se chamar, sendo um caso simples em que o valor de retorno já é conhecido. Também haverá uma chamada recursiva que executa a função original com os argumentos diferentes.

No nosso exemplo base, temos uma função recursiva que retorna um vetor que contém os números de 1 a n. Então, se passarmos um valor n, ele deverá adicionar valores ao vetor até chegar a esse valor. Por exemplo: n = 10. O vetor resultante deverá ser [1, 2, 3, 4, 5, 6, 7, 8, 9, 10}. Se o valor de n for menor que 1, retornará um vetor vazio:

function contador (n){
    if (n < 1){
        return [];
    } else {
        let contadorArray = contador (n - 1);
        contadorArray.push(n);
        return contadorArray;
    }
}

console.log(contador(20));
/* [
   1,  2,  3,  4,  5,  6,  7,
   8,  9, 10, 11, 12, 13, 14,
  15, 16, 17, 18, 19, 20
] */

No começo, isso parece contra-intuitivo, com o valor de n diminuindo, mas os valores do vetor aumentando. Isso acontece pois o envio ocorre por último, após o retorno da chamada recursiva. Quando n é inserido, a contagem (n-1) já foi avaliada e retornada [1, 2, …, n-1].

Vamos ao exercício:

No nosso exercício, utilizaremos a recursão para retornar um array que contém os números inteiros que vão de n a 1, com base no parâmetro n. Se n for menor que 1, retorna um array vazio, senão, retorna os valores de n a 1. Exemplo:

n = 10;

[10, 9, 8, 7, 6, 5, 4, 3, 2, 1].

Use o exemplo anterior como base para este exercício. Não use o método push!

Você pode realizar o download da resolução deste exercício aqui:

[download id=”3715″]

Como quebrar um vetor grande em vários menores

Neste artigo veremos duas funções que leem um vetor e devolvem um outro dividido em pedaços menores. O exemplo será bem simples pois a aplicação é a mesma para 5 o para 5 bilhões de registros. 

A primeira função será genérica e você provavelmente poderá utilizá-la em outras linguagens com pouca ou nenhuma adaptação. Já a segunda é utilizando mais das funções do JavaScript para reduzir o código

Em resumo queremos que um vetor linear seja quebrado em vários pequenos vetores. No meu caso, eu precisava que uma lista de contatos fosse quebrada em diversas listas menores para facilitar o controle e atualização das mesmas.

Iremos de algo assim:

let vetor = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

Para algo assim:

let vetor = [[0, 1, 2], 
             [3, 4, 5], 
             [6, 7, 8], 
             [9, 10, 11], 
             [12, 13, 14], 
             [15, 16]];

Como podemos fazer isso? Bom, a primeira forma é a seguinte:

Algoritmo Genérico

  1. Criar a função e inicializar as variáveis. Observe que novoVetor é um vetor com um vetor vazio dentro dele.
    function converterVetor(vetor, tamanho) {
        let novoVetor = [[]];
        let novoIndice = 0;
        let novoIndiceSub = 0;
    }
  2. Criar um laço FOR para adicionar os elementos no novoVetor. Observe que:
    1. Precisamos de um IF para testar a hora de avançar de um sub-vetor para outro.
    2. Dentro deste IF é necessário criar um vetor em branco para que o Javascript saiba o tipo do dado.
    3. No final, você está adicionando o valor dentro de um vetor que está dentro de outro vetor, então é preciso usar [x][y] para adicionar na posição correta.
    for(let indice = 0; indice < vetor.length; indice++){
    
        if(indice % tamanho == 0 && indice != 0){
            novoIndice++;
            novoVetor[novoIndice] = [];
            novoIndiceSub = 0;
        }
    
        novoVetor[novoIndice][novoIndiceSub] = vetor[indice];
        novoIndiceSub++;
    }
  3. Por ultimo, basta retornar o resultado. Veja abaixo o código completo.
    function converterVetor(vetor, tamanho) {
        let novoVetor = [[]];
        let novoIndice = 0;
        let novoIndiceSub = 0;
    
    
        for (let indice = 0; indice < vetor.length; indice++) {
    
            if (indice % tamanho == 0 && indice != 0) {
                novoIndice++;
                novoVetor[novoIndice] = [];
                novoIndiceSub = 0;
            }
    
            novoVetor[novoIndice][novoIndiceSub] = vetor[indice];
            novoIndiceSub++;
        }
    
        return novoVetor;
    }

Usando mais recursos JavaScript

Agora vejamos a mesma função, mas usando mais recursos JavaScript para reduzir um pouco o trabalho.

  1. Iniciaremos de forma muito parecida, mas precisaremos de uma variável a menos
    function converterVetor2(vetor, tamanho) {
        let index = 0;
        let novoVetor = [];
    }
  2. Agora faremos o loop for, mas ao invés de percorremos o loop original de 1 em 1, percorreremos o tamanho que já queremos colocar no sub-vetor.
    1. Dentro do loop, usaremos a função slice() que nos retornará um pedaço do vetor. Sendo ele o tamanho exato do sub-vetor.
    2. Após, adicionamos o subVetor ao novo com o método push() que adiciona um elemento na ultima posição.
    for (index = 0; index < vetor.length; index += tamanho) {
        let subVetor = vetor.slice(index, index + tamanho);
        novoVetor.push(subVetor);
    }
  3. Pronto!! Basta retornar o objeto com o resultado. Segue abaixo o código completo.
    function converterVetor2(vetor, tamanho) {
        let index = 0;
        let novoVetor = [];
    
        for (index = 0; index < vetor.length; index += tamanho) {
            let subVetor = vetor.slice(index, index + tamanho);
            novoVetor.push(subVetor);
        }
    
        return novoVetor;
    }

Conclusão

Como você pode ver, o segundo formato é um pouco menos detalhado, mas utilizando os recursos do JavaScript é possível escrever menos código que ainda é fácil de entender. Por isso que, quando você estuda uma linguagem, é importante conhecer as funções nativas e formas mais inteligentes de trabalhar com seus objetos.

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!

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!

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!