JavaScript 与 TypeScript 概览

JavaScript 用于浏览器和服务端开发，TypeScript 5.x 在此基础上提供静态类型检查。内容按语言能力组织，不再为 ES2016 之后的每个年份单独建立页面。

---

🔀 三阶段演进

🔀JavaScript / TypeScript 语法演进

ES1 → ES5 (1997–2009)原型、函数作用域、DOM 脚本与 JSON 奠定语言基础

var users = [{ name: "Ada", active: true }];
var activeNames = users
  .filter(function (user) { return user.active; })
  .map(function (user) { return user.name; });

💡 特性解析： 这一阶段形成 JavaScript 的动态对象、闭包、原型委托与事件驱动模型；ES5 带来严格模式和关键数组迭代方法。

1. ES6 之前：ES1～ES5 经典时代
2. ES6：现代 JavaScript 奠基
3. 现代 JavaScript：按能力持续演进

进入 JavaScript 模块 →

---

⚡ 高亮源码 / Live 效果

在下方切换高亮源码和 Live 效果，直接修改 JavaScript、操作 DOM 并查看 Console：

JavaScript

const status = document.querySelector('#status');
const count = document.querySelector('#count');
const button = document.querySelector('#action');
let value = 0;

status.textContent = '脚本已运行，可以点击按钮。';
button.addEventListener('click', () => {
  value += 1;
  count.textContent = value;
  console.log('当前计数:', value);
});
console.log('Live DOM 初始化完成');

const status = document.querySelector('#status'); const count = document.querySelector('#count'); const button = document.querySelector('#action'); let value = 0; status.textContent = '脚本已运行，可以点击按钮。'; button.addEventListener('click', () => { value += 1; count.textContent = value; console.log('当前计数:', value); }); console.log('Live DOM 初始化完成');

Tab 缩进 · Shift+Tab 反向缩进 · Esc 后按 Tab 离开编辑器
修改后切换到“效果”刷新预览 · Ctrl/⌘ + Enter

Console

（程序已运行，无控制台输出）