.
Cara Membina Aturcara Kalkulator HTML5 Part 1
Program Kalkulator adalah antara program komputer yang terawal dicipta. Latihan membina program kalkulator ringkas akan membantu kita memahami bagaimana menulis aturcara interaktif dan intuitif.
Interaktif = Program yang membenarkan hubungan dua hala antara pengguna dan komputer.
Intuitif = Program yang mudah difahami dan digunakan oleh pengguna.
|
1. Program Mencampur Nombor.
Kita akan mula membina dari konsep mudah dahulu iaitu Program Mencampur Nombor. Katakan, UI Program Mencampur Nombor seperti berikut.
2. Komponen Yang Diperlukan.
Dalam contoh di atas kita memerlukan komponen berikut:
Jenis Komponen
|
Id Komponen
|
Tujuan
|
input type=number
|
inputOperand1
|
Menerima input bagi operand pertama
|
input type=number
|
inputOperand2
|
Menerima input bagi operand kedua
|
input type=number
|
outputMessage
|
Memaparkan hasil operasi campur ke atas operand pertama dan operand kedua.
|
p
|
pOperator
|
Memaparkan simbol ‘+’ ie campur
|
p
|
pEqual
|
Memaparkan simbol ‘=’ ie sama dengan
|
Dalam operasi matematik, kita menggunakan istilah berikut:
operand = istilah bagi nilai yang akan diproses.
operator = jenis operasi yang akan dilaksanakan ke atas operand.
result = hasil operasi.
|
3.Kod yang diperlukan.
Kod yang diperlukan adalah seperti berikut:
<html>
<input id="inputOperand1" type="number" value=0 />
<p id="pOperator">+</p>
<input id="inputOperand2" type="number" value=0 />
<p id="pEqual">=</p>
<input id="outputMessage" type="text" value=0 />
</html>
|
4. JavaScript.
Untuk membolehkan hasil campur dipaparkan oleh outputMessage, kita memerlukan JavaScript.
Formula yang diperlukan untuk memproses adalah seperti berikut:
document.getElementById("outputMessage").value =parseInt(document.getElementById('inputOperand1').value) + parseInt(document.getElementById('inputOperand2').value);
|
Kod di atas bermaksud, campurkan nilai yang diperolehi dari inputOperand1 dan inputOperand2 (melalui arahan getElementById() ) dan berikan nilai hasil campur ini kepada outputMessage (melalui arahan getElementById() )
5. Mengesan Perubahan.
Walaubagaimanapun, jika kita jalankan kod berikut, hasil output tidak akan dipaparkan. Ada ralat yang tidak kelihatan telah berlaku.
<html>
<input id="inputOperand1" type="number" value=0 />
<p id="pOperator">+</p>
<input id="inputOperand2" type="number" value=0 />
<p id="pEqual">=</p>
<input id="outputMessage" type="text" value=0 />
</html>
<script>
document.getElementById("outputMessage").value =parseInt(document.getElementById('inputOperand1').value) + parseInt(document.getElementById('inputOperand2').value);
</script>
|
Kenapa berlaku ralat ie tiada perubahan pada outputMessage?
Jawapannya, JavaScript terus memproses sebaik sahaja UI ini dipaparkan. Pada ketika itu nilai masing-masing adalah 0, maka outputMessaga juga menjadi 0.
Walaupun nilai-nilai input diubah kemudian, kod sedia ada tidak diprogramkan untuk mengesan perubahan ini.
Untuk membolehkan JavaScript mengesan perubahan nilai dalam inputOperand1 dan inputOperand2, kita akan ubahsuai kod seperti berikut:
5.1. Cipta function calculate() dan masukkan kod JavaScript di atas ke dalamnya.
5.2. Ubahsuai property onchange pada objek input di atas untuk memanggil function calculate().
<html>
<input id="inputOperand1" type="number" value=0 />
<p id="pOperator">+</p>
<input id="inputOperand2" type="number" value=0 />
<p id="pEqual">=</p>
<input id="outputMessage" type="text" value=0 />
</html>
<script>
function calculate(){
document.getElementById("outputMessage").value =parseInt(document.getElementById('inputOperand1').value) + parseInt(document.getElementById('inputOperand2').value);
}
document.getElementById('inputOperand1').onchange=calculate;
document.getElementById('inputOperand2').onchange=calculate;
</script>
|
Hasilnya, apabila kita menaip nilai baru dan menekan kekunci ENTER, outputMessage akan memaparkan hasil campur yang baru.
Bolehkah kita programkan supaya JavaScript mengira semasa pengguna menaip nilai dalam input box?
6. Mengesan Perubahan Serta-Merta.
Untuk membolehkan JavaScript mengira semasa pengguna menaip nilai, gantikan property onchange kepada oninput.
<html>
<input id="inputOperand1" type="number" value=0 />
<p id="pOperator">+</p>
<input id="inputOperand2" type="number" value=0 />
<p id="pEqual">=</p>
<input id="outputMessage" type="text" value=0 />
</html>
<script>
function calculate(){
document.getElementById("outputMessage").value =parseInt(document.getElementById('inputOperand1').value) + parseInt(document.getElementById('inputOperand2').value);
}
document.getElementById('inputOperand1').oninput=calculate;
document.getElementById('inputOperand2').oninput=calculate;
</script>
|
No comments:
Post a Comment