A JavaScriptben három alapvető művelet van, amelyek lehetővé teszik, hogy adatokat kapjon a felhasználótól további feldolgozásra szkriptekben. Ezek figyelmeztetnek, felszólítanak és megerősítenek. Mire használják őket, hogyan kell használni őket és más árnyalatokat, a cikk későbbi részében lesz szó.
éber
Egy modális ablak megjelenítésére szolgál a böngésző képernyőjén (ez azt jelenti, hogy a felhasználó nem kattinthat semmire az oldalon, amíg be nem zárja ezt az ablakot. Ebben a példában addig, amíg az ablakban az "OK" gombra nem kattint).
A riasztásban szereplő üzenet megjelenítése után a szkript végrehajtása felfüggesztésre kerül, és a modális ablak bezárása után folytatódik.
Feltöltés esetén mezőket, és az OK gombra kattintva a szkript visszaadja a felhasználó által megadott információkat.
A parancs szintaxisa valamivel bonyolultabb, mint az előző, mivel lehetővé teszi a felhasználó fellebbezésének szövegének és az információbeviteli mező tartalmának beállítását, amely alapértelmezés szerint megjelenik: eredmény = prompt(cím, alapértelmezett) ;, ahol
- cím- egy üzenet, amely megjelenik a felhasználó számára a modális ablakban. Az érvelés kötelező.
- alapértelmezett- alapértelmezés szerint mi fog megjelenni a szövegbeviteli mezőben. Kitöltése is kötelező, mert ha nincs beállítva, az egyes böngészőkben hibákhoz vezethet. Ha üresen szeretné hagyni a beviteli mezőt, egyszerűen állítsa be a promptot a következőképpen:
var myTest = prompt("Bármilyen információ" , """);
Kicsi azonnali használati példa:
var év = prompt( – Melyik évben végezte a gimnáziumot?, 2008); alert("Ön az év " + év + " diplomája!" ) ;
Általában ez a parancs arra szolgál, hogy adatokat gyűjtsön a felhasználóktól, amelyekre a szkriptnek szüksége van a további munka folytatásához.
megerősít
Szintén képviseli modális ablak. Mivel a névből nem nehéz kitalálni, általában arra használják, hogy valamiben megegyezzenek a felhasználóval.
Erre élesítve - az interakcióhoz az OK és a CANCEL gombokkal látja el a felhasználót, amelyek az igaz és false logikai értékeket adják vissza a szkriptnek. Értékelések: 4 (átlagosan 4 az 5-ből)
Ebben a leckében az ablakobjektum metódusait ismerjük meg: alert() , prompt() és megerősítés() .
alert() metódus
Az alert() metódus célja egy figyelmeztető párbeszédpanel megjelenítése a megadott üzenettel és egy OK gombbal a felhasználó képernyőjén. Használható fontos információk továbbítására a felhasználó felé.
ablak.alert(Paraméter_1);
Az alert() metódusnak egy kötelező paramétere van, ez a párbeszédpanelen megjelenő üzenet szövege. Ez a metódus nem ad vissza semmit a végrehajtása eredményeként.
Például jelenítsen meg egy figyelmeztető párbeszédpanelt egy webhelylátogató számára, amikor egy hivatkozásra kattint: Ugrás a weboldalra
megerősítés() metódus
Az ablakobjektum megerősítése() metódusa egy párbeszédpanelt jelenít meg a megadott üzenettel, valamint az OK és a Mégse gombokkal a felhasználó képernyőjén. A megerősítő ablak segítségével engedélyt kérhet a felhasználótól egy művelet végrehajtásához.var resultConfirm = megerősítés(Paraméter_1);
Ennek a módszernek egy paramétere van - az üzenet szövege, amely megjelenik a párbeszédpanelen.
A megerősítés() metódus két érték egyikét adja vissza a végrehajtás eredményeként (resultConfirm):
- igaz, ha a felhasználó az OK gombra kattintott;
- false, ha a felhasználó a Mégse gombra kattintott vagy bezárta.
Például jelenítsük meg a p elemben az id="resultConfirm" paraméterrel azt az eredményt, amikor a felhasználó a párbeszédablakban az "OK" gombra kattint:
prompt() metódus
A prompt() metódus célja egy párbeszédpanel megjelenítése üzenettel, szövegmezővel az adatok beviteléhez, valamint az "OK" és a "Cancel" gombokkal a felhasználó képernyőjén. Célja, hogy adatokat kérjen a felhasználótól.
var eredményPrompt = prompt(Paraméter_1, Paraméter_2);
Ennek a módszernek két paramétere van:
- üzenet jelenik meg a párbeszédpanelen. Ez a paraméter kötelező, és egy üzenetet tartalmaz, amely "megmondja", hogy a felhasználónak milyen adatokat kell beírnia a szövegmezőbe;
- a második paraméter nem kötelező, és segítségével megadható a kezdeti érték, amely a párbeszédpanel beviteli mezőjében jelenik meg megnyitáskor.
A felhasználó műveleteitől függően a prompt() metódus a következő adatokat adhatja vissza:
- szöveges érték - ha a beviteli mező adatokat tartalmaz, és a felhasználó az "OK" gombra kattintott;
- üres karakterlánc - ha a beviteli mező nem tartalmaz adatokat, és a felhasználó az "OK" gombra kattintott;
- null - ha a felhasználó a "Mégse" gombra kattintott, vagy bezárta ezt az ablakot, nem számít, milyen adatokat írt be a szövegmezőbe.
Megjegyzés: Az alert() , confirm() vagy prompt() metódusok valamelyikének végrehajtása eredményeként megjelenő párbeszédpanel modális, azaz. blokkolja a felhasználó hozzáférését a szülőalkalmazáshoz (böngészőhöz), amíg a felhasználó be nem zárja a párbeszédpanelt.
Például egy nevet kérünk a felhasználótól, és az eredménytől függően megjelenítjük a szöveget a c id="nameUser" elemben:
Például kérjük meg a felhasználót, hogy találja ki a 8-as számot:
... Találd ki a számot
Ebben a cikkben három érdekes módszert fogunk megvizsgálni, nevezetesen alert(), megerősítés() és prompt() metódusok. Ők mindannyian felhasználói interakcióra szánták.
Mindhárom metódus az ablak objektumhoz tartozik. És így hívhatók: window.method_name(); De a JavaScript lehetővé teszi, hogy ne adjuk meg ezt az ablakobjektumot, hanem egyszerűen írjuk be a metódus nevét.
Kezdjük az alert() metódussal. Ez a módszer a megadott üzenetet jeleníti meg a felhasználó böngészőablakában. Ez a doboz a teljes oldal tetején megjelenik, és amíg a felhasználó rá nem kattint az OK gombra, addig nem záródik be.
A demonstrációhoz jelenítsen meg néhány üzenetet az alert () módszerrel.
var today_is = "Hétfő"; alert("Ma van " + mai_van);
A metóduson belül bármilyen karakterláncot megadhatunk, csak anélkül html tag ov. Itt nem dolgozzák fel őket, hanem úgy jelennek meg, ahogy vannak.
Ha a megadni kívánt karakterlánc nagyon hosszú és rá akarunk ugrani új sor, akkor itt a html tag
nem fog működni. Itt a "\n" karaktert kell használni.
Alert("Looooooooong \nStringgggggg");
Ezt a módszert gyakran használják hogy hibát találjon a kódban.
A kód feldolgozási folyamata fentről lefelé halad, így a hiba észleléséhez egyszerűen írjuk az alert () metódust arra a területre, ahol a hiba található. És ha az alert() működött, akkor nincs hiba egészen addig a sorig, ahol ki van írva.
Ezután egy vagy több sorral lejjebb kell mozgatnia. Mentjük a változtatásokat, újra frissítjük az oldalt a böngészőben, és megnézzük, hogy az alert() működött-e, ami azt jelenti, hogy nincs hiba a sor előtt, ahol található, ellenkező esetben ha nem működik, a hiba a fenti sorban van, ahol jelenleg van. Ily módon hibát találhat a kódban.
megerősítés() metódus
Ez a módszer bizonyos kérdésekre adott válasz megerősítésére szolgál. Csak két válaszlehetőség van, igen (OK) vagy nem (Mégse / Mégse). Ha a felhasználó igennel válaszol, akkor a metódus igaz, egyébként hamis értéket ad vissza.
Például megjelenítünk egy ablakot a megerősítés() metódussal, ahol megkérdezzük a felhasználótól, hogy "Biztosan el akarod hagyni az oldalt?". Ha a felhasználó igennel válaszol, akkor az alert() metóduson keresztül egy ilyen "A felhasználó el akarja hagyni az oldalt" üzenetet jelenítjük meg, ellenkező esetben egy másik "A felhasználó NEM akarja elhagyni az oldalt" üzenetet.
Var user_answer = megerősítés("Biztosan elhagyja az oldalt?"); if(user_answer) alert("A felhasználó el akarja hagyni az oldalt"); else alert("A felhasználó NEM akarja \nelhagyni az oldalt");
Így működik a megerősítés() metódus. Különböző alkalmakkor használható. Például, mielőtt töröl valamit az oldalról, szokás megkérdezni a felhasználót, hogy biztos-e a tetteiben. Illetve az űrlap elküldése előtt megkérdezheti a felhasználót, hogy „Mindent jól töltött ki?” Ha igennel válaszol, akkor az űrlap elküldésre kerül, ellenkező esetben nem.
prompt() metódus
Az utolsó módszer, amelyet megtanulunk, a prompt() metódus. Ezt a módszert ritkábban használják, mint a másik két módszert. Lehetővé teszi bizonyos információk megszerzését a felhasználótól, amelyet beír a szövegmezőbe.
Ennek eredményeként a prompt() metódus vagy a beviteli karakterláncot adja vissza, ha a felhasználó az OK gombra kattintott, vagy nullát, ha a felhasználó a Mégse gombra kattintott.
Paraméterként, vagyis a zárójelek belsejében ez a módszerÍrhatunk egy promptot vagy kérdést, hogy tudassa a felhasználóval, hogy milyen adatokat kell megadnia.
Például kérjük meg a felhasználót, hogy válaszoljon a „Mi a neved?” kérdésre. A felhasználó által beírt név az alert() metódussal jelenik meg a képernyőn.
Varname = prompt("Mi a neved?"); alert("Az Ön neve " + név);
Mentse el és nyissa meg az oldalt a böngészőben.
Természetesen a prompt() metódusból bármilyen információ beírható a szövegmezőbe. Ez az információ karakterláncként jelenik meg, még számok vagy más speciális karakterek esetén is.
Például kérjük meg a felhasználót, hogy adjon meg két számot, hogy később megszorozza őket. Lesz egy számológép a számok szorzásához.
Var x = prompt("Írja be az első számot:"); var y = prompt("Írja be a második számot:"); //A beírt számok konvertálása karakterlánc típusból numerikus típusba x = Szám(x); y = szám(y); document.write(x + " * " + y + " = " + (x * y));
A beírt számok karakterláncok, így a helyes szorzási eredmény érdekében ezeket a számokat át kell vinni a Number() függvényen, amely karakterlánc típusból normál számokká alakítja őket.
Nos, ez minden. Most már három további módszert ismer: alert(), megerősítés() és prompt(). Amit nyugodtan használhatsz a gyakorlatban.
- ablak objektum metódusok;
- alert() metódus: rövid összefoglaló;
- megerősítés() metódus - betűk írása;
- prompt() metódus - ismerkedjünk meg, Stirlitz vagyok.
Szóval, böngésző objektumok. És mindenekelőtt - a legrégebbi közülük, az objektum ablak.
Itt vannak az objektum fő metódusai ablak(rajtuk kívül van még más is, de nem sok haszna van, és hogy ne zsúfoljam el az agyat felesleges információkkal, ezeket a harmadik sorozatra halasztom).
Módszer |
Leírás |
Nyissa meg és zárja be a böngészőablakokat; meg lehet határozni az ablak méretét, tartalmát, valamint a jelenlétét billentyűzet, címmezők és egyéb attribútumok. |
|
Riasztási párbeszédpanel megjelenése a megfelelő üzenettel. |
|
Megerősítő párbeszédpanel megjelenése az "OK" és a "Mégse" gombokkal. |
|
Egy szövegbeviteli mezőt tartalmazó prompt párbeszédpanel megjelenése. |
|
Fókusz beállítása vagy eltávolítása ablakhoz. |
|
Egy ablak tartalmát egy adott pontra görgeti. |
|
A függvényhívás és a kifejezés kiértékelése közötti időintervallum beállítása. |
|
Egy időintervallum beállítása függvényhívás vagy kifejezés kiértékelése előtt. |
Ezt már tudjuk ablak gyakran utalva, de nem írva.
Különféle párbeszédpanelek előhívása
A párbeszédpaneleket a programok a felhasználóval való interakcióhoz használják.
alert() metódus
Tanulmányaink legelején elemeztük. Egy egyszerű párbeszédpanelt hoz létre egy üzenettel és egy OK gombbal. Minden interakciója arra korlátozódik, hogy a felhasználó egyetlen gomb megnyomásával el tudja küldeni ezt az ablakot valahova messzire (és köszönet érte).
megerősítés() metódus
Módszer megerősít() már lehetővé teszi a felhasználó számára, hogy meghozza a legegyszerűbb "logikai" döntést: "igen" vagy "nem"-et mondjon.
Például kattintson erre a gombra:
Elnézést a kis csínytevésért. Remélem tudod, hogyan kell használni a vissza gombot.
Hogyan van elrendezve? Természetesen láttad, hogy ezt a módszert riasztásokkal kombinálom. És ez a beillesztett függvény segítségével történik .
A metódus két értéket ad vissza: igaz(ha rendben van) és hamis(lemondás esetén).
NÁL NÉL igaz elküldjük a megfelelő oldalra (tulajdon href tárgy elhelyezkedés), és adja ki a megfelelőt éber(). Ellenkező esetben (pl. hamis) csak adjon ki egy másikat éber().
A gombban pedig meghívjuk a függvényt az eseményben kattintásra:
Ezután meg kell hívnia ezt a függvényt az eseménykezelőből onSubmit címke , például:
Itt például felírhatsz nekem a "szappanra" mindent, amit az óráimról gondolsz. Ha hirtelen izgatott lett, megnyomta a gombot, majd valahogy kínossá vált, felugrik egy párbeszédablak, és kijózanítja.
Ha előugró ablakokat jelenít meg, célszerű figyelmeztetni a felhasználót, és megadni neki választási lehetőséget, hogy megnyitja-e az ablakot vagy sem. Ehhez az ablak betöltése előtt el kell engednie a "parlamenter" - párbeszédpanelt megerősít(). Innen hívják a függvényt . Erről hamarosan szó lesz, amikor áttérünk az ablakok létrehozására a módszerrel nyisd ki().
prompt() metódus
Ez a módszer már konkrét adatokat kér a felhasználótól. Megjelenik egy párbeszédpanel egy beviteli mezővel. A metódus visszaadja a felhasználó által ebbe a mezőbe beírt adatokat, és lehetővé teszi a program számára, hogy ezekkel az adatokkal dolgozzon.
A módszernél gyors() két argumentum: egy kérdés (amely a beviteli mező felett jelenik meg) és egy válasz (a szöveg a beviteli mezőben):
Ha azt szeretné, hogy a beviteli mező tisztának tűnjön, tegyen üres idézőjeleket második argumentumként:
| gyors("kérdés szövege","") |
Lássuk ezt működés közben. Nyomd meg a gombot, ne félj.
Tehát adatokat adott meg (vagy nem adott meg), és ezek alapján (vagy ezek hiányában) kapott választ a számítógéptől.
Íme ennek a funkciónak egy egyszerű változata:
Ingatlan innerHTML, amely lehetővé teszi a címke tartalmának szabályozását, a 10. leckében találkoztunk, amikor a képek alá programoztuk a neveket.
És itt van a gomb kódja és az üdvözlés üres bekezdése.
|
|
De ha kiderült, hogy a névrokonom vagy, akkor láttad, hogy a funkció erre is reagált.
Hogy ezt a "durva" változatban hogyan kell megtenni, azt már maga is sejtheti. A változót ellenőrizni kell felhasználónév nem csak az üres idézetekre, hanem a " András", és adjon hozzá még egyet ha megfelelő szöveggel (gyakorolhatod magad is).
De ha beírod, hogy " András", "Andryusha", "Andryushka", "Andriukha", "Andrejka", "Andrej Ivanovics" stb., akkor hasonló lesz az eredmény, bár nem kifejezetten mentem végig ezeket az értékeket, hanem csak öt sort sikerült: " Andre", "András", "András", "Andreiche"és" Andreichu"(az utolsó három - annak érdekében, hogy kizárják Andreevet, Andreichenkot és Andreichukot a névadók közül, miközben Andreichikot megtartják a névrokonokban).
Vagyis sejthető, hogy a függvény ellenőrzi a változót felhasználónév az első 5, 6 vagy 8 karakterhez.
De erről egy kicsit később lesz szó, amikor áttérünk a string objektumokra és módszereikre. Csak azt szeretném, ha előre elképzelné a megoldandó feladatokat (különösen a karakterláncok alkarakterláncokra való felosztását). Akkor maguk a döntések világosabbnak tűnnek. De ha nem bírod kivárni, akkor "kimásolhatod" a függvényt a kódból és "elvághatod, mint egy diót". A kíváncsiak kedvéért írtam oda kommentet.
Módszer gyors() jelszó megadására is használható.
Ezzel még nem ér véget a lecke!
„Játsszunk kémet”, hogy befejezzük a fejezet elolvasását. Először próbálja meg megnyomni a gombot, és beírni valamit.
Ah, ez az! De nézd, van még egy gomb! Na gyere...
Jelszó:
Nyomja meg újra az első gombot, és írja be a helyes jelszót.
Ennek a mulatságnak talán van hatása, de valójában a jelszó megnyomásával megtalálható jobb gombés kódban nézegeti. Egyesek naivan azt gondolhatják, hogy elég egy külön .js fájlba tenni a kódot. De az oldal kódjában lesz egy link erre a fájlra a címmel. És ha betárcsázod címsor, akkor megnyílik egy JavaScript kóddal rendelkező fájl :)
Lehetséges kódban titkosítani a jelszót? Megteheti, de ehhez ismét karakterlánc-manipulációra van szükség, valamint néhány matematikai módszer használatára. Ha mindehhez eljutunk, tanulmányozzuk az „igazi” jelszószkriptet is. De a felhasználói interakciós technika továbbra is ugyanaz lesz: a módszer gyors(). (Lehetőség van „feltörni” egy titkosított jelszót? Sajnos a hackerek tökéletességének nincs határa...)
Ugyanúgy, ahogy a nevet vagy annak hiányát „elkaptuk”, a jelszót a funkcióval fogjuk meg.
Ha helytelen jelszót ad meg, vagy nem ír be semmit, a sor
document.getElementById("no").style.display = "blokk"
megnyitja a blokkot a második gombbal
És ha a helyes jelszót adjuk meg, a művelet átkerül a karakterláncba
document.getElementById("igen").style.display = "blokk",
amely megnyitja a következő blokkot
Megállj, mik azok a kryakozubry? Ez egy egyszerű rejtjel, hamarosan elmagyarázom.
Addig is megadom ezeknek a blokkoknak a kódját (az áttekinthetőség kedvéért kihagyom a keretes táblázatot, amit az utolsó blokkba mellékeltem):
|
"no" style="display: none;" > Ah, ez az! De nézd, van még egy gomb! Na gyere... "mypassword" style="display: nincs;" > Jelszó:
Nyomja meg újra az első gombot, és írja be a helyes jelszót. "yes" style="display: none;" >
Most olvasunk tovább. . . . . . . . . . . |
Szóval a titkosításról. Nagyon nyomorult. Bármi, funkciók ismerete menekülni()és unescape(), azonnal feltöri.
Funkció escape ("írja be ide")átalakítja a karaktereket hexadecimális értékükre.
Funkció unescape ("szúrja be a quackaubereket") az ellenkezőjét teszi.
A jelszó ily módon történő titkosításához otthon kell áthajtania menekülni(), másolja ki az eredményt, és illessze be unescape(). De ez, ismétlem, nem komoly.
Hát azért teljes készlet- a második gomb funkciója:
A szabványos párbeszédpanelek megjelenítéséhez a JavaScript csak három módszerrel rendelkezik, amelyeket ma megtanultunk. Bár ezek a módszerek nem túl gyakran fordulnak elő, a magabiztos használatuk képessége rendkívül hasznos. Egyszerűek, de ugyanakkor, hogy úgy mondjam, „tiszta” programozás. Nagyon jók a programozási nyelv elsajátításában. És azt tanácsolom, hogy minden lehetséges módon kísérletezzen velük, még ha pragmatikus szempontból céltalanul is. jó programozás- Ez egy izgalmas játék, mint minden kreativitás.