KPD3014 KP4

BAHAGIAN PENDIDIKAN TEKNIK DAN
VOKASIONAL
KEMENTERIAN PENDIDIKAN MALAYSIA
ARAS 5 & 6, BLOK E14, KOMPLEKS E,
PUSAT PENTADBIRAN KERAJAAN PERSEKUTUAN
KERTAS PENERANGAN
(INFORMATION SHEET)
KOD DAN NAMA NOSS IT-010-3: 2016 APPLICATION DEVELOPMENT

KOD DAN NAMA CU /
C02 - APPLICATION MODULE DEVELOPMENT
WA
TEKNOLOGI SISTEM PENGURUSAN PANGKALAN DATA
NAMA PROGRAM
DAN APLIKASI WEB
TAHAP DAN SEMESTER 3 (SEMESTER 3)
KOD DAN TAJUK

KPD3014: WEB APPLICATION DEVELOPMENT
KURSUS
NO.DAN TAJUK
K4 WRITE MODULE CODE
KOMPETENSI
NO. KOD KSKV KPD 3014 / KP (4/5)

Muka Surat : 1 Drp : 26
NO. KOD NOSS IT-010-3:2016/KP(4/5)
TAJUK/TITLE :
WRITE MODULE CODE & COMMIT MODULE SOURCE CODE
TUJUAN/PURPOSE :
Kertas penerangan ini adalah bertujuan menerangkan mengenai :
1. Jenis bahasa pengaturcaraan penskripan yang digunakan: HTML, CSS dan JS
2. Statement dan Variable
3. Operator
4. Struktur Kawalan: if- else Switch dan Repetation
5. Function dalam Javascript
6. Array : Satu dimensi
7. Browser Object Model (B.O.M)
8. Event
9. Application Mockup
10. Unit Testing
11. Debugging prosedur
WIM EDISI JAN 2019
NO. KOD / SKPK IT-010-3:2016/KP(3/5) Muka Surat / Page : 2
CODE NO. KSKV KPD 3014 / KP (3/5) Drp / of : 4
PENERANGAN/INFORMATION:
1.0 Jenis bahasa pengaturcaraan penskripan
1.1 Hyper Text Markup Language (HTML)
HTML adalah sebuah bahasa markup yang digunakan untuk buat
web dan memaparkan pelbagai maklumat di dalam sebuah browser
internet. HTML merupakan standard internet yang didefinisikan dan
dikendalikan penggunaannya oleh World Wide Web Consortium
(W3C).
Contoh Code HTML

1.2 Cascading Style Sheet
(CSS)
CSS adalah singkatan
bagi Cascading Style Sheet
yang merupakan kumpulan
perintah yang direka dari
berbagai sumber yang
disusun menurut urutan
tertentu sehingga mampu
mengatasi masalah style. CSS salah satu bahasa pengaturcaraan web
yang mengatur komponen dalam laman web supaya laman lebih
berstruktur dan seragam. CSS secara amnya mengatur warna body teks,
ukuran, border, warna jadual dan hyperlink, margin, padding, paragraph
spacing dan banyak lagi. Format ini dapat menampilkan halaman yang
sama dengan format yang berbeza.
CARA PENULISAN CSS

Tanda atau symbol CSS adalah seperti berikut;
body {
background:lightcyan;
}
WIM EDISI JAN 2019
Tanda {} dinamakan selector, teks yang diapit oleh {} dinamakan

declaration yang terdiri dari 2 unsur iaitu property dan value. Selector
dalam penyataan diatas adalah ‘body’, ‘background’ adalah property dan
‘lightcyan’ adalah value
KELEBIHAN CSS
o Mengemaskini tampilan lebih mudah.
o Beban bandwith yang lebih kecil.
o Memisahkan gaya rekaan dengan kandungan halaman web
o Modifikasi web template yang lebih mudah
o Lebih mudah digunakan pada peranti mudah alih seperti smartphone
o Menyusun reka bentuk dengan efisyen
o Satu fail CSS yang boleh digunakan oleh banyak halaman
o Mudah dimuat turun atau di muat naik keran ukuran fail yang kecil
o Mengurangkan penulisan kod kerana satu tag boleh dipakai oleh
banyak kod HTML
o Rekaan gaya yang lebih menarik berbanding HTML
o Menjimatkan masa kerja, semasa membuat mahupun mengubah
halaman web atau blog
o Jika ingin mengubah tema atau warna halaman, hanya perlu ubah
CSS sahaja.
KEKURANGAN CSS
o Paparan pada setiap browser berbeza
o Terdapat browser yang tidak dapat menyokong CSS contohnya
browser lama
o Perlu tahu cara menggunakannya
o Memerlukan waktu yang lama untuk membuat dan menyusun tag
CSS
o Tiada lagi bug / error dalam CSS
WIM EDISI JAN 2019

1.3 JAVASCRIPT (JS)

JavaScript adalah bahasa pengaturcaraan yang berguna untuk membuat interaksi di
laman web supaya laman web kelihatan lebih hidup. Ia biasanya digunakan untuk
mencipta kesan di laman web. JavaScript telah menjadi salah satu bahasa
pengaturcaraan wajib dan mesti dikuasai untuk membina sebuah laman web moden.
Bagi sesetengah bahasa pengaturcaraan yang mesti dikuasai oleh pemaju web
ialah:
● HTML: bertindak sebagai pembuat borang.
● CSS: mempunyai peranan dalam reka bentuk, warna, teks dan sebagainya
● JavaScript: membuat kesan yang menjadikan laman web lebih interaktif.
Banyak laman web menggunakan JavaScript untuk membuat pemberitahuan jenis

alert, pengesahan borang, kesan khas, ajax, permainan dan sebagainya. Contoh
laman web yang menggunakan JavaScript untuk menjadikan laman web mereka
lebih interaktif atau lebih hidup adalah facebook, twittter, google dan lain-lain.
Facebook terdapat kotak chatting yang boleh dibuka dan ditutup apabila diklik
kerana menggunakan bantuan JavaScript. Dalam proses pemesanan atau
pemeriksaan tambang tiket penerbangan melalui laman perkhidmatan tiket
penerbangan, selepas memilih bandar sekarang dan memilih bandar destinasi, ia
akan muncul syarikat penerbangan pesawat boleh didapati tanpa memuat semula
halaman. ini berlaku kerana ia menggunakan teknik ajax yang dicipta dengan
JavaScript.
<script>
........
</script>
Rajah : Element bagi script
Pengetahuan asas yang perlu diketahui dari JavaScript adalah seperti berikut.
● Fail disimpan dengan extension .js.
● Sintaks JavaScript yang dimasukkan dalam halaman HTML mesti ditulis
WIM EDISI JAN 2019

dalam tag <script>.
● JavaScript sintaks boleh diletakkan di dalam tag elemen <head> atau tag
<body>.
Dalam tag elemen <head>

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Dalam tag elemen <body>

<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
}
</script>
</body>
</html>
● JavaScript adalah case sensitive.
● Pada akhir setiap baris mesti ditutup dengan titik koma (;).
● Sintaks JavaScript boleh digunakan dalam 2 cara iaitu dengan cara

o tampal pada halaman HTML langsung
o menyimpan JavaScript dengan extension .js (external file) dan
kemudian masukkannya ke halaman HTML.
WIM EDISI JAN 2019

External file: myScript.js

(Skrip luar tidak boleh mengandungi tag <script>)
}
Untuk menggunakan skrip luaran (external file), letakkan nama fail skrip dalam atribut src (sumber) tag
<script>:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
● Kelebihan External JavaScript
o Ia memisahkan HTML dan kod

o Ia menjadikan HTML dan JavaScript mudah dibaca dan
diselenggarakan
o Cache JavaScript boleh mempercepatkan proses muatan halaman
● Untuk memasukkan beberapa fail skrips ke dalam suatu halaman boleh
menggunakan beberapa tag script.
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
1.3.1 Output
JavaScript boleh "memaparkan" data dengan cara yang berbeza:
a) Menulis ke dalam elemen HTML, menggunakan innerHTML.

b) Menulis ke output HTML menggunakan document.write ().
c) Menulis ke dalam kotak alert, menggunakan window.alert ().
d) Menulis ke browser console, menggunakan console.log ().
a) Menggunakan innerHTML
Untuk mengakses elemen HTML, JavaScript boleh menggunakan kaedah

document.getElementById (id).
Atribut id mentakrifkan elemen HTML. ciri innerHTML mentakrifkan kandungan

HTML:
<!DOCTYPE html> My First Web Page

<html>
WIM EDISI JAN 2019
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p> My First Paragraph.
<p id="demo"></p> 11
<script>
document.getElementById("demo").innerHTML = 5 + 6
;
</script>
</body>
</html>
b) Menggunakan document.write()
Untuk tujuan ujian, mudah untuk menggunakan document.write ():
<!DOCTYPE html> My First Web Page

<html>
<body> My First Paragraph.
<h1>My First Web Page</h1> 11

<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
c) Menggunakan window.alert()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<p>My first paragraph.</p>
My First Web Page
<script>
window.alert(5 + 6); My First Paragraph.
</script>
</body>
</html>
d) Menggunakan console.log()
Untuk tujuan debugging, boleh menggunakan kaedah console.log () untuk memaparkan
data.
WIM EDISI JAN 2019

<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
2.0. Statement dan Variable

2.1 Pernyataan (Statement)
Dalam HTML, pernyataan JavaScript adalah "arahan" untuk "dilaksanakan" oleh

web browser.
● Pernyataan ini memberitahu browser untuk menulis "Hello Dolly." dalam
elemen HTML dengan id = "demo":
document.getElementById("demo").innerHTML = "Hello Dolly.";
● JavaScript programs
o Kebanyakan program JavaScript mengandungi banyak pernyataan

JavaScript.
o Pernyataan-pernyataan dilaksanakan, satu demi satu, dalam susunan yang
sama seperti yang ditulis.
o Dalam contoh ini x, y, dan z diberi nilai, dan akhirnya z dipaparkan:
var x, y, z; 11
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML = z;
o Semicolons mengasingkan JavaScript statements.

Tambah semicolon pada akhir setiap pernyataan yang Apabila dipisahkan dengan semicolons, beberapa
boleh dilaksanakan pernyataan pada satu baris dibenarkan:
var a, b, c; a = 5; b = 6; c = a + b;
a = 5;
b = 6;
WIM EDISI JAN 2019
c = a + b;
o JavaScript mengabaikan banyak ruang (spaces). Anda boleh menambah

ruang putih pada skrip anda untuk menjadikannya lebih mudah dibaca.
var person = "Hege"; bersamaan var person="Hege";
2.1.1 Komen (Comments)
● Komen JavaScript boleh digunakan untuk menerangkan kod JavaScript, dan
menjadikannya lebih mudah dibaca.
● Komen JavaScript juga boleh digunakan untuk mencegah pelaksanaan ketika
menguji kod alternatif.
a) Komen satu baris (Single line comment)
● Bermula dengan //
● Sebarang teks antara // dan akhir baris akan diabaikan oleh JavaScript (tidak akan
dilaksanakan).
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
var x = 5; // Declare x, give it the value of 5

var y = x + 2; // Declare y, give it the value of x + 2
b) Komen berbilang baris (Multi-line comments)
● Komen berbilang baris bermula dengan / * dan berakhir dengan * /.
● Sebarang teks antara / * dan * / akan diabaikan oleh JavaScript.
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
2.2 Variable
WIM EDISI JAN 2019
2.2.1 Variables
Cara menulis atau mengisytiharkan pembolehubah dalam javascript:
● Nama pembolehubah boleh menggunakan huruf, nombor, tanda underscore (_) dan
tanda dollar ($).
● Nama pembolehubah mesti bermula dengan huruf.
● Nama pembolehubah tidak boleh mengandungi ruang (space).
● Nama pembolehubah adalah case sensitive (y dan Y adalah berbeza)
● Menulis pembolehubah Javascript bermula dengan sintaks "var".
var carName;
atau
var carName = "Volvo";
● Kata-kata reserved (seperti kata kunci JavaScript) tidak boleh digunakan sebagai
nama,
2.2.2 Jenis data (Data types)
● Pemboleh ubah JavaScript boleh memegang nombor seperti 100 dan nilai teks
seperti "John Doe".
● Dalam pengaturcaraan, nilai teks dipanggil string.
● JavaScript boleh mengendalikan banyak jenis data
Jenis data Contoh

Number var length = 16;
String var lastName = "Johnson";
Object var x = {firstName:"John", lastName:"Doe"};
var x = 5;
var y = 5;
Boolean var z = 6;
(x == y) // Returns true
(x == z) // Returns false
Array var cars = ["Saab", "Volvo", "BMW"];
WIM EDISI JAN 2019

● String ditulis di dalam double atau single quotes. Nombor ditulis tanpa tanda quotes.
● Jika anda memasukkan nombor dalam tanda quotes, ia akan dianggap sebagai
string.
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
Penerangan / Contoh Hasil

var x = 5 + 2 + 3; 10
String dapat ditambahkan, tetapi string akan

digabungkan:
var x = "John" + " " + "Doe"; John Doe
Jika anda memasukkan nombor dalam quotes,

nombor yang lain akan dianggap sebagai string,
dan mengabungkannya.
var x = "5" + 2 + 3; 523
var x = 2 + 3 + "5"; 55
String
● String adalah jenis data yang terdiri daripada huruf atau kata-kata.
● String ditulis dalam tanda single atau double quotes.
● boleh menggunakan quotes di dalam string, selagi mereka tidak sepadan dengan
tanda quotes di sekeliling string.
var answer = "It's alright";

It's alright
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
He is called 'Johnny'
He is called "Johnny"
● String length
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

26
document.write(txt.length);
WIM EDISI JAN 2019

● Special characters
Backslash (\ escape character) menjadikan special characters menjadi string
character:
var x = 'It\'s alright';
It's alright
var y = "We are the so-called \"Vikings\"
from the north.";
We are the so-called "Vikings" from the
north.
● Mencari string dalam string

o Kaedah indexOf() mengembalikan indeks (kedudukan) kejadian pertama teks
tertentu dalam string.
Kejadian pertama bagi teks “locate” pada tempat ke-7.
7
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
o Kaedah lastIndexOf() mengembalikan indeks kejadian terakhir teks tertentu

dalam string.
Kejadian pertama bagi teks “locate” pada tempat ke-21.
21
var pos = str.lastIndexOf("locate");
o Kedua-dua kaedah mengembali ke nombor -1 jika tiada teks didapati.

o Kedua-dua kaedah menerima parameter kedua sebagai kedudukan permulaan
untuk carian
Kejadian pertama bagi teks “locate” apabila titik permulaan tukar ke tempat ke-
21
15 adalah pada tempat ke-21.
var pos = str.indexOf("locate",15);
o Kaedah search() mencari string untuk nilai tertentu dan mengembalikan

kedudukan berpadanan.
7
var pos = str.search("locate");
o Kedua kaedah, indexOf () dan search () berbeza dari segi:

▪ Kaedah carian () tidak dapat mengambil hujah (argument) kedudukan awal.
▪ Kaedah indeksOf () tidak boleh mengambil nilai carian yang kuat (regular
expressions- eg: /pattern/modifiers;).
WIM EDISI JAN 2019
3.0 Operator
3.1 Matematik
3.2 Assignment
Operator tugasan (Assignment Operator)

Dalam JavaScript, tanda sama dengan (=) adalah operator "tugasan", bukan operator "sama
dengan".
x = x + 5
Ia mengira nilai x + 5 dan meletakkan hasilnya menjadi x. Nilai x menambah sebanyak 5.
3.3 Increment
3.4 Decrement
3.5 Relational
3.6 Logical
3.7 Conditional
4.0 Struktur Kawalan:

Conditions
Penyataan bersyarat (conditions) digunakan untuk melakukan tindakan yang berbeza

berdasarkan keadaan yang berbeza.
a) Gunakan if untuk menentukan satu blok kod yang akan dilaksanakan, jika keadaan
yang dinyatakan adalah benar
b) Gunakan else untuk menentukan satu blok kod yang akan dilaksanakan, jika
keadaan yang sama adalah palsu
c) Gunakan else if untuk menentukan syarat baru untuk menguji, jika syarat pertama
adalah palsu
d) Gunakan switch untuk menentukan blok alternatif kod yang akan dilaksanakan
A) if statement
● untuk menentukan satu blok kod JavaScript yang akan dilaksanakan jika keadaan
adalah benar.
● Sintaks
if (condition) {
block of code to be executed if the condition is true
WIM EDISI JAN 2019

● Contoh
Menghasilkan kata aluan "Good day" kalau masa Jika masa sekarang adalah 0958, maka akan dapat
kurang daripada 18:00. paparan berikut.
var hour = new Date().getHours(); Good day

var greeting;
if (hour < 18) {
greeting = "Good day";
}
B) else statement
● untuk menentukan satu blok kod yang akan dilaksanakan jika keadaan adalah
salah.
● Sintaks
if (condition) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}
● Contoh
Menghasilkan kata aluan "Good day" kalau masa Jika masa sekarang adalah 0958, maka akan dapat
kurang daripada 18:00, jika tidak “Good evening” paparan berikut.
dipaparkan.
var hour = new Date().getHours(); Good day

var greeting;
if (hour < 18) {
} else {
greeting = "Good evening";
}
C) else if statement
● untuk menentukan syarat baru jika syarat pertama adalah palsu
● Sintaks
if (condition1) {
block of code to be executed if condition1 is true
} else if (condition2) {
block of code to be executed if the condition1 is false and condition2 is
true
} else {
block of code to be executed if the condition1 is false and condition2 is
false
WIM EDISI JAN 2019
● Contoh
Jika masa adalah kurang daripada 10:00, mewujudkan Jika masa sekarang adalah 0958, maka akan
"Good Morning" ucapan, jika tidak, tetapi masa adalah dapat paparan berikut.
kurang daripada 20:00, mewujudkan "Good day", jika
tidak "Good evening":
var time = new Date().getHours(); Good day

var greeting;
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
} else {
greeting = "Good evening";
}
D) switch
● memilih salah satu daripada banyak blok kod yang akan dilaksanakan.
● Sintaks
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
code block
}
● break akan menghentikan pelaksanaan kod dan ujian dalam blok.
● tidak perlu break pada blok kes switch terakhir kerana blok akan berhenti di sana
● kata kunci default menentukan kod untuk berjalan jika tiada kes padanan (match)
● Contoh
Kaedah getDay () mengembalikan hari minggu sebagai nombor antara 0 dan Hari ini adalah Selasa
6. (30/1/2018)
Jika hari ini bukan Sabtu (6) atau Ahad (0), menulis mesej default:
switch (new Date().getDay()) { Looking forward to

case 6: the Weekend
text = "Today is Saturday";
WIM EDISI JAN 2019
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
Kadang-kadang anda akan mahu kes switch yang berbeza untuk Hari ini adalah Selasa
menggunakan kod yang sama. (30/1/2018)
Dalam contoh ini kes 4 dan 5 bahagian blok kod yang sama, dan 0 dan 6
bahagian blok kod lain:
switch (new Date().getDay()) { Looking forward to

case 4: the Weekend
case 5:
text = "Soon it is Weekend";
break;
case 0:
case 6:
text = "It is Weekend";
break;
default:
text = "Looking forward to the Weekend";
}
Loops
● Gelung (Loops) boleh melaksanakan satu blok kod beberapa kali.
● Gelung dapat menjalankan kod yang sama berulang-ulang kali, setiap kali dengan
nilai yang berbeza.
● Sentiasa digunakan apabila berurusan dengan array
Bukan ditulis dalam bentuk ini Tetapi ditulis dengan menggunakan

loop
text += cars[0] + "<br>"; for (i = 0; i < cars.length; i++)
text += cars[1] + "<br>"; {
text += cars[2] + "<br>"; text += cars[i] + "<br>";
text += cars[3] + "<br>"; }
text += cars[4] + "<br>";
text += cars[5] + "<br>";
● Contoh
<!DOCTYPE html> JavaScript Loops
<html> BMW
<body> Volvo
WIM EDISI JAN 2019
Saab
<h2>JavaScript Loops</h2> Ford
Fiat
<p id="demo"></p> Audi
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford",
"Fiat", "Audi"];
var text = ""; //permulaan text tiada nilai
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
● Jenis-jenis loop yang berbeza

JavaScript menyokong pelbagai jenis gelung:
a) for - gelung melalui satu blok kod beberapa kali
b) for / in - gelung melalui sifat-sifat objek
c) while - gelung melalui satu blok kod manakala keadaan yang dinyatakan
adalah benar
d) do / while - juga gelung melalui satu blok kod manakala keadaan yang
dinyatakan adalah benar
A) For loop
● menggunakan apabila anda ingin membuat loop.
● Sintaks
for (statement 1; statement 2; statement 3) {

code block to be executed
}
o statement 1 dilaksanakan sebelum loop (blok kod) bermula.

o statement 2 mentakrifkan keadaan bagi pelaksanaan loop (blok kod).
o statement 3 dilaksanakan setiap kali selepas loop (blok kod) telah
dilaksanakan.
● Contoh
for (i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";
}
Dari contoh di atas, anda boleh membaca:

o statement 1 set pembolehubah sebelum loop bermula (var i = 0).
WIM EDISI JAN 2019

o statement 2 mentakrifkan syarat untuk menjalankan loop (i mesti kurang

daripada 5).
o statement 3 meningkatkan nilai (i ++) setiap kali blok kod di dalam loop itu
telah dilaksanakan.
● Penerangan statement 1, 2 dan 3 dalam sintaks for loop.
statement 1
● Pilihan (optional)
● Boleh memulakan banyak nilai dalam satu statement 1 (dipisahkan

oleh koma)
for (i = 0, len = cars.length, text = ""; i < len; i++) {
}
● Boleh meninggalkan statement 1 (apabila nilai-nilai telah ditentukan

sebelum loop bermula)
var i = 2;
var len = cars.length; //nilai ditentukan sebelum loop bermula
var text = "";
for (; i < len; i++) {
}
statement 2
● Jika statement 2 adalah benar, loop akan bermula sekali lagi, jika ia
mengembalikan palsu, loop akan berakhir.
● Jika anda meninggalkan statement 2, anda mesti memberikan break
di dalam loop. Jika tidak loop tidak akan tamat.
statement 3
● statement 3 boleh berbuat apa-apa seperti, kenaikan negatif (i--)

kenaikan positif (i = i + 15), dll.
● statement 3 juga boleh ditinggalkan (apabila kenaikan nilai ditentukan
dalam loop)
var i = 0;
var len = cars.length;
for (; i < len; ) {
i++;
}
B) For/in loop
WIM EDISI JAN 2019
● satu penyataan loop melalui sifat-sifat objek
var person = {fname:"John", lname:"Doe", age:25}; John Doe 25
var text = "";

var x;
for (x in person) {
text += person[x];
}
C) While loop
● loop melalui satu blok kod selagi keadaan yang dinyatakan adalah benar.
● Sintaks
while (condition) {
}
● Contoh
while (i < 10) {

text += "The number is " + i;
i++;
}
● Dalam contoh berikut, kod di dalam loop akan berjalan, selagi pembolehubah (i)
adalah kurang daripada 10:

D) Do/while loop
● melaksanakan blok kod sekali, sebelum memeriksa jika keadaan ini benar, maka ia
akan mengulangi gelung selagi keadaan adalah benar.
● Sintaks
do {
}
while (condition);
● Contoh
do {
text += "The number is " + i;
i++;
}
while (i < 10);
WIM EDISI JAN 2019

E) Perbandigan For dan While
● Didapati bahawa while loop adalah lebih kurang sama seperti for loop, dengan
statement 1 dan statement 3 ditinggalkan.
● Contoh berikut menggunakan dua jenis loop untuk mengumpul nama-nama kereta
dari array car:
For loop While loop

var cars = var cars =
["BMW", "Volvo", "Saab", "Ford"]; ["BMW", "Volvo", "Saab", "Ford"];
var i = 0; var i = 0;
var text = ""; var text = "";
for (;cars[i];) { while (cars[i]) {

text += cars[i] + "<br>"; text += cars[i] + "<br>";
i++; i++;
} }
5.0 Function dalam Javascript

Functions
● Fungsi JavaScript adalah blok kod yang direka untuk melaksanakan tugas tertentu.
● Fungsi JavaScript dilaksanakan apabila "sesuatu" memanggilnya (calls it).
<!DOCTYPE html> JavaScript Functions

<html> This example calls a function which
<body> performs a calculation, and returns the
result:
<h2>JavaScript Functions</h2>
12
<p>This example calls a function which
performs a calculation, and returns the
result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML =
myFunction(4, 3);
</script>
</body>
</html>
WIM EDISI JAN 2019

● Sintaks Fungsi
o Fungsi JavaScript ditakrifkan dengan kata kunci function, diikuti dengan

nama, diikuti oleh kurungan ().
o nama fungsi boleh mengandungi huruf, angka, underscores, dan tanda-tanda
dolar (peraturan yang sama seperti pembolehubah).
o Kurungan mungkin termasuk nama parameter dipisahkan dengan koma:
( parameter1, parameter2, ... )
o Kod yang hendak dilaksanakan dengan fungsi itu, diletakkan di dalam
kurungan kerinting: {}
function name(parameter1, parameter2, parameter3) {

code to be executed
}
o Parameter fungsi disenaraikan dalam kurungan () dalam definisi fungsi.

o Hujah (argument) fungsi adalah nilai-nilai yang diterima oleh fungsi apabila ia
dilaksanakan.
● Function Return
o Apabila JavaScript mencapai penyataan kembali (return statement), fungsi

tersebut akan berhenti dilaksanakan.
Mengira hasil darab bagi dua nombor, dan kembali hasilnya: Keputusan dalam x
akan:
var x = myFunction(4, 3); // Function is called, return 12

value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the
product of a and b
}
Menukar Fahrenheit kepada Celsius:

function toCelsius(fahrenheit) { 25
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
o Dengan contoh di atas, toCelsius merujuk kepada objek fungsi, dan toCelsius
() merujuk kepada keputusan fungsi itu.
o Mengakses fungsi tanpa () akan kembali definisi fungsi dan bukannya hasil
fungsi:
function toCelsius(fahrenheit) { function toCelsius(f)
WIM EDISI JAN 2019
return (5/9) * (fahrenheit-32); { return (5/9) * (f-

} 32); }
document.getElementById("demo").innerHTML = toCelsius;
● Fungsi Digunakan sebagai Nilai Pembolehubah

o Fungsi boleh digunakan dengan cara yang sama seperti penggunaan
pembolehubah dalam semua jenis formula, tugasan, dan pengiraan.
Menggunakan pembolehubah untuk menyimpan nilai pulangan fungsi:
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";
Menggunakan fungsi secara langsung sebagai nilai pembolehubah:

var text = "The temperature is " + toCelsius(77) + " Celsius";
6.0 Array
● Array JavaScript digunakan untuk menyimpan pelbagai nilai dalam pemboleh ubah
tunggal.
Sintaks:
var array_name = [item1, item2, ...];
Contoh:
var cars = ["Saab", "Volvo", "BMW"];
● Mencipta array dengan kata kunci JavaScript new
var cars = new Array("Saab", "Volvo", "BMW");
● Mencapai elemen dalam array
o Merujuk elemen array dengan nombor indeks.

o [0] adalah elemen pertama dalam array. [1] ialah yang kedua. Indeks Array
bermula dengan 0.
Pernyataan ini mengakses nilai elemen pertama var name = cars[0];

dalam cars:
Pernyataan ini mengubah elemen pertama dalam cars[0] = "Opel";

kereta:
o Contoh:
Saab
document.getElementById("demo").innerHTML = cars[0];
WIM EDISI JAN 2019

● Mencapai array dengan sepenuhnya dengan merujuk nama array
o Contoh:
Saab,Volvo,BMW
document.getElementById("demo").innerHTML = cars;
● Ciri-ciri dan kaedah array

o Length : mengembalikan panjang array (jumlah elemen array).
▪ Contoh
<!DOCTYPE html> JavaScript Arrays

<html>
<body> The length property returns the
length of an array.
<h2>JavaScript Arrays</h2>
<p>The length property returns the length of an 4
array.</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple",
"Mango"];
fruits.length;
</script>
</body>
</html>
o Loop array
<!DOCTYPE html> JavaScript Arrays
<html>
<body> The best way to loop through an
array is using a standard for loop:
● Banana
<p>The best way to loop through an array is using
a standard for loop:</p> ● Orange
<p id="demo"></p> ● Apple

● Mango
<script>
var fruits, text, fLen, i;
WIM EDISI JAN 2019

fruits = ["Banana", "Orange", "Apple", "Mango"];

fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
o Tambah elemen array

Kaedah 1 : push
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits
<!DOCTYPE html>
<html>
<body>
<p>The push method appends a new element
to an array.</p>
<button onclick="myFunction()">Try Selepas tekan Try it
it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange",
"Apple", "Mango"];
document.getElementById("demo").innerHTML
= fruits;
fruits.push("Lemon");
= fruits;
}
</script>
</body>
</html>
Kaedah 2 : Ciri length
WIM EDISI JAN 2019

fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits
Kaedah 3 : Menggunakan index

(boleh membuat "lubang" yang tidak ditentukan nilai dalam array)
fruits[6] = "Lemon"; // adds a new element (Lemon) to fruits
<!DOCTYPE html>
<html>
<body> Banana,Orange,Apple,Mango,,,Lemon
<script>
(lubang-lubang yang belum ditentukan
nilai)
fruits[6] = "Lemon";
document.write(fruits);
</script>
</body>
</html>
o toString() : Menukar Array ke Strings

var fruits = Banana,Orange,Apple,Mango
["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
o join() : Ia berkelakuan seperti toString (), tetapi sebagai tambahan anda boleh
menentukan pemisah
var fruits = ["Banana", "Orange", "Apple", "Mango"]; Banana * Orange * Apple *
document.getElementById("demo").innerHTML = Mango
fruits.join(" * ");
o pop() : mengalihkan elemen terakhir dari array

var fruits = Sebelum pop():
fruits.pop();
Banana,Orange,Apple,Mango
// Removes the last element ("Mango") from fruits Selepas pop():

Banana,Orange,Apple
WIM EDISI JAN 2019

var fruits = Banana,Orange,Apple,Mango

var x = fruits.pop();
Mango (nilai x=fruits.pop)
// the value of x is "Mango"
o push() : menambah elemen baru pada array (pada akhir)

var fruits =
Sebelum push():
fruits.push("Kiwi"); Banana,Orange,Apple,Mango
// Adds a new element ("Kiwi") to fruits Selepas push():
Banana,Orange,Apple,Mango,Kiwi
var fruits = Selepas fruit.push:
var x = fruits.push("Kiwi");
5 (nilai x=fruits.push)
// the value of x is 5
o shift() : menghilangkan unsur array pertama dan "shift (menggeser)" semua

elemen lain ke indeks yang lebih rendah
var fruits =
Sebelum shift():
fruits.shift(); Banana,Orange,Apple,Mango
// Removes the first element "Banana" from fruits Selepas shift():
Orange,Apple,Mango
var fruits =
Banana (nilai fruits.shift)
fruits.shift(); // Returns "Banana"
o unshift() : menambah elemen baru pada array (pada mulanya), dan "unshifts"
elemen sebelumnya
var fruits =
Sebelum unshift():
fruits.unshift("Lemon"); Banana,Orange,Apple,Mango
// Adds a new element "Lemon" to fruits Selepas unshift():
Lemon,Banana,Orange,Apple,Mango
var fruits =
Selepas unshift():
fruits.unshift("Lemon"); // Returns 5 5 (nilai fruits.unshift )
o tukar elemen : Unsur-unsur array diakses menggunakan nombor indeks mereka

var fruits = Sebelum tukar fruits[0]:
fruits[0] = "Kiwi";
WIM EDISI JAN 2019

// Changes the first element of fruits to "Kiwi" Selepas tukar fruits[0]:

Kiwi,Orange,Apple,Mango
o hapus elemen
var fruits = ["Banana", "Orange", "Apple", "Mango"]; The first fruit is: Banana
delete fruits[0]; // Changes the first
element in fruits to undefined
The first fruit is: undefined
o splice() :
▪ tambah elemen baru pada array
Parameter pertama (2) mentakrifkan kedudukan di mana unsur-unsur baru perlu ditambah
(disambungkan dalam).
Parameter kedua (0) menentukan berapa banyak elemen yang perlu dikeluarkan.
Selebihnya parameter ("Lemon", "Kiwi") menentukan unsur-unsur baru yang akan
ditambah.
var fruits = Sebelum splice():

fruits.splice(2, 0, "Lemon", "Kiwi");
Selepas splice():
Banana,Orange,Lemon,Kiwi,Apple,Mango
▪ keluarkan elemen dari array

Parameter pertama (0) menentukan posisi di mana unsur-unsur baru perlu ditambah
(concatenating).
Parameter kedua (1) menentukan berapa banyak elemen yang perlu dikeluarkan.
Selebihnya parameter yang ditinggalkan. Tiada elemen baru akan ditambah.
var fruits = Sebelum splice():

["Banana", "Orange", "Apple", "Mango"]; Banana,Orange,Apple,Mango
fruits.splice(0, 1);
// Removes the first element of fruits Selepas splice():
Orange,Apple,Mango
o concat() : mewujudkan satu array baru dengan menggabungkan (concatenating)

array sedia ada
var myGirls = ["Cecilie", "Lone"]; Cecilie,Lone,Emil,Tobias,Linus
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);
// Concatenates (joins) myGirls and myBoys
var arr1 = ["Cecilie", "Lone"]; Cecilie,Lone,Emil,Tobias,Linus,Robin,

WIM EDISI JAN 2019
var arr2 = ["Emil", "Tobias", "Linus"];

var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); Morgan
// Concatenates arr1 with arr2 and arr3
var arr1 = ["Cecilie", "Lone"]; Cecilie,Lone,Emil,Tobias,Linus

var myChildren =
arr1.concat(["Emil", "Tobias", "Linus"]);
o slice() : potong sebahagian elemen dari sesuatu array ke dalam array baru
keluarkan sebahagian daripada array bermula dari elemen array 1 Sebelum slice():
("Orange")
Banana,Orange,Lemon,Apple,Mango
var fruits =
["Banana", "Orange", "Lemon", "Apple", "Mango"]; Selepas slice():
var citrus = fruits.slice(1); Orange,Lemon,Apple,Mango
keluarkan sebahagian daripada array bermula dari elemen array 3 Sebelum slice():
("Apple")
var fruits =
["Banana", "Orange", "Lemon", "Apple", "Mango"]; Selepas slice():
var citrus = fruits.slice(3); Apple,Mango
Apabila kaedah slice () diberi dua hujah (argument), ia memilih Sebelum slice():
elemen array dari hujah permulaan, dan sehingga (tetapi tidak
termasuk) hujah akhir:
var fruits = Selepas slice():

["Banana", "Orange", "Lemon", "Apple", "Mango"]; Orange,Lemon
var citrus = fruits.slice(1, 3);
● Susun array
o sort() : Susun (Sort) Array
var fruits = Sebelum sort():
["Banana", "Orange", "Apple", "Mango"]; Banana,Orange,Apple,Mango
fruits.sort(); Selepas sort():
// Sorts the elements of fruits Apple,Banana,Mango,Orange
o reverse() : membalikkan elemen dalam array

var fruits = Sebelum reverse():
fruits.reverse();
Selepas reverse():
// Reverses the order of the elements
Mango,Apple,Orange,Banana
o Numeric Sort
▪ fungsi sort() menyusun nilai sebagai strings
▪ kaedah sort() akan menghasilkan hasil yang salah apabila menyusun nombor
WIM EDISI JAN 2019
▪ Masalah ini dapat dibetulkan dengan menyediakan fungsi perbandingan
Tertib menaik Sebelum sort():

var points = [40, 100, 1, 5, 25, 10]; 40,100,1,5,25,10
points.sort(function(a, b){return a - b}); Selepas sort():
1,5,10,25,40,100
Tertib menurun Sebelum sort():
var points = [40, 100, 1, 5, 25, 10]; 40,100,1,5,25,10
points.sort(function(a, b){return b - a}); Selepas sort():
100,40,25,10,5,1
o Perbandingan fungsi : Kaedah menyusun yang berbeza

<button onclick="myFunction1()">Sort
Alphabetically</button>
<button onclick="myFunction2()">Sort
Numerically</button>
<p id="demo"></p>
Sort Alphabetically
<script> 1,10,100,25,40,5
var points = [40, 100, 1, 5, 25, 10];
Sort Numerically
points;
1,5,10,25,40,100
function myFunction1() {
points.sort();
points;
}
points.sort(function(a, b){return a - b});
points;
}
</script>
o Susun array dalam perintah rawak (random order)
WIM EDISI JAN 2019

<button onclick="myFunction()">Try it</button> Sebelum susun secara rawak:

<p id="demo"></p>
<script>
var points = [40, 100, 1, 5, 25, 10]; Susun secara rawak kali pertama
document.getElementById("demo").innerHTML = points;
points.sort(function(a, b){return 0.5 -
Math.random()}); Susun secara rawak kali kedua
document.getElementById("demo").innerHTML = points;
}
</script>
o Mengenalpasti nilai tertinggi (highest) dan terendah (lowest) dalam array
Kaedah 1 : Susun dan mendapat nilai

Untuk mendapat nilai terendah, susun dengan tertib menaik dan
The lowest number is 1.
mengambil nilai pada indeks 0.
var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value
Untuk mendapat nilai tertinggi, susun dengan tertib menurun dan

The highest number
mengambil nilai pada indeks 0.
is 100.
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value
Kaedah 2 : Menggunakan Math.max() / Math.min() pada array

<p>The highest number is <span id="demo"></span>.</p> The highest number is
<script> 100.
var points = [40, 100, 1, 5, 25, 10];
myArrayMax(points);
function myArrayMax(arr) {
return Math.max.apply(null, arr);
WIM EDISI JAN 2019

}
</script>
<p>The lowest number is <span id="demo"></span>.</p> The lowest number is 1.
<script>
var points = [40, 100, 1, 5, 25, 10];
myArrayMin(points);
function myArrayMin(arr) {
return Math.min.apply(null, arr);
}
</script>
7.0 Browser Object Model (B.O.M)

7.1.1 Object
● Objek adalah pembolehubah yang boleh menyimpan banyak nilai.
● Kod ini memberikan banyak nilai (Fiat, 500, putih) kepada pembolehubah bernama
car:
var car = {type:"Fiat", model:"500", color:"white"};
● Nilai ditulis sebagai pasangan nama: Nilai (nama dan nilai dipisahkan dengan
noktah bertindih).
● Pasangan nama: Nilai (dalam objek JavaScript) dipanggil ciri-ciri (properties).
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Ciri-ciri (properties) Nilai bagi ciri-ciri

firstName John
lastName Doe
age 50
WIM EDISI JAN 2019

eyeColor blue
● Kaedah objek (object methods)

o Kaedah adalah tindakan yang boleh dilakukan ke atas objek.
o Kaedah yang disimpan di dalam ciri-ciri sebagai definisi fungsi .
Ciri-ciri (properties) Nilai bagi ciri-ciri

firstName John
lastName Doe
age 50
eyeColor Blue
fullpenuh function () {kembali this.firstName + "" + this.lastName;}
● Definisi objek (object definition)

o menentukan (dan membuat) objek JavaScript dengan objek literal
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Definisi objek boleh ditulis dalam banyak baris
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
● Ciri-ciri (properties) objek boleh dicapai dengan 2 kaedah:
objectName.propertyName
objectName["propertyName"]
<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<body> <body>
<p id="demo"></p> <p id="demo"></p>
<script> <script>
var person = { var person = {
firstName: "John", firstName: "John",
lastName : "Doe", lastName : "Doe",
id : 5566 id : 5566
WIM EDISI JAN 2019

}; };
document.getElementById("demo").innerHT document.getElementById("demo").innerHT
ML = ML =
person.firstName + " " + person["firstName"] + " " +
person.lastName; person["lastName"];
</script> </script>
</body> </body>
</html> </html>
● Kaedah objek dapat dicapai dengan sintaks berikut:
objectName.methodName()
name = person.fullName();
<!DOCTYPE html> John Doe

<html>
<body>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
document.getElementById("demo").innerHTM
L = person.fullName();
</script>
</body>
</html>
* Jika anda mengakses kaedah tanpa () , ia akan function () { return this.firstName + " "
mengembalikan definisi fungsi : + this.lastName; }
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
WIM EDISI JAN 2019

document.getElementById("demo").innerHTM
L = person.fullName;
</script>
8.0 Event
● Aktiviti (Events) HTML adalah perkara yang berlaku kepada HTML elemen.
● Apabila JavaScript digunakan dalam halaman HTML, JavaScript boleh bertindak
balas mengenai events yang berlaku.
● Berikut adalah beberapa contoh events HTML:
o Halaman web HTML telah selesai loading

o Medan input HTML telah ditukar
o Butang HTML diklik
● HTML membolehkan event handler attributes, dengan kod JavaScript, untuk
ditambahkan kepada unsur-unsur HTML.
Dengan single quotes: Dengan double quotes:

<element event='some JavaScript'> <element event="some JavaScript">
● Dalam contoh berikut, sifat onclick (dengan kod), ditambah kepada elemen butang:
<!DOCTYPE html> Sebelum tekan butang

<html>
<body>
<button Selepas tekan butang

onclick="document.getElementById('demo').innerHTML
=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
● Dalam contoh di atas, kod JavaScript mengubahkan kandungan unsur dengan id =

"demo".
● Dalam contoh berikut, kod mengubahkan kandungan unsur sendiri

(menggunakan this.innerHTML):
WIM EDISI JAN 2019
<!DOCTYPE html> Sebelum tekan butang

<html>
<body>
<button onclick="this.innerHTML = Date()">The time Selepas tekan butang

is?</button>
</body>
</html>
● lebih biasa untuk melihat atribut events memanggil fungsi:
<button onclick="displayDate()">The time is?</button>
● Events HTML yang biasa
Event Penerangan
onChange Elemen HTML telah ditukar
onclick pengguna klik elemen HTML
onmouseover pengguna menggerakkan tetikus di atas elemen HTML
onmouseout pengguna menggerakkan tetikus lagi elemen HTML
onkeydown Pengguna menolak kekunci keyboard
onload pelayar telah selesai memuatkan halaman
Windows
● Objek tetingkap (Window object) mewakili tetingkap yang terbuka dalam pelayar.
● Jika dokumen yang mengandungi bingkai (frame) (<iframe> tag), pelayar
mewujudkan satu objek tetingkap untuk dokumen HTML, dan tambahan satu objek
tetingkap untuk setiap bingkai.
WIM EDISI JAN 2019

● Objek tetingkap disokong oleh semua pelayar (browser). Ia mewakili tetingkap
pelayar.
● Semua objek global JavaScript, fungsi, dan pembolehubah secara automatik menjadi
ahli objek tetingkap.
● Pembolehubah global adalah ciri-ciri objek tetingkap.
● Fungsi (function) global adalah kaedah (method) objek tetingkap.
● Objek dokumen (document object) (DOM HTML) adalah sebuah objek tingkap.
window.document.getElementById("header");
Adalah sama seperti
document.getElementById("header");
● Saiz tetingkap – digunakan untuk menentukan saiz tetingkap pelayar dalam piksel
(pixel) tidak termasuk toolbar dan scrollbar.

o window.innerHeight - ketinggian dalaman tetingkap pelayar (dalam piksel)
o window.innerWidth - Lebar dalaman tetingkap pelayar (dalam piksel)
● Contoh:
<!DOCTYPE html>
<html> Browser inner window width: 668,
<body> height: 488.
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width:
" + w + ", height: " + h + ".";
</script>
</body>
</html>
● Kaedah tetingkap yang lain
WIM EDISI JAN 2019

o window.open () - membuka tetingkap baru

o window.close () - menutup tetingkap semasa
<!DOCTYPE html>
Selepas tekan Open “myWindow”
<html>
<body>
<button onclick="openWin()">Open
"myWindow"</button>
<button onclick="closeWin()">Close
"myWindow"</button>
<script>
var myWindow;
function openWin() {
// Opens a new window
myWindow = window.open("",
"myWindow", "width=200,height=100");
myWindow.document.write("<p>This
is 'myWindow'</p>"); Selepas tekan Close “myWindow”, Window di atas
} akan ditutup.
function closeWin() {
// Closes the new window
myWindow.close();
}
</script>
</body>
</html>
o window.moveTo () -move tetingkap semasa

<!DOCTYPE html>
<html>
<body>
<p>Open "myWindow" and move the new window to the top left corner of the
screen:</p>
<button onclick="openWin()">Open "myWindow"</button>

<button onclick="moveWin()">Move "myWindow"</button>
<script>
var myWindow;
myWindow=window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
}
function moveWin() {
myWindow.moveTo(500, 100);
myWindow.focus();
}
</script>
</body>
WIM EDISI JAN 2019
</html>
Selepas tekan butang Move “myWindow” tetingkap kecil (myWindow) telah bergerak dari atas kiri ke
tengah
o window.resizeTo () -resize tetingkap semasa

<!DOCTYPE html>
<html>
<body>
<p>Open a new window, and resize the width and height of the new window.</p>
<button onclick="openWin()">Create window</button>

<button onclick="resizeWinTo()">Resize the window to 800px * 600px</button>
<button onclick="resizeWinBy()">Make the new window smaller</button>
<script>
var myWindow;
myWindow = window.open("", "", "width=250, height=250");
}
WIM EDISI JAN 2019
function resizeWinTo() {
//mengubah saiz tetingkap untuk lebar dan tinggi yang dinyatakan.
myWindow.resizeTo(800, 600);
myWindow.focus();
}
function resizeWinBy() {
//mengubah saiz tetingkap dengan jumlah yang ditetapkan, berbanding dengan saiz
semasa.
myWindow.resizeBy(-500, -200);
myWindow.focus();
}
</script>
</body>
</html>
Selepas butang Create window ditekan
Selepas butang Resize the window to 800px * 600px ditekan
Selepas butang Make the new window smaller ditekan
WIM EDISI JAN 2019

Frames
● Ciri (property) bingkai (frame) memulangkan objek seperti array, diwakili dengan
elemen <iframe> dalam tetingkap semasa.
● Unsur-unsur <iframe> boleh diakses dengan nombor indeks. Indeks bermula pada 0.
frameElement var frame = window.frameElement; // Get the Sebelum tekan Try it

<iframe> element of the window
if (frame) { // If the window is in an Selepas tekan Try it

<iframe>, change its source
frame.src = "https://www.w3schools.com/";
}
frames window.frames[0].location = "https:// Sebelum tekan Try it kedua-dua frame menunjuk

www.w3schools.com/jsref/ paparan halaman utama w3school
jsref_obj_string.asp";
//paparan String Reference
Selepas tekan Try it frame[0] menunjukkan

paparan String Reference
window.frame <!DOCTYPE html> Click the button to loop through the frames on
<html> this page, and change the location of every frame
(mendapatkan <body> to "w3schools.com".
bilangan frame)
<p>Click the button to loop through the
Sebelum tekan Try it
WIM EDISI JAN 2019
frames on this page, and change the location

of every frame to "w3schools.com".</p>
<button onclick="myFunction()">Try
it</button>
<br><br>
<iframe src="https://www.cnn.com"></iframe>
<iframe src="https://www.bbc.com"></iframe>
Selepas tekan Try it
<script>
var frames = window.frames;
var i;
for (i = 0; i < frames.length; i++) {

// length of array frames, frames is an
array.
frames[i].location =
"https://www.w3schools.com";
}
}
</script>
</body>
</html>
4.10 Document Object Model (DOM)
● DOM ialah W3C (World Wide Web Consortium) standard.
● DOM mentakrifkan standard untuk mengakses dokumen:
"W3C Document Object Model (DOM) adalah platform antara muka dan bahasa-
neutral yang membolehkan program dan skrip untuk mengakses dan mengemas
kini kandungan, struktur dan gaya dokumen secara dinamik."
● Standard W3C DOM dipisahkan kepada 3 bahagian yang berbeza:
o DOM teras - model standard untuk semua jenis dokumen

o XML DOM - model standard untuk dokumen XML
o HTML DOM - model standard untuk dokumen HTML
● Apabila halaman web dimuatkan, pelayar mewujudkan halaman Document Object
Model.
● HTML DOM model dibina sebagai pohon Objek.
WIM EDISI JAN 2019

● Dengan model objek, JavaScript mendapat semua kuasa yang diperlukan untuk
membuat HTML yang dinamik:

o JavaScript boleh mengubah semua unsur HTML dalam halaman
o JavaScript boleh menukar semua atribut (sifat) HTML dalam halaman
o JavaScript boleh menukar semua gaya CSS dalam halaman
o JavaScript boleh membuang unsur-unsur HTML dan sifat-sifat yang sedia
ada
o JavaScript boleh menambah unsur-unsur dan sifat-sifat HTML yang baru
o JavaScript boleh bertindak balas terhadap semua event HTML yang sedia
ada di halaman
o JavaScript boleh membuat event HTML baru di halaman
● HTML DOM ialah standard objek model dan pengaturcaraan antara muka untuk
HTML. Ia mentakrifkan:
o Unsur-unsur HTML sebagai objek
o Sifat-sifat semua elemen HTML
o Kaedah untuk mengakses semua elemen HTML
o Event untuk semua elemen HTML
● Dalam erti kata lain: HTML DOM ialah standard bagaimana mendapat, menukar,
menambah atau memadam elemen HTML.
JavaScript - Kaedah DOM HTML
● Tindakan yang boleh dilakukan (atas elemen HTML)
● Sifat-sifat (properties) HTML DOM adalah nilai-nilai (HTML Elements) yang boleh
ditetapkan atau diubahkan
WIM EDISI JAN 2019

● HTML DOM boleh diakses dengan JavaScript.
● Dalam DOM, semua elemen HTML ditakrifkan sebagai objek .
● Contoh berikut perubahan kandungan (yang innerHTML) daripada <p> elemen dengan id
= "demo":
o getElementById ialah kaedah (method) - mencari unsur
o innerHTML ialah ciri/sifat (property) - mendapatkan atau menggantikan
kandungan unsur-unsur HTML
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
JavaScript HTML DOM Document
● HTML DOM dokumen objek adalah pemilik semua objek lain dalam halaman web.
● Jika ingin mengakses elemen dalam halaman HTML, sentiasa bermula dengan
mengakses objek dokumen itu.
● Contoh menggunakan objek dokumen untuk mengakses dan memanipulasi
HTML.
o Mencari elemen HTML
Kaedah (Method) Penerangan

document.getElementById(id) Mencari elemen dengan id
document.getElementsByTagName(name) Mencari elemen dengan nama tag
document.getElementsByClassName(name) Mencari elemen dengan nama class
o Menukar elemen HTML

element.innerHTML = new html content Menukar HTML dalaman sesuatu elemen
element.attribute = new value Menukar nilai atribut sesuatu elemen HTML
element.setAttribute(attribute, value) Menukar nilai atribut sesuatu elemen HTML
element.style.property = new style Menukar gaya sesuatu elemen HTML
WIM EDISI JAN 2019

o Menambah dan memadam elemen

document.createElement(element) Mencipta satu elemen HTML
document.removeChild(element) Mengeluarkan satu elemen HTML
document.appendChild(element) Menambahkan satu elemen HTML
document.replaceChild(element) Mengantikan satu elemen HTML
document.write(text) Tulis ke dalam aliran output HTML
o Menambah events handler

o Lebih banyak event boleh rujuk di
https://www.w3schools.com/jsref/dom_obj_event.asp

document.getElementById(id).onclick = Menambahkan kod event handler dalam event
function(){code} onclick
JavaScript HTML DOM Element
● Mencari unsur-unsur HTML dengan id
Contoh ini mendapati elemen dengan id = "intro":

<!DOCTYPE html> Hello World!
<html> This example demonstrates
<body> the getElementById method!
<p id="intro">Hello World!</p> The text from the intro paragraph is
<p>This example demonstrates the Hello World!
<b>getElementById</b> method!</p>
<p id="demo"></p>
<script>
var myElement =
document.getElementById("intro");
"The text from the intro paragraph is " +
myElement.innerHTML;
</script>
</body>
</html>
● Mencari unsur-unsur HTML dengan nama tag
Contoh ini mendapatkan semua unsur <p>:
WIM EDISI JAN 2019


<html> The DOM is very useful.
<body> This example demonstrates
<p>Hello World!</p> the getElementsByTagName method
<p>The DOM is very useful.</p> The first paragraph (index 0) is: Hello
<p>This example demonstrates the World!
<b>getElementsByTagName</b> method</p>
<p id="demo"></p>
<script>
var x =
document.getElementsByTagName("p");
'The first paragraph (index 0) is: ' +
x[0].innerHTML;
//kerana banyak unsur <p> ambil x[0] iaitu
<p> yang pertama
//memanggil object dengan nombor indeks
</script>
</body>
</html>
● Contoh ini mendapatkan elemen dengan id = " main ", dan kemudian mendapati
semua <p> unsur-unsur di dalam "main":
the getElementsByTagName method
<p>Hello World!</p> The first paragraph (index 0) inside
"main" is: The DOM is very useful.
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the
<b>getElementsByTagName</b> method</p>
</div>
<p id="demo"></p>
<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
=
'The first paragraph (index 0) inside
"main" is: ' + y[0].innerHTML;
</script>
</body>
</html>
WIM EDISI JAN 2019

● Mencari unsur-unsur HTML dengan nama kelas
Contoh ini mengembalikan senarai semua unsur-unsur dengan class = "intro".

the getElementsByClassName method.
<p>Hello World!</p> The first paragraph (index 0) with
class="intro": The DOM is very useful.
<p class="intro">The DOM is very
useful.</p>
<p class="intro">This example demonstrates
the <b>getElementsByClassName</b>
method.</p>
<p id="demo"></p>
<script>
var x =
document.getElementsByClassName("intro");
=
'The first paragraph (index 0) with
class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
● Mencari unsur-unsur HTML dengan pemilih CSS
Contoh ini mengembalikan senarai semua unsur-unsur <p> dengan class = "intro".
the querySelectorAll method.
<p>Hello World!</p> The first paragraph (index 0) with
class="intro": The DOM is very
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates useful.
the <b>querySelectorAll</b> method.</p>
<p id="demo"></p>
<script>
var x =
document.querySelectorAll("p.intro");
'The first paragraph (index 0) with
class="intro": ' + x[0].innerHTML;
</script>
</body>
WIM EDISI JAN 2019
</html>
● Mencari unsur-unsur HTML dengan koleksi objek HTML
Contoh ini mendapatkan unsur form dengan id = "frm1", dalam koleksi form, dan
memaparkan semua nilai elemen:
<!DOCTYPE html>
<html>
<body>
<form id="frm1"
action="/action_page.php">
First name: <input type="text"
name="fname" value="Donald"><br>
Last name: <input type="text"
name="lname" value="Duck"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click "Try it" to display the value

of each element in the form.</p>
<button onclick="myFunction()">Try
it</button>
<p id="demo"></p>
<script>
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value +
"<br>";
}
document.getElementById("demo").innerH
TML = text;
}
</script>
</body>
</html>
● Objek HTML berikut (dan koleksi objek) juga diakses:
o document.anchors
o document.body
o document.documentElement
o document.embeds
o document.forms
WIM EDISI JAN 2019

o document.head
o document.images
o document.links
o document.scripts
o document.title
JavaScript HTML DOM – Changing HTML
● HTML DOM membenarkan JavaScript untuk menukar kandungan elemen HTML.
● Menggunakan document.write () untuk untuk menulis terus ke aliran output HTML
dan menulis ganti (overwrite) dokumen itu.
<!DOCTYPE html> Tue Jan 23 2018 13:53:03 GMT+0800

<html> (Malay Peninsula Standard Time)
<body>
<script>
document.write(Date()); *Jawapan mengikut masa semasa
</script>
</body>
</html>
● Menukar kandungan HTML dengan menggunakan ciri (property) innerHTML.
document.getElementById(id).innerHTML = new HTML
o Contoh
Isi kandungan Hello World diganti dengan New text!
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
● Menukar nilai atribut HTML dengan
document.getElementById(id).attribute = new value
WIM EDISI JAN 2019

o Contoh
Atribut src bagi elemen ditukar daripada "smiley.gif" kepada "landscape.jpg"
<!DOCTYPEhtml>
<html>
<body>
<imgid="myImage"src="smiley.gif">
<script>
document.getElementById("myImage").src="landscape.jpg";
</script>
</body>
</html>
JavaScript HTML DOM – Changing CSS
● HTML DOM membenarkan JavaScript untuk mengubah gaya elemen HTML.
● Sintaks
document.getElementById(id).style.property = new style
● Contoh mengubah gaya elemen <p>.

