【JavaEE】JavaScript

一、初识 JavaScript

1、JavaScript 是什么

JavaScript (简称 JS)

• 是世界上最流行的编程语言之一
• 是一个脚本语言, 通过解释器运行
• 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.

JavaScript 的能做的事情:
网页开发(更复杂的特效和用户交互)
网页游戏开发
服务器开发(node.js)
桌面程序开发(Electron, VSCode 就是这么来的)
手机 app 开发

2、前置知识

2.1 JavaScript 的书写形式

（1）行内式
直接嵌入到 html 元素内部

<div onclick="alert('hahaha')">点我试试</div>

注意，JS 中字符串常量可以使用单引号表示，也可以 使用双引号表示
HTML 中推荐使用双引号，JS 中推荐使用单引号

（2）内嵌式
写到 script 标签里

<script>
    alert("hello world");
</script>

（3）外部式
写到单独的 .js 文件里

• app.js 文件

alert("这是一个外部 JS 文件");

• html 文件

<script src="app.js"></script>

注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行)

2.2 注释

单行注释：//
多行注释：/* */

使用 ctrl + / 切换注释，多行注释不能嵌套

2.3 输入输出

（1）输入：prompt ，弹出一个输入框

// 弹出一个输入框
prompt("请输入您的姓名:");

（2）输出：alert ，弹出一个警示对话框, 输出结果

// 弹出一个输出框
alert("hello");

（3）输出：console.log ，在控制台打印一个日志(供程序员看)

// 向控制台输出日志
console.log("这是一条日志");

在 VSCode 中直接输入 log[tab] ，就能直接打出 console.log
在浏览器中打开开发者工具(F12) -> Console 标签页，才能看到结果

注：

• 日志是程序员调试程序的重要手段
• console 是一个 js 中的 “对象”
  . 表示取对象中的某个属性或者方法. 可以直观理解成 “的”
  console.log 就可以理解成: 使用 “控制台” 对象 “的” log 方法.

二、语法

1、变量的使用

1.1 基本用法

创建变量(变量定义/变量声明/变量初始化)

var name = 'zhangsan';
var age = 20;

• var 是 JS 中的关键字，表示这是一个变量
• = 在 JS 中表示 “赋值”，相当于把数据放到内存的盒子中
• JavaScript 中还支持使用 let 定义变量，用法和 var 基本类似
• 初始化的值如果是字符串，那么就要使用单引号或者双引号引起来
• 初始化的值如果是数字，那么直接赋值即可

使用变量

console.log(age); // 读取变量内容
age = 30;         // 修改变量内容

1.2 动态类型

（1）JS 的变量类型运行过程中才确定的（运行到 = 语句才会确定）

var a = 10; // 数字
var name = 'frost-cold'; // 字符串

（2）随着程序运行，变量类型可能会发生改变

var a = 10; // 数字
a = 'frost-cold'; // 字符串

C、Java、Go、C++ 等语言是静态语言，类型在创建时就已经确定了，在运行时不能更改，如果更改会报编译错误。

2、基本数据类型

• number：数字，不区分整数和小数
• boolean：true 真，false 假
• string：字符串类型
• undefined：只有唯一的值undefined，表示未定义的值
• null：只有唯一的值null，表示空值

2.1 number 数字类型

JS 中不区分整数和浮点数，统一使用数字类型来表示

（1）数字进制表示

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

（2）特殊的数字值

• Infinify：无穷大，大于任何数字，表示数字已经超过了 JS 能表示的范围
• -Infinify：负无穷大，小于任何数字，表示数字已经超过了 JS 能表示的范围
• NaN：表示当前的结果不是一个数字

var max = Number.MAX_VALUE;
console.log(max*2); // Infinify
console.log(-max*2); // -Infinify
console.log('frost-cold' - 99); // NaN
console.log('frost-cold' + 99); // 字符串拼接 => frost-cold99

注意：‘frost-cold’ + 99 结果不是 NaN，数字会隐式转换成字符串，再进行字符串拼接，得到 frost-cold99

2.2 string 字符串类型

（1）基本规则
字符串字面值需要使用引号引起来，单引号双引号均可

var a = "haha";
var b = 'hehe';
var c = hehe;    // 运行出错

如果字符串中本来已经包含引号怎么办?

var msg = "My name is "zhangsan"";    // 出错
var msg = "My name is \"zhangsan\"";  // 正确, 使用转义字符. \" 来表示字符串内部的引号. 
var msg = "My name is 'zhangsan'";    // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"';    // 正确, 搭配使用单双引号

（2）转义字符
有些字符不方便直接输入, 于是要通过一些特殊方式来表示

• \n
• \\
• \'
• \"
• \t

（3）求长度
使用 String 的 length 属性即可，单位为字符的数量

var a = 'hehe';
console.log(a.length); // 4
var b = '哈哈';
console.log(b.length); // 2

（4）字符串拼接
使用 + 进行拼接，注意：数字和字符串也可以进行拼接

var a = "my name is ";
var b = "zhangsan";
var c = 10;
var d = 20;
console.log(a + b); // my name is zhangsan
console.log(b + c); // zhangsan10
console.log(c + d); // 30

2.3 boolean 布尔类型

表示 “真” 和 “假”，Boolean 参与运算时当做 1 和 0 来看待

console.log(true + 1);  // 2
console.log(false + 1); // 1

2.4 undefined 未定义数据类型

如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

var a;
console.log(a);

undefined 和字符串进行相加, 结果进行字符串拼接

console.log(a + "10");  // undefined10

undefined 和数字进行相加, 结果为 NaN

console.log(a + 10);

2.5 null 空值类型

null 表示当前的变量是一个 “空值”

var b = null;
console.log(b + 10);    // 10
console.log(b + "10");  // null10

3、运算符

4、条件语句

5、循环语句

6、数组

7、函数

8、对象