<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

function validateForm() {
  if (document.forms["myForm"]["fname"].value == "") {
    alert("Name must be filled out");
    return false;
  }
}

<form name="myForm" action="#" onsubmit="return validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>
<script>
function validateForm() {
  if (document.forms["myForm"].elements["fname"].value == "") {
    alert("Name must be filled out");
    return false;
  }
  alert("Hợp lệ: dữ liệu sẽ được gửi đi");
  return false; // trong dự án thật: return true
}
// Mô phỏng người dùng bấm Submit khi chưa nhập gì
const form = document.forms["myForm"];
const ev = new Event("submit", { cancelable: true });
form.dispatchEvent(ev);
console.log("Việc gửi bị chặn?", ev.defaultPrevented);
// Mô phỏng sau khi đã nhập tên
form.elements["fname"].value = "An";
form.dispatchEvent(new Event("submit", { cancelable: true }));
</script>

<form id="f">
  Họ tên: <input id="ten" name="ten" required minlength="3"><br>
  Tuổi: <input id="tuoi" name="tuoi" type="number" min="18" max="60" required><br>
  Mã SV: <input id="ma" name="ma" pattern="[0-9]{8}" required>
</form>
<script>
const ten = document.getElementById("ten");
const tuoi = document.getElementById("tuoi");
const ma = document.getElementById("ma");

console.log("Bỏ trống:", ten.checkValidity(), tuoi.checkValidity(), ma.checkValidity());

ten.value = "Lan"; tuoi.value = "20"; ma.value = "11223344";
console.log("Điền đúng:", ten.checkValidity(), tuoi.checkValidity(), ma.checkValidity());

tuoi.value = "70"; ma.value = "abc";
console.log("Tuổi 70, mã 'abc':", tuoi.checkValidity(), ma.checkValidity());
console.log("Cả form hợp lệ?", document.getElementById("f").checkValidity());
</script>

<form>
  Mật khẩu: <input id="mk1" type="password" minlength="6">
  Nhập lại: <input id="mk2" type="password">
</form>
<script>
const mk1 = document.getElementById("mk1");
const mk2 = document.getElementById("mk2");

function kiemTraKhop() {
  if (mk1.value !== mk2.value) {
    mk2.setCustomValidity("Hai mật khẩu chưa khớp");
  } else {
    mk2.setCustomValidity(""); // xóa lỗi tùy chỉnh
  }
  return mk2.checkValidity();
}

mk1.value = "abc123"; mk2.value = "abc124";
console.log("Khác nhau:", kiemTraKhop(), "| lỗi:", mk2.validationMessage);
mk2.value = "abc123";
console.log("Giống nhau:", kiemTraKhop(), "| lỗi:", JSON.stringify(mk2.validationMessage));
</script>

Number: <input id="id1" type="number" max="100" min="20">
<input type="submit" value="Submit" onclick="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
  var txt = "";
  if (document.getElementById("id1").validity.rangeOverflow) {
    txt = "Value too large";
  }
  else if (document.getElementById("id1").validity.rangeUnderflow) {
    txt = "Value too small";
  }
  document.getElementById("demo").innerHTML = txt;
}

for (const v of ["150", "5", "50"]) {
  document.getElementById("id1").value = v;
  myFunction();
  console.log(v, "→", JSON.stringify(document.getElementById("demo").innerHTML));
}
</script>

const form = document.createElement("form");
form.innerHTML = '<input id="e" type="email" required maxlength="20" pattern=".+@neu\\.edu\\.vn">';
document.body.appendChild(form);
const e = form.elements.e;

const cacCo = ["valueMissing", "typeMismatch", "patternMismatch", "customError", "valid"];
function inCo(nhan) {
  console.log(nhan + " [" + JSON.stringify(e.value) + "]:",
    cacCo.filter(k => e.validity[k]).join(", "));
}
inCo("Rỗng");
e.value = "khongphaiemail"; inCo("Sai kiểu");
e.value = "[email protected]"; inCo("Sai khuôn mẫu");
e.value = "[email protected]"; inCo("Đúng");
e.setCustomValidity("Email này đã tồn tại"); inCo("Có lỗi tùy chỉnh");

function kiemTraEmail(s) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s);
}
function kiemTraSDT(s) {
  return /^0\d{9}$/.test(s);
}
const mau = [["[email protected]", "0912345678"], ["lan@neu", "912345678"], ["", "09123456789"]];
for (const [email, sdt] of mau) {
  console.log(JSON.stringify(email), kiemTraEmail(email), "|", JSON.stringify(sdt), kiemTraSDT(sdt));
}

// Mô phỏng "kẻ tấn công" bỏ qua form, gửi thẳng dữ liệu xấu tới máy chủ
function mayChuNhanDangKy(payload) {
  // Máy chủ KHÔNG tin trình duyệt: kiểm tra lại toàn bộ
  const loi = [];
  if (typeof payload.name !== "string" || payload.name.trim() === "") loi.push("name rỗng");
  if (!Number.isInteger(payload.age) || payload.age < 0) loi.push("age không hợp lệ");
  return loi.length ? { status: 400, loi } : { status: 201 };
}
console.log(mayChuNhanDangKy({ name: "An", age: 20 }));
console.log(mayChuNhanDangKy({ name: "  ", age: -5 }));

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
const c = document.getElementById("myCanvas");
console.log("Kích thước khung vẽ:", c.width + "x" + c.height);
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
if (ctx) {
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
  console.log("Đã vẽ đường chéo từ (0,0) tới (200,100)");
} else {
  console.log("Môi trường này không có đồ họa canvas thật; trình duyệt sẽ vẽ đường chéo.");
}
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
if (ctx) {
  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
  console.log("Đã vẽ hình tròn tâm (95,50), bán kính 40");
} else {
  console.log("Không có canvas thật; tâm (95,50), bán kính 40, chu vi ≈", (2 * Math.PI * 40).toFixed(1));
}
</script>

<canvas id="c1" width="200" height="70" style="border:1px solid #000"></canvas>
<canvas id="c2" width="200" height="70" style="border:1px solid #000"></canvas>
<script>
function ve(id, cheDo) {
  var ctx = document.getElementById(id).getContext("2d");
  if (!ctx) { console.log(id + ": không có canvas thật (" + cheDo + ")"); return; }
  ctx.font = "30px Arial";
  if (cheDo === "fill") ctx.fillText("Hello World", 10, 50);
  else ctx.strokeText("Hello World", 10, 50);
  console.log(id + ": đã vẽ chữ " + cheDo);
}
ve("c1", "fill");
ve("c2", "stroke");
</script>

<canvas id="lin" width="200" height="100" style="border:1px solid #000"></canvas>
<canvas id="rad" width="200" height="100" style="border:1px solid #000"></canvas>
<script>
var a = document.getElementById("lin").getContext("2d");
if (a) {
  var grd = a.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");
  a.fillStyle = grd;
  a.fillRect(10, 10, 150, 80);
}
var b = document.getElementById("rad").getContext("2d");
if (b) {
  var grd2 = b.createRadialGradient(75, 50, 5, 90, 60, 100);
  grd2.addColorStop(0, "red");
  grd2.addColorStop(1, "white");
  b.fillStyle = grd2;
  b.fillRect(10, 10, 150, 80);
}
console.log("Gradient tuyến tính:", a ? "đã vẽ" : "bỏ qua (không có canvas thật)");
console.log("Gradient tròn:", b ? "đã vẽ" : "bỏ qua (không có canvas thật)");
</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function () {
  if (ctx) ctx.drawImage(img, 10, 10);
  console.log("Ảnh đã tải xong, kích thước", img.width + "x" + img.height);
};
img.src = "data:image/svg+xml;utf8," + encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40"><rect width="60" height="40" fill="orange"/></svg>');
console.log("Đã yêu cầu tải ảnh; vẽ sẽ được thực hiện trong img.onload");
</script>

{
  "employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
  ]
}