<html> Hello World!
<body>

<script>
document.getElementById("p2").style.color =
WIM EDISI JAN 2019

"blue";
document.getElementById("p2").style.fontFamily =
"Arial";
document.getElementById("p2").style.fontSize =
"larger";
</script>
</body>
</html>
● Contoh menggunakan events untuk mengubah gaya HTML.

o Elemen yang diubah: Elemen yang id = “id1”
o Event : Butang klik
<!DOCTYPE html> Sebelum butang Click Me!
<html> ditekan
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').styl Selepas butang Click Me!
e.color = 'red'"> ditekan
Click Me!</button>
</body>
</html>
JavaScript HTML DOM Events
● JavaScript boleh dilaksanakan apabila sesuatu event berlaku, seperti apabila

pengguna klik pada elemen HTML.
● Dalam contoh ini, kandungan yang <h1> unsur berubah apabila pengguna
mengklik di atasnya:
<!DOCTYPE html>
<html>
<body>
Klik pada ayat Click on this text!
<h1 onclick="this.innerHTML =
'Ooops!'">Click on this text!</h1>
</body>
WIM EDISI JAN 2019

</html>
● Menetapkan event onclick kepada unsur butang
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to execute the
displayDate() function.</p>
<button id="myBtn">Try it</button> Selepas tekan butang Try it masa semasa akan
<p id="demo"></p> dipaparkan
<script>
document.getElementById("myBtn").onclick =
displayDate;
function displayDate()
{ document.getElementById("demo").innerHTM
L = Date();
}
</script>
</body>
</html>
● Di bawah adalah satu contoh bagaimana untuk menggunakan onChange itu.

Fungsi huruf besar () akan dipanggil apabila pengguna menukar kandungan
medan input.
<!DOCTYPE html>
<html>
<head> Isi kandungan akan automatik menjadi huruf
<script> besar setelah maklumat dimasukkan dalam
function myFunction() { medan input
var x =
document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text"

id="fname" onchange="myFunction()">
</body>
</html>
● Event onmouseover dan onmouseout boleh digunakan untuk mencetuskan

fungsi apabila pengguna menggerakkan tetikus ke atas, atau di luar satu elemen
HTML.
<!DOCTYPE html>
Apabila menggerakkan tetikus di
WIM EDISI JAN 2019
<html>
luar kotak merah, perkataan
<body>
“Mouse Over Me” dipaparkan.
<div onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-
color:#D94A38;width:120px;height:20px;padding:4
0px;">
Mouse Over Me</div>
Apabila menggerakkan tetikus ke
<script>
atas kotak, perkataan “Thank
function mOver(obj) {
You” dipaparkan.
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
<!DOCTYPE html>
Mengubah gambar dengan cara
<html>
mouseover dan mouseout
<head>
<script>
function doraemon () {
document.getElementById('myimage').src =
"E:/24.jpg";
}
function kv() {
document.getElementById('myimage').src =
"E:/T01.jpg";
}
</script>
</head>
Selepas mouseover
<body>
<img id="myimage" onmouseover="doraemon()"

onmouseout="kv()" src="E:/T01.jpg" width="200"
height="180" />
<p>Mouse over to change pictures!</p>
</body>
</html>
WIM EDISI JAN 2019

● Event onmousedown, onmouseup, dan onclick adalah bahagian klik-tetikus.

Pertama. apabila butang tetikus diklik, event onmousedown dicetuskan,
kemudian, apabila butang tetikus dilepaskan, event onmouseup dicetuskan,
akhirnya, apabila tetikus klik selesai, event onclick yang dicetuskan.
<!DOCTYPE html> Apabila tetikus tidak diklik,
<html> atau dilepaskan, paparan
<body> berikut dipaparkan.
<div onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-
color:#D94A38;width:90px;height:20px;padding:40px
;">
Click Me</div> Apabila tetikus diklik, paparan
berikut dipaparkan.
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>
9.0 Application Mockup

APLIKASI MOCKUP
Mock up adalah proses merekabentuk peringkat sederhana yang boleh

dikatakan sebagai rekabentuk pra-keluaran yang di datangkan dengan
paparan yang sebenar dan menggambarkan antara mukasebenar aplikasi
yang mengandungi warna dan gaya (style) namun belum berfungsi. Mock up
mengandungi struktur maklumat, memaparkan kandungan dan
WIM EDISI JAN 2019
mendemonstrasikan fungsi yang asas dengan cara yang statik kerana ia tidak
benar-benar berfungsi contohnya aplikasi tersebut tidak mampu menyimpan
sebarang input dari pengguna kerana belum dihubungkan dengan pangkalan
data. Antara perisian yang boleh membangunkan mock up ialah Mokingbird,
Mockup builder, proto.io (untuk aplikasi mudah alih) dan banyak lagi.
KELEBIHAN PELAKSANAAN APLIKASI MOCK UP

i. Mudah memahami keperluan sebenar pelanggan apabila pengguna
terlibat secara aktif dalam pembangunan
ii. Pembangun dapat membangunkan aplikasi atau menghasilkan produk
akhir yang menepati kehendak pengguna
iii. Oleh kerana di dalam kaedah ini menyediakan simulasi kepada
pengguna, pengguna akan dapat pemahaman yang lebih baik
daripada sistem yang dibangunkan.
iv. Kesilapan boleh dikesan lebih awal.
v. Maklum balas pengguna yang lebih cepat boleh didapati membawa
kepada penyelesaian yang lebih baik.
vi. Fungsi yang hilang boleh dikenal pasti dengan mudah
vii. Fungsi mengelirukan atau sukar dapat dikenal pasti
viii. Dengan simulasi prototaip mungkin akan mencetus beberapa idea
tambahan yang tidak dijangkakan malah lebih diperlukan
KEKURANGAN PELAKSANAAN APLIKASI MOCK UP

i. Mengabaikan struktur pembangunan yang lebih terancang dengan
terus ke tahap pelaksanaan kod dan terus melakukan
penambahbaikan. Analisis masalah tidak dilakukan dengan jelas.
ii. Kaedah ini boleh meningkatkan kerumitan sistem di mana skop sistem
itu boleh berkembang di luar rancangan asal.
iii. Proses mungkin lebih rumit disebabkan banyak melibatkan pengguna
yang kadangkala tidak memahami konsep sebenar sesuatu aplikasi.
WIM EDISI JAN 2019
iv. Pelanggan mungkin mahu terus menggunakan aplikasi prototaip tanpa

menunggu aplikasi sebenar dihasilkan.
v. Usaha yang lebih daripada kumpulan pembangun untuk menghasilkan
aplikasi tersebut dan terpaksa membuat penambahbaikan dari masa
ke semasa.
10.0 Unit Testing

Pengujian unit dilakukan terhadap unit terkecil yang dinamakan modul. Modul
boleh terdiri daripada satu fungsi atau prosedur. Setiap modul perlu diuji dari
beberapa aspek seperti pengendali ralat, antaramuka, laluan logik, struktur
data, nilai sempadan dan kelas data.
● Pengendali ralat : menangani ralat daripada berlaku semasa pelaksanaan
● Antaramuka : menyemak parameter masuk dan keluar daripada modul
atur cara
● Laluan logik : memastikan setiap penyataan diuji sekurang-kurangnya
sekali
● Struktur data : Data yang tersimpan dapat mengekalkan integrasi semasa
perlaksanaan
● Nilai sempadan dan kelas data : Memastikan modul berfungsi dengan baik
pada nilai sempadan. Kelas data yang sah dan tidak sah juga diuji.
PENGUJIAN KEBOLEHGUNAAN (USABILITY TESTING)

Kebolehgunaan terhadap aplikasi yang dibangunkan hanya boleh
ditentukan apabila pengujian kebolehgunaan dilaksanakan. Pembangun
boleh melihat pengguna berinteraksi dengan aplikasi dan pengguna akan
menjawab soalan-soalan yang disediakan seperti ;
● Adakah pengguna boleh menggunakan aplikasi tanpa bantuan dan
arahan?
● Adakah rekabentuk aplikasi mudah dan ringkas?
WIM EDISI JAN 2019

● Adakah pengguna mengalami gangguan teknikal semas menggunakan
aplikasi ini?
● Adakah pengguna boleh mengawal sepenuhnya fungsi dalam aplikasi ini?
● Adalah laras bahasa atau penggunaan simbol cukup difahami oleh
pengguna?
Jika banyak soalan yang dijawab oleh pengguna adalah ‘Ya’ ia boleh
dikatakan sebagai kebolehgunaan telah tercapai. Pengujian ini penting untuk
mengukur tahap kepuasan pengguna dan mengurangkan kos sokongan dan
juga dokumentasi.
Pengujian kebolehgunaan boleh dilakukan untuk menguji fungsi dan
penerimaan pengguna terhadap antaramuka. Pengujian antaramuka perlu
mengambilkira 5 prinsip asas rekabentuk interaksi iaitu konsistensi,
kebolehan membuat pemerhatian, boleh dipelajari, kebolehan untuk
menjangka dan maklumbalas.
● Konsistensi
Konsistensi merujuk kepada kedudukan setiap elemen dalam setiap halaman.

Semua elemen perlu kekal pada kedudukan yang sama supaya pengalaman
pengguna tidak terganggu untuk menggunakan aplikasi tersebut. Sebagai
contoh apabila merujuk kepada papan cerita kajian kes yang diberi tadi,
kedudukan untuk KELUAR sistem adalah sama bagi kedua-dua modul dan
akan konsisten pada setiap halaman yang berkaitan.
● Kebolehan membuat pemerhatian
Kebolehan membuat pemerhatian merujuk kepada sejauh mana pengguna

berasa selesa dan selamat untuk menggunakan sebarang elemen tanpa
ragu-ragu. Contohnya elemen untuk menerima dan menolak permohonan
oleh pensyarah jelas dan mesejnya mudah sampai kepada pengguna
tersebut. Oleh yang demikian, pengguna dapat menggunakan aplikasi tanpa
sebarang keraguan.
WIM EDISI JAN 2019

● Boleh dipelajari
Boleh dipelajari penting bagi pengalaman pengguna buat kali pertama

menggunakan aplikasi. Sejauh mana pengguna boleh mengingati cara untuk
mengendalikan aplikasi tersebut perlu diambilkira.
● Kebolehan untuk menjangka
Kebolehan untuk menjangka pula ialah pengguna dapat menjangka apa yang
akan berlaku apabila menggunakan sebarang elemen dalam aplikasi.
Sebagai contoh apabila pengguna memilih fungsi untuk Cadang Tajuk,
pengguna dapat menjangka untuk mengisi sesuatu bagi mencadangkan tajuk
projek akhir. Pengguna akan dibawa ke halaman untuk memasukkan tajuk
Projek Tahun Akhir yang akan dipaparkan dalam senarai yang akan dipohon
oleh pelajar nanti.
● Maklumbalas
Maklumbalas bertujuan untuk melakukan penambahbaikan pada rekabentuk

interaksi yang dihasilkan.
KAEDAH PENILAIAN
Antara kaedah penilaian yang boleh digunakan dalam menjalankan pengujian
sistem ialah soal selidik. Soal selidik boleh dibangunkan untuk menilaian
kebolehgunaan produk berdasarkan prinsip asas rekabentuk di atas. Pilihan
jawapan dalam soal selidik boleh ditampilkan dalam dua jenis iaitu bentuk
Skala Likert ataupun bentukSkala Guttmen.
Skala Likert digunakan untuk melihat sejauh mana persetujuan
pengguna terhadap produk yang dibangunkan. Jenis ini menampilkan skala
yang mewakili maksud seperti :
5 = Amat setuju
4 = Setuju
3 = Tidak setuju
2 = Sangat tidak setuju
WIM EDISI JAN 2019

1 = Tidak pasti
Skala Guttman pula bertujuan untuk mendapatkan data yang lebih
jelas, tegas dan konsisten iaitu menampilkan pilihan ‘Ya’ yang mewakili setuju
dan ‘Tidak’ untuk tidak atau kurang bersetuju.
11.0 Debugging prosedur
11.1 RALAT
Ralat adalah kesilapan atau kesalahan yang menyebabkan sesuatu aturcara tidak
berfungsi seperti yang diharapkan atau mengeluarkan output yang salah.
Jenis ralat:
a) Ralat Logik
● Dijumpai dalam algoritma
o ralat yang terhasil apabila silap melaksanakan tindakan yang

sepatutnya
o dihasilkan apabila pengaturcaraan tersilap menyusun langkah-langkah
yang dilaksanakan.
o terdapat 2 jenis semakan ralat yang boleh digunakan
i. Teknik semakan meja (desk checking)
✔ dilakukan tanpa menggunakan mesin
✔ hanya menggunakan pen dan kertas untuk mencatat

keputusan
✔ menggunakan sampel data secara manual
✔ membandingkan output yang terhasil dengan output

yang dijangka
ii. Teknik langkah demi langkah (Step through)
memeriksa lopgik secara langkah demi langkah mengikut
urutan.
tidak perlu data untuk pengesanan.
b) Ralat Sintaks
WIM EDISI JAN 2019

● kesilapan dalam penggunaan bahasa pengaturcaraan seperti
kesilapan ejaan atau tatabahasa.

c) Ralat masa larian
● merujuk kepada kesilapan yang akan menyebabkan aturcara terhenti
secara tiba-tiba tanpa diduga semasa menjalankan ujian (Run)
11.2 LANGKAH AWAL PENGESANAN RALAT MENGGUNAKAN ALGORITMA
MENGUJI DAN MEMBAIKI RALAT ALGORITMA
Algoritma diuji setelah ditulis untuk tujuan pembaikan. Pengujian algoritma dibuat
sebelum algoritma ditulis sebagai Kod Komputer. Lihat rajah dibawah. Hal ini
kerana pembetulan di peringkat kod mengambil masa yang lebih lama dan lebih
mahal daripada pembetulan di peringkat algoritma.
MATLAMAT PENGUJIAN ALGORITMA
Memastikan logik algoritma adalah betul dan memikirkan pembaikan algoritma

supaya lebih efisien. Algoritma yang diuji mestilah menepati ciri berikut :
● Mudah Difahami
● Lengkap
WIM EDISI JAN 2019

● Efisien
● Memenuhi Kriteria Rekabentuk
Langkah-langkah pengujian Algoritma

1. Kenal pasti ‘Output dijangka’
2. Kenal pasti ‘Output Diperolehi’
3. Bandingkan ‘Output Diperolehi’ dengan ‘Output Dijangka’
4. Analisis dan baiki algoritma.
SOALAN:
1. Nyatakan 3 Jenis bahasa pengaturcaraan penskripan yang digunakan
2. Apakah fungsi Function dalam Javascript
3. Berikan 1 contoh bagi kod Array yang telah anda pelajari
4. Apakah maksud Browser Object Model (B.O.M)
5. Nyatakan kegunaan Event dalam JavaScript
6. Nyatakan kepentingan Application Mockup
7. Apakah tujuan Unit Testing
8. Apakah Debugging prosedur
RUJUKAN:
WIM EDISI JAN 2019

1. Tutorial Javascript http://blog.rosihanari.net

2. Buku Sains Komputer Tingkatan 4
3. Wikipedia HTML CSS Javascript
4. W3School, JavaScript
WIM EDISI JAN 2019

KPD3014 KP4

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

KPD3014 KP4

Diunggah oleh

Hak Cipta:

Format Tersedia

BAHAGIAN PENDIDIKAN TEKNIK DAN

KOD DAN NAMA NOSS IT-010-3: 2016 APPLICATION DEVELOPMENT

TAHAP DAN SEMESTER 3 (SEMESTER 3)

KOD DAN TAJUK

NO. KOD KSKV KPD 3014 / KP (4/5)

Contoh Code HTML

CARA PENULISAN CSS

Tanda {} dinamakan selector, teks yang diapit oleh {} dinamakan

WIM EDISI JAN 2019

1.3 JAVASCRIPT (JS)

● HTML: bertindak sebagai pembuat borang.

● JavaScript: membuat kesan yang menjadikan laman web lebih interaktif.

Banyak laman web menggunakan JavaScript untuk membuat pemberitahuan jenis

● Fail disimpan dengan extension .js.

● Sintaks JavaScript yang dimasukkan dalam halaman HTML mesti ditulis

WIM EDISI JAN 2019

dalam tag <script>.

Dalam tag elemen <head>

Dalam tag elemen <body>

<h1>A Web Page</h1>

● JavaScript adalah case sensitive.

● Sintaks JavaScript boleh digunakan dalam 2 cara iaitu dengan cara

WIM EDISI JAN 2019

External file: myScript.js

● Kelebihan External JavaScript

o Ia memisahkan HTML dan kod

● Untuk memasukkan beberapa fail skrips ke dalam suatu halaman boleh

menggunakan beberapa tag script.

JavaScript boleh "memaparkan" data dengan cara yang berbeza:

a) Menulis ke dalam elemen HTML, menggunakan innerHTML.

Untuk mengakses elemen HTML, JavaScript boleh menggunakan kaedah

Atribut id mentakrifkan elemen HTML. ciri innerHTML mentakrifkan kandungan

<!DOCTYPE html> My First Web Page

Untuk tujuan ujian, mudah untuk menggunakan document.write ():

<!DOCTYPE html> My First Web Page

<h1>My First Web Page</h1> 11

<h1>My First Web Page</h1>

WIM EDISI JAN 2019

2.0. Statement dan Variable

Dalam HTML, pernyataan JavaScript adalah "arahan" untuk "dilaksanakan" oleh

● Pernyataan ini memberitahu browser untuk menulis "Hello Dolly." dalam

elemen HTML dengan id = "demo":

document.getElementById("demo").innerHTML = "Hello Dolly.";

o Kebanyakan program JavaScript mengandungi banyak pernyataan

o Semicolons mengasingkan JavaScript statements.

o JavaScript mengabaikan banyak ruang (spaces). Anda boleh menambah

var person = "Hege"; bersamaan var person="Hege";

2.1.1 Komen (Comments)

● Komen JavaScript boleh digunakan untuk menerangkan kod JavaScript, dan

menjadikannya lebih mudah dibaca.

● Komen JavaScript juga boleh digunakan untuk mencegah pelaksanaan ketika

menguji kod alternatif.

a) Komen satu baris (Single line comment)

var x = 5; // Declare x, give it the value of 5

b) Komen berbilang baris (Multi-line comments)

● Komen berbilang baris bermula dengan / * dan berakhir dengan * /.

● Sebarang teks antara / * dan * / akan diabaikan oleh JavaScript.

Cara menulis atau mengisytiharkan pembolehubah dalam javascript:

tanda dollar ($).

● Nama pembolehubah mesti bermula dengan huruf.

● Nama pembolehubah tidak boleh mengandungi ruang (space).

● Nama pembolehubah adalah case sensitive (y dan Y adalah berbeza)

● Menulis pembolehubah Javascript bermula dengan sintaks "var".