Scribd
Unggah
50 tayangan43 halaman

CSS - JavaScript

Bab ini membahas penggunaan CSS untuk mengatur tampilan halaman web. CSS digunakan untuk mengatur gaya teks, multimedia, tabel, formulir, dan tata letak dengan mendefinisikan properti, nilai, dan selektor. Metode pengaplikasian CSS mencakup inline style sheet, internal style sheet, dan external style sheet. Properti untuk mengatur teks meliputi font, ukuran, warna, jarak baris, dan indentasi.

Diunggah oleh

Oktavio Prana Jaya
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
50 tayangan43 halaman

CSS - JavaScript

Bab ini membahas penggunaan CSS untuk mengatur tampilan halaman web. CSS digunakan untuk mengatur gaya teks, multimedia, tabel, formulir, dan tata letak dengan mendefinisikan properti, nilai, dan selektor. Metode pengaplikasian CSS mencakup inline style sheet, internal style sheet, dan external style sheet. Properti untuk mengatur teks meliputi font, ukuran, warna, jarak baris, dan indentasi.

Diunggah oleh

Oktavio Prana Jaya
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 43

C2-

REKAYASA PERANGKAT LUNAK

KEGIATAN BELAJAR 7

CSS: STYLE HALAMAN WEB

A. Tujuan Pembelajaran

Setelah mempelajari bab ini, siswa diharapkan dapat:

1. Menjelaskan cara kerja dan anatomi cascading style sheet pada halaman
web.
2. Menjelaskan style teks pada halaman web.
3. Menjelaskan style multimedia pada halaman web.
4. Menjelaskan style tabel pada halaman web.
5. Menjelaskan style formulir pada halaman web.
6. Menjelaskan style layout pada halaman web.
7. Menyampaikan cara kerja dan anatomi cascading style sheet pada halaman
web.
8. Membuat style teks pada halaman web.
9. Membuat style multimedia pada halaman web.
10. Membuat style tabel pada halaman web.
11. Membuat style formulir pada halaman web.
12. Membuat style layout pada halaman web.

1 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

B. Deskripsi Materi

Sebelum mempelajari materi tentang Style Halaman Web,


perhatikan gambar berikut dan jawab pertanyaannya!

Gambar 7.1 Tampilan Halaman Web CSS Zen Garden

Perta nyaan

1) Bagaimana tampilan halaman web di atas?

2) Menurut pendapatmu, dapatkah halaman web tersebut dibuat hanya


dengan HTML saja?

1. Apa itu CSS?


CSS atau Cascading Style Sheet adalah dokumen web yang memiliki fungsi
mengatur tampilan dokumen web lain, yaitu HTML. Beberapa contoh
pemanfaatan CSS pada HTML adalah untuk mengatur warna latar belakang,
gaya huruf, jarak antar elemen, dan masih banyak lagi.
CSS terdiri atas kumpulan kode-kode yang keberadaannya tidak
menggantikan HTML melainkan sebagai pelengkap agar tampilan dokumen
HTML menjadi lebih indah dan dinamis. Berikut ini adalah contoh dokumen CSS.

2 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 7.2 Contoh Dokumen CSS

2. Metode Pengaplikasian CSS


Pada dasarnya, terdapat tiga macam metode pengaplikasian CSS pada
HTML, yaitu inline style sheet, internal style sheet, dan external style sheet.

a. Inline style sheet


Pada metode inline style sheet, kode CSS disisipkan secara langsung
dengan menambahkan atribut style pada tag HTML yang akan diatur
tampilannya. Berikut ini adalah format penulisannya:

Gambar 7.3 Inline Style Sheet

Karena kode CSS hanya didefinisikan pada tag HTML yang


bersangkutan, maka efeknya tidak akan mengenai elemen dari tag-tag
lain.Penjelasan mengenai property dan value akan diuraikan nanti.

b. Internal style sheet


Pada metode ini, kode CSS disisipkan dalam dokumen HTML sebagai
elemen dari tag <style> yang ditambahkan di dalam tag <head>. Di dalam
tag <head>, tag <style> boleh ditambahkan sebelum atau sesudah tag
<link>yang digunakan untuk menambahkan judul bar halaman browser.
Berikut ini adalah format penulisannya.

3 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 7.4 Internal Style Sheet

Dengan metode internal style sheet, kita dapat mengatur tampilan


beberapa komponen HTML sekaligus yang ditunjuk oleh selector yang sama.
Karena disisipkan secara langsung pada dokumen HTML, kode CSS yang
ditambahkan hanya berlaku untuk komponen-komponen pada dokumen
yang bersangkutan.

c. External style sheet


Pada metode external style sheet, kode CSS tidak disisipkan pada
dokumen HTML yang bersangkutan melainkan terpisah pada dokumen lain
yang disimpan dengan ekstensi *.css. Agar dapat digunakan, perlu
ditambahkan tag <link> yang menghubungkan antara dokumen CSS dengan
dokumen HTML yang akan diatur tampilannya.Tag <link> juga ditambahkan
di dalam tag <head>, seperti berikut.

Gambar 7.5 Menambahkan tag <link>

Seperti yang ditunjukkan oleh gambar, terdapat dua atribut yang


ditambahkan di dalam tag <link> yaitu href dan rel. Atribut href berfungsi
untuk menambahkan lokasi serta nama dokumen CSS yang digunakan,
sedangkan atribut rel berfungsi untuk menentukan “relationship” antara
dokumen HTML dengan dokumen yang dihubungkan.
Jika dokumen CSS berada dalam satu lokasi yang sama dengan
dokumen HTML, maka cukup menambahkan nama dokumen CSS tersebut
sebagai value dari href. Selain itu, untuk dokumen CSS, value dari atribut rel
yang perlu ditambahkan adalah “stylesheet”. Jika kedua atribut ini tidak
ditambahkan, dokumen CSS tidak dapat digunakan.
Dengan metode ini, kode CSS yang kita buat pada dokumen terpisah
dapat digunakan untuk lebih dari satu dokumen HTML.

4 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

3. Property, Value, dan Selector


Pada subbab sebelumnya, telah disinggung mengenai property, value, dan
selector yang saling berkaitan dan menjadi bagian penting dari kode CSS.
Berikut ini adalah penjelasan mengenai property, value, dan selector.

a. Property
Property adalah parameter dari komponen HTML yang akan diubah.
Misalnya, font-family, font-size, dan color adalah property dari komponen
HTML berupa teks yang masing-masing berfungsi untuk mengubah jenis,
ukuran, dan warna huruf.

b. Value
Value merupakan nilai dari property yang ditambahkan untuk mengatur
komponen HTML. Misal, property font-family digunakan untuk mengubah
gaya huruf teks sehingga value yang ditambahkan adalah nama-nama gaya
huruf seperti Arial, Tahoma, cursive, Verdana, dan lain-lain.

c. Selector
Selector ditambahkan ketika kita mengaplikasikan CSS menggunakan
metode inline style sheet dan external style sheet. Hal ini karena selector
berfungsi sebagai penunjuk dari komponen HTML yang akan diatur
tampilannya. Terdapat lebih dari 30 macam jenis selector yang dapat
digunakan untuk mengatur tampilan dokumen HTML dengan fungsi yang
berbeda-beda. Jenis-jenis selector tersebut akan kita pelajari pada subbab
selanjutnya. Berikut ini adalah contoh selector dan penggunaanya pada
dokumen web.

Gambar 7.6 Penggunaan selector, property, dan value

Berdasarkan Gambar 2.5, h1 merupakan jenis selector yang menunjuk


ke komponen h1, font-family dan text-align merupakan property, sedangkan
cursive dan center adalah value dari kedua property tersebut. Selain itu, hal
yang perlu diperhatikan adalah setiap property dan value ditambahkan dalam
tanda kurung ({}) dan disisipkan tanda semicolon (;) di akhir setiap value
yang ditambahkan. Jenis-jenis selector lain akan dijelaskan pada subbab-
subbab selanjutnya.

5 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

4. Style pada Teks


Sebelum HTML5, terdapat banyak tag dan atribut yang digunakan untuk
mengatur tampilan teks. Beberapa di antaranya adalah tag <center>, <font>
atribut face, atribut align, dan lain-lain. Setelah HTML5 dikembangkan, tag dan
atribut tersebut tidak lagi berlaku dan sebagai gantinya digunakan CSS untuk
mengatur tampilan teks dan paragraf.
Untuk mengatur tampilan teks menggunakan CSS, diperlukan berbagai
macam property dengan fungsi yang berbeda-beda. Berikut ini adalah
macammacam property pemformatan teks, value, dan fungsinya.

Tabel 7.1 Property untuk Pengaturan Tampilan Teks


Property Fungsi Value
font-family Mengubah gaya huruf teks Arial, sans-serif,cursive, dll
font-size Mengubah ukuran teks 14px, 20px, 1em, dll.
text-alignment Mengubah rata teks Center, right, left, justice
color Mengubah warna teks Red, green, blue, #FFFFFF, dll.
line-height Mengatur jarak antar baris teks 0.5, 0.8, 1.5, 2, dll.
text-indent Mengatur jarak indent baris 10px, 20px, dll.
pertama suatu teks

Pada Latihan 1, metode yang akan digunakan adalah metode internal style
sheet, di mana kode CSS disisipkan pada tag <style>. Oleh karena itu, diperlukan
selector untuk menunjuk ke komponen yang akan diatur tampilannya. Jenis
selector yang akan digunakan pada latihan ini adalah tag selector.
Tag selector menggunakan nama tag dari komponen yang akan diatur
tampilannya. Misal, jika elemen h1 akan dimodifikasi menjadi berwarna merah,
maka kode CSS yang perlu ditambahkan adalah sebagai berikut.

h1{
color:red;
}

Untuk lebih jelasnya, kerjakan Latihan 1

Latihan 1
1. Buka aplikasi text editor
2. Buat struktur dasar HTML
3. Di dalam <body>, tambahkan listing kode berikut.

6 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

4. Untuk komponen h1, pengaturan yang akan dilakukan di antaranya:


Rata teks: center
Gaya huruf: arial Warna: midnightblue
Listing kode yang perlu ditambahkan adalah sebagai berikut.

5. Untuk komponen h3, pengaturan yang akan dilakukan di antaranya:


Gaya huruf: verdana
Warna: royalblue
Listing kode yang perlu ditambahkan adalah sebagai berikut.

6. Untuk komponen p, pengaturan yang akan dilakukan di antaranya:


Indent teks: 30px
Jarak antar baris: 1.5
Ukuran huruf: 16px
Warna: cornflowerblue
Gaya huruf: Tahoma
Listing kode yang perlu ditambahkan adalah sebagai berikut.

7 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

7. Simpan dengan nama latihan1.html


8. Jika dieksekusi pada browser, maka hasilnya adalah sebagai berikut.

5. Style pada Multimedia


CSS dapat mengatur tampilan berbagai macam komponen halaman web,
termasuk multimedia seperti gambar atau video.
Pada Latihan 2, sebuah gambar akan dimodifikasi agar keempat sudutnya
melengkung dan dan terletak tepat di tengah-tengah halaman web.

Latihan 2
1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML
3. Di dalam <body>, sisipkan perintah untuk menambah gambar

4. Jika ukuran gambar terlalu besar, lebar dan tingginya dapat diatur dengan
CSS, seperti berikut.

8 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

5. Agar sudut-sudut gambar memiliki kelengkungan, ditambahkan property


border-radius. Nilai dari property ini adalah angka yang mewakili ukuran
kelengkungan yang ingin dicapai. Semakin besar angka yang dimasukkan,
semakin melengkung sudut-sudut gambar yang dihasilkan.

Jika ditampilkan pada browser, maka hasilnya:

6. Untuk memposisikan gambar di tengah-tengah halaman web, tambahkan


listing kode berikut.

Property display berfungsi untuk mengatur bagaimana sebuah elemen,


atau dalam hal ini gambar, ditampilkan. Dengan mengubah nilainya menjadi
block, gambar akan “menggunakan” space dari jendela browser secara
penuh.
Sedangkan, property margin berfungsi untuk mengatur jarak elemen
dengan elemen lain. Secara umum, terdapat empat nilai yang harus
dimasukkan, di mana masing-masing mewakili jarak dari atas, kanan, bawah,
dan kiri, secara berurutan.

7. Simpan dengan nama latihan2.html


8. Jika dieksekusi pada browser, hasilnya adalah sebagai berikut.

9 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

6. Style pada Hyperlink


Hyperlink adalah kaitan yang menjadi penghubung antar dokumen web
dalam sebuah situs web. Dengan hyperlink, pengunjung dapat menelusuri
seluruh isi atau informasi yang disediakan situs web dengan lebih mudah.
Hyperlink dibuat dengan menambahkan tag <a> dan tampilan defaultnya
pada browser adalah sebagai berikut.

Gambar 7.7 Tampilan Default Hyperlink

Gambar di atas menunjukkan tampilan default hyperlink yang belum pernah


dikunjungi user. Untuk hyperlink yang pernah dikunjungi, tampilannya secara
otomatis berubah menjadi berwarna ungu, seperti gambar berikut.

Gambar 7.8 Tampilan Default Visited Hyperlink

Bagi sebagian orang, tampilan hyperlink yang seperti ini kurang menarik.
Agar lebih menarik, tampilan hyperlink dapat dimodifikasi menggunakan CSS
dan jenis selector pseudo-class.
Pseudo-class selector adalah jenis selector yang mengarah ke “state” atau
kondisi khusus yang menimpa suatu komponen HTML. Misal, untuk hyperlink,
state atau kondisi khusus yang dimaksud adalah kondisi ketika hyperlink belum
pernah dikunjungi, pernah dikunjungi, atau “hover”. Berikut ini adalah format
penggunaan pseudo-class selector.

10 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 7.9 Format Penggunaan Pseudo-Class Selector

Pseudo-class mengacu pada state dari komponen yang ingin dimodifikasi.


Macam-macam pseudo-class yang dapat digunakan untuk memodifikasi
tampilan hyperlink diuraikan pada tabel berikut.

Tabel 7.2 Pseudo-Class Selector


Pseudo-Class Penjelasan
:link Kondisi ketika hyperlink belum pernah dikunjungi
:visited Kondisi ketika hyperlink sudah pernah dikunjungi
:hover Kondisi ketika mouse diletakkan di atas hyperlink
:active Kondisi ketika hyperlink sedang ditekan

Untuk lebih jelasnya, kerjakan Latihan 3 berikut.


1. Buka aplikasi text editor
2. Ketikkan struktur dasar HTML
3. Tambahkan listing kode berikut di dalam <body>

4. Jika dijalankan di browser, maka hyperlink ditampilkan secara default. Dengan


metode inline style sheet, tampilan hyperlink akan diubah menjadi lebih menarik
dengan memodifikasi warna teksnya.
5. Di dalam tag <head>, tambahkan pasangan tag <style> dan </style>
6. Di dalamnya, tambahkan listing kode berikut.

11 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

• Baris 7-9 merupakan listing kode yang mengatur agar teks hyperlink berwarna
“cadetblue” ketika dalam kondisi belum pernah dikunjungi.
• Baris 10-12 merupakan listing kode yang mengatur agar teks hyperlink
berwarna “darkorange” ketika dalam kondisi pernah dikunjungi
• Baris 13-15 merupakan listing kode yang mengatur agar teks hyperlink
berwarna “darkcyan” ketika dalam kondisi “hover”
• Baris 16-18 merupakan listing kode yang mengatur agar teks hyperlink
berwarna “lightgreen” ketika dalam kondisi “active”

7. Simpan dengan nama latihan3.html


8. Jika dijalankan di browser, maka hasilnya adalah sebagai berikut.

Kondisi “link” Kondisi “visited” Kondisi “hover” Kondisi “active”

7. Style pada tabel Dengan CSS, tampilan tabel yang terkesan “datar” juga dapat
dimodifikasi menjadi lebih dinamis dan menarik. Di Latihan 4, kita akan
memanfaatkan descendant selector dan pseudo-class selector untuk
mempercantik tampilan tabel.
Pada subbab sebelumnya, telah disinggung mengenai beberapa macam
pseudo-class selector, yaitu :link, :visited, :hover, dan :active. Di subbab ini,
terdapat jenis pseudo-class selector lain yang perlu diketahui, dan akan diuraikan
pada Tabel 7.3.

Tabel 7.3 Pseudo-Class Selector


Pseudo-Class Selector Penjelasan
:first-child Menunjuk ke elemen yang menjadi anak pertama
dari direct parent-nya
:last-child Menunjuk ke elemen yang menjadi anak terakhir
dari direct parent-nya
:nth-child(even) Menunjuk ke elemen yang menjadi anak bernomor
urut genap
:nth-child(odd) Menunjuk ke elemen yang menjadi anak bernomor
urut ganjil
:nth-child(n) Menunjuk ke elemen yang menjadi anak ke-n

Untuk lebih jelasnya, kerjakan Latihan 4.

Latihan 4
Di latihan ini, kita akan membuat tabel yang memiliki tampilan berbeda pada tiap
barisnya. Selain itu, warna semua kolom dalam satu baris juga akan berubah
ketika dalam kondisi “hover”. Tampilan akhirnya adalah sebagai berikut.

12 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 7.10 Styling Tabel dengan CSS

1. Buka aplikasi text editor


2. Ketikkan struktur dasar HTML
3. Tambahkan listing kode berikut untuk membuat tabel.

4. Jika dijalankan pada browser, maka hasilnya adalah sebagai berikut.

5. Untuk langkah awal memodifikasi tampilan tabel, kita akan menghilangkan


jarak antar sel dan mengubah gaya hurufnya dengan listing kode berikut.

6. Mengubah lebar semua <td> (kolom) yang menjadi first child dari <tr> dengan
listing kode berikut.

13 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

7. Mengubah lebar kolom lain dengan ukuran yang berbeda dan menambahkan
border di bagian bawah setiap kolom, seperti ditunjukkan listing kode berikut

8. Untuk kolom judul, kita akan memodifikasi semua <td> yang menjadi turunan dari
<thead>, seperti listing kode berikut.

9. Untuk kolom yang menjadi isi tabel, kita akan memodifikasi semua <tr> yang
menjadi anak bernomor urut ganjil (1 dan 3) dari <tbody>.

10. Memodifikasi semua <tr> yang menjadi anak bernomor urut genap (2 dan 4) dari
<tbody>.

11. Agar tabel lebih menarik, warna kolom dan teks di dalamnya akan kita modifikasi
supaya dapat berubah ketika dalam kondisi “hover”. Tambahkan listing kode
berikut.

12. Simpan dengan nama latihan4.html


13. Jika dijalankan pada browser, maka hasilnya adalah sebagai berikut.

14 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

C. Uji Kemampuan
1. Jelaskan pengertian dari CSS.
2. Sebut dan jelaskan tiga macam metode pengaplikasian CSS.
3. Tuliskan sintaks dasar penambahan tag link untuk menyisipkan CSS pada
dokumen HTML.
4. Perhatikan potongan kode berikut.
img {
display : block;
}
Sebutkan bagian-bagian yang merupakan property, value, dan selector.
5. Jelaskan fungsi property-property berikut untuk memformat tampilan teks.
a. font-family
b. line-height
c. color
6. Jelaskan yang dimaksud dengan tag selector.
7. Berikan contoh penggunaan tag selector pada CSS.
8. Tuliskan kode CSS yang perlu ditambahkan untuk mengubah posisi gambar di
tengah halaman.
9. Jelaskan yang dimaksud dengan pseudo-class selector.
10. Sebutkan macam-macam pseudo-class selector yang digunakan untuk
mengatur tampilan hyperlink beserta fungsinya.
11. Jelaskan fungsi dari pseudo-class selector berikut:
a. :first-child
b. :last-child
c. :nth-child(even)

15 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

KEGIATAN BELAJAR 8

JAVASCRIPT: TEKNIK PEMROGRAMAN HALAMAN WEB

A. Tujuan Pembelajaran

Setelah mempelajari bab ini, siswa diharapkan dapat:

1. Menjelaskan anatomi dan cara kerja kode javascript.


2. Menjelaskan dasar pemrograman client (variabel, tipe data, operator).
3. Menjelaskan pemrograman array dimensi 1 dan multidimensi.
4. Menjelaskan struktur kontrol percabangan pada program client.
5. Menjelaskan kontrol perulangan pada program client.
6. Menjelaskan fungsi bawaan dan buatan user pada program client.
7. Menyajikan anatomi dan cara kerja kode javascript.
8. Menyajikan dasar pemrograman client (variabel, tipe data, operator).
9. Membuat pemrograman array dimensi 1 dan multidimensi.
10. Membuat struktur kontrol percabangan pada program client.
11. Membuat kontrol perulangan pada program client.
12. Membuat fungsi bawaan dan buatan user pada program client.

B. Deskripsi Materi

Sebelum mempelajari materi tentang Teknik Pemrograman


Halaman Web, perhatikan gambar berikut dan jawab pertanyaannya!

Gambar 8.1 Tampilan Input Teks Biasa

16 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.2 Tampilan Input Teks pada Google Search

Pertanyaan
1) Apa perbedaan yang terlihat dari kedua gambar input teks di atas?

2) Mengapa pada G ambar 8.2 dapat menampilkan s aran pencarian


sedangkan Gambar 8.1 tidak?

1. Pengenalan JavaScript
JavaScript adalah bahasa yang digunakan untuk membuat dokumen HTML
menjadi lebih interaktif.Diciptakan oleh Brendan Eich di Netscape pada tahun
1995 dan awalnya bernama "LiveScript.“
JavaScript tidak ada hubungannya dengan Java. Karena pada saat itu Java
sedang populer, maka untuk kepentingan pemasaran, "LiveScript" berubah
menjadi "JavaScript."
JavaScript adalah bahasa pemrograman yang membuat website menjadi
iteraktif. JavaScript berjalan pada sisi klien dan bukan pada sisi server, seperti
bahasa pemrograman web PHP dan Ruby.

Penulisan kode JavaScript


a. Pada tag <head>
Seperti CSS, kode JavaScript juga bisa diletakkan di dalam dokumen
HTML pada tag <head></head>.

Gambar 8.3 Kode Javascript pada tag <head>

b. Pada tag <body>


Kode JavaScript juga bisa diletakkan di dalam tag <body></body>.

17 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.4 Kode Javascript pada tag <body>

c. Pada file eksternal


Kode JavaScript bisa ditulis terpisah dari dokumen HTML, diletakkan
pada file yang berekstensi .js.

Gambar 8.5 Kode Javascript pada file terpisah

2. Anatomi JavaScript
Dasar
Ada beberapa aturan umum yang harus diperhatikan dalam penggunaan
JavaScript. Penting untuk diketahui bahwa JavaScript adalah bahasa yang case-
sensitive.Variabel dengan nama “myVariable”, “myvariable”, dan “MYVariable”
akan diperlakukan secara berbeda. Dan juga, bahwa tab dan spasi akan
diabaikan, kecuali mereka bagian dari teks yang ada di dalam tanda quote.

a. Statement
Sebuah script terdiri dari serangkaian pernyataan (statement).
Pernyataan adalah suatu perintah untuk melakukan suatu tindakan. Berikut
ini adalah contoh pernyataan “Tampilkan kata “JavaScript” dalam halaman
web”:
document.write(“JavaScript”);

Dalam JavaScript, suatu pernyataan harus diakhri dengan tanda titik


koma.

