三十三、JavaScript

本文主要是介绍三十三、JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

JavaScript
- 概念
- JS 的使用
- 标识符
- 变量
- 数据类型
- - typeof 运算符（获取当前值类型）
  - Number 类型
  - String 类型
  - Boolean（布尔型）
  - Underfined
  - Null
- 三大引用类型
- - Object 类型
  - Array 类型
  - function 类型
- 输出语句
- 区分 undefined 和 null
- 语句
- 运算符
- 弹出框（alert、confirm、prompt）
- 内置对象
- - 顶层函数
- 常见内置对象
- - Math
  - Date
Javascript 面向对象编程
- 自定义对象
- - 对象属性的操作
- 原型
- - 原型链
- JS 的三大特性
- - 多态
  - 继承
  - 封装
- DOM
- - 模型
  - 节点
  - - 文档节点（document）
    - 元素节点（Element）
    - 文本节点（Text）
    - 属性节点（Attr）
    - nodeName属性
    - nodeType属性
    - textContent属性
    - 事件
  - 元素节点的选择
  - - 根据 id 获取元素
    - 根据标签名获取元素
    - 根据 name 获取元素
    - 根据类名获取元素
    - 根据选择器获取元素（querySelectorAll）
  - 属性操作
  - - 非表单元素的属性
    - innnerHTML 和 innerText
    - 表单元素属性
    - 自定义属性操作
    - 样式操作
    - 类名操作
  - 创建元素的方式
  - 节点层级
- BOM
- - 代码嵌入网页的方法
  - - script 元素嵌入代码
    - script 元素加载外部脚本
    - 事件属性
    - URL 协议
    - defer 属性
    - async 属性
  - 浏览器的组成
  - - 渲染引擎
    - JavaScript 引擎
  - window 对象
  - - 概述
    - 位置大小属性
    - 组件属性
    - 全局对象属性
    - window 对象的方法
    - 窗口的打开与关闭
  - 事件
  - navigator 对象的属性
  - - navigator.userAgent
    - navigator.plugins
    - navigator.platform
    - navigator.onLine
    - navigator.language，navigator.languages
    - navigator.cookieEnabled
  - screen 对象

JavaScript

概念

组成：

在这里插入图片描述

语言：解释执行（由浏览器执行）
ECMAScript 语法规范：
- 变量、数据类型、类型转换、操作符
- 流程控制语句：判断、循环语句
- 数组、函数、作用域、预解析
- 对象、属性、方法、简单类型和复杂类型的区别
- 内置对象：Math、Date、Array，基本包装类型String、Number、Boolean

Web APIs：

BOM
- onload页面加载事件，window顶级对象
- 定时器
- location、history
DOM
- 获取页面元素，注册事件
- 属性操作，样式操作
- 节点属性，节点层级
- 动态创建元素
- 事件：注册事件的方式、事件的三个阶段、事件对象

特点：

解释型语言
类似于 C 和 Java 的语法结构
动态语言
基于原型的面向对象
弱类型语言

作用：

表单验证
页面特效
动态调整页面内容

JavaScript 中的全局函数：
在这里插入图片描述

Javascript的14个全局函数
（1）decodeURI()
参数：string
功能：对encodeURI()编码过的URI进行解码

（2）decodeURIComponent()
参数：string
功能：对encodeURIComponent()编码过的URI进行解码

（3）encodeURI()
参数：string
功能：字符串某些字符将被十六进制的转义序列进行替换

（4）encodeURIComponent()
参数：string
功能：可把字符串作为URI组件进行编码
（5）escape()
参数：string
功能：escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串

（6）unescape()
参数：string
功能：可以使用 unescape() 对 escape() 编码的字符串进行解码

（7）eval()
参数：string
功能：eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

（8）getClass()
参数：javaobj
功能：返回一个 JavaObject 的 JavaClass。

（9）isFinite()
参数：number
功能：检查其参数是否是无穷大

（10）isNaN()
参数：x
功能：用于检查其参数是否是非数字值

（11）Number()
参数：object
功能：把对象的值转换为数字

（12）parseInt()
参数：string(必写) radix（可选）表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
功能：解析一个字符串，并返回一个整数
返回值：返回解析后的数字

（13）parseFloat()
参数：string
功能：可解析一个字符串，并返回一个浮点数。
parseFloat 是全局函数，不属于任何对象。

（14）String()
参数：object
功能：把对象的值转换为字符串

JavaScript 关键字：
break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instranceof、typeof。

JS 的使用

使用 script 标签来完成内部的 js

 <script type="text/javascript">

 <script type="text/javascript">
        alert("Hello");
        console.log("Hello javascript")
    </script>

在这里插入图片描述

使用外部的 js 文件

<script src="js/index.js" type="text/javascript"></script>

index.js 文件

function al(){
    alert("提交成功");
    console.log("提交成功！")
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引用外部的文件 -->
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
    <!-- 引用外部的文件 -->
    <input type="button" value="按钮" onclick="al()">
</body>
</html>

在这里插入图片描述

行内的 js 代码

<body>
    <input type="button" value="按钮" onclick="javaScript:alert('行内代码')">
</body>

在这里插入图片描述

标识符

标识符指变量、函数、属性的名字或函数的参数。

标识符可以是按照下列格式规则组合起来的一或多个字符：

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其他字符可以是字母、下划线、美元符号或数字。
按照惯例， ECMAScript 标识符采用驼峰命名法。
但是要注意的是JavaScript中的标识符不能是关键字和保留字符

变量

变量的声明：

var 标识符=值;

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

在这里插入图片描述

数据类型

JS 中的六大数据类型
1. 字符串型（ String）
2. 数值型（ Number）
3. 布尔型（ Boolean）
4. null型（ Null）
5. undefined型（ Undefined）
6. 一种复杂数据类型（Object）。这5种之外的类型都称为Object

typeof 运算符（获取当前值类型）

检测当前变量的数据类型， typeof 关键字

    <script type="text/javascript">
        var a = "aaa";
        var b = 10;
        var c = false;
        console.log(typeof a);
        console.log(typeof b);
        console.log(typeof c);
        console.log(typeof null);
        console.log(typeof undefined);
        console.log(typeof { });
    </script>

string
js1.html:13 number
js1.html:14 boolean
js1.html:15 object
js1.html:16 undefined
js1.html:17 object

Number 类型

整数
浮点数（小数点后必须有一位）

NaN：非数字类型
特点：

涉及到的任何关于 NaN 的操作，都会返回 NaN
NaN 不等于自身

isNaN() 函数用于检查其参数是否是非数字值，若是则返回 false，若不是则返回 true

    <script type="text/javascript">
        var a = "aaa";
        var b = 10;
        var c = false;
        // isNaN() 函数
        console.log(isNaN(a));  //true
        console.log(isNaN(b));  //false
        console.log(isNaN(c));  //false
    </script>

将非数值转化为数值：

number() 可以用来转换任意类型的数据，而后两者只能用于转换字符串。
parseInt()只会将字符串转换为整数，而parseFloat()可以转换为浮点数。非数值型返回NaN

    <script type="text/javascript">
        var a = "aaa";
        var b = 10;
        var c = "10.112";
        console.log(Number(a)); //NaN
        console.log(Number(b)); //10
        console.log(Number(c)); //10.112
        console.log(parseInt(c)); //10
        console.log(parseFloat(c)); //10.112
    </script>

String 类型

表示一个字符序列，即字符串，需要用" ’ " 或 " " " 引起来。

转义字符：
在这里插入图片描述

将其他数值转换为字符串的方式：toString() String() 拼串

String(),适用于任何数据类型（null,undefined 转换后为null和undefined）
toString()方法（null,defined没有toString()方法）。

    <script type="text/javascript">
        //将其他数值转换为字符串
        var a = true;
        var b = 10;
        console.log(b.toString()); //10
        console.log(String(a)); //true
        console.log(b + ""); //10
        console.log(typeof(b + "")); //string
    </script>

length 属性获取字符串的长度

console.log((a + b).length);

Boolean（布尔型）

也被称为逻辑值或真假值类型，只能取true 或 false。其他的数据类型可以通过 Boolean() 函数转换为布尔类型。

转换规则：
在这里插入图片描述

    <script type="text/javascript">
        // 布尔型
        console.log(Boolean("aa")); //true
        console.log(Boolean("")); //false
        console.log(Boolean(1)); //true
        console.log(Boolean(0)); //false
        console.log(Boolean(NaN)); //false
        console.log(Boolean(undefined)); //false
    </script>

Underfined

Underfined 类型只有一个值，即特殊的 underfined

对于声明但未初始化的变量，或者未声明的变量在使用 typeof 时，返回 underfined

js 是一门解释型语言，当其中一句出错时，不再执行后面的代码

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

Null

只有一个值的数据类型，其值为 null；
从语义上看，null 的值为一个空的对象，所以 typeof 会返回 Object；
underfined 值实际上是由 null 的值衍生出来的，所以比较 underfined 与 null 的值，会返回 true。

    <script type="text/javascript">
        console.log(null == undefined); //true  两个等号，只比较值
        console.log(null === undefined); //false  三个等号，比较类型和值
    </script>
</head>

三大引用类型

js中对象是一组属性与方法的集合。这里就要说到引用类型了，引用类型是一种数据结构，用于将数据和功能组织在一起。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。

Object 类型

语法一（new + Object）：

var 函数名 = new Object();
	函数名.属性名1 = 属性1;
	函数名.属性名2 = 属性2;

	//输出
	console.log(函数名.属性名1 + 函数名.属性名2)

语法二（使用对象字面量表示法）：

var 函数名 = {
	// 属性类型为字符串要加引号	
	属性名1 : "属性1",
	属性名2 : 属性2
}
// 输出
console.log(函数名.属性名1 + 函数名.属性名2)

实例：

语法一：

    <script type="text/javascript">
        var stu = new Object();
        stu.name = "张三";
        stu.age = 18;
        console.log(stu.name + "-" + stu.age);
    </script>

语法二：

    <script type="text/javascript">
        var stu = {
            name : "张三",
            age : 12
        }
        console.log(stu.name + "-" + stu.age);
    </script>

Array 类型

数组的每一个位置都可以用来保存任何类型的数据，数组的大小是可以动态调整的。

    <script type="text/javascript">
        //数组的动态初始化
        var arr = new Array();
        arr[0] = 10;
        arr[1] = true;
        arr[2] = "abc";
        arr[3] = null;
        for(var i = 0 ; i < arr.length ; i++){
            console.log(arr[i]);
        }
    </script>

    <script type="text/javascript">
        //数组的静态初始化
        var arr1 = ["java",1,true,null];
        for(var i = 0 ; i < arr1.length ; i++){
            console.log(arr1[i]);
        }
    </script>

function 类型

格式：

function 函数名称(参数列表)
	方法体;
	若有返回值,retur返回;

实例：

// 函数的定义与使用，无返回值
    <script type="text/javascript">
        function sum(a,b){
            var s = a + b;
            console.log(s);
        }
        // 调用函数
        sum(1,2);
    </script>

//函数的定义与使用，有返回值
    <script type="text/javascript">
        function sum(a,b){
            var s = a + b;
            return s;
        }
        // 调用函数
        var su = sum(1,2);
        console.log(su);
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function sum(a,b){
            var s = a + b;
            console.log(s);
        }
    </script>
</head>
<body>
    <!-- 通过按钮调用函数 -->
    <input type="button" value="求和" onclick="sum(1,3)">
</body>
</html>

    <!-- 将函数定义为一个 var 类型 -->
    <script type="text/javascript">
        var sum = function(a,b){
            return a + b;
        }
        // 调用函数
        var s = sum(1,2);
        console.log(s);
    </script>

例题：

题目1： 
var a = 100; 　　　　
var b = a; 　　　 
a = 200; 　　　　
console.log (b);//100

a 为一个var类型，将a 的值赋值给 b ，所以 b 的结果为 100。

题目2： 
var a = {age : 20}; 　　　　
var b = a; 　　　　
b.age = 21; 　　　　
console.log (a.age);//21

a 为一个对象，将 a 指向 b 后，a 与 b 的指向的对象相同，所以改变 b 的值，a 也会发生变化。

输出语句

console.log()：将语句输出到浏览器控制台

alert()：将内容作为警告框的形式弹出

decument.write()：将内容写出到页面的body

区分 undefined 和 null

null表示"没有对象"，即该处不应该有值。典型用法是：

作为函数的参数，表示该函数的参数不是对象。
作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

变量被声明了，但没有赋值时，就等于undefined。
调用函数时，应该提供的参数没有提供，该参数等于undefined。
对象没有赋值的属性，该属性的值为undefined。
没有返回值时，默认返回undefined。

语句

Java中的语句：

判断语句 if switch
循环语句：for while do…while

js中的语句：

判断语句 if switch
循环语句：for while do…while 判断语句中，条件如果直接写=号，那就是赋值操作。

switch 语句和 java 中的一样。注意 switch 所支持的数据类型。

js 支持所有 for 循环也和 java 中的一样，但是要注意定义变量时使用 var，不要写成 java 的 int。

运算符

在这里插入图片描述

关系运算符：

运算符	说明
<	小于
>	大于
<=	小于等于
>=	大于等于

注：

Javascript 中小数和整数都是数字类型，所以除法中会出现小数。
字符串+字符串 = 字符串连接
字符串-字符串 = 转换为数字再相减
boolean 类型也可以进行运算，false 为0或null，非0非空为true，默认1。
双等号（==）
1. 如果两个值类型相同，再进行三个等号(===)的比较
2. 如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换再比较：
  1）如果一个是null，一个是undefined，那么相等
  2）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较
三等号（===）:
1. 如果类型不同，就一定不相等
2. 如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）
3. 如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
4. 如果两个值都是true，或是false，那么相等
5. 如果两个值都引用同一个对象或是函数，那么相等，否则不相等
6. 如果两个值都是null，或是undefined，那么相等

在这里插入图片描述

条件运算符

条件运算符也称为三元运算符。通常运算符写为 ?:
这个运算符需要三个操作数，第一个操作数在 ? 之前，第二个操作数在 ? 和 : 之间，第三个操作数在:之后。例如： x > 0 ? x : -x 求x的绝对值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        var a = 10;
        var b = 3;
        document.write(a/b);  //3.3333333
        document.write("<br/>");
        var c = true;
        document.write(a + c); //11 boolean与数字相加
        document.write("<br/>");
        var d = "a";
        document.write(d + a); //a10 字符串+数字
        document.write("<br/>");
        document.write(d - a); //NaN 字符串-数字
        document.write("<br/>");
        var e = "b";
        document.write(d - e); //NaN 字符串相减
        document.write("<br/>");
        document.write(d + e); //ab 字符串拼接
        document.write("<br/>");
        //比较==与===
        var t = 11;
        var p = "11";
        document.write(t == p); //true 比较内容是否相同
        document.write("<br/>");
        document.write(t === p); //false 先比较类型，若相同，再比较内容
        document.write("<br/>");
        //条件运算符
        document.write(-1>0?1:-1); //-1
    </script>
</head>
<body>
    
</body>
</html>

弹出框（alert、confirm、prompt）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        //警告框
        alert("这是一个弹出框");
        // 确认框  该确认框会有确定和取消按钮 当点击确定按钮 返回true  点击取消 返回false
        var c = confirm("你确定要删除吗？");
        alert(c);
        //提问
        var p = prompt("请输入成绩");
        console.log(p);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述
点击确定后即可关闭

在这里插入图片描述

内置对象

顶层函数

在这里插入图片描述

方法：

isNaN() 检查某个值是否是数字。
parseInt() 解析一个字符串并返回一个整数。
- parseInt(string, radix)
  - radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN
parseFloat() 解析一个字符串并返回一个浮点数。
toString() 把对象的值转换为字符串。

    <script type="text/javascript">
        eval("x = 3;y = 5; alert(x + 5)");
        eval("document.write(1 + 6)");
        document.write(eval("1 + 1"));
    </script>

常见内置对象

String
Number
Array
Math
Date

Math

Math对象属性：Math对象的属性表示只读的数学常数
- Math.E：常数e。 // 2.718281828459045
- Math.LN2：2的自然对数。// 0.6931471805599453
- Math.LN10：10的自然对数。// 2.302585092994046
- Math.LOG2E：以2为底的e的对数。// 1.4426950408889634
- Math.LOG10E：以10为底的e的对数。// 0.4342944819032518
- Math.PI：常数Pi。// 3.141592653589793
- Math.SQRT1_2：0.5的平方根。// 0.7071067811865476
- Math.SQRT2：2的平方根。// 1.4142135623730951
Math对象的方法
- 【Math.round()方法】：四舍五入
  当参数为正数时，正常的四舍五入标准。（小于0.5取0，大于等于0.5取1）当参数为负数时，向下取整标准。（小于等于-0.5取-0，-大于0.5取-1）

  Math.round(0.1) // 0
  Math.round(0.5) // 1
  
  Math.round(-1.1) // -1
  Math.round(-1.6) // -2

Math.floor()方法：返回小于参数值的最大整数。(向下取整)

  Math.floor(3.9) // 3
  Math.floor(-3.2) // -4

Math.ceil()方法：返回大于参数值的最小整数。(向上取整)

Math.ceil(3.2) // 4
Math.ceil(-3.9) // -3

Math. random()方法：返回0到1之间的一个伪随机数。可能等于0，但是一定小于1。

Math.random() // 0.7151307314634323

生成指定范围的随机数（min~max）：

function getRandomNumber(min, max) {
  return Math.random() * (max - min) + min;
}
function getRandomIntNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);

Date

Date对象是JavaScript提供的日期和时间的操作接口。

在JavaScript内部，所有日期和时间都储存为一个整数。

这个整数是当前时间距离1970年1月1日00:00:00的毫秒数，正负的范围为基准时间前后各1亿天。同Math对象一样，javascript也为 Date 对象提供了很多内置的方法。

date 函数

Date()函数
- Date函数可以被Date对象可以直接调用，返回一个当前日期和时间的字符串。
- Date(); //“Fri Nov 7 2014 14:52:00 GMT+0800 (中国标准时间)”
- Date(2000,1, 1); //“Fri Nov 7 2014 14:52:00 GMT+0800 (中国标准时间)”
  // 无论有没有参数，直接调用Date总是返回当前时间
Date(日期字符串|日期参数)构造函数
- Date对象是一个构造函数，对它使用new命令，会返回一个Date对象的实例。
- 【如果不加参数，生成的就是代表当前时间的对象。】

	语法：
	var date1 = new Date();
	var today = new Date();
  // "Fri Nov 7 2014 14:52:00 GMT+0800 (中国标准时间)"

【如果添加一个日期字符串作为参数，返回字符串所对应的时间。】

 语法：
 var date2 = new Date("January 6, 2013");
  // Sun Jan 06 2013 00:00:00 GMT+0800 (中国标准时间)

    <script type="text/javascript">
        document.write(new Date(2020,2,28));
    </script>

在这里插入图片描述

标准时间的字符串表示：
一些其他合法的日期字符串写法：

new Date(datestring)
new Date("2013-2-15")
new Date('2013/2/15')
new Date("2013-FEB-15")
new Date("FEB, 15, 2013")
new Date("FEB 15, 2013")
new Date("Feberuary, 15, 2013")
new Date("Feberuary 15, 2013")
new Date("15, Feberuary, 2013")
Sun Jan 06 2013 00:00:00 GMT+0800 (中国标准时间)

日期运算

之前提到过，javascript内部存储日期类型的时候等于距离1970年1月1日零点的毫秒数。而显示给用户的时候是转换为字符串显示的。因此：

两个日期对象进行减法运算，返回的就是它们间隔的毫秒数。

