Mempersiapkan Lingkungan Pengembangan JavaScript

Sebelum memulai belajar, mari kita siapkan lingkungan pengembangan JavaScript terlebih dahulu.

Kita akan menginstal kode editor dan browser...

Setelah itu kita akan berkenalan dengan salah satu alat pengembangan (Developer Tools) yang ada di browser, Console, karena kita akan menampilkan kode hasil evaluasi atau output JavaScript ke sana.

Kode Editor

Kita sebetulnya bisa menulis kode dan membuat file JavaScript di aplikasi teks editor bawaan Windows, Notepad.

Namun, karena Notepad tidak dibuat untuk menulis kode, aplikasi tersebut tidak dibekali dengan fitur-fitur yang dapat mambantu kita dalam menulis kode, sehingga rawan kesalahan.

Dengan menggunakan kode editor, kita akan menulis kode yang rapi dengan mudah.

Kode editor biasanya dibekali dengan penyorotan sintaks yang secara otomatis memberikan warna ketika kita menulis kode sehingga kita bisa dengan mudah membedakan mana variabel, fungsi, parameter dan lain sebagainya.

Selain itu, ada juga fitur yang dapat merapikan kode secara otomatis, sehingga kita tidak perlu merapikannya secara manual.

Ada banyak kode editor yang bisa kita gunakan untuk menulis kode JavaScript.

Android:

1. Code Editor
2. Dcoder
3. Spck Code Editor

PC:

1. Visual Studio Code
2. Notepad++
3. Sublime Text

Saat ini Visual Studio Code atau VS Code merupakan yang paling populer dan kita akan menggunakan aplikasi tersebut.

Selain bisa digunakan sepenuhnya secara gratis, Visual Studio Code dibekali dengan banyak fitur yang dapat membantu kita dalam menulis kode, selain itu kita juga bisa memperluas fiturnya menggunakan beragam ekstensi yang tersedia.

Silahkan download Visual Studio Code, lalu install.

Install Ekstensi Prettier

Prettier adalah ekstensi Visual Studio Code yang dapat memformat dan merapikan kode secara otomatis ketika kita menyimpannya (Ctrl + S), sehingga kita tidak perlu merapikan kode secara manual.

Mari kita install ekstensi Prettier di Visual Studio Code:

1. Buka Visual Studio Code.
2. Pilih menu Extensions pada menu vertikal yang ada di sisi kiri, atau tekan Ctrl + Shift + X.
3. Pada menu pencarian ketik "prettier", pilih yang paling atas.
4. Terakhir, klik tombol install.

Tutup terlebih dahulu Visual Studio Code lalu buka kembali, agar ekstensi bisa berjalan dengan lancar.

Kita perlu menyesuaikan beberapa pengaturan, agar Visual Studio Code menggunakan formatter Prettier dan merapikan kode secara otomatis ketika kita kode disimpan.

1. Buka menu File > Preferences > Settings atau tekan Ctrl + ,.
2. Ketik di menu pencarian "default formatter" lalu ubah menjadi "Prettier - Code formatter".
3. Ketik lagi di menu pencarian "format on save" lalu aktifkan opsi tersebut.

Install Ekstensi Live Server

Secara default, ketika kita mengubah kode, kita perlu menyegarkan browser agar browser mengeksekusi kode terbaru yang kita simpan.

Dengan menggunakan ekstensi Live Server kita tidak perlu melakukan hal tersebut, ketika kita menyimpan kode, ekstensi ini akan menyegarkan browser secara otomatis dan mengeksekusi kode terbaru yang kita simpan.

Namun, ekstensi ini akan menambahkan kode JavaScript ke dalam HTML, ini mungkin bisa membuat bingung pemula.

Jika Anda menemukan kode JavaScript yang di awali dengan komentar <!-- Code injected by live-server --> berarti kode tersebut ditambahkan oleh ekstensi Live Server.

Kode ini hanya muncul di browser dan bisa kita lihat menggunakan alat pengembangan di browser, kode ini tidak ditambahkan ke dalam file HTML, hanya muncul di browser.

Jika menyegarkan browser secara manual bukanlah masalah, Anda tidak perlu menginstal ekstensi ini.

Mari kita install ekstensi Live Server di Visual Studio Code:

1. Tekan Ctrl + Shift + X untuk membuka menu Extensions.
2. Di menu pencarian ekstensi ketik "live server" pilih yang paling atas.
3. Terakhir, klik install.

Tutup Visual Studio Code lalu buka kembali agar ekstensi berjalan lancar.

Browser

Saat belajar JavaScript kita memerlukan browser, karena kode yang kita buat akan dieksekusi menggunakan mesin JavaScript yang ada di dalam browser.

Ada banyak browser yang bisa kita gunakan, namun di sini kita akan menggunakan browser sejuta umat, Google Chrome.

Silahkan unduh Google Chrome dan instal.

Mengenal Alat Pengembangan Browser

Sebagian browser PC dibekali dengan alat pengembangan (Developer Tools), termasuk Google Chrome. Developer Tools pada browser berisi beberapa alat yang dapat membantu kita dalam pengembangan web.

Di Google Chrome kita bisa membuka alat pengembangan dengan menekan tombol Ctrl + Shift + J pada keyboard.

Di sana ada banyak alat yang bisa kita gunakan, namun di sini kita hanya memerlukan Console saja karena kita akan menampilkan kode JavaScript hasil evaluasi (output) ke sana.

Untuk menampilkan output ke konsol kita bisa menggunakan console.log("pesan yang ingin ditampilkan").