JavaScript简单快速入门

港控/mmm° 2022-12-14 12:29 167阅读 0赞

> “ 别害怕顾虑，想到就去做，这世界就是这样，当你把不敢去实现梦想的时候梦想就会离你越来越远，当你勇敢地去追梦的时候，全世界都会来帮你。”你好，我是梦阳辰！未来我陪你一起成长！

# 01.变量 #

**定义**：变量是存储信息的“容器”，是**内存单元**。

**1.格式：**

var pi;//声明变量
    var x =5;//赋值

**2.注意**：如果重新声明变量，该变量的值不会丢失。

var name = "MengYangChen";
    var name;

name的值依然是MengYangChen

**3.动态类型**  
变量的类型，为赋值语句后面数据的类型。

var x;//如果没有赋值默认为undefined
    var x =3;
    var = "MengYangChen";

**4.变量的作用域：**  
再javaScript中，对象和函数同样也是变量。

**4.1局部变量**：变量在函数内声明，变量为局部作用域，只能在函数内部访问。

function myFunction(){ 
    	var age = 20;
    }

**注意**：如果在函数内没有声明（即没有使用var关键字），改变量为全局变量。  
**4.2全局变量**  
在函数体外定义，即为全局变量。全局变量具有**全局作用域**，网页中所有脚本和汉数据可以使用。

**4.3JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。**

原因：变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

x = 5; // 变量 x 设置为 5
    
    elem = document.getElementById("demo"); // 查找元素
    elem.innerHTML = x;                     // 在元素中显示 x
    
    var x; // 声明 x

**注意：JavaScript 只有声明的变量会提升，初始化的不会。**

var x = 5; // 初始化 x
    
    elem = document.getElementById("demo"); // 查找元素
    elem.innerHTML = x + " " + y;           // 显示 x 和 y
    
    var y = 7; // 初始化 y

结果：

x 为：5，y 为：undefined

y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

**5.变量的生命周期**  
开始：声明时候的初始化。

结束：  
局部变量在函数执行完毕销毁。

全局变量在页面关闭后销毁。

**6.JavaScript 严格模式（use strict)**  
“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。

“use strict” 指令只允许出现在脚本或函数的开头。

严格模式下你不能使用未声明的变量。

"use strict";
    x = 3.14;       // 报错 (x 未定义)

不允许删除变量或对象。

"use strict";
    var x = 3.14;
    delete x;

不允许删除函数。

"use strict";
    function x(p1, p2) { };
    delete x;                // 报错

不允许变量重名。

"use strict";
    function x(p1, p1) { };   // 报错

不允许使用8进制，转义字符等。  
**为什么使用严格模式?**  
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为.

严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

# 02.数据类型 #

**1.javaScript数据类型分为：**  
**值类型(基本类型)/原始数据类型**：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

**引用数据类型**：对象(Object)、数组(Array)、函数(Function)。

**2.String(字符串)**  
字符串可以使用**单引号**或**双引号**。  
比较字符串是否相等用双等号。

**2.1字符串对象**  
第一种：var s=“sag”;（小String，属于String类型）

第二种：var a2= new String(“ab”);（大String，属于Object类型）

Sting是一个内置的类，可以直接使用。

