msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

Merge a1caf177ad into 29e4101818

Browse Source
pull/999/merge
Beatriz Gebhardt 3 months ago committed by GitHub
parent 29e4101818 a1caf177ad
commit 445b8a911c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
27 changed files with 4655 additions and 985 deletions
Show Stats Download Patch File Download Diff File

4
Portuguese/Dia_01_introdução/data-types-1.js
Unescape View File

@ -0,0 +1,4 @@
console.log(typeof nome);
console.log(typeof isBeautiful);
console.log(typeof idade);
console.log(typeof cidade);

46
Portuguese/Dia_01_introdução/exercices-1.js
Unescape View File

@ -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);

12
Portuguese/Dia_01_introdução/variable-1.js
Unescape View File

@ -0,0 +1,12 @@
//string
let nome = "Liz";
// boolean
let isBeautiful = true;
// undefined
let idade;
console.log(idade);
// null
let cidade = null;

209
Portuguese/Dia_02_Tipos_Dados/dia_02_starter/exercices-2.js
Unescape View File

@ -0,0 +1,209 @@
//1 - Declare uma variável chamada desafio e atribua a ela um valor inicial '30 Dias de JavaScript'.
let desafio = "30 Dias de JavaScript";
//2 - Imprimir uma string no console do browser usando console.log()
console.log(javaScript);
//3 - Imprimir o length da string no console do browser usando o console.log().
console.log(javaScript.length);
//4 - Troque todos os caracteres da string para letras maiúsculas usando o método toUpperCase().
console.log(desafio.toUpperCase());
//5 - Troque todos os caracteres da string para letras minúsculas usando o método toLowerCase().
console.log(desafio.toLowerCase());
//6 - Retirar (Slice) a primeira letra da string usando os métodos substr() ou substring().
console.log(desafio.substring(1));
console.log(desafio.slice(1));
//7 - Dividir a frase Days Of JavaScript de 30 Days Of JavaScript.
console.log(desafio.split(""));
//8 - Verificar se a string contém a palavra Script usando o método includes().
console.log(desafio.includes("Script"));
//9 - Separar a string em um array usando o método split().
console.log(desafio.split());
//10 - Separar a string 30 Dias de JavaScript com espaços usando o método split().
console.log(desafio.split(" "));
//11 - "Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon" split a string com vírgulas e mude-a para um array.
empresas = "Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon";
console.log(empresas.split(", "));
//12 - Mude 30 Dias de JavaScript para 30 Dias de Python usando o método replace().
console.log(desafio.split("Javascript").join("Phyton"));
//13 - Qual é o caractere no index 15 em "30 Dias de JavaScript' string? Use o método charAt().
let texto = "30 Dias de JavaScript";
let caractere = texto.charAt(15);
console.log(caractere);
//14 - Qual é o código do caractere de J em "30 Dias de JavaScript" string usando o método charCodeAt().
let texto1 = "30 Dias de JavaScript";
let codigo = texto1.charCodeAt(11);
console.log(codigo);
//15 - Use indexOf para determinar a posição da primeira ocorrência de a em 30 Dias de JavaScript.
console.log(desafio.indexOf("a"));
//16 - Use lastIndexOf para determinar a posição da última ocorrência de a em 30 Dias de JavaScript.
console.log(desafio.lastIndexOf("a"));
//17 - Use indexOf para encontrar a posição da primeira ocorrência da palavra because na seguinte frase:'You cannot end a sentence with because because because is a conjunction'.
let frase =
"You cannot end a sentence with because because because is a conjunction";
console.log(frase.indexOf("because"));
//18 - Use lastIndexOf para encontrar a posição da última ocorrência da palavra because na seguinte frase:'You cannot end a sentence with because because because is a conjunction'.
console.log(frase.lastIndexOf("because"));
//19 - Use search para encontrar a posição da primeira ocorrência da palavra because na seguinte frase:'You cannot end a sentence with because because because is a conjunction'.
console.log(frase.search("because"));
//20 - Use trim() para remover qualquer espaço adicional no início e no final da string .E.g " 30 Dias de JavaScript ".
let fraseComEspacos = " 30 Dias de JavaScript ";
console.log(fraseComEspacos.trim());
//21 - Use startsWith() com a string 30 Dias De JavaScript e faça o resultado ser verdadeiro.
console.log(desafio.startsWith("30 Dias De JavaScript"));
//22 - Use endsWith() com a string 30 Dias De JavaScript e faça o resultado ser verdadeiro.
let desafio2 = "30 Dias De JavaScript";
console.log(desafio2.endsWith("30 Dias De JavaScript"));
//23 - Use match() para encontrar todos os a's em 30 Dias De JavaScript.
let desafio3 = "30 Dias De JavaScript";
console.log(desafio3.match(/a/g));
//24 - Use concat() para unir "30 Dias de" e "JavaScript" para uma única string, "30 Dias de JavaScript".
let parte1 = "30 Dias de";
let parte2 = "JavaScript";
console.log(parte1.concat(" ", parte2));
//25 - Use repeat() para imprimir 30 Dias De JavaScript 2 vezes.
let repeticao = desafio.repeat(2);
console.log(repeticao);
//Exercícios 2
//Usando o console.log() imprimir a seguinte citação:
// "Não há exercício melhor para o coração que ir lá em baixo e levantar as pessoas" by John Holmes nos ensina a ajudar outras pessoas.
let citação = `"Não há exercício melhor para o coração que ir lá em baixo e levantar as pessoas" by John Holmes nos ensina a ajudar outras pessoas.`;
console.log(citação);
//Usando o console.log() imprimir a seguinte citação de Madre Teresa:
// "O amor não é paternalista e a caridade não tem a ver com pena, tem a ver com amor. Caridade e amor são a mesma coisa – com a caridade você dá amor, então não dê apenas dinheiro, mas estenda sua mão."
let citação2 = `"O amor não é paternalista e a caridade não tem a ver com pena, tem a ver com amor. Caridade e amor são a mesma coisa – com a caridade você dá amor, então não dê apenas dinheiro, mas estenda sua mão."`;
console.log(citação2);
//Verificar se typeOf "10" é exatamente igual a 10. Se não, faça ser exatamente igual.
let numero = "10";
console.log(typeof numero === "number" ? numero : Number(numero));
//Verificar se parseFloat("9.8) é igual a 10. Se não, faça ser exatamente igual com 10.
let numeroFloat = parseFloat("9.8");
console.log(numeroFloat === 10 ? numeroFloat : 10);
//Verificar se "ão" é encontrado em ambos algodão e jargão.
let palavra1 = "algodão";
let palavra2 = "jargão";
console.log(palavra1.includes("ão") && palavra2.includes("ão"));
//Espero que este curso não tenha muitos jargões. Verifique se jargões está na frase.
let fraseJargao = "Espero que este curso não tenha muitos jargões.";
console.log(fraseJargao.includes("jargões"));
//Gerar um número aleatório entre incluindo 0 e 100.
let numeroAleatorio = Math.floor(Math.random() * 101);
console.log(numeroAleatorio);
//Gerar um número aleatório entre incluindo 50 e 100.
let numeroAleatorio50a100 = Math.floor(Math.random() * 51) + 50;
console.log(numeroAleatorio50a100);
//Gerar um número aleatório entre incluindo 0 e 255.
let numeroAleatorio0a255 = Math.floor(Math.random() * 256);
console.log(numeroAleatorio0a255);
//Acesse os caracteres da string "JavaScript" usando um número aleatório.
let stringJavaScript = "JavaScript";
let indiceAleatorio = Math.floor(Math.random() * stringJavaScript.length);
console.log(stringJavaScript.charAt(indiceAleatorio));
//Use console.log() e imprimir os caracteres no seguinte padrão.
/*
1 1 1 1 1
2 1 2 4 8
3 1 3 9 27
4 1 4 16 64
5 1 5 25 125*/
console.log("1 1 1 1 1");
console.log("2 1 2 4 8");
console.log("3 1 3 9 27");
console.log("4 1 4 16 64");
console.log("5 1 5 25 125");
//Use substr para retirar da frase because because because da seguinte frase: 'You cannot end a sentence with because because because is a conjunction'.
let fraseRetirada =
"You cannot end a sentence with because because because is a conjunction";
let inicio = fraseRetirada.indexOf("because");
let fim = inicio + "because because because".length;
let resultado = fraseRetirada.substring(inicio, fim);
console.log(resultado);
//Exercícios 3
//"Amor é a melhor coisa neste mundo. Alguns encontraram seu amor e alguns ainda estão procurando pelo seu amor." Contar o número de palavras amor nesta frase.
let amor =
"Amor é a melhor coisa neste mundo. Alguns encontraram seu amor e alguns ainda estão procurando pelo seu amor.";
let contagemAmor = amor.match(/amor/gi);
console.log(
`A palavra "amor" aparece ${
contagemAmor ? contagemAmor.length : 0
} vezes na frase.`
);
//Use match() para contar os números de todos os because na seguinte frase: 'You cannot end a sentence with because because because is a conjunction'.
let fraseBecause =
"You cannot end a sentence with because because because is a conjunction";
let contagemBecause = fraseBecause.match(/because/gi);
console.log(
`A palavra "because" aparece ${
contagemBecause ? contagemBecause.length : 0
} vezes na frase.`
);
//Limpar o seguinte texto e encontrar a palavra mais repetida (dica, use replace e expressões regulares)
// const frase = " %I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching "
let textoLimpar =
" %I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching ";
let textoLimpo = textoLimpar
.replace(/[%$@&#;]/g, "")
.replace(/\s+/g, " ")
.trim()
.toLowerCase();
let palavras = textoLimpo.split(" ");
let contagemPalavras = {};
palavras.forEach((palavra) => {
contagemPalavras[palavra] = (contagemPalavras[palavra] || 0) + 1;
});
let palavraMaisRepetida = Object.keys(contagemPalavras).reduce((a, b) =>
contagemPalavras[a] > contagemPalavras[b] ? a : b
);
console.log(
`A palavra mais repetida é "${palavraMaisRepetida}" com ${contagemPalavras[palavraMaisRepetida]} ocorrências.`
);
//Calcular o total anual de uma pessoa extraindo os números do seguinte texto. "Ele recebe 5000 euros de salário por mês, 10000 euros de bônus anual, 15000 euros de cursos onlines por mês.'.
let textoSalario =
"Ele recebe 5000 euros de salário por mês, 10000 euros de bônus anual, 15000 euros de cursos onlines por mês.";
let numeros = textoSalario.match(/\d+/g).map(Number);
let salarioMensal = numeros[0];
let bonusAnual = numeros[1];
let cursosMensal = numeros[2];
let totalAnual = salarioMensal * 12 + bonusAnual + cursosMensal * 12;
console.log(`O total anual é ${totalAnual} euros.`);

844
Portuguese/Dia_02_Tipos_Dados/dia_02_tipos_dados.md
View File

File diff suppressed because it is too large Load Diff

46
Portuguese/Dia_03_Booleanos_Operadores_Data/03_day_starter/scripts/exercices-3.js
Unescape View File

@ -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);

12
Portuguese/Dia_03_Booleanos_Operadores_Data/03_day_starter/scripts/tiposdedados-3.js
Unescape View File

@ -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

5
Portuguese/Dia_03_Booleanos_Operadores_Data/03_day_starter/scripts/variavel-3.js
Unescape View File

@ -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;

792
Portuguese/Dia_03_Booleanos_Operadores_Data/Dia_03_booleanos_operadores_data.md
View File

File diff suppressed because it is too large Load Diff

140
Portuguese/Dia_04_Condicionais/04_day_starter/exercices- 4.js
Unescape View File

@ -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.");
}

15
Portuguese/Dia_04_Condicionais/04_day_starter/index.html
Unescape View File

@ -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>

3
Portuguese/Dia_04_Condicionais/04_day_starter/scripts/main.js
Unescape View File

@ -0,0 +1,3 @@
// this is your main.js script
alert('Open the browser console whenever you work on JavaScript')

375
Portuguese/Dia_04_Condicionais/Dia_04_condicionais.md
Unescape View File

@ -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)
![Trinta Dias de JavaScript](../../images/banners/day_1_4.png)
- [📔 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)

195
Portuguese/Dia_05_Arrays/05_day_starter/data/countries.js
Unescape View File

@ -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'
]

17
Portuguese/Dia_05_Arrays/05_day_starter/index.html
Unescape View File

@ -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>

3
Portuguese/Dia_05_Arrays/05_day_starter/scripts/main.js
Unescape View File

@ -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')

781
Portuguese/Dia_05_Arrays/Dia_05_arrays.md
Unescape View File

@ -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](../../images/banners/day_1_5.png)
- [📔 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.
![arr index](../../images/array_index.png)
```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)

149
Portuguese/Dia_05_Arrays/exercices-5.js
Unescape View File

@ -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);

195
Portuguese/Dia_06_Loops/06_day_starter/data/countries.js
Unescape View File

@ -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'
]

17
Portuguese/Dia_06_Loops/06_day_starter/index.html
Unescape View File

@ -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>

2
Portuguese/Dia_06_Loops/06_day_starter/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

491
Portuguese/Dia_06_Loops/dia_06_Loops.md
Unescape View File

@ -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 5](../../images/banners/day_1_6.png)
- [📔 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)

195
Portuguese/Dia_07_Funcoes/07_day_starter/data/countries.js
Unescape View File

@ -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'
]

17
Portuguese/Dia_07_Funcoes/07_day_starter/index.html
Unescape View File

@ -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>

2
Portuguese/Dia_07_Funcoes/07_day_starter/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')

724
Portuguese/Dia_07_Funcoes/Dia_07_Funcoes.md
Unescape View File

@ -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)
![Thirty Days Of JavaScript](../images/banners/day_1_7.png)
- [📔 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)

349
Portuguese/readMe.md
Unescape View File

@ -1,43 +1,43 @@
# 30 Dias de JavaScript
| # Dia | Tópicos |
| ----- | :-------------------------------------------------------------------------------------------------------------------------------------------------: |
| 01 | [Introdução](./readMe.md) |
| 02 | [Tipos de Dados](./02_Day_Data_types/02_day_data_types.md) |
| 03 | [Booleanos, Operadores, Data](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) |
| 04 | [Condicionais](./04_Day_Conditionals/04_day_conditionals.md) |
| 05 | [Arrays](./05_Day_Arrays/05_day_arrays.md) |
| 06 | [Loops](./06_Day_Loops/06_day_loops.md) |
| 07 | [Funções](./07_Day_Functions/07_day_functions.md) |
| 08 | [Objetos](./08_Day_Objects/08_day_objects.md) |
| 09 | [Higher Order Functions](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) |
| 10 | [Sets and Maps](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) |
| 11 | [Destructuring and Spreading](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) |
| 12 | [Expressões Regulares](./12_Day_Regular_expressions/12_day_regular_expressions.md) |
| 13 | [Método Console Objeto](./13_Day_Console_object_methods/13_day_console_object_methods.md) |
| # Dia | Tópicos |
| ----- | :------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 01 | [Introdução](./readMe.md) |
| 02 | [Tipos de Dados](./02_Day_Data_types/02_day_data_types.md) |
| 03 | [Booleanos, Operadores, Data](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) |
| 04 | [Condicionais](./04_Day_Conditionals/04_day_conditionals.md) |
| 05 | [Arrays](./05_Day_Arrays/05_day_arrays.md) |
| 06 | [Loops](./06_Day_Loops/06_day_loops.md) |
| 07 | [Funções](./07_Day_Functions/07_day_functions.md) |
| 08 | [Objetos](./08_Day_Objects/08_day_objects.md) |
| 09 | [Higher Order Functions](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) |
| 10 | [Sets and Maps](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) |
| 11 | [Destructuring and Spreading](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) |
| 12 | [Expressões Regulares](./12_Day_Regular_expressions/12_day_regular_expressions.md) |
| 13 | [Método Console Objeto](./13_Day_Console_object_methods/13_day_console_object_methods.md) |
| 14 | [Tratamento de Errors](./14_Day_Error_handling/14_day_error_handling.md) |
| 15 | [Classes](./15_Day_Classes/15_day_classes.md) |
| 16 | [JSON](./16_Day_JSON/16_day_json.md) |
| 17 | [Armazenamento na Web](./17_Day_Web_storages/17_day_web_storages.md) |
| 18 | [Promises](./18_Day_Promises/18_day_promises.md) |
| 19 | [Closure](./19_Day_Closures/19_day_closures.md) |
| 15 | [Classes](./15_Day_Classes/15_day_classes.md) |
| 16 | [JSON](./16_Day_JSON/16_day_json.md) |
| 17 | [Armazenamento na Web](./17_Day_Web_storages/17_day_web_storages.md) |
| 18 | [Promises](./18_Day_Promises/18_day_promises.md) |
| 19 | [Closure](./19_Day_Closures/19_day_closures.md) |
| 20 | [Escrevendo Código Limpo](./20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) |
| 21 | [DOM](./21_Day_DOM/21_day_dom.md) |
| 22 | [Manipulando DOM Objetos](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) |
| 23 | [Event Listeners](./23_Day_Event_listeners/23_day_event_listeners.md) |
| 24 | [Mini Projeto: Sistema Solar](./24_Day_Project_solar_system/24_day_project_solar_system.md) |
| 25 | [Mini Projeto: Visualização de Dados de Paises do mundo](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) |
| 21 | [DOM](./21_Day_DOM/21_day_dom.md) |
| 22 | [Manipulando DOM Objetos](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) |
| 23 | [Event Listeners](./23_Day_Event_listeners/23_day_event_listeners.md) |
| 24 | [Mini Projeto: Sistema Solar](./24_Day_Project_solar_system/24_day_project_solar_system.md) |
| 25 | [Mini Projeto: Visualização de Dados de Paises do mundo](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) |
| 26 | [Mini Projeto: Visualização de Dados de Paises do mundo 2](./26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) |
| 27 | [Mini Projeto: Portfólio](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) |
| 28 | [Mini Projeto: Leaderboard](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) |
| 29 | [Mini Projeto: Caracteres Animados](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) |
| 30 | [Projetos Finais](./30_Day_Mini_project_final/30_day_mini_project_final.md) |
| 27 | [Mini Projeto: Portfólio](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) |
| 28 | [Mini Projeto: Leaderboard](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) |
| 29 | [Mini Projeto: Caracteres Animados](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) |
| 30 | [Projetos Finais](./30_Day_Mini_project_final/30_day_mini_project_final.md) |
🧡🧡🧡 HAPPY CODING 🧡🧡🧡
<div>
<small>Dê suporte ao <strong>Autor</strong> para criar mais materiais educacionais</small> <br />
<a href = "https://www.paypal.me/asabeneh"><img src='/images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
<a href = "https://www.paypal.me/asabeneh"><img src='../images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
</div>
<div align="center">
@ -74,40 +74,40 @@
[Dia 2 >>](./02_Day_Data_types/02_day_data_types.md)
![Trinta Dias de JavaScript](/images/day_1_1.png)
![Trinta Dias de JavaScript](../images/day_1_1.png)
- [30 dias de JavaScript](#30-dias-de-javascript)
- [📔 Dia 1](#-dia-1)
- [Introdução](#introdução)
- [Requisitos](#requisitos)
- [Setup](#setup)
- [Instalação Node.js](#instalação-nodejs)
- [Navegador](#navegador)
- [Instalando Google Chrome](#instalando-google-chrome)
- [Abrindo o Google Chrome Console](#abrindo-o-google-chrome-console)
- [Escrevendo Código no console do Navegador](#escrevendo-código-no-console-do-navegador)
- [Console.log](#consolelog)
- [Console.log com Múltiplos Argumentos](#console.log-com-múltiplos-argumentos)
- [Comentários](#comentários)
- [Sintaxe](#sintaxe)
- [Aritimética](#aritimética)
- [Editor de Código](#editor-de-código)
- [Instalando o Visual Studio Code](#instalando-o-visual-studio-code)
- [Como usar o Visual Studio Code](#como-usar-o-visual-studio-code)
- [Adicionando JavaScript Para uma Página na Web ](#adicionando-javaScript-para-uma-página-na-web )
- [Script em Linha](#inline-script)
- [Script Interno](#script-interno)
- [Script Externo](#script-externo)
- [Múltiplos Scripts Externos](#múltiplos-scripts-externos)
- [Introdução a tipo de Dados](#introdução-a-tipo-de-dados)
- [Números](#números)
- [Strings](#strings)
- [Booleanos](#booleans)
- [Undefined](#undefined)
- [Null](#null)
- [Verificando Tipos de Dados](#verificando-tipos-de-dados)
- [Comentários novamente](#comentários-novamente)
- [Variáveis](#variáveis)
- [Introdução](#introdução)
- [Requisitos](#requisitos)
- [Setup](#setup)
- [Instalação Node.js](#instalação-nodejs)
- [Navegador](#navegador)
- [Instalando Google Chrome](#instalando-google-chrome)
- [Abrindo o Google Chrome Console](#abrindo-o-google-chrome-console)
- [Escrevendo Código no console do Navegador](#escrevendo-código-no-console-do-navegador)
- [Console.log](#consolelog)
- [Console.log com Múltiplos Argumentos](#console.log-com-múltiplos-argumentos)
- [Comentários](#comentários)
- [Sintaxe](#sintaxe)
- [Aritimética](#aritimética)
- [Editor de Código](#editor-de-código)
- [Instalando o Visual Studio Code](#instalando-o-visual-studio-code)
- [Como usar o Visual Studio Code](#como-usar-o-visual-studio-code)
- [Adicionando JavaScript Para uma Página na Web ](#adicionando-javaScript-para-uma-página-na-web)
- [Script em Linha](#inline-script)
- [Script Interno](#script-interno)
- [Script Externo](#script-externo)
- [Múltiplos Scripts Externos](#múltiplos-scripts-externos)
- [Introdução a tipo de Dados](#introdução-a-tipo-de-dados)
- [Números](#números)
- [Strings](#strings)
- [Booleanos](#booleans)
- [Undefined](#undefined)
- [Null](#null)
- [Verificando Tipos de Dados](#verificando-tipos-de-dados)
- [Comentários novamente](#comentários-novamente)
- [Variáveis](#variáveis)
- [💻 Dia 1: Exercícios](#-dia-1-exercícios)
# 📔 Dia 1
@ -125,6 +125,7 @@ JavaScript é usado **_para adicionar interatividade aos websites, desenvolvimen
## Requisitos
Sem conhecimentos prévios de programação é exigido para seguir este desafio. Precisará apenas:
1. Motivação
2. Um computador
3. Internet
@ -139,11 +140,11 @@ Eu acredito que voce tem a motivação e o forte desejo de ser um desenvolvedor,
Você pode não precisar do Node.js agora mas você precisará mais tarde. Instalação do [node.js](https://nodejs.org/en/).
![Node download](/images/download_node.png)
![Node download](../images/download_node.png)
Depois do download click duplo no ícone e intalar
![Instalação node](/images/install_node.png)
![Instalação node](../images/install_node.png)
Nós podemos verificar se o Node está instalador na nossa máquina local abrindo nosso terminal do dispositivo ou prompt de comando.
@ -162,13 +163,13 @@ Existe muitos navegadores por ai, Entento, Eu fortemente recomento o Google Chro
Instalar o [Google Chrome](https://www.google.com.br/chrome/) se você não tem um ainda. Nós podemos escrever um pequeno código de JavaScript no console do browser, mas nós não usamos o console do navegador para desenvolver aplicações.
![Google Chrome](/images/google_chrome.png)
![Google Chrome](../images/google_chrome.png)
#### Abrindo o Google Chrome Console
Você pode abrir o Google Chrome console por um ou outro clicando nos 3 pontos no topo do lado direito do navegador, selecionando _Mais ferramentas -> Ferramenta para desenvolvedores ou usando o atalho do teclado. Eu prefiro os atalhos.
Você pode abrir o Google Chrome console por um ou outro clicando nos 3 pontos no topo do lado direito do navegador, selecionando \_Mais ferramentas -> Ferramenta para desenvolvedores ou usando o atalho do teclado. Eu prefiro os atalhos.
![Abrindo o chrome](/images/opening_developer_tool.png)
![Abrindo o chrome](../images/opening_developer_tool.png)
Para abrir o console do Chrome usando o atalho do teclado.
@ -180,16 +181,16 @@ Windows/Linux:
Ctl+Shift+J
```
![Abrindo o console](/images/opening_chrome_console_shortcut.png)
![Abrindo o console](../images/opening_chrome_console_shortcut.png)
Depois de você abrir o console do Google Chrome, tente explorar os botões marcados. Nós vamos passar a maior parte do tempo no Console. O Console é o lugar onde vai seu código de JavaScript. O Console do Google Chrome V8 engine muda seu codigo de JavaScript para código de máquina.
Vamos escrever códigos de JavaScript no Google Chome console:
Vamos escrever códigos de JavaScript no Google Chome console:
![Escrevendo codigo no console](/images/js_code_on_chrome_console.png)
![Escrevendo codigo no console](../images/js_code_on_chrome_console.png)
#### Escrevendo Código no console do Navegador
Nós podemos escrever qualquer código de JavaScript no console do Google Chrome ou qualquer outro console de navegador, para este desafio, nós vamos focar no Console do Google Chrome. Abra o Console usando:
Nós podemos escrever qualquer código de JavaScript no console do Google Chrome ou qualquer outro console de navegador, para este desafio, nós vamos focar no Console do Google Chrome. Abra o Console usando:
```sh
Mac
@ -201,25 +202,25 @@ Ctl+Shift+I
##### Console.log
Para escrever nosso primeiro código em JavaScript, vamos usar uma função built-it **console.log()**. Nós passamos um argumento como dados de input, e a função mostra o output. Nós passamos `'Olá, Mundo!'` como dados de input ou argumento na função console.log().
Para escrever nosso primeiro código em JavaScript, vamos usar uma função built-it **console.log()**. Nós passamos um argumento como dados de input, e a função mostra o output. Nós passamos `'Olá, Mundo!'` como dados de input ou argumento na função console.log().
```js
console.log('Olá, Mundo!')
console.log('Olá, Mundo!');
```
##### Console.log com Múltiplos Argumentos
A funçao **`console.log()`** pode receber múltiplos parâmetros separados por vírgulas. A sintaxe é similar ao seguinte modo:**`console.log(param1, param2, param3)`**
A funçao **`console.log()`** pode receber múltiplos parâmetros separados por vírgulas. A sintaxe é similar ao seguinte modo:**`console.log(param1, param2, param3)`**
![console.log com Múltiplos Argumentos](/images/console_log_multipl_arguments.png)
![console.log com Múltiplos Argumentos](../images/console_log_multipl_arguments.png)
```js
console.log('Olá', 'Mundo', '!')
console.log('Feliz', 'Ano', 'Novo', 2020)
console.log('Bem vindo', 'aos', 30, 'Dias', 'de', 'JavaScript')
console.log('Olá', 'Mundo', '!');
console.log('Feliz', 'Ano', 'Novo', 2020);
console.log('Bem vindo', 'aos', 30, 'Dias', 'de', 'JavaScript');
```
Como você pode ver pelo trecho de código acima, _`console.log()`_ pode receber múltiplos argumentos.
Como você pode ver pelo trecho de código acima, _`console.log()`_ pode receber múltiplos argumentos.
Parabéns! Você escreveu seu primeiro código de JavaScript usando _`console.log()`_.
@ -230,7 +231,7 @@ Nós podemos adicionar comentários para nosso código. Comentários são import
**Exemplo: Comentário de linha única**
```js
// Este é o primeiro comentário
// Este é o primeiro comentário
// Este é o segundo comentário
// Eu sou um comentário de linha única
```
@ -244,17 +245,18 @@ Nós podemos adicionar comentários para nosso código. Comentários são import
JavaScript é a Linguagem da Web
*/
```
##### Sintaxe
Linguagens de programação são similares com a linguagem humana. Portugês ou qualquer outra linguagem usa palavras, frases, orações, períodos, e outras mais para criar uma mensagem com significado. A definição em Português de sintaxe é _ Estrutura essencial para que frases, orações e períodos façam sentido e sejam de fácil compreensão por parte do leitor_. A definição técnica é a estrutura de declarações em uma linguagem de computador. Linguagens de programação tem sintaxes. JavaScript é uma linguagem de programação como outras linguagens de programação tem sua própria sintaxe. Se nós nao escrevermos uma sintaxe que JavaScript entenda, diferentes tipos de errors aparecerá. Nós iremos explorar diferentes tipos de errors no JavaScript depois. Por enquanto, vamos ver sintaxes de errors.
![Error](/images/raising_syntax_error.png)
![Error](../images/raising_syntax_error.png)
Eu fiz uma confusão proposital. Como resultado, criou vários errors. Na realidade, a sintaxe é muito informativa. Informa quais tipos de errors foi feito. lendo as mensagens do feedback de error, nós podemos corrigir a sintaxe e resolver o problema. O processo de identificar e remover errors de um programa é chamado de Debugging. Vamos resolver os errors:
Eu fiz uma confusão proposital. Como resultado, criou vários errors. Na realidade, a sintaxe é muito informativa. Informa quais tipos de errors foi feito. lendo as mensagens do feedback de error, nós podemos corrigir a sintaxe e resolver o problema. O processo de identificar e remover errors de um programa é chamado de Debugging. Vamos resolver os errors:
```js
console.log('Olá, Mundo!')
console.log('Olá, Mundo!')
console.log('Olá, Mundo!');
console.log('Olá, Mundo!');
```
Até agora, nós vimos como exibir texto usando o _`console.log()`_. Se estamos imprimindo texto ou string usando _`console.log()`_, o texto tem que estar dentro de uma aspa simples, aspas duplas, ou crase.
@ -262,9 +264,9 @@ Até agora, nós vimos como exibir texto usando o _`console.log()`_. Se estamos
**Exemplo:**
```js
console.log('Olá, Mundo!')
console.log("Olá, Mundo!")
console.log(`Hello, World!`)
console.log('Olá, Mundo!');
console.log('Olá, Mundo!');
console.log(`Hello, World!`);
```
#### Aritimética
@ -273,15 +275,15 @@ Agora, vamos praticar escrevendo mais códigos JavaScript usando _`console.log()
Em adição ao texto, nós podemos tamem fazer calculos matemáticos usando javaSCript. Vamos fazer calculos simples a seguir.
É possivel escrever códigos JavaScript no console do Google Chome diretamente sem o função **_`console.log()`_** Entretanto, está incluso nesta introdução porque maior parte deste desafio pode ocorrer no editor de texto onde o uso de funcões pode ser mantario. Você pode brincar diretamente com ins
![Arithmetic](/images/arithmetic.png)
![Arithmetic](../images/arithmetic.png)
```js
console.log(2 + 3) // Adição
console.log(3 - 2) // Subtração
console.log(2 * 3) // Muiltiplição
console.log(3 / 2) // Divisão
console.log(3 % 2) // Modulo - Resto da divisão
console.log(3 ** 2) // Exponenciação 3 ** 2 == 3 * 3
console.log(2 + 3); // Adição
console.log(3 - 2); // Subtração
console.log(2 * 3); // Muiltiplição
console.log(3 / 2); // Divisão
console.log(3 % 2); // Modulo - Resto da divisão
console.log(3 ** 2); // Exponenciação 3 ** 2 == 3 * 3
```
### Editor de Código
@ -292,7 +294,7 @@ Nós podemos escrever nosso código no console do navegador. mas isso nao é usa
Visual Studio Code é editor de texto open-source muito popular. Eu poderia recomendar o [download Visual Studio Code](https://code.visualstudio.com/), mas se você está familiarizado com outro editor, sinta livre para seguir oque você tem.
![Vscode](/images/vscode.png)
![Vscode](../images/vscode.png)
Se você instalou o Visual Studio Code, Vamos começar usando-o.
@ -300,21 +302,21 @@ Se você instalou o Visual Studio Code, Vamos começar usando-o.
Abra o Visual Studio Code clicando duas vezes com o mouse no ícone. Quando abrir, você terá esta interface. Tente interagir com os ícones rotulados.
![Vscode ui](/images/vscode_ui.png)
![Vscode ui](../images/vscode_ui.png)
![Vscode add project](/images/adding_project_to_vscode.png)
![Vscode add project](../images/adding_project_to_vscode.png)
![Vscode open project](/images/opening_project_on_vscode.png)
![Vscode open project](../images/opening_project_on_vscode.png)
![script file](/images/scripts_on_vscode.png)
![script file](../images/scripts_on_vscode.png)
![Installing Live Server](/images/vsc_live_server.png)
![Installing Live Server](../images/vsc_live_server.png)
![running script](/images/running_script.png)
![running script](../images/running_script.png)
![coding running](/images/launched_on_new_tab.png)
![coding running](../images/launched_on_new_tab.png)
## Adicionando JavaScript Para uma Página na Web
## Adicionando JavaScript Para uma Página na Web
JavaScript pode ser adicionado para uma página na internet em três diferentes maneiras:
@ -330,7 +332,6 @@ As diferentes sessões mostra diferentes maneiras de adicionar códigos JavaScri
Crie uma pasta do projeto no seu desktop ou em qualquer localização, nomeie de 30DaysOfJS e crie um **_`index.html`_** documento na sua pasta do projeto.
Então copie os seguintes códigos e abra-o no navegador, por exemplo [Chrome](https://www.google.com/chrome/).
```html
<!DOCTYPE html>
<html lang="en">
@ -342,6 +343,7 @@ Então copie os seguintes códigos e abra-o no navegador, por exemplo [Chrome](h
</body>
</html>
```
Agora, você escreveu seu primeiro script em linha. Nós podemos criar uma mensagem pop up usando o _`alert()`_ função built-it
### Script Interno
@ -354,7 +356,7 @@ O script interno pode ser escrito no _`head`_ ou _`body`_, mas é preferível co
<head>
<title>30DaysOfScript: Script Interno</title>
<script>
console.log('Welcome to 30DaysOfJavaScript')
console.log('Welcome to 30DaysOfJavaScript');
</script>
</head>
<body></body>
@ -372,7 +374,7 @@ Isto é como nós escrevemos scripts internos na maioria das vezes. Escrevemos o
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click</button>
<script>
console.log('Welcome to 30DaysOfJavaScript')
console.log('Welcome to 30DaysOfJavaScript');
</script>
</body>
</html>
@ -380,7 +382,7 @@ Isto é como nós escrevemos scripts internos na maioria das vezes. Escrevemos o
Abra o console do navegador e veja o output do `console.log()`.
![js code from vscode](/images/js_code_vscode.png)
![js code from vscode](../images/js_code_vscode.png)
### Script Externo
@ -388,7 +390,7 @@ Similar com o script interno, o link do script externo pode estar no header ou b
Primeiro, nós podemos criar scripts externos de JavaScript com a .js extensão. Todos os arquivos terminados com a .js extensão são JavaScript documentos. Crie uma pasta nomeada Introdução.js dentro do diretório do projeto e escreva o seguinte código e copie o link do arquivo .js no bottom do body.
```js
console.log('Welcome to 30DaysOfJavaScript')
console.log('Welcome to 30DaysOfJavaScript');
```
Scripts Externo no _head_:
@ -413,10 +415,8 @@ Scripts Externo no _body_:
<title>30DaysOfJavaScript: Scripts Externo</title>
</head>
<body>
<!-- JavaScript link externo pode estar no header ou no body -->
<!-- Antes do fechamento da tag do body é o lugar recomendado para colocar o script do JavaScript externo -->
<!-- JavaScript link externo pode estar no header ou no body -->
<!-- Antes do fechamento da tag do body é o lugar recomendado para colocar o script do JavaScript externo -->
<script src="introduction.js"></script>
</body>
</html>
@ -430,7 +430,7 @@ Nós tambem podemos colocar o link de vários arquivos externos de JavaScript em
Crie um `helloworld.js` documento dentro da pasta 30DaysOfJS e escreva o seguinte código.
```js
console.log('Olá, Mundo!')
console.log('Olá, Mundo!');
```
```html
@ -448,7 +448,7 @@ console.log('Olá, Mundo!')
_Seu arquivo main.js deve estar abaixo de todos os outros scripts_. E isto é muito importante de relembrar
![Multiple Script](/images/multiple_script.png)
![Multiple Script](../images/multiple_script.png)
## Introdução a tipo de Dados
@ -457,7 +457,7 @@ Em JavaScript e tambem em outras linguagens de programação, existem vários ti
### Números
- Integers: Inteiros (Negativo, zero e positivos) números
Examplo:
Examplo:
... -3, -2, -1, 0, 1, 2, 3 ...
- Float-point numbers: Números decimais.
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
@ -469,16 +469,15 @@ Uma coleção de um ou mais caracteres entre duas aspas simples, aspas duplas, o
**Examplo:**
```js
'a'
'Asabeneh'
"Asabeneh"
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
'A string could be just as small as one character or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'
'a';
'Asabeneh';
'Asabeneh';
'Finland';
'JavaScript is a beautiful programming language';
'I love teaching';
'I hope you are enjoying the first day'`We can also create a string using a backtick`;
('A string could be just as small as one character or as big as many pages');
('Any data type under a single quote, double quote or backtick is a string');
```
### Booleans
@ -490,8 +489,8 @@ Um tipo de dado boleanno é verdadeiro ou um valor falso
**Examplo:**
```js
true // if the light is on, the value is true
false // if the light is off, the value is false
true; // if the light is on, the value is true
false; // if the light is off, the value is false
```
### Undefined
@ -499,8 +498,8 @@ false // if the light is off, the value is false
Em JavaScript, se nós não atribuirmos um valor a uma variável, o valor é undefined. Em adição a isto, se uma funcção não está retornando nada, ela retorna undefined
```js
let firstName
console.log(firstName) // undefined, because it is not assigned to a value yet
let firstName;
console.log(firstName); // undefined, because it is not assigned to a value yet
```
### Null
@ -508,19 +507,19 @@ console.log(firstName) // undefined, because it is not assigned to a value yet
Null em JavaScript significa um valor vazio.
```js
let valorVazio = null
let valorVazio = null;
```
## Verificando Tipos de Dados
Para verificar o tipo de dado de uma determinada variável, nós usamos o operador **typeof**. Veja o seguinte exemplo.
Para verificar o tipo de dado de uma determinada variável, nós usamos o operador **typeof**. Veja o seguinte exemplo.
```js
console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined
console.log(typeof 'Asabeneh'); // string
console.log(typeof 5); // number
console.log(typeof true); // boolean
console.log(typeof null); // object type
console.log(typeof undefined); // undefined
```
## Comentários novamente
@ -550,7 +549,7 @@ Comentando em várias linhas:
## Variáveis
Variáveis são _containers_ de dados. Variáveis são usadas para _armazenar_ dados na memória alocada. Quando variáveis são declaradas, uma memória alocada é reservada. Quando uma variável é atribuída para um valor (dados), espaço na memória irá ser preenchido com aqueles dados. Para declarar uma variável, nós usamos as palavras-chaves _var_, _let_, ou _const_.
Variáveis são _containers_ de dados. Variáveis são usadas para _armazenar_ dados na memória alocada. Quando variáveis são declaradas, uma memória alocada é reservada. Quando uma variável é atribuída para um valor (dados), espaço na memória irá ser preenchido com aqueles dados. Para declarar uma variável, nós usamos as palavras-chaves _var_, _let_, ou _const_.
Para uma variável que muda com o tempo, nós usamos _let_. Se os dados não vão mudar, nós usamos _const_. Por exemplo, PI, nome de país, gravidade não muda, e nós podemos usar _const_. Nós não vamos usar var neste desafio e eu nao recomendo usa-lo. Nós vamos falar mais sobre var, let, e const em detalhes em outras sessões (scope). Por enquanto, a explicação acima é suficiente.
@ -564,25 +563,25 @@ Um nome de variável em JavaScript apenas segue a seguinte regra:
Os seguintes exemplos são de variáveis válidas em JavaScript.
```js
firstName
lastName
country
city
capitalCity
age
isMarried
first_name
last_name
is_married
capital_city
num1
num_1
_num_1
$num1
year2020
year_2020
firstName;
lastName;
country;
city;
capitalCity;
age;
isMarried;
first_name;
last_name;
is_married;
capital_city;
num1;
num_1;
_num_1;
$num1;
year2020;
year_2020;
```
A primeira e a segunda variável na lista segue a convenção camelCase de declaração no JavaScript. Neste material, nós vamos usar variáveis em camelCase (camelWithOneHump). Nós usamos CamelCase (CamelWithTwoHump) para declarar classes, nós vamos discutir sobre classes e objetos em outras sessões.
@ -599,7 +598,7 @@ Vamos declarar variáveis com diferentes tipos de dados. Para declarar uma vari
```js
// Sintaxe
let nameOfVariable = value
let nameOfVariable = value;
```
O nomeDaVariavel é o nome que armazena diferente tipos de dados. Veja abaixo exemplos para mais detalhes.
@ -608,14 +607,14 @@ O nomeDaVariavel é o nome que armazena diferente tipos de dados. Veja abaixo ex
```js
// Declarando diferentes variáveis de diferentes tipos de dados
let firstName = 'Asabeneh' // primeiro nome de uma pessoa
let lastName = 'Yetayeh' // ultimo nome de uma pessoa
let country = 'Finland' // país
let city = 'Helsinki' // capital da cidade
let age = 100 // Idade
let isMarried = true
let firstName = 'Asabeneh'; // primeiro nome de uma pessoa
let lastName = 'Yetayeh'; // ultimo nome de uma pessoa
let country = 'Finland'; // país
let city = 'Helsinki'; // capital da cidade
let age = 100; // Idade
let isMarried = true;
console.log(firstName, lastName, country, city, age, isMarried)
console.log(firstName, lastName, country, city, age, isMarried);
```
```sh
@ -624,11 +623,11 @@ Asabeneh Yetayeh Finland Helsinki 100 true
```js
// Declarando variáveis com o valor numérico
let age = 100 // idade
const gravity = 9.81 // gravidade na terra em m/s2
const boilingPoint = 100 // ponto de ebulição da água, temperatura em °C
const PI = 3.14 // constante geométrica
console.log(gravity, boilingPoint, PI)
let age = 100; // idade
const gravity = 9.81; // gravidade na terra em m/s2
const boilingPoint = 100; // ponto de ebulição da água, temperatura em °C
const PI = 3.14; // constante geométrica
console.log(gravity, boilingPoint, PI);
```
```sh
@ -637,8 +636,10 @@ console.log(gravity, boilingPoint, PI)
```js
// Variáveis tambem podem ser declaradas em uma linha separadas por uma vírgula, entretanto eu recomento usar a separação por linha para facilitar a leitura do código
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
console.log(name, job, live)
let name = 'Asabeneh',
job = 'teacher',
live = 'Finland';
console.log(name, job, live);
```
```sh
@ -647,7 +648,7 @@ Asabeneh teacher Finland
Quando você executa o arquivo _index.html_ na pasta dia-1 você deve conseguir isto:
![Day one](/images/day_1.png)
![Day one](../images/day_1.png)
🌕 Você é incrivel! Você acabou de completar o desafio do dia 1 e você está no seu caminho para o sucesso. Agora faça alguns exercícios para seu cérebro e músculos.
@ -656,11 +657,11 @@ Quando você executa o arquivo _index.html_ na pasta dia-1 você deve conseguir
1. Escreva um comentário de linha única que diga, _comentários faz seu código ser fácil de ler_
2. Escreva outro comentário de linha única que diga, _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_
4. Crie um arquivo variavel.js e declare variáveis e atribua uma string, boolean, undefined e null
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
7. Declare quatro variáveis e atribuir valores
8. Declare variáveis para armazenar seu primeiro nome, ultimo nome, estado civil, país e idade em multiplas linhas
7. Declare quatro variáveis e atribuir valores
8. Declare variáveis para armazenar seu primeiro nome, ultimo nome, estado civil, país e idade em multiplas linhas
9. Declare variáveis para armazenar seu primeiro nome, ultimo nome, estado civil, país e idade em uma única linha
10. Declare duas variáveis _minhaIdade_ e _suaIdade_ e atribua valores iniciais e mostre no console do navegador.

Write Preview
Loading…
Cancel
Save