Web前端 | JavaScript(BOM编程和JSON)
✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!
📃个人主页:@每天都要敲代码的个人主页
🔥系列专栏: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就可以关闭第二个页面
BOM编程-open和close
002-open
close
2. 弹出消息框和确认框
(1)弹出消息框window.alert,弹出确认框window.confirm
(2)删除操作的时候都要提前先得到用户的确认
弹出消息框和确认框 function del(){/*var ok = window.confirm("亲,确认删除数据吗?");//alert(ok);if(ok){alert("delete data ....");}*/ // 代码合并 if(window.confirm("亲,确认删除数据吗?")){ alert("delete data ...."); }}
3. 将当前窗口设置为顶级窗口
(1)如果当前窗口不是顶级窗口,把当前窗口设置为顶级窗口
(2)在当前窗口中隐藏的内部窗体
(3)window.top就是当前窗口对应的顶级窗口
window.self表示当前自己这个窗口
当前窗口设置为顶级窗口
child-window 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;}}}
4. history和location对象
(1)通过一个页面跳转到另一个页面,可以调用window.history.back()或者window.history.go(-1)完成后退上一步
(2)调用window.history.go(1)前进到下一步
history对象 007页面
007 007 page!
修改地址栏的内容,调用:window.location.href,其中href可以省略;或者调用document.location.href,同样href可以省略
设置浏览器地址栏上的URL function goBaidu(){ // 第一种方法:调用window.location.hrefvar 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.hrefdocument.location.href = "http://www.sina.com.cn"; // href可省略document.location = "http://www.tmall.com";}
5. 总结有哪些方法可以通过浏览器往服务器发请求
(1)表单form的提交。
(2)超链接。用户只能点击这个超链接
(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对象的形式存在
JSON // 创建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);}
复杂一点的JSON
复杂一些的JSON对象。 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"}]};
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};
eval函数 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"]);
3. 设置table的tbody
取出JSON中的数据,把它放到tbody当中
设置table的tbody // 有这些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 += "";html += ""+emp.empno+" ";html += ""+emp.ename+" ";html += ""+emp.sal+" ";html += " ";}document.getElementById("emptbody").innerHTML = html;document.getElementById("count").innerHTML = data.total;}}员工信息列表
员工编号 员工名字 员工薪资 <!--7369 SMITH 800 7369 SMITH 800 7369 SMITH 800 -->
总共0条数
结束语
今天的分享就到这里啦!快快通过下方链接注册加入刷题大军吧!
各种大厂面试真题在等你哦!
💬刷题神器,从基础到大厂面试题👉点击跳转刷题网站进行注册学习