Curso Grátis de JavaScript e ECMAScript para Iniciantes

Page 1

Módulo A - Conhecendo o JavaScript

O que o JavaScript é capaz de fazer? - #01

CLIENT X SERVER NA WEB:

Os clientes são dispositivos que buscam por dados, eles por meio dos navegadores fazem requisições, pedidos por meio de urls que por meio da infraestrutura da internet localizam servidores, máquinas que conterão os documentos e arquivos para enviar os dados, na web, no caso de um site, documentos html que chegarão ao cliente e que os navegadores deverão mostrar de forma visual um site. JavaScript surgiu e tem sua maior utilidade como tecnologia Client Side, mas também é utilizado em servidores.

WEBSITE CLIENT

Do lado dos clientes, os websites serão formados por 3 peças / tecnologias: que serão responsáveis por: CONTEÚDO, APRESENTAÇÃO VISUAL (ESTILO) e INTERAÇÕES que respectivamente são representados por HTML, CSS, JavaScript.

JavaScript: como chegamos até aqui? - #02

A internet surgiu a partir de um meio de comunicar os computadores de bases militares e proteger os dados neles contidos durante a Guerra Fria. A World Wide Web ( WWW ) surgiu em 1993, e junto com HTML e HTTP. Um dos primeiros navegadores desenvolvidos foi Netscape. Em 1995 a Netscape estava trabalhando em uma linguagem para dinamizar o HTML e como outra chamada Java estava sendo declarada como a linguagem do futuro, a Netsacpe batizou a sua de JavaScript como jogada de marketing com o nome em alta. Após a Microsoft lançar seu novo navegador (Internet Explorer) e precisar de uma linguagem, esses utilizaram a grande base do JavaScript criaram o JScript. Para uma confusão não se iniciar, a Netscape juntou-se com uma empresa de padronização europeia, a ECMA, e criou a versão padronizada do JavaScript, o ECMAScript. Em 2002, depois de muito tempo de briga entre Microsoft e Netscape, a Netscape faliu e seus desenvolvedores fizeram a fundação Mozilla, que mais tarde criou o Mozilla Firefox, seu próprio navegador. Em 2008, a Google criou seu navegador Google Chrome que possuia um forte motor de JavaScript, o V8. Esse era um motor fortíssimo e de Código Aberto, o que serviu de incentivo para a iniciativa Node.js pegar e expandir o JavaScript de sua função inicial ( Rodar nos Navegadores Clients ), e tornou JavaScript utilizável nos servidores.

Dando os primeiros passos - #03

Bibliografia de JavaScript:

JavaScript - O Guia Definitivo

