Scribd
Unggah
36 tayangan

Modul 3 JavaScript

Bab ini membahas tentang penggunaan JavaScript untuk membuat halaman web menjadi lebih dinamis dan interaktif. Terdapat penjelasan tentang tujuan, alat, dasar teori, dan contoh kode JavaScript untuk mengubah konten, atribut, gaya HTML, serta menyembunyikan dan menampilkan elemen. Termasuk penjelasan tentang variabel, operator, function, dan latihan-latihan JavaScript. Diakhir bab ini terdapat tugas membuat website sederhana menggunakan JavaScript

Diunggah oleh

SARMAN
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 DOC, PDF, TXT atau baca online di Scribd
36 tayangan

Modul 3 JavaScript

Bab ini membahas tentang penggunaan JavaScript untuk membuat halaman web menjadi lebih dinamis dan interaktif. Terdapat penjelasan tentang tujuan, alat, dasar teori, dan contoh kode JavaScript untuk mengubah konten, atribut, gaya HTML, serta menyembunyikan dan menampilkan elemen. Termasuk penjelasan tentang variabel, operator, function, dan latihan-latihan JavaScript. Diakhir bab ini terdapat tugas membuat website sederhana menggunakan JavaScript

Diunggah oleh

SARMAN
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 DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 14

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

Anda mungkin juga menyukai