了解JavaScript

1 什么是JavaScript？

JavaScript（简称JS）是一种广泛用于客户端开发的脚本语言。它最初由Netscape公司的Brendan Eich在1995年创建，目的是为了在网页上添加动态和交互性。JavaScript是一种解释型语言，这意味着它不需要编译就可以直接在浏览器中运行。

以下是JavaScript的一些主要特点：

  1. 跨平台性：JavaScript可以在几乎所有的现代浏览器中运行，包括Chrome、Firefox、Safari、Edge等。

  2. 事件驱动：JavaScript可以通过事件处理器对用户的操作（如点击、鼠标移动等）做出响应。

  3. 动态性：JavaScript允许在运行时修改HTML和CSS，从而实现动态网页效果。

  4. 弱类型：JavaScript是一种弱类型语言，变量不需要预先声明类型，可以在运行时改变类型。

  5. 面向对象：虽然JavaScript是一种基于原型的语言，但它也支持面向对象编程。

  6. 模块化：随着ES6（ECMAScript 2015）的发布，JavaScript引入了模块系统，使得代码组织和管理更加方便。

  7. 异步编程：JavaScript支持异步编程，通过回调函数、Promise和async/await等方式处理异步操作。

JavaScript不仅用于前端开发，还可以通过Node.js在后端运行，使得全栈开发成为可能。此外，JavaScript还可以用于开发桌面应用（如Electron）和移动应用（如React Native）。

总之，JavaScript是一种功能强大、灵活且广泛应用的编程语言，无论是前端还是后端开发，都能看到它的身影。

2 如何实现JavaScript？

JavaScript是一种解释型语言，这意味着它不需要编译就可以直接在浏览器中运行。因此，实现JavaScript主要有以下几种方式：

  1. 内嵌在HTML中：通过<script>标签将JavaScript代码嵌入到HTML文档中。
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<title>Hello, JavaScript</title>
</head>
<body>
	<h1>Hello, JavaScript</h1>
	<script>
		alert("Hello, JavaScript");
	</script>
</body>
</html>
  1. 通过外部文件引用：通过<script>标签的src属性指定外部JavaScript文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
	<title>Hello, JavaScript</title>
    <script src="C:\Users\.PORJECT\JAVASCRIPT\JavaScript.js"></script>
</head>
<body>
	<h1>Hello, JavaScript</h1>
    <p id="demo">这是一个示例文本。</p>
	<script>
		alert("Hello, JavaScript");
	</script>
</body>
</html>
1
2
3
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('demo').textContent = '页面已经加载完成！';
});

这个JavaScript文件中的代码会在文档加载完成后执行，它将修改页面中ID为 demo 的元素的内容。

3 JavaScript的基本语法

JavaScript 是一种广泛使用的脚本语言，主要用于前端Web开发，但也可以在服务器端使用（例如通过Node.js）。以下是JavaScript的一些基本语法要点：

3.1 . 变量声明

在JavaScript中，你可以使用 var, let 或 const 关键字来声明变量。其中 let 和 const 是ES6引入的新特性，const 用于声明常量，即值不能改变的变量。

1
2
3
var message = "Hello World";  // 使用 var 声明变量
let age = 25;                 // 使用 let 声明变量
const pi = 3.14;              // 使用 const 声明常量

3.2 . 数据类型

JavaScript 支持以下几种数据类型：

  • 原始类型：string, number, boolean, null, undefined, symbol (ES6 引入), bigint (ES10 引入)
  • 对象类型：object, function, array, date, regexp 等
1
2
3
4
5
6
7
8
9
let name = "Alice";           // 字符串
let score = 95;               // 数字
let isPassed = true;          // 布尔值
let nothing = null;           // null
let unknown = undefined;      // undefined
let sym = Symbol();           // symbol
let bigNum = 123456789012345678901234567890n; // bigint
let obj = {};                 // 对象
let arr = [];                 // 数组

3.3 . 运算符

