Introdução ao DOM - Curso JavaScript #09

Estamos aqui em mais um vídeo do seu curso de JavaScript e só pra variar eu tenho umas perguntinhas pra te fazer no início da aula: Em primeiro lugar, você sabe a diferença entre usar um igual, dois iguais e três iguais na linguagem JavaScript? Sabia que cada um tem uma funcionalidade diferente ? Você sabe usar cada um pra sua funcionalidade correta?

Outra pergunta: em uma mesma expressão sem parênteses Um operador de disjunção em um operador de conjunção, um || e um && Qual deles eu tenho que fazer primeiro ? E outra coisa você sabe utilizar o operador ternário, para colocar um valor ou outro valor dentro de uma mesma variável? Pois se você sabe responder essas perguntas, seja bem-vindo a mais um vídeo, é só assistir até o final.

Agora se você ficou na dúvida alguma delas clique em cima vá para a playlist, e assiste às aulas até a aula oito, com certeza você vai evitar vários problemas que você pode ter lá na frente Eu só estou tentando te ajudar com isso Legendas: Lucas Fedorowicz Olá, Pequeno Gafanhoto seja bem-vindo a mais uma aula do seu Curso em Vídeo de JavaScript patrocinado pelo Google O meu nome é Gustavo Guanabara eu sou professor, e agora a gente chegou à nona aula do seu curso E nós vamos entender um pouco mais sobre o DOM Quando você começa a desenvolver em JavaScript para front end que é o nosso foco aqui durante esse curso Você ouve muito falar assim Você já aprendeu o acesso ao DOM? Sabe o que é o DOM ? Na verdade eu tenho um segredinho para te contar Na primeira aula desse curso na aula um aquela do início, quando a gente mexeu na cor de fundo do Google, quando a gente escondeu a logo do Google Naquilo ali você já estava fazendo uso do DOM Só que agora você vai aprender na prática, vai saber como que monta aquele comando, porque ele foi necessário, chegou a hora de você aprender isso com a gente, e não se esquece liga o seu computador Abra o Visual Studio Code abre o Google Chrome, e vamos começar a trabalhar.

Na verdade antes de falar sobre o DOM eu quero instalar alguns programas no seu Visual Studio Code e também no seu Google Chrome que vão facilitar bastante a sua criação de HTML5 Então vamos lá, olha só em primeiro lugar abre o Visual Studio Code abre o Google Chrome Vou colocar os dois na tela, não precisa nem arrumar por enquanto, basicamente o que a gente vai fazer Eu tenho aqui dentro do Visual Studio Code eu tenho esse último ícone aqui, que é o de extensões Clica nele e aqui em cima dessa caixa, você vai digitar a palavra Watch e a Chrome, Watch in Chrome Primeiro lugar é esse, a gente vai instalar, escolha aqui e clica em install Ele simplesmente vai instalar, talvez ele vai pedir para dar um boot, não um boot na máquina Reiniciar só o Visual Studio Code na verdade a gente até recomenda que faça isso Vou até fechar e abrir de novo, fechei e abri de novo Vou voltar aqui na área de extensões Ele vai ver aqui que eu já tô com o Watch in Chrome ativo Outra coisa que você vai ter que instalar é esse link você vai abrir este link Clica e vai instalar um plugin no Google Chrome Ele já abriu no Google Chrome aqui, VS Code Watching in Chrome Você vai clicar em add to Chrome, ele vai pedir autorização, você autoriza Da todas as autorizações pra ele, aqui se você ligar a sincronização ele vai ligar as extensões para todos os seus usuários, não vejo necessidade Então aqui VS Code Watch in Chrome, ele está cinza Mas logo ele vai ficar colorido, na verdade preto Vamos fazer o seguinte, vou ver aqui na aula 6 onde foi que eu parei, eu parei aqui no exercício 004 vamos aqui criar o 005 com botão direito no new file ex 005. HTML Beleza já estou com o exercício 005, vou aproveitar que a gente instalou esta extensão aqui do Watch in Chrome E vou botar aqui uma extensão que é a Node Exec, essa aqui Node Exec Instala ela também na verdade ele vai habilitar, é a tecla f8 para rodar o seu código JavaScript se for só JavaScript pelo Node então, clique em install mesmo esquema, tenha instalado fecha aqui abre de novo E ai ele vai estar já todo funcionando. Beleza já estou com meu arquivo exercício 005 pronto para funcionar seguinte vou colocar aqui a tela dividida e basicamente o que acontece com esse plugin Que a gente acabou de instalar, nós vamos criar um documento HTML aqui, um HTML5 E já criou aquela base que a gente já viu, vou colocar aqui pt-br pra ficar em português Vou botar que primeiros passos com DOM e aqui eu vou colocar um H1: Inciando estudos com DOM Ok, como que eu vou abrir isso, ou eu abro clicando aqui como a gente fez e abrir ou então você Aperta CTRL + shift + P dentro do Visual Studio Code e você vai digitar depois desse sinal de maior aqui se não tiver o sinal do maior você coloca um sinal de maior e digita Watch in Chrome Como você pode ver Watch in Chrome clicou ele vai abrir aqui no chrome, só que ele vai abrir com um micro servidor que ele criou então facilita pra caramba os estudos aqui, e aí ele já abriu aqui basicamente o que a gente estava fazendo é, qualquer alteração que eu faria aqui eu tinha que vir aqui e atualizar, só que agora, vou mudar aqui tá vendo ?

eu estou apagando e ele já está apagando aqui conforme eu for apagando, ele já vai atualizando aqui, se por acaso der problema e parar de atualizar vou botar aqui : Iniciando estudos DOM se por acaso parar de funcionar é só você fechar a aba do Google Chrome fechei a aba do Google Chrome vem aqui de novo e faço CTRL + shift + p e Watch in Chrome já vai estar aqui em primeiro ele vai abrir o Chrome de novo e vai fazer a sincronização vai por min isso aqui facilita pra caramba, você vai ganhar bastante tempo na hora de desenvolver mas se não funcionar não tem problema nenhum, é só você salvar esse lado e vim aqui atualizar só pra não ficar nesse procedimento aqui meio chato de fazer então vamos lá iniciando os estudos de DOM vou criar aqui com um parágrafo vou botar aqui : Aqui vai o resultado e vou criar também uma div que eu vou chamar de Clique em mim esse execício a gente vai usar também na próxima aula. Beleza vem aqui e meio que parou de funcionar, então é só vir aqui CTRL + shift + p Watch in Chrome já vai voltar a funcionar aqui, salvei desse lado e ele já atualizou pra mim e de vez em quando dá esse probleminha mas facilita pra caramba aqui a gente começar o procedimento o que eu vou fazer aqui, vou criar um style uma tag style aqui dentro de head e vou fazer algumas coisas, por exemplo o body é o corpo vou botar um background de cor sei lá botar preto é só parar o mouse em cima e escolher qual é a cor que você quer olha vou escolher um tom mais azulado azul clarinho eu estou alterando e você está vendo aqui o teste bem na hora que eu estou fazendo então beleza, aqui o background vou colocar aqui a cor da letra, colocar branca, vou colocar a fonte normal 20 pt e e arial já ficou aqui vou botar 20 na verdade vou botar 18 ficou muito grande ok, então tá aqui ele já está com as configurações básicas aqui de css, aqui em baixo ou criar um script, vou colocar script, da enter e ele deu uma bagunçada lá vou salvar aqui, atualizar ele e voltou e nem precisou fechar, só atualizar aqui o servidor já voltou aqui dentro a gente vai começar a trabalhar com DOM, fazer o seguinte aqui ,vou colocar outro parágrafo aprendendo a usar, vou botar em negrito aqui DOM em Java Script para ficar esse DOM em negrito ok, então essa daqui é a estrutura básica do meu documento eu tenho a parte de CSS aqui em cima, eu tenho a parte de HTML aqui embaixo, eu tenho HTML dividido em duas partes é a parte de cabeçalho, head a parte de corpo o body, se você não tenha os fundamentos de HTML nunca se esquece clicando em cima de mim no ícone interatividade, você tem acesso a outra playlist além do curso JavaScript o curso de HTML por enquanto você não quiser aprender HTML tudo tranquilo, dá pra você replicar o que a gente está fazendo aqui mas mais pra frente vai ser uma coisa necessária você aprender, então já vai se organizando aí pra fazer o nosso curso HTML5 também, vai aprender HTML5 e CSS3, então a minha estrutura é essa eu tenho CSS aqui em cima HTML aqui embaixo e no HTML no corpo eu tenho: um título principal que é o h1, dois parágrafos, e dentro desse segundo parágrafo eu tenho um strong e no fim eu tenho uma div e um script vamos salvar isso tudo e vamos voltar para a tela cheia para eu poder te explicar uma coisa e uma pergunta que não quer calar com certeza é: o que é DOM o que é essa é DOM você está falando já a quase dez minutos e não explicou o que é. DOM é um acrônimo para Documento Object Model que é modelo de objetos para documentos, basicamente é um conjunto de objetos dentro do seu navegador que vai dar acesso aos componentes internos do seu website.

O DOM ele não funciona dentro do node dj s por exemplo o DOM e ele está presente quando estou rodando JavaScript dentro do meu navegador, por isso é que a gente acabou de criar aquele site, e uma coisa importante que você deve conhecer e deve saber fazer é a sua árvore DOM do seu site, basicamente a árvore DOM começa da raiz e essa raiz dentro do navegador é chamada de window então tudo dentro do JavaScript está dentro de um objeto chamado window , que quer dizer janela então aquela janela do seu navegador é um objeto DOM e ele se chama window em letras minusculas exatamente como está aparecendo aqui do lado de dentro do windows eu tenho vários outros objetos, vou botar três exemplos aqui: eu tenho um objeto location que diz qual é a localização do seu site, qual é a url, qual é a página atual foi a página anterior o document que a gente vai usar pra caramba, que é o documento atual, eu tenho também o history que vai guardando de onde você veio para onde você vai , isso facilita a navegação dentro de seu site existem muitos outros objetos, eu só representei três aqui por questões de praticidade e de espaço mas já já eu mostro pra você o que tem dentro do window, dentro do document no nosso caso existe um outro objeto muito importante é o objeto HTML, que é exatamente a parte HTML do meu site ,dentro de HTML eu tenho basicamente dois objetos dois filhos é que a gente chama, o child que é o head e o body que é a parte de cabeçalho e a parte de corpo, é importante dizer o seguinte head e body é só olhar aqui do lado é filho de HTML então eles são chiid, já por sua vez o HTML é um parent é um pai e uma mãe enfim um parente de head e body, quem está embaixo é child onde quem está imediatamente acima de quem está embaixo é parent por exemplo: HTML é parent de body só que HTML é child de document deu para entender ? É uma árvore hierárquica no nosso documento dentro de head a gente tem várias tags: meta, title e todas as outras que a gente pode botar e que foram colocadas ao nosso documento já dentro do bady, e para o nosso documento atual nós temos um h1 ,como a gente acabou de criar nós temos dois parágrafos e temos também uma div é exatamente o que estou representando aqui pertinho de mim dentro do 2º parágrafo eu tenho um filho que é strong. Deu pra entender como funciona?

Essa é a árvore hierárquica do site que eu acabei de criar, eu tenho um document, dentro tem HTML dividido em head e body dentro de head eu tenho meta e title e outras coisas dentro de body eu tenho um h1 2 parágrafos e uma div dentro do segundo parágrafo eu tenho strong guarda isso na sua mente e vamos voltar para o nosso código. Então era só isso, aqui é exatamente a representação prática daquela árvore que a gente acabou de ver, é importante que você consiga montar na cabeça essa árvore, porque a gente vai precisar acessar os seus componentes, e quer ver um negócio na prática? Se eu vier aqui um script e botar document.

vou botar em vez de document direto vou botar window. e olha o que tem dentro do window, eu tenho tudo isso aqui dentro do window olha isso como eu falei eu tenho várias coisas não tenho só aquilo que eu mostrei, então tem um monte de coisa dentro do windows tenho document então o ataque do crime lá dentro de document eu tenho body, ok então eu tenho a estrutura da minha árvore que eu acabei de mostrar a minha árvore DOM, se eu quiser ainda posso escrever dentro do meu documento, embaixo do clique em mim eu posso botar aqui, document. right, vou botar, olá mundo ele já criou o olá mundo aqui em baixo ,então eu fui por JavaScript por DOM adicionando componentes, essa não é a melhor maneira de adicionar componentes, mas é mais simples de todas com certeza, se você quiser mostrar na tela você pode mostrar coisas como por exemplo: quero mostrar o window.

document. charset o charset qual é o meu set de caracteres, é o utf-8 então você consegue buscar algumas configurações da minha página como por exemplo: o windows em vez de document vou usar o navegator que eu tenho um objeto que é o navegador atual navigator. appname ele botou netscape, na verdade o google chrome está se comportando como um navegador netscape outra coisa que eu posso colocar, minha url, que eu posso botar window.

