Materi JavaScript 3
Fungsi dalam JavaScript

oleh: Suryo Adhy Chandra, ST

Ilustrasi JavaScript mengubah HTML melalui id

Fungsi adalah kumpulan perintah yang diberi nama dan dapat dipanggil berkali-kali. Dengan fungsi, kode JavaScript menjadi lebih rapi, mudah dibaca, dan tidak perlu ditulis berulang.

1. Bentuk dasar fungsi

Fungsi dibuat dengan kata kunci function, kemudian diikuti nama fungsi, tanda kurung, dan blok kode di dalam tanda kurung kurawal.

function sapa() { alert("Halo, selamat belajar JavaScript!"); } sapa();

Pada contoh di atas, sapa() adalah nama fungsi. Ketika fungsi dipanggil, browser akan menjalankan perintah alert yang berada di dalamnya.

2. Fungsi dengan parameter

Parameter adalah data yang dikirim ke dalam fungsi. Dengan parameter, fungsi bisa menghasilkan pesan yang berbeda sesuai data yang diberikan.

function sapaNama(nama) { alert("Halo, " + nama + "!"); } sapaNama("Budi"); sapaNama("Sinta");
Tanda + pada contoh di atas dipakai untuk menggabungkan teks dengan isi variabel.

3. Menghubungkan fungsi JavaScript dengan HTML melalui id

JavaScript dapat mengambil elemen HTML menggunakan document.getElementById(). Cara ini membutuhkan atribut id pada elemen HTML yang ingin diubah.

<h2 id="judul">Judul sebelum diubah</h2> <button onclick="ubahJudul()">Ubah Judul</button> <script> function ubahJudul() { document.getElementById("judul").innerHTML = "Judul sudah diubah oleh JavaScript"; } </script>

Demo ubah judul:

Judul sebelum diubah

4. Mengambil input dari HTML

Selain mengubah teks, JavaScript juga dapat mengambil nilai dari input HTML. Nilai input dapat dibaca menggunakan properti value.

<input type="text" id="nama" placeholder="Masukkan nama"> <button onclick="tampilkanNama()">Tampilkan</button> <p id="hasil"></p> <script> function tampilkanNama() { let nama = document.getElementById("nama").value; document.getElementById("hasil").innerHTML = "Halo, " + nama + "!"; } </script>

Demo input nama:

5. Contoh lengkap integrasi HTML dan JavaScript

<!DOCTYPE html> <html> <head> <title>Fungsi JavaScript</title> </head> <body> <h1 id="judul">Belajar Fungsi</h1> <input type="text" id="nama" placeholder="Masukkan nama"> <button onclick="sapaPengunjung()">Sapa</button> <p id="pesan"></p> <script> function sapaPengunjung() { let nama = document.getElementById("nama").value; document.getElementById("pesan").innerHTML = "Selamat datang, " + nama + "!"; } </script> </body> </html>
Kesimpulan: fungsi membantu kita menyimpan perintah, sedangkan id membantu JavaScript menemukan elemen HTML yang ingin dibaca atau diubah.
← Kembali Ke Daftar Pelajaran JavaScript