Javascript nosí veľa klobúkov. Na vytvorenie špeciálnych efektov môžete použiť JavaScript. Môžete použiť JavaScript, aby ste svoje stránky HTML vytvorili „inteligentnejšie“ využitím svojich rozhodovacích schopností. Môžete tiež použiť JavaScript na vylepšenie formulárov HTML. Táto posledná aplikácia má osobitný význam. Spomedzi všetkých klobúkov, ktoré môže JavaScript nosiť, patria jeho funkcie na spracovanie formulárov k najvyhľadávanejším a najpoužívanejším.
V srdci webového vydavateľa neprekvapí nič viac ako tieto tri písmená: C-G-I. CGI (čo znamená spoločné rozhranie brány) je mechanizmus na bezpečný prenos údajov z klienta (prehľadávača) na server. Spravidla sa používa na prenos údajov z formulára HTML na server.
Vďaka JavaScriptu po vašej strane môžete spracovávať jednoduché formuláre bez toho, aby ste museli volať na server. A keď je odoslanie formulára do programu CGI nevyhnutné, môžete požiadať JavaScript, aby sa postaral o všetky predbežné požiadavky, napríklad overenie vstupu, aby sa zabezpečilo, že používateľ bodkuje každé i. V tomto stĺpci sa bližšie pozrieme na spojenie formulára JavaScript, vrátane toho, ako používať objekt formulára JavaScriptu, ako čítať a nastavovať obsah formulára a ako spúšťať udalosti JavaScriptu manipuláciou s ovládacími prvkami formulára. Ďalej sa budeme venovať tomu, ako používať JavaScript na overenie vstupu formulára a jeho summit do programu CGI.
Učenie jazyka JavaScript
Tento článok je súčasťou archívu technického obsahu JavaWorld. Prečítajte si veľa informácií o programovaní v JavaScripte čítaním článkov v Séria JavaScript, nezabudnite, že niektoré informácie budú pravdepodobne zastarané. Ďalšie informácie o programovaní pomocou jazyka JavaScript nájdete v častiach „Používanie vstavaných objektov JavaScriptu“ a „Ladenie programov JavaScript“.
Vytvorenie formulára
Existuje niekoľko rozdielov medzi priamym formulárom HTML a formulárom vylepšeným jazykom JavaScript. Tou hlavnou je, že sa formulár JavaScript spolieha na jednu alebo viac obslužných rutín udalostí, napríklad onClick alebo onSubmit. Tieto vyvolajú akciu JavaScriptu, keď používateľ urobí niečo vo formulári, napríklad klikne na tlačidlo. Obslužné rutiny udalostí, ktoré sú umiestnené so zvyšnými atribútmi v značkách formulára HTML, sú pre prehliadač, ktorý nepodporuje JavaScript, neviditeľné. Kvôli tejto vlastnosti môžete často používať jeden formulár pre prehliadače JavaScript aj iné ako JavaScript.
Medzi typické objekty kontroly formulára - nazývané tiež „widgety“ - patria:
- Textové pole na zadanie riadku textu
- Stlačením tlačidla vyberiete akciu
- Prepínače na výber jedného zo skupiny možností
- Začiarkavacie políčka pre výber alebo zrušenie výberu jednej nezávislej možnosti
Nebudem sa obťažovať vymenovaním všetkých atribútov týchto ovládacích prvkov (widgetov) a ich použitím v HTML. Podrobnosti vám poskytne väčšina referencií o HTML. Pri použití s jazykom JavaScript by ste mali vždy pamätať na uvedenie názvu samotného formulára a každého použitého ovládacieho prvku. Názvy umožňujú odkazovať na objekt na stránke so zlepšeným jazykom JavaScript.
Typická forma vyzerá takto. Všimnite si, že som uviedol atribúty NAME = pre všetky ovládacie prvky formulára vrátane samotného formulára:
Do poľa zadajte niečo:- FORMULÁR NÁZOV = "myform" definuje a pomenuje formulár. Na inom mieste v JavaScripte môžete na tento formulár odkazovať podľa názvu myform. Meno, ktoré zadáte do formulára, je len na vás, malo by však zodpovedať štandardným pravidlám pre pomenovanie premenných / funkcií jazyka JavaScript (bez medzier, divných znakov okrem podčiarknutia atď.).
- ACTION = "" definuje, ako chcete, aby prehliadač spracoval formulár, keď je odoslaný do programu CGI bežiaceho na serveri. Pretože tento príklad nemá za cieľ nič odosielať, URL pre program CGI je vynechaná.
- METHOD = "ZÍSKAŤ" definuje údaje o metóde, ktoré sa odovzdajú serveru pri odoslaní formulára. V takom prípade je atribút štupľavý, pretože vzorový formulár nič neuvádza.
- INPUT TYPE = "text" definuje objekt textového poľa. Toto je štandardné značenie HTML.
- INPUT TYPE = "button" definuje tlačidlový objekt. Toto je štandardné značenie HTML okrem obslužného programu onClick.
- onClick = "testResults (this.form)" je obsluha udalosti - spracováva udalosti, v tomto prípade kliknutím na tlačidlo. Po kliknutí na tlačidlo vykoná JavaScript výraz v úvodzovkách. Výraz hovorí, že zavolá funkciu testResults inde na stránke a odovzdá jej aktuálny objekt formulára.
Získanie hodnoty z objektu formulára
Pokúsme sa získať hodnoty z formulárových objektov. Načítajte stránku a potom niečo napíšte do textového poľa. Kliknite na tlačidlo a to, čo ste napísali, sa zobrazí v poli s upozornením.
Zoznam 1. testform.html
Test Vstupná funkcia testResults (formulár) {var TestVar = form.inputbox.value; alert ("Zadali ste:" + TestVar); } Do poľa zadajte niečo:Skript funguje nasledovne. JavaScript volá funkciu testResults, keď kliknete na tlačidlo vo formulári. Funkcia testResults sa odovzdáva objektu formulára pomocou syntaxe this.form (toto kľúčové slovo odkazuje na ovládací prvok tlačidla; formulár je vlastnosťou ovládacieho prvku tlačidlo a predstavuje objekt formulára). Objektu formulára som dal meno formulár vo vnútri funkcie testResult, môžete však ľubovoľné meno, ktoré sa vám páči.
Funkcia testResults je jednoduchá - iba skopíruje obsah textového poľa do premennej s názvom TestVar. Všimnite si, ako bol odkazovaný obsah textového poľa. Definoval som objekt formulára, ktorý som chcel použiť (tzv formulár), objekt vo forme, ktorú som chcel (tzv vstupná schránka) a majetok tohto predmetu, ktorý som chcel (ďalej len „objekt“) hodnotu nehnuteľnosť).
Viac od JavaWorld
Chcete viac programovacích návodov a noviniek? Nechajte si doručiť bulletin JavaWorld Enterprise Java do svojej doručenej pošty.
Nastavenie hodnoty v objekte formulára
Hodnotová vlastnosť vstupného poľa uvedená v príklade vyššie je čitateľná aj zapisovateľná. To znamená, že si môžete prečítať všetko, čo je do tohto poľa napísané, a môžete do neho znova zapisovať údaje. Proces nastavovania hodnoty vo formovom objekte je pravý opak jej načítania. Tu je krátky príklad demonštrácie nastavenia hodnoty v textovom poli formulára. Proces je podobný ako v predchádzajúcom príklade, ibaže tentoraz sú k dispozícii dve tlačidlá. Kliknite na tlačidlo „Čítať“ a skript prečíta, čo ste zadali do textového poľa. Kliknite na tlačidlo „Napísať“ a skript napíše do textového poľa obzvlášť chýrnu frázu.
Zoznam 2. set_formval.html
Funkcia testu vstupu readText (formulár) {TestVar = form.inputbox.value; alert ("Zadali ste:" + TestVar); }
funkcia writeText (formulár) {form.inputbox.value = "Prajem pekný deň!" } Do poľa zadajte niečo:
- Keď kliknete na tlačidlo „Čítať“, JavaScript zavolá funkciu readText, ktorá načíta a zobrazí hodnotu, ktorú ste zadali do textového poľa.
- Keď kliknete na tlačidlo „Napísať“, JavaScript zavolá funkciu writeText, ktorá napíše „Pekný deň!“ do textového poľa.
Čítanie ďalších hodnôt objektov formulára
Textové pole je možno najbežnejším objektom vo forme, ktorý čítate (alebo píšete) pomocou JavaScriptu. Môžete však použiť JavaScript na čítanie a zápis hodnôt z väčšiny ostatných objektov (všimnite si, že JavaScript sa momentálne nedá použiť na čítanie alebo zápis údajov pomocou textového poľa hesla). Okrem textových polí je možné JavaScript používať:
- Skryté textové pole (TYPE = "skryté").
- Prepínač (TYPE = "rádio")
- Začiarkavacie políčko (TYPE = "začiarkavacie políčko")
- Textová oblasť ()
- Zoznamy ()
Používanie skrytých textových polí
Z hľadiska JavaScriptu sa skryté textové polia správajú rovnako ako bežné textové polia a zdieľajú rovnaké vlastnosti a metódy. Z užívateľského hľadiska skryté textové polia „neexistujú“, pretože sa nezobrazia vo formulári. Skryté textové polia sú skôr prostriedky, pomocou ktorých je možné medzi serverom a klientom prenášať špeciálne informácie. Môžu byť tiež použité na uchovávanie dočasných údajov, ktoré by ste mohli neskôr použiť. Pretože sa skryté textové polia používajú ako štandardné textové polia, nebude tu uvedený samostatný príklad.
Používanie rádiových tlačidiel
Prepínače slúžia na to, aby používateľ mohol zvoliť jednu a iba jednu položku zo skupiny možností. Prepínače sa vždy používajú v násobkoch; nemá logický zmysel mať iba jeden prepínač vo formulári, pretože keď na neho kliknete, nemôžete ho zrušiť. Ak chcete jednoduchú voľbu kliknutia / zrušenia kliknutia, začiarknite políčko (pozri nižšie).
Ak chcete definovať prepínače pre JavaScript, poskytnite každému objektu rovnaký názov. JavaScript vytvorí pole pomocou názvu, ktorý ste zadali; potom odkazujete na tlačidlá pomocou indexov poľa. Prvé tlačidlo v rade má číslo 0, druhé číslo 1 a tak ďalej. Upozorňujeme, že atribút VALUE je pre formuláre iba pre JavaScript voliteľný. Hodnotu však budete chcieť uviesť, ak formulár odošlete do programu CGI bežiaceho na serveri.
Nasleduje príklad testovania, ktoré tlačidlo je vybrané. Smyčka for vo funkcii testButton cykluje cez všetky tlačidlá v skupine „rad“. Keď nájde vybrané tlačidlo, vylomí sa zo slučky a zobrazí číslo tlačidla (pamätajte: od 0).
LIsting 3. form_radio.html
Funkcia testu rádiového tlačidla testButton (form) {for (Count = 0; Count <3; Count ++) {if (form.rad [Count] .checked) break; } upozornenie (je vybraté "Tlačidlo" + Počet + "); }Nastavenie výberu prepínača na trhu HTML je jednoduché. Ak chcete, aby sa formulár na začiatku zobrazil s vybraným prepínačom, pridajte do značky HTML pre toto tlačidlo atribút CHECKED:
Môžete tiež nastaviť výber tlačidla programovo pomocou JavaScriptu pomocou začiarknutej vlastnosti. Zadajte index poľa prepínača, ktoré chcete skontrolovať.
form.rad [0] .checked = true; // nastaví sa na prvé tlačidlo v skupine radPomocou začiarkavacích políčok
Začiarkavacie políčka sú samostatné prvky; to znamená, že neinteragujú so susednými prvkami, ako to robia prepínače. Preto sa používajú o niečo jednoduchšie. Pomocou JavaScriptu môžete vyskúšať, či je začiarknuté políčko pomocou začiarknutej vlastnosti, ako je to znázornené tu. Rovnako môžete nastaviť začiarknutú vlastnosť na pridanie alebo odstránenie začiarknutia zo začiarkavacieho políčka. V tomto príklade vás výstražná správa informuje, či je začiarknuté prvé políčko. Hodnota je pravdivá, ak je políčko začiarknuté; nepravda, ak nie je.
Zoznam 4. form_check.html
Zaškrtávacie políčko Testovacia funkcia testButton (formulár) {alert (form.check1.checked); }Začiarkavacie políčko 1
Začiarkavacie políčko 2
Začiarkavacie políčko 3
Rovnako ako v prípade objektu prepínača, do označenia HTML pre toto začiarkavacie políčko, ktoré chcete skontrolovať pri prvom načítaní formulára, pridajte atribút CHECKED.
Začiarkavacie políčko 1>Môžete tiež nastaviť výber tlačidla programovo pomocou JavaScriptu pomocou začiarknutej vlastnosti. Zadajte názov začiarkavacieho políčka, ktoré chcete začiarknuť, ako v
form.check1.checked = true;Používanie textových oblastí
Na zadávanie viacerých riadkov textu sa používajú textové oblasti. Predvolená veľkosť textového poľa je 1 riadok s 20 znakmi. Veľkosť môžete zmeniť pomocou atribútov COLS a ROWS. Tu je typický príklad textovej oblasti s textovým poľom širokým 40 znakov a 7 riadkami:
Na prečítanie obsahu poľa textovej oblasti môžete použiť JavaScript. To sa deje s hodnotou value. Tu je príklad:
