web前端之 JS

JavaScript概述

JavaScript是一门编程语言，简称js，由浏览器编译并运行，JS说白了就是让页面能够动起来

js存在形式

1、在html页面中

<script>
    alert(123);   // 弹出一个窗口，然后内容为123
</script>

2、在html文件中导入js

<!--导入本地js文件-->
<script src="js1.js"></script>

<!--导入远程js文件-->
<script src="http://xxx.xxx.com/js1.js"></script>

js放置位置

放置在body标签的底部

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

js之变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

<script>

    // 定义函数
    function f1() {
        var i = 123;   // 局部变量

        i = 123;    // 全局变量
    }

    f1();  // 执行函数
    alert(i);
</script>

js之注释

'//代码内容'为单行注释，’/代码内容/‘为多行注释

<script>

    function f1() {
        // 单行注释
        // var i = 123;

        // 多行注释
        /*
        * i = 123;
        * */
    }
</script>

js之数据类型

JavaScript 中的数据类型分为原始类型和对象类型:

原始类型:
    数字
    字符串
    布尔值
对象类型：
    数组
    字典
    ...

注：数字、布尔值、null、undefined、字符串是不可变的
**null**是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值“
**undefined**是一个特殊值，表示变量未定义

1、数字(Number)

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示

• 创建数字类型的变量，并将其输出

• 数据类型转换

  • parseInt(value) 转换成整形，不成功则返回NaN

  

  • parseFloat(value) 转换成浮点数，不成功则返回NaN

  

• 特殊的值

  • NaN，非数字。可使用 isNaN(num) 来判断

  

  • Infinity，无穷大。可使用 isFinite(num) 来判断

2、字符串(String)

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

常用功能

• obj.length 获取字符串的长度

• obj.trim() 移除空白，类似于python的strip()

• obj.trimLeft() 移除左边的空白

• obj.trimRight) 移除右边的空白

• obj.charAt(n) 返回字符串中的第n个字符

• obj.concat(value, ...) 字符串拼接

• obj.indexOf(substring,start) 返回某个指定的字符串在字符串中首次出现的位置，start表示从第几个位置开始找，默认为0

• obj.lastIndexOf(substring,start) 跟indexOf的功能类似，lastIndexOf是从后向前找

• obj.substring(from, to) 根据索引获取子序列

• obj.slice(start, end) 跟substring的功能一样

• obj.toLowerCase() 将字符串转换为小写

• obj.toUpperCase() 将字符串转换为大写

• obj.split() 把字符串分割成字符串数组

正则表达式(后面再补充)

• obj.search(regexp)
• obj.match(regexp)
• obj.replace(regexp, replacement)

3、布尔类型(Boolean)

布尔类型仅包含真假，与Python不同的是其首字母小写。

• == 比较值相等

• != 不等于，比较的是值是否等于

• === 比较值和类型是否都相等

• !== 比较值和类型是否不相等

• || 或，有一个条件为真就为真

• && 且，两个条件都为真，才为真

3、数组

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

其他

1、序列化

JSON.stringify(obj)   序列化
JSON.parse(str)        反序列化

2、转义

decodeURI( )                   URl中未转义的字符
decodeURIComponent( )   URI组件中的未转义字符
encodeURI( )                   URI中的转义字符
encodeURIComponent( )   转义URI组件中的字符
escape( )                         对字符串转义
unescape( )                     给转义字符串解码
URIError                         由URl的编码和解码方法抛出

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
    eval()
    EvalError   执行字符串中的JavaScript代码

4、正则表达式

JavaScript中支持正则表达式，其主要提供了两个功能：

    test(string)     用于检测正则是否匹配
    exec(string)    用于获取正则匹配的内容
注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。

5、时间处理

JavaScript中提供了时间相关的操作，时间操作中分为两种时间：

时间统一时间
本地时间（东8区）
更多操作参见：http://www.shouce.ren/api/javascript/main.html

语句和异常

1、条件语句

JavaScript中支持两个中条件语句，分别是：if 和 switch

# if语句
    if(条件){

    }else if(条件){

    }else{

    }

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

2、循环语句

JavaScript中支持三种循环语句，分别是：

• for循环

var names = ["alex", "tony", "rain"];

for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

• while循环

while(条件){
    // break;
    // continue;
}

3、异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
注：主动跑出异常 throw Error('xxxx')

函数

1、基本函数

JavaScript中函数基本上可以分为一下三类：

// 普通函数
    function func(arg){
        return true;
    }

// 匿名函数
    var func = function(arg){
        return "tony";
    }

// 自执行函数
    (function(arg){
        console.log(arg);
    })('123')

注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。

2、作用域

JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。

切记：所有的作用域在创建函数且未执行时候就已经存在。

function f2(){
    var arg= 111;
    function f3(){
        console.log(arg);
    }

    return f3;
}

ret = f2();
ret();

 function f2(){
            var arg= [11,22];
            function f3(){
                console.log(arg);
            }
            arg = [44,55];
            return f3;
        }

        ret = f2();
        ret();

注：声明提前，在JavaScript引擎“预编译”时进行。

更多：http://www.cnblogs.com/wupeiqi/p/5649402.html

3、闭包

「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」

由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。

function f2(){
    var arg= [11,22];
    function f3(){
        return arg;
    }
    return f3;
}

ret = f2();
ret();

4、面向对象

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}

var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

对于上述代码需要注意：

• Foo充当的构造函数
• this代指对象
• 创建对象时需要使用 new

上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
}
Foo.prototype = {
    GetInfo: function(){
        return this.Name + this.Age
    },
    Func : function(arg){
        return this.Name + arg;
    }
}

利用JS做出炫酷的效果

利用JS做出LED屏跑马灯的效果

<!DOCTYPE html>
<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>

        setInterval("f1()", 1000);

        function f1() {

            var tag = document.getElementById('i1');    // 先找到标签

            var text = tag.innerText;   // 获取标签中的字符串

            var a = text.charAt(0);     // 获取字符串中的第一个字符

            var sub = text.substring(1, text.length);   // 截取字符串,从第2个字符开始到最后

            var new_str = sub + a;  // 字符串拼接
            tag.innerText = new_str;    // 修改标签中的字符串
        }
    </script>
</body>
</html>