document. url qual é a eu estou acessando é a 127 001 na porta 50. 584 aula 09 exercício tal, aquela a minha rl então eu consigo ter acesso a várias componentes utilizando diretamente DOM dentro do meu JavaScript porque isso aqui é JavaScript né então eu posso navegar dentro dessa árvore aqui da maneira que achar melhor, E para isso existem várias maneiras de navegar entre os elementos Só lembrando elemento é toda e qualquer coisa que apareceu aqui na árvore DOM, qualquer um desses retângulos que está aparecendo aqui do lado são ditos elementos, e eu posso selecionar esses elementos para poder navegar dentro da minha árvore DOM existem vários métodos para isso, o que eu vou te mostrar que nessa aula são cinco métodos de acesso, você pode acessar por marca, por tag né pode selecionar os elementos por id, por nome, por classe e por seletor, por CSS que é um recurso mais recente, ele não está presente em todas as versões do actionscript mas mais recentes todos os navegadores atualizados já têm acesso a esse outro método aqui que é por seletor em primeiro lugar vamos aprender a fazer a primeira seleção como seleciona por marca ou por tag name na verdade o comando é esse aqui, ele está dentro de documents e é o método getElementsByTagName e não precisa ficar decorando tudo isso é que logo de e não precisa ficar decorando tudo isso é que logo de cara porque o próprio visual studio code vai te ajudar pra caramba nisso mas é importante que você saiba que quando você usa o getElementsByTagName eu consigo selecionar mais de um objeto porque existem vários objetos do mesmo tipo , da mesma tag por exemplo nosso código nós temos dois parágrafos então eu tenho duas tags p mas eu tenho só uma tag body e só tem uma tag div por enquanto eu só tenho uma tag H1 enfim, eu vou te mostrar lá dentro do Visual Studio Code como eu faço essa seleção então vamos lá como que eu vou selecionar os meus objetos aqui, eu vou fazer o seguinte, eu vou criar uma variável e essa variável vai se chamar sei lá P1 que nasce no primeiro parágrafo como é que eu seleciono os meus parágrafos, você vai utilizar o window.

document ou simplesmente só doc, você pode ocultar o window assim como no alert que é window. alert a gente pode ocultar ele, mas enfim vamos fazer lá o window. document.

getElementByTagName aqui viu, só digitei getE e ele já me deu aqui o getElementsByTagName beleza entre parênteses aqui entre aspas simples ou duplas selecionar eu vou colocar aqui a tag que eu quero selecionar, então vou selecionar aqui P só que ele não vai pegar um elemento só, tanto que ele tá aqui no plural o getElementsByTagName eu tenho dois parágrafos o primeiro é o aqui vai o resultado o segundo é o aprendendo a usar o DOM, beleza vamos selecionar o primeiro na verdade é que para selecionar o primeiro eu vou depois desse parenteses sem dar espaço abre e fecha colchete, eu vou colocar um número aqui o número 0 é o primeiro parágrafo é esse esse aqui window. document. getElementsByName e 0 é o primeiro parágrafo que aparecer, no caso esse aqui se eu quiser selecionar esse parágrafo de baixo eu vou usar no lugar de 0 ou colocar 1 e assim sucessivamente primeiro parágrafo é 0 o segundo é 2 o terceiro é 2 o quarto é 3 e assim sucessivamente quero pegar o primeiro aqui, vou escrever na tela o P1.

innertext e oque é o innertext ? O texto que está dentro do primeiro parágrafo então esse window. document aqui ele está me mostrando que aqui vai o resultado você viu que ele replicou aqui o mesmo estava em cima esse é o parágrafo original que foi o resultado que foi gerado por conta desse right aqui, até posso votar sim e está escrito assim dois pontos concatenado com isso a tabela "está escrito assim" aqui vai o resultado tá vendo então eu peguei o conteúdo do parágrafo 0, se eu quiser um parágrafo 1 eu boto está escrito assim aprendendo a usar o DOM de JavaScript viu eu consegui pegar esse daqui agora, só mudando o número venha aqui esse números entre colchetes mais para frente vai aprender o que é isso, ele vai ser usado principalmente quando eu estou aqui com um nome no plural, com esse nome no plural eu preciso de indicar qual é o componente que eu quero acessar, então acesso o parágrafo 0, acesso o parágrafo 1 e eu posso por exemplo selecionar o parágrafo 0 em vez de escrever na tela eu posso colocar por exemplo o meu P1.

style vai mudar pra color blue color = blue olha lá no primeiro parágrafo mudou para azul, e é exatamente aquilo que a gente fez lá na primeira aula para transformar o site do Google em um site preto, se eu quiser eu não posso fazer isso aqui ó criar uma variável para o corpo, e esse corpo se eu acesso a window. document. body e eu posso mudar a cor de fundo a qualquer momento, corpo.

background. style. background=black já mudou lá então, basicamente aquela mágica que eu fiz no início foi o uso do DOM então eu consigo modificar coisas diferentes outra coisa que é importante é o seguinte olha só vou mandar escrever aqui de novo, se eu fizer isso daqui salvar e atualizar que ele volta às cores naturais, vou botar aqui o document.

right. na tela vou mandar o p1 e na tela quando boto inner eu tenho innerHTML e inner text seu eu boto inner text ele vai mostrar aqui o resultado, vamos pegar o parágrafo ínves do 0 vou pegar o parágrafo 1, beleza ele pegou lá "Aprendendo a usar o DOM em JavaScript" só que dentro do meu parágrafo não é "Aprendendo a usar o DOM em JavaScript" o DOM está em negrito e ele não puxou negrito aqui, você percebe né se eu quiser eu posso ver qual é o comando inteiro ínves de inner text botar inner HTML aí ele vem já formatado, tá vendo ele vem já com a formatação ok, ele vai mostrar na tela que se eu transformar isso aqui não alert por exemplo window. alert ele já mostrou lá aprendendo a usar o DOM e o DOM veio com as tags certo em vez de utilizar HTML, se eu usar o inner text " Aprendendo a usar o DOM em JavaScript " então o inner text ele pega o texto sem as filhas, sem a formatação pega simplesmente o texto e o inner HTML pega HTML inteiro inclusive com as tags filhas, vou tirar o alert daqui porque o alert ficar bagunçando o WatchInChrome porque toda hora que eu altero ele fica dando alerta beleza, então eu consigo fazer o acesso a todos os componentes utilizando getElementsByTagName, mas essa não é minha única técnica eu também possa selecionar objetos quando meu site um pouco mais evoluído e eu preciso ficar selecionando um por um por ID por exemplo eu possa identificar um parágrafo ou adivinho que a gente vai utilizar por um ID e usar o GetElementsByID, também posso utilizar o nome do objeto se eu tenho uma propriedade name então vou utilizar o getElementsByName, percebe aqui que ele tem o s no plural, então eu preciso usar aquele o colchete quando eu tenho mais de um objeto e quando eu tenho mais de um objeto da mesma classe ou do mesmo nome eu vou usar muito por marca os tag names e também por getElementsByName, quando eu quero a selecionar um objeto, uma família deles eu vou utilizar o ID também posso usar como conjunto por classe que eu vou utilizar o getElementsByClassName eu também posso fazer isso, vamos a alguns testes aqui para poder mostrar sobre o que estou falando então olha só eu posso pegar por exemplo a minha div em vez de utilizar o gás elementos by tag que vai ser muito genérico às vezes eu tenho muitas tags div e isso vai me prejudicar eu dou um ID para sair dessa div aqui que eu vou chamar o seguinte ó a id e vou chamar de msg, a minha mensagem então eu tenho um ID mensagem como é que eu seleciono essa mensagem posso fazer o seguinte aqui ó var d document.

, eu vou selecionar por ID, getElementByID, você percebe que está no singular então não preciso colocar colchete né, eu vou botar o ID que é o msg e foi exatamente o que eu fiz ali em cima então eu tenho ali, eu estou selecionando a minha div é essa daqui pelo ID dela que msg viu, facilitou aqui a minha vida, então eu posso fazer por exemplo: D. style. background verde sei lá, background green então a minha div ficou green se eu quiser eu posso mudar o conteúdo dela como D.

ineertext ou inner HTML que vai ser "Estou aguardando" olha só dentro da div originalmente está clique em mim só que eu mandei modificar por JavaScript usando o DOM o inner texto "Estou aguardando" e é claro que você pode fazer essa mesma modificação a vez de usar esse comando aqui que vou voltar como comentário coloquei como comentario ele voltou normal eu posso escrever o comando completo se você vai usar principalmente você vai usar uma vez só eu posso fazer assim windows. document. getElementByID ( msg ).