JavaScript - Guia do Programador ( https://books.google.com.br/books/about/JavaScript_Guia_do_Programador.html?id=BB9WDQAAQBAJ&printsec=frontcover&source=kp_read_button&redir_esc=y#v=onepage&q&f=false )

Referências para desenvolvedores web Mozilla ( https://developer.mozilla.org/pt-BR/docs/Web/Reference )

Referência ECMAScript ( http://ecma-international.org/publications/standards/Ecma-262-arch.htm ).

Requisitos de Software para aprender e seguir o curso de JavaScript:

Navegador ( Google Chrome por exemplo )

Editor de Código adaptado para JavaScript ( Visual Code Studio por exemplo )

NodeJs e Npm

Criando o seu primeiro script - #04

- Para criar seus arquivos JavaScript de navegador é necessário conhecer o funcionamento básico de HTML5 e CSS3 como o conhemento de tags, criação de arquivo, semântica, etc.

Anotações Curso de HTML5 e CSS3: https://www.sendspace.com/file/hjscwy

Alguns comandos da aula para o JavaScript na tag script do arquivo html:

window.alert('Mensagem') = Mostrar um alerta com a mensagem na tela, com mensagem e opção Ok

window.confirm('Mensagem') = Mostrar uma mensagem ( pergunta ) e pedir confirmação por Ok ou Cancelar

window.prompt('Mensagem') = Mostrar a mensagem / pergunta e direcionar um campo de digitação para o usuário

Page 2

Módulo B - Comandos Básicos do JavaScript

Variáveis e Tipos Primitivos - #05

Comentários:

Para criar comentários em JavaScript, será usado // na frente do comentário, isso para apenas uma linha, ou utilize /* no início e */ no final para englobar em comentário várias linhas.

Variáveis:

As variáveis são espaços de memória para guardar determinados dados. Seu funcionamento se assemelha à um exemplo da vida real: um estacionamento: há um terreno e o terreno precisa ser organizado, logo se dividem espaços que serão as vagas. As vagas terão uma nomenclatura como A1, C2, M3, ou qualquer nome/número. Assim você guardará os carros em cada vaga e podera tirá-los para colocar outros, ou a vaga pode estar vazia.

Aplicando o exemplos para o mundo da programação e dos computadores, podemos classificar o nosso terreno como a memória. Dentro da memória, você terá os espaços/vagas que serão as variáveis, usadas para organização. Cada vaga terá a sua nomenclatura, seu nome, que será o identificador no caso da variável. Na ideia de colocar os carros nas vagas, também faremos atribuição de dados nas variáveis. Uma vaga vazia é como uma variável nula.

Na prática, dentro do JavaScript uma variável será declarada da seguinte forma:

var n1 = 9

O var é a forma de declarar a variável, o n1, é o identificador, o = chamado de recebe ( quando um só igual é digitado "=" ) e o 9 do exemplo é o dado que queremos armazenar.

Sobre identificadores em JavaScript:

- Podem começar com letras, $ ou _

- Não podem começar com números

- É possível usar letras ou números

- É possível usar acentos e símbolos

- Não podem conter espaços

- Não podem ser palavras reservadas da linguagem.

Tipos primitivos:

Os dados guardados nas variáveis podem ser de vários tipos, e esse é um exemplo de utilização dos tipos primitivos, que são tipos de informações. Os 3 principais tipos primitivos em JavaScript são:

Number ( números )

String ( textos e cadeias de caracteres )

Boolean ( verdadeiro e falso )

Number serão os números em geral, que podem ser inteiros e reais ou float que são números com casas decimais. Exemplos: 9 ; 3 ; -56 ; 0.01 ; 3;14 ; -7;2 ; 8.0 .

String serão textos ou letras/caracteres, eles sempre estarão entre aspas simples ( ' ' ) ou duplas ( " " ) ou crase ( ` ` ). Exemplos: 'Maria' ; "Olá, mundo!" ; `Javascript`.

Boolean é um tipo de dado binário, que representa Sim ou Não ; Verdadeiro ou Falso ; 0 ou 1. Eles serão escritos como True ( verdadeiro ) ou False ( falso ).

Além dos tipos primitivos principais existem outras classificações como:

Infinity ( interno de number )

NaN ( interno de number )

null ( interno de object )

undefined

object

Array ( interno de object )

function

Para identificar o tipo primitivo de uma variável ou um dado por si só, em JavaScript há o comando typeof, chamando esse método ele retornará o tipo primitivo.

Exemplo:

> var n1 = 8

> typeof n1

'number'

> var n1 = "9"

> typeof n1

'string'

> typeof undefined

'undefined'

Além disso, em JS você pode trocar os dados das variáveis por tipos primitivos diferentes sem fazer conversão manual, pois quando você define uma variável, com o var, a linguagem trata sempre como variável ignorando o tipo primitivo em definições, diferentemente de algumas outras linguagens.

Tratamento de Dados - #06

Comentários em CSS e em HTML:

Para comentar em CSS usarei a sintaxe: /* COMENTÁRIO */

Para comentar em HTML5 usarei a sintaxe: <!---Comentário-->

O comando window.prompt('') é um comando que retorna um dado, no caso o que foi digitado pelo usuário. Por isso, é possível atribuir uma variável para guardar o resultado do comando.

Exemplo: var nome = window.prompt('Qual seu nome?')

Agora, o dado retornado pelowindow.prompt ficará armazenado na variável de identificador nome, e assim, poderá ser utilizado por outros comandos, como o window.alert, colocando-o no local do texto que quero alertar.

Exemplo: window.alert(nome)

Além disso, é possível inserir texto e variáveis dentro do alerta de window.alert fazendo uma concatenação, que em JavaScript se faz com o sinal + entre os elementos que quero concatenar.

Exemplos: window.alert('É um prazer conhecer você, ' + nome + '!')​​​​​​​

O sinal + pode ser usado para algumas operações, como a adição e a concantenação, nesse caso temos que:

( number + number ), o + agirá em adição.

( string + string ), o + agirá em concantenação.

Por isso, quando fazemos esse código:

var n1 = window.prompt('Digite um número:')

var n2 = window.prompt('Digite outro número:')

var s = n1 + n2

window.alert('A soma dos números digitados resulta em' + s)

O resultado não sairá como esperado, já que a variável s não fará adição entre n1 e n2, e sim uma concatenação, já que por padrão o comando window.prompt retorna strings e não numbers.

Para resolver isso, será necessária uma conversão entre tipos primitivos.

Conversões

String --> Number

Para fazer uma conversão de um elemento string para um elemento number, pode-se usar os comandos

Number.parseInt(elemento) para converter para um número de tipo específico Int ( inteiro )

Exemplo:

var n1 = Number.parseInt(window.prompt('Digite um número:'))

var n2 = Number.parseInt(window.prompt('Digite outro número:'))

var s = n1 + n2

window.alert('A soma dos números digitados resulta em ' + s)

Number.parseFloat(elemento) para converter para um número de tipo específico Float ( real )

Exemplo:

var n1 = Number.parseFloat(window.prompt('Digite um número:'))

var n2 = Number.parseFloat(window.prompt('Digite outro número:'))

var s = n1 + n2

window.alert('A soma dos números digitados resulta em ' + s)

Number(elemento) para converter para um número, nesse comando o JS fará a conversão de modo inteligente e adaptativo de acordo com o dado recebido pelo usuário.

Exemplo:

var n1 = Number(window.prompt('Digite um número:'))

var n2 = Number(window.prompt('Digite outro número:'))

var s = n1 + n2

window.alert('A soma dos números digitados resulta em ' + s)

A conversão também pode ser feita na variável ao utiliza-la e não em sua declaração, como no exemplo abaixo:

var n1 = window.prompt('Digite um número:')

var n2 = window.prompt('Digite outro número:')

var s = Number(n1) + Number(n2)

Conversões

Number --> String

Para fazer uma conversão para strings, pode-se usar dois comandos:

String(elemento)

elemento.toString()

Formatação de Strings

Para a formação de novas strings com variáveis, além da concatenação, é possível utilizar a interpolação com template strings. Nesse caso, a string formada ficará entre crases ( `` ) e terá um placeholder, um local para introduzir uma variável que na string terá escrita seu próprio valor. Para a criação do placeholder, dentro de crases, utilize um cifrão seguido de chaves ( ${variável} ).

Exemplo: `O aluno ${nome} de ${idade} anos , tirou a nota de ${nota}`

As strings podem receber alguns comandos como métodos e atributos que as trasnformam, por exemplo:

variavel.length --> retorna o número de caracteres da string, seu tamanho

variavel.toUpperCase() --> tranforma todos os caracteres da string em maiúsculo

variavel.toLowerCase() --> tranforma todos os caracteres da string em minúsculo

há um comando para escrever mensagens e textos na tela, no corpo do site e não em alertas, é o document.write(), nele você pode inserir strings e tags html para aparecer no corpo de seu site, é um comando JavaScript.

Também é possível fazer a formatação de numbers, com os comandos de variável.toFixed(casas) para definir um número fixo de casas decimais para variável que porta um number. Ou o variável.toFixed(casas).replace('.', ',') para trocar o ponto flutuante do número por vírgula.

Ou fazer uma formatação de número em uma string localizada, padronizada.

Exemplo: variável.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})

Nesse comando, de string localizada, é buscada uma string padrão em português do Brasil com um estilo monetário da moeda Real Brasileira. Serve para formatar um número em reais.

Operadores do JS (Parte 1) - #07

Dentro do ramo de operadores no JavaScript, exitem diversos. Nessa Parte 1, serão abordados os operadores aritméticos e os de atribuição.

Operadores Aritméticos

Os operadores aritméticos são os operadores usados para fazer operações matemáticas com números, abaixo vai uma tabela com os operadores, suas operações e seus exemplos com operandos.

[ + ] Operador da Adição, exemplo: 5 + 2 -> 7

[ - ] Operador da Subtração, exemplo: 5 - 2 -> 3

[ * ] Operador da Multiplicação, exemplo: 5 * 2 -> 10

[ / ] Operador da Divisão, exemplo: 5 / 2 -> 2.5

[ % ] Operador de Resto de Divisão Inteira, exemplo: 5 % 2 -> 1

[ ** ] Operador da Potenciação, exemplo: 5 ** 2 -> 25

Os operadores aritméticos possuem uma ordem de precedência, quando uma "conta" é digitada com mais de uma operação, alguns operandos serão operados primeiro do que os outros, pois existem preferência, maior importância para alguns operadores, assim como na matemática.

Essa ordem é:

1º: () O que está dentro de parênteses

2º: ** As potências

3º: * / % As multiplicações, divisões e resto de divisões inteiras

4º: + - As adições e subtrações

OBS: Quando operações de mesma ordem de precedência estiverem em uma mesma "conta", haverá precedência da esquerda para a direita.

Operadores de Atribuição

As atribuições simples são as atribuições com um operador de [ = ] que é chamado de recebe e é usado por exemplo na declaração de variáveis simples.

Exemplo: var conta = 9 + 2 / 2

As Auto-atribuições vão ser atribuições com o operador de [ = ] que ocorrem quando se substitui o valor de uma variável, define-o novamente, que pode ser feito de maneira "clássica" com um [ = ] ou simplificado com outros operadores.

Maneira "clássica": conta = conta + 3

Maneira "simplificada": conta += 3

A maneira simplificada pode ser feita com qualquer operador aritmético quando se tratar de uma auto-atribuição, ou seja, com a mesma variável. Os operadores de auto-atribuição simplificados são então: +=, -=, +=, /=, **=, %=.

Ainda há uma forma mais simplificada dos operadores de auto-atribuição quando é feito com a variável e o número 1. É o operador de incremento. Ou seja, para simplificar n += 1 ou x -=1 por exemplo, pode ser feito n++ e x--.

Exemplo:

> var num = 9

undefined

> num++

9

> num

10

Pode ser usado o pós-incremento como no exemplo, em que só será adcionado 1 na próxima chamada da variável, ou o pré-incremento que o número já aparece antes. Ele é feito com o operador antes da variável. Exemplo: --n e ++x

Exemplo:

> var n1 = 99

undefined

> ++n1

100

Operadores do JS (Parte 2) - #08

Nessa Parte 2, agora serão adcionados ao conteúdo, os operadores relacionais, lógicos e o operador ternário.

Operadores Relacionais

Os operadores relacionais são operadores utilizados para responderem à relações entre valores, a resposta dessas "operações" serão valores booleanos, True e False. As relações são basicamente de comparação entre os valores, abaixo vai uma tabela com os operadores, suas operações e seus exemplos com operandos, além das respostas booleanas.

[ > ] Operador de Maior, exemplo: 5 > 2 : True ( 5 é maior que 2 )

[ < ] Operador de Menor, exemplo: 7 < 4 : False ( 7 não é menor que 4 )

[ >= ] Operador de Maior ou Igual, exemplo: 8 >= 8 : True ( 8 é maior ou igual a 8 )

[ <= ] Operador de Menor ou Igual, exemplo: 9 <= 7 : False ( 9 não é menor nem igual a 7 )

[ == ] Operador de Igualdade, exemplo: 5 == 5 : True ( 5 é igual a 5 )

[ != ] Operador de Desigualdade, exemplo: 4 != 4 : False ( 4 não é diferente de 4 )

Lembrando que em operações que haja operadores relacionais e operadores aritméticos, serão feitas primeiro as operações aritméticas.

Relacionado ao Operador de Igualdade existe uma situação, que se relaciona aos valores e não aos tipos primitivos dos itens relacionados, então, em uma operação de 5 == '5', apesar de 5 e '5' não serem de mesmo tipo primitivo, sendo 5 de number e '5' de string, eles assumem o mesmo valor e são considerados iguais, sendo assim o resultado seria true.

Para então relacionar a identidade dos itens, analisando seus tipos primitivos, há um Operador de Identidade, que faz a relação se 2 operandos são idênticos, ou seja, de mesmo valor e mesmo tipo primitivo. Esse operador é representado por [ === ].

Exemplo: 5 === 5 : true

5 === '5': false

Ainda há o operador de desigualdade restrita ou o não idêntico, assim se usar o [ !== ] ele analisará se os itens não são idênticos, ou seja, ignorando o valor interno e olhando o tipo primitivo.

Operadores Lógicos

Os operadores lógicos fazem operações com operandos que representarão True ou False e depois haverá um resultado de True ou False também, eles imprimem condições lógicas. Os 3 são: negação, conjunção e disjunção.

[ ! ] Operador de Negação: Ele possui apenas um operando depois do sinal de !, ou seja, é um operador unário. Ele representa o não. Quando o operando representa algo inexistente ou falso, o resultado da operação de negação é Verdadeira ou True. Já, caso o operando representa algo existente ou verdadeiro o resultado da operação será Falso ou False.

Exemplo: ! True: False

! False: True

Isso pode ser explicado como, não quero uma caneta azul, ou seja ! 'azul', se azul for a cor da caneta a minha negação vai ser False, e se vermelha for a cor da caneta a negação dará True, já que não é azul.

[ && ] Operador de Conjunção: É um operador binário, com dois operandos. Ele representa um "e" lógico. Para a operação lógica ser verdadeira, é necessário que meus dois operandos sejam existentes ou verdadeiros. Logicamente falando, precisa-se de dois elementos, exemplo: Eu quero uma caneta azul e(&&) uma caneta vermelha.

true && true : true

true && false : false

false && true : false

false && false : false

[ || ] Operador de Disjunção: É outro operador binário, ele representa um "ou" lógico. Para o resultado lógico ser verdadeiro eu necessito de apenas um operando com valor lógico existente/verdadeiro. Logicamente falando, precisa-se de um elemento ou outro. exemplo: Eu quero uma caneta vermelha ou(||) uma caneta azul.

true || true : true

true || false : true

false || true : true

false || false : false!

Sobre a ordem de precedência dos operadores lógicos temos: 1º Negação, 2º Conjunção e 3º Disjunção.

Operador Ternário

O operador ternário é representado pelos símbolos [ ? ] e [ : ] em uma mesma expressão, tendo nessa expressão três operandos, os blocos: de teste, verdadeiro e falso. A expressão é montada da seguinte forma: teste ? true : false

O primeiro bloco de teste representa um teste ou uma situação lógica que terá um resultado como verdadeiro ou falso.

O segundo bloco verdadeiro representa o que será executado caso o bloco de teste tenha resultado True.

O terceiro bloco falso representa o que será executado caso o bloco de teste tenha resultado False.

Exemplo: média >= 7.0 ? situação = 'Aprovado' : situação = 'Reprovado'

Page 3

Módulo C - Entendendo o DOM

Introdução ao DOM - #09

O que é o DOM?

DOM é uma sigla para Document Object Model, um modelo de objetos para documentos. Se trata de um conjunto de objetos do navegador que dão acesso aos documentos internos de um website. O DOM não roda em JavaScript externo como o Node.js por exemplo.

Árvore DOM

A árvore DOM representa seus objetos. Ela inicia pela raiz com o objeto window (janela), isto é, tudo gerado pelo JavaScript no site estará dentro desse componente.

Três dos componentes sucessores do window são: location, que represnta a localização e url do site, document, que é o documento atual e history que armazena aonde o usuário está. para onde ele foi, onde estava, etc.

Dentro de document existe o html, representante do código de semântica HTML do site,

dentro de html, há dois filhos, ou child, no caso, head e body, que tem html como pai, ou parent

como filhos de head, há diversas tags usadas como meta, title e outras.

da mesma forma, dentro de body há mais tags como h1, p, div, etc.

e dentro delas pode haver mais como em p há um child strong.

Essa hierarquia da árvore DOM serve para que em JavaScript possamos acessar componentes por comandos utilizando seus pais como referentes.

Então, para fazer essas seleções e acessos dentro da árvore DOM existem alguns métodos de acesso, 5 deles são: por Marca ( tag ), por ID( id ), por Nome ( name ), por Classe (class), por Seletor ( meio CSS ).

Por Marca --> getElementsByTagName("")[] OBS: dentro dos [ ] utilizarei um índice para indicar qual dos elementos com aquela tag eu quero.

Por ID --> getElementById("")

Por Nome --> getElementsByName("")[]

Por Classe --> getElementsByClassName("")[]

Por Seletor --> querySelector("") ou querySelectorAll("") como um "plural"

Com a utilização desses métodos é possível usar alguns comandos para fazer alterações e receber informações como os comandos innerText e innerHTML que pegam os textos ( no caso do Inner Text ) e o HTML formatado ( innerHTML ) que estão dentro daquelas tags. Ou posso utilizar window.document.body.style.background = '#84f' por exemplo, para alterar a cor de fundo do meu site

Eventos DOM - #10

Eventos DOM

Resumidamente, os eventos DOM são tudo aquilo que pode ocorrer com um elemento da árvore DOM, como uma DIV que é child de body, muitas coisas podem interagir com ela e vários eventos e acontecimentos podem ocorrer, os mais comuns em páginas web são eventos de mouse, como o mouseenter ( em que o mouse entra na área da div ) mousemove ( quando move o mouse dentro da div ), mousedown ( quando aperta o botão principal do mouse na div ) e o mouseup ( quando se solta o botão ) ou click ( clique básico do mouse ) e o mouseout ( quando retira o mouse da área da div ). Esses são somentes alguns eventos que ocorrem com o mouse.

Nesta página da documentação Mozilla há vários eventos DOM para serem consultados. ( https://developer.mozilla.org/pt-BR/docs/Web/Events )

Funções ou Funcionalidades

As funções ou funcionalidades em JavaScript são blocos de código que só serão executados quando chamados, ou seja, na maioria das vezes quando eventos forem disparados. O primeiro passo para a criação de uma função é a formação de um bloco de código, em JS um bloco de código fica entre o símbolo de chaves { }. Depois, é necessário nomear o bloco como uma função, colocando a palavra function anterior à abertura de chaves. Ao lado da denominação function, coloca-se um nome para a função, que será escrito e seguido de parênteses ( ) onde dentro podem ser colocados parâmetros.

Exemplo: function ação(parâmetros) {

bloco

}

Disparando funções através de eventos

Para disparar e executar os blocos de códigos dentro de funções a partir de eventos DOM que ocorreram, pode-se fazer de duas formas, a partir do HTML ou do JavaScript.

No HTML, usa-se os parâmetros de tag com os parâmetros de cada evento e cada função relacionada, exemplo: tag div id="area" onclick="clicar()" - onlick é parâmetro de tag relacionado ao evento click e clicar() é o nome da função criada atribuída à ele.

No JavaScript serão usados os "ouvidores de eventos", os EventsListeners que são espécies de funções para relacionar os eventos às funções. exemplo: a.addEventListener('click', clicar) - a é uma variável relacionada por árvore DOM com o elemento, no caso, a div, 'click' é o primeiro parâmetro que representa o evento e clicar é o nome da função que será disparada.

Page 4

Módulo D - Condições em JavaScript

Condições ( Parte 1 ) - #11

Até agora trabalhamos apenas com códigos sequenciais, isto é, que são lidos e executados de cima para baixo em uma sequência, ou seja, se há 3 comandos um após o outro, o 1º é executado, depois o 2º e por fim o 3º, ainda não é possível alterar essa ordem.

Condições Simples

Porém, com as condições, é sim possível alterar essa ordem, executando ou não executando comandos em ordem diversas, há na condição simples, um bloco de código que somente será executado caso sua condição for verdadeira. É necessário iniciar com o termo If ( se ) colocar a sua condição entre parênteses e depois o bloco de código que será executado se for True, entre chaves.

exemplo:

>> var velocidade = 80

>> if ( velocidade > 60 ) {

console.log("A velocidade está acima da permitida")

}

Condições Compostas

Nas condições compostas, a base semântica e de estrutura das condições simples se mantém, porém, agora existem mais de uma opção de blocos para serem executados ou não. Se for verdadeiro, haverá um bloco, senão ( se for falsa ) terá outro bloco. Portanto, usamos agora if ( se ) e else ( senão ).

exemplo:

>> var país = 'Estados Unidos'

>> console.log(`Vivendo em ${país}, `)

>> if ( país == 'Brasil') {

console.log('você é brasileiro')

}

>> else{

console.log('você é estrangeiro')

}

Há, na estrutura de condições, uso da indentação, códigos que estão dentro de blocos terão um recuo a mais ( feito com o Tab ) e fora não terão. Ou seja, códigos fora da indetação do if e else sempre serão executados, os dentro dependerá.

Condições ( Parte 2 ) - #12

Condições Aninhadas

Em JavaScript existe a possibilidade usar condições dentro de outros, isto é, aninhando-as. Para isso você pode usar "if" e else" dentro de outros "ifs" e "elses"

exemplo:

>> var idade = 17

>> if ( idade < 16 ) {

console.log('Não vota')

}

>> else {

>> if (idade < 18 ) {

console.log('Voto opcional')

}

>> else {

console.log('Voto obrigatório')

}

}

Para simplicar o código, pode usar ao invés de um if dentro do else, uma simplificação "else if".

exemplo:

>> var idade = 17

>> if ( idade < 16 ) {

console.log('Não vota')

}

>> else if (idade < 18 ) {

console.log('Voto opcional')

}

>> else {

console.log('Voto obrigatório')

}

DICA: Pegando a hora atual do sistema

Para consegui a hora atual do sistema cria-se uma variável com new Date(), e a partir dessa variável pode-se selecionar a informação da sua data, como o valor das horas através de variável.getHours().

exemplo:

>> var agora = new Date()

>> var hora = agora.getHours()

Condiçoes Múltiplas

As condições múltiplas serão um pouco diferentes, não há uso de ifs e elses. No caso dela, haverá um teste de uma expressão e um caso diferente para cada valor da expressão deverá ser programado, por último há o caso default que será acionado na situação em que nenhum caso foi verdadeiro. Usaremos switch (expressão) { } para declarar a condição múltipla. Dentro do parênteses, estará a expressão que deve ser verificada. Para cada resultado usaremos case valor: bloco + break, em cada case, estará o valor que deverá ser verificado se é resultado da expressão e após o bloco de código que será executado caso esse for o caso. No fim do bloco é necessário o comando break.

exemplo:

>> var agora = new Date()

>> var diaSem = agora.getDay()

>> switch (diaSem) {

>> case 0:

console.log('Hoje é Domingo')

break

>> case 1:

console.log('Hoje é Segunda')

break

>> case 2:

console.log('Hoje é Terça')

break

>> case 3:

console.log('Hoje é Quarta')

break

>> case 4:

console.log('Hoje é Quinta')

break

>> case 5:

console.log('Hoje é Sexta')

break

>> case 6:

console.log('Hoje é Sábado')

break

>> default:

console.log('Dia inválido')

}

EXTRA: Gerando elemento (tag) HTML dentro do JavaScript

Para gerar uma tag HTML através do script utilizado JavaScript podemos usar a nossa árvore DOM e a função createElement('tag') tendo como parâmetro a tag que deverá ser criada. Ainda podemos setar atributos através do JavaScript, usando uma variável atribuída ao elemento criado e a função setAttribute('atributo', 'valor') com dois parâmetros, o primeiro sendo o atributo e o segundo seu valor. Depois de ter uma variável guardando a tag e seus atributos devemos renderizá-la. Para isso, usamos um elemento e adcionamos outro elemento child com elementopai.appendChild(elementofilho).

Exemplo:

>> var img = document.createElement('img')

>> img.setAttribute('id', 'foto')

>> res.appendChild(img)

Page 5

Módulo E - Repetições em JavaScript

Repetições ( Parte 1 ) - #13

Repetições com teste lógico no início

Estrutura While ( Enquanto )

As repetições são estruturas de controle que na programação servem para executar comandos em loop, isto é, repetitivamente até algum momento. No caso da estrutura while, o seu bloco será executado em loop devido a um teste pré-definido, uma condição. Quando essa condiçao deixa de ser verdadeira, chega o momento em que o bloco não é mais executado e o programa volta para o fluxo normal. Ou seja, no loop há um teste no início que se for True, executa o bloco e volta para o teste, repetindo o mesmo processo, se for False, o loop se encerra. A estrutura é escrita da seguinte forma while (condição) { bloco }, "condição" será nosso teste e "bloco" será o código que será executado em loop enquanto o teste retornar verdade.

Exemplo:

>> var n = 0

>> while ( n < 5 ) {

n += 1

console.log(`${n - 1} + 1 = ${n}`)

}

Isso retorna:

0 + 1 = 1

1 + 1 = 2

2 + 1 = 3

3 + 1 = 4

4 + 1 = 5

Repetições com teste lógico no final

Haverá situações que será necessário executar primeiramente o bloco e depois verificar um teste para ver se precisaremos executá-lo novamente, para isso podemos usar a estrutura while implementada com o comando do. Primeiramente colocamos o comando do ( faça ) com o bloco e depois o while com nosso teste, da seguinte forma: do { bloco } while ( condição )

Exemplo:

>> do {

n += 1

console.log(`${n - 1} + 1 = ${n}`)

} while ( n < 5 )

Isso retorna:

0 + 1 = 1

1 + 1 = 2

2 + 1 = 3

3 + 1 = 4

4 + 1 = 5

Repetições ( Parte 2 ) - #14

Repetições com variável de controle

Estrutura For

A estrutura de repetição for tem 4 processos, sendo eles: inicialização, teste lógico, incremento e o bloco de código que repetirá. Diferente da estrutura while que apenas repete o bloco enquanto sua condição for verdadeira, no for teremos uma área para definirmos uma situação que inicia a repetição, será o primeiro parâmetro. Uma outra área com o teste lógico que deverá ser verdadeiro para manter o loop, que será o segundo parâmetro. E a última área com o incremento, que será executado depois do bloco no intervalo de voltar para o teste, o terceiro parâmetro. O 4º processo é o bloco de código que será repetido enquanto o teste for verdadeiro ( assim como no While ). Portanto, a estrutura é representada assim: for ( inicialização; condição; incremento ) { bloco }.

exemplo:

>> for ( var n=1 ; n <= 5 ; n++ ) {

console.log(`${n-1} + 1 = ${n}`)

}

Esse programa tem mesma funcionalidade do feito como exemplo do While e do While acima.

EXTRA: Usando emojis no javascript

Para fazer o uso de emojis através do JavaScript podemos usar o serviço fornecido de emojis por unicode. Para isso podemos acessar o site: https://apps.timwhitlock.info/emoji/tables/unicode e assim ter acesso ao código de cada emoji. Para formatarmos esse código fornecido no nosso JS, usamos "\u{códigodoemoji}"

exemplo:

div += ` ${numero1a10} \u{1F449}`

output:

1 ? 2 ? 3 ? 4 ? 5 ? 6 ? 7 ? 8 ? 9 ? 10 ?

Page 6

Módulo F - Avançando os estudos em JavaScript

Variáveis Compostas - #15

Variáveis

A diferença entre variáveis simples e compostas é bem compreensível: as variáveis simples são capazes de armazenar apenas um valor por vez, isto é, elas possuem "espaço" para somente um valor e para adcionar um novo é necessário sobrepor o outro. Nas variáveis compostas isso não acontece, pois elas são capazes de armazenar mais de um de valor simultaneamente, elas possuem "grandes espaços" para indefinidos valores.

Vetores ( arrays )

Vetores em JavaScript são variáveis compostas, elas serão declaradas e usadas a partir do símbolo de colchetes " [ ] ". Os vetores ou arrays armazenam diversos elementos, cada elemento possui seu valor/conteúdo e um indíce de identificação. Para utilizar essa estrutura em JS, fazemos a declaração dela como uma variável normal ( usando var ou let por exemplo ) e depois colocamos colchetes " [ ] " e os valores que serão armazenados, separados por vírgula.

exemplo:

>> let números = [ 4, 5, 1, 10, 8 ]

Para adcionarmos um novo elemento a um vetor podemos fazer indicando em qual posição/índice queremos colocá-lo ( inclusive em uma já ocupada, fazendo que seu valor seja sobreposto )

exemplo:

>> números[5] = 2020

>> números[0] = 11

ou podemos usar um método que adciona o elemento automaticamente na última posição ( que será criada ) do array. O método é o push, nele passamos como parâmetro o valor do nosso elemento.

exemplo: >> números.push(1000)

Após as alterações nosso vetor fica assim:

11, 5, 1, 10, 8, 2020, 1000

Algumas ações que podemos fazer com os vetores são por exemplo pegar o comprimento dele através de vetor.length e assim teremos a quantidade de elementos armazenados. Podemos também ordenar os elementos do array através do método sort(), que reorganizará por ordem ( númerica e alfabética ).

exemplo:

>> var vetor = [3,2,4,1,'a','h','c','b']

>> console.log(`Nosso vetor ${vetor} tem ${vetor.length} elementos`)

>> console.log(`Nosso vetor ordenado: ${vetor.sort()}`)

isso resulta:

Nosso vetor 3,2,4,1,a,h,c,b tem 8 elementos

Nosso vetor ordenado: 1,2,3,4,a,b,c,h

Outra funcionalidade que o Js permite fazer com arrays é de procurar valores dentro dele. Para isso usamos o método indexOf() na nossa variável composta passando como parâmetro o valor que queremos encontrar. Caso haja um elemento no vetor que armazene o valor procurado, o método retornará o índice do elemento, caso não encontre, retornará -1.

exemplo: vetor.indexOf(1)

Repetições com Vetores

Na estrutura de laço de repetição for vista nas anotações anteriores há uma versão otimizada para vetores e objetos, ou seja, um for para percorrer variáveis compostas em JavaScript. Para utilizá-lo usaremos o for padrão porém sem 3 campos como parâmetros, passaremos somente o primeiro com uma variável que fará a contagem dos índices/chaves da variável composta, usaremos o comando "in" e depois passaremos a variável composta a ser percorrida. Dessa forma: for ( let indíce in array ) { bloco }

exemplo:

>> for ( let pos in vetor ) {

>> console.log(`A posição ${pos} tem o valor ${vetor[pos]}`)

}

Funções - #16

As funções, já vistas anteriormente, são ações executadas assim que são chamadas ou em decorrência de algum evento. Uma função pode receber parâmetros, que serão informações necessárias para execução da ação e deverão retornar um resultado.

Levando esses conceitos para um exemplo prático da vida real, temos a seguinte situação: A mãe de um menino o dá dinheiro e pede para que ele compre leite em uma mercearia. Nesse caso, a mãe faz uma chamada de função e passa o parâmetro do dinheiro e de qual produto quer, que é o leite, o menino executa a ação da sua função que é todo o processo de ir a mercearia e comprar, depois ele dá um retorno que é o produto.

Para construir uma função dessa completa em JavaScript usaremos o comando function seguido do nome dado a ela, um parênteses que terá os parâmetros que podem ser recebidos ( parâmetros formais ) , um bloco contendo a ação e dentro dele haverá o comando return seguido do que queremos que seja o retorno. Para fazer a chamada usaremos o nome da função e o parênteses contendo os valores que os parâmetros assumirão ( parâmetros reais ). O local da chamada armazenará o valor retornado durante a execução da funcionalidade.

A estrutura fica:

>> function fazerAlgo(parâmetros formais) {

ação

>> return resposta }

>> let res = fazerAlgo(parâmetros reais)

Em Js, as funções poderão ter diversos returns no código, desde que, nas circunstâncias da execução, apenas um return seja efetivo, isso é, seja executado e dê o valor definitivo de resposta.

É possível também colocar parâmetros opcionais nas funções, para isso, haverá uma pré-definição de valores nos parâmetros formais, para que caso eles não recebam novos valores através da chamada, assumam esses pré-definidos, tornando-se opcionais.

exemplo:

>> function somar(n1=0, n2=0) {

>> return `${n1} + ${n2} = ${n1+n2}`

}

>> console.log(somar(5,6))

>> console.log(somar(3))

isso retorna:

5 + 6 = 11

3 + 0 = 3

Próximos Passos - #17

Com o fim das anotações devido ao fim do curso temos alguns conceitos e áreas dentro do JavaScript que valem a pena serem estudados futuramente: Mais sobre funcões, Objetos, Modularização (organização de código em diferentes arquivos), RegEx ( Expressões Regulares ), JSON, AJAX, NodeJS. Para finalizar o curso com mais alguns ensinamentos, iremos ver um pouco sobre os objetos.

Objetos

Os objetos em JavaScript se assemelham muito com os vetores, porém com algumas diferenças/melhorias. Assim como os arrays, os objetos são variáveis compostas e podem guardar diversos valores, mas nos vetores existem chaves fixas para os elementos, os índices são numéricos e não podem ser personalizados. Já nos objetos, teremos chaves escolhidas e declaradas por nós mesmos junto dos valores, assim podendo encontrar e utilizar os elementos de forma mais prática chamando os valores com o nome do objeto.chave. Para declarar um objeto usaremos chaves " { } " e teremos um nome para o índice, dois pontos e depois o valor que queremos armazenar. Os elementos serão separados por vírgulas. Uma s vantagens de objetos é que eles podem armazenar funcionalidades, ou seja, functions que chamaremos de métodos. Sua estrutura fica: var objeto = { chave: 'Valor', índice: 0 }

exemplo:

>> let amigo = {nome:'José', sexo:'M', peso:85.4, engordar(p){}}[

exemplo de funcionalidade dentro de variável:

>> let amigo = {

nome: 'José',

sexo: 'M',

peso: 85.4,

>> engordar(p=0) {

>> console.log('Engordou')

>> this.peso += p

}

}

>> amigo.engordar(10)

c>> onsole.log(`${amigo.nome} pesa ${amigo.peso}`)

isso retorna:

>> Engordou

>> José pesa 95.4

Page 7

Fim de uma era, começo de outra.

Com as anotações dos módulos de A até F do "Curso Grátis de JavaScript e ECMAScript para Iniciantes" do canal Curso em Vídeo ( que pode ser acessado em https://www.youtube.com/playlist?list=PLHz_AreHm4dlsK3Nr9GVvXCbpQyHQl1o1, nós terminamos a primeira visão e os primeiros passos do aprendizado em JavaScript. Porém agora, no nosso caminho para o próximo nível de desenvolvimento web iremos dar continuidade aos estudos e as anotações, dessa vez, baseadas nos cursos "Curso JavaScript" e "Curso JavaScript ES6+" da SkyLab, plataforma de estudos da RocketSeat: https://skylab.rocketseat.com.br/journey/starter. Muitos conceitos e aprendizados se repetem nos três cursos, portanto, irei anotar daqui pra frente, somente informações novas que eu julgar relevantes. Bons estudos!

Page 8

Curso JavaScript SkyLab

As anotações não representam o conteúdo completo do módulos nem das aulas complets, já que estamos levando em consideração 2 cursos, e para isso, não haverá repetição de conhecimentos

Novas Informações

Armazenamento de Condições dentro de variáveis

Quando utilizamos condições como o if e else, muitas vezes queremos apenas armazenar valores booleanos ( true e false ) em variáveis de acordo com determinada condição. No JavaScript é possível fazer isso de forma mais rápida e prática sem utilizar ifs. Para isso, precisaremos apenas declarar a variável e determinar a condição em seu valor, desta forma, ela assumirá o resultado true ou false da condição. Observe:

exemplo:

var masculino

>>if ( sexo == 'M') {

>>masculino = true

}

>>else {

>>masculino = false

}

reduzido com o armazenamento de condições em variáveis:

>>var masculino = (sexo == 'M')

ou

>>var masculino = sexo == 'M'

Intervalos

Os intervalos são utilizados para executar funções variás vezes entre determinados intervalos de temp. Usaremos o método setInterval() para isso e passaremos dois parâmetros, o primeiro deles é a função que queremos executar várias vezes ( lembrando que passamos apenas o nome da função sem o parênteses, pois com o parênteses a função será chamada e executada uma só vez ), o segundo deles é o nosso intervalo de tempo definido em milisegundos. A estrutura fica: setInterval(função, intervalo)

exemplo:

>> function dizerOla() {

>> console.log('Hello World')

}

>> setInterval(dizerOla, 1000)

isso retornará 'Hello World' no console a cada um segundo

Timeouts

Os timeouts são utilizados também para execuções personalizadas de funções, mas dessa vez não para executá-las várias vezes, e sim uma só vez porém depois de um determinado tempo, isto é, usaremos os timeouts para rodar uma funcionalidade com um delay ou atraso definido. O método para esse uso será o setTimeout e também terá dois parâmetros, o primeiro sendo o nome da função e o segundo o tempo de atraso em milisegundos. Portanto, temos a seguinte estrutura: setTimeout(função, atraso)

exemplo:

>> function dizerOla() {

>> console.log('Hello World')

}

>> setTimeout(dizerOla, 5000)

isso retornará 'Hello World' no console uma vez depois de 5 segundos que o programa foi executado

Repetições com Vetores

Tínhamos visto anteriormente que poderíamos com um laço de repetição for percorrer um vetor/array e obter a posição que estamos percorrendo em uma variável. Essa estrutura que vimos utilizava o comando in. Um outro jeito bem parecido de percorrermos um array usando seu tamanho como intervalo é utilizando o comando of. Nesse caso, ao invés de termos uma variável armazenando o índice de cada item do vetor que estamos percorrendo, a variável de inicialização do for armazenará o valor de cada item que percorremos dentro do array. Portanto, nossa estrutura com for of fica: for ( valor of vetor ) { bloco }

Exemplo:

>> var nomes = ["Diego", "Gabriel", "Lucas"];

>> for ( nome of nomes ) {

>> console.log(nome)

}

isso retorna:

>> Diego

>> Gabriel

>> Lucas

Utilizando Local Storage

Muitas vezes precisaremos guardar informações que se mantenham mesmo quando o usuário recarrega a página ou mantém a navegação no site. Para isso, usaremos o Local Storage que é o armazenamento local do navegador. Para acessá-lo através do JavaScript, usaremos a variável global localStorage e poderemos chamar métodos com ela. Um dos métodos que podemos chamar é o de cadastrar um novo item na memória, para isso usaremos localStorage.setItem e passaremos dois parâmetros: o primeiro será a chave do nosso valor (com aspas) e o segundo o próprio valor/elemento que armazenaremos. Porém, devemos lembrar que o Local Storage guarda somente strings, então para passarmos vetores e objetos por exemplo utilizaremos o formato JSON ( JavaScript Object Notation ). Para convertermos para string JSON, usamos JSON.stringify(elemento).

Para pegar o valor de um item guardado no local storage, usaremos o método localStorage.getItem('chave'), lembrando que para utilizarmos em sua forma JS verdadeira precisaremos converte-lo do JSON, utilizando JSON.parse(elemento).

exemplo:

>> var vetor = ['Oi', 'Olá, 'Saudações']

>> localStorage.setItem('meu-vetor', JSON.stringify(vetor))

>> var meuVetor = JSON.parse(localStorage.getItem('meu-vetor'))

Requisições AJAX

O AJAX ( Asynchronous Javascript and XML ) é um uso da linguagem JavaScript e XML para fazer requisições web assíncronas e trabalhar de forma mais prática obtendo informações de um servidor backend sem necessidade de recarregar a página web. Para ter acesso ao uso do AJAX, no JavaScript podemos definir uma variável recebendo new XMLHttpRequest(), e assim teremos acessos as funcionalidades que nos permitirão fazer as requisições. Para requisitar utilizando uma URL podemos usar a nossa variável.open() e passar dois parâmetros: o primeiro sendo o método de requisição http ( básicos: GET, POST, DELETE, PUT ) e o segundo sendo a URL que queremos acessar. Depois mandamos a requisição com um .send(), podemos passar parâmetros, mas caso queira fazer uma requisição padrão simples podemos defini-los como null.

Usando apenas o que foi informado no parágrafo acima, seríamos capazes de fazer a requisição mas não conseguiriamos obter os dados da resposta, isso porque em uma comunicação assíncrona, o código não seria "esperado" para continuar sendo executado, isto é, como as requisições tem um tempo de demora, o JavaScript continua o fluxo do script sem esperar uma resposta.

Então, para obter os dados da resposta, vamos fazer uma verificação a partir de um evento. Para isso, pegaremos nossa variável e usaremos o .onreadystatechange, que receberá uma função com um if para verificar se o valor do estado de prontificação é 4 (significa que a reposta voltou para a gente), e assim o código saberá que nessas condições teremos os dados disponíveis para uso ( Lembrando que as respostas normalmente serão disponibilizadas através de JSON e portanto deveremos fazer devidas conversões ensinadas anteriormente para utilizá-las ).

exemplo:

>> var xhr = new XMLHttpRequest()

>> xhr.open('GET', 'http://url.com'

>> xhr.send(null)

>> xhr.onreadystatechange = function() {

>> if ( xhr.readyState === 4) {

>> var dados = JSON.parse(xhr.responseText)

}

}

Promises

As promises ( promessas ) são estruturas através de funções para organizar uma requisição assíncrona, definindo áreas de código específicas para retornar dados no tempo certo da requisição. A promise será uma variável que receberá uma função e terá um new Promise(function(resolve, reject) {}) retornado. Os parâmetros resolve e reject da função dentro de promise serão funções responsáveis por retornar situações diferentes no fim da requisição ( normalmente de sucesso e erro ), para isso, haverão condições que criarão as situações específicas. Com a função da promise finalizada, para chamá-la usaremos o nome de sua variável com os parênteses e usaremos dois métodos: .then() e .catch(), cada um desses receberá uma função com um parâmetro, parâmetro esse que receberá os valores de resolve e reject retornados pela promise. O then terá em seu parâmetro valor de resolve e o catch, o de reject.

Observe o exemplo:

var myPromise = function() {

return new Promise(function(resolve, reject) {

var xhr = new XMLHttpRequest()

xhr.open('GET', 'https://reqres.in/api/users/2')

xhr.send(null)

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

resolve(JSON.parse(xhr.responseText))

}

else {

reject('Erro na requisição')

}

}

}

})

}

myPromise()

.then(function(response) {

console.log(response)

})

.catch(function(error) {

console.warn(error)

})

Axios

Para facilitar o uso de requisições AJAX, existem algumas bibliotecas, e uma delas é o axios. O axios facilita e encápsula toda a estrutura de uma promise nativa do JavaScript, facilitando muito e deixando o código muito mais limpo. Para usarmos, devemos usar uma importação de script no HTML, que é:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Depois disso, no JavaScript, podemos criar uma requisição pelo axios chamando ele, definindo o método com o nome do tipo de requisição HTTP ( GET, POST, PUT, DELETE ) e depois passando o primeiro parâmetro sendo a URL, e caso queira o segundo sendo um objeto para configurar os parâmetros HTTP. Depois usaremos a estrutura de .then e .catch que usaríamos na chamada de uma promise nativa.

exemplo:

axios.get('https://reqres.in/api/users/2')

.then(function(response) {

console.log(response)

})

.catch(function(error) {

console.warn(error)

})

Por baixo dos panos, o axios utiliza o XMLHttpRequest e a estrutura de promises que vimos como funcionam e como criá-las. Para acessar os dados de resposta, há algumas diferenças, como por exemplo aonde encontrá-las, além de que o AXIOS faz uma conversão automática com JSON.

Page 9

Acompanhe o avanço da linguagem => JavaScript ES6+

Nessa parte do curso, iremos acompanhar as novidades do JavaScript, que se tornaram mais expressivar após o ES6 ( ECMAScript de 2015 ). O JS teve muitas atualizações e novas funcionalidades que o tornou mais otimizado e eficente. Usando como base o curso de JavaScript ES6+ da Plataforma SkyLab da Rocketseat, vamos anotar nesse caderno diversas dessas atualizações e novos conceitos, separados por módulos.

Link do curso: https://skylab.rocketseat.com.br/node/curso-java-script-es-6

Page 10

ES6+ - Conceitos

Configurando o Babel

"Babel is a JavaScript compiler.

Use next-generation JavaScript, today.

Put in next-gen JavaScript: Get browser-compatible JavaScript out"

O Babel é um compilador de JavaScript

Use JavaScript da próxima geração, hoje.

Use JavaScript de próxima geração : Tranforme em JavaScript compatível para os navegadores

Acima está a descrição oficial do Babel. Quando estamos utilizando JavaScript moderno com as novidades do ECMA incluídas e novas sintaxes, isto é, utilizando ES6+, temos que ter em mente que nem todas as tecnologias as quais iremos usar estarão preparadas para receber esse código de "nova geração". Por isso, o Babel existe. Ele é um conversor/compilador de JavaScript ES6+ para JavaScript que a tecnologia entende. Como vamos aprender conceitos novos do JS, precisaremos do Babel para que nosso código seja funcional em todos os navegadores, tendo em vista que eles demoram a se adaptar a todas as novidades.

Para usar o Babel, vamos criar um projeto com node e yarn, usando o comando yarn init. Depois de termos nosso projeto, instalaremos com o yarn ( gerenciador de pacotes ), algumas dependências do babel:

>> yarn add @babel/cli

>> yarn add @babel/preset-env

>> yarn add @babel/core

Na raiz do projeto, criaremos uma arquivo .babelrc para configurar o Babel. Nesse arquivo configuraremos o preset do babel que converte o código para que seja entendível para browsers ( navegadores ), com o seguinte código:

{

"presets": ["@babel/preset-env"]

}

Depois disso, no nosso arquivo package.json vamos configurar um script de terminal que converte o arquivo principal Js do nosso projeto para o arquivo de bundle, ou seja, compilado e entendível pelos navegadores. O script fica:

"scripts": {

"compile": "babel ./src/main.js -o ./bundle.js -w"

}

Com o script criado, basta apenas rodar yarn compile no terminal e o Babel fará seu trabalho.