Bagi kamu yang baru mulai belajar JavaScript untuk pemula, pertanyaan paling pertama adalah:
“Bagaimana cara menjalankan JavaScript?”…
Ini adalah pertanyaan yang sangat wajar. JavaScript berbeda dengan bahasa pemrograman lain yang membutuhkan compiler atau software tambahan. JavaScript dapat:
- dijalankan langsung di browser (Chrome, Firefox, Edge),
- dijalankan di file HTML,
- dijalankan melalui console browser,
- dijalankan menggunakan text editor seperti VSCode,
- (opsional) dijalankan menggunakan Node.js untuk kebutuhan backend.
Di artikel lengkap ini kamu akan belajar semua cara menjalankan JavaScript, mulai dari yang paling dasar hingga sedikit lebih advanced.
Daftar isi
Baca juga: Apa Itu JavaScript? Fungsi dan Manfaatnya Dalam Web Development
Persiapan Sebelum Menjalankan JavaScript
Untuk mengikuti tutorial ini kamu hanya membutuhkan:
- Browser (Chrome atau Firefox)
- Text editor (VSCode direkomendasikan)
- Folder kosong untuk menyimpan file HTML & JS
Tidak perlu menginstal apa pun tambahan untuk tahap dasar.
Cara Menjalankan JavaScript di Browser
Browser adalah tempat paling natural untuk menjalankan JavaScript.
Ada 3 metode utama:
- Menjalankan JavaScript di dalam HTML (inline script)
- Menjalankan JavaScript menggunakan file eksternal .js
- Menjalankan JavaScript di console browser
Semua metode ini akan kita bahas satu per satu.
Cara Menjalankan JavaScript Menggunakan HTML (Inline Script)
Ini adalah cara paling mudah untuk pemula.
Buat file bernama: index.html
Isi file:
<!DOCTYPE html>
<html>
<head>
<title>Cara Menjalankan JavaScript</title>
</head>
<body>
<h1 id="judul">Halo JavaScript!</h1>
<button onclick="ubahTeks()">Klik Saya</button>
<script>
function ubahTeks() {
document.getElementById("judul").innerText = "JavaScript Berhasil Dijalankan!";
}
</script>
</body>
</html>Code language: HTML, XML (xml)Cukup buka file index.html di browser.
JavaScript akan langsung berjalan.
Ini adalah contoh paling dasar cara menjalankan JavaScript bagi pemula. Dimana teks di dalam elemen h1 akan berubah ketika tombol diklik.
Cara Menjalankan JavaScript dari File .js Eksternal
Metode ini lebih profesional dan digunakan pada proyek nyata.
Langkah 1 — Buat file HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan File JS Eksternal</title>
</head>
<body>
<h2 id="teks">Belum Diubah</h2>
<button onclick="ubah()">Ubah Teks</button>
<script src="script.js"></script>
</body>
</html>Code language: HTML, XML (xml)Langkah 2 — Buat file JavaScript eksternal
script.js
function ubah() {
document.getElementById("teks").innerText = "Teks Berhasil Diubah Dengan File JS Eksternal!";
}Code language: JavaScript (javascript)Langkah 3 — Buka file HTML
File script.js akan dijalankan otomatis.
Dengan ini kamu mempraktikkan:
- Cara membuat file JS
- Cara menjalankan file JS di browser
- Cara memisahkan HTML dan JavaScript
Cara Run JavaScript di Chrome
Langkah 1 — Buka Chrome
Langkah 2 — Tekan tombol:
- Windows → Ctrl + Shift + J
- Mac → Cmd + Option + J
Console Chrome akan muncul.
Coba kode berikut:
console.log("Halo dari Chrome!");Code language: JavaScript (javascript)atau…
let angka = 10 * 5;
angka;Code language: JavaScript (javascript)atau…
document.title;Code language: JavaScript (javascript)Metode ini disebut menjalankan JavaScript dengan console browser.
Contoh hasilnya akan seperti gambar di bawah ini.
Cara Run JavaScript di Firefox
Caranya mirip dengan Chrome.
Tekan:
- Windows → Ctrl + Shift + K
- Mac → Cmd + Option + K
Console muncul dan kamu bisa menjalankan JavaScript langsung.
Firefox sangat baik untuk debugging karena error message-nya lebih detail.
Tips Belajar JavaScript yang Efektif
- Pelajari DOM terlebih dahulu
- Coba jalankan kode kecil di console browser
- Gunakan
console.loguntuk debugging - Coba contoh proyek mini
- Pelajari lintas browser
Kesimpulan
Sekarang kamu sudah memahami seluruh cara menjalankan JavaScript, mulai dari paling awal hingga metode lanjutan.
| Metode | Kapan Digunakan |
|---|---|
| Inline script | Belajar cepat & eksperimen kecil |
File .js eksternal | Proyek nyata |
| Console browser | Testing & debugging |
| VSCode | Development workflow profesional |
| Node.js | Backend & advanced JavaScript |
Dengan memahami semua metode ini, kamu sudah berada di jalur tepat menjadi JavaScript developer yang solid.
