Námsefnisgerð í HTML | Um | SOS | Nemendur | Hól | Tilvísanir | Skipanir | Lexíur | fyrri |

29e. Smá bolli af Java

cup of coffee J A V A
Bara smá bolli, ég þarf að passa mig að drekka ekki of mikið koffín. Ó já, það örvar mig, en ég fæ líka óstöðvandi skjálfta ... á vefsíðuna mína? Auðvitað, af hverju ekki? Það eru allir að nota það..."

Markmið

Eftir þessa lexíu átt þú að kunna að:


Lexía

Þegar Sun Microsystems kynntu Java snemma á tíunda áratugnum, þá var mikið sagt um möguleika þess, of mikið eftir því sem sumir sögðu. Eins stuttlega og hægt er að orða það, þá er Java nýtt forritunarmál sem gerir manni kleyft að búa til forrit, eða „stef“ sem hægt er að nota á hvaða kerfi sem er, hvar sem er, ef það styður „Java verkvanginn“:

Með JavaTM tækni getur þú notað sama forritið á hvaða vél sem er --PC tölvu, Macintosh tölvu, net tölvu, eða jafnvel á nýjum tæknilausnum eins og Internet skjásíma.

Þannig að Java stef þarf ekki neinn auka hugbúnað til að virka. Þegar farið er fram á Java, þá eru allar starfseiningar þess sendar yfir netið til þess eða þangað sem beðið er um það og þá getur Java tæknihlutarnir sem taka við látið það virka.

Til að fræðast meira um Java skaltu skoða http://java.sun.com/

gerð margmiðlunar: java
hvað hún gerir vel: tól, gagnavinnsla, línurit og gröf, gagnvirk stýritæki, kviklegur texti, myndabreytingar.
atriði sem þarf að skoða einkunn umsögn
„þröskuldur“ eða erfiðleikar við að búa til þessa margmiðlun
lágur hár
----
Til að búa til þín eigin Java stef verður þú að hafa skilning á forritunarmálinu eða hafa aðgang að grafískum forritasmíðjum. Það eru hins vegar mörg söfn Java stefja þar sem hægt er að sækja þau og nota.
fjöldi notenda sem geta séð þessa margmiðlun
fáir margir
----
Flestir vefskoðaðar með útgáfunúmer 3.x eða nýrra geta notað Java, þó það virðist virka hægar og betur á Macintosh tölvum. Það getur verið löng bið og tómur hvítur ferningur á meðan veskoðarinn „sækir Java“.
bandvíddarnotkun
lág
----
Mjög mismunandi og fer eftir hvers konar gagnvirkni á að fara fram og hversu flókið ferli er verið að setja upp. Þegar Java stef er á síðu, þá þarf hún að sækja allt frá nokkrum til um 30 litlar skrár sem þurfa allar að komast á leiðarenda áður en síðan virkar.

Eins og nefnt var í lexíu 27, þrátt fyrir það hve nöfnin eru lík, þá er Javascript-- skriftunarmál fyrir vefskoðara algerlega frábrugði Java, sem er forritunarmál fyrir tölvur. JavaScript er í raun þýtt línu fyrir línu þegar vefskoðarinn les síðuna. Java stef eru skrifuð sem tölvukóði og síðan vistþýdd (e. compiled) og þannig breytt í keyrsluhæft forrit. Vistþýtt forrit getur verið öflugra, öruggara og hraðvirkara en skrift, en á móti er erfiðara að búa það til.

Því miður, fyrir utan nokkur vel þekkt not fyrir Java, þá er algengast að þú finnir að á vefnum séu Java stef notuð til að sýna rennitexta á borða, sem annað hvort rennur lóðrétt eða lárétt (sjá hugmyndir okkar um slíkt í lexíu 17 !), eða mjög algeng not við að láta mynd líta út eins og hún speglist í vatni.

Eins og við sáum í síðustu lexíu um Shockwave, þá eru Java skrár venjulega lokaðir svartir kassar sem við veltum ekki einu sinni fyrir okkur hvernig virka. Í sumum stefjum getum við breytt eða stjórnað virkni þeirra með upplýsingum sem við sendum stefjunum með HTML kóða.

