MODUL 8 JavaScript pada Konten HTML A. TUJUAN 1. Mampu

Desain Web
MODUL 8
JavaScript pada Konten HTML
A. TUJUAN
1. Mampu memahami konsep JavaScript pada HTML
2. Mampu memahami penggunaan JavaScript pada HTML
3. Mampu memproses konten HTML menggunakan JavaScript
B. PETUNJUK
1. Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan
2. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar
3. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur
4. Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas
C. DASAR TEORI
JavaScript pada HTML merupakan pengelola action dari suatu elemen HTML. Selain bisa
digunakan untuk memproses data pada form, JavaScript dapat pula digunakan sebagai metode
untuk membuat sebuah halaman web yang dinamis tanpa harus menggunakan bahasa server
(server-side language) misalnya PHP. Untuk menggunakan metode ini, kita dapat menggunakan
kombinasi dari fungsi getElementById() dan innerHTML.
Fungsi getElementById() digunakan untuk mengakses suatu elemen berdasarkan ID yang
kita tentukan. Perlu diperhatikan bahwa pemberian ID pada dokumen HTML haruslah unik,
dalam arti nama ID untuk masing-masing elemen harus berbeda, tidak boleh ada yang sama. Jika
terdapat elemen yang mempunyai ID yang sama, fungsi getElementById() tidak akan bisa
berfungsi.
Fungsi innerHTML digunakan untuk mengakses konten HTML pada suatu elemen yang kita
akses menggunakan fungsi getElementById(). Kedua fungsi tersebut dapat kita kombinasikan
untuk membuat halaman web dinamis berdasarkan parameter tertentu.
D. LATIHAN
1. Bukalah aplikasi teks editor
2. Tuliskan kode dasar HTML
Sabian | STKIP PGRI TULUNGAGUNG
1
Desain Web
Simpan sebagai index.html
3. Sisipkan kode berikut pada head:
Sabian | STKIP PGRI TULUNGAGUNG
2
Desain Web
4. Kemudian tambahkan kode berikut pada body:
5. Buka index.html menggunakan browser. Jika kode benar, maka tampilannya sebagai berikut:
6. Coba klik tombol Halaman 2. Jika kode benar, maka tampilannya sebagai berikut:
7. Coba klik tombol Halaman 3. Jika kode benar, maka tampilannya sebagai berikut:
Sabian | STKIP PGRI TULUNGAGUNG
3
Desain Web
Alur dari data kurang lebih sebagai berikut:
Pada kode di atas, ID pada elemen yang digunakan sebagai media halaman dinamis bernama
“halaman”. Parameter page yang digunakan berupa integer (bilangan bulat).
Variabel html (var html) merupakan kode HTML yang akan ditampilkan berdasarkan
parameter page yang dimasukkan.
Jika page bernilai 1, maka kode HTML yang akan ditampilkan adalah “Halaman Pertama”. Jika
page bernilai 2, maka kode HTML yang akan ditampilkan adalah “Halaman Kedua”. Jika page
nilainya selain 1 atau 2, maka kode HTML yang akan ditampilkan adalah “Error 404”.
Pada button Halaman 3, parameter page yang digunakan adalah 3. Nilai 3 bukanlah 1 ataupun
2, sehingga halaman yang akan ditampilkan adalah Error 404.
Sabian | STKIP PGRI TULUNGAGUNG
4
Desain Web
E. TUGAS
Desainlah suatu web dinamis dengan beberapa halaman berikut ini menggunakan JavaScript:
Sabian | STKIP PGRI TULUNGAGUNG
5
Desain Web
Sabian | STKIP PGRI TULUNGAGUNG
6