JavaScript praktinė paskaita Nr 5

Tarantulo | 2017.10.16 | Learn | No Comments

Antradienio paskaitoje nagrinėjome ir rašėme kaip galima sukurti kalkuliatorių naudojant masyvą mygtukams, tekstinį įvesties laukelį išveščiai ir vieną JavaScript funkciją atlikti skaičiavimams.

Žigsnis po žingsnio aiškinamės kodą.

Užduotys:

Visą kodą galite nusikopijuoti ir pasileisti tiesiai naršyklėje šiame puslapyje: https://codepen.io/Tarantulo/pen/rGdgaG

1. Mūsų kalkuliatoriui veikti bus reikalingti keli HTML elementai

Su body onload užkrauname funkciją. Įvestį id=”txt1″ naudosime išvesti skaičiams. Su id=”M_vieta” sugeneruosime mygtukus.

<body onload="kurtiMygtukus()">
<p><input type="text" id="txt1" value=""></p>
<div id="M_vieta" ></div>

2. Sukuriamas masyvas, kuriame bus talpinami mūsų kalkuliatoriaus mygtukai.

var Mas1 = new Array ("1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "+", "*", "/","C","=");

3. Sukuriame funkciją, kuri sugeneruos visus mūsų mygtukus.

function kurtiMygtukus() {
  var temp_html = "";
   
 for (x in Mas1) {
    temp_html = temp_html + "<input type=button value=" + Mas1[x] + " onclick='rasom(\"" + Mas1[x] + "\"\)' </input>"
   if ((x * 1 + 1) % 3 == 0) temp_html = temp_html + "<br>"
  }
  
  document.getElementById("M_vieta").innerHTML = temp_html; 
}

4. Sukuriame funkciją, kuri išves skaičius į txt1 laukelį ir atliks skaičavimus.

function rasom(t1)
{
 switch (t1) {
     case "=":
  document.getElementById("txt1").value = eval(document.getElementById("txt1").value); break;
   case "C":  
       document.getElementById("txt1").value = ""; break;
     default :
 document.getElementById("txt1").value = document.getElementById("txt1").value + t1; break;
 }
}