面板：https://v3.bootcss.com/components/#panels

……

2 JavaScript

2.1 引入方式

与Java等语言类似

2.2.1 书写语法

区分大小写每行结尾的分号可有可无大括号表示代码块

/* 输出语句 */

window.alert("浏览器弹出警告框");// 浏览器弹出警告框

document.write("写入HTML，在浏览器显示");// 写入HTML，在浏览器显示

console.log("写入浏览器控制台");// 写入浏览器控制台

2.2.2 定义变量

var关键字声明变量JS是弱类型语言，变量可以存放不同类型的值变量名规则

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）数字不能开头建议使用驼峰命名

var myVariable = 2333;

myVariable = "akira37!!!";

let关键字声明的变量，只在let所在代码块内有效，且不允许重复声明const关键字声明只读的常量

2.2.3 数据类型

使用typeof运算符获取数据类型

原始类型

number：数字（整数、小数、NaN Not a Number）string：字符串。单双引皆可boolean：布尔（true、false）null：对象为空（typeof null返回Object，因为null表示对象的占位符）undefined：声明的变量未初始化时的默认类型 引用类型

Object（对象）、Array（数组）、Function（函数）、RegExp（正则）、Date（日期）三个基本包装类型：Boolean、Number、String两个内置对象：Global、Math（数学计算）

2.2.4 运算符与流程控制

运算符

算数运算符：+、-、*、/、%、++、--赋值运算符：=、+=、-=、*=、/=、%=比较运算符：>、<、>=、<=、!=、==（会进行类型转换）、===（不进行类型转换）逻辑运算符：&&、||、!三元运算符：条件表达式 ? true_value : false_value 字符串类型转为数字：将字符串字面值转为数字，若字面值不为数字则转为NaN其他类型转为boolean：

Number：0和NaN为false，其他均为trueString：空字符串为false，其他均为trueNull、undefined：均为false 流程控制：if ... else if ... else ...、switch、for、while、do ... while

2.3 函数

函数（方法）是执行特定任务的代码块。形参不需要类型，返回值也不需要定义类型。

函数调用可传递任意个数的参数，会从前往后按函数定义中形参的个数去选择。

/* 定义方法1 */

function functionName(arg1, arg2, ...) {

/* codes */

}

/* 定义方法2 */

var functionName = function(arg1, arg2, ...) {

/* codes */

}

2.4 对象

调用成员：obj.member

调用方法：obj.do()

2.4.1 Array

数组。长度可变，可以存储任意类型的数据。

/* 定义 */

var arr = new Array(1, 2, 3, 4);// 方式1

var arr = [1, 2, 3, 4];// 方式2

/* 访问：arr[index] = value */

arr[10] = "hello";

属性

length：设置或返回数组中元素的数量

/* 遍历数组中所有元素 */

for (let i = 0; i < arr.length; i++) {

console.log(arr[i]);

}

方法

forEach(func)：遍历数组中的每个有值的元素，并调用一次传入的函数

/* 使用forEach遍历数组，不会遍历undefined元素 */

arr.forEach(function(e) {

console.log(e);

})

/* 使用箭头函数简化语法：var functionName = (arg1, arg2, ...) => { ... } */

arr.forEach((e) => {

console.log(e);

})

push(elem1, elem2, ...)：将新元素添加到数组的末尾，并返回新的长度splice(pos, len)：从数组中删除元素

arr.splice(2, 2);// 从下标2开始，删除2个元素

2.4.2 String

字符串。单双引皆可。

/* 定义 */

var str = new String("Akira37");

var str = "Akira37";

属性

length：字符串的长度

方法

charAt(index)：返回在指定下标位置的字符indexOf(substr)：检索字符串，返回起始字符所在的下标位置trim()：去除字符串两边的空格substring(start, end)：提取字符串中两个指定索引start、end之间（左开右闭）的字符

var substr = str.substring(1, 5);// 截取下标1~4的子串

2.4.3 JSON

/* 自定义对象 */

var name = {

property1: "value1",

property2: "value2",

...

functionName: function(arg1, arg2, ...) { ... },

}

var user = {

name: "Tom",

age: 20,

eat() { // 可简化

alert("EAT!");

},

}

user.name

user.eat()

JSON（JavaScript Object Notation, JavaScript对象标记法）是通过Javascript对象标记法书写的文本（本质上是字符串）。形式上类似自定义对象，但要求所有的key需用双引号引起来。

value的数据类型有：数字（整数或浮点数）、字符串（在双引号""中）、逻辑值（true或false）、数组（在方括号[]中）、对象（在花括号{}中）、null（null）

/* 定义JSON字符串 */

var jsonStr = '{"name": "Akira", "age": 2024, "addr": ["北京", "上海", "西安"]}';

JS对象与JSON字符串互相转换：parse()、stringify()

/* JSON字符串转为JS对象 */

var jsObj = JSON.parse(jsonStr);

/* JS对象转为JSON字符串 */

var jsonStr = JSON.stringify(jsObj);

2.4.4 BOM

BOM（Browser Object Model，浏览器对象模型）允许Javascript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

Window：浏览器窗口对象

获取：直接使用（其中window.可以省略）属性

history：对History对象的只读引用location：用于窗口或框架的Location对象navigator：对Navigator对象的只读引用 方法

alert(msg)：显示带有一段消息和一个确认按钮的警告框confirm(msg)：显示带有一段消息以及确认按钮和取消按钮的对话框，根据点击确认或取消按钮返回true或falsesetInterval(func, time)：按照指定的周期（单位：毫秒）来调用函数setTimeout(func, time)：在指定的毫秒数后调用一次函数

/* 弹出警告框 */

window.alert("With window");

alert("Hello BOM!");// 可省略window

/* 弹出确认框，返回选择 */

var flag = confirm("Are you sure?");

/* 定时器 */

var cnt = 0;

setInterval(() => {

cnt++;

alert("定时器执行了" + cnt + "次");

}, 2000);

/* 延时器 */

setTimeout(() => {

alert("调用了该函数");

}, 2000);

Navigator：浏览器对象Screen：屏幕对象History：历史记录对象Location：地址栏对象

获取：window.location（同样window.可以省略）属性

href：设置或返回完整的URL

location.href = "https://blog.csdn.net/Akira37";

2.4.5 DOM

DOM（Document Object Model，文档时象模型）将标记语言的各个组成部分封装为对应的对象

Core DOM：所有文档类型的标准模型

Document：整个文档对象Element：元素对象Attribute：属性对象Text：文本对象Comment：注释对象 XML DOM：XML文档的标准模型HTML DOM：HTML文档的标准模型

Image：<img>Button：<input type='button'>code>其他标签对象……

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。Document对象中提供了以下获取Element元素对象的函数：

根据id属性值获取，返回单个Element对象（因为id不可重复）

var id37 = document.getElementById('id37');

根据标签名称获取，返回Element对象数组

var divs = document.getElementsByTagName('div');

for (let i = 0; i < divs.length; i++) {

var elem = divs[i];

}

根据name属性值获取，返回Element对象数组

var kiras = document.getElementsByName('kira');

for (let i = 0; i < kiras.length; i++) {

var elem = kiras[i];

}

根据class属性值获取，返回Element对象数组

var clss = document.getElementsByClassName('cls');

for (let i = 0; i < clss.length; i++) {

var elem = kiras[i];

}

查询参考手册获取对象的属性、方法，执行后续操作。

例：查询可知，innerHTML 属性设置或返回元素的HTML内容（内部 HTML）

/* 获取 id="iKira" 元素的 HTML 内容 */code>

let html = document.getElementById("iKira").innerHTML;

/* 更改 id="qsort" 元素的 HTML 内容 */code>

document.getElementById("qsort").innerHTML = "So <font color='red'>f-ing</font> good!";// 可识别标签code>

2.5 事件监听