Projeto JavaScript para dummies: marque uma página

1. Apresentação: Este é o terceiro projeto da nossa série de JavaScript e o projeto é marcar uma página como Os objetivos de aprendizado deste projeto são que aprenderemos a criar, adicionar e excluir elementos de estimativa usando JavaScript, e também aprenderemos como você pode tornar nosso elemento de estimativa editável em JavaScript. Esses são os principais aprendizados que teremos neste projeto 2. Construindo uma página: Então, esse é o projeto que estamos construindo neste vídeo. Então, eu chamo esse projeto de marcar uma página como favorita. Então, o que isso realmente faz é bem simples. Na verdade, você pode adicionar seus favoritos a esse URL Então, se eu simplesmente for até lá e copiar a URL daqui e ir para o nosso projeto. E aqui, se eu clicar em adicionar marcador, ele adicionará esse URL como um marcador OK. E se eu tentar fazer a mesma coisa, mas sem o SGTPS, tudo bem, agora, se eu clicar em adicionar marcador, ele realmente nos avisará que sua entrada não é uma OK. Da mesma forma, se eu não adicionar nada a isso e clicar em adicionar marcador, ainda teremos um alerta ou precisaremos inserir um URL válido aqui Está bem? Da mesma forma, se eu adicionar o URL novamente aqui, posso excluí-lo diretamente daqui e também posso editá-lo aqui. E a parte interessante é que, para editar o URL, não preciso adicionar nenhum prompt aqui. Eu posso editar diretamente o URL a partir daqui. Então, digamos que se eu adicionar o Google aqui e clicar em Salvar, ele será adicionado diretamente. Agora você pode ver isso se eu clicar aqui, não podemos editar esta parte. Mas se eu clicar no botão de edição, agora essa parte é editável Tudo bem, agora eu clico em salvar novamente. E se eu adicionar os vários favoritos aqui, deixe-me adicionar o segundo link aqui E deixe-me adicionar o terceiro link também. Então, na verdade, estou usando a mesma URL agora, mas você também pode ir aqui com uma URL diferente aqui. Tudo bem. Então, se eu quiser excluir todos os favoritos juntos, o que posso fazer simplesmente clicar em excluir todos os favoritos aqui, e agora você não conseguirá ver nenhum marcador Está bem? Então é isso que vamos criar neste vídeo. OK. Então, primeiro de tudo, temos que saber que o que aprenderemos neste projeto, então, neste projeto, o conceito-chave que temos é que vamos aprender a criar o elemento ESTiml em JavaScript e também adicionar o elemento em outro elemento, excluindo o elemento ESTiml de outro elemento de outro elemento Além disso, aprenderemos como podemos tornar um elemento editável Está bem? Então, esses são os conceitos-chave que aprenderemos neste projeto. Então, agora, primeiro de tudo, o que precisamos fazer abrir meu código VS. Tudo bem. E agora eu tenho que redimensionar isso para a tela cheia. Tudo bem. E agora você pode ver aqui que temos o índice StimlFle e também temos nosso arquivo CSS de pontos de estilo E, como você sabe, assim como nossos projetos anteriores, trabalhamos apenas na parte JavaScript do projeto. Está bem? Então, já fizemos a parte de estimativa e também a parte CSS de pontos de estilo. Ok, agora temos que trabalhar apenas em nosso JavaScript. Ok, agora vou executar esse projeto primeiro. Clique em abrir com o servidor ativo. Tudo bem, então este é o projeto que temos agora em nosso lado estimado, e adicionamos CSE a isso, vai ficar exatamente assim Está bem? Então, como você pode ver aqui, em nossa parte de estimativa, temos uma entrada aqui, depois temos esses dois botões e, em seguida, teremos nossos favoritos Está bem? Então, no momento, não adicionamos nada. É por isso que não temos nada nos favoritos. Mas se eu voltar ao nosso código de estimativa, aqui, você poderá ver nossa estrutura estimada. Então, basicamente, estamos começando com o título aqui, e depois disso, temos nosso contêiner principal, e tudo está dentro desse elemento principal. Então, dentro desse elemento principal, temos duas coisas. O primeiro é o formulário no qual estamos recebendo nossa entrada e também esses botões que temos em marcar e excluir todos os favoritos E no elemento da seção, basicamente temos um título que é um marcador e, em seguida, temos a lista abaixo aqui Está bem? E usando o código JavaScript, adicionaremos os itens da lista à nossa lista abaixo. Está bem? Então, como você vai fazer isso? É bem simples. Então, essa é nossa estrutura estimada e, no final, estamos adicionando nosso arquivo JavaScript principal e também estamos tendo nosso estilo por CSs Então, agora vou simplesmente vincular nosso estilo de pontos CSS aqui em nosso projeto. Então, se eu salvar isso e voltar para o navegador, agora você poderá ver que é assim que nossa interface de usuário está, e está ótima. Então, vou excluir essa guia. Ok, então, neste momento, esse projeto não está funcionando. Está bem? Então, se eu tentar adicionar alguma coisa a isso e clicar em Adicionar marcador, você verá que não está fazendo nada Então, basicamente, a interface do nosso projeto está pronta, mas não está funcional. Então, vamos tornar isso funcional com a ajuda do JavaScript. Está bem? Então, vamos analisar novamente nossa documentação de como vamos fazer as coisas aqui. Portanto, na documentação de nossa página como favorita, a primeira coisa que temos é a finalidade desse código Então, basicamente, esse código está fazendo três coisas. Portanto, esse código está basicamente se comportando como um gerenciador de favoritos que permitiria ao usuário adicionar URS válidos ao marcador, e você também pode editar ou excluir os favoritos individuais e limpar toda a lista de favoritos limpar A segunda coisa é que precisamos ter a validação da entrada para garantir que estamos adicionando apenas o URS válido. E depois disso, temos nossa estrutura de estimativa que já fizemos, e então temos o estilo CSS que já foi feito da minha parte, e você não precisa se preocupar com isso porque vou adicionar isso aos recursos e, depois disso, temos nosso código JavaScript Então, no código JavaScript, eu dividi isso em cinco etapas diferentes. Portanto, o primeiro é bastante óbvio para selecionar elementos do ESTiml, assim como nossos projetos anteriores E depois disso, podemos ter a validação do URL. Além disso, podemos alterar o número da etapa. Podemos fazer a validação na última ou também podemos adicionar isso na segunda etapa. E então teremos uma função que adicionaria o marcador e, em seguida, teremos a função que excluiria todos os favoritos e, em seguida, adicionaremos ouvintes de eventos. Está bem? Portanto, temos que escrever nosso código com base nessas etapas. Está bem? Então, agora vou entrar no código VS. E aqui, o que temos que fazer é adicionar o arquivo Js principal. E dentro do arquivo dot js principal, vou adicionar as etapas aqui. O primeiro é, na verdade, selecionar elementos estimais aqui. E a segunda etapa é basicamente validar a URL. E o terceiro passo seria adicionar um marcador. E depois disso, excluiremos todos os favoritos e, por último, teremos o ouvinte de eventos Tudo bem. Perfeito. Portanto, a primeira coisa que precisamos fazer em nosso código é basicamente selecionar os elementos de estimativa que achamos que podemos exigir em nosso código JavaScript. Então, vou entrar em nosso arquivo de estimativa de índice. E a partir daqui, vou realmente procurar os elementos que eu precisaria no meu código JavaScript. A primeira coisa seria a entrada. Isso é óbvio, e então vamos ter esses dois botões, adicionar favoritos e excluir todos os favoritos, e então também precisaremos dessa lista não Então, esses são os quatro elementos que eu acho que vamos exigir. Também podemos exigir os outros elementos. Mas agora é só acessar esses quatro elementos aqui. Está bem? Então, a primeira coisa que vou abordar é o código JavaScript novamente. Na primeira, acessaremos nossa entrada. Tudo bem, então, como sabemos, para acessar o elemento, usaremos o método document, get element by ID e, em seguida, teremos que adicionar o ID desse elemento. Ok, então esse é o primeiro. E o segundo é, na verdade , o botão adicionar marcador. Então, vou chamá-lo de botão de adicionar favoritos e vamos copiar esse código daqui Tudo bem, então vamos também. Então, agora vamos adicionar o botão Excluir todos os favoritos Vamos copiar isso novamente. Acho que já foi copiado. Vamos apenas colocá-lo aqui. E então também precisamos da lista de favoritos. Perfeito. Então, eu vou pegar as identidades daqui. Então, para a entrada, temos essa entrada de marcador de ID. Vamos colocá-lo aqui e, para o nosso botão de oito favoritos, temos esse ID Vamos copiar isso daqui e colocá-lo aqui, e então temos o botão Excluir tudo em nosso código de estimativa. E vamos colocá-lo aqui no nosso botão. E no último, teremos uma lista de favoritos. Então, vamos simplesmente copiar isso daqui novamente e colocá-lo aqui. Perfeito. Tudo bem, agora só para validar, vou adicionar o log do console aqui para verificar se estou acessando todos os elementos ou não Ok, então vou anotar a entrada do marcador. Vamos apenas copiar isso. Então, esse será o botão Adicionar. Então, esse será o botão de exclusão. E também podemos ter uma lista de favoritos. Desculpe, marque a lista de favoritos aqui. OK. Então, agora vamos clicar em Salvar e agora temos que voltar ao nosso projeto no navegador. E vamos colocar isso no modo de tela cheia. E agora vamos clicar na inspeção aqui. E aqui temos que entrar no registro do console. E aqui você pode ver aqui que estamos acessando com sucesso todos os elementos que precisamos no momento. Ok, agora vamos voltar ao nosso código. OK. Então, vou fazer essa parte de validação na última parte. Agora, vou trabalhar para adicionar um marcador e excluir todos os favoritos e esses ouvintes de eventos E então, na última, eu adicionaria essa função de validação aqui. Está bem? Então, vou definir uma função aqui. Adicione um marcador. Perfeito. Da mesma forma, vamos adicionar a função para excluir todos os favoritos Tudo bem. E então também adicionaremos ouvintes de eventos aqui. Está bem? Portanto, para adicionar um marcador, ouvinte de eventos funcionaria no botão Adicionar marcador Vou clicar no botão Adicionar marca. Teremos que adicionar um ouvinte de eventos aqui. Vamos adicionar o evento aqui, que seria clique em evento. E então vamos adicionar nossa função. Isso seria adicionar um marcador aqui. Perfeito. Da mesma forma, adicionaremos o ouvinte do evento em nosso botão de exclusão Vamos adicionar um ouvinte de eventos. Estará no clique e, em seguida, adicionaremos nossa função aqui. Perfeito. Agora vamos apenas fazer o log do console aqui para verificar se nossos ouvintes de eventos estão funcionando ou não Então, isso adicionará um marcador, e eu simplesmente copiarei isso daqui Vou simplesmente adicionar isso aqui como exclusão de todos os favoritos Perfeito. Então, agora vamos voltar ao nosso projeto no navegador. E vou apenas reformular a página. E agora vamos clicar em adicionar marcador aqui. Então, agora, como você pode ver aqui nossa função de marcador de anúncios e também o ouvinte de eventos estão funcionando Da mesma forma, vou clicar em Excluir todos os favoritos, e você pode ver isso. Estamos tendo nosso registro do console Então, isso significa simplesmente que nossa função e ouvinte de eventos estão funcionando Ok, agora vamos voltar ao nosso código VS. E agora vamos adicionar as funcionalidades em nossa função de adicionar marcadores, ok Então, em nossa função de marcador Ed, a primeira coisa que precisamos fazer é obter a entrada que estamos tendo em nosso campo de entrada aqui Então, temos que obter a entrada daqui e, em seguida, temos que passar isso para nossa função. Então, a forma como vamos fazer isso é bem simples. Primeiro, vamos criar um lead aqui temos que criar a variável, que eu possa nomeá-la como URL ou também um valor de marcador ou algo parecido Tudo bem. Como sabemos , estamos recebendo a entrada em nosso elemento de entrada de favoritos Então, vamos anotar esse nome, a entrada do marcador, e também sabemos que, para obter o valor do elemento de entrada, precisamos anotar o valor do ponto Tudo bem. Agora, a primeira coisa que precisamos fazer é testar se nosso URL está funcionando perfeitamente ou não. Então, vamos voltar para um navegador aqui, vamos clicar em Ins e vamos usar o console novamente. Agora vou adicionar qualquer valor aqui já que não adicionamos nenhuma validação aqui, então podemos anotar qualquer coisa agora. Então, vamos clicar em Adicionar marcador, e você pode ver isso. Estamos obtendo nosso valor de entrada a partir daqui Perfeito. Tudo bem. Então, agora o que temos que fazer é criar o elemento. Então, se eu voltar ao meu arquivo de estimativa, e como você pode ver aqui, aqui temos apenas a lista não ordenada. OK. E o que temos que fazer aqui basicamente criar o item listado com a ajuda do JavaScript e, dentro desses itens listados, colocaremos nosso texto nele. Está bem? E também teremos nossos botões, botões exclusão e edição. Mas, no momento, vamos apenas adicionar o texto a ele. Está bem? A primeira coisa que precisamos fazer criar o elemento da lista. Então, como criamos o elemento da lista é bem simples. Vou criar uma variável aqui, que seria um marcador Elemento. Então, aqui vou usar um método. Então, primeiro de tudo, vou anotar documento porque, como sabemos , para acessar qualquer coisa na cúpula, temos que começar com o documento e, em seguida, escreverei o método de criação do elemento aqui , escreverei método de criação do elemento Perfeito. E eu quero que ele crie aqui o elemento da lista. Então, basicamente, esse método que temos criaria o elemento para nós. Está bem? E aqui, o que eu preciso fazer, vou precisar fazer mais uma coisa aqui. Também precisarei criar um elemento de parágrafo. Vou nomeá-lo como marcador, parágrafo e criaremos o elemento de forma semelhante Vamos simplesmente copiar essa parte e colocá-la aqui . Em vez da lista, teremos o parágrafo aqui. Como também precisamos de mais dois elementos, porque precisamos adicionar o botão de exclusão e o botão adicionado, então vamos adicionar esses botões aqui. Vou ter esse botão aqui, então vamos anotar o botão let delete. E, basicamente, vamos fazer a mesma coisa aqui, e esse será o botão. E de forma semelhante, vamos adicionar um botão aqui. Está bem? Temos que adicionar o documento, depois usar o método Create element e, dentro dele, temos que adicionar o botão. Ok, então a única coisa que preciso fazer aqui é criar um elemento div para meus botões Está bem? Então, eu posso escrever isso como um contêiner de botões, e esse seria o desenvolvimento. Então, vamos escrever documento, criar, elemento. E agora, o que temos que fazer é anotar o desenvolvimento. OK. Por isso, criamos todos os elementos de que precisamos sempre que adicionamos nosso marcador OK. Então, agora, só para simplificar, eu faria uma coisa aqui. A primeira coisa que preciso fazer é anotar a lista de favoritos que temos aqui Tudo bem, isso temos aqui. Então, agora o que eu tenho que fazer é adicionar meu elemento de lista dentro da minha lista de favoritos Está bem? Então, como você pode fazer isso? É bem simples. Você apenas adicionará um método aqui que é filho anexado. Está bem? E eu tenho que adicionar o parêntese agora E aqui vou passar o nome do elemento, que eu quero adicionar na minha lista de favoritos Então, eu quero adicionar esse elemento de marcador. Então, eu vou simplesmente passar isso aqui. Será um elemento de marcador. Perfeito. Então, agora vamos executar nossa função e ver se isso está funcionando perfeitamente ou não. Obviamente, ele não terá nenhum dado no momento, mas pelo menos sabemos que estamos adicionando o elemento da lista à lista de pedidos. Então, agora temos que clicar aqui no Spector novamente. E aqui está o que temos que fazer. Tudo bem. No momento, você pode ver aqui que não temos nada em nossa lista abaixo. Então, basta clicar no botão adicionar marcador. Agora, você poderá ver que adicionamos o item da lista aqui. Obviamente, ele não tem nada porque eu não adicionei nenhum dado a isso, mas você pode ver isso, está adicionando o elemento aqui. Da mesma forma, estamos tendo o segundo elemento, depois temos o terceiro elemento, e assim por diante. Você pode adicionar o item da lista desta forma e fizemos isso com sucesso. Agora você vai voltar para um código. E, obviamente, temos que adicionar os dados a isso, tudo bem. Agora, o que eu tenho que fazer é adicionar o elemento de parágrafo no meu elemento de marcador, e como vamos fazer isso da mesma forma Vamos escrever um pai e filho e, aqui, vou passar o parágrafo do marcador Perfeito. Tudo bem. E dentro do parágrafo do marcador, eu realmente passo o conteúdo do texto, e o conteúdo do texto será nosso URL Então, vou simplesmente passar a URL aqui. Perfeito. Agora, se eu voltar e clicar em nosso contêiner principal, clique na seção e depois na lista inalterada Agora, quando eu clico em adicionar marcador aqui, ele também terá o parágrafo que estará dentro do elemento da lista e, dentro do nosso parágrafo, teremos nosso conteúdo escrito na URL Então, vamos clicar em adicionar marcador e agora você poderá ver nosso conteúdo sobre isso Posso alterar o valor aqui para poder anotar. Esse valor. E lembre-se, no momento, não temos nenhuma validação aqui, então podemos basicamente anotar qualquer coisa nisso. Então, vamos clicar em Adicionar marcador novamente e você poderá ver isso Temos nossos dados aqui no marcador e estão funcionando perfeitamente OK. Então, eu também queria adicionar dois botões aqui, que é o botão Excluir, que também é o botão Editar. Então, como vamos fazer isso? É bem simples. Eu adicionaria contêiner de botões e, dentro do contêiner de botões, gostaria de adicionar meu botão de exclusão e o botão editado. Então, a primeira coisa que eu gostaria de acrescentar é que provavelmente será esse botão. Está bem? E de forma semelhante, eu adicionaria o botão de exclusão. Tudo bem. Agora você pode ver isso, já que adicionamos nosso botão dit e o botão delete no meu contêiner de botões, agora vou adicionar esse contêiner de botões dentro do meu elemento de marcador Está bem? Então, como você vai fazer isso? É bem simples. simplesmente copiar isso daqui. E vou colocá-lo aqui, e aqui vou apenas alterar o valor, e esse será o contêiner de botões. Então, vamos salvar isso e agora vamos voltar à nossa prévia. Vamos clicar em nosso marcador de anúncios. E agora você pode ver isso, temos esses botões, mas obviamente não adicionamos nenhum dado a isso. Está bem? Então, agora o que temos que fazer, vamos voltar aqui e aqui no meu botão de exclusão. Eu adicionaria o conteúdo do texto, e isso será excluído. E da mesma forma, eu faria a mesma coisa com o botão adicionado. Vamos adicionar conteúdo de texto e isso será adicionado. Perfeito. Agora você vai voltar. E se eu clicar em adicionar marcador novamente, provavelmente deveria adicionar nosso conteúdo aqui, mas acho que cometi algum erro aqui Vou voltar ao registro do console. Tudo bem. Então, estamos tendo esse tipo de erro aqui. O conteúdo do texto não é uma função. OK. Tudo bem, certo. Então eu cometi um erro aqui. Na verdade, essa é a propriedade, não o método. Preciso atribuí-lo assim. Agora, isso provavelmente deve funcionar. Vamos salvar isso, voltar ao nosso projeto e clicar em Adicionar marcador Perfeito. Agora você pode ver isso temos nossos botões aqui. Obviamente, esses botões não estão funcionando no momento, mas nós os adicionamos em nosso front-end. Uma coisa que ainda preciso fazer é adicionar o tipo de botão ao botão. Então, podemos adicionar o tipo do botão aqui e esse será o botão. OK. Então, eu também vou adicionar isso para o botão de exclusão. Perfeito. OK. Então, uma coisa que eu tenho que acrescentar aqui também é dentro do nosso CSS inicial é, na verdade, uma classe aqui. Ok, então eu tenho que adicionar isso em nosso contêiner. Então, como vamos adicionar a classe aqui em nosso código? Isso também é muito simples, o que você precisaria fazer aqui. Você adicionará o nome do contêiner, que é contêiner de botões, e então escreveremos a classe aqui. Ok, então não tenho certeza de qual método usamos para adicionar o nome da classe. Talvez seja o nome da classe ou a lista da classe. Ok, então vamos voltar ao navegador e procurar isso no Google. Então, vamos escrever como podemos adicionar o nome da classe em JavaScript. Está bem? Assim, podemos examinar o fluxo So. Tudo bem, então acho que precisaremos usar o método de lista de classes. Perfeito. Agora vamos voltar ao nosso código e anotar a lista de classes aqui. Em seguida, simplesmente usaremos o método add. E aqui, o que temos que fazer adicionar o nome da nossa classe, que na verdade é, se eu puder voltar ao estilo ou CSS, contêiner Button. Então, vou entrar aqui em nosso arquivo JavaScript. Vamos apenas adicionar isso. E é assim que podemos adicionar o nome da classe em nosso clima estimado usando JavaScript. Perfeito. Agora vamos voltar ao navegador e ver se isso foi adicionado ou não. Então, agora vamos entrar no inspetor e aqui, basta clicar no principal, clicar em nossa seção, clicar no UL Perfeito. Agora vamos clicar em Adicionar marcador aqui. Perfeito. E agora você pode ver que temos esse espaço aqui em nossos botões. Quero dizer simplesmente que adicionamos o nome da classe com sucesso. Bem, dê uma olhada aqui. Ok, então adicionamos o nome da classe ao desenvolvimento e está funcionando bem. Perfeito. E da mesma forma, se eu quiser adicionar qualquer outro valor aqui, clique em adicionar marcador, e isso está funcionando perfeitamente Nossa funcionalidade de adicionar marcadores está funcionando perfeitamente, certo? E agora, o que precisamos fazer é adicionar a funcionalidade no botão adicionar e também no botão excluir. OK. Mas antes disso, adicionaremos a funcionalidade do botão Excluir todos os favoritos Então, como você vai fazer isso? Vamos voltar ao nosso código e aqui o que temos que fazer. Seria bem simples. Na verdade, é um código de linha única aqui. Ok, então como isso é uma única linha de um código. Então, basicamente, como sabemos que tudo o que estou adicionando aqui está sendo adicionado à nossa lista de favoritos Está bem? E para remover todo o conteúdo da nossa lista de favoritos, basta fazer uma única coisa Então, aqui vamos adicionar uma lista de favoritos. Em seguida, escreveremos a estimativa interna aqui. E como a estimativa interna é na verdade a propriedade, vamos adicionar o valor a isso, e será a string vazia Então, basicamente, ele removerá tudo o que temos em nossa lista de favoritos OK. Então, agora vamos tentar executar isso e ver se isso está funcionando ou não. Tudo bem. Então, vamos voltar ao nosso projeto. E vamos tentar adicionar alguns valores a isso. Então, vamos adicionar esse valor, e vamos adicionar um segundo valor aqui também. Tudo bem. Então, agora, se eu clicar em, exclua todos os botões de favoritos Então, deixe-me abrir nosso corpo aqui e também a seção e a lista não ordenada Então, se eu clicar no botão Excluir tudo, basicamente, ele excluiria tudo o que temos dentro da nossa lista não ordenada Então, agora vamos clicar em, excluir todos os favoritos. E agora você pode ver isso, não temos nada nossa lista de pedidos desordenados Então, é assim que podemos excluir todos os favoritos que temos em nossa lista abaixo Perfeito. E também para adicionar o nome da classe, você também pode usar a lista de classes e o método add, e você também pode simplesmente escrever o nome da classe aqui, e funcionaria da mesma maneira. Então, o que você preferir usar aqui. Eu vou aqui com a lista de turmas. Tudo bem, então agora o que temos que fazer. Se eu voltar ao navegador, você poderá ver uma coisa que sempre que adicionarmos uma URL aqui e clicarmos em Adicionar marcador, você verá no campo de entrada que o texto não está se redefinindo sozinho Está bem? Ainda estamos recebendo o mesmo texto aqui. Então, se eu adicionar isso novamente, ainda teremos esse texto. Mas eu não quero ter isso. Quero que, sempre que eu clicar no botão Adicionar marcador, meu campo de entrada esteja limpo Ok, então como você pode fazer isso? É bem simples. Vamos entrar aqui dentro do código VS. E aqui o que você precisa fazer é anotar a entrada do marcador e a propriedade do valor do ponto, e definiremos isso como uma string vazia Depois de fazer todas as funcionalidades que temos, adicione um marcador OK. Agora, se eu voltar ao nosso navegador e tentar adicionar algo aqui e clicar em adicionar marcador, agora você pode ver aqui que nosso campo de entrada está limpo OK. E uma coisa que você precisa ter certeza é adicionar o valor do ponto de entrada do marcador Você precisa direcionar isso diretamente, não a variável de URL aqui, pois isso não afetará a entrada de marcadores que temos na estimativa Está bem? Então, se eu escrever o URL aqui, isso na verdade não faria nada para nós. Está bem? Então, vamos salvar isso e voltaremos aqui. E se eu tentar ter nosso URL, clique em Adicionar marcador, você pode ver isso Ainda temos nosso valor aqui. É por isso que você precisa definir o valor do ponto de entrada do marcador pois isso afetaria diretamente nosso campo de entrada aqui Está bem? Tudo bem. Então, agora o que temos que fazer é voltar para o navegador. OK. Agora você pode ver aqui que temos tudo o que precisávamos, mas ainda assim o padrão adicionado e o padrão de exclusão não estão funcionando. Então, temos que tornar esse botão funcional. Então, como podemos fazer isso? É bem simples. Precisamos adicionar o ouvinte do evento aos nossos botões. Então, vou adicionar esses ouvintes do evento. Então, primeiro de tudo, vou anotar o botão de exclusão. Vamos anotar adicionar ouvinte de eventos. Então, o evento seria, digamos, clicar, e aqui teremos nossa função de seta. OK. Da mesma forma, adicionaremos o ouvinte de eventos em nosso botão adicionado Perfeito. Então, agora temos que definir nossas funções aqui para nossos botões. Tudo bem, para excluir esse elemento específico, na verdade, temos que direcionar nosso elemento de marcador que temos aqui Então, vamos simplesmente segmentar o elemento marcador. E há um método predefinido no tom que você pode usar para excluir diretamente o elemento estimado Está bem? Então, agora, se eu voltar ao nosso navegador, vamos adicionar algo aqui. Deixe-me adicionar mais uma propriedade aqui. Clique em adicionar marcador. Agora vamos clicar em nosso botão de exclusão, e isso excluiria esse botão de marcador E se eu clicar novamente, isso também excluirá esse elemento de marcador Está bem? Agora, o que precisamos fazer adicionar a funcionalidade do botão adicionado. Agora, para adicionar a funcionalidade ao nosso botão morto, posso simplesmente editar o conteúdo dessa forma se eu usar o prompt. Então, se eu usar o prompt aqui, deixe-me criar uma variável que será uma nova URL. E eu posso simplesmente usar o prompt aqui. Posso anotar o valor do URL de atualização. OK. E então, o que podemos fazer simplesmente adicionar isso em nosso parágrafo de favoritos ao conteúdo do texto E isso basicamente atualizaria nosso conteúdo dentro do elemento marcador Então, se eu voltar para o navegador, vamos adicionar algo aqui. E se eu clicar na edição, agora você poderá ver que estamos recebendo a solicitação aqui. Está bem? E se eu simplesmente anotar google.com e clicar em OK Na verdade, isso atualizaria o conteúdo do valor do nosso marcador OK. Então isso está funcionando. Agora eu quero que você faça algo novo neste projeto, que é tornar este parágrafo editável diretamente sem ir ao baile Então, como você pode fazer isso? É bem simples. Deixe-me deletar isso daqui. Temos que anotar o elemento marcador e agora temos que anotar a propriedade que é filha. OK. E agora, eu só vou fazer o Consolo aqui porque eu tenho que te mostrar uma coisa Se você voltar ao nosso navegador, clicar e clicar em qualquer valor aqui e clicar em Dit. Agora você poderá ver que temos esse log de console de coleta de estimativas no qual, no valor do índice zero, temos nosso parágrafo e, em seguida, no primeiro, estamos desenvolvendo nosso desenvolvimento. Ok, para tornar nosso parágrafo editável, o que temos que fazer focar na propriedade que está no índice número zero, que é nosso parágrafo, obviamente Então, para acessar isso, vamos anotar zero. E agora, se eu adicionar qualquer valor aqui e clicar em Editar, agora você poderá ver que estamos acessando diretamente nosso elemento de parágrafo. Tudo bem. Agora, para tornar nosso elemento de parágrafo editável, existe uma propriedade, mas na verdade não me lembro do nome dela corretamente Então, vamos pesquisar isso no Google. OK. Então, agora vamos voltar ao navegador, e eu já abri este artigo do So flow. OK. Então, temos que usar essa propriedade que é editável pelo conteúdo, e temos que definir esse valor como verdadeiro Ok, então eu vou simplesmente copiar isso daqui. E voltaremos ao nosso código VS. Vamos apenas passar esse valor aqui, e isso realmente tornaria nosso parágrafo editável Agora, uma coisa que precisamos fazer aqui é que eu também quero alterar o texto do nosso botão de adição sempre que tivermos nosso parágrafo editável Então, vou escrever o conteúdo do texto, o que seria igual a salvar. OK. Então, agora vamos salvar isso e voltar ao nosso navegador e adicionar alguns valores aqui, clicar em Adicionar marcador e clicar em Editar aqui Agora, você poderá ver que nosso URL é editável ou nosso elemento de parágrafo é editável Eu posso simplesmente alterar o valor aqui diretamente. E quando eu clico no botão Salvar, na verdade, isso não faria nada, porque o motivo é que, se você voltar ao nosso código, poderá ver aqui que adicionamos a funcionalidade de que , sempre que clicarmos no botão de edição, ele deverá alterar o elemento do parágrafo para o conteúdo editável e também alterar o texto do botão de edição Então, se você fizer isso pela primeira vez, ele mostrará as alterações aqui, e se eu clicar no botão Salvar novamente, que na verdade é o botão de edição, ele não fará nada. Então, temos que definir isso agora que sempre que nosso conteúdo já é editável, ele precisa fazer alguma coisa Então, basicamente, temos que adicionar aqui a condição que, agora, eu só tenho que copiar isso daqui, e vou colocar isso dentro da nossa condição. Vamos remover a semi coluna e temos que embrulhar isso E o que temos que fazer, na verdade, sempre que o parágrafo já estiver editável, basta fazer o inverso aqui Está bem? Temos que alterar o valor do conteúdo editável para falso E temos que fazer mais uma coisa aqui. Isso será adicionado. Perfeito. Agora vamos voltar aqui e adicionar algumas coisas aqui , clicar em ddt e alterar o valor aqui E clique em salvar aqui. Tudo bem, então acho que estamos tendo alguns problemas aqui porque nossa condição parece não funcionar. E se eu clicar em nosso parágrafo, ele ainda é editável Então, agora temos que voltar ao nosso código e ver onde cometemos o erro aqui. Então, primeiro, vou verificar se nossa condição está funcionando ou não. Então, vou simplesmente fazer com que o log do console Condição esteja funcionando. Agora eu volto ao nosso navegador tenho algumas coisas aqui e clico no botão de edição. Ok, então agora é editável. Mas agora, quando clico no botão Salvar, agora temos que verificar se nossa condição está funcionando ou não. Então, vamos clicar nisso. Tudo bem. Portanto, a condição parece funcionar. Então, o que fizemos de errado aqui? Ok, ok. Tudo bem. Então, o que vamos fazer aqui é realmente usar a ajuda do Ja JibTi ou de qualquer outra ferramenta de IA, qualquer que você goste Então, vamos para o nosso navegador. Ok, então vamos anotar o JGiBii aqui. E agora o que temos que fazer é colocar nosso código aqui e pedir que ele encontre um bug nesse código. OK. Tudo bem. Deixe-me dar uma olhada no meu código novamente. Talvez eu possa consertar isso. Portanto, temos a condição if que provavelmente está funcionando. Então, estamos alterando o valor. Ok, então eu acho que podemos ter escapado do s. Ok, ok, ok, entendi. Tudo bem. Mesmo assim, vou colocar isso no baile, a menos que veja que talvez esse seja o problema. Tudo bem, tudo bem. Então, eu cometi esse erro realmente básico que eu dei, então, se eu puder voltar ao meu código, eu dei a isso a condição if. Mas eu coloquei esse código sem nenhuma declaração. Então, basicamente, até mesmo a condição é verdadeira aqui, como se estivesse mudando o valor para a confusão e o conteúdo do texto para a edição Mas se o código cair, ainda estamos substituindo os valores aqui Então esse é o problema potencial. Mas vamos voltar para o baile e, na verdade, isso está nos mostrando a mesma coisa Se eu puder ampliar, tudo bem, então a linha em que temos o marcador na qual estamos alterando o valor para verdadeiro é executada toda vez que o ouvinte do evento Então, basicamente, está tornando nosso blog de I eficaz. A mesma coisa está acontecendo com nosso conteúdo de texto aqui porque fora da condição if, adicionamos esse código. Então, basicamente, nossa condição está funcionando, mas na verdade estamos superando nosso valor Então, para isso, o que temos que fazer é colocar isso em nós temos que colocar isso na instrução LS. Então, vamos cortar isso daqui e colocar isso aqui, e isso provavelmente funcionaria agora. Então, vamos salvar isso e voltar ao nosso navegador. Adicione qualquer valor aqui e clique nele, altere o valor. Clique no nosso botão novamente. Agora isso está funcionando. E agora você pode ver que nosso parágrafo não é mais editável. Então, isso está funcionando perfeitamente bem. Ok, então esse era o problema. Então, vamos remover esse registro do console agora. Perfeito. Perfeito. Então, fizemos nossa funcionalidade no botão de edição. Fizemos isso no botão de exclusão. Basicamente, fizemos tudo, exceto validar a URL, e isso não vai levar muito tempo porque vamos usar a expressão regular aqui E para a expressão regular, podemos usar a carga Então, primeiro, vou escrever a função aqui, que seria validar o URL Na verdade, isso usaria uma URL como entrada e basicamente retornaria esse valor. Para adicionar a expressão regular, não precisamos adicionar isso sozinhos. Podemos simplesmente ir ao Google se você quiser ou talvez ao JGBT, o que parecer melhor para No momento, vou ao JGBT e farei um baile de formatura adequado para validar minha URL aqui. Eu vou escrever. Quero ter uma função em JavaScript que possa validar o UR Okay E eu só quero validar a URL que começa com HTTP, HTTPS . Então, agora vamos dar um baile de formatura para o HAPT e ver o que temos Tudo bem, então esse é o padrão que temos aqui. Esse é o único. Eu só tenho que copiar isso daqui e vamos voltar ao nosso projeto. Vamos colocá-lo aqui. E, basicamente, vamos escrever o método de teste de pontos e colocar nossa URL aqui. É isso mesmo. Então, isso realmente validaria nosso URL E qual é o padrão que estamos usando para validar se nosso URL começa com HTTP ou deve começar com HTTPS? Agora, o que temos que fazer aqui adicionar essa validação em nossa função de adicionar marcadores Então, vamos adicionar aqui, vou escrever minha função e colocar a URL aqui que temos aqui. Então, se nosso URL estiver sendo validado. Ok, agora o que eu tenho que fazer usar o operador de nó aqui, e isso só nos alertaria da mensagem sempre que fornecêssemos uma URL inválida Tudo bem. Por isso, escrevemos nossa mensagem aqui que, se nosso URL não for válido, ele deverá nos mostrar essa mensagem de alerta. E vo