JavaScript DOM e BOM: dos fundamentos ao avançado

1. Introdução do curso: Olá, bem-vindo ao Mastering JavaScript Dom cos. Meu nome é John Shokar Sou desenvolvedor web e instrutor on-line do FStac. Sabemos a importância do JavaScript no site e no objeto do documento e no modelo objeto do navegador desempenham um papel fundamental no JavaScript. Usando o Dom, podemos manipular a estrutura do Stimus. Além disso, podemos manipular valores CSS. Podemos adicionar elementos em qualquer lugar em nossa página da web. Podemos animar coisas usando JavaScript Dom. Vamos aprender muitas coisas nesta aula. Então, vamos falar sobre a estrutura central. Em primeiro lugar, vou apresentar a introdução, O que é Dom. Em seguida, aprenderemos sobre os métodos de segmentação. Vamos aprender sobre métodos Dom gate, método set, seletor de consultas, método de estilo CSS Dom, ouvintes de eventos, método de lista de classes, elementos pais, nós filho e filho, primeiro filho, último filho, novo irmão, criar elemento, criar texto, atender todo tipo de propriedade Depois de aprender todo tipo de propriedade dom, iniciaremos o modelo de objeto do navegador B. Aqui vamos aprender a altura da janela, a janela bem aberta, fechar, mover para o método, redimensionar, decidir rolar, rolar até o objeto de localização, objeto histórico, página Yosete, página X Osit Este é o tutorial completo sobre Java Sweep doom and boom Se você tem conhecimentos básicos sobre CSS, tags HTML e Java Sweep, essa aula é para você 2. O que é DOM?: Neste tutorial, vou apresentar o que é JavaScript Dom. A forma completa do JavaScript Dom é o modelo de objeto de documento. Como você sabe, o ponto mais forte do JavaScript são os eventos. Com isso, o Javascript tem outro ponto forte, que é o Dom, podemos fazer muitas coisas se combinarmos essas duas seções. Antes de trabalharmos com Dom, precisamos entender o que é Dong. E o que é a árvore Dom? O Dom faz parte do HTML e a parte mais importante do Dom é o documento. Dentro deste documento, temos uma tag principal , conhecida como tag TML Caso contrário, podemos chamá-la de hoop tag. E então chegamos à tag secundária da tag HTML, que é a tag de cabeça e a tag de corpo. Tag de cabeça e tag de corpo, ambos são irmãos e sua tag principal é a tag HTML Agora, vamos falar sobre a etiqueta de cabeça. tag de título é uma das tags secundárias da tag principal dentro dessa tag de título, podemos digitar qualquer texto. Por exemplo, nós apenas digitamos website. Da mesma forma, em nossa tag body, podemos criar vários elementos secundários. Por exemplo, podemos criar a tag Np. É usado para navegação e uma tag de cabeçalho, H one. Dentro da tag de navegação, podemos usar a tag âncora quando criança e dentro da tag âncora, você pode passar qualquer texto No nosso caso, eu digito sobre nós. Também podemos definir um atributo para nossa tag âncora, que é classe, caso contrário, ID Da mesma forma, podemos passar um nó de texto em nossa tag de cabeçalho. Além disso, podemos definir o ID do atributo. Com isso, também podemos definir outra classe de atributo para nossa tag de cabeçalho. Esse atributor também funciona como etiquetas secundárias. Todos os atributos e elementos, você pode ver aqui, chamamos todos esses nós em JavaScript. Este é o nó do elemento, esse é o nó do texto, esse é o nó do atributo. Agora você pode pensar: qual é o uso disso em JavaScript? Aqui eu acabo de apresentar a você, o que é a árvore Dm Usando essa árvore Dm, você pode fazer duas coisas em JavaScript. No início, você pode obter teta da árvore Dm. Suponha que você queira extrair o nome de ID desse atributo. Nesse caso, você precisa usar a palavra-chave G, especialmente GT é um método. Você pode obter qualquer valor usando esse método. Ao contrário, se você quiser definir um novo valor para sua estrutura de cúpula, nesse caso, você precisa usar o método set Você pode definir um novo valor para esse texto. Caso contrário, você pode criar um novo nó como elemento filho. Caso contrário, você pode criar um novo elemento dentro de um elemento. Se você quiser criar uma animação usando a ajuda de JavaScript, caso contrário, se quiser desenvolver jogos, qualquer coisa que você queira fazer com seu dom usando a ajuda de JavaScript, você precisa usar isso para Mod, G e sit. Além disso, você pode alterar os atributos usando isso para Mathod. Você pode alterar a classe, o ID, os elementos, o que quiser mudar. Você pode adicionar um novo elemento STM em seu documento. Caso contrário, você pode excluir o elemento SML. Caso contrário, você pode excluir elementos SML existentes. Se você quiser excluir a tag H one, sim, você pode excluí-la. Caso contrário, se você quiser adicionar outra criança , na tag body, sim, você pode. Neste tutorial, eu apenas apresento o que é DOM. No próximo tutorial, mostrarei como podemos usá-lo de forma prática. Obrigado por assistir este vídeo, estátua. 3. Tutorial de métodos de segmentação de DOM em JavaScript: É bom ver vocês. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript Dom. Nesses tutoriais, aprenderemos o método de segmentação do Dom Em nosso tutorial anterior, já aprendemos o que é a árvore Dom. Com isso, eu te disse qual é o uso do método G e set. Agora, a questão é, se eu quiser obter o valor su, caso contrário, define um valor, como podemos direcionar esse elemento? Suponha que eu queira mudar a tecnologia H one. Quero mudar, bem-vindo ao Hello world. Como podemos direcionar esse elemento? Talvez haja muitas tags H one neste documento. Como podemos fazer isso para direcionar esse elemento, o JavaScript tem alguns métodos especiais, e vamos aprender os métodos especiais neste tutorial. Para atingir o elemento Dom, existem três métodos especiais. Podemos segmentar o elemento Dom por meio de seu ID. Além disso, podemos segmentar o elemento Dom pelo nome da classe. A última opção é que podemos direcionar o elemento Dom com esse nome de tag. Se você quiser segmentar o elemento pelo ID, precisará digitar uma linha especial. Em seguida, você precisa digitar um comando especial. O ponto do documento obtém o elemento por ID. O documento é um objeto e, dentro desse documento, eu quero pesquisar um ID. Aqui dentro das prensas redondas, precisamos passar o nome de identificação É um dos métodos de documentação. Lembre-se de que você precisa digitar E, B e I em maiúsculas. Da mesma forma, se você quiser segmentar pelo nome da classe, nesse caso, você precisa digitar o ponto do documento, obter o elemento pelo nome da classe. Dentro dos vestidos redondos, você precisa fornecer o nome da classe desse elemento. Se você quiser segmentá-lo pelo nome da tag, nesse caso, você precisa digitar o ponto do documento, obter o elemento pelo nome da tag. Dentro do vestido redondo, você precisa passar o nome da etiqueta. Mas sem três, há muitos métodos de segmentação. Esses são todos os métodos de segmentação que abordarei em nossa série de tutoriais Vamos começar a prática e ver como podemos usar esse método. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão light de servidor. Eu já criei um documento ETM chamado index dot HTML. Como você pode ver, neste documento, criamos uma estrutura HTML e criamos um layout básico do site Aqui você pode ver o cabeçalho e também criamos uma seção básica do menu. Além disso, temos uma parte de conteúdo e, dentro dessa parte de conteúdo, temos uma imagem, subtítulo, conteúdo no lado direito, você pode ver uma seção lateral e temos uma tag âncora nesta Também temos uma seção de rodapé normal. Então, nesse layout básico, vamos explorar todo o método de segmentação Você pode ver no meu arquivo de estimativa que temos a seção de cabeçalho, a seção de menu, conteúdo e também a seção cibernética e o rodapé da seção Eu já vinculo um arquivo de estilo a esta página de estimativa, estilizei pontos CSS, e você pode ver o arquivo Quando eu vinculo um arquivo JavaScript ao ponto principal js. Agora é um documento vazio. Se você observar o nome do ID e as classes, temos um invólucro de nome de ID, cabeçalho, menu e conteúdo Além disso, temos uma lista de classes, barra lateral e ID externa Para essa imagem, atribuímos um nome de classe, imagem de conteúdo. Mantenha esse arquivo como está. Vamos entrar no arquivo JavaScript main dot js. Vamos experimentar todos os métodos de segmentação de dom neste arquivo Primeiro, vou declarar uma variável where element. Por enquanto, vou atribuir qualquer valor a essa variável. Na próxima linha, vou atribuir um valor a essa variável. Então, elemento de hemótipo igual ao documento. Linha Semigonni. Agora vou fazer o ping desse elemento em nosso console. Console de hemótipos, registro de pontos dentro da redonda ou elemento variável Os dois Semgro nesta linha. Se eu definir este arquivo e mostrar minha seção de casos, deixe-me mostrar, você pode vê-lo retornar o documento. É um objeto. Vamos ver o que está de lado nesse objeto. Se eu abrir este documento, você poderá ver toda a estrutura do HTML Ele retorna toda a estrutura HTML da nossa página. Se eu digitar document dot all e este for esse arquivo, agora você pode ver no meu console, ele retorna STM all collection Ele retorna todas as tags da nossa página SML. Com isso, ele retornou o número do índice da tag. Suponha que eu queira segmentar a seção do menu. Se eu estiver no Menu, você pode ver que ela está destacada em nossa seção de menu. Da mesma forma, se eu passar minhas cartas pela seção de cabeçalho, você verá o mesmo resultado. Agora eu quero retornar a seção do título. Para isso, vou limpar o console. Aqui vou digitar o documento Dot, tudo dentro da base quadrada, quero retornar o índice número dois. Em seguida, coloque dois pontos nesta linha. Se eu pressionar Enter, como você pode ver, está escrito nosso título. Hm. Mas se eu executar o mesmo comando aqui, deixe-me te mostrar dentro da base quadrada, eu vou passar dois e configurar esse arquivo, é escrito o mesmo resultado. Casa. Da mesma forma, temos muitos métodos de segmentação Um por um, vamos explorá-lo. Ajude-me a duplicar esta linha e comentar a anterior Agora eu quero atingir a seção da cabeça. Para isso, precisamos digitar o ponto d do documento . Aqui vou digitar a cabeça do ponto do documento. Se eu definir esse arquivo, você pode ver no console, ele retorna a estrutura TMS da seção principal Você pode ver o título, você pode ver o link, você pode ver a tag do script dentro da tag principal. Quero dizer, tem como alvo toda a seção da cabeça. E agora eu quero atingir o título. Novamente, vou debater esta linha e comentar a anterior, e vou digitar o título do ponto do documento Se eu definir esse arquivo, você poderá ver o resultado. Ele devolve o título para casa. Da mesma forma, se você quiser atingir toda a seção do corpo, você pode. Vou desviar essa linha e comentar a anterior, e vou digitar o ponto do documento Bonny Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele é escrito como nulo. Por que eu não sei. Vamos executar o mesmo comando diretamente em nosso console. Aqui vou digitar document dot boy. Se eu pressionar Enter, você poderá ver a seção completa do corpo. Você pode ver todas as etiquetas dentro da seção do corpo. Lembre-se de que você pode executar qualquer comando JavaScript na seção do corpo. Agora eu quero segmentar todos os links da nossa página HTML. Aqui vou fazer essa linha e comentar a anterior. Vou digitar links de pontos do documento. Se eu definir esse arquivo, você pode ver que ele retornará algo. Se eu abrir esse menu suspenso, você verá que ele retorna todas as tags ancha e o comprimento total da tag âncora é oito Temos que informar a tag H anchor nesta página. Se eu passar o cursor em nossa primeira tag âncora, você poderá vê-la destacando a seção inicial Da mesma forma, para As, se eu obtiver meu cursor, índice número um, ele destacará a seção Agora, quero focar particularmente no índice número dois. certos links, vou usar o square pass e aqui vou passar dois. Se eu definir esse arquivo, você pode ver, novamente, estar indefinido, por que eu não sei Vou executar o mesmo comando diretamente em nosso console. Copie este comando e aqui estou para pagar. Se eu definir esse arquivo, você pode ver que está escrito como Galeria. Da mesma forma, você pode segmentar imagens. Quero duplicar esta linha e comentar anterior aqui. Vou digitar imagens com pontos do documento Se eu definir esse arquivo, como você pode ver, ele é escrito em matriz, e se eu o abrir, você pode ver o tamanho da matriz um. Se eu abro meus carros nele, como você pode ver, ele destaca nossa imagem. Se você quiser direcionar essa imagem para isso, você precisa digitar a imagem de pontos do documento. Dentro dessas prensas quadradas, precisamos passar o número do índice, que é zero Os semi fazem essa linha. Se eu pressionar Enter, como você pode ver, está escrito, está escrito nossa tag de imagem. Mas se eu passar um número de índice que não está disponível, deixe-me mostrar imagens de pontos do documento. Dentro da prensa quadrada, vou passar uma. Os semi fazem essa linha. Se eu pressionar Enter, como você pode ver, está escrito indefinido. Porque não há imagem em um índice. Da mesma forma, você pode segmentar todos os formulários em sua página da web. Vou duplicar esta linha e comentar a anterior Mas agora não temos nenhum formulário nesta página da web. É por isso que ele retornará indefinido. Vou executar outro método de segmentação, que é hora do documento. Aqui está um. Ele executará esse tipo de documento nossa página HTML, tipo de documento HTML. Se eu definir esse arquivo, como você pode ver, ele é do tipo Doc HTML. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordaremos os restantes. Obrigado por assistir a este vídeo. 4. Tutorial de métodos de segmentação de DOM em JavaScript, parte dois: Então, novamente, estou de volta com um novo tutorial, e aqui vou concluir o método de segmentação restante Nosso próximo método de segmentação é o URL. Esse método é usado para segmentar o URL do site. Então, aqui vou digitar document.in URL maiúscula. Se eu definir esse arquivo, como você pode ver no Cazoo, ele gravará o endereço do servidor local como Porque você quer sair do servidor Local Vos. É por isso que ele escreveu esse URL. É o mesmo URL, você pode ver na minha barra de URL. Agora, semelhante ao URL, temos outro método chamado domain. Novamente, vou duplicar esta linha e comentar a anterior Vou digitar domínio. Se eu definir esse arquivo, ele retornará o nome de domínio real, deixe-me mostrar a você. Aqui você pode ver que está escrito o endereço IP e é nosso domínio. Sempre é escrito o nome de domínio real, não as outras páginas, como URL. Semelhante ao URL e ao domínio, temos a função, que é o melhor URI. Deixe-me mostrar. Aqui está o URI baseado em pontos do documento. Esse método também retorna o URL. Se eu definir esse arquivo, você poderá ver o resultado. Esse método retorna o URL completo. É escrito o URL com o nome do protocolo, e nosso protocolo é HTDP Todas essas são funções básicas de segmentação. Agora vamos usar o método principal de segmentação. No início, vou atacar o elemento por meio de sua IDA. Vou duplicar esta linha e comentar o anterior. Para o elemento de destino com nome de ID, precisamos digitar ponto do documento, elemento de porta por ID Dentro das prensas redondas, precisamos passar o nome de identificação. Agora, vamos voltar à página da tabela. Aqui você pode ver muitos IDs, IDs de rapper, IDs de cabeçalho, Mini e eu quero segmentar o ID do cabeçalho Vou copiar o nome. E de volta ao meu arquivo Min Dot Js. Dentro do código duplo, coloque-o para passar o DM e nosso Dym é Vamos configurar o arquivo e ver o que está escrito. Se eu definir esse arquivo, ele será escrito como nulo. Vamos executar o código diretamente no C Zoom. Copie a linha e, no myc Zoo, vou digitar document dot get element by ID header Se eu pressionar Enter, você poderá ver ele identificou nosso cabeçalho com sucesso. E se eu abrir, você pode ver dentro da etiqueta principal e dentro desse D, temos H uma etiqueta. Agora, usando esse método, quero direcionar Footer Novamente, vou digitar o elemento dot Gate do documento por ID e, dentro do curso duplo, vou digitar Footer Se eu pressionar enter, você pode ver que está escrito com o pé e D. Neste tutorial, eu ensino como podemos segmentar elementos pelo nome de usuário, ID, nome da classe, etc Mas em nossos próximos tutoriais, aprenderemos o que podemos fazer depois de direcionar esse elemento Agora vou segmentar o elemento por classe. Novamente, vou fazer essa linha e comentar anterior e quero digitar o elemento DoCung. Pelo nome da classe. Se pressionar para baixo e inserir o curso duplo, precisamos passar o nome da classe Novamente, estou de volta à página estável. Nesta página, ela usa apenas um nome de classe, content Image. Vou segmentar essa imagem pelo nome da classe. Vou copiar o nome da classe e voltar para o arquivo principal do meu cachorro. Dentro do curso duplo, vou pagar strep content image Se eu definir esse arquivo, você pode ver em Csoles uma coleção estável escrita Dentro dessa coleção de estimativas, temos apenas uma classe, de comprimento um. Outra questão é quando direcionamos o elemento pelo nome da classe, nesse caso, por que, em nosso console, uma linha escrita. Mas quando direcionamos o elemento por seu ID, nesse caso, ele é escrito diretamente na estrutura. Porque o ID é exclusivo porque precisamos usar o ID em uma tag específica. Não podemos usar a mesma ID várias vezes, mas para a aula, podemos usar a mesma classe várias vezes. É por isso que está escrito. Se você notar também que pode ver a diferença entre os nomes dos métodos, o nome do método é get Element. Mas para a aula, precisamos digitar get Elements. Porque o ID é exclusivo e a classe não. Se você quiser segmentar um índice específico para isso, precisará passar o número do índice. Aqui, em definir a base quadrada, vou passar zero porque o número do índice dessa imagem é zero e definir esse arquivo novamente, é sitter indefinido Vou executar esse código diretamente no meu console. E se eu pressionar Enter, você poderá ver o resultado. Ele retorna a tag de imagem com o nome da classe contendo a imagem, e agora vou segmentar os elementos pelo nome da tag. Novamente, vou duplicar essa linha e comentar a anterior E aqui, vou digitar get elements by tag. E dentro dos latões redondos, precisamos passar a etiqueta Vamos para a página de estimativa e, desta vez, vou segmentar essa tag UL. Eu copio o UL e, no meu arquivo JS, vou usar o payscript. Se eu definir esse arquivo, como você pode ver, novamente, ele escreveu uma coleção de tabelas porque em um documento de estimativa, podemos usar a tag UL várias vezes. Se eu abrir a coleção de estimativas, você pode ver que o comprimento total da etiqueta UL é três. Se eu mostrar meu índice desse arquivo estável, aqui você pode ver usamos a tag UL várias vezes na barra lateral do conteúdo e Se eu passar o cursor, o índice número zero, como você pode ver, ele destaca a seção do menu. E então eu coloco meu cursor no índice número um, ele destaca a seção de conteúdo. E se eu ultrapassar o índice número dois, ele destaca a seção lateral do verso. Agora eu quero segmentar a tag de URL específica. Eu quero focar nesta seção de versos laterais. Vou copiar o método, executar esse comando na seção do meu console e colá-lo. Depois da rodada ss, precisamos usar o quadrado *** e dentro dos vasos quadrados, precisamos passar o número do índice . Preciso passar dois. Se eu pressionar Enter, como você pode ver, ele seleciona toda a seção da barra lateral, que é feita com a tag UL, e você pode ver toda a tag LA dentro da tag UL Neste tutorial, aprendemos como podemos segmentar o elemento pelo nome da classe, pelo ID e pelo nome da tag. Também trabalhamos com outros métodos de segmentação. Isso é tudo para este tutorial. No próximo tutorial, aprenderemos os métodos get e set value. Obrigado por assistir a esta estátua em vídeo. 5. JavaScript DOM Obtenha tutorial de métodos: É bom ver vocês de volta, pessoal. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript Dom. E neste tutorial, aprenderemos como podemos obter valor de um documento estável. Além disso, aprenderemos como podemos definir valores em um documento estável. Para isso, vamos usar o método set e Gate. Em nosso tutorial anterior, aprenderemos como direcionar elementos Dom. Mas neste tutorial, aprenderemos a direcionar os elementos. O que podemos fazer com isso? Primeiro, aprenderemos o que podemos obter de um elemento. Em JavaScript, ajude o Dom, podemos obter três coisas. Atributo de texto Atm. Podemos obter três tipos de valor usando o método Gate. Para esses, o JavaScript tem alguns métodos diferentes. O primeiro método é o texto IAT. Esse método ajuda a obter texto de um elemento. A próxima é a tabela IRA. Está escrito o TM desse elemento, e nossos últimos três métodos ajudam a obter o atributo video, gate attribute, get attribute node e attributes Vamos ver como o InnerText e o Inertable funcionam. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão Lifesaver e abro meu documento ETL anterior Com isso, temos o arquivo Mindjs. Em primeiro lugar, vou resolver o problema. Se você se lembra, quando executamos função corporal documentada em nosso console, ela é escrita como nula Alguns dos comandos são escritos indefinidos, caso contrário, nulos. Então, primeiro, vou resolver esse problema. Como você pode ver, aqui usamos tag de script dentro da tag de cabeçalho, mas precisamos usar a tag de script. Eu recortei a tag do script daqui e vou usá-la antes do final da tag body e vou definir esse arquivo. Agora você pode ver que quando eu configuro esse arquivo, ele fica em toda a seção do corpo. Agora, nosso console, não retornará nulo, caso contrário, indefinido Agora podemos executar todos os comandos em nosso arquivo dot js principal. Mas qual é o problema? Se usarmos JavaScript dentro da tag head, nesse caso, o principal problema é que, quando salvamos nosso arquivo, ele carrega a tag scrip antes da tag body É por isso que nosso JavaScript não funcionará corretamente. É por isso que precisamos usar a tag scrip no final dessa tag body Agora funcionou perfeitamente. Então, vamos ao arquivo JS. No início, aprenderemos texto inerte. Então, vamos ao arquivo de ponto de índice t. Como você pode ver, temos um ID de cabeçalho e, dentro desse ID de cabeçalho, temos H uma tag. E agora eu quero extrair o texto da tag H one. Para isso, precisamos amarrar o ponto do documento, Gein by ID. Dentro da prensa redonda, precisamos passar o nome do ID, que é cabeçalho. Se eu definir esse arquivo, como você pode ver, ele gravará a tag de cabeçalho completa. Está escrito na estrutura de tabela adequada, mas eu quero retornar o texto inerte dessa tag Aqui, precisamos usar um método de porta, ponto, texto interno. Se eu definir esse arquivo, agora você pode ver o retorno do seu logotipo, apenas o texto. Deixe-me mostrar outro exemplo. Você pode ver meu arquivo de estimativa de pontos de índice. Aqui está o nome de ID contido neste conteúdo, temos a tag H one, a tag ING, a tag Bagrptag, etc Se eu passar esse ID, ele retornará todo o texto de uma vez. Deixe-me te mostrar. Aqui, vou passar o elemento get by ID dentro da tecla pressionada is content. Se eu definir esta página, como você pode ver, todo o texto da nossa seção de conteúdo será escrito. Eu não devolvo nenhuma tag HTML. É apenas um texto puro escrito. Esse é o uso do método de texto interno. Vamos falar sobre nosso próximo método, que é o HTML interno. Aqui, vou duplicar esta linha e comentar anterior aqui, vou digitar HTML interno Se eu definir esse arquivo, você pode ver que meu Cole escreveu toda a estrutura estimus dentro da seção de conteúdo Como você pode ver, todas as etiquetas de estimativa estão escritas com o texto. Se eu passar o cabeçalho aqui , vou substituir o conteúdo pelo cabeçalho. E isso neste arquivo, você pode ver que está escrito o HTML interno, H, com isso, está escrito o texto, seu logotipo. Esse é o uso desse método. A seguir, aprenderemos como podemos obter valores de atributos. Para isso, temos que dizer o método C, atributo, obter nós e atributos de atributos, e vamos começar com o método G. Também vamos descobrir a diferença entre get attribute node. Novamente, estou de volta ao código digital do meu estúdio silts. Então, primeiro, vou usar o método de atributo Gate. Aqui vou digitar o atributo Gate. E agora precisamos passar por corridas e fornecer o nome do atributo e o valor do atributo que queremos. Vamos voltar para a página da tabela. Como você pode ver neste D, temos apenas um atributo, ID, e aqui vou usar outro atributo. Classe de classe por enquanto, vou digitar XYZ e vou definir esse arquivo Agora eu quero retornar o nome da classe dessa tag. Aqui eu vou passar dentro da classe de código duplo. Se eu definir esse arquivo, você pode ver, você pode ver o console, ele escreveu o nome da classe, XY Z. Aqui, direcionamos nossa tag Dip usando seu ID, que é cabeçalho, e retornamos nome da classe desse elemento usando o atributo Gate Bathon Mas se eu passar a identidade aqui , o que acontece? IDENTIFICAÇÃO. Se eu definir esse arquivo, ele retornará o mesmo nome de ID, cabeçalho. Deixe-me te mostrar. Se eu definir esse arquivo, você pode ver no meu console um cabeçalho escrito. Vamos adicionar outro atributo a esse elemento. Aqui, vou adicionar outro atributo e o nome do nosso atributo é estilo e vou definir uma borda para esse elemento. Borda, um pixel. E eu quero um bôer sólido. Com isso, eu quero a cor vermelha. E eu vou configurar esse arquivo. E no meu arquivo Minto Js, aqui vou passar o nome do atributo , que é Estilo E agora ele retornará o valor do atributo de estilo. Se eu definir esse arquivo, você poderá ver o resultado, borda de um pixel, taxa de sólidos. Agora vamos falar sobre nosso outro método, que é get attribute non. Aqui, vou digitar get attribute no. Se eu definir esse arquivo, agora você pode ver em meus Csoles escrito o nome do atributo com seus Se você quiser retornar somente o valor do atributo, nesse caso, você precisa usar o atributo G, e se quiser retornar o nome do atributo com valor, nesse caso, você precisa usar get attribute no. Essa foi a principal diferença entre get attribute e get attribute no. Mas se você quiser retornar somente o valor usando esse método, sim, você pode. Você só precisa digitar o valor do ponto. Se eu definir esse arquivo, agora você pode vê-lo retornar apenas o valor. Agora vou falar sobre nosso método let's get, que é attributes. Esse método retornará todos os nomes de atributos desse elemento. Ele retornará uma matriz e, dentro dessa matriz , retornará todos os nomes dos atributos. Deixe-me mostrar as práticas. Voltando ao meu arquivo de estimativa de índice, você pode ver dentro desse ID de cabeçalho que temos um total de três atributos, ID , classe e estilo, e aqui vou digitar o atributo. Vou remover todos esses atributos de ponto do cabeçalho. Se eu definir esse arquivo, como você pode ver, ele gravará uma matriz. Desculpe, não está escrito em uma matriz, é escrito em um objeto. Se eu abrir esse objeto, como você pode ver, o comprimento total desse objeto é três. Porque temos que fazer três atributos nesse ID, classe e estilo do objeto. Se você quiser segmentar o atributo específico , sim, você pode. Suponha que eu queira atingir a turma. Para isso, depois do atributo, precisamos usar corridas quadradas e aqui precisamos passar o índice número um. Se eu definir esse arquivo, como você pode ver, ele gravará o nome do atributo e seu valor, XYZ Agora eu quero retornar somente o valor, não o nome do atributo. Para isso, basta digitar dot Value. Se eu definir esse arquivo, você poderá ver o resultado. É return XYZ. Com isso, você também pode retornar o nome do atributo. Para isso, apenas no nome do tot dot. Se eu definir esse arquivo, você poderá ver o resultado. Eu volto para a aula. Já aprendemos, usando esse método, como podemos obter valores de Dom. Isso é tudo para este tutorial. No próximo tutorial, aprenderemos os métodos de portas Dm Obrigado por assistir a este vídeo. Fique ligado. 6. Tutorial de métodos de conjunto de DOM em JavaScript: É bom ver vocês. Novamente, estou de volta com um novo tutorial e, neste tutorial, aprenderemos como podemos definir valores de dom. Colocamos todos os cinco métodos e, usando esse método, podemos atualizar qualquer valor de dom. Caso contrário, podemos adicionar qualquer valor dom. Podemos alterar o texto interno. Além disso, podemos alterar o HTML. Podemos definir um novo atributo, podemos remover o atributo. Sem perder tempo, vamos estudar a prática e ver como ela funciona Como você pode ver, lado a lado, abro meu editor de código do estúdio Visors e meu navegador usando a extensão de servidor ativo, e já abri meu arquivo TML anterior e o arquivo Mindtgs e o arquivo Mindtgs Vamos entrar no arquivo HTML com pontos de índice. Aqui você pode ver que temos um ID chamado header. Dentro dessa tag de cabeçalho, temos a tag H one. Eu decido que vou mudar o HTML interno desse ID. Quero dizer cabeçalho para tag com diferente, mas não vou mudar nada no meu arquivo de pontos de índice. Eu vou fazer o trabalho usando o método set. Para isso, estou de volta ao arquivo dot js principal. Aqui, vou vincular o elemento DCnDtg ao cabeçalho de ID. Em seguida, nosso nome de método dot inner TML. Porque eu quero mudar o interior. Igual a está nos códigos duplos, onde passar por essa árvore. Como eu disse, agora vou usar a tag header two. Aqui eu vou passar H dois, perto. H dois. Entre o segundo título, vou passar pelo inferno. Antes de configurar esse arquivo, vou transformar o HTML interno no meu console. Para isso, vá para passar o documento get element por ID, cabeçalho, par TML Em seguida, subgram para finalizar esta linha. Se eu definir esse arquivo, como você pode ver na parte do cabeçalho, ele sobrecarrega o conteúdo Ele substitui a tag H one tag H two porque alteramos o HTML interno. Inicialmente, segmentamos o elemento pelo nome de ID. Em seguida, mudamos o festival interno desse ID. Se eu mostrar que meu console está lotado, console, você pode ver o resultado. Aqui você pode ver agora nossa nova estrutura de estimativa é H um, dois, olá. Mas se eu imprimir esta seção interna de estimativa antes de alterá-la, deixe-me mostrar a você. Mas, primeiro, vou remover essa linha. Eu não preciso disso. Vou copiar essa linha e colá-la antes que elas sejam configuradas. Então, se eu definir esse arquivo, Opa, esqueci de imprimir esse elemento no meu console Copie essa linha e cole depois dessa linha. Se eu definir esse arquivo, agora você poderá ver o resultado. Nosso primeiro resultado veio antes da mudança e nosso segundo resultado veio depois da mudança. É assim que podemos alterar o HTML interno usando o método set. Da mesma forma, você pode definir o texto interno para qualquer elemento. Por enquanto, vou remover essas linhas. Eu não preciso disso. Agora vou mostrar como podemos alterar os atributos ves. Para isso, precisamos usar o atributo set, caso contrário, o método do atributo. Vamos para o estúdio de vistos codificados. Se eu mostrar meu arquivo de índice, como você pode ver, é nesta profundidade que temos vários atributos, ID, nome da classe, então agora eu quero alterar o atributo da classe V. Eu quero substituir xyz por AVC Vamos acessar o arquivo JS e ver como podemos fazer isso. No começo, vou duplicar essa linha e comentar a anterior Aqui, vou digitar o elemento dot get do documento pelo cabeçalho do ID. Nós segmentamos nosso elemento pelo nome de ID, e agora quero definir um novo nome de atributo. Para isso, precisamos usar o método set attribute, set attribute. Em seguida, vou remover as linhas incomuns. Eles não são necessários por enquanto. Então, dentro do latão moído, primeiro, precisamos passar o nome do nosso atributo, que é classe E em nosso segundo parâmetro, precisamos passar o nome do valor, que é ABC e sepgoron para Agora, vamos cantar o atributo em nosso console. Para isso, novamente, precisamos digitar um atributo de porta do método gate. Obtenha o atributo dentro do latão redondo, precisamos passar o nome do atributo, classe Se eu achar que você pode ver meu console, substituímos com sucesso o nome da nossa classe por ABC Se eu mostrar minha seção de elementos, como você pode ver, deixe-me mostrar uma oportunidade para substituir nosso nome de classe em meu cachorro por ABC substituir nosso nome de classe em meu cachorro É assim que podemos alterar o valor de qualquer atributo. Usando o método set attribute, você também pode alterar o valor CSS embutido Deixe-me mostrar o exemplo. Novamente, vou duplicar essa linha e comentar a anterior Desta vez, quero segmentar nosso atributo e o nome do atributo é estilo. Aqui vou passar um novo valor e nossa visão é borda, dois pontos e ela para passar os valores Borda, taxa de pontos de dez pixels, e eu quero definir a cor branca da borda. Se eu definir esse arquivo, você poderá ver o resultado. Substitua com êxito o valor CSS embutido usando esse método, mas esse não é o caminho certo Em nosso próximo tutorial, aprenderemos sobre isso. Se você quiser imprimir o valor em seu console, basta ela para digitar o estilo. Se eu definir esse arquivo, agora você poderá ver meu console, o valor, a borda, dez pixels, pontilhada e branca Basicamente, quero dizer que, com a ajuda do JavaScript, podemos alterar as propriedades do CSS e aprenderemos sobre isso em nossos próximos dois estúdios. Agora, vamos falar sobre nosso próximo método, que é o método de atributo. Novamente, vou duplicar essa linha e comentar a anterior Por enquanto, vou remover essas linhas desnecessárias e vou digitar document dot Gate Element by ID attributes. Como você sabe, precisamos ultrapassar Ry. Dentro das passagens quadradas, precisamos passar o número do índice e o número do índice da nossa classe é um. Se eu te mostrar por que o arquivo de índice, em nosso índice zero, nós o temos e em nosso primeiro índice, temos classe. É por isso que passo um e quero alterar o valor desse atributo. Eles passam o valor do ponto. Então precisamos usar igual a seno dentro do curso duplo, precisamos passar o valor, e eu quero definir o nome da nossa classe Z Z Z. Semi nesta Antes de configurar esse arquivo, quero imprimir nosso atributo em. Aqui eu vou passar na aula, vou definir esse arquivo. Agora você pode ver no meu Casole que ele substitui o nome da nossa classe Se você usar esse método, precisará se lembrar do número do índice. Mas em nosso método anterior, você precisa passar o nome do atributo. Essa é a diferença. Vamos falar sobre nosso último atributo, que é remover atributo. Esse atributo é usado especialmente para remover os atributos existentes. Então, vamos entrar no editor de código do estúdio e ver como ele funciona. Como você pode ver neste D, temos que fazer três atributos: ID, classe e estilo. Como você pode ver, essa cor de borda vermelha Dwb. Deixe-me aumentar o tamanho de dez pixels, e eu vou definir esse arquivo. Agora, quando você configura esse arquivo, você quer remover essa borda, e eu quero removê-la usando JavaScript. Vamos ao MinJSFle. Novamente, vou duplicar este slide e comentar o anterior E aqui precisamos passar o nome do atributo. O ponto do documento obtém o elemento pelo cabeçalho do ID, e nosso nome de atributo é remover atributo remover atributos. Então, dentro das prensas redondas, dentro dos códigos duplos, precisamos passar o nome do atributo e o nome do nosso atributo é estilo Semicon dois nesta linha. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver no meu navegador que ele removeu o atributo de estilo com seu valor. É por isso que agora não temos a borda dessa parte do cabeçalho. Se eu mostrar a estrutura estimada da seção de elementos, agora você pode ver dentro da tag body dentro desta div, que temos um cabeçalho Mas se você notar, você pode ver que temos apenas dois atributos, ID e classe. Ele removeu com sucesso o atributo de estilo. Mas se eu voltar ao meu arquivo index tal, você pode ver que nosso atributo de estilo ainda existe nessa profundidade. Neste tutorial, você aprende como podemos segmentar valores de cães e também podemos definir novos valores para nosso dom. Isso é tudo para este tutorial. Em nosso próximo tutorial, vamos definir o CSS. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo. 7. JavaScript DOM querySelector e querySelectorAll Tutorial: É bom ver vocês. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript Dom. Neste tutorial, você aprenderá dois métodos, consultas e seletor de consultas Em nossos tutoriais anteriores, aprendemos como podemos segmentar o elemento Dom por ID, por tema de classe, por tagni Mas o problema é que, se precisarmos direcionar objetos diferentes, nesse caso, você precisará usar três métodos diferentes. ID, obtenha elemento por ID ou classe, obtenha elemento pelo nome da classe e, para tag, obtenha elemento por tagnin. Mas o que? Se tivéssemos apenas um método para direcionar todos os elementos, quem poderia direcionar ID, nome da classe e tagnin Para isso, o JavaScript introduz dois métodos, o Qui e o seletor Qui Para o seletor QI, precisamos digitar o seletor Qui do ponto do documento Dentro do latão redondo, precisamos passar o seletor CSS. Da mesma forma, se você quiser usar o seletor Qi, para isso, você precisa digitar o seletor Qi do documento Dentro do latão redondo, você precisa passar o seletor CSS. Mas qual é a diferença entre o seletor de perguntas e o seletor de consultas Se você usar o QuerySelector, ele terá como alvo o primeiro objeto Talvez existam objetos semelhantes com o mesmo nome de classe, mas ele selecionará o primeiro. Mas se você usar o seletor de consultas, ele terá como alvo todos os elementos Essa é a diferença básica entre dois métodos, Qui e o seletor Qui Sem perder tempo, vamos estudar a prática e ver como ela funciona Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e já abri o HTML de pontos de índice do meu documento anterior Esse é o arquivo JavaScript, praticamos nossos métodos JavaScript. Vamos usar o primeiro método, que é o seletor de consultas Vou remover todas as linhas desnecessárias e aqui vou digitar o ponto do documento QuiriSelector Seletor de consultas. E dentro da base redonda, precisamos passar o nome do seletor e aqui eu uso seletor de ID, cabeçalho Para isso, precisamos usar hastExSin porque é um ID. Se você usar o nome da classe, nesse caso, precisará usar ponto antes do nome da classe, e eu quero alterar o TmL interno desse elemento Para isso, ela digita o método IRTML, IRTML igual a dentro do curso duplo, quero substituir o cabeçalho de uma tag pelo título da tag Para isso, eu uso a tag H dois, H dois. Entre essas duas tags, vou digitar Hadu. Na próxima linha, e esqueça, novamente, vou usar o seletor Kari all Aqui, vou substituir o elemento Gate por ID pelo seletor de consulta Seletor Kiri. Novamente, precisamos usar o sinal Hateg porque estamos selecionando o elemento usando seu ID É por isso que precisamos usar o HDAC e eu quero retornar o HTML interno desse elemento TML interno Se eu definir esse arquivo e mostrar meu console, como você pode ver no meu console, ele está escrito, está escrito no novo HTML interno, olá. Como você pode ver, o herói usa a tag de cabeçalho. Com isso, você pode ver as mudanças em nossa parte do cabeçalho. Lembre-se de que esse seletor terá como alvo o primeiro elemento do seu documento Por enquanto, vou comentar essa linha. Eu não preciso disso. Vou configurar esse arquivo novamente. E agora vou mostrar outro exemplo do método seletor de consultas Se eu voltar ao meu arquivo de índice dot t, como você pode ver, há uma lista de nomes de classes e usamos o mesmo nome de classe duas vezes. Se eu selecionar o nome da classe e copiar a lista de nomes da classe e, copiar a lista de nomes da classe em vez disso, o arquivo mend js, aqui vou digitar o seletor de consulta, nossa lista de nomes de classe Mas, como eu disse, para o nome da classe, precisamos usar ponto. Mas se você notar, você pode ver que toda a estimativa interna está escrita a partir do primeiro elemento Usando o seletor de consultas, podemos definir um novo valor, caso contrário, podemos entrar. Agora, vamos falar sobre nosso segundo método, que é o seletor de consultas Vamos ver como isso funciona. Se eu amarrei o seletor de consultas e esse arquivo, agora você pode ver, opa, precisamos remover o EstiML interno porque vamos selecionar vários elementos Agora você pode ver que meu Csole está escrito na lista de nós e o comprimento dessa lista é dois Se você notar, você pode ver primeiro usamos a lista de nomes de classes com a tag UL, depois você usa a lista de nomes de classes com a tag de parágrafo. Se eu mostrar por que o arquivo ETL de pontos de índice, primeiro usamos o nome da classe com a tag UL e, em seguida, você usa o mesmo nome da classe com a tag do parágrafo A vantagem de usar esse método é que aqui podemos usar o nome da classe, o nome tag e o nome do ID. Aqui você pode usar qualquer tipo de seletor para direcionar o elemento Semelhante a outro método, se você quiser segmentar uma tag de parágrafo, para isso, aqui você precisa passar. Dentro desse latão quadrado está o número do índice. Um. Se eu definir esse arquivo, você poderá ver o resultado. Você pode ver no Csole a tag completa do parágrafo. Você pode ver o nome da classe, você pode ver o conteúdo, etc Deixe-me mostrar outro exemplo, qui Selector all. Se eu mostrar meu ponto de índice t será arquivado, como você pode ver, usamos a tag UL várias vezes. Nós o usamos em nossa seção de conteúdo. Usamos essa tag em nossa seção cibernética, também a usamos em nossa seção de menu. E agora vou usar o Bath Wood pelo nome da etiqueta. Em vez das prensas redondas, temos que passar o nome da etiqueta e o nome da nossa etiqueta é UL Como vou remover o número do índice por enquanto, não preciso dele. Se eu definir esse arquivo, você certamente poderá ver a lista de nós. Se eu abrir essa lista de nós, você verá que o comprimento total da etiqueta UL é três. Um por um, se você quiser retornar o HTML interno, sim, você pode Para isso, aqui você precisa amarrar o quadrado ss e, dentro do vestido quadrado, precisamos passar o número do índice. Eu quero retornar o índice número dois. Em seguida, precisamos usar o dot inner TM. Se eu definir esse arquivo, você pode ver o Console, ele escreveu toda a seção interna de estimativa do índice número dois. Está escrito no menu lateral, lista itens, página inicial sobre nós, galeria, entre em contato conosco, etc Agora vou usar o pequeno seletor Advanced ***. Você pode ver meu ponto de índice no arquivo. Dentro da seção do cabeçalho, temos a tag H one, seu logotipo, e podemos selecionar o elemento H one usando esse ID. Deixe-me te mostrar. Aqui vou remover este, não preciso dele dentro dos códigos duplos, vou digitar nosso espaço de cabeçalho de nome de ID e o nome do elemento H one. Se eu definir esse arquivo, você poderá ver o resultado na zona Mica. É escrita a tag H one, que está dentro da seção do cabeçalho. Se eu voltar ao arquivo Y, indexar o ponto M e molhar essa linha várias vezes, aceite esta. Agora você pode ver dentro da lista de nós que temos um total de três tags H uma. Essa seleção avançada retornará todas as tags H one do elemento de cabeçalho. Basicamente, quero dizer que, se você usar esse método, ela pode usar seletores CSS avançados Este é o uso do seletor Cir e do método Query seletor all Usando um seletor, podemos segmentar todos os tipos de atributos, ID, classe, estilo etc Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 8. Tutorial de métodos de estilo JavaScript DOM CSS: É bom ver vocês de novo. Estou de volta com um novo tutorial, realtate JavaScript Dom. Neste tutorial, aprenderemos os métodos de estilo CSS do Dom Basicamente, temos três métodos que podem ser usados para estilizar CSS Dom. O primeiro método é estilo e o segundo método é nome da classe e o terceiro método é lista de classes. Usando esse método, você pode obter CSS Vu. Caso contrário, você pode definir CSS então. Suponha que você queira extrair a propriedade CSS do elemento. Para isso, você pode usar para isso, você pode usar diretamente o método Style. Além disso, você pode definir um novo valor usando o método Style. Vamos começar a prática e ver como ela funciona. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão Live Server e abro meu nome de documento de estimativa anterior, índice, ponto de índice, HTML. Com isso, eu abro o MindJSFle. Em primeiro lugar, vamos estilizar a parte do cabeçalho. Em primeiro lugar, vou mostrar o exemplo da propriedade de estilo. Se eu mostrar meu arquivo estável de índice A, como você pode ver neste D, temos um ID chamado cabeçalho e também temos o atributo de estilo neste D. Vou direcionar esse elemento usando o ID do cabeçalho. Copie o nome do ID e volte para o meu DoJSFle principal e eu vou vincular o seletor de consulta de pontos do documento à vincular o seletor de consulta de pontos do documento tag ou ao nome do ID Em primeiro lugar, vou mostrar como podemos obter propriedades de estilo desse elemento. Para isso, você precisa digitar o estilo de ponto. Se eu mostrar meu ponto de índice T, como você pode ver, dentro do nosso atributo de estilo, temos uma borda de nome de propriedade. Eu quero obter o valor da propriedade fronteiriça. Eu copio a borda do nome da propriedade e volto para o meu arquivo Js principal e, aqui no estilo superior, vou usar o ponto e a borda do nome da propriedade. Antes de configurar este arquivo, vou abrir meu Cul e inspecionar o Czome Se eu definir esse arquivo, você pode ver meu calzone é escrito no valor da propriedade border a partir do elemento do cabeçalho Você pode obter o valor CSS dessa matemática. Mas se eu passar uma propriedade que não é mais fácil em nosso elemento, deixe-me mostrar para você. Como você pode ver, aqui usamos apenas propriedades fronteiriças. Não usamos nenhuma outra propriedade CSS, como preenchimento de cores. Se eu digitar a cor aqui e, em seguida, definir esse arquivo, como você pode ver no meu console, ele será escrito em branco. Agora vou definir uma cor de fonte para nossa seção de cabeçalho. De volta ao nosso arquivo Idexot TML e aqui vou digitar ponto e vírgula e depois do ponto e vírgula, vou usar outra propriedade colorida vou usar Cor yulu. Se eu definir esse arquivo, você poderá ver meus consoles escritos em amarelo Por enquanto, vou remover o modo responsivo e, se eu digitar algo dentro desse D , vou digitar hello. E defina esse arquivo. Agora você pode ver na minha seção de cabeçalho, a cor da fonte é Lu. É assim que podemos obter o valor da propriedade CSS usando o método style. Agora vou mostrar a você, usando o método style, como podemos definir uma nova propriedade CSS em um elemento. Em nosso exemplo anterior, obtemos valor usando o método style e agora vamos aprender como podemos atribuir um novo valor de propriedade a um elemento TML Agora eu quero definir a cor de fundo para esse elemento. Estou de volta ao meu arquivo Minot Js e vou copiar esta parte, comento esta linha Na próxima linha, vou colá-lo. Agora eu quero dar um toque de cor a esse D. Para isso, aqui precisamos digitar o método de estilo de ponto Depois disso, precisamos passar o nome da propriedade CSS, que eu quero dizer neste elemento, e eu quero dizer pincelar a cor Aqui vou digitar a cor de fundo, cor de fundo, e quero usar um semicícone azul nessa linha Lembre-se de que, em CSS, precisamos usar um traço entre o fundo e a cor Mas na Java Street, você não precisa usar o sinal de traço e também precisa capitalizar o caractere C. Vamos configurar o arquivo e ver o que ele retorna. Depois de definir esse arquivo, você pode ver o resultado. Aqui você pode ver que permanece a cor de fundo do cabeçalho. Eu não defino meu arquivo de tabela, por isso que hello ainda existe em nossa parte do cabeçalho. Vamos configurar o arquivo de índice novamente. Agora desapareceu. Se eu mostrar minha seção de elementos e como meus carros estão nessa parte do cabeçalho, aqui você pode vê-la definir uma nova propriedade CSS, que é cor de fundo, cor de fundo, azul. Da mesma forma, quero adicionar outra propriedade a esse elemento. Novamente, vou duplicar essa linha e vou comentar a anterior Agora eu quero adicionar preenchimento. Aqui, vou remover a cor azul e a propriedade da cor de fundo e, depois do estilo, vou digitar preenchimento Para cada direção, quero um preenchimento de 50 pixels. Tipo hemo de 50 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Ele adiciona preenchimento de 50 pixels de todas as direções. Aprendemos como podemos definir valor e obter valor usando o método de estilo. Agora vou falar sobre nosso segundo método, que é o nome da classe. Com eles, você pode obter qualquer valor de classe. Como você pode definir qualquer nome de classe. Vamos estudar a prática e ver como ela funciona. Vamos voltar ao arquivo Atable. Como você pode ver no fundo da nossa cabeça, temos uma classe chamada XYZ, e vou removê-la agora Agora, neste elemento, não temos nenhuma classe e eu quero dizer um nome de classe para esse elemento. Agora, vamos ao arquivo dot js principal. Primeiro, vou pegar essa linha e comentar a anterior. Aqui, vou digitar o nome do método ponto do seletor de consulta de pontos do documento , que é o nome da classe. Nome da classe. E eu quero definir um novo nome de classe e nosso nome de classe é ABC Além disso, quero obter o nome da classe e imprimir o nome da classe no meu console. Para isso, novamente, vou duplicar essa linha em Digitar nosso elemento de nome de variável Elemento igual ao cabeçalho do seletor Dot Quay do documento e eu quero retornar apenas o nome da nossa classe Eu não quero definir de qualquer maneira. Se eu definir esse arquivo e mostrar meu console, ele será escrito ABC Aqui, definimos um novo nome de classe e obtemos um novo nome de classe usando esse método. E você também pode ver o nome da classe na minha seção de elementos, classe ABC Agora você pode ter uma pergunta: qual é o uso prático desse método? O que podemos fazer depois de mudar o nome da classe? Deixe-me te mostrar. Para isso, precisamos entrar em nosso estilo de arquivo CSS CSS. Aqui eu vou estilizar uma aula. Aqui você pode ver que já estilizamos nosso elemento de cabeçalho usando o ID do cabeçalho. Mas agora eu quero adicionar um pouco de preenchimento. Para isso, podemos usar essa classe, e o nome da nossa classe é ABC ABC Em vez dos calibres, vou digitar preenchimento. Acolchoamento de 50 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Está acolchoado de todas as direções. Mas se eu voltar ao meu arquivo Dogs principal e pregar essa linha e definir esse arquivo, você pode ver que agora não há preenchimento porque agora não atribuímos nenhum nome de classe AVC Se eu mostrar minha seção de elementos, como você pode ver, não há nome de classe ABC, mas já estilizamos essa classe em nossa seção de estilo Se eu descomentar essa linha e definir esse arquivo novamente, como você pode ver, ele será preenchido de todas Se eu voltar ao meu console, você poderá ver o nome da classe ABC novamente. Portanto, esse é um dos principais usos práticos desse método, nome da classe. Usando esses métodos Dom, podemos definir qualquer propriedade CSS, qualquer atributo para os elementos da nossa tabela. Deixe-me te mostrar uma coisa. Podemos definir várias classes ao mesmo tempo usando esse método. Aqui, vou digitar XYZ. Se eu definir esse arquivo, como você pode ver, agora está feito o nome das duas classes, ABC e XYZ Mas se eu selecionar esse elemento e mostrar essa parte do estilo, agora você pode ver que o preenchimento vem de apenas uma classe que é ABC, não de Agora, vamos falar sobre nosso último método de estilização CSS, que é lista de classes e qual é a diferença entre lista de classes e nome de classe Vamos começar a prática. Então, primeiro, vou duplicar essa linha e comentar anterior e digitar o nome do método Lista de turmas. Se eu definir esse arquivo, você pode ver meu console, ele gravou o mesmo resultado. É escrito e transmitido e, nessa string , escreveu o nome da classe. Mas se eu digitar a lista de classes aqui, deixe-me mostrar e depois sufocar, agora você pode ver que está escrita em uma matriz, lista de tokens dom Se eu abrir essa lista suspensa, você poderá ver esses dois nomes de classe atribuídos a um número de índice diferente Em número de índice zero, atribuiu ABC, em um número de índice, atribuiu XYZ A lista de classes retorna a matriz, mas o nome da classe retorna a string. Mas a principal diferença é que essa função vem com seus próprios métodos. Não vou mostrar todo esse método neste tutorial, mas neste tutorial, mostrarei os dois métodos ou o primeiro método é um. No início, removerei todo esse nome de classe, XY D e AVC, e no meu arquivo de tabela, aumentarei o nome da classe aqui, classe E se eu definir esse arquivo, você verá que não há alterações porque já adicionamos uma propriedade CSS em nosso arquivo de estilo. Agora, neste elemento, eu quero adicionar uma nova classe com AVC para isso, precisamos usar o método add Vou remover tudo isso e sua classe de tipo les dot e, usando esse método, podemos adicionar várias classes. Aqui eu vou adicionar um nome de classe QWE. Se eu definir esse arquivo, você pode ver no meu console que ele retornou ao nome de classe ABC e QWE Mas em nosso arquivo estiv, aqui atribuímos apenas uma classe ABC Mas atribuímos a segunda classe do dom Javascript. Se você quiser adicionar outra classe com isso, sim, você pode. Apenas entre aspas, vírgula heróica e dentro das aspas duplas, você pode passar por outra classe n e seu tipo Se eu definir esse arquivo, você poderá ver meu console. Agora temos que fazer três classes neste elemento, ABC, QW e Usando esse método de adição, você pode adicionar várias classes ao mesmo tempo. Agora, vamos falar sobre o método next plus list, que é remover. Primeiro, vou remover esse método, adicionar e depois voltar ao meu arquivo indexOdeTable aqui dentro da classe, vou atribuir a outras classes na minha página de tabela X Y e ASD. Vou configurar esse arquivo. Para configurar esse arquivo, você pode ver meu console. Eu escrevi four plus name porque não salvamos nosso arquivo Mind js. Se eu definir esse arquivo, você poderá ver o resultado. Agora ele se senta em uma flecha. Como você não usa nenhum método aqui, é por isso que ele está sentado em uma flecha. Mas se eu comentar essa linha e definir esse arquivo, agora você pode ver no meu console é o nome de três classes, ABC XYZ Agora eu quero remover uma das classes dessa lista. Eu quero remover a classe XYZ. Aqui eu vou usar um nome de método. Remover. Eu descomento esta linha e aqui vou digitar remove Dentro das prensas redondas, precisamos passar o nome da classe e eu quero remover XYZ Dentro da pose dupla, vou digitar XYZ. Se eu definir esse arquivo, você poderá ver o resultado. São **** dois nomes de classes ABC e ASD. Usando esse método de lista de classes, você pode remover nomes de classes. Além disso, ao mesmo tempo, você pode remover vários nomes de classes. Com isso, eu quero remover a classe ASD. Então, por coma, dentro do curso duplo, você precisa digitar ASD. Agora está escrito apenas um nome de classe, ABC. Eu tenho as duas classes, XYZ e ASD. Mas se eu mostrar meu índice ou arquivo de estimativa, todas as três classes ainda existem nesse elemento. Mas usando Dom, removemos o nome da classe XYZ e ASD. Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos a adicionar até mesmo um ouvinte Além disso, abordarei todos os métodos da lista de classes em nossos tutoriais em andamento Obrigado por assistir a esta estátua em vídeo. 9. Tutorial de método JavaScript addEventListener: É bom ver vocês. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript. Neste tutorial, vamos aprender JavaScript, adicionar event listen. Todos esses são eventos básicos e sabemos como podemos usá-los. Para esses eventos, precisamos usar event at tribu. Como você pode ver neste botão, definimos um evento ao clicar e, após clicar, esse botão chamará a função AVC Dessa forma, podemos adicionar eventos em qualquer tag estável. Suponha que você queira chamar uma função ao passar o mouse sobre uma imagem. Para isso, você precisa usar esse evento com o mouse enter. Se você aprende JavaScript básico, você já está familiarizado com isso. Mas há um problema com essa técnica. Toda vez que precisamos voltar ao nosso documento de estimativa para definir esse atributo. Aqui, usamos eventos em linha e isso cria nosso arquivo estiv pesado e complexo Não queremos bagunçar o atributo Javascript com o estim tank. Para isso, o Javascript vem com duas soluções. Em nossa primeira solução, atribuímos o evento com a ajuda do dom. Você pode ver, ponto do documento Obtenha elemento por ID, selecionamos o elemento específico por seu nome de ID, depois definimos o evento específico e chamamos a função. Sempre que marcar o elemento estim, você chamará a função Deixe-me mostrar o exemplo prático e ver como é juramentado Como você pode ver, lado a lado, abri meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver Abri meu documento anterior t file e mendot Js. Agora, em nosso arquivo JavaScript, vou ligar para nosso evento Sempre que clico nessa parte do cabeçalho, quero alterar a cor do plano de fundo. Em primeiro lugar, vou sintonizar esse elemento pelo nome de ID Aqui vou digitar o elemento Documen gate por ID. É nos versos redondos, precisamos passar o nome de identificação e a Dama é, como você pode ver, como você pode ver, Copie o nome do ID e cole-o aqui. Agora, aqui precisamos passar o nome do evento. Vou digitar ponto e o nome do nosso evento está em P. Igual a e aqui precisamos chamar o nome da função e o nome da nossa função é ABC Eles vão para esta linha. Agora, chamamos a função, mas não a criamos. Para isso, vou criar a função. Ele digita a função, e nome da nossa função é ABC round braces Em seguida, dentro do calicis quero mudar a cor de fundo do cabeçalho ao clicar nele Novamente, precisamos selecionar esse elemento, e eu quero selecionar esse elemento pelo nome de ID. Copie esta linha e cole aqui. Estilo de pontos. E já aprendemos sobre o método de estilo em nossos tutoriais anteriores Depois do estilo, precisamos passar o nome da propriedade e eu quero mudar a cor de fundo do plano de fundo. Fundo, igual a, e eu quero dizer que é cor verde. Então semine nesta linha. Agora eu vou configurar esse arquivo, configurar esse arquivo, e quando eu clicar nesta seção de cabeçalho, como você pode ver, a cor vai mudar. É cinza a verde. Deixe-me te mostrar novamente. Se eu reprimir esta página, como você pode ver, agora a cor de fundo do cabeçalho é cinza Mas se eu clicar nele, como você pode ver, ele fica verde. Dessa forma, podemos adicionar eventos em nossa tag de estimativa. Nos próximos dois, mostraremos como podemos usar o método Add even Eisner Agora, vamos falar sobre o método Add even Eisner. É o Vo muito útil em JavaScript. Depois de selecionar o elemento, precisamos digitar Add Even Esner É o nome do método. Depois disso, você precisa passar dois parâmetros. Então, você precisa passar pelos três parâmetros, mas por enquanto, vou mostrar dois parâmetros. Em nosso primeiro parâmetro, precisamos passar o nome do evento. Lembre-se, para o método de clique, basta digitar kick not on Tk. Da mesma forma, para um mouse Enter, basta digitar Enter do mouse e para um Kik deval, precisamos digitar DVO Em nosso próximo parâmetro, precisamos passar o nome da função. Caso contrário, você pode criar a função embutida. Se você não quiser chamar a função, você pode criar a função nessa linha. Você precisa digitar a palavra-chave da função, depois pressionar e, dentro da calibração, você pode passar sua declaração Então, vamos começar a prática e ver como podemos usá-la. Novamente, estou de volta ao Visa Studio Code Reader. Aqui, vou usar o método Add even listener e vou chamar a função AVC Alguém remova esse slide e eu vou digitar add even listener E então precisamos usar ss redondo e aqui precisamos passar para dois parâmetros. Em nosso primeiro parâmetro, precisamos passar o nome do evento, que é lick E em nosso segundo parâmetro, precisamos passar o nome da função, que é ABC Se eu colocar este arquivo e passar cursor nesta sessão de cabeçalho e se eu elogiar, clique, como você pode ver, novamente, ele se transformará em cinza para verde É assim que funciona. Como eu disse, é um método muito popular porque, usando esse método, podemos adicionar vários eventos em um elemento. Deixe-me mostrar a demonstração. Vou duplicar essa linha e aqui vou digitar Adnllar e o nome do nosso evento é Muse Enter, Muse Enter Como eu disse, se usarmos esse Bathod, não precisaremos digitar o nome completo do nosso evento Só precisamos digitar o mouse Enter, não o Enter do mouse. Agora vou criar uma função embutida. Não quero passar nenhum nome de função aqui. Para isso, aqui precisamos usar a função queer. Dentro das prensas redondas, não quero passar nenhum parâmetro por enquanto Então precisamos usar Cariss dentro dos cálices, precisamos passar essa declaração Em primeiro lugar, quero selecionar o mesmo elemento pelo nome iD Vou copiar essa linha e colá-la dentro do Cass. Em seguida, vou digitar a função de estilo. Estilo, ponto e, desta vez, quero brincar com a propriedade de borda desse elemento. Vou digitar estilo ponto, borda igual a dentro do código duplo. Vou passar então um pixel sólido e quero uma borda azul. Aqui vou passar o ponto e vírgula para finalizar essa linha e definir esse arquivo Agora eu quero abrir meu cursor nesta parte do cabeçalho. Se eu abrir meu cursor nessa parte do cabeçalho, você pode ver que ele estende o peso da nossa borda em até dez pixels. Com isso, ele definiu uma borda de cor azul. Agora é executado no evento Mouse Enter. Se eu clicar nele, ao mesmo tempo, você pode ver que ele se transformou em verde e, em seguida, executa o evento de clique. Usando esse método, ao mesmo tempo, podemos adicionar vários eventos. Agora vou te mostrar outra árvore. Aqui, vou usar o mesmo evento no mesmo elemento ao mesmo tempo, mas para tarefas diferentes. Vou revisar com o mouse Enter e aqui vou digitar clique novamente. E eu vou configurar esse arquivo. Como você pode ver, agora a cor da borda é vermelha e a largura da água é dois pixels, com a cor de fundo cinza. Se eu clicar nele ao mesmo tempo e ao mesmo tempo , ele mudará a cor do fundo. Também mudou a largura da borda e a cor. Esse truque é possível se você usar somente esse método, adicione até mesmo um ouvinte Agora, deixe-me mostrar outra coisa avançada. Aqui você pode ver que direcionamos esse cabeçalho de elemento e atribuímos evento a esse elemento P e também estilizamos o mesmo elemento em nossa função. Podemos usar um atalho e remover esta seção daqui. Aqui eu vou usar essa palavra-chave. Este estilo de ponto é uma borda de pontos. Isso significa o elemento que almejamos, e aqui temos como alvo a parte do cabeçalho. Usando essa palavra-chave, podemos reduzir alguns caracteres dela. Se eu definir esse código e passar por cima desta seção do cabeçalho e clicar nela, você verá o mesmo resultado Isso não afetará nosso resultado. Isso é tudo para este tutorial. No próximo tutorial, falaremos sobre o terceiro parâmetro da função Add even listener Obrigado por assistir a este vídeo. 10. Tutorial de método JavaScript addEventListener, parte dois: Então, já aprendemos como podemos usar a matemática do ouvinte de Aden. Primeiro, precisamos passar o nome do evento. Em seguida, precisamos passar o nome da função, mas há outro parâmetro que é totalmente opcional, e o nome do parâmetro é use capture. Esse parâmetro retorna para um falso testamento. Agora, qual é o significado disso? Vamos tentar entender qual é o significado disso. Aqui você pode ver dois contêineres externos e internos. O primeiro é o dip externo e o segundo é inato, você disse, clique no evento, inicialize o D Agora, se você clicar na seção Di interna, ele acionará automaticamente o dip externo T. Quero dizer que, nesse caso, ele executará os dois eventos, e se você quiser executar o evento interno Deep, então você deseja executar o evento Dip externo Nesse caso, você precisa usar o parâmetro Capture. Vamos começar a prática e ver como podemos usá-la. Como você pode ver, lado a lado, abro meu editor de código do Visor Studio e meu navegador usando IceReRetension, e eu já criei um TML e já criei um arquivo TML chamado index two TML Com isso, eu crio um arquivo JavaScript maint dot Js. Como você pode ver, no meu navegador, temos o Outer Deep e o Inund, agora vou adicionar a um evento semelhante os dois profundos E então vamos ver como podemos usar o SceptureParameter Primeiro, vou focar no elemento. Vou digitar o ponto do documento QuiriSelector. Dentro da redonda, coloque-a para passar o nome do elemento usando o ID Então, digitar tem tag e o nome do ID é interno. Primeiro, eu miro o elemento interno. Em seguida, vou usar o ponto aqui. Vou usar adicionar vendedor de eventos, nosso nome do evento é Aqui, vou criar a função embutida. Eu quero digitar a função de vírgula. Função: resinas redondas. Está no Calories. Esses pontos têm estilo de fundo igual a, e eu quero uma cor de fundo verde quando clico em INT. Verde. Vamos para essa linha. Se eu definir esse arquivo e clicar nessa seção inata, como você pode ver, ele ficará verde Quero definir esse arquivo e voltar para a posição anterior. Ao mesmo tempo, adicionarei o mesmo evento em nossa seção externa Dip Eu quero pegar essa linha e vou desmaiar. Eu quero a cor de fundo. Não. E eu vou configurar esse arquivo. Nestes programas, não usamos nosso parâmetro use capture. Então, primeiro, vou mostrar a vocês a devastação sem usar a captura Então, vou configurar esse arquivo novamente e clicar na seção interna Dip Quando clico em Em uma seção de mergulho, como você pode ver, isso também afeta a seção de imersão externa Para deixar isso mais claro, vamos adicionar uma caixa de alerta dentro desse evento. Aqui vou digitar alert e dentro da caixa de alerta, vou digitar D interno DF interno DF externo DV Eu vou digitar O D. Vou definir esse arquivo Agora, se eu clicar na seção Inadi, como você pode ver, primeiro ela roda inerte D. Se eu pressionar OK, então ela corre para fora D. Mas se eu passar o terceiro parâmetro, que é use capture e eu quero passar Além disso, vou passar dois parâmetros para nossa saída D. É verdade que vou definir esse arquivo. Se eu clicar na minha seção interna, agora você pode ver que a primeira parte está acabando. Se eu pressionar OK, ele será executado em D. É possível passar o valor quando passamos o valor, tanto o elemento, quanto se eu passar false, ambas as funções, deixe-me mostrar que eu passo cai, também, vou passar wholesa Cai e defina esse arquivo e clique na seção Iativa. Agora você pode vê-lo executando a função padrão. Primeiro, ele executa um evento Iative, depois executa um evento Diff Esse é o uso básico desse parâmetro. Agora, vamos falar sobre nosso método st, que é remover ouvinte de eventos Como você pode ver, aplicamos o evento de clique várias vezes em nossa parte do cabeçalho. Nosso evento de primeiro clique mudará a cor de fundo e nosso evento de segundo clique mudará o estilo da borda. Como você pode ver, opacamos nosso arquivo de exemplo anterior. E aqui usamos eventos de dois cliques. Então, primeiro, vou remover a segunda função. E então eu vou mudar o nome do evento, e vou mudar a esquerda do mouse. Vou configurar esse arquivo. Como você sabe, quando usamos esse evento, sempre que passamos o cursor sobre esse elemento e removemos o cursor, ele aplicará essa função. Deixe-me te mostrar. Vou passar o cursor nesta seção do cabeçalho. Se eu remover meu cursor, como você pode ver, a cor de fundo será alterada. Mas eu quero remover esse evento. Como podemos remover esse evento? Para isso, removemos a função de ouvinte de eventos. Novamente, vou selecionar a parte do cabeçalho para obter essa linha. : Vou empatar, adicionar um ouvinte de eventos e aqui vou usar outro evento, ou seja , vou chamar uma função diferente e o nome da nossa função é XYZ Então, vamos criar a função. Vou digitar function, XYZ, depois chaves redondas Em seguida, dentro dos cálculos. Vou digitar ponto do documento, elemento G por ID, e nosso nome de ID é cabeçalho. Copie essa parte e cole-a dentro das chaves redondas. Dot, agora precisamos usar a função, que é remover o evento isonRmove event E aqui precisamos passar o nome do evento, que evento eu quero remover. Quero remover esse evento Muse. Primeiro, precisamos passar o nome do evento que é Muse, copiar o nome do evento Dentro dos códigos duplos, vou passá-lo, e então precisamos passar o nome dessa função e o nome da função é ABC e continuar para N neste slide Então, depois de definir esse arquivo, espero que meus carros estejam e removo meu cursor da parte do cabeçalho. Agora você pode ver, novamente, que ficou verde. Mas se eu definir esse arquivo novamente desta vez, vou clicar nessa parte do cabeçalho. Quero ligar para o evento de cliques. Depois de pressionar, clique em evento e, se eu remover meu cursor dessa posição, como você pode ver, ei, não está funcionando. Opa, fiz uma silastia porque passo o nome da função dentro do código Dole Não preciso passar o nome da função dentro dos códigos Dole Então, vou configurar esse arquivo novamente. Novamente, vou mover meu cursor nessa parte do cabeçalho. Desta vez, vou pressionar o clique. Pressione totalmente o clique e, se eu remover o cursor dessa parte, como você pode ver, agora o fundo não mudou de cor Esse é o uso do remove event listener. Esse método é usado para remover Evans. Como você pode ver, para remover o evento mouse lif, dissemos outro evento, que é clique Depois de pressionar o clique, ele chamará essa função XYZ e, em nosso XYZ , usamos o método remove even Listener E esse método, vai remover esse evento dessa função. É assim que podemos usar a função remove even Listener. Então, obrigado por assistir a este vídeo. Fique ligado nos nossos próximos dois estúdios. 11. Tutorial de métodos de lista de JavaScript: Olá, pessoal. É bom ver você de volta. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript Dom. E neste tutorial, vamos aprender métodos de lista de classes. Em nossos tutoriais anteriores, já aprendemos um pouco sobre o método de classe Aprendemos sobre adicionar método e remover método. Aprendemos usando esse método, como podemos adicionar classe a um objeto. Além disso, aprendemos como podemos remover uma classe de um objeto. Sem isso, existem muitos métodos, como alternar conteúdo, item, comprimento Então, um por um, vamos aprender todos esses métodos. Então, vamos começar a adicionar e rever o método. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e já criei um documento de estimativa chamado index dot Como você pode ver em nossa seção de cabeçalho, já definimos uma classe, classe AVC, se você mostrar esse arquivo de estilo, como você pode ver, a cor de fundo vermelha vem da classe ABC Agora eu quero adicionar uma nova classe ao clicar nessa parte do cabeçalho. Para isso, vamos usar a classe last Mthons. Quero adicionar outra classe chamada XYZ a esse elemento. Mas antes, vou estilizar essa aula. Então, aqui vou criar um nome de classe XYZ, X Y Z e hem com a cor de fundo verde Vou configurar esse arquivo. Por enquanto, isso não afetará nada. Agora é hora de entrar no arquivo Mind js. Aqui você pode ver que já usamos o método Aden Listener. Eu também uso o ClickEBN depois de clicar nesta seção de cabeçalho, quero chamar a função AVC Por enquanto, nossa função está completamente em branco. Agora, depois de clicar nesta seção, quero adicionar uma nova classe usando o método classist Para isso, precisamos digitar document dot get element by ID header. Deixe-me mostrar a você a lista de classes de métodos. Lista Plus. Aqui eu vou digitar plusls dot a. São os versos redondos, vou passar o nome da classe, e o nome da classe é vou passar o nome da classe, e o nome da classe XYZ Em seguida, semigraun para terminar esta linha. Agora, vamos inserir o arquivo e clicar na seção do cabeçalho. Depois de clicar nesta seção de cabeçalho, como você pode ver, ela preenche a cor de fundo com verde, se eu mostrar meus elementos do console e se eu abrir minha seção de cabeçalho, como você pode ver, ela adiciona uma nova classe ao nosso elemento de cabeçalho, XYZ e a cor de fundo vem dessa classe Usando o método A, podemos adicionar várias classes ao mesmo tempo. Se eu pressionar vírgula e depois passar outra classe, QWE e definir este arquivo e clicar nesta seção Como você pode ver, na minha seção 11, agora temos outra classe chamada QWE É assim que podemos adicionar várias classes ao mesmo tempo. Agora vou mostrar como podemos usar o método remove na lista de classes. Vou adicionar mais duas classes em nosso documento de tabela. Vou digitar XYZ e Egg e vou configurar esse arquivo Agora, vamos ao arquivo Mindjs. Para isso, precisamos duplicar essa linha, e vou comentar a anterior Aqui eu vou usar o método classles dot remove. V. E eu quero remover XYZ e EFG. Vou passar o EG e vou definir esse arquivo. Depois de marcar essa parte do cabeçalho, quero remover XYZ e EFG Então, para definir esse arquivo, se eu clicar na parte do cabeçalho, como você pode ver, volta à cor anterior. Quero dizer, remove XYZ. Se eu mostrar minha seção elevada, agora você pode ver que temos apenas uma classe AVC Eu removo XYZ e EFG, mas ela ainda existe em nosso ABC, XYZ e EFG. Mas com a ajuda do método de lista de vidro, nós o removemos com sucesso. Aqui você aprende como podemos usar o método de remoção. Já aprendemos como podemos usar o método add and remove, e agora vamos aprender como podemos usar o método de alternância e comprimento Então, vamos começar a prática e ver o que podemos fazer com isso? Como você pode ver, temos três classes em nosso elemento, AVC, XYZ, gene Eb, e para obter o tamanho dessa classe, imprimimos essa lista de classes em nosso console É por isso que ele retorna o comprimento. Mas agora eu só quero retornar o comprimento, não o valor e o número do índice. Para isso, precisamos amarrar a função de comprimento do ponto. Entre e eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu clicar na seção do cabeçalho, agora você poderá ver o resultado. Ele retorna apenas três e, como você sabe, atribuímos três classes em nosso elemento. Dessa forma, podemos usar a função de comprimento. Agora, vamos falar sobre o método Tabul. O que é isso e como podemos usá-lo? Neste exemplo, vamos voltar ao arquivo de tabela do índice A e, a partir daqui, removerei essas duas classes XYZ e EBG Agora temos apenas uma classe nesse elemento, ABC. Vamos voltar ao arquivo dot js principal aqui, vou duplicar essa linha e desvendar essa linha. Aqui, vou usar o método de alternância D. Devo digitar class dot Toggle. Nesse método, quero alternar somente uma classe no Eu removo o segundo. Agora a pergunta é: o que isso significa? Se eu usar o Toggle Method e clicar nesse elemento em nosso primeiro clique, ele adicionará essa classe e, se eu clicar novamente, ele removerá essa E se eu mostrar minha seção de elementos, deixe-me mostrar e selecionar o elemento do cabeçalho. Como você pode ver, temos apenas uma classe, ABC. Mas se eu clicar nessa parte, depois de clicar nessa parte, agora você pode vê-la adicionar XYZ Além disso, você pode vê-lo mudar a cor de fundo. Se eu clicar novamente, agora você pode vê-lo remover a classe XYZ e aplicar outra cor de fundo, que é do ABC Você pode remover e adicionar classes usando o método Toggle. Agora vamos falar sobre outro método, que é item. Nesta função, você precisa passar o índice, não a classe, é meu erro de digitação Aqui eu preciso passar o número do índice. Vamos começar a prática e ver como podemos usar a função item. Agora, vamos adicionar mais duas classes em nosso arquivo de estimativa. Com o ABC, quero adicionar XYZ. Com isso, quero adicionar o EPG e vou definir esse arquivo Em seguida, volto ao arquivo dot js principal. Primeiro, vou comentar sobre esta linha, não preciso dela aqui, vou digitar o último ponto ou nome da função, item. Dentro da prensa redonda ou para passar o número do índice. Eu vou passar por um. Depois de definir esse arquivo, se eu clicar nesta seção de cabeçalho, você pode ver que está escrito apenas um nome de classe, XYZ Mas você pode ver meu elemento, temos três classes, ABC, XYZ e EFG Mas aqui eu especifico o número do índice usando a função do item, um. É por isso que está escrito XYZ. Portanto, se você quiser usar esse método, precisará fornecer o número do índice da classe. Se você passar de zero, ele retornará ABC e se você passar de dois , ele retornará EFG Agora, vamos falar sobre nosso último método de classe, que contém. Esse método sempre retorna para Tether Falls. Se o nome da classe existir nesse elemento, ele retornará verdadeiro. Caso contrário, ele retornará falso. Então, vamos começar a prática e ver como podemos usá-la. Como você pode ver em nosso cabeçalho, temos que desenhar três classes. Então, vamos ao arquivo dot js principal e a ela para substituir o item por contains. Ligue para as equipes. E dentro dos downdresses e dentro dos códigos duplos, precisamos passar o nome da classe, e eu vou passar XYZ Se eu definir esse arquivo e clicar nesta seção de cabeçalho, como você pode ver, é escrito como verdadeiro porque essas classes existem em nosso elemento. Mas se eu passar um nome de classe que não existe, TX Y. Em seguida, defina esse arquivo e clique nessa parte de recuperação novamente Agora você pode ver o teton cair porque essa classe não é mais fácil em nosso elemento Na maioria das vezes, usamos esse método com a condição e, de acordo com o resultado, executamos programas diferentes. Isso é tudo para este tutorial. Esses são os métodos de todas as classes que eu abordo neste tutorial. Em nosso próximo tutorial, abordarei o elemento pai e o método do nó pai. Obrigado por assistir a este vídeo, fique ligado. 12. Tutorial de JavaScript parentElement e método parentNode: É bom ver vocês. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript Dom. E neste tutorial, vamos aprender o método de travessia do Dom. Existem 12 métodos do tutor que sob o método de travessia, como elemento pai, nó pai, canto, primeiro filho, último filho, irmão líquido, irmão anterior, etc anterior Todos esses métodos são usados para direcionar os elementos da tabela. Mas antes de começar a prática, precisamos entender o que é irmãos, elemento filho nó pai, primeiro filho porque sem saber o básico, é muito difícil entendê-lo Suponha que seja nosso objeto Dom. A é o elemento pai e B, C, B EF é o elemento filho de A. Em termos de JavaScript, podemos chamá-lo de node, caso contrário, elemento. Se perguntarmos quem é o primeiro filho de A, a resposta é B. B é o primeiro filho de A. Se perguntarmos quem é o último filho de A, então F é o último filho de A. Então, todos são filhos de um elemento. Agora, todos esses elementos são irmãos, BCDE F. Eles são todos irmãos. Se eu perguntar a você, quem é o próximo irmão de B, a resposta é E, E é o próximo irmão de B, e se eu perguntar, quem é o irmão anterior ou B e a resposta é C, C é o irmão anterior de B. Esses são os termos que você precisa saber antes de começarmos com a matemática transversal Se você entender esse gráfico simples, poderá entender todo esse método. Vamos começar a prática e ver como podemos usá-la. Neste tutorial, abordarei apenas dois elementos: elemento pai e nó pai. Como você pode ver, sente-se ao lado, abro meu editor de código do Visual Studio e meu navegador usando extensão fester e já criei um documento HTML chamado index dot TML Com isso, eu já vinculo nosso arquivo DoJs principal, Min Dot Js. Agora está completamente em branco. Você pode ver na seção do corpo, temos uma profundidade externa. Dentro dessa profundidade externa, temos inerte dentro da profunda interna, temos alguns elementos secundários A, B, C, D, E, em nossas profundezas externas, definimos um ID externo. Semelhante ao Inner Deep, definimos um ID, interno. E no irmão filho, também definimos um ID chamado filho C. Temos que dizer cinco elementos div dentro do contêiner interno Então, vamos começar nossa prática com o modo pai e o elemento pai No início, quero direcionar o Div usando o DV interno. Vamos entrar no arquivo JavaScript e ver como podemos fazer isso. Aqui eu quero digitar documento dot get element by ID. Dentro das prensas redondas, coloque-a para passar o ID Name e o ID nav será Primeiro, quero segmentar o ID interno. A área rosa é a área interna do elemento. Usando a ajuda do elemento interno, quero atingir o elemento externo. Vou usar o método do elemento pai, elemento pai. Vou mover essa linha para uma variável em que igual ao documento ponto obtém elemento por ID ponto elemento pai. Agora vou imprimir essa variável em nossa seção de console. O tipo de som que o registro de pontos do console dentro das redondas é variável A, depois semicone dois nesta linha. Se eu definir esse arquivo, você pode ver meu console, ele está escrito. É uma seção de diferença externa escrita. Se for um Hobermcar nesta seção, você pode vê-lo destacando a seção externa Então, o pai interno profundo está fora de D, mas quem é o pai externo Se eu selecionar o ID externo aqui, alguns desmaiam e eu quero mostrar o elemento pai do ID externo. Se eu definir esse arquivo, você pode ver no meu console, seu corpo. O elemento pai do elemento externo é o corpo. Agora, a questão é: quem é o elemento pai do elemento corporal? Então, eu quero duplicar esta linha e comentar a anterior Vou amarrar o elemento pai do ponto do corpo do ponto do documento. Se eu definir esse arquivo, agora você pode ver em um console, é T. TML é o elemento pai definitivo de todas as tags Usando esse método de segmentação, podemos fazer qualquer coisa Vou comentar esta linha e descomentar esta e configurar este arquivo novamente. Usando esse método de segmentação, podemos alterar o EstiML interno, podemos mudar o estilo, podemos mudar o que quisermos Suponha que eu queira mudar a cor do fundo externo. Quero duplicar esta linha e comentar a anterior Aqui, vou vincular o método de estilo de pontos do elemento pai. E aqui eu quero mudar a cor de fundo do fundo, igual a, e eu quero definir a cor de fundo vermelha. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele adiciona uma cor de fundo à nossa tag TML porque aqui passamos elemento externo e ele seleciona o elemento pai do elemento externo e o elemento pai do elemento externo é HTML Mas se eu passar o cabelo interno, então defino este arquivo, agora você pode ver que ele mudou a cor de fundo do elemento externo. Mas selecionamos o elemento interno. Usando o ID do elemento interno, direcionamos com sucesso o elemento externo e também aplicamos um estilo a esse elemento externo. Espero agora difamar para você como podemos direcionar o elemento pai. Agora eu quero selecionar o elemento interno usando o elemento filho helpop Se eu mostrar meu arquivo STL de pontos de índice, você pode ver que há um elemento filho chamado C e você também disse um ID, filho C. Alguns copiam o nome do ID, hL e voltam para o arquivo js principal, e aqui vou substituir inner por filho C. Se eu definir esse arquivo, agora você pode ver que alteramos com sucesso nossa taxa de cor de fundo interna Agora, vamos interromper outro comando que é o nó pai. Não há muita diferença entre o elemento pai e o nó pai. Então, para duplicar essa linha e contar a anterior. Aqui vou amarrar o nó principal. Paren, não Se eu definir esse estilo, como você pode ver, ele escreverá o mesmo resultado. Mas a principal diferença é que se usarmos elemento pai e se o elemento pai não estiver disponível, ele retornará nulo E se usarmos nó pai e se o elemento pai não estiver disponível, ele retornará algo. Vamos deixar isso mais claro. Vou remover essa parte do estilo. Eu quero retornar o nó pai. Se eu definir esse arquivo, agora você pode ver em meus consoles retorno interno porque o pai do filho C é o elemento interno Mas se eu chegar ao meu ponto de índice EStilfle, como você pode ver, em nossa tag ESTiml, há um ID, M e eu vou copiar esse E de volta ao arquivo dot js principal. Eu quero passar o nome de identificação. Agora eu quero retornar o elemento pai da tag HTML. Depois de definir esse arquivo, como você pode ver, é escrito o documento. Eu não devolvo nenhum nulo. Mas se eu passar o elemento pai aqui, deixe-me mostrar para você. Vou duplicar esta linha e comentar a anterior e quero passar o elemento pai Se eu usar essa função e definir esse arquivo, como você pode ver, é escrito nulo porque não há nenhum elemento pai da tag HTML Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos métodos infantis e de nós secundários. Obrigado por assistir a este vídeo. Fique ligado. 13. Tutorial de métodos JavaScript Children e childNodes: É bom ver vocês. Novamente, estou de volta com um novo tutorial relacionado aos métodos de travessia do Dom. Neste tutorial, vamos aprender os filhos e o método do nó filho. Em nosso tutorial anterior, já aprendemos sobre o nó pai e o len pai. Então, vamos ver qual é a diferença entre o nó filho e o nó filho. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server, e já abri meu documento ETML anterior, arquivo ETL de ponto de índice Com isso, abrimos o arquivo Js do ponto principal. Basicamente, usando esse método, podemos atingir crianças usando o nó pai Em nosso tutorial anterior, direcionamos o nó pai usando filhos. Mas neste tutorial, vamos abordar crianças que usam paren. Então, deixe-me mostrar a demonstração. Primeiro, vou focar nos filhos do elemento externo. Então, aqui eu quero passar o nome de ID para fora. E aqui eu quero devolver as crianças. Eu quero usar o método infantil. Crianças. Vou configurar esse arquivo. Se eu te mostrar meu console, você pode ver meu console, é uma coleção de tabelas escritas. Aqui você pode ver meu console, um total de dois filhos, duas etiquetas H e seção de imersão interna Se eu mostrar minha estrutura estável, como você pode ver, dentro da imersão externa, temos um total de dois filhos, temos um total de dois filhos, seção de imersão interna e duas etiquetas H. É por isso que está escrito com dois elementos. Se eu direcionar o elemento interno e quiser retornar toda a tag secundária do elemento interno, aqui eu quero amarrar o interior. E eu quero configurar esse arquivo. Agora você pode ver na minha seção de números iguais que está escrito um total de seis elementos com comprimento seis. Nosso primeiro elemento filho é a tag H two, e os outros cinco elementos são a tag profunda. Se eu quiser atingir as crianças em particular, suponha que eu queira atingir C. Para isso, ela precisa usar colchetes e eu coloco os colchetes, precisamos passar o número do índice Como você pode ver, o número do índice é três. Então, passar três aqui. Depois de configurar esse arquivo, você pode ver o resultado. Está escrito esse elemento filho, C. Agora vamos definir um estilo para esse alvo D. Para isso, quero escolher essa linha e comentar a anterior. Vou remover a variável. Vou digitar docCottElement por ID e o ni é e o Inevis pai interno Também o elemento filho. As crianças dentro da praça são três. Então, aqui precisamos usar a função de estilo, estilo de fundo de pontos. Eu quero dizer cor de fundo vermelho. Então, para digitar igual a dentro do código duplo vermelho. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele aplica cor de fundo vermelho aos nossos terceiros filhos. Se eu quiser imprimir o HTML interno desse elemento no meu console, deixe-me mostrar para você Aqui, vou digitar o HTML interno para crianças. Então esse arquivo, como você pode ver no meu console, é impresso C. Esse é o uso do metal infantil. Agora vamos falar sobre empréstimo infantil. Vou comentar esta linha e também vou duplicar esta linha e comentar a anterior Aqui vou digitar dot child ones e vou definir esse arquivo. Agora você pode ver na minha seção Casos, agora você pode ver que seu comprimento é 13. Como você pode ver, está escrito todas as crianças na seção interna Mas, como você pode ver em nosso primeiro índice, é um texto escrito. Outro quien é, o que é isso? Se eu passar por duas seções, você pode ver como destacar esta seção. Mas se eu for para a seção de texto, ela não destaca tudo. Agora você pode ter quotien, o que é o nó de texto? De onde conta. Suponha que, se você usar qualquer caractere como Inserir espaço em seu código , o nó filho também conte como um elemento. Deixe-me te mostrar isso. fazer do índice o arquivo de estimativa, e aqui vou recomendar um dos elementos DV, esse B, e vou definir esse Agora você pode ver minha seção conso, também está escrito o comando, se eu abrir esse comando, como você pode ver, há um atributo chamado data e também escrito o que está dentro do comando Da mesma forma, se eu abrir nosso índice zero, como você pode ver, está escrito um novo diretor de luz, barra invertida oito, notas infantis contam Semelhante ao método children, podemos definir qualquer texto em nosso elemento. Caso contrário, podemos alterar a cor do plano de fundo. Caso contrário, podemos aplicar qualquer estilo. Ele só quer passar o número do índice. Se eu passar por um, então vou passar dentro da base quadrada um. Em seguida, vou aplicar a cor de fundo do estilo , que é vermelha. Copie esta linha e cole aqui. Se eu definir esse arquivo, você poderá ver o resultado. É aplicar uma cor de fundo vermelha a esse elemento de carregamento secundário. Você pode fazer tudo. O que você pode fazer com o método infantil. Mas a principal diferença é que o nó filho conta tudo como um elemento. Essa é a diferença básica entre esses dois métodos. Obrigado por assistir a este vídeo. Fique ligado nos nossos próximos dois estúdios. 14. Tutorial de método JavaScript firstChild e lastChild: É bom ver vocês. Novamente, estou de volta com um novo tutorial relacionado ao método Dom Taersa E neste tutorial, vamos aprender o método do primeiro filho e do último filho. Em nosso tutorial anterior, já aprendemos sobre o nó pai e os nós filhos. Neste tutorial, aprenderemos sobre o primeiro filho, o filho primeiro elemento e o último filho. Além disso, último elemento filho. Sem perder seu tempo, vamos estudar a prática e ver como podemos usá-la Aqui você pode ver um gráfico Dom e A é nosso elemento pai B, C, B E F é o elemento filho de A. Se eu perguntar a você, quem é o primeiro filho do elemento A, então B é a resposta. B é o primeiro filho do elemento A. Da mesma forma, se eu perguntar a você, quem é o último filho de um elemento, é F. F é o último filho de um elemento A. Então, vamos começar a prática. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando extensão if server e já criei um documento HTML chamado index dot HTML Como você pode ver na minha etiqueta corporal, temos Outer Dev IAD Dev e algumas crianças Dems Também vinculamos o arquivo JS a este arquivo STL, ponto principal Js. Em primeiro lugar, quero retornar o primeiro elemento filho desse IAdm Primeiro, vou remover as linhas desnecessárias. Eu não preciso disso. E então vou selecionar o elemento dot get do documento pelo ID interno. Nós visamos nosso elemento interno. Em seguida, vou usar o nome da nossa função, que é filho do primeiro elemento. Vou marcar a criança do primeiro elemento. Se eu definir esse arquivo e mostrar por que Console, ele retornará a tag H two. Deixe-me te mostrar. Então, se eu mostrar a seção do console, como você pode ver, está escrito H interno. Porque o título dois é o primeiro filho do elemento interno. Você pode ver as duas etiquetas dentro do elemento interno. Então, depois de direcionar esse elemento, podemos fazer qualquer coisa com isso. Suponha que eu queira retornar o HTML interno. Então, vou digitar HTML interno. Se eu definir esse solo, você pode ver meu console, ele retornará essa palavra-chave, interna. Além disso, você pode adicionar qualquer estilo a esse elemento. Suponha que eu queira adicionar um plano de fundo, estilo ponto, fundo de pontos. Igual a e eu quero a cor vermelha. Se eu definir esse arquivo, você poderá ver o resultado. Ele adiciona cor de fundo vermelho a essas duas tags. Lembre-se de que o primeiro elemento filho sempre tem como alvo a primeira tag HTML. Ao contrário, temos outra função, que é um elemento filho. Alguns duplicam essa linha e comentam a anterior e Hamer digita st element child Se eu definir esse arquivo, você poderá ver o resultado. Ele adiciona uma cor de fundo vermelha ao nosso último elemento, que é E. E é o último filho do Dan interior. Agora vamos falar sobre outro método, que é o primeiro filho. Então, vou duplicar essa linha e comentar a anterior E se eu selecionar o primeiro filho aqui, vou digitar ponto, primeiro filho e ponto e vírgula nessa linha e definir esse arquivo, como você pode ver, como texto escrito Ele escreveu um nó de texto. Se eu abrir a nota de texto, como você pode ver, dentro desses dados, temos o caractere de nova linha Isso significa que usamos o caractere enter para uma nova linha. Agora, H dois não é o primeiro filho desse elemento interno. Agora, o primeiro filho é a entrada entre as duas etiquetas internas D e H. Quero dizer que essa função conta todos os tipos de elementos quando criança. Seja qual for o personagem que você usa, ele conta como criança. Então essa foi a diferença básica entre o primeiro filho e o filho do primeiro elemento. filho do primeiro elemento sempre retorna a primeira tag tamal, mas o primeiro filho sempre retorna o primeiro caractere Se você usar qualquer espaço, caso contrário, nova linha, nesse caso, uma nova linha, nesse caso, ela conta como o primeiro caractere. Em nossa palestra anterior, já aprendemos sobre isso. Também conta o comentário como um elemento. Agora vamos falar sobre nossa próxima função, que é o último filho. Vou preencher esta linha e comentar a anterior E aqui vou amarrar a última criança. Se eu definir esse arquivo, você poderá ver o resultado. Novamente, está escrito em um nó de texto. Se eu abrir esta nota de texto, como você pode ver, a div de dados é uma nova linha, se você quiser aplicar algum estilo a esse elemento, não é possível porque esses caracteres são invisíveis Se você tentar fazer isso com força , ele retornará um erro Deixe-me te mostrar. Vou aplicar estilo a esse último elemento. Esse último filho, esse estilo, taxa de fundo. Se eu definir esse arquivo, como você pode ver no meu console, há um erro escrito, digite error. Não podemos estilizar notas de texto. Deixe-me mostrar outro exemplo de primeiro filho béthod. Vou comentar esta linha e descomentar a linha anterior E aqui eu vou mudar o seletor, e vou usar esse seletor, filho C. Eu quero passar esse ID, e se eu quiser retornar o primeiro filho do elemento C filho , até configurar esse arquivo, você pode ver no meu console que está escrito o caractere C. Porque se eu mostrar meu arquivo de tabela de índice, como você pode ver, dentro desse elemento D, temos apenas um C, não há espaço, nenhum caractere de nova linha. Da mesma forma, se eu devolver a última criança aqui, alguém para digitar para escolher esta linha e comentar a anterior, e aqui eu quero passar a última criança. último filho, como você pode ver, é novamente o personagem C. Espero que agora esses conceitos estejam claros para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 15. JavaScript nextSibling e tutorial de método anteriorSibling: É bom ver vocês. Novamente, estou de volta com um novo tutorial sobre os métodos de travessia do Dom. Neste tutorial, aprenderemos o próximo irmão e o irmão anterior Em nossos tutoriais anteriores, aprendemos sobre o nó pai, o nó filho, os filhos, o primeiro elemento filho, etc. Neste tutorial, abordaremos o próximo elemento anterior, irmão, irmão anterior Antes de começar a prática, vamos tentar entender qual é a diferença entre o próximo irmão e o irmão anterior Aqui você pode ver um gráfico Dom. Aqui, A é o elemento pai e B, C, D, E F é o elemento filho de A, e todos esses são elementos irmãos Se eu perguntar a você, quem é o próximo irmão do elemento D e a resposta é E, E é o próximo irmão do elemento B. Se perguntarmos quem é o sinal anterior de D e a resposta é C. Essa é a diferença básica entre esses dois elementos, próximo e anterior. Se eu quiser encontrar a sinalização anterior do elemento B, como você pode ver, não existe uma irmã anterior do elemento B, mas existe a próxima sinalização do elemento B, que é C. Sem perder tempo, vamos começar a prática e tentar esclarecer os conceitos Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server e já criei um documento HTML chamado index dot HTML. Como você pode ver no meu navegador, temos DV externo, DV interno e alguns elementos secundários Você já está familiarizado com essa estrutura. Vamos entrar no Mindjsfle. No início, vamos começar com o próximo elemento irmão Como você pode ver no meu arquivo Dot Js principal, já temos como alvo esse elemento, esse elemento C, usando seu ID, filho C. Se eu mostrar meu arquivo STL de índice, você pode ver o nome do ID, filho C. Aqui vou amarrar o próximo Próximo elemento, irmão. Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele fica no nosso próximo elemento, que é D. Da mesma forma, se eu retornar o irmão anterior, alguém coloca esta linha no tópico e comenta a anterior e ela digita o elemento anterior irmão Irmão do elemento anterior. Após a etapa deste arquivo, você pode vê-lo escrito como elemento, este. Usando essas funções, podemos direcionar elemento anterior, caso contrário, o elemento misto. Depois de direcionar esse elemento, também podemos aplicar estilo. Deixe-me te mostrar. Aqui vou digitar estilo, fundo de pontos. Igual à tarifa do curso duplo. Depois de configurar esse arquivo, você pode ver o resultado. Como você pode ver, ele adiciona uma cor de fundo vermelha ao elemento anterior. Além disso, se você quiser retornar o HTML desse elemento, sim, você pode Basta digitar dot inner sTML. Se eu definir esse arquivo, você pode ver meu console, ele está escrito no caractere B. Agora eu quero retornar o próximo elemento irmão do elemento E. Para isso, volto ao arquivo TmL do ponto de índice e vou definir um ID para esse elemento ID igual ao filho E. Vou definir esse arquivo aqui, vou digitar filho E e quero retornar o próximo irmão desse elemento Aqui vou digitar max element sibling. Se eu definir esse arquivo, como você pode ver no meu console, será escrito como nulo porque depois do elemento E, não há nenhum elemento irmão É por isso que está escrito como nulo. Se você quiser aplicar qualquer estilo , ele girará a seta em nosso console porque não há nenhum elemento após o elemento E. Esses dois métodos são usados para direcionar o elemento, mas nossos próximos dois métodos podem direcionar qualquer coisa. Ele pode direcionar notas de texto, caso contrário, comentários, etc Você já está familiarizado com isso. Agora vou usar o método do próximo irmão e o método anterior do irmão Novamente, vou duplicar essa linha e comentar a anterior, e vou digitar o irmão anterior vistos cantam. Se eu definir esse arquivo, como você pode ver no meu navegador, é texto escrito, é escrito em um nó de texto e, como você pode ver, é escrito em um caractere Newlin Se você remover o caractere Nuland entre D e E , retornará o elemento D no meu console Se eu tentar remover o caractere de nova linha e definir esse arquivo por enquanto, ele não funcionará para mim porque meu editor de código do Visual Studio embelezará automaticamente meu código e adicionará uma nova linha para finalizar esse elemento Nestable Se eu definir esse arquivo, como você pode ver, ele adicionará uma nova linha. É por isso que, novamente, ele retorna ao modo de texto. De alguma forma, se você puder remover o caractere Newland dessa linha, nesse caso, ele retornará o elemento Da mesma forma, o próximo método entre irmãos funciona. Se eu digitar next sibling head, next sibling e depois definir esse arquivo, como você pode ver, novamente, ele retornará tplode Porque essa função pode contar espaços de caracteres ou meios como um nó JavaScript. É por isso que você vê uma escolha concluída. 16. JavaScript createElement e createTextNode Tutorial: Olá, pessoal. É bom ver você de volta. Novamente, estou de volta com um novo tutorial relacionado ao Javascript Dom. Neste tutorial, aprenderemos Dom a criar Mthuns Basicamente, em JavaScript, temos que recriar um método, criar um elemento, criar um nó de texto, criar um comentário. Vamos tentar entender esses métodos. Suponha que você queira adicionar uma tag de estimativa em seu documento usando JavaScript. Você deseja adicionar uma nova tag de parágrafo ao seu documento. Você pode adicionar qualquer tag que quiser. Para colocar uma tag em sua página de estimativa, você precisa usar um método, e o nome do método é criar elemento. E se você quiser digitar texto em seu documento de estimativa, para isso, você precisa usar esse método, Criar nó de texto Suponha que você queira adicionar esse texto ao seu documento. Para isso, você precisa usar esse método, criar Tan. E se você quiser adicionar um comentário em sua página de estimativa usando o JavaScript helpop para isso, você precisa usar esse método, criar comentário Vamos começar a prática e ver como podemos usá-la. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor Live e já crio um documento de estimativa chamado index dot t. Dentro desse documento de estimativa, temos uma tag de cabeçalho, Dong create methods, e também vinculamos ao arquivo JavaScript dogret dot js E nesse arquivo JavaScript, vou usar todos os métodos de criação. Em primeiro lugar, vamos criar um elemento em nosso documento. Então, aqui, eu vou criar uma variável. Onde, e o nome da nossa variável é um novo elemento. Igual ao documento, ao ponto e ao nome do nosso método, que é criar elemento, criar elemento. Crie um elemento dentro das prensas redondas dentro dos códigos Duval e, dentro dos códigos duplos, precisamos passar o nome da tag, que é PagrApp e o semigrom Então eu quero imprimir essa variável no meu console. Então, aqui, vou digitar Console, dot, log. Eu digo as prensas redondas ou variáveis, novo elemento, novo elemento Em seguida, semicone dois nesta linha. Eu pressiono este arquivo, se eu mostrar meu console, como você pode ver, é imprimir o nome da nossa tag, P. Da mesma forma, se você quiser criar uma tag diferente, suponha que você queira criar duas tags. Para isso, você precisa digitar o código duplo e definir esse arquivo. Como você pode ver, ele cria um título para a tag. Você pode criar qualquer elemento HTML usando esse método, criar elemento. Agora vou mostrar como podemos criar takes Node? Para isso, vou usar outra variável e o nome da variável é newt newtext igual a aqui, vou chamar nosso novo método, que é create take outra variável e o nome da variável é newt newtext Node, document dot create usa Node document dot create usa Então, dentro dos versos redondos e dentro da citação, precisamos passar o texto e aqui passar Hello world E semicone dois nesta linha e eu vou definir esse arquivo Antes de configurar esse arquivo, também vou imprimir essa variável no meu console. Eu subo esta linha e aqui vou passar um novo texto. Se eu definir esse arquivo, como você pode ver no meu console, ele imprime o texto, olá mundo. Aqui você pode inserir milhares de palavras, milhares de caracteres, o quanto quiser. Agora vou mostrar como podemos adicionar e comentar em um documento de estimativa usando a ajuda do JavaScript. Novamente, vou criar outra variável que e o nome da nossa variável é novo comentário Novo comentário. Igual ao ponto do documento, criar comentário, criar comentário. Dentro dos códigos da boneca. Só para digitar o comentário. Não precisamos usar nenhum sinal maior que, caso contrário, sinal de exclamação. Por enquanto, vou digitar isso como comentário. E então eu vou imprimir essa variável no meu console. Então eu vou para esta linha e aqui vou passar um novo comentário, Novo comentário. degrau acima, esse arquivo, como você pode ver no meu console, é sprint, isso é comentário Aqui você pode ver o comentário em HTML, sinal de exclamação com menos de sinal, traço, isso é comentário Como você pode ver usando JavaScript, podemos criar elemento HTML, nó de texto, comentário etc No próximo tutorial, vamos inserir esse nó de texto dentro desse elemento. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo Sytune. 17. JavaScript appendChild e insertBefore Tutorial: Olá, pessoal, é bom ver vocês de volta. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript doom. Neste tutorial, aprenderemos os métodos JavaScript doom Append Basicamente, em JavaScript, temos um total de dois métodos de acréscimo, Appenhild Appenhild Vamos ver o que podemos fazer com isso? Em nossos tutoriais anteriores, aprendemos como adicionar um elemento STML em uma StimlPage Para isso, usamos o método do elemento Pit e também aprendemos como podemos adicionar texto em um StimulPage usando JavaScript com a ajuda de quit TeXn Agora, a citação é como podemos unir esse texto a esse elemento Quero mover esse texto para dentro deste parágrafo, como podemos anexá-lo com um elemento. Assim, o JavaScript introduz um método especial, que é o paint child. Usando esse método, podemos adicionar texto com um elemento. Além disso, usando esse método, também podemos anexar esse elemento a outro elemento. Vamos começar a prática e ver como podemos usá-la. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server, e já crio um documento estável chamado index dot HTML. Além disso vinculo um arquivo JavaScript chamado men dot js Aqui você pode ver, criamos um elemento profundo e eu também estilizo esse elemento profundo. Nós nos escondemos com acolchoamento e margem. E se eu mostrar meu arquivo dot js principal, como você pode ver, já criamos um elemento usando o título para marcar. Com isso, também criamos um nó de texto, hello world. E se eu mostrar meu console, como você pode ver, temos o título para a tag e o nó de texto, hello world. E agora precisamos anexar esse texto a esse elemento. Portanto, precisamos acrescentar essa nota de texto nesse elemento. Para isso, precisamos usar o método Append hil. Aqui vou digitar a variável m, que é novo elemento, Novo elemento, e nesse novo elemento, quero acrescentar o nó de texto Então, para digitar dot Append child. Anexar criança. Dentro dos vestidos redondos, precisamos passar o membro variável que eu quero aparentar e eu quero aparentar novas gravatas Eu copio o membro variável e vou colá-lo aqui e simular o slide Se eu definir esse arquivo e mostrar meu console, como você pode ver, ele anexará uma nota de texto em nossa nova seção de elementos, que é o título dois Eu adicionei com sucesso o sabor dentro do cabeçalho dois. Agora eu quero mostrar o cabeçalho dois dentro desse elemento de banco de dados. Para isso, novamente, vou usar o método AppenJL. Dentro dessa maldita profundidade, vou acrescentar o elemento. Se eu mostrar meu arquivo de estimativa de índice, como você pode ver, há um D com ID chamado taste. Vou copiar esse nome de identificação. Vamos voltar ao arquivo Mindjs e eu estou digitando após o método AppEnchl com o novo elemento, vou digitar o documento Dot, obter o elemento por ID está nas redondezas, precisamos passar o nome do ID Então eu vou usar o método apinhild append child. Então, dentro do processo redondo, aqui eu quero acrescentar o novo elemento Eu copio o novo elemento do nome da variável e vou colar dentro do semigrama de passagem redonda esta linha Após a etapa deste arquivo, você pode ver no meu navegador, ele imprime hello world. Ele anexa o elemento em nosso recipiente profundo. Se eu inspecionar esta seção, como você pode ver, dentro deste DF, temos um elemento H dois e sua impressão hello world Mas se eu mostrar meu arquivo de ponto de índice H, como você pode ver, não há nome de elemento H dois. Além disso, não há texto, olá mundo. Então, como você pode ver, podemos usar função append method duas vezes Primeiro, anexamos esse texto nesse elemento. Em seguida, acrescentamos esse elemento a esse evento profundo. Então é assim que podemos criar um nó de texto, caso contrário, um elemento e podemos anexá-lo ao elemento existente. Lembre-se de que esse método apenchil sempre adiciona o elemento, caso contrário, nó de texto, fim do nó pai. Deixe-me te mostrar. Então, aqui, eu vou adicionar um parágrafo. Então, para usar pTagParagraph, e eu quero digitar algum texto, Lorem Vai adicionar dez palavras de frase. Após a etapa deste arquivo, como você pode ver, aqui você pode ver, após o final deste parágrafo, ele adiciona o elemento a. Lembre-se de que o método apenchil sempre adiciona o elemento e a última posição Se você quiser adicionar esse elemento antes do parágrafo, para isso, temos outro método, que é inserir antes. Agora eu quero mover esse título antes do parágrafo. Deixe-me mostrar como podemos usá-lo. Quero molhar esta linha e comentar a anterior aqui. Vou amarrar o inserto inimigo. Então, dentro da redonda, precisamos passar um total de dois parâmetros Primeiro, em nosso primeiro parâmetro, precisamos passar o nome do elemento. Qual elemento eu quero acrescentar em nosso DP e eu quero acrescentar esse Eu copio o nome do elemento e vou colá-lo aqui. Agora, precisamos passar a posição em que eu quero acrescentar esse elemento Mas antes de passar o segundo parâmetro, vou criar o destino desse elemento pai. Devo digitar, documentar, pontuar e obter o elemento por ID, dentro das prensas redondas a gosto Vou atribuir esse alvo em uma variável. Eu digito where e o nome da nossa variável é target. Alvo igual a esse local. Agora vou substituir esse setor por essa variável, alvo. Vou digitar a inserção do ponto-alvo antes, dentro do novo elemento da prensa redonda. Agora, em nosso segundo parâmetro, vou digitar target dot childs. E vou especificar a posição. Dentro da base quadrada, vou digitar Z. Isso significa que eu quero colocar esse novo elemento antes do índice zero Se eu definir esse arquivo, agora você pode ver no meu mergulho que ele move o novo elemento antes do parâmetro Se eu mostrar minha seção de elementos, como você pode ver, primeiro ela imprime um novo elemento e depois nosso parágrafo. É assim que podemos usar o método insert before. Espero que agora esteja claro para você como podemos usar apengile e inserir o método before Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 18. JavaScript insertAdjacentElement e insertAdjacentHTML Tutorial: Olá, pessoal, é bom ver vocês de volta. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript dom. Neste tutorial, aprenderemos a inserir métodos adjacentes em Java script. Em nosso tutorial anterior, aprendemos dois métodos de acréscimo de JavaScript, Append hild Ele é usado para acrescentar um elemento existente e anotar um elemento pai Appenchild sempre reproduz o elemento na última posição para usar insert antes, precisamos especificar uma posição e esse método, anexar o elemento antes Já aprendemos sobre isso em nosso tutorial anterior. Depois disso, inserimos elemento de ajuste, inserimos ajuste em SML e inserimos Esses três métodos também são usados para acrescentar o elemento, mas há uma diferença entre esses três métodos e esses dois Nossos dois métodos anteriores são usados apenas para fins de acréscimo. Ele pode acrescentar o elemento existente, caso contrário, o elemento de texto no elemento pai Ele não pode criar o elemento. Ele é usado apenas para acrescentar o elemento, mas nossos últimos três métodos podem criar o elemento também anexá-lo Quero dizer que, se você usar esses métodos, não precisará usar o método create element e o método create text notte Antes de começar a prática, vamos tentar entender qual é a diferença entre todos esses três métodos. Suponha que você queira criar uma etiqueta de estimativa com a mesma hora em que deseja anexá-la. Quero criar essa tag de parágrafo e, ao mesmo tempo, anexá-la. Para isso, precisamos usar esse método. Insira o ajuste e o elemento. Se eu usar esse método, ao mesmo tempo em que ele cria o elemento, ele também acrescenta o Mas se você quiser criar uma tag e pegar o node ao mesmo tempo, nesse caso, precisará usar esse método, Inserir tabela de ajuste. Aqui você pode ver que criamos um parágrafo também inserimos o nó fiscal dentro desse parágrafo. Usando esse método, podemos criar um nó fiscal, podemos criar um elemento. Também podemos acrescentar o elemento. Podemos realizar três tarefas ao mesmo tempo, se você quiser criar um nó de texto simples, para isso você pode usar o método de inserção de texto adjacente. Esse método pode criar o texto e também pode obter o texto. Você já está familiarizado com isso, o que posso fazer com esses métodos? Com isso, também podemos fornecer uma posição específica. Então, vamos tentar entender a posição em que podemos posicionar nossos elementos e obter nós. E as posições são antes de começar, começar, antes de terminar e acima. Temos um total de quatro posições diferentes, então vamos tentar entender as posições com mais clareza. Suponha que tenhamos um recipiente profundo e, dentro desse recipiente profundo, tenhamos um sabor. E agora precisamos criar esse nó de tomada com H um elemento, e também precisamos acrescentar esse elemento dentro dessa profundidade Agora, se eu usar a posição inicial anterior, nesse caso, ele anexará o elemento antes do início profundo e, se eu usar a posição inicial, nesse caso, ele anexará o elemento na primeira posição dentro do contêiner E se eu usar a posição final ascendente , ele anexará o elemento na extremidade superior desse contêiner E se você usar antes da posição final, nesse caso, ele anexará esse elemento nessa Dentro deste dicionário, ele o colocará em último lugar É assim que podemos usar essa posição. Sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo e já crio um documento HTML chamado index dot HTML Com isso, eu crio um arquivo JavaScript MinDotJS Eu também vinculo esse arquivo a esta página da tabela Além disso, você pode ver que temos um elemento profundo em nossa tag corporal, e eu defino um ID para esse elemento profundo, que é Taste. Dentro desse elemento profundo, temos um parágrafo. Vamos começar nossa prática com ajuste de inserção e elemento. Vamos entrar no arquivo principal do Do js. Para isso, vou criar um elemento. Aqui vou digitar where e o nome da nossa variável é Novo elemento. Igual a aqui, vou criar um elemento de cabeçalho. Aqui vou digitar, documentar, pontilhar, criar elemento, criar elemento. E dentro dos rounders, eu quero criar um elemento de cabeçalho dois, um elogio H Em seguida, ponto e vírgula dois N nesta linha. Agora vou criar um nó de tomada porque precisamos inserir o nó de texto dentro desse elemento de cabeçalho. Tipo hemo, e o nome da nossa variável é novo texto, novo texto, igual a documento, ponto, criar nó de texto Crie um nó de texto. Dentro da prensa redonda, vou passar um texto aleatório. Vou digitar olá palavra. E ponto e vírgula dois nesta linha. Criamos um elemento e ele assume o modo, e agora precisamos acrescentar esse nó de texto dentro desse Mas antes, vou explicar o que é inserir elemento adjacente. Agora, quando criar um alvo. Primeiro, vou criar um alvo. Eu quero atingir esse elemento DV. Se eu mostrar meu arquivo EL de índice, como você pode ver, neste DP definimos um ID, ID taste Eu copio o nome do ID taste e, de volta ao arquivo Js do ponto principal, aqui vou digitar a palavra que nosso nome de variável é target. Igual ao elemento dot get by ID, dentro da prensa redonda está nosso nome de ID, cole e Semgron dois nesta linha Criamos o elemento alvo. Onde eu quero acrescentar esse elemento H dois. Agora vou usar inserir elemento adjacente. Então, para digitar ponto alvo, insira, elemento adjacente. Dentro das rodadas, dentro dos códigos de subsídio, aqui precisamos passar dois parâmetros Primeiro, precisamos passar a posição. Onde queremos colocar o elemento. Vou atribuir a posição e vou digitar antes de começar. Em nosso segundo parâmetro, precisamos passar o nome do elemento. Aqui vou digitar um novo elemento. Eu copio o novo elemento variável e vou colá-lo aqui. E subcorte a essa linha. Se eu definir esse arquivo, ele não será refletido em nossa página da web porque não anexamos o nó de texto nesse elemento Mas se eu mostrar minha seção de elementos, aqui você pode ver dentro desse corpo, antes desse elemento D, temos H dois elementos. E se eu mostrar meu arquivo STL do nó de índice, como você pode ver, antes do elemento D, não temos nenhum elemento H dois Temos H um elemento. Mas na minha seção de elementos, você pode ver o nome do elemento, H dois, e agora vou acrescentar esse nó de texto nesse Para isso, precisamos amarrar New element dot, precisamos usar o método append child Anexe filho dentro dos versos redondos o nome da variável, Semi vai acabar com essa linha? Se eu definir esse arquivo, agora você poderá ver o resultado. Agora você pode ver no meu navegador que ele anexou o novo elemento antes desse elemento DV Agora você pode ver que nosso elemento está fora desse elemento. Mas se eu mudar a posição , vou duplicar essa linha comentar a anterior e fazer o root para começar Subindo pela terceira vez. Se eu definir esse arquivo, você poderá ver o resultado. Agora está anexando um novo elemento, começando com D. Agora vou falar sobre nosso novo método, que é inserir TML adjacente Para esse método, precisamos criar um elemento HTML e uma nota de texto Vou comentar essas duas linhas. Além disso, eu não preciso de um método pen gil, então vou comentá-lo novamente. Precisamos do elemento alvo e do nosso método. Agora vou chamar o nome do método. Aqui vou digitar target para inserir HTML adjacente. Vou substituir o elemento por HTML. Então, em nosso primeiro parâmetro, precisamos passar a posição. Em nosso segundo parâmetro, precisamos passar o elemento e o nó de texto de uma só vez. Deixe-me te mostrar. Dentro dos códigos duplos, vou amarrar H dois. Quando eu vou fechar essa tag, H dois. E aqui vou digitar hello world. Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele grava o mesmo resultado. Apenas usando esse método, podemos criar o nó de texto, podemos criar o elemento. Também anexamos o elemento nessa posição. Inserimos com sucesso esse elemento nessa posição. Este é o uso do método estável adjacente de inserção. Inicialmente, direcionamos o elemento DV e o armazenamos nessa variável chamada target Em seguida, aplicamos esse método a esse DP nessa função, primeiro passamos a posição, depois passamos o nó de texto e o elemento Se você quiser mudar a posição, sim, você pode. Então, digite depois de N. Eu defino esse arquivo, você pode ver o resultado. Agora está no elemento acima dessa profundidade. Uma por uma, você pode conferir as posições. Então, se usarmos esse método, podemos contornar essas três linhas Esse é o benefício de usar esse método. Insira o HTML adjacente. Não precisamos criar o elemento, não precisamos criar o nó te e também não precisamos acrescentar o nó de texto nesse Podemos fazer a mesma coisa em uma única linha. Agora, vamos falar sobre nosso último método, que é inserir texto adjacente. Basicamente, essa função create pega node e o anexa , nada mais Então, vou duplicar essa linha e comentar a anterior Aqui vou digitar insert adjacent fixed. Em nosso segundo parâmetro, vou passar um texto simples, hello world, não o nome do elemento. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que após o final dessa profundidade, ele adiciona o texto, olá mundo. Se eu te mostrar minha seção de elementos e seção de corpo, como você pode ver, após o final deste Dave, ele adiciona o texto, olá mundo Esse é o uso de todos esses três métodos de inserção. Eu sei que está claro para você. Se você quiser mudar a posição, uma por uma, em seu primeiro parâmetro, você pode mudar a posição. Não quero tornar esse tópico mais complexo. Eu quero manter isso tão simples quanto isso. No próximo tutorial, aprenderemos como podemos substituir o elemento existente. Além disso, podemos remover o elemento existente. Isso é tudo para este tutorial. Fique ligado no nosso próximo tutorial. Obrigado por assistir a este vídeo. 19. JavaScript replaceChild e removeChild Tutorial: Olá, pessoal, é bom ver vocês de volta. Novamente, estou de volta com um novo tutorial relacionado ao doom. Neste tutorial, você aprenderá dois métodos JavaScript. Substitua a criança e remova a criança. Se você quiser substituir e remover tag TML usando JavaScript para isso, precisará usar esses métodos Reprima a criança e remova a criança. Vamos começar a prática e ver como podemos usá-la. Como você pode ver, lado a lado, abro meu editor de código do estúdio de resultados e meu navegador usando a extensão if server. Eu já criei um documento ETML chamado index dot TML. Dentro deste documento, como você pode ver, em nossa tag body, temos a tag UL. Significa abaixo da lista, e temos que contar quatro itens da lista. Todos esses são nomes de frutas, laranja, maçã, uva e banana. No início, quero substituir nosso primeiro item da lista por outro nome de fruta. Como você pode ver em nosso primeiro item da lista, temos laranja. Vamos voltar ao arquivo Mind js. Primeiro, vou criar uma nova tag de IA. Vou criar o novo elemento. Então digite lá e o nome da nossa variável é novo elemento. Novo elemento. Em seguida, igual ao ponto do documento, crie o elemento. Dentro do nome do elemento RoundReo, que é item da lista, agora precisamos criar o texto Eu quero dizer que leva nodo. Aqui eu quero digitar onde o nome da nossa variável é um novo texto. Novo texto, igual a documento, ponto, criar um nó de texto, criar o nó, dentro das rodadas dentro do código Dule. Por enquanto, vou digitar o nome de uma fruta e o novo futome é manga Agora, precisamos acrescentar essa anotação neste elemento. Como você sabe, para isso, precisamos usar o método Appenhild. O Hemotyp Nu Element não acrescenta uma criança. the rounders é o nome da variável, que é o novo ts E subgrana dois nesta linha. Agora, precisamos direcionar o nó pai de onde queremos remover o item da lista. Como você pode ver, temos um ID em nossa lista. Copie a lista de nomes de ID e volte para o MindJFle. Agora vou criar a variável de destino onde e o nome da nossa variável é target. Igual ao ponto do documento, obtenha o elemento por ID. Dentro da rodada, pressiona a lista de variáveis e mg nessa linha Temos como alvo o nó pai e o armazenamos nessa variável chamada target. Agora vou focar nesse elemento filho. Vou criar outro v que e o nome da nossa variável é um elemento antigo. Elemento antigo. Igual ao ponto-alvo, método infantil. Então, dentro dos processos quadrados, precisamos passar o número do índice, que é um semicícone Z para essa linha Vou configurar esse arquivo. Se eu imprimir essa variável no meu console, vamos imprimir a variável no nosso console. Console de hemótipos, ponto, registro. Se o arredondamento for variável, o elemento antigo. Segure o elemento e s nesta linha. Depois de configurar este arquivo, se eu mostrar minha seção CSO, aqui você pode ver que está escrito o item da lista Dentro desse item da lista, temos a onda laranja. Foi escrita a primeira tag LI da nossa lista. Agora vou comentar esta linha e vou usar o método replace Child. Vou digitar target replace Child Method, replace child. Então, dentro da prensa redonda, precisamos passar para os dois parâmetros. Dentro desse recesso redondo em nosso primeiro parâmetro, precisamos passar de qual elemento eu quero substituir Eu quero substituir por um novo elemento. Aqui vou digitar um novo elemento. Em nosso segundo parâmetro, precisamos passar qual elemento eu quero substituir e eu quero substituir nosso elemento antigo. Vou passar o elemento antigo e o ponto final para esta linha. Depois de configurar esse arquivo, como você pode ver no meu navegador, ele substitui laranja por manga Se alterarmos o número do índice aqui, vou passar e definir esse arquivo. Agora você pode ver, ele substituirá as garras por manga. Espero que esteja claro para você como funciona o método replace child. Aqui você pode substituir qualquer tipo de tag usando esse método. Você pode substituir a tag Dip, a tag da tabela, a tag do parágrafo, qualquer tag que você quiser Agora, vamos falar sobre outra função que é remover filho. Agora eu quero remover o primeiro elemento dessa lista. No começo, vou comentar toda essa linha. Em seguida, ela precisa passar o número do índice, que eu quero remover. Então, vou passar pelo índice zero. E agora vou usar o nome do método remove child. Então, vou duplicar esta linha e comentar a anterior e digitar Hemo target dot remove child Remova a criança. Então, dentro da lavadeira, ela precisa passar apenas um parâmetro E o nome do nosso parâmetro é Element antigo, algum tipo de elemento antigo. Agora vou configurar esse arquivo. Eu predefini este arquivo, como você pode ver, ele foi removido da cor laranja desta lista Agora temos que dizer o nome de três frutas nesta lista: maçã, uva e banana. É assim que podemos remover qualquer elemento filho dessa lista. Se eu alterar o número do índice, aqui, vou passar o índice dois e definir esse arquivo. Agora você pode ver, ela removeu outra fruta dessa lista. É assim que podemos usar remove child. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 20. Tutorial de JavaScript cloneNode: Bem vindos de volta, pessoal. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript . Neste tutorial, aprenderemos JavaScript clone none Usando esse método, podemos clonar qualquer nó. No lado esquerdo, você pode ver a lista de pedidos, manga, banana, uvas e maçã E no nosso lado direito, temos lista de vegetais, cenoura e rabanete Suponha que eu queira copiar as capturas da lista de frutas e colá-las na lista de vegetais Para isso, precisamos clonar a tag LI desses gráficos e usar o nome do método Então, vamos ver como podemos usá-lo na prática. Como de costume, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Live Server e já criei um documento ML chamado index dot HTML. Com isso, vinculamos ao arquivo mando js, raiz principal gs. Por enquanto, é um arquivo vazio. Além disso, você pode ver na minha etiqueta corporal que temos um total de duas listas não ordenadas Além disso, atribuímos ID a essa lista, Lista e lista dois. E agora eu quero copiar a primeira tag LI dessa lista e colá-la dentro da Lista dois. Para isso, precisamos usar um método chamado crown. Então, vamos entrar no arquivo Mindojs. Primeiro, vou pegar uma variável que e o nome da nossa variável é target. Primeiro, precisamos direcionar o elemento, qual elemento eu quero clonar Quero clonar, o último, igual ao documento, para obter elemento por ID dentro das redondas, dentro dos códigos de cavilha, precisamos passar o ID, que é a Como você sabe, aqui precisamos usar o método Children, alguns para crianças. Crianças dentro das prensas quadradas, precisamos passar o número do índice No começo, eu quero copiar laranja, então aqui eu vou passar zero, então vamos terminar essa linha. E agora precisamos copiar esse elemento usando o método ro node. Então, aqui, eu vou criar outra variável lá, e o nome da nossa variável é elemento de cópia. Copie o elemento. Igual ao método do nó clone de destino. Modo Contra. Por enquanto, não quero passar nenhum parâmetro, mas você pode passar dois parâmetros por meio de outras quedas. Agora, vamos imprimir essa variável em nosso console. Registro de pontos do console tipo hemo, prensa redonda ou elemento de cópia de cópia variável Então, vamos encerrar este slide. Depois de configurar esse arquivo, se eu mostrar minha seção de console, aqui você pode vê-lo copiando apenas o nome do elemento AI. Ele não copiou o texto que está dentro da tag AI. Porque, como eu disse, o coágulo vem com dois valores. Por padrão, ele vem com formulários. Se eu passar o parâmetro false aqui, nesse caso, ele copiará apenas o atributo e o nome da tag, não o valor. Deixe-me mostrar o exemplo. Aqui, vou passar o nome de uma classe. Classe, e o nome da classe é XYZ, e eu vou definir esse arquivo Agora você pode ver no meu console que ele copia o nome da tag com o atributo de classe XYZ, mas não copia o valor que está dentro dessa tag, laranja Se você quiser copiar o valor interno com isso, nesse caso, você precisará passar o valor verdadeiro. De alguma forma, escolher esta linha e comentar a anterior. Eu vou passar por True Val. Pronto, e eu vou salvar esse arquivo. Agora você pode ver o Cazole. É copiar o nome da tag, também o atributo e o valor laranja. Eu copiei o elemento com sucesso. Agora precisamos acrescentar esse elemento em nossa segunda lista e, para anexar esse elemento, precisamos usar o método Appenchal precisamos Aqui vou digitar o elemento daPuMeng por ID, e o nome do ID é dois Últimos dois. Segmente nossa segunda lista com sucesso. Aqui, precisamos usar um nome de método, que é append hild append child. Uma criança anexada, quero acrescentar esse elemento de cópia. Eu copio o nome da variável, copio o elemento. E dentro do custo da torre, vou colar o valor, o elemento de cópia e o Semgro dois nesta linha Depois de configurar esse arquivo, como você pode ver no meu navegador, ele anexou o nome da fruta em nossa nova lista, laranja Basicamente, cortamos o elemento da lista um e o colamos dentro da lista dois Espero que agora esteja claro para você qual é o uso do método crone node Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre o método contains. Então, obrigado por assistir a este vídeo, afirmando. 21. JavaScript contém tutorial de método aprimorado: Olá, pessoal. É bom ver você lá. Novamente, estou de volta com um novo tutorial relacionado ao Javascript. Neste tutorial, aprenderemos o método de contenção de JavaScript Aqui você pode ver uma profundidade e definimos uma identificação para essa profundidade, que é externa dentro dessa profundidade externa, temos três profundezas infantis e eu quero pesquisar uma ID que está dentro desse recipiente externo Suponha que eu queira pesquisar em um ID. Depois de direcionar o elemento externo, quero pesquisar, quero pesquisar o ID do elemento filho, que está dentro do D. externo. Para isso, precisamos usar métodos de contenção. E esse método retorna apenas dois tipos de onda por meio de qualquer forma. Como você pode ver, esse dV é filho das profundezas externas voltará a ser verdadeiro. Mas o que? Se usarmos o ID em um elemento neto, quero dizer que dentro do elemento filho de Outer Deep, eu crio outro filho e, em seguida, defino esse ID para esse filho Agora é um elemento neto das profundezas externas, mas aqui visamos as profundezas externas e pesquisamos se há um IDNM interno nesse contêiner ou Qualquer elemento que você usar, se o ID ainda existir nesse contêiner, nesse caso, retornará. Outro vai devolver os formulários. Simplesmente, eu quero dizer que, se o ID existe dentro desse dip externo, é sempre escrito como verdadeiro Sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e já criei um documento HTML chamado index Com isso, vincule também um arquivo JavaScript a este documento. O nome do nosso arquivo JavaScript é main dot Jsfle. Por enquanto, está vazio. Se eu voltar ao meu arquivo TML de índice, e como você pode ver em nossa tag body, temos um contêiner com ID chamado taste E dentro desse contêiner, temos uma tag de parágrafo e outro elemento profundo. E nesse elemento profundo, temos outro parágrafo secundário. E neste parágrafo, definimos um ID chamado ABC. Agora, esse parágrafo se tornou um elemento neto desse ID chamado taste. Então, primeiro, precisamos direcionar o elemento pai. Vamos ao arquivo principal de cães e, aqui, vou criar uma variável em que nome da nossa variável é elemento pai. Elemento pai. Igual a documento, ponto, obtenha elemento por ID. São os vestidos redondos, os códigos duplos e o ID é gosto. Então Semgraun dois nesta linha. Agora vou focar no elemento, cujo ID é ABC Aqui eu vou criar outra variável lá e nossa variável é alvo. Alvo igual ao ponto do documento obtenha elemento por ID dentro das prensas redondas dentro dos códigos duplos, o nome de ID ABC Os dois Semgoru nesta linha. Agora vou pesquisar esse ID ABC no contêiner de teste Se o ID for mais fácil, ele retornará verdadeiro. Caso contrário, ele retornará falso. Então, vamos encontrar o ID do AVC no elemento de teste. Para isso, novamente, vou criar outra variável e nossa variável é find. Igual ao elemento pai dot, nosso método aqui vou usar o método contains. Contém o interior das prensas redondas, e agora precisamos passar qual elemento eu quero encontrar Aqui eu vou encontrar o elemento ABC. Precisamos passar o alvo do nome da variável. Eu quero pesquisar o elemento alvo. Então, vamos acabar com essa linha. Agora, vamos trazer a variável para o nosso console. Aqui vou digitar, Console. Registro de pontos dentro da rodada versus o nome da variável, fino e semicurno nesta linha e semicurno nesta linha fino e semicurno nesta linha e semicurno nesta linha. Vou configurar esse arquivo. Se eu mostrar meu console, como você pode ver, está escrito como verdadeiro porque nosso ID de destino está disponível dentro do elemento pai. Mas se eu mudar o nome do ID , aqui vou substituir o AVC por XYZ Em seguida, defina esse arquivo, agora você pode ver que ele foi escrito porque esse ID não existe em nosso documento. Este é um uso da função de conteúdo. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 22. JavaScript hasAttribute e hasChildNodes Tutorial aprimorado 90p: Olá, pessoal. É bom ver você. Mais uma vez, estou de volta com um novo tutorial relacionado ao JavaScript Dom. E neste tutorial, você aprenderá tem atributo e tem atributo filho. Vamos aprender esses dois métodos neste tutorial. Aqui você pode ver, temos um DV com ID chamado taste. Com isso, temos uma classe chamada ABC, que continha um texto, hello world E agora você quer verificar se há algum atributo sem ID nesse elemento? Primeiro, vou segmentar esse elemento usando seu ID. Então eu quero pesquisar. Existe algum outro atributo sem ID nesse elemento? Para isso, precisamos usar o método de atributo hash, e esse método retornará um resultado verdadeiro, ou falso Esse método sempre retorna o valor de Volan. Se o atributo estiver disponível nesse elemento, nesse caso, ele retornará verdadeiro. Ou retornará falso. Sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão b server e já crio um documento de estimativa chamado index dot html. Com isso, criamos o arquivo Dot js principal. Também anexo o MindoJSFle a este documento de estimativa. Como você pode ver na minha tag corporal, temos um elemento DV nesse elemento DV, temos um ID chamado taste Dentro desse elemento profundo, temos dois elementos secundários, H duas tags e uma tag de parágrafo. Primeiro, no meu arquivo JavaScript, vou focar nesse elemento DV Quero copiar essa fase do nome de ID. Em seguida, volte ao meu arquivo Js principal e aqui vou amarrar. Então, como sempre, precisamos criar uma variável e o nome da nossa variável é target. Alvo igual a documento, ponto, elemento de obtenção por ID. Dentro dos latões redondos e dentro do campo duplo, vou passar um valor Precisamos passar o nome de identificação, que é passado. O ciclo para essa linha. Em seguida, vou encontrar o atributo de classe nesse elemento de destino. Aqui, vou criar outra variável ali, ali e o nome da nossa variável está bom. Igual ao alvo do Vim agora vou usar o método has attribute has attribute Então, dentro das prensas redondas, dentro do código duplo, precisamos passar o nome do atributo e o nome do nosso atributo é classe Dentro dos códigos duplos, vou digitar class e semiCal nesta linha Já sabemos que não há nenhuma classe disponível nesse elemento. Vamos imprimir esse valor no console. Vou digitar console. O registro de pontos dentro das prensas redondas é variável m, find. Então semiguen dois nesta linha. Após a etapa deste arquivo, se eu lhe mostrar meu console, você poderá ver seus formulários escritos porque não há nenhum atributo de classe nesse elemento, só temos um ID de atributo. Agora vou passar o atributo tame neste elemento. Classe de hemótipo dentro dos códigos duplos, e o nome da nossa classe é E eu vou configurar esse arquivo. Agora você pode ver meu console, está escrito True. Espero que agora esteja claro para você, como podemos usar o atributo hash Agora, vamos falar sobre nosso próximo método, que tem nós filhos. Como você pode ver, há uma profundidade e eu quero verificar se não há elemento filho nessa profundidade ou não. Suponha que eu passe um texto simples tão profundo. Nesse caso, os métodos do nó filho retornam por meio de outros formulários. Se algum tipo de filho estiver disponível neste Dev, nesse caso, retornará verdadeiro. Vamos entrar no código do Visual Studio e ver como podemos usá-lo. Como você pode ver nesta profundidade, já temos dois elementos secundários, título e um parágrafo. Agora vou usar os métodos has child node. Então, siga esta linha e comente a anterior e eu vou digitar o ponto alvo, tem nós filhos. Aqui precisamos usar as chaves redondas. Dentro dos vestidos redondos, não precisamos passar nenhum parâmetro. Se eu definir esse arquivo, agora você pode ver que está escrito como verdadeiro porque temos elementos secundários nessa profundidade. Espero que agora esteja claro para você como podemos usar os métodos, o atributo hash e has child now Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 23. JavaScript isEqualNode Tutorial: Olá pessoal, é bom ver vocês de volta. Novamente, estou de volta com um novo tutorial relacionado ao JavaScript Dom. E neste tutorial, vamos aprender um novo método, que é JavaScript igual a u. Aqui você pode ver uma lista, Lista A, e temos um nome de pé nesta lista, banana grabs orange apple Com isso, temos outra lista, a Lista V. Além disso, temos alguns nomes de pés: banana, goiaba e abacaxi Se você notar, você pode ver que temos um nome de rodapé correspondente na Lista A e na Lista B, banana E agora eu quero comparar o primeiro nó da Lista A com o primeiro nó sV, banana e banana Deseja comparar os dois itens da lista. Para isso, temos um método chamado cargas iguais, e ele escreve apenas dois valores, true, ou fals. É sempre o valor de Bollan. Se você comparar os dois itens da lista, como você pode ver, eles são idênticos, ele retornará verdadeiro. Mas esse método segue alguns parâmetros. Sabemos que os dois itens da lista estão abaixo do item da lista. É por isso que vai voltar a ser verdade. Portanto, é combinado com um parâmetro. O primeiro critério é o tipo de nó. Se o tipo de nó for o mesmo, nesse caso, ele retornará verdadeiro. O mesmo critério é o nome do modo. Quero dizer que se o primeiro for um item da lista, também seria um item da lista. Caso contrário, ele retornará falso. E o segundo critério é que o nome do nó deve ser o mesmo. Não podemos comparar o item da lista com o parágrafo, caso contrário, nenhuma tag de título, e o terceiro critério é o modo V. Se compararmos banana com goiaba, nesse caso, ela retornará false Precisamos comparar banana com banana. Em seguida, esta função retorna a tripulação. O próximo critério é que seu nó filho seja o mesmo. Se usarmos qualquer tag de parágrafo como filha na lista A , devemos usar a mesma tag de parágrafo nos itens da lista B. Caso contrário, ele retornará falso. Além disso, eles precisam seguir o mesmo atributo. Se essa lista eu atribuir a uma classe, também o item da Lista B foi atribuído a uma classe. Além disso, o valor do atributo deve ser o mesmo. Se usarmos a classe XYZ, também precisamos usar a mesma classe XYZ Esses são os critérios básicos que devemos seguir nesse método Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor Live e já crio um documento HTML chamado index dot html Além disso, anexamos um arquivo Javascript main dot js. Como você pode ver na minha etiqueta corporal, temos um total de dois lados opostos. Em nossa primeira última, atribuímos uma ID, Lista 1. Em nossa penúltima, atribuímos a Lista dois. Primeiro, vou comparar primeiro nó da Lista um com o modo ListVF e, em seguida, vou comparar primeiro nó da Lista B. Então, primeiro, vou focar nesse Para isso, precisamos usar esse ID. Então, vamos voltar ao arquivo Mind js. E aqui vou criar uma variável e o nome da nossa variável é target one. Escolha um, escolha um igual ao Dumain dot gate Elman por ID Em vez de pressionar o círculo, temos que passar o nome do ID Em nossa lista de primeiros pedidos, temos a lista de identificação um. Então eu copio o nome do ID e vou colá-lo aqui. E agora precisamos selecionar esse nó, primeiro nó, laranja. Para isso, precisamos usar um método, que é o primeiro filho, os primeiros 11 filhos. Então, vamos acabar com essa linha. Agora eu quero comparar laranja com GaA. Vou duplicar essa linha e vou mudar o nome da variável, alvo dois Aqui também, vou alterar a lista dois de nomes de ID. Então, vou comparar o último primeiro elemento com pelo menos dois primeiros elementos. Agora vou comparar as duas cargas com o método E igual. Para isso, vou criar outra variável igual. Igual ao alvo de um ponto, nosso método é igual, é igual. Em vez de pressionar a rodada, precisamos passar a segunda variável e o nome da nossa segunda variável é alvo dois, alvo dois O semiconum dois neste slide. Agora vou imprimir a mesma variável em nosso console. Vou digitar console, log de pontos dentro das prensas redondas é variável m igual e emgro para finalizar esta linha Como você pode ver no meu console, está escrito Falls. Se você notar, poderá ver que ele corresponde a todos os critérios, mas não corresponde ao valor do nó. Nosso primeiro valor é laranja e nosso segundo valor é goiaba. É por isso que esse método escreveu formulários. Agora vou comparar esse nó com o segundo nó, laranja e laranja. Para isso, a heroína precisa usar outro nome de método , que é children Crianças dentro do quadrado passam, precisamos passar o número do índice, como você pode ver, o número do índice é um porque nosso índice começa com zero. Se eu definir esse arquivo, agora você pode ver meu console, está escrito como verdadeiro. E agora vou adicionar esse atributo a um item. Vamos ao arquivo de índice ou estimativa, e aqui vou adicionar uma classe. Por enquanto, vou deixá-la para trás. Depois de configurar esse arquivo, você pode ver meu console, ele retorna formulários. Mas se você notar, pode ver que o valor deles é o mesmo, palavra deles é a mesma, mas o atributo é diferente. Aqui usamos a classe de nome de atributo. Mas se eu passar o mesmo nome de atributo na lista dois, deixe-me mostrar a classe de tipo dela, classe vazia e definir esse arquivo, agora você pode ver que está escrito como verdadeiro. Mas se eu usar um nome de classe diferente, o que acontecerá? Aqui vou usar X, Y e Z, segunda classe, vou usar ABC Se eu definir esse arquivo, agora você pode ver, novamente, que ele retorna formulários porque o nome da classe é diferente. Mas se eu usar o mesmo nome de classe ABC e ABC e este deste solo, você pode ver isso escrito e verdadeiro Esse é o uso da função is equal t. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo estúdio. 24. Tutorial de eventos de formulário em JavaScript: E olá pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao Java Script e, neste tutorial, vamos aprender Java Script com o vine. Em nossos tutoriais anteriores, já aprendemos sobre alguns eventos básicos, como clique, clique duas vezes, clique com o botão direito do mouse, Mas neste tutorial, aprenderemos algumas noções básicas sobre eventos. Tudo isso é básico de eventos que aprenderemos nesses tutoriais Primeiro, temos alguns eventos de pressionamento de tecla como tecla pressionada, pressionamento de tecla, tecla para cima, desfoque de foco e, em seguida, temos alguns eventos selecionados Já aprendemos sobre eventos de tecla down, keypress e keyup em nossos tutoriais anteriores Vamos começar este tutorial com o evento focus and blur. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão b server e já crio um documento HTML chamado index dot ATM Como você pode ver na minha página de estimativa, temos um ETMLF e temos dois campos de texto e um campo de opção Como você pode ver, antes do primeiro campo de texto, usamos o rótulo do nome e, em seguida, usamos o rótulo da classe e nosso segundo campo de texto. Em seguida, mostra algumas opções de nomes de países, como Índia, Paquistão, Nepal, EUA, Japão E você pode ver a estrutura estimada na minha página. Temos desde tag, rótulo, tag de entrada, opções de seleção, etc Como eu disse, vamos começar nosso evento prático com foco. Agora a questão é: o que é foco? Sempre que clico nesse campo de entrada de nome, como você pode ver, agora ele destaca o campo de entrada com borda preta. Da mesma forma, se eu clicar no campo de entrada da classe, agora ele destacará esse campo de entrada da classe. Além disso, se eu clicar nessas opções, agora você pode ver que ela também destacou esta seção. Isso é chamado de foco. Esse é o recurso embutido do navegador, mas podemos personalizá-lo usando o evento on focus Primeiro, vou atribuir um ID a esse primeiro campo de entrada. Aqui vou digitar ID igual ao nome if. FNM significa primeiro nome. Em seguida, dentro dessa tag de script. Com isso, também vou adicionar um evento, que está em foco, tipo similar em foco. Então, aqui precisamos fornecer um nome de função e nosso nome de função é função de foco. Então eu vou criar essa função dentro dessa tag de script. Então, digite função por função, e o nome da nossa função é função de foco, copie o nome dessa função. Em seguida, precisamos direcionar esse campo de entrada usando seu ID, que é Anime. Aqui, digite o ponto do documento, obtenha o elemento por ID dentro das redondas e, em seguida, dentro do Cls Dentro das redondas apenas para fornecer o nome de identificação, que é If Em seguida, quero aplicar uma cor de fundo sempre que focalizar esse campo de entrada. Quero usar o estilo de ponto, ponto e quero aplicar uma cor de fundo igual ao vermelho. Eu quero aplicar a cor de fundo vermelho. Em seguida, semicone dois nesta linha. Agora, vamos configurar o arquivo e clicar nesse campo de entrada. Clique nesse campo de entrada, como você pode ver, agora a cor de fundo do nosso campo de entrada é vermelha. Mas se eu clicar em outro campo de entrada, não será necessário porque direcionamos esse campo de entrada específico usando seu ID. Agora eu quero aplicar o mesmo evento em nosso segundo campo de entrada. Para isso, vou copiar esta seção sobre evento de foco e colá-la no segundo campo de entrada. Mas não vou atribuir nenhum ID a esse campo de entrada. Vou deixar em branco. Agora você pode saber como podemos selecionar o segundo campo de entrada sem o ID Deixe-me te mostrar. Para isso, vou usar essa palavra-chave em nossa função. Quando eu chamo nossa função dentro do vestido redondo, vou passar essa palavra-chave, this. Além disso, vou passar essa palavra-chave em nosso segundo feed de entrada, este. Usando essa palavra-chave, podemos aplicar essa função específica nesse feed de entrada específico sempre que focarmos nela e, para lidar com isso, precisamos usar uma variável em nossa função. Dentro dos vestidos redondos, vamos pegar um nome de variável e nossa variável n é elemento. Elemento, então vou substituir esta seção por esse elemento variável. Agora, vamos submeter o arquivo e recarregar o navegador. Desta vez, vou clicar em nosso segundo campo de entrada. Agora você pode ver que está funcionando em nosso segundo campo de entrada. Ele aplica o evento de foco e altera a cor de fundo. Da mesma forma, se eu clicar no campo de entrada de nome, isso também alterará a cor de fundo do campo de entrada de nome e, se eu quiser aplicar o mesmo evento em nossa seção de país, sim, podemos. Basta copiar essa função no evento de foco e precisamos colá-la após esse ID em nosso tanque de seleção. Se eu definir esse arquivo e clicar nesta opção de país, agora você pode ver que desta vez ele aplica a cor de fundo em nossa opção suspensa. É assim que funciona. Basicamente, podemos usar o evento de foco em nossas opções de campos de entrada e tanques de ancoragem Agora temos um problema. Depois de focar nosso campo de entrada. Se eu remover o cursor e clicar em outra seção, agora você pode ver que ela ainda mostra a cor de fundo vermelha. Agora precisamos remover essa cor de foco. Então, como podemos fazer isso? Para isso, precisamos usar o blurve Para isso, da mesma forma, precisamos usar esse evento na função de foco. Aqui vou digitar o nome do evento no desfoque. Também no código duplo, precisamos passar o nome da função. Vou copiar o nome dessa função Função de foco e vou mudar o nome da função de foco com a função de desfoque. Darcy, farei a mesma coisa para o próximo campo de entrada Vou copiar esta seção e colar no evento de foco. Também em nossa opção de seleção. Então eu vou duplicar essa função e vou mudar o nome da função Focalize dois desfoques. Vou remover o nome da cor e deixá-lo em branco, e vou definir esse arquivo. Agora, primeiro, vou focar o campo de entrada do nome. Como você pode ver, a cor de fundo fica vermelha. Mas sempre que eu me concentro nesse campo de entrada de classe, agora você pode vê-lo remover a cor de fundo vermelha do nosso primeiro campo de entrada. É assim que funciona. Agora você entende como os eventos focados e desfocados funcionam juntos Aqui você também pode usar o add event listener se não quiser digitar tanto código Em nosso tutorial anterior, já aprendemos sobre isso. Agora, vamos falar sobre outro evento que está em andamento. Esse evento se aplica quando tentamos preencher o campo de entrada. Basicamente, usamos esse evento com campo de entrada e área de texto. Eu não trabalho na caixa de CD e nos botões de rádio. Vamos começar a prática e ver como podemos usar. Então, vamos chamar o evento em nossa primeira seção de entrada, e o nome do evento está na entrada. Dentro dos códigos duplos, precisamos passar uma função e nome da nossa função é função de entrada. Em seguida, dentro dos rounders. Também vou usar essa palavra-chave. Agora vou duplicar esta seção e substituir a função pela função de entrada Sempre que tento preencher esse campo de entrada, quero uma cor de fundo amarela, então vou passar amarelo. Vou configurar esse arquivo. Para configurar esse arquivo, primeiro, vou clicar no campo de entrada do nome e passar um texto com um nome e o nome é AddOne Como você pode ver, quando digitamos algum texto nesse campo, ele mudou a cor de fundo vermelha para amarela. Esse é o uso no evento de entrada. Isso é tudo para este tutorial. No próximo tutorial, abordarei os eventos restantes. Então, obrigado por assistir a este vídeo. Fique ligado na nossa próxima 25. Tutorial de eventos de formulário em JavaScript, parte 2: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao Java Strep a partir de eventos Em nosso tutorial anterior, abordamos o desfoque de foco e o evento de entrada Neste tutorial, abordaremos a alteração, a seleção e o envio de um evento inválido Vamos começar a prática com o evento de mudança. Como você pode ver, lado a lado, abro meu editor de código is studio e meu navegador usando extensão if server e abro meu nome de documento HTML anterior, índice, ponto de índice, HTML. Como você pode ver, temos um total dois nomes e classes de campos de entrada. Com isso, temos uma caixa de opção, nome do país e aqui ela fornece algum país. E vamos começar nossa prática com um evento de mudança. Deixe-me te mostrar como. Basicamente, você pode usar no evento de alteração no texto de entrada e também na caixa de seleção. Além disso, você pode usá-lo em uma área de texto. Primeiro, vou usar o evento onchange em nossa caixa de seleção Depois da função onblur, vou chamar esse evento em caso Sobre mudança e o nome da nossa função é alterar função. Altere a função. Agora, também, precisamos definir essa função em nossa tag de script. Vou copiar o nome da função e duplicar uma dessas seções de funções e substituir essa função pela função de alteração. É isso mesmo. Pois vou mudar a cor de fundo, que é azul. E eu vou configurar esse arquivo. Agora você pode ter se perguntado o que a função de mudança basicamente fará Esse método funciona quando perdemos o foco do campo de entrada. Primeiro, precisamos criar o foco no campo de entrada. Então, sempre que removermos nossos carros, caso contrário, removemos nosso foco e alteramos a função chamada, deixe-me mostrar como. Agora, como você pode ver, em nossa caixa de seleção, usamos a função onchange Além disso, vou atribuir um ID à nossa caixa de seleção, e nosso nome de ID é selecionado. Então, dentro da tag do script, precisamos direcionar essa caixa de seleção usando seu D. Aqui, vou remover o elemento e substituí-lo pelo documento. O elemento get by ID é que a rodada pressiona para fornecer o nome do ID que é selecionado, pronto Depois de definir esse arquivo, vou clicar nessa caixa de seleção. Agora você pode ver, por enquanto ela chama nossa função de foco. Mas se eu selecionar qualquer país, suponha que eu vá selecionar EUA. Depois de clicar em EUA, como você pode ver, a cor de fundo é alterada. Agora ele se transformou em azul porque desta vez ele vai chamar a função de mudança, e é possível comprar somente para este evento em caso de mudança. Portanto, esse é o uso de on change. Quando eu perco o foco, caso contrário, removo o foco e ele é acionado no evento de mudança. Portanto, esse é o uso de on change. E lembre-se de que isso ao alterar o método funciona em qualquer campo de entrada. Podemos usá-lo com caixa de entrada, estúdio de texto, etc. Agora, vamos falar sobre outro evento que é selecionado. Isso ao selecionar o evento funciona depois de selecionar o valor do campo de entrada. Suponha que, em nosso campo de nome, eu digite o nome adver Basicamente, ele será acionado quando eu selecionar esse valor. Vamos chamar esse evento em nossa caixa de entrada de nome. Entrada SubTero, vou digitar em select. Em seguida, vou digitar um nome de função que é selecionar função. Agora precisamos definir essa função dentro dessa tag de script. Dentro da tag do script, vou duplicar esta seção Em seguida, vou substituir a função de alteração do nome da função para selecionar a função. Com isso, precisamos direcionar o elemento de entrada usando seu ID. Como você pode ver, o ID nav é if name. FNM significa primeiro nome. Aqui, vou substituir select por ele, se nomeado. Em seguida, vou mudar a cor do plano de fundo. Eu vou dizer cor de fundo. Rosa. Até a etapa deste arquivo. Agora, vou preencher um nome em nosso campo de nome, que é Raul Mas se eu selecionar esse nome de dez usando meu cursor, agora você pode ver que nossa cor de fundo de entrada muda para rosa, porque desta vez ela é acionada na função de seleção. Portanto, este é o nosso uso de umedecimento na função de seleção. Agora vamos falar sobre o próximo passo de Evet, que é enviar. Basicamente, usamos esse evento a partir da tag. Podemos acionar esse evento em terceiro lugar, preencher o formulário e pressionar o botão enviar. Então, vamos ao código do Visual Studio e ver como ele funciona. Então, como você pode ver no meu navegador, temos um formulário básico, mas não temos nenhum botão de envio. Então, vamos criar um botão de envio. Então, dentro da tag from, e abaixo dessa tag esquerda, vou pegar uma entrada da tag de entrada. Entrada, digite enviar. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver agora temos um botão de envio, e agora eu quero acionar o evento de envio, um clique no botão enviar. E como eu disse, precisamos chamar esse evento pela etiqueta frontal. Como você pode ver, esta é a posição inicial do Frontag. Então, dentro da etiqueta frontal, vou convocar este evento ao enviar. E dentro dos códigos duplos, vou passar o nome da tag de envio. E dentro dos códigos duplos, precisamos passar o nome da função, e o nome da nossa função é enviar função. Agora precisamos definir essa função dentro da tag do script, então vou copiar o nome da função. Em primeiro lugar, vou duplicar esta seção. Em seguida, vou substituir o nome da função. Selecione a função com envio da função. Em seguida, removerei todas as partidas desnecessárias. Aqui vou digitar o ponto do console, g, dentro das prensas redondas dentro do código duplo, você enviou um formulário E o semgrama dois nesta linha. E eu vou configurar esse arquivo. Depois de definir esse arquivo, vou abrir o painel do console em nosso navegador. Inspecione, console. E se eu pressionar o botão de envio, você pode ver que não funciona muito bem porque, em nossa tag de ação, precisamos passar um caminho PHP, caso contrário, um caminho.net, mas eu não Então, vou imprimir a mensagem em minhas bombas de alerta. Vou substituir o log de pontos do console por alertas. Alerta. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu clicar no botão Enviar, agora você pode ver na minha caixa de alerta que ele retorna, você enviou um formulário. Então, este é o fim do método de envio. Agora você pode ter uma pergunta: qual é o uso disso? Podemos extrair valor desses campos de entrada. Suponha que eu queira extrair nome desses campos de entrada ao enviar o f. Para isso, primeiro, vou comentar essa linha porque estou vendo vari lá e o nome da nossa variável é X, X igual ao documento Ponto: obtenha o elemento por ID. Está nas redondezas. São os códigos duplos. Precisamos passar o nome do ID, que é um nome. Então eu quero extrair o varu desse campo de entrada. Então digite dot Val. Então, vamos terminar essa linha. E agora vou imprimir o nome em nossa caixa de alerta. Então digite Alerta. No arredondador, os códigos para baixo primeiro digite hello. Olá, então precisamos usar a concatenação sun e eu quero concatenar com nossa variável Semiground nesta linha. Se eu definir esse arquivo, ele passa um nome e adiciona um. Em seguida, vou pressionar o botão enviar. Depois de pressionar o botão de envio, como você pode ver na minha caixa de alerta, ele imprime Hello e one. É assim que podemos extrair dados usando o método de envio. Podemos armazenar o valor e usar esse valor em qualquer lugar. Só é preciso lembrar que precisamos usar no envio do evento com a tag from. Não podemos usar esse evento nenhuma outra tag de entrada, caso contrário, qualquer tag de seleção, e podemos acionar esse evento somente usando o botão de envio. Depois de pressionar esse botão de envio , o evento será acionado. Agora vamos falar sobre nosso último evento que é inválido. Usamos esse evento quando o usuário insere um valor errado. Suponha que, em nosso sapo, tenhamos um campo de entrada, que receberá números de telefone Mas sem números de telefone, alguém digita qualquer letra maiúscula, caso contrário, qualquer caractere. Nesse caso, a função inválida acionou e gravou uma mensagem de erro Agora vamos ver como podemos usá-lo na prática. Como você pode ver, temos que dizer dois campos de entrada e um campo de seleção. Se não preenchermos esse sapo e clicarmos no botão enviar, agora você pode ver que é w. Ele não mostra nenhuma mensagem de erro, mas eu quero que esse campo de entrada de nome esteja sempre sendo alimentado Para isso, precisamos usar o atributo, um atributo estável chamado obrigatório. Aqui, dentro dessa tag de entrada, é necessário o tipo Imo. Então eu quero definir esse arquivo. Agora é necessário preencher esse nome. Agora, deixe-me mostrar como funciona. Então, para configurar esse arquivo, se eu clicar no botão Enviar, como você pode ver, agora ele mostrará uma mensagem. Isso preenche este campo. Esse é o recurso inválido de um arquivo estável. Agora, o problema é que eu não quero mostrar essa mensagem. Quero mostrar uma mensagem personalizada. E para mostrar essa mensagem personalizada, podemos usar em caso de inválido e para mostrar a mensagem personalizada que podemos usar para ver isso e mostrar a mensagem personalizada que podemos usar em eventos inválidos Só para digitar o nome do evento como inválido. Então, dentro do curso duplo, Harry digita diretamente qualquer código Java Sweep Quero imprimir uma bomba de alerta. Alerta, dentro dos vestidos redondos, dentro deste prato único porque já usamos o prato duplo. É por isso que precisamos usar códigos únicos. Quero digitar uma mensagem personalizada e a mensagem é Por favor, falhe no campo do nome”. Por favor, preencha o nome. E eu vou configurar esse arquivo. E agora vou enviar esse pino sem preencher o campo do nome Primeiro, vou digitar um pouco de Davitt em nossa seção de aula Em seguida, vou selecionar um país Nepal e vou pressionar o botão Enviar Mas se você perceber, pode ver que nosso campo de nome está em branco. Então, depois de pressionar o botão Enviar, agora você pode ver minha caixa de alerta com impressão, preencha o nome Basicamente, nós o usamos com e-mail e números de telefone. Deixe-me te mostrar como. Então, primeiro, vou mudar o rótulo “macaco”, “nome” para “e-mail Além disso, vou mudar o tipo de entrada, que é e-mail. Em seguida, vou remover esse campo obrigatório. Além disso, vou mudar a mensagem de alerta. Digite, corrija o e-mail, alguns substituam pelo digitado Correto. E-mail. E eu vou configurar esse arquivo. Então, se eu digitar o endereço de e-mail errado e tentar enviar este formulário, agora você pode vê-lo retornar esta mensagem. Insira o e-mail correto e também retenha uma mensagem padrão de é Tamil Por favor, encaminhe e repita neste endereço de e-mail. Então, tudo isso é muito importante a partir dos eventos que aprendemos neste tutorial. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo Agende o próximo tutorial. 26. JavaScript setInterval e clearInterval Tutorial: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao script Java. E neste tutorial, vamos aprender o script Java, conjuntos e o intervalo de pares Esses dois métodos são usados em animações em JavaScript. Suponha que se você quiser animar qualquer elemento, caso contrário, qualquer elemento dom, nesse caso, esse método é muito útil, que é um intervalo definido Para escrever esse método, você libera os dois parâmetros, nome da função e a hora, e precisa colocar a hora em segundo lugar. Esse segundo parâmetro funciona como um cronômetro. 1.000 milissegundos é igual a 1 segundo. Agora vamos falar sobre a função, como essa função vai funcionar com esse segundo parâmetro. Se eu passar 1 segundo, quero dizer que se eu passar 1.000 milissegundos, depois de 1 segundo, toda vez que ele chamar essa função e o que quer que façamos nessa função, ele a executará Basicamente, eu quero dizer não novamente, toda vez que ele vai chamar essa função. Se você quiser ligar para três segundos, precisará passar três segundos. Se você quiser parar essa animação em um determinado momento, nesse caso, temos outro método, que é o intervalo entre pares Usando esse método, você pode interromper a animação a qualquer momento. Então, sem perder tempo, vamos tentar entender esse conceito na prática Como você pode ver, lado a lado, abri meu editor de código do Visual Studio e meu irmão usando o Lifesaver Extension, e já criei um documento de tabela chamado index Zoot table com o qual crio outro arquivo, um arquivo JavaScript, que é um ponto de animação Por enquanto, nosso arquivo de animação está em branco. Agora, se eu voltar ao arquivo de índice, aqui você pode ver, aqui criamos um elemento profundo. Basicamente, ela cria uma caixa quadrada, altura, 150 pixels e largura, também 150 pixels, e eu defino uma faixa de cores de fundo, e agora quero animar essa caixa quadrada Quero mover a caixa quadrada do lado direito para cima novamente e, para animar esse elemento quadrado, precisamos pular para esse arquivo Js de animação dot js Defina primeiro, vou chamar nossa matemática, que é um intervalo definido. Definir intervalo é a primeira maneira de passar o nome da nossa função, e vou definir o nome dessa função, Annie Com isso, quero configurá-lo para 1.000 milissegundos, o que é igual a 1 segundo Além disso, você precisa fornecer o ponto e vírgula e, em seguida, precisamos definir essa função de anime Vamos criar a função. Primeiro, vou digitar a palavra-chave da função e o nome da nossa função é Nin Por enquanto, vou mostrar como o método de intervalo definido funciona. Vou imprimir algo no meu console. Então, digite o registro de pontos do console dentro das prensas redondas. Vou digitar olá. Antes de configurar esse arquivo e executar esse código, vou ativar a seção Inspecionar console do meu console Se eu definir esse arquivo, como você pode ver na seção do meu console, ele imprime olá, um, dois, três, está contando continuamente e imprime olá em meu conson É assim que se define a função individual. Por enquanto, não preciso desse registro de pontos do console. Quero comentar isso e configurar esse arquivo novamente. Agora vou declarar uma variável fora da função e nossa variável é aquela atribuída A com Z, semicron dois neste slide Em seguida, insira essa função, vou incrementar a variável A com dez Tipo de som A igual a A mais dez. Basicamente, defina o intervalo continuamente chamado função Nim após 1 segundo E toda vez que ele chama a função, ele incrementa o valor A com dez Então, a primeira vez imprime dez, depois imprime 20, 30, 40 e continua. E agora precisamos direcionar esse elemento quadrado usando seu ID. Tipo de sumário em que o alvo é igual a Dum Documento, obtenha eleind por ID Em seguida, dentro da resina redonda, vamos voltar ao arquivo de índice e ver o nome do ID, e o nome do ID é taste Copie o nome do ID e volte para o arquivo JS. E dentro dos códigos duplos, vou passar o nome de identificação, Ts e semig para estanhar esta linha E agora precisamos mover esse elemento usando CSS. Primeiro, vou selecionar nosso estilo de ponto de destino Dot e quero movê-lo para o lado direito. Vou adicionar uma margem na lateral do lábio. Digite margem, volta igual à nossa variável A e semigal nesta linha A cada segundo, aumentará a margem em dez. Basicamente, ele vai mover nosso lado direito quadrado. Mas se eu definir esse arquivo, ele não vai funcionar. Você pode ter uma pergunta, qual é o problema? Porque não fornecemos nenhuma unidade para a propriedade margin lip. Vou usar o seno de concatenação e, na data única, vou Vou usar a unidade de pixels. Se eu definir esse arquivo, como você pode ver, após cada 1 segundo, ele se moverá dez pixels para o lado direito e se moverá continuamente para o lado direito, por mais de 1 segundo Então é assim que podemos animar essa caixa quadrada. Por enquanto, vou comentar essa linha e configurar esse arquivo novamente para interromper a animação. E se você quiser aumentar a velocidade da animação, precisará diminuir o valor do missegundo Suponha que se você passar 200 milissegundos e descomentar essa linha e definir esse arquivo novamente, agora poderá ver a velocidade da animação Isso aumenta nossa velocidade de animação. Então, vou comentar essa linha e configurar esse arquivo novamente. Por enquanto, eu gostaria de ir com 1 segundo. Vou digitar 1.000 milissegundos. Mas agora eu quero parar nossa animação. Quando nossa caixa atingir uma margem de 200 pixels. Basicamente, eu quero dizer que, quando um valor se torna 200, eu quero parar a animação. Para isso, precisamos usar o método por intervalo. Deixe-me te mostrar. Mas antes de precisarmos usar a condição p, se o valor A for igual a 200, então dentro da condição, eu vou fazer alguma coisa. Eu uso a irmã quadrada. Além disso, vou criar esparsos. Dentro da resina quadrada, dentro do sp, vou animar essa seção Eu copio esta e vou inseri-la dentro da condição else, e também descomento esta linha Então, dentro da condição IP, agora precisamos parar essa animação usando o intervalo de pares Mas, para isso, precisamos converter o intervalo definido em intervalo entre pares Então, vou armazenar esse intervalo definido em uma variável. Então, digite o herói onde está o nome da nossa variável, você pode usar qualquer nome. Por enquanto, vou pegar a identidade. E agora precisamos chamar um método integral claro. Estamos no intervalo e na resolução redonda ou para passar esse intervalo definido de valores. Eu vou passar por mim. E então vamos para esta linha. Antes de configurar esse arquivo, vou aumentar a velocidade da animação. Vou passar 100 meganhas. Quero configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, até atingir margem de 200 pixels no lado esquerdo, ele para nossa caixa. Basicamente, animamos essa caixa, 200 pixels no lado direito alcance, margem de 200 pixels no lado esquerdo, nosso intervalo de carro, interrompa esse intervalo definido. Aqui você pode animar qualquer propriedade CSS dessa caixa. Se você quiser mudar a cor, se quiser estender a largura, sim, você pode. Deixe-me te mostrar como. Então, vamos animar o w. Então, vou configurar esta seção e comentar a linha anterior E eu vou mudar o estilo do alvo, para adicionar W. Eu quero mudar a propriedade de largura. Com e eu quero aumentá-lo para 200 pixels. Depois de atingir 200 pixels de largura , a animação será interrompida Vamos configurar o arquivo. Como você pode ver, depois de atingir 200 pixels de largura, ele interrompe nossa animação. É assim que o intervalo definido e o intervalo claro funcionam juntos. Basicamente, nós o usamos para fins de animação. Obrigado por assistir a este vídeo, fique ligado no próximo tutorial 27. Tutorial de JavaScript setTimeout e clearTimeout: Olá. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao script Java. E neste tutorial, aprenderemos sobre dois métodos, definir o tempo limite e o tempo limite de rasgar. Usando essa função, podemos especificar a hora da animação. E esse método terá um total de dois parâmetros, nome da função e milissegundo Esse segundo valor funciona novamente como um cronômetro, e você precisa fornecer como valor 1.000 milissegundos equivalem a 1 Basicamente, se passarmos 1 segundo aqui, depois de 1 segundo, ele chamará essa função. E ele executará essa função apenas por uma vez. Quero dizer, ele vai executar a animação apenas uma vez. Em nosso tutorial anterior, aprendemos sobre o intervalo definido. Usando a função de intervalo definido, podemos executar a animação repetidamente. Mas se eu usar esse método, podemos executar essa animação apenas por uma vez. E se você quiser interromper essa animação antes de começar, precisará usar esse método, um tempo limite Então, vamos começar a prática e ver como você pode usar essa metanfetamina. Então, como você pode ver, lado a lado, abro meu editor de código do estúdio de resultados e meu navegador usando a extensão life server, e eu já criei o nome do documento HTML index dot TML Com isso, aqui você pode ver, criamos um nome de arquivo de animação dot JS. Em nosso layout básico de HTML, criamos uma caixa com gosto de ID. Como você pode ver, aqui dizemos altura e 150 pixels de erva daninha. E agora eu quero estender a largura até certo tempo. Para isso, vamos usar o método set timeout. Eu quero estender a largura até 500 pixels. Então, vamos entrar no arquivo de animação dot js. Primeiro, vou degla a variável, nós identificamos. ID igual ao tempo limite definido. E, como você sabe, esse método terá um total de dois parâmetros, a primeira função. E para a função, vou pegar N e passar três segundos, isso significa 3.000 milissegundos Agora vou definir essa função. Então, digitar a função ou o nome da função é um. Então, primeiro, dentro do calibre, vou imprimir algo no meu console Vou digitar, consolar, pontuar, registrar dentro da resina redonda Dentro dos códigos duplos, vou digitar hello world. E semiegue essa linha. Agora, antes de configurar esse arquivo e executar esse código, vamos abrir nosso console. Inspecione, console. Como você pode ver, estamos na minha seção de console. Então, se eu definir esse arquivo, como você pode ver, até três segundos, ele vai imprimir hello word. E, como você pode ver, ele imprime essa declaração apenas por uma vez. Eu não me repito. E agora eu quero estender o débito em até três segundos. Então, primeiro, vou comentar essa linha. Eu não preciso dessa declaração do console. Em seguida, vou direcionar o teste D. Para isso, vou declarar uma variável, onde, e o nome da nossa variável é target Alvo igual ao ponto do documento, Gt Element by ID dentro das prensas redondas e dentro dos códigos dopo, vou passar o valor, que é sabor Em seguida, semicone para nesta linha. Então eu quero aumentar a largura usando ponto de estilo com alvo do tipo Mathod S, ponto, peso do ponto de estilo igual a Eu quero aumentá-lo até 500 pixels, 500 pixels e Semgrat Agora, se eu definir esse arquivo, como você pode ver, até 3 segundos depois, ele aumentará o desse elemento de banco de dados. Basicamente, se usarmos o método set timeout, ele executará nossa animação somente por uma vez Agora eu quero parar essa animação antes que ela comece. Eu quero parar com isso antes de três segundos. Para isso, precisamos usar o método Dear timeout. Para isso, precisamos voltar ao documento TML, e aqui precisamos pegar um botão Então, aqui vou pegar um botão de etiqueta de botão. Dentro desse botão, vou digitar stop animation. Além disso, vou usar um nome de atributo no método grego em P. E neste evento, vou chamar uma função, que é parar a animação. Vou usar esse encurtamento para animação. E eu vou copiar o nome da função. E agora vou definir essa função na página JavaScript. Aqui vou digitar a função, e nossa função M é animação. Então, dentro da classe, quando eu chamo essa função, ela limpará o tempo limite Então, vou chamar essa função PR de tempo limite dentro da resolução redonda é, temos que passar o I. e o semicórnio dois nesta linha Significa que qualquer hora que definirmos, ela limpará a hora. Por enquanto, vou aumentar o tempo. Vou fazer isso de 5.000 maneiras novamente. E agora eu vou configurar esse arquivo. Depois de acessar esse arquivo, como você pode ver, temos um botão de parada abaixo da caixa e, após 5 segundos, ele executará a animação. Agora vou configurar esse arquivo novamente. Caso contrário, recarregue esse arquivo novamente. Desta vez, vou parar a animação. Então, vou clicar nesse botão de animação. Estou esperando por cinco segundos e depois de 5 segundos, ela não roda nossa animação Antes dos cinco segundos, eu paro esse botão. É assim que podemos usar o método juntos, definir o tempo limite e limpar o tempo limite. Obrigado por assistir a este vídeo. Estátua para o próximo tutorial. 28. Tutorial de introdução de BOM em JavaScript: Olá, amigos. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial. E neste tutorial, vou apresentar a você o que é uma bomba de JavaScript. O significado completo de boom é modelo de objeto do navegador. Aqui estou falando sobre a janela do navegador. Boom está relacionado à janela do navegador. Pode ser qualquer navegador, Firefox, Google Chrome, Microsoft Age, Apple Safari, caso contrário, Opera Sem eles, existem muitos navegadores e eu não mencionei o nome deles aqui. Esses são os navegadores mais populares. O Boom está especialmente relacionado à janela do navegador, não à área da janela de visualização Eu não me importo com o que está dentro e se você quiser controlar a parte interna do seu navegador, então você deve aprender Dom. Em JavaScript, se você quiser fazer alguma programação relacionada ao navegador para isso, precisará usar o Window Object. Se você quiser manipular seu navegador, existem muitos objetos Window relacionados a métodos Vamos ver o que podemos fazer com o Window Object? Usando o objeto Window, podemos aumentar a largura do nosso navegador Usando esse objeto, podemos abrir janela do navegador e também podemos fechar a janela do navegador. Além disso, podemos redimensionar e mover nosso navegador win. Aqui, não vamos usar o cursor para redimensionar nosso navegador Temos alguns métodos de construção de objetos Window e, usando esses métodos, podemos redimensionar e colocar nossa janela em qualquer lugar da tela Além disso, podemos rolar a janela do navegador sem usar nosso cursel Com isso, usando o objeto Window, podemos obter o protocolo de nome de host URL da janela do nosso navegador. Além disso, podemos obter o histórico da janela do navegador. Histórico significa que aqui você pode ver a opção para trás e para frente Se você quiser retroceder, podemos usar o objeto Window Além disso, se você quiser seguir em frente, também podemos usar o objeto Window. Então, em nossos próximos tutoriais, aprenderemos tudo sobre isso, um por um Portanto, não perca os vídeos interessantes. Obrigado por assistir a este vídeo. Fique ligado. 29. Tutorial do método de altura e largura da janela JavaScript: Olá, amigos. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a um bongo de JavaScript E neste tutorial, aprenderemos como podemos chegar à altura e às janelas Aqui você pode ver a janela do navegador e, para obter a altura e a umidade do Winto, temos um total de quatro métodos Esses métodos são altura interna, largura interna, altura externa, largura externa. Agora, vamos tentar entender o que é altura interna e o que é altura externa. Essa é a altura interna, que contém a área da janela de visualização e essa é a altura externa Essa é a altura do navegador real. Lembre-se de uma coisa: a altura externa não conta as barras de ferramentas Agora, vamos falar sobre a largura externa e a estrutura interna. Esta é a área de largura interna e não conta a seção de guerra escolar. Da mesma forma, temos a largura externa e conta a seção da barra de rolagem. Com a parte externa, conte a área da borda. Eu disse algo errado. Além disso, o peso externo não conta a área da barra de rolagem. Ele conta a área da borda da espátula. Sem perder seu valioso tempo, vamos começar com a prática Como de costume, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão lifesaver e já crio um documento EstiML chamado ponto de índice t. Dentro dessa página EstiML de ponto índice, temos a tag body e, dentro da tag body, já digitamos a tag já digitamos Então, primeiro, dentro dessa tag de script, vou pegar uma variável, e o nome da nossa variável é altura interna. Para isso, vou digitar a altura I. Altura interna igual à altura interna do ponto da janela. Então semGround nesta linha. Agora eu quero imprimir esse valor no meu console. Para isso, vou digitar console dot log, console dot log. É a resistência redonda ou o nome da variável, altura I. Em seguida, Semgraun entra nesta linha. Da mesma forma, vou medir a altura externa. Vou criar outra variável lá e o nome da nossa variável é altura externa. O altura. Altura externa igual ao ponto de saída ou altura da janela. Então semigo esta linha, e eu vou configurar esse arquivo Então, novamente, vou imprimir essa variável no meu console. Vou digitar Console dot logins na prensa redonda, altura externa e semicícone nesta linha Vou configurar esse arquivo. Se eu te mostrar meu console, então deixe-me te mostrar. Vou escrever no meu navegador e quero começar a seção de velocidade. Herogc no console, imprime a altura interna 767 e nossa altura externa Mas se eu reduzir a altura da janela de visualização, o que acontecerá. Vou aumentar a altura da seção do console e recarregar o navegador novamente. Agora você pode ver que nossa altura interna é 303, mas nossa altura externa permanece a mesma 1047. Como eu disse, a altura interna sempre conta a altura real da janela de visualização Mas na altura externa, conte toda a altura do navegador. Então, deste ponto até este ponto é a área de altura interna, e deste ponto até este ponto é a área de altura externa. Agora, altere a área de altura externa. Vou colocar no rádio a altura de todo o navegador e depois recarregar o navegador Agora você pode ver que nossa altura externa é 854. Como você pode ver, toda vez que precisamos reprimir o navegador para ver o valor da altura interna e da altura externa E para resolver isso, vou convocar o evento de redimensionamento Vou ligar para o evento com nossa etiqueta corporal. Aqui vou digitar em redimensionar. Sobre redimensionar e nosso nome de função e nosso nome de função é função de redimensionamento Função de redimensionamento. Aqui eu chamo uma função de redimensionamento de nome de função, e agora precisamos criar a função Aqui, mais funções de tipo, e nosso nome de função é função de redimensionamento Eu copio o nome e colo aqui dentro do Calise, vou mover esse código e configurar esse arquivo Depois de configurar este arquivo, você pode ver no meu console, a impressão é insossa Mas se eu aumentar a altura do navegador, agora você pode vê-lo imprimir a altura interna e a altura externa do navegador e não precisamos atualizar nosso navegador para imprimi-lo Sempre que eu aumento a altura do navegador, ele é impresso. Agora, a altura interna é 295 e a altura externa é 1037. Da mesma forma, podemos imprimir largura interna e a largura externa. Vou duplicar esta linha e comentar a anterior Aqui eu vou empatar primeiro, aqui vou mudar a variável n, que é interna com. Largura interna igual à largura interna, igual ao ponto da janela, interna W. Em seguida, registro do console, impressão, largura interna. Da mesma forma, vou imprimir no exterior com. Então, vou digitar com o ponto da janela, sair com e, em seguida, imprimir o ponto do console, sair com. Se eu definir esse arquivo, agora você pode ver meu console, ele é impresso em branco. Mas se eu aumentar a largura do navegador, o que aconteceu? Depois de aumentar a largura do navegador, você pode ver no meu console que ele imprime a largura interna 720, a largura externa 916 Se eu aumentar um pouco o navegador, como você pode ver, imprimiria a largura interna 823 e a largura externa 1045 É assim que podemos obter a altura interna, a largura interna, a altura externa e a largura externa Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 30. Método de abertura e fechamento de janela JavaScript: Nós. É bom ver vocês. Mais uma vez, estou de volta com outro tutorial relacionado à bomba de JavaScript. E neste tutorial, vamos aprender o método JavaScript, abrir janela e fechar janela. Aqui você pode ver a janela, e ela é a Janela A. Agora eu quero abrir outra janela usando essa janela. Quero criar a janela B usando a janela A. Para isso, o JavaScript veio com uma metanfetamina especial. Que é um método aberto. Para usar o método aberto, podemos usar o botão, caso contrário, qualquer link. Além disso, você pode usar qualquer imagem clicável. Da mesma forma, se você quiser fechar a Janela B usando a Janela A para isso, precisamos usar outro método especial, que é o método close. Vamos ver qual é a sintaxe do método aberto. Aqui você pode ver uma instrução para abrir uma janela. Primeiro, precisamos digitar nome do objeto, que é Window. Então, precisamos usar o método, e nosso método é abrir janela, ponto aberto Em seguida, dentro dos vestidos redondos, aqui você precisa passar para três parâmetros, nome do URL e espaço. Basicamente, esses parâmetros são opcionais. Se você não usar esses três parâmetros , abrirá uma janela em branco. Vamos falar sobre nosso primeiro parâmetro, que é URL, e a forma completa da URL é localização uniforme de recursos. Aqui você precisa passar o nome de domínio do site. Em primeiro lugar, precisamos passar o protocolo HTTP, caso contrário, TDPs Em seguida, slash slash www dot nosso site N. Em seguida, vem nosso segundo parâmetro, que Também é um parâmetro opcional. Se você quiser dar um nome à sua janela, poderá usá-la. No nosso caso, primeira janela. Caso contrário, você pode usar alguns parâmetros predefinidos, como underscoblank, underscopParent, undersco sil e underScot . Se você quiser criar uma janela externa, poderá usar esse parâmetro, underscoblank E se você usar underscoParent , ele substituirá a janela existente Daí vem o disco Sell. Usamos o parâmetro self onde usamos iframes. Se você quiser abrir este site em um iframe específico, poderá usá-lo E nosso último parâmetro é UnderScot. Usamos esse parâmetro quando criamos nosso site em um conjunto de quadros. Atualmente, ninguém cria inferência de sites. O parâmetro popular é undiscoblank. Na maioria das vezes, usamos esse parâmetro. Agora, vamos falar sobre nosso último parâmetro, que é espaço. É a especificação principal. Ele vem com algumas vistas predefinidas, como largura, altura, elevação e topo Usando altura e largura, você pode definir o tamanho dessa janela usando a esquerda e a parte superior, você pode definir a posição. Por que você quer abrir a janela na tela? Sem eles, as especificações vêm com algumas propriedades extras, mas elas não são necessárias agora Vamos começar a prática e ver como podemos usar. Então, finalmente, estamos no meu editor de código do Viz Studio. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor Lip e já crio um documento STL chamado index dot HTML Primeiro, vou criar uma tag de botão dentro da nossa tag body. Botão. E o nome do nosso botão é Abrir desfazer E dentro dessa etiqueta de botão, vou chamar a função L. E o nome da nossa função é Abrir janela. Vou configurar esse arquivo. Agora você pode ver no meu navegador criamos com sucesso um botão chamado Abrir janela. Se eu clicar nesse botão, ele chamará a função Abrir janela. Agora, dentro da tag do script, vou criar a função Abrir janela. Eu copio o nome da função e dentro da tag do script, aqui vou digitar function. Função, e o nome da nossa função é OpenWindow. Então, dentro do alirass aqui, vou usar o método Window open Janela de cânhamo, ponto aberto e Semgroon dois nesta linha. Vou configurar esse arquivo novamente. Como você pode ver, neste método, aqui eu não passo nenhum parâmetro. Agora, se eu clicar neste botão Abrir janela, você pode ver no meu navegador que ele abre automaticamente uma janela em branco. Ele cria uma nova guia e eu vou fechar essa guia. Toda vez que ele cria uma nova guia em branco. Agora eu quero passar nosso primeiro parâmetro. Quero abrir um site em nossa guia. Aqui, dentro do código duplo, primeiro, precisamos digitar o nome do protocolo que é HTTPs. Corte dois pontos no nome do nosso site, www.google.com. Agora vamos configurar o arquivo e clicar nesse botão. Depois de pressionar o botão Abrir janela, como você pode ver, ele abre uma guia e redireciona para google.com Agora vamos falar sobre nosso segundo parâmetro, que é nome. Aqui eu passo uma vírgula e dentro do curso duplo, vou passar um nome e o nome é apenas Google O nome físico é um parâmetro opcional. Se eu definir esse arquivo e clicar em abrir janela, como você pode ver, como você pode ver, crie uma nova guia e redirecione tool.com, mas isso não muda nada O nome do título veio do site real. Além disso, aqui podemos usar alguns valores predefinidos como undiscoblack. É um vinho padrão. Se eu definir este e elogiar o botão Abrir janela, ele criará uma nova janela. Mas se eu usar outro parâmetro predefinido, que é underscoParent Se eu definir esse arquivo e pressionar botão Abrir janela de pontos e pressionar este botão, aqui você poderá vê-lo redirecionando o site na mesma Eu não crio nenhuma nova janela. Sem isso, temos duas visões: eu e a conversa. Aqui eu não vou usar essas visualizações. Se você trabalha com iFrames , pode usar o valor próprio Agora, vamos falar sobre nosso terceiro parâmetro. Mas antes de remover o segundo parâmetro, aqui vou passar em branco porque, por padrão, toda vez que ele cria uma nova janela. Agora, vamos falar sobre nosso terceiro parâmetro, que é a especificação. Supra vírgula dentro do curso da boneca. Primeiro, vou especificar a largura do navegador. Largura igual a 500 pixels. Depois do coma, precisamos especificar a altura, altura igual a 200 pixels. Lembre-se de que as propriedades sempre aceitam o valor do pixel, não o valor percentual ou o valor EM. Depois de definir o arquivo, se eu elogiar, o botão de abertura da janela, agora você pode ver o canto do laptop na tela, ele abre uma nova janela com 200 pixels de altura e 500 pixels de peso. Hair cria uma janela separada com altura e peso específicos, e você pode arrastar e soltar a janela em qualquer lugar. Além disso, você pode redimensionar a janela. Na especificação, temos dois outros valores, lift e top. Deixe-me mostrar como você pode usá-lo. Usando o elevador e o valor máximo, você pode definir uma margem para sua janela. Deixe-me te mostrar como. Supercoma primeiro, vou digitar IP à esquerda igual a 300 pixels Vírgula e de cima, eu quero 200 pixels, topo igual a 200 pixels. Vou configurar esse arquivo. Se eu elogiar o botão de abrir janela, agora você pode vê-lo abrir uma nova janela. Mas dizia margem de 300 pixels do lado esquerdo e margem de 200 pixels do lado superior. Esse valor predefinido pode abrir sua janela exatamente onde você quiser Já aprendemos como podemos abrir uma janela, agora vamos aprender como podemos fechar nossa janela a partir de uma janela existente. Para isso, vou criar outro botão. Se obtivermos essa linha e eu vou verificar se vou mudar o nome da função, que é fechar janela. Além disso, vou criar uma função para fechar a janela. Função e nosso nome de função, feche a janela. Eu copio o nome e vou colar aqui. Como eu disse no Rundre, precisamos usar o método close Window. Mas antes precisamos declarar uma variável. W e o nome da nossa variável é MyWindow. Isso começou a acabar com essa linha. Usando essa variável, vamos vincular isso à matemática. Aqui eu quero digitar minha janela igual à função de abertura de janela dentro da função de janela fechada, aqui eu quero digitar minha função de fechamento de pontos de janela. Um semicro nesta linha, e eu vou configurar esse arquivo Agora você pode ver no meu navegador, temos dois botões diferentes, abrir janela e fechar janela. Antes de executar esse código, quero te dizer uma coisa. No navegador Chrome, a função fechada não termina. É por isso que vou executar esse código no navegador Firefog Então, vou abrir meu navegador Firefrogs. Como você pode ver, eu já abri esse índice de arquivos aML. Se eu elogiar o botão de abrir janela, como você pode ver, ele abre nossa janela na posição especificada com especificar altura e especificar asa. Se eu chamar a função fechada usando o botão fechar janela, agora você pode vê-la fechar nossa guia. É assim que podemos usar o método aberto e fechado. Obrigado por assistir a este vídeo. Fique ligado na nossa próxima Jill. 31. Janela JavaScript moveBy e tutorial moveTo: Novamente, estou de volta com outro tutorial relacionado ao Java. Neste tutorial, aprenderemos a janela W B e o método opt. Aqui você pode ver na tela que temos uma janela chamada A e, usando essa janela, eu abro outra janela, que é B, e já aprendemos sobre o método aberto em nosso tutorial anterior. Com isso, também aprendemos sobre as especificações. Como eu disse em nosso tutorial anterior, se você não passar o valor esquerdo e superior, por padrão, abrirá nossa janela no canto do laptop. Mas podemos especificar a posição da janela usando Val esquerdo e superior. Mas agora, depois de criar a janela B, quero mover a janela. Eu quero mover a janela da janela A, não da janela B. Para isso, temos dois métodos, mover B e mover. Ambos os métodos fazem o mesmo trabalho, mas há pequenas diferenças. Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Lado a lado, abro meu editor de código do estúdio de resultados e meu navegador usando a extensão if server, e abro meu documento de estimativa anterior. Em nosso tutorial anterior, aprendemos como podemos abrir uma janela em uma posição especificada com altura e altura especificadas. Primeiro, vou criar outro botão. Então, Dub, pegamos o botão e eu vou mudar o nome do botão, que é Window. Mover janela. Além disso, vou mudar o nome da função. Abra a janela dois. Mova a janela depois de definir o arquivo, como você pode ver, agora o HelpPub abre a janela e move a janela Em seguida, vou remover a propriedade esquerda e superior porque quero colocá-la na posição padrão, ou seja, no canto superior esquerdo. Agora precisamos criar a função de mover janela. Eu copio o nome da função e sua função de tipo, e o nome da nossa função é move Window. Então, o CaliSF que vou usar move dois movimentos matemáticos. Aqui eu quero digitar minha janela dot move two. Então você disse que os vestidos de penugem, precisamos passar dois parâmetros. Precisamos especificar a posição. Aqui precisamos passar para dois, esquerda e direita. Então, para XXs, vou tomar 100 e coma para YXs também vou tomar Então, vou nessa linha e vou configurar esse arquivo novamente. Agora, vamos definir o código e tentar abrir a janela. Como você pode ver após o elogio, abra o botão da janela, ele pintará uma nova janela na posição padrão. Se eu elogiar o botão de mover janela, não vai funcionar. Deixe-me te mostrar. Aqui eu elogio o botão de mover janela. Como você pode ver, após elogios, mova o botão da janela, ele não move nossa janela em uma posição especificada. Se eu mostrar minha seção de console, na especificação Console, aqui você pode ver um erro porque se redirecionarmos para o site de outra pessoa, não poderemos mover a janela Então, não podemos controlar a janela. Os navegadores não têm permissão para fazer isso. Mas se eu remover a barra de URL, o que acontece. Aqui, vou passar um valor bancário para nosso primeiro parâmetro. Eu removo. E defina o arquivo novamente. Agora, novamente, vou pressionar o botão de abrir janela, abrir sua janela e agora quero mover a janela. Se eu pressionar o botão Janela, agora você pode vê-lo mover nossa janela perfeitamente. Agora estamos em nosso próprio site. É por isso que podemos controlar a janela do navegador. Agora o problema é mover a janela, perdemos o foco dessa janela. Agora é focar nessa janela. Agora, mova a janela para cima, eu quero focar a janela. Para isso, precisamos usar outro método, que é o foco. Meu método de foco de pontos na janela. E então semicone para finalizar a linha. Vou configurar esse arquivo novamente. Mais uma vez, vou abrir outra janela. Depois do elogio, abra o botão da janela. Como você pode ver, ele cria uma janela. Se eu elogiar, mova o botão da janela, agora você pode ver, agora ele redireciona o foco para esta janela Agora o que? Se eu especificar a posição exata quando abrirmos a janela, deixe-me mostrar a você. Aqui, vou passar o valor esquerdo e superior mais uma vez. P igual a 300 pixels. Parte superior igual a 300 pixels. Agora, vamos abrir a janela novamente. Então, elogie o botão de abrir a janela. Agora você pode vê-lo abrir nossa janela na posição especificada. Do lado esquerdo, são necessários 300 pixels. Do topo também são necessários 300 pixels. Se eu elogiar o botão mover janela, ele moverá nossa janela para a posição exata em que está especificada. Agora, vamos falar sobre outra função, que é mover por. Vou duplicar esta linha e comentar a anterior e o Hem para usar o método move by. Siga em frente. Vá para a função, mova nossa janela de acordo com a tela, mas mova por função, mova a janela de acordo com a posição relativa. Deixe-me te mostrar o que. Pré-configure esse arquivo. Eu elogio o botão de abrir janela, como você pode ver, ele abre nossa janela nesta posição especificada. Mas se eu elogiar o botão Mover Janela, agora você pode vê-lo mover nossa janela da posição relativa. A partir dessa posição, ele se move 100 pixels no final, também a partir do topo. Este é o uso de move by e mop para funcionar. Apenas uma coisa que você precisa lembrar: mover para a função a partir da posição absoluta e mover por função a partir da posição relativa. Essa é a diferença básica entre duas funções. Obrigado por assistir a este vídeo. Fique até mesmo para nossa próxima tarefa. 32. JavaScript resizeBy e resizeTo Tutorial: É bom ver vocês de volta, pessoal. Mais uma vez, estou de volta com outro tutorial, relacionado à bomba de JavaScript. Neste tutorial, aprenderemos dois outros métodos, redimensionar por e redimensionar Aqui você pode ver uma janela do navegador. Quando abrimos a janela, especificamos um tamanho de cem por cem pixels. Agora você deseja redimensionar este navegador sem arrastar e desenhar e também deseja especificar ocultar e semana Para esse tipo de redimensionamento, temos dois métodos em Java script, Resize B e redimensione Sem perder tempo, vamos começar a prática e ver o que é isso Como de costume, lado a lado, abro minhas viseiras no editor de código e no meu navegador usando a extensão Live Server e abro meu documento de estimativa anterior chamado ponto de índice t. Se eu elogiar o botão abrir janela, como você pode ver, ele cria uma nova janela e já especificamos altura e peso para essa janela com 500 e altura 200 E agora eu quero redimensionar essa janela sem arrastar. Para isso, primeiro, precisamos pegar um botão. Vou duplicar essa linha e aqui vou mudar o nome da função Vou substituir open We redimensionar. O nome da nossa função é redimensionar janela, e também precisamos alterar o botão fixo, Redimensionar E agora precisamos definir a função em nossa tag de script. Eu copio o nome da função e digito a função, e o nome da nossa função é redimensionar janela Então, em vez do Cariss, precisamos digitar meu ponto de janela, o nome do nosso método, que é redimensionar dois E aqui precisamos passar a largura, e vou dizer que aumentou a largura 400 por 400, 400 vírgula 400 e semigrante dois nesta linha. Então, vamos configurar o arquivo. Aqui você pode ver os dois botões. Então, vou elogiar o botão de abrir janela. E agora eu quero redimensionar essa janela. Então, vou elogiar o botão de redimensionamento da janela. Depois de elogios, redimensionar janela, você pode ver o resultado. Mudou de acordo com a altura e nós. Este é o uso do método do recesso dois. Vamos ver nosso segundo método, que é redimensionar Bye No começo, vou duplicar essa linha e comentar a anterior Vou substituir o recesso dois pelo recesso Bye. Outra pergunta é: qual é a diferença entre o método redimensionar, comprar e recessar dois métodos Se usarmos o método resize By, ele ampliará a altura e o wei existentes Aqui você pode ver que, quando abrimos nossa janela, definimos a altura de 200 pixels. E se usarmos a função redimensionável, ela aumentará a altura com a altura existente Vai adicionar 400 com 200. Da mesma forma, ele adicionará 400 com 500. Deixe-me te mostrar. Então , por favor, defina este arquivo, eu vou abrir a janela. Agora você pode ver que a altura da nossa janela é 200 pixels e W é de 500 pixels. Mas se eu elogiar a janela de redimensionamento, agora a altura da guia é de 600 pixels e a largura da guia é de 900 pixels O redimensionamento por método funciona com valor existente e o recesso ao método, mas o recesso ao método funciona separadamente Portanto, essa é a diferença entre o método redimensionar por e recessar dois Então, obrigado por assistir a este vídeo. Fique ligado na nossa próxima exibição. 33. Tutorial de JavaScript scrollBy e scrollTo: É bom ver vocês. Novamente, estou de volta com outro tutorial relacionado à bomba Javascrip E neste tutorial, aprenderemos o método scroll by e scroll two. E você pode ver uma janela do navegador na tela. Além disso, você pode ver a barra de rolagem de partículas e a barra de rolagem e Agora, você quer rolar a janela sem tocar na barra de rolagem Para isso, o Javascrip introduz um método especial. Role B e role dois. Antes de começar a prática, precisamos entender quantas barras de pontuação digitadas temos em nosso navegador. Como eu disse, temos que tocar em duas barras de pontuação digitadas, vertical e horizontal. Se você quiser manipular a rolagem vertical, então você precisa passar YxS L se quiser manipular a pontuação horizontal, para isso, você precisa usar XX W. Se você quiser mover a barra de rolagem para cima, para isso, você precisa passar menos YxSh se quiser movê-la para baixo, então, por padrão, você precisa passar o V. Você não precisa mencionar o V. Você Da mesma forma, na barra de rolagem horizontal, se você quiser mover o lado esquerdo, você precisa passar menos V, se você quiser mover essa barra de rolagem para o lado direito, você precisa passar las V. Vamos começar a prática e ver como podemos usar a rolagem dois e a rolagem pelo método Como você pode ver, lado a lado, abro meu editor de código do Visor Studio e meu navegador usando a expansão do servidor if, e já crio um documento estimado chamado index dot t. Como você pode ver dentro da tag body, temos uma turma de ouvintes, agora eu quero usar a barra de rolagem Para isso, vou adicionar um parágrafo, um parágrafo grande. Aqui eu vou usar a tag P. E dentro da etiqueta de velocidade, vou digitar im 2000. Aqui eu vou adicionar 2000 parágrafos de Wardro. É enorme, e eu vou configurar esse arquivo. Aqui você pode ver uma barra de rolagem em nosso navegador. Agora precisamos adicionar um botão abaixo da tag do título. Aqui vou digitar o botão. E aqui vou digitar uma legenda e vou digitar janela de rolagem Com isso, vou chamar uma função com evento de clique. Então, aqui vou digitar no cle on clay ao clicar e o nome da nossa função é scroll Window. E eu vou copiar o nome da função. E dentro da tag do script, vou definir a função. Função, e o nome da nossa função é scroll Window. Então, em Calvis, aqui vou digitar Window, Window dot, aqui vou usar o método scroll by Dentro do downdrass, vou passar por dois parâmetros Por enquanto, eu não quero passar X xs. Eu passo zero para YxS. Quero rolar 40 pixels para baixo. Eu passo por mim e depois semicroTN nesta linha. E eu vou configurar esse arquivo. Depois de configurar o arquivo, você pode ver o botão da janela de rolagem. Como você pode ver, nossa barra de rolagem está no topo, mas se eu elogiar botão da janela de rolagem, você pode vê-lo descer 40 pixels. Se eu pressionar novamente, novamente, ele descerá 40 pixels. Mas agora eu quero rolar na direção ascendente. Para isso, aqui precisamos passar a janela negativa. Eu passo -40 e defino esse arquivo. Depois do elogio, role a janela, como você pode ver, ela move nossa barra de rolagem para cima. Então, aqui trabalhamos com a barra de rolagem vertical. Vamos trabalhar com a barra de rolagem horizontal. Para isso, precisamos dar uma olhada profunda. Então, aqui vou digitar D. E vou mover esse parágrafo para dentro dessa aba de imersão Eu recorto esse parágrafo e o pressiono dentro dessa aba profunda. E agora vou usar o atributo de estilo no estilo de parágrafo e vou usar com propriedade. Peso, mangueira em pixel. Perturbe esse arquivo, você pode ver o resultado. Aqui você pode ver uma barra de rolagem horizontal em nosso navegador. Agora vou pagar com o valor X texas. Vou fazer com que o valor YX seja zero. E em xx zero, aqui eu vou passar de 100. Configure este arquivo. Se eu pressionar a janela de rolagem, você pode ver o botão Janela pressionado para cima, eu rolo para fora do navegador 100 pixels na direção xxs. Se eu usar o valor negativo aqui e definir este arquivo, e depois novamente, eu pressiono este botão Agora você pode ver que ele moveu o parágrafo na direção oposta. É assim que podemos usar XX Z e X W. Agora, vamos falar sobre a propriedade de rolagem. Quero cavar esta linha e comentar sobre as figuras um aqui. Vou mudar scroll by com scroll do. Vou configurar esse arquivo. Além disso, vou alterar o d zero em xxS e zero em YxS e definir esse arquivo Antes de elogiar, rolar o botão da janela, vou mover para baixo ou rolar a barra de rolagem. Se eu elogiar, role o botão da janela agora, como você pode ver, de volta à posição padrão. Desculpe, não é a posição padrão porque ela disse que XX é zero e YX é zero É por isso que voltei à posição inicial. Da mesma forma para a barra de rolagem horizontal. Se eu movê-lo um pouco e depois pressionar este botão, como você pode vê-lo de volta à posição anterior. Role por trabalho de forma relativa e role para funcionar de forma absoluta. Essa é a diferença entre método scroll by e scroll to. Obrigado por assistir a este vídeo, fique ligado nos próximos dois 34. Tutorial de objeto de localização em JavaScript: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado à bomba Java Streep Neste tutorial, aprenderemos o objeto de localização Java Streep Aqui você pode ver o navegador na tela. E, como você sabe, essa é a barra de URL desse navegador. Caso contrário, podemos chamá-la de barra de localização. Se você quiser obter qualquer tipo de valor deles para isso, você precisa usar o objeto de localização e, usando a ajuda de algumas propriedades especiais, podemos obter os valores. Temos um total de 19 propriedades e alguns métodos. Vamos aprender tudo isso um por um. Vamos começar a prática e ver como podemos obter valores da barra de URL com a ajuda dessas propriedades. Como de costume, lado a lado, abro meu editor de código sult studio e meu navegador usando a extensão light de servidor, e já crio um documento ESTiml chamado index dot E agora vamos praticar propriedades do objeto de localização, uma por uma. Aqui você pode ver a barra de localização. Além disso, você pode ver uma coisa especial, que é um endereço IP, porque executamos nosso arquivo HTML a partir do servidor b. Se você abrir o arquivo no servidor vo local, caso contrário, em qualquer servidor online, poderá usar essas propriedades. Agora, vamos abrir o console e experimentar o objeto de localização. Aqui, motype console dot log, console dot logins no local das prensas redondas Localização do tipo hemo. Se eu pressionar Enter, agora, se eu abrir a seção suspensa, aqui você poderá ver o nome de todas as propriedades do objeto de localização, hash, host, nome do host, HID, origem, nome da peça, hot, etc Como você pode ver, os valores. Lembre-se de que você só pode obter o resultado ao executar o arquivo no servidor. Agora, vamos executar o mesmo comando no google.com. Em outro tipo, eu já abro o google.com. Aqui, também, vou abrir meu console. Vou digitar o log de pontos do console. Dentro da roupa redonda está a localização. E Semgro dois neste slide. Se eu pressionar terceiro e abrir a seção suspensa Agora você pode ver o tipo similar de dados fornecido pelo google.com Aqui você pode ver o nome do host e o host é o mesmo. Além disso, você pode ver o caminho a origem e o protocolo é TDPS, como você sabe, S significa seguro Se eu mostrar meus dados do servidor local, como você pode ver, o protocolo é HTDP Quero dizer, não é um site seguro. Esse é o tópico diferente. Agora, um por um, quero obter todos os valores. Para isso, precisamos usar todas as propriedades de localização. Vamos ver como podemos obtê-lo. Primeiro, quero retornar o nome do host do nosso servidor local. Para isso, precisamos digitar Console dot log is at the rounddresses Primeiro, precisamos chamar o objeto de localização. Localização, ponto e o nome da nossa propriedade, e o nome da nossa propriedade é H. E semicon para digitalizar esta linha Se eu pressionar Enter, como você pode ver, ele retornará o nome do host. Ele retornou o endereço IP. E se você estiver no mesmo comando para a página go, deixe-me mostrar o som, pressione este código e pressione Enter, agora você pode ver que está escrito o nome do host www.google.com Como você sabe, nosso arquivo de índice ponto a ponto executado no servidor Vos local. É por isso que está escrito o endereço IP, mas o google.com é executado a partir do servidor on-line e, como você sabe, o endereço IP está vinculado ao domínio É por isso que escreveu o nome do domínio. Da mesma forma, se você quiser retornar o nome do host, deixe-me mostrar o nome do host do ponto de localização. E execute esse código, ele escreveu o mesmo resultado. Mas se você executar o mesmo comando no servidor Locaos, deixe-me mostrar o nome do host do ponto de localização Em seguida, execute o código. Agora você pode ver que ele escreveu o único endereço IP, mas no host, ele também escreveu o número da porta. Agora eu quero retornar a URL completa deste site. Para isso, precisamos usar o HRDA. Ele paga o código, ponto de localização, HR. Se eu pressionar Enter, você poderá ver o resultado. Ele retorna o protocolo, o nome do servidor, o IP do servidor, caso contrário, o nome do domínio e o arquivo que abrimos. Você só precisa se lembrar da propriedade HRD, retornar o nome da página com o nome do host Agora vamos falar sobre outra propriedade que é para. Então, para executar o comando e localizar o ponto quatro. Novamente, vou executar esse comando e aqui vou digitar location dot port. Se eu executar esse código, você pode vê-lo retornar o número da porta, que é 5.500 Você pode ver o mesmo nome de porta na barra de URL após o endereço IP, Colon 5.500 E da mesma forma, se retornarmos o protocolo, deixe-me mostrar o protocolo de localização do log de pontos do console. E esse código, você pode vê-lo retornar HTTP. Se eu executar o mesmo código na página google.com , copie o E se eu executar esse código aqui, agora você pode vê-lo escrito no protocolo HTDPH Agora, vamos falar sobre outra propriedade que é o hash. Portanto, em nossa barra de Ido, até slash, vou usar has hash second Se eu pressionar Enter, como você pode ver, é um erro de gravação porque o hash não está disponível, por isso que é um erro escrito Mas se eu executar este comando, deixe-me mostrar a você o console dot log location dot hash Depois de pressionar Enter, como você pode ver, é escrito segundos por segundo. Agora vamos falar sobre outra propriedade que é a pesquisa. Para isso, vou entrar na guia do Google e, primeiro, pesquisar algo como imagem. No meu console, vou executar um comando, console dot log location dot search. Se você quiser retornar esse valor de pesquisa do URL ou daquele, você pode usar esse comando. Basta digitar a pesquisa por pontos de localização. Se eu pressionar Enter, como você pode ver, são imagens escritas. Aqui, pesquisamos o comando Imagens e os outros dados são adicionados pelo próprio Google. Além disso, você pode ver a consulta de pesquisa automática em nossa barra ERL, pesquisar imagens Na maioria das vezes, usamos esse comando quando você trabalha com uma linguagem do lado do servidor, como PHB. Aprendemos como podemos obter o valor do URL. Além disso, também podemos definir os valores. Deixe-me te mostrar. Estou de volta à página de estimativa do índice e, aqui, vou digitar location dot HRF Agora eu quero definir um nome de domínio. Para isso, para digitar igual a dentro dos códigos duplos, primeiro precisamos digitar o protocolo. Aqui eu vou usar TDPs. Corte dois pontos no nome do domínio, www.google.com. Então, eu vou para esta linha. Agora, se eu definir esse arquivo e reprimir essa página HTML de ponto de índice, deixe-me mostrar Como você pode ver, é reditggle.com. Você já aprendeu sobre como podemos usar essa propriedade para definir valor e obter valor. Agora vamos falar sobre métodos de localização de objetos. Eles são designados para recarregar e substituir. Se você quiser definir um novo valor nessa barra de vado, para isso, você pode usar o método atribuído Se você quiser substituir sua página por isso, você pode usar reload O último é o substituto. Também é muito semelhante ao método atribuído, mas há uma pequena diferença entre eles. Então, deixe-me te mostrar. Aqui você pode ver que você já criou o nome do botão clique e também adicionamos o evento. Você pode ver o clique da função. Nesta função, primeiro, vou usar o método de localização e recarga, reload Se eu definir esse arquivo e depois clicar nesse botão, toda vez que você puder ver na minha barra de URL, ele recarregará meu navegador Agora, quero atribuir um novo valor à nossa barra de URL. Para isso, precisamos usar o método assign, location dot, assign Inside the Runddress precisamos fornecer o nome do domínio Primeiro, precisamos digitar o protocolo, HTTPs, barra de dois pontos www.google.com Depois de definir esse arquivo, se eu clicar nesse botão, agora você pode ver que ele foi reescrito para google.com Esse é o uso do método atribuído. Agora, vamos falar sobre nosso último método, que é o Ripples. Vou escolher esta linha e comentar a anterior. Aqui, vou vincular os RPLs de pontos de localização. Esse método também funciona como o método atribuído, mas removeu o histórico. Deixe-me te mostrar. Dentro do curso duplo, vou digitar o mesmo site, google.com Depois de inserir o arquivo, vou clicar no botão. Agora você pode vê-lo redirecionando para go.com. Mas se você focar na minha seção de setas, como você pode ver, na nossa seta para a esquerda, não temos nenhuma opção de voltar atrás porque ela removeu o histórico. Espero que o objeto de localização esteja claro para você. Obrigado por assistir a este vídeo, Stid. 35. Tutorial de objeto de história em JavaScript: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado à bomba de JavaScript e, neste tutorial, aprenderemos sobre o objeto histórico. Neste tutorial, aprenderemos todas as propriedades e métodos relacionados ao objeto histórico. Aqui você pode ver a tela do navegador. Além disso, você pode ver dois botões, para trás e para frente. Se você quiser ver as páginas para trás e para frente, precisamos usar o objeto de histórico e nosso objeto de histórico veio com apenas uma propriedade, que é Ln Na mesma janela, quantos sites você abre usando uma propriedade você pode obter. Deixe-me mostrar a propriedade na prática. Como de costume, lado a lado, abro o editor de código do estúdio de usuários e meu navegador usando a extensão Lifesaver e já crio um documento de estimativa chamado index dot No início, vou abrir minha seção Console, inspecionar e registrar pontos do console do tipo Console and Hemo, Console dot, Log inspecionar e registrar pontos do console do tipo Console and Hemo, Console dot, Log dentro do histórico do tipo Hemo Round Brress. dentro do histórico do tipo Hemo Round Brress Em seguida, submicron para Nil. Se eu pressionar Enter, agora você pode ver na minha tag de histórico, agora você pode ver um menu suspenso. Se eu abrir essa lista suspensa, como você pode ver, o comprimento é um E se eu abrir a opção de protótipo, agora você pode ver um pouco de matemática, voltar para frente, ir, comprimento, etc Agora, vamos adicionar uma etiqueta cortada dentro da etiqueta corporal. Aqui vou digitar A e o link é HTTPs, dois pontos, barra e barra o site é google.com, www.google.com Vou configurar esse arquivo. Além disso, precisamos adicionar um texto a essa tag Ange. Vou digitar Google. Eu pressiono este arquivo, você pode ver um link neste site e agora vou pressionar google.com Como você pode ver, é redirecionado para google.com. Se eu mostrar meu comprimento agora, no meu console, vou digitar Console dot log. São as prensas redondas, quero devolver o comprimento Aqui vou digitar o comprimento do ponto histórico. Peça a Semira que acabe com essa linha. Eu pressiono este arquivo. Se eu pressionar Enter, agora você poderá vê-lo retornar para. Outra questão é por que está voltando para Porque agora você tem uma história retrógrada Se eu clicar neste botão Voltar, agora você pode ver que ele está de volta à minha página EstiML de pontos de índice Novamente, vou mostrar esse histórico Console, ponto, histórico de registros. Então você pode ver agora que o comprimento também está , porque agora nosso botão de avanço está ativado. Agora podemos avançar para google.com sem pressionar este link. Você pode ver o resultado. Espero que agora esteja claro para você como funciona a função da lente. Agora, vamos falar sobre o método do objeto histórico. Normalmente, temos um total de três métodos úteis , retroceder e continuar. Se você quiser avançar e retroceder sem pressionar essa seta, use esse método Se você quiser retroceder, precisará usar o método B. Se você quiser seguir em frente, precisará usar forward e, usando o método go, você pode fazer o clima. Vamos entrar no código do salt studio e ver como podemos usá-lo. Primeiro, vou mudar o endereço do link. Aqui eu vou amarrar o ponto de índice HTM. E vou substituir o Google pela página dois, página dois, e vou definir esse arquivo. E também vou mudar o título. Vou substituir o objeto de histórico do JavaScript por Estamos na primeira página e definir esse arquivo. E agora precisamos criar um ponto de índice para estimar a página no meu diretório de trabalho atual Então, aqui vou criar outra página, indexar dois pontos em HTML. E vou copiar todo o código do Index StimlPage E cole-o na página de estimativa de dois pontos do índice. Vou substituir primeiro, vou substituir nosso título. Estamos na página dois. Novamente, vou criar outra página. Aqui vou mudar o nome do link, página três. Como precisamos redirecionar para outra página, indexe três e defina esse arquivo Então eu seleciono a buzina e a copio. Novamente, vou criar outro ponto de índice StimlPage. Indexe o HTML de três pontos. Vou colar todo o código aqui. Pois vou substituir a página dois pela página três. Estamos na página três. Mas desta vez, não preciso de nenhuma tag âncora para redirecionar. Vou remover essa etiqueta de gato e definir esse arquivo. Agora você pode ver no meu navegador, estamos na minha página HTML de índice. Primeira página principal. Agora eu quero pular para a página dois. Vou clicar neste link, página dois. Como você pode ver na minha barra de URL, ele é redirecionado para indexar dois DML Novamente, decido pular para nossa próxima página, que é a fase três. Se eu clicar neste link, agora você pode ver que estamos na página três. Se eu te mostrar meu histórico, Console, Dot log está no histórico do Roundbress Agora você pode ver que o tamanho do histórico é três porque temos que fazer três páginas porque visitamos três páginas no mesmo Wint. Se você perceber, pode ver que temos apenas a opção para trás, não a opção para frente, porque estamos na página três Se eu louvo a seta para trás, agora estamos na página dois. Nesta página, temos duas opções. Mas nesta página, temos as duas opções. Podemos retroceder, também podemos avançar. Agora eu decido retroceder. Como você pode ver, podemos retroceder e avançar na seção URL Mas agora eu quero fazer a mesma coisa usando botões. Para isso, vou criar dois botões. Botão, e o nome do nosso primeiro botão está de volta. Além disso, aqui precisamos convocar um evento, que é clique. Ao clicar, também é necessário fornecer o nome da nossa função e o nome da nossa função é a função B. Função traseira. Com isso, vou criar outro botão. Entendemos essa linha e nosso novo nome de botão é encaminhar. E também precisa mudar a função. Então, aqui vou digitar para frente. E agora precisamos criar ambas as funções em nossa tag de script. Então, primeiro, vou copiar a função Bap. E aqui vou amarrar a função, e o nome da nossa função é função BP. Então, dentro da redonda, vou amarrar o ponto B. Para a função de retorno, eu uso o método back E, novamente, vou datar esta seção e também vou alterar a função de encaminhamento do nome da função. Copie o nome da função e sobrescreva-o. Além disso, vou mudar o método aqui. Vou substituir para trás por para frente. É isso, e eu vou configurar esse arquivo. Como você pode ver, criamos a função e o botão na página de índice três. Precisamos copiar esta seção. E precisamos fazer a mesma coisa no botão Índice dois e também no botão Índice um. Desculpe, página. Agora você pode ver em nossa primeira página, temos o botão para trás e para frente Agora eu quero decidir seguir em frente. Se eu elogiar o botão de avançar, como você pode ver, ele é redirecionado para a página dois E se você decidir retroceder, basta elogiar o botão Voltar Então, novamente, estamos na primeira página. E agora vou elogiar o botão de avançar duas vezes. Agora estamos na segunda página, e também vou avançar na fase três. Então, novamente, vou elogiar o botão de avançar. Então, agora você pode ver que estamos na fase três. Mas o que? Se eu elogiar o botão de avançar novamente, o que acontecerá? Como você pode ver, pressione o botão Avançar para cima não dá para nada porque depois da fase três, não temos nenhuma opção de avançar E você também pode ver isso na seção URL. Nosso vazamento direto está desativado. Agora, vamos falar sobre nosso último método, que é go. Por isso, estou retrocedendo. Quero dizer que vou voltar à fase dois e também abrir o índice HTM de dois pontos Aqui, vou criar outro botão. Eu dupliquei o botão e vou substituir a função de avanço pela função goFunction Além disso, vou mudar o nome do botão. Vá. Agora vou criar a função em nosso script. A função e nossa função n é a função go. Vá funcionar. Então, dentro do calis, aqui você precisa digitar o ponto histórico, vá Então, dentro da roupa, aqui você precisa passar um parâmetro Se você quiser avançar, precisará passar um valor positivo. Se você quiser retroceder, precisará passar o negativo Primeiro, quero seguir em frente. Aqui eu passo um. E eu vou configurar esse arquivo e recarregar a segunda fase. Agora você pode ver que há um botão NMG. Se eu pressionar o botão go agora, como você pode ver, redirecione para a página três Agora, vamos fazer a mesma coisa no índice StimlPage de três pontos Então eu copio esta seção. E então vou pular para o índice StimlPage de três pontos e vou substituí-lo por um novo código Mas antes de configurar esse arquivo, quero dar dois passos para trás Quero dizer que quero pular para a página um a partir da página três. Eu quero pular a página dois. Para isso, aqui você precisa passar um filme negativo. Então, aqui eu vou passar menos dois. Agora você pode ver na minha página três, o botão Go aparece. Se eu elogiar o botão go, agora você pode ver que ele é redirecionado para a página um, é pular a página dois Também vou fazer a mesma coisa na primeira página. Novamente, vou copiar a seção antiga e substituir nosso código anterior pelo novo código da primeira página, agora quero redirecionar para a última página Eu quero dizer página três. Para isso, precisamos passar positivamente. E se eu definir esse arquivo, você pode ver o botão. Se eu elogiar o botão go, agora você pode ver que ele foi reeditado na página três O herói usa com sucesso três tipos de métodos históricos para trás, para frente e para frente Espero que agora esteja tudo bem. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo Tutorio. 36. JavaScript pageYOffset e pageXOffset Tutorial: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao Javascript vinculado. E neste tutorial, vamos aprender sobre dois novos métodos, página Y oposta e página X oposta Esses métodos funcionam com a janela do navegador. Então, deixe-me mostrar um exemplo. Aqui você pode ver que temos uma janela do navegador e, se você notar a barra de rolagem vertical, já rolamos um pouco a página. Também para a barra de rolagem horizontal, já a rolamos um pouco e agora queremos extrair a distância, quanto rolamos. Precisamos extrair a distância e medi-la. Isso é para a barra de rolagem vertical, e também extraímos a distância da barra de rolagem horizontal. Para isso, o JavaScript introduz dois métodos. PageY no site e página oposta. Então, sem perder seu tempo, vamos começar a prática e ver como podemos usar esses métodos Então, como você pode ver, lado a lado, abri meu editor de código do Visual Studio e meu navegador usando a extensão lip server e já criei um documento HTML chamado index dot TML Se você notar, você pode ver não há barra de rolagem em nosso navegador, nem na vertical, nem na Então, por enquanto, em nossa tag body, vou adicionar W Parag, P, e vou adicionar muito O. Lorem, 2000 E eu vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele adicionou uma barra de rolagem vertical. E agora vou arrastar um pouco para baixo a barra de rolagem. Com isso, quero extrair o valor de quanto rolamos. Então, vou usar o método PageY Osit. Então, aqui eu quero digitar a tag do script dentro da tag body, Script. Então, dentro da tag Script, como você sabe, estamos trabalhando no tipo de objeto de janela, Window. Em seguida, vou adicionar o evento de rolagem. Vou usar o add event listener. E dentro das prensas redondas, vou usar o evento de rolagem Então, quando eu rolar esta página, ela chamará uma função anônima. Então, vou criar uma função. função está nas cólicas e agora eu quero extrair o valor da rolagem vertical Com isso, quero imprimir esse valor em nosso console. Então, vou digitar Console, dot, log dentro das rodadas dentro dos códigos das portas Vou digitar a página Yost. Com isso, vou usar o sinal Cgation e quero imprimir o valor invertido da janela Y, a página de pontos da janela Y perturbada página de pontos da janela Y E vou adicionar ponto e vírgula para finalizar essa linha. E antes de configurar esse arquivo, vamos ligar o console em nosso navegador. Inspecione, console. E eu vou configurar esse arquivo. No topo deste arquivo, você pode ver o valor. O valor oposto da página Y é 563. Nós rolamos 563 pixels na direção YxS. E se eu mover a barra de rolagem para cima, agora você pode ver o valor atual, que é zero E se eu movê-lo para baixo, agora você pode ver o valor Aqui você pode ver agora que a página Y poste Vee é 1.505. Mas agora o problema está em nosso console, ele imprime todos os valores desnecessários. Eu quero o valor exato. Para isso, precisamos limpar o console. Então, aqui digite o ponto R Mathur do console. E inscreva-se para encerrar esta linha. E eu vou configurar esse arquivo. Depois de definir esse arquivo, agora você pode ver o valor exato, quanto rolamos, 1.505 pixels Se eu mover essa barra de rolagem para cima, caso contrário, para baixo, você poderá ver É imprimir o valor exato da palavra de rolagem. Da mesma forma, podemos extrair o valor oposto da página x. Então, vou duplicar essa linha e, desta vez, vou imprimir a página x oposta Mas o problema é que não temos nenhuma palavra de rolagem horizontal em nosso parágrafo. Para isso, vou usar um elemento DV em nossa etiqueta corporal. Então, antes do início do parágrafo, aqui vou pegar um elemento Dev. Ponto profundo, ponto, caixa. Além disso, vou estilizar esse elemento profundo usando seu nome de classe. Então, a caixa de pontos tipo Hemo dentro do Caris é a primeira propriedade, vou usar com Altura 300 pixels. E eu vou dizer cor de fundo. Taxa de cor de fundo. É isso mesmo. Se eu definir esse arquivo e mover a escola vertical para cima, agora você pode ver nossa página Y, embora o valor seja zero, também nossa página, precisamos alterar o nome da página Xosite também nossa página, precisamos alterar o nome da página Além disso, o valor oposto da nossa página X ainda é zero. Agora, se eu mover um pouco nossa rolagem horizontal, aqui, você pode ver o valor. Agora você pode ver que o valor oposto da nossa página X é 174 pixels e nossa página Yosete VW ainda é zero Então, se eu mover essa barra de rolagem, você pode ver o resultado no meu console. Então é assim que podemos extrair esse valor de rolagem usando esses métodos. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre dois novos métodos, Oset top e Osete leg Então, obrigado por assistir a este vídeo. Fique ligado. 37. JavaScript offsetTop e offsetLeft Tutorial: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao JavaScript. E neste tutorial, aprenderemos sobre dois novos métodos, Oset top e o oposto Suponha que este seja o nosso navegador e, dentro desse navegador , digitamos algum texto e também pegamos um elemento profundo naquele local. E agora eu quero extrair a distância desse elemento profundo do lado superior. Quero extrair a distância do topo também do lado esquerdo para extrair os valores. O JavaScript introduziu dois métodos. Em frente ao topo e opsete. Então, vamos entrar no editor de código do Visual Studio e ver como podemos extrair esses valores. Então, como de costume, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando IPSeretension, e já crio uma estimativa de nome de documento, e já crio uma estimativa nome de documento E, como você pode ver, em nossa tag corporal, temos uma caixa de classes profunda. E nessa profundidade, temos um parágrafo, um parágrafo de Tumi, e eu já estilizo essas caixas profundas Aqui dissemos plano de fundo, também definido e, em seguida, suba 300 pixels. Além disso, temos uma fronteira. E agora eu quero medir o valor da parte superior e da esquerda. Para isso, precisamos entrar na tag do script. Então, vou digitar o script. E dentro da tag do script, vou usar Console, Console, dot, log. Dentro das rodadas, vou imprimir uma caixa de declaração em frente ao topo Caixa oposta à parte superior, dois pontos e, em seguida, vou usar o lado da configuração E agora só para atingir esta caixa. Para direcionar essa caixa, vou criar uma variável dentro da tag do script. Então, nossa variável é where BOX box, box igual a, e eu vou usar o método seletor de consulta de pontos do documento para direcionar essa caixa, document dot querySelector Então, dentro das prensas redondas, dentro dos códigos duplos, precisamos passar o ID da caixa Desculpe, o nome da classe da caixa, que é dot BOX, e o semícone também está nesta linha E agora vou usar essa caixa de nome de variável. Box Dot, e nossos métodos são opostos a T. E ponto e vírgula Da mesma forma, se quisermos extrair o valor do laboratório, precisamos obter essa linha. E eu vou substituir essa declaração. Por que Oset It? Além disso, precisamos buscar o nome do método. Por que compensar isso? E antes de definir esse arquivo, vamos abrir o console, inspecionar o console. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver a caixa em frente aos oito primeiros e a caixa em frente ao laboratório oito. Agora, o quociente é branco escrito oito e oito ambas as direções, porque essa é a margem padrão da etiqueta corporal É por isso que às vezes precisamos usar a margem zero de todas as direções em nossa etiqueta corporal. E você também pode notar a lacuna de oito pixels do lado superior e do lado posterior. Mas se eu usar a propriedade de margem, primeiro, vou usar a propriedade de margem em nossa tag body. Então, aqui eu quero digitar corpo e dentro da margem de Cariss. Margem Velo zero. Se eu definir esse arquivo, agora você pode ver no meu console que é a caixa de impressão oposta ao Valor zero, e também oposta à lib Vo ainda é zero E se eu adicionar margem em psit, deixe-me mostrar a margem, P 100 pixels E ao definir esse arquivo, você pode ver o resultado. Agora, nosso valor de laboratório oposto à caixa é 100 porque temos uma margem de 100 pixels na posição do laboratório Além disso, se eu adicionar margem superior a 50 pixels e definir esse arquivo, você poderá ver o valor. Agora você pode ver no meu console valor máximo da caixa oposta é 50 Mas o que? Se adicionarmos um parágrafo antes dessa caixa, deixe-me mostrar a você Então, vou adicionar um parágrafo do Dai. Lorraine, e eu vou adicionar 200 parágrafos de Wardop. Depois de definir esse arquivo, você pode ver o valor. Agora você pode ver que nosso valor máximo oposto é 354 pixels. A distância entre a parte superior do navegador e Dave é de 354 pixels. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre dois outros métodos, scroll top e scroll lip value. Então, obrigado por assistir a este vídeo. Fique ligado. 38. JavaScript scrollTop e scrollLeft Tutorial: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao Javascript. E neste tutorial, aprenderemos sobre dois novos métodos rolar para cima e rolar para a esquerda. Suponha que tenhamos um elemento profundo e digamos altura e largura desse elemento profundo. E como você pode ver, temos um total duas barras de rolagem neste elemento profundo, vertical e horizontal Essa barra de rolagem aparecerá quando os dados transbordarem desse contêiner Se você notar, você pode ver em nossa barra de rolagem vertical que eu já rolo um pouco. E agora eu quero extrair a distância, quanto rolamos em nossas profundezas. Da mesma forma, quero extrair o valor da rolagem horizontal. Portanto, precisamos extrair o rolagem horizontal e o valor da rolagem vertical. Para extraí-los, temos dois métodos. Role para cima e role até tarde. Então, sem perder seu tempo, vamos começar a prática e ver como podemos extrair esse valor Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo e já crio um documento HTML, chamado HTML de ponto de índice E nesta página HTML, como você pode ver, temos um elemento profundo com uma classe chamada box, e eu já estilizei essa caixa profunda Aqui você disse, fundo, largura elevada e borda. Agora você percebe, como você pode ver, não há nenhuma palavra de rolagem nesse elemento profundo. Então, vou adicionar um texto fictício dentro desta caixa. Aqui eu vou adicionar um parágrafo de 500 palavras. Lorim 500 W. E eu vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele transborda do nosso contêiner Para resolver esse problema, vou usar a propriedade overflow Aqui, vou usar overflow e vou usar valor automático Se eu definir esse arquivo, agora você pode ver a barra de rolagem vertical. E agora eu quero extrair o valor de rolagem desse elemento profundo. Suponha que eu role para conter um pouco da direção YXS e agora eu queira extrair o valor Scrollto desse elemento profundo Para extrair o valor, precisamos entrar na tag do script. Então, aqui, vou digitar o script. Dentro dessa tag de script, primeiro, vou direcionar essa caixa usando o nome da classe. Então, para digitar o seletor de consulta de pontos do documento. Dentro das prensas redondas, dentro dos códigos duplos, vou passar a caixa de pontos Então eu vou usar um método. Vou usar Adicionar ouvinte uniforme, adicionar ouvinte de eventos e quero usar o método de rolagem Rolar. Depois de direcionar essa caixa usando o nome da classe , eu uso um evento, evento de rolagem. E quando os usuários rolam os dados, eu quero chamar uma função anônima. Então, pracma, eu vou chamar uma função. Função. Vestidos redondos, depois dentro do Carcis. Em seguida, dentro da função, quero imprimir o valor da rolagem no meu console Ele digita console dot log, console dot, Log I e arredonda I nas portas duplas Primeiro, vou imprimir uma declaração que está rolando para cima. Saia da concatenação com. E aqui precisamos passar a caixa alvo. Para isso, vou criar uma variável que, e o nome da nossa variável, é target. Alvo igual a, e eu vou copiar essa mesma linha. Essa caixa. Em seguida, vou substituir esse seletor de consulta de pontos do documento variável de destino Além disso, vou usar a variável de destino na minha seleção de console. Alvo. Com isso, precisamos chamar nosso método target dot scroll Dog Então, se eu definir esse arquivo, ligar meu console e rolar esse elemento profundo, um pouco, você poderá ver o valor, valor de rolagem. Mas o problema é que você pode ver muitos valores. É por isso que vou usar a função clear, Console dot clean. Essa função eliminará valores desnecessários. Se eu definir esse arquivo novamente e rolar um pouco esse elemento profundo, agora você poderá ver a rolagem até o valor. É muito semelhante aos métodos Y Oset e X opostos. Aplicamos PageY Oset na janela do nosso navegador, mas aplicamos scroll top em nosso elemento profundo. Essa é a diferença. Agora, vamos falar sobre o outro método, que é o scroll led. Então, nesse elemento profundo, vou criar outro elemento profundo. Caixa DevTT também. Além disso, vou estilizar esta caixa dois elementos profundos em nossa seção de estilo. Então, digite que a caixa dois está nas calibragens. Vou usar plano de fundo, plano de fundo, ler. Então eu vou usar id. Com 700 pixels e altura 80 pixels. É isso mesmo. Vou configurar esse arquivo. Agora você pode ver dentro desse elemento profundo pai, temos outro elemento profundo e definimos altura e largura de 700 pixels e 80 pixels. É por isso que ele transborda horizontalmente desse contêiner e você pode ver E agora precisamos extrair o valor de rolagem para a esquerda dessa barra de rolagem. Para isso, primeiro, vou duplicar essa linha e vou mudar a rolagem para cima para rolar para a esquerda. Além disso, precisamos alterar o nome do método, rolá-lo Se eu definir esse arquivo e rolar um pouco o scrorebr horizontal, você poderá ver o valor da rolagem para a esquerda Agora imprime 48. E do topo da rolagem, temos valor zero. Se eu rolar um pouco a barra de rolagem vertical, agora você pode ver a rolagem de 148 pixels no topo e rolar apenas 48 pixels Então é assim que podemos extrair o lábio em espiral e o ScrotoValo Espero que agora esteja claro para você. Então, isso é tudo para essa situação. Obrigado por assistir a este vídeo. Fique ligado. 39. Tutorial de JavaScript scrollWidth e scrollHeight: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao JavaScript e, neste tutorial, aprenderemos dois novos métodos de Javascript, largura de rolagem e altura de rolagem. Como você pode ver, temos um elemento profundo e, dentro desse elemento profundo, temos alguns dados fictícios E como usamos a propriedade overflow nesse elemento profundo para ocultar o conteúdo extra É por isso que ele tinha uma rolagem vertical e uma barra de rolagem horizontal E agora eu quero extrair a altura desse conteúdo, incluindo os dados de estouro Suponha que tenhamos essa quantidade de dados nesse contêiner. Portanto, precisamos extrair o tamanho exato desses dados. Para isso, o JavaScript introduziu um novo método, que é a altura de rolagem. Da mesma forma, se você quiser extrair a largura horizontal dos dados, precisará usar o método de largura de rolagem. Então, vamos começar a prática e ver como podemos usar esses métodos. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server, e já crio um documento HTML chamado index to TML Se você perceber que pode ver em nossa etiqueta corporal, temos uma etiqueta profunda e ela está na caixa de identificação. Além disso, eu estilizo essa etiqueta profunda. Dissemos porco de cor de fundo com 300 pixels e altura 300 pixels Portanto, você pode ver que não há barra de rolagem neste elemento desenvolvimento porque não temos conteúdo excedente neste desenvolvimento. Basicamente, é um MTD. E antes de adicionar o conteúdo na caixa, mostrarei como podemos usar esses métodos. Então, dentro da tag body, vou digitar script tag, script. E dentro da tag do script, primeiro, vou direcionar essa caixa usando seu ID. Então, vou criar uma variável que o nome da nossa variável é target. Meta igual a DocumentT Copy select. Em vez disso, vou passar à redonda o nome de identificação, caixa de hashtag Em seguida, defina esta linha. E agora vou criar duas outras variáveis, uma para largura de rolagem e outra para altura de rolagem. Então, a primeira variável, vou usá-la e o nome da nossa variável é scroll with. Sublinhado. Igual ao nosso ponto-alvo, o nome do nosso método rola com. Semico esta linha. Então vou implorar essa linha e substituí-la por altura Além disso, digite martelo, role para dentro. É isso mesmo. E agora vou imprimir as duas variáveis no meu console. Para isso, vou digitar, consolar, pontuar, registrar dentro das rodadas dentro do núcleo duplo Primeiro, vou imprimir o pergaminho com. Scroll wed. Então, sinal de concatenação, vou chamar a variável, e nossa variável é E então terminamos essa linha, então eu vou pegar essa linha, e desta vez, eu quero imprimir a altura da rolagem. Então, vou substituir pela altura. Também aqui vou passar essa variável, rolar para cima. E agora eu vou configurar esse arquivo. Em seguida, vou entrar no navegador , clicar com o botão direito nele e inspecionar, e vou ativar o Console. Assim, você pode ver, por padrão, que ele imprime a altura e a largura exatas desse contêiner. Largura de rolagem 300 pixels e altura de rolagem, 300 pixels, porque em nossa seção de estilo, aqui atribuímos 300 pixels e altura 300 pixels. É por isso que ele retorna esse valor. Mas desta vez, vou incluir alguns dados fictícios em nossa tag profunda Então, aqui, vou digitar Lorin, vou adicionar um total de 600 W e vou definir esse arquivo Depois de definir esse arquivo, como você pode ver, por padrão, ele transborda desse contêiner Portanto, precisamos usar a propriedade overflow em nossa seção de estilo. Deixe-me te mostrar como. Então, aqui nós digitamos overflow. Mas antes de usar a propriedade overflow, como você pode ver, ainda assim ela retorna, altura de rolagem é 926 pixels porque essa é a altura do conteúdo dentro desse contêiner e nossa largura ainda é 300 E agora vou usar o valor automático de overflow. Automático. E se eu definir esse arquivo, você poderá ver o resultado. Depois de definir esse arquivo, agora você pode ver que a altura da área de rolagem é 2034 e rolar com 283 E se eu adicionar um pouco de preenchimento nesta caixa, deixe-me mostrar para você. Preenchendo de toda essa direção, quero adicionar um preenchimento de 20 pixels Depois desse preenchimento de 20 pixels, como você pode ver, isso afeta nosso resultado Agora role com esses 323 e a altura da rolagem é 274. E agora precisamos da barra de rolagem horizontal. Para isso, vou criar outro elemento profundo dentro desse elemento profundo, algum tipo de caixa de pontos profunda dois. E eu vou estilizar esse elemento de banco de dados. Então, digite a caixa de pontos dois, na resistência de Cali, primeiro vou usar com a propriedade com 400 pixels Altura 100 pixels. Além disso, vou adicionar a cor de fundo. Taxa de cor de fundo. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver nosso pergaminho com o valor se tornar 440. Além disso, você pode ver a barra de rolagem horizontal na posição inferior. Então, é assim que, usando esse método, podemos extrair o valor da área de rolagem. Podemos extrair o valor da altura da rolagem. Como podemos extrair, role com Value. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 40. JavaScript offsetWidth e offsetHeight Tutorial: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao Javascript. E neste tutorial, aprenderemos sobre duas novas propriedades relacionadas ao Javascript, que são largura e altura opostas. Neste exemplo, você pode ver um elemento profundo. E nesse elemento profundo, dizemos fronteira. Além disso, temos texto e preenchimento nesta caixa e uma rolagem vertical r. E agora eu quero obter a altura desse elemento profundo Quero dizer que quero extrair o comprimento desse elemento profundo desse ponto até esse ponto. Para extrair esse valor, Java Strip introduz uma nova propriedade que é a altura oposta. Da mesma forma, se quisermos extrair a largura desse elemento, nesse caso, precisamos usar a propriedade Osetewidth Se você notar, você pode ver temos uma borda de dez pixels, preenchimento, também temos área de conteúdo e uma barra de rolagem Comece com altura, caso contrário, obsete, retornará o total com largura de Oset e a altura de Osete retornam a largura e a altura de um elemento em pixels, incluindo preenchimento, borda e barra de rolagem Se tivermos uma barra de rolagem horizontal na parte inferior, ela aumentará nossa altura. Portanto, essa propriedade fornecerá altura total , incluindo a borda. Eu não incluo a área da margem. Então, vamos começar a prática e ver como essa propriedade vai nos ajudar. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e já criei um nome de documento estável no Exotetable nome de documento estável no Exotetable Então, se você notar em nossa tag body, temos uma tag profunda com a caixa de nome da classe, e eu estilizo essa caixa Dev em nossa seção de estilo. Aqui dissemos, então alturamos 300 pixels e definimos uma cor de fundo laranja. E agora vou usar a propriedade JavaScript de largura oposta e altura oposta. Então, aqui eu vou usar o script. E dentro da tag do script, primeiro, vou direcionar essa caixa usando o nome da classe. Então, vou criar uma variável onde, e o nome da nossa variável é target. Alvo igual ao seletor de consulta Documen dot dentro das redondas dentro dos códigos de cavilha, precisamos passar o nome da classe dot BOX box e ponto e vírgula E agora vou criar duas outras variáveis para a erva daninha oposta e a altura oposta, algum tipo, e o nome da nossa variável é erva daninha W é igual ao ponto-alvo oposto à erva daninha. Semicron nesta linha. Lá, vou duplicar essa linha e substituí-la pela altura E aqui vou digitar o ponto-alvo fora do local. E agora eu quero imprimir esse valor no meu console. Então, vou digitar, ponto do console, registrar dentro das resinas redondas Dentro do cachorro, vou digitar Osete com concatenação com roda e ponto e vírgula E da mesma forma, quero imprimir na altura oposta. Então, duplique essa linha e ela digite na altura oposta. Além disso, vou substituir por altura. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu ligar meu console, você poderá ver o resultado. oposto de W é de 300 pixels e as alturas de deslocamento, e a altura oposta é de 300 pixels porque Hey atribui a mesma quantidade de altura e peso a esse contêiner. Mas o que? Se eu adicionar algum som de borda ao tipo, propriedade de borda. E eu quero adicionar uma borda sólida de dez pixels. E a cor da nossa borda é vermelha. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora, nossa largura oposta se torna 320 pixels e a altura oposta se torna Além disso, se eu quiser adicionar preenchimento, preenchimento de subtipo de cada direção, quero adicionar preenchimento de 50 pixels Se eu definir esse arquivo, você poderá ver o resultado. Agora, cada uma delas está no preenchimento de 50 Weixel, também na borda de dez pixels e a largura real aumentada , e a largura real aumentada Usando essas propriedades, podemos obter altura total e a largura total de um elemento Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no próximo tutorial 41. Cliente JavaScriptWidth e Tutorial de altura: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao Java Sweet. E neste tutorial, vamos aprender sobre duas novas propriedades: altura do cliente e cliente W. Então, como você pode ver, temos um desenvolvimento e, nesse elemento profundo, temos borda, conteúdo, texto e preenchimento Além disso, temos uma barra de rolagem. E agora eu quero extrair a altura interna desse desenvolvimento. Não quero incluir a altura da borda nessa medida. Eu quero apenas extrair a altura interna. Da mesma forma, quero extrair a largura interna, não esse scrollbd, e não quero adicionar essa barra de Para resolver esse problema, o JavaScript introduziu duas novas propriedades: largura e altura do cliente Já aprendemos sobre esse tipo de propriedade em nosso tutorial anterior, Largura de Oset e altura oposta, e a diferença é Osetew e altura oposta fornece a largura total desse elemento, incluindo borda e barra de incluindo borda Mas para extrair o comprimento interno desse elemento, precisamos usar a propriedade de altura e largura do cliente. Eles retornam a largura e a altura de um elemento em pixels, incluindo o preenchimento, mas não a borda, a barra de rolagem Então, sem perder seu tempo, vamos começar a prática e ver como podemos usar essa propriedade Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e abro meu documento de estabelecimento anterior Em nosso documento de estabelecimento anterior, aprenderemos sobre a propriedade da largura oposta e a propriedade da altura do local E neste tutorial, vamos extrair a largura e a altura do cliente. Então, como você pode ver nesta caixa D, temos um preenchimento de 50 pixels Além disso, temos uma borda de dez pixels e também temos 300 pixels de largura e 300 pixels de altura. Então, primeiro, vou mudar o nome da propriedade. Vou substituir a maconha Opsete pela maconha do cliente. Cliente nós. Além disso, vou substituir o Opsethd pela altura do cliente Altura do cliente. Antes de definir esse arquivo, como você pode ver, agora o Oste atual é 420 pixels e a altura do Osete também é Mas, como eu disse, se você usar essas propriedades e definir este arquivo, agora client we e client hide se tornarão menores que esse valor porque não incluirão a área da borda. Então, se eu definir esse arquivo, como você pode ver, agora ele se tornará 400 por 400 porque essa propriedade não contará a área da borda. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Espero que agora esteja claro para você. Qual é o uso dessa propriedade? Obrigada 42. JavaScript ClientX e Tutorial do ClientY: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao script Java. E neste tutorial, aprenderemos sobre duas novas propriedades de JavaScript, client takes e client Y. Como você pode ver neste exemplo, temos uma janela de navegador e você pode ver um mouse Carsa nessa E agora eu quero extrair as coordenadas do mouse ao mover o mouse, caso contrário, clique em qualquer lugar na janela. Eu quero obter a posição exata desse mouse, então preciso extrair o X xs VLU e também o YxSzef que o JavaScript introduziu YxSzef que o JavaScript introduziu então preciso extrair o X xs VLU e também o YxSzef que o JavaScript introduziu na propriedade de evento do mouse. Que é o cliente pega e o cliente Y. E lembre-se, ele funciona somente dentro da área da janela de visualização deste navegador Essa é a área de visualização deste navegador. Não está relacionado à resolução da tela do monitor. Está relacionado à janela do navegador. E, como eu disse, essas propriedades estão relacionadas ao evento do mouse, então funcionará apenas com os eventos do mouse. E todos esses são eventos do mouse com os quais já estamos familiarizados clicar duas vezes no menu de texto do conteúdo, mover o mouse, etc Portanto, quando usamos esses eventos, podemos extrair o YXS e o excesso de vídeo, ou seja, clientes e **** visualização de DI Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e já criei um documento ETL chamado index Por enquanto, minha página EST está completamente preta. No início, quero extrair as coordenadas do mouse quando meus carros estão nesta área de bagagens. Para isso, precisamos voltar à tag body e à tag de script do tipo Hemo E agora precisamos adicionar um evento em nosso documento usando o método add even listener Então, dentro dos códigos duplos, vou digitar documento, ponto, adicionar até mesmo ouvinte Em seguida, dentro das teclas redondas, quero adicionar o evento de movimentação do mouse porque, ao abrir o mouse, quero extrair o valor ao mover o mouse, digite o movimento do mouse e o ponto e vírgula dois nesta linha E como você sabe, com isso, você também precisa chamar uma função anônima. Então, vou criar uma função após a função de vírgula e, dentro do Cariss, vou usar essas propriedades, cliente para mim e O que isso você consideraria variável? Tipo de soma onde, e o nome da nossa variável é X. X igual a também em nossa função, precisamos passar uma variável Então, eu vou passar no evento. Além disso, você pode usar a abreviatura Então eu vou digitar E. Então aqui eu digito E dot client is. Então vamos acabar com essa linha? E da mesma forma, vamos extrair o valor de xS. Então, vou duplicar essa linha e substituir X por Y. Além disso, precisamos substituir cliente pelo cliente Y. E lembre-se, X e Y devem ser Caso contrário, não funcionará. E agora vou imprimir os valores XX e YXS no meu console Então, vou digitar Console. Registro de pontos dentro da redondeza dentro do código duplicado, vou digitar flints colon, concatenation W, X vou digitar flints colon, concatenation W, X value e semignto nesta linha. Vou duplicar essa linha e, desta vez, vou imprimir o valor Y do cliente, cliente Y, cliente Y, concatenação com a variável concatenação com o cliente Y, concatenação com a variável Y. E antes de configurar esse arquivo, vou ligar meu console, o console EPAC Além disso, vou imprimir Console com pontos claros. Se não usarmos a função clear , ela imprimirá muitos valores. Então, o método Hemotype Console dot Tear. Semicon nesta linha. Se eu definir esse arquivo e meus carros na área da minha janela de visualização, você poderá ver o valor Agora você pode ver que nosso ponto XX é 168 e o ponto xs é 352. Se eu movê-lo para cima, agora você pode vê-lo reduzir o ponto YxS E se eu movê-lo do canto superior esquerdo para o canto, agora você pode ver que o valor de XXS é 13 e o valor de x é nove Então é assim que podemos obter para Xian um valor YX do nosso cursor Então esse é o uso dessas propriedades, ClientX e cliente Y. Além disso, você pode segmentar em Neste exemplo, não usamos nenhum dispositivo. Aqui, temos como alvo o navegador antigo, a janela antiga do navegador. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 43. JavaScript pageX e tutorial de pageY: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao JavaScript e, neste tutorial, aprenderemos sobre duas novas propriedades, pageX e pageY Então, como você pode ver neste exemplo, abrimos uma janela do navegador e, nesse navegador, temos muito texto. Além disso, você pode notar há uma barra de rolagem no lado direito O que significa que há muito texto neste navegador. Suponha que temos essa quantidade de texto neste navegador. Além disso, mostro os dados de estouro usando fundo cinza E depois de passear um pouco nesta página, coloquei meu mouse nela e quero extrair a posição xx desse mouse, também a posição yxsPosition Para extrair o valor, o JavaScript fornece um total de duas propriedades. PageX e PageY. Em nosso tutorial anterior, já aprendemos sobre clientes e propriedades de brinquedos para clientes. Era muito parecido com o PageX e o PageY, mas há uma diferença entre clientes e brinquedo do cliente e PageX e PageY Só funciona dentro da área de madeira. Mas nas propriedades pageX e pageY, se eu rolar a barra de rolagem vertical, caso contrário, a barra de rolagem horizontal, ela mudará o ponto do cursor E, como eu disse, essas propriedades funcionam apenas com eventos de mouse. Então, precisamos usar o evento mouse para usar essas propriedades. Então, todos esses são eventos do mouse ao clicar em Clique duas vezes no Menu de Contexto, mover o mouse, ao clicar no MouseOver, etc Então, vamos começar a prática e ver como podemos usá-la. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e já crio um documento HTML chamado index dot TML Por enquanto, nossa etiqueta corporal está vazia. Então, dentro dessa tag body, primeiro, vou usar a tag Script. E dentro dessa tag de script, eu quero extrair meu ponto do cursor. Quando abro meu cursor na área do meu navegador, quero extrair a localização do cursor, Xxs e YxS Para isso, precisamos usar o método de documento. Documento, e precisamos usar um evento. E para usar o evento, vou digitar no ouvinte do evento São os endereços redondos, estão nos códigos de subsídio, caso contrário, códigos únicos Aqui, vou passar o nome do evento, que é o modo mouse. Como você pode ver, precisamos fechar a cotação. Precisamos movê-lo dentro das aspas simples, caso contrário, o código total. Em seguida, precisamos chamar uma função. Uma função anônima. Então, a função de tipo está na carruagem. É uma função anônima. Então, dentro da função, precisamos considerar uma variável como uma Eva. Então, para et, eu vou passar P, é isso. E aqui precisamos pegar o total de duas variáveis para armazenar os dois V em que nossa primeira variável n é X, X igual a E ponto Página X. Então eu começo essa linha e, desta vez, vou digitar outra variável pageY página y igual ao ponto E, página Y. E agora vou imprimir isso para valor na minha Então eu vou digitar Console, dot, log dentro dos vestidos redondos, dentro dos códigos duplos. Primeiro, vou digitar página x valor, página x valor. vírgula. Em seguida, vou usar a concatenação seno e nosso nome de variável ponto e vírgula nesta linha e nosso nome de variável ponto e vírgula nesta Então eu duplico essa linha e vou substituir o pH h por HY Além disso, você precisa substituir o nome da variável. Y. Antes de definir esse arquivo, aqui precisamos digitar console dot Tear method, Console dot par Esse método eliminará o passeio desnecessário que é impresso em nosso console. Antes de configurar esse arquivo, vou ligar o console, inspecionar o console. E agora eu vou configurar esse arquivo. Depois de definir esse arquivo, se I Her my Carter nesta janela, aqui você pode ver o valor Você pode ver que o valor da página H é 254 e o valor da página Y é 357. Isso é bem parecido com nossos tutoriais anteriores. Já estamos familiarizados com isso. Você pode achar que é muito semelhante ao cliente ts e ao cliente Y, mas há uma diferença. Então, vou criar outra variável. Vou duplicar esta seção e, desta vez, vou para t Primeiro, vou mudar o nome da variável, A, vou digitar E dot Clieni Então eu vou trocar Y por B, e desta vez vou digitar o cliente Y. E também vou imprimir clientis e ClenyVu Então, vou duplicar essas duas linhas. E vou substituir a página pelo cliente. Clientes V, também cliente IV. E agora vou duplicar toda essa seção e vou substituir Pasegs O cliente assume valores. Além disso, precisamos substituir os valores da variável, A e ClientY, e precisamos substituir Y por B. Depois de definir esse arquivo, se eu passar meus carros nessa janela, você poderá ver o resultado Você pode ver que o cliente assume valor e o valor da página ainda é pecado. Além disso, o valor do PageY e o valor do brinquedo do cliente ainda pecam. Mas o que? Se eu adicionar algum parágrafo. Então, dentro da tag body, vou usar o parágrafo da tag P. E então eu vou amarrar o LM, e vou adicionar 1.000 palavras. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver no meu documento, há uma palavra de rolagem no lado direito. Depois de definir esse arquivo, se eu passar por cima dos meus carros em qualquer ponto, suponha que neste ponto, você pode ver que o valor de pageY é 275 e o valor y do cliente é 275. Mas o que? Se eu rolar minha página para baixo, o que acontecerá? Então, vou rolar minha página para baixo. Depois de rolar para baixo nesta página, como você pode ver, agora o valor da página Y se torna 1016, mas o valor do brinquedo do cliente ainda permanece o mesmo 275 Essa é a diferença entre essas duas propriedades, brinquedo do cliente e a clientela Propriedade do brinquedo do cliente, caso contrário, a propriedade do cliente funciona na área da janela, mas a propriedade da página I, caso contrário, a propriedade da página x funciona na documentaria Essa é a diferença básica entre essas duas propriedades. Basicamente, ele retornou a altura do Carsa acordo com o tamanho do conteúdo, mas retornou a altura do carsar acordo com o tamanho da janela do navegador Ele medirá a distância da parte superior da janela, mas medirá a distância da posição superior do conteúdo. Essa é a principal diferença. E da mesma forma, funcionará na posição horizontal. Então, se eu adicionar um elemento profundo, smotype DV, e vou atribuir N ID, ID igual a box E se eu estilizar esse elemento DV , vamos voltar à seção de estilo No título, vou digitar estilo. É essa tag de estilo? Primeiro, vou segmentar essa caixa usando seu nome de ID como tag, box. Então eu disse que a liv diz que, a princípio, vou atribuir com 900 pixels Altura, altura, 100 pixels. E também vou dizer que é uma cor de fundo. Fundo vermelho. Se eu definir esse arquivo, aqui você pode ver, agora ele fornece uma barra de rolagem horizontal E se eu passar o cursor nessa posição, você pode ver, agora nosso valor é 86. Além disso, o valor do nosso cliente é 86. Mas o que? Se eu rolar meu navegador na direção horizontal e passar o cursor nessa posição, agora você poderá ver a diferença básica Agora, o valor da página X é 273 e o valor clientex é 97. Porque, como eu disse , ClientExppriety mediu a distância da borda do navegador, mas page x propriety mediu a distância da posição inicial do conteúdo É por isso que a impressão é diferente de. Espero que agora esse conceito esteja claro para você. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 44. JavaScript screenX e tutorial de screenY: Olá, pessoal. É bom ver você. Mais uma vez, estou de volta com um novo tutorial relacionado ao Java sweep E neste tutorial, aprenderemos sobre duas novas propriedades relacionadas ao Java Sweep Tela X e tela Y. Como você pode ver neste exemplo, temos uma tela de monitor e, nessa tela, abrimos um navegador E neste navegador, você pode ver um ponteiro do cursor. E agora eu quero extrair a coordenada do cursor do mouse. Eu quero extrair o ponto XX e o ponto YXS deste mouse Karsel Mas desta vez vamos medir a distância da área da borda da tela, não a idade do navegador. Para isso, o Java Strip introduziu duas propriedades ScreenX e tela Y. Em nosso tutorial anterior, já aprendemos sobre propriedades semelhantes, mas essas propriedades medem a distância do navegador H. Já aprendemos sobre clientes e a propriedade do cliente Y, mas a diferença é que os clientes e a propriedade do cliente Y funcionam na área do visor Ele medirá a distância da borda do visor Funciona apenas na área de visualização do navegador, mas as propriedades screenx e screen Y funcionam na resolução do monitor Funciona na resolução exata da tela. E, como você sabe, essas propriedades estão relacionadas aos eventos do mouse. Para isso, precisamos usar esses eventos, e já estamos familiarizados com isso. Então, vamos começar a prática e ver como podemos extrair o valor da resolução da tela. Como podemos extrair posição do cursor de acordo com a área da borda da tela. Então, vamos entrar no editor de código do Visual Studio. Então, como você pode ver, lado a lado, abri meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo e abri meu documento HTML anterior chamado index dot html Em nosso tutorial anterior, aprenderemos sobre as propriedades do PageX e da página WI Além disso, aprendemos sobre os carrapatos do cliente e a propriedade do cliente E agora eu quero extrair a distância do meu cursor de acordo com o tamanho da tela. Quero dizer que quero extrair o valor XX do meu cursor de acordo com esse ponto, esse tamanho de tela. Do lado do lábio, quero medir o ponto do cursor. Então, primeiro, vou remover as linhas desnecessárias e vou substituir a propriedade pagEx pela tela de tela X. Além disso, vou remover essa linha e o valor x da tela de Hemótipo é e você imprimirá o valor no Então, antes de configurar esse arquivo, vou abrir meu console e quero configurar esse arquivo. Depois de configurar esse arquivo, quando eu abro meus carros estão na minha tela, aqui, você pode ver o resultado. Agora você pode ver que o valor do screenX é 1357. Tem 1357 pixels. E se eu movê-lo no canto direito, no lado direito, agora nossa tela ex Vo é 1918 porque nossa resolução de tela é 1920 5.080, e ela imprime a tela Wow E se eu remover minha casa fora do navegador, agora ela não vai funcionar. Funciona somente na área da janela do navegador. Ele mediu a distância quando eu movo meu cursor dentro da área da janela de visualização Da mesma forma, podemos extrair YxS W, precisamos duplicar essa linha e substituir a variável N X por Y, e aqui precisamos usar a propriedade da tela Y. Em seguida, vou duplicar essa linha no meu console e vou imprimir a tela Y. Tela Y. E vou configurar esse arquivo. Depois de definir esse arquivo, se eu abrir meus carros nessa posição, aqui você pode ver o valor da tela Y na parte superior. Aqui você pode ver que o valor YX é 651 pixels. Ele medirá a distância da resolução exata da tela. Espero que agora esteja claro para você qual é o uso dessas propriedades. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 45. Tutorial de JavaScript offsetX e offsetY: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao script Java. E neste tutorial, aprenderemos sobre duas novas propriedades de JavaScript. Oset eggs e Oset Y. Como você pode ver neste exemplo, temos uma janela do navegador e, dentro dessa janela do navegador, criamos um elemento criamos E nesse elemento profundo, você pode ver o ponteiro do mouse E agora eu quero extrair as coordenadas do mouse. Mas desta vez, quero extrair a coordenada do mouse de acordo com a área profunda Precisamos extrair o valor acordo com a posição profunda, não com a janela do navegador e também com a resolução da tela. Para isso, o Javastrep introduziu duas novas propriedades: Oset eggs e Oset Y. Já aprendemos sobre propriedades similares em nosso duas novas propriedades: Oset eggs e Oset Y. Já aprendemos sobre propriedades similares em nosso tutorial anterior. O texto do cliente e o brinquedo do cliente também exibem x e tela y. Clienex e ClienyPbit fornecem o valor de acordo com o tamanho da janela do Quero dizer que ele medirá a distância do ponto de acesso do navegador, e screenx e screenyPbit fornecerão o valor da largura e altura da tela E já estamos familiarizados com isso. E, como você sabe, todas essas propriedades são relacionadas a eventos do mouse. Precisamos usar o evento mouse para usar essa propriedade. E já estamos familiarizados com esses eventos de mouse. Então, sem perder seu tempo, vamos começar a prática e ver como podemos extrair o valor de Xxs e YxS usando a propriedade Oset X e a propriedade Oset Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver e já criei um documento estável, chamado index dot Então, como você pode ver, em nossa tag body, temos uma tag profunda com a caixa de nome da classe. E em nossa seção de estilo, eu já estilizei esse elemento de caixa. Aqui dizemos com 500 pixels e altura 400 pixels. Além disso, eu disse borda e cor de fundo. Então, vamos entrar na tag do script. Script e, a princípio, vou criar uma variável em que o nome da nossa variável é target. Alvo igual a, eu quero atingir este pântano íngreme. Então, aqui, vou usar o método qui selectra. O ponto do documento é um seletor. Então, dentro das rodadas, dentro do curso duplo, caso contrário, curso único, vou digitar caixa de pontos Vamos selecionar esse elemento D usando seu nome de classe. Em seguida, ponto-e-vírgula, faça nesta linha. E agora vou adicionar um evento a essa variável de destino. Para isso, vou digitar o ponto alvo. Vou usar um método chamado add event listener, add event listener Então, dentro das prensas redondas, o nosso evento é o nome do mouse Coma, e aqui vou chamar a função novos. E nessa função, vou passar uma variável. Como forma abreviada, vou usar P. E agora vou criar duas variáveis, que armazenarão nossos xx zero e XS. Então, eu vou criar e nossa variável n é X. X igual a primeiro, eu quero obter o tipo xx zero Et oposto a X. Em seguida, semicon nesta linha Então eu vou duplicar essa linha, e desta vez, vou substituir X por Y. E desta vez, eu quero armazenar o valor Y X. Então, aqui estou do tipo Oset Y. E agora, depois de armazenar o valor, quero imprimir os dois valores no meu console Console, ponto, registro dentro das prensas redondas dentro do código único Primeiro, vou imprimir os valores de Osete H. Oset valora dois pontos, Cgation seno, e vou passar a variável X e e Então eu duplico essa linha e substituo X por Y. contrário de Y. Além disso, você precisa substituir o nome da variável Em seguida, semigon para finalizar esta linha. Antes de configurar esse arquivo, vou ligar meu console, inspecionar a seção Console Como você pode ver em nosso console, não há nada. Mas depois de definir esse arquivo, se eu passar o cursor sobre esse elemento profundo, aqui você pode ver o valor Opa, eu esqueci uma coisa. Precisamos limpar nossa seção de CSO. Caso contrário, ele imprimirá todos os valores de uma só vez. Então, aqui digite console dot Tear Method. Isso limpará nossas linhas desnecessárias. Após a etapa deste arquivo, se eu abrir meus carros neste elemento profundo, aqui, você pode ver o valor x oposto e o valor Y. O valor Oppste X é 230 e o valor Oppste Y é 219. Se eu mover minhas cartas no canto do laptop, para cima, minhas cartas estão no canto do laptop, como você pode ver, agora ele treinou Oset X dois e Osete Y também. Então é assim que essas propriedades funcionam em JavaScript. Espero que agora esteja claro para você qual é o uso dele. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial.