Bahasa Penskripan Klien (Client Side Scripting Language)

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 ‘\(\lt\)script\(\gt\)’ dengan ‘\(\lt/\)script\(\gt\)’.
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 kepada 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.
  - Dapatkan 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 dengan	<=

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, Procedure 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 \(\lt\)button\(\gt\) untuk pengguna berinteraksi dengan laman web.
Tag HTML \(\lt\)button\(\gt\) digunakan untuk laman web interaktif, iaitu butang adalah terhasil dalam dokumen HTML (laman web).
Menggunakan tag HTML \(\lt\)button\(\gt\) dan memanggil procedure/function untuk melaksanakan arahan dalam atur cara interaktif.
Tag HTML \(\lt\)a\(\gt\)...\(\lt/\)a\(\gt\) 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.