Ohjelmointi

| KOTISIVU | KURSSIKUVAUS | OHJELMA JA HARJOITUKSET |

JavaScript HTML sivulla

JavaScriptin tyypillisiä käyttötapoja HTML-sivulla:

JavaScriptin sijoitus HTML-sivulla:

Harjoitus 1: Sijoitetaan pieniä skriptejä sivulle

Harjoitukset voi tehdä myös työpareina. Muistakaa sisällyttää jokaiseen HTML tiedostoon kommenttirivi, joka kertoo työn tekijän:

<!-- Ohjelmoinnin harjoitus 2a, tekijät Jack ja Jill-->

Kaikki harjoitukset on syytä tallentaa. Joihinkin tehtäviin palataan myöhemmin toisesta näkökulmasta.

Tee itsellesi ensin pieni HTML-pohja, johon sijoitat jatkon harjoitukset. Jos käytät ohjelmaeditoria, se antaa pohjan valmiina. Muista lisätä tekijää ilmaiseva kommenttirivi. Vaikka esimerkkien tekeminen onkin nopeampaa copy-paste menetelmällä, suosittelen kuitenkin niiden kirjoittamista käsin. Se nopeuttaa oppimista.

<html>
<head>
<title>NN:n (oma nimesi) harjoitus nro</title>
<script language="JavaScript">
<!-- tähän sijoitetaan kutsuttavat ohjelmanpätkät -->
</script>
</head>

<body>
<h1> Skriptiharjoitus nro </h1>
<h2>Tekijänä: NN </h2>
<br/>
Tässä on sitten itse dokumentti.
</body>
</html>

Harjoitus a: Tekstiä tilariville

Seuraavassa laitat JavaScript-käskyn HTML attribuutin arvoksi. Sijoita dokumenttiisi body-osioon seuraava rivi, tallenna se ja testaa miten se toimii. Älä katkaise riviä.

<a href="http://www.metropolia.fi" onMouseOver="window.status='Jos tarvitset tietoa Metropoliasta, paina tästä '; return true" onMouseOut="window.status=' '; ">Napsauta linkkiä</a>

Kun osoitin liukuu hyperlinkin yli, tilarivi näyttää URL-osoitteeseen liittyvän viestin. "Return true" vaikuttaa siihen, mitä tapahtuu, kun osoitin on linkin päällä. Sen ansiosta scripti tarkistaa onko tilarivi käytettävissä ja, jos on eli ehto on tosi, niin silloin käyttäjän määrittelemä tapahtuma vaikuttaa. Jos "return true" puuttuu, niin scripti ei tee tarkistusta ja oletustapahtuma vaikuttaa eli linkki näyttää oletuksena tilarivillä URL-osoitteen. Vasta kun osoitin otetaan linkin päältä pois, onMouseOver -tapahtuma pääsee vaikuttamaan. Voit itse kokeilla. Huomaa, että kun osoitin on linkin päällä, niin tilarivi lukkiutuu. Se ei muutu, vaikka laittaisit osoittimen uudestaan linkin päälle. Siksi onMouseOut on tarpeen.
Jos tapahtuma ei toimi, tarkista että koodirivi on yhtenäinen ja katso selaimen asetukset (Firefox: Tools, Options, Content, Enable Javascript, Advanced, Change status bar text.)

Firefox - selaimen debugger tulee esiin kun kirjoittaa javascript: osoiteriville ja painaa enter. Tai valitsemalla Tools Javascript Console.

Näytä dokumentin viimeisen päivityksen ajankohta

Sijoita seuraava ohjelma sivun runkoon eli body- osioon:

<script language="JavaScript">
document.write("Päivitetty viimeksi:");
document.write(document.lastModified);
</script>

"Document" -viittaus ohjelmassa tarkoittaa sivua itseään, siis document.write kirjoittaa sivulle.

Harjoitus b: Pieni lomakeohjelma

JavaScript-toimintojen yhdistäminen lomakkeen toimintoihin on tehty hyvin helpoksi. Esimerkiksi normaaliin button- eli nappula- komponenttiin voidaan lisätä määre onClick, jonka arvoksi asetetaan suoritettava JavaScript-käsky. JavaScript-ohjelma voi myös viitata lomakkeen komponenttien data-kenttiin. Jos haluttaisiin vaikkapa, että lomakkeen nappulaa painettaessa asetettaisiin vieressä sijaitsevaan tekstikenttään teksti "Heippa", toimittaisiin seuraavasti (kokeile):

<form>
<input name="teksti" value="" size=10>
<input value="Paina" type="button" onClick="this.form.teksti.value = 'HEIPPA'">
</form>

Sijoita lomake harjoitussivullesi ja testaa sen toiminta.

Harjoitus c: Pop-up ikkuna

Syöttöikkunan kokoa ja tekstin ulkoasua voi myös muotoilla. Seuraavassa esimerkissä painonappi on korvattu pienellä kuvalla, jota napsauttamalla aukeaa viesti-ikkuna. Jos teet samoin, muista ensin sijoittaa kuvatiedosto hakemistoosi:

<form>
<input type="text" style="font-size:8pt; color: red; text-align: center " size="12"> Give a value!<p>
<input type="image" src="EVTEK-logo.gif" onClick="alert ('hi') ">
</form>

Erillisiä viesti-ikkunoita voi avata Alert-funktiolla myös ilman käyttäjän toimenpiteitä. Kokeile seuraavaa:

<body onLoad="alert('teretulemast')">

Ja vastaavasti (voit muuttaa tarpeettomat koodit toimattomiksi laittamalla ne kommentin sisään.)

<script language="JavaScript">
alert("Tästä se alkaa")
</script>

Harjoitus d: Funktion kutsuminen

Ohjelmaan voidaan luoda aliohjelma tai funktio, jota kutsutaan pääohjelmasta tarpeen mukaan. Tässä harjoituksessa tehdään HTML-sivun runkoon ohjelma, jonka sisällä on funktio, joka vain tulostaa tekstiä sivulle. Huomaa kommenttirivien käyttö, kommentit aloitetaan kahdella kauttaviivalla //:

Tämä on tavallinen HTML-dokumentti, jonka sisällä on ohjelma ja funktio.
<P>

<script language = "JavaScript">
// Oma funktio, joka alkaa aaltosulusta ja päättyy aaltosulkuun.
function tulostus_funktio()
{
document.write("Kirjoitetaan sivulle tulostusta!");
}

//seuraava rivi on itse pääohjelmaa, ja se tulostaa selainikkunaan tekstiä
document.write("Tämä teksti tulee pääohjelmasta, joka sen jälkeen kutsuu funktiota! <p>")
tulostus_funktio()
</script>

<P>
Tämän jälkeen sitten HTML-dokumentti jatkuu. Selvitä itsellesi, mikä on tämän logiikka.

Harjoitus e: Toiseen ikkunaan kirjoittaminen

Tässäkin luodaan funktio, joka sijoitetaan head -osioon ja sitä kutsuva ohjelma on dokumentin rungossa. Kutsuttava funktio on:

<SCRIPT>
var ohje = null;

function kirjoita_ikkunaan(arvoja)
{
ohje = window.open("","Lennosta", "width="500",height="200",resizable="yes");
// Avataan uusi ikkuna ja kirjoitetaan siihen!
ohje.document.open("text/plain");
ohje.document.write(arvoja);
ohje.document.close();
}
</SCRIPT>

Kirjoita kutsuva ohjelma body-osioon.

<script>
kirjoita_ikkunaan("Tällä tavalla voidaan antaa esim. lisätietoja");
</script>

Testaa toiminta.

Tehtävä 1a: Toisen ikkunan avaaminen painonapilla

Muokkaa nyt sivua niin, että teet sille lomakkeeseen painonapin, joka avaa ohjeikkunan.

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).

Tehtävä 1b: Käyttäjän syöttämä input

Ohjelma voi kysyä käyttäjältä arvoja, jotka se sijoittaa muuttujaan ja käyttää vaikkapa laskentaan. Muuttujien arvoja muutetaan seuraavasti
muuttuja2 = muuttuja1 + 7
toisin sanoen yhtäläisyysmerkki = onkin ohjelmoinnissa sijoitus. Tee pieni ohjelma joka suorittaa valuuttamuunnoksen. Ensin se kysyy käyttäjän rahavaroja ja sijoittaa tiedon muuttujaan rahat,

<script>
var rahat = prompt("Monellako eurolla ostat krooneja?");
</script>

sitten pitää laskea paljonko on vastaava summa krooneissa ja kertoa sen alert-boxissa.

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