ICT1TN004. Skriptikielet. Heikki Hietala

Transkriptio

1 Skriptikielet Heikki Hietala

2 Skriptikielet Skriptikielet eli komentosarjakielet ovat ohjelmointikieliä, joilla automatisoidaan tehtäviä Toisaalta niitä käytetään käyttöjärjestelmälle ominaisia tehtäviä ilman, että ojelma käännetään konekielelle suoritettava ohjelma on edelleen ihmisen luettavassa muodossa Makrokielet ovat hyvin samankaltaisia kuin skriptit, mutta tavoitteena niissä on suorittaa joukko tehtäviä joukolle tiedostoja tai dataa Nykyään skriptikieliin luetaan myös kielet, jotka eivät suorita yhtään komentoa, mutta jotka voivat suorittaa käyttöjärjestelmälle ominaisia tehtäviä. Näitä ovat mm. Ruby, Python, PERL, TCL ja PHP 2

3 Jako kahteen Kaikki skriptit suoritetaan joko palvelimella (server) tai asiakaskoneessa (client) Asiakaspäässä suorittaminen ei vaadi muuta kuin selaimen, jossa on tuki käytettävälle skriptikielelle Palvelimella suorittaminen vaatii palvelimeen käsiksi pääsemistä ja asennustöitä, esimerkiksi PHP-tulkin asennusta Tällä kurssilla keskitytään asiakaspuolen skripteihin Asiakaspäässä suoritetaan useimmiten JavaScriptiä 3

4 As. puolen skriptien käyttökohteita Tiedon julkaiseminen työasemasta Aika, kellonaika, ip-osoite Lomakkeiden syötteiden tarkastaminen Muuten lomake pitää lähettää palvelimelle tarkastettavaksi Virheelliset arvot havaitaan Arvot palautetaan Vie aikaa ja vaatii pääsyn palvelimelle Pienet sovelmat Laskin, muuntimet jne 4

5 As. puolen hyödyt ja haitat + ei edellytä palvelimelle pääsyä + toimii kaikissa systeemeissä, joissa on tuki skriptille Esim. JavaScript toimii kännyköitä myöten + esimerkkejä saatavana runsain mitoin - tietoturva Kuka tahansa näkee koodin Useimmiten tästä ei ole haittaa - harvinaisissa tapauksissa skriptien käyttö voi mahdollistaa todellisia tietoturvaongelmia Ennen JS:n käyttöä on tärkeää hahmottaa, että asiakaspuolen skriptejä tulisi käyttää siten, ettei niiden myötä vaarannu verkkojulkaisujen oleelliset toiminnot, kuten linkitys tai asiasisällön saavutettavuus. 5

6 JavaScript JavaScript on Netscapen kehittämä oliopohjainen ohjelmointikieli Tarvitsee toimiakseen ympäristön, jossa on JS-tulkki Suotuisat puolet: Riippumaton käyttöjärjestelmästä Kevyt Tehokas Yksinkertainen syntaksi Ei tarvitse editoria, sillä kaikki koodi on ASCII-tekstiä Kommentointi on mahdollista, jopa suositeltavaa: /* Tämä on kommentti. */ JavaScriptaukseen löytyy verkosta huimat määrät materiaalia Lähde: 6

7 JavaScriptin rakenne Tietotyypit Numerot Kokonaisluvut (+/-) Liukuluvut, desimaalierottimena piste. Merkkijonot (strings) Erottimena joko tai merkit Lisäksi \n - rivinvaihto * \t - sarkain * \' - heittomerkki * \" - lainausmerkki * \\ - kenoviiva Kenoviiva poistaa merkin erikoismerkityksen Totuusarvot (boolean) Erikoisarvot (null ja undefined) 7

8 jatkoa Muuttuja (variable) on tiedon tallennuspaikka tietokoneen muistissa. Muuttujat mahdollistavat tietojen käsittelyn ja ohjelman suoritusaikaisen muuttamisen näiden symbolisien nimien perusteella. Muuttujien nimet (identifiers) tulee alkaa kirjaimella, alaviivalla tai dollarimerkillä ja ne saavat vielä edellisten merkkien lisäksi sisältää numeroita. Skandinaaviset kirjaimet ovat teoriassa sallittuja, mutta yhteensopivuussyistä kannattaa käyttää vain ASCII-kirjaimia (A-Z, a-z). Alaviiva on tarpeen välilyönnin paikalla Muuttujat kannattaa kuitenkin nimetä niin, että ne helpottavat koodin luettavuutta ja ymmärrettävyyttä. Globaalit muuttujat toimivat kaikkialla Lokaalit muuttujat vain sen funktion sisällä, missä se luodaan 8

9 Varatut sanat 9

10 Muuttujien käyttö Muuttujat esitellään avainsanalla var Var laskuri; Var laskuri = 0; var $keskiarvo = 4.2; // tietotyyppiä numero var URL_prefix = ' ; // merkkijono var _javatuki = false; // totuusarvo var Super; // undefined var S123 = null; // null Mikä seuraavissa on pielessä? var munluku = 1,2; var 007 = 'Bond'; var mun luku = '7'; var super; 10

11 Lauseet ja lohkot Lause (statement) on omalle rivilleen kirjoitettava yksittäinen toiminto ohjelmassa. Lause yhdistää kieliopilliset elementit yhdeksi ajatukseksi. JS-syntaksi sallii lauseiden päättämisen rivinvaihdolla, mutta useastakin syystä kannattaa merkitä lauseiden päättyminen eksplisiittisesti, eli puolipisteellä: var MunLuku = 666 //implisiittinen lauseen päättyminen Var MunLuku = 666; //eksplisiittinen lauseen päättyminen Lohkot sisältävät useita lauseita ja ne erotetaan aaltosuluilla: { //lohko alkaa //lause tai lauseet lohkon sisällä; } //lohko päättyy 11

12 Lausekkeet Lausekkeetkin ovat lauseita. Lauseke (expression) on mikä tahansa yhdistelmä muuttujia, operaattoreita, tietotyyppejä ja lausekkeita, joka tuottaa yksittäisen tuloksen, kuten numeron, merkkijonon, tai totuusarvon. Lausekkeet voidaan jakaa kahteen tyyppiin: operaattorilausekkeet - yksinkertaisesti vain tuottavat tuloksen sijoitusoperaattorilausekkeet - sijoittavat tuloksen muuttujaan 3 * 4; // operaattorilauseke tuottaa tuloksen 12 Tulos=3*4; // sijoitusoperaattorilauseke sijoittaa tuloksen muuttujaan 12

13 Aritmeettiset operaattorit Suorittavat laskutoimituksia Palauttavat numeerisen arvon Jaetaan binäärisiin ja unaarisiin operaattoreihin Binäärisissä on kaksi operandia, esim. summa + 5 Yhteen-, vähennys-, kerto- ja jakolaskut Unaarisissa on yksi, esimerkiksi summa++ Esilisäysoperaattori: +summa, kasvattaa summaa yhdellä Jälkilisäysoperaattori: summa++, palauttaa muuttujan arvon ja sitten kasvattaa yhdellä Samat esivähennys ja jälkivähennys -negaatio 13

14 Sijoitusoperaattorit Sijoitusoperaattorit sijoittavat oikeanpuolisen operandin (tai lausekkeen) arvon vasemmanpuoliseen operandiin (muuttujaan). Kaikki sijoitusoperaattorit ovat perussijoitusoperaattorin (=) ja aritmeettisten operaattoreiden lyhenteitä. Jos muuttuja tulos on 12, niin Perussijoitusoperaattori tulos = tulos tarkoittaa että tulos on 12 Yhteenlaskusijoitusoperaattori += Tulos+=5 on siis 17 Vähennyslaskusijoitusoperaattori -= Tulos -=5 on siis 7 Kertolaskusijoitusoperaattori *= Tulos *=5 on siis 60 Jakolaskusijoitusoperaattori /= Tulos /=5 on siis 2,4 Jakojännössijoitusoperaattori %= Tulos %=5 on 2 14

15 Vertailuoperaattorit == Löysä yhtäläisyysoperaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos=='12' /*Palauttaa arvon true (luku 12 vastaa merkkijonoa '12').*/!= Löysä erilaisuusoperaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos!='12' /*Palauttaa arvon false (luku 12 vastaa merkkijonoa '12').*/ === Tiukka yhtäläisyysoperaattori. Ei tyyppimuunnosta. Tulos==='12' /*Palauttaa arvon false (luku 12 ei vastaa merkkijonoa '12').*/!== Tiukka erilaisuusoperaattori. Ei tyyppimuunnosta. Tulos!=='12' /*Palauttaa arvon true (luku 12 ei vastaa merkkijonoa '12').*/ 15

16 jatkuu > Suurempi kuin -operaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos>'12' /*Palauttaa arvon false (luku 12 ei ole suurempi kuin merkkijono '12').*/ < Pienempi kuin -operaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos<'12' /*Palauttaa arvon false (luku 12 ei ole pienempi kuin merkkijono '12').*/ >= Suurempi tai yhtä suuri kuin -operaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos>='12' /*Palauttaa arvon true (luku 12 on yhtä suuri kuin merkkijono '12').*/ <= Pienempi tai yhtä suuri kuin -operaattori. Tarvittaessa yritetään tyyppimuunnosta. Tulos<='12' /*Palauttaa arvon true (luku 12 on yhtä suuri kuin merkkijono '12').*/ 16

17 Loogiset operaattorit Loogiset operaattorit palauttavat totuusarvon Kahdenlaisia, binäärisiä ja unaarisia && Looginen ja operaattori (binäärinen). Palauttaa true-arvon, mikäli kummatkin operandit evaluoituvat tosiksi, muuten palauttaa false-arvon. -Tulos < 0 && Tulos <= 11 /*Palauttaa false-arvon, sillä toinen lauseke on epätosi.*/ Looginen tai operaattori (binäärinen). Palauttaa true-arvon, mikäli vähintään toinen operandi evaluoituu todeksi, muuten palauttaa false-arvon. -Tulos < 0 Tulos <= 11 /*Palauttaa true-arvon, sillä ensimmäinen lauseke on tosi.*/! Looginen ei operaattori (unaarinen). Palauttaa käänteisen totuusarvon.!tulos <= 11 /*Palauttaa true-arvon, sillä ilman operaattoria lauseke on epätosi.*/ Lähde: 17

18 Skriptin sijoittaminen sivulle JavaScript (jatkossa JS) voidaan tuoda dokumenttiin joko tuomalla koodi ulkopuolisesta JS-tiedostosta tai upottamalla koodi suoraan elementtien (ja/tai attribuuttien) sisällöksi. Useimmiten käytetään SCRIPT-elementtiä, joka mahdollistaa joko koodin tuonnin tai sen upottamisen. SCRIPT-elementtejä voidaan sijoittaa sekä HEAD-, että BODY-elementtien lapsiksi, eikä niiden esiintymiskertoja ole rajattu. Koodin tuonti ulkopuolisesta JS-tiedostosta kannattaa, sillä dokumenttien latautuminen nopeutuu, mikäli samaa scriptiä käytetään toisaallakin scriptien päivittäminen helpottuu, kun usein käytetyt koodit löytyvät samasta paikasta merkkauskielen ylläpito helpottuu, kun scriptit eivät häiritse luettavuutta 18

