前端学习之-- JavaScript

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>

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>

View Code

基本数据类型：
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()

View Code

2：函数的作用域在函数未被调用之前，已经创建

举例：以下这个函数没有执行，但是已经创建

1 function func(){
2 if(1==1){
3     name='alex';
4 }
5 console.log(name);
6 }

View Code

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一样，优先级都是从内到外。

View Code

4：函数内部局部变量声明要提前
举例：

1 function func(){
2     console.log(xx) 解释过程中xx 为undefined
3     var xx = 'jack' 执行到这里才声明变量
4 }
5 func() 执行函数

View Code

支持面向对象：
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>

View Code