JavaScript 支持多种运算符，包括算术运算符、比较运算符、逻辑运算符等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let x = 5;
let y = 3;
console.log(x + y);           // 加法
console.log(x - y);           // 减法
console.log(x * y);           // 乘法
console.log(x / y);           // 除法
console.log(x % y);           // 取模
console.log(x == y);          // 相等
console.log(x != y);          // 不相等
console.log(x > y);           // 大于
console.log(x < y);           // 小于
console.log(x >= y);          // 大于等于
console.log(x <= y);          // 小于等于
console.log(x && y);          // 逻辑与
console.log(x || y);          // 逻辑或
console.log(!x);              // 逻辑非

3.4 . 控制结构

  • 条件语句：if, else if, else
  • 循环语句：for, while, do...while
  • 开关语句：switch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let grade = 85;
if (grade >= 90) {
    console.log("优秀");
} else if (grade >= 70) {
    console.log("良好");
} else {
    console.log("及格");
}

// 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// 开关语句
switch (grade) {
    case 90:
        console.log("优秀");
        break;
    case 70:
        console.log("良好");
        break;
    default:
        console.log("及格");
}

3.5 . 函数定义

函数是一段可重复使用的代码块。

1
2
3
4
5
function greet(name) {
    console.log("Hello, " + name);
}

greet("World");  // 调用函数

3.6 . 对象与数组

JavaScript 中的对象和数组是处理数据的重要方式。

1
2
3
4
5
6
7
8
9
10
11
12
let person = {
    name: "Alice",
    age: 25,
    sayHello: function() {
        console.log("Hello from " + this.name);
    }
};

person.sayHello();

let fruits = ["apple", "banana", "orange"];
fruits.forEach(fruit => console.log(fruit));

以上就是JavaScript的基本语法介绍。当然，JavaScript还有许多高级特性和概念，如闭包、原型继承、异步编程等，这些需要进一步学习才能掌握。

4 JavaScript与Java的区别：

Java 和 JavaScript 是两种完全不同的编程语言，尽管它们的名字听起来很相似，但实际上并没有直接的关系。以下是它们之间的一些关键区别：

4.1 . 历史背景

  • Java 是由Sun Microsystems（现在是Oracle的一部分）于1995年发布的。Java 被设计成一种通用的编程语言，可以在任何支持Java虚拟机(JVM)的平台上运行。
  • JavaScript 最初是由Netscape公司的Brendan Eich在1995年创建的一种脚本语言，最初名为Mocha，后来改为LiveScript，最终定名为JavaScript。尽管名字中有“Java”，但实际上它与Java没有技术上的联系。

4.2 . 用途

  • Java 主要用于构建服务器端应用程序、移动应用程序（尤其是Android应用）、桌面应用程序以及企业级应用。Java 支持面向对象编程(OOP)，并且有着强大的类型系统。
  • JavaScript 则主要用于客户端的网页脚本，可以用来增加网页的交互性。随着Node.js的出现，JavaScript 也被广泛用于服务器端编程。JavaScript 是一种动态类型的、基于原型的语言，支持函数式编程和面向对象编程。

4.3 . 运行环境

  • Java 应用程序通常编译成字节码，然后在Java虚拟机上运行。这意味着Java应用程序可以在任何安装了JVM的操作系统上运行。
  • JavaScript 代码通常在用户的Web浏览器中直接执行，无需预先编译。现代的Web浏览器都内置了JavaScript引擎（如Chrome的V8引擎）来解释和执行JavaScript代码。

4.4 . 语法差异

  • Java 的语法更接近C++，是一种静态类型语言，需要显式声明变量类型。
  • JavaScript 的语法虽然也受到C语言的影响，但它是一种动态类型语言，变量不需要显式声明类型。

4.5 . 开发工具与生态系统

  • Java 拥有成熟的开发工具链，如Eclipse, IntelliJ IDEA等，以及庞大的类库和框架，比如Spring框架。
  • JavaScript 也有自己的开发工具，如Visual Studio Code，并且拥有npm这样的包管理系统，以及React, Angular, Vue.js等前端框架。

总之，尽管Java和JavaScript在名称上有相似之处，但它们是两种独立发展的语言，适用于不同的场景和技术栈。