JavaScript 0 - Exercícios

Exercício 0.1: Entendendo a saída de testes

Nesta atividade de JavaScript, vamos apresentar os resultados de cada exercício usando uma função criada pelos professores chamada escreva(...). Ela mostra na página web o valor de uma determinada variável, com um determinado rótulo (descrição) para identificá-la. Assim, essa função recebe como parâmetros: 1) o número do exercício, 2) o rótulo (que é uma descrição da variável) e 3) o valor da variável. Por exemplo, ela pode ser invocada assim:

function algumaFuncaoMinha() {
    // ...
    // ...
    // ...
    let senhaWiFi = 'scientiasalvet';
    // ...
    // ...
    // chamando função 'escreva(...)'
    // ^
    // --------------------------------------------------------
    escreva(1, 'A senha do WiFi na casa do Coutinho', senhaWiFi);
    //      -  -------------------------------------  ---------
    //      ^ nº exercício   ^ rótulo (descrição)     ^ variável
    // ...
    // ...
}

Veja, no arquivo ex-unidade1.js, na função testeSaidas, como a função escreva(...) foi chamada para imprimir a variável a. Ao invocar a função para escrever, ela aparecerá na caixa de saída (região logo abaixo). Note que a função está apenas implementada mas ainda não foi invocada (chamada). Você pode invocá-la no próprio arquivo (ex-unidade1.js). Assim que invocá-la, o valor da variável será mostrado na caixa de saída logo abaixo . Então, invoque-a agora dentro de ex-unidade1.js e veja se aparece na saída o valor da variável a. Para verificar se ocorreu algum erro de sintaxe (escrita) no seu código, pressione F12 e o erro aparecerá na aba de console.

Neste exercício 0.1, você deverá continuar a implementação da função testeSaidas. Nela, você deverá chamar a função escreva mais vezes para imprimir as variáveis (i) b, (ii) a soma das variáveis a e b, (iii) d, (iv) e, da mesma forma que foi impressa a variável a. Logo após, escreva seu nome por meio da função escrevaMensagem - veja como ela foi usada no início do código da função testeSaidas.

Exercício 0.2: Função soma

No arquivo ex-unidade1.js, crie uma função chamada soma que recebe dois números como parâmetros, escreve na saída abaixo (ou seja, chama escreva(...)) a soma desses dois números e, por fim, retorna o resultado para quem invocou a função. Ao invocar escreva(...), use como rótulo (2º argumento) o texto soma. Você pode querer criar uma variável (mas dá para resolver sem criar também). Por fim, invoque a função criada soma(...) para os números 5 e -2.

Exercício 0.3: Fazendo cálculos matemáticos

Implemente no arquivo ex-unidade1.js uma função com nome calculaValoresDoNumero, que recebe como parâmetro um número qualquer e escreve: i) o quadrado deste número, ii) a sua metade e iii) a sua raiz quadrada usando os rótulos quadrado, metade e raiz, respectivamente. Faça o teste invocando esta função (calculaValoresDoNumero(...)) para, pelo menos, dois números diferentes.

Exercício 0.4: Entendedo o for of e "para cada"

Continue a implementação da função contandoElementosDoVetor no arquivo ex-unidade2.js. Essa função recebe como parâmetro o vetor elementos e um elementoSendoProcurado e deverá usar o for of ou o for each para contar quantas vezes que o elementoSendoProcurado apareceu no vetor elementos. Essa quantidade deve ser retornada pela função.

Para verificar se o elemento atual do vetor é igual ao elementoSendoProcurado, você pode querer usar um if/else.

Teste a função invocando-a tanto para vetores de strings quanto de numbers:

contandoElementosDoVetor([1, 5, 5], 5);                  // retorna 2
contandoElementosDoVetor(['daniel', 'flávio'], 'joão');  // retorna 0

Exercício 0.5: Nome do mês dado seu número

