JavaScript的演变之路

JavaScript 是由 Brendan Eich 在 Netscape 开发的，目的是让网站更具互动性。最初被称为 Mocha，后来改为 LiveScript，最终更名为 JavaScript，以顺应 Java 的流行。早期使用非常基础，例如添加简单的表单验证功能。

1995年代码的示例

    <script>
      alert('欢迎来到90年代的网络世界哦！');
    </script>

全屏模式，退出全屏

更多关于JavaScript诞生的信息，可以在这里的MDN Web Docs上查看。

为了统一语法，创建了ECMAScript。ECMAScript 3（1999）引入了改进措施，为浏览器之间的兼容性打下了基础。ECMAScript 5（2009）进一步通过引入“严格模式”和原生数组方法如 forEach 等来使JavaScript更现代化。

数组方法的例子，

    ['苹果', '香蕉', '樱桃'].forEach(fruit => console.log(fruit));

全屏模式，退出全屏

了解有关 ECMAScript 的详细信息，可以访问 ECMA International。

AJAX（异步JavaScript和XML技术）使如Gmail和Google Maps等网络应用可以在无需重新加载页面的情况下刷新数据，标志着向更丰富、更互动的网络体验转型。

一个 AJAX 请求的例子:

// 这是一个使用XMLHttpRequest从https://example.com/data获取数据的示例代码。
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 打印获取的数据
  }
};
xhr.send();

全屏模式 退出全屏

jQuery（2006年）和MooTools的出现，使得DOM操作得以简化，并带来了强大的跨浏览器兼容性。

原生JS对比jQuery:

    // 原生JavaScript
    document.querySelector('#btn').addEventListener('click', () => alert('点击啦！'));

    // jQuery
    $('#btn').click(() => alert('点击啦！'));

全屏模式 退出全屏

了解jQuery的影响，了解更多jQuery官网。

ECMAScript 2015 (ES6) 引入了 let、const、模板字面量、箭头函数、类和模块，大大增强了编码实践。

ES6 类语法示例代码:

    class Person {
      constructor(name) {
        this.name = name;
      }
      greet() {
        console.log(`你好，我是${this.name}`);
      }
    }
    const person = new Person('Alice');
    person.greet();

全屏 退出全屏

有关 ES6 更新的内容，请参阅 MDN ECMAScript 2015。

Node.js使JavaScript摆脱了浏览器的限制，可以在服务器上运行，从而实现了全栈JavaScript。

Node.js 服务器搭建示例:

const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello, world!');
}).listen(3000);
console.log('Server running at http://localhost:3000/');
// 创建一个HTTP服务器，监听3000端口，当连接时返回 'Hello, world!'

切换到全屏模式，退出全屏模式

了解 Node.js 请访问 Node.js 官网。

React.js（2013）引入了基于组件的架构，而Vue.js（2014）则以其易用性著称。Angular（2016）则借助TypeScript和强大的状态管理彻底革新了网页应用的开发方式。

React 组件的例子，比如

    function App() {
      return <h1>你好，React!</h1>;
    }

全屏 (按 Esc 键退出)

更多关于 React 的内容请参阅 React 官方文档。

TypeScript 引入了静态类型，这使得在开发过程中更容易发现错误。

TypeScript 与 JavaScript 对比示例:

    // TypeScript
    function greet(name: string): void {
      console.log(`Hello, ${name}`);
    }
    greet(123); // 错误信息：类型 'number' 无法赋值给 'string' 类型的参数。

全屏模式，退出全屏

## TypeScript：因为 JavaScript 可以更严谨一些 Shafayet Hossain ・ 10月14日 #javascript #web开发 #初学者 #编程

在TypeScript 官方网站可以学习 TypeScript。

从回调地狱（Callback Hell）到 Promises 以及 async/await，JavaScript 异步编程方式的发展使得代码更易读和维护。

示例过渡:

    // 回调地狱 (Callback Hell)
    fetchData((data) => {
      process(data, (result) => {
        save(result, () => {
          console.log('保存完毕!');
        });
      });
    });

    // 使用 Promise
    fetchData().then(process).then(save).then(() => console.log('保存完毕!'));

    // async/await (ES8)
    async function handleData() {
      const data = await fetchData();
      const result = await process(data); // ES8 新特性 (ES8 feature)
      await save(result);
      console.log('已保存！');
    }

进入全屏，退出全屏

详情请参考MDN 上的异步函数。

JavaScript 的未来将包括诸如装饰器、记录类型和元组类型以及模式匹配等提案，这反映了它对满足开发者需求的适应性。

了解更多即将推出的特性，查看TC39 提案。

或者：

此处省略内容

取决于" "是用于表示省略内容还是保持原有格式。 如果是为了保持原有格式，则直接翻译为" "；如果是为了表示省略内容，则翻译为“此处省略内容”。此处根据具体需求进行选择。

我的个人网站是 https://Shafayet.zya.me，欢迎来访！

给你个梗😉😉😉