JavaScript笔记

day15 js语法1、js语法+变量1.1 js注释与分号//    单行注释/**/  多行注释语句结束使用分号，如果省略，则由解析器确定语句的结尾1.2 ECMAScript中的一切（变量、函数名和操作符）都区分大小写1.3 JS的标识符- 什么是标识符？  变量、函数、属性的名字，或者函数的参数。- 标识符的命名规则  1.由字母、数字、下划线（_）或美元符号（$）组成  2.不能以数字开头  3.不能使用关键字、保留字作为标识符1.4 变量- 什么是变量  ECMAScript的变量是松散类型  松散类型：可以用来保存任何类型的数据。  换句话说，每个变量仅仅只是一个用于保存值的占位符而已。- 变量的声明与赋值1.变量声明：  变量的声明要使用var操作符  语法：var 变量名2.变量赋值：  声明的同时赋值：var 变量名=值  先声明后赋值：变量名=值3.一次声明多个变量，用逗号隔开，如：var id,sex,age,name="marry";4.省略var声明的变量是全局变量，不推荐省略var操作符来定义全局变量2、js数据类型简单数据类型：UndefiedNullBooleanNumberString复杂数据类型Object注：ECMASccript6新增symbor数据类型2.1 js数据类型之undefined和null- typeof功能：检测变量类型语法：typeof 变量 或 typeof(变量)返回值：string类型，有可能是：string、number、boolean、object、undefined、function- UndefiedUndefied类型只有一个值，即特殊的undefied说明：一般而言，不存在需要显式地把一个变量设置为Undefined值的情况。- nullnull值表示一个空指针对象如果定义的变量准备在将来用于保存对象，那么最好将改变量初始化为null而不是其他值。说明：undefined值是派生自null值，所以undefined==null的返回结果是true.2.2 js数据类型之Number和isNaN- Number:表示整数和浮点数- NaN:即非数值（Not a Number）是一个特殊的数值说明：1.任何涉及NaN的操作（例如NaN/10）都会返回NaN。2.NaN和任何值都不相等，包括NaN本身。- isNaN语法：isNaN(n)功能：检测n是否是"非数值"返回值：boolean参数：参数n可以是任何类型说明：isNaN()对接收的数值，先尝试转换为数值，再检测是否为非数值。2.3 js数据类型之数值转换- 有3个函数可以把非数值转换为数值：Number()   ParseInt()   ParseFloat()说明：1、Number()可以用于任何数据类型2、parseInt()和parseFloat()则专门用于把字符串转换为数值。- ParseInt():会忽略字符串前面的空格，直至找到第一个非空格字符。说明：1、ParseInt():转换空字符串返回NaN。2、parseInt()这个函数提供第二个参数：转换时使用的基数（即多少进制）- ParseFloat：从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止。说明：除了第一个小数点有效外，parseFloat()与parseInt()的第二个  区别在于它始终都会忽略前导的零。2.4 js数据类型之String与boolean- StringString类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号("")或单引号('')表示。- toString()与String()语法：str.toString()功能：将str转换为字符串返回值：str的一个副本参数：str是要转换的内容，可以是数值、布尔值、对象和字符串，说明：在不知道转换的值是不是null或undefined的情况下，还可以使用String()函数，它能够将任何类型的值转换为字符串。- Boolean用于表示真假的的类型，即true表示真，false表示假类型转换1.除0之外的所有数字，转换为布尔型都为true2.除""之外的所有字符，转换为布尔型都为true3.null和undefined转换为布尔型为false3、JS算数操作符3.1 算数操作符- 什么是表达式？将同类型的数据（如常量、变量、函数），用计算符号按一定的规则连接起来、有意义的式子称为表达式。- 操作符的分类1.算数操作符2.逻辑操作符3.赋值操作符4.比较操作符5.三元操作符* 算数操作符+：加-：减*：乘/：除%：取余* 递增和递减1.++a与a++都是对a进行递增的操作区别：++a先返回递增之后的a的值；a++先返回a的原值，再返回递增之后的值2.递减同理* 赋值操作符简单赋值：=复合赋值：+=  -=  *=  /=  %=* 比较操作符>、<、>=、<=、==、===、!=、!====:相等，只比较值是否相等===:相等,比较值的同时比较数据类型是否相等!=:不相等，比较值是否不相等!==:不相等，比较值的同时比较数据类型是否不相等，返回值：boolean型* 三元操作符语法：条件？执行代码1：执行代码2说明：可代替简单的if语句，如果条件成立，执行代码1，否则执行代码2* 逻辑操作符&& 与 || 或 ！ 非 && 与 （只要有一个条件不成立，返回false）说明：在有一个操作数不是布尔值的情况，逻辑与操作不一定返回值，此时它遵循下列规则：1.如果第一个操作数隐式类型转换为true，则返回第二个操作数2.如果第一个操作数隐式类型转换为false,则返回第一个操作数3.如果有一个操作数是null,则返回null4.如果有一个操作数是NaN,则返回NaN5.如果有一个操作数是undefined,则返回undefined|| 或 （只要有一个条件成立，返回true）说明：在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值，此时它遵循下列规则：1.如果第一个操作数隐式类型转换为true，则返回第一个操作数2.如果第一个操作数隐式类型转换为false，则返回第二个操作数3.如果有两个操作数都是null,则返回null4.如果有两个操作数都是NaN,则返回NaN5.如果有两个操作数都是undefined,则返回undefined！非说明：1.无论操作数是什么数据类型，逻辑非都会返回一个布尔值2.!!同时使用两个非操作符时- 第一个逻辑非操作无论什么操作数返回一个布尔值- 第二个逻辑非则对该布尔值求反day 16 JS流程控制语句第一章 JS分支语句1.if语句语法1:if (condition) {statement1;}语法2：if (condition) {statement1;}else{statement2;}语法3：if (condition) {statement1;}else if{statement2;}else{statement3;}2.alert()语法:alert()功能：弹出警告对话框3.prompt();语法：prompt()功能：弹出输入框返回值：1.点击确定，返回输入值2.点击取消，返回null3.length语法：string.length功能：获取string字符串的长度返回值：number4.获取星期语法：newDate().getDay()功能：获取星期返回值：number（0-6）5.switch语句语法：switch(expression){case value:statementbreak;case value:statementbreak;......default:statement}6.输出语法：document.write("内容")功能：向浏览器输出内容第二章 JS循环语句1 for语句语法： for(语句1;语句2;语句3){被执行的代码块;}语句1：在循环（代码块）开始前执行语句2：定义循环（代码块）的条件语句3：在循环（代码块）已被执行之后执行2 for嵌套3 while循环第三章 break和continue语句day17 JS函数1.函数的作用通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。2.函数的定义函数通过function声明，后跟一组参数以及函数体，语法如下：function function_name([arg0,arg1,...,argn]) {// body...}说明：1.functionName是要定义的函数名，属于标识符2.[]中的arg0,arg1,...argn为函数的参数3.[]说明里面的内容不是必须的，它不是语法3.函数的调用语法： 函数名([arg1,arg2,...,argn])4.函数的返回值任何函数通过return语句，后面跟着返回的值在实现返回值。1.函数会在执行完return语句之后停止并立即退出。2.return语句也可以不带有任何返回值，用于提前停止函数执行又不需要返回值的情况5.argumentsECMAScript的参数在内部用一个数组来表示，在函数体内通过arguments对象来访问这个数组参数。说明：1.arguments对象只是与数组类似，并不是Array的实例2.[]语法访问它的每一个元素3.length属性确定传递参数的个数day18 JS内置对象1.Array数组1.1 创建数组的基本方式有两种：1.1.1 使用Array构造函数语法：new Array()小括号()说明： （1）预先知道数组要保存的项目数量（2）向Array构造函数中传递数组应包含的项1.1.2 使用数组字面量表示法由一对包含数组项的方括号[]表示，多个数组项之间以逗号隔开。1.2 数组元素的读写读取和设置值时，使用方括号[]并提供相应的索引说明：索引是从0开始的正整数1.3 数组长度语法：array.length 功能：获取数组array的长度返回值：number说明：1.通过设置length可以从数组的末尾移除项或向数组中添加新项2.当我们把一个值放在超出数组大小的位置上时，会重新计算数组长度值，长度值等于最后一项索引加1。1.4 数组方法1.4.1 push()语法： arrayObject.push(newele1,newele2,...,neweX)功能： 把它的参数顺序添加到arrayObject的尾部返回值： 把指定的值添加到数组后的新长度1.4.2 unshift()语法： arrayObject.unshift(newele1,newele2,...,neweX)功能： 把它的参数顺序添加到arrayObject的开头。返回值： 把指定的值添加到数组后的新长度。1.4.3 pop()语法： arrayObject.pop()功能： 删除arrayObject的最后一个元素返回值： 被删除的那个元素1.4.4 shift()语法： arrayObject.shift()功能： 删除arrayObject的第一个元素返回值： 被删除的那个元素1.4.5 join()语法： arrayObject.join(separator)功能： 用于把数组中的所有元素放入一个字符串。返回值：字符串 1.4.6 reverse()语法： stringObject.reverse()功能： 用于颠倒数组中元素的顺序。返回值： 数组 1.4.7 sort()语法： arrayObject.sort(sortby)功能： 用于对数组的元素进行排序返回值：数组说明：1.即使数组中的每一项都是数值，sort()比较的也是字符串。2.sort()方法可以接收一个比较函数作为参数。1.4.8 concat()语法： arrayObject.concat(arrayX,arrayX,...,arrayX)功能： 用于连接两个或多个数组返回值：数组1.4.9 slice()语法： arrayObject.slice(start,end)功能：从已有的数组中返回选定的元素参数： start(必需)规定从何处开始选取，如是负数，从数组尾部开始算起end(可选)规定从何处选取结束，是数组片断结束处的数组下标说明：1.如没指定end，切分的数组包含从start到数组结束的所有元素2.如slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。返回值：数组1.4.10 splice() 最强大-- 删除语法： arrayObject.splice(index,count)功能： 删除从index处开始的零个或多个元素返回值： 含有被删除元素的数组说明： count是要删除的项目数量，如果设置为0，则不会删除项目。如果不设置，则删除从index开始的所有值。-- 插入语法： arrayObject.splice(index,0,item1,...,itemX)功能： 在指定位置插入值参数：Index:起始位置0：要删除的项数item1,...,itemX：要插入的项返回值：数组 -- 替换语法： arrayObject.splice(index,count,item1,...,itemX)功能： 在指定位置插入值，且同时删除任意数量的项参数： Index:起始位置count:要删除的项数item1,...,itemX：要插入的项返回值：从原始数组中删除的项（如果没有删除任何项，则返回空数组）1.4.11 indexOf()和lastindexOf()语法：arrayObject.indexOf(searchvalue,startIndex)功能： 从数组的开头（位置0）开始向后查找参数： searchvalue:必需，要查找的项；startIndex：可选，起点位置的索引返回值：number,查找的项在数组中的位置，没有找到的情况下返回-1注：lastindexOf()是从尾部进行查找说明：1.在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求的查找的项必须严格相等。2.数组的位置方法是ECMAScript5为数组实例新增的，所以支持的浏览器只有IE9+、Firefox2+、Safari3+、Opera9.5和Chome2.String2.1 chartAt-charCodeAt-indexOf和lastIndexOf2.1.1 charAt()语法： stringObject.charAt(index)功能：返回stringObject中index位置的字符2.1.2 charCodeAt()语法： stringObject.charCodeAt(index)功能：返回stringObject中index位置字符的字符编码说明：ECMAScript5中可使用"方括号加字符索引"来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined。2.1.3 indexOf()语法： stringObject.indexOf("o")功能： 从一个字符串中搜索给定的子字符串，返回子字符串的位置。返回值：数值说明：如果没有找到该子字符串，则返回-1注：lastindexOf()是从尾部进行查找2.2 slice()-substring()和substr()2.2.1 slice()语法： stringObject.slice(start,end)功能： 截取子字符串。参数说明：1.start:必需，指定子字符串开始位置2.end:可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾。3.当参数为负数时，会将传入的负值与字符串的长度相加。2.2.2 substring()说明：语法及功能同 slice() 完全一样区别在于：1.当参数为负数时，自动将参数转换为02.substring()会将较小的数作为开始位置，将较大的数作为结束位置2.2.3 substr()语法：stringObject.substr(start,len)功能：截取子字符串参数说明：1.start:必需，指定子字符串的开始位置2.len:可选，表示截取的字符总数，省略时截取至字符串的末尾3.当star为负数时，会将传入的负值与字符串的长度相加。4.当len为负数时，返回空字符串2.3 split和replace2.3.1 split()语法： stringObject.split(separator)功能：把一个字符串分割成字符串数组返回值：Array说明： separator:必需，分隔符。2.3.2 replace()语法： stringObject.replace(regexp/substr,replacement);功能： 在字符串中用一些字符替换另一些字符，或替换与一个正则表达式匹配的子串。返回值：String 参数： regexp:必需。规定子字符串或要替换的模式的RegExp对象replacement:必需。一个字符串值。2.4 toUpperCase()与toLowerCase()语法：stringObject.toUpperCase()功能：把字符串转换为大写语法：stringObject.toLowerCase()功能：把字符串转换为小写3.Math3.1 min()-max()-ceil()-floor()-round()-abs()3.1.1 Math.min()语法：Math.min(num1,num2,...numN)功能： 求一组数中的最小值返回值：Number 3.1.2 Math.max()语法：Math.max(num1,num2,...numN)功能： 求一组数中的最大值返回值：Number 3.1.3 Math.ceil()语法：Math.ceil(num)功能：向上取整，即返回大于num的最小整数返回值：Number3.1.4 Math.floor()语法：Math.floor(num)功能：向下取整，返回num的整数部分。返回值：Number3.1.5 Math.round()语法：Math.round(num)功能：将数值四舍五入为最接近的整数返回值：Number3.1.6 Math.abs()功能：返回num的绝对值返回值：Number3.2 random()语法：Math.random()功能：返回大于0小于1的一个随机数返回值：Number说明： 求n到m之间的随机整数的公式random=Math.floor(Math.random()*(m-n+1)+n)4.Date4.1 创建一个日期对象语法：new Date()功能：创建一个日期时间对象返回值：不传参的情况下，返回当前的日期时间对象- 获取年月日分秒及日期的方法1.getFullYear():返回四位数的年份2.getMonth():返回日期中的月份，返回值为0-113.getDate():返回月份中的天数4.getDay():返回星期，返回值为0-65.getHours():返回小时6.getMinutes():返回分7.getSeconds():返回秒8.getTime():返回表示日期的毫秒数- - 设置年月日分秒及日期的方法1.setFullYear():设置4位数的年份2.setMonth():设置日期中的月份，从0开始，0表示1月3.setDate():设置日期4.setDay():设置星期，从0开始，0表示星期日5.setHours():设置小时6.setMinutes():设置分7.setSeconds():设置秒8.setTime():以毫秒数设置日期，会改变整个日期day19 JS DOM基础1、DOM1.1 DOM查找方法- 语法：document.getElementById("id")功能：返回时对拥有指定ID的第一个对象的引用返回值：DOM对象说明：id为DOM元素上id属性的值- 语法：document.getElementsByTagName("tag")功能：返回一个对所有tag标签引用的集合返回值：数组 说明：tag为要获取的标签名称1.2 DOM(如何设置元素样式)js可以动态给元素设置样式语法：ele.style.styleName=styleValue功能：设置ele元素的CSS样式说明：1.ele为要设置样式的DOM对象2.styleName为要设置的样式名称（不能使用"-"连字符形式fontSize使用驼峰命名形式fontSize）3.styleValue为设置的样式值1.3 DOM(innerHTML和className)1.3.1 innerHTML(获取和设置标签之间的文本和html内容) 语法：ele.innerHTML功能：返回ele元素开始和结束标签之间的HTML语法：ele.innerHTML="html"功能：设置ele元素开始和结束标签之间的HTML内容为html1.3.2 className语法：ele.className功能：返回ele元素的class属性语法：ele.className="cls"功能：设置ele元素的class属性为cls1.4 DOM的属性设置与获取1.4.1 获取属性语法：ele.getAttribute("attribute")功能：获取ele元素的attribute属性说明：1.ele是要操作的dom对象2.attribute是要获取的html属性1.4.2 设置属性语法：ele.setAttribute("attribute",value)功能：在ele元素上设置属性说明：1.ele是要操作的对象 2.attribute为要设置的属性名称3.value为设置的attribute属性的值 注：1.setAttribute方法必须要有两个参数2.如果value是字符串，需加引导3.setAttribute()有兼容性问题1.4.3 删除属性语法：ele.removeAttribute("attribute");功能：删除ele上的attribute属性说明：1.ele是要操作的dom对象2.attribute是要删除的属性名称day20 JS DOM事件1、事件的绑定    1.1 HTML事件（直接在HTML元素标签内添加事件，执行脚本）语法：<tag 事件="执行文本"></tag>功能：在HTML元素上绑定事件说明：执行脚本可以是一个函数的调用鼠标事件- onload:页面加载时触发- onclick:鼠标点击时触发- onmouseover:鼠标滑过时触发- onmouseout:鼠标离开时触发- onfoucs:获得焦点时触发- onblur:失去焦点时触发- onchange:域的内容改变时发生    1.2 DOM0级事件步骤：- 通过DOM获取HTML元素    - （获取HTML元素）.事件=执行脚本语法：ele.事件=执行脚本功能：在DOM对象上绑定事件说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用不建议使用HTML事件原因：- 多元素绑定相同事件时，效率低- 不建议在HTML元素中写JavaScript代码2、事件类型2.1 事件类型鼠标事件- onload:页面加载时触发- onclick:鼠标点击时触发- onmouseover:鼠标滑过时触发- onmouseout:鼠标离开时触发- onfoucs:获得焦点时触发（该事件用于：-input标签type为text、password   -textarea标签）- onblur:失去焦点时触发- onchange:域的内容改变时发生- onsubmit:表单中的确认按钮被点击时发生- onmousedown:鼠标按钮在元素按下时触发- onmousemove:在鼠标指针移动时候发生- onmouseup:在元素上松开鼠标按钮时触发- onresize:当调整浏览器窗口的大小时触发- onscroll:拖动滚动条滚动时触发3、键盘事件3.1 键盘事件与keyCode属性- onkeydown:在用户按下一个键盘按键时发生- onkeypress:在键盘按键被按下并释放一个键时发生- onkeyup:在键盘按键被松开时发生- keyCode:返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码day21 jsBOM基础1、windows对象1.1 window对象（全局对象）- 什么是BOMBOM(browser object model)浏览器对象模型- BOM的对象有window、navigator、screen、history、location、document、event- window window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象（全局对象）* 所有的全局变量和全局方法都被归在window上1.2 window对象方法（alert-confirm-prompt）语法：window.alert("content");功能：显示带有一段消息和一个确认按钮的警告框语法：window.confirm("message")功能：显示一个带有指定消息和OK及取消按钮的对话框返回值：如果用户点击确定按钮，则confirm()返回true 如果用户点击取消按钮，则confirm()返回false语法：window.prompt("text,defaultText");参数说明： text:要在对话框中显示的纯文本（而不是HTML格式的文本）defaultText:默认的输入文本返回值：如果用户点击提示框的取消按钮，则返回null如果用户单击确认按钮，则返回输入字段当前显示的文本1.3 window对象（open和close）语法：window.open(pageURL,name,parameters)功能：打开一个新的浏览器窗口或查找一个已命名的窗口参数说明： pageURL:子窗口的路径name:子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）parameters:窗口参数（各参数用逗号分隔）语法：window.close()功能：关闭浏览器窗口1.4 window对象方法--定时器 setTimeoutJavaScript是单线程语言，单线程就是所执行的代码必须按照顺序- 超时调用语法：setTimeout(code,millsec)功能：在指定的毫秒数后调用函数或计算表达式参数说明：1.code:要调用的函数或执行的JavaScript代码串2.millsec:在执行代码前需等待的毫秒数说明：setTimeout()只执行code一次。如果要多次调用，可以让code自身再次调用setTimeout()- 清除超时调用语法：clearTimeout(id_of_settimeout)功能：取消由setTimeout()方法设置的timeout参数说明：1.id_of_settimeout：由setTimeout()返回的ID的值，该值标识要取消的延迟执行代码块1.5 window对象方法--定时器setInterval- 间歇调用语法：setInterval(code,millisec)功能：每隔指定的时间执行一次代码参数说明：1.code:要调用的函数或者要执行的代码串2.millisec:周期性执行或调用code之间的时间间隔，以毫秒计- 清除间歇调用语法：clearInterval(id_of_setinterval)功能：取消setInterval()方法设置的interval参数：1.id_of_setinterval:由setInterval()返回的ID值2、location对象location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能它既是window对象的属性，也是document对象的属性。2.1 location对象的常用属性语法：location.href功能：返回当前加载页面的完整URL说明：location.href与window.location.href等价语法：location.hash功能：返回URL中的hash(#号后跟零或多个字符)，如果不包含则返回空字符串语法：location.host功能：返回服务器名称和端口号（如果有）语法：location.hostname功能：返回不带端口号的服务器名称语法：location.pathname功能：返回URL中的目录和（或）文件名语法：location.port 功能：返回URL中指定的端口，如果没有，返回空字符串说明：假设网址为：locallhost:8080/hotel  那location.port值为8080语法：location.protocol功能：返回页面使用的协议语法：location.search 功能：返回URL的查询字符串。这个字符串以问号开头2.2 location对象2.2.1 改变浏览器位置的方法location.href属性location对象其他属性也可改变URL：location.hashlocation.search 2.2.2 location.replace()语法：location.replace(url)功能：重新定向URL说明：使用location.replace不会在历史记录中生成新记录2.2.3 location.reload()语法：location.reload()功能：重新加载当前显示的页面说明：location.reload()有可能从缓存中加载location.reload(true)从服务器重新加载3、history对象history对象保存了用户在浏览器中访问页面的历史记录3.1 history对象方法(back)语法：history.back()功能：回到历史记录的上一步说明：相当于使用了history.go(-1)3.2 history对象方法(forward)语法：location.forward()功能：回到历史记录的下一步说明：相当于使用了history.go(1)4、screen对象及属性screen对象包含有关客户端显示屏幕的信息语法：screen.availWidth功能：返回可用的屏幕宽度语法：screen.availHeight功能：返回可用的屏幕高度5、Navigator对象UserAgent:用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。