Ohjelmointi

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

JavaScript6: HTML dokumentin DOM -malli, merkkijonot, taulukot, ynnä muuta

6a: Tapahtumankäsittely, funktio ja DOM

Kokeile seuraavaa ohjelmaa:

<body onload="document.getElementById('myButton').onclick = new Function('alert(\'ouchhhh\')');">
<p>text</p>
<form>
<input type="button" id="myButton" value="Ei saa koskea">
</form>

Vertaa seuraavaan:

<html>
<head>
<script type="text/javascript">
function init(){
document.getElementById("chunk").innerHTML = "Bye the bye";
}
</script>
</head>

<body onload="init()">
<h1> Javascript harjoittelua </h1>
<p id="chunk">
Alkuperäinen teksti
</p> </body>
</html>

Aja tämä ohjelma ja tutki Firefox DOM inspectorin avulla miksi se toimii näin.

6b: Radionappuloista

Katso esimerkki radionappuloiden käytöstä ja tuloksen kirjoittamisesta input-kenttään. Sovella sitä.

6c: Merkkijonot: esimerkkejä käsittelystä

Merkkijonomuuttuja määritellään antamalla sen arvo. Useimmissa tapauksissa muuttujasta tuleekin merkkijono, jollei se ole selkeästi lukuarvo. Katso alla olevia esimerkkejä, ja kokeile käyttöä omissa ohjelmanpätkissä.
var merkkijono = "Jotain tekstiä ja vaikka numeroita 333";

Merkkijonoilla on ominaisuuksia kuten pituus.
var pituus = merkkijono.length;
Minkä arvon pituus saa, kokeile? Kokeile myös seuraavia skriptin sisällä:

merkkijono2 = merkkijono.toUpperCase();

document.write(merkkijono2.bold());

Kokeile metodeja, joilla voidaan käsitellä merkkijonoja kuten poimia sieltä yksittäisiä merkkejä tai osa jonosta:

mj = "kissa"; toinen ="la"
mj.toUpperCase()
mj.toLowerCase();

mj.charAt(0)
mj.substring(0,3)

yhdistäminen: mj + toinen

6d: Taulukot: esimerkkejä

Tässä luodaan järjestetty taulukko (lista) ja tulostetaan sen jäsenet järjestyksessä alkaen ensimmäisestä alkiosta 0:

var pelaajat = new Array("Valdo", "Vesa", "Pirjo", "Harri");
var i;

for(i = 0; i < pelaajat.length; i++)
document.write(i + 1 + ". pelaaja on " + pelaajat[i] + "<br/>");

Assosiatiivinen taulukko määritellään nimeämällä taulukon alkiot. Ne eivät saa mitään järjestystä:

var my_cars= new Array();
my_cars["cool"]="Porsche";
my_cars["family"]="Toyota";
my_cars["big"]="lorry";

Tai seuraavasti

var maat = {Suomi: "Helsinki", Venäjä: "Moskova", Ruotsi: "Tukholma", Tanska: "Kööpenhamina"};

for(var i in maat)
document.write(i + ". maan pääkaupunki on " + maat[i]);

Käyttäen hyväksi taulukoita kirjoita ohjelma, joka tulostaa HTML-taulukkoon maiden nimet, pääkaupungit, asukasluvut, tms. kiinnostavaa tietoa maasta. Moniulotteiset taulukot on esitelty Ohjelmointioppaassa.

Merkkijonon alkioiden laskenta alkaa myös nollasta samoin kuin taulukoiden. Aikaisemmin tutustuit satunnaislukugeneraattoriin Math.random. Käytä sitä apuna esimerkiksi siten, että

6e: DOM jatkuu

www.w3schools.com esittää esimerkin siitä miten a-elementin eli linkin kohdetta ja nimeä voi muuttaa DOM -osoitusten avulla. Kokeile tätä ja vaihda osoitteita.

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