Monday, December 5, 2016

Cara Membina Aturcara Kalkulator HTML5 Part 2


.
Cara Membina Aturcara Kalkulator HTML5 Part 2

1. Buttons

Dalam tutorial terdahulu, kita telah menghasilkan Aturcara Mesin Campur. Aturcara Mesin Campur boleh dikembangkan menjadi Kalkulator kerana algoritma melaksanakan operasi campur, tolak, darab dan bahagi melibatkan langkah-langkah yang sama.
Kita akan memasukkan empat buttons untuk mewakili simbol campur, tolak, darab dan bahagi.
Kod adalah seperti berikut:

<html>
<input id="inputOperand1" type="number" value=0 />
<br/>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<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>

2. Buttons Collection.

Setiap button akan memanggil function yang sama apabila ditekan. Oleh itu kita akan menggunakan Buttons Collection bagi Object Handler.

Object Handler = Pemegang bagi objek untuk membolehkan kita memberi arahan khusus kepada objek tersebut. Lihat kod objectButtons dalam contoh di bawah.
Kod adalah seperti berikut:

<html>
<input id="inputOperand1" type="number" value=0 />
<br/>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<p id="pOperator">+</p>
<input id="inputOperand2" type="number" value=0 />
<p id="pEqual">=</p>
<input id="outputMessage" type="text" value=0 />
</html>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
       buttons[i].onclick=checkInput;
   }
function checkInput(){
document.getElementById("pOperator").innerHTML=this.innerHTML;
}
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>
Maksud kod bertanda di atas adalah seperti berikut.
  1. Cipta koleksi buttons mengandungi semua elemen tag button yang ada dalam document.
  2. Bagi setiap buttons, berikan nilai checkInput pada property onclick. Dalam kata lain, apabila onclick event dikesan, panggil function checkInput().
  3. Function checkInput() akan membaca nilai teks terkandung dalam button yang telah ditekan dan menyalin nilai tersebut kepada pOperator.
Pada peringkat ini, pOperator akan berubah apabila salah satu  button ditekan. Walaubagaimanapun, outputMessage masih memaparkan hasil campur kerana arahan operasi masih belum diubah.

3. Switch Control.

Untuk menukar jenis operasi berdasarkan nilai dalam pOperator, kita perlu ubahsuai seperti berikut:
3.1. Tambah arahan panggilan function calculate() ke dalam function checkInput(). Maksudnya, checkInput() akan memanggil pula calculate() apabila ia hampir selesai dijalankan.
Contohnya,

...
function checkInput(){
document.getElementById("pOperator").innerHTML=this.innerHTML;
calculate();
}
...
3.2. Tambah arahan di dalam function calculate()  untuk menyemak nilai pOperator terlebih dahulu dan melaksanakan arahan berdasarkan nilai pOperator.
Contohnya,

...
function calculate(){
switch(document.getElementById("pOperator").innerHTML){
   case "+": console.log("add");break;
   case "-": console.log("minus");break;
   case "*": console.log("multiply");break;
   case "/": console.log("divide");break;
}
}
...
Dalam contoh di atas, kita menggunakan Struktur Kawalan (Control Structure) Switch untuk menyemak nilai pOperator. Sebagai contohnya, jika nilai itu “+”, maka laksanakan arahan tertentu. Begitulah turut berlaku bagi “-”, “*” dan “/”.
3.3. Jika diperhatikan formula asal, ia agak panjang dan mungkin boleh mengelirukan. Gunakan variable untuk menggantikan kod yang panjang.
Contohnya,

...
function calculate(){
var inputOperand1=document.getElementById('inputOperand1');
var inputOperand2=document.getElementById('inputOperand2');
var outputMessage=document.getElementById('outputMessage');
outputMessage.value =inputOperand1.value + inputOperand2.value;
}
...
Dalam contoh di atas, kita telah mencipta variable untuk mewakili objek UI. Hasilnya adalah sama tetapi cara kod ditulis lebih mudah dibaca.
3.4. Gabungkan kod pada Langkah 3.2. dan 3.3.
Contohnya,

