Program pertama

Program JavaScript pertama hanya butuh satu baris, yaitu pemanggilan console.log yang mencetak teks ke konsol. Topik ini menunjukkan cara menulis program semacam itu lalu menjalankannya di tiga tempat yang berbeda, yaitu konsol browser, tag script di dalam berkas HTML, dan Node.js lewat terminal. Ketiga tempat menghasilkan keluaran yang sama, tetapi kepraktisannya berbeda sesuai tujuan. Setelah menyelesaikan topik ini, program pertama dapat ditulis, dijalankan, dan diperiksa keluarannya di tempat yang paling sesuai.

Perintah console.log#

Alat utama untuk mencoba JavaScript pada tahap ini adalah console.log, yaitu fungsi yang mencetak nilai ke konsol. Fungsinya menerima satu atau lebih argumen, dan setiap pemanggilan menghasilkan satu baris keluaran. Nilai yang dicetak bisa berupa teks, angka, hasil perhitungan, atau gabungan teks dan angka. Contoh paling sederhananya terlihat pada kode berikut.

console.log("Halo, dunia!");
console.log(2 + 3);

Halo, dunia!
5

Angka 5 pada keluaran adalah hasil perhitungan 2 + 3, bukan teks yang ditulis apa adanya. Baris yang sama pada program sungguhan biasanya memakai dua argumen sekaligus, yaitu teks penanda dan hasil perhitungannya, lalu console.log menggabungkan keduanya dengan pemisah spasi. Pola inilah yang dipakai setiap kali nilai perlu diperiksa saat program berjalan. Sebagian besar contoh pada modul ini memakai console.log untuk menampilkan hasilnya, karena inilah cara paling murah untuk melihat apa yang terjadi di dalam program.

Konsol browser, tempat mencoba tercepat#

Cara tercepat menjalankan JavaScript adalah konsol browser, tanpa membuat satu berkas pun. Buka sembarang halaman di browser modern, tekan F12 atau klik kanan lalu pilih Inspect, dan panel DevTools akan muncul. Pindah ke tab Console, ketik console.log("Halo, dunia!"), lalu tekan Enter. Baris yang sama langsung dievaluasi dan keluarannya muncul persis di bawahnya.

Konsol berperan sebagai sesi interaktif, artinya setiap baris dijalankan begitu Enter ditekan dan variabel dari baris sebelumnya masih diingat selama halamannya terbuka. Sifat ini menjadikan konsol tempat yang cocok untuk mencoba potongan kode pendek, menguji satu fungsi, atau memeriksa nilai saat melacak bug. Konsol juga menampilkan pesan error beserta nomor barisnya ketika kode salah ketik, sehingga kesalahan terlihat seketika. Halaman itu sendiri tetap tidak berubah, karena console.log tidak menulis apa pun ke dokumen HTML.

Menyematkan JavaScript ke halaman dengan tag script#

Langkah berikutnya adalah menyimpan kode ke dalam berkas HTML agar dapat dibuka berulang kali atau dibagikan. JavaScript disematkan lewat tag <script> yang ditulis di dalam halaman, dan seluruh isinya dieksekusi browser pada saat halaman dimuat. Berkas berikut adalah satu halaman kecil yang memuat dua pemanggilan console.log.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Latihan JavaScript pertama</title>
</head>
<body>
  <h1>Latihan JavaScript pertama</h1>
  <script>
    console.log("Pesan dari tag script");
    console.log("2 + 3 =", 2 + 3);
  </script>
</body>
</html>

Simpan berkas di atas dengan nama latihan.html, lalu buka di browser. Halaman hanya menampilkan satu judul, sedangkan kedua baris keluarannya berada di konsol, sehingga panel DevTools perlu dibuka untuk melihatnya. Pola semacam ini dipakai oleh setiap halaman web yang memakai JavaScript, mulai dari validasi form sampai aplikasi yang kompleks. Pada contoh di atas, tag script sengaja diletakkan di akhir body agar seluruh elemen di atasnya sudah tersedia ketika kode berjalan, dan kebiasaan ini akan terus dipakai pada modul DOM.

Menjalankan berkas dengan Node.js#

Tempat ketiga tidak melibatkan browser sama sekali. Node.js adalah runtime JavaScript di luar browser, yaitu program yang mengeksekusi kode JavaScript langsung dari terminal. Cara memakainya paling sederhana, yaitu menyimpan kode ke berkas berekstensi .js lalu memanggilnya dengan perintah node. Berkas berikut adalah program pertama yang akan dijalankan lewat terminal.

// Program pertama: menyapa dan menghitung
console.log("Halo, Citra!");
console.log("2 + 3 =", 2 + 3);

Halo, Citra!
2 + 3 = 5

Jalankan programnya dari terminal dengan perintah berikut, dari direktori tempat sapa.js berada.

# jalankan program pertama dengan Node.js
node sapa.js

Halo, Citra!
2 + 3 = 5

Keluaran perintah node sama persis dengan blok Keluaran sebelumnya, karena program yang dijalankan tetap berkas sapa.js yang sama. Berbeda dengan konsol browser, Node.js membaca seluruh isi berkas dari atas ke bawah, menjalankannya satu per satu, lalu berhenti ketika berkas selesai. Program di atas mencetak dua baris dan langsung berakhir, sehingga perintah node perlu dipanggil ulang setiap kali kodenya disunting. Pola ini terasa kaku di awal, tetapi justru inilah cara kerja banyak perkakas pengembangan dan seluruh skrip Node.js. Karena tidak melibatkan browser maupun HTML, contoh berbasis Node.js juga paling mudah diperiksa ulang dari terminal.

Kapan memakai yang mana#

Ketiga tempat di atas menjalankan kode JavaScript yang sama, tetapi perannya berbeda dalam alur kerja sehari-hari. Konsol browser adalah tempat mencoba potongan kode pendek tanpa perlu berkas apa pun. Tag script dipakai ketika kode memang bagian dari sebuah halaman web. Node.js dipakai untuk program yang berdiri sendiri, seperti skrip pengolahan berkas dan hampir semua contoh pada jalur ini.

Perilaku bahasanya identik di ketiga tempat, sehingga pemahaman yang dibangun di satu tempat langsung berlaku di tempat lainnya. Perbedaannya hanya terletak pada lingkungan sekeliling, misalnya ketersediaan alert() di browser dan ketersediaan API berkas di Node.js. Contoh-contoh pada modul ini kebanyakan berjalan di Node.js, sedangkan hal-hal yang khusus browser dibahas pada modul DOM dan event. Konsol browser tetap layak dibuka kapan saja untuk menguji gagasan sebelum dimasukkan ke berkas.

Ringkasan#

• console.log mencetak nilai ke konsol, menerima beberapa argumen, dan menjadi alat pemeriksaan utama selama belajar JavaScript.
• Konsol browser mengeksekusi satu baris kode begitu Enter ditekan, tanpa berkas, dan cocok untuk percobaan cepat.
• Tag script menyematkan JavaScript ke halaman HTML, dan keluarannya dilihat pada tab Console DevTools.
• Node.js menjalankan berkas .js lewat perintah node dari terminal, dan menjadi tempat utama contoh-contoh pada jalur ini.

Referensi#

• JavaScript — MDN Web Docs — Dokumentasi induk JavaScript yang memuat pengantar bahasa dan referensi konsolnya.
• The Modern JavaScript Tutorial — javascript.info — Tutorial JavaScript yang membahas lingkungan eksekusi dan dasar bahasanya secara bertahap.