3. JavaScript

JavaScript包括三大块：
ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）
DOM（Document Object Medel）：文档对象模型，对网页当中的HTML标签节点进行增删改的过程。HTML文档被当作一颗DOM树来看待：var domObj = document.getElementById(“id”);
BOM(Browser Object Medel)：浏览器对象模型，打开一个新的浏览器窗口、前进、后退、浏览器地址栏上的地址等都是BOM编程。

image

DOM和BOM的区别和联系？

  • BOM的顶级对象是：window

  • DOM的顶级对象是：document

  • 实际上BOM是包括DOM的，举例如下

window.onload = function() {
    var domObj = window.document.getElementById("id")
    //可简写为
    var domObj = document.getElementById("id")
}

3.1. 嵌入JS三种方式以及JS的注释

3.1.1. 行内引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内引入方式</title>
</head>
<body>
    <!--window为JS内置对象，代表浏览器对象，可省略不写-->
    <input type="button" value="button" onclick="window.alert('hello,js')">
</body>
</html>

3.1.2. 内部引入方式

内部引入方式也叫javascript脚本块。javascript脚本块可以在一个页面中出现多次，也可以出现在任意位置，按照自上而下的顺序依次执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部引入方式</title>
    <script type="text/javascript">
        alert("hello,js1")
    </script>
</head>
<body>
    <script type="text/javascript">
        alert("hello,js2")
    </script>
</body>
</html>
<script type="text/javascript">
    alert("hello,js3")
</script>

3.1.3. 外部引入方式

通过外部引入方式引入js文件时，<script scr=”index.js”></script> 不能写成单标签，且标签之间不能写任何内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部引入方式</title>
</head>
<body>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

3.1.4. JS中的注释

JavaScript一共有两种注释方式，分别为单行注释和多行注释，使用方式和Java一模一样。

<script type="text/javascript">
    //单行注释

    /*
    多行注释
    */
</script>

3.2. 标识符和关键字

这里只介绍声明变量的三种标识符：

  • var：使用war声明的变量可被重复声明，会导致值被覆盖问题
<script type="text/javascript">
    var num = 10;
    var num = 100;
    console.log(num);   //输出为100
</script>
  • let：ES6中的新语法，let声明的变量不可被重复声明
<script type="text/javascript">
    let num = 10;
    let num = 100; //Uncaught SyntaxError: Identifier 'num' has already been declared
</script>

image

  • const：代表声明的是常量，值不可被修改
<script type="text/javascript">
    const num = 10;
    num = 100;   //Uncaught TypeError: Assignment to constant variable
</script>

image

3.3. 六大变量数据类型

注：JavaScript和Python一样都属于弱类型语言，在编译时由解释器去识别数据类型，这里就不过多叙述。

JavaScript中数据类型有：原始类型、引用类型
原始类型：undifine、number、string、boolean、null
引用类型：object、object的子类

我们可以使用JS内置函数 typeof 查看变量的数据类型：

<script type="text/javascript">
    console.log(typeof undefined);
    console.log(typeof 10);
    console.log(typeof false);
    console.log(typeof "zhangsan");
    console.log(typeof new Object());
    console.log(typeof null);
</script>

image

注意：null的数据类型应该为null，但这里打印出来的是object

3.3.1. undifined类型

undifined类型只有一个值，这个值就是undefine。当一个变量没有赋值或赋值为undefined，该变量类型为undifined。

<script type="text/javascript">
    var a;
    var b = undefined;
    console.log(a);
    console.log(b);
</script>

image

3.3.2. number类型

整数、小数、不是数字（NaN）、无穷大（Infinity）都属于number类型。

<script type="text/javascript">
    var v1 = 1;
    var v2 = 3.14;
    var v3 = 10.00;
    var v4 = NaN;
    var v5 = Infinity;

    console.log(typeof v1)
    console.log(typeof v2)
    console.log(typeof v3)
    console.log(typeof v4)
    console.log(typeof v5)
</script>

image

3.3.2.1 isNaN()函数

isNaN()是一个JS内置函数，用于判断传入变量是否为数字。返回结果为true表示不是一个数字，返回false则表示是是一个数字。

