Mengenal JavaScript

JavaScript adalah bahasa pemrograman tingkat tinggi yang berjalan di sisi klien (browser) dan digunakan untuk membuat halaman web menjadi lebih interaktif, dinamis, dan responsif. JavaScript bisa digunakan untuk memanipulasi elemen HTML, menangani event pengguna (seperti klik dan input), hingga berinteraksi dengan server menggunakan teknologi seperti AJAX.

Tidak seperti HTML dan CSS yang bersifat statis, JavaScript memungkinkan halaman web memiliki perilaku seperti membuka/menutup menu, validasi form tanpa refresh, slideshow otomatis, animasi, bahkan bisa digunakan untuk membangun aplikasi kompleks seperti game atau aplikasi SPA (Single Page Application).

1. Menambahkan JavaScript di HTML

JavaScript dapat ditulis langsung dalam tag <script> di dalam file HTML atau dalam file terpisah (eksternal). 

<!DOCTYPE html>
<html>
<head>
  <title>Belajar JavaScript</title>
</head>
<body>

  <h2>Klik Tombol</h2>
  <button onclick="sapaUser()">Klik Saya</button>

  <script>
    function sapaUser() {
      alert("Halo, selamat datang di JavaScript!");
    }
  </script>

</body>
</html>
2. Menampilkan Teks dengan alert

Fungsi alert() digunakan untuk menampilkan pesan pop-up kepada pengguna. 

<script>
alert("Selamat datang di dunia JavaScript!");
</script>
3. Variabel dan Tipe Data

Variabel di JavaScript digunakan untuk menyimpan data. Kita bisa menggunakan let, const, atau var (versi lama). 

<script>
let nama = "Rayhan";
let umur = 20;
let aktif = true;

console.log(nama);
console.log(umur);
console.log(aktif);
</script>
4. Manipulasi HTML dengan JavaScript

JavaScript bisa mengubah isi elemen HTML dengan menggunakan document.getElementById() atau selector lain. 

<!DOCTYPE html>
<html>
<body>

  <p id="teks">Teks lama</p>
  <button onclick="ubahTeks()">Ubah Teks</button>

  <script>
    function ubahTeks() {
      document.getElementById("teks").innerHTML = "Teks telah diubah!";
    }
  </script>

</body>
</html>
5. Menangani Event

JavaScript dapat mendeteksi dan merespons berbagai event pengguna, seperti klik tombol, ketikan keyboard, dan lain-lain. 

<input type="text" onkeyup="tampilkan(this.value)" placeholder="Ketik sesuatu...">
<p id="hasil"></p>

<script>
  function tampilkan(teks) {
    document.getElementById("hasil").innerHTML = "Kamu mengetik: " + teks;
  }
</script>
Kesimpulan
  • JavaScript adalah bahasa pemrograman utama untuk membuat web interaktif.
  • Dapat digunakan untuk menampilkan pesan, memproses input, mengubah isi halaman, dan menangani event pengguna.
  • Kode JavaScript bisa ditulis langsung dalam file HTML atau dipisah dalam file eksternal.
  • Dasar yang harus dipahami meliputi: alert, variabel, fungsi, event, dan manipulasi DOM.

Fungsi Output di JavaScript

Dalam JavaScript, terdapat beberapa cara untuk menampilkan output atau hasil program ke pengguna. Cara ini tergantung pada jenis interaksi yang diinginkan — apakah hanya ingin menampilkan teks biasa, debug di konsol, atau menampilkan kotak dialog. Fungsi output ini sangat penting untuk memberi informasi, hasil kalkulasi, atau untuk keperluan debugging saat proses pengembangan program.

1. Menggunakan document.write()

Fungsi document.write() digunakan untuk langsung menulis teks ke dalam dokumen HTML. Biasanya digunakan untuk keperluan demo, tetapi tidak disarankan pada aplikasi nyata karena dapat menimpa seluruh konten halaman jika dipanggil setelah halaman dimuat. 

<script>
document.write("Halo, ini output dari document.write()");
</script>
2. Menggunakan alert()

Fungsi alert() menampilkan kotak dialog sederhana dengan pesan teks. Ini sering digunakan untuk memberikan informasi atau peringatan kepada pengguna. 

<script>
alert("Halo, ini pesan dari alert!");
</script>
3. Menggunakan console.log()

console.log() digunakan untuk menampilkan output ke konsol browser (biasanya dibuka lewat Developer Tools). Fungsi ini sangat berguna untuk debugging saat mengembangkan aplikasi. 

<script>
let nama = "Rayhan";
console.log("Nama saya adalah " + nama);
</script>
4. Menggunakan innerHTML

Cara ini digunakan untuk menampilkan teks ke dalam elemen HTML yang ada, misalnya paragraf, div, atau span. Output ini akan terlihat langsung di halaman web, bukan di dialog atau konsol. 

<p id="output"></p>

<script>
document.getElementById("output").innerHTML = "Ini ditampilkan dengan innerHTML";
</script>
Kesimpulan
  • document.write(): Menulis langsung ke halaman, tidak disarankan setelah halaman dimuat.
  • alert(): Menampilkan kotak dialog pop-up untuk pengguna.
  • console.log(): Menampilkan output di konsol browser, ideal untuk debugging.
  • innerHTML: Menampilkan output ke dalam elemen HTML, cocok untuk tampilan web interaktif.

Variabel dan Tipe Data

Dalam JavaScript, variabel digunakan untuk menyimpan data atau nilai yang dapat digunakan kembali di dalam program. Variabel bisa menyimpan berbagai jenis tipe data, seperti angka, teks, boolean, objek, array, dan lainnya. Untuk mendeklarasikan variabel, kita bisa menggunakan var, let, atau const.

Sementara itu, tipe data menunjukkan jenis nilai yang disimpan dalam variabel tersebut. Pemahaman tentang tipe data sangat penting agar kode berjalan dengan benar dan efisien.

1. Deklarasi Variabel

Kita bisa menggunakan let atau const untuk membuat variabel modern. let digunakan untuk variabel yang nilainya bisa diubah, sedangkan const untuk variabel tetap. 

<script>
// menggunakan let
let nama = "Rayhan";
let umur = 20;

// menggunakan const
const negara = "Indonesia";

console.log(nama);
console.log(umur);
console.log(negara);
</script>
2. Tipe Data: String

String digunakan untuk menyimpan teks. Ditulis dengan tanda kutip tunggal atau ganda. 

<script>
let namaLengkap = "Rayhan Abdillah";
console.log(namaLengkap);
</script>
3. Tipe Data: Number

Number mencakup semua jenis angka, baik bilangan bulat maupun desimal. 

<script>
let usia = 25;
let tinggi = 175.5;
console.log(usia, tinggi);
</script>
4. Tipe Data: Boolean

Boolean hanya memiliki dua nilai: true (benar) dan false (salah). Biasanya digunakan dalam logika program. 

<script>
let sudahLogin = true;
let punyaAkun = false;
console.log(sudahLogin, punyaAkun);
</script>
5. Tipe Data: Array

Array digunakan untuk menyimpan banyak nilai dalam satu variabel. 

<script>
let warna = ["merah", "hijau", "biru"];
console.log(warna[0]); // merah
</script>
6. Tipe Data: Object

Object menyimpan data dalam bentuk pasangan key dan value. Digunakan untuk merepresentasikan data kompleks. 

<script>
let user = {
  nama: "Rayhan",
  umur: 20,
  isLogin: true
};

console.log(user.nama);
</script>
Kesimpulan
  • Gunakan let untuk variabel yang bisa berubah, dan const untuk nilai tetap.
  • Tipe data JavaScript meliputi: string, number, boolean, array, dan object.
  • Pilih tipe data yang sesuai untuk menyimpan dan mengelola data secara efisien.

Jendela Dialog Untuk Input

JavaScript menyediakan fitur jendela dialog bawaan untuk berinteraksi dengan pengguna melalui antarmuka yang sederhana. Salah satunya adalah prompt() yang digunakan untuk meminta input dari pengguna. Jendela ini muncul sebagai pop-up dan menunggu pengguna mengetik nilai lalu menekan OK atau Cancel.

