Eventos DOM - Curso JavaScript #10

Chegamos aqui a décima aula do seu Curso em Vídeo de JavaScript e antes de começar vamos para aquelas perguntas que a gente sempre faz. Antes de começar a sua aula você consegue responder: o que significa a sigla DOM? Sabe pra que serve o DOM?

Você consegue montar uma árvore DOM de um site simples, aquele site que a gente viu uma aula anterior? Você sabe explicar o que são os elementos Parent e os elementos Child dentro de uma árvore DOM? E por último você sabe quais são os cinco principais métodos de selecionar os elementos DOM dentro do JavaScript?

São 4 perguntas bem técnicas mas que são muito importantes para você dar prosseguimento aos seus estudos. Se por acaso você não conseguiu responder ou não lembra bem dos conceitos que acabei de perguntar, clica aqui em cima na primeira playlist, você vai ter acesso ao curso completo não pule nenhuma aula, faça todos os exercícios. Agora se você conseguiu responder tudo direitinho.

Seja bem vindo, seja bem vinda à sua décima aula. Legendas: Tainá Bandeira Olá pequeno Gafa nhoto! Seja bem vindo a décima aula do seu Curso em Vídeo de JavaScript totalmente patrocinado pelo Google.

O meu nome é Gustavo Guanabara, eu sou professor e na aula passada a gente teve uma introdução ao DOM e agora nós vamos falar sobre eventos DOM. E é nessa aula onde a gente vai botar em prática e vai fazer uns exercícios bem legais e que a verdade seja dita, os conhecimentos que você teve até aqui te trouxeram até esse momento, se você estava achando que: ''Ah não mais eu quero criar sites, eu quero criar JavaScript interativo''. Tudo aquilo que a gente viu até o momento vai te ajudar pra caramba pra fazer isso, mas essa aula vai te mostrar muita coisa legal, pode confiar em mim.

Assiste até o final com toda a atenção possível e com seu computador ligado, com o editor, com navegador aberto para você colocar em prática. E vamos dar uma recordando a rápida naqueles conceitos que eu acabei de perguntar ali nas 4 perguntas no início do vídeo, porque esses conceitos são muito importantes. Em primeiro lugar DOM é o Document Object Model, ele é um facilitador que existe dentro do seu navegador, dentro do HTML5 para dar acesso aos elementos diretamente para o JavaScript, sem o DOM a gente teria muita dificuldade para poder acessar os elementos na nossa página e o primeiro passo prático que a gente viu na anterior, foi a montagem da árvore DOM.

Desse gráfico que está aparecendo aqui, a gente fez um site, montamos um HTML bem simples e então eu te mostrei como montar essa árvore DOM e não adianta tentar decorar esse gráfico não, cada página tem sua própria árvore DOM, se ficou alguma dúvida dá uma assistida na aula 9 porque ela é muito importante e se eu puder tirar o concelho e eu acho que posso, eu vou deixar ele aqui: não assista essa aula 10 sem entender 100% da aula 9, porque senão você vai acabar se dificultando, vai acabar achando JavaScript complicado e não, não é complicado é bem simples. Talvez você tenha assistido a aula 9 um pouco mais cansado(a), então vai por mim assiste a aula 9 e depois que você entendeu tudo volta aqui pra aula 10. E além de montar essa árvore, a gente viu cinco técnicas para acessar elementos dentro JavaScript usando DOM.

A gente usou o TagName por nome, por ID, pelo nome do componente (nome do elemento), também tem pela classe desse elemento e tem o querySelector que é novidade no JavaScript e que faz a seleção através de elementos CSS. Então isso tudo a gente viu na aula anterior, nessa aula a gente vai focar em eventos e agora eu vou colocar um exemplo: imagina o que pareceu aqui em cima uma <div>, uma <div> qualquer a gente já vai fazer ela na prática. Abre o seu editor e segue os meus passos para você conseguir entender esse exercício completinho.

♫ Então estou aqui com o meu editor e o browser aberto, o Google Chrome. Vamos clicar aqui no papelzinho pra gente criar a pasta da aula 10, botão direito em uma área livre, ''New Folder'', aula 10 e aqui dentro nós vamos criar um exercício, a gente parou no exercício 5. Dentro da aula 10 vou criar um firewall ex006.

html, organize seus arquivos que vai ficar muito mais fácil para você. Vou fechar aqui, vou fechar o welcome e vamos criar um arquivo, um documento HTML5. HTML5, já criei a base, vou mudar para PT-BR e vou colocar aqui ''Eventos DOM'', beleza, aqui no ''body'' e eu vou criar uma <div>, vou colocar aqui uma <div>, ele já criou aqui e eu vou fazer o seguinte: essa <div> e eu vou dar um ID pra ela, esse ID vai ser ''area'' sem acento, dentro dessa <div> eu vou colocar ''interaja'' pra gente poder interagir com essa <div>, vou salvar, vou apertar: CTRL+Shift+P e vou dar "Whatch in Chrome" que a gente já fez a instalação (se eu não me engano) na aula 9 e ele já está "interaja".

O legal do "Whatch in Chrome" é que qualquer mudança que eu faço aqui, vou colocar vários "as" automaticamente ele está fazendo ali do lado. Primeira coisa que vou fazer é criar um formato para essa <div>, então vou criar um estilo e nesse estilo nós vamos fazer a <div> de ID "area", aqui nessa <div> eu vou colocar primeiro um background verde, coloquei um background verde. Vamos fazer esse verde ficar um pouquinho mais claro, está bom esse verde aqui, vou colocar também a cor da letra branca e se você está meio enrolado com isso, é porque você não fez o curso de CSS ainda, se você clicar em cima da minha cabeça, você tem acesso a 2º playlist, o curso de HTML e CSS também vai te ajudar pra caramba dar uma estudada, mas vai seguindo os meus passos, depois você vai entender melhor quando fizer o curso de HTML, outra coisa que vou fazer aqui: manter a largura, 200 pixels e a altura de 200 pixels também.

Vou colocar esse "interaja" bem aqui no meio da tela, para ele ficar no meio da tela vou colocar o "line right" que é a mesma altura, 200 pixels, que ele fica no meio aqui e o "text align" vai ficar "center" está lá a "interaja" eu vou mudar aqui em cima, antes do background, vou colocar a fonte como: normal de 15pt arial, vou colocar 20pt, certo. Então criamos passo a passo no meu HTML uma <div> escrita "interaja" e no CSS (no estilo CSS), nós montamos uma configuração básica para chegar a esse resultado. Beleza?

então acabamos de criar essa <div> com "interaja" no meio. E agora voltamos ao assunto "Eventos DOM", essa <div> é minha <div> que a gente acabou de criar, te explicando agora o que são os eventos lá de cima: evento é tudo aquilo que possa acontecer com essa <div>, com qualquer elemento, mas no nosso exemplo essa <div> e se você começar a analisar, o que pode acontecer com essa <div>? Um monte de coisa, o mais comum: eventos de mouse, então eu posso por exemplo chegar com o cursor do mouse e mover o mouse até encostar, até chegar dentro da <div>, quando chega o mouse dentro da <div> vai disparar um evento que está aqui em baixo, o mouseenter que o mouse entrou na <div>, outra coisa que eu posso fazer é continuar movendo o mouse por dentro da <div>.

Nesse momento ver ser disparado várias vezes o método mousemove, que enquanto tiver movendo dentro da <div>, ele vai disparar o evento mousemove. Se eu pegar o mouse e clicar segurar, eu tenho o disparo do mousedown, no momento em que eu soltar o botão do mouse eu disparo outro evento o mouseup ou mouse up, eu também tem o movimento do clipe inteiro, apertar e soltar rapidamente eu tenho o evento click e da mesma maneira que com o mouseenter, quando eu mover o mouse para fora dessa <div> ele vai disparar um evento mouseout ou mouse out. Então olha só a gente viu seis métodos, seis eventos que podem ser disparadas só com o movimento do mouse, existem outros esses não são os únicos e se por acaso você dar uma pesquisada nos eventos que podem acontecer dentro de elementos em JavaScript, você vai ficar muito surpreso, quer ver?

Dá uma olhadinha aqui: vou vir aqui no Google e digitar: "JavaScript DOM events list", procura aqui o site "Events Reference" da MDN (da Mozilla), dá uma olhadinha nessa página, procura essa página aqui "Events reference" ele está em um processo de tradução, por isso que não tem tudo aqui, dá uma olhada, cada um desses é um evento que é possível está vendo? Olha isso, é muito evento, não tem como fazer uma aula de falando todos os eventos, até porque nem todos os elementos são compatíveis com todos os eventos, têm eventos específicos para cada situação. Você viu aqui?

Está cheio! Só como curiosidade, agora com o advento dos celulares, você tem os "Touch events" que são diferentes dos Mouse events, então você tem uma série de funcionalidades, que se você quiser se especializar é só buscar essa página aqui com muita informação. Essa página do MDN, ela faz parte da nossa bibliografia recomendada.

Então é o seguinte, você agora entendeu o que são os eventos, são coisas que eu posso fazer como esse elemento que no caso é a minha <div> e eu exemplifiquei somente com os de mouse, você acabou de ver que existem muitos outros, mas para disparar um evento, para tratar um evento, eu preciso te explicar antes o que é uma função ou uma funcionalidade. Uma função e JavaScript é o seguinte: é um conjunto de códigos, é um conjunto de linhas que a gente já fez várias vezes durante todas essas primeiras aulas do curso, que vão ser executadas só quando o evento ocorrer. Então por exemplo: eu vou programar dez linhas, essas dez linhas a gente chama de bloco, então imagina que esse bloco tivesse 10 linhas, essas 10 linhas não vão ser executados automaticamente, todos os nossos códigos até o momento foram executados automaticamente.

Carregava a página e ele executava o código, agora essas 10 linhas (esse bloco), ele só vai ocorrer por exemplo: quando eu clicar dentro da <div>, então essas 10 linhas vão ser disparadas somente quando o evento ocorrer. Para eu executar essas 10 linhas somente quando o evento ocorrer, primeiro passo é colocar lá dentro de um bloco, um bloco em JavaScript ele é delimitado entre os sinais de chaves, então você abre chaves, coloca o seu código e fecha chaves. Isso aqui a gente chama de bloco, esse bloco você tem que nomear ele como uma "function", então você coloca a palavra "function" que quer dizer função antes do bloco, no JavaScript existe isso aqui: função anônima, é uma função que simplesmente não tem nome, só que para que o método possa funcionar, eu tenho que dar um nome para essa função e geralmente os nomes das funções são ações que nós podemos fazer, geralmente funções de evento, eles são nomes de ação, você vai colocar o nome da ação que vai acontecer e abre e fecha parênteses.

Exatamente como está aparecendo aqui e opcionalmente você pode também colocar dentro desses parênteses alguns parâmetros, pode ser um, pode ser vários parâmetros. Parâmetro a gente vai ver um pouco mais pra frente, vamos então agora abrir o nosso código de novo, código que a gente criou até o momento e vamos disparar um código simples que é um código de click, eu vou te mostrar como faz isso a parte HTML e também a parte JavaScript. Então vamos lá, essa parte de cima não me importa tanto no momento eu posso até encolher o head, eu encolhi o head para ficar mais fácil a sua visualização, eu não apaguei eu só cliquei nesse sinal de menos aqui, aqui embaixo, eu vou criar um script.

