CT30A3200 - WWW-sovellukset Luento 3 Jouni Ikonen - Jouni.Ikonen lut.fi Kalvot Arto Hämäläisen kalvojen pohjalta 1 Jouni Ikonen
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 10.9.2012 Jouni Ikonen 2
Lomakkeen välitysmetodien käyttö get-metodissa välitetään lomakkeen tiedot URL-osoitteeseen koodattuna esim. http://www.palvelin.fi/hakem/haku.php?hakuavain=avain1 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 10.9.2012 Jouni Ikonen 3
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) 10.9.2012 Jouni Ikonen 4
HTML-lomakkeen esimerkkikenttiä 10.9.2012 Jouni Ikonen 5 Kokeile: http://www.w3schools.com/html/html_forms.asp
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ää 10.9.2012 Jouni Ikonen 6
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 16262 Virallinen nimi on ECMAScript ja viimeinen versio standardista löytyy http://www.ecma-international.org/publications/standards/ecma-262.htm Microsoftin versio JavaScriptistä on JScript Footer
JavaScriptin käyttö JavaScript -koodia voidaan sisällyttää suoraan sivulle <script type="text/javascript"> <!-- document.write("hello World!") //--> </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 10.9.2012 Jouni Ikonen 8
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
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 10.9.2012 Jouni Ikonen 10
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> 10.9.2012 Jouni Ikonen 11
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) 10.9.2012 Jouni Ikonen 12
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) 10.9.2012 Jouni Ikonen 13
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 10.9.2012 Jouni Ikonen 14
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 10.9.2012 Jouni Ikonen 15
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++; } 10.9.2012 Jouni Ikonen 16
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 10.9.2012 Jouni Ikonen 17
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 10.9.2012 Jouni Ikonen 18
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ä 10.9.2012 Jouni Ikonen 19 Käy JS Tutorial: http://www.w3schools.com/js/default.asp
HTML -tapahtumat http://www.w3schools.com/js/default.asp 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 10.9.2012 Jouni Ikonen 20