JavaScript笔记
参考：http://www.cnblogs.com/wupeiqi/articles/5602773.html
javaScript是一门独立的语言，游览器都具有js解释器
首先html head头部包含如下：
<meta charset="UTF-8">
<title>Title</title>
<style>css代码</style>
<script>js 代码</script>
注意：每行js代码后要加：分号，因为当所有js代码压缩到一行的时候，是通过分号进行区分的，也会省空间和容量。但是请注意，一般js都是写在body标签的结尾处。
介绍js的存在形式；
1：head中
<script>
//javascript代码
alert('123');
</script>
<script type='text/javascript'> 这里是做了一个声明，也可以不写
//javascript代码
</script>
2：保存在文件中
<script src='js文件路径'> </script>
3：写到body内部的最下面，
js代码注释：但行注释： // 多行注释：/* ....*/
变量说明：
name = 'jack' #全局变量
var name = 'jack' # 局部变量
<script>
name = 'jack'; 全局变量
function fun() {
var name = jack 局部变量
}
</script>
写js代码：
－ 直接写在html文件中
－ 临时测试：在游览器的终端(console)
实例讲解：实现一个简单的弹窗
1 <body> 2 <input type="text" id="user"> 3 <input type="button" onclick="getdata();" value="提交"> 4 <script> 5 function getdata() { 6 var i = document.getElementById('user') # 从整个页面里查找id为user的标签 7 alert(i.value); 8 } 9 age = '18' 10 i = parseInt(age); 11 j = parseFloat(age); 12 </script> 13 </body>
基本数据类型：
1：数字
age = '18'
i = parseInt(age); # 将字符串转换为数字
j = parseFloat(age); #转换为浮点数
在页面右击－》审查元素－》ｃｏｎｓｏｌｅ里可以手工输入测试
2：字符串
- obj.length 长度 重点
- obj.trim() 移除空白
- obj.trimleft() / 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个组内容
$&：当前匹配的内容
$`：位于匹配子串左侧的文本。
举例：
a = 'jack'
"jack"
a.charAt(1)
"a"
3：列表（数组）：a = [11,22,33]
- 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() 对数组元素进行排序
4：字典
和python类似
5：布尔类型
使用小写：true,false
条件语句：
if (条件){
}else if(条件){
}else if(条件){
}else{}
if (1==1){} #值相等即可
if (1!=1){} #值不相等
if (1===1){} # 值和类型都要相等
if (1!==1){} #值和类型不相等
if (1==1 &&/|| 2==2) # &&->and ||->or
条件语句第二种写法：
name = 1
switch(name){
case;'1'; # 当name为1的时候，执行这里
console.log(123)
case:'2': # 当name为2的时候，执行这里
console.log(456);
default: # 默认执行
console.log('999')
for循环：（2种）
1： 循环时，循环的元素是索引值
写法一：
a= [11,22,33,44]
for (var item in a){
console.log(item); # 打印的是索引值，使用a[item]才能打印值
}
a= {'k1':'v1','k2':'v2}
for (var item in a){
console.log(item); # 打印的是key，使用a[item]才能打印值
}
写法二：
for (var i=0;i<10;i++){}
a = [11,22,33,44]
for (var i=0;i<a.length;i=i+1){
console.log(a[i])
}
注意：这个循环方法不支持字典
2：第二种循环，用法和python一样
while (条件){
循环体
}
循环也存在：break,continue
举例continue / break 使用：
for (var item in [11,22,33] {
console.log(item)
continue; 终止本次循环
}
for (var i=0;i<10;i++){
cosole.log(i)
break; 结束本循环
}
函数分类：3种：
第一种：普通函数
function 函数名(形参){
函数体
}
函数名(实参)
举例：
function func(arg){
return arg+1
}
var result = func(1)
console.log(result)
第二种：匿名函数
setInterval(执行的函数，5000)
setInterval(function(){
console.log(123)
},5000)
第三种：自执行函数：程序由上到下执行到这里时候，会自动创建并执行函数。
(function(arg形参){
console.log(arg)
})(实参)
序列化
JSON.stringify()：将对象转换为字符串
JSON.parse()：将字符串转换为对象类型
举例：将列表转换为字符串
l1=[11,22,33,44] # 首先定义一个数组
s = JSON.stringify(l1) # 将数组转换为字符串
输出："[11,22,33,44]"
new = JSON.parse(s) # 将字符串转换为数组
输出：(4) [11, 22, 33, 44]
经常用在与后台进行通信
转义：（对特殊字符和中文转义）
decodeURI()：URI中来转义的字符（解码，将uri中的中文转为可看懂的）
decodeURIComponent()：URI组件中的来转义的字符（解码）
encodeURI()：URI中的转义字符（编码，将uri中的中文转为%等字符串）
encodeURIComponent()：将uri中的中文，://这样的字符全部进行转义
以上举例说明：
url = 'https://www.sogou.com/web?query=zh中文' # 定义一个url
new_url = encodeURI(url) # 第一种编码
输出：https://www.sogou.com/web?query=zh%E4%B8%AD%E6%96%87 # 只中文进行了编码
encodeURIComponent(url) #第二种编码
输出：https%3A%2F%2Fwww.sogou.com%2Fweb%3Fquery%3Dzh%E4%B8%AD%E6%96%87" # 将https后的://和中文都进行了编码
解码相对上面的也是2种方法
decodeURI(new_url) # 进行解码
https://www.sogou.com/web?query=zh中文 # 输出解码后的url
escape()：对字符串转义
unescape()：给转义字符串解码
URIError：由URI的编码和解码方法输出
eval：相当于表达式和执行代码的集合
时间：
Date对象用来操作时间
var d = new Date() # 表示创建一个对象，（d里面就封装了当前的时间）
d.get... 获取 / d.set.... 设置
获取当前时间使用： d.方法
获取分钟：d.getMinutes()
修改分钟：
n = d.getMinutes() + 4 （获取新的时间）
d.setMinutes(n) （设置为新的时间）
作用域（最重要）：函数未执行前首先要从上到下进行解释（过程是只对函数生成作用域）
结论：
1：js以函数为作用域
举例：javascript：以函数为作用域
1 function func(){ 2 if(1==1){ 3 name='jack'; 4 } 5 console.log(name); 6 } 7 func()
2：函数的作用域在函数未被调用之前，已经创建
举例：以下这个函数没有执行，但是已经创建
1 function func(){ 2 if(1==1){ 3 name='alex'; 4 } 5 console.log(name); 6 }
3：函数的作用域存在作用域链（函数套函数），并且也是在被调用之前创建
1 name = 'jack'; # 优先级最低 2 function func(){ 3 var name = 'vivi'; # 优先级3 4 function inner(){ 5 var name = 'bill'; # 优先级1 6 console.log(name); 7 } 8 var name = 'toni'; #优先级2 9 reuturn inner; 10 } 11 var ret = func() 12 ret() 13 以上作用域链执行顺序解释如下：进行全局解释 name=jack,生成func作用域，执行ret=func()这里，开始执行函数 14 func，首先name=vivi,然后执行name=toni，最后返回inner函数给ret，这个时候name=toni,最后执行ret()函数 15 相当于执行inner函数，执行name=bill，并且打印此变量,注意：当name=bill此变量不存在时候，则name=toni 16 所以变量赋值顺序是：name=jack(优先级最低) , name=vivi , name=toni , name=bill(优先级最高) 17 说明：作用域和python一样，优先级都是从内到外。
4：函数内部局部变量 声明要提前
举例：
1 function func(){ 2 console.log(xx) 解释过程中xx 为undefined 3 var xx = 'jack' 执行到这里才声明变量 4 } 5 func() 执行函数
支持面向对象：
function foo(){
this.name = 'jack' # this相当于python 中的self，这里相当于构造方法
}
var obj = new foo(); # 实例化用，new 函数() 表示创建了一个对象
obj.name # 打印属性值
1：这里this代指对象（python self)
2：创建对象时：new 函数()
举例：
function Foo(n){
this.name = n;
this.sayname = function(){
console.log(this.name)
}
}
var obj1 = new Foo('we');
obj1.name
obj1.sayname()
执行：这里obj1就是函数里的this，obj1.name输出为赋予的实参we，然后执行sayname函数，函数内部的this就是对应的obj1，
所以obj1.sayname函数执行的输出this.name值为we
原型：
function Foo(n){
this.name = n;
}
# Foo的原型
Foo.prototype = {
'sayName': function(){
console.log(this.name)
}
}
obj1 = new Foo('we');
obj1.sayName() # 这里从Foo的原型里查找
obj2 = new Foo('we');
obj2.sayName() # 这里从Foo的原型里查找
# 原型存在的好处是，避免重复方法调用浪费内存资源
定时器：
<script>
function f1(){ # 定义 函数
console.log(1) # 在console里打印
}
function fun() {
alert('jack')
}
//创建一个定时器
//setInterval('执行什么','间隔多少')
setInterval('fun()',2000); //每2秒执行一次
</script>
举例：提取页面的内容
<body>
<div id="i1">欢迎老男孩来</div>
</body>
打开页面在console中显示内容：
i = document.getElementById('i1') # 获取id为i1的标签
i.innerText # 提取并显示标签里的内容
content = i.innerText
f = content.charAt(0)
l = content.substring(1,content.length)
new_content = l + f;
i.innerText = new_content;
举例：实现动态跑马灯
1 <div id="i1">欢迎老男孩来</div> 2 <script> 3 function getdata() { 4 //根据ID获取指定标签和内容，定义局部变量 5 var label_content = document.getElementById('i1'); 6 // 获取标签内的内容 7 var content = label_content.innerText; 8 // 获取第0个字符 9 var c1 = content.charAt(0); 10 // 获取位置1之后的内容 11 var c2 = content.substring(1,content.length); 12 var c3 = c2 + c1; 13 label_content.innerText = c3 14 } 15 setInterval('getdata()',1000) 16 </script>