JavaScript Itu Apa? Membuat Website Jadi Interaktif

1. Apa Itu JavaScript?#

JavaScript adalah bahasa pemrograman yang digunakan untuk memberikan perilaku dan interaksi pada aplikasi.

Dalam pengembangan website, JavaScript sering digunakan untuk merespons tindakan pengguna, mengubah konten halaman, memvalidasi input, hingga berkomunikasi dengan server.

Agar lebih mudah dipahami, kita bisa membandingkan peran HTML, CSS, dan JavaScript.

Bayangkan kita sedang membuat sebuah rumah.

HTML adalah struktur rumah, seperti dinding, pintu, dan ruangan.

CSS mengatur tampilannya, seperti warna cat, dekorasi, dan tata letak furnitur.

JavaScript membantu membuat berbagai hal dapat bekerja, misalnya lampu yang menyala ketika sakelar ditekan.

Perumpamaan ini memang tidak menjelaskan seluruh kemampuan ketiganya, tetapi cukup untuk memahami perbedaan peran masing-masing.

Dan satu hal penting: JavaScript bukan Java.

Walaupun namanya mirip, keduanya merupakan bahasa pemrograman yang berbeda.

2. Apakah JavaScript Hanya Digunakan di Browser?#

Tidak.

JavaScript memang sangat dikenal sebagai bahasa pemrograman untuk browser, tetapi penggunaannya tidak terbatas pada halaman web.

Dengan runtime seperti Node.js, JavaScript juga dapat dijalankan di luar browser.

Contohnya untuk membuat:

• Backend aplikasi web.
• REST API.
• Program otomatisasi.
• Tools berbasis command line.
• Aplikasi yang memproses data.

Namun, dalam series JavaScript ini, kita akan berfokus pada JavaScript yang berjalan di browser.

Kenapa?

Karena kita ingin melanjutkan halaman HTML dan CSS yang sudah dibuat sebelumnya.

Setelah memahami fondasi JavaScript, kita akan lebih siap mempelajari penggunaannya pada backend.

3. Cara Menambahkan JavaScript ke HTML#

Untuk mulai menggunakan JavaScript, kita tidak perlu langsung memasang framework atau tools yang rumit.

Cukup siapkan browser dan text editor.

Buat folder latihan bernama belajar-javascript, kemudian buat file index.html.

Isi dengan kode berikut:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta
6
    name="viewport"
7
    content="width=device-width, initial-scale=1.0"
8
  >
9
  <title>Belajar JavaScript</title>
10
</head>
11
<body>
12
  <h1>Halo, Gabuters!</h1>
13
  <p>Ini adalah halaman JavaScript pertama kita.</p>
14

15
  <script>
16
    console.log("Halo dari JavaScript!");
17
  </script>
18
</body>
19
</html>

Perhatikan bagian berikut:

1
<script>
2
  console.log("Halo dari JavaScript!");
3
</script>

Elemen <script> digunakan untuk menyisipkan JavaScript ke dalam dokumen HTML.

Ketika browser membaca bagian tersebut, kode JavaScript di dalamnya akan dijalankan.

Pada contoh ini, kita menggunakan console.log() untuk menampilkan pesan.

Tetapi pesan tersebut tidak muncul sebagai teks di halaman.

Lalu, munculnya di mana?

Kita akan melihatnya melalui Console pada Developer Tools.

4. Mengenal Console pada Browser#

Console adalah salah satu bagian dari Developer Tools yang sangat membantu ketika belajar dan mengembangkan JavaScript.

Melalui Console, kita bisa melihat pesan, memeriksa nilai, dan menemukan berbagai kesalahan pada kode.

Coba lakukan langkah berikut:

1. Buka index.html menggunakan Google Chrome.
2. Tekan F12 atau klik kanan lalu pilih Inspect.
3. Pilih tab Console.
4. Cari pesan yang muncul dari kode JavaScript kita.

Seharusnya terlihat pesan:

1
Halo dari JavaScript!

Kita juga bisa mengetik JavaScript langsung di Console.

Coba masukkan:

1
console.log("Saya sedang belajar JavaScript");

Lalu tekan Enter.

Browser akan menjalankan kode tersebut dan menampilkan pesannya.

Jika browser menampilkan peringatan keamanan ketika kita mencoba menempelkan kode ke Console, jangan sembarangan mengikuti instruksi untuk mengizinkan paste.

Untuk latihan, ketik sendiri kode sederhana yang kita pahami.

Console sangat berguna untuk belajar, tetapi jangan pernah menjalankan kode asing yang tidak kita ketahui fungsinya.

5. Menulis JavaScript di File Terpisah#

Pada contoh sebelumnya, kita menulis JavaScript langsung di dalam HTML.

Cara tersebut boleh digunakan untuk latihan sederhana.

Namun, ketika kode mulai bertambah, biasanya lebih rapi jika JavaScript disimpan dalam file tersendiri.

Sekarang buat file script.js di folder yang sama dengan index.html.

Strukturnya menjadi:

1
belajar-javascript/
2
├── index.html
3
└── script.js

Isi script.js:

1
console.log("JavaScript berhasil dijalankan!");
2
console.log("Selamat belajar, Gabuters!");

Kemudian ubah bagian akhir index.html menjadi:

1
<script src="script.js"></script>
2
</body>
3
</html>

Hapus kode <script> lama yang berisi console.log() agar tidak dijalankan dua kali.

Atribut src menunjukkan lokasi file JavaScript yang ingin digunakan.

Karena script.js berada di folder yang sama dengan index.html, kita cukup menuliskan nama filenya.

Sekarang buka kembali halaman dan lihat Console.

Jika semuanya benar, dua pesan dari script.js akan muncul.

Dengan pemisahan ini, HTML dapat berfokus pada struktur halaman, sedangkan JavaScript ditempatkan dalam file yang khusus menangani logika.

Nantinya, kita juga akan mengenal cara memuat JavaScript menggunakan defer dan module. Tetapi untuk sekarang, penggunaan <script> di akhir <body> sudah cukup untuk latihan kita.

6. Mengenal Statement dan Komentar#

Sebelum melangkah lebih jauh, ada dua hal sederhana yang perlu kita kenal.

1
console.log("Halo!");
2
console.log("Saya belajar JavaScript");

1
// Menampilkan pesan ke Console
2
console.log("Halo, Gabuters!");

1
/*
2
  Ini adalah latihan JavaScript pertama.
3
  Kita sedang mempelajari cara kerja Console.
4
*/
5
console.log("Belajar JavaScript");

7. Mengenal Variabel dalam JavaScript#

Sekarang kita mulai masuk ke konsep pemrograman.

Bayangkan kita ingin menyimpan nama pengunjung, jumlah artikel, atau status sebuah tombol.

Kita membutuhkan tempat untuk menyimpan nilai tersebut agar bisa digunakan kembali.

Di JavaScript, salah satu caranya adalah menggunakan variabel.

Contohnya:

1
let nama = "BapakGabut";
2

3
console.log(nama);

Hasilnya:

1
BapakGabut

Kita membuat variabel bernama nama dan memberikan nilai "BapakGabut".

Kemudian, kita menggunakan variabel tersebut pada console.log().

Dengan cara ini, kita tidak perlu menulis nilai yang sama berulang kali setiap kali ingin menggunakannya.

1
let jumlahArtikel = 5;
2

3
console.log(jumlahArtikel);
4

5
jumlahArtikel = 6;
6

7
console.log(jumlahArtikel);

1
5
2
6

1
const namaWebsite = "BapakGabut";
2

3
console.log(namaWebsite);

1
const namaWebsite = "BapakGabut";
2

3
namaWebsite = "Website Lain";

1
var nama = "BapakGabut";

8. Aturan Dasar Penamaan Variabel#

Ketika membuat variabel, kita tidak bisa memberikan nama secara sembarangan.

Contoh yang benar:

1
let namaPengguna = "Gabuters";
2
let jumlahArtikel = 10;
3
let sudahLogin = false;

Contoh yang salah:

1
let 1nama = "Gabuters";
2
let nama pengguna = "Gabuters";

Nama variabel tidak boleh diawali angka dan tidak boleh mengandung spasi biasa.

Selain itu, JavaScript bersifat case-sensitive.

Artinya:

1
let nama = "BapakGabut";
2
let Nama = "Gabuters";

nama dan Nama merupakan dua variabel yang berbeda.

Untuk penamaan yang terdiri dari beberapa kata, kita biasanya menggunakan pola camelCase.

Contohnya:

1
let jumlahPengunjung = 100;
2
let namaWebsite = "BapakGabut";
3
let statusPengguna = "aktif";

Nama variabel sebaiknya menjelaskan informasi yang disimpan.

Bandingkan:

1
let x = 100;

Dengan:

1
let jumlahPengunjung = 100;

Contoh kedua lebih mudah dipahami tanpa harus menebak arti nilainya.

9. Mengenal Operator Dasar#

Setelah memahami variabel, kita akan mencoba melakukan operasi sederhana terhadap nilai yang disimpan.

JavaScript mempunyai berbagai operator.

Untuk artikel pertama ini, kita mulai dari operator aritmatika dan assignment.

1
const angkaPertama = 10;
2
const angkaKedua = 3;
3

4
console.log(angkaPertama + angkaKedua);
5
console.log(angkaPertama - angkaKedua);
6
console.log(angkaPertama * angkaKedua);
7
console.log(angkaPertama / angkaKedua);
8
console.log(angkaPertama % angkaKedua);

1
13
2
7
3
30
4
3.3333333333333335
5
1

1
let jumlah = 5;
2

3
jumlah = 10;
4

5
console.log(jumlah);

1
10

1
let jumlahArtikel = 5;
2

3
jumlahArtikel += 2;
4

5
console.log(jumlahArtikel);

1
7

1
jumlahArtikel += 2;

1
jumlahArtikel = jumlahArtikel + 2;

10. Menggabungkan Teks dan Variabel#

Sekarang kita coba menggunakan variabel untuk membuat pesan.

1
const nama = "BapakGabut";
2
const jumlahArtikel = 10;
3

4
console.log(
5
  "Halo, saya " + nama + ". Saya punya " + jumlahArtikel + " artikel."
6
);

Hasilnya:

1
Halo, saya BapakGabut. Saya punya 10 artikel.

Pada contoh tersebut, operator + digunakan untuk menggabungkan teks.

JavaScript juga menyediakan cara yang lebih praktis menggunakan template literal.

1
const nama = "BapakGabut";
2
const jumlahArtikel = 10;
3

4
console.log(
5
  `Halo, saya ${nama}. Saya punya ${jumlahArtikel} artikel.`
6
);

Hasilnya sama.

