Tujuan Pembelajaran
Setelah mengikuti pertemuan ini, mahasiswa mampu menulis dasar-dasar JavaScript meliputi variabel, tipe data, operator, percabangan, perulangan, dan fungsi, serta menjalankannya di konsol browser.
Pengenalan JavaScript
JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi interaktif. Berbeda dengan HTML yang mendeskripsikan struktur dan CSS yang mengatur tampilan, JavaScript mengatur perilaku seperti menanggapi klik, memvalidasi formulir, dan merubah isi halaman tanpa memuat ulang. JavaScript berjalan di browser pengguna (client-side).
Kode JavaScript bisa ditulis langsung di dalam tag <script> di bagian body, atau lebih baik di file eksternal yang dipanggil menggunakan atribut src. Uji kode cepat dengan mengetik perintah di konsol DevTools yang dibuka dengan tombol F12.
<code class="language-javascript">console.log("Halo dari JavaScript");</code>
Variabel dan Tipe Data
Variabel digunakan untuk menyimpan nilai. Tiga kata kunci untuk mendeklarasikan variabel adalah let untuk nilai yang bisa berubah, const untuk nilai tetap, dan var yang sudah jarang dipakai. JavaScript memiliki tipe data dasar: number, string, boolean, null, undefined, object, dan array.
String ditulis di antara tanda kutip atau backtick. Template literal dengan backtick memungkinkan kita menyisipkan variabel ke dalam teks menggunakan tanda dolar dan kurung kurawal.
<code class="language-javascript">let nama = "Budi";
const usia = 20;
let isAktif = true;
let daftar = [1, 2, 3];
let orang = { nama: "Siti", usia: 22 };
console.log(`Halo, nama saya ${nama}`);</code>
Operator, Percabangan, dan Perulangan
Operator aritmatika meliputi penjumlahan, pengurangan, perkalian, pembagian, dan modulus. Operator perbandingan seperti sama dengan dan lebih besar digunakan untuk membuat kondisi. Percabangan memakai if, else if, dan else untuk memilih jalur sesuai kondisi.
Perulangan menjalankan blok kode berulang kali. Perulangan for cocok saat jumlah iterasi diketahui, sedangkan while digunakan saat jumlahnya tergantung kondisi. Perulangan for juga sering dipakai untuk menjelajahi array.
<code class="language-javascript">let nilai = 85;
if (nilai >= 75) {
console.log("Lulus");
} else {
console.log("Tidak lulus");
}
for (let i = 1; i <= 5; i++) {
console.log("Angka " + i);
}</code>
Fungsi
Fungsi adalah blok kode yang dapat dipanggil berulang kali dengan nama tertentu, membantu menghindari pengulangan kode. Deklarasi fungsi dimulai dengan kata kunci function diikuti nama, parameter di dalam kurung, dan isi di dalam kurung kurawal. Nilai dikembalikan dengan return.
Ada juga arrow function yang lebih ringkas, ditulis dengan tanda panah antara parameter dan isi. Fungsi dapat menerima parameter dan memprosesnya menjadi hasil yang bisa disebut fungsi lain.
<code class="language-javascript">function tambah(a, b) {
return a + b;
}
const kali = (a, b) => a * b;
console.log(tambah(3, 4)); // 7
console.log(kali(3, 4)); // 12</code>
Langkah Praktik
Buat halaman HTML sederhana dan tautkan file script.js di bagian akhir body. Tulis beberapa perintah console.log untuk tiap tipe data, lalu buka konsol browser untuk melihat hasilnya. Eksperimen dengan percabangan dan perulangan di konsol.
Coba modifikasi variabel const dan amati pesan error yang muncul untuk memahami perbedaannya dengan let. Kemudian tulis sebuah fungsi dan panggil dari konsol dengan nilai berbeda.
Konsep Kunci
- JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi interaktif.
- Berbeda dengan HTML yang mendeskripsikan struktur dan CSS yang mengatur tampilan, JavaScript mengatur perilaku seperti menanggapi klik, memvalidasi formulir, dan merubah isi halaman tanpa memuat ulang.
- JavaScript berjalan di browser pengguna (client-side).
- Kode JavaScript bisa ditulis langsung di dalam tag <script> di bagian body, atau lebih baik di file eksternal yang dipanggil menggunakan atribut src.
- Uji kode cepat dengan mengetik perintah di konsol DevTools yang dibuka dengan tombol F12.
- Tiga kata kunci untuk mendeklarasikan variabel adalah let untuk nilai yang bisa berubah, const untuk nilai tetap, dan var yang sudah jarang dipakai.
- JavaScript memiliki tipe data dasar: number, string, boolean, null, undefined, object, dan array.
- String ditulis di antara tanda kutip atau backtick.
- Template literal dengan backtick memungkinkan kita menyisipkan variabel ke dalam teks menggunakan tanda dolar dan kurung kurawal.
- Operator aritmatika meliputi penjumlahan, pengurangan, perkalian, pembagian, dan modulus.
- Operator perbandingan seperti sama dengan dan lebih besar digunakan untuk membuat kondisi.
Contoh Kode
<code class="language-javascript">let getal = 7;
const name = "Siti";
let waar = true;
if (getal > 5) {
console.log("Big number");
} else {
console.log("Small number");
}</code>
<code class="language-javascript">function begroet(name) {
return "Hello " + name;
}
console.log(begroet("Budi"));</code>
JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi interaktif. Berbeda dengan HTML yang mendeskripsikan struktur dan CSS yang mengatur tampilan, JavaScript mengatur perilaku seperti menanggapi klik, memvalidasi formulir, dan merubah isi halaman tanpa memuat ulang. JavaScript berjalan di browser pengguna (client-side).
Latihan
Tulis program JavaScript yang menerima dua angka, menjumlahkan, mengurangkan, mengalikan, dan membaginya, lalu menampilkan hasil dalam satu string menggunakan template literal. Tampilkan juga apakah hasil penjumlahan genap atau ganjil menggunakan percabangan.
