JavaScript - "temppuja tiedoilla"

NUMEROARVOT JA METODIT

Muuttujiin talletettuun tiedon muokkaamiseen sekä käsittelyyn voidaan käyttää siihen tarkoitettuja metodeja, niistä lyhyesti tässä osassa.

toStrin() metodi

Metodi toStrin() muuntaa numero-arvon merkkijonoksi:


   <p id="muunto1"></p>

   <script>
    var x = 321;
    document.getElementById("muunto1").innerHTML =
     x.toString() + "<br>" +
     (321).toString() + "<br>" +
     (200 + 21).toString();
   <script>

Tulos www-sivulla:


toExponential() metodi

Metodi toExponential() muuttaa desimaaliluvun exponenttimuotoon:


  <p id="muunto2"></p>

  <script>
   var x = 3.145;
   document.getElementById("muunto2").innerHTML =
    x.toExponential() + "<br>" + 
    x.toExponential(2) + "<br>" + 
    x.toExponential(4) + "<br>" + 
    x.toExponential(6);
  </script>

Tulos www-sivulla:


toFixed() metodi

Metodilla toFixed() asetetaan desimaaliluvun desimaalien lukumäärä:

 
  <p id="muunto3"></p>

  <script>
   var x = 3.145;
   document.getElementById("muunto3").innerHTML =
    x.toFixed(0) + "<br>" +
    x.toFixed(2) + "<br>" +
    x.toFixed(4) + "<br>" +
    x.toFixed(6);
   </script>

Tulos www-sivulla:


toPrecision() metodi

Metodilla toPrecision() asetetaan numeroarvon pituus (merkkijonona):


   <p id="muunto4"></p>

   <script>
    var x = 3.145;
    document.getElementById("muunto4").innerHTML = 
     x.toPrecision() + "<br>" +
     x.toPrecision(2) + "<br>" +
     x.toPrecision(4) + "<br>" +
     x.toPrecision(6);
   </script>

Tulos www-sivulla:


valueOf() metodi

Metodilla valueOf() asetetaan numeroarvo varmasti numeroarvoksi:


   <p id="muunto5"></p>

   <script>
    var x = 456;

    document.getElementById("muunto5").innerHTML = 
     x.valueOf() + "<br>" +
     (123).valueOf() + "<br>" +
     (120 + 23).valueOf();
   </script>

Tulos www-sivulla:


Number() metodi

Metodilla Number() muuttaa arvon numeroksi jos se on mahdollista, Nan - Not a Number eli ei numero:


   <p id="muunto6"></p>

   <script>
    document.getElementById("muunto6").innerHTML = 
     Number(true) + "<br>" +
     Number(false) + "<br>" +
     Number("  11") + "<br>" +
     Number("12  ") + "<br>" +
     Number("13 6") + "<br>" + 
     Number("Aurinko");
   </script>

Tulos www-sivulla:


Seuraavassa esimerkissä päivämäärä muunnetaan 1.1.1970 alkaen laskettuna millisekunneiksi:


   <p id="muunto6B"></p>

   <script>
    var x = new Date("2018-02-12");
    document.getElementById("muunto6B").innerHTML = Number(x);
   </script>

Tulos www-sivulla:


parseInt() metodi

Metodi parseInt() jäsentää merkkijonon ja numeroarvon kokonaislukuna:


   <p id="muunto7"></p>

   <script>
    document.getElementById("muunto7").innerHTML = 
     parseInt("11") + "<br>" +
     parseInt("12.33") + "<br>" +
     parseInt("13 6") + "<br>" +    
     parseInt("14 vuotias") + "<br>" +    
     parseInt("lukuarvo 15");
   </script>

Tulos www-sivulla:


parseFloat() metodi

Metodi parseFloat() jäsentää merkkijonon ja numeroarvon desimaalilukuna:


   <p id="muunto8"></p>

 <script>
  document.getElementById("muunto8").innerHTML = 
    parseFloat("11") + "<br>" +
    parseFloat("12.33") + "<br>" +
    parseFloat("13 6") + "<br>" +    
    parseFloat("14 vuotta") + "<br>" +
    parseFloat("noin 15");
   </script>

Tulos www-sivulla:


Numeroiden ominaisuuksien käsittelyä

