JavaScript高级(1)
一、概述
1、JavaScript简介
JavaScript被认为是客户端“脚本”,它不常叫“语言”,言外之意是比较简单,但是深入了解之后,你会发现 简单的外表下,蕴藏着丰富的内涵。
JavaScript是由Netscape(网景)提出并发展,它起初名为“livescript”,后从营销角度考虑更名为“javascript”,但它和java没有直接关系,顶多是js被期望发展成java那样面向对象的语言(基于对象)。
现在JavaScript标准由ECMA(European Computer Manufactures Assiocation)制定和维护,因此也叫“ECMAScript”,它是包含了网景的Javascript和微软的Jscript,最新的js版本是ES6(ECMAScript6.0)。
作为客户端脚本的JavaScript常用于网页浏览器的开发,然则它的设计却是一种通用性的脚本语言,可以被嵌入任何应用,例如嵌入falsh脚本化falsh player 嵌入applet脚本化java。
JavaScript应该包含:ECMAScript、DOM、BOM
① 数据验证(表单验证)
② 网页特效(目前大多数的网页特效都是通过JS编写)
③ 编写网页小游戏
④ 服务器端编程,数据交互(Ajax、Node.js)
二、JavaScript基础回顾
1、检测JavaScript的执行情况
document.write();
alert(); === window.alert();
console.log(); — 它可以输出任何类型的变量,而且可以一次性输出多个变量。可以看到数据的结构。
2、JavaScript变量
1、命名规则
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
2、一条语句,多个变量
3、只声明变量,没有赋初值
4、重新声明变量
3、常量
常量必须给初始值;
常量不能改变值;
常量不能重新定义;
使用const来声明常量。
4、运算符
1、算数运算符
加减乘除 累加 累减
2、赋值运算符
编程中,“=”表示赋值,意思是将等号后面的值赋值给等号前面的变量。
3、用于字符串的+运算符《》
js中用“+”连接字符串,类似于php中的“点”。
如果“+”前后都是数值型,那么“+”表示加法运算。
4、比较运算符
大于、小于、大于等于…. 全等于、不全等
== :表示相等判断,只判断值是否想等,不考虑数据类型。比如5 == ‘5’ 结果为true
=== :表示全等判断,即考虑值是否想等,也考虑数据类型是否相同。比如5===’5’,结果为false。
5、三元运算符(三目、条件)
PHP:
$res = isset($_GET[‘type’]) ? ‘a’ : ‘b’;
JavaScript:
var a = 5==’5′ ? ‘hello’ : ‘nihao’;
6、逻辑运算符
and &&
or ||
!
5、流程控制
循环:for while do…while for…in
跳出循环:break continue
循环结构另一种写法
案例:
查找质数(素数),只能被1和它本身整除的数就是质数。1既不是质数也不是和数。
质数举例:2,3,5,7,11,13
和数举例:4,6,8,9,10
用程序查找100以内的质数。
跳出循环:
break跳出循环,终止该循环
continue跳过当前这次循环,继续执行下一次循环
6、函数
1、定义
function functionName(参数列表){
函数体
//return
}
2、函数参数默认值
JavaScript中函数的参数不能有默认值。ES6中的函数才允许参数有默认值。目前IE11不支持函数参数有默认值,但是火狐、谷歌、UC支持。
如果就想实现y有默认值这种效果,怎么办?
3、函数参数不固定
使用arguments可以获取到函数的所有参数。
arguments[0]表示函数的第一个参数
arguments[1]表示函数的第二个参数
….
以此类推。
arguments.length表示函数参数的个数。
4、函数作为变量
另一种把函数当做另一个函数的参数的形式:
5、函数自调用
6、函数在内存中的形式
7、数组
声明数组的方式:
①、var arr = new Array(数组的单元1, 单元2, 单元3….);
②、var arr = new Array(数字); //数字表示数组元素的个数
③、var arr = [数组的单元1, 单元2, 单元3….];
用length表示数组元素的个数,数组的长度。
8、数据类型
1、类型种类
PHP有8中数据类型:
4种基本数据类型:bool、string、int、float
2种复合数据类型:array、object
2种特殊数据类型:null、resource
JavaScript有7种数据:
3种基本数据类型:string、bool、number
2种复合数据类型:array、object
2种特殊数据类型:null、undefined
2、判断数据类型
使用typeof来判断变量的数据类型:
undefined – 如果变量是 Undefined 类型的
boolean – 如果变量是 Boolean 类型的
number – 如果变量是 Number 类型的
string – 如果变量是 String 类型的
object – 如果变量是一种引用类型(数组、对象)或 Null 类型的
注释:您也许会问,为什么 typeof 运算符对于 null 值会返回 “object”。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
三、数据类型转化
1、转化成字符串
1、使用toString()方法。
常规转化:
用法:变量.toString();
基模式:
基模式针对的是整型的变量。
1110 十进制:
0*20 + 1*21 + 1*22 + 1*23 = 0 + 2 + 4 + 8 = 14
14 二进制:辗转相除法,最后取余数
14/2 = 7 ….. 0
7/2 = 3 …… 1
3/2 = 1 …….1
1/2 = 0 …….1
将余数反过来就是结果:1110
2、使用String()强制类型转化。
强制类型转化使用的方法是String();
用法:String(变量);
2、转化成数字
1、转化成整型parseInt()
parseInt() 方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN(not a number),不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parseInt() 将把该字符之前的字符串转换成数字。
字符串中包含的数字字面量会被正确转换为数字,比如 “0xA” 会被正确转换为数字 10。不过,字符串 “22.5” 将被转换成 22,因为对于整数来说,小数点是无效字符。
parseInt() 方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成十进制整数。基是由 parseInt() 方法的第二个参数指定的.
2、转化成浮点型parseFloat()
parseFloat() 方法与 parseInt() 方法的处理方式相似,从位置 0 开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字符之前的字符串转换成整数。
不过,对于这个方法来说,第一个出现的小数点是有效字符。如果有两个小数点,第二个小数点将被看作无效的。parseFloat() 会把这个小数点之前的字符转换成数字。这意味着字符串 “11.22.33” 将被解析成 11.22。
使用 parseFloat() 方法的另一不同之处在于,字符串必须以十进制形式表示浮点数,而不是用八进制或十六进制。该方法会忽略前导 0,所以八进制数 0102 将被解析为 102。对于十六进制数 0xA,该方法将返回 NaN,因为在浮点数中,x 不是有效字符。(注释:经测试,具体的浏览器实现会返回 0,而不是 NaN。)
此外,parseFloat() 方法也没有基模式。
3、强制类型转化Number()
3、转化成布尔
当要转换的值是至少有一个字符的字符串(非空字符串)、非 0 数字或对象时,Boolean() 函数将返回 true。
如果该值是空字符串、数字 0、undefined 或 null,它将返回 false。
四、执行流程
1、全局环境
js在运行时,首先会创建一个全局执行环境,这个全局环境就是定义一个全局对象,页面中所有的内容(不同的script中的内容) 都是这个全局对象的成员,在浏览器javascript中(嵌入网页的js)这个全局对象是window。
除此之外,还可以调用window对象中的a或者b,看一下window对象中是否有这两个成员。
2、执行流程
读一段(一个script标签)代码 编译(分析词法、句法) 执行(输出、调用) 继续读下一段script
对于同一个script代码段中的函数来说,函数会预先加载。也就是说可以先调用函数,后声明函数。
但是不能在前一个script代码段中调用后一个script代码段中的函数。
3、错误类型
编译错误:对词法、句法的分析,也就是语法上有没有错误。
执行错误:输出、调用函数等。
如果出现语法上的错误,当前的script代码段的内容全部终止执行
如果发现执行错误,当前script代码段错误之前的代码还能够正常执行,错误之后的代码会终止执行。
无论发生哪种错误,都不会影响下一个script代码段。
4、异常处理
可以用try…catch…来处理。在js中,错误处理类是Error(类似于PHP中的Exception)。
自然抛出:
手动抛出:
五、作用域(链)
1、作用域分类
js中只有全局作用域和局部作用域,ES6中还有块作用域。
2、作用域
作用域就是变量有效的活动空间。比如函数内部的用var声明的变量,它的活动空间就是函数内部,那么函数内部就是改变量的作用域。
局部作用域:函数内部。
全局作用域:函数外部。
案例一:函数内部可以使用函数外部的变量
复杂一点的案例
案例二:函数外部不能够使用函数内部用var声明的变量
案例三:函数外部能够使用函数内部没有用var声明的变量
案例四:带参数的情况
4、作用域链
当访问一个变量的时候,首先看当前的作用域中是否有这个变量的声明,如果有,直接使用它,如果没有,那么去上一层作用域中查找,上一层作用域如果也没有该变量的声明,则继续向上一层作用域中查找,直到全局作用域。这个链式的查找方式就是作用域链。
六、事件
1、事件定义
事件由什么组成:
用户的行为(鼠标行为、键盘行为) + JavaScript引擎 + 事件表达式
2、事件表达式
3、事件绑定的三种方式
1、使用dom对象,绑定事件(动态绑定)
这种方式完全不用考虑html。
这种方式,就是获取要绑定事件的dom对象,然后给其绑定一个事件处理函数即可。
事件处理函数中的 this表示绑定该事件的dom对象。
2、行内绑定
直接在标签内绑定一个事件。
这种绑定事件的方式,js中的this表示当前的标签的dom对象。
3、行内绑定
这种绑定方式中的this表示window对象。
4、常用事件
页面事件
onload :当页面载入完毕后触发
焦点事件
onfocus :当获取焦点时触发
onblur :当失去焦点时触发
鼠标事件
onmouseover :当鼠标悬浮时触发
onmouseout :当鼠标离开时触发
键盘事件
onkeypress :当键盘按下时触发
onkeydown :当键盘按下时触发
onkeyup :当键盘弹起时触发
其他事件:
onclick : 单击事件
onchange : 改变选项时触发的事件(多用于select>option)
onresize:当窗口改变大小时触发的事件
onscroll:当滚动条滚动时,触发的事件
onsubmit:当表单提交时触发的事件
5、案例-点击页面中的li,能够显示它的下标
先找到页面中的li,然后用循环的方式给每个li都绑定一个单击事件
错误的输出方式:
正确的方式: