Bab 5.

Cascading Style Sheet (CSS)

Tujuan
1. Mahasiswa Memahami penggunaan CSS dalam HTML
2. Mahasiswa Mampu mengaplikasikan dan membuat CSS

Overview
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan
untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS
diperkenalkan untuk pengembangan website kurang lebih pada tahun 1996. Nama
CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan
secara berurutan, yang kemudian akan membentuk hubungan parent-child pada
setiap style.
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web
yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide Web
Consortium (W3C). CSS memungkinkan halaman yang sama untuk ditampilkan
dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui
layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca
layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga
dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna
dengan menggunakan CSS.
Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser
terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan
standar CSS.
CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang
digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa
markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan
secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur
tampilan / desain suatu halaman HTML.
Pengertian CSS
 CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi
yang menentukan bagiamana suatu text akan tertampil di halaman web.
 Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf)
, colors (warna), margins (ukuran), latar belakang (background), ukuran font
(font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts
(huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.
 Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda
pada layers (lapisan) yang berbeda.
 CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu
dokumen akan disajikan.
 Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan
style sheet.
 Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada
setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah
style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat
kembali menggunakannya bila diperlukan.

Keuntungan Menggunakan CSS

 CSS memberikan keseragaman pada halaman web.
 Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat
menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman
web. Anda hanya perlu membuat perubahan dalam style sheet.
 CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
 Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen. \
 CSS membantu Anda memelihara halaman web Anda dengan mudah dan
efektif.
5.1 Pengertian Selector, Property dan Value pada CSS

Gambar 5.1 Selector, Property dan Value pada CSS

5.1.1 Selector
Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML,
CSS membutuhkan suatu cara untuk „mengaitkan‟ atau menghubungkan kode CSS
dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam
CSS.
Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin
dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari
seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link
yang ada di dalam tag <p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i,
h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya.

5.1.2 Property
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah
tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan
hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai
untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property
adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text,
warna text, jenis fontnya, dll.
5.1.3 Value
Value CSS adalah nilai dari property. Misalkan untuk property background-
color yang digunakan untuk mengubah warna latar belakang dari sebuah
selector, value atau nilainya dapat berupa red, blue, black, atau white.

5.2 Penempatan Sebuah CSS

Ada tiga cara untuk menempatkan sebuah CSS ke dalam sebuah halaman web,
ketiga cara ini dapat digunakan untuk memformat halaman web dengan style yang
diingkan.

5.2.1 Inline Style Sheet

CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web
yang akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan
dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur
style-nya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web,
semua tag harus diformat secara independen.
Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag
HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website
dapat mengimplementasikan style yang berbeda pada tag tersebut. Ketika
menggunakan inline style sheet untuk memanipulasi halaman web, pembuat web
hanya dapat menggunakan satu property saja pada tag HTML yang akan
dimanipulasi.

5.2.2 Embedded Style Sheet

Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi
embedded style sheet juga menjadi satu dengan halaman web yang akan diatur
style-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag
<head>) dengan menambahkan tag <style type=”text/css”>.
Dengan menggunakan model penempatan CSS sebagai embedded style sheet,
pembuat web cukup satu kali mendefinisikan style yang akan dikenakan pada tag –
tag yang berada dalam halaman web. Jika ada sebuah tag yang digunakan secara
berulang, secara otomatis akan mempunya style yang sama, berbeda dengan model
inline style sheet yang mengharuskan pembuat web menentukan style pada tag –
tag yang digunakan berulang kali dan memungkinkan untuk menentukan style yang
berbeda pada tag tersebut.

5.2.3 Linked Style Sheet

Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked
style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai
format style yang terpisah dari halaman web. File ini nantinya akan dipanggil oleh
halaman web yang membutuhkan pengaturan style.
Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika
ada pengubahan style, pembuat website tidak perlu merubah di semua halaman
web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file
CSS.

Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika
ada pengubahan style, pembuat website tidak perlu merubah di semua halaman
web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file
CSS.

5.3 Penggunaan CSS Pada Halaman Web

Kita dapat menggunakan salah satu dari ketiga penempatan CSS yang ada, namun
tidak menutup kemungkinan juga kita dapat menggunakan dua atau ketiganya
dalam sebuah website jika memang diperlukan.

5.3.1 Pengolahan Font

Salah satu tag HTML yang biasa digunakan untuk memanipulasi font adalah paragraf
(<p>). Beberapa tag yang lain juga memungkinkan untuk dimanipulasi atau
ditambahkan CSS untuk memanipulasi font jika pada tag HTML tersebut akan berisi
tulisan / text, seperti : <th><td>, <a>, <li>, <h1>…<h6>, dan tag – tag lain yang
memungkinkan berisi text.
Bentuk manipulasi font yang dimungkinkan dapat dilihat pada tabel di bawah ini :

Tabel 5.1 Font Properties

5.3.2 Memanipulasi Color dan Background
Bentuk lain dari memanipulasi halaman web adalah dengan menentukan warna pada
tulisan, menambahkan warna background, atau dengan menambahkan gambar
sebagai background.
Beberapa property yang bisa digunakan untuk memanipulasi beberapa hal di atas,
ditampilkan pada tabel di bawah ini.

Tabel 5.1 Properties Warna dan Gambar latar

5.4 Mengenal Jenis-jenis Selector Dasar CSS
Selector adalah sebuah pola (pattern) yang digunakan untuk „mencari‟ suatu tag
di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p,
atau mencari seluruh tag h1 yang memiliki atribut class=judul.

5.4.1 Universal Selector

Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini
bertujuan untuk „mencari‟ semua tag yang ada.
Contoh Universal Selector CSS:

* {
color: blue;
background-color: white;}
}
Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan
background berwarna putih.