1. Menggunakan prompt() untuk Input

Fungsi prompt() akan menampilkan kotak dialog dengan kolom input dan teks instruksi. Nilai yang dimasukkan oleh pengguna akan disimpan ke dalam variabel. 

<script>
let nama = prompt("Masukkan nama kamu:");
console.log("Halo, " + nama);
</script>
2. Meminta Input dan Menampilkan ke Layar

Input yang diambil dari prompt() bisa digunakan untuk menampilkan data ke halaman HTML, bukan hanya ke console. 

<script>
let umur = prompt("Berapa umur kamu?");
document.write("Umur kamu adalah: " + umur + " tahun");
</script>
3. Validasi Input Sederhana

Kamu bisa menambahkan logika sederhana untuk mengecek apakah pengguna mengisi data atau tidak (null jika Cancel ditekan). 

<script>
let kota = prompt("Masukkan nama kota:");
if (kota !== null && kota !== "") {
  alert("Kamu tinggal di " + kota);
} else {
  alert("Input dibatalkan atau kosong.");
}
</script>
Kesimpulan
  • prompt() digunakan untuk mengambil input dari pengguna melalui kotak dialog.
  • Nilai input disimpan dalam variabel dan bisa diproses atau ditampilkan ke halaman.
  • Pastikan input dicek apakah kosong atau dibatalkan sebelum digunakan lebih lanjut.

Operator

Operator dalam JavaScript digunakan untuk melakukan operasi terhadap nilai atau variabel. Operator membantu kamu dalam perhitungan, perbandingan, logika, penugasan, dan manipulasi data lainnya. Pemahaman tentang operator sangat penting untuk membuat program yang dinamis dan responsif.

1. Operator Aritmatika

Operator aritmatika digunakan untuk operasi matematika dasar seperti penjumlahan, pengurangan, dan sebagainya. 

<script>
let a = 10;
let b = 3;
document.write("Tambah: " + (a + b) + "<br>");
document.write("Kurang: " + (a - b) + "<br>");
document.write("Kali: " + (a * b) + "<br>");
document.write("Bagi: " + (a / b) + "<br>");
document.write("Modulus: " + (a % b));
</script>
2. Operator Perbandingan

Operator ini digunakan untuk membandingkan dua nilai, hasilnya berupa true atau false. 

<script>
let x = 5;
let y = "5";
console.log(x == y);   // true (nilai sama, tipe tidak dicek)
console.log(x === y);  // false (nilai dan tipe harus sama)
console.log(x != y);   // false
console.log(x !== y);  // true
console.log(x > 3);    // true
</script>
3. Operator Logika

Digunakan untuk menggabungkan ekspresi logika. Cocok digunakan dalam pengambilan keputusan (kondisi). 

<script>
let umur = 20;
let punyaSIM = true;

if (umur >= 17 && punyaSIM) {
  console.log("Boleh mengemudi");
} else {
  console.log("Tidak boleh mengemudi");
}
</script>
4. Operator Penugasan

Operator penugasan digunakan untuk memberikan atau memodifikasi nilai pada variabel. 

<script>
let nilai = 10;
nilai += 5;  // sama dengan nilai = nilai + 5
console.log(nilai);  // 15
nilai *= 2;
console.log(nilai);  // 30
</script>
Kesimpulan
  • Aritmatika: digunakan untuk operasi hitung seperti +, -, *, /, %.
  • Perbandingan: membandingkan dua nilai, hasilnya boolean.
  • Logika: digunakan dalam kondisi (&&, ||, !).
  • Penugasan: untuk memberi dan mengubah nilai variabel.

Beri Dukungan untuk Update Materi Selanjutnya

Jika Anda merasa materi ini bermanfaat, bantu kami untuk terus mengembangkan konten pembelajaran yang berkualitas. Dukungan seikhlasnya dari Anda sangat berarti bagi kelangsungan proyek ini.

Donasi Sekarang