JavaScript

Eeva Ojanen

Sisältö

• • • • • • •

Historiaa ja JavaScriptiin liittyviä tekniikoita JavaScriptin toiminta Oliosuuntautuneisuus Asiakaspuolen JavaScriptin piirteitä Koodin liittäminen HTML:ään Tietoturva Tulevaisuuden näkymiä (JS v.2.0, Ajax)

14.3.2006

Eeva Ojanen 2

• • • • • •

Historiaa

HTML työläästi päivitettävä -> JavaScript mukana 1995 julkaistussa Netscape Navigator 2.0 –selaimessa nykyinen versio 1.5 julkaistu vuonna 1999 Netscape - JavaScript, Microsoft - JScript tulkit ja sen lähdekoodit vapaassa käyttössä Netscapen tulkin kehityksestä ja jakelusta vastaa nykyään Mozilla-säätiö

–

kaksi toteutusta, toinen C kielellä (SpiderMonkey), toinen Javalla (Rhino)

14.3.2006

Eeva Ojanen 3

• • •

Tekniikoita: DOM, ECMAScript

W3C (World Wide Web Consortium)-> dokumenttioliomalli (DOM)

–

piirteet, joita jokaisen selaimen tulisi tukea

–

dokumenttien rakenteelle standardoitu APIn eli ohjelmointirajapinta Ecma International -> ECMAScript –standardi sekä JavaScript, että JScript perustuvat ECMAScript-standardiin, joka puolestaan pohjautuu DOMiin

14.3.2006

Eeva Ojanen 4

• • • •

JavaScript ja Java

ei kevyempi versio Javasta!

nimi alunperin Mocha ja sitten LiveScript > markkinointisyistä JS Javaa paljon yksinkertaisempi komentosarjakieli, jolla ohjataan suoraan WWW-sivuja kuitenkin toimii hyvin yhteistyössä Java-kielen kanssa:

–

sivuille upotettujen Java-sovelmien kontrollointi

–

vuorovaikutus Java-sovelmien kanssa

14.3.2006

Eeva Ojanen 5

• • • •

JavaScriptin toiminta

oliopohjainen yleisohjelmointikieli nk. scriptikieli, jonka koodi tulkitaan suunniteltu liitettäväksi mihin tahansa sovellukseen mutta käytännössä yleisimmin www-sivuilla kolme osaa:

– – –

ydinkieli (upotettu www-selaimiin, syntaksi) asiakaspohjainen JavaScript (komennot suoraan WWW-sivun lähdekoodissa, tulkkaus käyttäjän koneella) palvelinpohjainen JavaScript (liitettynä WWW palvelimeen, tulkkaus palvelimella)

14.3.2006

Eeva Ojanen 6

Mikä olio?

•

JavaScript-kieli olio-orientoitunut

• • •

oliot oikeastaan tapa luokitella samanlaisia asioita koostuvat ominaisuuksista ja toiminnoista eli funktioista yleinen, joten siitä voidaan muodostaa erilaisia ilmentymiä

14.3.2006

Eeva Ojanen 7

• • • • •

Oliopohjaiset ominaisuudet

oliot luodaan ohjelmallisesti liittämällä ominaisuuksia ja toimintoja ”tyhjiin” olioihin, eli luomalla niistä ilmentymiä -> tapahtuu reaaliaikaisesti ohjelman ajon aikana sisältöä ei tarvitse määritellä erikseen avainsana this viitattaessa käsiteltävään olioon voidaan tuhota muistista kesken ohjelman suorituksen asettamalla arvoksi null periytyvyys prototyyppi-oliolla

14.3.2006

Eeva Ojanen 8

•

Valmiit oliot

Sisäänrakennetut oliot: sisältyvät ydinkieleen, käytetään perusosina ohjelmien rakentamisessa

– – –

Date päivämäärien käsittely Math - matemattisten ja tilastollisten lausekkeiden muokkaus String merkkijonojen käsittely

•

HTML-oliot

– –

kaikki WWW-sivujen elementit rakenteeltaan hierarkisia

•

Selainoliot: esittävät selaimen kulloisenkin tilanteen

– –

Window selaimen tai kehyksen käsittely History - selaimen URL historian käsittely

14.3.2006

Eeva Ojanen 9

• • • • •

Asiakaspuolen JS:n piirteitä

dokumentin ulkonäön ja sisällön kontrollointi (Document-olio) selaimen hallinta (selainoliot) vuorovaikutus HTML-lomakkeiden kanssa (Form-olio) vuorovaikutus käyttäjän kanssa – tapahtumankäsittelijät

–

jonkin tietyn tapahtuman esiintyessä ajettavia koodinpätkiä käyttäjän tilan luku ja kirjoitus evästeiden avulla

14.3.2006

Eeva Ojanen 10

• • • •

Muita käyttötarkoituksia (mm.) kuva-animaatio- ja ylirullausefektien (roll-over) luonti (Image-olio) toistojen ja aikaviiveiden asettaminen (Window-olion Timeout() tai Interval() toiminnot) käyttäjän selaimen ja sen version selvittäminen (Navigator-olio) käyttäjän näyttöpäätteen koon ja värisyvyyden selvittäminen (Screen olio)

14.3.2006

Eeva Ojanen 11

Koodin liittäminen HTML:ään

Ne ljä tapaa: 1.

tunnisteiden väliin dokumentin - tai -osiossa 2. haku ulkoisesta tiedostosta

14.3.2006

3.

tapahtumankäsittelijässä määriteltynä HTML attribuutin arvona (mm. onclick, onmouseover ), esim.

Eeva Ojanen 12

Koodin liittäminen (jatkoa)

4. HREF-attribuutin arvona, javascript: pseudoprotokollatäsmentimellä, esim.

olen linkki

14.3.2006

Eeva Ojanen 13

•

Esimerkkikoodi

yksinkertainen JavaScript koodi näyttää yhden kolmesta siteerauksesta: Lähde: http://www.codelifter.com/main/javascript/randomquote.shtml

14.3.2006

Eeva Ojanen 14

• • •

Tietoturva

JavaScript-ohjelmilla ei pysty toteuttamaan vahingoittavia toimenpiteitä:

–

lukemaan tai kirjoittamaan tiedostoja

–

luomaan suoraa yhteyttä muihin verkon päätelaitteisiin voidaan kuitenkin ajaa muita ohjelmistokomponentteja (kuten ActiveX) käyttämällä ns. JavaScript-moottorina viimeaikoinakin eri selaimista löydetty tietoturva aukkoja liittyen JavaScriptillä suoritettaviin haittaohjelmiin -> liittyneet selainten JavaScript-kielen käsittelyn toteutukseen, eivät sinänsä itse kieleen

14.3.2006

Eeva Ojanen 15

Tulevaisuuden näkymiä - v.2.0

• • • •

seuraava versio JavaScript v. 2.0 sekä kielen seloste (specification), että sen käännöskone kirjoitetaan kokonaan uusiksi, takautuva yhteensopivuus huomioiden lisätään luokkia, tyyppejä ja muita ominaisuuksia, joita tyypillisesti staattisissa kielissä tavoitteena täysin standardit täyttävä kieli

14.3.2006

Eeva Ojanen 16

• • •

Tulevaisuuden näkymiä - Ajax

Ajax (Asynchronous JavaScript + XML) = ryhmä tekniikoita, joilla yhdessä kehitetään uusia interaktiivisia verkkosovelluksia suurin osa vuorovaikutteisuudesta selailijan tietokoneelle -> dynaamisten verkkopalvelujen käytön nopeutuminen hyvin alustariippumaton

14.3.2006

Eeva Ojanen 17

• • • •

Ajax-tekniikka

XHTML ja CSS tyylikieli: sisällön ja ulkonäön luonti DOMiin perustuva selainpuolen komentosarjasovellus (JavaScript/JScript): informaation dynaaminen esittäminen ja vuorovaikutus tiedon vaihtaminen asynkronisesti eli tahdistamattomasti www-palvelimen kanssa XMLHttpRequest -oliolla XML: yleisesti tiedonsiirtoformaattina

14.3.2006

Eeva Ojanen 18

• •

Ajaxin käyttötavat

www-lomakkeiden laajentaminen yksinkertaisten hakukyselyiden vastausten palauttaminen

• • •

-> nopeampia, interaktiivisempia ja käytettävämpiä verkkosivuja esim. Google Maps e-mail -asiakassovellusten ja palvelimien interaktiivisuuden lisääminen > kokouksen sijainnin merkintä kalenterisovelluksessa Google Maps kuvaan yrityssovellusten isännöiminen yrityksen verkon ulkopuolelta + sisäänrakennettuja mekanismeja tiedon varmuuskopiointiin ja päivitysten lähettämiseen

14.3.2006

Eeva Ojanen 19

Lopuksi

•

Ajax uhkana Microsoftin ohjelmistoylivallalle sekä Flash- ja Java-teknologioille?

14.3.2006

Eeva Ojanen 20

14.3.2006

KIITOS!

Eeva Ojanen 21