5.4.2 Element Type Selector

Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya
merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector,
dan seluruh tag tersebut akan ditangkap oleh selector ini.
Contoh Element Type Selector CSS:
h1 {
text-decoration: underline;
}
p {
font-size:14px;
}
Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah, dan
seluruh tag <p>akan berukuran 14pixel.

Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam
tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai
ditemui tag penutup </p>.
5.4.3 Class Selector
Class Selector merupakan salah satu selector yang paling umum dan paling sering
digunakan. Class Selector akan „mencari‟ seluruh tag yang memiliki
atribut class dengan nilai yang sesuai.
Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai
atribut class. Contohnya:

<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>

<h1 class=”judul”>Judul Artikel</h1>
<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>

Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan
nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh
lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.
Contohnya dalam baris terakhir pada contoh diatas,tag h2 memiliki
atribut class=”judul penting berwarna”. Tag ini teridiri dari 3 class,
yaitu judul, penting, dan class berwarna.
Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:
.paragraf_pertama {
color: red;
}
.judul {
font-size:20px;
}
.penting {
color:red;
font-size: 1em;
}
Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda
titik sebelum nama dari class.
Untuk contoh kita, seluruh class yang memiliki nilai “paragraf_pertama”, warna text
akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.
5.4.4 ID Selector
ID Selector bersama-sama dengan class selector merupakan selector paling umum
dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID
selector hampir sama dengan class selector, dengan perbedaan jika pada Class
Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita
menggunakan atribut id.
Contoh penggunaan atribut id pada tag HTML
<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>

<h1 id=”judul_utama”>Judul Artikel</h1>

<h2 id=”sub_judul”>Sub Judul Artikel<h2>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-
masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang
digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa
digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.
Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:
#paragraf_ pembuka {
color: red;
}
#judul utama {
font-size:20px
}
Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita
mencari tag yang memiliki id tersebut.

5.4.5 Attribute Selector

Selector ini sedikit lebih advanced dibandingkan dengan selector-selector
sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki
atribut yang dituliskan.
Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}
Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada
diantara tanda kurung siku “[” dan “]”. [href] akan cocok dengan seluruh tag yang
memiliki atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>).
Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut
type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form.
Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut
selector ini tidak terlalu sering digunakan.
LATIHAN

1. Penggunaan Inline Style Sheet

Simpan dengan nama latihan24.html

Gambar 5.2 Contoh Skrip CSS Inline Style Sheet

2. Penggunaan Embedded Style Sheet. Simpan dengan nama latihan25.html

 Gambar 5.3 Contoh Skrip CSS Embedded Style Sheet

3. Penggunaan Linked Style Sheet. Simpan File Pertama dengan nama style
definition.css:
 Gambar 5.4 Contoh Skrip Linked Style Sheet

Kemudian buat file kedua dengan nama latihan26.html

Gambar 5.5 Contoh Skrip Linked Style Sheet

4. Pemberian property multi kepada selector. Simpan dengan nama

latihan27.html
 Gambar 5.6 Contoh Skrip dalam pemberian property multi kepada selector

5. Manupulasi font dengan menggunakan selector bebas, class, dan ID. Simpan
dengan nama latihan28.html
Gambar 5.7 Contoh Hasil Skrip penggunaan multi kepada selector bebas, class dan
ID
 Bab 7. Pengenalan Javascript

Tujuan :
1. Mahasiswa mampu menjelaskan konsep dasar bahasa pemrograman
JavaScript
2. Mahasiswa mampu menjelaskan cara kerja JavaScript pada system web
3. Mahasiswa mengetahui dan menjelaskan konsep pemrograman dinamis pada
JavaScript
4. Mampu mengetahui perintah-perintah dasar JavaScript.

Overview
Javascript merupakan bagian dari 3 teknologi penting yang harus dikuasai
programmer web, yakni HTML untuk konten (isi dari website), CSS untuk tampilan
(presentation), dan JavaScript untuk interaksi (behavior). Hampir seluruh website
modern saat ini menggunakan JavaScript untuk membuat berbagai aplikasi yang
dapat berinteraksi dengan user, seperti validasi form HTML, games, kalkulator,
fitur chatting, dll.

Dalam mempelajari JavaScript, sebaiknya telah menguasai dasar-dasar HTML, dan

bisa membuat halaman web sederhana menggunakan HTML. Pengetahuan
tentang CSS dan PHP juga akan membantu, walaupun tidak diharuskan.

7.1 Pengertian JavaScript

JavaScript adalah bahasa pemograman yang digunakan untuk membuat interaksi

atau menambah fitur web dinamis kedalam sebuah web.
JavaScript adalah bahasa pemograman web yang bersifat Client Side Programming
Language. Client Side Programming Language adalah tipe bahasa pemograman
yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk
kepada web browser seperti Google Chrome dan Mozilla Firefox.
Jenis bahasa pemograman Client Side berbeda dengan bahasa pemograman Server
Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi
server.
Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor,
dan web browser. JavaScript memiliki fitur: high-level programming language,
client-side, loosely tiped, dan berorientasi objek.

7.2 Fungsi JavaScript Dalam Pemograman Web

JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara
user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan
di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web
server.

Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web,
lalu men-klik tombol submit, menunggu sekitar 20 detik untuk website memproses
isian form tersebut, dan mendapati halaman yang menyatakan bahwa terdapat
kolom form yang masih belum diisi.

Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk

mengecek apakah seluruh form telah terisi atau tidak, bisa dipindahkan dari web
server ke dalam web browser.

Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi

form, namun untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk
mempercantik halaman web, fitur chatting, efek-efek modern, games, semuanya
bisa dibuat menggunakan JavaScript.

Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web browser
yang digunakan oleh pengunjung situs, user sepenuhnya dapat mengontrol eksekusi
JavaScript. Hampir semua web browser menyediakan fasilitas untuk mematikan
JavaScript, atau bahkan mengubah kode JavaScript yang ada. Sehingga kita tidak
bisa bergantung sepenuhnya kepada JavaScript.
7.3 Cara Menjalankan Kode Program JavaScript

Cara penulisan JavaScript mirip dengan penulisan bahasa pemograman web lainnya
seperti PHP dan CSS, yakni dengan menyisipkan kode JavaScript di dalam HTML.

7.4 Cara Memasukkan (input) kode JavaScript ke dalam HTML

JavaScript termasuk jenis bahasa script, yang digunakan di dalam file HTML.
Untuk menginput, atau memasukkan kode JavaScript ke dalam HTML, JavaScript
menyediakan 4 alternatif, yaitu :

7.4.1 Menggunakan tag <script> (internal JavaScript)

Cara pertama untuk menginput kode JavaScript ke dalam halaman HTML adalah
dengan menggunakan tag <script> secara internal. Internal disini berarti bahwa
kode JavaScript ditulis pada halaman yang sama dengan HTML, atau di dalam satu
file HTML.
Cara ini merupakan cara yang paling sering digunakan, jika kode JavaScript tidak
begitu panjang, dan hanya digunakan di 1 halaman saja. Kode JavaScript yang akan
diinput diletakkan diantara tag pembuka <script> dan tag penutup </script>

7.4.2 Menggunakan tag <script scr=””> (external JavaScript)

