什么是 JavaScript？JavaScript 代碼簡介

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

反饋

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

根據(jù)W3Techs 的說法，

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

JavaScript 的歷史

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

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

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

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

什么是 ECMAScript？

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

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

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

Java 和 JavaScript 一樣嗎？

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

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

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

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

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

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

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

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

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

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

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

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

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

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;
}

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

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

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

let count = 0;

這是將顯示給用戶的響應(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它告訴計算機監(jiān)聽點擊事件。檢測到點擊后，屏幕上將顯示帶有計數(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}`;
  }
});

我們使用一個if else語句來檢查按鈕被點擊了多少次，并根據(jù)計數(shù)數(shù)量顯示不同的消息。

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