Dynaamiset www-sivut scripteillä vbscript ja j(ava)script Seppo Räsänen

Transkriptio

1 Dynaamiset www-sivut scripteillä vbscript ja j(ava)script Seppo Räsänen

2 Sivu 2 Sisällys 1. Script-kielet Vbscript Vbscript:n lisääminen web-sivulle Muuttujat, vakiot ja ilmaisut Tapahtumat Scriptin kutsunta lomakkeelta Itsenäiset aliohjelmat ja funktioproseduurit Taulukot Ohjausrakenteet Muuttujien näkyvyys Objektimalli ja sen käyttäminen koodissa CSS-tyylien muuttaminen ohjelmallisesti Poikkeustenkäsittely Tiedon sitominen, data binding Visual Basic 6.0 ja DHTML-projekti Visual Basic 6.0 ja ActiveX JavaScript, Jscript J(ava)script:n lisääminen web-sivulle Kommentit ja muuttujat Operaattorit Taulukot Ohjausrakenteet Funktiot Tapahtumat Objektimalli, sen käyttäminen koodissa sekä this-olio...46

3 Sivu 3 1. Script-kielet Web-sivujen ohjelmointiin on olemassa useita välineitä ja menetelmiä. Sivuille voi ohjelmoida esim. applet-sovelluksia JAVA-kielellä. Java on käännetty ohjelmointikieli, mutta kääntäjän tuottama koodi toimii virtuaalikoneella. Virtuaalinen koodi käännetään selaimessa. Tästä syystä Javaappletit toimivat samalla tavalla eri selaimissa ja eri käyttöjärjestelmissä. Java-appletit käännetään class-tiedostoiksi, jota voidaan käyttää siis web-sivulla. Javascript käyttää tekstipohjaisia komentoja, jotka liitetään osaksi HTML-sivua. Java-applet tulostetaan sivulla olevaan ikkunaan, kun taas Javascriptit voidaan liittää ikkunaan mihin kohtaan vaan. Javascript sopii yksikertaisten websovellusten tekoon sekä vuorovaikutteisten ominaisuuksien tekoon web-sivulla. Javalla voi tehdä laajempia ohjelmia, vrt. Corel WordPerfect. Edellisessä kappaleessa verrattiin Javaa ja Javascriptiä. Javascritin on kehittänyt Netscape Communications Corporation. Javascriptille on kilpailijana Microsoftin Jscript ja Vbscript kielet. Jscript kieli on vastaavanlainen kuin Javascriptissä, Vbscript-kieli perustuu Visual Basic ohjelmointikieleen Vbscript Vbscript:n lisääminen web-sivulle Vbscript-koodi lisätään haluttuun paikkaan www-sivua. Koodi kirjoitetaan <SCRIPT>-tagiin, attibuuttia language kertoo käytettävän kielen. HUOM! Vbscript-koodattu script ei toimi kuin Microsoftin IE4 tai uudemmalla selaimella.

4 Sivu 4 Kuva 1. Esimerkki scriptin liittämisestä web-sivulle. Esimerkissä näytetään msgbox-funktion avulla viesti Hello World, kun avataan ko. sivu selaimelle Muuttujat, vakiot ja ilmaisut Vbscript sisältää vain yhden tietotyypin, variant. Tietotyyppi voi sisältää millaista tietoa vain. Muuttjan tietotyyppi määräytyy muuttujan ensimmäisen sijoituksen yhteydessä. Alla luettelo variant-tietotyypin sisällöstä. Alatyyppi Selite Empty muuttujaa ei ole alustettu - sisältää 0 numerona tai null-merkkijonon ("") Null muuttujia ei tarkoituksellisesti sisällä tietoa Boolean muuttujan arvo on joko kyllä tai ei (True tai False) Byte muuttujan arvona on kokonaisluku välillä Integer muuttujan arvona on kokonaisluku välillä -32,768-32,767 Currency muuttujan arvo on välillä -922,337,203,685,477, ,337,203,685,477,5807 Long muuttujan arvona on kokonaisluku välillä -2,147,483,648-2,147,483,647 Single muuttujan arvona on yksinkertainen tarkkuuden liukuluku välillä E E -45 negatiivisille numeroille ja E E 38 positiivisille numeroille. Muuttaja voi myös olla 0. Double muuttujan arvona on kaksoistarkkuuden liukuluku välillä E E -324 negatiivisille numeroille ja 4.941E E 308 positiivisille numeroille. Muuttaja voi myös olla 0. Date (Time) muuttujan arvona on numero, joka kuvaa päivämäärää välillä 1/1/ /31/9999, suljettuna merkeillä #, kuten #12/31/97#. String muuttuja koostuu merkkijonosta - mikä voi olla pituudeltaan niinkin pitkä kuin 2 biljoonaa merkkiä - suljettuna yksin- tai kaksinkertaisilla lainausmerkeillä, kuten 'Hello There' tai "Hello There". Object muuttajan arvona on 'osoitin" objektiin kuten ActiveX-kontrolli tai yksi dynaamisen HTML:n objekti.

5 Sivu 5 Error muuttujan arvona on numero, joka viittaa määrättyyn virheviestiin. Kuva 2. Esimerkki muuttujien käytöstä. Kuvan 10 esimerkissä on kaksi string-tyypissä muuttujaa enimi ja snimi. Ika-muuttuja saa arvokseen byte-tyyppisen tiedon. Tanaan-muuttujassa on date-tyyppinen tieto. Muuttujien tiedot tulostetaan document.write lauseen avulla. Huom! Tutustu selaimella lähdekoodiin, lähdekoodi on scriptijä käytettäessä kuvan mukaista. Vbscript-kieli tuntee tyypilliset operaattorit. Aritmeettiset operaattorit (^, -, *, /, \, Mod, +, &), vertailuoperaattorit (=, <>, <, >, <=, >=, Is) ja loogiset operaattorit (Not, And, Or, Xor, Eqv, Imp).

6 Sivu Tapahtumat Tapahtumilla tarkoitetaan käyt täjän aihauttamia toimia, joka laukaisee ohjelman toiminnan. Esimerkiksi hiiren vieminen kohteen päälle tai kohteeen kaksoisnapauttaminen ovat tapahtumia. Alla luettelo tapahtumista. onafterupdate onbeforeunload onbeforeupdate onblur onbounce onclick ondataavailable ondatasetchanged ondbclick ondragstart onerror onerrorupdate onfinish onfocus onhelp onkeypress onkeyup onload onmousedown onmousemove onmouseover onmouseup onreadystateshange onresize onrowenter onrowexit onscroll onstart onsubmit onunload Kuva 3. Esimerkki tapahtumien kutsumisesta. Tapahtuma voidaan koodata kahdella tavalla. Kuvan 3 esimerkissä ensimmäinen scripti on koodattu normaalisti Sub-lauseen avulla (vrt. Visual Basic). HMTL-koodissa määritetään jollekin

7 Sivu 7 osalle (esimerkissä teksti) ID-määritys. Tämän perusteella voidaan objektille kirjoittaa johonkin tapahtumaan koodia <SCRIPT> </SCRIPT> tagien väliin. Tällä tavoin voi samassa <SCRIPT>tageissa olla useampikin Sub-tapahtuma. Toinen tapa kirjoittaa objektille koodia on käyttää <SCRIPT FOR= objekti EVENT= tapahtuma LANGUAGE= VBScript > syntaksia. Tästä on esimerkki kuvassa 11, jossa alempi scripti on kohdistettu olio2:n kaksoisnapautukselle. Tällä tavoin voidaan kirjoittaa vain yksi tapahtuma <SCRIPT>-tagiin Scriptin kutsunta lomakkeelta Kuva 4. Scriptin kutsunta lomakkeelta, scripti viittaa lomakkeen objektin ominaisuuksiin. Kuva 5. Scriptin kutsunta ilman lomaketta, scripti viittaa objektin ominaisuuteen. Kuvan 4 esimerkissä on rakennettu lomake, jossa on tekstikenttä ja painike. Scriptissä on koodattu painikkeen napsautustapahtuma. Kun lomakkeella olevaan tekstikentän ominaisuuteen viitataan, niin silloin käytetään notaatiota lomake.olio.ominaisuus esim. frmlomake.txtteksti.value. Kuvan

8 Sivu 8 13 esimerkissä, jossa lomaketta ei ole, viittaaminen perustuu notaatioon olio.ominaisuus esim. txtteksti2.value Itsenäiset aliohjelmat ja funktioproseduurit Vbscript-kieli sisältää reilut 80 funktiota. Funktioiden syntaksi on Funktionimi(argumentit), esim. Ucase( ville ) muuttaa ville-merkkijonon suuriksi kirjaimiksi VILLE. Funktiot ovat tuttuja Visual Basicistä. Kuten Visual Basicissä, niin Vbscript:ssä voi tehdä omia aliohjelmia ja kutsua niitä. Aliohjelma voi olla Sub-tyyppinen lausealiohjelma tai Function-lauseella alkava funktio. Lausealiohjelmalla ja funktiolla on kaksi tyypillistä eroa. Funktio palauttaa nimessään yhden vastauksen, kun lausealiohjelma palauttaa muuttujissaan vastauksen. Jos ollaan tarkkoja, niin funktio palauttaa myös muuttujissaan arvoja, riippuen miten muuttujat ovat määritelty. Toinen ero on funktion ja lausealiohjelman kutsunnassa. Selvinnee pian esimerkeistä ja syntaksiesitelystä. <SCRIPT>-tagi voi sijaita HTML-koodissa missä kohtaa vain. Lausealiohjelman syntaksi on Sub aliohjelma(argum1, argum2,.) Lauseet.. End Sub Lausealiohjelmaa kutsutaan aliohjelma(muuttuja1, muuttuja2,..). Nyt lausealiohjelma on tehnyt toiminnan ja/tai sijoittanut muuttujille arvot, joita voidaan käyttää kutsuvassa aliohjelmassa. Kuva 6. Esimerkki aliohjelmasta ja funktiosta. Script sijaitsee BODY-osassa. Aliohjelma tulostaa MsgBox-funktiolla käyttäjän määrittämän viestin (teksti ja otsake). Funktio laskee kahden annetun päivämäärän erotuksen.

9 Sivu 9 Kuva 7. Esimerkki lausealiohjelman kutsunnasta. Aliohjelman parametrejä ei käytetä kutsuvassa ohjelmassa muuta kuin tiedon välittämiseen aliohjelmalle. Funktion syntaksi on Function fnimi(argum1, argum2,.) Lauseet End Function Funktiota kutsutaan arvo = fnimi(muuttuja1, muuttuja2, ). Arvo on muuttuja, joka saa funktion palauttaman arvon. Kuva 8. Esimerkki funktion kutsunnasta. Funktion määritys on kuvassa 6. Kuva 9. Euromuunnin funktio. Funktiota voidaan kutsua suoraa HTML-koodin avulla tehdystä objektista. Kuvassa 18 on koodiesimerkki, jolla kutsutaan kuvan 17 funktiota. Syntaksi esim. tekstikentästä kutsuttaessa on

10 Sivu 10 <INPUT TYPE= text NAME = objektinimi TAPAHTUMA= toinen_objekti.ominaisuus = funktionimi(argumentit) >. Kuva 10. Funktion kutsunta tekstikentäntästä poistuttaessa tapahtumasta Taulukot Kuva 11. Esimerkki taulukon käytöstä. Vari-nimiseen tauluun sijoitetaan eri värejä (merkkijonoja). Dokumentin väriksi valitaan satunnaisluvun mukaisessa taulukon indeksikohdassa oleva väriarvo. Vbscript-kielessä taulukot määritetään Dim lauseen avulla. Taulun nimen perässä oleva luku kertoo suurimman indeksin, indeksointi alkaa nollasta. Taulukon alkioihin viitataan indeksin avulla. Moniulotteisten taulukoiden määrittelyssä ja viittaamisessa erotetaan ulottuvuudet toisistaan pilkulla, esim. taulu(5,6) on kaksi ulotteinen taulu, jossa alkioiden määrä on 6*7 = 42.

11 Sivu Ohjausrakenteet Ehto-rakenne Vbscript-kielessä ehtorakenteen syntaksi on (Ehtorakenteessa ei tarvitse olla välttämättä ElseIfhaaraa tai Else-haaraa). If ehto1 Then lauseet1 ElseIf ehto2 Then lauseet2 Else lauseet 3 End If Kuva 12. Esimerkki ehtorakenteen käytöstä, jossa arvotaan luku ja määritetään, onko se parillinen vai pariton.

12 Sivu 12 Valinta-rakenne Vbscript-kielessä valintarakenteen syntaksi on Select Case muuttuja Case arvo1 lauseet 1 Case arvo2 lauseet 2.. Case Else lauseet n End Select Kuva 13. Esimerkki valintarakenteen käyttämisestä.

13 Sivu 13 Silmukat Vbscript-kielessä on useita silmukka rakenteita: FOR NEXT, DO WHILE LOOP, WHILE WEND. Do While -silmukkarakenne on myös Do Until rakenteessa, Do Not Until on sama kuin Do While, ja päinvastoin. For silmukan syntaksi on For muuttuja=alkuarvo to loppuarvo Step askellus lauseet Next Kuva 14. Esimerkki For-silmukan käytöstä. Do While silmukan syntaksi on Do While ehto Lauseet Loop Kuva 15. Esimerkki Do While silmukan käytöstä, jossa lajitellaan kymmenalkioinen apuniminen taulukko kuplalajittelulla.

14 Sivu 14 While Wend silmukan syntaksi on While ehto lauseet Wend Kuva 16. Esimerkki While-Wend silmukan käytöstä, jossa kirjoitetaan kymmenen satunnaislukua HTML-tagien avulla taulukkomuotoon web-sivulle Muuttujien näkyvyys Vbscript:ssä muuttujat näkyvät koko dokumentissa tai paikallisesti ko. aliohjelmassa tai funk tiossa. Globaali muuttuja määritellään <SCRIPT> tagiin aliohjelman tai funktion ulkopuolelle. Muuttujan voi määritellä myös toisessa <SCRIPT>-tagissa. Lokaali muuttuja määritellään ja käytetään aliohjelman tai funktion sisällä. Lisäksi muuttujat voidaan määritellä DIM- lauseen lisäksi GLO- BAL- tai PRIVATE-lauseella. Alla olevassa kuvassa on esimerkki lokaalista ja globaalista muuttujista.

15 Sivu 15 Kuva 17. Esimerkki globaalien ja lokaalin muuttujan käytöstä Objektimalli ja sen käyttäminen koodissa Melkein kaikki web-sivuilla ja selaimessa olevat elementit perustuvat objektimalliin olioihin. Objektihierarkian huipulla on window-olio. Window-objektin eräät oliot erottuvat selvästi selaimen näytöltä, osaa objekteista on hankala havaita ilman lähdekoodia. Liitteessä 2 on kuvattu DHTML:n yleisesti käytetyt objektit ja niiden hierarkia. Osa objekteista on kokoelmia (collection), sillä ne sisältävät useita olioita (vrt. Visual Basic). Tällainen kokoelma on esimerkiksi links, joka viittaa kaikkiin web-sivulla oleviin linkki-olioihin. Objektimallin window-oliosta hierarkiassa alapuolella olevat oliot ovat: location-objekti sisältää tietoa nykyisen sivun URL-osoitteesta. Sitä käytetään navigointiin. frames-kokoelma sisältää sivuston kehykset. history-objekti sisältää tiedot, millä sivuilla on viimeksi käyty. navigator-objekti sisältää tiedot käyttäjän selaimesta; selaimen nimi ja versionumero. event-objekti pitää kirjaa tapahtumien tilasta. Tämän avulla määritellään, mikä elementti aiheutti tapahtuman. screen-objekti sisältää tietoja näytön asetuksista.

16 Sivu 16 document-objekti sisältää tiedot sen hetkisen sivun elementeistä. Kuva 18. Esimerkkejä window-objektin olioista (Lähde: Microsoft Internet Explorer Webohjelmointi). Document-objektin olioihin viitataan pistenotaatiolla. Alla olevassa kuvassa on muutama esimerkki, joissa viittaukset ovat kokoelmiin. Kuva 19. Esimerkkejä document-objektin kokoelma-olioista (Lähde: Microsoft Internet Explorer Web-ohjelmointi). Kokoelmassa haluttuun olioon viitataan pistenotaation avulla. Viittaaminen voidaan tehdä indeksien avulla tai jos oliot on nimetty, niin nimien avulla. Kuvassa 28 on esimerkki indeksin

17 Sivu 17 avulla viittaamisesta, missä ensimmäinen olio saa indeksin 0 ja seuraavat samaan kokoelmaan kuuluvat oliot juoksevan numeron. Kuvassa 21 on esimerkki nimettyihin olioihin viittaamisesta. Kuva 20. Esimerkkejä document.forms-objektikokoelman olioista (Lähde: Microsoft Internet Explorer Web-ohjelmointi). Kuva 21. Esimerkkejä document.forms-objektikokoelman olioista (Lähde: Microsoft Internet Explorer Web-ohjelmointi). Toinen tapa viitata web-sivulla oleviin olioihin on käyttää all-kokoelmaa. All-kokoelmalla voidaan viitata kaikkiin www-sivulla oleviin HTML-elementteihin. All-kokoelmalla voidaan viitata indeksoidusti tai nimetysti. Esimerkki indeksoidusta viittaamisesta on document.all(0) tai

18 Sivu 18 document.all.tags( H1 ).item(0) viittaus, esimerkki nimetystä viittaamisesta on document.all.tags( paaotsikko ). Kuvissa esimerkkejä all-kokoelmaan viittaamisista. Kuva 22. Esimerkkejä document.all-objektikokoelman olioista, indeksoitu viittaaminen (Lähde: Microsoft Internet Explorer Web-ohjelmointi). Kuva 23. Esimerkkejä document.all-objektikokoelman olioista, indeksoitu viittaaminen (Lähde: Microsoft Internet Explorer Web-ohjelmointi).

19 Sivu 19 Kuva 24. Esimerkkejä document.all-objektikokoelman olioista, nimetty viittaaminen (Lähde: Microsoft Internet Explorer Web-ohjelmointi). Objektin ominaisuus on sen jokin yksilöllinen piirre, esim. tekstikehysolion txtteksti ominaisuus on value. Olion ominaisuuteen viitataan pistenotaatiolla olio.ominaisuus eli esim. txtteksti.value. Olion ominaisuus voidaan lukea muuttujaan, toisaalta olion ominaisuuden arvoa voi muuttaa ohjelmallisesti. Poikkeuksena ovat olion ominaisuudet, joilla on vain lukuoikeus (read-only, vrt. Visaul Basic). Monilla web-sivun objekteilla on vbscript:llä ohjattavia metodeja. Metodin avulla olio voi tehdä jotain tai se on käytös, jonka se voi suorittaa itsekseen. Metodin syntaksi on Visual Basicistä tuttu olio.metodi(). Metodista esimerkkinä on document.write(teksti), joka kirjoittaa teksti-muuttujan tiedon web-sivulle. Olion tapahtumista oli kappaleessa CSS-tyylien muuttaminen ohjelmallisesti Kappaleessa 1 käsiteltiin tyylejä. Tyylejä ei muutettu ohjelmallisesti. Vbscriptin avulla voi muuttaa ohjelmallisesti web-sivustolla olevaa tyyliä. Tyylien muuttamisessa on seuraavat syntaksit. 1. olio.ominaisuus = arvo - olion ominaisuuden muuttaminen 2. olio.style.cssominaisuus = arvo - tyylin muuttaminen koodilla 3. olio.luokkanimi = arvo - tyylin muuttaminen tyyliluokan avulla

20 Sivu 20 Kuva 25. Esimerkki upotetusta tyylistä, jossa on myös luokkamääritys. Kuva 26. Otsake, jota muokataan ohjelmallisesti tyylien avulla. Kuva 27. Esimerkki syntaksin 1 mukaisesta tyylin muuttamisesta ohjelmallisesti. Viittaamisessa käytetään document.all objektia. Kuva 28. Esimerkki syntaksin 1 mukaisesta tyylin muuttamisesta ohjelmallisesti. Viittaamisessa käytetään objektin nimeä.

21 Sivu 21 Kuva 29. Esimerkki syntaksin 2 mukaisesta tyylin muuttamisesta ohjelmallisesti. Kuva 30. Esimerkki syntaksin 3 mukaista tyylin muuttamisesta ohjelmallisesti. Tyylimääritys, jota käyteään, on kuvassa 25. Ohjelmallisen tyylien muuttamisen avulla voidaan standardoita sivuston tyylien muuttumista. Tyypillisesti sivustossa voi olla esim. linkkiluetteloita, joita halutaan korostaa hiiren osoittaessa kaikkialla samalla tavalla. Alla on esimerkki standartoimisesta. <html> <head> <title>tyylin muutoksen standartointi</title> <style type="text/css"> LI {font: 14pt/16pt "Times New Roman"} LI.kursiivi {font: 12pt "italic"} LI.sinikelta {background-color: "yellow"; font-color:"blue"} </style> <script language="vbscript"> Sub document_onmouseover() ' apu-muuttujaan hiiren osoittaman linkin tagi apu = window.event.srcelement.tagname ' linkin tutkinta If apu = "A" Then tagi = window.event.srcelement.sourceindex document.all(tagi).classname = "sinikelta" End if End sub Sub document_onmouseout() ' linkin tutkinta If apu = "A" Then tagi = window.event.srcelement.sourceindex

22 Sivu 22 document.all(tagi).classname = "" End if End sub </script> </head> <body> <h1>tyylin muutoksen standartointi</h1><p> Hyperlinkin korostaminen <p> <a href=" kaupunki</a><br> <a href=" <a href=" <a href=" haku</a><br> </body> </html> Poikkeustenkäsittely Poikkeusten käsittelyllä tarkoitetaan tilanteita, joissa ohjelma kaatuu, esim. pyrit jakamaan nollalla. Poikkeusten käsittelyssä käytetään tyypillisesti käyttäjäviestinnässä jotakin vuorovaikutetta, esim. msgbox()-funktio. Vbscript sisältää virheenkäsittelyä varten seuraavat lauseet. On Error käynnistää virheenkäsittelyn. On Error Resume Next -lauseella suoritetaan virheen aiheuttamasta koodirivistä seuraava koodirivi. Err-objektin avulla voi selvittää mm. virhenumeron ja sisällöllisen selityksen. Err.Raise generoi virheilmoituksen.

23 Sivu 23 Kuva 31. Nelilaskin sovelluksen käyttöliittymän HTML-koodi. Laskentatoiminta tehdään laskinfunktion avulla. Kuva 32. Nelilaskin sovelluksen laskin-funktio. Laskin funktio sisältää poikkeuskäsittelyn, toteutus On Error Resume Next lauseella.

24 Sivu Tiedon sitominen, data binding Web-sivuilla on tyypillistä tuoda tietoa jostakin tietolähteestä. Tässä tutustutaan tiedon tuomista yksinkertaisesta tekstitiedostosta. Tiedon tuomiseen tietokannasta tutustutaan kappaleessa 3. Tiedon sitomiseen käytetään ActiveX-komponettia, jonka nimi on Tabular Data. Tabular Data komponentti käsittelee sarakkeista tietoa. Kuva 33. Sarakkeinen tiedosto, joka on talletettu Access-sovelluksen taulusta tekstitiedostoksi. Tiedostossa on Sukunimi, Etunimi, Kaveruus, Puhelin ja sarakkeet (kentät). Tiedostossa on kymmenen henkilön tiedot (tietueet). Tabular Data komponentin avulla voidaan tekstitiedostosta lukea sarakkeinen tieto ja tulostaa se www-sivulle halutulla tavalla. Tiedosta voidaan tulostaa kerralla kaikki vaikkapa taulukkoon tai tulostaa yksittäinen tietue, tietueesta toiseen voidaan liikkua vaikkapa painikkeiden avulla. Tekstitiedostossa olevasta tiedosta voidaan näyttää jonkin kriteerin mukaiset tiedot, esim. kriteerinä voi olla kaveruus (kaikki/työ/koti).

25 Sivu 25 Kuva 34. Tekstitiedoston sisältö web-sivulla, tekniikkana tiedon sitominen. Web-sivu, joka näyttää tiedoston tiedot, sisältää Tabular Data ActiveX-komponentin. Tämä komponentti tulee mm. IE4-version asennuksen yhteydessä. Tämän objektin voi sijoittaa websivulle usealla eri www-sivujen editoriohjelmalla. Web-sivulla objekti näyttää alla olevan kuvan mukaiselta HTML-kieleltä. Kuvassa olevassa objektissa on kaksi parametriä. DataUrl-parametrillä kerrotaan, mistä tiedostosta tiedot noudetaan. Objektin nimi (ID) on potpuri, tätä nimeä käytetään myöhemmin ohjelmakoodissa. Kuva 35. Tabular Data komponentti www-sivulla. Tieto kytketään web-svulle HTML-tagien avulla. DATASRC määrittää tietolähteenä käytettävän objektin nimen, esim. #potpuri. DATAFLD määrittää kentän tietolähteestä, josta tietoa tuodaan. DATAFORMATS määrittää tiedon käsittelyn eli käsitelläänkö tietoa tekstinä vai HTML:nä. DATAPAGESIZE määrittää tietuteiden enimmäismäärän, joka voidaan näyttää ruudulla yhdellä kertaa.

26 Sivu 26 Seuraavat HTML tagit tukevat DATASRC attribuuttia: <A>, <APPLET>, <BUTTON>, <DIV>, <FRAME>, <IFRAME>, <IMG>, <LABEL>, <MARQUEE>, <OBJECT>, <PARAM>, <SELECT>, <SPAN>, <TABLE> ja <TEXTAREA>. Seuraavat HTML tagit tukevat DATAFLD attribuuttia: <A>, <APPLET>, <BUTTON>, <DIV>, <FRAME>, <IFRAME>, <IMG>, <LABEL>, <MARQUEE>, <OBJECT>, <PARAM>, <SELECT>, <SPAN> ja <TEXTAREA>. Seuraavat HTML tagit tukevat DATAFORMATAS attribuuttia: <BUTTON>, <DIV>, <LABEL>, <MARQUEE>, <PARAM> ja <SPAN>. Vain <TABLE>-tagi tukee DATAPAGESIZE attribuuttia. Kuva 36. Esimerkki taulukkorakenteesta, jossa hyödynnetään tekstitiedostossa olevia tietoja. Kuvasta huomataan <table> -tagissa datasrc-attribuutin käyttäminen sekä <td>-tagin sisälle tuodaan tieto datafld-attribuutin avulla. Kuvassa 36 on myös kuvattuna hakukriteerin tekeminen ja lajittelun tekeminen. Hakukriteeri määritetään <select name="suodin">-tagin avulla ja lajittelussa käytetään painikkeita <input type="button" value="nimijärjestys" onclick="ali_nimi()"> ja

27 Sivu 27 <input type="button" value="kaveruusjärjestys" onclick="ali_kaveruus()">. Hakukriteerin ja lajittelun toimiminen vaatii vbscriptejä. Lajittelu tehdään SortColumnominaisuuden avulla, jossa määritetään merkkijonona kentän, joiden perusteella lajitellaan. Esimerkiksi kaveruuden mukainen lajittelu tapahtuu lauseella potpuri.sortcolumn="kaveruus; Sukunimi; Etunimi". Tämän lauseen jälkeen pitää lukea tiedot www-sivulle uudestaa Reset()- metodin avulla. Hakukriteerissä, suodattamisessa käyttäjä valitsee avautuvasta luettelosta haluamansa kriteerin. Tämä valinta luetaan alla olevassa kuvassa valinta-muuttujalle koodilla valinta=suodin.options(suodin.selectedindex).text. Kun valinta muuttuu, niin silloin suoritetaan suodin_onchange tapahtuma. Tapahtumassa määritetään potpuri.filtercolumn="kaveruus" lauseella, minkä kentän mukaan suodatus tehdään. Lauseella potpuri.filtercriterion="=" määritetään, millainen on suodatuksen operaattori. potpuri.filtervalue=valinta lause määrittää suodatuskentässä olevan tiedon ja potpuri.reset() lause päivittää tiedon näytölle. Kuva 37. Lajittelussa ja hakukriteerissä käytettävät vbscript-koodit.

28 Sivu 28 Jos halutaan näyttää tiedostosta yksi tietue kerrallaan, niin ohjelmakoodi muuttu hiukan. Kuvassa 38 kuvataan käyttöliitymän tekeminen. Käyttöliittymässä käytetään <table>-tagia, mutta siihen ei laiteta datasrc-attribuuttia. Datasrc-attribuutti tuo kaikki tiedot taulukkoon, tässä tehtävässä on tarkoituksen tuoda vain yksi tieto. Datasrc-määritys viedäänkin nyt <td>-tagien sisälle. Ohjelmakoodissa koodataan painikkeiden toiminta vbscript:n avulla. Kuvassa 47 on kuvatt koodit. objekti.recordset.absoluteposition palauttaa sen hetkisen sijainnin tietolähteessä, 1 tarkoittaa ensimmäistä tietuetta objekti.recordset.recordcount palauttaa tietolähteen tietueiden määrän objekti.recordset.movefirst() metodilla siirrytään tietolähteessä ensimmäiseen tietueeseen objekti.recordset.movenext() metodilla siirrytään tietolähteessä seuraavaan tietueeseen objekti.recordset.movelast() metodilla siirrytään tietolähteessä viimeiseen tietueeseen objekti.recordset.moveprevious() metodilla siirrytään tietolähteessä edelliseen tietueeseen Kuva 38. Käyttöliittymäkoodi sovellukseen, joka näyttää sarkaintiedostosta yhden tietueen kerrallaan. Käyttöliittymässä on neljä painiketta, jotka kutsuvat aliohjelmia.

29 Sivu 29 Kuva 39. Yhden tietueen näyttämiseen liittyvät koodit Visual Basic 6.0 ja DHTML-projekti Microsoft Visual Basic 6.0 Pro versiolla voi tehdä DHTML-projektin (DHTML Application). Tällä DHTML-projektin avulla voidaan rakentaa webissä toimiva sovellus. Selainvaatimuksena on Microsoftin selain. Ohjelmointi on normaalin sovelluksen tekemisen kaltaista, sovelluksen tekemisen käyttöliittymä on hiukan toisenlainen. VB:ssä sovellus käännetään dll-tiedostoksi. Dll- tiedosto rekisteröityy käännöksen yhteydessä Windows:n rekisteriin (saa classid- identifikaatin). Jos samaa sovellusta halutaan käyttää jollakin toisella koneella, esim. palvelimella, tarvitaan tehdä sovelluksesta asennuspaketti. Tämän asennuspaketin avulla voidaan dll-tiedosto asentaa palvelimelle ja samalle se identifioituu. Identifioitu dll-tiedosto voidaan liittää web-sivulle.

30 Sivu 30 Kuva 40. BMI-painoindeksin laskeva sovellus. Toteutettu Visaul Basicin DHTML-projektina. Kuva 41. Kuvan 40 sovellus Visual Basicin kehitysympäristössä. Private Function Laske_onclick() As Boolean BMI.Value = Format(CDbl(paino.Value) / (CDbl(pituus.Value) * CDbl(pituus.Value)), "0.00") End Function Yllä olevalla ohjelmakoodilla lasketaan painoindeksi. Laske BMI painikeelle on määritetty IDominaisuuteen Laske-arvo (vertaa olion nimi VB:ssä). Vastaavalla tavalla on nimetty BMI, paino ja pituus kentät. Painikkeen tapahtumat ovat funktioita, kun normaalissa VB-projektissa ne ovat Private Sub lausealiohjelmia.

31 Sivu Visual Basic 6.0 ja ActiveX Visaul Basicillä rakentaa ActiveX-komponetteja ja liittää niitä web-sovellukseen. Kappaleessa oli esimerkki Tabular Data komponentin käytöstä. Tabular Data on yksi esimerkki ActiveX-komponentista. ActiveX lähti kehittymään OLE-tekniikasta (Object Linking and Embedding). OLE tekniikan avulla voidaan käyttää sovelluksesta toista sovellusta, avaamatta sitä (OLE 2-version tekniikka). OLE tekniikan jälkeen Microsoft kehitti COM-tekniikan (Component Object Model). Internetohjelmoinnin kehittämisen myötä Microsoft julkaisi ActiveX tekniikan. ActiveX viittaa joukkoon COM-perusteisia tekniikoita hajautetulle tietojenkäsittelylle. ActiveX:n avulla helpotetaan ja joustavoitetaan web-sovelluste tekoa. ActiveX komponenttejä voi käyttää monenlaisessa ohjelmiostoprojektissa. Tällä tavoin ohjelmakoodin siirrettävyys projektista toiseen helpottuu. ActiveX-komponentin käyttö selaimessa sisältää seuraavat vaiheet: 1. Ladataan versionumero ja lyhyt kuvaus komponentista 2. Selain tarkistaa, onko komponetti ja asennettu 3. Jos ei ole asennettu tai versio on vanhempi, niin komponentti ladataan, asennetaan ja ajetaan 4. Jos komponentti on asennettu, se suoritetaan eli komponentti ladataan vain kerran. ActiveX-tekniikkaan liittyy tietoturvariski. Komponentti latautuu työasemalle, joten sen voi ohjemoida tekemään vaikkapa tuhojaan.!!!! ActiveX-tekniikkaa tukee vain Microsoftin selaimet. Netscape-selaimeen on saatavissa plug- in sovelluslaajennus, jolla voidaan ajaa ActiveXkomponentteja. Lisäksi komponentit vaativat kovalevyltä tilaa.!!! Visual Basicillä voi tehdä useanlaisia ActiveX-projekteja. ActiveX EXE on ohjelma, joka laajentaa yhden tai useamman ActiveX-komponentin. Tämä komponentti viittaa vain koodiin, se ei vaikuta liittymään ActiveX DLL laajentaa yhden tai useamman komponentin toiminnallisuutta ActiveX Document Exe sovellus voidaan asentaa web-sivustolle toimivaksi ActiveX Document Dll sisältää edellistä tukevaa ohjelmakoodia ActiveX Control on itsenäinen yksikkö, joka sisältää koodin ja käyttöliittumän. Tällöin syntyy OCX-tiedosto/komponentti.