Aqui em cima eu vou colocar um evento, os eventos podem ser configurados na parte HTML ou diretamente do JavaScript, você vai escolher, eu vou te mostrar as duas técnicas e você vai escolher qual você prefere. Eu vou fazer o seguinte: meu método que que eu vou disparar é o evento de click, para disparar o click dentro do HTML, eu vou colocar aqui dentro da <div>do lado do ID e eu vou colocar "on" e o nome do método que eu quero disparar, o nome do evento "onclick", então "onclick" ele vai chamar o nome da ação que eu quero colocar, então eu vou colocar "clicar", então quando eu clicar em cima da <div>, ele vai disparar o clicar, venho aqui no meu JavaScript, crio um bloco e coloco um function aqui na frente, isso é uma função anônima e funciona sem problema no JavaScript, só tem que colocar um nome para poder encontrar essa função. Tudo que estiver aqui dentro, ele só vai ser executado quando eu chamar o clicar, então quando eu chamar ao clicar ele vai executar tudo que está aqui dentro.

Essa é a configuração básica, eu tenho que disparar, configurar o método e esse método só vai ser disparado quando eu clicar com o mouse, então chamar o método "clicar", vou chamar essa função de clicar e aqui dentro vai configurar o que vai acontecer quando eu clicar. Quando eu clicar, eu quero fazer o seguinte: e se interaja vai mudar o conteúdo dele, para eu mudar o conteúdo dele, eu tenho que ver dentro da minha árvore DOM, isso aqui é uma <div> de ID "area". Então eu posso fazer: var a (pode chamar de "a" ou de "área" sem problemas), var a recebe window.

documents (pode ser só documents), eu estou sempre fazendo a forma completa quando você olhar e pensar: "window mais que esquisito". Não, não é esquisito. Window.

document. get elements, eu tenho ID, eu posso selecionar por ID ou eu posso usar um querySelector, vou selecionar "by ID", não está no plural então não tem que usar colchetes, vou colocar entre aspas simples, esse nome. Esse nome é igual a esse ID, então esse daqui é o meu objeto a, meu objeto a está ligado diretamente com essa <div>, o que eu vou fazer aqui é colocar o a.

inner. Text (pode ser innerText ou innerHTML), com o innerText só muda o texto, com o innerHTML você consegue colocar tags HTML também, no innerText eu só vou colocar 'clicou! ' só isso.

Então dá uma analisada antes de colocar para funcionar, quando eu clicar na minha <div> eu vou criar um objeto chamado "a" e ele vai ser uma ligação, isso faz a ligação do objeto a dentro do JavaScript com o elemento de ID area que está dentro do HTML e esse objeto vai mudar o conteúdo dele pra "clicou! " vamos salvar, vamos rodar e se eu mexer o mouse, nada acontece, se eu clicar ele mostra "clicou! ", viu então eu consegui.

Esse "clicou! ", ele só vai acontecer quando eu efetivamente clicar em cima do elemento, porque eu disparei o evento "on click", vamos parar outro elemento aqui que é o "onmouseenter" (isso é, quando o mouse entrar), vou chamar o 'entrar', coloquei a ação e vou ter que criar outra function, sem parâmetro nenhum. Eu também teria que fazer esse "var a = window" igualzinho se daqui, porque eu não consigo aqui de dentro acessar esse a daqui, o que eu vou fazer não é a melhor coisa a se fazer, depois quando você for estudar um pouquinho mais sobre o escopo você vai ver que não é a melhor coisa a se fazer porque tem um problema de uso de memória mas nós vamos fazer o seguinte: vamos colocar esse"var a" pra fora, colocando pra fora e se "a" vai funcionar dentro de qualquer coisa.

Então eu posso colocar: a. innerText= 'Entrou' e eu vou aproveitar "onmouseout= "sair". Disparei três eventos e no function sair "a.

innerText='Saiu", então fiz 3 métodos criei um objeto aqui do lado de fora pra ficar com o escopo global, de forma resumida quando crio isso do lado de fora ele serve para todas as três functions, se eu pego isso daqui coloco aqui dentro ele só serve pra function clicar, não serviria para as outras então tem que colocar do lado de fora isso, gera uma pequena dor de cabeça só que mais pra frente no aprofundamento de JavaScript você vai entender isso. Salvei e vou atualizar, entrou e saiu, não estou clicando, cliquei, clicou. Outra coisa que vou fazer é: quando eu clicar, eu também vou mudar o style dele, vou mudar o background para 'red', quando eu clicar ele vai ficar vermelho e quando ele sair ele vai voltar a ficar verde.

