Viltu nú fara
að opna aðra vefskoðaraglugga?
JavaScript býr til glugga...
Þar sem maður vill þá, eins stóra og maður
vill hafa þá og með þeim hnöppum sem maður vill...
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.
Í lexíu 25, lærðum við að nota TARGET eigindið með stiklu þannig að músarsmellur setti nýja síðu í annan glugga. Þú hefur líklegast tekið eftir að þessi nýi gluggi opnast með sömu vefskoðarauppsetningum og hnöppum og fyrri glugginn og er venjulega af sömu stærð og hann.
Með JavaScript getum við skrifað kóða sem býr til glugga af tiltekinni stærð og við getum beðið hann um að sýna ekki URL-línuna eða stýrihnappana. Að auki, ef vefskoðari er með útgáfunúmer 4.0 eða nýrra, þá getum við jafnvel sagt til um hvar á skjánum glugginn á að vera.
Af hverju viljum við gera þetta? Ef við ætlum, til dæmis, að opna mynd í nýjum verfskoðaraglugga, þá er í raun engin þörf fyrir línur og hnappastikur, sem taka bara dýrmætt pláss á skjánum. Að auki getum við þannig opnað litla vefskoðaraglugga sem geta virkað eins og tólaspjöld í öðrum tölvuforritum.
Skoðaðu þessa mynd af gíg í Mexíkó sem opnast í löngum lágum glugga eða þessa af eldfjalli í Arizona sem opnast í glugga sem passar utanum myndina. Prófaðu að lokum að skoða bleiku JavaScript flöskuna okkar í litlum glugga með vefskoðarahnappa.
Aðferðin til að skrifa svona JavaScript kóða er svona:
<A HREF="URL"
onClick="window.open('URL', 'nafn_glugga', 'gluggakostir'); return false">
stiklutexti</a>
þar sem URL er vefslóð að myndinni sem við viljum sýna í glugganum. Eins og við sáum í lexíu 27a, þá notum við sama URL í setjum við stiklu í href hluta skjalsins og setjum nafngreint akkeri innan skjalsins í staðinn fyrir URL-ið. Við verðum að gera þetta því að vefskoðarinn vill hoppa á einhvern stað; með þessari aðferð höldum við okkur á sömu síðu. Venjulega myndum við setja akkerið rétt fyrir ofan HTML textann sem inniheldur þetta JavaScript því að vefskoðarinn rennir síðunni til, þangað sem „gerfi-akkerið“ er.
JavaScript atburðurinn onClick byrjar ferlið með skipun sem kallast window.open()sem talar við vefskoðarann og segir honum að opna nýjan glugga. Glugginn inniheldur efnið sem tilgreint er í URL-inu í fyrstu breytunni, sem í dæminu fyrir ofan var myndarskrá, en gæti þess vegna verið HTML skrá eða slóð á aðra síðu. Önnur breytan er „nafn“ fyrir þennan glugga ef við skildum nota hann aftur til að opna stiklu (sjá lexíu 25).
Í þriðju breytunni listum við alla valkosti sem segja til um hvernig gluggin á að líta út. Þessi atriði verða öll að vera í einum óbrotnum streng innan tilvitnanamerkja:
Fyrstu sjö kostina má setja á eða taka af með KOSTUR=yes eða KOSTUR=no eftir því hvort við viljum hafa þá á nýja glugganum eða ekki. Kostirnir eru aðskildir með kommum, svona:
Ég setti stiklu á mynd af mér <A HREF="#a" onClick="window.open('myndinmin.gif', 'myndAfMer', 'toolbar=no,directories=no,location=no,status=yes,menubar=no,resizable=no,scrollbars=no,width=300,height=200')">sem þú getur skoðað</a> ef þú vilt.
en þetta opnar myndina myndinmin.gif í glugga með nafnið „myndAfMer“ með enga vefskoðarahnappa og er af nokkuð fastri stærð þar sem ekki er hægt að breyta stærð gluggans eða skruna í honum.
Á hinn bóginn gætum við sett stiklu á URL í nýjum glugga:
Hvernig væri að prófa besta <A HREF="#a" onClick="window.open('http://www.vma.is/tut/', 'gugginnMinn', 'toolbar=yes,directories=no,location=no,status=yes,menubar=no,resizable=yes,scrollbars=yes,width=500,height=400')">vefgerðarnámskeið í heiminum</a> algerlega frítt!
Með þessum kóða opnast aðal vefskoðarahnapparnir (en ekki skráarhnapparnir) og URL-línan sést líka. Glugginn sem opnast er 500 pixel á breidd og 400 pixel á hæð og við getum stækkað hann eða minnkað að vild og skrunrendurnar sjást.
Það má stytta þennan lista með því að setja í hann bara þá kosti sem við viljum hafa á; vefskoðarinn gerir ráð fyrir að þeir sem ekki eru nefndir eigi að vera „af“. Hér er til dæmis önnur aðferð til að rita dæmin tvö að ofan:
Ég setti stiklu á mynd af mér <A HREF="#a" onClick="window.open('myndinmin.gif', 'myndAfMer', 'status,width=300,height=200')">sem þú getur skoðað</a> ef þú vilt.Hvernig væri að prófa besta <A HREF="#a" onClick="window.open('http://www.vma.is/tut/', 'gugginnMinn', 'toolbar,status,resizable,scrollbars,width=500,height=400')">vefgerðarnámskeið í heiminum</a> algerlega frítt!
Í útgáfum 4.0 (og nýrri) í NetScape og Internet Explorer vefskoðurum getum við líka sagt þeim með JavaScript hvar á skjánum glugginn á að opnast. Þau mál eru gefin í pixelum mælt lárétt og lóðrétt frá efra horni skjásins vinstra megin. Eldri vefskoðarar hunsa þessar skipanir.
Því miður nota NetScape og Internet Explorer ekki sömu skipanirnar. Þess vegna verðum við að setja þær tvisvar:
Ef við bætum þessu við fyrra dæmi, þá segir þessi kóði vefskoðurum með útgáfunúmer 4.0 að setja gluggann 100 pixel til hliðar og75 pixel niður á skjáinn:
Ég setti stiklu á mynd af mér <A HREF="#a" onClick="window.open('myndinmin.gif', 'myndAfMer', 'toolbar=no,directories=no,location=no,status=yes,menubar=no,resizable=no,scrollbars=no,width=300,
height=200screenX=100,screenY=75,left=100,top=75')">sem þú getur skoðað</a> ef þú vilt.
Við förum bráðum í Eldfjallavefinn okkar og setjum þar inn gluggaopnara. Við höfum hingað til skrifað JavaScript skipanir sem tengdar eru stiklutextum eða grafnar í síðunni til að rita breytilegan texta. Þegar verkefnið er að opna glugga til að sýna röð mynda, þá liggur beint við að skrifa almennan JavaScript kóða sem getur framkvæmt verkið og síðan þurfum við bara að segja kóðanum hvaða mynd á að opna. Þetta er tilgangurinn mewð svokölluðu JavaScript falli (e. function), skipanakóða sem við getum notað aftur og aftur við mörg svipuð verkefni.
Venjulegasti staðurinn fyrir JavaScrip fall er að setja það það í þann hluta síðunnar sem ekki sést, það er á milli <HEAD>...</HEAD> skipananna. Þannig getum við hlaðið upp heilabúið í JavaScript í vefskoðarann og síðan notað það þegar þörf er á í skjalinu..
Á Eldfjallavefnum ætlum við að laga síðuna sem segir frá Eldvirkni í Bandaríkjunum. Við erum með stiklu af lítilli mynd af jarðskjálftamæli sem sækir stærri útgáfu þessarar myndar í sér glugga (með TARGET eigindinu fyrir stikluskipunina). Við ætlum að setja nokkrar stiklur í þetta skjal sem sýna myndir af öðrum eldfjöllum og við ætlum að nota JavaScrit til að hlaða þessum myndum í nýjan glugga.
En frekar en bara opna mynd í glugga, þá viljum við segja JavaScriptinu „Hérna er myndarskráin, titill og myndartexti; opnaðu nú nýjan vefskoðaraglugga með þessari mynd og ritaðu myndartextann fyrir neðan hana.“ Svo við notum JavaScript til að opna nýjan glugga og ritum síðan breytilegan texta í þann glugga úr forsniði. Við viljum að þessi aðgerð sé fall, svo við getum notað hana fyrir fjórar mismunandi myndir.
<head> <title>Eldvirkni í Bandaríkjunum</title>og
</head>setur þú þetta JavaScript fall:
<SCRIPT LANGUAGE="JavaScript">
<!-- fela þessa skrift fyrir gömlum skoðurum
// Þetta skrift opnar nýjan vefskoðaraglugga og ritar
// HTML sem sýnir mynd með titli og myndartexta
function show_photo( pFileName, pTitle, pCaption) {
// skilgreina gluggauppsetninguna
photoWin = window.open( "", "photo", "width=600,height=450,status,scrollbars,resizable,screenX=20,screenY=40,left=20,top=40");
// rita innihald í gluggann
photoWin.document.write('<html><head><title>' + pTitle + '</title></head>');
photoWin.document.write('<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>');
photoWin.document.write('<center>');
photoWin.document.write('<font size=+3 face="arial,helvetica"><b>' + pCaption + '</b></font><br>');
photoWin.document.write('<img src="' + pFileName + '"><p>');
photoWin.document.write('<font face="arial,helvetica">');
photoWin.document.write( '"' + pTitle + '" mynd © Gosi Hraundal<br>');
photoWin.document.write('<A HREF="mailto:gosi@vma.is">gosi@vma.is</A><br>');
photoWin.document.write('Jarðfræðideldin, <A HREF="http://www.vma.is/">Menntaskólanum á Ísafirði</A>');
photoWin.document.write('<p></font></body></html>');
photoWin.document.close();
// Ef við erum með Netscape, þá má setja gluggann fremst
if (navigator.appName.substring(0,8) == "Netscape") photoWin.focus();
}
// hætt að fela sig fyrir gömlum skoðurum -->
</SCRIPT>
Fallið okkar heitir show_photo; þegar við notum það á síðunum okkar, þá sendum við þrenns konar upplýsingar till fallsins, svokallaðar breytur (e. variables), pFileName (URL-ið eða slóðin að myndinni), pTitle (textastrengur sem verður titill gluggans sem JavaScrip opnar) og pCaption (stuttan myndartexta sem settur er fyrir neðan myndina). Þessar upplýsingar geta verið mismunandi í hvert sinn sem við notum fallið, en eru í því bara sem breytunöfn.
Við getum notað window.open fallið til að opna glugga sem er 600 pixel á breidd og 400 á hæð; athugaðu að ólíkt fyrri tilraunum okkar, þá er fyrsti stikinn í fallinu, slóðin fyrir gluggann, tómur. Það er vegna þessa að síðan sem á að fylla hann er ekki til. Við ætlum í raun að nota document.write fallið í línunum á eftir til að rita innihald gluggans. Með því að nota uppsetninguna photoWin.document.write, þá erum við að segja vefskoðaranum að rita innihaldið eftir forsniðinu sem gefið er. Athugaðu að nálægt enda fallsins þá látum við vefskoðarann vita að við séum búin með kóðanum photoWin.document.close();
Síðasta línan er smá skipun sem lætur Netscape vefskoðara færa nýja gluggann fremst á sjáinn, fram fyrir alla aðra vefskoðaraglugga (Þessi skipun er ekki enn til fyrir Internet Explorer vefskoðara).
Eins og nú er komið, þá erum við bara búin að setja upp möguleikann á gluggaopnaranum. Nú ætlum við að búa til kóða sem „kallar á“ fallið::
<a href="../myndir/seismo.jpg" target="photo">og setja þenna nýja kóða í staðinn:
<a href="#fotos"
onClick="show_photo('../myndir/seismo.jpg', 'Jarðskjálftamælir',
'Eldfjallasvæðið í Long Valley, Kaliforníu')"
onMouseOver="window.status='skoða stóra mynd af jarskjálftamæli';
return true">
ATHUGAÐU: Við notuðum onClick atburðinn til að kalla á JavaScript fallið okkar. Myndin sem setja skal í nýja gluggann er seismo.jpg, titillinn á gluggann er Jarðskjálftamælir, og myndartextinn sem sést fyrir ofan myndina er Eldfjallasvæðið í Long Valley, Kaliforníu. Ef fallið okkar virkar, þá býr það til nýjan vefskoðaraglugga sem inniheldur þessar upplýsingar á því formi sem skilgreint er í fallinu.
Við notuðum líka onMouseOver atburðinn til að sýna smá textabút í stöðulínunni þegar músarbendillinn er yfir stiklunni (sjá lexíu 27a)
<h2 align=center>Eldvirkni í Bandaríkjunum</h2>og setja í satðinn
<a name="fotos"><h2 align=center>Eldvirkni í Bandaríkjunum</h2></a>
Þegar smellt er annað hvort á frímerkið eða stiklutextann, þá ætti nýr gluggi að opnast og stærri myndin að sjást á svörtum bakgrunni með gulum texta (þú gætir þurft að renna niður myndina til að sjá myndartextann). Ef þetta virkar ekki, þá skaltu bera þinn kóða saman við þetta dæmi fyrir þennan hluta lexíunnar.
Nú munum við sýna fram á hversu nytamleg JavaScript föll geta verið -- með því að nota sama kóðann til að búa til öðruvísi síður. Í fyrri útgáfum af skjalinu sem við höfum verið að vinna að, usa.html, þá opnaði stiklan undir Mount St Helens nýja vefsíðu, msh.html, sem hafði bara eina setningu og stiklu í mynd. Við ætlum ekki lengur að nota þessa seinni vefsíðu heldur breyta þeirri fyrri þannig að myndin opnist í nýjum glugga.
<td valign=top>Þann 18. maí, 1980, eftir langt hlé, sýndi þetta þögla fjall í Washingtonfylki mjög <a href="msh.html">nákvæmlega hvernig</a> öflugt sprengigos á sér stað. </td>þannig að hann sé:
<td valign=top>Þann 18. maí, 1980, eftir langt hlé, sýndi þetta
þögla fjall í Washingtonfylki mjög nákvæmlega hvernig
öflugt sprengigos á sér stað. Risastórar furur í hlíðum þessa
tignarlega fjalls <a href="#fotos"
onClick="show_photo('../myndir/msh.gif', 'Tré tróðust undir', 'Sprengisvæðið við Mount St. Helens')"
onMouseOver="window.status='skoða mynd sem sýnir kraft sprengingarinnar'; return true">tróðust
niður eins og tannstönglar.</a>.
</td>
ATHUGAÐU: Við erum að nota sama javaScript fallið og við skrifuðum fyrir stikluna að jarðskjálftamælamyndirnar, en núna sýnir það aðra mynd og annan texta fyrir Mount St. Helens myndina.
En við skulum ekki stoppa hér! Við skulum bæta tveim lýsingum í viðbót við skjalið og nota JavaScript fallið til að sýna tvær nýjar eldfjallamyndir.
<tr>
<td><font size=+1><B>San Francisco Peaks</B></font></td>
<td colspan=2><font size=+1><B>MacDougal gígur</B></font></td>
</tr>
<tr>
<td valign=top>Vísindamenn álíta að eldgosið sem varð fyrir nokkrum
milljónum ára og mótaði <a href="#fotos"
onClick="show_photo('../myndir/agassiz.jpg', 'Mount Agassiz', 'San Francisco Peaks, Arizona'); return true">
þetta fjall í norðanverðu Arizona</a> hafi verið svipað því sem varð
í fjallinu Mount St. Helens.
</td>
<td valign=top colspan=2>
Þegar heitur hraunstraumur kemst í snertingu við grunnvatn, þá geta
svona sprengigos búið til <a href="#fotos"
onClick="show_photo('../myndir/macdougal.jpg', 'MacDougal gígur', 'Pincate eldfjallasvæðið, Mexico');
return true">djúpa gíga</a> eins og hægt er að sjá á suður af Arizona
á Pincate eldfjallasvæðinu í Mexico.
</td>
</tr>
Hér fyrir neðan eru nefndir nokkrir staðir í Bandaríkjunum sem eru taldir „virk“ eldfjöll..(settur „nokkrir“ í staðinn fyrir „þeir tveir“)
Ef allt er eins og það á að vera, þá ertu nú með fjórar mismunandi stiklur sem vísa á sama JavaScript fallið til að búa til mismunandi innihald!
Berðu þínar vefsíður saman við þetta dæmi um hvernig þær ættu að sjást. Ef þínar síður eru ekki eins og dæmið eða stiklutextarnir virka ekki rétt, þá skaltu endurskoða textann sem þú ritaðir í textaritlinum. Athugaðu að JavaScrip er mjög næmt fyrir innsláttarvillum -- ein gæsalöpp eða semikomma sem vantar skemmir alla síðuna! Athugaðu líka að þú hafir ekki nein auka LÍNUSKIPTI í JavaScript kóðanum.
Upprifjunarefni fyrir þessa lexíu:
Notaðu gluggaopnarann á þínum vefsíðum. Athugaðu hvort þú getur endurbætt uppsetninguna á HTML kóðanum sem skrifar efni í gluggann.
Hvaða gagn væri í að opna lítinn glugga á vefnum þínum? Væri hægt að nota hann sem stýriglugga?
Það er síðasti JavaScript skammturinn... Skipta um myndir þegar notandinn gerir eitthvað...
Námsefnisgerð í HTML:
Lexía 27c: Dálítið af JavaScript : Gluggaopnarar
©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/tut27c.html
Þýtt með leyfi höfundar