Merge a1caf177ad
into 29e4101818
commit
445b8a911c
@ -0,0 +1,4 @@
|
||||
console.log(typeof nome);
|
||||
console.log(typeof isBeautiful);
|
||||
console.log(typeof idade);
|
||||
console.log(typeof cidade);
|
@ -0,0 +1,46 @@
|
||||
//1 - Escreva um comentário de linha única que diga, comentários faz seu código ser fácil de ler
|
||||
// Comentários fazem seu código ser fácil de ler
|
||||
|
||||
//2 - Escreva outro comentário de linha única que diga, Welcome to 30DaysOfJavaScript
|
||||
// Welcome to 30DaysOfJavaScript
|
||||
|
||||
//3 - Escreva um comentário de várias linhas que diga, comentários faz seu código ser fácil de ler, fácil de reusar e informativo
|
||||
/*
|
||||
Comentários faz seu código ser fácil de ler,
|
||||
fácil de reusar e informativo
|
||||
*/
|
||||
|
||||
//4 - Crie um arquivo variavel.js e declare variáveis e atribua uma string, boolean, undefined e null
|
||||
|
||||
//5 - Crie um arquivo tiposdedados.js e use o JavaScript typeof operador para verificar diferentes tipos de dados. Verifique o tipo de dado de cada variável
|
||||
|
||||
//6 - Declare quatro variáveis sem atribuir valores
|
||||
let carro;
|
||||
let chuva;
|
||||
let ano;
|
||||
let diaDaSemana;
|
||||
|
||||
//7 - Declare quatro variáveis e atribuir valores
|
||||
let cor = "azul";
|
||||
let idade = 30;
|
||||
let cidade = "Goiânia";
|
||||
let isFriday = true;
|
||||
|
||||
//8 - Declare variáveis para armazenar seu primeiro nome, ultimo nome, estado civil, país e idade em multiplas linhas
|
||||
let primeiroNome = "Beatriz";
|
||||
let ultimoNome = "Almeida";
|
||||
let estadoCivil = "Solteira";
|
||||
let pais = "Brasil";
|
||||
let minhaIdade = 27;
|
||||
|
||||
//9 - Declare variáveis para armazenar seu primeiro nome, ultimo nome, estado civil, país e idade em uma única linha
|
||||
let nomeCompleto = "Beatriz Almeida",
|
||||
maritalState = "Solteira",
|
||||
paisOrigem = "Brasil",
|
||||
idadeAtual = 27;
|
||||
|
||||
//10 - Declare duas variáveis minhaIdade e suaIdade e atribua valores iniciais e mostre no console do navegador.
|
||||
let myAge = 27;
|
||||
let yourAge = 30;
|
||||
console.log("Minha idade:", minhaIdade);
|
||||
console.log("Sua idade:", suaIdade);
|
@ -0,0 +1,12 @@
|
||||
//string
|
||||
let nome = "Liz";
|
||||
|
||||
// boolean
|
||||
let isBeautiful = true;
|
||||
|
||||
// undefined
|
||||
let idade;
|
||||
console.log(idade);
|
||||
|
||||
// null
|
||||
let cidade = null;
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,46 @@
|
||||
//1 - Escreva um comentário de linha única que diga, comentários faz seu código ser fácil de ler
|
||||
//comentários faz seu código ser fácil de ler
|
||||
|
||||
//2 - Escreva outro comentário de linha única que diga, Welcome to 30DaysOfJavaScript
|
||||
//Welcome to 30DaysOfJavaScript
|
||||
|
||||
//3 - Escreva um comentário de várias linhas que diga, comentários faz seu código ser fácil de ler, fácil de reusar e informátivo
|
||||
/*
|
||||
comentários faz seu código ser fácil de ler, fácil de reusar e informátivo
|
||||
*/
|
||||
|
||||
//4 - Crie um arquivo variavel.js e declare variáveis e atribua uma string, boolean, undefined e null
|
||||
|
||||
//5 - Crie um arquivo tiposdedados.js e use o JavaScript typeof operador para verificar diferentes tipos de dados. Verifique o tipo de dado de cada variável
|
||||
|
||||
//6 - Declare quatro variáveis sem atribuir valores
|
||||
let empresa;
|
||||
let corBlusa;
|
||||
let preco;
|
||||
let diaDaSemana;
|
||||
|
||||
//7 - Declare quatro variáveis e atribuir valores
|
||||
let celular = "Samsung";
|
||||
let minhaIdade = 27;
|
||||
let corOlhos = "castanho";
|
||||
let estadoCivil = "solteiro";
|
||||
|
||||
//8 - Declare variáveis para armazenar seu primeiro nome, ultimo nome, estado civil, país e idade em multiplas linhas
|
||||
let firstname = "Beatriz";
|
||||
let lastname = "Almeida";
|
||||
let maritalStatus = "solteira";
|
||||
let country = "Brasil";
|
||||
let age = 27;
|
||||
|
||||
//9 - Declare variáveis para armazenar seu primeiro nome, ultimo nome, estado civil, país e idade em uma única linha
|
||||
let firstName = "Beatriz",
|
||||
lastName = "Almeida",
|
||||
maritalStatus2 = "solteira",
|
||||
country2 = "Brasil",
|
||||
age2 = 27;
|
||||
|
||||
//10 - Declare duas variáveis minhaIdade e suaIdade e atribua valores iniciais e mostre no console do navegador.
|
||||
let minhaIdade2 = 27;
|
||||
console.log("Minha idade é: " + minhaIdade2);
|
||||
let suaIdade = 30;
|
||||
console.log("Sua idade é: " + suaIdade);
|
@ -0,0 +1,12 @@
|
||||
//5 - Crie um arquivo tiposdedados.js e use o JavaScript typeof operador para verificar diferentes tipos de dados. Verifique o tipo de dado de cada variável
|
||||
typeof "Brasil";
|
||||
console.log(typeof "Brasil"); // string
|
||||
|
||||
typeof false;
|
||||
console.log(typeof false); // boolean
|
||||
|
||||
typeof undefined;
|
||||
console.log(typeof undefined); // undefined
|
||||
|
||||
typeof null;
|
||||
console.log(typeof null); // object
|
@ -0,0 +1,5 @@
|
||||
//4 - Crie um arquivo variavel.js e declare variáveis e atribua uma string, boolean, undefined e null
|
||||
let país = "Brasil";
|
||||
let casado = false;
|
||||
let variavel = undefined;
|
||||
let nulo = null;
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,140 @@
|
||||
//1- Obtenha a entrada do usuário usando prompt(“Digite sua idade:”). Se o usuário tiver 18 anos ou mais, dê o feedback: 'Você tem idade suficiente para dirigir', mas se não tiver
|
||||
// 18 anos, dê outro feedback indicando quantos anos ele precisa esperar para completar 18 anos
|
||||
let idade = prompt("Digite sua idade:");
|
||||
if (idade >= 18) {
|
||||
console.log("Você tem idade suficiente para dirigir");
|
||||
} else {
|
||||
let anosRestantes = 18 - idade;
|
||||
console.log(
|
||||
`Você precisa esperar mais ${anosRestantes} anos para completar 18 anos`
|
||||
);
|
||||
}
|
||||
|
||||
//2 - Compare os valores de myAge e yourAge usando if … else. Com base na comparação, registre o resultado no console indicando quem é mais velho (eu ou você).
|
||||
// Use prompt(“Digite sua idade:”) para obter a idade como entrada.
|
||||
let myAge = 27;
|
||||
let yourAge = prompt("Digite sua idade:");
|
||||
if (myAge > yourAge) {
|
||||
console.log("Eu sou mais velho que você");
|
||||
} else if (myAge < yourAge) {
|
||||
console.log("Você é mais velho que eu");
|
||||
} else {
|
||||
console.log("Nós temos a mesma idade");
|
||||
}
|
||||
//3 - Se a for maior que b, retorne 'a é maior que b' senão 'a é menor que b'. Tente implementar de duas maneiras
|
||||
//usando if else
|
||||
//operador ternário.
|
||||
let a = 4;
|
||||
let b = 3;
|
||||
if (a > b) {
|
||||
console.log("a é maior que b");
|
||||
} else {
|
||||
console.log("a é menor que b");
|
||||
}
|
||||
// Usando operador ternário
|
||||
let resultado = a > b ? "a é maior que b" : "a é menor que b";
|
||||
console.log(resultado);
|
||||
|
||||
//4 - Números pares são divisíveis por 2 e o resto é zero. Como você verifica se um número é par ou não usando JavaScript?
|
||||
//Digite um número: 2
|
||||
//2 é um número par
|
||||
let numero = prompt("Digite um número:");
|
||||
if (numero % 2 === 0) {
|
||||
console.log(`${numero} é um número par`);
|
||||
} else {
|
||||
console.log(`${numero} é um número ímpar`);
|
||||
}
|
||||
|
||||
//Digite um número: 9
|
||||
//9 é um número ímpar.
|
||||
let numero2 = prompt("Digite um número:");
|
||||
if (numero2 % 2 === 0) {
|
||||
console.log(`${numero2} é um número par`);
|
||||
} else {
|
||||
console.log(`${numero2} é um número ímpar`);
|
||||
}
|
||||
|
||||
//5 - Escreva um código que possa dar notas aos alunos de acordo com suas pontuações:
|
||||
//80-100, A
|
||||
//70-89, B
|
||||
//60-69, C
|
||||
//50-59, D
|
||||
//0-49, F
|
||||
let nota = prompt("Digite a pontuação do aluno:");
|
||||
if (nota >= 80 && nota <= 100) {
|
||||
console.log("A");
|
||||
} else if (nota >= 70 && nota < 80) {
|
||||
console.log("B");
|
||||
} else if (nota >= 60 && nota < 70) {
|
||||
console.log("C");
|
||||
} else if (nota >= 50 && nota < 60) {
|
||||
console.log("D");
|
||||
} else if (nota >= 0 && nota < 50) {
|
||||
console.log("F");
|
||||
} else {
|
||||
console.log("Nota inválida");
|
||||
}
|
||||
//6 - Verifique se um dia é dia de semana ou um dia útil. Seu script receberá o dia como entrada.
|
||||
/* Qual é o dia hoje? Sábado
|
||||
Sábado é um fim de semana.
|
||||
|
||||
Qual é o dia hoje? sábaDo
|
||||
Sábado é um fim de semana.
|
||||
|
||||
Qual é o dia hoje? Sexta-feira
|
||||
Sexta-feira é um dia útil.
|
||||
|
||||
Qual é o dia hoje? sexTA-feiRa
|
||||
Sexta-feira é um dia útil.*/
|
||||
|
||||
let dia = prompt("Qual é o dia hoje?").toLowerCase();
|
||||
if (
|
||||
dia === "segunda-feira" ||
|
||||
dia === "terça-feira" ||
|
||||
dia === "quarta-feira" ||
|
||||
dia === "quinta-feira" ||
|
||||
dia === "sexta-feira"
|
||||
) {
|
||||
console.log(`${dia.charAt(0).toUpperCase() + dia.slice(1)} é um dia útil.`);
|
||||
} else if (dia === "sábado" || dia === "domingo") {
|
||||
console.log(
|
||||
`${dia.charAt(0).toUpperCase() + dia.slice(1)} é um fim de semana.`
|
||||
);
|
||||
} else {
|
||||
console.log("Dia inválido. Por favor, digite um dia da semana válido.");
|
||||
}
|
||||
//7 - screva um programa que informe o número de dias em um mês.
|
||||
/* Digite um mês: Janeiro
|
||||
Janeiro tem 31 dias.
|
||||
|
||||
Digite um mês: JANEIRO
|
||||
Janeiro tem 31 dias
|
||||
|
||||
Digite um mês: Fevereiro
|
||||
Fevereiro tem 28 dias.
|
||||
|
||||
Digite um mês: FEvereiro
|
||||
Fevereiro tem 28 dias.*/
|
||||
let mes = prompt("Digite um mês:").toLowerCase();
|
||||
switch (mes) {
|
||||
case "janeiro":
|
||||
case "março":
|
||||
case "maio":
|
||||
case "julho":
|
||||
case "agosto":
|
||||
case "outubro":
|
||||
case "dezembro":
|
||||
console.log(`${mes.charAt(0).toUpperCase() + mes.slice(1)} tem 31 dias.`);
|
||||
break;
|
||||
case "abril":
|
||||
case "junho":
|
||||
case "setembro":
|
||||
case "novembro":
|
||||
console.log(`${mes.charAt(0).toUpperCase() + mes.slice(1)} tem 30 dias.`);
|
||||
break;
|
||||
case "fevereiro":
|
||||
console.log(`${mes.charAt(0).toUpperCase() + mes.slice(1)} tem 28 dias.`);
|
||||
break;
|
||||
default:
|
||||
console.log("Mês inválido. Por favor, digite um mês válido.");
|
||||
}
|
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- import your scripts here -->
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@ -0,0 +1,3 @@
|
||||
// this is your main.js script
|
||||
|
||||
alert('Open the browser console whenever you work on JavaScript')
|
@ -0,0 +1,375 @@
|
||||
<div align="center">
|
||||
<h1> 30 Dias de JavaScript: Condicionais </h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Seguir no Twitter" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Janeiro, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Day 3](../Dia_03_Booleanos_Operadores_Data/Dia_03_booleanos_operadores_data.md) | [Day 5 >>](../Dia_05_Arrays/dia_05_arrays.md)
|
||||
|
||||

|
||||
|
||||
- [📔 Dia 4](#-dia-4)
|
||||
- [Condicionais](#condicionais)
|
||||
- [If](#if)
|
||||
- [If Else](#if-else)
|
||||
- [If Else If Else](#if--else-if-else)
|
||||
- [Switch](#switch)
|
||||
- [Operadores Ternários](#operadores-ternários)
|
||||
- [💻 Exercícios](#-exercícios)
|
||||
- [Exercícios: Nível 1](#exercícios-nível-1)
|
||||
- [Exercícios: Nível 2](#exercícios-nível-2)
|
||||
- [Exercícios: Nível 3](#exercícios-nível-3)
|
||||
|
||||
# 📔 Dia 4
|
||||
|
||||
## Condicionais
|
||||
|
||||
As declarações condicionais são usadas para tomar decisões com base em diferentes condições.
|
||||
Por padrão, as declarações em JavaScript são executadas sequencialmente de cima para baixo. Se a lógica de processamento exigir, o fluxo sequencial de execução pode ser alterado de duas maneiras:
|
||||
|
||||
- Execução condicional: um bloco de uma ou mais declarações será executado se uma certa expressão for verdadeira
|
||||
- Execução repetitiva: um bloco de uma ou mais declarações será repetidamente executado enquanto uma certa expressão for verdadeira. Nesta seção, vamos cobrir as declarações _if_, _else_ , _else if_. Os operadores de comparação e lógicos que aprendemos nas seções anteriores serão úteis aqui.
|
||||
|
||||
Condições podem ser implementadas das seguintes maneiras:
|
||||
|
||||
- if
|
||||
- if else
|
||||
- if else if else
|
||||
- switch
|
||||
- operador ternário
|
||||
|
||||
### If
|
||||
|
||||
Em JavaScript e outras linguagens de programação, a palavra-chave _if_ é usada para verificar se uma condição é verdadeira e para executar o bloco de código. Para criar uma condição if, precisamos da palavra-chave _if_, condição dentro de um parêntese e bloco de código dentro de chaves ({}).
|
||||
|
||||
```js
|
||||
// sintaxe
|
||||
if (condição) {
|
||||
// esta parte do código é executada para condição verdadeira
|
||||
}
|
||||
```
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```js
|
||||
let num = 3;
|
||||
if (num > 0) {
|
||||
console.log(`${num} é um número positivo`);
|
||||
}
|
||||
// 3 é um número positivo
|
||||
```
|
||||
|
||||
Como você pode ver no exemplo de condição acima, 3 é maior que 0, então é um número positivo. A condição foi verdadeira e o bloco de código foi executado. No entanto, se a condição for falsa, não veremos nenhum resultado.
|
||||
|
||||
```js
|
||||
let isRaining = true;
|
||||
if (isRaining) {
|
||||
console.log('Lembre-se de levar seu casaco de chuva.');
|
||||
}
|
||||
```
|
||||
|
||||
O mesmo vale para a segunda condição, se isRaining for falso, o bloco if não será executado e não veremos nenhum resultado. Para ver o resultado de uma condição falsa, deveríamos ter outro bloco, que será else.
|
||||
|
||||
### If Else
|
||||
|
||||
Se a condição for verdadeira, o primeiro bloco será executado, se não, a condição else será executada.
|
||||
|
||||
```js
|
||||
// sintaxe
|
||||
if (condição) {
|
||||
// esta parte do código é executada para condição verdadeira
|
||||
} else {
|
||||
// esta parte do código é executada para condição falsa
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
let num = 3;
|
||||
if (num > 0) {
|
||||
console.log(`${num} é um número positivo`);
|
||||
} else {
|
||||
console.log(`${num} é um número negativo`);
|
||||
}
|
||||
// 3 é um número positivo
|
||||
|
||||
num = -3;
|
||||
if (num > 0) {
|
||||
console.log(`${num} é um número positivo`);
|
||||
} else {
|
||||
console.log(`${num} é um número negativo`);
|
||||
}
|
||||
// -3 é um número negativo
|
||||
```
|
||||
|
||||
```js
|
||||
let isRaining = true;
|
||||
if (isRaining) {
|
||||
console.log('Você precisa de um casaco de chuva.');
|
||||
} else {
|
||||
console.log('Não precisa de casaco de chuva.');
|
||||
}
|
||||
// Você precisa de um casaco de chuva.
|
||||
|
||||
isRaining = false;
|
||||
if (isRaining) {
|
||||
console.log('Você precisa de um casaco de chuva.');
|
||||
} else {
|
||||
console.log('Não precisa de casaco de chuva.');
|
||||
}
|
||||
// Não precisa de casaco de chuva.
|
||||
```
|
||||
|
||||
A última condição é falsa, portanto, o bloco else foi executado. E se tivermos mais de duas condições? Nesse caso, usaríamos condições else if.
|
||||
|
||||
### If Else if Else
|
||||
|
||||
Na nossa vida diária, tomamos decisões diariamente. Tomamos decisões não apenas verificando uma ou duas condições, mas fazemos decisões baseadas em múltiplas condições. Semelhante à nossa vida diária, a programação também está cheia de condições. Usamos else if quando temos múltiplas condições.
|
||||
|
||||
```js
|
||||
// sintaxe
|
||||
if (condição) {
|
||||
// código
|
||||
} else if (condição) {
|
||||
// código
|
||||
} else {
|
||||
// código
|
||||
}
|
||||
```
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```js
|
||||
let a = 0;
|
||||
if (a > 0) {
|
||||
console.log(`${a} é um número positivo`);
|
||||
} else if (a < 0) {
|
||||
console.log(`${a} é um número negativo`);
|
||||
} else if (a == 0) {
|
||||
console.log(`${a} é zero`);
|
||||
} else {
|
||||
console.log(`${a} não é um número`);
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// if else if else
|
||||
let clima = 'ensolarado';
|
||||
if (clima === 'chuvoso') {
|
||||
console.log('Você precisa de um casaco de chuva.');
|
||||
} else if (clima === 'nublado') {
|
||||
console.log('Pode estar frio, você precisa de uma jaqueta.');
|
||||
} else if (clima === 'ensolarado') {
|
||||
console.log('Saia livremente.');
|
||||
} else {
|
||||
console.log('Não precisa de casaco de chuva.');
|
||||
}
|
||||
```
|
||||
|
||||
### Switch
|
||||
|
||||
Switch é uma alternativa para **if else if else**.
|
||||
A declaração switch começa com a palavra-chave _switch_ seguida por um parêntese e bloco de código. Dentro do bloco de código, teremos diferentes casos. O bloco de caso é executado se o valor nos parênteses da declaração switch corresponder ao valor do caso. A declaração break é para terminar a execução para que a execução do código não continue após a condição ser satisfeita. O bloco default é executado se todos os casos não satisfizerem a condição.
|
||||
|
||||
```js
|
||||
switch (valorDoCaso) {
|
||||
case 1:
|
||||
// código
|
||||
break;
|
||||
case 2:
|
||||
// código
|
||||
break;
|
||||
case 3:
|
||||
// código
|
||||
break;
|
||||
default:
|
||||
// código
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
let clima = 'nublado';
|
||||
switch (clima) {
|
||||
case 'chuvoso':
|
||||
console.log('Você precisa de um casaco de chuva.');
|
||||
break;
|
||||
case 'nublado':
|
||||
console.log('Pode estar frio, você precisa de uma jaqueta.');
|
||||
break;
|
||||
case 'ensolarado':
|
||||
console.log('Saia livremente.');
|
||||
break;
|
||||
default:
|
||||
console.log('Não precisa de casaco de chuva.');
|
||||
}
|
||||
|
||||
// Mais Exemplos de Switch
|
||||
let diaEntradaUsuario = prompt('Que dia é hoje?');
|
||||
let dia = diaEntradaUsuario.toLowerCase();
|
||||
|
||||
switch (dia) {
|
||||
case 'segunda-feira':
|
||||
console.log('Hoje é segunda-feira');
|
||||
break;
|
||||
case 'terça-feira':
|
||||
console.log('Hoje é terça-feira');
|
||||
break;
|
||||
case 'quarta-feira':
|
||||
console.log('Hoje é quarta-feira');
|
||||
break;
|
||||
case 'quinta-feira':
|
||||
console.log('Hoje é quinta-feira');
|
||||
break;
|
||||
case 'sexta-feira':
|
||||
console.log('Hoje é sexta-feira');
|
||||
break;
|
||||
case 'sábado':
|
||||
console.log('Hoje é sábado');
|
||||
break;
|
||||
case 'domingo':
|
||||
console.log('Hoje é domingo');
|
||||
break;
|
||||
default:
|
||||
console.log('Não é um dia da semana.');
|
||||
}
|
||||
```
|
||||
|
||||
// Exemplos para usar condições nos casos
|
||||
|
||||
```js
|
||||
let num = prompt('Digite um número');
|
||||
switch (true) {
|
||||
case num > 0:
|
||||
console.log('O número é positivo');
|
||||
break;
|
||||
case num == 0:
|
||||
console.log('O número é zero');
|
||||
break;
|
||||
case num < 0:
|
||||
console.log('O número é negativo');
|
||||
break;
|
||||
default:
|
||||
console.log('O valor digitado não foi um número');
|
||||
}
|
||||
```
|
||||
|
||||
### Operadores Ternários
|
||||
|
||||
Outra maneira de escrever condicionais é usando operadores ternários. Já cobrimos isso em outras seções, mas também devemos mencionar aqui.
|
||||
|
||||
```js
|
||||
let isRaining = true;
|
||||
isRaining
|
||||
? console.log('Você precisa de um casaco de chuva.')
|
||||
: console.log('Não precisa de casaco de chuva.');
|
||||
```
|
||||
|
||||
🌕 Você é extraordinário e possui um potencial notável. Você acabou de completar os desafios do dia 4 e está quatro passos à frente no seu caminho para a grandeza. Agora faça alguns exercícios para o seu cérebro e músculo.
|
||||
|
||||
## 💻 Exercícios
|
||||
|
||||
### Exercícios: Nível 1
|
||||
|
||||
1. Obtenha a entrada do usuário usando prompt(“Digite sua idade:”). Se o usuário tiver 18 anos ou mais, dê o feedback: 'Você tem idade suficiente para dirigir', mas se não tiver 18 anos, dê outro feedback indicando quantos anos ele precisa esperar para completar 18 anos.
|
||||
|
||||
```sh
|
||||
Digite sua idade: 30
|
||||
Você tem idade suficiente para dirigir.
|
||||
|
||||
Digite sua idade: 15
|
||||
Você tem que esperar mais 3 anos para dirigir.
|
||||
```
|
||||
|
||||
1. Compare os valores de myAge e yourAge usando if … else. Com base na comparação, registre o resultado no console indicando quem é mais velho (eu ou você). Use prompt(“Digite sua idade:”) para obter a idade como entrada.
|
||||
|
||||
```sh
|
||||
Digite sua idade: 30
|
||||
Você é 5 anos mais velho do que eu.
|
||||
```
|
||||
|
||||
1. Se a for maior que b, retorne 'a é maior que b' senão 'a é menor que b'. Tente implementar de duas maneiras
|
||||
|
||||
- usando if else
|
||||
- operador ternário.
|
||||
|
||||
```js
|
||||
let a = 4;
|
||||
let b = 3;
|
||||
```
|
||||
|
||||
```sh
|
||||
4 é maior que 3
|
||||
```
|
||||
|
||||
1. Números pares são divisíveis por 2 e o resto é zero. Como você verifica se um número é par ou não usando JavaScript?
|
||||
|
||||
```sh
|
||||
Digite um número: 2
|
||||
2 é um número par
|
||||
|
||||
Digite um número: 9
|
||||
9 é um número ímpar.
|
||||
```
|
||||
|
||||
### Exercícios: Nível 2
|
||||
|
||||
1. Escreva um código que possa dar notas aos alunos de acordo com suas pontuações:
|
||||
- 80-100, A
|
||||
- 70-89, B
|
||||
- 60-69, C
|
||||
- 50-59, D
|
||||
- 0-49, F
|
||||
1. Verifique se a estação é Outono, Inverno, Primavera ou Verão.
|
||||
Se a entrada do usuário for:
|
||||
- Setembro, Outubro ou Novembro, a estação é Outono.
|
||||
- Dezembro, Janeiro ou Fevereiro, a estação é Inverno.
|
||||
- Março, Abril ou Maio, a estação é Primavera
|
||||
- Junho, Julho ou Agosto, a estação é Verão
|
||||
1. Verifique se um dia é dia de semana ou um dia útil. Seu script receberá o dia como entrada.
|
||||
|
||||
```sh
|
||||
Qual é o dia hoje? Sábado
|
||||
Sábado é um fim de semana.
|
||||
|
||||
Qual é o dia hoje? sábaDo
|
||||
Sábado é um fim de semana.
|
||||
|
||||
Qual é o dia hoje? Sexta-feira
|
||||
Sexta-feira é um dia útil.
|
||||
|
||||
Qual é o dia hoje? sexTA-feiRa
|
||||
Sexta-feira é um dia útil.
|
||||
```
|
||||
|
||||
### Exercícios: Nível 3
|
||||
|
||||
1. Escreva um programa que informe o número de dias em um mês.
|
||||
|
||||
```sh
|
||||
Digite um mês: Janeiro
|
||||
Janeiro tem 31 dias.
|
||||
|
||||
Digite um mês: JANEIRO
|
||||
Janeiro tem 31 dias
|
||||
|
||||
Digite um mês: Fevereiro
|
||||
Fevereiro tem 28 dias.
|
||||
|
||||
Digite um mês: FEvereiro
|
||||
Fevereiro tem 28 dias.
|
||||
```
|
||||
|
||||
1. Escreva um programa que informe o número de dias em um mês, agora considerando o ano bissexto.
|
||||
|
||||
🎉 PARABÉNS ! 🎉
|
||||
|
||||
[<< Day 3](../Dia_03_Booleanos_Operadores_Data/Dia_03_booleanos_operadores_data.md) | [Day 5 >>](../Dia_05_Arrays/dia_05_arrays.md)
|
@ -0,0 +1,195 @@
|
||||
const countries = [
|
||||
'Afghanistan',
|
||||
'Albania',
|
||||
'Algeria',
|
||||
'Andorra',
|
||||
'Angola',
|
||||
'Antigua and Barbuda',
|
||||
'Argentina',
|
||||
'Armenia',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Azerbaijan',
|
||||
'Bahamas',
|
||||
'Bahrain',
|
||||
'Bangladesh',
|
||||
'Barbados',
|
||||
'Belarus',
|
||||
'Belgium',
|
||||
'Belize',
|
||||
'Benin',
|
||||
'Bhutan',
|
||||
'Bolivia',
|
||||
'Bosnia and Herzegovina',
|
||||
'Botswana',
|
||||
'Brazil',
|
||||
'Brunei',
|
||||
'Bulgaria',
|
||||
'Burkina Faso',
|
||||
'Burundi',
|
||||
'Cambodia',
|
||||
'Cameroon',
|
||||
'Canada',
|
||||
'Cape Verde',
|
||||
'Central African Republic',
|
||||
'Chad',
|
||||
'Chile',
|
||||
'China',
|
||||
'Colombi',
|
||||
'Comoros',
|
||||
'Congo (Brazzaville)',
|
||||
'Congo',
|
||||
'Costa Rica',
|
||||
"Cote d'Ivoire",
|
||||
'Croatia',
|
||||
'Cuba',
|
||||
'Cyprus',
|
||||
'Czech Republic',
|
||||
'Denmark',
|
||||
'Djibouti',
|
||||
'Dominica',
|
||||
'Dominican Republic',
|
||||
'East Timor (Timor Timur)',
|
||||
'Ecuador',
|
||||
'Egypt',
|
||||
'El Salvador',
|
||||
'Equatorial Guinea',
|
||||
'Eritrea',
|
||||
'Estonia',
|
||||
'Ethiopia',
|
||||
'Fiji',
|
||||
'Finland',
|
||||
'France',
|
||||
'Gabon',
|
||||
'Gambia, The',
|
||||
'Georgia',
|
||||
'Germany',
|
||||
'Ghana',
|
||||
'Greece',
|
||||
'Grenada',
|
||||
'Guatemala',
|
||||
'Guinea',
|
||||
'Guinea-Bissau',
|
||||
'Guyana',
|
||||
'Haiti',
|
||||
'Honduras',
|
||||
'Hungary',
|
||||
'Iceland',
|
||||
'India',
|
||||
'Indonesia',
|
||||
'Iran',
|
||||
'Iraq',
|
||||
'Ireland',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Jamaica',
|
||||
'Japan',
|
||||
'Jordan',
|
||||
'Kazakhstan',
|
||||
'Kenya',
|
||||
'Kiribati',
|
||||
'Korea, North',
|
||||
'Korea, South',
|
||||
'Kuwait',
|
||||
'Kyrgyzstan',
|
||||
'Laos',
|
||||
'Latvia',
|
||||
'Lebanon',
|
||||
'Lesotho',
|
||||
'Liberia',
|
||||
'Libya',
|
||||
'Liechtenstein',
|
||||
'Lithuania',
|
||||
'Luxembourg',
|
||||
'Macedonia',
|
||||
'Madagascar',
|
||||
'Malawi',
|
||||
'Malaysia',
|
||||
'Maldives',
|
||||
'Mali',
|
||||
'Malta',
|
||||
'Marshall Islands',
|
||||
'Mauritania',
|
||||
'Mauritius',
|
||||
'Mexico',
|
||||
'Micronesia',
|
||||
'Moldova',
|
||||
'Monaco',
|
||||
'Mongolia',
|
||||
'Morocco',
|
||||
'Mozambique',
|
||||
'Myanmar',
|
||||
'Namibia',
|
||||
'Nauru',
|
||||
'Nepal',
|
||||
'Netherlands',
|
||||
'New Zealand',
|
||||
'Nicaragua',
|
||||
'Niger',
|
||||
'Nigeria',
|
||||
'Norway',
|
||||
'Oman',
|
||||
'Pakistan',
|
||||
'Palau',
|
||||
'Panama',
|
||||
'Papua New Guinea',
|
||||
'Paraguay',
|
||||
'Peru',
|
||||
'Philippines',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Qatar',
|
||||
'Romania',
|
||||
'Russia',
|
||||
'Rwanda',
|
||||
'Saint Kitts and Nevis',
|
||||
'Saint Lucia',
|
||||
'Saint Vincent',
|
||||
'Samoa',
|
||||
'San Marino',
|
||||
'Sao Tome and Principe',
|
||||
'Saudi Arabia',
|
||||
'Senegal',
|
||||
'Serbia and Montenegro',
|
||||
'Seychelles',
|
||||
'Sierra Leone',
|
||||
'Singapore',
|
||||
'Slovakia',
|
||||
'Slovenia',
|
||||
'Solomon Islands',
|
||||
'Somalia',
|
||||
'South Africa',
|
||||
'Spain',
|
||||
'Sri Lanka',
|
||||
'Sudan',
|
||||
'Suriname',
|
||||
'Swaziland',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Syria',
|
||||
'Taiwan',
|
||||
'Tajikistan',
|
||||
'Tanzania',
|
||||
'Thailand',
|
||||
'Togo',
|
||||
'Tonga',
|
||||
'Trinidad and Tobago',
|
||||
'Tunisia',
|
||||
'Turkey',
|
||||
'Turkmenistan',
|
||||
'Tuvalu',
|
||||
'Uganda',
|
||||
'Ukraine',
|
||||
'United Arab Emirates',
|
||||
'United Kingdom',
|
||||
'United States',
|
||||
'Uruguay',
|
||||
'Uzbekistan',
|
||||
'Vanuatu',
|
||||
'Vatican City',
|
||||
'Venezuela',
|
||||
'Vietnam',
|
||||
'Yemen',
|
||||
'Zambia',
|
||||
'Zimbabwe'
|
||||
]
|
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:05 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:05 Day</h1>
|
||||
<h2>Arrays</h2>
|
||||
|
||||
<script src="./data/countries.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@ -0,0 +1,3 @@
|
||||
console.log(countries)
|
||||
alert('Open the browser console whenever you work on JavaScript')
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -0,0 +1,781 @@
|
||||
<div align="center">
|
||||
<h1> 30 Dias de JavaScript: Arrays </h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Seguir no Twitter" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Janeiro, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Dia 4](../Dia_04_Condicionais.md) | [Dia 6 >>](../Dia_06_Loops/Dia_06_Loops.md)
|
||||
|
||||

|
||||
|
||||
- [📔 Dia 5](#-dia-5)
|
||||
- [Arrays](#arrays)
|
||||
- [Como criar um array vazio](#como-criar-um-array-vazio)
|
||||
- [Como criar um array com valores](#como-criar-um-array-com-valores)
|
||||
- [Criando um array usando split](#criando-um-array-usando-split)
|
||||
- [Acessando itens do array usando índice](#acessando-itens-do-array-usando-índice)
|
||||
- [Modificando elemento do array](#modificando-elemento-do-array)
|
||||
- [Métodos para manipular array](#métodos-para-manipular-array)
|
||||
- [Construtor de Array](#construtor-de-array)
|
||||
- [Criando valores estáticos com fill](#criando-valores-estáticos-com-fill)
|
||||
- [Concatenando array usando concat](#concatenando-array-usando-concat)
|
||||
- [Obtendo o tamanho do array](#obtendo-o-tamanho-do-array)
|
||||
- [Obtendo índice de um elemento no array](#obtendo-índice-de-um-elemento-no-array)
|
||||
- [Obtendo o último índice de um elemento no array](#obtendo-o-último-índice-de-um-elemento-no-array)
|
||||
- [Verificando array](#verificando-array)
|
||||
- [Convertendo array para string](#convertendo-array-para-string)
|
||||
- [Juntando elementos do array](#juntando-elementos-do-array)
|
||||
- [Fatiando elementos do array](#fatiando-elementos-do-array)
|
||||
- [Método splice em array](#método-splice-em-array)
|
||||
- [Adicionando item ao array usando push](#adicionando-item-ao-array-usando-push)
|
||||
- [Removendo o elemento final usando pop](#removendo-o-elemento-final-usando-pop)
|
||||
- [Removendo um elemento do início](#removendo-um-elemento-do-início)
|
||||
- [Adicionando um elemento no início](#adicionando-um-elemento-no-início)
|
||||
- [Invertendo a ordem do array](#invertendo-a-ordem-do-array)
|
||||
- [Ordenando elementos no array](#ordenando-elementos-no-array)
|
||||
- [Array de arrays](#array-de-arrays)
|
||||
- [💻 Exercício](#-exercício)
|
||||
- [Exercício: Nível 1](#exercício-nível-1)
|
||||
- [Exercício: Nível 2](#exercício-nível-2)
|
||||
- [Exercício: Nível 3](#exercício-nível-3)
|
||||
|
||||
# 📔 Dia 5
|
||||
|
||||
## Arrays
|
||||
|
||||
Ao contrário das variáveis, um array pode armazenar _vários valores_. Cada valor em um array tem um _índice_, e cada índice tem _uma referência em um endereço de memória_. Cada valor pode ser acessado usando seus _índices_. O índice de um array começa do _zero_, e o índice do último elemento é menor por um do que o comprimento do array.
|
||||
|
||||
Um array é uma coleção de diferentes tipos de dados que são ordenados e modificáveis. Um array permite armazenar elementos duplicados e diferentes tipos de dados. Um array pode estar vazio ou pode ter valores de diferentes tipos de dados.
|
||||
|
||||
### Como criar um array vazio
|
||||
|
||||
Em JavaScript, podemos criar um array de diferentes maneiras. Vamos ver diferentes formas de criar um array.
|
||||
É muito comum usar _const_ em vez de _let_ para declarar uma variável de array. Se você usar const, significa que não usará esse nome de variável novamente.
|
||||
|
||||
- Usando o construtor Array
|
||||
|
||||
```js
|
||||
// sintaxe
|
||||
const arr = Array();
|
||||
// ou
|
||||
// let arr = new Array()
|
||||
console.log(arr); // []
|
||||
```
|
||||
|
||||
- Usando colchetes([])
|
||||
|
||||
```js
|
||||
// sintaxe
|
||||
// Esta é a maneira mais recomendada de criar uma lista vazia
|
||||
const arr = [];
|
||||
console.log(arr);
|
||||
```
|
||||
|
||||
### Como criar um array com valores
|
||||
|
||||
Array com valores iniciais. Usamos a propriedade length para encontrar o comprimento de um array.
|
||||
|
||||
```js
|
||||
const numeros = [0, 3.14, 9.81, 37, 98.6, 100]; // array de números
|
||||
const frutas = ['banana', 'laranja', 'manga', 'limão']; // array de strings, frutas
|
||||
const vegetais = ['Tomate', 'Batata', 'Repolho', 'Cebola', 'Cenoura']; // array de strings, vegetais
|
||||
const produtosAnimais = ['leite', 'carne', 'manteiga', 'iogurte']; // array de strings, produtos
|
||||
const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongoDB']; // array de tecnologias web
|
||||
const paises = ['Finlândia', 'Dinamarca', 'Suécia', 'Noruega', 'Islândia']; // array de strings, países
|
||||
|
||||
// Imprima o array e seu comprimento
|
||||
|
||||
console.log('Números:', numeros);
|
||||
console.log('Quantidade de números:', numeros.length);
|
||||
|
||||
console.log('Frutas:', frutas);
|
||||
console.log('Quantidade de frutas:', frutas.length);
|
||||
|
||||
console.log('Vegetais:', vegetais);
|
||||
console.log('Quantidade de vegetais:', vegetais.length);
|
||||
|
||||
console.log('Produtos animais:', produtosAnimais);
|
||||
console.log('Quantidade de produtos animais:', produtosAnimais.length);
|
||||
|
||||
console.log('Tecnologias web:', webTechs);
|
||||
console.log('Quantidade de tecnologias web:', webTechs.length);
|
||||
|
||||
console.log('Países:', paises);
|
||||
console.log('Quantidade de países:', paises.length);
|
||||
```
|
||||
|
||||
```sh
|
||||
Números: [0, 3.14, 9.81, 37, 98.6, 100]
|
||||
Quantidade de números: 6
|
||||
Frutas: ['banana', 'laranja', 'manga', 'limão']
|
||||
Quantidade de frutas: 4
|
||||
Vegetais: ['Tomate', 'Batata', 'Repolho', 'Cebola', 'Cenoura']
|
||||
Quantidade de vegetais: 5
|
||||
Produtos de origem animal: ['leite', 'carne', 'manteiga', 'iogurte']
|
||||
Quantidade de produtos de origem animal: 4
|
||||
Tecnologias web: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongoDB']
|
||||
Quantidade de tecnologias web: 7
|
||||
Países: ['Finlândia', 'Estônia', 'Dinamarca', 'Suécia', 'Noruega']
|
||||
Quantidade de países: 5
|
||||
```
|
||||
|
||||
- O array pode ter itens de diferentes tipos de dados
|
||||
|
||||
```js
|
||||
const arr = [
|
||||
'Asabeneh',
|
||||
250,
|
||||
true,
|
||||
{ country: 'Finlândia', city: 'Helsinque' },
|
||||
{ skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] },
|
||||
]; // arr contendo diferentes tipos de dados
|
||||
console.log(arr);
|
||||
```
|
||||
|
||||
### Criando um array usando split
|
||||
|
||||
Como vimos na seção anterior, podemos dividir uma string em diferentes posições e transformá-la em um array. Vamos ver os exemplos abaixo.
|
||||
|
||||
```js
|
||||
let js = 'JavaScript';
|
||||
const charsInJavaScript = js.split('');
|
||||
|
||||
console.log(charsInJavaScript); // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
|
||||
|
||||
let companiesString = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon';
|
||||
const companies = companiesString.split(',');
|
||||
|
||||
console.log(companies); // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"]
|
||||
let txt =
|
||||
'Eu amo ensinar e empoderar pessoas. Eu ensino HTML, CSS, JS, React, Python.';
|
||||
const words = txt.split(' ');
|
||||
|
||||
console.log(words);
|
||||
// o texto tem caracteres especiais, pense como você pode obter apenas as palavras
|
||||
// ["Eu", "amo", "ensinar", "e", "empoderar", "pessoas.", "Eu", "ensino", "HTML,", "CSS,", "JS,", "React,", "Python"]
|
||||
```
|
||||
|
||||
### Acessando itens do array usando índice
|
||||
|
||||
Acessamos cada elemento em um array usando seu índice. O índice de um array começa do 0. A imagem abaixo mostra claramente o índice de cada elemento no array.
|
||||
|
||||

|
||||
|
||||
```js
|
||||
const frutas = ['banana', 'laranja', 'manga', 'limão'];
|
||||
let primeiraFruta = frutas[0]; // estamos acessando o primeiro item usando seu índice
|
||||
|
||||
console.log(primeiraFruta); // banana
|
||||
|
||||
let segundaFruta = frutas[1];
|
||||
console.log(segundaFruta); // laranja
|
||||
|
||||
let ultimaFruta = frutas[3];
|
||||
console.log(ultimaFruta); // limão
|
||||
// O último índice pode ser calculado da seguinte forma
|
||||
|
||||
let ultimoIndice = frutas.length - 1;
|
||||
ultimaFruta = frutas[ultimoIndice];
|
||||
|
||||
console.log(ultimaFruta); // limão
|
||||
```
|
||||
|
||||
```js
|
||||
const numeros = [0, 3.14, 9.81, 37, 98.6, 100]; // conjunto de números
|
||||
|
||||
console.log(numeros.length); // => para saber o tamanho do array, que é 6
|
||||
console.log(numeros); // -> [0, 3.14, 9.81, 37, 98.6, 100]
|
||||
console.log(numeros[0]); // -> 0
|
||||
console.log(numeros[5]); // -> 100
|
||||
|
||||
let ultimoIndice = numeros.length - 1;
|
||||
console.log(numeros[ultimoIndice]); // -> 100
|
||||
```
|
||||
|
||||
```js
|
||||
const webTechs = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Redux',
|
||||
'Node',
|
||||
'MongoDB',
|
||||
]; // Lista de tecnologias web
|
||||
|
||||
console.log(webTechs); // todos os itens do array
|
||||
console.log(webTechs.length); // => para saber o tamanho do array, que é 7
|
||||
console.log(webTechs[0]); // -> HTML
|
||||
console.log(webTechs[6]); // -> MongoDB
|
||||
|
||||
ultimoIndice = webTechs.length - 1;
|
||||
console.log(webTechs[ultimoIndice]); // -> MongoDB
|
||||
```
|
||||
|
||||
```js
|
||||
const paises = [
|
||||
'Albânia',
|
||||
'Bolívia',
|
||||
'Canadá',
|
||||
'Dinamarca',
|
||||
'Etiópia',
|
||||
'Finlândia',
|
||||
'Alemanha',
|
||||
'Hungria',
|
||||
'Irlanda',
|
||||
'Japão',
|
||||
'Quênia',
|
||||
]; // Lista de países
|
||||
|
||||
console.log(paises); // -> todos os países no array
|
||||
console.log(paises[0]); // -> Albânia
|
||||
console.log(paises[10]); // -> Quênia
|
||||
|
||||
ultimoIndice = paises.length - 1;
|
||||
console.log(paises[ultimoIndice]); // -> Quênia
|
||||
```
|
||||
|
||||
```js
|
||||
const carrinhoDeCompras = [
|
||||
'Leite',
|
||||
'Manga',
|
||||
'Tomate',
|
||||
'Batata',
|
||||
'Abacate',
|
||||
'Carne',
|
||||
'Ovos',
|
||||
'Açúcar',
|
||||
]; // Lista de produtos alimentícios
|
||||
|
||||
console.log(carrinhoDeCompras); // -> todo o carrinho de compras no array
|
||||
console.log(carrinhoDeCompras[0]); // -> Leite
|
||||
console.log(carrinhoDeCompras[7]); // -> Açúcar
|
||||
|
||||
ultimoIndice = carrinhoDeCompras.length - 1;
|
||||
console.log(carrinhoDeCompras[ultimoIndice]); // -> Açúcar
|
||||
```
|
||||
|
||||
### Modificando elemento do array
|
||||
|
||||
Um array é mutável (modificável). Uma vez que um array é criado, podemos modificar o conteúdo dos elementos do array.
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
numeros[0] = 10; // alterando 1 no índice 0 para 10
|
||||
numeros[1] = 20; // alterando 2 no índice 1 para 20
|
||||
|
||||
console.log(numeros); // [10, 20, 3, 4, 5]
|
||||
|
||||
const paises = [
|
||||
'Albânia',
|
||||
'Bolívia',
|
||||
'Canadá',
|
||||
'Dinamarca',
|
||||
'Etiópia',
|
||||
'Finlândia',
|
||||
'Alemanha',
|
||||
'Hungria',
|
||||
'Irlanda',
|
||||
'Japão',
|
||||
'Quênia',
|
||||
];
|
||||
|
||||
paises[0] = 'Afeganistão'; // Substituindo Albânia por Afeganistão
|
||||
let ultimoIndice = paises.length - 1;
|
||||
paises[ultimoIndice] = 'Coreia'; // Substituindo Quênia por Coreia
|
||||
|
||||
console.log(paises);
|
||||
```
|
||||
|
||||
```sh
|
||||
["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"]
|
||||
```
|
||||
|
||||
### Métodos para manipular array
|
||||
|
||||
Existem diferentes métodos para manipular um array. Estes são alguns dos métodos disponíveis para lidar com arrays: _Array, length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_
|
||||
|
||||
#### Construtor de Array
|
||||
|
||||
Array:Para criar um array.
|
||||
|
||||
```js
|
||||
const arr = Array(); // cria um array vazio
|
||||
console.log(arr);
|
||||
|
||||
const oitoValoresVazios = Array(8); // cria oito valores vazios
|
||||
console.log(oitoValoresVazios); // [vazio x 8]
|
||||
```
|
||||
|
||||
#### Criando valores estáticos com fill
|
||||
|
||||
fill: Preenche todos os elementos do array com um valor estático
|
||||
|
||||
```js
|
||||
const arr = Array(); // cria um array vazio
|
||||
console.log(arr);
|
||||
|
||||
const oitoValoresX = Array(8).fill('X'); // cria oito valores de elementos preenchidos com 'X'
|
||||
console.log(oitoValoresX); // ['X', 'X', 'X', 'X', 'X', 'X', 'X', 'X']
|
||||
|
||||
const oitoValores0 = Array(8).fill(0); // cria oito valores de elementos preenchidos com '0'
|
||||
console.log(oitoValores0); // [0, 0, 0, 0, 0, 0, 0, 0]
|
||||
|
||||
const quatroValores4 = Array(4).fill(4); // cria 4 valores de elementos preenchidos com '4'
|
||||
console.log(quatroValores4); // [4, 4, 4, 4]
|
||||
```
|
||||
|
||||
#### Concatenando array usando concat
|
||||
|
||||
concat:Para concatenar dois arrays.
|
||||
|
||||
```js
|
||||
const primeiraLista = [1, 2, 3];
|
||||
const segundaLista = [4, 5, 6];
|
||||
const terceiraLista = primeiraLista.concat(segundaLista);
|
||||
|
||||
console.log(terceiraLista); // [1, 2, 3, 4, 5, 6]
|
||||
```
|
||||
|
||||
```js
|
||||
const frutas = ['banana', 'laranja', 'manga', 'limão']; // array de frutas
|
||||
const vegetais = ['Tomate', 'Batata', 'Repolho', 'Cebola', 'Cenoura']; // array de vegetais
|
||||
const frutasEVegetais = frutas.concat(vegetais); // concatena os dois arrays
|
||||
|
||||
console.log(frutasEVegetais);
|
||||
```
|
||||
|
||||
```sh
|
||||
["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"]
|
||||
```
|
||||
|
||||
#### Obtendo o tamanho do array
|
||||
|
||||
Length:Para saber o tamanho do array
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
console.log(numeros.length); // -> 5 é o tamanho do array
|
||||
```
|
||||
|
||||
#### Obtendo índice de um elemento no array
|
||||
|
||||
indexOf:Para verificar se um item existe em um array. Se existir, retorna o índice; caso contrário, retorna -1.
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
|
||||
console.log(numeros.indexOf(5)); // -> 4
|
||||
console.log(numeros.indexOf(0)); // -> -1
|
||||
console.log(numeros.indexOf(1)); // -> 0
|
||||
console.log(numeros.indexOf(6)); // -> -1
|
||||
```
|
||||
|
||||
Verificar se um elemento existe em um array.
|
||||
|
||||
- Verifica itens em um array
|
||||
|
||||
```js
|
||||
const frutas = ['banana', 'laranja', 'manga', 'limão'];
|
||||
let indice = frutas.indexOf('banana'); // 0
|
||||
|
||||
if(indice === -1){
|
||||
console.log('Esta fruta não existe no array');
|
||||
} else {
|
||||
console.log('Esta fruta existe no array');
|
||||
}
|
||||
// Esta fruta existe no array
|
||||
|
||||
// nos podemos usar ternario tambem
|
||||
index === -1
|
||||
? console.log('Esta fruta não existe no array');
|
||||
: console.log('Esta fruta existe no array');
|
||||
|
||||
// vamos verificar se abacate existe no array
|
||||
indice = frutas.indexOf('abacate'); // -1, se o elemento não for encontrado, o índice é -1
|
||||
if(indice === -1){
|
||||
console.log('Esta fruta não existe no array');
|
||||
} else {
|
||||
console.log('Esta fruta existe no array');
|
||||
}
|
||||
// Esta fruta não existe no array
|
||||
```
|
||||
|
||||
#### Obtendo o último índice de um elemento no array
|
||||
|
||||
lastIndexOf: Fornece a posição do último item no array. Se existir, retorna o índice; caso contrário, retorna -1.
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5, 3, 1, 2];
|
||||
|
||||
console.log(numeros.lastIndexOf(2)); // 7
|
||||
console.log(numeros.lastIndexOf(0)); // -1
|
||||
console.log(numeros.lastIndexOf(1)); // 6
|
||||
console.log(numeros.lastIndexOf(4)); // 3
|
||||
console.log(numeros.lastIndexOf(6)); // -1
|
||||
```
|
||||
|
||||
includes: Para verificar se um item existe em um array. Se existir, retorna verdadeiro; caso contrário, retorna falso.
|
||||
|
||||
```js
|
||||
// const numbers = [1, 2, 3, 4, 5];
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
|
||||
console.log(numbers.includes(5)); // verdadeiro
|
||||
console.log(numbers.includes(0)); // falso
|
||||
console.log(numbers.includes(1)); // verdadeiro
|
||||
console.log(numbers.includes(6)); // falso
|
||||
|
||||
const webTechs = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Redux',
|
||||
'Node',
|
||||
'MongoDB',
|
||||
]; // List of web technologies
|
||||
|
||||
console.log(webTechs.includes('Node')); // verdadeiro
|
||||
console.log(webTechs.includes('C')); // falso
|
||||
```
|
||||
|
||||
#### Verificando array
|
||||
|
||||
Array.isArray:Para verificar se o tipo de dado é um array
|
||||
|
||||
```js
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
console.log(Array.isArray(numbers)); // verdadeiro
|
||||
|
||||
const number = 100;
|
||||
console.log(Array.isArray(number)); // falso
|
||||
```
|
||||
|
||||
#### Convertendo array para string
|
||||
|
||||
toString: Converte o array para string
|
||||
|
||||
```js
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
console.log(numbers.toString()); // 1,2,3,4,5
|
||||
|
||||
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
|
||||
console.log(names.toString()); // Asabeneh,Mathias,Elias,Brook
|
||||
```
|
||||
|
||||
#### Juntando elementos do array
|
||||
|
||||
join: É usado para juntar os elementos do array, o argumento passado no método join será utilizado para unir os elementos do array e retornar como uma string. Por padrão, ele junta com uma vírgula, mas podemos passar diferentes parâmetros de string que podem ser unidos entre os itens.
|
||||
|
||||
```js
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
console.log(numbers.join()); // 1,2,3,4,5
|
||||
|
||||
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'];
|
||||
|
||||
console.log(names.join()); // Asabeneh,Mathias,Elias,Brook
|
||||
console.log(names.join('')); //AsabenehMathiasEliasBrook
|
||||
console.log(names.join(' ')); //Asabeneh Mathias Elias Brook
|
||||
console.log(names.join(', ')); //Asabeneh, Mathias, Elias, Brook
|
||||
console.log(names.join(' # ')); //Asabeneh # Mathias # Elias # Brook
|
||||
|
||||
const webTechs = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Redux',
|
||||
'Node',
|
||||
'MongoDB',
|
||||
]; // List of web technologies
|
||||
|
||||
console.log(webTechs.join()); // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB"
|
||||
console.log(webTechs.join(' # ')); // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB"
|
||||
```
|
||||
|
||||
#### Fatiando elementos do array
|
||||
|
||||
Slice: Para cortar múltiplos itens em um intervalo. Ele recebe dois parâmetros: posição inicial e final. Não inclui a posição final.
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
|
||||
console.log(numeros.slice()); // -> copia todos os itens
|
||||
console.log(numeros.slice(0)); // -> copia todos os itens
|
||||
console.log(numeros.slice(0, numeros.length)); // copia todos os itens
|
||||
console.log(numeros.slice(1, 4)); // -> [2, 3, 4] // não inclui a posição final
|
||||
```
|
||||
|
||||
#### Método splice em array
|
||||
|
||||
Splice: Recebe três parâmetros: Posição inicial, número de itens a serem removidos e número de itens a serem adicionados.
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
numeros.splice();
|
||||
console.log(numeros); // -> remove todos os itens
|
||||
```
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
numeros.splice(0, 1);
|
||||
console.log(numeros); // remove o primeiro item
|
||||
```
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5, 6];
|
||||
numeros.splice(3, 3, 7, 8, 9);
|
||||
console.log(numeros); // -> [1, 2, 3, 7, 8, 9] // remove três itens e substitui por três itens
|
||||
```
|
||||
|
||||
#### Adicionando item ao array usando push
|
||||
|
||||
Push: adicionando item no final. Para adicionar item ao final de um array existente usamos o método push.
|
||||
|
||||
```js
|
||||
// syntax
|
||||
const arr = ['item1', 'item2', 'item3'];
|
||||
arr.push('novo item');
|
||||
console.log(arr); //
|
||||
// ['item1', 'item2', 'item3', 'novo item']
|
||||
```
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
numeros.push(6);
|
||||
console.log(numeros); // -> [1, 2, 3, 4, 5, 6]
|
||||
|
||||
numeros.pop(); // -> remove um item do final
|
||||
console.log(numeros); // -> [1, 2, 3, 4, 5]
|
||||
```
|
||||
|
||||
```js
|
||||
let fruits = ['banana', 'orange', 'mango', 'lemon'];
|
||||
fruits.push('apple');
|
||||
console.log(fruits); // ['banana', 'orange', 'mango', 'lemon', 'apple']
|
||||
|
||||
fruits.push('lime');
|
||||
console.log(fruits); // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime']
|
||||
```
|
||||
|
||||
#### Removendo o elemento final usando pop
|
||||
|
||||
pop: Removendo item no final.
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
numeros.pop(); // -> remove um item do final
|
||||
console.log(numeros); // -> [1, 2, 3, 4]
|
||||
```
|
||||
|
||||
#### Removendo um elemento do início
|
||||
|
||||
shift: Removendo um elemento do array no início do array.
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
numeros.shift(); // -> remove um item do início
|
||||
console.log(numeros); // -> [2, 3, 4, 5]
|
||||
```
|
||||
|
||||
#### Adicionando um elemento no início
|
||||
|
||||
unshift: Adicionando um elemento no início do array.
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
numeros.unshift(0); // -> adiciona um item no início
|
||||
console.log(numeros); // -> [0, 1, 2, 3, 4, 5]
|
||||
```
|
||||
|
||||
#### Invertendo a ordem do array
|
||||
|
||||
reverse: inverte a ordem de um array
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
numeros.reverse(); // -> inverte a ordem do array
|
||||
console.log(numeros); // [5, 4, 3, 2, 1]
|
||||
|
||||
numeros.reverse();
|
||||
console.log(numeros); // [1, 2, 3, 4, 5]
|
||||
```
|
||||
|
||||
#### Ordenando elementos no array
|
||||
|
||||
sort: organiza os elementos do array em ordem ascendente. Sort aceita uma função de callback, veremos como usar sort com uma função de callback nas próximas seções.
|
||||
|
||||
```js
|
||||
const webTechs = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Redux',
|
||||
'Node',
|
||||
'MongoDB',
|
||||
];
|
||||
|
||||
webTechs.sort();
|
||||
console.log(webTechs); // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"]
|
||||
|
||||
webTechs.reverse(); // after sorting we can reverse it
|
||||
console.log(webTechs); // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"]
|
||||
```
|
||||
|
||||
### Array de arrays
|
||||
|
||||
Um array pode armazenar diferentes tipos de dados, incluindo outro array. Vamos criar um array de arrays:
|
||||
|
||||
```js
|
||||
const primeirosNumeros = [1, 2, 3];
|
||||
const segundosNumeros = [1, 4, 9];
|
||||
|
||||
const arrayOfArray = [
|
||||
[1, 2, 3],
|
||||
[1, 2, 3],
|
||||
];
|
||||
console.log(arrayOfArray[0]); // [1, 2, 3]
|
||||
|
||||
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux'];
|
||||
const backEnd = ['Node', 'Express', 'MongoDB'];
|
||||
const fullStack = [frontEnd, backEnd];
|
||||
console.log(fullStack); // [["HTML", "CSS", "JS", "React", "Redux"], ["Node", "Express", "MongoDB"]]
|
||||
console.log(fullStack.length); // 2
|
||||
console.log(fullStack[0]); // ["HTML", "CSS", "JS", "React", "Redux"]
|
||||
console.log(fullStack[1]); // ["Node", "Express", "MongoDB"]
|
||||
```
|
||||
|
||||
🌕 Você é diligente e já alcançou bastante. Acabou de completar os desafios do dia 5 e está cinco passos à frente no seu caminho para a grandeza. Agora faça alguns exercícios para o seu cérebro e para o seu músculo.
|
||||
|
||||
## 💻 Exercício
|
||||
|
||||
### Exercício: Nível 1
|
||||
|
||||
```js
|
||||
const countries = [
|
||||
'Albania',
|
||||
'Bolivia',
|
||||
'Canada',
|
||||
'Denmark',
|
||||
'Ethiopia',
|
||||
'Finland',
|
||||
'Germany',
|
||||
'Hungary',
|
||||
'Ireland',
|
||||
'Japan',
|
||||
'Kenya',
|
||||
];
|
||||
|
||||
const webTechs = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Redux',
|
||||
'Node',
|
||||
'MongoDB',
|
||||
];
|
||||
```
|
||||
|
||||
1. Declare um array vazio;
|
||||
2. Declare um array com mais de 5 elementos;
|
||||
3. Encontre o comprimento do seu array;
|
||||
4. Obtenha o primeiro item, o item do meio e o último item do array;
|
||||
5. Declare um array chamado mixedDataTypes, coloque diferentes tipos de dados no array e encontre o comprimento do array. O tamanho do array deve ser maior que 5;
|
||||
6. Declare uma variável de array nomeada itCompanies e atribua valores iniciais como Facebook, Google, Microsoft, Apple, IBM, Oracle e Amazon;
|
||||
7. Imprima o array usando console.log();
|
||||
8. Imprima o número de empresas no array;
|
||||
9. Imprima a primeira empresa, a empresa do meio e a última empresa;
|
||||
10. Imprima cada empresa;
|
||||
11. Mude cada nome da empresa para maiúsculas uma a uma e imprima-as;
|
||||
12. Imprima o array como uma frase: Facebook, Google, Microsoft, Apple, IBM, Oracle e Amazon são grandes empresas de TI.
|
||||
13. Verifique se uma determinada empresa existe no array itCompanies. Se existir, retorne a empresa, caso contrário, retorne uma mensagem de empresa não encontrada;
|
||||
14. Filtre empresas que têm mais de um 'o' sem usar o método filter;
|
||||
15. Ordene o array usando o método sort();
|
||||
16. Reverta o array usando o método reverse();
|
||||
17. Fatie os primeiros 3 empresas do array;
|
||||
18. Fatie as últimas 3 empresas do array;
|
||||
19. Fatie a empresa ou empresas do meio do array;
|
||||
20. Remova a primeira empresa do array;
|
||||
21. Remova a empresa ou empresas do meio do array;
|
||||
22. Remova a última empresa do array;
|
||||
23. Remova todas as empresas de TI;
|
||||
|
||||
### Exercício: Nível 2
|
||||
|
||||
1. Crie um arquivo countries.js separado e armazene o array countries nele, crie um arquivo web_techs.js separado e armazene o array webTechs nele. Acesse ambos os arquivos no arquivo main.js;
|
||||
1. Primeiro remova todas as pontuações e mude a string para array e conte o número de palavras no array;
|
||||
|
||||
```js
|
||||
let texto =
|
||||
'Eu amo ensinar e empoderar pessoas. Eu ensino HTML, CSS, JS, React, Python.';
|
||||
console.log(palavras);
|
||||
console.log(palavras.length);
|
||||
```
|
||||
|
||||
```sh
|
||||
["I", "love", "teaching", "and", "empowering", "people", "I", "teach", "HTML", "CSS", "JS", "React", "Python"]
|
||||
|
||||
13
|
||||
```
|
||||
|
||||
1. No carrinho de compras seguinte, adicione, remova, edite itens;
|
||||
|
||||
```js
|
||||
const carrinhoDeCompras = ['Leite', 'Café', 'Chá', 'Mel'];
|
||||
```
|
||||
|
||||
- adicione 'Carne' no início do seu carrinho de compras se ainda não foi adicionado;
|
||||
- adicione Açúcar no final do seu carrinho de compras se ainda não foi adicionado;
|
||||
- remova 'Mel' se você for alérgico a mel;
|
||||
- modifique Chá para 'Chá Verde';
|
||||
|
||||
1. Verifique no array countries se 'Etiópia' existe no array, se existir, imprima 'ETIÓPIA'. Se não existir, adicione ao array countries.
|
||||
1. No array webTechs, verifique se Sass existe no array e, se existir, imprima 'Sass é um preprocessador CSS'. Se não existir, adicione Sass ao array e imprima o array.
|
||||
1. Concatene os seguintes dois variáveis e armazene em uma variável fullStack.
|
||||
|
||||
```js
|
||||
const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux'];
|
||||
const backEnd = ['Node', 'Express', 'MongoDB'];
|
||||
|
||||
console.log(fullStack);
|
||||
```
|
||||
|
||||
```sh
|
||||
["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"]
|
||||
```
|
||||
|
||||
### Exercício: Nível 3
|
||||
|
||||
1. A seguir está um array com as idades de 10 estudantes:
|
||||
|
||||
```js
|
||||
const idades = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]
|
||||
```
|
||||
|
||||
- Ordene o array e encontre a idade mínima e máxima
|
||||
- Encontre a idade mediana (um item do meio ou dois itens do meio divididos por dois)
|
||||
- Encontre a idade média (todas as idades divididas pelo número de itens)
|
||||
- Encontre o intervalo das idades (máxima menos mínima)
|
||||
- Compare o valor de (mínima - média) e (máxima - média), use o método _abs()_
|
||||
|
||||
1.Fatie os dez primeiros países do [array de países](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
|
||||
|
||||
1. Encontre o(s) país(es) do meio no [array de países](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
|
||||
1. Divida o array de países em dois arrays iguais se for par. Se o array de países não for par, adicione um país a mais para a primeira metade.
|
||||
|
||||
🎉 PARABÉNS ! 🎉
|
||||
|
||||
[<< Day 4](../Dia_04_Condicionais/Dia_04_condicionais.md) | [Day 6 >>](../Dia_06_Loops/dia_06_loops.md)
|
@ -0,0 +1,149 @@
|
||||
/*const countries = [
|
||||
'Albania',
|
||||
'Bolivia',
|
||||
'Canada',
|
||||
'Denmark',
|
||||
'Ethiopia',
|
||||
'Finland',
|
||||
'Germany',
|
||||
'Hungary',
|
||||
'Ireland',
|
||||
'Japan',
|
||||
'Kenya',
|
||||
];
|
||||
|
||||
const webTechs = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Redux',
|
||||
'Node',
|
||||
'MongoDB',
|
||||
];*/
|
||||
|
||||
//Declare um array vazio;
|
||||
let arrayVazio = [];
|
||||
|
||||
//Declare um array com mais de 5 elementos;
|
||||
let arrayCincoElementos = ["banana", "maçã", "laranja", "uva", "pera", "kiwi"];
|
||||
|
||||
//Encontre o comprimento do seu array;
|
||||
let comprimentoArray = arrayCincoElementos.length;
|
||||
console.log("Comprimento do array:", comprimentoArray);
|
||||
|
||||
//Obtenha o primeiro item, o item do meio e o último item do array;
|
||||
let primeiroItem = arrayCincoElementos[0];
|
||||
let itemMeio = arrayCincoElementos[Math.floor(arrayCincoElementos.length / 2)];
|
||||
let ultimoItem = arrayCincoElementos[arrayCincoElementos.length - 1];
|
||||
console.log("Primeiro item:", primeiroItem);
|
||||
console.log("Item do meio:", itemMeio);
|
||||
console.log("Último item:", ultimoItem);
|
||||
|
||||
//Declare um array chamado mixedDataTypes, coloque diferentes tipos de dados no array e encontre o comprimento do array. O tamanho do array deve ser maior que 5;
|
||||
let mixedDataTypes = [
|
||||
42,
|
||||
"texto",
|
||||
true,
|
||||
null,
|
||||
undefined,
|
||||
{ chave: "valor" },
|
||||
[1, 2, 3],
|
||||
];
|
||||
let comprimentoMixedDataTypes = mixedDataTypes.length;
|
||||
console.log("Comprimento do array mixedDataTypes:", comprimentoMixedDataTypes);
|
||||
|
||||
//Declare uma variável de array nomeada itCompanies e atribua valores iniciais como Facebook, Google, Microsoft, Apple, IBM, Oracle e Amazon;
|
||||
let itCompanies = [
|
||||
"Facebook",
|
||||
"Google",
|
||||
"Microsoft",
|
||||
"Apple",
|
||||
"IBM",
|
||||
"Oracle",
|
||||
"Amazon",
|
||||
];
|
||||
|
||||
//Imprima o array usando console.log();
|
||||
console.log("Empresas de TI:", itCompanies);
|
||||
|
||||
//Imprima o número de empresas no array;
|
||||
let numeroEmpresas = itCompanies.length;
|
||||
console.log("Número de empresas de TI:", numeroEmpresas);
|
||||
|
||||
//Imprima a primeira empresa, a empresa do meio e a última empresa;
|
||||
let primeiraEmpresa = itCompanies[0];
|
||||
let empresaMeio = itCompanies[Math.floor(itCompanies.length / 2)];
|
||||
let ultimaEmpresa = itCompanies[itCompanies.length - 1];
|
||||
console.log("Primeira empresa:", primeiraEmpresa);
|
||||
console.log("Empresa do meio:", empresaMeio);
|
||||
console.log("Última empresa:", ultimaEmpresa);
|
||||
|
||||
//Imprima cada empresa;
|
||||
itCompanies.forEach((empresa) => {
|
||||
console.log("Empresa:", empresa);
|
||||
});
|
||||
//Mude cada nome da empresa para maiúsculas uma a uma e imprima-as;
|
||||
itCompanies = itCompanies.map((empresa) => empresa.toUpperCase());
|
||||
console.log("Empresas em maiúsculas:", itCompanies);
|
||||
|
||||
//Imprima o array como uma frase: Facebook, Google, Microsoft, Apple, IBM, Oracle e Amazon são grandes empresas de TI.
|
||||
console.log(
|
||||
`${itCompanies.slice(0, -1).join(", ")} e ${itCompanies.slice(
|
||||
-1
|
||||
)} são grandes empresas de TI.`
|
||||
);
|
||||
|
||||
//Verifique se uma determinada empresa existe no array itCompanies. Se existir, retorne a empresa, caso contrário, retorne uma mensagem de empresa não encontrada;
|
||||
let empresaParaVerificar = "Google";
|
||||
if (itCompanies.includes(empresaParaVerificar)) {
|
||||
console.log(`${empresaParaVerificar} existe no array.`);
|
||||
} else {
|
||||
console.log(`${empresaParaVerificar} não foi encontrada no array.`);
|
||||
}
|
||||
|
||||
//Filtre empresas que têm mais de um 'o' sem usar o método filter;
|
||||
let empresasComMaisDeUmO = [];
|
||||
for (let empresa of itCompanies) {
|
||||
if ((empresa.match(/o/g) || []).length > 1) {
|
||||
empresasComMaisDeUmO.push(empresa);
|
||||
}
|
||||
}
|
||||
console.log("Empresas com mais de um 'o':", empresasComMaisDeUmO);
|
||||
|
||||
//Ordene o array usando o método sort();
|
||||
itCompanies.sort();
|
||||
console.log("Empresas ordenadas:", itCompanies);
|
||||
|
||||
//Reverta o array usando o método reverse();
|
||||
itCompanies.reverse();
|
||||
console.log("Empresas revertidas:", itCompanies);
|
||||
|
||||
//Fatie os primeiros 3 empresas do array;
|
||||
let primeirasTresEmpresas = itCompanies.slice(0, 3);
|
||||
console.log("Primeiras 3 empresas:", primeirasTresEmpresas);
|
||||
|
||||
//Fatie as últimas 3 empresas do array;
|
||||
let ultimasTresEmpresas = itCompanies.slice(-3);
|
||||
console.log("Últimas 3 empresas:", ultimasTresEmpresas);
|
||||
|
||||
//Fatie a empresa ou empresas do meio do array;
|
||||
let meioIndex = Math.floor(itCompanies.length / 2);
|
||||
let empresasMeio = itCompanies.slice(meioIndex, meioIndex + 1);
|
||||
console.log("Empresa ou empresas do meio:", empresasMeio);
|
||||
|
||||
//Remova a primeira empresa do array;
|
||||
itCompanies.shift();
|
||||
console.log("Após remover a primeira empresa:", itCompanies);
|
||||
|
||||
//Remova a empresa ou empresas do meio do array;
|
||||
itCompanies.splice(meioIndex, 1);
|
||||
console.log("Após remover a empresa do meio:", itCompanies);
|
||||
|
||||
//Remova a última empresa do array;
|
||||
itCompanies.pop();
|
||||
console.log("Após remover a última empresa:", itCompanies);
|
||||
|
||||
//Remova todas as empresas de TI;
|
||||
itCompanies = [];
|
||||
console.log("Após remover todas as empresas de TI:", itCompanies);
|
@ -0,0 +1,195 @@
|
||||
const countries = [
|
||||
'Afghanistan',
|
||||
'Albania',
|
||||
'Algeria',
|
||||
'Andorra',
|
||||
'Angola',
|
||||
'Antigua and Barbuda',
|
||||
'Argentina',
|
||||
'Armenia',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Azerbaijan',
|
||||
'Bahamas',
|
||||
'Bahrain',
|
||||
'Bangladesh',
|
||||
'Barbados',
|
||||
'Belarus',
|
||||
'Belgium',
|
||||
'Belize',
|
||||
'Benin',
|
||||
'Bhutan',
|
||||
'Bolivia',
|
||||
'Bosnia and Herzegovina',
|
||||
'Botswana',
|
||||
'Brazil',
|
||||
'Brunei',
|
||||
'Bulgaria',
|
||||
'Burkina Faso',
|
||||
'Burundi',
|
||||
'Cambodia',
|
||||
'Cameroon',
|
||||
'Canada',
|
||||
'Cape Verde',
|
||||
'Central African Republic',
|
||||
'Chad',
|
||||
'Chile',
|
||||
'China',
|
||||
'Colombi',
|
||||
'Comoros',
|
||||
'Congo (Brazzaville)',
|
||||
'Congo',
|
||||
'Costa Rica',
|
||||
"Cote d'Ivoire",
|
||||
'Croatia',
|
||||
'Cuba',
|
||||
'Cyprus',
|
||||
'Czech Republic',
|
||||
'Denmark',
|
||||
'Djibouti',
|
||||
'Dominica',
|
||||
'Dominican Republic',
|
||||
'East Timor (Timor Timur)',
|
||||
'Ecuador',
|
||||
'Egypt',
|
||||
'El Salvador',
|
||||
'Equatorial Guinea',
|
||||
'Eritrea',
|
||||
'Estonia',
|
||||
'Ethiopia',
|
||||
'Fiji',
|
||||
'Finland',
|
||||
'France',
|
||||
'Gabon',
|
||||
'Gambia, The',
|
||||
'Georgia',
|
||||
'Germany',
|
||||
'Ghana',
|
||||
'Greece',
|
||||
'Grenada',
|
||||
'Guatemala',
|
||||
'Guinea',
|
||||
'Guinea-Bissau',
|
||||
'Guyana',
|
||||
'Haiti',
|
||||
'Honduras',
|
||||
'Hungary',
|
||||
'Iceland',
|
||||
'India',
|
||||
'Indonesia',
|
||||
'Iran',
|
||||
'Iraq',
|
||||
'Ireland',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Jamaica',
|
||||
'Japan',
|
||||
'Jordan',
|
||||
'Kazakhstan',
|
||||
'Kenya',
|
||||
'Kiribati',
|
||||
'Korea, North',
|
||||
'Korea, South',
|
||||
'Kuwait',
|
||||
'Kyrgyzstan',
|
||||
'Laos',
|
||||
'Latvia',
|
||||
'Lebanon',
|
||||
'Lesotho',
|
||||
'Liberia',
|
||||
'Libya',
|
||||
'Liechtenstein',
|
||||
'Lithuania',
|
||||
'Luxembourg',
|
||||
'Macedonia',
|
||||
'Madagascar',
|
||||
'Malawi',
|
||||
'Malaysia',
|
||||
'Maldives',
|
||||
'Mali',
|
||||
'Malta',
|
||||
'Marshall Islands',
|
||||
'Mauritania',
|
||||
'Mauritius',
|
||||
'Mexico',
|
||||
'Micronesia',
|
||||
'Moldova',
|
||||
'Monaco',
|
||||
'Mongolia',
|
||||
'Morocco',
|
||||
'Mozambique',
|
||||
'Myanmar',
|
||||
'Namibia',
|
||||
'Nauru',
|
||||
'Nepal',
|
||||
'Netherlands',
|
||||
'New Zealand',
|
||||
'Nicaragua',
|
||||
'Niger',
|
||||
'Nigeria',
|
||||
'Norway',
|
||||
'Oman',
|
||||
'Pakistan',
|
||||
'Palau',
|
||||
'Panama',
|
||||
'Papua New Guinea',
|
||||
'Paraguay',
|
||||
'Peru',
|
||||
'Philippines',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Qatar',
|
||||
'Romania',
|
||||
'Russia',
|
||||
'Rwanda',
|
||||
'Saint Kitts and Nevis',
|
||||
'Saint Lucia',
|
||||
'Saint Vincent',
|
||||
'Samoa',
|
||||
'San Marino',
|
||||
'Sao Tome and Principe',
|
||||
'Saudi Arabia',
|
||||
'Senegal',
|
||||
'Serbia and Montenegro',
|
||||
'Seychelles',
|
||||
'Sierra Leone',
|
||||
'Singapore',
|
||||
'Slovakia',
|
||||
'Slovenia',
|
||||
'Solomon Islands',
|
||||
'Somalia',
|
||||
'South Africa',
|
||||
'Spain',
|
||||
'Sri Lanka',
|
||||
'Sudan',
|
||||
'Suriname',
|
||||
'Swaziland',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Syria',
|
||||
'Taiwan',
|
||||
'Tajikistan',
|
||||
'Tanzania',
|
||||
'Thailand',
|
||||
'Togo',
|
||||
'Tonga',
|
||||
'Trinidad and Tobago',
|
||||
'Tunisia',
|
||||
'Turkey',
|
||||
'Turkmenistan',
|
||||
'Tuvalu',
|
||||
'Uganda',
|
||||
'Ukraine',
|
||||
'United Arab Emirates',
|
||||
'United Kingdom',
|
||||
'United States',
|
||||
'Uruguay',
|
||||
'Uzbekistan',
|
||||
'Vanuatu',
|
||||
'Vatican City',
|
||||
'Venezuela',
|
||||
'Vietnam',
|
||||
'Yemen',
|
||||
'Zambia',
|
||||
'Zimbabwe'
|
||||
]
|
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:06 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:06 Day</h1>
|
||||
<h2>Loops</h2>
|
||||
|
||||
<script src="./data/countries.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -0,0 +1,491 @@
|
||||
<div align="center">
|
||||
<h1> 30 Dias de JavaScript: Loops</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Seguir no Twitter" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> Janeiro, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Dia 5](../Dia_05_Arrays/Dia_05_Arrays.md) | [Dia 7 >>](../Dia_07_Funcoes/Dia_07_Funcoes.md)
|
||||
|
||||

|
||||
|
||||
- [📔 Dia 6](#-dia-6)
|
||||
- [Loops](#loops)
|
||||
- [Loop for](#for-loop)
|
||||
- [Loop while](#while-loop)
|
||||
- [Loop do while](#do-while-loop)
|
||||
- [Loop for of](#for-of-loop)
|
||||
- [break](#break)
|
||||
- [continue](#continue)
|
||||
- [💻 Exercícios: Dia 6](#-exercíciosdia-6)
|
||||
- [Exercícios: Nível 1](#exercícios-nível-1)
|
||||
- [Exercícios: Nível 2](#exercícios-nível-2)
|
||||
- [Exercícios: Nível 3](#exercícios-nível-3)
|
||||
|
||||
# 📔 Dia 6
|
||||
|
||||
## Loops
|
||||
|
||||
A maioria das atividades que fazemos na vida estão cheias de repetições. Imagine se eu pedisse para você imprimir de 0 a 100 usando console.log(). Para implementar esta simples tarefa pode levar de 2 a 5 minutos, esse tipo de tarefa tediosa e repetitiva pode ser realizada usando loop. Se você prefere assistir a vídeos, pode conferir os [tutoriais em vídeo](https://www.youtube.com/channel/UCM4xOopkYiPwJqyKsSqL9mw)
|
||||
|
||||
Em linguagens de programação para realizar tarefa repetitiva usamos diferentes tipos de loops. Os seguintes exemplos são os loops mais usados em JavaScript e outras linguagens de programação.
|
||||
|
||||
### Loop for
|
||||
|
||||
```js
|
||||
// Estrutura do loop for
|
||||
for(initialization, condition, increment/decrement){
|
||||
// código vai aqui
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
// 0 1 2 3 4 5
|
||||
```
|
||||
|
||||
```js
|
||||
for (let i = 5; i >= 0; i--) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
// 5 4 3 2 1 0
|
||||
```
|
||||
|
||||
```js
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
console.log(`${i} * ${i} = ${i * i}`);
|
||||
}
|
||||
```
|
||||
|
||||
```sh
|
||||
0 * 0 = 0
|
||||
1 * 1 = 1
|
||||
2 * 2 = 4
|
||||
3 * 3 = 9
|
||||
4 * 4 = 16
|
||||
5 * 5 = 25
|
||||
```
|
||||
|
||||
```js
|
||||
const paises = ['Finlandia', 'Suecia', 'Dinamarca', 'Noruega', 'Islandia'];
|
||||
const novoArray = [];
|
||||
for (let i = 0; i < paises.length; i++) {
|
||||
novoArray.push(paises[i].toUpperCase());
|
||||
}
|
||||
|
||||
// ["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"]
|
||||
```
|
||||
|
||||
Adicionando todos os elementos no array
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
let soma = 0;
|
||||
for (let i = 0; i < numeros.length; i++) {
|
||||
soma = soma + numeros[i]; // pode ser encurtado, soma += numeros[i]
|
||||
}
|
||||
|
||||
console.log(soma); // 15
|
||||
```
|
||||
|
||||
Criando um novo array com base no array existente
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
const novoArray = [];
|
||||
let soma = 0;
|
||||
for (let i = 0; i < numeros.length; i++) {
|
||||
novoArray.push(numeros[i] ** 2);
|
||||
}
|
||||
|
||||
console.log(novoArray); // [1, 4, 9, 16, 25]
|
||||
```
|
||||
|
||||
```js
|
||||
const paises = ['Finlandia', 'Suecia', 'Noruega', 'Dinamarca', 'Islandia'];
|
||||
const novoArray = [];
|
||||
for (let i = 0; i < paises.length; i++) {
|
||||
// A função toUpperCase() é usada para converter o texto em maiúsculas
|
||||
novoArray.push(paises[i].toUpperCase());
|
||||
}
|
||||
|
||||
console.log(novoArray); // ['FINLANDIA', 'SUECIA', 'NORUEGA', 'DINAMARCA', 'ISLANDIA']
|
||||
```
|
||||
|
||||
### loop while
|
||||
|
||||
```js
|
||||
let i = 0;
|
||||
while (i <= 5) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
|
||||
// 0 1 2 3 4 5
|
||||
```
|
||||
|
||||
### loop do while
|
||||
|
||||
```js
|
||||
let i = 0;
|
||||
do {
|
||||
console.log(i);
|
||||
i++;
|
||||
} while (i <= 5);
|
||||
|
||||
// 0 1 2 3 4 5
|
||||
```
|
||||
|
||||
### for of loop
|
||||
|
||||
Nos usamos o loop for of para arrays. É uma maneira muito útil de iterar através de um array se não estivermos interessados no índice de cada elemento no array.
|
||||
|
||||
```js
|
||||
for (const element of arr) {
|
||||
// código vai aqui
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
|
||||
for (const num of numeros) {
|
||||
console.log(num);
|
||||
}
|
||||
|
||||
// 1 2 3 4 5
|
||||
|
||||
for (const num of numeros) {
|
||||
console.log(num * num);
|
||||
}
|
||||
|
||||
// 1 4 9 16 25
|
||||
|
||||
// adicionando todos os elementos no array
|
||||
let soma = 0;
|
||||
for (const num of numeros) {
|
||||
soma = soma + num;
|
||||
// pode ser encurtado assim, soma += num
|
||||
// depois disso, usaremos a sintaxe mais curta (+=, -=, *=, /= etc)
|
||||
}
|
||||
console.log(soma); // 15
|
||||
|
||||
const webTechs = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Redux',
|
||||
'Node',
|
||||
'MongoDB',
|
||||
];
|
||||
|
||||
for (const tech of webTechs) {
|
||||
console.log(tech.toUpperCase());
|
||||
}
|
||||
|
||||
// HTML CSS JAVASCRIPT REACT NODE MONGODB
|
||||
|
||||
for (const tech of webTechs) {
|
||||
console.log(tech[0]); // pega apenas a primeira letra de cada elemento, H C J R N M
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
const paises = ['Finlandia', 'Suecia', 'Noruega', 'Dinamarca', 'Islandia'];
|
||||
const novoArray = [];
|
||||
for (const country of paises) {
|
||||
novoArray.push(country.toUpperCase());
|
||||
}
|
||||
|
||||
console.log(novoArray); // ['FINLANDIA', 'SUECIA', 'NORUEGA', 'DINAMARCA', 'ISLANDIA']
|
||||
```
|
||||
|
||||
### break
|
||||
|
||||
Break é usado para interromper um loop.
|
||||
|
||||
```js
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
if (i == 3) {
|
||||
break;
|
||||
}
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
// 0 1 2
|
||||
```
|
||||
|
||||
O código acima para se 3 for encontrado no processo de iteração.
|
||||
|
||||
### continue
|
||||
|
||||
Nós usamos a palavra-chave _continue_ para pular certas iterações.
|
||||
|
||||
```js
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
if (i == 3) {
|
||||
continue;
|
||||
}
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
// 0 1 2 4 5
|
||||
```
|
||||
|
||||
🌕 Você é tão corajoso, você chegou tão longe. Agora, você ganhou o poder de automatizar tarefas repetitivas e tediosas. Você acabou de completar os desafios do dia 6 e está 6 etapas a mais para sua grandiosidade. Agora alguns exercícios para seu cérebro e seus músculos.
|
||||
|
||||
## 💻 Exercícios:Dia 6
|
||||
|
||||
### Exercícios: Nível 1
|
||||
|
||||
```js
|
||||
const paises = [
|
||||
'Albania',
|
||||
'Bolivia',
|
||||
'Canada',
|
||||
'Dinamarca',
|
||||
'Ethiopia',
|
||||
'Finlandia',
|
||||
'Germany',
|
||||
'Hungary',
|
||||
'Ireland',
|
||||
'Japan',
|
||||
'Kenya',
|
||||
];
|
||||
|
||||
const webTechs = [
|
||||
'HTML',
|
||||
'CSS',
|
||||
'JavaScript',
|
||||
'React',
|
||||
'Redux',
|
||||
'Node',
|
||||
'MongoDB',
|
||||
];
|
||||
|
||||
const mernStack = ['MongoDB', 'Express', 'React', 'Node'];
|
||||
```
|
||||
|
||||
1. Itere de 0 a 10 usando um loop for, faça o mesmo usando um loop while e um loop do while
|
||||
2. Itere de 10 a 0 usando um loop for, faça o mesmo usando um loop while e um loop do while
|
||||
3. Itere de 0 para n usando um loop for
|
||||
<!-- 4. Write a loop that makes the following pattern using console.log(): -->
|
||||
4. Escreva um loop que faz o seguinte padrão usando console.log():
|
||||
|
||||
```js
|
||||
#
|
||||
##
|
||||
###
|
||||
####
|
||||
#####
|
||||
######
|
||||
#######
|
||||
```
|
||||
|
||||
5. Use loop para imprimir o seguinte padrão:
|
||||
|
||||
```sh
|
||||
0 x 0 = 0
|
||||
1 x 1 = 1
|
||||
2 x 2 = 4
|
||||
3 x 3 = 9
|
||||
4 x 4 = 16
|
||||
5 x 5 = 25
|
||||
6 x 6 = 36
|
||||
7 x 7 = 49
|
||||
8 x 8 = 64
|
||||
9 x 9 = 81
|
||||
10 x 10 = 100
|
||||
```
|
||||
|
||||
6. Usando loop imprima o seguinte padrão
|
||||
|
||||
```sh
|
||||
i i^2 i^3
|
||||
0 0 0
|
||||
1 1 1
|
||||
2 4 8
|
||||
3 9 27
|
||||
4 16 64
|
||||
5 25 125
|
||||
6 36 216
|
||||
7 49 343
|
||||
8 64 512
|
||||
9 81 729
|
||||
10 100 1000
|
||||
```
|
||||
|
||||
7. Use um loop para iterar de 0 a 100 e imprimir apenas números pares
|
||||
8. Use um loop para iterar de 0 a 100 e imprimir apenas números ímpares
|
||||
9. Use um loop para iterar de 0 a 100 e imprimir apenas números primos
|
||||
10. Use um loop for para iterar de 0 a 100 e imprimir a soma de todos os números.
|
||||
|
||||
```sh
|
||||
A soma de todos os números de 0 a 100 é 5050.
|
||||
```
|
||||
|
||||
11. Use um loop for para iterar de 0 a 100 e imprimir a soma de todos os números pares e a soma de todos os números ímpares.
|
||||
|
||||
```sh
|
||||
A soma de todos os números pares de 0 a 100 é 2550. E a soma de todos os números ímpares de 0 a 100 é 2500.
|
||||
```
|
||||
|
||||
12. Use um loop for para iterar de 0 a 100 e imprimir a soma de todos os números pares e a soma de todos os números ímpares. Imprima a soma de pares e a soma de ímpares como array.
|
||||
|
||||
````sh
|
||||
[2550, 2500]
|
||||
|
||||
```sh
|
||||
[2550, 2500]
|
||||
````
|
||||
|
||||
13. Desenvolva um pequeno script que gere um array de 5 números aleatórios.
|
||||
14. Desenvolva um pequeno script que gere um array de 5 números aleatórios e os números devem ser únicos
|
||||
15. Desenvolva um pequeno script que gere um id aleatório de seis caracteres:
|
||||
|
||||
```sh
|
||||
5j2khz
|
||||
```
|
||||
|
||||
### Exercícios: Nível 2
|
||||
|
||||
1. Desenvolva um pequeno script que gere um id aleatório de qualquer número de caracteres:
|
||||
|
||||
```sh
|
||||
fe3jo1gl124g
|
||||
```
|
||||
|
||||
```sh
|
||||
xkqci4utda1lmbelpkm03rba
|
||||
```
|
||||
|
||||
1. Escreva um script que gere um número hexadecimal aleatório.
|
||||
|
||||
```sh
|
||||
'#ee33df'
|
||||
```
|
||||
|
||||
1. Escreva um script que gere um número de cor rgb aleatório.
|
||||
|
||||
```sh
|
||||
rgb(240,180,80)
|
||||
```
|
||||
|
||||
1. Usando o array paises acima, crie o seguinte novo array.
|
||||
|
||||
```sh
|
||||
["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]
|
||||
```
|
||||
|
||||
1. Usando o array paises acima, crie um array para o comprimento dos paises.
|
||||
|
||||
```sh
|
||||
[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]
|
||||
```
|
||||
|
||||
<!-- 1. Use the paises array to create the following array of arrays: -->
|
||||
|
||||
1. Use o array paises para criar o seguinte array de arrays:
|
||||
|
||||
```sh
|
||||
[
|
||||
['Albania', 'ALB', 7],
|
||||
['Bolivia', 'BOL', 7],
|
||||
['Canada', 'CAN', 6],
|
||||
['Dinamarca', 'DEN', 7],
|
||||
['Ethiopia', 'ETH', 8],
|
||||
['Finlandia', 'FIN', 7],
|
||||
['Germany', 'GER', 7],
|
||||
['Hungary', 'HUN', 7],
|
||||
['Ireland', 'IRE', 7],
|
||||
['Islandia', 'ICE', 7],
|
||||
['Japan', 'JAP', 5],
|
||||
['Kenya', 'KEN', 5]
|
||||
]
|
||||
```
|
||||
|
||||
1. No array de paises acima, verifique se algum dos paises contem a palavra "land". Se algum pais conter "land", imprima como um array. Se nenhum paises conter a palavra "land", imprima "Todos os paises são sem land".
|
||||
|
||||
```sh
|
||||
['Finlandia','Ireland', 'Islandia']
|
||||
```
|
||||
|
||||
<!-- 1. In above paises array, check if there is a country or paises end with a substring 'ia'. If there are paises end with, print it as array. If there is no country containing the word 'ai', print 'These are paises ends without ia'. -->
|
||||
|
||||
1. No array de paises acima, verifique se algum dos paises termina com a substring "ia". Se algum dos paises terminar, imprima como um array. Se nenhum dos paises conter a palavra "ai", imprima "Esses são os paises terminados com ia"
|
||||
|
||||
```sh
|
||||
['Albania', 'Bolivia','Ethiopia']
|
||||
```
|
||||
|
||||
1. Usando o array de paises acima, procure o paises que contenha a maior quantidade de caracteres.
|
||||
|
||||
```sh
|
||||
Ethiopia
|
||||
```
|
||||
|
||||
1. Usando o array de paises acima, encontre o paises que contenha apenas 5 caracteres.
|
||||
|
||||
```sh
|
||||
['Japan', 'Kenya']
|
||||
```
|
||||
|
||||
1. Encontre a palavra mais longa no array webTechs
|
||||
<!-- 1. Use the webTechs array to create the following array of arrays: -->
|
||||
1. Use o array webTechs para criar o seguinte array de arrays:
|
||||
|
||||
```sh
|
||||
[["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]]
|
||||
```
|
||||
|
||||
1. Uma aplicação criada usando MongoDB, Express, React e Node é chamada de aplicativo MERN. Crie o acrônimo MERN usando o array mernStack
|
||||
1. Itere através do array, ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] usando um loop for ou um loop for of e imprima os itens.
|
||||
1. Este é um array de frutas, ['banana', 'orange', 'mango', 'lemon'] inverta a ordem usando um loop sem usar o método reverse.
|
||||
1. Imprima todos os elementos do array como mostrado abaixo.
|
||||
|
||||
```js
|
||||
const fullStack = [
|
||||
['HTML', 'CSS', 'JS', 'React'],
|
||||
['Node', 'Express', 'MongoDB'],
|
||||
];
|
||||
```
|
||||
|
||||
```sh
|
||||
HTML
|
||||
CSS
|
||||
JS
|
||||
REACT
|
||||
NODE
|
||||
EXPRESS
|
||||
MONGODB
|
||||
```
|
||||
|
||||
### Exercícios: Nível 3
|
||||
|
||||
1. Copie o array de paises (Evite mutação)
|
||||
1. Arrays são mutáveis. Crie uma cópia do array que não modifique o original. Ordene o array copiado e armazene em uma variável sortedCountries
|
||||
1. Ordene o array webTechs e o array mernStack
|
||||
1. Extraia todos os paises que contenham a palavra "land" do [array de paises](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/paises.js) e imprima como array
|
||||
1. Encontre o paises que contenha a maior quantidade de caracteres no [array de paises](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/paises.js)
|
||||
1. Extraia todos os paises que contenham a palavra "land" do [array de paises](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/paises.js) e imprima como array
|
||||
1. Extraia todos os paises que contenham apenas quatro caracteres do [array de paises](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/paises.js) e imprima como array
|
||||
1. Extraia todos os paises que contenham duas ou mais palavras do [array de paises](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/paises.js) e imprima como array
|
||||
1. Inverta o [array de paises](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/paises.js) e coloque cada país em maiúsculas e armazene como um array
|
||||
|
||||
🎉 PARABÉNS ! 🎉
|
||||
|
||||
[<< Dia 5](../Dia_05_Arrays/Dia_05_Arrays.md) | [Dia 7 >>](../Dia_07_Funcoes/Dia_07_Funcoes.md)
|
@ -0,0 +1,195 @@
|
||||
const countries = [
|
||||
'Afghanistan',
|
||||
'Albania',
|
||||
'Algeria',
|
||||
'Andorra',
|
||||
'Angola',
|
||||
'Antigua and Barbuda',
|
||||
'Argentina',
|
||||
'Armenia',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Azerbaijan',
|
||||
'Bahamas',
|
||||
'Bahrain',
|
||||
'Bangladesh',
|
||||
'Barbados',
|
||||
'Belarus',
|
||||
'Belgium',
|
||||
'Belize',
|
||||
'Benin',
|
||||
'Bhutan',
|
||||
'Bolivia',
|
||||
'Bosnia and Herzegovina',
|
||||
'Botswana',
|
||||
'Brazil',
|
||||
'Brunei',
|
||||
'Bulgaria',
|
||||
'Burkina Faso',
|
||||
'Burundi',
|
||||
'Cambodia',
|
||||
'Cameroon',
|
||||
'Canada',
|
||||
'Cape Verde',
|
||||
'Central African Republic',
|
||||
'Chad',
|
||||
'Chile',
|
||||
'China',
|
||||
'Colombi',
|
||||
'Comoros',
|
||||
'Congo (Brazzaville)',
|
||||
'Congo',
|
||||
'Costa Rica',
|
||||
"Cote d'Ivoire",
|
||||
'Croatia',
|
||||
'Cuba',
|
||||
'Cyprus',
|
||||
'Czech Republic',
|
||||
'Denmark',
|
||||
'Djibouti',
|
||||
'Dominica',
|
||||
'Dominican Republic',
|
||||
'East Timor (Timor Timur)',
|
||||
'Ecuador',
|
||||
'Egypt',
|
||||
'El Salvador',
|
||||
'Equatorial Guinea',
|
||||
'Eritrea',
|
||||
'Estonia',
|
||||
'Ethiopia',
|
||||
'Fiji',
|
||||
'Finland',
|
||||
'France',
|
||||
'Gabon',
|
||||
'Gambia, The',
|
||||
'Georgia',
|
||||
'Germany',
|
||||
'Ghana',
|
||||
'Greece',
|
||||
'Grenada',
|
||||
'Guatemala',
|
||||
'Guinea',
|
||||
'Guinea-Bissau',
|
||||
'Guyana',
|
||||
'Haiti',
|
||||
'Honduras',
|
||||
'Hungary',
|
||||
'Iceland',
|
||||
'India',
|
||||
'Indonesia',
|
||||
'Iran',
|
||||
'Iraq',
|
||||
'Ireland',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Jamaica',
|
||||
'Japan',
|
||||
'Jordan',
|
||||
'Kazakhstan',
|
||||
'Kenya',
|
||||
'Kiribati',
|
||||
'Korea, North',
|
||||
'Korea, South',
|
||||
'Kuwait',
|
||||
'Kyrgyzstan',
|
||||
'Laos',
|
||||
'Latvia',
|
||||
'Lebanon',
|
||||
'Lesotho',
|
||||
'Liberia',
|
||||
'Libya',
|
||||
'Liechtenstein',
|
||||
'Lithuania',
|
||||
'Luxembourg',
|
||||
'Macedonia',
|
||||
'Madagascar',
|
||||
'Malawi',
|
||||
'Malaysia',
|
||||
'Maldives',
|
||||
'Mali',
|
||||
'Malta',
|
||||
'Marshall Islands',
|
||||
'Mauritania',
|
||||
'Mauritius',
|
||||
'Mexico',
|
||||
'Micronesia',
|
||||
'Moldova',
|
||||
'Monaco',
|
||||
'Mongolia',
|
||||
'Morocco',
|
||||
'Mozambique',
|
||||
'Myanmar',
|
||||
'Namibia',
|
||||
'Nauru',
|
||||
'Nepal',
|
||||
'Netherlands',
|
||||
'New Zealand',
|
||||
'Nicaragua',
|
||||
'Niger',
|
||||
'Nigeria',
|
||||
'Norway',
|
||||
'Oman',
|
||||
'Pakistan',
|
||||
'Palau',
|
||||
'Panama',
|
||||
'Papua New Guinea',
|
||||
'Paraguay',
|
||||
'Peru',
|
||||
'Philippines',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Qatar',
|
||||
'Romania',
|
||||
'Russia',
|
||||
'Rwanda',
|
||||
'Saint Kitts and Nevis',
|
||||
'Saint Lucia',
|
||||
'Saint Vincent',
|
||||
'Samoa',
|
||||
'San Marino',
|
||||
'Sao Tome and Principe',
|
||||
'Saudi Arabia',
|
||||
'Senegal',
|
||||
'Serbia and Montenegro',
|
||||
'Seychelles',
|
||||
'Sierra Leone',
|
||||
'Singapore',
|
||||
'Slovakia',
|
||||
'Slovenia',
|
||||
'Solomon Islands',
|
||||
'Somalia',
|
||||
'South Africa',
|
||||
'Spain',
|
||||
'Sri Lanka',
|
||||
'Sudan',
|
||||
'Suriname',
|
||||
'Swaziland',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Syria',
|
||||
'Taiwan',
|
||||
'Tajikistan',
|
||||
'Tanzania',
|
||||
'Thailand',
|
||||
'Togo',
|
||||
'Tonga',
|
||||
'Trinidad and Tobago',
|
||||
'Tunisia',
|
||||
'Turkey',
|
||||
'Turkmenistan',
|
||||
'Tuvalu',
|
||||
'Uganda',
|
||||
'Ukraine',
|
||||
'United Arab Emirates',
|
||||
'United Kingdom',
|
||||
'United States',
|
||||
'Uruguay',
|
||||
'Uzbekistan',
|
||||
'Vanuatu',
|
||||
'Vatican City',
|
||||
'Venezuela',
|
||||
'Vietnam',
|
||||
'Yemen',
|
||||
'Zambia',
|
||||
'Zimbabwe'
|
||||
]
|
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:07 Day </title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>30DaysOfJavaScript:07 Day</h1>
|
||||
<h2>Functions</h2>
|
||||
|
||||
<script src="./data/countries.js"></script>
|
||||
<script src="./scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
@ -0,0 +1,2 @@
|
||||
console.log(countries)
|
||||
alert('Open the console and check if the countries has been loaded')
|
@ -0,0 +1,724 @@
|
||||
<div align="center">
|
||||
<h1>30 Dias De JavaScript: Funções</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Autor:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small>Janeiro, 2020</small>
|
||||
</sub>
|
||||
|
||||
</div>
|
||||
|
||||
[<< Dia 6](../Dia_06_Loops/dia_06_Loops.md) | [Dia 8 >>](../Dia_08_Objetos/dia_08_Objetos.md)
|
||||
|
||||

|
||||
|
||||
- [📔 Dia 7](#-dia-7)
|
||||
- [Funções](#funções)
|
||||
- [Declaração de Função](#declaração-de-função)
|
||||
- [Função sem parâmetro e retorno](#função-sem-parâmetro-e-retorno)
|
||||
- [Função retornando valor](#função-retornando-valor)
|
||||
- [Função com um parâmetro](#função-com-um-parâmetro)
|
||||
- [Função com dois parâmetros](#função-com-dois-parâmetros)
|
||||
- [Função com muitos parâmetros](#função-com-muitos-parâmetros)
|
||||
- [Função com número ilimitado de parâmetros](#função-com-número-ilimitado-de-parâmetros)
|
||||
- [Número ilimitado de parâmetros em função regular](#número-ilimitado-de-parâmetros-em-função-regular)
|
||||
- [Número ilimitado de parâmetros em função de seta](#número-ilimitado-de-parâmetros-em-função-de-seta)
|
||||
- [Função Anônima](#função-anônima)
|
||||
- [Função de Expressão](#função-de-expressão)
|
||||
- [Funções Autoinvocáveis](#funções-autoinvocáveis)
|
||||
- [Função de Seta](#função-de-seta)
|
||||
- [Função com parâmetros padrão](#função-com-parâmetros-padrão)
|
||||
- [Declaração de função versus Função de seta](#declaração-de-função-versus-função-de-seta)
|
||||
- [💻 Exercícios](#-exercícios)
|
||||
- [Exercícios: Nível 1](#exercícios-nível-1)
|
||||
- [Exercícios: Nível 2](#exercícios-nível-2)
|
||||
- [Exercícios: Nível 3](#exercícios-nível-3)
|
||||
|
||||
# 📔 Dia 7
|
||||
|
||||
## Funções
|
||||
|
||||
Até agora, vimos muitas funções integradas no JavaScript. Nesta seção, focaremos em funções personalizadas. O que é uma função? Antes de começarmos a criar funções, vamos entender o que é uma função e por que precisamos de funções?
|
||||
|
||||
Uma função é um bloco de código reutilizável ou declarações de programação projetadas para realizar uma tarefa específica.
|
||||
Uma função é declarada pela palavra-chave function seguida de um nome, seguido por parênteses (). Os parênteses podem conter um parâmetro. Se uma função tiver um parâmetro, ela será chamada com um argumento. Uma função também pode ter um parâmetro padrão. Para armazenar dados em uma função, ela deve retornar algum tipo de dado. Para obter o valor, chamamos ou invocamos uma função.
|
||||
Funções tornam o código:
|
||||
|
||||
- Limpo e fácil de ler
|
||||
- Reutilizável
|
||||
- Fácil de testar
|
||||
|
||||
Uma função pode ser declarada ou criada de várias maneiras:
|
||||
|
||||
- _Declaração de função_
|
||||
- _Função de expressão_
|
||||
- _Função anônima_
|
||||
- _Função de seta_ (Arrow Function)
|
||||
|
||||
### Declaração de Função
|
||||
|
||||
Vamos ver como declarar uma função e como chamá-la.
|
||||
|
||||
```js
|
||||
// declarando uma função sem um parâmetro
|
||||
function nomeDaFuncao() {
|
||||
// o código vai aqui
|
||||
}
|
||||
nomeDaFuncao(); // chamando a função pelo nome e com parênteses
|
||||
```
|
||||
|
||||
### Função sem parâmetro e retorno
|
||||
|
||||
A função pode ser declarada sem um parâmetro.
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```js
|
||||
// função sem parâmetro, uma função que faz um número ao quadrado
|
||||
function quadrado() {
|
||||
let num = 2;
|
||||
let sq = num * num;
|
||||
console.log(sq);
|
||||
}
|
||||
|
||||
quadrado(); // 4
|
||||
|
||||
// função sem parâmetro
|
||||
function somarDoisNumeros() {
|
||||
let numUm = 10;
|
||||
let numDois = 20;
|
||||
let soma = numUm + numDois;
|
||||
|
||||
console.log(soma);
|
||||
}
|
||||
|
||||
somarDoisNumeros(); // uma função tem que ser chamada pelo seu nome para ser executada
|
||||
```
|
||||
|
||||
```js
|
||||
function imprimirNomeCompleto() {
|
||||
let primeiroNome = 'Asabeneh';
|
||||
let sobrenome = 'Yetayeh';
|
||||
let espaco = ' ';
|
||||
let nomeCompleto = primeiroNome + espaco + sobrenome;
|
||||
console.log(nomeCompleto);
|
||||
}
|
||||
|
||||
imprimirNomeCompleto(); // chamando uma função
|
||||
```
|
||||
|
||||
### Função retornando valor
|
||||
|
||||
A função também pode retornar valores, se uma função não retornar valores o valor da função é indefinido. Vamos escrever as funções acima com retorno. De agora em diante, retornamos valor para uma função em vez de imprimi-lo.
|
||||
|
||||
```js
|
||||
function imprimirNomeCompleto() {
|
||||
let primeiroNome = 'Asabeneh';
|
||||
let sobrenome = 'Yetayeh';
|
||||
let espaco = ' ';
|
||||
let nomeCompleto = primeiroNome + espaco + sobrenome;
|
||||
return nomeCompleto;
|
||||
}
|
||||
console.log(imprimirNomeCompleto());
|
||||
```
|
||||
|
||||
```js
|
||||
function somarDoisNumeros() {
|
||||
let numUm = 2;
|
||||
let numDois = 3;
|
||||
let total = numUm + numDois;
|
||||
return total;
|
||||
}
|
||||
|
||||
console.log(somarDoisNumeros());
|
||||
```
|
||||
|
||||
### Função com um parâmetro
|
||||
|
||||
Em uma função, podemos passar diferentes tipos de dados (número, string, booleano, objeto, função) como um parâmetro.
|
||||
|
||||
```js
|
||||
// função com um parâmetro
|
||||
function nomeDaFuncao(param1) {
|
||||
// o código vai aqui
|
||||
}
|
||||
nomeDaFuncao(param1); // durante a chamada ou invocação, um argumento é necessário
|
||||
|
||||
function areaDoCirculo(r) {
|
||||
let area = Math.PI * r * r;
|
||||
return area;
|
||||
}
|
||||
|
||||
console.log(areaDoCirculo(10)); // deve ser chamada com um argumento
|
||||
|
||||
function quadrado(numero) {
|
||||
return numero * numero;
|
||||
}
|
||||
|
||||
console.log(quadrado(10));
|
||||
```
|
||||
|
||||
### Função com dois parâmetros
|
||||
|
||||
```js
|
||||
// função com dois parâmetros
|
||||
function nomeDaFuncao(param1, param2) {
|
||||
// o código vai aqui
|
||||
}
|
||||
nomeDaFuncao(param1, param2); // durante a chamada ou invocação, dois argumentos são necessários
|
||||
// Função sem parâmetro não recebe entrada, então vamos fazer uma função com parâmetros
|
||||
function somarDoisNumeros(numUm, numDois) {
|
||||
let soma = numUm + numDois;
|
||||
console.log(soma);
|
||||
}
|
||||
somarDoisNumeros(10, 20); // chamando funções
|
||||
// Se uma função não retornar, ela não armazena dados, então ela deve retornar
|
||||
|
||||
function somarDoisNumeros(numUm, numDois) {
|
||||
let soma = numUm + numDois;
|
||||
return soma;
|
||||
}
|
||||
|
||||
console.log(somarDoisNumeros(10, 20));
|
||||
function imprimirNomeCompleto(primeiroNome, sobrenome) {
|
||||
return `${primeiroNome} ${sobrenome}`;
|
||||
}
|
||||
console.log(imprimirNomeCompleto('Asabeneh', 'Yetayeh'));
|
||||
```
|
||||
|
||||
### Função com muitos parâmetros
|
||||
|
||||
```js
|
||||
// função com vários parâmetros
|
||||
function nomeDaFuncao(param1, param2, param3,...) {
|
||||
// o código vai aqui
|
||||
}
|
||||
nomeDaFuncao(param1, param2, param3,...); // durante a chamada ou invocação, três argumentos são necessários
|
||||
|
||||
// esta função recebe um array como parâmetro e soma os números no array
|
||||
function somarValoresArray(arr) {
|
||||
let soma = 0;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
soma = soma + arr[i];
|
||||
}
|
||||
return soma;
|
||||
}
|
||||
const numeros = [1, 2, 3, 4, 5];
|
||||
// chamando a função
|
||||
console.log(somarValoresArray(numeros));
|
||||
|
||||
const areaDoCirculo = (raio) => {
|
||||
let area = Math.PI * raio * raio;
|
||||
return area;
|
||||
}
|
||||
console.log(areaDoCirculo(10));
|
||||
```
|
||||
|
||||
### Função com número ilimitado de parâmetros
|
||||
|
||||
Às vezes, não sabemos quantos argumentos o usuário vai passar. Portanto, devemos saber como escrever uma função que pode receber um número ilimitado de argumentos. A maneira de fazer isso tem uma diferença significativa entre uma declaração de função (função regular) e uma função de seta. Vamos ver exemplos em ambas declaração de função e função de seta.
|
||||
|
||||
#### Número ilimitado de parâmetros em função regular
|
||||
|
||||
Uma declaração de função fornece um objeto de argumentos de escopo de função. Qualquer coisa que passarmos como argumento na função pode ser acessada a partir do objeto arguments dentro das funções. Vamos ver um exemplo.
|
||||
|
||||
```js
|
||||
// Vamos acessar o objeto arguments
|
||||
|
||||
function somarTodosNums() {
|
||||
console.log(arguments);
|
||||
}
|
||||
|
||||
somarTodosNums(1, 2, 3, 4);
|
||||
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
|
||||
```
|
||||
|
||||
```js
|
||||
// declaração de função
|
||||
|
||||
function somarTodosNums() {
|
||||
let soma = 0;
|
||||
for (let i = 0; i < arguments.length; i++) {
|
||||
soma += arguments[i];
|
||||
}
|
||||
return soma;
|
||||
}
|
||||
|
||||
console.log(somarTodosNums(1, 2, 3, 4)); // 10
|
||||
console.log(somarTodosNums(10, 20, 13, 40, 10)); // 93
|
||||
console.log(somarTodosNums(15, 20, 30, 25, 10, 33, 40)); // 173
|
||||
```
|
||||
|
||||
#### Número ilimitado de parâmetros em função de seta
|
||||
|
||||
A função de seta não possui o objeto de argumentos de escopo de função. Para implementar uma função que recebe um número ilimitado de argumentos em uma função de seta, usamos o operador de propagação seguido por qualquer nome de parâmetro. Qualquer coisa que passarmos como argumento na função pode ser acessada como array na função de seta. Vamos ver um exemplo.
|
||||
|
||||
```js
|
||||
// Vamos acessar o objeto arguments
|
||||
|
||||
const somarTodosNums = (...args) => {
|
||||
// console.log(arguments), objeto de arguments não encontrado em função de seta
|
||||
// em vez disso, usamos um parâmetro seguido pelo operador de propagação (...)
|
||||
console.log(args);
|
||||
};
|
||||
|
||||
somarTodosNums(1, 2, 3, 4);
|
||||
// [1, 2, 3, 4]
|
||||
```
|
||||
|
||||
```js
|
||||
// declaração de função
|
||||
|
||||
const somarTodosNums = (...args) => {
|
||||
let soma = 0;
|
||||
for (const elemento of args) {
|
||||
soma += elemento;
|
||||
}
|
||||
return soma;
|
||||
};
|
||||
|
||||
console.log(somarTodosNums(1, 2, 3, 4)); // 10
|
||||
console.log(somarTodosNums(10, 20, 13, 40, 10)); // 93
|
||||
console.log(somarTodosNums(15, 20, 30, 25, 10, 33, 40)); // 173
|
||||
```
|
||||
|
||||
### Função Anônima
|
||||
|
||||
Função anônima ou sem nome.
|
||||
|
||||
```js
|
||||
const funcaoAnonima = function () {
|
||||
console.log(
|
||||
'Eu sou uma função anônima e meu valor está armazenado em funcaoAnonima'
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Função de Expressão
|
||||
|
||||
Funções de expressão são funções anônimas. Depois de criarmos uma função sem nome e a atribuímos a uma variável. Para retornar um valor da função, devemos chamar a variável. Veja o exemplo abaixo.
|
||||
|
||||
```js
|
||||
// Função de expressão
|
||||
const quadrado = function (n) {
|
||||
return n * n;
|
||||
};
|
||||
|
||||
console.log(quadrado(2)); // -> 4
|
||||
```
|
||||
|
||||
### Funções Autoinvocáveis
|
||||
|
||||
Funções autoinvocáveis são funções anônimas que não precisam ser chamadas para retornar um valor.
|
||||
|
||||
```js
|
||||
(function (n) {
|
||||
console.log(n * n);
|
||||
})(2); // 4, mas em vez de apenas imprimir, se quisermos retornar e armazenar os dados, fazemos como mostrado abaixo
|
||||
|
||||
let numeroAoQuadrado = (function (n) {
|
||||
return n * n;
|
||||
})(10);
|
||||
|
||||
console.log(numeroAoQuadrado);
|
||||
```
|
||||
|
||||
### Função de Seta
|
||||
|
||||
A função de seta é uma alternativa para escrever uma função, no entanto, declaração de função e função de seta têm algumas pequenas diferenças.
|
||||
|
||||
A função de seta usa seta em vez da palavra-chave function para declarar uma função. Vamos ver tanto a declaração de função quanto a função de seta.
|
||||
|
||||
```js
|
||||
// Assim é como escrevemos uma função normal ou de declaração
|
||||
// Vamos mudar esta função de declaração para uma função de seta
|
||||
function quadrado(n) {
|
||||
return n * n;
|
||||
}
|
||||
|
||||
console.log(quadrado(2)); // 4
|
||||
|
||||
const quadrado = (n) => {
|
||||
return n * n;
|
||||
};
|
||||
|
||||
console.log(quadrado(2)); // -> 4
|
||||
|
||||
// se tivermos apenas uma linha no bloco de código, pode ser escrito da seguinte forma, retorno explícito
|
||||
const quadrado = (n) => n * n; // -> 4
|
||||
```
|
||||
|
||||
```js
|
||||
const mudarParaMaiusculo = (arr) => {
|
||||
const newArr = [];
|
||||
for (const elemento of arr) {
|
||||
newArr.push(elemento.toUpperCase());
|
||||
}
|
||||
return newArr;
|
||||
};
|
||||
|
||||
const paises = ['Finlândia', 'Suécia', 'Noruega', 'Dinamarca', 'Islândia'];
|
||||
console.log(mudarParaMaiusculo(paises));
|
||||
|
||||
// ["FINLÂNDIA", "SUÉCIA", "NORUEGA", "DINAMARCA", "ISLÂNDIA"]
|
||||
```
|
||||
|
||||
```js
|
||||
const imprimirNomeCompleto = (primeiroNome, ultimoNome) => {
|
||||
return `${primeiroNome} ${ultimoNome}`;
|
||||
};
|
||||
|
||||
console.log(imprimirNomeCompleto('Asabeneh', 'Yetayeh'));
|
||||
```
|
||||
|
||||
A função acima tem apenas a declaração de retorno, portanto, podemos retorná-la explicitamente da seguinte forma.
|
||||
|
||||
```js
|
||||
const imprimirNomeCompleto = (primeiroNome, ultimoNome) =>
|
||||
`${primeiroNome} ${ultimoNome}`;
|
||||
|
||||
console.log(imprimirNomeCompleto('Asabeneh', 'Yetayeh'));
|
||||
```
|
||||
|
||||
### Função com parâmetros padrão
|
||||
|
||||
Às vezes passamos valores padrão para os parâmetros, quando invocamos a função se não passarmos um argumento o valor padrão será usado. Tanto a declaração de função quanto a função de seta podem ter um valor padrão ou valores.
|
||||
|
||||
```js
|
||||
// sintaxe
|
||||
// Declarando uma função
|
||||
function nomeDaFuncao(param = valor) {
|
||||
//códigos
|
||||
}
|
||||
|
||||
// Chamando função
|
||||
nomeDaFuncao();
|
||||
nomeDaFuncao(arg);
|
||||
```
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```js
|
||||
function saudacoes(nome = 'Pedro') {
|
||||
let mensagem = `${nome}, bem-vindo aos 30 Dias De JavaScript!`;
|
||||
return mensagem;
|
||||
}
|
||||
|
||||
console.log(saudacoes());
|
||||
console.log(saudacoes('Asabeneh'));
|
||||
```
|
||||
|
||||
```js
|
||||
function gerarNomeCompleto(primeiroNome = 'Asabeneh', ultimoNome = 'Yetayeh') {
|
||||
let espaco = ' ';
|
||||
let nomeCompleto = primeiroNome + espaco + ultimoNome;
|
||||
return nomeCompleto;
|
||||
}
|
||||
|
||||
console.log(gerarNomeCompleto());
|
||||
console.log(gerarNomeCompleto('David', 'Smith'));
|
||||
```
|
||||
|
||||
```js
|
||||
function calcularIdade(anoDeNascimento, anoAtual = 2019) {
|
||||
let idade = anoAtual - anoDeNascimento;
|
||||
return idade;
|
||||
}
|
||||
|
||||
console.log('Idade: ', calcularIdade(1819));
|
||||
```
|
||||
|
||||
```js
|
||||
function pesoDoObjeto(massa, gravidade = 9.81) {
|
||||
let peso = massa * gravidade + ' N'; // o valor deve ser convertido para string primeiro
|
||||
return peso;
|
||||
}
|
||||
|
||||
console.log('Peso de um objeto em Newton: ', pesoDoObjeto(100)); // gravidade na superfície da Terra
|
||||
console.log('Peso de um objeto em Newton: ', pesoDoObjeto(100, 1.62)); // gravidade na superfície da Lua
|
||||
```
|
||||
|
||||
Vamos ver como escrevemos as funções acimas com funções de seta
|
||||
|
||||
```js
|
||||
// sintaxe
|
||||
// Declarando uma função
|
||||
const nomeDaFuncao = (param = valor) => {
|
||||
//códigos
|
||||
};
|
||||
|
||||
// Chamando função
|
||||
nomeDaFuncao();
|
||||
nomeDaFuncao(arg);
|
||||
```
|
||||
|
||||
**Exemplo:**
|
||||
|
||||
```js
|
||||
const saudacoes = (nome = 'Pedro') => {
|
||||
let mensagem = nome + ', bem-vindo aos 30 Dias De JavaScript!';
|
||||
return mensagem;
|
||||
};
|
||||
|
||||
console.log(saudacoes());
|
||||
console.log(saudacoes('Asabeneh'));
|
||||
```
|
||||
|
||||
```js
|
||||
const gerarNomeCompleto = (
|
||||
primeiroNome = 'Asabeneh',
|
||||
ultimoNome = 'Yetayeh'
|
||||
) => {
|
||||
let espaco = ' ';
|
||||
let nomeCompleto = primeiroNome + espaco + ultimoNome;
|
||||
return nomeCompleto;
|
||||
};
|
||||
|
||||
console.log(gerarNomeCompleto());
|
||||
console.log(gerarNomeCompleto('David', 'Smith'));
|
||||
```
|
||||
|
||||
```js
|
||||
const calcularIdade = (anoDeNascimento, anoAtual = 2019) =>
|
||||
anoAtual - anoDeNascimento;
|
||||
console.log('Idade: ', calcularIdade(1819));
|
||||
```
|
||||
|
||||
```js
|
||||
const pesoDoObjeto = (massa, gravidade = 9.81) => massa * gravidade + ' N';
|
||||
|
||||
console.log('Peso de um objeto em Newton: ', pesoDoObjeto(100)); // gravidade na superfície da Terra
|
||||
console.log('Peso de um objeto em Newton: ', pesoDoObjeto(100, 1.62)); // gravidade na superfície da Lua
|
||||
```
|
||||
|
||||
### Declaração de função versus Função de seta
|
||||
|
||||
Será abordado em outra seção.
|
||||
|
||||
🌕 Você é uma estrela em ascensão, agora você conhece funções. Agora, você está super carregado com o poder das funções. Você acabou de completar os desafios do dia 7 e está 7 passos à frente no seu caminho para a grandeza. Agora faça alguns exercícios para o seu cérebro e para o seu músculo.
|
||||
|
||||
## 💻 Exercícios
|
||||
|
||||
### Exercícios: Nível 1
|
||||
|
||||
1. Declare uma função _fullName_ e ela imprime seu nome completo.
|
||||
2. Declare uma função _fullName_ e agora ela recebe firstName, lastName como parâmetro e retorna seu nome completo.
|
||||
3. Declare uma função _addNumbers_ e ela recebe dois parâmetros e retorna a soma.
|
||||
4. A área de um retângulo é calculada como segue: _área = comprimento x largura_. Escreva uma função que calcula _areaOfRectangle_.
|
||||
5. O perímetro de um retângulo é calculado como segue: _perímetro= 2x(comprimento + largura)_. Escreva uma função que calcula _perimeterOfRectangle_.
|
||||
6. O volume de um prisma retangular é calculado como segue: _volume = comprimento x largura x altura_. Escreva uma função que calcula _volumeOfRectPrism_.
|
||||
7. A área de um círculo é calculada como segue: _área = π x r x r_. Escreva uma função que calcula _areaOfCircle_
|
||||
8. A circunferência de um círculo é calculada como segue: _circunferência = 2πr_. Escreva uma função que calcula _circumOfCircle_
|
||||
9. A densidade de uma substância é calculada como segue:_densidade= massa/volume_. Escreva uma função que calcula _density_.
|
||||
10. A velocidade é calculada dividindo a distância total coberta por um objeto em movimento pela quantidade total de tempo tomado. Escreva uma função que calcula a velocidade de um objeto em movimento, _speed_.
|
||||
11. O peso de uma substância é calculado como segue: _peso = massa x gravidade_. Escreva uma função que calcula _weight_.
|
||||
12. A temperatura em oC pode ser convertida para oF usando esta fórmula: _oF = (oC x 9/5) + 32_. Escreva uma função que converte oC para oF _convertCelsiusToFahrenheit_.
|
||||
13. O índice de massa corporal (IMC) é calculado como segue: _imc = peso em Kg / (altura x altura) em m2_. Escreva uma função que calcula _bmi_. O IMC é usado para definir amplamente diferentes grupos de peso em adultos de 20 anos ou mais. Verifique se uma pessoa está _abaixo do peso, peso normal, sobrepeso_ ou _obesa_ com base nas informações fornecidas abaixo.
|
||||
|
||||
- Os mesmos grupos se aplicam a homens e mulheres.
|
||||
- _Abaixo do peso_: IMC é menor que 18.5
|
||||
- _Peso normal_: IMC é 18.5 a 24.9
|
||||
- _Sobrepeso_: IMC é 25 a 29.9
|
||||
- _Obeso_: IMC é 30 ou mais
|
||||
|
||||
14. Escreva uma função chamada _checkSeason_, ela recebe um parâmetro de mês e retorna a estação: Outono, Inverno, Primavera ou Verão.
|
||||
15. Math.max retorna seu maior argumento. Escreva uma função findMax que recebe três argumentos e retorna o máximo deles sem usar o método Math.max.
|
||||
|
||||
```js
|
||||
console.log(findMax(0, 10, 5));
|
||||
10;
|
||||
console.log(findMax(0, -10, -2));
|
||||
0;
|
||||
```
|
||||
|
||||
### Exercícios: Nível 2
|
||||
|
||||
1. Equação linear é calculada como segue: _ax + by + c = 0_. Escreva uma função que calcula o valor de uma equação linear, _solveLinEquation_.
|
||||
2. Equação quadrática é calculada como segue: _ax2 + bx + c = 0_. Escreva uma função que calcula o valor ou valores de uma equação quadrática, _solveQuadEquation_.
|
||||
|
||||
```js
|
||||
console.log(solveQuadratic()); // {0}
|
||||
console.log(solveQuadratic(1, 4, 4)); // {-2}
|
||||
console.log(solveQuadratic(1, -1, -2)); // {2, -1}
|
||||
console.log(solveQuadratic(1, 7, 12)); // {-3, -4}
|
||||
console.log(solveQuadratic(1, 0, -4)); //{2, -2}
|
||||
console.log(solveQuadratic(1, -1, 0)); //{1, 0}
|
||||
```
|
||||
|
||||
3. Declare uma função chamada _printArray_. Ela recebe um array como parâmetro e imprime cada valor do array.
|
||||
4. Escreva uma função chamada _showDateTime_ que mostra a hora neste formato: 08/01/2020 04:08 usando o objeto Date.
|
||||
|
||||
```sh
|
||||
showDateTime()
|
||||
08/01/2020 04:08
|
||||
```
|
||||
|
||||
5. Declare uma função chamada _swapValues_. Esta função troca o valor de x por y.
|
||||
|
||||
```js
|
||||
swapValues(3, 4); // x => 4, y=>3
|
||||
swapValues(4, 5); // x = 5, y = 4
|
||||
```
|
||||
|
||||
6. Declare uma função chamada _reverseArray_. Ela recebe um array como parâmetro e retorna o inverso do array (não use o método).
|
||||
|
||||
```js
|
||||
console.log(reverseArray([1, 2, 3, 4, 5]));
|
||||
//[5, 4, 3, 2, 1]
|
||||
console.log(reverseArray(['A', 'B', 'C']));
|
||||
//['C', 'B', 'A']
|
||||
```
|
||||
|
||||
7. Declare uma função chamada _capitalizeArray_. Ela recebe um array como parâmetro e retorna o array com letras maiúsculas.
|
||||
|
||||
8. Declare uma função chamada _addItem_. Ela recebe um item como parâmetro e retorna um array após adicionar o item.
|
||||
|
||||
9. Declare uma função chamada _removeItem_. Ela recebe um índice como parâmetro e retorna um array após remover um item.
|
||||
|
||||
10. Declare uma função chamada _sumOfNumbers_. Ela recebe um número como parâmetro e soma todos os números naquele intervalo.
|
||||
|
||||
11. Declare uma função chamada _sumOfOdds_. Ela recebe um número como parâmetro e soma todos os números ímpares naquele intervalo.
|
||||
|
||||
12. Declare uma função chamada _sumOfEven_. Ela recebe um número como parâmetro e soma todos os números pares naquele intervalo.
|
||||
|
||||
13. Declare uma função chamada _evensAndOdds_. Ela recebe um inteiro positivo como parâmetro e conta o número de pares e ímpares no número.
|
||||
|
||||
```sh
|
||||
evensAndOdds(100);
|
||||
The number of odds are 50.
|
||||
The number of evens are 51.
|
||||
```
|
||||
|
||||
14. Escreva uma função que recebe qualquer número de argumentos e retorna a soma dos argumentos.
|
||||
|
||||
```js
|
||||
sum(1, 2, 3); // -> 6
|
||||
sum(1, 2, 3, 4); // -> 10
|
||||
```
|
||||
|
||||
15. Escreva uma função que gera um _randomUserIp_.
|
||||
|
||||
16. Escreva uma função que gera um _randomMacAddress_.
|
||||
|
||||
17. Declare uma função chamada _randomHexaNumberGenerator_. Quando esta função é chamada, ela gera um número hexadecimal aleatório. A função retorna o número hexadecimal.
|
||||
|
||||
```sh
|
||||
console.log(randomHexaNumberGenerator());
|
||||
'#ee33df'
|
||||
```
|
||||
|
||||
18. Declare uma função chamada _userIdGenerator_. Quando esta função é chamada, ela gera um id de sete caracteres. A função retorna o id.
|
||||
|
||||
```sh
|
||||
console.log(userIdGenerator());
|
||||
41XTDbE
|
||||
```
|
||||
|
||||
### Exercícios: Nível 3
|
||||
|
||||
1. Modifique a função _userIdGenerator_. Declare uma função chamada _userIdGeneratedByUser_. Ela não recebe nenhum parâmetro, mas recebe duas entradas usando prompt(). Uma das entradas é o número de caracteres e a segunda entrada é o número de ids que devem ser gerados.
|
||||
|
||||
```sh
|
||||
userIdGeneratedByUser()
|
||||
'kcsy2
|
||||
SMFYb
|
||||
bWmeq
|
||||
ZXOYh
|
||||
2Rgxf
|
||||
'
|
||||
userIdGeneratedByUser()
|
||||
'1GCSgPLMaBAVQZ26
|
||||
YD7eFwNQKNs7qXaT
|
||||
ycArC5yrRupyG00S
|
||||
UbGxOFI7UXSWAyKN
|
||||
dIV0SSUTgAdKwStr
|
||||
'
|
||||
```
|
||||
|
||||
2. Escreva uma função chamada _rgbColorGenerator_ e ela gera cores RGB.
|
||||
|
||||
```sh
|
||||
rgbColorGenerator()
|
||||
rgb(125,244,255)
|
||||
```
|
||||
|
||||
3. Escreva uma função **_arrayOfHexaColors_** que retorna qualquer número de cores hexadecimais em um array.
|
||||
|
||||
4. Escreva uma função **_arrayOfRgbColors_** que retorna qualquer número de cores RGB em um array.
|
||||
|
||||
5. Escreva uma função **_convertHexaToRgb_** que converte cor hexadecimal para RGB e retorna uma cor RGB.
|
||||
|
||||
6. Escreva uma função **_convertRgbToHexa_** que converte cor RGB para hexadecimal e retorna uma cor hexadecimal.
|
||||
|
||||
7. Escreva uma função **_generateColors_** que pode gerar qualquer número de cores hexadecimais ou RGB.
|
||||
|
||||
```js
|
||||
console.log(generateColors('hexa', 3)); // ['#a3e12f', '#03ed55', '#eb3d2b']
|
||||
console.log(generateColors('hexa', 1)); // '#b334ef'
|
||||
console.log(generateColors('rgb', 3)); // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)']
|
||||
console.log(generateColors('rgb', 1)); // 'rgb(33,79, 176)'
|
||||
```
|
||||
|
||||
8. Chame sua função _shuffleArray_, ela recebe um array como parâmetro e retorna um array embaralhado.
|
||||
|
||||
9. Chame sua função _factorial_, ela recebe um número inteiro como parâmetro e retorna um fatorial do número.
|
||||
|
||||
10. Chame sua função _isEmpty_, ela recebe um parâmetro e verifica se está vazio ou não.
|
||||
|
||||
11. Chame sua função _sum_, ela recebe qualquer número de argumentos e retorna a soma.
|
||||
|
||||
12. Escreva uma função chamada _sumOfArrayItems_, ela recebe um parâmetro de array e retorna a soma de todos os itens. Verifique se todos os itens do array são do tipo número. Se não, forneça um feedback adequado.
|
||||
|
||||
13. Escreva uma função chamada _average_, ela recebe um parâmetro de array e retorna a média dos itens. Verifique se todos os itens do array são do tipo número. Se não, forneça um feedback adequado.
|
||||
|
||||
14. Escreva uma função chamada _modifyArray_ que recebe um array como parâmetro e modifica o quinto item do array e retorna o array. Se o comprimento do array for menor que cinco, retorna 'item não encontrado'.
|
||||
|
||||
```js
|
||||
console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']);
|
||||
```
|
||||
|
||||
```sh
|
||||
['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot']
|
||||
```
|
||||
|
||||
```js
|
||||
console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft', 'IBM']);
|
||||
```
|
||||
|
||||
```sh
|
||||
['Google', 'Facebook','Apple', 'Amazon','MICROSOFT', 'IBM']
|
||||
```
|
||||
|
||||
```js
|
||||
console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']);
|
||||
```
|
||||
|
||||
```sh
|
||||
'Not Found'
|
||||
```
|
||||
|
||||
15. Escreva uma função chamada _isPrime_, que verifica se um número é um número primo.
|
||||
|
||||
16. Escreva uma função que verifica se todos os itens são únicos no array.
|
||||
|
||||
17. Escreva uma função que verifica se todos os itens do array são do mesmo tipo de dados.
|
||||
|
||||
18. O nome de variável em JavaScript não suporta caracteres especiais ou símbolos exceto \$ ou \_. Escreva uma função **isValidVariable** que verifica se uma variável é válida ou inválida.
|
||||
|
||||
19. Escreva uma função que retorna um array de sete números aleatórios em uma faixa de 0-9. Todos os números devem ser únicos.
|
||||
|
||||
```js
|
||||
sevenRandomNumbers()[(1, 4, 5, 7, 9, 8, 0)];
|
||||
```
|
||||
|
||||
20. Escreva uma função chamada reverseCountries, ela recebe o array de países e, primeiro, copia o array e retorna a inversão do array original.
|
||||
|
||||
🎉 PARABÉNS ! 🎉
|
||||
|
||||
[<< Dia 6](../Dia_06_Loops/dia_06_Loops.md) | [Dia 8 >>](../Dia_08_Objetos/dia_08_Objetos.md)
|
Loading…
Reference in new issue