0Pricing
JavaScript Academy · Pelajaran

Validasi Masukan, Dasar-Dasar Escape

Validasi dan normalkan masukan dengan daftar izin serta penjaga kecil; lakukan escape pada karakter berisiko sebelum menampilkan teks

Validasi Masukan, Dasar-Dasar Escape adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Gambaran umum

Tujuan: Buat masukan menjadi sederhana dan aman.

  • Gunakan klausa penjaga untuk menolak sejak awal
  • Utamakan daftar yang diizinkan daripada aturan yang samar
  • Normalkan menjadi bentuk sederhana
  • Amankan karakter khusus sebelum menampilkan teks
Validasi Masukan, Dasar-Dasar Escape — ilustrasi 1

Dasar-dasar penjagaan angka

Tambahkan penjagaan sederhana: periksa tipe, periksa rentang, lalu normalkan menjadi nilai akhir.

// Validate age: number and range guard
function parseAge(input) {
  // trim and parse
  const n = Number(input);
  if (!Number.isFinite(n)) return null; // reject non-numbers
  if (n < 0 || n > 130) return null;    // reject out-of-range
  return Math.floor(n);                  // normalize to integer
}

console.log("age ok:", parseAge("21"));
console.log("age bad:", parseAge("twenty"));
Validasi Masukan, Dasar-Dasar Escape — ilustrasi 2

Meloloskan teks untuk tampilan aman

Sebelum menampilkan teks pengguna, lakukan pelolosan karakter khusus agar antarmuka memperlakukannya sebagai teks biasa.

// Escape a few risky characters before displaying in HTML contexts
function escapeText(s) {
  if (typeof s !== "string") return "";
  return s
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll("\"", "&quot;")
    .replaceAll("'", "&#39;");
}

console.log("escaped:", escapeText("<b>Hello & bye</b>"));
Validasi Masukan, Dasar-Dasar Escape — ilustrasi 3

Daftar izin dalam praktik

Utamakan daftar izin untuk kumpulan tetap, seperti kode atau peran. Normalkan huruf besar-kecil dan spasi.

// Allowlist example: only certain country codes
const ALLOWED = new Set(["TR", "US", "DE", "GB"]);

function parseCountry(code) {
  if (typeof code !== "string") return null;
  const up = code.trim().toUpperCase();
  if (!ALLOWED.has(up)) return null; // reject unknown
  return up; // normalized
}

console.log("country ok:", parseCountry("tr"));
console.log("country bad:", parseCountry("xx"));
Validasi Masukan, Dasar-Dasar Escape — ilustrasi 4

Validator objek kecil

Periksa tipe dan batas, lalu kembalikan bentuk yang ternormalisasi agar dapat dipercaya oleh bagian kode lainnya.

// Validate a tiny user object and normalize
function validateUser(input) {
  if (typeof input !== "object" || input === null) return null;

  const nameOk = typeof input.name === "string" && input.name.trim().length >= 1 && input.name.trim().length <= 40;
  const ageOk = parseAge(input.age) !== null;

  if (!nameOk || !ageOk) return null;

  return {
    name: input.name.trim(),
    age: parseAge(input.age)
  };
}

console.log("user ok:", validateUser({ name: " Ayla ", age: "22" }));
console.log("user bad:", validateUser({ name: "", age: "old" }));
Validasi Masukan, Dasar-Dasar Escape — ilustrasi 5

Kebiasaan defensif yang baik

Kiat:

  • Lakukan validasi di titik batas, seperti input pengguna dan jaringan.
  • Gunakan daftar izin, rentang, dan pemeriksaan tipe.
  • Lakukan normalisasi sekali; sederhanakan bagian lainnya.
  • Lakukan pelolosan sebelum menampilkan teks kepada pengguna.
Validasi Masukan, Dasar-Dasar Escape — ilustrasi 6

Kuis dasar input defensif

Pemeriksaan singkat: Pola input yang aman.

Validasi Masukan, Dasar-Dasar Escape — ilustrasi 7

Ringkasan

Ringkasan: Lindungi sejak awal, gunakan daftar izin, lakukan normalisasi ke bentuk yang aman, dan lakukan pelolosan sebelum menampilkan data. Buat setiap langkah tetap kecil dan mudah dibaca.

Validasi Masukan, Dasar-Dasar Escape — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Validasi Masukan, Dasar-Dasar Escape” gratis?

Ya — teks lengkap “Validasi Masukan, Dasar-Dasar Escape” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Validasi Masukan, Dasar-Dasar Escape”?

Validasi dan normalkan masukan dengan daftar izin serta penjaga kecil; lakukan escape pada karakter berisiko sebelum menampilkan teks Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Validasi Masukan, Dasar-Dasar Escape” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Validasi Masukan, Dasar-Dasar Escape
  2. Penggabungan Objek yang Aman; Pembekuan dan Penyegelan
  3. Batas Galat (Konseptual) tanpa Kerangka Kerja
← Kembali ke JavaScript Academy