Kodulehe loomine, 21. kord

15.02.2022
 |  1 kommentaar

JavaScript

JavaScript’i koode oleme juba varemalt kasutanud, aga nüüd vaatleme neid veidi lähemalt.

Esmalt nt kaht varianti väljundinfo kuvamiseks.

Kõigepealt siis elemendi sisu muutmine:

1. esmalt html:

<div id="sisu">Siin on minu sisu</div>
<button type="button" onclick="uussisu()">Muuda sisu</button>

2. seejärel JavaScripti kood (mille lisame märgendite <head> ja </head> vahele:

<script>
function uussisu()
{
  document.getElementById("sisu").innerHTML="Uus sisu";
}
</script>

Koodi selgitus on siis järgmine:

  1. meil on 2 html-elementi:
    1. kast, mille identifikaator on id=”sisu“
    2. nupp, millele vajutades (onclick) käivitatakse alamprogramm (function) nimega uussisu()
  2. meil on JavaScript’i alamprogramm uussisu() (NB! Funktsioon on loogeliste sulgude { ja } vahel!), milles:
    1. leitakse element, mille identifikaator on sisu – getElementById(“sisu“)
    2. muudetakse selle sisemist html’i – innerHTML
    3. uueks sisu väärtuseks on tekst Uus sisu

Läheme selle koodiga veidi edasi ja vaatleme olukorda, milles kasutaja sisestab andmeid:

1. esmalt html:

<div id="sisu">Palun sisesta oma nimi:</div>
<input  id="nimi" class="input" type="text"></input><br>
<button class="btn btn-primary" type="button" onclick="muuda()">Edasta andmed</button>

2. seejärel JavaScript’i kood:

<script>
 function muuda() 
 {
   var nimi=document.getElementById("nimi").value;
   document.getElementById("sisu").innerHTML = "Sinu nimi: "+nimi;
  }
 </script>

Koodi selgitus on siis järgmine:

  1. meil on 3 html-elementi:
    1. kast (div), mille identifikaator on id=”sisu“, kuhu kirjutame kasutaja poolt sisestatud nime
    2. sisendkast (input) identifikaatoriga id=”nimi“,
    3. nupp (button), millele vajutades (onclick) käivitatakse alamprogramm (function) nimega muuda()
  2. meil on JavaScript’i alamprogramm muuda() (NB! Funktsioon on loogeliste sulgude { ja } vahel!), milles:
    1. defineeritakse muutuja nimi (var nimi=), millele omistatakse elemendi, mille identifikaator on nimi – getElementById(“nimi“), väärtus value
    2. leitakse element, mille identifikaator on sisu – getElementById(“sisu“)
    3. muudetakse selle sisemist html’i – innerHTML
    4. uueks sisu väärtuseks on tekst Sinu nimi:
    5. ja lisatakse muutuja nimi väärtus +nimi (NB! Teksti lisamiseks kasutatakse + märki! Esialgne tekst on jutumärkide vahel ” “)

Veel väikeste muudatustega, saame lisa funktsionaalsusi veelgi:

1. esmalt lisame nupule identifikaatori id=”nupp“:

<button id="nupp" class="btn btn-primary" type="button" onclick="muuda()">Edasta andmed</button>

mille tulemusena meie esialgne html-kood saab selline:

<div id="sisu">Palun sisesta oma nimi:</div>
<input class="input" type="text" id="nimi"></input><br>
<button id="nupp" class="btn btn-primary" type="button" onclick="muuda()">Edasta andmed</button>

2. seejärel lisame JavaScript’i 2 rida juurde:

document.getElementById("nimi").style.display="none";
document.getElementById("nupp").disabled=true;

mille tulemusena saab meie JavaScript’i kood selline:

<script>
 function muuda() 
 {
  var nimi=document.getElementById("nimi").value;
  document.getElementById("sisu").innerHTML = "Sinu nimi: "+nimi;
  document.getElementById("nimi").style.display="none";
  document.getElementById("nupp").disabled=true;
  }
</script>

Selliste muudatuste tulemusena:

  1. peidetakse (style.display=”none“) sisendkast, mille identifikaator on id=”nimi“ (getElementById(“nimi“))
  2. muudetakse nupp, mille identifikaator on id=”nupp“ (getElementById(“nupp“)) mitteaktiivseks  (disabled=true)