Postingan

PWD 7 - Pengenalan JavaScript dan Dasar Pemrograman Sisi Klien

Diterbitkan
Oleh Aulia Syarif Aziz 3 menit baca

Capaian Pembelajaran Pertemuan (Sub-CPMK)

Setelah mengikuti perkuliahan ini, mahasiswa mampu:

  1. Menjelaskan peran JavaScript dalam pengembangan web modern.
  2. Memahami hubungan HTML, CSS, dan JavaScript pada halaman web.
  3. Menuliskan sintaks dasar JavaScript dengan benar.
  4. Menggunakan variabel, tipe data, operator, dan percabangan sederhana.
  5. Menampilkan output JavaScript pada browser.
  6. Membuat interaksi dasar pada halaman web menggunakan JavaScript.

1. Pendahuluan

Pada pertemuan sebelumnya, mahasiswa telah mempelajari HTML sebagai struktur halaman web dan CSS sebagai pengatur tampilan.

Namun, halaman web modern tidak cukup hanya memiliki struktur dan desain. Website saat ini membutuhkan interaktivitas, seperti:

  • Tombol yang merespons klik pengguna
  • Validasi form sebelum dikirim
  • Perubahan isi halaman secara dinamis
  • Perhitungan otomatis
  • Menu interaktif

Untuk memenuhi kebutuhan tersebut digunakan JavaScript. JavaScript adalah bahasa pemrograman yang berjalan di browser dan digunakan untuk membuat halaman web menjadi dinamis dan interaktif.

2. Peran JavaScript dalam Web Development

Dalam pengembangan web dasar:

  • HTML → Struktur konten
  • CSS → Tampilan visual
  • JavaScript → Perilaku/interaksi

Ketiganya saling melengkapi. Contoh sederhana:

  • HTML membuat tombol
  • CSS mempercantik tombol
  • JavaScript memberi aksi saat tombol diklik

3. Cara Menambahkan JavaScript ke HTML

Terdapat tiga cara utama, yaitu inline, internal, dan external.

3.1 Inline JavaScript

Ditulis langsung pada elemen HTML.

1

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

3.2 Internal JavaScript

Ditulis di dalam tag <script>.

1
2
3

<script>
    alert("Selamat datang");
</script>

3.3 External JavaScript (Direkomendasikan)

Ditulis di file terpisah.

1

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

Isi script.js:

1

alert("Halo dari file eksternal");

Kelebihan:

  • Lebih rapi
  • Mudah dikelola
  • Bisa digunakan ulang

4. Sintaks Dasar JavaScript

JavaScript terdiri dari perintah-perintah yang dieksekusi browser.

Contoh:

1

console.log("Belajar JavaScript");

Setiap perintah dapat diakhiri dengan titik koma ;

5. Variabel

Variabel digunakan untuk menyimpan data.

5.1 Deklarasi Variabel

1
2
3

let nama = "Aulia";
let umur = 20;
const kampus = "UIN";

5.2 Jenis Deklarasi

let

Nilai dapat berubah.

1
2

let nilai = 80;
nilai = 90;

const

Nilai tetap.

1

const phi = 3.14;

var

Cara lama, masih ada tetapi kurang direkomendasikan.

6. Tipe Data Dasar

6.1 String

Teks.

1

let nama = "Andi";

6.2 Number

Angka.

1

let umur = 21;

6.3 Boolean

Benar atau salah.

1

let aktif = true;

6.4 Null

Nilai kosong.

1

let data = null;

7. Operator

7.1 Operator Aritmatika

1

let hasil = 5 + 3;

Jenis:

  • + tambah
  • - kurang
  • * kali
  • / bagi
  • % sisa bagi

7.2 Operator Perbandingan

1

5 > 3

Jenis:

  • ==
  • ===
  • !=
  • >
  • <

7.3 Operator Logika

  • && dan
  • || atau
  • ! tidak

8. Output JavaScript

8.1 Alert

Menampilkan kotak pesan.

1

alert("Data berhasil disimpan");

8.2 Console

Menampilkan output di Console browser.

1

console.log("Tes output");

8.3 Menampilkan ke HTML

1

<p id="hasil"></p>

1

document.getElementById("hasil").innerHTML = "Halo Dunia";

9. Input Pengguna

Menggunakan prompt():

1
2

let nama = prompt("Masukkan nama:");
alert("Halo " + nama);

10. Percabangan Sederhana

Digunakan untuk pengambilan keputusan.

1
2
3
4
5
6
7

let nilai = 80;

if (nilai >= 75) {
    alert("Lulus");
} else {
    alert("Tidak Lulus");
}

11. Fungsi

Fungsi adalah blok kode yang dapat dipanggil ulang.

1
2
3
4
5

function salam() {
    alert("Selamat belajar");
}

salam();

12. Event Dasar

Event adalah aksi pengguna, seperti klik.

1

<button onclick="salam()">Klik</button>

13. Best Practice JavaScript Dasar

  1. Gunakan file eksternal .js
  2. Gunakan let dan const
  3. Gunakan nama variabel yang jelas
  4. Pisahkan HTML, CSS, dan JS
  5. Gunakan console untuk debugging

14. Kesalahan Umum

  • Salah penulisan huruf besar-kecil
  • Lupa tanda kutip
  • Salah nama variabel
  • Script dipanggil sebelum elemen HTML tersedia
  • Tidak menutup kurung atau kurawal

Rangkuman

Pada pertemuan ini telah dipelajari:

  1. Peran JavaScript dalam web
  2. Cara menambahkan JavaScript ke HTML
  3. Variabel dan tipe data
  4. Operator dasar
  5. Output dan input sederhana
  6. Percabangan
  7. Fungsi dan event dasar

JavaScript merupakan fondasi penting untuk membuat website menjadi interaktif dan dinamis.

Referensi

Materi Kuliah, Pemrograman Web Dasar
kuliah web
Postingan ini dilisensikan di bawah CC BY 4.0 oleh penulis.