ELztech

Bahas technology bermanfaat dari 'A' sampai 'Z'

• 17 February 2023

Dasar JavaScript: Panduan Lengkap Belajar Dasar Pemrograman JavaScript dari Awal

Dasar JavaScript: Panduan Lengkap Belajar Dasar Pemrograman JavaScript dari Awal

JavaScript adalah salah satu bahasa pemrograman yang paling populer di dunia web. Sebagai bahasa skrip tingkat tinggi, JavaScript digunakan untuk memberikan interaktivitas pada situs web dan memungkinkan halaman web untuk merespons tindakan pengguna secara dinamis. Dalam blog ini, kita akan memahami apa itu JavaScript, mengapa bahasa ini sangat penting dalam pengembangan web, dan bagaimana kita dapat memanfaatkannya untuk meningkatkan pengalaman pengguna.

Apa itu JavaScript dan Mengapa Penting dalam Pengembangan Web

JavaScript adalah bahasa pemrograman yang sering digunakan untuk mengendalikan perilaku halaman web. Sementara HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets) bertanggung jawab untuk struktur dan tampilan halaman, JavaScript memberikan kehidupan pada halaman tersebut dengan menambahkan interaktivitas dan dinamika.

Ketika pengguna berinteraksi dengan halaman web, JavaScript memungkinkan elemen-elemen pada halaman berubah, merespons input pengguna, melakukan validasi data, memuat konten dinamis, dan banyak lagi. Tanpa JavaScript, web akan menjadi statis dan kaku, dengan sedikit atau tanpa respons terhadap tindakan pengguna.

JavaScript juga memungkinkan pengembang web untuk membuat aplikasi web modern seperti aplikasi real-time, aplikasi e-commerce dengan keranjang belanja interaktif, permainan online, dan banyak lagi. Kemampuan JavaScript untuk berintegrasi dengan DOM (Document Object Model) juga memungkinkan pengembang untuk mengubah dan memanipulasi elemen halaman web secara dinamis.

Perbedaan antara JavaScript dan Bahasa Pemrograman Lainnya

Walaupun nama “JavaScript” terdengar mirip dengan “Java,” keduanya adalah bahasa pemrograman yang berbeda. Java adalah bahasa pemrograman yang kuat dan umumnya digunakan untuk aplikasi desktop dan perangkat seluler, sedangkan JavaScript dirancang khusus untuk pengembangan web.

Selain itu, JavaScript memiliki perbedaan penting dengan bahasa pemrograman lain, seperti Python, C++, dan Ruby. Salah satu perbedaan utama adalah bahwa JavaScript adalah bahasa yang berbasis skrip (scripting language), berarti kode JavaScript dieksekusi di sisi klien (browser) dan bukan di sisi server. Ini memungkinkan JavaScript untuk memberikan respons cepat dan mengurangi beban server.

Keunikan JavaScript juga terletak pada dukungannya terhadap penggunaan functional programming dan event-driven programming. Paradigma functional programming memungkinkan pengguna untuk memperlakukan fungsi sebagai nilai, sehingga mengizinkan gaya pemrograman yang lebih deklaratif dan mudah dipahami. Sedangkan event-driven programming memungkinkan JavaScript merespons peristiwa yang terjadi pada halaman web, seperti klik tombol atau pengisian formulir.

Kombinasi dari fitur-fitur ini menjadikan JavaScript bahasa pemrograman yang unik dan sangat relevan dalam dunia pengembangan web saat ini. Dengan pemahaman yang baik tentang apa itu JavaScript dan perbedaannya dengan bahasa pemrograman lain, kita dapat memulai perjalanan untuk belajar dasar pemrograman JavaScript dengan keyakinan dan semangat.

Sebelum kita mulai menulis kode JavaScript, penting untuk memahami struktur dasar dari program JavaScript. Dalam bagian ini, kita akan menjelaskan tentang pernyataan, variabel, tipe data, dan operator, yang merupakan fondasi penting dalam memahami bahasa pemrograman JavaScript ini. Selain itu, kita juga akan mengenal aliran eksekusi kode dalam JavaScript, yang akan membantu kita memahami bagaimana kode dieksekusi secara berurutan.

Struktur Dasar Program JavaScript

1. Pernyataan (Statements)

Dalam JavaScript, pernyataan adalah unit dasar dari kode yang menyampaikan tindakan atau instruksi kepada program. Pernyataan diakhiri dengan tanda titik koma (;) dan bisa berupa:

console.log("Halo, dunia!"); // Pernyataan untuk mencetak pesan "Halo, dunia!" di konsol.
let angka = 10; // Pernyataan untuk mendeklarasikan variabel "angka" dan memberinya nilai 10.

2. Variabel (Variables)

let nama = "John"; // Mendeklarasikan variabel "nama" dengan nilai "John".
const pi = 3.14; // Mendeklarasikan variabel "pi" dengan nilai tetap 3.14.

3. Tipe Data (Data Types)

JavaScript memiliki beberapa tipe data bawaan, antara lain:

  • Angka (Number): Contohnya, 10, 3.14, -7, dsb.
  • String: Teks atau urutan karakter dalam tanda kutip, contohnya “Halo”, ‘JavaScript’, dsb.
  • Boolean: Nilai true atau false.
  • Array: Kumpulan nilai dalam tanda kurung siku dan dipisahkan oleh koma.
  • Objek (Object): Struktur data kompleks yang berisi properti dan nilai terkait.
let umur = 25; // Tipe data angka.
let namaDepan = "Jane"; // Tipe data string.
let apakahSudahMenikah = false; // Tipe data boolean.
let angkaRandom = [1, 5, 8, 3]; // Tipe data array.
let biodata = { nama: "John", umur: 30, pekerjaan: "Developer" }; // Tipe data objek.

4. Operator

Operator dalam JavaScript digunakan untuk melakukan operasi pada data. Beberapa operator yang umum digunakan adalah:

  • Operator Aritmatika: + (penjumlahan), - (pengurangan), * (perkalian), / (pembagian), dsb.
  • Operator Perbandingan: == (sama dengan), != (tidak sama dengan), > (lebih besar dari), dsb.
  • Operator Logika: && (dan), || (atau), ! (negasi).
let x = 5;
let y = 10;
let hasilTambah = x + y; // Operator aritmatika untuk penjumlahan.
let hasilPerbandingan = x > y; // Operator perbandingan untuk memeriksa apakah x lebih besar dari y.
let hasilLogika = x < 10 && y > 5; // Operator logika untuk memeriksa apakah x kurang dari 10 DAN y lebih besar dari 5.

Mengenal Aliran Eksekusi Kode dalam JavaScript

JavaScript dieksekusi berdasarkan aliran eksekusi kode yang berurutan dari atas ke bawah. Artinya, kode JavaScript dievaluasi satu per satu sesuai dengan urutan penempatannya dalam skrip.

let a = 5;
let b = 10;
let c = a + b; // Nilai c adalah hasil dari penjumlahan a dan b (5 + 10).

Dalam contoh di atas, variabel “a” dan “b” diinisialisasi terlebih dahulu sebelum operasi penjumlahan dilakukan untuk mengisi variabel c. Urutan eksekusi sangat penting dalam memastikan bahwa kode kita berperilaku sesuai dengan yang diharapkan.

Dengan pemahaman tentang pernyataan, variabel, tipe data, dan operator, serta aliran eksekusi kode dalam JavaScript, kita telah meletakkan dasar yang kuat untuk memulai perjalanan pemrograman kita. Selanjutnya, kita akan melangkah lebih jauh dengan mempelajari kontrol alur dan fungsi dalam JavaScript untuk membangun program yang lebih kompleks dan fungsional.

1. Kontrol Alur:

Kontrol alur adalah bagian penting dalam pemrograman yang memungkinkan kita untuk mengambil keputusan dan mengulangi tugas berdasarkan kondisi tertentu. Dalam bagian ini, kita akan mempelajari penggunaan kondisional (if, else if, else) untuk membuat keputusan dalam kode, serta cara menggunakan loop (for dan while) untuk mengulangi tugas secara berulang.

Penggunaan Kondisional

1. if Statement

Pernyataan kondisional “if” digunakan untuk mengeksekusi kode jika kondisi tertentu bernilai benar (true). Jika kondisi bernilai salah (false), blok kode dalam “if” akan diabaikan.

let angka = 10;

if (angka > 0) {
  console.log("Angka positif.");
}

2. else if Statement

Ketika kita memiliki beberapa kondisi yang ingin diuji, kita dapat menggunakan pernyataan “else if”. Jika kondisi dalam if tidak bernilai benar, maka JavaScript akan memeriksa kondisi dalam “else if”. Jika salah satu kondisi bernilai benar, blok kode yang sesuai akan dijalankan.

let angka = -5;

if (angka > 0) {
  console.log("Angka positif.");
} else if (angka < 0) {
  console.log("Angka negatif.");
} else {
  console.log("Angka nol.");
}

3. else Statement

Pernyataan “else” adalah opsional dan digunakan jika tidak ada kondisi yang terpenuhi dalam “if” atau “else if”. Jika tidak ada kondisi yang bernilai benar, blok kode dalam “else” akan dijalankan.

let waktu = "pagi";

if (waktu === "pagi") {
  console.log("Selamat pagi!");
} else {
  console.log("Selamat siang, sore, atau malam!");
}

Penggunaan Loop

1. for Loop

Loop “for” digunakan untuk mengulangi tugas berulang kali dengan mengatur variabel awal, kondisi berhenti, dan perubahan variabel pada setiap iterasi.

for (let i = 1; i <= 5; i++) {
  console.log("Iterasi ke-" + i);
}

2. while Loop

Loop while digunakan untuk mengulangi tugas selama kondisi tertentu bernilai benar (true). Perbedaan antara for dan while adalah for digunakan ketika kita tahu berapa kali iterasi yang dibutuhkan, sedangkan while digunakan ketika kita hanya tahu kondisi berhenti.

let i = 1;

while (i <= 5) {
  console.log("Iterasi ke-" + i);
  i++;
}

Beriut Contoh Penggunaan Kondisional dan Loop

Mari kita gabungkan penggunaan kondisional dan loop untuk mencetak angka genap dan ganjil dari 1 hingga 10:

for (let angka = 1; angka <= 10; angka++) {
  if (angka % 2 === 0) {
    console.log(angka + " adalah angka genap.");
  } else {
    console.log(angka + " adalah angka ganjil.");
  }
}

Dalam contoh di atas, kita menggunakan loop for untuk mengiterasi angka dari 1 hingga 10, dan menggunakan pernyataan kondisional if untuk memeriksa apakah angka tersebut genap atau ganjil.

Dengan menggunakan kontrol alur seperti kondisional (if, else if, else) dan loop (for, while), kita dapat mengontrol bagaimana kode kita dieksekusi berdasarkan kondisi dan memungkinkan kita untuk mengulangi tugas dengan efisien. Kontrol alur ini adalah elemen penting dalam pengembangan aplikasi dan membantu kita membuat program yang lebih dinamis dan interaktif.

2. Fungsi:

Fungsi adalah blok kode yang dapat dipanggil dan digunakan kembali di berbagai bagian dalam program. Dalam bagian ini, kita akan mempelajari cara membuat fungsi sederhana, menggunakan argumen untuk mengirim data ke dalam fungsi, dan bagaimana menggunakan return statement untuk mengembalikan nilai dari fungsi.

1. Membuat Fungsi Sederhana

Dalam JavaScript, kita dapat membuat fungsi dengan menentukan nama fungsi, diikuti oleh tanda kurung, dan blok kode di dalam tanda kurung kurawal.

function sapa() {
  console.log("Halo, selamat datang!");
}

2. Menggunakan Argumen

Fungsi dapat menerima input dalam bentuk argumen, yang memungkinkan kita untuk mengirim data ke dalam fungsi saat memanggilnya. Argumen ini berperan sebagai variabel lokal di dalam fungsi.

function sapa(nama) {
  console.log("Halo, " + nama + "!");
}

sapa("John"); // Output: "Halo, John!"

3. Penggunaan Return Statement

Dalam JavaScript, return statement digunakan untuk mengembalikan nilai dari fungsi. Jika kita ingin mendapatkan hasil dari fungsi dan menggunakan nilainya di tempat lain dalam kode, kita perlu menggunakan return.

function hitungLuasPersegi(sisi) {
  let luas = sisi * sisi;
  return luas;
}

let luasPersegi = hitungLuasPersegi(5); // Memanggil fungsi dan menyimpan hasilnya dalam variabel luasPersegi.
console.log("Luas persegi: " + luasPersegi); // Output: "Luas persegi: 25"

Return statement dapat digunakan untuk mengembalikan tipe data apapun, termasuk angka, string, array, objek, dan bahkan fungsi lain.

function jumlahDuaAngka(angka1, angka2) {
  let hasil = angka1 + angka2;
  return hasil;
}

let hasilPenjumlahan = jumlahDuaAngka(5, 10); // Memanggil fungsi dan menyimpan hasilnya dalam variabel hasilPenjumlahan.
console.log("Hasil penjumlahan: " + hasilPenjumlahan); // Output: "Hasil penjumlahan: 15"

Dengan menggunakan fungsi, kita dapat mengorganisir dan mengelompokkan kode ke dalam blok yang dapat digunakan kembali. Ini membantu kita untuk menghindari duplikasi kode dan membuat program lebih mudah dipelihara. Selain itu, penggunaan argumen dan return statement memungkinkan fungsi untuk berinteraksi dengan kode lain dan memberikan nilai yang relevan dalam berbagai situasi.

3. Array:

Array adalah struktur data yang memungkinkan kita untuk menyimpan beberapa nilai dalam satu variabel. Dalam bagian ini, kita akan mengenalkan konsep array, cara mengakses elemen-elemen di dalamnya, dan bagaimana menggunakan metode array bawaan JavaScript untuk manipulasi data.

1. Pengenalan Array

Array digunakan untuk menyimpan kumpulan nilai dalam urutan tertentu. Nilai-nilai ini dapat berupa angka, string, objek, atau bahkan array lainnya. Array menggunakan indeks numerik untuk mengidentifikasi setiap elemen di dalamnya, dan indeks dimulai dari 0.

let angka = [10, 20, 30, 40, 50]; // Mendefinisikan array dengan nilai angka.
let nama = ["John", "Jane", "Michael"]; // Mendefinisikan array dengan nilai string.
let campuran = [10, "Halo", true, { nama: "John" }]; // Mendefinisikan array dengan nilai campuran.

2. Cara Mengakses Elemen-elemen di dalam Array

Kita dapat mengakses elemen di dalam array dengan menggunakan indeksnya. Indeks diawali dengan 0 untuk elemen pertama, 1 untuk elemen kedua, dan seterusnya.

let angka = [10, 20, 30, 40, 50];
console.log(angka[0]); // Output: 10
console.log(angka[2]); // Output: 30

3. Penggunaan Metode Array Bawaan JavaScript

JavaScript menyediakan berbagai metode bawaan yang memungkinkan kita untuk melakukan manipulasi data pada array dengan lebih mudah dan efisien. Beberapa metode umum yang sering digunakan adalah:

  • “push()”: Menambahkan elemen baru ke akhir array.
  • “pop()”: Menghapus elemen terakhir dari array.
  • “shift()”: Menghapus elemen pertama dari array.
  • “unshift()”: Menambahkan elemen baru di awal array.
  • “splice()”: Menambahkan atau menghapus elemen di posisi tertentu dalam array.
  • “slice()”: Membuat salinan bagian dari array tanpa mengubah array asli.
  • “concat()”: Menggabungkan dua atau lebih array menjadi satu array baru.
  • “indexOf()”: Mencari indeks dari elemen tertentu dalam array.
  • “forEach()”: Melakukan iterasi pada setiap elemen dalam array.

Contoh penggunaan beberapa metode array:

let buah = ["apel", "pisang", "mangga"];

buah.push("jeruk"); // Menambahkan "jeruk" ke akhir array.
console.log(buah); // Output: ["apel", "pisang", "mangga", "jeruk"]

buah.pop(); // Menghapus elemen terakhir "jeruk" dari array.
console.log(buah); // Output: ["apel", "pisang", "mangga"]

buah.unshift("anggur"); // Menambahkan "anggur" di awal array.
console.log(buah); // Output: ["anggur", "apel", "pisang", "mangga"]

buah.splice(2, 1, "melon"); // Menghapus "pisang" dan menambahkan "melon" pada indeks 2.
console.log(buah); // Output: ["anggur", "apel", "melon", "mangga"]

Metode-metode ini memudahkan kita untuk mengubah dan mengelola data dalam array sesuai dengan kebutuhan aplikasi. Dengan menguasai konsep array dan metode bawaan JavaScript, kita dapat dengan mudah melakukan manipulasi data dan memanfaatkan array dalam berbagai skenario pengembangan aplikasi.

4. Objek:

Objek adalah struktur data yang kompleks dalam JavaScript yang digunakan untuk menyimpan data dalam bentuk pasangan properti (key) dan nilai (value). Objek memungkinkan kita untuk mengelompokkan data terkait bersama-sama dan memberikan cara yang efisien untuk mengakses dan mengelola data tersebut.

Pemahaman tentang Objek dan Properti

Dalam pemrograman, objek merepresentasikan entitas tertentu atau konsep yang memiliki karakteristik dan perilaku tertentu. Misalnya, jika kita ingin mewakili seorang pengguna, kita bisa membuat objek “pengguna” dengan properti seperti nama, umur, alamat, dan lainnya. Properti dalam objek adalah variabel yang memiliki nilai yang terkait dengan kunci tertentu (key).

// Contoh objek "pengguna"
let pengguna = {
  nama: "John Doe",
  umur: 30,
  alamat: "Jl. Jendral Sudirman No. 123",
  pekerjaan: "Developer"
};

Cara Membuat Objek dan Mengakses Nilainya

Untuk membuat objek, kita dapat menggunakan dua cara, yaitu dengan menggunakan literal objek dan fungsi konstruktor objek.

1. Membuat Objek dengan Literal Objek

Ini adalah cara sederhana untuk membuat objek langsung dengan menuliskan pasangan properti dan nilainya di dalam tanda kurung kurawal.

let mobil = {
  merk: "Toyota",
  model: "Avanza",
  tahun: 2022,
  warna: "Hitam"
};

Kita dapat mengakses nilai properti dari objek menggunakan sintaks dot (titik) atau square bracket (tanda kurung siku).

console.log(mobil.merk); // Output: "Toyota"
console.log(mobil["tahun"]); // Output: 2022

2. Membuat Objek dengan Fungsi Konstruktor Objek

Fungsi konstruktor objek digunakan untuk membuat objek dengan menggunakan blueprint atau cetakan objek. Dengan ini, kita dapat membuat banyak objek yang serupa dengan properti yang berbeda.

function Kendaraan(merk, model, tahun) {
  this.merk = merk;
  this.model = model;
  this.tahun = tahun;
}

let motor = new Kendaraan("Honda", "CBR150R", 2021);
let mobil = new Kendaraan("Mitsubishi", "Xpander", 2020);

Mengakses Nilai dalam Objek

Untuk mengakses nilai dalam objek yang dibuat menggunakan fungsi konstruktor, kita juga menggunakan sintaks dot atau square bracket.

console.log(motor.model); // Output: "CBR150R"
console.log(mobil["tahun"]); // Output: 2020

Dengan menggunakan objek, kita dapat mewakili data yang kompleks dan terstruktur dengan lebih baik. Properti dalam objek membantu kita mengorganisir dan mengakses data dengan cara yang lebih deskriptif dan mudah dipahami. Objek adalah salah satu aspek yang sangat penting dalam bahasa pemrograman JavaScript dan merupakan fondasi yang kuat untuk mengembangkan aplikasi web yang lebih canggih dan dinamis.

5. Manipulasi DOM:

Penjelasan tentang Document Object Model (DOM)

Document Object Model (DOM) adalah representasi dari struktur halaman web dalam bentuk pohon yang dihasilkan oleh browser saat halaman web di-load. DOM memungkinkan kita untuk mengakses dan memanipulasi elemen-elemen HTML dan atributnya menggunakan JavaScript. Setiap elemen dalam halaman web direpresentasikan sebagai node dalam pohon DOM, sehingga kita dapat mengakses dan mengubah elemen-elemen ini secara dinamis melalui JavaScript.

DOM menyediakan akses kepada seluruh elemen HTML sebagai objek, sehingga kita dapat mengubah konten, atribut, dan gaya halaman web secara langsung melalui JavaScript. Dengan menggunakan DOM, kita dapat membuat halaman web menjadi lebih interaktif dan dinamis, merespons tindakan pengguna, dan mengubah tampilan halaman secara real-time tanpa harus me-refresh seluruh halaman.

Bagaimana Mengubah Elemen HTML dengan JavaScript

JavaScript memberikan kemampuan untuk mengubah elemen HTML dalam halaman web dengan menggunakan metode dan properti DOM. Berikut adalah beberapa contoh bagaimana mengubah elemen HTML menggunakan JavaScript:

1. Mengubah Teks dalam Elemen

Kita dapat mengubah teks dalam elemen menggunakan properti “innerHTML” atau “textContent”.

<div id="pesan">Halo, selamat datang!</div>

<script>
  let pesanElemen = document.getElementById("pesan");
  pesanElemen.innerHTML = "Halo, dunia!"; // Mengubah teks dalam elemen menjadi "Halo, dunia!"
</script>

2. Menambahkan dan Menghapus Kelas CSS

Kita dapat menambahkan dan menghapus kelas CSS pada elemen menggunakan metode “classList”.

<div id="teks" class="warna-merah">Teks dengan warna merah</div>

<script>
  let teksElemen = document.getElementById("teks");
  teksElemen.classList.add("warna-biru"); // Menambahkan kelas "warna-biru".
  teksElemen.classList.remove("warna-merah"); // Menghapus kelas "warna-merah".
</script>

3. Menyembunyikan Elemen

Kita dapat menyembunyikan elemen dengan mengatur properti “display” pada gaya elemen.

<div id="kotak" style="display: block;"></div>

<script>
  let kotakElemen = document.getElementById("kotak");
  kotakElemen.style.display = "none"; // Menyembunyikan elemen "kotak".
</script>

4. Menambahkan dan Menghapus Elemen

Kita dapat menambahkan elemen baru ke dalam dokumen atau menghapus elemen yang ada menggunakan metode DOM seperti “createElement”, “appendChild”, dan “”removeChild"".

<div id="kontainer"></div>

<script>
  let kontainerElemen = document.getElementById("kontainer");
  
  // Menambahkan elemen paragraf baru.
  let paragrafBaru = document.createElement("p");
  paragrafBaru.textContent = "Ini adalah paragraf baru.";
  kontainerElemen.appendChild(paragrafBaru);
  
  // Menghapus elemen paragraf yang sudah ada.
  let paragrafLama = document.getElementById("paragraf-lama");
  kontainerElemen.removeChild(paragrafLama);
</script>

Dengan menggunakan metode dan properti DOM seperti yang telah dijelaskan di atas, kita dapat mengubah elemen HTML dalam halaman web secara dinamis sesuai dengan kebutuhan dan memberikan interaktivitas yang lebih baik untuk pengguna. DOM memberikan kekuatan kepada JavaScript untuk berinteraksi dengan struktur halaman web dan mengubah tampilan halaman secara real-time, sehingga menghadirkan pengalaman pengguna yang lebih kaya dan menarik.

6. Penanganan Event:

Menggunakan Event Listener untuk Merespons Interaksi Pengguna

Event listener adalah mekanisme dalam JavaScript yang memungkinkan kita untuk mendeteksi dan merespons berbagai interaksi pengguna, seperti klik mouse, input dari keyboard, perubahan ukuran layar, dan lainnya. Dengan event listener, kita dapat menambahkan fungsi (callback) yang akan dijalankan ketika event tertentu terjadi pada elemen tertentu dalam halaman web.

1. Mendengarkan Klik Mouse (click event)

Contoh berikut menunjukkan bagaimana menggunakan event listener untuk merespons klik mouse pada sebuah tombol.

<button id="tombol">Klik Saya</button>

<script>
  let tombolElemen = document.getElementById("tombol");
  tombolElemen.addEventListener("click", function() {
    alert("Tombol telah diklik!");
  });
</script>

2. Mendengarkan Input Keyboard (input event)

Contoh berikut menunjukkan bagaimana menggunakan event listener untuk merespons input dari keyboard pada sebuah input teks.

<<input type="text" id="input-teks">

<script>
  let inputElemen = document.getElementById("input-teks");
  inputElemen.addEventListener("input", function() {
    let nilaiInput = inputElemen.value;
    console.log("Input teks: " + nilaiInput);
  });
</script>

Melakukan Tindakan Berdasarkan Event yang Terjadi

Ketika event terjadi, kita dapat melakukan berbagai tindakan atau manipulasi data berdasarkan event tersebut.

1. Menampilkan atau Menyembunyikan Elemen

Dengan event listener, kita dapat menampilkan atau menyembunyikan elemen dalam halaman web ketika suatu event terjadi.

<button id="tombol-tampilkan">Tampilkan Pesan</button>
<button id="tombol-sembyunkan">Sembunyikan Pesan</button>
<div id="pesan" style="display: none;">Ini adalah pesan yang akan ditampilkan atau disembunyikan.</div>

<script>
  let pesanElemen = document.getElementById("pesan");
  let tombolTampilkan = document.getElementById("tombol-tampilkan");
  let tombolSembyunkan = document.getElementById("tombol-sembyunkan");
  
  tombolTampilkan.addEventListener("click", function() {
    pesanElemen.style.display = "block";
  });

  tombolSembyunkan.addEventListener("click", function() {
    pesanElemen.style.display = "none";
  });
</script>

2. Mengganti Isi atau Gaya Elemen

Kita juga dapat mengganti isi atau gaya dari elemen ketika event terjadi.

<button id="tombol-ubah-teks">Ubah Teks</button>
<div id="elemen-ubah-teks">Teks ini akan diubah.</div>

<script>
  let elemenUbahTeks = document.getElementById("elemen-ubah-teks");
  let tombolUbahTeks = document.getElementById("tombol-ubah-teks");

  tombolUbahTeks.addEventListener("click", function() {
    elemenUbahTeks.textContent = "Teks sudah diubah!";
    elemenUbahTeks.style.color = "blue";
  });
</script>

3. Menjalankan Fungsi Lain

Selain itu, kita juga dapat menjalankan fungsi lain ketika event terjadi.

<button id="tombol-halo">Klik untuk ucapkan halo!</button>

<script>
  let tombolHalo = document.getElementById("tombol-halo");

  function ucapkanHalo() {
    alert("Halo, selamat datang!");
  }

  tombolHalo.addEventListener("click", ucapkanHalo);
</script>

Dengan menggunakan event listener, kita dapat merespons interaksi pengguna dan melakukan tindakan yang relevan berdasarkan event yang terjadi. Ini memungkinkan kita untuk menciptakan interaktivitas yang lebih baik dalam halaman web dan memberikan pengalaman yang lebih kaya bagi pengguna. Dengan kreativitas dan penggunaan event listener dengan bijak, kita dapat menghadirkan fitur-fitur menarik dan interaktif dalam aplikasi web yang kita buat.

7. Validasi Form:

Validasi form adalah proses memastikan bahwa data yang dimasukkan oleh pengguna dalam formulir sesuai dengan kriteria yang diharapkan sebelum data tersebut dikirim ke server atau diproses lebih lanjut. Dengan menggunakan JavaScript, kita dapat menambahkan validasi input pada formulir untuk memastikan bahwa data yang dimasukkan pengguna valid dan sesuai dengan persyaratan tertentu.

1. Menguji Input untuk Kekosongan (Required Field)

Salah satu bentuk validasi sederhana adalah memastikan bahwa input pada formulir tidak kosong. Ini dapat dilakukan dengan memeriksa apakah nilai input memiliki panjang nol atau tidak.

<form id="formulir">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" required>
  <button type="submit">Submit</button>
</form>

<script>
  let formulir = document.getElementById("formulir");
  formulir.addEventListener("submit", function(event) {
    let inputNama = document.getElementById("nama").value;
    if (inputNama.trim() === "") {
      alert("Nama harus diisi!");
      event.preventDefault(); // Menghentikan pengiriman formulir jika ada kesalahan.
    }
  });
</script>

2. Validasi Tipe Data

Kita juga dapat memvalidasi tipe data yang dimasukkan oleh pengguna, misalnya, memastikan bahwa input adalah angka atau email.

<form id="formulir">
  <label for="usia">Usia:</label>
  <input type="number" id="usia">
  <button type="submit">Submit</button>
</form>

<script>
  let formulir = document.getElementById("formulir");
  formulir.addEventListener("submit", function(event) {
    let inputUsia = document.getElementById("usia").value;
    if (isNaN(inputUsia)) {
      alert("Usia harus berupa angka!");
      event.preventDefault();
    }
  });
</script>

3. Validasi Pola dengan RegEx

Kita juga dapat menggunakan regular expression (RegEx) untuk memvalidasi pola tertentu dalam input, seperti format email atau password yang kompleks.

<form id="formulir">
  <label for="email">Email:</label>
  <input type="email" id="email">
  <button type="submit">Submit</button>
</form>

<script>
  let formulir = document.getElementById("formulir");
  formulir.addEventListener("submit", function(event) {
    let inputEmail = document.getElementById("email").value;
    let polaEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (!polaEmail.test(inputEmail)) {
      alert("Email tidak valid!");
      event.preventDefault();
    }
  });
</script>

4. Validasi Panjang Input

Selain itu, kita juga dapat memvalidasi panjang input, seperti membatasi panjang minimal atau maksimal dari input tertentu.

<form id="formulir">
  <label for="username">Username:</label>
  <input type="text" id="username" minlength="6" maxlength="12">
  <button type="submit">Submit</button>
</form>

<script>
  let formulir = document.getElementById("formulir");
  formulir.addEventListener("submit", function(event) {
    let inputUsername = document.getElementById("username").value;
    if (inputUsername.length < 6 || inputUsername.length > 12) {
      alert("Username harus memiliki panjang 6 hingga 12 karakter!");
      event.preventDefault();
    }
  });
</script>

Dengan menambahkan validasi input pada formulir menggunakan JavaScript, kita dapat memberikan umpan balik kepada pengguna tentang kesalahan dalam pengisian formulir sebelum data dikirim ke server. Hal ini membantu meningkatkan pengalaman pengguna dan memastikan data yang diterima sesuai dengan persyaratan yang telah ditentukan. Validasi form menjadi langkah penting dalam pengembangan aplikasi web untuk memastikan data yang valid dan akurat.

8. Pengenalan ES6 (ECMAScript 6):

ECMAScript 6 (ES6), juga dikenal sebagai ECMAScript 2015, adalah versi standar terbaru dari bahasa pemrograman JavaScript. ES6 mengenalkan berbagai fitur baru yang meningkatkan kemampuan dan keamanan bahasa, serta menyediakan sintaksis yang lebih modern dan mudah dibaca. Fitur-fitur ES6 ini telah menjadi standar di banyak platform dan mendukung mayoritas browser modern. Berikut adalah beberapa fitur baru dalam ES6 yang perlu diketahui:

1. Let dan Const

ES6 memperkenalkan dua kata kunci baru untuk deklarasi variabel, yaitu let dan const. let digunakan untuk mendeklarasikan variabel dengan lingkup blok, sementara const digunakan untuk mendeklarasikan variabel yang nilainya tidak dapat diubah setelah diberikan.

// Menggunakan let
let angka = 10;
if (true) {
  let angka = 20; // Variabel angka di dalam blok if memiliki lingkup terpisah.
  console.log(angka); // Output: 20
}
console.log(angka); // Output: 10

// Menggunakan const
const pi = 3.14;
pi = 3.14159; // Error: Konstanta tidak dapat diubah.

2. Arrow Function

Arrow function adalah sintaksis pendek untuk mendefinisikan fungsi. Mereka lebih ringkas dan mengikat this ke lingkup fungsi induk, sehingga menghindari masalah umum terkait dengan this pada fungsi reguler.

// Fungsi reguler
function tambah(a, b) {
  return a + b;
}

// Arrow function
const tambah = (a, b) => a + b;

3. Template Literal

Template literal memungkinkan kita untuk menggabungkan string dengan nilai variabel dalam cara yang lebih mudah dengan menggunakan backtick (`) sebagai delimiter.

const nama = "John";
const umur = 30;
const teks = `Nama: ${nama}, Umur: ${umur}`;
console.log(teks); // Output: "Nama: John, Umur: 30"

4. Default Parameters

Default parameters memungkinkan kita untuk memberikan nilai default pada parameter fungsi jika parameter tersebut tidak diisi ketika fungsi dipanggil.

function sapa(nama = "Pengunjung") {
  console.log(`Halo, ${nama}!`);
}

sapa(); // Output: "Halo, Pengunjung!"
sapa("Jane"); // Output: "Halo, Jane!"

5. Destructuring Assignment

Destructuring assignment memungkinkan kita untuk membongkar nilai dari array atau objek dan menetapkan nilai tersebut ke variabel terpisah dalam satu baris.

// Destructuring array
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // Output: 1 2 3

// Destructuring objek
const { nama, umur } = { nama: "John", umur: 30 };
console.log(nama, umur); // Output: John 30

6. Import dan Export (Module)

// Di file lib.js
export function tambah(a, b) {
  return a + b;
}

// Di file main.js
import { tambah } from './lib.js';
console.log(tambah(2, 3)); // Output: 5

7. Classes

ES6 memperkenalkan sintaksis class yang lebih mudah digunakan dan mirip dengan paradigma pemrograman berorientasi objek pada bahasa pemrograman lain.

class Hewan {
  constructor(nama, jenis) {
    this.nama = nama;
    this.jenis = jenis;
  }

  sapa() {
    console.log(`Halo, saya adalah ${this.nama} (${this.jenis}).`);
  }
}

const kucing = new Hewan("Fluffy", "kucing");
kucing.sapa(); // Output: "Halo, saya adalah Fluffy (kucing)."

8. Promises

Promises memungkinkan kita untuk menangani operasi asynchronous dengan lebih mudah dan menghindari callback hell.

function getData() {
  return new Promise((resolve, reject) => {
    // Operasi asynchronous di sini
    // Jika berhasil, panggil resolve(data)
    // Jika gagal, panggil reject(error)
  });
}

getData()
  .then(data => {
    // Lakukan sesuatu dengan data yang diterima
  })
  .catch(error => {
    // Tangani error jika ada
  });

Fitur-fitur di atas adalah sebagian kecil dari perubahan dan peningkatan yang diperkenalkan dalam ES6. Dengan menggunakan ES6, kita dapat menulis kode JavaScript yang lebih efisien, modern, dan mudah dibaca. Penggunaan fitur-fitur ES6 ini semakin meningkat dalam pengembangan aplikasi web saat ini, dan memahami konsep-konsep ES6 akan membantu kita menjadi pengembang yang lebih produktif dan mampu menghasilkan kode yang lebih baik.

Apa Beriutnya?

Yey! Selamat 🎉 Kamu sudah mengenal Apa itu JavaScript dan sudah tau struktur dasar Pemrograman JavaScript.

Ini langkah awal yang baik untuk berikutnya kita akan bersama belajar dan mengurai satu persatu Tentang:

  • Kontrol Alur pada JavaScript.
  • Fungsi pada JavaScript.
  • Array pada JavaScript.
  • Objek pada JavaScript.
  • Manipulasi DOM pada JavaScript.
  • Penanganan Event pada JavaScript.
  • Validasi Form pada JavaScript.
  • Pengenalan ES6 (ECMAScript 6).
  • …

Semangat Belajar.

Previous

Dasar HTML : Text Formatting Pada HTML (Bold, Italic, Underline, dll)

Next

Dasar CSS : Sintaks yang Harus Dipahami pada CSS