两个日期对象进行加法运算，返回的就是连接后的两个字符串。

  var d1 = new Date(2000, 2, 1);
  var d2 = new Date(2000, 3, 1);
  console.log(d2-d1);//2678400000
  console.log(d2+d1);//Sat Apr 01 2000 00:00:00 GMT+0800 (中国标准时间)Wed Mar 01 2000 00:00:00 GMT+0800 (中国标准时间)

日期对象的get*系列方法

getTime()：返回实例对象距离1970年1月1日00:00:00对应的毫秒数，等同于valueOf方法。
getDate()：返回实例对象对应每个月的几号（从1开始）。
getDay()：返回星期几，星期日为0，星期一为1，以此类推。
getYear()：返回距离1900的年数。
getFullYear()：返回四位的年份。
getMonth()：返回月份（0表示1月，11表示12月）。
getHours()：返回小时（0-23）。
getMilliseconds()：返回毫秒（0-999）。
getMinutes()：返回分钟（0-59）。
getSeconds()：返回秒（0-59）。

进行日期的格式化：

	var d = new Date();
    document.write(d.getFullYear() + "-" + d.getMonth() + 1 + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());

在这里插入图片描述

Javascript 面向对象编程

自定义对象

方法：

使用 object 来创建一个对象
通过对象的声明
使用工厂函数
使用构造函数

构造函数的特点：

函数名的首字母大写
没有return
每条语句之后使用分号
创建对象使用 new 构造函数的名称；
在构造函数中，赋值的时候，将参数的值传递给了this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        //方式一：使用object创建一个对象
        var p1 = new Object();
        p1.name = "Tom";
        p1.age = 12;
        console.log(p1.name + " " + p1.age); //Tom 12

        //方式二：通过对象的声明
        var p2 = {
            name : "Mike",
            age : 15,
            say : function(){
                console.log("Hello");
            }
        }
        console.log(p2.name + " " + p2.age); // Mike 15
        p2.say(); //Hello

        //方式三：工厂函数
        function people(name,age,msg){
            return{
                name:name,
                age:age,
                say:function(){
                    console.log(msg);
                }
            }
        }
        //使用工厂函数创建对象
        var p3 = people("aaa",11,"java");
        var p4 = people("bbb",13,"python");
        console.log(p3.name + " " + p3.age); //aaa 11
        p3.say(); //java
        console.log(p4.name + " " + p4.age); //bbb 13
        p4.say(); //python

        //方式四：使用构造函数
        function student(name,age,msg){
            this.name = name;
            this.age = age;
            this.say = function(){
                console.log(msg);
            }
        }
        //使用构造函数创建对象
        var p5 = new student("Jum",18,"Hello html");
        console.log(p5.name + " " + p5.age); //Jum 18
        p5.say(); //Hello html

    </script>
</head>
<body>
    
</body>
</html>

构造函数和实例函数的关系：

构造函数是根据具体的事物抽象出来的抽象模板
实例对象是根据抽象的构造函数模板得到的具体实例对象
每一个实例对象都具有一个 constructor 属性，指向创建该实例的构造函数（constructor是实例的属性的说法不严谨）
可以通过实例的 constructor 属性判断实例和函数的关系（说法不严谨，推荐使用 instanceof 操作符）

对象属性的操作

javascript为对象提供了一系列内置的方法，方便我们更好的操作对象。

Object.keys() 获取对象所有属性
delete 删除一个属性
in 检查对象是否包含一个属性
for in 遍历对象所有属性

        //获取对象的所有属性
        var k = Object.keys(p5);
        console.log(k); //["name", "age", "say"]
        //删除对象的一个属性
        console.log(delete p5.age);   //true
        console.log(Object.keys(p5)); //["name", "say"]

在这里插入图片描述

原型

js中给函数提供了一个对象类型的属性，叫做prototype(原型)。

原型归函数所有，他不用创建，是默认存在的。

结构：原型是一个对象，在原型中通常拥有两个属性：

构造器（constructor）：该属性指向这个类本身
原型指向（__ proto __）：该属性指向原型本身，提供给通过类创建的对象使用
优点：节省内存空间，不必为每一个对象都分配公有属性和公有方法的内存
缺点：原型中不能保存数组这类引用类型的数据，因为地址传递的问题会导致修改的连锁变化

console.log(p5.__proto__);

在这里插入图片描述

原型链

原型链构成：

由【对象的_proto_属性】和【对象的构造函数的原型的__protp___属性】构成的链式结构称为原型链。
原型链的顶端是Object对象。
Object对象没有_proto_属性，或者说Object对象的_proto_属性指向了自身。

在这里插入图片描述
原型链的作用 : 访问对象的属性或方法的时候，首先在本身中查找是否拥有这个属性或方法。如果没有找到那么就沿着原型链向上逐级查找直到Object为止，在任何一级寻找到这个属性或方法都视为对象拥有这个属性或方法。

原型链的创建 : 原型链是依靠__proto___属性将对象和原型连接起来

原型说的是构造函数的prototype所对应的对象的构造函数的constructor属性；

原型链说的是对象的__proto__的属性，它获取到的是通过构造函数的prototype绑定的属性和默认的constructor属性

Object构造函数有prototype属性
s1.proto.proto.__proto__返回null 说明object对象没有__proto__属性

        console.log(p5.__proto__);  //构造函数
        console.log(student.prototype);  //object 的一个实例化对象
        console.log(p5.__proto__.__proto__);  //object
        console.log(p5.__proto__.__proto__.__proto__); //null
        console.log(Object.prototype);  //object

在这里插入图片描述

JS 的三大特性

多态

    <script type="text/javascript">
        function show(f) {
            console.log(f.name);
        }
        function S(name){
            this.name = name;
        }
        var son = new S("王五");
        show(son);
    </script>

在这里插入图片描述

继承

多个方法存在相同的属性和方法时，将相同的属性和方法提取到一个公共的方法中，通过原型 prototype 或 call 或 apply 继承。

每一个对象都有一个 __ proto __ 指向它的原型，这里的原型可以理解为它的父类，在没有指定每一个对象的原型之前，该对象的原型默认为 Ojbject 的一个实例对象。

    <script type="text/javascript">
        function Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.show = function(){
                console.log("name = " + name + " age = " + age + " sex = " + sex); 
            }
        }
        //继承People的方法和属性
        function Stu(name,age,sex,grade){
            this.grade = grade;
            Person.apply(this,[name,age,sex]);
        }
        function Tea(name,age,sex,job){
            this.job = job;
            Person.call(this,name,age,sex);
        }
        var stu1 = new Stu("李四",30,"女","一年级");
        stu1.show();
        console.log(stu1.grade)

        var tea1 = new Tea("张三",25,"男","教导主任");
        console.log(tea1.name + " " + tea1.age + " " + tea1.sex + " " + tea1.job);

        M.prototype = new Person("赵六",22,"男");
        function M(height){
            this.height = height;
        }
        var m = new M(172);
        m.show();
        console.log(m)
    </script>

