Fundamentos de Programação com JavaScript Curso Completo ( 8 horas de vídeo)

boas-vindas ao curso fundamentos de programação com JavaScript ao longo desse curso você vai praticar uma variedade de tópicos essenciais desde variáveis e constantes e tipos de dados até estruturas condicionais e funções de ordem superior começando com conceitos básicos como operadores e Strings e depois avançando para temas mais complexos como programação orientada a objetos e manipulação de Dom no final do curso você colocar em prática tudo que aprendeu criando um projeto final uma lista de contatos interativa se o instrutor nesse curso é o Ramon Rodrigues que possui mais de 8 anos de experiência em engenharia de

software utilizando JavaScript Python Ruby e SQL Bora lá Bons estudos bem-vindos ao curso de programação para iniciantes com JavaScript neste curso nós vamos aprender os fundamentos de programação com uma das linguagens mais utilizadas neste curso nós vamos aprender os seguintes tópicos variáveis constantes e tipos de dados operadores vetores objetos estruturas condicionais estruturas de repetição funções funções de ordem maior e programação orientada a objetos estes tópicos de 1 até 10 São tópicos que são comuns em basicamente todas as linguagens de programação já os tópicos 11 Até 14 que são classes es6 seletores de elementos manipulação do

Dom e Eventos São tópicos que são exclusivos da linguagem JavaScript Isso significa que se você fizer este curso até o final ou pelo menos até o tópico 10 você terá aprendido os fundamentos de programação que serão aplicáveis para outras linguagens de programação que você aprender no futuro ah no final curso se você tiver se você tiver gostado do conteúdo eu Convido você a aprender mais programação comigo visitando meu site programa ramon.com e se você preferir você também pode me seguir no github e no Linkedin estes são os links e a primeira coisa que nós precis

fazer para poder começar a aprender começar a aprender JavaScript e escrever código é ter acesso a um editor de código então para escrever nosso código nós vamos Ah nós vamos precisar D nós nós precisaremos acessar esses dois sites CS 50.de que é o site do editor de código online propriamente dito e github.com que é ã que é um site que é uma uma plataforma na verdade ã ã com a qual nós vamos acessar o editor de código e no site c50.2 nós vamos criar uma conta no github e através dessa conta no github nós vamos

acessar o editor de código ã no site cs50 PDV eu vou abrir aqui no meu navegador e na verdade já tenho aqui aberto já tenho aqui acessado os dois sites eu tenho aqui a acessado o cs50 pdv que é esse editor de editor de código que nós vamos utilizar Ah esse editor de códigos online ele é baseado no no visual Studio code que é um editor de código muito muito utilizado por muitos muitos muitos programadores só que ao invés de instalar no seu computador você vai utilizar ele online Ah esse site aqui ele tá em

esse site aqui de entrada nesse site Inicial Ele tá em inglês mas se você quiser você pode clicar com o botão direito aqui no seu navegador e traduzir para o português caso você queira eu não vou fazer isso mas se você quiser traduzir sinta-se à vontade para fazer isso eu vou clicar aqui nessa opção ó with these features pra gente poder ver o que esse editor de códigos ele vai nos oferecer de ferramentas eu vou clicar aqui e nós vemos que ele nos oferece uma lista bem extensa de ferramentas que nós podemos utilizar por exemplo

você vai poder programar na linguagem C que é uma linguagem muito muito utilizada você vai poder programar em JavaScript também você vai poder programar na linguagem Java e obviamente você vai poder programar com a linguagem Python Além disso O essa página inicial ela tá em inglês só que o editor mesmo depois que a gente acessar ele vai est disponível em ã em língua portuguesa e você pode ver aqui nesse nesse nesse parágrafo que eles oferecem suporte em língua portuguesa né eles oferecem o editor de código em língua portuguesa eu vou clicar aqui para para minimizar

esse menu o botão que a gente vai clicar para entrar no editor de código é esse botão aqui ó login e quando a gente apertar ele ã vamos ver o que vai acontecer ele vai pedir pra gente entrar com a nossa conta do do github portanto a gente vai a gente vai criar uma conta no github que é essa segunda aba que nós temos aqui e com ela nós vamos Acessar Ah nós vamos acessar o visual o visual Studio code eu vou clicar aqui nessa segunda aba que eu tenho aberto que é o site do

github e aqui talvez dependendo da época que você tiver assistindo esse vídeo essa página aqui el talvez ela vai ser um pouquinho diferente mas de qualquer maneira no topo da página aqui na barra do lado direito você vai ter a opção signup que é a opção para criar uma conta eu vou clicar nela e aqui eu vou ele vai fazer algumas perguntas elas vão estar em inglês mas vai ser bem fácil primeiro é pra gente digitar o nosso e-mail que no caso no meu caso vai ser programação Ramon @gmail.com vou clicar aqui em continuar a

próxima a próxima informação é uma senha então eu vou digitar aqui a minha senha vou clicar em continuar ele vai pedir para eu digitar um nome de usuário Então vou escrever aqui programação com Ramon vou clicar em continuar e aqui tá perguntando se eu quero receber e-mails com anúncios e atualizações de produtos eu não vou clicar porque eu não quero receber e-mail vou clicar aqui em continuar continue ele vai verificar minha conta e depois de um tempo ele vai pedir para ah para resolver um desafio aqui para checar que eu sou uma pessoa real eu

vou clicar aqui em verify verificar ã então ele tá pedindo aqui para eu resolver esse esse desafio aqui para posicionar essa imagem nesse sentido aqui né da da da da mão aqui já posicionei que tá para cá vou clicar aqui em submit para enviar pronto checou que eu sou uma pessoa de verdade e agora ele ele enviou um código o meu e-mail programação com Ramon @gmail eu vou checar Qual código que é vou copiar e vou e vou colar aqui perfeito a minha conta foi criada e agora eu posso vir aqui na primeira aba onde

a gente ah precisa colocar o nome de usuário e senha que a gente acabou de criar da conta do github para que possamos acessar o editor de códigos online ele vai pedir aqui eh ele vai pedir aqui pra gente autorizar então vou clicar aqui em eh authorize cs50 para ele poder autorizar a usar minha conta e agora depois de um tempo eh eh é possível que no primeiro acesso que você fizer nesse editor de código online Ele demora um pouco para poder configurar essa conta isso é normal a primeira vez que você tá acessando Pode

ser que ele ã demore um pouco ã hum hum perfeito parece que já carregou e agora nós poderemos utilizar o nosso editor de código para escrever os Nossos programas eu posso eu eu tô vendo aqui que a linguagem hã do meu editor de código Ele tá em inglês ainda né Por exemplo aqui tá problems output né as opções as opções o nome das coisas tá em inglês ainda ã eu posso alterar a da seguinte maneira se eu vi aqui e digitar ctrl shift P eu vou abrir esse menu Onde eu posso digitar Onde eu posso

definir algumas configurações né eu vou escrever aqui ó language para poder alterar o idioma alterar a língua né Eu acredito que é o [Música] primeiro aqui ó configure display language é a terceira opção aqui ó configurar linguagem de exibição ok nós temos as opções aqui eu vou escolher aqui ó português Brasil e ele vai pedir para eu recarregar Reload vai pedir para eu recarregar a página para que ele possa aplicar as a configuração de idioma eu vou clicar aqui em Reload e agora depois de um tempinho depois de carregar né nós teremos agora o nosso

editor de códigos ah totalmente em português portanto nós podemos ver aqui agora terminal saída problemas portas e aqui do lado o explorador de arquivos onde nós podemos ver quais arquivos nós temos aqui nesse ambiente virtual né lembrando esse esse aqui é um ambiente virtual esse não é um programa instalado no seu computador os códigos que você vai escrever aqui os programas que você que você vai escrever ele eles vão ficar armazenados na sua conta do github que a gente criou anteriormente Ah mas mas você também pode instalar no seu computador esse editor de código que

é o vs code é o nome dele vs code Ah mas de qualquer maneira deixa eu mostrar para vocês aqui o que nós temos aqui do aqui do lado esquerdo nós temos a barra de menu aqui nesse primeiro item é o explorador de arquivos onde ex onde serão exibidos os arquivos que você tem aqui no seu ambiente e nós temos algumas nós temos algumas opções como por exemplo novo arquivo nova pasta e etc por exemplo eu posso criar aqui um novo arquivo ó chamado arquivo. TXT um arquivo de texto e aí eu posso escrever aqui

ó era uma vez um sapo por exemplo a segunda opção aqui é o explor é é o explorador é o pesquisar onde você pode pesquisar trechos de código ah trechos de código para para que o o próprio editor encontre para você por exemplo Digamos que eu tenho um programa grande e aí eu quero eu quero encontrar um trecho de código específico eu posso digitar aqui por exemplo sapo se eu dig se eu digitar sapo ele vai mostrar que no arquivo arquivo.txt Eu tenho esse trecho de código dentro dele ah essa terceira opção aqui controle controle

do código fonte ela vai te ex à medida que você vai criando programas mais complexos né programas mais dinâmicos você vai ter que alterar esses programas né você vai você vai criar você vai escrever código mas você também vai alterar código existente e aqui na aba controle do código fonte ele vai te mostrar Quais alterações você fez do seu código para que você possa gerenciar e Ah para que você possa gerenciar as alterações que você fez para garantir que você tá fazendo as alterações ã corretas aqui executar e depurar é uma opção é uma ferramenta

que você pode utilizar para executar o seu código de forma gradual de forma passa a Passos por assim dizer para você poder observar a forma como seu código tá funcionando aqui na aba extensões você vai poder instalar extensões ou seja ferramentas extras no seu editor de código por exemplo nós temos aqui algumas extensões que já vêm instaladas Como por exemplo o pacote de de linguagem em português é uma das extensões que nós temos aqui nós temos outras também por exemplo algumas extensões para a linguagem Python e temos outras extensões aqui bem úteis também ah essa

opção aqui ela diz respeito a a p requests do Hub não não você não precisa se preocupar com isso agora e ã essas duas opções aqui o cs50 menu e o cs50 Duck debugger são duas Abas ã que são oferecidas pelo cs50 cs50 é um curso de ciência da computação da Universidade de Harvard ã que eu sou o instrutor da versão em português é por isso que nós estamos utilizando ã essa ferramenta aqui porque como eu já utilizo ela no curso cs50 em português ah eu decidi utilizar ela para esse curso também porque eu já

tenho famil familiaridade e também porque ela nos permite ã Ela nos permite nós como como programadores né Eu como instrutor e você como aprendiz permite que a gente tenha o mesmo ambiente de programação dessa forma a gente não vai ter problema na hora de escrever e executar o nosso código porque nós vamos ter o mesmo sistema o mesmo ambiente e portanto todos os comandos todos os códigos que funcionarem para mim aqui durante o nosso curso certamente vão funcionar para você quando você estiver escrevendo o seu código aí no seu computador portanto Esse é ã a

nossa introdução aqui ao nosso ambiente de de programação que nós vamos utilizar e eu vejo você na próxima lição até mais Vamos aprender sobre variáveis constantes e tipos de dados os dados e as informações são a parte mais importante dos Nossos programas e é por isso que nós e é por isso que nós precisamos aprender isso no início do nosso curso e variáveis e constantes são o lugar onde nós vamos guardar esses dados e essas informações nós vamos ver isso na prática agora para isso eu vou abrir aqui o nosso editor de código e a

primeira coisa que eu vou fazer aqui será criar um arquivo pra gente poder escrever o nosso código JavaScript aqui no operador aqui no explorador de arquivos que é esse primeiro ícone Aqui nós temos os arquivos presentes no meu no meu ambiente de programação no momento eu só tenho uma pasta aqui chamada aula do Ah eu quero criar um arquivo para poder colocar o nosso código JavaScript né eu vou clicar com o botão direito aqui e selecionar novo arquivo eu também posso clicar aqui nesse ícone Aqui ó Novo arquivo e esse e esse arquivo eu vou

chamar simplesmente de programa PJS quando nós escrevemos código JavaScript o nome do arquivo precisa ter a extensão ponto JS o nome o nome do arquivo seguido de ponto JS para indicar que aquele arquivo é um arquivo JavaScript eu vou apertar enter perfeito Acabei de criar o arquivo e ele automaticamente abriu aqui no para eu poder editar para eu poder escrever código se eu fechar ele aqui por Acidente eu posso vir aqui ó e abrir ele novamente portanto agora o que eu vou fazer aqui será criar alguns dados no meu programa e na linguagem JavaScript nós

temos diferentes tipos de dados que nós que nós podemos criar eu posso criar por exemplo um número inteiro Como por exemplo o número 10 eu posso criar um número decimal Como por exemplo o número 2.5 eu posso criar uma sequência de caracteres para representar uma palavra uma frase um parágrafo para isso eu vou precisar envolver a sequência de caracteres com aspas duplas e dentro das aspas eu vou colocar a sequência de caracteres que eu quero criar como por exemplo se eu quiser representar o nome do usuário do meu programa ou o nome de uma pessoa

eu vou escrever aqui por exemplo pedo esse nome ele precisa estar essa sequência de caracteres ela precisa estar envolvida por aspas duplas e quando Nós criamos sequências de caracteres o o nome técnico por assim dizer desse tipo de dado é string portanto aqui na linha um nós temos um número inteiro na linha dois nós temos um número decimal na linha três nós temos uma string uma sequência de caracteres que precisa estar envolvida por aspas duplas eu também posso criar uma string utilizando aspas simples por exemplo se eu se eu quiser criar uma sequência de caracteres

que representa o sobrenome do usuário por exemplo eu posso envolver com aspas simples também e até o momento a estes dados aqui eles só existem aqui nos Nossos programas só que nós não estamos fazendo nada com eles né seria interessante por exemplo ah a partir do momento que eu tenho aqui por exemplo o número 10 deixa eu escrever aqui seria interessante se eu pudesse pegar esse valor 10 que eu criei e armazenar ele olha que interessante e armazenar ele dentro de uma caixa para poder usar mais tarde no meu programa essa caixa ela vai ter

um nome por exemplo número ou então idade por exemplo ou então x Seria interessante se nós pudéssemos se nós pudéssemos fazer isso né pegar pegar o valor que nós acabamos de criar e guardar ele numa caixa para utilizar mais tarde e para fazer isso nós vamos fazer o seguinte ó eu vou pegar esse valor aqui 10 e à esquerda dele eu vou digitar o seguinte ó const x sinal de igual 10 o que eu acabei de fazer aqui na linha um foi pegar o valor 10 que eu criei e através do sinal de igual que

é o que nós chamamos de ah de atribuição através do sinal de igual que é o que nós chamamos de operador de atribuição eu vou pegar o valor 10 e vou guardar aqui no que eu vou chamar de X e nós precisamos da palavra-chave do comando const porque esse x vai ser uma constante o valor dele não vai poder ser alterado e portanto vamos fazer o mesmo com os outros valores que Nós criamos eu vou pegar aqui o 2.5 vou atribuir ele ao que eu vou chamar de y que também é uma constante vou pegar

aqui a a string Pedro e tô atribuindo ao que eu vou chamar de nome também é uma constante e vou pegar aqui a string Souza a sequência de caracteres Souza né s o u z a e vou atribuir aqui no que eu vou chamar de sobrenome e atenção cada linha de código aqui eu encerrei com ponto e vírgula porque nós precisamos disso na linguagem JavaScript para indicar que aquela linha de código foi encerrada e efetivamente o que nós acabamos de fazer aqui foi o seguinte nós acabamos de criar quatro caixas e cada uma dessas caixas

possui um conteúdo dentro delas a caixa que nós chamamos de X possui o valor 10 possui o conteúdo 10 Y possui 2.5 nome possui Pedro e sobrenome possui Souza e em seguida Olha que interessante na linguagem JavaScript nós temos um comando chamado console.log Esse comando ele serve para escrever coisas no terminal aqui ó quando nós executarmos o nosso programa aqui no terminal é aqui que nós vamos executar o programa nós podemos utilizar esse comando aqui console. log para imprimir para escrever alguma coisa aqui no terminal Esse comando ele necessita parênteses abre parênteses e fecha parênteses

imediatamente após o nome do comando e dentro dos parênteses eu vou passar para o comando eu vou informar ao comando console. log o que nós queremos imprimir aqui no terminal e o que eu vou passar aqui vai ser o x Que Nós criamos aqui na linha um e agora aqui no terminal pra gente poder executar este programa eu vou digitar node é esse o nome do comando que nós vamos utilizar para executar o programa que nós acabamos de criar com a ling JavaScript node espaço e o nome do arquivo que eu quero executar que neste

caso é programa. JS e portanto agora se eu apertar enter para executar o programa nós veremos o valor 10 impresso aqui no terminal que é o valor de x que nós passamos para o comando console.log eu vou imprimir os outros as outras constantes por assim dizer que Nós criamos aqui entre as linhas 2 e 4 eu vou imprimir aqui console log Y console. log nome console P log so nome e portanto agora deixa eu fechar aqui o explorador de arquivos né e portanto agora se eu executar este programa novamente digitando node espaço programa PJS e

apertar enter nós veremos ah ah olha que interessante eu tentei executar este programa mas ele gerou um erro né ah e o erro aqui é o seguinte eu vou ah o o computador aqui tá me tá me indicando que o erro foi na linha sete ó o erro foi no arquivo progr programa p JS na linha s é isso o que isso aqui significa o workspaces e esse número aqui é o é o nú do meu computador aqui nesse aqui nesse ambiente de programação online Portanto o erro aconteceu no arquivo programa PJS na linha 7

e nós podemos ver a indicação visual aqui ó o erro foi nesse ponto aqui que eu esqueci que eu escrevi e nós temos até e nós temos até mesmo o nome do erro em né e o o problema aqui foi o seguinte ao invés de digitar um ponto e vírgula para encerrar a linha de código eu escrevi um ponto que tá errado né portanto eu vou remover o ponto vou digitar ponto e vírgula e portanto agora se eu vi aqui no terminal Olha que interessante eu vou digitar aqui ó contrl L para limpar o terminal

control L vai limpar tudo que tá aqui e agora se eu digitar node espaço programa PJS nós veremos emesso no terminal o 10 o 2.5 Pedro e Souza Além disso além de dados do tipo número né e do tipo sequência de caracteres Nós também temos dados do tipo verdadeiro e falso portanto aqui na linha 10 eu vou escrever aqui ó const verdadeiro recebe sinal de igual recebe true se eu quero representar verdadeiro se eu quero representar o valor verdadeiro o conceito de verdadeiro eu utilizo o comando true a palavra chave true se eu quiser representar

o dado falso o conceito de falso eu utilizo a palavra chave false E agora se eu imprimir através do comando console P log verdadeiro console P log falso e executar este programa nós veremos aqui no terminal os quatro valores que Nós criamos anteriormente e nós vemos aqui também verdadeiro true é isso que true significa em inglês verdadeiro e false falso e esses aqui são valores especiais né verdadeiro e falso são valores especiais nas linguagens de programação a representação dos conceitos de verdadeiro e falso Além disso nós temos outros dois valores bem interessantes nós temos um

valor que nós chamamos de nul que representa um valor nulo que representa um dado sem valor por assim dizer e eu posso atribuir isso aqui a uma constante chamada nulo por exemplo isso é premiss aqui no terminal nós iremos aqui ó nul e eu também posso E além disso nós também temos o valor undefined undefined em inglês significa não definido e undefined na linguagem JavaScript representa um valor não definido e eu posso atribuir isso aqui a uma constante chamada não definido e quando eu imprimir isso aqui no console e Tent executar este programa nós iremos

aqui undefined portanto nós acabamos de aprender os tipos de dados básicos da linguagem JavaScript deixa eu remover deixa eu ver aquelas linhas de código e portanto nós acabamos de aprender os tipos de dados básicos da linguagem JavaScript aqui nas linhas um e dois Nós aprendemos os dados do tipo número Ah Ah detalhe importante se eu quiser criar um comentário por assim dizer se eu quiser se eu quiser criar um comentário no meu código que não vai ser executado pelo computador quando o programa foi executado eu posso utilizar Duas Barras duas Duas Barras e portanto tudo

que eu escrevi aqui eu posso escrever qualquer coisa aqui e isto não será executado pelo computador nós costumamos utilizar comentários para para escrever para escrever palavras ou frases no nosso código para explicar o que ele faz portanto eu vou utilizar comentários para para indicar o tipo de dado de cada uma de cada uma dessas constantes portanto aqui na linha um eu vou escrever aqui ó esse dado essa constante x ela é um tipo de dado que nós chamamos de Number número Y também é Number ou em português número a constante nome é um tipo de

dado string ou melhor sequência de caracteres em português n sequência de caracteres Souza também é string sequência de caracteres o tipo de dado verdadeiro true é o que nós chamamos de tipo de dado buan ou em português buleo um valor boleano é um valor que é verdadeiro ou falso portanto true é um tipo de dado boleano falso também é um tipo de dado boleano Aqui nós temos o tipo de dado nulo e aqui o tipo de dado não não definido portanto portanto Esses são os tipos de dados básicos da linguagem JavaScript e eu posso Ah

e eu tô utilizando comentários aqui para comentários para indicar o que cada uma dessas constantes são e eu posso Olha que interessante eu posso eu posso eu posso acessar eu posso checar Qual é o tipo de dado dessas variáveis se eu escrever aqui por exemplo através do comando Type off eu posso checar Qual é o tipo de dado de determinada de determinado valor por exemplo se eu quiser checar o tipo de dado de x eu vou escrever Type of tipo D é isso que Type of significa Tipo D Type of x e isso aqui eu

vou imprimir através do comando console.log e portanto se eu executar este programa nós veremos que o tipo o tipo do dado x o tipo da Constante X é Number como nós vimos aqui em cima se eu testar se eu checar o tipo de dado da Constante nome nós veremos string E se eu checar o tipo de dado da Constante verdadeiro nós veremos bu portanto é assim que nós podemos checar o tipo de dado de uma o tipo de dado de de algum dado de alguma constante Só que tem uma questão aqui deixa eu linha essas

constantes Que Nós criamos elas realmente são constantes né não tem como a gente alterar o valor de X não tem como a gente alterar o valor de y nem o valor de nome nem o valor de sobrenome né a medida Ah uma vez que nós tenhamos criado essas constantes no nosso programa elas vão ter o mesmo valor pelo resto do programa inteiro até o fim do programa porque elas são constantes e efetivamente quando Nós criamos como nós quando Nós criamos constantes o que acontece é o seguinte ah acontece isso aqui ó por exemplo se nós

criarmos uma constante chamada nome com o valor Pedro efetivamente o que nós estamos criando é uma caixa identificada por um nome que possui determinado valor e essa caixa ela possui um cadeado não tem como a gente alterar o valor dentro dela e nós fazemos isso porque ã nós queremos nos proteger de nós mesmos nós como programadores é comum nós fazermos erros e às vezes vai ter programas em que nós queremos que determinado valor não seja possível ser alterado por exemplo se eu tenho um programa que tem alguma senha por exemplo eu não quero que essa

senha mude durante a execução do programa né então nós utilizaríamos por exemplo uma constante para definir uma senha de forma que seja impossível alterar o valor daquela daquela senha né daquela constante para mostrar que é impossível mudar alterar o valor de uma constante eu vou voltar aqui pro nosso editor de código e eu vou fazer o seguinte ó aqui na linha 18 Eu vou acessar deixa eu deixa eu remover essas linhas aqui ó na linha um eu estou definindo a constante nome aqui na linha três eu vou tentar alterar o valor da Constante nome para

que seja Mario por exemplo se eu tentar executar este programa Isso aqui vai gerar um erro porque na linha um eu estou definindo uma constante na linha dois eu estou tentando alterar o valor da Constante E isso não é permitido Se eu tentar executar este programa nós veremos um erro aqui né Ó o erro aconteceu no arquivo programa PJS na linha dois eu tenho aqui ó a indicação visual de onde o erro aconteceu é aqui no sinal de atribuição né um único sinal de igual e o erro e o erro foi o seguinte ó tipo

de erro Type error erro de tipo atribuição assignment a uma variável constante em outras palavras nós não podemos tentar alterar o valor de uma constante se eu quiser ter uma caixa cujo conteúdo possa ser alterado ao invés de definir uma constante Ao invés de definir aquele valor como sendo uma constante eu vou definir ele como sendo uma variável através do comando let e a diferença é essa enquanto que let é utilizado para criar uma caixa cujo valor possa ser alterado em outras palavras let é utilizado para criar uma variável const é utilizado para criar constantes

e portanto se eu voltar aqui no nosso editor de código Ah isso aqui não é permitido essa operação aqui né alterar alterar o valor de uma constante não é permitido mas se eu se eu se eu criar uma variável através do comando let isso aqui será possível eu executei o programa e nenhum erro foi gerado Se eu tentar imprimir isso aqui no terminal nós veremos que nome agora tem o valor Mário ao invés do valor Pedro Inicial e eu e se eu copiar essa linha de código aqui e colocar aqui na linha dois nós veremos

Pedro seguido de porque aqui na linha eu inicialize a variável nome com o valor Pedro e aí na Linha do Eu imprimi esse valor no terminal na linha 3 eu alterei o valor da variável nome para máo e em seguida na linha 4 eu imprimi o valor dessa variável no terminal portanto agora fo impresso e portanta entre constantes e variáveis Além disso nós temos algumas regras para os identificadores que são os nomes das variáveis e das constantes né e as regras são as seguintes identificadores devem começar com uma letra um sinal de cifrão ou um

ou um sinal de sublinhado Portanto o nome de uma variável ou de uma constante Pris com uma letra com um sinal de cifrão ou com um sinal de sublinhado identificadores devem ser compostos de letras números sinal de cifrão ou sinal de sublinhado portanto no nome de uma variável ou de uma constante nós podemos ter letras né A AT nós podemos ter números 1 até ou 0 até nós podemos ter cifrão e nós podemos ter sublinhado Além disso são permitidos caracteres unicode que são caracteres especiais né Como por exemplo o pi ou então zero com esses

dois pontinhos aqui em cima e a identificadores não podem ser palavras reservadas ou seja comandos do JavaScript portanto eu não poderia ter por exemplo uma variável chamada let ou uma variável chamada const porque isso são são são palavras reservadas né são comandos da linguagem JavaScript Além disso vamos aprender a diferença entre o valor nulo e o valor undefined e e a diferença é a seguinte quando Nós criamos uma variável atribuir um valor inicialmente o valor dela será undefined não definido portanto se eu criar aqui por exemplo uma variável uma variável chamada x sem definir um

valor para ela utilizando o operador de atribuição né e eu tentar imprimir isso aqui no terminal o valor dela será undefined Nós criamos uma caixa chamada x só que a gente não colocou nada aqui dentro né Portanto o valor dela é undefined já o valor nulo ele é utilizado para definir um um valor nulo e a princípio a princípio você pode entender um valor nulo como sendo o mesmo que um valor undefined a diferença é que um valor nulo vai ser definido pelo programador já o valor undefined ele é definido pelo usuário portanto se eu

quiser criar se eu quiser criar [Música] uma se eu quiser criar uma variável sem ter um valor inicial eu posso definir aqui como tendo valor nulo nulo isso indicaria que eu criei a caixa só que ela não possui nenhum valor se eu não definisse nada o valor dela seria undef portanto Essa é a diferença undefined é definido pelo computador pelo programa quando você não atribui um valor já n é utilizado pelo programador para indicar que aquela caixa não possui valor nenhum não possui dado nenhum portanto Esses são os conceitos de variáveis constantes e tipos de

dados nós temos o comando let para criar variáveis nós temos o comando const para criar constantes e nós temos os tipos de dados string para sequência de caracteres Number para números inteiros e decimais bullan para para valores verdadeiros e falsos nul para valores nulos e undefined para para valores não definidos Vamos aprender agora sobre operadores na linguagem javscript nós temos a capacidade de realizar operações matemáticas com a linguagem Vamos aprender como fazer isso agora eu vou abrir aqui o meu editor de código e nós vamos aprender aqui a realizar as quatro operações básicas da Matemática

adição subtração multiplicação e divisão para poder fazer isso eu vou inicializar aqui duas ah duas constantes uma chamada x que vai receber o valor 4 e outra chamada Y que vai receber o valor 5 e agora eu vou realizar as quatro operações básicas da Matemática com essas duas constantes com esses dois valores 4 e 5 o primeiro que eu vou realizar será a operação de adição que você vai fazer simplesmente utilizando o sinal de mais para criar a expressão exatamente como nós fazemos na matemática né em seguida o resultado desta operação aqui eu vou atribuir

a uma constante que eu vou chamar de soma e portanto agora soma possui o resultado de X + Y em seguida eu vou fazer aqui ã X - Y para realizar a operação de subtração e eu vou atribuir o resultado dessa expressão a uma variável a a uma constante perdão chamada subtração em seguida eu vou realizar a a operação de multiplicação utilizando o o sinal de asterisco portanto é com o sinal de asterisco que nós podemos realizar a operação de multiplicação e eu vou atribuir o resultado dessa operação dessa expressão a uma constante chamada multiplicação

em seguida pra gente poder fazer a operação de divisão nós vamos utilizar o sinal de barra portanto é utilizando é utilizando o sinal de barra que nós podemos criar que nós podemos criar que nós podemos efetuar essa operação eu vou atribuir o resultado dessa expressão a uma constante chamada divisão e agora eu vou imprimir essas quatro constantes no terminal e se eu fiz tudo certo quando eu executar este programa digitando node programa PJS nós veremos impresso aqui no terminal a soma que será 9 nós veremos men1 que será a subtração nós veremos que será a

multiplicação e nós veremos 0.8 que é o resultado da divisão e portanto é exatamente isso que nós vemos aqui é assim que nós podemos realizar as quatro operações básicas da Matemática só que a linguagem JavaScript é uma linguagem poderosa Ela nos permite fazer outras operações também uma dessas operações é o que nós chamamos de operação módulo ou operador módulo que é representado através do sinal de porcentagem e a operação módulo o operador módulo funciona semelhante a uma operação de divisão só que o operador módulo ele ele retorna ele calcula o resto da divisão por exemplo

se eu dividir 3 por 2 na divisão normal por assim dizer isso isso resulta em 1.5 né 3 di por 2 é iG 1.5 entretanto se a gente fazer essa divisão de forma inteira ou seja sem ter sem permitir um resultado decimal 3 di por 2 resulta em 1 e você tem o resto de divisão igual a 1 né Outra exemplo se eu dividir 5 por 2 isso resulta em 2.5 mas se eu só permitir divisão inteira resulta 2 5 di por 2 resulta em do E sobra um né E E sobra o resto de

divisão igual a 1 portanto é assim que é para isso que nós vamos utilizar o operador módulo para para calcular o resto de divisão inteira portanto se eu fizer aqui ó 3 resto de divisão inteira por 2 é isso aqui é isso que essa expressão significa 3 resto de divisão inteira por 2 qual vai ser o resultado se eu imprimir aqui no terminal nós veremos pera aí nós veremos um o programa demorou pouquinho para atualizar o conteúdo do programa por isso que a gente não viu aqui quando a gente executou mas depois a gente executou

e nós vios aqui um né se eu fizer aqui 5 resto de divisão inteira por 2 isso também vai ser igual a 1 se eu fizer aqui por exemplo [Música] 11 resto de divisão inteira por 3 quanto será que resulta bem Ah o 3 ele cabre ele cabe três vezes dentro dentro do 11 né 3 6 9 e fica restando 2 então o resto de divisão inteira de 11 por 3 vai ser igual vai ser igual a dois e se a gente executar este programa nós veremos dois aqui impresso no terminal que é o resto

de divisão inteira de 11 por 3 portanto é para isso que serve o operador módulo que é o único sinal que é um que é um sinal de porcentagem né ele calcula o resto de divisão e você deve estar se perguntando Ah para que para que que serve esse esse operador né certamente se você é um iniciante de programação não fica muito claro para que que esse operador ã Quais são as utilidades desse operador Ah mas existem muitas uma delas é por exemplo para calcular se um número é é par ou ímpar se você calcular

um número se você calcular o resto de divisão de um número por dois e o resultado for zero esse número é par se o resultado for um Esse número é ímpar e eu posso mostrar isso na prática aqui ó por exemplo 3 resto de divisão por 2 deixa eu copiar essa linha aqui e eu vou fazer isso para os próximos números após o TR nós vamos ter aqui ó 4 5 6 7 8 9 e 10 se um número é se um número é par o resto de divisão dele por 2 é zer se o

número é ímpar o resto de divisão é um E se eu executar este programa nós veremos que o resto de divisão do número 10 por 2 é igual a 0 Isso significa que o 10 é par o resto de divisão de 9 por 2 é 1 o resto de divisão de 8 por 2 é 0 porque ele é par o resto divisão de 7 por 2 é 1 porque o 7 é ímpar e assim por diante existem Outras aplicações do operador módulo mas para os propósitos dessa lição é só esse que eu vou abordar eu

vou iniciar aqui uma outra constante chamada Z com valor inicial igual a 1 e digamos agora que eu queira atualizar o valor da Constante ah Z deixa eu alterar o nome aqui Digamos que eu queira alterar atualizar o valor da Constante Z incrementando o seu valor aumentando o seu valor em uma unidade para fazer isso aqui na linha 20 eu poderia escrever o seguinte Z recebe z + 1 isso aqui alteraria o valor da Constante Z incrementaria aumentaria em uma unidade e agora se eu imprimir isso aqui nós veremos que o valor de Z é

nós vemos um problema aqui erro de tipo eu tentei executar o programa eu tentei executar o programa e ele exibiu um erro aqui ó erro de tipo Type error atribuição a variável constante o problema aqui é o seguinte eu inicialize Z como sendo uma constante com valor 1 entretanto não é permitido alterar o valor de constantes Ah é por esse mesmo motivo é por esse mesmo motivo que elas se se chamam constantes né o valor delas é constante não pode ser alterado que é o que eu estou tentando fazer aqui na linha 20 é por

isso que nós vemos um erro aqui portanto se eu quero permitir a alteração do valor de z eu tenho que inicializá-la como sendo uma variável e utilizar o comando let ao invés do comando const e dessa maneira eu vou criar ao invés de uma constante eu vou criar uma variável E aí sim eu poderei alterar o valor dela perfeito eu vou voltar aqui pro terminal eu vou limpar o terminal digitando cont control l e agora quando eu executar este programa nós veremos aqui ó deixa eu deixa eu remover tudo aqui removi todos os consoles vou

executar de novo pra gente poder ver um resultado mais limpo quando eu executar este programa nós veremos que o valor de z não é um como a gente inicializou inicialmente o valor de Z é igual a 2 porque aqui na linha na linha nove nós incrementamos por assim dizer o valor da variável Z e normalmente isso aqui que a gente tá fazendo que é que é aumentar o valor de uma variável em determinado valor é algo muito comum que nós fazemos na programação né e portanto existem alguns atalhos Existem algumas formas de fazer isso aqui

de forma mais concisa utilizando menos código e para isso podemos escrever o seguinte Z mais igual e o que vier depois do sinal de mais igual será o valor que será incrementado no valor da variável Z e aqui eu posso escrever um por exemplo E se eu executar este programa nós veremos novamente que o valor da variável Z é 2 Se eu colocar dois aqui nós veremos que agora o valor da variável Z é 3 Se eu colocar 50 o valor da variável Z será incrementado em 50 unidades né Ah E além disso essa operação

aqui em que nós incrementamos o valor de uma variável em uma unidade é uma operação muito comum na na programação é por isso que nós temos uma maneira ainda mais abreviada de fazer exatamente isso aqui que é o seguinte você digita mais mais depois do nome da variável numérica cujo valor você quer incrementar em uma unidade e portanto quando você quer incrementar quando você quer aumentar o valor de uma variável você pode escrever o nome da variável recebe a própria variável mais o valor que você quer incrementar nesse caso aqui um você pode fazer variável

mais igual o valor que você quer incrementar ou você pode fazer variável mais mais todos essas três opções aqui fazem a mesma coisa que é incrementar o valor da variável em uma unidade Essa maneira aqui na linha 12 Só serve para incrementar o valor o valor da variável em uma unidade apenas já essas duas maneiras aqui você pode colocar outros valores aqui como por exemplo 2 ou TR ou 4 ou 5 ou 50 e o mesmo vale para esse jeito aqui somente o mais mais é que incrementa em apenas uma unidade e vamos vamos mostrar

ele na prática se eu executar este programa nós veremos que o valor da variável Z é 2 depois que a gente incrementou com o o operador de incrementação n dois sinais de mais se eu eu posso fazer isso eu posso fazer o contrário também né Por exemplo se eu fizer aqui eu vou definir uma variável chamada a por exemplo com o valor 10 se eu fizer aqui ó a recebe a- 1 e imprimir a variável a nós iremos que a agora é igual a 9 eu também posso fazer a men ig a 1 isso també

decrementar ou seja diminuiria o valor da variável a em uma unidade ou então eu posso fazer a menos menos isso também decrementar o valor da variável a em uma unidade portanto essas três formas aqui de alterar de diminuir o valor de uma variável né funcionam da mesma maneira você pode escrever variável recebe o valor da própria variável -1 você pode fazer variável menos igual a 1 ou então você pode fazer variável menos menos essas duas maneiras aqui nas linhas 14 e 15 elas servem para diminuir o valor de uma variável em um valor arbitrário aqui

eu escrevi um mas poderia ser 2 3 2 3 4 5 100 a mesma coisa aqui embaixo você pode definir um valor arbitrário para diminuir o valor da variável já o operador menos menos ele incrementa em apenas uma unidade enquanto que mais mais aumenta em uma unidade menos menos diminuir em uma unidade Essa é a diferença H Portanto vamos fazer uma revisão Aqui Nós aprendemos como fazer soma subtração multiplicação divisão Nós também aprendemos resto de divisão que é feito com com o operador módulo né que é um sinal de porcentagem Nós apr Nós aprendemos ã

Nós aprendemos em incrementação e decrementa ou seja aumentar o valor ou diminuir o valor de incrementação decrementa né E são essas ah Ah esqueci de falar o seguinte por exemplo essas operações aqui mais igual e menos igual quando você quer aumentar ou diminuir o valor de uma variável em determinado valor né se eu imprimir aqui a e z nós [Música] veremos que a é igual a 59 né a era a inicialmente é igual a 10 na linha 14 onde eu inicializo na linha 15 Eu decremento em uma unidade aqui a passa a ser no quando

eu incremento em uma em 50 unidades seu valor passa a ser 59 perfeito já que na linha 10 eu inicializo a variável Z com o valor com o valor um inicialmente incremento em uma unidade Z passa a ser 2 e aqui na linha 17 eu diminuo o valor dela em 100 2 - 100 é igual a 98 negativo é exatamente esses valores que nós temos aqui ah entretanto essas operações aqui também a gente a pode fazer operações semelhantes com multiplicação com divisão e com operador módulo por exemplo se eu tiver aqui uma variável chamada c

com o valor inicial 10 eu posso fazer aqui o seguinte ó C asterisco igual a 2 e agora se eu imprimir o valor de C nós veremos o valor 20 porque lembrando o sinal de asterisco é multiplicação então se eu quero multiplicar uma variável por determinado valor e pegar o resultado e atribuir na própria variável eu utilizo esse operador aqui asterisco igual é por isso que C agora é igual a 20 porque a gente multiplicou o seu valor por 2 e atribui o resultado que é 20 nele próprio eu posso fazer aqui ó ã se

eu inicializar D com o valor 100 por ou 90 Vamos colocar 90 e fazer aqui ó D Barra igual A3 O que vocês acham que será o resultado dessa operação aqui lembrando o sinal de barra é o sinal de divisão se eu fizer divisão igual né barra igual e imprimir o valor de D nós veremos que D é igual a 30 porque aqui eu peguei o valor da variável D que é igual a 90 dividi por 3 e o resultado eu atribui de volta aqui na variável D é isso O que o operador barra igual

faz ele vai pegar o valor da variável no caso aqui a variável no caso aqui é a variável D vai dividir pelo valor que a gente especificar aqui e o resultado ele vai atribuir na própria na própria variável é por isso que D aqui passou a ser 30 Ah e nós podemos fazer o mesmo com o operador módulo né se eu fizer aqui ó variável e vai receber o valor 9 por exemplo e eu fizer aqui ah é módulo igual porcentagem igual a 2 qual é o ã isso vai pegar o resto de divisão do

valor de e por 2 e vai atribuir nele mesmo E se eu imprimir o valor da variável e nós veremos que o resto de divisão de 9 por 2 é isso que a linha 28 está calculando o valor da variável e é 9 o resto de divisão dele por 2 é 1 esse valor foi atribuído de volta na variável e E é isso que nós imprimimos aqui na linha 29 é por isso que nós vemos um aqui impresso no termino Nal e portanto e portanto é assim que nós podemos fazer as princip deixa eu diminuir

aqui o zoom é assim que nós podemos fazer as principais operações da Matemática com JavaScript nós temos soma subtração multiplicação divisão e resto de divisão com sinais de mais menos asterisco barra e porcentagem respectivamente nós temos nós temos a capacidade de aumentar e diminuir o valor das variáveis e nós temos esses atalhos aqui quando nós queremos alterar o valor de uma variável seja multiplicando por um valor seja dividindo por um valor seja calculando o resto de divisão seja aumentando seja diminuindo portanto Estas são os operad estes são os operadores os operadores aritméticos básicos Ah que

existem na maioria das linguagens de programação Ah nós temos adição subtração multiplicação divisão resto da divisão incrementar e decrementar atenção especial ao operador módulo né que é o resto de divisão que talvez você não tenha aprendido nas nas aulas de matemática e a atenção também a aos operadores de incrementar e decrementar atenção porque eu esqueci no slide de colocar um segundo if aqui né um segundo sinal de menos que era necessário aqui para o Ah para o operador de incrementação né eu esqueci de de colocar aqui um são dois cais de menos perfeito Vamos aprender

agora operadores de de comparação que vai nos permitir comparar fazer comparações entre diferentes valores e determinar se aquela operação é verdadeira ou falsa é é para isso que nós vamos utilizar os operadores de comparação e nós temos seis deles nós temos maior do que menor do que maior ou igual menor ou igual igual e diferente vamos voltar aqui pro nosso editor de código eu vou remover todo esse código aqui e eu vou escrever aqui o seguinte eu vou inicializar duas constantes uma chamada a com valor 1 inicialmente e outra chamada B deixa aumentar o zoom

com o valor 2 inicialmente e aqui eu vou fazer o seguinte eu vou comparar a é menor do que B isso aqui cria uma expressão que resulta em um valor verdadeiro ou um valor falso nós estamos aqui utilizando o sinal de menor do que se eu imprimir o resultado dessa dessa expressão no terminal nós veremos o resultado true verdadeiro Lembrando que a palavra true significa verdadeiro isso aqui representa o valor verdadeiro em programação se eu fizer aqui ó a maior do que B se eu imprimir aqui se eu imprimir o resultado nós veremos que o

resultado é false falso Isso porque a cujo valor é 1 e B cujo valor é 2 o resultado dessa expressão é falso vamos ver agora a menor ou igual a B se eu o resultado dessa expressão o resultado será verdadeiro true isso porque a é igual a 1 B É iG a 2 1 é menor ou igual a 2 sim 1 é menor ou igual a 2 portanto O resultado é verdadeiro e se eu fizer aqui a maior ou igual a B nós veremos que O resultado é falso né porque porque a É iG a

1 B É iG a 2 i1 não é maior ou igual a 2 por isso que o resultado foi falso eu posso testar também se a é igual a B e atenção ah isso aqui é um é uma fonte de confusão comum para programadores iniciantes existe uma diferença entre dois sinais de igual e um único sinal de igual e a diferença é a seguinte um único sinal de igual é o operador de atribuição você tá pegando o valor da direita e atribuindo e guardando no que está na esquerda na variável ou na constante que está

na esquerda dois sinais de iguais é o operador de comparação nós estamos comparando se o valor da esquerda é igual ao valor da direita e se for isso aqui retorna verdadeiro se não retorna falso e portanto se eu imprimir aqui o valor dessa expressão nós veremos o valor falso né porque a é igual 1 B = 2 A a que é 1 não é igual a B que é 2 portanto é por isso que nós vios aqui falso por outro lado se eu testar aqui Ah se eu se eu criar o seguinte a seguinte inspeção

a diferente d e é isso O que Ponto de exclamação igual significa é o operador diferente nós estamos comparando se os valores são diferentes a é diferente de B se eu imprimisse aqui no terminal nós iremos que o resultado dessa expressão será verdadeiro porque a É iG a 1 B = 2 A é diferente de 2 sim verdadeiro é por isso que nós vemos true aqui no terminal e portanto esses exemplos que nós estamos vendo são alguns exemplos abstratos né ah são alguns exemplos abstratos mas é importante vocês entenderem como esses operadores funcionam operador menor

do que operador maior do que operador menor ou igual operador maior ou igual o operador igual e o operador diferente é importante vocês entenderem como esses operadores funcionam porque eles se tornarão muito muito muito muito úteis Mais tarde nos Nossos programas eu vou voltar aqui pros slides porque agora Que Nós aprendemos os operadores de comparação né Nós vamos aprender alguns comparadores lógicos e nós temos três deles nós temos o operador nós temos o operador e nós temos o operador e que vai pegar duas expressões e Vai resultar em Verdadeiro Caso as duas expressões sejam verdadeiras

o operador ou vai pegar duas expressões e vai tornar Verdadeiro Caso uma das duas caso uma ou outra seja verdadeira e o operador não vai inverter o valor de determinada expressão e detalhe aqui hã Deixa eu voltar aqui nos slides os operadores Que Nós aprendemos primeiro que foram os operadores aritméticos né eles lidam eles lidam com com matemática né adição subtração e etc já os operadores de comparação e os operadores lógicos eles lidam com o conceito de verdadeiro falso né que que vai que são conceitos muito muito importantes ah na programação e é importante vocês

aprenderem como esses operadores funcionam e pra gente poder e pra gente poder melhor entender como os operadores lógicos funcionam e ou e não vamos Ah vamos analisar a seguinte tabela essa tabela aqui mostra os os os resultados das operações com o operador e no caso aqui o operador e que é dois sinais Ah esses dois sinais aqui né que nós chamamos de ent ou então ah e Comercial também é uma forma de chamar e Comercial esses dois sinais aqui e Opa Ah esse é operador e ele ele retorna verdadeiro true apenas se ambos os valores

forem verdadeiros por isso ã por exemplo nós temos aqui verdadeiro e verdadeiro isso retorna verdadeiro resultado é verdadeiro se um dos dois lados for falsos se uma das duas expressões for falsa então o resultado será falso por exemplo nós temos aqui ó verdadeiro e falso Isso retorna falso falso e verdadeiro isso retorna verdadeiro falso e falso Isso retorna falso somente quando os dois lados da expressão são verdadeiros é que isso retorna verdadeiro e é importante vocês entenderem essa tabela aqui porque Ah esses conceitos serão muito importantes à medida que você for criando à medida que

você se for criando programas mais complexos Vamos ver isso na prática vou voltar aqui pro nosso pro nosso editor de código e eu vou escrever aqui o seguinte ó vamos pegar duas expressões aqui vamos pegar essas duas primeiras aqui ó se eu escrever aqui a menor do que b e a maior do que B essa exão toda aqui a menor do que b e a Mai do que B essa expressão toda aqui ela retorna verdadeiro ou falso bem Vamos pensar a primeira expressão aqui a a menor do que B Vai resultar em verdadeiro né porque

a é 1 B é 2 1 menor do que 2 é verdadeiro portanto Vai resultar em verdadeiro já essa expressão aqui ó a maior do que b a é 1 B é 2 1 maior do que 2 resulta em falso e portanto como nós temos verdadeiro e falso essa expressão completa aqui Vai resultar em em falso né quando nós utilizamos o operador e ambos os lados precisam ser verdadeiros para que a expressão completa resulte em em verdadeiro é por isso que essa expressão aqui Vai resultar em falso e se eu imprimir isso aqui no terminal

deixa eu comentar as linhas quro até nove pra gente poder ver apenas um resultado no terminal se eu executar este programa nós veremos falso impresso no terminal por outro lado se eu testar aqui o seguinte ó a menor do que b e ah a diferente de B bem a iG 1 B = 2 a = 1 B = 2 1 é menor do que 2 Sim essa expressão resulta em verdadeiro 1 é diferente de dois sim um é diferente de dois portanto essa expressão resulta em veradeiro e a expressão completa vai retornar em verdadeiro Vai

resultar em verdadeiro porque nós temos verdadeiro e verdadeiro a expressão completa Vai resultar em verdadeiro e se eu imprimir isso aqui no terminal nós veremos verdadeiro né Nós temos falso da primeira expressão e nós temos aqui verdadeiro da da da segunda expressão Ah eu poderia testar também por exemplo a = a b e a maior do que B isso aqui Vai resultar em em falso né porque a não é igual a B e a não é maior do que B falso e falso resulta em falso é por isso que nós temos falso aqui e portanto

é assim que o operador e funciona somente quando ambos os lados resulta em verdadeiro é que a expressão completa resulta em verdadeiro portanto é assim que o operador e é assim o comportamento do operador e vamos aprender agora o operador ou então o operador ou Vai resultar em Verdadeiro Caso pelo menos um dos lados da expressão Seja verdadeiro e portanto a verdadeiro ou Verdadeiro resulta em verdadeiro porque um dos dois lados é verdadeiro verdadeiro ou falso resulta em verdadeiro porque um dos um dos um dos dois lados no caso esse aqui é verdadeiro portanto verdadeiro

ou falso resulta em verdadeiro falso ou verdadeiro resulta em verdadeiro porque pelo menos um dos lados no caso esse aqui é verdadeiro somente quando ambos os lados é falso é que o operador ou resulta em falso nós temos falso ou falso isso essa expressão resulta em falso Vamos ver isso na prática vou voltar aqui pro pro nosso editor de código e eu vou fazer o seguinte ó deixa eu comentar isso aqui eu vou fazer aqui ó a menor do que B ou a maior do que B bem Vamos pensar a iG 1 B = 2

1 é menor do que 2 1 é menor do que 2 portanto essa expressão aqui resulta em verdadeiro 1 é maior do que 2 1 não é maior do que 2 e portanto essa expressão resulta em falso e portanto verdadeiro ou falso pelo menos um dos lados é verdadeiro e portanto essa expressão completa aqui Vai resultar em verdadeiro e se eu imprimir isso aqui no terminal nós veremos verdadeiro perfeito se eu testar se eu testar por exemplo Esqueci de colocar as variáveis de volta verdadeiro perfeito se eu testar aqui a = a b ou dois

sinais de barra né Duas Barras verticais é esse o sinal de é assim que a gente cria o operador ou Duas Barras verticais a tecla fica aqui perto da letra Z na maioria dos Teclados a = a b ou a diferente de B vamos fazer isso aí vamos fazer essa operação bem a é = 1 B = 2 1 é iG 2 não essa expressão resulta emal em em falso um é diferente dois essa expressão resulta em verdadeiro portanto nós temos aqui Falso ou Verdadeiro isso aqui resulta em verdadeiro e portanto se eu imprimir o

resultado dessa expressão completa no terminal nós veremos verdadeiro novamente e portanto é assim que o operador ou ele funciona somente quando ambos os lados forem falso é que ele vai resultar em falso e v mostrar isso na prática né se eu testar aqui ó se eu testar a iG B ou a maior do que B bem a não é igual a B e a também não é maior do que B porque a é 1 B é 2 se eu imprimisse aqui no terminal nós veremos se euiss aqui no terminal nós veremos falso né Deixa eu

fazer de novo nós veremos falso portanto como ambos os lados é falso a expressão Total resultou em falso E é assim que o operador ou funciona Vamos aprender agora o operador não que é um sinal de exclamação e a forma como ele funciona é a seguinte quando nós temos um valor verdadeiro e nós utilizamos o operador não isso inverte o valor né e o operador não que é o sinal de que é um único sinal de exclamação ele é o que nós chamamos de unário porque ele ele opera somente em cima de um valor apenas

ao contrário do ao contrário do operador e e do operador ou o operador não que é o sinal de exclamação ele é um operador unário ele opera em cima de apenas um valor e o que ele faz é inverter o valor é inverter o valor portanto se nós temos não verdadeiro isso resulta em falso E se nós temos não falso Isso resulta em verdadeiro não verdadeiro resulta em falso não falso resulta em verdadeiro Vamos ver isso na prática se eu voltar aqui ó e escrever aqui o seguinte deixa eu comentar isso aqui eu vou escrever

aqui ó não verdadeiro se eu imprimir no terminal e executar este programa nós veremos falso aqui porque isso inverteu o valor verdadeiro Se eu por outro lado imprimir não falso Isso Vai resultar em verdadeiro e eu posso fazer isso com uma expressão de Fato né se eu escrever aqui ó não há igual a B por exemplo Deixa eu botar um parênteses aqui para poder calcular primeiro esse resultado aqui e depois inverter com o com o não né isso aqui Vai resultar em verdadeiro né porque isso aqui resulta em falso a não é igual a B

portanto ISO resulta em falso não falso resulta em verdadeiro portanto é assim que o operador não funciona ele vai inverter o valor de vai inverter o valor boleano né verdadeiro para falso e falso para verdadeiro Vamos falar agora sobre Strings que são dos tipos de dados fundamentais da linguagem JavaScript Strings são sequências de caracteres Strings podem ser palavras frases parágrafos e até mesmo livros inteiros para mostrar como criar e utilizar Strings eu vou abrir aqui o meu editor de código e a primeira coisa que nós temos que aprender é como criar uma string para a

gente poder fazer isso nós teremos que envolver os caracteres a sequência de caracteres que constitui a string entre aspas duplas ou aspas simples e portanto se eu quero criar uma string que vai representar o nome do do usuário por exemplo eu vou digitar aspas duplas um par de aspas duplas e tudo que tiver aqui dentro deixa eu dar um zoom aqui portanto aqui aqui eu tenho um par de aspas duplas uma aspa dupla e outra aspas dupla e o que quer que estiver aqui entre essas aspas duplas será serão os caracteres da string então aqui

eu posso escrever por exemplo Pedro e portanto isto aqui agora é uma string que é constituída por esta sequência de caracteres e que representa o nome do usuário Strings também podem ser EMTA também podem ser envolvidas por aspas Simples então eu vou digitar aqui um par de aspas simples e dentro eu vou colocar o nome do usuário e portanto na linha um nós temos uma string e na linha dois nós temos a mesma string A diferença é que na linha elas a string está Envolvida Por aspas duplas e na linha do a string está envolvidas

está Envolvida Por aspas simples mas não há diferença na funcionalidade PR gente poder pra gente poder utilizar essa string eu vou atribuir ela a uma constante chamada nome e aqui na linha do eu vou criar uma segunda string utilizando aspas duplas Eu poderia usar aspas simples também que vai representar o sobrenome do usuário eu vou finalizar estas linhas de código com ponto e vírgula e aqui na linha três eu vou criar um número inteiro que vai representar a idade do usuário perfeito portanto agora aqui eu tenho entre as linhas um e TR três constantes as

duas primeiras são Strings que representam o nome e o sobrenome do usuário e a terceira é um número inteiro que representa a idade do usuário Digamos que agora eu queira criar uma mensagem dizendo meu nome é mais o nome do usuário que a gente criou ali mais o sobrenome do usuário seguido de e eu tenho seguido da idade do usuário e seguido pela palavra anos né eu tenho meu nome é Pedro Silva e eu tenho 27 anos como que eu posso criar Como que eu posso criar uma string que vai juntar esses elementos de forma

dinâmica né então eu vou criar uma string aqui ó que vai conter a primeira parte dessa mensagem que será meu nome é agora olha que interessante fora da string depois da string eu vou colocar um sinal de mais vou colocar aqui o nome a constante nome Que Nós criamos ali em cima um sinal de mais vou criar uma string aqui que vai ser composta somente por um espaço em seguida vou colocar um sinal de mais sobrenome é a constante Que Nós criamos na linha dois um sinal de mais vou criar uma nova string aqui e

eu tenho espaço fora da string vou colocar um sinal de mais vou colocar aqui a idade que Nós criamos deixa diminuir o zoom aqui mais espaço anos portanto agora aqui na linha 5 o que nós acabamos o que nós acabamos de fazer foi uma um conceito chamado conc nação concatenação se refere a você juntar Strings utilizando o sinal de mais para para criar uma string maior então aqui eu estou criando uma string que no final das contas vai dizer meu nome é Pedro Silva e eu tenho 27 anos e nós estamos fazendo isso através da

técnica de concatenação que é juntar essas Strings através de um único através de um sinal de adição sinal de mais né eu vou pegar esse string completa que eu acabei de criar e vou atribuir ela a uma constante chamada frase ou melhor apresentação um ponto e vírgula aqui no final da linha para encerrar a lógica e aqui na linha se eu vou imprimir no terminal a constante apresentação e portanto agora se eu executar este programa node programa PJS nós veremos meu nome é Pedro Silva e eu tenho 27 anos tem um problema aqui de formatação

né eu esqueci de um espaço aqui que deve ser inserido aqui ó antes da letra e portanto agora se eu executar este programa nós veremos a frase a apresentação de forma correta meu nome é Pedro e eu tenho 27 anos Lembrando que esse espaço aqui no meio era importante senão o nome e o sobrenome ficariam juntos né se eu remover esse espaço aqui e tentar executar este programa nós veremos o nome sobrenome juntos é por isso que aquele espaço ali ele é necessário portanto uma forma da gente juntar Strings é através dessa técnica de concatenação

mas existe uma outra maneira da gente fazer isso e que é a seguinte aqui na linha oito vou fazer eu vou criar uma string só que dessa vez ao invés de utilizar aspas duplas ou aspas simples eu utilizarei o sinal de acento acento grave que é aquele virado para a esquerda né Ah então vou digitar aqui ó dois acentos graves são esses são esses caracteres que vão envolver a string dessa vez portanto nós podemos utilizar aspas duplas aspas simples mas também nós podemos utilizar o sinal ã acento grave para criar Strings de forma que vai

possibilitar a gente encaixar variáveis de forma dinâmica semelhante à forma como nós fizemos aqui com a concatenação em que nós encaixamos de forma dinâmica as Strings nome sobrenome e a constante e o e o número inteir idade só que utilizando acento grave vai ser um pouco diferente então nós vamos criar a mesma apresentação Que Nós criamos aqui na linha seis só que com uma técnica diferente então eu vou digitar aqui ó meu nome é espaço e agora para para que eu possa encaixar elementos de forma dinâmica dessa string eu vou digitar um sinal de cifrão

sinal do do dólar seguido de Chaves Abre Chaves fecha Chaves e agora eu posso encaixar eu posso a constante ou variável que eu colocar aqui dentro das chaves vai ser encaixado de forma dinâmica nessa string e portanto aqui eu vou digitar nome fora das chaves eu vou continuar o resto da string espaço sinal de cifrão Chaves sobrenome portanto Essa é a sintaxe você vai colocar um sinal de cifrão seguido de Chaves e aí dentro das chaves você vai encaixar a constante ou variável que você quer e eu tenho sinal de cifrão Chaves idade anos e

portanto agora eu acabei de criar o que nós chamamos de template de string é uma maneira da gente criar Strings encaixando de encaixando de forma dinâmica elementos dentro dessa string eu vou atribuir essa string completa aqui a uma constante chamada apresentação do E agora se eu imprimir essa imprimir essa constante no terminal nós veremos aqui novamente meu nome é Pedro Silva e eu tenho 27 anos portanto quando você quer deixa eu diminuir o zoom aqui portanto quando você quer criar Strings encaixando elementos de forma dinâmica você pode utilizar a técnica de concatenação ou então você

pode utilizar a técnica de template de string e lembrando para fazer uma template de para criar uma template de string você tem que envolver a est L toda em ah sinal de assento grave né o assento paraa esquerda e você vai encaixar as variáveis ou as constantes com essa sintaxe aqui você vai colocar um sinal de cifrão seguido de Chaves e dentro das chaves você vai colocar o nome da Constante ou variável que você quer encaixar perfeito Vamos aprender agora alguma Vamos aprender agora algumas maneiras algumas propriedades algumas propriedades e métodos de string importantes eu

vou criar aqui uma string chamada S essa string vai receber ah essa constante vai receber a string Ola Mundo e agora Digamos que eu queira saber qual é o comprimento da string S eu quero saber quantos caracteres a string S possui para fazer isso eu vou acessar uma uma propriedade chamada length portanto eu vou selecionar primeiramente a string s e através do operador ponto eu vou acessar a propriedade length e a propriedade length vai me retornar o número de caracteres que a string S possui a palavra length em inglês significa comprimento e agora se eu

imprimisse no terminal nós veremos que a string S possui nove caracteres 1 2 3 4 5 6 7 8 9 perfeito agora Digamos que eu queira alterar as letras da string para sua versão maiúscula para isso eu vou utilizar um método chamado two upper Case esse método uppercase vai alterar as letras da string Para que sejam maiúsculo a palavra upper Case em inglês significa maiúsculo a a palavra two é uma preposição então você pode Você pode ler isso aqui como transforme para maiúsculo basicamente E agora se eu imprimir isso aqui no terminal nós veremos a

string s com todas com todas as suas letras alteradas para maiúsculo e detalhe importante aqui Ah pra gente poder utilizar esse método aqui nós chamamos isso de método nós precisamos de parênteses depois do nome do método para poder executar ele portanto ah two uppercase é um método é uma função por assim dizer é uma ação e length é uma propriedade é por isso que length não é necessário parênteses já o método true uppercase necessita parênteses porque ele faz uma ação né ele transforma as letras para maiúsculo e agora se eu quiser transformar para minúsculo eu

vou utilizar o método to lower Case low lower Case em inglês significa minúsculo to lower Case é o método que você utiliza para transformar as letras de uma string para sua versão minúscula e se eu imprimir isso no terminal nós veremos a string s agora com todas as letras minúsculas sendo que inicialmente a letra O e a letra M eram maiúsculas agora Digamos que eu queira selecionar uma fatia da string uma seção da string para fazer isso eu vou utilizar o método substring o método substring vai nos permitir selecionar uma fatia da string uma sessão

da string e o método substring ele vai receber aqui dentro dos par dois argumentos o primeiro argumento será o índice da será o índice do primeiro caractere que representa o início da fatia e o segundo argumento será o índice do caractere que representa o final da fatia e portanto aqui eu quero selecionar essa fatia aqui ó os primeiros Ah eu quero selecionar os primeiros qu caracteres ou melhor cinco caracteres de olar até m e detalhe importante os caracteres de uma string eles possuem eles possuem uma posição na string né o primeiro caractere que no caso

é a letra A maiúscula está posicionado no índice zero então Então quando você tem o string o primeiro caractere está posicionado no índice zero o segundo caractere está posicionado no índice um o terceiro caractere está posicionado no índice dois e assim por diante e portanto o posicionamento dos caracteres em uma string começa a partir de zero então se eu quero selecionar essa fatia aqui ó da letra O maiúscula até a letra M minúscula o início dessa fatia que eu vou criar agora será zero porque o primeiro caractere está no índice zero eu vou colocar aqui

uma vírgula para poder informar agora o para poder informar o índice do final da fatia né E no caso aqui ah eu quero essa fatia aqui então vamos lá ó o maiúsculo está no índice zero L está no índice um a está no índice 2 o espaço que também conta está no índice 3 O M está no índice 4 Só que tem um detalhe A forma como o método substring funciona é o seguinte o início da fatia está estará incluído na fatia Já o final da fatia não estará incluído então se eu quero se eu

quero essa fatia aqui como o caractere m está no índice 4 eu preciso especificar aqui que o final dessa fatia será no índice 5 porque o final da fatia não estará incluído Ok portanto isso é isso aqui é o que nós chamamos de índice índice não incluído Então vai a fatia vaier vai do índice zer até o índice 5 não incluso o índice 5 que seria a letra U não estará incluída portanto se eu imprimisse aqui no console nós veremos a fatia com como acabei de explicar né Nós temos o índice 0 1 2 3

4 o final da fatia ele não é incluído e detalhe esse método substring Como eu disse ele recebe dois argumentos e esses argumentos ele precisa estar separado por vírgula poderia ser Vírgula sem o espaço Mas eu coloco espaço para poder ficar um pouco mais legível Esse é o início este aqui é o fim só que o final não é incluso perfeito como que eu posso agora dividir ah dividir uma string Separar uma string para isso eu posso utilizar o método do split a palavra split em inglês significa dividir ou separar e para eu utilizar esse

método eu preciso informar aqui um divisor dentro dos parênteses que será uma string por exemplo letra U então se eu informar aqui a letra U como sendo o divisor da string S efetivamente o que eu vou receber será duas Strings essa fatia aqui até a letra m e essa segunda fatia aqui depois da letra U que é o divisor que eu estou especificando aqui e se eu imprimir isso aqui no terminal o que nós veremos será será o que nós chamamos de Vetor um vetor é uma lista basicamente Esse é o próximo tópico do nosso

curso mas de qualquer maneira Eu dividi a string S através do método split especificando como divisor a letra u e e o que eu recebi foi um vetor foi uma lista com a primeira parte da da divisão e a segunda parte da divisão o divisor que eu especifiquei aqui ele não é incluído porque ele foi o divisor né se eu se eu especificar uma string vazia ou seja duas aspas sem nenhum caracter entre elas efetivamente o que o que será utilizado como divisor será o sinal será o caracter espaço então se eu executar este programa

agora ah ou ou melhor se eu não especificar nenhum nenhum caractere aqui como divisor efetivamente o que vai acontecer será o seguinte eu vou receber um vetor com um vetor com várias com com cada um dos caracteres né então cada caractere aqui ele é um elemento do vetor que foi retornado pelo método split se eu quiser utilizar o espaço como divisor eu vou colocar aqui um espaço e isso vai me retornar as duas palavras porque o espaço foi utilizado como divisor e certamente você Dev você deve estar perguntando certamente você deve estar se perguntando o

que é essa coisa que você está chamando de Vetor né vetor basicamente é uma lista só que el um vetor ele vai ter algumas propriedades algumas propriedades e alguns comportamentos bem interessantes Mas a gente pode entender um vetor como sendo uma lista e a sintaxe dele é essa você vai ter coetes né envolvendo os elementos do vetor e esses elementos estarão separados por vírgula E aí no caso Aqui nós temos dois elementos né O primeiro é é string Olá o segundo é string mundo mas de qualquer maneira isso é um assunto para a próxima lição

vamos falar agora sobre vetores que são uma das estruturas de dados fundamentais das linguagens de programação vetores são chamados em inglês Em inglês de arrays e vetores basicamente são conjunto de elementos lado a lado e esses elementos eles são identificados pela sua posição no vetor pelos pela sua pelo seu índice então pra gente poder entender eu vou mostrar ilustração aqui para vocês portanto isso basicamente é um vetor são elementos lado a lado e ordenados cada um desses elementos possui uma posição possui um índice o primeiro elemento está localizado no índice zer o segundo elemento está

localizado no índice 1 o terceiro elemento está localizado no índice do e assim por diante e vetores eles podem ter uma quantidade variável de elementos nesse caso aqui eu estou mostrando o vetor que possui cinco elementos Mas eles podem ter 3 2 1 0 quando quando o vetor é vazio né ou então mais 5 6 7 8 e assim por diante e os elementos de um vetor eles vão armazenar dados né E no caso da linguagem JavaScript os dados que ah os elementos de um vetor armazenam podem ser de tipos diferentes então o primeiro elemento

pode ser simplesmente o caractere a maiúsculo o segundo elemento pode ser o número 10 o terceiro elemento pode ser a string Oi o quarto elemento pode ser o o o número a o número decimal 1.5 E aí O Quinto Elemento é o valor boleano verdadeiro true E se nós fôssemos criar se nós fôssemos criar esse exato vetor utilizando a linguagem JavaScript nós iríamos escrever isto então nós teríamos os valores dos elementos do vetor separados por vírgula e nós teríamos o vetor completo envolvido por colchetes portanto é assim que você criaria um vetor na linguagem JavaScript

para mostrar isso na prática eu eu vou voltar aqui para o meu editor de código eu tenho aqui o código da última lição que eu esqueci de apagar deixa eu apagar ele aqui deixa eu limpar deixa eu limpar o meu terminal e o que nós vamos e o que nós vamos fazer agora será criar o mesmo vetor que nós vimos na ilustração anterior portanto primeira primeira parte importante da sintaxe de um vetor é que os elementos estarão envolvidos por colchetes portanto um abre colchetes e um fecha colchetes dentro dos colchetes eu vou especificar Quais são

os elementos do do vetor e portanto aqui eu terei o primeiro vai ser uma string com apenas um caractere será o a maiúsculo e agora para eu especificar o segundo elemento eu preciso colocar uma vírgula aqui para poder separar eles nós terem nós teremos agora o número decimal Ah o número inteiro 10 nós teremos a string Oi nós teremos o valor decimal 1.5 e nós teremos e nós teremos o o valor buano verdadeiro true e agora eu vou atribuir isso a uma constante chamada simplesmente de Vetor E agora se eu imprimir isso aqui no terminal

nós veremos o nosso vetor impresso aqui no terminal portanto a única diferença da forma como a gente criou o nosso vetor o nosso vetor aqui comparado ao slide que nós vimos anteriormente é que no slide o valor boleano verdadeiro tava com com T maiúsculo né O que está o que está incorreto na linguagem JavaScript o valor bule verdadeiro é minúsculo e o valor boleano falso é com f minúsculo também portanto detalhe importante portanto é assim que Nós criamos vetor Essa é a sintaxe para criação de vetores que basicamente são como se fossem listas mas que

vão ter alguns comportamentos específicos que nós vamos aprender agora ah eu vou criar aqui um segundo vetor que eu V chamar de números ele vai ser um vetor de números inteiros eu vou criar aqui um terceiro vetor chamado frutas que terá as seguintes Strings maçãs laranjas peras e uvas e agora eu vou imprimir no terminal o vetor números e o vetor frutas portanto agora nós vemos o vetor números impressos seguido do vetor frutas perfeito agora eu falei anteriormente que nós podemos eu falei anteriormente que os elementos de um vetor eles são identificados pelo seu índice

né pela sua posição no vetor e eu falei que o primeiro elemento de um vetor está localizado no índice zero e portanto se eu quiser selecionar este primeiro elemento do vetor frutas eu posso fazer isso da seguinte maneira primeiramente eu vou selecionar o vetor frutas e agora através da sintaxe dos colchetes digitando colchetes imediatamente após o nome do vetor e dentro dos colchetes especificando o índice do elemento que eu quero selecionar que neste caso é o índice zero o primeiro elemento eu poderei desta maneira selecionar o primeiro elemento do vetor frutas e agora se eu

imprimir isso no terminal nós veremos a string maçãs impressa aqui porque aqui na linha seis eu selecionei o vetor frutas através da sintaxe dos colchetes especificando o índice o índice do elemento que eu quero selecionar dentro dos colchetes eu selecionei o elemento no índice zero que é a string maçãs e eu poderia imprimir aqui também para mostrar que isso funciona o elemento no índice um E se eu executar este programa nós veremos maçãs seguido de laranjas que é o elemento no índice 1 e olha que interessante eu posso isso aqui são formas de obter um

valor Como que eu posso adicionar um valor a uma string por exemplo se eu quiser ã adicionar um valor adicionar um elemento a ao vetor frutas Como que eu posso fazer isso bem eu vou selecionar o vetor frutas e eu vou através do da sintaxe dos colchetes especificar o elemento no índice 4 e eu vou atribuir o valor o valor melancia a string melancia ao elemento no índice 4 portanto eu posso utilizar essa sintaxe dos colchetes para selecionar um elemento na hora de imprimir ele no terminal por exemplo mas eu também posso utilizar essa mesma

sintaxe para adicionar um elemento ao vetor e portanto agora se eu imprimir o vetor frutas no terminal nós veremos que agora o elemento no o elemento no índice 4 é a string melancias que eu acabei de adicionar e lembrando o primeiro elemento está no índice zero o segundo elemento está no índice 1 o terceiro elemento está no índice 2 o quarto elemento está no índice tr e o índice quatro que nós acabamos de adicionar o elemento ele não existia né por isso que nós vemos aqui o o novo elemento e os elementos anteriores eles não

foram alterados né Portanto o que nós acabamos de fazer aqui foi adicionar um elemento mas nós também podemos alterar um elemento existente através da mesma sintaxe dos colchetes portanto eu vou eu vou selecionar aqui o vetor frutas eu vou selecionar o elemento no índice um e eu vou atribuir o valor ah limão e portanto agora se eu se eu imprimir o vetor frutas no terminal nós veremos que o nós veremos que o que o elemento no índice um que anteriormente era laranjas agora é limão portanto nós podemos dessa maneira alterar o valor de um elemento

agora Digamos que nós queremos simplesmente adicionar um elemento no final do vetor nós não queremos especificar o índice específico como nós fizemos aqui na linha 11 nós queremos simplesmente adicionar um elemento no final do vetor para fazer isso eu vou selecionar o vetor através do operador ponto eu vou chamar o método chamado push o método push é o método que nós vamos utilizar é uma função por assim dizer de um vetor que nós vamos utilizar para adicionar um elemento no final do vetor imediatamente após o nome do método push eu vou colocar parênteses e aqui

dentro dos parênteses eu vou especificar qual é o valor do elemento que eu quero adicionar no final do vetor frutas e no caso aqui eu vou adicionar por exemplo morangos e portanto agora se eu imprimir no console o vetor frutas nós veremos que o valor morango agora é o último elemento do vetor frutas e a palavra push em inglês significa fica empurrar então nós estamos empurrando um valor um elemento no final do vetor existe uma maneira também da gente adicionar elementos no início do vetor para isso nós vamos utilizar o método unshift o método unshift

vai nos possibilitar adicionar elementos no início do vetor e aqui eu vou adicionar a string mangas e agora se eu imprimir isso no terminal nós nós veremos agora que deixa eu estender aqui nós veremos agora que a string mangas é o primeiro elemento do vetor e aqui o terminal ele simplesmente formatou aqui colocando pares de elementos em linhas Diferentes né só para melhorar a visualização pra gente não ter pra gente não ter um vetor aqui gigante aqui no terminal Ele simplesmente colocou em linhas diferentes mas ainda assim é o mesmo vetor funciona da mesma forma

portanto aqui nós vamos adicionar com o método shift nós vamos adicionar um elemento no início do vetor perfeito existe uma maneira da gente remover elementos de Vetor remover o último elemento e remover o primeiro elemento Vamos aprender como remover o último elemento de um vetor para isso nós vamos utilizar o método pop através do método pop nós vamos remover o último elemento de um vetor e eu acredito que deixa eu deixa eu imprimir primeiro para mostrar que funciona nós vos aqui agora o vetor frutas sem o elemento morango aqui no final que era o último

elemento né e eu acredito que esse elemento que foi removido né esse último elemento que foi removido através do método pop esse método ele retorna ao próprio elemento portanto esse trecho de código aqui ele retorna O próprio elemento que foi removido então eu posso atribuir o resultado dele a uma constante por exemplo fruta removida E agora se eu imprimir aqui fruta removida nós veremos que fruta removida é igual a morango que foi o elemento que foi removido e para para remover um elemento do do início né para isso nós vamos utilizar o método shift Portanto

o método shift vai remover um elemento do início do vetor e se eu imprimir agora o vetor frutas nós veremos que o elemento mangas que era o primeiro elemento Foi removido do vetor e se eu atribuir o resultado desse método aqui há uma constante chamada fruta removida dois e imprimir isso aqui no console nós veremos que fruta removida dois é o elemento mangas que foi removido de fato perfeito agora Digamos que nós queremos saber qual é qual é o índice de um elemento né portanto por exemplo se eu quiser saber qual é o índice do

elemento limão para isso eu vou utilizar o método index off a palavra index em inglês significa índice off significa d e através do método index off informando o valor do elemento cujo índice eu quero saber dentro dos parênteses que no caso aqui vai ser limão Isso aqui vai me retornar o índice do elemento limão no vetor frutas e eu vou imprimir isso aqui no terminal nós vemos que o índice do elemento limão é o índice um isso por o elemento do índice zero é o elemento maçãs o elemento no índice um é o elemento limão

portanto através do método index off nós podemos saber nós podemos nós podemos descobrir qual é o índice de determinado valor de determinado elemento e a última coisa que eu vou mostrar PR vocês é como verificar se determinada se determinada constante ou variável é um vetor para isso nós vamos selecionar o objeto aray Esse é um objeto especial na linguagem JavaScript que possui várias funcionalidades esse objeto ele possui um método chamado is array e aqui dentro dos parênteses Eu Vou Passar como argumento o o elemento né o a constante ou a variável que eu quero saber

