CursoemVideo-JavaScript

Exercícios e arquivos de aulas feito durante o curso de JavaScript do Curso em Vídeo

Acesse o site para executar os exercícios

---

Anotações

Converter números

• Number.parseInt(n) - inteiro
• Number.parseFloat(n) - decimal
• Number(n) - inteiro ou decimal

---

Converter números para string

• n.toString()
• String(n)

---

Interpolação / Template strings

• O aluno ${nome} tirou a nota ${nota}

${ } = placeholder

---

Formatar strings

• s.length - retorna quantos caracteres tem a string
• s.toUpperCase() - TUDO PARA MAIÚSCULO
• s.tolowerCase() - tudo para minúsculo

s.toLowerCase() e o s.toUpperCase() funcionam com acentos

---

Formatar números

Decimal:

var n1 = 1545.5

n1.toFixed(2)  // 1545.50

Contábil:

var n1 = 1545.5

n1.toFixed(2).replace('.', ',')  // 1545,00

n1.toLocaleString('pt-br', {style: 'currency', 'currency': 'BRL'})  // R$ 1.545,50

---

Operadores

Aritméticos

5 + 2   // 7   - Soma
5 - 2   // 3   - Subtração
5 * 2   // 10  - Multiplicação
5 / 2   // 2.5 - Divisão
5 % 2   // 1   - Resto da divisão inteira
5 ** 2  // 25  - Potência

Ordem de precendência:

1. ( )
2. **
3. * /
4. + -

Atribuição

Atribução simples

var a = 5 + 3          // 8
var b = a % 5          // 3
var c = 5 * b ** 2     // 45
var d = 10 - a / 2     // 6
var e = 6 * 2 / d      // 2
var f = b % e + 4 / e  // 3 

Auto-atribuições

var n = 3
n = n + 4   // 7
n = n - 5   // 2
n = n * 4   // 8
n = n / 2   // 4
n = n ** 2  // 16
n = n % 5   // 1

/* 
Simplificar: 
    n += 4 
    n -= 5
    n *= 4
    n /= 2
    n **= 2
    n %= 5
*/

Incremento

var x = 5
x++  // 6
x--  // 5

Relacionais

Operador	Nome	Função
>	Maior	Verifica se um valor é maior que outro
<	Menor	Verifica se um valor é menor que outro
>=	Maior ou igual	Verifica se um valor é maior ou igual ao outro
<=	Menor ou igual	Verifica se um valor é menor ou igual ao outro
==	Igual	Verifica se um valor é igual ao outro
!=	Diferente	Verifica se um valor não é igual ao outro
===	Idêntico	Verifica se um valor é idêntico ao outro
!==	Desigual restrito	Verifica se um valor não é idêntico ao outro

Exemplos:

5 > 2      // true
7 < 4      // false
8 >= 8     // true
9 <= 7     // false
5 == 5     // true
4 != 4     // false
5 === 5    // true
5 === '5'  // false
5 !== '5'  // false

/* idêntico: mesmo valor e mesmo tipo */

Lógicos

Operador	Nome	Função
!	Negação (not / não)	Retorna Falso se o resultado for verdadeiro
&&	Conjunção (and / e)	Retorna True se ambas as afirmações forem verdadeiras
||	Disjunção (or / ou)	Retorna True se uma das afirmações for verdadeira

! true   // false
! false  // true

true && true    // true
true && false   // false
false && true   // false
false && false  // false

true || true    // true
true || false   // true
false || true   // true
false || false  // false

Exemplo:

var a = 5
var b = 8

a > b && b % 2 == 0   // false && true -> false
a <= b || b / 2 == 2  // true || false -> true

Ordem de precedência

Ternário

teste ? true : false

Exemplo:

var media = 5.5

media >= 7.0 ? 'Aprovado' : 'Reprovado'  // 'Reprovado'
media += 3                               //  8.5
media >= 7.0 ? 'Aprovado' : 'Reprovado'  // 'Aprovado'

/* ----------------------------------------------- */

var x = 8

var result = x % 2 == 0 ? 5 : 9  // result = 5

---

Analisar um valor

var n = 10
var s = 'JavaScript'
var b = true

typeof n               // 'number'
typeof n == 'number    // true

typeof s               // 'string'
typeof s == 'boolean'  // false

typeof b               // 'boolean'
typeof b == 'boolean'  // true

DOM

Pegar elementos na tela

Comando	Resultado
document.getElementById('result')	Pegar elemento pelo id
document.getELementsByClassName('code')	Pegar elementos pela classe
document.getELementsByTagName('div')	Pegar elementos pela tag HTML
document.getELementsByName('email')	Pegar elementos pelo nome
document.querySelector('div#result')	Pegar elementos pela classe ou id

Eventos

• Lista de eventos

Criar elementos dinamicamentes

// Criando uma tag img
var img = document.createElement('img')

// Colocando atributos
img.setAttribute('id', 'img')
img.setAttribute('src', `images/image.png`)

// Adicionando o elemento em algum lugar do site
document.querySelector('div#result').appendChild(img)

Condições

if (condição) {
    // True
} else {
    // False
}

Tipos de condição

1. Condição simples:

if (condição) {
    // True
}

2. Condição composta:

if (condição) {
    // True
} else {
    // False
}

3. Condições aninhadas:

if (condição) {
    // True

} else {
    // False

    if (condição) {
        // True
    } else {
        //True
    }
}

4. Condição múltipla:

Repetições

While

While - estrutura de repetição com teste lógico no início

while (condição) {
    // Bloco
}

Exemplo:

function comerPizza() {
    while (temFatia()) {
        comerFatia()
    }
}

Do While

Do While - estrutura de repetição com teste lógico no final

do {
    // bloco
} while (condição)

Exemplo:

function comerPizza() {
    do {
        comerFatia()
    } while (temFatia())
}

Qual a diferença entre While e o Do While?

Como o Do While só realiza o teste lógico do final, ele permite executar o bloco no mínimo uma vez, mesmo o teste lógico dando falso.

For

For - extrutura de repetição com variável de controle

for (var c=1; c <= 5; c++) {
    // Bloco
}

Array

Array (vetor ou uma variável composta) é uma variável que tem vários elementos. Cada elemento é composto por seu valor e por chave de identificação.

let num = [5, 8, 4]

Adicionar valores no array

Adiciona na última posição

num.push(7)  // [5, 8, 4, 7]

// Retorna o tamanho do array após a adição: 4

Adicionar na primeira posição

num.unshift(1) // [1, 5, 8, 4, 7]

// Retorna o tamanho do array após a adição: 5

Adicionar em uma posição expecífica

num[1] = 0  // [1, 0, 8, 4, 7]

// Retorna o valor modificado: 0

Ordenar array ordem crescente

num.sort()  // [0, 1, 4, 7, 8]

Ver tamanho do array

num.length 

// Retorna o tamanho do array: 5

Encontrar um valor no array

num.indexOf(7)

// Retorna o index do valor 7: 3

Formas de percorrer um vetor

let valores = [1, 2, 3, 4, 5]

For

for (let i=0; i < valores.length; i++) {
    // i -> index
    // valores[i] -> element
}

For In

for (let i in valores) {
    // i -> index
    // valores[i] -> element
}

ForEach

valores.forEach((element, index, array) => {
    /* ...  */
})

Para mais informações consulte os sites:

• Array - JavaScript | MDN
• Array.prototype.forEach() - JavaScript | MDN

Funções

• São ações executadas assim que são chamadas ou em decorrência de algum evento.

• Uma função pode receber parâmetros e retornar um resultado

Exemplos:

function parImp(n) {
    if (n % 2 == 0) {
        return true
    } else {
        return false
    }
}

let res = parimp(11)  // false

Objetos

let amigo = {'nome': 'Gustavo', 'idade': 19, 'sexo': 'M', engordar(p) {}}

---

Gustavo Guanabara - Curso de JavaScript