JavaScript praktinė paskaita Nr 5
|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; } }