b. Comment
JavaScript memungkinkan pengguna untuk meninggalkan komentar yang
akan diabaikan pada saat script dijalankan, sehingga penggunadapat
meninggalkan pengingat atau penjelasan pada seluruh kode JavaScript yang
telah dibuat. Hal ini sangat membantu jika kode ini mungkin akan diedit oleh
programmer lain di masa depan.
Ada dua metode untuk penggunaan komentar, singe-line dan multi-line.
Untuk komentar single-line, ditandai dengan dua karakter garis miring (//)
pada awal baris.

18 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.6 Komentar satu baris


Komentar multi-line menggunakan sintaks yang sama dengan yang
digunakan CSS. Semua karakter yang terdapat dalam tanda / * * / akan
diabaikan oleh browser.

Gambar 8.7 Komentar multi-line

Variabel
Variabel adalah sebuah wadah penampung informasi. Berikan sebuah nama
pada variabel dan kemudian tetapkan nilainya, yang dapat berupa angka, teks,
elemen dalam DOM, atau fungsi. Nilai dalam variabel itu sendiri dapat
dimodifikasi atau dipindahkan.
Deklarasi di bawah ini adalah contoh membuat variabel dengan nama “tel”
dengan nilai 5:
var tel = 5;

Deklarasi variabel dimulai dengan menggunakan kata kunci var. Tanda sama
dengan (=) menunjukkan bahwa kita menetapkan sebuah nilai untuk variabel
tersebut. Kemudian diakhiri dengan tanda titik koma.
Ada beberapa aturan yang harus diperhatikan dalam memberikan nama
pada suatu variabel:
1. Diawali dengan huruf, tanda garis bawah (_), atau tanda $.
2. Bisa berisi kombinasi huruf, angka, dan tanda garis bawah.
3. Jangan menggunakan tanda spasi. Bisa diganti dengan menggunakan tanda
garis bawah atau kombinasi huruf besar dan kecil. Contoh:
my_variable atau myVariable.
4. Jangan menggunakan kata kunci seperti for atau while.

a. Tipe Data
Nilai-nilai yang kita tetapkan untuk variabel memiliki tipe data yang
berbeda-beda.
1. Tak Terdefinisi (Undefined)
Jika kita mendeklarasikan variabel dengan tidak memberikan nilai,
maka variabel tersebut akan berisi nilai "tidak terdefinisi." Contoh:
var tel; alert
(tel);

19 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.8 Tampilan alert untuk variabel tak terdefinisi


2. Null
Mirip dengan tipe data “undefined”, tipe data null berarti menetapkan
suatu variabel, tetapi tidak memberikan nilai yang melekat.
Contoh:
var tel = null;
alert (tel);

Gambar 8.9 Tampilan alert untuk variabel null

3. Numbers
Variabel dapat juga diberi nilai berupa angka. Variabel akan
berperilaku sama dengan angka itu sendiri, sehingga dapat dilakukan
operasi matematika klasik seperti: +, -, *, dan / untuk pada variabel
tersebut.
Contoh:
var tel = 3; alert
(tel + 2);

20 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.10 Tampilan alert untuk variabel bernilai angka

4. Strings
Tipe lain dari data yang dapat disimpan ke variabel adalah string,
yang pada dasarnya sekumpulan baris teks. Karakter yang diapit dalam
satu set kutipan tunggal atau ganda akan menunjukkan bahwa tipe
datanya adalah string.
Contoh:
var tel = “Lima”; alert
(tel);

Gambar 8.10 Tampilan alert untuk variabel bernilai strings


Sebelumnya pada tipe data numbers, penggunaan tanda plus (+)
akan menambahkan angka. Ketika tanda plus digunakan pada tipe data
string, nilai atau karakter akan digabungkan menjadi satu string panjang,
seperti yang ditunjukkan dalam contoh ini.
var tel = “3”; alert
(tel + 2);
Hasil yang akan ditampilkan oleh perintah diatas bukan angka 5,
melainkan string 32, gabungan dari string 3 dan 2.

5. Booleans

Gambar 8.11 Tampilan alert untuk variabel bernilai boolean

b. Array

21 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Variabel-variabel di JavaScript hanya bisa menyimpan satu data pada


suatu saat. Adanya kecenderungan yang besar untuk memanipulasi
sejumlah data dalam satu variabel membuat konsep variabel tersebut
menjadi tidak cukup. Sebagai solusinya, JavaScript menghadirkan struktur
data yang memungkinkan menyimpan himpunan/kelompok data dalam satu
variabel khusus yang disebut Array.
Array, adalah satu variabel yang dapat berisi banyak data yang
independent. Data yang disimpan diberikan indeks tertentu atau
menggunakan nomer urut mulai dari 0.Indeks ini nantinya dapat digunakan
untuk mengakses data yang disimpan dalam array tersebut.

Operator
Operator adalah suatu simbol yang digunakan untuk menyusun sebuah
ekspresi maupun operasi. Operator digunakan untuk memanipulasi nilai suatu
variabel. Variabel yang nilainya dimodifikasi oleh operator disebut operand.
a. Operator Aritmatika
Operator aritmatika digunakan untk melakukan perhitungan matematika.
Tabel 8.1 Operator Aritmetika

Operator Fungsi Contoh Hasil


var a = 7+3; alert
+ Penjumlahan 10
(a);
var a = 7-3; alert
- Pengurangan 4
(a);
var a = 7*3; alert
* Perkalian 21
(a);
var a = 6/3; alert
/ Pembagian 2
(a);
var a = 7%3;
% Sisa pembagian 1
alert (a);
var a = 1; a++;
++ Penaikan 2
alert (a);
var a = 1; a--;
-- Penurunan 0
alert (a);

22 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

b. Operator Perbandingan
Operator perbandingan digunakan untuk membandingkn nilai dari dua
operand. Hasil perbandingan dinyatakan dalam nilai boolea. TRUE berarti
benar, dan FALSE berarti salah.

Tabel 8.2 Operator Perbandingan


Operator Fungsi
== Sama dengan
!= Tidak sama dengan
=== Identik dengan (identik nilai dan tipe data)
!== Tidak identik dengan
> Lebih besar dari
>= Lebih besar dari atau sama dengan
< Lebih kecil dari
<= Lebih kecil dari atau sama dengan

c. Operator Logika
Operator logika digunakan untuk membandingkan dua nilai variabel yang
bertipe Boolean. Hasil yang didapat dari pengunaan operator logika adalah
Boolean.

Tabel 8.3 Operator Logika


Operator Fungsi
&& Operasi logika AND
|| Operasi logika OR
! Not atau negasi
3. Struktur Percabangan

a. Struktur IF

Struktur IF adalah stuktur kode pemograman ‘conditional’ yang akan


membuat percabangan di dalam program. Dengan menggunakan struktur IF,
kita bisa membuat 2 percabangan program yang akan dieksekusi jika
‘kondisi’ terpenuhi, dan akan menjalankan kode program lain jika ‘kondisi’
tidak terpenuhi.

23 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.12 Struktur IF


Kondisi di dalam struktur IF disini bisa berisi variabel dengan tipe data
boolean, atau dengan kode program yang akan menghasilkan boolean,
misalkan IF (a==b), atau IF (a>=b).

b. Cara Penulisan Struktur Logika IF

Penulisan stuktur IF di dalam JavaScript, mirip dengan bahasa


pemograman C++ atau PHP. Berikut adalah contoh penulisan struktur IF di
dalam JavaScript:

Gambar 8.13 Contoh Struktur IF


Kode program diatas tidak akan menjalankan perintah alert ("Umur 17
tahun"); jika variabel umur tidak berisi nilai “17”.
Jika baris yang akan dijalankan terdiri dari 2 baris atau lebih, maka harus
digunakan tanda kurung kurawal (tanda { dan })pada awal dan akhir blok
kondisi IF, seperti contoh berikut:

Gambar 8.14 Contoh Struktur IF dengan perintah lebih dari 1

c. Cara Penulisan Struktur Logika IF ELSE

Struktur IF memiliki percabangan lain yang akan dijalankan jika kondisi IF


tidak terpenuhi, yakni dengan menambahkan perintah ELSE. Berikut contoh
penulisannya:

24 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.15 Struktur IF ELSE

Jika kondisi umur==17 bernilai TRUE, maka akan menjalankan perintah


alert ("Umur 17 tahun");. Tapi jika kondisi tersebut bernilai FALSE, maka akan
menjalankan perintah alert ("Umur belum 17 tahun");.

Sama seperti struktur IF, jika bagian ELSE memiliki baris lebih dari 1,
maka kita harus menambahkan tanda kurung kurawal untuk menandai blok
tersebut. seperti contoh berikut:

Gambar 8.16 Contoh Struktur IF ELSE dengan perintah lebih dari 1

d. Cara Penulisan Nested IF

Struktur Nested IF atau IF bersarang adalah cara penggunaan struktur IF


secara berulang, yakni stuktur IF yang berada didalam IF. Alur program
seperti ini biasa di gunakan untuk logika yang lebih detail. Berikut adalah
contoh penggunaannya:

25 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.17 Struktur Nested IF

e. Cara Penulisan Struktur Logika IF ELSE IF

Struktur ELSE IF adalah bentuk lain dari penulisan struktur IF ELSE.


Struktur ELSE IF terbentuk ketika kita menggunakan struktur IF ELSE secara
berulang. Berikut contoh sederhananya:

Gambar 8.18 Struktur IF ELSE IF

Di dalam contoh diatas, program menyeleksi satu persatu nilai dari


variabel umur dan menampilkan hasilnya sesuai dengan kondisi yang telah
ditentukan. Jika umur 15 tahun, maka hasilnya adalah “Umur kurang dari 17
tahun”. Jika umur 17 tahun, maka hasilnya adalah “Umur 17 tahun”. Jika umur
50 tahun, maka hasilnya adalah “Umur lebih dari 17 tahun”.

26 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

f. Struktur Logika SWITCH

Struktur logika SWITCH dapat disederhanakan sebagai bentuk khusus


dari struktur IF ELSE. SWITCH digunakan untuk percabangan kode program
dimana kondisi yang diperiksa hanya 1 namun membutuhkan banyak opsi.
Struktur dasar penulisan SWITCH adalah sebagai berikut:

Gambar 8.19 Struktur SWITCH

Kondisi untuk inputan struktur SWITCH biasanya adalah variabel yang


akan diperiksa. Hasil percabangan dari variabel tersebut akan ditangani oleh
perintah case. Opsi default bisa ditambahkan untuk menangani kasus yang
tidak ditangani oleh perintah case.

g. Cara Penulisan Struktur Logika SWITCH

Agar lebih mudah dipahami, langsung saja kita masuk ke dalam kode
program SWITCH dalam JavaScript. Contoh program berikut mengambil
contoh terakhir dalam tutorial percabangan ELSE IF sebelumnya. Jika
menggunakan struktur SWITCH, berikut adalah cara penulisannya:

27 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.20 Contoh SWITCH CASE


Blok SWITCH diawali dan diakhiri dengan kurung kurawal. Dan kemudian
untuk setiap kemungkinan yang terjadi dari variabel angka, ditampung
dengan perintah case.
Perintah case diikuti dengan kondisi yang ingin di-’tampung’. Setiap case
lalu diikuti dengan tanda titik dua (:). Pada kondisi terakhir, terdapat perintah
default yang tujuannya adalah untuk menampung kondisi jika seluruh kondisi
case tidak tersedia.
Di dalam setiap case, juga harus ada perintah break. Perintah break disini
bertujuan untuk mengistruksikan kepada JavaScript untuk segera keluar dari
SWITCH jika salah satu case ditemukan. Jika tidak dicantumkan perintah
break, maka seluruh perintah mulai dari case yang sesuai sampai ke bawah
akan dijalankan. Berikut contohnya:

Gambar 8.21 Contoh SWITCH CASE tanpa break

28 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

4. Struktur Perulangan
Struktur perulangan di dalam bahasa pemograman di gunakan untuk
mengulang perintah program. Terdapat beberapa struktur perulangan yang
didukung oleh JavaScript.

a. Struktur Perulangan FOR

Struktur perulangan for, biasanya membutuhkan 4 perintah, yaitu:


• Kondisi awal perulangan
• Kondisi akhir perulangan
• Baris program yang akan diulang
• Increment / kenaikkan dalam setiap perulangan

Berikut adalah format dasar yang digunakan dalam struktur for:

Gambar 8.22 Struktur FOR

b. Cara Penulisan Struktur Perulangan FOR

Misalkan saja ingin mencetak tulisan “JavaScript” sebanyak 10 kali,


berikut adalah contoh kode programnya:

Gambar 8.23 FOR dengan increment

Pada baris pertama program, dideklarasikan variabel i dengan perintah


var i. Variabel i ini adalah counter, atau penghitung untuk proses perulangan.
Baris for (i=1;i<=10;i=i+1), berarti: lakukan perulangan for, dimulai dari i =
1, lalukan perulangan selama i<=10, dan naikkan nilai i sebanyak 1 angka
pada tiap perulangan (i=i++).
Dengan mengubah 3 kondisi ini (nilai awal, nilai akhir, dan increment) bisa
dengan mudah diatur perulangan yang terjadi, bahkan bernilai mundur
seperti contoh berikut ini:

29 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.24 FOR dengan decrement

Jika baris yang akan diulang terdiri dari 2 baris atau lebih maka harus
digunakan tanda kurung kurawal untuk menandari awal dan akhir blok for,
seperti berikut ini:

Gambar 8.25 Contoh FOR dengan perintah lebih dari 1

c. Cara Penulisan Struktur Perulangan WHILE

Cara penulisan perulangan WHILE mirip dengan stuktur logika IF, yakni
kondisi perulangan akan diperiksa di awal. Jika kondisi bernilai TRUE, maka
perulangan akan terus dilakukan sampai dengan nilai kondisi bernilai FALSE.
Berikut adalah penulisan dasar perulangan WHILE:

Gambar 8.26 Struktur WHILE

Kondisi akan selalu diperiksa pada setiap perulangan, dan bisa


‘dikendalikan’ kondisi ini pada bagian counter di dalam perulangan.Berikut
adalah contoh kode program untuk perulangan WHILE di dalam JavaScript:

30 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 8.27 Contoh Struktur WHILE dengan increment

Dengan mengubah perintah di dalam counter, kita bisa melakukan


perulangan mundur seperti contoh kita pada tutorial perulangan FOR:

5. Fungsi
Fungsi dalam pemrograman merupakan suatu mekanisme yang digunakan
untuk mengelompokkan program dalam menyelesaikan suatu kasus, proses
atau rumus aritmatika tertentu. Dengan pengertian yang sama pengelompokkan
kode ini juga sering disebut subprogram (program bagian), prosedur ataupun
metode. Dalam javascript semuanya itu disebut fungsi, karena Javascript hanya
menyediakan satu kata kunci untuk membuat fungsi ini, yaitu function.
Fungsi dalam proses pemanggilannya (eksekusi) ada yang membutuhkan
data tertentu agar dapat berjalan. Data tertentu yang perlu diberikan saat
pemanggilan fungsi ini dikenal dengan nama parameter. Setiap fungsi dapat
tidak memiliki atau memiliki lebih dari satu parameter.
Aturan penamaan fungsi mengikuti aturan penamaan variabel. Bentuk dari
blok fungsi adalah sebagai berikut: function nama_fungsi ( parameter1,
parameter2, ..., parameterN ) {
//kode program sebagai definisi fungsi return nilai_balik_jika_ada;
}
Keterangan :
nama_fungsi : nama dari fungsi yang akan dibuat.
parameter1...N : merupakan syarat yang diperlukan oleh fungsi
tersebut untuk dapat berjalan. Suatu fungsi juga
dapat tidak memiliki parameter, artinya dapat
dijalankan tanpa syarat.
return : perintah untuk membelikan hasil operasi dari
fungsi ke user.
nilai_balik_jika_ada : nilai hasil operasi dari fungsi. Suatu fungsi dapat
juga tidak memiliki nilai balik. Jika tidak memiliki
nilai balik maka pernyataan return dapat
ditiadakan.

Untuk menjalankan program yang ada dalam fungsi tersebut kita dapat
memanggilnya dengan cara, sebagai berikut:

31 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

varHasil = nama_fungsi ( nilai_parameter1, nilai_parameter2, ...,


nilai_parameterN ) ;

Keterangan :
varHasil : variabel yang dapat digunakan untuk menampung nilai balik dari
fungsi yang dipanggil bila ada.

Dilihat dari hasil akhirnya fungsi dalam javascript dibedakan jadi dua, yakni
fungsi yang memiliki nilai balik dan tidak. Nilai balik disini maksudnya adalah nilai
hasil operasi yang dijalankan didalam fungsi diberikan ke bagian program lainnya
untuk diproses lebih lanjut. Nilai balik dalam javascript dinyatakan dengan
menggunakan kata kunci return. Contoh kasusnya dalam program penghitung
luas dan volume limas. Dimana dalam perhitungan volume juga terdapat
menyertakan perhitungan luas didalamnya. Dengan kata lain untuk menghitung
volume limas kita harus menghitung luas alasnya terlebih dahulu.
Dalam program, proses ini diterjemahkan sebagai berikut:

var panjang = 5; var lebar =


3; var tinggi = 4; var
luasAlas; var volume;
luasAlas = panjang * lebar;
volume = luasAlas * tinggi / 2;

Apabila diubah dalam bentuk fungsi program diatas akan menjadi.


function hitungLuasAlas ( p, l ) { var
luas = p * l;
return luas;
}

function hitungVolume ( la, t ) {


var vol = la * t / 2; return
vol;
}

var panjang = 5; var lebar = 3; var tinggi


= 4; var luasAlas; var volume; luasAlas =
hitungLuasAlas(panjang, lebar); volume =
hitungVolume(luasAlas, tinggi);
alert(luasAlas); alert(volume);

Contoh : fungsi tanpa nilai balik.

function sapa(nama) { alert("Halo,


" + nama);
}

sapa(“bintang”);

32 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Contoh fungsi tanpa parameter.

function sayHalo() { alert("Halo");


}

sayHalo();

C. Uji Kemampuan

Buatlah kode HTML untuk membuat halaman web seperti pada gambar di
bawah:

Dengan ketentuan :
Grade Nilai
A 91-100
B 81-90
C 71-80
D 61-70
E <= 60

Grade A, B, C, D keterangannya adalah lulus, sedangkan Grade E


keterangannya adalah tidak lulus.

33 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

KEGIATAN BELAJAR 9

JAVASCRIPT: PENGOLAHAN INPUT USER

A. Tujuan Pembelajaran

Setelah mempelajari bab ini, siswa diharapkan dapat:

1. Menjelaskan akses komponen form (proses dan validasi input).


2. Menjelaskan navigasi halaman melalui kode program client.
3. Menjelaskan perubahan format style melalui kode progarm client.
4. Membuat akses komponen form (proses dan validasi input).
5. Membuat navigasi halaman melalui kode program client.
6. Membuat perubahan format style melalui kode progarm client.

B. Deskripsi Materi

Sebelum mempelajari materi tentang Pengolahan Input User,


perhatikan gambar berikut dan jawab pertanyaannya!

34 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Gambar 9.1 Pendaftaran akun Gmail

Pertanyaan

1) Apakah arti teks merah yang muncul dibawah field -field diatas?

2) Mengapa teks merah tersebut muncul?

3) Jika semua field sudah diisi, apakah teks merah tersebut masih muncul?

1. Events
Adanya interaktifitas dalam aplikasi akan membantu menarik minat
pengguna untuk menggunakan aplikasi yang dikembangkan. Di banyak bahasa
pemrograman pengolahan interaksi ini dikenal sebagai teknik penanganan
event. Event dalam Javascript adalah sebuah kejadian interaksi antara user
dengan halaman web. Bentuk interaksi ini dapat digambarkan seperti pada saat
user melakukan klik pada tombol ataupun link, mengetik username dan
password dan sebagainya.
Event ini pada HTML ditambahkan dalam bentuk atribut dari elemen yang
ada. Program javascript yang ditempatkan pada atribut tersebut akan dijalankan
pada saat interaksi yang bersesuaian terjadi. Berikut ini merupakan daftar atribut
yang dapat digunakan untuk mengolah interaksi user.

35 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Tabel 9.1 Atribut Penanganan Event


Penanganan Penjelasan
Event Event
Event ini terjadi saat user melakukan klik sekali atau dua kali pada
onclick satu elemen HTML
Elemen HTML yang umum memiliki atribut ini: button,
ondblclick document, checkbox, link, radio, select, submit, reset.
Event ini terjadi saat user melakukan klik pada satu elemen
onmousedown HTML
Elemen terkait: button, document, link, layer
Event ini terjadi saat user menggerakan mouse diatas elemen
onmousemove HTML
Elemen terkait: button, document, link, layer
Event ini terjadi saat user menggerakan mouse ke atas elemen
onmouseover HTML
Elemen terkait: button, document, link, layer
Event ini terjadi saat user menggerakan mouse keluar elemen
onmouseout HTML
Elemen terkait: button, document, link, layer
Event ini terjadi saat user melepaskan klik pada elemen HTML
onmouseup Elemen terkait: button, document, link, layer
Event ini terjadi saat user sedang menekan tombol keyboard
onkeydown pada elemen HTML
Elemen terkait: document, image, link, input, textarea
Event ini terjadi saat user menekan tombol keyboard pada
onkeypress elemen HTML
Elemen terkait: document, image, link, input, textarea
Event ini terjadi saat user melepas penekanan tombol keyboard
onkeyup pada elemen HTML
Elemen terkait: document, image, link, input, textarea
Event ini terjadi dokumen atau frame telah ditampilkan oleh
onload browser.
Elemen terkait: document, image, layer, window
Event ini terjadi saat ukuran dari dokumen berubah Elemen
onresize terkait: document, image, layer, window
Event ini terjadi saat user melakukan scrolling pada dokumen
onscroll Elemen terkait: document, window
Event ini terjadi saat user menutup dokumen Elemen
onunload terkait: document, window

