JavaScript-ohjelmointi

 Etusivu

Käsitteitä

Kommentit
Kun ohjelmoidaan, on tärkeää, että ohjelmoija voi kirjoittaa koodin rinnalle kommentteja. Kommentit voivat olla yksi tai monirivisiä. Jos kirjoitetaan monirivisiä kommentteja, alkavat ne /* merkillä ja päättyvät */ merkkiin.
Esim:

/*
tässä on kommenttia joka
jatkuu useammalle riville
kuin vain yhdelle
*/

Yksirivinen kommentti alkaa // merkillä ja loppuu saman riivin loppuun ilman merkkejä. Kommentit auttavat hahmottamaan koodin kokonaisuutta. Tätä voidaan myös käyttää useamman rivin kommentteihin, kunhan vain rivin alkuun aina laitetaan kommenttimerkintä.
Esim:

var ika = Math.sqrt(a+b); // a:n ja b:n summan neliöjuuri

Ohjelmalauseiden rakenne
JavaScript rakentuu seuraavista osista: lauseet, operaattorit ja lausekkeet. Lause on yleensä yhden rivin mittainen ja päättyy puolipisteeseen:

document.write("Se toimii!<br>");

Puolipiste kertoo lauseen päättyvän. Puolipistettä ei tarvitse käyttää jos samalla rivillä ei ole muita ohjelmalauseita. Lauseet voivat jakautua useammalle riville.

Lohkot
JavaScriptissä voidaan ryhmitellä useita komentoja lohkoiksi ja nämä erotetaan muusta koodista aaltosuluilla. Ohjelmalohko voi näyttää esimerkiksi tältä:

{ // avataan ensimmäinen lohko
 JavaScript koodia
    { // avataan toinen lohko
       lisää JavaScript koodia
    } // suljetaan toinen lohko

} // suljetaan ensimmäinen lohko

Sisennettynä lohkoina muista, että viimeksi avattu lohko suljetaan aina seuraavalla lopetusmerkillä.

Muuttujat ja if-lause
Muuttujia käytetään JavaScriptissä samaan tapaan kuin muissakin ohjelmointikielissä. Muuttujille annetaan yksilöllinen tunniste ja nimi. Muuttujaan voi sijoittaa numeroita että merkkijonoja. JavaScriptin varattuja sanoja ei kuitenkaan voi käyttää muuttujien niminä.

Avainsana var
Kun muuttujaa määritellään ensimmäistä kertaa, sen eteen lisätään var-avainsana.

var mutu = 50;

Esimerkissä muuttujalle annetaan nimi mutu ja sille annetaan aluksi arvo 50. Arvo kuitenkin voi muuttua erilaisilla tavoilla esimerkiksi:

mutu = mutu + 1; // Lisää arvoa yhdellä
mutu++; // Lisää arvoa yhdellä
mutu--; // vähentää arvoa yhdellä
mutu = mutu - 1; // vähentää arvoa yhdellä
document.write(mutu); // tulostaa arvon

Muuttujaan voi sijoittaa myös tekstiä. Tällöin merkkijono on lainausmerkeissä. Muuttujan arvoa voi käyttää missä tahansa ja merkkijonoa sekä muuttujia voi yhdistää toisiinsa plusmerkeillä.

var jono = "merkkijono";
document.write("Jonon arvo on yhtä kuin" + jono);

if-ehtolause
If on ohjelmointikielen yleisimpiä ehtolauseita. Ehtolauseella testataan onko jokin ehto tosi vai epätosi. Ohjelma jakaa toiminnot ehtojen perusteella. Ylimääräiseltä vertailuilta säästytään, kun otetaan if-else lause mukaan, joka ajetaan jos ehto ei toteudu.

if (ehto on tosi) {
lauseita
}
else { // jos ehto on epätosi
lauseita
}

Lisäksi voidaan käyttää else-if lausetta, kun jotain ehtoa halutaan testata useampaan kertaan. else-if suoritetaan vain jos if-lauseen ehto on epätosi.




