TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda hälytys-, kehote- ja vahvistusvalintaikkunoita JavaScriptin avulla?

5

Luo hälytysikkuna JavaScriptin avulla

Hälytys-valintaikkuna on ponnahdusikkuna, joka ilmestyy selaimessa vain "OK" -painikkeella ja ilmoittaa käyttäjille hyvin pienen viestin. Hälytys-ruutua käytetään varoitus- tai tietosanoman näyttämiseen. Esimerkiksi:

  • Tervetuloviesti käyttäjälle, kun sivusto ladataan
  • Virheellisen tuloksen validointitulos
  • Tietoa sivuston seisokista tai ylläpitoajasta.

Täällä keskustelemme hälytysikkunan luomisesta JavaScriptin ja esimerkkikoodin avulla. Lisätietoja hälytysten luomisesta Bootstrap 4: ssä.

Kuinka se toimii?

JavaScript -hälytys() -toiminto käynnistyy, kun komentosarja käynnistetään sivulla, joka näyttää merkkijonoargumentin ponnahdusikkunassa. Ennen kuin hälytysruutuun on vastattu, selain ei jatka verkkosivun lataamista.

Syntaksi

alert("Your Message Here");

Esimerkki

Alla on esimerkki hälytyslaatikon koodista JavaScriptissä. Tämä ruutu avautuu, kun sivu ladataan tervetuliaisruuduksi, ja siinä on mahdollisuus napsauttaa "OK" -painiketta tai sulkea valintaikkuna Google Chromen kaltaisissa selaimissa. Heti kun käyttäjä napsauttaa "OK" (tai sulje), kuva ladataan. Selain lopettaa sivun käsittelyn siihen asti, kunnes hälytyslaatikko vastaa.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

Alla on kuva hälytyslaatikosta Chrome -selaimessa, kun yllä oleva koodi suoritetaan.

Kuinka luoda hälytys-, kehote- ja vahvistusvalintaikkunoita JavaScriptin avulla?

JavaScript Alert Box Google Chromessa

Luo kehoteikkuna JavaScriptin avulla

Kehote -valintaikkunaa käytetään näyttämään räätälöity tulostus verkkosivulla käyttäjän syötteen perusteella. Toisin kuin hälytyslaatikko, jota käytetään lyhytsanoman näyttämiseen yhdellä "OK” -painikkeella, kehotteessa on seuraavat ominaisuudet:

  • Näytä ennalta määritetty viesti laatikossa
  • Käyttäjä voi syöttää syötteen tekstikenttään
  • Käyttäjän syöttö välitetään takaisin komentosarjalle
  • Kehotelaatikossa on kaksi painiketta "OK" ja "Peruuta"

Kuinka se toimii?

Kehotusruutu pysäyttää myös verkkosivun lataamisen siihen asti, kun käyttäjä saa vastauksen. Se tarvitsee seuraavat kaksi tietoa:

  • Kehoteikkunassa näytettävä viesti
  • Tekstikentässä näytettävä oletusteksti – tämä on valinnainen; voit jättää oletustekstin tyhjäksi
  • Kun “OK” -painiketta napsautetaan, ruutuun syötetty teksti välitetään komentosarjalle
  • Kun "Peruuta" -painiketta napsautetaan, NULL -arvo välitetään komentosarjalle takaisin

Syntaksi

prompt ("Message", "Default Value");

Esimerkki

prompt ("What is the color you like?", "Green");

Käytännön esimerkki nopeaan valintaikkunan luomiseen JavaScriptin avulla

Kehotusruutua voidaan käyttää monissa käytännön tilanteissa, ja yksi esimerkki on tervehtiä käyttäjää nimen kanssa. Seuraava koodi kysyy käyttäjänimeä, kun sivu ladataan, ja lisää sitten nimen tervehdysviestin kanssa näyttääksesi sen selaimessa.

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

Miltä se näyttää?

Alla on kuva kehotelaatikosta Chrome -selaimessa, kun yllä oleva koodi suoritetaan.

Kuinka luoda hälytys-, kehote- ja vahvistusvalintaikkunoita JavaScriptin avulla?

JavaScript -kehote Google Chromessa

Kun käyttäjä syöttää nimen ja paina “OK” -painiketta, nimi välitetään komentosarjalle ja kaikki viestit näytetään document.write -toiminnon mukaisesti. Syöttökentän tyhjää tilaa pidetään myös kelvollisena nimenä JavaScript -kehotteessa.

Kehoteikkunanäyttö, jossa on käyttäjänimi

Kun käyttäjä napsauttaa Peruuta -painiketta, tyhjäarvo välitetään ja se näkyy selaimessa nimen sijasta.

Kehotelaatikon näyttö tyhjällä arvolla

Luo vahvistusvalintaikkuna JavaScriptin avulla

Tämä on kolmas JavaScript -valintaikkunatyyppi kehote- ja hälytysruutujen lisäksi. Tässä osassa kerrotaan, miten vahvistusvalintaikkuna luodaan käyttämällä JavaScriptiä, jolla vahvistetaan käyttäjän tekemä toiminto.

Vahvista -valintaikkunassa on seuraavat ominaisuudet:

  • Ennalta määrätty viesti näytetään laatikossa
  • Kaksi painiketta – OK ja Peruuta

Kuinka se toimii?

Vahvistusruutu, kuten muutkin valintaikkunat, pysäyttää suorituksen, kunnes käyttäjä saa vastauksen. Käyttäjän toiminta voi olla joko OK tai Peruuta.

  • Arvo true siirtyy kutsuvaan ohjelmaan, kun OK -painiketta painetaan
  • Arvo false siirtyy soittavalle ohjelmalle, kun Peruuta -painiketta painetaan

Syntaksi

confirm ("Message");

Esimerkki

confirm ("Do you want to close this window?");

Käytännön esimerkki

JavaScript -koodin noudattaminen käyttää kehotusta kysyäkseen käyttäjältä kysymyksen. Näyttöön tulee vahvistusruutu, joka osoittaa, että vastaus on oikea tai väärä.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

Miltä se näyttää?

Alla on kuva kehotelaatikosta Chrome -selaimessa, kun yllä oleva koodi suoritetaan ja vahvistusruutu näytetään kehotteen tekstiruudussa annetun vastauksen oikeellisuuden perusteella.

Kuinka luoda hälytys-, kehote- ja vahvistusvalintaikkunoita JavaScriptin avulla?

JavaScript vahvistaa oikean vastauksen

Kuinka luoda hälytys-, kehote- ja vahvistusvalintaikkunoita JavaScriptin avulla?

JavaScript vahvistaa väärän vastauksen

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja