Ohjelmointi

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

JavaScript HTML sivulla: ehtolauseet, funktiot ja silmukat

Harjoitus 2a: Iteraatio ja silmukat: for - käsky

Ohjelmat usein toistavat samaa operaatiota lukuisia kertoja. Toisto tapahtuu esim. for-käskyn avulla. Tee uusi harjoitussivu ja lisää body -osioon skripti :

var i=0, result = 0;
for (i = 0; i <= 10; i++) {
result += i;
document.write(i + ": " + result + "<br>");
}
document.write("<BR><BR>");

Tässä for-silmukka kasvattaa i laskurin arvoa yhdellä joka kierroksella, ja lisää sen arvon summaa laskevaan muuttujaan result. Tulostuksessa plussa + yhdistää merkkijonot.

Harjoitus 2b: Satunnaisvalintaa

Tämä ohjelma käyttää Javascriptin valmiita funktioita:

Math.random tuottaa satunnaisluvun väliltä 0 ja 1.

Math.floor pyöristää alaspäin eli jättää desimaalit huomioimatta.

Huutomerkki ! on looginen NOT operation eli negaatio.

If käsky testaa, onko ehto tosi. Jos se on tosi, seuraava toiminta suoritetaan, jos epätosi, jätetään suorittamatta. Näin ohjelma voi haarautua eri vaihtoehtoisiin ratkaisuihin. Sijoita taas seuraava ohjelma HTML sivun head osioon:

<script>
function weather_comment()
//käyttäjä nimeää funktion
{
if ( !Math.random ) // tutkitaan, toimiiko Math.random, jos ei niin
{
document.write('<P> -- weather called off due to rain --</P>');
}
else if ( Math.floor((Math.random()*2)) == 0 )
{
document.write("<STRONG>It's just awful.</STRONG><br/> ");
}
else
{
document.write("<em>How wonderful it is!</em><br/> ");
}
}
</script>

Sijoita body-osioon teksti, joka kutsuu yllämääriteltyä funtiota:

<P>Weather report for today:</P>
<script>
weather_comment();
</script>
<P>End of report.</P>

Testaa ohjelmaasi lataamalla sivua erinäisiä kertoja.

Harjoitus 2c: Interaktiivinen lomake ja tapahtumankäsittelijöitä

Tee toinen funtio, joka sijoitetaa head osioon:

<script>
function applause()
{
var answer = "Man is correct!\n" +
"Man crawls when young, walks when adult and uses a cane in old age\n" +
"\nShould you meet a riddling Egyptian Sphinx, you'll be perfectly safe";
alert(answer);
}
</script>

Sijoitetaan kyselylomake body- osioon.

<form>
<h2>Riddle Page</h2>
What goes on four legs in the morning, two during the day and three in the evening?
<BR> <input type="radio" onclick="alert('You seem confused too')"> A confused table
<BR> <input type="radio" onclick="alert('Perhaps you&acute;ve had too much Sun?')"> The Sun
<BR> <input type="radio" onclick="applause()"> Man
</form>

Kokeile testiä eri vastauksilla. Toinen esimerkki radionappuloista.

Harjoitus 2d: Iteraatio ja silmukat: while - käsky

While -käsky on vaihtoehto for-silmukalle. Sekin toistaa toiminnon, mutta lopputesti on eri paikassa. Lisää seuraava ohjelmanpätkä sivullesi:

<script>
var x = 1;
var result = 0;

while ( x <= 10 ) { // the loop is repeated until x>10
result += x;
x++;

}
alert ("The result is " + result + " and x is " + x );
</script>

 

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