　　早就想学习JS了，正好又有课设要做，就学习了JS，但是看着网课学习的东西我觉得并不是很全面，但是基本的学到了，还需要继续深入学习，所以就把学习到的JS先整理下来，后期会慢慢整理学到的 HTML5 和 CSS。

目录

一、JS实现、变量

二、JS异常捕获、事件

三、DOM操作HTML、CSS、EventListener

四、JS事件详解、事件流、事件处理、事件对象

五、事件对象

对象

string对象

data日期对象

Array数组对象

Math对象

六、DOM对象控制HTML

七、JS浏览器对象

Window对象

计时器对象

History对象

Location对象

screen对象

八、面向对象

九、后记

一、JS实现、变量

1. JS实现

JS用法

HTML中的脚本必须位于<script></script>标签之间
脚本可被放置在HTML页面中<body></body>和<head>部分中
JS标签

在HTML中插入JS，使用<script>标签
在<script></script>中书写代码
JS使用限制

在HTML中，不限制脚本数量
通常把脚本放置于<head>标签中，以免干扰页面内容

2. JS变量

用var来声明，例var i = 10; 后面讲解 var 和 let 区别
数据类型
1. 字符串（string）
2. 数字(number)
3. 布尔值(boolean)
4. 数组(Array)
  >声明数组的方法
  >（1）var arr[1, 3, 2, 4];
  >（2）var arr = new Array("miao", "wong");
  >（3）var arr = new Array; arr[0] = 10; arr[1] = 20; .....
5. 对象(Object)
6. 空(null)
7. 未定义
8. 可通过赋值为null的方式消除变量
var 和 let 区别
1. 全局变量：
  
  在函数外声明的变量，在JavaScript程序的任何地方都可以访问。
2. 局部变量：
  
  在函数内声明的变量的作用域是局部的，函数内使用 var 声明的变量只能在函数内部访问，如果不使用 var 则是全局变量
3. 块级作用域：
  
  使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。
4. 重新定义变量
  
  var：在块中重新声明变量，也会重新声明变量块外的变量
  let：let命令只在所在的代码块 {} 内有效
5. var 和 let 局部变量
  
  在函数体内声明的变量 var 和 let 的作用域都是局部的
6. var 和 let 全局变量
  
  在函数体外或代码块外使用 var 和 let 关键字声明的变量的作用域是全局的。
7. HTML代码中使用全局变量
  1. 在JavaScript中，全局作用域是针对JavaScript环境。
  2. 在HTML中，全局作用域是针对window对象
  3. 使用 var 关键字的全局作用域是属于window对象。var i = 10; 可以使用 window.i 访问变量。
  4. 使用let关键字声明的全局作用域变量不属于window对象。
8. 重置变量
  1. 在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量。
  2. 在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量。
  3. 在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量。
  4. let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的。
9. 变量提升
  
  var：定义的变量可以在使用后声明，也就是变量可以先使用再声明。
  let：定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。
this指针

在方法中，this表示该方法所属的对象。如果单独使用，this表示全局对象。在函数中，this表示全局对象。在函数中，在严格模式下，this是未定义的（undefined）。在事件中，this表示接收事件的元素类似 call() 和 apply() 方法可以将this引用到任何对象（详情见菜鸟教程）

二、JS异常捕获、事件

1. JS异常捕获

try 和 catch

try：在执行时进行错误，需要测试的代码块
catch：当try代码块发生错误时所执行的代码
try 和 catch 是成对出现的

1.语法

try{
	...  //异常的抛出
} catch(err){
	...  //异常的捕获与处理
}

2.实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS异常捕获</title>
	</head>
	<body>
		<button onclick="demo()">按钮</button>
		<script>
			function demo(){
				try{
					adddlert("hello");
				} catch(err){
					alert(err);
				}
			}
		</script>
	</body>
</html>

throw语句

允许创建自定义错误可以把 throw 与 try 和 catch 一起使用

实例

<!DOCTYPE html>
<html lang="en">
<head>
  		<meta charset="UTF-8">
  		<title>JS异常捕获</title>
</head>
<body>
  		<form>
      		<input id="txt" type="text">
      		<input id="btn" type="button" onclick="demo()" value="按钮">
  		</form>
  		<script>
      		function demo(){
          		try{
              		var e = document.getElementById("txt").value;
              		if(e==""){
                  		throw"请输入";
              		}
          		}catch(err){
              		alert(err);  //将throw中的内容扔到err处
          		}
      		}
  		</script>
</body>
</html>

2. JS事件

经常用到的事件

事件（都是小写）	作用
onClick	单击事件
onMouseOver	鼠标经过事件
onMouseOut	鼠标移出事件
onChange	文本内容改变事件
onSelect	文本框选中事件
onFocus	光标聚集事件
onBlur	移开光标事件
onLoad	网页加载事件
onUnLoad	网页关闭事件

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS事件</title>
</head>
<body onload="mgs()">
    <!--onclick-->
    <button onclick="demo()">按钮</button>
    <script>
        function demo(){
            alert("hello");
        }
    </script>

    <!--onMouseOver  onMouseOut-->
    <div style="width: 100px; height: 100px; background-color: cadetblue;"
         onmouseover="onOver(this)" onmouseout="onOut(this)"></div>
    <script>
        function onOver(ooj){
            ooj.innerHTML = "Hello";
        }
        function onOut(ooj){
            ooj.innerHTML = "World";
        }
    </script>

    <!--onChange-->
    <form>
        <input type="text" onchange="changeDemo1()">
    </form>
    <script>
        function changeDemo1(){
            alert("Hello, 内容改变了！");
        }
    </script>

    <!--onSelect  onfocus-->
    <form>
        <input type="text" onselect="changeDemo(this)" onfocus="changeDemo2(this)">
    </form>
    <script>
        function changeDemo(bg){
            bg.style.background="red";
        }
        function changeDemo2(bg){
            bg.style.background="blue";
        }
        function mgs(){
            alert("网页内容加载完毕");
        }
    </script>
</body>
</html>

三、DOM操作HTML、CSS、EventListener

1. DOM操作HTML

绝对不要在文档加载完成之后使用 document.write() 会覆盖整个文档

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>覆盖文档</title>
</head>
<body>
    <script>
        document.write("首先输出");
    </script>
    <p>请点击这</p>
    <br/>
    <input type="button" onclick="test()" value="调用函数"/>
    <script>
        function test(){
        	document.write("覆盖输出:");  //点击后 首先输出 则被覆盖
            document.write(Date());
        }
    </script>
</body>
</html>

寻找元素
1. 通过 id 找到HTML元素：document.getElementById("") 。
2. 通过 标签名 找到HTML元素：getElementsByTagName("") 。

改变HTML内容

使用属性 innerHTML
例：document.getElementById("").innerHTML = "" //""中跟具体内容，若是其他的，则不需""。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变HTML内容</title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

</body>
</html>

改变HTML属性

使用语法 document.getElementById("").attribute = 新属性值; 例：document.getElementById("id").href="www.baidu.com";

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS操作HTML</title>
</head>
<body>
   	<a id="aid" href="http://www.baidu.com">百度一下</a>
   	<button onclick="demo()">按钮</button>
   	<script>
       	function demo(){
           	document.getElementById("aid").href="https://www.hao123.com";
       	}
   	</script>
</body>
</html>

2. DOM操作CSS

语法

document.getElementById("").style.property=新样式
实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM操作CSS</title>
</head>
<body>
	<h1 id="id1">我的标题 1</h1>
	<button type="button" onclick="document.getElementById('id1').style.color='red'">
	点我!</button>
	
</body>
</html>

3. DOM操作EventListener

DOM EventListener 方法

addEventListener() removeEventListener()
1. addEventListener()
  
  向指定元素添加事件句柄，且不会覆盖整个文档可以向一个元素添加多个事件句柄
2. removeEventListener()
  
  移除方法添加的事件句柄
addEventListener
1. 语法
  
  element.addEventListener(event, function, useCapture); 第一个参数是事件类型（如"click"或"mousedown"）。第二个参数是事件触发后调用的函数。第三个参数是个布尔值用于描述事件是冒泡（false）还是捕获（true），该参数是可选的。
2. 注意！
  - 事件类型不要使用 "on" 前缀，例如，使用"click"，而不是"onclick"。
  - 调用函数不加括号，例如调用 mydemo() 函数，应该直接写成 mydemo。

实例

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS操作Dom EventListener</title>
</head>
<body>
	<button id="btn">按钮</button>
	<script>
   		document.getElementById("btn").addEventListener("click", function(){
       	alert("hello");
   		});
	</script>

	<button id="btnn">按钮</button>
	<script>
   		var x = document.getElementById("btnn");
   		x.addEventListener("click", hello);
   		x.addEventListener("click", world);

   		function hello(){
       		alert("Hello");
   		}
   		function world(){
       		alert("World");
   		}
	</script>
</body>
</html>

四、JS事件详解、事件流、事件处理、事件对象

1. JS事件详解

事件流

描述的是在页面中接受事件的顺序。
事件冒泡

由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）。
事件捕获

最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。
实例

将 p 元素插入到 div 元素中，用户点击 p 元素，观察哪个元素的 "click" 事件先被触发。

在冒泡中，p先再div 在捕获中，div先再p

2. JS事件处理

HTML事件处理

直接添加到HTML结构中（修改一处同时修改很多处）
DOM 0级事件处理

把一个函数赋值给一个事件处理程序属性（会被覆盖掉）例 btn1.onclick = function(){}
DOM 2级事件处理

addEventListener() 和 removeEventListener
IE事件处理程序（不同浏览器所支持的事件不同）

attachEvent detachEvent

实例

	<!DOCTYPE html>
	<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>JS事件处理</title>
	</head>
	<body>
    	<div id="div">
        	<button id="btn">按钮</button>
    	</div>
	
    <!--HTML事件处理-->
	<!--    <script>-->
	<!--        function demo(){-->
	<!--            alert("hello HTML事件处理");-->
	<!--        }-->
	<!--    </script>-->

    <!--DOM 0级事件处理-->
	<!--    <script>-->
	<!--        var btn1 = document.getElementById("btn");-->
	<!--        btn1.onclick = function(){ alert("Hello DOM 0级事件处理1");};//会被覆盖-->
	<!--        btn1.onclick = function(){ alert("Hello DOM 0级事件处理2");};-->
	<!--    </script>-->

    <!--DOM 2级事件处理-->
	<!--    <script>-->
	<!--        var btn1 = document.getElementById("btn").addEventListener("click", demo);-->
	<!--        function demo(){-->
	<!--            alert("DOM 2级事件处理程序");-->
	<!--        }-->
	<!--    </script>-->

    <!--IE事件处理程序-->
    <script>
        var btn1 = document.getElementById("btn");
        if(btn1.addEventListener){
            btn1.addEventListener("click", demo);
        }else if(btn1.attachEvent){
            btn1.attachEvent("onclick", demo);
        }else{
            btn1.onclick = demo();
        }

        function demo(){
            alert("Hello IE事件处理程序");
        }
    </script>
</body>
</html>

3. JS事件对象

事件对象

在触发DOM事件的时候都会产生一个对象
事件对象event
1. type：获取事件类型
2. target：获取事件目标
3. stopPropagation()：阻止事件冒泡
4. preventDefault()：阻止事件默认行为

实例

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS事件对象</title>
</head>
<body>
   	<div id="div">
       	<button id="btn">按钮</button>
       	<a href="http://www.baidu.com" id="aid">搜索</a>
   	</div>
   	<script>
       	document.getElementById("aid").addEventListener("click", showA);
       	document.getElementById("div").addEventListener("click", showDiv);
       	document.getElementById("btn").addEventListener("click", showType);
       	function showType(event){
           	alert(event.type);  //获取事件类型
           	alert(event.target);  //获取事件目标
           	event.stopPropagation();
       	}
       	function showDiv(){
           	alert("div");
       	}
       	function showA(event){
           	event.stopPropagation();
           	event.preventDefault();
       	}
   	</script>
</body>
</html>

五、事件对象

1. JS对象

JS中的所有事物都是对象：字符串、数值、数组、函数。。
每个对象都带有属性和方法
JS允许自定义对象

自定义并创建对象实例使用函数来定义对象，然后创建新的对象实例
具体详见后面 八、面向对象

2. string对象

string对象用于处理已有的字符串字符串可以用单引号或双引号

常用方法

length属性来计算字符串长度

1 2	var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.write(txt.length);

indexOf() 定位字符串中某一个指定字符串首次出现的位置 >返回位置，从 0 开始。 >若没有找到则返回 -1。 >lastIndexOf() 在字符串末尾开始查找字符串出现的位置。
1
2
3
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");

match() 内容匹配

查找字符串中特定的字符（串）。找到的话，则返回这个字符。若没有则返回 null。

var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));

replace() 替换内容

在字符串中用某些字符替换另一些字符。 replace(" ", " ")，后面替换前面
1
2
str="Please visit Microsoft!"
var n=str.replace("Microsoft","Runoob");

toUpperCase() / toLowerCase 字符大小写转换

toUpperCase()：转换为大写 toLowerCase()：转换为小写

var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 文本会转换为大写
var txt2=txt.toLowerCase();   // txt2 文本会转换为小写

split() 字符串转换为数组

var txt="a,b,c,d,e"   // String
txt.split(",");   // 使用逗号分隔
txt.split(" ");   // 使用空格分隔
txt.split("|");   // 使用竖线分隔

3. data日期对象

Date对象
1. 日期对象用于处理日期和时间 >var date = Date(); >document.write(date); >即可获得当前时间
常用方法

getFullYear()：获取年份 getTime()：获取毫秒（自1970年1月1日至今） setFullYear()：设置具体的日期 getDay()：获取星期

实例

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS data日期对象</title>
</head>
<body onload="startTime()">
   	<div id="timetxt"></div>
   	<script>
       	var date = Date();
     	//  document.write(date);
     	//  document.write(date.getFullYear());
     	//  date.setFullYear(2010,1,1);
     	//  document.write(date);
     	//  时钟
       	function startTime(){
           	var today = new Date();
           	var h = today.getHours();
           	var m = today.getMinutes();
           	var s = today.getSeconds();
           	m = checkTime(m);
           	s = checkTime(s);
           	document.getElementById("timetxt").innerHTML = h + ":" + m + ":" +s;
           	t = setTimeout(function(){
               	startTime();
           	}, 500);
       	}

       	function checkTime(i){
           	if(i<10){
               	i = "0"+ i;
           	}
           	return i;
       	}
   	</script>
</body>
</html>

4. Array数组对象

Array对象

仅用单独的变量名来存储一

系列的值

数组中可以包含对象元素、函数、数组
数组的创建
1. 常规方式
  
  var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW";
2. 简洁方式
  
  var myCars=new Array("Saab", "Volvo", "BMW");
3. 字面
  
  var myCars=["Saab", "Volvo", "BMW"];
数组的常用方法

concat()：合并数组例：var c = a.concat(b); sort()：排序（升序），降序见后面实例例：a.sort(); push()：末尾追加元素 reverse()：数组元素翻身

实例

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS Array数组对象</title>
</head>
<body>
   	<script>
       	var a = ["hello", "world"];
       	var b = ["iwen", "ime"];
       	var c = a.concat(b);
       	document.write(c + "<br/>");

       	var d = ["a", "c", "d", "t", "e", "p"];
       	document.write(d.sort() + "<br/>");
       	document.write(d.sort(function(a, b){
           	return b-a;
       	}) + "<br/>");

       	var e = ["a", "b"];
       	e.push("c");
       	document.write(e + "<br/>");

       	var f = ["c", "b", "a"];
       	document.write(f.reverse());
   	</script>
</body>
</html>

5. Math对象

执行常见的算数任务
算数值

