Ohjelmointi

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

JavaScript HTML sivulla: käyttäjän syötteen testaaminen ja käyttäminen ohjelmassa

Harjoitus 4a: käyttäjän syötteen testaaminen

Tee uusi harjoitussivu, jolla tutkitaan onko käyttäjän antama syöttötieto kelvollista. Tee lomake, joka kysyy käyttäjältä "Mihin aikaan heräsit?" seuraavasti:

Mihin aikaan heräsit? :
Tarvitset siis kolme input-kenttää. Lomakeen attribuutiksi aseta name="timepoint". Vastaavasti nimeä input-kentät name="hoursBox" ja name="minsBox". Lisää molempiin syöttökenttiin kokorajoitus eli "size" attribuutti, jonka arvo on 2. Painonapille (button) määrittele toiminta onclick='alert("OK clicked!");'. Testaa miten lomake toimii nyt.

Lisää sitten painonappiin skripti :

<input type="button" value="Update"
onclick='
var hours =
parseInt(document.timepoint.hoursBox.value);
if (hours < 1 || hours > 12) {
alert("Anna lukuarvo väliltä 1 ja 12.");
return;
}
// alert kertoo että vastaus kelpasi ohjelmalle
alert("Tunnit " + hours + " on kelvollinen.");
'/>

ParsInt tuottaa syötteestä kokonaisluvun esim. jos käyttäjä antaa desimaaleja 11.53, JavaScriptin parseInt konvertoi luvun arvoksi 11, jättäen desimaalit huomiotta. Vastaavasti se tekee ylimääräisille kirjaimille (vaikka 5des), parseInt ottaa vain alun eli 5. Funktion lopussa oleva "return" ainoastaan lopettaa sen toiminnan, jos käyttäjän arvot eivät olleet sallituissa rajoissa. Tulostuksessa plussa + yhdistää merkkijonot.
Jatka tekemällä vastaava testi minuuttiarvolle. Muista, että jokaisella kentällä pitää olla eri nimi!

Harjoitus 4b: valintalista

Seuraavaksi tee valintalista, joka tiedustelee "Mikä päivä tänään on?" Listan alku näyttää seuraavalta (laita kaikki viikonpäivät:
<form>
<select name="dayList">
<option value="maanantai">maanantai</option>
<option value="tiistai">tiistai</option>
</select>
</form>

Tehtävä 4

Nyt osaatkin jo tarpeeksi, jotta voit suunnitella oman sovelluksen. Se on sivu, joka kyselee käyttäjän ajankäyttöä ja tutkii, miten paljon aikaa menee erilaisiin toimintoihin. Aloita tekemällä kysymys, mihin aikaan aloitit koulumatkan ja mihin aikaan saavuit perille. Seuraavaksi voit kysyä, milloin kotimatka alkoi ja päättyi. Niiden perusteella voidaan laskea matkoihin käytetty aika ja koulussa vietetty aika. Muita toimia on netissä hengailu, koirien ulkoiluttaminen, kaljalla istuminen, puhelimessa puhuminen, jne. Tämä tehtävä liittyy läheisesti vuokaavioharjoitukseen 5 ja voi myös olla osa lopputyötä (harjoitus 7).
Yksi aika monimutkainen tapa laskea kellonaikojen erotusta löytyy oheisesta linkistä. Älä kopioi tätä suoraan, koska siinä on tarpeetontakin asiaa.

Pari ohjelmointivihjettä:

Muista ensin suunnitella ohjelman toimintalogiikka (esim. vuokaavion avulla), sen pääosat ja modulit (input, processing, output). Testaa kaikki ratkaisusi ja kaikilla eri vaihtoehdoilla, myös virhetilanteilla. Käytössä on selaimen debug-ominaisuus. Tai voit testata paperilla (leiki olevasi tietokone ja käy jokainen vaihe läpi, mitkä arvot muuttujat saavat?) tai lisätä ylimääräistä tulostusta (alert boxes).

Suunnittele ensin, miten aloitat ja mitä elementtejä käytät. Käytä hyväksi harjoituksissa ja luennoilla annettuja esimerkkejä. Sivulla saa olla kuvia.  

Valmiita koodeja lomakkeiden tarkistukseen löytyy helposti esim. form validation.

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |
Päivittänyt: Jaana Holvikivi
Muutettu 4.5.2010