Exemplo de JavaScript: 10 projetos para iniciantes

1. Apresentação: Olá, bem-vindo ao nosso novo exemplo de classe em JavaScript. Meu nome é John Sorkar. Sou desenvolvedor web e instrutor on-line da Fullstack. Hoje, neste tutorial, aprenderemos dez exemplos de JavaScript, como acordeão de JavaScript, guia JavaScript, rolagem até o topo, cabeçalho fixo, menu de slides, controle deslizante de JavaScript, caixa de confirmação, caixa de modelo, tabela de filtros e lista modelo, tabela de filtros e Esses são exemplos muito comuns em nossos sites. Todos esses projetos são feitos com JavaScript, SDML e CSS Basicamente, nesses projetos, não vamos nos concentrar em design e layouts Basicamente, vamos nos concentrar no JavaScript. Em vez de projetar, vamos nos concentrar em seu processo de trabalho, por exemplo, como podemos adicionar dados em nossa lista de Kudo, como podemos excluir dados de nossa lista de Kudo, etc Espero que você goste de todos os pequenos exemplos. Obrigado por assistir a este vídeo. A partir do próximo tutorial, iniciaremos nossos projetos. 2. Tutorial de acordeão JavaScript parte 1: Olá, pessoal. Bem vindo de volta. Neste tutorial, aprenderemos como criar acordeão usando JavaScript Mas antes precisamos entender o que é acordeão e o que podemos fazer com ele? Então, como você pode ver, eu abro um exemplo em um navegador. O acordeão vem com algum título. Se eu clicar em qualquer título, ele mostrará o conteúdo relacionado a esse título. Se eu pegar outro título, como você pode ver, ele mostra o conteúdo, mas oculta o conteúdo anterior do Título três. Neste tutorial, vamos criar essa codificação usando DML, CSS e Em acordeões, você pode adicionar imagens, você pode adicionar vários parágrafos, etc. Esses acordeões são muito úteis para fins de resposta a perguntas Se você clicar em qualquer quotien, eles têm a resposta agora mesmo Sem perder seu tempo, vamos começar pela prática. Então, como você pode ver, lado a lado, abro meu editor de código visual stroud e meu navegador usando a extensão de servidor ao vivo, e eu já criei um documento HTML chamado index E dentro da etiqueta corporal, temos uma etiqueta de cabeçalho. Então, aqui, vou começar nosso acordo, e aqui vou pegar um Deep, então digite o ponto de acordo. Codificação da classe Dip. Então, dentro dessa classe de codificação, precisamos pegar vários itens correspondentes para criar um item de acordeão, eu vou pegar dip accodon Este é o nosso primeiro item de acordo com nosso acordeão. Então, dentro desse item de acordeão, eu vou pegar um título de sódio. Vou criar um título de acordo. E dentro desta seção de título, vou colocar um texto, Hey Accordion Title one Acordão, título um. E agora vou dar outra olhada no conteúdo de acordeão Conteúdo de acordeão tipo hemo. E dentro desse contêiner, vou digitar um contêiner de acordeão Com isso, vou adicionar mais algumas correções. Aqui vou digitar Blum 13. Aqui, aqui eu vou adicionar 30. Aqui criamos nosso primeiro acordeão itin e eu quero um total de quatro acordeon itin e eu quero um total de quatro Para isso, quero selecionar esta seção e dublar três vezes Além disso, vou mudar o título. Esse é o acordeão número dois. Título do acordeão dois, conteúdo do acordeão dois. E este é o título do acordeão, conteúdo do acordeão C. E isso é como qua. Título quatro do acordeão, conteúdo do acordeão quatro. E eu vou configurar isso. Depois de configurar esse arquivo, você pode ver no meu navegador criamos com sucesso vários itens de acordeão, itens um, dois, três e E agora precisamos começar essa parte do ladrilho. Então, dentro da etiqueta de sucesso, eu vou pegar uma gravata. Então, dentro dessa etiqueta de estilo, primeiro, vou estilizar a seção correspondente. Copie o nome da classe de acordo e eu vou selecionar essa. De acordo. Então, dentro da cor, resista. Primeiro, me ajude a usar a fonte famine. Falta de fontes, e eu vou escolher a fonte aérea. Além disso, vou adicionar a essa conta o tipo 450 pixels Por enquanto, vou adicionar uma borda. Borda, um pixel. E eu quero uma borda sólida. Sólido. E eu quero a cor preta, 000. Se eu definir esse arquivo, agora você poderá ver todo o tamanho da codificação Se você notar, pode vê-lo adicionar uma borda preta à nossa codificação, e também especificamos a para esse acordeão, que é E agora vou estilizar os títulos do Accordion. Se você abrir o item do acordeão, poderá ver o título do acordeão e a transmissão do acordeão Primeiro, vou estilizar esta seção, título do acordeão. Portanto, copie o nome da classe, o título do acordeão e, depois do acordeão, o título do acordeão com pontos gravata Então, por dentro, o Cali diz, primeiro, eu vou usar a cor branca que eu quero Tem. Então eu digo que o título tem cor branca. Com isso, vou usar a cor do fundo. Cor do plano de fundo, y. Se eu definir esse arquivo, você verá o resultado. Mas não parece muito humorado. Vou adicionar um pouco de preenchimento a esta seção de título. Acolchoamento de dez pixels. Crie este arquivo, agora você pode ver o resultado. Agora, quero adicionar o Office a essa seção de títulos de codificação. Para isso, vou copiar esta seção, codificando o título. R: aqui vou usar um seletor de seleção posado, dois pontos e aqui vou usar Então você disse a cor dos versos, W sobre esta seção do título, eu quero mudar a cor de fundo Então, aqui eu quero usar a propriedade de fundo. Antecedentes. Hashtag E eu quero selecionar nove A, 16, um. Depois de definir esse arquivo, se eu passar por cima do meu carro nesta seção, como você pode ver, mudo a cor de fundo desse título. Mas há um problema com isso. Sempre que eu repreendo essa seção de título, mudo instantaneamente a cor de fundo Quero adicionar um pouco de suavidade sempre que eu passar por cima dos meus carros Então ela digita outra propriedade, que é transição. Transição de transição e eu quero fazer a transição ou plano de fundo. Antecedentes. Antecedentes. E eu quero fazer a transição nossa seção de fundo por 1 segundo. 1 segundo. Depois de definir esse arquivo, se eu passar meus cartões nesta seção de título, agora você pode ver que leva algum tempo para mudar a cor de fundo. Demora 1 segundo para alterar a cor de fundo. E agora vou estilizar a seção de conteúdo, esta parte, de acordo com o conteúdo Então eu copio o nome da classe. Então, dentro desta seção de estilo, vou selecionar a parte do conteúdo do acordeão E eu disse que o CulivrasSF vou mudar a cor de fundo desse conteúdo Então, eu quero usar a propriedade de fundo, plano de fundo e quero essa cor. A seis, A seis, F é uma espécie de cor amarelada Se eu definir esse arquivo, você poderá ver o resultado. É uma cor dourada clara. E para alguma lacuna, quero adicionar um pouco de preenchimento. Acolchoamento de dez pixels. Depois de adicionar um pouco de preenchimento, agora você pode ver que está muito bom Agora, se você notar, pode ver cada um de acordo com o outro. Agora precisamos fornecer alguma lacuna entre eles. Para isso, precisamos selecionar a classe do item acordeão, essa Para selecionar essa tag, accordon IM É o caliss. Quero adicionar alguma margem na parte inferior Aqui vou digitar botão de margem, botão de margem, botão, dez pixels. Depois de definir esse arquivo, você pode ver o resultado. É adicionar um pouco de pano à conformidade. Agora, quando o usuário abre a página, eu quero me esconder de acordo com o conteúdo. Não quero costurar o conteúdo. Para isso, precisamos usar essa propriedade play nun. Deixe-me te mostrar. Então, em nossa seção de conteúdo de codificação, vou digitar essa propriedade de jogo Esta peça é nula. Se eu definir esse arquivo, como você pode ver, ele oculta nosso conteúdo. Usando o script Java, vamos mostrar o conteúdo. Então, sempre que clicarmos na seção de título de acordo com a seção, ela mostrará o conteúdo específico do título. Para isso, precisamos incorporar o lkvent a toda essa seção de títulos Então, fizemos com sucesso nossa parte de HTML e CSS. E agora precisamos incorporar o TikVNT a todo esse item. Para isso, precisamos executar Lou em todo esse título e também adicionar o Tiki vent ao Então, vamos começar com script Java Outside the Deep Dag, eu vou usar o script Dentro da tag do script, vou pegar uma variável, cujo nome está de acordo com o item. Para declarar a variável, vou usar Cs Cs e o nome da nossa variável é um item de codificação Agora eu quero direcionar todo o item de codificação telemon. Para isso, vou digitar o seletor de documentos qui. 3. Tutorial de acordeão JavaScript parte 2: Dentro das redondas e eu quero selecionar todo o item de codificação Copie o nome da classe e, dentro do código duplo, o item de codificação de pontos Em seguida, semigon para finalizar esta linha. Portanto, armazenamos com sucesso todo o item de codificação nessa variável, que é o item de codificação E agora precisamos executar o loop acordo com a linha do item. Então, na próxima linha, vou digitar o item de codificação Dot, Hem para usar para cada função de cada um Então, dentro dos vestidos redondos, vou declarar uma função Função, é uma função anônima. E dentro desses vestidos redondos, vou passar uma variável, e o nome da nossa variável é item. Então, dentro dos calibres também, podemos usar a função de seta Vamos usar a função de seta. Para isso, vou remover a palavra-chave e os parênteses da função e vou digitar itens iguais a arosne Como você sabe, este é o operador de seta. Agora, dentro dessa função de seta, precisamos segmentar de acordo com o título. Como precisamos segmentar de acordo com a quantidade. Então, dentro dessa função, vou usar uma variável como título. Aqui vou digitar cons e nossa variável é title. Título igual a. Então, sempre que executarmos nosso loop pela primeira vez, ele armazenará primeiro o item de acordo com essa variável, ccding item E agora eu quero armazenar de acordo com o título e a tenda de codificação em diferentes variáveis Então, em nossa primeira variável, título, eu quero armazenar de acordo com o título. Portanto, o título do ato é igual ao IM, com o quadriciclo selecionado. São as prensas redondas? Esse é o código duplo? Vou selecionar este, adicionando título, ponto, título de codificação. Em seguida, envie essa linha. Quer dizer, a partir dos itens de codificação, selecionamos o título da codificação. Da mesma forma, precisamos selecionar quanta de codificação. Então eu dupliquei essa linha e vou mudar a variável m quanta Conteúdo igual ao conteúdo de codificação do seletor Quari do ponto do item. Eu substituo o título da codificação pelo conteúdo da codificação. Agora eu quero aplicar o ouvinte Aden a essa variável de título. E com o animal de estimação ajudante, quero adicionar Kikiw Aqui eu quero digitar title the add even listener e Hem pass lickiw Sempre que o usuário clica nessa parte do título, eu quero chamá-la E aqui eu quero usar outra função de seta. Eu crio uma função de seta. Então, sempre que o usuário clicar nessa parte do título, eu quero adicionar uma nova classe em nossa classe de título. Quero dizer, suponha que o usuário clique na codificação do Título quatro e, em seguida, ele adicionará uma nova classe a essa parte, que está ativa Basicamente, quero dizer que, sempre que clico nela, quero adicionar uma classe ativa a essa parte. Para isso, precisamos selecionar o IEM ITM que vou chamar de função classls classist Agora é por isso que usamos a função de toalha. Portanto, sempre que um usuário clicar nesse título pela primeira vez, ele adicionará um plus ativo. E se o usuário escolher esse título pela segunda vez , ele removerá o plus ativo. Então esse é o uso do Towle. Então, dentro da aspa simples, vou colocar o nome da classe, que é Acne. Nós vamos fazer nesta linha. Desculpe, este comando adicionará a classe ativa nesta seção do item, item de codificação, não o título da codificação Então, sempre que clicarmos nesse título de codificação, ele adicionará active plus accord ao item de codificação E agora vou estilizar essa vantagem ativa. Então, aqui, dentro dessa tag de estilo, eu vou digitar dot act e dentro do liss eu vou começar nossos Cs Então, dentro desta seção de estilo com o item de codificação, se houver um nome de classe, atue dentro dos próprios vestidos, então eu quero mostrar o conteúdo da codificação Então, vou selecionar esse conteúdo de codificação de classe e, depois de ativo, vou adicionar essa classe E aqui, vou usar uma exibição de nome de propriedade, bloco de exibição. Então, depois de configurar esse arquivo, se eu passar o mouse sobre meus cartões, codificar o Título três e clicar nele, como você pode ver, ele mostra a parte do conteúdo Da mesma forma, podemos abrir o segundo título. Podemos abrir o terceiro, podemos abrir o quarto. Também o primeiro. E se eu clicar nesse título pela segunda vez, como você pode ver, ele fecha essa parte. Da mesma forma, se eu clicar em OOP, aqui você pode ver que ocultou o conteúdo Porque, como eu disse, Harrow usa a função Togo Essa função funciona como um interruptor. Quando eu clico nele pela primeira vez, ele adiciona uma classe, e quando eu clico na segunda vez, ele remove a classe. Se eu te mostrar meu console, como você pode ver na minha seção de elementos no item de codificação quatro, você pode ver a classe att porque ela abre nosso item de codificação Mas se eu fechar essa codificação, agora você pode ver que ela removeu a classe ativa Da mesma forma, se eu clicar na codificação do Título três, agora você poderá vê-lo como uma classe ativa de acordo com o Título três Mas se eu clicar nele novamente, ele removerá a classe. Então, esse é o uso da função de toalha. Agora, vamos voltar ao visto cot, mas há um problema. Como você pode ver, posso abrir todo esse acordeão, mas não quero abrir todos os itens ao mesmo tempo Então, se eu abrir apenas o segundo item, o outro seria um grupo. Basicamente, eu quero esconder outro conteúdo. Para isso, precisamos remover a classe ativa do outro item. Para fazer isso, precisamos fazer um truque. Suponha que eu clique no item três e, em seguida, nossa função que vai para a outra classe de irmãos tenha sido ativada com mais ou sem Se eles tiverem a classe sem ativa quando estiverem abertos, remova a classe ativa do irmão Então, para isso, novamente, precisamos executar um loop para todos esses itens de codificação Então, aqui, eu vou usar um quatro para dentro das prensas redondas, primeiro, eu vou declarar uma variável lá, e o nome da nossa variável é I. Então, aqui, eu vou usar um Para dentro dos vestidos redondos, vou declarar uma variável Então eu atribuo com Z. E eu quero executar o loop até o item de codificação len Portanto, eu menos do que codifico o item n itens e a versão de pontos. E semiconontb neste slide. Então, temos que preencher quatro itens de codificação. Então, ele executará nosso loop pela quarta vez e, para executar o loop, também precisamos incrementá-lo. Além disso, sim. Então, depois de entrar no loop, precisamos verificar todos os itens de codificação Se o mesmo item de codificação que o usuário seleciona atualmente é o usuário seleciona apenas o item quatro, então precisamos colocar o ativo mais apenas o item quatro, não o outro Para isso, insira esse loop, precisamos usar a condição IP. Se estiver dentro das rodadas e dentro das prensas redondas, precisamos passar pela condição E nossa condição é que, de acordo com a IM, dentro do quadrado da resistência é uma matriz, então precisamos passar o número do item, I, I não igual a T. Quer dizer, usuário não selecionar o item atual, então remova o sinal ativo de adição Dentro desse calis, precisamos remover a vantagem ativa. Itens de corte liso. Dentro do número quadrado do item seis, eu não preciso usar o método classls para remover a classe ClassLessRMove Dentro da função remove, precisamos passar o nome da classe que eu quero remover e eu quero remover a classe ativa. E semicon nesta linha. São as cores, por exemplo, se o usuário clicar no item atual e, em seguida, adicionar essa classe ativa. Copie esta seção e coloque-a dentro da longarina. Basicamente, o que ele vai fazer? Se o usuário clicar em qualquer título , ele será verificado. Esse é o item atual ou não? Se esse não for um item atual, mas o item tiver a classe ativa, remova a classe ativa. Mas se esse for o item atual, adicione o sinal ativo. Agora, vamos configurar o arquivo e ver se ele funciona perfeitamente ou não. Então, primeiro, vou clicar no item número quatro. Como você pode ver, é o conte. Mas se eu clicar no item número dois, agora você pode ver que ele oculta o conteúdo do item número quatro e, portanto, o item número dois transmite Então, ao usá-lo, ao mesmo tempo, podemos abrir apenas um item. E se você quiser tornar esta seção do título aplicável, eu quero dizer que quando você passa o cursor nesta seção do título, você quer mostrar o cursor como um ponteiro Para isso, precisamos acessar a seção de título correspondente. De acordo com o título. E aqui precisamos usar uma propriedade, Nan Cursor. Carzar Pointer. Se eu definir esse arquivo e abrir qualquer um dos títulos, agora você pode ver nossa seta do cursor ser convertida em ponteiro E se eu teclar, podemos ver o conteúdo. Agora parece um tlqablein e criamos nosso acordo com sucesso E se eu remover a parte inferior desse contêiner atual, deixe-me mostrar a você. Então, eu vou remover este e configurar este arquivo. Agora você pode ver que está perfeito. E você pode adicionar qualquer coisa à sua seção de codificação. Você pode adicionar galeria de imagens, vários quocientes, etc. Então, isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos mais sobre moedas de web design. Obrigado por assistir a este vídeo. Estátua. 4. Guia Javascript — parte 1: Olá, pessoal, é bom ver vocês. Mais uma vez, estou de volta com um novo projeto relacionado a JavaScript Atable e CS E neste tutorial, aprenderemos como podemos criar guias usando JavaScript, CSS e ASTM Então, como você pode ver em um navegador, abrimos um exemplo. Aqui você pode ver o título do toque e sempre que clicarmos ou comermos, ele mostrará o ícone relacionado a esse título do toque. Como você pode ver, nossa aba 1 está ativada. Se eu clicar na guia dois, agora você pode ver o conteúdo da guia dois, que contém automaticamente a guia um. Da mesma forma, é work pd tab three. Agora, toque alto em dois conteúdos e mostre o conteúdo da guia três. Espero que você já esteja familiarizado com o tab. Sem perder seu tempo, vamos começar a prática. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu Bowserver usando a extensão if server Eu já criei um documento HTML chamado index dot HTM. E aqui vamos criá-lo, mas primeiro, precisamos criar os botões. Então, primeiro, vou pegar uma guia de contêiner mais guia, guia de classe Dep E dentro desse D, aqui vou pegar vários botões. Então, primeiro, vou usar um botão de etiqueta de botão. E dentro dessa tag, vou digitar a aba um. E se você não quiser usar botões, você pode pegar e é. Então, agora vou atribuir uma classe a esse botão e o nome da classe é tabela de classes, essa é uma classe comum Com isso, vou usar um atributo de dados. Dados do tipo Hemo, e o nome do nosso atributo é tab. Vou usar um nome para essa guia, que é a guia um. Aba um. Atributo de dados introduzido em um arquivo estável e é permitido criar seu próprio nome de atributo. As classes redefinem o atributo. Da mesma forma, podemos criar nosso próprio atributo, e nosso nome de atributo é guia de dados. Para isso, primeiro, você precisa digitar o hífen de dados e, em seguida, usar seu próprio nome Além disso, atribuo um valor a essa guia, que é a guia um. E, no futuro, vou usar esse valor. E agora vou atualizar esse botão a tempo. E vou alterar as tomadas e o tipo de dados Value. Essa é a guia número dois e também a guia de dados dois. E esta é a guia número C, guia de dados C. Então eu criei nosso botão com sucesso. E agora, se o usuário clicar na guia um , quero mostrar o conteúdo relacionado à guia um. Da mesma forma para a guia dois e a guia três. Para isso, vou pegar outro D, e nosso Dipta é o conteúdo da guia Então, vou digitar o conteúdo da aba de pontos. Com isso, também vou usar outro atributo que é TI. ID igual à guia um. Quero dizer, enquanto o usuário clica no botão Tab one , ele mostra a quantidade da guia 1. Dentro desta aula de mergulho, vou pegar um título, H dois, título dois E aqui vou digitar a aba um. Depois do cabeçalho, vou pegar um parágrafo, P. E dentro desse parágrafo, vou digitar alguns tiques aleatórios Lum, 50 palavras. Neste conteúdo de etapas, temos uma tag de cabeçalho e uma tag de paradap, e esse é o conteúdo da nossa primeira etapa Da mesma forma, precisamos criar mais dois conteúdos de toque para o toque dois e o toque três. Vou definir essa parte e cumprir o tempo. Em seguida, vou substituir o nome do título. Aba dois. Isso é para o toque dois. Além disso, precisamos alterar o ID. Aba dois. Da mesma forma, precisamos alterar o nome do título de tap, Tab three. Também vou mudar o conteúdo. Vou adicionar conteúdo diferente em uma guia diferente. Aqui vou adicionar outro parágrafo e vou digitar menos de dez caracteres. Dez palavras. E do nosso tipo três, vou reduzir algumas palavras. Então, vamos configurar o arquivo e ver o que propina? Sim, é uma palavra. Ele de três botões. E também, vocês veem tab cont Tab one, Tab two e tap three E agora precisamos estilizar essa parte. Então, vou voltar para a etiqueta principal. E dentro da etiqueta principal, vou usar o estilo de etiqueta de estilo. No começo, vou usar um seletor universal, que é ta Então, dentro do CISSo, o primeiro nome da propriedade é tamanho da caixa, tamanho da caixa e um presunto a ser usado, exceto nosso Box vi. Eu uso essa probidade porque, no futuro, se eu adicionar preenchimento a qualquer guia , isso não aumentará a largura dessa E agora vou estilizar a etiqueta corporal, corpo. E dentro dessa etiqueta corporal, primeiro, vou fornecer uma cor de fundo. Antecedentes. Plano de fundo, e aqui vou usar uma cor cinza claro. Ou que eu vou amarrar cinza claro. Depois de definir esse arquivo, você pode vê-lo. Em seguida, vou estilizar esse contêiner, D, class tab. Este contêiner segura esse botão. Então, na aba tt, eu defino a resina redonda, eu defino o Css Primeiro, vou subir W até esse contêiner. Nós temos 500 pixels. Com isso, vou adicionar outra propriedade que é overflow Estouro oculto. Se eu definir esse arquivo, você verá o e eu vou definir esse arquivo. No futuro, se eu adicionar várias guias, não quero sobrecarregar a seção de toque Além disso, vou adicionar uma borda temporária à seção da etapa e vou digitar borda e o valor é um pixel, e vou usar cor sólida. O nome sólido e colorido é preto. Para configurar esse arquivo, você pode ver o Aqui usamos 500 pixels de largura, também uma garrafa. E agora eu quero estilizar todo o botão que está dentro dessa guia. Então, eu quero selecionar todos os botões. Então, dentro dessa guia, eu quero selecionar o botão de todos os botões. Então, dentro do vestido colorido, princípio, vou fornecer a cor de fundo para todo esse botão. Quero digitar o plano de fundo e nossa cor de fundo é vermelha. Além disso, quero remover toda a borda desse botão. Por padrão, cada botão tem uma borda. Então, para remover. Para isso, precisamos usar alguma propriedade de fronteira. Border, freira. Depois desse arquivo, você pode ver o resultado. Com isso, também, vou remover o contorno. Esboço, freira. E agora, vou adicionar um pouco de preenchimento a esse botão. Então, para digitar o preenchimento de cima para baixo, vou pegar dez pixels, e da esquerda e da direita, vou pegar 15 pixels Se eu definir esse arquivo, você verá o resultado. E então eu vou mudar a cor dessa fonte. Cor Pi e fonte para ele, fonte, it, benção. Depois desse arquivo, você pode ver o. Agora, se você pressionar curvar neste botão, agora você pode ver que não é um ponteiro Então, precisamos torná-lo um ponteiro. Esse usuário pode sentir que é um botão, caso contrário, saia. Então, vou usar outro nome de propriedade Cursor. CurzarPointer. E eu vou satisfazer. Se eu Hoberm cortar esse botão, você poderá ver o resultado. Agora se tornou um indicador. E agora eu quero mudar a cor do botão quando eu bermo carros neste botão Para isso, precisamos usar um seletor Posito Her. Então, vou copiar esse seletor e digitar o botão da fita E aqui eu vou usar o PosidoCass Hober. Ober é o fundo grosseiro. Vermelho. E a partir dessa paleta de cores, eu vou mudar a cor E dessa paleta de cores, vou pegar a versão mais escura do vermelho, algo parecido Caso contrário, você pode usar AGV Vu ou Higa V. E também quero uma pequena base para Eu quero usar a propriedade de transição aqui. Transição, e eu quero fazer a transição desta propriedade, fundo da cópia de fundo e nossa divisão de transição é de 0,3 segundos. Predefina esse arquivo. Se eu passar o cursor sobre ela, como você pode ver, é uma cor de fundo e também adiciona uma pequena transição suave. Agora, se o usuário clicar em qualquer guia, ele adicionará um elenco ativo a essa guia. Vamos fazer isso usando o Java Screen. Mas antes, eu vou estilizar o molusco ativo Hemotype dot active Dentro das rodadas, dentro do CalibrSF que, eu vou copiar essa seleção, e vou colá-la aqui, com os botões da aba o molusco ativo Hemotype dot active Dentro das rodadas, dentro do CalibrSF que, eu vou copiar essa seleção, e vou colá-la aqui, com os botões da aba dot active. Então, dentro das calices, eu quero mudar a cor de fundo desse botão Novamente, vou usar a propriedade do plano de fundo. Fundo verde. Eu vou definir esse estilo. Vamos adicionar a classe ativa usando Java strip a esses botões. Por isso, estilizamos nossas guias com sucesso. Agora precisamos estilizar a parte do conteúdo. Para isso, aqui usamos uma classe comum, que é o conteúdo do toque. Copie o nome da turma e toque em conteúdo. Então, dentro dessa tecnologia de estilo, vou selecionar essa classe, tocar no conteúdo e, dentro da resistência de cores, primeiro, vou fornecer uma cor de fundo ao nosso conteúdo de toque. Plano de fundo, e eu vou escolher a cor branca. Por quê? Além disso, vou fornecer o conteúdo desse toque. Que cinco e um pixel vermelho. Vou usar Saw como toque a. Vou definir esse arquivo e você poderá ver o resultado. Aqui você pode ver que as fotos estão quase em contato com a garrafa. Vou adicionar um pouco de preenchimento. Preenchimento, e eu vou usar preenchimento de 12 pixels. Em seguida, vou usar outra propriedade, que é a família de fontes, e vou usar a fonte aérea, aérea Além disso, vou fornecer uma linha alta, linha alta, linha alta, 21 pixels. Depois de definir esse arquivo, você pode ver o resultado. E agora quero que, sempre que carrego minha página, não quero mostrar nenhum conteúdo detalhado nesta página. Para isso, precisamos usar essa propriedade. Dessa forma, nenhum. Então, se eu carregar meu navegador, ele ocultará toda a guia. Deixe-me te mostrar. Ele esconde toda a parte do conteúdo. Essa é a primeira parte deste tutorial. Nesta parte, criamos o conteúdo e estilizamos nosso conteúdo. Na próxima parte, iniciaremos a tela Java. Então, obrigado por assistir a este vídeo. Fique ligado no próximo livro. Oi, pessoal. É bom ver você. Essa é a segunda parte deste tutorial. E neste setor, vamos iniciar nossa tela Java Em nosso tutorial anterior, concluímos a parte CSS do Stimulant deste projeto Então, vamos começar a tela Java. No final da tag profunda, vou pegar a tag Deep tap e disse essa tag de script, vamos iniciar nossa tela Java. Em primeiro lugar, precisamos adicionar alavancas a todo esse botão. Portanto, precisamos executar um loop de acordo com a faixa do botão. Aqui temos apenas três botões, então eu preciso executar um loop por três vezes. E usando Adicionar até mesmo ouvinte, vou adicionar um evento de clique a todo esse botão Então, primeiro, vou pegar uma variável, e nosso tipo capaz é Cs. Causa e nosso nome de variável é botão de guia botão de guia. Igual a aqui, vou focar em todas as tabelas. Você pode ver no botão, temos uma turma e depois uma tabela. Vou copiar o nome da classe, a tabela. E aqui, vou digitar a função de letra QoI do documento. Seletor de QoI A, e dentro das redondas, dentro do código único, vou passar as tabelas de nomes de classes dentro do código único, vou passar as tabelas de nomes de passar as 5. Guia Javascript, parte 2: Vou armazenar todas as tabelas nessa variável. E é o que vamos fazer nesta linha. E para essa matriz, vamos executar um loop. Então, aqui eu vou digitar e vou concorrer para. Eu disse que os vestidos redondos, vou atribuir uma variável onde eu seja igual a zero. Agora precisamos definir a condição, e eu quero executar esse I de acordo com a função Butter N. I e depois tab button dot N. I. Essa condição executará nosso loop três vezes. Vai acabar. Em seguida, precisamos incrementar a variável I. I plus plus, e depois de executar o loop, quero adicionar ClickEven a cada Para isso, primeiro, vou selecionar essa matriz, botão tab e, dentro da resina quadrada, quero direcionar o primeiro item da matriz encontrado para passar I. Depois de selecionar o botão, quero adicionar ouvinte Even, adicionar ouvinte par Agora eu quero adicionar ClickEven. Então, dentro do código único, vou digitar cling. Então, sempre que o usuário clicar nesse botão, eu quero executar uma função anônima. Então digite function, e é uma função anônima e uma semiconexão nesta linha Agora, sempre que o usuário clicar em qualquer botão , quero obter o valor do atributo do tipo de dados. Se eles elogiarem a guia , mostraremos o conteúdo da guia um. Da mesma forma, se eles elogiarem a guia três, mostraremos o conteúdo da guia três. Para isso, primeiro, vou abordar você muito bem nessa função em que o nome da variável é o nome da guia. Essa variável armazenará valor do atributo de dados igual ao primeiro, usaremos essa palavra-chave, que significa a guia exata em que o usuário está limpando no momento. Em seguida, precisamos pegar o valor do atributo de dados desse botão. Para isso, temos outro método chamado data. Venda de dados. E então precisamos mencionar o nome do conjunto de dados. E se eu mostrar o nome do meu conjunto de dados, que é tab. Então, aqui vou passar dot tab e semimo essa linha. Portanto, qualquer valor que ele armazene, ele será salvo na variável de nome da guia. E eu vou passar esse valor para criar esse seletor. Primeiro, vou usar o nome de uma variável, onde e o nome da nossa variável é tab quantum. Aqui vou passar o documento, obter o elemento por ID, qual ID? Qual é a variável do nome da guia de histórias? É o vestido redondo que vou passar pela aba Valuin e sem nesta linha Portanto, quando o usuário segmenta a guia um , precisamos segmentar o ID de conteúdo da guia um. Quero dizer que é usuário, clique na guia um e, em seguida, vamos ativar esse toque no ID do usuário, que é a guia um. Agora, depois de direcionar a guia Content IDing, precisamos adicionar essa propriedade de bloco a essa D. Para isso, vou digitar tab contain dot tile ensinado a propriedade, essa jogada, e quero alterar a vitória, igual a I want blog e semicon dois nesta linha Por padrão, em nossa seção CSS, adicionamos a propriedade nun em nosso conteúdo de toque Deixe-me te mostrar. A aerogacia em cada conteúdo de toque que usamos é a freira da propriedade Então, quando eu carrego meu navegador, o conteúdo não é visível em nosso navegador. Mas sempre que o usuário clica em qualquer botão, eu quero esse bloco de propriedades para que o usuário possa ver o conteúdo relacionado a essa guia. E agora precisamos fazer uma coisa. Se o usuário clicar em qualquer botão, precisamos adicionar uma classe ativa a esse botão e já estilizamos o botão ativo em nosso tutorial anterior. Então, aqui você pode ver, executamos um loop por botão. Portanto, precisamos adicionar uma classe ao botão específico. Para isso, precisamos usar essa palavra-chave. Este ponto, aqui precisamos usar o método de lista de classes, class is. A classe é ponto e função de adição. Dentro dos rounders, precisamos passar o nome da classe que está ativa e o semiground dois Vamos definir os cinco. Por enquanto, vou clicar na guia dois. Depois de clicar no toque dois, você pode ver o conteúdo para relitar no toque dois Além disso, você adiciona com sucesso o active plus a esta segunda etapa. É por isso que a cor de fundo do tipo dois se torna verde porque estilizamos active plus e definimos a cor de fundo verde. Da mesma forma, se eu clicar no toque três, você também poderá ver o conteúdo do toque três. Ao mesmo tempo, ele abre o toque dois e o toque três, e também adiciona a classe ativa na guia três, mas há um problema. Abrimos com sucesso nossa guia específica, mas não podemos ocultar a outra guia. Depois de abrir o toque três, o tipo dois deve ser agrupado . Ao mesmo tempo, mostra todas as guias necessárias para ocultar todas as guias inativas Para isso, precisamos selecionar toda a guia. Aqui, vou criar uma variável e nossa variável n é apenas todo o conteúdo da guia. Conteúdo de uma guia. Da mesma forma que vou segmentar toda a guia, vou digitar documento, ponto, seletor de consulta, tudo dentro do braço, vou direcionar toda a Para isso, vou usar o conteúdo da guia do nome da classe. Copie o nome da classe, toque em conter e eu vou colá-lo aqui. O toque com pontos contém. Defina nesta linha. Então, eu direcionei com sucesso toda a guia usando o nome da classe, toque em conter. Primeiro, quero ocultar toda a classe ativa desnecessária da guia. Então, eu quero essa linha e vou mudar o nome da variável. Um botão de guia. Para selecionar todos os botões, vou usar esse nome de classe, que é tabela. Esse é o contraste entre as abas para o nome da classe copta, e eu vou colá-lo O ponto do documento é uma tabela do Seletor A. Então, criei com sucesso duas variáveis, nossas primeiras variáveis armazenam todo o conteúdo do toque e nossa segunda variável armazena ou o botão da guia. Então, primeiro, vou executar um loop para o conteúdo, e vou executar aqui vou digitar nas prensas redondas, quero ficar feliz com uma variável E o nome da nossa variável é J, J com largura zero. Então, de acordo com o tamanho do conteúdo, precisamos executar um loop. Para isso, estabelecemos uma condição. J, menos do que tudo, toque na função de comprimento do conteúdo e ponto e código Além disso, precisamos incrementar a variável J, J mais mais. Primeiro, corremos para a guia um, depois tocamos dois e depois tocamos três. Então, dentro do loop, isso fará com que todas as propriedades de exibição sejam nulas. Alguns copiam a variável, todo tipo contém Is D querra diz, eu vou passar o V que é J. Como eu te disse, qui slc são todas as funções armazenam valor como Então, funcionou para uma matriz específica que eu digito uma por uma, e quero tornar a propriedade digital nun para o item específico Para isso, precisamos usar o estilo do método de estilo. Estilo de exibição de pontos. Propriedade distal igual a nun. Como emigrantes, dois neste slide. Quero dizer, ele mostrará o bloco específico de acordo com o botão ativo. Então, vamos configurar o arquivo e clicar em. Primeiro, vou clicar na guia dois. Como você pode ver, ele mostra dois conteúdos relacionados. Mas se eu elogiar o toque três, agora você pode vê-lo mostrar apenas o conteúdo relacionado ao toque três. Então, eu lidei com sucesso com a parte do conteúdo. E agora precisamos lidar com a parte da torneira. E agora precisamos remover a classe ativa da guia ativa. Então, novamente, precisamos usar outra sequência. Então, eu vou pegar essa parte, e precisamos seguir quase o mesmo processo. Primeiro, vou mudar o nome da variável. W K. Vou substituir J por K. E aqui também precisamos substituir o nome da variável Vou substituir o conteúdo da etapa pelo botão de guia porque, desta vez executo o loop de todos os botões da guia. E dentro da resistência quadrada, precisamos passar a variável K. E para remover a classe ativa, precisamos usar o método de lista de classes novamente. Vou copiar o nome da lista de classes e colar as classes Kd aqui. Precisamos usar a função oposta, que é o anel E eu quero remover a classe ativa. Copie o nome da classe e eu vou colá-lo aqui. Eu vou definir essa multa. Opa, remover é uma função. Aqui precisamos usar chaves redondas, não iguais ao seno. Portanto, corte essa classe ativa, e o melhor é uma chave redonda D. E eu vou configurar esse arquivo novamente. Vamos clicar em qualquer guia. Então, primeiro, vou clicar na guia três. Como você pode ver, o botão de toque três está ativo e também mostra o conteúdo relacionado da guia três. E agora vou clicar no segundo toque. Então, funcionou perfeitamente. Depois de clicar na guia dois, ele mostra o conteúdo relacionado ao toque dois. Também ative o botão toque dois e desative o botão guia três . Então, como funciona? A primeira vez removerá todas as vantagens ativas da guia. Depois disso, aqui você pode ver uma linha, clusst add cat. Esta linha adicionará act plus à guia específica em que clicamos atualmente. É por isso que você pode ver as propriedades de estilo act plus. Eu criei com sucesso nossa guia funcional e agora vou remover essa borda desnecessária. Aqui, vou remover essa borda. Basicamente, eu apenas comento esta linha e vou configurar esse arquivo novamente. Mas há outro problema. Quando eu recarrego meu navegador, primeira vez ele não mostra nenhum conteúdo da guia É apenas através de uma página em branco com botão. Mas quando o usuário abre o site pela primeira vez, quero mostrar o conteúdo da guia 1. Não quero mostrar uma página em branco. Para isso, precisamos adicionar alguma linha em Javaswek. Então, após o final dessas quatro linhas, aqui precisamos direcionar o conteúdo da guia. Eu quero escolher a primeira mesa. Então, aqui vou digitar o documento Dot, desta vez quero selecionar apenas um item específico. Vou usar o seletor de consultas, não o seletor de consultas ocioso Então você disse que a prensa redonda, aqui você precisa passar pela mesa. Basicamente, ela terá como alvo a primeira mesa apenas porque ela não usa Quisleor Por padrão, ele escolherá o primeiro aqui Vou aplicar o clade do método de clique Essa matemática clicaria no botão automático. Então, quando recarregamos esta página, ela clica automaticamente no primeiro botão Então, vamos configurar o arquivo e ver se ele funcionou corretamente em n. Então, após a etapa deste arquivo, pela primeira vez você pode vê-lo automaticamente ativo na guia um e, assim, no conteúdo da guia um. Em seguida, vou elogiar a guia três e, se for bem-sucedida, ativar a guia três e ocultar o conteúdo da guia um e , portanto, o conteúdo da guia três. Então, eu criei com sucesso uma guia usando Hess DML e Espero que você goste desse projeto. Obrigado por assistir a este vídeo, Agende um para o próximo projeto 6. Role o JavaScript para o tutorial principal: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo exercício relacionado ao JavaScript stem e CSS. E neste tutorial, aprenderemos como podemos criar o botão scroll to tub usando JavaScript. Como você pode ver na minha tela, eu abro uma página HTML e, na minha página HTML, é um texto puxado para cima E também, você pode ver no lado direito, temos uma barra de rolagem vertical. Então, sempre que eu desço um pouco essa barra, aqui você pode ver automaticamente um botão aparecer no canto inferior direito. E sempre que eu rolo para cima essa barra, ela se esconde automaticamente. Então, sempre que eu rolo muito para baixo e volto ao topo, nesse caso, podemos pressionar esse botão. Se eu pressionar este botão, aqui você pode ver que a rolagem funciona suavemente de volta ao topo Portanto, esse é o uso do botão de rolagem até o topo. Eu sei que você já está familiarizado com esse botão. Talvez usando esse botão em muitos sites. Sem perder seu tempo, vamos começar a prática e ver como podemos criá-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 Lib e já crio um documento SML chamado index dot DMM Se você notar, você pode ver no meu navegador não há barra de rolagem Está completamente vazio. No começo, vou pegar um parágrafo na minha tag corporal. Vou usar Ptag Em vez deste parágrafo, vou usar texto fictício, tipo de som, Lim, 1.500 caracteres Depois de configurar esse arquivo, você pode ver todo o texto no meu navegador. Agora eu quero exibir o botão nessa posição no canto inferior direito. Depois de abrir esse botão, ele vai rolar para cima na página do navegador. Para isso, vou usar um botão para marcar um parágrafo. Veja o parágrafo aqui, vou digitar um botão. Além disso, vou atribuir ID a esse botão. ID: role até o topo. Dentro desse botão, vou digitar GT e vou definir esse arquivo. Depois de configurar esse arquivo, se eu rolar para baixo no meu navegador, aqui você pode ver o botão, vá para. E agora precisamos estilizar esse botão. Para isso, precisamos usar CSS. Dentro da etiqueta principal, vou usar a etiqueta de estilo, Estilo. Aqui, vou estilizar esse botão usando esse ID. Vou copiar o nome do ID e vou amarrar a etiqueta no ID. Dentro do recesso de cores, vou usar a cor do nome da propriedade aqui vou passar a cor branca Por quê. Essa propriedade colorida é usada para encontrar cores Nossa próxima propriedade é o plano de fundo. Plano de fundo, e eu quero a cor vermelha. Vermelho. Nossa terceira propriedade é o acolchoamento. Preenchimento e eu quero preencher dez pixels de todas as direções Dez pixels. E agora eu quero corrigir esse botão na parte inferior. Eu quero consertá-lo no canto inferior direito. Para isso, vou usar a propriedade position, position fixed. E do fundo, vou pegar dez pixels. E do lado direito, também, vou pegar dez pixels. Além disso, quero que quando o usuário rotacione o cursor neste botão, quero o ponteiro do cursor Vou usar outra propriedade chamada cursor. Ponteiro do cursor. Agora, vamos configurar o arquivo e ver se ele funcionou corretamente ou não. Depois de definir esse arquivo, você pode ver o resultado no meu navegador. No canto inferior direito, você pode ver o botão, vá para cima, também pode ver que a posição está fixa. Acho que preciso mover esse botão um pouco para cima. De baixo, vou pegar 30 pixels. Avançando neste arquivo, você pode ver que agora ele se encaixa perfeitamente e agora eu não quero mostrar o botão got pela primeira vez Quando o usuário rola a página um pouco para baixo , quero mostrar esse botão. Quero dizer que, quando o usuário rola esta página 300 pixels para baixo , quero mostrar esse botão Para isso, quero usar essa propriedade. Display, nenhum. Após a etapa deste arquivo, como você pode ver, ocultamos o botão com sucesso e agora precisamos iniciar o script Java. Então, depois da tag do botão, e eu pego a tag do script, scrap Primeiro, precisamos adicionar um evento a essa janela. Primeiro, precisamos pegar a posição YXS dessa barra de rolagem Então, aqui precisamos usar o evento scroll. Então, para digitar window, dot, adicione event Disener dentro do vestido redondo, dentro do curso de cantora, o nome do evento e o nome do evento é scroll Então, quando o usuário rola a barra de rolagem, eu quero executar uma função anônima. Então vírgula, vou digitar a função. Além disso, você pode usar a função de seta aqui. Eu gostaria de usar a função de seta. Depois de Run brcs, vou usar o sinal de seta. E agora precisamos pegar o scroll l. Para isso, precisamos usar um método, que é pageY oposto Antes de usá-lo, vou mostrar no meu console. Aqui vou digitar console dot log I na página da janela Rounds Yosite E semigo essa linha. Pronto para configurar esse arquivo. Se eu mostrar minha seção de console no meu navegador, agora você pode vê-la gravada em um valor, que é 221 O valor mostra o quanto já estamos rolando a página Se eu mover essa barra de rolagem para cima, agora você pode ver que o retorno é zero E se eu mover essa barra de rolagem para baixo, agora você pode ver Instantâneo 746. Se você está familiarizado com o JavaScript Dom , sabe como ele funciona. Agora eu quero que quando o usuário cruze o valor de 300, então eu quero mostrar o botão nesta posição. Para isso, precisamos usar o mesmo método com a condição p. Então, eu quero remover o log de pontos do Coso e vou substituí-lo pela instrução IIP Em Window dot, page dot Yost, maior que 300, insira a condição IP, quero mostrar esse botão Para isso, primeiro, precisamos direcionar esse botão. Em vez dessa tag de script, vou pegar uma variável e declarar a variável com a palavra-chave const. Cs e o nome da nossa variável é botão de rolagem. Botão de rolagem. Botão de rolagem, igual ao ponto do documento, seletor de consulta. Dentro dos vestidos redondos, vou selecionar esse botão usando o ID. Eu copio o nome do ID e arredonde para colar, marquei rolar para cima e semi neste slide Vou direcionar esse botão usando essa variável. São as cores, vou digitar, então vou digitar, botão de rolagem, vou usar o método de estilo, estilo de ponto, exibição igual aos códigos duplos. E siga dois nesta linha. Quando estiver na página, role 300 pixels para baixo na direção YX e, em seguida, aparecerá o bloco de propriedades de exibição neste botão Além disso, se for menor que 300 pixels, quero ocultar esse botão. Nas partes s, o calibre é, vou usar essa afirmação Exibição em estilo de bits de rolagem igual a nenhuma. Se o valor for maior que 300, ele mostrará o botão. E se a condição não for verdadeira, ela ocultará o botão. Vamos configurar o arquivo e ver se ele funciona corretamente ou não. Suprima a etapa deste solo, você pode ver o botão. Mas se eu rolar esta página para cima, o que acontece? Como você pode ver, quando o valor é menor que 300 , nosso programa aperta esse botão. Agora eu quero que, quando o usuário clica nesse botão , nossa barra de rolagem se mova automaticamente Para isso, primeiro, precisamos adicionar uma curvatura clicável a esse botão Novamente, vou usar a adição ouvinte a essa variável, ou seja, botão de rolagem Quero digitar botão de rolagem, ponto, adicionar ouvinte de eventos e quero adicionar evento de clique, clique Depois de usar o evento de clique, quero chamar a função anônima e aqui vou usar a função de seta. Então, de repente, alias, aqui vou rolar este quindo No entanto, o usuário clica nesse botão, eu quero mover essa barra de rolagem Para isso, vou usar um método chamado scroll two. Vou digitar Window dot, rolar dois. Então você disse que as prensas redondas e, dentro das roupas coloridas, aqui precisamos mencionar o quanto eu quero rolar esta página Aqui eu vou passar o top bello zero, top colon zero. Se você quiser adicionar transição a esse movimento, sim, você pode. Mas antes de definir esses cinco, vou elogiar o botão Got. Quando eu elogio o botão de ir para, como você pode ver instantaneamente nossa barra de rolagem foi movida para a posição zero, mas não há maneiras fáceis de fazer essa transição Para isso, precisamos usar outra propriedade e o nome da propriedade é comportamento Temos aqui dentro os códigos duplos e aqui a válvula lisa lisa. Vamos configurar o arquivo e ver o resultado. Depois de definir esse arquivo, vou mover essa barra de pontuação para baixo Agora você pode ver o botão de inicialização. Se eu clicar nesse botão, agora você poderá ver a transição. Nossa barra de pontuação se move para a posição zero e também para uma bela transição. Eu criei este exercício com sucesso. Primeiro, inserimos o evento de pontuação nessa janela e definimos uma condição. Se o valor de Y alterar o valor maior que 300 , mostre o bloco de propriedades de exibição e, se a condição não for verdadeira, mostre a propriedade de exibição nenhuma. Em seguida, adicionamos o evento de clique a esse botão. Sempre que o usuário clica nesse botão, ele percorre a janela e pára na posição definida No nosso caso, top zero. À medida que adicionamos comportamento para transição, o que é suave. Isso é tudo para este tutorial. Fique ligado no próximo tutorial. Espero que você goste desse tutorial. Obrigado por assistir a este vídeo. 7. Tutorial de cabeçalho adesivo JavaScript: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial e relaciono JavaScript, TML e CSS Hoje, neste tutorial, vamos criar um cabeçalho fixo. Aqui você pode ver um arquivo no meu navegador e ele está cheio com algum conteúdo. Aqui você pode ver uma queda que ocupa um cabeçalho adesivo. Antes dessa profundidade, temos algum parágrafo, e depois dessa profundidade, temos outro parágrafo. Sempre que eu rolo minha página, como você pode ver, esse cabeçalho fica no topo Quero dizer isso profundamente fixado na parte superior e também aumentar a largura e adicionar uma pequena sombra na caixa. Ao contrário, se eu rolar para cima nesta seção, agora você pode ver que ela caiu em 20%. Este é o exemplo de cabeçalho fixo. Vamos começar a prática e ver como podemos criá-la. Como você pode ver, lado a lado, abro meu editor de código is studio e meu navegador usando a extensão lip server, e já crio um documento HTML chamado index dot HTML. Primeiro, vou adicionar um parágrafo em nossa tag corporal. Então, He MoonotypeP dentro dessa tag body, e dentro dessa tag de parágrafo, vou adicionar M 2000 subarquivo, como você pode ver, ele tinha DamiParagraph em Depois da tag de parágrafo, adicionarei uma tag dip, B, e também atribuirei uma ID à tag Zip ID igual ao cabeçalho. Dentro dessa etiqueta de mergulho, vou digitar um cabeçalho adesivo. Agora vamos estilizar esta página. Dentro da etiqueta principal, vou usar a etiqueta de estilo, estilo. Dentro da tag de estilo, primeiro, vou estilizar a tag body, o corpo dentro CuliaO. O nome da primeira propriedade é a família da fonte Quero alterar a família da fonte e vou usar a fonte aérea Nossa próxima propriedade é a margem. Não quero definir nenhuma margem. Vou ultrapassar a margem zero. Eu vou dizer esse arquivo. Agora, quero adicionar um pouco de preenchimento a este parágrafo. Para isso, vou vender a etiqueta P. A tag de parágrafo é o preenchimento de cores zero. De cima para baixo, quero dizer preenchimento zero, e da esquerda e direita, vou dizer preenchimento Vou configurar esse arquivo. Agora vou estilizar o cabeçalho D. Esta seção, cabeçalho fixo. Para isso, vou criar o cabeçalho da tag iDHS. Em seguida, dentro dos clivores ou primeiro nome da propriedade está o plano Plano de fundo, e eu quero fundo de cor vermelha. Vou configurar esse arquivo. Agora eu alinho esse centro de texto desse D. Para isso, você precisa usar outra propriedade que é alinhamento de texto Texto, alinhe o texto, alinhe o centro. Com isso, quero aumentar o tamanho da fonte. Tamanho da fonte 20 pixels. Em seguida, vou mudar a fonte com fonte em negrito. Eu quero usar fonte em negrito. Além disso, vou atribuir altura a esse cabeçalho adesivo. Então, digite a altura, 50 pixels com 80%. E agora eu quero centralizar esse D. Para isso, vou usar a propriedade de mesclagem Margem, de cima para baixo, vou usar o valor zero, e da esquerda e da direita, vou usar o valor automático. Ele vai alinhar esse contêiner no meio desta página. Depois de configurar esse arquivo, você pode ver o resultado. E agora, quando percorro esta página, quero parar essa parte do stickhader no topo desta Por enquanto, como você pode ver, não temos nenhum conteúdo abaixo do stickhader D. Então, precisamos adicionar algum conteúdo fictício para Vou adicionar outro parágrafo a essa tag D. P. E neste parágrafo, vou usar quase 1.500 palavras, Lem 1.500 Depois de definir este arquivo, e agora podemos rolar esta página, também o cabeçalho adesivo. Sempre que eu rolar meu navegador ou a seção de mergulho com cabeçalho adesivo, não fique na posição superior Quero colocar essa parte do cabeçalho no topo desta página. Eu quero consertá-lo na primeira posição. Para isso, precisamos usar JavaScript. Aqui eu vou usar o script de tag Script. Em seguida, insira essa tag de script. No início, precisamos colocar o YX Val Sticky de cabeça no fundo. Quero calcular a posição do YXS a partir do topo. Em primeiro lugar, precisamos selecionar esse adesivo com a cabeça profunda. Quero digitar const e declarar uma variável, e nossa variável n é Cabeçalho igual ao documento, ponto do documento, seletor Quiri, dentro da circunferência dentro do percurso da porta, vou selecionar a profundidade usando sua etiqueta iDHS, cabeçalho vou selecionar a profundidade usando sua etiqueta iDHS Em seguida, escaneie este slide. Eu direcionei o cabeçalho com sucesso. Em seguida, vou pegar outra variável Cs e nossa variável é fixa e vou usar a abreviação da variável atiaTS para armazenar o valor superior oposto Aqui estou digitando header dot OostetPen slide. Agora, vamos trazer a variável nosso console e ver qual valor obtemos. Então, para digitar, console, registre pontos dentro das prensas redondas e o valor fica fixo Eu chamaria a variável fixa de subgin nesta linha. Se eu definir esse arquivo e mostrar minha seção de console, inspecione o Console. Agora você pode ver o valor. Está escrito 4.180. Do topo, nossa distância fixa é de 4.118. Agora eu quero obter o valor de deslocamento Y quando o usuário rola a página Para isso, vou usar o objeto Window. Janela, ponto, adicione até mesmo ouvinte. Depois, dentro dos vestidos redondos, e aqui eu quero chamar um evento com o nome de Stroll Dentro do código único, vou digitar strong e também quero chamar a função anônima aqui vou usar a função de seta. Parêntese, operador de seta. E aqui eu quero extrair o pergaminho Y OsteVL. No começo, vou imprimir no meu console, console , ponto, registro. É o ponto arredondado da janela, página YSiteVl Desculpe, Y oposto, não X oposto Então, se eu definir esse arquivo e mostrar meu console, agora você pode ver que nosso usuário já rolou 3.909 Se eu rolar um pouco para cima, como você pode ver, o valor está diminuindo. Agora é a impressão 3.709, agora precisamos definir uma condição Se o YFS for maior que SDK significa variável fixa, então pare essa barra de cabeçalho fixa nessa Quero dizer se a condição foi escrita como verdadeira e, em seguida, fixe a barra de cabeçalho adesiva nessa posição Primeiro, vou remover o console dot blog e aqui vou dizer p condition. Se o phy oposto da janela for maior que variável ST, então, dentro da classe, primeiro, precisamos direcionar esse cabeçalho, e eu já o direcionei. Vou usar esse nome de variável cabeçalho, cabeçalho e quero adicionar uma classe a esse cabeçalho dip. Vou usar outra lista de classes de nome de método. Dot, você já está familiarizado com esse método? Lista de classes, e eu quero adicionar uma classe e o nome da classe permanece. Vou usar a função at, adicionar dentro das prensas redondas, dentro do código único o nome da nossa classe O ergon nesta linha. Na parte, precisamos remover o nome da classe se a condição não for verdadeira. Em suas condições, então, dentro da cor res está aqui, vou usar a mesma linha. Eu copio essa parte e vou colar aqui. Desta vez, quero remover essa classe fixa, vou usar a função de remoção Vou substituir Adicionar por remover. Então, quando os usuários pararem essa página, ela verificará o valor oposto Se o valor oposto for maior que esse cabeçalho, nossa condição adicionará uma classe a esse D e o nome da nossa classe será fixo. Se a condição não for verdadeira, ela também removerá nossa classe do cabeçalho D. Agora precisamos estilizar essa classe em nosso CSS. Vamos para a seção de estilo. Aqui vou digitar dot sticky. Em vez dos aliases, primeiro, vou usar uma propriedade chamada position position fixed Nossa próxima propriedade tem melhor valor do topo, vou usar zero. Com isso, quero estender a largura dessa largura D, 100%. Com isso, vamos usar um pouco de sombra de caixa. Então, para digitar box shadow box shadow. Da direção de x, eu vou passar zero pixel. Da direção de x, vou pegar dois pixels. Além disso, quero bloquear essa sombra de caixa. Vou passar quatro pixels e a cor da sombra da nossa caixa é cinza. Vamos configurar o arquivo e rolar a página. Vamos rolar a página. Ei, é trabalho, mas não é perfeito. Porque precisamos selecionar essa classe fixa com o ID do cabeçalho Então, para copiar o ID do cabeçalho. Isso significa que se nosso cabeçalho tiver essa classe fixa, aplique esse CSS Vamos configurar o arquivo e rolar o navegador novamente. Depois de rolar o navegador, como você pode ver, agora ele funciona perfeitamente. Primeiro, ele coloca nosso cabeçalho no topo dessa posição e, em seguida, estende a largura dessa seção de cabeçalho. Agora é completamente cem por cento. Mas antes, é 80% e também adiciona uma pequena caixa de sombra Bilo. Agora, vamos abrir a seção de elementos para limpá-la. Aqui você pode ver no cabeçalho adesivo atribuir uma classe chamada sticky Mas sempre que a condição falha, ela remove o nome da classe. Novamente, se a condição for verdadeira, ele adiciona vidro adesivo e, se a condição falhar , ele remove o nome da classe É assim que podemos criar cabeçalhos fixos usando JavaScript. Obrigado por assistir a este vídeo. Fique ligado no próximo exemplo. 8. Tutorial de menu lateral em Javascript — parte 1: Olá, pessoal, é bom ver vocês lá. Mais uma vez, estou de volta com um novo projeto relacionado a JavaScript tamel e CSS Neste tutorial, vamos criar um menu lateral. Como podemos criar um menu lateral usando JavaScript. Aqui você pode ver nesta página em nossa seção de cabeçalho no canto superior esquerdo, temos um botão chamado menu. Se eu clicar nesse botão, você poderá ver a barra de menu lateral. Se você clicar nesse botão novamente, ele ocultará a barra de menu lateral. Além disso, você pode ver que adicionamos uma pequena animação a essa barra de menu. Vamos ver como podemos criar esse menu lateral. Sem perder seu tempo, vamos estudar de forma prática. Então, como você pode ver, lado a lado, abro minhas viseiras no seu editor de código e no meu navegador usando a extensão Lifesaver, e já crio um nome de documento TML com o nome de um documento TML, já crio um nome de documento TML com o nome de um documento TML E como você sabe, hoje neste projeto, vamos criar um menu lateral de JavaScript. Então, vamos começar. No início, dentro da etiqueta corporal, vou inserir D e nosso ID de desenvolvedor é Min. Então, vou amarrar o Dev e atribuir um ID Min. Em seguida, insira isso profundamente, eu vou pegar um botão e em uma lista de pedidos. Aqui eu vou atribuir um botão. Com isso, vou atribuir um ID a esse botão, Hastag, e nosso nome de ID é E dentro desse botão, vou digitar um texto, e nosso texto é para homens. E antes do Minutext, quero mostrar um ícone de hambúrguer Para isso, vou usar um código. Aqui, vou usar um código de entidade HTML para mostrar o ícone Min. Então, aqui, vou digitar N person sign, hastExsgn e o código é 79 double 76, e então semi Esses são os códigos de entidade STM. Se você não estiver familiarizado com isso, pode pesquisar no Google. Então, vamos configurar o arquivo e ver se funcionou ou não. Após a etapa deste arquivo, você pode ver o resultado. Criamos com sucesso o botão Menu com o CN e agora vou fazer uma lista nodal UL, e também vou atribuir uma ID a essa lista nodal e a ID é a lista de menus E dentro dessa lista de menu, vou pegar três listas desordenadas, AI, multiplicar por três dentro da lista não ordenada, vou pegar uma nga tang, algum tipo A. Se eu pressionar NTA, como você pode ver, aqui você pode ver, temos três Por padrão, editor de código do estúdio de resultados, vem com Amit. Eu uso esse atalho Se o seu editor de código não suportar Amit nesse caso, você precisará digitá-lo manualmente Dentro desse editor de código, vou adicionar algumas tomadas malditas Item um. Vou copiar este e vou digitar o item dois. Ao digitar o item três, vou configurar esse arquivo. Agora precisamos estilizar esse menu. Dentro da etiqueta principal, aqui vou usar a tag de estilo. Dentro dessa gravata , primeiro, vou selecionar o corpo inteiro. Vou digitar body tag, body. Dentro dos cálices, primeiro, vou atribuir uma fonte básica a toda esta página Fonte, família e eu vou usar a antena. Então eu vou usar outra propriedade que é a margem. Eu quero terminar toda a margem. Margem, zero. E agora precisamos estilizar o menu D Haztag men. Dentro do alive first, vou atribuir a cor de fundo, fundo e vou usar a cor vermelha ao fundo vermelho. Além disso, vou atribuir peso a esse D, nós cem por cento. Além disso, vou atribuir altura, altura de 35 pixels. Nossa próxima propriedade é posição, posição fixa. Como você sabe, estamos criando um menu lateral. É por isso que precisamos de uma manobra fixa e também precisamos mencionar a posição fixa Eu quero digitar top zero. E agora eu vou configurar esse arquivo. Para configurar esse arquivo, agora você pode ver o principal. Se você notar, pode ver que nosso meno não está no centro vertical, então vou adicionar outra propriedade para centralizá-lo verticalmente, e o nome da nossa propriedade é altura da linha Altura da linha, altura da linha. Além disso, vou adicionar 35 pixels. Se eu definir esse arquivo, agora você pode ver nosso meno está no centro vertical E agora vou estilizar esse manlis. Eu copio a lista de homens de nomes de identificação e vou selecionar esta. Tem uma etiqueta, Mnulis. Então, dentro da classe vou atribuir a margem do lado esquerdo Quero digitar margin, P e vou passar dez pixels e vou definir esse arquivo. Agora precisamos estilizar o Mntble Min. Copie o nome do ID, Minutugle, e eu vou selecionar a hastag Minutagal dentro do civ diz, aqui vou usar margem Margem P margem p hastag Minutagal dentro do civ diz, aqui vou usar margem Margem P margem p pixel fino. Se eu definir esse arquivo, como você pode ver, ele fornece pouca margem. Isso adiciona uma pequena margem ao nosso botão de menu do site b. Agora precisamos estilizar a lista de desordenação. Para isso, precisamos selecionar esse ID, que é Mnlist. Eu copio a lista de nomes de ID e vou selecionar em nossa seção de estilo Lista de homens. Dentro do Caliss para esta lista de menu, vou usar uma cor de fundo transparente Vou usar a propriedade background, background e, para torná-la transparente, precisamos usar o valor Alpha. Vou digitar o valor RGV, RGBA. Vou usar o valor quatro vermelho. E verde Value 53. Valor azul 151. Para transparência, vou usar o valor Alpha de 0,95 Se eu definir esse arquivo, você poderá ver o resultado. Agora precisamos atribuir a altura de Wen a essa lista de menu. Nós e eu vamos ultrapassar 250 pixels. Nossa próxima propriedade é altura, altura, 100 VH. Esse valor usará 100% da altura do voto de visualização. H significa ver altura do voto, e agora precisamos remover o ponto seno dessa lista de pedidos Para isso, precisamos usar uma propriedade, e nossa propriedade é list, List , style, is tile none. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, vou usar preenchimento e margem zero, preenchimento zero Também margem zero. Vou configurar esse arquivo. Agora precisamos mudar a cor fixa da tag nga Precisamos torná-lo branco e também remover o sublinhado Para isso, precisamos selecionar as etiquetas Anca da lista de homens. Aqui digite menise, então precisamos selecionar todo o portão, A. as cores forem, primeiro, eu quero usar a cor da fonte branca Cor, branco. Eu quero definir este arquivo, se você quiser remover o sublinhado para isso, você precisa usar outra propriedade que seja decorada Precisa de decoração, nenhuma. Agora eu quero um pouco de preenchimento do lado esquerdo deste item Com isso, quero dividir o anel com sublinhado significa borda Para isso, você não estilizaria a etiqueta LI? Dentro do analista eles amarram, tem uma etiqueta, manlis todo o LI, dentro do manlis, então primeiro, primeiro, eu vou adicionar Acolchoamento, 20 pixels. Desculpe, eu não quero continuar partindo de toda a direção. Eu quero manter o preenchimento do lado do lábio, SimultPadding, isso. Estofamento iluminado, 20 pixels. Se dividido, vou usar a propriedade border bottom. Borda inferior inferior, um pixel, e eu quero uma borda sólida. O engarrafador é branco. Se eu definir esse arquivo, você poderá ver o resultado. Agora precisamos animar esse menu. Sempre que clico nesse ícone de menu , quero mostrar o menu. Ao mesmo tempo, se eu clicar no ícone do menu novamente, quero ocultar esse menu. Para isso, vou usar animação, animação slide in e animação de slide out. Para isso, precisamos adicionar uma classe ativa a esse minuto. Na primeira vez, se eu clicar nesse botão de menu, ele adicionará uma classe ativa. Na segunda vez, se eu clicar neste Minuton, ele removerá o sinal ativo de adição Para isso, precisamos usar JavaScript. Na próxima parte deste tutorial, usaremos JavaScript. Obrigado por assistir a este vídeo, fique ligado na próxima parte 9. Tutorial de menu lateral em Javascript parte 2: É bom ver vocês. Esta é a segunda parte deste tutorial e, nesta parte, vamos animar esse botão Quero mostrar esse menu lateral quando clico pela primeira vez no MinVcle e também ocultar o menu lateral se eu clicar nele novamente Aqui eu quero usar animação deslizante e deslizante. Para isso, precisamos usar a classe ativa nesta seção. Precisamos inserir a classe ativa na tag UL. Na primeira vez, você adicionará a classe ativa e, na segunda vez, removerá a classe ativa. Como você sabe, para isso, precisamos usar JavaScript. Depois da tatuagem profunda, vou usar a tag Script. Dentro da tag de script, primeiro, quero direcionar esse botão porque precisamos aplicar o evento de chute a esse botão. Para isso, vou criar uma variável e declarar essa variável usando a palavra-chave const. Cs e o nome da nossa variável é Menu toggle. Botão de menu igual a aqui Eu quero direcionar este botão. Para isso, precisamos digitar o seletor Coy do documento. Dentro do código único, precisamos passar o ID. Então, para copiar o nome do ID, clique em Menu Toggle. Tem tag, tag de menu e semícone nesta linha. Com isso, também precisamos criar um seletor para a tag UL porque precisamos ocultar e mostrar a lista de desordenação Basicamente, vou duplicar essa linha e vou alterar o nome da variável Menu list Seletor de ponto O do documento aqui vou passar esse ID, lista de menus Então, aqui eu seleciono com sucesso o botão e retiro da lista. Em seguida, você precisa adicionar um método a esse botão, que é addEvenListener, e usando-o, eu quero chamar Aqui vou digitar Mnutogle Mnutoggle Aqui eu vou ligar, clique em Tipo de evento, clique em. Então eu vou chamar a função anônima, e aqui vou usar a função de seta. Operador de seta de parêntese. Então, nas bobinas dessa lista inusitada, eu quero adicionar eu quero Para isso, aqui, precisamos usar essa variável, lista manual. Lista de menus. Lista de menu, para adicionar uma classe, precisamos usar o método de lista de classes. Lista de turmas. Desta vez, vou usar a função de alternância. Agora a questão é: qual é o uso da função Toggle Esse método funciona como uma chave seletora. Se eu clicar na primeira vez, ele adicionará a classe, e se eu clicar na segunda vez, ele removerá a classe. Em vez das redondas, precisamos fornecer o nome da classe e o nome da nossa classe está ativo Agora vamos configurar o arquivo e abrir a seção do console. Inspecione os elementos. Vou selecionar este botão Min. Aqui você pode ver em nossa lista de menu, há uma aula. Se eu clicar nesse botão de menu pela primeira vez, ele adicionará uma classe chamada ativa e, se eu puder clicar nesse botão mano pela segunda vez, ele removerá a classe Este é o uso da função de alternância. E agora é hora de estilizar o ativo plus. Copie o nome da classe ativo e eu vou voltar para a seção de estilo. Então, dentro da tag de estilo, vou selecionar esse nome de classe ativo. Aqui precisamos criar um sono assim. Quando em nossa lista de homens, adicionamos uma classe ativa, então eu quero estilizar essa classe ativa. Esse estilo é para quando adicionamos a adição ativa. Além disso, precisamos criar o sono para quando removermos a vantagem ativa Vou duplicar esta seção e aqui vou usar manlis e vou usar PostoClass Colon naught. Então, em vez de pressionar a rodada, vou passar o nome da classe que está ativa Aqui, criamos dois seletores diferentes. Minista com classe ativa ou minista sem classe ativa. Agora precisamos animar essa seção do menu. Para isso, vou criar duas animações diferentes. Aqui, vou pegar os quadros-chave nos quadros-chave d e o nome da nossa animação é slide in Luz. Então, dentro do calibre no início desta animação, 0% está no clívus está Aqui eu vou usar a propriedade de transformação. Transforme, traduza X, traduza X. Na posição zero, quero remover todo o menu desta página, pois aqui vou usar -100% Mencionamos essa posição inicial dessa animação. Agora precisamos mencionar a posição em vigor. Em 100%, eu quero o trânsito X na direção Zn. Vamos nos referir à posição padrão. Com isso, precisamos criar outro quadro-chave para ocultar a lista do menu Novamente, vou selecionar essa seção e duplicá-la. Desta vez, o nome da nossa animação é slide out. Então, vou apenas inverter o valor -100% e, para começar, quero dizer 0%. Eu vou sentar às cinco. Nossa primeira animação é mostrar a seção do menu e nossa segunda animação é ocultar a seção do menu. Vou usar essa animação dentro desses seletores. Quando usamos a classe ativa, quero chamar essa animação de slide in. Eu copio o nome da animação e aqui vou usar a propriedade de animação. Animação, nosso nome de animação é deslizante e, em seguida, precisamos mencionar a duração da animação Eu quero rodar essa animação por 0,3 segundo. Em seguida, precisamos definir o movimento da animação que está entrando e saindo. Quando usamos a classe ativa, eu quero executar essa animação. Da mesma forma, precisamos fazer a mesma coisa para a classe não ativa. Copie essa linha e na calva eu vou colar aqui Aqui, vou remover o nome da animação deslizante e substituí-lo por uma animação deslizante. Deslize para fora. Por fim, precisamos mencionar o modo de filme de animação, que é avançado. Se usarmos o valor avançado, depois de concluir a animação, ela não chegará à posição inicial. Então, agora vamos raspar o arquivo e ver se ele funcionou corretamente ou não Depois de submeter esse arquivo, como você pode ver, ele percorre a seção do menu Isso significa que o active plus não está incluído em uma lista de pedidos. Então, se eu pensar nesse ícone de menu novamente, agora ele adicionará a adição ativa. Deixe-me te mostrar. Como você pode ver na animação, isso significa que ela adicionou o plus ativo com sucesso. Usando a função de ferramenta, primeiro adiciona classe ativa e depois remove a classe ativa. Deslizando, deslizando para fora, deslizando, deslizando para fora. Agora você pode adicionar conteúdo ao seu site. Vamos adicionar um pouco de conteúdo a esse tanque profundo. Então, depois da seção principal, vou adicionar um parágrafo, P, e quero adicionar quase 2000 WADOParagraph Lim, 2000. Eu pressiono este arquivo, aqui você pode ver o resultado. Aqui você pode ver muitos textos contidos nesta página. E se eu clicar nesse ícone do meno, você pode ver o resultado. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 10. Tutorial do controle deslizante de imagem em Javascript parte 1: Olá pessoal. É bom ver você de volta. Mais uma vez, estou de volta com o novo projeto RelatetTable, CSS e E hoje, neste projeto, vamos criar um controle deslizante Como podemos criar um controle deslizante. Como você pode ver na tela, criamos um controle deslizante muito básico Se eu elogiar o próximo botão, como você pode ver, ele mudou a imagem com pouca animação. Se eu clicar no botão Avançar novamente, você poderá ver a próxima imagem. Da mesma forma, se eu elogiar o botão anterior, você poderá ver a imagem anterior com animação. Mas se eu clicar no botão Avançar, esta é a nossa imagem de Lust. Então, novamente, eu clico no botão Avançar, como você pode ver, está de volta à primeira imagem. Da mesma forma, desde a primeira imagem, se eu elogiar o botão anterior, agora você pode ver que ele está de volta à imagem ust. Esse é um controle deslizante muito normal e básico, mas pode dar uma ideia de como podemos criar belos controles deslizantes Sem perder seu tempo, vamos começar de forma prática. 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, você pode ver no meu diretório de trabalho atual, que temos que calcular três imagens JPG de 01 ponto, JPG de 02 pontos e JPG de zero ponto. Então, primeiro, precisamos criar um contêiner dentro da tag body. E para esse contêiner, vou atribuir uma classe, e o nome da nossa classe é contêiner deslizante Recipiente deslizante profundo. E dentro desse contêiner, vou atribuir outro D. E nesse mergulho, vou atribuir uma classe chamada slider, deep dot slider E agora vou importar imagens. Para isso, vou usar a tag profunda, não a tag de imagem. Então amarre Deep dot e o nome da classe é slide. E aqui, vou usar a propriedade de estilo para importar a imagem. Tag de estilo e dentro dessa tag de estilo embutida, vou usar um plano de fundo de nome de propriedade Antecedentes e eu vou fornecer um URL. Dentro dos vestidos redondos, vou fornecer o link da imagem, que é JPG de 01 ponto. Da mesma forma, precisamos inserir outra imagem. Para isso, vou duplicar esta seção. Próton. Esta é a imagem número dois e a última é a imagem número três. Para três imagens, criamos três tags profundas diferentes. Agora precisamos acessar o botão de navegação para controlar o controle deslizante Para isso, aperte o controle deslizante. Aqui, vou pegar outra tag profunda, Dev dot, e vou usar o controle deslizante do nome da classe E dentro do controle deslizante, vou pegar dois botões No primeiro botão, vou digitar o segundo botão, vou digitar em seguida. Também vamos atribuir o nome da classe a esses botões. No primeiro botão, vou atribuir slide anterior, slide de repetições, slide Um segundo botão, vou atribuir o próximo slide de mesa. Como eu disse, vou criar um controle deslizante simples. Entregamos uma peça estável. Agora precisamos entrar na seção de estilo. Dentro da tag principal, vou usar a tag Style. Estilo. Mas antes de começar a estilizar, vou definir o arquivo Após a etapa do arquivo, como você pode ver no meu navegador, temos apenas dois botões, o botão anterior e o botão próximo. Mas se você perceber que pode ver, não consegue ver nenhuma imagem em nosso navegador. Porque aqui usamos propriedade de fundo para exibir imagens. Mas não atribuímos nenhuma largura elevada. É por isso que não podemos ver a imagem de fundo. Quando eu estilizo este slide , você pode ver a imagem de fundo. Inicialmente, vamos estilizar o contêiner deslizante. Então, copio o contêiner deslizante do nome da classe e volto para a seção de estilo contêiner deslizante de pontos dentro do cli res é o primeiro atribuído a este contêiner, com e aqui vou pegar 800 pixels E para o trigo, você pode ganhar sua própria vitória. Não é obrigatório. E também vou pegar uma borda para esse contêiner. Borda de um pixel, e eu quero borda sólida e quero uma cor de fundo preta, 000 Depois disso, precisamos estilizar esse contêiner. Slide, copie o nome da classe. E aqui, vou selecionar controle deslizante de pontos e dentro da resistência de cores, e aqui vou usar a propriedade display, display e eu quero flix porque quero todas as imagens dentro do contêiner do controle deslizante Quero colocar todas as imagens em uma única linha horizontal. E agora precisamos estilizar a seção de slides. Eu copio o slide do nome da classe e vou selecionar o slide de pontos. E dentro da resistência de cores, aqui vou usar a propriedade flex Flix. E usando a propriedade flex, vou atribuir wed a este slide No início, vou atribuir valor ao encolhimento e ao crescimento. Reduza o valor zero, aumente o valor também zero e o valor baixo 100%. Além disso, vou medir a altura, altura do slide , quase 400 pixels. E para todas as imagens, vou definir o tamanho do plano de fundo Cooper Tamanho do fundo Cobre. E também precisamos mencionar a posição do plano de fundo, posição do plano de fundo, e eu quero posicioná-la no centro. Então, vamos configurar o arquivo e ver o retorno da festa. Hierogacia no meu navegador, ela alinha com sucesso nossas imagens horizontalmente. Como eu uso a propriedade display flex, é por isso que ela alinha horizontalmente Em seguida, precisamos estilizar os controles. Para isso, precisamos selecionar essa classe, controles deslizantes. Eu copio os controles deslizantes do nome da classe e, dentro da tag de estilo, vou selecionar este E, falando bem, eu quero colocar esse centro de controle dessa imagem. Para isso, vou usar a propriedade de posição, aplicativos de posição e, de baixo, vou pegar 20 pixels e, do lado esquerdo, vou fornecer 50%. Então, como você pode ver, usamos valor absoluto e queremos colocar esse botão de navegação dentro do contêiner deslizante É por isso que precisamos fornecer o valor da posição ao contêiner deslizante Então, aqui eu vou usar a posição do nome da propriedade, posição relativa. Então, se eu definir esse arquivo, como você pode ver, ele reproduz o botão de navegação acima da imagem. E agora eu quero um pequeno espaço entre esses dois botões. Para isso, estilize o slide anterior e crie um botão de slide. Copiamos o nome da turma, slide anterior e a barra para manter a turma. Ponto, slide anterior, vírgula no próximo slide. Então, dentro da lista aqui, vou usar a propriedade de margem Margem. De cima para baixo, vou pegar zero e da esquerda e direita, vou pegar dez pixels. Então, se eu definir esse arquivo, como você pode ver, ele fornece uma pequena lacuna entre o botão. E se você quiser pressionar este botão de navegação para esquerda e para a direita, sim, você pode. Agora, vamos reduzir a largura desse contêiner principal para ajustar essa imagem. Então eu vou fazer com que seja 750. Para interromper esse arquivo, agora você pode ver nossa imagem se ajusta perfeitamente em nosso contêiner. Além disso, você pode notar que nossos botões não estão perfeitamente alinhados Então, aqui precisamos usar a propriedade de transformação. Transforme e eu vou usar translate x value. Traduza, traduza X -50%. Se eu definir esse arquivo, agora você pode ver que alinhamos perfeitamente nosso botão de navegação Com isso, caso nossas imagens transbordem para essa borda , precisamos nos esconder na imagem de transbordamento Para isso, precisamos usar a propriedade overflow. Estouro escondido e precisamos somar isso. Vou configurar esse arquivo. Como você pode ver, depois de definirmos propriedade oculta de overflow no contêiner deslizante, agora outras imagens não são visíveis nesse contêiner porque eu não quero mostrar nenhum conteúdo fora dessa borda É por isso que eu uso o OverPropProperty id. Agora você pode achar que nosso controle deslizante é bastante aleatório Está pronto, mas não é porque a heroína precisa usar JavaScript. Quando clico no botão Avançar, quero mostrar o próximo. Da mesma forma, quando clico no botão anterior, quero mostrar a imagem anterior. Sempre que clico no botão Avançar, quero adicionar tags ativas dinamicamente à próxima imagem Usando a classe ativa, vamos realizar a animação. Vamos realizar a animação do slide. Antes de iniciarmos o JavaScript, vamos estilizar a classe ativa de leitura. Dinamicamente, quero adicionar a classe ativa nesses slides Sempre que abrimos nossa página, por padrão, quero adicionar a tag ativa em nossa primeira imagem, ou seja, primeiro slide. Aqui eu quero adicionar a classe ativa. Manual. Então, dentro dessa tag de bloco, até o slide, no slide com a classe ativa, depois dentro do calibrass aqui eu vou usar a transformar essa propriedade de transformação, deslizar a imagem Então eu vou digitar, traduzir o valor X zero. Se houver um slide com adição ativa , quero aplicar a propriedade de transformação, traduzir zero. Isso significa que automaticamente você mostrará a imagem dentro desse contêiner. Eu fiz nossa parte CSS com sucesso. Na próxima parte deste tutorial, iniciaremos o Java Street. Obrigado por assistir a este vídeo, Stu. 11. Tutorial do controle deslizante de imagem em Javascript parte 2: Então, como você pode ver, mais uma vez, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver, e abro meu documento anterior, ponto de índice H. Como você sabe, neste projeto, vamos criar um Dinamicamente, precisamos colocar uma classe ativa nessas imagens. Aqui eu clico no botão Avançar, caso contrário, no botão Anterior. Para isso, precisamos usar o Javascrep. Então, fora da tag Dip, vou usar a tag Script Dentro da tag do script, primeiro, precisamos direcionar o controle deslizante, depois os botões, slides, etc Então, primeiro dentro da tag do script, vou focar nesse controle deslizante Para isso, vou usar uma variável, Cs, e o nome da nossa variável é slider Controle deslizante igual ao documento, seletor ii, as redondas, eu disse os códigos duplos, eu disse os códigos duplos Em seguida, Sengdon para esta linha. Em seguida, precisamos direcionar todos esses slides. Para isso, vou duplicar essa linha e, primeiro, vou mudar a variável membro, deslizar para slide aqui, precisamos usar outra função, não Aqui, precisamos usar o seletor de interface do usuário. Oiisleor no slide das prensas redondas. Agora, novamente, vou duplicar essa declaração porque precisamos selecionar esses botões Primeiro, vou selecionar o botão anterior. Vou usar o botão PRV de membro variável, TN. Para isso, aqui vou usar o Gileor. Então, vou remover tudo do seletor Koi, e aqui preciso passar o nome da classe, que é o slide anterior Da mesma forma, para o próximo botão, precisamos criar outro seletor Botão seguinte do tipo Hemel. Ponto do documento em um setor, próximo slide. Você direciona o elemento com sucesso e o armazena nessas variáveis. Controle deslizante, slide, botão próximo, botão anterior. Em seguida, precisamos criar uma variável para o número do índice. Aqui você pode ver que temos um total de três slides e, por padrão, definimos a classe ativa em nosso slide um. Quando o usuário clica no botão Avançar, quero adicionar o slide número dois da classe ativa e remover a classe ativa do slide número um. Para isso, precisamos do número de índice de três dessas tags profundas. Nosso primeiro índice seria zero, depois um e depois dois. No começo, vou pegar uma variável e, para essa variável, vou usar late porque precisamos usá-la mais tarde. Atrasado e o nome da nossa variável é índice de slides. Vou usar I e aqui vou definir um valor padrão zero. Sempre que carregamos a página, nosso valor mostra zero. E então, quando eu carrego a página, quero o Active Plus em nosso primeiro slide. Ouça adicionar active plus minimamente, mas eu quero adicionar active plus com JavaScript. Então, para slides, o Hero pega uma variável e a variável é slide. Eu copio o slide variável e ela cola. Desliza para dentro do latão quadrado porque é uma matriz. Ele armazena todos os elementos profundos dentro do latão quadrado, aqui vou passar nosso primeiro slide e nosso primeiro slide é o índice do slide Homem zero. Então eu quero adicionar a classe CSS a este slide. Para isso, precisamos usar o método de lista de classes, lista de classes. Dentro da lista de classes de rodadas, função de adição de pontos. Então, dentro do vestido redondo, vou passar o nome da classe e o nome da nossa classe está ativo. Quero dizer, sempre que carregarmos a página, ela fornecerá o valor do índice do slide nessa posição. Por padrão, é zero. Em seguida, ele adicionará uma classe ativa ao slide específico. Em seguida, precisamos adicionar dois eventos: dois desse botão, botão anterior e botão próximo. Quero adicionar um evento de clique. Para isso, aqui vou usar o método add event listener Em primeiro lugar, quero adicionar um evento no botão anterior. Botão anterior, ponto, adicionar ouvinte de eventos. Então, em vez disso, a execução pressiona, eu quero adicionar o evento de clique, clique Então eu quero chamar uma função. Eu não vou chamar a função anônima. Aqui, vou chamar uma função chamada slide anterior, slide. Vou criar essa função fora desse evento. Da mesma forma, quero adicionar um evento para o nosso próximo botão. Eu dupliquei essa linha e vou substituir próximo ponto do botão A, mesmo que o ouvinte clique em Método Vou chamar o nome de uma função no próximo slide. E, em seguida, precisamos criar ambas as funções. Então, primeiro, vou criar uma função para o slide anterior. Função, o nome da nossa função é o slide anterior. Da mesma forma, vou criar uma função para o próximo slide. Crie esta seção e eu vou digitar o próximo slide. No início, vou trabalhar na próxima função de slide. Dentro da próxima função de slide, primeiro, eu quero remover a classe ativa do slide atual. Para isso, vou usar a mesma declaração. Eu copio essa declaração e vou colá-la na próxima função de slide. E aqui eu vou usar remover metal, remover. Remova active plus do slide atual porque precisamos colocar a classe ativa no próximo slide. Então, para o próximo slide, alteramos o valor dessa variável. Aqui, precisamos alterar esse pequeno valor do índice. Vou usar a mesma variável, índice de slides, e aqui eu quero colá-la. Índice de slide igual a aqui, precisamos incrementar esse valor com um Se eu digitar o índice do slide mais um. 12. Tutorial do controle deslizante de imagem em Javascript parte 3: E então execute esse código, ele não vai funcionar. Sim, esse processo pode incrementar o valor desse slide. Mas aqui você pode ver, temos que virar três slides. Até o slide dois, não temos nenhum slide, mas esse método aumentará continuamente o valor se você clicar no botão Avançar. Mas eu quero voltar ao primeiro slide depois de concluir o terceiro slide. Para isso, aqui precisamos usar a função ternat. Então, aqui eu vou usar o operador ternat. Então, digamos que os redondos que ela precise conferir aqui, precisamos verificar se o índice do slide é o último ou Como podemos verificar se primeiro é a aprovação, índice do slide, índice do slide, peso idêntico, comprimento dos pontos dos slides. Temos que contar três slides. É por isso que a função slide len retornará três. Mas o problema é que nosso índice começa do zero. É por isso que ela retornará zero, um, dois, mas a função de comprimento contará a partir de um, um, dois, três. Ele para menos um valor menos um. Se a condição corresponder , precisamos mover o índice numérico zero. Quero dizer, primeiro slide. Aqui eu vou passar Z. Mas antes, aqui precisamos usar o quociente porque usamos o operador E depois do ponto e vírgula, se a condição não corresponder, quero incrementar o valor do índice Então, aqui nós digitamos, índice de slides mais um. Não usamos a condição do quadril aqui, aqui usamos o operador ternário. Dentro das prensas redondas, verificamos uma condição. Se o índice do slide for idêntico ao comprimento do slide, volte ao índice zero. Caso contrário, incremente o índice do slide. Isso significa que se o valor do índice atual for o último, ele voltará ao primeiro slide. E se não estiver, aumente o valor do índice do slide. E agora temos o novo índice do slide, então precisamos adicionar classe a esse índice do slide. Então, vou copiar esse fragmento e colá-lo aqui Esse destacamento colocará o sinal de adição ativo no próximo botão, mas o sinal de adição ativo não mostrará a imagem Para isso, aqui precisamos usar animação. Então, aqui precisamos mover o controle deslizante principal usando a propriedade transpom Aqui, vou direcionar esse controle deslizante e usar a propriedade de estilo, o método de estilo Estilo dot transbom igual a, vou mover esse controle deslizante usando o valor translate Eggs, mas aqui vou usar a string de modelo Eu vou pegar carrapatos. Aqui eu vou usar translate eggs value. Traduza X. Então, dentro da resina redonda, eu vou pegar menos, menos, e eu vou pegar o cifrão e dentro das cálices, se você estiver familiarizado com a corda tempest, então você Então, dentro da resina redonda, eu vou pegar menos, menos, e eu vou pegar o cifrão e dentro das cálices, se você estiver familiarizado com a corda tempest, então você conhece o processo. Para isso, você deve ter conhecimento de seis versões e posteriores. Aqui eu vou fazer um pequeno cálculo. Dentro dos cálices, vou digitar slide, índice, multiplicar por 100 e fora dos cálices, vou usar Então, a seta cria com sucesso a próxima função de slide. Primeiro, eu removo a classe ativa do slide atual. Em seguida, incrementamos o valor do índice do slide e, por padrão, o valor do índice do slide é zero Ele usa o operador ternário para criar a condição. Primeiro, verificamos se o próximo valor é o valor ou não. Primeiro, estabelecemos uma condição. Se o próximo valor for o último slide, volte para a posição zero. Quero dizer índice zero. E se não for o último valor, incremente o valor do índice do slide com um Em seguida, adicionamos a classe ativa ao próximo slide e, finalmente, transformamos esse controle deslizante usando o valor de tradução X. Aqui você pode ver aqui que fazemos alguns pequenos cálculos. Se o valor do índice do slide for zero, ele retornará zero menos zero Mas se o valor do índice do slide for um, ele retornará -100% Em dois, então 200%. Em seguida, ele moverá esse slide na direção XX de menos 200% Então, vamos configurar o arquivo e verificá-lo. Funcionou corretamente ou não? Depois de definir o arquivo, vou clicar no botão Avançar. Então, sempre que clico no botão Avançar, como você pode ver, o slide é alterado. E, novamente, clico no botão Avançar, você pode ver a imagem diferente. Mas se eu clicar no botão Avançar , mais uma vez, como você pode ver, ela volta à primeira imagem porque agora ela corresponde a essa condição É por isso que está escrito na primeira imagem. Mas há um problema. Nossa animação não está funcionando. Para isso, precisamos voltar à seção de estilo e estilizar o controle deslizante Como você pode ver, aqui usamos flocos de propriedades distais e, basicamente, movemos o slide inteiro Para isso, precisamos usar a propriedade de transição. Transformação de transição. E a duração da transição é de 0,5 segundo, e nossa função de tempo de transição está ativada. Vou configurar esse arquivo. Em seguida, volto ao meu navegador. Novamente, vou clicar no botão Avançar. Sempre que clico no botão Avançar, agora você pode ver a animação. Agora nossa animação funciona perfeitamente. Agora precisamos trabalhar em nosso último botão, o botão anterior. Vamos para a seção JavaScript. E a partir daqui, vou copiar todo o código dentro da próxima função de slide. Em seguida, vou colá-lo dentro da função anterior. Agora, basicamente, não precisamos mudar a condição em nada mais. Aqui eu preciso dizer se índice do slide idêntico ao nosso primeiro índice significa zero, então volte para o último índice. Aqui vou digitar o índice do slide. Função de comprimento de ponto com função n, eu quero menos um Outra pergunta é por que eu disse essa condição? comprimento do nosso índice lateral é três porque temos que contar três slides. Mas nosso índice começa com zero, zero, um, dois. É por isso que precisamos menos um. Para obter o último índice, precisamos menos um da faixa de índice E se a condição for essa correspondência, então precisamos menos um do índice do slide Aqui, precisamos diminuir o valor porque estamos indo para a frente. Então, tudo permanece o mesmo. Então, vamos certificar e verificar. Funcionou corretamente ou não. Então, primeiro, vou clicar no botão Avançar. Esse é nosso primeiro slide. E esse é o nosso segundo slide. Então, se eu clicar no botão Anterior e agora vou elogiar o botão anterior. Depois de pressionar o botão anterior, como você pode ver, funcionou perfeitamente. E esta é nossa primeira imagem. Então, se eu elogiar o botão anterior novamente, como você pode ver, Ei, botão anterior não está funcionando agora. Também no próximo botão, acho que fiz um pouco de mística Acho que opa, fiz um silvisti. Aqui, precisamos contar o tamanho do slide, não esse pequeno comprimento do índice. Então, vou remover o índice. Função de lente de ponto deslizante. Novamente, vou configurar esse arquivo. Depois de definir esse arquivo, se eu clicar no botão anterior, agora você pode ver que é W. Nosso botão Avançar e o botão Anterior também funcionam perfeitamente. Então, nós já terminamos. E se você quiser remover a borda, sim, você pode. Você só precisa remover a propriedade da fronteira. Basta comentar esta linha e definir esse arquivo. E também se você quiser colocar esse botão direito e levantá-lo, sim, você pode. Para isso, você pode usar a probabilidade flexível de exibição. Deixe-me te mostrar. Preciso voltar, controles deslizantes E aqui, vou usar a propriedade de exibição. Exiba flocos. E então eu quero dizer que molhado neste recipiente, remova cem por cento de ervas daninhas. Além disso, precisamos usar outra propriedade chamada justify content Então, aqui vou digitar conteúdo justificado e vou usar o espaço entre os espaços. Se eu definir esse arquivo, você poderá ver o resultado. Então, coloquei com sucesso botão anterior e o botão seguinte à direita e à esquerda. E se você quiser colocar esse botão e aquela posição ou aquela, você precisa usar o valor inferior com porcentagem, 50%. Se eu definir esse arquivo, você poderá ver o resultado. Então, você cria com sucesso um controle deslizante e aprende como podemos criar um slide normal Espero que você goste desse vídeo. Obrigado por assistir a este vídeo. Fique ligado no próximo projeto. 13. Caixa de confirmação do JavaScript - parte 1: Olá, pessoal. É bom ver você. Mais uma vez, estou de volta com outro projeto relacionado ao Javascip HTML CSS. E neste projeto, vamos criar a caixa Confum. Como você pode ver no meu navegador, temos dois botões altos, a controle e a caixa de controle antiga Se eu clicar na caixa de contum antiga, essa é a caixa de confirmação padrão fornecida pelo Javasre Aqui você pode ver que você tem o botão do produto dois. Se eu elogiar o botão OK, ele funcionará de acordo com esse botão. Se eu pressionar Cassil, ele executará outra função Vamos clicar no botão OK. Depois de pressionar o botão OK, como você pode ver na impressão, você elogiou Ok Essa é a caixa de confirmação básica fornecida pelo Javare, mas hoje vamos criar nossa própria caixa de confirmação Não podemos estilizar nossa antiga caixa de confirmação. Não podemos alterar a cor da fonte, cor do botão, o estilo do botão, confirmar o tamanho da caixa, etc Mas em nossa nova caixa de confirmação, podemos fazer qualquer coisa. Podemos estilizar nossa caixa de confirmação. Podemos alterar o tamanho do botão, a cor do botão, etc. Deixe-me te mostrar. Se você clicar neste botão, confirme a caixa, aqui você pode ver a caixa de confirmação. Com sobreposição de fundo transparente, é uma caixa personalizada. Você pode exibir sua mensagem e também pressionar o botão e ver quanto botão deseja. Se você quiser passar o botão 45, sim, você pode. Você pode estilizar seu telefone, alterar o plano de fundo. Como você pode adicionar sinal de cruz neste canto. Isso depende totalmente de você. Essa é a caixa de confirmação que vou abordar neste tutorial Mas antes de começarmos a prática, quero cultivar alguma coisa. Aqui você pode ver um transparente. Dentro dessa transparência, temos uma caixa de confirmação. Quer dizer, nós temos T. Então, vamos chamar essa camada externa preta de caixa de confusão profunda, e vamos chamar essa caixa de mensagem White Deep Então, primeiro, vamos criar essa caixa de confirmação preta e, em seguida, vamos colocar essa caixa de mensagem dentro dessa caixa de confirmação. Então, dentro dessa caixa de mensagem, vou colocar esse texto e nossos botões. Então, sem perder seu tempo, vamos começar pela prática Como você pode ver, abro meu editor de código do Visual Studio e já crio um documento HTML chamado index dot HTML E eu abro este documento usando o servidor LP. Se eu mostrar meu navegador, como você pode ver, agora nosso documento está completamente preto. Então, vamos voltar ao leitor de código do estúdio. Então, aqui, dentro da tag body, eu não vou digitar nenhum HTML Vamos criar a caixa de controle usando JavaScript puro. Então, dentro da tag body, vou pegar o script da tag script. Em seguida, vamos fazer tudo isso usando uma função. Então, vou criar uma função. Função e nosso nome de função é Sho Qufram. Sempre que o usuário chamar essa função, ela enviará uma mensagem e eu quero mostrar essa mensagem em uma caixa de confirmação. Como parâmetro, vou pegar a mensagem. Em vez de pressionar a tecla redonda, vou digitar a mensagem Então, dentro da resina de Cali , primeiro, vou pegar uma variável Dentro dessa variável, vou criar um elemento profundo. Também precisamos adicionar uma classe a esse D, que é a caixa de confirmação. Vamos criar o profundo. Vou pegar uma variável lá e o nome da nossa variável é caixa de confirmação. Confirme a caixa, atribua maconha, o ponto do documento , crie um elemento, crie Inside the rounddresses, quero criar uma etiqueta profunda D. Então Sem aterrou dois nesta linha. E agora precisamos atribuir um nome de classe a esse D. Então, vamos adicionar a classe D. Para isso, vou usar essa variável confirm box dot. Precisamos usar o método classlist, class list. E eu vou usar a função at para adicionar o nome da classe a esse D. A dentro das redondas, precisamos passar, precisamos passar o nome da classe, e o nome da nossa classe é a caixa de confirmação Dash box e semi vão para esta linha. Atribuímos com sucesso uma classe a esse D. Para fins de estilo, precisamos atribuir essa classe Aqui criamos a caixa contum. Da mesma forma, precisamos criar uma mensagem dentro da caixa contum Para criar a caixa de mensagem, vou selecionar as duas linhas e duplicá-las Só vou mudar o nome. Vou rasgar esse conteúdo com uma mensagem. Caixa de mensagem, e também vamos atribuir uma classe. Então, a classe Message Box dot add. Além disso, o nome da nossa classe é messes Box, messes box. E nesta caixa de mensagem, eu quero mostrar uma mensagem que o usuário passa como parâmetro para essa função. Então, precisamos mostrar a mensagem nesta caixa de mensagem. Para isso, precisamos digitar o ponto da caixa de mensagem aqui Vou usar o método de conteúdo de texto. Conteúdo de texto. Usando conteúdo de texto, podemos mostrar texto em nosso elemento DB. E aqui, eu quero mostrar nossa mensagem. Então eu copio a mensagem variável e vou colá-la aqui com um semicon nesta linha E agora precisamos acrescentar essa caixa de mensagem dentro dessa caixa de confirmação Para isso, vou usar o método appenchil. Então eu digito confirm box dot append child. Dentro das prensas redondas, quero acrescentar uma caixa de mensagem a essa caixa de confirmação Copie a caixa de mensagem do nome da variável e eu vou colá-la aqui. E meio que dois nesta linha. Então, primeiro, criamos a caixa de confirmação, depois criamos a caixa de mensagem e, em seguida, anexamos essa caixa de mensagem dentro da caixa de confirmação E agora precisamos inserir o botão na caixa de mensagem. Mas antes eu quero mostrar o que criamos. Para isso, vou chamar essa função. Então, aqui vou ligar para mostrar e confirmar. Então confirme. Dentro da bagunça redonda, precisamos passar a mensagem, e nossa mensagem é R 18 e Semgroal dois nesta linha Se eu definir esse arquivo e mostrar meu navegador, você não verá nada porque não estilizamos nossas tags Dep Então, vamos falar com o coordenador do Estúdio de Vistos. Então, primeiro, precisamos estilizar a caixa de confirmação. Então, vou copiar a caixa de confirmação do nome da classe. E dentro da etiqueta principal, vou digitar tile e, em vez dessa tag, vou separar a caixa de confirmação Então, vou digitar dot e a caixa de confirmação do nome da nossa classe. Então, no interior, o Kalib diz, primeiro, vou analisar o plano de fundo Plano de fundo, e eu quero fundo preto transparente. Para isso, vou usar o RGVvu RGBA. Para vermelho, vou passar de zero. Para verde, também vou usar zero para azul, zero e vou usar o valor alfa 0,5. Eu vou configurar este. Em seguida, vou atribuir com altura, largura, 100% e altura também 100%. Com isso, precisamos especificar a posição, a posição e eu quero uma posição fixa. Então eu vou passar pelo local. P Eu vou passar do lado dele, eu vou pegar zero. E ainda por cima, eu também vou pegar zero. Em seguida, vou usar a propriedade do índice Z, o índice Z. Índice ZR, vou passar um grande valor, algo como 9.999. Porque sempre que ligamos para a caixa Ctram, não quero mostrar nada acima da caixa de confirmação Só eu quero mostrar a caixa de confirmação em nossa tela. É por isso que eu uso um DVD grande. E agora precisamos estilizar a caixa de bagunça. Vou copiar para copiar o nome da classe. Caixa de bagunça. Além disso, vou selecionar a caixa de mensagem com pontos. Então, dentro da resina colorida, primeiro, vou pegar a propriedade do plano de fundo Fundo branco. Com isso, quero alinhar o texto dentro da caixa de mensagem Centro de alinhamento de texto. Na próxima propriedade, vou usar fonte, família de fontes, família e quero usar Aerial Tamanho da fonte 16 pixels, e eu vou usar preenchimento, 20 pixels Vou adicionar preenchimento de todas as direções. Com isso, também vou medir a altura da linha. Altura da linha 1,5 m. Além disso, vou levar a borda até esta caixa de mensagem. Raio de borda de cinco pixels. E também vou definir boerradius para esta caixa de mensagem. Raio da borda, por pixel. Com isso, vou usar sombra de caixa, sombra de caixa e quero sombra de caixa transparente. Do excesso de direção, vou pegar zero. Da direção de x, também vou pegar zero, e o sangue da sombra é de dez pixels Com isso, vou usar cores transparentes. Para isso, precisamos usar o RGV RGBA. Vou usar o Sincl 14. Caixa de confirmação do JavaScript — parte 2: E agora precisamos acrescentar essa caixa de confirmação em nossa plataforma corporal Para isso, precisamos digitar ponto do documento, ponto do corpo acrescentar filho. Se a tecla redonda for pressionada, precisamos anexar a caixa de confirmação em nossa etiqueta Copie a caixa de confirmação e cole aqui, e depois vá para a linha NVS. Então, vamos configurar o arquivo. E se eu mostrar meu navegador, como você pode ver, ele anexa nossa caixa de confirmação no meu Você pode ver o fundo preto transparente. E dentro dessa caixa de confirmação, temos também a caixa de mensagem, e você pode ver o texto, RU 18. Agora precisamos colocar essa caixa de mensagem no meio desta página. Para isso, precisamos usar a propriedade display. Em vez dessa caixa de confirmação, vou usar display, e vou usar a propriedade display, flex, e para centralizá-la vertical e horizontalmente, vou usar justificar conteúdo, Justificar conteúdo, cent para centralizar verticalmente, precisamos usar a propriedade align item, Align item center precisamos Vamos configurar o arquivo e voltar para o navegador. Aqui você pode ver que, horizontal e verticalmente, o colocamos e verticalmente E agora precisamos inserir botões nessa caixa de preservativos. Então, voltando ao erador de código do Visa Studio precisamos adicionar botões dentro da caixa de mensagem Para isso, precisamos criar uma caixa de botões. Para isso, vou selecionar essas duas linhas e colá-las aqui. Além disso, vou mover essa linha abaixo da variável da caixa de mensagem. Para criar a caixa de botão, precisamos criar uma variável onde caixa de botão. Então, dentro da caixa do botão, eu quero adicionar uma classe. Então, caixa de botões, classe de pontos, ponto, adicione caixa de botão. Caixa de botões. Em seguida, precisamos acrescentar esse botão dentro dessa caixa de mensagem Copie a variável da caixa de mensagem e o ponto da caixa de mensagem do tipo Hemo, apêndice Dentro das teclas redondas, aqui vou passar E semiconal nesta linha. Então, criamos com sucesso a caixa de botões. Agora precisamos inserir dois botões nessa caixa de botões. Então, precisamos criar dois botões diferentes. Então, vamos criar nosso primeiro botão. Para isso, vou copiar a mesma linha. E eu vou colar aqui. E desta vez nosso nome é botão. Este é o nosso primeiro botão, botão. Mas desta vez nosso elemento não é D, então vou substituir D por botão. Além disso, precisamos atribuir uma classe a esse botão. Para isso, vou seguir esta linha. Vou substituir o botão Box pelo botão. Botão ponto, classes pontuam em, e o nome da nossa classe é botão sim Terceiro botão, vou usar o pequeno B. E também preciso adicionar texto nesse botão. Para isso, precisamos usar essa linha. Copie esta linha e eu vou colá-la aqui. Vou substituir a caixa de mensagem pelo botão sim. Botão pontilhando o conteúdo do texto, e aí vou passar, insira o código duplo, sim. Agora também precisamos acrescentar esse botão essa caixa de botão Para isso, vou copiar essa linha. Então, vou substituir a caixa de mensagem pela caixa de botões. caixa de botões dota a criança e, dentro da caixa de botões, eu quero acrescentar um Da mesma forma, vamos criar o botão Não. Portanto, duplique esta seção. E desta vez o nome da nossa variável não é botão. Nenhuma lista de classes de pontos de botão, e nosso nome de classe inferior é Não. Além disso, precisamos alterar o conteúdo do texto desse botão. O que é não. Sem conteúdo de texto com pontos de botão, igual a não. E de forma semelhante, precisamos acrescentar esse botão essa caixa de botão Então, vou substituir o botão Sim ou o botão Não. Ponto da caixa de botões Anexar criança ao botão. Vou configurar esse arquivo. Então, vamos configurar o arquivo e voltar para o navegador. Se eu mostrar meu navegador, como você pode ver, abaixo de nossas bagunças, temos dois botões, sim e não E agora precisamos estilizar os dois botões. Vamos até o editor de código do Visual Studio e estilizemos esse botão. Vamos até essa seção de estilo e precisamos estilizar a caixa de botões. Eu copio a caixa do botão do nome da classe e volto para a seção de estilo. A caixa de botão de ponto dentro do surge, primeiro, vou usar primeiro, vou usar a propriedade de margem. Margem, no topo. Do topo, quero uma margem de quase 30 pixels. E então eu vou estilizar o botão e nenhum botão. Eu copio o botão e volto para a seção de estilo. Botão de pontos. São os calibres, mas eu quero aplicar o mesmo CSS, com os botões Com o botão, também, não vou usar nenhum botão, vírgula, ponto, nenhum botão Então, primeiro, vou adicionar a propriedade de preenchimento, paddy. De cima para baixo, vou pegar dez pixels e da esquerda e direita, vou pegar o tamanho da fonte de 20 pixels, vou pegar 16 pixels. Em seguida, vou usar a propriedade de margem. Margem. Da esquerda para a direita, vou usar zero e, de cima para baixo, vou usar 20. Em seguida, vou remover a borda padrão do botão. Fronteira, nenhuma. Além disso, vou adicionar um pouco de raio aos nossos botões. Raio de borda de quase cinco pixels. Com isso, quero colocar meu cursor no cursor quando vou até esse botão Ponteiro do cursor. E agora precisamos fornecer botões de bode de cores diferentes. Vou selecionar o botão s e, para o botão s, vou usar o fundo verde. Eu uso a cor da fonte branca e a cor branca. Vou duplicar esta seção e vou digitar sem nenhum botão Eu quero a cor de fundo vermelha. E a cor da fonte é branca. Você pode decorar seus botões à sua escolha. Agora, vamos configurar o arquivo e voltar para o navegador. Se eu te mostrar meu navegador, como você pode ver, agora ele parece muito bom. Como você pode ver, nossa caixa composta está pronta e você também pode ver o fundo transparente dessa caixa composta. Através do fundo transparente, você pode ver o conteúdo por trás dele. Isso é tudo para este tutorial. No próximo tutorial, vamos codificar o botão e nenhum botão Obrigado por assistir a este vídeo. Fique ligado na próxima palavra. 15. Caixa de confirmação do JavaScript — parte 3: Alba é bom ver você onde. Essa é a segunda parte desse projeto. E neste tutorial, vamos ao codificação e ao botão Não Então, vamos voltar ao editor de código do Visual Studio. Como você pode ver, criamos o botão e o botão Nenhum, e eu quero adicionar ClickEvent aos dois Defina primeiro, vamos adicionar o botão ClickEvent yes. Então, digite o ponto do botão. Precisamos usar adicionar ouvinte de eventos, adicionar ouvinte de eventos. Então, dentro do endereço redondo , He, eu vou usar click event. Então eu vou digitar, clicar. E no próximo parâmetro, precisamos chamá-lo de função. E o nome da nossa função é botão Sim. Chute de botão. Então, eu preciso criar essa função. Da mesma forma, sem nenhum botão, vou copiar a mesma linha e colá-la aqui. Vou mudar o nome da variável. Sem botão. E o nome da nossa função não é tecla de botão. Sempre que o usuário clicar no botão sim, ele chamará essa função de botão sim. Se o usuário não pagar nenhum botão, ele chamará a tecla sem botão. E agora precisamos criar ambas as funções. Primeiro, vou criar a função de clicar no botão. Copie o nome da função yes button e aqui, vou digitar function e o nome da nossa função é button Then round resistor. Então, nas calices, vou chamar uma função. Para isso, quando eu chamo a função show confirm, com esse texto, vou passar outra função. É uma função anônima. Então, na rodada sis, aqui, eu vou passar uma variável e o nome da nossa variável é resultado. E dentro do Kress, vou chamar a declaração IP Se a rodada pressionar o resultado , ela se tornará realidade o usuário elogiar o botão sim, então eu quero imprimir no meu console, o usuário pressiona sim. Tipo de música: console: registro de pontos dentro das rodadas dentro dos códigos duplos, pressionado Sim E se a condição não for verdadeira, então, na nossa parte s, use o Caliss redondo Vou imprimir essa mesma declaração Copie esta declaração, e vou para a última vez em que quero publicar elogios, não Como você pode ver, criamos essa função como um parâmetro. Então, precisamos pegar uma variável. Basicamente, aqui usamos o retorno de chamada dez. Vou retomar minha chamada de nome de variável. Então, com a mensagem, vou pegar outro retorno de chamada de nome de parâmetro Em seguida, vou chamar essa função de retorno de chamada dentro da tecla do botão Sim. Deixe-me te mostrar. Chame isso de chaves redondas e dentro das chaves redondas, eu vou passar Da mesma forma, não vou criar nenhuma função de botão. Para criar esta seção substituirei o botão s por nenhum botão Sem chute no botão. E dentro da função sem botão, vou passar formulários. Agora, a questão é como isso vai funcionar. Sempre que o usuário chamar essa função, mostre confirm e, em seguida, essa função voltará para a função de retorno de chamada Na função show confirm, Hey passa para o argumento two. Um argumento é argumento de texto e outro é função anônima. Para lidar com essa função anônima, Hey, crie um retorno de chamada com nome de variável Usamos diretamente essa variável como uma função em nossa função de clique no botão. E se o usuário clicar no botão, ele chamará essa função de volta e retornará a verdadeira vontade. E se o usuário não pressionar nenhum botão, nesse caso, ele retornará falso. Como você pode ver, Hi lida com a condição usando a condição IP, caso contrário. Se estiver escrito como verdadeiro, então ele imprimirá sim em nosso Csole Se o usuário não pressionar nenhum botão, ele será impresso, pressionei não. Quase terminamos nosso projeto. Mas antes, precisamos remover a caixa de confirmação em que o usuário clica no botão sim, no botão não. Para isso, aqui vou criar uma função e, usando a ajuda da função, vou fechar essa caixa de confirmação, e o nome da nossa função é remover caixa de confirmação. Função, remova dentro das calices e aqui precisamos remover um elemento profundo usando a função de remoção Precisamos remover esse elemento profundo chamado caixa de confirmação. Se você perceber que esse é o elemento parentv dentro desse elemento profundo, criamos nossa caixa de confirmação, mensagem, etc Vou selecionar essa variável e copio. Então, volte para essa função. Para removê-lo, precisamos seguir esse método. Documente o ponto, o corpo, remova a criança, remova a criança. Lá dentro da resolução redonda, basta passar pelo membro variável e o nome da nossa variável é a caixa de confirmação Eu vou acabar com a linha. Criamos essa função de remoção e também precisamos chamar essa função. Copie o nome da função e eu vou colar após a função de retorno de chamada Além disso, vou chamar essa função dentro da função sem clicar no botão e vou definir essa função. Portanto, sempre que o usuário clicar no botão, primeiro ele retornará verdadeiro e, em seguida, removerá a caixa de confirmação. Da mesma forma, sem botão. Então, basta configurar esse arquivo, vamos voltar ao navegador. Harroc, veja a caixa de confirmação. Em. Sempre que recarregamos nosso navegador, aparece automaticamente a caixa de confirmação porque Harry liga diretamente para a caixa de confirmação Não usamos nenhum botão para ligar para essa caixa de confirmação. Não é muito importante. Então, sempre que eu clico no botão Sim, como você pode ver, ele remove nossa caixa de confirmação. Mas se eu te mostrar meu console, agora você pode ver, ele está de volta, pressionei sim. Porque aqui está o botão. Mas se eu recarregar meu navegador novamente, desta vez não vou pressionar nenhum botão Depois de pressionar nenhum botão, como você pode ver, ele remove com sucesso a caixa de controle Mas se eu mostrar minha seção de console, como você pode ver, agora está impressa, você pressionou não. Basicamente, aqui eu apenas fixo uma declaração em nosso console. Mas você pode fazer o que quiser. Você pode chamar funções, você pode realizar qualquer cálculo, etc Basicamente, quero mostrar como podemos criar uma caixa de confirmação. Agora eu quero chamar essa caixa de confirmação para colocar um botão. Para isso, em nossa parte estimada, aqui vou pegar um botão Vou criar um botão, botão. E dentro desse botão, vou atribuir um ID, ID, e nosso nome de ID é caixa aberta. Dentro desse botão, vou digitar a caixa de confirmação. Então, sempre que alguém clicar nesse botão de caixa de contagem, eu quero mostrar a caixa C. Para chamar essa função show confirm, precisamos criar um seletor No final, vou amarrar o seletor de cópia do documento, dentro da redondeza estão os códigos duplos, e nosso botão ID é Eu copio o nome do ID e vou colá-lo aqui, hashtag, caixa aberta E neste botão, eu quero adicionar evento de clique, adicionar ouvinte de eventos Em vez disso, os códigos únicos. E um único parâmetro, precisamos chamar a função anônima. Vou criar uma função de seta. Este é o nosso operador de flechas. Eu sei que você já está familiarizado com isso. Aqui, adicionamos Tiven a esse ID. Em seguida, insira as calices essa função vai chamar essa função, mostre confirmar Vou copiar esta seção. Basicamente, vou recortar esta seção e colá-la dentro dessa função anônima e definir esse arquivo. Agora, vamos voltar ao navegador. Agora você pode ver no meu navegador, temos uma caixa de confirmação. Se eu clicar nesse botão, como você pode ver, ele mostra nossa caixa de confirmação. Agora temos duas opções, sim ou não. Vou elogiar o botão Sim. Um terceiro botão de elogio sim, como você pode ver, remove nossa caixa de confirmação. Se eu te mostrar meu console, ele também imprime, você pressionou o botão sim. Então, crie com sucesso uma caixa de confirmação. Espero que você goste desse projeto. Obrigado por assistir a este vídeo. Fique ligado no próximo projeto. 16. Caixa modal: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro projeto. E neste projeto, vamos criar uma caixa modelo. Como você pode ver na tela, temos um botão chamado Open Model. Se eu clicar neste botão, como você pode ver, abra a caixa EMDL com fundo transparente É bem parecido com o exemplo anterior. E se eu clicar nesse ícone de cruz, como você pode ver, ele fecha nossa caixa de modelo. Além disso, podemos fechar nossa caixa de modelos se elogiarmos em qualquer lugar fora da caixa modal Suponha que eu clique nesse lugar. Também fecha nossa caixa de modelo. Então, como podemos criar uma caixa de modelo? Vamos começar a LLC prática, como podemos criá-la. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão lip server e já crio um documento HTML chamado index dot HTML. Hoje, neste projeto, vamos criar uma caixa de modelo, e nosso projeto é bem semelhante ao projeto anterior. Então, sem perder seu tempo, vamos começar. Então, primeiro, vamos começar com HTML. Então, em vez da etiqueta corporal, primeiro, vou pegar um botão. Botão. Neste botão, vou definir um ID. ID igual ao meu botão e modelo aberto do tipo herói. Então eu vou pegar um D, D, e vou atribuir ID a esse D. ID igual a, e esta é a nossa caixa modelo. Aqui vou definir meu modelo, meu modelo. Com isso, também vou definir uma classe de classe igual ao modelo. Este é o nosso gatilho, mas para o modelo, e este é o nosso modelo real. Dentro desse modelo, clicamos para transmitir o conteúdo do modelo. Aqui vou pegar outro elemento dip, D Também vou definir uma classe para esse elemento de Conteúdo do modelo de classe. Conteúdo do hífen. Então, dentro do conteúdo do modelo, primeiro, vou pegar uma tag de parágrafo P aqui vou passar um maldito texto. Abaixo, seis. Basicamente, também adicionaremos seis palavras aqui: precisamos pegar uma pistola I para fechar a caixa do modelo. Para isso, vou usar a tag span com código TD. Então, eu quero digitar span e vou atribuir uma classe à classe da tag span, e o nome da nossa classe é close. Com isso, aqui vou usar o código NTD para sinal cruzado. Para iniciar o código da entidade, primeiro precisamos usar o sinal de pessoa. Então eu vou digitar T Astin, este. Então, vamos configurar o arquivo e ver o que ele retorna. Depois de definir esse arquivo, como você pode ver, primeiro ele criou um botão e , dentro da caixa do modelo, ele tinha o conteúdo do modelo. Basicamente, tinha um paragrama fictício. Com isso, tinha sinal cruzado. Vamos usar esse sinal cruzado para fechar a caixa do modelo. E agora precisamos projetar a caixa do modelo usando o nome da classe. Então, vou selecionar o modelo do nome da classe. E depois da tag de título, vou usar a tag de estilo. Estilo. Dentro dessa etiqueta de estilo, primeiro, vou selecionar o modelo. Dentro dos aliases, nosso primeiro nome de probidade é display. Exibição. Por enquanto, vou usar a posição Dist do e quero uma posição fixa Com isso, também vou usar o índice Z. O índice zero é muito importante porque não quero mostrar nada acima da caixa do modelo. Quando clico nesse botão, quero mostrar apenas a caixa do modelo. Vou definir o índice ZR um. E se você quiser, você pode usar qualquer valor maior. Porque neste projeto, vamos criar apenas a caixa do modelo. É por isso que eu não preciso de nenhum valor maior. Se você adicionar mais conteúdo estável, deverá usar um valor maior do índice Z. Nossa próxima propriedade é o IPT. Da polícia de Los Angeles, vou levar zero para o topo, também vou levar zero Em seguida, vou definir a altura e a largura desta caixa modelo com 100%. Além disso, nossa altura é altura, 100%. Aqui, usamos a altura e a largura total do nosso navegador. Além disso, precisamos controlar o transbordamento. Overflow e eu quero configurar o overflow auto. Aqui eu habilito a rolagem se o usuário precisar rolar. É por isso que eu uso o auto Veil. Nossa próxima propriedade é a cor de fundo. Cor de fundo, e eu vou usar Rg VV RGBA. Para vermelho, vou pegar zero. Para verde, também vou escolher zero. Para azul, também, vou pegar zero. Para vermelho, vou pegar zero. Para verde, também, vou usar zero, e para azul, novamente, vou usar zero. E para Alpha Value, vou usar 0,5. Ele fornecerá um fundo preto transparente, e eu vou definir esse arquivo. E aqui você pode ver o resultado. Aqui você pode ver que ele ocupa toda a altura e a largura do navegador, além de fornecer um fundo transparente. Portanto, estilizamos com sucesso o plano de fundo do nosso modelo e agora precisamos estilizar o conteúdo do modelo. Para isso, vou selecionar o conteúdo do modelo do nome da classe em nosso conteúdo do modelo de pontos da tag de estilo. Dentro das cores, nossa primeira propriedade é a cor de fundo Cor de fundo, e aqui vou usar uma hashtag hexa diferente: FE, FEFP Ele fornecerá um pouco de cor branca acinzentada. Em seguida, vou usar a propriedade Margin. Margem. De cima para baixo, vou usar 15%. E da esquerda para a direita, vou usar o automático. Com isso, quero começar a encher esta barraca modelo. O preenchimento e eu queremos adicionar o preenchimento de todas as direções ao pixel Nossa próxima propriedade é borda, e eu quero uma borda de um pixel. Com isso, eu quero sólido em sólido. Nossa cor de borda é oitava e oito. Aqui eu uso a cor da borda cinza. Em seguida, precisamos mencionar a largura dessa caixa de modelo. Hemote com 80%. Pode ser mais ou menos dependendo do tamanho da tela. Então eu vou configurar esse arquivo. E agora precisamos estilizar essa cruz K. Precisamos movê-la para o lado direito Então, vamos selecioná-lo Smocpy, o nome da classe. Fechar. Vou digitar isso de perto. Então, no interior, o Cali re diz, primeiro, eu vou atribuir uma cor, colorida, e eu vou usar Higa V. Aqui eu uso um pouco de cor cinza Com isso, eu vou dizer flutuar. Flutue, certo. Nossa próxima propriedade é o tamanho da fonte. Tamanho do telefone 28 pixels. E nossa outra propriedade é o peso da fonte. Digite a fonte e eu quero usar negrito. Eu quero uma fonte mais ousada. Vamos examinar o arquivo e ver. Depois desse arquivo, você pode ver o resultado. Agora parece um pouco maior. Agora, quando eu passo meu cursor sobre esse ícone, eu quero o ponteiro do cursor Com isso, quero um pouco de cor escura nesse ícone. Para isso, precisamos usar o efeito Hober e o foco. Tipo de som, ponto, fechamento, dois pontos Her. Com isso, também vou pegar ponto, fechar, dois pontos, focar Então, dentro da resistência de cores, primeiro, eu vou dizer que gosto de cor, cor, e eu quero a cor preta E então eu vou dizer que é preciso decoração, precisa decoração, nenhuma. Não quero nenhuma decoração. A menos que eu estilize o cursor, o ponteiro do cursor e defina esse arquivo Agora, se eu abrir meu cursor nesse ícone, você poderá ver o resultado. Primeiro, ele muda a cor do fundo e depois faz nosso ponteiro do cursor Crie com sucesso nossa caixa de modelo simples e agora precisamos ocultar essa caixa de modelo. Vou usar a propriedade distal, nenhuma. Eu quero configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele oculta nossa caixa de modelo nesta página. Agora precisamos mostrar essa caixa de modelo quando eu clico no botão de abrir modelo. Quero dizer que quando clico nesse botão , quero fazer com que a propriedade Dist seja bloqueada E quando eu clico no ícone de fechar, novamente, precisamos tornar a propriedade perturbada nula Então, vamos fazer isso usando JavaScript. Isso é tudo para este tutorial. No próximo tutorial, iniciaremos o JavaScript. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 17. Caixa modal adicionando Javascript: Olá, pessoal, é bom ver vocês de volta. Essa é a mesma parte deste tutorial e, nesta parte, iniciaremos a tela Java. Então, depois da última tag dip, vou pegar a tag script, script E em vez da tag de script, primeiro, precisamos obter o modelo. Para isso, vou criar uma variável, onde, e o nome da nossa variável é modelo, modelo igual a, e vamos obter o modelo usando seu DNM Para isso, precisamos digitar o documento, obter o elemento por ID e dentro dos códigos duplos, o nome do ID é meu modelo. Copie o nome do ID e eu vou colá-lo aqui. Então, Semgro dois podem fazer esse slide. Da mesma forma, precisamos pegar o botão usando seu nome de ID, que é meu botão. Vou copiar o nome da classe e vou duplicar essa declaração Desta vez, o nome da nossa variável é button BTN, document dot get element by ID, my button Em seguida, precisamos pegar esse elemento de caneta para fechar o modelo. Para isso, vou criar outra variável em que o nome da nossa variável é span. Extensão igual ao ponto do documento. Desta vez, vou pegar esse intervalo usando o nome da classe. Obtenha o elemento pelo nome da classe. Então, dentro das rodadas, temos que fornecer o nome da classe e nosso nome da classe está próximo Com isso, quero pegar o primeiro I. Em vez do recesso quadrado, precisamos passar o número do índice, Z e, em seguida, subagrupar dois nesta linha Eu selecionei com sucesso todos os elementos. Agora, quando o usuário clica no botão, eu quero abrir o modelo. Para isso, precisamos usar apenas a função. Precisamos executar a função flick para essa variável de botão. Então digite botão, botão, ponto, ao clicar. Igual a, vou executar uma função de função anônima. Em seguida, o ARD Calibre diz: Eu quero fazer um bloco de propriedades de exibição do modelo Para isso, precisamos usar estilo e método de exibição. Deixe-me te mostrar. Tipo Homo, modelo, ponto, estilo, exibição de pontos. Igual a, eu quero dizer que bloqueia. Então semicron dois nesta linha. Vamos configurar o arquivo e clicar no botão Abrir modelo. Depois de pressionar o botão Abrir modelo, como você pode ver, ele mostra o modelo Mas se eu clicar nesse ícone de cruz, ele não pode perder nosso modelo. Para isso, novamente, precisamos tornar a propriedade de exibição nenhuma quando eu clico nesse ícone. Vou duplicar esta seção e, desta vez, vou executar apenas uma função na tag span, span dot onClick igual à Então, se o usuário clicar em um ícone, torne a propriedade de exibição do modelo nenhuma Se eu definir esse arquivo e clicar no botão Modelo, como você pode ver, mostre nosso modelo. Agora, se eu clicar no ícone da cruz, como você pode ver, ele fecha nosso modelo. Crie com sucesso a caixa do modelo. Agora, quando você clica em fora de qualquer lugar do modelo, quero fechar o blog do modelo. Agora, sempre que o usuário clicar fora da caixa do modelo, eu quero fechar a caixa do modelo. Suponha que o usuário clique nesse local. Além disso, quero fechar a caixa do modelo. Para isso, usamos para isso, precisamos selecionar o objeto da janela. Deixe-me mostrar a janela, função onclick on click Então eu quero chamar a função anônima. Como parâmetro, quero chamar um evento. Então, dentro do Calirass aqui, vou usar uma declaração moderna Se eu tiver um ponto alvo igual ao modelo, então stic Calibra diz, eu vou imprimir essa mesma linha Eu copio essa declaração e vou colá-la aqui, modelar a exibição de pontos no estilo de ponto igual a nenhuma, e vou definir este slide. Vamos abrir o modelo. Depois de abrir o modelo, vou clicar em qualquer lugar fora da caixa do modelo. Agora você pode ver que também fecha nossa caixa de modelo. Espero que você goste desse projeto. Então, obrigado por assistir a este vídeo, fique ligado no próximo tutudio 18. Tabela de pesquisa: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo projeto. E neste projeto, vamos criar uma tabela de pesquisa de filtros. Como você pode ver na tela, temos um campo de entrada. Com isso, temos uma mesa. E nesta tabela, temos que contar a força hoje com duas colunas. Em nossa primeira coluna, dizemos nome do aluno e, em nossa segunda coluna, dizemos nome do país do aluno. Suponha que você tenha milhares de estudantes em seu diretório. Nesse caso, você deseja pesquisar o nome de um aluno que contenha o caractere W. Então você pode pressionar W. Como você pode ver, está escrito adicionar um. E esconde toda a fila da mesa estudantil. Mostra apenas a linha específica, adicione uma. Da mesma forma, se você quiser pesquisar Boris entre os dois alistados, sim, você pode Quero ver o nome do país de Bois, de onde ele pertence Então digite Boris. Como você pode ver, ele é do Reino Unido. Nossa tabela de pesquisa é bastante avançada. Vamos começar a prática e ver como podemos criar esse tipo de tabela de pesquisa. Então, finalmente, estamos no meu editor de código do Visa Studio e eu crio um documento ESTimL chamado index dot HTML E eu abro este documento de estimativa usando nosso servidor ativo. E agora o documento está completamente preto. E, como você sabe, aqui vamos criar um T alimentado . Então, vamos começar com HTML Primeiro, vou pegar uma tag de entrada, input. E o tipo de entrada é texto. Além disso, vou atribuir um ID a essa tag de entrada, ID e, para ID, vou pegar minha entrada, minha entrada. Além disso, vou usar um espaço reservado para essa entrada. Último espaço reservado e dentro desse espaço reservado, vou digitar search for name Pesquise o nome. Vamos configurar o arquivo. Se eu mostrar meu navegador, você verá uma barra de entrada. Não se preocupe Começaremos esta seção de entrada mais tarde. Atualizar DR é parte da tabela. Vamos voltar ao código do estúdio do usuário. Agora vou criar um bronzeado. Eu vou usar o tablet Tavin. Nesta tabela, vou atribuir uma ID e o nome da ID é ID igual à minha tabela. Dentro desta tabela, vou pegar a linha da tabela usando Tata TR, tabela Linha Além disso, vou atribuir uma classe a essa linha da tabela. Cabeçalho da classe. E dentro da linha da tabela para criar a cola, precisamos usar o TTAG Este é o nosso cabeçalho, então vou usar TH th, I stars para o cabeçalho da tabela. Nosso primeiro nome de cabeçalho é nome e nosso segundo nome de cabeçalho é país. Além disso, vou dar um pouco de umidade ao cabeçalho da tabela. Vou usar o método de estilo embutido. Nós, 60%. Por nome, eu uso 60% de maconha e também vou usar a mesma propriedade em nossa coluna de países. Copie esta seção. E eu vou colar aqui com 40%. Vou configurar esse arquivo. Se eu mostrar meu navegador, como você pode ver, ele cria duas colunas: nome e país. Criamos com sucesso o cabeçalho de TV. Agora precisamos preencher os dados usando a tag TA. Vamos ao código do estúdio do usuário e, aqui, vou usar a tag TA TR. É a etiqueta TA, vou usar TD TD e vou dormir. Em nossa primeira tag TD significa coluna de nome, vou pegar um nome e o nome é adicionar um. Aram dos EUA. Então eu dupliquei esta seção. Então vou usar outro nome, Ravi Ravi, da Índia. Então, novamente, vou duplicar esta seção. E o nome do nosso próximo aluno é Amsa Amsa, do Paquistão. Por fim, vou pegar outra linha Tab, então dupliquei esta seção, e nosso último aluno é do Reino Unido, e o nome dele é Boris Boris do Reino Unido. Vou configurar esse arquivo. Se eu te mostrar meu navegador, você pode ver aqui que temos dois estudantes de países diferentes. Agora precisamos estilizar essa barra de pesquisa e a tabela. Vamos voltar ao código do Visual Studio. Eu abro meu código do isal Studio e meu navegador lado a lado, podemos ver o design Primeiro, precisamos estilizar a barra de entrada. Para isso, vou usar esse ID, minha entrada. Em seguida, vou criar o estilo Dag style dentro dessa tag de bloco com a tag nosso ID, nome, entrada Depois, nas cores está, primeiro, vou dizer, peso, 100%. Em seguida, vou usar a propriedade pon size. Tamanho do pino: 16 pixels. Com isso, vou adicionar um pouco de padding.PaddingF na parte superior, vou Da direita, vou pegar 20 pixels. E de baixo, vou pegar 12 pixels novamente. E da esquerda, vou pegar 40 pixels. Com isso, também vou adicionar algumas bordas. Fronteira. Quero uma borda de um pixel e quero um bot sólido, mas a cor da nossa borda é cinza. Para definir esse estilo, você pode ver o resultado. Agora, nossas estrelas estão muito boas. Mas também vou adicionar uma margem a partir da parte inferior. Margem a margem inferior até um pixel. Eu estilizei com sucesso a seção de entrada. Agora vamos estilizar a seção da guia. Para isso, vou usar esse ID, minha tabela Hashtag minha tabela Então, dentro dos calibradores minha primeira propriedade é a primeira propriedade que vamos usar, que é o colapso da borda Fronteira. Colapso. Colapso da fronteira é igual ao colapso. Isso vai derrubar as fronteiras. Nossa próxima propriedade está com 100%. Eu vou usar 100%. Nossa próxima propriedade eu vou adicionar, que é um corpo. Borda, eu quero uma borda de um pixel. Também quero uma borda sólida. Eu vou dizer velejador de cor Aztac DDD, cor cinza. Além disso, vou definir o tamanho da fonte e o tamanho da fonte em pixels. Vou configurar esse arquivo. Agora você pode ver as mudanças em nossa dica. Vamos aumentar o tamanho da fonte dessa dica. Aqui eu vou passar 18 semanas. Vou esquecer essa. Agora está lindo. Agora precisamos estilizar as células da tabela, incluindo o cabeçalho. Então, para copiar, minha tabela, e eu vou selecionar as duas. Cabeçalho da tabela e Tb teta. MTVilthTag Wi Vou selecionar MTVil TDTag. Então, dentro da primeira propriedade calibrSSO está o alinhamento do texto. Alinhe o texto, e eu quero levantar o alinhamento, levante, e eu configuro este arquivo Além disso, vou adicionar um pouco de preenchimento entre essas células. Acolchoamento de quase 12 pixels. Isso é bom. Agora nosso Tevis está muito bom Mas se você notar, você pode ver não há linha divisória entre a linha de Tevis Para isso, vou adicionar uma borda. Minha guia e eu vamos selecionar desta vez T para que apareça. Então, dentro das calibragens, vou adicionar uma borda na parte inferior Vou digitar borda inferior borda inferior, um pixel, e quero borda sólida. Com isso, vou dizer cor da borda, DDD, cor cinza Agora você pode ver o resultado. Agora eu quero adicionar o efeito O às linhas da nossa tabela. Quando eu passo o cursor, qualquer uma das linhas. Para isso, precisamos selecionar minha tabela, o cabeçalho da linha da tabela TR So. Porque para o cabeçalho da tabela, aqui definimos um cabeçalho de nome de classe. Com isso, vou selecionar toda a linha da tabela. M TR Colon O. Então, dentro dos cálices, eu quero dizer cor de fundo Cor de fundo, e a cor de fundo é Hatag se, se houver, se houver Vou configurar esse arquivo. É uma cor cinza. Aqui usamos o seletor de combinação. Sempre que abro meus carros na fila do estábulo, como você pode ver, ele fornece uma cor de fundo cinza para a fileira específica. Neste tutorial, fizemos CSS e sua parte. No próximo tutorial, iniciaremos o Java Script Obrigado por assistir a este vídeo, fique ligado no próximo 19. Adicionar Javascript na tabela de pesquisa: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta ao meu editor de código do Visual Studio, como você pode ver, já criamos a tabela e a barra de pesquisa. Como eu disse, a partir desta parte, vamos iniciar o JavaScript. Em primeiro lugar, quero adicionar um evento, evento à nossa seção de entrada. Aqui, vou usar um evento, e o nome do nosso evento está em Keh on Key Este evento chamará uma função quando o usuário soltar a tecla. Aqui eu vou chamar uma função e nome da minha função é minha função. Minha função. Então, vou criar a função dentro dessa tag de script. Então, copie o nome da função e volte para a tag da tabela. Aqui eu vou usar a tag de script. Roteiro. Dentro dessa tag de script , primeiro, vou criar uma função. Como você sabe, o nome da nossa função é minha função. Função e o nome da minha função é minha função. Então, dentro do CariaSF, vou declarar alguma variável e, para declarar essa variável, vou usar Word, nosso primeiro nome de variável é input. C. Nosso segundo nome de variável é filtro. Nosso terceiro nome de variável é tabela. Nosso quarto nome de variável é table row, PR. Nosso nome de quinta variável é teta, TD para iteração de loop, vou usar I e nosso último nome de variável é texto Em seguida, semigre para N nesta linha. Então, primeiro, vou pegar os dados de entrada usando a variável de entrada. Para isso, vamos usar esse ID, minha opinião. Eu copio o nome de ID da minha entrada e volto para a função. E aqui eu quero digitar a entrada igual ao ponto do documento, obter elemento por ID, ponto do documento, obter elemento por ID dentro do Rundss dentro dos códigos duplos Dentro dos códigos duplos ou do nome de identificação, minha opinião. Em seguida, semicurne nesta linha. Para lidar com essa distinção entre maiúsculas e minúsculas dos dados de entrada, usaremos o filtro. Filtro, igual ao valor do ponto de entrada Aqui vou usar uma função chamada duas maiúsculas, duas maiúsculas Em seguida, dentro das prensas redondas, e esta é uma função da função aperks. Em seguida, Semgro para acabar com essa linha. Essa função converterá caixas pequenas em vantagens para lidar com a sensibilidade entre maiúsculas e minúsculas Em seguida, vou mirar na mesa. Para isso, vou usar este Mitf para copiar o nome de ID e a tabela de herótipos iguais a documento, ponto, obter elemento por ID dentro das prensas redondas, dentro do campo duplo nosso nome de ID, minha tabela e, em seguida, ponto e vírgula até a linha ND minha tabela e, em seguida, ponto e vírgula Além disso, vamos atacar Taviaw usando o Tata. T igual ao tablet, obtenha o elemento pelo nome da tag. Então, dentro da rodada ss, vou passar o tagnym que é P tablow, então semelhante à A partir da variável Tavil, vou direcionar os tbows, agora precisamos percorrer todo o tbow e ocultar aqueles que não correspondem Aqui eu vou digitar quatro. Pois dentro da resina redonda, vou digitar I, I como com zero Em seguida, também é necessário definir uma condição. Se menos de TR significa Devera ponto LN. Em seguida, incremente a variável I. Quero digitar I plus plus. Aqui você pode ver que já declaramos o nome de uma variável I. Então eu atribuo I com zero e para executar o loop por todas as linhas da tabela, aqui eu uso a função length com tow tbowt Length Se o valor I sempre corresponder a essa condição , incremente o valor I com um Agora, primeiro, dentro da resina de coli, precisamos direcionar a letra da TV de cada linha Para isso, eu quero usar essa variável TD. TD igual a TR, linha da tabela. Então, dentro da resina quadrada, vou passar o valor I I. Precisamos extrair os dados da tabela de cada linha É por isso que precisamos passar I, porque toda vez que executamos o loop, ele adiciona um novo número de índice à variável I, obtém o elemento pela tag ni. Obtenha o elemento por tagnim. Então, dentro da resina redonda, eu quero marcar dados que significa TD Dentro do D vai, vou digitar os dados da tabela TD. Em seguida, precisamos selecionar os dados da tabela especificada. Aqui, quero pesquisar estudantes pelo nome, não pelo país. Para isso, precisamos passar dentro do quadrado versus zero, seu número de índice. Se você pesquisar estudantes por país, nesse caso, precisará passar em um porque nosso índice começa com zero. Como você pode ver, temos que fazer duas colunas em nosso índice de tabulação zero e índice um. É por isso que passo zero porque quero pesquisar pelo nome deles. Em seguida, semicone para finalizar esta linha. Então, dentro dos quatro circuitos, aqui vou usar a condição p. Se dentro dos versos redondos, os dados da tabela TD forem escritos como verdadeiros, então dentro do Cariss eu vou chamar uma variável chamada texto V. Valor do texto igual a, vou comparar os dados da tabela usando o operador ou Então, primeiro, vou digitar o conteúdo de texto Td dot ou operador td.em um Em seguida, ponto e vírgula para Egisline. Aqui, comparamos o método usando o operador de ordem para obter o valor fixo. Nosso primeiro método é conteúdo fixo e outro método é texto inerte. Se algum dos métodos obtiver o valor, será atribuído a essa variável. Em seguida, insira essa condição de EP, vou executar outra condição de IP. Se eu definir a resolução redonda como valor do texto, vou chamar a função de adivinhação para maiúsculas. Dart. Além disso, vou chamar o índice da função, índice. Então, dentro do ss redondo, vou digitar filter. Aqui, primeiro, convertemos esse valor de texto em maiúsculas. Em seguida, usamos o índice da função. Essas funções mantêm a posição da primeira ocorrência do valor em uma string Então maior que menos um. Então, dentro das calices, como você sabe, percorremos o loop por todo o elemento da linha da tabela Qual conteúdo de linha corresponde ao valor do texto, quero mostrar somente a linha específica e quero destacar todas as outras linhas Nessa condição, vou verificar se o valor do filtro é uma substring do valor do texto Então, dentro da condição IP, eu quero exibir a linha específica. Suponha que você use esse tipo BO em seu feed de pesquisa. Depois de converter esse valor de entrada em maiúsculas, essa função descobrirá que o corpo C é uma substring do valor do texto e, em seguida, mostrará apenas essa linha específica Dentro da calibração, vou digitar ER dentro da resistência quadrada o quadrado resiste a um determinado número de linha, aqui vou usar o método de estilo, ponto de estilo, exibição e, igual a, quero permanecer como está Não quero alterar a propriedade distal de uma linha específica, mas quero ocultar todas as outras funções Para isso, na parte s, caso contrário, o cli é, vou usar a mesma declaração Eu copio esta declaração e vou colá-la aqui. Mas desta vez eu vou dizer esta propriedade, nenhuma. E eu vou configurar esse arquivo. Criamos nossa tabela de pesquisa. Vamos configurar o arquivo e pesquisar alguma consulta. Primeiro, vou digitar Ravi RA. Como você pode ver, depois do tipo A, ele mostra o resultado. Ele mostra a linha específica da tabela e a altura de outras linhas da tabela. Da mesma forma, se eu pesquisar por Bodies O, você também pode ver que está escrita a linha específica da tabela de Bodies. Ele preenche automaticamente o nome do aluno, e eu não preciso digitar e não preciso digitar nome completo e não preciso digitar o nome completo Mas desta vez, vou digitar apenas I. Como você pode ver, depois de pressionar o I, ele retornará o resultado de duas linhas da tabela Robie e meninos porque ambos os nomes contêm a palavra QI Para lidar com a distinção entre maiúsculas e minúsculas, convertemos resultados e consultas de pesquisa em vantagens. Criamos o projeto com sucesso. Obrigado por assistir a esta estátua em vídeo para o próximo projeto. 20. Minha implementação de lista de tarefas HTML e CSS parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo projeto relacionado a JavaScript, HTML e CSS. E neste projeto, vamos criar minha lista de banco de dados. Como você pode ver na tela, temos um campo de entrada. Além disso, temos um botão Adicionar. E abaixo desta seção de cabeçalho, temos uma lista e colocamos todos os quatro itens da lista nessa lista. E agora eu decido adicionar outro item da lista a essa lista. Eu quero comprar alguns Apple, então vou adicioná-los à minha lista. Então, para digitar, compre a Apple. E eu vou pressionar o botão Adicionar. Então, esta é a nossa lista de tarefas, e eu concluo parte do texto dessa lista. Suponha que eu já compre ovos e leia um livro. Em seguida, vou adicionar uma marca de seleção a essa lista. Então, vou clicar nele. Isso adiciona uma marca de seleção a essa lista E se você comprar algum item desta lista por engano, você também pode desmarcá-lo Suponha que você queira deshackear contas de pagamento e, em seguida, clique nele novamente Isso desmarcará o item da sua lista. Além disso, se você quiser remover o item da lista Para, sim, você pode. Suponha que eu queira remover o MIT Advance dessa lista. Em seguida, no lado direito da tela, você pode ver um botão fechado. Se você clicar nesse botão Fechar, como você pode ver, ele removerá o item da lista. É assim que você pode remover o item da lista. Você pode marcar ou desmarcar o item da lista. Além disso, você pode adicionar vários itens da lista o quanto quiser. Sem perder seu tempo, vamos estudar o platel e ver como podemos criá-lo Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando LipServeRetension Eu já criei um documento HTML com o nome index dot Asta. No início, dentro da etiqueta corporal, vou pegar a etiqueta Deep. D. Vou atribuir uma classe e um ID a esse dip DA ID e o nome do ID é MDP E o nome da classe é cabeçalho. Então, dentro dessa tag dip, primeiro, vou pegar o título para a tag, H two, e aqui estou prestes a digitar M two list Em seguida, vou pegar uma entrada, inserir texto da gravata e aqui vou usar I IDequal à minha entrada Em seguida, vou usar outro parâmetro, que é espaço reservado Espaço reservado e, por padrão, vou digitar o título Vou configurar esse arquivo. Até configurar esse arquivo, você pode ver no navegador N. E então precisamos criar um botão Adicionar. Para isso, não vou usar nenhuma etiqueta de botão. Aqui, vou usar a tag span e também vou adicionar uma classe à tag span. Classe igual ao botão Adicionar. E aqui vou digitar add e vou definir esse arquivo. Em seguida, vou adicionar uma lista nodal fora do elemento D, lista nordal UL Além disso, vou atribuir ID a essa lista nodal. ID, ID igual a MUL. Então, um por um, vou adicionar alguns itens da lista. Então, eu vou usar Alita. Em nosso primeiro item da lista, vou digitar B X. Então eu duplico essa linha, e também aqui vou digitar, ler um livro Em seguida, vou adicionar contas de pagamento. Vou substituir a leitura de um livro por pagar contas. E por último, vou adicionar meet, meet, add one. E eu vou satisfazer. Então, esses são todos os itens da lista que eu já adicionei à nossa lista M two do. Então, primeiro, você precisa comprar alguns ovos, depois ler um livro, depois pagar suas contas e conhecer seu amigo e adicionar um. Agora, suponha que você pague suas contas, então você precisa adicionar uma marca de seleção a esse item da lista. Para isso, aqui vou adicionar uma classe. Classe e o nome da nossa classe é chick e eu vou configurar esse arquivo Então, concluímos com sucesso nossa parte da tabela. Agora precisamos começar com a maré. Para isso, no técnico principal. Aqui vou digitar style tag style. E dentro da etiqueta de estilo, primeiro, vou selecionar um seletor universal, iniciar Então, dentro do caliss, a primeira propriedade é o tamanho da caixa. Boxe, dimensionamento da caixa, caixa de borda. Em seguida, vou selecionar todas as tags UL, UL. Então, dentro do CaliSF, vou remover toda a margem e o preenchimento da lista Então, digite margem zero, preenchimento zero. Agora precisamos estilizar todos os itens da lista. Hemo ti, UL, AI, então no ClersSF eu vou fazer ponteiro de cursor, ponteiro de cursor Nossa próxima propriedade é posição, posição relativa. Além disso, vou adicionar um pouco de preenchimento de todas as direções. Estofamento. De cima, vou adicionar 12 pixels. Da direita, vou adicionar oito pixels. E de baixo, também vou adicionar 12 pixels. E do laboratório, vou adicionar 40 pixels. Nossa próxima propriedade é o plano de fundo. fundo, e para isso, vou usar o Axa, o EEE é uma cor meio cinza Em seguida, vou adicionar um pouco de tamanho de fonte. Tamanho da fonte 18 pixels. Com isso, vou adicionar uma pequena transição porque, no futuro, adicionaremos o efeito Hobo nela É por isso que precisamos usar a propriedade de transição. A transição e o tempo de transição são de 0,2 segundos. Agora, a heroína precisa usar outra propriedade importante, que é a seleção do usuário Usando essa propriedade, podemos desmarcar o item da lista. Para isso, vou digitar user select Nun. Vou definir esse arquivo para definir todos os itens da lista com uma cor de fundo diferente Precisamos usar o seletor NGL Deixe-me te mostrar. Vou digitar UL, Ali colon na criança Então, dentro do pincel redondo, vou cortar um pouco. Então, dentro do carlirss, vou usar uma propriedade Antecedentes. E eu vou definir a cor de fundo, uma tag hexa VH, F F nove, F nove Vou configurar esse arquivo. Então, aqui você pode ver o efeito Jebrastip nos itens da lista Em seguida, quero o fundo escuro ao abrir meu cursor nessa tag UL. Desculpe, a etiqueta de IA. Para isso, precisamos selecionar UL, AI e dois pontos O. Vou usar o seletor Over Aí está o coloss em que vou amarrar fundo, fundo, e preciso de uma cor um pouco mais escura Então, vou usar o Hatag DDD. Então, defina esse arquivo. Se eu obtiver meus itens desta lista, você pode ver o efeito Eu já uso a propriedade de transição, transição de 0,2 segundo. É por isso que você pode ver a pequena transição quando ela mudou a cor do fundo. Agora, precisamos estilizar o item específico da lista, e o nome do item da lista está dividido em capítulos. Aqui eu uso um nome de classe lascado. Precisamos estilizar esse item, então eu copio o nome da classe chap 21. Minha implementação de lista de tarefas HTML e CSS parte 2: Então, a partir dessa lista, o usuário já paga suas contas. Preciso verificar esse item da lista. Então, eu preciso estilizar esse item da lista. Para isso, precisamos vincular o nome da classe li dot, que está marcado. Em vez disso, as calibrações. Vou usar um plano de fundo de nome de propriedade. O fundo tem a tag 888. Com isso, também vou mudar a cor da fonte. Eu quero a cor da fonte branca. Colora Hashtag e pega decoração, pega decoração. Vou usar o line through. Se eu definir esse arquivo, você poderá ver o resultado. Portanto, você verificou com sucesso este item da lista e também precisamos adicionar uma marca de verificação antes do pagamento Para isso, precisamos usar um seletor Posurus, e nosso nome Posiduruselect está antes e nosso nome Posiduruselect está antes de algum tipo de verificação de pontos Uli. Então, dois pontos eu vou usar antes do seletor. É um seletor Posius. Então, dentro do Caliss primeiro precisamos criar um conteúdo em branco Conter igual a espaço em branco. Nossa próxima propriedade é a posição. Posição absoluta. Em seguida, vou usar a cor da borda. Cor da borda. Cor da borda, eu quero a cor branca. Tem um ID de etiqueta do estilo A. Border. Eu vou usar sólido. Nossa próxima propriedade fica na fronteira com Bder com. De cima, de cima, vou ter zelo. Da direita, vou pegar dois pixels. Do fundo, também vou pegar dois pixels, do laboratório, vou pegar zelo Em seguida, vou usar o valor máximo. Do topo, vou pegar dez pixels. E do laboratório, também, eu quero pegar 16 pixels. Com isso, vou usar outra propriedade, que é transformar, transformar, e aqui vou usar girar, girar, girar e quero girá-la em 45 graus E também precisamos mencionar a altura e a largura, altura, 15 pixels. Espere, sete pixels. Então, vamos configurar o arquivo e ver o que ele retorna. Depois de configurar esse arquivo, como você pode ver, ele verificou o MR antes das contas de pagamento. Além disso, precisamos criar um botão fechado no lado direito, mas vamos fazer isso usando JavaScript. Mas, por enquanto, aqui vou digitar um comando de linha única no estilo do botão Fechar. Vamos adicionar o SAS quando iniciarmos o JavaScript. Agora, vamos estilizar a seção do cabeçalho. Para isso, vou selecionar esse cabeçalho de classe, cabeçalho pontos do tipo Hemo Dentro das cores, nossa primeira propriedade é a cor de fundo. Cor de fundo aqui eu vou usar a cor de fundo cinza. Ótimo. Eu vou satisfazer. Além disso, vou adicionar preenchimento e alterar a cor da fonte Então, para digitar preenchimento. De cima para baixo, vou usar 30 pixels e da esquerda e direita, vou usar 40 pixels. Nossa próxima propriedade é cor, cor da fonte, cor e eu vou usar a cor branca. Em seguida, quero alinhar o texto. Então digite o centro de alinhamento de texto, e eu vou definir este. Agora está um pouco bom. Agora precisamos estilizar a seção de entrada. Para isso, escrevo aqui dentro do calibre, vou dizer margem Margem zero. Nossa próxima propriedade é fronteira. Freira fronteiriça, então vou dizer que é raio de fronteira. Raio da borda e raio da borda zero. Nossa próxima propriedade é peso, peso, e aqui vou usar a porcentagem de vontade, 75% Acolchoamento de dez pixels. Em seguida, vou usar a propriedade float float lip float link também vou atribuir Tamanho da fonte 16 pixels. Eu vou satisfazer aqui, você pode ver o resultado. Por fim, precisamos estilizar esse botão Adicionar. Para isso, vou usar esse botão de anúncio de classe. Adicione o botão em vez das cores ou das primeiras propriedades preenchimento de dez pixels Nossa próxima propriedade é Nós. Nós, 25%. Vou configurar esse arquivo. Em seguida, vou adicionar um plano de fundo. Antecedentes. E eu vou adicionar Higa V bb9b9 Isso vai adicionar uma espécie de cor cinza. Em seguida, vou mudar a cor da fonte. A cor, e também vou adicionar uma IxavhzTag 555, é Flutue, voe. Centro de propriedades da linha de texto para alinhamento de texto. Tamanho da fonte. E aqui eu vou usar o tamanho da fonte 16 pixels. E eu quero CarzarPointer. Cazar Ponter. Transição, e eu quero a transição em 0,3 segundo. Aqui eu uso a propriedade de transição porque vamos adicionar Hoverific, nossa última propriedade é raio de borda, raio de borda, raio de borda E agora vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. E agora eu quero adicionar o efeito Hobo a esse botão. Para isso, vou selecionar ponto, botão Adicionar e passar o mouse com dois Então, dentro dos vestidos coloridos, nome da nossa propriedade é cor de fundo com cor de fundo, e eu vou usar a hashtag DDD Depois de submeter esse arquivo, se eu abrir meus cartões neste botão de anúncio, como você pode ver, é uma pequena transição Agora, vamos adicionar uma cor um pouco mais escura dessa tonalidade. Pronto para configurar esse arquivo. Se eu abrir meus carros neste botão, você poderá ver o resultado. Agora, se você perceber que há um problema. Nossos itens da lista são anexados a esta seção de entrada. Para isso, precisamos limpar os floats após o cabeçalho. Então, vamos esclarecer isso. Então, no seletor de cabeçalho, vou amarrar o cabeçalho de pontos com ele Aqui eu vou usar o seletor de posius chamado Ater. Então, dentro do Cali diz, nosso primeiro nome de propriedade é conteúdo Contenha espaço em branco. Nosso segundo nome de propriedade é esta peça. Esta peça e eu exibimos Tevin. E nossa última propriedade é clara, ambas. Depois de definir esse arquivo, você pode ver nossa lista de Tut parece perfeita Então, estilize com sucesso nossa lista de Tut. No próximo tutorial, iniciaremos o JavaScript. Obrigado por assistir a este vídeo. Fique ligado na próxima palavra. 22. Minha lista de afazeres implementa Javascript parte 3: Mas olá pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a esse projeto. E agora vamos adicionar um novo item da lista quando eu clicar no botão Adicionar. Para isso, precisamos criar uma função. Então, dentro da tag do script, aqui vou criar uma função e nome da nossa função é novo elemento. Função, novo elemento. Em seguida, insira o cliress, mas antes de criar a função, vou chamar a função Copie o novo elemento da função. Vamos voltar à tag de extensão TML. Aqui você pode ver que temos um nome gasto no botão. Nesta caneta, vou usar o método On Glick ao clicar examinar o curso duplo, vou chamar a função, que é um novo elemento, e vou enviar o arquivo Em seguida, volto para a função e insiro a nova função 11 Primeiro, precisamos criar um elemento LI. Para isso, vou criar uma variável que e o nome da nossa variável é I, I igual a Document, dot, create element. São as prensas redondas, em vez do curso duplo Em seguida, vá para N nesta linha. Em seguida, precisamos direcionar o valor de entrada dessa seção de entrada. Para isso, vou criar outra variável, e nossa variável é o valor de entrada. Igual ao ponto do documento, obtenha o elemento por ID. Então, dentro das prensas redondas, dentro dos códigos duplos, vou amarrar o nome do ID Vamos voltar para a seção TM e ver o nome do ID. O nome do ID é minha entrada. Eu copio o nome do ID e vou colá-lo aqui. A partir desse ID, quero dizer que , nesta seção de entrada, quero pegar o valor. Para isso, executamos dot Val. Então, emigon nesta linha. E agora precisamos criar um nó de texto usando o valor de entrada. Para isso, aqui moto digite onde T é igual a documento, ponto, cria nó de texto, cria nó de texto. Dentro das prensas redondas, vou passar o valor de entrada Então semgro esta linha. Agora precisamos acrescentar esse nó de texto dentro da tag LI. Para isso, vou amarrá-lo, Anexar filho, acrescentar filho, dentro da redonda, vou passar o nó de texto, que é P e Semgon, para essa linha, e vou definir esse Agora precisamos acrescentar essa tag LI dentro dessa tag UL. Mas antes de verificarmos as condições do Ep. Vamos executar a condição if para verificar a entrada, vamos executar se a condição para verificar se o campo de entrada está em branco ou não. Se o campo de entrada estiver em branco, ele retornará uma mensagem. Não é a mensagem, ela retornará uma caixa de alerta e, se não for, anexará o texto dentro dessa lista Para isso, vou usar a condição IP. Se estiver dentro do valor de entrada arredondado, espaço em branco idêntico. Se o campo de entrada estiver em branco, dentro da condição IP, vou alertar uma mensagem. Alerta. Estes são os deuses duplos, eu vou digitar, você deve escrever alguma coisa. E siga essa linha. Caso contrário, dentro do sps do Calibra, eu quero acrescentar este item da lista nesta lista nodal Para isso, precisamos direcionar a lista nodal. Então, para digitar o ponto do documento, obtenha o elemento por ID. Dentro dos vestidos redondos, passar o nome de ID da unorderlist e o nome do ID é minha cópia do nome do ID, depois, voltando ao código aqui vou colar o nome do ID, M Além disso, quero acrescentar o anexo filho São os vestidos redondos, vou acrescentar uma gravata E eu vou configurar esse arquivo. Agora, vamos tentar adicionar algo. Vou configurar esse arquivo e dentro do campo de entrada, primeiro, vou digitar pela Apple. Depois pressione Adbton, como você pode ver, em nossa lista, ele foi adicionado pela Apple Mas se eu esvaziar esse campo de entrada , pressiono Adbton, agora você pode vê-lo retornar uma caixa de alerta Você deve escrever alguma coisa. Mas se você notar, verá que, depois de Hober, não há nenhum botão cruzado neste novo item da lista Então, aqui precisamos adicionar um botão de fechar. E para adicionar esse botão de fechar, vou usar esse mesmo código, esse código porque eu já criei essa tag Pan e criei essa tag pan em nossa seção de estilo. Vou copiar esta seção. Então aqui estou eu para pagar o código. E eu sou o arquivo do serviço de automóveis. Basicamente, isso atribuirá uma classe cruzada ao penta em nosso novo item da lista Novamente, vou adicionar um novo item da lista e vou digitar B Apple. E eu vou pressionar Enter. Agora você pode ver o botão de remoção nesta lista. Mas se eu clicar nesse botão de remoção, como você pode ver, não vai funcionar porque apenas atribuímos essa classe, mas não fazemos nada para remover essa classe e precisamos usar os mesmos quatro loops para ocultar esse item da lista. Vou copiar isso para o loop e vou colar aqui. Vou configurar esse arquivo. Já explicamos esses quatro ciclos em nosso tutorial anterior. Eu não vou explicar isso aqui novamente. Basicamente, ele adicionará freira deficiente quando eu clicar neste ICN cruzado Vamos adicionar um novo item da lista. Aqui eu vou digitar, comprar Apple. Eu vou elogiar Abton. Até pressionar o botão Adicionar, como você pode ver, ele não está funcionando. Acho que há um problema no meu núcleo. Acho que há um problema de fechar a tag porque esse é o fim da tag de fechamento do flop Então, como você sabe, estamos nesse flop dentro da função M. Aqui precisamos passar outra tag de fechamento. Se eu definir esse arquivo, tentarei adicionar um novo item nessa lista. Pela Apple. E eu vou elogiar Abton. Depois de pressionar Adbutton, como você pode ver, e compre Apple em nossa lista Além disso, vou elogiar o botão Crouse. Como você pode ver, depois de pressionar o botão Cros, ele removeu o item da lista Então, crie com sucesso minha lista de Tut usando CSS, Java Script e HTML Então, obrigado por assistir a este projeto. Fique ligado no nosso próximo curso. 23. Minha lista de afazeres implementa Javascript parte 4: É bom ver vocês de volta, pessoal. Esta é a segunda parte deste tutorial e, nesta parte, vamos iniciar o JavaScript. Primeiro, vamos criar o botão Fechar e precisamos anexá-lo a cada um dos itens da lista Então, aqui, eu vou pegar a tag script, script. E dentro da tag do script, primeiro, vou declarar uma variável Mas, e o nome da nossa variável é minha lista de nós. Igual ao ponto do documento, obtenha o elemento por ID. Aqui, vou direcionar todas as tags LI. Digite get element by tag name dentro das redondas dentro das linhas duplas e semicron dois Em seguida, vou declarar uma variável onde I, então aqui temos como alvo todas as tags LI Temos que contar quatro tags LI e agora precisamos percorrer todas as tags LI. Eu quero empatar dentro das rodadas I, I igual a Z ponto e vírgula Então, precisamos definir um códon. Eu menos do que minha nota, eu noto menos em função. Se eu variar menos do que pelo menos N , incremente o loop Eu mais mais. Então, primeiro dentro do clivss, vou criar um elemento, tipo sumo, e nossa variável é span Vamos criar uma tag de extensão. Extensão igual à do documento, cria elemento. Crie um elem. Então, dentro dos Rundresses, dentro do código duplo, aqui vamos criar uma tag span semelhante a Então, dentro da tag span, vamos criar um sinal cruzado e, para criar o sinal cruzado, vamos usar Unicode Nossa palavra de tipo e nome de nossa variável é texto THT, igual a documento, criar nó de texto, criar nó de texto. Então, em vez disso, a tecla redonda , em vez do código duplo, aqui vou usar um Unicode Barra invertida U duplo zero D sete. D seven e semigonTN nesta linha. E para atribuir uma classe, vou digitar, estender, pontuar e aqui vou usar o método do nome da classe. Nome da classe. Então, igual ao interior da porta, os códigos fecham. Eu atribuí com sucesso uma classe a essa etiqueta de caneta, e agora precisamos acrescentar esse texto dentro dessa etiqueta de caneta Para isso, vou digitar span, dot, appNil Appen Então, dentro da redonda, vou passar pelo THT. Em seguida, faça um seminário para esta linha. E agora também precisamos acrescentar essa tag span dentro do item nod leist Então, aqui precisamos digitar meu Nodlstt Append Giant. Então, dentro das redondas, vou digitar span e Semgon two E eu quero configurar esse arquivo. Portanto, criamos com sucesso o botão Fechar e o anexamos dentro de cada lista Agora precisamos estilizar esse botão rosa. Caso contrário, não podemos ver o botão Fechar aqui. Para isso, precisamos voltar à seção de estilo. E aqui vamos estilizar o botão Fechar. Como você sabe, em nosso botão Fechar, atribuímos uma classe e o nome da nossa classe é cravo, cravo Então, por dentro, a Carly diz, primeiro, vou definir a posição, posição e quero definir a posição absoluta Nossa próxima propriedade está certa. Da direita, vou pegar zero. Além disso, do início, vou pegar zero. Em seguida, vou adicionar preenchimento. Adicionando ao pixel. Do topo, eu pego 12 pixels. Da direita, vou pegar 16 pixels. De baixo, vou pegar 12 pixels novamente e, da esquerda, vou pegar 16 pixels e vou configurar esse arquivo. Agora vou adicionar a cor de fundo. Cor de fundo, e eu quero uma cor de fundo cinza. Além disso, vou usar a cor da fonte. Cor e nosso nome de cor é whine. Vou configurar esse arquivo. Se eu definir esse arquivo, como você pode ver, não podemos ver nada nessa posição porque, em JavaScript, precisamos anexar todo o item da lista de notas Para isso, dentro do quadrado vamos passar I. Se eu definir esse arquivo, agora você pode ver o resultado. Aqui você pode ver como adicionar o botão cruzado a todos os itens da lista. Agora eu quero adicionar o efeito Hova a esse botão cruzado. Para isso, vou cortar essas duas propriedades aqui, vou usar um seletor de postagens Deixe-me te mostrar. Dart, feche Colon Então você diz que fecha, eu vou colar as propriedades, a fundo e a cor do texto Vou configurar esse arquivo. configurar esse arquivo, como você pode ver, ao passar por cima do meu carro qualquer botão cruzado, você pode ver o efeito Além disso, você pode ver que mudou a cor da fonte, escura para branca. Então, criamos com sucesso os botões de fechar. E agora eu quero esconder o menor item sempre que clico neste botão de fechar. Para isso, precisamos voltar à seção Javascript e, fora do loop quatro, vou criar outra variável e o nome da nossa variável é Cl Close, igual a aqui, vou direcionar esse elemento pan usando seu nome de classe. Devo digitar, documentar, pontuar, obter elemento pelo nome da classe, obter elemento pelo nome da classe e , dentro das prensas redondas, dentro dos códigos duplos, vou passar o nome da classe, que é próximo, e a linha SemiCronon Então, novamente, precisamos executar um loop. Para isso, novamente, vou declarar uma variável que, como você sabe, em cada tag de span, temos a mesma classe chamada group Precisamos dar uma olhada em todos os itens próximos. Para isso, vou usar quatro grupos para , em vez dos vestidos redondos, I igual a zero, Em seguida, precisamos definir a condição. I, I, menor que a função Fechar ponto de comprimento e semicrot. Se a condição for correspondida, incremente o valor de I com um I mais Então, na lista , eu quero adicionar um evento a cada botão de fechamento Para isso, vou digitar fecha os quadrados que pontuo ao clicar Igual a ela chamará uma função anônima. Então, dentro da resina do carro, desculpe, não é o comprimento do ponto da classe, é o comprimento do ponto fechado Fechar. Então, dentro da resina do carro, aqui precisamos selecionar o elemento div principal específico Para isso, precisamos usar essa palavra-chave. Então digite, e o nome da nossa variável é D igual a esse elemento pai de ponto. Elemento pai. E semicron dois nesta linha. Agora, a questão é por que usamos esse elemento pai de pontos? Porque eu quero direcionar o elemento pai específico dessa tag Span. É por isso que precisamos usar essa palavra-chave. E então precisamos esconder esse elemento DV. Para isso, vou digitar exibição de pontos no estilo Deep dot. Igual ao interior dos núcleos duplos, nenhum e semicron nesta linha Então, sempre que clicarmos no botão de fechar específico, ele exibirá nenhuma propriedade dessa tag principal. Isso significa que ele ocultará esse item da lista. Então, vamos definir o arquivo e clicar no botão de fechar qualquer item da lista. Então, eu quero excluir Mt add one deste item da lista. Então, se eu clicar nesse botão, como você pode ver, ele exclui o Met ad one deste item da lista. E agora precisamos adicionar o símbolo de verificação quando eu clico em qualquer item da lista, algo assim. Suponha que eu já compre g. Para isso, precisamos adicionar o símbolo de cheque. Para isso, novamente, vou criar uma variável. Deixe-me te mostrar como. Fora do loop quatro, vou digitar word e o nome da nossa variável é lista, igual ao ponto do documento i Selector O ponto do documento, qui, é selecionado, dentro das prensas redondas dentro dos códigos únicos Aqui vou direcionar a lista de pedidos. Então, vou digitar UL e seicorn two nesta linha. Na próxima linha, adicionarei um evento a essa lista. Para isso, vou digitar list dot add even isar. Então, dentro das prensas redondas, quero adicionar um evento de clique Então digite. Com isso, vou chamar uma função anônima e vou digitar function. Então, dentro das redondas, vou pegar um parâmetro e o nome do nosso parâmetro é Então, dentro do Clses aqui, vou usar uma condição EP. Aqui, vou verificar se a tag de destino é IA, então quero adicionar uma classe a esse item específico e o nome da classe é barato. Vou adicionar aqui a mesma classe que uso para aplicativos. Então, vou digitar E dentro dos vestidos redondos, evitando etiqueta NIM. Idêntico a. É o curso único I. Depois, dentro dos carros. Se o alvo, se o tegnímio-alvo, for Ali, quero adicionar em classe a esse Ali direcionado Para isso, vou digitar V método de lista de classes de destino, lista de classes. Aqui eu vou usar o método Tule. Como você sabe, o método de toalha funciona como um interruptor, algum tipo de alavanca. Então, dentro das rodadas, dentro do núcleo único, vou digitar o nome da classe que é chick e servir para finalizar essa linha Na primeira vez, se eu clicar nesse item, ele adicionará a classe e, na segunda vez, se eu clicar no mesmo item, ele removerá a classe. Quero dizer que, pela primeira vez, ele adicionará a classe check. Se eu clicar no item da lista grande. Se eu clicar no item da lista novamente, ele removerá a classe de verificação. Então, para configurar esse arquivo, vou clicar neste item da lista, Redemlick este item, como você pode ver, ele adiciona um cheque assinado a este Da mesma forma, se eu clicar em Mt advance você também poderá vê-lo adicionar um ícone marcado a este item da lista. E se eu clicar novamente, ele removerá o cheque assinado. Agora vamos ao JavaScript. Então, fora desse evento, se a condição não for compatível, retorne os nevoeiros Semgron two can Essa é a segunda parte deste tutorial. Nesta parte, aprendemos como podemos adicionar o botão Fechar. Também aprendemos como podemos adicionar o botão de verificação aos itens da lista. Na próxima parte deste tutorial, aprenderemos como adicionar novo item da lista depois de pressionar o botão Adicionar. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial