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);//定义函数sayHellofunction 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);//undefinedvar i;alert(typeof i);//undefinedvar 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 = "邮箱格式不合法，请重新输入！";}}//给文本框绑定focusdocument.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 (){//拿到邮箱的valuevar 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:27document.write("<br>");document.write("<br>");document.write("<br>");//可以自定义显示格式var t = new Date();var year = t.getFullYear();var month = t.getMonth();//0-11var 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">//创建数组方法1var 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>");}//创建数组方法2var 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>");//自动模拟栈数据结构pusha1.push(100);a1.push(99);for(var i = 0;i<a1.length;i++){document.write(a1[i]+"<br>");}document.write("+++++++++++++++++++++++++++++++");//自动模拟栈数据结构popa1.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.location4、window.location5、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第一遍复习

深入浅出JavaScript-老杜JavaScript基础教程全套完整版+老杨JS应用篇相关推荐

  1. 计算机电路知识,计算机电路基础教程（完整版）

    计算机电路基础教程(完整版) 名称:计算机电路基础教程(完整版)分类:电脑基础  点击:加载中主讲:时间:2014-10-13 09:22 计算机电路基础教程(完整版)相关介绍 计算机电路是计算机专业 ...

  2. 最新640页的 Python3.9 基础教程，完整版 PDF开放下载！

    前言 python入门虽然简单,很多新手依然卡在基础安装阶段,大部分教程对一些基础内容都是一带而过,好多新手朋友,对一些基础知识常常一知半解,需要在网上查询很久. 扎实的基础知识,对之后的学习.工作都 ...

  3. 尚硅谷2020最新版SpringCloud(H版alibaba)框架开发教程全套完整版从入门到精通

    01_前言闲聊和课程说明 02_零基础微服务架构理论入门 03_第二季Boot和Cloud版本选型 04_Cloud组件停更说明 05_父工程Project空间新建 06_父工程pom文件 07_复习 ...

  4. 麒麟子Javascript游戏编程零基础教程大纲

    大家好,我是麒麟子, 开源项目<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 开源项目地址(Github与Gitee同步更新): Github ht ...

  5. python全栈开发实战pdf老男孩_Python教程:2017年老男孩最新全栈python第2期视频教程全套完整版...

    教程名称:2017年老男孩最新全栈python第2期视频教程全套完整版 教程目录: day01-python 全栈开发–基础篇 day02-python 全栈开发-基础篇 day03-python 全 ...

  6. Python从入门到精通全套完整版教程（懂中文就能学会）

    兄弟!毫无套路!!! Python从入门到精通全套完整版教程(懂中文就能学会) 福利分享: 本套视频一共400集,共分4季 第一季 Python基础 第二季 Python深入和扩展 第三季 网络编程. ...

  7. 【转】傅里叶分析之掐死教程（完整版）更新于2014.06.06

    转自:傅里叶分析之掐死教程(完整版)更新于2014.06.06 - 知乎 作 者:韩 昊 知 乎:Heinrich 微 博:@花生油工人 知乎专栏:与时间无关的故事 谨以此文献给大连海事大学的吴楠老师 ...

  8. [转载]傅里叶分析之掐死教程（完整版）更新于2014.06.06 - 与时间无关的故事 - 知乎专栏...

    傅里叶分析之掐死教程(完整版)更新于2014.06.06 Heinrich 作 者:韩 昊 知 乎:Heinrich 微 博:@花生油工人 知乎专栏:与时间无关的故事 谨以此文献给大连海事大学的吴楠老 ...

  9. pandas数据分析给力教程【完整版】（五）

    pandas的拼接操作 上一篇:pandas数据分析给力教程[完整版](四) 下一篇:pandas数据分析给力教程[完整版](六) pandas的拼接分为两种: 级联:pd.concat, pd.ap ...

最新文章

  1. Using Apache2 with JBoss AS7 on Ubuntu
  2. 嬴彻科技拿下SemanticKITTI榜单两项第一
  3. 数据分析系列：绘制折线图（matplotlib）
  4. php-v 查看不到版本,解決php -v查看到版本於phpinfo()打印的版本不一致問題
  5. exe打包工具哪个最好_一键分发工具哪个最好用？这款30万人都在用，很优秀！...
  6. import java.util_importjava.util.*；classKeyMaster{publi..._考试资料网
  7. ASP.NET 2.0 探针
  8. oracle面试上机题,Oracle面试题附带答案
  9. 传奇服务器怎么修改背包金刚石显示,教你在服务器加自己的装备
  10. Folium库使用心得（二）
  11. 计算机最强网卡价格,高下一目了然 随手怒拆价值十万元整机
  12. iOS开发证书/发布证书不受信任
  13. php微信调用摄像头拍视频,公众号调用摄像头录制视频
  14. 手机费用查询2007.3~7
  15. PHP案例：每一个账号登陆后的操作是隔离的（使用token进行登录）
  16. 【Linux】基于Ncurse图形库的贪吃蛇（C语言）
  17. 程序员是如何低调炫富的？
  18. 苹果设备收到家庭/日历垃圾邀请信息怎么办？
  19. 在web中如何调整上传过的图片方向 (exif)
  20. Linux candence spi驱动理解

热门文章

  1. linux中安装软件格式错误,linux安装文件报错
  2. java基础入门-16-【阶段项目（综合练习doudizhu游戏）】
  3. 手机云便签App敬业签怎么使用同步功能修复异常数据？
  4. docker编译go代码时报dial tcp xxx.xxx.xxx.xxx io timeout错误
  5. 上海南京路苹果零售店即将开业(图),3JI9
  6. （批量）删除企微通讯录成员
  7. java js 二级联动下拉列表_JS实现下拉列表的二级联动
  8. 中国电子信息百强企业网-2006年（第20届）电子信息百强企业名单
  9. 中兴交换机ZXR10-2950如何做mac地址和ip绑定端口？
  10. ubuntu18安装好驱动，关机之后失效，NVIDIA驱动失效简单解决方案：NVIDIA-SMI has failed because it couldn‘t communicate with the