Naudojant „JavaScript“ ir formas

„Javascript“ nešioja daug skrybėlių. Norėdami sukurti specialiuosius efektus, galite naudoti „JavaScript“. Galite naudoti „JavaScript“, kad HTML puslapiai būtų „protingesni“, pasinaudojant jo sprendimų priėmimo galimybėmis. HTML formoms patobulinti galite naudoti „JavaScript“. Ši paskutinė paraiška yra ypač svarbi. Iš visų „JavaScript“ dėvimų skrybėlių formos apdorojimo funkcijos yra vienos iš labiausiai ieškomų ir naudojamų.

Niekas nesukelia daugiau baimės žiniatinklio leidėjo širdyje nei šios trys raidės: C-G-I. CGI (tai reiškia bendrą šliuzo sąsają) yra saugaus duomenų perdavimo iš kliento (naršyklės) į serverį mechanizmas. Paprastai jis naudojamas duomenims perkelti iš HTML formos į serverį.

Kai „JavaScript“ yra jūsų pusėje, galite apdoroti paprastas formas neprašydami serverio. Kai pateikiant formą CGI programai būtina, galite paprašyti „JavaScript“ pasirūpinti visais išankstiniais reikalavimais, pavyzdžiui, patvirtinti įvestį, kad vartotojas pažymėtų taškus kas i. Šiame stulpelyje atidžiai išnagrinėsime „JavaScript“ formos ryšį, įskaitant tai, kaip naudoti „JavaScript“ formos objektą, kaip skaityti ir nustatyti formos turinį ir kaip suaktyvinti „JavaScript“ įvykius manipuliuojant formos valdikliais. Taip pat aptarsime, kaip naudoti „JavaScript“, norint patikrinti formos įvestį ir perkelti formą į CGI programą.

Mokytis „JavaScript“

Šis straipsnis yra „JavaWorld“ techninio turinio archyvo dalis. Galite daug sužinoti apie „JavaScript“ programavimą skaitydami straipsnius „JavaScript“ serija, tiesiog nepamirškite, kad dalis informacijos gali būti pasenusi. Norėdami daugiau sužinoti apie programavimą naudojant „JavaScript“, žr. „Integruotų„ JavaScript “objektų naudojimas“ ir „„ JavaScript “programų derinimas“.

Formos kūrimas

Yra nedaug skirtumų tarp tiesios HTML formos ir „JavaScript“ patobulintos formos. Pagrindinis tai, kad „JavaScript“ forma priklauso nuo vieno ar daugiau įvykių tvarkytuvų, tokių kaip „onClick“ arba „onSubmit“. Jie iškviečia „JavaScript“ veiksmą, kai vartotojas formoje daro ką nors, pavyzdžiui, spustelėja mygtuką. Įvykių tvarkytojai, kurie kartu su likusiais atributais yra HTML formos žymose, nematomi naršyklėje, kuri nepalaiko „JavaScript“. Dėl šios savybės dažnai galite naudoti vieną formą tiek „JavaScript“, tiek ne „JavaScript“ naršyklėms.

Tipiniai formos valdymo objektai, dar vadinami „valdikliais“, apima:

• Teksto laukelis teksto eilutei įvesti
• Paspauskite mygtuką, kad pasirinktumėte veiksmą
• Radijo mygtukai, skirti atlikti vieną pasirinkimą tarp parinkčių grupės
• Pažymėkite langelius, kad pasirinktumėte arba atžymėtumėte vieną nepriklausomą variantą

Nesivarginsiu išvardyti visų šių valdiklių (valdiklių) atributų ir kaip juos naudoti HTML. Dauguma bet kokių HTML nuorodų suteiks jums išsamią informaciją. Jei norite naudoti su „JavaScript“, visada turėtumėte nepamiršti nurodyti pačios formos pavadinimą ir kiekvieną naudojamą valdiklį. Pavadinimai leidžia jums nurodyti objektą „JavaScript“ patobulintame puslapyje.

Tipiška forma atrodo taip. Atkreipkite dėmesį, kad visiems formos valdikliams, įskaitant pačią formą, pateikiau atributus NAME =:

 Įveskite kažką laukelyje:

• FORMA NAME = "mano forma" apibrėžia ir įvardija formą. Bet kur kitur „JavaScript“ galite nurodyti šią formą pagal pavadinimą mano forma. Vardas, kurį suteikiate savo formai, priklauso nuo jūsų, tačiau jis turėtų atitikti standartines „JavaScript“ kintamųjų / funkcijų pavadinimo taisykles (be tarpų, be keistų simbolių, išskyrus pabraukimą ir kt.).
• ACTION = "" apibrėžia, kaip norite, kad naršyklė tvarkytų formą, kai ji pateikiama CGI programai, veikiančiai serveryje. Kadangi šis pavyzdys nėra skirtas nieko pateikti, CGI programos URL praleidžiamas.
• METODAS = "GAUTI" apibrėžia metodo duomenis, kurie perduodami serveriui, kai pateikiama forma. Šiuo atveju atributas yra pūkuotas, nes pavyzdinė forma nieko nepateikia.
• INPUT TYPE = "tekstas" apibrėžia teksto laukelio objektą. Tai yra įprastas HTML žymėjimas.
• INPUT TYPE = "mygtukas" apibrėžia mygtuko objektą. Tai yra įprastas HTML žymėjimas, išskyrus „onClick“ tvarkyklę.
• onClick = "testResults (this.form)" yra įvykių tvarkytojas - jis tvarko įvykį, šiuo atveju spustelėdamas mygtuką. Spustelėjus mygtuką, „JavaScript“ vykdo išraišką kabutėse. Išraiška sako, kad reikia iškviesti funkciją testResults kitoje puslapio vietoje ir perduoti jai dabartinį formos objektą.

Vertės gavimas iš formos objekto

Pabandykime gauti vertes iš formos objektų. Įkelkite puslapį, tada įveskite ką nors į teksto laukelį. Spustelėkite mygtuką ir tai, ką įvedėte, bus rodoma įspėjimo laukelyje.

Sąrašas 1. testform.html

  „Test Input“ funkcijos testResults (forma) {var TestVar = form.inputbox.value; įspėjimas ("Jūs įvedėte:" + TestVar); } Įveskite kažką laukelyje:

Štai kaip scenarijus veikia. „JavaScript“ iškviečia funkciją testResults, kai spustelite formos mygtuką. Funkcija testResults perduodama formos objektui naudojant sintaksę this.form (šis raktinis žodis nurodo mygtuko valdiklį; forma yra mygtuko valdiklio ypatybė ir reiškia formos objektą). Formos objektui suteikiau pavadinimą forma funkcijos „testResult“ viduje, tačiau galite įrašyti bet kurį jums patinkantį vardą.

Funkcija „testResults“ yra paprasta - ji tik nukopijuoja teksto laukelio turinį į kintamąjį, pavadintą „TestVar“. Atkreipkite dėmesį, kaip buvo nuoroda į teksto laukelio turinį. Aš apibrėžiau formos objektą, kurį norėjau naudoti (vadinamas forma), objektas mano norimoje formoje (vadinamas įvesties dėžutė), ir norimo to objekto nuosavybės ( vertė nuosavybė).

Daugiau iš „JavaWorld“

Norite daugiau programavimo pamokų ir naujienų? Gaukite „JavaWorld Enterprise Java“ naujienlaiškį, pristatytą į gautuosius.

Vertės nustatymas formos objekte

Įvesties dėžės vertės ypatybė, parodyta aukščiau pateiktame pavyzdyje, yra skaitoma ir rašoma. Tai yra, jūs galite perskaityti viską, kas įvesta į laukelį, ir galite vėl įrašyti duomenis į jį. Formos objekto vertės nustatymo procesas yra tik atvirkštinis jos skaitymui. Štai trumpas pavyzdys, parodantis vertės nustatymą formos teksto laukelyje. Procesas yra panašus į ankstesnį pavyzdį, išskyrus tai, kad šį kartą yra du mygtukai. Spustelėkite mygtuką „Skaityti“ ir scenarijus perskaitys tai, ką įvedėte į teksto laukelį. Spustelėkite mygtuką „Rašyti“ ir scenarijus į teksto laukelį įrašys ypač nemalonią frazę.

Sąrašas 2. set_formval.html

  Tikrinti įvesties funkciją readText (forma) {TestVar = form.inputbox.value; įspėjimas ("Jūs įvedėte:" + TestVar); } 
funkcija writeText (forma) {form.inputbox.value = "Gražios dienos!" } Įveskite kažką laukelyje:

• Spustelėjus mygtuką „Skaityti“, „JavaScript“ iškviečia funkciją „readText“, kuri nuskaito ir parodo teksto laukelyje įvestą vertę.
• Spustelėjus mygtuką „Rašyti“, „JavaScript“ iškviečia funkciją writeText, kuri parašo „Gražios dienos!“ teksto laukelyje.

Kitų formos objektų reikšmių skaitymas

Teksto laukelis yra galbūt labiausiai paplitęs formos objektas, kurį skaitote (arba rašote) naudodami „JavaScript“. Tačiau, norėdami skaityti ir rašyti daugumos kitų objektų vertes, galite naudoti „JavaScript“ (atkreipkite dėmesį, kad „JavaScript“ šiuo metu negalima naudoti duomenims skaityti ar rašyti naudojant slaptažodžio teksto laukelį). Be teksto laukelių, „JavaScript“ galima naudoti su:

• Paslėptas teksto laukelis (TYPE = "paslėptas").
• Radijo mygtukas (TYPE = "radijas")
• Žymimasis laukelis (TYPE = "žymimasis laukelis")
• Teksto sritis ()
• Sąrašai ()

Paslėptų teksto laukelių naudojimas

„JavaScript“ požiūriu, paslėpti teksto laukeliai elgiasi taip pat, kaip įprasti teksto laukeliai, turėdami tas pačias savybes ir metodus. Vartotojo požiūriu, paslėptų teksto laukelių „nėra“, nes jie nerodomi formoje. Užuot paslėpti teksto laukeliai, tai priemonė, kuria galima perduoti specialią informaciją tarp serverio ir kliento. Jie taip pat gali būti naudojami laikiniems duomenims, kuriuos galbūt norėsite naudoti vėliau, laikyti. Kadangi paslėpti teksto laukeliai naudojami kaip standartiniai teksto laukeliai, atskiras pavyzdys čia nebus pateiktas.

Radijo mygtukų naudojimas

Radijo mygtukai naudojami tam, kad vartotojas galėtų pasirinkti vieną ir tik vieną elementą iš parinkčių grupės. Radijo mygtukai visada naudojami kelis kartus; nėra logiškos prasmės formoje turėti tik vieną radijo mygtuką, nes spustelėję jį, negalėsite jo spustelėti. Jei norite paprasčiausio pasirinkimo spustelėti / panaikinti pasirinkimo, naudokite žymės langelį (žr. Toliau).

Norėdami apibrėžti „JavaScript“ radijo mygtukus, kiekvienam objektui nurodykite tą patį pavadinimą. „JavaScript“ sukurs masyvą naudodamas jūsų pateiktą vardą; tada nurodysite mygtukus naudodami masyvo indeksus. Pirmasis serijos mygtukas yra sunumeruotas 0, antrasis - 1 ir kt. Atminkite, kad atributas VALUE yra neprivalomas tik „JavaScript“ formoms. Reikės pateikti vertę, jei formą pateiksite CGI programai, veikiančiai serveryje.

Toliau pateikiamas pasirinkto mygtuko testavimo pavyzdys. „TestButton“ funkcijos „for“ ciklas perjungia visus „rad“ grupės mygtukus. Radęs pasirinktą mygtuką, jis išeina iš ciklo ir parodo mygtuko numerį (atminkite: pradedant nuo 0).

Nukreiptas 3. form_radio.html

  Radijo mygtuko testo funkcijos testasMygtukas (forma) {už (Count = 0; Count <3; Count ++) {if (forma.rad [Count] .checked) pertrauka; } įspėjimas („Pasirinktas mygtukas“ + skaičius + “); }

Nustatyti radijo mygtuką su HTML rinka yra paprasta. Jei norite, kad forma iš pradžių būtų rodoma su pasirinktu radijo mygtuku, pridėkite atributą PATIKRINTA prie to mygtuko HTML žymėjimo:

Taip pat galite programiškai nustatyti mygtukų pasirinkimą naudodami „JavaScript“, naudodami pažymėtą ypatybę. Nurodykite norimo patikrinti radijo mygtukų masyvo rodyklę.

forma.rad [0]. patikrinta = tiesa; // nustato pirmąjį rad grupės mygtuką

Naudojant žymimuosius langelius

Žymės langeliai yra atskiri elementai; tai yra, jie neturi sąveikos su kaimyniniais elementais, kaip tai daro radijo mygtukai. Todėl juos šiek tiek lengviau naudoti. Naudodami „JavaScript“ galite patikrinti, ar žymimasis laukelis pažymėtas naudojant pažymėtą ypatybę, kaip parodyta čia. Taip pat galite nustatyti pažymėtą ypatybę, kad ji pridėtų žymeklį arba pašalintų jį iš žymės langelio. Šiame pavyzdyje įspėjimo pranešime nurodoma, ar pažymėtas pirmasis žymės langelis. Vertė yra teisinga, jei langelis pažymėtas; melas, jei taip nėra.

Sąrašas 4. form_check.html

  Pažymėkite langelį Test function testButton (forma) {įspėjimas (forma.check1.checked); }
1 žymimasis laukelis
2 žymimasis laukelis
3 žymimasis laukelis

Kaip ir radijo mygtuko objekte, prie žymėjimo langelio, kurį norite iš pradžių patikrinti, kai pirmą kartą bus įkelta forma, HTML žymėjime pridėkite CHECKED atributą.

1 žymimasis laukelis>

Taip pat galite programiškai nustatyti mygtukų pasirinkimą naudodami „JavaScript“, naudodami pažymėtą ypatybę. Nurodykite norimo patikrinti žymimo langelio pavadinimą, kaip nurodyta

forma.check1.checked = tiesa;

Teksto sričių naudojimas

Teksto sritys naudojamos kelių eilučių teksto įvedimui. Numatytasis teksto laukelio dydis yra 1 eilutė iš 20 simbolių. Dydį galite pakeisti naudodami atributus COLS ir ROWS. Štai tipiškas teksto srities pavyzdys, kai teksto laukelis yra 40 simbolių pločio 7 eilutėmis:

Norėdami perskaityti teksto srities langelio turinį, galite naudoti „JavaScript“. Tai daroma su vertės nuosavybe. Štai pavyzdys: