Pemrograma
n Web
JavaScript Dasar
1. Pengantar JavaScript
• JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman
web interaktif.
• Diperkenalkan pertama kali pada tahun 1995 oleh Brendan Eich saat bekerja di
Netscape.
• JavaScript berjalan di sisi klien (client-side) dan sering digunakan bersama dengan
HTML dan CSS.
• JavaScript Java
• JavaScript memungkinkan pengembang web untuk membuat halaman yang
dinamis dan responsif.
• Penggunaan modern meliputi pengembangan server ([Link]), web FE dan BE JS
(Vue JS atau Loopback), aplikasi mobile (React Native), dan pengembangan game.
Cara Menggunakan JavaScript dalam HTML
[Link] JavaScript (langsung di dalam elemen HTML)
<button onclick="alert('Halo, dunia!')">Klik Saya</button>
[Link] JavaScript (ditulis di dalam tag <script> di dalam <head> atau <body>)
<script>
function sapa() {
alert('Halo, dunia!’);
}
</script>
<button onclick="sapa()">Klik Saya</button>
[Link] JavaScript (ditulis di file .js terpisah dan dipanggil dengan <script>)
<script src="[Link]"></script>
Variabel dan Tipe Data Tipe Data dalam JavaScript
Mendeklarasikan Variabel •String → Teks ("Halo", 'Dunia')
JavaScript memiliki tiga cara untuk mendeklarasikan •Number → Angka (25, 3.14)
variabel: •Boolean → Nilai benar/salah (true, false)
•var (cara lama, cakupan global atau fungsi) •Array → Kumpulan nilai (["apel", "mangga"])
•let (memiliki cakupan blok, digunakan untuk variabel •Object → Struktur data dengan properti ({nama: "John",
yang bisa diubah) umur: 25})
•const (memiliki cakupan blok, nilai tetap/tidak bisa Contoh penggunaan array dan objek:
diubah)
let nama = "John"; let buah = ["Apel", "Mangga", "Jeruk"];
const umur = 25; let orang = { nama: "Budi", umur: 30, kota: "Bandung" };
var kota = "Jakarta";
Operator dan Percabangan
Percabangan dengan If-Else Operator Aritmatika
let nilai = 80; let hasil = 10 + 5;
if (nilai >= 75) { [Link]("Lulus"); [Link](hasil); // Output: 15
} else {
[Link]("Tidak Lulus");
}
Pemrograma
n Web
JavaScript Lanjutan
Fungsi dan Event, Manipulasi DOM, Looping
Mendefinisikan Fungsi Event Listener
function sapa(nama) { [Link]("myButton").addEventListener("click", function() {
return "Halo " + nama; alert("Tombol diklik!");
} });
[Link](sapa("Ali"));
Mengubah Konten Mengubah Gaya CSS
[Link]("judul").innerHTML = "Judul Baru"; [Link]("judul").[Link] = "red";
JavaScript mendukung berbagai jenis perulangan (loop): Contoh looping dengan for:
•for → Perulangan dengan jumlah yang ditentukan for (let i = 1; i <= 5; i++) {
•while → Perulangan berdasarkan kondisi tertentu [Link]("Iterasi ke-" + i);
•do-while → Perulangan minimal satu kali sebelum pengecekan kondisi }
AJAX dan Fetch API
Mengambil Data dengan Fetch
JavaScript memungkinkan komunikasi dengan server menggunakan Fetch API:
fetch('[Link]
.then(response => [Link]())
.then(data => [Link](data));
Object-Oriented Programming (OOP) dalam JavaScript
JavaScript mendukung paradigma pemrograman berbasis objek.
Menggunakan Class dalam JavaScript Membuat Objek dengan Constructor Function
class Mobil { class Orang {
constructor(merek, tahun) { constructor(nama, umur) {
[Link] = merek; [Link] = nama;
[Link] = tahun; [Link] = umur;
} }
info() { }
return `Mobil ${[Link]} dibuat tahun ${[Link]}`;
} let budi = new Orang("Budi", 30);
} [Link]([Link]);
let avanza = new Mobil("Toyota Avanza", 2020);
[Link]([Link]());
Kesimpulan
Dengan memahami JavaScript dasar dan lanjut, kita bisa
membuat web lebih interaktif dan dinamis. Penggunaan
variabel, fungsi, manipulasi DOM, looping, AJAX, serta
paradigma OOP memungkinkan pengembangan fitur canggih di
dalam aplikasi web. Menguasai JavaScript sangat penting bagi
pengembang web modern untuk menciptakan pengalaman
pengguna yang lebih baik.