DOM
009-内置支持类Array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置支持类Array</title>
</head>
<body>
<script type="text/javascript">
/*
//创建长度为0的数组
var arr = [];
alert(arr.length);
//数据类型随意
var arr1=[1,1.1,false,true,"aaa"];
alert(arr1.length);
//下标会越界吗
arr1[6]="xxx";//自动扩容
//遍历
for(var i=0;i<arr1.length;i++){
document.write(arr1[i]+"<br>");
}
//另一种创建数组的办法
var arr2 = new Array();
alert(arr2.length);//0
var arr3 = new Array(5);//5表示长度
alert(arr3.length);//5
var arr4 = new Array(5,6);//表示5,6两个元素
alert(arr4.length);//2
*/
var a = [1,2,3,4];
var str = a.join("-");
alert(str);//1-2-3-4
//在数组的末尾添加一个元素(数组长度+1)
a.push(5);
alert(a.join("*"));//1*2*3*4*5
//将数组末尾的元素弹出(数组长度-1)
var endElt = a.pop();
alert(endElt);
alert(a.join("-"));//1-2-3-4
// 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
// push压栈
// pop弹栈
//反转数组
a.reverse();
alert(a.join("~"));//4~3~2~1
</script>
</body>
</html>
BOM
001-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('https://www.baidu.com');" />
<input type="button" value="开启百度(当前窗口)" onclick="window.open('https://www.baidu.com','_self');" />
<input type="button" value="开启百度(新窗口)" onclick="window.open('https://www.baidu.com','_blank');" />
<input type="button" value="开启百度(父窗口)" onclick="window.open('https://www.baidu.com','_parent');" />
<input type="button" value="开启百度(顶级窗口)" onclick="window.open('https://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>
003-弹出消息框和确认框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹出消息框和确认框</title>
</head>
<body>
<script type="text/javascript">
function del(){
/*
var ok=window.confirm("亲，确认删除吗？");
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>
004-当前窗口设置为顶级窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>当前窗口设置为顶级窗口</title>
</head>
<body>
<iframe src="005-child-window.html"></iframe>
</body>
</html>
005-child-window
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>child-window</title>
</head>
<body>
child window.
<script type="text/javascript">
window.onload=function(){
var btn = document.getElementById("btn");
btn.onclick=function(){
if(window.top != window.self){
window.top.location=window.self.location;
}
}
}
</script>
<input type="button" value="将当前窗口设置为顶级窗口" id="btn"/>
</body>
</html>
006-history对象
<!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>
007
<!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>
008-设置浏览器地址栏上的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.126.com";
//document.location.href="http://www.sina.com.cn";
document.location="http://www.sina.comc.cn";
}
</script>
<input type="button" value="新浪" onclick="goBaidu()" />
<input type="button" value="baidu" onclick="window.open('http:///www.baidu.com')" />
</body>
</html>
<!--
总结，有哪些方法可以通过浏览器往服务器发请求？
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
001-JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
<body>
<script type="text/javascript">
/*
1、什么是JSON，有什么用？
JavaScript Object Notation (JavaScript对象标记)，简称JSON。(数据交换格式)
JSON主要的作用是:一种标准的数据交换格式。(目前非常流行，90%以上的系统，系统A和系统B交换数据的话，都是采用JSON。)
2、JSON是一种标准的轻量级的数据交换格式。特点是：
体积小，易解析。
3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
XML体积大，解析麻烦，但是有优点：语法严谨。(通常银行相关的系统之间进行数据交换的话会使用XML。)
4、JSON的语法格式：
var jsomObj={
"属性名"："属性值"，
"属性名"："属性值"，
"属性名"："属性值"，
"属性名"："属性值"，
"属性名"："属性值"，
......
};
*/
//创建JSON对象(JSON也可称为无类型对象。轻量级，轻巧。体积小。易解析。)
var studentObj={
"son":"101",
"sname":"zhangsan",
"sex":"男"
}
//访问JSON对象的属性
alert(studentObj.son+","+studentObj.sname+","+studentObj.sex);
//之前没有使用JSON的时候,定义类,创建对象,访问对象的属性
Student=function(sno,sname,sex){
this.sno=sno;
this.sname=sname;
this.sex=sex;
}
var stu = new Student("111","lisi","男");
alert(stu.sno+","+stu.sname+","+stu.sex);
//JSON数组
var students = [
{"sno":"101","sname":"zhangsan","sex":"男"},
{"sno":"102","sname":"lisi","sex":"男"},
{"sno":"103","sname":"wangwu","sex":"男"}
];
//遍历
for(var i=0;i<students.length;i++){
var stuObj = students[i];
alert(stuObj.sno+","+stuObj.sname+","+stuObj.sex);
}
</script>
</body>
</html>
002-复杂一些的JSON对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复杂一些的JSON对象</title>
</head>
<body>
<script type="text/javascript">
var user={
"usercode":"101",
"username":"zhangsan",
"sex":"true",
"address":{
"city":"西安",
"street":"雁塔区",
"zipcode":"710404"
},
"aihao":["smoke","drink","tt"],
};
//访问人名以及居住的城市
alert(user.username+"居住在"+user.address.city);
/*
请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
*/
var class = {
"total":"4",
"students":[
{"sname":"jack","sno":"1","sex":"nan"},
{"sname":"john","sno":"2","sex":"nan"},
{"sname":"rose","sno":"3","sex":"nv"},
{"sname":"lucy","sno":"4","sex":"nv"},
]
};
</script>
</body>
</html>
003-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);
*/
//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);// 在前端取数据
/*
面试题：
在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":"zhangsan"
};
//JS中访问json对象的属性
alert(json.username);
//JS中访问json对象的属性
alert(json["username"]);
</script>
</body>
</html>
004-设置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":7368,"ename":"SMITH1","sal":1800.0},
{"empno":7367,"ename":"SMITH2","sal":2800.0},
{"empno":7366,"ename":"SMITH3","sal":3800.0}
]
};
//希望把数据展示到table中
window.onload=function(){
var dispalyBtnElt=document.getElementById("dispalyBtn");
dispalyBtnElt.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="dispalyBtn" />
<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>
|