se é um vetor e aqui no caso eu quero saber se frutas é um vetor e se eu imprimir o resultado disso aqui no terminal se frutas for de fato um vetor nós veremos true verdadeiro se não for um vetor nós veremos false E agora se eu executar este programa nós veremos true frutas é um vetor agora se eu testar aqui se por exemplo 10 é um vetor Bem 10 é um número inteiro né ele não é um vetor portanto nós iremos false falso e se eu testar aqui por exemplo olam mundo a string ham

mundo nós veremos que a string Ola Mundo também não é um vetor porque porque também retornou false e portanto é essa maneira como vetores funcionam na linguagem JavaScript vamos ã vamos vamos revisar aqui portanto nós temos a sintaxe para criar vetores é com a a sintaxe dos colchetes né você vai ter o vetor completo envolvido por colchetes e os elementos do vetor separados por vírgula para acessar um elemento específico do vetor você vai especificar o índice do elemento que você quer acessar dentro dos colchetes imediatamente após o vetor e Nós aprendemos alguns métodos de vetores

Nós aprendemos push para adicionar um elemento no final de Vetor unshift para adicionar um elemento no início do vetor pop para adicionar para remover um elemento do final do vetor Shift para remover um elemento do início do vetor e index off para descobrir qual é o índice de determinado elemento Vamos falar agora sobre objetos que são uma das estruturas de dados fundamentais da linguagem JavaScript objetos nos permitem agrupar dados diferentes em um único lugar de forma que esses diferentes dados façam parte da mesma coisa do mesmo objeto objetos possuem o que nós chamamos de propriedades

essas propriedades podem conter diferentes valores de de tipos diferentes como números inteiros Strings valores booleanos e até mesmo outros objetos pra gente entender como isso funciona vamos observar a seguinte ilustração nós temos aqui um objeto e esse objeto ele vai conter um grupo de propriedades essas propriedades elas podem ser de elas podem ser de diferentes tipos então por exemplo aqui o círculo representa um tipo de dado o triângulo aqui Vai representar outro tipo de dado esse essa propriedade aqui por exemplo ela tá representando um vetor né que é uma estrutura de dados que nós vimos

na última lição e as propriedades podem até ser outros objetos então aqui por exemplo essa propriedade dois ela por si ela é um objeto que possui duas propriedades então diferente dos vetores onde os elementos diferente dos vetores que são sequências de elementos e esses elementos são identificados pela sua posição pelo seu índice com objetos nós teremos propriedades que terão nomes e essas propriedades elas ah poderão ser de diferentes tipos e nós vamos nos referir a essas propriedades através do seu nome ao invés de se referir através do índice como era o caso de vetores então

eu vou abrir aqui o o nosso editor de código e pra gente poder entender como isso tudo funciona Vamos criar um programa que vai que vai representar uma pessoa então por exemplo nós ter o nome da pessoa como por exemplo Pedro eu vou atribuir esse valor a uma constante chamada nome vou criar uma segunda constante que vai representar o sobrenome uma terceira aqui que vai representar idade eu vou criar uma quarta constante que vai representar os passatempos então nós teros aqui Alguns alguns elementos para representar os passatempos nós teremos uma constante para representar a rua

dele como por exemplo Avenida dos Cravos nós teremos uma outra propriedade para representar a cidade e nós teremos uma outra aqui para representar o Estado então agora nós temos aqui um programa que possui sete constantes cada uma delas representa um tipo de informação diferente do usuário e aí eu posso imprimir isso no terminal né E se eu executar agora este programa nós veremos o nome do usuário impresso no terminal Só que tem um problema aqui essas diferentes constantes elas se referem a informações elas se referem a dados da mesma coisa da mesma pessoa né Nós

temos o nome o sobrenome a idade e outros dados que pertencem na lógica aqui do nosso programa a mesma pessoa só que no código de fato essa essas constantes elas são coisas individuais né no caso a constante nome aqui não tem relação nenhuma em termo em termos de código com o sobrenome ou com a idade ou com os passatempos cada uma dessas dessas constantes são coisas individuais né e portanto à medida que nós vamos criando programas mais complexos é interessante pra gente poder ter a capacidade de escrever o nosso código de forma que dados que

se referem à mesma coisa que se referem ao mesmo objeto possam ser criadas no nosso código de forma de forma que elas tenham essa relação entre si no código e para fazer isso nós podemos utilizar a estrutura de dados objeto então eu vou fazer aqui o seguinte eu vou eu vou declarar aqui uma constante chamada pessoa e para declarar um objeto que vai representar que será o valor da Constante pessoas eu vou digitar aqui ó abre Chaves e fecha Chaves e agora dentro das chaves eu vou especificar as propriedades que pertencem a esse objeto eu

vou apertar a tecla enter pra gente poder formatar melhor esse objeto e agora aqui eu vou especificar o nome da propriedade e o valor dela por exemplo eu vou declarar aqui uma propriedade chamada nome e o valor dela eu vou digitar dois pontos e o que vier depois dos dois pontos será o valor da propriedade nome do objeto pessoa então vou colocar aqui Pedro e agora para eu declarar uma segunda propriedade eu preciso colocar aqui um uma vírgula E aí agora eu posso declarar uma segunda propriedade que vai se chamar sobrenome eu vou digitar dois

pontos para agora poder especificar o valor dessa propriedade que será a string Silva para poder visualizar melhor esse objeto eu vou colocar essa propriedade sobrenome aqui na segunda linha Ok dessa forma nós poderemos visualizar melhor as propriedades a lista de propriedades desse objeto aqui eu poderia ter tudo na mesma linha eu poderia declarar o objeto dessa maneira aqui só que dificultaria um pouco a leitura né por isso normalmente quando nós quando nós declaramos um objeto a gente coloca cada propriedade em uma linha diferente eu vou continuar aqui eu vou declarar uma terceira propriedade chamada passatempos

que vai ser igual a um vetor de Strings Então vou declarar aqui músicas filmes esportes e como vocês podem ver nós podemos ter propriedades de diferentes tipos de dados a propriedade nome e a propriedade sobrenome são do tipo string já a propriedade passatempo é um vetor de Strings eu esqueci de de declarar uma propriedade aqui muito importante que que é a propriedade idade né vai ser igual ao número inteiro 18 e em seguida Olha que interessante se a gente reparar aqui ah na versão do nosso código anterior na na nossa primeira versão em que nós

declaramos constantes para representar o endereço da pessoa nós declaramos três constantes né endereço Rua endereço cidade e endereço estado e nós poderíamos declarar as propriedades do objeto pessoa de forma semelhante né endereço Rua endereço de cidade e endereço estado entretanto como essas três propriedades Elas têm uma relação entre si elas fazem parte de um endereço ao invés de declarar três propriedades individuais eu posso declarar uma propriedade chamada endereço e atribuir a essa propriedade endereço um objeto por sua vez que será que terá três propriedades uma propriedade chamada Rua uma propriedade chamada cidade e uma propriedade

chamada estado e portanto ainda que ainda que essa opção aqui também funcionaria declarar a nossa propried a declarar o nosso objeto pessoa dessa maneira aqui facilita a legibilidade do nosso código porque nós temos uma propriedade chamada endereço que por sua vez é um objeto contendo três propriedades rua cidade e estado e dessa maneira aqui nós tornamos o nosso código mais legível porque essas três propriedades aqui elas têm uma relação entre si né Elas são três informações sobre o endereço da pessoa e portanto ao invés de declarar como sendo propriedades individuais do próprio objeto eu declaro

elas como sendo propriedades do objeto endereço que por sua vez é uma propriedade do objeto pessoa portanto agora nós temos um objeto que possui algumas propriedades e que representa uma pessoa perfeito como que eu posso acessar uma propriedade de um objeto bem para acessar uma propriedade de um objeto primeiramente eu vou selecionar o objeto que no caso é pessoa e para poder acessar uma propriedade desse objeto eu vou utilizar o operador ponto que vai me permitir acessar uma propriedade como por exemplo nome e agora eu posso imprimir aqui no terminal agora se eu executar este

programa nós veremos o o nome Pedro novamente e eu posso por exemplo Como que eu posso acessar a propriedade passatempos bem eu vou selecionar o objeto pessoa e através do operador ponto eu vou acessar a propriedade passatempo e eu posso imprimir isso aqui no terminal perfeito mas repara que a propriedade passatempos é um vetor né Como que eu posso selecionar um elemento específico do vetor passatempos né da propriedade passatempos que é um vetor bem se você prestou atenção na última na última lição sobre vetores Você lembra que para acessar um elemento específico de um vetor

nós vamos utilizar a sintaxe dos colchetes então imediatamente após o nome do vetor eu vou digitar colchetes abre colchetes e fecha colchetes e dentro dos colchetes eu vou especificar o índice do elemento que eu quero selecionar Como por exemplo o índice zero que é o primeiro elemento do vetor e agora nós veremos impresso aqui a string músicas que é o primeiro que é o elemento no índice zero do vetor passatempos que é uma propriedade do objeto pessoas e portanto nós aprend nós acabamos de aprender como acessar uma propriedade e Aqui Nós aprendemos a acessar um

elemento de uma propriedade vetor perfeito como que eu posso agora acessar a propriedade endereço né bem eu vou selecionar o objeto pessoa através do operador ponto eu vou acessar a propriedade endereço e se eu emisso aqui no terminal nós veremos ali o objeto endereço que por sua vez Ah nós veremos a propriedade endereço que por sua vez é um objeto contendo três propriedades Como que eu posso agora acessar uma propriedade específica do objeto endereço bem lembrando a propriedade endereço é um objeto portanto se eu quero acessar uma propriedade específica eu posso utilizar eu posso não

eu tenho que utilizar o operador ponto portanto eu vou digitar aqui imediatamente após o nome da propriedade endereço eu vou digitar um ponto e através dela eu posso acessar uma propriedade como por exemplo cidade e agora se eu executar este programa nós veremos em impresso aqui Vitória isso porque eu estou acessando a propriedade cidade do objeto endereço do objeto pessoa e portanto nós acabamos de aprender a como acessar uma propriedade de uma propriedade perfeito como que nós podemos agora definir novas propriedades do objeto pessoa bem nós podemos fazer isso da seguinte maneira eu vou selecionar

o objeto pessoa e através do operador ponto eu vou definir uma nova propriedade como por exemplo e-mail e essa nova propriedade vai receber o valor pedro@gmail.com e portanto agora se eu imprimir o objeto pessoa nós veremos todas as propriedades que nós definimos inicialmente mais a propriedade que nós acabamos de definir portanto e assim que nós podemos definir uma nova propriedade perfeito vamos fazer o seguinte agora nós acabamos de aprender as os fundamentos né as operações com objetos eu vou fazer aqui eu vou criar aqui agora um vetor de objetos portanto eu vou definir uma constante

chamada tarefas e essa constante vai essa constante será igual a um vetor e esse vetor ele vai ter três objetos como sendo seus elementos o primeiro objeto terá uma propriedade chamada ID com valor 1 uma segunda propriedade chamada texto com com o valor tirar o lixo e vai ter uma terceira propriedade chamada completo com valor false ou seja para a tarefa de tirar o lixo ela não Foi completado nós teremos agora um segundo elemento que também vai ser um objeto ele terá uma propriedade D iG 2 ele terá uma propriedade texto igual a limpar a

casa ou melhor varrer o chão e terá uma terceira propriedade chamada completo com valor true verdadeiro e nós teremos aqui uma terceira um terceiro objeto com as seguintes propriedades e os seguintes valores e portanto agora entre as linhas 34 e 50 eu acabei de definir um vetor chamado tarefas esse vetor ele possui três elementos cada um dos quais é um objeto com as seguintes propriedades e os seguintes valores e no caso aqui a a propriedade texto representa o que é para fazer né qual tarefa que é a propriedade completo representa se a tarefa foi feita

ou não e a propriedade D é o identificador né a numeração aqui das propriedades normalmente é assim que você faria em programação né quando você tivesse fazendo um programa de verdade perfeito como que nós podemos agora considerando que tarefas é um vetor como que nós podemos acessar a propriedade texto do segundo elemento desse vetor pare por um momento e pense tarefas é um vetor como que nós podemos acessar a propriedade texto do segundo elemento desse vetor bem vamos primeiro vamos selecionar o vetor tarefas para selecionar o segundo elemento do vetor tarefas eu vou utilizar a

sintaxe dos colchetes aqui dentro das dos colchetes eu vou especificar o índice do segundo elemento ou seja o índice um o primeiro elemento está no índice zero o segundo elemento está no índice 1 e agora fora dos colchetes eu vou através do operador ponto selecionar a propriedade texto e portanto com este trecho de código nós estamos selecionando o vetor tarefas através dos colchetes através da sintaxe dos cochet Nós estamos selecionando um elemento em um índice específico e através da sintaxe do ponto Nós estamos selecionando uma propriedade específica desse elemento portanto é assim que você selecionaria

a propriedade texto do segundo elemento do vetor e se tudo e se o que e se o que eu acabei de escrever estiver certo nós veremos no terminal a string varrer o chão quando eu executar o programa portanto nós vemos aqui varrer o chão que é exatamente isso o que nós acabamos de selecionar portanto assim nós podemos acessar uma propriedade de um elemento específico assim nós podemos criar um vetor de objetos e a última coisa que eu vou mostrar para vocês aqui é como formatar um objeto né como formatar como formatar um objeto de programação

em JavaScript em formato string deixa eu mostrar para vocês como que vai fazer isso em JavaScript nós temos um objeto chamado Jason esse objeto possui um método possui uma função chamada string fy basicamente o que essa função aqui faz é pegar um um objeto é pegar um objeto e transformar ele para sua versão string de forma que fica mais fácil de transmitir dados entre entre sistemas basicamente então vou passar aqui o vetor tarefas para para o método string F do objeto Jon mesmo se você é iniciante de programação Provavelmente você não vai entender muito bem

o que isso aqui significa mas deixa eu imprimir isso aqui na deixa eu imprimir isso no terminal para vocês verem o resultado portanto Aqui nós temos agora o vetor tarefas formatado em json eu poderia por exemplo Deixa eu fazer o mesmo só que com o objeto pessoa que é o objeto que Nós criamos aqui em cima né portanto nós vemos aqui o objeto pessoa formatado em formatado como Jason portanto se você quer formatar um objeto em formato json você utiliza o método string Fi do do objeto Jason é um objeto especial na linguagem JavaScript e

simplesmente Isso aqui faz com que o objeto fique mais fácil de ser transmitido entre serviços né normalmente quando você quando você tem quando você quer criar um programa como por exemplo um um site esse site ele vai se comunicar com o servidor ele vai se comunicar com o servidor para receber dados e normalmente você vai formatar esses dados em formato json que é esse formato aqui ao invés de ser formatado dessa maneira aqui que é mais fácil de que é mais legível para Nós seres humanos né Essa formatação aqui com espaços com novas linhas é

uma formatação para Nós seres humanos essa formatação aqui ela é a formatação apropriada para o computador para sistemas né Portanto vamos revisar vamos revisar esse conceito de objetos portanto se nós se nós quisemos Se nós queremos criar um objeto Essa é a sintaxe que nós que nós temos que seguir o nome do objeto como por exemplo objeto ele vai receber E aí dentro das chaves você vai especificar dentro das chaves né você vai especificar as propriedades e os valores e tem um detalhe aqui importante as propriedades eu esqueci de citar isso as propriedades Nós também

podemos chamá chamá-las de Chaves e o valor das propriedades a informação das propriedades nós chamamos de valor então Eh é comum a gente dizer que um objeto é um conjunto de chaves e valores esses valores Eles serão acessados através das chaves que é o nome da propriedade e objetos podem ter propriedades de diferentes tipos então Aqui nós temos uma string Aqui nós temos um vetor e Aqui nós temos uma propriedade por si por si só se nós queremos acessar uma propriedade de um objeto nós vamos primeiramente selecionar o objeto nós vamos através do operador ponto

selecionar uma propriedade específica ficar através do seu nome e se nós queremos formatar um objeto como uma string Jason nós vamos através do objeto Jason utilizar o método string F para poder formatar o objeto dessa maneira vamos falar agora sobre estruturas condicionais que são das Ferramentas fundamentais das linguagens de programação estruturas condicionais vão nos permitir executar determinados blocos de código apenas se determinadas condições forem satisfeitas pra gente poder ver isso na prática eu vou abrir aqui o meu editor de códigos e digamos que eu faça o seguinte Digamos que eu crie duas variáveis duas duas

constantes uma chamada x que ah com o valor 30 e uma chamada Y com o valor 10 e em seguida eu quero fazer o seguinte eu quero imprimir console P log a seguinte string x é igual a y só que eu só quero imprimir eu só quero executar essa linha 4 se de fato x for igual a y e como que eu faço isso como que eu posso criar uma estrutura que vai executar determinada linha de código se determinada condição for verdadeira para fazer isso nós vamos escrever o seguinte a palavra-chave que nós vamos utilizar

será a palavra-chave if Então essa é a primeira é o primeiro comando importante para essa lição a palavra if em inglês significa se e if É o comando que nós vamos utilizar para criar uma estrutura condicional eu vou digitar aqui espaço parênteses e aqui dentro dos parênteses nós colocaremos a condição que caso seja satisfeita em outras palavras se a condição que nós vamos colocar dentro dos parênteses for verdadeira o bloco de códigos será executado e aqui eu vou escrever o seguinte x = a y e atenção igual igual é o que nós chamamos de operador

de igualdade nós estamos comparando se x é igual a y e caso x seja igual a y essa essa condição Vai resultar em true verdadeiro se for falsa Vai resultar em false falso portanto essa essa expressão é uma expressão condicional é uma expressão buana como nós chamamos e ela Vai resultar em verdadeiro ou falso fora dos parênteses eu vou digitar um abre Chaves e fecha Chaves e dentro das chaves nós vamos colocar o bloco de códigos o bloco de código que nós queremos que seja executado caso a condição seja verdadeira e o e a linha

de código que nós queremos executar é essa aqui na linha set então eu vou copiar ela aqui vou recortar digitando cont control x e aqui eu vou colar digitando cont control v e atenção quando nós temos uma estrutura condicional em que nós temos um bloco de código que depende da estrutura condicional nós colocamos uma tabulação aqui à esquerda Logo no início da linha para poder indicar visualmente que esse bloco de código aqui ele depende dessa estrutura condicional se esse código fosse escrito assim ele ainda funcionaria não teria problema ainda o código ainda ia aa ainda

ia funcionar só que quando nós temos um bloc de código que depende de uma que depende de uma estrutura condicional nós colocamos uma tabulação digitando a tecla Tab que fica do lado esquerdo do teclado em cima em cima da tecla caps loock e essencialmente o que a o que a o que a tecla Tab faz é colocar uma tabulação que é quatro quatro espaços né 1 2 3 4 quatro espaços é uma tabulação E é assim que nós indicamos que esse bloco de código ele depende dessa estrutura condicional e portanto esse bloco de código aqui

só será executado se é isso que a palavra if significa a condição booleana aqui for verdadeira e outra coisa importante o o igual igual é o operador de igualdade ele testa se duas variáveis se dois valores são iguais já um único sinal de igual é o sinal de atribuição ele vai pegar o valor da direita e vai ele vai pegar o valor da direita e vai atribuir a variável que estará à esquerda do sinal de igual Então são coisas totalmente diferentes um sinal de igual apenas é o operador de atribuição quando você quer atribuir um

valor a uma variável ou uma constante e dois sinais de iguais dois sinais de igual é o operador de igualdade ele vai testar se ambos os itens se ambos os elementos TM um mesmo valor e caso tenha a expressão resulta em verdadeiro e portanto agora se eu quiser executar este programa nós não veremos impresso no terminal x = y porque x não é igual a y né X tem o valor 30 Y tem o valor 10 e portanto essa expressão x = y não resultou em verdadeiro ela resultou em falso se eu mudar o valor

de y para 30 e agora executar o programa nós veremos impresso no terminal X é ig a y eu vou voltar o valor de de Y para 10 e agora eu quero fazer o seguinte Ah deixa eu remover isso aqui eu quero fazer o seguinte eu quero imprimir eu quero executar essa linha aqui se x for igual a Y sen não eu quero eu quero executar essa linha de código aqui x não é igual a y então eu quero criar uma estrutura condicional que vai fazer o seguinte que vai testar se x iG Y E

caso seja vai executar essa linha aqui se não vai executar essa segunda linha aqui então vai ser o caso alternativo né para fazer isso eu vou escrever o seguinte eu vou escrever aqui ó if É o comando que nós acabamos de aprender x = y eu vou ter um bloco de código aqui que vai ser essa linha que vai imprimir x = y e olha que interessante depois aqui do fecha Chaves eu vou digitar um espaço e eu vou digitar a palavra-chave else a palavra else em inglês significa senão e o comando else na linguagem

JavaScript vai especificar um caso alternativo caso a condição que vem antes resulte em falso e aqui dentro da Chaves esse bloco de código esse bloco de código aqui que depende do comando else só será executado se essa condição aqui em cima resultar em falso se essa condição aqui em cima resultar em verdadeiro é esse bloco de código que será executado se não E é isso que else E é isso que else significa sen Não é esse bloco aqui que será executado e aqui nesse bloco eu vou colocar essa linha aqui ó vou copiar ela vou

recortar e vou colar aqui e portanto agora nós temos uma estrutura condicional que vai testar se x for igual a y isso aqui será executado se não isso aqui será executado e portanto apenas um desses blocos de código será executado ou esse primeiro bloco será executado ou então esse aqui será executado dependendo se essa condição aqui entre os parênteses resultou em verdadeiro ou resultou em em falso e portanto agora se eu executar este programa nós veremos impresso x não é igual a y porque x iG 30 Y iG 10 x = y resultou em falso

e portanto esse bloco de código aqui não foi executado mas esse aqui que que depende do seão que depende do comando else foi executado e portanto você só pode utilizar o comando else junto com o comando if né não tem você não pode ter um comando else sozinho assim não faz sentido porque o comando else ele vai especificar o caso alternativo né se não faça isso aqui e portanto nós podemos entender essa construção aqui essa estrutura que é muito utilizada na programação não só com a linguagem JavaScript mas em basicamente 99% das linguagens de programação

da seguinte maneira o programa ele vai iniciar aqui no início e ele vai testar x iG Y se essa expressão resultar em verdadeiro se essa expressão resultar em verdadeiro x = y foi impresso sen não se se a expressão resultar em falso Então o que foi impresso é x não é igual a y e portanto e portanto opa não é igual e portanto é assim que essa estrutura aqui funciona ã digamos agora deixa eu eu vou comentar esse bloco de código porque eu quero fazer o seguinte eu quero imprimir eu quero imprimir três mensagens diferentes

eu quero imprimir X é menor do que y x é maior do que y e x é igual a y eu quero imprimir eu quero executar essas três linhas de código dependendo se x é menor se é maior ou se é igual a y e para isso eu fi o seguinte para essa primeira aqui ó X é menor do que Y eu vou escrever aqui ó x ou melhor if se x menor do que Y essa é a nossa condição abre Chaves fecha Chaves e é essa linha de código que eu vou colocar aqui no

bloco portanto esse bloco aqui será executado se x for menor do que Y para esse aqui X é maior do que Y eu vou escrever o seguinte if x maior do que Y essa é a nossa condição e aqui eu vou ter o bloco de códigos que será essa linha aqui e logo embaixo eu terei if x = y e aqui no bloco eu terei essa linha de código portanto Agora eu tenho deixa eu colar isso aqui para ficar melhor pra gente ver Dea deixa eu remover esse aqui portanto Agora eu tenho três estruturas condicionais

uma testa X é menor do que y a outra a outra testa se x é maior do que y e a outra testa se x é igual a y e agora se eu executar este programa nós veremos X é maior do que Y se x for menor do que Y vamos botar aqui 5 e eu executar X é menor do que Y só que se forem iguais X é ig a y portanto essas estruturas condicionais elas funcionam da forma como a gente escreveu aqui né e uma forma de visualizar essa esse código é da seguinte

maneira Ah nós podemos visualizar aquele código da seguinte maneira eu vou ter o início do programa e eu terei o primeiro teste aqui ó X é menor do que Y se for verdadeiro X é menor do que y será impresso se isso aqui for falso nada será executado né E logo embaixo nós teremos a segunda comparação ou a segunda estrutura condicional X é maior do que Y se for verdadeiro X é maior do que y será impresso E se for falso nada vai ser executado e por fim nós teremos a terceira condição x = y

se for verd x iG y será executado E se for falso nada vai ser executado E aí o programa ele vai chegar ao fim porque embaixo nós não temos mais nada né Nós temos essas três estruturas condicionais E no fim nós não temos mais nada e portanto o programa ele se encerra Só que tem uma questão aqui que é a seguinte [Música] ah Digamos que deixa eu voltar aqui pro nosso PR Nossa ilustração Digamos que ao invés de ter um programa dessa maneira que vai testar as condições abaixo mesmo que seja inútil Mesmo que não

seja necessário né porque se a gente prestar atenção aqui se essa condição aqui ó X Men Do que Y for verdadeira nós podemos pular para o fim do programa né porque se x é menor do que Y automaticamente essa condição aqui e essa condição aqui elas vão resultar em falso por motivos óbvios né se x é menor do que Y automaticamente ele não é maior do que y e ele não é igual a y e essas E essas condições esses essas expressões que o programa testa que o computador testa né elas gastam poder computacional por

assim dizer sempre que você tem sempre que você tem uma expressão no seu programa isso vai gastar poder computacional do computador e ainda que os nossos computadores hoje hoje em dia sejam Super Poderosos de forma que essas essas expressões sejam bem sejam tarefas triviais para o computador né você não vai ter um você isso não vai afetar o desempenho do seu computador não faz sentido de um ponto de vista lógico no seu programa testar condições que não seja necessário serem testadas e portanto pra gente poder resolver Ah uma forma de resolver essa questão Seria da

seguinte maneira ao invés de testar todas as três condições ainda que ainda que caso anterior né caso anterior seja resulte em verdadeira as que estão abaixo não seja necessário testá-las né Nós podemos resolver esse problema da seguinte maneira se nós tivermos uma lógica dessa forma aqui em que se essa condição for verdadeira o bloco A mensagem X é menor do que y será executado e automaticamente o programa ele vai para o fim né a as Ah o programa ele vai ser encerrado E essas E essas condições aqui não serão testadas entretanto se essa condição aqui

em cima resultar em falso essa somente assim somente aí somente nesse caso essa condição aqui será testada se resultar em verdadeiro X é maior do que y será impresso E aí o programa ele vai ser encerrado e senão se essa condição aqui resultar em falso aí sim nós teremos a terceira condição sendo testada e que caso seja verdadeira e que caso seja seja verdadeira x é igual y será impressa no terminal E aí o programa se encerra E caso seja falsa o programa Vai encerrar sem que nada aconteça Portanto vamos vamos criar essa lógica aqui

utilizando código e portanto aqui eu vou remover tudo aqui vou vou remover essa parte aqui porque nós vamos fazer o seguinte ó eu tenho aqui essa eu tenho essa estrutura x ah se x for menor do que Y depois aqui do fecha Chaves eu vou escrever senão else se e aqui eu terei a segunda condição X é maior do que Y se Sim nós teremos o bloco de código aqui console P log X é maior do que y e aqui depois do fecha Chaves dessa estrutura condicional aqui eu terei ELS senão se x for igual

a y e aí então nós teremos nós teremos a seguinte linha de código console pon log X é ig a y e portanto Agora eu tenho uma estrutura condicional que caso a primeira condição resulte em verdadeiro as condições abaixo não serão testadas E aí o programa ele vai continuar com as linhas de código que vem abaixo por exemplo dessa maneira se essa primeira condição aqui for verdadeira esse se essa primeira condição aqui x menor do que Y for verdadeira esse bloco de código será executado E essas condições aqui nem serão testadas porque elas são dependentes

da condição anterior se essa condição aqui resultar em falso aí sim aí sim esta condição aqui a segunda x maior do que y será testada E caso ela resulte em verdadeiro aí então esse bloco de código que depende dela será executado E caso ela seja falsa aí então esta condição aqui será testada e esse esse bloco de código será executado caso essa condição seja verdadeira E aí depois disso nós teremos a linha 12 aqui sendo impressa sendo executada no terminal portanto deixa eu alterar aqui o valor do do X para 5 pra gente ver isso

na prática eu vou executar aqui ó e portanto ó nós vemos aqui impresso X é menor do que y e nós vemos esse impresso porque a primeira condição resultou em verdadeiro X é menor do que y e portanto esse bloco aqui ele foi executado os blocos abaixo eles nem foram testados essas condições elas não foram testadas porque elas dependem dessa dessa anterior se eu alterar o valor de X para 15 e executar este programa nós veremos X é maior do que y e do que Y esse bloco de código ele foi executado e essa condição

que veio abaixo ela nem foi testada por outro lado se x for igual a 10 x É iG Y nós vimos aqui impresso na terminal isso porque a primeira expressão resultou em falso a segunda expressão também resultou em falso e a terceira expressão resultou em verdadeiro e portanto esse bloco de código aqui ele foi executado E aí em seguida o programa ele ele continua executando as linhas de código abaixo e é por isso que você vê oa mundo oa mundo impresso aqui no terminal e a forma como a gente lê essa estrutura toda aqui é

a seguinte se if esta condição for verdadeira Execute isto aqui se não é isso O que o else significa se não se essa condição aqui for verdadeira Execute este bloco de código se não se essa condição for verdadeira Execute este bloco de código e portanto cada um somente um desses BL somente um desses blocos de código será executado porque eles são interdependentes né eles pela forma por conta da forma como os comandos if e o comando else funcionam somente um desses blocos será executado ah portanto essa estrutura aqui ela a gente pode visualizar ela da

seguinte maneira né como nós est estávamos vendo anteriormente Só que tem uma questão aqui esse comando essa lógica ela funciona só que tem uma melhor tem uma melhora que pode ser feita aqui que é a seguinte uma dessas três condições uma das três condições que está sendo testada ela é inútil a gente não precisa testar essa condição e a e a condição que está sendo testada e que é inútil pare pare o momento e t dispensar qual que é pause o vídeo se você precisar eu espero que você tenha pausado mas de qualquer maneira a

condição que está sendo testada e que não é necessário que seja é essa terceira condição aqui ó x = y e o motivo é o seguinte ah e o motivo é o seguinte se x não for menor do que y e se x não for maior do que Y automaticamente só tem como ele ser igual a y se ele não é menor e se ele não é maior só tem como ele ser igual e portanto uma forma da gente poder melhorar o design do nosso código o design da nossa lógica é a seguinte a gente

ah a gente não precisa testar aquela terceira condição se x é igual a y portanto se a gente testar portanto se a gente testar essa primeira condição e ela resultar em falso e a gente testar essa segunda condição e ela resultar em falso logo nós podemos imprimir a mensagem X é iG Y no terminal pela por conta da lógica né se x não for menor nem maior do que Y automaticamente ele é igual a y e nós sabemos isso sem nem mesmo precisar testar a condição x iG y e portanto agora eu vou voltar aqui

para nosso para o nosso código e pra gente poder implementar aquele design aquela lógica eu vou remover essa condição aqui ó se x = y e eu vou ter aqui somente o comando else né se x for menor do que Y Execute ISO aqui senão se x for maior do que Y Execute isso aqui sen não Execute isto aqui e portanto agora se eu executar este programa nós veremos x iG Y impresso no terminal mesmo sem ter a condição x = y sendo testada aqui porque porque por porque por Pois por conta do resultado das

condições acima nós temos certeza de que x é igual a y e portanto nós podemos entender a estrutura condicional if da seguinte maneira se nós temos o seguinte trecho de código if x menor do que 10 e aí nós temos abre Chaves fecha Chaves comando 1 nós podemos ler isso da seguinte maneira se que é o if condição for verdadeira Execute este bloco Ah já essa construção aqui ó nós podemos ler ela da seguinte maneira se condição for verdadeira Execute este bloco se não Execute este bloco então e aí esses dois blocos eles são mutuamente

exclusivos somente um dos dois blocos será executado dependendo se a condição for verdadeira ou não e o terceiro a terceira construção que nós aprendem Que Nós aprendemos é essa aqui se condição um for verdadeira Execute este bloco se não se condição dois for verdadeira Execute este outro bloco e Senão nós teremos o terceiro bloco executado que será executado caso as condições anteriores resultarem em falso eu vou voltar aqui para o nosso para o nosso para o nosso editor de código porque tem tem outra tem outra existe outra estrutura condicional que nós devemos aprender e para

que a gente possa aprendê-la eu vou primeiramente inicializar uma constante aqui chamada cor com o valor azul com a string azul e em seguida eu vou analisar o valor da Constante azul e dependendo do valor dependendo Dependendo do valor da da constante a cor perdão eu vou nessa estura nessa estrutura condicional que nós vamos criar agora nós vamos avaliar o valor da Constante cor e dependendo do valor que a constante cor possui nós vamos vamos fazer diferentes coisas nós vamos executar diferentes linhas de código e para isso eu vou utilizar a palavra-chave Switch a palavra-chave

Switch é a palavra-chave que nós vamos utilizar para criar essa estrutura condicional eu vou digitar um espaço eu vou digitar parênteses aqui dentro dos parênteses eu vou colocar o nome da variável ou da Constante cujo cujo valor eu vou analisar E no caso a constante que eu quero a constante cujo valor eu quero analisar é a constante cor por isso eu vou escrever aqui cor dentro dos parênteses fora dos parênteses eu vou digitar abre Chaves fecha Chaves e aqui dentro das chaves eu vou especificar cada eu eu vou especificar os casos que eu quero os

casos que eu quero analisar para o o valor da variável cor e para isso eu vou utilizar a palav a palavra-chave case Case espaço e aqui logo logo depois da palavra-chave Case eu vou especificar um valor para a variável cor que eu quero analisar E caso o valor da variável cor seja esse valor que eu vou especificar aqui eu vou executar determinada linha de código portanto eu vou especificar aqui por exemplo vermelho e ah eu vou digitar dois pontos e abaixo dos dois pontos eu vou eu vou escrever por exemplo console console. log a cor

é vermelho e portanto essa linha de código aqui ela só vai ser executada caso o valor da da Constante cor seja esse valor aqui que nós especificamos e eu posso especificar um segundo caso aqui ó Case Verde console. log a cor é verde e aqui eu vou especificar aqui ó Azul caso azul a cor é azul e por fim nessa estrutura condicional é que eu estou analisando casos Diferentes né casos específicos para o valor de determinada variável ou constante né eu posso especificar um caso padrão eu posso especificar um caso caso nenhum dos casos acima

resulte em verdadeiro Então se nenhum desses casos aqui for verdadeiro se o valor da Constante cor não for vermelho não for verde ou não for azul por exemplo se aqui eu escrevesse Amarelo então eu posso especificar um caso padrão aqui que vai ser executado se nenhum dos casos acima resultar em verdadeiro e aqui eu vou digitar default Essa é a palavra-chave que nós vamos utilizar a palavra-chave a palavra default default em inglês significa padrão e é esse comando que nós vamos utilizar para definir o caso padrão caso os casos acima não deu e aqui eu

vou eu vou ah escrever o seguinte console.log a cor não é vermelho nem Verde nem azul e portanto agora se nós executarmos esse programa nós veremos impresso no terminal a a cor não é vermelho nem Verde nem azul porque o valor da Constante cor é amarelo e portanto nenhum desses casos aqui resultou em verdadeiro e por isso o caso padrão default foi ativado E aí essa linha de código aqui ela foi executada por outro lado se eu colocar aqui vermelho vamos ver o que acontece então Olha que interessante o valor da Constante cor agora é

vermelho só que quando nós executamos o nosso programa nós vemos aqui X = Y mas isso é isso é dessa estrutura aqui condicional portanto a gente pode ignorar só que em seguida nós vemos os quatro casos sendo ativados né Nós vemos aqui ó impresso no terminal a cor é vermelho a cor é Verde a cor é azul e a cor não é vermelho nem Verde nem azul e o motivo aqui é o seguinte quando você está utilizando essa estrutura sutch para criar casos específicos e analisar o valor de uma constante ou de uma variável e

executar determinadas linhas de código dependendo se aquele Caso for verdadeiro ou não se um dos casos quando um dos casos é ativado todos os casos abaixo também são ativados se você não especificar o comando Break que é o último comando que nós vamos aprender nessa lição logo após a linha de código que foi executada e portanto se eu não ess esse comando Break aqui assim que um desses casos for verdadeiro todos os casos abaixo são ativados também então por exemplo como o valor da variável cor é vermelho esse caso aqui ele foi ativado verdadeiro Então

essa linha de código ela foi executada e todos os casos abaixo também foram executados se o valor da variável cor fosse fosse Verde por exemplo então aí o caso Verde seria ativado E aí os os casos abaixo também seriam ativados e esse aqui não seria ativado né porque ele tá antes e se eu executar ess código nós podemos ver a cor é verde a cor é azul a cor não é vermelho nem Verde nem azul o caso vermelho aqui não foi não foi ativado porque ele tá antes né ele tá antes do primeiro caso que

foi ativado e portanto se a gente quiser impedir esse comportamento nós vamos utilizar o comando Break depois nós vamos utilizar o comando Break no final do bloco de do bloco de código de cada um de cada um dos casos específicos né Nós não precisamos isso para o caso padrão Porque ele é o último nós precisamos desse comando Break aqui antes dos casos específicos pra gente poder impedir esse comportamento e dessa maneira agora se eu executar este programa nós veremos a cor é verde e esse caso aqui ele foi ativado essa linha de código ela foi

executada e o comando Break ele também foi executado o que ele e efetivamente os casos abaixo não for ativados e por isso nós vemos apenas a é verde se eu mudar se eu alterar o valor para vermelho por exemplo nós veremos a cor vermelho os casos abaixo não foram ativados Se eu mudar para Azul nós vemos a cor azul o caso padrão não foi ativado e se eu colocar aqui Amarelo nós veremos a cor não é vermelho nem Verde nem azul porque nenhum desses casos aqui foi ativado e portanto é assim que nós podemos utilizar

o comando sut para criar uma estrutura condicional de casos né em que nós estamos especificando casos específicos as palavras-chaves importantes aqui é a palavra-chave Switch que cria a estrutura condicional a palavra chave Case que especifica casos específicos né valores específicos para a constante ou variável que está sendo analisada nós temos a palavra chave default que vai especificar um caso padrão e nós temos a palavra chave Break que vai impedir que os casos abaixo sejam sejam ativados e você pode estar se perguntando Ah por que que por que que hã Por que que essa estrutura condicional

sutch funciona dessa maneira né Por quê bem ela funciona dessa maneira caso você queira caso você queira esse comportamento em que os casos abaixo abaixo sejam ativados e nós podemos ver nós podemos ver um caso em que isso é útil com o seguinte com o seguinte da seguinte maneira eu vou criar aqui h eu vou criar uma estrutura sutch ou melhor vou criar um contador aqui vai receber o valor c e aqui eu vou eu vou criar uma estrutura condicional sutch que vai analisar que vai analisar o valor do contador caso cas contador seja C

eu vou imprimir um terminal 5 caso o contador seja quatro eu vou imprimir no terminal 4 Caso seja TR eu vou imprimir aqui TR Caso seja do eu vou imprimir aqui do caso um eu vou imprimir um e o caso padrão aqui vai ser bum e portanto e portanto eu estarei simulando aqui com este com este com com esse código aqui um um temporizador de uma bomba né e e vai funcionar da seguinte maneira caso o valor do contador seja c o o primeiro caso aqui será ativado e aqui será impresso no terminal e como

nós não temos um comando Break aqui para para para encerrar a estrutura condicional todos os casos abaixo também serão ativados e portanto agora se eu executar este programa nós veremos 5 4 3 2 1 bum se o contador fosse 4 nós veremos aqui 43 3 2 1 bum e se contador for TR nós veremos 3 2 1 Boom então nós podemos ver aqui um Ah nós nós podemos ver aqui uma situação em que esse comportamento dos casos de uma estrutura condicional Switch são o né uma outra forma da gente ver essa utilidade é a seguinte

se eu tiver aqui por exemplo eu eu vou criar aqui uma constante chamada sexo que representa o sexo de uma pessoa por exemplo m para masculino E aí eu eu vou criar uma estrutura condicional que vai analisar e vai fazer o seguinte caso o valor seja m e aqui olha que interessante eu posso especificar o eu posso especificar um caso e eu posso especificar imediatamente um segundo caso para que ambos os casos executem a mesma linha de código e eu vou imprimir aqui ó masculina e aqui eu vou ter caso F maiúsculo ou f minúsculo

feminino e aí eu posso ter um um valor padrão aqui por exemplo inválido E aí agora se eu executar este programa nós vemos masculino feminino inválido Mas isso é porque eu não eu não especifiquei um comando Break aqui né e portanto agora eu vou limpar esse terminal se eu executar este programa com o valor da Constante sexo como sendo M nós veremos masculino se for m minúsculo nós veremos masculino novamente então esses dois casos ah executam essa linha aqui se for F maiúsculo nós veremos feminino se for F minúsculo por algum motivo esse esse editor

de código ele sobe ele rola o ele rola até lá para cima quando quando eu altero ali mas tudo bem Se for F minúsculo feminino Ok e se for aqui X por exemplo que não é nem M nem F nós veremos ali inv inválido que é a que é o caso padrão né e portanto é assim que o a estrutura condicional Switch ela funciona ah e portanto nós podemos ler a estrutura condicional o sut da seguinte maneira avalie o valor de X Caso seja a Execute isto Caso seja B Execute isto Caso seja C Execute

isto E caso não seja nenhum Assim nenhum acima Execute isto aqui só que tem um problema eu esqueci de colocar aqui a eu esqueci de colocar os os comandos Break aqui né então aqui no caso se se um desses casos específicos aqui se um desses casos específicos aqui for ativado os que estão abaixo também serão ativados porque não tem o comando Break então é importante ter atenção a isso e tem uma terceira estrutura condicional muito muito importante que é a seguinte eu vou voltar aqui pro nosso editor de código e eu vou fazer o seguinte

eu vou inicializar eu vou inicializar uma variável chamada número inicialmente sem valor definido e aí eu V fazer o seguinte eu vou testar aqui eu vou testar se cor que é a constante que nós definimos aqui em cima né se cor for igual a vermelho então eu vou fazer o seguinte número é igual a 10 sen não número é igual a 20 e portanto aqui se cor fo igual a vermelho o número vai ser igual a 10 sen não o número vai ser igual a 20 bem simples né ah e se eu executar isso aqui

se eu imprimir número na tela nós veremos o valor 20 porque o a constante cor ela possui o valor Amarelo perfeito portanto essa estrutura condicional ela funciona só que quando nós temos uma uma estrutura condicional simples como essa aqui em que ela vai fazer determinada coisa se o valor se o valor de determinada constante ou variável né se se o valor de uma variável for determinado valor ela vai fazer uma coisa se não ela vai fazer outra coisa essa essa estrutura aqui em que você vai fazer uma coisa ou então outra coisa dependendo de determinada

condição tem uma forma da gente abreviar isso e nós fazemos isso da seguinte maneira ao invés de escrever isso tudo aqui deixa eu deixa não vou comentar ao invés de fazer isso aqui eu posso fazer o seguinte ó eu posso ver aqui ó let número recebe cor igual a vermelho e olha que interessante depois da condição aqui eu vou digitar um ponto de interrogação e o que vier depois do ponto de interrogação será o valor que vai ser atribuído à variável número caso a condição seja verdadeira então aqui vai ser 10 e depois eu vou

digitar dois pontos e o que vier depois dos dois pontos será o valor que será atribuído avaliável número caso a condição seja falsa e portanto aqui eu vou digitar 20 isso aqui é o que nós chamamos de operador ternário porque nós teremos três componentes nós teremos a condição é o primeiro componente nós teremos o Val que será retornado caso a condição seja verdadeira e nós temos o terceiro componente que será o valor que será retornado caso a condição seja falsa e a gente separa eles da seguinte maneira nós temos a condição nós temos a condição

um ponto de interrogação Que basicamente você tá perguntando cor é igual Vermelho Se sim retorne isso aqui se não retorne isso aqui e portanto agora se eu imprimir número eu vou ter que deixa eu e e portanto deixa eu remover isso aqui e portanto essa linha 72 aqui ela é exatamente igual a esse trecho de código aqui só que muito mais conciso eu vou ter que eu vou ter que comentar esse esse trecho de código aqui porque como eu tô declarando uma variável e depois declarando uma segunda variável com o mesmo nome isso vai isso

vai causar um erro né Para eu manter esse trecho de código aqui eu tenho que dar um nome diferente para essa variável aqui por exemplo número dois aí não vai causar problema Ah e agora se eu imprimir aqui ó console log número dois nós leremos novamente o valor 20 porque essa condição aqui resultou em falso e portanto e portanto foi este valor aqui que foi retornado n e isso aqui é o que nós chamamos de operador ternário o o operador ternário ah coloquialmente chamado de operador ponto de interrogação dois pontos é assim que eu gosto

de chamar operador ponto de interrogação dois pontos ele vai ter uma condição um valor que vai ser retornado caso a condição seja verdadeira e um valor que vai ser retornado caso a condição seja falsa e você vai separar esses três componentes com com ponto de interrogação depois da condição e com dois pontos depois do primeiro valor que será retornado e nós podemos ler essa nós podemos entender esse operador det ternário da seguinte maneira expressão ponto de interrogação retorne isso aqui se a expressão for verdadeira ou então retorne isso aqui se a expressão for falsa e

portanto Estes são as três estruturas condicionais que nós acabamos de aprender if else e else if suit para especificar casos específicos e o operador ternário caso você queira uma estrutura condicional bem simples em que você quer fazer determinada coisa ou outra coisa se a condição for verdadeira ou não vamos falar agora sobre estruturas de repetição que são uma das Ferramentas fundamentais em qualquer linguagem de programação estruturas de repetição vamos vão nos permitir repetir determinado bloco de código diversas vezes dessa maneira nós não precisaremos copiar e colar a mesma linha de código ou o mesmo bloco

de código diversas vezes caso queiramos executar essa linha ou bloco de códigos ou bloco de códigos várias vezes pra gente poder entender como estrutura de repetição funciona eu vou abrir aqui o meu editor de código e digamos que o meu problema aqui seja o seguinte eu queira eu quero criar um programa que vai que vai simular o miado de um gato então eu posso escrever aqui por exemplo console.log para imprimir uma mensagem no terminal E aí eu vou imprimir a string miau se eu executar este programa aqui digitando nodes programa PJS nós veremos miar o

impresso no terminal e digamos que o nosso gato ele vai miar várias vezes né Então o que eu vou fazer aqui será copiar e colar essa linha de código mais duas vezes para ter um código que vai simular um gato miando três vezes e agora se eu executar este programa nós veremos mial o impresso três vezes no terminal Só que tem uma questão aqui Imagine que mais tarde eu queira alterar o funcionamento desse programa para que o gato Mie 50 vezes se eu for fazer isso com o design que eu estou utilizando neste momento eu

terei que copiar e colar essa linha de essa linha de código 50 vezes né e normalmente em programação quando nós copiamos e colamos a mesma linha de código é uma oportunidade pra gente poder utilizar uma estrutura de repetição e a maneira como nós estamos resolvendo esse problema dessa ah a maneira como nós estamos resolvendo este este problema dessa maneira é dessa maneira aqui ó nós temos o início do programa e nós temos a o comando que imprime mial no terminal várias vezes não então nós temos um programa sequencial né ele inicia executa imprime três vezes

mial e depois finaliza ele começa no início o código ele começa a executar no início e termina no fim só que para a gente poder criar uma estrutura pra gente poder melhorar o design desse código nós vamos criar uma estrutura de repetição E para isso nós vamos utilizar a palavra-chave while while ah em inglês significa enquanto e o while É o comando que nós vamos utilizar para para criar uma estrutura de repetição eu vou voltar aqui pro editor de código eu vou remover tudo isso aqui que eu escrevi e agora olha que interessante primeiramente antes

de eu utilizar a palavra antes de utilizar o comando while para criar estrutura de repetição eu vou criar uma variável com o comando let chamada contador que inicialmente vai receber o valor zero essa variável contador ela vai controlar por assim dizer quantas vezes a estrutura de repetição será executada em seguida aqui na linha dois eu vou escrever o seguinte o que significa lembrando enquanto espaço parênteses e aqui nos parênteses dentro dos parênteses Eu vou eu preciso colocar uma expressão buana ou seja uma expressão que Vai resultar em um valor verdadeiro ou um valor falso e

a ideia aqui é a seguinte o bloco de códigos que vai depender da da repetição while ele vai ser executado enquanto a condição que está dentro dos parênteses for verdadeira e a condição aqui vai ser a seguinte eu vou testar se contador que é a variável Que Nós criamos na linha um é menor do que três porque eu quero executar o bloco de códigos três vezes fora fora dos parênteses eu vou digitar um abre Chaves e fecha Chaves e agora tudo o que estiver dentro das chaves o bloco de código que estiver dentro das chaves

será executado a cada repetição e aqui eu faria o seguinte eu vou eu vou digitar aqui ó console P log Mia e portanto Esse é o meu bloco de código é apenas uma linha de código que imprime Mia no terminal Só que tem um problema aqui se eu executar esse código da maneira que eu escrevi aqui eu vou criar o que nós chamamos de repetição infinita pelo seguinte motivo na linha um eu estou ã eu estou inicializando uma variável chamada contador com valor zero na linha dois eu estou criando uma estrutura de repetição com a

palavra while e a forma como você lê aqui que é a seguinte enquanto while Enquanto essa expressão aqui for verdadeira Execute este bloco de código essa condição aqui contador menor do que TR é verdadeira né contador é zero zero é menor do que TR e portanto isso aqui Vai resultar em verdadeiro e por isso nós e por isso o bloco de código será executado uma vez em seguida quando o bloco de código foi executado a primeira vez a condição ela vai ser testada novamente zero é menor do que três bem zero é menor do que

trê portanto a condição novamente resultará em verdadeiro e o bloco de códigos será executado E aí a condição será testada novamente contador é menor do que três sim então por isso o bloco de código será o bloco de códigos será executado novamente e o programa ele vai continuar nessa repetição infinita porque aqui na condição nós estamos testando se contador é menor do que TR mas em nenhum lugar nós estamos atualizando o valor do contador para que eventualmente ele deixe para que eventualmente a condição Deixe de ser verdadeira portanto aqui dentro do bloco de códigos que

é executado a cada repetição nós precisamos atualizar o valor do contador por exemplo adicionando uma unidade a ele para que eventualmente a condição Deixe de ser verdadeira mas para mostrar como que essa repetição infinita vai funcionar caso a gente não Atualize o valor do contador eu vou deixar esse código dessa maneira eu vou limpar aqui o terminal digitando control l e quando eu executar o seu programa você vai ver que a string mial será impressa infinitas vezes no terminal portanto agora o programa tá executando infinitamente para eu poder cancelar isso aqui eu vou digitar control

c para cancelar e se eu subir aqui a janelinha do meu terminal nós vemos que a string mial ela foi impressa infinitas vezes portanto quando você utiliza uma repetição while Você precisa de alguma maneira caso você esteja utilizando um contador você precisa atualizar o valor desse contador para que eventualmente a condição Deixe de ser verdadeira portanto aqui eu posso escrever por exemplo contador recebe contador mais um E agora se eu executar este programa nós veremos a string mial impressa três vezes no terminal isso porque agora na linha 4 eu estou atualizando o valor do contador

para que seja o seu próprio valor mais um uma forma de tornar esse código um pouco mais conciso é escrevendo contador mais igual a 1 dessa maneira o valor de do contador também será incrementado em uma unidade o nosso programa ele ainda funciona ou então eu posso escrever aqui contador mais mais e dessa maneira o nosso programa ele ainda vai funcionar porque quando nós colocamos o operador mais mais depois de o nome depois do nome de uma variável uma uma variável numérica isso vai fazer com que o valor dessa variável seja incrementado em uma unidade

e portanto Esse programa aqui funciona da forma como a gente espera né Só que tem uma uma forma da gente melhorar ele um pouquinho mais é uma melhora que não faz muita diferença mas é importante pra gente poder entender como que são as convenções na programação né A forma como programadores trabalham e e a questão aqui é a seguinte Normalmente quando nós temos uma variável que representa um contador ou seja uma variável que vai controlar quantas vezes algo acontece normalmente nós vamos chamar essa variável de i e portanto eu vou alterar aqui o valor Tá

eu vou alterar o nome da variável contador para i e dessa maneira a funcionalidade a forma como o código funciona ele não mudou funciona exatamente da mesma da mesma maneira só que agora nós estamos utilizando o nome I para a variável contador ao invés de ao invés de utilizar o nome contador e portanto agora o nosso código se a gente quiser observar ele ã se a gente quiser analisar ele nós podemos analisá-lo dessa maneira aqui no início nós temos a inicialização do contador e como sendo aqui tá como sendo um né mas no nosso código

nós inicializam como sendo como sendo zero e aqui a condição que tá sendo testada no nosso slide é se o contador i é menor ou igual a 3 mas no nosso exemplo nós colocamos I menor do que 3 e aqui funciona o seguinte se a condição que é esse quadradinho aqui né I menor ou iG 3 for verdadeira miia será pressa no terminal o o valor do contador será atualizado I recebe i + 1 e depois a condição Ela será testada novamente se for verdadeira miau será impresso e vai receber i + 1 atualizando o

valor do contador I E aí a condição vai ser testada novamente e eventualmente quando i deixar de ser menor ou igual a 3 em outras palavras quando o valor de I passar a ser 3 3 não é menor ou igual a 3 e portanto hã ou ou melhor quando i passar a ser 4 ah 4 não é menor ou igual a 3 e portanto a condição resultaria em ah resultaria em falso E aí o programa se encerraria porque não tem mais linhas de código abaixo eu vou alterar eu vou alterar o valor inicial de I

para um 1 e a condição para I menor ou igual a 3 para mostrar que realmente vai funcionar dessa maneira então aqui I eu vou mudar eu vou mudar para que seja 1 e a condição será I menor ou igual a 3 e portanto agora se eu executar este programa ele ainda funciona exatamente da forma como a gente quer só que em programação quando nós temos Normalmente quando nós temos um contador ele nós vamos ã nós vamos inicializá-la como sendo zero ali no slide tava ali no slide o contador I tá inicializado como sendo um

e a condição nós estamos testando a se i é menor igual a 3 Mas normalmente nós vamos inicializar o contador como sendo zero e nós vamos testar se o contador é menor do que o número que nós queremos que o bloco de código seja executado né então aqui no caso eu inicialize o contador como sendo zero e eu tô testando se ele é menor do que o número que eu quero que o bloco de códigos seja executado é é dessa maneira que nós ã programadores pensamos e é importante que você se habitue a pensar dessa

maneira também existe um outro tipo de existe um outro um outro tipo de estrutura de repetição que é criada com a palavra-chave for a palavra a palavra for em em inglês tem várias traduções uma delas é para e nós vamos utilizar o comando for para para criar uma estrutura de repetição eu vou remover tudo aqui e nós vamos fazer o seguinte primeiramente eu vou eu vou digitar aqui a palavra chave for espaço parênteses e aqui dentro dos parênteses nós teremos três coisas primeiramente eu vou vou criar aqui um comentário nós teremos três coisas aqui dentro

dos parênteses separado por ponto e vírgula então n nós temos essa primeira parte aqui nós temos ess essa segunda parte e nós temos essa terceira parte a primeira parte que vem que que está antes do primeiro ponto e vírgula é o que nós chamamos de inici inicialização Então esse esse primeiro trecho de código que estará antes do primeiro ponto e vírgula é o que nós chamamos de inicialização será inicialização do contador que vai controlar a estrutura de repetição a segunda coisa aqui que está entre os pontto e vírgulas será a condição será a condição que

será testada para definir se o bloco de códigos será executado ou não e a terceira coisa que nós teremos depois do último ponto e vírgula será a atualização do contador então nós temos três três partes aqui para entender nesse parênteses que vem depois da palavra chave for nós temos a inicialização do contador nós temos a condição que será testada para definir se a estrutura de repetição Será se o bloco será executado ou não e a terceira coisa aqui será a atualização do contador para que eventualmente ã caso o contador caso o contador esteja sendo utilizado

aqui na condição né como nós vimos anteriormente com com a estrutura de repetição while nós teremos atualização aqui para que eventualmente a condição seja falsa e aí a estrutura de repetição se interrompa depois dos parênteses nós teremos abre Chaves fecha Chaves e o que quer que tiver aqui será o bloco a ser executado perfeito Então vamos Então vamos ao invés de colocar comentários Vamos colocar as coisas que nós realment precisamos e o problema aqui que nós teremos será o seguinte nós queremos repetir nós queremos executar este bloco de código 10 vezes então vamos lá ó

primeiramente nós temos a inicialização do contador então aqui eu vou digitar let para criar uma variável contador recebe zero mas lembrando Normalmente quando Nós criamos uma variável que vai ser um contador nós chamamos essa variável de I aqui na condição Eu vou testar o seguinte se I for menor ou igual a 10 e aqui na atualização eu vou escrever o seguinte I recebe I mais 1 ou então eu posso escrever I mais ig a 1 ou então I mais mais todas essas três opções vão Inc o valor da variável I em uma unidade eu posso

escrever I recebe I mais 1 I mais = 1 ou então I mais mais agora a gente precisa entender o seguinte quando o programa quando a linguagem JavaScript né chega em uma estrutur de repetição for a inicialização é a primeira coisa a ser executada então então a criação aqui do contador é a primeira coisa a ser executada Só que essa inicialização ela é literalmente uma inicialização ela só acontece no início da repetição é a primeira coisa que acontece e só acontece uma vez Então essa definição aqui de I sendo igual a zero recebendo o valor

Zero Só é executada uma vez no início da repetição em logo após o logo após o contador ser inicializado a condição Ela será testada i é menor ou igual a z0 como I tem o valor zero essa condição Ela Vai resultar em verdadeiro porque 0 é menor ou igual a 10 e por isso como a condição resultou em verdadeiro o bloco de códigos ele será executado e ap o bloco de código ser executado a atualização do contador será executada Então esse trecho aqui ó i mais mais será executado o valor do contador I será incrementado

em uma unidade e em seguida a condição será testada novamente I que agora tem o valor 1 é menor ou igual a zer é menor ou igual a 10 verdadeiro essa expressão resulta em verdadeiro por isso o bloco de código é executado e em seguida o cortador é atualizado e em seguida a condição é testada novamente e a estrutura de repetição for vai continuar nesse ciclo até que eventualmente a condição resulte em falso E aí a estrutura de repetição se encerrará E o que e e o que quer que tiver em baixo né os outros

comandos que tiver embaixo serão executados e a execução do programa Continuará então portanto a ideia aqui é a seguinte o o inicializador só executa uma vez Logo no início da repetição e em seguida você vai ter a condição test o Bloc executado e atualização executada nessa ordem então então vai primeiro ação depois o bloco executado e depois atualização a condição o bloco executado atualização mas Lembrando que a inicialização do contador é a primeira coisa que acontece Logo no início e apenas uma vez e aqui o que eu vou o que eu vou imprimir aqui no

no terminal será o seguinte console P log número da repetição número da repetição for e aqui eu vou encaixar de forma dinâmica o próprio contador que é a variável i e agora se eu executar este programa nós veremos número da repetição for zero número da repetição for um e eu tô e eu tô encaixando aqui de forma dinâmica a variável i o contador i a cada repetição só que tem só que tem uma questão aqui que é a seguinte ah eu falei inicialmente que o nosso problema aqui era nós queríamos criar uma estrutura de repetição

que ia executar algo um número de vezes igual a 10 só que nós podemos ver aqui que que essa essa essa mensagem ela foi impressa 11 vezes né se a gente contar zero até 10 são 11 vezes e portanto uma forma da gente corrigir esse problema seria por exemplo inicializando o contador a partir de um isso certamente resolveria o nosso problema agora nós temos 10 repetições um até 10 só que lembrando ã programa adores começam a contar a partir de zero então portanto essa correção aqui que a gente fez não seria a correção mais otimizada

o certo é começar a contar a partir de zero a solução otimizada aqui seria ao invés de testar se i é menor ou igual a 10 o certo seria testar se i é menor do que 10 e dessa maneira o nosso contador I iria de zero até no 9 e quando chegasse no 10 a condição aqui resultaria em falso porque 10 não é menor do que 10 e se eu executar este programa agora nós vemos que a nossa mensagem foi impressa um número de vezes igual a 10 com o contador com o contador I indo

de zero até 9 e certamente essa ideia de inici começar contando a partir de zero e testar se o contador é menor do que o número de vezes que nós queremos que o bloco de cóigo seja executado certamente é um é um conceito assim um pouco difícil de entender para quem é iniciante mas é assim que nós fazemos as coisas em programação com a estrutura de repetição for e essa estrutura de repetição for é uma estrutura de repetição muito muito muito muito muito utilizada em programação não não só com com a linguagem JavaScript e essa

é a ideia e essa ideia de de inicializar o contador a partir de zero e na condição aqui testar se ele é menor do que o número de vezes que nós queremos que o bloco de códigos seja executado também é um conceito muito muito utilizado em programação então é importante que vocês entendam como que isso aqui está funcionando perfeito pra gente poder entender de forma mais prática a estrutura de repetição for eu vou fazer o seguinte eu vou copiar aqui da minha colinha um um vetor é um vetor de objetos cada objeto possui três propriedades

um ID um texto e a propriedade completo e eu vou fazer o seguinte deixa eu diminuir aqui o zoom logo abaixo eu vou fazer o seguinte eu quero criar uma estrutura de repetição que vai executar o número de vezes igual ao tamanho do vetor ou seja igual ao número de elementos que o vetor possui e a cada repetição eu quero imprimir o eu quero imprimir o texto da tarefa então aqui na linha 19 eu vou escrever for parênteses let i igual 0 eu estou criando um contador com valor zero inicialmente e aqui eu vou testar

o seguinte enquanto a a condição aqui será a seguinte I menor do que tarefas pon len propriedade length nos a propriedade length de um vetor nos retorna o tamanho do vetor né Quantos elementos o vetor possui e em seguida eu vou atualizar o valor do nosso contador I com i+ mais e o bloco de código que será executado será o seguinte aqui eu vou executar console. log vou criar um template de string tarefa aqui eu vou encaixar de forma dinâmica o contador I fora ah eu vou colocar aqui dois pontos eu vou encaixar de forma

dinâmica tarefas que é o nosso vetor Eu vou acessar um elemento específico do vetor tarefas através da sintaxe dos colchetes o índice que eu vou passar aqui será o próprio contador i e eu tô fazendo isso pelo seguinte eu quero eu quero imprimir cada um dos itens do vetor se eu utilizar o próprio contador i como sendo índice para acessar determinado elemento na primeira na primeira repetição o contador I será igual a zero na segunda repetição o contador I será igual a 1 e na terceira repetição o contador I será igual a 3 e dessa

maneira nós poderemos acessar cada um dos três elementos do vetor tarefas e é e esse é um dos principais motivos pelos quais o contador de uma estrutura de repetição for é inicializado com zero né porque frequentemente nós utilizamos estruturas de repetição for para percorrer determinado vetor e acessar cada um dos elementos desse vetor para fazer alguma tarefa né para ah para fazer alguma coisa né para fazer alguma ação e como e pelo fato que os elementos de um vetor o índice dos elementos de Vetor começam a partir de zero é por isso que nós inicializam

o contador com zero para que nós possamos para que nós possamos acessar todos os elementos de um vetor começando a partir do primeiro que está localizado no índice zero e aqui eu quero eu quero acessar uma propriedade específica né Eu quero acessar a propriedade texto Então eu vou utilizar o operador ponto para acessar a propriedade texto do elemento localizado no índice I do vetor tarefas e agora eu vou colocar um ponto e vírgula aqui no final da linha para encerrar a lógica e agora eu vou executar este programa e nós agora tarefa zero tirar lixo

tarefa 1 jantar com esposa tarefa 2 reunião com o chefe e eu posso melhorar esse programa aqui da seguinte maneira aqui no template de string on onde eu estou encaixando de forma dinâmica o o contador i eu posso escrever aqui ó dentro das chaves né onde a gente encaixa a variável de forma dinâmica eu posso colocar aqui ó i mais um e dessa maneira nós teremos as Strings pressas de forma mais legível para o usuário né o usuário ele não entende que elementos de um vetor né elementos de uma lista começam a partir de zero

então é comum quando a gente vai utilizar o próprio contador para impresso em alguma mensagem é comum a gente fazer isso aqui né comum a gente somar o contador mais um para que fique um pouco mais para que faça mais sentido né porque tarefa zero não é assim que a gente não é assim que a gente numera as coisas no mundo real perfeito Então esse é o essa essa é a estrutura de repetição for tem uma maneira da gente simplificar isso aqui tem uma maneira da gente simplificar esse acesso a cada um dos elementos de

um vetor e da seguinte maneira eu vou deixar aqui como não vou apagar não vou apagar para deixar como referência Ah também utilizando também utilizando como for eu vou escrever o seguinte dentro dos parênteses eu vou escrever let e aqui eu não vou eu eu ah pra gente poder o que eu vou fazer agora será criar uma estrutura de repetição que vai percorrer os elementos de um vetor no caso o vetor tarefas só que aqui vai ser diferente eu não vou inicializar um contador vai ser a lógica vai ser diferente dessa aqui aqui eu vou

fazer eu vou fazer o seguinte eu vou eu vou inicializar o próprio elemento do vetor e o nome que eu vou dar para essa variável que vai representar o próprio elemento do vetor eu posso dar qualquer nome por exemplo x ou então a ou então z ou então Y pode ser qualquer nome só que como é como o vetor se chama tarefas eu vou chamar de tarefa essa variável que Vai representar um dos elementos do vetor eu vou digitar espaço e aqui eu vou digitar a palavra-chave off espaço e o nome do vetor que eu

quero percorrer que no caso é o vetor tarefas e portanto Agora eu tenho uma estrutura de repetição também utilizando a palavra chave for só que agora ao invés de utilizar essa sintaxe aqui em que eu estou ah executando um bloco de códigos um número de vezes igual a condição que nós temos aqui tendo o contador e atualizando o valor do contador aqui eu tô literalmente percorrendo o determinado vetor e acessando cada um desses elementos do vetor com o nome personalizado aqui lembrando poderia ser x ou então poderia ser Y ou então poderia ser sei lá

Babalu mas tarefa me parece um bom nome para essa variável que vai representar cada um dos elementos do vetor e essa é a sintaxe você vai digitar o você vai digitar o comando for e dentro dos parênteses você vai escrever let espaço um nome arbitrário para o elemento off e o nome do vetor que você e o e o nome do vetor de fato que no caso é tarefas né que nós temos aqui criado na linha um e portanto agora eu vou imprimir aqui ó console.log E aí eu vou eu vou fazer aqui ó tarefa

que é o elemento em particular né a cada repetição operador ponto para poder acessar a propriedade texto e portanto agora eu vou limpar isso aqui e agora nós temos aqui a nós temos tarefa 1 tarefa 2 tarefa 3 da primeira estrutura de repetição e nós temos aqui agora o texto o texto de cada uma das tarefas [Música] ah sendo acessada aqui através da variável tarefa que nós que nós temos acesso com essa construção aqui com essa sintaxe utilizando a palavra-chave let e utilizando a palavra-chave off e a maneira como você lê é o seguinte para

determinado elemento de determinado vetor é assim que eu leio né para determinado elemento E aí você vai dar um nome aqui qualquer né para determinada tarefa de do vetor tarefas Execute este bloco de código portanto é assim que você pode ler isso aqui né para você entender melhor o código que você está escrevendo e a forma como você L essa estrutura de repetição aqui é a seguinte para determinado contador com valor inicial zero Enquanto essa condição for verdadeira Execute este bloco de código Atualize o valor do contador teste a condição novamente e continue portanto Esses

foram os as duas estruturas de repetição que nós utilizamos na linguagem JavaScript nós temos a estrutura de repetição o que vai testar uma condição né E nós temos a estrutura de repetição for que vai ter três partes vai ter a inicialização vai ter a condição e vai ter o incremento vai ter a atualização do contador e nós vimos também como utilizar o comando for para percorrer um vetor selecionando os elementos individuais do vetor perfeito Vamos falar agora sobre funções que é uma ferramenta essencial na maioria das linguagens de programação funções funcionam da seguinte maneira Digamos

que nós temos um programa que é composto por várias linhas de código cada barra aqui representa uma linha de código E aí nós reparamos que determinadas sessões do nosso código fazem a mesma coisa são compostos pelas mesmas linhas de código que fazem a mesma coisa uma maneira da gente melhorar o design do nosso programa é utilizando funções e o que nós vamos fazer será o seguinte nós vamos pegar essas sessões de código que fazem as mesmas coisas que fazem a mesma coisa nós vamos extrair esses blocos de código e colocá-los em uma função e em

seguida nós vamos utilizar essa função no nosso programa que essencialmente vai fazer ah que essencialmente vai executar as linhas de código que que compõe a função né pra gente poder ver isso na prática eu vou abrir aqui o meu editor de código e Imagine que eu queira criar um programa que vai dizer olá para algumas pessoas então para isso eu vou escrever aqui console.log Olá Pedro e aí eu posso copiar isso aqui E aí nós teremos Olá Carlos Olá Luiz e se eu executar este programa digitando note programa PJS nós veremos ali Olá Pedro Olá

Carlos e Olá Luiz entretanto ao invés de simplesmente escrever essas linhas de código aqui eu posso criar uma função da seguinte maneira eu vou utilizar a palavra-chave function para criar uma função espaço e o que eu escrevei imediatamente após a palavra-chave function será o nome da função como por exemplo ah dizer dizer olá por exemplo eu vou escrever parênteses logo após o nome da função espaço abre Chaves fecha Chaves e tudo tudo que tiver dentro do tudo o que tiver dentro das chaves serão as linhas de código que serão executadas quando a função for executada

quando a função for chamada eu vou apertar um enter aqui e vocês vão reparar que quando eu apertei enter automaticamente o editor de código ele colocou uma tabulação aqui ele colocou quatro espaços para indicar que o bloco de código que eu vou escrever aqui as linhas de código que eu vou escrever aqui elas fazem parte dessa função é uma indicação visual por assim dizer e portanto aqui eu vou escrever o seguinte console. log Olá Pedro ponto e VG no final da linha de código para encerrar o pensamento e agora ao invés de literalmente digitar console

log eu vou utilizar a função que eu acabei de criar escrevendo o nome da função seguido de parênteses para poder executar a função e um ponto e vírgula para encerrar a linha de código e agora se eu executar este programa node programa PJS nós veremos impresso no nosso terminal Olá Pedro e eu posso criar outras funções para os outros né eu posso criar uma função para dizer para dizer olá Carlos eu posso criar uma função para dizer olá Luiz só que eu preciso alterar o dessas funções né como são funções diferentes eu preciso de nomes

diferentes né Então essa aqui vai dizer essa aqui vai ser dizer olá Pedro dizer olá Carlos e essa aqui dizer olá Luiz e agora aqui eu vou chamar Essas funções dizer olá Pedro dizer Olá Carlos e dizer olá Luiz e portanto aqui entre as linhas um e 11 eu estou definindo três funções as funções dizer olá Pedro dizer olá Carlos e dizer olá Luiz Essas funções aqui por si só essas linhas de código por si só elas só criam as funções se eu tiver somente as linhas 1 até 11 e executar este programa A gente

vai ver que nada acontece eu executei o programa e nada aconteceu né o programa foi executado e se encerrou Se nós queremos utilizar as funções nós precisamos chamar as funções em outras palavras nós precisamos escrever o nome da função seguido de parênteses para poder executar aquela função e agora se eu executar este programa desta vez nós veremos as três mensagens impressas no terminal só que criar funções dessa maneira aqui meio que contraria o propósito de criar uma função né o propósito de criar uma função é poder criar um criar um trecho de código reutilizável né

só que Essas funções aqui elas não são reutilizáveis eu estou criando uma função individual para cada um para cada para cada uma dessas pessoas né seria interessante eu queria uma função de tal maneira que eu possa passar para a função eu possa informar a função o nome de o nome da pessoa para quem eu quero dizer olá E para isso nós podemos fazer o seguinte eu vou remover essas linhas de código e eu vou criar agora uma nova função chamada simplesmente de dizer olá eu vou digitar parênteses e aqui dentro dos parênteses eu vou especificar

o nome de um argumento argumento é o nome que a gente dá para informações para dados que nós passamos para a função e que a função pode utilizar esse argumento que eu vou passar para a função Olá Ah para a função dezer Olá será o nome da pessoa para quem eu quero dizer olá e portanto aqui dentro dos parênteses eu vou especificar o nome desse argumento eu poderia chamar de x ou de Y ou de a só que nome me parece um bom nome para um argumento que vai representar o nome da pessoa que eu

quero dizer olá eu vou digitar aqui o abre Chaves Abre Chaves e fecha Chaves e aqui dentro eu vou especificar que a a função de zolar quando quando ela for chamada né ela vai executar o seguinte console. log Olá espaço mais nome que é o argumento que foi passado para a função ponto e vírgula para finalizar a linha de código e aqui quando eu for chamar a função dentro dos parênteses eu vou passar o nome da pessoa que será o argumento nome e portanto quando essa linha de código aqui foi executada quando a linha C

for executada a função dizer olá será chamada e o argumento que a gente tá passando aqui entre os parênteses será o argumento que vai ser passado aqui e automaticamente será o valor que nós teremos aqui na hora de imprimir essa mensagem no terminal e portanto agora se eu executar este programa nós veremos a Olá Pedro e eu posso dizer olá para o Carlos e para o Luiz e nós veremos agora e nós vemos agora também Olá Pedro Olá Carlos e Olá Luiz Vamos pensar no seguinte agora Digamos que eu chame a função dizer olá e

não passe um valor e não passe nenum ento aqui dentro dos parênteses né eu tô na linha oito eu estou chamando a função de zero lá só que aqui dentro dos parênteses eu não vou passar argumento nenhum como sendo eu não vou eu não vou passar valor nenhum como sendo aqui o valor do argumento nome né O que será que vai acontecer quando eu chamar quando eu executar este programa eu vou ah executar node programa PJS E olha que interessante nós temos impresso aqui no termin Olá Pedro Olá Carlos e Olá luí como como anteriormente

só que agora nós temos aqui Olá undefined e o que isso significa é o seguinte quando nós temos uma função que espera receber um argumento e quando nós chamamos ess quando nós chamamos essa função sem passar nenhum valor para esse argumento efetivamente o que acontece é o seguinte esse argumento ele fica com o valor especial undefined undefined em inglês significa não definido e undefined na linguagem JavaScript é um valor especial que representa algo não definido como nós não passamos nenhum argumento aqui na na definição da função o argumento nome ficou com o valor undefined não

definido uma maneira da gente poder resolver isso é o seguinte eu posso definir um valor padrão para o argumento caso quando eu chame a função eu não passe nenhum argumento para a função e nós podemos fazer isso da seguinte maneira aqui na definição da função dentro dos parênteses onde eu especifico que o nome do argumento é nome eu vou digitar um sinal de igual e imediatamente depois do sinal de igual o que quer que eu Escreva aqui o valor que eu escrever aqui será o valor do argumento nome caso eu não passe nenhum argumento quando

a função for chamada e portanto aqui depois do sinal de igual eu vou digitar ã aspas fulano e portanto se eu chamar a função de zero lá sem especificar um valor para argumento nome o argumento nome terá o valor fulano e portanto agora se eu executar nós veremos Olá Pedro Olá Carlos Olá luí e Olá Fulano que foi o valor padrão do argumento quando eu não passei argumento nenhum na linha oito quando eu chamei a função funções também podem receber mais de um argumento e para mostrar isso eu vou criar uma nova função aqui chamada

se apresentar essa função ela vai receber dessa vez dois argumentos o primeiro vai ser nome e o segundo será idade e aqui dentro do bloco de códigos eu vou escrever o seguinte console.log para imprimir uma mensagem meu nome é nome console log eu tenho idade e agora quando eu for chamar a função se apresentar eu tenho que passar ã dois argumentos né O Primeiro vai ser o nome como por exemplo Maria e o segundo argumento será a idade como por exemplo 30 e olha que interessante quando uma função ela recebe mais de um argumento os

argumentos eles precisam estar separados por vírgula né ah e quando nós chamamos a função Eles também precisam estar separados por vírgula se eu se não tivesse um um vírgula aqui isso geraria um erro Ok portanto é importante separar os argumentos por vírgula tanto na definição da função quanto na chamada da função e eu posso chamar essa mesma função passando argumentos diferentes como por exemplo Bruno 25 e portanto agora se eu executar este programa nós vemos Olá Pedro Olá Carlos olá luí olá Fulano como anteriormente E Agora Nós também vemos meu nome meu nome é Maria

eu tenho 30 Meu nome é Bruno Eu tenho 25 Ah eu esqueci de colocar aqui a palavra anos né Ah meu nome é Maria eu tenho 30 anos o meu nome é Bruno e eu tenho 25 anos quando uma função recebe mais de um argumento Nós também podemos definir valores padrão para um dos argumentos e nós fazemos isso da seguinte maneira aqui na função se apresentar caso o caso o usuário na hora de chamar a função não especificar o segundo argumento como por exemplo se apresentar e aqui eu passo simplesmente ah Miguel por exemplo vamos

ver o que acontece deixa eu diminuir o zoom aqui da tela então se eu executar este programa agora nós veremos aqui meu me nome Meu nome é Miguel eu tenho undefined anos como nós como nós vimos anteriormente né se a gente não passar determinado argumento pra função ess esse argumento ele vai ficar com o valor undefined não definido então portanto aqui na linha 17 quando nós chamamos a função se apresentar passando o Miguel como argumento o argumento nome recebeu o valor Miguel só que o idade não recebeu valor nenhum né então ele ficou com com

valor especial undefined só que nós podemos resolver isso da seguinte maneira aqui na definição da função eu posso especificar um valor um valor padrão para o argumento caso ele não seja informado na chamada da função aqui depois do nome do argumento eu coloquei um sinal de igual e aqui eu vou colocar como valor uma string com um sinal de ah interrogação e agora quando eu chamar este quando eu executar este programa nós veremos aqui meu nome é Miguel e eu tenho sinal de interrogação anos e nós podemos e tá meio estranho isso aqui né porque

eu tenho meu nome é em uma linha e eu tenho determinado determinada quantidade de anos numa segunda linha eu posso eu posso resolver isso da seguinte maneira vou pegar essa string aqui vou copiar e vou colocar aqui e agora se eu executar este programa ele tá um pouco melhor formatado né exceto eu preciso de um espaço [Música] aqui perfeito agora ele tá melhor formatado e tá funcionando mais ou menos da forma como eu quero além deec tá linhas de código funções também podem retornar valores para o programa pra gente poder entender como isso funciona eu

vou criar uma nova função aqui chamada criar nome completo essa função ela vai receber ah dois argumentos o primeiro vai chamar nome o segundo vai chamar sobrenome e a aqui dentro eu vou fazer o seguinte eu vou criar uma um template string uma um template de string né e aqui eu vou encaixar o seguinte eu vou encaixar o argumento nome espaço e o argumento sobrenome e agora olha que interessante essa string aqui que AC de criar de forma dinâmica colocando o nome o argumento nome espaço e o argumento sobrenome eu posso retornar eu posso retornar

esse resultado aqui de volta para o programa através da palavra-chave return portanto a palavra-chave return ela vai retornar um valor de volta para o programa quando uma função é chamada ponto e vírgula aqui no final e agora eu posso declarar aqui uma constante chamada nome completo essa constante ela vai ser criada ela vai receber o seguinte valor eu vou chamar a função criar nome completo e eu vou passar aqui como argumento ah Pedro e o segundo argumento vai ser Silva e portanto aqui na linha 22 eu estou fazendo o seguinte eu estou chamando a função

criar nome completo que nós definimos aqui entre as linhas 18 e 20 essa função eu estou passando dois argumentos o primeiro argumento é a string Pedro o segundo argumento é string Silva aqui dentro da função criar nome completo eu estou pegando esses dois argumentos Estou colocando eles dentro de um de um de um template de string que vai basicamente juntar essas duas Strings nessa ordem aqui né com espaço entre elas bem simples e depois eu estou retornando isso de volta para programa e essencialmente o que vai acontecer o seguinte quando essa quando esse trecho aqui

ele foi executado esse valor vai ser retornado de volta para o programa então essencialmente quando esse trecho aqui foi executado ele literalmente vai ser substituído por Pedro Silva E aí esse valor vai ser atribuído aqui a constante nome completo Então é isso Que é isso que o comando return faz ele vai retornar o valor de volta para que a gente possa utilizar ele no programa né no nosso código e portanto agora se eu imprimir nome completo nós veremos Pedro Silva impresso no terminal e eu poderia passar essa constante aqui como sendo um argumento para as

funções Que Nós criamos em cima né eu poderia passar aqui por exemplo eu poderia chamar a função dizer olá aqui por exemplo de zerá nome completo vou passar a constante nome completo e agora se eu executar este programa nós vemos ali Olá Pedro Silva perfeito ah só que ISS essa função aqui ela não tá sendo muito útil né eu poderia simplesmente escrever aqui Pedro Pedro Silva né Essa função não tá muito muito útil até então só que a gente pode tornar ela um pouco mais útil da seguinte maneira se eu puder um terceiro argumento para

a função criar nome completo chamado por exemplo sexo que vai que vai representar o sexo da pessoa eu posso fazer o seguinte aqui dentro da função eu vou criar uma estrutura condicional que vai checar se sex se sexo for igual a m eu vou retornar eu vou retornar um template de string que vai dizer senhor nome espaço sobre nome else senão eu vou elsif melhor se sexo for igual a f de feminino né eu vou retornar senhora nome sobr nome ou sen não se se o argumento sexo não for nem m para masculino nem F

para feminino se a pessoa for não binária sei lá então vou retornar simplesmente nome e sobrenome e portanto Agora eu tenho uma função um pouco mais útil né ela vai ela vai especificar um ela vai especificar o sen ou senhora dependendo do sexo da pessoa ou então não vai especificar nenhum caso a pessoa não Especifique um sexo válido aqui que seria f m ou F né e agora eu posso aqui eu posso especificar aqui m para o PED Silva e agora se eu executar este programa nós veremos Olá Senor Pedro Silva eu posso criar o

mesmo aqui especificando valores diferentes né eu posso especificar aqui Maria Souza F E agora se eu imprimir nome completo dois nós veremos olá senhor Pedro Silva olá senhora Maria Souza então nós podemos ver aqui uma maneira nós podemos ver uma uma função um pouco mais útil né que vai retornar coisas diferentes vai retornar valores diferentes para o programa dependendo perdão dependendo ã dependendo dos argumentos que nós passarmos e nós podemos melhorar essa função da seguinte maneira Digamos que a pessoa Digamos que aqui no código a pessoa o programador né que que estiver utilizando a nossa

função criar nome completo Passe ao invés de m maiúsculo passe m minúsculo como sendo o argumento sexo nesse caso se eu executar se eu executar este programa o nome perido Silva ele vai ser retornado aqui como sendo a terceira opção aqui em que o em que nem essa condição nem essa condição aqui resultou em verdadeiro nós podemos ã nós podemos resolver esse problema da seguinte maneira aqui eu posso fazer o seguinte dentro dentro da definição da função eu posso pegar o argumento sexo que foi informado e eu posso chamar o método to upper case se

eu n engano é esse o nome do método ou melhor é toer case é o método de Strings que vai transformar aquela string em maiúsculo uppercase significa maiúsculo em inglês uppercase é o método de Strings que transforma aquela string que transforma todas as letras daquela string em maiúsculo e agora se eu executar este programa nós veremos novamente o Olá Pedro Silva porque antes de testar aqui na linha 20 aqui na linha 19 Nós pegamos o argumento que foi formado que foi um m minúsculo nós chamamos o método two uper casase para transformar aquela string que

no caso é simplesmente um m minúsculo e maiúsculo nós atribuímos esse resultado de volta na no argumento E aí quando nós testamos aqui ãã a condição ela resultou em verdadeiro Porque agora não importa qual letra que nós passemos aqui não importa se nós se se nós passarmos letras minúsculas aqui nas aqui Nas condições elas estarão maiúsculas porque nós chamamos o método two uppercase que transforma em maiúscula né E nós podemos ver se na prática Se eu mudar aqui o f para minúsculo e executar este programa novamente nós veremos ainda olá senhora Maria Souza porque aqui

na linha 22 quando nós estamos testando essa condição o argumento ele é maiúsculo pra gente poder finalizar essa lição sobre funções eu vou mostrar uma segunda maneira da gente declarar funções na linguagem JavaScript e essa sintaxe se chama funções Seta e funciona da seguinte maneira eu vou digitar a palavra-chave const eu vou digitar o nome da função como por exemplo ã cumprimentar vamos chamar de cumprimentar ou melhor vou fazer igual anteriormente dizer olá ou dizer oi portanto eu vou utilizar a palavra-chave const imediatamente eu vou especificar o nome da função eu vou colocar um sinal

de igual vou colocar abre parênteses fecha parênteses depois dos parênteses eu vou colocar um sinal de igual e um sinal de maior do que essa aqui que é a tal da Flecha e agora o que nós tivermos depois aqui da da seta né é o que vai ser executado quando essa função for chamada então portanto aqui eu posso dizer eu posso escrever simplesmente console.log Oi ponto e vírgula para finalizar a linha de código e portanto Agora eu tenho uma função que se chama dizer oi que simplesmente imprime na tela Oi e agora se eu chamar

aqui a função dizer oi exatamente como nós chamamos a funções as funções que nós que nós criamos anteriormente nós veremos Oi impresso aqui no terminal e portanto essa aqui é a sintaxe para criar funções setas para a maioria dos propósitos funções setas elas vão funcionar exatamente como funções criadas da criadas com o comando function Existem algumas existe uma uma diferença importante que não vem ao caso agora porque são detalhes um pouco mais técnicos que não vem ao caso para um curso como esse de de fundamentos né Ah mas é outra sintaxe mas de qualquer maneira

funções setas funções seta são uma outra maneira da gente criar funções e eu poderia fazer o seguinte eu posso criar uma outra função set aqui con dizer oi tudo bem esse vai ser o nome da nossa função sinal de igual parênteses aa e aqui essa função dizer oi tudo bem ela vai ter duas linhas de código que serão que que comporão a função então portanto eu vou escrever aqui ó abre Chaves fecha Chaves e tudo que tiver aqui dentro das chaves será executado quando a função for chamada e aqui eu vou escrever Oi e eu

vou imprimir também tudo bem e portanto agora quando eu executar este programa nós vemos ali Ah eu defini a função só que eu esqueci de chamar ela dizer Oi tudo bem e portanto agora nós veremos Oi tudo bem Ah então nós vimos aqui como nós podemos criar uma função seta com mais de uma linha de código vai funcionar semelhante às funções criadas com o comando function em que você tem o bloco de códigos aqui dentro das chaves né então vai funciona de forma igual e como que nós podemos passar argumentos como que nós podemos especificar

os argumentos de uma função seta bem nós vamos nós vamos especificar aqui dentro dos parênteses e eu posso criar uma nova função seta que vai que vai que vai fazer um cálculo para mim por exemplo somar a função ela vai se chamar somar sinal de igual parênteses aqui dentro dos parênteses eu vou especificar dois argumentos e eu vou chamar eles de X e Y como ah como essa função vai simplesmente somar dois números eu vou chamar eles de x e y aqui eu vou realizar essa operação x + y e eu vou retornar eu vou

retornar essa expressão o resultado dessa expressão de volta para o programa e portanto agora aqui embaixo eu posso criar uma constante chamada resultado e ela vai receber e ela vai receber o valor de retorno é assim que nós chamamos quando nós retornamos algum valor quando NS quando nós retornamos alguma coisa a partir de uma função esse valor que foi retornado no caso da função somar vai ser essa expressão aqui nós chamamos isso de valor de retorno e portanto o valor da Constante resultado será o valor de retorno da função somar quando nós passarmos como argumentos

10 e 15 10 será o X 15 será o y Eles serão somados serão retornados e efetivamente o resultado que é 25 vai vai ser retornado aqui no no código e é esse valor que vai ser atribuído a constante de resultado e se eu imprimir aqui resultado nós veremos 25 impresso na tela Então vamos vamos vamos revisar o Que Nós aprendemos Ah nós podemos criar funções com o comando function nós podemos especificar valores valores padrão caso nós podemos especificar valores padrão para o argumento caso esse argumento ele não seja especificado como aqui na linha oito

né Nós podemos criar funções que recebem mais de um argumento dois ou mais nós podemos criar funções que fazem coisas úteis né Essas funções aqui em cima dizer olá esse apresentar não se pode dizer que são funções tão úteis assim né Porque elas estão simplesmente criando essas mensagens aqui com os argumentos que nós que nós informamos então elas nem são tão úteis assim mas no caso da função criar nome completo nós poderíamos imaginar por exemplo se você tá criando um programa que vai ter que vai ter usuários né que vai ter clientes e aí você

quer ah e aí você quer exibir o uma mensagem personalizada dependendo se aquele cliente é homem ou mulher você pode criar isso você pode criar uma função que vai fazer isso como a função criar nome completo ah e Nós aprendemos também que nós temos essa segunda sintaxe para criar funções que é a sintaxe função seta que vai funcionar dessa maneira aqui ah existe uma diferença como eu disse anteriormente entre funções funções Seta e funções criadas com o comando function eu não vou entrar em detalhes agora sobre Qual é essa diferença mas existe existe uma pequena

diferença que é relevante mas não V não vem ao caso para esse curso vamos falar agora sobre funções de ordem maior que vão nos manipular vetores de maneiras bem interessantes e na linguagem JavaScript nós temos quatro funções de de ordem maior padrão que são as funções for each map Filter e reduce Essas funções na verdade elas são métodos de vetores vocês vão chamar Essas funções vocês vão chamar esses métodos como sendo como sendo métodos de vetores e eles fazem coisas bem diferentes o primeiro método o for each ele é o mais simples de todos ele

vai percorrer os itens de um vetor e vai fazer alguma operação nesses itens da maneira que você definir então for each é o mais é o mais genérico por assim dizer ele vai simplesmente percorrer os itens de um vetor e vai fazer algum tipo de operação que você mesmo vai definir o a função map ela vai percorrer os itens de Vetor e vai transformá-los de alguma maneira que você que você definir ah a função Filter vai percorrer os itens de um vetor e vai filtrá-los ah da maneira que você definir e a função reduce vai

percorrer os itens de um vetor vai fazer algum tipo de operação Entre esses itens e no final das contas vai retornar apenas um valor vai retornar apenas uma coisa ao contrário de retornar um vetor como é o caso das outras três funções acima vamos ver vamos começar aprendendo a função for it e pra gente entender vamos observar a seguinte ilustração Digamos que nós temos um vetor com cinco elementos E caso a gente chame o método né caso a gente chame a função for each nesse vetor o que vai acontecer vai ser o seguinte o a

função for each o método for each vai percorrer cada um dos elementos do vetor e vai fazer alguma coisa que você mesmo vai definir o que será feito pra gente entender eu vou abrir aqui o meu editor de código e eu vou criar um vetor bem simples vai ser um vetor com cinco números inteiros de um até CCO e eu vou atribuir esse esse vetor a uma constante chamada números eu vou ampliar aqui o zoom da minha tela e aqui na linha três eu escreverei o seguinte números é o vetor que eu tenho aqui eu

vou digitar o operador ponto para poder acessar a função para poder acessar o método for it esse método for each ele espera receber uma função essa função ela vai receber um argumento que representará cada um dos itens do vetor que o método for each vai per então aqui eu vou ah definir uma função com a palavra-chave function eu não vou eu não preciso colocar um nome aqui para essa função então imediatamente eu vou colocar parênteses Então essa função ela não tem nome é uma função anônima por assim dizer dentro dos parênteses eu vou dar um

nome para os elementos do vetor que no caso aqui eu posso chamar de x ou de Y ou de a eu posso chamar de item ou elemento entretanto o número me parece um nome adequado para ah para os para cada um dos elementos do vetor números né e em seguida eu vou abr eu vou fazer aqui ó abre Chaves fecha Chaves e o que quer que eu escrev aqui dentro das chaves será executado para cada um dos elementos do vetor números e aqui eu vou simplesmente imprimir no console número e agora se eu executar este

programa nós veremos cada um dos números impresso no terminal e portanto a função que nós passamos aqui para o método for each ela recebe um argumento que é o próprio elemento e esse elemento Ah nós podemos os utilizar aqui para executar um bloco de códigos pra gente poder entender um pouco melhor esse método for each eu vou criar aqui agora na linha S um novo Vetor chamado letras esse vetor ele será composto de cinco elementos as letras a maiúsculo b maiúsculo C maiúsculo D maiúsculo e e maiúsculo em seguida eu vou acessar o vetor letras

Eu vou acessar o método for e aqui dentro dos parênteses eu vou declarar uma função anônima sem nome e como eu disse a função que você passa aqui para o método for each ela recebe como argumento ela recebe como argumento o próprio elemento que tá sendo considerado né no caso a função for each ela vai percorrer cada um dos elementos do vetor e o argumento que você e o nome do e o argumento que você define aqui é cada um dos elementos né então aqui eu posso chamar por exemplo de letra e aqui dentro dos

parênteses aqui dentro das chaves eu vou definir as linhas de código que serão executadas para cada uma dessas letras Só que tem um detalhe importante essa função que você passa para o método for e além de receber o próprio elemento como sendo o primeiro argumento ele pode também opcionalmente receber um segundo argumento que vai representar o índice do elemento que está sendo considerado Ah no momento e aqui esse segundo argumento que representa o índice do elemento eu eu posso chamar de x de Y de Y de Z entretanto índice me parece um bom nome para

o argumento que representa o índice do elemento e agora aqui dentro do das chaves eu posso imprimir o seguinte vou criar uma um template de string e aqui eu vou fazer o seguinte índice dois pontos letra e agora quando eu executar este programa nós veremos que zero ou seja o elemento no índice zero é a o elemento no índice 1 é b o elemento no índice 2 é c e assim por diante exatamente da forma como Nós aprendemos que vetores funcionam o primeiro elemento ele é localizado no índice zer segundo elemento no índice 1 e

assim por diante eu vou fazer o seguinte agora eu vou criar Ah eu vou mostrar um terceiro exemplo utilizando o método for e eu vou criar aqui um vetor chamado tarefas que será um vetor que terá três objetos objetos que terão as seguintes propriedades ID texto e uma propriedade Chamado completo E no caso e o valor da propriedade completo vai ser um valor boleano verdadeiro falso vou copiar is aqui vou colar três vezes para vou colar duas vezes para criar no total três elementos deixa eu reduzir o zoom id1 id2 e id3 e aqui eu

vou ter estudar vai ser a primeira tarefa trabalhar vai ser a segunda tarefa e limpar a casa e digamos aqui que a tarefa é limpar a casa foi completa completo ou melhor verdadeiro perfeito Então agora eu tenho um vetor que se chama tarefas ele possui e esses TRS elementos são objetos com três propriedades diferentes e aqui eu fi o seguinte eu vou acessar o vetor tarefas Eu vou acessar o método for e lembrando aqui eu vou passar uma função que vai ser executada para cada um dos elementos do vetor eu vou criar uma função anônima

e como aprendemos anteriormente passa para o método for e ele pode receber simplesmente o item ele pode receber o item e o índice do item Só que tem um terceiro tem um terceiro argumento que é a função pode receber que é o próprio vetor então aqui na função que eu vou passar para o método for e do vetor tarefas essa função como primeiro argumento ela vai receber a própria tarefa o próprio item o segundo argumento vai ser o vai ser o índice e o terceiro argumento vai ser a vai ser o próprio vetor portanto aqui

eu vou chamar de minhas tarefas por exemplo eu não posso chamar simplesmente de tarefas porque aí porque aí o nome ia entrar em conflito com o nome do vetor né então vou chamar aqui de minhas tarefas que no final das contas é esse mesmo aqui só que eu t usando nomes diferentes para não confundir as coisas tarefas é o meu vetor minhas tarefas é o vetor só que dentro da função e agora aqui dentro dentro das chaves deixa eu Minimizar aqui ah não cons Minimizar nesse editor dentro das chaves eu vou escrever o seguinte eu

vou imprimir console vou criar um template de string índice mais um dois pontos tarefa pon texto Então eu vou acessar a propriedade texto do objeto tarefa e em seguida eu vou imprimir aqui minhas tarefas e portanto agora eu vou expandir aqui o meu terminal vou limpar o terminal e se eu executar este programa nós veremos um estudar dois trabalhar TRS limpar a casa e nós vemos também o próprio vetor impresso juntamente com a impressão individual do texto das tarefas E olha que interessante aqui como eu como na hora de imprimir aqui o índice e o

texto da tarefa eu coloquei mais um aqui é por isso que para o primeiro para é por isso que para o primeiro elemento do vetor tarefas Nós estamos vendo aqui um um 1 ao invés de um zero porque nós estamos fazendo esse cálculo aqui né índice mais 1 como o primeiro elemento está no índice zero para o primeiro elemento nós vemos o número um porque nós estamos somando o número um aqui é uma forma de tornar essa visualização das tarefas um pouco melhor né ao invés de começar a partir de zero que não faz muito

sentido para o usuário é um isso faz sentido para nós programadores é por isso que eu coloquei o mais um aqui e nós vemos a impressão e nós vemos que nós temos acesso ao vetor completo porque após a impressão das tarefas individuais nós vemos o vetor completo perfeito é dessa maneira que o método for each funciona vamos entender agora como o método map vai funcionar eu vou voltar aqui paraos slides e digamos que eu tenha um vetor como esse aqui e eu chame o vetor e eu chame o método map nesse vetor o que o

método map fará será transformar os elementos ah desse vetor da maneira como nós definimos para ver isso na prática eu vou voltar aqui para o meu editor de código e eu vou fazer o seguinte deixa eu eu vou fechar aqui o terminal para fechar terminal eu digito cont control J cont control J Ah aqui no x Você fecha e o cont control J você abre o terminal então aqui eu vou fazer o seguinte eu vou criar uma constante chamada vetor de textos das tarefas Esse vai ser o nome dessa constante e eu vou atribuir a

ela o seguinte eu vou acessar as tarefas que nós já criamos eu vou chamar o método map eu vou passar para esse método map uma função anônima o argumento que a função anônima recebe é o próprio elemento que a gente tá percorrendo né e eu vou chamar esse elemento de tarefa e aqui dentro das chaves eu vou retornar tarefa P texto portanto Olha que interessante o método map vai nos permitir percorrer os elementos de um vetor transformar esse elemento de alguma maneira e retornar esse elemento transformado por assim dizer e no final das contas o

que nós teremos será um novo Vetor com os mesmos elementos só que transformados na maneira que a gente definiu e a maneira como a como nós estamos definindo aqui é o seguinte ao invés de retornar o elemento completo que seria o caso caso escrevêssemos return tarefas a gente tá retornando o elemento inalterado ao invés disso nós estamos retornando a propriedade texto do elemento e portanto agora ao invés ao invés de ser um vetor de objetos vetor de textos das tarefas será um vetor de Strings E essas Strings será o valor da propriedade texto dos elementos

e portanto agora eu vou digitar aqui um ponto e vírgula para encerrar essa linha de código né esse trecho de código e aqui eu vou fazer o seguinte console P log vetor de textos das tarefas ponto no final vou digitar aqui ó cont control J para abrir o terminal novamente cont control L para limpar o terminal e aqui eu vou executar este programa de novo e nós veremos aqui ó quando eu imprimir quando a linha 40 foi executada que é essencialmente a última linha né que que tem código é a última linha do nosso código

nós vemos aqui que foi impresso um vetor de Strings cujas Strings são os textos dos objetos do vetor tarefas e portanto é assim que a o método map funciona ele vai percorrer determinado vetor e vai transformar aquele elemento da maneira como a gente definir aqui e eu poderia fazer algo diferente eu poderia escrever aqui por exemplo h eu poderia fazer o seguinte eu poderia criar um um template de string aqui e eu poderia escrever aqui ó tarefa E aí eu vou encaixar de forma dinâmica eu vou encaixar de forma dinâmica a propriedade ID da tarefa

que nós temos Acesso aqui né dois pontos espaço e aqui deixa eu recortar isso aqui porque eu vou encaixar de forma dinâmica isso aqui e portanto agora se eu executar esse código novamente nós veremos que o vetor Ah nós veremos novamente que o A constante vetor de textos das tarefas é um vetor de Strings só que dessa vez melhor formatadas tarefa um dois pontos estudar tarefa dois dois pontos trabar e e tarefa TR dois pontos limpar a casa panto é assim que o método map funciona ele vai percorrer os elementos de determinado vetor e vai

transformar esses elementos na forma como a gente Def então pra gente entender o método Filter Imagine que nós temos um vetor com diferentes elementos né se a gente chamar o método Filter essencialmente o que ele vai o que ele fará será filtrar esse esse vetor da maneira que a gente definir eu vou voltar aqui pro nosso editor de códigos e vou fechar o terminal e aqui na linha 42 eu vou escrever o seguinte eu vou criar uma constante chamada tarefa 1 e ela Eu vou acessar o vetor tarefas Eu vou acessar o método Filter e

aqui eu vou passar pro método Filter uma função anônima que vai receber a tarefa e aqui ah para que o método Filter funcione corretamente eu preciso retornar um valor um valor boleano verdadeiro ou falso que vai vai definir se aquele elemento vai ser filtrado ou não e aqui eu quero eu vou retornar ao seguinte eu vou eu preciso eu preciso ter uma expressão booleana né eu preciso ter um teste aqui que vai retornar verdadeiro ou falso Ah e portanto o que eu vou escrever será o seguinte tarefa vai tarefa será os elementos individuais do vetor

tarefas Eu vou acessar a propriedade D eu vou comparar se a propriedade D do elemento tarefa é igual a 1 e eu vou retornar o resultado dessa expressão e portanto o que vai acontecer aqui será o seguinte o método Filter vai percorrer o vetor tarefas para cada um dos elementos que nós estamos chamando de tarefa eu vou testar a propriedade desse elemento em particular a propriedade de dessa tarefa em particular é igual a 1 se for se for igual a um essa expressão vai retornar verdadeiro e portanto esse elemento em particular estará incluído na lista

filtrada se o elemento se a tarefa não tiver um ID igual a 1 ele não estará incluído na lista filtrada aqui na linha 44 eu vou colocar um ponto e vírgula E agora se eu imprimir a constante tarefa um cont control J para abrir o terminal nós veremos agora que tarefa um é um vetor ainda é um vetor portanto nós temos os colchetes aqui só que é um vetor com apenas um elemento o elemento que possui a propriedade ID com valor igual a 1 e portanto é assim que nós podemos utilizar o método Filter perfeito

vamos entender agora Como que funciona o método reduce o método reduce ele funciona da seguinte maneira Digamos que nós temos um vetor com diferentes elementos se a gente chamar o método reduce ele vai manipular esses elementos de determinada maneira e no final das contas ele vai retornar apenas um valor apenas um apenas uma coisa ele não vai retornar o valor um ele vai retornar apenas uma coisa é isso que isso aqui significa ele vai pegar um vetor com vários elementos vai manipular esses elementos de alguma maneira e no final das contas vai retornar a apenas

uma coisa ele vai reduzir ele vai pegar um vetor e vai reduzir ele a uma coisa só para mostrar isso na prática eu vou abrir aqui o nosso editor de código e aqui na linha 48 eu vou escrever o seguinte eu vou inicializar um uma constante chamada números números ou melhor vou chamar essa constante de Vetor ela vai ser essa constante vetor será um vetor com os seguintes elementos 1 2 3 e qu aqui eu vou inicializar uma constante chamada valor inicial vai ser igual a zero e aqui eu vou escrever o seguinte quando nós

utilizamos o método reduce ah ele vai percorrer os elementos do vetor ele a função que nós vamos passar para o método reduce terá um valor inicial que vai ser o valor que nós vamos retornar no final das contas né ele vai ter um valor inicial ele vai percorrer os elementos do vetor vai fazer alguma operação com esses elementos e com o valor inicial progressivamente e no final vai retornar o resultado final vamos vamos ver isso na prática então eu posso fazer aqui o seguinte ó eu vou criar ah ou melhor eu vou acessar o vetor

vetor eu vou chamar o méthodo reduce e aqui dentro do dos parênteses eu vou passar para o método reduce uma função vou criar aqui uma função anônima essa função ela vai receber dois argumentos ela vai receber um acumulador e ela vai receber o que nós vamos chamar de valor elemento atual e aqui dentro das chaves eu vou retornar return eu vou retornar acumulador mais elemento atual e além da função que vai ser executada para cada um dos elementos do vetor eu vou passar um segundo argumento aqui que será o valor inicial do acumulador que no

caso vai ser valor Inicial e eu vou retornar o resultado disso aqui para uma constante que eu vou chamar de soma Então vamos recapitular nós temos um vetor que possui quatro elementos quatro números inteiros aqui eu vou utilizar o método reduce para percorrer os elementos desse vetor e manipular eles de alguma forma para no final das contas retornar apenas uma coisa o que eu quero retornar aqui é a soma desses elementos e portanto para isso aqui na função que recebe o acumulador que vai ser o acumulador vai ser o valor durante a durante a o

a iteração dos elementos durante enquanto eu estiver percorrendo os elementos do vetor o acumulador ele vai ser somado com o elemento atual e no final das contas o a soma Total vai ser retornada vai ser atribuída à constante soma inicialmente o valor inicial do acumulador será valor inicial que é igual a zero então a gente pode a gente pode vou criar um comentário aqui pra gente poder entender como vai ser o passo a passo então ó valor inicial vai ser igual a zerar um zero aqui o método reduce lembrando vai percorrer cada um dos elementos

então pera aí valor inicial vai ser igual a zero Ok o acumulador inicialmente no primeiro na primeira repetição no primeiro elemento ele vai ser igual ao valor inicial então acumulador igual a zero somente no primeiro na primeira repetição no início somente no início que acumulador que o acumulador será igual ao valor inicial que é esse segundo argumento aqui né a função é o primeiro argumento a função é o primeiro argumento passado para o método reduce valor inicial é o segundo argumento passado para o método reduce valor inicial será o valor do acumulador na primeira repetição

então inicialmente acumulador é igual a zero perfeito o vetor que nós temos é o seguinte 1 2 3 e 4 então na primeira repetição quando nós estivermos quando o método reduce estiver no primeiro elemento que é o número um essa operação aqui acumulador mais elemento atual elemento atual é igual ao um que nós estamos vendo aqui né É o primeiro elemento Então o acumulador que é igual a zer vai ser zero mais o elemento atual que é o 1 aqui e portanto aqui nós teremos 0 + 1 essa expressão aqui na primeira repetição será 0

+ 1 isso aqui Vai resultar em 1 e portanto agora o acumulador é 1 e o primeiro elemento já foi então nós vamos analisar agora o segundo elemento que é o do então agora nós vamos novamente na segunda repetição em que nós estamos analisando o segundo elemento acumulador dessa vez não é zero ele é um e o elemento atual é o do portanto agora nós temos 1 + 2 o acumulador mais o elemento atual 1 + 2 é iG 3 3 será o valor do acumulador e nós acabamos de avaliar o segundo elemento portanto Agora

nós estamos analisando o terceiro elemento que é o 3 né acumulador neste momento é igual a 3 o elemento atual é 3 Então temos 3 + 3 3 + 3 vai ser igual a 6 Isso aqui vai ser atribuído ao acumulador nós acabamos de analisar o terceiro elemento e agora só sobrou pra gente o último elemento né que é o quatro e portanto nós vamos ter aqui ó acumulador que é se mais elemento atual que é quro 6 + 4 é iG 10 acumulador vai ser igual a 10 e como nós como nós avaliamos todos

os elementos como nós percorremos todos os elementos o resultado do acumulador será retornado será atribuído a constante soma né Isso aqui tudo Vai resultar em em 10 quando o código el for executado E agora se a gente imprimir a soma se tudo der certo se eu não tiver errado na minha explicação nós veremos 10 nós veremos 10 aqui impresso no terminal e portanto é assim que oon correr um vetor de elementos vai manipular esses elementos de alguma maneira e no final das contas ele vai retornar apenas uma coisa e São esses os quatro são essas

quatro funções de ordem maior são essas são esses os quatro métodos de ordem maior for each map Filter e reduce vamos aprender agora sobre programação orientada a objetos que é uma das técnicas de programação mais importante das linguagens de programação modernas pra gente poder entender como que funciona a programação orientada a objetos eu vou abrir aqui o meu editor de código e digamos que o problema que nós temos que resolver aqui é criar um programa que vai representar uma pessoa um tipo de problema que nós já Ah que nós já resolvemos em lições anteriores e

portanto a maneira mais simples de fazer isso repres entar uma pessoa usando o código seria criando variáveis individuais para cada uma das características da pessoa como por exemplo nome sobrenome data de nascimento e portanto eu poderia escrever aqui primeiramente const para criar uma constante chamada nome que vai receber Pedro em seguida eu posso criar aqui uma constante chamada sobrenome e por fim eu posso criar aqui outra constante chamada data de nascimento que recebe a data de de nascimento da pessoa só que tem um problema aqui ah essas variáveis elas são coisas individuais né elas não

têm uma relação entre si necessariamente São simplesmente ah constantes individuais no nosso programa e a gente aprendeu depois que se nós se nós queremos criar um objeto por assim dizer que vai ter propriedades que pertencem ao mesmo objeto nós podemos fazer isso da seguinte maneira Ah para criar um objeto eu vou utilizar abre Chaves fecha Chaves e dentro das chaves eu vou especificar as propriedades e os valores que constituem que constituem esse objeto que vai representar uma pessoa eu vou apertar a tecla enter você vê aqui que o editor de código coloca uma tabulação automaticamente

para ter uma indicação visual de que as propriedades que eu vou definir agora fazem parte desse objeto e portanto Para um objeto que vai representar uma pessoa eu posso fazer aqui nome vai ser igual a Pedro sobrenome Silva data de Nascimento para a data de nascimento ao invés de definir ela assim como sendo uma string eu vou criar um objeto data para isso eu vou escrever aqui ó New date Esse é o nome do objeto que eu vou criar Esse é o tipo do objeto e aqui dentro dentro dos parênteses Eu Vou Passar como argumento

a data que vai representar a data de nascimento e a formatação para essa string é assim é mês dia e ano é assim que é formatado a data primeiro mês depois o dia depois o ano separados por ifen e portanto agora eu tenho um objeto que representa uma pessoa e ao contrário da primeira solução entre as linhas um e TRS nesta solução aqui as propriedades Elas têm uma relação intrínseca entre si elas fazem parte do mesmo objeto e aqui eu posso atribuir esse objeto que eu acabei de criar a uma constante chamada pessoa a e

agora aqui na linha 11 eu posso escrever console. log pessoa a ponto vou utilizar o operador ponto para acessar uma propriedade a propriedade que eu quero acessar aqui será a propriedade nome nome e portanto agora se eu executar este programa digitando no programa PJS nós veremos impresso no terminal Pedro e portanto essa técnica aqui esse conceito de objetos que Nós aprendemos anteriormente ele nos possibilita agrupar diferentes elementos né no mesmo objeto de forma que essas três coisas o nome o sobrenome e a data de nascimento façam parte da mesma coisa né aqui se eu quiser

imprimir o sobrenome eu vou acessá-los no objeto pessoa a através do operador ponto em seguida especificando depois do operador ponto qual propriedade que eu quero acessar e portanto se eu executar este programa nós veremos o nome o sobrenome e o objeto data que Nós criamos aqui né isso aqui é um é um conceito novo mas é um conceito novo que não faz parte necessariamente ah do assunto de programação orientada a objetos mas eu introduzi aqui para poder a gente ter uma propriedade de data de nascimento um pouco mais robusta né com algumas funcionalidades mais interessantes

por exemplo como data de nascimento é um objeto do tipo data date eu posso por exemplo acessar aqui um método chamado get full Year que vai me retornar somente o ano daquela data e portanto eu vejo aqui 1990 perfeito objetos também podem ter além de propriedades propriedades com valor objetos também podem ter métodos podem ter funções associadas a aquele objeto e portanto aqui eu vou fazer o seguinte eu vou definir uma função ou melhor um método quando você tem uma função associada a um objeto nós chamamos isso de método vai se chamar obter nome completo

parênteses Chaves aqui dentro das chaves eu vou especificar quais comandos serão executados quando nós chamarmos o método obter nome completo e aqui eu vou fazer o seguinte eu vou retornar um valor através do comando returned esse valor vai ser um template de string portanto dois sinais de assento grave e aqui dentro eu vou eu vou encaixar de forma dinâmica o seguinte primeiramente eu vou acessar o próprio objeto o próprio objeto que eu acabei de que eu estou criando Eu vou acessar ele através da palavra-chave this a palavra a palavra this em inglês significa isto e

no contexto da linguagem JavaScript a palavra chave des representa o próprio objeto o próprio objeto que a gente tá criando portanto aqui des representa este próprio objeto e como representa este próprio objeto eu posso acessar através do operador ponto a propriedade nome e eu vou encaixar aqui de forma dinâmica também o sobrenome deste deste próprio objeto e portanto agora eu tenho um método chamado obter nome completo esse método ele faz parte do objeto pessoa a e o que esse método faz é é simplesmente retornar uma string uma string onde eu estou encaixando de forma dinâmica

o nome do próprio objeto e o sobrenome do próprio objeto e eu estou acessando essas propriedades através da palavra-chave V perfeito agora aqui eu posso fazer o seguinte ó eu posso fazer aqui console pon log pessoa a ponto obter nome completo é o método que nós acabamos de criar E agora se eu executar este programa nós veremos o nome completo impresso aqui na terceira linha porque é exatamente isso que obter nome completo que o método obter nome completo está retornando pra gente eu posso definir um segundo um segundo método aqui obter ano Nascimento esse método

ele vai retornar o seguinte eu vou acessar o próprio objeto através da palavra-chave des Eu vou acessar a propriedade data de nascimento e eu vou acessar o método get full ear que nós utilizamos que nós já utilizamos anteriormente aqui na linha 20 né e portanto agora eu posso ao invés de utilizar este tro de código aqui eu posso simplesmente chamar o método obter ano Nascimento e portanto agora se eu executar este programa nós veremos o mesmo que nós vimos anteriormente só que agora eu estou utilizando o método que eu acabei de criar para poder acessar

essas informações aqui portanto tudo isso que nós vimos até então não é nada de novo exceto a definição de um método como parte de um objeto né isso aqui nós não tínhamos visto anteriormente e ah e o conceito da palavra-chave des que representa o próprio objeto perfeito e digamos que eu queira criar um outro objeto para representar uma outra pessoa se quiser fazer isso eu vou ter que fazer o seguinte ó aqui na linha 17 eu vou definir uma constante chamada pessoa B essa constante será igual ao seguinte objeto nome vai ser igual a Luiz

