01-JS 基本语法

JS学习资料来源：W3school-JavaScript + Runoob-JavaScript

1. JS 概述

JavaScript，简称JS，一门客户端脚本语言。

• 作用：
  可以用来增强用户和 html 页面的交过过程，可以控制 html 元素，让页面有一些动态的效果，增强用户体验。
• 发展：
  1992，Nombase开发，用于表单校验，ScriptEase
  1995，Netscape(网景)开发LiveScript，SUN公司更名JavaScript
  1997，ECMA协会制定标准ECMAScript，统一了所有客户端脚本语言的编码方式

  总结：JavaScript = ECMAScript + BOM + DOM(xml Dom + html Dom)

2. JS 输出

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 获取/写入到 HTML 元素，innerText 获取/写入到标签内的文本。
• 使用 console.log() 写入到浏览器的控制台。
  使用 console.log() 方法在浏览器中显示 JavaScript 值。
  F12 启用调试模式， 在调试窗口中点击 “Console” 菜单，可看到其输出。

console.log()的用处：
主要是方便你调式 javascript 用的, 你可以看到你在页面中输出的内容。
相比 alert 他的优点是：他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用 alert 弹出来内容，那么页面就死了以及会导致alert后面的 js 代码不执行，但是console输出内容后你页面还可以正常操作。

3. JS 基础语法

3.1 js 使用

① 内部 JS：
定义<script>标签，标签内就是js代码
② 外部 JS：
定义<script>通过src属性引入外部的js文件

<script src="${pageContext.request.contextPath}/xxx.js">
    /*外部结合方式后，script 标签内js代码无效*/
</script>

a. <script>可以定义在页面的任何地方，位置会决定执行顺序
b. <script>可以定义多个

3.2 js 注释

• 单行 // 注释内容
• 多行 /* 注释内容 */

3.3 js 类型

• 基本数据类型：
  number：数字，整数/小数/NaN(一个不是数字的数字类型)
  string：字符串，”hello” ‘abc’
  boolean：true 和 false
  null：一个对象为空的占位符
  undefined：未定义，变量没有初始化时的初始值
• 引用数据类型：
  基本对象：Array / Boolean / Date / Number / String / RegExp / Functions(全局函数对象) / Math / Events
  Function对象：var 方法名 = new Function(“形式参数列表”, “方法体”); // 基本不用

3.4 js 变量

Java是强类型语言，JavaScript是弱类型脚本语言。
语法：
var 变量名 = 初始化值;
获取变量类型：

<script>
    console.log(typeof 123); // number
    console.log(typeof "abc"); // string
    console.log(typeof true); // boolean
    console.log(typeof null); // object
    console.log(typeof NaN); // number
    console.log(typeof num); // undefined
    console.log(typeof [1,2,3]);// object
    console.log(typeof {"name":"Jerry", "age":20}); // object
</script>

3.5 js 运算符

一元 ： ++  --
算术 ： +  -  *  /  %
赋值 ： =  +=  -=
比较 ： >  <  >=  <=  ==  ===(类型和值) !==(类型和值)
逻辑 ： &&  ||  !
三元 ： 表达式 ? 值1 : 值2
流程 ： if-else  switch-case  while  do-while  for  try-catch

● 注意事项

特殊判断条件：

number：0 或 NaN 为false，其他为 true
string：null 或 空字符串"" 为false，其他为 true
undefined：为false
对象：所有对象都是 true

● 比较方式

1. 类型相同：直接比较，字符串按照字典顺序比较；
2. 类型不同：先进行类型转换，再比较；
   （=== 全等于，类型和值都比较，先判断类型，类型不同，直接返回false）

<script type="text/javascript">
	function print(s){
		document.write(s + "<br>");
	}
	var num = 1;
	var str = '1';
	var num2 = 1;
	print("num == num2 : " + (num == num2)); //true 判断值
	print("num === num2 : " + (num === num2)); //true 判断值
	print("num !== num2 : " + (num !== num2)); //false 判断类型和值

	print("num == str : " + (num == str)); //true 字符串自动转数字
	print("num != str : " + (num != str)); //false 同上
	print("num === str : " + (num === str)); //false 判断类型和值
	print("num !== str : " + (num !== str)); //true 同上

	print("null == undefined : " + (null == undefined)); // true
	print("null === undefined : " + (null === undefined)); // false
</script>

● switch分支

1. Java中 switch 可接收的数据类型：byte int short char 枚举(jdk1.5) String(jdk1.7);
2. JS中 switch 可接收的数据类型：任意JS中的基本数据类型

<script>
	// 一元运算符
	var num1 = 1;
	var num2 = num1++;
	console.log(num1); // 2
	console.log(num2); // 1
	// 算术运算符：字符串自动转数字
	console.log(10 / "2"); // 5
	// 赋值运算符
	var num3 = 10;
	var num4 = 20;
	num3 += num4;
	console.log(num3);
	// 比较运算符
	console.log(10 != "10"); // false
	console.log(10 == "10"); // true(自动转数字)
	console.log(10 === "10"); // false(类型和值均相同)
	// 逻辑运算符
	console.log(!true); // false
	console.log(!0); // true
	console.log(!NaN); // true
	console.log(!""); // true
	console.log(!null); // true
	console.log(!undefined); // true
	// 三元运算符
	console.log(10 < 20 ? "结果正确" : "结果不正确");
	// switch
	switch (true) {
	  case true:
	    console.log("是true");
	    break;
	  case false:
	    console.log("是false");
	    break;
	}
	// for
	for (var i = 0; i < 10; i++) {
	  console.log("i="+i);
	}
</script>

JS中 switch 后可以跟其他类型，如 字符串。

3.6 js 函数

函数三种写法 + JavaScript 闭包 + 回调 + 系统函数：

• parseInt(str) 字符串转 number 类型整数
• parseFloat(str) 字符串转 number 类型小数
• isNaN(str) 判断是否”不是一个数字”

<script>
    // 函数定义方式 1 - 普通函数
    function 方法名(形参列表) {
        方法体;
    }

    // 函数定义方式 2 - 匿名函数
    var 方法名 = function(形参列表){
        方法体;
    }

    // 函数定义方式 3 - Function 不常用
    var 方法体 = new Function("形参列表","方法体");

    /* JavaScript 闭包：能够访问父作用域中的变量，提高了局部变量的生命周期。*/
    var add = (function () { //自执行的匿名函数
        var count = 0; // 局部变量
        return function () { // 内部函数, 把方法返回，赋值给了变量result
            return count += 1; // 访问外部自执行函数的局部变量
        }
    })();
    console.log(result()); // 1
    console.log(result()); // 2
    console.log(result()); // 3

    // JavaScript 函数回调
    function operation(a, b, callback) {
        console.log("计算两个值: " + a + ", " + b);
        callback(a, b);
    }
    function add(x, y) {
        console.log("求和：" + (x + y));
    }
    function mul(x, y) {
        console.log("求积：" + (x * y));
    }
    operation(10, 20, add); //30 函数名是个对象引用，传参回调执行
    operation(10, 20, mul); //200 函数名是个对象引用，传参回调执行

    /* 系统函数 */
    // 提示框 alert(); 仅提醒无返回值
    alert("hello, 这是个弹窗");
    // 确定/取消 confirm(); 有boolean返回值的选择提示框
    var result = confirm("确定删除吗？");
    console.log(result); // 确定 true；取消 false
    // 输入提示框 prpmpt()
    var input = prompt("请输入您的内容：");
    console.log(input); // input为弹窗中输入的内容
    // 转换类型系统函数 parseInt(str); parseFloat(); isNaN();
    console.log( parseInt(input) );
    console.log( parseFloat(input) );
    console.log( isNaN(input) ); // true，判断一个内容是不是"不是一个数字"
</script>

在方法中，有一个内置对象 arguments，包含所有的实际参数。

示例：

<script>
    // 方式 1 示例
    function method01(msg1, msg2, msg3) {
        // console.log(msg1 + " , " + msg2 + " , " + msg3);
        //arguments:属于方法的内置对象,包含是实际参数
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        return "hello js function1";
    }

    // 方式 2 示例
    var method02 = function (msg1, msg2, msg3) {
        // console.log(msg1 + " , " + msg2 + " , " + msg3);
        //arguments:属于方法的内置对象,包含是实际参数
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
        return "hello js function2";
    }
