Pilih Mana: JavaScript atau Python? Ini Jawaban Jujur Buat Kamu!
Berikut penjelasan lengkap mengenai Dasar-Dasar Pemrograman JavaScript:
🔹 Apa itu JavaScript?
JavaScript adalah bahasa pemrograman tingkat tinggi yang bersifat dinamis, interpretatif, dan berorientasi objek, umumnya digunakan untuk pengembangan aplikasi web agar lebih interaktif.
🔹 Karakteristik JavaScript
-
Interaktif – dapat merespon aksi pengguna (klik, hover, scroll).
-
Client-side & Server-side – bisa berjalan di browser maupun server (Node.js).
-
Dinamika – variabel bisa berubah tipe datanya secara fleksibel.
-
Berbasis Event – menjalankan fungsi berdasarkan kejadian tertentu.
-
Ringan dan cepat – diinterpretasi secara langsung oleh browser tanpa dikompilasi.
🔹 Peran JavaScript dalam Pengembangan Web
-
Menambahkan interaktivitas pada website.
-
Mengelola tampilan dan elemen DOM.
-
Memvalidasi formulir/input.
-
Melakukan komunikasi asinkron ke server (AJAX).
🔹 Dasar-Dasar Sintaks JavaScript
1. Variabel
Menyimpan data dengan keyword:
-
var(jarang dipakai di JavaScript modern). -
let(variabel dapat berubah nilainya). -
const(variabel tidak dapat diubah nilainya).
let nama = "Andi";
const umur = 25;
2. Tipe Data Dasar
-
String (teks)
let teks = "Halo dunia!";
-
Number (angka)
let angka = 123;
let desimal = 12.34;
-
Boolean (true atau false)
let benar = true;
let salah = false;
-
Array (kumpulan data)
let buah = ["apel", "jeruk", "mangga"];
-
Object (koleksi pasangan key-value)
let siswa = { nama: "Andi", kelas: 12 };
3. Operator
-
Aritmatika:
+,-,*,/,% -
Pembanding:
==,===,!=,!==,>,<,>=,<= -
Logika:
&&(AND),||(OR),!(NOT)
let hasil = 10 + 5; // 15
let banding = (10 > 5); // true
4. Kondisi (if, else, switch)
Menentukan jalannya logika sesuai kondisi tertentu.
let nilai = 80;
if (nilai >= 75) {
console.log("Lulus");
} else {
console.log("Tidak lulus");
}
5. Perulangan (loop)
Melakukan pengulangan instruksi secara otomatis.
-
For loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
-
While loop
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
6. Function
Blok kode yang dapat digunakan berulang kali dengan parameter input tertentu.
function sapa(nama) {
console.log("Halo, " + nama);
}
sapa("Andi"); // Halo, Andi
7. Event
Menjalankan JavaScript berdasarkan aksi pengguna, misalnya klik tombol:
<button onclick="tampilkanPesan()">Klik Saya</button>
<script>
function tampilkanPesan(){
alert("Tombol diklik!");
}
</script>
8. DOM (Document Object Model)
Memanipulasi elemen HTML dengan JavaScript.
<p id="pesan">Halo Dunia!</p>
<script>
document.getElementById("pesan").innerHTML = "Halo JavaScript!";
</script>
9. Array & Metodenya
Operasi pada Array:
let buah = ["apel", "jeruk", "mangga"];
buah.push("anggur"); // ["apel", "jeruk", "mangga", "anggur"]
buah.pop(); // ["apel", "jeruk", "mangga"]
buah.shift(); // ["jeruk", "mangga"]
10. Object & Metodenya
Struktur data berbasis pasangan key-value.
let orang = {
nama: "Andi",
usia: 20,
sapa: function(){
console.log("Halo, nama saya " + this.nama);
}
};
orang.sapa(); // Halo, nama saya Andi
🔹 Konsep JavaScript Modern (ES6+)
-
Arrow function (
=>) -
Template literal (``)
-
Destructuring assignment
-
Modul (
import,export) -
Promise & Async/Await (asinkron)
Contoh ES6:
const sapa = (nama) => {
return `Halo, ${nama}`;
};
console.log(sapa("Andi")); // Halo, Andi
🔹 Contoh Praktis: Menampilkan Pesan Dinamis
<!DOCTYPE html>
<html lang="id">
<head>
<title>Contoh JavaScript</title>
</head>
<body>
<input type="text" id="nama">
<button onclick="tampilkan()">Klik!</button>
<script>
function tampilkan(){
let nama = document.getElementById('nama').value;
alert(`Halo, ${nama}!`);
}
</script>
</body>
</html>
🔹 Framework & Library Populer JavaScript
-
React.js (UI & Frontend)
-
Vue.js (Frontend)
-
Angular (Frontend)
-
Node.js (Backend)
-
Express.js (Backend)
✨ Selamat Belajar JavaScript! ✨
Posting Komentar untuk "Pilih Mana: JavaScript atau Python? Ini Jawaban Jujur Buat Kamu!"