Math.E Math.PI Math.SQRT2 //返回2的平方根 Math.SQRT1_2 //返回2的平方根的倒数
常见方法

round()：四舍五入 random()：返回0-1之间的随机数　　　　　０-10：10 　　　　　０-100：100 　　　　　整型：parseInt(Math.random() * 10); floor()：返回小于等于x的最大整数 max()：返回最大值 min()：返回最小值 abs()：返回绝对值

生成指定范围内的随机整数

包括下限数字 (lower) ，不包括上限数字 (upper)

1
2
3

function random(lower, upper){
	return Math.floor(Math.random() * (upper - lower)) + lower;
}

包括下限数字 (lower) ，也包括上限数字 (upper)

1
2
3

function random(lower, upper){
	return Math.floor(Math.random() * (upper - lower+1)) + lower;
}

扩展：产生一个随机的rgb颜色

function randomColor(){
	var r = random(0, 256),
	g = random(0, 256),
	b = random(0, 256);
	//连接字符串结果
	var result = "rgb(" + r + "," + g + "," + b + ")";
	return result;
}

实例

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS Math对象</title>
</head>
<body>
   	<script>
       	document.write(Math.round(2.3) + "<br/>");
       	document.write(Math.random() * 10 + "<br/>");
       	document.write(parseInt(Math.random()*10) + "<br/>");
       	document.write(Math.max(10, 20, 4, 1));
   	</script>
</body>
</html>

六、DOM对象控制HTML

1. 方法

getElementByName()

通过name属性来获取元素
getElementByTagName()

通过标签名称来获取元素
getAttribute()

获取元素属性 想要获取的元素.getAttribute("想要获取的属性");
setAttribute()

设置元素属性 想要设置的元素.("要设置的属性", "属性内容 ")
childNodes

访问子节点, 注意空白项 ,空白项算文本节点类似于存放节点的数组，故需用[0] / [1]等确定具体的子节点 length 属性可获得节点数 nodeType 属性
返回节点的类型
1. 如果节点是一个元素节点，nodeType属性返回1。
2. 如果节点是属性节点，nodeType属性返回2。
3. 如果节点是一个文本节点，nodeType属性返回3。
4. 如果节点是一个注释节点，nodeType属性返回8。
该属性是只读的。
parentNode

访问父节点 nodeName：节点名称
createElement()

创建元素节点例：var input = document.createElement("input");
createTextNode()

创建文本节点与 createElement() 和 appendChild() 共同使用 >var para = document.createElement("p"); >var node = document.createTextNode("这是创建的新文本"); para.appendChild(node);
appendChild() >创建新的HTML元素（节点） > > >要创建新的HTML元素（节点）需要先创建一个元素，然后在已存在的元素中添加它。

在节点之后添加。例：打算添加到它的最后.appendChild( 要添加的节点 ) >（接上面createTextNode()部分代码） >var element = document.getElementById("div1"); >element.appendChild(para);
insertBefore()

用法和 appendChild() 很像，不过它用于添加新元素到开始位置

例：打算添加到它中.insertBefore(要添加的元素, 它中打算添加到现在这个元素之前的元素 ) >（接上面createTextNode()部分代码） >var element = documentById("div1"); >var child = documentById("p1"); >element.insertBefore(para, child);
removeChild()

删除节点例：想要删除节点的父节点.removeChild(想要删除的节点 ) 两种方法 >var parent = document.getElementById("div1"); >var child = document.getElementById("p1"); >parent.removeChild(child); ***** >var parent = document.getElementById("div"); >div.removeChild(div.childNodes[1]);
offsetHeight / offsetWidth

返回任何一个元素的高度或宽度，包括边框和填充，但不是边距 >element.offsetHeight; >element.offsetWidth;

返回网页尺寸（不包含滚动条） >document.documentElement.offsetWidth || document.body.offsetWidth; >//考虑到兼容性，故还有 || 后面的内容
scrollHeight / scrollWidth

网页尺寸，包含滚动条

实例（这一节请仔细查看实例）

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>DOM对象控制HTML</title>
</head>
<body>
   	<p name="pn">hello</p>
   	<p name="pn">hello</p>
   	<p name="pn">hello</p>
   	<p name="pn">hello</p>
   	<a id="aid" title="得到了a标签的属性">hello</a>
   	<a id="aid2">aid2</a>
   	<ul><li>1</li><li>2</li><li>3</li></ul>
   	<div id="div">
       	<p id="pid">div的p元素</p>
   	</div>
   	<script>
       	function getName(){
       	    var count = document.getElementsByName("pn");
           	alert(count.length);
           	var p = count[3];
           	p.innerHTML = "World";
       	}
       	getName();

       	function getAttr(){
           	var anode = document.getElementById("aid");
           	var attr = anode.getAttribute("id");
           	alert(attr);
       	}
       	getAttr();

       	function setAttr(){
           	var anode = document.getElementById("aid2");
           	anode.setAttribute("title", "动态设置a的title属性");
           	var attr = anode.getAttribute("title");
           	alert(attr);
       	}
       	setAttr();

       	function getChildNode(){
           	var childnode = document.getElementsByTagName("ul")[0].childNodes;
           	alert(childnode.length);
           	alert(childnode[0].nodeType);
       	}
       	getChildNode();

       	function getParentNode(){
           	var div = document.getElementById("pid").parentNode.nodeName;
           	alert(div);
       	}
       	getParentNode();

       	function createNode(){
           	var body = document.body;
           	var input = document.createElement("input");
           	input.type = "button";
           	input.value = "按钮";
           	body.appendChild(input);
       	}
       	createNode();

       	function addNode(){
           	var div = document.getElementById("div");
           	var node = document.getElementById("pid");
           	var newnode = document.createElement("p");
           	newnode.innerHTML = "动态添加一个p元素";
           	div.insertBefore(newnode, node);
       	}
       	addNode();

       	function removeNode(){
           	var div = document.getElementById("div");
          	// var p = div.removeChild(div.childNodes[1]);
       	}
       	removeNode();

       	function getSize(){
           	var width = document.documentElement.offsetWidth||document.body.offsetWidth;
           	var height = document.documentElement.offsetHeight||document.body.offsetHeight;
           	alert(width + "，" + height);
       	}
       	getSize();
   	</script>
</body>
</html>

七、JS浏览器对象

1. Window对象

Window对象

Window对象是BOM的核心，Window对象指当前浏览器的窗口所有JS全局对象、函数、以及变量均自动变成为Window对象的成员全局变量是Window对象的属性全局函数是Window对象的方法甚至HTML DOM的document也是Window对象的属性之一
Window尺寸

window.innerHeight：浏览器窗口的内部高度（包括滚动条） window.innerWidth：浏览器窗口的内部宽度（包括滚动条）
Window方法

window.open()：打开新窗口 window.close()：关闭新窗口

实例

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS浏览器对象——window对象</title>
</head>
<body>
   	<button id="btn" onclick="btnClicked()">按钮</button>
   	<script>
       	function btnClicked(){
           	//window.open("JS事件.html", "windowname", "height = 200, width = 200, top = 100, left = 100, toolbar = no, menubar = no");
           	window.close();
       	}
   	</script>
</body>
</html>

2. 计时器对象

计时事件

通过JS，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是函数调用后立刻执行
计时方法
1. setInterval() / clearInterval()
  
  (函数, 时间间隔) //函数特别喜欢写成一种样子...祥看实例 间隔指定毫秒数不停地执行代码
2. setTimeout() / clearTimeout()
  
  （函数，间隔时间）暂停指定毫秒后执行指定代码 可以设计成循环，递归调用，即可不停得执行代码（祥看实例）

实例

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS浏览器对象——计时器对象</title>
</head>
<body>
   	<p id="ptime"></p>
   	<button onclick="stopTime()">按钮</button>
   	<br/><br/><br/><br/>
   	<button onclick="myWin()">开始</button>
   	<br/><br/>
   	<button onclick="stopWin()">停止</button>

   	<script>
       	var mytime = setInterval(function(){
           getTime();
       	}, 1000);
       	function getTime(){
           	var d = new Date();
           	var t = d.toLocaleTimeString();
           	document.getElementById("ptime").innerHTML = t;
       	}	
       	function stopTime(){
           	clearInterval(mytime);
       	}

       	var win;
       	function myWin(){
           	alert("hello");
           	win = setTimeout(function () {
           	    myWin();
           	}, 3000);
       	}
       	function stopWin(){
           	clearTimeout(win);
       	}
   	</script>
</body>
</html>

3. History对象

window.history对象包含浏览器的历史（URL）的集合
方法

history.back()：与浏览器点击后退键相同 history.forward()：与浏览器点击向前键相同 history.go()：进入历史中的某个页面

4. Location对象

window.location对象用于获得当前页面的地址URL，并把浏览器重新定向到新的页面
Location对象的属性

location.hostname：返回web主机的域名 location.pathname：返回当前页面的路径和文件名 location.port：返回web主机的端口 location.portocol：返回所使用的web协议（http://或https://） location.href：返回当前页面的URL location.assign：方法加载新的文档

实例

<!DOCTYPE html>
<html lang="en">
<head>
   	<meta charset="UTF-8">
   	<title>JS浏览器对象——Location对象</title>
</head>
<body>
   	<button id="btn" onclick="getLoc()">按钮展示</button>
   	<br/><br/><br/><br/><br/><br/><br/><br/>
   	<button id="btn1" onclick="assi()">按钮跳转</button>
   	<p id="pid"></p>
   	<script>
       	function getLoc(){
           	document.getElementById("pid").innerHTML = window.location.href;
       	}
       	function assi() {
           	location.assign("https://www.baidu.com");
       	}
   	</script>
</body>
</html>

5. screen对象

window.screen对象包含有关用户屏幕的信息
属性

screen.availWidth：可用屏幕宽度 screen.availHeight：可用屏幕高度 screen.height：屏幕高度 screen.width：屏幕宽度

八、面向对象

1. 创建对象

new操作符 + Object创建对象

var person = new Object();
person.name = "lisi";
person.age = 21;
person.family = ["haha", "heihei"];
person.say = function(){
	alert(this.name);
}

字面式创建对象
1
2
3
4
5
6
7
8
var person = {
name: "lisi",
age: 21,
family: ["haha", "heihei"],
say: function(){
alert(this.name);
}
};
以上两种方法在使用同一接口创建多个对象时，会产生大量重复代码，为了解决此问题，工厂模式被开发

工厂模式

function createPerson(name, age, family){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.family = family;
	o.say = function(){
		alert(this.name);
	}
	return o;
}

var person1 = createPerson("lisi", 21, ["haha", "heihei"]); //instanceof无法判断它是谁的实例，只能判断他是对象，构造函数都可以判断出
console.log(person1 instanceof Object); //true

缺点：工厂模式解决了重复实例化多个对象的问题，但没有解决 * 对象识别 * 的问题，（工厂模式无从识别对象的类型，因为全部都是Object，不像Date, Array等），于是出现了构造函数模式。

构造函数模式
1
2
3
4
5
6
7
8
9
10
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
}
}

var person = new Person("Jim", 22, "Teacher");
1. 构造函数模式相对于工厂模式有几个显著的区别
- 没有显式地创建对象。
- 直接将属性和方法赋给了this对象。
- 没有 return 语句。
- 函数名的首字母大写（Person 和 createPerson）：按照惯例，构造函数始终都是以大写字母开头，而非构造函数则应该以小写字母开头。
1. 解决对象识别问题
2. constructor
  
  上面的例子使person保存这个Person的示实例，因此有了一个constructor（构造函数）属性，该属性指向Person
  
  alert(person.constructor == Person); //true
  
  对象的constructor属性最初是用来标识对象类型的，但是检测对象类型还是instanceof操作符更加可靠
3. instanceof
  
  alert(person instanceof Object); //true alert(person instanceof Person); //true
  
  这个例子里创建的对象既是Object实例又是Person的实例