Perhatikan bahwa template literal menggunakan tanda backtick (`), bukan tanda petik satu atau petik dua.

Dengan ${...}, kita bisa menyisipkan nilai variabel atau ekspresi ke dalam teks.

Cara ini akan sering kita gunakan pada artikel-artikel berikutnya.

11. Praktik: Menghitung Jumlah Artikel BapakGabut#

Sekarang kita gabungkan beberapa konsep yang sudah dipelajari.

Bayangkan BapakGabut mempunyai artikel dari beberapa kategori.

Kita ingin menghitung jumlah seluruh artikel dan menampilkan hasilnya di Console.

Buka script.js, lalu isi dengan:

1
const artikelProgramming = 8;
2
const artikelGame = 3;
3
const artikelLainnya = 2;
4

5
const totalArtikel =
6
  artikelProgramming +
7
  artikelGame +
8
  artikelLainnya;
9

10
const namaWebsite = "BapakGabut";
11

12
console.log(`Website: ${namaWebsite}`);
13
console.log(`Artikel Programming: ${artikelProgramming}`);
14
console.log(`Artikel Game: ${artikelGame}`);
15
console.log(`Artikel Lainnya: ${artikelLainnya}`);
16
console.log(`Total Artikel: ${totalArtikel}`);

Hasilnya:

1
Website: BapakGabut
2
Artikel Programming: 8
3
Artikel Game: 3
4
Artikel Lainnya: 2
5
Total Artikel: 13

Dari latihan ini, kita sudah menggunakan:

• const untuk menyimpan nilai.
• Nama variabel dengan pola camelCase.
• Operator + untuk penjumlahan.
• Template literal untuk menyusun pesan.
• console.log() untuk menampilkan hasil.

Perlu diingat, jumlah artikel pada contoh tersebut hanya data latihan, bukan jumlah artikel BapakGabut yang sebenarnya.

Sekarang coba ubah jumlah artikel pada salah satu kategori.

Misalnya:

1
const artikelProgramming = 12;

Jalankan kembali kode tersebut.

Nilai total akan berubah mengikuti data yang kita masukkan.

Inilah salah satu manfaat menggunakan variabel: kita bisa mengubah data tanpa harus menghitung dan menulis ulang seluruh hasil secara manual.

12. Kesalahan Umum Saat Pertama Belajar JavaScript#

1
const namaWebsite = "BapakGabut";
2

3
console.log(namawebsite);

1
const jumlah = 5;
2

3
jumlah = 10;

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

1
console.log("Halo!");

13. Latihan Mandiri#

Sekarang giliran Gabuters mencoba.

Buat file JavaScript sederhana untuk menyimpan informasi berikut:

1. Nama website.
2. Nama kategori artikel.
3. Jumlah artikel yang sudah diterbitkan.
4. Jumlah artikel yang masih direncanakan.

Kemudian, hitung total artikel yang sudah diterbitkan dan yang masih direncanakan.

Tampilkan hasilnya menggunakan template literal.

Contoh keluaran:

1
Website: BapakGabut
2
Kategori: Programming
3
Artikel terbit: 8
4
Artikel direncanakan: 5
5
Total artikel: 13

Sebagai tantangan tambahan, coba gunakan let untuk mengubah jumlah artikel terbit setelah satu artikel baru selesai dibuat.

Amati bagaimana hasil perhitungannya berubah.

Tidak perlu membuat tampilan HTML yang rumit dulu.

Fokus latihan ini adalah memahami variabel, operator, dan cara menjalankan JavaScript.

14. Apa yang Sudah Kita Pelajari?#

Pada artikel pertama ini, kita sudah mengenal beberapa fondasi JavaScript.

Kita memahami bahwa JavaScript dapat digunakan untuk memberikan perilaku dan logika pada halaman web.

Kita juga sudah mencoba menjalankan JavaScript melalui elemen <script>, file terpisah, dan Console browser.

Selain itu, kita telah mempelajari variabel let dan const, penamaan variabel, operator dasar, serta template literal.

Semua materi tersebut akan terus digunakan ketika kita mulai membuat program yang lebih kompleks.

Tetapi ada satu pertanyaan yang belum kita bahas secara mendalam.

Mengapa sebuah nilai ditulis menggunakan tanda petik, sementara nilai lainnya tidak?

Mengapa "10" dan 10 bisa menghasilkan perilaku yang berbeda?

Lalu, apa perbedaan null, undefined, dan false?

Pertanyaan-pertanyaan tersebut berkaitan dengan tipe data.

Pada artikel berikutnya, kita akan belajar Mengenal Tipe Data JavaScript dan Cara Menggunakannya.

Kita akan membahas string, number, boolean, null, undefined, konversi tipe data, serta beberapa perilaku JavaScript yang sering membuat pemula kebingungan.

Sampai jumpa di artikel berikutnya, Gabuters!