Hari 11: Pengenalan JavaScript – Variabel, Tipe Data, dan Operator Dasar

by

Selamat! Anda Sudah Menguasai HTML dan CSS. Sekarang Saatnya Mempelajari JavaScript yang Akan Membuat Website Anda Interaktif!

Pengenalan JavaScript - Variabel, Tipe Data, dan Operator Dasar

Keywords: JavaScript dasar, variabel JavaScript, tipe data JavaScript, operator JavaScript, belajar JavaScript

Website statis sudah bisa Anda buat, tapi bagaimana membuatnya hidup dan interaktif? Hari ini kita memulai perjalanan JavaScript yang akan mengubah segalanya! Setelah 10 hari membangun fondasi yang kuat dengan HTML dan CSS, saatnya kita melangkah ke dunia JavaScript – bahasa pemrograman yang memberikan kehidupan pada website.

Mengapa JavaScript Penting dalam Web Development?

JavaScript adalah bahasa pemrograman yang paling populer di dunia menurut Stack Overflow Developer Survey 2023. Dengan JavaScript, Anda dapat:

  • Membuat website interaktif dan responsif
  • Memvalidasi form sebelum dikirim ke server
  • Membuat animasi dan transisi yang halus
  • Mengambil data dari server tanpa reload halaman (AJAX)
  • Membangun aplikasi web yang kompleks
  • Mengembangkan aplikasi mobile dan desktop dengan framework seperti React Native dan Electron

Menurut BuiltWith, lebih dari 98% website di dunia menggunakan JavaScript. Tanpa JavaScript, website akan terasa statis dan kurang menarik bagi pengunjung.

Cara Menghubungkan JavaScript ke HTML

Ada tiga cara untuk menghubungkan JavaScript ke HTML:

1. Inline JavaScript

Menambahkan kode JavaScript langsung pada atribut HTML:

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

2. Internal JavaScript

Menempatkan kode JavaScript di dalam tag <script>:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Internal</title>
</head>
<body>
    <h1>Halaman dengan JavaScript</h1>
    
    <script>
        // Kode JavaScript di sini
        console.log("JavaScript telah dimuat!");
    </script>
</body>
</html>

3. External JavaScript (Metode Terbaik)

Membuat file terpisah dengan ekstensi .js dan menghubungkannya ke HTML:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript External</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Halaman dengan JavaScript</h1>
</body>
</html>

Tips: Tempatkan tag <script> sebelum penutup </body> untuk memastikan semua elemen HTML telah dimuat sebelum JavaScript dieksekusi.

Variabel dalam JavaScript

Variabel adalah wadah untuk menyimpan nilai data. Dalam JavaScript, ada tiga cara untuk mendeklarasikan variabel:

1. var (Cara Lama)

var nama = "John Doe";
var umur = 30;

2. let (Cara Modern, Bisa Diubah)

let nama = "John Doe";
nama = "Jane Smith"; // Bisa diubah

3. const (Cara Modern, Tidak Bisa Diubah)

const PI = 3.14159;
// PI = 3.14; // Akan menyebabkan error

Perbedaan utama:

  • var memiliki function scope
  • let dan const memiliki block scope
  • let nilainya bisa diubah, const tidak

Tipe Data dalam JavaScript

JavaScript memiliki tipe data primitif dan objek:

Tipe Data Primitif

1. String (Teks)

let nama = "John Doe";
let pesan = 'Halo Dunia!';
let template = `Nama saya ${nama}`; // Template literal

2. Number (Angka)

let umur = 30;
let harga = 19.99;
let negatif = -100;

3. Boolean (Logika)

let isActive = true;
let isComplete = false;

4. Undefined

let data; // Nilai: undefined

5. Null

let result = null; // Nilai kosong yang disengaja

6. Symbol (ES6)

let id = Symbol('id');

7. BigInt (ES2020)

let bigNumber = 9007199254740991n;

Tipe Data Objek

1. Object

let person = {
    nama: "John Doe",
    umur: 30,
    isActive: true
};

2. Array

let fruits = ["Apple", "Banana", "Cherry"];

3. Function

function greet() {
    return "Halo Dunia!";
}

4. Date

let today = new Date();

Operator dalam JavaScript

Operator adalah simbol yang digunakan untuk melakukan operasi pada nilai dan variabel.

1. Operator Aritmatika

let a = 10;
let b = 5;

console.log(a + b);  // 15 (Penjumlahan)
console.log(a - b);  // 5  (Pengurangan)
console.log(a * b);  // 50 (Perkalian)
console.log(a / b);  // 2  (Pembagian)
console.log(a % b);  // 0  (Modulus/Sisa bagi)
console.log(a ** b); // 100000 (Eksponen/Pangkat)
console.log(a++);    // 10 (Increment)
console.log(a);      // 11
console.log(b--);    // 5 (Decrement)
console.log(b);      // 4

2. Operator Penugasan

let x = 10;

x += 5;  // x = x + 5 (15)
x -= 3;  // x = x - 3 (12)
x *= 2;  // x = x * 2 (24)
x /= 4;  // x = x / 4 (6)
x %= 4;  // x = x % 4 (2)
x **= 3; // x = x ** 3 (8)

3. Operator Perbandingan

let a = 10;
let b = "10";

console.log(a == b);   // true (Nilai sama)
console.log(a === b);  // false (Nilai dan tipe sama)
console.log(a != b);   // false (Nilai tidak sama)
console.log(a !== b);  // true (Nilai atau tipe tidak sama)
console.log(a > b);    // false
console.log(a < b);    // false
console.log(a >= b);   // true
console.log(a <= b);   // true

4. Operator Logika

let x = true;
let y = false;

console.log(x && y);  // false (AND)
console.log(x || y);  // true (OR)
console.log(!x);      // false (NOT)

5. Operator String

let firstName = "John";
let lastName = "Doe";

console.log(firstName + " " + lastName);  // "John Doe"
console.log(`${firstName} ${lastName}`);   // "John Doe" (Template literal)

6. Operator Ternary

let age = 18;
let canVote = (age >= 18) ? "Ya" : "Tidak";
console.log(canVote);  // "Ya"

Konversi Tipe Data dalam JavaScript

JavaScript secara otomatis mengkonversi tipe data saat operasi melibatkan tipe data yang berbeda:

// String ke Number
let num = "10";
console.log(Number(num));     // 10
console.log(parseInt(num));   // 10
console.log(parseFloat(num)); // 10

// Number ke String
let num2 = 20;
console.log(String(num2)); // "20"
console.log(num2.toString()); // "20"

// Boolean ke Number
console.log(Number(true));  // 1
console.log(Number(false)); // 0

// String ke Boolean
console.log(Boolean(""));    // false
console.log(Boolean("text")); // true

Praktik Terbaik dalam Penulisan JavaScript

  1. Gunakan let dan const alih-alih var untuk menghindari masalah hoisting dan scope
  2. Gunakan nama variabel yang deskriptif untuk meningkatkan keterbacaan kode
  3. Gunakan komentar untuk menjelaskan kode yang kompleks
  4. Gunakan template literal (`) untuk string yang lebih kompleks
  5. Gunakan strict equality (===) alih-alih loose equality (==) untuk perbandingan yang lebih aman
  6. Gunakan semicolon di akhir setiap pernyataan untuk menghindari masalah
  7. Gunakan indentasi yang konsisten untuk meningkatkan keterbacaan

Contoh Program Sederhana: Menghitung Luas Persegi Panjang

// Mendefinisikan variabel
const panjang = 10;
const lebar = 5;

// Menghitung luas
let luas = panjang * lebar;

// Menampilkan hasil
console.log(`Panjang: ${panjang}`);
console.log(`Lebar: ${lebar}`);
console.log(`Luas Persegi Panjang: ${luas}`);

// Menggunakan prompt untuk input pengguna
// Hapus komentar untuk mencoba di browser
/*
const panjangUser = parseFloat(prompt("Masukkan panjang:"));
const lebarUser = parseFloat(prompt("Masukkan lebar:"));

if (!isNaN(panjangUser) && !isNaN(lebarUser)) {
    const luasUser = panjangUser * lebarUser;
    alert(`Luas Persegi Panjang: ${luasUser}`);
} else {
    alert("Masukkan angka yang valid!");
}
*/

Debugging JavaScript

Gunakan browser developer tools untuk debugging:

  1. Buka halaman web di browser
  2. Klik kanan dan pilih “Inspect” atau tekan F12
  3. Pilih tab “Console”
  4. Lihat error messages dan output dari console.log()

Kesimpulan

Hari ini Anda telah mempelajari fondasi JavaScript yang akan menjadi dasar untuk semua konsep lebih lanjut. Variabel, tipe data, dan operator adalah elemen fundamental yang akan Anda gunakan dalam setiap program JavaScript.

Dengan memahami bagaimana JavaScript bekerja dan cara menghubungkannya ke HTML, Anda telah membuka pintu untuk menciptakan website yang interaktif dan dinamis. Di hari-hari mendatang, kita akan mempelajari konsep yang lebih kompleks seperti control flow, functions, arrays, objects, dan DOM manipulation.

Ingatlah bahwa latihan adalah kunci untuk menguasai JavaScript. Teruslah bereksperimen dengan kode dan coba buat program sederhana setiap hari untuk memperkuat pemahaman Anda.

Coba buat program JavaScript sederhana yang menghitung luas persegi panjang dan bagikan kodenya di komentar! Kami akan memberikan feedback dan tips untuk meningkatkan keterampilan coding Anda. Jangan lupa gunakan hashtag #30HariWebDevChallenge!

#JavaScript #WebDev #CodingForBeginners #JSIndonesia

Bagikan artikel ini:

FacebookTikTokXInstagramWhatsApp

Leave a Comment