HTML,CSS和JavaScript是网页设计的基础。HTML和CSS定义了静态的效果，而JavaScript则可以体现出一些动态的效果。在已经掌握一种或者多种编程语言的基础下，学习JS很容易，下面看看一些基本的使用方法。

1. JavaScript的位置。

和CSS类似，我们可以直接写代码块，也可以引用外部文件。理论上，<script src="xxx"></script>可以放在<head>里面，也可以放在<body>里面，但是从效率考虑，如果script的链接比较慢或者错误，<head>里面可能导致整个页面半天加载不出来，因此，我们一般推荐放在<body</body>代码块的底部。如果只是暂时的测试性质的编码，我们甚至可以直接在浏览器上的console上使用。F12或者Inspect ，然后选择console就可以了

2.定义变量

直接写 name=‘james’ 定义了全局变量，如果在函数里面定义，指定一个var 关键字，则表示局部变量

3.数字

 

JS不区分float或者int，不过我们可以通过parseInt或者parsefloat来转换字符

 例如：

             a="222.2"    parseFlaot(a)    222.2    parseInt(a)    222

        

4. 字符串 

这个和其他语言几乎一样，有常见的属性和方法。

                                

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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个组内容；
                                     
$&：当前匹配的内容；
                                     
$`：位于匹配子串左侧的文本；
                                     
$'：位于匹配子串右侧的文本
                                     
$$：直接量$符号

实例：×××灯，不停的循环输出文字 

   

     
          
      
           
       Title
       
        欢迎领导视察工作

5. 布尔值， true和false，注意是小写

  • ==      比较值相等

  • !=       不等于

  • ===   比较值和类型相等

  • !===  不等于

  • ||        或

  • &&      且

6.  数组，和python的列表差不多。

方法如下，其中splice比较特殊 他有3个参数，第一个参数表示插入的位置，第二个参数表示删除几个值，第三个表示插入的新值。因此splice(0,1)表示删除第一个值，splice(0,0,20)表示第一个值前面插入一个值20

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( )         对数组元素进行排序

7. 字典  

例如

a={'name':'James','age':30} 

使用和Python一样

8. for循环；for循环有2种形式

第一种形式        

例如直接循环数组，他输出的是索引而不是值

     

a=[11,22,33,44]for(var item in a){console.log(item);} 0 1 2 3for(var item in a){console.log(a[item]);}11223344

     直接循环字典，输出的也是key而不是value

b={"name":"alex","age":20}for(var item in b){console.log(item);}nameageundefinedfor(var item in b){console.log(b[item]);}alex20

第二种形式, 就和其他语言一样；不过注意如果要输出字典，因为字典的key的数据类型是无序散乱 因此这里就不适合了

for(var i=1;i

除了for循环，js也支持while循环，这个和其他语言没区别。

基本格式：

while (条件){}

9. 条件语句

基本格式:

if(条件){}else if(条件){}else{}

另外一个常见的条件语句是switch，这个东西在Python里面是没有的

例如

name="2" switch(name){            case '1':                age = 123;                break;            case '2':                age = 456;                break;            default :                age = 777;        }456

10. 函数

Javascript里面有3种函数，分别是普通函数，匿名函数和自执行函数。格式如下所示。

普通函数：单独的定义，然后再调用            function func(){                            }            匿名函数：直接在需要调用的地方写函数            setInterval(function(){                console.log(123);                        },5000)            自执行函数(创建函数并且自动执行)：                                    (function(arg){                console.log(arg);            })(1)

11. 序列化

Python里面可以通过json和pickle把对象转换成字符串，这个过程叫做序列化。json可以转化标准的数据类型，而pickle可以转化自定义的对象；

javascript里面也可以通过json来进行序列化和反序列化。格式是

JSON.stringify()   将对象转换为字符串

JSON.parse()       将字符串转换为对象类型

一个例子是自定义一个字典保存数据，然后序列化之后保存到cookie中。

12. eval

类似的，Python里面有eval和exec来执行表达式。eval执行表达式，有返回值；exec可以执行复杂的代码，但是没有返回值；

Javascript里面的eval则是两者之和，可以执行复杂的表达式和代码，然后返回结果

13. 作用域

======== 1. 以函数作为作用域 （let）=========

        

 其他语言： 以代码块作为作用域

xo = "alex";function func(){    // var xo = 'eric';    function inner(){        // var xo = 'tony';        console.log(xo);    }    inner()}func()// 报错

       

        

Python：   以函数作为作用域

情况一：

def func():    if 1==1:        name = 'alex'    print(name)func()     // 成功

 情况二：

def func():    if 1==1:        name = 'alex'    print(name)func()print(name)        // 报错

 JavaScript:  以函数作为作用域

        

          

function func(){    if(1==1){        var name = 'alex';    }    console.log(name);}func()

        

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

        

        function func(){            if(1==1){                var name = 'alex';            }            console.log(name);        }

        

 ====== 3. 函数的作用域存在作用域链，并且也是在被调用之前创建 ========

示例一：

 

xo = "alex";function func(){    // var xo = 'eric';    function inner(){        // var xo = 'tony';        console.log(xo);    }    inner()}func()------alex

        

 示例二：

xo = "alex";function func(){    var xo = 'eric';    function inner(){        console.log(xo);    }    return inner;}var ret = func()ret()----eric

  

示例三：

xo = "alex";function func(){    var xo = 'eric';    function inner(){        console.log(xo);    }    var xo = 'tony';        return inner;}var ret = func()ret()------tony

        

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

      

function func(){    console.log(xxoo);}func();// 程序直接报错function func(){    console.log(xxoo);    var xxoo = 'alex';}解释过程中：var xxoo;func();// undefined

14. Javascript面向对象

function Foo(n){    this.name = n;    this.sayName = function(){        console.log(this.name);    }}var obj1 = new Foo('we');obj1.nameobj1.sayName()var obj2 = new Foo('wee');obj2.nameobj2.sayName()

Foo相当于构造函数

this类似于Python里面的self，指代的对象

创建新对象通过new实现

类似的Python代码

class Foo:    def __init__(self,name):        self.name = name            def sayName(self):        print(self.name)        obj1 = Foo('we')obj2 = Foo('wee')

注意他们的区别在于Python把sayName这个方法保存在类里面，而JS会分别在对象里面都保存了一份，因此比较浪费内存。

可以通过创建原型的方式解决这个重复的问题

function Foo(n){        this.name = n;    }    # Foo的原型Foo.prototype = {    'sayName': function(){        console.log(this.name)    }}obj1 = new Foo('we');obj1.sayName()obj2 = new Foo('wee');