let text = '{ "employees" : [' +
  '{ "firstName":"John" , "lastName":"Doe" },' +
  '{ "firstName":"Anna" , "lastName":"Smith" },' +
  '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

let obj = JSON.parse(text);
console.log(typeof text, "→", typeof obj);
console.log("Số nhân viên:", obj.employees.length);
console.log(obj.employees[1].firstName + " " + obj.employees[1].lastName);

<p id="demo"></p>
<script>
let text = '{ "employees" : [' +
  '{ "firstName":"John" , "lastName":"Doe" },' +
  '{ "firstName":"Anna" , "lastName":"Smith" },' +
  '{ "firstName":"Peter" , "lastName":"Jones" } ]}';
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
  obj.employees[1].firstName + " " + obj.employees[1].lastName;
console.log(document.getElementById("demo").innerHTML);
</script>

var myObj = { name: "John", age: 31, city: "New York" };
var myJSON = JSON.stringify(myObj);
console.log(typeof myJSON, myJSON);

// Giáo trình: window.location = "demo_json.php?x=" + myJSON;
var url = "demo_json.php?x=" + encodeURIComponent(myJSON);
console.log(url);

const sv = { ten: "Lan", lop: "CNTT 63A", diem: [8, 9.5] };
console.log(JSON.stringify(sv));
console.log(JSON.stringify(sv, null, 2));

const chuoiThu = [
  '{"ten": "An"}',        // đúng
  "{'ten': 'An'}",        // sai: nháy đơn
  '{ten: "An"}',          // sai: khóa không có nháy
  '{"ten": "An",}',       // sai: thừa dấu phẩy cuối
  '{"ten": undefined}'    // sai: JSON không có undefined
];
for (const s of chuoiThu) {
  try {
    JSON.parse(s);
    console.log("Hợp lệ:  ", s);
  } catch (e) {
    console.log("Không hợp lệ:", s, "→", e.name);
  }
}

{"employees":[
  { "firstName":"John", "lastName":"Doe" },
  { "firstName":"Anna", "lastName":"Smith" },
  { "firstName":"Peter", "lastName":"Jones" }
]}

<employees>
  <employee>
    <firstName>John</firstName> <lastName>Doe</lastName>
  </employee>
  <employee>
    <firstName>Anna</firstName> <lastName>Smith</lastName>
  </employee>
  <employee>
    <firstName>Peter</firstName> <lastName>Jones</lastName>
  </employee>
</employees>

const xml = "<employees><employee><firstName>John</firstName><lastName>Doe</lastName></employee>" +
  "<employee><firstName>Anna</firstName><lastName>Smith</lastName></employee></employees>";
const json = '{"employees":[{"firstName":"John","lastName":"Doe"},{"firstName":"Anna","lastName":"Smith"}]}';

// XML: phải phân tích thành cây DOM rồi tìm từng thẻ
const doc = new DOMParser().parseFromString(xml, "application/xml");
const dsXml = doc.getElementsByTagName("employee");
console.log("XML :", dsXml[1].getElementsByTagName("firstName")[0].textContent);

// JSON: một lệnh parse rồi dùng như đối tượng bình thường
const dsJson = JSON.parse(json).employees;
console.log("JSON:", dsJson[1].firstName);
console.log("Độ dài chuỗi — XML:", xml.length, "| JSON:", json.length);

const dl = {
  name: "John",            // chuỗi
  age: 30,                 // số
  employee: { city: "New York" }, // đối tượng
  employees: ["John", "Anna", "Peter"], // mảng
  sale: true,              // boolean
  middlename: null,        // rỗng
  // Những giá trị JSON KHÔNG hỗ trợ:
  chao: function () { return "hi"; },
  chuaCo: undefined,
  hong: NaN,
  ngay: new Date(0)
};
const chuoi = JSON.stringify(dl);
console.log(chuoi);
const lai = JSON.parse(chuoi);
console.log("Có hàm chao?", "chao" in lai, "| có chuaCo?", "chuaCo" in lai);
console.log("NaN thành:", lai.hong, "| Date thành:", typeof lai.ngay, lai.ngay);
for (const k of ["name", "age", "employee", "employees", "sale", "middlename"]) {
  console.log(k, "→", lai[k] === null ? "null" : Array.isArray(lai[k]) ? "array" : typeof lai[k]);
}

const kho = {}; // thay cho localStorage trong ví dụ
const gioHang = [{ ma: "A1", sl: 2 }, { ma: "B7", sl: 1 }];
kho.gioHang = JSON.stringify(gioHang);      // chỉ lưu được chuỗi
console.log("Đã lưu:", kho.gioHang);
const doc = JSON.parse(kho.gioHang);        // đọc lại thành mảng
doc.push({ ma: "C3", sl: 5 });
console.log("Tổng số lượng:", doc.reduce((t, x) => t + x.sl, 0));

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadData()">Change Content</button>
</div>
<script>
function loadData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "https://myWebsite-3db42-default-rtdb.firebaseio.com/Website.json", true);
  xhttp.send();
}
</script>
</body>
</html>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadData()">Change Content</button>
</div>
<script>
// ===== Máy chủ giả (chỉ để chạy thử trong bài) =====
const DATA = {
  "/Website.json": { status: 200, statusText: "OK", body: '{"title":"Thiết kế Web","chuong":6}' },
  "/ajax_info.txt": { status: 200, statusText: "OK", body: "Nội dung tải bằng AJAX" }
};
class FakeXHR {
  constructor() { this.readyState = 0; this.status = 0; this.statusText = ""; this.responseText = ""; }
  open(method, url) { this.method = method; this.url = url; this._doi(1); }
  send(body) {
    this._doi(2);
    setTimeout(() => {
      const r = DATA[this.url] || { status: 404, statusText: "Not Found", body: "" };
      this.status = r.status; this.statusText = r.statusText; this.responseText = r.body;
      this._doi(3); this._doi(4);
    }, 20);
  }
  _doi(n) { this.readyState = n; if (this.onreadystatechange) this.onreadystatechange(); }
}
// ===== Mã giống giáo trình =====
function loadData() {
  var xhttp = new FakeXHR();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
      console.log("Đã nhận:", this.responseText);
    }
  };
  xhttp.open("GET", "/Website.json", true);
  xhttp.send();
}
loadData(); // mô phỏng người dùng bấm nút
</script>

let xhttp = new XMLHttpRequest();

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

class FakeXHR {
  constructor() { this.readyState = 0; this.status = 0; this.responseText = ""; this._h = {}; }
  open(m, u) { this.method = m; this.url = u; this.readyState = 1; }
  setRequestHeader(k, v) { this._h[k.toLowerCase()] = v; }
  send(body) {
    setTimeout(() => {
      const kieu = this._h["content-type"] || "";
      if (this.method === "POST" && this.url === "ajax_test.asp" && kieu.includes("x-www-form-urlencoded")) {
        const p = new URLSearchParams(body);
        this.status = 200;
        this.responseText = "Xin chào " + p.get("fname") + " " + p.get("lname");
      } else { this.status = 400; this.responseText = "Yêu cầu sai"; }
      this.readyState = 4; this.onreadystatechange();
    }, 10);
  }
}
var xhttp = new FakeXHR();
xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) console.log("Phản hồi:", this.responseText);
  else console.log("Mã", this.status);
};
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

const DATA = { "ajax_info.txt": [200, "OK", "Xin chào từ máy chủ"] };
class FakeXHR {
  constructor() { this.readyState = 0; this.status = 0; this.statusText = ""; this.responseText = ""; }
  open(m, u) { this.url = u; this._doi(1); }
  send() {
    this._doi(2);
    setTimeout(() => {
      const r = DATA[this.url] || [404, "Not Found", ""];
      [this.status, this.statusText, this.responseText] = r;
      this._doi(3); this._doi(4);
    }, 5);
  }
  _doi(n) { this.readyState = n; this.onreadystatechange(); }
}
function loadDoc(url) {
  var xhttp = new FakeXHR();
  xhttp.onreadystatechange = function () {
    console.log(url, "readyState =", this.readyState, "| status =", this.status);
    if (this.readyState == 4 && this.status == 200) console.log("→ dữ liệu:", this.responseText);
    if (this.readyState == 4 && this.status != 200) console.log("→ lỗi:", this.status, this.statusText);
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
loadDoc("ajax_info.txt");
loadDoc("khong_co.txt");

class FakeXHR {
  constructor() { this.readyState = 0; this.status = 0; this.responseText = ""; }
  open(m, u) { this.url = u; }
  send() {
    setTimeout(() => {
      this.status = 200; this.readyState = 4;
      this.responseText = "dữ liệu của " + this.url;
      this.onreadystatechange();
    }, 5);
  }
}
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new FakeXHR();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction1(xhttp) { console.log("myFunction1 nhận:", xhttp.responseText); }
function myFunction2(xhttp) { console.log("myFunction2 nhận:", xhttp.responseText); }

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();

const xmlText = "<CATALOG><CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST></CD>" +
  "<CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST></CD></CATALOG>";
const xmlDoc = new DOMParser().parseFromString(xmlText, "text/xml"); // giống xhttp.responseXML
let txt = "";
const x = xmlDoc.getElementsByTagName("ARTIST");
for (let i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
}
console.log(txt);

class FakeXHR {
  constructor() { this.readyState = 0; this.status = 0; this._rh = {}; }
  open(m, u) { this.url = u; }
  send() {
    setTimeout(() => {
      this._rh = { "content-type": "text/plain", "last-modified": "Tue, 06 Oct 2026 08:00:00 GMT" };
      this.status = 200; this.readyState = 4; this.onreadystatechange();
    }, 5);
  }
  getResponseHeader(k) { return this._rh[k.toLowerCase()] ?? null; }
  getAllResponseHeaders() { return Object.entries(this._rh).map(([k, v]) => k + ": " + v).join("\r\n"); }
}
var xhttp = new FakeXHR();
xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.getAllResponseHeaders());
    console.log("Last-Modified =", this.getResponseHeader("Last-Modified"));
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(function (res) { return res.json(); })
  .then(function (data) {
    document.getElementById("demo").innerHTML = data.title;
  })
  .catch(function (err) { console.log("Lỗi: " + err); });

const BAI_VIET = { 1: { id: 1, title: "Giới thiệu AJAX", userId: 7 } };
function fakeFetch(url) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      const id = Number(url.split("/").pop());
      if (url.startsWith("loi://")) return reject(new TypeError("Failed to fetch"));
      const body = BAI_VIET[id];
      resolve({
        ok: !!body,
        status: body ? 200 : 404,
        json: function () { return Promise.resolve(body); }
      });
    }, 10);
  });
}

fakeFetch("https://api.example.com/posts/1")
  .then(function (res) { return res.json(); })
  .then(function (data) { console.log("Tiêu đề:", data.title); })
  .catch(function (err) { console.log("Lỗi: " + err); });

fakeFetch("loi://khong-ket-noi/posts/1")
  .then(function (res) { return res.json(); })
  .catch(function (err) { console.log("Lỗi: " + err); });

async function layBaiViet() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    if (!res.ok) throw new Error("Máy chủ trả về mã " + res.status);
    const data = await res.json();
    document.getElementById("demo").innerHTML = data.title;
  } catch (err) {
    console.log("Lỗi: " + err.message);
  }
}

const BAI_VIET = { 1: { id: 1, title: "Giới thiệu AJAX" } };
function fakeFetch(url) {
  return new Promise((resolve, reject) => setTimeout(() => {
    if (url.startsWith("loi://")) return reject(new TypeError("Failed to fetch"));
    const body = BAI_VIET[Number(url.split("/").pop())];
    resolve({ ok: !!body, status: body ? 200 : 404, json: () => Promise.resolve(body) });
  }, 10));
}

async function layBaiViet(url) {
  try {
    const res = await fakeFetch(url);
    if (!res.ok) throw new Error("Máy chủ trả về mã " + res.status);
    const data = await res.json();
    console.log("OK:", data.title);
  } catch (err) {
    console.log("Lỗi:", err.message);
  }
}

(async () => {
  await layBaiViet("https://api.example.com/posts/1");
  await layBaiViet("https://api.example.com/posts/99");
  await layBaiViet("loi://khong-ket-noi/posts/1");
})();

await fetch("https://example.com/api/sinhvien", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ hoten: "Nguyễn Văn A", lop: "CNTT 63A" })
});

// Máy chủ giả nhận POST JSON và trả về bản ghi kèm id
const dsSinhVien = [];
function fakeFetch(url, opts = {}) {
  return new Promise((resolve) => setTimeout(() => {
    if (opts.method === "POST" && opts.headers["Content-Type"] === "application/json") {
      const sv = JSON.parse(opts.body);
      sv.id = dsSinhVien.length + 1;
      dsSinhVien.push(sv);
      resolve({ ok: true, status: 201, json: async () => sv });
    } else resolve({ ok: false, status: 400, json: async () => ({}) });
  }, 5));
}
(async () => {
  const res = await fakeFetch("https://example.com/api/sinhvien", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ hoten: "Nguyễn Văn A", lop: "CNTT 63A" })
  });
  console.log("Mã:", res.status);
  console.log("Bản ghi nhận lại:", await res.json());
  console.log("Số bản ghi trên máy chủ:", dsSinhVien.length);
})();

function cungNguon(trang, apiUrl) {
  const a = new URL(trang), b = new URL(apiUrl);
  return a.protocol === b.protocol && a.hostname === b.hostname && a.port === b.port;
}
const trang = "https://fit.neu.edu.vn/codelab/index.html";
const thu = [
  "https://fit.neu.edu.vn/codelab/api/lop",       // cùng nguồn
  "http://fit.neu.edu.vn/codelab/api/lop",        // khác giao thức
  "https://api.neu.edu.vn/lop",                   // khác tên miền
  "https://fit.neu.edu.vn:8443/codelab/api/lop"   // khác cổng
];
for (const u of thu) console.log(cungNguon(trang, u) ? "CÙNG NGUỒN " : "KHÁC NGUỒN ", u);

<style>
  #container { width: 400px; height: 400px; position: relative; background: yellow; }
  #animate { width: 50px; height: 50px; position: absolute; background-color: red; }
</style>
<p><button onclick="myMove()">Click Me</button></p>
<div id="container">
  <div id="animate"></div>
</div>
<script>
function myMove() {
  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
      console.log("Dừng ở", elem.style.left, elem.style.top);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}
console.log("Bấm nút 'Click Me' để ô vuông chạy từ góc trên bên trái xuống góc dưới bên phải");
</script>

https://mywebsite-bee49-default-rtdb.firebaseio.com/website.json

const db = { website: { ten: "MyWebsite", chuDe: "Blog", nam: 2026 }, products: {} };
let demKhoa = 0;
function firebaseGia(method, path, body) {
  const noi = path.split("/");
  const cha = noi.slice(0, -1).reduce((o, k) => o[k], db);
  const khoa = noi[noi.length - 1];
  if (method === "GET") return cha[khoa];
  if (method === "PUT") { cha[khoa] = body; return body; }
  if (method === "PATCH") { Object.assign(cha[khoa], body); return body; }
  if (method === "DELETE") { delete cha[khoa]; return null; }
  if (method === "POST") {              // thêm bản ghi, tự sinh khóa
    const k = "-key" + (++demKhoa);
    cha[khoa][k] = body;
    return { name: k };
  }
}
console.log("GET   :", JSON.stringify(firebaseGia("GET", "website")));
console.log("PATCH :", JSON.stringify(firebaseGia("PATCH", "website", { nam: 2027 })));
console.log("Sau PATCH:", JSON.stringify(db.website));
console.log("PUT   :", JSON.stringify(firebaseGia("PUT", "website", { ten: "Moi" })));
console.log("Sau PUT  :", JSON.stringify(db.website));
const kq = firebaseGia("POST", "products", { name: "Samsung S22", price: 999 });
console.log("POST  : khóa mới =", kq.name);
firebaseGia("POST", "products", { name: "iPhone 14", price: 1099 });
console.log("Danh sách:", JSON.stringify(db.products));
firebaseGia("DELETE", "products/" + kq.name);
console.log("Sau DELETE:", JSON.stringify(db.products));

<div id="demo">
  <h2>Let AJAX add a Product</h2>
  <button type="button" onclick="addProduct()">Add Product</button>
</div>
<script>
function addProduct() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "https://myWebsite-3db42-default-rtdb.firebaseio.com/products.json", true);
  let data = JSON.stringify({ "name": "Samsung S22", "price": 999 })
  xhttp.send(data);
}
</script>

<style>
  .product { border: 1px solid red; padding: 6px 10px; margin: 4px; }
</style>
<div id="demo" style="display:flex"></div>
<script>
// ===== Firebase giả =====
const db = { products: {} };
class FakeXHR {
  constructor() { this.readyState = 0; this.status = 0; this.responseText = ""; }
  open(m, u) { this.m = m; this.u = u; }
  send(body) {
    setTimeout(() => {
      if (this.m === "POST") {
        const k = "-k" + (Object.keys(db.products).length + 1);
        db.products[k] = JSON.parse(body);
        this.responseText = JSON.stringify({ name: k });
      } else {
        this.responseText = JSON.stringify(db.products);
      }
      this.status = 200; this.readyState = 4; this.onreadystatechange();
    }, 5);
  }
}
// ===== Mã theo giáo trình =====
function addProduct(name, price, xong) {
  var xhttp = new FakeXHR();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) { console.log("Đã thêm, khóa:", this.responseText); xong(); }
  };
  xhttp.open("POST", "products.json", true);
  xhttp.send(JSON.stringify({ "name": name, "price": price }));
}
function getProducts() {
  var xhttp = new FakeXHR();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      let products = JSON.parse(this.responseText);
      for (let p in products) {
        const nodeProduct = document.createElement("div");
        nodeProduct.setAttribute("class", "product");
        const nodeName = document.createElement("div");
        nodeName.appendChild(document.createTextNode(products[p].name));
        nodeProduct.append(nodeName);
        const nodePrice = document.createElement("div");
        nodePrice.appendChild(document.createTextNode(products[p].price));
        nodeProduct.append(nodePrice);
        document.getElementById("demo").appendChild(nodeProduct);
      }
      console.log("Đã hiển thị", document.querySelectorAll(".product").length, "sản phẩm");
    }
  };
  xhttp.open("GET", "products.json", true);
  xhttp.send();
}
addProduct("Samsung S22", 999, function () {
  addProduct("iPhone 14", 1099, getProducts);
});
</script>

<div class="contact">
  <h4>Hòm thư</h4>
  <a href="mailto:[email protected]" id="info-email"></a>
  <h4>Điện thoại</h4>
  <a href="tel:+1255-568-6523" id="info-phone"></a>
  <h4>Địa chỉ</h4>
  <a href="https://www.google.com/maps" target="_blank" id="info-address"></a>
</div>
<script>
// Firebase giả: trả JSON giống dữ liệu đã tạo ở bước 2
class FakeXHR {
  open(m, u) { this.u = u; }
  send() {
    setTimeout(() => {
      this.responseText = JSON.stringify({ email: "[email protected]", phone: "0912 345 678", address: "Hà Nội" });
      this.status = 200; this.readyState = 4; this.onreadystatechange();
    }, 5);
  }
}
function getInfo() {
  var xhttp = new FakeXHR();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      let info = JSON.parse(this.responseText);
      document.getElementById("info-email").innerText = info.email;
      document.getElementById("info-phone").innerText = info.phone;
      document.getElementById("info-address").innerText = info.address;
      console.log("Đã điền:", info.email, "|", info.phone, "|", info.address);
    }
  };
  xhttp.open("GET", "info.json", true);
  xhttp.send();
}
getInfo();
</script>

<form id="register-form">
  Tên: <input id="ten" value="Minh"><br>
  Email: <input id="mail" value="[email protected]" type="email" required><br>
  <button type="submit">Gửi</button>
</form>
<script>
class FakeXHR {
  open(m, u) { this.m = m; this.u = u; }
  send(body) {
    setTimeout(() => {
      console.log("Máy chủ nhận", this.m, this.u, body);
      this.status = 200; this.readyState = 4; this.onreadystatechange();
    }, 5);
  }
}
function saveFormData() {
  var xhttp = new FakeXHR();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("register-form").innerHTML = "Done!";
      console.log("Giao diện:", document.getElementById("register-form").innerHTML);
    }
  };
  xhttp.open("POST", "register.json", true);
  const data = JSON.stringify({
    ten: document.getElementById("ten").value,
    email: document.getElementById("mail").value
  });
  xhttp.send(data);
}
const form = document.getElementById("register-form");
form.addEventListener("submit", function (e) {
  e.preventDefault();                       // chặn gửi form kiểu cũ
  if (form.checkValidity()) saveFormData(); // kết hợp xác thực ở mục 1
});
form.dispatchEvent(new Event("submit", { cancelable: true })); // mô phỏng bấm Gửi
</script>

<form id="f">
  <input id="o" placeholder="Nhập một chuỗi">
  <button type="submit">Gửi</button>
</form>
<p id="kq"></p>
<script>
const form = document.getElementById("f");
form.addEventListener("submit", function (e) {
  e.preventDefault();
  const v = document.getElementById("o").value.trim();
  const kq = document.getElementById("kq");
  if (v === "") { kq.textContent = "Bạn chưa nhập gì!"; }
  else { kq.textContent = "Bạn đã nhập: " + v; }
  console.log(kq.textContent);
});
// Mô phỏng: gửi khi trống, rồi gửi sau khi nhập
form.dispatchEvent(new Event("submit", { cancelable: true }));
document.getElementById("o").value = "Xin chào";
form.dispatchEvent(new Event("submit", { cancelable: true }));
</script>

<ul id="ds"></ul>
<div id="chitiet"></div>
<script>
const json = '[{"id":1,"ten":"Laptop A","gia":15000000,"mota":"RAM 16GB"},' +
             '{"id":2,"ten":"Chuột B","gia":250000,"mota":"Không dây"}]';
const sanPham = JSON.parse(json);
const ds = document.getElementById("ds");
sanPham.forEach(function (sp) {
  const li = document.createElement("li");
  li.textContent = sp.ten;
  li.style.cursor = "pointer";
  li.addEventListener("click", function () {
    document.getElementById("chitiet").textContent =
      sp.ten + " — " + sp.gia.toLocaleString("en-US") + " đ — " + sp.mota;
    console.log(document.getElementById("chitiet").textContent);
  });
  ds.appendChild(li);
});
ds.children[1].click(); // mô phỏng bấm vào sản phẩm thứ hai
</script>

const cauHoi = [
  { hoi: "JSON là viết tắt của?", dapAn: ["JavaScript Object Notation", "Java Source Object Name"], dung: 0, goiY: "Chữ N cuối là Notation (ký hiệu)." },
  { hoi: "Phương thức đổi chuỗi JSON thành đối tượng?", dapAn: ["JSON.stringify", "JSON.parse"], dung: 1, goiY: "Parse = phân tích cú pháp." }
];
let diem = 0;
function traLoi(i, chon) {
  const c = cauHoi[i];
  if (chon === c.dung) { diem++; console.log("Câu", i + 1, ": Đúng!"); }
  else console.log("Câu", i + 1, ": Sai. Gợi ý:", c.goiY);
}
traLoi(0, 0);
traLoi(1, 0); // chọn sai
traLoi(1, 1);
console.log("Điểm:", diem + "/" + cauHoi.length);