3.1 |
Bahasa Penskripan Klien |
|
|
3.1.1 Keperluan Bahasa Penskripan Klien Dalam Laman Web |
|
Pengenalan Kepada HTML Dan CSS |
|
1. HTML atau Hypertext Markup Language ialah bahasa markup standard yang digunakan oleh pereka web professional bagi mereka bentuk laman web. |
|
2. Dokumen HTML adalah mengenai konsep bagaimana dokumen dipaparkan. |
|
3. HTML juga ialah konsep bagaimana elemen teks, audio, video serta grafik disusun agar mudah dibaca dan difahami oleh pelawat laman web. |
|
4. Untuk menerangkan struktur bagi setiap laman web, kod HTML atau elemen HTML digunakan. |
|
5. Elemen biasanya terdiri daripada dua tag berpasangan, iaitu start tag dan close tag. |
|
6. Terdapat 2 bahagian atribut iaitu: |
|
- Atribut nama.
- Atribut nilai.
|
|
Pengenalan Kepada CSS |
|
1. Cascading Style Sheet (CSS) ialah satu bahasa pengaturcaraan yang merupakan tambahan (extension) kepada HTML. |
|
2. Membenarkan perubahan kepada gaya sesuatu halaman web dan menerangkan persembahan bagi sesuatu dokumen HTML. |
|
Pengenalan JavaScript |
|
1. JavaScript menyediakan keupayaan pengaturcaraan untuk memproses sesuatu tugas berdasarkan permohonan yang diterima kepada klien. |
|
2. Kod JavaScript akan ditulis bersama-sama dalam kod HTML. |
|
3. Kod JavaScript ditulis di antara tag ‘<script>’ dengan ‘script>’. |
|
4. Terdapat dua cara kod JavaScript ditulis dalam HTML: |
|
- Explicit embedding
- Implicit embedding
|
|
Konsep Aplikasi Pelanggan/Pelayan (Client/Server)
|
|
1. Reka bentuk web dibangunkan berteraskan pelanggan/pelayan. |
|
2. 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. |
|
3. Satu lagi komponen laman web ialah pangkalan data yang digunakan untuk menyimpan data. |
|
Bahasa Penskripan |
|
1. Terdapat dua jenis laman web iaitu: |
|
- Laman web statik
- Laman web dinamik
|
|
2. Konsep penskripan web digunakan secara meluas dalam pembangunan web. |
|
3. Penskripan ialah sebahagian kecil program yang dilaksanakan berdasarkan interaksi pengguna dan laman web. |
|
4. 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 |
|
1. Merujuk program komputer dalam web yang dilaksanakan pada komputer klien. |
|
2. Direka bagi memanipulasikan dan memaparkan kandungan laman web yang telah dimuat turun dalam komputer klien. |
|
3. Digunakan untuk proses pengesahan input yang dimasukkan oleh pengguna apabila mengisi borang dalam talian. |
|
4. Juga digunakan untuk melaksanakan tugas yang mudah. |
|
5. Kelebihan bahasa penskripan: |
|
- Laman web menjadi lebih interaktif.
- Meningkatkan kebolehan web bagi pelayar yang menyokong pelbagai jenis bahasa penskripan klien.
- Perlaksanaan tugas yang pantas tanpa penglibatan komputer pelayan.
- Pembangunan web berkeupayaan menetukan reka bentuk dan ciri-ciri web.
|
|
3.1.2 Atur Cara Dan Carta Alir Bagi Bahasa Penskripan Klien |
|
1. Suatu senarai unsur adalah lebih baik diisih untuk memudahkan pencarian agar paparan akan menjadi lebih kemas. |
|
2. Jenis-jenis proses pengisihan: |
|
Isihan buih (Bubble sort) |
|
1. 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. |
|
2. 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).
|
|
3. 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) |
|
1. Satu algoritma dalam pengisihan suatu senarai yang boleh melibatkan proses. |
|
2. 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) |
|
1. Sesuai digunakan apabila melibatkan bilangan data yang banyak dan telah diisih. |
|
2. 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.
|
|
3. 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 |
|
1. Merujuk nilai terbesar dalam sesuatu senarai nilai. |
|
2. Proses mencari nilai maksimum: |
|
- Beri nilai awal maksimum.
- Banding nilai dalam senarai dengan nilai awal maksimum.
- Dapatkan nilai maksimum terkini.
|
|
3. Terdapat hanya 1 senarai proses perbandingan iaitu bandingkan nilai yang dirujuk dalam senarai sama ada lebih besar daripada nilai maksimum. |
|
Mendapatkan Nilai Minimum |
|
1. Merujuk nilai terkecil dalam suatu senarai nilai. |
|
2. 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 |
|
1. Merujuk purata nilai dalam senarai nilai tersebut. |
|
2. 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 |
|
1. Mengira bilangan nilai yang terdapat dalam sesuatu senarai. |
|
2. 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) |
|
1. Giliran (Queue) merupakan struktur data linear iaitu pengumpukan nilai dalam ruang ingatan secara teratur. |
|
2. Queue boleh membuang nilai lama iaitu nilai terawal dimasukkan. |
|
3. Kaedah ini dipanggil FIFO (First In First Out). |
|
4. Terdapat 2 operasi penting dalam queue: |
|
- Enqueue – Memasukkan data ke dalam queue.
- Dequeue – Membuang data lama dalam queue.
|
|
1. Operasi queue boleh dilakukan menggunakan fungsi ‘push()’ dan ‘shift()’ atau ‘unshift()’ dan ‘pop()’ bagi objek tatasusunan. |
|
2. Kelebihan: Keempat-empat fungsi ini sangat mudah digunakan dan hanya memanggil fungsi-fungsi tersebut. |
|
3. 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.
|
|
4. Penggunaan ‘push()’ dan ‘shift()’dalam JavaScript: |
|
- Nilai awal dimasukkan melalui bahagian belakang ruang ingatan array.
- Nilai awal dikeluarkan melalui bahagian depan ruang ingatan array.
|
|
5. 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.
|
|
3.1.4 Penggunaan Struktur Kawalan Dalam Bahasa Penskripan Klien |
|
1. Struktur kawalan akan mengawal aliran atur cara dalam blok kod atur cara. |
|
2. 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.
- Ungkapan logik akan menghasilkan nilai Boolean iaitu true atau false untuk menentukan sama ada 1 pernyataan atau 1 blok kod akan dilaksanakan atau tidak.
|
|
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 |
|
- Merupakan koleksi kaedah atau fungsi yang disediakan dan diguna pakai sewaktu implimentasi dalam kod atur cara.
- Perlu ditakrifkan dalam spesifikasi bahasa pengaturcaraan.
- Merupakan sebahagian daripada arahan dalam atur cara termasuklah definisi bagi algoritma yang biasa digunakan, struktur data dan mekanisma bagi input dan output.
- Kelebihan standard library ialah digunakan tanpa mengetahui cara perlaksanaannya, Boleh digunakan berulang-ulang kali apabila diperlukan dalam atur cara dengan hanya memanggil fungsinya dan 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 |
|
1. Standard library yang kerap diguna pakai dalam JavaScript yang terdiri daripada fungsi ‘built-in’ dan pemalar dengan pelbagai jenis data. |
|
2. Juga boleh digunakan dalam node.js dalam pelayan (server) dan dalam pelayar (browser) untuk atur cara klien. |
|
3. Fungsi-fungsi dalam math.js: |
|