BAB III
JAVASCRIPT
3.1. TUJUAN
Mengetahui dasar – dasar penggunaan JavaScript.
Dapat mengembangkan halaman HTML agar lebih dinamis dan interaktif.
Dapat meningkatkan fungsi halaman HTML.
3.2. ALAT & BAHAN
Komputer
Web Browser (bisa menggunakan Mozilla Firefox, google chrome dan lain –
lain).
Teks Editor (bisa menggunakan Notepad, Notepad ++, sublime dan lain – lain)
3.3. DASAR TEORI
Penempatan kode JavaScript di dalam HTML diletakkan antara tag <script>
dan </script>. Tag <script> dan </script> dapat ditempatkan di bagian <body> atau
di <head> halaman HTML atau bisa ditempatkan pada keduanya. Dan bisa juga Tag
<script> dan </script> ditempatkan di file eksternal.
Menempatkan skrip di file eksternal memiliki beberapa keuntungan:
Ini memisahkan HTML dan kode
Itu membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara
File JavaScript yang di-cache dapat mempercepat pemuatan halaman
Dan Script Eksternal dapat dirujuk dalam 3 cara berbeda, yaitu :
Dengan URL lengkap (alamat web lengkap)
Dengan sebuah file path (like /js/)
Atau Tanpa path
JavaScript dapat "menampilkan" dan “mencetak” data dengan cara yang berbeda:
Menulis ke dalam elemen HTML, menggunakan innerHTML.
Menulis ke dalam output HTML menggunakan document.write().
Menulis ke dalam kotak peringatan, menggunakan window.alert().
Menulis ke konsol browser, menggunakan console.log().
Metode di browser untuk print, menggunakan window.print()
JavaScript dapat melakukan beberapa hal, yaitu :
1. JavaScript dapat mengubah konten HTML
2. JavaScript dapat mengubah nilai atribut HTML
3. JavaScript dapat mengubah Gaya HTML
4. JavaScript dapat menyembunyikan dan menampilkan elemen HTML
1
Ada 3 cara untuk mendeklarasikan variabel JavaScript:
Menggunakan var
Variabel adalah wadah untuk menyimpan data (nilai). Dalam contoh ini x, y,
dan z adalah variabel, dideklarasikan dengan var.
Maka outputnya sebagai berikut :
Menggunakan let
Menggunakan const
Operator Aritmatika JavaScript
2
Operator Perbandingan JavaScript
Operator Bitwise JavaScript
3
Operator Logika JavaScript
Operator Penugasan JavaScript
4
Operator Khusus JavaScript
JavaScript Function
Dimana function sebuah JavaScript adalah sebuah blok dari kode JavaScript yang
dapat dieksekusi ketika JavaScript di panggil. Sebagai contoh, sebuah function
dipanggil ketika suatu peristiwa terjadi, seperti ketika pengguna mengklik tombol.
Cara penulisan syntax function pada JavaScript yaitu seperti dibawah ini :
Pemanggilan function
Kode yang ada di dalam function akan di eksekusi ketika “sesuatu” memanggil
function tersebut. “sesuatu” ini bisa seperti berikut ini :
Ketika suatu peristiwa terjadi (ketika pengguna mengklik tombol)
Ketika dipanggil (dipanggil) dari kode JavaScript
Secara otomatis (dipanggil sendiri)
Pernyataan Return pada function digunakan untuk mengembalikan nilai
5
tertentu dari function ke function yang memanggil. Kemudian function akan
berhenti jika pernyataan return di panggil. Nilai (seperti Boolean, number, string
dan lain – lain) dan Tipe Object (seperti sebuah function, objects, array dan lain –
lain) dapat dikembalikan dengan menggunakan pernyataan return. Dan dapat juga
mengembalikan nilai mutiple menggunakan pernyataan return. Serta menggunakan
Array atau Object untuk mengembalikan nilai mutiple dari sebuah Function.
2.4. LATIHAN
1. JavaScript dapat mengubah konten HTML
Salah satu dari banyak metode JavaScript HTML adalah getElementById().
Contoh di bawah ini "menemukan" elemen HTML (dengan id="demo"), dan
mengubah konten elemen (innerHTML) menjadi "Percobaan Modul 3
JavaScript".
Hasilnya :
6
Setelah diklik tombol Tekan maka kontennya akan berubah seperti dibawah ini :
2. JavaScript dapat mengubah nilai atribut HTML
JavaScript mengubah nilai src atribut dari sebuah <img> tag:
Maka hasilnya sebagai berikut :
7
Kemudian klik tombol Turn ON Lampu maka hasilnya sebagai berikut :
3. JavaScript dapat mengubah Gaya HTML
Mengubah gaya elemen HTML, adalah varian dari mengubah atribut HTML:
8
Kemudian klik tombol Rubah Gaya HTML maka hasilnya sebagai berikut :
4. JavaScript dapat menyembunyikan dan menampilkan elemen HTML
Menyembunyikan dan menampilkan elemen HTML dapat dilakukan dengan
mengubah style display, seperti berikut ini :
Kemudian klik tombol Hilang maka hasilnya sebagai berikut :
9
Kemudian klik tombol Tampil maka hasilnya sebagai berikut :
5. Penggunaan innerHTML
Untuk mengakses elemen HTML, JavaScript dapat menggunakan metode
document.getElementById(id). Atribut id mendefinisikan elemen HTML.
sedangkan properti innerHTML mendefinisikan konten HTML:
1
0
6. Penggunaan document.write()
Menggunakan document.write() setelah dokumen HTML dimuat, akan
menghapus semua HTML yang ada :
1
1
Metode document.write() hanya boleh digunakan untuk pengujian.
Kemudian klik tombol Try it maka hasilnya sebagai berikut :
1
2
7. Penggunaan window.alert()
Kita dapat menampilkan sebuah peringatan seperti dibawah ini :
8. Penggunaan window.print()
JavaScript tidak memiliki objek cetak atau metode cetak. Anda tidak dapat
mengakses perangkat keluaran dari JavaScript. Satu-satunya pengecualian adalah
Anda dapat memanggil metode window.print()di browser untuk mencetak konten
dari jendela saat ini.
1
3
Kemudian klik tombol Try it maka hasilnya sebagai berikut :
2.5. TUGAS
1. Buatlah Website yang ada Java Scriptnya menurut anda?
a. Tampilkan Source Code nya
b. Tampilkan hasil di Browser nya.
1
4
