torstai 15. lokakuuta 2015

Esimerkkiä koodaamisesta

Tuolla Puheenvuoron puolella on nyt viime aikoina kovasti väitelty siitä, pitääkö tai saako lapsille opettaa ohjelmointia. No nähdäkseni ohjelmointi ei juuri eroa matematiikan tai teknisen työn juttujen opettamisesta, vaikka monia niitäkään ei ehkä tarvita työelämässä. Kaikenlaiseen pieneen ohjelmointiymmärrystä voi kuitenkin käyttää, kuten vaikkapa taulukkolaskentaan. Jos ei muuta, se vähän antaa käsitystä ohjelmistojen toiminnasta, mistä voi olla hyötyä tietokoneen käytössä ja monissa jutuissa pienten asioiden tekemisessä.

Mutta tässä nyt oli oleellista antaa jotain esimerkkejä. Ohjelmointikieliä ja ympäristöjä on valtavasti eri tarkoituksiin. Voidaan tehdä sovellusohjelmia, pelejä, apuohjelmia. Eri tarkoituksiin soveltuvat eri työkalut. Lähden nyt kaikkien käytössä olevasta työkalusta: weppiselaimesta.

Weppiselaimet osaavat jo ihan perustoiminnaltaan näyttää HTML-merkintäkielellä (Hypertext Markup Language) laadittuja sivuja, joilla tekstin lisäksi voi olla jos jonkinlaista grafiikkaa. Monenlaiset tyyliasiat määritellään CSS-kielellä. Vuorovaikutteisuutta sivuille saa käyttämällä JavaScript-kieltä.

JavaScript-kieli löytyykin jokaisesta weppiselaimesta ja siten melkein jokaisesta tietokoneesta, kännykästä ja tabletista.

No niin, aloitetaan tosi yksinkertaisella vuorovaikutuksella:

Tämä hämmästyttävä vuorovaikutus siis saatiin aikaiseksi seuraavalla ohjelmanpätkällä:

<input id="nappi" type="button" value="Paina tätä nappia"
        onclick="painettu()">

<script language="javascript">
function painettu() {
  var nappi = document.getElementById("nappi");
  nappi.value = "Kiitos, että painoit tätä nappia";
}
</script>

En nyt ryhdy opettajaksi ja selitä koodia sen enempää. Kirjoitin tuon suurin piirtein samalla vauhdilla kuin tämän muunkin tekstin, joten helppoa kuin vettä vaan.

Näiden weppisivujen HTML-koodin, joka siis voi sisältää näitä JavaScript-ohjelmanpätkiä, saa näkyviin painamalla näppäinyhdistelmää Ctrl+U.

Kaikki koodi tässä on kirjoitettu Bloggerin HTML-editorilla tekstin oheen.

No tehdään jotain vähän ihmeellisempää. Tehdään vaikka pieni taulukkolaskentasovellus.

Pituutesi (cm):
Painosi (kg):
BMI:
-

Jälleen helppoa kuin mikä, ja tosi käytännöllistä, ainakin naisille. Tätähän kirjoittaa niin nopeasti kuin jaksaa kirjoittaa.

Koodi on siis tuossa:

<table>
  <tr>
    <td>Pituutesi (cm):</td>
    <td><input id="pituus" type="text" onchange="laske()"></td></tr>
  <tr>
    <td>Painosi (kg):</td>
    <td><input id="paino" type="text" onchange="laske()"></td></tr>
  <tr>
    <td>BMI:</td><td>
    <div id="bmi" style="text-weight: bold">-</div></td>
    <td><input id="nappi" type="button" value="Laske"
                        onclick="laske()"></td></tr>
</table>

<script language="javascript">
  function laske() {
    var pituusKentta = document.getElementById("pituus");
    var painoKentta = document.getElementById("paino");
    var tulosKentta = document.getElementById("bmi");

    // Lasketaan
    bmi.innerHTML = Math.floor(painoKentta.value /
        ((pituusKentta.value/100)*(pituusKentta.value/100)) * 100)/100;
  }
</script>

Mutta tässä oli nyt puhetta lasten kouluopetuksesta. Tehdään siten jotain kivaa mistä lapsetkin tykkäisivät.

Otetaan vaikka kissa.

Tässä siis on yhdistetty animoituun kuvaan liikkumislogiikka. Joo, on se vähän kömpelö, mutta tälleen nopeasti tehtynä.

Laitetaan vielä nappi millä voi vuorovaikuttaa sen kanssa:

Nyt ohjelma alkaa olla jo vähän isompi:

<div style="width: 100%; height: 180px;">
  <img id="kissa" border="0"
       src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqxkTID079f_fo1l7oyFeP-LGaM4QyTJ3STlk_yMxuiGIJqmIP1xn22cpMPlDcAsRVOs9EPrv-M6piupx0rydlM4lYtoMXxMsbub-ikqZGmo1hM3XYkLKXbpewRsIXwOJcIu1kCozeXGM_/s320/cat_walk_practise_by_uppun.gif"
       style="position: absolute;"/>
</div>

<script language="javascript">
var kissan_paikka = 0;
var kissan_suunta = +1;

function liiku() {
    var kissa = document.getElementById("kissa");

    // Asetetaan kissan paikka
    kissa.style.left = kissan_paikka + "px";

    // Asetetaan kissan suunta
    var skaalaus = kissan_suunta;
    kissa.style.MozTransform = "scaleX(" + skaalaus + ")";
    kissa.style.transform = "scaleX(" + skaalaus + ")";
    kissa.style.oTransform = "scaleX(" + skaalaus + ")";
    kissa.style.webkitTransform = "scaleX(" + skaalaus + ")";
    kissa.style.msTransform = "scaleX(" + skaalaus + ")";

    // Liikutetaan kissaa
    kissan_paikka += kissan_suunta * 5;

    // Vaihdetaan kissan suuntaa tarpeen mukaan
    if (kissan_suunta == 1 && kissan_paikka > 100) {
      kissan_suunta = -1;
      kissan_paikka = 200; // Korjaa hännän pituuden verran
    } else if (kissan_suunta == -1 && kissan_paikka < 100) {
      kissan_suunta = 1;
      kissan_paikka = 0; // Korjaa hännän pituuden verran
    }
}

// Suoritetaan askel 50 millisekunnin välein
setInterval(liiku, 50);
</script>
<div style="width: 100%; height: 180px;">

<input id="kissanappi" type="button" value="Pikkukissa"
      onclick="kissankoko()">

<script language="javascript">
var isokissa = 1;
function kissankoko() {
    var kissa = document.getElementById("kissa");
    var kissanappi = document.getElementById("kissanappi");

    if (isokissa) {
        kissa.style.width = "160px";
        kissa.style.height = "91px";
        kissanappi.value = "Iso kissa";
    } else {
        kissa.style.width = "320px";
        kissa.style.height = "182px";
        kissanappi.value = "Pikkukissa";
    }
    isokissa = 1 - isokissa;
}
</script>

Ja kaikki pienet hobitit taputtivat karvaisia kämmeniään.

Ei kommentteja: