Javascript Dasar #2: Variabel, Tipe Data, dan Operator

Author Hilya Zea
25 Dec 2024
Javascript
Javascript Dasar #2: Variabel, Tipe Data, dan Operator

Hai, kembali lagi! Pada tutorial kedua ini, kita bakal membahas lebih dalam tentang variabel, tipe data, dan operator di JavaScript. Kalau kamu sudah paham dasar-dasar tadi, sekarang saatnya untuk memperdalam pengetahuanmu agar bisa membuat program yang lebih kompleks.

1. Variabel dan Konstanta

Seperti yang sudah dibahas di tutorial pertama, variabel adalah tempat untuk menyimpan data. Di JavaScript, ada dua cara untuk mendeklarasikan variabel:

  • let: Variabel yang nilainya bisa berubah.
  • const: Variabel yang nilainya tetap dan tidak bisa diubah.
let umur = 20; // Nilai bisa diubah
const negara = "Indonesia"; // Nilai tidak bisa diubah

Penting! Jika kamu tahu nilai variabel tersebut tidak akan berubah, gunakan const untuk menjaga konsistensi dan mencegah kesalahan saat pengembangan.

2. Tipe Data di JavaScript

Tipe data adalah jenis nilai yang bisa disimpan dalam variabel. JavaScript memiliki beberapa tipe data, yang paling sering digunakan adalah:

  • String: Digunakan untuk teks. Contoh: "Halo"
  • Number: Digunakan untuk angka. Contoh: 100, 5.67
  • Boolean: Nilai true atau false
  • Array: Sekumpulan data yang dikelompokkan dalam satu variabel. Contoh: [1, 2, 3]
  • Object: Sekumpulan data yang memiliki properti dan nilai. Contoh: { nama: "John", umur: 25 }
let nama = "John"; // String
let umur = 30; // Number
let isActive = true; // Boolean
let angkaFavorit = [7, 8, 9]; // Array
let orang = { nama: "John", umur: 30 }; // Object

3. Operator di JavaScript

Operator digunakan untuk melakukan operasi pada nilai variabel. Di JavaScript, ada beberapa jenis operator yang sering digunakan:

  • Operator Aritmatika: Untuk melakukan operasi matematika.
    • +, -, *, /, % (modulus)
let x = 10;
let y = 5;
console.log(x + y); // 15
console.log(x - y); // 5
console.log(x * y); // 50
console.log(x / y); // 2
console.log(x % y); // 0 (sisa bagi)
  • Operator Perbandingan: Digunakan untuk membandingkan nilai.
    • ==, ===, !=, >, <, >=, <=
let a = 10;
let b = 20;
console.log(a == b); // false
console.log(a < b); // true
console.log(a != b); // true
  • Operator Logika: Digunakan untuk menggabungkan kondisi.
    • && (dan), || (atau), ! (not)
let isAdult = true;
let hasID = false;
console.log(isAdult && hasID); // false
console.log(isAdult || hasID); // true
console.log(!isAdult); // false

Studi Kasus: Kalkulator Sederhana

Sekarang, coba kita buat kalkulator sederhana yang bisa menambahkan dua angka.

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

HTML-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator Sederhana</title>
</head>
<body>
  <h1>Kalkulator Penjumlahan</h1>
  <input type="number" id="angka1" placeholder="Angka pertama">
  <input type="number" id="angka2" placeholder="Angka kedua">
  <button onclick="tambah()">Tambah</button>
  <p id="hasil"></p>

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

JavaScript-nya (di file script.js):

function tambah() {
  let angka1 = document.getElementById("angka1").value;
  let angka2 = document.getElementById("angka2").value;
  let hasil = Number(angka1) + Number(angka2);
  document.getElementById("hasil").innerText = "Hasil: " + hasil;
}

Penjelasan:

  • Kita ambil nilai input dari kedua kolom, lalu konversi ke tipe Number agar bisa dijumlahkan.
  • Hasil penjumlahan kemudian ditampilkan di halaman.

Sekian dulu pembahasan kali ini. Setelah mempelajari tentang variabel, tipe data, dan operator, sekarang kamu sudah bisa mulai membuat kalkulator atau aplikasi sederhana! Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga kamu lebih paham tentang cara bekerja dengan data dan operator di JavaScript!

Tutorial Terkait Lainnya

Javascript Dasar #6: Array & Manipulasi Data
Javascript Dasar #6: Array & Manipulasi Data

Hai, apa kabar? Kembali lagi di tutorial JavaScript! Di tutorial kali ini, kita akan belajar tentang...

Baca Tutorial
Javascript Dasar #3: Fungsi dan Penggunaan dalam Program
Javascript Dasar #3: Fungsi dan Penggunaan dalam Program

Hai lagi! Di tutorial ketiga ini, kita akan belajar tentang fungsi di JavaScript. Fungsi adalah bagi...

Baca Tutorial
Javascript Dasar #8: Event Handling di JavaScript
Javascript Dasar #8: Event Handling di JavaScript

Halo, teman-teman! Kali ini kita akan belajar tentang Event Handling di JavaScript. Event adalah tin...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Javascript Dasar #11: DOM Manipulation
Javascript Dasar #8: Event Handling di JavaScript
Javascript Dasar #9: Asynchronous JavaScript & Promises
Javascript Dasar #10: Error Handling
Tutorial Terbaru
Python Dasar #10: Modul dan library
26 Dec 2024 Python
Python Dasar #9: Penggunaan File
26 Dec 2024 Python
Python Dasar #8: Exception Handling
26 Dec 2024 Python
Python Dasar #7: conditional Python
26 Dec 2024 Python
Python Dasar #6: List dan Dictionary di Python
26 Dec 2024 Python