Modul SK T5 Full

Langkah 5: Menyediakan kuiz pembelajaran dengan menambahkan soalan-soalan, jawapan-
jawapan dan imej/gambar
Ikut arahan di skrin (on-screen) untuk memasukkan soalan-soalan, jawapan-jawapan, imej
dan klip video. Anda boleh juga menetapkan masa menjawab kuiz dengan menggunakan
timer, masukkan markah yang berbeza atau menetapkan bilagan jawapan yang betul.

Langkah 6: Buat Carian Kuiz
Membuat carian dan memilih kuiz yang telah disediakan sebelumnya dengan mengklik
“Play”.

Langkah 7: Lancarkan kuiz supaya dapat disertai oleh murid.
 Tentukan Game Options. Klik Classic jika setiap orang menggunakan satu
peralatan/peranti, dan klik Team Mode sekiranya satu alat atau peranti dikongsi oleh
setiap ahli dalam kumpulan.

 Satu PIN Permainan (Game PIN) yang unik akan dipaparkan di bahagian sebelah atas
skrin. Murid perlu melayari laman di https://kahoot.it dan memasukkan Game PIN.
Murid kemudian perlu memasukkan nama masing-masing (nickname) sebelum
memulakan kuiz.

Langkah 8: Menyertai Kahoot
Klik “Start” setelah melihat semua nama peserta/murid di “lobby” ataupun skrin
“menunggu”. Semasa sesi kuiz berjalan, space bar atau tetikus boleh digunakan jika ingin
berpindah ke soalan seterusnya.

Di akhir kuiz, klik Feedback and Results, dan seterusnya Final Results untuk menyimpan
(save) serta muat turun (download) markah-markah murid.

Lampiran 8

Soalan Kahoot

1. Berikut merupakan antara komponen yang diperlukan untuk memproses sebuah atur
cara Javascript kecuali _____ ?

A. pengkompil C. perisian pengedit
B. pelayar web D. penterjemah

2. Selva menaip sebuah atur cara Javascript menggunakan campuran huruf besar dan kecil
untuk beberapa komponen HTML. Walau bagaimanapun, atur cara tersebut tidak dapat
diproses oleh pelayar web. Selva gagal mengenalpasti apakah kesilapan tersebut.

Sifat Javascript yang mana satukah di antara berikut yang mungkin tidak disedari oleh
Selva?

A. loosely-typed
B. dinamik
C. sensitif-huruf (case-sensitive)
D. tidak perlu diterjemah

3. JavaScript digunakan untuk mejadikan suatu laman web interaktif. Yang manakah di
antara berikut BUKAN merupakan kegunaan JavaScript?

A. menyimpan maklumat pengguna secara kekal di laman web
B. melaksanakan pengesahihan pada borang web
C. bertindakbalas terhadap arahan (event) daripada pengguna
D. Memasukkan input secara dinamik ke dalam laman HTML

MATA PELAJARAN: SAINS KOMPUTER

STANDARD KANDUNGAN : 3.1 Bahasa Penskripan Klien (Client Side
MASA : Scripting Language)
TINGKATAN : 1 jam 20 minit
5

STANDARD PEMBELAJARAN

3.1.2 Menterjemah atur cara mudah yang dari Bahasa Penskripan Klien Javascript kepada
carta alir (untuk bubble sort, selection sort, binary search, max/min/mean, count, queue)

OBJEKTIF:
Murid akan dapat:

● Merancang algoritma berdasarkan kod sumber yang dikaji.
● Mengenalpasti langkah-langkah atau algoritma yang terlibat di dalam pembinaan sebuah

atur cara Javascript bagi melakukan fungsi-fungsi tertentu.
● Menganalisa kandungan kod sumber Javascript untuk mengenalpasti bahagian input,

proses dan output melalui penggunaan carta alir.

BAHAN BANTU MENGAJAR:
 Pelayar web
 Perisian pengedit Notepad++
 Komputer/Tablet
 Perisian Pemproses Perkataan MS Word atau Visio (untuk melukis carta alir).
 Perisian Persembahan MS Powerpoint

GLOSSARI:
 bubble sort – Teknik isihan tatasusunan mudah yang membandingkan setiap pasangan nilai
bersebelahan di dalam tatasusunan dan mengubah kedudukan keduanya sekiranya berada di
dalam turutan yang salah.
 selection sort – Teknik isihan tatasusunan di mana senarai elemen dibahagikan kepada dua
bahagian kiri (terisih) dan kanan (tidak terisih) dan nilai min perlu dicari pada setiap

langkah.
 binary search – Teknik carian di dalam tatasusunan dengan membahagikan carian kepada

dua bahagian secara berulang kali sehingga nilai carian dijumpai.
 max/min – Nilai paling besar atau kecil melalui perbandingan di antara 2 atau lebih elemen.
 mean – Purata bagi dua atau lebih elemen, membahagikan jumlah dengan bilangan

elemen.
 count – Nilai frekuensi/kekerapan yang berlaku bagi suatu elemen.
 FIFO - First-In-First Out atau Masuk Dulu, Keluar Dulu (MDKD).
 queue – Sejenis struktur data untuk menyimpan elemen secara berturutan dengan teknik

FIFO

PERSEDIAAN SEBELUM KELAS MASA: Tiada

Guru harus:

 Menyediakan sebuah video berkaitan proses pemasangan sebuah kereta (Slaid
Lampiran 1- Lesson 20.pptx).

 Menyediakan suatu contoh atur cara Javascript mudah yang telah diterjemah
kepada carta alir berkaitan (Lampiran 2).

 Menyediakan 6 kod pengaturcaraan Javascript yang masing-masing melaksanakan
fungsi berikut (Lampiran 3):
o bubble sort
o selection sort
o binary search
o max/min/mean
o count
o queue

 3 contoh permasalahan pendek yang telah diselesaikan menggunakan Javascript
tetapi perlu diterjemahkan kepada bentuk carta alir (Lampiran 4).

SET INDUKSI MASA: 10 minit

 Murid diminta menonton paparan video melalui slaid seperti Lampiran 1.

 Guru bertanya kepada murid (seperti soalan di dalam slaid):

1. Apakah komponen-komponen penting sebuah kereta?

2. Senaraikan turutan langkah-langkah yang terlibat di dalam proses

pemasangan sebuah kereta

 Murid dibahagikan kepada 6 kumpulan bagi membincangkan soalan-soalan yang
diberikan. Setiap kumpulan dikehendaki melukis carta alir menggunakan perisian
Microsoft Word bagi menerangkan semula langkah-langkah membina X dan
membentangkan hasil perbincangan mereka di hadapan kelas.

 Guru memberi penerangan ringkas tentang maksud dan kegunaan setiap simbol.

 Murid diminta mula memikirkan serta mengaitkan jawapan mereka dengan dunia
pengaturcaraan. Cadangan jawapan disediakan di penghujung slaid di Lampiran 1.

MEMUPUK PEMAHAMAN MASA: 35 minit

Pengenalan kepada atur cara, algoritma dan carta alir.

 Guru menerangkan tentang konsep dan tujuan carta alir digunakan di dalam
membina sebuah atur cara.

 Guru menunjukkan 1 contoh carta alir yang mewakili sebuah atur cara Javascript
yang melakukan pengiraan ukurlilit dan luas sebuah segiempat tepat.

 Contoh atur cara dan carta alir seperti di Lampiran 2.

Aktiviti berkumpulan :

1. Murid dibahagikan kepada 6 kumpulan.
2. Guru memaparkan 6 atur cara web mudah yang menggunakan bahasa penskripan

klien (HTML + Javascript).
3. Setiap kumpulan diberi masa selama 35 minit untuk menterjemahkan setiap atur

cara tersebut (bubble sort, selection sort, binary search, max/min/mean, count,
queue) ke dalam bentuk carta alir. Senarai atur cara serta carta alir seperti di
Lampiran 3.

Setiap kumpulan membentangkan carta alir bagi 1 atur cara yang telah ditetapkan. Guru
meminta kumpulan lain untuk mengulas serta membuat pembetulan sekiranya terdapat
kesalahan pada carta alir yang dibentangkan atau sekiranya ada cadangan pembaikan.

PENYERTAAN SECARA AKTIF MASA: 35 minit

Aktiviti Berkumpulan 1:

1. Murid diminta membentuk 5-6 kumpulan.
2. Murid dipaparkan dengan atur cara penskripan klien (HTML + Javascript) mudah

pada pembelajaran yang lepas.
3. Setiap kumpulan diminta menganalisis dan melihat penggunaan kod/sintak atur

cara tersebut. Murid perlu menjelaskan apa yang dilaksanakan oleh atur cara
tersebut. Contoh penggunaan nilai data adalah digalakkan. Perbincangan selama 10
minit.
4. Seorang ahli kumpulan menjadi jurucakap bagi setiap kumpulan. 20 minit untuk
membentangkan kesimpulan dan dapatan kumpulan masing-masing.

Aktiviti Berkumpulan 2:

1. Murid diminta membentuk 6 kumpulan.
2. Guru meminta murid mengulangi proses membina algoritma menggunakan carta

alir. Guru menyediakan 3 permasalahan di mana setiap 2 kumpulan akan berkongsi
permasalahan yang sama.
3. Murid diminta membina algoritma di dalam bentuk carta alir berdasarkan masalah
tersebut tanpa cuba menulis sebarang kod atur cara.
4. Permasalahan dan cadangan jawapan seperti di Lampiran 4.

KESIMPULAN MASA: 3 minit

Guru bertanya kepada murid:

 Apakah kegunaan algoritma di dalam proses pengaturcaraan?
 Bagaimana algoritma dibuat di dalam proses pembangunan atur cara Javascript?
 Bagaimana carta alir dapat membantu seseorang pengaturcara memahami proses

pengaturcaraan dengan lebih baik?

Guru membuat kesimpulan ringkas berkaitan kaedah menukar kod pengaturcaraan kepada
algoritma menggunakan carta alir berdasarkan kod sumber Javascript.

TOPIK AKAN DATANG MASA: 2 minit

Guru membincangkan tentang kepentingan penggunaan pemalar, pemboleh ubah dan jenis-
jenis data dalam bahasa penskripan klien JavaScript bagi membolehkan suatu atur cara itu
berfungsi dengan sempurna.

10/27/2018

Proses
Pemasangan
Kereta

Berfikir di dalam konteks
algoritma

Apakah komponen penting di dalam sebuah
kereta?
Senaraikan turutan langkah-langkah yang
terlibat di dalam proses pemasangan sebuah
kereta

1

10/27/2018

Pengenalan kepada Algoritma dan Carta Alir

Apa itu algoritma ? MASALAH
Suatu set aturan atau langkah-langkah untuk
menyelesaikan masalah ?
Langkah-langkah secara tertib, jelas dan berkesan
Memudahkan penganalisaan dibuat ke atas
penyelesaian untuk tujuan penambahbaikan

Apa itu carta alir ? IDEA !
Kaedah grafik bagi mewakili langkah-langkah
penyelesaian sesuatu masalah yang berhubung kait di PENYELESAIAN
antara satu sama lain
Mengandungi simbol geometrik yang dihubungkan
dengan anak panah
Dilaksanakan di dalam turutan dari atas ke bawah

Komponen-komponen Penting Sebuah Kereta

bumbung

panel sisi tingkap hood enjin
belakang headlight
front
lampu fender
belakang

bumper pintu bumper
belakang hadapan
trim
muffler roda

2

10/27/2018

Langkah-langkah Pemasangan Kereta

1. Menyediakan komponen-komponen kereta 10. Memasang bahagian bumper belakang
2. Mencantumkan bahagian badan kereta 11. Memasang komponen trim
12. Memasang tingkap
melalui kimpalan 13. Memasang roda
14. Memasang lampu kepala (headlight)
3. Mencantumkan front fenders 15. Memasang lampu belakang
4. Memasang panel sisi belakang (rear side 16. Memasang muffler
17. Memasang enjin
panels) 18. Mengeluarkan kereta
5. Memasang bahagian bumbung
6. Memasang bahagian hood
7. Memasang pintu
8. Mengecat kereta
9. Memasang bahagian bumper hadapan

Maksud Simbol Carta Alir

Terminal : Decision (Keputusan) :
Mewakili permulaan Titik keputusan bagi
atau penamat suatu dua atau lebih pilihan
aturcara/proses di dalam carta alir

Data : Predefined Process
Mewakili sebarang jenis (Proses Yang Ditetapkan) :
data masuk (input) dan Mewakili sub-rutin/fungsi
keluar(output) di dalam atau modul tertentu
carta alir
Connector (Penyambung) :
Process (Proses): Mewakili sub-rutin atau
Sebarang fungsi modul tertentu
pemprosesan

3

10/27/2018

Menggunakan Carta Alir Bagi Menerangkan Proses Pemasangan Kereta

1 2 34
Mula

Sediakan Pasang sisi panel Cat kereta Pasang tingkap Pasang muffler
komponen- belakang (rear side
komponen Pasang bumper Pasang roda Pasang enjin
panel) hadapan
kereta Pasang lampu Keluarkan
Pasang bumbung Pasang bumper kepala (headlight) kereta
Cantumkan bahagian- belakang
bahagian badan Pasang hood
kereta melalui
kimpalan

Pasang front fenders Pasang pintu Pasang trim Pasang lampu Tamat
1 2 3 belakang

4

4

LAMPIRAN 1

Rujuk Lesson 20.pptx

LAMPIRAN 2

Mengira ukurlilit dan luas segiempat sama

Contoh atur cara Javascript dan carta alir (rectangle.html)

<!doctype html>
<html>
<head>
<script type="text/javascript">

function kiraLilit()
{

var panjang = document.getElementById("panjang").value;
var lebar = document.getElementById("lebar").value;
document.getElementById("hasil").innerHTML = (panjang*2)+(lebar*2);
}

function kiraLuas() {
var panjang = document.getElementById("panjang").value;
var lebar = document.getElementById("lebar").value;
document.getElementById("hasil").innerHTML = panjang*lebar;

}

</script>
</head>
<body>
<center>
<h3>MENGIRA UKURLILIT DAN LUAS SEGIEMPAT TEPAT</h3>
<div id="mainDiv">
Panjang : <input type="text" id="panjang" value="" size="6">
<br></br>
Lebar&nbsp;&nbsp;&nbsp;: <input type="text" id="lebar" value=""
size="6">
<br></br>
<button onclick="kiraLilit()">Kira Ukurlilit</button>
<button onclick="kiraLuas()">Kira Luas</button>
<p>Jawapan : </p><p id="hasil"></p>
</div>
</center>
</body>
</html>

CARTA ALIR MENGIRA UKURLILIT DAN LUAS SEGIEMPAT TEPAT

Mula
Baca panjang

Baca lebar

Kira ukur lilit Kira luas?

hasil = (2 * panjang) + hasil = panjang +
(2 * lebar) lebar

Papar
hasil

Tamat

LAMPIRAN 3

ATUR CARA 1 (BUBBLE SORT):
Berdasarkan atur cara berikut, lukis carta alir untuk menyusun nombor-nombor yang diberikan
dalam keadaan menaik, dari nombor yang paling rendah ke nombor yang paling paling tinggi
menggunakan kaedah bubblesort.

bubblesort.html

<html>
<body>
<h2> Isihan Buih </h2>
<script type="text/javascript">
var items = [3, -2, 8, -6, 4]
var saiz = items.length;

//Jumlah ulangan untuk pastikan semua no terisih
for (var ulang = 0; ulang < saiz; ulang++) {

//Proses isihan nombor
//Perhatikan j < (saiz - 1)
for (var j = 0; j < (saiz - 1); j++) {

//Bandingkan dengan posisi bersebelahan
if(items[j] > items[j+1]) {

//Pembolehubah sementara untuk menyimpan nombor semasa
var tmp = items[j];

//Gantikan no semasa dengan nombor bersebelahan
items[j] = items[j+1];

//Gantikan no bersebelahan dengan nombor semasa
items[j+1] = tmp;
}
}
}
document.write(items);
</script>
</body>
</html>

CARTA ALIR BUBBLESORT

ATUR CARA 2 (SELECTION SORT):
Berdasarkan atur cara berikut, lukis carta alir untuk menyusun nombor-nombor yang diberikan
dalam keadaan menaik, dari nombor yang paling rendah ke nombor yang paling paling tinggi
menggunakan kaedah selectionsort.

selectionsort.html

<html>
<body>
<h2> Isihan Pilihan (Selection Sort) </h2>
<script type="text/javascript">
var items = [3, -2, 8, -6, 4]
var saiz = items.length;

//Jumlah pass atau laluan
for (var pass = 0; pass < saiz - 1; pass++) {

//min menyimpan kedudukan no min. semasa bagi setiap ulangan
//pass menyimpan nilai minimum awal
var min = pass;

//Nota: j = pass + 1, perlu melalui tatasusunan belum terisih
for (var j = pass + 1; j < saiz; j++) {

if (items[j] < items[min]) { //Bandingkan nilai-nilai items

//Tukar kedudukan nombor min. semasa sekiranya
//nombor lebih kecil dijumpai
min = j;
} // end if

} // end for

//Selepas setiap laluan, jika no. min semasa != no. min. asal,
//tukar kedudukan
if (min != pass) {

//Swap the numbers
var tmp = items[pass];
items[pass] = items[min];
items[min] = tmp;
} // end if

} // end for
document.write(items);
</script>
</body>
</html>

CARTA ALIR BAGI SELECTION SORT

ATUR CARA 3 (BINARY SEARCH):

Berdasarkan atur cara Javascript berikut, lukis carta alir untuk mencari item di dalam tatasusunan

menggunakan teknik carian binary.

binarySearch.html

<html>
<body>
<h2> Carian Binary </h2>
<script type="text/javascript">
var items = ['Toyota', 'Honda', 'Ferrari', 'Lamborghini', 'BMW'];
var saiz = items.length;
var carian = 'Lamborghini';
var indeksKiri = 0;
var indeksKanan= saiz - 1;
//parseInt() untuk menukar hasil kiraan indeks kepada integer
var indeks = parseInt((indeksKiri + indeksKanan)/2);

while(items[indeks] != carian && indeksKiri <= indeksKanan)
{

if (carian < items[indeks]) {
indeksKanan = indeks - 1;

}

else if (carian > items[indeks]) {
indeksKiri = indeks + 1;

}
//kemaskini nilai indeks
indeks = parseInt((indeksKiri + indeksKanan)/2);
}

if (items[indeks] === carian) {
document.write(carian + ' dijumpai di indeks ' + indeks);

}

else {
document.write(carian + ' tidak dijumpai!');

}
</script>
</body>
</html>

CARTA ALIR BAGI ATUR CARA CARIAN BINARY

ATUR CARA 4 (MIN):

Berdasarkan atur cara Javascript berikut, lukis carta alir untuk mencari nombor yang paling
kecil/minima menggunakan kaedah carian min.

<html>
<body>
<script>
var a = -1;
var b = 2;
var c = -5;
var min = a;

for(var i = 0; i < 3; i++)
{

if(a < b)
if (a < c)
min = a;

else if (b < c)
min = b;

else
min = c;

}
document.write("Min adalah : " + min);
</script>
</body>
</html>

CARTA ALIR BAGI ATUR CARA MIN

ATUR CARA 5 (MAX):

Berdasarkan atur cara Javascript berikut, lukis carta alir untuk mencari nombor yang paling

besar/maksima menggunakan kaedah carian max.

<html>
<body>
<script>
var a = 6;
var b = 5;
var c = -10;
var max = 6;

for(var i = 0; i < 3; i++)
{

if(a > b)
if (a > c)
max = a;

else if (b > c)
max = b;

else
max = c;

}
document.write("Max adalah : " + max);
</script>
</body>
</html>

CARTA ALIR BAGI ATUR CARA MAX

ATUR CARA 6 (MEAN/AVERAGE):
Berdasarkan atur cara Javascript berikut, lukis carta alir untuk mencari purata/mean bagi senarai
nombor yang diberi.
mean.html
<html>
<body>
<script>
var a = 102;
var b = 54;
var c = -6;
var jumlah, purata;
jumlah = a + b + c;
purata = jumlah/3;
document.write("Purata adalah : " + purata);
</script>
</body>
</html>

CARTA ALIR BAGI ATUR CARA MEAN

Kira
purata = jumlah / 3

Papar purata

ATUR CARA 7 (COUNT):
Berdasarkan atur cara Javascript berikut, lukis carta alir untuk mencari frekuensi/kekerapan bagi
suatu abjad di dalam tataususunan.

count.html

<html>
<body>
<script>
//menggunakan tatasusunan untuk menyimpan data
var huruf =['a','a','b','a','c','c','f','d','f','b','d'];
var kira = 0;
var carian = 'b';

for (var i = 0; i < huruf.length; i++) {

if (huruf[i] === carian) {
kira = kira + 1;

}
}
document.write("Jumlah frekuensi(kira) bagi huruf 'a'
adalah : " + kira);
</script>
</body>
</html>

CARTA ALIR BAGI ATUR CARA COUNT
kira = 0

kira = kira + 1 Papar kira

ATUR CARA 8 (Queue):

Berdasarkan atur cara Javascript berikut, lukis carta alir untuk memasukkan, mengeluarkan dan
memaparkan nilai elemen ke dalam tatasusunan/ giliran menggunakan teknik queue.

queue.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<script src="queue.js"></script>
<script type="text/javascript">

function doStackTambah() {
var inputValue =
document.getElementById('txtInput').value;

if(inputValue) {
stackTambah(inputValue);
document.getElementById('txtInput').value = "";

}
}

function doStackAmbil() {
var returnValue = stackAmbil();
document.getElementById('stackResult').innerHTML = returnValue;

}

</script>
<title>JavaScript FIFO – Worker</title>
</head>
<body>
<center>
<h2>JAVASCRIPT : QUEUE MUDAH</h2>
<div id="mainDiv" style="background-color: orange;
width:410px; padding: 20px; text-align: left;">
Input : <input type="text" id="txtInput" value="">
<button onclick="doStackTambah()">Tambah ke Stack</button>
<br /><br />
<button onclick="doStackAmbil()">Ambil dari Stack</button> >>>
&nbsp;&nbsp;
<span id="stackResult"></span>
</div>
</center>
</body>
</html>

queue.js

var queue = ['epal', 'limau', 'anggur', 'tembikai'] ;

function stackTambah(itemTambah) {
queue.push(itemTambah);

}

function stackAmbil() {
var nilaiQueueKeluar = queue.shift();

if(nilaiQueueKeluar) {
return nilaiQueueKeluar;

}
else {

return "Queue is empty.";
}
}

Carta alir untuk atur cara queue.js

LAMPIRAN 4

Permasalahan 1
Harith menghabiskan banyak masa bermain komputer serta menonton televisyen hingga larut malam
setiap hujung minggu. Harith sering terlewat bangun dari tidur dan tidak hadir ke kelas tusyen
Pengaturcaraan Java yang sepatutnya dihadiri pada setiap pagi Ahad. Sekiranya jumlah yuran yang
perlu dibayar Harith adalah RM360 untuk 4 kali pertemuan setiap bulan, berapakah purata jumlah
kerugian setiap minggu yang ditanggung oleh Harith, sekiranya beliau tidak hadir 2 kelas tusyen
setiap bulan selama 3 bulan berturut-turut?

Kod Atur cara 1

<!doctype html>
<html>
<head>
<script type="text/javascript">
var yuranMgg, jumMggTusyen, jumTakHadir, jumRugi, purataRugiMgg;

function kiraRugi()

{ 1
var yuranBln = document.getElementById("yuranBln").value;

var takHadirMgg = document.getElementById("takHadirMgg").value;

var jumBlnTusyen = document.getElementById("jumBlnTusyen").value;

yuranMgg = yuranBln / 4; 2
jumMggTusyen = jumBlnTusyen * 4;

jumTakHadir = takHadirMgg * jumBlnTusyen;

jumRugi = yuranMgg * jumTakHadir;
document.getElementById("jumRugi").innerHTML = jumRugi;

purataRugiMgg = jumRugi / jumMggTusyen; 3

document.getElementById("purataRugiMgg").innerHTML= purataRugiMgg;

}

</script>

</head>

<center>

<h3>JUMLAH RUGI TIDAK HADIR TUSYEN</h3>

<div id="mainDiv">

Masukkan yuran bulanan : <input type="text" id="yuranBln" value=""

size="6">

<br></br>

Masukkan jumlah hari tak hadir dalam seminggu : <input type="text"

id="takHadirMgg" value="" size="6">

<br></br>

Masukkan jumlah bulan tusyen : <input type="text" id="jumBlnTusyen"

value="" size="6">

<button onclick="kiraRugi()">Kira</button>

<br></br> 4
Jumlah Rugi : <p id="jumRugi"></p>

Purata Kerugian Seminggu : <p id="purataRugiMgg"></p>

<br>

</div>

</center>

</body>

</html>

Carta Alir 1

Mula

1 3

2
4

Permasalahan 2
Siew Lin dan Devi baru sahaja memulakan perniagaan kek di dalam talian yang dinamakan
CakeVaganza. Mereka menerima 3 jenis tempahan: kek hari ulangtahun, kek perkahwinan dan kek
cawan. Mereka sangat teruja menerima tempahan yang tidak putus-putus. Katakan harga jualan
untuk sebiji kek ulangtahun adalah RM35/kg, kek perkahwinan RM 55/kg dan kek cawan 4.50 sebiji,
berapakan jumlah bayaran yang akan mereka perolehi sekiranya pelanggan menempah 3 biji kek
hari ulangtahun dengan masing-masing seberat 2 kg, 4.5 kg dan 3 kg setiap satu, 2 kek perkahwinan
dengan masing-masing seberat 5 kg dan 3.5 kg setiap satu berserta 200 biji kek cawan?

Kod Aturcara 2

<!doctype html>
<html>
<head>
<script type="text/javascript">
var jumUntung, jumHargaKU = 0, jumHargaKK = 0, jumHargaKC = 0;

function kiraUntung() 1
{

var jenis = document.getElementById("jenis").value;
var beratKK = document.getElementById("jumBeratKK").value;
var beratKU = document.getElementById("jumBeratKU").value;
var jumKC = document.getElementById("jumKC").value;
var hargaKK = document.getElementById("hargaKK").value;
var hargaKU = document.getElementById("hargaKU").value;
var hargaKC = document.getElementById("hargaKC").value;

if (jenis === "ulangtahun"){ 2
jumHargaKU = beratKU * hargaKU;

document.getElementById("jumHargaKU").innerHTML = jumHargaKU;

}

if (jenis === "kahwin"){ 3
jumHargaKK = beratKK * hargaKK;

document.getElementById("jumHargaKK").innerHTML = jumHargaKK;

}

if (jenis === "cawan") { 4

jumHargaKC = jumKC * hargaKC;

document.getElementById("jumHargaKC").innerHTML = jumHargaKC;

}

jumUntung = jumHargaKU + jumHargaKK + jumHargaKC; 5
document.getElementById("jumUntung").innerHTML = jumUntung;
}
</script>
</head>

<body>

<center>

<h3>SELAMAT DATANG KE <I>CAKEVAGANZA<I></h3>

<div id="mainDiv"> 1

Jenis kek : <input type="text" id="jenis" value="" size="6">

<br></br>

Berat Kek Ulangtahun : <input type="text" id="jumBeratKU" value=""

size="6">

<br></br>

Harga kek Ulangtahun : <input type="text" id="hargaKU" value=""

size="6">

<br></br>

Jumlah Harga Kek Ulangtahun : <p id="jumHargaKU"></p>

<br></br>

Berat Kek Kahwin : <input type="text" id="jumBeratKK" value=""

size="6">

<br></br>

Harga Kek Kahwin : <input type="text" id="hargaKK" value=""

size="6">

<br></br>

Jumlah Harga Kek Kahwin : <p id="jumHargaKK"></p>

<br></br>

Jumlah Kek Cawan : <input type="text" id="jumKC" value="" size="6">

<br></br>

Harga Kek Cawan : <input type="text" id="hargaKC" value="" size="6">

<br></br>

Jumlah Harga Kek Cawan : <p id="jumHargaKC"></p>

<br>

<button onclick="kiraUntung()">Kira</button>

<p><b>Jumlah Keseluruhan : <b></p><p id="jumUntung"></p> 6

</div>

</center>

</body>

</html>

Carta Alir 2

1
2 34

5

Papar 6
jumBayaranDiperolehi

Permasalahan 3

Nina adalah seorang murid kolej yang suka membeli-belah di dalam talian (online). Dia telah
menghabiskan banyak wang akibat daripada tabiat borosnya sehingga menyebabkan dia sering
terlebih guna wang perbelanjaan bulanannya. Katakan Nina membeli 3 barang seminggu untuk 2
bulan berturut-turut pada kadar RM250, RM100 dan RM300 bagi setiap barangan, serta purata RM7
bagi kos penghantaran setiap barangan, berapakah jumlah wang yang Nina belanjakan secara
keseluruhan?

Aturcara 3

<!doctype html>
<html>
<head>
<script type="text/javascript">
var jumBelanja, jumMinggu , jumHargaBrg1=0, jumHargaBrg2=0,
jumHargaBrg3=0 ;

function kiraBelanja() 1
{ 2

var jenis = document.getElementById("jenis").value;
var jumBulan = document.getElementById("jumBulan").value;
var kosHantar = document.getElementById("kosHantar").value;
var hargaBrg1 = document.getElementById("hargaBrg1").value;
var hargaBrg2 = document.getElementById("hargaBrg2").value;
var hargaBrg3 = document.getElementById("hargaBrg3").value;

jumMinggu = jumBulan * 4;

if (jenis === "1"){ 3
// parseInt menukar string kepada integer

jumHargaBrg1=(parseInt(hargaBrg1)+parseInt(kosHantar))*jumMinggu;

document.getElementById("jumHargaBrg1").innerHTML = jumHargaBrg1;

}

if (jenis === "2"){ 4
// parseInt menukar string kepada integer

jumHargaBrg2=(parseInt(hargaBrg2)+parseInt(kosHantar))*jumMinggu;

document.getElementById("jumHargaBrg2").innerHTML = jumHargaBrg2;

}

if (jenis === "3") { 5
// parseInt menukar string kepada integer

jumHargaBrg3=(parseInt(hargaBrg3)+parseInt(kosHantar))* jumMinggu;

document.getElementById("jumHargaBrg3").innerHTML = jumHargaBrg3;

}

jumBelanja = jumHargaBrg1 + jumHargaBrg2 + jumHargaBrg3; 66
document.getElementById("jumBelanja").innerHTML = jumBelanja;
}
</script>
</head>

<body>

<center>

<h3>PERBELANJAAN ONLINE<I></h3>

<div id="mainDiv">

Jenis Barang : <input type="text" id="jenis" value="" size="6">

<br></br>

Harga Barang 1 : <input type="text" id="hargaBrg1" value="" size="6">

<br></br>

Harga Barang 2 : <input type="text" id="hargaBrg2" value="" size="6">

<br></br>

Harga Barang 3 : <input type="text" id="hargaBrg3" value="" size="6">

<br></br>

Jumlah Bulan : <input type="text" id="jumBulan" value="" size="6">

<br></br>

Kos Penghantaran : <input type="text" id="kosHantar" value="" size="6">

<p><b>Jumlah Harga Barang 1 : <b></p><p id="jumHargaBrg1"></p>

<p><b>Jumlah Harga Barang 2 : <b></p><p id="jumHargaBrg2"></p>

<p><b>Jumlah Harga Barang 3 : <b></p><p id="jumHargaBrg3"></p>

<button onclick="kiraBelanja()">Kira</button> 7
<br>

<p><b>Jumlah Belanja : <b></p><p id="jumBelanja"></p>

</div>

</center>

</body>

</html>

Carta Alir 3 4 5

1
2
3

6
7

MATA PELAJARAN: SAINS KOMPUTER

PENGAJARAN : 27
STANDARD KANDUNGAN : 3.1 Bahasa Penskripan Klien (Client Side

MASA Scripting Language)
TINGKATAN : 1 jam 20 minit
:5

3.1.3 STANDARD PEMBELAJARAN
Menggunakan pemalar, pemboleh ubah dan jenis data yang berlainan dalam atur
cara untuk melaksanakan bubble sort, max/min/mean, count dan queue.

OBJEKTIF:
Murid boleh

1. Memahami peranan pemalar, pemboleh ubah dan jenis data di dalam Bahasa
Penskripan Klien Javascript.

2. Memahami kaedah penggunaan pemalar, pemboleh ubah dan jenis data di dalam
Bahasa Penskripan Klien Javascript.

3. Memahami peraturan-peraturan di dalam mendefinisikan pemalar, pemboleh ubah
dan jenis data yang berbeza di dalam Bahasa Penskripan Klien Javascript.

BAHAN BANTU MENGAJAR:
 Perisian pengeditan Notepad++
 Perisian Microsoft Word atau Visio untuk melukis carta alir
 Perisian Microsoft Powerpoint untuk persembahan

GLOSARI:
 Pemalar – Data yang tidak berubah nilai sepanjang atur cara dilaksanakan.
 Pemboleh ubah – Lokasi storan yang dipadankan dengan pengecam simbolik yang
digunakan untuk menyimpan nilai input atau hasil pelaksanaan atur cara
 Jenis data – menentukan jenis nilai apa yang akan disimpan di dalam ingatan
komputer seperti integer, boolean, aksara dan sebagainya.

PERSEDIAAN SEBELUM KELAS MASA: Tiada

Guru harus:

 Menyediakan satu set slaid Powerpoint seperti di Lampiran 1.

SET INDUKSI MASA: 10 minit

Mengenalpasti pemalar dan pemboleh ubah.

1. Murid dibahagikan kepada beberapa kumpulan di mana setiap kumpulan

mempunyai 4 orang murid.

2. Setiap kumpulan diberi permainan jigsaw puzzle untuk diselesaikan.

3. Masa diambil untuk setiap kumpulan menyelesaikan masalah jigsaw tersebut.

4. Setelah selesai, setiap kumpulan diminta mengenalpasti pemboleh ubah dan

pemalar yang terlibat bagi menyelesaikan masalah tersebut (umur murid, masa,

jenis puzzle).

Mengenalpasti jenis data.
1. Melalui bimbingan guru, murid diminta mengenalpasti jenis data yang terdapat
di dalam satu bilik kelas. (Slaid 2, Lampiran 1)
2. Murid diminta mengenalpasti dan menjelaskan jenis data, pemboleh ubah atau
pemalar yang terlibat berdasarkan senario “Sistem tiket pawagam XYZ”.
( Lampiran 1).

MEMUPUK PEMAHAMAN MASA: 30 minit

Aktiviti
1. Murid diminta untuk merujuk kembali kepada contoh daripada Pengajaran 25 –

aktiviti 1, 2 & 4 berkaitan tugasan penterjemahan atur cara kod kepada carta alir

(bubble sort, selection sort, binary search, max, min, mean, count, queue).

2. Guru memberikan pemboleh ubah serta pemalar baharu bagi jenis data yang

berbeza kepada murid untuk di masukkan ke dalam kod atur cara sedia ada daripada

Pengajaran 24. Contoh pemboleh ubah tambahan dan pemalar seperti di Lampiran

2.

3. Murid diminta bina semula kod atur cara serta carta alir berdasarkan arahan guru di

(2).

4. Murid diminta untuk kembali ke kumpulan yang sama seperti Pengajaran 24 tetapi

diberikan tugasan untuk kod atur cara yang berbeza (sekiranya kumpulan telah

membuat tugasan bubble sort sebelum ini, mereka dikehendaki membuat tugasan

yang lain).

Guru menerangkan kepada murid tentang jenis-jenis data serta peraturan berkaitan bagi
mengisytihar pemboleh ubah dan pemalar di dalam Javascript. Rujuk Lampiran 3.

PENYERTAAN SECARA AKTIF MASA: 45 minit

Aktiviti:

1. Murid dibahagikan ke dalam kumpulan yang sama seperti tugasan sebelumnya.

2. Murid diminta untuk merujuk kembali kepada contoh daripada tugasan sebelumnya

iaitu menggunakan pemboleh ubah dan pemalar daripada jenis data yang berbeza di

dalam bubble sort, selection sort, binary search, max, min, mean, count, queue.

3. Murid diminta menambahkan pemboleh ubah serta pemalar tambahan yang telah

dipelajari sebelum ini ke dalam atur cara sedia ada.

a. Contoh 1 : gunakan pemboleh ubah boolean untuk kod atur cara count dan

binary search

b. Gunakan pemboleh ubah berjenis Objek bagi tatasusunan di dalam atur cara

queue, bubble sort, selection sort

4. Murid diminta menambahbaik kod atur cara serta carta alir sebelumnya berdasarkan

arahan guru di (3). Setiap kumpulan diberi 30 minit untuk menyelesaikan tugasan.

5. Setelah selesai, wakil bagi setiap kumpulan diminta untuk membuat pembentangan
dan penerangan.

6. Guru meminta murid lain untuk membuat pembetulan sekiranya terdapat ralat
(error) pada atur cara yang telah dibentangkan. Guru membantu murid untuk
membuat pembetulan jika ada.

KESIMPULAN MASA: 3 minit

1. Murid menerangkan tujuan kod baharu yang dirancangkan.

2. Murid menerangkan bagaimana menambahbaik kod atur cara dan carta alir dengan

pemboleh ubah, pemalar dan jenis data yang baharu.

TOPIK AKAN DATANG MASA: 2 minit

Guru memaparkan kembali contoh-contoh pemalar, pemboleh ubah dan jenis data dan

huraian yang digunakan di dalam carta alir bubble sort, selection sort, binary search,

max/min/mean, count, queue.

Lampiran 1



Lampiran 2

Pemboleh ubah baharu dan pemalar bagi jenis data yang berbeza.

1. Bubble sort (membuat isihan menaik)
pemboleh ubah buah, jenis data: array (String)
var buah =["manggis","durian","rambutan","mangga","jambu","duku
"];

pemalar saiz, jenis data: number
var saiz = 6; //pemalar

2. Selection sort (membuat isihan menurun)
pemboleh ubah bukutelefon, jenis data : object
var bukutelefon ={nama: "Ali", tel:"01112847231", nama: "Ravi",
tel:"0132847231", nama: "Swee Lin", tel:"0125644321"};

pemalar rekod, jenis data: number
var rekod = 3; //pemalar

3. Binary search
pemboleh ubah bilik & kekunci, jenis data: array (number)
var bilik =[110, 111, 112, 113, 114 , 115, 116, 117, 118, 119,
120];
var kekunci = 114;

pemalar saiz, jenis data: number
var saiz = 11;

4. Min
pemboleh ubah markah1,markah2,markah3,minimum, jenis data:
number
var markah1 = 88.5;
var markah2 = 78.5;
var markah3 = 92.8;
var minimum = 88.5; //murid diminta tentukan sendiri

pemalar bil, jenis data: number
var bil = 3; //pemalar

5. Max
pemboleh ubah eksperimen1,eksperimen2,eksperimen3,maksimum,
jenis data: number
var eksperimen1 = 35.4;
var eksperimen2 = 28.5;
var eksperimen3 = 42.3;
var maksimum = 35.4; //murid diminta tentukan sendiri

pemalar rekod, jenis data: number
var rekod = 3; //pemalar

6. Mean
pemboleh ubah berat1, berat2, berat3, jumlah, purata, jenis
data: number
var berat1 = 55.5;
var berat2 = 60.3;
var berat3 = 50.1;
var jumlah, purata;

pemalar bilMurid, jenis data: number
var bilMurid = 3; //pemalar

7. Count
pemboleh ubah bilik, jenis data: array (String)
var huruf =["biskut","roti","susu","gula","garam",
"biskut","susu", "gula", "roti", "roti","garam","kopi","gula"];
var bilangan = 0;
var carian = "biskut";

pemalar bilBrg, jenis data: number
var bilBrg = 13;

8. Queue
pemboleh ubah jawapan, jenis data: array (Boolean)
var jawapan = [false, true, false, false, true];

Lampiran 3

Peraturan Pemboleh ubah

A. Bermula dengan HURUF, tanda Dollar ( $ ), atau Underscore
(_)
a. Contoh var x, var $jantina, var _namapenuh

B. Tidak boleh mengandungi special character seperti
(! . , / \ + * = etc.).
a. Contoh var haiw@n  tidak dibenarkan.

C. Pemboleh ubah adalah case-sensitive

a. “AYAM” tidak sama dengan “Ayam”

MATA PELAJARAN: SAINS KOMPUTER

PENGAJARAN : 28
STANDARD KANDUNGAN : 3.1 Bahasa Penskripan Klien (Client Side

MASA Scripting Language)
TINGKATAN : 1 jam 45 minit
:5

STANDARD PEMBELAJARAN
3.1.4 Menggunakan struktur kawalan (jujukan, pilihan, ulangan) dalam atur cara

OBJEKTIF:
Murid boleh

1. Memahami cara penggunaan tiga jenis struktur kawalan iaitu jujukan, pilihan dan
ulangan di dalam Javascript.

2. Mengaplikasikan struktur kawalan di dalam atur cara Javascript.
3. Membuat pengesahsahihan terhadap input pengguna.

BAHAN BANTU MENGAJAR:
 Perisian Notepad++ atau Visual Studio Code dan setara

GLOSSARI:
1. jujukan (procedure) – pelaksanaan kod atur cara secara urutan atau rentetan di dalam
suatu perngatur caraan
2. pilihan (selection) – tindakan pelaksanaan arahan pengatur caraan yang diambil
sekiranya syarat pengatur caraan memenuhi kriteria tertentu
3. ulangan (repetition) – pelaksanaan kod yang sama sebanyak satu kali atau lebih
sekiranya syarat pengatur caraan tertentu dipenuhi.

PERSEDIAAN SEBELUM KELAS MASA: Tiada
Guru harus:

 Menyediakan slaid Powerpoint seperti di Lampiran 1.
 Menyediakan contoh atur cara, dan output, Lampiran 2-4.

SET INDUKSI MASA: 10 minit

Guru menerangkan kepada murid tentang keperluan menggunakan jujukan, pilihan dan

ulangan di dalam bahasa pengatur caraan. Lampiran 1

Memahami Jujukan:
Guru meminta murid menyenaraikan aktiviti-aktiviti yang perlu dibuat selepas bangun
daripada tidur sehingga pergi ke sekolah.

Memahami Pilihan:
Guru meminta murid menyenaraikan pilihan laluan yang ada semasa pergi ke sekolah atau
pulang dari sekolah.

Memahami Ulangan:
Guru meminta murid menyenaraikan hari-hari di mana mereka membuat rutin yang sama
seperti di atas.

MEMUPUK PEMAHAMAN MASA: 40 minit

Aktiviti 1:

 Murid bekerja dalam kumpulan yang terdiri daripada 2 orang ahli.

 Murid diberi masa selama 20 minit untuk melakar carta alir dan menulis kod atur cara

yang mempunyai ciri-ciri berikut:

(a) Menerima input umur dari pengguna.

(b) Sekiranya umur
 Bawah 12 tahun, papar : kategori kanak-kanak
 Antara 12-25 tahun, papar kategori remaja
 Antara 25-40 tahun, papar kategori dewasa
 40 tahun ke atas, papar kategori veteren

(Contoh penyelesaian terdapat di Lampiran 2)

Aktiviti 2:
 Murid diberi masa selama 20 minit untuk melakar carta alir dan menulis kod atur cara

yang mengikut senario berikut:
Ahmad menyimpan duit sekolah setiap hari sebanyak RM1.00, berapakah jumlah
simpanan Ahmad untuk sebulan? (bulan=Januari) – Dalam matematik sebulan=30
hari).
(Contoh penyelesaian di Lampiran 3)

PENYERTAAN SECARA AKTIF MASA: 50 minit

Aktiviti 1 :

 Murid diberi masa selama 20 minit untuk melakar carta alir dan menulis atur cara

yang mempunyai ciri-ciri berikut:

 Cara-cara membuat Pizza

a. Masukkan langkah 1 ,2 sehingga langkah ke 5.

b. Paparkan langkah-langkah tersebut.

Aktiviti 2 :
Murid diberi masa selama 30 minit untuk melakar carta alir dan menulis kod atur cara yang
mempunyai ciri-ciri berikut :

a. Menerima input nombor dari pengguna. Nombor mestilah kurang daripada 100.
b. Atur cara yang dibina boleh mengenalpasti sama ada input yang dimasukkan

adalah nombor perdana atau bukan.

Lampiran 4
Selepas tamat setiap aktiviti, murid dipilih secara rawak oleh guru untuk membentangkan
penyelesaian mereka dan memberi penerangan ringkas tentang atur cara yang ditulis.
Guru meminta murid lain untuk membuat pembetulan jika ada kesalahan (error) pada atur
cara yang telah dibentangkan. Guru membantu murid untuk membuat pembetulan jika
masih terdapat kesalahan pada kod atur cara.

KESIMPULAN MASA: 3 minit

Guru bertanya kepada murid:

 Bilakah kita perlu menggunakan jujukan, pilihan dan ulangan?

 Kenapa kita perlu menggabungkan operasi-operasi dan konsep-konsep yang telah

dipelajari semasa penyelesaian masalah?

TOPIK AKAN DATANG MASA: 2 minit

Guru menerangkan tentang wujudnya teknik untuk mempercepatkan/meringkaskan proses

pengatur caraan dengan bantuan sedia ada daripada bahasa pengatur caraan Javascript itu

sendiri.

Lampiran 1