36 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Event ini terjadi saat fokus pada elemen tersebut dipindahkan ke


elemen lainnya
onblur
Elemen terkait: button, checkbox, file upload, layer, password,
radio, reset, select, submit, text, textarea, window
Event ini terjadi saat nilai elemen form berubah
onchange
Elemen terkait: file upload, select, submit, text, textarea
Event ini terjadi saat elemen tersebut difokuskan oleh user
onfocus Elemen terkait: button, checkbox, file upload, layer, password,
radio, reset, select, submit, text, textarea, window
Event ini terjadi saat form di reset ke kondisi sebelum diisi Elemen
onreset terkait: form
Event ini terjadi saat user memiliki sebagian teks pada elemen
onselect Elemen terkait: text, textarea
Event ini terjadi saat form akan dikirim ke aplikasi server Elemen
onsubmit terkait: form

Format penerapan kode Javascript pada atribut event diatas sebagai berikut:

<tag atribut-event=”kode javascript;” … > … </tag>

Contoh program penerapan event pada halaman web:

<button onclick=”ambilData()”>Daftar</button>

Pada contoh diatas, apabila user melakukan klik pada Daftar, maka akan
menjalankan fungsi ambilData().

<script> function ambilData() { var nama =


document.getElementById(“nama”).value;
document.getElementById(“demo”).innerHTML = nama;
}
</script>

Pernyataan document.getElementById(‘id-elemen’).value adalah perintah


javascript untuk mengambil nilai input dari elemen form.

2. Mengakses DOM (Document Object Model)


Setiap elemen HTML yang ada dalam suatu dokumen web oleh Javascript
diterjemahkan sebagai obyek HTML. Pada obyek HTML ini terdapat sejumlah
fungsi, konstanta ataupun variabel yang dapat diakses untuk mengubah elemen
HTML tersebut. Akses terhadap obyek HTML tersebut dapat dilakukan dengan
menggunakan fungsi-fungsi berikut.

37 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Tabel 9.2 Fungsi untuk Pengaksesan DOM


Fungsi Penjelasan
id-elemen disini digunakan untuk
getElementById(“id-elemen”) menunjuk nilai dari atribut id dari elemen
yang mau diakses obyeknya.
getElementsByTagName(“namatag”) nama-tag disini digunakan untuk
mengambil obyek berdasarkan nama tag
HTML-nya
nama disini adalah nilai dari atribut name
dari elemen yang akan diakses.
getElementsByName(“namaelemen”) Umumnya diterapkan pada komponen
dari form, seperti input, select, checkbox,
dan komponen lainnya.

Ketiga fungsi diatas merupakan bagian dari obyek document. Sehingga


obyek document perlu disertakan pada saat memanggil fungsi diatas.
Berikut ini adalah contoh penggunaan getElementById(“id-elemen”):

<script>
function ambilData() { var nama =
document.getElementById(“nama”).value;
document.getElementById(“demo”).innerHTML = nama;
}
</script>
Nama Lengkap : <input type=”text” id=”nama”><br>
<button onclick=”ambilData()”>Daftar</button>

<p id=”demo”></p>

Pada contoh diatas ini apabila tombol Daftar diklik, maka obyek input
teksdengan id “nama” akan diambil menggunakan fungsi
document.getElementById() dan selanjutnya, variabel value dari obyek teks
digunakan untuk mengambil data masukkan dari user agar dapat ditampilkan.

Gambar 9.2 Contoh getElementById

38 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Berikut ini adalah contoh penggunaan getElementById("id-elemen"):

<script> function
ambilData() {
var jenis = new Array();
var jenis = document.getElementsByName("gender");
if (jenis[0].checked === true)
var j = jenis[0].value;
else if (jenis[1].checked === true) var j
= jenis[1].value;
else
var j = "Anda belum memilih";
document.getElementById("demo").innerHTML = j;
}
</script>
Jenis Kelamin:<br>
<input type="radio" name="gender" value="Pria">Pria<br>
<input type="radio" name="gender" value="Wanita">Wanita<br>

<button onclick="ambilData()">Daftar</button>

<p id="demo"></p>

Fungsi getElementsByName() sedikit berbeda dengan metode


getElementById(), dimana hasil dari metode ini adalah array obyek bukan obyek
tunggal. Dengan hasil berupa array ini berarti untuk mengakses elemen pertama
digunakan index 0, elemen kedua dengan index 1, dan seterusnya. Disisi lain,
dengan hasil array ini dimungkinkan untuk menuliskan elemen HTML dengan
nilai atribut name yang sama.

Gambar 9.3 Contoh getElementsByName

39 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

3. Navigasi Halaman
Navigasi secara umum dapat digunakan untuk menunjukkan perpindahan
dari satu titik ke titik yang lain. Dalam hal ini perpindahan yang dimaksud adalah
perpindahan dalam satu halaman ataupun antar halaman web. Wujud dalam
halaman web yang tampak adalah dalam bentuk link (tekstual), tombol dan
gambar (grafis). Selain menggunakan HTML, navigasi pada halaman web juga
dapat diwujudkan dengan menggunakan program Javascript.
Perancangan navigasi untuk suatu website dapat juga dikenal dengan istilah
pembuatan sitemap. Penggambarannya dilakukan dengan terlebih dahulu
menentukan halaman utama web, kemudian menentukan link-link apa saja dari
yang ada di halaman tersebut dan mengaitkannya. Berikut ini merupakan salah
satu contoh bentuk rancangan sitemap.

Gambar 9.4 Sitemap

Pembuatan sitemap ini dapat dilakukan dengan menggunakan aplikasi peta


pikiran seperti Freemind, XMind ataupun sejenisnya. Sitemap ini nantinya dapat
dijadikan panduan ataupun arah bagi programmer web dalam mengembangkan
aplikasinya. Sedangkan untuk user dapat memberikan gambaran secara
menyeluruh tentang web yang sedang dikunjungi.

Terdapat sejumlah metode yang dapat digunakan di Javascript untuk


berpindah halaman ini, diantaranya adalah:

Tabel 9.3 Method untuk Navigasi Halaman


Teknik Navigasi Penjelasan
Digunakan untuk menentukan halaman yang
window.location.href = “url”; akan ditampilkan pada browser, melalui string
url yang diberikan.
URL halaman baru diberikan dalam bentuk
window.location.assign(“url”); parameter untuk fungsi ini.

40 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

Mirip seperti assign(), bedanya browser tidak


akan mengingat url sebelum ini, sehingga tidak
akan ada perubahan apabila menekan back
pada browser atau menjalankan metode
window.location.replace(“url”);
history.back() untuk kembali ke halaman
sebelumnya. Jadi apabila menginginkan
halaman sebelumnya tetap ada gunakan fungsi
assign().
Fungsi untuk menampilkan kembali halaman
window.history.back() sebelumnya. Sama fungsinya dengan tombol
back pada browser.
Untuk menampilkan halaman setelah saat ini
window.history.forward() apabila ada.

C. Uji Kemampuan
Buatlah kode HTML untuk membuat halaman web seperti pada gambar di
bawah:

Dengan ketentuan akan muncul peringatan jika ada salah satu field formulir yang
tidak terisi.

41 TELKOM SCHOOLS
C2-
REKAYASA PERANGKAT LUNAK

42 TELKOM SCHOOLS
C2-REKAYASA PERANGKAT LUNAK

DAFTAR PUSTAKA

Jayan. (2008). CSS untuk Orang Awam. Palembang: Maxikom.


Robbins, Jennifer Niederst. (2012). Learning Web Design 4th Edition. Kanada:
Penerbit O'Reilly Media, Inc.
Sidik, Betha, dan Husni I. Pohan. (2012). Pemrograman Web Dengan HTML
Revisi Keempat. Bandung: Penerbit Informatika.
Supono. (2006). Pemrograman Web dengan Javascript. Bandung: Yrama
Media
Wahana Komputer. (2012). Paling Dicari! Javascript Source Code. Yogyakarta:
Penerbit Andi

TELKOM SCHOOLS

Anda mungkin juga menyukai