JavaScript使用

一 JS简介

1.1 JS起源

JavaScript 是一种由Netscape公司与Sun Microsystems公司共同开发出来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为解决服务器端语言，通常的瓶颈问题。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。ECMA 262是正式的JavaScript标准。这个标准在1997年6月被ECMA-262委员会通过。在1999年7月，ECMA 262委员会采纳了它的首个版本。这个标准由ECMA组织发展和维护，JavaScript作为ECMAScript的实现。JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种轻量级的脚本语言，它的解释器通常被内嵌在浏览器中，可以实现网页动态交互的效果，数据动态变化和动画效果等。JS有如下特点：

• 脚本语言：JavaScript是一种解释型的脚本语言，不同于C、C++、Java等语言先编译后执行，JavaScript在运行时产生解释出来的字节码文件，而是在程序的运行过程中对源文件进行解释；
• 基于对象：JavaScript是一种基于对象的脚本语言，不仅可以创建对象，也能使用现有的对象，但是面向对象的三大特性：封装、继承、多态中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一个面向对象的编程语言；
• 解释执行：JavaScript中的代码由解释器解释执行，但是所有的变量后可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型；
• 事件驱动：JavaScript是一种采用事件驱动的脚本语言，它不需要通过Web服务器就可以对用户的输入做出响应；
• 跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持，因此一个JavaScript脚本在编写后可以立刻在任何机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，目前几乎所有的浏览器都支持；

1.2 JS组成部分

JavaScript = ECMAScript + BOM + DOM

• ECMAScript：是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序语言，ECMAScript描述了语法、类型、语句、关键字、保留字、运算符对象。它规定定义了脚本语言的所有属性、方法和对象；
• ECMA 262第1版实际上与网景的JavaScript 1.1相同；
• ECMA 262第2版只是做了一些编辑工作，并没有增加或改变任何特性；
• ECMA 262第3版第一次真正对ECMAScript进行革新；
• ECMA 262第5版是对这门语言的一次彻底修订；
• ECMA 262第5.1版是ECMA-262第3版的小幅改进，于2009年12月3日正式发布；
• ECMA 262第6版ES6，于2015年6月发布。这一版包含了大量语法和功能方面的新增特性，但是并不是所有的浏览器都完全支持；
• ECMA 262第7版也称为ES2016，于2016年6月发布；
• ECMA 262第8版也称为ES2017，于2017年6月发布；
• ECMA 262第9版也称为ES2018，于2018年6月发布；
• ECMA 262第10版也称为ES2019，于2019年6月发布；
• ECMA 262第11版，也称为ES2020，发布于2020年6月；

1.3 JS的引入方式

1. 内嵌脚本方式引入：
   在页面中，通过一对script标签引入JS代码，script中的代码具有一定的顺序性，一般在head标签中；

三 JS的流程控制和函数

3.1 JS分支结构

条件结构：

• 这里的结构几乎和JAVA中的一样，需要注意的是：
  • if()中的非空字符串会被认为是true；
  • if()中的非零数字会被认为是true；

if( false ){ // 非空字符串 if判断为true
    console.log(true);
}else{
    console.log(false);
}

if( 0 ){ // 非零数字 if判断为true
    console.log(true);
}else{
    console.log(false);
}

if( 1 ){ // 非零数字 if判断为true
    console.log(true);
}else{
    console.log(false);
}

switch结构：

var monthStr=prompt("请输入月份：","例如：10 ");
var month= Number.parseInt(monthStr);
switch(month){
    case 3:
    case 4:
    case 5:
        console.log("春季");
        break;
    case 6:
    case 7:
    case 8:
        console.log("夏季");
        break;
    case 9:
    case 10:
    case 11:
        console.log("秋季");
        break;
    case 12:
    case 1:
    case 2:
        console.log("冬季");
        break;
    default :
        console.log("月份有误")
}

3.2 JS循环结构

while结构：

/* 打印99 乘法表 */
var i = 1;
while( i <= 9 ){
    var j = 1;
    while( j <= i ){
        document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br>");
    i++;
}

for循环：

for(var i=1; i<=9; i++){
    for(var j=1; j<=i; j++){
        document.write(j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;");
    }
    document.write("<br>");
}

3.3 JS函数声明

函数说明

• 函数没有权限控制；

• 不用声明函数的返回值类型，需要返回在函数中直接return即可，也无需void关键字；

• 参数列表中，无需数据类型；

• 调用函数时，实参和形参的个数可以不一致；

• 声明函数时需要用function关键字；

• JS的没有异常处理；

• 代码：

/* 语法1：function 函数名（参数列表）{函数体} */
function sum(a, b){
    return a+b;
}

var result = sum(10, 20);
console.log(result);

/* 语法2：var 函数名 = function（参数列表）{函数体} */
var sum = function(a, b){
    return a+b;
}

var person = {
    name: "张小明",
    age: 28,
    girlFriend: {name: "铁锤",
        age: 23,
        foods: ["苹果", "橘子", "葡萄", "桃子", "香蕉"],
        pets: [{"petName": "大黄",
            petType: "dog"},
            {petName: "小花",
            petType: "cat"}]
    }
};

/* 输出各个属性值 */
console.log(person.name);
console.log(person.age);
console.log(person.girlFriend.name);
console.log(person.foods[1]);
console.log(person.foods[1].petName);
console.log(person.pet[1].petType);

/* 修改各个属性值 */
var personStr = JSON.stringify(person);
console.log(personStr);
var personStr = JSON.parse(personStr);
console.log(personStr);

四 JS的对象和JSON

4.1 JS声明对象的语法

• 语法1，通过new Object()直接创建对象：

var person =new Object();
// 给对象添加属性并赋值
person.name="张小明";
person.age=10;
person.foods=["苹果", "橘子", "香蕉"];
// 给对象添加函数
person.eat = function (){
    console.log(this.age + "岁" + this.name + "喜欢吃：");
    for(var i = 0;i<this.foods.length;i++){
        console.log(this.foods[i]);
    }
}
// 访问对象属性
console.log(person.name);
console.log(person.age);
// 调用对象方法
person.eat();

• 语法2，通过{}形式创建对象：

var person ={
    name:"张小明",
    age:10,
    foods:["苹果", "橘子", "葡萄"],
    eat:function (){
        console.log(this.age + "岁" + this.name + "喜欢吃：");
        for(var i = 0;i<this.foods.length;i++){
            console.log(this.foods[i]);
        }
    }
}
// 访问对象属性
console.log(person.name);
console.log(person.age);
// 调用对象方法
person.eat();

4.2 JSON格式

JSON（JavaScript Object Notation, JS对象简写格式）是一种轻量级的数据交换格式。它基于ECMAScript（European Computer Manufacturers Association，欧洲计算机协会）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成，并且有效地提升网络传输效率。简单来说，JSON 就是一种字符串格式，这种格式无论在前端还是后端，都可以很容易地解析与之对应的数据，所以常用于前后端数据传递。

• JSON的语法：var str=“{“属性名”:“属性值”,“属性名”:“属性值”,“属性名”:“属性值”}”;
• JSON常见API见：https://www.runoob.com/json/json-intro.html

4.3 JS常见对象

4.3.1 数组

• 创建数组的四种方式：
  • new Array();
  • new Array(5);
  • new Array(1,2,3,…,n,elem);
  • [ele1,ele2,ele3,…,elem];
• 创建数组指定元素值
• 相当于第三种语法的简写

数组的常见API见：https://www.runoob.com/jsref/jsref-obj-array.html

4.3.2 Boolean对象

boolean常见API见：https://www.runoob.com/jsref/jsref-obj-boolean.html

4.3.3 Date对象

Date常见API见：https://www.runoob.com/jsref/jsref-obj-date.html

4.3.4 Math

Math常见API见：https://www.runoob.com/jsref/jsref-obj-math.html

4.3.5 Number

Number常见API见：https://www.runoob.com/jsref/jsref-obj-number.html

4.3.6 String

String常见API见：https://www.runoob.com/jsref/jsref-obj-string.html

五 事件的触发

5.1 什么是事件

HTML 事件可以是浏览器行为，也可以是用户行为，当这些行为发生时，可以启动触发对应的JS函数的运行。JS的事件最常用的是行为触发代码运行和事件绑定。

5.2 常见事件

• 鼠标事件：https://www.runoob.com/jsref/dom-obj-event.html
• 键盘事件：https://www.runoob.com/jsref/dom-obj-event.html
• 表单事件：https://www.runoob.com/jsref/dom-obj-event.html

5.3 事件的绑定

通过属性绑定：

<head>
    <meta charset="UTF-8">
    <title>小标题</title>
    <script>
        function testDown1(){console.log("down1");}
        function testDown2(){console.log("down2");}
        function testBlur(){console.log("失去焦点");}
        function testFocus(){console.log("内容改变");}
        function testChange(input){console.log("内容改变");}
        function testMouseOver(){console.log("鼠标悬停");}
        function testMouseLeave(){console.log("鼠标离开");}
        function testMouseMove(){console.log("鼠标移动");}
    </script>
</head>
<body>
    <input type="text" onkeydown="testDown1()" onkeydown2="testDown2()" onfocus="testFocus()" onblur="testBlur()" onchange="testChange(this)" onmouseover="testMouseOver()" onmouseout="testMouseLeave()" onmousemove="testMouseMove()"/>
</body>

通过DOM编程触发：

<head>
    <meta charset="UTF-8">
    <title>小标题</title>
    <script>
        // 页面加载完毕后，页面元素被加载完毕
        window.onload=function(){
            var in1 = document.getElementById("in1");
            // 通过DOM编程绑定事件
            in1.onchange=testChange;
        }
        function testChange(){
            console.log('内容改变');
            console.log(event.target.value);
        }
    </script>
</head>
<body>
    <input type="text" id="in1" />
</body>

六 BOM编程

6.1 什么是BOM

• BOM是Browser Object Model的缩写，即浏览器对象模型；
• BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法；
• BOM没有统一的标准，每种浏览器都可以自定义标准；
• BOM编程是将浏览器窗口的各个组成部分抽象成各个对象，通过各个对象的API操作事件行为的一种编程；
• BOM编程的对象结构如下：
  • window对象对象，代表整个浏览器窗口；

6.2 window对象的常见属性（了解）

• window对象常见方法见：https://www.runoob.com/jsref/obj-window.html

6.3 window对象的常见方法（了解）

• window对象常见方法见：https://www.runoob.com/jsref/obj-window.html

6.4 通过BOM编程控制浏览器行为演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小标题</title>
    <script>
        function testAlert(){
            // 弹出警告框
            window.alert("提示信息");
        }
        function testConfirm(){
            // 弹出确认框
            var res = prompt("请输入账号", "例如：张三");
            alert("您输入的账号：" + res);
        }
    </script>
</head>
<body>
    <input type="button" value="提示框" onclick="testAlert()"/>
    <input type="button" value="确认框" onclick="testConfirm()"/>
</body>
</html>

6.5 通过BOM编程实现会话级和持久级数据存储

• 会话级数据：内存型数据，是浏览器在内存中临时存储的数据，浏览器关闭后数据丢失，通过window的sessionStorage实现；
• 持久级数据：磁盘型数据，是浏览器在磁盘上持久存储的数据，浏览器关闭后数据仍然存在，通过window的localStorage实现；
• 在JS开发者工具的应用程序中，可以查看数据的状态；

七 DOM编程

7.1 什么是DOM编程

简单来说：DOM（Document Object Model）编程就是使用document对象的API，完成对网页HTML文档进行动态修改，以实现网页效果和样式动态变化效果的过程。

• document对象代表整个HTML文档，可用来访问页面中的所有元素，是最复杂的一个DOM对象，可以说是学习DOM编程的关键所在；
• 根据HTML代码结构特点，document对象本身是一种树形结构的文档对象；

上面的代码生成的树如下：

Element-html
├── Element-head
└── Element-body
    ├── Element-div
    ├── Element-div
    └── Element-div

• DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制和操作；

7.2 获取页面元素的八种方式

7.2.1 在整个文档范围内查找元素节点

7.2.2 在具体元素节点范围内查找子节点

7.2.3 查找指定元素节点的父节点

7.2.4 查找指定元素节点的兄弟节点

7.3 操作元素属性值

7.4 增删元素

7.4.1 对页面的元素进行增删操作

7.4.2 通过指定元素节点的兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获取document对象
        window.document
        // 从document对象中获取具体的元素
        var ell =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
        var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同
        var cls =document.getElementsByName("name") // 根据元素的name属性值获取多个元素
        var cls =document.getElementsByClassName("class") // 根据元素的class属性值获取多个元素

        // 遍历子节点
        var csid=ell.children // 通过父元素获取全部的子元素
        var firstChild=ell.firstElementChild // 通过父元素获取第一个子元素
        var lastChild=ell.lastElementChild // 通过父元素获取最后一个子元素
        var parent =ell.parentElement // 通过子元素获取父元素
        var pElem= pElem.nextElementSibling // 获取后面的第一个元素
        var nElem= nElem.previousElementSibling // 获取前面的第一个元素

        // 对元素进行操作
        1）操作元素的属性
        元素的属性，样式等... 样式等... 要进行设置特殊
        元素名.innerHTML // 只读文本
        元素名.innerText // 只读文本，读取时以换行html代码

        2）增删元素
        var element =document.createElement("元素名") // 创建元素
        父元素.appendChild(子元素) // 给父元素中追加子元素
        父元素.insertBefore(子元素，参照元素) // 给父元素中插入子元素
        父元素.removeChild(子元素) // 用新元素替换某个子元素
        元素.remove() // 删除当前元素

        /*
        function addCs(){
            // 创建一个新元素
            var cs1=document.createElement("li") // <li></li>
            cs1.id="cs"+cs.length;
            cs1.innerHTML="长沙";
            cs1.innerText="长沙";
            cs1.className="cs";
            var csliyul=document.getElementById("city")
            csliyul.appendChild(cs1); // 直接给ul中添加子元素
        }
        function removeItem(){
            // 删除元素
            sessionStorage.removeItem("sessionMsg")
            localStorage.removeItem("localMsg")
        }
        function readItem(){
            console.log("read")
            console.log(sessionStorage.getItem("sessionMsg"))
            console.log(localStorage.getItem("localMsg"))
        }
        function writeItem(){
            // 让浏览器存储一些会话级数据
            window.sessionStorage.setItem("sessionMsg","sessionValue")
            // 让浏览器存储一些持久级数据
            window.localStorage.setItem("localMsg","localValue")
            console.log("hello")
        }
        */
    </script>
</head>
<body>
    <!-- 按钮1：添加城市列表 -->
    <button onclick="addCs()">添加城市</button>
    <!-- 按钮2：删除城市列表 -->
    <button onclick="removeItem()">删除城市</button>
    <!-- 按钮3：读取城市列表 -->
    <button onclick="readItem()">读取城市</button>
    <!-- 按钮4：写入城市列表 -->
    <button onclick="writeItem()">写入城市列表</button>
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="gz">广州</li>
    </ul>
</body>
</html>

八 正则表达式

8.1 正则表达式简介

正则表达式是描述字符串模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

• 语法：

  var pattern = RegExp(pattern,modifiers);
  var pat = /pattern/modifiers;
  

• 修饰符：
  • i 执行对大小写不敏感的匹配。
  • s 执行对所有匹配而非在找到第一个匹配后停止。
  • m 执行多行匹配。

8.2 正则表达式体验

8.2.1 验证

注意：这里是使用正则表达式对象来调用方法。

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 如果一个字符串对象包含与正则表达式匹配的文本，则返回true，否则返回false
console.log( reg.test(str0) ); // 返回true
console.log( reg.test(str1) ); // false
console.log( reg.test(str2) ); // true

8.2.2 匹配

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 返回一个字符串中匹配正则表达式的子串，匹配结果将被组成的数组
var resultArr = targetStr.match(reg);
// 结果数组
console.log( resultArr ); // 返回结果数组
console.log( resultArr[0] ); // 返回resultArr.length;

8.2.3 替换

注意：这里是使用字符串对象来调用方法。

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 替换字符串中匹配正则表达式的子串
var newStr = str.replace(reg, '@');
// 替换后的新字符串
console.log( str.replace(reg,'@') ); // Hello World!

8.2.4 全文查找

如果使用正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配。使用后，返回所有匹配。

8.2.5 忽略大小写

// 忽略字符串
var targetStr = "Hello World!";
// 创建一个最简单的正则表达式对象
var reg = /o/i;
// 全部匹配
var resultArr = targetStr.match(reg);
// 结果数组
console.log( resultArr.length+"-"+resultArr[i] );
// 遍历数组，发现匹配到"H"和"o"
for(var i = 0; i < resultArr.length; i++){
    console.log( resultArr[i]+"-"+i+"-"+resultArr[i] );
}

8.2.6 元字符使用

// 目标字符串
var targetStr = "Hello World!";
// 创建正则表达式对象匹配表达式
var reg = /(a-z)/;
// 全部匹配
var resultArr = targetStr.match(reg);
// 数据长度为1
console.log( resultArr.length+"-"+resultArr[i] );
// 遍历数组，发现匹配到"H"
for(var i = 0; i < resultArr.length; i++){
    console.log( resultArr[i]+"-"+i+"-"+resultArr[i] );
}

8.2.7 字符串组合的使用

// 匹配数字的正则
var targetStr="1234567890";
var reg=/^\d{10}$/;
// 匹配：/^\d{5}$/;
var b = reg.test(targetStr);

8.2.8 常用正则表达式