Manipulação JavaScript do DOM (Document Object Mode) | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Manipulação JavaScript do DOM (Document Object Mode)

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

15 aulas (1 h 36 min)
    • 1. Promo DOMa

      2:42
    • 2. Introdução ao trabalho com o JavaScript e DOMs

      2:54
    • 3. O que é o DOM

      6:46
    • 4. Modelo de objeto de documento no JavaScript

      5:50
    • 5. Getty

      6:56
    • 6. Elementos de JavaScript DOM em

      6:34
    • 7. Javascript os dados de objeto de documento

      5:22
    • 8. atributos de estilo de atualização em JavaScript usando o DOMs

      5:48
    • 9. Javascript

      5:36
    • 10. Listeners do mouse no JavaScript

      7:32
    • 11. Adicione a JavaScript

      7:28
    • 12. Listagem de eventos de eventos de

      7:17
    • 13. Mais de seleção de elementos

      6:03
    • 14. Javascript criando novos elementos

      6:27
    • 15. DOMe e formulário crie uma validação de formulários

      13:01
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

208

Estudantes

--

Sobre este curso


Manipulação em JavaScript do modelo de objeto de
DOS

Aprender como interagir com o DOM, vai começar rapidamente com mais interação em suas páginas

O modelo de objeto de documento

Elementos estão na página HTML de are pelo navegador. Motor do JavaScript no navegador no e crie representações os elementos como objetos de JavaScript Qual por sua de em que você vai dar o desenvolva trabalho com o céu é o limite com o que você pode fazer neste momento. Você pode se comunicar com esses objetos usando o JavaScript e em depois You e manipulá-los. Qualquer mudança que você vai ser visível na página da web.

Use JavaScript para selecionar elementos do seu código de HTML. Todos os elementos da página na web estão representados no DOM. Modelo de objeto de documento. Aprender para usar melhor o DOM, vai permitir que você crie interações mais avançadas de usuários e de atualizar de forma de a ser

Veja como é fácil selecionar elementos e tornar o interativo.

Selecione qualquer elemento do seu HTML e dê vida com JavaScript.

A partir de um instrutor com mais de 15 anos de experiência de desenvolvimento de web do mundo real, aprenda a usar o DOC para seus projetos de web.

Cada elemento é um objeto de elementos, que contém detalhes sobre o objeto. O DOM é como uma porta para acessar toda essa funcionalidade que já está lá. Javascript dá a você de abrir essa porta e fazer coisas incríveis em seu site.

Como selecionar elementos do seu
HTMLUpdate em HTML em

Adicione fatores de evento.
triggers.Style seus elementos de forma
dinâmica

Estou aqui para ajudar você a criar seus próprios sites e pronto para responder a qualquer pergunta que você possa ter.

Javascript é o mais importante em habilidades de demanda e aprender como usar o JavaScript vai ajudar a separar você da multidão.

Quer saber mais, o que você está esperando para dar o primeiro passo. Junte-se para começar a aprender como você também pode criar páginas DINÂnICAS e INTERATIVAS no seu site de site de hoje.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Promo DOMa: Manipulação JavaScript do amanhecer. Esse é o objeto do documento. Comece a criar conteúdo dinâmico e interativo para realmente ajudar suas páginas da Web. Aprender a interagir com Dom irá ajudá-lo a começar rapidamente com MAWR Interaction com seus modelos de objeto de página da Web documento é um modelo de seu documento HTML representado como objetos JavaScript. Os elementos estão dentro do estágio HTML renderizado pelo navegador. Mecanismo JavaScript, em seguida, cria representações desses elementos como objetos JavaScript, que por sua vez dá a você e ao desenvolvedor um monte de informações para trabalhar com. Literalmente, o céu é o limite. Você pode se comunicar com esses objetos usando JavaScript em, em seguida, manipulá-los e atualizá-los e alterá-los naturais. Todas as alterações feitas serão visíveis na página da Web. Use JavaScript para selecionar elementos da sua idade ao frio. Todos os elementos da página da Web são representados dentro da porta. Aprender a utilizar melhor o Saddam permitirá que você crie interações mais avançadas do usuário e atualize a dinâmica do conteúdo. Veja como é fácil selecionar elementos e torná-los interativos. Selecione qualquer elemento para mais agente html posse e trazê-lo à vida via script Java. Este é de um instrutor com mais de 15 anos de experiência em desenvolvimento na Web no mundo real. Saiba como usar o amanhecer para seus projetos da Web. Cada elemento é um objeto elemento, que contém detalhes sobre esse objeto. Dong é como uma porta de entrada para acessar toda essa funcionalidade que já está lá dentro do seu casaco Web. JavaScript dá-lhe a capacidade de abrir essa porta e fazer coisas incríveis acontecerem dentro do seu site. Saiba como selecionar elementos de seus elementos de atualização HTML e elementos HTML em tempo real. No evento aciona o estilo. Seus elementos lêem e validam dinamicamente entradas e muito. No final do curso, você terá as habilidades e saberá como manipular o amanhecer dentro do seu site. Estou aqui para ajudá-lo a aprender a criar seus próprios sites e pronto para responder a quaisquer perguntas que você possa. JavaScript é a habilidade mais procurada e aprender como usar JavaScript irá ajudá-lo a se separar da multidão. Quer saber mais? O que você está esperando? Dê o primeiro passo, juntou-se agora e comece a aprender como você para país páginas web dinâmicas e interativas dentro do seu site hoje 2. Introdução ao trabalho com o JavaScript e DOMs: Meu nome é Lawrence, e serei seu instrutor para este curso. Criei este curso para ilustrar todas as coisas incríveis que poderiam ser feitas usando JavaScript e interagindo com o amanhecer. Esse é o modelo de objeto de documento JavaScript. Manipulação do amanhecer Comece a criar conteúdo dinâmico e interativo para realmente dar vida às suas páginas da Web. Aprender a interagir com o amanhecer irá ajudá-lo a começar rapidamente com a interação mawr dentro de suas páginas da Web Modelo de objeto de documento é um modelo de seu documento HTML representado como objetos JavaScript. Os elementos estão dentro da página HTML renderizada pelo navegador. Mecanismo JavaScript, em seguida, cria representações desses elementos como objetos JavaScript, que por sua vez dá a você e ao desenvolvedor um monte de informações para trabalhar com. Literalmente, o céu é o limite. Neste ponto, você pode se comunicar com esses objetos usando JavaScript e manipulá-los e atualizá-los e alterá-los no Iraque. Todas as alterações feitas serão visíveis na própria página da Web. Use elementos de seleção JavaScript do seu código HTML. Todos os elementos da página da Web são representados dentro do cão. Aprender a utilizar melhor o Saddam permitirá que você crie atrações mais avançadas do usuário e atualize o conteúdo dinamicamente. Veja como é fácil selecionar elementos e fazê-los interagir. Selecione qualquer elemento de dentro de sua página HTML e dê vida a ele via JavaScript. Cardos de um instrutor com mais de 15 anos de experiência em desenvolvimento na Web no mundo real. Saiba como usar o amanhecer para seus projetos da Web. Cada elemento é um objeto elemento, que contém detalhes sobre esse objeto. Dawn é como uma porta de entrada para acessar toda essa funcionalidade que já está lá dentro do seu Web court. JavaScript dá-lhe a capacidade de abrir essa porta e fazer coisas incríveis acontecerem dentro do seu site. Saiba como selecionar elementos de seus elementos de atualização HTML e elementos HTML em tempo real. No evento dispara estilo. Seus elementos lêem e validam dinamicamente entradas em uma garrafa inteira. No final do curso, você terá as habilidades e saberá como manipular o amanhecer dentro do seu site. Estou aqui para ajudá-lo a aprender a criar seus próprios sites e pronto para responder a quaisquer perguntas que você possa ter. JavaScript é uma habilidade mais procurada, e aprender a usar JavaScript irá ajudá-lo a se separar da multidão. Quero saber mais. O que você está esperando? Dê o primeiro passo. Juntou-se agora e comece a aprender como criar páginas web dinâmicas e interativas dentro do seu site hoje? 3. O que é o DOM: nesta lição. Quero fazer uma rápida introdução do Dom como podemos ver o Dom, o que é e como podemos começar a interagir com o amanhecer. Então, o que é o amanhecer? É abreviação para modelo de objeto de documento, e este é um modelo de objeto que é baseado em todos os elementos HTML. Está aqui do lado esquerdo. Eu tenho meu editor aberto, e eu só tenho uma página realmente básica da Web com vários elementos aqui. Então eu tenho algumas dibs HTML. Eu tenho um pouco de texto aqui dentro e assim por diante. E assim todas essas informações, quando o navegador vê e interpreta, renderiza A com esse código HTML, ele realmente cria objetos de documento dentro do JavaScript e estes acessíveis via JavaScript essencialmente, o que o nível superior do amanhecer é, este vai ser as janelas fora do objeto janela, e nós vamos estar mostrando através do Lexx algumas lições também algumas funcionalidades embutidas que já estão disponíveis dentro do objeto window. Então, a fim de realmente acessar e ver o que está contido dentro do dom, podemos produzi-lo dentro do nosso javascript. Agora, quando se trata de javascript, temos várias opções de onde podemos colocar nossas tags de script para que possamos colocar nossas tags de script . Então, às vezes, você pode ver tags de script aqui na parte superior, e às vezes você pode ver tags de script aqui na parte inferior. E quando se trata do DOB, isso realmente importa se o seu lugar nas tags de script é que queremos ter certeza de que este conteúdo está acessível antes de tentar acessá-lo. E o que isso significa essencialmente é porque os navegadores, na verdade, quando ele está renderizando esse código HTML, ele também está construindo esse Dom. E até que todo o código HTML seja processado, nós realmente não temos o conteúdo completo do amanhecer. Então, temos coisas mordidas como padrão. Então nós temos o objeto janela para que eu possa ver que quando eu faço o diretório do console e se eu listar fora da janela e se eu fizer o diretório do console novamente e um documento jornalístico e o que isso vai fazer é isso vai me dar um item dentro do meu log do console que eu posso abrir e eu posso clicar através, e eu posso realmente ver todas as diferentes partes do dong. Então nós temos a janela aqui em cima e caminho. Veja, nós temos um monte de funções diferentes que estão disponíveis por padrão nesta janela. E então, é claro, todos esses ar acessíveis via javascript. E à medida que trabalharmos nas próximas lições, vou mostrar-vos isto com muito mais detalhes. E como você pode ver, há realmente muita informação aqui. E há um monte de coisas que está contido eso. Trabalharemos com alertas e trabalharemos com avisos e essas funções de ar embutidas. Então temos que fazer é chamá-los com o objeto de janela, e então temos acesso e que executa a funcionalidade que está contida dentro do seu. Então este era apenas o objeto do Windows. E agora temos o objeto do documento e vemos que temos muita informação contida lá. Então isso, na verdade, porque nós carregamos aqui no topo, nós não estamos realmente obtendo acesso a todo o conteúdo do corpo, e eu tenho tags de script na parte inferior, então eu vou mostrar rapidamente o que acontece quando eu carrego o documento na parte inferior também. Então vamos recarregar esta página e ver que agora estamos produzindo a janela. O documento e nós também estamos produzindo um segundo documento aqui em baixo. E a diferença aqui é que nós também temos o corpo porque neste ponto, uma vez que estamos colocando o roteiro aqui, nós tivemos uma oportunidade. Carregue o conteúdo do corpo dentro do documento também, e podemos ver algumas dessas informações contidas no corpo. Então nós temos o primeiro filho lá, e assim por diante. Nós temos todos os nós diferentes, que novamente nós vamos olhar através de mais detalhes. Então isso foi apenas para demonstrar por que precisamos colocar o dom na parte inferior e deixar todo o conteúdo do corpo carregar, ou podemos iniciar uma chamada de função. Podemos adicionar algo chamado ouvinte de eventos, qual , é claro, vamos falar em lições posteriores também. E se adicionarmos um novo evento, ouvinte aqui. Então talvez nós vamos apenas adicioná-lo aqui, é o topo. Então eu vou fazer a janela. E, claro, vamos entrar em mais detalhes sobre isso. Ouvintes à medida que progredimos através do próximo conjunto de lições. Eso O que estamos fazendo é que vamos simplesmente ouvir a carga do dedo da janela, e uma vez que ele carrega, então nós vamos executar a função. E basicamente, o que isso vai fazer é que isso vai nos dar a capacidade de controlar o conteúdo do corpo também . Então mostrar-lhe o que acontece agora quando eu sair e se eu refrescá-lo e veremos aqui dentro. Então agora nós tivemos a capacidade de carregar o corpo e todo o conteúdo do corpo porque nós adicionamos neste ouvinte evento e isso realmente deu uma estabilidade para ver o conteúdo do corpo. Então, basicamente, o que aconteceu aqui? Enquanto o ar Browns atravessava o código, ele acertou a tag do script. Ele acrescentou, Neste evento, ouvinte, que essencialmente é um gatilho que está esperando por algo acontecer e o que ele está fazendo está esperando a janela para carregar. E uma vez que a janela termina de carregar, então sabemos que temos acesso ao documento, nós bem, nós bem, e uma vez que o ouvinte de eventos é acionado, então nós somos capazes de executar através da funcionalidade. Mas durante a maior parte do curso. Então esta é apenas uma maneira de acessar as informações do dormitório quando você coloca o código no topo da sua página da Web. E, é claro, existem diferentes cenários quando você está desenvolvendo, então há casos em que você pode querer colocá-lo no topo. E se você tiver um monte de conteúdo de xixi em HTML, como imagens carregando, então você pode querer um lugar no topo. Mas é mais do que provável e prática recomendada geralmente colocar essas tags de script na parte inferior , e especialmente quando você está interagindo com o conteúdo do Dylan que você deseja carregar na página. Agora que passamos por tudo isso com o DOM, estamos prontos para começar a trabalhar com ele. Assim, as próximas lições serão mostrando como trabalhar com o Dom e criar conteúdo interativo dinâmico dentro de sua página da Web, usando JavaScript, usando JavaScript, acessando o Dom e manipulando os burros. Então tudo isso está chegando no próximo conjunto de lições 4. Modelo de objeto de documento no JavaScript: no próximo conjunto de lições, vamos estar olhando através do modelo de objeto de documento. E isso também é conhecido como o Amanhecer. Então, vamos olhar para o que é o amanhecer e como ele funciona dentro do JavaScript. Assim, o Dom e HTML juntos nos permitem acessar qualquer um dos elementos dentro de nossa página HTML e usando JavaScript, somos capazes de manipular esses elementos, atualizá-los, criar interação e também obter conteúdo de qualquer um dos elementos dentro do nosso código HTML. Essencialmente, o que o Dom faz é que ele torna muito, muito fácil acessar elementos HTML. Então vamos abrir nossos editores e vamos dar uma olhada no amanhecer. Então o que eu tenho aqui é realmente um site básico, e eu não precisava criar algum código HTML para este resolver lições porque nós precisamos ter algo para interagir. Então eu criei uma página web muito básica. Ele acabou de ser renderizado aqui no lado direito, e eu também vou estar usando as ferramentas Google Chrome surdos para que possamos abrir isso em janelas, enfraquecer o controle de imprensa, mudar I e abri-los. Ele também está disponível para Max, então, enquanto você estiver usando o Chrome, você terá acesso às Ferramentas de Desenvolvimento. Coloquem nossas ferramentas surdas. Talvez façamos isso maior quando abrirmos nossas ferramentas surdas. Vemos que inicialmente aqui sob elementos, temos todo o código-fonte que estamos olhando dentro da nossa página web. Mas também temos nossas fontes aqui para que possamos obter mais informações sobre a fonte e o que está incluído nos recursos do tribunal voltando a elementos. Então, para este exemplo aqui, eu só vou ter que arrastá-lo para fora um pouco e nós podemos ver que nós temos estilos computados. Então nós temos o nosso modelo de blocos para CSS. Nós temos ouvintes de eventos, então estes são realmente objetos dom. Então o que ele vai fazer é realmente ouvir. Então, se tivermos algum evento ouvintes configurados em javascript vai vê-los lá. Nós também temos esses pontos de quebra dom e nós temos propriedades e nós abrimos propriedades como nós abrimos o HTML. Temos um monte de informações aqui, então temos tudo, desde html a menor até derreter no texto dela. Nós temos o nome espaço que você é. Eu. Temos um monte de ouvintes de eventos aqui e gatilhos. Nós temos nosso HTML externo e assim por diante, então eu tenho um monte de informações que nós temos acesso. E essencialmente, isso é o que olhamos quando acessamos a cúpula, e o que o Dom faz é que nos permite obter acesso a elementos dentro da página da Web, e o dom é realmente carregado quando a página da Web baixa e é o navegador que cria a aurora. Ele cria todos os elementos da Web como um objeto e separa-os em um modelo fácil de gerenciar e acessar, que é o dom. E, essencialmente, é como uma construção de árvore. Então é uma construção de vários objetos com maior ele assim começando no topo com o HTML. Começando com seu primeiro elemento e trabalhando todo o caminho para baixo. Então estes a cabeça, o corpo estão apenas abaixo do HTML, e nós podemos trabalhar todo o caminho para baixo e acessar qualquer um dos objetos dentro da cúpula que está disponível. Cada um desses elementos tem seu próprio conjunto de propriedades, então quando abrimos isso em ferramentas de profundidade, podemos ver sempre que estamos clicando no botão um. Temos propriedades lá, e tem seu próprio conjunto de propriedades. Então seus próprios manipuladores de eventos, ele tem seu próprio inter html em seu texto e apenas um monte de informações aqui que nós temos acesso. E para mais definição, sobre o Dom. Há um na Wikipédia aqui, e ele também dá a você um doc uma ilustração aqui da forma como o Dom funciona. Então nós temos a janela como o contêiner externo. Então este é também o modelo de objeto de uma janela. E é aqui que, quando estamos escrevendo alertas JavaScript, este é o lugar onde todas as funções era sentar e localização do histórico. Mas, em seguida, quando se trata do amanhecer, então esta é realmente a página da Web e o conteúdo dentro dessa página da Web em si. Então temos alguns exemplos aqui de links, âncoras, formulários e um monte de elementos diferentes. Então vamos abrir nosso editor e o que eu quero fazer primeiro é listar o cachorro no Cônsul . Vamos usar o registro do cônsul, mas vamos usar o console D I R. Então isso vai nos dar uma lista de diretórios e listar tudo o que está contido no documento. Então, novamente, este é o objeto de documento e nós saímos e atualizamos a página. Abra a nossa consola. Vemos que temos um detalhamento completo de todo o conteúdo do documento. Então, incluindo o corpo, e então podemos descer a partir daí e podemos selecionar qualquer um dos elementos que temos Children. Então temos todo o caminho para baixo. Então, todos os antepassados e descendentes que estão disponíveis e temos acesso a eles enquanto navegamos e selecionamos elementos que queremos aplicar JavaScript e interações dio. Então eu vou mostrar a vocês como fazer isso nas próximas lições. E eu só quero apresentar o que é o amanhecer, como você pode ter acesso a burros e o que você pode ver dentro da própria cúpula quando você está usando ferramentas surdas. Então, a próxima lição vamos começar a interagir com o Dom e criar algum javascript interativo. Então, está chegando na próxima lição. 5. Getty: Interagindo With the Dawn é uma das minhas partes favoritas sobre JavaScript. Ele abre a porta Teoh um monte de funcionalidade via JavaScript, e a primeira coisa que precisamos fazer para começar a interagir com esses elementos é selecionar elementos, e então podemos. Uma vez que selecionamos os elementos que queremos usar, temos a capacidade de obter o conteúdo do elemento e manipular o elemento. Informações, atributos, estilo e assim por diante. E o que o JavaScript faz é que nos dá a capacidade de alterar esse conteúdo nos elementos HTML que nos permite alterar. CSS styling e elementos HTML também foram capazes de criar interação para configurar eventos e fazer com que esses eventos acionem a execução de código JavaScript. Nós também pode adicionar e excluir HTML oh elementos. E podemos realmente fazer muito através do Dom e JavaScript. Então vamos começar e criar alguma interação dentro da nossa página da Web. Então abra o seu editor e dentro do nosso editor. Então nós temos alguns html realmente básico aqui, e a primeira coisa que precisamos fazer é ser capaz de selecionar esses elementos. Então nós temos nossas marcas corporais aqui. Temos alguns mergulhos aqui. Então eu deveria atualizar isso para ser um corpo com o porquê com um minúsculo. Por quê? Então é consistente com o resto do tribunal. E a primeira coisa que precisamos fazer é selecionar o elemento com o qual queremos atrair . Então nós, idealmente, queremos fazer estes como botões reais e realmente torná-los clicáveis. Então é isso que queremos fazer nesta lição. E eu deveria fazer uma atualização rápida aqui quando estamos usando CSS. E se quisermos acessar a classe, tudo o que temos que fazer é fazer um botão de período. E também temos várias maneiras entorpecidas de acessar nossos elementos via CSS. Então, se você está familiarizado com CSS, algumas dessas coisas vão fazer muito sentido para você quando começarmos a acessar e selecionar elementos. Então, temos diferentes maneiras de selecionar elementos enfraquecer selecionados através do nosso RD enfraquecer, selecionados via tag, e nós também podemos atravessar para baixo para que possamos selecionar um pai e, em seguida, selecionou os filhos do pai e mover todo o caminho para baixo para que poderia olhar para os descendentes e fazer seleções dessa forma também. Como se estivéssemos selecionando elementos particulares. Então, se eu quisesse selecionar este botão em CSS, Eu faço um hash tag do que eu iria selecionar o botão um. Então eu não gosto do nome, e então eu entraria em algumas propriedades. Então, se eu quiser definir a cor de fundo ou algo assim, então nós podemos realmente facilmente fazer isso uma vez que nós realmente fizemos uma seleção de nosso elemento. E quando eu o atualizo, vemos que temos as mudanças ocorrendo. Então, é a mesma idéia quando estamos selecionando elementos usando JavaScript. Então, se quisermos selecionar esse mesmo elemento ou se quiser selecionar um diferente, tudo o que temos a fazer é identificá-lo dentro do código HTML. E uma das maneiras mais fáceis de identificá-lo é simplesmente agarrá-lo e um sinal de valor muito variável para ele, então nós vamos fazer e vamos agarrá-lo através do documento I D. Então, nós estamos selecionando esse objeto de documento e em JavaScript novamente, quando selecionamos objetos que podemos selecionar para baixo em particular em anexado métodos específicos para esses objetos e o que vamos estar usando é get elemento por I d. quando selecionamos objetos que podemos selecionar para baixo em particular em anexado métodos específicospara esses objetos e o que vamos estar usando é get elemento por I d. então sempre fazer aqui é que temos que configurar que eu d e identificá-lo. E então o que acontece agora é que se eu console, desconecte a minha variável de saída e apenas salve isso e atualize-a abriria nosso console para que você possa ver todas as informações contidas aqui dentro. Então nós vamos para o console e nós realmente vemos que ele está apenas selecionando essa informação elemento. Então, se fizermos em vez de registro de documento, se fizermos diretório de documentos, também nos dar uma idéia melhor do conteúdo deste elemento particular e todas as interações dom que podemos ter Então nós temos são a mesma coisa que nós olhamos , onde temos todos esses eventos que podemos anexar a ele podemos atravessar para que possamos ver o próximo irmão. Podemos ver os pais. Podemos ver. O primeiro filho é muita informação que podemos obter aqui. Então, um que vamos olhar primeiro é olhar para este texto interno ou html interno possamos ver que ele contém exatamente o mesmo conteúdo que está disponível dentro de lá. Então, agora que atribuímos uma variável para lá, podemos atualizar esse valor fazendo minha saída e em seu HTML e podemos aplicar um novo valor a ele. Então, por enquanto, vamos digitar novo botão e atualizar isso e vemos que imediatamente atualizamos o conteúdo aqui. Então, mesmo quando entramos em nosso código HTML, vemos que o conteúdo foi atualizado. Então todo esse conteúdo é atualizado via JavaScript. Então, a primeira corrida passa por ela. Ele define o conteúdo no HTML. Quando se trata do JavaScript que diz, OK, estamos recebendo este elemento por I d. Estamos colocando na nova variável. Minha saída vai conter todas essas informações de objeto, e isso nos dá a capacidade de interagir com esse objeto e definir esse HTML interno. Agora, esta é a mesma coisa que podemos fazer com o texto interno. E a diferença entre inter texto e inter html é, é claro, que o texto interno exibe todo o seu conteúdo como texto e se fizermos HTML interno e atualizá-lo, podemos ver que ele realmente passa e renderiza-o como HTML. Então nós temos essa linha quebrar que PR amarrado com lá dentro, e ele está realmente tornando-o para fora como uma nova linha. Então, na próxima lição, vamos ver como fazer seleções de outras maneiras. Talvez não queiramos usar ideias. Não temos que assinar. Dei todos os elementos. Talvez queiramos usar aulas, então vou te mostrar como fazer isso na próxima aula. 6. Elementos de JavaScript DOM em: Então, na última lição, analisamos como podemos começar a selecionar elementos da nossa página HTML. Agora vamos olhar para formas alternativas de selecionar elementos. Então sabemos quando estamos usando CSS weaken, selecioná-lo por uma classe onde você pode selecioná-lo por I d. Podemos selecioná-lo por tag. Então, também temos as mesmas capacidades quando se trata de javascript e seleção desses elementos. E é por isso que quando você está criando código HTML, é importante. Teoh, considere como você vai usar idéias, como você vai usar aulas e como você vai identificar elementos que vão precisar dessa interação, bem como precisa de estilo. Então, nesta lição, vamos ver como podemos obter os meus botões e eu vou selecionar o documento. E desta vez o nosso método vai ser diferente. Vamos usar elementos “get” pelo nome. E notamos que isso é plural, que elementos. É plural porque é assumido que têm vários elementos, e na verdade vai ser obter elementos por nome de classe, porque nós vamos ser identificá-los através do nome da classe e a classe de identificação. O nome é B t n e o que eu vou fazer agora é um registro de console A. Toda essa informação para fora porque a forma como isso vai ser apresentado vai ser um pouco diferente. Porque, lembre-se, aqui nós temos a possibilidade de ter vários itens retornados para diluir este objeto, enquanto que nós estamos identificando por I d. Nós sabemos que nós só temos um I d por página desse valor em particular. Então vamos atualizar nossa página vai abrir e inspecionar e ver o que está acontecendo aqui no Cônsul. E isso nos dará uma idéia melhor do que temos disponível para trabalhar no dedo do pé. Então aqui temos essa coleção html, e aparentemente temos dois itens nessa coleção. Então você tem um zero e um, e nós também temos um Bt e um e um BTM, também. Então aqui está identificando-os através do I.D. e aqui está identificando-os, assim como Aziz encomendou itens dentro do objeto. Então temos nosso primeiro item em nosso segundo item listado lá. Então abrimos isso de novo. Temos toda aquela lista de informações lá. Então a questão realmente é como nós os diferenciamos e como nós os libertamos? Eso enfraquecer, Aplicar o que aprendemos antes em JavaScript quando se trata de acessar conteúdo, como conteúdo de uma matriz e se quiser acessar, talvez não queremos acessar o 1º 1, mas queremos acessar o 2º 1 Podemos fazer algo como este, onde só estamos olhando para o segundo item da coleção e vemos aqui onde nós o temos identificado lá. E ele está chegando da mesma forma que o conteúdo do elemento get por I d. fez porque já estamos cientes de que temos dois itens lá quando olhamos para o nosso código HTML , e normalmente você quer manter essa dinâmica para que você não queira um código rígido de um número. Mas isso é apenas para fins de demonstração, porque eu estou ciente de que eu tenho que separar botões aqui, um zero e um, e é assim que eu estou acessando eles. Mas normalmente você quer manter isso dinâmico o suficiente para que, se você fizer, você não precisa sempre contar todos os diferentes elementos para poder identificá-los. Então, outro peso quando se trata de CSS toe realmente acessar um elemento específico é apenas usar o nome da tag. Então aqui, se quisermos dar acesso a qualquer um dos dibs e talvez queiramos definir uma cor de fundo para eles. Então, se você quiser fazer este tipo de cor de fundo diria que nós vemos que agora, todas essas dibs obter essa informação e nós podemos, por sua vez, fazer a mesma coisa com JavaScript onde podemos acessar minhas tags. E este vai ser documentos porque estamos sempre acessando esse objeto de documento. E lembre-se, aqui em cima é onde temos uma lista de todas as informações de documentos que temos acesso e isso nos dá uma idéia melhor para encontrar para nossa seleção onde estamos selecionando sobre o que estamos selecionando. Então esta outra vez, isto vai ser plural, e vai ser obter elementos pelo nome da tag, e a tag que vamos selecionar vai ser uma div, e eu vou fazer a mesma coisa aqui onde nós consola logout e Vou anotar o Cônsul todo o objeto de etiquetas. Então, refresque-o. Vemos que temos relativamente a mesma coisa que tínhamos nas aulas onde temos três itens aqui dentro da coleção, e então podemos identificá-los separadamente e escolher o que quisermos usar. Então, para este caso, eu vou acessar exatamente o mesmo que nós fizemos nos meus botões para que tenhamos alguma consistência aqui na saída. Então eu vou acessar o número do item com um índice de um s. Oh, isso é semelhante a um aumento onde ele começa 012 Atualizá-lo e podemos ver que agora nós somos capazes de retirar esse elemento particular e acessá-lo e atualizar o conteúdo conforme necessário JavaScript. Assim, cada página web já tem algum padrão embutido em informações. E podemos ver tudo isso quando chegamos aqui dentro do nosso objeto de documento. Então vemos que temos as meninas. Também temos títulos para a página da Web. Eso Talvez este não é construído em, mas a maioria das páginas da Web irá definir um título para que possamos ter acesso ao seu para que possamos ver que literalmente temos acesso a qualquer um desses pedaços de informação sobre a página web. E assim que tivermos acesso a ele. Uma vez que possamos identificá-lo, então podemos escolher e manipular. Então, estamos mostrando a você mais sobre isso e como escolher todas essas informações padrão que já estão disponíveis na página da Web que você também pode utilizar em seu JavaScript. Então, vamos mostrar-lhe isso na próxima lição. 7. Javascript os dados de objeto de documento: nas últimas lições, analisamos como construímos elementos dentro de nossa página da Web e adicionalmente selecioná-lo por i d Selecionando por nome de classe selecionando por nome de tag. Podemos até isolar esses elementos com consistência ainda maior. E assim como fazemos com CSS onde temos vários tipos diferentes de seletores, também podemos ter seletor de consulta que podemos usar dentro do nosso JavaScript também. Então eu vou chamar isso de meu SCL para seleção. E novamente, estamos acessando esse objeto de documento. E é aqui que temos tudo isso contido. Então o que vamos usar vai ser seletor de consulta, tudo e o que isso vai fazer? Será que isso vai retornar todos os nós dos elementos que são descendentes do elemento que estamos procurando? Eso, consulta, seletor tudo e talvez aqueles que vamos selecionar serão dibs com um fim de BT, e eu sei que somos capazes de selecionar isso através do nome da classe lá em cima. Mas isso vai ser apenas outra maneira, caso você tenha vários dibs que tenham a classe B T final. Então talvez de um span bt n e você não quer incluir isso. Então mostre como tudo isso funciona. Então listando o meu C l e devemos chegar a itens devoluções. Então, apenas o dedo do pé, certifique-se de que vamos atualizá-lo. Dê uma olhada no console e vemos que temos dois itens listados dentro dos nós retornados . Então, se selecionarmos o 2º 1, obteremos exatamente a mesma informação que fizemos nas lições anteriores lá. Então nós também tínhamos olhado para como podemos atualizar o HTML interno. Então vamos dizer que eu quero alterar essa saída e eu quero atualizar saída para ser o mesmo que o título da página da Web. E notamos que dentro daqui dentro do objeto do documento, temos uma lista de título. Então isso vai ser muito fácil de dilatar. E esta é uma daquelas coisas incríveis com javascript que é tão fácil de interagir . Então, primeiro de tudo, eu quero fazer documento ainda elemento por D. E eu vou selecionar esse elemento com a idéia de saída eu vou atualizar o HTML interno dele, e eu vou igualar isso para documento. E aqui vai ser muito simples porque isso já está contido no objeto. Então eu poderia igualá-lo ao título do documento. Então vamos ver o que acontece aqui quando eu atualizo a página e estou tentando espaçar isso . Então eu sou capaz de ver essa linha completa de código lá. É quando o atualizamos. Vemos que temos o mesmo título aqui em cima, e preenchemos o elemento com o ID de saída com o mesmo conteúdo que tínhamos disponível dentro do título. Agora isso é a mesma coisa para que possamos selecionar qualquer pedaço de conteúdo dentro do documento. Eso Nós também temos o U R L Então, se eu atualizá-lo, podemos ver Você é Earl e assim por diante. Então nós podemos literalmente apenas quando eu abri o console, qualquer pedaço de conteúdo contido dentro desse console dentro desse documento nós temos acesso a Então nós temos base você é que nós podemos usar. Podemos acessar o conjunto de caracteres. Então, se você quiser escrever o conjunto de caracteres em que um acabou um pouco longo, mas como você pode ver, eu Você pode simplesmente escolher qualquer um desses valores. Então, qualquer coisa que queira acessar aqui, você tem acesso a ele. Então, se você quiser obter o domínio, mesma coisa, você só tem que atualizar o objeto do documento. E temos o domínio listado lá. Além disso, só tirando esse conteúdo. E, claro, todas as variáveis que temos em JavaScript podemos produzir essas. Podemos fazer manipulações com, hum, hum, através de funções e assim por diante dentro do nosso tribunal JavaScript. Então, também temos mais funcionalidades incorporadas que estão disponíveis no DOM porque temos a capacidade de definir coisas como o código-fonte. Eles também têm a capacidade de atualizar o estilo e muito mais. Então, na próxima lição, vamos dar uma olhada na nossa página web e vamos estar atualizando alguns dos estilos. Talvez eu não goste desta cor de azul-petróleo para o botão. Eu coloquei no estilo. Bem, eu posso usar javascript para sobrescrever isso e a mesma coisa com a imagem. Talvez eu não goste desta imagem e eu quero que a imagem mude e dentro das próximas lições também vão mostrar como acionar eventos através do DOM e que irá criar essa interação onde clicamos em algo e algo muda. Então tudo isso está chegando no próximo conjunto de lições. 8. atributos de estilo de atualização em JavaScript usando o DOMs: Então esta lição nós vamos fazer algumas atualizações para o nosso código real, e nós vamos atualizar o estilo, bem como talvez a fonte da imagem aqui. Então esta é identificada como minha imagem. Então, a primeira coisa que queremos fazer é que queremos selecionar esse item específico e não vamos configurá-lo como uma variável onde ele vai simplesmente fazer um documento, obter elemento por i d. e, obter elemento por i d. em seguida, identificar esse elemento para que um é chamado minha imagem e nós podemos obter essa informação fonte que está disponível para a imagem para que possamos realmente acessar os atributos porque atributos também é um objeto que está contido dentro da minha imagem. Então, apenas para ilustrar isso melhor, talvez o que precisamos fazer é o registro do console, não informações, e dar uma olhada mais de perto no que está disponível para o nosso acesso. Então, quando eu atualizo isso e eu não estou usando Lauren pixel aqui, então ele está me dando algumas imagens aleatórias, então eu realmente não tenho controle sobre as imagens que estão sendo mostradas. Há oh apenas voltando para o objeto aqui. Então meu elemento de objeto de imagem contém todas essas informações e porque é uma imagem, nós também temos s R. C. Então esta é a fonte desse objeto em particular. Então, a fim de saída que eu poderia simplesmente fazê-lo console log lá, e nós podemos dar uma olhada na fonte seguido por si mesmo. Então isso irá simplesmente listar o arquivo fonte. E assim como fizemos com o HTML, nós realmente temos a capacidade de fazer uma atualização sobre ele em vez de listá-lo. Se eu quisesse definir um novo valor, eles são tudo o que eles teriam que fazer é fazer o sinal de igual e definir o valor. Então eu vou apenas definir outra Laura, hum, pixel e pixel dot com. E esta é outra longa. Aqui s o ainda eram 100 por 100 e voltar para a nossa página web, fechar isso e recarregado. Então, essencialmente, o que vai acontecer aqui? Ele vai carregar a imagem 400 por 200, então ele vai acertar o JavaScript, e o JavaScript realmente vai reescrever a fonte dessa imagem. Então eu cliquei nele. E se eu for inspecionar e se olharmos para o código-fonte da imagem vemos que agora ela foi reescrita. Então é realmente Lauren escolhe um 100 por 100 em vez de ser o tamanho inicial de 400 por 200 . Então, além de tudo isso, podemos ajustar nosso estilo. Então eu disse antes, quando olhamos para este novo botão, talvez nós não gostemos desta cor cercada talvez, ou Aqua Color e eu quero ajustar isso. Então, para fazer isso, eu preciso definir e acessar que eu d. novamente. Então eu vou simplesmente copiar, sair aqui e novamente, olhando para o que temos disponível para nós para que possamos dio-style. E isso vai essencialmente retornar de volta todas as informações sobre o estilo do objeto. Então, se eu quiser ser realmente específico aqui vou mostrar a vocês o que aparece aqui dentro do cônsul aqui. Então eu vou Cônsul, logar a informação do botão lá e declaração CSS. Então, temos acesso a todas essas informações de estilo e carregar as coisas no console realmente dá uma boa idéia sobre uma visão geral do que está disponível para você. Então temos literalmente mais de 100 possibilidades diferentes aqui que podemos aplicar styling para eso uma das mais comuns. Talvez seja como uma cor de fundo. Então nós já temos uma cor de fundo para ele próprio. Vamos na nossa cor de fundo, vemos essa cor de fundo para que não tenhamos nada definido lá. Mas podemos sempre definir essa cor de fundo. Então tudo o que temos que fazer é fazer estilo e depois fazer cor de fundo. Então vamos atualizar essa cor de fundo e veremos o que acontece. Então faça estilo e fundo. Então este é cor de fundo e agora precisamos atribuir um valor de cor. E eu vou apenas fazer um padrão talvez de vermelho ou algo assim. Então vamos ver o que acontece quando o atualizamos. Nós vemos que nós mudamos a cor de fundo e agora quando eu entro aqui, eu posso ver que eu tenho a cor de fundo atribuída de vermelho. Então isso é atribuído ao amanhecer e o Dom entende que agora esta cor de fundo é vermelha e nós atualizamos isso via javascript e realmente literalmente, as possibilidades são infinitas. Assim como no CSS, você pode acessar qualquer uma dessas propriedades e fazer atualizações nele. Eso aqui, temos o nosso padrão aqui para texto CSS, plano de fundo, cor vermelha. Então isso seria substituir o imposto atual que está disponível dentro do seu e vemos que temos um monte de opções. Então, na próxima lição, vamos introduzir alguma interatividade. Então você tem esses elementos aqui. Eles parecem botões, mas eles não fazem nada quando você clica neles. Então, a próxima lição vamos cuidar disso e vamos começar a adicionar esse componente interativo que está disponível dentro do DOM. E isso vai nos dar a capacidade de fazer esses botões, na verdade, em vez de apenas elementos que não estão representando botões. Então, está chegando na próxima lição. 9. Javascript: Então esta lição vamos introduzir alguma interação. Então, talvez o que queremos acontecer sempre que clicarmos nesses botões, queremos que eles mudem de cor. Então, realmente, essa é a última lição que olhamos para como podemos atualizar o estilo do elemento. Então, nesta lição, vamos ver como podemos adicionar alguma interação. Então a primeira coisa que quero fazer é identificar o botão. Então talvez eu só vou dar-lhe um I d de botão variável 1. E isto vai conter o nosso objecto de botão. E vamos apenas fazer documento porque novamente, usando esse objeto de documento, vamos obter elemento por i d. e vamos selecionar VTM um como nosso elemento. E agora podemos usar esse bt e objeto onde precisarmos. Então, se eu quiser fazer BTM e eu quero aplicar, atualizar o estilo e talvez eu queira atualizar essa cor de fundo. Então telefone, vire amarelo. Tudo o que tenho que fazer é fazer estilo, fundo, cor, amarelo. Eu refresco. Vemos que até os estados amarelos. Agora vamos ver que eu quero adicionar alguma interação Então eu quero realmente fazer isso um botão em vez de apenas dizer clique em mim realmente quero ser capaz de produzir um clique e isso vai ser muito fácil Sempre fazer é fazer BTM e nós podemos fazer no clique E o que isso faz é isso adiciona o manipulador de eventos on click para esse elemento específico que selecionamos e talvez eu queira executar uma função. Então eu tenho minha função que estava chamando minha diversão e então aqui vou criar essa função para que minha função de fundo e eu pudesse passar quaisquer argumentos lá. E talvez seja aqui que eu precise colocar esse fundo. A cor é igual a amarelo. Vamos refrescá-lo. E então o que está acontecendo aqui é que fornecer essa cor de fundo Então o que está acontecendo é ele já está clicando nela. Vamos adicionar outra coisa aqui onde faria um documento? Então talvez eu vou definir uma variável de saída aqui, então eu vou pegar que colocar e obter elemento que eu d colocar e definir colocar o jantar html e vamos definir que para clicado. Não é quando atualizamos o código que vemos que já diz clicado, então parece que já está rodando através dessa função, mesmo que não tenhamos feito nada com essa função. E a razão é que sempre que eu estou definindo a função, o clique no eu não preciso realmente fazer os colchetes como eu faria porque quando eu faço isso, então ele dispara a função. Então agora vamos recarregar a página. E agora, quando eu clico, ele dispara o on click. E, claro, existem diferentes maneiras que podemos fazer o no clique. Então eu vou fazer o clique em um botão para E apenas para mostrar a vocês que existem apenas diferentes maneiras de avaliar o tipo de cena de funcionalidade. Então eu vou fazer BTM para selecionar BTM para e para este eu vou fazer ser tiene também no clique e este eu vou igualá-lo também. E aqui eu tenho uma função, já que a marca completamente em branco que você funciona, eu vou criar e eu vou ter minha codificação aqui dentro. Então eu vou tomar café algumas das coisas que eu fiz aqui, e talvez tudo bem clicado para, e vamos definir o fundo dois amarelo e ver o que acontece agora. Então eu clico nele, nós somos clicados para clicar nele, nós somos clicados e assim por diante. Isso, na raiz das coisas, é uma das maneiras mais rápidas de obter essa interação ao amanhecer. E eu vou apenas abrir o cônsul aqui para que possamos ter uma idéia melhor das propriedades que estão disponíveis. Então, para o botão para quando eu descer, eu posso ver que eu tenho uma função não-clique aqui, e eu tenho algo acontecendo sempre que ele é clicado, e nós também temos a capacidade de acessar qualquer um desses gatilhos. Então nós temos o clique no que estamos usando aqui. Mas é claro que podemos usar qualquer um desses fracos e usar, especialmente se tivermos formulários. Há muito mais opções, mas temos isso sobre dragões. Bem, temos eventos de rato, que também vamos ver nas próximas lições. Então como, sempre que movemos o mouse para cima, podemos disparar esses eventos e assim por diante. Então, você vê, há um monte de opções diferentes aqui. Não temos rodas de rato sempre na minha roda. Sempre que movemos a roda do mouse, então podemos acionar essa interação também. É um monte de opções, e vamos estar olhando para mais desses gatilhos nas próximas lições. 10. Listeners do mouse no JavaScript: Então, nesta lição, vamos mergulhar mais fundo em todos esses eventos que foram capazes de desencadear. E talvez, em vez do clique, vamos fazer algo onde sempre que passarmos o mouse sobre algo, sempre que o mouse está sobre, nós mudamos um valor, e então sempre que sairmos, podemos mudá-lo para outro valor. Então vamos tentar isso e talvez nós vamos anexá-lo à minha imagem. A primeira coisa que queremos fazer é configurar são variáveis porque esta é provavelmente uma das melhores maneiras de interagir com esses objetos de documento. Especialmente nos poupa o trabalho de continuar a chamá-lo, especialmente se for estática e não vai mudar. Mas se você está trabalhando com formulários e se você está mudando as coisas, então você pode ter que fazer outra rota para fazer atualizações e alterações eso. Se você tem um formulário e você está fazendo algumas alterações em sua captura essa informação, você pode ter que fazê-lo dentro da própria função sempre que o evento é acionado. Então, para este, alguns por que eu sou G e I menos acesso documento e novamente nós vamos apenas fazer um elemento get simples por i d. E o elemento que estamos pegando é a minha imagem e, em seguida, para a imagem em si. O que eu quero fazer é definir isso sempre que passarmos o mouse sobre essa imagem. Então eu vou colocar todas essas declarações aqui no topo, e eu vou quebrar isso um pouco em pedaços. Então, em vez de um clique mais adiante meu eu sou, eu sou G nós vamos estar procurando Talvez nós possamos ter alguns eventos de mouse aqui, então temos mouse para baixo. Entrar licença, mover-se para fora e sobre eso Alguns destes podem soar semelhante. Alguns ratos mouse, digite o mouse sobre o mouse para que o mouse sobre vai continuar a disparar enquanto estamos sobre ele. Mas o mouse entra dispara uma vez. Então, mostre a você qual é a diferença aqui entre os diferentes eventos do mouse. Então vamos fazer no meu era. Então faça a bagunça primeiro. E que tal fazermos a minha função para e, em seguida, para a função O que eu quero fazer é que eu quero configurar. Talvez você possa fazer uma mensagem ao cônsul e a outra coisa que pode ser interessante é talvez nós possamos puxar para fora e obter algumas informações sobre onde o mouse está realmente posicionado. Eso enfraquecer Faça isso também quando pegarmos. Então, olhando para todo o nosso objeto aqui sempre que estamos carregando, nós temos algumas informações sobre o mouse em si pode pegar essa informação do evento. Então vamos passá-lo como um E, e vamos sair no console também e mostrar a vocês o que acontece aqui. Então abra o console. E agora, toda vez que o rato acaba, estamos a desencadear o nosso evento. Mas vemos que também temos algumas informações sobre o evento aqui. Então temos nosso cliente ex cliente sábio. Temos a posição. Temos o tipo de evento que aconteceu. Então, foi um mouse sobre, para que possamos listar esses também. Então, se eu quisesse listar o que está acontecendo, o que desencadeou esse evento, podemos ver que eu posso listar isso apertado. E como qualquer outra coisa ao amanhecer, tenho acesso a toda esta informação. Então, se eu quiser pegar minhas coordenadas do mouse tenho minhas coordenadas X e Y eu tenho eu tenho meu alvo para que eu possa descobrir onde eu estou, em que alvo eu estou e apenas um monte de mais informações. O objeto de evento é Na verdade, é diferente de usar isso porque isso nos dá apenas o conteúdo deste item em particular. Então, se eu fizer algo como o console registrar isso ou talvez eu poderia fazer um cônsul, direcionar isso e atualizá-lo. Então nós somos, na verdade, sempre que passamos o mouse sobre, nós obtemos este objeto, que é o conteúdo do elemento iniciante de sua. Então você tem toda essa informação tem acesso a ela. Claro que podemos obter a identificação aqui. E nós também podemos atribuir eventos mawr a ele se quisermos, e apenas realmente muito mais podemos atribuir a ele em. Então. Além disso, é claro, podemos atualizar o estilo. Então, se eu quisesse fazer algo assim, nós sabemos que este é o objeto que nos enviou para esta função no mouse sobre para que eu possa fazer este estilo e eu possa completar talvez a cor de fundo ou algo assim, ou que Na verdade, não vai funcionar. Então talvez eu possa fazer uma fronteira. Vamos fazer fronteira e vamos igualá-lo a um escolhe sólido, bloqueado e atualizá-lo. Então, agora, sempre que passarmos por cima dele, ou talvez eu devesse fazer algo como Vermelhos, é mais visível. E agora, sempre que passarmos por cima dela, temos esta fronteira eso oposta do rato por cima. Temos de fazer outra, talvez para o rato para fora. Então, em vez de passar o mouse sobre o mouse, eu faria e para este, talvez apenas financiar três. E para esta função, talvez em vez de vermelho, vamos fazer bloco e atualizado para três. É mais evidente o que está acontecendo lá. Então vamos ver o que acontece agora sempre que eu passar por cima, ler preto e assim por diante. Claro, nós também podemos atualizar a saída para que possamos atualizar a saída de Talvez queremos colocar a posição do mouse X, e vamos igualar isso. Então, novamente, olhando para o evento do mouse, temos informações do cliente X. Nós também temos X lá em baixo, então eu vou ter que fazer é E. X para obter essa coordenada, e eu quero fazer a mesma coisa aqui. Então eu tenho o X. Então agora vemos que o X valoriza o ar mudando à medida que estamos nos movendo. Então, onde quer que estejamos entrando, estamos vendo que temos um valor X do mouse e, em seguida, também um valor X onde estamos saindo. Então temos uma idéia melhor de onde o rato está entrando e temos uma idéia melhor de onde o quê? Coordenada X. O rato está partindo. Então, toda essa informação está disponível para nós, e podemos realmente construir sobre ela através do Dom e JavaScript. 11. Adicione a JavaScript: na lição anterior, analisamos como podemos adicionar ouvintes do evento do e essencialmente ter esses eventos diferentes . Disparar sempre que tivemos alguma interação dentro da nossa página da Web. Muito parecido com um monte de coisas em JavaScript, nós realmente temos várias maneiras diferentes de adicionar esses ouvintes de eventos. Então eu vou manter essas funções iguais em nós vamos simplesmente reutilizar, polegar e realmente adicionar ouvintes de eventos a cada um desses objetos. E a maneira que vamos fazer isso é identificar o objeto. Assim como o que fizemos antes de termos o meu I'm G, tenho o meu Im G, e eu vou realmente fazer um ouvinte de eventos publicitários. E o que isso faz é que isso nos permite registrar Teoh no ouvinte de eventos em um único alvo, e este alvo poderia normalmente ser um elemento. E as vantagens de fazê-lo desta forma é que temos a capacidade de adicionar vários ouvintes de eventos , bem como ter muito mais funcionalidade dentro dos eventos e ter mais controle sobre os ouvintes de eventos para que possamos adicioná-los. Também podemos remover esses ouvintes de eventos e novamente podemos ter vários tipos diferentes, ouvintes de eventos. Então nós vamos fazer identificá-lo como ouvinte de eventos e nós vamos registrar ouvinte de eventos off, começar com clique e notar que isso não está ligado. Clique nele. Basta clicar. E então, é claro, temos a mesma habilidade, mesma capacidade de digitar em nossa função Lá, podemos passar as informações do evento também, assim como fizemos dentro dos outros eventos. E nós podemos lei Cônsul, cabra, informações sobre o evento. E, claro, podemos atualizar algo como saída e fazer o HTML interno. Então, na verdade, faça algo acontecer sempre que esse evento for demitido, clicado. Então, agora, sempre que clicarmos na imagem, vamos disparar esse evento e vemos que é isso que é disparado dentro do nosso console. E, claro, vemos que temos uma atualização de saída aqui para o HTML interno. Então você provavelmente está olhando para isso e dizendo Ok, bem, isso parece um pouco mais longo do que o que estávamos fazendo inicialmente, onde nós estamos apenas fazendo isso minha imagem e nós adicionamos isso no clique. E é muito verdade que isso inicialmente parece ser uma maneira mais longa de fazer o mesmo tipo de funcionalidade. Mas, na verdade, quando adicionamos ouvintes de eventos, temos algumas vantagens definitivas sobre o método on click. E uma das vantagens é que no Click não funciona em todos os navegadores. Você pode ter alguns problemas com algumas versões mais antigas do Internet Explorer, e alguns outros navegadores podem não necessariamente traduzir em Clique como um ouvinte de evento ímpar. Então, a maneira mais segura de seguir quando você está adicionando ouvintes de eventos é fazê-lo dessa maneira para adicionar ouvinte de eventos. E, claro, o outro benefício de fazer isso é que quando você adiciona ouvintes de eventos, você pode adicionar na verdade vários ouvintes de eventos a esse evento. Então, se eu quiser disparar várias funções e eu vou dar-lhe um exemplo disso, então, em vez de talvez um lugar esta função por conta própria, puxar isso para fora e fazer mais divertido para eu acho que é o próximo disponível e apenas arrumar que um Um pouquinho. Então agora eu tenho a habilidade. Então, se eu quiser fazer no Click e eu quero escrever o meu fundo, eu posso fazê-lo dessa forma eu posso dispará-lo. E como ouvinte de eventos. Eu também posso tocar no meu fundo, mas além disso, eu não tenho a capacidade de anexar um segundo ouvinte a ele. Mas com este, na verdade, faça-o apenas mostrar-lhe qual a diferença aqui vai ser. Então espaço para fora. E primeiro de tudo, vamos passar por aqueles ouvintes de eventos onde não estamos realmente fazendo a adição desse ouvinte. Estamos apenas adicionando o evento dentro desse tipo de funcionalidade. E assim, para o nosso evento estavam disparando este clicado. E talvez nós vamos atualizar essa saída para clicou dois e mudar esse estilo de fundo eso aqui estamos fazendo fronteira. Ou talvez possamos manter isso para o fundo da borda azul. Então vamos atualizar isso e ver o que realmente acontece. Então nós temos isso na imagem, e sempre que clicamos nela, vemos que temos essa borda vermelha e parece errar a azul também. clicamos, pegamos as coordenadas do mouse e assim por diante. Então, na verdade, não conseguimos o 1º 1. Não vemos nada disparando. Provavelmente é melhor se eu fizer um console aqui e eu vou apenas digitar o meu fundo e eu preciso contornar isso porque caso contrário vou disparar essa função que está dentro. Então talvez esta seja uma representação melhor. Então nós apenas atualizamos isso de novo, dizemos isso. Refresque-o. E agora, sempre que estamos sobre o objeto e clicamos nele, vemos que estamos apenas atirando fora da minha diversão também. Então, e ao contrário de quando comentamos que a primeira maneira de clicar, eu preciso abrir isso novamente, atualizá-lo. E agora, quando clicamos nele, vemos que estamos realmente disparando essas duas funções. Então essa é a principal diferença é que ele nos dá a capacidade de disparar vários manipuladores de eventos e também funcionalidade adicional e também a capacidade de remover esses ouvintes de eventos. Então, mais duas vantagens para o ouvinte de eventos de anúncio é que a semântica? Então, basicamente, vemos que estamos realmente registrando esse evento, enquanto aqui não estamos vendo que o registro do evento eso Às vezes, pode haver alguma confusão de que estes não são realmente eventos registrados. Eso atribuir os eventos através do ouvinte de eventos de anúncio só faz muito mais sentido e novamente, é claro, há essa compatibilidade com navegadores mais antigos. Então, quando estiver em dúvida, use o ouvinte de eventos. E se você está tentando criar um projeto rápido ou apenas quer uma funcionalidade rápida para testar estado, então você sempre pode ir com a maneira on click. Então, no próximo conjunto de lições, vamos analisar ainda mais detalhadamente como podemos atualizar e interagir com o cão. Então, tudo isso está chegando no próximo conjunto de lições. 12. Listagem de eventos de eventos de: na lição anterior, nós olhamos para apenas lidar com esse elemento e anexando ouvintes de eventos a isso e acessando esses elementos únicos por get elemento por I D. Mas nós também precisamos olhar para a possibilidade de que talvez nós queremos toe acessar algo via classe ou queremos acessá-lo. Queremos acessar vários elementos diferentes através de diferentes classes, através de tags e assim por diante. E é aí que podemos usar seletor de consulta. Então eu vou criar um novo acesso e eu vou acessar todos esses botões. E então eu vou percorrer os botões e atualizar talvez algo em cada botão. Então, para fazer isso, a primeira coisa que eu preciso fazer é selecionar meu elemento. Então eu vou chamá-lo Botão E l para elemento de botão e documentos, e eu vou apenas usar seletor de consulta e mostrar-lhe o que acontece quando eu uso seletor de consulta em oposição ao seletor de consulta. Tudo assim com seletor de consulta, podemos selecionar todos os elementos com a classe de botão e talvez possamos Cônsul Direito obter essa informação ou diretório Cônsul para fora essa informação. Então é o botão L. E só para mostrar o que será exibido aqui dentro do console. Então, quando eu atualizá-lo, vemos que Onley ar selecionando esse primeiro botão e nós um seletor de consulta faz é que ele ainda isola Onley que primeiro valor disponível que contém botão. Então ele sempre vai acessar nosso 1º 1 e podemos ver que dentro do cônsul surdo aqui que estavam acessando clique em mim. Então, e se eu mudar isso para Query selector tudo E como sabemos de antes que nós temos uma lista de quatro diferentes ou qualquer um que atende esse valor BTM Agora, nós podemos realmente levar isso mesmo alguns passos adiante onde podemos vírgula separar isso para fora. Então, se quisermos acessar todas as classes BTM e talvez até queiramos acessar todas as dips, então veja o que acontece aqui e obtemos uma lista de seis nós vemos também importante notar que não estamos substituindo isso. Então vamos pegar os botões. Estamos recebendo as dibs separadamente. Talvez até queiramos fazer algo como a minha imagem ou algo assim. Então, vamos atualizar que vemos “Obter uma nota “, uma lista de cinco para não duplicarmos nossas listas. Então isso é definitivamente uma coisa boa porque nós não queremos ter que ter vários elementos e, em seguida, tê-los várias vezes dentro da nossa lista. Então o que podemos fazer bem é que podemos realmente fazer loop através desta lista de elementos que estavam girando como esses elementos de botão. E a maneira que podemos fazer isso é usar o comprimento. Então temos. Então eu vou apenas Cônsul , sair e eu vou atualizar isso e nós temos um valor aqui que contém o comprimento. Como vê, na Lista Nord, temos cinco. Mas também temos um objeto com o valor aqui chamado comprimento, e podemos fazer uso disso e usá-lo dentro de nosso loop. Então agora vemos que temos um comprimento de cinco e podemos fazer um loop rápido aqui, então vamos igualar I 20 e vamos olhar para isso com mais detalhes. Próximo eso Por enquanto, vamos simplesmente fazer um loop para fora para esse valor dinâmico de comprimento, então qualquer que seja esse comprimento, não importa porque nós estamos pegando dinamicamente o comprimento aqui s para que possa ser qualquer variação. E isso nos dá a capacidade de percorrer dinamicamente cada item que é devolvido . E precisamos incrementar I, a fim de ter um valor incremental, incremental, para que possamos realmente acessar e percorrer todos os itens diferentes. Então Bt e e l e talvez o que queremos fazer é que queremos obter esse html interno. Então talvez o que podemos fazer é que podemos Cônsul logar isso para que precisamos de colchetes aqui s O que nós realmente temos o próximo valor e nós podemos percorrer o log do Cônsul e vamos ver o que acontece aqui. Então eles só vão recarregar esta página. E agora vemos que obtemos todo esse html interno de cada um desses elementos à medida que ele passa por eles. E eu acho que eu deveria remover essa imagem porque eu acho que isso vai começar a confundir as coisas. Então você vê, agora nós olhamos através de todos os diferentes botões que temos disponíveis para nós. Assim como adicionamos isso. Obtive que html interno como olhamos através de todos os diferentes itens que estão disponíveis para nós. Também podemos fazer a mesma coisa onde adicionamos ouvintes de eventos a todos e cada um deles enquanto estamos fazendo loop. Então talvez possamos adicionar eventos de cliques a eles e podemos disparar uma função. Talvez possamos fazer a função do meu fundo. É sempre que qualquer um deles é clicado. Faremos a minha função de fundo, e passaremos a informação do evento, então veja o que acontece agora. Então, toda vez que ele clica, nós temos esses eventos de mouse disparando e nós também temos essas caixas azuis por lá para que possamos realmente pegar e entender que informações passamos aqui. Então até nós temos a informação do evento. Mas também podemos obter o I d se quisermos. Então agora, enquanto clicamos, nós realmente obter o ID do elemento e assim por diante. É assim que você adiciona eventos a vários elementos. E eu tinha todos esses ouvintes de eventos enquanto você passava por eles, e nós podemos simplesmente aplicar esse estilo, e nós podemos praticamente fazer um monte de funcionalidades diferentes aqui conforme necessário. Seja o que for que estamos interagindo com o dom e fazendo loop através Uma vez que selecionamos nossos elementos com os quais queremos trabalhar, então, na próxima lição, vamos mergulhar mais profundamente em escolher esses diferentes elementos. Eso pode não necessariamente precisar de ter aulas. E eu ds como nós podemos atravessar e verificar todos os nós crianças no Maine e assim por diante. Então eu vou te mostrar como fazer isso na próxima lição. 13. Mais de seleção de elementos: Então esta lição eu vou mostrar a vocês como eu posso ter acesso a todos esses elementos realmente atravessando o que está disponível ao amanhecer. Na lição anterior, fizemos Quick query selector todos. Por isso, também temos outra opção. Então eu vou fazer variável e precisamos de um contêiner para isso. Então talvez façamos anotações sobre crianças e vamos fazer documentos e obter elementos por i d. e desta vez vamos usar o nome do pai, que vai ser principal. Então este aqui em cima e nós vamos listar todos os nós filhos que temos disponíveis para nós, vai fazer isso um pouco maior. Então vamos ficar em uma linha. Eso o que podemos fazer agora é Cônsul logout ou Cônsul diretório fora que Bt N. C. M. Então, o que está contido dentro desse objeto, vamos apenas dar uma olhada no que realmente recebe saída aqui. Então veja que nós temos nove nós filhos que estão listados aqui, então nós temos texto. A primeira é que temos uma mensagem aqui dentro sobre o Ben. O próximo é realmente o botão, e então o texto no botão e assim por diante. Vamos dar uma olhada e percorrer todos os nós filho disponíveis e vamos obter os nomes desses nós. Então, a próxima coisa que precisamos fazer é fazer o que fizemos antes onde vamos configurar nosso loop típico aqui e vamos loop through enquanto eu é menor do que btm CN comprimento porque novamente obtemos esse valor de comprimento por padrão e então precisamos incrementar I em orderto percorrer todos os valores disponíveis. E para este, vamos simplesmente sair do console e vamos escolher o suporte BT e CNN. Mantenha que eu dentro desse colchete enquanto estamos looping através dele e vamos listar esses nomes de nós à medida que eles se tornarem disponíveis. Então, essencialmente, vamos listá-los todos dentro do cônsul aqui. Então é só guardar esse quintal aqui e refrescá-lo. Então agora vemos que nós realmente obter os valores aqui listados. Então, essencialmente, temos nove notas dentro da lista e todas estão listadas aqui, e estamos listando o conteúdo de cada uma dessas nove notas que estão disponíveis para nós. Vemos realmente deve se livrar deste aqui porque isso está adicionando a alguns da confusão. Então eu vou simplesmente comentar e atualizar este eso novamente. Aqui está a nossa lista de nove nós. Os primeiros texto Dave, texto de texto de texto Div e último texto também. Então, agora podemos até dar um passo adiante para que pudéssemos fazer algo como se o nome do nó e verificar se é igual div do dedo do pé. E então se é do que podemos fazer é colocar alguma coisa. Então, se é igual a DIV do que vamos produzir, olhe para algum tipo de problema de suporte aqui. Eso só tem que ter certeza que estou fechando esses suportes nos pontos certos aqui. Então, Cônsul saindo e acredito que ainda falta um aqui. Se eu listar o nome do nó e eu poderia tão facilmente em vez do nome do nó, eu poderia apenas fazer algo como i d. e que iria listar todos os I ds de cada elemento único lá dentro do loop. E, claro, ainda podemos entrar e adicionar ouvintes de eventos se quisermos. Então, se eu quisesse Como estamos fazendo loop por aqui, eu quero adicionar um ouvinte de evento de um clique em vez deste que eu vou fazer é eu vou chamá-lo este aqui para que ele realmente não dispare. E podemos usar os novíssimos ouvintes de eventos que adicionamos Refresque-o e, claro, não devemos copiar e colar essa causa que vai ser diferente. Diferente valor eso. Agora vemos que temos essa mesma funcionalidade para que tudo esteja funcionando como antes. Mas não precisávamos identificar cada um desses botões. Nós viemos em taxa dos pais e nós pegamos todas as crianças e vimos aqueles que eram dibs com Nós poderíamos até fazer algo com a classe e assim por diante. Há muita informação que podemos tirar por aí. Então nós adicionamos em uma instrução condicional, para verificar se o nó nomeia uma div. Se for uma div, então adicionamos o ouvinte de eventos a essa nota, e então obtemos a mesma funcionalidade que fizemos antes. Então, novamente, uma série de maneiras diferentes em um número de abordagens diferentes que você pode obter o mesmo efeito, onde você olhou através de todos os diferentes elementos selecionados e fazer sua seleção de seus elementos dentro sua página da Web. Então, a próxima lição vamos estar olhando para como criar elementos no amanhecer usando JavaScript também atualizá-los e anexá-los e muito mais. Então tudo está chegando no próximo conjunto de lições. 14. Javascript criando novos elementos: nesta lição, vou mostrar-lhe como criar um novo elemento dentro do seu HTML. Então aqui temos alguns elementos típicos. Temos um monte de botões aqui, e talvez se clicarmos em um desses botões queremos começar a criar alguns novos elementos. Então vamos dar uma olhada em como iríamos fazer isso. Então a primeira coisa que queremos fazer é em um ouvinte de evento Teoh the Element. Então precisamos identificar esse elemento. Então, documente. E nós vamos apenas obter elemento por i d para manter as coisas realmente simples e simples . Então Bt e um. E vamos pegá-lo no primeiro botão. E o que vamos fazer é em um ouvinte de eventos, e então esse ouvinte de eventos vamos adicionar como um clique. Assim que clicarmos no primeiro botão, vamos executar talvez uma função. Então eu vou adicionar apenas sobre a minha diversão e eu vou criar um cérebro. Você funciona para eles para que pareça novamente que estamos ficando sem espaço, e eu gosto de tentar mantê-lo em uma linha lá, então é muito mais visível e mais fácil de ler. Então, aqui está a nossa função. A minha diversão. Então, sempre que clicarmos, vamos enviá-lo para esta função, e então é aqui que vamos criar esses novos elementos. Isso é como nossa fábrica de elementos atualizando nosso HTML e adicionando código. Então, a primeira coisa que queremos fazer é definir um novo elemento. Então talvez eu vou fazer novo l ou algo assim e documento então lá novamente, estamos usando esse objeto de documento, e estamos usando a função para criar elemento. E isso nos permite criar uma novíssima nota de atributos, e então ele retorna esse valor. Então vamos criar um tipo H um. Então, o próximo. A próxima coisa que queremos fazer é realmente queremos adicionar em algum conteúdo para esse elemento eso talvez fazer algo como, um, um, você conteúdo e novamente indo para esse objeto de documento vamos fazer criar nó de texto, e isso nos dá a capacidade de adicionar em algum texto. Então, Anu tem uma etiqueta. Então, vai ser o texto que está contido dentro dessa etiqueta. Então agora só precisamos Teoh fazer uma combinação e descobrir onde queremos por favor sentar-se dentro da nossa página web. Então, queremos combinar ambos estes recém-criados para que o atributo e, em seguida, o texto nevou . Então, queremos adicionar neste filho este novo conteúdo criança no novo elemento. Então, a maneira que fazemos isso é novo E l e usamos Apêndice Criança. E então agora nós selecionamos esse novo objeto de conteúdo. Então agora nós temos este recém-criado cada uma tag com conteúdo nele chamado texto dentro dele, dizendo que você h uma tag. Então agora precisamos descobrir onde queremos uma posição que ele. Então eu já tenho isso. Eu colocaria aqui eu não tenho nada lá, então talvez possamos simplesmente adicioná-lo sob saída. Então saída e nós vamos fazer a mesma criança upend. E desta vez vamos escrever saída com novo E L e ver como isso acaba. E talvez devêssemos registrar o Cônsul só para ter certeza de que tudo está disparando da árvore de coleta . Então, minha diversão e eu citamos por lá e vemos como isso acaba. Então, vamos atualizar e ver o que acontece. Então agora, sempre que estamos clicando e antes de continuar. Eu preciso fazer uma correção aqui porque isso deve ser criar elementos não estavam realmente criando um atributo. Estamos criando um elemento. Eso só vai voltar agora para o código e atualizá-lo. E agora vemos que somos capazes de criar essas tags cada um acima dela. Então, agora, sempre que clicarmos, estamos criando um novo elemento com um H uma tag. Quando entramos no código-fonte e damos uma olhada no que está disponível dentro do código-fonte , vemos que temos um monte dessas tags h one, e quando clicamos e abrimos essa fonte, vemos tags adicionais sendo criado. Como você cria novos elementos em tempo real usando o Dom via JavaScript? E, claro, há muito mais que você pode continuar a fazer, e você poderia trabalhar no uso de todas essas funcionalidades diferentes. Eso, acabamos de fazer uma combinação aqui. Temos um ouvinte de eventos. Também podemos ter qualquer número de combinações diferentes desses ouvintes de eventos. Esses gatilhos desencadeados pela interação do usuário e, em seguida, ter algo dinamicamente aconteceu via JavaScript. Então tudo isso e muito mais está disponível pela madrugada. E, claro, um dos pontos de partida para trabalhar com o amanhecer é talvez dois listados para fora seu console D I R. E listar todas as informações de documentos disponíveis e, em seguida, trabalhar através que fazer altera as atualizações conforme necessário, incluindo a adição de elementos, atualização, estilo e muito mais. Então, tudo isso está disponível dentro do console. Então dê uma olhada e veja o que você pode fazer acontecer usando JavaScript e DOM juntos. 15. DOMe e formulário crie uma validação de formulários: nesta lição. Eu quero adicionar validação de formulário para este formulário HTML para que normalmente pode ver um formulário e você vê que ele acabou de obter sua política pode enviar. E às vezes você pode ver no evento Lister em um ouvinte de eventos de tributo aqui, onde você tem algo quente, como no envio, e então ele chama para uma função. Então, nós não vamos tocar em nada disso cada um no melão. Vamos fazer toda a nossa taxa de funcionalidade dentro do JavaScript é a primeira coisa que precisamos fazer é fazer nossa seleção e nós demos o formulário e eu d Então enfraquecer o documento, obter elemento por i d. Porque, é claro, Esta é a maneira mais fácil de fazer a nossa seleção através do I d. E nós vamos fazer uma seleção fora do formulário, e nós também vamos fazer o botão enviar bem, modo que o meu formulário para que este é o elemento que nós vamos obter. E então o ouvinte que vamos substituir nele vai estar na submissão, e então seja lá o que for disparado sempre que isso for acionado, vamos passar por essa função. Então aqui eu vou construir essa função. Então talvez o que queremos fazer. Eso queremos eliminar. Primeiro de tudo, queremos eliminar essa ação padrão. Então, sempre que eu cliquei no botão enviar, o que realmente vai acontecer é que ele vai simplesmente enviar antes, Então eu quero eliminar isso e nós podemos eliminar isso fazendo um retorno falso. Então agora quando eu voltar aqui e quando eu atualizar para ver que nada está acontecendo e isso é porque é que nós trouxemos isso para dentro, nós temos o ouvinte de eventos aqui em submeter e quando ele dispara estavam apenas retornando falso. Então, essencialmente, o que isso significa é que nada é submetido. Então, o próximo item que queremos olhar é queremos olhar para o botão enviar e queremos adicionar algumas funcionalidades adicionais lá também. E, claro, poderíamos fazê-lo de várias maneiras. Então, talvez se quiséssemos Teoh e novamente, nós vamos usar get elemento por i d. E nós vamos selecionar através do I d. Então enviar botão e, em seguida, este, nós vamos apenas fazer um simples clique. Então, seja lá o que for clicado. Vamos disparar talvez a nossa validação para verificar formulário e criar uma função aqui pode realmente verificar através do formulário. Então nós vamos descer aqui e fazer o formulário de verificação de função e, em seguida, talvez apenas Cônsul, sair por agora ou eu vou criar outra div aqui. E eu ia dar uma boa idéia de saída para que possamos realmente colocar algum conteúdo aqui. E eu vou assinar saída variável para colocar vai ser o meu recipiente para o documento. Obter elemento por i d. E desta vez estamos selecionando esse elemento de saída. Então, sempre que verificarmos o formulário, sempre que clicarmos neste botão, vamos atualizar, eu colocaria. E nós vamos atualizar esse HTML interno e igualá-lo a clicado para que desta forma, nós não temos que abrir o console e apenas vamos tornar as coisas muito mais visíveis. Mais fácil de ver. Então vemos que agora, sempre que clicamos nele, somos clicados, e estamos realmente disparando ambos porque, por padrão, este botão aqui, nós realmente enviamos o formulário, e aqui, onde estamos realmente enviando o formulário. Temos um retorno de falso. Portanto, temos duas opções aqui que podemos fazer agora. Podemos ir com isso para validar e verificar o formulário. Ou podemos fazer este para validar e verificar os quatro. E eu tenho que voltar para o formulário aqui em cima porque o que eu quero fazer é ter a habilidade de fazer uma condição aqui. Quero verificar um monte de valores aqui dentro do formulário, pegá-los e fazer uma verificação rápida sobre eles e ver se eles são válidos se eles estão indo para atender aos meus requisitos. Então eu quero manter tudo isso dentro da mesma função. Então eu poderia realisticamente, eu poderia apenas ligado a esta função bem formulário de verificação. Então eu poderia fazer qualquer um desses. E eu poderia até remover esse clique do botão. Há algumas opções diferentes aqui, mas por enquanto, vou deixar assim, e vou começar a montar todos os diferentes elementos com os quais quero interagir . Então o primeiro 1 com o qual eu quero interagir é o elemento nome. Então eu vou assinar um novo acesso variável que elemento do HTML e novamente isso vai ser get elemento por i d e o i d do nome é nome tão simples lá . E eu vou apenas duplicar este s o para todos os outros dois elementos que eu tenho lá, e eu vou embelezá-lo, modo que alinha todos eles muito bem. Então este, o 2º 1 talvez possamos fazer o meu e-mail e o 3º 1 será o meu MES para a mensagem. E agora só precisamos criar essas ideias. Então msg lá para a mensagem e apenas e-mail para o endereço de e-mail. Agora com HTML cinco. A coisa realmente boa sobre isso é que se este não é um e-mail válido aqui, ele realmente não vai enviar. Então, se eu tiver algo assim e apenas me deixar atualizar isso e eu percebi que eu tenho o, uh, tipo como texto. Então eu tinha feito isso de propósito para os propósitos desta demonstração, porque quando eu tenho isso como um e-mail, e se eu tentar arquivar algo que não é um e-mail. Html cinco tem essa mensagem pop-up padrão. E, claro, você pode confiar nisso. Ou você pode dar um passo adiante e construir sua própria validação. Então eu vou em frente e construir minha própria validação eso para a validação do e-mail. Eu só tenho uma função rápida. Vou copiar e colar aqui. E essencialmente, o que esta função vai fazer é que vai verificar. Vai levar este valor do e-mail, e vai fazer uma verificação. Então, ele vai verificar para ver se ele corresponde a todos esses critérios. Então, essencialmente, o que isso está dizendo é que ele permite qualquer tipo de conteúdo. Estamos procurando o símbolo at e estamos permitindo caracteres de números, e então estamos procurando por um ponto e, em seguida, alguns números e caracteres também. Então isso conta para vários formatos de endereços de e-mail e, essencialmente, desde que seja um endereço de e-mail válido e o que estamos retornando aqui são os resultados do teste. Então, se o meu cheque é válido, então ele vai voltar verdadeiro, e se não for, isso vai voltar falso e nós podemos trabalhar isso em nossa lógica aqui no topo quando fizermos uma verificação rápida para ver nossa submissão processo. Então o primeiro 1 que eu quero verificar é o meu nome. E, a fim de obter o valor do meu nome, eu apenas digitei o valor. Então eu vou fazer uma verificação rápida para ver se é igual a Blank porque nós não queremos ter nenhuma submissão em branco. E se for igual a Blank, então eu preciso criar outra variável aqui. Então isso vai ser apenas uma variável em branco, e eu vou usar isso como um contêiner. Teoh, encha isso e então eu vou verificar isso para ver se há algum valor dentro deste recipiente para costurá-lo. Basta fazer a nossa mensagem e dado valor de nome, não preenchido. E eu também quero fazer exatamente a mesma coisa para o outro. Outros valores que eu tenho dentro da minha forma por algum motivo estão tendo alguma dificuldade. Eles estão fazendo a seleção. Eso Isso estava apenas embelezando e eu preciso atualizar Thies para combinar com o que Minhas seleções estão aqui em cima e em vez de nome. Eu vou fazer e-mail, não preenchido e mensagem não preenchido e salvar isso. E agora eu posso ir até aqui e um dos problemas que eu sou na verdade que eu estou olhando agora é que eu não estou fazendo uma mensagem é igual a mensagem. Então precisamos inventar coisas inatas juntos. Então isso é no caso de termos várias mensagens que queremos saída. E eu também vou adicionar em algum HTML para que nós realmente temos estes em novas linhas que obtém saída. E o que vamos fazer agora também, é que vamos nos livrar deste aqui, e vamos atualizar o HTML interno com a mensagem. Então vamos fazer uma verificação rápida e ver o que acontece. Então vemos agora quando preenchemos o nome que esse desaparece, vemos esse e-mail e depois a mensagem, e então, uh, devemos ser capazes de definir o formulário para enviar se não tivermos nada dentro da nossa mensagem . Então é o próximo pedaço de lógica que podemos adicionar. E também há mais uma coisa aqui que podemos acrescentar. Então, mais uma validação Então nós vamos apenas separar isso, e eu vou fazer uma verificação para ver se é um e-mail válido. Então, se é um e-mail válido que o seu, é assim que nós queríamos disparar se ele não está sendo retornado como verdadeiro, e queremos que a mensagem ocorra. Então isso é como um daqueles negativos duplos onde eu tenho um Não. E eu estou procurando por um falso, então há várias maneiras diferentes de escrever isso. Mas, por enquanto, vamos fazê-lo, uh, uh, dentro deste tipo de formato, por isso não é válido e-mail. Então eu vou adicionar isso na cadeia de mensagem, e nós vamos apenas atualizar isso e nós vemos que para algo que deu errado, então só tenho que fazer uma verificação rápida e eu posso ver que eu esqueci um dos colchetes lá. E agora vemos que não temos e-mails válidos disparando mais uma peça rápida para este quebra-cabeça sobre o que queremos fazer é realmente queremos fazer outra condição aqui, e vamos apenas verificar se há algum conteúdo em nossa mensagem. Eu estou com a maneira que nós poderíamos fazer isso é que nós podemos verificar o tamanho dele. Então, se o comprimento é maior que zero do que o que vamos fazer é vamos emitir esta mensagem aqui e também vamos retornar False. Mas se não tivermos quaisquer erros que lançamos, então enfraquecer fazendo mais aqui e podemos retornar True. Então deixe-me embelezá-lo para fazer tudo alinhado, guardá-lo. E agora o que o testou? Então, primeiro tentamos configurá-lo. Vemos que temos quatro coisas que precisamos preencher aqui. Assim que eu começar a preencher o nome que um desaparece, o e-mail desaparece, mas ainda não somos válidos. Então, se eu fizer um endereço de e-mail válido, então vemos isso quando tentamos enviar isso. Então eu tenho que dar outra olhada nisso e ver, então eu realmente não preciso ter essa parte aqui, então vamos tentar isso mais uma vez. Então, colocamos um endereço de e-mail válido. Então agora tudo o que precisamos fazer é preencher a mensagem. Então, quando preenchemos a mensagem, então estamos prontos para ir e concluímos o processo de envio, e eu não tenho nada que forme PHP. É por isso que está me dando aquele objeto não encontrado. Mas isso é essencialmente como você pode usar rapidamente o amanhecer e a seleção de seus elementos HTML , a fim de construir a sua validação, verificar o seu formulário dentro do seu código HTML.