 |
| Hérna er fastur HTML texti á síðuna: 27b. JavaScript- Kviklegt inninhald! Flott, ha? |
Nú skulum
við stækka skammtinn...
skrifa kviklegt innihald á síðu...
mismunandi boð við mismunandi aðstæður...
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.
Við höfum sagt þér áður að um leið og vefskoðarinn sækir HTML skjal, þá þýðir hann það á meðan hann les inn meiri upplýsingar. Þetta þýðir að um leið og vefskoðarinn er kominn með nægar upplýsingar, þá sýnir hann það sem hann getur á meðan hann sækir restina af skjalinu. .
Þegar við tölum um kviklegt innihald (e. dynamic content) sem hægt er að skrifa með JavaScript, þá þýðir það að vefskoðarinn getur gert meira en bara „lesa og sýna“ ... þegar hann les JavaScript kóða í HTML kóðanum, þá getur hann tekið ákvarðanir byggðar á því hvernig kóðinn er upp settur, prófað hann miðað við ákveðnar gefnar forsendur og síðan skrifað nýjan HTML kóða eftir því hvaða niðurstaða kom út. Það má jafnvel forrita vefskoðarann til að gera eitthvað mismunadi og af handahófi í hvert sinn sem síðan er sótt.
Þetta gerir vefsíðuna þína örlítið „vitra“ en ekki bara fallega!
Við getum notað JavaScript til að skrifa hvers konar HTML kóða á þennan hátt:
document.write('xxxxxxxx xxxxxxxxxx');
document.write('xxxx xxxxxxx xxxxxxx xxxxx');
document.write('xx xx xxxxxxxxxxxx xx');
Hver lína af kóða skrifar smá bút af HTML, þar er að segja, allt sem er innan einföldu gæsalappanna. Þessi röð JavaScrip setninga:
document.write('<h1>Heimur ostanna</h1>')
document.write('<b><i>Það er til fólk í þessum heimi sem er ekki');
document.write('eins mikið fyrir ost og ég!<i></b><br> -- Kolfinnur Jakobsson (1903)');
gerir nákvæmlega sama gagn og þessi HTML kóðabútur:
<h1>Heimur ostanna</h1> <b><i>Það er til fólk í þessum heimi sem er ekki eins mikið fyrir ost og ég!<i></b><br> -- Kolfinnur Jakobsson (1903)
Ef þetta væri það eina sem hægt væri að fá út úr JavaScript, þá værum við ekki að reyna að kenna þér þetta! JavaScript gefur annars konar upplýsingar sem hægt er að sýna, en er ekki mögulegt með HTML. Það eru innbyggð föll sem gefa upp dagsetningu og tíma, upplýsingar um vefskoðara notandans, og ýmislegt annað eins og við sjáum á eftir. En þar að auki getum við sett upp rökrænar forsendur sem prófa, þannig að við getum gert eitthvað á borð við þetta:
Ef það er þriðjudagur eða miðvikudagur í dag og klukkan er meira en 12:00 á hádegi, þá á að sýna þessa sérstöku kveðju, en ef klukkan er ekki enn orðin 12:00, þá á að sýna aðra kveðju. En ef það er föstudagur, fyrir eða eftir hádegi, er hvað sem er, þá á að sýna enn eina kveðju, sama hvað klukkan er. Á öðrum dögum og tímum á bara að sýna þessa „Hafðu það gott!“ kveðju.
JavaScript kóði gerir okkur kleyft að búa til kviklegt innihald sem getur verið mismunandi eftir vefskoðurum.
Það fyrsta sem við ætlum að gera er að skrifa JavaScript setningar sem búa til fótinn á allar síðurnar okkar -- en þó ekki eins og þá sem við höfum skrifað í höndunum hingað til, sama röð af HTML/JavaScript skipunum og kóða verður afrituð og límd inn í hvert skjali en prentar þá kviklega (með dæmum af þessari síðu í svigum):
Það geta ekki allir vefþjónar sýnt nákvæmlega dagsetningar þegar skjöl voru síðust vistuð, atriði (c), og oftast, þegar þú ert að prófa skjal á tölvunni þinni, þá sýnir vefskoðarinn ekki dagsetninguna, eða hann sýnir vitlausa dagsetningu eins og janúar 1900. Við sýnum þér hvernig þú getur prófað þessi skilyrði. Atriði (d) er mjög nytsamlegt vegna þess að ef við færum síðurnar okkar á milli vefþjóna, þá uppfærist slóðinn sjálfkrafa um leið.
Forsniðið að „staðalfætinum“ okkar á Eldgfjallavefnum á að innihalda kóðann sem er hér fyrir neðan. Við kynnum hann hluta fyrir hluta með smá skýringum. Það er ekki alveg nauðsynlegt að þú skiljir nákvæmlega hvernig hann virkar, vegna þess að þegar þú setur hann á síðurnar, þá gerir þú það bara með því að afrita og líma.
| JavaScript Fótur | |
|---|---|
| HTML kóði | skýring |
<!-- byrjun á fæti fyrir Eldfjallavefinn --> <SCRIPT LANGUAGE="JavaScript"> <!-- fela forskrift fyrir eldri vefskoðurum |
Þetta merkir byrjun á fætinum og setur upp rétta JavaScript skipun |
document.write('<p><hr>
<FONT FACE="helvetica,arial" size=-1>
<i>Eldfjallavefurinn: </i><B>');
|
Strik og texti settur í rétta stærð, titillína síðunnar byrjar |
document.write(document.title + '</B><BR>'); |
Hér kemur titill síðunna |
document.write('höfundur Gosi Hraundal, ');
document.write('<A HREF="mailto:gosi@vma.is?subject='
+ document.title + '">');
document.write('gosi@vma.is</A><br>');
|
Höfundarupplýsingar og tölvupóststikla sem setur síðutitilinn sjálfkrafa sem efnislínu. |
document.write('Jarðfræðideildin,
<A HREF="http://www.vma.is/">');
document.write('Menntaskólanum á Ísafirði</A><p>');</tt></font>
|
Frekari fastar upplýsingar. |
// Setja dagsetningu síðustu uppfærslu ef
// vefþjónninn heimilar það
if (Date.parse(document.lastModified) > 0) {
//----- íslensk dagsetning ----
lastMod = new Date(document.lastModified);
// date returns month-1, so add 1
lastMod.thisMonth = lastMod.getMonth() + 1;
var TheYear = lastMod.getYear()
if (TheYear >= 100 && TheYear <= 1999)
{TheYear=TheYear + 1900}
else
{TheYear=TheYear}
document.write('Þessi síða var síðast uppfærð ');
document.write(lastMod.getDate() + '/');
document.write(lastMod.thisMonth + '/');
document.write(TheYear + ' klukkan ');
document.write(lastMod.getHours() + ':');
document.write(lastMod.getMinutes() + '
|
Þetta virðist flókið. Við settum inn skilyrði til að athuga hvort document.lastModified fær gildi (þ.e. ekki núll) úr falli sem kallast Date.parse, þá skrifum við dagsetninguna þegar skjalið var síðast vistað. Við athugum líka að ártalið sé rétt (2000, ekki 19100 eða 100) og að dagsetningin sé á íslensku. Ef Date.parse fær ekki gildi, þá er þetta allt hunsað. |
document.write('<B>URL: </B>'
+ document.location.href + '</FONT><P>');
|
Slóð skjalsins (e. URL) er fengin með JavaScript breytunni document.location.href |
// hætt að fela fyrir eldri vefskoðurum --> |
Fóturinn búinn |
Mest af þessu kviklega innihaldi er fengið úr „eiginleikum“ JavaScript „hluta“, í þessu tilfelli document hlutnum. Hvert HTML skjal er með innbyggðar upplýsingar -- þ.e. titilinn, dagsetning síðustu uppfærslu, slóð, o.s.frv. Við getum notað document hlutinn til að ná í og síðan nota þessar upplýsingar.
Upplýsingar sem við skrifum á síðuna með document.write, það er fastir textastrengir (texti innan gæsalappa) og upplýsingar sem fengnar eru úr JavaScript breytum eins og document.title, eru sameinaðar með „+“ merkinu:
'Hérna er fastur <b>HTML</b> texti á síðuna:' + document.title + '! Flott, ha?'
„+“ merkið sameinar textann í lengri streng, þannig að ef við værum að nota þetta á þessa síðu þá sæjum við:
|
| Hérna er fastur HTML texti á síðuna: 27b. JavaScript- Kviklegt inninhald! Flott, ha? |
JavaScript fóturinn okkar setur líka „skilyrði“ („ef þetta, þá gerðu hitt“) um að hægt sé að sjá hvenær síðan var uppfærð. Það lítur svona út:
if ( skilyrði sem þarf að prófa ) {
JavaScript setning1;
JavaScript setning2;
:
:
JavaScript setningN;
}
sem þýðir að ef prófun á skilyrðinu innan fyrstu sviganna gefur gildið TRUE, þá eru setningarnar innan slaufusviganna „{“ og „}“ framkvæmdar. Ef prófunin gefur gildið FALSE, þá er þeim setningum slept. Með JavaScript er hægt að setja upp þó nokkuð flóknar skilyrðissetningar, en við ætlum að hafa þær einfaldar.
Svona myndi þessi JavaScript fótur líta út ef hann væri notaður í þessu skjali:
|
Nú ætlum við að setja þennan fót í skjölin í Eldfjallavefnum.
<hr>
<address><B>Eldfjallavefurinn</B> <br>
Höfundur Gosi Hraundal, <A HREF="mailto:gosi@vma.is">gosi@vma.is</A><br>
Jarðfræðideild, <A HREF="http://www.vma.is/">Verkmenntaskólans á Akureyri</A><p>
<TT>síðast uppfærð 1. apríl 1995</TT>
</address>
<p>
<tt>URL: http://www.vma.is/vefur/index.html</tt>
<!-- byrjun á fæti fyrir Eldfjallavefinn -->
<SCRIPT LANGUAGE="JavaScript">
<!-- fela forskrift fyrir eldri vefskoðurum
document.write('<p><hr><FONT FACE="helvetica,arial" size=-1><i>Eldfjallavefurinn: </i><B>');
document.write(document.title + '</B><BR>');
document.write('höfundur Gosi Hraundal, ');
document.write('<A HREF="mailto:gosi@vma.is?subject=' + document.title + '">');
document.write('gosi@vma.is</A><br>');
document.write('Jarðfræðideildin, <A HREF="http://www.vma.is/">');
document.write('Menntaskólanum á Ísafirði</A><p>');
// Setja dagsetningu síðustu uppfærslu ef
// vefþjónninn heimilar það
if (Date.parse(document.lastModified) > 0) {
//----- íslensk dagsetning ----
lastMod = new Date(document.lastModified);
// date returns month-1, so add 1
lastMod.thisMonth = lastMod.getMonth() + 1;
var TheYear = lastMod.getYear()
if (TheYear >= 100 && TheYear <= 1999)
{TheYear=TheYear + 1900}
else
{TheYear=TheYear}
document.write('Þessi síða var síðast uppfærð ');
document.write(lastMod.getDate() + '/');
document.write(lastMod.thisMonth + '/');
document.write(TheYear + ' klukkan ');
document.write(lastMod.getHours() + ':');
document.write(lastMod.getMinutes() + '<BR>');
//----- íslensk dagsetning ----
}
document.write('<B>URL: </B>' + document.location.href + '</FONT><P>');
// hætt að fela fyrir eldri vefskoðurum -->
</SCRIPT>
<!-- endir á staðalfæti fyrir Eldfjallavefinn -->
ATHUGAÐU: Það er mjög mikilvægt að allar JavaScript setningar séu í heilum línum frá document.write('... og aftur fyrir ');, Ef þú hefur línuskiptingu (e. RETURN) í kóðanum, þá virkar hann ekki. Gáðu líka að því að skilyðrissetningarnar tvær, if (...) { séu eins og upp er sett fyrir ofan.
JavaScript tekur stafsetningarvillur nær sér en HTML! Og það er auðvelt að gera villur vegna þess hvernig gæsalappirnar eru notaðar.
Við höfum ekki enn uppfært fótinn í þeim hluta rannsóknaverkefnisins sem við skiptum upp í ramma í lexíu 26. Þú gætir haldið að allt sem við þyrftum að gera væri að líma hann í rammann á síðunni þatr sem fóturinn á að koma, ranns_footer.html. En vandinn hér er að JavaScript skipunin document.location.href sýnir þá ekki URL-ið fyrir rammasíðuna, „...ranns.html“ heldur fyrir skjalið sem fóturinn er í. Sumir vefskoðarar setja líka skjalnafnið frekar en síðutitilinn með document.title í vefsíðu í ramma. Við myndum fá eitthvað sem líkist þessu:
|
Við gætum komist framhjá þessu með því að fara aftur til baka í að hafa venjulegan HTML fót ... eða með því að nota hugvitsamlega (og flóknari) JavaScript. Við ætlum að fara síðari leiðina og láta JavaScript „finna“ upplýsingarnar sem við viljum láta koma fram í document hlutunum.
<!-- byrjun á fæti fyrir Eldfjallavefinn -->
<SCRIPT LANGUAGE="JavaScript">
<!-- fela forskrift fyrir eldri vefskoðurum
document.write('<p><hr><FONT FACE="helvetica,arial" size=-1><i>Eldfjallavefurinn: </i><B>');
document.write(document.title + '</B><BR>');
document.write('höfundur Gosi Hraundal, ');
document.write('<A HREF="mailto:gosi@vma.is?subject=' + document.title + '">');
document.write('gosi@vma.is</A><br>');
document.write('Jarðfræðideildin, <A HREF="http://www.vma.is/">');
document.write('Menntaskólanum á Ísafirði</A><p>');
// Setja dagsetningu síðustu uppfærslu ef
// vefþjónninn heimilar það
if (Date.parse(document.lastModified) > 0) {
//----- íslensk dagsetning ----
lastMod = new Date(document.lastModified);
// date returns month-1, so add 1
lastMod.thisMonth = lastMod.getMonth() + 1;
var TheYear = lastMod.getYear()
if (TheYear >= 100 && TheYear <= 1999)
{TheYear=TheYear + 1900}
else
{TheYear=TheYear}
document.write('Þessi síða var síðast uppfærð ');
document.write(lastMod.getDate() + '/');
document.write(lastMod.thisMonth + '/');
document.write(TheYear + ' klukkan ');
document.write(lastMod.getHours() + ':');
document.write(lastMod.getMinutes() + '<BR>');
//----- íslensk dagsetning ----
}
// sækja rétt URL frá þessu skjalnafni, ef gefið er að þetta skjal
// er "ranns_footer.html" eða "ranns_footer.htm"
// og að rétt URL fyrir rammasettið er "ranns.html" eða "ranns.htm"
myURL = document.location.href;
// Sækja auknefni fyrir skjalnafnið (allt á eftir "_footer")
myExt = myURL.substring(myURL.indexOf("_footer") + 7, myURL.length)
// sækja þann hluta af URLinu sem nær upp að "ranns"
myUrl = myURL.substring(0,myURL.indexOf("_footer"))
// Setja réttan streng aman
document.write('<B>URL: </B>' + myUrl + myExt + '</FONT><P>');
// hætt að fela fyrir eldri vefskoðurum -->
</SCRIPT>
<!-- endir á staðalfæti fyrir Eldfjallavefinn -->
Í þessu dæmi notuðum við hátækni JavaScript til að taka hluta af streng og finna staðsetningu sérstaks stafs í streng. Því miður er ekki tóm til mikilla útskýringa á þessu hér; skoðaðu tilvísanasíðu okkar til að finna góðar leiðbeiningar og námskeið.
Nú ætlum við að sýna þér fleiri hluti sem hægt er að gera með JavaScript. Annað innbyggt atriði er möguleikinn á að nota tölvu gestsins til að fá dagsetningu og tíma (svo fremi að hún sé rétt stillt!). Við getum notað þetta til að „stimpla“ kveðju á heimasíðuna. Við gætum ritað „Velkominn á fætur!“, „Góðan daginn!“ eða „Gott kvöld!“ eða „Er ekki dálítið seint að vera vinna á tölvu núna?“ eftir því hvaða tímasetningu JavaScript finnur.
Það fyrsta sem þarf að gera er að búa til hlutinn Date í JavaScript:
var today = new Date();
Nú höfum við dálítið sem kallast today sem við getum sótt í til að fá upplýsingar um dagsetningu og tíma. JavaScript geymir þessar upplýsingar sem fjölda sekúndna frá tilvísunardegi eins og 1. janúar 1900. En JavaScript Date hluturinn er með eigindi sem gera okkur kleyft að finna mánuð, dag, ár, klukkutíma, mínútu, sekúndu, o.s.frv.
Eitt auðveldasta hlutareigindið til að nota er Date.toLocaleString() sem sýnir dagsetninguna eftir því hvernig tölva notandans er sett upp (sem er mismunandi eftir löndum). Við gætum þess vegna skrifað kóðann svona:
var today = new Date();
document.write('JavaScript úrið mitt segir að það sé ' + today.toLocaleString() )'
og þetta myndi sjást svona:
|
Ef þú endurnýjar þessa lexíusíðu, þá sérðu að tíminn breytist. Athugaðu að formið á dagsetningunni fer eftir tölvunni sem þú notar.
JavaScript býður upp á upplýsingar um vefskoðarann sem notandinn er að nota með navigator hlutnum, og því getum við gáð hvaða vefskoðari þetta er (NetScape, Internet Explorer, o.s.frv.) og hvaða útgáfa af honum. Þetta er nytsamlegt ef maður er að nota möguleika á vefnum sem krefst þess að sérstakur vefskoðari sé notaður -- það er hægt að nota JavaScript til að „prófa“ uppsetninguna og gefa upplýsingar sem eiga við viðkomandi vefskoðara eða útgáfu.
Við ætlum nú að nota JavaScript Date og Navigator hluti til að sýna sérstaka kveðju á heimasíðunni okkar. Við gerum smá viðvik til að JavaScript sýni vikudaginn („mánudag“, „þriðjudag“ o.s.frv.) og síðan ritum við smá skilaboð ef notandinn er með eldri gerð af vefskoðara. Við útskýrum stuttlega fyrir neðan hvað kóðinn er að gera, en ef þú vilt bara prófa hann, þá getur þú afritað hann og límt í vefskjalið og prófað hann þar.
Þetta námskeið sýnir þér hvernig þú getur notað Internetið til að afla upplýsinga um eldfjöll og síðan rita skýrslu um niðurstöður þínar. og
<br clear=left> <hr> <p align=center>setur þú þennan JavaScript kóða:
<p>
<SCRIPT LANGUAGE="JavaScript">
<!-- fela sig fyrir eldri vefskoðurum
// sækja hlutinn date
var today = new Date();
var days = new Array('sunnu','mánu','þriðju','miðviku','fimmtu','föstu','laugar');
// rita dagsetninguna
document.write('Velkomin(n) þennan ágæta <b>' + days[today.getDay()]);
document.write('dag</b>, eða nánar tiltekið <br>');
document.write('<font color="#FFFF33" size=+2><tt>');
//----- Íslensk dagsetning ----
var today = new Date();
// date gefur mánuð -1 svo við bætum við 1
today.thisMonth = today.getMonth() + 1;
var TheYear = today.getYear();
if (TheYear >= 100 && TheYear <= 1999)
{TheYear=TheYear + 1900}
else
{TheYear=TheYear}
document.write(today.getDate() + '/');
document.write(today.thisMonth + '/');
document.write(TheYear + ' klukkan ');
document.write(today.getHours() + ':');
if (today.getMinutes() < 10)
{document.write('0')}
document.write(today.getMinutes() + '</tt></font>');
//----- Íslensk dagsetning ----
// rita kveðju sem tiltekur vefskoðara
document.write('<p>Við vonum að þú skemmtir þér vel á vefnum með þína útgáfu af ');
document.write(navigator.appName + ' ' + parseFloat(navigator.appVersion));
// rita aðvörun til eldri vefskoðara
if ( parseInt( navigator.appVersion) < 3 ) {
document.write('<font color=#FFFF33> Hmmm.. þetta er ansi gömul útgáfa af ');
document.write(navigator.appName + '! Er ekki tími til kominn að sækja sér uppfærslu?</font>');
}
// hætta feluleik -->
</SCRIPT>
Í þessari forskrift bjuggum við fyrst til hlutinn Date og settum í hann breytu sem við kölluðum today. Við bjuggum síðan til „fylki“ eða lista sem við kölluðum days og inniheldur fyrri part nafna daganna (án -dagur).
Fylki eru nytsamar geymslur, því við getum vísað í þau svona:
days[2]
þar sem talan í hornklofunum segir til um það hvar í fylkið á að sækja upplýsingar sem okkur vantar. En passaðu þig! JavaScript byrjar að telja fylki á tölunni 0, svo að days[2] er í raun þriðja atriðið, eða „þriðju“dagur.
Kóðinn okkar skrifar kveðju og notar síðan fylkið til að setja rétt daganafn. Date aðgerðin today.getDay() gefur tölu frá 0 til 6 sem svara til viðkomandi vikudags. Þá getum við sameinað Date hlutinn og fylkið til að láta rita réttan dag.vikunnar.
Þar á eftir notum við innihaldið úr Date() ásamt ýmsum tilfæringum til að rita dagsetninguna með íslensku formi.
Næsta atriðið ritar nafnið á vefskoðaranum ("Netscape", "Internet Explorer") og útgáfunúmer, sem við fáum með aðgerðinni navigator.appVersion, sem gefur í raun lengra og meira lýsandi nafn. Með því að setja þessa aðgerð innan í aðra aðgerð sem heitir parseFloat, þá getum við tekið út eða „þáttað“ þann hluta strengsins sem gefur heila tölu (e. parse). Skoðaðu þetta vandlega:
Síðasta línan gefur okkur vel upp settan streng sem sýnir vefskoðarann og útgáfunúmerið. Kóðinn parseInt(navigator.appVersion) þáttar út þann hluta gagnanna sem er heil tala. Ef þú skoðar síðasta hluta kóðans, þá prófum við parseInt töluna og ritum aðvörun ef hún er lægri en 3. Til að prófa þetta, þá getur þú breytt tölunni 3 í tölu sem er hætti en útgáfunúmerið á vefskoðaranum þínum.
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, þá skaltu endurskoða textann sem þú ritaðir í textaritlinum. Athugaðu að JavaScript er mjög viðkvæmt fyrir ritvillum -- ein gæsalöpp á röngum stað eða vantar semikommu og síðan virkar ekki!
Upprifjunarefni fyrir þessa lexíu:
Afritaðu formið fyrir JavaScript fótinn í þínar síður og athugaðu hvort þú getur breytt honum þannig að hann passi við útlit síðanna þinna.
Geturðu upphugsað aðferð til að skrifa JavaScript kóða sem ritar mismunandi kveðju eftir hverjum klukkutíma dagsins? Ráð: Búðu til fylki sem inniheldur texta kveðjanna og notaðu svo Date.getHours() aðgerðina til að greina hvaða klukkutími er.
JavaScript læknirinn gefur þér næsta skammt af kóða... aðgerðir og kóða til að opna vefskoðaraglugga af tiltekinni stærð og útliti, þar sem við viljum fá hann og með eins mörgum eða fáum hnöppum og við viljum.
Námsefnisgerð í HTML:
Lexía 27b: Dálítið af JavaScript : Kviklegt innihald
©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/tut27b.html
Þýtt með leyfi höfundar