Programador Full-stack Javascript Profissional

1. Javascript I - Lógica de Programação

1.1. Apresentação e Introdução ao Módulo

1.1.1. Quem sou eu?

1.1.1.1. Isaac Pontes

1.1.1.2. Bacharel em Sistemas de Informação

1.1.1.3. Programador Full-stack e Instrutor

1.1.2. O que vamos aprender nesse módulo?

1.1.2.1. Fundamentos do Javascript e de programação

1.1.2.2. Lógica de programação

1.1.2.3. Estruturas de controle

1.1.2.4. Arrays

1.1.2.5. Objetos

1.1.2.6. Funções

1.2. Dicas e Requisitos para o Módulo

1.2.1. Ferramentas

1.2.1.1. Visual Studio Code

1.2.1.2. Navegador Web

1.2.1.3. CodePen (https://codepen.io)

1.2.2. Dicas

1.2.2.1. Acostume-se a consultar a documentação

1.2.2.1.1. https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

1.2.2.1.2. https://www.w3schools.com/js/default.asp

1.2.2.2. Não se preocupe se tiver um pouco de dificuldade

1.2.2.3. Mesmo que não consiga resolver os exercícios, fique atentos às resoluções

1.3. Fundamentos

1.3.1. O que é uma Linguagem de Programação

1.3.1.1. Conjunto de códigos que contém instruções para o computador

1.3.1.2. Diferente de linguagem de marcação (como HTML, XML, YAML, etc) e de linguagem de estilização (como CSS)

1.3.1.3. Exemplos

1.3.1.3.1. C

1.3.1.3.2. C++

1.3.1.3.3. Java

1.3.1.3.4. C#

1.3.1.3.5. PHP

1.3.1.3.6. Python

1.3.1.3.7. Ruby

1.3.1.3.8. Javascript

1.3.1.3.9. Go

1.3.1.3.10. Elixir

1.3.1.3.11. Dart

1.3.1.3.12. E muitas outras

1.3.1.4. Podem ser de **alto nível** ou de **baixo nível**

1.3.1.5. Podem ser **compiladas** ou **interpretadas**

1.3.2. O que é Javascript

1.3.2.1. Linguagem de programação

1.3.2.1.1. Criada em 1995 por Brendan Eich para ser usada pelo Netscape

1.3.2.1.2. Não confundir com Java

1.3.2.1.3. Seu nome oficial é ECMAScript

1.3.2.1.4. De alto nível e interpretada

1.3.2.1.5. Multiparadigma

1.3.2.2. Principal linguagem de programação usada pelos navegadores web

1.3.2.3. Junto com HTML e CSS forma as três principais tecnologias da web

1.3.2.4. Também pode ser usada fora dos navegadores através de runtimes como o Node.js

1.3.2.5. Na minha opinião, uma das melhores linguagens para começar na programação atualmente

1.3.3. Tipos de Dados

1.3.3.1. No javascript (e em outras linguagens de programação) dados podem ser representados em diferentes formas

1.3.3.2. O que e quais são os tipos primitivos?

1.3.3.2.1. number e bigint

1.3.3.2.2. string

1.3.3.2.3. boolean

1.3.3.2.4. null e undefined

1.3.3.3. objetos e funções

1.3.4. Variáveis

1.3.4.1. Servem para armazenar os dados para podermos usá-los no nosso código

1.3.4.2. Criando variáveis

1.3.4.2.1. var

1.3.4.2.2. let

1.3.4.2.3. const

1.3.4.3. Nomeando variáveis

1.3.4.3.1. Nomes significativos

1.3.4.3.2. Cases

1.3.5. Operadores e Expressões

1.3.5.1. Operadores

1.3.5.1.1. Aritméticos +, -, *, / e %

1.3.5.1.2. Agrupamento ( )

1.3.5.1.3. Atribuição =, +=, -=, *=, /= e %=

1.3.5.1.4. Encadeamento .

1.3.5.1.5. Incrementar ++ e Decrementar --

1.3.5.1.6. Concatenação de strings +

1.3.5.2. Expressões

1.3.6. Comentários

1.3.6.1. O que são?

1.3.6.1.1. Linhas do código que serão ignoradas pelo interpretador

1.3.6.2. Como usar?

1.3.6.2.1. Um linha //

1.3.6.2.2. Várias linhas /* */

1.3.6.3. Para que servem?

1.3.6.3.1. Deixar anotações

1.3.6.3.2. Ajudar a entender o código

1.3.6.3.3. Documentar o código

1.3.7. Recursos Nativos do Navegador

1.3.7.1. console

1.3.7.1.1. Objeto que representa o terminal interativo do navegador

1.3.7.1.2. Algumas funções:

1.3.7.2. window

1.3.7.2.1. Objeto que representa a aba atual do navegador

1.3.7.2.2. Algumas funções:

1.3.7.3. document

1.3.7.3.1. Objeto que representa a página html atual

1.3.7.3.2. Veremos mais sobre ele no futuro

1.3.8. Exercício 1

1.3.8.1. Cadastro de recrutas

1.3.8.1.1. Escreva um programa em javascript que permita salvar informações de um recruta. As informações a serem salvas são: - o primeiro nome - o sobrenome - o campo de estudo - o ano de nascimento Depois o programa deve exibir o nome completo do recruta, seu campo de estudo e sua idade (apenas baseada no ano de nascimento).

1.3.8.2. Calculadora de 4 operações

1.3.8.2.1. Escreve um programa em javascript que permita inserir dois valores numéricos e então calcule o resultado das quatro operações básicas (soma, subtração, multiplicação e divisão). Após calcular os resultados o programa deve exibi-los na tela.

1.3.9. Comparação de Dados

1.3.9.1. Retornam um resultado booleano (true ou false)

1.3.9.2. Operadores

1.3.9.2.1. == e ===

1.3.9.2.2. != e !==

1.3.9.2.3. >, >=, <, <=

1.3.10. Operadores Lógicos

1.3.10.1. E (AND)

1.3.10.1.1. Só é verdadeiro se ambas as partes forem verdadeiras

1.3.10.1.2. Operador &&

1.3.10.1.3. E (AND)

1.3.10.2. Ou (OR)

1.3.10.2.1. Só é falso se ambas as partes forem falsas

1.3.10.2.2. Operador ||

1.3.10.2.3. OU (OR)

1.3.10.3. Não (NOT)

1.3.10.3.1. Inverte o resultado (de verdadeiro para falso e vice-versa)

1.3.10.3.2. Operador !

1.3.10.3.3. NÃO (NOT)

1.4. Estruturas de Controle

1.4.1. Estruturas Condicionais: IF e ELSE

1.4.1.1. Permite criar blocos de código que vão ser executados somente quando uma determinada operação lógica for verdadeira

1.4.1.2. SE condição === true ENTAO faça algo

1.4.1.3. Além disso, pode ser usado com o ELSE para acrescentar um bloco que vai ser executado somente quando essa mesma operação lógica for falsa

1.4.1.4. SE condição === true ENTAO faça uma coisa SENÃO faça outra coisa

1.4.1.5. Sintaxe:

1.4.1.5.1. IF: if (condicao) { // ... }

1.4.1.5.2. IF ELSE: if (condicao) { // ... } else { // ... }

1.4.1.5.3. IF ELSE IF: if (condicao1) { // ... } else if (condicao2) { // ... } else { // ... }

1.4.1.6. Operador Ternário

1.4.1.6.1. Forma abreviada e autoavaliada do IF ELSE

1.4.1.6.2. Sintaxe: const resultado = condicao ? resultado_verdadeiro : resultado_falso

1.4.2. Exercício 2

1.4.2.1. Teste de Velocidade

1.4.2.1.1. Escreva um programa em javascript que permita inserir o nome e a velocidade de dois veículos e exiba na tela uma mensagem dizendo qual dos dois é mais rápido (ou que as velocidades são iguais se este for o caso)

1.4.2.2. Cálculo de Dano

1.4.2.2.1. Escreva um programa que permita inserir o nome e o poder de ataque de um personagem, depois o nome, a quantidade de pontos de vida, o poder de defesa de outro personagem e se ele possui um escudo, e então calcule a quantidade de dano causado baseado nas seguintes regras: - Se o poder de ataque for maior do que a defesa e o defensor não possuir um escudo, o dano causado será igual a diferença entre o ataque e a defesa. - Se o poder de ataque for maior do que a defesa e o defensor possuir um escudo, o dano causado será igual a metade da diferença entre o ataque e a defesa. - Se o poder de ataque for menor ou igual a defesa, o dano causado será 0. Por fim, o programa deve subtrair a quantidade de dano da quantidade de pontos de vida do personagem defensor e exibir na tela a quantidade de dano e as informações atualizadas de ambos os personagens.

1.4.3. Estruturas Condicionais: SWITCH

1.4.3.1. Permite criar blocos condicionais como o IF, porém com um estrutura que avalia uma expressão e testa o resultado contra vários casos, executando os casos correspondentes.

1.4.3.2. É possível definir um caso padrão, que sempre é executado.

1.4.3.3. Também é possível parar a execução após algum dos casos.

1.4.3.4. SWITCH expressão CASO a : faça uma coisa CASO b : faça outra coisa E PARE CASO c : faça mais outra coisa POR PADRÃO: faça algo sempre

1.4.3.5. Sintaxe: switch (expressao) { case "a": // ... case "b": // ... break case "c": // ... default: // ... }

1.4.4. Exercício 3

1.4.4.1. Conversor de Medidas

1.4.4.1.1. Escreva um programa em javascript que funcione como um conversos de medidas. O programa deverá pedir por um valor em metros e então dar a opção de escolher para qual unidade de medida esse valor deve ser convertido. As opções são: - milímetro (mm) - centímetro (cm) - decímetro (dm) - decâmetro (dam) - hectômetro (hm) - quilômetro (km) O programa deve então converter a medida de acordo com a opção escolhida e exibir o resultado. O programa também deve exibir uma mensagem de “Opção inválida” caso o usuário insira uma opção diferente das disponíveis (use o break e o default para isso)

1.4.5. Estruturas de Repetição: WHILE

1.4.5.1. Estruturas de repetição servem para executar um mesmo bloco de código várias vezes.

1.4.5.2. O while serve para criar um laço de repetição que será executado enquanto uma determinada condição for verdadeira.

1.4.5.3. O while e todas as outras estruturas de repetição que veremos aceitam o *break* para parar a repetição a qualquer momento.

1.4.5.4. **Atenção:** é importante que sempre exista uma forma da condição se tornar falsa, ou então o bloco ficará se repetindo para sempre.

1.4.5.5. ENQUANTO condição FAÇA algo várias vezes

1.4.5.6. Sintaxe: while (condicao) { // ... }

1.4.6. Exercício 4

1.4.6.1. Visitando Novos Cidades

1.4.6.1.1. Escreva um programa em javascript que peça o nome de um turista e então pergunte se ele já visitou alguma cidade. Caso a resposta seja sim, pergunte o nome da cidade e o armazene em uma variável, e então continue perguntando se o turista visitou alguma outra cidade até que a resposta seja não. No fim, o programa deve exibir o nome do turista, quantas e quais cidades ele visitou.

1.4.7. Estruturas de Repetição: DO WHILE

1.4.7.1. O do while é muito parecido com o while, porém ele garante que o bloco de código será executado pelo menos uma vez, mesmo que a condição seja falsa.

1.4.7.2. No do while a primeira verificação da condição só acontece depois que o bloco foi executado uma vez.

1.4.7.3. FAÇA alguma coisa ENQUANTO condição

1.4.7.4. Sintaxe: do { // ... } while (condicao)

1.4.8. Exercício 5

1.4.8.1. Menu Interativo

1.4.8.1.1. Escreva um programa em javascript que simule um menu interativo com 5 opções diferentes. O programa deverá iniciar mostrando as 5 opções disponíveis, as quatro primeiras não precisam de nenhuma funcionalidade específica, a última opção deve ser a opção “Encerrar”. Ao clicar em alguma das quatro primeiras opções uma mensagem deve ser exibida na tela indicando qual foi a opção escolhida e depois o programa deve exibir novamente o menu com as 5 opções. Isso deve continuar acontecendo até que o usuário escolha a opção “Encerrar”. Ao escolhe-la uma mensagem dizendo que o sistema está sendo encerrado deve ser exibida na tela e então o programa é finalizado.

1.4.8.2. Controle Financeiro

1.4.8.2.1. Escreva um programa em javascript que comece perguntando pela quantidade inicial de dinheiro disponível e então mostre na tela essa quantidade juntamente com as opções de adicionar e remover dinheiro e uma opção de sair. Ao clicar na opção de adicionar dinheiro o programa deve perguntar pela quantidade a ser adicionada, somar esse valor com a quantidade inicial e então mostrar novamente o menu com a quantidade de dinheiro e as opções. A opção de remover dinheiro deve fazer o mesmo, porém subtraindo o valor. A opção de sair deve encerrar o programa.

1.4.9. Estruturas de Repetição: FOR

1.4.9.1. O for também serve para realizar repetições, porém com uma estrutura diferente do while e do do while.

1.4.9.2. Ele existe para abreviar o código em casos que seguem essa estrutura específica.

1.4.9.2.1. Inicialização: expressão executada antes de tudo.

1.4.9.2.2. Condição: condição semelhante ao while, é testada antes da execução do bloco de repetição.

1.4.9.2.3. Finalização: expressão executada após o bloco de repetição

1.4.9.3. PARA inicialização; condição; finalização FAÇA alguma coisa

1.4.9.4. Um exemplo comum de uso do for é quando queremos iterar um número fixo de vezes, como uma vez para cada letra de uma palavra, ou uma vez para cada item de uma lista.

1.4.9.5. Sintaxe: for (inicializacao; condicao; finalizacao) { // ... }

1.4.10. Exercício 6

1.4.10.1. Robô da Tabuada

1.4.10.1.1. Escreva um programa em javascript que seja capaz de calcular a tabuada de um determinado número (de 1 a 20). O programa deve começar pedindo o número a ser usado nos cálculos e então salvar todos os resultados de multiplicações de 1 a 20 usando o número informado dentro de uma variável do tipo string. Depois o programa deve exibir esses resultados e finalizar.

1.4.10.2. Procurando Palíndromos

1.4.10.2.1. Escreva um programa em javascript que seja capaz de identificar se uma palavra é um palíndromo. Um palíndromo é uma palavra que lida de trás para frente possui as mesmas letras na mesma ordem. O programa deve iniciar pedindo que seja informada uma palavra e então deve exibir uma mensagem dizendo se aquela palavra é ou não um palíndromo. Caso não seja um palíndromo, o programa deve mostrar a palavra lida da esquerda para direita e da direita para esquerda.

1.5. Estruturas de Dados

1.5.1. Estruturas de Dados

1.5.1.1. São um modo particular de armazenar e organizar dados de modo que possam ser usados eficientemente, facilitando sua busca e modificação.

1.5.1.2. Estruturas de dados clássicas

1.5.1.2.1. Lista ligada

1.5.1.2.2. Array

1.5.1.2.3. Fila (Queue)

1.5.1.2.4. Pilha (Stack)

1.5.1.2.5. Árvore (Tree)

1.5.1.3. Estruturas de dados no javascript (e outras linguagens de alto-nível)

1.5.1.3.1. Listas (Arrays)

1.5.1.3.2. Dicionários (Objetos)

1.5.1.4. Valor e Referência

1.5.2. Arrays (Vetores)

1.5.2.1. É uma estrutura do javascript para se trabalhar com todo tipo de lista

1.5.2.2. Seus elementos são identificados por um índice inteiro começando pelo 0

1.5.2.3. Pode armazenar qualquer tipo de dado e ter qualquer tamanho

1.5.2.4. Pode ser criado e utilizado através de colchetes [ ]

1.5.2.4.1. let array = [ ] let array = [ 1, 2, 4, 7 ]

1.5.2.4.2. array[0] = "Olá" array[1] = 42

1.5.2.5. Possuem funções para vários casos de uso

1.5.2.5.1. enfileirar e desenfileirar

1.5.2.5.2. empilhar e desempilhar

1.5.2.5.3. achar o índice de um valor

1.5.2.5.4. cortar e concatenar

1.5.2.5.5. etc

1.5.3. Exercício 7

1.5.3.1. Fila de Espera

1.5.3.1.1. Escreva um programa em javascript para simular uma fila de espera em um consultório médico. O programa deve iniciar mostrando na tela um menu interativo contendo a lista de todos os pacientes esperando em ordem mostrando sua posição ao lado do nome (ex.: 1º Matheus, 2º Marcos, etc). O menu também deve permitir escolher entre as opções de “Novo paciente”, para adicionar um novo paciente ao fim da fila (pedindo o nome do paciente), “Consultar paciente”, que retira o primeiro paciente da fila e mostra na tela o nome do paciente consultado, e “Sair”. O programa só deve ser encerrado ao escolher a opção de “Sair”, caso contrário deve voltar ao menu.

1.5.3.2. Pilha de Cartas

1.5.3.2.1. Escreva um programa em javascript para simular um baralho de cartas. O programa deve iniciar mostrando na tela um menu interativo contendo as cartas que estão atualmente no baralho e as opções de “Adicionar uma carta”, “Puxar uma carta” e “Sair”. Ao escolher “Adicionar uma carta”, o programa deve perguntar o nome da carta e adicioná-la no topo do baralho. Ao escolher “Puxar uma carta”, o programa deve retirar a carta do topo do baralho e mostrar na tela o nome da carta puxada. O programa só deve ser encerrado ao escolher a opção de “Sair”, caso contrário deve voltar ao menu.

1.5.4. Objetos

1.5.4.1. É uma estrutura do javascript para se trabalhar com dicionários chave-valor

1.5.4.2. O par chave-valor em um objeto javascript é chamado de propriedade

1.5.4.2.1. A chava é como um **nome** da propriedade

1.5.4.2.2. O valor é o **valor** que está armazenado nessa propriedade (semelhante aos valores armazenados em variáveis)

1.5.4.3. Diferente dos arrays, seus elementos não possuem nenhuma sequência

1.5.4.4. Uma propriedade também pode ter strings, números e booleanos como chave

1.5.4.5. Uma propriedade pode armazenar qualquer tipo de dado como valor

1.5.4.6. Pode ser criado através de chaves { }

1.5.4.6.1. let objeto = { }

1.5.4.7. Suas propriedades e funções podem ser referenciadas por encadeamento com ponto "." ou colchetes [ ]

1.5.4.7.1. objeto.prop = "Olá, Mundo!" objeto.executar()

1.5.4.7.2. let name = "prop" objeto[name] = "Olá, Mundo!" objeto.prop === objeto[name] let funcao = "executar" objeto[funcao]()

1.5.5. Exercício 8

1.5.5.1. Cadastro de Imóveis

1.5.5.1.1. Escreva um programa em javascript que funcione como um cadastro de imóveis e atenda aos seguintes requisitos: - Deve ter um menu interativo que sempre é exibido até que o usuário escolha sair. - O menu interativo deve mostrar no topo a quantidade de imóveis cadastrados. - O menu deve ter a opção de salvar um imóvel. - Para salvar um novo imóvel o programa deve pedir as seguintes informações: - Nome do proprietário. - Quantidade de quartos. - Quantidade de banheiros. - Se possui garagem. - O menu também deve ter a opção de mostrar todos os imóveis salvos.

1.6. Funções

1.6.1. É uma estrutura do javascript que permite declarar um procedimento e executá-lo programaticamente.

1.6.2. Uma função pode ser vista como:

1.6.2.1. ENTRADA ->

1.6.2.1.1. PROCEDIMENTO ->

1.6.3. Tanto a entrada quanto a saída de uma função são **opcionais**, ou seja, uma função pode existir sem um deles ou sem ambos.

1.6.4. As entradas da função são chamadas de **parâmetros**. As saídas da função são chamadas de **retorno**.

1.6.5. Sintaxe: function nomeDaFuncao(entradas) { // procedimentos... return saida }

1.7. Exercício 9

1.7.1. Calculadora Geométrica

1.7.1.1. Escreva um programa em javascript para calcular a área de diferentes formas geométricas. O programa deve iniciar com um menu contendo as diferentes opções de cálculas. As opções devem ser: - área do triângulo: base * altura / 2 - área do retângulo: base * altura - área do quadrado: lado² - área do trapézio: (base maior + base menor) * altura / 2 - área do círculo: pi * raio² (considere pi = 3.14) Você deve escrever o programa usando funções sempre que possível para separar os procedimentos. O programa também deve ter uma opção de “Sair” e enquanto ela não for escolhida deverá voltar ao menu.

1.8. Objetos Globais

1.8.1. São objetos padrão da linguagem javascript que ficam sempre disponíveis para utilizarmos.

1.8.2. **Atenção:** não confundir com o objeto de escopo global window do navegador (ou o escopo global de outros ambientes)

1.8.3. Alguns exemplos:

1.8.3.1. Object

1.8.3.2. Array

1.8.3.3. String

1.8.3.4. Number

1.8.3.5. Date

1.8.3.6. Math

1.8.4. Podem ser usados para criar e converter valores

1.8.5. Possuem propriedades e funções úteis e frequentemente necessárias

1.9. Exercício 10

1.9.1. Sistema de Vagas de Emprego

1.9.1.1. Escreva um programa em javascript que simule um sistema de vagas de emprego, onde é possível gerenciar as vagas e adicionar candidatos às vagas. Ele deve atender aos seguintes requisitos: - Ter um um menu onde é possível escolher entre as diferentes funcionalidades do sistema - Listar vagas disponíveis - Criar um nova vaga - Visualizar uma vaga - Inscrever um candidato em uma vaga - Excluir uma vaga - Sair - A opção de listar as vagas deve mostrar o índice, o nome e a quantidade de candidatos inscritos de todas as vagas. - A opção de criar uma nova vaga deve pedir um nome para a vaga, uma descrição e uma data limite, e também deve pedir que o usuário confirme as informações antes de salvá-las. - A opção de visualizar uma vaga deve pedir o índice da vaga e mostrar todas as informações dela: índice, nome, descrição, data limite, quantidade de candidatos e o nome dos candidatos. - A opção de inscrever um candidato em uma vaga de pedir o nome do candidato, o índice da vaga e então uma confirmação exibindo as informações da vaga antes de salvar o candidato na vaga. - A opção de excluir uma vaga deve pedir o índice da vaga, mostrar suas informações e pedir que o usuário confirme a exclusão da vaga antes de realmente exclui-la. Este é o exercício de revisão do módulo, então aproveite para utilizar todos os recursos vistos até agora sempre que possível, como os objetos, arrays e funções.

1.10. Recapitulando o que aprendemos

1.10.1. Linguagem de Programação

1.10.2. Tipos de dados, variáveis e operadores

1.10.3. Estruturas de controle

1.10.4. Estruturas de dados

1.10.5. Funções

2. Javascript II - DOM

2.1. Introdução ao Módulo

2.1.1. O que vamos aprender

2.1.1.1. Juntar as peças, combinando HTML, CSS e Javascript

2.1.1.2. Como criar comportamentos dinâmicos nas páginas web

2.1.1.3. O que é o DOM e como manipulá-lo

2.1.1.4. Eventos

2.1.1.5. 2 mini projetos práticos incríveis

2.1.2. Ferramentas e Requisitos

2.1.2.1. Visual Studio Code e um Navegador Web

2.1.2.2. CodePen (opcional)

2.1.2.3. HTML, CSS e Javascript

2.2. Eventos no HTML

2.2.1. São uma forma dinâmica de executar javascript dentro de uma página HTML

2.2.2. Permite executar o javascript sem travar o carregamento da página como vinhamos utilizando anteriormente

2.2.3. São acionados por ações específicas na página (clicar, passar o mouse, focar, digitar, etc)

2.3. O que é DOM

2.3.1. *Document Object Model*, ou Modelo de Objeto de Documento

2.3.2. Permite que um documento escrito em uma linguagem de marcação (HTML, XML, etc) seja acessado pelo javascript

2.3.3. Isso é feito através de uma estrutura de árvore de objetos

2.3.3.1. Ex.:

2.3.3.1.1. Código: <html> <body> <h1>Algum Título</h1> <p>Lorem ipsum dolor sic ame...</p> <table> <tr> <td>Texto</td> <td>Texto</td> <td>Texto</td> </tr> <tr> <td>Texto</td> <td>Texto</td> <td>Texto</td> </tr> </table> </body> </html>

2.3.3.1.2. HTML

2.3.4. Permite que tenhamos acesso direto à página HTML para manipulá-la de várias formas

2.3.4.1. Lendo os elementos

2.3.4.2. Criando novos elementos

2.3.4.3. Excluindo elementos

2.3.4.4. Modificando elementos

2.3.4.5. Modificando estilos

2.3.4.6. etc

2.3.5. No navegador, podemos acessar o DOM através do objeto **document **

2.4. Obtendo Elementos HTML do DOM

2.4.1. O DOM nos permite ler elementos específicos do documento HTML

2.4.2. Obter vários elementos em uma HTMLCollection

2.4.2.1. document.getElementsByTagName()

2.4.2.2. document.getElementsByClassName()

2.4.3. Obter vários elementos em uma NodeList

2.4.3.1. document.getElementsByName()

2.4.3.2. document.querySelectorAll()

2.4.4. Obtendo um único elemento

2.4.4.1. document.getElementById()

2.4.4.2. document.querySelector()

2.5. Criando Novos Elementos no DOM

2.5.1. O DOM nos permite adicionar dinamicamente novos elementos HTML ao documento

2.5.2. Para isso precisamos:

2.5.2.1. 1. Criar o elemento document.createElement()

2.5.2.2. 2. Adicionar conteúdo ao elemento newElement.innerHTML = "Olá, mundo!"

2.5.2.3. 3. Adicionar o elemento como um novo nó no DOM element.appendChild(newElement)

2.5.3. Também é possível clonar algum elemento existente do DOM

2.6. Exercício 11

2.6.1. Escalação do Time

2.6.1.1. Construa uma página web que permita montar a escalação de um time de jogadores. Nele deverá ser possível: - Escalar um jogador - Informar a posição do jogador a ser escalado para o time. - Informar o nome do jogador. - Informar o número da camisa do jogador. - Ter um botão “Escalar” que pergunta ao usuário se ele deseja confirmar a escalação daquele jogador e então insere as informações em uma lista na página. - Após o jogador ser escalado os campos de texto devem ser limpos. - Remover um jogador - Informar o número da camisa do jogador. - Ter um botão “Remover” que pergunta ao usuário se ele deseja confirmar a remoção daquele jogador e então exclui ele da lista na página. - Após o jogador ser removido o campo de texto deve ser limpo. Dica: lembrando que é possível acessar o texto de um input através da propriedade value.

2.7. Exercício 12

2.7.1. Cadastro de Devs

2.7.1.1. Construa uma página web que permita cadastrar desenvolvedores, suas tecnologias e tempos de experiência. - A página deve ter um input para o nome completo do desenvolvedor e um botão para adicionar uma nova tecnologia. - Ao clicar no botão um evento deve ser disparado criando no formulário uma nova linha de inputs contendo: - um campo de texto para o nome da tecnologia - um grupo de botões tipo “radio” com opções de tempo de experiência (por exemplo, “0-2 anos”, “3-4 anos” e “5+ anos”) - um botão de remover que deve excluir essa linha. - O formulário também deve ter um botão de cadastrar que salva as informações do dev em um array e limpa o formulário. Para testar o funcionamento você pode utilizar um simples console.log() Para esse exercício você deve utilizar apenas eventos adicionados via javascript e a página deve funcionar sem acionar um recarregamento.

2.8. Exercício 13

2.8.1. Tic-Tac-Toe (Jogo da Velha)

2.8.1.1. Construa um jogo tic-tac-toe, conhecido em português como jogo da velha, utilizando HTML, CSS e Javascript. Você pode desenvolver com liberdade, da forma que preferir, mas o jogo precisa atender aos seguintes requisitos: - Deve ser possível incluir os nomes dos dois jogadores; - O nome do jogador da vez deve ser mostrado na tela e alterado a medida que os turnos vão se alternando; - Um tabuleiro deve ser mostrado na tela e ser atualizado quando o jogador clicar na região que ele quer marcar; - Quando um jogador clicar no tabuleiro deve ser marcado um “X” ou “O” de acordo com o jogador da vez e não deve ser possível clicar naquela região novamente; - Quando um jogador ganhar seu nome deve ser mostrado na tela e as regiões da vitória devem ser destacadas de alguma forma; - Em caso de empate, uma mensagem de empate deve ser mostrada na tela; - Deve ser possível reiniciar o jogo para jogar novamente.

2.9. Recursos de Armazenamento do Navegador

2.9.1. Session Storage

2.9.1.1. Forma simples de armazenar dados no navegador durante a navegação

2.9.1.2. Persistem mesmo após mudar de página em um mesmo site enquanto a aba/janela estiver aberta

2.9.1.3. Existem somente enquanto a aba daquele site está aberta, ao fechar o sessionStorage é limpo

2.9.2. Local Storage

2.9.2.1. Dados armazenados no navegador que persistem mesmo após fechar a aba/janela do navegador

2.9.2.2. Existem "para sempre" até serem removidos, não possuem data de expiração

2.9.3. Cookies

2.9.3.1. Dados armazenados em pequenos arquivos de texto no computador do cliente

2.9.3.2. Podem possuir uma data de expiração

2.9.3.3. A forma mais tradicional de permitir "lembrar" de informações mesmo depois de fechar o navegador

2.9.3.4. São enviados nas requisições e podem existir no servidor, sendo devolvidos quando uma página html for solicitada

2.10. Recapitulando o que aprendemos

2.10.1. Lembra da introdução?

2.10.1.1. Juntar as peças, combinando HTML, CSS e Javascript

2.10.1.2. Como criar comportamentos dinâmicos nas páginas web

2.10.1.3. O que é o DOM e como manipulá-lo

2.10.1.4. Eventos

2.10.1.5. 2 mini projetos práticos incríveis

2.10.2. Nós ainda aprendemos sobre

2.10.2.1. Formulários

2.10.2.2. Manipulação dinâmica do CSS

2.10.2.3. Manipulação dinâmica dos atributos no HTML

2.10.2.4. Trocar entre tema claro e escuro

2.10.2.5. Armazenamento no navegador

2.10.2.6. Cookies

3. Javascript III - JS Moderno

3.1. Introdução ao Módulo

3.1.1. O que vamos aprender

3.1.1.1. Situação do javascript moderno

3.1.1.2. Novos recursos do javascript

3.1.1.2.1. Template Literals

3.1.1.2.2. Desestruturação

3.1.1.2.3. Módulos

3.1.1.2.4. E mais...

3.1.1.3. Gerenciamento de pacotes com npm

3.1.1.4. Compilação de javascript com Babel

3.1.1.5. Empacotamento (bundling)

3.2. Versões do ECMAScript

3.2.1. O javascript é uma linguagem em constante atualização

3.2.1.1. ES1 - 1997

3.2.1.2. ES2 - 1998

3.2.1.3. ES3 - 1999

3.2.1.4. ES4 - Nunca foi lançada

3.2.1.5. ES5 - 2009

3.2.2. Em 2015, o modelo de atualização do javascript mudou para anual e suas versões passaram a ser identificadas por ano

3.2.2.1. ES6 - 2015

3.2.2.2. ES2016

3.2.2.3. ES2017

3.2.2.4. ES2018

3.2.2.5. etc...

3.2.3. Cada nova versão trouxe novos recursos e conheceremos esses recursos nesse módulo

3.3. Compatibilidade de Recursos

3.3.1. Os recursos do javascript precisam ser implementados pelo navegador e seus interpretadores para que funcionem

3.3.2. No entanto, os navegadores podem demorar a implementar os recursos das atualizações do javascript (ou as vezes nunca implementá-las)

3.3.3. Isso cria o problema de nem sempre os recursos mais novos do javascript estarem disponíveis nos navegadores (ex.: Internet Explorer)

3.3.4. Para saber mais sobre a compatibilidade dos recursos temos duas fontes principais

3.3.4.1. Documentação na MDN: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

3.3.4.2. Can I Use: https://caniuse.com/

3.3.5. Nesse módulo também aprenderemos como resolver esse problema de compatibilidade

3.4. Recursos do Javascript Moderno

3.4.1. Template Literals

3.4.1.1. Uma outra forma de declarar strings

3.4.1.2. Utiliza o acento grave (crase)

3.4.1.3. Permite interpolação de strings e quebra de linha automática

3.4.1.4. Exemplo: let str = `Essa linha será qubrada automaticamente e essa quebrará e terá um espaço no começo Resultado de uma expressão: ${2 + 2}`

3.4.2. Arrow Functions

3.4.2.1. Uma forma diferente de escrever funções anônimas

3.4.2.2. Não utiliza a palavra function, utiliza => após os parâmetros (por isso *arrow*, do inglês, seta ou flecha)

3.4.2.3. Não possui seus próprios *this*, *arguments*, *super* e *new.target *

3.4.2.4. Também permite retornar diretamente uma expressão, caso seja uma função de uma única linha

3.4.2.5. Exemplo: const sum = (a, b) => { return a + b } const multiply = (a, b) => a * b

3.4.3. Desestruturação de Objetos e Arrays

3.4.3.1. Funcionalidade que permite criar variáveis a partir de propriedades de um objeto ou elementos de um array

3.4.3.2. No caso das propriedade do objeto, as variáveis serão criadas com mesmo nome da propriedade

3.4.3.3. No caso dos elementos do array, podemos atribuir qualquer nome para a variável

3.4.3.4. Também pode ser utilizada de outras formas, como nos parâmetros de uma função

3.4.3.5. Exemplo: const { name, email } = person const [x, y] = coordinates function hello({ name }) { console.log(`Hello, ${name}`) }

3.4.4. Operador Spread

3.4.4.1. Operador que permite espalhar (do inglês, *spread*) os elementos de um objeto iterável, como um array ou uma string

3.4.4.2. Utiliza três pontos: **...iterableObject**

3.4.4.3. Pode ser usado para diferentes fins, como por exemplo:

3.4.4.3.1. Passar vários parâmetros de uma única vez

3.4.4.3.2. Clonar objetos iteráveis

3.4.4.3.3. Fazer manipulações sem afetar o objeto original

3.4.4.3.4. Transformar strings em arrays

3.4.4.4. Exemplo: let srt = "Olá, Mundo" let arr = [4, 2, 8, 3, 1] console.log(...str) // Separa as letras O l á , M u n d o console.log(...arr) // Separa os elementos 4 2 8 3 1

3.4.5. Parâmetros Rest

3.4.5.1. É uma técnica que permite a uma função receber qualquer número de parâmetros

3.4.5.2. Também permite manipular esses parâmetros como um array na definição da função (o que o diferencia do objeto *arguments* )

3.4.5.3. Exemplo: function sum(...numbers) { return numbers.reduce((accum, num) => accum + num, 0) }

3.4.6. Encadeamento Opcional

3.4.6.1. Operador que permite ler propriedades internas de uma cadeia de objetos sem que a validação de cada referência da cadeia seja realizada

3.4.6.2. Em outras palavras, permite acessar propriedades internas sem lançar erros quando uma propriedade é *nullish* (*null* ou *undefined* )

3.4.6.3. Funciona de forma similar ao encadeamento normal (operador **"."** ), porém é escrito com **"?."**

3.4.6.4. Exemplo:

3.4.6.4.1. const user = { name: "John Doe", email: "doejohn@email.com", friends: [{ name: "Mary", address: { street: "Some Street", number: 89 } }], age: 42, phone: { countryCode: "+55", ddd: "22", number: "998765432" } }

3.4.6.4.2. console.log(user.friends[0].phone.ddd) // lança erro *cannot read properties of undefined * console.log(user.friends[0].phone?.ddd) // não lança erro, dá curto-circuito no phone console.log(user.friends[1].address.street) // lança erro console.log(user.friends?.[1]?.address?.street) // não lança erro

3.4.7. Operador de Coalescência Nula

3.4.7.1. Operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é *null* ou *undefined*. Caso contrário, ele retorna o seu operando do lado esquerdo.

3.4.7.2. Utiliza dois pontos de interrogação **"??"**

3.4.7.3. Vale destacar que ele é diferente do operador lógico OU ("||"), que dá curto-circuito em expressões *falsy* (por exemplo, o número 0)

3.4.7.4. Pode ser usado para operações lógicas e também para atribuições de valores padrão através de *short-circuit evaluation* (avaliação de curto-circuito)

3.4.7.5. Exemplo: let a = 0 let c = a || 42 // c será 42 c = a ?? 42 // c será 0, pois 0 é *falsy*, mas não *nullish * c = null ?? 42 // c será 42

3.4.8. Exercício 14

3.4.8.1. De acordo com os conhecimentos aprendidos nesse módulo sobre recursos do javascript moderno, crie quatro funções que aceitem qualquer quantidade de parâmetros e utilizando a sintaxe de *arrow functions* para calcular as operações abaixo.

3.4.8.2. Essas funções devem mostrar o resultado de alguma forma em texto porém não é necessário implementar uma interface. Para testar a função você pode fazer chamadas manuais a ela no javascript ou utilizar o console do navegador (qualquer função incluída na página pode ser chamada diretamente no console).

3.4.8.3. Operações:

3.4.8.3.1. - **Média Aritmética Simples:** Pode ser calculada somando todos os valores e dividindo o total da soma pela quantidade de valores. Exemplo: ```jsx media(2, 6, 3, 7, 4) === 4.4 // porque 2 + 6 + 3 + 7 + 4 === 22 // e 22 / 5 === 4.4 ```

3.4.8.3.2. - **Média Aritmética Ponderada:** Semelhante à média aritmética simples, porém é possível atribuir um peso a cada valor informado, fazendo com que ele tenha um valor proporcionalmente diferente dos outros. Pode ser calculada somando as multiplicações dos valores pelos seus respectivos pesos e dividindo o total pela soma dos pesos. Exemplo: ```jsx // n -> número, p -> peso mediaPonderada({ n: 7, p: 2}, { n: 9, p: 5 }, { n: 3, p: 1 }) === 7.75 // porque (7 * 2) + (9 * 5) + (3 * 1) === 62 // e 62 / (2 + 5 + 1) === 7.75 ```

3.4.8.3.3. - **Mediana:** Pode ser calculada encontrando o valor central de uma sequência de números crescente ou decrescente. Caso existam dois números centrais, a mediana é calculada através da média aritmética simples desses dois números. Exemplo: ```jsx mediana(2, 4, 5, 7, 42, 99) === 6 // porque 5 e 7 estão juntos no centro da sequência e media(5, 7) === 6 mediana(15, 14, 8, 7, 3) === 8 // porque 8 está no centro da sequência ```

3.4.8.3.4. - **Moda:** Pode ser calculada encontrando o valor que mais se repete em um dado conjunto. Exemplo: ```jsx moda(1, 1, 5, 4, 9, 7, 4, 3, 5, 2, 4, 0, 4) === 4 // porque: // 4 aparece 4 vezes // 5 e 1 aparecem 2 vezes // 9, 7, 3, 2 e 0 aparecem 1 vez ```

3.5. Módulos

3.5.1. Introdução aos Módulos

3.5.1.1. Já vimos como incluir código javascript diretamente no html

3.5.1.1.1. Utilizando a tag **script**

3.5.1.1.2. Todo o conteúdo do arquivo é incluído diretamente na página simultaneamente

3.5.1.2. A medida que os sites evoluíram e as aplicações web começaram a surgir, o javascript foi sendo cada vez mais utilizado

3.5.1.3. Além disso, o uso do javascript fora dos navegadores também passou a ser não apenas possível, como muito popular

3.5.1.3.1. Node.js, tecnologia que permite interpretar código javascript fora do navegador, foi criado em 2009

3.5.1.4. Isso tudo contribuiu para o amadurecimento do javascript e a implementação de uma funcionalidade já existente em outras linguagens: **módulos**

3.5.1.5. O que são módulos?

3.5.1.5.1. Pense em capítulos de um livro, ou seções em um supermercado.

3.5.1.5.2. Autores organizam suas histórias em capítulos, supermercados, seus produtos em seções, e bons programadores organizam seu código em módulos.

3.5.1.5.3. Módulos são agrupamentos de códigos com funcionalidades distintas que podem ser compartilhados, adicionados ou removidos de nossos softwares

3.5.1.6. Por que utilizar módulos?

3.5.1.6.1. Manutenibilidade

3.5.1.6.2. Namespacing

3.5.1.6.3. Reusabilidade

3.5.1.7. Módulos no javascript

3.5.1.7.1. CommonJS

3.5.1.7.2. ES Modules

3.5.2. Exercício 15

3.5.2.1. Modularizando uma Aplicação

3.5.2.1.1. Para esse exercício você irá utilizar o código do projeto **Calc.js**, desenvolvido nas aulas Projeto Prático Guiado do módulo anterior, **Javascript II - DOM**. Você deverá modularizar o código javascript da aplicação, dividindo o conteúdo do arquivo index.js em diferentes módulos utilizando a sintaxe dos ES Modules. Seu projeto deve conter **pelo menos 3 módulos**.

3.5.2.1.2. Caso você não tenha os arquivos do projeto Calc.js você poderá baixá-los na aba de materiais dessa aula.

3.5.3. Conhecendo o npm

3.5.3.1. npm, ou *node package manager*, é um gerenciador de pacotes do Node.js

3.5.3.2. Obs.: Node.js é a ferramenta que permite executar o javascript fora do navegador

3.5.3.3. Por que o npm existe?

3.5.3.3.1. Os módulos que já vimos são muito úteis para organizar nossas aplicações, mas essa não é sua única vantagem

3.5.3.3.2. Com o npm programadores podem compartilhar seus módulos com outros programadores

3.5.3.3.3. O npm é um conjunto de ferramentas que permite **compartilhar** os módulos na internet, **baixar** módulos para nosso próprio projeto e **gerenciar** os módulos instalados no nosso projeto

3.5.3.3.4. Isso tudo aliado ao poder da comunidade *open-source* permite aumentar a nossa produtividade (princípio DRY, *Don't Repeat Yourself*)

3.5.3.4. O npm também pode ser visto como 3 recursos que trabalham juntos

3.5.3.4.1. 1º - Uma ferramenta de linha de comando para executar o npm

3.5.3.4.2. 2º - Um repositório online de pacotes, onde ficam hospedados os módulos que podemos baixar

3.5.3.4.3. 3º - O site https://npmjs.com onde podemos navegar pelos módulos existentes no repositório

3.5.4. Arquivos JSON

3.5.4.1. JSON, ou *JavaScript Object Notation*, é um **formato de arquivo** utilizado para troca de dados

3.5.4.2. É um formato compacto, representado em texto, de padrão aberto e que trabalha utilizando o sistema de chave-valor

3.5.4.3. Como o próprio nome diz, ele utiliza a mesma notação, ou seja, forma de se escrever o conteúdo, dos **objetos do javascript** (com alguns mínimos detalhes diferentes)

3.5.4.3.1. " " para nomear as chaves

3.5.4.3.2. Tipos primitivos suportados para valores (string, number, boolean e null)

3.5.4.3.3. { } para definir grupos de propriedades (objetos)

3.5.4.3.4. [ ] para definir listas de dados (arrays)

3.5.4.3.5. , para separar as propriedades

3.5.4.4. É muito utilizado para troca de dados entre diferentes sistemas e em arquivos de configuração no javascript

3.5.4.5. É amplamente utilizado na web e é suportado por várias linguagens além do javascript

3.5.4.6. Exemplos:

3.5.4.6.1. { "name": "Isaac Pontes", "job": "Fullstack Developer", "technologies": ["HTML", "CSS", "Javascript", "SQL"], "wroking": true, "yearsOfExperience": 7, "website": null }

3.5.4.6.2. Manipulando arquivos JSON no javascript: JSON.parse() *// converte uma string para objeto json-compatible * JSON.stringify() *// converte um objeto json-compatible para string *

3.5.5. Exercício 16

3.5.5.1. Datas com dayjs

3.5.5.1.1. Nesse exercício você irá treinar uma habilidade muito importante para qualquer programador, a capacidade de aprender a utilizar bibliotecas de terceiros.

3.5.5.1.2. Você deverá criar uma função javascript que recebe como parâmetro a data de nascimento de uma pessoa no formato string e mostre no terminal a idade dessa pessoa no dia atual, sua próxima data de aniversário no formato “DD/MM/AAAA” e quantos dias faltam para o próximo aniversário dela. Para isso, você deverá utilizar o módulo dayjs, disponível no npm.

3.5.5.1.3. Para aprender a utilizar o dayjs você deverá acessar o site do npm (https://www.npmjs.com/) e pesquisar por esse módulo. A página da dayjs no npm irá mostrar como utilizar essa biblioteca. Você também deve consultar a documentação do dayjs, disponível em https://day.js.org/.

3.5.5.1.4. Nessa aplicação você não utilizará o browser, você deverá utilizar o Node.js. Para executar seu arquivo com o Node.js basta acessar a pasta onde ele está localizado com o terminal e digitar o comando node seu_arquivo.js. Além disso, você deverá utilizar a sintaxe dos módulos CommonJS para trabalhar com o dayjs, ou seja, a função require().

3.5.5.1.5. Dica: Para resolver o exercício tente procurar pelos métodos de adicionar um intervalo de tempo a uma data (add), calcular a diferença entre uma data e outra (diff) e exibir uma data em um formato específico (format).

3.5.6. Conhecendo o Babel

3.5.6.1. "Babel é um Compilador JavaScript"

3.5.6.2. Como já vimos anteriormente, um compilador é uma ferramenta que permite converter o código escrito em uma linguagem para outra linguagem

3.5.6.3. O Babel é um conjunto de ferramentas que serve principalmente para converter código nas versões mais recentes do javascript para código de versões mais antigas, a fim de torná-lo compatível com plataformas que não suportam as versões mais novas

3.5.6.4. Alguns recursos do Babel:

3.5.6.4.1. Transformação da sintaxe

3.5.6.4.2. Polyfill de recursos não existentes no ambiente alvo

3.5.6.4.3. Transformação de código

3.5.6.4.4. E muito mais...

3.5.6.5. Mais informações sobre ele disponíveis em https://babeljs.io/

3.5.7. Conhecendo o Webpack

3.5.7.1. O que é webpack?

3.5.7.1.1. Empacotador de módulo estático

3.5.7.1.2. Seu objetivo é empacotar todos os módulos de uma aplicação a partir de um ou mais **pontos de entrada** em um ou mais ***bundles***, que são arquivos estáticos contendo tudo que aplicação precisa para funcionar

3.5.7.1.3. O webpack constrói um grafo de dependências para os pontos de entrada, o que permite saber exatamente quais módulos são necessários

3.5.7.1.4. https://webpack.js.org/

3.5.7.2. Peças chave do webpack:

3.5.7.2.1. Entry

3.5.7.2.2. Output

3.5.7.2.3. Loaders

3.5.7.2.4. Plugins

3.5.7.3. Por que usar o webpack?

3.5.7.3.1. Possibilidade de trabalhar com módulos de forma fácil, inclusive módulos CommonJS

3.5.7.3.2. Possibilidade de automatizar o gerenciamento dos módulos e dependências da aplicação

3.5.7.3.3. Empacotar os módulos em arquivos estáticos permite que eles sejam servidos na web de forma mais fácil e rápida

3.5.7.3.4. Webpack é uma das soluções mais utilizadas do mercado para gerenciamento de assets estáticos, sendo utilizado por grandes empresas e frameworks populares como Next.js, Vue.js, etc

3.5.8. Exercício 17

3.5.8.1. Estruturando um Projeto Moderno

3.5.8.1.1. Seu objetivo nesse exercício é preparar toda a estrutura necessária para trabalhar em um projeto front-end moderno unificando todo o conhecimento aprendido até o momento.

3.5.8.1.2. Você deverá criar um projeto npm e instalar nele o webpack e o babel, integrar o babel ao webpack utilizando o babel-loader (que pode ser instalado através do npm). Você também deverá integrar o css ao webpack, utilizando o style-loader e o css-loader (ambos podem ser instalados através do npm).

3.5.8.1.3. Para executar o webpack você deverá criar um script chamado “build”. Além disso, a saída do webpack deve ser nomeada de acordo com o nome do ponto de entrada no formato “[name].min.js” e o seu conteúdo deve estar minificado.

3.5.8.1.4. Por fim, você deve testar seu projeto criando uma página html simples que seja capaz de carregar a estilização e o javascript de saída do webpack corretamente.

3.6. Recapitulando o que aprendemos

3.6.1. Situação do javascript moderno

3.6.2. Novos recursos do javascript

3.6.2.1. Template Literals

3.6.2.2. Desestruturação

3.6.2.3. Módulos

3.6.2.4. E mais...

3.6.3. Gerenciamento de pacotes com npm

3.6.4. Compilação de javascript com Babel

3.6.5. Empacotamento (bundling)

4. Javascript IV - Programação Orientada a Objetos

4.1. Introdução ao Módulo

4.1.1. O que você irá aprender

4.1.1.1. O que é programação orientada a objetos

4.1.1.2. Fundamentos da POO

4.1.1.2.1. Associação

4.1.1.2.2. Encapsulamento

4.1.1.2.3. Herança

4.1.1.2.4. Polimorfismo

4.1.1.3. Como usar POO no javascript

4.1.1.3.1. Classes e instâncias

4.1.1.3.2. Construtores

4.1.1.3.3. Acessadores

4.1.1.3.4. E muito mais...

4.2. O que é Programação Orientada a Objetos

4.2.1. Um paradigma de programação, ou seja, um conjunto de conceitos e recursos de linguagem que **guiam a forma como programamos**

4.2.2. Tem como peça central os objetos e a **forma como eles se comunicam**

4.2.3. Os objetos podem conter dados **(atributos)** e código **(métodos)**

4.2.4. Outros dois termos importantes na POO são **classes** e **instâncias**

4.2.4.1. Classes são como fábricas de objetos a partir de uma "fôrma"

4.2.4.2. Instâncias são os objetos fabricados pelas classes

4.3. Exercício 18

4.3.1. Treinando a Criação de Classes

4.3.1.1. Crie, em arquivos separados, as seguintes classes utilizando javascript:

4.3.1.1.1. - **User**, que deverá possuir: - um atributo **fullname**, atribuível na instanciação - um atributo **email**, atribuível na instanciação - um atributo **password**, atribuível na instanciação - um método login, que tem como parâmetros um email e uma senha e deve comparar esses parâmetros com o email e a senha do usuário e mostrar uma mensagem no console dizendo se o login foi bem sucedido ou não

4.3.1.1.2. - **Product**, que deverá possuir: - um atributo **name**, atribuível na instanciação - um atributo **description**, atribuível na instanciação - um atributo **price**, atribuível na instanciação - um atributo **inStock**, inicializado sempre em 0 - um método **addToStock**, que tem como parâmetro a quantidade a ser adicionada em estoque e deve somar essa quantidade à variável inStock - um método **calculateDiscount**, que tem como parâmetro a percentagem de desconto a ser aplicada e retorne o valor do preço com o desconto aplicado

4.4. Associação

4.4.1. Uma associação é um relacionamento entre classes que permite que uma instância de uma classe faça a outra realizar uma ação

4.4.2. É como dizer para a aplicação que um objeto de um tipo está conectado, ou depende, de um objeto de outro tipo

4.4.3. Exemplos:

4.4.3.1. Objetos de uma classe Person possuem um atributo que é um objeto da classe Address

4.4.3.2. Objetos de uma classe Product possuem um atributo que é um array de objetos da classe Category

4.5. Exercício 19

4.5.1. Simulando um Blog com Classes

4.5.1.1. Crie uma aplicação javascript que simule um funcionamento básico de blog utilizando classes e associações.

4.5.1.2. Você deverá criar uma classe Post e uma classe Comment, onde uma instância de Post poderá receber vários comentários. As instâncias de Post também devem ter um método específico para adição de comentários nelas.

4.5.1.3. Você também deverá criar uma classe Author, e os objetos da classe Post também devem possuir um objeto da classe Author, que é o autor do post. Além disso, os objetos da classe Author também devem possuir um array de posts (objetos da classe Post) e um método específico para criação de posts, que deverá criar uma instância utilizando aquele próprio autor, incluir o post no array e então retornar o post criado.

4.6. Encapsulamento

4.6.1. Encapsulamento é o princípio de impedir que determinadas partes de uma classe sejam acessíveis pelo contexto exterior

4.6.2. No Javascript existem 2 níveis de encapsulamento

4.6.2.1. Público: onde o atributo/método é acessível fora da classe (nível padrão)

4.6.2.2. Privado: onde o atributo/método só é acessível dentro da própria classe

4.6.3. Para definirmos um atributo ou método como privado utilizamos um # no começo do seu nome

4.6.4. Todo atributo ou método que não for privado será automaticamente público

4.6.5. Exemplos:

4.6.5.1. Uma classe tem um atributo que é definido uma vez durante a construção mas depois não pode ser alterado diretamente (usando *obj.atributo = "novo valor" *)

4.6.5.2. Uma classe possui um método principal que internamente chama vários outros métodos da própria classe que não fazem sentido individualmente

4.7. Herança

4.7.1. Herança é um recurso que permite criar classes que incluem, ou "herdam" para ser mais preciso, todos os atributos e métodos de uma outra classe

4.7.2. À classe que é herdada damos o nome de **superclass** (ou classe mãe), e à classe que herda, o nome de **subclass** (ou classe filha)

4.7.3. Uma classe filha possui todos os atributos e métodos da classe mãe, mas também pode possuir os seus próprios (que serão exclusivos dela)

4.7.4. Exemplos:

4.7.4.1. Imagine uma classe User que possui seus atributos e métodos. Poderíamos ter classes AdminUser, EditorUser e StandardUser que são todas filhas de User, mas cada uma também possui seus próprios atributos e métodos

4.7.4.2. Ou ainda uma classe Property (como em um imóvel) pode ser a classe mãe das classes filhas House e Apartment

4.8. Exercício 20

4.8.1. Classes para o DOM

4.8.1.1. Crie um conjunto de classes em javascript para auxiliar na interação com o DOM.

4.8.1.2. Você deverá criar, no mínimo, 4 classes diferentes:

4.8.1.2.1. Uma classe para um elemento genérico do DOM (dica: utilize o nome **Component**, pois o nome Element poderá gerar conflitos com a implementação do navegador). - Essa classe deverá possuir um atributo privado para armazenar a referência ao elemento do DOM e um método de acesso para ler o valor desse atributo. - Ela também deve possuir um método *build* para criar o elemento que deve ser chamado uma vez no construtor, mas também deve ser possível chamá-lo novamente através da instância. - Ela também deve possuir um método *render* para adicionar o elemento na página que poderá ser chamado pela instância a qualquer momento.

4.8.1.2.2. Uma classe específica para elementos input, que deve ser uma subclasse da classe Component.

4.8.1.2.3. Uma classe específica para elementos label, que deve ser uma subclasse da classe Component e no seu construtor deve ser possível indicar como primeiro parâmetro qual será o seu conteúdo em texto.

4.8.1.2.4. Uma classe específica para elementos form, que deve ser uma subclasse da classe Component e possuir um método para adicionar elementos como filhos (através das instâncias das classes Component e suas subclasses).

4.9. Polimorfismo

4.9.1. Polimorfismo é o conceito que descreve o ato de um objeto poder assumir diferentes formas

4.9.2. Na POO, isso pode ser percebido na **sobrescrita de métodos**

4.9.3. No javascript, uma classe filha pode ter suas próprias implementações dos métodos da classe mãe. A isso damos o nome de **sobrescrita de métodos**.

4.9.4. Exemplo:

4.9.4.1. A classe Vehicle possui alguns atributos e um método *move() *

4.9.4.2. As classes Bike, Car, Ship e Plane todas são filhas de Vehicle, porém cada uma delas implementa o método *move()* de uma forma diferente (sobrescrevendo o método)

4.10. Exercício 21

4.10.1. Personagens para Jogo

4.10.1.1. Crie as seguintes classes utilizando javascript:

4.10.1.1.1. - Uma classe **Character** que representa um personagem de um jogo.

4.10.1.1.2. - Uma classe **Thief** que representa um personagem de um tipo diferente.

4.10.1.1.3. - Uma class **Mage** que representa outro tipo de personagem e também herda de Character.

4.10.1.1.4. - Uma classe **Warrior** que representa outro tipo de personagem e também herda de Character.

4.11. Acessadores: get e set

4.11.1. Os acessadores são um recurso para definir a forma como acessamos uma propriedade de um objeto

4.11.1.1. pessoa.nome

4.11.1.2. pessoa.nome = "Lucas"

4.11.2. Com o acessador **get** podemos modificar a forma como uma propriedade é lida

4.11.3. Com o acessador **set** podemos modificar a forma como uma propriedade é alterada via atribuição.

4.11.4. Também conhecidos como *getters * e *setters *

4.11.5. Exemplos:

4.11.5.1. Uma classe possui uma propriedade que necessita de uma verificação antes de ter o seu valor modificado

4.11.5.2. Uma classe possui uma propriedade privada que necessita de uma acessador público somente para leitura

4.12. Atributos e Métodos Estáticos

4.12.1. São atributos e métodos definidos em uma classe que não dependem de uma instância para serem utilizados

4.12.2. São acessados diretamente pela classe ao invés de por uma instância

4.12.3. Exemplos:

4.12.3.1. Uma classe precisa definir um atributo que seja global, ou seja, que tenho o mesmo valor para todas as instâncias

4.12.3.2. Uma classe de modelo para uma tabela no banco de dados onde os métodos devem estar disponíveis mesmo que nenhuma instância tenha sido carregada ainda

4.13. Exercício 22

4.13.1. Classes para um Banco Digital

4.13.1.1. Você deverá construir uma aplicação em javascript que simula o funcionamento de um banco, com as funcionalidades de depósito, transferência e empréstimos em uma conta bancária. Para isso, crie as seguintes classes:

4.13.1.1.1. - Deposit:

4.13.1.1.2. - Transfer:

4.13.1.1.3. - Loan:

4.13.1.1.4. - Installment:

4.13.1.1.5. - Account:

4.13.1.1.6. - User:

4.13.1.1.7. - App:

4.14. Recapitulando

4.14.1. O que é programação orientada a objetos

4.14.2. Fundamentos da POO

4.14.3. Como usar POO no javascript

4.14.3.1. Classes

4.14.3.2. Instâncias

4.14.3.3. Construtores

4.14.3.4. Atributos

4.14.3.5. Métodos

4.14.4. Associação

4.14.5. Encapsulamento e Abstração

4.14.6. Herança

4.14.7. Polimorfismo

4.14.8. Getters e setters

4.14.9. Atributos e métodos estáticos

4.14.10. Projetos práticos e exercícios

4.14.10.1. JS Bookstore

4.14.10.2. Banco Digital

5. Javascript V - Tópicos Avançados

5.1. Introdução ao Módulo

5.1.1. O que você irá aprender

5.1.1.1. Tratamento de Erros

5.1.1.2. Expressões Regulares

5.1.1.3. Programação Assíncrona

5.1.1.4. Promises

5.1.1.5. Requisições HTTP

5.2. Exercício 23

5.2.1. Validador de Email e Senha

5.2.1.1. Construa uma página HTML contendo um formulário de registro com os campos nome, email e senha onde, ao submeter o formulário, deverá ser feita uma validação para verificar se o email é um email válido e se a senha atende as regras mínimas de seguraça.

5.2.1.2. Para que um email seja válido ele deve possuir:

5.2.1.2.1. - Um caractere @

5.2.1.2.2. - Texto antes do @ com pelo menos 2 caracteres, números ou _ (underscore).

5.2.1.2.3. - Texto após o @ com pelo menos 2 caracteres

5.2.1.2.4. - Um . seguido de mais texto com pelo menos 2 caracteres após o texto após o @

5.2.1.2.5. - Estrutura de um email válido: **xx@xx.xx **

5.2.1.3. Para que uma senha seja válida ela deve possuir:

5.2.1.3.1. - Pelo menos uma letra minúscula.

5.2.1.3.2. - Pelo menos uma letra maiúscula.

5.2.1.3.3. - Pelo menos um número

5.2.1.3.4. - Pelo menos um caractere especial.

5.2.1.3.5. - Pelo menos 8 caracteres.

5.2.1.4. As validação devem ser escritas em funções separadas que lançam um novo erro em caso de falha com uma mensagem apropriada. Esse erro deverá ser tratado através de um bloco trycatch, evitando que um erro seja emitido no console do navegador e mostrando para o usuário o erro ocorrido.

5.3. Exercício 24

5.3.1. Escreva uma função assíncrona que têm como parâmetros o peso e a altura de uma pessoa e retorna uma promise do IMC dessa pessoa. Além disso, caso algum dos parâmetros não seja do tipo “number” a promise deverá ser rejeitada.

5.3.2. Você deverá criar também uma outra função que recebe os mesmos parâmetros de peso e altura, chama a função que calcula o IMC e então exibe no terminal o resultado das promises em texto. Caso a promise seja resolvida você também deverá mostrar no terminal a situação do IMC da pessoa de acordo com a seguinte tabela:

5.3.3. - Abaixo de 18,5: **magreza**

5.3.4. - Entre 18,5 e 24,9: **normal**

5.3.5. - Entre 25 e 29,9: **sobrepeso**

5.3.6. - Entre 30 e 39,9: **obesidade**

5.3.7. - Acima de 40: **obesidade grave**

5.3.8. Dentro da segunda função, após chamar a função que calcula o IMC, chame a função log do console com uma mensagem qualquer para evidenciar o funcionamento assíncrono do código.

5.4. Exercício 25

5.4.1. Refatorando as Promises

5.4.1.1. Reescreva o código do exercício 24 utilizando funções async, await e fazendo as devidas adaptações no código.

5.5. Revisão: Comunicação na Web com HTTP

5.5.1. Protocolo de comunicação

5.5.2. Arquitetura cliente-servidor

5.5.2.1. Cliente (geralmente um navegador web) envia **requisições** a um servidor

5.5.2.2. Servidor (geralmente uma máquina acessível pela internet) recebe a requisição, a processa e envia de volta uma **resposta** para o cliente

5.5.3. Características do HTTP

5.5.3.1. Simples, fácil de entender e utilizar

5.5.3.2. Extensível, permite adicionar novas funcionalidades facilmente

5.5.3.3. *Stateless*, ou sem estado (mas com sessão)

5.5.4. Estrutura das mensagens

5.5.4.1. Requisições

5.5.4.1.1. Estrutura básica

5.5.4.1.2. Método

5.5.4.1.3. Caminho

5.5.4.1.4. Versão

5.5.4.1.5. Cabeçalho

5.5.4.1.6. Corpo

5.5.4.2. Respostas

5.5.4.2.1. Estrutura básica

5.5.4.2.2. Código e mensagem de status

5.5.4.2.3. Versão

5.5.4.2.4. Cabeçalho

5.5.4.2.5. Corpo

5.5.5. Exemplos

5.5.5.1. Quando digitamos um endereço de um site no navegador estamos enviando uma requisição que receberá a resposta com um documento HTML

5.5.5.2. Quando solicitamos informações a uma API Restfull enviamos uma requisição que receberá uma resposta contendo um documento JSON

5.6. Conhecendo as APIs Restfull

5.6.1. O que é uma API

5.6.1.1. *Application Programming Interface* , ou Interface de Programação de Aplicações

5.6.1.2. Se refere ao conjunto de definições e protocolos pelo qual conseguimos programar nossas aplicações

5.6.1.3. É um conceito já existente há muito tempo na programação, mas hoje é utilizado muito para se referir aos serviços de backend na web

5.6.1.4. Exemplos

5.6.1.4.1. O DOM que aprendemos é uma forma de API, nos ajudando a interagir com os elementos do documento

5.6.1.4.2. Quando usamos uma biblioteca ou framework podemos dizer que ele tem suas próprias APIs, ou seja, as formas específicas como os usamos para programar as aplicações

5.6.1.4.3. APIs Rest nos fornecem padrões para criar formas de se comunicar com um servidor

5.6.2. O que é Rest e Restfull

5.6.2.1. Rest significa *Respresentational State Transfer,* ou Transferência de Estado Representacional

5.6.2.2. É um conjunto de restrições de arquitetura que visa organizar a comunicação entre cliente e servidor

5.6.2.3. Uma API Restful nada mais é do que uma API que segue a arquitetura Rest

5.6.2.4. Quando um cliente faz uma requisição usando uma API Restful ela responde transferindo uma representação do estado do recurso que foi requisitado

5.6.2.5. Principais pontos para que uma API seja considerada Restful

5.6.2.5.1. Arquitetura cliente/servidor

5.6.2.5.2. Comunicação através de HTTP

5.6.2.5.3. Comunicação *stateless*, ou seja, todas as solicitações são separadas e independentes

5.6.2.5.4. Ter uma interface uniforme e com informações em formato padronizado

5.6.2.6. Como as APIs Restful funcionam sobre o protocolo HTTP, elas usam os seus métodos para a comunicação

5.6.2.6.1. GET - obter informações

5.6.2.6.2. POST - enviar informações

5.6.2.6.3. PUT/PATCH - solicitar a atualização/correção de informações

5.6.2.6.4. DELETE - solicitar a exclusão de informações

5.7. Exercício Final

5.7.1. Finanças Pessoais

5.7.1.1. Desenvolva uma aplicação web de página única utilizando html, css e javascript para controle de finanças pessoais que atenda aos seguintes requisitos:

5.7.1.1.1. - sua aplicação deverá utilizar a biblioteca json-server para simular um backend que armazena transações financeiras.

5.7.1.1.2. - transações devem possuir, pelo menos, as propriedades id (gerenciado pelo json-server), nome e valor.

5.7.1.1.3. - a aplicação deverá mostrar na página todas as transações salvas no backend.

5.7.1.1.4. - a aplicação deverá ter um formulário para criar uma nova transação no backend (sem atualizar a página) através de uma requisição POST.

5.7.1.1.5. - novas transações criadas devem aparecer na lista de todas as transações assim que são criadas, tudo isso sem atualizar a página.

5.7.1.1.6. - a aplicação deverá permitir editar os dados de uma transação através de uma requisição PUT (o PUT funciona da mesma forma que o POST, enviando dados a serem atualizados no body e com o id do recurso a ser editado na url).

5.7.1.1.7. - a aplicação deverá permitir excluir uma transação através de uma requisição DELETE (as requisições DELETE não precisam de um body, apenas do id do recurso a ser excluído na url).

5.7.1.1.8. - a aplicação também deverá mostrar na página o saldo total, que é calculado somando todos os valores das transações (que podem ser positivos ou negativos).

5.7.1.1.9. - o valor do saldo total deve estar sempre atualizado na tela, ou seja, ao criar, editar ou excluir uma transação o saldo deverá refletir o novo valor.

5.8. Encerramento

5.8.1. O que você aprendeu neste módulo

5.8.1.1. Tratamento de Erros

5.8.1.2. Expressões Regulares

5.8.1.3. Programação Assíncrona

5.8.1.4. Promises

5.8.1.5. Requisições HTTP

5.8.2. Próximos passos

5.8.2.1. Git para versionamento de código

5.8.2.2. Sass e Bootstrap para dar superpoderes ao CSS

5.8.2.3. React para criação de interfaces modernas

5.8.2.4. Node para aplicações javascript no backend

5.8.2.5. Bancos de dados para armazenar informações no backend

5.8.2.6. Typescript para expandir os recursos do javascript