在这里插入图片描述

封装

JS 封装就是向要隐藏一些属性和方法时，将属性和方法封装起来，通过一个外部可调用的方法调用，其中私有变量用var，共有变量用this

    <script type="text/javascript">
        function student(name,age,sex){
            this.name = name;
            var age = age;
            var sex = sex;
            this.show = function(){
                console.log("age = " + age + " sex = " + sex); 
            }
        }
        var s1 = new student("张三",18,"女"); 
        console.log(s1.name); //张三
        console.log(s1.age); //undefined
        console.log(s1.sex); //undefined
        s1.show(); //age = 18 sex = 女
    </script>

DOM

ECMAScript部分：
js的核心语法部分:

基础部分（变量语句数据类型运算符面向对象原型原型链）

WEBAPI：DOM + BOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。

模型

在这里插入图片描述

节点

OM 的最小组成单位叫做节点（node）。

文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。

Document：整个文档树的顶层节点
DocumentType：doctype标签（比如）
Element：网页的各种HTML标签（比如、等）
Attr：网页元素的属性（比如class=“right”）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。

常用节点分为四类

文档节点（Document）：整个HTML文
元素节点（Element）： HTML文档中的HTML标签
属性节点（Attr）：元素的属性
文本节点（Text）： HTML标签中的文本内容

在这里插入图片描述

    <script type="text/javascript">
        console.log(document.nodeName);
        console.log(document.nodeType);
        console.log(document.nodeValue);
    </script>

在这里插入图片描述

文档节点（document）

文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
document对象作为window对象的属性存在的，我们不用获取可以直接使用。
通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

元素节点（Element）

HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。
浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

文本节点（Text）

文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。
它包括可以字面解释的纯文本内容。
文本节点一般是作为元素节点的子节点存在的。
获取文本节点时，一般先要获取元素节点，再通过元素节点获取文本节点。

属性节点（Attr）

属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
可以通过元素节点来获取指定的属性节点。
例如：元素节点.getAttributeNode(“属性名”)
注意：我们一般不使用属性节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
       window.onload = function(){
        var d = document.getElementById("d");
        console.log(d.firstChild.nodeValue);
        console.log(d.getAttributeNode("id")); //获取属性节点
       }
    </script>
</head>
<body>
    <div id="d">
        我是文本内容
    </div>
</body>
</html>

在这里插入图片描述

nodeName属性

返回节点的名称

console.log(d.nodeName);//返回标签名称并大写

    <script type="text/javascript">
       window.onload = function(){
        console.log(d.nodeName);
        console.log(f.nodeName);
       }
    </script>

在这里插入图片描述

nodeType属性

返回一个整数值，表示节点的类型。

节点名称	对应常量
文档节点（document）：9	对应常量Node.DOCUMENT_NODE
元素节点（element）：1	对应常量Node.ELEMENT_NODE
属性节点（attr）：2	对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3	对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11	对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（DocumentType）：10	对应常量Node.DOCUMENT_TYPE_NODE
注释节点（Comment）：8	对应常量Node.COMMENT_NODE

nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。
只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值，因此这三类节点的nodeValue可以返回结果，其他类型的节点一律返回null。同样的，也只有这三类节点可以设置nodeValue属性的值，其他类型的节点设置无效

    <script type="text/javascript">
        window.onload = function(){
            console.log(d.nodeType); //1
            console.log(d.nodeType == Node.ELEMENT_NODE);  //true 元素节点对应的常量
        }
    </script>

textContent属性

返回当前节点和它的所有后代节点的文本内容
textContent属性自动忽略当前节点内部的 HTML 标签，返回所有文本内容。

该属性是可读写的，设置该属性的值，会用一个新的文本节点，替换所有原来的子节点。它还有一个好处，就是自动对 HTML 标签转义。这很适合用于用户提供的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function(){
        var a = document.getElementById("d");
       console.log(a.textContent);
       }
      
    </script>
</head>
<body>
    <div id="d">
        我是文本内容
        <span>今天天气很好</span>
        <div>今天是晴天</div>
        <a href="http://www.baidu.com">百度</a>
    </div>
    <p id="f">
        文本
    </p>
</body>
</html>

在这里插入图片描述

事件

是文档或浏览器窗口中发生的一些特定的交互瞬间。

JavaScript 与 HTML 之间的交互是通过事件实现的。

对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键等。

元素节点的选择

所有的选择器都是 document 对象的方法

根据 id 获取元素

在 html 中，所有的标签都具有 id 属性，且不能重复

document.getElementById("d")

    <script type="text/javascript">
        window.onload = function(){
            // id选择器
            var d = document.getElementById("d");
            console.log(d);
        }
    </script>

<body>
    <div id="d">
        id 选择器的使用
    </div>
</body>

在这里插入图片描述

根据标签名获取元素

得到的结果是所有相同标签的元素组成的数组

document.getElementsByTagName("标签名");

    <script type="text/javascript">
        window.onload = function(){
            // 标签名选择器
            var divs = document.getElementsByTagName("div");
            for(var i = 0 ; i < divs.length ; i++){
                console.log(divs[i]);
            }
        }
    </script>
    
<body>
    <div id="d">
        id 选择器的使用
    </div>
    <div>
        今天天气很好
    </div>
</body>

在这里插入图片描述

根据 name 获取元素

html 中所有的元素都具有 name 属性，可以重复，得到的结果为一个数组

 document.getElementsByName("name")

    <script type="text/javascript">
        window.onload = function(){
            // name 获取元素
            var divs = document.getElementsByName("a");
            for(var i = 0 ; i < divs.length ; i++){
                console.log(divs[i]);
            }
        }
    </script>

<body>
    <div id="d" name="a">
        id 选择器的使用
    </div>
    <div name="a">
        今天天气很好
    </div>
</body>

在这里插入图片描述

根据类名获取元素

所有元素都有 class 属性，class 属性用来绑定样式，可重复使用，结果为一个数组

document.getElementsByClassName("类名");

    <script type="text/javascript">
        window.onload = function(){
            // name 获取元素
            var divs = document.getElementsByClassName("red");
            for(var i = 0 ; i < divs.length ; i++){
                console.log(divs[i]);
            }
        }
    </script>

<body>
    <div class="red">
        id 选择器的使用
    </div>
    <div name="a">
        今天天气很好
    </div>
</body>

在这里插入图片描述

根据选择器获取元素（querySelectorAll）

