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