JavaScript基础

概念

JavaScript是一门客户端脚本语言

• 运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎
• JavaScript语言不需要进行编译解释就可以运行

功能

• 可以来增强用户和Html页面的交互，可以来控制Html元素，让页面有一些动态的效果。可以增强用户体验

• JavaScript = ECMAScript+JavaScript 自己特有的BOM+DOM

语法

ECMAScript 客户端脚本语言的标准

基本语法：

1. 与html结合方式
   1. 内部JS
      • 定义<script>,标签提内容就是js代码

  <script>
        alert('hello world')
    </script>

2. 外部JS 
    * 定义<script> 通过src属性引入外部的js文件

    <script src="js/a.js"></script>

2. 注释

   1. 单行注释：//注释内容
   2. 多行注释：/*注释内容*/

3. 数据类型

   1. 原始数据类型(基本数据类型):
      1. number：数字。 整数/小数/Nan(Not a Number 一个不是数字的数字类型)
      2. string 字符串。 字符/字符串 在JavaScript中没有字符的概念，使用单引号和双引号定义的都为字符串
      3. boolean true和false
      4. null：一个对象为空的占位符
      5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
   2. 引用数据类型：对象

4. 变量

   • 变量：一小块存储数据的内存空间
   • JavaScript是弱类型的语言
   • 语法 var 变量名 = 初始化值

5. 运算符

   1. 一元运算符：只有一个运算数的运算符
   2. 算术运算符
   3. 赋值运算符
   4. 比较运算符
      • 比较方式
      • 类型相同
        • 字符串：按照字符串的字典顺序进行比较。按位逐一比较，直到得出大小为止
      • 类型不同
        类型不同会进行类型转换
        • === 全等于 在比较之前 先判断类型，如果类型不一样则直接返回false
   5. 逻辑运算符
   • &&（具有短路效果） ||（具有短路效果）
   • ! 非

其它类型转boolean规则
1. number：0或NAN为假 非0为真
var flag = 3; document.write(!flag);
上面的代码 输出为false 是因为 3非0 转为boolean 为true 非 为false
2. string: 除了空字符串("") 其他都是true
3. null&&undefined 转化为false
4. 对象 所有对象都转换为true

var obj = null;
if(obj){
  alert(123);
}

上面的代码可以防止空指针异常，是因为if的条件要求是boolean类型的 而null和undefined转换为boolean为false 所以可以防止空指针异常

6. 三元运算符
   var c = a>b? 1:0
   • 语法
     • 表达式? 值1：值2
     • 判断表达式的值，如果是true则取值1，如果是false取值2
7. 特殊语法
   • JS中语句以；结尾，如果一行只有一条语句则;可以省略
   • 变量的定义使用var关键字，也可以不使用
     • 用var修饰：定义的变量是局部变量
     • 不用var修饰：定义的变量是全局变量
8. 流程控制语句
   1. if...else
   2. switch
      • 在js中，switch语句可以接收任意原始数据类型
   3. while
   4. do...while
   5. for

基本对象

Function: 描述或者方法的对象

1. 创建
   1. var fun = new Function(形式参数列表,方法体)[不常用]
   2. function 方法名(形参列表){
      //方法体
      }
   3. var fun = function(a,b){
      //方法体
      }
2. 方法
3. 属性
   function中是有属性的

• length: 形参个数

   function add(a, b) {
            alert(a+b);
        }
        // add(3,4)
        alert(add.length);

4. 特点
   1. 方法定义时，形参的类型不用写
   2. 方法是一个对象，如果定义多个相同名称的方法，后面定义的会覆盖前面定义的
   3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
   4. 在方法声明中有一个隐藏的内置对象(数组形式)arguments，它封装了所有的实际参数，所以通过arguments可以获取到所有的参数

    /*
        * 求任意个数的和
        * */
        function add() {
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }

            alert(sum);

        }

        add(1,2,3,4,5,6,7,8,9,10);

5. 调用
   方法名称(实际调用参数)

Array

1. 创建
   1. var arr = new Array(数组元素列表);

//创建方式1
        var arr1 = new Array(1,2,3);

2. var arr = new Array(数组默认长度);

        //创建方式2
        var arr2 = new Array(5);

3. var arr = [元素列表];

//创建方式3
        var arr3 = [1,2,3,4,5];

2. 方法

• concat() 连接两个或更多的数组 并返回结果

var arr = [1,2,3];
        var arrConn = ['a','b','c'];
        var concat = arr.concat(arrConn);
        document.write(concat+"<br/>");
> 输出
1,2,3,a,b,c

• join(参数) 将数组中的元素按照指定的分隔符拼接为字符串

var arr = [1,1.5,true,'asda'];
        document.write(arr.join("!"));
> 输出
1!1.5!true!asda 

• push(参数) 向数组的末尾添加一个或更多的元素，并返回新的长度