querySelector和querySelectorAll的使用的区别：

当使用的选择器选择到的目标元素是唯一的时，使用querySelector。
不唯一则使用querySelectorAll
选择器的使用和 css 中一致，即 #id .类名标签名直接写 name（暂不用）

掌握

getElementById()
getElementsByTagName()
了解
getElementsByName()
getElementsByClassName()
querySelector()
querySelectorAll()

    <script type="text/javascript">
        window.onload = function(){
            var d1 = document.querySelector("#d1");  //使用 id 选择
            console.log(d1);
            var divClass = document.querySelectorAll(".sty");  //使用类名选择
            for(var i = 0 ; i < divClass.length ; i++){
                console.log(divClass[i]);
            }
        }
    </script>
    <style>
        .sty{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="d1">
        id 选择器
    </div>
    <div class="sty">
        类名选择器
    </div>
    <div class="sty">
        我也是
    </div>
</body>

在这里插入图片描述

案例：点击按钮，切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            //选择a标签
            var a = document.getElementById("btn");
            console.log(a);
            // 定义一个值
            var flag = true;
            //给a标签绑定事件
            btn.onclick = function(){
                if(flag){
                    // 改变 img 的 src 属性的值
                    document.getElementsByClassName("pic")[0].src = "images/b.jpg";
                    flag = false;
                }else{
                    document.getElementsByClassName("pic")[0].src = "images/a.jpg";
                    flag = true;
                }
                
            }
        }
    </script>
</head>
<body>
    <!-- 设置按钮 -->
    <a id="btn" href="javascript:void(0)">切换图片</a>  
    <div>
        <img src="images/a.jpg" alt="" class="pic">
    </div>
</body>
</html>

点击切换图片（按钮）即可切换
在这里插入图片描述

属性操作

非表单元素的属性

href、title、id、src、className（对应class属性）

innnerHTML 和 innerText

innerHTML和innerText 区别

在获取值的时候：
- InnerHTML:将元素中的所有内容全部原样取出。可以获取文本及其其中所包含的其他的html元素及其内容
- innerText：获取其中的所有的文本内容对于html标签不会获取
在设置值的时候：
- InnerHTML：如果赋予的值包含HTML标签则将被浏览器解析，显示为html标签的解析之后的内容
- innerText 赋予的值均被当作文本直接输出

即 innerHTML 在获取值与设置值时，会对 html 文本进行编译与解析；innerText 则完全按照文本输出。注意字母大小写格式。

    <script type="text/javascript">
        window.onload = function(){
            // name 获取元素
            var divs = document.getElementsByTagName("div");
            console.log(divs[0].innerHTML);
            console.log(divs[0].innerText);
        }
    </script>

<body>
    <div>
        id 选择器的使用
        <div>
            子标签
        </div>
        <a href="#">百度</a>
    </div>
</body>

在这里插入图片描述

表单元素属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性

案例1：检验输入的用户名是否为3 ~ 6位，密码是否为6 ~ 8 位，若不满足将边框颜色设置为红色，并适当加粗。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            // 给按钮绑定点击事件
            document.getElementById("confirm").onclick = function(){
                // 检验输入的用户名是否为3 ~ 6位，密码是否为6 ~ 8 位，
                // 若不满足将边框颜色设置为红色，并适当加粗。
                var user = document.getElementById("user").value;
                var psw = document.getElementById("psw").value;
                if(user.length < 3 || user.length > 6){
                    document.getElementById("user").style.border="3px solid red";
                    document.getElementById("usernamemsg").innerText = " 用户名的长度必须是3-6位";
                }else{
                    //如果用户名格式正确，将格式还原，提示文字还原
                    document.getElementById("user").style.border="";
                    document.getElementById("usernamemsg").innerText = "";
                }
                if(psw.length < 6 || psw.length > 8){
                    document.getElementById("psw").style.border="3px solid red";
                    document.getElementById("pswmsg").innerText = " 用户名的长度必须是6-8位";
                }else{
                    //如果用户名格式正确，将格式还原，提示文字还原
                    document.getElementById("psw").style.border="";
                    document.getElementById("pswmsg").innerText = "";
                }
            }
        }
    </script>
</head>
<body>
    <form action="javascript:void(0)"></form>
    用户名：<input type="text" name="username" id="user"><span id="usernamemsg"></span><br/><br/>
    密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="psw"><span id="pswmsg"></span>
    <br><br/>
    <input type="button" value="确认" id="confirm">
</body>
</html>

在这里插入图片描述

案例2：全选与反选

这里是引用

自定义属性操作

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

使用 style 设置的样式显示在标签行

类名操作

修改标签的 className 属性相当于直接修改标签的类名

// 修改className属性
选择到的元素.className = "新的className"

创建元素的方式

document.write()
document.write('新设置的内容<p>标签也可以生成</p>'); 

innerHTML
var box = document.getElementById('box'); box.innerHTML = '新内容<p>新标签</p>'; 

document.createElement()
var div = document.createElement('div'); document.body.appendChild(div);

性能问题

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
可以借助字符串或数组的方式进行替换，再设置给innerHTML
优化后与document.createElement性能相近

节点层级

在这里插入图片描述

childNodes和children的区别:

childNodes获取的是子节点，children获取的是子元素
nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

BOM

JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。

代码嵌入网页的方法

<script>元素直接嵌入代码。
<script>标签加载外部脚本
事件属性
URL 协议

script 元素嵌入代码

<script> var x = 1 + 5; console.log(x); </script>

script 元素加载外部脚本

<script>src="https://www.example.com/script.js"></script>

如果脚本文件使用了非英语字符，还应该注明字符的编码。

<script charset="utf-8" src="https://www.example.com/script.js"></script>

所加载的脚本必须是纯的 JavaScript 代码，不能有HTML代码和<script>标签。

加载外部脚本和直接添加代码块，这两种方法不能混用。下面代码的console.log语句直接被忽略。

<script charset="utf-8" src="example.js"> 
console.log('Hello World!'); </script>

事件属性

网页元素的事件属性（比如onclick和onmouseover），可以写入 JavaScript 代码。当指定事件发生时，就会调用这些代码。

<button id="myBtn" onclick="console.log(this.id)">点击</button>

上面的事件属性代码只有一个语句。如果有多个语句，使用分号分隔即可。

URL 协议

URL 支持 javascript: 协议，即在 URL 的位置写入代码，使用这个 URL 的时候就会执行 JavaScript 代码。

<a href="javascript:console.log('Hello')">点击</a>

在这里插入图片描述

如果 JavaScript 代码返回一个字符串，浏览器就会新建一个文档，展示这个字符串的内容，原有文档的内容都会消失。