19 Esimerkki SCRIPT-elementtiesimerkki dokumentin rakenteessa on HEAD-elementin lapsielementti tuontisyntaksi: <script type="text/javascript" charset="iso " src="heips.js"> /* Elementin sisältö jätetään tyhjäksi.*/ </script> Kolme attribuuttia: Pakollisella TYPE-attribuutilla ilmoitetaan scriptin sisältötyyppi CHARSET-attribuutilla ilmoitetaan ulkoisessa resursissa käytetty merkistö; nyt länsi- ja pohjoiseurooppalainen Latin-1. SRC-attribuutilla ilmoitetaan JS-tiedoston nimi ja sijainti; nyt dokumentin kanssa samassa hakemistossa (kansiossa) sijaitseva heips.js. 19

20 Heips.js - sisältö /* * Kutsutaan window-olion alert-metodia, * jota käytetään välittämään viestejä * käyttäjälle. Metodin viestit vaativat * käyttäjältä ainoastaan kuittauksen. */ window.alert('hei maailma!'); Näin luodaan valintaikkuna ja kirjoitetaan valintaikkunaan Hei maailma 20

21 Sijoittaminen script-elementillä XHTML-tiedostossa voidaan sijoittaa näin: <script type="text/javascript" xml:space="preserve"> //<![CDATA[ merkataan koodi XHTML-yhteensopivaksi window.alert('hei maailma!'); // CDATA-merkintä loppuu!]]> </script> 21

22 Sijoittaminen tapahtumana JavaScriptiä voidaan suorittaa silloin kun selain tunnistaa jonkin tapahtuman, yleensä hiiren käytön Tässä napsautetaan hiiren painiketta tekstikappaleen päällä: <p onclick="window.alert('hei maailma!');"> Tämä on esimerkkikoodi elementistä, johon on yhdistetty tapahtuma-attribuutti.</p> 22

23 Esimerkki: Lomakkeen kentän fokus Kun lomake ladataan, olisi kohteliasta saada lomakkeen ensimmäinen kenttä aktiiviseksi. Kolme osaa: ensin headiin koodi, sitten bodyyn kutsu, ja lopuksi <head> <script language="javascript">     </script> </head> <body onload="toform()"> //kun body latautuu, niin fokus siirtyy koodissa määrättyyn kenttään 23

24 Esimerkki: lomakkeen kentän syötteen tarkistus, sähköpostiosoite <head> <script type="text/javascript"> <!-- Begin /* This script and many more are available free online at The JavaScript Source!! Created by: Anita Sudhakar :: */ function echeck(str) { var at="@" var dot="." var lat=str.indexof(at) var lstr=str.length var ldot=str.indexof(dot) if (str.indexof(at)==-1){ alert("invalid ID") return false } if (str.indexof(at)==-1 str.indexof(at)==0 str.indexof(at)==lstr){ alert("invalid ID") return false } 24

25 jatkuu } if (str.indexof(dot)==-1 str.indexof(dot)==0 str.indexof(dot)==lstr){ alert("invalid ID") return false } if (str.indexof(at,(lat+1))!=-1){ alert("invalid ID") return false } if (str.substring(lat-1,lat)==dot str.substring(lat+1,lat+2)==dot){ alert("invalid ID") return false } if (str.indexof(dot,(lat+2))==-1){ alert("invalid ID") return false } if (str.indexof(" ")!=-1){ alert("invalid ID") return false } return true 25

26 Viimeinen sivu lähdekoodia function ValidateForm(){ var id=document.frmsample.txt if (( id.value==null) ( id.value=="")){ alert("please Enter your ID") id.focus() return false } if (echeck( id.value)==false){ id.value="" id.focus() return false } return true } // End --> </script> </head> 26

27 Kuinka tätä käytetään Bodyssa  <body> <form name="frmsample" method="post" action="#" onsubmit="return ValidateForm()"> <p>enter an Address : </p> </form> <input type="text" name="txt "> <input type="submit" name="submit" value="submit"> 27

28 28