sobrenome vai ser soua data de nascimento vai ser igual a um novo objeto date que vai receber Janeiro dia 1 do 1999 obter nome completo e aí eu vou ter que repetir tudo que nós fizemos anteriormente né como como eu estou criando o mesmo objeto que vai funcionar da mesma maneira eu tenho que repetir tudo que nós fizemos anteriormente só que certamente se você prestou atenção nas nas lições anteriores você já me ouviu falar que sempre quando nós estamos copiando e colando o código quando nós estamos repetindo o código como eu estou fazendo aqui isso

é uma oportunidade da gente poder melhorar o design do nosso código e antes da gente aprender a Como melhorar o design do nosso código sem ter que repetir sem ter que repetir código né porque se a gente observar aqui esse objeto pessoa B ele é idêntico ao objeto pessoa a ele possui os as mesmas propriedades e os mesmos métodos os valores das propriedades são diferentes obviamente porque representam pessoas diferentes só que o objeto ele é o mesmo né o as propriedades e os métodos são os mesmos e portanto certamente existe uma maneira da gente poder

simplificar este processo de criação de objetos que vão representar pessoas porque eventualmente mais tarde quando eu precisar criar outros objetos que representam uma pessoa eu não quero ter que eu não tenho eu não quero ter que me repetir né simplesmente copiando e colando e alterando aqui os valores das propriedades eu não quero fazero existe uma uma maneira de fazer isso mais eficientemente mas antes da gente aprender como que isso funciona deixa eu imprimir aqui as propriedades do objeto que a gente acabou de criar que é o objeto pessoa B eu vou copiar esse trecho aqui

e vou só alterar aqui para pessoa b e portanto agora se eu executar este programa nós veremos ali os dados da pessoa B que nós acabamos de criar e portanto hã ainda que para programas pequenos essa solução aqui para representar uma pessoa funciona à medida que o nossos a medida que os nossos programas vão crescendo e você vai escrevendo mais linhas de código e o número de elementos né o número de objetos no seu programa aumentam você quer certamente Você quer uma maneira mais eficiente de criar esses objetos pessoa para fazer isso eu vou abaixar

aqui no meu editor de código e eu vou fazer o seguinte para criar um objeto pessoa para criar um objeto do tipo pessoa eu vou utilizar uma função portanto eu vou escrever aqui ó function a palavra chave function para definir uma nova função o nome dessa função vai ser simplesmente pessoa eu vou digitar parênteses aqui e aqui dentro dos parênteses eu vou especificar os argumentos que essa função pessoa vai receber para criar um objeto do tipo pessoa e portanto aqui eu vou escrever nome sobrenome data de nascimento se ah a função a função pessoa vai

receber três argumentos e aqui dentro das chaves eu vou especificar o que será feito quando essa função aqui for utilizada para criar um objeto do tipo pessoa e aqui eu vou fazer o seguinte através da palavra-chave des Eu vou acessar o próprio objeto que está sendo criado e aqui eu vou eu vou definir através do operador ponto uma propriedade chamada nome que vai receber o argumento nome que foi passado aqui e portanto esse nome aqui à direita do operador de atribuição é o argumento nome que a função pessoa vai receber este nome aqui é uma

propriedade do próprio objeto que nós temos acesso através da palavra-chave des eu vou definir outras propriedades aqui eu vou definir a propriedade sobrenome que vai ser vai receber o valor do argumento sobrenome eu vou definir aqui uma propriedade chamada data de nascimento que vai receber Ah um objeto do tipo date e eu vou passar aqui como argumento para esse para esse Construtor aqui né do objeto de um objeto data eu vou passar o argumento data de nascimento que foi recebido aqui como argumento né e portanto agora nós temos o que nós chamamos de função Construtora

uma função Construtora é uma função que vai criar um objeto especificando as propriedades e os valores daquele objeto e portanto agora eu posso fazer aqui o seguinte ó na linha 45 eu vou criar um novo objeto eu vou criar um objeto do tipo pessoa né que nós acabamos de de definir para isso eu vou utilizar a palavra-chave new que nós vimos anteriormente né aqui em cima quando nós estávamos criando um objeto do tipo data nós utilizamos a palavra chave New para criar um novo objeto daquele tipo talvez eu esqueci de explicar mas a palavra chave

New nós utilizamos quando nós queremos criar um novo objeto de determinado tipo aqui na linha oito esse objeto ele foi do tipo data date aqui na linha 45 nós vamos criar um novo objeto do tipo pessoa eu vou escrever parênteses aqui para executar essa função Construtora e dentro dos parênteses eu preciso passar esses argumentos que eu defini aqui na linha 39 portanto aqui eu vou passar João Silva João como sendo o nome vírgula Silva como sendo o sobrenome e como data de nascimento eu vou passar o mês 7 de do dia 8 do ano 80

1980 portanto agora nós temos com esse trecho de código aqui a criação de um novo objeto do tipo pessoa com estes argumentos aqui e eu vou atribuir o resultado dessa criação do objeto a uma constante chamada pessoa um portanto pessoa um será um objeto do tipo pessoa com estas propriedades e agora eu posso fazer o seguinte ó eu posso fazer aqui ó console. log pessoa 1 quando eu executar este programa nós veremos que pessoa um é este objeto aqui ó pessoa um é um objeto do tipo pessoa com P maiúsculo com estas propriedades nome é

igual a João sobrenome é igual a Silva e data de nascimento é esse objeto aqui do tipo date deixa eu comentar esse essa parte aqui porque eu não quero eu não quero as impress essas impressões aqui aqui Ah atrapalhando aqui a gente visualizar o visualizar os novos OB objetos né portanto agora nós com este trecho de código aqui nós definimos a função construtora que cria um objeto do tipo pessoa na linha 47 Nós criamos um objeto do tipo pessoa e atribuímos a constante pessoa um e aqui na linha 49 eu estou eu estou imprimindo no

terminal esse objeto pessoa um e agora olha que interessante se eu quiser criar novos objetos do tipo pessoa eu não preciso ficar me repetindo igual eu fiz anteriormente né lembra que que anteriormente Quando eu quis criar um novo objeto para representar uma pessoa eu tive que repetir as linhas de código né agora Como nós temos uma função Construtora eu posso simplesmente através de apenas uma linha de código criar um novo objeto cham de pessoa do cujas propriedades serão Maria Santos e aqui para a data de nascimento eu vou colocar mês 8 do dia 1 do

ano de 1990 e agora se eu imprimir o objeto pessoa 2 no terminemos P do é um objeto do tipo pessoa com estas propriedades aqui e olha que interessante eu posso aqui na função Construtora definir métodos para esse para objetos desse tipo né exatamente como nós fizemos ah semelhante a como nós fizemos anteriormente em que nós definimos métodos para estes objetos aqui o método obter nome completo e o mé obter ano Nascimento eu posso aqui na função Construtora definir métodos para objetos do tipo pessoa e portanto aqui na linha 45 eu vou primeiramente acessar o

próprio objeto que foi criado através do comando através da palavra chavz através do operador ponto eu vou definir uma nova propriedade chamada obter ano Nascimento perce o seguinte eu vou criar uma função uma função anônima por isso que ela não vai ter nome aqui né E essa função ela vai receber o seguinte ela vai fazer o seguinte ela vai retornar Eu vou acessar o próprio objeto Eu vou acessar a propriedade data de nascimento e eu vou acessar o método get full ear do objeto data de nascimento lembrando data de nascimento é um objeto do tipo

date é um objeto é um objeto próprio da linguagem JavaScript que nos permite criar objetos do tipo data que possui algumas funcionalidades interessantes uma delas é esse método aqui ó getf Year que nos retorna O ano Ah o ano completo né com os quatro dígitos ao invés de ser dois dígitos como nós especificamos aqui né na criação do objeto data o método getf Year vai retornar o ano completo né a palavra get significa selecionar full significa completo e ear significa ano e portanto agora através desse método que nós acabamos de definir nós podemos acessar nós

podemos obter o ano de nascimento do objeto e portanto aqui eu vou escrever console. log pessoa 1 ponto através do operador ponto eu vou acessar o método obter ano Nascimento eu preciso colocar parênteses para poder executar este método lembrando um método é uma função vinculada a um objeto e como é uma função nós precisamos colocar aqui os parênteses para executar a função né E nós vios aqui que obter ano Nascimento de fato é uma função e portanto agora se eu executar este programa nós veremos que o o ano de nascimento do objeto pessoa 1 é

1980 exatamente como nós definimos aqui na linha 50 e eu posso acessar as outras propriedades né Por exemplo eu posso acessar aqui nome eu posso acessar sobrenome e nós veremos essas propriedades acessadas impressas aqui no terminal Digamos que eh depois de ter criado a função Construtora né Depois de ter definido a função Construtora talvez você esqueceu de definir algum método Extra né Por exemplo Ah se esse é o seu código se o se essa função Construtora foi você mesmo que que criou você pode vir aqui e definir novos métodos né Sem problema mas se é

se essa função Construtora não foi você que definiu E você tá simplesmente incluindo esse código no seu programa esse código que foi escrito por a pessoa por exemplo o que é o que é algo muito comum né é muito comum quando nós estamos criando programas mais robustos é comum a gente utilizar código que foi escrito por outras pessoas e Se esse for o caso se você estiver utilizando Ah se se essa função Construtora tivesse sido escrito por alguma outra pessoa e você simplesmente incluiu o código no seu programa só que você quer quer adicionar algumas

coisas extras a essa função a essa função Construtora você pode fazer isso da seguinte maneira Digamos que nós queremos adicionar um novo método a essa função para isso aqui na linha 50 eu vou escrever o seguinte eu vou escrever pessoa Esse é o nome da função Construtora através do operador ponto eu vou acessar uma propriedade especial chamada Prototype é uma propriedade especial de funções construtoras que nos permite definir novas propriedades e novos métodos aqui na propriedade Prototype que representa o protótipo do objeto né através do operador ponto eu eu poderei especificar um novo método o

método ele vai chamar obter nome completo esse método ele vai receber o seguinte ele vai ser igual uma função e essa função vai retornar um template de string onde eu vou encaixar aqui de forma dinâmica onde eu onde eu vou encaixar de forma dinâmica o nome do próprio objeto e o sobrenome do próprio objeto e portanto agora aqui eu posso fazer o seguinte ó eu posso acessar esse método que eu acabei de definir obter nome completo e agora se eu executar este programa nós veremos aqui o nome completo do objeto pessoa 1 e repito se

é você mesmo que está se é você mesmo que criou a função a função Construtora pessoa você poderia simplesmente vir aqui e e definir dessa maneira né e seria e teria o mesmo resultado entretanto eu estou te mostrando aqui uma maneira de uma maneira de definir métodos extras em uma em uma função Construtora caso ela tenha sido escrita por outra pessoa né você vai você vai adicionar novos métodos dessa maneira aqui perfeito vamos agora fazer o seguinte Digamos que eu queira Digamos que eu queira adicionar Digamos que eu queira criar um método Digamos que eu

queira primeiro criar uma criar uma nova propriedade aqui no objeto pessoa que vai representar os amigos da pessoa então para isso eu vou fazer o seguinte ó eu vou escrever aqui ó this é o próprio objeto que está sendo criado através do operador ponto eu vou definir uma propriedade chamada amigos essa propriedade inicialmente quando o objeto for criado Ela será igual a um vetor vazio por isso eu vou escrev aqui abre colchetes e fecha e fecha colchetes isso aqui representa um vetor vazio um vetor sem nenhum elemento em seguida eu vou fazer o seguinte aqui

na linha 49 eu vou definir um novo método chamado adicionar amigo esse método ele vai ser ele vai receber a seguinte função ele vai ser igual a seguinte função Ah vai ser uma função que vai receber um argumento chamado amigo e essa função ela vai fazer o seguinte eu vou acessar o próprio objeto Eu vou acessar a propriedade amigos do próprio objeto e como essa propriedade amigos que nós definimos aqui na linha 45 é um vetor eu posso através do método push empurrar novos elementos para esse vetor aqui e o elemento que eu vou empurrar

o elemento que eu vou adicionar ao vetor amigo será o argumento amigo que a função recebeu e portanto agora e portanto agora entre as linhas 49 e 51 eu acabei de definir um novo método que se chama adicionar amigo esse método ele vai receber um argumento que eu estou chamando aqui de amigo Poderia chamar de X né eu poderia chamar de y entretanto amigo me parece um bom nome para um argumento que vai representar o amigo que vai ser adicionado em seguida aqui na linha 50 eu estou selecionando o próprio objeto eu estou selecionando a

propriedade amigos desse objeto e como essa propriedade amigos é um vetor eu estou utilizando o método push para adicionar um novo elemento a esse vetor e o elemento que eu estou adicionando é o argumento amigo que foi passado para a função e portanto agora olha que interessante aqui na linha 67 eu eu posso escrever ó pessoa um através do operador ponto eu vou acessar o método adicionar amigo que nós acabamos de criar e eu vou passar como argumento para o método adicionar amigo o objeto pessoa dois e portanto agora se eu imprimir o objeto pessoa

um depois de adicionar como amigo o objeto pessoa do vamos ver o que vai ser impresso aqui no terminal vamos ver bem aqui ó deixa eu ó nós temos aqui ó esse aqui é o objeto completo que nós estamos imprimindo na linha 62 esse objeto ele possui as propriedades como de costume só que agora ele possui uma nova propriedade aqui ó chamada amigos essa propriedade ela é um vetor que no momento possui apenas um elemento que é o objeto pessoa do né Maria Santos que foi exatamente o objeto que nós passamos como argumento para o

método adicionar amigo só que tem um problema aqui que é o seguinte nós podemos observar que no objeto pessoa um que é o objeto que nós estamos imprimindo né na propriedade amigos nós temos o objeto pessoa do perfeito só que na propriedade amigos na propriedade amigos do objeto pessoa dois nós temos um vetor vazio né no caso Ah nós vemos aqui que Maria Santos é faz parte do vetor de amigos de João Silva só que João Silva não está no vetor de amigos do objeto Maria né da pessoa Maria portanto nós precisamos resolver esse problema

quando nós adicionar quando nós adicionarmos uma pessoa como sendo amigo de outra pessoa nós queremos que essa pessoa que está sendo Adicionada também tem a outra pessoa no seu vetor de amigos portanto para resolver esse problema eu vou voltar aqui na definição do método adicionar amigo e nós vamos fazer o seguinte ó depois de adicionar o amigo ao ao vetor do ao vetor de amigos ah cujo método está sendo chamado né Nós vamos fazer o seguinte eu vou acessar o amigo que foi passado como argumento para o método adicionar amigo eu vou acessar a propriedade

amigos desse amigo que foi passado como argumento como por exemplo aqui seria pessoa dois né E como essa propriedade amigos é um vetor eu vou utilizar o método push para adicionar o próprio objeto e portanto eu vou utilizar a palavra chave des lembrando a palavra a palavra chave dis representa o próprio objeto e portanto agora quando as quando essa linha 68 ela for executada Ah nós estar nós estaremos chamando o método adicionar amigo no objeto pessoa passando pessoa do como argumento e portanto e portanto o argumento amigo aqui será pessoa do e a palavra-chave des

estará representando o objeto pessoa um né e portanto efetivamente o que vai acontecer será isso aqui ó pessoa do está sendo passada como argumento perfeito pessoa 2 está sendo passada como argumento para o método push que é o método que nós utilizamos para adicionar elementos a um vetor será o vetor amigos do objeto pessoa 1 e depois nós estaramos adicionando pessoa 1 ao vetor de amigos de pessoa do portanto quando o código foi executado basicamente vai ser isso aqui que vai acontecer mas obviamente nós precisamos nós precisamos que o código esteja escrito desta maneira aqui

para funcionar para todos para qualquer objeto do tipo pessoa né perfeito portanto agora vamos ver se isso vai funcionar eu vou eu vou fazer o seguinte ao invés de imprimir o objeto pessoa um completo eu quero imprimir somente a propriedade amigos e eu vou imprimir também a propriedade amigos do objeto pesso do para ver se o para ver se o objeto pessoa um foi adicionado eu vou executar este programa e nós veremos aqui ó esse vetor aqui é a propriedade amigos do objeto pessoa do esse vetor ele possui o objeto pessoa um que é o

João Silva já este vetor aqui é é a propriedade amigos do objeto pessoa um e esse vetor de amigos possui o objeto possui a pessoa Maria Santos portanto portanto agora o método adicionar amigo está adicionando e ambos os objetos né Só que tem um problema aqui que é o seguinte Digamos que Digamos que por Acidente eu Execute essa linha aqui duas vezes né então eu estou aqui na linha 68 eu eu estou chamando o método amigo e na linha 69 eu estou chamando o método amigo novamente se eu fazer isso executar este programa nós veremos

que os objetos nós veremos que os amigos serão adicionados duas vezes né então aqui esse vetor aqui é a propriedade amigos do objeto pessoa do e esse vetor aqui em cima é a propriedade amigos do objeto pessoa um Ou seja quando nós chamamos por Acidente o método adicionar amigo duas vezes a mesma pessoa está sendo adicionada no vetor de amigos para poder resolver esse problema nós podemos fazer o seguinte aqui na definição do método adicionar amigos antes de adicionar antes de antes de adicionar o amigo na lista no vetor de amigos de um e de

outro eu posso fazer o seguinte eu posso criar uma estrutura condicional if se e a a condição aqui vai ser o seguinte não este objeto Eu vou acessar a propriedade amigos e eu vou testar aqui como amigos é um vetor vetores possuem um método chamado includes inclui que testa se o vetor inclui determinado elemento e aqui eu vou testar se o vetor amigos inclui o amigo que foi passado e se não e se não e se não incluir é isso O que o sinal de de exclamação significa o sinal de exclamação significa não Então nesse

triche de código aqui eu estou testando Opa amigo nesse trecho de código aqui eu estou testando se o argumento amigo que foi passado para o método está incluindo está incluído no na propriedade amigos do próprio objeto e o ponto de exclamação aqui significa não então basicamente Nós lemos aqui da da seguinte maneira se se a propriedade amigos não inclui o amigo que foi passado então sim nós queremos adicionar e portanto agora com este trecho de código aqui os amigos só vão ser adicionados caso a propriedade amigos não inclua o amigo que foi passado para o

método portanto agora se eu executar este programa nós veremos que ainda que nós chamamos o método adicionar amigo duas vezes no mesmo objeto e passando o mesmo amigo eles só são incluídos uma vez esse aqui é o vetor essa aqui é a propriedade amigos do objeto pessoa do e esse aqui é a propriedade amigos do objeto pessoa 1 e agora nós vemos que eles possuem apenas um elemento perfeito digamos agora por exemplo que eu crie uma terceira pessoa aqui vamos criar uma terceira pessoa pessoa TR e eu vou chamar essa pessoa três de Carlos Pereira

e a data aqui vai ser 5 5/02 de95 por exemplo e agora eu vou adicionar esse novo amigo aqui essa linha essa linha aqui 72 nós podemos remover Eu Só adicionei ela para mostrar para mostrar o funcionamento aqui do método adicionar amigo né então eu vou remover aqui a linha 72 perfeito portanto agora eu estou adicionando como amigo a pessoa três na pessoa um se eu executar este programa nós veremos que a pessoa um tem essa lista aqui de amigos Maria Santos e o Carlos Pereira E se eu imprimir a propriedade amigos da pessoa três

nós veremos obviamente que o João Silva está na lista de amigos do Carlos Pereira né que é a pessoa três Só que tem um problema aqui que é o seguinte essa forma como nós estamos visualizando os amigos né imprimindo o objeto com completo não é tão útil né seria seria interessante se tivesse uma se tivesse uma forma da gente acessar a lista de amigos somente pelo nome né ao invés de imprimir ao invés de imprimir todas as propriedades dos amigos seria interessante Se a gente pudesse imprimir somente o nome né ficaria mais fácil de visualizar

para isso nós podemos fazer o seguinte aqui na definição da função con dos objetos do tipo pessoa eu vou definir um novo método esse método ele vai se chamar selecionar amigos esse método ele vai ser a seguinte função eu vou retornar o seguinte eu vou acessar o próprio objeto Eu vou acessar a propriedade amigos e como a propriedade amigos é um vetor eu posso acessar a propriedade eu posso acessar o map se você prestou atenção na nossa lição sobre funções de ordem maior Você se lembra que a função map que o método map nos permite

transformar os elementos de um vetor e portanto aqui dentro da função map eu seginte quando nós utizamos a função map nós temos que passar uma função el ela tem que retornar o elemento transformado né no caso aqui nós estamos retornando o mesmo elemento não tem nenhuma transformação só que ao invés de retornar o próprio elemento melhor vamos fazer o seguinte ao invés de chamar de elemento vamos chamar de amigo ok ao invés de retornar o próprio amigo eu vou retornar o método obter nome completo lembrando obter nome completo é um método que nós definimos aqui

no protótipo do da função Construtora né obter nome completo a gente definiu aqui no protótipo da função Construtora mas ainda que nós ainda que nós ainda que nós ainda que nós definimos fora da função Construtora né fora aqui Como faz parte da Como faz parte da função Construtora ainda assim nós temos Acesso aqui dentro Portanto o que nós temos aqui agora entre as linhas 55 e 59 é a definição de um novo método chamado selecionar amigos esse método ele retorna o seguinte ele primeiramente ele acessa o próprio objeto ele acessa a propriedade amigos essa propriedade

ela é um vetor portanto nós temos Acesso aqui a função map que vai transformar os elementos que vai transformar os elementos desse vetor e eu estou transformando eles da seguinte maneira eu estou retornando ao invés de retornar o elemento completo eu estou retornando o resultado do método obter nome completo que retorna o nome completo né o nome e o sobrenome e portanto agora se eu vim aqui e ao invés de selecionar ao invés de acessar a propriedade amigos eu vou acessar o método selecionar amigos e se eu executar este programa agora ao invés de ao

invés de imprimir o objeto completo né agora somente os nomes completos dos amigos está sendo impresso e nós podemos fazer e nós podemos formatar isso aqui da seguinte maneira eu posso criar Ah eu posso passar aqui ó pessoa um ponto nome pessoa 2 pon nome vírgula e pessoa 3 no caso aqui eu estou passando dois argumentos eu estou passando dois argumentos para a função log né Eu estou passando o nome da pessoa e em seguida a lista de amigos da pessoa e agora se eu executar este programa nós vemos que para a pessoa João nós

temos essa lista aqui de amigos para a pessoa Maria nós temos esta lista aqui de amigos e para a pessoa Carlos nós temos esta lista de amigos aqui e nós poderíamos melhorar um pouquinho nós poder nós poderíamos melhorar mais um pouquinho a formatação eu poderia criar aqui um template de string onde eu vou encaixar de forma dinâmica onde eu onde eu vou encaixar dinâmica de forma dinâmica a propriedade nome do objeto pessoa e eu vou escrever aqui ó amigos do encaixando de forma dinâmica o nome do do objeto pessoa dois pontos espaço e depois nós

temos a lista de amigos e eu posso copiar isso aqui ó colar aqui e mudar aqui só o objeto correspondente né perfeito portanto agora nós temos amigo jo tem a Maria Santos e o Carlos Pereira amigos da Maria tem somente o João Silva e amigos do Carlos tem somente o João Silva como foi corretamente adicionado aqui entre as linhas 76 e 77 portanto essa função Construtora para criar objetos do tipo amigo funciona só que tem algumas nós podemos fazer a primeira delas é a primeira delas é alterar Essas funções que está sendo criada com a

palavra-chave function mudar elas para usarem para lembra que na lição sobre funções Nós aprendemos duas formas de criar funções nós podemos criar uma fun com a palavra functions podemos que nós chamamos de função de função seta que é criada assim e essencialmente elas funcionam da mesma maneira né ah esse trecho de código aqui cri é uma função e este trecho de código aqui também cria uma função por exemplo aqui eu posso fazer eu posso escrever aqui ó olá mundo e eu vou atribuir aqui ã dizer olá e aqui eu posso fazer aqui ó constante dizer

olá dizer oi por exemplo oi olá e Oi dizer olá e dizer oi em seguida eu posso utilizar ó dizer olá dizer oi nós vemos aqui agora Esso no terminal Olá e Oi portanto Nós temos duas maneiras de de criar funções Ah eu vou propor o seguinte Vamos alterar a sintaxe das funções que nós definimos aqui para utilizar a sintaxe de funções seta portanto aqui eu vou fazer o seguinte ó primeiramente aqui no método obter ano Nascimento eu vou fazer a seguinte alteração eu vou remover a palavra chave function e depois aqui dos parênteses eu

vou colocar a seta e portanto agora nós teremos exatamente o mesmo resultado aqui no método adicionar amigo eu vou remover a palavra chave function e depois dos parênteses eu vou colocar a seta e portanto agora nós também nós temos nós temos a mesma função só que utilizando a sintaxe da Seta e aqui no método selecionar amigos eu vou fazer o mesmo eu vou remover aqui a palavra chave function e vou colocar uma seta depois dos parênteses e aqui na função que nós passamos para o método map eu vou fazer o mesmo eu vou remover aqui

a palavra-chave function e depois dos parênteses lembrando os parênteses é onde a gente define onde a gente define os nomes dos argumentos no caso do método obter Nascimento a função ela não recebe nenhum argumento por isso nós temos os parênteses aqui vazios já no método adicionar amigo a função ela recebe um argumento é o amigo que vai ser adicionado ah portanto se eu executar este programa agora vamos ver se vai funcionar Ok ainda funciona aparentemente igual né tem uma outra alteração aqui que nós podemos fazer aqui na aqui na aqui na função map que transforma

o vetor né como nós temos apenas como nós temos apenas uma linha de código eu posso fazer o seguinte eu posso remover Olha que interessante eu posso remover as chaves aqui e como nós estamos simplesmente retornando isso aqui nós não precisamos nem da palavra-chave return e portanto agora nós temos um código que é um pouco mais conciso o método map ele para cada elemento que eu estou chamando de amigo eu estou retornando eu estou retornando o resultado do método obter nome completo portanto é assim que nós escreveríamos esse código com JavaScript moderno a forma como

nós estávamos fazendo anteriormente utilizando a palavra chave function funcionava só que dessa maneira aqui nós escrevemos menos linhas de código O que torna o nosso programa um pouco mais legível e eu poderia fazer o mesmo aqui ó na no método obter nome completo eu posso remover aqui a palavra chave function colocar a seta depois dos parênteses e também funcionaria e portanto agora se eu executar este programa nós ainda vemos eles funcionando da forma correta Só que tem um problema aqui que é o seguinte ó ah na vamos ver aqui quando nós definimos o método obter

nome completo no protótipo do objeto pessoa a função que nós passamos a definir como sendo uma função seta perdeu acesso a perdeu o acesso ao objeto através da palavra-chave des se você reparar aqui agora no terminal Nós estamos vendo o nome e o sobrenome das pessoas sendo impresso como undefined isso porque as setas tem uma diferença importante com relação às funções declaradas com a palavra chave function que é a seguinte a a forma como o acesso que as funções seta tem em relação à palavra chavz que representa o próprio objeto é diferente da forma como

funções como funções normais possuem quando eu utilizo uma função normal criada com a palavra-chave function essa a palavra-chave des se refere ao próprio objeto portanto se eu executar este programa aqui ó nós veremos que nós temos novamente acesso às propriedades nome e sobrenome do próprio objeto que nós temos acesso através da palavra chavz é por isso que agora nós temos aqui acesso aos nomes e aos sobrenomes se eu alterar esse método aqui para utilizar uma função seta nós vamos perder esse acesso nós vamos perder esse acesso ao próprio objeto através da palavra chave des se

eu executar este programa agora nós veremos que nós veremos aqui não definido undefined para o nome e sobrenome das pessoas e isso acontece porque nós estamos definindo o método obter nome completo utilizando utilizando uma função seta fora da definição do objeto porque se você reparar aqui dentro da função Construtora nós estamos utilizando funções seta para definir métodos e Essas funções setas elas estão utilizando a palavra chavz para ser se referir ao próprio objeto só Que nestes casos como a função seta está definida dentro da função Construtora nós temos Acesso aqui ao próprio objeto através da

palavra-chave des já nesse caso aqui como nós estamos definindo esse método fora da função construtora em outras palavras nós estamos definindo esses métodos no fora da função Construtora basicamente o que aconteceu aqui é o seguinte a função seta ela perdeu o contexto por assim dizer do objeto que é referenciado pela palavra-chave dess esse contexto ele não é perdido se a gente utilizar uma função convencional portanto utilizando uma função convencional nós temos acesso ao contexto do objeto se o utilizo por outro lado se eu utilizar uma função seta eu vou perder o acesso a esse contexto

A não ser que eu defina esse método aqui dentro da função Construtora portanto se eu pegar esse método aqui ó e definir ele dentro da função Construtora nós teremos acesso a nós teremos acesso ao contexto do objeto como a como método mesmo que utilizando uma função seta está sendo definido dentro da função Construtora nós temos acesso ao contexto do objeto através da palavra-chave des portanto Essa é a se você se lembra da Nossa lição sobre funções onde Nós aprendemos como definir funções ah com a palavra chave function e como definir funções com e como definir

funções com a com a sintaxe da seta se você se lembra Eu mencionei que existe uma pequena diferença entre funções setas e funções criadas com a palavra-chave function e a diferença é essa a diferença é o contexto da palavra chave des que que referencia o objeto em que a função está sendo chamada portanto ah essa é uma diferença importante e uma última coisa que eu quero uma última coisa que eu quero mostrar para vocês aqui é o seguinte a palavra a linguagem JavaScript ela possui alguns construtores que fazem parte da linguagem Portanto vamos aprender aqui

agora construtores internos da linguagem JavaScript um deles é o Construtor string que nos permite criar string como por exemplo Pedro vou criar a string Pedro eu preciso aqui da palavra chave New e eu vou atribuir esse objeto que eu acabei de criar que é um objeto string a constante nome dois e agora se eu imprimir o tipo de dado se eu imprimir o tipo de dado da Constante dois nós veremos aqui Object objeto por outro lado se eu tentar aqui se eu imprimir o tipo de dado da string predo nós veremos aqui string portanto nós

podemos ter Strings como sendo objetos que terão alguns métodos específicos de string e nós também podemos criar Strings normais né Por assim dizer e nós temos também um Construtor para números se eu quiser criar um número por exemplo 5 através do Construtor e depois imprimir no console imprimir no terminal o tipo de dado da Constante número nós veremos ali Object E se eu imprimir o tipo de dado do número inteiro 5 nós veremos ali Number portanto os tipos de dados os tipos de dados simples da língua JavaScript número string Ah boleano eles possuem também construtores

que oferecem algumas algumas funcionalidades e comportamentos específicos portanto Esse é o básico Eh esses são os fundamentos do tópico de programação orientada a objeto que vai nos permitir solucionar problemas de e ah que vai nos permitir solucionar problemas escrever no código com o design um pouco melhor eu vou voltar aqui no no nosso slides só pra gente poder revisar portanto Ah no início do nosso curso Nós aprendemos que nós podemos criar programas com comportamento com comandos individuais né só que à medida que você vai criando programas mais complexos é interessante a gente ter a capacidade

de criar código cujos comandos vão ter uma relação entre si cujos comandos e as variáveis e os dados vão ter relação entre si e Nós aprendemos isso através da criação de objetos agora com a programação orientada a objetos nós podemos utilizar uma função Construtora para criar objetos do mesmo tipo né então ao invés de copiar e colar o código para criar objetos com as mesmas propriedades e os mesmos métodos nós podemos utilizar uma função Construtora para criar esses objetos e nós também podemos Ah e nós também podemos criar esse objetos de tal forma que eles

vão se relacionar com outros objetos que eles vão ah trabalhar com outros objetos por assim dizer e nós vimos um exemplo disso quando nós estávamos adicionando amigos quando nós estávamos adicionando pessoas à lista de amigos de outras pessoas Ah quando a gente quer definir um objeto utilizando uma função Construtora nós vamos utilizar a palavra-chave function objeto será o nome da função que nós vamos utilizar essa função ela vai receber um determinado número de argumentos e através da palavra-chave des nós vamos especificar as propriedades do próprio objeto utilizando os argumentos que foram informados como sendo os

valores dessas propriedades e se nós quisermos E se nós quisermos definir um método em um em um objeto que já foi criado por assim dizer nós podemos através da propriedade Prototype especificar o método utilizando utilizando a palavra-chave function para definir a função para definir o método e lembrando se nós utilizarmos uma função seta Nesse contexto aqui nós vamos perder o acesso ao contexto do objeto através da palavra-chave des além disso se nós quisermos criar uma Instância de um objeto ou seja se nós quisermos criar um objeto daquele tipo é assim que nós é assim que

nós fazemos nós utilizamos o comando New seguido do nome da função Construtora e entre parênteses nós vamos especificar os valores para os argumentos e isso tudo aqui nós vamos atribuir a uma constante ou uma variável para a gente poder acessar a propriedade propriedade de um objeto nós vamos utilizar o operador ponto seguido do nome da propriedade E se nós quisermos acessar se nós quisermos chamar um método de um objeto Nós também vamos fazer isso através do operador ponto só que incluindo os parênteses após o nome do método para que ele possa ser executado Vamos aprender

agora sobre programação orientada a objetos com classes S6 es6 se refere a uma das atualizações da linguagem JavaScript que introduziu a possibilidade de se fazer programação orientada a objetos utilizando conceito de classes ao invés de funções construtoras que foi o que aprendemos na última lição pra gente ver como isso funciona eu vou abrir aqui eu vou abrir o meu editor de código e nós podemos ver aqui o uma função Construtora para criar um objeto do tipo pessoa e essa função aqui foi o que aprendemos na última lição ah naquela naquela lição naquela lição Esta função

Construtora tinha outras propriedades tinha mais propriedades e tinha mais métodos só que para os propósitos de demonstração para esta lição eu tenho aqui uma versão um pouco mais simplificada com apenas três propriedades e um método para que a gente possa criar o mesmo objeto utilizando classes eu vou escrever o seguinte eu vou utilizar a palavra chave Class para a gente poder definir uma classe essa classe ela vai chamar pessoa eu vou digitar abre Chaves fecha Chaves e aqui dentro da Chaves eu preciso definir uma função chamada constructor que será a função Construtora da classe em

outras palavras será a função que será executada quando uma Instância quando um objeto da classe pessoa for criado portanto eu vou definir aqui a classe constructor esse essa é a classe que será chamada quando o objeto for criado e dentro dos parênteses eu vou definir quais argumentos a classe vai receber que no caso será nome sobrenome e data de nascimento em seguida aqui dentro das chaves eu vou criar as propriedades do objeto através do comando des para referenciar o o próprio objeto que está sendo criado através do operador ponto eu vou definir a propriedade nome

que vai receber o valor nome que vai receber o valor do argumento nome que será passado ao objeto e aqui nas linhas 15 e 16 eu declarei as outras propriedades a propriedade sobrenome e a propriedade data de nascimento até então parece bem semelhante ao que nós fizemos aqui com a função Construtora né só que agora nós estamos utilizando a sintaxe de classe es6 perfeito portanto nós temos aqui a função construtora que será chamada quando o objeto for criado eu vou especificar aqui agora um método para essa classe será o método obter nome completo eu vou

escrever aqui obter nome completo nós não para definir para para definir métodos do objeto Nós não precisamos referenciar a palavra chave des Ok Nós só precisamos especificar o nome do método seguido de parênteses Chaves e dentro das chaves eu vou especificar quais serão os comandos que serão executados quando esse método for chamado e aqui eu vou simplesmente retornar um template de string onde eu vou encaixar dinamicamente o nome do objeto e o sobrenome a propriedade sobrenome do objeto e portanto agora nós temos uma classe chamada pessoa que vai construir um objeto com estas propriedades e

com este método e portanto isso aqui que nós escrevemos entre as linhas 13 e 23 é em termos de funcionalidade é igual a função Construtora Que Nós criamos entre as linhas 2 e 10 e portanto agora a forma como a forma como eu vou criar objetos utilizando a classe pessoa será a mesma maneira como nós estávamos criando objetos anteriormente utilizando a função Construtora portanto aqui eu vou escrever const pessoa pessoa um recebe New é a palavra chave que nós precisamos utilizar para criar um novo objeto de determinado tipo o tipo que eu quero aqui é

pessoa e os argumentos aqui que eu vou passar serão João Silva e 7 do dia 7 de 99 será a data e portanto agora se eu executar este programa vai acontecer um erro por conta do seguinte aqui na linha dois eu estou definindo uma uma função Construtora chamada pessoa e aqui na linha 13 eu estou definindo eu estou definindo uma classe chamada também chamada pessoa portanto isso vai causar um conflito de nomeação né se eu executar aqui vamos ver o que vai acontecer deu um erro né Nós temos aqui ó erro de sintaxe syntax error

identificador pessoa já foi declarado portanto para que nós possamos utilizar essa classe que nós acabamos de criar nós precisamos ou remover isso aqui ou colocar num bloco de comentário para que seja ignorado pelo compilador e portanto agora se eu executar este programa bem parece que nada aconteceu mas é porque Nós criamos aqui o objeto pessoa um só que nós não estamos fazendo nada com ele né se nós quisermos se nós quisermos ver que esse objeto ele de fato existe eu posso imprimir ele no console no terminal e portanto agora se eu executar este programa nós

vemos que pessoa um é um objeto do tipo pessoa que possui estas propriedades aqui portanto funcionalmente até então a única diferença entre uma função Construtora e uma classe é simplesmente a sintaxe né é a forma que como a gente está criando o objeto até então não tem muita diferença em funcionalidade por exemplo se eu quiser aqui utilizar o método obter nome completo vai funcionar exatamente igual Ah eu eu tirei o comentário aqui né por isso que deu erro novamente então nós viemos aqui o nome completo né João Silva portanto objetos criados com classe até então

pelo que a gente viu até então funcionam exatamente igual a funções construtoras entretanto utilizar classes para criar objetos vai nos possibilitar algumas ferramentas algumas funcionalidades bem Poderosas e eu vou mudar e eu vou mostrar e eu vou mostrar apenas uma delas agora ah como esse curso ele não é não é um curso focado em programação orientada a objetos eu não vou mostrar todas as ferramentas que nós temos relacionadas a a programação orientada a objetos com classes isso fica para outro curso eu vou mostrar só eu vou mostrar só uma delas que será a ferramenta que

