一、ECMAScript基本语法
1.js语句
1.1if语句
单分支：
if(关系表达式){
}
双分支：
if(关系表达式){
}else{
}
多分支：
if(关系表达式1){
}else if(关系表达式2){
}
…
else{
}
注意：如果if语句代码块中只有一行代码，则可以省略{}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> //单分支 //特点：要么执行，要么不执行 /*var num1 = 10; if(num1 < 20){ alert("成立"); }*/ //双分支 //特点：实现了二选一的操作，类似于三目运算符，二者之间可以进行相互转换 var num1 = 10; /* if(num1 > 20){ alert("成立"); }else{ alert("不成立"); }*/ /*if(num1 % 2 == 0){ alert("偶数"); }else{ alert("奇数"); }*/ //多分支 //特点：不管有多少个分支，都只会执行其中的一个分支【从上往下依次判断】 var n = 3; if(n > 1){ alert("aa"); }else if(n > 2){ alert("bb"); }else if(n > 3){ alert("cc"); }else{ alert("dd"); } //if，if-else,if-else if-else之间的区别 if(n > 1){ alert("aa"); } if(n > 2){ alert("bb"); } if(n > 3){ alert("cc"); }else{ alert("dd"); } if(n > 3){ alert("cc"); }else if(n > 4){ alert("dd"); }else{ alert("ee"); } //嵌套if语句 if(n > 1){ if(n > 2){ alert("hello"); } } //等价写法 if(n > 1 && n > 2){ alert("hello"); } //如果书写一个永远成立的条件 if(true){ } if(1){ } //0，0.0,false,null,假 /* * 练习：求两个数的最大值 * 判断是否是闰年 */ </script> </body> </html>
1.2switch语句
作用：和if语句多分支类似，实现多选一的操作
语法：switch case break default
switch(变量){
case 常量1：{
语句1；
break；
}
case 常量2：{
语句2；
break；
}
。。。。
default:{
}
}
工作原理：根据表达式或者变量的值从上往下进行匹配，如果case分支中的值能够匹配到，则执行对应的分支，整个switch-case语句结束，如果所有的case分支都不匹配，则执行default中的语句
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var str = "h"; //注意1：变量的值和case后面常量的类型最好保持一致 switch(str){ default:{ document.write("不做任何处理<br />"); break; } case "b":{ document.write("残忍拒绝<br />"); break; } case "g":{ document.write("欣然接受<br />"); break; } } //注意2：break的使用，作用是阻止向下穿透【直接跳出整个switch-case语句】 //注意3：case分支和default分支书写的顺序和执行的顺序无关，都是先执行case分支，如果所有的case分支都匹配不上，则才执行default //注意4：如果default书写在case的前面或者中间，则需要添加break，最好将default书写在case分支的后面【类似于if多分支中的else】 //注意5：switch在某些个情景下可以if多分支之间进行转换 //练习：根据变量的值，打印对应的星期 </script> </body> </html>
1.3while语句和do-while语句
while语句
初始化表达式；
while(条件表达式){
循环体；
循环之后的操作表达式；
}
do-while语句
初始化表达式；
do{
循环体；
循环之后的操作表达式；
}while(条件表达式)
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //需求：打印0~9的数字 //while var n1 = 0; while(n1 < 10){ document.write(n1 + "<br />"); n1++; } //do-while var n2 = 0; do{ document.write(n2 + "<br />"); n2++; }while(n2 < 10); //区分while和do-while var m1 = 3; while(m1 < 1){ document.write("hello"); } var m2 = 3; do{ document.write("hello~~~~~"); }while(m2 < 1); /* * while:先判断条件，如果条件成立，则执行循环体 * do-while；先执行一次循环体，再去判断条件，如果条件成立，则接着再执行循环体 * do-while不管条件成立与否，至少会执行一次 * while使用频率更广 */ //练习：求1~100之间整数的和 var num = 1; var sum = 0; while(num < = 100){ sum += num; num++; } document.write(sum); </script> </body> </html>
1.4for语句
简单for语句
for(表达式1；表达式2；表达式3){
循环体
}
说明：
表达式1：初始化表达式
表达式2：条件表达式
表达式3：循环之后的操作表达式
执行顺序：1----》2----》循环体----》3----》2----》循环体—》3.。。。。
注意：表达式1只会被执行一次
for-in循环
for(变量 in 数组){
}
说明：for-in主要用来遍历数组，获取数组中的元素
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //while var n1 = 0; while(n1 < 10){ document.write(n1 + "<br />"); n1++; } //for for(var i = 0;i < 10;i++){ document.write(i + "<br />"); } //练习：求1~100之间整数的和 var num = 1; var sum = 0; while(num <= 100){ sum += num; num++; } document.write(sum); var sum1 = 0; for(var num2 = 1;num2 <= 100;num2++){ sum1 += num2; } document.write("<br />"); //for-in //注意：遍历数组，变量的值为数组的索引 var arr = [2,53,5,35]; //array for(var num in arr){ document.write(arr[num] + "<br />"); } //嵌套for循环;打印九九乘法表 for(var i = 1;i <= 9;i++){ for(var j = 1;j <= i;j++){ document.write(j + "x" + i + "=" + i * j + " "); } document.write("<br />"); } </script> </body> </html>
1.5break和continue
break
使用范围：分支switch语句，循环
作用：结束整个循环
continue：
使用范围：只能在循环中使用
作用：结束本地循环，继续下一次循环
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //break for(var i = 0;i < 4;i++){ if(i == 2){ break; } document.write(i + "<br />"); } //continue for(var i = 0;i < 4;i++){ if(i == 2){ continue } document.write(i + "<br />"); } //如果continue或者break处于多层循环中，跳出问题，默认跳出当前循环 //标签：给每个循环进行命名，就可以让break跳出指定的循环 //注意：loop1和loop2是自定义的标识符，只是给相应的循环打了标签，然后break根据标识符去进行匹配 loop1: for(var i = 0;i < 3;i++){ loop2: for(var j = 0;j < 5;j++){ document.write(i + "=" + j); break loop2; } } </script> </body> </html>
2.函数
Python
def 函数名(形参列表):
函数体
return 返回值；
js
a.使用function关键字
function 函数名(形参列表){
函数体
return 返回值；
}
b.匿名函数
var 变量名 = function(形参列表){
函数体
return 返回值；
}
说明;
可以将匿名函数作为其他函数的参数使用
定义匿名函数可以处理一次性的事件【DOM】
c.使用Function【动态函数，很少使用】
//p = Person()
var 变量名 = new Function(“形参列表”，“函数体和返回值”)；
说明：只能实现有限的逻辑处理
调用:函数名(实参列表)
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.匿名函数 var fun1 = function(a,b){ var sum = a + b; //return sum; } //如果函数有返回值，则返回指定的数据，如果没有返回值，则结果为undefined document.write(fun1(23,4)); //2.function function fun2(a,b){ var sum = a * b; } fun2(1,2); //其他用法和Python中函数的使用完全相同 //3.Function var fun3 = Function("a,b","var sum = a + b;return sum;"); fun3(); </script> </body> </html>
3.全局变量和局部变量
全局变量：在script标签中定义一个变量，该变量在整个页面的js部分都可以被访问
局部变量：在函数内部定义一个变量，只能在函数内部被使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //全局变量 //可以在任意的script标签内部访问 var num1 = 10; document.write("第一个script" + num1); document.write("<br />"); function show(){ document.write("函数内部" + num1); document.write("<br />"); } show(); function test(){ //局部变量 var num2 = 20; document.write("函数内部test" + num2); document.write("<br />"); } test(); // document.write("第一个scripttest" + num2); // document.write("<br />"); //在语句中定义的变量仍然属于全局变量 if(true){ var num3 = 389; } document.write(num3); </script> <script type="text/javascript"> document.write("第二个script" + num1); document.write("<br />"); // document.write("第二个scripttest" + num2); // document.write("<br />"); </script> </body> </html>
4.对象
4.1string对象
创建字符串对象
var str1 = "hello"; var str2 = new String("hello"); var str3 = String("hello");代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //属性 var s1 = "fhajkeg"; document.write(s1.length); document.write(s1); document.write("<br />"); //一、和html相关的函数 //1.字体加粗 b strong document.write(s1.bold()); document.write("<br />"); //2.设置字体颜色：fontcolor() //默认为绿色，可以通过传参的方式设置指定的颜色 document.write(s1.fontcolor("#1234ff")); document.write("<br />"); //3.设置字体大小：fontsize() //取值范围：1~7 document.write(s1.fontsize(100)); document.write("<br />"); //4.将字符串显示为超链接:link() document.write(s1.link("http://www.baidu.com")); document.write("<br />"); //5.上标和下标：sup() sub() //二、和Python类似的函数 //1.字符串拼接:concat var str1 = "hello"; var str2 = "js"; document.write(str1 + str2); document.write("<br />"); document.write(str1.concat(str2)); document.write("<br />"); document.write(str1); document.write("<br />"); //2.获取指定位置上的字符：charAt() list[下标] document.write(str1.charAt(2)); document.write("<br />"); //3.获取子字符串在原字符串中第一次出现的位置：indexof document.write(str1.indexOf("l")); document.write("<br />"); //4.切割字符串：split var str3 = "my name is jack"; var arr = str3.split(" "); document.write(arr); document.write(arr.length); //5.字符串替换：replace document.write(str3.replace("name","friend")); document.write("<br />"); </script> </body> </html>
4.2array对象
创建数组对象
var arr1 = [23,43,53]; var arr2 = new Array(3); var arr3 = Array(1,2,43);代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var arr1 = [23,43,53]; //属性 document.write(arr1.length); //1.拼接 var arr1 = [23,43,53]; var arr2 = [5,43,53]; document.write(arr1.concat(arr2)); document.write("<br />"); //2.join //split:将字符串分割为数组 //join：将数组中的元素合并成字符串 var arr2 = [5,43,53]; var s1 = arr2.join("-"); //3.向数组中添加元素 //push :在数组的末尾添加元素 var arr3 = new Array(3); arr3[0] = "jack"; arr3[1] = "jack1"; arr3[2] = "jack2"; document.write(arr3); document.write("<br />"); //push返回的是新增元素之后数组的长度 document.write(arr3.push("tom")); document.write("<br />"); document.write(arr3); document.write("<br />"); //unshift:从头部插入元素 //unshift返回的是新增元素之后数组的长度 document.write(arr3.unshift("tom11")); document.write("<br />"); document.write(arr3); document.write("<br />"); //获取并删除最后一个元素：pop document.write(arr3.pop()); document.write("<br />"); document.write(arr3); document.write("<br />"); //shift:删除头部元素 document.write(arr3.shift()); document.write("<br />"); document.write(arr3); document.write("<br />"); //反转：reverse document.write(arr3.reverse()); document.write("<br />"); //截取 //包头不包尾 var arr4 = [43,54,54,65,65]; var arr5 = arr4.slice(0,3); document.write(arr5); //遍历 var n1 = 0; while(n1 < arr4.length){ document.write(arr4[n1]); n1++; } for(var n2 = 0;n2 < arr4.length;n2++){ document.write(arr4[n2]); } for(var n2 in arr4){ document.write(arr4[n3]); } </script> </body> </html>
4.3object对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.创建一个引用类型变量 var per = new Object(); per.name = "xiaoming"; per.age = 27; //this相当于Python中的self，代表的是当前对象 per.say = function(){ document.write("name:" + this.name + "age:" + this.age); } per.say() //2.通过字面量的方式创建变量 var per1 = { name:"lisi", age:16, say:function(){ document.write("name:" + this.name + "age:" + this.age); } } per1.say(); //访问一个对象中的属性：对象.属性 对象[属性] document.write(per1.name); document.write(per1["name"]); //删除变量,相当于该变量未被定义 //Python ：del 变量名 delete per1.name; document.write(per1.name); //undefined </script> </body> </html>
4.4date对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //Date:java.util.Date类 //一、创建date对象 //默认获取当前时间 var date1 = Date(); document.write(date1); document.write(typeof date1); document.write("<br />"); //构造函数 //不带参数 var date2 = new Date(); document.write(date2); document.write(typeof date2); document.write("<br />"); //携带参数（字符串） /* * 注意：将指定的字符串进行解析，获取时间 * 如果省略某些内容，则会默认置为0 */ var date3 = new Date("2018/10/7"); //2018-10-7 2018.10.7 document.write(date3); document.write(typeof date3); document.write("<br />"); //携带参数（年，月，日，时，分，秒，毫秒） var date3 = new Date(2016,09,9); document.write(date3); document.write(typeof date3); document.write("<br />"); //携带参数（时间戳） var date3 = new Date(1000000); document.write(date3); document.write(typeof date3); document.write("<br />"); //二、date中的函数 //getXxx:获取 var d1 = new Date(); document.write(d1.getMonth()); document.write("<br />"); document.write(d1.getTime()); document.write("<br />"); //setXxxx：设置，修改值 d1.setMonth(3); document.write(d1.getMonth()); document.write("<br />"); //注意：如果传入的数据大于24，则增加日期 document.write(d1); document.write("<br />"); d1.setHours(25); document.write(d1); d1.setMinutes(70); document.write("<br />"); //时间对象转换为字符串 document.write(d1.toLocaleDateString()); //日期 document.write("<br />"); document.write(d1.toLocaleString()); //日期+ 时间 document.write("<br />"); document.write(d1.toLocaleTimeString()); //时间 document.write("<br />"); //解析：将字符串转换为时间戳 document.write(Date.parse("2016-10-10")); document.write("<br />"); var d2 = new Date("2016-10-10 10:10:10"); var d3 = new Date("2016-10-11 10:10:12"); //date对象之间可以直接进行运算，得到的结果单位为毫秒 document.write(d3 - d2); document.write("<br />"); //返回两个日期拼接之后的字符串 document.write(d2 + d3); </script> </body> </html>
4.5math对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //四舍五入 document.write(Math.round(3.1415)); document.write("<br />"); document.write(Math.round(3.6)); document.write("<br />"); //取整 document.write(Math.ceil(3.6)); document.write("<br />"); document.write(Math.floor(3.6)); document.write("<br />"); document.write(Math.max(3,54,64,6,4)); document.write("<br />"); document.write(Math.min(3,5,65,65)); document.write("<br />"); document.write(Math.abs(-19)); document.write("<br />"); document.write(Math.pow(3,6)); document.write("<br />"); document.write(Math.sqrt(25)); document.write("<br />"); document.write(Math.random()); </script> </body> </html>
二、BOM
1.概念
浏览器对象模型，是一个用于访问浏览器和计算机屏幕的对象集合
window：全局对象，可以访问其他的对象，通过window控制BOM
注意：在js中定义的内容，如果没有指明对象，则默认属于window
2.BOM中对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //了解 //window.docuemnt:当前载入的页面【文档】 document.write(window.document); document.write("<br />"); //window.frames:当前页面所有框架的集合 document.write(window.frames); document.write("<br />"); //window.navigator：反应浏览器及其功能特征的对象 document.write(window.navigator); document.write("<br />"); //window.screen:提供浏览器以外的环境信息 document.write(window.screen); document.write("<br />"); //掌握 //window.location:页面的定位 /* * 属性： * href:控制浏览器地址栏中的内容 * 函数： * reload():刷新当前页面，带缓存 * reload(true):刷新当前页面，不带缓存 * assign():加载新的页面 * replace():加载新的页面【注意：不会在浏览器的历史记录中留下痕迹】 */ document.write(window.location); document.write("<br />"); //注意：必须先让浏览器产生历史记录，其中的函数才会生效 //window.history:页面的历史记录 /* * 属性： * length:历史记录的长度 * 函数： * back（） 上一页 * forward() 下一页 * go(num) 跳转到第num页 */ document.write(window.history); document.write("<br />"); </script> </body> </html>
2.1location对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: cyan; } </style> </head> <body> <button onclick="href();">跳转绿色页面</button> <button onclick="refresh();">刷新页面</button> <button onclick="ass();">加载绿色页面</button> <script type="text/javascript"> function href(){ window.location.href = "green.html"; } //重新加载当前页面 function refresh(){ window.location.reload(); } //加载新的页面 function ass(){ // window.location.assign("green.html"); window.location.replace("green.html"); } </script> </body> </html>
2.2history对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: cyan; } </style> </head> <body> <button onclick="href();">跳转绿色页面</button> <button onclick="refresh();">刷新页面</button> <button onclick="ass();">加载绿色页面</button> <!--cyan ----》green-----》red--> <button onclick="forwardPage();">下一页</button> <button onclick="goPage();">跳转到红色页面</button> <script type="text/javascript"> function href(){ window.location.href = "green.html"; } //重新加载当前页面 function refresh(){ window.location.reload(); } //加载新的页面 function ass(){ window.location.assign("green.html"); } function backPage(){ window.history.back(); } function forwardPage(){ window.history.forward(); } function goPage(){ window.history.go(2); } </script> </body> </html>
3.window的使用
函数：
open()
close()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="openWindow()">打开</button> <button onclick="closeWindow()">关闭</button> <script> function openWindow(){ //open(url,target,"属性的设置") window.open("red.html","blank","width=200px,height=400px"); } function closeWindow(){ //关闭当前窗口 window.close(); } </script> </body> </html>事件：【掌握】
load：加载事件，当浏览器窗口加载完毕的时候自动触发
scroll：滚动事件，当浏览器的滚动条滚动的时候自动触发
写法：on + 事件名称
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ height: 3000px; } button{ position: fixed; left: 20px; top: 100px; } </style> </head> <body> <button onclick="gotoTop();">回到顶部</button> <script> //事件 = 匿名函数 //注意：当页面中的所有内容加载完毕之后自动执行该事件 /*window.onload = function(){ alert("hello"); } alert("页面加载中~~~~~");*/ window.onscroll = function(){ //获取滚动高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop); } //回到顶部 function gotoTop(){ document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } </script> <!--<a href="#top"></a>--> </body> </html>
4.提示框
alert()；警示框【提示框】
confirm（）：确认框
prompt():输入提示框
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.警示框 //常量，变量都可以传参 //特点：只有确定按钮，告知用户某些内容 //alert("hello"); //2.确认框 //特点：确定和取消两个按钮，用户可以做出选择，可以实现某些操作 /*var result = confirm("请确认是否删除？"); if(result){ document.write("用户选择了确定"); }else{ document.write("用户选择了取消"); }*/ //3.输入提示框.类似于Python的input //参数：提示 默认值 var r = prompt("请输入数字：",0); document.write(r); </script> </body> </html>
5.定时器
5.1间歇性定时器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="stopTimer();">停止定时器</button> <script type="text/javascript"> //setInterval(函数名，时间)，单位为毫秒 //作用：创建一个间歇性定时器，每过指定的间隔执行相应的操作 //返回值：定时器的id，可以通过id关闭指定的定时器 /*var timer = window.setInterval(func,2000); function func(){ document.write("hello"); }*/ var timer = window.setInterval(function(){ document.write("hello"); },2000); function stopTimer(){ //注意：js中没有恢复定时器一说，当停止一个定时器之后，定时器会被彻底删除，想要继续使用，则需要重新创建一个定时器的对象 window.clearInterval(timer); } </script> </body> </html>
5.2延时性定时器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //setTimeout(函数名，时间) //作用：经过一定的时间，执行指定的操作，只执行一次 //返回值：定时器的id var timer = window.setTimeout(function(){ document.write("helo"); },5000); //关闭 window.clearTimeout(timer); //关闭间歇性定时器和延时性定时器，默认关闭所有的定时器，如果要关闭某个指定的，则需要传入定时器的id </script> </body> </html>
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