32 Sivu 32 Kuva 42. Esimekki ActiveX-projektista Visual Basic 6.0:ssa. Kuvan 50 ActiveX-komponentti sisältää Laske-painikkeessa koodin. Private Sub Laske_Click() BMI.Text = Format(CDbl(Paino.Text) / (CDbl(Pituus.Text) * CDbl(Pituus.Text)), "0.00") End Sub Kun komponentti on tehty, se käännetään OCX-tiedostoksi. Tätä komponenttia voi käyttää Win32 sovelluksessa tai Web-sovelluksessa. Jos jollakin toisella koneella aiotaan käyttää ko. komponettia, siitä pitää tehdä asennuspaketti vaikkapa Visual Basicin omilla työkaluilla ja asentaa käytettävään koneeseen JavaScript, Jscript Tässä kappeleessa tutustutaan J(ava)script:iin. Tutustuminen ei ole niin laajaa kuin vbscript:ssä, sillä ohjelmoinnin idea on sama (ohjausrakenteisen lauseet erilaisia, vain muutama ero kielessä, oliomalli on melkein sama, jne ). J(ava)script-ohjelmat toimivat sekä Microsoftin kuin Netscapen selaimissa. Vbscript toimi vain Microsoftin selaimessa J(ava)script:n lisääminen web-sivulle Javascript-kielinen koodi kirjoitetaan www-sivulla <SCRIPT> </SCRIPT> -tagien väliin, kuten vbscript-koodi. Koodi voi olla myös erillisessä tiedostossa. Javascript-koodi on C++ kielen kaltaista. Jos selain ei tue Javascript-koodia, niin silloin käytetään koodia, jota selain ei lue. <SCRIPT LANGUAGE="JavaScript"> <! koodia //-->

33 Sivu 33 </SCRIPT> Kuva 43. Esimerkki Javascript-koodista, jossa koodi script-tagien sisällä. Kuva 44. Esimerkki Javascript-koodista, jossa koodi on ulkoisessa tiedostossa (erill.js). Kuva 45. Erillisen tiedoston koodi.

34 Sivu Kommentit ja muuttujat JavaScriptissä voidaan kommentit merkitä kahdella tapaa. Molempia tapoja voidaan käyttää rinnakkain samassa lähdekoodissa. // Tämä on kommentti yhdelle riville /* Tässä on toinen kommentti, joka voi olla usean rivin mittainen */ Javascript-kielessä muuttujat käsitellään vastaavalla tavalla kuin vbscript:ssä. Muuttujan nimi voi olla mikä tahansa, kunhan se ei ole varattu sana. JavaScript tunnistaa isot ja pienet kirjaimet eri merkeiksi, joten tämä poikkeaa vbscript:stä. Nimet eivät saa alkaa numerolla eivätkä ne saa sisältää skandinaavisia kirjaimia. Javascript:ssä muuttujien tietotyypit ovat kokonaisluku, liukuluku, boolean, merkkijono tai objekti. JavaScript käyttää 32-bittisiä kokonaislukuja. Kokonaislukuliteraalit voidaan antaa joko kymmenjärjestelmämuodossa (esim. 123), heksadesimaali muodossa 0x tai 0X -etuliitteen avulla (esim. 0xFA1) tai oktaalimuodossa 0-etuliittellä (esim. 0240). Liukulukuvakiot voivat olla joko tutun muotoisia (1234.0), desimaalipisteellä tai ilman, tai sitten ne voivat olla ns. tieteellisessä notaatiossa kuten 1.2e-10. Boolean-arvot ovat totuusarvoja joko arvoltaan true tai false. Merkkijonot ovat hipsujen ' tai kaksoishipsujen " väliin kirjoitettuja merkkijoukkoja. Merkkijonot voivat sisältää tavallisten merkkien lisäksi escape-merkkejä kuten "\n", joka tarkoittaa rivinvaihtoa sekä "\t", joka tarkoittaa tabulaattorimerkkiä. Objektit konvertoidaan automaattisesti merkkijonoiksi merkkijonojen yhdistelyoperaattoria (+) käytettäessä tostring()-metodin avulla.