JavaScript笔记06

最新推荐文章于 2023-10-13 19:38:09 发布

最爱琴女E

最新推荐文章于 2023-10-13 19:38:09 发布

阅读量213

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qwq_666/article/details/112428276

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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>

最爱琴女E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记06

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对象是顶级对象，代表浏览器窗口
复制链接

扫一扫