Kodulehe loomine, 25. kord

06.04.2022
 |  Kommentaare pole

4. etapp – JavaScript’i funktsioonid

4.1 Lehe alglaadimine

Enne JavaScripti funktsioonide juurde minemist, on vaja paika panna paar üldist asja:

  1. meie funktsioonid saavad paiknema failis mangukood.js
    • html-lehe päises on viide funktsioonide failile (<script src=”mangukood.js“></script>) ja
    • funktsioonide jaoks tekitasime eraldi faili mangukood.js
  2. mängu testversioonis kasutame sõna lumelaualaager
  3. mängu alglaadimiseks kasutame globaalseid muutujaid (et säilitada juba sisestatud andmeid kogu mängu jooksul):
    • lokaalsed muutujad on muutujad, mida kasutatakse ühe funktsiooni piires
    • globaalsed muutujad on muutujad, mida kasutatakse funktsioonide üleselt

4.1.1 Globaalsete muutujate defineerimine

Globaalsete muutujate defineerimiseks lisame JavaScripti faili algusesse järgmised read:

var otsitav_sona="lumelaualaager";
var otsitava_sona_tahed=otsitav_sona.split("");
var leitud_tahed=[];
leitud_tahed.push("l");
leitud_tahed.push("r");
var sobimatud_tahed=[];

Selle tulemusena on meil järgmised muutajad:

  1. muutuja otsitav_sona, mille väärtuseks on lumelaualaager
  2. massiiv otsitava_sona_tahed, mille saame, kui jagame muutuja otsitav_sona funktsiooni split abil tähtedeks
  3. massiiv leitud_tahed, mis on esialgu tühi
  4. lisame massiivi leitud_tahed funktsiooni push abil tähe l (kuna kuvame sõna esimese tähe ja teised kohad sõnas, kus see täht paikneb), massiivis on selle tulemusena 1 element, kohal 0, mille väärtuseks on l
  5. lisame massiivi leitud_tahed funktsiooni push abil tähe r (kuna kuvame sõna viimase tähe ja teised kohad sõnas, kus see täht paikneb), massiivis on selle tulemusena 2 elementi, kohal 0, väärtusega on l ja kohal 1, väärtusega r
  6. massiiv sobimatud_tahed, mis on esialgu tühi

4.1.2 Lehe alglaadimine

HTML-lehel on elemendile <body> lisatud sündmuse onload puhul funktsiooni algseis käivitamine ==> <body onload=”algseis();”>.

Seega lisame JavaScripti faili funktsiooni algseis:

function algseis()
{
  document.getElementById("sona").innerHTML="L _ _ _ L _ _ _ L _ _ _ _ R";
  document.getElementById("info").innerHTML="Hakka aga mänguga pihta";
  document.getElementById("tahed").innerHTML=""; 
  document.getElementById("pilt").innerHTML="<img src='pilt1.jpg' id='pildisisu'>"; 
  document.getElementById("taht").focus();
  document.getElementById("taht").select();
}

Selle tulemusena toimuvad esialgsel lehel järgmised muudatused:

  1. kasti sona (document.getElementById(“sona“)) kuvatakse (innerHTML) otsitav sõna “L _ _ _ L _ _ _ L _ _ _ _ R” (NB! selleks, et tulemus ilusam oleks, eraldavad tähti tühikud) ==> document.getElementById(“sona“).innerHTML=”L _ _ _ L _ _ _ L _ _ _ _ R”;
  2. muudetakse kasti info, kuhu asutakse kuvatakse info mängu seisu kohta, sisu ==> document.getElementById(“info“).innerHTML=”Hakka aga mänguga pihta”;
  3. tühjendatakse kast tahed, kuhu kuvatakse tähed, mida sõnas ei leitud ==> document.getElementById(“tahed“).innerHTML=””;
  4. lisatakse esimene kaader kasti pilt, kuhu kuvatakse esimene pilt, fail, mille nimeks on pilt.jpg ==> document.getElementById(“pilt”).innerHTML=”<img src=’pilt1.jpg’ id=’pildisisu’>”; 
  5. aktiveeritakse sisendkast, kuhu saab tähe, mille identifikaator on taht, sisestada:
    • klaviatuuri kasutamise korral, kasutades funktsiooni focus ==> document.getElementById(“taht“).focus();
    • puuteekraani korral, kasutades funktsiooni select ==> document.getElementById(“taht“).select();