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:
<!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
<!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>
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ä
<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
<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:
var numero1 = 10; //muuttujaan arvo 10
CSS-muotoiluohje JS-koodauksessa:
<p style="color:blue;" id="CSS_testi"></p>