</script>

JS 特殊处理不跳转的 a 标签：

<a href="#">跳转</a>
// 死链接，点击跳转时页面和链接不会发生变化
<a href="javascript:void(0)">跳转</a>
// 死链接，void中内容会执行但不会有任何返回
<a href="javascript:void(alert('Warning'))">跳转</a>

3.7 js 字符串转数字

<script type="text/javascript">
	/*
		字符串转数字:
		parseInt()  可以把一个字符串转换成整数。
		parseFloat() 可以把一个字符串转换成小数。
	*/
    var a = "20";
	document.write("结果：" + a + "<br/>"); //20

	var a = "123abc123";
	var b = parseInt(a);
	document.write("结果：" + b + "<br/>"); // 123
	/* parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字 */

	var c = "3.14";
	c = parseFloat(c);
	document.write("结果：" + c + "<br/>"); // 3.14
	/*
		javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。
		is not a  number  不是一个数字。
		不是一个数字返回true，是一个数字返回false.
	*/
	document.write(isNaN(123) + "<br/>"); // false
	document.write(isNaN("abc123")); // true
</script>

4. JS 引用类型 - 对象

4.1 String 字符串对象

方法	描述
anchor()	创建 HTML 锚。
big()	用大号字体显示字符串。
blink()	显示闪动字符串。
bold()	使用粗体显示字符串。
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接字符串。
fixed()	以打字机文本显示字符串。
fontcolor()	使用指定的颜色来显示字符串。
fontsize()	使用指定的尺寸来显示字符串。
fromCharCode()	从字符编码创建一个字符串。
indexOf()	检索字符串。
italics()	使用斜体显示字符串。
lastIndexOf()	从后向前搜索字符串。
link()	将字符串显示为链接。
localeCompare()	用本地特定的顺序来比较两个字符串。
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
small()	使用小字号来显示字符串。
split()	把字符串分割为字符串数组。
strike()	使用删除线来显示字符串。
sub()	把字符串显示为下标。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
sup()	把字符串显示为上标。
toLocaleLowerCase()	把字符串转换为小写。
toLocaleUpperCase()	把字符串转换为大写。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toSource()	代表对象的源代码。
toString()	返回字符串。
valueOf()	返回 String 对象内第一次出现子字符串的字符位置

<script type="text/javascript">
	/*
		var str1 = new String("hello");
		var str2 = new String("hello");
		document.write("两个字符串的对象一样吗？"+(str1.toString()==str2.toString()));

	创建一个字符串的方式：
	方式1：
		new String("字符串的内容");
	方式2：
		var str = "字符串的内容";
	字符串常用的方法：
		anchor（）     产生1个锚点 
		charAt()       返回指定索引位置处的字符。
		fontcolor()    把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端
		indexOf()      返回 String 对象内第一次出现子字符串的字符位置
		italics()      把 HTML <I> 标记放置在 String 对象中的文本两端。 
		link()         把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
		replace()      返回根据正则表达式进行文字替换后的字符串的复制
		split()        切割   
		substr(a,b)    截取子串，第一个参数表示下标，第二个参数表示长度
		toUpperCase()  转大写
		toLowerCase    转小写
	*/
	document.write("第五章".anchor("five") + "<br/>"); //给该字符串添加一个a标签，并且添加name属性，属性值为five
	document.write("abc".charAt(1) + "<br/>");
	//chatCodeAt返回的是索引值对应的字符的码值。 
	document.write("第六章".fontcolor("red") + "<br/>"); // font标签并红色
	document.write("abchellohehehello".indexOf("hello") + "<br/>");
	document.write("第五章".italics() + "<br/>"); //斜体
	document.write("百度".link("http://www.baidu.com") + "<br/>"); // 给文本添加一个a标签，
	document.write("明天讲html".replace("html", "DOM编程") + "<br/>"); // 默认只替换第一个
	//第一个参数表示下标，第二个参数表示长度
	document.write("abcdefg".substr(1, 3));
	//第一个参数表示开始下标，第二个参数表示结束下标（包前不包后）
	document.write("abcdefg".substring(1, 3));

	var str = "我们-大家-好";
	var arr = str.split("-");
	for (var index = 0; index < arr.length; index++) {
		document.write(arr[index] + ",");
	}
	document.write("<br/>");
	document.write("abc".toUpperCase() + "<br/>"); //转大写
	document.write("ABC".toLowerCase() + "<br/>"); //转小写
</script>

// JS 字符串替换所有的写法：
document.write("helloworld".replace(/o/g, "O"));// hellOwOrldaB
document.write("helloABChello".replace(/hello/g, "o"));// oABCo

4.2 Array 数组对象

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

<script>
    // 创建数组对象
    var arr = new Array("a", "b", "c");
    console.log(arr); // (3)["a", "b", "c"]
    arr = [1, 2, 3, 4, 5];
    console.log(arr); // (5)[1, 2, 3, 4, 5]

    // .length 获取数组长度
    console.log(arr.length); // 5

    // .join() 连接为字符串
    var str = arr.join("");
    console.log(str); // 12345

    // .pop() 取出并删除最后1个元素
    var lastElem = arr.pop();
    console.log(lastElem); // 5
    console.log(arr); // [1, 2, 3, 4]

    // .push() 往数组存入新的元素
    var length = arr.push("aa", "bb");
    console.log(length); // 6
    console.log(arr); // (6) [1, 2, 3, 4, "aa", "bb"]

    function print(s) {
        document.write(s + "<br>");
    }
    // 数组（长度可变）
    var arr = new Array(1, 3, 5, 7, 9);
    print(arr); // 1,3,5,7,9
    arr[20] = 20;
    print(arr); // 1,3,5,7,9,,,,,,,,,,,,,,,,20 中间不是0
    print(arr.length); // 21
    // 数组方法
    var arrs = [10, 30, 50, 70, 90];
    print(arrs.pop() + " arrs:" + arrs); //pop:移除数组中的最后一个元素并返回该元素
    print(arrs.push(110) + " arrs:" + arrs); // push:将新元素添加到数组，返回数组新长度
    print(arrs.reverse() + " arrs:" + arrs); // reverse:翻转数组，返回新数组，原数组也被修改
    print(arrs.shift() + " arrs:" + arrs); // shift:移除数组中第1个元素并返回
</script>

4.3 Date 日期对象

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	请使用 toUTCString() 方法代替。
toUTCString()	根据世界时，把 Date 对象转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

<script>
    // 获取当前时间
    var date = new Date();
    console.log(date.toLocaleString()); // 2020/6/3 上午9:29:25
    console.log(new Date().toLocaleDateString()); // 2020/6/3
    var year = date.getFullYear();
    var month = date.getMonth()+1; // 0~11
    var day = date.getDate(); // getDate() 1~31
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();

    // 时间格式处理
    var timeStr = year+"/"+month+"/"+day+" "+hour+":"+minute+':'+second;
    console.log(timeStr);
    timeStr = [year, month, day].join("/")+" "+[hour,minute,second].join(":");
    console.log(timeStr);

    // 获取到当前时间毫秒值 1970/01/01 00:00:00 (中国 GMT+0800)
    console.log(date.getTime());
</script>

// xxxx-xx-xx xx:xx:xx 格式动态显示时间
<span id="showTime" style="font-weight: bold;"></span>

<script type="text/javascript">
    // 补 0
    function zero(s) {
    	return s < 10 ? '0' + s : s;
	}
	// 获取并显示时间
    function getTime() {
        var date = new Date();
        var span = document.getElementById("showTime");
        var fullTime = date.getFullYear() +"-"+ (date.getMonth()+1) +"-"+ date.getDate() + " "
        + date.getHours() +":"+ zero(date.getMinutes()) +":"+ zero(date.getSeconds());
        span.innerText = fullTime;
    }
    getTime();
    window.setInterval("getTime()", 1000);
</script>

4.4 RegExp 正则对象

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false。	1	4

<script>
    /*  /^正则表达式$/  */
    var reg1 = /^[a]{3}$/; // 用 / 标记开始或结束
    // 正则匹配
    console.log(reg1.test("1aaa")); // true
</script>

JS中正则表达式格式：/^正则表达式$/

