JavaScript - Muuttujat ja niiden käyttäminen

MUUTTUJIEN KÄYTTÄMINEN

Osan sisältönä on:

- muuttujat, tarkemmin niiden käyttäminen
- operaattorit ja aritmetiikka, miten niitä käytetään muuttujien kanssa
- muuttujan arvon muuttaminen asettaminen ja sijoittaminen (assignment)


Muuttujien määrittely, arvon sijoittaminen muuttujaan sekä laskutoimituksen tekeminen:


  <!DOCTYPE html>
  <html>
   <head>
    <meta charset="UTF-8">
   </head>

   <body>

    <h2>Muuttujien yhteenlasku ja tuloksen näyttäminen</h2>
   
    <p id="laskuA"></p>
 
    <script>
     var luku1 =3;
     var luku2 = 11;
     var tulos = luku1 + luku2;
     document.getElementById("laskuA").innerHTML =
      "Luku1 + Luku2 = " + tulos;
    </script>

   </body>
  </html>
  
  HUOM! Koodauksen alussa muuttujien määrittely ja laskutoimitus 
        voidaan tehdä myös seuraavalla tavalla:
		
	   var luku1 =3;
       var luku2 = 11;
	   var tulos = 0;
       tulos = luku1 + luku2;

Tulos www-sivulla:




Muuttujiin voidaan sijoittaa kokonais- tai desimaaliluku, kirjain tai kirjaimia:


  <p id="testi2"></p>

  <script>
   var PII = 3.14;
   var teksti1 = "Desimaaliluku";
   var teksti2 = 'on piin likiarvo.';

   document.getElementById("testi2").innerHTML =
   teksti1 + " " + PII + " " + teksti2  +
    "
 Aika helppo esimerkki ?";
  </script>
  
  
  HUOM ! Muuttujia voi määritellä myös seuraavasti:
  
  var Asiakas12 = "Jokunen Jaska", taso = "Kulta", alennusprosentti = 7.5;
  
  tai sama eri riveillä:
  
  var Asiakas12 = "Jokunen Jaska",
     taso = "Kulta", 
	 alennusprosentti = 7.5;

Tulos www-sivulla:




Huomaa seuraavat erikoistapaukset :

 
   <p id="testi3"></p>

   <script>
    var ajopeli = "Aston Martin";
    var ajopeli;                     //arvo sijoitettu edellisellä rivillä
    var ajoPeli;                     //muuttujan nimi kirjoitettu erilailla
    var tulos= 1 + 9 + "10";         //laskutoimitus ja perään liitetty numero

    document.getElementById("testi3").innerHTML = 
      ajopeli + "<br>" + ajoPeli + "<br>" + tulos;
   </script>

Tulos www-sivulla:



TAULUKKO

Esimerkki, yksi-ulotteinen taulukko :

 
   <p id="testiC"></p>

   <script>
    var merkit = ["Maybach","Ferrari","Aston Martin"];

    document.getElementById("testiC").innerHTML =
     merkit[2] + "<br>" + 
     merkit[1] + "<br>" +
     merkit[0] + "<br><br>" +
     "Koska taulukon 1.solun numero on ohjelmointikielissä 0 solu <br>" +
     "on kolme arvoa sisältävän taulukon 2.solun numero 2.";
   </script>

Tulos www-sivulla:


Esimerkki, kaksi-ulotteinen taulukko :

 
   <p id="taulu"></p>

    <script>
     var cars = [["Saab", "Volvo", "BMW" ],
	             ["Opel", "Ford" ,"Skoda"]];
     var rivi = 0;
     var sarake = 2;
     document.getElementById("taulu").innerHTML = 
      "Taulukon solusta:  " + cars[1][1] + "<br>" +
      "Solusta muuttujilla:  " + cars[rivi][sarake] + "<br>" +
      "Koko taulukko:  " + cars;
    </script>

Tulos www-sivulla:


Esimerkki, objektien käyttäminen "taulukossa" :

 
   <p id="tiedot"></p>

   <script>
    var henkilö = {etuNimi:"Kalle", sukuNimi:"Koskinen", ikä:46};

    document.getElementById("tiedot").innerHTML = 
     "Henkilötiedot:" + "<br>" +
     henkilö["etuNimi"] + "<br>" +
     henkilö["sukuNimi"] + "<br>" +
     henkilö["ikä"];
   </script>


OPERAATTORIT

Operaattoreilla voidaan:

- sijoittaa muuttujaan arvo, esim var luku = 12;
- sijoittaa muuttujaan muilla muuttujilla suoritettu laskutoimituksen tulos, esim var luku = arvo1*arvo1;
- sijoittaa muuttujaan muistaa muuttujista yhdistetty tieto
- suorittaa muuttujien avulla vertailuja ja loogisia operaatioita

Aritmeettiset operaattorit

Operaattori Selite Esimerkki
+ Yhteenlasku var tulos = luku1 + luku2;
- Vähennyslasku var tulos = luku1 + luku2;
* Kertolasku var tulos = luku1 * luku2;
/ Jakolasku var tulos = luku1 / luku2;
% Jakojäännös var tulos = luku1 % luku2;
++ Luvun kasvatus numerolla 1 kierros++;
- - Luvun pienentäminen numerolla 1 kierros--;

Sijoittamisen tekevät operaattorit

Operaattori Selite Esimerkki
= Sijoittaa annetun tiedon tulos = 100;
sijoittaa tulos-muuttajaan luvun 100
+= Sijoittaa yhteenlaskun tuloksen luku1 += luku2;
laskee luku1 + luku2 ja
sijoittaa tuloksen luku1-muuttujaan
-= Sijoittaa yvähennyslaskun tuloksen luku1 -= luku2;
laskee luku1 - luku2 ja
sijoittaa tuloksen luku1-muuttujaan
*= Sijoittaa kertolaskun tuloksen luku1 *= luku2;
laskee luku1 * luku2 ja
sijoittaa tuloksen luku1-muuttujaan
/= Sijoittaa jakolaskun tuloksen luku1 /= luku2;
laskee luku1 / luku2 ja
sijoittaa tuloksen luku1-muuttujaan
%= Sijoittaa jakojäännöksen tuloksen luku1 %= luku2;
laskee luku1 % luku2 ja
sijoittaa jakojäännöksen luku1-muuttujaan




Sijoittamisen tekevä aritmetiikka, esimerkki:


   <p id="testi4"></p>

   <script>
    var x = 10;
    x *= 0.02;
    var luku1 = 11, luku2 = 2;
    luku1%=luku2;
    document.getElementById("testi4").innerHTML = 
     "Laskun tulos x-muuttujassa " + x + "<br>" +
     "Jakojäännös luku1-muuttujassa " + luku1 + "<br>" ;
   </script>

Tulos www-sivulla:




Merkkijonoihin (tekstiin) liittyvät operaattorit:


   <p id="testi5"></p>

   <script>
    var teksti = "Sanojen ";
    teksti = teksti + "yhdistely ";
    var sana = "onnistuu";
    sana += " näinkin !
";
    var arvio = "Onnistumisesta täysi ";
    arvio+= "10";

    document.getElementById("testi5").innerHTML = 
	  teksti + sana + arvio;
   </script>

Tulos www-sivulla:


TEHTÄVÄ 1 Kolmen vastuksen rinnankytkennän laskeva scriptaus joka näyttää kytkennän vastusten arvot sekä yhteisvastuksen arvon.

Esimerkki näyttö www-sivulla:

R1 = 100 Ω
R2 = 100 Ω
R3 = 100 Ω
Rkok = 3.33333 Ω



TEHTÄVÄ 2 Sijoita kahteen muuttujaan kaksi erilaista tekstiä, esimerkiksi Seitsemästä veljeksestä.

Täytä tekstit muuttujien avulla www-sivulle eri kappaleina sekä kokeile saatko näytettyä teksteille otsikotkin.



TEHTÄVÄ 3 Toteuta taulukko-ratkaisuna käyttäen seuraavat:

a) Toteuta yksiuloitteisella taulukolla JS-koodaus joka laskee neljän taulukkoon sijoitetun luvun keskiarvon.
Luvut sijoitetaan neljälle ensimmäiselle riville ja laskun tulos viidennelle.
Näytä numeroarvot ja keskiarvo www-sivulle

b) Toteuta a-tehtävä kaksiuloitteisella taulukolla, siten että:
1. rivillä taulukossa on sisältönä tekstit Luku 1, Luku 2, Luku 3, Luku 4 ja Ka
2. rivillä taulukossa on sisältönä, 3, 5, 7, 9 ja keskiarvoksi laskettu tulos
Näytä taulukon sisältö alekkain tyylillä "Luku 1 = 3" sekä alimmaiseksi "Ka = ...."



TEHTÄVÄ 4 Toteuta alla oleva JS:n kaksiuloitteisella taulukolla.
Lisää sarakkeet joihin taulukosta lasketaan kokonaishinta.
Näytä taulukko www-sivulle.

Hinnasto ei näy





Vertailu operaattorit

Vertailu-operaattoreita käytetään ehto-rakenteissa ja toisto-lauseissa.

Operaattori Selite Esimerkki
== "Onko yhtäsuuria.." luku1 == luku2;
=== "Onko yhtäsuuria ja saman tyyppisiä.." luku1 === luku2;
!= "Onko eri suuria.." tulos != luku2;
!== "Onko eri suuria tai eri tyyppisiä.." luku1 !== luku2;
> "Onko suurempi kuin.." luku1 > luku2;
< "Onko pienempi kuin.." luku1 < luku2;
>= "Onko suurempi tai yhtäsuuri kuin.." luku1 >= luku2;
<= "Onko pienempi tai yhtäsuuri kuin.." luku1 <= luku2;
? What ??? ?????

Lisää Vertailu-operaattoreista.
Lisää Ehto-rakenteista.
Lisää Toisto-lauseista.



Loogiset operaattorit

Myös loogisia-operaattoreita käytetään ehto-rakenteissa ja toisto-lauseissa.

Operaattori Selite Esimerkki
&& looginen JA
jolla voidaan yhdistää kaksi tai useampi lauseke 		luku1 == 10 && luku2 < 12
|| looginen TAI
jolla voidaan yhdistää kaksi tai useampi lauseke		 luku1 > luku2 || luku1 < luku3
! looginen NOT
"kääntään toden epätodeksi" 		!(tulos = luku2)

Lisää Loogisista-operaattoreista.


Muita operaattoreita

JS sisältää vielä enemmänkin spesiaaleja operaattoreita joilla voidaan tutkia tiedon tyyppiä tai operoida bitti-tasolla.

Lisää Tyyppi-operaattoreista.
Lisää Bitti-operaattoreista.




DATA, TYYPIT JA NIIDEN KÄYTTÄMINEN

JavaScript pystyy käsittelemään useita data tyyppejä numeroiden, merkkijonojen ja objektien lisäksi.

 
  var kerroin = 4.5;  data-tyypiltään numero (number)
	  
  var sukuNimi = "Virtanen";  data-tyypiltään merkkijono (string)

  var nimi_1 = {etuNimi:"Ville", sukuNimi:"Vallaton"};  data-tyypiltään objektin (object)
Huomaa ettei tietokone voi käsitellä turvallisesti esimerkiksi virheellisellä tavalla yhdistettyä numeroa ja merkkijonoa.

	var tulos = 12 + " on tusina";  Virheellinen tapa !!
	
	var tulos = "12" + " on tusina";  Oikea tapa !!


Joukko esimerkkejä data-tyyppien käytöstä:


  <p id="testi6"></p>

  <script>
   //1. esimerkki:
   var teksti1 = 12 + " on tusina";     //mahdollista, ei turvallista
   var teksti2 = "12" + " on tusina";   //turvallien tapa
   var teksti3 = "Tusina on" + 12;      //mahdollista, ei turvallista
   var teksti4 = 7 + 5 + " on tusina";  //mahdollista, ei turvallista
   var teksti5 = "Tusina on" + 7 + 5;   //mahdollista, ei turvallista

   //2. esimerkki:
   var luku_2;            // luku_2 sisältö tuntematon
   luku_2 = 5;            // luku_2 sisältö luku 5
   luku_2= "Ville";       // luku_2 sisältö merkkijono Ville

   //3. esimerkki, lainnaus- ja heittomerkkien näyttäminen:
   var teksti6= "It's easy !";          // Sanaan kuuluu heittomerkki
   var teksti7= "Lempinimi 'player'";   // Sanassa heittomerkki
   var teksti8= 'Lempinimi "player"';   // Sanassa lainnausmerkki

   //4. esimerkki, exponettien käyttäminen numeroiden esittämisessä
   var luku_3 = 123e7;
   var luku_4 = 123e-7;

   document.getElementById("testi6").innerHTML = 
    teksti1 + "<br>" +   
    teksti2 + "<br>" +
    teksti3 + "<br>" +
    teksti4 + "<br>" +
    teksti5 + "<br><br>" +
    luku_2 + "<br><br>" +
    teksti6 + "<br>" +
    teksti7 + "<br>" +
    teksti8 + "<br><br>" +
    luku_3 + "<br>" +
    luku_4;
  </script>

Alla toimiva script:

Seuraavassa esimerkissä testataan "totuus-arvoja" (boolean):

  <p id="testi7"></p>

  <script>
 var luku1 = 5;
 var luku2 = 5;
 var luku3 = 6;
 document.getElementById("testi7").innerHTML =
   (luku1 == luku2) + "<br>" + 
   (luku1 == luku3) + "<br><br>" +
   "Koska luku1 = luku2 tulostuu true.<br>" +
   "Koska luku1 < luku3, tulostuu false.";;
  </script>
Esimerkin (yllä) tulostus www-sivulle:



Objekti on "muuttuja" joka sisältää joukon muuttujiin sijoitettua tietoa:

 
   <p id="testiD"></p>

   <script>
    var henkilo = {
     etuNimi : "Jussi",
     sukuNimi : "Jokela",
     asuinKunta : "HELSINKI",
     postiNumero  : '00910'
    };

    document.getElementById("testiD").innerHTML =
     "Osallistuja:
" +
     henkilo.sukuNimi + " " + henkilo.etuNimi + "<br>" +
     henkilo.asuinKunta + " " + henkilo.postiNumero;
   </script>

Tulos www-sivulla:

Yllä olevassa esimerkissä postinumeroa ei voi sijoittaa mumerona 00910, vaan se on sijoitettava merkkijonona !


typeof operaattori ja sen käyttäminen tiedon tyypin tutkimisessa.

Esimerkeissä typeof-operaattorilla tiedon tyyppejä:


    <p id="testiE"></p>

    <script>
     var henkilo = "Jussi";        //tutkittava tieto muuttujaan
     var tyyppi = typeof henkilo;  //tutkitaan muuttujassa olevaa tietoa
     var laatikko;                 //tutkittava "tyhjä muuttuja"
     
	 document.getElementById("testiE").innerHTML =
      "Tutkitaan teksti-tietoa:
" +
      tyyppi + " - muuttujassa oleva tieto
" +
      typeof "" + " - tyhjämerkki
 " + 
      typeof "Jaska Jokunen" + " - merkkijono

 " +

      "Tutkitaan numero-tietoa:
" +
      typeof 0 + " - numero 0
" + 
      typeof 314 + " - numero 314
" +
      typeof 3.14 + " - desimaaliluku 3.14
" +
      typeof (3) + " - suluissa numero 3
" +
      typeof (3 + 4) + " - numeroiden laskutoimitus (3+4)

" + 
	  
      "Kurkistetaan 'laatikkoon':
" +
      typeof laatikko + " - tyhjä muuttuja
" + 
      laatikko + " - muuttuja

" +

      "Vielä muutama tieto tutkitaan:
" +
      typeof {name:'john', age:34} + " - objekti
" +
      typeof [1,2,3,4] + " - taulukko jossa numeroita
" +
      typeof null + " - null arvo
" +
      typeof function omaOhjelma(){}  + " - aliohjelma kutsu";
    </script>

Tulos www-sivulla:


Design and edit player