Mengenal JavaScript
1. Latar Belakang
Perkembangan teknologi digital saat ini menjadikan pemrograman sebagai salah satu keterampilan penting yang perlu dikuasai, terutama dalam bidang pengembangan perangkat lunak. Salah satu bahasa pemrograman yang banyak digunakan dan dipelajari oleh programmer adalah JavaScript. JavaScript merupakan bahasa pemrograman yang bersifat fleksibel dan dapat digunakan untuk membangun berbagai jenis aplikasi, baik pada sisi web maupun non-web.
2. Alat dan Bahan
a. Perangkat lunak
- Sistem Operasi Linux
b. Perangkat keras
- Laptop / Komputer
3. Pembahasan
3.1 Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif dan dinamis. Dengan JavaScript, halaman web tidak hanya menampilkan informasi statis, tetapi juga dapat merespons tindakan pengguna seperti klik, input, atau pergerakan mouse. JavaScript dikembangkan pada tahun 1995 oleh Brendan Eich. Awalnya bahasa ini bernama Mocha, kemudian berubah menjadi LiveScript, dan akhirnya dinamakan JavaScript agar lebih menarik secara pemasaran. Saat ini, JavaScript menjadi salah satu bahasa pemrograman paling populer dan digunakan secara luas dalam pengembangan web.
3.2 Fungsi JavaScript
JavaScript memiliki banyak fungsi dalam pengembangan web, antara lain:
1. Membuat Web Interaktif
Contohnya tombol, pop-up, slideshow, dan menu dinamis.
2. Validasi Form
Mengecek data input pengguna sebelum dikirim ke server.
3. Manipulasi DOM (Document Object Model)
Mengubah elemen HTML dan CSS secara langsung.
4. Membuat Animasi dan Efek Visual
Seperti transisi, loading, dan efek interaktif.
5, Pengembangan Aplikasi Web
Digunakan bersama framework seperti React, Vue, dan Angular.
6. Pengembangan Backend
Dengan Node.js, JavaScript bisa digunakan di sisi server.
3.3 Dasar JavaScript
1. Penulisan JavaScript
Ada aturan main dalam menulis kode agar bersih dan mudah dibaca (Best Practice).
-> Internal: Ditulis dalam tag <script> di HTML. Cocok untuk kode yang sangat pendek.
-> External: File terpisah .js. Ini standar industri karena memisahkan logika dari tampilan.
2. Variable
Variabel adalah wadah untuk menyimpan data atau informasi.
-> var (Jadul/Obsolete): Hindari ini. var memiliki cakupan global yang sering menyebabkan bug (kesalahan) tak terduga karena nilainya bisa menimpa variabel lain tanpa peringatan.
-> let (Modern - Reassignable): Gunakan jika nilai variabel akan berubah nanti (seperti skor game, counter loop).
-> const (Modern - Immutable): Gunakan sebagai default. Jika nilainya tidak perlu diubah, pakai ini. Ini membuat kode lebih aman.
3. Tipe Data
Data di JavaScript dibagi menjadi dua kategori besar, yaitu tipe data primitif dan tipe data non primitif.
-> Tipe Data Primitif (Sederhana)
Tipe data primitif merupakan tipe data dasar yang hanya menyimpan satu nilai.
1. String
String digunakan untuk menyimpan teks. String dapat ditulis menggunakan kutip satu, kutip dua, atau backtick. Backtick digunakan untuk template literal, yaitu cara memasukkan variabel ke dalam string.
2. Number
Number digunakan untuk menyimpan angka, baik bilangan bulat maupun desimal. JavaScript mampu menangani angka dengan aman hingga 15 digit.
3. Boolean
Boolean merupakan tipe data logika yang hanya memiliki dua nilai, yaitu true dan false.
4. Undefined
Undefined menunjukkan bahwa sebuah variabel sudah dideklarasikan tetapi belum diberi nilai.
5. Null
Null digunakan ketika sebuah variabel sengaja dikosongkan oleh programmer.
-> Tipe Data Non Primitif (Kompleks)
Tipe data non primitif digunakan untuk menyimpan kumpulan data.
1. Object
Object merupakan kumpulan data yang tersusun dalam bentuk pasangan key dan value.
2. Array
Array merupakan kumpulan data yang tersusun secara berurutan dengan indeks dimulai dari nol.
4. Conditional (Percabangan)
Percabangan digunakan untuk mengambil keputusan berdasarkan kondisi tertentu. Ada beberapa jenis percabangan yang bisa kita gunakan:
1. If
Digunakan jika hanya ada satu kondisi.
Contoh =
let baterai = 10;
if (baterai < 20) {
console.log("⚠️ Baterai lemah! Harap cas HP anda.");
}
2. If-else
Digunakan jika ada dua kondisi.
Contoh=
let password = "rahasia123";
if (password === "rahasia123") {
console.log("✅ Login Berhasil! Selamat datang.");
} else {
console.log("❌ Password salah! Silakan coba lagi.");
}
3. If-else if-else
Digunakan jika ada kondisi lebih dari dua.
Contoh =
let nilai = 85;
if (nilai >= 90) {
console.log("Grade A: Luar Biasa!");
} else if (nilai >= 80) {
console.log("Grade B: Bagus!");
} else if (nilai >= 70) {
console.log("Grade C: Cukup.");
} else {
console.log("Grade D: Perlu belajar lagi.");
}
if (nilai >= 90) {
console.log("Grade A: Luar Biasa!");
} else if (nilai >= 80) {
console.log("Grade B: Bagus!");
} else if (nilai >= 70) {
console.log("Grade C: Cukup.");
} else {
console.log("Grade D: Perlu belajar lagi.");
}
4. Switch
Digunakan jika ada kondisi tertentu.
Contoh =
let lampuLaluLintas = "kuning";
switch (lampuLaluLintas) {
case "merah":
console.log("STOP! Berhenti.");
break;
case "kuning":
console.log("Hati-hati! Siap-siap.");
break;
case "hijau":
console.log("Jalan! Gas pol.");
break;
default:
console.log("Lampu rusak atau warna tidak dikenal.");
}
5. Looping (Perulangan)
Looping digunakan untuk menjalankan kode yang sama berulang kali selama kondisi terpenuhi. Ada beberapa jenis looping yang bisa kita gunakan:
1. For
Digunakan jika kita sudah tahu pasti berapa kali perulangan harus dilakukan. Contoh:
for (let i = 5; i > 0; i--) {
console.log("Hitungan mundur: " + i);
}
# Output: 5, 4, 3, 2, 1
2. While
Digunakan jika kita tidak tahu pasti berapa kali perulangan harus dilakukan, tapi tahu kapan harus berhenti. Contoh:
let bensin = 0;
while (bensin < 5) {
bensin++;
console.log("Sedang mengisi bensin... Sekarang: " + bensin + " Liter");
}
console.log("Tangki Penuh!");
3. Do While
Hampir mirip while tapi bedanya blok kode akan dijalankan minimal satu kali sebelum kondisi dicek. Contoh:
let angka = 10;
do {
console.log("Saya pasti muncul minimal sekali, meski kondisinya salah.");
angka++;
} while (angka < 5);
4. Foreach
Digunakan ntuk membedah isi dari sebuah array atau koleksi data. Contoh:
$warna = array("merah", "hijau", "biru");
foreach ($warna as $w) {
echo "Warna: $w <br>";
}
6. Function
Function adalah blok kode yang dirancang untuk melakukan tugas tertentu dan dapat dipanggil berkali-kali. Fungsi membuat kode lebih rapi, terstruktur, dan dapat digunakan kembali (reusable).
Jenis-jenis Penulisan Function:
1. Function Declaration (Cara Biasa)
function sapa(nama) {
return "Halo, " + nama + "!";
}
console.log(sapa("Syifa")); // Output: Halo, Syifa!
2. Function Expression (Disimpan dalam Variabel)
const hitungLuas = function(panjang, lebar) {
return panjang * lebar;
};
console.log(hitungLuas(5, 10)); // Output: 50
3. Arrow Function
Cara penulisan yang lebih singkat, sangat populer di framework modern seperti React.
const tambah = (a, b) => a + b;
console.log(tambah(10, 5)); // Output: 15
3.4 Kelebihan dan Kekurangan JavaScript
Kelebihan:
1. Populer & Komunitas Besar: Mudah mencari tutorial, library, dan solusi jika ada error.
2. Full Stack: Bisa digunakan di frontend (tampilan) dan backend (server dengan Node.js).
3. Cepat & Ringan: Berjalan langsung di browser pengguna tanpa perlu kompilasi rumit.
4. Interaktif: Membuat pengalaman pengguna (User Experience) jauh lebih baik dibanding web statis.
Kekurangan:
1. Keamanan di Sisi Klien: Kode JavaScript dapat dilihat oleh pengguna (melalui "Inspect Element"), sehingga tidak boleh digunakan untuk menyimpan data rahasia seperti password di sisi frontend.
2.Perbedaan Browser: Terkadang fitur JavaScript terbaru belum didukung oleh browser versi lama (walaupun bisa diatasi dengan tools seperti Babel).
3.5 Kesimpulan
JavaScript adalah bahasa pemrograman yang berperan penting dalam pengembangan web karena mampu membuat halaman web menjadi interaktif dan dinamis. JavaScript digunakan untuk mengatur logika program, seperti percabangan, perulangan, dan fungsi, serta dapat berjalan di sisi frontend maupun backend melalui Node.js. Dengan sintaks yang mudah dipelajari dan dukungan komunitas yang besar, JavaScript menjadi bahasa pemrograman yang banyak digunakan hingga saat ini.
4. Daftar Pustaka
Amazon Web Services. (n.d.). Apa itu JavaScript? https://aws.amazon.com/id/what-is/javascript/
Biznet Gio. (n.d.). Apa itu JavaScript? Pengertian, fungsi, dan contohnya. https://www.biznetgio.com/blog/apa-itu-javascript/
Universitas Cakrawala. (n.d.). Apa itu JavaScript? Pengertian, sejarah, fungsi, kelebihan. https://www.cakrawala.ac.id/berita/apa-itu-javascript
ZettaCamp. (n.d.). 8 Materi penting untuk memulai belajar JavaScript dasar. Medium. https://medium.com/@zettacamp.pro/8-materi-penting-untuk-memulai-belajar-javascript-dasar-714270fdef57
0 Komentar