Quando eu clicar o fundo vai ficar vermelho e quando eu sair da <div> o fundo vai voltar a ser verde. Entrou e saiu, várias vezes. Quando eu clicar, ele fica vermelho, quando sair, volta a ficar verde.

A interatividade que eu tenho com a <div>, eu posso fazer com qualquer um é muito interessante. E agora vem uma outra: dica além de disparar diretamente pelo HTML, eu posso disparar os eventos utilizando listeners que são ouvidores, eles ficam prestando atenção dentro do próprio JavaScript, vamos ver como isso é feito. Então, no lugar de fazer isso daqui e deixar o seu HTML muito poluído, eu posso fazer o seguinte: posso criar o a.

addEventListener isso é, ele vai ficar prestando atenção em um determinado evento e eu vou criar 3 listeners. 1 listener para click que vai ser a execução do clicar, vai fazer assim: a. addEventListener('mouseenter, entrar).

E por último nós vamos fazer a. addEventListener e vou criar um outro listener para mouseout, eu criei um listener pro clicar, outro para entrar e outro sair, são os meus 3 métodos e eu posso tirar isso daqui, meu HTML fica menos poluído a ligação do HTML e do JavaScript vai ser feito por essas 3 linhas que é o Event Listner. Vamos salvar, atualizar e vamos ver se vai, entrou e saiu, várias vezes e clicou, funcionou sem problema nenhum e uma coisa que é importante, a gente não falou antes mas pode começar a ocorrer bastante agora, principalmente que a gente vai começar a fazer exemplos que bem práticos, a detecção de erros por exemplo: se você errar algum pedaço de código vou te mostra aqui, vou tirar o "w", você digitou o código inteiro e esqueceu de algo ou por exemplo você botou "window" com letra maiúscula, colocou o "W" em letra maiúscula porque você simplesmente quis e achou que iria funcionar, na hora que você colocar pra rodar, você vai ver que nada vai funcionar, isso é um erro do JavaScript, houve um erro, só que ele não dá o erro e como você descobre que tá dando erro, com é que você vai descobrir qual problema aconteceu?

Na maioria dos casos é só você clicar com o botão direito, vir em "Inspact" e ele vai abrir um inspetor, vai abrir o DevTools, geralmente a DevTools vai aparecer dentro do código, em cima, do lado ou embaixo. Eu gosto de deixar assim, clica na reticência e clica em "Undock" e ele vai ficar aqui. Basicamente você vai olhar aqui em cima e vai perceber que tem um erro, aqui embaixo no console você vai ver "não consegui ler a propriedade getElementById na linha 26", geralmente o erro está na linha 26 pra cima, é só eu corrigir o "w" e a partir daqui já voltou a funcionar, por exemplo: vou esquecer o "w", ele não está funcionando o "interaja", aqui ele me deu três erros porque executei três vezes e ele me deu o erro "windo is not defined", ele não reconheceu a palavra "windo" que está exatamente aqui, então eu dou uma olhada falo: "ah não e windo, é window".

Certo? Então você consegue detectar erros diretamente a usando o DevTools do próprio Google Chrome, então vou corrigir "window. documents", salvei e agora já voltou a funcionar, entrou saiu e clicou, pequenos erros quando você está começando é comum, é normal você ter pequenos erros, não tem problema nenhum com isso então você consegue resolver dessa maneira.

E pra essa aula ficar completa, vamos criar outro exemplo utilizando eventos DOM, só que dessa vez a gente a começar a interagir mais com o usuário, vamos começar a buscar valores do usuário, começar a deixar ele digitar coisas então volta no seu Visual Studio Code e vamos criar mais um arquivo. Vou fechar aqui e vou criar mais um arquivo dentro da aula 10, vou criar o arquivo "ex007. HTML", vamos criar um HTML básico isso a gente já fez várias vezes, PT-BR, vou colocar "Somando Números" no title, aqui no body vamos fazer o seguinte, vou primeiro dar um CTRL+Shift+P, "watch in chrome" ele já está visualizando o somador, ele já está com esse documento, vamos criar um "h1" e esse "h1" vai ser "somando valores" (h1 é título e ele escreveu lá "somando valores"), o que eu vou fazer aqui é criar um input para number, vou criar duas vezes: input: number, está lá, ele já criou tudo pra mim, o name e o ID e eu vou dar um name e um ID igualzinho: txtn1, tem o name e tem ID, o name é importante para uma coisa e o ID é importante para a outra, se você programar em PHP o name é muito importante, a gente vai pegar pelo ID mas não apaga o name não, vou criar outro input, você tem input pra tudo, pra data, pra cor, pra tudo.

Eu vou criar um pra number de novo, já criei 2 para number, vou dar o name "txtn2" e o ID "txtn2" e vou colocar um botão para ele criar o somar e nesse botão de somar eu vou colocar o "onclick", e vou colocar somar que vai ser o método que eu vou usar, então basicamente eu vou colocar um número aqui e aqui, vou colocar um sinal de adição pra ele ficar mais bonito. Está montado a minha interface básica, vamos ao script e no meu script eu vou ter que criar uma função somar, na minha função somar eu vou ter que saber quem é n1 e quem é n2, só que eu vou criar dois objetos: tn1 que é a caixa de texto n1 e vou ter o tn2 que é a caixa de texto n2, não o valor, sem a caixa. Vou fazer a ligação com a caixa: window.

documents. getElementsById('txt n1'). exatamente como está aqui, se está tudo minúsculo, tudo minúsculo aqui também, o tn2 vou fazer a mesma coisa: window.

documentsgetElementsById('txtn2'), eu posso também invés do getElementsById fazer por exemplo um querySelector e eu vou selecionar o meu input que tenha ID txtn2, vou até deixar um de cada jeito pra você poder ver que os dois funcionam, então você pode usar getElementsById ou o querySelector, qualquer dúvida no uso desses métodos que estão sendo descritos aqui, você assista a aula 9 porque lá eu expliquei detalhadamente cada um como é que funciona o ID, a hashtag, se for class é o pontinho enfim, tem muita coisa pra você aprender na aula 9. Agora eu vou ter que ter uma variável para o valor do n1 e uma variável pro valor do n2, isso porque quando ele vem de uma caixa de texto, ele é texto, nós vimos isso na aula de manipulação de dados que também está na playlist do curso de JavaScript, para isso vou ter que fazer o seguinte: vou ter que usar um Number (posso usar um parseInt ou simplesmente Number), vou pegar o tn1. value que é o valor que está dentro desta caixa de texto n1, mesma coisa aqui pro outro, esse Number é com letra maiúscula, tn2.

value também. Agora eu tenho o valor de n1 e o valor de n2 como forma de número, porque se eu somar sem essa conversão de número ele ia concatenar já o mostro pra você, vou ter uma variável "s" que vai ser n1+n2, outra coisa que eu esqueci de fazer aqui é criar o resultado, então vou criar esse resultado dentro da <div>, resultado, deu problema na visualização salva e atualiza que ele volta a funcionar, o resultado está aqui embaixo numa <div> vou colocar <div> e um ID que é "res", também vou criar: var res= window. documents.

getElementsById('res' ), quando ID eu gosto de usar o getElementsById, mas tem o querySelector que é até mais moderno, agora eu vou fazer com que o res. innerHTML, vou fazer um teste simples, vou colocar o valor de "s", vamos salvar e ver se funciona. Vou colocar aqui: 3 e 2, somar e deu 5 funcionou, só que aqui eu vou colocar bonitinho vou colocar uma string interpolada, vou colocar: "a soma entre" vou colocar um bloco (um placeholder) "n1 e n2 é igual a" outro placerholder, "s".

Vou colocar aqui 4 e 2 , somar, a soma entre 4 e 2 é igual a 6, funcionou, bonitinho o que eu vou fazer aqui só para ficar mais bonito ainda, vou criar um style e esse style eu vou colocar o meu body e o meu font vai ficar "normal18pt, arial" só pra ficar maior, se você quiser dá pra aumentar também a fonte do input, é só fazer assim: input, font: normal18pt também, arial. Vou colocar a largura dele que ficou muito grande: width: 100 px; É meio chatinho esse negócio de CSS quando você está desacostumado, faltou ponto e vírgula aqui em cima também, no CSS é obrigatório, então está aqui o input normal e a minha <div> está aqui com o resultado. Então vamos lá, vamos rodar, pode clicar aqui, 4 e 5 , somar, a soma entre 4 e 5 é igual a 9.

Sem problema nenhum, inclusive quando eu usei o innerHTML aqui, eu posso por exemplo colocar 9 em negrito, na hora que eu mandar somar "23 e 455, a soma é 478" ficou em negrito. Se você quiser dar um espacinho nessa <div>, é só você vir aqui e colocar a minha <div> de resultado, vou só configurar a <div> de resultado vou colocar meu margin só em cima, margin top de 20 pixels por exemplo deu uma espaçadinha, se você colocar 200 pixels, ele vai lá pra baixo mas 20 já está bom. É só pra organizar bonitinho, deixar a coisa bonitinha, é pra isso que serve o estilo, e se você no momento pensou: "ah não é só colocar br várias vezes", está pensando um pouco errado meu querido, é sempre com margem, padding.

Vamos rodar aqui pela última vez, vou colocar 4 e 7, somar, "a soma entre 4 e 7 é igual a 11" beleza? Então estamos com o código funcionando, dá uma olhada nisso aqui que bonito, olha que beleza, eu tenho a parte HTML que é a parte do meu conteúdo, eu tenho a parte CSS que é a minha parte de estilo e eu tenho a minha parte de interatividade que é a parte de JavaScript, as três partes sendo criadas no mesmo exercício, dentro do seu curso de JavaScript aqui do Curso em Vídeo. ♫ É ou não um curso bem maneiro?

E se você concorda que o curso é bem legal, o que eu te peço é sempre a mesma coisa, se inscreve aqui no canal, habilita o sininho para você receber notificações, aqui em cima playlist importantes, link para vídeos importante que a gente julgar necessários, já que dentro do Curso em Vídeo a gente tem anos e anos de produção de conteúdo, é só você entrar no nosso canal Curso em Vídeo do Youtube e acessar as nossas playlist você vai ver a quantidade de curso que a gente já tem disponíveis gratuitamente para você. E também dar aquela forcinha com os amigos, recomendar pras pessoas nas redes sociais, marcar a gente, aquele grupo de programadores que você participa do Facebook, aquele grupo de WhatsApp da faculdade que você faz parte, tem aquele grupo do Discord que vocês batem papo sobre programação. Indica o curso de JavaScript para todo mundo, com isso você vai ajudar pra caramba a gente a conseguir patrocinadores maravilhosos, como por exemplo o Google que está patrocinando esse curso pra você.

Todas as aulas foram disponibilizadas no mesmo dia, você não vai precisar ficar esperando nada, você vai conseguir fazer o curso inteiro de uma tacada só. Só não se esquece de dar uma descansada entre as aulas, fazer os exercícios, não adianta ficar maratonando tipo Netflix, você não vai assistir o curso inteiro de uma vez só e achar que sabe JavaScript, a gente já conversou bastante sobre isso. Eu me despeço por aqui já deixando encontro marcado para a próxima aula, que já está disponível aqui na playlist.

Um grande abraço, boas práticas e até a próxima!