\(\renewcommand{\vec}[1]{\mathbf{#1}} \DeclareMathOperator*{\sijoitus}{\Big/} \newcommand{\eval}[2]{\sijoitus_{\kern-0.7em#1}^{\kern0.7em#2}\!} \)
Tietotekniikka (yläkoulu)
1 Perustaitoja
2 Tekstinkäsittely
3 Taulukkolaskenta
− 4 Ohjelmointi
− 4.3 Javascript (JS)
− 4.3.6 Funktio, tekstikenttä ja painike
+ Valmiita funktioita
5 Internetin maailma

Funktio, tekstikenttä ja painike

Aiemmin tehty kertotaulu (täällä) olisi nettisivulla vähän tylsä, koska se olisi aina sama. Olisi toki huomattavasti kivempi, että käyttäjä voisi valita, minkä luvun kertotaulu esitetään.

Tätä varten tarvitaan käyttöliittymä, eli jonkinlainen rakenne, jonka avulla käyttäjä pystyy välittämään toivomuksensa tietokoneelle. Lisäksi tarvitaan funktio eli metodi. Funktio on ohjelmoinnissa itsenäinen toimintopaketti, joka voi sisältää omia muuttujia. Lisäksi erittäin kätevä ominaisuus funktiolla on se, että sille voidaan syöttää arvoja ja funktio voi myös palauttaa arvon.

Kirjoitetaan esimerkkinä metodi, joka saa parametreinaan (syötettävät arvot) kaksi lukua. Metodi palauttaa saamiensa lukujen tulon. Koodi on alla:

function kerro_luvut(luku1, luku2) { var tulos = luku1 * luku2; return tulos; }

Metodi alkaa aina sanalla function. Yllä olevaa metodia voitaisiin kutsua esimerkiksi seuraavalla tavalla:

document.write(kerro_luvut(4,5));
Yllä oleva lause kirjoittaa siis luvun 20 (= 4 kertaa 5). Muista, että aina kun html-sivulla on JavaScript-koodia, pitää koodin ympärillä olla tagit seuraavaan tapaan:
<script type="text/javascript"> koodi on täällä välissä </script>

Kehitetään kertotaulua niin, että käyttäjä voi syöttää tietokoneelle luvun tekstikentän avulla ja ohjelma palauttaa kyseisen luvun kertotaulun yhtenä tekstinä. Funktio toimii ikäänkuin ohjelman moottorina, joka laskee laskut ja palauttaa valmiin kertotaulun näytölle esitettäväksi.

Käyttöliittymän muodostavat html:n avulla tehtävät painike ja tekstinsyöttöruutu. Nämä siis tehdään html:n avulla, mutta niiden toimintaa ohjataan JavaScriptillä.

Painike ja tekstikenttä ovat ns. lomakkeen (engl. form) kenttiä. Alla on merkkaus, joka luo tekstikentän ja painikkeen. Painikkeessa lukee "Klikkaa". Kun painiketta painetaan, suoritetaan JavaScript-metodi "suoritettava_metodi()", joka täytyy olla kirjoitettuna esimerkiksi nettisivun head-osassa. Huomaa, että metodin nimi voi olla muukin kuin "suoritettava_metodi()". (:

<form id="lomake"> <input type="text" id="tekstikentan_id" size="5" /> <input type="button" value="Klikkaa" onclick="suoritettava_metodi()" > </form>
Pelkän painikkeen voi luoda myös ilman lomaketta seuraavasti:
<button type="button" onclick="suoritettava_metodi()">Painikkeen nimi</button>

Upotetaan JavaScript-koodi HTML-sivuun. Kokonaisuudessaan koodi on lisätiedoissa.


Tänään on lauantai 21.12.2024
Creative Commons -licence Opinnot.net-sivuston sisältöjä saa hyödyntää Creative Commons Attribution-ShareAlike 4.0 International -lisenssin mukaisesti.