Modul SK T5 Full

Lampiran 4.

1. ORDER BY UMUR Alamat Pendapatan
Jadual: Pelanggan 32 Tampin 2000.00
PelangganID NamaPelanggan 25 Teluk Intan 1500.00
1 Ramesh 23 Kuala Lumpur 2000.00
2 Khairul 25 Ipoh 6500.00
3 Kadir 27 Alor Gajah 8500.00
4 Chan 22 Batu Pahat 4500.00
5 Harminder 24 Tawau 10000.00
6 Komala
7 Michael Pendapatan
6500.00
Apakah arahan SQL untuk mendapatkan maklumat di bawah.? 8500.00
2000.00
PelangganID NamaPelanggan UMUR Alamat 1500.00
4500.00
4 Chan 25 Ipoh 10000.00
2000.00
5 Harminder 27 Alor Gajah

3 Kadir 23 Kuala Lumpur

2 Khairul 25 Teluk Intan

6 Komala 22 Batu Pahat

7 Michael 24 Tawau

1 Ramesh 32 Tampin

2. GROUP BY

Apakah arahan SQL untuk mendapatkan maklumat di bawah?

NamaPelanggan Pendapatan

Chan 6500.00

Harminder 8500.00

Kadir 2000.00

Khairul 1500.00

Komala 4500.00

Michael 10000.00

Ramesh 2000.00

Lampiran 4 – JAWAPAN

1. ORDER BY UMUR Alamat Pendapatan
Jadual: Pelanggan 32 Tampin 2000.00
PelangganID NamaPelanggan 25 Teluk Intan 1500.00
1 Ramesh 23 Kuala Lumpur 2000.00
2 Khairul 25 Ipoh 6500.00
3 Kadir 27 Alor Gajah 8500.00
4 Chan 22 Batu Pahat 4500.00
5 Harminder 24 Tawau 10000.00
6 Komala
7 Michael Pendapatan
6500.00
Apakah arahan SQL untuk mendapatkan maklumat di bawah.? 8500.00
2000.00
PelangganID NamaPelanggan UMUR Alamat 1500.00
4500.00
4 Chan 25 Ipoh 10000.00
2000.00
5 Harminder 27 Alor Gajah

3 Kadir 23 Kuala Lumpur

2 Khairul 25 Teluk Intan

6 Komala 22 Batu Pahat

7 Michael 24 Tawau

1 Ramesh 32 Tampin

Jawapan:

SELECT FROM Pelanggan
ORDER BY NamaPelanggan, Pendapatan;

2. GROUP BY

Apakah arahan SQL untuk mendapatkan maklumat di bawah?

NamaPelanggan Pendapatan

Chan 6500.00

Harminder 8500.00

Kadir 2000.00

Khairul 1500.00

Komala 4500.00

Michael 10000.00

Ramesh 2000.00

Jawapan:

SELECT NamaPelanggan,Pendapatan FROM Pelanggan
GROUP BY NamaPelanggan;

MATA PELAJARAN: SAINS KOMPUTER

PENGAJARAN : 22
STANDARD KANDUNGAN : 2.1 Bahasa Pertanyaan Berstruktur: SQL (Structure

MASA Query Language)
TINGKATAN : 1 jam
:5

STANDARD PEMBELAJARAN
2.1.6 Menggunakan fungsi AVG, SUM, MAX, MIN dan COUNT

OBJEKTIF:
Murid boleh

1. Menggunakan fungsi AVG, SUM, MAX, MIN dan COUNT.

GLOSARI:
1. AVG () – fungsi ini digunakan untuk mendapat nilai purata lajur angka.
2. SUM () – fungsi ini digunakan untuk mendapat jumlah lajur angka.
3. MAX () – fungsi ini digunakan untuk nilai maksimum dari lajur angka.
4. MIN () – fungsi ini digunakan untuk nilai minimum dari lajur angka.
5. COUNT () – fungsi ini digunakan mengira jumlah baris atau rekod dalam jadual.

PERSEDIAAN SEBELUM KELAS MASA: Tiada

1. Menyediakan beberapa set arahan bagi murid menyenaraikan maklumat dari data yang

diedarkan.

2. Menyediakan beberapa arahan SQL untuk aktiviti dalam kumpulan.

3. Memastikan pangkalan data/jadual seperti Lampiran 1 tersedia di komputer yang akan

digunakan murid.

SET INDUKSI MASA: 5 minit

1. Guru menunjukkan data dalam jadual pangkalan data.(Lampiran 1)

2. Murid dipilih secara rawak untuk menyenaraikan data yang diminta.

 Kira BahanID

 Purata Harga

 Jumlah PembekalID

 Harga yang Maksimum

 Harga yang Minimum

3. Guru mengaitkan dengan topik yang akan dipelajari.

MEMUPUK PEMAHAMAN MASA: 15 minit

1. Murid diberi jadual “Bahan” seperti di Lampiran 2.

2. Setiap murid dikehendaki mencuba kod arahan SQL bagi fungsi MIN() dan MAX()

yang dipelajari dikomputer masing-masing.

3. Guru boleh menggunakan panduan contoh kod adalah seperti di lampiran yang

diberikan.

4. Murid mengenalpasti hasil bagi setiap kod arahan SQL.

PENYERTAAN SECARA AKTIF (AKTIVITI 1) MASA: 20 minit

1. Rujuk aktiviti dan hasil dapatan di atas

2. Setiap kumpulan diminta menyenaraikan hasil bagi arahan SQL di atas.

3. Seorang ahli kumpulan akan tinggal untuk menjadi jurucakap bagi ahli kumpulan. Ahli

kumpulan yang lain akan ke kumpulan lain bagi mendapatkan maklumat dari

kumpulan lain.

4. Murid dipilih secara rawak untuk memberi kesimpulan dan dapatan kumpulan masing-

masing secara percakapan.

5. Murid juga diminta memberi penerangan proses yang berlaku untuk mendapatkan

hasil dapatan mereka.

PENYERTAAN SECARA AKTIF (AKTIVITI 2) MASA: 15 minit
6. Murid diberi masa untuk mencuba fungsi-fungsi lain.
7. Guru boleh menggunakan Lampiran 3 sebagai panduan

 AVG ()
 SUM ()
 COUNT ()
8. Murid dipilih secara rawak untuk menerangkan fungsi di atas.

KESIMPULAN MASA: 5 minit

Murid diminta memberi contoh dimana fungsi-fungsi yang dipelajari digunakan.

TOPIK AKAN DATANG MASA: 1 minit
 Murid ditanya apakah maksud “entiti (entity)”?
 Kaitkan dengan apa yang akan dipelajari.

LAMPIRAN 1

Berdasarkan jadual “Bahan” di bawah, nyatakan:
1) Kira BahanID
2) Purata Harga
3) Jumlah PembekalID
4) Harga yang Maksimum
5) Harga yang Minimum

BahanID NamaBahan PembekalID KategoriID Unit Harga
1 Buah Pelaga 1 1 100g 55
2 Kayu Manis 1 1 100g 25
3 Jintan 1 2 250g 30
4 Serbuk Ketumbar 2 2 250g 25
5 Rempah Tandori 2 2 100g 50

LAMPIRAN 1 – JAWAPAN

1) 5
2) 27
3) 7
4) 55
5) 25

LAMPIRAN 2

Berdasarkan jadual “Bahan” di bawah, hasilkan keputusan berdasarkan arahan SQL di bawah:
1) SELECT MIN(Harga) AS HargaTerendah
FROM Bahan;
2) SELECT MAX(Harga) AS HargaTertinggi
FROM Bahan;

BahanID NamaBahan PembekalID KategoriID Unit Harga
1 Buah Pelaga 1 1 100g 55
2 Kayu Manis 1 1 100g 25
3 Jintan 1 2 250g 30
4 Serbuk Ketumbar 2 2 250g 25
5 Rempah Tandori 2 2 100g 50

LAMPIRAN 2 – JAWAPAN

1) HargaTerendah= 25
2) HargaTertinggi= 55

LAMPIRAN 3

Berdasarkan jadual “Bahan” di bawah, kenalpasti hasil kod arahan berikut:
1) SELECT AVG(Harga)
FROM Bahan;
2) SELECT SUM(Harga)
FROM Bahan;
3) SELECT COUNT(BahanID)
FROM Bahan;

BahanID NamaBahan PembekalID KategoriID Unit Harga
1 Buah Pelaga 1 1 100g 55
2 Kayu Manis 1 1 100g 25
3 Jintan 1 2 250g 30
4 Serbuk Ketumbar 2 2 250g 25
5 Rempah Tandori 2 2 100g 50

LAMPIRAN 3 – JAWAPAN

1) AVG(Harga)=27.000
2) SUM(PembekalID)=7
3) COUNT(BahanID)=5

MATA PELAJARAN: SAINS KOMPUTER

PENGAJARAN : 23
STANDARD KANDUNGAN : 2.1 Bahasa Pertanyaan Berstruktur: SQL (Structure

MASA Query Language)
TINGKATAN : 2 jam
:5

2.1.7 STANDARD PEMBELAJARAN
Membina pangkalan data hubungan menggunakan SQL dalam menyelesaikan
masalah.

OBJEKTIF:
Murid boleh

1. Membina pangkalan data.
2. Membuat arahan SQL untuk memanipulasi data dalam menyelesaikan masalah.

PERSEDIAAN SEBELUM KELAS MASA: Tiada

1. Guru menyediakan beberapa contoh masalah seharian yang biasa ditemui murid

ataupun di sekolah sebagai ransangan untuk murid memikirkan permasalahan yang

akan mereka gunakan untuk membina projek mini.

 Contoh masalah:
o Menetapkan kedudukan (ranking) pemain bola keranjang dengan

mengambil kita ketinggian dan jumlah jaringan diperoleh pemain, dll.
o Membantu kedai buku sekolah menentukan alatan mana yang boleh

mendatangkan pendapatan yang lebih baik untuk memudahkan

membuat pesanan kepada pembekal.

2. Komputer yang akan digunakan boleh mencapai internet untuk murid membuat kaji

selidik.

SET INDUKSI MASA: 15 minit

1. Murid perlu mengenalpasti masalah yang mereka akan selesaikan dengan

penggunaan pangkalan data dan arahan query SQL.

2. Seorang murid dipilih secara rawak untuk membentangkan masalah yang beliau pilih

sebagai contoh. Pastikan murid menggunakan langkah-langkah yang dipelajari dalam

membentangkan masalah, seperti bagaimana ERD atau pernomalan boleh membantu

menyelesaikan masalah mereka.

MEMUPUK PEMAHAMAN MASA: 20 minit

1. Projek mini ini perlu dibuat dalam kumpulan.

2. Murid dibahagikan kepada beberapa kumpulan yang terdiri daripada 4 orang ahli.

Aktiviti 1:
a. Setiap kumpulan memilih satu permasalahan.
b. Secara berkumpulan, murid memperincikan permasalahan menerusi lakaran

ERD.

PENYERTAAN SECARA AKTIF MASA: 40 minit

Aktiviti 2:

1. Setiap kumpulan memaparkan lakaran ERD masing-masing bagi mendapat

pandangan dari kumpulan lain.

2. Murid membina Jadual Hubungan dari ERD mereka.

3. Murid melaksanakan penormalan dan membina jadual-jadual pangkalan data mereka

di komputer.

4. Murid berbincang untuk mengenalpasti masalah dan jawapan yang mereka perlukan

untuk menyelesaikan masalah.

5. Murid mengenalpasti, arahah SQL yang sesuai untuk mendapatkan jawapan tersebut.

6. Murid membuat arahan pertanyaan (query) di komputer mereka.

KESIMPULAN MASA: 5 minit

Satu kumpulan dipilih secara rawak membentangkan masalah dan dapatan mereka. Sebagai

rangsangan, guru boleh bertanya soalan seperti:

 Apakah arahan SQL yg mereka perlu tambah sekiranya dapatan perlu diisi dengan tertib

menurun/menaik?

TOPIK AKAN DATANG MASA: 1 minit

 Murid ditanya sama ada mereka pernah ke laman web sukan seperti Sukan Olimpik, FA

Cup untuk mendapatkan keputusan sukan terkini.

 Murid dimaklum tentang pangkalan data sukan tersebut dan beberapa proses yang berlaku

untuk mendapat paparan carian mereka (seperti Client & Server side scripting).

MATA PELAJARAN: SAINS KOMPUTER

PENGAJARAN : 24
STANDARD KANDUNGAN : 3.3 Laman Web Interaktif
MASA : 1 jam
TINGKATAN :5

3.3.1 STANDARD PEMBELAJARAN
Mengkaji dan merumus prinsip reka bentuk laman web dari sudut kesesuaian
3.3.2 pengguna dan tujuan laman web
3.3.3 Mereka bentuk kerangka aplikasi yang akan dibangunkan
Membina laman web mudah menggunakan Hypertext Markup Language (HTML)
3.3.4 yang mengandungi: frame, header, paragraph dan image
Menggunakan CSS bagi Penggayaan HTML (text, font, background, tables,
border dan position)

OBJEKTIF:
Murid boleh

 Memahami kaedah pengayaan CSS
 Menulis secara ringkas bahasa CSS bagi Menggayakan HTML
 Menggunakan kreativiti sendiri bagi menggayakan HTML

BAHAN BANTU MENGAJAR:
 “Cheat Sheet” CSS. (Lampiran Cheat Sheet)
 Lampiran Contoh
 Komputer
 Internet
 Notepad ++ (software atau sebarang aplikasi tulisan web)
 Laman Web (www.w3schools.com) sebagai rujukan

PERSEDIAAN SEBELUM KELAS MASA: Tiada

Guru perlu menyediakan
1. “Cheat Sheet” CSS & HTML yang terbaru dan bersesuaian untuk dipapar dan

dikongsi bersama pelajar.
a. Contoh “cheat sheet” boleh didapati di laman web:

http://htmlcheatsheet.com/css/

https://www.w3schools.com/cssref/default.asp

https://websitesetup.org/wp-content/uploads/2016/10/wsu-css-cheat-

sheet.pdf

2. Memastikan komputer dan internet berfungsi dengan baik.

3. Memastikan Notepad++ (software atau sebarang aplikasi tulisan web) disetiap

komputer.

4. Menyediakan contoh-contoh CSS yang berkaitan dengan pengayaan HTML.

SET INDUKSI MASA: 15 minit

Sesi kelas bermula dengan membincang tentang:

1. Penggunaan Laman web

2. Bahasa HTML

a. Slaid berkenaan HTML dan CSS dibentangkan kepada murid. Slaid tersebut

perlu mengait HTML dan CSS. Seterusnya menunjukkan kaedah menulis

CSS secara inline atau linking.

3. Murid ditanya soalan-soalan mengenai:

a. Apakah itu CSS. (Cascading Style Sheet)

b. Kaitan CSS dan HTML

c. Kebaikan menggunakan CSS

4. Murid mempelajari asas permulaan untuk atur cara CSS

5. Murid diberikan contoh kepada penggunaan CSS

MEMUPUK PEMAHAMAN MASA: 45 minit

1. Guru mengajar asas utama atur cara CSS.

2. Guru mengajar cara kaitan CSS dengan HTML.

3. Guru tunjukkan contoh mudah atur cara HTML untuk dijadikan model kepada cara

penggunaan CSS secara menyeluruh.
4. Guru demo asas kepada maksud “style” , “div” dan “class” dalam HTML.

5. Guru menunjukkan dua cara mengaitkan CSS dan HTML dalam atur cara.
6. Guru mengajar cara muda memahami “Cheat Sheet” CSS.
7. Guru mengajar “Variable” yang diberikan oleh “Cheat Sheet” CSS.

PENYERTAAN SECARA AKTIF MASA: 50 minit

1. Murid diberi masa untuk cuba contoh yang diajar.

2. Contoh yang diberikan adalah mengikut Lampiran contoh hasil CSS dan HTML.
3. Murid mencuba “Cheat Sheet” untuk panjangkan dari contoh yang telah

ditunjukkan.

4. Murid diberi masa untuk manipulasi CSS bagi mencantikkan HTML
5. Murid diminta menuliskan satu mini projek bagi menghasilkan Email “Newsletter”

bagi tujuan mempromosikan Hari Karnival ICT. (Rujuk Lampiran Mini Projek).

a. Murid dipilih secara rawak untuk menunjukkan hasil yang telah dibuat.

b. Semua murid menghantar fail hasil kerja tulisan atur cara CSS.

KESIMPULAN MASA: 20 minit

1. Murid diterangkan tentang:

a. Apa yang mereka dapat simpulkan dari pelajaran CSS dan HTML

b. Menerangkan kebaikan CSS
2. Murid diterangkan cara mudah gunakan “Cheat Sheet” CSS.

TOPIK AKAN DATANG MASA: 1 minit

Murid dipilih secara rawak untuk berkongsi pendapat mereka tentang HTML dan

bagaimana boleh menghasilkan laman web yang lebih interaktif.

Lampiran: Hasil Tulis Kod

Tulisan Kod

Asas Kepada HTML dan CSS

<style>
body {background-color: yellow; }
</style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid
double;}



Lampiran Mini Projek:

A. Pelajar dikehendaki menuliskan HTML dan CSS bagi mempamerkan Email
“Newsletter” Hari Karnival ICT

B. Kandungan dalam “Newsletter” adalah seperti berikut
a. Kerjaya Bersama Dunia ICT
b. Mini PC Shop
c. Cabaran Lumba Dron
d. Pameran Gajet-Gajet Terbaru
e. Booth-Booth jualan
f. Pameran Muzium Komunikasi
g. dan lain-lain
h. Tarikh 31 Oktober 2017 | Masa : 8.00pagi-6.00petang
i. Sertakan Gambar mengikut kreativiti sendiri

C. Contoh Email Newsletter seperti berikut:

Contoh Tulisan Kod Newsletter:

<!DOCTYPE html>
<html>
<head>
<style>
body {

background-color: lightblue;
}

h1 {
color: white;
text-align: center;
margin:20px 0 0px;
padding:0px;
font-size:50px;
display:block;
background:orange;

}
h2 {
font-size:15px;
text-align:center;
}

p{
font-family: verdana;
font-size: 20px;
margin:0;
padding:0;
display:block;
background:black;

}
.sub {text-align:center; font-size:12px; letter-spacing:4px;

color:white; padding:10px 0;}
#kiri {width:50%; float:left; background:yellow; }
#kanan {width:50%; float:right; }
#kanan img {width:100%;}
#footer {float:clear; display:block; background:orange;
padding:15px 0; text-align:center; color:white; }
.clear { clear:both;}
</style>
</head>
<body>

<h1>Hari Karnival ICT</h1>
<p class="sub">31 Oktober 2017 | 8.00pagi - 6.00petang</p>

<div id="kiri">

<h2>Aktiviti yang Dianrjurkan</h2>
<ul>
<li>Kerjaya Bersama Dunia ICT
<li>Mini PC Shop
<li>Cabaran Lumba Dron
<li>Pameran Gajet-Gajet Terbaru
<li>Booth-Booth jualan
<li>Pameran Muzium Komunikasi
</ul>

</div>

<div id="kanan"> <img
src="http://www.komputerswiat.pl/media/675023/komputer_
dla_ucznia_desktop.jpg" />

</div>

<br class="clear" />
<div id="footer"> Jom Pi Ramai-Ramai</div>

</body>
</html>

MATA PELAJARAN: SAINS KOMPUTER

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

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

STANDARD PEMBELAJARAN
3.1.1 Menerangkan keperluan Bahasa Penskripan Klien di dalam laman web

OBJEKTIF:
Murid boleh

 Memahami kegunaan Bahasa Penskripan Klien di dalam sebuah atur cara web.
 Membezakan di antara laman web statik dan laman web dinamik.
 Memahami sintak-sintak asas Bahasa Penskripan Klien Javascript.
 Memahami bagaimana atur cara Javascript diterjemah (interpreted), dinyahpepijat

(debugging) dan diproses oleh pelayar web.
 Mencuba teknik-teknik berbeza untuk meletakkan Javascript di dalam laman web

HTML.

BAHAN BANTU MENGAJAR:
 Pelayar web (Chrome, Internet Explorer, Firefox)
 Perisian pengeditan Notepad++
 Perisian pengeditan Visual Studio Code
 Komputer/Tablet
 Stick-on notes

GLOSARI:
 Laman web dinamik – Laman web yang memaparkan kandungan yang berbeza setiap
kali dibaca.
 Interaktiviti - Respon/dialog yang berlaku di antara pengguna dan komputer.
 Penskripan Klien (Client-scripting) – Atur cara komputer yang beroperasi di
komputer klien/pengguna sahaja berbanding di komputer pelayan
 Nyahpepijat (Debugging) – Operasi menganalisa dan menyingkirkan/menyahpepijat
kesilapan di dalam suatu atur cara.
 Embedded script – Skrip atur cara yang diselitkan di antara kod atur cara sedia ada.

PERSEDIAAN SEBELUM KELAS MASA: Tiada

Guru harus:

 Sediakan satu set slaid untuk aktiviti pencetus minda sebelum memasuki topik

pembelajaran. Slaid 1-3 seperti di Lampiran 1 membincangkan tentang situasi

bahasa pengaturcaraan di dalam pembangunan laman web.
 Sediakan satu set slaid Powerpoint bertajuk “Bahasa Penskripan Klien &

Kegunaannya”. Slaid disertakan di Lampiran 2.

 Sediakan 3 contoh atur cara Javascript yang menunjukkan 3 fungsi dan teknik

selitan Javascript berbeza di dalam laman web HTML mudah seperti di Lampiran 3.

 Sediakan 1 atur cara Javascript yang perlu diubahsuai oleh murid berdasarkan

pembelajaran sebelumnya (Lampiran 4). Hasil tugasan seperti di Lampiran 5.

 Sediakan 1 atur cara Javascript yang mengandungi kesilapan sintak yang perlu

dikenalpasti dan dibetulkan oleh murid berdasarkan pembelajaran sebelumnya. Atur

cara seperti Lampiran 6.

 Sediakan kuiz Kahoot berkaitan pembelajaran Bahasa Penskripan Klien untuk

menguji kefahaman murid. Nota dan manual guru disediakan di Lampiran 7.

 Jawapan kepada kuiz Kahoot seperti di Lampiran 8.

SET INDUKSI MASA: 13 minit

Aktiviti pencetus minda :

 Guru menunjukkan 2 jenis paparan laman web melalui paparan slaid seperti di

Lampiran 1.

 Murid dibahagikan kepada 5 - 6 kumpulan. Guru meminta murid memikirkan serta

membincangkan tentang perkara-perkara berikut berdasarkan skrin yang

ditunjukkan:

 Apakah pendapat anda tentang skrin-skrin yang ditunjukkan?

 Apakah kekuatan/kelebihan setiap paparan laman web tersebut?

 Berikan justifikasi anda sekiranya anda pilih (a) Skrin 1 atau (b) Skrin 2 untuk

paparan laman web di internet

 Murid perlu mempersembahkan jawapan mereka di dalam bentuk slaid Powerpoint

di dalam format peta pemikiran.
 Contoh jawapan (peta buih bubble map) :
 Skrin 1: susunan kandungan laman web yang teratur, teks mudah dibaca,

paparan bersifat statik
 Skrin 2: kandungan lebih dinamik dan interaktif (carian, pertanyaan,

pengiraan, papar mesej). Boleh rujuk Lampiran 2.

 Pengenalan kepada Bahasa Penskripan Klien dan Kegunaannya:
 Guru menerangkan secara ringkas tentang Bahasa Penskripan Klien, ciri-ciri

serta kegunaannya.

MEMUPUK PEMAHAMAN MASA: 30 minit

1. Pengenalan kepada atur cara Javascript:

 Guru menunjukkan langkah-langkah membina atur cara Javascript mudah

menggunakan perisian pengeditan teks Notepad++ dengan 3 teknik berbeza

serta menerangkan kelebihan/kelemahan setiap satunya. Contoh-contoh atur

cara seperti di Lampiran 3.

i. Taipkan atur cara menggunakan perisian pengeditan teks dan simpan

dalam format .txt

ii. Buka fail sekali lagi dan simpan dalam format .html

iii. Untuk melihat hasil, klik dua kali pada fail berformat .html

iv. Penyutingan boleh dilakukan dalam fail berformat .txt dan ulangi

langkah i hingga iii.
2. Aktiviti pembangunan atur cara Javascript mudah

 Murid diberikan tugasan membina sebuah atur cara Javascript mudah “Ucap
Selamat” bagi menghantar input dari kekotak <input> berjenis text dan
menggunakan alert box untuk memaparkan output atur cara Javascript. Contoh
jawapan seperti di Lampiran 4.
1. Murid diminta menulis atur cara menggunakan perisian pengeditan
Notepad++ dan kemudian Visual Studio Code. Murid boleh memilih pelayar
web sama ada Mozilla Firefox atau Google Chrome.

 Murid diminta memberi pandangan pengalaman menggunakan kedua-dua
perisian pengeditan tersebut. Murid boleh cadangkan perisian lain untuk menulis
Javascript dan justifikasinya.
 Contoh perisian lain (percuma): RJ TextEd, Light Table, Brackets,
Netbeans, Komodo Edit, Atom Editor by Github, Node.js

 Guru menyemak hasil kerja murid.

PENYERTAAN SECARA AKTIF MASA: 35 minit

1. Aktiviti Berpasangan: Mengubahsuai dan menambahbaik atur cara

 Murid diberikan kebebasan memilih pasangan masing-masing (pair programming)

untuk aktiviti ini.

 Setiap pasangan diberikan masa selama 25 minit untuk mengubahsuai atur cara asal

yang dibina bersama pasangan rakan sebelum ini. Setiap pasangan dikehendaki

melakukan perkara-perkara berikut:
 Murid diminta menambahbaik atur cara asal dengan memasukkan sama ada

tag HTML <radio> atau <checkbox> bagi mendapatkan nilai input dari tag

tersebut.

Contoh jawapan seperti di Lampiran 5.

2. Aktiviti Berkumpulan (3 orang): Mengenalpasti kesalahan sintak

 Guru menunjukkan sebuah atur cara Javascript yang mengandungi beberapa

kesalahan sintak seperti di Lampiran 6.

 Setiap pasangan murid diberikan masa selama 10 minit untuk mengenalpasti

kesilapan-kesilapan sintak di dalam atur cara tersebut.

 Dengan menggunakan stick-on notes, wakil dari setiap kumpulan diminta menampal

pada bahagian atur cara yang mengandungi kesalahan sintak dan memberikan
penerangan tentang kesilapan tersebut dan bagaimana untuk memperbetulkannya.
 Selepas tamat 30 minit, murid diminta menghantar tugasan kepada guru melalui
USB drive.

KESIMPULAN MASA: 10 minit

 Guru meminta murid menjawab soalan melalui permainan online Kahoot bagi

menguji kefahaman murid tentang Bahasa Penskripan Klien. Soalan dan jawapan

seperti Lampiran 8.

 Guru memberi panduan tentang cara-cara mencapai permainan Kahoot secara

online seperti di Lampiran 7.

 Murid membuat aktiviti secara individu. Jawapan kepada setiap soalan akan

ditunjukkan sebaik sahaja setiap soalan tamat.

 Guru membuat kesimpulan ringkas tentang topik-topik yang baru dipelajari.

TOPIK AKAN DATANG MASA: 2 minit

 Guru memaparkan kembali contoh atur cara yang diberi di dalam aktiviti sebelum

ini yang menggunakan Bahasa Penskripan Klien Javascript. Guru menekankan

tentang kepentingan membuat algoritma atau memikirkan langkah-langkah yang

perlu sebelum menulis sesebuah atur cara.
 PdPc untuk kelas yang akan datang : 3.1.2 – Menterjemah atur cara mudah yang

diberi dari Bahasa Penskripan Klien kepada carta alir.

10/27/2018

Perhatikan skrin-
skrin berikut :

SKRIN1
1

10/27/2018
SKRIN2

Berdasarkan kedua-dua skrin yang
dipaparkan sebelum ini :

Apakah pendapat anda tentang skrin-skrin
yang ditunjukkan?
Apakah kekuatan/kelebihan setiap paparan
laman web tersebut?
Berikan justifikasi anda sekiranya anda pilih
(a) Skrin 1 atau (b) Skrin 2 untuk paparan
laman web di internet

2

10/27/2018

Apa itu Bahasa
Penskripan Klien?

diproses oleh beroperasi di perlu
pelayar web dalam diterjemah

komputer tanpa
pengguna dikompil

(klien)

antaramuka BAHASA bersifat
pengguna di PENSKRIPAN dinamik

web KLIEN diselitkan di
dalam laman
menigkatkan aturcara web HTML
interaktiviti kelakuan

web

1

10/27/2018

CARA PEMPROSESAN
BAHASA PENSKRIPAN KLIEN

Javascript + HTML Google.com

<html>

<script>
Abu document.write

("Selamat
Datang");
</script>

</html>

CONTOH-CONTOH
BAHASA PENSKRIPAN KLIEN

<html> <html>
<body> <body>
<% <script type="text/javascript">

out.print("Welcome to JSP"); alert("Hello Javascript");
%> </script>
</body> </body>
</html> </html>

Java Server Pages (JSP) Javascript

<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<?php <%

echo "My first PHP script!"; Response.Write("My ASP World!")
?> %>
</body> </body>
</html> </html>

PHP: Hypertext Preprocessor Active Server Pages (ASP)

2

10/27/2018

ringan sejenis
bahasa
penskripan

diterjemah CIRI-CIRI loosely typed
tanpa JAVASCRIPT

dikompil

beorientasikan sensitif-
objek huruf

Set arahan
mudah

KEGUNAAN JAVASCRIPT

 Mengubah isi kandungan HTML, attributes dan juga HTML styles
 Menambahkan interaktiviti dan tindakbalas antara laman web

dengan pengguna web
 Mengesahkan input pengguna di dalam borang web
 Memaparkan mesej
 Memilih senarai navigasi
 Pengiraan
 Image Rollovers
 Memaparkan tarikh semasa

3

10/27/2018

KELEBIHAN JAVASCRIPT KELEMAHAN JAVASCRIPT

• Bahasa pengaturcaraan yang • Isu keselamatan
mudah • Kemampuan pelaksanaan

• Diproses di komputer pengguna berbeza-beza mengikut standard
sahaja library
• Kebergantungan kepada
• Dilaksanakan dengan pantas keupayaan pelayar
• Tambahan fungsi-fungsi dari

aplikasi luar

External TEKNIK Embedded
MEMASUKKAN
<head> <body>
<script src = "hello.js"> JAVASCRIPT <script>
</script>
</head> Inline document.write("Hello");
</script>
<body> </body>
<button type="button"
onclick="alert('Hello!
');"> Klik </button>
</body>

4

10/27/2018

Javascript Events

Event Event Handler
click onclick
load onload
mouseover onmouseover
mouseout onmouseout
submit onsubmit
unload onunload

Document Object (DOM)

Method Penerangan

createAttribute( ) Membina nod bagi attribut

createElement( ) Membina nod bagi attribute bagi elemen

createTextNode( ) Membina nod teks

Memulangkan nod bagi elemen yang mana

getElementById(id) atribut idnya bersamaan dengan parameter id

yang dihantar

Memulangkan nodeList bagi elemen-elemen yang

getElementsByTagName(name) mana nama tagnya bersamaan dengan

parameter name parameter

5

10/27/2018

Node Elements Object

Property Penerangan
className
id Nilai semasa atribut kelas bagi elemen HTML berkenaan.
innerHTML
Nilai semasa bagi id elemen berkenaan.
style Mewakili semua perkara di dalam tag. Boleh dibaca atau
tagName ditulis dan merupakan cara utama untuk mengemas kini
div tertentu menggunakan JS.

Atribut gaya unsur. Kandungannya boleh dibaca dan
diubah suai.
Nama tag untuk elemen tersebut.

Javascript Properties

Property Penerangan Tags
a
href Atribut href yang digunakan dalam tag untuk
menentukan URL untuk dipautkan. a, input,
textarea, form
Sifat penanda halaman untuk mengenal pasti tag
img, input,
name berkenaan. Berbeza dengan id yang tersedia iframe, script
untuk semua tag, nama adalah terhad kepada tag
Input,
berkaitan bentuk tertentu. textarea,
submit
Pautan kepada URL luaran yang perlu dimuatkan
src ke dalam halaman (berbeza dengan href yang

merupakan pautan untuk diikuti apabila diklik).

value Ia berkaitan dengan atribut nilai tanda input.
Selalunya nilai medan input ditentukan oleh
pengguna dan digunakan untuk mendapatkan
input pengguna.

6

LAMPIRAN 3

Kod aturcara 1 di dalam Javascript (Teknik inline):
<!DOCTYPE html>
<html>
<body>

<h2>Program pertama saya</h2>

<button type="button" onclick="alert('Selamat datang ke
Javascript!');"> Lihat saya!</button>

</body>
</html>

Contoh output:

Kod aturcara 2 (Teknik embedded):
<!DOCTYPE html>
<html>
<body>

<h2>Pengenalan kepada Javasript</h2>

<p id="demo"></p>

<script>
document.write("Jom belajar Javascript!");

</script>

</body>
</html>

Output:

Kod aturcara 3 (Teknik external):
Fail program3.html

<!DOCTYPE html>
<html>
<body>

<h2>Teknik selitan external</h2>

<p id="demo"></p>

<script type="text/javascript"
src="program3.js">
</script>

</body>
</html>
Fail program3.js
document.write("Saya sudah dipanggil!");

Contoh Output:

Kod aturcara 4 (Menghantar input melalui HTML form: inline):
<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h2>Menghantar input melalui HTML Form</h2>

<form name="form1" action="">

Nama Kelas : <input type="text" id="kelas"/>

<input type="button" name="b1" value="Hantar"
onclick="alert('Anda berjaya! ' +
document.form1.kelas.value)"/>

</form>
</body>
</html>

Contoh Output:

Kod aturcara 5 (Menggunakan check box dengan Javascript):

<!DOCTYPE html>
<html>
<body>

<h2>MENU PILIHAN ANDA?</h2>

<form action="">

<input type="text" id="nasi">
<input type="button" onclick="order()" value="Hantar
pesanan"><br><br>

<input type="checkbox" id="tambahan"
onclick="document.getElementById('tambahan').value='Ayam
Goreng'">Ayam Goreng<br><br>

<b><font color="blue"><p id="pesan1"></p></font></b>
<b><font color="blue"><p id="pesan2"></p></font></b>
</form>
<script type="text/javascript" src="order.js">
</script>

</body>
</html>

Fail order.js

function order() {

if(document.getElementById("nasi").value.length == 0 ){
document.getElementById("nasi").value = "";

}

if(document.getElementById("tambahan").checked == false){
document.getElementById("tambahan").value = "";

}

document.getElementById("pesan1").innerHTML = "PESANAN ANDA: " +
document.getElementById("nasi").value + " " +
document.getElementById("tambahan").value;
document.getElementById("pesan2").innerHTML = "Terima kasih...";
}

Contoh Output:

Lampiran 4 – Contoh jawapan (Aturcara Ucap Selamat)

Output Jangkaan:

Fail ucap.html
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<form id="userData" name="userData" action="">

Masukkan Nama: <br />
<input type="text" name="kotakNama" size="30" /> <br/><br />
Klik bila selesai: <input type="button" name="b1"
value="Submit"

onclick="ucap()" />
<br /><br />
<input type="text" name="kotakUcap" size="40" />
</form>
<script type="text/javascript" src = "ucap.js">
</script>
</body>
</html></html>

Fail ucap.js
function ucap(kotakNama)
{
document.userData.kotakUcap.value = "Selamat Datang, " +
document.userData.kotakNama.value;
}

Lampiran 5

Menambahbaik aturcara (Teknik embedded)

ucap.html

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<form id="userData" name="userData" action="">

Masukkan Nama: <br />
<input type="text" name="kotakNama" size="30" /> <br /><br />
Aliran: <br />
<input type="checkbox" name="kotakAlir"
onclick="document.userData.kotakAlir.value='(Sains Komputer)'"
size="30" />
Sains Komputer <br /><br />
<input type="text" name="kotakUcap" size="60" />
<input type="button" name="b1" value="Hantar"
onclick="ucap()" />
</form>

<script type="text/javascript">
//kandungan .js dimasukkan di sini
function ucap()
{
document.userData.kotakUcap.value = "Selamat Datang, " +
document.userData.kotakNama.value + " " +
document.userData.kotakAlir.value;
document.userData.kotakAlir.value = "";
}

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

Output Jangkaan:

Lampiran 6

Pembetulan Sintak (berdasarkan aktiviti Lampiran 4)

Fail ucap.html

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<form id="userData" name="userData" action="">

Masukkan Nama: <br />

<input type="text" name="kotakNama" size="30" /> <br/><br />

Klik bila selesai: <input type="button" name="b1o"nclick
value="Submit"/>
="ucap()"

<br /><br /> src =

<input type="text" name="kotakUcap" size="40" /">ucap.js"

</form>
<script type="text/javascript" ></scrip

</body>
</html></html>

Fail ucap.js

ucap( ) document.userData.kotakUcap.va
lue
function ucapan()
{

document.userData.value = "Selamat Datang, " +

document.userData.value;

}

document.userData.kotakNama.va

lue

Lampiran 7

Manual Kahoot (Guru)

Langkah 1: Membuka akaun Kahoot.

 Layari laman web Kahoot di alamat https://kahoot.com. Klik pada .

 Seterusnya pilih untuk menggunakan Kahoot sebagai tenaga pengajar  “As A

Teacher”.

Langkah 2: Daftar masuk
Daftar masuk dengan menggunakan akaun gmail atau akaun email yang lain

Langkah 3: Log Masuk untuk Penyediaan Kuiz

Log masuk untuk mula menyediakan kuiz daripada siri soalan-pelbagai-pilihan.

Langkah 4: Memasukkan Tajuk kuiz, penerangan serta imej berkaitan (jika perlu)
Masukkan Tajuk Kuiz (Title) dan sedikit penerangan berkaitan topik yang dipilih. Guru juga
boleh memuat naik image (Add Image) berkaitan untuk kuiz yang dibina.

Untuk tutorial lanjutan pembinaan kuiz melalui Kahoot layari:
https://www.youtube.com/watch?v=ABDFYd2UWIA