> 文档中心 > Web前端 | JavaScript(BOM编程和JSON)

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-windowwindow.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页面 
007007 page!

修改地址栏的内容,调用:window.location.href,其中href可以省略;或者调用document.location.href,同样href可以省略

设置浏览器地址栏上的URLfunction 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;}}

员工信息列表


<!---->
员工编号员工名字员工薪资
7369SMITH800
7369SMITH800
7369SMITH800
总共0条数

结束语

今天的分享就到这里啦!快快通过下方链接注册加入刷题大军吧!

各种大厂面试真题在等你哦!
💬刷题神器,从基础到大厂面试题👉点击跳转刷题网站进行注册学习

 

CC优途网