...
function calculate(){
var inputOperand1=document.getElementById('inputOperand1');
var inputOperand2=document.getElementById('inputOperand2');
var outputMessage=document.getElementById('outputMessage');
switch(document.getElementById("pOperator").innerHTML){
   case "+": outputMessage.value= parseInt(inputOperand1.value) + parseInt(inputOperand2.value);
break;
   case "-":  outputMessage.value= parseInt(inputOperand1.value) - parseInt(inputOperand2.value);
break;
   case "*":  outputMessage.value= parseInt(inputOperand1.value) * parseInt(inputOperand2.value);
break;
   case "/":  outputMessage.value= parseInt(inputOperand1.value) / parseInt(inputOperand2.value);
break;
}
}
...
Dalam contoh di atas, kita menggunakan Struktur Kawalan (Control Structure) Switch untuk menyemak nilai pOperator dan melaksanakan operasi matematik berdasarkan nilai pOperator tersebut.
Kod penuh adalah seperti berikut.

<html>
<input id="inputOperand1" type="number" value=0 />
<br/>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<p id="pOperator">+</p>
<input id="inputOperand2" type="number" value=0 />
<p id="pEqual">=</p>
<input id="outputMessage" type="text" value=0 />
</html>
<script>
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = checkInput;
    }
    function checkInput() {
        document.getElementById("pOperator").innerHTML = this.innerHTML;
        calculate();
    }
    function calculate() {
        var inputOperand1 = document.getElementById('inputOperand1');
        var inputOperand2 = document.getElementById('inputOperand2');
        var outputMessage = document.getElementById('outputMessage');
        switch (document.getElementById("pOperator").innerHTML) {
            case "+":
                outputMessage.value = parseInt(inputOperand1.value) + parseInt(inputOperand2.value);
                break;
            case "-":
                outputMessage.value = parseInt(inputOperand1.value) - parseInt(inputOperand2.value);
                break;
            case "*":
                outputMessage.value = parseInt(inputOperand1.value) * parseInt(inputOperand2.value);
                break;
            case "/":
                outputMessage.value = parseInt(inputOperand1.value) / parseInt(inputOperand2.value);
                break;
        }
    }
    document.getElementById('inputOperand1').oninput = calculate;
    document.getElementById('inputOperand2').oninput = calculate;
</script>
Program ini sudah boleh melaksanakan operasi campur, tolak, darab dan bahagi.

4. Ralat Matematik.

Program ini kelihatan dapat melaksanakan empat operasi matematik dengan baik. Walaubagaimanapun terdapat satu ralat iaitu apabila operasi darab melibatkan nilai 0 pada operand2.
Nilai “infinity” dipaparkan kerana operasi bahagi terhadap nombor kosong menghasilkan nilai tak tertakrif.
Kita boleh membiarkan keadaan seperti ini. Namun, adalah lebih baik jika kita mengesan kemungkinan ini sebelum ralat itu berlaku. Ini dipanggil Error Trapping.

5. Error Trapping.

Ubahsuai kod di atas seperti berikut.

<html>
<input id="inputOperand1" type="number" value=0 />
<br/>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<p id="pOperator">+</p>
<input id="inputOperand2" type="number" value=0 />
<p id="pEqual">=</p>
<input id="outputMessage" type="text" value=0 />
</html>
<script>
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = checkInput;
    }
    function checkInput() {
        document.getElementById("pOperator").innerHTML = this.innerHTML;
        calculate();
    }
    function calculate() {
        var inputOperand1 = document.getElementById('inputOperand1');
        var inputOperand2 = document.getElementById('inputOperand2');
        var outputMessage = document.getElementById('outputMessage');
        switch (document.getElementById("pOperator").innerHTML) {
            case "+":
                outputMessage.value = parseInt(inputOperand1.value) + parseInt(inputOperand2.value);
                break;
            case "-":
                outputMessage.value = parseInt(inputOperand1.value) - parseInt(inputOperand2.value);
                break;
            case "*":
                outputMessage.value = parseInt(inputOperand1.value) * parseInt(inputOperand2.value);
                break;
            case "/":
                if (parseInt(inputOperand2.value) != 0) {
                    outputMessage.value = parseInt(inputOperand1.value) / parseInt(inputOperand2.value)
                } else {
                    outputMessage.value = "error. Division by zero."
                };
                break;
        }
    }
    document.getElementById('inputOperand1').oninput = calculate;
    document.getElementById('inputOperand2').oninput = calculate;
</script>
Dalam contoh di atas, kita menambahkan kod Error Trapping di mana kita cuba mengesan nilai yang memungkinkan ralat berlaku dan menyediakan arahan alternatif baginya. Dalam kata lain, jika nilai itu bukan 0, laksanakan operasi bahagi. Sebaliknya, papar “error. Division by zero”.
Kaedah ini adalah lebih baik daripada membiarkan komputer melaksanakan arahan yang mengandungi nilai yang salah.
Dalam tutorial seterusnya, kita akan membina aturcara dalam bentuk tipikal kalkulator.
.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)