BAB 2 — Memulai Menjalankan JavaScript: Dari Browser hingga Node.js

BAB 2 — Memulai Menjalankan JavaScript: Dari Browser hingga Node.js

Setelah memahami dasar-dasar JavaScript pada bab sebelumnya, langkah berikutnya adalah mengetahui di mana dan bagaimana JavaScript dijalankan.

JavaScript merupakan bahasa yang fleksibel: ia dapat dijalankan langsung di dalam browser, di file eksternal, bahkan di luar browser menggunakan Node.js.

Bab ini akan membahas seluruh cara menjalankan JavaScript, dari yang paling sederhana hingga yang lebih profesional.

1. Menjalankan JavaScript Melalui Console Browser

Setiap browser modern memiliki Developer Tools yang menyediakan JavaScript Console. Ini adalah tempat terbaik untuk:

  • mencoba kode singkat
  • debugging
  • memeriksa nilai variabel
  • memahami perilaku kode secara cepat

Cara membuka console:

  • Chrome / Edge → Ctrl + Shift + J
  • Firefox → Ctrl + Shift + K
  • Safari → aktifkan Developer Menu lalu tekan Option + Command + C

Contoh menjalankan kode:

console.log("Hello, world!");
3 + 5
"JS".toUpperCase()

Console adalah “laboratorium mini” bagi developer. Tanpa membuat file apa pun, kamu bisa langsung bereksperimen dengan kode JavaScript.

2. Menggunakan <script> Tag: Internal & Eksternal

JavaScript dapat dijalankan di halaman web menggunakan tag <script>. Ada dua cara umum:

A. Internal Script

Kode JavaScript ditempatkan langsung di dalam file HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal Script</title>
</head>
<body>
  <script>
    console.log("Internal script berjalan!");
  </script>
</body>
</html>

Kelebihan:

  • Cepat digunakan
  • Cocok untuk demo kecil

Kekurangan:

  • Tidak rapi untuk proyek besar
  • Sulit dirawat

B. Eksternal Script

Kode JavaScript ditempatkan di file .js terpisah.

<script src="app.js"></script>

Kelebihan:

  • File lebih terorganisir
  • Dapat digunakan ulang di banyak halaman
  • Memungkinkan caching oleh browser untuk performa yang lebih baik

Ini adalah cara standar untuk menjalankan JavaScript pada aplikasi web profesional.

3. Atribut async & defer: Kontrol Cara Browser Memuat Script

Saat JavaScript disertakan melalui <script src="..."></script>, browser harus menentukan kapan script tersebut diunduh dan dijalankan. Atribut async dan defer memberi kontrol terhadap perilaku ini.

A. Tanpa async dan defer

Browser akan:

  1. menghentikan parsing HTML
  2. mengunduh script
  3. menjalankan script
  4. melanjutkan parsing

Ini bisa membuat halaman terasa lambat.

B. async (load secepatnya, jalankan secepatnya)

<script src="script.js" async></script>

Karakteristik:

  • Script diunduh bersamaan dengan HTML
  • Dieksekusi segera setelah siap
  • Bisa mengganggu urutan script lain

Cocok untuk:

  • script independen
  • iklan
  • tracking script

C. defer (tunggu sampai HTML selesai)

<script src="script.js" defer></script>

Karakteristik:

  • Script diunduh paralel
  • Hanya dijalankan setelah HTML selesai diparse
  • Tetap menjaga urutan antar file script

Cocok untuk:

  • aplikasi web
  • script yang memanipulasi DOM
  • library yang bergantung pada urutan

defer hampir selalu menjadi pilihan terbaik untuk frontend modern.

4. Node.js Dasar: Menjalankan JavaScript di Luar Browser

Node.js diciptakan oleh Ryan Dahl pada tahun 2009 dengan ide brilian:
menjalankan JavaScript di server menggunakan mesin V8.

Dengan Node.js, JavaScript tidak lagi terbatas di browser. Sekarang ia dapat digunakan untuk:

  • membuat server web
  • CLI tools
  • aplikasi real-time
  • API backend
  • automasi / scripting

Cara mengecek Node.js: 

node -v
npm -v

Cara menjalankan file JavaScript di Node.js:

node app.js

Contoh kode sederhana:

console.log("Halo dari Node.js!");

Node.js juga memiliki runtime environment sendiri:

  • Sistem modul CommonJS (require)
  • Akses ke filesystem (fs)
  • Library untuk membuat server (http)
  • Event loop dengan model non-blocking

Inilah yang membuat Node.js menjadi sangat populer untuk backend modern.

5. Menjalankan JavaScript dari File .js

Cara paling umum dan terstruktur untuk menjalankan JavaScript adalah dengan menggunakan file .js.

A. Di browser (menggunakan script eksternal)

<script src="main.js"></script>

B. Di Node.js

Buat file main.js:

console.log("Ini file JS eksternal!");

Lalu jalankan:

node main.js

C. Struktur proyek sederhana:

project/
│
├── index.html
├── script/
│   └── main.js
└── style/
    └── style.css

Dengan memisahkan file berdasarkan fungsinya, proyek akan lebih mudah dirawat dan dikembangkan.

Related Posts