Javascript nosi veliko klobukov. Za ustvarjanje posebnih učinkov lahko uporabite JavaScript. Z JavaScriptom lahko vaše strani HTML postanejo "pametnejše" z izkoriščanjem njegovih zmožnosti odločanja. In lahko uporabite JavaScript za izboljšanje obrazcev HTML. Ta zadnja aplikacija je še posebej pomembna. Med vsemi klobuki, ki jih lahko nosi JavaScript, so njegove funkcije obdelave oblik med najbolj iskanimi in uporabljenimi.
V srcu spletnega založnika ni nič bolj strah kot te tri črke: C-G-I. CGI (kar pomeni skupni vmesnik prehoda) je mehanizem za varen prenos podatkov od odjemalca (brskalnika) do strežnika. Običajno se uporablja za prenos podatkov iz obrazca HTML na strežnik.
Z JavaScriptom ob strani lahko obdelujete preproste obrazce, ne da bi pri tem poklicali strežnik. Če je obrazec potrebno poslati v program CGI, lahko JavaScript poskrbi za vse predhodne zahteve, na primer za preverjanje vnosa, s čimer zagotovi, da je uporabnik zapisal vsako i. V tem stolpcu si bomo natančno ogledali povezavo z obrazcem JavaScript, vključno s tem, kako uporabiti predmet obrazca JavaScript, kako brati in nastaviti vsebino obrazca ter kako sprožiti dogodke JavaScript z manipulacijo kontrolnikov obrazca. Pokrili bomo tudi, kako uporabiti JavaScript za preverjanje vnosa obrazca in namestitev obrazca v program CGI.
Učenje JavaScripta
Ta članek je del arhiva tehnične vsebine JavaWorld. Z branjem člankov v. Se lahko veliko naučite o programiranju JavaScript Serija JavaScript, ne pozabite, da bodo nekatere informacije verjetno zastarele. Glejte "Uporaba vgrajenih predmetov JavaScript" in "Odpravljanje napak programov JavaScript" za več informacij o programiranju z JavaScriptom.
Ustvarjanje obrazca
Med navadnim obrazcem HTML in obrazcem, izboljšanim z JavaScript, je malo razlik. Glavna je ta, da se obrazec JavaScript opira na enega ali več obdelovalcev dogodkov, na primer onClick ali onSubmit. Ti prikličejo dejanje JavaScript, ko uporabnik naredi nekaj v obrazcu, na primer klikanje gumba. Obdelovalci dogodkov, ki so postavljeni z ostalimi atributi v oznake obrazca HTML, so nevidni za brskalnik, ki ne podpira JavaScript. Zaradi te lastnosti lahko pogosto uporabite en obrazec za brskalnike JavaScript in ne-JavaScript.
Tipični predmeti za nadzor obrazcev - imenovani tudi "pripomočki" - vključujejo naslednje:
- Besedilno polje za vnos vrstice besedila
- Pritisnite gumb za izbiro dejanja
- Izbirni gumbi za izbiro med skupino možnosti
- Potrditvena polja za izbiro ali preklic izbire ene, neodvisne možnosti
Ne bom se trudil naštevati vseh atributov teh kontrolnikov (pripomočkov) in kako jih uporabljati v HTML-ju. Večina referenc na HTML vam bo zagotovila podrobnosti. Za uporabo z JavaScriptom ne pozabite vedno navesti imena samega obrazca in vsakega kontrolnika, ki ga uporabljate. Imena vam omogočajo sklicevanje na predmet na vaši strani, izboljšani z JavaScriptom.
Tipična oblika je videti takole. Obvestilo, da sem navedel atribute NAME = za vse kontrolnike obrazca, vključno s samim obrazcem:
V polje vnesite nekaj:- OBRAZEC IME = "myform" definira in poimenuje obliko. Drugje v JavaScript se lahko na ta obrazec sklicujete z imenom myform. Ime, ki ga navedete obrazcu, je odvisno od vas, vendar mora biti v skladu s standardnimi pravili poimenovanja spremenljivk / funkcij JavaScript (brez presledkov, čudnih znakov, razen podčrtaja itd.).
- AKCIJA = "" določa, kako želite, da brskalnik obdeluje obrazec, ko ga pošljete programu CGI, ki se izvaja na strežniku. Ker ta primer ni namenjen pošiljanju ničesar, je URL za program CGI izpuščen.
- METHOD = "PRIDOBI" definira, da se podatki o metodi posredujejo strežniku, ko je obrazec oddan. V tem primeru je atribut napihnjen, saj vzorčni obrazec ne predloži ničesar.
- VRSTA VHODA = "besedilo" definira objekt polja z besedilom. To je standardno označevanje HTML.
- TIP VHODA = "gumb" definira predmet gumba. To je standardno označevanje HTML, razen za vodnik onClick.
- onClick = "testResults (this.form)" je obdelovalec dogodkov - obravnava dogodek, v tem primeru klikne gumb. Ko kliknete gumb, JavaScript izvrši izraz v narekovajih. Izraz pravi, da funkcijo testResults pokliče drugje na strani in ji posreduje trenutni objekt obrazca.
Pridobivanje vrednosti iz predmeta obrazca
Poskusimo s pridobivanjem vrednosti iz oblik obrazcev. Naložite stran, nato v polje za besedilo vnesite nekaj. Kliknite gumb in tisto, kar ste vnesli, je prikazano v opozorilnem polju.
Seznam 1. testform.html
Test Input function testResults (form) {var TestVar = form.inputbox.value; opozorilo ("Vtipkali ste:" + TestVar); } V polje vnesite nekaj:Tukaj je opisano, kako deluje skript. JavaScript klikne funkcijo testResults, ko kliknete gumb v obrazcu. Funkciji testResults se posreduje predmet obrazca z uporabo sintakse this.form (ta ključna beseda se sklicuje na kontrolnik gumba; obrazec je lastnost gumba in predstavlja objekt obrazca). Objektu obrazca sem dal ime oblika znotraj funkcije testResult, lahko pa poljubno ime.
Funkcija testResults je preprosta - samo kopira vsebino besedilnega polja v spremenljivko z imenom TestVar. Opazite, kako je bila navedena vsebina polja z besedilom. Določil sem objekt obrazca, ki sem ga želel uporabiti (imenovan oblika), predmet v obliki, ki sem jo želel (imenovano vnosno polje) in lastnost predmeta, ki sem si ga želel ( vrednost lastnina).
Več iz JavaWorlda
Želite več vadnic in novic o programiranju? V svojo mapo »Prejeto« dobite glasilo JavaWorld Enterprise Java.
Nastavitev vrednosti v objektu obrazca
Lastnost vrednosti vnosnega polja, prikazana v zgornjem primeru, je berljiva in zapisljiva. To pomeni, da lahko v polje preberete vse, kar je vneseno, in lahko vanj zapišete podatke. Postopek nastavitve vrednosti v objektu oblike je ravno obratno od njenega branja. Tu je kratek primer za prikaz nastavitve vrednosti v besedilnem polju obrazca. Postopek je podoben prejšnjemu primeru, le da sta tokrat dva gumba. Kliknite gumb "Preberi" in skript prebere, kaj ste vnesli v besedilno polje. Kliknite gumb "Napiši" in skript v besedilno polje zapiše še posebej grozno besedno zvezo.
Seznam 2. set_formval.html
Funkcija preizkusa vnosa readText (obrazec) {TestVar = form.inputbox.value; opozorilo ("Vtipkali ste:" + TestVar); }
function writeText (form) {form.inputbox.value = "Lep dan vam želim!" } V polje vnesite nekaj:
- Ko kliknete gumb »Preberi«, JavaScript pokliče funkcijo readText, ki prebere in prikaže vrednost, ki ste jo vnesli v besedilno polje.
- Ko kliknete gumb "Napiši", JavaScript pokliče funkcijo writeText, ki piše "Lep dan!" v besedilno polje.
Branje drugih vrednosti predmeta obrazca
Besedilno polje je morda najpogostejši predmet obrazca, ki ga boste prebrali (ali napisali) z uporabo JavaScript. Vendar lahko z JavaScriptom berete in pišete vrednosti iz večine drugih predmetov (upoštevajte, da JavaScript trenutno ni mogoče uporabiti za branje ali pisanje podatkov z besedilom za geslo). Poleg besedilnih polj lahko JavaScript uporabljate tudi z:
- Skrito besedilno polje (TIP = "skrito").
- Izbirni gumb (TIP = "radio")
- Potrditveno polje (TIP = "potrditveno polje")
- Območje besedila ()
- Seznami ()
Uporaba skritih besedilnih polj
S stališča JavaScript se skrita polja z besedilom obnašajo tako kot običajna polja z enakimi lastnostmi in metodami. Z vidika uporabnika skrita besedilna polja "ne obstajajo", ker niso prikazana v obrazcu. Skrita besedilna polja so način, s katerim lahko med strežnikom in odjemalcem posredujemo posebne informacije. Z njimi lahko hranite tudi začasne podatke, ki jih boste morda želeli uporabiti pozneje. Ker se skrita besedilna polja uporabljajo kot običajna besedilna polja, tukaj ne bo naveden ločen primer.
Uporaba radijskih gumbov
Izbirni gumbi se uporabljajo za omogočanje uporabniku, da izbere enega in samo enega predmeta iz skupine možnosti. Izbirni gumbi se vedno uporabljajo v večkratnikih; logičnega smisla ni imeti samo en izbirni gumb na obrazcu, ker ko ga enkrat kliknete, ga ne morete več odstraniti. Če želite preprosto izbiro klika / neklika, namesto tega izberite potrditveno polje (glejte spodaj).
Če želite določiti izbirne gumbe za JavaScript, dodajte vsakemu objektu isto ime. JavaScript bo ustvaril matriko z uporabo imena, ki ste ga navedli; Nato se sklicujete na gumbe z indeksi matrike. Prvi gumb v seriji je oštevilčen 0, drugi je oštevilčen 1 itd. Upoštevajte, da je atribut VALUE neobvezen za obrazce samo z JavaScriptom. Vrednost boste želeli vnesti, če obrazec oddate programu CGI, ki se izvaja na strežniku.
Sledi primer testiranja, kateri gumb je izbran. Zanka for v funkciji testButton kroži skozi vse gumbe v skupini "rad". Ko najde gumb, ki je izbran, se izloči iz zanke in prikaže številko gumba (ne pozabite: od 0).
LISTING 3. form_radio.html
Preizkus funkcije radio gumba testButton (obrazec) {za (Count = 0; Count <3; Count ++) {if (form.rad [Count]. Preverjeno) odmor; } opozorilo ("Gumb" + Število + "je izbrano"); }Nastavitev izbirnega gumba s trgom HTML je preprosta. Če želite, da se obrazec najprej prikaže z izbranim izbirnim gumbom, dodajte oznako CHECKED v oznako HTML za ta gumb:
Izbiro gumba lahko tudi programsko nastavite z JavaScriptom z uporabo označene lastnosti. Določite indeks polja izbirnih gumbov, ki ga želite preveriti.
form.rad [0]. preverjeno = res; // nastavi na prvi gumb v skupini radUporaba potrditvenih polj
Potrditvena polja so samostojni elementi; to pomeni, da ne sodelujejo s sosednjimi elementi, kot to počnejo radijski gumbi. Zato jih je nekoliko lažje uporabljati. Z uporabo JavaScript lahko preizkusite, ali je potrditveno polje označeno z označeno lastnostjo, kot je prikazano tukaj. Prav tako lahko nastavljeno lastnost nastavite tako, da doda ali odstrani kljukico iz potrditvenega polja. V tem primeru opozorilno sporočilo pove, ali je prvo potrditveno polje označeno. Vrednost je true, če je polje označeno; false, če ni.
Seznam 4. form_check.html
Potrditveno polje Test function testButton (obrazec) {opozorilo (form.check1. Označeno); }Potrditveno polje 1
Potrditveno polje 2
Potrditveno polje 3
Tako kot pri predmetu izbirnega gumba, dodajte oznako CHECKED v oznako HTML za tisto potrditveno polje, ki ga želite najprej preveriti, ko je obrazec prvič naložen.
Potrditveno polje 1>Izbiro gumba lahko tudi programsko nastavite z JavaScriptom z uporabo označene lastnosti. Določite ime potrditvenega polja, ki ga želite označiti, kot v
form.check1. checked = true;Uporaba besedilnih področij
Območja besedila se uporabljajo za vnos besedila z več vrsticami. Privzeta velikost polja z besedilom je 1 vrstica z 20 znaki. Velikost lahko spremenite z atributoma COLS in ROWS. Tu je tipičen primer besedilnega področja z besedilnim poljem, širokim 40 znakov in 7 vrstic:
Za branje vsebine polja z besedilom lahko uporabite JavaScript. To se naredi z lastnostjo vrednosti. Tu je primer:
