01. 基础语法：变量、类型、运算与模板字符串

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

产品名称单价数量

三、知识点提醒

`const` 适合不重新赋值的变量，`let` 适合会变化的变量。
表单输入默认是字符串，参与数学计算前通常需要 `Number()` 转换。
模板字符串适合拼接多行输出和变量。

四、练习建议

增加折扣输入框，例如 5% 折扣。
尝试把货币格式改成 `Intl.NumberFormat`。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/01-js-basic-syntax.js，下面同步展示，方便学习和复制。

// 页面 01：基础语法、变量、类型转换、模板字符串
const nameInput = document.querySelector('#p1-name');
const priceInput = document.querySelector('#p1-price');
const qtyInput = document.querySelector('#p1-qty');
const calcBtn = document.querySelector('#p1-calc');
const resetBtn = document.querySelector('#p1-reset');
const output = document.querySelector('#p1-output');

function formatMoney(amount) {
  return `$${amount.toFixed(2)} AUD`;
}

function renderResult() {
  const productName = nameInput.value.trim() || 'Unnamed Product';
  const price = Number(priceInput.value);
  const quantity = Number(qtyInput.value);
  const isValid = price > 0 && quantity > 0;

  if (!isValid) {
    output.textContent = '请输入大于 0 的单价和数量。';
    return;
  }

  const subtotal = price * quantity;
  const taxRate = 0.1;
  const tax = subtotal * taxRate;
  const total = subtotal + tax;

  output.textContent = `
产品：${productName}
单价：${formatMoney(price)}
数量：${quantity}
小计：${formatMoney(subtotal)}
GST 10%：${formatMoney(tax)}
总计：${formatMoney(total)}
  `.trim();
}

calcBtn.addEventListener('click', renderResult);
resetBtn.addEventListener('click', () => {
  nameInput.value = 'WPC Wall Panel';
  priceInput.value = 89;
  qtyInput.value = 12;
  output.textContent = '';
});
renderResult();