*ATUALIZADO* Série completa do JavaScript 2023 — Parte 6: alertas do JavaScript, caixas de diálogo e muito mais

1. Apresentação do curso: Habilidade bem-vinda. Estudantes Shea para outra classe incrível. É um belo dia lá fora, e é outro belo dia para aprender sobre JavaScript. E o que é essa aula? Bem, muito simplisticamente. É sobre uma enfermeira em script Java, e todos nós vimos aquelas notas incrivelmente irritantes que na tela realmente horrível. Mas você precisa aprender usando-o. Então é sobre isso que isso custa. Nós vamos estar falando sobre o método de nota de script Java, que está disponível para nós no projeto janela muito. Real vai estar falando sobre confirmações e promessas, e então vamos terminar essa aula construindo nossos próprios alertas muito personalizados. Bem, olha, caixa de diálogo e você pode estar preocupado que você possa estar pensando, Clyde, eu nem sei como escrever script Java. Não sei como isto funciona. Pânico. Vamos passar por isso, bastão por bastão. Então pegue um café. Vamos pegar um Red Bull. Seja o que for que se adapte à sua fantasia, fique motivado e eu te vejo na cruz áudio oh 2. Alerta - como criar um evento em clique para um botão: Alertas para muitas interfaces e no passado, as mensagens são feitas apenas usando alerta JavaScript nativo. E você e eu sabemos o quão frustrante e feio Dale. E um dos problemas é que a função JavaScript de alerta nativo, é um objeto do sistema, e isso significa que não podemos manipular a aparência e está literalmente vindo diretamente do navegador. Então, para manipular alertas, como eles aparecem no campo, temos que projetar nosso próprio CSS na retroiluminação. Então, vou mostrar-vos alguns exemplos de alguns alertas. Vamos dar uma olhada. Então aqui vamos nós. Eu tenho uma página HTML simples chamada alerta para cima e indo. Então vamos começar agora produzindo uma página HTML. E agora podemos chamar esse exemplo de alerta. E você pode criar esse alerta de várias maneiras. Você pode criar botões, você pode fazer entradas, você pode fazer imagens. Eu só vou fazer uma entrada aqui. Torná-lo um botão que você pode fazê-lo de muitas maneiras. Então vamos fazer disso um botão. E vamos fazer um onclick. E é fogo uma função que podemos chamar o que quer que fomos deliciosos chamado Mostrar alerta. E vamos fazer o valor dessa entrada. Clique em Camino para executar um alerta JavaScript. Agora, a única coisa que resta a fazer é definir essa função, e que é JavaScript XHR restante. E JavaScript tem que ser inserido entre tags de script executadas. Então vamos colocar isso online é um botão que criamos e, de fato, ticket, o que você espera que aconteça? Sim, esta largura, quão fácil é isso? Você acabou de ver como impediu um botão com um evento de clique. E neste alerta está JavaScript. Isso é entrar em mais alguns exemplos. 3. Alerta - como escrever texto para a tela depois do alerta de ser acionado: Tudo bem, então vamos ficar cada vez mais complicados à medida que vamos dizer agora que queremos clicar em um botão mostrado alerta. E quando você clica em OK nesse alerta, texto é substituído na tela por algo. Como faríamos isso? Vamos lá. Vamos criar um documento HTML. E novamente, vamos criar um botão com um evento onclick. Vamos chamar este alerta. Alerte-me. Eu me amei não está definido. Mais uma vez, temos que agitar o javascript. Javascript deve ser inserido dentro de tags de script. Precisamos agora definir a função de carga MY. Você não se preocupa com a sintaxe em torno de funções. Vamos aprender sobre isso em breve. Você verá, você verá como tudo se encaixa e como escrever uma função. Agora, depois de clicar em alerta de bem-estar OK, o que queremos executado abaixo dele? Lembre-se com JavaScript, e nós vamos realmente é o navegador para o pasa. Começa de cima para baixo. Então, uma vez que o soluto é feito, ele vai executar o que está abaixo dele. E digamos que queremos na tela. Isso foi substituído por JavaScript. Isso ocorre conto de JavaScript. Esta tentativa e executar este código, eu esperaria para ver um alerta, não vai esperar ver um botão. Quando pegarmos o botão, devemos ver um alerta. E depois do alerta, devemos ver texto colocado na tela. Porque usamos documentos. Documento é, É um objeto global. É quase, não é bem o rei. Lembrem-se das janelas do rei. Mas com sob a janela você tem este grande objeto chamado documento. E este documento é seu crachá de peso e sempre dizendo, estamos acessando um método chamado certo? O que literalmente apenas coloca, assume essa página. Simples como ele. Vamos ver como isso se parece. Dias nosso botão. Chute-me, por favor. O meu bilhete é um alerta. E o que acontece quando eu clicar em OK? É preciso o que é substituído. Que conjunto incrível. Vamos seguir em frente. 4. Diálogo de confirmação - condicionado em caso de instrução: Vimos alertas. Agora vamos olhar para outra função JavaScript, uma confirmação. Novamente, vamos começar com uma página HTML simples que tem um botão. Desta vez no clique, digamos obter confirmação. Tenho certeza, que ainda precisamos definir em JavaScript. Então vamos agora definir esta função de confirmação get. Entramos em JavaScript dentro de tags de script. Temos que dizer JavaScript que estamos definindo uma função com a palavra-chave function. E vamos confirmar no leitor de tela que vem de, bem, é apenas uma função JavaScript. Nessas funções JavaScript, você vai apenas aprender como um programa ao longo do tempo, você só vai começar a lembrar o que essas funções nomes fora, mas esta é chamada de conflito. Então eu não codifiquei nada por aí. Confirme se está embutido. E vamos apenas pedir ao usuário para U12. Continuação deve nos dar o cara e vamos ver o que acontece. Então devemos ver um botão. Quando clicamos no botão, devemos ser exibidos com uma caixa de diálogo de confirmação. Botão Confirmar. Agora, deixe-me me livrar desse ponto-e-vírgula. Colocando JavaScript, este é apenas HTML é o botão de confirmação quando o nosso ticket D12 continuar. E está literalmente me pedindo OK ou Cancelar. Mas agora se eu clicar em OK ou Cancelar e nada acontecer, vamos tentar descobrir como codificar algo. Se eu clicar em OK, como faríamos isso? Vamos voltar ao código. Temos esta caixa de diálogo de confirmação. E o que o JavaScript faz é que podemos realmente armazenar a variável ok., o resultado de onde o usuário clica em OK ou Cancelar em uma variável. E nós vamos entrar em variáveis na próxima seção para manter apertado apenas significa um recipiente onde podemos armazenar informações. Então vamos armazená-lo em uma variável chamada decisão. Assim, a decisão do usuário vai ser armazenado para Penny e valor líquido vai depender se eles clicaram sim ou não. E agora posso codificar algo. Vamos, vamos codificar algo com uma declaração se. E mais uma vez, se falarmos, vamos entrar mais tarde. Eu só quero que você tenha uma ideia de como podemos começar a trabalhar com esse tipo de eventos JavaScript. E antes de terminar a codificação aqui, lembra como passamos por diferentes tipos de filha em pênis JavaScript, por que tipos de Donald são importantes? Esta caixa de diálogo de confirmação, se o usuário clicar, sim, ela retorna true. E se o usuário cliques conhecidos retorna false, este é apenas o nosso JavaScript é construído esta função em seu código. Então o que podemos dizer é que podemos dizer se a decisão for igual a verdadeira, é documento, certo? O usuário deseja continuar. Senão. E isto é, se a decisão for falsa, isso é apodrecimento. O usuário é dimensionado e não deseja continuar. Espero que mesmo que você não entenda completamente a sintaxe que você pode tipo de ver, você pode tipo de seguir o que eu estou tentando fazer. A primeira coisa que fizemos foi criar um botão. E o botão não faz nada até que o usuário clique nele. Isso é o que este onclick significa. Quando OnClick como cliques, nós net evento é acionado. Analisador vai ver esta função, obter confirmação e ele vai, em seguida, encontrar esta função. Vai saber que é JavaScript. Porque nós o colocamos na tag de script. Ele vai encontrar essa boa função de confirmação e executado. Vai dizer: “Ok, legal, lamber decisão é igual a confirmar.” Deseja continuar? Quando vir a confirmação? Ele sabe que isso é uma função, então ele vai executá-la. E, em seguida, se o usuário clicar em sim, ele vai retornar um verdadeiro booleano. E vamos escrever isso na tela. E se estes forem clicados, cancelar será falso. Então isso não vai ser verdade. E neste será exibido na tela. Vamos ver isso em ação. Então estes são o botão de confirmação. Nós clicamos nele. Se quiser continuar com isso, diga não. Os usuários assustados e não quer continuar. Perfeito, bundas. Atualize sua página. Vamos tentar ir. Clique no botão. A dizer, ok, estes querem continuar. Isso funciona. Esperemos que, tendo uma sensação para isso, quão legal é um incrível e intuitivo. Vamos continuar. 5. De imediato: Vamos agora olhar para alguns prompts JavaScript. Nós olhamos para Alertas, nós olhamos para conformações. Agora, vamos ver os prompts. Novamente. Começamos com um documento HTML5. E podemos fazer isso de várias maneiras. Novamente, malicioso fazer uma entrada por agora, e vamos fazer um unclick, vai fazer prompt me função. Então nós temos o nosso botão, mas agora quando o navegador vem para executar uma função chamada prompt me, ele não vai encontrar um, que é por isso manteiga escrever palavra-chave função JavaScript. Esfriamos para me alertar. E agora vamos emitir um prompt JavaScript realmente não é difícil. Você verá agora com o prompt de palavra-chave, mensagem erato, Meany, warthogs D tem. E então sim, você pode apenas dar um pequeno lugar titular falta uma pequena dica. Você pode dizer em número. Vamos ver como isto se parece. Deixe-me fechar as outras abas. Continue esquecendo que isso não é JavaScript para não manter colocando ponto-e-vírgula no final. Isto é apenas HTML. Então me avise como nosso botão. Clique no botão. Quantos javalis e Yazid pequena dica que dissemos em número de água. Agora octano distante e eu clicar em OK, nada vai acontecer porque nós não dissemos JavaScript o que fazer sem valor de entrada. Lembre-se, nós meio que fizemos um pouco disso com a confirmação. Bem, como fazemos isso com prontidão? Vamos, vamos dar uma olhada. Vamos fazer isso. A primeira coisa que temos que fazer é parar a decisão de usos em algo, em uma variável. Vamos fazer isso. Digamos número, porque sabemos que o usuário vai inserir um lambda número é igual a qualquer que seja o uso colocado. Faz visto até agora. E lembra como falamos sobre literais de modelo? Espero que sim, porque vamos documentar, certo? E vamos usar literais de modelo como dois traços de Beck. E vamos dizer que sim. E quando você digita uma variável dentro de um literal de modelo, você precisa usar o sinal de cifrão e os colchetes. E nós chamamos de número, número. E agora se eu salvar isso e então entrarmos em nossa folha, Yana atualizar, vamos fazer isso. Vamos fazer um prompt em número de javali. Digamos que eu tenha três marcas d'água e clique em OK. Você tem três águas é patês. Isso é muito. E você vê como ele é inserido dinamicamente os três na página, isso é incrível. Isto é o que o JavaScript é tudo sobre. Espero que esteja se divertindo tanto quanto eu. Vamos continuar. 6. Crie um alerta personalizado: Lembre-se no início que eu disse que a função de alerta JavaScript é um objeto do sistema, que significa que não podemos mudar sua terra. Então, como podemos obter guias de alerta JavaScript realmente legais aparecendo? Ou eu não vou usar plugins porque este curso é sobre ensinar-lhe JavaScript. E vamos apenas criar um. Vamos criar um nós mesmos com baunilha, HTML, CSS e JavaScript. Como sempre, vamos começar com um documento HTML e vamos criar um botão. E agora vamos criar uma função onclick. E digamos que eu. E você pode ver à direita, temos um pequeno botão aqui, me marque. Mas é claro que nada acontece quando entramos. Agora, antes de entrarmos no JavaScript, eu realmente quero criar como seria o alerta e como eu gosto de pensar nisso. Cria uma tag div, div que contém todo o nosso alerta. E então dentro dessa etiqueta div, eu só quero ter um aquecimento. Digamos que isto é uma mensagem de aviso. E então eu uma vez um botão que o usuário pode clicar. Ok, vamos fazer isso. Vamos ter uma tag div e digamos ter uma identificação disso. Este vai ser todo o tanque contendo o alerta. E eu queria bater e vamos ter outro e ele dizia que essa é apenas a mensagem passada esta mensagem de manhã. E então vamos ter um botão. Misha diz “glosses”. Sim. Não sei porquê. Qualquer coisa. Guarde isso. Apenas parece gobbledygook na página web é a nossa mensagem, é o nosso botão OK novamente não faz nada. Agora, vamos antes de fazer JavaScript agora só quero estilizar esta mensagem de aviso Kitty. E eu sei que isso não é um bom treino, mas eu vou colocar o estilo na cabeça. Eu não quero criar folhas de estilo externas e tudo isso agora, nós podemos apenas fazê-lo para obter equidade. Então, o que devemos fazer primeiro? Vamos fazer a div inteira. Então isso é apenas usando nossas técnicas de estilo CSS padrão para identificar o ID. E agora podemos estilizá-lo juntos. Vamos exibi-lo como um bloco. Colocou uma cor de fundo. Cinquenta e oito, cinquenta e oito. Começando a ver alguns resultados. Posição fixa, borda, dois pixels. Só te mostrando como essa coisa está sendo inventada. Vamos colocar isso no mesmo tempo. Vamos torná-lo um pouco mais largo. Mas cair para o seu início é apenas empurrá-lo, levantar um pouco mais sobre. Esta não é a maneira mais ideal de fazer as coisas que eu só estou tentando fazer o trabalho para sacudir um pouco para cima. E agora vamos colocar um pouco de estofamento. E seu alinhamento que leva para o mesmo tipo. Está ficando. Está me pegando, acho que quero sentir a vibração. Vamos agora estilizar esta mensagem de aviso. Como é que lhe chamamos? A mensagem dourada? Vamos torná-lo uma cor branca para que possamos realmente lê-lo. O que mais precisamos de métodos? Marginal parece terrível. Anjum topo, margem, fundo. Esse deve ser o nosso botão de longitude e longitude. Veja Stine te disse que Stein parece muito maior. E no último dia para estilizar este botão OK porque isso parece tabela. Diga novamente, o que foi chamado de Ética data de volta para ele e é sobre o que você faz com isso. Vamos fazer uma cor de fundo. É PDS. E nós não escutaríamos, temos exatamente fronteiras quadradas. Não parece tão legal. Na minha opinião. Bordas ligeiramente arredondadas. Provavelmente nem o vejo, mas é a minha sutil melhoria no design. Agora podemos fazer uma franquia já de um licitante. E o fundo da margem precisa de um pouco de trabalho. Parte inferior da margem. E a outra coisa que eu quero mostrar com meu mouse paira sobre o, ok, eu queria me tornar um ponteiro. Então só poderia ajudá-lo nesse ponteiro. Agora, em um pairar sobre, ele se torna um ponteiro. Então você sabe, é uma batalha. Legal. Vamos torná-lo um pouco mais largo. Vamos adicionar um pouco de estofamento. Acho que vou dizer que está com bom aspecto. Eu disse que parece poderoso. Eu só puxo este inverso. Eu disse está olhando como um bom alerta guia Wave ID em outro pop-up que vimos. E você pode decidir que essas coisas seriam como se eu tivesse feito um trabalho muito difícil. Agora vamos adicionar JavaScript. Novamente, vamos borda fora do roteiro. Apenas vá até o topo. Lembre-se que o JavaScript tem que estar dentro de tags de script. E onde devemos colocá-la? E onde devemos colocá-lo como? Ponha no topo. Sim. Vamos colocá-lo no topo. O guião. O guião. Vamos esconder toda esta caixa de aviso de confirmação. Então, no momento nós temos que eles bloqueiam menos Cisco exibir nenhum. E devemos ver isso desaparecer. Mas quando queremos, quando clicamos neste botão, queremos vê-lo. Bem, a primeira coisa que precisamos fazer é começar a criar uma função para o botão de asas clicado, certo? Se você olhar para baixo, deixe-me apenas rolar para baixo novamente para a parte inferior do código que você pode ver este botão tem uma função que nós chamamos Lead me. Precisamos agora definir essa função em JavaScript. Caso contrário, nada acontece, que é o que está acontecendo aqui. Então vamos começar a definir uma função chamada mim. Função. E o que queremos que aconteça? Bem, a primeira coisa que queremos que aconteça é que queremos mostrar uma mensagem de alerta. E para fazer isso, temos que identificar toda a tag div que tem o alerta que tivemos com uma identificação de conforto. Então vamos chamá-lo de caixa de confirmação ou falta de uma palavra melhor, documento. Remender em sua página da Web, JavaScript tem um método embutido chamado getElementByID. E ligamos para a identificação. Então agora nós temos. Então a segunda coisa que queremos fazer é, você sabe, quando isso alerta abertura no botão OK, queremos identificar o botão OK porque quando o botão OK é clicado, queremos que modal apareça, que o alerta desapareça. Então essa é a segunda coisa que queríamos. Atrasado. Ok, botão igual documento, getElementsByClassName. O que acabou rápido. Lembre-se disso de novo. Chamamos-lhe. Agora, se nós apenas levantá-lo assim, ele realmente vai voltar. Quando você encontrar um elemento por nome de classe, ele retorna o que é chamado de uma lista de nós. E é quase como um objeto de matriz. Então isso não é o suficiente. Nós só temos que acessar o primeiro elemento dessa matriz, que é o que isso está fazendo lá. Agora, agora que temos esse botão OK, o que queremos fazer é definir um desclique. Significa que quando o usuário clica nisso, tudo bem, por toda a caixa de diálogo desaparece. Então vamos fazer isso. E permitam-me que acrescente comentários aqui. E passamos por comentários. Este é o botão no alerta modal. E agora queremos ocultar o alerta modal quando um botão é clicado. Então vamos fazer isso. Então vamos adicionar um ouvinte de eventos. No clique, OK, botão no clique. E temos que definir a função novamente. Mas vamos fazer tudo em um só passo. E você verá mais tarde nós realmente não temos que escrever esta palavra-chave grande é uma maneira mais curta de fazê-lo, que é uma nova sintaxe. Ensino-te isso mais tarde. Só quero que entenda o que estamos fazendo aqui. Em seguida, outro método embutido dentro dos navegadores e JavaScript eo DOM é atributo doente. Você pode literalmente alterar atributos e elementos diferentes em sua página. Então vamos pegar essa caixa de confirmação, que definimos acima. E podemos ver um atributo. E o que os atributos fazem em um estado onde lembre-se que queríamos que ele fosse exibido. Agora como nenhum botão ou malha é clicado, o atributo que queremos fazer o estilo é o primeiro argumento para este método. E o segundo é o que queremos mudar. E isso é mostrar a nenhum. Suave, certo? Então agora nós definimos o que acontece com o botão dentro do modal nerd, mas nós realmente não mostramos o modal de qualquer maneira. Então não podemos fazer nada com isso. Bem, vamos colocar aqui e dizer “show modal”. Temos a caixa de confirmação, atributo S8. Queremos escolher o estilo e queremos exibir. Bloquear. Deve dar uma chance. Como devemos provar boas obras de frutos do mar. Vamos clicar no botão. O que deu errado? E deixe-me foi que não está funcionando quando outro Click Me. Então algo que não podemos Jake é se nós consolarmos log, sim, nós podemos blogar alto. Recebe o evento clique está funcionando. Vamos para a consola. E vamos clicar no botão. Você pode ver que não está acontecendo nada. Então, obviamente, este alerta me função como mapeamento chamado almofada é por isso que na cor me em Lech deve estar em cheque. efeito de verificação funciona agora. E estes são altos e como eu vou querer. Ok, ótimo. Deixe-me esconder isso imediatamente. Que atualizar uma página quando eu clicar aparece, nós identificamos este botão OK. Então, quando eu clicar em OK, ele vai executar esta função que diz em um atributo sit para exibir nenhum e ele desaparece. Então este é realmente um exemplo de como criamos um alerta do zero, de literalmente riscado em HTML, CSS e um pouco de JavaScript. E nós literalmente criamos nosso próprio alerta personalizado. Isso é incrível. E isso vai ficar no caminho para ser incrível, CUDA. Vamos continuar.