# Javascript
JavaScript é uma linguagem de programação de alto nível e interpretada, amplamente usada para criar páginas web dinâmicas e interativas. Ela é executada no lado do cliente (ou seja, no navegador do usuário) e é uma das principais linguagens para o desenvolvimento front-end na web.
## Js interno e externo
Para programação web, JavaScript é utilizado junto com Html e Css. Em questão de código pode ser utilizado tanto no código html da pagina como ter um arquivo próprio e ser chamado externamente
> **Js interno**
```htmlmixed
<body>
<h1>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
<script>
window.alert('AAAAAAAAAAAAAAAA DISGRAÇAAAAAAAAAA') /* Cria uma janela com um aviso/mensagem*/
window.confirm('Deseja continuar?') /*Cria uma janela com uma mensagem e pede uma confirmação*/
window.prompt('Qual o aumentativo de dacueba?') /*Cria uma janela com uma mensagem e um espaço para o usuário digitar*/
</script>
</body>
```
> **Js externo**
É usado a tag **<script src:...> </script>** junto com o caminho src para referenciar o arquivo js
```htmlembedded
<body>
<h1>Lista de Tarefas</h1>
<header>
<input id="inputTarefa" type="text" placeholder="Digite sua tarefa">
<button onclick="addTarefa()" class="add">Adicionar</button>
</header>
<main id="arealista">
</main>
<script src="Tarefas Javascript.js"></script>
</body>
```
## Tipos de Saída
Em JavaScript, existem várias maneiras de produzir saída (output) de dados. Alguns dos tipos de saída mais comuns são:
1. **console.log():** O console.log() é uma função integrada do JavaScript que permite exibir dados no console do navegador ou no console do Node.js. Isso é útil para depuração e teste de código.
```javascript
let nome = "João";
let idade = 25;
console.log("Meu nome é " + nome + " e eu tenho " + idade + " anos de idade.");
```
2. **alert():** O alert() é outra função integrada do JavaScript que cria uma caixa de diálogo pop-up no navegador com uma mensagem especificada. É útil para fornecer feedback ao usuário.
```javascript
let nome = "João";
let idade = 25;
alert("Meu nome é " + nome + " e eu tenho " + idade + " anos de idade.");
```
3. **document.write():** O document.write() é uma função que permite escrever diretamente no documento HTML da página. Isso pode ser útil para exibir dados dinamicamente na página.
```javascript
let nome = "João";
let idade = 25;
document.write("Meu nome é " + nome + " e eu tenho " + idade + " anos de idade.");
```
4. **innerHTML:** O innerHTML é uma propriedade de objetos HTML que permite alterar o conteúdo de um elemento HTML. Isso pode ser usado para exibir dados dinamicamente na página.
```javascript
<body>
<h1>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h1>
<p id="mensagem0">(sem document.get) Meu nome é: </p>
<p id="mensagem">(com document.get)</p>
<script>
let nome = "João";
let idade = 25;
document.getElementById("mensagem").innerHTML = "Meu nome é :" + nome + " e eu tenho " + idade + " anos de idade.";
</script>
</body>
```
## Comentários em Js
Para fazer um comentário no código pode ser utilizado **//** ou **/*** ***/** com quebra de linha
```javascript
window.prompt('Quer dar um tio em sí mesmo?')
/*Cria uma janela com uma mensagem e um espaço para o usuário digitar*/
```
## Variáveis
Em JavaScript, as variáveis são usadas para armazenar valores. Elas são declaradas usando as palavras-chave **var**, **let** ou **const**.
* As variáveis declaradas com **var** e **let** podem ter seus valores alterados, porém ao declarar uma variavel com **let**, aquela mesma variável não pode ser declarada de novo
> Declaração de variaveis
```javascript
var nome;
var sobrenome, nome_completo, idade;
```
> Atribuição de valores
```javascript
nome = 'Adamastor'
sobrenome = 'Silva'
idade = 30
nome_completo = nome + " " + sobrenome
pessoa = idade + nome
```
> Erro por declaração duplicada de let
```javascript
let pessoa = 'Apolo'
let pessoa = 'Apolo' // Erro
```
* as variáveis declaradas com `const` têm valores imutáveis.
```javascript
const x = 10
```
## Operadores
JavaScript possui uma variedade de operadores que podem ser usados para realizar diferentes tipos de operações em valores, incluindo operadores aritméticos, operadores de atribuição, operadores de comparação, operadores lógicos e operador ternário.
> **Operadores Aritméticos**
```javascript
let x = 10;
let y = 3;
console.log(x + y); // Soma (output: 13)
console.log(x - y); // Subtração (output: 7)
console.log(x * y); // Multiplicação (output: 30)
console.log(x / y); // Divisão (output: 3.333...)
console.log(x % y); // Resto da divisão (output: 1)
console.log(x ** y); // Potência (output: 1000)
```
> Operadores de Atribuição:
let x = 10;
```javascript
x += 5; // Adição (x = x + 5)
console.log(x); // output: 15
x -= 3; // Subtração (x = x - 3)
console.log(x); // output: 12
x *= 2; // Multiplicação (x = x * 2)
console.log(x); // output: 24
x /= 3; // Divisão (x = x / 3)
console.log(x); // output: 8
x %= 4; // Resto da divisão (x = x % 4)
console.log(x); // output: 0
```
> Operadores de Comparação:
```javascript
let x = 10;
let y = 5;
let z = "10";
console.log(x == y); // Igualdade (output: false)
console.log(x != y); // Diferença (output: true)
console.log(x > y); // Maior que (output: true)
console.log(x < y); // Menor que (output: false)
console.log(x >= y); // Maior ou igual a (output: true)
console.log(x <= y); // Menor ou igual a (output: false)
console.log(x === z); /*Verifica se o valor é o mesmo
e se o tipo é o mesmo (int == string) (output: false)*/
```
> Operadores Lógicos:
```javascript
let x = 10;
let y = 5;
console.log(x > 5 && y < 10); // AND (output: true)
console.log(x > 5 || y > 10); // OR (output: true)
console.log(!(x > y)); // NOT (output: false)
```
> Operador Ternário
```javascript
let x = 10;
let y = 5;
let resultado = (x > y) ? "x é maior que y" : "y é maior que x";
console.log(resultado); // output: "x é maior que y"
```
## Funções
Em JavaScript, as funções são blocos de código que podem ser chamados para executar uma tarefa específica. As funções são úteis para reutilizar o código e evitar a repetição de tarefas semelhantes em um programa.
```javascript
<body>
<h1>Funções</h1>
<h2>Função Somar</h2>
<p id="texto"></p>
<script>
function Soma(valor1, valor2){
return valor1 + valor2
}
let x = Number(window.prompt("Digite um numero:"))
let y = Number(window.prompt("Digite outro numero:"))
document.getElementById("texto").innerHTML = `A soma é: ${Soma(x, y)}`
</script>
</body>
```
Também é possível definir funções com parâmetros e com valores padrão, bem como funções que retornam outras funções. As funções são uma parte fundamental do JavaScript e são usadas em muitas situações diferentes para tornar o código mais organizado, reutilizável e fácil de manter.
### Função Anonima
Uma função anônima em JavaScript é uma função que não possui um nome identificador. Ela é definida como uma expressão, em vez de uma declaração de função. As funções anônimas podem ser atribuídas a variáveis, passadas como argumentos para outras funções, ou retornadas como valores de outras funções.
As funções anônimas são frequentemente usadas em situações em que uma função é necessária apenas uma vez e não é necessária uma definição separada. Por exemplo, elas são comumente usadas para funções de retorno de chamada (callbacks) em eventos de clique ou de tempo limite (timeout) em JavaScript.
```javascript
let minhaFuncao = function() {
console.log("Esta é uma função anônima.");
};
minhaFuncao(); // Output: "Esta é uma função anônima."
```
### Funções Anonimas com Arrow
Em JavaScript, a função com arrow é uma forma abreviada de escrever funções anônimas. Essa sintaxe é introduzida a partir do ECMAScript 6 (ES6) e tem como objetivo simplificar a escrita de funções de uma linha de código.
A sintaxe básica da função com arrow é a seguinte:
**(param1, param2, ..., paramN) => expression**
Onde `param1`, `param2`, ..., `paramN` são os parâmetros da função e `expression` é a expressão que será avaliada e retornada pela função.
Por exemplo, considere a seguinte função anônima que retorna o dobro de um número:
```javascript
let dobro = function(numero) {
return numero * 2;
}
```
Podemos reescrever essa função usando a sintaxe da função com arrow:
**let dobro = (numero) => numero * 2;**
A função com arrow também é útil para criar funções de retorno de chamada (callbacks) de uma forma mais concisa. Por exemplo, a função `setTimeout()` do JavaScript recebe uma função de retorno de chamada que será executada após um determinado período de tempo. Podemos usar a função com arrow para escrever essa função de forma mais clara:
```javascript
setTimeout(() => console.log('Passaram-se 5 segundos'), 5000);
```
Nesse exemplo, a função com arrow é passada como argumento para a função `setTimeout()`, que a executará após 5 segundos. A expressão `console.log('Passaram-se 5 segundos')` será avaliada e exibida no console do navegador após o tempo especificado.
## Objetos
Em JavaScript, objetos são estruturas de dados que permitem armazenar e organizar informações relacionadas em pares chave-valor. Cada chave é uma string (ou símbolo) que identifica um valor correspondente, que pode ser um número, uma string, um booleano, uma função ou até mesmo outro objeto.
```javascript
let carro = {
marca: "ford",
modelo: "ka",
ano: "2015",
}
```
Nesse exemplo, criamos um objeto `carro` com 3 propriedades: `marca`, `modelo` e `ano`. Cada propriedade é uma chave do objeto que corresponde a um valor específico.
Podemos acessar as propriedades de um objeto usando a sintaxe de ponto **`objeto.propriedade`**. Por exemplo:
```javascript
console.log(carro.marca); // Output: "ford"
console.log(carro.ano); // Output: "2015"
```
Também podemos usar a sintaxe de colchetes **`objeto['propriedade']`** para acessar as propriedades do objeto:
```javascript
console.log(carro['marca']); // Output: "ford"
console.log(carro['modelo']); // Output: "ka"
```
Além disso, podemos adicionar novas propriedades a um objeto ou modificar as propriedades existentes, caso seja um let como declaração do objeto.
```javascript
carro.cor = "vermelho";
carro.modelo = "ranger";
console.log(carro.cor); // Output: "vermelho"
console.log(carro.modelo); // Output: "ranger"
```
Podemos até mesmo incluir funções como propriedades de um objeto, que são chamadas de **"métodos"** do objeto.
```javascript
const carro = {
marca: "ford",
modelo: "ka",
ano: "2015",
buzina: function() {
window.alert("BIBIBIBIBIIIIIIIIIIIIIIIIIIIIIIIII CARALHO")
}
console.log(carro.buzina()); // Output: BIBIBI...
```
## Propriedades de um elemento
Em JavaScript, podemos acessar as propriedades de um elemento HTML usando o objeto `HTMLElement`. Esse objeto representa um elemento HTML específico e possui várias propriedades que nos permitem acessar e modificar suas características.
- **`element.id`:** retorna o ID do elemento.
- **`element.className`:** retorna a classe do elemento.
- **`element.textContent`:** retorna o texto do elemento (sem tags HTML).
- **`element.innerHTML`:** retorna o HTML do elemento (incluindo tags HTML).
- **`element.style`:** retorna um objeto que contém as propriedades de estilo do elemento.
- **`element.getAttribute(name)`:** retorna o valor do atributo especificado do elemento.
- **`element.setAttribute(name, value)`:** define o valor do atributo especificado do elemento.
Podemos usar essas propriedades para acessar e modificar diferentes aspectos de um elemento HTML. Por exemplo, para selecionar um elemento com o ID "meuElemento" e alterar seu estilo de fundo para vermelho, podemos fazer o seguinte:
```javascript
let meuElemento = document.getElementById("meuElemento");
meuElemento.style.backgroundColor = "red";
```
Também podemos usar as propriedades `className` e `setAttribute()` para atribuir classes e atributos a um elemento HTML, respectivamente. Por exemplo, para adicionar uma classe "destaque" ao elemento com o ID "meuElemento", podemos fazer o seguinte:
```javascript
let meuElemento = document.getElementById("meuElemento");
meuElemento.className = " destaque";
```
## DOM
DOM (Document Object Model) em JavaScript é uma interface de programação que representa a estrutura de um documento HTML como uma árvore de objetos. Cada elemento HTML é representado por um objeto no DOM, e podemos acessar e manipular esses objetos usando JavaScript.
Usa-se o DOM principalmente para atualizar uma página Web ou quando se quer construir uma interface de usuário avançada. Com o DOM pode-se mover itens dentro de uma página ou criar efeitos CSS bastante interessantes sem precisar nem mesmo recarregar a página.
O DOM é composto por três tipos de nós:
1. **Elementos:** representam os elementos HTML, como `<p>`, `<div>`, `<h1>`, etc.
2. **Atributos:** representam os atributos dos elementos, como `href`, `src`, `class`, etc.
3. **Texto:** representam o conteúdo de texto dentro de um elemento.
Podemos acessar e manipular o DOM usando o objeto global `document`. Por exemplo, podemos selecionar um elemento HTML usando o método `querySelector()`:
```javascript
let meuElemento = document.querySelector('#meuElemento');
```
Nesse exemplo, estamos selecionando um elemento HTML com o ID "meuElemento" e atribuindo-o à variável `meuElemento`. Podemos então manipular as propriedades desse elemento, como seu conteúdo de texto ou seus atributos:
```javascript
meuElemento.textContent = 'Novo conteúdo';
meuElemento.setAttribute('data-valor', 123);
```
### **Objeto Document**
Através do objeto **document** pode-se ter acesso a um grande número de propriedades para acessar e manipular o DOM.
**`document.getElementsByTagName(tagName)`:** retorna uma coleção de elementos HTML com a tag especificada.
**`document.getElementById(id)`:** retorna o elemento HTML com o ID especificado.
**`document.getElementsByClassName(className)`:** retorna uma coleção de elementos HTML com a classe especificada.
**`document.querySelector(selector)`:** retorna o primeiro elemento HTML que corresponde ao seletor CSS especificado.
**`document.querySelectorAll(selector)`:** retorna uma lista de todos os elementos HTML que correspondem ao seletor CSS especificado.
**`document.createElement(tagName)`:** cria um novo elemento HTML com a tag especificada.
**`document.createTextNode(text)`:** cria um novo nó de texto com o texto especificado.
**`document.appendChild/removeChild`:** Insere/remove um nó filho a um nó pai existente em um documento HTML.
**`document.createElement(tagName)`:** permite criar um novo elemento HTML no documento como "div", "p", "img", "a", entre outros.
.
**`document.createAttribute(attributeName)`:** permitindo que novos atributos sejam adicionados a um elemento HTML como "id", "class", "src", entre outros.
### Exemplos
```javascript
<body>
<div id="myDiv">
<p>Este é um parágrafo existente</p>
</div>
<script>
var newParagraph = document.createElement("p");
var paragraphText = document.createTextNode("Este é um novo parágrafo");
newParagraph.appendChild(paragraphText);
var myDiv = document.getElementById("myDiv");
myDiv.appendChild(newParagraph);
</script>
</body>
```
Neste exemplo, estamos criando um novo elemento `p` e adicionando um novo texto a ele. Em seguida, selecionamos o elemento pai `div` com `getElementById()` e adicionamos o novo parágrafo a ele usando `appendChild()`. Quando o código é executado, o novo parágrafo será adicionado à página abaixo do parágrafo existente.
```javascript
let novoParagrafo = document.createElement("p");
novoParagrafo.textContent = "Novo parágrafo criado com JavaScript!";
novoParagrafo.className = "destaque";
document.body.appendChild(novoParagrafo);
```
Nesse exemplo, estamos criando um novo elemento `<p>` com o texto "Novo parágrafo criado com JavaScript!", atribuindo a classe "destaque" a ele usando `className`, e adicionando-o ao final do elemento `<body>` usando `appendChild()`.
```javascript
<p>Aqui uma linha qualquer de texto</p>
<p><strong>DOM</strong> em JavaScript.</p>
<div id="msg">Clique aqui</div>
var p = window.document.body
var p1 = window.document.getElementsByTagName('p')[1] // [] -> como existe mais de uma tag p, é necessário indicar qual tag estamos nos referindo
var d = window.document.querySelector('div#msg')
window.document.write(p1.innerText) // innerText -> Pega somente o texto
window.document.write(p1.innerHTML) // innerHTML -> Pega o html tbm
p1.style.color = 'red' // a variável contém os elementos da tag p[0] e com style.color é possível alterar diretamente a cor da tag
p.style.background = 'black' // mesmo funcionamento, a variavel contém body e assim é possível mudar a cor do background
d.style.color = 'yellow'
```
## Eventos DOM
Eventos DOM (Document Object Model) em JavaScript são ações que ocorrem em um documento HTML, como o clique de um botão, o carregamento de uma página ou a mudança de um elemento de formulário. Esses eventos podem ser capturados e manipulados usando JavaScript.
```
Possíveis Eventos
click clicar e soltar rapidamente
dblclick Clique duplo
mouseover Mouse por cima da div
mouseout O mouse saiu da div
mouseenter O mouse entra na div (exatamente o momento que entra)
mousemove O mouse se mover dentro da div
mousedown Clicar e segurar dentro da div
mouseup Clicar e soltar dentro da div
focus Quando a div recebe foco
blur Quando a div perde foco
keydown Tecla pressionada
keypress Tecla pressionada rapidamente
keyup Tecla solta dentro da div
load Quando o site terminar de carregar
resize Quando há redimensionamento de tela
```
Para capturar um evento DOM em JavaScript, podemos usar a função **`addEventListener()`**. Essa função é usada para registrar um ouvinte de eventos em um elemento específico.
```javascript
<div id="area">
Vamos interajir
</div>
<script>
var a = window.document.getElementById('area')
a.addEventListener('click', clicar)
a.addEventListener('mouseenter', entrar)
a.addEventListener('mouseout', sair)
function clicar(){
a.innerText = 'Clicou'
a.style.background = 'red'
}
function entrar(){
a.innerText = 'Entrou'
}
function sair(){
a.innerText = 'Saiu'
a.style.background = 'green'
}
</script>
```
**addEventListener** possui dois parâmetros:
**-> 1°** é o eventoDom como 'click', 'mouseenter', 'mouseout' etc.
**-> 2°** é a função que será realizada apos o evento ser verdadeiro
### Eventos direto na Tag
Os eventos podem ser definidos diretamente na tag HTML usando a propriedade `on` e o nome do evento desejado (função). Por exemplo:
<button **onclick="função()"**>Clique aqui</button>
```javascript
<button onclick="alert('O botão foi clicado')">Clique aqui</button>
<button onmouseenter="mudarCor()">Clique aqui</button>
```
Neste exemplo, o evento de clique (`onclick`) é definido diretamente na tag `<button>`. Quando o botão é clicado, o navegador exibirá um alerta com a mensagem "O botão foi clicado".
No entanto, essa não é a prática recomendada para lidar com eventos em JavaScript, pois pode tornar o código difícil de ler e manter. É preferível separar o código JavaScript do HTML e usar métodos para lidar com eventos, como `addEventListener()`.
## Array
Em JavaScript, um array é um tipo de objeto que armazena uma coleção de elementos em uma lista indexada. Os elementos em um array podem ser de qualquer tipo de dado válido em JavaScript, como números, strings, objetos, outras arrays, etc. Diferente de objetos, que funcionam com propriedades(nomes), os arrays não necessitam dessa propriedade. o item é encontrado pela posição
Para declarar um array em JavaScript, podemos usar a sintaxe de colchetes **`[]`**
**var numeros = [1, 2, 3, 4, 5];**
Também podemos criar um array vazio e adicionarmos elementos a ele posteriormente
```javascript
var frutas = [];
frutas.push("maçã");
frutas.push("banana");
frutas.push("laranja");
```
Podemos acessar um elemento específico do array usando o índice correspondente, que começa em zero para o primeiro elemento
console.log(numeros[0]); // Output 1
console.log(frutas[1]); // Output "banana"
## Métodos de Arrays
Existem diversos métodos disponíveis para manipulação de arrays em JavaScript. Alguns dos mais comuns são:
### **push**
adiciona um ou mais elementos ao final do array.
```javascript
let array = [1, 2, 3];
array.push(4);
console.log(array); // [1, 2, 3, 4]
```
### **pop**
remove o último elemento do array.
```javascript
let array = [1, 2, 3];
array.pop();
console.log(array); // [1, 2]
```
### **shift**
remove o primeiro elemento do array.
```javascript
let array = [1, 2, 3];
array.shift();
console.log(array); // [2, 3]
```
### **unshift**
adiciona um ou mais elementos no início do array.
```javascript
let array = [1, 2, 3];
array.unshift(0);
console.log(array); // [0, 1, 2, 3]
```
### **slice**
retorna uma parte do array (fatiamento), definida pelos índices de início e fim.
```javascript
let array = [1, 2, 3, 4, 5];
let subArray = array.slice(1, 4);
console.log(subArray); // [2, 3, 4]
```
### **splice**
adiciona ou remove elementos do array em posições específicas.
**-> 1° parametro:** Posição do elemento em que vai ser adicionado
**-> 2° parametro:** Quantidade de elementos que serão removidos a partir do indice (0 siginifica que apenas irá adicionar)
**-> 3° parametro:** Item que irá ser adicionado
```javascript
let array = [1, 2, 3, 4, 5];
array.splice(2, 1); // remove 1 elemento a partir da posição 2
console.log(array); // [1, 2, 4, 5]
array.splice(5, 0, 6); // adiciona o elemento 6 na posição 5
console.log(array); // [1, 2, 3, 4, 5, 6]
```
### **concat**
junta dois ou mais arrays em um novo array.
```javascript
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let newArray = array1.concat(array2);
console.log(newArray); // [1, 2, 3, 4, 5, 6]
```
### **sort**
Coloca em Ordem alfabética
* **sort(function(a,b){return a - b}):**
Função maluca pra deixar lista de numero na ordem
### **reverse**
Reverte a ordem do array
### **map**
O método `map` cria um novo array com os resultados de uma função aplicada a cada elemento do array original. A função deve retornar um valor que será incluído no novo array.
```javascript
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers);
// Output: [2, 4, 6, 8, 10]
```
> **number é apenas um parâmetro relacionado ao indice do array, podendo ser qualquer nome.**
### **filter**
O método `filter` cria um novo array com os elementos que atendem a uma determinada condição, definida por uma função. A função deve retornar um valor booleano indicando se o elemento deve ser incluído ou não no novo array.
```javascript
const numeros = [1, 2, 3, 4, 5];
const pares = numeros.filter((num) => num % 2 === 0);
console.log(pares); // [2, 4]
```
### **reduce**
O método `reduce` reduz o array a um único valor, aplicando uma função acumuladora a cada elemento. A função acumuladora recebe dois parâmetros: um acumulador e um valor do array, e deve retornar o valor acumulado.
**array.reduce(funcao, valorInicial)**
- `array`: o array que será reduzido
- `funcao`: a função que será aplicada a cada elemento do array
- `valorInicial`: um valor inicial opcional para o acumulador. Se este valor não for especificado, o primeiro elemento do array será utilizado como valor inicial do acumulador.
Na função passamos dois parâmetros:
**-> ValorAnterior/Valoracumulado:** Refere-se inicialmente o valor inicial caso tenha e em seguida sempre ao valor anterior ou ao valor acumulado pela função
-> NumeroAtual: Refere-se ao indice atual no array
```javascript
const numeros = [1, 2, 3, 4, 5];
const soma = numeros.reduce((acumulador, numero) => acumulador + numero);
console.log(soma); // resultado: 15 (1 + 2 + 3 + 4 + 5)
```
```javascript
const numeros = [10, 20, 5, 30, 15];
const maiorValor = numeros.reduce((acumulador, numero) => acumulador > numero ? acumulador : numero);
console.log(maiorValor); // resultado: 30
```
No exemplo acima, a função `reduce` é utilizada para encontrar o maior valor do array `numeros`. A função recebe dois parâmetros, `acumulador` e `numero`, e compara o valor do acumulador com o número atual. Se o acumulador for maior, ele é retornado. Caso contrário, o número atual é retornado. O resultado final é o maior valor do array.
### **forEach**
O método `forEach` aplica uma função a cada elemento do array, mas não retorna um novo array. É útil para realizar uma ação em cada elemento, como exibir na tela ou modificar uma variável global.
```javascript
const numeros = [1, 2, 3, 4, 5];
numeros.forEach((num) => console.log(num));
// Output:
// 1
// 2
// 3
// 4
// 5
```
```javascript
const array = ["a", "b", "c"];
array.forEach((elemento, indice, arrayCompleto) => {
console.log(`O elemento ${elemento} está no índice ${indice} do array ${arrayCompleto}`);
});
/*
O elemento a está no índice 0 do array a,b,c
O elemento b está no índice 1 do array a,b,c
O elemento c está no índice 2 do array a,b,c
*/
```
A função forEach() possui dois parâmetros:
1. **A função de callback**, que é executada para cada elemento do array. Essa função pode receber até três parâmetros: **o valor do elemento atual**, **o índice do elemento atual** e o **próprio array**.
2. Um parametro opcional que pode ser usado como `this` dentro da função de callback. Se não for especificado, é utilizado o objeto global (no caso do JavaScript em navegadores, o objeto `window`).
No caso de um loop `forEach`, o valor de `this` é definido pelo objeto que está sendo percorrido. Podemos utilizar o parâmetro `thisArg` para definir explicitamente o valor de `this` que será utilizado dentro da função.
```javascript
const myObj = {
name: 'John',
age: 30,
hobbies: ['reading', 'playing guitar', 'traveling'],
printHobbies: function() {
this.hobbies.forEach(function(hobby) {
console.log(`${this.name} likes ${hobby}.`);
}, this);
}
};
myObj.printHobbies();
```
Dentro da função passada para o `forEach`, utilizamos `this.name` para referenciar o nome do objeto atual (`myObj`). No entanto, como o contexto de execução é o próprio loop `forEach`, o valor padrão de `this` seria o objeto `window`, o que causaria um erro.
Para garantir que `this` seja referenciado corretamente, passamos `this` como segundo argumento para a função `forEach`, utilizando o parâmetro `thisArg`. Isso garante que `this` seja sempre referenciado ao objeto atual (`myObj`), e não ao objeto global (`window`).
> Sem o parametro this
```
undefined likes reading.
undefined likes playing guitar.
undefined likes traveling.
```
> Com o parametro this
```
John likes reading.
John likes playing guitar.
John likes traveling.
```
## IF e Else
Em JavaScript, o `if` e o `else` são estruturas condicionais que permitem executar diferentes blocos de código dependendo se uma condição é verdadeira ou falsa.
```javascript
const idade = 18;
if (idade >= 18) {
console.log("Pode dirigir");
} else {
console.log("Não pode dirigir");
}
```
Também é possível usar `if` e `else` sem chaves `{ }`, desde que haja apenas uma única instrução em cada bloco
```javascript
const idade = 16;
if (idade >= 18)
console.log("Pode dirigir");
else
console.log("Não pode dirigir");
```
## Switch
O `switch` é uma estrutura condicional em JavaScript que permite avaliar uma expressão e executar diferentes blocos de código dependendo do valor dessa expressão.
```javascript
<body>
<div class="container">
<h1>Mudança de background</h1>
<p>Insira uma cor em inglês:</p>
<input type="text" id="corInput" placeholder="Ex: red, blue, green">
<input onclick="verificarCor()" type="button" id="botao">
</div>
<script>
function verificarCor(){
let cor = document.getElementById("corInput").value.toLowerCase();
switch(cor){
case "azul":
document.body.style.backgroundColor = "blue";
break;
case "vermelho":
document.body.style.backgroundColor = "red";
break;
case "verde":
document.body.style.backgroundColor = "green";
break;
default:
document.querySelector('p').innerText = "Não temo essa cor";
document.body.style.backgroundColor = "White";
break;
}
}
</script>
</body>
```
Codigo para alterar a cor de background a partir de um input e usando switch.
## For
O `for` é uma estrutura de loop em JavaScript que permite executar um bloco de código repetidamente. Aqui está um exemplo básico de como usar o `for` em JavaScript:
```javascript
for (let i = 0; i < 5; i++) {
console.log(i);
}
```
Neste exemplo, o `for` inicia com `i` igual a 0. A condição `i < 5` é avaliada antes de cada iteração do loop. Enquanto a condição for verdadeira, o bloco de código dentro do `for` será executado. No final de cada iteração do loop, `i` é incrementado em 1, graças à expressão `i++`. Quando `i` atinge o valor de 5, a condição do `for` se torna falsa e o loop é encerrado.
Você também pode usar o `for` para iterar sobre os elementos de um array, como mostrado neste exemplo:
```javascript
const nomes = ["Ana", "Bia", "Caio", "Daniel"];
for (let i = 0; i < nomes.length; i++) {
console.log(nomes[i]);
}
```
## Eventos de Tempo
Em JavaScript, existem dois principais tipos de eventos de tempo: `setTimeout` e `setInterval`. Ambos permitem executar uma determinada função após um determinado período de tempo.
O **setTimeout** é usado para executar uma função após um atraso especificado em milisegundos
**O primeiro argumento é a função que será executada após o atraso, e o segundo argumento é o tempo de atraso em milissegundos.**
```
setTimeout(function, tempo em milisegundos)
```
```javascript
setTimeout(() => {
console.log('Esta mensagem será exibida após 2 segundos.');
}, 2000);
```
Neste exemplo, estamos usando o `setTimeout` para exibir uma mensagem de console após um atraso de 2 segundos.
O **setInterval** é usado para executar uma função pelo tempo determinado.
```
setInterval(function, milliseconds)
```
```javascript
let contador = 0;
const intervalo = setInterval(() => {
console.log(`O contador é ${contador}`);
contador++;
if (contador === 5) {
clearInterval(intervalo);
}
}, 1000);
```
Neste exemplo, estamos usando o **`setInterval`** para exibir uma mensagem de console a cada segundo, e atualizando um contador a cada vez que a função é executada. Usamos a função **`clearInterval`** para interromper o intervalo após o contador atingir o valor de 5.
Observe que tanto o **`setTimeout`** quanto o **`setInterval`** retornam um valor numérico que pode ser usado com a função **`clearTimeout`** ou **`clearInterval`**, respectivamente, para cancelar a execução da função agendada.
## Classes
Em JavaScript, as classes foram introduzidas na especificação ECMAScript 2015 para oferecer uma sintaxe mais clara e fácil de entender para a programação orientada a objetos.
Uma classe é um tipo de objeto que define propriedades e métodos que são compartilhados por todos os objetos que são instâncias da classe. Em JavaScript, as classes são definidas usando a palavra-chave `class`.
Basicamente, as classes são como fábricas para criar objetos, quase como uma função para criar objetos.
Assim como numa fábrica é necessário máquinas para construir algo, em classes temos o **método constructor()** para fabricar os objetos.
```javascript
const carro = { // OBJETO
marca: "fiat",
modelo: "uno",
ano: 2001
}
class Carro{ // Classe para construir objetos de carros
constructor(marca, modelo, ano){
this.marca = marca
this.modelo = modelo
this.ano = ano
}
}
const uno = new Carro("fiat","uno",2001) // objeto
console.log(uno)
```
```javascript
class Pessoa {
constructor(nome, idade) {
this.nome = nome;
this.idade = idade;
}
dizerNome() {
console.log(`Meu nome é ${this.nome}.`);
}
dizerIdade() {
console.log(`Eu tenho ${this.idade} anos.`);
}
}
```
Neste exemplo, estamos definindo uma classe `Pessoa` com dois atributos (nome e idade) e dois métodos (dizerNome e dizerIdade). O método `constructor` é usado para inicializar os atributos da classe.
Para criar uma nova instância da classe **`Pessoa`** usamos o operador **`new`**
```javascript
const pessoa1 = new Pessoa('João', 30);
pessoa1.dizerNome(); // "Meu nome é João."
pessoa1.dizerIdade(); // "Eu tenho 30 anos."
```
As classes em JavaScript também podem herdar propriedades e métodos de outras classes usando a palavra-chave **extends**
```javascript
class Estudante extends Pessoa {
constructor(nome, idade, curso) {
super(nome, idade);
this.curso = curso;
}
dizerCurso() {
console.log(`Eu estudo ${this.curso}.`);
}
}
```
Neste exemplo, estamos definindo uma classe **`Estudante`** que herda propriedades e métodos da classe **`Pessoa`**. O método **`constructor`** é usado para inicializar os atributos da classe **`Estudante`**, incluindo um novo atributo **`curso`**.
## Manipulação de Datas
JavaScript oferece vários objetos para manipulação de datas, incluindo `Date`, `DateTime` e `Moment`
O objeto **Date** é um tipo de objeto em JavaScript que representa uma data e hora. Ele oferece vários métodos para criar, manipular e formatar datas.
```javascript
// Criar uma nova data
const hoje = new Date();
console.log(hoje) //Output: 2023-05-11T18:10:04.423Z
// Criar uma nova data com uma data específica
const natal = new Date('2023-12-25');
console.log(natal) //Output: 2023-12-25T00:00:00.000Z
// Obter o ano da data
const ano = hoje.getFullYear(); //Output: 2023
// Obter o mês da data de 0 até 11, sendo 0 janeiro
const mes = hoje.getMonth(); //Output: 5
// Obter o dia do mês da data
const dia = hoje.getDate(); //Output: 11
// Obter o dia da semana da data de 0 até 6
const diaDaSemana = hoje.getDay(); //Output: 4
// Obter a hora da data de 0 até 23
const hora = hoje.getHours();
// Obter os minutos da data de 0 até 59
const minutos = hoje.getMinutes();
// Obter os segundos da data de 0 até 59
const hora = hoje.getSeconds();
// Obter os milisegundos da data de 0 até 999
const hora = hoje.getMilliseconds();
// Converter a data em uma string formatada
const dataFormatada = hoje.toLocaleDateString('pt-BR');
```
## Json
JSON significa JavaScript Object Notation e é um formato leve de troca de dados que é fácil para pessoas lerem e escreverem e fácil para máquinas interpretarem e gerarem. Em JavaScript, o formato JSON é representado como um objeto literal.
O JavaScript possui métodos nativos que permitem a conversão de dados entre JSON e objetos JavaScript. Esses métodos são:
- **`JSON.parse()`**: Converte uma string JSON em um objeto JavaScript.
- **`JSON.stringify()`**: Converte um objeto JavaScript em uma string JSON.
```javascript
// Objeto JavaScript
const pessoa = {
nome: 'Maria',
idade: 30,
cidade: 'São Paulo'
};
// Convertendo objeto para string JSON
const pessoaJSON = JSON.stringify(pessoa);
console.log(pessoaJSON); // {"nome":"Maria","idade":30,"cidade":"São Paulo"}
// Convertendo string JSON para objeto
const pessoaObjeto = JSON.parse(pessoaJSON);
console.log(pessoaObjeto); // { nome: 'Maria', idade: 30, cidade: 'São Paulo' }
```
Neste exemplo, estamos criando um objeto JavaScript chamado `pessoa` com três atributos. Em seguida, estamos usando o método `JSON.stringify()` para converter o objeto em uma string JSON e armazená-lo na variável `pessoaJSON`. Depois, estamos usando o método `JSON.parse()` para converter a string JSON de volta em um objeto JavaScript e armazená-lo na variável `pessoaObjeto`.
Sign in with Wallet
Connect another wallet