Mitä kehote tarkoittaa javascriptissä. Varoita, kehoita ja vahvista menetelmät JavaScriptissä

JavaScriptissä on kolme perustoimintoa, joiden avulla voit vastaanottaa tietoja käyttäjältä jatkokäsittelyä varten skripteissä. Nämä ovat varoittavia, kehottavia ja vahvistavia. Mihin niitä käytetään, miten niitä käytetään ja muita vivahteita käsitellään myöhemmin tässä artikkelissa.

hälytys

Käytetään näyttämään modaaliikkuna selainnäytössä (tämä tarkoittaa, että käyttäjä ei voi napsauttaa sivulla mitään ennen kuin hän sulkee tämän ikkunan. Tässä esimerkissä ennen kuin hän napsauttaa ikkunassa "OK").

Kun hälytyksen sisältämä viesti on näytetty, komentosarjan suoritus keskeytetään ja sitä jatketaan modaaliikkunan sulkemisen jälkeen.

Jos kenttä on täytetty ja OK napsautetaan, käyttäjän syöttämät tiedot palautetaan skriptiin.

Tämän komennon syntaksi on hieman monimutkaisempi kuin edellisen, koska sen avulla voit asettaa viestin tekstin käyttäjälle ja kentän sisällön tietojen syöttämistä varten, jotka näkyvät oletusarvoisesti: result = prompt(title , oletusarvo ); , Missä

• otsikko – viesti, joka näytetään käyttäjälle modaaliikkunassa. Argumentti vaaditaan.
• oletus – mitä tekstinsyöttökentässä näytetään oletuksena. Se on myös pakollinen, koska jos sitä ei ole määritetty, se voi johtaa virheisiin joissakin selaimissa. Jos haluat jättää tietokentän tyhjäksi, aseta kehote seuraavasti:

  var myTest = prompt("Kaikki tiedot" , """);

Pieni esimerkki kehotteen käytöstä:

var year = prompt("Minkä vuonna valmistuit yliopistosta?", 2008); alert("Olet valmistunut " + vuosi + " vuosi!" ) ;

Yleensä tämä käsky käytetään keräämään käyttäjiltä tietoja, joita komentosarja tarvitsee jatkaakseen työskentelyä.

vahvistaa

Edustaa myös modaalinen ikkuna. Kuten nimestä saattaa arvata, sitä käytetään yleensä sovittamaan jotain käyttäjän kanssa.

Siksi se on suunniteltu - vuorovaikutusta varten se tarjoaa käyttäjälle OK- ja CANCEL-painikkeet, jotka palauttavat loogiset arvot skriptiin todellisia arvoja ja väärä arvosanat: 4 (keskiarvo 4/5)

Ja jälleen toivotan sinut tervetulleeksi toiseen JavaScript-kielelle omistettuun aiheeseen, jossa analysoimme hälytys-, kehotus- ja vahvistusmenetelmiä. Nämä menetelmät ovat sisäänrakennettuja Javascript-kieli ja auttaa meitä olemaan vuorovaikutuksessa käyttäjän kanssa.
Alert näyttää selainnäytöllä ikkunan, jossa on tietyt tiedot, ja joka keskeyttää komentosarjan, kunnes käyttäjä napsauttaa OK.
Kehote näyttää yleensä ikkunan, jossa kysytään käyttäjältä kysymys, johon hänen on vastattava tietyssä tekstikentässä ennen kuin napsautat OK. Käyttäjä voi myös syöttää mitään painamalla Peruuta-näppäintä.
Vahvista näyttää myös ikkunan, jossa käyttäjä ei voi enää kirjoittaa mitään tekstikenttään, vaan voi vain napsauttaa OK tai peruuttaa.
Ja nyt, lyhyen esittelyn jälkeen, siirrytään tarkastelemaan kaikkea yllä olevaa käytännössä.

varoittaa, kehottaa, vahvista



alert("Hei, rakas käyttäjä!" );
var nameUser = prompt("Nimesi?" , "nimi" );
var userAnswer = vahvista("Haluatko varmasti poistua sivustolta?" );

Tämän seurauksena, kun päivitämme selainsivun, näemme ikkunan, joka toivottaa käyttäjän tervetulleeksi. Kun olet napsauttanut OK, näkyviin tulee seuraava ikkuna, jossa kysytään nimeäsi. Tällä menetelmällä on kaksi parametria, joista ensimmäinen on pakollinen ja vastaa näytettävästä otsikosta, meidän tapauksessamme se on käyttäjätunnuskysymys. Ja toinen parametri vastaa arvosta, joka näytetään oletusarvoisesti tekstikentässä. Jos annat nimesi ja napsautat OK, nimesi sijoitetaan nameUser-muuttujaan. Jos napsautat peruutuspainiketta, muuttujaan kirjoitetaan null.
Ja lopuksi ikkuna, joka kysyy käyttäjältä, haluaako hän poistua sivustoltamme vai ei. Suostumustapauksessa muuttujaan sijoitetaan Boolen arvo tosi, ja kieltäytyessä vastaavasti false. Siinä kaikki, mitä sinun tarvitsee tietää näistä menetelmistä, nähdään seuraavilla tunneilla!

HTML, XHTML ja CSS 100 % Kvint Igor -menetelmä vahvista()

Vahvista() -menetelmä

Vahvista()-menetelmä näyttää vahvistusikkunan, joka on samanlainen kuin alert()-menetelmän luoma hälytysikkuna, mutta sisältää kaksi painiketta: OK ja Peruuta. Listaus 11.3 näyttää vahvistusikkunan luomisen, mutta tämä komentosarja ei tee eroa OK- ja Peruuta-painikkeiden välillä. Minkä tahansa painikkeen painaminen sulkee ikkunan (kuva 11.5).

Riisi. 11.5. Työskentely vahvistuksen kanssa

Listaus 11.3. Työskentely vahvistuksen kanssa

Työskentely vahvistuksen kanssa

vahvistus("Tämä on vahvistukseni");

Luettuasi tämän luvun opit käyttämään tätä menetelmää saadaksesi komentosarjasi reagoimaan eri tavalla, kun napsautat OK- ja Peruuta-painikkeita.

Andrey Vladimirovich Popovin kirjasta Windows Script Host for Windows 2000/XP

Ajotapa IntWindowStyle-parametri määrittää käynnistettävän sovelluksen ikkunatyypin (Taulukko 1.13). Taulukko 1.13. Ikkunatyypit (intWindowStyle) Parametri Visual Basic Vakio Kuvaus 0 vbHide Piilottaa nykyisen ikkunan ja aktivoi toisen ikkunan (näyttää sen ja tarkentaa) 1 vbNormalFocus Aktivoi ja

Kirjasta Ohjelmointi sisään Rubiinin kieli[Kielen ideologia, soveltamisen teoria ja käytäntö] Fulton Hal

Poista-menetelmä Jos force-parametri on epätosi tai sitä ei ole määritetty, Delete-menetelmää käyttämällä on mahdotonta poistaa hakemistoa, jossa on vain luku -attribuutti. Asettamalla voiman arvoon tosi, tällaiset hakemistot voidaan poistaa välittömästi Käytettäessä Poista-menetelmää ei ole väliä, onko määritetty

Kirjasta Programming PDAs and Smartphones on the .NET Compact Framework, kirjoittaja Klimov Alexander P.

Siirtotapa Vaadittu kohdeparametri määrittää hakemiston, johon siirto tehdään; yleismerkit eivät ole sallittuja hakemiston nimessä. Huomautus Move-menetelmän sijasta voit käyttää MoveFolder-objektimenetelmää

Kirjasta Linux ja UNIX: shell ohjelmointi. Kehittäjän opas. Kirjailija: Tainsley David

Kopiointitapa Vaadittu kohdeparametri määrittää tiedoston, johon kopio tehdään; jokerimerkit eivät ole sallittuja tiedostonimessä Korvausparametri on Boolen muuttuja, joka määrittää, korvataanko se jo olemassa oleva tiedosto nimetty kohde (overwrite=true)

RuBoard-tiimin kirjasta Description of the PascalABC.NET

Poista-menetelmä Jos force-parametri on epätosi tai sitä ei ole määritetty, Delete-menetelmää käyttämällä on mahdotonta poistaa tiedostoa, jolla on vain luku -attribuutti. Voiman asettaminen arvoon tosi poistaa tällaiset tiedostot välittömästi. Huomautus Voit käyttää DeleteFile-menetelmää Delete-menetelmän sijaan.

Kirjailijan kirjasta

8.3.1. Injektiomenetelmä Injektiomenetelmä tuli Rubylle Smalltalk-kielestä (se ilmestyi ensimmäisen kerran Rubyssa 1.8). Sen käyttäytyminen on mielenkiintoista, vaikka sitä ei ole helppo ymmärtää ensimmäisellä kerralla. Se heijastaa sitä tosiasiaa, että haluamme usein kiertää listaa ja "kerätä" jotain tulosta. Tietysti eniten

Kirjailijan kirjasta

8.3.3. Ositusmenetelmä Kuten sanotaan, "maailmassa on kahdenlaisia ​​ihmisiä: niitä, jotka jakavat ihmiset eri tyyppeihin, ja niitä, jotka eivät jaa." Osiomenetelmä ei viittaa ihmisiin (vaikka voimme esittää heidät objekteina Rubyssa), mutta se myös jakaa joukon kahteen osaan. Jos osio on annettu, niin se arvioidaan

Kirjailijan kirjasta

11.1.10. Initiaate_copy-metodi Kun objekti kopioidaan dup- tai clone-menetelmällä, konstruktoria ei kutsuta. Kaikki tilatiedot kopioidaan, mutta entä jos et tarvitse tätä toimintaa? Katsotaanpa esimerkkiä: luokka Document attr_accessor:title, :text attr_reader:timestamp def initialize(otsikko, teksti) @title, @text = otsikko, teksti @timestamp =

Kirjailijan kirjasta

11.1.11. Varausmenetelmä Se on harvinaista, mutta tapahtuu, että sinun on luotava objekti kutsumatta sen rakentajaa (ohittamalla alustusmenetelmä). Saattaa esimerkiksi olla, että objektin tila määräytyy kokonaan sen pääsymenetelmien avulla; silloin ei tarvitse kutsua uutta menetelmää (joka kutsuu alustusta), ellet sinä

Kirjailijan kirjasta

11.3.2. const_get-menetelmä Const_get-metodi saa tietynnimisen vakion arvon moduulista tai luokasta, johon se kuuluu.str = "PI"Math.const_get(str) # Arvo on Math::PI Vältä kutsumasta eval-menetelmää, jota joskus pidetään epäeleganttina. Tämä lähestymistapa on halvempi näkökulmasta

Kirjailijan kirjasta

11.3.5. Method define_method Lisäksi avainsana def, ainoa normaali tapa lisätä menetelmä luokkaan tai objektiin on käyttää define_method-metodia, ja sen avulla voit tehdä tämän ajon aikana. Rubyssa melkein kaikki tapahtuu ajon aikana. Jos

Kirjailijan kirjasta

11.3.6. const_missing-menetelmä Const_missing-menetelmä on samanlainen kuin method_missing-menetelmä. Kun yritetään päästä tuntemattomaan vakioon, tätä menetelmää kutsutaan - jos se on tietysti määritelty. Parametrina sille välitetään symboli, joka viittaa vakioon

Kirjailijan kirjasta

Lockbits-menetelmä .NET Compact Framework 2.0 esitteli rajoitetun tuen LockBits-menetelmälle, jota voidaan käyttää kuvan pikselien joukon käsittelemiseen. Tämän menetelmän ImageLockMode-luettelo sallii arvot ReadWrite, ReadOnly ja WriteOnly. Ja PixelFormat-luettelo tukee

Kirjailijan kirjasta Kirjailijan kirjasta

Menetelmä Zip Menetelmien kuvaus Menetelmät on annettu T.-funktion sekvenssisekvenssille Zip(sekunti: TSekunti; tulosValitsija: (T,TSekunti)->Res): Res-sekvenssi; Yhdistää kaksi sekvenssiä käyttämällä määritettyä funktiota, joka ottaa yhden elementin kustakin sekvenssistä ja

Kirjailijan kirjasta

Menetelmä sisältää Menetelmien kuvaus Menetelmät on annettu T-funktion sekvenssisekvenssille Sisältää(arvo: T): boolean; Määrittää sisältääkö se määritetty elementti peräkkäin käyttäen oletusarvoista tasa-arvovertailijaa. toiminto Sisältää(arvo: T; vertailija: IEqualityComparer): boolean;

Jatkamme kauneuden opastusta ja hallintaa käsittelevien koulutusartikkeleiden sarjaamme vakioasetukset selaimissa, tänään kutsumme sinut kehittämään selainten välisen vahvistusikkunan, jossa on helppokäyttöinen jQuery-laajennus. Voit valita tekstiä, painikkeita ja toimintoja, jotka suoritetaan napsautuksen jälkeen.

HTML-koodi

Vaikka meidän pitäisi aluksi keskittyä vahvistusikkunaan, kerrotaan ensin vähän käyttämämme sivusta. Jos haluat nähdä lähde plugin, voit ohittaa tämän vaiheen ja vierittää alas artikkelin osaan, jossa puhutaan jQuerysta.

Index.php

jQuery Confirm -valintaikkunan korvaaminen CSS3:lla | Tutorialzine Demo

Asiakirjan yläosaan olemme lisänneet jQuery.confirm.css:n Cuprum-fontin ( kaskadipöydät valintaikkunan tyylit), sekä styles.css - sivumme peräkkäiset tyylisivut.

Olemme sisällyttäneet asiakirjan rungon alareunaan jQuery-kirjasto, jquery.confirm.js (päälaajennustiedosto) sekä script.js, joka kuuntelee painikkeen napsautustapahtumaa ja suorittaa laajennuksen. Tämän päivän opetusohjelman viimeisessä vaiheessa kerromme sinulle näistä kahdesta tiedostosta.

Jos haluat sisällyttää vahvistusikkunan verkkosivustoosi, sinun on kopioitava jquery.confirm-kansio ladatusta arkistosta ja sisällytettävä koodin päähän jquery.confirm.css sekä tiedosto jquery.confirm.js ennen tagi, joka päättää dokumentin rungon + jQuery-kirjasto.

Itse valintaikkuna on vain muutama rivi HTML-koodia. Alla näet koodin, jonka laajennus on lisännyt valintaikkunan näyttämiseksi.

Esimerkki valintaikkunakoodista

Koodi lisätään asiakirjan runkoon. vahvistuspeite näkyy sivun muun osan päällä, mikä estää vuorovaikutuksen sivun elementtien kanssa valintaikkunan ollessa näkyvissä. h1, p ja div vahvistuspainikkeet on järjestetty liitännäisasetuksissa määritellyn rakenteen mukaisesti. Myöhemmin artikkelissa opit tästä lisää.

CSS-koodi

Valintaikkunan rakenne on jquery.confirm.css-tiedostossa. Tämä yksinkertaistaa huomattavasti integrointiprosessia olemassa oleviin valmis projekti, ja muotoilu on tehty niin, että voit olla varma, että tyylit eivät sekoitu sivulla jo oleviin.

jquery.confirm.css

#confirmOverlay(
leveys: 100 %;
korkeus: 100%;
sijainti:kiinteä;
alkuun:0;
vasen:0;
background:url("ie.png");
tausta: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) toista-x rgba(11,11,11,0.2);
tausta:-webkit-gradient(lineaarinen, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) toista-x rgba(11,11,11,0,2);
z-indeksi: 100000;
}

#confirmBox(
background:url("body_bg.jpg") repeat-x vasen alaosa#e5e5e5;
leveys: 460px;
sijainti:kiinteä;
vasen: 50%;
yläosa: 50 %;
marginaali: -130px 0 0 -230px;
reunus: 1px kiinteä rgba(33, 33, 33, 0,6);

Moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0,6) upotettu;
-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0,6) upotettu;
box-shadow: 0 0 2px rgba(255, 255, 255, 0,6) upotettu;
}

#confirmBox h1,
#confirmBox p(
font:26px/1 "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:url("header_bg.jpg") toista-x vasen alaosa #f5f5f5;
täyte: 18px 25px;
tekstivarjo: 1px 1px 0 rgba(255, 255, 255, 0,6);
väri:#666;
}

#confirmBox h1(
kirjainväli: 0,3 pikseliä;
väri:#888;
}

#confirmBox p(
background:none;
kirjasinkoko: 16px;
linjan korkeus: 1,4;
pehmuste-yläosa: 35px;
}

#confirmButtons(
täyte: 15px 0 25px;
text-align:center;
}

#confirmBox .button(
näyttö: inline-block;
väri valkoinen;
sijainti:suhteellinen;
korkeus: 33px;

Fontti: 17px/33px "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;

Marginaali oikea: 15px;
täyte: 0 35px 0 40px;
text-decoration:ei mitään;
border:ei mitään;
}

#confirmBox .button:last-child( margin-right:0;)

#confirmBox .button span(
sijainti: absoluuttinen;
alkuun:0;
oikea: -5px;
background:url("buttons.png") no-repeat;
leveys: 5px;
korkeus: 33px
}

#confirmBox .blue(tausta-sijainti:vasen yläosa;tekstivarjo:1px 1px 0 #5889a2;)
#confirmBox .blue span( background-position:-195px 0;)
#confirmBox .blue:hover( background-position:vasen alaosa;)
#confirmBox .blue:hover span( background-position: -195px bottom;)

#confirmBox .grey( tausta-sijainti: -200px ylhäällä;teksti-varjo:1px 1px 0 #707070;)
#confirmBox .grey span( background-position:-395px 0;)
#confirmBox .grey:hover( background-position:-200px bottom;)
#confirmBox .grey:hover span( background-position: -395px bottom;)

Tämä hyödyntää uutta CSS3:a. #confirmOverlay-määritelmässä käytämme CSS3-asteikkoja (jotka toimivat vain Firefoxissa, Safarissa ja Chromessa) ja varaosia läpinäkyvän PNG:n muodossa.

Seuraavaksi lisäsimme näytön keskellä olevaan #confirmBoxiin sisäinen varjo lohko (jotain samanlaista kuin Photoshopin sisäinen hehku). Käytimme myös Cuprum-fonttia, joka lisättiin Googlen kirjasinhakemistosta.

Tekstin varjojen lisäksi näet painikkeiden tyylin. Ne toteutetaan liukuovilla. Päällä Tämä hetki Saatavilla on kahdenlaisia ​​malleja - sininen ja harmaa. Voit lisätä uusi väri-painikkeita lisäämällä koodiin uusia ilmoituksia.

jQuery

Ennen kuin siirrymme laajennuksen lähdekoodiin, katsotaanpa ensin hieman pidemmälle. Script.js:ssa näet laajennuksen käynnissä.

Script.js

$(dokumentti).ready(funktio())(

$(.item .delete").click(function())(

Var elem = $(this).closest(.item");

$.confirm((
"title" : "Poista vahvistus",
"message" : "Olet poistamassa tämän kohteen.
Sitä ei voi palauttaa myöhemmin! Jatkaa?"
"painikkeet" :(
"Joo" :(
"luokka": "sininen",
"toiminta": function())(
elem.slideUp();
}
},
"Ei" :(
"luokka" : "harmaa",
"toiminta": function()() // Ei tässä tapauksessa mitään. Voit myös jättää toimintoominaisuuden pois.
}
}
});

Kun div .deleted napsautetaan esimerkissämme, komentosarja suorittaa pluginin määrittämän $.confirm-toiminnon. Seuraavassa on valintaikkunan otsikko, kuvaus ja painikeobjekti. Jokaisella painikkeella on nimi CSS-luokka, sekä toimintoparametri. Toiminto on toiminto, joka suoritetaan, kun painiketta napsautetaan.

Siirrytään nyt mielenkiintoiseen osaan. Tiedostossa jquery.confirm.js näet valintaikkunamme lähdekoodin.

Jquery.confirm.js

$.confirm = function(params)(

If($("#confirmOverlay").length)(
// Sivulla näkyy jo vahvistus:
palauttaa väärä;
}

Var buttonHTML = "";

// Luodaan painikkeiden merkinnät:

Jos(!obj.action)(
obj.toiminto = funktio())();
}
});

Muutt merkintä = [
"

",params.title,"",
"

",params.message"

",
"

",
buttonHTML,
"

"
].liittyä seuraan("");

$(markup).hide().appendTo("body").fadeIn();

Muutt-painikkeet = $("#confirmBox .button"),
i = 0;

$.each(params.buttons,function(name,obj)(
buttons.eq(i++).click(function())(

// Toiminta-attribuutin kutsuminen, kun a
// napsautus tapahtuu ja vahvistus piilotetaan.

Obj.action();
$.confirm.hide();
palauttaa väärä;
});
});
}

$.confirm.hide = function())(
$("#confirmOverlay").fadeOut(function())(
$(this).remove();
});
}

Plugin määrittelee $.confirm()-menetelmän. Tämä menetelmä käsittelee antamasi tiedot, muodostaa merkinnät ja lisää sitten kaikki sivulle. Koska #confirmOverlay-divillä on kiinteä sijainti CSS-määrityksen kautta, jätämme sen keskittämisen selaimen tehtäväksi ja siirrämme sen sitten, kun käyttäjä vierittää sivua.

Merkintöjen lisäämisen jälkeen skripti jakaa tapahtumavivut painikkeen napsautustapahtumille suorittaen toiminnon, joka vastaa painettua painiketta.

Tämä päättää valintaikkunamme!

Tehdään yhteenveto

Voit muokata ulkomuoto valintaikkuna jquery.confirm.css-tiedoston kautta. Koska valintaikkunan viestiattribuutti käyttää HTML-koodia, voit lisätä sinne kuvia tai kuvakkeita.

Voit jopa käyttää laajennusta virheilmoitusruutujen toteuttamiseen - sinun tarvitsee vain lisätä yksi painike ilman toimintomääritteitä.

Huomio! Sinulla ei ole lupaa tarkastella piilotettua tekstiä.