JavaScript Eeva Ojanen. 14.3.2006 Eeva Ojanen2 Sisältö Historiaa ja JavaScriptiin liittyviä tekniikoita JavaScriptin toiminta Oliosuuntautuneisuus Asiakaspuolen.

Esitys aiheesta: "JavaScript Eeva Ojanen. 14.3.2006 Eeva Ojanen2 Sisältö Historiaa ja JavaScriptiin liittyviä tekniikoita JavaScriptin toiminta Oliosuuntautuneisuus Asiakaspuolen."— Esityksen transkriptio:

1 JavaScript Eeva Ojanen

2 14.3.2006 Eeva Ojanen2 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)

3 14.3.2006 Eeva Ojanen3 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)

4 14.3.2006 Eeva Ojanen4 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

5 14.3.2006 Eeva Ojanen5 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

6 14.3.2006 Eeva Ojanen6 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)

7 14.3.2006 Eeva Ojanen7 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ä

8 14.3.2006 Eeva Ojanen8 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

9 14.3.2006 Eeva Ojanen9 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

10 14.3.2006 Eeva Ojanen10 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

11 14.3.2006 Eeva Ojanen11 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)

12 14.3.2006 Eeva Ojanen12 Koodin liittäminen HTML:ään Ne ljä tapaa: 1. ja -tunnisteiden väliin dokumentin - tai -osiossa 2.haku ulkoisesta tiedostosta -tunnisteen src -attribuutissa, esim. 3.tapahtumankäsittelijässä määriteltynä HTML- attribuutin arvona (mm. onclick, onmouseover ), esim.

13 14.3.2006 Eeva Ojanen13 Koodin liittäminen (jatkoa) 4.HREF-attribuutin arvona, javascript: - pseudoprotokollatäsmentimellä, esim. olen linkki

14 14.3.2006 Eeva Ojanen14 Esimerkkikoodi yksinkertainen JavaScript koodi näyttää yhden kolmesta siteerauksesta: // ============================================== // Copyright 2004 by CodeLifter.com // Free for all; but please leave in this header. // ============================================== var Quotation = new Array() // JavaScript ei vaadi välttämättä ;-merkkiä metodin loppuun. Quotation[0] = "Asioilla on tapana järjestyä. –Muumimamma”; Quotation[1] = "Kopitellaan" sanoi Tero kun pallon nuotioon heitti"; Quotation[2] = "’Sköp’ sano mummo ku kolmannesta kerroksesta katuun mätkähti."; // selvitetään, montako elementtiä on taulukossa ”Quotation”: var Q = Quotation.length; // valitaan umpimähkäisesti yksi siteerauksista: var whichQuotation=Math.round(Math.random()*(Q-1)); // näytetään valittu siteeraus selaimella funktion avulla: function showQuotation(){ document.write(Quotation[whichQuotation]); } showQuotation(); Lähde: http://www.codelifter.com/main/javascript/randomquote.shtml http://www.codelifter.com/main/javascript/randomquote.shtml

15 14.3.2006 Eeva Ojanen15 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

16 14.3.2006 Eeva Ojanen16 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

17 14.3.2006 Eeva Ojanen17 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

18 14.3.2006 Eeva Ojanen18 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-oliollaXMLHttpRequest XML: yleisesti tiedonsiirtoformaattina

19 14.3.2006 Eeva Ojanen19 Ajaxin käyttötavat www-lomakkeiden laajentaminen yksinkertaisten hakukyselyiden vastausten palauttaminen -> nopeampia, interaktiivisempia ja käytettävämpiä verkkosivuja esim. Google MapsGoogle 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

20 14.3.2006 Eeva Ojanen20 Lopuksi Ajax uhkana Microsoftin ohjelmistoylivallalle sekä Flash- ja Java-teknologioille?

21 14.3.2006 Eeva Ojanen21 KIITOS!