(+62) 8970 127 001 [email protected]
#JadilahGenerasiTeknologi
Beranda Artikel Detail
Programming

Membuat Web Mulai Berpikir: Dasar JavaScript, DOM, Event, dan Logika Penjualan

Diterbitkan15 Sep 2026
Statistik Pembaca17 dibaca
Membuat Web Mulai Berpikir: Dasar JavaScript, DOM, Event, dan Logika Penjualan

Topik: JavaScript Fundamentals, DOM, Event, dan Logika Dasar

Pada tiga pertemuan sebelumnya, kita sudah membangun struktur halaman menggunakan HTML dan mempercantiknya dengan CSS. Namun halaman tersebut masih bersifat pasif. Data harga yang ditulis di HTML hanya tampil sebagai teks dan belum dapat dihitung.

Pada Pertemuan 4 kita mulai menggunakan JavaScript. JavaScript memungkinkan halaman melakukan perhitungan, mengambil keputusan, menjalankan perintah berulang, membaca elemen HTML, dan merespons tindakan pengguna.

Karena project kita berorientasi pada Sistem Penjualan Sederhana, contoh JavaScript akan menggunakan data produk, harga, stok, jumlah beli, diskon, dan total transaksi. Contoh dibuat ringan agar fokus tetap pada konsep dasar pemrograman.

Posisi JavaScript dalam Project
HTML = struktur produk dan form.
CSS = tampilan halaman.
JavaScript = logika dan interaksi di browser.

JavaScript pada tahap ini belum menyimpan data secara permanen. Penyimpanan akan dipelajari ketika masuk ke PHP dan MySQL.

Materi dibagi menjadi 5 bagian utama. Setiap bagian ditutup dengan praktik. Pada akhir pertemuan, mahasiswa akan membuat Kalkulator Transaksi Penjualan.

Target Pembelajaran

  • Memahami peran JavaScript pada website.
  • Menjalankan JavaScript melalui file eksternal.
  • Menggunakan console.log untuk melihat hasil program.
  • Memahami variable menggunakan let dan const.
  • Mengenal tipe data string, number, dan boolean.
  • Menggunakan operator aritmatika, perbandingan, dan logika.
  • Menggunakan if, else if, dan else.
  • Mengenal perulangan for.
  • Membuat function sederhana.
  • Memahami DOM secara dasar.
  • Mengambil elemen HTML dengan getElementById.
  • Menangani event klik menggunakan addEventListener.
  • Membaca nilai input dan mengubah isi halaman.
  • Membuat Kalkulator Transaksi Penjualan sederhana.

Materi 1 — Mengenal JavaScript dan Menjalankan Script Pertama

JavaScript adalah bahasa pemrograman yang banyak digunakan untuk memberi logika dan interaksi pada halaman web. Jika HTML membentuk struktur dan CSS mengatur tampilan, JavaScript membuat halaman dapat merespons tindakan pengguna.

Menghubungkan JavaScript dengan HTML

Agar kode lebih rapi, kita menggunakan file JavaScript terpisah. Misalnya:

Struktur Folder

pertemuan-04/
|
+-- index.html
|
+-- js/
    |
    +-- script.js

Menghubungkan JavaScript

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

Elemen script dapat diletakkan sebelum penutup body. Dengan cara ini, struktur HTML sudah dibaca sebelum JavaScript dijalankan.

Console dan console.log

Console pada Developer Tools sangat membantu saat belajar JavaScript. Kita dapat melihat nilai variable, hasil perhitungan, dan pesan debugging tanpa harus menampilkannya di halaman.

Coding 1 — JavaScript Pertama dengan Data Produk

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript Pertama</title>
</head>
<body>

    <h1>NusaTech Store</h1>

    <p>
        Buka Developer Tools lalu lihat tab Console.
    </p>

    <script src="js/script.js"></script>
</body>
</html>

js/script.js

console.log("JavaScript berhasil dijalankan.");

console.log("Produk: Keyboard Mechanical");

console.log("Harga: 350000");

Buka Console
Tekan F12 atau buka Developer Tools, pilih tab Console, lalu refresh halaman. Pesan dari console.log() akan terlihat di sana.

Target Coding 1: mahasiswa berhasil menghubungkan file JavaScript dengan HTML dan melihat output melalui Console.

Materi 2 — Variable, Tipe Data, dan Operator

Program membutuhkan tempat untuk menyimpan nilai. Di JavaScript, kita dapat menggunakan let dan const.

let dan const

  • let digunakan ketika nilainya mungkin berubah.
  • const digunakan ketika variable tidak akan diberi nilai baru.

Contoh Variable

const namaProduk = "Keyboard Mechanical";
const harga = 350000;

let jumlahBeli = 2;

console.log(namaProduk);
console.log(harga);
console.log(jumlahBeli);

Tipe Data Dasar

  • String — teks, misalnya nama produk.
  • Number — angka, misalnya harga dan stok.
  • Boolean — nilai true atau false.

Contoh Tipe Data

const namaProduk = "Mouse Wireless";
const harga = 150000;
const tersedia = true;

console.log(namaProduk);
console.log(harga);
console.log(tersedia);

Operator Aritmatika

Operator aritmatika digunakan untuk melakukan perhitungan. Contoh yang paling dekat dengan sistem penjualan adalah perkalian harga dengan jumlah beli.

Menghitung Subtotal

const harga = 350000;
const jumlahBeli = 2;

const subtotal = harga * jumlahBeli;

console.log(subtotal);

Operator Perbandingan dan Logika

Operator perbandingan digunakan untuk membandingkan nilai, misalnya >, <, >=, ===, dan !==.

Operator logika seperti && dan || dapat menggabungkan lebih dari satu kondisi.

Coding 2 — Menghitung Subtotal Transaksi

js/script.js

const namaProduk = "Keyboard Mechanical";
const harga = 350000;

let jumlahBeli = 2;

const subtotal = harga * jumlahBeli;

console.log("Produk:", namaProduk);
console.log("Harga:", harga);
console.log("Jumlah:", jumlahBeli);
console.log("Subtotal:", subtotal);

Target Coding 2: mahasiswa mampu menyimpan data dalam variable dan menggunakan operator untuk menghitung subtotal transaksi.

Materi 3 — Kondisi dan Perulangan untuk Logika Penjualan

Program sering perlu mengambil keputusan. Misalnya: jika total belanja mencapai nilai tertentu, pelanggan mendapat diskon. Jika stok kosong, produk tidak dapat dibeli.

if, else if, dan else

Contoh Kondisi Diskon

const subtotal = 700000;

if (subtotal >= 500000) {
    console.log("Diskon 10%");
} else {
    console.log("Belum mendapatkan diskon");
}

Menghitung Diskon

Perhitungan Diskon

const subtotal = 700000;

let diskon = 0;

if (subtotal >= 500000) {
    diskon = subtotal * 0.10;
}

const totalBayar = subtotal - diskon;

console.log("Subtotal:", subtotal);
console.log("Diskon:", diskon);
console.log("Total Bayar:", totalBayar);

Perulangan for

Perulangan digunakan untuk menjalankan perintah beberapa kali. Untuk tahap awal, kita menggunakan for untuk menampilkan daftar produk di Console.

Contoh Perulangan

const produk = [
    "Keyboard Mechanical",
    "Mouse Wireless",
    "Headset Gaming"
];

for (let i = 0; i < produk.length; i++) {
    console.log(produk[i]);
}

Coding 3 — Menentukan Diskon dan Mengecek Stok

js/script.js

const namaProduk = "Keyboard Mechanical";
const harga = 350000;
const stok = 10;

let jumlahBeli = 2;

const subtotal = harga * jumlahBeli;

let diskon = 0;

if (jumlahBeli > stok) {
    console.log("Stok tidak mencukupi.");
} else {
    if (subtotal >= 500000) {
        diskon = subtotal * 0.10;
    }

    const totalBayar = subtotal - diskon;

    console.log("Produk:", namaProduk);
    console.log("Subtotal:", subtotal);
    console.log("Diskon:", diskon);
    console.log("Total Bayar:", totalBayar);
}

Fokus Logika
Tidak perlu membuat aturan diskon yang rumit. Tujuan kita adalah memahami bagaimana kondisi membuat program mengambil keputusan.

Target Coding 3: mahasiswa mampu menggunakan kondisi dan mengenal perulangan sederhana pada konteks penjualan.

Materi 4 — Function, DOM, dan Event

Sampai bagian sebelumnya, hasil program masih banyak ditampilkan di Console. Sekarang JavaScript akan mulai berinteraksi langsung dengan elemen HTML.

Function

Function digunakan untuk mengelompokkan perintah agar dapat dipanggil ketika dibutuhkan.

Function Sederhana

function hitungSubtotal(harga, jumlah) {
    return harga * jumlah;
}

const subtotal = hitungSubtotal(350000, 2);

console.log(subtotal);

Mengenal DOM

DOM adalah singkatan dari Document Object Model. Melalui DOM, JavaScript dapat membaca dan mengubah elemen yang ada pada halaman HTML.

getElementById

Mengambil Elemen HTML

const inputJumlah = document.getElementById("jumlah");

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

Event

Event adalah kejadian pada halaman, misalnya tombol diklik, input berubah, atau keyboard digunakan. Kita dapat menangani event menggunakan addEventListener().

Event Klik

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

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

Membaca Nilai Input

Nilai dari input HTML biasanya dibaca sebagai string. Jika ingin melakukan perhitungan, kita dapat mengubahnya menggunakan Number().

Membaca Input Number

const inputJumlah = document.getElementById("jumlah");

const jumlahBeli = Number(inputJumlah.value);

Coding 4 — Hitung Total dari Input Pengguna

HTML

<h1>Hitung Belanja</h1>

<p>
    Produk: Keyboard Mechanical
</p>

<p>
    Harga: Rp350.000
</p>

<label for="jumlah">
    Jumlah Beli
</label>

<input
    type="number"
    id="jumlah"
    min="1"
    value="1"
>

<button
    type="button"
    id="tombol-hitung"
>
    Hitung
</button>

<p id="hasil">
    Total akan tampil di sini.
</p>

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

js/script.js

const harga = 350000;

const inputJumlah = document.getElementById("jumlah");
const tombolHitung = document.getElementById("tombol-hitung");
const hasil = document.getElementById("hasil");

function hitungTotal() {
    const jumlahBeli = Number(inputJumlah.value);

    const total = harga * jumlahBeli;

    hasil.textContent = "Total: Rp" + total;
}

tombolHitung.addEventListener("click", hitungTotal);

Perhatikan Alurnya
HTML menyediakan input dan tombol.
JavaScript mengambil elemen melalui DOM.
Event klik memanggil function.
Function membaca nilai input, menghitung total, lalu mengubah isi halaman.

Target Coding 4: mahasiswa mampu menggunakan function, DOM, dan event untuk membuat interaksi sederhana.

Materi 5 — Mini Project: Kalkulator Transaksi Penjualan

Pada mini project ini kita menggabungkan variable, operator, kondisi, function, DOM, dan event. Pengguna dapat memilih produk, memasukkan jumlah beli, lalu menekan tombol untuk menghitung transaksi.

Aturan dibuat sederhana:

  • Keyboard Mechanical: Rp350.000.
  • Mouse Wireless: Rp150.000.
  • Headset Gaming: Rp275.000.
  • Diskon 10% jika subtotal minimal Rp500.000.
  • Jumlah beli minimal 1.

Struktur Project

Struktur Folder

kalkulator-penjualan/
|
+-- index.html
|
+-- css/
|   |
|   +-- style.css
|
+-- js/
    |
    +-- script.js

Coding 5 — Kalkulator Transaksi Penjualan

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Kalkulator Penjualan</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <main class="container">

        <section class="transaction-card">

            <h1>Kalkulator Penjualan</h1>

            <p>
                Hitung transaksi sederhana
                NusaTech Store.
            </p>

            <div class="form-group">
                <label for="produk">
                    Produk
                </label>

                <select id="produk">
                    <option value="350000">
                        Keyboard Mechanical — Rp350.000
                    </option>

                    <option value="150000">
                        Mouse Wireless — Rp150.000
                    </option>

                    <option value="275000">
                        Headset Gaming — Rp275.000
                    </option>
                </select>
            </div>

            <div class="form-group">
                <label for="jumlah">
                    Jumlah Beli
                </label>

                <input
                    type="number"
                    id="jumlah"
                    min="1"
                    value="1"
                >
            </div>

            <button
                type="button"
                id="tombol-hitung"
            >
                Hitung Transaksi
            </button>

            <div class="hasil">
                <p>
                    Subtotal:
                    <strong id="subtotal">
                        Rp0
                    </strong>
                </p>

                <p>
                    Diskon:
                    <strong id="diskon">
                        Rp0
                    </strong>
                </p>

                <p>
                    Total Bayar:
                    <strong id="total">
                        Rp0
                    </strong>
                </p>

                <p id="pesan"></p>
            </div>

        </section>

    </main>

    <script src="js/script.js"></script>
</body>
</html>

css/style.css

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f3f4f6;
    color: #1f2937;
}

.container {
    width: 90%;
    max-width: 520px;

    margin: 0 auto;
    padding: 40px 0;
}

.transaction-card {
    padding: 28px;

    background-color: white;

    border: 1px solid #d1d5db;
    border-radius: 14px;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.transaction-card h1 {
    margin-top: 0;

    color: #1d4ed8;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    font-weight: bold;
}

.form-group input,
.form-group select {
    width: 100%;

    padding: 10px;

    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

button {
    width: 100%;

    padding: 12px;

    background-color: #2563eb;
    color: white;

    border: 0;
    border-radius: 8px;

    cursor: pointer;
}

.hasil {
    margin-top: 24px;
    padding-top: 16px;

    border-top: 1px solid #e5e7eb;
}

#pesan {
    color: #b45309;

    font-weight: bold;
}

js/script.js

const produk = document.getElementById("produk");
const jumlah = document.getElementById("jumlah");

const tombolHitung = document.getElementById("tombol-hitung");

const subtotalText = document.getElementById("subtotal");
const diskonText = document.getElementById("diskon");
const totalText = document.getElementById("total");
const pesanText = document.getElementById("pesan");

function formatRupiah(angka) {
    return "Rp" + angka.toLocaleString("id-ID");
}

function hitungTransaksi() {
    const harga = Number(produk.value);
    const jumlahBeli = Number(jumlah.value);

    if (jumlahBeli < 1) {
        pesanText.textContent = "Jumlah beli minimal 1.";

        subtotalText.textContent = "Rp0";
        diskonText.textContent = "Rp0";
        totalText.textContent = "Rp0";

        return;
    }

    const subtotal = harga * jumlahBeli;

    let diskon = 0;

    if (subtotal >= 500000) {
        diskon = subtotal * 0.10;
    }

    const totalBayar = subtotal - diskon;

    subtotalText.textContent = formatRupiah(subtotal);
    diskonText.textContent = formatRupiah(diskon);
    totalText.textContent = formatRupiah(totalBayar);

    if (diskon > 0) {
        pesanText.textContent = "Selamat, Anda mendapat diskon 10%.";
    } else {
        pesanText.textContent = "Belanja lagi untuk mendapatkan diskon.";
    }
}

tombolHitung.addEventListener("click", hitungTransaksi);

Yang Sedang Kita Latih
Project ini bukan aplikasi kasir lengkap. Tujuannya adalah melihat bagaimana dasar JavaScript dapat digunakan untuk menyelesaikan kebutuhan bisnis sederhana: membaca input, menghitung, mengambil keputusan, dan menampilkan hasil.

Target Coding 5: mahasiswa mampu membuat Kalkulator Transaksi Penjualan sederhana menggunakan JavaScript, DOM, dan event.

Debugging Challenge

Perhatikan kode JavaScript berikut. Temukan kesalahan yang menyebabkan program tidak bekerja sesuai harapan.

JavaScript yang Harus Diperbaiki

const harga = 350000;

const jumlah = document.getElementById("jumlah");
const tombol = document.getElementById("tombol-hitung");
const hasil = document.getElementById("hasil");

function hitungTotal() {
    const jumlahBeli = jumlah.value;

    const total = harga * jumlahBeli;

    if (jumlahBeli < 1) {
        hasil.textContent = "Jumlah tidak valid";
    }

    hasil.textContent = "Total: Rp" + total;
}

tombol.addEventListener("click", hitung);

Tugas mahasiswa:

  1. Periksa nama function yang dipanggil pada addEventListener.
  2. Ubah nilai input menjadi Number.
  3. Perbaiki alur kondisi agar pesan error tidak langsung tertimpa hasil total.
  4. Uji dengan jumlah 0, 1, dan 3.

Challenge Pertemuan 4

Kembangkan Kalkulator Penjualan menggunakan ide usaha masing-masing. Jangan hanya mengganti nama toko. Ubah data produk dan aturan transaksinya.

Minimal memiliki:

  • Minimal tiga produk.
  • Harga berbeda untuk setiap produk.
  • Input jumlah beli.
  • Perhitungan subtotal.
  • Minimal satu aturan diskon menggunakan kondisi.
  • Function untuk menghitung transaksi.
  • DOM untuk membaca input dan menampilkan hasil.
  • Event klik pada tombol.
  • Validasi jumlah beli minimal 1.
  • Format hasil yang mudah dibaca.

Evaluasi Pemahaman

  1. Apa fungsi JavaScript pada website?
  2. Apa perbedaan peran HTML, CSS, dan JavaScript?
  3. Apa fungsi elemen script?
  4. Apa fungsi console.log?
  5. Apa perbedaan let dan const?
  6. Apa yang dimaksud string?
  7. Apa yang dimaksud number?
  8. Apa yang dimaksud boolean?
  9. Apa fungsi operator aritmatika?
  10. Apa fungsi operator perbandingan?
  11. Apa fungsi if?
  12. Apa fungsi else?
  13. Apa fungsi perulangan for?
  14. Apa fungsi function?
  15. Apa yang dimaksud DOM?
  16. Apa fungsi document.getElementById?
  17. Apa yang dimaksud event?
  18. Apa fungsi addEventListener?
  19. Mengapa nilai input number masih perlu diubah menggunakan Number()?
  20. Bagaimana JavaScript membantu membuat kalkulator transaksi?

Checklist Kompetensi Pertemuan 4

  • Menghubungkan JavaScript dengan HTML.
  • Menggunakan console.log.
  • Menggunakan let dan const.
  • Mengenal string, number, dan boolean.
  • Menggunakan operator aritmatika.
  • Menggunakan operator perbandingan.
  • Menggunakan if dan else.
  • Mengenal perulangan for.
  • Membuat function sederhana.
  • Memahami DOM.
  • Menggunakan getElementById.
  • Menggunakan addEventListener.
  • Membaca nilai input.
  • Mengubah isi halaman dengan textContent.
  • Membuat Kalkulator Transaksi Penjualan.

Rangkuman Pertemuan 4

Di Pertemuan 4 website kita mulai memiliki logika. JavaScript dapat membaca data, melakukan perhitungan, mengambil keputusan, dan merespons tindakan pengguna.

  1. Coding 1: menjalankan JavaScript dan menggunakan Console.
  2. Coding 2: menggunakan variable, tipe data, dan operator untuk menghitung subtotal.
  3. Coding 3: menggunakan kondisi untuk diskon dan pengecekan stok.
  4. Coding 4: menggunakan function, DOM, dan event.
  5. Coding 5: membuat Kalkulator Transaksi Penjualan.

Perkembangan Project

Pertemuan 1
Profil Usaha
    |
    v
Pertemuan 2
Katalog + Form Data Produk
    |
    v
Pertemuan 3
CSS + Product Card
    |
    v
Pertemuan 4
JavaScript + Kalkulator Penjualan
    |
    v
Pertemuan 5
Flexbox + Responsive Store
    |
    v
Pertemuan 6
PHP + Form Processing
    |
    v
Pertemuan 7
MySQL + CRUD Native
    |
    v
UTS
    |
    v
Laravel

Menuju Pertemuan 5

Katalog produk sudah memiliki struktur, tampilan, dan logika JavaScript sederhana. Namun layout kita belum dirancang untuk berbagai ukuran layar.

Pada Pertemuan 5 kita akan mempelajari Flexbox, Navbar, Card, dan Responsive Design untuk mengubah project menjadi tampilan toko yang lebih modern dan nyaman dibuka melalui laptop maupun smartphone.

Pertemuan 5 — Membangun Layout Web Modern: Flexbox, Navbar, Card, dan Responsive Design

Artikel Lainnya

Lihat Semua Artikel
Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model
Programming

Saatnya Mempercantik Web: Mengenal CSS, Selector, Warna, Typography, dan Box Model
Dari Halaman Statis ke Form Interaktif: Semantic HTML, List, Table, dan Form
Programming

Dari Halaman Statis ke Form Interaktif: Semantic HTML, List, Table, dan Form
Dari Nol ke Halaman Web Pertama: Memahami Cara Kerja Web dan Dasar HTML
Programming

Dari Nol ke Halaman Web Pertama: Memahami Cara Kerja Web dan Dasar HTML
© 2026 STTI NIIT I-Tech. All Rights Reserved.
Sekolah Tinggi Teknologi Informasi NIIT