MAX_VALUE palauttaa suurimman JavaScript:ssä käsiteltävissä olevan numeroarvon
(esim. Number.MAX_VALUE, tai X.MAX_VALUE;)
MIN_VALUE palauttaa pienimmän JavaScript:ssä käsiteltävissä olevan numeroarvon
NEGATIVE_INFINITY edustaa negatiivista ääriarvoa
NaN ei ole numero, Not a Number
POSITIVE_INFINITY edustaa positiivista ääriarvoa



MATEMAATTISET METODIT

Matemaattisilla metodeilla voidaan esimerkiksi pyöristää numero-arvo ylös- tai alaspäin ja suorittaa laskutoimituksia.

Math.PI palauttaa piin likiarvon 3.141592653589793 ja se voidaan kirjoittaa esim laskukaavaan.


Math.round() metodi

Metodi Math.round() pyöristää desimaaliluvun lähimpään kokonaislukuun:


   <p id="matikka1"></p>

   <script>
    var luku1 = 3.14;
    document.getElementById("matikka1").innerHTML = 
     Math.round(4.4) + "<br>" +
     Math.round(4.5) + "<br>" +
     Math.round(luku1);
   </script>

Tulos www-sivulla:


Math.pow() metodi

Metodilla Math.pow() luku annettuun potenssiin:


   <p id="matikka2"></p>

   <script>
    var luku2 = 10;
    var potenssi = 2;
    document.getElementById("matikka2").innerHTML = 
     Math.pow(8,2) + "<br>" +
     Math.pow(luku2,potenssi);
   </script>

Tulos www-sivulla:


Math.sqrt() metodi

Metodilla Math.sqrt() annetun luvun neliöjuuri:


   <p id="matikka3"></p>

   <script>
    document.getElementById("matikka3").innerHTML = Math.sqrt(25);
   </script>

Tulos www-sivulla:


Math.abs() metodi

Metodilla Math.abs() annetun luvun itsesarvo (etumerkitön lukuarvo):


   <p id="matikka4"></p>

   <script>
    document.getElementById("matikka4").innerHTML = 
     Math.abs(-3.14) + "<br>" +
     Math.abs(+3.14);
   </script>

Tulos www-sivulla:


Math.ceil() metodi

Metodilla Math.abs() luvun pyöristäminen ylöspäin lähimpään kokonaislukuun:


   <p id="matikka5"></p>

   <script>
    document.getElementById("matikka5").innerHTML = 
     Math.ceil(4.6) + "<br>" + 
     Math.ceil(4.1);
   </script>

Tulos www-sivulla:


Math.floor() metodi

Metodilla Math.floor() luvun pyöristäminen alaspäin lähimpään kokonaislukuun:


   <p id="matikka6"></p>

   <script>
    document.getElementById("matikka6").innerHTML = 
     Math.floor(4.6) + "<br>" + 
     Math.floor(4.1);
   </script>

Tulos www-sivulla:


Math.sin() ja Math.cos() metodit

Metodeita Math.sin() ja Math.cos() lasketaan kulman sin tai cos arvo.
Kulma annetaan radiaaneiksi muutettuna, radiaanit = asteluku * PI/180 :


   <p id="matikka7">


   <script>
    document.getElementById("matikka7").innerHTML = 
     "Kulman 45 astetta sini on = " + Math.sin(45 * Math.PI / 180)
     + "<br>" +
     "Kulman 45 astetta cosini on = " + Math.cos(45 * Math.PI / 180);
   </script>

Tulos www-sivulla:



Math.max()ja Math.min() metodit

Metodeita Math.max() ja Math.min() suurimman ja pienimmän arvon etsimiseen:


   <p id="matikka8"></p>

   <script>
    document.getElementById("matikka8").innerHTML =
     Math.max(0, 150, 30, 20, -8, -200) + "<br>" +
     Math.min(0, 150, 30, 20, -8, -200);
   </script>

Tulos www-sivulla:


Joukko muita matemaattisia metodeita


   <p id="matikka9"></p>

   <script>
    document.getElementById("matikka9").innerHTML = 
     "<p><b>Math.E:</b> " + Math.E + "</p>" +
     "<p><b>Math.PI:</b> " + Math.PI + "</p>" +
     "<p><b>Math.SQRT2:</b> " + Math.SQRT2 + "</p>" +
     "<p><b>Math.SQRT1_2:</b> " + Math.SQRT1_2 + "</p>" +
     "<p><b>Math.LN2:</b> " + Math.LN2 + "</p>" +
     "<p><b>Math.LN10:</b> " + Math.LN10 + "</p>" +
     "<p><b>Math.LOG2E:</b> " + Math.LOG2E + "</p>" +
     "<p><b>Math.Log10E:</b> " + Math.LOG10E + "</p>";
   </script>