<a href="javascript: new Date().toLocaleTimeString();">点击</a

在这里插入图片描述

上面代码中，用户点击链接以后，会打开一个新文档，里面有当前时间。

如果返回的不是字符串，那么浏览器不会新建文档，也不会跳转。

<a href="javascript: void new Date().toLocaleTimeString();">点击</a>
<a href="javascript: new Date().toLocaleTimeString();void 0;">点击</a>

defer 属性

为了解决脚本文件下载阻塞网页渲染的问题，一个方法是对 <script> 元素加入 defer 属性。它的作用是延迟脚本的执行，等到 DOM 加载生成后，再执行脚本。

<script src="a.js" defer></script>
<script src="b.js" defer></script>

上面代码中，只有等到 DOM 加载完成后，才会执行 a.js 和 b.js。

defer属性的运行流程如下：

浏览器开始解析 HTML 网页。
解析过程中，发现带有defer属性的<script>元素。
浏览器继续往下解析 HTML 网页，同时并行下载<script>元素加载的外部脚本。
浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。

async 属性

解决“阻塞效应”的另一个方法是对

<script src="a.js" async></script>
<script src="b.js" async></script>

async 属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。

运行流程：

浏览器开始解析 HTML 网页。
解析过程中，发现带有 async 属性的 script 标签。
浏览器继续往下解析 HTML 网页，同时并行下载<script>标签中的外部脚本。
脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。
脚本执行完毕，浏览器恢复解析 HTML 网页。

浏览器的组成

浏览器的核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）。

渲染引擎

作用：将网页代码渲染为用户视觉可以感知的平面文档

不同的浏览器有不同的渲染引擎：

Firefox：Gecko 引擎
Safari：WebKit 引擎
Chrome：Blink 引擎
IE: Trident 引擎
Edge: EdgeHTML 引擎

渲染引擎处理网页，通常分成四个阶段：

解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
布局：计算出渲染树的布局（layout）。
绘制：将渲染树绘制到屏幕。

JavaScript 引擎

主要作用：读取网页中的 JavaScript 代码，对其处理后运行。

JavaScript 是一种解释型语言，也就是说，它不需要编译，由解释器实时运行。

这样的好处是运行和修改都比较方便，刷新页面就可以重新解释；缺点是每次运行都要调用解释器，系统开销较大，运行速度慢于编译型语言。

为了提高运行速度，目前的浏览器都将 JavaScript 进行一定程度的编译，生成类似字节码（bytecode）的中间代码，以提高运行速度。

逐行解释将字节码转为机器码，是很低效的。为了提高运行速度，现代浏览器改为采用“即时编译”（Just In Time compiler，缩写 JIT），即字节码只在运行时编译，用到哪一行就编译哪一行，并且把编译结果缓存（inline cache）。

通常，一个程序被经常用到的，只是其中一小部分代码，有了缓存的编译结果，整个程序的运行速度就会显著提升。

字节码不能直接运行，而是运行在一个虚拟机（Virtual Machine）之上，一般也把虚拟机称为 JavaScript 引擎。

并非所有的 JavaScript 虚拟机运行时都有字节码，有的 JavaScript 虚拟机基于源码，即只要有可能，就通过 JIT（just in time）编译器直接把源码编译成机器码运行，省略字节码步骤。这一点与其他采用虚拟机（比如 Java）的语言不尽相同。

这样做的目的，是为了尽可能地优化代码、提高性能。

目前最常见的一些 JavaScript 虚拟机：

Chakra (Microsoft Internet Explorer)
Nitro/JavaScript Core (Safari)
Carakan (Opera)
SpiderMonkey (Firefox)
V8 (Chrome, Chromium)

window 对象

概述

浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。

 <script type="text/javascript">
    a = 10;//变量未声明 但是可以直接使用 此时的变量就类似于
    window.a = 20;
    console.log(a);
  </script>

位置大小属性

window.screenX，window.screenY
返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读
window.innerHeight，window.innerWidth
返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。
用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因此可见部分（视口）就变小了。
注意，这两个属性值包括滚动条的高度和宽度。
window.outerHeight，window.outerWidth
返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。
window.scrollX，window.scrollY
window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。
注意，这两个属性的返回值不是整数，而是双精度浮点数。如果页面没有滚动，它们的值就是0。
举例来说，如果用户向下拉动了垂直滚动条75像素，那么window.scrollY就是75左右。用户水平向右拉动水平滚动条200像素，window.scrollX就是200左右。
window.pageXOffset，window.pageYOffset
是window.scrollX和window.scrollY别名。

    <script type="text/javascript">
        // 返回(当前可以看到的窗口)宽度，高度，可缩放
        console.log(window.innerHeight + " " + window.innerWidth);
        // 返回宽度，高度
        console.log(window.screenX + " " + window.screenY);
    </script>

在这里插入图片描述

组件属性

组件属性返回浏览器的组件对象。这样的属性有下面几个：

window.locationbar：地址栏对象
window.menubar：菜单栏对象
window.scrollbars：窗口的滚动条对象
window.toolbar：工具栏对象
window.statusbar：状态栏对象
window.personalbar：用户安装的个人工具栏对象

    <script type="text/javascript">
        // 地址栏对象
        console.log(window.locationbar.visible);
        // 菜单栏对象
        console.log(window.menubar.visible);
        // 窗口的滚动条对象
        console.log(window.scrollbars.visible);
        // 工具栏对象
        console.log(window.toolbar.visible);
    </script>

在这里插入图片描述

全局对象属性

全局对象属性指向一些浏览器原生的全局对象。

window.document：
指向document对象。
注意，这个属性有同源限制。只有来自同源的脚本才能读取这个属性。
window.location：
指向Location对象，用于获取当前窗口的 URL 信息。它等同于document.location属性
window.navigator：
指向Navigator对象，用于获取环境信息
window.history：
指向History对象，表示浏览器的浏览历史
window.localStorage：
指向本地储存的 localStorage 数据
window.sessionStorage：
指向本地储存的 sessionStorage 数据
window.console：
指向console对象，用于操作控制台
window.screen：
指向Screen对象，表示屏幕信息

    <script type="text/javascript">
        console.log(window.location);
        console.log(window.navigator);
        console.log(window.Screen);
    </script>

在这里插入图片描述

window 对象的方法

window.alert()、window.prompt()、window.confirm()都是浏览器与用户互动的全局方法。它们会弹出不同的对话框，要求用户做出回应。注意，这三个方法弹出的对话框，都是浏览器统一规定的式样，无法定制。

window.alert()
window.alert()方法弹出的对话框，只有一个“确定”按钮，往往用来通知用户某些信息。
window.prompt()
window.prompt()方法弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。
window.confirm()
window.confirm()方法弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，往往用来征询用户是否同意。

    <script type="text/javascript">
        var input = window.prompt();
        console.log(input);
    </script>

在这里插入图片描述

    <script type="text/javascript">
        var input = window.confirm("确定删除吗？")
        console.log(input);  //返回一个false类型
    </script>

在这里插入图片描述

窗口的打开与关闭

window.open()

window.open方法用于新建另一个浏览器窗口，类似于浏览器菜单的新建窗口选项。

它会返回新窗口的引用，如果无法新建窗口，则返回null。

var popup = window.open('somefile.html');

上面代码会让浏览器弹出一个新建窗口，网址是当前域名下的somefile.html。

open方法一共可以接受三个参数：window.open(url, windowName, [windowFeatures])

url：字符串，表示新窗口的网址。如果省略，默认网址就是about:blank。
windowName：字符串，表示新窗口的名字。如果该名字的窗口已经存在，则占用该窗口，不再新建窗口。如果省略，就默认使用_blank，表示新建一个没有名字的窗口。
另外还有几个预设值，_self表示当前窗口，_top表示顶层窗口，_parent表示上一层窗口。
windowFeatures：字符串，内容为逗号分隔的键值对（详见下文），表示新窗口的参数，比如有没有提示栏、工具条等等。
如果省略，则默认打开一个完整 UI 的新窗口。如果新建的是一个已经存在的窗口，则该参数不起作用，浏览器沿用以前窗口的参数

var popup = window.open( 'somepage.html', 'DefinitionsWindows', 'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes' );

window.close()
window.close方法用于关闭当前窗口，一般只用来关闭 window.open 方法新建的窗口
popup.close()
该方法只对顶层窗口有效，iframe框架之中的窗口使用该方法无效。
window.stop()
window.stop()方法完全等同于单击浏览器的停止按钮，会停止加载图像、视频等正在或等待加载的对象。

    <script type="text/javascript">
        function op(){
            window.open("yilanwang.html");
            window.close("window.html")
        }
    </script>

<body>
    <div>
        <input type="button" value="百度" onclick="op()">
    </div>
</body>

在这里插入图片描述
点击按钮即可打开新页面

事件

load事件：事件发生在文档在浏览器窗口加载完毕时。
window.onload属性：可以指定这个事件的回调函数。
回调函数：执行结束之后再执行的函数称为回调函数

    <script type="text/javascript">
        window.onload = function(){
            var element = document.getElementsByClassName("p");
            for(var i = 0 ; i < element.length ; i++){
                console.log(element[i]);
            }
        }
    </script>

<body>
    <div class="p">
        <span>代码块</span>
        <p>aaa</p>
    </div>
</body>

在这里插入图片描述

navigator 对象的属性

navigator.userAgent

返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息。

由于有种种缺点，现在一般不再通过它识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的 JavaScript 功能。

通过 userAgent 可以大致准确地识别手机浏览器，方法就是测试是否包含mobi字符串。

	var ua = navigator.userAgent.toLowerCase();
    if (/mobi/i.test(ua)) {
      console.log("手机浏览器")
    } else {
      console.log("PC浏览器")
    }

navigator.plugins

返回一个类似数组的对象，成员是 Plugin 实例对象，表示浏览器安装的插件，比如 Flash、ActiveX 等。

    <script type="text/javascript">
        var pluginsLength = navigator.plugins.length; 
        for (var i = 0; i < pluginsLength; i++) { 
            console.log(navigator.plugins[i].name); 
            console.log(navigator.plugins[i].filename); 
            console.log(navigator.plugins[i].description); 
            console.log(navigator.plugins[i].version); 
            console.log("");
        } 
    </script>

在这里插入图片描述

navigator.platform

返回用户的操作系统信息，比如 MacIntel 、Win32、Linux x86_64等。

    <script type="text/javascript">
        console.log(navigator.platform)
    </script>

在这里插入图片描述

navigator.onLine

返回一个布尔值，表示用户当前在线还是离线（浏览器断线）。

navigator.onLine // true

有时，浏览器可以连接局域网，但是局域网不能连通外网。这时，有的浏览器的 onLine 属性会返回true，所以不能认为只要为 true，用户就一定能访问互联网。不过，如果是false，可以断定用户一定离线。

用户变成在线会触发online事件，变成离线会触发offline事件，可以通过window.ononline和window.onoffline指定这两个事件的回调函数。

window.addEventListener('offline', function(e) { console.log('offline'); }); window.addEventListener('online', function(e) { console.log('online'); });

navigator.language，navigator.languages

Navigator.language属性返回一个字符串，表示浏览器的首选语言。该属性只读。

navigator.language // zh-CN

Navigator.languages属性返回一个数组，表示用户可以接受的语言。Navigator.language总是这个数组的第一个成员。HTTP 请求头信息的 Accept-Language字段，就来自这个数组。

    <script type="text/javascript">
        console.log(navigator.languages)
    </script>

在这里插入图片描述

如果这个属性发生变化，就会在window对象上触发languagechange事件。

navigator.cookieEnabled

返回一个布尔值，表示浏览器的 Cookie 功能是否打开。

navigator.cookieEnabled // true

注意，这个属性反映的是浏览器总的特性，与是否储存某个具体的网站的 Cookie 无关。用户可以设置某个网站不得储存 Cookie，这时cookieEnabled返回的还是true

screen 对象

表示当前窗口所在的屏幕，提供显示设备的信息。window.screen属性指向这个对象。

    <script type="text/javascript">
        console.log(window.screen)
    </script>

在这里插入图片描述
对象的属性：

screen.height：浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
screen.width：浏览器窗口所在的屏幕的宽度（单位像素）。
screen.availHeight：浏览器窗口可用的屏幕高度（单位像素）。因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。
screen.availWidth：浏览器窗口可用的屏幕宽度（单位像素）。
screen.pixelDepth：整数，表示屏幕的色彩位数，比如24表示屏幕提供24位色彩。
screen.colorDepth：Screen.pixelDepth的别名。严格地说，colorDepth 表示应用程序的颜色深度，pixelDepth 表示屏幕的颜色深度，绝大多数情况下，它们都是同一件事。
Screen.orientation：返回一个对象，表示屏幕的方向。该对象的type属性是一个字符串，表示屏幕的具体方向，landscape-primary表示横放，landscape-secondary表示颠倒的横放，portrait-primary表示竖放，portrait-secondary表示颠倒的竖放。

使用（通过检验不同的分辨库，将用户导向不同的网站）：

	if ((screen.width <= 800) && (screen.height <= 600)) {
		window.location.replace('small.html'); 
	} else { 		
		window.location.replace('wide.html'); 
	}

这篇关于三十三、JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！