Transcript JavaScript - streams.metropolia.fi
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.
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