Download App
Google Android
Apple iOS
Huawei
English
English
Malay
Guest
Login
Register
Home
Quiz
Battle
Practice
Class
Classes List
Timetable
Assignments
Learn
Learning Hub
Quick Notes
Videos
Experiments
Textbooks
Login
Register
Download App
Google Android
Apple iOS
Huawei
EN
MS
Learn
Quick Notes
List
Bahasa Penskripan Klien
Bahasa Penskripan Klien
3.1
Bahasa Penskripan Klien
3.1.1 Keperluan Bahasa Penskripan Klien Dalam Laman Web
Pengenalan Kepada HTML Dan CSS
HTML atau
Hypertext Markup Language
ialah bahasa
markup standard
yang digunakan oleh pereka web professional bagi mereka bentuk laman web.
Dokumen HTML adalah mengenai konsep bagaimana dokumen dipaparkan.
HTML juga ialah konsep bagaimana elemen teks, audio, video serta grafik disusun agar mudah dibaca dan difahami oleh pelawat laman web.
Untuk menerangkan struktur bagi setiap laman web, kod HTML atau elemen HTML digunakan.
Elemen biasanya terdiri daripada dua tag berpasangan, iaitu
start tag
dan
close tag
.
Terdapat 2 bahagian atribut iaitu:
Atribut nama.
Atribut nilai.
Pengenalan kepada CSS
Cascading Style Sheet
(CSS) ialah satu bahasa pengaturcaraan yang merupakan tambahan (
extension
) kepada HTML.
Membenarkan perubahan kepada gaya sesuatu halaman web dan menerangkan persembahan bagi sesuatu dokumen HTML.
Pengenalan
JavaScript
JavaScript
menyediakan keupayaan pengaturcaraan untuk memproses sesuatu tugas berdasarkan permohonan yang diterima kepada klien.
Kod
JavaScript
akan ditulis bersama-sama dalam kod HTML.
Kod
JavaScript
ditulis di antara tag ‘<
script
>’ dengan ‘script>’.
Terdapat dua cara kod
JavaScript
ditulis dalam HTML:
Explicit embedding
Implicit embedding
Konsep Aplikasi Pelanggan/Pelayan (
Client
/
Server
)
Reka bentuk web dibangunkan berteraskan pelanggan/pelayan.
Pelanggan atau
client
adalah pelayar (
browser
) yang digunakan oleh pengguna bagi melayari web dengan menggunakan sama ada peranti mudah alih, komputer riba atau komputer meja.
Satu lagi komponen laman web ialah pangkalan data yang digunakan untuk menyimpan data.
Bahasa Penskripan
Terdapat dua jenis laman web iaitu:
Laman web statik.
Laman web dinamik.
Laman web yang direka menggunakan Hypertext Markup Language (HTML) sahaja ialah laman web yang bersifat statik iaitu kandungan paparan pada setiap halaman mengikut tag HTML yang digunakan.
Laman web dinamik pula ialah laman web yang direka menggunakan penskripan pelayan seperti ASP atau PHP yang memberi keupayaan kepada pemilik laman web untuk mengemas kini kandungan laman web dengan mudah.
Perbezaan antara laman web statik dengan laman web dinamik adalah seperti yang ditunjukkan di bawah:
Laman Web Statik
Laman Web Dinamik
Kandungan paparan mengikut tag HTML yang digunakan.
Kandungan paparan boleh dipanggil dari pangkalan data atau mengikut tindakan pengguna.
Dibina menggunakan HTML sahaja.
Dibina menggunakan penskripan pelayan.
Contoh
: laman web yang memaparkan latar belakang organisasi.
Contoh
: Aktiviti akan datang yang dipaparkan di laman utama laman web yang berubah mengikut tarikh kalendar.
Konsep penskripan web digunakan secara meluas dalam pembangunan web.
Penskripan ialah sebahagian kecil program yang dilaksanakan berdasarkan interaksi pengguna dan laman web.
Penskripan ditempatkan kpd 2 bahagian:
Penskripan klien
Berada di sebelah pelanggan.
Bekerja di bahagian hadapan pembangunan web dan dilaksanakan oleh pelayar web.
Penskripan pelayan
Berada di sebelah pelayan.
Bekerja di bahagian belakang pembangunan web dan dilaksanakan oleh pelayan web.
Bahasa Penskripan Klien
Merujuk program komputer dalam web yang dilaksanakan pada komputer klien.
Direka bagi memanipulasikan dan memaparkan kandungan laman web yang telah dimuat turun dalam komputer klien.
Digunakan untuk proses pengesahan input yang dimasukkan oleh pengguna apabila mengisi borang dalam talian.
Juga digunakan untuk melaksanakan tugas yang mudah.
Kelebihan bahasa penskripan:
3.1.2
Atur Cara Dan Carta Alir Bagi Bahasa Penskripan Klien
Pengisihan
Suatu senarai unsur adalah lebih baik diisih untuk memudahkan pencarian agar paparan akan menjadi lebih kemas.
Jenis-jenis proses pengisihan:
Isihan buih (
Bubble sort
)
Isihan pilih (
Selection sort
)
Isihan buih (
Bubble sort
)
Satu algoritma mudah dalam pengisihan suatu senarai yang prosesnya dilaksanakan 1 persatu secara berturutan dengan membandingkan unsur-unsur bersebelahan dan akan menukar kedudukan (
swap
) sekiranya berlaku turutan yang salah.
Terdapat 2 proses perbandingan yang boleh dilaksanakan untuk menukar kedudukan:
Banding unsur pertama sama ada lebih kecil daripada unsur kedua (untuk turutan menurun).
Banding unsur pertama sama ada lebih besar daripada unsur kedua (untuk turutan menaik).
Kelebihan isihan buih:
Isihan lebih mudah dibina dan mudah difahami.
Sesuai untuk tujuan pembelajaran dan bukan untuk aplikasi sebenar.
Sesuai digunakan untuk bilangan unsur yang kecil.
Isihan pilih (
Selection sort
)
Satu algoritma dalam pengisihan suatu senarai yang boleh melibatkan proses.
Terdapat 2 proses perbandingan yang boleh dilaksanakan untuk menukar kedudukan:
Banding unsur dirujuk sama ada lebih besar daripada unsur terkecil (untuk turutan menaik).
Banding unsur dirujuk sama ada lebih kecil daripada unsur terkecil (untuk turutan menurun).
Kelebihan isihan pilih:
Sesuai digunakan dalam membuat pengisihan sekiranya bilangan unsur adalah kecil.
Carian Perduaan (
Binary Search
)
Sesuai digunakan apabila melibatkan bilangan data yang banyak dan telah diisih.
Proses carian perduaan adalah seperti berikut:
Cari lokasi di tengah-tengah senarai.
Dapatkan unsur ditengah-tengah senarai.
Bandingkan dengan unsur yang kecil.
Teruskan pencarian daripada sub-senarai.
Tiga proses perbandingan yang boleh dilaksanakan:
Bandingkan unsur di tengah sama ada sama dengan unsur yang dicari.
Bandingkan unsur di tengah sama ada lebih kecil daripada unsur yang dicari.
Bandingkan unsur di tengah sama ada lebih besar daripada unsur yang dicari.
Pengiraan Untuk Mendapatkan Nilai-nilai Maksimum, Minimum Dan
Mean
Mendapatkan Nilai Maksimum
Merujuk nilai terbesar dalam sesuatu senarai nilai.
Proses mencari nilai maksimum:
Beri nilai awal maksimum.
Banding nilai dalam senarai dengan nilai awal maksimum.
Dapatkan nilai maksimum terkini.
Terdapat hanya 1 senarai proses perbandingan iaitu bandingkan nilai yang dirujuk dalam senarai sama ada lebih besar daripada nilai maksimum.
Mendapatkan Nilai Minimum
Merujuk nilai terkecil dalam suatu senarai nilai.
Proses mencari nilai minimum:
Beri nilai awal minimum.
Banding nilai dalam senarai dengan nilai awal minimum.
Dapat nilai minimum terkini.
Terdapat hanya 1 proses perbandingan sahaja iaitu banding nilai yang dirujuk dalam senarai lebih kecil daripada nilai minimum.
Mendapatkan Nilai
Mean
Merujuk purata nilai dalam senarai nilai tersebut.
Langkah-langkah untuk mendapatkan purata:
Jumlah nilai-nilai dalam senarai nilai tersebut.
Dapatkan bilangan nilai yang terdapat dalam senarai.
Nilai
mean
dikira dengan membahagikan nilai jumlah dengan bilangan nilai yang terdapat dalam senarai (
Formula:
Mean
= Jumlah/Bilangan
).
Mendapatkan Nilai
Count
Mengira bilangan nilai yang terdapat dalam sesuatu senarai.
Langkah-langkah yang perlu dilaksanakan:
Menggunakan suatu perwakilan sebagai pembilang dan memberikan nilai awalan pembilang sebagai 1.
Nilai
count
dikira dengan menambah pembilang dengan 1 bagi setiap nilai yang dicapai atau dirujuk (
Formula: Pembilang = Pembilang + 1
).
Memaparkan nilai akhir pembilang iaitu
count
.
Pengumpukan Nilai Dalam Struktur Giliran (
Queue
)
Giliran (
Queue
) merupakan struktur data linear iaitu pengumpukan nilai dalam ruang ingatan secara teratur.
Queue
boleh membuang nilai lama iaitu nilai terawal dimasukkan.
Kaedah ini dipanggil FIFO (
First In First Out
).
Terdapat 2 operasi penting dalam
queue
:
Enqueue
– Memasukkan data ke dalam
queue
.
Dequeue
– Membuang data lama dalam
queue
.
Operasi
queue
boleh dilakukan menggunakan fungsi ‘
push()
’ dan ‘
shift()
’ atau ‘
unshift()
’ dan ‘
pop()
’ bagi objek tatasusunan.
Kelebihan: Keempat-empat fungsi ini sangat mudah digunakan dan hanya memanggil fungsi-fungsi tersebut.
Kekangan: fungsi-fungsi ini tidak sesuai digunakan jika:
Mempunyai
queue
yang besar,
queue
yang Panjang atau nilai
queue
yang banyak kerana perlaksanaannya menggunakan tatasusunan (
array
).
Nilai-nilai perlu digerakkan kedudukannya setiap kali fungsi ‘
shift()
’ dipanggil dan digunakan.
Penggunaan ‘
push()
’ dan ‘
shift()
’dalam
JavaScript
:
Nilai awal dimasukkan melalui bahagian belakang ruang ingatan
array
.
Nilai awal dikeluarkan melalui bahagian depan ruang ingatan
array
.
Penggunaan ‘
unshift()
’ dan ‘
pop()
’ dalam
JavaScript
:
Nilai awal dimasukkan melalui bahagian depan ruang ingatan
array
.
Nilai awal dikeluarkan melalui bahagian belakang ruang ingatan
array
.
3.1.3
Atur Cara Yang Mempunyai Pemalar, Pemboleh Ubah Dan Jenis Data Berlainan Bagi Bahasa Penskripan Klien
1. Pemboleh Ubah
Pemboleh ubah ialah ruang ingatan yang digunakan untuk menyimpan nilai sementara sewaktu atur cara diproses.
Nilainya boleh berubah-ubah mengikut penggunaan pemboleh ubah atau arahan kepada pemboleh ubah.
Setiap pemboleh ubah akan diberi nama mengikut nilai yang disimpan.
Nama yang diberi kepada pemboleh ubah dikenali sebagai pengecam.
2. Pemalar
Merupakan ruang ingatan yang digunakan untuk menyimpan nilai sementara sewaktu atur cara diproses.
Pemalar sama seperti pemboleh ubah tetapi nilainya tidak boleh berubah-ubah.
Nilai tidak boleh berubah kerana nilai yang ditentukan itu merupakan suatu nilai yang telah ditetapkan dalam atur cara.
Const
ialah kata kunci yang digunakan dalam
JavaScript
sebagai pemalar.
3. Jenis Data
Merupakan jenis nilai atau pelbagai set data yang digunakan dalam atur cara.
Jenis data asas dalam
JavaScript
adalah seperti yang ditunjukkan di bawah:
Jenis Data
Contoh Data
Nombor
5
100.50
Rentetan (
String
)
“Ali bin Abu”
“BMW 318i”
Boolean
true
false
3.1.4 Penggunaan Struktur Kawalan Dalam Bahasa Penskripan Klien
Struktur kawalan akan mengawal aliran atur cara dalam blok kod atur cara.
Pernyataan ini akan menentukan sama ada pernyataan akan dilaksanakan atau tidak termasuk mengulang pernyataan dalam 1 blok kod.
Struktur Kawalan Jujukan
Bermaksud arahan atau pernyataan dilaksanakan mengikut tertib sepertimana yang diarahkan dalam suatu kod aksara tanpa perlu memeriksa sebarang isyarat.
Antara pernyataan yang terdapat dalam struktur kawalan jujukan ialah input data, proses seperti pengiraan (operasi aritmetik) dan paparan atau cetakan output.
Input data boleh diterima daripada pengguna (secara interaktif) atau ditetapkan dalam atur cara.
Struktur Kawalan Pilihan
Memerlukan pernyataan bersyarat yang akan melaksanakan 1 pernyataan atau 1 blok kod yang ditutupi dengan “{” dan “}” dalam
JavaScript
.
Pernyataan bersyarat dilaksanakan dengan menggunakan pernyataan yang dipanggil ungkapan logik yang terdiri daripada operator hubungan.
Operator hubungan yang terdapat dalam ungkapan logik adalah seperti yang ditunjukkan di bawah:
Syarat
Simbol Operator Hubungan
Sama dengan
==
Tidak sama dengan
!=
Lebih besar daripada
>
Lebih kecil daripada
<
Lebih besar atau sama dengan
>=
Lebih kecil atau sama denga
<=
Ungkapan logik akan menghasilkan nilai
Boolean
iaitu
true
atau
false
untuk menentukan sama ada 1 pernyataan atau 1 blok kod akan dilaksanakan atau tidak.
Dua pernyataan JavaScript yang digunakan untuk struktur kawalan pilihan.
Pernyataan
if
Jika syarat dalam
if
adalah
true
, pernyataan akan dilaksanakan.
Jika sebaliknya, pernyataan tidak akan dilaksanakan dan dilangkau.
Pernyataan
if…else
Jika syarat tidak ditepati (syarat
false
), bahagian
else
atau
else…if
akan dirujuk untuk mengenal pasti blok kod yang dilaksanakan.
Dalam 1 pernyataan
if…else
, 2 atau lebih syarat
Boolean
boleh diuji serentak dengan menggabungkan syarat
Boolean
melalui operasi logikal.
Operator yang lazim digunakan ialah AND, OR dan NOT.
AND – Digunakan apabila terdapat 2 atau lebih syarat
Boolean
perlu digabungkan dan semua syarat perlu benar sebelum melaksanakan pernyataan seterusnya.
OR – Digunakan apabila 2 atau lebih syarat
Boolean
perlu digabungkan dan hanya salah 1 syarat
Boolean
perlu benar sebelum melaksanakan pernyataan seterusnya.
Struktur Kawalan Ulangan
Memerlukan pernyataan bersyarat yang akan melaksanakan 1 pernyataan atau 1 blok kod berulang kali.
Melaksanakan 1 pernyataan yang diberi selagi syaratnya adalah
true
.
Jenis-jenis struktur kawalan ulangan iaitu ulangan berasaskan Pembilang,
while… dan do…while
3.1.5
Kelebihan Standard Library
Pengenalan
Standard Library
Standard library
dalam pengaturcaraan merupakan koleksi kaedah atau fungsi yang disediakan dan diguna pakai sewaktu implementasi dalam kod atur cara.
Standard library
perlu ditakrifkan dalam spesifikasi bahasa pengaturcaraan.
Standard library
juga merupakan sebahagian daripada arahan dalam atur cara, termasuklah definisi bagi algoritma yang biasa digunakan, struktur data, dan mekanisme bagi input dan output.
Antara standard library yang terdapat dalam JavaScript:
math.js bagi fungsi-fungsi matematik seperti math.sqrt()dan math.pow()
date.js bagi fungsi-fungsi tarikh seperti date.now() dan date.format()
Kelebihan
Standard Library
Digunakan tanpa mengetahui cara pelaksanaannya.
Boleh digunakan berulang-ulang kali apabila diperlukan dalam atur cara dengan hanya memanggil fungsinya.
Dapat mengurangkan masa pembangunan atur cara kerana tidak perlu menulis pernyataan berulang-ulang kali.
3.1.6 Penggunaan
Standard Library
Dalam Bahasa Penskripan Klien
math.js
Standard library
yang kerap diguna pakai dalam
JavaScript
yang terdiri daripada fungsi ‘
built-in
’ dan pemalar dengan pelbagai jenis data.
Juga boleh digunakan dalam
node.js
dalam pelayan (
server
) dan dalam pelayar (
browser
) untuk atur cara klien.
Fungsi-fungsi dalam
math.js
:
Fungsi
Penerangan
math.add(x,y)
Menambah 2 nombor
math.divide(x,y)
Membahagi 2 nombor
math.subtract(x,y)
Menolak 2 nombor
math.pow(x,y)
Mengira kuasa kepada nombor
math.sqrt(x)
Mengira punca kuasa bagi nombor
math.cube(x)
Mendarab tiga nombor yang sama (x * x * x)
math.sort(x)
Mengisih unsur-unsur dalam satu matriks
Pelayar (
Browser
)
Satu program yang mempunyai antara muka bergrafik yang memaparkan fail-fail HTML dan digunakan untuk navigasi WWW (
World Wide Web
).
date.js
Fungsi-fungsi dalam
date.js
:
Fungsi
Penerangan
Date.today()
Menghasilkan tarikh hari ini
Date.parse(‘today’)
Menukar bentuk objek kepada bentuk objek
Date
Date.today() .add() .days()
Menambah hari kepada hari ini
3.1.7
Penggunaan
Procedure
Dan
Function
Untuk Meringkaskan Atur Cara Dalam Bahasa Penskripan Klien
Subatur cara
JavaScript
mempunyai banyak barisan arahan yang dihimpunkan dalam 1 blok kod yang dikenali sebagai modul.
Barisan arahan tersebut boleh dipecahkan mengikut tugas masing-masing dan dihimpunkan dalam modul yang berasingan yang dipanggil subatur cara.
Terdapat 2 jenis subatur cara iaitu:
Prosedur (
Procedure
) – Tidak memulangkan data.
Fungsi (
Function
) – Akan memulangkan data.
Cara Memanggil/Menggunakan
Procedure
Dan
Function
Untuk Meringkaskan Atur Cara Bahasa Penskripan Klien
Subatur cara akan menggunakan subatur cara lain bertujuan supaya kod pernyataan-pernyataan dalam subatur cara lain akan dilaksanakan.
Hubungan 2 subatur cara ialah pemanggil dan dipanggil.
Subatur cara (pemanggil) memanggil nama subatur cara (dipanggil) dalam badan subatur cara (pemanggil).
Parameter
Setiap prosedur (
procedure
) dan fungsi (
function
) mempunyai kurungan.
Dalam kurungan terdapat nama parameter yang dipisahkan oleh simbol “,” (
comma
).
Parameter ataupun argumen membolehkan prosedur dan fungsi menghantar nilai (pemanggil) dan diterima oleh prosedur dan fungsi yang dipanggil.
Ungkapan parameter rasmi (
formal parameter
) digunakan merujuk parameter bagi subatur cara yang dipanggil.
Ungkapan parameter sebenar (
actual parameter
) digunakan untuk merujuk pemboleh ubah di dalam subatur cara pemanggil.
Memulangkan Nilai
Fungsi (
Function
) akan mengembalikan kawalan kepada pemanggil.
Sesetengah fungsi (
function
) bukan sahaja mengembalikan kawalan tetapi pemboleh ubah.
3.1.8 Penggunaan Tatasusunan (
Array
) Dalam Bahasa Penskripan Klien
Penggunaan tatasusunan adalah untuk menyimpan satu senarai nilai dalam satu pemboleh ubah.
3.1.9 Atur Cara Interaktif Yang Mengandungi Pengisytiharan Data, Struktur Kawalan,
Procedur
e Dan
Function
Serta Tatasusunan
JavaScript
digunakan dalam pelbagai persekitaran.
Seperti berinteraksi dengan pelayan, menambah animasi pada laman web, memanipulasi imej dan menyimpan serta memproses data pengguna.
Sebagai permulaan, kita boleh menggunakan butang atau tag HTML untuk pengguna berinteraksi dengan laman web.
Tag HTML digunakan untuk laman web interaktif, iaitu butang adalah terhasil dalam dokumen HTML (laman web).
Menggunakan tag HTML
“
” dan memanggil
procedure
/
function
untuk melaksanakan arahan dalam atur cara interaktif.
Tag HTML
…
atau hyperlink digunakan supaya pengguna dapat berinteraksi dengan laman web.
Cara untuk melaksanakan arahan atur cara dengan mengklik pada teks atau imej untuk ke tapak web atau laman web yang ditentukan.
Bahasa Penskripan Klien
3.1
Bahasa Penskripan Klien
3.1.1 Keperluan Bahasa Penskripan Klien Dalam Laman Web
Pengenalan Kepada HTML Dan CSS
HTML atau
Hypertext Markup Language
ialah bahasa
markup standard
yang digunakan oleh pereka web professional bagi mereka bentuk laman web.
Dokumen HTML adalah mengenai konsep bagaimana dokumen dipaparkan.
HTML juga ialah konsep bagaimana elemen teks, audio, video serta grafik disusun agar mudah dibaca dan difahami oleh pelawat laman web.
Untuk menerangkan struktur bagi setiap laman web, kod HTML atau elemen HTML digunakan.
Elemen biasanya terdiri daripada dua tag berpasangan, iaitu
start tag
dan
close tag
.
Terdapat 2 bahagian atribut iaitu:
Atribut nama.
Atribut nilai.
Pengenalan kepada CSS
Cascading Style Sheet
(CSS) ialah satu bahasa pengaturcaraan yang merupakan tambahan (
extension
) kepada HTML.
Membenarkan perubahan kepada gaya sesuatu halaman web dan menerangkan persembahan bagi sesuatu dokumen HTML.
Pengenalan
JavaScript
JavaScript
menyediakan keupayaan pengaturcaraan untuk memproses sesuatu tugas berdasarkan permohonan yang diterima kepada klien.
Kod
JavaScript
akan ditulis bersama-sama dalam kod HTML.
Kod
JavaScript
ditulis di antara tag ‘<
script
>’ dengan ‘script>’.
Terdapat dua cara kod
JavaScript
ditulis dalam HTML:
Explicit embedding
Implicit embedding
Konsep Aplikasi Pelanggan/Pelayan (
Client
/
Server
)
Reka bentuk web dibangunkan berteraskan pelanggan/pelayan.
Pelanggan atau
client
adalah pelayar (
browser
) yang digunakan oleh pengguna bagi melayari web dengan menggunakan sama ada peranti mudah alih, komputer riba atau komputer meja.
Satu lagi komponen laman web ialah pangkalan data yang digunakan untuk menyimpan data.
Bahasa Penskripan
Terdapat dua jenis laman web iaitu:
Laman web statik.
Laman web dinamik.
Laman web yang direka menggunakan Hypertext Markup Language (HTML) sahaja ialah laman web yang bersifat statik iaitu kandungan paparan pada setiap halaman mengikut tag HTML yang digunakan.
Laman web dinamik pula ialah laman web yang direka menggunakan penskripan pelayan seperti ASP atau PHP yang memberi keupayaan kepada pemilik laman web untuk mengemas kini kandungan laman web dengan mudah.
Perbezaan antara laman web statik dengan laman web dinamik adalah seperti yang ditunjukkan di bawah:
Laman Web Statik
Laman Web Dinamik
Kandungan paparan mengikut tag HTML yang digunakan.
Kandungan paparan boleh dipanggil dari pangkalan data atau mengikut tindakan pengguna.
Dibina menggunakan HTML sahaja.
Dibina menggunakan penskripan pelayan.
Contoh
: laman web yang memaparkan latar belakang organisasi.
Contoh
: Aktiviti akan datang yang dipaparkan di laman utama laman web yang berubah mengikut tarikh kalendar.
Konsep penskripan web digunakan secara meluas dalam pembangunan web.
Penskripan ialah sebahagian kecil program yang dilaksanakan berdasarkan interaksi pengguna dan laman web.
Penskripan ditempatkan kpd 2 bahagian:
Penskripan klien
Berada di sebelah pelanggan.
Bekerja di bahagian hadapan pembangunan web dan dilaksanakan oleh pelayar web.
Penskripan pelayan
Berada di sebelah pelayan.
Bekerja di bahagian belakang pembangunan web dan dilaksanakan oleh pelayan web.
Bahasa Penskripan Klien
Merujuk program komputer dalam web yang dilaksanakan pada komputer klien.
Direka bagi memanipulasikan dan memaparkan kandungan laman web yang telah dimuat turun dalam komputer klien.
Digunakan untuk proses pengesahan input yang dimasukkan oleh pengguna apabila mengisi borang dalam talian.
Juga digunakan untuk melaksanakan tugas yang mudah.
Kelebihan bahasa penskripan:
3.1.2
Atur Cara Dan Carta Alir Bagi Bahasa Penskripan Klien
Pengisihan
Suatu senarai unsur adalah lebih baik diisih untuk memudahkan pencarian agar paparan akan menjadi lebih kemas.
Jenis-jenis proses pengisihan:
Isihan buih (
Bubble sort
)
Isihan pilih (
Selection sort
)
Isihan buih (
Bubble sort
)
Satu algoritma mudah dalam pengisihan suatu senarai yang prosesnya dilaksanakan 1 persatu secara berturutan dengan membandingkan unsur-unsur bersebelahan dan akan menukar kedudukan (
swap
) sekiranya berlaku turutan yang salah.
Terdapat 2 proses perbandingan yang boleh dilaksanakan untuk menukar kedudukan:
Banding unsur pertama sama ada lebih kecil daripada unsur kedua (untuk turutan menurun).
Banding unsur pertama sama ada lebih besar daripada unsur kedua (untuk turutan menaik).
Kelebihan isihan buih:
Isihan lebih mudah dibina dan mudah difahami.
Sesuai untuk tujuan pembelajaran dan bukan untuk aplikasi sebenar.
Sesuai digunakan untuk bilangan unsur yang kecil.
Isihan pilih (
Selection sort
)
Satu algoritma dalam pengisihan suatu senarai yang boleh melibatkan proses.
Terdapat 2 proses perbandingan yang boleh dilaksanakan untuk menukar kedudukan:
Banding unsur dirujuk sama ada lebih besar daripada unsur terkecil (untuk turutan menaik).
Banding unsur dirujuk sama ada lebih kecil daripada unsur terkecil (untuk turutan menurun).
Kelebihan isihan pilih:
Sesuai digunakan dalam membuat pengisihan sekiranya bilangan unsur adalah kecil.
Carian Perduaan (
Binary Search
)
Sesuai digunakan apabila melibatkan bilangan data yang banyak dan telah diisih.
Proses carian perduaan adalah seperti berikut:
Cari lokasi di tengah-tengah senarai.
Dapatkan unsur ditengah-tengah senarai.
Bandingkan dengan unsur yang kecil.
Teruskan pencarian daripada sub-senarai.
Tiga proses perbandingan yang boleh dilaksanakan:
Bandingkan unsur di tengah sama ada sama dengan unsur yang dicari.
Bandingkan unsur di tengah sama ada lebih kecil daripada unsur yang dicari.
Bandingkan unsur di tengah sama ada lebih besar daripada unsur yang dicari.
Pengiraan Untuk Mendapatkan Nilai-nilai Maksimum, Minimum Dan
Mean
Mendapatkan Nilai Maksimum
Merujuk nilai terbesar dalam sesuatu senarai nilai.
Proses mencari nilai maksimum:
Beri nilai awal maksimum.
Banding nilai dalam senarai dengan nilai awal maksimum.
Dapatkan nilai maksimum terkini.
Terdapat hanya 1 senarai proses perbandingan iaitu bandingkan nilai yang dirujuk dalam senarai sama ada lebih besar daripada nilai maksimum.
Mendapatkan Nilai Minimum
Merujuk nilai terkecil dalam suatu senarai nilai.
Proses mencari nilai minimum:
Beri nilai awal minimum.
Banding nilai dalam senarai dengan nilai awal minimum.
Dapat nilai minimum terkini.
Terdapat hanya 1 proses perbandingan sahaja iaitu banding nilai yang dirujuk dalam senarai lebih kecil daripada nilai minimum.
Mendapatkan Nilai
Mean
Merujuk purata nilai dalam senarai nilai tersebut.
Langkah-langkah untuk mendapatkan purata:
Jumlah nilai-nilai dalam senarai nilai tersebut.
Dapatkan bilangan nilai yang terdapat dalam senarai.
Nilai
mean
dikira dengan membahagikan nilai jumlah dengan bilangan nilai yang terdapat dalam senarai (
Formula:
Mean
= Jumlah/Bilangan
).
Mendapatkan Nilai
Count
Mengira bilangan nilai yang terdapat dalam sesuatu senarai.
Langkah-langkah yang perlu dilaksanakan:
Menggunakan suatu perwakilan sebagai pembilang dan memberikan nilai awalan pembilang sebagai 1.
Nilai
count
dikira dengan menambah pembilang dengan 1 bagi setiap nilai yang dicapai atau dirujuk (
Formula: Pembilang = Pembilang + 1
).
Memaparkan nilai akhir pembilang iaitu
count
.
Pengumpukan Nilai Dalam Struktur Giliran (
Queue
)
Giliran (
Queue
) merupakan struktur data linear iaitu pengumpukan nilai dalam ruang ingatan secara teratur.
Queue
boleh membuang nilai lama iaitu nilai terawal dimasukkan.
Kaedah ini dipanggil FIFO (
First In First Out
).
Terdapat 2 operasi penting dalam
queue
:
Enqueue
– Memasukkan data ke dalam
queue
.
Dequeue
– Membuang data lama dalam
queue
.
Operasi
queue
boleh dilakukan menggunakan fungsi ‘
push()
’ dan ‘
shift()
’ atau ‘
unshift()
’ dan ‘
pop()
’ bagi objek tatasusunan.
Kelebihan: Keempat-empat fungsi ini sangat mudah digunakan dan hanya memanggil fungsi-fungsi tersebut.
Kekangan: fungsi-fungsi ini tidak sesuai digunakan jika:
Mempunyai
queue
yang besar,
queue
yang Panjang atau nilai
queue
yang banyak kerana perlaksanaannya menggunakan tatasusunan (
array
).
Nilai-nilai perlu digerakkan kedudukannya setiap kali fungsi ‘
shift()
’ dipanggil dan digunakan.
Penggunaan ‘
push()
’ dan ‘
shift()
’dalam
JavaScript
:
Nilai awal dimasukkan melalui bahagian belakang ruang ingatan
array
.
Nilai awal dikeluarkan melalui bahagian depan ruang ingatan
array
.
Penggunaan ‘
unshift()
’ dan ‘
pop()
’ dalam
JavaScript
:
Nilai awal dimasukkan melalui bahagian depan ruang ingatan
array
.
Nilai awal dikeluarkan melalui bahagian belakang ruang ingatan
array
.
3.1.3
Atur Cara Yang Mempunyai Pemalar, Pemboleh Ubah Dan Jenis Data Berlainan Bagi Bahasa Penskripan Klien
1. Pemboleh Ubah
Pemboleh ubah ialah ruang ingatan yang digunakan untuk menyimpan nilai sementara sewaktu atur cara diproses.
Nilainya boleh berubah-ubah mengikut penggunaan pemboleh ubah atau arahan kepada pemboleh ubah.
Setiap pemboleh ubah akan diberi nama mengikut nilai yang disimpan.
Nama yang diberi kepada pemboleh ubah dikenali sebagai pengecam.
2. Pemalar
Merupakan ruang ingatan yang digunakan untuk menyimpan nilai sementara sewaktu atur cara diproses.
Pemalar sama seperti pemboleh ubah tetapi nilainya tidak boleh berubah-ubah.
Nilai tidak boleh berubah kerana nilai yang ditentukan itu merupakan suatu nilai yang telah ditetapkan dalam atur cara.
Const
ialah kata kunci yang digunakan dalam
JavaScript
sebagai pemalar.
3. Jenis Data
Merupakan jenis nilai atau pelbagai set data yang digunakan dalam atur cara.
Jenis data asas dalam
JavaScript
adalah seperti yang ditunjukkan di bawah:
Jenis Data
Contoh Data
Nombor
5
100.50
Rentetan (
String
)
“Ali bin Abu”
“BMW 318i”
Boolean
true
false
3.1.4 Penggunaan Struktur Kawalan Dalam Bahasa Penskripan Klien
Struktur kawalan akan mengawal aliran atur cara dalam blok kod atur cara.
Pernyataan ini akan menentukan sama ada pernyataan akan dilaksanakan atau tidak termasuk mengulang pernyataan dalam 1 blok kod.
Struktur Kawalan Jujukan
Bermaksud arahan atau pernyataan dilaksanakan mengikut tertib sepertimana yang diarahkan dalam suatu kod aksara tanpa perlu memeriksa sebarang isyarat.
Antara pernyataan yang terdapat dalam struktur kawalan jujukan ialah input data, proses seperti pengiraan (operasi aritmetik) dan paparan atau cetakan output.
Input data boleh diterima daripada pengguna (secara interaktif) atau ditetapkan dalam atur cara.
Struktur Kawalan Pilihan
Memerlukan pernyataan bersyarat yang akan melaksanakan 1 pernyataan atau 1 blok kod yang ditutupi dengan “{” dan “}” dalam
JavaScript
.
Pernyataan bersyarat dilaksanakan dengan menggunakan pernyataan yang dipanggil ungkapan logik yang terdiri daripada operator hubungan.
Operator hubungan yang terdapat dalam ungkapan logik adalah seperti yang ditunjukkan di bawah:
Syarat
Simbol Operator Hubungan
Sama dengan
==
Tidak sama dengan
!=
Lebih besar daripada
>
Lebih kecil daripada
<
Lebih besar atau sama dengan
>=
Lebih kecil atau sama denga
<=
Ungkapan logik akan menghasilkan nilai
Boolean
iaitu
true
atau
false
untuk menentukan sama ada 1 pernyataan atau 1 blok kod akan dilaksanakan atau tidak.
Dua pernyataan JavaScript yang digunakan untuk struktur kawalan pilihan.
Pernyataan
if
Jika syarat dalam
if
adalah
true
, pernyataan akan dilaksanakan.
Jika sebaliknya, pernyataan tidak akan dilaksanakan dan dilangkau.
Pernyataan
if…else
Jika syarat tidak ditepati (syarat
false
), bahagian
else
atau
else…if
akan dirujuk untuk mengenal pasti blok kod yang dilaksanakan.
Dalam 1 pernyataan
if…else
, 2 atau lebih syarat
Boolean
boleh diuji serentak dengan menggabungkan syarat
Boolean
melalui operasi logikal.
Operator yang lazim digunakan ialah AND, OR dan NOT.
AND – Digunakan apabila terdapat 2 atau lebih syarat
Boolean
perlu digabungkan dan semua syarat perlu benar sebelum melaksanakan pernyataan seterusnya.
OR – Digunakan apabila 2 atau lebih syarat
Boolean
perlu digabungkan dan hanya salah 1 syarat
Boolean
perlu benar sebelum melaksanakan pernyataan seterusnya.
Struktur Kawalan Ulangan
Memerlukan pernyataan bersyarat yang akan melaksanakan 1 pernyataan atau 1 blok kod berulang kali.
Melaksanakan 1 pernyataan yang diberi selagi syaratnya adalah
true
.
Jenis-jenis struktur kawalan ulangan iaitu ulangan berasaskan Pembilang,
while… dan do…while
3.1.5
Kelebihan Standard Library
Pengenalan
Standard Library
Standard library
dalam pengaturcaraan merupakan koleksi kaedah atau fungsi yang disediakan dan diguna pakai sewaktu implementasi dalam kod atur cara.
Standard library
perlu ditakrifkan dalam spesifikasi bahasa pengaturcaraan.
Standard library
juga merupakan sebahagian daripada arahan dalam atur cara, termasuklah definisi bagi algoritma yang biasa digunakan, struktur data, dan mekanisme bagi input dan output.
Antara standard library yang terdapat dalam JavaScript:
math.js bagi fungsi-fungsi matematik seperti math.sqrt()dan math.pow()
date.js bagi fungsi-fungsi tarikh seperti date.now() dan date.format()
Kelebihan
Standard Library
Digunakan tanpa mengetahui cara pelaksanaannya.
Boleh digunakan berulang-ulang kali apabila diperlukan dalam atur cara dengan hanya memanggil fungsinya.
Dapat mengurangkan masa pembangunan atur cara kerana tidak perlu menulis pernyataan berulang-ulang kali.
3.1.6 Penggunaan
Standard Library
Dalam Bahasa Penskripan Klien
math.js
Standard library
yang kerap diguna pakai dalam
JavaScript
yang terdiri daripada fungsi ‘
built-in
’ dan pemalar dengan pelbagai jenis data.
Juga boleh digunakan dalam
node.js
dalam pelayan (
server
) dan dalam pelayar (
browser
) untuk atur cara klien.
Fungsi-fungsi dalam
math.js
:
Fungsi
Penerangan
math.add(x,y)
Menambah 2 nombor
math.divide(x,y)
Membahagi 2 nombor
math.subtract(x,y)
Menolak 2 nombor
math.pow(x,y)
Mengira kuasa kepada nombor
math.sqrt(x)
Mengira punca kuasa bagi nombor
math.cube(x)
Mendarab tiga nombor yang sama (x * x * x)
math.sort(x)
Mengisih unsur-unsur dalam satu matriks
Pelayar (
Browser
)
Satu program yang mempunyai antara muka bergrafik yang memaparkan fail-fail HTML dan digunakan untuk navigasi WWW (
World Wide Web
).
date.js
Fungsi-fungsi dalam
date.js
:
Fungsi
Penerangan
Date.today()
Menghasilkan tarikh hari ini
Date.parse(‘today’)
Menukar bentuk objek kepada bentuk objek
Date
Date.today() .add() .days()
Menambah hari kepada hari ini
3.1.7
Penggunaan
Procedure
Dan
Function
Untuk Meringkaskan Atur Cara Dalam Bahasa Penskripan Klien
Subatur cara
JavaScript
mempunyai banyak barisan arahan yang dihimpunkan dalam 1 blok kod yang dikenali sebagai modul.
Barisan arahan tersebut boleh dipecahkan mengikut tugas masing-masing dan dihimpunkan dalam modul yang berasingan yang dipanggil subatur cara.
Terdapat 2 jenis subatur cara iaitu:
Prosedur (
Procedure
) – Tidak memulangkan data.
Fungsi (
Function
) – Akan memulangkan data.
Cara Memanggil/Menggunakan
Procedure
Dan
Function
Untuk Meringkaskan Atur Cara Bahasa Penskripan Klien
Subatur cara akan menggunakan subatur cara lain bertujuan supaya kod pernyataan-pernyataan dalam subatur cara lain akan dilaksanakan.
Hubungan 2 subatur cara ialah pemanggil dan dipanggil.
Subatur cara (pemanggil) memanggil nama subatur cara (dipanggil) dalam badan subatur cara (pemanggil).
Parameter
Setiap prosedur (
procedure
) dan fungsi (
function
) mempunyai kurungan.
Dalam kurungan terdapat nama parameter yang dipisahkan oleh simbol “,” (
comma
).
Parameter ataupun argumen membolehkan prosedur dan fungsi menghantar nilai (pemanggil) dan diterima oleh prosedur dan fungsi yang dipanggil.
Ungkapan parameter rasmi (
formal parameter
) digunakan merujuk parameter bagi subatur cara yang dipanggil.
Ungkapan parameter sebenar (
actual parameter
) digunakan untuk merujuk pemboleh ubah di dalam subatur cara pemanggil.
Memulangkan Nilai
Fungsi (
Function
) akan mengembalikan kawalan kepada pemanggil.
Sesetengah fungsi (
function
) bukan sahaja mengembalikan kawalan tetapi pemboleh ubah.
3.1.8 Penggunaan Tatasusunan (
Array
) Dalam Bahasa Penskripan Klien
Penggunaan tatasusunan adalah untuk menyimpan satu senarai nilai dalam satu pemboleh ubah.
3.1.9 Atur Cara Interaktif Yang Mengandungi Pengisytiharan Data, Struktur Kawalan,
Procedur
e Dan
Function
Serta Tatasusunan
JavaScript
digunakan dalam pelbagai persekitaran.
Seperti berinteraksi dengan pelayan, menambah animasi pada laman web, memanipulasi imej dan menyimpan serta memproses data pengguna.
Sebagai permulaan, kita boleh menggunakan butang atau tag HTML untuk pengguna berinteraksi dengan laman web.
Tag HTML digunakan untuk laman web interaktif, iaitu butang adalah terhasil dalam dokumen HTML (laman web).
Menggunakan tag HTML
“
” dan memanggil
procedure
/
function
untuk melaksanakan arahan dalam atur cara interaktif.
Tag HTML
…
atau hyperlink digunakan supaya pengguna dapat berinteraksi dengan laman web.
Cara untuk melaksanakan arahan atur cara dengan mengklik pada teks atau imej untuk ke tapak web atau laman web yang ditentukan.
Chapter : Pengaturcaraan Berasaskan Web
Topic : Bahasa Penskripan Klien (Client Side Scripting Language)
Form 5
Sains Komputer
View all notes for Sains Komputer Form 5
Related notes
Bahasa Penskripan Pelayan
Komputer dan Impak
Seni Bina Komputer
Get Logik
Pangkalan Data Lanjutan
Report this note
Online Tuition
Live class daily with celebrity tutors
Learn more
Register for a free Pandai account now
Edit content
×
Loading...
Quiz
Videos
Notes
Account