1、JavaScript介绍
JavaScript是一种轻量级的脚本语言,和python语言是一样的,只是由浏览器解释执行,JavaScript可以插入HTML中,由浏览器执行。
目前有两种方式写入JavaScript:
直接嵌入<script></script>
写入到外部的js文件中,更容易维护。
由于HTML代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。因此建议js代码放在body内部的最下面。
案例:script的两种实现方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--js文件导入-->
<script src="common.js"></script>
<!--直接嵌入-->
<script>
alert(123);
</script>
</body>
</html>
2、两种条件语句:
if语句:
switch语句:
3、三种循环语句
i++循环索引
in语句,循环索引,可以处理字典的循环
while语句
4、函数:
普通函数:
匿名函数,没有名字的函数
自执行函数:直接把匿名函数和执行功能放在一起了。
5、作用域:大括号、函数是一个作用域
块级作用域:if{}就为一个块级作用域。JavaScript无块级作用域,因此才能在{}外输出name值;新版本上使用let代替var时,会有块级作用域。
JavaScript采用函数作用域,每个函数作为一个作用域,在函数外部无法访问内部作用域中的变量。
由于JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域链。当出现作用域链时,子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
案例1:当执行console.log(xo)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。
JavaScript的作用域在被执行之前已经创建,日后再去执行时只需要按照作用域链去寻找即可。
案例1:作用域链在被执行之前已经创建:全局作用域 -> Func函数作用域 -> inner函数作用域。执行顺序见图:
案例2:作用域链在被执行之前已经创建:全局作用域 -> Func函数作用域 -> inner函数作用域。xo被重新赋值:
案例3:双作用域链:创建两条作用域链:1)全局作用域 ->Bar函数作用域 ;2)全局作用域-> func函数作用域。xo去bar的作用链找值
6、闭包
由于在Javascript语言中,因为作用域的关系,只有函数内部的子函数才能读取局部变量,在函数外部自然无法读取函数内的局部变量。出于种种原因,我们有时候需要得到函数内的局部变量。这个时候就用到了闭包。
案例1:函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。
但是反过来就不行,f2内部的局部变量,对f1就是不可见的。
案例2:既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,就可以在f1外部读取它的内部变量了。 f2函数,就是闭包。
可以把闭包简单理解成"定义在一个函数内部的函数"。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
案例3:闭包应用,
闭包f2函数一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
闭包知识参考网址:http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
7、面向对象
Javascript是一种基于对象(object-based)的语言,但语法中没有class(类)。为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
案例1:构造函数,创建对象
Foo充当的构造函数
this代指对象
创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数,比如不需要赋新值,相同的方法和属性,就会浪费内存。使用原型可以把相同的方法和属性放进去,解决该问题。
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
案例2:相同的function函数放进原型中
面向对象参考文章:
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
8、变量介绍:
2-1 全局变量及局部变量的区别:就在于是否有var关键字:
var x=2; 为局部变量,带var关键字
x=3;为全局变量,不带var
建议:写变量的时候,为了避免出错,只要定义变量就先加上var,最后考虑全局变量的再去掉var关键字。
2-2 数据类型:
原始类型:数字、字符、布尔
对象类型:数组、字典
1)数字(Number)
JavaScript中不区分整数值和浮点数值,所有的数字均用浮点值表示。
把其他值转为数值的方式
关于其他值的转换:
parseInt(..) 将某值转换成数字,不成功则NaN
parseFloat(..) 将某值转换成浮点数,不成功则NaN
特殊值:
NaN,非数字。可使用 isNaN(num) 来判断。
Infinity,无穷大。可使用 isFinite(num) 来判断。
常量:比如Math.E常量e、Math.PI 常量等
静态函数:Math.abs( ) 计算绝对值、 Math.acos( ) 计算反余弦值、 Math.max( ) 返回两个数中较大的一个、math.random( ) 计算一个随机数、Math.round( ) 舍入为最接近的整数、 Math.sqrt( ) 计算平方根等。
2)字符串(String)
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。
主要方法有:
obj.length:长度
obj.trim():移除空白,obj.trimLeft()、obj.trimRight)
obj.charAt(n):返回字符串中的第n个字符
obj.concat(value, ...): 拼接
obj.indexOf(substring,start): 子序列位置
obj.lastIndexOf(substring,start):子序列位置
obj.substring(from, to):根据索引获取子序列
obj.slice(start, end):切片
obj.toLowerCase():大写
obj.toUpperCase():小写
obj.split(delimiter, limit):分割
obj.search(regexp):从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp):全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement):替换,正则中有g则替换所有,否则只替换第一个匹配项:
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号
案例:跑马灯案例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1" style="display:inline-block;background-color:green;color:white">欢迎光临</div>
<script>
//定时器,1秒钟执行一次
setInterval("f1()",10)
//定义函数,循环取值
function f1(){
// js 获取某一标签
var tag=document.getElementById('i1');
//获取标签内容
var text =tag.innerText;
alert(text);
var a=text.charAt(0);
var sub=text.substring(1,text.length);
var new_str=sub +a ;//新字符串
tag.innerText=new_str;//返回div标签
}
</script>
</body>
</html>
效果:
循环执行,一秒钟出现一次框
3)布尔类型(Boolean)
布尔类型仅包含真假,与Python不同的是其首字母小写。
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
4)数组
JavaScript中的数组类似于Python中的列表
常见功能:
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素;
obj.splice(n,0,val) 指定位置插入元素;
obj.splice(n,1,val) 指定位置替换元素;
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
5)其他功能:
序列化
JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化
转义
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
文章参考:http://www.cnblogs.com/wupeiqi/articles/5602773.html
学习来源:老男孩视频