JavaScript Eeva Ojanen

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)

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)

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

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

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)

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ä

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

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

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

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)

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.

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

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:

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

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

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

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

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 -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

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

Eeva Ojanen21 KIITOS!