https://github.com/vitorhonna/curso-prog-br
Curso de Desenvolvimento Web do ProgramadorBR
https://github.com/vitorhonna/curso-prog-br
css html javascript
Last synced: 3 months ago
JSON representation
Curso de Desenvolvimento Web do ProgramadorBR
- Host: GitHub
- URL: https://github.com/vitorhonna/curso-prog-br
- Owner: vitorhonna
- Created: 2021-10-08T22:33:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-17T02:45:46.000Z (over 3 years ago)
- Last Synced: 2025-01-14T18:04:16.946Z (5 months ago)
- Topics: css, html, javascript
- Language: JavaScript
- Homepage: https://programadorbr.club.hotmart.com/
- Size: 4.96 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Curso de Desenvolvimento Web - Programador BR
## Certificados
- [HTML, CSS e Javascript (Módulo 1 ao 14)](https://programadorbr.com/certificado/DVWBVSH17HT307110) - Identificador de autenticidade: DVWBVSH17HT307110
- *Firebase, jQuery, Bootstrap (Módulo 17 ao 20)*
- *Node, Mongo (Módulo 21 ao 30)*
Para verificar a autentencidade de um certificado, acesse: https://programadorbr.com/autenticidade e insira o identificador.
## Índice
- [Curso de Desenvolvimento Web - Programador BR](#curso-de-desenvolvimento-web---programador-br)
- [Certificados](#certificados)
- [Índice](#índice)
- [Anotações](#anotações)
- [Módulo 2: HTML Básico](#módulo-2-html-básico)
- [Módulo 3: CSS Básico](#módulo-3-css-básico)
- [Módulo 4: CSS Intermediário](#módulo-4-css-intermediário)
- [Módulo 5: HTML Intermediário](#módulo-5-html-intermediário)
- [Módulo 8: Javascript Básico](#módulo-8-javascript-básico)
- [Módulo 9: Javascript Intermediário](#módulo-9-javascript-intermediário)
- [Módulo 11: HTML Avançado](#módulo-11-html-avançado)
- [Módulo 12: CSS Avançado](#módulo-12-css-avançado)
- [Módulo 13: CSS Animações](#módulo-13-css-animações)
- [Módulo 14: Javascript Avançado](#módulo-14-javascript-avançado)
- [Design Resources](#design-resources)
- [Markdown](#markdown)
## Anotações
### Módulo 2: HTML Básico
- Tag
- Estrutura Básica
- Títulos e Parágrafos
- Comentários
- Formatação
- Links
- Imagens
- Quebra de Linha
- Listas
- Tabelas
### Módulo 3: CSS Básico
- CSS inline
- CSS interno
- CSS externo
- Classes e Ids
- Cores
- Background
- Div
- Ferramentas do Google Chrome
- Unidades de medida (fixas)
- Unidades de Medida (referência)
- Margin e Padding
- Border
- Box Model
- Ajustes de texto
- Fontes
- Usando fontes customizadas
- Estilo de link
- Listas
### Módulo 4: CSS Intermediário
- #### **Modos de exibição: `display`**
Controla como cada elemento é mostrado na tela.
```css
selector {
display: none;
/* Retira o elemento do layout da página (como se nunca tivesse sido colocado)*/
display: block;
/* Quebra de linha no final, possível especificar tamanho (width, height) */
display: inline;
/* Não tem quebra de linha, tamanho fixo */
display: inline-block;
/* Não tem quebra de linha, mas permite especificar tamanho */
}
```
**IMPORTANTE**: quando aplicado *inline-block*, uma margem de 4px é aplicada automaticamente devido a quebra de linha existente no HTML. [Mais informações e ideias de solução aqui](https://css-tricks.com/fighting-the-space-between-inline-block-elements/).
Propriedade `display` padrão dos elementos:
> `
`: block\
> ``: inline\
> ``: block\
> `![]()
`: inline especial, age como inline-block
**_IMPORTANTE_**: Nunca colocar um elemento com `display: block` dentro de um parágrafo `
`, pois irá quebrar o fluxo do parágrafo (ex: `background-color`).
- #### **Controle de vazamento: `overflow`**
Controla como um conteúdo se comporta em relação ao seu container.
```css
selector {
overflow: visible;
/* Mostra todo o conteúdo, independente do elemento pai */
overflow: hidden;
/* Cropa o conteúdo usando o elemento pai */
overflow: scroll;
/* Cria uma barra de rolagem no elemento pai (vertical e horizontal) */
overflow: auto;
/* Cria uma barra de rolagem automaticamente quando necessário, ou altera o tamanho da div */
overflow-x: scroll;
/* Overflow HORIZONTAL, nesse caso adiciona somente barra de rolagem horizontal*/
overflow-y: scroll;
/* Overflow VERTICAL, nesse caso adiciona somente barra de rolagem vertical*/
}
```
- #### **Alinhamento horizontal**
Usar a propriedade `margin`.
Para `
`:
```css
selector {
margin: auto;
/* Centraliza horizontalmente, adicionando margens de ambos os lados preenchendo toda a largura da tela */
margin-left: auto;
/* Alinha a direita */
}
```
Para `![]()
`:
> _Opção 1_:\
> Mudar para `display: block` e usar `margin` na imagem.\
> _Opção 2_:\
> Colocar a imagem dentro de uma `
` e usar `text-align` com `center`, `left` ou `right` na div.
- #### **Position - Static e Relative**
Usar a propriedade `position`.
```css
selector {
position: static;
/* Position padrão, posiciona conforme descrito em 'display' */
position: relative;
/* Posicionamento relativo ao padrão, pode ser usado com 'left', 'top'... */
left: 20px;
top: 20px;
/* Muda a posição e sobrepõe outros elementos, só altera a posição do elemento afetado, diferente de 'margin' */
/* O elemento é posicionado em relação a sua própria posição natural, se fosse 'static' */
/* Posicionamentos usando relative são muito frágeis */
/* Os outros elementos não ocupam o espaço deste elemento, mesmo que movimentado */
}
```
- #### **Position - Absolute**
```css
selector {
position: absolute;
/* Ancora o elemento com relação ao elemento pai, mas outros elementos passam a ocupar o mesmo espaço, como se este elemento não estivesse ali */
/* A posição inicial do elemento é sua posição natural, porém em frente a outros elementos que também tomaram essa posição */
/* Este elemento não é usado por outros como referência para seus posicionamentos */
/* O elemento pai é usado somente se ele NÃO FOR ESTÁTICO, se for, o avô é usado como referência, e assim sucessivamente até o body ser usado como ref */
right: 0px;
bottom: 0px;
/* Se o elemento pai não for static: cola este elemento ao canto inferior direito do pai*/
}
```
- #### **Position - Fixed**
```css
selector {
position: fixed;
/* Assim como em 'absolute', deixa outros elementos ocuparem seu lugar */
/* Ancora o elemento com relação ao viewport, não ao pai ou ascendentes */
/* O viewport é a parte da janela que está aparecendo na tela */
/* Para efeitos de dimensionamento, não leva em conta o pai */
}
```
- #### **Position - Sticky**
```css
selector {
position: sticky;
/* Não deixa outros elementos ocuparem seu lugar */
/* Continua sendo referência para outros elementos */
/* Rola junto com o elemento pai/página */
top: 0px;
/* Rola com a página mas fica grudado no topo e não sai do viewport, neste momento o restante desliza por baixo para continuar rolando */
}
```
- #### **Float**
```css
selector {
float: left;
/* Elemento fica flutuando a esquerda do próximo */
/* Ex: Uma imagem é envelopada por um texto */
}
selector2 {
/* É possível impedir que algum elemento flutue ao redor deste usando 'clear'*/
clear: left;
/* Afeta somente o lado esquerdo, pode ser: both, left, right */
clear: none;
/* Valor padrão, não impede nada */
}
```
- #### **Alinhamento Vertical**
Para textos dentro de um `
`:
```css
selector {
line-height: 100px;
/* Linha de 100px, se o elemento pai tem 100px, o texto centralizado */
/* DESVANTAGEM: TEM QUE SABER O TAMANHO DO ELEMENTO PAI */
}
selector {
position: absolute;
top: 50%;
/* Lembrando que o pai não pode ter position: static */
/* O topo da linha é alinhado com o centro do pai */
transform: translateY(-50%);
/* Translada o elemento -50% de seu tamanho, nesse caso a altura da linha, dessa forma o centro da linha fica alinhado com o centro do elemento pai */
}
```
Para centralizar um elemento:
```css
selector {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
- #### **Viewport**
Adicionar uma tag `` no `` do HTML para que o navegador entenda como processar o site.
```html
```
- #### **Responsividade**
Utilizar unidades de medida relativas ao tamanho da tela ou de elementos ascendentes, por exemplo `%`, `vw` ...
- #### **Media Queries**
Aplica as regras de CSS somente se a tela corresponder a um tamanho máximo (`max-width`) ou mínimo (`min-width`).
```css
@media screen and (max-width: 400px) {
/* Executa somente em telas de no máximo 400px */
selector {
/* Regras */
}
}
```
É possível adicionar diversos _Media Queries_, eles vão sendo aplicados consecutivamente:
```css
selector {
background-color: white;
color: blue;
}
@media screen and (max-width: 500px) {
selector {
background-color: black;
}
}
@media screen and (max-width: 250px) {
selector {
color: red;
}
}
/* No caso acima, temos:
Telas com mais de 500px: fundo branco e fonte azul
Telas com 250 a 500px: fundo preto e fonte azul
Telas com menos de 250px: fundo preto e fonte vermelha */
```
**_IMPORTANTE_**: A **ordem** dos _media queries_ **IMPORTA**, deve ser do **MAIOR** para o **MENOR** se usando `max-width`.
**_IMPORTANTE_**: Os _media queries_ devem ser colocados no **FINAL** do arquivo de CSS.
### Módulo 5: HTML Intermediário
- #### **Formulário: `form`**
`method`: método de envio de dados, `GET` ou `POST`\
`action`: endpoint, se estiver no domínio da página pode ser apenas `/nomeDoEndpoint`
```html
```
- #### **Tipos de `input`**
`text`: Texto comum em uma linha.\
`password`: Esconde o que está sendo digitado.\
`checkbox`: Passa `on` se não tiver `value`, senão passa o `value`. Permite várias seleções.\
`radio`: Semelhante ao `checkbox`, mas só permite uma seleção entre tags com o mesmo `name`. `checked` indica o estado default como marcado.\
`reset`: Limpa todos os campos.\
`submit`: Envia os dados. `value` indica o texto escrito no botão. (Para enviar é melhor usar a tag `button`).
```html
<
Submit
>
```
- #### **Dropdown: `select`**
O `name` do `select` é enviado junto com o `value` do `option`.\
`selected` em `option` indica a posição padrão exibida no dropdown.\
`size` em `select` indica o número de opções exibidas, se houver mais uma barra de rolagem aparece. Não dá o efeito de dropdown.\
`multiple` em `select` permite a seleção de várias opções.
```html
Rio de Janeiro
São Paulo
Minas Gerais
```
- #### **Caixa de texto: `textarea`**
Adiciona uma caixa para entrada de texto. É necessário conter um `name`, senão não é enviado.
```html
Enviar
```
- #### **HTML 5: tipos de `input`**
caniuse.com\
Buscar quais funcionalidades os navegadores suportam.
`color`: abre um seletor de cores e envia o HEX.\
`date`: calendário para selecionar data. Usar `max="{{data}}"` para definir uma data limite.\
`datetime-local`: permite a seleção de data e hora.\
`file`: envio de arquivos. O método deve ser `POST`.\
`number`: envio de números. Usar `min` e `max` para limitar os valores.\
`range`: cria um slider entre `min` e `max`. Usar `value` para setar o default. `step` define o passo\
`tel`: em mobile abre somente o teclado numérico.\
`email`: verifica se o input contém elementos de email, como ponto e arroba.
```html
<
```
- #### **HTML5: Tags Semânticas**
Tags semânticas informam os buscadores sobre o conteúdo da página, dessa forma eles podem ser melhor interpretadas e ranqueadas por eles.
`header`: cabeçalho da página. Mesmo comportamento da tag `
`.\
`nav`: barra de navegação. Aparece dentro do `header`.\
`footer`: rodapé.\
`main`: principal conteúdo do site, só pode haver 1 por página.\
`section`: seção do site, para melhor organização.\
`article`: artigo do site, seu conteúdo deve fazer sentido independente da página.\
```html
Logo
```
### Módulo 8: Javascript Básico
- #### **Hello World**
Um script `javascript` pode ser adicionado ao `HTML` com a tag ``, internamente ou em arquivos separados.
```html
<script>
alert("Hello, World");
```
Com _script.js_:
```js
alert("Hello, World");
```
- #### **Console**
Print no console:
```js
console.log("Hello, World");
```
- #### **Variáveis**
```js
var a = "Hello, World");
console.log(a);
```
- #### **Tipos de dados**
`Boolean` : True ou False\
`Null` : variável vazia\
`Undefined` : retorno de variáveis não inicializadas\
`Number` : número, console mostra em azul\
`"String"` : sequência de caracteres, console mostra em preto\
`{Object}` : dado estruturado, tem propriedades (atributos) e funcionalidades (métodos)\
`[Array]` : lista, agrupamento de dados
- #### **Operações aritméticas**
`+`: Adição\
`-`: Subtração\
`*`: Multiplicação\
`/`: Divisão\
`%`: Módulo (resto de divisão)\
`**`: Exponencial\
`++`: Incremento\
`--`: Decremento
Incremento e decremento podem aparecer antes ou depois da variável, isso muda como é feita uma atribuição, por exemplo:
```js
var a = 30;
var b = --a;
console.log("a = " + a); // a = 29
console.log("b = " + b); // b = 29 <<<
```
```js
var a = 30;
var b = a--;
console.log("a = " + a); // a = 29
console.log("b = " + b); // b = 30 <<<
```
- #### **Atribuições**
| Operator | Usage | Meaning |
| -------- | ------- | ---------- |
| `=` | x = y | x = y |
| `+=` | x += y | x = x + y |
| `-=` | x -= y | x = x - y |
| `*=` | x \*= y | x = x \* y |
| `/=` | x /= y | x = x / y |
| `%=` | x %= y | x = x % y |
- #### **Operadores comparativos**
| Operator | Usage |
| -------- | ------------------------------------------------ |
| `==` | igual |
| `===` | idêntico / estritamente igual (valor e tipo) |
| `!=` | diferente |
| `!==` | estritamente diferente (valor e tipo diferentes) |
| `>` | maior |
| `<` | menor |
| `>=` | maior ou igual |
| `<=` | menor ou igual |
Exemplo de uso:
```js
var a = 3;
var b = "3";
console.log(a == 3); // True
console.log(a === 3); // False
```
- #### **Operadores lógicos**
| Operator | Usage |
| -------- | ------- |
| `&&` | E |
| `\|\|` | OU |
| `!` | Negação |
- #### **Strings**
`str`\
Pode-se usar aspas "duplas" ou 'simples'.
```js
var str = "Texto";
var str = "Texto";
```
O operador `+` concatena strings.
Se a string for somente numérica, pode-se usar operadores matemáticos, mas o tipo passar a ser number:
```js
var numero = "5";
typeof numero; // string
numero *= 2; // numero = 10
typeof numero; // number
var str = "abc" * 2; // str = NaN
```
Para forçar uma mudança de tipo:\
`parseInt(var)` converte para inteiro por truncamento, tipo `number`
```js
var a = "5.5"; // "5.5"
typeof a; // string
a = parseInt(a); // 5
typeof a; // number
```
`parseFloat(var)` converte para float, tipo `number`
```js
var a = "5.5"; // "5.5"
typeof a; // string
a = parseFloat(a); // 5.5
typeof a; // number
```
`Number(var)` converte para tipo `number`
- #### **Alert e Prompt**
`alert("mensagem")`\
Cria um popup com a "mensagem" e um botão "ok".
`prompt("mensagem")`\
Cria um popup com um campo para receber input.
```js
var nome = prompt("Qual o seu nome?");
alert("Bom dia, " + nome + " :)");
```
Os dados recebidos por `prompt` são do tipo `string`.
- #### **Condicionais - IF**
Sintaxe:
```js
if (/*teste lógico*/) {
// executa se o true
}
else if {
// executa se o anterior é false
}
else {
// executa se o anterior é false
}
```
Exemplo:
```js
var idade = 20;
if (idade >= 35) {
console.log("Pode comprar");
console.log("Qual o seu pedido?");
} else if (idade >= 18) {
console.log("Pode comprar");
console.log("Mostre seu documento de identidade");
} else {
console.log("Não pode comprar");
console.log("Volte futuramente");
}
```
- #### **Operador Ternário**
Recomendado para testes simples em uma única linha.
Sintaxe:
```js
var a = /*(teste lógico)*/ ? /*(executa se true)*/ : /*(executa se false)*/
```
Exemplo: verificar se maior de idade
```js
var idade = 15;
idade >= 18 ? console.log("Sim") : console.log("Não");
// Equivalente a:
var resposta = idade >= 18 ? "Sim" : "Não";
console.log(resposta);
// Equivalente a:
if (idade >= 18) {
console.log("Sim");
} else {
console.log("Não");
}
```
Exemplo: multiplicar por 2 se menor que 5, senão multiplicar por 10
```js
var numero = 1;
var resultado = numero < 5 ? numero * 2 : numero * 10;
// Equivalente a:
if (numero < 5) {
resultado = numero * 2;
} else {
resultado = numero * 10;
}
```
- #### **Condicionais - Switch**
Usado para comparar um valor com diversas referências.
Sintaxe:
```js
switch (valor) {
case referencia1:
// executa se valor == referencia1
break;
case referencia2:
// executa se valor == referencia2
break;
case referencia2:
// executa se valor == referencia2
break;
default:
// executa se não entrar em nenhum caso anterior
break;
}
```
Exemplo: organização de fila de embarque
```js
var tipoPassagem = "VIP";
switch (tipoPassagem) {
case "VIP":
console.log("Vá para a fila prioritária");
break;
case "Comum":
console.log("Vá para a fila comum");
break;
default:
console.log("Você não pode embarcar");
break;
}
```
- #### **Repetição - FOR e WHILE**
Sintaxe `for`:
```js
for (var i = 0; i < 5; i++) {
console.log(i); // imprime 0, 1, 2, 3, 4
}
console.log("i = " + i); // i = 5
```
Pode-se limitar o escopo do contador `i` declarando com `let`:
```js
for (let i = 0; i < 5; i++) {
console.log(i); // imprime 0, 1, 2, 3, 4
}
console.log("i = " + i); // Erro "Uncaught ReferenceError: i is not defined"
```
Sintaxe `while`:
```js
var i = 0;
while (i < 5) {
console.log(i); // imprime 0, 1, 2, 3, 4
i++;
}
console.log("i = " + i); // i = 5
```
- #### **Arrays**
Lista de elementos separados por vírgula.
```js
var letras = new Array("A", "B", "C", "D", "E");
var letras = ["A", "B", "C", "D", "E"];
console.log(letras[0]); // "A"
console.log(letras[1]); // "B"
console.log(letras[2]); // "C"
```
Acessando valores com `for` (3 formas):
```js
var letras = ["A", "B", "C", "D", "E"];
for (let i = 0; i < letras.length; i++) {
console.log(letras[i]); // imprime todos os itens
}
// Ou (pegando os índices)
for (let i in letras) {
console.log(letras[i]); // imprime todos os itens, i recebe os índices
}
// Ou (pegando os itens)
for (let letra of letras) {
console.log(letra); // imprime todos os itens, letra recebe o item
}
```
- #### **Funções**
Funções nomeadas estão sujeitas a _hoisting_.
Sintaxe:
```js
function nomeDaFuncao(parâmetros) {
//Comandos
return; //valor
}
// receber parâmetros e retornar valores é opcional
nomeDaFuncao(argumentos);
// os argumentos correspondem aos parâmetros da função quando ela está sendo invocada
```
Exemplo: cálculo de média
```js
function media(nota1, nota2) {
let media = (nota1 + nota2) / 2;
return media;
}
var resultado = media(10, 5);
console.log(resultado); // 7.5
```
É possível atribuir a própria função, passando seu nome, a uma outra variável, que passará a ser utilizável como função:
```js
function media(nota1, nota2) {
return (nota1 + nota2) / 2;
}
console.log(media(10, 5)); // 7.5
m = media; // 'm' recebe a função 'media'
console.log(m(10, 2)); // 6
```
**ATENÇÃO: Variáveis em Funções**
Se uma variável for declarada em uma função SEM utilizar palavras reservadas (`var`, `let`, `const`), ela passar a ter ESCOPO GLOBAL:
```js
function soma(n1, n2) {
total = n1 + n2;
}
soma(1, 5);
console.log(total); // 6, notar que 'total' foi declarada dentro da função e está sendo utilizada fora
```
Se uma variável é declarada dentro da função com QUALQUER palavra reservada, seu escopo é limitado ao escopo da função!
```js
function soma(n1, n2) {
var total = n1 + n2; // poderia ser let ou const
}
soma(1, 5);
console.log(total); // ReferenceError: total is not defined
// Notar que 'total', mesmo declarada com 'var', não sai do escopo da função
```
**Função anônima**
Funções anônimas não estão sujeitas a _hoisting_.
Sintaxe:
```js
var nomeDaFuncao = function (parâmetros) {
//Comandos
return; //valor
};
```
Exemplo:
```js
var media = function (nota1, nota2) {
return (nota1 + nota2) / 2;
};
```
**Função de seta / arrow function**
Sintaxe:
```js
var nomeDaFuncao = (parâmetros) => {
//Comandos
return; //valor
};
```
Exemplo:
```js
var media = (nota1, nota2) => {
return (nota1 + nota2) / 2;
};
```
**Função de callback / callback function**
Quando uma função é passada como parâmetro de outra função, ela pode ser executada como uma callback function.
```js
function foo(callbackFunction) {
console.log("Before callback function");
callbackFunction();
console.log("After callback function");
}
foo(() => {
console.log("I'm inside a callback function! :)");
});
// Before callback function
// I'm inside a callback function! :)
// After callback function
```
- #### **Objetos - Propriedades**
São conjuntos de _propriedades_ separadas por vírgula.
As propriedades podem ser variáveis de qualquer tipo, com uma chave e um valor separados por dois pontos (:).
Um objeto também pode ser uma propriedade de outro objeto.
São parecidos com dicionários de python.
Sintaxe:
```js
// Declaração:
var nomeObjeto = new Object()
// ou
var nomeObjeto = new Object({
chave1: valor1
chave2: valor2
})
// ou
var nomeObjeto = {
chave1: valor1
chave2: valor2
}
// Acessar valores:
nomeObjeto.chave1 // retorna 'valor1'
nomeObjeto["chave1"] // retorna 'valor1'
// Adicionar propriedades:
nomeObjeto.chave3 = valor3
nomeObjeto["chave4"] = valor4
```
Deletar uma propriedade de um objeto:
```js
delete nomeObjeto.chave;
```
Exemplo:
```js
var aluno = {
nome: "Igor",
nota1: 7.5,
};
console.log(aluno.nome + " tirou " + aluno.nota1 + " na prova");
// Igor tirou 7.5 na prova
console.log(aluno["nome"] + " tirou " + aluno["nota1"] + " na prova");
// Igor tirou 7.5 na prova
delete aluno.nota1;
console.log(aluno);
// aluno = {
// nome: "Igor"
// }
```
Objetos como argumentos:
```js
var aluno1 = {
nome: "Igor",
nota: 7.5,
};
var aluno2 = {
nome: "Pedro",
nota: 5.5,
};
var aluno3 = {
nome: "Maria",
nota: 9.5,
};
var alunos = { aluno1, aluno2, aluno3 };
console.log(alunos);
/*
{
{
nome: "Igor",
nota: 7.5
},
{
nome: "Pedro",
nota: 5.5
},
{
nome: "Maria",
nota: 9.5
}
}
*/
```
- #### **Objetos - Métodos**
Um objeto também pode conter funções, que são chamadas de métodos.
Os métodos podem ser funções definidas dentro ou fora do objeto.
```js
var aluno = {
nome: "Igor",
notas: [6, 7],
media: function (n1, n2) {
return (n1 + n2) / 2;
},
};
// 'media' é um método de 'aluno'
console.log(aluno.media(aluno.notas[0], aluno.notas[1])); // 6.5
```
```js
function calcMedia(n1, n2) {
return (n1 + n2) / 2;
}
var aluno = {
nome: "Igor",
notas: [6, 7],
media: calcMedia,
};
// 'media' é um método de 'aluno'
console.log(aluno.media(aluno.notas[0], aluno.notas[1])); // 6.5
```
`this`\
Referencia o objeto internamente:
```js
var aluno = {
nome: "Igor",
notas: [6, 7],
media: function () {
return (this.notas[0] + this.notas[1]) / 2;
},
};
// 'media' é um método de 'aluno'
console.log(aluno.media()); // 6.5
```
O método também pode ser definido externamente:
```js
function calcMedia() {
return (this.notas[0] + this.notas[1]) / 2;
}
var aluno = {
nome: "Igor",
notas: [6, 7],
media: calcMedia,
};
// 'media' é um método de 'aluno'
console.log(aluno.media()); // 6.5
```
- #### **Objetos - Bob o Construtor**
Funções para criar objetos de maneira mais fácil e estruturada, além de evitar erros de digitação.
```js
function criarAluno(nomeAluno, nota1, nota2) {
let aluno = {
nome: nomeAluno,
notas: [nota1, nota2],
media: function () {
return (this.notas[0] + this.notas[1]) / 2;
},
};
return aluno;
}
var turma = [
criarAluno("Igor", 9, 6),
criarAluno("João", 6, 7),
criarAluno("Maria", 5, 10),
];
console.log(turma[1].media()); // 6.5 (média do João)
```
Funções também são objetos. Elas são usadas como `Construtores` para criar outros objetos com uma certa estrutura:
```js
// Objeto tipo 'aluno'
function aluno(nome, nota1, nota2) {
this.nome = nome;
this.nota = new Array();
this.nota[0] = nota1;
this.nota[1] = nota2;
this.media = function () {
return (this.nota[0] + this.nota[1]) / 2;
};
}
// Criando objetos (instanciar)
var aluno1 = new aluno("Igor", 8, 7);
var aluno2 = new aluno("João", 6, 7);
// 'aluno1' e 'aluno2' são instâncias de 'aluno'
console.log(aluno1);
console.log(aluno2);
```
`forEach()`\
Método do objeto `Array`, recebe uma função cujo parâmetro será cada elemento do array. Semelhante a um loop for.
Sintaxe:
```js
objeto.forEach((elemento, index, array) => {
// função
}, thisArg);
// 'thisArg' será o valor usado por 'this' na função, é opcional, assim como receber o index e o array
```
Exemplo:
```js
var alunos = ["Igor", "João", "Maria"];
alunos.forEach(function (elemento) {
console.log(elemento); // Imprime Igor, João, Maria
});
// Usando função de seta:
alunos.forEach((elemento) => {
console.log(elemento); // Imprime Igor, João, Maria
});
// Usando mais argumentos:
alunos.forEach((elemento, index, array) => {
console.log(elemento, index, array);
});
/* Imprime:
Igor 0 ["Igor", "João", "Maria"]
João 1 ["Igor", "João", "Maria"]
Maria 2 ["Igor", "João", "Maria"]
*/
// A função que forEach recebe pode ser qualquer função, ela é aplicada a todos os elementos da array
var numeros = [1, 2, 3];
function dobro(num, i, arr) {
arr[i] = num * 2;
}
console.log(numeros); // [1, 2, 3]
numeros.forEach(dobro);
console.log(numeros); // [2, 4, 6]
```
- #### **Datas**
Datas são objetos em JS.
```js
var d = new Date(); // Data atual
console.log(d);
// Sat Oct 23 2021 18:26:11 GMT-0300 (Brasilia Standard Time)
```
É possível declarar manualmente. Atenção: valor passado para o mês é um índice numa array que vai de 0 (Jan) a 11 (Dez)!!
Sintaxe:
```js
// Data atual
new Date();
// String de data
new Date("dateString");
// Argumentos
new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds);
// Se apenas um parâmetro for passado, será considerado milissegundos
new Date(milliseconds);
// Timestamp
const d = new Date();
let timestamp = d.getTime();
```
Exemplos:
```js
var d = new Date(2021, 09, 23);
console.log(d);
// Sat Oct 23 2021 00:00:00 GMT-0300 (Brasilia Standard Time)
var d = new Date(0);
// Wed Dec 31 1969 21:00:00 GMT-0300 (Brasilia Standard Time) [epoch]
var d = new Date("12 24 2021 14:00");
// Fri Dec 24 2021 14:00:00 GMT-0300 (Brasilia Standard Time)
```
Datas têm métodos específicos, mais informações:
- [Date Objects](https://www.w3schools.com/js/js_dates.asp)
- [Date Formats](https://www.w3schools.com/js/js_date_formats.asp)
- [Date Get Methods](https://www.w3schools.com/js/js_date_methods.asp)
- [Date Set Methods](https://www.w3schools.com/js/js_date_methods_set.asp)
- #### **Var, Let e Const**
Palavras reservadas para declarar variáveis.
**`var`**: tem escopo global, dentro e fora de blocos (como `if`s, por ex), hoisting (declara a variável, mas não atribui valor).
**`let`**: tem escopo local, só existe dentro do bloco onde foi declarada (como um `if`, por ex).
```js
var a = 1;
let b = 2;
console.log(a); // 1
console.log(b); // 2
{
var c = 3;
let d = 4;
}
console.log(c); // 3
console.log(d); // Erro: Uncaught ReferenceError: d is not defined
```
**`const`**: tem escopo local e valor constante.
Não pode ter seu valor reatribuído:
```js
const a = 1;
a = 2; // Erro: Uncaught TypeError: Assignment to constant variable.
```
Não pode ser redeclarada:
```js
const a = 1;
const a = 2; // Erro: Uncaught SyntaxError: Identifier 'a' has already been declared
```
Contudo, pode ser modificada.
- Se for uma array, por exemplo, seu conteúdo pode mudar, mas não pode deixar de ser uma array nem ser atribuída outra array.
```js
const a = [1];
a[0] = 2;
console.log(a); // [2]
const b = [3];
b[1] = 4;
console.log(b); // [3, 4]
const c = [5];
c = [6]; // Erro: Uncaught TypeError: Assignment to constant variable.
```
**ATENÇÃO:** Funções têm escopo restrito, uma variável declarada com `var` dentro de uma função não estará disponível fora da função.
### Módulo 9: Javascript Intermediário
- #### **Window**
Objeto padrão de páginas da web, contém muitas propriedades, como o `console`.
Por ser o objeto padrão, não é necessário mencioná-lo:
```js
window.console.log("hello, js"); // hello, js
console.log("hello, js"); // hello, js
```
- #### **Document / Documento Object Model (DOM)**
`document` é uma propriedade do objeto `window`, com ele é possível acessar o DOM.\
As tags `head` e `body`, filhas de `html`, são objetos que podem ser acessados como uma propriedade de `document`:\
`document.head` e `document.body`
- #### **Acessando elementos HTML com JS**
\- Usando um `id`: `document.getElementById`\
\- Usando uma `class`: `document.getElementsByClassName`\
\- Usando a `tag` html: `document.getElementsByTagName`
Também é possível usar os seletores CSS:\
\- `.querySelector("#id")`\
\- `.querySelector(".class")`\
\- `.querySelector("name")`\
\- ...
- #### **Modificando elementos**
Obter e modificar o conteúdo de um elemento:
\- `.innerHTML`: recebe html e interpreta, retorna o conteúdo total, incluindo as tags.\
\- `.innerText`: recebe texto simples, retorna somente o texto visível que a tag contém.\
\- `.textContent`: recebe texto simples, retorna todo o texto que a tag contém, mesmo que algo esteja sendo escondido da visualização por meio de CSS, porém sem as tags.
```css
span {
display: none;
}
```
```html
paragrafo teste texto oculto com css
```
```js
let p = document.querySelector(".paragrafoTeste");
console.log(p.innerHTML); // retorna: "paragrafo teste texto oculto com css"
console.log(p.textContent); // retorna: "paragrafo teste texto oculto com css"
console.log(p.innerText); // retorna: "paragrafo teste"
```
Modificando **atributos clássicos** (ex: classes, style, etc):
\- Classes: `.className`
```js
let p = document.querySelector(".paragrafoTeste");
p.className = "newClassName";
```
\- Style: `.style`
```js
let p = document.querySelector(".paragrafoTeste");
p.style = "color: blue";
```
Modificando **atributos personalizados**:
```html
Texto
```
```js
let p = document.querySelector(".paragrafoTeste");
p.getAttribute("meuAtt"); // retorna: "nomeDoMeuAtributo"
p.setAttribute("meuAtt", "novoNome");
```
`.setAttribute` também serve para criar um novo atributo personalizado.
- #### **Eventos (DOM Events)**
Eventos podem ser adicionado a tags como atributos. Eles podem modificar elementos,
chamar funções, aplicar estilos, etc.\
Exemplos de eventos:
\- `onclick="funcao"` : Executa uma função quando clicado.\
\- `onchange="funcao"` : Colocado em uma tag `input`, executa quando o campo de texto perde o foco.\
\- `oninput="funcao"` : Colocado em uma tag `input`, executa conforme o texto é digitado.\
\- `onload="funcao"` : Colocado na tag `body`, executa depois que toda a página for carregada.\
\- `onmouseover="funcao"` : Executa quando o cursor passar sobre o elemento\
\- `onmouseout="funcao"` : Executa quando o cursor deixar o elemento.
Também é possível alterar os efeitos dos eventos no próprio JS, basta acessar o evento por meio
de notação de ponto:
```js
let div = document.querySelector(".divTeste");
div.onclick = novaFuncao; // em que 'novaFuncao' é o nome de outra função a ser executada
function novaFuncao() { ... }
```
Além disso, é possível adicionar um evento utilizando um Event Listener, com `.addEventListener`:
Sintaxe:
```js
element.addEventListener("", ""); // nome dos eventos sem 'on', ex: 'onclick' -> 'click', 'onmouseover' -> 'mouseover'...
```
Por exemplo:
```js
let div = document.querySelector(".divTeste");
div.addEventListener("click", novaFuncao);
function novaFuncao() { ... }
```
- #### **Comparando as maneiras de criar um evento**
\- Criando na `tag` html:
A propriedade `this` retorna o objeto `window`, não a `tag`.
```html
Clique Aqui 1
```
```js
function f1() {
console.log("teste1");
console.log(this); // Imprime o objeto window
}
```
Nenhum argumento é enviado para a função, se não for explicitamente colocado.
```js
function f1(e) {
console.log("teste1");
console.log(e); // undefined
}
```
Para acessar a tag no js, é possível passar `this` como um argumento da função na `tag`, porém o parâmetro recebido pela função não pode se chamar `this`.
```html
Clique Aqui 1
```
```js
function f1(tag) {
console.log("teste1");
console.log(this); // Imprime o objeto window
console.log(tag); // Imprime a tag html
}
```
\- Criando com `.addEventListener`:
A propriedade `this` retorna a `tag` que teve um evento adicionado.
```html
Clique Aqui 2
```
```js
function f2() {
console.log("teste2");
console.log(this); // Imprime a tag p com id ref
}
window.onload = () => {
let p = document.querySelector("#ref");
p.addEventListener("click", f2);
};
```
O método `.addEventListener` envia como argumento o evento de clique `PointerEvent`, que é um objeto com inúmeras informações sobre o evento, como a tag que foi clicada:
```js
function f2(e) {
console.log("teste2");
console.log(e); // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
console.log(e.target); // Imprime a tag que foi clicada
}
```
- #### **Elementos pai e filhos**
Para acessar os elementos pai ou filhos a partir de um elemento:
\- `.parentElement` : acessa o elemento pai\
\- `.children` : acessa os elementos filhos
- #### **Biblioteca Math**
Biblioteca de funções matemáticas.
\- `Math.PI` : retorna o número pi\
\- `Math.E` : retorna o número e\
\- `Math.sqrt()` : retorna a raiz quadrada de \\
\- `Math.pow(,)` : retorna a potência \^\ \
\- `Math.random` : retorna um número aleatório entre 0 e 0.99... \
\- `Math.round()` : retorna \ arredondado para o **maior ou menor** inteiro mais próximo\
\- `Math.floor()` : retorna \ arredondado para o **maior** inteiro mais próximo\
\- `Math.ceil()` : retorna \ arredondado para o **menor** inteiro mais próximo\
\- `Math.trunc()` : retorna \ arredondando para o inteiro mais próximo **na direção do zero**
Math.trunc() arredonda na direção do zero, ou seja, se o número for positivo, ele arredonda para menos, se for negativo, ele arredonda para mais. Enquanto Math.floor() sempre arredonda para menos e Math.ceil() sempre arredonda para mais. Ou seja, Math.trunc() funciona como Math.floor() para números positivos e como Math.ceil() para números negativos. Além disso, nenhuma dessas funções leva em conta o valor não inteiro do número.
Exemplos:\
-> 1.2\
Math.trunc(1.2) retorna 1\
Math.floor(1.2) retorna 1\
Math.ceil(1.2) retorna 2
-> -1.2\
Math.trunc(1.2) retorna -1\
Math.floor(1.2) retorna -2\
Math.ceil(1.2) retorna -1
- #### **JSON**
É a representação de um objeto: JavaScript Object Notation.
`JSON` possui dois métodos:
\- `JSON.parse` : pega uma string e transforma em um objeto JSON.
\- `JSON.stringfy` : pega um objeto JSON e transforma em uma string.
```js
let person = {
name: "Vitor",
age: "26",
};
console.log(JSON.stringify(person)); // string: {"name":"Vitor","age":"26"}
let cat = '{"name": "Tom", "sound": "meow"}';
console.log(JSON.parse(cat)); // objeto: {name: 'Tom', sound: 'meow'}
```
- #### **Local Storage - Persistência de dados**
`localStorage` é uma propriedade de `window`, ele permite a persistência de dados por meio dos métodos:
\- `.setItem()` : salva um dado na memória -> `localStorage.setItem("name", "Vitor")`
\- `.getItem()` : recupera um dado da memória -> `localStorage.getItem("name")`
\- `.removeItem()` : deleta um dado da memória -> `localStorage.removeItem("name")`
Os dados são armazenados conforme o domínio da página, ou seja, não podem ser acessados em páginas diferentes. Por exemplo, dados de um aluno salvos em escola.com não podem ser acessados em faculdade.com.
- #### **Timer e Intervalo**
\- Timer: executa uma função **uma vez** depois de um intervalo de tempo
` = setTimeout(,
\- Intervalo: executa uma função **repetidamente** a cada intervalo de tempo
` = setInterval(,
\- Parar execução: `clearTimeout()` e `clearInterval()`
### Módulo 11: HTML Avançado
- #### **Atributos personalizados**
É possível criar atributos personalizado utilizando o método `.setAttribute(,)`.
Para atributos com o nome precedido de "data-", é possivel acessar os atributos utilizando `el.dataset.`:
```html
```
```js
const lista = document.querySelector("#list");
console.log(lista.dataset.num); // "5"
```
- #### **Vídeos**
Por padrão, os controles de vídeo ficam ocultos. Utilizar o atributo `controls` para mostrá-los.
```html
```
Atributos:
-> `autoplay` e `muted`: reproduzir automaticamente, alguns navegadores só reproduzem automaticamente se o som estiver mutado.\
-> `loop`: reprodução em loop.\
-> `poster="thumb.png"`: thumb do vídeo.\
-> `preload=`: configura como o vídeo deve ser carregado.
É possível criar players com controles personalizados para videos.
Ver referência com a [lista de métodos e propriedades](https://www.w3schools.com/tags/ref_av_dom.asp).
- #### **iFrame**
Utilizar a tag `iframe` para adicionar outras páginas html dentro de uma página html. É útil para adicionar vídeos do YouTube.
- #### **Audio**
Tag `audio`. É possivel adicionar audios em fallback, caso um formato principal não seja reconhecido (assim como se faz com fontes):
```html
```
Assim como vídeos, há diversas [propriedades e métodos](https://www.w3schools.com/tags/ref_av_dom.asp) para controle e personalização.
- #### **Canvas:**
Utilizar canvas para desenhar. A tela de desenho é definida pela tag `canvas`, que deve possuir um id, width e height. É importante definir a largura e altura no html, para não ter problemas com o posicionamento dos desenhos depois.
Antes de começar a desenhar, é preciso acessar o contexto.
-> **Linhas:**
```html
```
```js
const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
context.moveTo(2.5, 0);
context.lineTo(250, 250);
context.lineTo(497.5, 0);
context.lineTo(497.5, 497.5);
context.lineTo(2.5, 497.5);
context.lineTo(2.5, 0);
context.lineWidth = 5;
context.strokeStyle = "darkblue";
context.stroke();
```
-> **Retângulos:**
Os argumentos estão na ordem: (x, y, width, height).
```js
context.fillStyle = "lightskyblue";
context.fillRect(20, 380, 150, 100);
context.strokeRect(330, 380, 150, 100);
context.rect(200, 330, 100, 150);
context.fill();
context.stroke();
context.clearRect(40, 420, 400, 20);
```
-> **Path**
Para separar as curvas, utilizar `context.beginPath()`.
Após passar uma sequência de pontos, para fechar a curva: `context.closePath()`.
```js
context.beginPath();
context.strokeStyle = "gray";
context.fillStyle = "lightgray";
context.moveTo(25, 75);
context.lineTo(200, 250);
context.lineTo(25, 250);
context.closePath();
context.fill();
context.stroke();
```
-> **Circles**
Os argumentos estão na ordem: T
```js
context.beginPath();
context.strokeStyle = "black";
context.fillStyle = "lightgray";
const { x_center, y_center, radius, start, end } = {
x_center: 250 + 250 * (2 / 3),
y_center: 250 * (2 / 3),
radius: 25,
start: Math.PI * 0,
end: Math.PI * 2,
};
context.arc(x_center, y_center, radius, start, end);
context.fill();
context.stroke();
```
-> **Animação**
É possível criar animações utilizando `setInterval` e as funções de desenho.
-> **Imagens**
É possível inserir imagens dentro de um canvas, para isso, criar um elemento usando `const img = new Image()`, definir a fonte da imagem `img.src = "./image.png"`, e adicionar ao canvas com `context.drawImg(img, , , , )`. Para acessar o tamanho da image, pode-se usar `img.naturalWidth` e `img.naturalHeight`.
Pode se necessário esperar a página carregar, nesse caso, utilizar o método `onload` e passar um função que contenha o código que desenha a imagem (nessa função, o elemento de imagem pode ser referenciado com `this`).
### Módulo 12: CSS Avançado
- #### **Pseudo Elementos**
Indicados por `::` após um seletor. Permitem funções adicionais no CSS. [Mais informações aqui](https://github.com/vitorhonna/rocketseat-discover/blob/main/CSS/css.md#pseudo-elements). [E aqui](https://www.w3schools.com/cssref/css_selectors.asp).
-> `::first-letter`\
-> `::first-line`\
-> `::before`\
-> `::after`\
-> `::selection`
- #### **Seletores**
Selecionam elementos para aplicação de estilos. [Mais informações aqui](https://github.com/vitorhonna/rocketseat-discover/blob/main/CSS/css.md#seletores-e-combinators). [E aqui](https://www.w3schools.com/cssref/css_selectors.asp).
- #### **Pseudo Classes**
Indicadas por `:` após um seletor. Permitem funções adicionais no CSS. [Mais informações aqui](https://github.com/vitorhonna/rocketseat-discover/blob/main/CSS/css.md#pseudo-classes---selecionando-elementos). [E aqui](https://www.w3schools.com/cssref/css_selectors.asp).
- #### **Função Calc CSS**
Permite a realização de cálculos para serem usados como valores de propriedades. [Mais informações aqui](https://developer.mozilla.org/en-US/docs/Web/CSS/calc()).
- #### **Transformações**
É possível aplicar transformações aos elementos selecionados utilizando `transform`. Essa propriedade tem como valor uma função, que vai determinar o tipo de transformação. Exemplos:
-> `transform: rotate(45deg)`\
-> `transform: scale(0.25)`\
-> `transform: skew(-15deg, -15deg)`\
-> `transform: translate(-50%, -50%)`
Também é possível combinar transformações: `transform: rotate(45deg) scale(0.25)`.
Mais opções [consultar aqui](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform).
- #### **Compatibilidade de navegadores**
Nem todos os navegadores são compatíveis com algumas propriedades CSS. Verificar compatibilidade em:
[Should I Prefix](http://shouldiprefix.com/)\
[Can I Use](https://caniuse.com/)
- #### **Variáveis em CSS**
É possível criar variáveis em CSS.
```css
:root {
--size: 200px;
--azul: cornflowerblue;
--margin: 100px;
}
div.square {
width: var(--size);
height: var(--size);
background-color: var(--azul);
margin: var(--margin);
}
div.circle {
width: var(--size);
height: var(--size);
background-color: var(--azul);
margin: var(--margin);
border-radius: 50%;
}
```
- #### **FlexBox**
[Mais informações aqui](https://github.com/vitorhonna/rocketseat-discover/blob/main/CSS/css.md#alinhando-os-planetas-flexbox).\
[E aqui](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).\
[E aqui](https://origamid.com/projetos/flexbox-guia-completo/).\
[E testes interativos aqui](https://codepen.io/enxaneta/pen/adLPwv).
Treinar flexbox no [Flexbox Froggy](https://flexboxfroggy.com/).
-> **Flex Direction**: Determina a direção do eixo principal.
-> **Wrap**: Determina se os elementos devem ter seu tamanho modificado para caber em uma linha ou se deve ser aplicada uma quebra de linha (preserva o tamanho dos elementos).
-> **Flex Flow**: Shorthand para o flex direction e wrap.
-> **Justify Content**: Alinha os itens com relação ao EIXO PRINCIPAL (as linhas).
-> **Align Items**: Alinha os itens com relação ao EIXO TRANSVERSAL (as linhas).
-> **Align Content**: Alinha as ***linhas*** com relação ao container, nesse caso elas passam a ter apenas o tamanho necessário para conter os itens, em vez de preencher todo o espaço do elemento pai (padrão stretch).
-> **Grow/Shrink**: Determina como o elemento pode expandir para preencher o espaço restante. Ou encolher para caber no espaço disponível.
-> **Ordem**: Determina a ordem em que os elementos aparecem. Por padrão vale 0.
-> **Align Self**: Propriedade aplicada no elemento. Cria uma regra específica para aquele elemento e sobrescreve a regra geral definida no elemento pai. Com isso, é possível, por exemplo, alinhar todos os elementos ao centro (regra geral) e um elemento específico ao topo (regra específica).
- #### **Grid:**
-> **Template:**
\- `grid-template-rows: 1fr 1fr`: duas linhas de mesmo tamanho, que preenchem todo o espaço disponível.\
\- `grid-template-columns: 1fr 2fr 1fr`: três colunas, sendo a do meio com o dobro do tamanho das adjacentes. Preenchem todo o espaço disponível.\
\- `grid-template: 1fr fr / 1fr 2fr 1fr`: shorthand, com valores para as linhas primeiro, separados por uma barra dos valores para colunas.
É possível alterar o posicionamento dos elementos individualmente utilizando `grid-row` e `grid-colum`.
-> **Gap:**
Define o espaçamento entre os elementos do grid.
\- `row-gap: 10px`: espaçamento entre linhas.\
\- `colum-gap: 20px`: espaçamento entre colunas.\
\- `gap: 15px` shorthand, aplica o valor para linhas e colunas. Se forem passados dois valores, o primeiro corresponde ao gap das linhas e o segundo, ao das colunas.
-> **Justify e Align Items:**
`justify-items` e `align-items` posicionam os **elementos** dentro de sua célula do grid.
-> **Justify e Align Content:**
`justify-content` e `align-content` posicionam as **linhas e colunas (células)** do grid com relação ao elemento pai. Ao alterar uma dessas propriedades, as células deixam de crescer para ocupar todo o espaço disponível e passam a ter apenas o tamanho necessário para conter os elementos que estão em seu interior (perdem o valor padrão `stretch`).
-> **Template Area:**
[Mais informações aqui](https://github.com/vitorhonna/rocketseat-discover/blob/main/CSS/css.md#posicionando-foguetes).
-> **Column e Row Start e End:**
Para fazer um elemento ocupar mais de uma coluna, utilizar `grid-column-start` e `grid-colum-end` passando as referências das células do grid. Essa referência indica o **início** da célula, então para um elemento cobrir as três primeiras colunas, por exemplo, ele deve receber 1 e 4.
Para linhas, utilizar `grid-row-start` e `grid-row-end`.
Quando um elemento já começa em uma posição desejada, pode-se passar apenas onde ele deve terminar. Assim, para indicar apenas a quantidade de células que um elemento deve ocupar, pode-se passar `span` antes do número de espaços a ocupar. Por exemplo, para ocupar 3 colunas: `grid-column-end: span 3` (sem o `span` ele ocuparia apenas 1 espaço na última coluna).
### Módulo 13: CSS Animações
- #### **Keyframes**:
Para criar uma animação, criar um `@keyframe` com o nome da animação e definir o estado inicial, com `from` e o estado final, com `to`. Em seguida, aplicar a animação a um elemento utilizando a propriedade `animation-name` e definir a duração com `animation-duration`.
```css
@keyframes changeColor {
from {
background-color: lightcyan;
color: black;
}
to {
background-color: darkblue;
color: white;
}
}
.animation .square {
animation-name: changeColor;
animation-duration: 5s;
}
```
- #### **Adicionando estados a animação**:
Além do estado inicial e final, é possível definir estados intermediários utilizando porcentagens:
```css
@keyframes changeColorAndWidth {
0% {
background-color: lightcyan;
color: black;
}
50% {
background-color: purple;
width: 200px;
}
100% {
background-color: darkblue;
color: white;
}
}
.animation .square {
animation-name: changeColorAndWidth;
animation-duration: 5s;
}
```
- #### **Delay**:
É possível determinar um delay antes da animação começar, para isso, setar no elemento a propriedade `animation-delay` passando um valor de tempo.
```css
.animation .square {
animation-name: changeColorAndWidth;
animation-duration: 5s;
animation-delay: 2s;
}
```
- #### **Loop**:
Para repetir uma animação, setar no elemento a propriedade `animation-iteration-count` passando um número de repetições ou `infinite`.
```css
.animation .square {
animation-name: changeColorAndWidth;
animation-duration: 5s;
animation-iteration-count: infinite;
}
```
- #### **Direction**:
É possível determinar a direção da animação utilizando a propriedade `animation-direction`. Passando o valor `reverse` por exemplo, a animação começará do estado final e irá para o estado inicial. Já o valor `alternate` inicia pelo estado inicial, vai para o estado final, porém reinicia a partir do estado final.
```css
.animation .square {
animation-name: changeColorAndWidth;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
```
- #### **Fill Mode**:
Para determinar o estado de uma animação ao carregar a página ou ao terminar a animação, utilizar a propriedade `animation-fill-mode`.
-> `animation-fill-mode: forwards` congela no último frame após o término da animação.
```css
.animation .square {
animation-name: changeColorAndWidth;
animation-duration: 3s;
animation-fill-mode: forwards;
}
```
-> `animation-fill-mode: backwards` mostra o elemento no estado inicial da animação assim que a página é carregada. Só funciona se a propriedade `animation-delay` estiver determinada.
```css
.animation .square {
animation-name: changeColorAndWidth;
animation-duration: 3s;
animation-delay: 500ms;
animation-fill-mode: backwards;
}
```
-> `animation-fill-mode: both` combina as duas funções anteriores: inicia o elemento após o carregamento da página com o estado inicial da animação e congela o ultimo frame após o término.
- #### **Timing Function**:
A propriedade `animation-timing-function` define a velocidade do movimento.
```css
.animation .square:nth-child(1) {
animation-timing-function: linear; /* Velocidade Linear */
}
.animation .square:nth-child(2) {
animation-timing-function: ease; /* Médio no início, muito rápido no meio e lento no final */
}
.animation .square:nth-child(3) {
animation-timing-function: ease-in; /* Lento no início */
}
.animation .square:nth-child(4) {
animation-timing-function: ease-out; /* Lento no final */
}
.animation .square:nth-child(5) {
animation-timing-function: ease-in-out; /* Lento no início e no final */
}
```
- #### **Short Hand**:
É possível passar todos os valores em uma única propriedade: `animation`.
```css
animation: ;
```
- #### **Transitions**:
Sem a definição de uma transição, a aplicação de uma pseudo-classe (`:hover`, por exemplo) é instantânea. Para alterar esse comportamento, escolher a/as propriedades com `transition-property` e determinar a duração com `transition-duration`. Deve-se aplicar as definições de transição no elemento que já está sendo exibido na página (sem a pseudo-classe).
```css
.transition div {
margin: 20px;
transition-property: background-color color border-radius;
transition-duration: 500ms;
}
.transition .square:hover {
background-color: darkblue;
color: white;
border-radius: 50%;
}
```
Quando nenhuma propriedade é escolhida, mas uma duração é determinada, ela é aplicada a todas as propriedades do elemento no momento que a página é carregada.
### Módulo 14: Javascript Avançado
- #### **Strict mode**
Para tornar obrigatória a declaração de todas as variáveis dentro do escopo que estão sendo utilizadas, adicionar `"use strict"` no início do script. Assim, problemas de escopo são evitados. Exemplo: uma variável utilizada dentro de uma função porém não declarada com uma palavra reservada (`var`, `let`, `const`) tem escopo global, pois é declarada no momento do hoisting da função. Ao utilizar o strict mode isso não é mais possível. Da mesma forma que declarar uma variável fora de uma função e depois tentar usá-la dentro da função não funcionará.
- #### **This e Bind**
`this` faz referência ao objeto em contexto. Por exemplo, um método dentro de um objeto pode acessar informações do próprio objeto utilizando `this` e notação de ponto. Com isso, também é possível criar funções genéricas para determinadas classes de objetos que possuam atributos com mesma key. Ex:
```js
function speakGeneric() {
print(this.sound);
console.log(this.sound);
}
const Dog = {
sound: "Woof woof",
speak: speakGeneric,
};
const Cat = {
sound: "Meow meow",
speak: speakGeneric,
};
Dog.speak(); // Woof woof
Cat.speak(); // Meow meow
```
Se a função não tiver um contexto (fora de um objeto, por exemplo), o `this` será indefinido. Para dar contexto a função, utilizar `bind` para passar um objeto como argumento que a função irá considerar para o valor de `this`.
```js
speakGeneric(); // undefined
let function_bind = speakGeneric.bind(Dog);
function_bind(); // Woof woof
```
- #### **Arrow Functions**
É uma função anônima, porém não pode ser usada com a palavra chave `this`, arrow functions perdem o contexto mesmo se estiverem dentro do objeto. `bind` também não funciona. A arrow function entende o `this` como o objeto global `window`. Sintaxe:
```js
(parâmetro) => {
//código a ser executado
}
```
- #### **Callback**
Quando uma função é passada como parâmetro para outra função ela é chamada de callback. No exemplo abaixo, as funções `hi` e `bye` são callbacks.
```js
function hi() {
console.log("Hi");
}
function bye() {
console.log("Bye");
}
function greetUser(greeting, name) {
greeting();
console.log(name);
}
greetUser(hi, "Vitor"); // Hi Vitor
greetUser(bye, "Vitor"); // Bye Vitor
```
Funções callback são úteis quando é preciso se comunicar com um servidor, por exemplo, e esperar uma resposta (execução assíncrona). Esse delay entre requisitar e receber uma informação é simulado no exemplo abaixo com um timeout de 1s:
```js
// (1) Com callback:
let users = ["John", "James", "Joe", "Joseph"];
function addUser(name, callback) {
setTimeout(() => {
users.push(name);
callback();
}, 1000);
}
function listUsers() {
console.log(users);
}
addUser("Vitor", listUsers);
// ['John', 'James', 'Joe', 'Joseph', 'Vitor']
```
Se fosse realizado um fluxo de execução tradicional (síncrono), como no exemplo abaixo, a listagem de usuários não mostraria o usuário recém inserido (Vitor):
```js
// (2) Sem callback:
let users2 = ["John", "James", "Joe", "Joseph"];
function addUser2(name) {
setTimeout(() => {
users2.push(name);
}, 1000);
}
function listUsers2() {
console.log(users2);
}
addUser2("Vitor");
listUsers2();
// ['John', 'James', 'Joe', 'Joseph']
```
- #### **Promises**
São uma maneira mais nova de se usar callback. Uma *promise* é um objeto que recebe como parâmetro uma função com dois argumentos: `resolve` e `reject`, que são funções que devem ser executadas em caso de sucesso ou falha da operação. Ao final da função, a promise deve ser retornada. No momento do uso, para se utilizar o retorno da função (a promise), utilizar `.then`, que será executada caso a promise tenha terminado executando `resolve()`. Para capturar erros, utilizar `.catch` e uma função a ser executada caso a promise tenha terminado executando `reject()`. Mesmo exemplo anterior, utilizando promises:
```js
// (3) Com promise
let users3 = ["John", "James", "Joe", "Joseph"];
function addUser3(name) {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
users3.push(name);
let error = false;
if (!error) {
resolve();
} else {
reject({
msg: "(3) Com promise ==> Alguma mensagem de erro! :(",
});
}
}, 1000);
});
return promise;
}
function listUsers3() {
console.log("(3) Com promise");
console.log(users3);
}
addUser3("Vitor")
.then(listUsers3)
.catch((error) => {
console.log(error.msg);
});
// ['John', 'James', 'Joe', 'Joseph', 'Vitor']
```
- #### **Async Await**
Uma outra maneira de usar promises.
`async` precede a definição de uma função e indica que, dentro dessa função, em algum momento será necessário esperar o retorno de uma promise. Isso será indicado pela palavra reservada `await`. O mesmo exemplo anterior:
```js
let users4 = ["John", "James", "Joe", "Joseph"];
function addUser4(name) {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
users4.push(name);
let error = false;
if (!error) {
resolve();
} else {
reject({
msg: "(4) Com async await ==> Alguma mensagem de erro! :(",
});
}
}, 1000);
});
return promise;
}
function listUsers4() {
console.log("(4) Com async await");
console.log(users4);
}
async function run() {
try {
await addUser4("Vitor");
listUsers4();
} catch (error) {
console.log(error.msg);
}
}
run();
// ['John', 'James', 'Joe', 'Joseph', 'Vitor']
```
- #### Higher-Order Functions: **Filter**
Higher-Order Functions (HOF) são funções que aceitam um função como parâmetro e/ou retornam uma função.
O método `filter()` recebe uma função callback que deve retornar *true*/*false* e cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida (retornaram *true*). Essa função recebe automaticamente como parâmetros os elementos da array à qual o método está sendo aplicado (e também o índice do elemento e o array inteiro, opcionalmente - mesmo esquema dos parâmetros de `forEach`).
Por exemplo, dada uma lista de objetos que contém nomes e idades de alunos, filtrar os alunos maiores e menores de 30 anos:
```js
// Criação da lista de objetos
function newStudent(name, age) {
return { name, age };
}
let students = [
newStudent("Mario", 23),
newStudent("José", 45),
newStudent("Marcia", 29),
newStudent("João", 35),
];
// Filtrar alunos menores de 30 anos
let studentsUnder30 = students.filter((student) => {
return student.age < 30;
});
// Filtrar alunos maiores de 30 anos
let studentsOver30 = students.filter((student) => {
return student.age > 30;
});
console.log("Students under 30: ", studentsUnder30);
console.log("Students over 30: ", studentsOver30);
```
- #### Higher-Order Functions: **Map**
O método `map()` retorna um array porém é mais generalista que `filter()`. Pode-se criar uma nova array utilizando os dados da array original. Por exemplo, criar uma array com frases descrevendo a idade de cada aluno (mesma lista do exemplo anterior):
```js
let studentsDescription = students.map((student) => {
return `${student.name} is ${student.age} years old`;
});
console.log(studentsDescription);
// ['Mario is 23 years old', 'José is 45 years old', 'Marcia is 29 years old', 'João is 35 years old']
```
Tomar cuidado para não modificar a array original. O parâmetro passado para a função callback é uma referência ao array original, não uma cópia/valor.
- #### Higher-Order Functions: **Reduce**
O método `reduce()` executa uma função *reducer* agregadora (definida pelo usuário) para cada membro do array, resultando num único valor de retorno. Pode ser usado para fazer uma soma, encontrar o maior ou menor valor numa lista, etc. O *reducer* sempre percorrerá toda a lista e retornará apenas um resultado.
O primeiro argumento passado para o método deve ser a função *reducer*, que possui dois parâmetros: um acumulador e o item da iteração, o valor retornado a cada iteração é atribuído ao acumulador. O segundo argumento deve ser o valor inicial do acumulador.
```js
let order = [
{ item: "Hamburger", price: 20 },
{ item: "Fries", price: 12 },
{ item: "Coke", price: 9 },
{ item: "Chocolate Cake", price: 16 },
];
let orderTotal = order.reduce((total, item) => {
return total + item.price;
}, 0);
console.log("orderTotal =", orderTotal); // orderTotal = 57
```
Também é possível utilizar `reduce()` para criar strings:
```js
let orderItems = order.reduce((items, item) => {
return items + " " + item.item;
}, "Order Items:");
console.log(orderItems); // Order Items: Hamburger Fries Coke Chocolate Cake
```
- #### **Valor vs Referência**
Em JS, quando um objeto (ou array) é atribuído a outra variável, há apenas uma passagem de referência (como se fosse um ponteiro), não é criada uma cópia e atribuída a outra variável. Assim, se alguma propriedade for modificada, haverá alteração no original. Por exemplo:
```js
let objA = { name: "John", age: 5 };
let objB = objA;
objB.age = 10;
console.log(objA.age); // 10
console.log(objB.age); // 10
let arrA = [1, 2, 3];
let arrB = arrA;
arrB[0] = 100;
console.log(arrA[0]); // 100
console.log(arrB[0]); // 100
```
Isso não ocorre com tipos primitivos (strings, numbers, booleans), em que há passagem por valor:
```js
let a = 5;
let b = a;
b = 10;
console.log(a); // 5
console.log(b); // 10
```
Contudo, se um novo objeto/array for atribuído a nova variável (B) não há alteração no original:
```js
let obj_A = { name: "John", age: 5 };
let obj_B = obj_A;
obj_B = { name: "Mary", age: 10 };
console.log(obj_A.age); // 5
console.log(obj_B.age); // 10
let arr_A = [1, 2, 3];
let arr_B = arr_A;
arr_B = [100, 200, 300];
console.log(arr_A); // [1, 2, 3]
console.log(arr_B); // [100, 200, 300]
```
Para contornar a passagem por referência e criar uma cópia:
-> Método `slice()`: geralmente usado para separar uma parte de um array, quando não é passado nenhum valor, cria uma cópia do array inteiro.
```js
let arrA_2 = [1, 2, 3];
let arrB_2 = arrA_2.slice();
arrB_2[0] = 100;
console.log(arrA_2); // [1, 2, 3]
console.log(arrB_2); // [100, 2, 3]
```
-> `[...]`: spread operator. Copia todos os valores de um array para um novo array, pode-se adicionar novas informações ou não (quando não, apenas uma cópia é criada).
```js
let arrA_3 = [1, 2, 3];
let arrB_3 = [...arrA_3, 4, 5, 6];
arrB_3[0] = 100;
console.log(arrA_3); // [1, 2, 3]
console.log(arrB_3); // [100, 2, 3, 4, 5, 6]
```
-> `Objet.assign(, )`: adiciona as propriedades do objeto 2 ao objeto 1 e retorna o um objeto combinado. Se o objeto 1 for vario, retorna apenas uma cópia do objeto 2.
```js
let objA_2 = { name: "John", age: 5 };
let objB_2 = Object.assign({ hair: "black" }, objA_2);
objB_2.age = 10;
console.log(objA_2); // {name: 'John', age: 5}
console.log(objB_2); // {hair: 'black', name: 'John', age: 10}
```
-> `{...}`: spread operator. Mesmo uso mostrado acima para arrays.
```js
let objA_3 = { name: "John", age: 5 };
let objB_3 = { ...objA_3, hair: "black" };
objB_3.age = 10;
console.log(objA_3); // {name: 'John', age: 5}
console.log(objB_3); // {name: 'John', age: 10, hair: 'black'}
```
- #### **Spread Operator `...`**
Permite unir objetos ou arrays. Atenção com os nomes das keys (devem ser únicos), se houver repetição, prevalecerá apenas o último.
```js
let person = {
name: "John",
age: 25,
};
let contact = {
phoneNumber: "123456789",
email: "[email protected]",
};
let personContact = { ...person, ...contact };
console.log(personContact);
// {name: 'John', age: 25, phoneNumber: '123456789', email: '[email protected]'}
```
- #### **Desestruturando um objeto**
Utilizado para extrair propriedades de um objeto salvando-as em variáveis com o mesmo nome das keys. A variável que receberá o valor deve ter o mesmo nome da key, caso contrário seu valor será indefinido. É possível utilizar o spread operator em uma desestruturação.
```js
let personInfo = {
name: "John",
age: 25,
phoneNumber: "123456789",
email: "[email protected]",
};
let { name, email, number, ...otherInfo } = personInfo;
console.log(name); // John
console.log(email); // [email protected]
console.log(number); // undefined
console.log(otherInfo); // {age: 25, phoneNumber: '123456789'}
```
Para arrays o funcionamento é semelhante, porém as variáveis podem ter qualquer nome. O importante é seu posicionamento.
```js
let array = [1, 2, 3];
let [pos0, pos1, pos2] = array;
console.log(pos0); // 1
```
- #### **Fetch**
Com `fetch()` é possível fazer requisições passando endpoints. O retorno é uma *Promise*. Por exemplo, para obter a conversão de EUR para BRL:
Usando `.then()` para receber resposta:
```js
let currencyCode = "EUR";
let APIurl = `https://v6.exchangerate-api.com/v6/4d40d8e180e79b77a58e09fc/pair/${currencyCode}/BRL`;
fetch(APIurl)
.then((response) => {
return response.json();
})
.then((responseJSON) => {
let conversion_rate = responseJSON.conversion_rate;
console.log(conversion_rate);
});
```
Usando `async await`:
```js
let currencyCode = "EUR";
async function getExchangeRate(currencyCode) {
let APIurl = `https://v6.exchangerate-api.com/v6/4d40d8e180e79b77a58e09fc/pair/${currencyCode}/BRL`;
let response = await fetch(APIurl);
let responseJSON = await response.json();
let conversion_rate = responseJSON.conversion_rate;
console.log(conversion_rate);
}
getExchangeRate(currencyCode);
```
- #### **try catch finally**
Utilizado para tratamento de erros. Quando um erro ocorre, a execução do script é interrompida. Para evitar que isso aconteça, utiliza-se `try {} catch {} finally {}` para capturar os erros e poder continuar a execução.
Para levantar um erro, utilizar `throw new Error()`.
```js
let userName = "";
try {
if (userName === "") {
throw new Error("O nome não pode ser vazio");
}
console.log(userName);
} catch (error) {
console.log(error.message);
} finally {
console.log("Boa noite");
}
// O nome não pode ser vazio
// Boa noite
```
---
## Free Design Resources
- [Pinterest](https://www.pinterest.com)
- [Behance](https://www.behance.net)
- [freepik](https://www.freepik.com)
- [streamline icons](https://egostreamlineicons.com/)
- [steamline hq](https://streamlinehq.com/)
- [envato](https://envato.com/)
- [unsplash](https://unsplash.com/)
- [flaticon](https://www.flaticon.com/)
- [pexels](https://www.pexels.com/)
- [Material Design Icons](https://fonts.google.com/icons?selected=Material+Icons)
- [PNG Egg](https://www.pngegg.com/)
## Markdown
- [Cheatsheet](https://www.markdownguide.org/cheat-sheet/)
- [Basic Syntax](https://www.markdownguide.org/basic-syntax/)
- [Extended Syntax](https://www.markdownguide.org/extended-syntax/)
