一.JS 中的常用全局属性和方法

Infinity 表示正无穷大的数值
NaN 非数值
undefined 未定义的值
eval() 计算 JavaScript 代码串，返回结果
isFinite() 检验一个值是否是无穷大的数字
isNaN() 检验一个值是否是非数字的值
parseFloat() 从字符串解析一个带小数点的数字
parseInt() 从字符串解析一个整数
encodeURIComponent() 返回参数的副本，其中某些字符被十六进制的转义序列替换了
decodeURIComponent() 对 encodeURIComponent()转移的字符串解码

二.JS 内置对象

Arguments 只在函数内部定义，保存了函数的实参
Array 数组对象
Data 日期对象，用来创建和获取日期
Math 数学对象
String 字符串对象，提供对字符串的一系列操作

String:

charAt(idx)：返回指定位置处的字符
◦ indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1
◦ substr(m,n)：返回给定字符串中从 m 位置开始，取 n 个字符，如果参数 n 省略，则意味着取到字符串末尾。
◦ substring(m,n)：返回给定字符串中从 m 位置开始，到 n 位置结束，如果参数 n 省略，则意味着取到字符串末尾。
◦ toLowerCase()：将字符串中的字符全部转化成小写。
◦ toUpperCase()：将字符串中的字符全部转化成大写。
◦ length: 属性，不是方法，返回字符串的长度。

Math:

◦ Math.random(): [0,1)的随机数
◦ Math.ceil() ：天花板大于最大整数,向上取整
◦ Math.floor() : 地板小于最小整数 String,向下取整

Date:

//获取
◦ getFullYear()年, getMonth()月(得到的值： 0~11（1 月~12 月）), getDate()日,
◦ getHours()时,getMinutes()分,getSeconds()秒
//设置
◦ setYear(), setMonth(), …
◦ toLoacaleString() (可根据本地时间把 Date 对象转换为字符串，并返回结果)

三.JS 对象

1.对象的创建

JS 创建自定义对象，主要通过三种方式：字面量形式创建对象、通过 new Object 对象创建、通过 Object 对象的 create 方法创建对象

a.字面量形式创建

var 对象名 = {};//创建一个空的对象
var 对象名 = {键:值,键 2:值 2,...}

var obj = {
    'name' : 'hello',
    age : 12,
    sayHello : function () {
    
    console.log("我是对象中的方法");
        },
   
     courses : {
    javase : 4,
    javascript : 3
        },
    isLike : true,
   
     members : [
        {name : "小红",age : 20},
        {name : "小绿",age : 22},
        {name : "小蓝",age : 27},
        {name : "小黄"}
        ]
    };

b.通过 new Object 对象创建

var 对象名 = new Object();//创建一个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);

c.通过 Object 对象的 create 方法创建对象

var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls'
obj.gender = true
console.log(obj)
var objn = Object.create(obj)
objn.age = 18
console.log(objn)
console.log(objn.gender)

2.对象的序列化和反序列化

序列化即将 JS 对象序列化为字符串，反序列化即将字符串反序列化为 JS 对象。 JS 中通过调用 JSON 方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象。

//序列化对象，将对象转为字符串
JSON.stringify(object)

//反序列化，将一个 Json 字符串转换为对象。
JSON.parse(jsonStr)

3.eval():执行函数

eval(“console.log(‘你好’)”);//控制台输出你好

a.将 json 串转为 json 对象

1）第一种解析方式：得到的 json 对象名就是 jsonObj

eval("var jsonObj = " + jsonStr);

2）第二种解析方式：对象中有多个属性

var jsonObj = eval("(" + jsonStr + ")");

3）第二种解析方式：对象中只有一个属性

eval(jsonStr);

解析 json 串

var jsonStr = "{'name':'zs', 'pwd':'123'}"; //json 串
//第一种解析方式
eval("var jsonObj = " + jsonStr);
//第二种解析方式：对象有多个属性值
var jsonO = eval("(" + jsonStr + ")");
//第二种解析方式：对象只有一个属性值
var str = "{name:'zs'}";
var namestr = eval(str);

b.将 json 格式数组字符串解析为 json 格式数组

1）第一种解析方式:

eval("var arrObj = " + arrStr);

2）第二种解析方式：

eval(arrStr);

解析 json 格式数组字符串

var arr="[{name:'zs',pwd:'123'},{name:'ls',pwd:'123'},
{name:'ww',pwd:'123'}]";
eval("var arrObj = " + arr);
var arrObj2 = eval(arr);

4.this

this 是 JavaScript 语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同， this 的值会发生变化。但是有一个总的原则，那就是 this 指的是，调用函数的那个对象。

a.在函数中使用 this

在函数中使用 this 属于全局性调用，代表全局对象，通过 window 对象来访问。

function test () {
this.x = 1;
console.log(this.x);
}
test();
console.log(x);//相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){
console.log(this.x) //10
this.x = 1;
console.log(this.x) //1
console.log(this)
}
test()
console.log(x) //1
console.log(this)

b.在对象的方法中使用 this

var obj = {
name : '张三',
age : 20,
sayHello : function () {
console.log(this.name)
console.log(this)
}
}
obj.sayHello();

四.事件

事件(Event)是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

1.作用

（1）验证用户输入的数据。
（2）增加页面的动感效果。
（3）增强用户的体验度

2.事件中几个名词

事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发生了怎么办

3.事件类型

JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、 HTML 事件。

Window 事件属性 :针对 window 对象触发的事件（应用到 <body> 标签）
Form 事件 :由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）
Keyboard 事件 : 键盘事件
Mouse 事件 :由鼠标或类似用户动作触发的事件
Media 事件 :由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、 <embed>、 <img>、 <object> 以及 <video>）

几个常用的事件

onload：当页面或图像加载完后立即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：鼠标点击某个对象
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下

4.事件处理程序

a.HTML 事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的 HTML 特性来指定。这个特性的值应该是能够执行的 JavaScript 代码：

<input type="button" value="Press me" onclick="alert('thanks');"

这样做有一些缺点，例如耦合度过高，还可能存在时差问题（当用户点击按钮时，处理函数还未加载到，此时处理函数是单独写的一段 js 代码），而且在不同的浏览器上可能会有不同的效果。

b.DOM0 级事件处理程序

通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性通常全都小写，例如 onclick，然后将这种属性的值设为一个函数，就可以指定事件处理程序了。例如：

<body>
    <button id="myBtn">按钮</button>
    <script type="text/javascript">
    var btn = document.getElementById('myBtn')
    btn.onclick = function(){
    
        alert('you click a button')
            }
    </script>
</body>

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除 DOM0 级方法指定的事件处理程序，只要将属性值设为 null 即可：

btn.onclick = null

c.DOM2 级事件处理程序

“DOM2 级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。所有 DOM 节点都包含这两个方法，并且他们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；如果是 false 则表示在冒泡阶段调用事件处理程序。

<body>
        <button id="myBtn">按钮</button>
        <script type="text/javascript">
       
         var btn = document.getElementById('myBtn')
        btn.addEventListener('click',function(){
           
             alert('you add a eventListener by DOM2')
        },false)
    
            btn.addEventListener('click',function(){
            alert('you add a eventListener by DOM2 again')
                },false)
        function thread(){
            
            alert('you add a eventListener by DOM2 第三次')
            }
        btn.addEventListener('click',thread,false)
        btn.removeEventListener('click',thread,false)
     
      </script>
</body>

这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注意，在删除的时候，不能删除匿名处理函数。

五.BOM

1. Window 对象

a.window 对象方法

1）系统对话框

浏览器通过（实际是 window 对象的方法） alert()、 confirm()、 prompt()方法可以调用系统对话框向用户显示消息。

（1）消息框:alert，常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

<style type="text/css">#aa{ border: 1px solid red; height: 100px; }</style>
<body>
    <div id="aa">This is a div</div>
    <button onclick="testAlert();">警告</button>
    <button onclick="testComfirm();">修改</button>
    <button onclick="testPrompt();">输入</button>
    <script type="text/javascript">//1.警告框
        function testAlert() {
            alert('警告框！！！ ');
        }
        //2.输入框function testPrompt(){
        var item = prompt('请输入年龄'); //item 得到输入的值
        //console.log(item)
        //alert(prompt('请输入年龄',18));//将输入的值输出
    }
    /*
3.确认框
返回值： boolean（true|false）
* */
    function testComfirm() {
        var result = confirm('真的要改吗？ ');
        if (result) {
            var ele = document.getElementById("aa");
            ele.style.color = "red";
            ele.innerHTML = "<span>fdsfsd</span>";
        } else {
            alert("没事别瞎点。。。 ");
        }
    }</script>
</body>

2）打开窗口

window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口

<script type="text/javascript">
function openSxt(){
window.open('http://www.shsxt.com','_self');
//window.open(); //空白窗口
}
</script>
<input type="button" name="open" value="sxt" onclick='openSxt();' />

3）关闭窗口

window.close()：关闭窗口。

<input type="button" value="关闭窗口" onclick="window.close();" />

4）时间函数

setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以cliearTimeout(id) 来清除指定函数的执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示事件</title>
		<script type="text/javascript">
			/*
			 	1、页面加载完成以后，准备一个定时器，一秒执行一次
			 	2、间隔一秒获取一次当前时间
			 	3、并且显示到 h1标签内部
			 */
			function init(){
				
				var h1 = document.getElementById('timeStr');
				
				var id = window.setInterval(changeTime,1000);
				
				function changeTime(){
					var date = new Date();
					h1.innerText = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() +"  "+
					date.getHours() +":" + date.getMinutes() + ":" + date.getSeconds();
				}
				
				var stopBtn = document.getElementById('stopTime');
				stopBtn.onclick = function(){
					window.clearTimeout(id);
				}
				
				document.getElementById('goon').onclick = function(){
					id = window.setInterval(changeTime,1000);
				}
			}
		</script>
	</head>
	<body onload="init();">
		<h1 id="timeStr"></h1>
		<button id="stopTime">停止</button>
		<button id="goon">继续</button>
	</body>
</html>

2. histroy 对象

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。 history 对象是window 对象的一部分，可通过 window.history 属性对其进行访问。
history 对象的属性： length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。 go(-1)，到上一个页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>history对象</title>
		<script type="text/javascript">
			
		</script>
	</head>
	<body>
		<h1>011js</h1>
		<a href="001html.html">001html</a>
		<button onclick="alert(window.history.length)">获取历史的长度</button>
		<button onclick="goback()">返回上一个页面</button>
		<button onclick="gotopage()">去到下两个页面</button>
	</body>
	<script type="text/javascript">
		
		function goback(){
			window.history.go(-1);
		}
		
		function gotopage(){
			window.history.go(2);
		}
	</script>
</html>

3. location 对象

location 对象是 window 对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。
location 对象的属性 href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function myGetLocation(){
				alert(window.location.href);
			}
			
			function mySetLocation(){
				window.location.href = "http://www.baidu.com";
			}
			
			function myReload(){
				window.location.reload();
			}
			
			function myReplace(){
				location.replace("http://www.baidu.com");
			}
			
		</script>
	</head>
	<body>
		<input type="text" name="" id="" value="" />
		<br />
		<button onclick="myGetLocation()">获取location</button>
		<button onclick="mySetLocation()">设定location</button>
		<button onclick="myReload()">F5</button>
		<button onclick="myReplace()">去百度</button>
	</body>
</html>

4. document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问。document 对象的 body 属性，提供对<body>元素的直接访问， cookie 属性，用来设置或返回与当前文档有关的所有 cookie， write()方法，向文档写HTML 表达式或 JavaScript 代码。还有其他属性和方法。在 Document 对象中讲解。该对象作为 DOM 中的核心对象

JSON与事件和BOM