Javascript基础

简介

前面我们学习了html和css，但是我们写的网页不能动起来，如果我们需要网页出现各种效果，那么我们就要学习一门新的语言了，那就是JavaScript，JavaScript是世界上最流行的脚本语言，而且Javascript和Python一样也是一门全栈开发语言，并且跨平台。浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
本文转自：http://www.cnblogs.com/wanghzh/p/5805932.html

代码存放位置

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

Js代码可以放在一个单独的文件中，然后通过可以将其导入进来，或者直接在html文件中直接书写代码，如下面所示，其中两种方式的 type都可以不用写，因为浏览器默认的便是javascript

<script type="text/javascript">
  　　Js代码内容
</script>

变量

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

name = 'test';                  //不加var 定义的是全局变量
function f1() {
    //name = 123 ;             // 不加var 函数里面修改的还是全局变量
    var name = 'jason'         // 加var 函数里面修改的是局部变量
}

数据类型

数字Number
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。下面来看一下代码示例

<script type="text/javascript">
    var num1 = new Number(123); //创建了一个数字类型的对象
    var num3 = Number(456);　　 // 456
    var num2 = 666;

    var s1 = 's123';
    var num4 = parseInt(s1);

    console.log(num1.valueOf(),num2,num3);
    console.log(num4);  // 返回NaN，非数字值
    if(isNaN(num4)){  //isNan函数用于检查其参数是否是非数字值
        console.log('not a number');  // not a number
    }
    else {
        console.log('a number');
    }
    console.log(isFinite(num3));    // isFinite()有限数值返回true。
    console.log(typeof num3);      // 返回'number'
　　　　var a = 1222.4444444;
　　　　console.log(a.toFixed(2));       // 1222.44, 四舍五入2位
</script>

字符串
字符串是由字符组成的数组，在JavaScript中字符串是不可变的,下面来看一下代码示例

<script type="text/javascript">
    a='      abcd ';
    a.trim().charAt(2); // 返回c,先去掉空格，然后找索引为2的字符串，从0开始
    a.trim().substring(2,4); // 返回cd,切片，找到从索引2开始以及包括2在内的(4-2)=2个字符
    a.trim().indexOf('a');  //返回0
    a.trim().indexOf('bc'); //返回1
    a.trim().indexOf('bc2'); //返回-1,表示不包含
    a.trim().length;  //返回4，表示字符串长度,注意length无括号，是字符串的一个属性
</script>

布尔值　
布尔类型仅包含真假，与Python不同的是其首字母小写。下面来简单的看一下代码示例，

var a = 123;
var s = '123';
console.log(a==s);      // true
console.log(a===s);     // false  判断值和类型一样

数组
JavaScript中的数组类似于Python中的列表,里面也提供了一些内置方法，下面我们来看一下

var a = [1,2,3,4];
   console.log(a.length);   // 4
   a.push(5);               // 追加元素
   console.log(a);         // [1, 2, 3, 4, 5]
   var ret = a.pop();       //从后边拿掉一个元素
   console.log(ret);        // 5
   a.unshift('aaa');        // 头部插入元素
   console.log(a);          // ["aaa", 1, 2, 3, 4]
   var ret1 = a.shift();    // 头部移除元素
   console.log(ret1);       // aaa
   var ret2 = a.slice(1,3); // 切片，拿到第二个和第三个元素,a.slice()可以复制一个数组
   console.log(ret2);       // [2,3]

// obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
   console.log(a);          // [1,2,3,4]
   a.splice(1,0,'first');   // 指定位置插入元素,在第二个元素前边插入'first',第二个位置=0表示插入
   a.splice(2,1,'second');  // 指定位置替换元素，在第三个元素的位置，删除一个元素，并替换成'second'
   a.splice(2,1);           // 指定位置删除元素,删除第三个元素
   console.log(a);          // [1, "first", 3, 4]
   var b = ['22'];
   console.log(b.concat(a)); // 连接数组 ["22", 1, "first", 3, 4]，把a连接到b上，形成新的大数组
   console.log(a.join('-')); // 拼接字符串 1-first-3-4，把数组用-拼接形成字符串，类似python的'-'.join(a)
   console.log(a.reverse()); // 反转字符串 [4, 3, "first", 1]

   console.log([3,2,5].sort())  //对number数组进行排序

序列化
序列化就是将JavaScript中的数据类型转换成字符串，反序列化的过程则相反

var a = ['a','b'];
typeof(a);  // 返回"object",这是一个js对象
ret = JSON.stringify(a); // 序列化转成字符串
typeof(ret); // "string"
var obj = JSON.parse(ret);
typeof(obj); // "object" 反序列化，变为对象

eval(string)
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
```
eval('1+2*5-5')  //返回6
```
正则表达式
JavaScript中支持正则表达式，其主要提供了两个功能：
test(string) 用于检测正则是否匹配
exec(string) 用于获取正则匹配的内容
注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。下面来简单的看一下使用
```
    var a = /d+h/;  // 设定正则规则
    a.test('123h434');
    true
    a.test('12a34')
    false
    a.exec('123h434')
    ["123h"]
    a.exec('123e434');
    null
    
```

时间
在JavaScript中，Date对象用来表示日期和时间。JavaScript中提供了时间相关的操作，分别为获取时间和设置时间，时间操作中分为两种时间，统一时间(UTC),以及本地时间（东8区）

var now = new Date();
now.getFullYear();
now.getMonth(); // 6, 月份，注意月份范围是0~11，6表示7月
now.getDate(); // 7, 表示7号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getTime(); // 1435146562875, 以number形式表示的时间戳

语句

条件语句

if(条件){

}else if(条件){
        
}else{

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

循环语句

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(条件){
    // break;
    // continue;
}

异常处理

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

函数

函数类型
JavaScript中函数基本上可以分为一下三类,普通函数，匿名函数，自执行函数,此外需要注意的是对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。


// 普通函数
    function func(arg){
        return true;
    }
            
// 匿名函数
    var func = function(arg){
        return "tony";
    }
    func('hello'); //执行函数
    
// 自执行函数，两个括号包裹一个匿名函数
    (function(arg){  // arg是形参
        console.log(arg);
    })('123')  // '123'是实参
    // 此方法我知道的用法，一般在自定义js插件时使用，jquery也是定义在一个自执行函数中
    
// 另外还有一种jquery的使用方法，和自执行函数很像，这里说明一下
   document.ready()有2种写法，在文档树加载完后执行的动作
   $(function(){  })       // 简写
   $(document).ready(function(){  })

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

       name = 'jason';
       function f1() {
           var name = 'kobe';
           function f2() {
               console.log(name);
           }
           return f2;
       }
       ret = f1();
       ret();   //打印出kobef2函数的作用域已经定死，上一级作用域为f1