<script type="text/javascript">
    console.log(isNaN(NaN))    //输出为false
    console.log(isNaN(Infinity))    //输出为false
    console.log(isNaN(undefined))    //输出为true
</script>

注意：NaN虽然是number类型，但它不是一个数字

3.3.2.2 parseInt()函数

parseInt()函数可以将字符串或小数自动转换成数字，并且取整数位。

<script type="text/javascript">
    var str =  "3.14";
    var num = 3.14;
    console.log(parseInt(str))  //输出结果为3
    console.log(parseInt(num))  //输出结果为3
</script>

3.3.2.2 parseFloat()函数

parseFloat()函数可以将字符串自动转换成小数。

<script type="text/javascript">
    var str =  "3.14";
    console.log(parseFloat(str))  //输出结果为3.14
</script>

3.3.2.2 Math.ceil()函数

Math数学类是JS的内置类，数学类中有一个函数叫做ceil()，作用是向上取整。

<script type="text/javascript">
    var num = 3.14;
    console.log(Math.ceil(num))  //输出结果为4
</script>

3.3.3. bollean类型

在单条件if判断中，undefiend、0、””、false、null都表示false，其他表示true

3.3.3.1 Boolean()函数

Boolean()函数的作用是将非布尔类型转换成布尔类型

<script type="text/javascript">
    console.log(Boolean(undefined));    //输出为false
    console.log(Boolean(0));            //输出为false
    console.log(Boolean(null));         //输出为false
</script>

3.3.4. string类型

JavaScript中字符串可以使用单引号，也可以使用双引号
字符串下标从0开始

3.3.4.1. 创建字符串方式一

<script type="text/javascript">
    var str = "zhangsan";
    console.log(str)    //输出为string
</script>

3.3.4.2. 创建字符串方式二

使用JS内置的类String（String的父类是Object）。创建出来的变量类型为object，但是和string类型有共同的属性和函数。

<script type="text/javascript">
    var str = new String("zhangsan");
    console.log(str)    //输出为object
</script>

其实基本类型string并没有属性和函数，而是JS为它创建了一个对应的基本包装类型String，它根据基本类型的值实例化出了一个实例，让这个实例去调用指定方法，最后销毁自己

//我们平常写程序的过程：
var str = "helloworld";     //string基本类型
var len = str.length;   //在执行到这一句的时候 后台会自动完成以下动作 ：

//后台偷偷发生的
var _str = new String("helloworld");    //1.创建String类型的一个实例
var len = _str.length;      //2.在实例上调用指定的方法，并且返回给len
_str = null;    //3.销毁这个实例

3.3.4.3. length属性

获取字符串的长度。

<script type="text/javascript">
    var str = "zhangsan";
    console.log(str.length)     //输出为8
</script>

3.3.4.4. substr()函数

从下标为2开始，往后截取4个字符。

<script type="text/javascript">
    var str = "abcdefg";
    console.log(str.substr(2,4));   //输出为cdef
</script>

3.3.4.5. substring()函数

截取下标为2，到下标为4且不包含下标为4的字符串。

<script type="text/javascript">
    var str = "abcdefg";
    console.log(str.substring(2,4));    //输出为cd
</script>

3.3.5. object类型（以及创建自定义类）

object类型是所有类型的父类，自定义的类型默认继承object类。

<script>
    //创建自定义类
    var Student = function(name,age){
        this.name = name;
        this.age = age;
        this.study = function(){
            console.log("我爱学习~");
        }
        //静态方法，直接使用类名调用
        Student.learn = function(){
            console.log("学习爱我~");
        }
    }

    var student = new Student("张三",20);
    console.log(student);
</script>

访问类中的属性和函数：

<script>
    var Student = function(name,age){
        this.name = name;
        this.age = age;
        this.study = function(){
            console.log("我爱学习~");
        }
        //静态方法，直接使用类名调用
        Student.learn = function(){
            console.log("学习爱我~");
        }
    }
    //Student()，直接这样调用，只是当作一个普通函数去执行，不会在堆中分配空间，也就是不会创建对象
    //new Student()，这样去调用，就相当于调用类的构造方法，创建对象，并在堆内存中分配空间
    var student = new Student("张三",20);

    console.log(student.name);
    console.log(student.age);
    student.study();

    console.log(student["name"]);
    console.log(student["age"]);
    student["study"]();

    //类的静态函数的调用
    //需要注意的是，和Java不同，JS中的静态方法只有new对象后，才能通过 "类名.静态方法名()" 的方式调用
    Student.learn();
</script>

3.3.5.1 prototype属性

可以通过prototype这个属性给类动态地扩展属性和函数

<script>
    var Student = function(name,age){
        this.name = name;
        this.age = age;
    }
    //给Student类动态地扩展一个getName()函数
    Student.prototype.getName = function(){
        return this.name;
    }

    var student = new Student("张三",20);
    console.log(student.getName());     //输出为：张三
</script>

3.3.6. null类型

null类型只有一个值，这个值就是null。只有当一个变量被赋值为null，该变量类型为才为null。

<script type="text/javascript">
    var val = null;
</script>

3.3.7. null、NaN、undefined的区别

<script type="text/javascript">
    //null NaN undefined数据类型不一样
    alert(typeof null);         //输出为：object
    alert(typeof NaN);          //输出为：number
    alert(typeof undefined);    //输出为：undefined

    //null和undefined在值上可以等同
    alert(null == NaN);         //输出为：false
    alert(null == undefined);   //输出为：ture
    alert(undefined == NaN);    //输出为：false

    //在JS中有两个比较特殊的运算符
    //==（等同运算符，只判断值是否相等）
    //===（全等运算符，既判断值是否相等，又判断类型是否相等）
    alert(null === NaN);         //输出为：false
    alert(null === undefined);   //输出为：false
    alert(undefined === NaN);    //输出为：false
</script>

3.4. 函数定义与调用

3.4.1. 函数声明方式一

<script type="text/javascript">
    function helloworld(){
        console.log("hello,world")
    }
</script>

3.4.2. 函数声明方式二

<script type="text/javascript">
    var helloworld = function(){
        console.log("hello,world")
    }
</script>

3.4.2. 函数传参与直接调用

<script type="text/javascript">
    var add = function(num1,num2){
        if(!isNaN(num1) && !isNaN(num2)) {
            return num1 + num2;
        }else{
            console.log("输入有误");
        }
    }

    var result = add(1,2);
    console.log(result);    //输出为3
</script>

3.4.2. 函数绑定事件

<div>
    <input type="button" value="提交" onclick="submit()" />
</div>

<script type="text/javascript">
    var submit = function(){
        alert("提交成功")
    }
</script>

3.4.3. 构造函数

构造函数的首字母必须大写，用于创建自定义对象。

<script type="text/javascript">
    var Student = function(name,age){
        this.name = name;
        this.age = age;
    }

    var student = new Student("张三",20);
    console.log(student);
</script>

image

3.4.4. 全局变量和局部变量

【全局变量】：在函数体外部声明的变量属于全局变量。全局变量的生命周期为在浏览器打开时开辟内存空间，浏览器关闭时销毁。在浏览器关闭前全局变量会一直存在浏览器1的内存中，因此尽量少用全局变量。

【局部变量】：在函数体内部声明的变量属于局部变量，包括一个函数的形参。局部变量的生命周期为在函数执行时开辟内存空间，函数执行结束后销毁。

当一个变量声明时没有使用var、let、const关键字，那么无论这个变量是在哪里声明的，都属于全局变量。

3.5. JS中的事件

3.5.1 常用事件

<script type="text/javascript">
    /*
    JS中的事件：
        blur失去焦点
        focus获得焦点

        click鼠标单击
        dblclick鼠标双击

        keydown键盘按下
        keyup键盘弹起

        mousedown鼠标按下
        moseover鼠标经过
        mosemove鼠标移动
        moseout鼠标离开
        moseup鼠标弹起

        reset表单重置
        submit表单提交

        load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）
        change下拉列表选中项改变，或文本框内容改变
        select文本被选定
    */
</script>

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加”on”，如”onclick”
“onclick”这个事件句柄出现在一个HTML标签的属性位置上（事件句柄以属性形式存在）

3.5.2. 注册事件的两种方式

3.5.2.1. 直接在标签种使用标签句柄

<!--注册事件的第一种方式，直接在HTML标签中使用事件句柄-->
<!--以下代码含义是：将helloworld()函数注册到按钮上，等待click事件发生后，该函数被浏览器调用，我们称这个函数为回调函数-->
<input type="button" value="提交" onclick="helloworld()"/>

<script type="text/javascript">
    //对于当前程序来说，helloworld()函数称为回调函数（callback函数）
    //回调函数特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，而是事件发生后由浏览器调用
    var helloworld = function(){
        alert("hello,world")
    }
</script>

3.5.2.2. 使用纯JS代码

<!--注册事件的第二种方式，使用纯JS代码完成事件的注册-->
<input type="button" value="提交" id="mybtn"/>

<script type="text/javascript">
    var helloworld = function(){
        alert("hello,world")
    }

    // 第一步：先获取这个按钮对象（ducument就代表整个HTML页面）
    var btn = document.getElementById("mybtn")
    // 第二布：给按钮对象的onclick属性赋值
    btn.onclick = helloworld;// 注意：不能加小括号
</script>

<script type="text/javascript">
    //使用匿名函数
    var btn = document.getElementById("mybtn").onclick = function(){
        alert("hello,world");
    }
</script>

3.5.3 JS代码的执行顺序

在使用第二种方式注册事件，也就是纯JS代码注册事件时。我们需要注意JS代码和标签出现的顺序，如下<input/>标签在JS代码后出现，执行JS代码时就不能根据id找到input标签，事件自然也就注册失败了。

<script type="text/javascript">
    var btn = document.getElementById("mybtn").onclick = function(){
        alert("hello,world");
    }
</script>

<input type="button" value="提交" id="mybtn"/>

那么该如何解决呢？可以加上”window.onload=函数”代表页面加载完毕后再执行函数中的JS代码。

<script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById("mybtn");
        btn.onclick = function(){
            alert("hello,world");
        }
    }
</script>

<input type="button" value="提交" id="mybtn"/>

一个小案例：

<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="mybtn">

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("mybtn").onclick = function() {
            // 一个标签节点对象中的属性都可以"."出来
            document.getElementById("mytext").type = "checkbox";
        }
    }
</script>

3.5.3. 捕捉回车键

我们平时在网站上登陆时，一般输入密码后会直接按下回车键进行登录，并不需要去鼠标点击登录按钮，这就需要使用JS的”keydown”键盘按下事件完成。

<input type="text" id="password"/>

<script type="text/javascript">
    window.onload = function() {
        var passwordElm = document.getElementById("password");
        //回车键键值：13  ESC键键值：27
        //若加上形参event（可随意命名），会接收到浏览器发过来的当前事件的对象
        passwordElm.onkeydown = function(event) {
            console.log(event);
            //获取键值
            if(event.keyCode == 13) {
                alert("正在进行验证...");
            }
        }
    }
</script>

如图先按下”a”，再按回车键”enter”
image

分别接收到两次浏览器传入的键盘按下事件的对象
image

3.5.4. void运算符

正常来说，当我们点击超链接时，页面会发生跳转。要是的保留住超链接的样式同时，用户点击该超链接的时候执行一段JS代码，但页面不进行跳转，就得使用void运算符。

<h1>当前页面</h1>
<a href="https://www.baidu.com" onclick="alert('点击了超链接')">此时点击超链接后执行了JS代码，但会发生页面跳转</a>

<h1>当前页面</h1>
<!--
    void运算符的语法：void(表达式)，小括号中必须有表达式，一般写0即可
    运算原理：执行表达式，但不返回任何结果
    "javascript:"作用是告诉浏览器后面是一端JS代码，不能省略
 -->
<a href="javascript:void(0)" onclick="alert('点击了超链接')">即保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不跳转</a>

3.5.5. JS的控制语句

<script type="text/javascript">
    /*
    以下控制语句写法同Java
        1. if
        2. switch
        3. while
        4. do...while...
        5. for
        6. break
        7. continue
    以下为JavaScript特有语句
        8. for...in...（了解）
        9. with（了解）
    */
</script>

3.5.5.1. for…in…语句(了解)

<script type="text/javascript">
   var arr = [1,2,3,4,5];
   var student = {username: "张三",age: 20}

    //for...in...
    for(var i in arr) {//i是数组的下标
        console.log(arr[i]);
    }

    for(var i in student) {//i是类的属性名
        console.log(student[i]);
    }
</script>

3.5.5.2. with语句(了解)

<script type="text/javascript">
    var student = {username: "张三",age: 20};

    with(student) {
        console.log(username + "," + age);
    }
</script>

3.6. DOM编程

3.6.1. DOM编程：设置和获取文本框的value

获取文本框的值value

<input type="text" id="username"/>
<input type="button" value="获取文本框的value" id="btn"/>

<script type="text/javascript">
    window.onload = function() {
        var btnElm = document.getElementById("btn");
        btnElm.onclick = function() {
            var usernameElm = document.getElementById("username");
            console.log(usernameElm.value);
        }
    }
</script>

设置（或修改）文本框的值value


<input type="text" id="username"/>
<input type="button" value="设置（修改）文本框的value" id="btn"/>

<script type="text/javascript">
    window.onload = function() {
        var btnElm = document.getElementById("btn");
        btnElm.onclick = function() {
            document.getElementById("username").value = "李四";
        }
    }
</script>

3.6.2. DOM编程：innerHTML和innerText属性

  • innerHTML会把后面的”字符串”当作一段HTML代码解释并输出

  • innerText即使后面是一段HTML代码，也只是当作普通字符输出

<input type="button" value="设置div中的内容" id="btn"/>
<div id="div1"></div>
<div id="div2"></div>

<script type="text/javascript">
    window.onload = function() {
        var btnElm = document.getElementById("btn");
        btn.onclick = function() {
            var div1Elm = document.getElementById("div1");
            div1Elm.innerHTML = "<a href='https://www.baidu.com'>点我跳转百度</a>";

            var div2Elm = document.getElementById("div2");
            div2Elm.innerText = "<a href='https://www.baidu.com'>点我跳转百度</a>";
        }
    }
</script>

image

3.6.3. DOM编程：正则表达式

邮箱正则表达式：^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$

JavaScript中两种创建正则表达式对象方法

//第一种创建方式
var regExp = /正则表达式/flags;
//第二种创建方式
var regExp = new RegExp("正则表达式");

邮箱验证实例：

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("btn").onclick = function() {
            var email = document.getElementById("email").value;
            var regExp = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$");
            //使用正则表达式对象的test()方法进行验证
            if(!regExp.test(email)){
                //提示错误信息
                document.getElementById("msg").innerText = "邮箱格式错误";
            }else{
                document.getElementById("msg").innerText = "邮箱格式正确";
            }
        }
        //输入（获得焦点）时不显示提示信息
        document.getElementById("email").onfocus = function() {
            document.getElementById("msg").innerText = "";
        }
    }
</script>

image

3.6.4. DOM编程：字符串的trim函数

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("btn").onclick = function() {
            var username = document.getElementById("username").value;
            //去掉字符串前后空白
            username = username.trim();
        }
    }
</script>

3.6.5. DOM编程：复选框的全选与取消全选

<script type="text/javascript">
    window.onload = function() {
        //获取第一个复选框元素节点
        var firstCheckbox =  document.getElementById("firstCheckbox");
        //根据name获得所有元素
        var hobbies =  document.getElementsByName("hobbies");

        firstCheckbox.onclick = function() {
            //获取第一个复选框的选中状况
            //checked属性：选中为true，未选中为false
            for(var i = 0;i < hobbies.length;i++) {
                hobbies[i].checked = this.checked;
            }
        }
        //复选框总数量（不包括第一个）
        var all = hobbies.length;

        //这个for循环在页面加载完毕时执行
        for(var i = 0;i < all;i++) {
            //给每个多选框绑定点击事件
            hobbies[i].onclick = function() {
                var count = 0;
                for(var i = 0;i < all;i++) {
                    if(hobbies[i].checked) {
                        count++;
                    }
                }
                firstCheckbox.checked = (count == all);
            }
        }
    }
</script>

3.6.6. DOM编程：获取下拉列表选中项的value

<select id="option">
    <option value="">--请选择省份--</option>
    <option value="001">湖南省</option>
    <option value="002">湖北省</option>
    <option value="003">广东省</option>
    <option value="004">广西省</option>
</select>

