JavaScript入门基础语法学习和使用

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 元素。
• 使用 console.log() 写入到浏览器的控制台。
  使用 console.log() 方法在浏览器中显示 JavaScript 值。
  F12 启用调试模式， 在调试窗口中点击 “Console” 菜单，可看到其输出。

console.log()的用处：
主要是方便你调式 javascript 用的, 你可以看到你在页面中输出的内容。
相比 alert 他的优点是：他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用 alert 弹出来内容，那么页面就死了，但是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：除了空字符串""为 false，其他为 true
null 和 undefined：都是 false
对象：所有对象都是 true

比较方式：

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

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>

3.6 js 函数

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

<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>

4. JS 引用类型

4.1 String 字符串对象 & 使用

<script>
	var str = "hello, javascript";
	console.log(str.toUpperCase()); // HELLO, JAVASCRIPT
</script>

4.2 Array 数组对象 & 使用

    <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"]
    </script>

4.3 Date 日期对象 & 使用

    <script>
        // 获取当前时间
        var date = new Date();
        console.log(date.toLocaleString());
        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>

4.4 RegExp 正则对象 & 使用

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

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

4.6 Functions 全局函数 & 使用

    <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>

详细事件表：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>

转载：https://blog.csdn.net/sinat_36184075/article/details/105998675