será o conceito de herança em que nós podemos criar classes derivadas de outras classes por exemplo Digamos que eu queira criar uma classe chamada cliente que vai representar um cliente por exemplo um cliente de um banco e essa classe cliente ela terá os as mesmas propriedades e os mesmos métodos da classe pessoa só que com alguns algumas propriedades e alguns métodos extras portanto eu quero criar uma classe chamada cliente que vai funcionar exatamente igual a classe pessoa só que com algumas coisas extras se eu quiser fazer isso eu posso por exemplo copiar isso aqui tudo

colar trocar o nome aqui para cliente e depois adicionar depois adicionar as propriedades extras e os métodos extras só que lembrando Normalmente quando nós estamos copiando e colando trechos de código Isso é uma oportunidade pra gente escrever código com design melhor e nesse caso aqui se eu quero criar uma classe chamada cliente que vai estender por assim dizer a classe pessoa eu posso fazer o seguinte ó eu posso escrever aqui Class cliente extend pessoa portanto eu vou criar uma classe chamada cliente que vai estender a classe pessoa em outras palavras que vai ter tudo que

a classe pessoa tem só que algumas coisas extras aqui dentro das chaves imediatamente imediatamente imediatamente esse trecho de código aqui eu vou colocar chaves para especificar a função construtora que nós precisamos Então vou escrever aqui ó constructor e aqui dentro dos parênteses eu vou especificar Quais são os argumentos que a classe cliente vai receber lembrando a classe cliente ela vai estender a classe pessoa então ela vai então ela vai receber todos esses argumentos aqui mas os argumentos extras que eu quero próprios da classe cliente e no caso aqui a classe cliente só terá um argumento

Extra que será o saldo do cliente por assim dizer né a classe cliente ela vai simular um cliente de um banco e ao contrário da classe pessoa que tem aquelas informações ali né nome sobrenome data de nascimento a classe cliente vai ter uma propriedade própria dela que será o saldo do cliente portanto eu tenho agora o argumento Extra eu vou colocar Chaves aqui e dentro das chaves eu vou especificar o que será feito o que será feito quando um objeto da classe cliente for criado e aqui eu vou fazer o seguinte como a classe cliente

estende a classe pessoa antes de eu poder definir as propriedades próprias da classe cliente eu preciso definir as propriedades próprias da classe pessoa e para isso para eu poder estender para eu poder criar criar a classe cliente estendendo a classe pessoa eu preciso aqui dentro da função Construtora da classe cliente chamar a classe Construtora chamar a função Construtora da classe pessoa e para fazer isso aqui dentro das chaves eu vou chamar uma função especial chamada super a função super ela serve para chamar a função Construtora da classe que tá sendo estendida e portanto e portanto

essa função especial aqui super ela basicamente refere a função Construtora da classe que tá sendo estendida que é a classe pessoa que é essa função aqui em cima e aqui eu vou passar os argumentos que a função Construtora da classe cliente espera que são nome sobrenome e data de nascimento perfeito portanto com essa linha de código aqui eu estou chamando a classe eu estou chamando a função Construtora da classe pessoa que a classe cliente está estendendo em seguida eu vou especificar as propriedades exclusivas da classe cliente que no caso aqui vai ser simplesmente a classe

saldo que vai receber o valor do argumento saldo que foi passado para ela e portanto agora com esse trecho de código aqui eu acabei de criar uma classe chamada cliente que tem as mesmas funcionalidades da classe pessoa exceto que possui uma propriedade Extra que se chama saldo e portant agora aqui na linha 38 eu posso escever posso criar uma constante chamada cliente que vai receber o seguinte eu vou criar um novo objeto do tipo cliente e vou passar os seguintes argumentos Pedro Souza para a data de nascimento eu vou ter o mês 1 dia 1

de 1990 e para o saldo eu vou passar aqui ó 1000 e portanto agora se eu imprimir se eu imprimir o objeto cliente um no terminal nós veremos o objeto cliente impresso no terminal com todas as propriedades que ele herdou da classe pessoa mais a propriedade que é exclusiva dele e eu posso imprimir aqui olha que interessante eu posso acessar todas as propriedades né eu posso acessar aqui ó nome sobrenome data de nascimento eu posso acessar também saldo e nós temos aqui acesso ao nome sobrenome a data de nascimento e o saldo que é 1000

e olha que interessante lembra que a classe pessoa ela possui o método obter nome completo né E como nós estamos ã como a classe cliente herda da classe pessoa Nós também temos acesso a esse método na classe cliente e portanto aqui como o cliente um é um objeto da classe cliente eu posso acessar aqui eu posso chamar o método obter nome completo Pedro Souza isso porque nós estamos estendendo a partir da classe pessoa isso aqui é só é só um pouquinho do que programação orientada a objetos com classe nos permite na linguagem JavaScript tem muito

muito mais coisa interessante que nós podemos fazer mas para os propósitos dessa lição é é isso que nós vamos abordar e portanto nós podemos definir uma classe com a seguinte sintaxe nós vamos utilizar a palavra chave Class especificando imediatamente o nome da classe Ah nós precisamos definir uma chamada constructor que será a função que será executada quando um objeto daquela classe for for criado aqui dentro da aqui dentro da função constructor eu vou especificar as propriedades que esse objeto vai ter e eu também posso especificar os métodos próprios daquela classe Vamos falar agora sobre de

elementos se você chegou nessa parte do nosso curso você já aprendeu as bases da linguagem JavaScript para que a gente para que agora a gente possa aprender a utilizar o JavaScript para criar páginas web de forma dinâmica e para fazer isso a primeira coisa que nós devemos aprender é Como selecionar os elementos da nossa página Web para fazer isso eu vou abrir aqui o nosso editor de código e vocês vão ver que agora eu tenho do arquivos aqui ten um arquivo chamado pgina HTML e outro arquivo chamado programa PJS aqui no aqui no arquivo página

HTML eu vou criar uma página HTML bem básica Primeiramente vou criar aqui o elemento HTML que vai englobar a página inteira criar o elemento onde vão ficar as configurações da página né para o título eu vou escrever aqui JS para iniciantes logo embaixo da tag head eu vou criar a tag Body Onde estará o corpo da página né onde estarão os elementos que de fato serão exibidos e aqui dentro do tag Body eu vou criar Primeiramente um cabeçalho header esse cabeçalho ele terá um título H1 com com a com a string JS para iniciantes e

logo abaixo aqui da tag header eu vou criar uma são com a tag section que terá um formulário tag form que terá dentro um um título H1 com string adicionar usuário logo embaixo eu terei um elemento div com a classe mensagem abaixo eu terei outra div dentro dela eu terei um elemento Label com o texto nome e com o atributo for igual a nome logo abaixo eu terei o elemento inut do tipo texto Type Text e com ID igual aome e logo abaixo dessa div eui outra div com elemento Label cujo texto será e dois

pontos com atributo for ig a eil e logo abaixo eu terei o input do tipo texto Type Text e com ID igual a eil e logo abaixo dessa div eu terei um outro elemento input do tipo submit enviar com a classe botão e com o atributo vho igual a enviar Será o texto que será exibido nesse botão aqui em seguida fora aqui do formulário embaixo do formulário eu terei um elemento o com ID usuários e logo abaixo eu terei um outro elemento o l com a classe itens e dentro dele eu terei um elemento Li

com o texto item um e com a classe item eu vou copiar e colar porque eu quero três elementos li só que com texto diferentes e tem um item dois e item TR em seguida eu vou fazer antes de antes de fechar aqui a tag bar eu quero incluir o arquivo o programa JS né que é o que é o arquivo JavaScript que eu tenho aqui portanto aqui antes de fechar tag bar eu vou incluir através da tag Script o arquivo programa JS e eu especifico e eu especifico isso passando o nome do arquivo programa

JS para o atributo src perfeito portanto agora nós temos uma página HTML simples que que é constituída de alguns elementos que nós agora vamos aprender a Como selecionar através do JavaScript aqui na linha aqui na linha 34 eu conectei esse arquivo que eu tenho aqui como estão Como estão no mesmo diretório se eu abrir aqui o meu terminal digitando control J e eu digitar aqui LS para listar os arquivos que eu tenho no meu diretório atual nós viemos aqui ó que eu tenho uma pasta chamado aula 2 Eu tenho um arquivo chamado página P HTML

e eu tenho um arquivo chamado programa PJS e como esses dois arquivos estão no mesmo na mesma localização né na mesma pasta que é a pasta inicial do meu sistema eu conecto os dois simplesmente informando aqui o nome do arquivo programa PJS se o arquivo programa JS estivesse dentro da pasta aula 2 eu teria que informar aqui aula 2 bar programa PJS E aí esses dois arquivos seriam seriam conectados corretamente ah portanto até então nós estivemos executando o nosso código JavaScript aqui no terminal né utilizando a ferramenta node para executar o programa só que agora

Como nós vamos utilizar o nosso código JavaScript em uma página HTML ao invés de ao invés de executar o programa aqui no terminal nós vamos simplesmente acessar essa página HTML do nosso navegador E aí sim nós poderemos ver E aí nós E aí sim nós poderemos ver o resultado do nosso código JavaScript escrita aqui e só para garantir que estão e só para garantir que os dois arquivos estão conectados corretamente eu vou digitar aqui ó console P log e dentro dos parênteses eu vou colocar conectado perfeito como que eu faço para acessar essa página HTML

como que eu faço para acessar essa página HTML agora bem se você estiver utilizando o editor de código vs code instalado no seu computador ao invés de utilizar ele aqui online né você simplesmente vai abrir esse arquivo página P html no seu navegador então se você tem aí o seu se você tem o vs code instalado no seu computador você vai no arquivo página HTML que você criou e você vai abrir esse arquivo no seu navegador seja o Google Chrome seja o Firefox se você estiver utilizando aqui se você estiver utilizando o nosso editor de

código online você vai escrever o seguinte ó aqui no terminal você vai escrever http tro server Esse comando aqui vai criar um servidor para que você possa acessar esse arquivo aqui no seu navegador eu vou apertar enter e agora que eu apertei Enter o programa ele me ele me ofereceu ele me sugeriu esse link aqui ó é através desse link que eu vou poder abrir essa página aqui no meu navegador portanto eu posso clicar eu posso clicar aqui em seguir o link se eu passar o mouse por cima ou então eu posso copiar isso aqui

também e agora eu vou abrir aqui no meu navegador e portanto Agora eu tenho aqui acesso aos arquivos do meu editor de código eu vou clicar aqui em página pon html e nós veremos agora os elementos que Nós criamos anteriormente nós temos aqui o título nós temos aqui o formulário e nós temos aqui a lista e se eu e se eu quiser ver e se eu quiser ver o código que eu escrevi no arquivo JavaScript eu preciso abrir as ferramentas do desenvolvedor para fazer isso eu vou clicar com o botão direito do mouse aqui na

minha tela e eu vou vir na última e eu vou ir na última opção aqui que é a opção inspecionar essa opção vai me abrir as ferramentas do desenvolvedor E no caso aqui as opções as opções elas estão em inglês mas eu ah as ã esse painel me exibiu uma mensagem aqui dizendo que as ferramentas do desenvolvedor agora estão disponíveis em português em língua portuguesa portanto se eu clicar aqui eu acredito que a página ela vai recarregar vamos testar Ah não não precisou recarregar a página só recarregou aqui as ferramentas do do desenvolvedor e tem

muitas opções aqui né certamente ah certamente é bem mais opções do que a gente vai utilizar aqui nesse curso o que vocês prec a única aba que vocês precisam ter atenção é essa aba aqui ó console onde nós poderemos ver a mensagem conectado que foi a mensagem que a gente escreveu aqui no nosso código JavaScript e portanto sempre que você imprimir alguma coisa utilizando o comando console.log essa mensagem ela será impressa aqui no console que é essa aba aqui das Ferramentas do do desenvolvedor e portanto vamos aprender agora as diferentes maneiras que que nós podemos

Ah que nós podemos selecionar os elementos da nossa página eu vou eu vou expandir aqui colocar em tela cheia nas duas janelas e agora vamos aprender a Como selecionar os elementos existem cinco maneiras da gente poder selecionar os elementos eu já vou colocar aqui cada uma delas cada um dos Comandos primeir primeiramente nós temos byid que vai nos possibilitar selecionar elementos através do id nós temos document elements by tag que vai nos permitir selecionar elementos no plural através do nome da tag nós temos aqui que vai nos permitir selecionar elementos através do nome da classe

e além disso nós temos document query selector que vai nos permitir selecionar elementos através das das regras de seleção que que a gente especificar eu vou explicar para vocês daqui a pouco e por fim nós temos document query selector All que também vai nos permitir selecionar elementos através das regras que a gente especificar ali então esses são as cinco formas da da gente selecionar elementos na nossa página Vamos aprender a primeira aqui que é o document getelement byid e detalhe todos esses métodos aqui para selecionar elementos são métodos do objeto document document é um objeto

na linguagem JavaScript que se refere ao próprio documento da página que neste caso é o arquivo página HTML e portanto quando Nós visitamos uma página no nosso navegador e essa página contém código JavaScript no código JavaScript a palavra-chave document se refere ao próprio documento a própria página HTML e esse Jet document ele tem alguns métodos ele tem vários métodos né ele tem várias propriedades vários métodos e estes cinco aqui são métodos para selecionar elementos esse aqui get Element by ID nos permite selecionar um elemento através da propriedade id e pra gente entender aqui o significado

o significado dessa pal dessa frase né Nós temos a palavra get que significa selecionar nós temos Element que significa elemento nós temos by que significa através de e nós temos ID que significa ID né o identificador o atributo id e se a gente der uma olhada aqui no nosso arquivo página pon HTML nós vemos que por exemplo Ah nós vemos que ah eu esqueci de eu esqueci de incluir aqui o seguinte aqui no no elemento forme do formulário era para eu ter incluído aqui um atributo ID que vai ser igual a meu formulário e aqui

no elemento section era para era para eu ter incluído um atributo classe igual ainer Ok eu esqueci de incluir quando a gente criou essas páginas perfeito portanto se eu tenho um elemento que que possui a propriedade D igual a meu formulário eu posso utilizar esse valor aqui meu formulário do atributo ID para selecionar este elemento aqui portanto eu vou botar aqui no meu código JavaScript e eu vou chamar esse método get Element by id e eu vou informar aqui dentro dos parênteses o ID do elemento o valor do ID do elemento que eu quero selecionar

que no caso é meu formulário e portanto agora com esse esse trecho de código aqui nós poderemos nós teremos acesso ao elemento que possui que possui o ID meu formulário eu vou fazer o seguinte eu posso por exemplo imprimir isso aqui no terminal console.log e agora quando eu voltar aqui para nossa página paraa nossa página web e recarregar esta página nós veremos impresso aqui Eu recarreguei a página apertei a tecla F5 nós podemos ver aqui agora no nosso console o elemento com o ID meu formulário e portanto e portanto é assim que funciona o método

get Element by ID Vamos aprender agora o método get elements by tag name que vai nos permitir selecionar elementos através da tag Lembrando aqui no nosso na nossa página nós temos alguns elementos nós temos alguns elementos aqui né por exemplo nós temos elemento header H1 section form div e outros elementos Digamos que eu queira selecionar os elementos com a tag li que é um item de uma lista né portanto aqui no meu JavaScript eu vou fazer o seguinte eu vou chamar esse método get ah signica sele elementos através através do nome da get elal enquanto

que o método get Element by ID S retorna um elemento com determinado ID Ou seja a regra diz o seguinte eu só posso ter um elemento com ID meu formulário qualquer ID qualquer valor de ID qualquer valor para a propriedade D tem que ser única na página né portanto é por isso que o método get Element by ID no seu próprio no nome do próprio no nome do próprio método diz que é um elemento só né Element é singular já no método já no método get elements plural ele vai retornar mais de um ele vai

retornar todos os elementos que tem aquela tag e a tag que eu vou selecionar aqui vai ser a tag li Para Um item de lista e se eu imprimir isso aqui no terminal ou melhor se eu imprimir isso aqui no console e eu voltar aqui para minha página eu vou recarregar a página digitando F5 e nós veremos aqui agora no console o que nós chamamos de coleção html html Collection é simplesmente uma lista de elementos HTML e se eu expandir aqui ó nós veremos que nós temos três elementos Li e olha que interessante quando eu

passo o mouse por cima aqui na minha página onde os elementos estão de fato sendo exibidos quando eu passo o mouse por cima de um elemento aqui no console lá na página que é exibida para o usuário esses elementos eles são destacados né então ah essa é uma das Ferramentas e essa é uma Essa é uma das funcionalidades que a que as ferramentas do desenvolvedor que é esse painel aqui que a gente tá olhando agora nos oferece quando você estiver escrevendo seu código e aí você tiver algum erro tiver algum bug no seu código você

pode utilizar as ferramentas do desenvolvedor para poder checar para poder ver as propriedades para poder analisar os elementos da sua página e quando eu passo o mouse aqui quando eu passo o mouse por cima aqui do elemento form ele também é destacado ali na página e portanto é dessa maneira que funciona o método get elements by tag name ele vai nos retornar uma lista ou melhor uma coleção HTML com todos os elementos que são com todos os elementos daquela tag que você especificou né nesse caso aqui li perfeito Vamos aprender agora o método get elements

by Class name selecionar get elementos elements by através Class name nome da classe vai nos permitir selecionar elementos que tem a mesma classe por exemplo se eu voltar aqui na nossa página no nosso arquivo página P HTML eu vejo que eu vejo que nós temos aqui mais de um elemento com a classe item né Nós vemos aqui que nós temos três elementos com a classe item e portanto eu posso utilizar essa classe para selecionar esse conjunto de elementos E agora se eu imprimir isso no console nós veremos nós veremos a mesma coleção Que nós tínhamos

anteriormente né porque essa primeira coleção aqui foi selecionada com o método get elements by tag name essa segunda coleção aqui foi selecionada com o método get elements Class name através da classe né É o mesmo conjunto de elementos Porque são os mesmos elementos com com a mesma tag e com a mesma classe mas se eu tivesse aqui por exemplo um quarto elemento Li sem a classe item E se eu recarregar aqui a página nós veremos que quando nós utilizamos quando nós utilizamos o método get tag selecionando através da tag li ele nos retorna os quatro

elementos os três primeiros que possuem a classe item e o quarto que não possui a classe item os quatro são retornados porque nós estamos utilizando o nome da tag já nessa segunda coleção aqui nos é retornado apenas os itens li que possu ae item nós estamos utizando o método get Element by portanto é assim que esse método funciona Vamos aprender agora esses dois métodos aqui ó selector então enquanto que enquanto que esses três primeiros métodos Que Nós aprendemos aqui selecion elementos ah enquanto que esses três métodos Que Nós aprendemos só podem ser usados para selecionar

elementos de através de quesitos bem específicos né no caso o no caso o método get Element by ID só seleciona através do id o método get elements by tag name só seleciona através do nome da tag o método get elements by Class name só seleciona através do nome da classe já o método qu selector e e o e o outro e o método query selector All ambos os métodos podem ser utilizados para selecionar através do id através do nome da tag através do nome da Classe A diferença é que query selector vai retornar apenas o

primeiro elemento que satisfazer a regra de seleção já o método crib selector All vai nos retornar todos os elementos que satisfazerem a regra de seleção que a gente vai especificar dentro dos parênteses né e a diferença aqui é a seguinte ã a palavra query significa consulta selector significa selecionador Então esse Se a gente fosse traduzir query selector significa ã selecionador de consulta vai ser uma forma de S de selecionar elementos Basicamente já aqui nesse segundo método nós temos selector All a palavra All significa todos e a diferença aqui é que o método quy selector All

vai nos retornar todos os elementos que satisfazerem o quesito de consulta aqui ou seja ele vai nos retornar uma lista Basicamente já o método cre selector vai nos retornar apenas um elemento Ok vamos aprender vamos ver como que o que selector funciona aqui dentro dos parênteses eu vou especificar uma regra de consulta se eu escrever aqui por exemplo li ele vai nos ele vai me retornar o o primeiro elemento do tipo Li com a tag Li e se eu imprimisse aqui no console vamos ver o que que vai retornar aqui pra gente Ok então ele

ele retornou o primeiro item ó ele retornou o primeiro elemento com a tag li ah eu falei anteriormente que nós podemos usar tanto o método quy selector quanto o método selector All talvez eu falei talvez eu não falei mas eu vou falar agora caso eu não tenha falado nós podemos utilizar eles para selecionar através através através do id e através da classe também por ex por exemplo se eu quiser selecionar um elemento com a com o ID meu formulário eu vou especificar o valor do ID que eu quero selecionar só que eu preciso incluir um

sinal de jogo da velha antes do valor e caso vocês caso você caso você que esteja assistindo esse curso Tenha tenha feito tem assistido algum tutorial de CSS anteriormente que é uma linguagem que nós utilizamos para estilizar os elementos da nossa página HTML certamente Você se lembra que quando nós queremos estilizar um elemento através do seu ID nós utilizamos o sinal de jogo da velha para selecionar aquele ID em particular por exemplo se eu quiser se eu quiser estilizar um elemento se eu quiser estilizar um elemento com o ID meu formulário eu venho aqui na

minha página HTML e eu posso fazer o seguinte eu posso aqui no final ó eu posso criar uma tag Style para criar um estilo né criar uma regra de estilo e eu vou colar aqui ó joga da velha meu formulário abre Chaves fecha Chaves eu vou especificar o estilo cor color e eu vou especificar como sendo Red vermelho e agora se eu voltar aqui PR minha página web nós veremos Ah nós iremos que todos os elementos nós iremos que todos os elementos dentro dentro dentro do formulário que possui que possui o d que possui que

possui o ID meu formulário nós vemos que os elementos aqui agora possuem a cor do texto igual a vermelho né e portanto é assim que nós podemos utilizar o id de um elemento para estilizar ele utilizando símbolo jogo da velha e é esse mesmo símbolo que nós podemos utilizar aqui no método selector para selecionar um elemento com determinado ID se eu quiser selecionar um elemento com determinado determinada classe especificar o nome da classe como por exemplo item só que antes do nome da classe eu eu preciso colocar um ponto é assim que nós vamos especificar

que nós queremos selecionar os elementos com a classe item eu coloco um ponto aqui então portanto Essas são as regras se não tiver jogo da velha e nem o ponto como é o caso aqui na na linha 11 nós vamos selecionar através do nome da t se tiver um jogo da velha nós estamos selecionando através do id se tiver um ponto nós estamos selecionando através da classe e portanto agora se eu for aqui se eu vir aqui na na minha página e atualizar nós veremos que o primeiro elemento com a classe item foi selecionado né

o que nós acabamos de especificar aqui já o método query selector All vai nos retornar todos os elementos que satisfazerem aquela regra então portanto se eu quiser selecionar todos os itens com a classe item eu preciso colocar um ponto aqui antes né do nome da classe e portanto agora se eu imprimisse aqui no console nós veremos que nós temos aqui todos os elementos com a classe item e tem um detalhe aqui tem uma diferença aqui enquanto que enquanto que os métodos get elements by tag name e get elements by Class name nos retorna nos retorna

uma estrutura chamada HTML Collection o método cre selector all nos retorna uma estrutura chamada node list e ainda que sejam coisas diferentes né Elas basicamente vão se comportar para ã vão se comportar exatamente da mesma forma é simplesmente uma lista com os elementos ainda que o nome aqui seja diferente e ainda que existam algumas nuances ainda que existam algumas pequenas diferenças entre um entre uma lista node list e uma lista HTML Collection para os propósitos desta desse curso eles vão funcionar exatamente da mesma maneira E olha que interessante eu posso voltar aqui deixa eu voltar

aqui no no nosso código eu vou pegar este eu vou pegar eu vou pegar essa lista aqui dos elementos com a classe item eu vou atribuir eles a uma constante chamada itens E olha que interessante Nós aprendemos na lição sobre funções de ordem maior que ah que vetores né que listas possuem um método chamado for each que vai percorrer os elementos de de determinado vetor e vai fazer alguma coisa com esses elementos aqui dentro Eu preciso criar eu preciso eu preciso passar uma função que recebe o item e que eu vou chamar de item e

o que eu vou fazer aqui vai ser o seguinte como é só uma linha de código eu não preciso de Chaves eu vou simplesmente executar o comando console log passando o próprio item como argumento e agora quando eu voltar aqui na nossa página eu vou recarregar a página digitando F5 ã deu um erro aqui na página pera aí deixa eu remover isso aqui talvez Ok H ok foi só um um erro do do sistema de qualquer forma agora eu tenho aqui ó os três elementos com a classe item impressos individualmente essas ess essas três impressões

aqui ó essas três mensagens aqui são resultado dessa linha 17 aqui portanto são essas as maneiras que nós podemos selecionar elementos utilizando JavaScript Vamos aprender agora Como nós podemos manipular os elementos da nossa página em programação web nós temos esse conceito que nós chamamos de Dom Dom se refere ao modelo de objeto do documento é basicamente a forma como os elementos da sua página são estruturados e quando nós falamos sobre quando nós falamos sobre manipulação do Dom nós estamos falando sobre a manipulação dos elementos da sua página eu vou voltar aqui no nosso ah editor

de código onde nós temos o código da da lição anterior eu vou remover tudo aqui do arquivo programa PJS o arquivo página P HTML eu vou manter como nós tínhamos como nós tínhamos Inicialmente nós vamos nós vamos utilizar esse mesmo arquivo aqui e aqui dentro do arquivo programa PJS eu tenho aqui o meu servidor rodando ainda né É por isso que aqui na minha página Eu ainda tenho acesso a a nossa página HTML eu vou voltar aqui no nosso editor de código eu vou fechar aqui o terminal e aqui eu quero selecionar eu quero selecionar

o elemento com a classe itens que é este elemento aqui ó é o elemento com a classe itens para eu poder selecionar ele primeiramente eu vou selecionar o próprio documento da página através do objeto document esse objeto document ele possui um método chamado query selector que vai nos permitir selecionar um elemento através da regra que nós especificarmos aqui eu quero selecionar o elemento com a classe itens por isso que eu vou colocar um ponto antes do nome da classe e portanto eu vou atribuir o resultado desse trecho de código aqui que vai nos retornar o

elemento em uma constante chamada ul portanto agora eu criei uma constante chamada ul que vai que vai receber o elemento com a classe itens e eu posso por exemplo imprimir esse elemento no console se eu recarregar a página nós veremos o elemento aqui impresso no console que é esse elemento que tá sendo destacado ali na página Ok vamos aprender agora o primeiro método de manipulação do dom de manipulação dos elementos da nossa página que que é o elemento que é o método que vai nos permitir remover um elemento Então eu tenho acesso ao elemento que

é o que é a constante o l que eu criei aqui que eu criei aqui na linha um quando nós temos acesso aos elementos aos elementos da página esses elementos eles possuem um método chamado remove o método remove ele vai remover o elemento da página e portanto agora se eu voltar aqui no meu navegador e atualizar a página nós veremos que o elemento L ele sumiu né ele não está mais sendo exibido aqui ele foi impresso aqui no console porque eu imprimi ele aqui na linha dois mas depois aqui na linha 5 através do método

remove eu removi ele da página é por isso que nós não vemos a lista mais aqui e olha que interessante depois que eu removi depois que eu removi o elemento o l a a a exibição dele aqui no no console foi alterada né como ele não existe mais na página eu não consigo mais ver Quais elementos que ele tem né eu consigo ver só que ele era um elemento tag u e que ele tinha uma classe ah itens só que eu não consigo ver aqui os elementos né dele como nós poderíamos ver anteriormente se eu

remover essa se eu comentar essa linha aqui hã pera aí Ok eh o servidor Ele demora um pouco para poder para poder atualizar as alterações portanto eu eu eu portanto eu atualizei o navegador digitando F5 vou apertar de novo e nós podemos ver aqui agora que nós temos novamente acesso aos elementos e nós podemos ver o nós temos acesso ao elemento ol e nós temos acesso aos elementos dentro do elemento l isso porque nós comentamos aqui o método remove se eu remover o comentário para que ele seja ativado né para que a linha seja executada

se eu atualizar página o elemento sumiu e nós não nós não conseguimos mais ver os elementos que ess o os os elementos que esse elemento L tinha dentro dele né portanto é assim que é assim que o método remove funciona ele vai remover o elemento completo junto com os elementos filhos junto com os elementos que estão dentro dele Ah deixa eu comentar isso aqui porque eu vou mostrar uma outra maneira da gente remover elementos Então eu tenho acesso aqui à constante ul elementos HTML na linguagem JavaScript possuem uma propriedade chamada last Element child a palavra

last significa último Element significa elemento e child significa filho last Element child representa o último elemento que está dentro do elemento l o último elemento filho do elemento Hélio se a gente der uma olhada aqui no arquivo página pon HTML nós vemos que o último elemento filho do elemento L é esse elemento li aqui ó que não possui uma classe e e que tem o texto item quatro dentro dele portanto Olha que interessante como esse elemento aqui que nos é retornado através da propriedade last Element child é por si só um elemento HTML né eu

posso chamar o método remove em cima dele para poder remover apenas ele da página web e agora se eu voltar aqui para o nosso navegador e atualizar a nossa página nós veremos que o item 4 ele foi removido deixa atualizar a página de novo o item 4 ele foi removido mas ainda nós temos Acesso aqui ao item o l completo portanto é assim que nós podemos remover o último elemento filho de determinado elemento nós acessamos o último elemento filho através da propriedade last Element child e nós chamamos o mtodo o método remove em cima dessa

propriedade eu vou comentar essa linha de código aqui além de além de possuir a propriedade L Element child elementos HTML também possuem uma propriedade chamada first Element child a palavra first significa primeiro Element elemento child filho e essa propriedade aqui nos retorna O primeiro elemento filho de determinado elemento no caso do no caso do elemento l o primeiro elemento filho é esse aqui ó é o primeiro elemento que está dentro do elemento o l é o que possui o texto item um eu posso fazer o seguinte ó dessa vez eu não vou eu não vou

remover porque já mostrei como fazer isso dessa vez eu eu vou mostrar como alterar o conteúdo texto do elemento Portanto o conteúdo texto desse primeiro elemento filho aqui é item um se eu quiser acessar esse conteúdo texto eu posso eu posso fazer isso através da propriedade text content a palavra text significa texto content significa conteúdo text content é a propriedade de um elemento que representa o texto o texto do elemento né e eu posso eu posso imprimir por exemplo eu posso imprimir esse conteúdo texto no terminal se eu executar se eu recarregar a página nós

vemos aqui item um é o conteúdo texto do elemento do primeiro elemento filo né item um só que eu quero fazer o seguinte ao invés de imprimir no terminal Eu quero alterar Eu quero alterar para que seja Olá e nós podemos fazer isso simplesmente utilizando o operador de atribuição né o único sinal de igual e agora se eu atualizar essa página nós veremos que o o conteúdo texto do primeiro elemento filho agora é Olá deixa eu dar um zoom aqui perfeito portanto é assim que nós podemos definir o conteúdo de texto de um elemento perfeito

elementos HTML também possuem uma propriedade chamada Children a palavra Children em inglês significa filhos e a propriedade Children de um elemento HTML nos retorna os elementos filhos daquele elemento se eu imprimir isso aqui no terminal no se eu imprimir no console nós nós veremos Ah nós nós veremos uma uma coleção dos elementos filhos né E olha que interessante como é uma coleção HTML que funciona basicamente igual a um vetor nós podemos acessar os elementos individuais dessa coleção aqui através do índice né Nós vemos aqui por exemplo que o primeiro elemento está no índice zero o

segundo elemento está no índice um o terceiro elemento está no índice dois e o quarto elemento está no índice três se eu quiser por exemplo acessar o segundo elemento dessa coleção Eu vou acessar através do índice um portanto aqui no código eu vou fazer o seguinte ó eu vou acessar um elemento específico através da sintaxe dos colchetes eu vou especificar aqui dentro dos colchetes que eu quero acessar o elemento no índice 1 [Música] e eu vou especificar aqui que eu vou especificar a propriedade text content igual a oi e portanto agora se eu executar este

programa se eu recarregar a página melhor nós veremos agora que o texto interno é igual a Oi elementos HTML possuem uma outra propriedade bem semelhante à propriedade text content que é a propriedade Inner text a propriedade iner significa interno text significa texto e Inner text é uma propriedade que vai funcionar basicamente igual a propriedade text content vai vai alterar o texto do elemento E se eu voltar aqui na nossa página e atualizar ela nós veremos que o texto aqui do elemento ainda é o e ainda que nós estejamos utilizando uma propriedade com um nome diferente

mas que funciona igual a propriedade text content perfeito ah digamos que eu queira agora Digamos que eu queira fazer o seguinte ao invés de alterar o texto interno né a invés de alterar o texto do elemento para que seja Oi Digamos que eu queira alterar o texto para que seja um elemento HTML como por exemplo H1 e aqui eu vou colocar Oi poder exibir poder colocar um elemento H1 que vai serele título grande né dentro aqui dentro aqui do elemento se eu voltar aqui para a minha página e e atualizar essa página apertando F5 nós

veremos que o elemento não está sendo exibido corretamente né eu eu eu defini o texto interno do elemento como sendo essa tag aqui HTML H1 só que ele não foi exibido corretamente ele foi exibido como texto ele não foi exibido com a formatação de um elemento H1 como nós podemos ver aqui nos dois exemplos acima né esses esses dois elementos aqui eu posso utilizar essa opção aqui ó para selecionar um elemento na página e ele me mostrar o código aqui no console se eu clicar aqui ó nós veremos que ele é um elemento H1 e

esse aqui também é um elemento H1 eles têm essa formatação aqui que eles são maiores né entretanto quando eu tentei fazer isso alterando o texto interno do elemento para que fosse um para que fosse essa para que fosse esse elemento esse elemento H1 ele ele não foi exibido corretamente né e o motivo é o seguinte quando nós utilizamos a propriedade text content ou a propriedade Inner text para alterar para para especificar o texto de um elemento caso você ah o que quer que o que quer que você passe aqui será exibido como sendo texto ainda

que você passe um texto que seria um elemento HTML válido ele não vai ser exibido como sendo um elemento HTML pra gente poder fazer isso pra gente poder pra gente poder especificar um elemento HTML de forma dinâmica assim nós precisamos utilizar uma propriedade diferente dessas duas aqui e a propriedade que nós vamos utilizar vai ser a seguinte para poder faz para poder fazer essa demonstração eu vou selecionar o elemento ul eu vou selecionar a propriedade last Element child que nós utilizamos anteriormente para selecionar o último elemento filho que vai ser o item 4ro aqui né

e aqui eu vou acessar a propriedade Inner HTML através dessa propriedade caso eu passe aqui caso eu passe aqui uma string que seria um elemento HTML válido como eu estou utilizando a propriedade Inner html html interno a palavra Inner significa interno essa string aqui que é um elemento HTML válido será exibido com a formatação correta portanto agora se eu voltar aqui para nossa página e atualizar a página nós veremos o nós veremos o o elemento quatro aqui agora sendo um elemento H1 com a formatação correta Se eu der uma olhada aqui no segundo elemento nós

vemos que o nós vemos que a string não foi formatada como sendo como sendo o elemento H1 né ela foi ela foi formatada aqui como sendo string né portanto é essa a diferença do comportamento das propriedades da propriedade iner HTML em relação às propriedades Inner Text e text content portanto com a propriedade Inner HTML nós podemos definir o HTML interno de um elemento ah perfeito vamos ver agora como nós podemos alterar o estilo alterar o estilo de um elemento eu vou selecionar aqui eu quero selecionar agora o elemento botão aqui ó o elemento com a

classe botão eu poderia utilizar eu poderia utilizar o método get elements by Class name para selecionar esse elemento através da classe só que eu quero utilizar o método selector eu vou passar aqui que a classe que eu quero selecionar é a classe botão eu preciso eu preciso colocar um ponto aqui antes antes do nome da classe poder scion corretamente vou atribuir esse resultado aqui que vai ser a seleção do elemento a uma constante chamada botão eu posso imprimir no console para garantir que foi selecionado corretamente portanto Aqui nós temos agora acesso ao elemento botão né

e agora eui o seguinte eu vou selecionar eu quero eu quero alterar a propriedade cor de fundo desse elemento para que ele tenha cor de fundo vermelha por exemplo para isso eu vou acessar a propriedade Style que é a propriedade que terá todos os acessos Ao estilo do elemento e aqui eu vou eu vou acessar uma propriedade chamada background background é a propriedade que nos permite definir uma uma cor de fundo por exemplo e aqui eu vou atribuir o valor Red que é a cor vermelha que é o nome da cor vermelha em inglês e

portanto agora se eu voltar aqui na nossa página e recarregar ela nós veremos que o elemento agora possui uma cor de fundo igual a Vermelho Se eu mudar aqui para Blue e atualizar a página nós vemos agora uma cor de fundo igual a azul e se eu mudar para Yellow nós veremos agora uma cor de fundo igual a amarelo e portanto todas as cores que você tem em inglês você pode utilizar aqui por exemplo Green para verde demora um pouquinho para recarregar deixa eu atualizar a página novamente ok Verde a pink por exemplo nós temos

agora a cor de fundo rosa e portanto é assim que nós podemos alterar os estilos de um elemento de forma dinâmica portanto é assim que nós podemos manipular os elementos do nosso na da nossa página isso aqui é só o início tem muita mais coisa bem bacana que você pode fazer utilizando a linguagem JavaScript JavaScript para poder manipular os elementos da da sua página mas para este curso isso é tudo que a gente vê se você quiser aprender mais sobre manipulação do Dom ã eu vou deixar eu vou deixar aqui no na descrição desse vídeo

um link para um tutorial para um curso focado apenas em manipulação do Dom manipulação dos elementos de uma página para que você possa se aprofundar um pouco mais nesse assunto que é um assunto muito importante portanto para revisar quando se trata de manipulação do Dom Estas são as ferramentas que nós acabamos de aprender nós temos o método remove para remover um elemento da página nós temos a propriedade last last Element child para selecionar o último elemento filho nós temos a propriedade first Element child para selecionar o primeiro elemento filho de determinado elemento nós temos a

propriedade Children que nos retorna a lista de elementos filhos nós temos a propriedade text content e Inner text que nos permite acessar o conteúdo de texto do elemento nós temos a propriedade Inner HTML que nos permite Ah que nos permite definir de forma dinâmica elementos HTML dentro de determinado elemento e nós temos a propriedade Style que nos permite acessar os os estilos de determinado elemento Vamos aprender agora sobre eventos Eventos São ações que acontecem na página e normalmente são ativados pelo usuário existem vários tipos diferentes de eventos que podem vir acontecer por exemplo clicar com

