JavaScript - pikku koodareille

Miten JavaSript:llä koodataan

JavaScript-koodin toteuttaminen on suhteellisen helppoa www-koodauksen joukkoon ja koodauksen liittämisen voi toteuttaa muutamalla tavalla:

- JavaScript-koodaus siinä kohtaa jossa sitä käytetään.

- JavaScript-koodaus otetaan käyttöön funktiokutsulla muualta, jolloin varsinainen JavaScript-koodi sijaitsee HTML-listauksen alussa head-elementissä tai erillisessä js-päätteisessä tiedostossa.



1. JavaSript-koodi HTML-koodissa halutussa kohdassa:


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

   <body>

    <p id="testi1"></p>

    <script>
     document.getElementById("testi1").innerHTML = 
       "Tulostetaan tekstiä JavaScript:llä !";
    </script>

   </body>
  </html>
  

Tulos www-sivulla:



Funktioiden käyttäminen


2. JavaSript-koodi HTML-koodissa halutussa kohdassa ja käytetään funktiota:


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

  <body>

  <p id="testi2"> Näytetään teksti aluksi </p>
  
  <button type="button" onclick="omaOhjelma2()">Vaihda teksti</button>

  <script>
   function omaOhjelma2() {
     document.getElementById("testi2").innerHTML = "Ja teksti on vaihdettu.";
   }
  </script>

  </body>
  </html>
  

Tulos www-sivulla:

Näytetään teksti aluksi




3. JavaSript-koodi funktiona HTML-koodin alussa, head-elementissä:

 
  <!DOCTYPE html>
  <html>
   <head>
    <meta charset="UTF-8">
    <script>
     function omaOhjelma3() {
      document.getElementById("testi3").innerHTML = "Tekstin vaihto valmis.";
     }
    </script>
   </head>

  <body>

   <p id="testi3"> Vaihdetaan tästä kohtaa teksti ! </p>
   <button type="button" onclick="omaOhjelma3()"> Klikkaa Mua </button>

  </body>
  </html>
  

Tulos www-sivulla:

Vaihdetaan tästä kohtaa teksti !




4. JavaSript-koodi voi olla myös toteutettu erilliseen js-päätteiseen tiedostoon.

HTML-tiedosto:


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

  <body>

   <p id="testi4"> Teksti joka vaihdetaan </p>
   <button type="button" onclick="omaOhjelma4()"> Klikkaa </button>
   
   <p style="color:darkblue"> Tällä kertaa omaOhjelma4() kutsuu
      käyttöön <i>omaJawa1.js</i> nimisestä tiedostosta. </p>
 
   <script src="omaJawa1.js"></script> 
  </body>
  </html>
  

Tarvittava JavaScript-tiedosto omaJawa1.js:


   function omaOhjelma4() {
     document.getElementById("testi4").innerHTML = 
	    "Ja kas, teksti vaihtui taaskin.";
   }
  

Tulos www-sivulla:

Teksti joka vaihdetaan

Tällä kertaa omaOhjelma4( ) kutsuu käyttöön omaJawa1.js nimisestä tiedostosta.



Huomaa, edellisissä esimerkeissä id-tunnusten sekä JavaScript-funktioiden erilaiset nimet !!

Erilaisia vaihtoehtoja ottaa (linkittää) html-tiedoston ulkopuolinen JavaScript-tiedosto käyttöön:


   Yhteen html-tiedostoon linkitetään kaksi JavaScript-tiedostoa:
   
   <script src="omaKoodi1.js"></script>
   <script src="omaKoodi2.js"></script>
   
   
   html-tiedostoon linkitetään JavaScript-tiedosto eri kansiosta:
      
   <script src="/javat/omaTestaus1.js"></script>
   
   
   html-tiedostoon linkitetään JavaScript-tiedosto joltain muulta www-sivustolta:
	   
   <script src="https://www.jokusivusto.com/js/testiKoodit.js></script>
   
  


TEHTÄVÄ 1 Toteuta www-sivulle kaksi painiketta JavaScript:iä käyttäen:

Vaihda 1, josta vaihtuu painikkeen yläpuolella oleva teksti
Vaihda 2, josta vaihtuu painikkeen alapuolella oleva teksti



TEHTÄVÄ 2 Hae Google:lla kaksi pientä kuvaa ja lisää www-sivulle
kaksi kuva-elementtiä (img) JavaScript:iä käyttäen:

Kuvasta 1, josta vaihtuu painikkeen yläpuolella oleva teksti
Kuvasta 2, josta vaihtuu painikkeen alapuolella oleva teksti
Lisää kuville myös CSS-ohje jolla kuvaa klikatessa www-sivulla esitetään "painamis-efekti."

Kuvan näyttäminen img-elementtiin (jolla JSKuva id):

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







JavaSript:n syntaksi, eli kielioppia

JavaScript-koodissa, kuten muissakin ohjelmonti-kielissä on omia sekä yhteisiä kirjoitussääntöjä, näitä perusasioita esitellä tässä osassa yleisesti sekä tarkemmin oppaan muissa osissa.

 
 - muuttuja nimitystä käytetään paikasta jonne talletetaan tieto
	  
 - muuttujan nimen voi ohjelmoija keksiä, nimi valitaan siten että se kuvaa muuttujaan 
   talletettua asiaa
   
 - vaikka muuttujan nimessä skandinaaviset kirjaimet Ää Öö Åå toimisikin, 
   vältä niiden käyttämistä
     



1. JavaSript-koodi HTML-koodissa halutussa kohdassa:


    <p id="lasku1"></p>

    <script>
     var x, y, z;
     x = 10;
     y = 6;
     z = x + y;
     document.getElementById("lasku1").innerHTML = z;
    </script>

    Yllä koodissa:
	 p-elementissä id-tunnuksella siirrytään scriptiin
	 var määrittelee muuttujiksi x, y ja z nimiset muuttujat
	 x = 10; sijoittaa numeron 10 muuttujaan
	 z = x + y; laskee z-muuttujaan yhteen x- ja y- muuttujissa olevat arvot
	 viimeisenä html-sivulle näytetään z-muuttujassa oleva arvo
  

Alla toimiva script, (näkyy vain laskun tulos):



Numero-arvot kirjoitetaan seuraavasti.

 
      3.14  - desimaaliluku
      2017  - kokonaisluku
     
Teksti (merkkijono) kirjoitetaan seuraavasti.
 
      "Sivettikissa"
      "Hyvää päivää"
      'Tavaravaunu'
      'Tavaravaunu irtosi junasta'
     
Muuttujat otetaan käyttöön seuraavasti.
 
      var tulos;  - muuttuja nimeltään tulos
      tulos = 5;  - tulos -muuttujaan sijoitetaan numero 5
      var luku1, luku2;  - kaksi muuttujaa
     
Muuttujien nimeäminen, käytä niminä niihin talletettavaa tietoa kuvaavia nimiä.
 
      var etunimi;  - muuttuja nimeltään etunimi
      var brutto_paino;  - kaksiosainen muuttajan nimi
     
Aritmetiikka-operaattorit (* / + - laskut) kirjoitetaan seuraavasti.
 
      (2 * 20) / 4  - laskutoimitus numeroilla
      (luku1 / jakaja) * kerroin  - laskutoimitus muuttujilla
     



Edellisiin liittyvä esimerkki:


    <p id="numeroA"></p>
	<p id="tekstiA"></p>

    <script>
     document.getElementById("numeroA").innerHTML = 5 * 10;
     document.getElementById("tekstiA").innerHTML = 'Tekstiä esille.';
    </script>


  

Alla edellisten esimerkkien tulokset:


Tekstin yhdistämisen periaate:

 
     "Paavo" + " " + "Pesusieni"; - yhdistää kaksi sanaa välilöynnillä erotettuna,
     esimerkiksi:
     document.getElementById("demo1").innerHTML = "Johan" + " "  + "Läks";
     
Alla, JavaScript-koodauksella:


Kommentti (muistiinpano) JS-koodauksessa (vihreällä esimerkissä):
 
      var numero1 = 10; //muuttujaan arvo 10
     
CSS-muotoiluohje JS-koodauksessa:
 
      <p style="color:blue;" id="CSS_testi"></p>