Í þessari lexíu verður ekki talað um hvernig Java forrit eru búin til, heldur ætlum við að sýna þér hvernig þú getur notað stef sem til eru á síðunni þinni.

Einföld útlistun á HTML kóða fyrir Java stef er

  <APPLET CODE=MittStef.class WIDTH=XX HEIGHT=YY>
  </APPLET>
þar sem MittStef.class er skjalnafn á vistþýddri Java stefskrá, og WIDTH og HEIGHT eru mál stefsins í pixelum. Oft getur verið að þú setjir frekari upplýsingar á stefið með stikum (e. parameter):

  <APPLET CODE=MittStef.class WIDTH=XX HEIGHT=YY>
  <param name="stiki1" value=mitt1Gildi>
  <param name="stiki2" value=mitt2Gildi>
  </APPLET>

þar sem hver stiki hefur nafn sem stefið leitar að og eitthvert gildi sem getur verið textastrengur eða tala:


  <APPLET CODE=MittStef.class WIDTH=XX HEIGHT=YY>
  <param name="stiki1" value="Tilgangur lífsins er ostur;
  <param name="stiki2" value=129;
  </APPLET>

Að lokum getur þu sett in texta sem sést bara ef vefskoðarinn getur ekki notað Java (mundu að vefskoðarinn hunsar allt innan oddklofa sem hann ekki skilur), svipað og að setja ALT kost með <img ...> skipunum (lexía 7a) eða <NOFRAMES> skipun á rammasíðu (lexía 26).


  <APPLET CODE=MittStef.class WIDTH=XX HEIGHT=YY>
  <param name="stiki1" value=mitt1Gildi>
  <param name="stiki2" value=mitt2Gildi>
  Fyrirgefðu, en svo virðist sem vefskoðarinn þinn geti ekki
  sýnt þetta flotta Java stef.
  </APPLET>

Þannig sést að allur texti á milli <APPLET>...</APPLET> skipananna er hunsaður af vefskoðurum sem geta ekki spilað Java (þar sem þetta er hvorki stef skipun eða stikaskipun) og er það eina sem sést ef vefskoðarinn kann ekki á Java.

Java sett inn

Athugaðu: Ef þú ert ekki með skjölin úr síðustu lexíu, þá getur þú sótt þau núna.

Í þessari lexíu ætlum við að nota Java stef sem gerir okkur kleyft að senda því myndarskrá og á vefsíðunni okkar gerir notandanum fært að stækka og minnka myndina. Myndirnar sem við ætlum að nota eru af bergi úr eldfjöllum mynduðu með sérstakri smásjá sem sýnir okkur steindir og og uppbyggingu bergsins. Síðan getum við notað Java stefið á vefsíðunni eins og nokkurs konar smásjá.

Java stefið sem við notum hér er kallað „ImageZoom“ og þú getur fundið frekari upplýsingar um það á http://www.vivaorange.com/ImageZoom/. Þetta stef er ókeypis fyrir þá sem ekki taka peninga af síðunum sínum (við fundum það við að nota eina heimildina fyrir neðan).

Almenni HTML kóðinn fyrir þetta stef er:

<applet code="ImageZoom.class" width="[breidd]" height="[hæð]">
  <param name="IMAGE" value="[myndarskrá]">
  <param name="ZoomLevel" value="[stækkun]">
  <param name="PanSpeed" value="[hraði]">
  <param name="Cursor" value="[bendill]">
  <param name="PRefresh" value="[forhlað]">
</applet>

þar sem:

Stefsráin sjálf , ImageZoom.class er bara 5k að stærð og myndin sem það notar er lesið inn sem stiki ásamt hinum kostunum sem listaðir eru hér fyrir ofan. Athugaðu vefsíðu stefsins til að fá frekari upplýsingr um það.

  1. Fyrst skaltu búa til nýja möppu/undirskrá á vinnusvæðið þitt og kalla hana scope
  2. Farðu í Lexía 29e Myndvistunarmiðstöð til að sækja fjórar myndarskrár sem teknar voru steinasmásjá. Vistaðu þær í möppunni scope.
  3. Nú verður þú að ná í eintak af stefinu líka.

    1. Til að gera það þarftu að nota „leynivalmyndina“ með því annað hvort að smella með hægri músarhnappi (Windows, Unix) eða með því að smella og halda niðri músarhnappi (Macintosh) á þessa stiklu á Java Stefskrána (ImageZoom.class) þar til þú sérð sprettivalmyndina.
    2. Af sprettivalmyndinni sem kemur, velur þú Save this Link As... eða Save Target As...
    3. Þegar talgluggi kemur upp, vertu viss um að velja Source ef á honum er valmöguleiki merktur Format.
    4. Vistaðu skjalið með nafninu ImageZoom.class í möppunni scope


  4. Búðu til nýtt skjal í textaritlinum þínum, gefðu því nafnið javascope.html, og vistaðu það í möppuna scope

  5. Ritaðu eftirfarandi HTML kóða í þeta nýja skjal:
    <html>
    <head>
      <title>Java smásjá</title>
    </head>
    <body bgcolor="#000000" text="#EEEEEE">
    <center>
    <applet code="ImageZoom.class" width=400 height=265 vspace=14>
        <param name="IMAGE" value="pw_vis.jpg">
        <param name="ZoomLevel" value="6">
        <param name="PanSpeed" value="4">
        <param name="cursor" value="1">
        <param name="PRefresh" value="on">
    Fyrirgefðu, en svo virðist sem vefskoðarinn þinn geti ekki sýnt þetta Java stef :-(
    <p>Hérna er í það minnsta mynd úr smásjánni:<br>
    <img src="pw_vis.jpg" width=400 height=265><p>
    </applet>
    <font face="verdana,helvetica" size="2">
    <br>BISHOP GJÓSKA: Lauslega samanbrædd (Sýnilegt ljós)<br>
    smelltu á myndina til að stækka hana, færðu músina að brún til að færa hanan
    </center>
    </body>
    </html>
    
    
    ATHUGAÐU: Við erum bara að nota eina af myndunum fjórum þarna; seinna sýnum við þér hvernig hægt er að gera þetta stef kviklegra. Við höfum líka sett nýjan stika, vspace í applet skipunina til að gefa 14 pixela bil fyrir ofan og neðan stefið á síðunni. (Þetta er svipað og við gerðum við myndirnar í lexíu 20)

    Breidd, width, og hæð, height, myndarinnar eru 400 og 265 pixel. Við settum hina stikana þannig að það eru 6 mismunandi stækkanir, hraðinn er 4 og bendillinn er hendi. Athugaðu líka textann sem við settum innaní applet skipunina til að þeir sem hafa ekki vefskoðara sem skilur Java fái eitthvað á gluggann sinn. Svona geta þeir í það minnsta séð innihaldið, þó þeir geti ekki stækkað og fært myndina. Þú getur prófað þetta ef sú leitar í valkostum vefskoðarans og tekur Javaheimildina af (ekki gleyma að setja hana á aftur!).

    Einnig kemur það fyrir á sumum tölvum (sérstaklega Macintosh tölvum), að Java stef breyta bendlinum sem notaður er í Netscape þegar maður er búinn að nota stefið.
  6. Vistaðu og Skoðaðu þetta html skjal í vefskoðaranum þínum. Athugaðu að Java stefið opnist og það virki. Smelltu á myndina nokkrum sinnum til að sjá hvernig hún stækkar og færðu bendilinn að brún myndarinnar (þú gætir þurft að láta hann bíða þar í nokkrar sekúndur) til að athuga að hægt sé að færa myndina til.
ATHUGAÐU: Ef vefsíðan virkar ekki eins og hún á að gera, berðu þá þitt HTML skjal við þetta dæmi.

Við erum nú búin að sjá hvernig hægt er að sækja ImageZoom stefið með sérstakri mynd og síðan stækka hana og hreyfa til eins og maður væri að nota smásjá (í raun væri myndin mun skýrari við mikla stækkun í raunverulegri smásjá; á tölvuskjánum erum við bara að stækka hana upp og förum að sjá pixelin , ferköntuðu myndpunktana sem myndin er gerð úr).

En við getum gert þetta sveigjanlegra með því að nota smá JavaScript til að búa til HTML kóða fyrir stefið og þannig gera okkur kleift að velja úr röð mynda sem stefið getur sótt. Til að fræðast meira um slíka notkun á JavaScript, skaltu skoða aftur lexíu 27b. Til að gera þetta ætlum við að búa til rammasíðu (sjá lexíu 26) sem kemur til með að líta nokkurn vegin svona út:

„skoðunar“ rammi

innihald og stef sjást hér

„stjórn“ rammi

fellivalmynd og JavaScript kóði skrifa innihald í efri rammann

  1. Búðu til nýtt skjal í textaritlinum þínum, nefndu það index.html, og vistaðu það í möppunni scope
  2. Ritaðu þennan HTML kóða í nýja skjalið til að búa til rammasettið (skoðaðu lexíu 26 ef þú þarft að rifja upp námsefnið um ramma)
    <html>
    <head>
    	<title>Gosbergssmásjá</title>
    </head>
    <frameset rows="*,70" border=0>
    	<frame src="stage.html" name="stage" 
    	       marginheight="12" marginwidth="12" 
    	       scrolling="auto" noresize>
    	       
    	<frame src="controls.html" 
    	       marginheight="8" marginwidth="8"
    	       scrolling="no" noresize>
    </frameset>
    <noframes>
    <h2 align=center>ATHUGAÐU: Þessi síða notar ramma, en svo virðist
    sem vefskoðarinn þinn geti ekki sýnt þá.</h2> 
    </noframes>
    </html>
    
    ATHUGAÐU: Þetta stillir upp vefsíðu með römmum þar sem neðri ramminn er 70 puixel á hæð og sá efri notar afganginn af plássinu. Athugaðu líka að eigindin marginheight og marginwidth gera manni kleyft að skilgreina „spássíu“ eða bil á milli innihalds ramma og brúna hans.
  3. Vistaðu þessa html skjal.

  4. Búðu til nýtt skjal í textaritlinum þínum, gefðu því nafnið stage.html, og vistaðu það í möppunni scope. Þetta er síðan sem kemur í efri rammanna á síðunni.
  5. Ritaðu þennan HTML kóða í skjalið:
    <html>
    <head>
    	<title>Smásjárskoðun</title>
    </head>
    <body bgcolor="#000000" text="#FFFF00">
    <center>
    <table width=80% height=80% border=0 align=center>
    <tr>
    <td align=center>
    <h1>Gosbergssmásjá</h1>
    <font face="verdana,helvetica" size=3>Veldu bergsýni af valmyndinni
    fyrir neðan og smelltu á <b>sækja smásjá</b> til að skoða það eins og
    það væri í steinasmásjá.
    <p>
    Í hvert sinn sem þú smellir með músinni stækkar myndin.  Hreyfðu músina
    að brún myndarinnar til að færa hana til hliðar (þessi færsla virkar 
    aðeins þegar búið er að stækka myndina minnst einu sinni).
    <p>
    Þessi smásjá þarf vefskoðara sem getur unnið með Java.
    </td>
    </tr>
    </table>
    </center>
    </body>
    </html>
    
    ATHUGAÐU: Þetta er bara skýringartexti sem kemur fyrst þegar síðan er opnuð. Athugaðu hvernig við notuðum stærðarskipanir úr síðasta hluta lexíu 21 fyrir töfluna til að miðja hana á gluggann.
  6. Vistaðu þessa html skrá.

  7. Búðu til nýtt skjal í textaritlinum þínum, nefndu það controls.html, og vistaðu það í möppunni scope. Þetta er síðan sem hlaðið er inn í neðsta rammann og inniheldur JavaScript kóðann til að búa til fellivalmynd og búa til innihald í efri rammannn
  8. <html>
    <head>
    <script language="JavaScript">
    <!--
    function scope( rockmenu ) {
    // Kallað frá valmynd til að annað hvort setja upp skýringarmynd í efri rammann
    // eða rita kviklegt innihald sem setja á í Java stef
    
    // rock skilgrienir skráarnafnið, blurb er myndartextinn
      rock = rockmenu[rockmenu.selectedIndex].value;
      blurb = rockmenu[rockmenu.selectedIndex].text;
      
      if (rock != "") {
        // hunsa eyður úr valmyndinni og velja fyrsta valatriði aftur
          rockmenu.selectedIndex = 0;
          
        if (rock== "help") {
          // velja hjálp, hlaða upphafssíðu
          parent.frames[0].location.href="stage.html";
          rockmenu.selectedIndex = 0;
          
        } else if (rock== "close")  {
            // kalla á fall sem lokar glugganum
          close_scope();
          rockmenu.selectedIndex = 0;
          
        } else {
          // hlaða valda mynd í stef
          with (parent.frames[0]) {
            document.write('<html><head><title>' + blurb + '</title></head>');
            document.write('<body bgcolor="#000000" text="#EEEEEE">');
            document.write('<center><applet code="ImageZoom.class"');
            document.write(' width=400 height=265 vspace=14>');
            document.write('<param name="IMAGE" value="'+ rock +'.jpg">');
            document.write('<param name="ZoomLevel" value="6">');
            document.write('<param name="PanSpeed" value="4">');
            document.write('<param name="cursor" value="1">');
            document.write('<param name="PRefresh" value="on">' );
            document.write('Fyrirgefðu, en vefskoðarinn þinn getur ekki sótt þetta Java stef :-(');
            document.write('<p>En hérna er í það minnsta mynd as sýninu:<br>');
            document.write('<img src="'+ rock +'.jpg" width=400 height=265><p>');
            document.write('</applet>');
            document.write('<font face="verdana,helvetica" size="2">');
            document.write('<br>BISHOP GJÓSKA: ' + blurb);
            document.write(' smelltu til að stækka,hreyfðu mús að brún til að færa</center>');
            document.write('</body></html>');
            document.close();
          }
        }
      }
    }
    
    function close_scope() {
    // setja upp staðfestingarboð áður en glugga er lokað
      if ( confirm( "Ertu viss um að þú viljir loka smásjánni?" ) )  {
        parent.close();
      }
    }
    
    //-->
    </script>
    </head>
    <body bgcolor=#333333 text=#FFFFFF link="#CCFFFF" vlink="#FFCC99">
    <center>
    <form>
    <font face="verdana,helvetica" size=1>java smásjá</font><br>
    <select name="rock" onChange="scope(this)">
    <option value="">Veldu sýni...
    <option value="dw_vis">Þétt sambrædd Bishop gjóska (sýnilegt ljós)
    <option value="dw_pol">Þétt sambrædd Bishop gjóska (skautað ljós)
    <option value="pw_vis">Lauslega sambrædd Bishop gjóska (sýnilegt ljós)
    <option value="pw_pol">Lauslega sambrædd Bishop gjóska (skautað ljós)
    <option value="">------------------
    <option value="close">Loka smásjá
    <option value="help">Hjálp
    </select>
    </form>
    </center>
    </body>
    </html>
    
    ATHUGAÐU: Þetta er dálítið mikið af kóða! Valmyndin sem búin er til í stjórnrammanum sendir skilaboð í hvert sinn sem henni er breytt. Javascript fallið skoðar innihaldið í value fyrir það atriði sem er valið. Ef það er tómt, þá er ekkert gert. Ef það er „help“, þá erupphafssíðan einfaldlega sett upp aftur, Ef það er „close“, þá er kallað á JavaScript fall sem fyrst sýnir staðfestingarglugga og, ef notandinn smellir á OK, þá lokar það öllum glugganum.

    Öll mesta vinna er framkvæmd þegar valmyndin sendir skráarnafn myndar. Þá er allur HTML kóði efri rammans endurskrifaður til að sækja stefið með ákveðinni mynd og rita myndartexta fyrir myndina, sem fenginn er úr valmyndinni sjálfri.
  9. Vistaðu þetta html skjal.
  10. Sæktu skjalið index.html í vefskoðarann þinn og athugaðu hvort það virkr ekki rétt. Ef ekkert gerist þegar þú skiptir um valatriði í neðri rammanum, þá skaltu fara vandlega yfir HTML kóðann þinn og bera hann saman við kóðann hér fyrir ofan.

Þegar Java síðan er farin að virka, þá þurfum við að setja upp stiklu sem opnar hana í sér glugga, eins og við gerðum í fyrri margmiðlunarlexíum.

  1. Opnaðu skjalið inngang.html í textaritlinum þínum.
  2. Settu eftirfarandi kóða í skjalið næst á eftir kóðanum sem er svona:
    Snúnu hólfin hér eru lofthólfin sem festust innan í berginu þegar það
    þeyttist upp úr eldfjallinu.
    <br clear=right>
    og breyttu honum þannig að hann verði svona:
    Snúnu hólfin hér eru lofthólfin sem festust innan í berginu þegar það
    þeyttist upp úr eldfjallinu.
    <p> Til að sjá nákvæmari mynd af gosbergi, prófaðu <a href="../scope/index.html" onClick="window.open('../scope/index.html',
    'scope', 'width=540,height=480,status,menubar'); return false"
    onMouseOver="window.status='opna gosbergssmásjá'; return true">Gosbergssmásjána okkar</a> (þarf Java) <br clear=right>
  3. Vistaðu skjalið og Opnaðu það í vefskoðaranum þínum. Prófaðu þetta og athugaðu að það opni vefskoðaraglugga sem síðan sækir síðu með Java.

