什么是 JavaScript？JavaScript 代碼簡(jiǎn)介

溫柔嘗盡了嗎 2021-08-26 14:26:00 瀏覽數(shù) (4746)

反饋

JavaScript 創(chuàng)建于 26 年前，目前是最流行的編程語(yǔ)言之一。但什么是 JavaScript？JavaScript 與 HTML 和 CSS 一起使用來(lái)創(chuàng)建動(dòng)態(tài)和交互式網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序。我們經(jīng)常稱(chēng)它為Web 開(kāi)發(fā)的構(gòu)建塊之一。

根據(jù)W3Techs 的說(shuō)法，

97.6% 的網(wǎng)站使用 JavaScript 作為客戶(hù)端編程語(yǔ)言。

JavaScript 的歷史

1995 年，Netscape 開(kāi)發(fā)人員 Brendan Eich 在短短 10 天內(nèi)創(chuàng)建了 JavaScript 的第一版。剛出來(lái)的時(shí)候叫 Mocha，后來(lái)改成了 LiveScript，最后還是選擇了 JavaScript。

Brendan Eich 的老板希望 JavaScript 具有與 Java 相似的語(yǔ)法。他們還認(rèn)為，與 Java 相比，JavaScript 將有助于加速 Web 開(kāi)發(fā)并且更容易學(xué)習(xí)。

然而事實(shí)上JavaScript和java的關(guān)系就像雷鋒與雷鋒塔一樣，除了名字相似以外沒(méi)有相似的地方。

多年來(lái)，JavaScript 已經(jīng)發(fā)展成為一種多功能語(yǔ)言，可用于 Web 和移動(dòng)應(yīng)用程序。

什么是 ECMAScript？

ECMAScript 代表歐洲計(jì)算機(jī)制造商協(xié)會(huì)腳本。根據(jù)MDN 文檔，

ECMAScript是構(gòu)成 JavaScript 基礎(chǔ)的腳本語(yǔ)言。

該協(xié)會(huì)創(chuàng)建了 ECMA 標(biāo)準(zhǔn)，以確保網(wǎng)頁(yè)在不同瀏覽器之間保持一致。截至 2021 年 8 月，共有 12 個(gè)已發(fā)布的 ECMAScript 版本。

Java 和 JavaScript 一樣嗎？

盡管這兩種語(yǔ)言具有相似的語(yǔ)法并共享“Java”的前四個(gè)字母，但它們并不是同一種語(yǔ)言。

以下是兩種語(yǔ)言之間的一些主要區(qū)別。

Java 是一種編譯型編程語(yǔ)言。這意味著在程序運(yùn)行之前，需要將代碼翻譯成機(jī)器代碼，以便計(jì)算機(jī)能夠理解它。
JavaScript 是一種解釋型語(yǔ)言。在瀏覽器中，解釋器將讀取代碼并運(yùn)行它，而無(wú)需先編譯它。
Java 用作服務(wù)器端（后端）語(yǔ)言，而 JavaScript 主要用作客戶(hù)端（前端）語(yǔ)言。但是 JavaScript 也可用于使用 Node.js 創(chuàng)建后端 Web 應(yīng)用程序。

HTML、CSS 和 JavaScript 如何在網(wǎng)頁(yè)上協(xié)同工作？

現(xiàn)在我們已經(jīng)了解了 JavaScript 的歷史，我們需要了解它是如何在網(wǎng)站上工作的。

HTML 呈現(xiàn)內(nèi)容，CSS 設(shè)置頁(yè)面樣式以使其看起來(lái)不錯(cuò)，而 JavaScript 使站點(diǎn)具有交互性。但是交互意味著什么以及 JavaScript 如何與其他兩種語(yǔ)言一起工作？

讓我們看一個(gè)例子，以更好地理解這三種語(yǔ)言是如何協(xié)同工作的。

在此示例中，當(dāng)用戶(hù)單擊按鈕時(shí)，將顯示一條消息，其中包含用戶(hù)單擊的次數(shù)。當(dāng)計(jì)數(shù)達(dá)到某個(gè)閾值時(shí)，消息會(huì)隨著計(jì)數(shù)的增加而改變并變得更加明顯。

我們使用 HTML 在頁(yè)面上創(chuàng)建和顯示按鈕。

<button id="btn">Click me</button>

我們p的 HTML 中也有這個(gè)元素，它在開(kāi)始和結(jié)束標(biāo)記之間沒(méi)有任何文本。在 JavaScript 中，一旦用戶(hù)單擊按鈕，就會(huì)添加文本。

<p id="para"></p>

我們使用 CSS 來(lái)設(shè)置按鈕的樣式并將其放在頁(yè)面的中心。

button {
  display: block;
  margin: 20px auto 10px;
  padding: 25px 20px;
  font-size: 1.4rem;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-color: #3b5998;
  color: white;
}

為了訪問(wèn) HTML 元素，我們使用getElementById. 這就是我們的 JavaScript 的用武之地。

const btn = document.getElementById("btn");
const para = document.getElementById("para");

調(diào)用的變量count 會(huì)跟蹤用戶(hù)單擊按鈕的次數(shù)。每次單擊按鈕時(shí)，計(jì)數(shù)都會(huì)不斷更新。

let count = 0;

這是將顯示給用戶(hù)的響應(yīng)數(shù)組。

const responsesArr = [
  "You have clicked the button this many times: ",
  "Wow, you like to click that button. Button clicks: ",
  "Why do you keep clicking it? Button clicks:",
  "Now you are just being annoying. Button clicks:"
];

我們使用addEventListener它告訴計(jì)算機(jī)監(jiān)聽(tīng)點(diǎn)擊事件。檢測(cè)到點(diǎn)擊后，屏幕上將顯示帶有計(jì)數(shù)的消息。

btn.addEventListener("click", () => {
  count++;
  if (count < 10) {
    para.innerHTML = `${responsesArr[0]} ${count}`;
  } else if (count >= 10 && count < 15) {
    para.innerHTML = `${responsesArr[1]} ${count}`;
  } else if (count >= 15 && count < 20) {
    para.innerHTML = `${responsesArr[2]} ${count}`;
  } else {
    para.innerHTML = `${responsesArr[3]} ${count}`;
  }
});

我們使用一個(gè)if else語(yǔ)句來(lái)檢查按鈕被點(diǎn)擊了多少次，并根據(jù)計(jì)數(shù)數(shù)量顯示不同的消息。

如果count小于 10，則這是顯示在屏幕上的消息。