innertext recebe "Olá" Tá vendo eu modifiquei da mesma, maneira só que eu acho que esse comando fica grande demais eu gosto de simplificar criando uma variável que na verdade o usar o VAR aqui que é meio perigoso depois a gente vai aprender um pouco mais quando fala sobre o escopo, mas a gente está bem no início que eu quero que você entenda o DOM, eu gosto mais dessa maneira de fazer mais simplificada se quiser diminuir ainda mais quando disse pode omitir window que o document. ElementByID e ele continua funcionando é que eu gosto de colocar aqui o window,document, então eu vou colocar isso tudo aqui dentro um comentário colocado aqui lembra a gente viu isso lá no início, eu posso fazer também em vez de selecionar por aí de selecionar por name, eu faço a mesma aqui, vou colocar aqui VAR D windown. document.

getElementsByName e o meu nome vai ser msg, e como eu tenho no plural aqui eu tenho que colocar o meu primeiro elemento, e eu posso fazer D. innertext, igual ao lá, então funcionou também não consigo fazer a seleção por nome por ID de posso fazer também por classe que eu posso botar que em vez de nome class e você pode selecionar utilizando o windows. document,getElementsByClassnames, enfim é tudo o mesmo princípio, a forma de acessar é que você prefere dependendo da situação pode ser uma dependendo da situação pode ser outra mas eu tenho que mostrar que também uma forma nova de se fazer que é utilizando por seletor essa forma nova é até recomendável pela maioria dos manuais que é utilizando o querySelector selector e o SelectorAll sendo o plural da coisa, vamos aprender a utilizar o querySelector aqui no lugar de utilizar qualquer uma dessas outras formas, então olha só vou voltar que pro ID e quando eu estou selecionando por ID eu posso selecionar dessa maneira que está aqui getElementByID ou eu posso fazer assim VAR D é window.

document. querySelector e eu vou selecionar, aí eu vou usar cintas do CSS a minha div que eu tenho o ID msg certo, então dá pra usar assim também toda div ela é representada por uma hashtag, toda classe é representada por um pontinho a nota isso quando é de hashtag quando é class pontinho, como eu estou usando ID hashtag, certo vou botar aqui D. style.

color=blue color lá já mudou pra blue, sem problema nenhum se eu quiser o background azul só botar background, tá vendo ficou lá também e aí se por acaso no lugar de ID foi uma classe a ele vai parar de funcionar mas é porque classe não é respeitada a ponte e aí ele fica azul de novo então isso daqui o querySelector, ele acaba sendo mais prático quando eu tô fazendo alterações rápidas no meu site apenas lembrando o querySelector é um método mais recente então navegadores mais antigos que rodam é que o ECMAscript versões mais antigas não vão ter suporte a ele mas se você tá com tudo atualidade, sua máquina está em dia sem problema nenhum vai aprendendo das outras maneiras também mas fica ligado fica ligado nessa forma nova que é o querySelector Então é isso, nesse vídeo eu te dei os fundamentos de DOM que mostrei cinco maneiras de selecionar objetos e selecionar elementos na verdade né que são elementos DOM, mostramos alguns exemplos para poder selecionar de maneiras diferentes, mas a base é sempre a mesma, e na verdade a gente já usou desde a primeira aula esse recurso eu até te recomendo, assiste o vídeo 1 na playlist aqui em cima você clica aqui ícone, vai pra playlist e assistiu a A1 de novo ver se não ficou bem mais fácil agora que você conhece o DOM eu me despeço por aqui no próximo vídeo a gente vai continuar nossos aprendizados em linguagem de programação JavaScript, e como sempre eu te peçose inscreve no canal aqui embaixo, dá uma curtida deixe seu comentário diz se ficou mais fácil entender o DOM agora, ficou mais difícil assiste à primeira aula de novo, deixe seu comentário lá também, não se esquece de habilitar o sininho do canal para que sempre que sair de novo você ser notificada e um pedido muito importante se você faz parte de um grupo de faculdade, um grupo de colégio que tem vários colegas tentando aprender JavaScript mandou o link da playlist completa isso vai ajudar pra caramba gente a crescer o canal, nos tornarmos mais conhecidos e cada vez mais criar cursos com a qualidade que você está vendo aqui, um grande abraço chegou a hora de arregaçar as mangas e começar a treinar no seu navegador instala as extensões que instalei tanto no Visual Studio Code tanto no Google Chrome, se você precisa assistir esse vídeo mais de uma vez e ficou um pouco grande mas ele tem muitas informações a gente se vê no próximo vídeo.