Aprenda manipulação de DOM em JavaScript em 1 hora - como criar botões e muito mais!

1. Introdução: Olá e seja bem-vindo a este curso sobre manipulação do DOM. Meu nome é Taylor English. Serei seu instrutor para o curso, e estou muito animado com isso. Eu fiz este curso para que você possa entender facilmente a manipulação do DOM para que você possa se divertir mudando CSS, fazendo botões, fazendo coisas, criando elementos programaticamente. É para isso que serve este curso. E eu facilitei a compreensão para iniciantes. E pessoas experientes vão gostar, tenho certeza de que você vai gostar. Agora eu quero rever o que vamos falar. Mas antes de fazer isso, quero contar a vocês sobre onde encontrar mais vídeos como esse. Em outras aulas, você pode assistir a vídeos gratuitos no computador, dicas e truques e resolver problemas, bem como alguma programação no meu canal do YouTube, que é youtube.com slash C plus hacker, tudo explicitado. Há muitos tutoriais ótimos lá. Eu tenho uma aula de Skillshare que você pode assistir chamada angular 11 para iniciantes, que na verdade também é aplicável ao Angular 12, eu acredito. Mas trata-se de aprender componentes, serviços de roteamento, todas essas coisas excelentes. Eu acho que você pode realmente gostar se você curtir este curso. E você pode descobrir que neste link, vou tentar colocar isso na descrição desta aula, neste vídeo. Isso é só um pouco sobre mim. Sou um estudante universitário que estuda ciência da computação. Talvez haja alguma credibilidade para você, mas honestamente, eu adoro ensinar isso e é por isso que quero compartilhá-lo. Então, esta aula, o que vamos passar por cima são cinco coisas básicas. Primeiro, vou mostrar como configurar seus arquivos. Isso não faz parte da manipulação do DOM, mas inclui alguns aspectos importantes, como vincular seus arquivos corretamente para seu JavaScript e CSS. Em seguida, vamos, vamos saltar para selecionar elementos, pegar o HTML, e para que possamos fazer as coisas com ele, salvando-o em variáveis. Então falarei sobre a criação de elementos programaticamente para que você possa criá-los e anexá-los a determinadas partes da página via JavaScript. Em seguida, vamos manipular elementos com CSS e coisas assim. Assim, você pode alterar a cor da sua página. Você pode fazer todos os tipos de coisas por meio do JavaScript. E, finalmente, falaremos sobre botões e como você pode clicar em um botão e executar funções se as instruções loops. Vamos entrar em alguns detalhes sobre essas coisas. Então, espero que vocês gostem disso. Vai ser muito divertido. E te vejo no próximo vídeo. 2. Configurando seu ambiente: Tudo bem, é hora de começar com nossa primeira lição. Então, antes de realmente mergulharmos na manipulação do DOM, vamos começar configurando nossos arquivos, HTML simples, JavaScript e arquivos CSS. Então, vamos seguir em frente e fazer isso. Você vai querer criar uma pasta onde você possa trabalhar neste projeto. Eu chamei a minha manipulação DOM. Você pode chamar o seu o que quiser. Vou trabalhar no VS Code, o que eu recomendo. Vamos criar um arquivo e chamaremos isso de index.html. Agora, vamos começar. Vamos salvar isso. Crie nossas tags HTML. Dentro disso, queremos nossa tag de cabeça e, dentro disso, queremos nossa tag de título. Só vou dizer relação Dom. Agora, abaixo da etiqueta da cabeça, você vai querer colocar uma tag corporal. Não foi isso que eu quis dizer. Certo. Dentro da tag body, podemos apenas dizer, vamos colocar uma tag de parágrafo e dizer olá mundo. Agora vamos criar um arquivo JavaScript e CSS que começaremos a usar nos próximos vídeos. Vamos chamar isso de app.js. Para garantir que este esteja funcionando. Vou fazer console.log. Olá, mundo. Mais uma vez. Agora, para vincular isso abaixo da tag body, vamos colocar uma tag de origem de script, e vamos colocar app.js. Agora isso é importante porque queremos que o JavaScript seja executado após o restante do HTML já ter sido estabelecido. Ele vai atrás da tag do corpo. A sintaxe para isso é script e, em seguida, a fonte é igual e, em seguida, o nome do seu arquivo JavaScript. Mais uma vez, você pode chamar o seu o que quiser. Agora vamos fazer nosso CSS. Vou ligar para isso style.css para garantir que isso esteja funcionando. Faça o corpo e faremos uma cor de fundo verde. Agora nós vinculamos a folha de estilos, o style.css aqui na tag head. Vamos criar uma tag de link. E você pode ir até CSS aqui se você tiver a abreviação do Emmett. Mas tudo o que vai fazer é dizer que ele diz ao código que é uma folha de estilos e dar o link para o style.css. Portanto, essa é nossa sintaxe básica. Isso é tudo o que realmente precisamos para começar. Site muito simples. Vamos em frente e isso. Agora, nesta classe, vou usar uma extensão VS Code para testar isso. E vou te mostrar o que é e como obtê-lo. Vamos ver. Essa extensão é chamada de Live Server. Se você for para a guia Extensões aqui no código VS, basta pesquisar. servidor ativo deve ser uma das primeiras coisas que aparece. Você só vai querer instalar isso. Agora, o que isso vai fazer é quando entrarmos em nosso arquivo HTML, podemos clicar com o botão direito do mouse e dizer Abrir com o servidor ativo. Também podemos parar o servidor aqui. E também deve haver um botão aqui que diz Go Live. Esse botão nem sempre aparece. Então, eu normalmente confio neste menu com o botão direito do mouse. Se abrirmos com um servidor ao vivo aqui, então é isso que obtemos. Nós obtemos nosso Hello World verde para que saibamos que a folha de estilos está conectada e configurada corretamente. O HTML é bom. Diz Hello World. Se pressionarmos Control Shift I no Windows, isso abrirá nosso console e diz Hello World. Mais uma vez. Sabemos que tudo está funcionando corretamente ou o JavaScript está conectado corretamente. Tudo está funcionando nessa frente e você não precisa se preocupar com essa mensagem de erro. Não é super relevante para o que estamos tentando trabalhar agora. Mas essa é a configuração básica. Apenas uma recapitulação rápida. Você quer três arquivos, index.html, app.js e style.css. E lembre-se, app.js está vinculado em uma tag de script abaixo da tag body, mas ainda dentro do HTML. E a folha de estilo está dentro de uma tag de link na cabeça. Certo? Tudo bem, te vejo no próximo. 3. Selecionando elementos: Tudo bem, agora vamos falar sobre a seleção de elementos. Dentro da manipulação do DOM. É muito importante que o código saiba como obter os vários elementos HTML e fazer coisas com eles. Vamos começar acessando nosso arquivo app.js. Podemos remover esta instrução de log aqui. Agora, atualmente em nosso site, temos nosso Hello World. Bem aqui. Digamos que queremos selecionar helloworld para que possamos manipulá-lo ou fazer algo com ele. Agora, agora, hello world é apenas uma tag de parágrafo. Ele não tem nenhuma classe ou IDs. Vou mostrar a você como selecioná-lo assim, mas também como selecioná-lo com uma classe ou um ID. Agora, para selecioná-lo assim, na verdade, vou começar usando um ID ou uma classe. Vamos começar com um ID dentro do nosso ID de tipo de tag de parágrafo, e vamos dar a ele o nome olá. Agora vamos para app.js. E queremos fazer é armazenar a tag de parágrafo dentro de uma variável para que possamos fazer as coisas com ela. Vamos dizer, digamos parágrafo igual. Agora vamos digitar documento. Documento é como você acessa o modelo de objeto do documento. Isso é o que estamos usando. Quase todos esses comandos, se não todos eles, começam com o documento. Dizemos ponto do documento, obtemos elemento por ID e certificamos de que o D em ID é minúsculo. Agora o VS Code é realmente ótimo e deve sugerir essas coisas para você. Caso contrário, verifique o armazenamento de extensões para encontrar uma extensão JavaScript gratuita para realce de sintaxe. Dissemos obter elemento por ID. O ID disso é olá. Colocamos parênteses e, em aspas simples, diremos olá. Agora, o que podemos fazer é fazer um console.log no elemento de parágrafo. E isso nos mostrará o que realmente selecionamos para que possamos ver o que estamos fazendo. Se o salvarmos. Esqueci de mencionar no último vídeo, toda vez que salvamos alterações nesses arquivos, o servidor, o servidor ativo atualizará automaticamente a página para que você não precise. Se entrarmos aqui, ainda diz Hello world. Então pressione Control Shift. Acredito que seja o Command Shift I no Mac. Caso contrário, basta procurar o que é esse comando, você verá que ele registrou esse elemento. Então, se olharmos para trás para o código, dissemos que o parágrafo é igual a Document.getElementById. Então, o que fizemos foi retirar efetivamente o elemento do HTML e o definimos igual a essa variável. Agora vamos explorar isso um pouco e deixe-me mostrar algumas das propriedades que isso tem. Se formos ao parágrafo aqui e pressionarmos ponto, isso vai sugerir todos os tipos de coisas. Há todos os tipos de atributos que podemos acessar a partir disso. Digamos, por exemplo, que queremos acessar o texto dentro. Podemos dizer TextContent. E agora estamos registrando o conteúdo do texto, que é o HelloWorld. Agora, há uma série de coisas que você pode acessar a partir daqui e entraremos mais nisso mais tarde, quando manipularmos estilos e tornarmos os botões interativos nesse tipo de coisa. Mas, por enquanto, é assim que selecionamos um elemento. Então, digamos que ele tem uma aula. Faremos a mesma coisa com olá, mas isso será uma aula. Em vez de dizer get element by ID, queremos usar obter elementos por nome da classe. Agora, a aula que colocamos aqui é olá. Vamos ver o que acontece quando registramos isso. Você pode ver isso trouxe algo chamado coleção HTML. E se abrirmos isso, é uma matriz. O primeiro elemento no índice 0 é uma tag de parágrafo com uma classe de saudação. E se quiséssemos apenas o elemento? Como selecionamos isso? Bem, a coisa sobre classes é que vários objetos podem ter uma classe. Então, se você selecionar os elementos por nome da classe, ele receberá uma matriz de cada elemento que tenha esse nome de classe, mesmo que haja apenas um. Agora, as IDs são diferentes porque você só deve colocar um ID em um elemento. Então, quando você diz obter elemento por ID, ele o dará diretamente porque deve haver apenas um elemento com esse ID. Se quisermos acessar o elemento específico, sabemos que dentro do código é o primeiro, é o primeiro lugar onde vemos essa classe de saudação. Então, logo após isso, podemos colocar colchetes para acessar o 0º índice. E isso acessará esse primeiro elemento, que será a tag que queremos. Se salvarmos isso e voltarmos aqui, você pode ver que selecionamos esse elemento inteiro. Agora podemos fazer a mesma coisa se sem usar classe ou ID. Digamos, por exemplo, apenas queremos selecionar todas as tags de parágrafo. Eu posso fazer é vir aqui e dizer documento ponto obter elemento por nome da tag. Lembre-se que as tags são essas coisas aqui dentro das cenouras ou o que você chama essas coisas. Podemos obter todas as tags de parágrafo dizendo GetElementsByTagName p para parágrafo, certifique-se de que esteja entre aspas. O que isso nos mostra? Novamente, isso nos mostra uma coleção HTML porque podemos ter vários elementos, várias tags de parágrafo. Vamos ver o que ele está nos mostrando aqui. No índice de largura 0, temos nossa tag de parágrafo. No primeiro índice. Tem algo também. Vou ter que verificar e ver por que isso é. Certo. Então, fiz uma pausa por um segundo e descobri qual era o problema. O problema era que, em nosso HTML, eu tinha que abrir tags para a tag de parágrafo em vez de ter a barra aqui para fechá-la. Opa, pensava que havia duas tags P separadas. Consertei isso. E se chegarmos ao app.js, podemos ver que diz GetElementsByTagName, estamos recebendo o p. Então, se viermos aqui e olharmos no Chrome aqui, você pode ver que é uma matriz com apenas um elemento. Agora, novamente, fazemos a mesma coisa. Podemos fazer a mesma coisa que fizemos com as classes onde podemos selecionar o índice zeroeth e ver a tag exata. Aprendemos a selecionar elementos por tag, nome, ID e por classe. O que vem a seguir? Bem, digamos que você queira selecionar um elemento com base em vários atributos e não apenas em sua tag, sua classe ou seu ID. É aí que entra o seletor de consultas. Digamos que tenhamos essa tag de parágrafo Hello World aqui. Vamos dar uma aula de olá. Então teremos outra tag de parágrafo que também tem uma classe de olá, mas também tem um ID de, digamos panquecas. Podemos dizer algo aqui. Panquecas são incríveis. Se produzirmos, vamos ver se obtemos elementos por nome de tag e produzimos isso. Vamos ver o que, o que vem à tona. Ok, então nós temos isso, esse array. Mais uma vez, há dois elementos. Agora, mesmo que digamos obter elementos por ClassName, dizemos olá. Ele vai retornar dois objetos. Assim, podemos especificar um pouco mais o que estamos querendo. Se eu quiser que ele tenha uma classe de olá e um ID de panquecas, é aí que posso usar o seletor de consultas. O que gostaríamos de fazer é vir para o app.js. Digamos seletor de consulta de ponto de documento. Seletor de consulta. Basicamente, você pode dar a ele vários atributos diferentes de um objeto e ele os encontrará em vez especificar id ou classe ou nome da tag. Digamos que queremos uma tag de parágrafo e sabemos que ela tem uma classe de olá. Colocamos um ponto olá. A razão pela qual colocamos um ponto é porque essa é a sintaxe que usaríamos em nossa folha de estilos. Por exemplo, se quiséssemos acessar a classe hello, diríamos travesseiro de pontos e, em seguida, daríamos estilos. É a mesma coisa que estamos fazendo aqui. Agora, as IDs são selecionadas usando o sinal de libra. Vou te mostrar isso em um minuto. Vamos produzir isso e ver o que vem à tona. Quando selecionamos a classe hello, ela escolheu o primeiro objeto que pude encontrar. E é assim que o seletor de consulta funciona, é que ele vincula o primeiro objeto que corresponde aos seus parâmetros. Mas não era isso que queríamos. Queríamos que panquecas fossem incríveis. Podemos especificar mais e dizer panquecas de sinal de libra. Se você se lembra, tivemos a ideia de panquecas aqui. Agora, se produzirmos isso, ele obteve o elemento que queríamos. No entanto, porque as panquecas têm um ID que o torna único e não precisamos de tudo isso. Podemos nos livrar da maioria dessas coisas e apenas dizer uma identificação de panquecas que tem o mesmo efeito. Isso é específico o suficiente para saber o que queremos. E assim você pode ver que temos sintaxe semelhante para fazer a mesma coisa. Existem diferentes maneiras de fazer isso. Se eu disser o parágrafo dois. Portanto, esta é uma sintaxe bastante semelhante aqui , temos um seletor de consultas que recebe a primeira coisa com uma ideia de panquecas. Aqui, só temos o que tem uma ideia de panquecas. Então você pode ver que existem diferentes maneiras de fazer as mesmas coisas. Agora vamos dizer que quando estávamos olhando para o ponto p hello, ele apareceu com apenas a primeira coisa que encontrei, que é o que o QuerySelector faz. E se eu quiser tudo o que combina com isso agora? Bem, então o que posso fazer é usar algo chamado QuerySelector. Tudo o que vamos colocar na mesma coisa. Vamos dizer p dot olá. Isso nos deu essa matriz de lista de nós de ambos os atributos. Por que ter seletores de consulta se tivermos os outros? Bem, QuerySelector é que você tem que fazer muitos desses tipos de seleção de elementos diferentes. seletor de consulta pode ser bom porque você não precisa se lembrar. Obter elemento por ID, elemento por sala de aula. Você não precisa digitar tudo isso. Você acabou de dizer seletor de consulta e, em seguida, especificar , oh, este é uma classe, este é um ID. Este é apenas uma etiqueta. Então, se quiséssemos apenas a tag, poderíamos nos livrar do ponto olá e apenas dizer seletor de consulta todos p. E isso vai encontrar tudo o que é um elemento p. Essas são as várias maneiras de selecionar elementos e isso será muito útil quando começarmos a manipular CSS e usar botões e coisas assim. Vejo você no próximo. 4. Como criar elementos: Agora vamos aprender sobre a criação de elementos. Basicamente, vamos criar programaticamente várias tags, adicionar classes e IDs a elas, estilos, todos esses tipos de coisas. E vamos inseri-los na página. Vamos começar em nosso arquivo app.js. Vou remover tudo isso. Digamos que queremos criar um botão abaixo disso. Também vou me livrar das panquecas são incríveis. Digamos que queremos fazer um botão abaixo disso que, mais tarde, faremos com que ele mude a cor de fundo da página. Mas, por enquanto, vamos criá-lo e colocá-lo na página. O que queremos fazer é criar um elemento. Chamaremos esse botão, seremos muito criativos e o definiremos igual ao elemento de criação de ponto do documento. Da mesma forma que os seletores que estamos usando, você fará aspas simples e, em seguida, o nome da tag, que é botão. Se fosse uma tag de parágrafo, você diria p. Se fosse tag div, você apenas diz div. Tão bem simples. Criamos um botão. Agora isso não fez nada na página porque tudo o que fizemos foi defini-la igual a uma variável. Vamos console.log isso e ver o que temos. Temos apenas uma etiqueta de botão vazia. Vamos adicionar algum texto a ele. Para fazer isso, precisamos criar o que é chamado de nó de texto. Digamos, vamos nó de texto igual ponto de documento criar nó de texto. Agora vamos dizer que queremos que ele diga mudar de fundo, cor. Estamos apenas mudando de cor para ser simples. Agora, se voltarmos e olharmos, criamos o livro didático, mas não o colocamos no botão. Então, o que precisamos fazer é dizer botão ponto anexar. Na verdade, vamos anexar filho dirá nó de texto. O que isso significa agora é que o botão ou o texto é filho ou basicamente está dentro da tag do botão. Se dissermos Salvar, isso nos mostra que temos esse botão aqui. E tem todos esses atributos. Temos nosso botão. Queremos colocá-lo na página. Digamos que queremos inseri-lo logo após esta tag HelloWorld. Vamos mudar isso para um ID para facilitar a seleção. O que precisamos fazer é selecionar a tag HelloWorld e, em seguida, colocar o botão colocar nosso botão logo depois, anexar a ela. O que vamos fazer é dizer Olá, World igual documento ponto querySelector. E vamos dizer libra olá. Depois disso, queremos dizer que o ponto helloworld acrescenta o botão. Agora você pode ver que colocamos o botão logo após ele. Ele não faz nada, é apenas texto e podemos clicar nele. Mas isso é meio legal, certo? Vamos ver. Temos isso logo após o texto. Para que pareça um pouco mais bonito, um pouco mais fácil de olhar. Vamos mudar alguns dos estilos em style.css. Vá para Botão. Estilos para o botão, Todas as tags de botão. Tecnicamente, queremos dizer bloco de exibição porque os botões atualmente são padrão para uma exibição em linha, o que significa que eles podem ser exibidos ao lado de texto ou de outros objetos. Uma tela de bloco. Vamos colocá-lo embaixo, ele exibirá blocos. Se dissermos bloco de exibição, que estará abaixo disso, queremos dar-lhe algum espaço entre o hello world e ele mesmo. Então vamos fazer, vamos fazer uma margem. Na verdade, ele só fará uma margem. Os cinco principais pixels, talvez dez pixels. Ótimo. Temos nosso botão, nós o criamos. O que mais podemos fazer com esse botão enquanto o criamos? O interessante é que é quase mais fácil criar o botão e colocar tudo dentro dele antes de jogá-lo na página. Agora, é claro, você pode selecioná-lo mais tarde e fazer coisas com ele. Mas se você sabe que é uma classe, se você sabe que quer estilos com ela, é mais fácil colocá-lo completamente em um pacote antes de enviá-lo para a página. Vou te mostrar o que quero dizer. Temos nosso nó de texto. Digamos. Também queremos mudar o estilo. Agora, no próximo vídeo, vou me envolver mais na manipulação de estilo e nesse tipo de coisa. Mas muito brevemente, digamos que queremos. Mas vamos fazer o estilo de ponto de botão. Agora podemos dizer cor. Na verdade, a cor de fundo seria, a cor seria apenas o texto. Mas se dissermos cor de fundo, então poderíamos dizer azul claro. Você notará que essa sintaxe é diferente do CSS, e eu vou te dizer como isso funciona brevemente antes do próximo vídeo. Normalmente em CSS, se quiséssemos que o botão fosse azul, azul claro ou o que quer que seja, então diríamos fundo, cor do traço, azul claro, assim. A diferença aqui no JavaScript é que a cor de fundo é uma única palavra usando CamelCase, modo que a primeira letra seja minúscula e as seguintes palavras sejam maiúsculas. Cor de fundo, azul claro. Vamos salvar isso e nos livrar disso. Vamos dar uma olhada nisso. Parece que não funcionou. Vamos ver, temos um botão de erro ponto estilo ponto cor de fundo não é uma função. Então o que está dizendo é que está dizendo: Ei, você não pode colocar um parâmetro lá porque tecnicamente isso está tratando isso como uma função e você não pode fazer isso. Parece que isso não é o que devemos fazer aqui. Em vez de usá-lo como uma função, vamos dizer que é igual a azul claro. Vamos tentar isso. É um pouco difícil de dizer, mas definitivamente é diferente. Não é mais branco. Vamos ver se podemos fazer isso de cores mais distintas. Vamos apenas dizer Blue. Você definitivamente pode ver isso, ok, mas e se quisermos mudar a cor do texto? Podemos dizer estilo de ponto de botão, cor do ponto é igual a brancos. Ótimo. Então é assim que nós, como acrescentamos esses objetos diferentes. Temos que criar. Imagine que seja como uma pirâmide. Temos que no nível base, precisamos do nosso elemento, nosso botão. E então, um nível acima disso, nosso texto ou qualquer outra coisa que possa estar dentro do objeto, criamos. Um nível acima disso é um tipo de nossos estilos e tudo o mais. Você poderia fazer isso com qualquer elemento. Não precisa ser um botão. Pode ser uma div, pode ser tag de cabeçalho. Você poderia realmente fazer o que quiser. Nós inserimos esse botão em alguns vídeos. Vou mostrar como fazer isso mudar a cor do plano de fundo aqui, mas isso é apenas uma visão rápida da criação de elementos. Tudo bem, te vejo no próximo. 5. Manipulação de elementos (especialmente com CSS): Tudo bem, neste vídeo vamos falar sobre manipulação de elementos no DOM. Então, atualmente, temos nosso botão aqui, temos nosso Hello World. Temos nossa cor de fundo. Vamos ver o que podemos fazer com esses elementos, começando com essa cor de fundo. Não é muito bonito na minha opinião. Vamos mudá-lo para uma cor mais agradável. No nosso app.js, vou criar um pouco de espaço e vir aqui um pouco. Então, digamos que queremos selecionar o corpo porque o corpo é o que usamos para criar uma cor de fundo verde. Aqui podemos dizer cor de fundo. Oops, desculpe. Nós podemos. Primeiro, temos que selecionar o corpo. Digamos que o corpo seja igual ao ponto do documento, obtenha elemento por nome da tag. Você também pode usar o QuerySelector. Vai dizer corpo. Eu acredito que você tem que capitalizar este totalmente porque é uma etiqueta especial. Vamos ver se isso funciona corretamente. Certo. Certo. Sim. Certo. Desculpe, eu estava errado. Isso não precisa ser capitalizado. Então, o que aconteceu foi quando eu digitei corpo aqui e o registrei, ele nos deu essa coleção HTML, essencialmente uma matriz de elementos. Isso é o que isso é. E dizia, ok, no primeiro índice, índice 0, temos uma tag de corpo. É um pouco tolo porque a maneira como o seletor de tags funciona é que ele cria uma matriz porque podemos ter várias tags. Se dissermos obter elementos pelo nome da tag P, ele receberá todas as tags de parágrafo. Agora, ele fez a mesma coisa com o corpo, mas só podemos ter uma etiqueta corporal. O que vamos fazer aqui é selecionar o elemento 0 que nos deu nosso corpo. E você pode ver que ele está selecionado quando destacamos nosso cursor sobre ele, ele seleciona a página inteira. E se você abrir isso, você pode ver tudo. Tudo está lá dentro dele. Ok, então agora temos o corpo. Vamos mudar sua cor de fundo. Então, diga estilo corporal. Estilo é como acessamos a propriedade style. Ok, então digamos que a cor de fundo seja igual. Vamos dar. Vamos ver se o rosa claro é uma cor. Não faço ideia. Vamos tentar. Lá vamos nós. Sim, eu gosto disso. É uma boa cor. Deixe-me mostrar a diferença entre as funções que usamos anteriormente e esses sinais iguais. No último vídeo. Descobri que cometi um erro quando tentei usar a cor de fundo. Faça algo assim onde eu disse como cor de fundo, parênteses, rosa claro. Mas o problema é que não é uma função. Criar nó de texto é uma função. Está lendo algo feito de texto. Criar elemento é uma função. Queryselector é uma função, mas essas são propriedades dos elementos. Deixe-me mostrar o que quero dizer. Vamos selecionar o, vamos selecionar bem, podemos selecionar a tag body. Já selecionamos a tag body. Vamos registrá-lo. Vamos clicar nisso. O que recebemos? O corpo, na verdade pode não ser o melhor exemplo. Vamos tentar, vamos tentar o botão. Vamos, vamos ver. Desculpe por isso. Etiqueta do corpo. A tag corporal é um pouco estranha, então vamos selecionar nossa tag de parágrafo que diz Hello World. Só para este exemplo. Digamos que p para parágrafo igual. Documento, seletor de consulta, libra, olá. Então logo abaixo, vamos registrar P. Nós registramos P aqui. Selecionamos esta tag de parágrafo. Mas o que queremos fazer é obter um pouco mais de detalhes é que vamos colocar o p.ball antes da libra aqui no QuerySelector. Assim, podemos acessar mais informações sobre isso. É um pouco confuso. Mas quando o registrarmos, você verá que temos esse olá P lb. Se clicarmos nisso, você verá que existem todas essas coisas. Essas são propriedades da nossa tag de parágrafo. Aqui, esta tag de parágrafo tem toneladas de propriedades. A maioria deles diz nulo. Não estamos usando-os. Mas alguns deles somos, por exemplo, estilo. Se você clicar em estilo, verá uma lista de todos os estilos, basicamente todos os estilos possíveis para esse objeto. Novamente, a maioria dos quais não estava usando. Mas digamos que queremos mudar a cor desse olá mundo. Bem, então podemos procurar aqui e encontrar cores. Meu ponto em mostrar isso é mostrar por que isso não é uma função. Y. Quando tentamos mudar a cor de fundo do corpo, dissemos que o fundo do ponto do estilo do ponto do corpo, cor é igual a rosa claro. Fizemos isso porque esse rosa claro, desculpe, a cor era uma propriedade sob a propriedade style para esse elemento. Se isso foi um pouco confuso, está tudo bem. Você não precisa se preocupar com isso. Só saiba que quando você está modificando alguma parte de um elemento, seu CSS, é o que acontece quando você clica nele, todas essas coisas. Essas são propriedades que você define iguais a um valor que são diferentes dessas funções aqui. Agora, em caso de dúvida, se você procurar mudar estilo, cor de fundo para um elemento on-line, você poderá ver a sintaxe para isso se esquecer ou se você procurar criar nó de texto, você poderá ver a sintaxe de um site como as escolas Mozilla ou W3. Existem muitos sites que lhe dirão a sintaxe exata dessas coisas. Mas de volta ao que estávamos fazendo, estávamos mudando a cor de fundo aqui. Vamos ver quais outras propriedades podemos alterar enquanto selecionamos nossa tag p. Se clicarmos em P e pressionarmos o período, podemos ver todos os tipos de coisas. Então, talvez queiramos alterar o texto e clicar aqui no conteúdo do texto. Sabemos anteriormente que o conteúdo do texto é helloworld. E se eu quiser mudar isso? Posso definir essa propriedade igual a eu gosto do Pi. Agora você pode ver que o JavaScript manipulou esse elemento, ele foi alterado. É propriedade textContent. Se você quiser, eu o encorajaria a examinar as propriedades de cada elemento. Você pode fazer isso no código VS simplesmente pressionando os pontos depois algo e percorrendo esta lista, ele lhe dirá todos os tipos de coisas que você pode acessar. Por exemplo, o próximo irmão, que lhe dirá qual elemento está ao lado dele. Ou podemos procurar o HTML interno que mostrará o HTML dentro dele. Você pode perguntar se ele tem um determinado atributo. Todos esses tipos de coisas, na verdade, vamos tentar que alguém tenha atributo. Digamos. Vou te mostrar um pouco, um pouco mais de lógica. O código com isso tem atributos. Vou me livrar disso. Vamos, vamos ver, vamos fazer uma declaração if. Vamos dizer que se P tiver a cor do atributo, tiver uma cor de atributo, então faremos alguma coisa. Na verdade, desculpe, não o atributo de cor, o atributo da cor do ponto de estilo. Não tenho certeza se essa sintaxe exata funcionará, mas vamos consolar o sucesso. Vamos ver o que acontece. Parece que não conseguimos nada. E se nós apenas dissemos estilo? Ainda nada? Talvez precisemos adicionar uma cor. Então, vamos tentar a cor do ponto do estilo p ponto é igual a azul. Ok, então olhe para isso. Ele registrou sucesso porque percebeu que ele tem o atributo de estilo. Vamos ver o que acontece se fizermos a cor do ponto de estilo. Isso não funciona para isso. Portanto, atributos em elementos HTML são essas coisas aqui que você coloca entre aspas que você coloca dentro do elemento. Então eu poderia ver se o hello world tem uma ideia de Hello vindo aqui e dizendo, se, vamos ver, vamos fazer ponto. Podemos fazer p dot get atributo. Digamos que queremos a cor. Vamos definir isso igual a azul. O que isso está fazendo? Diz, obtenha o atributo de cor. Oh, desculpe. Isso não é o que estamos fazendo. Acabei de me espaçar um pouco. Queríamos saber o ID. Se isso fosse olá. Temos o ID do atributo, que está bem aqui. Queremos dizer que se esses atributos são iguais a hello, então console um sucesso. O que ele faz. Se quiséssemos dizer se é igual a adeus, sem sucesso. Você pode ver como isso está funcionando de uma perspectiva de sobrecarga e ver que há muitas possibilidades com a lógica JavaScript onde você pode usar instruções if. Você poderia usar loops. Por exemplo, você pode usar um loop for-e dizer, para números de um a dez, criar esses elementos ou alterar suas cores. Faça todos os tipos de coisas. As possibilidades são basicamente infinitas. Então eu mostrei muitas coisas aqui. Eu recomendaria se, se algo disso fosse confuso, tentasse assistir novamente ao vídeo. Basta passar passo a passo e aprender o que você pode fazer para manipular esses objetos. Mas saiba que uma recapitulação básica, cada elemento tem propriedades, tem centenas ou 800 propriedades. E algumas dessas propriedades têm propriedades dentro delas. Por exemplo, o estilo tem cor, fundo, cor, margem, todos esses tipos de coisas. Você pode acessar aqueles usando essas várias funções. Fora de elementos. Você digita o nome da variável e digita o período. E isso lhe dá todo tipo de coisas. Eu exploraria esses. Se você não sabe o que é, procure-o online e ele lhe dirá a sintaxe. Ele lhe dirá como usá-lo e todas as coisas que você pode fazer com ele. Mas verei vocês no próximo vídeo quando fizermos esse botão, fizermos coisas. Tudo bem. 6. Como criar botões interativos: Neste vídeo, vamos fazer nosso botão fazer algumas coisas legais. Vamos fazer com que ele mude cor e talvez coloque algo no console. Vamos começar. Para tornar as coisas um pouco mais simples por enquanto, vou comentar isso e vou fazer nosso botão. Vou codificar o HTML apenas para tornar um pouco mais fácil de manipular. Tudo bem, temos nosso botão de mudança de cor. Digamos que se eu clicar neste botão, quero que ele mude a cor para azul. Então, o que vamos fazer é que eu preciso criar uma função que, quando ela for executada, mude essa cor. Vamos escrever a função. Vou chamar isso de mudança de cor. Por enquanto, vamos fazer console.log, mudando de cor. Certo. Agora, em nosso HTML, precisamos acionar isso de alguma forma. Em nossa etiqueta de botão. Vamos colocar um atributo chamado onClick. Então você pode obter disso. Mas quando clicamos nele, ele vai fazer alguma coisa. E vamos digitar essa função, mudar de cor, garantir que você tenha o parêntese. Muito importante. Quando clico neste botão, queremos que ele registre a mudança de cor. Se eu abrir o console e clicar nele, mudando de cor, você poderá ver quanto mais eu clico nele, mais ele repete essa mensagem. Então agora vamos fazer algo legal com ele. O que queremos fazer é selecionar o corpo e mudar sua cor. Então vamos dizer que deixe o corpo igual documento ponto. Obtenha elementos por nome da tag, salve o corpo. E lembre-se que temos que selecionar os elementos 0 para acessar o corpo. E fazemos isso porque quando selecionamos tags, ele obtém uma matriz de cada tag desse tipo. E o corpo também faz isso, mesmo que usemos apenas uma tag de corpo. Selecionamos o corpo. E então dizemos estilo de ponto corporal, cor de fundo do ponto é igual a azul. Agora, quando clicamos em nosso botão, acabamos de mudar a cor para azul. Mas se você clicar nele novamente, ele não muda de volta. Por que isso? Bem, se olharmos para o código, estamos apenas dizendo a ele para mudá-lo para azul. Se atualizarmos a página, ela voltará para verde. Mas assim que clicarmos nesse botão, azul. Então, vou te mostrar como fazer alguma lógica para mudá-la de um para o outro. Então, vamos supor que selecionamos essa tag aqui. Vou me livrar disso. Vamos criar uma instrução if. Nós diremos que se a cor de fundo do ponto do estilo de ponto do corpo for igual, certifique-se de que você tenha igual igual ou duplo para que você não seja igual único , definiria como uma variável, defina um valor para uma variável. Queremos um duplo ou triplo igual para garantir que estamos comparando uma qualidade. Você pode procurar a diferença entre sinais de igual duplo e triplo na linha. Se a cor for igual a verde, porque acho que foi o que escolhemos anteriormente. Se for igual a verde , mude-o para azul. Caso contrário, o que significa que a cor de fundo já é azul ou outra coisa. Caso contrário, mude-o para verde. O que isso diz é que ele recebe o elemento do corpo e diz: Ok, se a cor de fundo for verde, mude-a para azul. Se for azul, mude-o para verde porque temos essa declaração else. Então, se não estiver verde, mude-o para verde. Vamos olhar para ele. Lá vamos nós. Estamos mudando entre azul e verde. E toda vez que clicamos nele. Agora, como você pode ver, há muitos textos acontecendo aqui nesta declaração se e aqui, isso foi. Tendência ao longo deste curso. Se você procurar todas essas coisas que criamos, há muitos textos envolvidos. Essa é uma espécie de natureza do JavaScript de baunilha ou apenas JavaScript simples. Uma maneira de reduzir isso é se vamos usar algo várias vezes, por exemplo, essa cor de fundo, podemos definir a cor de fundo igual a uma variável. Poderíamos dizer que deixe cor de fundo igual a cor de fundo do ponto do ponto do corpo . Dessa forma. Podemos manter essa parte de cor de fundo que reduz significativamente a quantidade de código que precisamos. Mas funcionou? Vamos ver. Não funcionou. Vamos ver se há algum erro. Sem erros. Percebi que o problema é uma boa lição de codificação para nós dois. Veja aqui, defino a cor de fundo igual a qualquer que seja a cor de fundo atual. Mas aqui eu estava mudando a cor dessa variável. Agora, essa variável, uma vez que foi dito, é separada do próprio elemento do corpo. Estamos mudando isso, mas não o que queremos estar mudando. E então peço desculpas, cometi um pequeno erro ao explicar isso para você. Essas duas coisas ainda precisariam ser a cor de fundo do ponto do estilo do ponto do corpo. Porque queremos alterar essa cor de fundo original, mas ainda podemos verificar a cor de fundo assim. Usando essa variável, o que melhora a legibilidade na instrução if. Lá vamos nós. Agora conseguimos que ele funcione novamente. Pode haver maneiras de contornar isso se tomássemos mais tempo e investigar isso. Mas você pode estar se perguntando, bem, qual é o benefício de declarar isso aqui em cima? E então isso lá embaixo. Nessa situação, não há muito benefício. Nós definitivamente poderíamos escrever a cor de fundo do ponto do estilo do ponto do corpo aqui. Mas digamos que quiséssemos usar essa cor de fundo em outro lugar. E diga, bem, se a cor de fundo blob, é bom tê-lo abreviado e muito legível porque é importante ter código legível. Você quer ser capaz de olhar para ele e ver o que está fazendo. Isso é uma pequena dica sobre o que podemos fazer com a cor de fundo. Agora, vamos dar um passo adiante e fazer um pouco de console.log. Digamos que isso será azul e este. Enquanto loucura, lá vai você. pontos do console verde. Agora, se abrirmos o terminal, lá vamos nós. Azul, verde, azul, verde. É meio legal. Você pode imaginar todos os tipos de coisas que você faz com isso. Enquanto o aplicativo do mundo real, bem, todos os sites que você acessa basicamente têm botões. E quando você clica lá executando JavaScript, isso está fazendo todos os tipos de coisas legais. Funções de chamada que obtêm dados da Internet que, você sabe, enviam mensagens. Você pode fazer coisas ilimitadas realmente com essa funcionalidade. Então, este é apenas um olhar muito básico sobre isso. E é algo que eu queria compartilhar com você mais cedo quando eu estava falando sobre encurtar seu código usando variáveis, é que há uma variedade do que chamamos de estruturas JavaScript por aí, que são essencialmente alguém pegou JavaScript e fez uma versão dele que tem funcionalidade adicional ou sintaxe mais fácil no código. Isso é chamado de framework. E você deve ter ouvido falar disso, alguns dos nossos jQuery Angular React View, esses são todos frameworks JavaScript. São apenas maneiras diferentes de escrever o código. Cada um deles tem sintaxe diferente, recursos diferentes. Então, se você está tendo esse código abreviado é realmente importante para você, então eu sugeriria procurar uma estrutura. Leva algum tempo para aprender, mas pode ser uma experiência muito gratificante. Muitas vezes, quando você tem um grande site complexo de aplicativos qual você está tentando fazer coisas, com a manipulação do DOM. Pode ficar confuso rapidamente. Quero dizer, você pode imaginar ter todas essas funções e apenas todo esse código escrito aqui. É muito. E essa é apenas a natureza do JavaScript de baunilha ou do JavaScript simples. Mas essa função de mudança de cor. Se eu fosse fazer isso no Angular, por exemplo, pode levar apenas três linhas de código. Quem sabe? Pode ser muito mais fácil fazer as coisas mais rapidamente. Mas isso é, é importante saber essas coisas porque muitos desses princípios de manipulação do DOM que usamos com JavaScript simples são usados nessas outras estruturas. Sei que mostrei um exemplo muito básico de apenas mudar a cor de fundo através desse botão. No próximo vídeo, vou falar sobre o projeto que eu quero que você faça. Isso pode ser realmente gratificante, que pode realmente te ensinar muito. Porque o melhor professor que eu acho que está fazendo isso sozinho. Só está cavando , tentando coisas. Vou falar um pouco sobre isso, mas isso é tudo para este vídeo. Isso é apenas uma recapitulação rápida. Falamos sobre fazer nosso botão fazer as coisas. Então, usamos o atributo onclick e o definimos igual a uma função. E essa função é importante. Tivemos que declarar isso dentro dele. Poderíamos fazer o que quiséssemos. Você sabe, você nem precisa manipular o HTML. Você não precisa manipular a página. Nesta função, ele poderia fazer algo totalmente diferente. Ele poderia calcular matemática. Poderia, há várias coisas. Mas, basicamente, selecionamos os elementos e fizemos uma instrução if para alterar a cor dependendo da cor de fundo que estava definida. Certo. Vejo vocês no próximo vídeo. 7. Projeto/conclusão: Tudo bem pessoal, vocês chegaram ao último vídeo deste curso de manipulação do DOM. Vocês deveriam se orgulhar de si mesmos. As habilidades que você aprendeu aqui serão muito importantes em qualquer desenvolvimento web que você faça. E realmente apenas melhore seu conhecimento de codificação em geral. Essas são coisas que realmente me fascinam que eu gosto e espero que você tenha gostado também. Para ajudá-lo a aproveitar um pouco mais, para ajudá-lo a aprender mais. Vou falar sobre o projeto um pouco agora. Para este projeto, é muito simples. Eu só quero que você explore, explore todas as funções que você possa encontrar qualquer coisa que pareça interessante para você. Quero que você experimente. Se você tem uma ideia de algo simples que você quer fazer, Ei, se eu clicar neste botão, quero alterar o texto na página para algo. Ou vou calcular alguma matemática. Você pode fazer uma calculadora básica ou realmente o que quiser. Quero que você experimente , explore funções, use os recursos do código VS que eu ensinei a você, bem como as Ferramentas do Desenvolvedor do Chrome para visualizar os atributos, para selecionar as coisas que você deseja alterar. Há tantas coisas que você pode fazer. Você pode até tentar fazer uma página da Web completamente fora de me escapar completamente com elementos criados por JavaScript sem HTML ou CSS codificado. Isso pode ser um desafio legal. Mas realmente eu só quero que você se divirta. Quero que você explore e compartilhe suas criações com outras pessoas. Se você aprender alguma coisa, mostre a outra pessoa. Eu acho que tomar o tempo para investigar isso e eu não aprendi um pouco e compartilhei seu sucesso com os outros está indo, só vai se sentir muito bem. Espero que vocês tenham gostado deste curso. Espero que você me leve neste projeto e experimente por 15 minutos. Tente manipular objetos, tente fazer algo legal com manipulação de JavaScript e DOM. Se vocês gostaram deste curso, por favor, confira meus outros cursos no Skillshare. Eu tenho um em Angular e componentes, serviços, todo tipo de coisas, roteamento. Há um ótimo curso Angular lá. Eu recomendo ir conferir e publicarei mais aulas espero que em breve no futuro. Então, por favor, confira também e compartilhe-os com seus amigos. Isso poderia realmente se beneficiar desse conhecimento. Mas até lá, Meu nome é Taylor e foi um prazer ser seu instrutor. E desejo-lhe felicidades.