Na função obtemNomeDoMes do arquivo ex-unidade2.js, substitua as palavras null pelos valores corretos para terminar de implementá-la. Ela recebe como parâmetro o número do mês (de 1 a 12) e deve retornar seu nome. Lembre-se de como pegar o i-ésimo elemento de um vetor. Essa função também deve verificar se o número recebido é um mês válido, ou retornar null (lembre-se de if/else).

Neste exercício, você não deve alterar o vetor meses. Apenas altere os trechos do código onde está escrito null para valores que façam sentido para o código executar corretamente. Faça o teste para meses válidos e inválidos (ex: -1, 0, 13). Iremos usar esta função em outro exercício e, por isso, você deverá escrever o mês resultante do lado de fora da função usando seu retorno.

Exercício 0.6: Métodos úteis dos vetores

Implemente a função metodosVetor no arquivo ex-unidade3.js, que recebe como parâmetro um vetor e retorna o próprio vetor mas com as seguintes modificações:

Ordene o vetor de forma crescente;
Remova o último elemento do vetor (já ordenado);
Insira a palava "abacate" no início do vetor;
Escreva o vetor resultante na saída deste exercício.

Faça o teste abaixo invocando esta função 2 vezes com vetores de tamanho diferentes que contenham números ([4, 0, 9] ) ou então strings.

Note que...

A função vetor.sort() sem a função passada como parâmetro converte números para strings e só então compara. Sendo assim, [1, 2, 3, 100].sort() resultaria em [1, 100, 2, 3]. Para este exercício, não é necessário se preocupar com isso.

Exercício 0.7: Métodos úteis de string

Implemente no arquivo ex-unidade3.js a função metodosString que recebe como parâmetro uma string qualquer e deve fazer as seguintes transformações:

Deixá-la toda em maiúsculas;
Substituir todas as letras "o" por "a";
Escreva o resultado na saída deste exercício.

Veja a documentação e 🌐 os slides, se necessário. Em particular, a função texto.replaceAll poderá ajudar. Faça o teste invocando a função algumas vezes para diferentes palavras.

Note que...

Diferente dos métodos de vetores, que alteram o próprio vetor, os métodos das strings não alteram a própria string, mas sim retornam uma nova string com o resultado. Ou seja, o código a seguir não está alterando o valor da variável:

let pessoa = 'Dança';
pessoa.toUpperCase(); // retorna 'DANÇA'

console.log(pessoa);  // imprime 'Dança'

...mas este aqui está atualizando para onde a variável aponta:

let pessoa = 'Dança';
pessoa = pessoa.toUpperCase(); // retorna 'DANÇA'

console.log(pessoa);  // imprime 'DANÇA'

Exercício 8: Rede Social

Você irá fazer uma rede social por meio de um vetor de pessoas e matriz amizades, similar ao apresentado abaixo:

pessoas:

0	1	2	3
'Alice'	'Bob'	'Carol'	'Daniele'

amizades:

	0	1	2	3
0	0	0	0	1
1	1	0	1	1
2	0	0	0	1
3	1	1	0	0

em que, na matriz amizades, cada linha e coluna correspondem a pessoas que podem manter uma relação de amizade entre si. Além disso, a pessoa da i-ésima linha (e coluna) corresponde a mesma pessoa na posição i no vetor pessoas. Por exemplo, a pessoa na linha 0 (e coluna 0) é a Alice, da mesma forma, a pessoa na linha e coluna 2 é a Carol.

Nesta matriz o valor é 1 caso uma pessoa, representada na linha, é amiga da pessoa representada pela coluna. Por exemplo, Alice é amiga apenas de Danielle (veja a linha 0). Nesta rede social (assim como na vida 💁) pode ocorrer falta de reciprocidade entre as amizades, por exemplo: Bob é amigo de Alice mas Alice não é amiga de Bob.

Neste exercício você deverá fazer duas funções e testá-las por meio da matriz e vetor acima (e outro que desejar):