Cara atau metode kedua untuk menginput kode JavaScript ke dalam
halaman HTML adalah dengan memindahkan kode JavaScript ke dalam sebuah file
terpisah, lalu „memanggilnya‟ dari HTML. Cara ini sangat disarankan karena akan
memberikan banyak keuntungan dan fleksibilitas dalam membuat
program JavaScript.
Sebuah file JavaScript disimpan dalam ekstensi .js, seperti: kode.js,
register.js, atau kodeku.js. Dari halaman HTML, kita memanggilnya
menggunakan tag <script> dengan atribut src. Atribut src berisi alamat dari
file javascript tersebut
7.4.3 Menggunakan Event Handler (Inline JavaScript)
Cara ketiga untuk menjalankan JavaScript adalah dengan memanggilnya
menggunakan Event Handler dari dalam tag HTML. secara sederhananya, event
handler adalah pemanggilan kode javascript ketika „sesuatu‟ terjadi dalam tag
HTML.
Sesuatu disini maksudnya ketika sebuah element dalam HTML di klik, di klik kanan,
di arahkanmouse, dan lain-lain. Event handler di dalam JavaScript ditulis dengan
penambahan kata on. Sehingga jika sebuah tombol di-klik, maka disebut
sebagai onclick, jika mouse berada diatas element disebut sebagai onmouseover,
dan lain-lain.
Event yang disediakan JavaScript terbagai menjadi 2 (dua) jenis, yaitu event sistem
dan event pengguna. Event sistem adalah event yang selalu ada dan disediakan oleh
JavaScript serta sangat terkait dengan sistem dimana halaman web ditampilkan.
Sedangkan event pengguna adalah event yang hanya tersedia relatif terhadap
konteks elemet halaman web apa yang diacu oleh pengguna. Berikut dibawah ini
adalah event system
Tabel 7.1 Event System dalam JavaScript
Event Keterangan
Event ini dibangkitkan ketika terjadi kesalahan. Event ini dimiliki oleh
onError
objek Window dan Image
Event ini dibangkitkan ketika suatu objek selesai ditampilkan pada
onLoad halaman web. Objek yang dimaksud pada keterangan ini adalah objek
Window, Frame dan Image
Event ini dibangkitkan ketika suatu objek telah dikeluarkan dari ruang
onUnload memori, atau telah selesai digunakan. Objek ini adalah objek Window,
Frame dan Image

Tabel 7.2 List event pengguna beserta keterangannya

Event Keterangan
Event yang dimiliki oleh objek image ini akan dibangkitkan ketika
onAbort sebuah gambar dihentikan proses pemunculannya yang
dimungkinkan akibat penekanan tombol stop pada browser
Event ini dibangkitkan ketika sebuah element (dalam hal ini adalah
onBlur element window, frame, select, text, dan textarea) kehilangan
focusnya
Event ini dibangkitkan ketika sebuah element (dalam hal ini adalah
onChange element select, text dan textarea) telah diubah nilainya sebelum
element tersebut kehilangan focusnya
 Event ini dibangkitkan ketika terjadi aksi klik (dilakukan oleh
pengguna) terhadap element, dimana element yang dimaksud
onClick adalah semua element dari form yang dapat diklik seperti
element button (tombol). Aksi klik yang dimaksud adalah adanya
penekanan tombol klik kir mouse terhadap suatu element
Event ini terbangkitkan ketika terjadi aksi klik kanan dari tombol
onContextMenu
mouse terhadap suatu element
Hampir sama dengan event onClick, namun akan dibangkitkan
onDblClick
ketika terjadi aksi klik ganda terhadap suatu element
Event ini adalah kebalikan dari event onBlur, dimana akan
dibangkitkan ketika suatu element dikenai focus. Element-element
onFocus
yang dimaksud adalah element window, frame, select, text dan
textarea
Event ini dibangkitkan ketika terjadi penekanan terhadap tombol
F1, yang umumnya digunakan berbagai aplikasi sebagai tombol
shortcut untuk menampilkan fasilitas bantuan (help) . Anda dapat
onHelp
menggunakan event ini untuk mengalihkan fitur help milik browser
menjadi fitur help yang Anda buat sendiri untuk halaman web
Anda.
Event ini dibangkitkan ketika terjadi penekanan ke bawah tombol
onKeydown
keyboard
Event ini dibangkitkan ketika terjadi aksi penekanan tombol
keyboard. Aksi penekanan disini adalah sebuah aksi lengkap
onKeypress
penekanan tombol keyboard, mulai dari memencet tombol
keyboard tersebut hingga melepaskannya
Event ini dibangkitkan ketika tombol keyboard yang awalnya
onKeyup
ditekan lalu dilepas, ketika tombol dilepas event ini bangkit .
onMousedown Event ini dibangkitkan, ketika tombol mouse ditekan ke bawah
Event ini dibangkitkan ketika mouse digerakkan (panah mouse
onMousemove
berubah posisinya)
Event ini dibangkitkan ketika panah mouse kelaur dari daerah
onMouseout lingkupan suatu element, yaitu element hyperlink dan element
area.
Event ini dibangkitkan ketika panah mouse berada diatas element
onMouseover
, yaitu element hyperlink dan element area .
Event yang dimiliki secara khusus oleh objek form ini akan
onReset dibangkitkan ketika terjadi penekanan terhadap tombol reset yang
dimiliki form yang bersangkutan
Event ini dibangkitkan ketika jendela browser diubah ukurannya,
onResize
baik diperbesar maupun diperkecil
Event ini dibangkitkan ketika terjadi pemilihan teks pada lement
onSelect
text dan textarea dengan cara memberinya highlight (diblok)
Event ini dibangkitkan ketika pengguna melakukan penekanan
onStop
terhadap tombol stop dari browsernya
Event ini dibangkitkan setelah terjadi penekanan tombol submit
onSubmit
yang dimiliki sebuah form
7.4.4 Menggunakan URL (href:=”javascript:”)
Cara terakhir (dan juga paling jarang digunakan saat ini) adalah dengan
menyisipkan JavaScript ke dalam alamat href dari tag HTML. Cara ini disebut juga
dengan protocol javascript. Disebut demikian, karena kita mengganti alamat link
dari yang biasa menggunakan protocol http//: menjadi javascript.
Dari ke-4 cara menginput kode JavaScript, memisahkan kode JavaScript kedalam
sebuah file tersendiri (menggunakan metode <script src=””>) adalah yang paling
disarankan. Beberapa keuntungan menggunakan metoda <script src> bila
dibandingkan dengan moteda cara memasukkan JavaScript lainnya adalah:
 Menyederhanakan halaman HTML dengan memindahkan seluruh
kode JavaScript, sehingga halaman HTML hanya berisi konten saja.
 Sebuah file JavaScript external bisa digunakan untuk beberapa halaman
HTML, sehingga jika diperlukan perubahan, kita hanya perlu mengedit sebuah
file daripada mengubah secara satu persatu halaman HTML
tempat JavaScript ditulis secara internal.
 Jika file JavaScript external digunakan oleh beberapa halaman, file tersebut
hanya perlu didownload oleh web browser pada saat pertama kali saja. Pada
saat loading halaman lainnya, web browser cukup mengambilnya
dari browser cache, sehingga mempercepat loading halaman.
PENUGASAN
1. Menjalankan JavaScript
Silahkan buka aplikasi text editor, lalu ketikkan kode berikut:
simpan dengan nama JS_1.html

Gambar 7.1 Kode JavaScript di dalam HTML

Gambar 7.2 Hasil Running Script dari kode JavaScript dalam HTML

2. Internal Javascript
simpan dengan nama JS_2.html
 Gambar 7.3 Kode Program HTML menggunakan internal JavaScript

Gambar 7.4 Hasil Running Script menggunakan internal JavaScript

3. External JavaScript
Buat Script terlebih JavaScript terlebih dahulu dan simpan dengan nama
kode_javascript.js

Kemudian buat script html seperti gambar di bawah ini

Simpan dengan nama JS_3.html
 Gambar 7.5 Kode Program HTML menggunakan eksternal JavaScript

Gambar 7.6 Hasil Running Script menggunakan eksternal JavaScript

4. Inline JavaScript
Simpan dengan nama JS_4.html

Gambar 7.7 Kode Program HTML menggunakan inline JavaScript

 Gambar 7.8 Hasil running Script menggunakan inline JavaScript

5. JavaScript Menggunakan URL

Simpan dengan nama JS_5.html

Gambar 7.9 Kode Program HTML menggunakan URL JavaScript

Gambar 7.10 Hasil Running Script menggunakan URL JavaScript