o mouse sobre um elemento passar o ponteiro do mouse sobre um elemento pressionar uma tecla do teclado dimensionar ou fechar a janela do navegador uma página Web terminando de carregar enviar um formulário um vídeo sendo reproduzido interrompido ou terminando sua reprodução um erro acontecendo e existem vários outros tipos de eventos que podem acontecer numa página Web pra gente poder ver isso na prática eu vou abrir aqui o nosso editor de código que possui o código da nossa lição anterior portanto eu vou remover tudo isso aqui aqui no arquivo página pon HTML Eu quero remover também

essa estilização aqui no final que eu tinha incluído portanto eu vou remover isso aqui e o resto nós vamos deixar como está pra gente poder visualizar nossa página eu vou ativar aqui aqui o nosso servidor novamente digitando http traço server para ativar o nosso servidor aqui na página aqui no navegador onde a nossa o nosso site Já está aberto eu vou simplesmente recarregar mas mas caso você tenha caso você tenha fechado o o navegador você pode vir aqui no seu terminal depois de ter lançado depois de ter lançado o programa http server você vai encontrar

o link para o seu servidor que vai ser diferente do meu aqui abaixo da frase available on abaixo de available on você vai encontrar esse link aqui que vai ser diferente para você Onde estará o seu servidor para que você possa acessar o site no seu computador perfeito Vamos aprender então o evento essencial em JavaScript que é o evento clique quando você clica em um elemento essa essa ação de clicar no elemento vai ativar o evento clique Portanto vamos fazer o seguinte eu vou selecionar elemento aqui ó J Ah eu vou selecionar o elemento com

título JS para para iniciantes mas para eu poder selecionar ele de forma mais fácil eu vou atribuir uma propriedade D uma uma propriedade D com o valor título só para ficar mais fácil da gente selecionar esse elemento aqui no arquivo programa PJS eu vou digitar document para selecionar o objeto documento né que representa a página web e eu vou acessar o método get Element by ID para selecionar o elemento com o ID título eu poderia também utilizar eu poderia também se eu quisesse selecionar o elemento com ID título eu poderia utilizar o método query selector

só que eu precisaria colocar um sinal de jogo da velha antes do antes do antes do valor do id né dessa maneira aqui e ambos ambos trechos de código retornariam o mesmo elemento eu vou criar uma constante chamada título que vai receber esse elemento que foi selecionado e só para garantir que eu tenho acesso a esse elemento deixa eu dar um zoom aqui só para garantir que eu tenho acesso a esse elemento eu vou digitar aqui ó console.log título para garantir que nós temos acesso a ele eu vou recarregar esta página e nós vemos aqui

o acesso nós vemos aqui impresso no console o elemento com ID título eu vou voltar aqui para o nosso código JavaScript e eu vou fazer o seguinte aqui na linha TR eu vou selecionar o elemento título e através do operador ponto eu vou acessar um método chamado add event listener add add significa adicionar event significa evento e Lener significa escutador ou melhor detector e portanto através do método add event listener nós vamos adicionar um detector de eventos ao elemento esse método add event listener ele espera receber dois argumentos o primeiro vai ser o evento que

nós queremos detectar e o segundo será a função e o segundo e o segundo argumento será a função de retorno que é a função que vai ser executada quando o evento for detectado Portanto vamos recapitular quando nós queremos quando nós queremos detectar um evento na nossa página e fazer alguma coisa quando aquele evento for detectado nós vamos utilizar o método add event listener adicionar detector de eventos esse método ele vai receber dois argumentos o primeiro será o nome do evento que nós queremos detectar e o segundo argumento será o que nós chamamos de função de

retorno que é uma função que é executada quando o evento é detectado o evento que nós queremos detectar se chama Esse é o nome do evento nós precisamos passar como sendo nós precisamos passar como sendo uma string Ok e a função de retorno aqui eu vou aqui em cima declarar uma nova função chamada chamada imprimir título essa função ela vai simplesmente imprimir no console título e portanto aqui eu vou passar agora como sendo a função de retorno essa função que eu acabei de definir aqui entre as linhas 3 e 5 você precisa passar só o

nome da função você não pode passar a função sendo executada Se você passar a função sendo executada com os parênteses não vai funcionar da forma correta você tem que passar somente o nome da função e agora se eu voltar aqui para o nosso navegador eu vou recarregar a página para para aplicar as alterações e agora se eu fiz tudo corretamente quando eu clicar aqui no no quando eu clicar aqui no elemento Título nós veremos eu acabei de clicar ó se você se você prestar atenção no áudio ó eu cliquei no evento eu cliquei no no

elemento e nós vemos aqui impresso no console o o próprio elemento né porque a função imprimir título foi executada vou mostrar mais uma vez ó eu vou clicar no elemento título e nós vemos aqui impresso no console o elemento e portanto é assim que funciona o método add events listener Vamos mostrar um exemplo mais prático vamos imaginar o seguinte eu quero Digamos que eu quero quando esse botão aqui Enviar for clicado Digamos que eu quero deixa eu pensar Digamos que eu quero alterar a cor de fundo do formulário aqui né então quando o botão aqui

Enviar for clicado Eu quero alterar a cor de fundo do formulário para fazer isso eu vou voltar aqui no nosso código eu vou remover isso aqui tudo e agora eu vou selecionar através do método query selector o elemento com a classe portanto eu vou escrever aqui um ponto com a classe botão se a gente voltar aqui no nosso código HTML deixa eu diminuir o zoom nós podemos ver aqui que o elemento botão ele possui a classe botão portanto é esse elemento que eu vou selecionar eu vou inicializar uma constante chamada botão que vai receber esse

elemento e agora vou fazer o seguinte ó botão pon add event listener o evento que eu quero detectar é o evento Click e a função de retorno que eu que que vai ser executada quando o botou for clicado eu vou criar ela aqui em cima eu vou chamar ela simplesmente de Botão foi clicado e essa função a princípio vai simplesmente imprimir o elemento botão no console e eu vou passar essa função botão foi clicado como sendo a função de retorno do método event listener E agora se eu voltar aqui para o nosso terminal eu vou

recarregar a pro nosso navegador eu vou recarregar a página e agora quando eu clicar aqui no elemento no botão enviar se tudo deu certo eu vou ver aqui impresso no console o próprio botão portanto eu vou clicar ó prestem atenção e olha que interessante eu não eu não sei se vocês repararam mas quando eu cliquei o botão enviar ele ia ser impresso aqui no console só que a página ela foi recarregada eu vou tirar aqui o o o modo tela cheia pra gente poder ver isso na prática presta atenção eu vou clicar no botão enviar

a princípio vai parecer que ele vai ser impresso aqui porque esse esse esse sinal aqui essa seta que indica que que nós podemos escrever comandos vai ser abaixada aqui para ter espaço para para ter espaço para o botão ser impresso aqui né no console só que a página ela vai ser recarregada presta atenção se você reparar aqui ó repara nessa área aqui em cima no canto superior esquerdo se você reparar el a a página ela é recarregada eu vou mostrar de novo ó mas por você isso né eu tô simplesmente detectando o evento clique e

eu estou e eu estou executando a função botão foi clicado quando o evento clique é detectado e o motivo pelo qual quando quando o botão clique quando o evento clique é detectado a página ela é carregada o motivo é o seguinte eu vou voltar aqui no nosso arquivo página pon HTML e se você reparar o botão que Tecnicamente é um elemento do tipo input só que do tipo é um elemento input do tipo submit um elemento input do tipo submit equivale a um botão em um formulário que quando duplicado faz o formulário que é esse

elemento aqui maior faz o elemento formulário ser enviado para o servidor e quando um formulário quando as informações de um formulário são enviadas para o servidor é o comportamento padrão a página web ser recarregada porque os Os dados aqui né os dados do formulário eles são enviados para o servidor para o servidor da página Web E aí a página Web por padrão ela recarrega para que as informações que você enviou para o servidor atualizem aqui na página por exemplo né esse é o comportamento padrão quando um formulário quando as informações de um formulário são enviadas

a página recarrega e o comportamento padrão de um elemento input do tipo submit é de que quando esse elemento é clicado o o comportamento padrão dele faz com que o formulário seja enviado e portanto quando nós clicamos no elemento botão e o evento clique é detectado o comportamento padrão desse elemento faz com que as informações do formulário sejam enviadas para o servidor e isso faz com que a página por padrão seja atualizada mas existe uma maneira da gente impedir esse comportamento padrão e nós vamos ver isso agora eu vou voltar aqui no arquivo JavaScript e

a função de retorno que é passada para o método add events listener ela recebe automaticamente um argumento aqui então aqui não tem nenhum argumento né dentro dos parênteses porque eu não escrevi nada só que automaticamente automaticamente a função que é passada para o método event listener ela recebe um ela recebe um argumento automaticamente eu posso chamar esse argumento de x de Y de a só que como esse argumento que é passado para função de retorno representa o evento Então o argumento que a função de retorno recebe automaticamente representa o próprio evento que foi detectado por

conta disso ainda que eu possa chamar de x ou de Y ou de ABC Eu Vou Chamar esse argumento de evento porque ele representa o evento que foi detectado e agora eu vou fazer o seguinte aqui ó esse evento ele possui um método chamado prevent default a palavra prevent em inglês significa prevenir default significa padrão e o método prevent default é o método que nós chamamos quando nós queremos prevenir o comportamento padrão do evento o evento aqui é o evento clique cujo comportamento padrão quando está dentro de um elemento formulário é enviar o formulário então

nós queremos impedir esse comportamento padrão para que a página não seja recarregada né para que nós possamos ver aqui no console o elemento sendo impresso porque quando a página ela é recarregada tudo aqui é apagado né portanto aqui através dessa linha de código aqui eu estou chamando o método prevent em cima do evento que foi detectado que é passado automaticamente como argumento para a função de retorno que a gente passa aqui para o método EV listener portanto agora se eu clicar no botão a página não será atualizada E se eu voltar aqui deixa eu atualizar

a página aqui manualmente pra gente para ativar as alterações né E quando eu clicar aqui no botão enviar parece que n aconteceu mas parar a página não foi recarregada né eu vou clicar de novo e nós podemos ver que ainda que eu clique no botão enviar a página ela não é recarregada eu vou voltar aqui e vou fazer o seguinte eu vou imprimir agora o elemento botão só pra gente poder ver que nós que agora nós poderemos visualizar ele aqui no console eu vou clicar aqui no botão enviar e nós podemos ver agora o elemento

botão aqui eu posso imprimir também o próprio evento né se eu imprimir o evento vamos ver o que que aparece ali deixa atualizar a página eu vou clicar no botão enviar e nós vemos aqui ó o botão enviar e nós podemos ver o evento aqui e o evento ele é um ele é um objeto com vários com várias propriedades Aqui nós temos por exemplo o tipo ó nós podemos ver aqui o tipo do evento é clique nós podemos ver nós podemos ver aqui a aonde em qual localização da página em termos de de coordenadas né

x y vertical e horizontal nós podemos ver que ele foi esse evento ele foi clicado na coordenada 28 horizontal né que é o x que é o x e na coordenada 165 que é o Y né Nós podemos ver também deixa eu ver aqui a propriedade target indica qual é o elemento que disparou o evento no caso aqui é um elemento input com a classe botão e se a gente passar o mouse por cima ó ele fica destacado aqui na página né então o evento ele tem algumas algumas informações Ah relevantes aqui mas o que

eu quero fazer é o seguinte quando o botão enviar for clicado eu quero alterar Eu quero alterar a cor de fundo do formulário para isso eu vou eu vou voltar aqui no nosso código e eu vou fazer o seguinte só só para mostrar que nós temos acesso a essas propriedades aqui no nosso código lembra que a propriedade que indica o botão que foi o elemento que que disparou o evento é a propriedade target então se eu imprimir ao invés de imprimir simplesmente o evento eu imprimi a propriedade target deixa eu atualizar a página eu vou

clicar aqui Enviar nós vemos aqui ó que é o botão né E se eu se eu acessar por exemplo a propriedade Class name nós veremos aqui a classe é a classe botão né a propriedade Class name de um elemento representa as classes daquele elemento pra gente poder alterar a cor de fundo do formulário primeiro nós precisamos selecionar o formulário né portanto aqui na linha 7 eu vou escrever o seguinte document get Element by ID eu quero selecionar através do id meu formulário é esse o ID do elemento formulário né meu formulário e eu vou esse

trecho de código aqui vai me retornar o elemento formulário eu poderia atribuir ele a uma constante chamada formulário por exemplo e depois nessa constante formulário que representa o formulário eu poderia acessar aqui a propriedade Style e em seguida acessar a propriedade background para assim alterar o valor dessa propriedade para que seja Blue azul e isso certamente funcionaria se eu voltar aqui na nossa página eu vou atualizar a página para aplicar as alterações e eu vou clicar aqui no botão enviar e nós vemos agora que a cor de fundo do formulário foi alterada para azul só

que para tornar o nosso código menor eu vou fazer o seguinte ao invés de pegar esse formulário que foi selecionado e a atribuir a uma constante chamada formulário ao invés disso eu vou eu vou eu vou fazer essa alteração aqui na mesma linha Então vou copiar essa parte aqui ó e vou colar aqui ou então poderia escrever do zero né no caso isso aqui seleciona o elemento meu formulário eu posso em seguida acessar a propriedade Style desse elemento acessar a propriedade background E aí sim atribuir o valor Azul Blue e agora se eu voltar aqui

na nossa página nós podemos ver aqui se eu clicar no botão enviar essa alteração Ela ainda funciona portanto eu poderia pegar isso aqui eu poderia pegar essa seleção do elemento e atribuir a uma constante e depois trabalhar em cima dessa constante só que eu queria mostrar essa forma alternativa aqui de fazer isso em que eu estou selecionando a propriedade Style e a e a propriedade Break background já em cima do elemento que foi selecionado sem ter que atribuir ele a uma constante perfeito aqui na linha oito eu vou fazer o seguinte eu vou selecionar o

elemento através do método query selector o elemento com a tag Body Portanto o corp a parte princip do da página né Lembrando que o elemento Body representa toda a parte que é exibida na página né eu [Música] vou selecionar a propriedade Style eu vou selecionar a propriedade background e eu vou atribuir o valor Green verde para alterar a cor de fundo do elemento Body para que seja verde e agora se eu voltar aqui eu vou atualizar a página e agora quando eu clicar aqui em enviar nós veremos que o formulário possui possui a cor de

fundo azul o elemento Body possui a cor de fundo verde e pelo fato de que o elemento formulário está dentro do elemento Body o elemento formulário permanece com a sua cor azul né mas todo o resto que não está dentro do elemento formulário fica com a cor de fundo verde porque isso vem do do elemento Body aqui ó se a gente ver aqui ó nós temos aqui uma propriedade Style nós temos atributo Style com essa regra aqui de estilo né background cor de fundo né fundo igual a verde ah perfeito eu quero mostrar outra coisa

aqui ah Digamos que eu queira alterar o texto aqui aqui desse elemento né o último elemento da lista para fazer isso eu vou voltar aqui no nosso código e eu vou escrever aqui o seguinte ó ah document ponto get Element by deixa eu checar aqui como que eu posso selecionar esse elemento lista bem eu posso selecionar esse elemento lista at atome daer aqui poderia fazer Element passar aqui quebrando elorn uma lista vai uma lista eu console página deixa eu clicar aqui na aba console deixa eu clicar aqui no botão enviar nós vemos que Ah nós

vemos que o método get elements by Class name retornou uma lista é uma lista com apenas um elemento porque só tem um elemento com a classe itens que é essa lista aqui né só tem um elemento mas ainda que seja apenas um elemento ainda em termos de estrutura de dados é uma lista né uma coleção h HTML portanto se eu quero selecionar esse elemento aqui específico eu preciso selecionar o elemento no índice zero portanto eu vou voltar aqui pro código e vou selecionar depois depois que esse trecho de código aqui me retornou uma coleção HTML

uma lista né um vetor eu vou através da sintaxe dos colchetes selecionar o elemento no índice zero e portanto agora se eu atualizar essa se eu atualizar essa página aqui nós veremos depois que eu clicar no botão enviar nós iremos aqui a o próprio elemento lista impresso no console e o que eu quero fazer é o seguinte ao invés de imprimir no console deixa eu remover esse isso aqui ao invés de imprimir no console eu quero selecionar o último elemento filho eu quero selecionar a propriedade Inner HTML para poder alterar o HTML interno do elemento

e eu vou passar aqui como valor um elemento H1 com o texto alterado dentro dele Ah quando olha que interessante aqui no editor de código quando uma linha começa a ficar muito grande né você o editor ele coloca essas barras aqui para você poder ã deslizar e e poder e poder visualizar o seu código mas se você quiser que a linha dobre né que a linha dobre para cá você pode digitar Alt Z portanto se eu digitar aqui ó Alt Z a linha Ela É dobrada você vê que isso aqui faz parte ainda da linha

nove não tem numeração aqui né porque a linha ela foi dobrada para você poder visualizar melhor se eu digitar Alt Z novamente a linha ela é desdobrada a barra aqui horizontal ela volta mas eu eu eu particularmente prefiro a linha dobrada porque fica mais fácil de visualizar né portanto eu vou digitar aqui Alt Z a linha dobrou eu vou tirar esse x aqui porque era só para só para demonstrar né ah eu vou digitar aqui um ponto e vírgula para encerrar a linha de código e portanto agora se eu voltar agora com essa linha de

código em que eu estou alterando o HTML interno com esse elemento aqui né de forma dinâmica eu vou voltar aqui para a nossa página eu vou atualizar ela e quando eu clicar no botão enviar nós veremos aqui que o último elemento filho da lista teve o seu HTML interno alterado e é por isso que nós vemos o elemento H1 aqui formatado corretamente né com com a cor com o tamanho da fonte maior né que é o que é o que é o comportamento padrão de elementos H1 e portanto é assim é assim que nós podemos

alterar elementos de forma dinâmica quando eventos acontece Ah eu eu tenho uma última uma última não eu tenho uma alteração importante aqui Normalmente quando nós quando nós detectamos eventos com o método add event listener nós podemos declarar a função aqui né declarar uma função separada E aí depois passar essa função aqui como sendo o segundo argumento só que você também pode declarar a função aqui portanto eu poderia escrever aqui ó function como vai ser uma função que vai ser só usada aqui ela pode ser uma função anônima uma função Sem Nome portanto eu não vou

dar um nome pra função eu vou simplesmente escrever aqui os parênteses vou escrever a Chaves essa função ela vai receber um argumento que é que é o argumento evento né vou chamar de evento E olha que interessante eu vou simplesmente copiar aqui as linhas entre 4 e 9 vou copiar vou colar aqui e eu vou remover essa função o botão foi clicado porque ela não é mais utilizada e dessa maneira o código ele fica um pouco mais legível porque a função que é executado que é executada como sendo a função de retorno né a função

que é executada quando o evento é detectado Ela tá aqui no mesmo local local do do método AD event listener ao invés de ser uma função separada né e ah diferentes programadores vão ter opiniões diferentes sobre o que que é melhor sobre se é melhor declarar a função aqui ou se é melhor declarar a função separada e E aí depois só passar a função aqui né só passar o nome da função certamente diferentes programadores terão opiniões diferentes ah normalmente os programadores eles preferem declarar a função aqui dentro dessa maneira aqui ah e se eu voltar

aqui pra nossa página Web deixa eu atualizar ela deixa eu clicar no botão para mostrar que ainda funciona né e portanto esse essa solução aqui ainda funciona essa solução na opinião dos da maioria dos programadores é uma solução um pouco mais otimizada do que ter a função separada só que mesmo essa função aqui ela pode ser otimizada um pouco ainda um pouco mais da seguinte maneira ao invés de declarar essa função com a palavra chave function é uma é uma é uma convenção da indústria por assim dizer é uma convenção entre os programadores de declarar

essa função como sendo uma função seta portanto agora eu declarei a função como sendo uma função seta ela ainda recebe o evento como sendo argumento só que agora está sendo declarada como uma função seta né Sem Sem a palavra-chave function E isso ainda funciona deixa eu atualizar a página deixa eu clicar aqui no botão enviar enviar e nós podemos ver que o nosso código ele ainda funciona e essa aqui seria a solução mais otimizada e se eu quisesse otimizar um pouco mais ainda eu poderia por exemplo Chamar esse argumento aqui apenas de e para evento

e alterar aqui alterar aqui e isso ainda funcionaria né se eu voltar aqui atualizar Eu só mudei o nome da variável do argumento que é recebido como argumento do evento que é recebido como argumento ainda funciona e certamente certamente se você for Ah se você for ler o código escrito por outros programadores certamente você vai ver o código escrito dessa maneira aqui com o argumento que representa o evento sendo declarado com o nome e simplesmente a letra e e portanto esse aqui seria a versão mais otimizada eu vou mostrar para vocês agora um segundo tipo

de evento que nós podemos detectar para isso primeiramente eu vou selecionar esse input aqui ó o input o input para escrever o nome do usuário né portanto aqui eu vou escrever document P query selector eu quero selecionar o elemento com ID nome se a gente abrir aqui o arquivo página ponta HTML nós veremos que o input possui ome né portanto vou selecionar elemento com ID nome eu vou retornar isso aqui eu vou atribuir essa seleção a uma constante chamada entrada nome ou então input nome melhor e agora vou fazer o seguinte ó eu vou selecionar

o input nome eu vou acessar o método add event listener e eu vou fazer o seguinte lembrando o método EV recebe dois argumentos o evento e a função de retorno a função que é executada quando o evento é detectado o evento que eu quero detectar aqui se chama input portanto input é o nome de um evento em JavaScript numa página Web input representa o evento quando elemento input recebe dados portanto quando eu digito alguma coisa aqui o ato de digitar uma tecla um caractere representa uma ativação do evento input portanto input é o nome do

Elo input é o nome do elemento e também é o nome do evento quando você digita alguma coisa portanto eu estou detectando esse evento e aqui a função de retorno eu poderia declarar aqui uma função fora só que nós já nós já aprendemos que este aqui é a solução mais otimizada de se escrever código né portanto eu vou fazer isso eu vou criar aqui uma função seta essa função seta vai receber como argumento aqui o evento só que eu vou chamar ele simplesmente de e e agora eu posso imprimir o evento vamos ver o que

vai acontecer eu vou atualizar a página eu vou clicar aqui no elemento input e agora quando eu digitar uma tecla nós veremos aqui no console o evento sendo impresso eu vou digitar outra tecla e nós podemos ver novamente o evento sendo impresso e uma terceira vez eu vou digitar uma tecla e nós veremos uma terceira vez o evento sendo impresso aqui no console deixa eu analisar aqui esse objeto nós temos aqui ó o tipo do evento é input type input nós vemos ã que o o a propriedade target indica a propriedade target indica qual elemento

disparou o evento e nós vemos aqui que o elemento que disparou o evento é o elemento input com ID nome e tem algumas outras propriedades aqui que não vem que não vem ao caso né mas de qualquer maneira agora nós podemos detectar o evento input eu vou voltar aqui para o nosso código e se a gente reparar aqui no nosso código HTML nós temos um nós temos um nós temos um elemento aqui de com a classe mensagem né ou melhor nós temos aqui um evento nós temos um elemento section com a classe coner eu vou

selecionar esse elemento para fazer o seguinte antes disso eu vou imprimir aqui o próprio elemento input input nome e esse elemento input nome possui uma propriedade chamada value essa propriedade value representa o que o que o texto que está dentro do elemento né do elemento input eu vou voltar aqui para a nossa página Web eu vou atualizar ela e agora o que eu digitar aqui no input será impresso aqui porque eu estou imprimindo no console a propriedade valor do elemento input esse valor aqui representa o que o que o que quer que esteja escrito aqui

portanto se eu digitar q q é impresso aqui se eu digitar w qw é impressa aqui e se eu continuar digitando a cada vez que eu digito uma tecla o conteúdo aqui do input é impresso no console eu vou voltar aqui pro código porque eu quero fazer o seguinte eu quero selecionar esse elemento contêiner aqui e eu quero ã eu quero anexar eu quero adicionar esse conteúdo aqui no no container portanto eu vou fazer aqui eu vou fazer aqui o seguinte ó quando o evento input for detectado eu vou selecionar o documento eu vou selecionar

através do método query selector o elemento com a classe container esse os elementos em ã em em JavaScript possui um método chamado append que nos permitem adicionar coisas no final do elemento né como sendo como sendo o último elemento aqui né no caso nós selecionamos nós selecionamos o elemento com a classe contêiner que é esse elemento aqui através do método append nós podemos adicionar coisas dentro dele no final né no final dele aqui como sendo o último elemento portanto eu vou adicionar o seguinte eu vou adicionar a propriedade value do elemento input nome e portanto

agora se eu voltar aqui para o nosso navegador eu vou atualizar a página e agora quando eu digitar a tecla q nós veremos que aqui foi adicionado no final no final do elemento section se eu digitar aqui w nós veremos qw se eu digitar e nós iremos qw E se eu continuar digitando nós veremos a cada coisa que eu digito aqui nós vemos essa coisa sendo anexada no final do elemento section E como eu estou simplesmente anexando né adicionando texto esse texto ele não é formatado de forma alguma né portanto é por isso que nós

vemos tudo na mesma linha né Se eu colocar aqui ó a BC nós veremos a da primeira tecla AB depois que eu digitei b e depois ABC que foi da última da da tecla C né que foi a última e portanto é assim que nós podemos adicionar elementos de forma dinâmica na nossa página web e agora que nó Nós aprendemos esses fundamentos da linguagem JavaScript nós poderíamos criar um pequeno projeto Zinho utilizando as ferramentas que agora nós sabemos perfeito agora que nós temos essas ferramentas Vamos criar esse projeto que vai ser simplesmente uma lista de

contatos com o nome e com o e-mail para fazer isso eu vou voltar aqui no nosso no nosso no editor de código eu vou remover isso aqui tudo para que a gente possa começar para que a gente possa começar do começo a primeira coisa que eu vou fazer aqui será selecionar os elementos que nós com os quais nós vamos trabalhar então vou selecionar aqui através do método selector o elemento com com ID formulário eu vou atribuir isso a uma constante chamada meu formulário eu vou selecionar o elemento com ID nome que é o input né

e eu vou atribuir ele a uma constante chamada input [Aplausos] nome eu vou selecionar o elemento com id e me e vou atribuir a uma variável a uma perdão chamada input eil eu vou selecionar também o elemento com a classe mensagem que é esse elemento aqui ó ele tá ele está ele tá aqui ó depois depois do título adicionar usuário eu vou selecionar esse elemento aqui vou atribuir a uma chamada mensagem e vou selecionar o elemento com ID usuários que é esse elemento aqui ó essa lista aqui e vou atribuir isso a uma constante chamada

usuários agora que eu tenho acesso a esses elementos deixa eu ah eu esqueci de atribuir aqui aqui ó na linha quatro deixa eu imprimir eles no no no console só para garantir que tá tudo certinho eu vou imprimir todos eles no console e assim que eu garantir que eles foram selecionados corretamente Ok todos foram selecionados corretamente Eu quero remover esse elemento aqui ó que a gente estava que a gente estava utilizando só PR demonstração eu vou voltar aqui no meu código eu vou voltar aqui no arquivo pgina P HTML eu vou remover esse elemento aqui

perfeito e agora se eu voltar aqui na nossa página nós não temos mais uma lista aqui o que eu quero fazer agora é o seguinte eu quero detectar o evento Deixa eu voltar aqui no nosso código deixa eu remover isso aqui eu vou selecionar o a constante meu formulário que representa o elemento formulário né eu vou adicionar um detector de eventos e e o evento que eu quero detectar é o evento submit o evento submit representa o envio de um formulário portanto quando o botão enviar isso vai disar o evento cliar no botão e automaticamente

Como é o comportamento padrão como vios anteriormente ISO vai disar event submit do formulo eu estou detectando aqui O Event submit e eu passar aqui como função de retorno uma função chamada enviar enviar formulário eu vou declarar essa função aqui embaixo function enviar formulário essa função vai receber um evento que eu vou chamar de e vai receber um argumento que eu vou chamar de e e eu vou chamar o método prevent default em cima desse evento para poder prevenir o comportamento padrão do evento submit que é atualizar a página né e em seguida eu vou

simplesmente imprimir o evento no console portanto agora se eu voltar aqui pra página eu vou atualizar ela eu vou clicar aqui no botão enviar nós vemos aqui o evento submit sendo detectado o que disparou ele foi o botão né se a gente ver aqui ó target se a gente vir aqui ó o que o que target representa o elemento que disparou o evento portanto foi o elemento form ah com ID formulário mas nós vemos também aqui ó [Música] na na propriedade submitter nós temos mais mais outras informações sobre o sobre o o elemento que disparou

o evento inicialmente que no caso foi o elemento input com a classe botão né perfeito eu vou voltar aqui porque eu vou fazer o seguinte primeiramente eu quero ã eu quero criar eu quero adicionar o contato dos usuários aqui dentro desse elemento L que no que que no momento tá vazio né se a gente olhar aqui no nosso código nós viemos aqui o elemento L vazio né não tem nada aqui eu quero adicionar os contatos dos usuários com o nome e-mail quando o botão enviar for clicado mas antes de antes de fazer isso vamos ver

se nós temos Acesso aqui a esses conteúdos né eu vou voltar aqui a esses valores eu vou voltar aqui no código JavaScript eu vou fazer o seguinte eu vou imprimir no console a propriedade value do elemento input nome e a propriedade value do elemento input e mail vou voltar aqui ABC x y z e quando eu clicar em enviar bem nós vemos aqui o conteúdo porque eu esqueci eu esqueci de recarregar a página né portanto eu vou recarregar a página ABC x y z eu vou clicar em enviar e portanto agora nós vemos aqui os

conteúdos portanto é esse aqui que eu vou utilizar são esses dois conteúdos que eu vou utilizar para criar novos elementos novos elementos li para a lista ul né para a lista de usuários portanto eu vou voltar aqui no nosso código e eu vou fazer o seguinte ó eu vou acessar o documento document o objeto documento o objeto document possui um método chamado Create Element esse método nos permite criar um novo elemento o elemento que eu quero criar será um elemento li eu vou atribuir essa criação do elemento eu vou atribuir esse elemento que foi criado

a uma constante chamada Li e em seguida eu farei o seguinte eu vou selecionar o elemento li eu vou selecionar o método append append Child que nos permitirá anexar adicionar um elemento filho dentro dele e aqui eu vou adicionar o seguinte eu vou adicionar ã uma um template de string que vai ser igual a input nome pon velue dois pontos aqui dois pontos fora né das chaves e eu vou encaixar aqui de forma dinâmica input email. value e agora ah depois de depois de anexar o nome do usuário e o e-mail do usuário no item

li no elemento li eu vou ã selecionar aqui a lista de usuários né que é a constante usuários usuários eu vou eu vou acessar o método append child para adicionar um novo elemento filho e o elemento filho que eu quero adicionar é o próprio elemento li que nós acabamos de criar eu vou voltar aqui para o nosso para o nosso navegador eu vou atualizar essa página e agora quando eu digitar aqui ABC x y z e clicar em enviar [Música] ã Ah tem tem o detalhe aqui que é importante quando nós utilizamos o método child

para adicionar um elemento em outro elemento né Nós queremos adicionar um elemento no elemento li que nós foi que foi criado para fazer isso nós precisamos adicionar um elemento válido né E para isso nós podemos fazer o seguinte eu posso por exemplo aqui criar um elemento spam E aí no elemento spam eu posso definir a propriedade Inner text como sendo isso aqui como sendo esse template de string E aí eu posso adicionar como elemento filho o spam e portanto isto agora funcionará esse erro aqui é porque nós estávamos esse erro aqui diz o seguinte ó

erro de tipo falhou a execução do método append child em Node Node representa aqui no contexto de uma página HTML representa um elemento e ele falou parâmetro um o parâmetro que foi passado para o método append child não é is not do tipo node em outras palavras na solu que nós tamos anter Anor M que era essa aqui nós estamos passando para o Element nós estamos passando para o método append child um argumento que não é do tipo node que não é do tipo elemento lembrando no contexto aqui de uma página Web um node um

nodo por assim dizer é um elemento portanto como nós estávamos passando o texto não funcionou mas agora com esta solução aqui em que nós estamos criando o elemento do tipo spam nós estamos definindo o texto interno desse elemento como sendo o texto que nós queremos para o contato do usuário e depois nós estamos passando esse elemento spam para o método append child isso aqui certamente se o meu conhecimento de JavaScript não tiver defasado criará o elemento da forma correta só que tem alguns problemas aqui ainda por exemplo quando o elemento ele é quando o o

contato do usuário é adicionado Seria interessante se esses inputs aqui fossem apagados né se essas informações aqui fossem apagadas depois que o contato do usuário foi adicionado para fazer isso eu posso voltar aqui e depois que o elemento foi adicionado depois que o que o item foi adicionado eu posso fazer o seguinte ó eu posso acessar o elemento input nome eu posso acessar a propriedade value e definir ela como sendo uma string vazia e eu posso fazer o mesmo para o elemento input email definindo a propriedade velho como sendo uma string vazia eu vou voltar

aqui para o nosso navegador eu vou atualizar a página para aplicar as alterações a c X Y Z e agora nós temos o contato do usuário e nós temos aqui os inputs o texto nos inputs apagados e eu posso colocar aqui por exemplo Pedrinho Pedrinho @gmail.com enviar e portanto agora eu tenho um contato que representa uma pessoa de verdade né e eu poderia adicionar outro aqui ó Maria maria@gmail.com e isso aqui ainda funciona só que tem um problema aqui que é o seguinte se se eu não tiver nada aqui e clicar em enviar isso vai

criar um elemento né se eu clicar em enviar aqui is isso cria um elemento sem sem contato nenhum então nós precisamos tratar essa situação no nosso código nós precisamos evitar nós nós precisamos impedir a criação de elemento caso Ambos inputs não tenham conteúdo aqui eu vou voltar aqui no nosso código e para fazer isso eu vou fazer o seguinte depois de de prevenir o comportamento padrão do evento eu vou escrever aqui ó eu vou criar uma estrutura condicional se if se input nome se a propriedade value dele for igual a um string vazia ou Duas

Barras verticais ou se a propriedade value do input email for igual a uma string vazia ou seja se um dos dois aqui não tiver conteúdo eu vou fazer o seguinte ó eu vou pegar o elemento mensagem que nós selecionamos anteriormente eu vou definir a propriedade Inner text dele como sendo por favor preencha todos os campos seão else eu vou pegar ISO aqui tudo que faz a criação do elemento vou recortar digitando cont control x e vou colar digitando control V aqui e portanto se os inputs do formulário estiverem vazios eu vou colocar uma mensagem no

elemento mensagem vou colocar um string Ah por favor vou colocar string por favor preencha todos os campos no elemento mensagem que é esse elemento aqui ó senão eu vou que é o bloco else senão eu vou de fato criar o elemento E agora se eu voltar aqui para nossa página Web Vou recarregar ela e se eu clicar aqui Enviar nós veremos por favor preencha todos os campos e eu posso fazer o seguinte eu posso voltar aqui no nosso código e fazer isso aqui ó mensagem pstyle PC color vai ser igual a vermelho deixa eu atualizar

a página clicar aqui em enviar e nós vemos aqui uma mensagem em cor vermelha né para trazer a atenção do usuário Ah só que eu quero o seguinte quando eu quero que essa mensagem aqui desapareça depois de algum tempo né para isso eu vou fazer o o seguinte aqui no código depois que a mensagem foi criada eu vou através do método da função set time out set time out é uma função da linguagem jav script que cria um temporizador essa função ela recebe ela recebe dois argumentos ela recebe a função de retorno que é a

função que é executada depois do tempor e o segundo argumento aqui é o próprio temporizador em milissegundos no caso 3000 m é igual a 3 segundos portanto eu quero que essa função de retorno aqui seja seja executada depois de 3 milissegundos ou seja depois de 3 segundos e o que eu vou executar aqui vai ser o seguinte eu vou criar uma função Seta e essa função seta vai ser o seguinte mensagem que é o elemento aqui né Eu vou acessar Ah Pera aí eu vou acessar o método remove para remover o elemento mensagem e agora

se eu voltar aqui eu vou atualizar a página vou clicar aqui em enviar 1 2 3 o elemento Foi removido se eu clicar aqui com o com o botão de inspecionar né Ah nós vemos que o o nós viemos que o elemento mensagem ele de fato Foi removido né ah se eu clicar aqui em enviar novamente nós não temos a mensagem de de atenção aqui né portanto eu quero que a mensagem deixa recarregar a página na primeira vez que a página é é carregada nós temos aqui o elemento mensagem né que exibe a mensagem de

Atenção se eu clicar aqui em enviar nós vemos aqui só que depois de 3 segundos esse elemento ele é removido da página né que é exatamente o que nós escrevemos aqui para remover o elemento depois de 3 segundos para corrigir isso eu posso fazer o seguinte ó eu posso ao invés de simplesmente remover o elemento eu posso fazer o seguinte eu posso definir o texto interno dele como sendo uma string vazia eu acho que isso vai funcionar né aqui na linha 14 nós estamos definindo a mensagem aqui na linha 16 nós estamos definindo a mensagem

como sendo uma string vazia o texto interno né se eu voltar aqui eu vou atualizar essa página vou clicar em enviar a mensagem é exibida depois de 3 segundos a mensagem desaparece e se eu clicar em enviar novamente nós vemos a mensagem novamente e se eu tentar adicionar um usuário agora vou botar vou colocar simplesmente o nome vou deixar o e-mail aqui vazio vou clicar em enviar nós vemos a mensagem de atenção porque na lógica Nós estamos Nós estamos testando um ou outro né se um input está vazio ou é isso que Duas Barras verticais

significa ou se um ou outro aí a gente aí a gente exibe a mensagem de atenção senão se ambos tiverem um valor né Por exemplo se ambos tiverem um valor Aí sim o o conte o usuário é criado se tiver só o e-mail a mensagem de atenção é exibida se tiver só o nome a mensagem de atenção é exibida se não tiver nenhum dos dois a mensagem de atenção é exibida somente quando ambos estiverem preenchidos é que nós veremos o contato do usuário sendo adicionado à lista