一、ECMAScript基本语法
1.js中的语句
1.1while语句和do-while语句
语法：
while语句
初始化表达式；
while（条件表达式）{
循环体；
循环之后的操作表达式；
}
do-while语句
初始化 表达式；
do{
循环体；
循环之后的操作表达式；
}while(条件表达式)；
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script> //需求：打印0~9的数字 var num1 = 0; while(num1 < 10){ document.write(num1 + "<br />"); num1++; } var num2 = 0; do{ document.write(num2 + "<br />"); num2++; }while(num2 < 10); document.write("~~~~~~~~"); //区别while语句和do-while语句 var n = 3; while(n1 < 1){ document.write("hello"); } var n2 = 3; do{ document.write("hello~~~"); }while(n2 < 1); /* * 工作原理： * while：首先判断条件表达式是否成立，如果成立，才执行循环体 * do-while:首先执行循环体，然后再去判断条件表达式，如果条件表达式成立，则再执行循环体 * 循环体至少会被执行一次 * 建议：相比较而言，while更加好控制，while语句的使用范围更广 */ //练习：求1~100之间整数的和 var num = 1; var sum = 0; while(num <= 100){ sum += num; num++; } document.write(sum); </script> </body> </html>
1.2简单for语句和for-in语句
语法：
简单for语句：
for(表达式1;表达式2；表达式3){
循环体
}
说明：
a.表达式1：初始化表达式
b.表达式2：条件表达式
c.表达式3：循环之后的操作表达式
d.执行顺序：1---》2-----》循环体----》3---》2---》循环体---》3.。。。
初始化表达式只执行一次
e.简单for语句的使用和while的使用完全相同，同样是四要素，同样的执行顺序
for-in语句
for(变量 in 数组){
循环体
}
说明：主要用于遍历数组，获取数组中的元素
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //需求：打印0~9的数字 for(var n = 0;n < 10;n++){ document.write(n); } //需求：求1~100之间所有整数的和 var sum = 0; for(var i = 1;i <= 100;i++){ sum += i; } document.write("<br />"); //需求：打印九九乘法表 for(var i = 1;i <= 9;i++){ for(var j = 1;j <= i;j++){ document.write(j + "x" + i + "=" + i * j + " "); } document.write("<br />"); } //for-in循环 var arr = [34,5,65,657]; //注意：使用for-in遍历数组的时候，获取的是索引 for(var i in arr){ document.write(arr[i] + "<br />"); } </script> </body> </html>
1.3break和continue
break：
使用场景：switch分支语句和循环语句中 作用：结束switch语句和跳出循环语句
continue：
使用场景：只能使用在循环语句中 作用：结束当前正在执行的循环，继续下一次循环
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //break for(var i = 0;i < 10;i++){ if(i == 3){ break; } document.write(i); } document.write("<br />"); //continue for(var i = 0;i < 10;i++){ if(i == 3){ continue } document.write(i); } document.write("<br />"); //break存在于嵌套循环中 for(var i = 0;i < 5;i++){ for(var j = 0;j < 3;j++){ document.write(i + "=" + j + "<br />"); break;//跳出的是内层循环【就近原则】 } } //将break写在内层循环中，如果想要跳出外层循环，该怎么做? //label标签：给每个循环进行命名，就可以让break通过这个命名进行选择该跳出哪个循环 //注意：loop1和loop2是自定义的标识符，一般情况下使用字母全小写 loop1: for(var i = 0;i < 5;i++){ loop2: for(var j = 0;j < 3;j++){ document.write(i + "=" + j + "<br />"); break loop1; } } </script> </body> </html>
2.js中的函数
2.1定义
Python中的函数定义
def 函数名（形参列表）:
函数体
匿名函数：lambda 参数:函数体
js中的函数定义：
方式一：使用function定义
function 函数名(形参列表){
函数体
return 值；
}
方式二：匿名函数【重点掌握】
var 变量 = function(形参列表){
函数体
}
说明: a.可以将匿名函数作为其他函数的参数使用【常用】
b.在DOM中使用匿名函数最多，可以完成某些一次性的事件
方式三：使用js中的内置对象Function【动态函数，很少使用，作为了解】
var 变量 = new Function("形参列表"，“函数体和返回值”);
js中函数的调用
格式：函数名(实参列表)；
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.function //定义一个无参无返回值的函数 function text1(){ document.write("ok"); } //调用 text1(); //定义一个有参的函数，无需返回值 //需求：求两个数的和 function text2(a,b){ var total = a + b; } text2(10,20); //定义一个有参有返回值的函数 function text3(a,b){ var total = a + b; return total; } var result1 = text3(10,20); //2.匿名函数 var func = function(a,b){ var sub = a - b; } func(20,10); //匿名函数作为其他函数的参数使用 function check(f){ f(3,4); } check(func); //f = func //工作原理 /*function check1(function(a,b){ }) */ //3.内置对象 //p = Person() //参数：形参列表 函数体和返回值 var result2 = new Function("x,y","var sum = x + y;return sum;"); var r0 = result2(1,2); document.write(r0); </script> </body> </html>
2.1全局函数
全局函数不属于任何一个对象，直接通过函数名调用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.eval():识别字符串中的js代码 var s1 = "alert('hello')"; //eval(s1); document.write("<hr />"); //2.对字符进行编码：encodeURI() var s2 = "测试文字afhsjehgja"; document.write(encodeURI(s2)); document.write("<hr />"); //%E6%B5%8B%E8%AF%95%E6%96%87%E5%AD%97afhsjehgja //3.对字符进行解码：decodeURI() var s3 = "%E6%B5%8B%E8%AF%95%E6%96%87%E5%AD%97afhsjehgja"; document.write(decodeURI(s3)); //4.isNaN():判断一个字符串是不是不是一个数字 //5.parseInt():类型转换【将字符串转换为数字】 var s4 = "123"; document.write(s4 + 1);//1231 document.write(s4 - 1);//122 document.write(parseInt(s4) + 1); document.write("<hr />"); document.write("~~~~~~~~"); //区别于Python，会将数字部分挑出来，直到遇到第一个不是数字的时候停止，然后进行运算 var s5 = "123abc456"; document.write(parseInt(s5) + 1); </script> </body> </html>
3.全局变量和局部变量
全局变量：在script标签中定义 一个变量，这个变量可在当前页面中使用
局部变量：在函数内部定义一个变量，只能在函数内部使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var num2 = 20; //特殊情况：在body中的script中定义的变量，在head中的script中访问不到【先加载head，然后再加载body】 document.write("head在其他的script中：" + num1); </script> </head> <body> <script> //1.全局变量：在当前标签中和其他标签中都可以访问 var num1 = 10; document.write("script标签中：" + num1); function check(){ document.write("函数中：" + num1); } check(); document.write("访问head中的变量：" + num2); //2.局部变量:只能在当前函数中进行访问 function show(){ var num3 = 30; document.write("show函数中：" + num3); } show(); // document.write("show函数script中：" + num3); //3.在分支语句和循环语句中存在作用域吗？--->在分支语句和循环语句中定义的变量仍然被当做全局变量使用 if(1){ var num4 = 40; } document.write(num4); </script> <script> document.write("在其他的script中：" + num1); </script> </body> </html>
4.js中的对象
4.1string对象
单引号或者双引号 字符串的创建方式
//方式一 var s1 = "hello"; var s11 = 'hello'; //方式二 var s2 = new String("hello"); //方式三 var s3 = String("hello");代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //一、与html有关的函数 //1.将字符串加粗：b bold() var s1 = "hello"; document.write(s1.bold()); document.write("<br />"); //2.设置字符串的颜色：color fontcolor(),默认颜色是绿色 document.write(s1.fontcolor("red")); document.write("<br />"); //3.设置字体的大小：size fontsize(1~7) document.write(s1.fontsize(7)); document.write("<br />"); //4.将字符串显示为超链接：a href link() document.write(s1.link("www.baidu.com")); document.write("<br />"); //5.设置上标和下标：sup sub document.write(s1.sub()); document.write(s1); document.write(s1.sup()); document.write("<br />"); //二、和Python类似的函数 //1.字符串的拼接:concat(),类似于使用+ //注意：拼接之后生成一个新的字符串 var str1 = "hello"; var str2 = "html"; document.write(str1.concat(str2)); document.write(str1); document.write("<br />"); //2.获取指定位置上的字符：charAt() character //注意：如果指定了不存在的索引，则返回一个空字符串 var str3 = "hellohtml"; document.write(str3.charAt(20)); document.write("<br />"); //3.获取子字符串在 原字符串中第一次出现的位置：indexOf() //注意：如果子字符串不存在，则返回-1 document.write(str3.indexOf("a")); document.write("<br />"); //4.切割字符串：split() //注意：切割之后得到的数据为数组 var str4 = "my name is zhangsan"; var arr = str4.split(" "); document.write(arr.length); //5.替换字符串：replace（） document.write(str4.replace("name","friend")); </script> </body> </html>
4.2array对象
创建方式：
var arr1 = [43,54,54]; var arr2 = new Array(3); var arr3 = new Array(1,2,4);代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.属性 var arr1 = [4,5,46,56]; document.write(arr1.length); //注意：和Python中的列表以及元组类似，数组中可以存储不同类型的数据 var arr2 = ["abc",23,true]; document.write(arr2); //函数 //1.拼接：concat（） arr3 = [43,56,5,657]; arr4 = [54,6,4,65]; document.write(arr3.concat(arr4)); document.write("<br />"); document.write(arr3); document.write("<br />"); //2.合并：join（） //注意：将数组中的元素合并为一个字符串 document.write(arr3.join("-")); document.write("<br />"); //3.向数组中的末尾添加元素：push() var array1 = new Array(3); array1[0] = "tom"; array1[1] = "bob"; array1[2] = "jack"; document.write(array1); document.write("<br />"); //注意：push的返回值为添加元素之后数组的长度 document.write(array1.push("lucy")); document.write("<br />"); document.write(array1); //4.从头部添加【插入】元素：unshift() array1.unshift("first"); document.write("<br />"); document.write(array1); document.write("<br />"); //5.获取并且删除数组中的最后一个元素：pop（） //document.write(array1.pop()); //6.删除头部元素 //array1.shift(); //7.反转：reverse() document.write(array1.reverse()); document.write("<br />"); //8.截取数组 //注意：包头不包尾 var array2 = array1.slice(0,3); document.write(array2); </script> </body> </html>
4.3object对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.创建一个引用类型的变量【对象】 var per = new Object(); per.name = "jack"; per.age = 18; per.say = function(){ document.write(per.name + per.age); } per.say(); document.write("<hr />"); //2.使用字面量的方式创建引用类型的变量 //字面量：key：value var per1 = { name:"tom", age:20, show:function(){ document.write(this.name + this.age); } } per1.show(); //删除变量或者函数 delete per1.name; per1.show(); //特殊情况：在js中，除了使用点语法访问属性和函数之外，还可以采用类似字典的方式 document.write(per.name); document.write(per["name"]); </script> </body> </html>
4.4date对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.创建 //获取当前的时间：中国标准时间 var date1 = Date(); document.write(date1); document.write("<hr />"); var date2 = new Date(); document.write(date2); document.write("<hr />"); var date3 = new Date("2016-9-18"); document.write(date3); document.write("<hr />"); var date4 = new Date(2016,9,18); document.write(date4); document.write("<hr />"); var date5 = new Date(100000); document.write(date5); document.write("<hr />"); //2.获取 document.write(date2.getFullYear()); document.write("<hr />"); document.write(date2.getMonth()); //月份取值范围：0~11 document.write("<hr />"); //3.设置 // document.write(date2.setFullYear(2015))); // document.write("<hr />"); //注意：传入的月份大于11，则年份增加 document.write(date2.setMonth(15)); document.write("<hr />"); document.write(date2.getFullYear()); document.write("<hr />"); //4.转换 document.write(date2.toLocaleString()); //日期+ 时间 document.write("<hr />"); document.write(date2.toLocaleDateString()); //日期 document.write("<hr />"); document.write(date2.toLocaleTimeString()); //具体的时间 document.write("<hr />"); var d1 = new Date("2016-10-10 10:10:10"); var d2 = new Date("2016-10-15 10:10:10"); //两个日期对象之间相差的毫秒数 document.write(d2 - d1); document.write("<hr />"); document.write(d1 + d2); //拼接 </script> </body> </html>
4.5math对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //四舍五入 console.log(Math.round(3.6)); //向下取整 console.log(Math.floor(3.1)); //向上取整 console.log(Math.ceil(3.1)); //最大值 console.log(Math.max(3,4,5)); //最小值 console.log(Math.min(3,4,5)); //绝对值 console.log(Math.abs(3.1)); //开平方 console.log(Math.sqrt(3.1)); //求多少次方 console.log(Math.pow(2,3)); //随机数 console.log(parseInt(Math.random() * 5 + 5)); </script> </body> </html>
二、BOM
1.BOM简介
浏览器对象模型，是一个用于访问浏览器和计算机屏幕的对象的集合，可以通过window【窗口】对象访问
在客户端js中，window对象是一个全局对象，在js中，如果某个对象没有指明具体属于哪个对象，默认都属于window
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var name = "zhangsan"; document.write(name); //注意：一般定义出来的变量，没有指明所属的对象，则默认属于window document.write(window.name); </script> </body> </html>
2.window的使用
2.1对象
red.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: red; } </style> </head> <body> <button onclick="href()">跳转到绿页面</button> <button onclick="refresh()">刷新页面</button> <button onclick="assAndRep()">加载绿页面</button> <button onclick="forwardPage()">下一页</button> <button onclick="goPage()">跳转到黄色页面</button> <script> //了解 //1.是一个BOM对象，表示当前已经载入的页面【文件】 //document.write(window.document); //2.当前页面中所有框架的集合 //document.write(window.frames); //3.用于反应浏览器及其功能信息的对象 //document.write(window.navigator); //4.提供浏览器 以外的环境信息 //document.write(window.screen); //掌握 //1.window.location /* * href属性：控制浏览器地址栏的内容 * reload():重新加载【刷新页面】 * reload(true):刷新页面，不留缓存 * assign():加载新的页面 * replace():加载新的 页面【注意：不会在浏览器的历史记录中留下记录】 */ function href(){ window.location.href = "green.html"; } function refresh(){ window.location.reload(); } function assAndRep(){ //可以回退 window.location.assign("green.html"); //表示代替，不能进行回退 //window.location.replace("green.html"); } //2.window.history /* * length属性:获取历史记录的长度 * 前提条件：必须先产生历史记录 * back(): 上一页 * forward():下一页 * go(num):跳转到指定的页面 */ console.log(window.history.length); //上一页 function backPage(){ window.history.back(); } //下一页 function forwardPage(){ window.history.forward(); } //跳转到指定的页面 function goPage(){ //注意：如果是跳转下num页，则使用正数，如果是返回上num页，。则使用负数 window.history.go(2); } </script> </body> </html>green.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: green; } </style> </head> <body> <button onclick="goPage()">跳转到黄色页面</button> <button onclick="forwardPage()">下一页</button> <button onclick="backPage()">上一页</button> <script> function goPage(){ window.location.href = "yellow.html"; } //上一页 function backPage(){ window.history.back(); } //下一页 function forwardPage(){ window.history.forward(); } </script> </body> </html>yellow.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: yellow; } </style> </head> <body> <button onclick="goPage()">回到红色页面</button> <script> function goPage(){ window.history.go(-2); } </script> </body> </html>
2.2函数
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(){ window.open("yellow.html","blank","width=200px,height=200px,top=10px,left=10px"); } //关闭的是当前页面在浏览器中的窗口 function closeWindow(){ window.close(); } </script> </body> </html>
2.3事件
onload:加载事件，当浏览器窗口加载完毕之后自动触发
onscroll:滚动事件，当浏览器窗口发生滚动的时候自动触发
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ height: 3000px; } button{ position: fixed; left: 20px; bottom: 50px; } </style> </head> <body> <h1>标题</h1> <button onclick="goTop()">回到顶部</button> <script> //1.加载事件 /*window.onload = function(){ document.write("hello"); } */ //2.滚动事件 window.onscroll = function(){ //打印滚动的高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop); } //返回顶部 function goTop(){ document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } </script> </body> </html>
3.提示框
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.警告框 //alert("hello"); //2.提示框 /*var result = confirm("请确定或者取消"); document.write(result);//true或者false if(result){ //确定 }else{ //取消 }*/ //3.输入提示框 //参数：提示文字，值 var result1 = prompt("请输入一个数字",0); document.write(result1); </script> </body> </html>
4.定时器
4.1间歇性定时器
定时器可以被触发多次
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="func1()">关闭定时器</button> <script> //启动定时器：setInterval(需要执行的操作，间隔时间) /* * 功能：创建一个间歇性定时器，每隔参数的时间则执行某个指定的操作 * 单位为毫秒 * 返回值：定时器的id，可以通过该id关闭定时器 */ var timer = window.setInterval(func,2000); function func(){ console.log("hello"); } //关闭定时器：clearInterval(id) //注意：js中没有恢复定时器一说，当你停止定时器，需要再次启动的时候，实际上相当于重新创建一个新的定时器 function func1(){ window.clearInterval(timer); } </script> </body> </html>
4.2延时性定时器
只能触发一次
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //启动定时器：setTimeout(需要执行 的操作，时间) /* * 功能：指定的时间之后执行指定的操作 * 返回值为定时器的id * 单位为毫秒 */ var timer = window.setTimeout(func,3000); function func(){ console.log("hello"); } //关闭定时器：clearTimeout() window.clearTimeout(timer); </script> </body> </html>