Ohjelmoinnin perusrakenteet javascriptillä

Sorakuilu

Sisältö

  1. Alkuun
  2. Työvälineet ja ympäristö, Javascriptin kirjoittaminen
  3. Muuttujat ja tietotyypit
  4. Operaattorit
  5. Ehtolauseet, boolean
  6. Funktiot (lohkot)
  7. Taulukot ja toistorakenteet
  8. Muut toistorakenteet

Muuttujat

Muuttuja on muistipaikka, jossa ohjelma voi säilyttää tarvitsemaansa tietoa.

Muuttujalla on nimi (tunnus, jolla siihen viitataan ohjelmassa).

Muuttujan nimi

Nimessä voi olla kirjaimia (a–z ja A–Z) sekä numeroita (0–9), nimen on kuitenkin aina alettava joko kirjaimella tai alaviivalla.

Nimi ei saa olla ns. varattu sana (sana, joka kielessä toimii muussa merkityksessä, esim. osana ohjausrakennetta)

Pyri aina antamaan muuttujalle selkeä nimi (ns. itsekommentoiva).
Jos esimerkiksi lasketaan paljonko saa rahaan takaisin ostoksestaan ja kirjoitetaan palautukselle lauseke käyttämällä huonoja nimiä, saadaan kenties lause

x1 = x2-x3;

Lause on nopea kirjoittaa, mutta ei luettavuudessaan vedä vertoja lauseelle

palautus = annettu_raha - ostoksen_hinta;

Muuttujan tietotyyppi

Muuttujan tyyppi tarkoittaa, millaista tietoa muuttujaan voi tallentaa.

Javascript käyttää ns. heikkoa tyypitystä eikä vaadi tietotyypin määrittelyä. Muuttujien tyyppi määräytyy siis arvon perusteella - useimmissa ohjelmointikielissä muuttujalla tulee olla tietotyyppi.

Tietotyypit

TypeScript-kieli lisää Javascriptiin vahvan tyypityksen - myös sitä voi käyttää.

Muuttujien esittely

var, let ja const

var muuttuja = 5; //vanhahtava, laaja näkyvyysalue
let sisainen = "kuuluu vain tähän lohkoon"; // lohkon sisäinen muuttuja

Esimerkkejä

let viesti;
viesti ='Hello!';
let nimi;
nimi = 'Leena';
let ika;
ika = 62;

Esimerkkejä vakioista

const pysyva = "vakio"; //vakio, ei voida muuttaa
const syntymapaiva ='27.4.1957';

Isojen kirjainten käyttö

Kun tarvitaan helposti_muistettavia nimiä ja "kovakoodataan ne" isoilla kirjaimilla

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...ja kun tarvitaan
let color = COLOR_ORANGE;
console.log(color); // #FF7F00

var

Muuttuja esitellään sanalla var, jonka jälkeen kirjoitetaan muuttujan nimi. Yhtäsuuruusmerkin nälkeen annetaan muuttujalle sen hetkinen arvo.

var eroaa let-määrittelystä kahdella tavalla:

var luku = 7.1; //huom. desimaali esitetään pisteellä
var sana = "Elä hättäile"; //sanan sisällä skandimerkit ovat sallittuja, muuttujan nimessä eivät

Voit myös esitellä muuttujan antamatta sille arvoa:

var luku2; // määrittelemätön arvo, undefined

Jos muuttujan esittelee ilman var-sanaa, siitä tulee ns. globaali eli kaikkiin ohjelman osiin (funktioihin) näkyvä muuttuja. Käyttö tässä muodossa ei ole suositeltavaa eikä edes toimi ns. tarkassa eli Strict-moodissa.

Erikoisarvot

Muuttujalla voi olla myös erikoisarvoja:

Merkkijonot

Merkkijono on Javascriptissä olio, jota voidaan käsitellä kokonaisuutena, osina, merkki kerrallaan jne. Merkkijonoa voi ajatella jonona erilaisia merkkejä (mitä tahansa):

Merkkijono voidaan erottaa kolmella tavalla (niiden välillä ei ole eroa, kaikki käyvät).

Lainausmerkki (englanniksi double quotes): "Hello".
Heittomerkki (englanniksi single quotes): 'Hello'.
Gravis (englanniksi Backticks): `Hello`.

let str = "Hello";
let str2 = 'Heittomerkkejäkin voi käyttää'; let phrase = `voidaan upottaa ${merkki}`;

Merkkijonoja voi operoida mm. seuraavilla operaattoreilla:

+ Liittää merkkijonot yhteen
< > <= >= == Vertailevat aakkosjärjestystä

Yhdelle merkille ei ole omaa tietotyyppiä!


Demot 1, muuttujat

Harjoitukset 1, muuttujat