Cara mudah untuk mempelajari JavaScript
1. JavaScript adalah sejenis Bahasa Pengaturcaraan. Mempelajari JavaScript bukan sahaja memberi kelebihan dalam dunia Web, malah membuka peluang dalam bidang pembangunan permainan komputer dan pembangunan aplikasi mobile.
2. Cara menulis dan menggunakan kod JavaScript juga mudah. Seseorang hanya memerlukan perisian penyunting teks (Text Editor Program) dan pelayar web (Web Browser). Malah, khidmat online seperti http://htmledit.squarefree.com/ sangat praktikal bagi sesiapa yang mahu mula belajar.
3. Soalnya, bagaimanakah cara yang mudah untuk belajar JavaScript bermula dari Zero hingga akhirnya menjadi Hero?
4. Cara mudah mempelajari JavaScript atau apa jua bahasa pengaturcaraan adalah dengan memahami konsep INPUT-PROCESS-OUTPUT (IPO). Pada asasnya semua bahasa pengaturcaraan akan melakukan aktiviti ini.
4.1. INPUT- Aktiviti mengambil data dari pengguna.
4.2. PROCESS- Aktiviti memproses data tersebut.
4.3. OUTPUT- Aktiviti memulangkan hasil pemprosesan data kepada pengguna.
Kaedah IPO ini sangat praktikal dan boleh diaplikasi ke atas kebanyakan masalah pengaturcaraan. Apabila berhadapan dengan sesuatu masalah yang memerlukan penyelesaian dalam bentuk aturcara komputer, seseorang pengaturcara akan menggunakan kaedah ini terlebih dahulu sebelum menggunakan kaedah lain yang lebih rumit.
5. Contoh tujuan aturcara yang klasik dan popular ialah aturcara mesin pengira (Calculator Program). Jika kita mahu menggunapakai konsep IPO tadi terhadap mesin pengira, ia akan menjadi seperti berikut.
(Andaikan mesin ini mahu mengira harga barang selepas cukai GST 6% dikenakan)
5.1. INPUT-Dapatkan nilai harga jualan sebelum GST, priceBeforeGst.
5.2. PROCESS-Kira priceAfterGst=priceBeforeGst * 1.06
5.3. OUTPUT-Pulangkan nilai priceAfterGst kepada pengguna.
6. Seterusnya, pengaturcara akan menterjemah idea mengikut kaedah IPO di atas kepada bentuk aturcara, ie JavaScript. Perkataan priceBeforeGst dan periceAfterGst adalah mewakili data. Maka kita perlu mencipta tempat menyimpan data ini, atau dipanggil sebagai variable.
Tulis semula idea IPO kepada bentuk kod JavaScript:
| <script> //cipta variable var priceBeforeGst =0; var priceAfterGst=0; //INPUT priceBeforeGst= prompt("Price before tax?", 0); //PROCESS priceAfterGst=priceBeforeGst*1.06; //OUTPUT document.writeln("Price after tax =" + priceAfterGst); </script> |
Hasilnya,
Selepas kita memasukkan nilai 10, maka hasilnya,
Web Browser akan memaparkan nilai 10.60 (buat masa ini, abaikan dahulu tempat perpuluhan yang lain kerana ia mungkin ralat dalam mengira nombor pecahan)
7. Contoh di atas adalah mudah dan ringkas tentang bagaimana kaedah IPO digunakan untuk merancang penulisan kod aturcara JavaScript. Dari contoh yang ringkas dan mudah ini, Calculator Program ini boleh dikembangkan lagi kepada bentuk yang lebih rumit contohnya paparan yang mempunyai kotak bagi diisi oleh pengguna.
8. Katakan kita mahu membina Antara Muka (User Interface, UI) yang mempunyai dua kotak teks, kita boleh menulis kod html sepeti berikut.
| <html> Price Before GST: <br/> <input id="price1" type=number onchange="calcPriceAfterGst()"/> <br/> Price After GST: <br/> <input id="price2" type=number /> <br/> </html> |
Hasilnya,
UI sudah tersedia. Secara konsepnya, pengguna akan memasukkan nilai pada kotak pertama (berlabel Price Before GST). Selepas pengguna memasukkan nilai dan menekan kekunci ENTER, komputer akan mengira dan mengeluarkan output pada kotak kedua. Kita memerlukan JavaScript untuk melakukan tugas ini.
9. Dengan menggunakan kaedah IPO
9.1. INPUT- Dapatkan nilai priceBeforeGST dari kotak input pertama.
9.2. PROCESS-Kira priceAfterGst=priceBeforeGst * 1.06
9.3. OUTPUT-Pulangkan nilai priceAfterGst kepada pengguna melalui kotak input kedua.
10. Sekarang kita akan menterjemah idea IPO di atas kepada kod JavaScript. Secara konsepnya, kod ini serupa dengan kod dalam Langkah 6 tetapi mempunyai penambahan berikut:
a. Olehkerana cara mendapatkan nilai input dan mengeluarkan hasil pemprosesan memerlukan hubungan dengan kotak input pertama dan kedua, kita akan menggunakan arahan document.getElementById({{id}}).value untuk berhubung dengan kedua-dua input box tersebut.
b. Kita akan memasukkan attribute onchange="calcPriceAfterGst()" sebagai cara untuk memanggil function dan memproses nilai sesudah pengguna menekan kekunci ENTER.
Kod penuh akan menjadi seperti berikut:
<html>
Price Before GST: <br/> <input id="price1" type=number onchange="calcPriceAfterGst()"/> <br/> Price After GST: <br/> <input id="price2" type=number /> <br/> </html> <script> function calcPriceAfterGst(){ //cipta variable //INPUT var priceBeforeGst =document.getElementById("price1").value; var priceAfterGst=0; //PROCESS priceAfterGst=priceBeforeGst*1.06; //OUTPUT //document.writeln("Price after tax =" + priceAfterGst); document.getElementById("price2").value=priceAfterGst; } </script> |
Hasilnya,
Catatan: Kod <script>...</script> hendaklah berada kemudian dari kod <html>...</html> jika tidak JavaScript tidak dapat menjumpai id "price1" dan "price2". Ini adalah kerana Web Browser melaksanakan arahan dari atas ke bawah. Maka, selepas input box dipaparkan di skrin, barulah kod JavScript dijalankan untuk mengesan id bagi inputbox tadi.
.
