JavaScript 之 入门

JavaScript 概述

ECMAScript 和 JavaScript的关系

1996年11月,JavaScript 的创造者 Netscape(网景) 公司,决定将 JavaScript 提交给国际标准化组织 ECMA ,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的,但是没有称其为JavaScript,有两个方面的原因。一是商标,JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA,而不是Netscape,这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript的历史

年份 名称 描述
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

注:ES6就是指ECMAScript 6。

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

  • 核心(ECMAScript)
  • BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。
  • DOM(Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。

简单地说,ECMAScript 描述了JavaScript语言本身的相关内容。

  • JavaScript 是脚本语言
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

JavaScript语言规范

JavaScript引入方式

Script标签内写代码

1
2
3
<script>
// 在这里写你的JS代码
</script>

引入额外的JS文件

1
2
3
// <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。  
// <script>可以定义多个。
<script src="myscript.js"></script>

注释(注释是代码之母)- 和 java 注释基本一样

1
2
3
4
5
// 这是单行注释

/*
这是多行注释
*/

结束符

JavaScript中的语句要以分号(;)为结束符。

JavaScript语言基础

变量声明

  • JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
  • 声明变量使用 var 变量名; 的格式来进行声明
  • 变量名是区分大小写的。
  • 推荐使用驼峰式命名规则。
  • 保留字不能用做变量名。
1
2
var name = "lp";
var age = 18;

ES6新增了 let 命令,用于声明变量。其用法类似于 var,但是所声明的变量只在 let 命令所在的代码块内有效。例如:for 循环的计数器就很适合使用 let 命令。

1
for (let i=0;i<arr.length;i++){}

ES6新增 const 用来声明常量。一旦声明,其值就不能改变。

1
2
3
const PI = 3.1415;
PI // 3.1415
PI = 3 // TypeError: "PI" is read-only

保留字列表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

运算符

算数运算符

1
+ - * / % ++ --

比较运算符

1
> >= < <= != == === !==

注意:

1
2
1 == "1"   // true
1 === "1" // false

逻辑运算符

1
&& || !

赋值运算符

1
= += -= *= /=

流程控制

if-else

1
2
3
4
5
6
var a = 10;
if (a > 5) {
console.log("yes");
} else {
console.log("no");
}

if-else if-else

1
2
3
4
5
6
7
8
var a = 10;
if (a > 5) {
console.log("a > 5");
} else if (a < 5) {
console.log("a < 5");
} else {
console.log("a = 5");
}

switch

1
2
3
4
5
6
7
8
9
10
11
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}

switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。

for

1
2
3
for (var i=0;i<10;i++) {
console.log(i);
}

while

1
2
3
4
5
var i = 0;
while (i < 10) {
console.log(i);
i++;
}

三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b

JavaScript 之 入门
https://flepeng.github.io/021-frontend-02-JavaScript-JavaScript-之-入门/
作者
Lepeng
发布于
2021年7月5日
许可协议