4. new Person()这条语句经历了什么
1. 创建一个新对象
2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
3. 执行构造函数中的代码（为这个新对象添加属性）
4. 返回新对象
1. 构造函数中的问题
ECMAScript中的函数是对象，因此每定义一个函数，也就是实例化了一个对象。而构造函数在每次创建的时候都会完成同样function实例（sayName），这是很没有必要的。因此可以把函数定义转移到构造函数外部来解决这个问题。

原型模式

function Person(){}
Person.prototype.name = "Jim";
Person.prototype.age = 22;
Person.prototype.job = "Doctor";
Person.prototype.sayName = function(){
	alert(this.name);
}

var person = new Person();
person.age = 50;
person.sayName(); //Jim

原型模式的好处

可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以让这些信息直接添加到原型对象中。
原型对象是什么
1. 无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为这个函数创建一个 prototype 属性，这个属性指向函数的原型对象。在默认情况下，所有的原型对象都会自动获得一个constructor（构造函数）的属性，这个属性包含一个指向prototype属性所在的函数的指针，如下： alert(Person.prototype.constructor == Person); //true
2. 在我们调用 person.sayName();的时候，会先后执行两次搜索，先找实例再找原型。 首先编译器会问：“实例person有sayName属性吗？” 答曰：“没有” 然后继续搜索，再问“person的原型里有sayName属性吗？” 答曰：“有” 于是他就读取那个保存在原型对象中的函数
3. 当给person主动添加属性时，就会屏蔽掉原型的属性（但不会替代，其他Person对象调用更改的属性，依然会时默认值）
1. 使用delete操作符删除实例的属性
  1
  2
  3
  4
  person.name = "Tom";
  alert(person.name); //Tom
  delete person.name;
  alert(person.name); //Jim
2. hasOwnProperty()方法检测一个属性时存在于实例中还是原型中
  1
  2
  3
  4
  var person = new Person();
  alert(person.hasOwnProperty("name")); //false：在原型中
  person.name = "Tom";
  alert(person.hasOwnProperty("name")); //true：存在对象实例中
原型与in操作符
in操作符通过对象访问对象中的属性时，返回true，无论该属性是存在于实例中还是原型中
1
2
3
4
var person = new Person();
alert("name" in person); //true
person.name = "Tom";
alert("name" in person); //true

for-in循环

循环遍历对象的属性

for(var x in person){ //x为属性名
    if(x == "name"){
        alert("Found name!");
    }
}

组合使用构造函数模式和原型模式

构造函数模式用于定义实例属性原型模式用于定义方法和共享属性

   functon Person(name, age, job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.friends = ["Amy", "Bob"];
   }
   Person.prototype = {
	constructor: Person, //每个函数都有prototype属性，指向该函数原型对象，原型对象都有constructor属性，这是一个指向prototype属性所在函数的指针
	sayName: function(){
	alert(this.name);
	}
};

   var person1 = new Person();
   var person2 = new Person();

   person1.friends.push("Van");
   alert(person1.friends); //Amy, Bob. Van
   alert(person2.friends); //Amy, Bob
   1
2
3
4
5
6
7
8
9
10

### 2. 对象的封装###


>(function(){
>    正常创建对象即可
>    **window.People = People; //对象名称**
>}());

+ 实例

(function () { function People(name){ this.name = name; } People.prototype = { say: function(){ alert("peo-hello "+this.name); } }; window.People = People; }());


### 3. 对象的继承###

>继承的对象.prototype = new 被继承对象();

(function(){ function Student(name){ this.name = name; }

Student.prototype = new People();

var superSsay = Student.prototype.say;

Student.prototype.say = function(){ superSsay.call(this); alert("stu-hello "+this.name); }; window.Student = Student; }());

var s = new Student("Olivia"); s.say(); ```

后记

一边看当时的笔记，一边看当时看网课时跟着写的代码，遇到不会的和忘记的再到菜鸟论坛查一查补充一下，整理笔记倒还是挺快乐的，当然也有可能是课少hhh。

经常复习是重点！！时不时来看看！

目录