Seperti dijanjikan minggu lepas, hari ni aku nak cerita pasal Cascading Style Sheet (CSS) dan JavaScript (JS). Ada sesetengah orang panggil 3 serangkai, iaitu HTML + CSS + JS. Untuk tujuan pendedahan dan pembelajaran kepada rakan2 yg masih baru dalam dunia web-based application and solution development, aku rasa lebih senang diasingkan 3 benda tu, biar kenal benda yg paling asas dulu, iaitu HTML, then baru kenal CSS dan JS. Kenapa? Sebabnya CSS dan JS hanyalah pembantu kepada HTML untuk menjadikan sesebuah web-based environment tu lebih senang digunakan. Kalau tak gunakan dua benda ni pon tak menjadi kesalahan, masih boleh communicate ngan database untuk Create, Read, Update, dan Delete (CRUD) data, cuma bila ada CSS dan JS, user interface (UI) untuk system tu akan nampak lebih cantik dan interaktif atau istilah lain ialah mesra pengguna (user-friendly). Antara sebab lain adalah untuk wujudkan ciri2 user experience (UX) yang lebih baik, iaitu user akan rasa senang nak gunakan system tu. Contohnya menu dan font2 kat system tu nampak jelas, sesuai dengan background colour.
Nak senang faham lagi, CSS ni umpama lipstick, maskara, dan alat2 solek bagi wanita. Gunanya adalah untuk make-up UI, contohnya macam tukar background, font colour, font size, dan kebanyakan style. JS pulak umpama remote control untuk TV yg memudahkan kita tukar channel dan ubah volume. Gunanya adalah untuk simplify atau memudahcara penyampaian sesuatu maklumat kepada user, contohnya macam nak nak paparkan error message bila user click button Submit tapi lupa nak isi ruangan wajib (compulsory) sebelum sesebuah online form dihantar (submitted) atau sesetengah orang panggil form field validation. Untuk tujuan pembelajaran ni kalau boleh jangan lagi libatkan Ajax, jQuery, dan minification sebab bimbang nanti ada yg hanya tahu include file jQuery je, tapi bila bos suruh buat customization, terus blur sebab tak tahu asas / native JS. Bila dah faham CSS dan JS barulah beralih ke Ajax, jQuery, Vue.js dan macam2 JS lagi. Kena faham jugak yg CSS dan JS ni tak perlukan webserver macam Apache atau Nginx untuk berfungsi, hanya save macam biasa kat laptop then view guna web browser.
Macam mana nak guna CSS dan JS ni dalam HTML? Aku biasa gunakan 4 cara, iaitu;
1) Taip macam biasa dalam fail HTML : Internal.
2) Include external file guna HTML tags : External.
3) Guna attribute ‘style’ untuk CSS, dan ‘on action’ macam onClick untuk JS pada HTML element : Inline.
4) Mix dengan PHP + MySQL : Hybrid.
Untuk tujuan pendedahan secara asas ni, aku nak share pasal cara no. 2 dan 3 sebab aku fikir cara ni adalah lebih senang untuk kita nak faham. Tambahan pulak, saiz file kita akan jadi lebih kecik berbanding cara no. 1, dan senang nak manage. Harap2 nanti kita akan nampak lebih jelas “Ini adalah HTML, ini adalah CSS, dan ini adalah JS”. Cara no. 4 tu aku anggap sebagai cara yg agak complex bagi orang2 baru dan memang aku tak akan ceritakan kat sini.
Jom practise, buat 1 folder kat Desktop ngan nama BelajarHTMLCSSJS, kemudian buat 3 file dalam tu;
1) index.html
2) file_css.css
3) file_js.js
Source code kali ni aku share dalam bentuk gambar sebab aku sayang korang, aku nak korang membiasakan diri dengan syntax dan HTML tags, dan aku nak korang tahu apa code yg korang taip tu. Aku taknak korang belajar secara copy and paste. Aku bagi korang pancing then pandai2lah korang usaha dapatkan ikan.
Bukak folder BelajarHTMLCSSJS tadi, right click kat file index.html tu cari ‘Open with Google Chrome’ atau apa2 web browser yg kita pakai. So kita akan nampak sebuah UI hasil kombinasi HTML, CSS, dan JS. Cara no. 2 (External) adalah aku include CSS file seperti line 4 dalam index.html tu, dan include JS file seperti line 5. Cara no. 3 (Inline) tu adalah aku letak style=”background…” untuk CSS seperti line 9 dalam index.html tu, dan untuk JS aku letak onClick=”javascript:…” seperti line 11 tu. Maksudnya korang boleh guna mana2 cara sekalipon asalkan UI dan UX untuk sesebuah system tu mampu memudahkan user.
Sememangnya apa yg aku tulis ni hanyalah sekadar pengenalan yg sangat asas untuk CSS dan JS. Aku cadangkan untuk korang belajar lebih lanjut di w3schools CSS untuk CSS, dan w3schools JS untuk JS. Kalau belajar kat situ pon masih kurang jelas, mungkin kena cari Guru. Bagi yg tengah buat final year project (FYP) tu, harap jangan tunggu last minute baru terkejar2 nak belajar. Belajar awal2 dan jadikan FYP sebagai 1 tugasan awal untuk bekerja nanti. Yg penting, jangan upah orang lain buatkan, cuba belajar dan buat sendiri. InshaAllah next week aku ceritakan pasal benda lain pulak. Aku akan tengok topik2 semasa dan pilih untuk the next POST.
Share the post "Belajar CSS dan JS (asas)"
&description=){kind=link}