BOM编程
open和close
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM编程-open和close</title>
</head>
<body>
<script type="text/javascript">
/*
1.BOM编程中,window对象是顶级对象,代表浏览器窗口
2.window有open和close方法,可以开启窗口和关闭窗口
*/
</script>
<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="打开002" onclick="window.open('002-open.html');" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>close</title>
</head>
<body>
<input type="button" value="关闭当前窗口" onclick="window.close();" />
</body>
</html>
消息框和确认框
<!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>
将当前窗口设置为顶级窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>将当前窗口设置位顶级窗口</title>
</head>
<body>
<script type="text/javascript">
/*
如果当前这个窗口不是顶级窗口的话,将当前窗口设置为顶级窗口
*/
</script>
<iframe src="005.html" width="500px" height="500px"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
005页面
<script type="text/javascript">
/*
如果当前这个窗口不是顶级窗口的话,将当前窗口设置为顶级窗口
*/
function setTop(){
//window是当前浏览器窗口,代表005.html
//当前窗口的顶级窗口如果不是自己
//window.top就是当前窗口对应的顶级窗口
//window.self表示当前自己这个窗口
//window.top是004窗口
//window.self是005窗口
//console.log((window.top != window.self))//console.log()输出到控制台
if(window.top != window.self ){
//将当前窗口设置为顶级窗口
//window.self.location是005的地址
//将顶级窗口的window.top.location地址设置为005
window.top.location = window.self.location;
}
}
</script>
<input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口,将当前窗口设置为顶级窗口" />
</body>
</html>
history对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history对象</title>
</head>
<body>
<a href="007.html">007页面</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>007</title>
</head>
<body>
007 page!
<input type="button" value="后退1" onclick="window.history.back()" />
<input type="button" value="后退2" onclick="window.history.go(-1)" />
</body>
</html>
设置浏览器地址栏上的URL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
function goBaiDu(){
//var locationObj = window.location;
//locationObj.href = "http://www.baidu.com";
//window.location.href = "http://www.jd.com";
//window.location = "http://www.jd.com";
//document.location.href = "http://www.jd.com";
document.location = "http://www.jd.com";//以上写法都可以,结果都是一样的
}
</script>
<input type="button" value="京东" onclick="goBaiDu();" />
</body>
</html>
<!--
总结:有哪些方法可以通过浏览器往服务器发请求
1.表单form提交
2.超链接
3.document.location
4.window.location
5.window.open("url")
6.直接在浏览器地址栏上输入URL,再回车
以上所有的请求方式均可以携带数据给服务器,只有通过表单提交的数据才是动态的。
-->
JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>
<script type="text/javascript">
/*
1.什么是json,有何用?
JavaScript Object Notation,简称JSON。
JSON主要的作用:一种标准的数据交换格式。(目前非常流行,90%以上的系统,系统A与系统B交换数据的话,都采用JSON)
2.JSON是一种标准的轻量级的数据交换格式,特点是:体积小,易解析
3.在实际的开发中有两种数据交换格式使用最多,一种是JSON,另一种是XML
XML体积较大,解析麻烦,但优点是:语法严谨(通常银行相关的系统之间进行数据交换的话,会使用XML)
4.JSON的语法格式:
var jsonObj = {
"属性名" : "属性值",
"属性名" : "属性值",
"属性名" : "属性值",
"属性名" : "属性值",
...
};
*/
//创建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>
<!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"
},
"aohao" : ["smoke","drink","tt"]
};
//访问人名以及居住的城市
alert(user.username + "居住在" + user.address.city);//张三居住在北京
/*
请自行设计JSON格式的数据,这个JSON格式的数据可以描述整个班级中每一个学生的信息,以及总人数信息
*/
var jsonData = {
"total" : 3,
"students" : [
{"name" : "张三","birth" : "1980-10-20"},
{"name" : "李四","birth" : "1981-10-20"},
{"name" : "王五","birth" : "1982-10-20"},
]
};
</script>
</body>
</html>
eval函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>eval函数</title>
</head>
<body>
<!--
JSON是一种行业内的数据交换格式标准
JSON在js中以js对象的形式存在
-->
<script type="text/javascript">
/*
eval函数的作用:将字符串当做一段js代码解释并执行
*/
/* window.eval("var i = 100;");
alert("i = " + i);//i = 100 */
//java链接数据库,查询数据之后,将数据在Java程序中拼接成json格式的“字符串”,将json格式的字符串响应到浏览器
//也就是说Java响应到浏览器上的仅仅是一个json格式的字符串,还不是一个json对象
//可以使用eval函数,将json格式的字符串转换成json对象
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}";//这是Java程序发过来的json格式的字符串
//将以上的json格式的字符串转换成json对象
window.eval("var jsonObj = " + fromJava);
//访问json对象
alert(jsonObj.name + "," + jsonObj.password);//在前端取数据,zhangsan,123
/*
面试题:
在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};
*/
var json = {
"username" : "阿波"
};
//js中访问json对象的属性
alert(json.username);//阿波
//js中访问json对象的属性
alert(json["username"]);//阿波
</script>
</body>
</html>
设置table的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.0</td>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800.0</td>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800.0</td>
</tr> -->
</tbody>
</table>
总共<span id="count">0</span>条数
</body>
</html>