**3.Number(数字）**  
javaScript只有一种数字类型，可以带小数点，也可以不带。很大的数据可以用科学计数法表示。

var x = 33;
    var x = 33.00;
    
    var y = 12e6;
    var y = 12e-6;

**3.1注意**：NaN，表示Not a Number不是一个数字，但是属于Number类型。

Infinity，表示无穷大。

0,-1,123,…小数，复数，无穷大都是属于number类型。

当除数为0时，结果为无穷大。

**isNaN（数据）**：结果为true表示不是一个数字。

**parseInt()函数**：可以将字符串自动转换成数字。保留Int。

**parseFloat()函数**：将字符串转换成数字。

**Math.Ceil()函数**：向上取整。2.1会变为3。

**4.Boolean数据类型**  
布尔（逻辑）只能有两个值：true 或 false。

**注意**：当某个地方一定是boolean类型时，会自动转换成boolean类型。例如if后面的括号。

NaN,0,"",null,undefined会自动转换成false。

**5.Undefined 和 Null**  
Undefined 这个值表示变量不含有值。  
可以通过将变量的值设置为 null 来清空变量。

**6.typeof动态的求出变量的数据类型**

alert(typeof null);//Object
    alert(typeof NaN);//number
    alert(typeof undefined);//undefined

**7.用”new“声明变量类型**

var x = new Stirng;
    var y = new Number;
    var person = new Object;
    var flag = new Boolean;

**8.JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。**

# 03.输出语句 #

javaScript可以通过不同的方式输出数据：

1.使用window.alert（）弹出警告框，window可以省略。

2.使用document.write()方法将内容写到HTML文档中。

3.使用innerHTML写入到HTML元素中。

4.使用console.log()写入到浏览器控制台，console可以省略。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>输出语句</title>
    </head>
    <body>
    <p id  = "one" ></p>
        <script>
            var x = prompt("请输入一个数据：");
            var y = 3.1;
            alert(x);
            document.write(x+y);
            var temp = document.getElementById("one");
            temp.innerHTML=x+y;
            console.log(x+y);
        </script>
    </body>
    </html>

**输入数据：**  
可以用prompt(”请输入你的姓名：“)在页面弹出一个输出框。数据为字符串类型。

# 04.数组 #

**1.javaScript数组为一个无限大的容器，数组类型可以是不一致。**

**2.创建方式**：

var nums = new Array();
    news[0] =  11;
    news[1] = "22";
    
    //或者
    var computerBrand = new ("ASUS","DELL");

**3.数组的遍历**  
3.1for循环遍历

3.2for/in循环遍历

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数组的遍历</title>
    </head>
    <body>
        <script>
            var arr = new Array();
            arr[0]="MengYangChen";
            arr[1]="20";
            arr[2]="boy";
            for(var i = 0;i<arr.length;i++){ 
                document.write(arr[i]+"<br>");
            }
            
            for(var i in arr){ 
                document.write(arr[i]+"<br>");
            }
        </script>
    </body>
    </html>

# 05.函数 #

JavaScript 函数语法

**1.函数就是包裹在花括号中的代码块，前面使用了关键词 function：**

function functionname()
    { 
        // 执行代码
    }
    或者
    functionname=function{ 
    	//执行代码
    }

**2.具有参数的函数**

function myFunction(var1,var2)
    { 
      //代码
    }

**3.具有返回值的参数**

function myFunction()
    { 
        var x=5;
        return x;
    }
    document.getElementById("demo").innerHTML=myFunction();

function myFunction(a,b)
    { 
        return a*b;
    }
     
    document.getElementById("demo").innerHTML=myFunction(4,3);

# 06.对象 #

**1.avaScript 中的所有事物都是对象：字符串、数值、数组、函数…。**

此外，JavaScript 允许自定义对象。

**对象也是一个变量。对象可以包含多个值。**

var computer ={ brand:"ASUS",color:"silveryWhite",price:"13"};

**2.可以使用字面量来定义和创建 JavaScript 对象**:

var person ={ 
    firstName : "YangChen",
    lastName :"Meng",
    age: 20,
    gender : "men"
    };

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。  
**3.访问对象属性：**

person.lastName;
    
    person["lastName"];

**4.对象方法**  
4.1创建对象方法:

methodName : function() { 
        // 代码 
    }

案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>对象</title>
    </head>
    <body>
    <span id = "demo"></span>
        <script>
            var person ={ 
                firstName :"YangChen",
                lastName :"Meng",
                age: 20,
                gender : "men",
                fullName : function()
                { 
                    return this.firstName + " " + this.lastName;
                }
            };
            document.getElementById("demo").innerHTML=person.fullName();
        </script>
    </body>
    </html>

**5.访问对象的方法**

objectName.methodName();

**6.创建JavaScript对象**  
**新建对象有两种不同的方法：**

**6.1使用 Object 定义并创建对象的实例。**  
在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。

Object 构造函数创建一个对象包装器。

Object 构造函数，会根据给定的参数创建对象，具体有以下情况：

如果给定值是 null 或 undefined，将会创建并返回一个空对象。

如果传进去的是一个基本类型的值，则会构造其包装类型的对象。

如果传进去的是引用类型的值，仍然会返回这个值，经他们复制的变量保有和源对象相同的引用地址。

当以非构造函数形式被调用时，Object 的行为等同于 new Object()。

**6.2使用函数来定义对象，然后创建新的对象实例。（对象构造器）**

**有了对象构造器，就可以创建新的对象：**

var myFather=new person("John","Doe",50,"blue");
    var myMother=new person("Sally","Rally",48,"green");

# 07.事件 #

**1.HTML 事件是发生在 HTML 元素上的事情。**

**2.在事件触发时 JavaScript 可以执行一些代码。**

<button onclick="displayDate()">点这里</button>
    <script>
    function displayDate(){ 
    	document.getElementById("demo").innerHTML=Date();
    }
    </script>
    <p id="demo"></p>

**3.常见的HTML事件**  
下面是一些常见的HTML事件的列表:

onchange	HTML 元素改变,下拉列表选中改变，或文本框内容改变。
    
    onclick	用户点击 HTML 元素
    
    onmouseover	用户在一个HTML元素上移动鼠标
    
    onmouseout	用户从一个HTML元素上移开鼠标
    
    onkeydown	用户按下键盘按键
    
    onload	浏览器已完成页面的加载

在js中，doucument.getElementById(‘ 标签的id’)；发生一个交互事件时，js和html是分离的，获取标签对象。

# 08.DOM #

**1.文档对象模型**(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。

w3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

**DOM树**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center]  
**文档**:一个页面就是一个文档，DOM中使用document表示。

**元素**:页面中的所有标签都是元素，DOM中使用element表示。

**节点**︰网页中的所有内容都是节点（标签、属性、文本、注释等)，DOM中使用node表示。  
**2.获取元素**

**2.1根据ID获取**

使用getElementById()方法可以获取带有ID的元素对象，找不到返回null。

console.dir()方法：

打印我们返回元素的对象，更好的查看里面的属性和方法。

**2.2根据标签名获取**  
使用getElementsByTagName()方法，可以返回带有指定标签名的**对象的集合**。

得到的元素是动态的。

如果页面中只有一个元素，返回的还是一个伪数组。

如果没有该元素返回空的伪数组。

**可以指定父元素**，获取父元素内部所有指定标签名的子元素。

注意：父元素必须是单个对象(必须指明是哪一个元素对象），获取的时候不包括父元素自己。即先获取父元素，再根据父元素获取，子元素。

如：

var ol = document.getElementsByTagName("ol");
    console.log(ol[0].getElementsByTagName("li");

**根据类名获取元素**

document.getElementsByClassName(“box”);  
返回一个伪数组。

**根据指定选择器返回第一个元素对象**

document.querySelector(“选择器”);

**根据指定选择器返回集合**  
document.querySelectorAll(“选择器”);

var b = document.querySelectorAll(".two");
        b[0].innerHTML="常";
        b[1].innerHTML="有意思！";

**获取body和html标签**

document.body;
    
    document.documentElement;//html

或则通过添加id,class…。

## 事件 ##

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

**简单理解**︰触发—响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

**事件有三部分组成：（也称事件三要素）**  
**事件源**

<button id="btn">ff</button>
    var btn = document.getElementById("btn);

**事件类型**  
如何触发，什么事件，比如鼠标点击（onclick)还是鼠标经过，还是键盘按下。

**事件处理程序：**

通过函数完成

执行事件的步骤。

1.获取事件源。

2.注册事件（绑定事件）。

btn.onclick=function(){ 
    
    }

3.添加事件处理程序。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 1]  
**操作元素**

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

**改变元素的内容**  
innerTest和innerHTML

innerTest（非标准）不识别HTML的标签，而innerHTML识别。

可以获取里面的内容,innerTest会去除空格和换行，而innerHTML保留空格和换行。

**常用元素的属性操作**

先获取标签元素对象，然后通过对象.属性来修改属性。

**分时显示不同图片，显示不同的问候语。**  
1.获取当前时间。

**表单元素的属性操作**  
利用DOM可以操作如下表单元素的属性：  
type,value,checked,selected,disabled

<body>
    <button>点击我</button>
    <input type="text" value="输入内容">
        <script>
        //1.获取元素
            var btn  = document.querySelector("button");
            var input = document.querySelector("input");
            //注册事件
            btn.onclick = function () { 
                input.value = '他点击我了';
                //btn.disabled=true;//禁用按钮
                this.disabled = true;//指向当前对象，事件函数的调用者
            }
        </script>
    </body>

**点击按钮密码框切换为文本框，并可以查看密码明文**  
1.思路将密码框改为文本框

<body>
    <div class="box">
        <label for="pwd">
            <img src="#" alt="" id="eye"/>
        </label>
        <input type="password" name="" id="pwd">
    </div>
        <script>
            var eye = document.getElementById('eye');
            var pwd = document.getElementById('pwd');
            //注册事件
            var flag =0;
            eye.onclick = function () { 
                if(flag = 0 ){ 
                    pwd.type= "text";
                    this.src="#1";
                    flag = 1;
                } else { 
                    pwd.type = 'password';
                    this.src="#";
                    flag = 0 ;
                }
    
            }
        </script>
    </body>

**样式属性操作**  
我们可以通过js修改元素的大小，颜色，位置样式  
**1.element.style 行内样式操作**

js修改style样式操作，产生的是行内样式，css权重比较高。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>样式属性</title>
        <style type="text/css">
            div{ 
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div></div>
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2.注册事件，处理程序
        div.onclick = function () { 
            this.style.backgroundColor="blue";
            this.style.width = "300px";
        }
    </script>
    </body>

**2.element.className 类名样式操作**

通过写好样式，然后通过获取元素，在响应事件后，将元素的类名赋我们事先绑定好的样式来改变元素的样式。

.change{ 
    ......
    }
    var test  = document.querySelector('div');
    test.onclick = function(){ 
    this.className = 'change';
    }

如果样式修改较多，可以采用这种方式。

原先的类名会被覆盖。

如果想要保留原先的类名，可以采用以下方式：

this.className = 'first change';

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 2]  
**获取自定义属性值**  
1.element.属性 获取属性值  
获取内置属性值（元素本身自带的属性）

2.element.getAttribute('属性‘）；  
可以获取自定义属性，程序员自定义的属性

**3.设置属性值**

element.属性 = '值';

element.setAttribute('属性','值');//主要用于自定义属性

**4.移除属性**

element.removeAttribute('属性');

**H5的自定义属性**  
自定义属性的目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute('属性’）获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

<div getTime="20"><div>
    var di = document.querySelector('div');

**如何区分是自定义属性还是内置属性呢？**

H5规定**自定义属性data-开头**做为属性名并且赋值。  
比如：

或者使用Js设置  
element.setAttribute(‘data-index’,2);

**H5获取自定义属性的方法**

1.element.getAttribute('data-indexd data-list-name=andy');
    
    2.H5新增element.dataset.index 或者element.dataset['index'] ie11才开始支持。
    
    
    dataset是一个集合里面存放了所有以data开头的自定义属性。
    
    如果自定义属性里面有多个-连接的单词，我们获取的时候才去驼峰命名法
    
    ```java
    div.getAtrribute("data-list-name");
    
    div.dataset.listName;

## 节点操作 ##

**为什么学节点操作？**  
获取元素通常使用两种方式：

**1.利用DOM提供的方法获取元素**  
document.getElementById();  
document.getElementByTagName();  
document.querySelector();

**缺点**:逻辑性不强，繁琐。

**2.利用节点的层次关系获取元素（父子兄弟关系）**  
逻辑性强，但是兼容性差

一般节点至少拥有nodeType(节点类型），nodeName(节点名称）和nodeValue(节点值）这三个基本属性。

元素节点nodeType 为1

属性节点nodeType为2

文本节点nodeType 为3(文本节点包含文字、空格、换行等)

一般获取元素节点。

**3.节点层级**  
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

**父级节点**  
得到与元素最近的节点。找不到父节点则返回为null。

node.parentNode;

**子节点**  
得到所有的子节点，包括元素节点，文本节点，等

parentNode.ChildNodes(标准)

parentNode.ChildNodes返回包含指定节点的子节点的集合，改集合为即时更新的集合。

如果只想获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用。

var ul =document. queryselector ( 'ul');
    for(var i = 0; i < ul.childNodes.length; i++){ 
    if (ul.childNodes[i].nodeType -- 1){ 
    // ul.childNodes[i]是元素节点
    console.log(ul.childNodes[i]);
    }

为了解决这个问题还有一种非标准的用法。

parentNode.children(非标准）

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(这个是我们重点掌握的)。

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。  
**第一个节点和最后一个节点**

父节点.firstChild
    父节点.lastChild

**第一个子元素和最后一个元素节点**

父节点.firstElementChild
    父节点.LastElementChild

**4.三种动态创建元素的区别**  
4.1document.write()

document.write("<div>fa<div>"):

会导致页面重绘:document.write是直接将内容写入页面的内容流，但是文档流执行完毕，再使用该语句，则它会导致页面全部重绘。

4.2 element.innerHTML

element.innerHTML="<a href="#">dfa</a>";

4.3 document.createElement();

var a = document.createElement();
    element.appendChild(a);

innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘.

innerHTML创建多个元素效率更高(不要拼接字符串，采取数组形式拼接），结构稍微复杂  
.  
createElement(创建多个元素效率稍低一点点，但是结构更清晰

# 09.BOM #

**什么是BOM对象？**  
Brower Object Model,指的是浏览器对象模型。

作用：操作浏览器窗口及窗口上的空间，实现用户和页面的动态交互。如返回，前进，刷新，地址栏，关闭窗口，缩放窗口等。

浏览器对象：指的是浏览器提供的一系列内置对象的统称。

BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 3]  
**document（文档对象)**﹔也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。

**history(历史对象)**﹔主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。

**location(地址栏对象）**﹔用于获取当前浏览器中URL地址栏内的相关数据。navigator(浏览器对象）﹔用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。

**screen(屏幕对象）**:可获取与屏幕相关的数据，例如屏幕的分辨率等。

## window对象 ##

window对象是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。

**window对象的属性和方法：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 7]  
setTimeout()方法在执行一次后即停止了操作;setlnterval()方法一旦开始执行，在不加干涉的情况下，间歇调用将会一直执行到页面关闭为止。

若要在定时器启动后，取消该操作，可以将setTimeout()的返回值（定时器ID）传递给clearTimeout()方法;或将setlnterval()的返回值传递给clearIntexal()方法。

## location对象 ##

location对象提供的用于改变URL地址的方法，所有主流的浏览器都支持。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 8]  
利用location.href可以跳转到指定的url地址中。

## history对象 ##

history对象可对用户在浏览器中访问过的URL历史记录进行操作。

出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。  
![在这里插入图片描述][20201126000804198.png_pic_center]

## navigator对象 ##

navigator对象提供了有关浏览器的信息，主流浏览器中存在的属性和方法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 10]

## screen对象 ##

screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 11]

> If your happiness depends on what somebody else does, I guess you do have a problem.　  
> 如果你的快乐与否取决于别人做了什么，我想，你真的有点问题。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/25cddb5bfacd4239928245a679a12947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/99558a884281473e83c20a9b05de3739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/3a122f61b1b14a808bc0da9ad3949cc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/d8a4ab8869d14ddca90b05abbb5d1eec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/6dec30bef8284853b68ba29fbc54c570.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/ff87ceb4dcf342ce972522c6c54913fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/84ec2e1990a14d53beeac8e919c246fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/1c206b7243394d9c8908e6ee3d6f2b45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/40b7dcf121934c628093765af292d640.png
[20201126000804198.png_pic_center]: /images/20221123/afe958404de7414a8d3d2b7e9a8c1272.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/230d6265fc1f49f9b05038a54e637450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/c69019df844f4d3f85977914cffe982f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/13af1e3e02ea415c802f5adbbe1b502c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWh1YW5f_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/813f2d91310841ce905c5e7cb8e5115d.png