4.5 Math 对象

• Math.ceil(num) 向上取整
• Math.floor(num) 向下取整
• Math.round(num) 四舍五入
• Math.random() 随机0~1之间的小数

<script type="text/javascript">
    function print(s) {
        document.write(s + "<br>");
    }
    // Math 对象
    print(Math.ceil(3.14)); // 向上取整 4
    print(Math.floor(3.14)); // 向下取整 3
    print(Math.round(3.14)); // 四舍五入 3
    print(Math.random()); // 0~1 之间双精度数字
</script>

4.6 自定义对象

<script type="text/javascript">
	function print(s) {
		document.write(s + "<br>");
	}

	/* 自定义对象 */
	// 方式1
	function p1() {}
	var p1 = new p1();
	p1.id = 20;
	p1.name = "小姜";
	print(p1 + " " + p1.id + " " + p1.name); // [object Object] 20 小姜

	// 方式2
	function p2(id, name) {
		this.id = id;
		this.name = name;
		this.sayHello = function() {
			print(id + " " + name + ":hello！" ); // 20 小姜:hello！
		}
	}
	var p2 = new p2(20, "小姜");
	p2.sayHello();

	// 方式3
	var p3 = new Object();
	p3.id = 20;
	p3.name = "小姜";
	p3.sayHello = function() {
		print(p3.id + " " + p3.name + ":hey!!!"); // 20 小姜:hey!!!
	}
	p3.sayHello();

	// 方式4
	var p4 = {
		id : 20,
		name : "小姜",
		sayHi : function() {
			// 必须使用 this 才能调用
			print(this.id + " " + this.name + ": hi~~"); // 20 小姜: hi~~
		}
	}
	p4.sayHi();
</script>

4.7 Functions 全局函数

函数	描述
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()	对字符串进行编码。
eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。
getClass()	返回一个 JavaObject 的 JavaClass。
isFinite()	检查某个值是否为有穷大的数。
isNaN()	检查某个值是否是数字。
Number()	把对象的值转换为数字。
parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。
String()	把对象的值转换为字符串。
unescape()	对由 escape() 编码的字符串进行解码。

<script>
    // parseInt()
    var num1 = 10;
    var num2 = "20";
    console.log(num1 + parseInt(num2)); // + 号默认拼接
    // isNaN() 判断一个变量是否是 NaN
    var num3 = NaN;
    console.log(num3 == NaN); // false
    console.log(num3 === NaN); // false
    console.log(isNaN(num3)); // true
    // eval() 更多的用于 json 字符串返回 js 对象
    var jsonStr = '{"username":"root", "password":"1234"}';
    var obj = eval("(" + jsonStr + ")"); // 固定语法，将json字符串转换成js对象
    console.log(obj.username + "," + obj.password);
</script>

5. JS 事件

JavaScript 允许在事件被侦测到时执行代码。
事件源：html标签
监听器：js方法
绑定/注册：标签中的属性赋值
事件：具体的操作

<%--事件源 + 绑定方式①--%>
// 监听器
function fn1() {
    console.log("按钮1点击了...");
}
...
<button onclick="fn1()">事件按钮1</button>


<%--事件源 + 绑定方式②--%>
// 获取 id 为 btn 的标签对象
var ele = document.getElementById("btn");
// fn2 使用方式 ① -- 最佳
ele.onclick = function () {
    console.log("按钮2点击了...");
}
...
<button id="btn">事件按钮2</button>

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

详细事件表：https://www.w3school.com.cn/jsref/dom_obj_event.asp

JS 事件示例：

<script>
    function fn1() { console.log(event.keyCode + " 键盘按下 "); }
    function fn2() { console.log(event.keyCode + " 键盘松开 "); }
</script>
<input type="text" onkeydown="fn1()" onkeyup="fn2()">

<script>
    function fn1() {
        console.log("表单提交了..."); 
        if (条件) {
            return true; // 不拦截表单
        } else {
            return false; // 拦截表单提交
        }
    }
</script>
<%-- return fn1() --%>
<form action="index.jsp" onsubmit="return fn1()">
    消息：<input type="text" name="message"> <br>
    <button type="submit">发送</button>
</form>