Categoria: Exercícios

Publicado em

Exercício fácil: Unindo Arrays em JavaScript

Você sabe o que é um array?

Arrays são objetos semelhantes a listas. O tamanho de um array pode ser alterado a qualquer momento e os dados podem ser armazenados em posições não necessariamente seguindo uma ordem contínua. Eles possuem índices, que devem ser em números inteiros. Utilizando a notação de colchetes, você pode acessar ou definir os valores dos elementos dentro do array.

União de Arrays:

Requisitos:

Existem várias maneiras de adicionar novos elementos à um vetor em JavaScript. Neste exercício, serão utilizados as funções concat() e push().

Concat: Cria um novo array contendo uma cópia de si e dos argumentos passados.

arr.concat(valor1, valor2, ..., valorN)

// Onde: arr é o vetor que será concatenado
// Concat: função de concatenação
// Valores: argumentos

Push: Adiciona um ou mais elementos ao final do array e retorna o comprimento deste array.

arr.push(elemento1, ..., elementoN)

// Onde: arr é o vetor que será utilizado
// Push: função push para inserção de elementos no vetor
// Elementos: Argumentos/Elementos que serão inseridos no vetor

Para descobrir outras funções de união de vetores, acesse o artigo a seguir: Adicionando elementos em uma lista array JavaScript

Exercício:

Parte 1:

Crie três vetores, chamados vetorInteiro, vetorString e vetorDouble. Cada um destes vetores deverá conter quatro valores, sendo o primeiro com valores inteiros, o segundo com strings e o terceiro com valores decimais.

Declarados os vetores, utilize a função de união concat() de duas maneiras diferentes para unir os vetores, e mostre o resultado no console. Todos os elementos do vetor resultado deverão aparecer no console.

Se você não sabe quais são os modos de usar a função concat, acesse este artigo para descobrir: Duas maneiras de unir vetores em JavaScript

Parte 2:

Crie dois vetores chamados vetorPilha e vetorAdiciona. Utilize o método Push para adicionar elementos do vetorAdiciona ao vetorPilha. Inicialmente, o vetorPilha conterá cinco elementos inteiros: [1, 2, 3, 4, 5]. Você deverá adicionar os valores contidos no vetorAdiciona [6, 7, 8, 9,10] e mostrá-los no console. É importante lembrar que o método Push retorna somente o tamanho do Vetor, então, justifique por quê motivo isso acontece e imprima no console o vetor com os elementos adicionados.

Você pode fazer o download das respostas destes exercícios aqui: [download id=”2547″]

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

 

Publicado em

Exercício fácil – função setInterval()

Você sabe utilizar o temporizador setInterval?

O setInterval é uma função temporizadora do JavaScript. Ela é utilizada para executar uma função de retorno após um determinado tempo a ser estipulado. É uma função que executará infinitamente na sua página, a menos que você estipule uma função de pausa, chamada clearInterval() ou que você feche a página. É uma função que deve ser utilizada com cuidado pois, se uma pausa não for estipulada, poderá levar a uma sobrecarga de memória e causar travamento e lentidão na sua página web.

Requisitos:

para este exerício, será necessário conhecimento das funções setInterval e clearInterval. Caso você ainda não tenha lido o artigo sobre como utilizar o setInterval e o clearInteval, acesse o link: Como usar o setInterval

Exercício:

Utilizando os seus conhecimentos em JavaScript e temporizadores, crie uma função que utilize o temporizador setInterval() e o clearInterval() para criar um loop que exiba a mensagem “Este é um exemplo de contador, estamos no número:  x“.

Onde:  X é o número atual no contador.

Observação:

Esta mensagem deverá aparecer no console vinte vezes e a cada três segundos, ou seja, o contador também deverá aumentar um número a cada três segundos.

PARTE 1:

Você deverá criar duas variáveis. Crie uma variável para o contador e uma variável para o limite, que servirá para estipular um limite de contagem:

// Crie as variáveis para o contador e limite
// respectivamente. Elas servirão para estipular
// a quantidade de vezes que a mensagem será exibida
let contador;
let limite;

PARTE 2:

Crie uma variável para o temporizador. Esta variável irá receber a função setInterval() e, dentro da função setInterval(), você deverá criar uma condicional que irá estipular quando a função clearInterval() será utilizada.

// Criando uma variável para o temporizador, use a função
// setInterval, para definir o tempo que levará para a 
// mensagem ser exibida.
let timer = setInterval(function(){
    // Dentro da função, estipule um clearInterval
    // que deverá ser executada quando o contador chegar ao limite
    // Para isso, utilize uma estrutura condicional
    if (){
        clearInterval();
    }
})

Resolução:

O seu console.log ficará assim:

Gostou deste exercício? Conseguiu resolvê-lo facilmente? Deixe o seu comentário abaixo!

Publicado em

Exercício Fácil – Evento com addEventListener()

O que são Eventos?

Eventos são ações que ocorrem em um sistema, resultando em interações que deixam as páginas web mais interessantes. Neste exercício, você deverá criar uma div com dois campos em HTML, chamados A e B, um botão chamado SOMAR, criando também uma função em JavaScript para somá-los. Utilizando o addEventListener, você deverá salvar os números assim que forem pressionados, utilizando-se da função “click”.

Requisitos:

Para este exercício, será necessário conhecimentos em Funções e Eventos.

Exercício:

Com base neste código HTML, crie a função soma e o evento addEventListener que irá receber os valores dos campos “inputValorA” e “inputValorB”.

Utilize este código HTML como base para realização do seu exercício:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Exercicio Eventos</title>
</head>

<body>
    <div id="calculo">
        <!-- Crie os dois campos chamados "inputValorA" e "inputValorB" -->
        <fieldset>
            <label for="inputValorA">Valor de A:</label>
            <input id="inputValorA" type="number" placeholder="Digite o valor de A:">
        </fieldset>
        <fieldset>
            <label for="inputValorB">Valor de B:</label>
            <input id="inputValorB" type="number" placeholder="Digite o valor de B:">
        </fieldset>

        <!-- Criar um botão chamado SOMA -->
        <button class="calculo" type="submit">Somar</button>
    </div>
    <script>
    </script>
</body>

</html>

PARTE 1:

Crie uma função que retorne o somatório dos valores digitados pelo usuário nos campos de formulário.

Caso precise de ajuda, acesse este exercício sobre funções: Exercicio fácil: Funções como Parâmetro/

Protótipo da Função Soma:

// Esta função irá retornar o somatório
// dos valores A e B recebidos nos campos do HTML
function soma(a, b) {
    
    console.log(soma);
}

Parâmetros:

A função deverá receber dois parâmetros, A e B.

Valor de retorno:

A função deverá imprimir no console o somatório dos valores A e B.

PARTE 2:

Crie um evento que receba os valores que foram digitados nos campos “inputValorA” e “inputValorB”. Para isto, você deverá criar uma variável chamada botaoCalculo e utilizar o document.querySelector para selecionar a classe do botão(“.calculo”).

Caso precise de ajuda em eventos, acesse este link e confira o artigo Eventos no JavScript: Eventos no JavaScript

Logo após, deverá criar uma função addEventListener que irá receber os valores digitados.

Realizados estes procedimentos, efetuar a chamada da função soma, que irá retornar o somatório no console.

// Cria-se uma variável para buscar o elemento cálculo
// e após isso, crie um addEventListener para receber os valores dos inputs do HTML
let botaoCalculo = document.querySelector(".calculo");
variavel.addEventListener("click", function (evt) {
    
    let a = // Atribua o valor digitado no inputValorA no formato inteiro
    let b = // Atribua o valor digitado no inputValorB no formato inteiro
    
    // Realize a chamada da função soma, passando como parâmetros A e B
    soma();
})

Resolução:

O seu console.log ficará assim: