Eftir þessa lexíu átt þú að kunna að:
Athugašu: Ef žś ert ekki meš skjölin śr sķšustu lexķu, žį getur žś sótt eintök af žeim nśna.
Ef þú hefur ekki aðgang að vefþjóni eða þekkingu til að forrita CGI, þá getur þú samt gert gagnvirkan vef með JavaScript. Einn kostur er að öll „vinnan“ fer fram á tölvu notandans (e. client-based) en ekki á vefþjóni -- þar af leiðandi er minni umferð fram og til baka yfir Internetið. Annar kostur er að maður getur búið til fullvirkar vefsíður sem virka jafnvel þó maður sé ekki tengdur við Internetið. Að auki gefur JavaScript okkur færi á að sannreyna gögn áður en unnið er úr þeim.
En það eru, aftur á móti, hlutir sem JavaScript getur ekki gert -- það getur ekki skrifað eða vistað nein gögn send úr vefformi. Þar að auki verður JavaScript kóðinn að vera ofinn í vefsíðuna sjálfa, þannig að flókin skrift stækka skjölin (og þar með sóknartímann) í vefnum þínum. Þar við bætist að vegna þess að skriftin er hluti af HTML kóðanum, þá getur hver sem er skoðað það -- ef þú býrð til JavaScript próf, þá verða svörin að vera einhverstaðar í kóðanum!
Að lokum er sá möguleiki að gestir á síðuna þína séu með það gamlan vefskoðara að hann ráði ekki við JavaScript.
En nú ætlum við að breyta skjölum í Eldfjallavefnum þannig að í þeim verði nokkur form með JavaScript. Fyrsta síðan er formið sem við vorum að vinna að í síðustu lexíu sem notaði CGI forrit til að reikna út hraða út frá hæð sem gefin er í innsláttarreit. Útreikningarnir eru frekar einfaldir og því hægt að framkvæma þá með JavaScript.
En frekar en láta útreikningana sjást á nýrri vefsíðu eins og CGI forritið gerir, þá getum við búið til nýjan innsláttarreit í forminu og látið JavaScript rita í hann niðurstöðurnar. Þannig er notandinn áfram á sömu síðunni og hann getur prófað röð af tölum.
<tr> <td valign=top align=right><tt><b>niðurstöður</b></td> <td valign=top><input type="text" name="result" size="20"> </td> </tr>
<script language="JavaScript">
<!--
/* Hraðaútreikningar
Reiknar út mesta fræðilega hraða út frá hæð
með því að reikna út stöðuorku og hreyfiorku */
function calc_vel (form) {
// Athuga að ílagið sé gilt
if ( isNaN(form.height.value) || (form.height.value <= 0) ) {
alert('Hæðin sem gefin er \''+ form.height.value +
'\' er ekki gild. Til að ljúka útreikningunum, ' +
'þá verður hæðin að vera tala hærri en 0.');
form.result.value = '';
} else {
// Gert ráð fyrir metrakerfi fyrst
var gravity = 9.8;
var myUnits = 'metrar';
// Ef merkt var við fet, uppfæra einingu og þyngdarkonstant
if (form.units[1].checked) {
gravity = 32.0;
myUnits = 'fet';
}
// Reikna hraða og setja niðurstöður í textareit
var velocity = parseInt(Math.sqrt( 2 * gravity * form.height.value));
form.result.value = velocity + ' ' + myUnits + '/sekúndu';
}
// Gefa gildið FALSE svo að formið kalli ekki á CGI
return false;
}
//-->
</script>
Við notuðum hér hluti sem þú hefur ekki séð áður! Þú þarft ekki að skilja þá til að afrita og líma þennan kóða, en við skulum gefa yfirlit yfir hvað þetta gerir.
Í fyrsta hluta kóðans er marglínu athugasemd afmörkuð með /* ... */ til að lýsa því hvað skriftin gerir. Fallið okkar er kallað „calc_vel“ og fær upplýsingar í gegnum stika (e. parameter) (þetta sem er innan sviga) sem kallast „form“-- þetta verður JavaScript byggingin fyrir alla hluti sem valdir eru og ritaðir í vefsíðuformið okkar.
Það fyrsta sem skriftin okkar gerir er að athuga að talan sem gefin er sé gild. Þess vegna er framkvæmd prófun til að sjá hvort hún er annað en tala með því að nota innbyggt JavaScript fall sem kallast NaN sem athugar hvort eitthvað er ekki tala (e. Not a Number) og við athugum líka að talan sé hærri en 0. Ef ílagið fellur á öðru hvoru þessara prófa, þá koma upp aðvörunarboð.
Annars (á eftir else) höldum við áfram með útreikningana, fyrst eins og ef um væri að ræða metrakerfið. Síðan er athugað hvort fet voru nokkuð valin og útreikningarnir lagaðir eftir því. Síðan notar skriftið fleiri JavaScript föll til að reikna út svarið og gefa það sem heiltölu. Þetta svar er síðan hægt að setja í textareitinn sem við settum inn i þrepi 2.
Síðasta fallið gefur gildið „false“ í það sem kallaði á fallið. Í næsta þrepi sjáum við hvað þetta gerir.
Það síðasta sem við þurfum að gera er að lagfæra <form> skipunina svo hún sendi fyrirspurn á nýja JavaScript fallið.
<form method=post action="http://www.mcli.dist.maricopa.edu/cgi-bin/tut/energy.pl" name="energy" onSubmit="return calc_vel(this)">
Eigindið onSubmit er nýtt fyrir þessa skipun og framkvæmir það JavaScript sem er á milli tilvitnanamerkjanna þegar ýtt er á Sendingarhnappinn í forminu. Það gerir þetta áður en það kallar á CGI forritið sem tilgreint er í ACTION= eigindinu. Ef niðurstaða calc_vel(this) er sönn (e. true), þá er CGI forritið framkvæmt. Ef hún er ósönn (e. false), þá er ekki kallað á CGI forritið. Þetta heimilar þér þar með að framkvæma JavaScipt áður en formið er sent til CGI forrits og þannig er oft hægt að nota JavaScript til að sannreyna ílagsgögn.
Annar kostur við að sameina kóða svona er að ef notandinn er af einhverjum ástæðum að nota vefskoðara sem getur ekki notað JavaScript, þá hunsar hann allan onSubmit kóðann og sendir gögnin á CGI forritið.
Þegar fallinu calc_vel er sendur stikinn this, þá þýðir það „sendu á þetta fall öll gögnin í forminu, nöfn og gildi allra formhluta.
Það næsta sem við ætlum að gera með JavaScript er að gera auðveldara að ferðast um vefinn okkar.
Þar til nú höfum við sett stiklur efst á hverja síðu sem gera notandanum kleift að fara áfram eða afturábak um eina síðu í vefnum okkar eða að fara til baka á heimasíðuna. Við getum notað vefform í staðinn fyrir þetta og haft í því fellivalmynd sem gerir notandanum fært að fara á hvaða síðu sem er í vefnum. Þetta er mjög gagnlegt í flóknum vef og fækkar þeim síðum sem notandinn verður að skoða til að finna þær upplýsingar sem hann vantar. Fellivalmyndir samþjappa líka upplýsingarnar á einn stað (berðu það saman við að hafa 25 stiklur á sama stað).
Okkað aðferð er að skrifa almennan kóða sem getur farið í öll skjöl sem nota stýristiku og breyta þeim síðan smávægilega á hverri síðu.
function goPage (newURL) {
// Kallað er á þetta fall úr fellivalmynd til að færa notandann á
// aðra síðu. Tómur strengur er hunsaður
if (newURL != "") {
// sleppa skiptilínum og núllstilla valið
if (newURL == "-" ) {
resetMenu();
} else {
// senda síðuna á URL sem gefið er
document.location.href = newURL;
}
}
}
function resetMenu() {
// núllstillir valið þegar komið er á þessa síðu
document.gomenu.selector.selectedIndex = 2;
}
Þessi föll framkvæma þrjár mismunandi aðgerðir. Ef gildið sem sent er á function goPage er tómt (newURL=""), þá er ekkert gert. Þetta gerist þegar notandinn valdi þá síðu sem er opin. Annar möguleiki er að gildið sé „-“ en þá hefur notandinn valið skiptilínuna í valmyndinni, og í því tilfelli er kallað á annað fall, , resetMenu() sem núllstillir valmyndina og setur hana í upprunalegt stand (í þessu tilfelli er þriðja atriði í valmyndinni valið -- JavaScript byrjar að telja á 0). Þriðji möguleikinn er þegar eitthvað gerist, þ.e. notandinn fær að sjá þá síðu sem hann valdi.
Við skulum byrja á skjalinu inngang.html, sem er núþegar með JavaScript kóða, þannig að við getum bara afritað föllin tvö og límt þau á undan lokaskipuninni fyrir JavaScript.
<H5>Eldfjallavefurinn / <A HREF="index1.html">Heimasíða</A> / <A HREF="hugt.html">áfram</A></H5>og settu þetta í staðinn:
<form name="gomenu"> <H5>Eldfjallavefurinn / <select onChange="goPage(this.options[this.selectedIndex].value)" name="selector"> <option value = "index1.html">Eldfjallavefurinn</option> <option value = "-"> --------------</option> <option value = "" selected>Inngangur</option> <option value = "hugt.html">Hugtök í eldfjallafræði</option> <option value = "usa.html">Eldvirkni í Bandaríkjunum</option> <option value = "mars.html">Eldvirkni á Mars</option> <option value = "ranns.html">Rannsóknarverkefni</option> </select> <noscript> <A HREF="index.html">Upphafssíða</A> / <A HREF="hugt.html">Næsta</A> </noscript> </H5> </form>
Við settum inn form sem heitir „gomenu“ og inniheldur fellivalmynd sem kallast „selector“. Kallað er á JavaScript atburðinn onChange hvenær sem vali er breytt á valmyndinni og hann kallar í fallið goPage og sendir til þess gildið sem er í value hluta þeirrar línu í valmyndinni sem valin var.
Línan í valmyndinni sem á við þessa síðu („inngangur“) er valin með orðinu selected í skipuninni option í hvert sinn sem síðan opnast. Athugaðu líka að gildið fyrir þessa línu er tómt eða "", sem þýðir að ef þesi lína er valin, þá veit JavaScrip að það á ekki að gera neitt.. Að lokum höfum við sett bandstrikalínu undir fyrsta valmöguleikann til að skilja hann frá hinum. Ef þessi lína er valin, þá kallar JavaScript fallið á annað fall sem kallast resetMenu sem einfaldlega núllstillir fallið og setur á það upphafleg gildi (af því við viljum ekki að neitt gerist ef skiptilínan er valin).
HTML kóðinn sem við settum á milli <noscript>...<.noscript> skipananna sýna upprunalegu stýristikuna ef vefskoðarinn getur ekki framkvæmt JavaScript.
Nú ætlum við að setja inn eitt smáatriði í viðbót svo valmyndin verði fullvirk. Þessi smá kóðabútur gerir það að verkum að valmyndin núllstillist ef notandinn notar valmyndina til að hoppa á aðra síðu og síðan bakk hnappinn í vefskoðaranum til að hoppa til baka. Ef þetta væri ekki, þá myndi síðan opnast með síðasta valda atriði í valmyndinni.
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666 onLoad="resetMenu()">
Kallað er á JavaScript atburðinn onLoad í hvert sinn sem vefsíðan er lesin inn í vefskoðarann og kallar á núllstillingu á valmyndinni um leið og Inngangssíðan opnast.
Til að þessi valmyndarstýring virki almennilega, þá þarft þú að breyta stýristikunni í öðrum skjölum í Eldfjallavefnum á svipaðan hátt með því að afrita kóðann úr þrepum 1, 2 og 3 fyrir ofan. Það eru nokkrar smávægilega breytingar sem þú þarft að gera í leiðinni, og þær eru allar listaðar í þessari töflu:
| Lagfæringar á JavaScript valmyndum | |
|---|---|
| Hugtök
í eldfjallafræði hugt.html |
|
| |
| Eldvirkni í
Bandaríkjunum usa.html |
|
| |
| Eldvirkni á
Mars mars.html |
|
| |
| Rannsóknarverkefni (stýriskjalið úr rammasettinu) ranns_nav.html |
|
| |
Þetta var heilmikil vinna!
Ef allt fór eins og til var ætlast, þá ættu aðalsíðurnar í vefnum að vera samtengdar með stýritóli sem gerir notanda kleyft að stökkva beint á hvaða síðu sem er í vefnum án þess að þurfa að stökkva í gegnum röð af öðrum síðum fyrst.
Nú ætlum við að setja saman dálítið af því sem við höfum þegar gert til að búa til valmynd sem kallar á síðu úr öðru vefsetri. Við ætlum að nýta okkur mjög vel uppsett síðutré í vefsetrinu Views of the Solar System þar sem hægt er að finna allar upplýsingar um sólkerfið skrifað á þrem tungumálum. Með því að skoða vefslóðir á þessu setri, þá sjáum við að þær eru allar með sama mótinu::
þar sem tungumál er:
og pláneta er einfaldlega nafnið á viðkomandi plánetu á ensku (t.d. „mars“, „jupiter“)
Fyrst við vitum þetta, þá getum við búið til vefform þar sem notandinn velur plánetu af fellivalmynd og tungumál með valhnöppum og getur síðan séð efni af þessu setri. Úr þessu verður einfaldari og samþjappaðri stýring en ef við værum með stiklur á allar síðurnar.
function goPlanet () {
// Fall til að stikkla á mismunandi hluta
// vefsetursins Views of the Solar System
// ná í plánetuna sem valin var af valmynd
var planet = document.solar.planets[document.solar.planets.selectedIndex].value;
// athuga að valið hafi verið gild pláneta
if (planet == "") {
alert ('Gjörðu svo vel að velja plánetu!');
} else {
// sjá hvaða tungumál var valið
for (i=0; i<3; i++) {
if (document.solar.lang[i].checked) {
lang = document.solar.lang[i].value;
break;
}
}
// búa til vefslóðina fyrir síðuna sem sækja á
var url = 'http://solarviews.com/' + lang + '/' + planet + '.htm';
// opna síðuna í nýjum glugga
var planet_window = window.open( url , "planets", "toolbar,status,location,menubar,scrollbars,resizable,width=550,height=450");
// Ef við erum með Netscape, þá getum við sett gluggann fremst
if (navigator.appName.substring(0,8) == "Netscape") planet_window.focus();
}
}
<p>Berðu edfjöll og landslag á Mars við hinar pláneturnar<br>
<form name="solar">
<center>
<table border=0 cellpadding=10 cellspacing=2>
<tr>
<td valign=top><select name="planets">
<option value = "" selected>Veldu plánetu...</option>
<option value = "mercury">Merkúr</option>
<option value = "venus">Venus</option>
<option value = "earth">Jörðin</option>
<option value = "mars">Mars</option>
<option value = "jupiter">Júpiter</option>
<option value = "saturn">Satúrnus</option>
<option value = "uranus">Úranus</option>
<option value = "neptune">Neptúnus</option>
<option value = "pluto">Plútó</option>
</select>
</td>
<td valign=top>Sýna upplýsingarnar á :<br>
<input type="radio" name="lang" value="eng" checked>Ensku<br>
<input type="radio" name="lang" value="span">Spænsku<br>
<input type="radio" name="lang" value="portug">Portúgölsku
</td>
<td valign=bottom><input type="button" value="Sýna upplýsingar"
onClick="goPlanet()"></td>
</tr>
</table>
</center>
</form>
Við bjuggum til vefform sem inniheldur felliglugga með nöfnum plánetanna og valhnappa til að velja tungumálið sem nota skal. JavaScript fallið tekur bara formhlutana eins og þeir eru og býr til úr þeim rétt URL á vefsetrið og opnar það síðan. Þar að auki opnar það síðuna í nýjum glugga eins og við lærðum í lexíu 27c.
Berðu þínar vefsíður saman við þetta dæmi um hvernig þær ættu að líta út. Ef þínar síður eru ekki eins og dæmið, eða stiklurnar virka ekki rétt, skoðaðu textann sem þú ritaðir í textaritlinum. Í þessari lexíu höfum við afritað og límt ósköpin öll af JavaScript og það er mjög auðvelt að gera innsláttarvillur í þessu ferli.
Upprifjunarefni fyrir žessa lexķu:
Prófaðu að breyta stýristikunni á þínum vef í JavaScript valmynd.
Það sem hér hefur verið sagt er bara örlítið dæmi um hvað hægt er að gera með JavaScript. Það eru til ótal vefsetur þar sem hægt er að afrita ókeypis JavaScript og nota þau að vild, og maður þarf ekki einu sinni að vita hvernig þau virka (þó það hjálpi nú auðvitað!). Heimsæktu einhverjar af þessum síðum og reyndu að finna kóða sem þú getur notað á þínum síðum:
Þar að auki höfum við sjálfir búið til okkar eigin námskeið/tól sem við köllum jClicker, sem er forsnið (e. template) sem sýnir hversu auðvelt er að búa til myndasýningu með JavaScript.
Setjum hljóð, kvikmyndir og hreyfimyndir á vefsíður.
Nįmsefnisgerš ķ HTML:
Lexķa 28c: Form virkni meš JavaScript
©1994 - 2000 Maricopa Center
for Learning and Instruction (MCLI)
Maricopa Community Colleges
Tengilišur MCLI er Alan Levine
Sendu athugasemdir til alan.levine@domail.maricopa.edu
eša gaui@mmedia.is
URL: http://www.vma.is/tut/tut28c.html
Žżtt meš leyfi höfundar