Criando um objeto literal

,p>
Da mesma forma que se usa [] para criar um ARRAY, se usar { } para criar um Objeto Literal.
name -> é o nome da propriedade ou pode se chamar chave
'Jhonn' -> è o valor da propriedade ou seja objeto literal recebe um propriedade que contem nome e valo.

let user = {
    name: 'Jhonn',
    age: 31,
    email: '[email protected]',
    city: 'San José',
    blogPosts: ['Empadão de frango', '4 receitas de purê de batata']
}
//acessar o valor de uma propriedade
console.log(user.blogPosts)

//modificar o valor com notação de ponto
user.age = 38
console.log(user.age)

//acessar propriedade com notação de colchete, passe o nome da propriedade como string
//precisa ser uma string ou uma variável que armazena uma string
console.log(user['name'])

//Usando variável para com anotação de colchete
const key = 'email'
console.log(user[key])

console.log(typeof user)

@edneto

MDN

• Use o site na versão em Inglês
• Não use a busca do site
• Forma de pesquisa a dúvida no MDN:
• No google digite sem aspas por exemplo: 'slice mdn'
• geralmente o resultado do Google já mostra o MDN com a pesquisa certa.

@edneto

Argumentos, parâmetros e default parâmetros

• "name" representa uma variável local que só pode ser usada no bloco da função para passa valor
• Primeiro exemplo:

const myFunc = function (name) {
    console.log(`Oi, ${name}!`)
}

myFunc()  // resposta: Oi, undefined!

• Como no primeiro exemplo não foi atribuído um valor para "name" por padrão o JavaScript coloca "undefined" e converte para string.

parâmetros

• Valores passados entre os parênteses da declaração de uma função são chamados de parâmetros. Pode se ter multiplos parâmetros na declaração de uma função.
• A ordem dos parâmetros não importa dentro do bloco da função

const myFunc = function (name, lastName) {
    console.log(`Oi, ${name} ${lastName}!`)
 }

Argumentos:

• Valores passados entre os parênteses da invocação é chamado de "argumentos". A ordem dos argumentos tem que seguir a ordem dos parâmetros.

myFunc('Luiz', 'Lima')

default nos parâmetros

• Podemos declara valores default nos parâmetros para o caso de que não tenha argumentos sendo passados

`const myFunc = function (name = 'Joaquim', lastName = 'Santos') {
    console.log(`Oi, ${name} ${lastName}!`)
}



myFunc() // Oi, Joaquim Santos!
myFunc('Edson')// Oi, Edson Santos!

@edneto

Switch statements

• raramente usamos Switch no dia a dia

• Definição de Switch: verifica múltiplos valores possíveis de uma variável ou constante

• break: quebra a continuação do código, para após encontrado o resultado o Switch de ser execução.

const grade = 'B'

switch (grade) {
    case 'A':
        console.log('Você tirou um A')
        break
    case 'B':
        console.log('Você tirou um B')
        break

    case 'C':
        console.log('Você tirou um C')
        break

    case 'D':
        console.log('Você tirou um D')
        break

    case 'E':
        console.log('Você tirou um E')
        break

    default:
        console.log('nota inválida')
}

@edneto

If

• Significa SE ou seja se a condição X for TRUE então vai ser feito uma ação.

const age = 19
if( age > 18){
 console.log('Você tem mais de 18 anos.')
}
// Essa expressão será exibida pois 'age' é maior que 18 ou seja TRUE. 


const simpsons = ['Marge', 'Homer', 'Lisa', 'Bart']

if(simpsons.length >= 5){
console.log('o array tem bastante personagens')
}
//Essa expressão não será exibida pois é FALSE que seu tamanho é maior que 5.

• podemos usar o IF para fazer varias verificações como a de senha

const password = 'oi123'

if (password.length >= 8) {
    console.log('essa senha tem 8 ou mais caracteres')
}

//esse é um exemplo de uso do IF.

@edneto

Eventos de clique

• target, armazena a referencia do objeto aonde o evento ocorreu

// Podemos fazer assim para pegar a referencia do objeto 
lis.forEach(li => {
    li.addEventListener('click', event => {
        console.log(event.target)
    })
})

// Podemos fazer assim para pegar a referencia do objeto 
lis.forEach(li => {
    li.addEventListener('click', event => {
        console.log(li)
    })
})

Referencias citadas em aula:

• https://developer.mozilla.org/en-US/docs/Web/Events
  @edneto

Outras queries

• Existem 3 outras maneira de fazer queries no DOM e obter as referencias dos elementos

Obter um elemento através do ID

const title = document.getElementById('title')
console.log(title)

Obter um elemento através do nome da classe

const errors = document.getElementsByClassName('error')
console.log(errors)

//consultando por anotação de colchete o conteúdo do HTMLCollection
console.log(errors[0])

//Da erro pois não existe esse método no HTMLCollection
errors.forEach(error => {
    console.log(error)
});

O que é um HTMLCollection:

HTMLCollection representa uma lista genérica de elementos Assim como NodeList o HTMLCollection é similar mas não igual, Podemos usar anotação de colchete mas não se pode usar o forEach. A quantidade de métodos e propriedades é muito menor.

Obter um elemento através do nome da tag

const paragraphs = document.getElementsByTagName('p')
console.log(paragraphs)

Referencias da aula

• HTMLCollection

@edneto

DOM - Document Object Model

O que o DOM?

• Criado pelo browser
• Não faz parte da linguagem JavaScript em si

Quando o HTML é carregado no browser o mesmo cria o Document Object Model para que seja possível interagir com esse documento HTML através do código JavaScript e através do DOM conseguimos adicionar ou remover conteúdo de uma página.

Então uma vez que esse documento HTML é carregado no browser o browser criar um um objeto que modela esse documento e esse objeto se chama document e esse objeto contem várias propriedades e métodos que dizem respeito ao documento HTML e que podem ser usados para se interagir com esse documento que foi carregado no Browser

Então todas as vezes que fazemos alguma modificação na pagina, tipo: adicionar, alterar ou remover algum conteúdo, nós fazemos isso através do objeto document.

Exemplo :

• no console digite 'document' e veja o que acontece

• no console digite 'document.location' e veja o que acontece.

            html
            /    \
        head     body
        /        /   \
    title       h1    \
    |            |     \ 
  

  (text node) (text node) div
  |
  | \
  | div
  /
  h1 p
  (text node) (text node)

@edneto

Arrays

• Para que arrays são úteis? Para organizar uma lista de dados que estão relacionadas entre si e podemos adicionar diferentes tipos de dados em um array podendo ser todos do mesmo tipo ou variar os tipos, mas na grande parte das vezes se armazena somente um tipo de dados.

let heroes = ['Batman', 'Catwoman', 'Iron Man']
const ages = [31,25,39,40,25]
const randomArray = ['Parker', 'Diana', 19, 18]

console.log(heroes[0])

• Podemos acessar o primeiro elemento do array usando os colchetes [ ] com o número do index do elementor, e como o JavaScript é zero base ou seja usa base começa no zero o primeiro elementos de um array tem o seu index começado em zero.

• Conseguimos fazer uma operação matemática dento dos colchetes como no exemplo a baixo que resulta na resposta 'Catwoman'
  ´´´
  console.log(heroes[3 - 2])
  //resulta na saida 'Catwoman', referente ao index 1
  ´´´

• Como podemos atribuir ou sobrescrever um novo valor no array?

heroes[2] = 'Spider-Man'
//assim que se atribui um novo valor

Métodos de arrays

• O que o metodo join() faz?

const joinHeroes = heroes.join( )
//retorna uma nova string com todos os intens do array concatenados e separados por vírgula.


joinHeroes = heroes.join("|")
//pode receber um argumento opcional, esse argumento é um separador por exeplo um pipe *'|'* ou *'-'*

// a saida vai ser algo como: *Batman|Catwoman|Iron Man*

• O método *indexOf( ):

const indexOf25 = ages.indexOf(25)
//o metodo indexOf é usado extamente igual usamos nos metodos de string.
//caso o valor passado no indexOf de um array não existir recebemos o valor *-1* indicando isso.

• Usando o método concat e para que serve?

const moreHeroes = heroes.concat(['Superman','Wolverine'])
//saida:['Batman', 'Catwoman', 'Iron Man', 'Superman','Wolverine']
//o metodo *concat* concatena arrays como no exeplo acima, formando um único array e não modifica o array original.

• Método push( ): O método push adiciona ou empura valores para o fim do array.

const pushToHeros = heroes.push('Cyclops', Hulk)
//saida:console.log(pushToHeroes) -> 5 | console.log(heroes) -> ['Batman', 'Catwoman', 'Iron Man', 'Cyclops','Hulk']
//O método push além de adicionar itens ao array, retona o novo número de itens do array.
//O *push()* é um método que altera o array. *Chamamos isso de mutação de valores*

• Método pop( ):

const popHeroes = heroes.pop
//esse método remove o último item do array e retorna esse item.
//saida: console.log(popHeroes) -> Hulk | console.log(heroes) -> ['Batman', 'Catwoman', 'Iron Man', 'Cyclops']

@edneto

Declarações e expressões

• Function declaration:
  • Hoisting - function declaration podem usar hoisting

function sayHi() {
    console.log('oi')
}

• Function expression:
  • atribui a função a uma variável;
  • Hoisting - function expression não usam hoisting ou seja sempre faça o chamado da função após a função.

const showFood = function () {
    console.log('pizza')
}

sayHi() //invocar, chamar, executar: o código
showFood()

@edneto

O objeto Math

• Esse objeto é um dos vários objetos que existem no JavaScript. Esse objeto tem muitas propriedades e métodos criados dentro dele.

console.log(Math)
console.log(Math.PI)
console.log(Math.E)

const area = 7.9

// se 0.5 a redonda para cima ou 0.4 para baixo
console.log(Math.round(area))

// a redonda para baixo
console.log(Math.floor(area))

// a redonda para cima
console.log(Math.ceil(area))

// retira o decimal
console.log(Math.trunc(area))

• Exemplo de uso do Math

//gera valor aleatório
const randomNumber = Math.random() 

console.log(randomNumber)

console.log(Math.round(randomNumber * 25))

@edneto

Evento bubbling e event delegation - Aula 5

Evento bubbling

• Quando um evento um clique acontece por exemplo, esse clique se torna o target do evento por exemplo quando clicamos no LI ele se torna o target do evento.

• Então quando isso acontece o JavaScript vai procurar se existe um Listener de eventos, se houver ele vai dispara a função de evento que deve acontecer quando o evento é disparado. Mas não é só isso o evento é propagado até o topo do DOM.

• Por exemplo, se clicar na LI abaixo e acontecer um evento esse evento será propagado até o evento pai no caso UL e se ele tiver algum evento atrelado esse evento também será disparado.

• Essa propagação é chamada de evento bubbling.

<ul>
        <li>Comprar frango</li>
        <li>Ler livros</li>
        <li>Tocar violão</li>
        <li>Pagar as contas</li>
</ul>

Testando o event bubbling

• Se rodar o código e clicar na LI, ele vai mostrar no console duas mensagens.

const ul = document.querySelector('ul')
const button = document.querySelector('button')

button.addEventListener('click', () => {
    const li = document.createElement('li')

    li.textContent = 'Novo item'
    ul.prepend(li)

})

const lis = document.querySelectorAll('li')

lis.forEach(li => {
    li.addEventListener('click', event => {
        const clickedElement = event.target
        console.log('clicou na li')
        clickedElement.remove()
    })
})

ul.addEventListener('click', () => {
    console.log('clicou na ul')
})

• Caso queira parar a propagação do event bubbling use o método [event.stopPropagation()]
• Vejo o exemplo do trecho de código abaixo:

lis.forEach(li => {
    li.addEventListener('click', event => {
        const clickedElement = event.target
        console.log('clicou na li')

        event.stopPropagation()
        clickedElement.remove()
    })
})

Testando o event delegation

• Pode ser muito util quando atrelamos um evento a muitos elementos
• Como nesse exemplo[ERRADO] abaixo:

const ul = document.querySelector('ul')
const button = document.querySelector('button')

button.addEventListener('click', () => {
    const li = document.createElement('li')
    li.textContent = 'Novo item'
    ul.prepend(li)

})

const lis = document.querySelectorAll('li')

lis.forEach(li => {
    li.addEventListener('click', event => {
        const clickedElement = event.target        
        clickedElement.remove()
    })
})

• Mas no caso acima não é uma boa prática pois estamos fazendo muitas interações para chamar e criar uma nova LI e adicionar a UL, isso em aplicações maiores fica ruim.

• Então a maneira correta seria usar o event delegation, como no exemplo a baixo

ul.addEventListener('click', event => {
    const clickedElement = event.target
    if (clickedElement.tagName === "LI") {
        clickedElement.remove()
    }
})

@edneto

QuerySelector

• Quando adicionamos, removemos ou alteramos algum conteúdo na página.
• Precisamos fazer alguns passos para isso.
• O querySelector e o querySelectorAll são os métodos mais eficientes, para selecionar elementos do DOM, mais existem outras formas.

Passos

• 1º Decidir qual o elemento da página queremos manipular
• 2º Buscar a referência desse elemento no DOM
• 3º Manipular o elemento buscado por referência

Primeiro passo.

• Pegamos a referencia através do seletor, pegamos a primeira tag P

const paragraph = document.querySelector("p")
console.log(paragraph)

• Vamos pegar agora pela classe

const paragraph = document.querySelector(".error")
console.log(paragraph)

• Especificar qual DIV eu quero sabendo que existem varias no mesmo documento, mas apenas uma com uma classe error

const errorDiv = document.querySelector("div.error")
console.log(errorDiv)

• Obtendo a referencia pelo navegador, use o botão do mouse para inspecionar o elemento.
• Em seguida no elemento que vai ser mostrado com o botão direito e escolha, copy e em copy escolha "copy selector"
• Depois cole a referencia como no exemplo

const h1 = document.querySelector("body > h1")
console.log(h1)

Obtendo NodeList

• Um NodeList é uma lista de NOS similar a um array, mas ele não é um array ou seja nem todos os métodos de array podem ser usados

const paragraphs = document.querySelectorAll('p')
console.log(paragraphs)

//Podemos usar notação de colchete
console.log(paragraphs[0])

//Podemos usar um forEach
paragraphs.forEach(paragraph => {
    console.log(paragraph)
})

//Se quiser verificar todas as classes error, foi gerado um NodeList
const errors = document.querySelectorAll(".error")
console.log(errors)

Referencias da aula

• Seletores css
• NodeList

@edneto

Criando e removendo elementos do DOM

forma de remover um objeto do DOM

• usando método ul.remove()

const ul = document.querySelector('ul')
ul.remove()

• Usando o método remove no li

const lis = document.querySelectorAll('li')
//sem o método remove
lis.forEach(li => {
    li.addEventListener('click', event => {
        const clickedElement = event.target

        clickedElement.style.textDecoration = 'line-through'
    })
})

//usando método remove
const lis = document.querySelectorAll('li')

lis.forEach(li => {
    li.addEventListener('click', event => {
        const clickedElement = event.target

        clickedElement.remove()
    })
})

Formas de criar ou atribuir um elemento HTML

• Esse foi uma forma de criar um template, usando o innerHTML

button.addEventListener('click', () => {
    ul.innerHTML += "<li>Novo item</li>"
})

• Criando um elemento usando o createElement

const li = document.createElement('li')

ul.append(li) //método append(), último filho

ul.prepend(li)//método prepend(), primeiro filho

• O método append insere como o último filho o elemento que ele recebe como argumento, no elemento que ele foi encadeado, nesse caso [ul].

• O método prepend insere como primeiro filho o elemento que ele recebe como argumento, no elemento que ele foi encadeado, nesse caso [ul].

Referencias citadas em aula:

• https://developer.mozilla.org/en-US/docs/Web/Events

@edneto

While Loop

• Executa um código por um determinado número de vezes.
• Cuidado com loop infinito, lembre-se do incremento
• Estrutura básica do while loop

let i = 0 // variável inicial
while(i < 5 ){

console.log(`Dentro do loop: ${i}`)
i++ //incremento

}

// incrementa-se o loop dentro do bloco ao final do conteúdo.
// a váriavel de inicio é declarada fora do while loop.
// somente a condição fica entre parentes

• Outro exemplo com arrays

const names = ['Jobs','Hopper','Turing']
let i = 0;

while(i < names.length){
	console.log(names[i])
	i++
}

@edneto

break e continue

continue:

• pula um loop em particular e faz o loop continuar - Detalhes: ignora os intens a baixo até o próximo loop ser executado

break:

• Para a execução do loop.
• A interação seguinte não vai acontecer, a execução do array foi parada.

const scores = [50, 25, 0, 30, 100, 20, 10]

for (let i = 0; i < scores.length; i++) {
    if (scores[i] === 0) {
        continue
        
        //Note que no exemplo acima ao executar o '0' não aparece na execução ele foi ignorado
         
    }


    console.log(scores[i])

    if (scores[i] === 100) {
        console.log(`parabéns, você atingiu a pontuação máxima`)
        break
        
    }

}

@edneto

Siga o passo a passo, não pule etapas.

Independente se você for:

• coelho(gosta de pular etapa, não fica parado quer inovar e modificar), não pule etapas e evite fazer modificações se no passo a passo ou a aula não sugerir. Na jornada da fluência rápido é ir devagar.
• tartaruga(vai devagar quase parando ou para), não pare siga em frente um passo de cada vez.

Seja tartaruga ou coelho o problema não é quem chega primeiro, mas sim aprender.

Empresas que não valorizam as pessoas não valem apena. Não tenha medo de ser julgado, não tenha medo de aplicar as vagas, você não precisa saber de tudo.
Aplique no mínimo para 10 vagas e implemente os feedbacks dos recrutadores, se a empresa não da feedback essa é uma empresa que não vale a pena.

• Fluência vale mais que apenas construir aplicativos com JavaScript puro, pois você aprende o processo.

Null e Undefined

• Os dois são similares e representam a falta de um valor e a principal diferença é que o Null diferentemente do Undefined deve ser intencionalmente atribuido.

Exemplos

let emptiness

console.log(emptiness, emptiness + 3, `o valor é ${emptiness}`)

//Saida: undefined NaN "o valor é undefined"

• Pelo exemplo a variavel emptiness é undefined pois não lhe foi atribuido ainda nem um valor. Então toda vez que criamos uma variavel e tentamos usar ela o JavaScript atribui undefined a essa variavel isso é feito automaticamente.

• Como a emptiness é undefined ao tentarmos usar ela em uma expressão númerica obtivemos NaN "Not A Number"

• Quando inserimos undefined em uma variavel dentro de uma string vemos que undefined é convertido em string

Quando usar o Null

• Quando queremos inidcar que não existe valor em uma varivel usamos o Null

let emptiness = null

console.log(emptiness, emptiness + 3, `o valor é ${emptiness}`)

//Saida: null 3 "o valor é null"

• Pelo exemplo a variavel emptiness é null pois lhe foi atribuído o null para indicar que não existe valor.

• Como a emptiness é null ao tentarmos executar uma operação matemática o null é interpretado como 0 então o resultado é 3, pois 0 + 3 = 3

• Quando inserimos null em uma variável dentro de uma Sting vemos que null é convertido em string

@edneto

A palavra chave this

• [this] é um objeto de contexto, ele representa o contexto ao qual o código atual esta sendo executado.
• Dependo de como ou onde se usa o [this] o valor dele vai mudar.
• Exemplo: se usar o [this] na raiz do documento ele vai referenciar o contexto global desse documento que s chama Windows Object

console.log(this)

//exibida no console
//Window {window: Window, self: Window, document: document, name: '',location: Location, …}

Exemplo de uso do this

let user = {
    name: 'Jhonn',
    age: 31,
    email: '[email protected]',
    city: 'San José',
    blogPosts: ['Empadão de frango', '4 receitas de purê de batata'],
    login: function () {
        console.log('Usuário logado')
    },
    logout: function () {
        console.log('Usuário deslogado')
    },
    logBlogPost: function () {
        console.log(`${this.name} escreveu os seguintes posts:`)

        this.blogPosts.forEach(post => {
            console.log(post)
        })
    }
}

user.blogPosts.push('Feijão de coco')
user.blogPosts.push('Arroz frito')
user.logBlogPost()

Observe que foi usado uma *function declaration* na criação do método do *logBlogPost* e não uma arrow function, pois a arrow function somente referencia o método da raiz do documento Windows ou seja se tentar fazer usar ela para criar métodos usando this teremos erro, para evitar isso sempre se deve usar a *function declaration*

Usando shortcut da Function Declaration

• note que trocamos logout: function () {} por logout() {}

let user = {
    name: 'Jhonn',
    age: 31,
    email: '[email protected]',
    city: 'San José',
    blogPosts: ['Empadão de frango', '4 receitas de purê de batata'],
    login() {
        console.log('Usuário logado')
    },
    logout() {
        console.log('Usuário deslogado')
    },
    logBlogPost() {
        console.log(`${this.name} escreveu os seguintes posts:`)

        this.blogPosts.forEach(post => {
            console.log(post)
        })
    }
}

user.blogPosts.push('Feijão de coco')
user.blogPosts.push('Arroz frito')
user.logBlogPost()

@edneto

Fazendo um popup

Usando método some

• Usando o some podemos fazer a comparação com os dados do array com o que vem da const classNameOfClickedElement, se a comparação for positiva gera um boolean true se não existir gera um boolean false.

• Assim economizamos linhas de código eo invez de fazer muitas comparações usamos apenas o SOME e alimentamos o array com as classes que precisarmos.

• O SOME intera sobre a classe mas no momento que ele acha o primeiro true ele já para, pois o objetivo dele é apenas verificar se existe pelo menos 1 item.

const classNameOfClickedElement = event.target.classList[0]
const classNames = ['popup-close', 'popup-wrapper', 'popup-link']
const shouldClosePopup = classNames.some(className =>
        className === classNameOfClickedElement
    )

if (shouldClosePopup) {
        popup.style.display = "none"
}

@edneto

funções tradicionais

 const double = function (number) {
     return number * 2
 }

arrow function

const double = (number) => {
     return number * 2
 }

Dessa forma o valor é retornado implicitamente sem a necessidade de declarar a palavra chave 'return'.

• pode retornar um 'boolean', 'array', 'string', 'number', ou uma expressão.

O que é: uma expressão em JavaScript?

• É qualquer pedaço de código que resulta em um valor. ex. String, Array, Boolean, Número ou uma expressão como essa 'number * 2'.

O que não seria possível retornar por não ser um valor?

• Ex. bloco IF, For pois não são valores e sim bloco de código.

const double = number => number * 2;

Veja agora a diferença de uma função tradicional para uma com arrow function o quanto se pode reduzir em código somente mudando a syntax:

//funções tradicionais
const double = function (number) {
    return number * 2
}

// arrow function
const double = number => number * 2;


//chamada é a mesma
const result = double(3)
console.log(`O resultado é: ${result}`);

@edneto

Adicionando métodos

Métodos são funções que são criadas dentro dos objetos.

• Funções criadas fora de objetos são chamadas de funções e funções criadas dentro de objetos são métodos

let user = {
    name: 'Jhonn',
    age: 31,
    email: '[email protected]',
    city: 'San José',
    blogPosts: ['Empadão de frango', '4 receitas de purê de batata'],
    login: function () {
        console.log('Usuário logado')
    },
    logout: function () {
        console.log('Usuário deslogado')
    }
}
//método login() - criado dentro do objeto user
user.login()
user.logout()

@edneto

Obtendo, adicionando, removendo e alterando classes CSS

• Podemos Obter,adicionar ou remover as classes CSS, isso nos da uma versatilidade maior na customização.

const paragraph = document.querySelector("p")

//obtém a listagem das classes que um objeto tem
console.log(paragraph.classList)

//adicionando uma classe em um objeto 
paragraph.classList.add("error")

//removendo uma classe de um objeto
paragraph.classList.remove("error")

//adicionando
paragraph.classList.add("success")

Exemplo: adicionando classes

• usar innerText, mostra o teste visível que o elemento tem
• • por exemplo que dentro do texto colocarmos um spam em uma palavra e um display:none o innerText não consegue exibir.
• usar textContent, obtem todo o texto do elemento invisível ou não
  -- ou seja mesmo com display:none o texto será obtido e mostrado se for o caso

const paragraphs = document.querySelectorAll("p")

paragraphs.forEach(paragraph => {
    if (paragraph.textContent.includes("error")) {
        paragraph.classList.add("error")
    }

    if (paragraph.textContent.includes("success")) {
        paragraph.classList.add("success")
    }
})

Alternando uma classe com toggle()

//alterna uma classe em um elemento.
const title = document.querySelector('.title')

//caso não tenha, adiciona a classe
title.classList.toggle('test')

//caso tenha, é removido a classe
title.classList.toggle('test')

@edneto

Else e else If: Else = Se não e else If é Se não Se

• Usando o Else e o else If podemos ter mais possibilidades de execuções de blocos de código ou seja se o If for FALSE então o bloco do Else será executado, mas se for TRUE o bloco do If é executado e o bloco do Else será ignorado.

const password = 'oi123'

if (password.length >= 8) {
    console.log('essa senha tem 8 ou mais caracteres')
} else {
    console.log('a senha deve conter 8 ou mais caracteres')
}

• Usando else If, existem situações que vamos precisar verificar multiplas situações diferentes.

const password = 'oi123oi123393'

if (password.length >= 12) {
    console.log('senha muito forte =)')
} else if (password.length >= 8) {
    console.log('essa senha tem 8 ou mais caracteres')
} else {
    console.log('a senha deve conter 8 ou mais caracteres')
}

@edneto

Adicionando e modificando conteúdo em uma página

innerHTML

• Adquirindo a referência do paragrafo
• Setando um novo valor

const paragraph = document.querySelector('p')
//Adquirindo conteúdo do paragrafo
console.log(paragraph.innerText)

//alterar o conteúdo 
paragraph.innerHTML = "Texto inserido"

//adiciona o novo conteúdo junto ao que já tem
paragraph.innerHTML += " Texto inserido"

• Usamos o [innerHTML] para exibir o conteúdo da tap [p]
• Usamos também para alterar o conteúdo dessa mesma tag [p]

Pegando múltiplas referências

• Usando o [querySelectorAll] criamos um [NodeList] com todos as tags [p]

• Usamos um [forEach] para iterar sobre o [NodeList]

const paragraphs = document.querySelectorAll('p')
//console.log(paragraphs)

//Exemplo apenas exibindo conteúdo
paragraphs.forEach(paragraph => {
    console.log(paragraph)
})

//Exemplo alterando conteúdo
// resultado: novo testo concatenado
paragraphs.forEach((paragraph, index) => {
    paragraph.innerHTML += ` Novo texto ${index + 1}`
})

Adicionando tag HTML direto do JS

• Podemos adicionar uma nova tag HTML dentro de outras tags como no exemplo.
• Se não houver uma tag no momento da inserção ele será criado e caso exista outro ele será substituído pelo que foi inserido

// pegou a classe da div
const div = document.querySelector('.content')
// console.log(div.innerHTML)

//Inseriu na div uma nova tag H2
div.innerHTML = '<h2>Novo h2</h2>'

// Mas se user o 'additional assignment (+=)'
div.innerHTML += '<h2>Novo h2</h2>'

• Ao usar o [additional assignment (+=)] o valor que existe é mantido e o novo é adicionado

• Iterando por um array ou por dados que veio de um banco e inserindo o conteúdo na DIV e gerando tag P

const people = ['Jonatan', 'Vinícius', 'Diego']

people.forEach(person => {
    div.innerHTML += ` <p>${person}</p>`
})

• No teque foi gerando novas tags P com cada nome do array

innerHTML innerText

• Tanto a innertHTML como a innerText são getters e setters
• get - tradução obter e é basicamente isso que o innerHTMl e innerText fazem ao pegar as referências
• set - tradução estabelecer, por exemplo, quando atribuímos um valor a DIV HTML essa innerHTML vai estabelecer o HTML que a DIV tem dentro dela.

Referencias da aula

• innerText
• textContent
• innerHTML

@edneto

Inteiros e decimais

• const radius = 10
• const pi = 3.14

O que podemos fazer com números em Javascript?

• Basicamente tudo que uma operação aritmética permite, adição, subtração, multiplicação e divisão

Operadores aritméticos

• const reminder = 5 % 2-> o modulo % mostra como resultado o resto da divisão de 5 por 2 ao invés de mostra o resultado.

• const area = pi * radius **2 -> também temos a precedência para execução das operações, são elas

• 1º parênteses
• 2º expoentes ou raízes
• 3º multiplicação e divisão
• 4º adição e subtração

Operadores de incremento e decremento

• usando incrementos e decrementos para adicionar ou diminuir conteúdo das variáveis .

incremento

const postLikes = 10
postLikes = postLikes +1

• código esta errado pois não se pode atribuir em uma CONST

let postLikes = 10
postLikes = postLikes + 1

• codigo esta certo pois se pode atribuir em uma LET
• usando shorthand ou seja incurtando o código/atalho
  let postLikes = 10
postLikes++

decremento

let postLikes = 10
postLikes = postLikes - 1

• código esta certo pois se pode atribuir em uma LET
• usando shorthand ou seja incurtando o código/atalho
  let postLikes = 10
postLikes--

Operadores addition, subtraction, multiplication e division assignment

• esse operador addition assignment, faz o operador receber tudo que já tem mais o valor atribuido.
  postLikes += 10

• esse operador subtraction assignment, faz o operador receber tudo que já tem e subtrair o valor atribuido.
  postLikes -= 5

• esse operador multiplication assignment, faz o operador receber tudo que já tem e multiplicar o valor atribuido.
  postLikes *= 10

• esse operador division assignment, faz o operador receber tudo que já tem e dividir o valor atribuido.
  postLikes /= 2

NaN - not a number

• Quando fizermos alguma operação que não resulta em um número esse valor vai aparecer ou seja quando tentar fazer uma operação que não faz sentido.
  console.log(7/'oi')

Concatenação de string com número

const likesMessage = 'Opost tem ' + postLikes + ' likes'

Nessa aula foi mostrado a forma de se trabalhar com Números em JavaScript, com isso aprendi que alem de fazer atribuições usando = , e também aprendi o porque de as vezes aperecer o NaN em algumas mensagens quando se esta verificando a saida dos dados.

• 'igual a' e 'diferente de'

console.log(age == 31) // saida: true
console.log(age == '31') // saida: true

console.log(age != 31) // saida: false
console.log(age != '31') //saida: false

// o operador '==' ele compara apenas se é igual(mesmo valor) e não se é do mesmo tipo.

• 'igual a, e do mesmo tipo' e 'diferente de, e do mesmo tipo'

console.log(age === 31) // saida: true
console.log(age === '31') // saida: false

console.log(age !== 31) // saida: false
console.log(age !== '31') //saida: true

// o operador '===' ele compara se é igual e se é do mesmo tipo.

@edneto

Objetos em arrays

• Podemos criar objetos dentro de arrays igual ao exemplo a baixo:

const posts = [
    { title: 'Empadão de frango', likes: 30 },
    { title: '4 receitas de purê de batata', likes: 50 },
]

console.log(posts)

atualizando os dados do blogPost do objeto user

let user = {
    name: 'João',
    age: 31,
    email: '[email protected]',
    city: 'San José',
    blogPosts: [
        { title: 'Empadão de frango', likes: 30 },
        { title: '4 receitas de purê de batata', likes: 50 },
    ],
    login() {
        console.log('Usuário logado')
    },
    logout() {
        console.log('Usuário deslogado')
    },
    logBlogPost() {
        console.log(`${this.name} escreveu os seguintes posts:`)

        this.blogPosts.forEach(post => {
            console.log(post.title, post.likes)
        })
    }
}

user.logBlogPost()

• Podemos interar sobre os objetos do array como no exemplo do método logBlogPost()

@edneto

JavaScript

//utilizando callbacks
const ul = document.querySelector('[data-js="ul"]')

const socialNetworks = ['youtube', 'twitter', 'instagram', 'facebook']

let HTMLTemplate = ""

socialNetworks.forEach(socialNetwork => {
    HTMLTemplate += `<li style="color:deeppink;">${socialNetwork}</li>`
})

ul.innerHTML = HTMLTemplate

HTML

<!DOCTYPE html>
<html lang="pt_BR">

<head>
    <meta charset="UTF-8">
    <title>Aula 3-5</title>
</head>

<body>
    <h1>Utilizando callbacks</h1>

    <ul data-js="ul"></ul>
</body>

<script src="./app.js"></script>

</html>

@edneto

const postTitle = 'É bolacha ou biscoito?'
const postAuthor = 'Matheus Saad'
const postComments = 15

Usando contacatenação

const postMessage = 'O post "' + postTitle +'", do ' +postAuthor+', tem '+postComments+'comentário'

• se usase-mos aspas simples no lugar das aspas duplas teriamos um erro de sintaxe.
  

para incluir as aspas sejam simples ou duplas dentro de uma string tem algumas alternativas como no exemplo a baixo.

• Exemplo 01: ao usar barra invertida fazemos com o que esta após a barra escape ou seja o
  JavaScript vai interpretar como um caráter e não como fechamento da string.

console.log('Você manja do filme \'As Banquelas\'?')

• Exemplo 02: usando aspas duplas para abri e fechar as
  strings, assim podemos usar as aspas simples como caracteres normalmente

console.log("Você manja do filme 'As Banquelas'?")

• Exemplo 03: usando aspas simples para abri e fechar as
  strings, assim podemos usar as aspas duplas como caracteres normalmente

console.log('Você manja do filme "As Banquelas"?')

usando template strings

• usando o template string ou seja a crase `` hoje é considerada a
  melhor forma de fazer interpolação sem precisa ficar concatenando como no exeplo assima

Quando usar template strings?

• Quando se fazer interpolação de variavéis ou conter aspas simples ou duplas e criar template HTML.

const postMessage = `O post "${postTitle}", do ${postAuthor}, tem ${postComments} comentários.`

criando tempaltes HTML

• usando templates em HTML com template string, ajuda a montar até página em HTML dentro do JavaScript e
  injetar em uma página HTML

@edneto

Parent, children e siblings

sibling

• Um tipo de nó dessa arvore é o sibling ou seja na tradução seria irmão ou nós irmãos

• Quando se tem elementos no mesmo nível com o mesmo pai direto esses elementos são chamados irmãos.

            html(root node)
            /    \
        head     body
        /        /   \
    title       h1...div ----- siblings
                        \
                        /\
                      h1...p---- siblings 
  

parent and children

• Também temos a relação de pai e filho aonde, aonde temos o elemento pai e baixo dele os filhos.

• Usamos esses tipos de ralações para atravessar o dom entre diferentes elementos e obter seleções maiores de elementos.

            html(root node)
            /    \
        head     body
        /        /   \
    title       h1   [div] ----- parent
                       \
                       /\
                    [h1...p]---- children   
  

Buscando children com elemento pai

• Pegando a referência do elemento pai e adicionando nos elementos filhos uma class.

const article = document.querySelector('article')
console.log(article.children)

• Convertendo HTMLCollection em array
• O Array.from retorna um novo objeto com base no HTMLCollection do article.children ou seja o valor original do HTMLCollection não foi alterado.

console.log(Array.from(article.children))

//Adicionamos uma class em todos os filhos do article
Array.from(article.children).forEach(element => {
    element.classList.add('article-element')
})

Usando o children para descobrir o parent e os irmãos

const title = document.querySelector('h2')

//Descobrindo quem é o pai da Tag H2
console.log(title.parentElement)

//Descobrindo o pai do elemento pai do H2
console.log(title.parentElement.parentElement)

//Descobrindo o próximo irmão do elemento H2 de cima para baixo
console.log(title.nextElementSibling)

//Descobrindo o próximo irmão do elemento H2 de baixo para cima
console.log(title.previousElementSibling)

@edneto

variáveis e escopo de bloco

let age = 31essa let é uma variável global, por ser global pode tanto ser usada fora do bloco quanto dentro dele.

let age = 31
if(true){
    age = 41 //podemos mudar o valor, mas o mesmo se repete no variável global
    console.log(`dentro do 1º bloco de código: ${age}`)
}

console.log(`fora do bloco de código: ${age}`)

let age = 41
if (true) {
    let age = 41
    console.log(`dentro do 1º bloco de código: ${age}`)
}

console.log(`fora do bloco de código: ${age}`)

let age = 31
if (true) {
    let age = 41
    let name = 'Lima'
    console.log(`dentro do 1º bloco de código: ${age} ${name}`)
}

console.log(`fora do bloco de código: ${age} ${name}`)

let age = 31

if (true) {
    let age = 41
    let name = 'Lima'
    console.log(`dentro do 1º bloco de código: ${age} ${name}`)

    if (true) {
        console.log(`dentro do 2º bloco de código: ${age}`)
    }
}

console.log(`fora do bloco de código: ${age} ${name}`)

O que são objetos?

Exemplo 1: Celular

• Objetos tem algumas características que são chamadas propriedades:

  • Cor
  • Tamanho
  • Modelo

• Objetos tem algumas ações para ser executada nele:

  • Fazer ligações
  • Tirar fotos
  • Tocar músicas

No JavaScript os objetos tem:

• Características que vamos chamar de Propriedades;
• Ações que vamos chamar de métodos;

Exemplo 2: Usuário de uma aplicação

• Propriedade:

  • E-mail
  • Nome de usuário
  • Idade

• Métodos

  • Login
  • Logout

Exemplo 3: Documento

• Propriedade:
  • Título
  • Conteúdo
  • Autor
• Método
  • Publicar
  • Rascunho
  • Deletar

Objetos em javaScript vão nos possibilitar a criação de estruturas de dados que representam certos elementos do nosso código ou das nossas aplicações web, também existem objetos acoplados que vamos usar ou criar nosso próprios objetos.

@edneto

For Loop

• Executa um códido por um determinado número de vezes.
• Estrutura basica do for

for (let i = 0; i < 5; i++){
	console.log(`Dentro do loop: ${i}`)
	//Bloco de códigos
}

console.log('Loop concluído')

//1 expressão é a inicialização de uma váriavel: i = 0
//2 expressão é uma condição: i < 5, ela serve para dizer qual condição dever ser atendida para finalizar o loop
//3 expressão é um incremento: i++, ela é executada no final do fluxo

• Exemplo de um Loop pegando dados de Array: imagine que esse array tem muito dados.

const names = ['Linus', 'Ada', 'Bill']

for (let = i; i < names.length; i++){
	console.log(names[i]) 
}

• Outro exemplo de For com template de código HTML

for (let = i; i < names.length; i++){
	const HTMLTmplate = `<p>${names[i]}</p>`
	console.log(HTMLTmplate)
}

Terminologia

• Iteração: processo de percorrer um array para buscar determinado conteúdo.

• Uma iteração acontece toda vez que o bloco dentro do for for executado ou seja percorrer um array iterando por cada item dele.

@edneto

Mais eventos do DOM

Evento copy

• Usado para atrelar o evento de copiar

const paragraph = document.querySelector(".copy-me")
paragraph.addEventListener("copy", () => {
    console.log("Texto copiado")
})

Evento mousemove

• Ele captura o movimento do mouse de acordo com o pixel que o ponto se encontra usando X - Horizontal(esquerda para direita) e Y - Vertical(Top para baixo)

const div = document.querySelector(".box")

div.addEventListener("mousemove", event => {
    div.textContent = `X: ${event.offsetX} | Y: ${event.offsetY}`
})

Evento wheel ou roda

• vamos fazer o evento de rolagem da página
• dentro do evento WheelEvent que vemos no console, temos as propriedades pageX(esquerda para direita) e pageY(topo para baixo), essas propriedades representam toda a página.

document.addEventListener('wheel', event => {
    console.log(event.pageX, event.pageY)
})

• Ref: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

@edneto

Interagindo com o Browser

O que vamos ver nas próximas aulas desse modulo

• Document Object Model - DOM;
• Adicionar, modificar e remover conteúdo;
• Eventos;
• Popup.

@edneto

3 Tipos de escopos em JS

• Escopo de funções;
• Escopo de blocos;
• Escopo léxico.

O que é escopo?

• Podemos definir como a [visibilidade] de uma variável
• Outras partes do seu código pode ou não acessar esse valor.

Exemplo de escopo:

• "message" é acessível apenas dentro da função getMessage

function getMessage(){
    let message = 'Oi!'

    message//'Oi!'
}

message// NOT DEFINED

Escopo de funções

function myFunc() {
    let cat = 'Zeca'
    const age = 3
    var color = 'cinza'
}

myFunc() //mesmo invocando a função
console.log(cat)
console.log(age)
console.log(color)

//todas a variáveis, existem apenas dentro da muFunc
//Gerando o erro "Uncaught ReferenceError: cat is not defined" ao tentar usa-las fora

Como cada função tem suas variáveis somente naquele escopo isso quer dizer que podemos ter variáveis de mesmo nome em funções diferentes.

Escopo global e escopo local

• O escopo de "dog" é a função dogWatch, esse é escopo local
• No caso o dog fora da função é de escopo global
• Nesse cenário o var, let e const vão se comportar da mesma maneira, só trocar e testar.

const dog = 'Pastor-alemão'

function dogWatch() {
    const dog = 'Samoieda'
    console.log(dog)//'Samoieda'
}

dogWatch()
console.log(dog) //'Pastor-alemão'

Escopo de bloco

• Escopo de bloco não necessariamente esta relacionado diretamente a funções.
• Exemplo: PI e circle só podem ser acessados dentro do bloco

let radius = 8
if (radius > 8) {
    const PI = 3.14
    let circle = 2 * PI * radius
}

radius //8
PI //NOT DEFINED
circle //NOT DEFINED

• Em JavaScript um bloco tem notação de abertura e fechamento de chaves {}, loops como for, while, for of, if todos são blocos.

• Tanto se usarmos const ou let as variáveis continuam presas ao escopo, mas se trocar no caso acima as variáveis por var ela não fica presa ao escopo.

• Isso significa que const e let tem regras diferentes de escopo se comparado a var

• Antigamente para manter um var presa a blocos era necessário colocar elas em funções.

Escopo léxico

• Escopo léxico, são funções alinhadas que estão sujeitas a buscar variáveis no escopo acima delas.
• Essa relação tem um único fluxo que é de fora para dentro.

const external = () => {
    const book = 'sapiens'

    const internal = () => {
        console.log(book.toUpperCase())
    }

    internal()
}

No que a variável [book] foi declarada na função external e foi usada na função internal ou seja toda vez que a variável[book] precisar ser usada, por ela não existir dentro do bloco internal ela vai buscar a variável no escopo acima

Mas se existi-se uma variável book dentro da função internal então ela não iria buscar no escopo acima.

expemplos 1

const external = () => {
    const book = 'sapiens'

    const internal = () => {
        const book = 'Os testamentos'

        const extraInternal = () => {
            console.log(book.toUpperCase())

        }
        extraInternal()
    }

    internal()
}

exemplos 2

const external = () => {
    const book = 'sapiens'

    const internal = () => {
        // const book = 'Os testamentos'

        const extraInternal = () => {
            console.log(book.toUpperCase())

        }
        extraInternal()
    }

    internal()
}

• Então independente de quantos níveis de aninha mento que você tiver, as variáveis são buscadas e acessadas no escopo referente a essa função alinhada.

@edneto

Booleans e comparações

• Quando vamos precisar usar Booleans?
  -- quando tivermos que verificar um acondição no código, ou seja teremos que checar se um pedaço do código é true ou false.

console.log(true, false, 'true', 'false')
\\saida: true, false, "true", "false"
\\ os 2 primeiros são booleans e os 2 últimos são strings.

Métodos podem retornar booleans

• vamos usar algus métodos que retornam TRUE ou FALSE, para exemplificar.

const email = '[email protected]'
const includes = email.includes('@')

console.log(includes) //saida: true

// includes é um método que checa se uma determinada estring existe dentro de outra. Retorna TRUE(se existir) ou FALSE(se não existir)

Checando Array

const names = ['dio', 'roger','robert']
const arrayIncludes = names.includes('roger')

console.log(arrayIncludes) //saida: true

// includes é um método que podemos usar em um array para vericicar se existe determinado valor.

Operadores de comparação

• Comparação com números

const age = 31

console.log(age == 31) // é igual? - saida: true
console.log(age == 35) // é igual? - saida: false
console.log(age != 31) // não é igual? - saida: false
console.log(age > 30) // é maior que  - saida: true
console.log(age > 31) // é maior que - saida: false
console.log(age < 31) // é menor que - saida: false
console.log(age < 32) // é menor que - saida: true
console.log(age <= 31) // é menor ou igual - saida: true
console.log(age >= 31) // é maior ou igual - saida: true

• Comparação com strings

const name = 'edson'

console.log(name == 'edson') // é igual? - saida: true
console.log(name == 'Edson') // é igual? - saida: false
console.log(name > 'belinha') // é maior que  - saida: true
console.log(name > 'Edson') // é maior que - saida: true
console.log(name > 'Belinha') // é maior que - saida: true

@edneto

Obtendo e setando atributos

getAttribute()

• usando o getAttribute, conseguimos obter o valor do atributo que esta na constante 'link' como mostra no exemplo a baixo

const link = document.querySelector('a') // primeiro link do document

//obtendo atributo do href
console.log(link.getAttribute('href'))

setAttribute

• quando queremos atribuir valores ou alterar podemos fazer como no exemplo abaixo

link.setAttribute('href', 'https://edsonllima.github.io')

//alterando texto entre as tag <a></a>
link.innerText = 'Website do Edson Lima'

Alterando valores o atributo de classe

const paragraph = document.querySelector('.error')

//obtendo o valor do atributo da classe
console.log(paragraph.getAttribute('class'))

//alterando o valor do atributo
paragraph.setAttribute('class', 'success')

Criando um atributo na tag

• Não importa se o atributo não existe podemos cria-lo com o JS

//criamos o atributo style e alteramos a cor do texto do paragraph
paragraph.setAttribute('style', 'color: teal')

@edneto

const name = "Luiz"

Diferença entre Métodos e Funções

Funções - características

• Para invocar uma função apenas inserimos o nome dela e abrimos e fechamos os parentes '()'
• As funções são criadas sozinhas e depois invocadas quando necessário.

const sayHi = () => 'Oi'

Invocando a função criada acima e armazenando em uma CONST para depois exibi-la no console.

const greet = sayHi()
console.log(greet)

Métodos - características

• É uma função o que diferencia ele é a forma como ele é invocado.
• Métodos são funções associadas a objetos ou tipos de dados como Strings.
• Os métodos são criados nos objetos ou no tipo de dado em si.
• Usamos anotação de ponto para invocar um método.

name.toUpperCase()

Se quiser armazenar esse valor em uma variável e depois exibir no console.

const nameInUpperCase = name.toUpperCase()
console.log(nameInUpperCase)

Semelhanças entre Funções e Métodos

• Em ambos os casos usamos os parentes "()" para fazer a invocação e esses parentes podem receber argumentos.
• A única diferença é que na parte de traz da invocação do método, estamos referenciando um valor e colocando um ponto ex. 'name.'toUpperCase()

@edneto

Retornando os valores

• usamos "return" para retornar o valor de dentro da função e com isso podemos usar o retorno para adicionar em uma variável.

//exemplo 01 - gera o calculo internamente
const double = function (number) {
    return number * 2
}

// adiciona em um let ou const o resultado da função
let result = double(4)

//exemplo 02 
const showResult = function (value) {
    return `O resultado é: ${value}`
}

//usa o resultado da variavel em outra função
console.log(showResult(result))

@edneto

Modificando estilos CSS(inline)

• se usarmos o setAttribute como no exemplo a baixo o que pode acontecer?

<body>
    <h1 style="color: blue;">Modificando estilos CSS(inline)</h1>


    <script src="./5-11.js"></script>
</body>

//**** código js ****

title.setAttribute('style', 'margin: 50px')

• Simples veja que no H1 já exite um atributo style setando uma cor, e ao tentar adicionar mais um atributo novo ele sobre escreve o antigo pelo novo.

Como adicionar um novo atributo sem sobre escrever?

• Se observar o objeto style no console vai encontrar as propriedade do objeto
  -Se fizer title.style.color vai encontrar o valor da propriedade color

console.log(title.style)

console.log(title.style.color) //blue

// title.setAttribute('style', 'margin: 50px')

//Dessa forma é mais eficiente que pelo método setAttribute
title.style.margin = '50px'

• Adicionando como no exemplo, não sobre escreve os valores e podemos adicionar vários outros ou alterar apenas o que precisarmos

title.style.margin = '50px'
title.style.padding = "50px 25px"
title.style.color = "teal"
title.style.fontSize = "5rem"
title.style.background = "#0000002B"
title.style.borderRadius = "20px"
title.style.textAlign = "center"
title.style.margin = ''

@edneto

ForEach e callbacks

• callbacks: callback é uma função que é passada para outra função como um argumento para ser executada posteriormente.
• forEach: forEach é um método utilizado para percorrer arrays, ele recebe como argumento uma função, ou seja, uma 'callback'. A função será executada para todo elemento do array.

Sintaxe básica:

callback

const myFunc = callback => {
    const value = 77
    callback(value)
}

// invocamos a função que executa o callback
myFunc(number => {
    console.log(number)
})

forEach

const numbers = [1, 2, 3, 4, 5]

numbers.forEach(function (item, index, array) {
    // código
})

Exemplo completo:

const socialNetworks = ['youtube', 'twitter', 'instagram', 'facebook']

socialNetworks.forEach((socialNetwork, index, array) => {
     console.log(index, socialNetwork, array)
 })

A função de callback dentro do 'forEach' pode receber 3 parâmetros:

• 1º como item atual do que esta sendo iterado.
• 2º index do array atual
• 3º e o array que esta sendo iterado

Podemos também trabalhar com a função desacoplada o que pode nos ajudar a deixar o nosso código mais organizado, mais legível e poderemos reutilizar a função em outros locais se necessário.

const logArrayInfo = (socialNetwork, index, array) => {
    console.log(index, socialNetwork, array)
}

socialNetworks.forEach(logArrayInfo)

@edneto

Operadores Lógicos

• Não é por que podemos devemos fazer varias combinações como no exeplo a baixo pois isso dificulta a leitura do código, sempre percisamos manter um código limpo.

//combinando condições diferentes em uma verificação
//usando operadores lógicos 'OU' || e 'E' &&
//const password = 'oij2301dujfo'  condição 1 de exemplo
const password = 'o1j'

if (password.length >= 12 && password.includes('1')) {
    console.log('senha muito forte =)')
} else if (password.length >= 8 || password.includes('1') && password.length >= 5) {
    console.log('senha forte')
} else {
    console.log('a senha deve conter 8 ou mais caracteres')
}

@edneto

Tipos de referência

Tipos Primitivos

• Numbers
• Strings
• Booleans
• Null
• Undefined
• Symbol
• BigInt

Tipos de referência

• Todos os tipos de objetos
  • Objetos literais
  • Arrays
  • Funções
  • Datas
  • Todos os outros objetos

Qual a diferença entre eles?

• É a forma como eles são armazenados na memória

Quando criamos algum tipo primitivo que pode ser uma String ou um número por exemplo, e atribuímos a esse tipo uma variável ou uma constante esse valor é armazenado em um lugar que chamamos de 'STACK' ou 'PILHA' em português

Como a 'stack' tem um espaço limitado, quando criamos um tipo de referência ou seja um objeto esse valor é guardado no 'HEAP' em tradução literal quer dizer 'amontoar', ele tem mais espaço disponível para armazenar objetos maiores e mais complexos como objetos literais e array

O 'heap' é um pouco mais lento que a 'stack'.

Quando armazenas um valor primitivo em uma variável ou constante esse valor vai para a "stak" e é acessado através do nome da constante ou variável

// O 100 esta na 'stack' e para acessar usamos o nome da variável 'score'
let score = 100

Quando armazenamos um tipo de referência, como um objeto em uma variável, esse objeto é armazenado no 'heap' e um ponteiro que aponta para o objeto é adicionado na 'stack' com o nome da variável que adicionamos esse array, por exemplo.

//O Array foi armazenado no 'heap' e foi criado um ponteiro com o nome 
// fruits que foi adicionado a 'stack', que vai ficar apontado para o array
let fruits = ['banana','manga','uva']

Diferença no uso da memoria entre 'stack' e 'heap'

• Se usarmos duas variáveis aonde uma recebe um valor e a outra recebe a primeira variável criada o que aconteceria?

let scoreOne = 50
let scoreTwo = scoreOne

console.log(`scoreOne: ${scoreOne} | scoreTwo: ${scoreTwo}`) //scoreOne: 50 | scoreTwo: 50

scoreTwo += 50

console.log(`scoreOne: ${scoreOne} | scoreTwo: ${scoreTwo}`) //scoreOne: 50 | scoreTwo: 100

Note que no código a cima no primeiro console o valor se repetiu mais no segundo o valor mudou somente no 'scoreTwo', que foi aonde adicionamos mais 50, com isso vimos que na cada variável fica em uma parte da 'stack' mesmo a segunda variável recebendo uma copia da primeira, quando mudamos algo na segunda isso não faz nada na primeira

• Se usarmos dois objetos aonde recebe uma copia do outro, qual seria o resultado?

let userOne = { name: 'Edson', score: 100 }
let userTwo = userOne

console.log(`userOne: ${userOne.score} | userTwo: ${userTwo.score}`)
//userOne: 100 | userTwo: 100

userTwo.score += 50

console.log(`userOne: ${userOne.score} | userTwo: ${userTwo.score}`)
//userOne: 150 | userTwo: 150

No caso dos objetos como eles são armazenados no 'heap' e referenciados por ponteiro na 'stack' apenas é adicionada na 'stack' uma segunda referência do mesmo objeto, ou seja mesmo se você alterar o valor do userOne ou userTwo está apenas alterando o mesmo objeto que foi referenciado duas vezes.

O que é o heap em estrutura de dados?

Heap é uma árvore binária completa e de prioridade. Uma árvore binária diz-se completa quando os seus níveis estão cheios, com possível excepção do último, o qual está preenchido da esquerda para a direita até um certo ponto.

@edneto

Conversão de tipos

• converter um tipo de dado em outro tipo de dados, podemos usar uma função construtora.

let score = '100'

score = Number(score) // passando string como argumento, ela vai ser convertida para número.
console.log(score + 1 )//sem conversão. saida: 1001, com conversão. saida: 101

console.log(typeof score) 
// verifica o tipo. saida: number, caso não tenha sido convertido, saida: string

• obs.: typeof as vezes pode não ser a melhor escolha para verificar o tipo de um valor... mais isso vamos verificar no futuro.

NaN

• Qualquer valor que tente ser convertido em número que não faça sendito a resposta é NaN:

const crazyCoversion = Number('Maça') 
console.log(crazyCoversion) //saida: NaN

• Ao converver número em string o resultado é uma string:

 const convertedNumber = String(97)
console.log(convertedNumber, typeof convertedNumber) //saida: 97 string

• Valores podem ser convertido em Boolean:

const booleanConversion = Boolean(10)
console.log(booleanConversion)// saida: true

• Por que o resultado foi TRUE?
  -- Valores falsy:

• false
• 0
• "",'',``
• null
• undefined
• NaN

• A alguns valores no Boolean que são chamado de FALSY, sempre que esses valores forem usado para saber se é TRUE ou FALSE o resultado será FALSE.

• Valores truthy:
  -- Qualquer valor que não é falsy, ou seja no exeplo acima 10 é true

Acabamos de fazer conversções explicitas de dados ou seja fizemos diretamente as conversões.

Conversões implicitas são as que o JavaScript faz por baixo dos panos.

@edneto

O que é controle de fluxo?

• Quando começamos a escrever códigos mais complexos vão existir certos momentos no nosso código que vamos ter que decidir qual vai ser a próxima ação a ser executada e vão existir momentos que vamos ter que repetir um bloco de código varias vezes ou seja vamos precisar controlar o fluxo do código.

Existem vários tipos de controle de fluxo em JavaScript

• Loop

• • Percorre o código, quando se precisa executar um certo bloco de códigos várias vezes.

• Condicionais

• • Quando precisamos verificar em nosso código se uma cóndição é verdadeira.

@edneto

O que são funções?

• As funções são do tipo Object. Permitem a criação de um bloco de códigos que pode ser invocada e interpretada quando precisarmos

• Podemos pensar em uma função como uma caixa que faz alguma coisa em particular e quando precisarmos dela só precisaremos invocar ela.

• Exemplo de nome de uma função criada: Função showMessage.

• exemplo dela sendo invocada: showMessage()

@edneto