var arr = [1,1.5,true,'asda'];
        var arrPush = [1,2,3,4,5];
        var arr_length = arr.push(arrPush);
        document.write(arr+"<br/>");
        document.write("push length" + arr_length);
> 输出
1,1.5,true,asda,1,2,3,4,5
push length5 

• pop() 删除并返回数组的最后一个元素

var arrConn = ['a', 'b', 'c'];
        var popEl = arrConn.pop();
        document.write(popEl + "<br/>");
> 输出
c

• shift() 删除并返回数组的第一个元素

var arrConn = ['a', 'b', 'c'];
var popEl = arrConn.shift();

• unshift() 向数组的开头添加一个或更多元素，并返回新的长度

• slice() 从某个已有的数组返回选定的元素
  参数：1. start 开始选取的数组下标，如果为负数 代表从尾部开始算起
  2.end 结束(不包头包尾)

var sliceArr = arrConn.slice(0,2);
        document.write(sliceArr+"<br/>");

• sort() 对数组元素进行排序
• splice() 删除元素，并向数组添加新元素
  参数：
  1. index 添加/删除元素的位置，负数表示从结尾处开始
  2. howmany 要删除的元素数量
  3. 向数组添加的新元素
     （包括index位置的元素）
     返回值
     包含被删除项目的数组

var spliceArr = [1,2,3,4,5];
        var spArr = spliceArr.splice(0,2,'a','b');
        document.write(spArr+"<br/>");
        document.write(spliceArr+"<br/>");
> 输出
1,2
a,b,3,4,5

• reverse() 翻转数组

var spliceArr = [1,2,3,4,5];
        var reverArr = spliceArr.reverse();
        document.write(reverArr+"<br/>");

• toString() 把数组转换为字符串，并返回结果

3. 属性
   1. length 数组的长度
4. 特点
   1. JS中数组中元素的类型是可变的

       var arr2 = [1,'abc',true];

2. JS中数组的长度是可变的

Boolean

Date

1. 创建
   var date = new Data()
2. 方法

• toLocaleString() 返回当前date对象对应的时间本地字符串格式
• getTime() 获取当前时间的日期对象描述的时间到1970年1月1日的毫秒值

Math

1. 创建

Math对象不需要创建可以直接使用
Math.方法名()

2. 方法

   1. random() 产生一个0-1之间的随机数 [包含0不包含1]
   2. round(x) 把书四舍五入为最接近的整数
   3. ceil(x) 对数进行向上舍入
   4. floor(x) 对数进行向下舍入

3. 属性

   1. PI 圆周率

Number

String

RegExp 正则表达式对象

1. 正则表达式

   1. 单个字符：[]

   [a]：代表单个字符a
   [ab]: 代表单个字符a或b
   [a-z] 代表字母a-z单个字符

   • 特殊符号代表特殊含义的单个字符：
     • \d：单个数字字符[0-9]
     • \w: 单个单词字符[a-zA-Z0-9]
   2. 量词符号
      ?: 表示出现0次或1次
      *: 表示出现0次或多次
      +: 表示出现1次或多次
      {m,n}: 表示 m<=数量<=n
      * m如果缺省: {,n} 表示最多n次
      * n如果缺省：{m,} 最少m次
   3. 开始结束符
      • ^ 表示开始 /^w 表示以字母开头
      • $ 表示结尾
   4. 正则对象
      1. 创建
         1. var reg = new RegExp("正则表达式");
         2. var reg = /正则表达式/

      var reg = new RegExp("\w{6,12}");
      //创建2
      var reg2 = /w{6,12}/;
      

      2. 方法
         1. test():验证 指定的字符串是否符合正则定义的规范

       var username = "zhangsan";
       var flag = reg.test(username);
      

Global 全局函数

1. 特点：
   全局对象，Global中封装的方法不需要对象就可以直接调用：方法名();
2. 方法：
   • encodeURI():url编码 只编码汉子
   • decodeURI():url解码
   • encodeURIComponent() url编码 编码的字符更多 有些符号也参与编码
   • decodeURIComponent() url解码

        /*编码*/
        var str = "奶糖与卤蛋";
        var encodeURI = encodeURI(str);
        document.write(encodeURI + "<br/>");
        /*解码*/
        var decodeStr = decodeURI("%E5%A5%B6%E7%B3%96%E4%B8%8E%E5%8D%A4%E8%9B%8B");
        document.write(decodeStr)

* parseInt()：将字符串转为数字
    * 特点：逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
* isNaN()：判断一个变量是否是NaN
    * NaN参与的==比较全部为false 所以需要使用函数来进行判断

 var a = NaN;
    document.write(a == NaN+"<br/>");
    document.write(isNaN(a));
> 输出 
false
true

• eval() 将JavaScript字符串，转成脚本来执行

 var jscode = "alert(123)"
 eval(jscode);