JavaScript的简单介绍JavaScript创建于26年前，是目前最流行的编程语言之一。但什么是JavaScrip

JavaScript创建于26年前，是目前最流行的编程语言之一。但什么是JavaScript？

JavaScript与HTML和CSS一起被用来创建动态和互动的网页和移动应用程序。我们经常称它为网络开发的基石之一。

根据W3Techs的说法：

97.6%的网站使用JavaScript作为客户端编程语言。

JavaScript的历史

1995年，网景公司的开发人员Brendan Eich在短短10天内创建了JavaScript的第一个版本。它刚出来的时候叫Mocha，后来改成LiveScript，最后定名为JavaScript。

Brendan Eich的老板们希望JavaScript拥有与Java相似的语法。他们还认为，与Java相比，JavaScript将有助于加快网络开发的速度，而且更容易学习。

多年来，JavaScript已经成长和发展为一种多功能的语言，可以用于网络和移动应用。

什么是ECMAScript？

ECMAScript是欧洲计算机制造商协会脚本的缩写，根据MDN的文档。

ECMAScript是构成JavaScript基础的脚本语言。

该协会创建了ECMA标准，以确保网页在不同的浏览器上保持一致。截至2021年8月，ECMAScript总共有12个出版版本。

Java和JavaScript一样吗？

尽管这两种语言有相似的语法，并且共享 "Java "的前四个字母，但它们并不是同一种语言。

下面是这两种语言的一些主要区别：

Java是一种编译的编程语言：这意味着在程序运行之前，代码需要被翻译成机器代码，以便计算机能够理解它。
JavaScript是一种解释的语言：在浏览器中，解释器会读取代码并运行它，而不需要先编译它。
Java是作为服务器端（后端）语言使用的，而JavaScript主要是作为客户端（前端）语言使用的。但是，JavaScript也可以用Node.js来创建后端网络应用。

HTML、CSS和JavaScript如何在网页上协同工作？

现在我们已经了解了JavaScript的历史，我们需要了解它是如何在网站上工作的。

HTML渲染内容，CSS对页面进行样式设计以使其美观，而JavaScript则使网站具有互动性。但是，互动的意思是什么，以及JavaScript是如何与其他两种语言一起工作的？

让我们看一个例子，以更好地理解这三种语言是如何一起工作的。

在这个例子中，当用户点击一个按钮时，会显示一个信息，其中有用户点击的次数。当次数达到一定的阈值时，信息会发生变化，随着次数的增加，信息会变得更加讽刺。

我们使用HTML来创建并在页面上显示这个按钮：

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

我们的HTML中也有这个p 元素，它的开头和结尾标签之间没有任何文字。在JavaScript中，一旦用户点击了按钮，就会添加文本：

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

我们使用CSS来设计按钮的样式，并把它放在页面的中心：

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

被称为count 的变量记录了用户点击按钮的次数。每次点击按钮时，这个计数都会持续更新：

let count = 0;

这就是将显示给用户的响应数组：

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 ，它告诉计算机监听一个点击事件。一旦检测到点击，那么屏幕上就会出现带有计数的信息：

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