Metodit

Open() - Tällä metodilla avataan uusi selainikkuna. Luotaessa ikkuna sille annetaan nimi jonka avulla siihen päästään käsiksi ohjelmassa. open()-metodin ensimmäinen parametri on avattavan ikkunan URL-osoite. Toisena parametrinä ikkunalle annetaan nimi name-ominaisuudella. Kolmas parametri on pilkulla erotettu lista ikkunan ominaisuuksista, esim. koko.

window.open(URL, Nimi, "Ominaisuudet")

close() - Tämä metodi sulkee aktiivisen selainikkunan. Jos haluaa toiminnon suoriutuvan omassa selainikkunassa, käytämme self tai window-ominaisuutta. Seuraavalla käskyllä suljemme ikkunan jossa käsky sijaitsee. JavaScript-kielellä ei voi sulkea selaimen pääikkunaa, vaan ainoastaan luodut ikkunat.

<INPUT TYPE='button' NAME='sulkemispainike'
VALUE='Sulje Ikkuna!'onClick='self.close()'>

alert() - Tämä metodi avaa ikkunan, joka tulee päällimäiseksi. Tässä ikkunassa käyttäjä voi vain painaa OK-painiketta.

alert("Tulostetaan puhdasta tekstiä");

confirm() - Tämä metodi avaa ikkunan jossa on sekä OK ja Peruuta painikkeet

confirm("Käyttäjän viesti")

prompt() - Avaa ikkunan, jossa on tekstikenttä ja OK/Peruuta-painikkeet.

var ika = window.prompt("Anna ikä", "");



blur() - Tekee ikkunasta ei-aktiivisen ja aktivoi toisen ikkunan.

focus() - Asettaa ikkunan aktiiviseksi, jolloin syöte kohdistuu kyseiseen ikkunaan.

scroll() - Tämä vierittää ikkunassa näkyvää dokumenttia parametrein määriteltyyn kohtaan.

open() ja close() metodit käytössä
Seuraavalla koodilla voit avata uuden ikkunan määrätyn kokoisena sisältäen kiitos.html-sivun. Sivu aukeaa automaattisesti.



Voit myös avata sivun linkistä seuraavalla koodilla:



Voit laatia popup-ikkunaan tekstin ja linkin josta ikkuna voidaan sulkea close()-metodilla. Talleta koodi kiitos.html nimellä ja talleta samaan kansioon yllä olevien koodien sisältävien sivujen kanssa.



Arvaa numero
Esimerkissä on käytetty satunnaislukuja, funktioita ja if-else valintalausetta. Valinnan avulla voidaan päättää mitä tehdään kun ehto on tosi tai epätosi.

Video

 
 

Aiheeseen liittyvät linkit

Varmuuskopiointia
 - Wikipedia JavaScript
 - Ohjelmointiputka
 - 2Kmedia opas

 

 

Kysy neuvoa tai anna vinkki

 

Tiedotteet ja aikataulut

Tervetuloa kurssille!!

 

Tehtävät ja palautus

Tiedonhakutehtävä

1. Luo sivu, joka latautuessaan kysyy matkaa Promt-ikkunalla. Anna erilaisia vastauksia riippuen välimatkan pituudesta Alert-ikkunalla.

2. Valmista sivu, jossa on muutama pikkukuva. Klikatessa kuvaa avautuu suurempi kuva omassa määritellyssä ikkunassa.

Palauta vastaukset verkkoon alla olevasta linkistä. Palauta tehtävät muistioon kirjoitettuna. Voit kirjoittaa ja muokata tehtäviä myös palautuksen jälkeen. Palautuskansio on salasanasuojattu. Saat käyttäjätiedot opettajalta. Palauta tiedosto varustettuna omalla nimelläsi muotoon:
sukunimi_etunimi.txt

» Palauta tiedosto tänne