<script type="text/javascript">
    window.onload = function() {
        var option = document.getElementById("option");
        //根据选项得到option标签的value属性值
        //绑定改变事件，当下拉框改变时获取选中项的value属性值
        option.onchange = function() {
            console.log(this.value);
        }
    }
</script>

3.7. JS内置对象

3.7.1. Date类

<script type="text/javascript">
/*
    JS中内置的类：Date，可以用来获取时间/日期
*/
//获取系统当前时间
var nowTime = new Date();
//输出到网页上
document.write(nowTime);
document.write("<br/><br/>");
document.write(nowTime.toLocaleString());
document.write("<br/><br/>");

//当以上格式不是自己想要的，可以通过日期获取年月日时分秒信息，自定义日期格式
var year = nowTime.getFullYear();   //返回年份
var month = nowTime.getMonth();     //月份是 0-11
var day = nowTime.getDate();        //返回当前是几号
var week = nowTime.getDay();         //获取一周的第几天 0-6
document.write(year + "年" + (month+1) + "月" + day + "日");
document.write("<br/><br/>");

//重点：怎么获取毫秒数？（从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数）
var times = nowTime.getTime();  //一般使用毫秒数当作时间戳
document.write(times);
</script>

image

实时在网页上显示时间：

<input type="button" value="显示系统时间" onclick="start()"/>
<input type="button" value="停止显示时间" onclick="stop()"/>
<div id="timeDiv"></div>

<script type="text/javascript">
    var printTime = function() {
        var time = new Date();
        document.getElementById("timeDiv").innerHTML = time.toLocaleString();
    }

    var start =  function (){
        //从这行代码执行开始，会每隔1000毫秒调用一次printTime()函数
        //注意：不加修饰符的变量为全局变量
        e = window.setInterval("printTime()",1000);
    }

    var stop =  function (){
        window.clearInterval(e);
    }
</script>a

3.7.2. Array类

<script type="text/javascript">
    //第一种创建数组的方式（常用）
    //创建长度为0的数组
    var arr = [];
    //数据类型随意
    var arr2 = [1,2,3,false,"abc"];
    //下标会越界吗？
    arr2[7] = "test";
    for(var i = 0;i < arr2.length;i++) {
        //输出arr2到屏幕上，用空格隔开
        document.write(arr2[i] + "<span>  </span>")
        //输出为：1 2 3 false abc undefined undefined test
    }
</script>

image

<script type="text/javascript">
    //第二种创建数组的方式（了解）
    var arr = new Array(3);
    console.log(arr.length);    //输出为 3

    //数组常用函数
    //1.join()函数，使用指定字符连接数组，返回一个字符串
    var arr2 = [1,2,3,4];
    var str = arr2.join("-");   //得到字符串 "1-2-3-4""
    var str2 = arr2.join("");   //得到字符串 "1234""

    //2.push()函数,在数组末尾添加一个元素（数组长度+1）
    arr2.push(5);
    console.log(arr2);  //输出为 [1,2,3,4,5];

    //2.push()函数,在数组末尾元素弹出（数组长度-1），返回弹出元素值
    console.log(arr2.pop());    //输出为 5
    console.log(arr2);  //输出为 [1,2,3,4];
</script>

3.8. BOM编程（了解）

3.8.1. BOM编程-open和close

<!--
    1. BOM编程中，window对象是顶级对象，代表浏览器窗口
    2. window有open()和close()函数，可以开启和关闭窗口
    -->
<input type="button" value="打开百度（新窗口）" onclick="window.open('https://www.baidu.com');">
<input type="button" value="打开百度（当前窗口）" onclick="window.open('https://www.baidu.com','_self');">
<input type="button" value="打开百度（新窗口）" onclick="window.open('https://www.baidu.com','_blank');">
<input type="button" value="打开百度（父窗口）" onclick="window.open('https://www.baidu.com','_parent');">
<input type="button" value="打开百度（顶级窗口）" onclick="window.open('https://www.baidu.com','_top');">
<input type="button" value="关闭当前窗口" onclick="window.close();">

3.8.2. BOM编程-弹出消息窗和确认窗

<input type="button" value="弹出消息框" onclick="window.alert('这是消息框');">
<input type="button" value="弹出确认框" onclick="del()">

<script type="text/javascript">
    var del = function() {
        //若选择确定返回true，选择取消返回false
        if(window.confirm('确认删除吗？')) {
            //TODO...
        }else {
            //TODO...
        }
    }
</script>

3.8.3. BOM编程-history和location对象

使用history对象实现页面后退

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history</title>
</head>
<body>
    <a href="new.html">打开新页面</a>
    <!--前提是在此窗口打开过新窗口后又回到此窗口-->
    <input type="button" value="前进" onclick="window.history.go(1)">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>new</title>
</head>
<body>
    <input type="button" value="后退" onclick="window.history.back()">
    <input type="button" value="后退" onclick="window.history.go(-1)">
</body>
</html>

使用location对象实现修改URL网址跳转

<!--
    总结：有哪些方法可以通过浏览器向服务器发送请求？
        1. 提交表单form（重要！！！）
        2. a标签超链接
        3. window.location.href = "url"
        4. window.open("url")
        5. 直接在浏览器地址栏上输入URL，然后回车
        以上所有请求方式均可携带数据给服务器，只有通过表单提交的数据才是动态的

        6.通过AJAX向服务器发送异步请求（学完JS后就会接着学，重要！！！ ）
-->
<input type="button" value="设置浏览器地址栏上的URL" onclick="goBaidu()">

<script type="text/javascript">
    var goBaidu = function() {
        var locationObj = window.location;
        locationObj.href = "https://www.baidu.com";
    }
</script>

3.9. JSON

<script type="text/javascript">
    /*
        1.什么是JSON，有什么用？
            JavaScript Object Notation（JavaScript对象标记），简称JSON（数据交换格式）
            JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON）
        2.JSON是一种标准的轻量级的数据交换格式。特点是：体积小、易解析
        3.在实际的开发中有两种数据交换格式，使用较多，其一是JSON，另一个是XML
            XML体积较大，解析麻烦，优点是语法严谨（通常银行相关系统之间进行数据交换会使用XML）
    */
    //创建一个JSON对象（JSON也可以称为无类型对象，轻量级、体积小、易解析）
    var student = {
        "username": "张三",
        "age": 20
    }

    //访问JSON对象属性
    alert(student.username +student.age);
</script>

3.9.1. 创建JSON对象

<script type="text/javascript">
    //创建简单的JSON对象
    var student = {
        "username": "张三",
        "age": 20
    }

    //创建JSON数组
    var students = [
        { "username": "张三","age": 20},
        {"username": "李四","age": 20}
    ]
</script>

3.9.2. eval()函数

<script type="text/javascript">
    /*
        eval()函数的作用是：
            将字符串当作一段JS代码解释并执行
    */
    window.eval("var i = 100;");
    console.log("i = " + i);     //输出为"i = 100"

    //java连接数据库，查询数据之后，将数据在java程序中拼接成JSON格式的字符串，将JSON格式的字符串响应到浏览器
    //也就是说java响应到浏览器上的仅仅是一个JSON格式字符串，还不是一个JSON对象
    //可以使用eval函数，将JSON格式的字符串转换成JSON对象
    var fromJava = "{\"username\": \"张三\",\"age\":20}";
    //将以上JSON格式的字符串转换成JSON对象
    window.eval("var jsonObj = " + fromJava);
    console.log(jsonObj.username + "," + jsonObj.age);
</script>

3.9.3. JS中[]和{}的区别

在JavaScript中，[]是数组，{}是JSON对象。

3.9.4. 将JSON数据填充到table表格中

<script type="text/javascript">
    var data = {
        "total": 3,
        "employees": [
            { "id":001, "username": "张三","salary": 7000},
            { "id":002, "username": "李四","salary": 7500},
            { "id":003, "username": "王五","salary": 6000}
        ]
    }

    window.onload = function() {
        document.getElementById("btn").onclick = function() {
            var html = "";
            for(var i = 0;i < data.total;i++) {
                html += "<tr>" + "<td>"+data.employees[i].id+"</td>" +
                    "<td>"+data.employees[i].username+"</td>" +
                    "<td>"+data.employees[i].salary+"</td>" + "</tr>";

            }
            document.getElementById("employees").innerHTML = html;

            var count =  document.getElementById("count");
            count.innerText = data.total;

        }
    }
</script>
版权声明：本文为桜花落原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/hualuosakura/p/16566102.html