Kod arahan

4.1Kod arahan

Buku teks menggunakan dua alat dalam bahagian ini. Pseudokod dan carta alir menulis algoritma. Perisian Scratch 2.0 menyusun blok arahan menjadi atur cara. Dalam Scratch, kita menyusun blok, bukan menaip kod.

4.1.1 Pemboleh ubah dan operator matematik

Pemboleh ubah mewakili data yang hendak dimasukkan ke dalam program. Apabila program diuji lari, pemboleh ubah digantikan dengan data yang sebenar. Oleh itu satu program boleh memproses set data yang berlainan.

Contoh: luas segi empat sama sisi (Praktis Aplikasi 4.1, ms. 95)

Atur cara Scratch meminta pengguna memasukkan ukuran sisi. Input disimpan dalam pemboleh ubah answer. Komputer menggunakan operator darab: answer * answer. Jika pengguna menaip 6, luas = 6 * 6 = 36.

Buku teks Asas Sains Komputer Tingkatan 1, ms. 95.

4.1.2 Struktur kawalan pelbagai pilihan

Sesuatu program mungkin mempunyai beberapa pilihan arahan. Pilihan yang dilaksanakan bergantung kepada syarat tertentu. Struktur kawalan ini disebut pelbagai pilihan. Contohnya, pemandu memilih laluan: jika mahu masa paling singkat, pilih Laluan 1; jika mahu jalan tanpa tol, pilih Laluan 2 (Rajah 4.2, ms. 96).

Pseudokod bagi umur pengguna (Rajah 4.3, ms. 97)

MULA
   MASUKKAN umur
   JIKA umur lebih daripada 59,
      PAPARKAN “Anda ialah seorang warga emas.”
   JIKA umur lebih daripada 30,
      PAPARKAN “Anda ialah seorang dewasa.”
   JIKA umur lebih daripada 14,
      PAPARKAN “Anda ialah seorang belia.”
   JIKA umur lebih daripada 12,
      PAPARKAN “Anda ialah seorang awal remaja.”
   JIKA TIDAK
      PAPARKAN “Anda masih kanak-kanak.”
   TAMAT JIKA
TAMAT

Buku teks Asas Sains Komputer Tingkatan 1, ms. 97.

Kata kunci pseudokod: MULA dan TAMAT menanda permulaan dan akhir; MASUKKAN mengambil input; JIKA menguji syarat; JIKA TIDAK ialah pilihan terakhir apabila semua syarat gagal; PAPARKAN menunjukkan output; TAMAT JIKA menutup struktur pilihan.

Dalam Scratch, program ini dibina dengan blok ask … and wait, if … then, else dan say … for 2 secs (Praktis Aplikasi 4.2, ms. 98).

Buku teks Asas Sains Komputer Tingkatan 1, ms. 98.

4.1.3 Struktur kawalan ulangan

Contoh: pemandu memandu sekeliling tempat letak kereta selagi tidak jumpa parkir kosong. Apabila jumpa parkir kosong, tindakan berulang berakhir (Gambar foto 4.1, ms. 99).

Dalam Scratch 2.0 ada tiga blok ulangan (ms. 101):

Buku teks Asas Sains Komputer Tingkatan 1, ms. 101.

Praktis Aplikasi 4.4: blok forever menggerakkan peperi ke kiri dan kanan tanpa berhenti. Gantikan dengan repeat dan repeat until, kemudian catat perbezaannya.

Dalam pseudokod, Bab 3 mengajar struktur UNTUK, SELAGI dan ULANG-SEHINGGA. Contoh jejak (dikira sendiri):

MULA
   SETKAN n kepada 1
   SETKAN jumlah kepada 0
   SELAGI n <= 4
      SETKAN jumlah kepada jumlah + n * 3
      TAMBAH 1 kepada n
   TAMAT SELAGI
   PAPARKAN jumlah
TAMAT

Output ialah 30.

4.1.4 Pembangunan atur cara

Pembangunan atur cara ada lima fasa utama.

Contoh: atur cara kuiz darab (ms. 103 hingga 107)

Langkah 1, analisis: paparkan soalan hasil darab dua nombor rawak antara 1 dengan 20; simpan jawapan dalam pemboleh ubah; tunggu input; jika “X”, berhenti; jika betul, paparkan “Tahniah!” dan tambah bilangan betul; jika salah, paparkan “Maaf! Jawapan betul ialah …”.

Langkah 2, reka bentuk (pseudokod):

MULA
  PAPARKAN arahan soalan
  PAPARKAN bilangan soalan yang dijawab betul
  JANAKAN dua nombor secara rawak daripada nilai 1 hingga 20
  HITUNG hasil darab bagi dua nombor itu
  PAPARKAN kedua-dua nombor itu
  TANYA soalan
  TUNGGU input pengguna
    JIKA input pengguna ialah “X”
      HENTIKAN kuiz
    JIKA TIDAK
      SEMAK input pengguna
          JIKA jawapan betul
              PAPARKAN mesej “Tahniah!”
          JIKA TIDAK
              PAPARKAN mesej “Maaf! Jawapan betul ialah …”
              KEMASKINI bilangan soalan yang dijawab betul
          TAMAT JIKA
    TAMAT JIKA
TAMAT

Buku teks Asas Sains Komputer Tingkatan 1, ms. 103.

Langkah 3, pengekodan dalam Scratch: bina pemboleh ubah Bilangan betul, Jawapan, nombor 1 dan nombor 2 (Data, Make a Variable). Pemboleh ubah Jawapan disembunyikan (hide variable) supaya jawapan tidak ditunjukkan dahulu. Gelung forever mengulang soalan. * ialah operator darab. Blok if … else menyemak answer dengan Jawapan.

Buku teks Asas Sains Komputer Tingkatan 1, ms. 104.

Langkah 4, pengujian: Stage menunjukkan arahan, soalan (contoh 5 × 14), mesej “Tahniah!” dengan bilangan betul bertambah satu, atau “Maaf! Jawapan betul ialah 99”. Langkah 5, dokumentasi: laporan proses pembangunan dari awal hingga akhir.

Contoh 4.1: kuiz empat soalan (ms. 106)

Setiap soalan ialah satu atur cara kecil. Soalan 1 hingga 3 memanggil soalan seterusnya; Soalan 4 memanggil mesej tamat kuiz.

MULA
   SIMPAN jawapan betul dalam
   pemboleh ubah Betul
   PAPARKAN Soalan 1
   BACA input jawapan murid
   JIKA jawapan murid betul
        PAPARKAN mesej “Tahniah!”
   JIKA TIDAK
        PAPARKAN mesej “Maaf!
        Jawapannya ialah …”
   TAMAT JIKA
   MEMANGGIL Soalan 2 untuk bermula
TAMAT

MULA
   PAPARKAN mesej “Terima kasih kerana
   mengambil kuiz ini.”
TAMAT

4.1.5 Menguji atur cara dan membaiki ralat

Ralat menyebabkan atur cara tidak berfungsi dengan betul. Atur cara boleh tamat tiba-tiba (nahas, crash), tergantung (hang) atau memberi output yang salah. Ralat boleh berlaku pada algoritma, pseudokod, carta alir atau kod arahan.

Teknik langkah demi langkah (step through) menjalankan atur cara satu blok pada satu masa (Praktis Aplikasi 4.7, ms. 109).

Contoh mencari ralat: atur cara kuiz Praktis Aplikasi 4.7 (ms. 109)

Buku teks Asas Sains Komputer Tingkatan 1, ms. 109.

