JavaScript 的演變

卑微的出身 (1995)

JavaScript 是由 Netscape 的 Brendan Eich 開發的，旨在為網站帶來互動性。它最初被稱為 Mocha，後來被稱為 LiveScript，為了適應 Java 的流行而獲得了現在的名稱。早期的使用是基本的，例如添加簡單的表單驗證。

1995 年程式碼範例：

<script>
  alert('Welcome to the 90s Web!');
</script>

在 MDN Web 文件上了解更多關於 JavaScript 誕生的資訊。

ECMAScript 標準化 (1997)

為了統一語法，ECMAScript 誕生了。 ECMAScript 3 (1999) 引進了改進，為瀏覽器一致性奠定了基礎。 ECMAScript 5 (2009) 透過嚴格模式和 forEach 等本機陣列方法進一步現代化了 JavaScript。

陣列方法範例：

['apple', 'banana', 'cherry'].forEach(fruit => console.log(fruit));

在 ECMA International 探索 ECMAScript 詳細資料。

AJAX 與動態 Web（2000 年代）

AJAX（非同步 JavaScript 和 XML）使 Gmail 和 Google 地圖等 Web 應用程式能夠刷新資料而無需重新載入頁面，標誌著向更豐富的 Web 體驗的轉變。

AJAX 請求範例：

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();

框架徹底改變了 JavaScript

jQuery (2006) 和 MooTools 的出現簡化了 DOM 互動並引入了強大的跨瀏覽器相容性。

Vanilla JS 與 jQuery 範例：

// Vanilla JavaScript (2005)
document.querySelector('#btn').addEventListener('click', () => alert('Clicked!'));

// jQuery (2006)
$('#btn').click(() => alert('Clicked!'));

在 jQuery 文件中深入了解 jQuery 的影響。

現代時代：ES6 以後 (2015)

ECMAScript 2015 (ES6) 帶來了重大更新，透過 let、const、模板文字、箭頭函數、類別和模組增強了編碼實踐。

帶有類別語法的 ES6 範例：

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
const person = new Person('Alice');
person.greet(); // Hello, my name is Alice

MDN ECMAScript 2015 上的 ES6 更新參考。

Node.js 將 JavaScript 帶入伺服器 (2009)

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/');

在 Node.js 官方網站探索 Node.js。

7. 框架和函式庫：React、Vue 和 Angular

React.js (2013) 帶來了基於元件的架構，而 Vue.js (2014) 則強調易用性。 Angular (2016) 使用 TypeScript 和強大的狀態管理改進了 Web 應用程式開發。

React 元件範例：

function App() {
  return <h1>Hello, React!</h1>;
}

有關 React 的更多信息，請參見 React Docs。

TypeScript：JavaScript 的型別安全 (2012)

TypeScript 引入了靜態類型，使得在開發過程中更容易捕獲錯誤。

TypeScript 與 JavaScript 範例：

<script>
  alert('Welcome to the 90s Web!');
</script>

TypeScript：因為 JavaScript 需要更多的紀律

沙法耶·侯賽因 ・ 10 月 14 日

#javascript #webdev #初學者 #程式設計

在 TypeScript 官方網站了解 TypeScript。

非同步程式設計革命

從回呼地獄到 Promises 和 async/await，JavaScript 的非同步程式設計方法不斷發展以實現更好的可讀性和可維護性。

過渡範例：

['apple', 'banana', 'cherry'].forEach(fruit => console.log(fruit));

MDN 非同步函數中有關非同步演變的詳細資訊。

2024 年及以後的 JavaScript

JavaScript 的未來提出了諸如裝飾器、記錄和元組類型以及模式匹配等建議，反映了它滿足開發人員需求的適應性。

在 TC39 提案中了解有關即將推出的功能的更多資訊。

我的網站：https://Shafayet.zya.me

給你的表情包？ ？ ？

以上是JavaScript 的演變的詳細內容。更多資訊請關注PHP中文網其他相關文章！