JS基本概念

JS语法

JS是什么？

• JavaScript的简写，与Java没有半毛关系；相当于雷锋与雷峰塔，印度与印度尼西亚的关系

• 它是客户端(浏览器)脚本，服务端脚本Node.js

• 他可以给静态页面添加动态属性，如：添加事件，修改样式。

• 由来：NetSpace => LiveScript，后来与Sun公司合作；

  为了借助Java语言的名气进行宣传和推广，将名字改为了JavaScript。

JS引入方式

• 方式1：在HTML中的任意位置添加script标签，标签中即可书写JS代码

• 方式2：通过script标签引入外部的JS文件

• 方式3：设置元素的特定属性，添加或设置元素的特殊事件

变量定义

• 数字：number， 整数、小数

• 字符串：string，单引号、双引号都可以， '+'可以进行字符串拼接

• 布尔：boolean，只有两个值，true和false

• 数组：array，可以使用[]定义，也可以使用new Array()定义

• null：空类型，只有一个值，null，类型名为object

• NaN：not a number，不是一个数字，类型任然是object

  • 使用isNaN进行判断，不能使用 '=='

• 未定义：undefined

  • 定义变量不赋值，使用对象不存在的属性，都会出现未定义变量

  • 直接判断应与undefined比较，使用typeof判断应与'undefined'比较

• 对象：object

  • 方式1：先创建对象，然后添加属性和方法

  • 方式2：使用JSON字符串创建对象

  • 方式3：使用类似于构造方法的形式

基本运算

• 赋值运算：=

• 算术运算：+、-、*、/、%

• 复合运算：+=、-=、*=、/=、%=

• 自增自减：++、--

  • 放在变量前：先自增或自减，然后参与其他运算

  • 放在变量后：先参与其他运算，然后在自增或自减

• 关系运算：>、>=、<、<=、==、!=、===、!==

• 逻辑运算：&&、||、！

• 按位运算：&、|、^、~、<<、>>

• 三目运算：?:

  • 格式：表达式1 ? 表达式2 : 表达式3

  • 流程：首先判断表达式1的真假，若为真表达式2作为返回值，否则表达式3作为返回值

流程控制

• 说明：

  • 条件都是写在()中的

  • 代码块都是写在{}中的

• 分支结构(if-else)

  • if - else if - ... -else

• 分支结构(switch-case)

  • 格式：

    switch (表达式) {
        case 常量1:
            语句块1
            break
        ....
        
        default:
            语句块
            break
    }

     

  • 说明：

    当程序执行到switch-case语句时，首先计算表达式的值，然后与所有的case选项匹配，匹配成功，则直接跳转到对应的语句块执行，直到遇见break才跳出结构；若没有匹配成功，则执行default语句块。

    case选项不要出现相同的，不可能同时执行多个case选项的语句块。

• 循环结构(while)

  • 与python中的使用方式一样

  • 格式：

    while （表达式） {
        循环体
    }

     

• 循环结构(do-while)

  • 格式：

    do {
        循环体
    } while (表达式)

     

  • 说明：

    当程序执行到do-while语句时，首先执行循环体，然后判断表达式的真假；若表达式的值为真，则继续执行循环体，直到表达式的值为假；若表达式的值为假，则直接向下执行。

    do-while的循环体至少会执行一次，即使表达式一直不成立。

• 循环结构(for)

  • 格式：

    for (表达式1; 表达式2; 表达式3) {
        循环体
    }

     

  • 说明：

    当程序执行到for语句时，首先执行表达式1，然后判断表达式2的真假；若表达式2的值为真，则执行循环体，然后接着执行表达式3，之后再进行表达式2的判断；若表达式2的值为假，则跳出循环。

  • 使用：

    • for中的三个表达式可以任意组合的省略

    • 表达式1通常做初始化的操作，省略时需要将初始化操作放在for之前

    • 表达式2省略，循环条件为真也就是死循环，可以结合break完成原有的功能

    • 表达式3通常是使循环趋于结束的语句，省略后需要放在循环体的最后面。

• 循环结构(for-in)

  • 类似于python中的使用，专门用于遍历数组和对象

• 异常处理

  // 尝试执行代码
  try {
      // 抛出异常， 抛出一个字符串即可
      throw '出问题了'
      alert('normal')
  // catch 捕获异常
  } catch (e) {
      alert(e)
  }

   

函数使用

• 函数定义使用关键字：function

• 函数的调用可以放在定义之前

• 函数名不能重复，因为后面会覆盖前面的

• 函数可以像普通变量一样使用，打印时会显示全部内容

• 匿名函数：就是没有名字的函数，定义时只需将正常的函数定义去掉名字即可

• 内部函数：定义在函数内部的函数

• 函数参数：

  • 可以有默认值

  • 函数参数不传也不会报错

  • 所有的函数参数都会保存在arguments变量中(可以认为是数组)

• 封闭空间：

  // 封闭空间，既可以作为一个整体，又可以灵活实现功能
  (function(a, b){
      alert(a+b)
  })(3, 5)

   

• 变量作用域

  • 全局变量：定义在函数外部的变量，哪里都可以使用

  • 局部变量：定义在函数内部的变量，只能在函数内部使用

总结

• 常用函数：

  • alert

  • typeof

  • document.write

  • parseInt

  • parseFloat

• 常用类库：

  • String：字符串

  • Math：数学

  • Date：日期

  • Array：数组

  • RegExp：正则