Gættu að hvað þú gerir

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. Berðu þína vinnu við HTML kóðann saman við dæmin (leitaðu að orðinu Source í View valmynd vefskoðarans).

Upprifjun

Upprifjunarefni fyrir þessa lexíu:

  1. Hvað er sumt að því sem hægt er að gera með Java stefi sem gerir það svo gagnlegt?
  2. Hverjar eru sumar takmarkanirnar á því að nota Java?
  3. Hvernig er HTML kóðinn til að setja Java skrá á síðu? Hvers vegna ætti eitt stef að nota mismunandi stikaskipanir?
  4. Hvernig fer maður að ef gestur á síðuna okkar getur ekki séð Java stefið?
  5. Hvaða kostir fylgja því að nota JavaScript til að skrifa HTML kóðann fyrir Java stefið?

Æfingar

Prófaðu ImageZoom stef með þínum eigin myndum. Skoðaðu hvernig það breytist ef þú breytir sumum stikunum.

Frekari upplýsingar

Þó Java sé hástigs forritunarmál, þá eru til fjöldi setra þar sem hægt er að fá ókeypis stef sem maður getur notað á sínar eigin síður.

Til að fá frekari upplýsingar um Java stef, skoðaðu heimildalistann um Java námskeið. Skoðaðu líka CNET Java Center og aðal Java síðuna hjá Sun.


Næst á dagskrá....

HTML hefur breyst mikið síðan við skrifuðum þetta námsefni árið 1994! Við ætluðum að setja nýjar lexíur um Dynamic HTML, Cascading Style Sheets, og hugsanlega jafnvel XML vorið 2000. En, þar sem þetta eru miklu yfirgripsmeiri viðföng en HTML (og myndu stækka mjög þennan pakka), þá höfum við nú ákveðið að búa til sér námsefni í þessu.

Þar sem það mun líkast til ekki sjá dagins ljós fyrr en vorið 2001, þá höfum við valið önnur áreiðanleg námskeið sem þú getur skoðað á tilvísanasíðum okkar.

Þangað til, haltu áfram að skrifa frábærar HTML síður.

FARA Á.... | Efnisyfirlit | síðasta: „Shockwave“ |

Námsefnisgerð í HTML: Lexía 29e: Smá bolli af Java
©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/tut29e.html

Þýtt með leyfi höfundar