Latihan ini sengaja mengandungi ralat; murid diminta mengesannya. Bandingkan dengan pseudokod. Ralat yang boleh dikesan: Soalan 1 menggunakan stop all selepas broadcast Soalan 2 sehingga semua skrip berhenti; Soalan 2 menyiar Tamat Kuiz, bukan Soalan 3; Soalan 3 menetapkan Betul = 36 (9 * 4) tetapi mesej menyebut 35; Soalan 4 menetapkan Betul = 12 tetapi 55 / 5 = 11; dan Soalan 4 menyiar Soalan 4 dan bukan tamat kuiz.

4.2Kod arahan HTML

Fail HTML dibaca oleh pelayar web. Kod HTML boleh ditaip dalam Notepad dan disimpan dengan sambungan .html atau .htm. Fail yang dibuka dalam pelayar menunjukkan hasilnya (Rajah 4.7 dan 4.8, ms. 111).

<html>
<head>
<title>Kenapa Saya Suka Bersukan</title>
</head>
<body>
<h1>Kenapa Saya Suka Bersukan</h1>
<p>Saya memang suka bersukan. Setiap hari saya akan bersukan di padang berdekatan rumah saya.</p>
<p>Saya suka bersukan sebab:</p>
<ul>
<li>Bersukan baik untuk kesihatan.</li>
<li>Bersukan membina minda yang cergas.</li>
<li>Bersukan memberi kebahagiaan.</li>
</ul>
</body>
</html>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 111 (Rajah 4.7).

4.2.1 Melakar papan cerita

Papan cerita memberi gambaran visual dan membantu pengatur cara bekerja dengan teratur. Ia menunjukkan reka bentuk dan reka letak antara muka, serta aliran navigasi. Kebaikannya (Rajah 4.9): mengetahui bilangan laman, maklumat yang perlu dimasukkan dan aliran antara laman; guru boleh menerangkan struktur laman dengan kasar.

Soalan semasa melakar (Rajah 4.10): maklumat apa yang disampaikan? Apa yang pengunjung hendak lakukan? Bagaimana pengunjung selesa? Bagaimana membimbing pengunjung melawat semua laman dalam tapak? Bagaimana memastikan pengunjung dapat melawat semua laman? Bagaimana memberi maklumat tambahan? Dapatkah pengunjung memberi komen?

Maklumat di Internet perlu sahih. Ada laman yang berunsur fitnah dan penipuan.

4.2.2 Tag dalam HTML

<html>
<head>
<title> Kelebihan Buah-buahan Tempatan </title>
</head>
<body>
<p> Kelebihan Buah-buahan Tempatan. </p>
<p> Buah-buah tempatan mempunyai banyak khasiat. </p>
<p> Buah-buahan tempatan juga murah jika dibandingkan dengan buah-buahan yang diimport.</p>
<p> Kebanyakan buah-buahan tempatan boleh didapati sepanjang tahun. </p>
</body>
</html>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 118. Simpan sebagai Buah-buahan tempatan.html dalam folder HTML Saya (File, Save As). Dalam gambar buku, baris kedua tertinggal </p> (dan ditulis “Buah-buah”); di sini tag akhir sudah ditambah.

Hasilnya: tab menunjukkan “Kelebihan Buah-buahan Tempatan” dan badan laman menunjukkan empat perenggan berasingan.

4.2.3 Paragraph headings dalam HTML

Paragraph headings mengarahkan pelayar memaparkan teks dengan saiz tertentu. Ada enam saiz, dari h1 (terbesar) hingga h6 (terkecil). Heading 1 digunakan sebagai tajuk utama, diikuti Heading 2 dan seterusnya. Ini menyusun struktur laman dan memudahkan bacaan.

<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Ini adalah Heading1</h1>
<h2>Ini adalah Heading2</h2>
<h3>Ini adalah Heading3</h3>
<h4>Ini adalah Heading4</h4>
<h5>Ini adalah Heading5</h5>
<h6>Ini adalah Heading6</h6>
</body>
</html>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 119 (Rajah 4.14).

4.2.4 Banner, frame dan menu

Banner, frame dan menu menarik pengguna melawat laman dan memudahkan navigasi. Rajah 4.15 menunjukkan bahagian-bahagian laman Kementerian Pendidikan Malaysia.

Buku teks Asas Sains Komputer Tingkatan 1, ms. 121.

Banner (Rajah 4.16, ms. 122 dan 123)

Muat turun logo KPM, simpan dalam folder HTML Saya sebagai logoKPM.jpg. Taip kod berikut dan simpan sebagai banner.html.

<html>
<head>
<title> Banner </title>
</head>
<body>
<banner>
<img src="logoKPM.jpg">
</banner>
</body>
</html>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 123. Hasilnya: logo Kementerian Pendidikan Malaysia dipaparkan pada laman.

<img src="…"> ialah tag memasukkan imej. Lokasi imej menentukan nilai src:

<img src="logoKPM.jpg">              imej dalam folder yang sama
<img src="D:\Grafik\logoKPM.jpg">    imej di lokasi lain dalam komputer
<img src=http://images.freeimages.com/images/previews/15f/apple-1329126.jpg>    imej di laman sesawang (URL)

Frame (Rajah 4.17 dan 4.18, ms. 124 hingga 126)

Frame ada ruang melintang, menegak atau gabungan. Frame melintang menggunakan rows dalam <frameset>; frame menegak menggunakan cols. Tanda * bermaksud bingkai itu sama saiz. Setiap bingkai memaparkan laman lain dengan src="nama dokumen.html".

<html>
<head>
<title> Contoh Frame </title>
</head>
<frameset rows="*,*,*">
<frame name="Frame1">
<frame name="Frame2">
<frame name="Frame3">
</frameset>
<body>
</body>
</html>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 126. Simpan sebagai frame.html. Tag menutup </frameset> perlu ada.

Contoh tag lain dalam buku (ms. 124 dan 125), setiap satu berasingan:

<frameset rows="70%,30%">
<frameset cols="*,*,*">
<frame name="frame1" src="nama dokumen1.html">
<frame name="frame2" src="nama dokumen2.html">
<frame name="frame3" src="nama dokumen3.html">

Menu (Jadual 4.3 dan 4.4, ms. 126)

Cipta empat fail Menu1.html hingga Menu4.html (tukar tajuk dalam title). Dalam Menu.html, taip kod berikut (Rajah 4.19, ms. 127). Teks buku berkata “di bawah tag title”, tetapi tangkapan skrin meletakkannya di antara <body> dan </body>, iaitu tempat yang betul:

<nav>
<ul>
<li><a href="Menu1.html">Menu1</a></li>
<li><a href="Menu2.html">Menu2</a></li>
<li><a href="Menu3.html">Menu3</a></li>
<li><a href="Menu4.html">Menu4</a></li>
</ul>
</nav>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 127. Hasilnya: senarai empat pautan biru bergaris bawah, Menu1 hingga Menu4 (lihat gambar di bawah 4.2.8).

4.2.5 Pautan teks dan imej

Pautan menjadikan laman interaktif dan dinamik. Pautan teks memudahkan kefahaman isi laman destinasi; pautan imej memberi gambaran isinya. Tag yang digunakan ialah <a> </a> dengan atribut href (destinasi) (Rajah 4.20, ms. 129).

Pautan teks:
<a href="http://moe.gov.my">
Kementerian Pendidikan Malaysia
</a>

Pautan imej:
<a href="http://moe.gov.my">
<img src="logoKPM.jpg">
</a>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 129, diletak di antara <body> dan </body>.

Pautan teks menunjukkan perkataan “Kementerian Pendidikan Malaysia” yang boleh diklik. Pautan imej menunjukkan logo yang boleh diklik. Kedua-duanya membuka laman moe.gov.my.

4.2.6 Memasukkan imej dalam HTML

Tag <img> ialah tag kosong: ia tidak memerlukan tag penutup. Atribut alt memaparkan teks jika imej tidak dapat dipaparkan (contoh tiada rangkaian). Saiz dalam piksel (px) boleh ditakrif dengan dua cara (ms. 131):

<img src="nama imej.gif" alt="Nama Imej" style="width:300px;height:230px;">

Cara pertama (style):
<img src="abc.gif" alt="ABC" style="width:128px;height:128px;">

Cara kedua (width dan height):
<img src="abc.gif" alt="ABC" width="128" height="128">

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 131.

4.2.7 Pull-down menu

Pull-down menu (juga drop-down menu, drop-down list, drop-down box) ialah senarai item yang muncul apabila pengguna mengklik butang atau pilihan teks. Ia memudahkan memilih daripada senarai panjang dan mengelakkan pengguna menaip maklumat yang tidak tepat atau salah eja. Tag <select> </select> menghasilkannya, dan tag <option> di dalamnya menunjukkan setiap pilihan (Rajah 4.22, ms. 133 dan 134).

<html>
<head>
<title> Pull-down menu </title>
<p> Pilih Negeri </p>
</head>
<body>
<select>
   <option value="Johor">Johor</option>
   <option value="Kedah">Kedah</option>
   <option value="Kelantan">Kelantan</option>
   <option value="Melaka">Melaka</option>
   ... (ulang untuk 12 negeri lain dan 3 Wilayah Persekutuan)
</select>
</body>
</html>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 134 (dipendekkan; buku menyenaraikan 16 pilihan dari Johor hingga WP Putrajaya).

4.2.8 Ruang komen

Ruang komen membolehkan pelawat memberi maklum balas kepada pentadbir laman. Tag <form> </form> dan <textarea> </textarea> diletak dalam body. Textarea boleh memuatkan aksara tanpa had; saiznya ditetapkan dengan atribut cols dan rows (ms. 135 dan 136).

<form method='post'>
Komen: <p>
   <textarea name='komen' id='komen'></textarea>
   <p>
   <input type='submit' value='Hantar'>
</form>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 136 (versi pada kotak penerangan; tangkapan skrin Rajah 4.23 menaip kod yang sedikit berbeza, dengan <br/> dan satu input tersembunyi berkod PHP). form menyediakan ruang input teks; textarea untuk teks panjang (banyak barisan); input membolehkan pengguna menghantar input.

4.2.9 Mengesan ralat dalam HTML

Jika output tidak seperti yang dikehendaki, atur cara mempunyai ralat. Langkah (Rajah 4.24, ms. 137): 1. uji lari atur cara dengan membuka fail dalam pelayar; 2. bandingkan laman yang dipaparkan dengan apa yang dijangkakan dan kenal pasti ralat; 3. teliti semula kod HTML; 4. baiki ralat. Proses ini ialah kitar yang berterusan.

Ralat biasa dalam HTML ialah ralat sintaks (kesilapan cara menulis kod, ejaan, tanda baca) dan penggunaan tag di tempat yang salah. Pelayar tidak dapat melaksanakan kod yang ada ralat sintaks.

<html>
<head>
<title> Bunga Raya </title>
</head>
<body>
<p>Bunga raya adalah bunga kebangsaan negara kita.</p>
   <img src="bungaraya.jpg"> <!--gambar bunga raya-->
</body>
</html>

Kod: buku teks Asas Sains Komputer Tingkatan 1, ms. 138 (Rajah 4.25). Komen mengingatkan bahawa fail grafik bungaraya.jpg perlu dimasukkan.

4.2.10 Membina laman sesawang interaktif

Langkah membina (Rajah 4.26 dan Berfikir 4.11, ms. 140 dan 141): pilih topik; lakar papan cerita; taip kod HTML dalam Notepad dengan banner, menu, frame, ruang komen, pull-down menu dan fitur lain; uji oleh kumpulan pengguna (cara penyampaian, isi, fitur tambahan, mesra pengguna, interaktiviti) dan kumpulan pengatur cara web (ralat dan penambahbaikan); lapor.