p1/53 javascript概述
p2/53 HTML中嵌入javascript的第一种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中嵌入javascript的第一种方式</title>
</head>
<body>
<!-- 1、实现功能：点击按钮，弹出消息框
2、JS是事件驱动语言
3、事件和事件句柄
-->
<input type="button" value="hello" onclick="window.alert('hello js')"/>
<input type="button" value="hello" onclick="window.alert('hello zhangsan')"/>
<!-- 好消息，window.可以省略 -->
<input type="button" value="hello" onclick="alert('hello mahzongjie')
alert('hello hajinwei')"
"/>
</body>
</html>
p3/53 回顾
p4/53 HTML中嵌入javascript的第二种方式
<script type="text/javascript">
// 暴露在脚本块中的代码,不需要事件的驱动,在页面打开时就执行
window.alert("hello first")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中嵌入javascript的第二种方式</title>
<script type="text/javascript">
// 暴露在脚本块中的代码,不需要事件的驱动,在页面打开时就执行
window.alert("hello ppp1")
window.alert("hello ppp12")
window.alert("hello ppp13")
window.alert("hello ppp14")
</script>
</head>
<body>
<!-- 脚本块的方式 -->
<script type="text/javascript">
// 暴露在脚本块中的代码,不需要事件的驱动,在页面打开时就执行
window.alert("hello js1")
window.alert("hello js2")
window.alert("hello js3")
window.alert("hello js4")
</script>
<input type="button" value="hello" />
<input type="button" value="hello" />
<!-- 好消息，window.可以省略 -->
<input type="button" value="hello" />
</body>
</html>
<script type="text/javascript">
// 暴露在脚本块中的代码,不需要事件的驱动,在页面打开时就执行
window.alert("hello last")
</script>
p5/53 HTML中嵌入javascript的第三种方式
p6/53 JS的标识符【回顾java中的标识符和关键字】
p7/53 回顾java中的变量
p8/53 JS的变量
p9/53 JS的函数初步
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS的函数</title>
</head>
<body>
<script type="text/javascript">
/* 1、js中的函数类似于java中的方法
2、格式：
function 函数名（形式参数列表）{
函数体；
}
*/
function sum(a,b){
alert(a+b);
}
// 函数必须调用才会执行
//sum(10,20);
//定义函数sayHello
function sayHello(username){
alert("hello"+username);
}
//sayHello("mazhongjie");
</script>
<input type="button" name="" id="" value="hello" onclick="sayHello('hajinwei')"/>
<input type="button" name="" id="" value="计算10和20的和" onclick="sum(10,20)"/>
</body>
</html>
p10/53 JS的函数初步2
p11/53 全局变量和局部变量
p12/53 JS的数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS中的数据类型</title>
</head>
<body>
<script type="text/javascript">
function sum(a,b){
if(typeof a == "number" && typeof b == "number") {
return a+b;
}
alert(a+","+b+"必须都是数字");
}
var retValue = sum(2,4);
alert(retValue);
var retValue2 = sum(false,"jack");//
alert(retValue2);//undefined
var i;
alert(typeof i);//undefined
var k = 10;
alert(typeof k);
var f = "abc";
alert(typeof f);
var d = null;
alert(typeof d);
var flag = false;
alert(typeof flag);
var obj = new Object();
alert(typeof obj);
</script>
</body>
</html>
p13/53 JS的数据类型【Undefined类型】
p14/53 JS的数据类型【Number类型】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function sum(a,b){
if(isNaN(a) || isNaN(b)){
alert("参与运算的必须都是数字");
return;
}
return a+b;
}
var retValue = sum(3,67.88);
alert(retValue);
sum(false,"aaa");
alert(parseInt(33.00000084586));
alert(parseFloat(3.14)+1);
alert(Math.ceil(3.5));
</script>
</body>
</html>
p15/53 JS的数据类型【Boolean类型】
if（）语句后面只能是true和false
p16/53 回顾数据类型【捎带着讲了下面试技巧】
JS是一种弱类型语言
没有函数重载，后面的函数会自动覆盖前面的同名函数。
局部变量在函数体内定义的
函数的形参是局部变量
定义时不是使用var，不管是在哪个位置定义，都是全局变量
typeof运算结果是字符串。
面试技巧
p17/53 String数据类型【1、大String和小String的区别2、substr和substring的区别】
p18/53 Object数据类型
p19/53 Object数据类型2【定义类和构造函数同时完成】
p20/53 Object数据类型【prototype（）】
p21/53 null、NaN和undefined的区别
p22/53 JS中的常用事件【概述】
p23/53 注册事件的两种方式【1、注册事件的第一种方式2、回调函数的概念】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册事件的第一种方式</title>
</head>
<body>
<script type="text/javascript">
function doSome(){
alert("do some..........");
}
</script>
<input type="button" name="" id="" value="dosome" onclick="doSome()"/>
</body>
</html>
p24/53 注册事件的第二种方式【使用纯js代码完成】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册事件的第二种方式</title>
</head>
<body>
<input type="button" name="" id="mybutton" value="doOther" />
<input type="button" name="" id="mybtn2" value="hello" />
<!-- <script type="text/javascript">
function doOther(){
alert("do Other..............");
}
var btnObj = document.getElementById("mybutton");
btnObj.onclick = doOther;//此处方法名不能加小括号，也不能加双引号
</script> -->
<!-- 合并在一起 -->
<script type="text/javascript">
document.getElementById("mybtn2").onclick = function(){
alert("hello hello hello");
}
</script>
</body>
</html>
p25/53 JS代码的执行顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// window.onload = ready;
// function ready(){
// var btn = document.getElementById("btn");
// btn.onclick = function(){
// alert("啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊");
// }
// }
window.onload = function (){
document.getElementById("btn").onclick = function(){
alert("啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊");
}
}
</script>
<input type="button" name="" id="btn" value="hello" />
</body>
</html>
p26/53 JS代码设置节点的属性【将文本框修改为复选框】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>018-JS代码设置节点的属性【将文本框修改为复选框】</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function(){
var mytext = document.getElementById("mytext");
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext"/>
<input type="button" id="btn" value="将文本框修改为复选框" />
</body>
</html>
p27/53 JS捕捉回车键【输入用户名和密码后直接回车键登录】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>019-JS代码捕捉回车键</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
var usernameElt = document.getElementById("username");
//获取键值。如果是回车键，再执行。
//回车键的键值是13
//ESC的键值是27
//下面的参数e表示接收了浏览器调用函数时发生的事件，即keydown事件
usernameElt.onkeydown = function(event){
//获取键值
//对于键盘事件来说。都有keyCode属性来获取键值
//alert(event.keyCode);
if(event.keyCode === 13){
alert("正在进行验证！");
}
};
}
</script>
<input type="text" name="" id="username" />
</body>
</html>
p28/53 JS捕捉回车键【理解】
p29/53 void 运算符【面试题：2变成8（位运算）、面试技巧】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>void运算符</title>
</head>
<body>
<p>页面顶部</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript:void(0000)" onclick="window.alert('test code')">既保留住超链接的样式
同时用户点击该连接的时候执行一段js代码，但页面不能跳转</a>
</body>
</html>
p30/53 JS之控制语句
p31/53 设置和获取文本框的value
BOM和DOM的关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <script type="text/javascript">
window.onload = function(){
var btnObj = document.getElementById("btn");
alert(btnObj);
}
</script>
<input type="button" id="btn" value="hello" /> -->
<script type="text/javascript">
window.onload = function(){
var btnEle = window.document.getElementById("btn");
btnEle.onclick = function (){
// var usernameEle = window.document.getElementById("username");
// //alert(usernameEle.value);
// var username = usernameEle.value;
// alert(username);
//上面代码可以合并在一起写
alert(document.getElementById("username").value);
//可以修改它的value
//document.getElementById("username").value = "张三";
//点击button，使上面文本框的值填入下面文本框中
//document.getElementById("username1").value = (document.getElementById(("username2").value));
}
document.getElementById("setbtn").onclick = function(){
//alert(document.getElementById("username1").value);
document.getElementById("username2").value = (document.getElementById("username1").value);
}
}
</script>
<input type="text" name="" id="username" />
<input type="button" name="" id="btn" value="获取文本框的value" />
<hr >
<hr >
<input type="text" name="" id="username1" value="" />
<input type="text" name="" id="username2" value="" />
<input type="button" name="" id="setbtn" value="将第一个文本框的数据赋值到第二个文本框中" />
</body>
</html>
失焦事件onblur
<input type="text" onblur="alert(this.value)"/>
p32/53 innerHTML和innerText操作div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background: greenyellow;
width: 300px;
height: 400px;
position: absolute;
top: 80px;
left: 40px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
var btnEle = document.getElementById("btn");
btnEle.onclick = function(){
//设置div内容，
//第一步：获取div对象
var divElt = document.getElementById("div1");
//divElt.innerHTML = "这是一个测试的方法";
//divElt.innerHTML = "<font color='black'>用户名不能为空</font>";
divElt.innerText = "<font color='black'>用户名不能为空</font>";
}
}
</script>
<input type="button" name="" id="btn" value="设置div中的内容" />
<div id="div1" ></div>
</body>
</html>
p33/53 JS-正则表达式
p34/53 JS-邮箱地址的正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
//给按钮绑定click事件
document.getElementById("btn").onclick = function(){
var email = document.getElementById("email").value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.test(email);
var span = document.getElementById("emailError");
//alert(ok?'邮箱格式正确':'邮箱格式错误，请重新输入！');
if(ok){
span.innerText = "邮箱格式合法，请输入密码！";
}else{
span.innerText = "邮箱格式不合法，请重新输入！";
}
}
//给文本框绑定focus
document.getElementById("email").onfocus = function (){
document.getElementById("emailError").innerText = "";
}
}
</script>
<input type="text" name="" id="email" value="" />
<input type="button" name="" id="btn" value="验证邮箱" />
<span id="emailError" style="color: red;font-size: 12px; position: absolute;top: 40px;left: 20px;"></span>
</body>
</html>
p35/53 JS-扩展字符串的trim函数【去除用户名的前后空白】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
String.prototype.trim = function (){
//alert("扩展之后的trim方法")
//去除空白
return this.replace(/^\s+/,"").replace(/\s+$/,"")
}
window.onload = function(){
document.getElementById("btn").onclick = function(){
var username = document.getElementById("username").value;
//去除前后空白
username = username.trim();
alert("--------->"+username+"<----------");
}
}
</script>
<input type="text" name="" id="username" value="" />
<input type="button" name="" id="btn" value="获取用户名" />
</body>
</html>
p36/53 回顾JS
p37-40/53 表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span{
color: red;
font-size: 12px;
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
/* ==================================验证用户名=============================== */
//拿到usernameElt文本框
var usernameElt = document.getElementById("username");
//在右侧span中提示信息。拿到usernameinfoElt框
var usernameinfoElt = document.getElementById("usernameinfo");
//给用户名文本框绑定onblur事件
usernameElt.onblur = function(){
//拿到用户名的输入值
var username = usernameElt.value;
//去除空白
username = username.trim();
// 判断用户名是否为空
if(username){
//走到这里，说明用户名不为空，继续判断用户名是否合法;
//1、判断用户名是否为4-16位
if(username.length<6 || username.length>14){
usernameinfoElt.innerText = "用户名长度必须在[6,14]之间";
}else{
//创建正则表达式，判断是否是只有数字和字母组成
var usernameregExp = /^[A-Za-z0-9]+$/;
var usernameOk = usernameregExp.test(username);
if(usernameOk){
usernameinfoElt.innerText = "";//用户名合法
}else{
usernameinfoElt.innerText = "用户名只能由字母和数字组成";
}
}
}else{
usernameinfoElt.innerText = "用户名不能为空";
}
}
//给用户名文本框绑定focus事件
usernameElt.onfocus = function(){
//usernameElt.value = "";//光标放在文本框中时，将之前输入的空白删除。但是注意，只删除非法信息。
/* if(不合法){
usernameElt.value = "";
} */
//怎么判断是否合法呢，只要后面usernameinfo有提示信息，就表示不合法
if(usernameinfoElt.innerText != ""){
usernameElt.value = "";
}
//清空
usernameinfoElt.innerText = "";//清空span提示框
}
/* ==================================验证密码=============================== */
//验证密码，主要验证密码和确认密码是否一致
//获取确认密码框对象
var password2Elt = document.getElementById("password2");
//获取确认密码提示框
var password2info = document.getElementById("password2info");
//绑定blur事件
password2Elt.onblur = function(){
//获取密码和确认密码
var password = document.getElementById("password").value;
var password2 = password2Elt.value;
if(password === password2){
}else{
password2info.innerText = "两次输入密码不一致";
}
}
//给密码确认绑定focus事件
password2Elt.onfocus = function(){
if(password2info.innerText != ""){
password2Elt.value = "";
}
//清空
password2info.innerText = "";//清空span提示框
}
/* ==================================验证邮箱=============================== */
//给邮箱文本框绑定onblur事件
var emailElt = document.getElementById("email");
//获取emailinfo提示框
var emailinfoElt = document.getElementById("emailinfo");
emailElt.onblur = function (){
//拿到邮箱的value
var email = emailElt.value;
//去除空白
email = email.trim();
//判断邮箱是否合法
if(email){
//创建验证邮箱的正则表达式
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g;
var emailOk = emailRegExp.test(email);
if(emailOk){
//邮箱合法
}else{
emailinfoElt.innerText="邮箱格式不正确";
}
}else{
emailinfoElt.innerText="邮箱不能为空";
}
}
//给邮箱绑定focus事件
emailElt.onfocus = function(){
if(emailinfoElt.innerText != ""){
emailElt.value = "";
}
//清空
emailinfoElt.innerText = "";//清空span提示框
}
//提交注册
var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function(){
//如果所有表单信息都是合法的。那就提交表单
//模拟focus、blur事件
usernameElt.focus();
usernameElt.blur();
password2Elt.focus();
password2Elt.blur();
emailElt.focus();
emailElt.blur();
if(usernameinfoElt.innerText == "" && password2info.innerText == "" && emailinfoElt.innerText == ""){
//获取表单对象
var userFormElt = document.getElementById("userForm");
userFormElt.submit();//提交表单
}
}
}
</script>
<form id="userForm" action="http://localhost:8080/jd/save" method="get">
<table border="">
<tr>
<th>用户名</th>
<th><input type="text" name="username" id="username" value="" /></th>
<th><span id="usernameinfo" ></span></th>
</tr>
<tr>
<th>密码</th>
<th><input type="password" name="password" id="password" value="" /></th>
</tr>
<tr>
<th>确认密码</th>
<th><input type="password" id="password2" value="" /></th>
<th><span id="password2info"></span></th>
</tr>
<tr>
<th>邮箱</th>
<th><input type="text" name="email" id="email" value="" /></th>
<th><span id="emailinfo"></span></th>
</tr>
<tr>
<th><input type="reset" name="" id="reset" value="重置" /></th>
<th><input type="button" name="" id="submitBtn" value="注册" /></th>
</tr>
<span id="Info"></span>
</table>
</form>
</body>
</html>
p41/53 复选框的全选和取消
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框的全选和取消全选</title>
</head>
<body>
<script type="text/javascript">
// window.onload = function(){
// var checkAllElt = document.getElementById("checkAll");
// checkAllElt.onclick = function(){
// var aihaos = document.getElementsByName("aihao")//此时获得三个元素，aihaos是一个数组
// //先获取第一个复选框的选中状态
// if(checkAllElt.checked){
// //如果checkAll是选中的,那就全选其他
// //使用for循环遍历aihaos
// for(var i = 0;i<aihaos.length;i++){
// aihaos[i].checked = true;
// }
// }else{
// //取消全选
// for(var i = 0;i<aihaos.length;i++){
// aihaos[i].checked = false;
// }
// }
// }
// }
//简化上面的代码
window.onload = function(){
var checkAll = document.getElementById("checkAll");
var aihaos = document.getElementsByName("aihao");
checkAll.onclick = function(){
for(var i = 0;i<aihaos.length;i++){
aihaos[i].checked = checkAll.checked;
}
}
var all = aihaos.length;
for(var i = 0;i<aihaos.length;i++){
aihaos[i].onclick = function(){
//总数量和选中的数量相等时，就把checkall选中
var checkCount = 0;
for(var i = 0;i<aihaos.length;i++){
if(aihaos[i].checked){
checkCount++;
}
}
// if(all == checkCount){
// checkAll.checked = true;
// }
// else{
// checkAll.checked = false;
// }
//对以上代码改进
checkAll.checked = (all == checkCount);
}
}
}
</script>
<br>
<input type="checkbox" name="" id="checkAll" value="" /><br>
<input type="checkbox" name="aihao" id="smoke" value="" />抽烟<br>
<input type="checkbox" name="aihao" id="drink" value="" />喝酒<br>
<input type="checkbox" name="aihao" id="tt" value="" />烫头<br>
</body>
</html>
p42/53 获取下拉列表选中项9的value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取下拉列表选中项的value</title>
</head>
<body>
<!-- <select name="" οnchange="alert(111)">
<option value ="">--请选择省份--</option>
<option value ="001">河北省</option>
<option value ="002">甘肃省</option>
<option value ="003">陕西省</option>
<option value ="004">黑龙江省</option>
</select> -->
<!-- 改进，使用window.onload方式 -->
<script type="text/javascript">
window.onload = function(){
provinceList.onchange = function(){
alert(provinceList.value)
}
}
</script>
<select id="provinceList">
<option value ="">--请选择省份--</option>
<option value ="001">河北省</option>
<option value ="002">甘肃省</option>
<option value ="003">陕西省</option>
<option value ="004">黑龙江省</option>
</select>
</body>
</html>
p43/53 周期函数setInterval和clearInterval
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>008-显示网页时钟</title>
</head>
<body>
<script type="text/javascript">
<!-- 关于JS中获取系统当前时间/日期 -->
var nowDate = new Date();
//document.write(nowDate);//Thu Apr 22 2021 10:39:48 GMT+0800 (中国标准时间)
//转换一下日期的显示格式
nowDate = nowDate.toLocaleString();
document.write(nowDate);//2021/4/22上午10:42:27
document.write("<br>");
document.write("<br>");
document.write("<br>");
//可以自定义显示格式
var t = new Date();
var year = t.getFullYear();
var month = t.getMonth();//0-11
var day = t.getDate();//获取日信息
document.write(year+"年"+(month+1)+"月"+day+"日");
document.write("<br>");
document.write("<br>");
document.write("<br>");
//重点，怎么获取毫秒数？从1970年1月1日
var times = t.getTime()
document.write(times);//一般会将毫秒数当作时间戳
document.write("<br>");
document.write("<br>");
//合并
document.write(new Date().getTime())
</script>
<br><br><br>
<!-- 点击按钮，显示系统时间 -->
<script type="text/javascript">
function displayTime(){
var nowTime = new Date();
nowTime = nowTime.toLocaleString();
document.getElementById("timeDiv").innerText = nowTime;
}
//上面函数存在一个问题，就是点击之后才会显示时间，不会自动更新显示的时间，如何解决？每隔一秒调用这个函数即可。
function start(){
//从这行代码开始，每隔1s就会自动调用第三playTime（）函数
v = window.setInterval("displayTime()",1000);//变量前面不加var，就是一个全局变量。
}
//如停止时间显示呢
function stop(){
window.clearInterval(v);
}
</script>
<input type="button" name="" id="timebtn" value="显示系统时间" onclick="start();"/>
<input type="button" name="" id="timebtnstop" value="停止显示时间" onclick="stop();"/>
<div id="timeDiv">
</div>
</body>
</html>
p44/53 内置支持类array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>009-内置支持类array</title>
</head>
<body>
<script type="text/javascript">
//创建数组方法1
var s = [1,2,34,4,"abc",3,14,false];
//document.write(s);
document.write(s.length);
s[9] = "mazhongjie";
document.writeln();
for(var i = 0;i<s.length;i++){
document.write(s[i]+"<br>");
}
//创建数组方法2
var s3 = new Array(3);//只有一个参数3代表数组长度
document.write(s3.length);
document.write("<br>");
var s4 = new Array(3,2);//两个及以上参数代表具体的值
document.write(s4.length);
document.write("<br>");
//常用方法.连接
var a1 = [1,3,5,8];
var str1 = a1.join("-");
document.write(str1);
document.write("<br>");
//反转数组
var a2 = a1.reverse();
var str2 = a2.join("=");
document.write(str2);
document.write("<br>");
//自动模拟栈数据结构push
a1.push(100);
a1.push(99);
for(var i = 0;i<a1.length;i++){
document.write(a1[i]+"<br>");
}
document.write("+++++++++++++++++++++++++++++++");
//自动模拟栈数据结构pop
a1.pop();
for(var i = 0;i<a1.length;i++){
document.write(a1[i]+"<br>");
}
</script>
</body>
</html>
p45/53 BOM编程，window的open和close
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window窗口的open和close</title>
</head>
<body>
<script type="text/javascript">
</script>
<input type="button"value="开启百度(新窗口)" οnclick="window.open('https://www.baidu.com');"/>
<input type="button"value="开启百度(当前窗口)" οnclick="window.open('https://www.baidu.com','_self');"/>
<input type="button"value="开启百度(新窗口)" οnclick="window.open('https://www.baidu.com','_blank');"/>
<input type="button"value="开启百度(父窗口)" οnclick="window.open('https://www.baidu.com','_parent');"/>
<input type="button"value="开启百度(顶级窗口)" οnclick="window.open('https://www.baidu.com','_top');"/>
<input type="button"value="打开马仲杰的主页" οnclick="window.open('马仲杰的主页.html');"/>
</body>
</html>
p46/53 BOM编程弹出确认框alert（）和confirm（）
<!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("正在删除")
}else{
}
}
</script>
<input type="button" name="" id="" value="弹出消息框" onclick="window.alert('消息框!')"/>
<input type="button" name="" id="" value="弹出确认框[是否删除]" onclick="window.del();" />
</body>
</html>
p47/53 BOM编程history和location
前进和后退
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>007</title>
</head>
<body>
007页面
<input type="button" name="" id="" value="后退1" onclick="window.history.back()"/>
<input type="button" name="" id="" value="后退2" onclick="window.history.go(-1)"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history</title>
</head>
<body>
<a href="007.html">007页面</a>
<input type="button" name="" id="" value="前进" onclick="window.history.go(1)"/>
</body>
</html>
location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location</title>
</head>
<body>
<script type="text/javascript">
function goBaidu(){
window.location.href="https://baidu.com";
}
</script>
<input type="button" name="" id="" value="百度" onclick="goBaidu()"/>
</body>
</html>
<!-- 浏览器向服务器发请求的方法
1、超链接
2、表单form的提交
3、document.location
4、window.location
5、window.open('url')
-->
p48/53 补录p47location和顶级窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
005页面
<script type="text/javascript">
//如果005页面不是当前页面的顶层窗口的话，就将当前窗口改为顶层窗口
function setTop(){
//console.log((window.top != window.self))
if(window.top != window.self){
//如果当前窗口不是顶级窗口的话，就将其设置为顶级窗口
window.top.location = window.self.location;
}
}
</script>
<input type="button" name="" id="" value="改为顶层窗口" onclick="setTop();" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
</script>
<iframe src="005.html" width="800" height="400"></iframe>
</body>
</html>
p49/53 JSON在开发中应用【比较XML和JSON】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//使用JSON定义类，创建对象
var studentObj = {
"sno":"110",
"sname":"张三",
"sex":"男",
}
//访问JSON对象
alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex);
//在JS中定义类，创建对象
Student = function(sno,sname,sex){
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
var s1 = new Student("11","张三","男");
alert("学号:"+s1.sno+",姓名:"+s1.sname+",年龄:"+s1.sex);
//JSON数组
var students = [
{"sno":"120","sname":"李四","sex":"男"},
{"sno":"121","sname":"王五","sex":"男"},
{"sno":"122","sname":"张麻子","sex":"男"},
];
for(var i=0;i<students.length;i++){
alert("学号:"+students[i].sno+",姓名:"+students[i].sname+",年龄:"+students[i].sex);
}
</script>
</body>
</html>
p50/53 JSON在开发中应用2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>002-复杂一点的JSON</title>
</head>
<body>
<script type="text/javascript">
var user = {
"usercode" : "110",
"username" : "张三",
"sex" : "男" ,
"address" : {
"city": "北京市",
"street":"大兴区",
"zipcode":"1212121",
},
"aihaos":["somke","drink","tt"]
};
alert(user.username+"居住在"+user.address.city);
//设计一个JSON格式的数据描述班级中的每一个人的信息以及总人数
var JSON = {
"totalNum":3,
"students":[
{"sno":"111","sname":"张三","sex":"男"},
{"sno":"112","sname":"李四","sex":"女"},
{"sno":"113","sname":"王五","sex":"男"}
],
}
alert("班级总人数为"+JSON.totalNum+","+JSON.students[0].sno+","+JSON.students[0].sname+","+JSON.students[0].sex);
alert("班级总人数为"+JSON.totalNum+","+JSON.students[1].sno+","+JSON.students[1].sname+","+JSON.students[1].sex);
alert("班级总人数为"+JSON.totalNum+","+JSON.students[2].sno+","+JSON.students[2].sname+","+JSON.students[2].sex);
</script>
</body>
</html>
p51/53 JSON在开发中应用3【eval函数】
p52/53 JSON在开发中应用4【面试题】
JS中，[ ]和{ }的区别：
中括号是数组，大括号是JSON
p53/53 JSON在开发中应用5【设置table的tbody】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>005-设置table的tbody</title>
</head>
<body>
<script type="text/javascript">
//有这些JSON数据
var data = {
"total":4,
"emps":[
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7369,"ename":"SMITH","sal":800.0}
]
};
//点击按钮显示员工信息列表，将上面的JSON数据显示到下面的表格中
//第一步：先拿到按钮
window.onload = function(){
var displayBtnElt = document.getElementById("displayBtn");
displayBtnElt.onclick = function(){
var emps = data.emps;
//准备一个html变量接收拼好的串
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>";
}
//要往tbody中写，先拿到tbody对象
document.getElementById("emptbody").innerHTML = html;
document.getElementById("count").innerHTML = data.total;
}
}
</script>
<input type="button" name="" id="displayBtn" value="显示员工列表" />
<hr >
<table border="1px" cellspacing="" cellpadding="">
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
<tbody id="emptbody">
<!-- <tr>
<th>7369</th>
<th>SMITH</th>
<th>800</th>
</tr>
<tr>
<th>7369</th>
<th>SMITH</th>
<th>800</th>
</tr>
<tr>
<th>7369</th>
<th>SMITH</th>
<th>800</th>
</tr> -->
</tbody>
</table>
总共<span id="count">0</span>条记录
</body>
</html>
================================================================================================================================================2021.4.22完结
2021.5.12第一遍复习
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