exibeAmigos: por meio do vetor pessoas, da matriz amizades e do nome de uma pessoa (passado como parametro nessa ordem), exibe os amigos dessa pessoa. Você deverá armazenar esta lista de amigos em um vetor e chamar a função escreva para exbir a saída neste vetor.
exibeAmigosEmComum: por meio do vetor pessoas, da matriz amizades e do nome de uma pessoa X e uma pessoa Y (passados como parametro nessa ordem), exibe os amigos entre essas duas pessoas. Você deve armazenar essa lista de amigos em comum em um vetor e chamar a função escreva para exbir a saída desse vetor.

Faça a exibição dessas saídas de tal forma que fique claro de qual entrada é a saída apresentada (use a função escrevaMensagem). A função obtemPosicaoDoElemento implementada anteriormente poderá ajudar (reutilize-a -- não implemente novamente).

Exercício 10: Operações em string

Neste exercício, você deve continuar a implementação das três funções que auxiliarão no próximo exercício a seguir. Como elas serão utilizadas no próximo exercício, utilize a função escreva fora das funções a serem implementadas.

eliminaCaracteres (2 parâmetros): Elimina todas as ocorrências dos caracteres especificados de um texto.; Tanto o texto quanto os caracteres a serem removidos devem ser passados como parâmetros.; Por exemplo, eliminaCaracteres('correndo contra o tempo', 'coe') deve resultar na string 'rrnd ntra tmp'. Você não deve alterar o for já criado.; Use a função texto.replaceAll para auxiliar.; Lembre-se que você pode acessar posições de uma string como se fosse um vetor. Por exemplo, texto[2] acessa a letra de posição 2 desta string.; Dica: será necessário usar texto.replaceAll uma vez para cada caractere especificado (ou seja, dentro de um laço).; Dica 2: eliminar um caractere é equivalente a substituí-lo por '' (string vazia).
substituaCaracteres (3 parâmetros): Dado um texto, uma string de procura e uma string de reposição, sendo que a string de procura e reposição são de mesmo tamanho, substitua no texto o caractere na posição i da string de procura pelo caractere na mesma posição i na string de reposição.; O texto, os caracteres a serem procurados no texto e os caracteres a serem colocados no lugar serão passados como parâmetro.; Exemplo: substituiCaracteres('o sapo nao lava o pe', 'aoe', 'iiu') deve resultar em 'i sipi nii livi i pu'; Dica: será necessário usar texto.replaceAll uma vez para cada caractere especificado (ou seja, dentro de um laço).
inverteTexto (1 parâmetro): Dado um texto, retorna o mesmo de forma invertida; Exemplo: inverteTexto('roma') deve resultar em 'amor'

Exercício 13: Funções como parâmetro 2

Você deve implementar a função aplicaOperacaoEmCadaElemento, que recebe como parâmetros uma operacao (que é uma função) e dois vetores com mesmo tamanho: vetor1 e vetor2. Então, para cada par de elementos de mesma posição (ex: primeiro de vetor1 e primeiro de vetor2, depois segundo...), ela invoca a operação, retornando um novo vetor como resultado. Essa operação é uma função que recebe dois números como parâmetro (ex: function soma(a, b)) e deve retornar o resultado da operação entre os 2 elementos que foram passados como parâmetro (nesse caso, a + b).

Caso os dois vetores sejam de tamanho diferentes, deve-se exibir uma mensagem de erro, não realizar a operação e retornar null. Lembre-se que você pode acessar a propriedade length dos vetores para saber seu tamanho.

Veja o exemplo abaixo, considerando a operação soma (implementada no exercício 0.2).

vetor1:

0	1	2	3
4	2	-1	10

vetor2:

0	1	2	3
10	2	3	5

valor retornado

0	1	2	3
14	4	2	15

let vetor1 = [4, 2, -1, 10];




let vetor1 = [10, 2, 3, 5];





aplicaOperacaoEmCadaElemento(soma, vetor1, vetor2);

function soma(a, b) {
    return a + b;
}

function aplicaOperacaoEmCadaElemento(operacao, vetor1, vetor2) {
    // ...implementar...
    // ...
    // retorna vetor de resultado
}

Você deverá implementar a função aplicaOperacaoEmCadaElemento e três operações distintas (por exemplo, soma(a, b), multiplica(a, b) e subtrai(a, b)), cada uma, criando uma função de forma uma diferente.

Criando uma função 🌐 📺

Uma função pode ser criada de diferentes formas. A mais básica é usando a palavra-chave function, seguida de um nome e da lista de parâmetros. Em seguida vem o seu corpo, delimitado entre chaves:

function fazAlgumaCoisa(param1, param2) {
    // ...comandos aqui...
}

Repare que não é necessário (sequer possível):

definir o tipo de dado de retorno;
definir o tipo de dado dos parâmetros.

Isso acontece porque os tipos de dados em JavaScript são inferidos.

Uma função pode retornar um valor usando return:

function fazAlgo() {
    // ...faz coisas...
    return umValor;
}

Usando o retorno de uma função 🌐 📺

Ao invocar uma função que retorna algo, podemos usar o que foi retornado. Por exemplo:

function tiraMedia(n1, n2, n3) {
    return (n1 + n2 + n3) / 3;
}

let media = tiraMedia(1, 2, 3);
escreva(1, 'Rótulo', media);
// escreve: Rótulo: 3


// ou então em 1 linha:
escreva(1, 'Rótulo', tiraMedia(1, 2, 3));
// escreve: Rótulo: 3

Operadores em JavaScript 🌐 📺

JavaScript possui diversos operadores matemáticos e lógicos (veja vídeo acima). Alguns exemplos de operadores matemáticos:

a + b;  // soma
a - b;  // subtração
a * b;  // multiplicação
a / b;  // divisão
a ** b; // a elevado a b

Algumas funções matemáticas mais complexas podem ser acessadas por meio do Math. Por exemplo:

Math.sin(angulo);         // seno
Math.cos(angulo);         // cosseno
Math.sqrt(numero);        // raiz quadrada
Math.pow(base, expoente); // exponenciação
//    ^ também há: base ** expoente

Função `escreva(...)`

// ...
escreva(numeroExercicio, rotulo, valor);
//      ---------------  ------  -----
// nº exercício^  descrição^ variável^

Por exemplo, para escrever a expressão 4*5 + 1 com o rótulo "Cálculo feito" no exercício 0.4:

escreva(0.4, "Cálculo feito", 4*5 + 1);

Esse código fará aparecer no do exercício 0.4:

Cálculo feito:21

Função `escrevaMensagem(...)`

// ...
escreva(numeroExercicio, texto);
//      ---------------  -----
// nº exercício^  mensagem^

Raiz Quadrada 🌐 📺

Para calcular a raiz quadrada de um número, você deve usar a função Math.sqrt(numero). Por exemplo:

let numero = 36;
let resultado = Math.sqrt(numero);
console.log(resultado); // 6

Criar uma variável 🌐 📺

Para criar uma variável, você deve usar a palavra-chave let seguida do seu nome:

let nomeDaVariavel;

É bem comum já declarar a variável e atribuir um valor a ela:

let nome = 'Dorvalino';
let pontos = 53;
let estaCorrendo = true;
let armas = ['espada', 'chinelo'];

Regras de legibilidade e nomenclatura 🌐

1. Notação camelo 🐪:

let ultimoNome = ''; ✅
let ultimo_nome = ''; ❌
let ultimonome = ''; ❌
let últimoNOME = ''; ❌

2. Indentação:

if (teste) {
    comando; ✅
}
if (teste) {
comando;     ❌
}

3. Nomes descritivos:

let numeroDeAlunos = 20; ✅
let j = 20; ❌

4. Arejamento:

let hp -= dano * 0.6; ✅
let hp-=dano*0.6; ❌

For of / For each 🌐 📺

let premios = [1000, 200, 50];
                        
// for tradicional
for (let i = 0; i < premios.length; i++) {
    console.log(premios[i]);
}

// for of
for (let premio of premios) {
    console.log(premio);    
}

// for each
premios.forEach(function(premio) {
    console.log(premio);
});

Vetores: declarar e indexar 🌐 📺

Para declarar um vetor:

let cores = ['azul', 'amarelo'];

Para pegar o i-ésimo elemento:

let cor = cores[i];

if/else 🌐 📺

if (EXPRESSAO) {
    COMANDOS;
} else if (EXPRESSAO) {
    COMANDOS;
} else {
    COMANDOS;
}

Adicionando elem. a um vetor 🌐 📺

Para adicionar ao final do vetor:

let coisas = ['suco'];
coisas.push('besouro');
// ['suco', 'besouro']

Para adicionar no início do vetor (menos comum):

let coisas = ['suco'];
coisas.unshift('besouro');
// ['besouro', 'suco']

Ordenar um vetor 🌐 📺

Em ordem crescente, basta vetor.sort():

let notas = [8, -1, 2];
notas.sort();
// [-1, 2, 8]

Caso queira ordenar de forma decrescente, é possível passar uma função como parâmetro para vetor.sort(...) (veja na MDN).

Essa função é responsável por comparar dois elementos.

Ela recebe dois itens por parâmetro (valorA, valorB) e, a cada vez que é invocada pelo algoritmo de ordenação, deve retornar se eles:

são iguais: return 0
valorA < valorB: return -1
valorA > valorB: return 1

Se invertermos o -1 com +1, ordenamos de forma decrescente:

function compara(valorA, valorB) {
    if (valorA > valorB) return -1;
    else if (valorA < valorB) return 1;
    else return 0;
}
let notas = [8, -1, 2];
notas.sort(compara);
// [8, 2, -1]

Remover um elemento do vetor 🌐 📺

let animais = ['dog', 'gato', 'rato'];

// remove do final
animais.pop();
// ['dog', 'gato']

// remove do início
animais.shift();
// ['gato']

Inserir um elemento no vetor 🌐 📺

let animais = ['gato'];

// insere no final
animais.push('rato');
// ['gato', 'rato']

// insere no início
animais.unshift('dog');
// ['dog', 'gato', 'rato']

texto.replace e replaceAll 🌐 📺

Strings possuem métodos texto.replace(trecho, novo) e texto.replaceAll(trecho, novo).

O primeiro encontra 1 ocorrência de trecho e o substitui por novo.

O segundo substitui todas as ocorrências. Por exemplo:

const frase = 'Oi banana';
        
frase.replace('a', 'o');
// retorna 'Oi bonana'

frase.replaceAll('a', 'o');
// retorna 'Oi bonono'

Lembre-se que métodos de string não alteram ela própria, mas retornam uma nova como resultado.

Concatenando strings 🌐 📺

Para concatenar (juntar) strings e/ou valores de variáveis, podemos usar o operador +. Por exemplo:

const sobrenome = 'Dalip';
console.log('Daniel Hasan ' + sobrenome);
// Imprime: Daniel Hasan Dalip

0	1	2	3
'Pera'	'Uva'	'Abacaxi'	'Cenoura'

[Unidade 1] Tipos de dados, Variáveis e Funções

[Unidade 2] Condicionais, Vetores e Estruturas de Repetição

[Unidade 3] Mais sobre funções e Métodos úteis

Exercício 0.1: Entendendo a saída de testes

Exercício 0.2: Função soma

Exercício 0.3: Fazendo cálculos matemáticos

Exercício 0.4: Entendedo o for of e "para cada"

Exercício 0.5: Nome do mês dado seu número

Exercício 0.6: Métodos úteis dos vetores

Exercício 0.7: Métodos úteis de string

Exercício 1: Altura da bola no instante t

Exercício 2: Velocidade da bola no instante t

Exercício 3: Velocidade e altura da bola em vários instantes t

Exercício 4: Somatório

Exercício 5: Posição de um elemento no vetor

Exercício 6: Média entre menor e maior valor no vetor

Exercício 7: Sequência de Fibonacci

Exercício 8: Rede Social

Exercício 9: Escreve datas por extenso

Exercício 10: Operações em string

Exercício 11: Palíndromos

Exercício 12: Funções como parâmetro 1

Exercício 13: Funções como parâmetro 2