ArkWeb logo ArkWeb
Login Client Login Student Ark Web
Articles Javascript

JavaScript Bahasa Pemrograman untuk Web Interaktif

Mar 06, 2025 2 min read 13 views
JavaScript Bahasa Pemrograman untuk Web Interaktif

1. Apa Itu JavaScript?

JavaScript (JS) adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih interaktif dan dinamis. JavaScript berjalan di browser dan memungkinkan kita untuk:

✅ Menambahkan efek animasi
✅ Memvalidasi formulir sebelum dikirim
✅ Membuat menu navigasi interaktif
✅ Mengubah konten halaman tanpa harus memuat ulang (AJAX)
✅ Berkomunikasi dengan server (API & Backend)

Peran JavaScript dalam Web Development

🌐 HTML → Struktur halaman
🎨 CSS → Tampilan dan desain
⚡ JavaScript → Interaksi dan fungsionalitas

Tanpa JavaScript, halaman web hanya bersifat statis. Dengan JavaScript, kita bisa membuat pengalaman pengguna yang lebih baik dan lebih dinamis.

2. Sejarah Singkat JavaScript

  • 1995 – Diciptakan oleh Brendan Eich di Netscape dengan nama Mocha, lalu diubah menjadi LiveScript dan akhirnya menjadi JavaScript.
  • 1996-1997 – Standarisasi oleh ECMA, lahir ECMAScript (ES) sebagai standar JavaScript.
  • 2009 – ECMAScript 5 (ES5) dirilis, membawa fitur baru.
  • 2015 – ECMAScript 6 (ES6) membawa perubahan besar, termasuk let, const, arrow function, class, module, dan promise.
  • Sekarang – JavaScript terus berkembang dengan fitur-fitur baru setiap tahunnya.

3. Cara Menulis JavaScript dalam HTML

Ada tiga cara untuk menyisipkan JavaScript ke dalam halaman HTML:

a) Inline JavaScript (Dalam Tag HTML Langsung)

Menulis JavaScript langsung dalam atribut onclick, onmouseover, dll.

html
<button onclick="alert('Halo, Dunia!')">Klik Saya</button>

✅ Kelebihan: Mudah digunakan pada elemen tertentu.
❌ Kekurangan: Tidak terstruktur, sulit dipelihara.

b) Internal JavaScript (Dalam Tag <script> di HTML)

Menuliskan kode JavaScript dalam tag <script> di dalam file HTML.

html
<!DOCTYPE html> <html lang="id"> <head> <title>Belajar JavaScript</title> <script> function salam() { alert("Selamat datang di website kami!"); } </script> </head> <body> <button onclick="salam()">Klik Saya</button> </body> </html>

✅ Kelebihan: Cocok untuk halaman tunggal.
❌ Kekurangan: Sulit dipelihara jika kodenya banyak.

c) External JavaScript (File .js Terpisah)

JavaScript ditulis dalam file eksternal dan dipanggil dengan <script src="file.js"></script>.

File script.js

js
function salam() { alert("Selamat datang di website kami!"); }

File index.html

html
<!DOCTYPE html> <html lang="id"> <head> <script src="script.js"></script> </head> <body> <button onclick="salam()">Klik Saya</button> </body> </html>

✅ Kelebihan: Lebih rapi, dapat digunakan di banyak halaman.
❌ Kekurangan: Tidak bekerja tanpa file JavaScript eksternal.

4. Sintaks Dasar JavaScript

JavaScript memiliki aturan penulisan (sintaks) yang mirip dengan bahasa pemrograman lain seperti C dan Java.

a) Variabel (Penyimpanan Data)

js
var nama = "Andi"; // Cara lama (tidak disarankan) let umur = 25; // Cara modern (disarankan) const negara = "Indonesia"; // Konstanta (nilai tidak bisa diubah)

b) Tipe Data dalam JavaScript

  • String → "Hello, World!"
  • Number → 10, 3.14
  • Boolean → true, false
  • Array → ["apel", "mangga", "jeruk"]
  • Object → {nama: "Andi", umur: 25}

c) Operator Aritmatika

js
let a = 10; let b = 5; console.log(a + b); // 15 (Penjumlahan) console.log(a - b); // 5 (Pengurangan) console.log(a * b); // 50 (Perkalian) console.log(a / b); // 2 (Pembagian) console.log(a % b); // 0 (Modulus/sisa bagi)

d) Percabangan (If-Else dan Switch)

js
let nilai = 85; if (nilai >= 80) { console.log("Anda mendapatkan A"); } else if (nilai >= 70) { console.log("Anda mendapatkan B"); } else { console.log("Anda mendapatkan C"); }

e) Perulangan (Looping: For & While)

js
for (let i = 1; i <= 5; i++) { console.log("Loop ke-" + i); } let x = 1; while (x <= 5) { console.log("While loop ke-" + x); x++; }

f) Function (Fungsi dalam JavaScript)

js
function sapa(nama) { return "Halo, " + nama + "!"; } console.log(sapa("Andi")); // Output: Halo, Andi!

5. Manipulasi DOM (Document Object Model)

DOM memungkinkan JavaScript untuk mengubah isi halaman web secara dinamis.

Mengubah Isi Elemen HTML

js
document.getElementById("judul").innerHTML = "JavaScript itu Seru!";
html
<h1 id="judul">Belajar JavaScript</h1> <button onclick="ubahTeks()">Ubah Teks</button> <script> function ubahTeks() { document.getElementById("judul").innerHTML = "JavaScript itu Seru!"; } </script>

6. Event Listener (Interaksi dengan Pengguna)

js
document.getElementById("btn").addEventListener("click", function() { alert("Tombol diklik!"); });
html
<button id="btn">Klik Saya</button>

7. JavaScript Modern (ES6+)

JavaScript terus berkembang dengan fitur-fitur baru, seperti:

a) Arrow Function

js
const sapa = (nama) => `Halo, ${nama}!`; console.log(sapa("Andi"));

b) Template Literal (String Interpolasi)

js
let nama = "Andi"; console.log(`Halo, nama saya ${nama}.`);

c) Destructuring

js
let orang = { nama: "Andi", umur: 25 }; let { nama, umur } = orang; console.log(nama, umur);

8. Penggunaan JavaScript di Dunia Nyata

🔹 Website Interaktif → Facebook, Instagram, Twitter
🔹 Aplikasi Web → Gmail, Google Docs
🔹 Game Browser → Phaser.js
🔹 Aplikasi Mobile → React Native
🔹 Backend Development → Node.js

9. Kesimpulan

JavaScript adalah bahasa pemrograman yang powerful untuk membuat halaman web interaktif. Dengan JavaScript, kita bisa mengontrol elemen web, menangani event, dan berkomunikasi dengan server.

Share this article

About the Author

Admin

Admin

admin

A passionate writer and content creator.