JavaScript 概述

1. 简称 JS

JavaScript 通常被简称为 JS，它是一种轻量级的编程语言，广泛用于网页开发。它最常用于客户端脚本，可以在浏览器中直接执行。

2. 一种脚本语言，脚本语言的特点

JavaScript 是一种 脚本语言，脚本语言的特点如下：

• 解释执行：不需要编译，浏览器可以直接读取和执行。
• 动态类型：不需要声明变量的类型，变量的类型可以随时改变。
• 轻量级：与系统级语言相比，脚本语言更加简单，适合快速开发和交互操作。
• 跨平台：JavaScript 可以在不同操作系统和浏览器上运行。
• 嵌入网页：脚本语言可以直接嵌入 HTML 页面，用于操作网页内容。

3. JavaScript 和 JScript 的关系

JavaScript 和 JScript 之间的关系：

• JavaScript 是 Netscape 公司开发的一种脚本语言，最初用于增强网页交互。
• JScript 是微软开发的 JavaScript 变种，主要用于 Internet Explorer 浏览器。
• 两者都遵循 ECMAScript 标准，功能上非常相似，但在某些浏览器特性上存在差异。
• 现代浏览器基本都支持标准的 JavaScript，而 JScript 随着 IE 的淘汰也逐渐不再使用。

4. JavaScript 主要用于操作 HTML 中的节点，产生动态效果

JavaScript 最主要的用途是操作 HTML 中的节点，从而产生动态效果。通过 DOM（文档对象模型），JavaScript 可以访问和操作网页的各个部分。

操作节点的常见方法：

• document.getElementById()：根据 ID 选择页面中的元素。
• document.querySelector()：通过 CSS 选择器获取元素。
• element.innerHTML：修改元素的 HTML 内容。
• element.style：修改元素的 CSS 样式。
• element.addEventListener()：为元素添加事件监听器，实现交互功能。

示例：

// 修改 ID 为 "demo" 的元素内容
document.getElementById("demo").innerHTML = "新内容";

// 改变 ID 为 "demo" 的元素背景颜色
document.getElementById("demo").style.backgroundColor = "yellow";
    

4.1 什么是 DOM？

DOM 是网页的结构化表示，它将 HTML 文档映射为一棵 树形结构，每个 HTML 元素都是树上的一个节点。JavaScript 可以通过 DOM 操作这些节点，实现动态更新页面的功能。

4.2 操作 HTML 节点的方法

JavaScript 通过多种方法访问和操作 HTML 节点，以下是几种常用方法：

• document.getElementById()：根据元素的 ID 获取元素。
• document.querySelector()：通过 CSS 选择器 获取元素。
• document.getElementsByClassName()：获取具有特定类名的所有元素。
• document.getElementsByTagName()：获取特定标签名的所有元素。

4.3 修改 HTML 内容

通过 innerHTML 属性，可以轻松修改页面元素的内容：

// 修改 ID 为 "example" 的元素的 HTML 内容
document.getElementById("example").innerHTML = "这是新的内容";
    

4.4 修改 CSS 样式

JavaScript 可以通过 style 属性直接修改元素的样式：

// 改变 ID 为 "box" 的元素的背景颜色
document.getElementById("box").style.backgroundColor = "blue";
    

4.5 添加和删除节点

JavaScript 还可以动态地创建、插入和删除 HTML 元素，实现动态页面的功能。

4.5.1 动态创建和插入元素

通过 document.createElement() 创建新元素，并使用 appendChild() 或 insertBefore() 将其插入页面：

// 创建一个新的 
 元素
var newParagraph = document.createElement("p");
// 设置内容
newParagraph.innerHTML = "这是一个新段落";
// 将该元素添加到页面中
document.body.appendChild(newParagraph);
    

4.5.2 动态删除元素

通过 removeChild() 可以删除页面中的元素：

// 找到要删除的元素
var elementToRemove = document.getElementById("example");
// 删除该元素
elementToRemove.parentNode.removeChild(elementToRemove);
    

4.6 事件处理

事件处理是 JavaScript 中的重要功能之一，它使网页可以响应用户操作，例如点击、鼠标悬停等。

4.6.1 添加事件监听器

使用 addEventListener() 为元素添加事件监听器：

// 为按钮添加点击事件
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});
    

4.6.2 常见事件类型

JavaScript 支持多种事件类型，以下是一些常见的事件：

• click：点击事件，触发用户点击元素时。
• mouseover：鼠标悬停在元素上时触发。
• keydown：键盘按下某个键时触发。
• submit：表单提交时触发。

4.7 动态效果示例

以下是一个简单的动态效果示例，通过点击按钮修改页面内容和样式：

// 修改内容和样式的函数
function changeContentAndStyle() {
    // 修改内容
    document.getElementById("text").innerHTML = "内容已更改！";
    // 修改样式
    document.getElementById("text").style.color = "red";
    document.getElementById("text").style.fontSize = "24px";
}

// 为按钮添加点击事件
document.getElementById("changeButton").addEventListener("click", changeContentAndStyle);
    

在这个示例中，当用户点击按钮时，页面内容和样式会发生变化。

5. JavaScript 和 Java 的区别

尽管 JavaScript 和 Java 名称相似，但它们是两种完全不同的编程语言：

• 用途不同：
  • Java：主要用于开发大型企业级应用、安卓应用和后台服务。
  • JavaScript：主要用于开发网页的前端交互功能，操作 HTML 和 CSS。
• 执行环境不同：
  • Java：运行在 JVM（Java 虚拟机）上，通过编译生成字节码后执行。
  • JavaScript：直接在浏览器中解释执行，无需编译。
• 语法不同：
  • Java：是强类型语言，声明变量时必须指定类型。
  • JavaScript：是动态类型语言，变量的类型可以在运行时改变。
• 面向对象的方式不同：
  • Java：使用类和对象，基于类的面向对象编程。
  • JavaScript：基于原型的面向对象编程。