✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！
📃个人主页：@每天都要敲代码的个人主页
🔥系列专栏：Web前端
💬推荐一款模拟面试、刷题神器，从基础到大厂面试题👉点击跳转刷题网站进行注册学习
目录
一：BOM编程
1. window.open()和window.close()
2. 弹出消息框和确认框
3. 将当前窗口设置为顶级窗口
4. history和location对象
5. 总结有哪些方法可以通过浏览器往服务器发请求
二：JSON对象
1. JSON概述
2. eval函数
一：BOM编程
1. window.open()和window.close()
（1）BOM编程中，window对象是顶级对象，代表浏览器窗口。
（2）window有open和close方法，可以开启窗口和关闭窗口。（3）利用第一个HTML页面的window.open跳转到002-open第二个HTML页面；在第二个HTML页面调用window.close就可以关闭第二个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM编程-open和close</title>
</head>
<body>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" />
<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com', '_self');" />
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com', '_blank');" />
<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com', '_parent');" />
<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com', '_top');" />
<input type="button" value="打开表单验证" onclick="window.open('002-open.html')"/>
</body>
</html>
002-open
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>close</title>
</head>
<body>
<input type="button" value="关闭当前窗口" onclick="window.close();" />
</body>
</html>
2. 弹出消息框和确认框
（1）弹出消息框window.alert，弹出确认框window.confirm
（2）删除操作的时候都要提前先得到用户的确认
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出消息框和确认框</title>
</head>
<body>
<script type="text/javascript">
function del(){
/*
var ok = window.confirm("亲，确认删除数据吗？");
//alert(ok);
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();" />
</body>
</html>
3. 将当前窗口设置为顶级窗口
（1）如果当前窗口不是顶级窗口，把当前窗口设置为顶级窗口
（2）在当前窗口中隐藏的内部窗体 <iframe src="http://www.baidu.com"></iframe>
（3）window.top就是当前窗口对应的顶级窗口
window.self表示当前自己这个窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>当前窗口设置为顶级窗口</title>
</head>
<body>
<iframe src="005-child-window.html" width="500px" height="500px" ></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>child-window</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
// window.top就是当前窗口对应的顶级窗口
// window.self表示当前自己这个窗口
if(window.top != window.self){
// 将当前窗口设置为顶级窗口
window.top.location = window.self.location;
}
}
}
</script>
<input type="button" value="将当前窗口设置为顶级窗口" id="btn" />
</body>
</html>
4. history和location对象
（1）通过一个页面跳转到另一个页面，可以调用window.history.back()或者window.history.go(-1)完成后退上一步
（2）调用window.history.go(1)前进到下一步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history对象</title>
</head>
<body>
<a href="007.html">007页面</a>
<input type="button" value="前进" onclick="window.history.go(1)"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>007</title>
</head>
<body>
007 page!
<input type="button" value="后退" onclick="window.history.back()" />
<input type="button" value="后退" onclick="window.history.go(-1)" />
</body>
</html>
修改地址栏的内容，调用：window.location.href，其中href可以省略；或者调用document.location.href，同样href可以省略
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
function goBaidu(){
// 第一种方法：调用window.location.href
var locationObj = window.location;
locationObj.href = "http://www.baidu.com";
// 合并代码
window.location.href = "http://www.jd.com";
// href可省略
window.location = "http://www.126.com";
// 第二种方法：调用document.location.href
document.location.href = "http://www.sina.com.cn";
// href可省略
document.location = "http://www.tmall.com";
}
</script>
<input type="button" value="新浪" onclick="goBaidu();"/>
<input type="button" value="baidu" onclick="window.open('http://www.baidu.com');" />
</body>
</html>
5. 总结有哪些方法可以通过浏览器往服务器发请求
（1）表单form的提交。
（2）超链接。<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用户只能点击这个超链接</a>
（3）document.location
（4）window.location
（5）window.open("url")
（6）直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的）
以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
二：JSON对象
1. JSON概述
（1）什么是JSON，有什么用？
JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
（2）JSON是一种标准的轻量级的数据交换格式。特点是：体积小，易解析。
（3）在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）
（4）JSON的语法格式：
var jsonObj = {
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
};（5）总结：JSON是一种行业内的数据交换格式标准；JSON在JS中以JS对象的形式存在
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>
<script type="text/javascript">
// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
var studentObj = {
"sno" : "110",
"sname" : "张三",
"sex" : "男"
};
// 访问JSON对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
// 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.
Student = function(sno,sname,sex){
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
var stu = new Student("111","李四","男");
alert(stu.sno + "," + stu.sname + "," + stu.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>
</body>
</html>
复杂一点的JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复杂一些的JSON对象。</title>
</head>
<body>
<script type="text/javascript">
var user = {
"usercode" : 110,
"username" : "张三",
"sex" : true,
"address" : {
"city" : "北京",
"street" : "大兴区",
"zipcode" : "12212121",
},
"aihao" : ["smoke","drink","tt"]
};
// 访问人名以及居住的城市
alert(user.username + "居住在" + user.address.city);
/*
请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
*/
var jsonData = {
"total" : 3,
"students" : [
{"name":"zhangsan","birth":"1980-10-20"},
{"name":"lisi","birth":"1981-10-20"},
{"name":"wangwu","birth":"1982-10-20"}
]
};
</script>
</body>
</html>
2. eval函数
（1）eval函数的作用是：将字符串当做一段JS代码解释并执行
（2）面试题：在JS当中：[]和{}有什么区别？
[] 是数组。
{} 是JSON。
java中的数组：int[] arr = {1,2,3,4,5};
JS中的数组：var arr = [1,2,3,4,5];
JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>eval函数</title>
</head>
<body>
<!--
JSON是一种行业内的数据交换格式标准。
JSON在JS中以JS对象的形式存在。
-->
<script type="text/javascript">
window.eval("var i = 100;");
alert("i = " + i); // i = 100
// java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
// 也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
// 可以使用eval函数,将json格式的字符串转换成json对象.
//这是java程序给发过来的json格式的"字符串"
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}";
// 将以上的json格式的字符串转换成json对象
window.eval("var jsonObj = " + fromJava);
// 访问json对象
alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.
var json = {
"username" : "zhangsan"
};
// JS中访问json对象的属性
alert(json.username);
// JS中访问json对象的属性
alert(json["username"]);
</script>
</body>
</html>
3. 设置table的tbody
取出JSON中的数据，把它放到tbody当中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置table的tbody</title>
</head>
<body>
<script type="text/javascript">
// 有这些json数据
var data = {
"total" : 4,
"emps" : [
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7361,"ename":"SMITH2","sal":1800.0},
{"empno":7360,"ename":"SMITH3","sal":2800.0},
{"empno":7362,"ename":"SMITH4","sal":3800.0}
]
};
// 希望把数据展示到table当中.
window.onload = function(){
var displayBtnElt = document.getElementById("displayBtn");
displayBtnElt.onclick = function(){
var emps = data.emps;
var html = "";
for(var i = 0; i < emps.length; i++){
var emp = emps[i];
html += "<tr>";
html += "<td>"+emp.empno+"</td>";
html += "<td>"+emp.ename+"</td>";
html += "<td>"+emp.sal+"</td>";
html += "</tr>";
}
document.getElementById("emptbody").innerHTML = html;
document.getElementById("count").innerHTML = data.total;
}
}
</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">
<!--
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
-->
</tbody>
</table>
总共<span id="count">0</span>条数
</body>
</html>
结束语
今天的分享就到这里啦！快快通过下方链接注册加入刷题大军吧！
各种大厂面试真题在等你哦！
💬刷题神器，从基础到大厂面试题👉点击跳转刷题网站进行注册学习
