Apa Itu JavaScript? Pengertian, Fungsi, dan Contoh untuk Pemula

Setelah memahami HTML dan CSS, langkah berikutnya dalam belajar web development adalah JavaScript. HTML digunakan untuk menyusun struktur halaman, CSS mengatur tampilannya, sedangkan JavaScript membuat halaman dapat merespons tindakan pengguna.

Dengan JavaScript, sebuah website dapat memiliki tombol interaktif, menu yang dapat dibuka dan ditutup, validasi formulir, kalkulator, pencarian, notifikasi, perubahan konten tanpa reload, hingga komunikasi dengan API.

Jika kamu masih mempelajari fondasi web, baca terlebih dahulu Apa Itu HTML?, Struktur HTML yang Benar untuk Website Pemula, dan Apa Itu CSS?.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang banyak digunakan untuk membuat halaman web menjadi interaktif dan dinamis.

JavaScript dapat membaca dan mengubah elemen HTML, memodifikasi CSS, memproses data, menjalankan logika, merespons event pengguna, serta berkomunikasi dengan server.

Contoh sederhana:

console.log("Halo dari JavaScript!");

Ketika kode tersebut dijalankan, teks akan ditampilkan pada console browser.

Apa Fungsi JavaScript?

JavaScript memiliki banyak fungsi dalam pengembangan website. Berikut beberapa penggunaan yang paling umum.

1. Membuat Tombol Interaktif

Misalnya sebuah tombol yang menampilkan pesan ketika diklik.

<button id="tombol">
  Klik Saya
</button>

JavaScript:

const tombol =
  document.getElementById("tombol");

tombol.addEventListener("click", () => {
  alert("Tombol berhasil diklik!");
});

2. Mengubah Isi Halaman

JavaScript dapat mengubah teks yang terdapat pada HTML.

<p id="pesan">
  Halo!
</p>

JavaScript:

const pesan =
  document.getElementById("pesan");

pesan.textContent =
  "Selamat datang di Ahli Ngodink!";

3. Mengubah Tampilan

JavaScript dapat menambah atau menghapus class CSS berdasarkan kondisi tertentu.

const menu =
  document.querySelector(".menu");

menu.classList.add("active");

CSS:

.menu {
  display: none;
}

.menu.active {
  display: block;
}

4. Memvalidasi Formulir

JavaScript dapat memeriksa input sebelum formulir dikirim.

const nama =
  document.getElementById("nama");

if (nama.value.trim() === "") {
  alert("Nama harus diisi.");
}

5. Mengolah Data

JavaScript dapat melakukan perhitungan dan mengolah data.

const harga = 50000;
const jumlah = 3;

const total =
  harga * jumlah;

console.log(total);

6. Mengambil Data dari API

JavaScript modern dapat berkomunikasi dengan API menggunakan fetch().

fetch("/api/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Konsep API akan sangat berguna ketika kamu mulai membangun aplikasi web yang mengambil data dari server atau layanan lain.

Hubungan HTML, CSS, dan JavaScript

Ketiga teknologi ini memiliki tanggung jawab yang berbeda.

• HTML membuat struktur dan konten.
• CSS mengatur tampilan dan layout.
• JavaScript mengatur logika dan interaksi.

Contohnya, HTML membuat tombol:

<button id="belajar">
  Mulai Belajar
</button>

CSS mengatur tampilannya:

#belajar {
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

JavaScript menentukan apa yang terjadi ketika tombol diklik:

const belajar =
  document.getElementById("belajar");

belajar.addEventListener("click", () => {
  alert("Ayo mulai belajar!");
});

Untuk memahami pembagian fungsi tersebut lebih jelas, baca juga Perbedaan HTML, CSS, dan JavaScript.

Cara Menambahkan JavaScript ke HTML

Ada beberapa cara menggunakan JavaScript pada halaman HTML.

1. Inline JavaScript

<button
  onclick="alert('Halo!')"
>
  Klik
</button>

Cara ini mudah untuk percobaan, tetapi kurang ideal untuk proyek yang lebih besar.

2. Internal JavaScript

Kode JavaScript dapat ditulis menggunakan elemen <script>.

<script>

  console.log("Halo!");

</script>

3. External JavaScript

Pada proyek website, JavaScript biasanya dipisahkan ke file tersendiri.

Struktur folder:

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

Kemudian hubungkan file tersebut ke HTML:

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

Atribut defer membantu browser memproses HTML terlebih dahulu sebelum menjalankan script.

Variabel JavaScript

Variabel digunakan untuk menyimpan nilai yang akan digunakan oleh program.

JavaScript modern biasanya menggunakan const dan let.

const nama =
  "Ahli Ngodink";

let jumlahArtikel = 10;

const digunakan ketika referensi nilai tidak perlu diubah, sedangkan let digunakan ketika nilainya dapat berubah.

Tipe Data JavaScript

JavaScript memiliki beberapa tipe data dasar.

String

const nama =
  "Ahli Ngodink";

Number

const umur = 20;
const harga = 15000;

Boolean

const aktif = true;
const selesai = false;

Array

const materi = [
  "HTML",
  "CSS",
  "JavaScript"
];

Object

const artikel = {
  judul: "Belajar JavaScript",
  kategori: "Dasar Web",
  published: true
};

Operator JavaScript

Operator digunakan untuk melakukan berbagai operasi terhadap nilai.

const a = 10;
const b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

JavaScript juga memiliki operator perbandingan.

console.log(10 > 5);
console.log(10 === 10);
console.log(10 !== 5);

Percabangan dengan If

Program sering membutuhkan keputusan berdasarkan kondisi tertentu.

const umur = 18;

if (umur >= 17) {
  console.log("Sudah cukup umur.");
} else {
  console.log("Belum cukup umur.");
}

JavaScript akan menjalankan blok kode berdasarkan apakah kondisi bernilai benar atau salah.

Function JavaScript

Function digunakan untuk mengelompokkan logika agar dapat digunakan kembali.

function sapa(nama) {
  return "Halo, " + nama;
}

console.log(
  sapa("Ahli Ngodink")
);

JavaScript modern juga sering menggunakan arrow function.

const tambah = (a, b) => {
  return a + b;
};

Array JavaScript

Array digunakan untuk menyimpan beberapa nilai dalam satu variabel.

const bahasa = [
  "HTML",
  "CSS",
  "JavaScript"
];

console.log(bahasa[0]);

Array sangat sering digunakan untuk mengelola daftar data.

Object JavaScript

Object digunakan untuk menyimpan data dalam bentuk pasangan key dan value.

const pengguna = {
  nama: "Budi",
  level: "Pemula",
  aktif: true
};

console.log(
  pengguna.nama
);

Object menjadi konsep penting karena banyak data dari API juga menggunakan struktur yang mirip dengan object JavaScript.

Apa Itu DOM?

DOM atau Document Object Model merupakan representasi struktur HTML yang dapat dibaca dan dimanipulasi melalui JavaScript.

Misalnya HTML:

<h1 id="judul">
  Belajar JavaScript
</h1>

JavaScript dapat mengambil elemen tersebut:

const judul =
  document.getElementById("judul");

Kemudian mengubah isinya:

judul.textContent =
  "Saya Sedang Belajar DOM";

DOM merupakan salah satu konsep JavaScript browser yang sangat penting dipahami oleh developer frontend.

Mengambil Elemen dengan querySelector

Selain getElementById(), JavaScript menyediakan querySelector().

const tombol =
  document.querySelector(".button");

const judul =
  document.querySelector("#judul");

querySelector() menggunakan pola selector seperti CSS sehingga cukup fleksibel untuk memilih elemen.

Apa Itu Event?

Event adalah kejadian yang terjadi pada halaman web.

Contohnya:

• Pengguna mengklik tombol.
• Pengguna mengetik di input.
• Formulir dikirim.
• Mouse berada di atas elemen.
• Halaman selesai dimuat.

Contoh event click:

const tombol =
  document.querySelector(".button");

tombol.addEventListener(
  "click",
  () => {
    console.log("Tombol diklik");
  }
);

Contoh Event Input

JavaScript dapat membaca apa yang sedang diketik pengguna.

const input =
  document.querySelector("#nama");

input.addEventListener(
  "input",
  () => {
    console.log(input.value);
  }
);

Konsep ini banyak digunakan pada fitur pencarian langsung, validasi, dan autocomplete.

Menyimpan Data dengan LocalStorage

Browser menyediakan localStorage untuk menyimpan data sederhana pada perangkat pengguna.

localStorage.setItem(
  "nama",
  "Ahli Ngodink"
);

Untuk mengambil kembali data:

const nama =
  localStorage.getItem("nama");

console.log(nama);

Data localStorage tetap tersedia meskipun halaman direfresh, selama pengguna belum menghapus data browser.

Contoh Proyek JavaScript Sederhana

Kita dapat membuat penghitung sederhana.

HTML:

<h1 id="angka">0</h1>

<button id="tambah">
  Tambah
</button>

JavaScript:

let angka = 0;

const tampilan =
  document.getElementById("angka");

const tombol =
  document.getElementById("tambah");

tombol.addEventListener(
  "click",
  () => {
    angka++;

    tampilan.textContent =
      angka;
  }
);

Setiap tombol diklik, angka akan bertambah satu.

Walaupun sederhana, contoh tersebut sudah menggunakan beberapa konsep penting yaitu variabel, DOM, event, dan perubahan konten.

Gunakan Console Browser

Ketika belajar JavaScript, console browser merupakan alat yang sangat membantu.

Pada Google Chrome kamu dapat membuka Developer Tools kemudian memilih tab Console.

Kode:

console.log(
  "Testing JavaScript"
);

sangat berguna untuk melihat nilai variabel dan membantu mencari masalah saat program tidak berjalan seperti yang diharapkan.

Kesalahan JavaScript yang Sering Dilakukan Pemula

Beberapa kesalahan umum antara lain:

• Lupa menghubungkan file JavaScript ke HTML.
• Salah menulis nama variabel.
• Mengambil elemen HTML yang tidak tersedia.
• Tidak memahami perbedaan const dan let.
• Terlalu cepat menggunakan framework sebelum memahami JavaScript dasar.
• Tidak memeriksa error melalui Console.
• Menulis seluruh logika dalam satu function besar.

Urutan Belajar JavaScript untuk Pemula

Urutan yang dapat digunakan untuk mulai belajar adalah:

1. Variabel.
2. Tipe data.
3. Operator.
4. If dan else.
5. Loop.
6. Function.
7. Array.
8. Object.
9. DOM.
10. Event.
11. LocalStorage.
12. Fetch API.

Setelah konsep dasar dikuasai, lanjutkan dengan membuat proyek kecil agar setiap konsep dapat dipraktikkan.

Ide Proyek JavaScript untuk Pemula

Beberapa proyek sederhana yang dapat digunakan sebagai latihan adalah:

• Counter.
• Kalkulator sederhana.
• To-do list.
• Dark mode.
• Validasi formulir.
• Random quote.
• Pencarian artikel.
• Catatan menggunakan localStorage.

Apakah JavaScript Hanya untuk Browser?

Tidak. JavaScript juga dapat dijalankan di luar browser menggunakan runtime seperti Node.js.

Dengan Node.js, JavaScript dapat digunakan untuk membuat backend, API, automation, command-line tools, dan berbagai aplikasi lainnya.

Namun bagi pemula, sebaiknya kuasai terlebih dahulu JavaScript dasar dan interaksi dengan HTML sebelum masuk ke ekosistem backend JavaScript.

Apa yang Dipelajari Setelah JavaScript?

Setelah memahami JavaScript dasar, kamu dapat melanjutkan ke:

• DOM lebih mendalam.
• Fetch API.
• Async dan await.
• JSON.
• REST API.
• Git dan GitHub.
• Backend.
• Framework JavaScript.

Sebelum masuk terlalu jauh, pastikan kamu sudah pernah membuat proyek website sederhana dari awal. Kamu dapat menggunakan panduan Cara Membuat Website Pertama dari Nol sebagai latihan.

Memublikasikan Website JavaScript

Website yang terdiri dari HTML, CSS, dan JavaScript dapat langsung dipublikasikan ke hosting selama tidak membutuhkan proses backend khusus.

File seperti:

index.html
style.css
script.js

dapat diunggah ke hosting agar website dapat diakses melalui internet.

Jika menggunakan cPanel, baca panduan Cara Upload Website HTML ke cPanel.

Kesimpulan

JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan logika dan interaksi pada halaman web. Dengan JavaScript, halaman dapat merespons klik, membaca input, mengubah konten, memvalidasi data, menyimpan informasi di browser, serta mengambil data dari API.

Untuk pemula, pelajari JavaScript secara bertahap mulai dari variabel, tipe data, kondisi, function, array, object, DOM, dan event.

HTML, CSS, dan JavaScript merupakan fondasi utama frontend web development. Setelah ketiganya dipahami melalui praktik, kamu akan memiliki dasar yang kuat untuk mempelajari teknologi web yang lebih kompleks.