JavaScript

JavaScript与Java没有任何关系，它也是一门独立的编程语言。
浏览器本身就是JavaScript的解释器。

JavaScript
　　- 独立的语言，浏览器具有js解释器
　　- JavaScript代码存在形式：
　　　　- Head中

1 <script>
2     // javascript代码
3 </script>
4 
5

View Code

1 <script type='text/javascript'>
2 　　// javascript代码
3 </script>

View Code

　　　　- 文件中
　　　　　　<script src='js文件路径'></script>
　　　　PS：
　　　　　　JS代码需要放置在<body>标签内部的最下方.
　　　　原因：浏览器解释器是从上到下执行的，如果将<script></script>文件或代码块放在最上面，那么会优先执行js。
　　　　为了增强页面的用户友好度，先页面，后效果，所以一般可以将<script></script>文件或代码块放在body内部的最下面。

　　- 注释：
　　　　单行注释 //
　　　　多行注释 /* */
　　- 变量
　　　　python：
　　　　　　name='zoe'
　　　　JavaScript:
　　　　　　name='zoe' //全局变量
　　　　　　var name='zoe' //局部变量
　　　　JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
　　- 写Js代码：
　　　　- html文件中编写
　　　　- 临时，浏览器的终端 console
　　- 基本数据类型
　　　　数字
　　　　　　a=18;
　　　　　　a='18';
　　　　　　b=parseInt(a);
　　　　字符串
　　　　　　a='zoe'
　　　　　　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个组内容；
　　　　　　　　　　　　　　　　　　　　$&：当前匹配的内容；
　　　　　　　　　　　　　　　　　　　　$`：位于匹配子串左侧的文本；
　　　　　　　　　　　　　　　　　　　　$'：位于匹配子串右侧的文本
　　　　　　　　　　　　　　　　　　　　$$：直接量$符号
　　　　布尔值
　　　　　　布尔类型仅包含真假，与Python不同的是其首字母小写。
　　　　　　true false
　　　　数组（python列表）
　　　　　　a=[1,2,3]
　　　　　　　　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) 将数组元素连接起来以构建一个字符串
　　　　　　　　　　a.join('-') //返回："0-1-2-3"
　　　　　　　　　　PS：在Python中，'-'.join('123') ，join方法用于字符串，JS中用于列表。
　　　　　　　　obj.concat(val,..) 连接数组
　　　　　　　　obj.sort( ) 对数组元素进行排序

　　　　对象
　　　　　　字典
　　　　　　赋值： a={'k1':'v1','k2':'v2'}
　　　　　　取值： a['k1'] ==>'v1'
　　- for循环
　　　　第一种：循环时的元素是索引（数组和字典）

1 a=[1,3,5]
2 for(var item in a){
3 　　console.log(a[item]);
4 }
5 
6 a={'k1':'v1','k2':'v2'}
7 for(var item in a){
8 　　console.log(a[item]);
9 }

View Code

　　　　第二种：常用

1 for(var i=0;i<10;i++){
2     ...
3 }

View Code

　　　　// for(变量初始值；条件；操作i++等价于i=i+1)
　　　　由于i++只支持数字的元算，而字典的key不一定是数值，所以这种循环不支持字典。
　　　　ps：continue和break都和Python中一样。
　　- while循环
　　　　while(条件){
　　　　　　...
　　　　}
　　- switch case循环

 1 switch(name){
 2     case 'condition 1':
 3         console.log(1);
 4         break;
 5     case 'condition 2':
 6         console.log(2);
 7         break;
 8     default:
 9         console.log(0)
10 }

View Code

　　- 条件语句

 1 //if else写法：
 2 if(条件){
 3     ...
 4 }else{
 5     ...
 6 }
 7 
 8 //if elseif写法：
 9 if(条件){
10     ...
11 }elseif(条件){
12     ...
13 }else{
14     ...
15 }

View Code

　　- 判断语句== 和 ===

　　　　== 值相等
　　　　=== 值和类型都相等
　　　　!= 值不等
　　　　!== 值和类型都不相等
　　　　　　1=='1' ==>true
　　　　　　1==='1' ==>false
　　　　　　1!='1' ==>false
　　　　　　1!=='1' ==>true
　　- 条件语句'&&','||'
　　　　在JS中，and用'&&'；
　　　　or用'||'

　　- 函数
　　　　function 函数名(形参){
　　　　　　函数体
　　　　}
　　　　普通函数：
　　　　　　function func(arg){
　　　　　　　　return arg+1
　　　　　　}

　　　　匿名函数：
　　　　　　使用场景：
　　　　　　　　setInterval(function(){
　　　　　　　　　　console.log(135);
　　　　　　　　},5000)

　　　　自执行函数：创建函数并且自动执行。
　　　　　　(函数)(实参)
　　　　　　(function(arg){console.log(arg)})(123)

　　- JavaScript结尾要加上";"
　　　　不加可以运行，但是一定要加；
　　　　线上运行时，js会通过专业的压缩工具压缩成一行（节约空间），可以通过“;”来断句。

　　- 定时器：
　　　　setInterval('执行的代码',间隔时间)
　　　　实例：

1 <script>
2     function f1(){
3         console.log(1);
4     }
5     setInterval('f1();',5)
6 </script>

View Code

　　- 实例:跑马灯

 1 <div id="i1">欢迎领导莅临指导</div>
 2 <script>
 3     function func(){
 4 // 根据ID获取指定标签的内容，便于局部变量接受
 5         var tag=document.getElementById('i1');
 6 // 获取标签内部的内容
 7         var content=tag.innerText;
 8 
 9         var f=content.charAt(0);
10         var l=content.substring(1,content.length);
11         var new_content=l+f;
12         tag.innerText=new_content;
13 }
14 setInterval('func()',500);
15 </script>

View Code

　　- 序列化

　　　　JSON.stringify(obj) 序列化：将对象转换为字符串
　　　　JSON.parse(str) 反序列化：将字符串转换为对象类型

1 li=[1,3,5,7,9]
2 (5) [1, 3, 5, 7, 9]
3 JSON.stringify(li)
4 "[1,3,5,7,9]"
5 JSON.parse(JSON.stringify(li))
6 (5) [1, 3, 5, 7, 9]

View Code

　　- 转义

　　　　客户端（cookie） ==> 服务器端
　　　　将数据经过转义后，保存在cookie
　　　　　　decodeURI( ) URl中未转义的字符
　　　　　　decodeURIComponent( ) URI组件中的未转义字符
　　　　　　encodeURI( ) URI中的转义字符
　　　　　　encodeURIComponent( ) 转义URI组件中的字符
　　　　　　escape( ) 对字符串转义
　　　　　　unescape( ) 给转义字符串解码
　　　　　　URIError 由URl的编码和解码方法抛出

　　- eval
　　　　JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
　　　　在Python中，eval只能执行表达式，如：“8*8”；exec可以执行代码。
　　　　　　val=eval(表达式)
　　　　　　val=exec(执行代码)

　　　　eval()
　　　　EvalError 执行字符串中的JavaScript代码

　　- 时间
　　　　date对象（date是个类)
　　　　var d=new Date()
　　　　d.getXXX 获取
　　　　d.setXXX 设置

　　- 作用域（顶顶重要）
　　　　1.在JavaScript中，默认情况下，也是以函数作为作用域。
　　　　　　其他语言：以代码块作为作用域
　　　　　　在Python中：以函数作为作用域
　　　　　　在JavaScript中，默认情况下，也是以函数作为作用域
　　　　2.函数的作用域在函数未被调用之前，已经创建。
　　　　3.函数的作用域存在作用域链，并且也是在被调用之前创建
　　　　实例1：

 1 xo='alex';
 2 function func(){
 3     var xo='eric';
 4     function inner(){
 5         var xo='tony';
 6         console.log(xo);
 7     }
 8     inner();
 9 }
10 func()

View Code

解析：这个函数的作用域链是"tony"-"eric"-"alex"(先内后外再全局)

　　　　变种1：

 1 xo='alex';
 2 function func(){
 3         var xo='eric';
 4         function inner(){
 5             console.log(xo);
 6         }
 7         return inner;
 8 }
 9 
10 var ret=func()
11 ret()

View Code

//返回eric。
解析：因为作用域链在被调用前已经创建好了。

　　　　变种2：

 1 xo='alex';
 2 function func(){
 3     var xo='eric';
 4     function inner(){
 5         console.log(xo);
 6     }
 7     var xo='tony'
 8     return inner;
 9 }
10 var ret=func()
11 ret()

View Code

//返回tony。
解析：在func的作用域中xo='eric',又被替换为'tony'，所以最后func中的xo='tony'

　　　　4.函数内局部变量提前声明

1 function func(){
2     console.log(xoo);
3     var xoo='alex';
4 }
5 func()

View Code

//返回：undefined
解析：
　　var xoo; //提前声明，不赋值，即undefined。
　　function func(){
　　　　console.log(xoo);
　　　　var xoo='alex';
　　}
　　func()
　　//返回：undefined

　　- 面向对象
　　　　JavaScript也支持面向对象。
　　　　　　函数：

1 function foo(){
2     var xo='alex';
3 }
4 foo()

View Code

　　　　　　类：

1 function Foo(){
2     this.name=n;
3 }
4 var obj = new Foo('we')

View Code

　　　　　　　　a. this指代对象（相当于Python中的self）
　　　　　　　　b. 创建对象时，语法：new 函数()
　　　　　　上面的类Foo中，仅定义了参数，未定义方法，可以用下面两种方法在类中定义方法。
　　　　　　方法一：

1 function Foo(){
2     this.name=n;
3     this.SayName=function(){
4         console.log(this.name);
5         }
6     }
7 var obj1 = new Foo('we');
8 var obj2 = new Foo('are');

View Code

　　　　　　上述的写法，相当于在Python中，

1 class Foo:
2     def __init__(self,name):
3         self.name=name
4 
5     def SayName(self):
6         print(self.name)
7 obj1 = Foo('we')
8 obj2 = Foo('are')

View Code

解析：在Python中，实例化的两个对象中分别存了name="we",name="are",在调用其方法时，是调用公共的方法SayName；
而在上面的JavaScript中的两个对象中，除了分别存了name="we",name="are"以外，每个对象还存储了一个独立的SayName方法，这是一种资源的浪费。

　　　　　　方法二：原型

 1 function Foo(){
 2     this.name = n;
 3 }
 4 #Foo的原型
 5 Foo.prototype={
 6     'SayName':function(){
 7         console.log(this.name)
 8     }
 9 }
10 obj1 = new Foo('we');
11 obj2 = new Foo('are');
12 obj1.SayName();

View Code