JavaScript - funktiot ja metodit

FUNKTIOT

Funktioilla tarkoitetaan ohjelmarakenteita joille on määritelty tiettyjä tehtäviä (algoritmeja) ja funktio voidaan ottaa ns funktiokutsulla käyttöön.

     - funktio suorittamiseen siirrytään funktiokutsulla
	  
     - funktiolla on jonkin tai joitain sille ohjelmoitsija koodaamalla määräämiä tehtäviä
	 
     - funktio voi sijaita koodauksessa eri kohdassa kuin sitä kutsuva koodi, katso täältä

Esimerkissä siirretään funktio-kutsussa omaOhjelm_1(4,3) funktioon omaOhjelm_1() numero-arvot 4 ja 3.
Funktiokutsussa olleet numero-arvot sijoittuu funktiossa muuttujiin luku1 ja luku2, laskutoimitus tehdään return-osassa.
Laskun tulos palautetaan return-käskyllä näytettäväksi siinä kohtaa mistä funktioon siirryttiin:


   <p id="koe1"></p>

   <script>
     document.getElementById("koe1").innerHTML = 
       "Funktio laski kertolaskun:<br>" + omaOhjelm_1(4, 3);
 
     function omaOhjelm_1(luku1, luku2) {
       return luku1 * luku2;
     }
    </script>

Tulos www-sivulla:


Esimerkissä määritellään neljä muuttujaa ja sijoitetaan kolmeen niistä numero-arvo. Funktiokutsussa siirretään muuttujat varsinaiseen kolmeSarjaan() funktioon. Funktiossa suoritetaan yhteenlasku ja tulos sijoitetaan Rsarja-muuttujaan.
Funktion lopussa return-osalla palautetaan Rsarja-muuttujassa oleva tieto näytettäväksi siinä kohtaa mistä funktioon siirryttiin:


   <p id="koe2"></p>

   <script>
    var R1=100, R2=70, R3=25, Rsarja;

    function kolmeSarjaan() {
      Rsarja=R1+R2+R3;
      return Rsarja;
    }
    document.getElementById("koe2").innerHTML = kolmeSarjaan(R1,R2,R3);
   </script>

Tulos www-sivulla:


TEHTÄVÄ 1 Muuta yllä olevaa esimerkkiä seuraavasti:

a) Lisää JS-funktio kolmeRinnan() koodaukseen

b) Funktio laskee kolmen vastuksen rinnankytkennän ja näyttää tuloksen toisella p-elementillä

c) Muokkaa JS-koodausta näyttämään myös laskennassa käytettyjen vastusten arvot.




Esimerkissä muunnetaan Farenheit-asteet Celsius-asteiksi siirtämällä funktio-kutsussa muutettava Farenheit-aste luku:


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

  <body>

   <h2>JavaScript funktiot</h2>
   <p>Funktio joka muuttaa Fahrenheit-asteet Celsius-asteiksi:</p>
   
   <p id="koe3"></p>

   <script>
    function muunnaAsteiksi(farenheit) {
      return (5/9) * (farenheit-32);
    }
    document.getElementById("koe3").innerHTML = muunnaAsteiksi(77);
   </script>

  </body>
  </html>

JavaScript-osan tulos www-sivulla:




Toisenlainen tapa käyttää funktiota, verojen laskeminen annetusta hinnasta:

 
  <p id="koe4"></p>

  <script>
  function laskeALV(hinta,lkv) {
    var verot = hinta * (lkv/100);
    return verot;
  }
  
  var hinta = 1000;
  var lkv = 24;
  document.getElementById("koe4").innerHTML = 
    "Kun arvonlisävero on 24 % <br>" +
    "Hinta " + hinta + " e<br>" +
    "Verot " + laskeALV(hinta,lkv) + " e";
  </script>

Tulos www-sivulla:


TEHTÄVÄ 2 Toteuta www-sivulle JavaScript:llä funktion avulla koodaus:

Joka laskee pallon pinta-alan
Joka laskee pallon tilavuuden

Pallon säde siirretään funktiokutsussa laskutoimituksiin ja tulokset näytetään asiallisesti muotoiltuna.





Taulukon käyttäminen funktiossa:

 
  <p id="koe5"></p>

  <script>
   var arvot = [1,2,3];
   var tulos;

   function omaTaulu() {
    tulos = arvot[0]+arvot[1]+arvot[2];
    return tulos;
   }
   document.getElementById("koe5").innerHTML = omataulu(arvot);
  </script>

Tulos www-sivulla:



TEHTÄVÄ 3 Toteuta www-sivulle JavaScript:llä funktion avulla koodaus:

Joka laskee kolmen vastuksen rinnankytkennän kokonaisresistanssin,
tehtävässä käytetään yksiuloitteista taulukkoa.

Näytä taulukosta vastusten arvot ja yhteisresistanssi asiallisesti muotoiltuna.


Funktioissa voidaan käyttää paikallisia-muuttujia ja/tai globaaleja-muuttujia.

Paikallinen-muuttuja sijaitsee funktion sisällä, jolloin se ei ole suoraan käytettävissä funktion ulkopuolella: 

 
  <p id="koe6"></p>

  <script>
   omaMuuttuja();
   document.getElementById("koe6").innerHTML =
   "Muuttuja automerkki on tyypiltään " + typeof autoMerkki;

   function omaMuuttuja() {
     var autoMerkki = "Maserati";   //muuttuja funktion sisällä
   }
  </script>

Tulos www-sivulla:


Pienellä muunnoksella paikallinen-muuttuja saadaan "näkymään" funktion ulkopuolelle:

 
  <p id="koe7"></p>

  <script>
  
  document.getElementById("koe7").innerHTML =
   "Muuttuja automerkki on " + omaMuuttuja();

  function omaMuuttuja() {
    var autoMerkki = "Maserati";
    return autoMerkki;
  }
  </script>

Tulos www-sivulla:


Globaali-muuttuja sijaitsee funktion ulkopuolella, jolloin se on käytettävissä funktiossa ja funktion ulkopuolella:
(Huomaa, esimerkissä kaksi www-sivulle näyttämisen id-tunnistetta) 

 
  <p id="koe8A"></p>
  <p id="koe8B"></p>

  <script>
   var jokuMopo = "Alfa Romeo";
   document.getElementById("koe8A").innerHTML =
    "Auton merkki on " + jokuMopo;

   omaMakaroni();

   function omaMakaroni() {
    document.getElementById("koe8B").innerHTML =
    "Funktiossakin auton merkki on " + jokuMopo;
   }
  </script>

Tulos www-sivulla:


Funktion sisällä olevan muuttujan saa globaaliksi jättämällä sen edestä var-termin pois:

 
  <p id="koe9"></p>

  <script>
   pikkuJekku();

   document.getElementById("koe9").innerHTML = "Tämä olikin globaali-muuttuja: " + autonNimi;

   function pikkuJekku() {
     autonNimi = "Morris Mini";   //Jättämällä var-määrite pois, muuttuja muuttuu globaaliksi
   }
  </script>

Tulos www-sivulla:


Globaali-muuttuja voidaan näyttää www-sivulle myös näin:

 
  <p id="koe10"></p>

  <script>
   var koneMERKKI = "BOSCH PBH 2100 RE";

   // näyttäminen window.koneMERKKI-koodilla
   document.getElementById("koe10").innerHTML = "Poravasara " + window.koneMERKKI;
  </script>

Tulos www-sivulla:



TEHTÄVÄ 4 Muuta yllä olevaa esimerkkiä seuraavasti:

Lisää Poravasaralle hinta erillisellä muuttujalla, ja näytä myös hinta www-sivulle
Lisää koodaukseen jokin muu laite, jolle muuttujien avulla tyyppimerkintä ja hinta.
Näytä www-sivulla "tuotteet" alekkain.











Design and edit player