初探JavaScript
目录
JavaScript概述
JavaScript(以下简称JS)是一种轻量级的解释型脚本语言,用于控制网页的行为,可直接插入HTML的编程代码
JS历史
JS的官方名称为ECMA-262,由 Brendan Eich 发明。于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。
年份 | 名称 | 描述 |
---|---|---|
1997 | ECMAScript 1 | 第一个版本 |
1998 | ECMAScript 2 | 版本变更 |
1999 | ECMAScript 3 | 添加正则表达式 添加 try/catch |
ECMAScript 4 | 没有发布 | |
2009 | ECMAScript 5 | 添加 "strict mode",严格模式 添加 JSON 支持 |
2011 | ECMAScript 5.1 | 版本变更 |
2015 | ECMAScript 6 | 添加类和模块 |
2016 | ECMAScript 7 | 增加指数运算符 (**) 增加 Array.prototype.includes |
注:ECMAScript 6 也称为 ECMAScript 2015。ECMAScript 7 也称为 ECMAScript 2016。
JS作用
直接写入HTML输入流
对事件的反应
改变HTML内容
改变HTML图像
改变HTML样式
验证输入
JS用法
可使用<script></script>在HTML文档中插入JS脚本,与用于插入css的<style></style>标签不同的是,<script></script>既可放在<head></head>标签里,也可放在<body></body>标签里
JS语法规范
-
标识符命名
- 第一字符必须是为字母、下划线( _ )或者美元符号( $ )
- 其他字符可以是字母、下划线、美元符号或数字,最好不要包含其他字符
- 不能把关键字或者保留字作为标识符
- 附:关键字列表
abstract else instanceof super boolean enum int switch break export interface synchronized byte extends let this case false long throw catch final native throws char finally new transient class float null true const for package try continue function private typeof debugger goto protected var default if public void delete implements return volatile do import short while double in static with
-
注释
- 行内注释"//"
- 段落注释“/*........*/”
-
变量
- 变量是用于储存信息的“容器”,可用于存放值(包括数值,字符,字符串等)和表达式
- 变量命名规范
- 变量多数情况下以字母开头
- 变量也能以 $ 和 _ 符号开头(不推荐)
- 变量名称对大小写敏感
- 使用“var”关键字声明变量,声明的变量初始值为 undefined 。可在声明时对变量进行赋值,也可在之后对其赋值(在 2015 年以前,我们使用 var 关键字来声明 JavaScript 变量。在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量,使用 let 关键字定义的限定范围内作用域的变量)
- 若对一个变量进行重新声明,原变量的值不会丢失
- 可在一行语句中声明多个变量,各变量之间用逗号分隔。也可横跨多行,仍用逗号分隔
-
数据类型
- 值类型(基本类型):
- 字符串(String):可以为引号内的任意文本,可以为单引号或双引号。内容中的引号可以用转义字符 /' 或 /'' 来表示
- 数字(Number):只有一种数据类型,可以带小数点也可以不带,还可以用科学计数法表示。精度类似C语言中的 double
- 布尔(Boolean):只有 ture 和 false 两种取值
- 对空(Null):只有一个值,表示一个空对象指针, typeof 操作符检测 null 值时返回 object
- 未定义(Undefined):只有一个值,在使用 var 声明变量但未对其赋初值时,这个变量就是undefined。可通过将变量的值设为 null 来清空变量,使变量成为 Undefined 类型
- Symbol(没看懂到底是用来干啥的)
- 引用数据类型(对象类型)
- 对象(Object):由花括号分隔,在括号内部,以 属性名: 属性值 来定义对象的属性,属性间由逗号分隔,可夸多行声明。对对象的属性寻址时可用 对象名.属性名 或 对象名["属性名"]
- 数组(Array):由中括号分隔,在括号内部,各个元素间以逗号分隔
- 函数(Function):前面使用了关键词 function ,写变量名后用花括号分隔的代码块,用于实现某一特定功能,可被多次引用。
- 正则(RegExp):存储正则表达式。正则表达式是由一个字符序列形成的搜索模式,可用于所有文本搜索和文本替换的操作。
- 日期(Date)
- JS中拥有动态类型,即同一个变量可能拥有不同的数据类型。变量的数据类型可以使用 typeof 操作符来查看
- 可以用 new 关键字来声明变量类型
- 值类型(基本类型):
-
运算符
- 算数运算符
+ 加法 - 减法 * 乘法 / 除法 % 取模(余数) ++ 递加 -- 递减 - 赋值运算符
运算符 例子 等同于 = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y - 字符串运算符 +
- 用于连接文本或字符串变量
- 若被用于连接字符串和数字,则数字自动转换为字符串,如: '5' + 5 = '55'
- 比较运算符
== 等于 === 等值等型 != 不相等 !== 不等值或不等型 > 大于 < 小于 >= 大于或等于 <= 小于或等于 ? : 三元运算符 - 逻辑运算符
&& 逻辑与 || 逻辑或 ! 逻辑非 - 类型运算符
typeof 返回变量的类型。 instanceof 返回 true,如果对象是对象类型的实例。 -
位运算符
& 与 | 或 ~ 非 ^ 异或 << 零填充左位移 >> 有符号右位移 >>> 零填充右位移
- 算数运算符
-
条件语句
- if 语句:只有当指定条件为 true 时,使用该语句来执行代码
- if...else 语句:当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if...else if....else 语句:使用该语句来选择多个代码块之一来执行
- switch 语句:使用该语句来选择多个代码块之一来执行
-
循环语句
- for 语句:循环代码块一定的次数
- for ( A in B )语句:遍历 in 后数组的元素或对象的属性,A的变化为0~元素总数
- for ( A of B )语句:遍历 in 后可迭代对象的值(可迭代的数据结构例如数组、字符串、映射、节点列表等),A的变化为具体的对象的值
- while:当指定的条件为 true 时循环指定的代码块
- do/while:同样当指定的条件为 true 时循环指定的代码块
- break 语句用于结束循环
- continue 语句用于跳出本次循环
-
数组
- 数组是一种特殊的对象,对数组使用 typeof 运算符会返回 "object" 。
- 所以,数组中的元素的数据类型可以不同。
- 但是,JavaScript 数组最好以数组来描述,因为数字元素可以用下标标号进行访问,而对象属性需写完整的属性名。
- 创建数组:语法 var array-name = [item1, item2, ...]; 最后一个元素后不可加逗号,可跨行声明
- 访问数字元素:通过数组下标引用相对应的数组元素,通过数组名称访问完整的数组
- length 属性表示数组的长度
- 遍历数组元素
- for循环
- array.forEach()函数
- 添加数组元素(添加至数组末尾)
- array.push(新增元素)
- array[array.length] = "新增元素"
-
对象
- 对象具有属性和方法,是对现实生活中事物的抽象
- 定义对象:用花括号分隔对象的属性,对象的每个属性都由 键:值 的形式定义,每个方法都由 键:function(){...} 的形式定义,可跨多行定义
- 访问对象属性或方法
- 对象名.键
- 对象名["键"]
-
函数
- 定义函数:用花括号分隔执行某一特定功能的代码块,最前面使用关键词 function,在函数名后加 () ,括号内为传入函数的参数,没有可以不写
- 使用 return 语句,可以使函数停止执行,并返回指定的值
-
作用域
- 在 HTML 中,全局作用域是 window。所有全局变量均属于 window 对象
- 全局变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它
- 局部变量:在函数体内部声明的变量和函数的参数为局部变量,仅可在函数内部使用,只要函数运行完毕,本地变量就会被删除
- 变量的生存期:从被声明开始,局部变量会在函数运行以后被删除,全局变量会在页面关闭后被删除。
- 如果您为尚未声明的变量赋值,此变量会自动成为全局变量,但在“严格模式”中不会自动创建全局变量
-
预编译
- 预编译前
- 创建 window 对象
- 加载脚本文件
- 分析语法是否合法
- 发生在脚本代码块script执行前
- 查找变量声明,以作为 window 的属性,赋予值 undefined
- 查找函数声明,以作为 window 的方法,赋予函数体
- 发生在函数执行前
- 创建活动对象
- 查找形参和局部变量声明,赋予值 undefined
- 将实参的值赋给形参
- 查找函数声明,赋予函数体
- 预编译前