第14天，JavaScript
@(前端基础)[JavaScript]
目录
一、JavaScript基础
1.1 JS的引入方式
1.2 JS的变量、常量和标识符
1.2.1 JS的变量
1.2.2 常量和标识符
1.3 JS的数据类型
1.3.1 字符串类型(string)
1.3.2 布尔类型（boolean）
1.3.3 null & undefined类型
1.4 运算符
1.5 流程控制
1.5.1 if-else结构
1.5.2 switch-case结构
1.5.3 for循环之条件循环
1.5.4 for循环之遍历循环
1.5.5 while循环
1.5.6 异常处理
二、JavaScript的对象
2.1 String对象
字符串对象的属性和函数
2.2 Array对象
2.2.1 创建数组的三种方式
2.2.2 数组对象的属性和方法
2.3 Date对象
2.3.1创建Date对象
2.3.2 Date对象的方法
2.3.3 设置日期和时间
2.3.4 日期和时间的转换
2.4 Math对象
2.5 Function对象
2.5.1 函数的定义
2.5.2 函数对象的属性
2.5.3 函数的内置对象arguments
2.5.4 匿名函数
三、BOM对象
3.1 window对象的方法
3.2 定时器
四、DOM对象
4.1 什么是Html DOM
4.2 DOM树
4.3 节点查找
4.3.1 直接查找节点
4.3.2 导航查找
4.4 节点操作
4.4.1 创建节点
4.4.2 添加节点
4.4.4 删除节点
4.4.5 替换节点
4.5 节点属性操作
4.5.1 获取/赋值给节点内的文本或标签
4.5.2 属性操作
4.5.3 关于类（class）的操作
4.5.4 改变CSS样式
4.6 DOM Event(事件)
4.6.1 事件类型
4.6.2 绑定事件的方式
一、JavaScript基础
一个完整的JavaScript实现邮以下3个不同部分组成：
- 核心（ECMAScript）ECMAScript描述了语法、类型、语句、关键字、保留字、运算符、对象（封装/继承/多态）基于对象的语言，使用对象
- 文档对象模型（DOM） Document Object Model，整合JS 、CSS 、Html
- 浏览器对象模型（BOM）Broswer Object Model，整合JS和浏览器
1.1 JS的引入方式
- 直接在
区域中编写，将JS代码置于- 导入JS文件
例：
1.2 JS的变量、常量和标识符
1.2.1 JS的变量
声明变量时使用var关键字：
var a=3;-
一行可以声明多个变量，并且可以是不同类型；
var name="lisi",age=20,job="ragman"
声明变量时，可以不用var；但是不用var声明变量时，此变量为全局变量；
变量命名，首字符只能是字母、下划线、$美元符三选一；区分大小写。
1.2.2 常量和标识符
常量：直接在程序中出现的数据值；
标识符：
1. 由不以数字开头的字母、数字、下划线、美元符号$ 组成；
2. 常用于表示函数、变量等名称；
3. JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符。ECMA v3标准保留的JavaScript的关键字如下图：
Paste_Image.png1.3 JS的数据类型
Paste_Image.png- number : 数值
- boolean : 布尔值
- string : 字符串
- undefined : undefined(当变量声明已未定义时)
- null : null
1.3.1 字符串类型(string)
- 是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；
- 字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 ':单引号 ":双引号 \:右划线
例：
var a="HelloWorld" typeof a //打印变量a的数据类型，显示为string1.3.2 布尔类型（boolean）
Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0.
Boolean值主要用于JavaScript的控制语句，例如：
if (x==1){ y=y+1; } else{ y=y-1; }1.3.3 null & undefined类型
Undefined类型
Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
Null类型
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
1.4 运算符
算术运算符： + - * / % ++ -- 比较运算符： > >= < <= != == === !== 逻辑运算符： &&(逻辑与) ||(逻辑或) ！(逻辑非) 赋值运算符： = += -= *= /= 字符串运算符： + 连接，两边操作数有一个或两个是字符串就做连接运算注意： ++表示本身自加1，- -本身自减1，“== =”三个等号（没有空格）表示完全等于；“!==”表示完全不等于。
二个等号与三个等号的区别：
"123"==123; //返回true；js内部会先将两者转为同一类型后再进行比较，如果相同就返回true。 "123"===123; //返回false;在比较时，js不会转换类型，直接判断是否相等。注意：NaN
var d="yuan"; d=+d; alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据 alert(typeof(d));//Number1.5 流程控制
1.5.1 if-else结构
if (表达式1) { 语句1; } else if (表达式2){ 语句2; } else if (表达式3){ 语句3; } else{ 语句4; }1.5.2 switch-case结构
var x=3; switch(x){ case 1:y="星期一"; break; case 2:y="星期二"; break; case 3:y="星期三"; break; case 4:y="星期四"; break; case 5:y="星期五"; break; case 6:y="星期六"; break; case 7:y="星期日"; break; default: y="未定义"; }1.5.3 for循环之条件循环
for (var i=0;i<5;i++){ console.log(i) }1.5.4 for循环之遍历循环
var arr=[11,22,33] for (var i in arr){ console.log(arr[i]) } //注意：遍历数组时，变量i为数组元素的索引值；1.5.5 while循环
var i=0 while (i<5){ console.log(i); i++ }功能说明：运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环；同样支持continue与break语句。
1.5.6 异常处理
try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 } catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 }注：主动抛出异常 throw Error('xxxx')
二、JavaScript的对象
简介：
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的。
Paste_Image.png2.1 String对象
字符串创建(两种方式)：
① 变量 = “字符串”
② 字串对象名称 = new String (字符串)var str1="hello world"; var str1= new String("hello word");字符串对象的属性和函数
var x='HelloWorld' x.length //获取字符串的长度； x.toLowerCase() //转为小写 x.toUpperCase() //转为大写 x.trim() //去除字符串两边空格 //字符串查询方法 x.charAt(2) //l,根据索引获取字符 x.indexOf("W") //5,根据字符获取索引值 x.lastIndexOf("l") //8,根据字符从右往左查找，获取索引值 x.match(regexp) //regexp是正则表达式，返回正则匹配的字符串的数组，如果没有匹配则返回null x.search(regexp) //返回匹配字符串的首字符位置索引 示例： var str1="welcome to the world of JS!"; var str2=str1.match("world"); var str3=str1.search("world"); alert(str2[0]); // 结果为"world" alert(str3); // 结果为15 //子字符串处理方法 x.substr(start,length) //start表示开始位置，length表示截取长度;如果不给定截取长度，则截取至末尾； x.substring(start,end) //end是结束位置 x.slice(start,end) //字符串切片 示例： var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //结果为"cd" alert(str3); //结果为"efgh" alert(str4); //结果为"cdefg" alert(str5); //结果为"fg" x.replace(findstr,newstr) //字符串替换 x.split(分割符) //分割字符串 示例： var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]);/ /结果为"二" x.concat("Find") //返回HelloWorldFind2.2 Array对象
2.2.1 创建数组的三种方式
创建方式1: var arrname = [元素0,元素1,….]; // var arr=[1,2,3]; 创建方式2: var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true); 创建方式3: var arrname = new Array(长度); // 初始化数组对象: var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六";2.2.2 数组对象的属性和方法
join方法
将数组中的元素拼接成字符串var arr=["alex","love","egon"]; var chn=arr.join("_"); alert(chn) //返回结果为alex_love_egon
concat方法
扩展数组中的元素var chn=arr.concat("hate","lisi"); console.log(chn) //返回 ["alex", "love", "egon", "hate", "lisi"]
reverse方法
将数组中的元素翻转var nums=[32,12,111,21]; alert(nums.reverse()) //返回[21, 111, 12, 32]
sort方法
将数组元素进行排序，排序规则是先比较第一位，再比较第二位，以此类推。。。var nums=[32,12,111,21]; console.log(nums.sort())； //返回[111, 12, 21, 32] //如果想按照数字大小排序，需要自己写一个函数，然后将此函数名当作参数传给sort方法，如下： function inSort(a,b) { return a-b } var chn=nums.sort(inSort); console.log(chn) //返回[12, 21, 32, 111]
silce方法
将数组切片var arr1=['a','b','c','d','e','f','g','h']; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString()); //结果为"c,d" alert(arr3.toString()); //结果为"e,f,g,h" alert(arr4.toString()); //结果为"c,d,e,f,g"
splice方法
splice的主要用途是对数组指定位置进行删除并插入新值
语法：x. splice(start, deleteCount, items)- start表示开始位置索引
- deleteCount删除数组元素的个数
- items表示在删除位置插入的数组元素,可以同时插入多个元素
- items参数可以省略
var arr_1=["a","b","c","d","e"]; arr_1.splice(2,2,"B"); console.log(arr_1) //返回["a", "b", "B", "e"]
push和pop方法
push是在数组末尾添加一个或多个元素并返回元素个数；
pop是将数组最后一个元素删除并将删除的元素返回。var arr_1=["a","b","c","d","e"]; var arr_4=arr_1.push("f","g"); console.log(arr_1); //["a", "b", "c", "d", "e", "f", "g"] console.log(arr_4) //返回7 var arr_5=arr_1.pop(); console.log(arr_1); //返回["a", "b", "c", "d"] console.log(arr_5); //返回e
shift和unshift方法
shift是从数组开头删除一个元素；
unshift是在数组开头添加一个或多个元素并返回元素个数；var arr_1=["a","b","c","d","e"]; var arr_6=arr_1.shift(); console.log(arr_1); //返回["b", "c", "d", "e"] console.log(arr_6); //返回a var arr_7=arr_1.unshift("A","B"); console.log(arr_1); //["A", "B", "a", "b", "c", "d", "e"] console.log(arr_7); //72.3 Date对象
2.3.1创建Date对象
// 1.不指定参数 var time=new Date(); console.log(time) //Tue Oct 17 2017 14:45:05 GMT+0800 (中国标准时间) // 2.指定参数为日期时间字符串 var time_1=new Date("2010/10/10 12:00"); console.log(time_1); //Sun Oct 10 2010 12:00:00 GMT+0800 (中国标准时间) // 3.指定参数为毫秒 var time_2=new Date(5000); console.log(time_2); //Thu Jan 01 1970 08:00:05 GMT+0800 (中国标准时间) // 4.指定参数为年，月，日，时，分，秒，毫秒 var time_3=new Date(2008,8,18,20,10,20,200); console.log(time_3); //Thu Sep 18 2008 20:10:20 GMT+0800 (中国标准时间) //注意，月份是从0~11，所以会将指定的月份加12.3.2 Date对象的方法
获取具体日期和时间
获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月（0-11） getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)实例练习： 格式化时间
function changeMonth(month) { //解决月份加一，自动补齐成两位数字的方法 var month=+1; if (month<10){ return "0"+month; } else{ return month } } function parseWeek(week_num) { //将数字 0~6 转换成 星期日到星期六 var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; return weeks[week_num] } function getReadabilityTime() { var time=new Date(); //1. 创建Date对象,不传参数，表示获取当前时间 var year=time.getFullYear(); //2. 获得当前年份 var month=time.getMonth(); //3. 获得当前月份 js中月份是从0到11. var date=time.getDate(); //4. 获得当前日 var hour=time.getHours(); //5. 获得当前小时 var minute=time.getMinutes(); //6. 获得当前分钟 var second=time.getSeconds(); //7. 获得当前秒 var millisecond=time.getMilliseconds(); //8. 获取当前毫秒 var week=time.getDay(); //9. 获得当前星期 return year+"年"+changeMonth(month)+"月"+date+"日"+" "+hour+":"+minute+":"+second+":"+millisecond+" "+parseWeek(week) //返回2017年01月17日 15:25:25:671 星期二 } console.log(getReadabilityTime())2.3.3 设置日期和时间
//设置日期和时间 //setDate(day_of_month) 设置日 //setMonth(month) 设置月 //setFullYear(year) 设置年 //setHours(hour) 设置小时 //setMinutes(minute) 设置分钟 //setSeconds(second) 设置秒 //setMillliseconds(ms) 设置毫秒(0-999) //setTime(allms) 设置累计毫秒(从1970/1/1午夜)2.3.4 日期和时间的转换
//日期和时间的转换: //返回本地时间与GMT的时间差，以分钟为单位 getTimezoneOffset(); //8个时区×15度×4分/度=480; //返回-480 //返回国际标准时间字符串 toUTCString(); //Tue, 17 Oct 2017 07:39:03 GMT //返回本地格式时间字符串 toLocaleString(); //2017/10/17 下午3:39:03 //返回累计毫秒数(从1970/1/1午夜到本地时间) console.log(Date.parse("2017/10/17 15:43")) //返回1508226180000毫秒 //返回累计毫秒数(从1970/1/1午夜到国际时间) var utc_milli=Date.UTC(2017,10,17,15,45,20,120); console.log(utc_milli) //1510933520120毫秒2.4 Math对象
该对象中的属性方法 和数学有关.
abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x)对数进行下舍入。 log(x) 返回数的自然对数（底为e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。 //方法练习: alert(Math.random()); //获得随机数 0~1 不包括1. alert(Math.round(1.5)); //四舍五入 //练习：获取1-100的随机整数，包括1和100 var num=Math.random(); num=num*10; num=Math.round(num); alert(num) //============max min========================= alert(Math.max(1,2)); // 2 alert(Math.min(1,2)); // 1 //-------------pow-------------------------------- alert(Math.pow(2,4)); //pow 计算参数1 的参数2 次方.2.5 Function对象
2.5.1 函数的定义
//定义函数 function foo(参数){ 函数体; return 返回值; } //引用函数 foo()2.5.2 函数对象的属性
length
获取函数需要多少个参数；function foo(a,b) { alert(a+b) } foo("egon",23); console.log(foo.length); //返回22.5.3 函数的内置对象arguments
如果定义函数时没有给此函数指定形参，而当调用此函数时传值了，那么函数就会用arguments来接收参数，和python中的**args类似，不同的是，JS中定义函数时并不需要将arguments写至形参处。
function add(a,b){ console.log(a+b); //3 console.log(arguments.length); //2 console.log(arguments); //[1,2] } add(1,2) // arguments的用处一： function foo() { for (var i in arguments){ console.log(arguments[i]); } } foo(1,2,3,4,5) //返回结果会顺序打印1~5 //arguments的用处二： //利用它来判断，传入的参数个数是否正确，否则就报错； function foo(a,b,c) { if (arguments.length!=3){ throw new Error("Function foo with "+arguments.length+" arguments, but it just need 3 arguments!") } else{ console.log('success') } } foo(1,2,3,4,5)2.5.4 匿名函数
// 匿名函数的应用 (function(){ alert("tony"); } )() (function(arg){ console.log(arg); })('123')三、BOM对象
window对象
所有浏览器都支持 window 对象。- 概念上讲.一个html文档对应一个window对象.
- 功能上讲: 控制浏览器窗口的.
- 使用上讲: window对象不需要创建对象,直接使用即可.
3.1 window对象的方法
alert方法
弹出一个带有警告信息的和确认按钮的警告框alert("Hello World")以上代码执行后会弹出如下图所示的弹出框：
Paste_Image.png
confirm方法
var result=confirm("你确定要删除吗？"); console.log(result); //点击确定返回true,点击取消返回false。弹出框如下图所示：
Paste_Image.png
prompt方法
弹出一个可提示用户输入的对话框
var res=prompt("请输入内容："); console.log(res) //点击确定后，输入的内容会赋值给变量res;点击取消后，会给变量res赋一个弹出框如下图所示：
Paste_Image.pngopen方法
打开一个新的浏览器窗口或查找一个已命名的窗口open("http://www.baidu.com")close方法
关闭浏览器窗口
close()3.2 定时器
setInterval(code,delay,arguments)
设定定时器，即按照指定的周期（以毫秒计）来调用函数或计算表达式。并且会返回一个ID，利用clearInterval(ID)即可取消此定时器。
参数：- code : 要执行的函数名，注意不能加括号
- delay : 指定的周期（以毫秒计），也就是每隔多少毫秒执行一次这个函数
- arguments : 给要执行的函数传递的参数；如果函数不需要传参，就不用写
clearInterval(intervalId)
取消由setInterval()设置的定时器
参数：- intervalId : 是setInterval()的返回值
代码示例如下：
function bar() { var now_time=new Date(); document.write(now_time.toLocaleString()); document.write("
") } var timer_id=setInterval(bar,1000) //每隔1000毫秒(即1秒),执行一下bar函数 if (1=1){ clearInterval(timer_id); //取消定时器； }定时器应用：
需求：点击start按钮，输入框中开始出现时间，以秒走时，点击stop按钮，停止走时。Title
setTimeout(code,delay,arguments)与clearTimeout(intervalId)
setTimeout()和clearTimeout()的用法与setInterval()和clearInterval()的用法相同，不同的是setTimeout()在指定的毫秒数后只调用一次函数就停止。四、DOM对象
4.1 什么是Html DOM
- HTML Document Object Model（Html文档对象模型）
- HTML DOM 定义了访问和操作HTML文档的标准方法
- HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
4.2 DOM树
Paste_Image.png以上代码可以通过下图直观的表示：
Paste_Image.png画dom树是为了展示文档中各个对象之间的关系，用于对象的导航
4.3 节点查找
4.3.1 直接查找节点
通过 id 值查找：
var ele=document.getElementById(“idname”)
//返回一个标签对象；通过标签名查找：
var tag_ele=document.getElementsByTagName(“tagname”)
//将找到的标签全都放在一个数组中返回通过类名查找：
var class_ele=document.getElementsByClassName(“name”)
//也是返回一个元组，元组内包含所有拥有此类名的标签；注意：标签查找也支持局部查找，也就是先找到父标签，然后在父标签下再通过以上三各方法查找后代标签。例：parent_ele.getElementsByTagName("input")
4.3.2 导航查找
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素注意：JS 中没有直接方法找到所有的兄弟标签！
4.4 节点操作
4.4.1 创建节点
createElement(标签名)：创建一个指定名称的元素。例：
var tag=document.createElement(“input") //创建一个Input标签 tag.setAttribute('type','text'); //设置属性type="text";4.4.2 添加节点
//追加一个子节点（作为最后的子节点） somenode.appendChild(newnode) //把增加的节点放到某个节点的前边 somenode.insertBefore(newnode,某个节点);4.4.4 删除节点
parent_node.removeChild(node)： //获得要删除的元素，通过父元素调用删除4.4.5 替换节点
somenode.replaceChild(newnode, 某个节点);4.5 节点属性操作
4.5.1 获取/赋值给节点内的文本或标签
//获取标签内的纯文本 somenode.innerText //给标签重新赋一个新的文本 somenode.innerText="Hello"; //获取某个标签内的内容 somenode.innerHtml //给某个标签内赋值一个新的标签 somenode.innerHtml="HellWorld!
"4.5.2 属性操作
//设置一个属性 elementNode.setAttribute(属性name,属性value) //获取一个属性的值 var value=elementNode.getAttribute(属性名); //删除一个属性 elementNode.removeAttribute(“属性名”);注意：如果是input、select、textarea这三个标签，想要获取其value值，可以直接用
var val=somenode.value获取，赋值直接用somenode.value="HelloWorld"赋值即可4.5.3 关于类（class）的操作
//获取节点的所有类名，以字符串的形式返回 elementNode.className //为一个节点添加一个类名 elementNode.classList.add("类名") //为一个节点删除一个类名 elementNode.classList.remove("类名")4.5.4 改变CSS样式
Hello world!
4.6 DOM Event(事件)
4.6.1 事件类型
onclick //单击事件，当用户点击某个对象时调用的事件句柄。 ondblclick //双击事件，当用户双击某个对象时调用的事件句柄。 onfocus //元素获得焦点。 练习：输入框 onblur //元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange //域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown //某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress //某个键盘按键被按下并松开。 onkeyup //某个键盘按键被松开。 onload //一张页面或一幅图像完成加载。 onmousedown //鼠标按钮被按下。 onmousemove //鼠标被移动。 onmouseout //鼠标从某元素移开。 onmouseover //鼠标移到某元素之上。 onmouseleave //鼠标从元素离开 onselect //文本被选中。 onsubmit //确认按钮被点击4.6.2 绑定事件的方式
方式一：
点我呀方式二：
试一试!
- 导入JS文件