Monday, December 5, 2016

Cara Membina Aturcara Kalkulator HTML5 3

part 3
Posted by at No comments:

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:

Friday, December 2, 2016

Cara Membina Aturcara Kalkulator HTML5 Part 1


.
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>


Dalam tutorial yang berikutnya, kita akan menggunakan Buttons sebagai salah satu mekanisma input.
.
Posted by at No comments:
Subscribe to: Posts (Atom)