JavaScript 简介

JavaScript 入门

JavaScript 是一种多功能且功能强大的编程语言，主要以网页脚本语言而闻名。然而，由于 Node.js 的出现，它也被广泛用于许多非浏览器环境。对于创建动态、交互式和用户友好的 Web 体验来说，JavaScript 至关重要。

本页将初步介绍 JavaScript 的能力。

JavaScript 可以改变 HTML 内容

JavaScript 可以动态改变 HTML 元素的内容。一种常见的方法是使用 getElementById() 等方法查找元素，然后改变其 innerHTML 或 textContent 属性。

示例：

<!DOCTYPE html>
<html>
<body>

<p id="demo">This is a demonstration paragraph.</p>

<button onclick="changeText()">Click me to change text!</button>

<script>
function changeText() {
  const demoElement = document.getElementById("demo");
  demoElement.innerHTML = "Hello JavaScript! The text has changed.";
}
</script>

</body>
</html>

在此示例中，点击按钮会调用 changeText() 函数，该函数会更新 ID 为 “demo” 的段落内容。

JavaScript 可以改变 HTML 属性

JavaScript 还可以修改 HTML 元素的属性，例如图片的 src 属性或链接的 href 属性。

示例：改变图片来源

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="initial_image.png" alt="An image" width="100" height="100">
<br>
<button onclick="changeImage()">Change Image</button>

<script>
let isImageOne = true;
function changeImage() {
  const imageElement = document.getElementById("myImage");
  if (isImageOne) {
    imageElement.src = "new_image.png";
    imageElement.alt = "New Image";
  } else {
    imageElement.src = "initial_image.png";
    imageElement.alt = "Initial Image";
  }
  isImageOne = !isImageOne;
  // 注意：为了使此代码工作，'initial_image.png' 和 'new_image.png'
  // 需要是浏览器实际可以访问的图片文件。
  // 由于占位图片不可用，此示例仅用于说明概念。
  // 您可以尝试替换为有效的图片 URL，例如：
  // imageElement.src = 'https://via.placeholder.com/100/0000FF/808080?Text=New';
}
</script>

</body>
</html>

JavaScript 可以改变 HTML 样式 (CSS)

JavaScript 可以动态改变 HTML 元素的 CSS 样式，实现视觉效果和响应式设计。

示例：

<!DOCTYPE html>
<html>
<body>

<p id="styleDemo">This text will change style.</p>

<button onclick="changeStyle()">Change Style</button>

<script>
function changeStyle() {
  const styleDemoElement = document.getElementById("styleDemo");
  styleDemoElement.style.color = "blue";
  styleDemoElement.style.fontSize = "24px";
  styleDemoElement.style.fontWeight = "bold";
}
</script>

</body>
</html>

JavaScript 可以验证数据

JavaScript 常用于客户端表单验证，在数据发送到服务器之前为用户提供即时反馈。这可以改善用户体验，但不应取代服务器端验证以确保安全。

示例：简单输入验证

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 1 and 10:</p>
<input id="numInput" type="number">
<button onclick="validateInput()">Validate</button>
<p id="validationMessage"></p>

<script>
function validateInput() {
  const numInputElement = document.getElementById("numInput");
  const messageElement = document.getElementById("validationMessage");
  const number = parseInt(numInputElement.value);

  if (isNaN(number)) {
    messageElement.textContent = "Please enter a valid number.";
    messageElement.style.color = "red";
  } else if (number >= 1 && number <= 10) {
    messageElement.textContent = "Input is valid!";
    messageElement.style.color = "green";
  } else {
    messageElement.textContent = "Number must be between 1 and 10.";
    messageElement.style.color = "red";
  }
}
</script>

</body>
</html>

HTML5 还提供了内置的验证属性（例如 required、type="email"、min、max、pattern），这些属性与 Constraint Validation API 协同工作，JavaScript 可以进一步与之交互。

关于 JavaScript 的关键事实

• **不是 Java：**尽管名字相似，JavaScript 和 Java 在概念和设计上是完全不同的语言。
• **ECMAScript 标准：**JavaScript 由 Brendan Eich 于 1995 年在 Netscape（网景）发明。后来，它被标准化为 ECMAScript。ECMA-262 是官方标准名称。
• **演进：**ECMAScript 每年都会更新。ES2015（也称为 ES6）是一个重要的里程碑，引入了许多重要的新特性，如 let/const、箭头函数（arrow functions）、类（classes）、模块（modules）、Promise 等。随后的年度版本也在持续增加增强功能。

JavaScript 是一种动态的、解释型（或即时编译）的语言，拥有一等函数（first-class functions）。它支持面向对象、命令式和函数式编程风格。