Tulos www-sivulla:


Metodi Selite
abs(x) Luvun x itseisarvo
acos(x) Luvun x arcusCOS, tulos radiaaneina
asin(x) Luvun x arcusSIN, tulos radiaaneina
atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y, x) Returns the arctangent of the quotient of its arguments
ceil(x) Luvun x pyöristäminen ylöspäin lähimpään kokonaislukuun
cos(x) Kulman x cosini, kulma annettava radiaaneina
exp(x) Returns the value of Ex
floor(x) Luvun x pyöristäminen alaspäin lähimpään kokonaislukuun
log(x) Luvun x luonnollinen logaritmi (E)
max(x, y, z, ..., n) Annetuista luvuista suurin
min(x, y, z, ..., n) Annetuista luvuista suurin
pow(x, y) Luvu x potenssin y
random() Satunnaisluku 0 - 1
round(x) Luvun x pyöristäminen lähimpään kokonaislukuun
sin(x) Kulman x sini, kulma annettava radiaaneina
sqrt(x) Luvun x neliöjuuri
tan(x) Kulman x tangentti


SATUNNAISLUKU

Metodilla Math.random() voidaan tuottaa satunnaisluku jota voidaan käyttää esimerkiksi peleissä, JS-koodin testaamisessa sekä Canvas-grafiikassa.

Esimerkkiin on koottu erilaisien lukuarvojen väliin tuotettuja satunnaislukuja: 


    <p id="satunnainen"></p>

    <script>
     document.getElementById("satunnainen").innerHTML =
     "Satunnaisluku 0 - 1: " + Math.random() + "<br>" +
     "Satunnaisluku 0 - 9: " + Math.floor(Math.random() * 10) + "<br>" +
     "Satunnaisluku 0 - 10: " + Math.floor(Math.random() * 11) + "<br>" +
     "Satunnaisluku 0 - 99: " + Math.floor(Math.random() * 100) + "<br>" +
     "Satunnaisluku 0 - 100: " + Math.floor(Math.random() * 101) + "<br>" +
     "Satunnaisluku 1 - 10: " + (Math.floor(Math.random() * 10)+1) + "<br>" +
     "Satunnaisluku 1 - 100: " + (Math.floor(Math.random() * 100)+1) + "<br>";
    </script>

Esimerkin tuottama tulos www-sivulle:


Satunnaislukujen käyttäminen funktiossa ja painikkeella.
Satunnaisluku painiketta painaessa 0 - 9 väliltä:


    <button onclick="document.getElementById('satu1').innerHTML = 
	        omaSatunnainen1(0,10)"> Arvo numero </button>

    <p id="satu1"></p>

    <script>
     function omaSatunnainen1(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
     }
    </script>

Esimerkin tuottama satunnaisluku 0-9 www-sivulle:


Satunnaisluku painiketta painaessa 1 - 10 väliltä:


    <button onclick="document.getElementById('arpaA').innerHTML = 
	        omaBingo(1,10)"> Bingoa </button>

    <p id="arpaA"></p>

    <script>
     function omaBingo(min, max) {
      return Math.floor(Math.random() * (max - min + 1) ) + min;
     }
    </script>

Esimerkin tuottama satunnaisluku 1-10 www-sivulle:


TEHTÄVÄ Toteuta yhden nopan nopan heitto satunnaislukujen 1 -6 välillä.

1. Muokkaa aluksi joistain yllä olevista esimerkistä painikkeella
arpomaan numerot 1 - 6 väliltä, sijoita tämä numero noppa-muuttujaan.
Näytä arvottu numero teksteillä käyttäen if-lauseita:

if (noppa==1){
näytä teksti "Arpa 1"
}
if (noppa==2){
näytä teksti "Arpa 2"
}
jne..

2. Etsi kuvat arpanoppien sivuista ja tallenna kuvat (6 kuvaa).
Muuta ohjelma näyttämään painikkeella arvottujen numeroiden mukaiset noppa-kuvat.
Kuva saadaan näytettyä www-sivulle img-elementtiin script:llä:

document.getElementById("JSkuva").src="Scorp.jpg";

Huom! Sijoita noppa-kuvia näyttävä img-elementti div-elementin sisään ja tee CSS-ohjeella
Nopat sopivan kokoiseksi.

3. Muuta arpominen tapahtumaa klikkaamalla noppa-kuvaa.






























Design and edit player