Programmēšana

Izmantojot JavaScript un veidlapas

Javascript nēsā daudzas cepures. Lai izveidotu īpašus efektus, varat izmantot JavaScript. Varat izmantot JavaScript, lai padarītu savas HTML lapas “gudrākas”, izmantojot tās lēmumu pieņemšanas iespējas. HTML formu uzlabošanai varat izmantot JavaScript. Šis pēdējais pieteikums ir īpaši svarīgs. Starp visām cepurēm, kuras JavaScript var valkāt, tās formas apstrādes funkcijas ir vienas no pieprasītākajām un izmantotākajām.

Tīmekļa izdevēja sirdī nekas vairāk nerada bailes kā šie trīs burti: C-G-I. CGI (kas nozīmē kopēju vārtejas saskarni) ir mehānisms, kā droši transportēt datus no klienta (pārlūkprogrammas) uz serveri. To parasti izmanto datu pārsūtīšanai no HTML formas uz serveri.

Izmantojot JavaScript savā pusē, jūs varat apstrādāt vienkāršas veidlapas, neizsaucot serveri. Ja, iesniedzot veidlapu CGI programmai, tas ir nepieciešams, jūs varat likt JavaScript rūpēties par visām sākotnējām prasībām, piemēram, apstiprināt ievadi, lai pārliecinātos, ka lietotājs ir atzīmējis katru i. Šajā slejā mēs rūpīgi aplūkosim JavaScript formas savienojumu, tostarp to, kā izmantot JavaScript formas objektu, kā lasīt un iestatīt veidlapas saturu un kā aktivizēt JavaScript notikumus, manipulējot ar veidlapu vadīklām. Mēs arī aplūkosim, kā izmantot JavaScript, lai pārbaudītu veidlapas ievadi un veidlapu ieskaitītu CGI programmā.

Mācīties JavaScript

Šis raksts ir daļa no JavaWorld tehniskā satura arhīva. Jūs varat daudz uzzināt par JavaScript programmēšanu, lasot rakstus JavaScript sērija, tikai paturiet prātā, ka daļa informācijas, iespējams, ir novecojusi. Plašāku informāciju par programmēšanu ar JavaScript skatiet sadaļā "JavaScript iebūvēto objektu izmantošana" un "JavaScript programmu atkļūdošana".

Veidlapas izveide

Starp taisnu HTML formu un JavaScript uzlabotu veidlapu ir maz atšķirību. Galvenais ir tas, ka JavaScript veidlapa ir balstīta uz vienu vai vairākiem notikumu apstrādātājiem, piemēram, onClick vai onSubmit. Tie izsauc JavaScript darbību, kad lietotājs formā kaut ko dara, piemēram, noklikšķina uz pogas. Pasākumu apstrādātāji, kas ar pārējiem atribūtiem ir ievietoti HTML formas tagos, nav redzami pārlūkprogrammai, kas neatbalsta JavaScript. Šīs iezīmes dēļ jūs bieži varat izmantot vienu veidlapu gan JavaScript, gan citām pārlūkprogrammām.

Tipiskos veidlapas vadības objektos, kurus dēvē arī par "logrīkiem", ietilpst:

  • Tekstlodziņš teksta rindas ievadīšanai
  • Spiedpoga darbības izvēlei
  • Radiopogas vienas izvēles veikšanai opciju grupā
  • Atzīmējiet izvēles rūtiņas, lai atlasītu vai noņemtu atzīmi no vienas neatkarīgas opcijas

Es neuztraucos uzskaitīt visus šo vadīklu (logrīku) atribūtus un to, kā tos izmantot HTML. Jebkura atsauce uz HTML sniegs jums detalizētu informāciju. Lai izmantotu ar JavaScript, jums vienmēr jāatceras norādīt pašas formas un katras izmantotās vadīklas nosaukumu. Nosaukumi ļauj atsaukties uz objektu savā JavaScript uzlabotajā lapā.

Tipiskā forma izskatās šādi. Paziņojums Esmu norādījis NAME = atribūtus visām veidlapu vadīklām, ieskaitot pašu veidlapu:

 Ievadiet kaut ko lodziņā:

  • FORM NAME = "mana forma" nosaka un nosauc formu. Citur JavaScript varat norādīt šo veidlapu pēc nosaukuma myform. Veids, kuru piešķirat veidlapai, ir atkarīgs no jums, taču tam jāatbilst JavaScript standarta mainīgo / funkciju nosaukšanas noteikumiem (bez atstarpēm, bez dīvainām rakstzīmēm, izņemot pasvītrojumu utt.).
  • ACTION = "" nosaka, kā vēlaties, lai pārlūks apstrādātu veidlapu, kad tā tiek iesniegta CGI programmai, kas darbojas serverī. Tā kā šis piemērs nav paredzēts, lai kaut ko iesniegtu, CGI programmas URL tiek izlaists.
  • METODE = "IEGŪT" definē metodi, kā dati tiek nodoti serverim, iesniedzot veidlapu. Šajā gadījumā atribūts ir puffer, jo veidlapas piemērs neko neiesniedz.
  • INPUT TYPE = "teksts" definē tekstlodziņa objektu. Šis ir standarta HTML marķējums.
  • INPUT TYPE = "poga" nosaka pogas objektu. Šis ir standarta HTML marķējums, izņemot onClick apdarinātāju.
  • onClick = "testResults (this.form)" ir notikumu apstrādātājs - tas apstrādā notikumu, šajā gadījumā noklikšķinot uz pogas. Noklikšķinot uz pogas, JavaScript izpilda izteicienu pēdiņās. Izteiciens saka izsaukt funkciju testResults citur lapā un nodot tai pašreizējo formas objektu.

Vērtības iegūšana no formas objekta

Eksperimentēsim ar vērtību iegūšanu no formas objektiem. Ielādējiet lapu un pēc tam ierakstiet kaut ko tekstlodziņā. Noklikšķiniet uz pogas, un ievadītais tiks parādīts brīdinājuma lodziņā.

Saraksts 1. testform.html

  Testa ievades funkcija testResults (forma) {var TestVar = form.inputbox.value; brīdinājums ("Jūs ierakstījāt:" + TestVar); } Ievadiet lodziņā kaut ko:

Lūk, kā darbojas skripts. JavaScript izsauc funkciju testResults, noklikšķinot uz pogas veidlapā. Funkcija testResults tiek nodota formas objektam, izmantojot sintaksi this.form (šis atslēgvārds atsaucas uz pogas vadību; forma ir pogas vadības īpašība un apzīmē formas objektu). Esmu devis formas objektam nosaukumu formā iekšā testResult funkcija, bet jūs varat jebkuru vārdu, kas jums patīk.

Funkcija testResults ir vienkārša - tā tikai kopē tekstlodziņa saturu mainīgajā ar nosaukumu TestVar. Ievērojiet, kā tika atsauce uz tekstlodziņa saturu. Es definēju formas objektu, kuru vēlējos izmantot (saukts formā), objekts manis vēlamajā formā (saukts ievades lodziņš), un šī objekta īpašumu, kuru es vēlējos ( vērtība īpašums).

Vairāk no JavaWorld

Vai vēlaties vairāk programmēšanas apmācību un jaunumu? Saņemiet JavaWorld Enterprise Java biļetenu, kas tiek piegādāts iesūtnē.

Vērtības iestatīšana formas objektā

Iepriekšējā piemērā parādītais ievades lodziņa rekvizīts ir gan lasāms, gan rakstāms. Tas ir, jūs varat izlasīt visu, kas ierakstīts lodziņā, un tajā var ierakstīt datus. Vērtības iestatīšanas process formas objektā ir tieši pretējs tā nolasīšanai. Šeit ir īss piemērs, lai parādītu vērtības iestatīšanu formas tekstlodziņā. Process ir līdzīgs iepriekšējam piemēram, izņemot to, ka šoreiz ir divas pogas. Noklikšķiniet uz pogas "Lasīt", un skripts nolasīs tekstu, ko ievadījāt tekstlodziņā. Noklikšķiniet uz pogas "Rakstīt", un skripts teksta lodziņā ieraksta īpaši aizraujošu frāzi.

Saraksts 2. set_formval.html

Pārbaudes ievades funkcija readText (forma) {TestVar = form.inputbox.value; brīdinājums ("Jūs ierakstījāt:" + TestVar); }

function writeText (forma) {form.inputbox.value = "Lai jums jauka diena!" } Ievadiet lodziņā kaut ko:

  • Noklikšķinot uz pogas "Lasīt", JavaScript izsauc funkciju readText, kas nolasa un parāda tekstu, kuru ievadījāt tekstlodziņā.
  • Noklikšķinot uz pogas "Rakstīt", JavaScript izsauc funkciju writeText, kas raksta "Lai jums jauka diena!" tekstlodziņā.

Citu formas objektu vērtību lasīšana

Teksta lodziņš, iespējams, ir visizplatītākais formas objekts, kuru lasāt (vai rakstāt), izmantojot JavaScript. Tomēr jūs varat izmantot JavaScript, lai lasītu un rakstītu vērtības no lielākās daļas citu objektu (ņemiet vērā, ka JavaScript pašlaik nevar izmantot datu lasīšanai vai rakstīšanai, izmantojot paroles tekstlodziņu). Papildus tekstlodziņiem JavaScript var izmantot ar:

  • Slēpts tekstlodziņš (TYPE = "slēpts").
  • Radio poga (TYPE = "radio")
  • Atzīmēšanas rūtiņa (TYPE = "izvēles rūtiņa")
  • Teksta apgabals ()
  • Saraksti ()

Slēpto teksta lodziņu izmantošana

No JavaScript viedokļa slēptās tekstlodziņas darbojas tāpat kā parastās tekstlodziņas, tām ir tādas pašas īpašības un metodes. No lietotāja viedokļa slēptās tekstlodziņas "nepastāv", jo tās neparādās formā. Drīzāk slēptās tekstlodziņas ir līdzeklis, ar kuru starp serveri un klientu var nodot īpašu informāciju. Tos var izmantot arī pagaidu datu glabāšanai, kurus, iespējams, vēlēsities izmantot vēlāk. Tā kā slēptās tekstlodziņas tiek izmantotas tāpat kā standarta tekstlodziņi, atsevišķs piemērs šeit netiks sniegts.

Izmantojot radio pogas

Radio pogas tiek izmantotas, lai lietotājs varētu izvēlēties vienu un tikai vienu vienumu no opciju grupas. Radio pogas vienmēr tiek izmantotas vairākkārt; Veidlapā nav tikai loģiskas jēgas, ja veidlapā ir tikai viena poga, jo, noklikšķinot uz tās, to vairs nevarēs noklikšķināt. Ja vēlaties vienkāršu izvēles klikšķi / atbloķēšanu, tā vietā izmantojiet izvēles rūtiņu (skatīt zemāk).

Lai definētu radio pogas JavaScript, katram objektam piešķiriet to pašu nosaukumu. JavaScript izveidos masīvu, izmantojot jūsu norādīto vārdu; pēc tam jūs atsaucaties uz pogām, izmantojot masīvu indeksus. Pirmā sērijas poga ir numurēta ar 0, otrā - ar numuru 1 un tā tālāk. Ņemiet vērā, ka atribūts VALUE nav obligāts tikai JavaScript veidlapām. Vērtību vēlaties norādīt, ja veidlapu iesniedzat CGI programmā, kas darbojas serverī.

Tālāk ir parādīts piemērs, kā pārbaudīt, kura poga ir atlasīta. Funkcijas testButton for cikls pārvietojas pa visām pogām grupā "rad". Atrodot izvēlēto pogu, tā iziet no cilpas un parāda pogas numuru (atcerieties: sākot no 0).

3. veidlapa_radio.html

  Radiopogas testa funkcijas testsButon (form) {for (Count = 0; Count <3; Count ++) {if (form.rad [Count] .checked) break; } brīdinājums (ir atlasīta poga + skaitlis + ir atlasīta); }

Radiopogas izvēles iestatīšana ar HTML tirgu ir vienkārša. Ja vēlaties, lai veidlapa sākotnēji tiktu parādīta ar atlasītu pogu, pievienojiet atribūtu CHECKED šīs pogas HTML marķējumam:

Varat arī programmiski iestatīt pogu izvēli, izmantojot JavaScript, izmantojot atzīmēto rekvizītu. Norādiet pārbaudāmā radiopogu masīva indeksu.

forma.rad [0] .pārbaudīts = patiess; // iestata pirmo pogu rad grupā

Izmantojot izvēles rūtiņas

Atzīmēšanas rūtiņas ir atsevišķi elementi; tas ir, tie nesadarbojas ar blakus esošajiem elementiem, piemēram, radiopogas. Tāpēc tos ir mazliet vieglāk izmantot. Izmantojot JavaScript, varat pārbaudīt, vai izvēles rūtiņa ir atzīmēta, izmantojot pārbaudīto rekvizītu, kā parādīts šeit. Tāpat jūs varat iestatīt atzīmēto rekvizītu pievienot vai noņemt atzīmi no izvēles rūtiņas. Šajā piemērā brīdinājuma ziņojums norāda, vai ir atzīmēta pirmā izvēles rūtiņa. Vērtība ir patiesa, ja rūtiņa ir atzīmēta; nepatiesa, ja tā nav.

Saraksts 4. form_check.html

  Izvēles rūtiņa Test function testButton (forma) {alert (form.check1.checked); }

1. izvēles rūtiņa

2. izvēles rūtiņa

3. izvēles rūtiņa

Tāpat kā ar radio pogas objektu, pievienojiet CHECKED atribūtu HTML marķējumam šai izvēles rūtiņai, kuru sākotnēji vēlaties pārbaudīt, kad veidlapa tiek pirmo reizi ielādēta.

1. izvēles rūtiņa>

Varat arī programmiski iestatīt pogu izvēli, izmantojot JavaScript, izmantojot pārbaudīto rekvizītu. Norādiet izvēles rūtiņas nosaukumu, kuru vēlaties pārbaudīt, kā norādīts

form.check1.checked = true;

Teksta apgabalu izmantošana

Teksta apgabali tiek izmantoti vairākrindu teksta ievadīšanai. Teksta lodziņa noklusējuma lielums ir 1 rinda ar 20 rakstzīmēm. Izmēru var mainīt, izmantojot atribūtus COLS un ROWS. Šeit ir tipisks teksta apgabala piemērs, kurā tekstlodziņš ir 40 rakstzīmes plats un 7 rindas:

Varat izmantot JavaScript, lai lasītu teksta apgabala lodziņa saturu. Tas tiek darīts ar vērtību value. Šeit ir piemērs:

$config[zx-auto] not found$config[zx-overlay] not found