JavaScript 基础语法-BOM编程及JSON（三）

一、BOM编程一些函数的使用

1、BOM编程-open和close

(1)BOM编程中，window对象是顶级对象，代表浏览器窗口。
(2)window有open和close方法，可以开启窗口和关闭窗口。
window.open() 可以传参数
window.open(‘目标’,’_self’) 当前窗口
window.open(‘目标’,’_blank’) 新窗口
window.open(‘目标’,’_parent’) 父窗口
window.open(‘目标’,’_top’) 顶级窗口
window.open(‘002-open.html’) 也可以打开自写网页

<input type="button" value="开启百度（新窗口）" onclick="window.open('http://www.baidu.com');" />
<input type="button" value="开启百度（_self）" onclick="window.open('http://www.baidu.com', '_self');" />
<input type="button" value="开启百度（_blank）" onclick="window.open('http://www.baidu.com','_blank');" />
<input type="button" value="开启百度（_parent）" onclick="window.open('http://www.baidu.com','_parent');"/>
<input type="button" value="开启百度（_top）" onclick="window.open('http://www.baidu.com','_top');" />
<input type="button" value="打开自写网页" onclick="window.open('002-open.html')" />

2、弹出消息框和确认框

window.confirm(“提示信息”) 确认框
window.alert(“提示信息”) 信息框

<script type="text/javascript">
	function del(){
		/*var ok = window.confirm("亲，确认要删除数据吗？");
		if(ok){
			alert("delete data ...");
		}*/
		// 合并
		if(window.confirm("亲，确认要删除数据吗？")){
			alert("delete data ...");
		}
	}
script>
<input type="button" value="弹出信息框" onclick="window.alert('信息框！')" />
<input type="button" value="弹出确认框" onclick="del();" />

3、当前窗口设置为顶级窗口（不理解在去看例子）

<script type="text/javascript">
	window.onload = function(){
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			if(window.top != window.self){
				window.top.location = window.self.location;
			}
		}
	}
script>
<input type="button" value="将当前窗口设置为顶级窗口" id="btn" />

<iframe src='005-child-window.html'>
iframe>

4、history对象

<script type="text/javascript">
/*
	history :
		history可以控制网页前进和后退
			history.go(1) 前进
			history.back() 后退
			history.go(-1) 后退
*/	
script>
<a href="007.html">007页面a>
<input type="button" value="前进" onclick="window.history.go(1)">

<input type="button" value="后退" onclick="window.history.back();" />
<input type="button" value="后退" onclick="window.history.go(-1)" />

5、设置浏览器地址栏上的URL

使用window.location = “地址” 或 document.location = “地址”
都可以设置地址栏上的URL

<script type="text/javascript">
	goBaiDu = function(){
		//window.location.href = "http://www.sina.com";
		//window.location = "http://www.baidu.com";

		//document.location.href = "http://www.baidu.com";
		document.location = "http://www.baidu.com";
	}
script>
<input type="button" value="百度" onclick="goBaiDu();" />

二、JSON在JavaScript中的使用

1、什么是JSON，有什么用？
JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
2、JSON是一种标准的轻量级的数据交换格式。特点是：
体积小，易解析。
3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）
4、JSON的语法格式：
var jsonObj = {
“属性名” : 属性值,
“属性名” : 属性值,
“属性名” : 属性值,
“属性名” : 属性值,
…
};

1、JSON的简单使用

<script type="text/javascript">

	// 创建JSON对象（JSON也可以称为无类型对象。轻量级，轻巧。体积小，易解析。）
	var studentObj = {
		"sno" : "110",
		"sname" : "张三",
		"sex" : "男"
	}
	// 访问JSON对象的属性
	alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);

	// JSON数组
	var students = [
		{"sno":"110","sname":"张三","sex":"男"},
		{"sno":"120","sname":"李四","sex":"男"},
		{"sno":"130","sname":"王五","sex":"男"}
	];
	// 遍历
	for(var i = 0; i< students.length; i++){
		var stuObj = students[i];
		alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
	}
script>

2、复杂一些的JSON对象

<script type="text/javascript">
	var user = {
		"usercode" : 110,
		"username" : "张三",
		"sex" : false,
		"address" : {
			"city" : "xx",
			"street" : "xxx",
			"zipcode" : "1234214"
		},
		"aihao" : ["smoke","drink","tt"]
	};

	// 访问人名及居住城市
	alert(user.username + "居住在" + user.address.city);

	/*
		请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
	*/

	var jsonData = {
		"total" : 3,
		"students" : [
			{"name":"zhangsan","birth":"1902-10-21"},
			{"name":"lisi","birth":"1902-10-12"},
			{"name":"wangwu","birth":"1902-10-11"}
		]
	}
	for(var i = 0;i<jsonData.students.length;i++){
		alert(jsonData.students[i].name + "," + jsonData.students[i].birth);
	}
script>

3、eval函数的使用

<script type="text/javascript">
	/*
		eval函数的作用是：
			将字符串当做一段JS代码解释并执行。
	*/
	window.eval("var i = 111;");
	alert(i);
	
	// 例
	var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; // 这是java程序给发过来的json格式的“字符串”
	// 将以上的json格式的字符串转换成json对象
	window.eval("var jsonObj = " + fromJava);
	// 访问json对象
	alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据

	/*
		面试题：
			在JS当中：[]和{}有什么区别？
				[] 是数组
				{} 是json
	*/
	var json = {
		"username" : "jackson"
	}
	// js中访问json对象的属性
	alert(json.username);
	// js中访问json对象的属性
	alert(json["username"]);
script>

4、设置table的tbody

<script type="text/javascript">
	// 有这些数据，想把数据显示到table里面
	var jsonData = [
		{"empno":"3245","ename":"zhangsan","sal":500.0},
		{"empno":"2235","ename":"lisi","sal":800.0},
		{"empno":"1235","ename":"wangwu","sal":900.0}
	]
	window.onload = function(){
		var displayBtn = document.getElementById("displayBtn");
		displayBtn.onclick = function(){
			var html = "";
			for(var i = 0;i<jsonData.length;i++){
			html += ""+jsonData[i].empno+""+jsonData[i].ename+""+jsonData[i].sal+"";
			}
			document.getElementById("emptbody").innerHTML = html;
			document.getElementById("count").innerHTML = jsonData.length;
		}
	}
script>
<input type="button" value="显示员工信息列表" id="displayBtn" />
<h2>员工信息列表h2>
<hr>
<table border="1px" width="50%">
	<tr>
		<th>员工编号th>
		<th>员工名字th>
		<th>员工薪资th>
	tr>
	<tbody id="emptbody">
		
	tbody>
table>
总共<span id="count">0span>条数

要熟练掌握JSON