Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi

Koko: px

Aloita esitys sivulta:

Download "Luento 3. Jouni Ikonen - Jouni.Ikonen lut.fi"

Anni Lehtinen
8 vuotta sitten
Katselukertoja:

1 CT30A WWW-sovellukset Luento 3 Jouni Ikonen - Jouni.Ikonen lut.fi Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen

2 HTML-lomakkeet HTML-lomakkeiden avulla voidaan WWW-sovelluksessa hakea käyttäjän syötteitä Lomake muodostetaan <body>-elementin sisään käyttämällä <form>-tagia. Lomakkeen aloitustagin attribuutti "action" määrittelee, mille sovellukselle lomakkeen tiedot välitetään, kun lomake lähetetään Lomakkeen "method"-attribuutti määrittelee, miten tiedot välitetään kutsuttavalle sovellukselle get-metodi lisää lomakkeen tiedot URL-osoitteeseen sovelluksen osoitteen perään?-merkillä erotettuna post-metodilla tietoja ei lisätä URL-osoiteeseen, tiedot lähetetään HTTP-pyynnössä viestin yhteydessä Lomakkeen kenttien tiedot välitetään nimi=arvo -pareina sovellukselle Jouni Ikonen 2

määrittelee, miten tiedot välitetään kutsuttavalle sovellukselle get-metodi lisää lomakkeen tiedot URL-osoitteeseen sovelluksen osoitteen perään?

3 Lomakkeen välitysmetodien käyttö get-metodissa välitetään lomakkeen tiedot URL-osoitteeseen koodattuna esim. GET-metodia käyttäen voidaan tallentaa pyyntö kirjanmerkkeihin tai välittää se hyperlinkkinä, joten se soveltuu hyvin tietojen hakemiseen post-metodissa käytetään, kun ei haluta näyttää URL-osoitteessa lomakkeen tietoja, esimerkiksi tietovaraston sisältämien tietojen päivitystä post-metodin avulla tehtävää pyyntöä ei voi tallentaa kirjanmerkkeihin (tietyissä selaimissa voi olla ominaisuuksia) tai välittää linkkinä get-metodia tulisi käyttää, kun lomakkeen lähetys ei aiheuta näkyviä muita toimintoja (esim. tietokantaan lisäystä), muulloin post-metodia Jouni Ikonen 3

ei haluta näyttää URL-osoitteessa lomakkeen tietoja, esimerkiksi tietovaraston sisältämien tietojen päivitystä post-metodin avulla tehtävää pyyntöä ei voi tallentaa kirjanmerkkeihin

4 HTML-lomakkeen kenttätyypit HTML-lomakkeelle on määritelty erilaisia kenttätyyppejä text on tekstikenttä textarea on monirivinen tekstiruutu password on tekstikentän kaltainen kenttä, johon syötetty teksti näkyy salattuna selaimen ruudulla checkbox -kenttä sisältää valintaruutuja, joista voidaan valita kuinka monta tahansa radio on valintaryhmä, josta voidaan valita vain yksi select muodostaa valikon, jonka kohdat määritellään option -elementeillä Lomakkeen käsittelyyn on määritelty kaksi kenttätyyppiä submit -kenttä sisältää painikkeen, josta painamalla lomakkeen tiedot lähetetään reset -painiketta painettaessa lomakkeen kentät palautetaan alkuperäiseen muotoonsa Lisäksi lomake voi sisältää piilotettuja hidden-kenttiä, joita ei näytetä selaimen ruudulla, mutta jotka otetaan mukaan käsittelyssä Samaan ryhmään kuuluvat kentät voi ryhmitellä fieldset-elementin sisään, labelelementtiä käytetään lisäämään kuvaus lomakkeen kentälle, joissain kentissä kuvaus on mukana (painikkeet), lomakkeen kentän title -attribuutti sisältää kentän otsikkotiedon (näytetään esim. kun hiiren osoitin viedään kentän ylle) Jouni Ikonen 4

valikon, jonka kohdat määritellään option -elementeillä Lomakkeen käsittelyyn on määritelty kaksi kenttätyyppiä submit -kenttä sisältää painikkeen, josta painamalla lomakkeen tiedot lähetetään reset

5 HTML-lomakkeen esimerkkikenttiä Jouni Ikonen 5 Kokeile:

6 JavaScript lyhyesti JavaScript on suunniteltu lisäämään interaktiivisuutta HTML-sivuille JavaScript on tavallisesti sisällytetty HTML-sivuihin voidaan myös linkittää muista tiedostoista JavaScript on tulkattava kieli (sitä ei tarvitse kääntää konekielelle ennen suoritusta) JavaScript-funktioita voidaan ajaa HTML:n elementteihin liitettyjen tapahtumien seurauksena JavaScript on olioperustainen kieli HTML:n elementit esitetään HTML Document Object Model - mallin mukaisina olioina EI luokkapohjaista perintää Jouni Ikonen 6

suoritusta) JavaScript-funktioita voidaan ajaa HTML:n elementteihin liitettyjen tapahtumien seurauksena JavaScript on olioperustainen

7 JavaScript historia Alun perin Netscapen kehittämä LiveScript nimellä Netscape ja Sun jatkoivat yhteisprojektina 1995 ja nimesivät JavaScriptiksi European Computer Manufacturers Association standardoinut nimellä ECMA-262. Myös ISO standardi ISO Virallinen nimi on ECMAScript ja viimeinen versio standardista löytyy Microsoftin versio JavaScriptistä on JScript Footer

8 JavaScriptin käyttö JavaScript -koodia voidaan sisällyttää suoraan sivulle <script type="text/javascript">  </script> Mikäli koodi on <head>-osassa, se suoritetaan, kun funktiota kutsutaan Mikäli koodi on <body>-osassa, se suoritetaan, kun sivu ladataan ulkoisen JavaScript-tiedoston voi linkittää sivuun myös src-attribuutin avulla: <script type="text/javascript" src="xxx.js"></script> HTML 5:ssa scriptin oletustyyppi on type="text/javascript", joten <script> src="xxx.js"></script> on ok Jouni Ikonen 8

kun sivu ladataan ulkoisen JavaScript-tiedoston voi linkittää sivuun myös src-attribuutin avulla: <script type="text/javascript" src="xxx.

9 JavaScriptin käyttö Erikoiskommentit  piilottaa JavaSciptin selaimelta, sekä html oikeellisuuden tarkistusohjelmilta. Alkeistietotyypit Number, String, Boolean, Undefined, Null Math objekti tarjoaa floor, round, max, min, cos, tms. funktiot. Math.round(x) Number objekti tarjoaa mm. MAX_VALUE, MIN_VALUE, POSITIVE_INFINITY, NEGATIVE_INFINITY, PI. Esim. Number.MAX_VALUE. Jos tulos on liian suuri niin muuttuja saa arvon NaN, joka voidaan testata isnan() funktiolla. Footer

Alkeistietotyypit Number, String, Boolean, Undefined, Null Math objekti tarjoaa floor, round, max, min, cos, tms.

10 JavaScript -funktiot Ajettavat funktiot määritellään <script>-määritysten sisään: function funktionnimi(argumentit) { var muuttuja; muuttuja = arvo; // kommentti } funktiossa määriteltyä muuttujaa voi käyttää vain siinä funktiossa Jouni Ikonen 10

{ var muuttuja; muuttuja = arvo; // kommentti } funktiossa

11 if... else if... else: if (ehto) { jos ehto tosi } else { muuten } esim. <script> var d=new Date() var time=d.gethours() if (time==11) { document.write("lounasaika") } else { document.write("ei ole lounasaika") } </script> Jouni Ikonen 11

12 JavaScript-silmukat JavaScriptissä mahdollista tehdä for- ja while-silmukoita for (var=startvalue;var<=endvalue;var=var+increment) { code to be executed } while (var<=endvalue) { code to be executed } do { code to be executed } while (var<=endvalue) Jouni Ikonen 12

13 JavaScript-operaatiot aritmeettiset (suluissa mainittu lopputulos) + yhteenlasku x=3;y=2; z=x+y; (z = 5) - vähennyslasku x=3;y=2; z=x+y; (z = 1) * kertolasku x=3;y=2; z=x*y; (z = 6) / jakolasku x=3;y=2; z=x/y; (z = 1.5) % jakojäännös x=3;y=2; z=x%y; (z = 1) ++ lisäys x=3; x++; (x = 4) -- vähennys x=3; x--; (x = 2) Jouni Ikonen 13

z=x*y; (z = 6) / jakolasku x=3;y=2; z=x/y; (z = 1.

14 Sijoitusoperaatiot sijoitusoperaatiot = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y Jouni Ikonen 14

15 Vertailuoperaatiot vertailuoperaatiot == on yhtä kuin 5==8 on epätosi === on yhtä kuin (arvo ja tyyppi)!= erisuuri 5!=8 on tosi > suurempi kuin 5>8 on epätosi < pienempi kuin 5<8 on tosi x=5; y="5"; x==y on tosi, x===y on epätosi >= suurempi tai yhtä suuri kuin <= pienempi tai yhtä suuri kuin 5>=5 on tosi, 5>=8 on epätosi 5<=5 on tosi, 5<=8 on tosi Jouni Ikonen 15

=8 on tosi > suurempi kuin 5>8 on epätosi < pienempi kuin 5<8 on tosi x=5; y="5"; x==y on

16 JavaScript-oliot JavaScript sisältää monia sisäänrakennettuja olioita, mm. String olioilla on jäsenmuuttujia ja metodeja olio.ominaisuus = 0; olio.metodi(); x = olio.ominaisuus; function metodi() { this.ominaisuus++; } Jouni Ikonen 16

17 HTML -tapahtumat Tapahtumat (event) ovat toimintoja, jotka voidaan huomata JavaScript -skripteistä. Jokaisella HTML-sivulla on tiettyjä tapahtumia, joiden perusteella voidaan suorittaa määrätty JavaScript -koodi tapahtuman liittäminen elementtiin ja suoritettavan JavaScriptin ajo määritetään lisäattribuutilla, esim. <p onclick="pclicked()">kappale</p> Esimerkkejä havaittavista tapahtumista: hiiren painallus sivun tai kuvan latautuminen hiiren osoittimen vieminen elementin ylle HTML-lomakkeen kentän valinta HTML-lomakkeen lähetys näppäimistön näppäimen painallus Jouni Ikonen 17

ja suoritettavan JavaScriptin ajo määritetään lisäattribuutilla, esim.

18 HTML-tapahtumia Dokumenttiin liittyvät tapahtumat onload unload onchange onsubmit onreset onselect onfocus onblur Dokumentti ladataan Käyttäjä poistuu sivulta Lomakkeeseen liittyvät tapahtumat lomakkeen elementti muuttuu lomake lähetetään lomake nollataan lomakkeen kenttä valitaan lomakkeen kenttä kohdistetuksi lomakkeen kenttä menettää kohdistuksen Jouni Ikonen 18

tapahtumat lomakkeen elementti muuttuu lomake lähetetään lomake nollataan lomakkeen kenttä

19 onkeydown onkeypress onkeyup onclick ondblclick onmousedown onmouseup onmousemove onmouseover onmouseout Näppäimistöön liittyvät tapahtumat näppäintä painetaan näppäintä painetaan ja vapautetaan näppäin vapautetaan Hiireen liittyvät tapahtumat hiiren näppäintä painetaan ja vapautetaan hiiren näppäimen kaksoispainallus, "tuplaklikkaus" hiiren näppäintä painetaan hiiren näppäin vapautetaan hiiren osoitinta liikutetaan hiiren osoitin viedään elementin päälle hiiren osoitin viedään pois elementin päältä Jouni Ikonen 19 Käy JS Tutorial:

hiiren näppäimen kaksoispainallus, "tuplaklikkaus" hiiren näppäintä painetaan hiiren näppäin vapautetaan hiiren osoitinta liikutetaan hiiren

20 HTML -tapahtumat Miten merkkijonon ja numeroiden yhdistäminen toimii? Miten merkkijonon muuttaminen numeroksi voidaan tehdä ja toisin päin? switch case Miten toimii taulukot (Array) Millä tavoin voidaan luoda? Miten läpikäydään? Voidaanko niille tehdä muuta? oman olion luonti regular expressions Jouni Ikonen 20

Miten merkkijonon muuttaminen numeroksi voidaan tehdä ja toisin päin?

Samankaltaiset tiedostot

Javascript 2: Ohjelmointikielen ominaisuudet. Jaana Holvikivi Metropolia

Javascript 2: Ohjelmointikielen ominaisuudet Jaana Holvikivi Metropolia HTML - sivun rakenne ja osiot HTML HEAD STYLE SCRIPT STYLEsheet Javascript file BODY Javascript