初识JS
标记语言与编程语言
跟之前学过的
HTML
和CSS
不同,JavaScript
才算是一门真正意义上的编程语言
-
标记语言:由标记(标签/元素),标记属性等简单的见名知意的符号,来代表不同的布局单元来组织网页。
-
编程语言:具有变量,逻辑判断,循环等编程语句必须具备的语法规范等。
计算机编程语言
语言是用来交流的工具,人类语言是人与人之间交流的工具。
计算机的语言世界里只有二进制的0
和1
。和十进制只有0
到9
十个数字一样,二进制就只有0
和1
,十进制里面是逢十进一,二进制里面则是逢二进一。所以二进制里面是不可能出现大于1
的数字的。
JS属于编程语言里面的高级语言,低级语言如:汇编语言。越高级就越接近人类可以读懂的语言,越低级就越接近机器语言(二进制语言)。
高级语言转化成机器可以识别的二进制语言有两种办法:
- 整体编译:通篇翻译,生成二进制文件,犹如直接念翻译好的英文文章。
- 逐行翻译:需要解释器进行实时翻译,犹如同声传译。
编译型语言和解释型语言
JS是解释型语言,JS需要在浏览器(宿主环境/解释器)中运行
-
编译性:在执行前先将代码编译成计算机可以识别的二进制文件,比如
C
、C++
、Golang
会先编译生成.exe
文件,后续执行就不用再编译了,直接运行这个二进制文件就可以了。-
优点:编译好即可使用,不需要运行环境或解释器
-
缺点:可移植性差,因为每个平台(操作系统)能理解的二进制文件可能不同,需要重新编译(如windows下需要编译成.exe文件,linux下需要编译成.erp文件)。
-
-
解释性:执行代码前不用编译,而是在运行代码的时候逐行去解释执行,所以需要解释器,比如浏览器。
-
优点:可移植性好,只需各个平台(操作系统)配有该语言的解释器即可,如js、php、python
-
缺点:速度慢,需要不断的进行读代码和解释之间的来回切换,切换的过程也是需要消耗性能和时间的
-
可以看出js运行的时候有浏览器作为宿主环境,进行承载,这样就使得语言与机器之间又多了一层,也是js为什么被称作高级语言的原因
脚本语言JS
早期的JS只是作用浏览器的客户端进行表单验证的语言。其目的是为了提高用户体验。
没有JS的表单验证
有JS的表单验证
JS语言历史简介
-
ECMA
:European Computer Manufacturers Association(欧洲计算机制造商协会) -
TC39
:ECMA的第39号技术专家委员会(Technical Committee 39,简称TC39
)负责制订ECMAScript
标准 -
ECMAScript
标准:是一种由ECMA
组织TC39
专家委员会通过的ECMA-262
的脚本程序设计语言标准。俗称JavaScript
。ECMAScript
可以理解为是JavaScript
语法的标准规范,所以JavaScript
是ECMAScript
标准的实现。
1997年7月,ECMA
组织发布262号标准文件(ECMA-262)的第一版,ECMAScript 1.0
版发布。
1998年6月,ECMAScript 2.0
版发布。
1999年12月,ECMAScript 3.0
版发布。
2007年10月,ECMAScript 4.0
版草案发布,由于4.0版的目标过于激进,各方发生了严重分歧。
2008年7月, 将其中涉及现有功能改善的一小部分,发布为 ECMA
开会决定,中止了ECMAScript 4.0
的开发,废除了ECMAScript 4.0这个版本。ECMAScript 3.1
。会后不久,ECMAScript 3.1
就改名为 ECMAScript 5
。
2009年12月,ECMAScript 5.0
版 正式发布。
2015年6月,ECMAScript 6
正式发布,并且更名为“ECMAScript 2015
”。俗称:ES6
TC39
委员会计划,以后每年发布一个 ECMAScript
的版本,以年号命名,2016年发布“ECMAScript 2016
”,2017年发布“ECMAScript 2017
”,以此类推。
JS语言构成
-
ECMAScript
:语法、类型、语句、关键字、保留字、操作符、全局对象 -
文档对象模型(
DOM
):将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。 -
浏览器对象模型(
BOM
):浏览器窗口大小、位置,页面地址,历史记录等
浏览器组成部分
五大浏览器内核引擎
浏览器 | 渲染引擎 | JS引擎 |
---|---|---|
Chrome | Webkit/Blink | V8 |
Firefox | Gecko | SpiderMonkey |
Safri | Webkit | javascriptcore |
IE | Trident | Chakra |
Opera | Presto | Carakan |
语法基本了解
JS可编写位置
- 在
script
标签内部直接嵌入代码。- 多个
script
标签的报错不会相互影响
- 多个
- 通过
script
标签的src
属性加载外部脚本- 带有
src
属性的script
标签内部的代码将会被忽略
- 带有
- 事件属性
- 网页元素的事件属性(比如onclick和onmouseover),可以写入
js
代码。当指定的事件发生时,就会调用js
代码。<button onclick="console.log('按钮被点击了!')">点击</button>
- 网页元素的事件属性(比如onclick和onmouseover),可以写入
- URL 协议
URL
支持javascript:
协议,即在URL
的位置写入代码,点击这个URL
的时候就会执行js
代码。<a href="javascript:console.log('a链接被点击了!')">点击</a>
script标签
- 属性
type
:定位引用文件的类型,一般省略text/javascript
(老版本)application/javascript
(新版本推荐)
src
:指定引用文件的路径- 并行加载
js
代码的两个属性defer
:并行加载外部js代码,等待页面渲染完成再执行外部js
代码async
:并行加载外部js
代码,外部js
加载完成立即执行外部js
代码
- 不加以上两个属性(
defer
或async
)的话,外部js
代码会直接按所写位置执行,执行完外部js
代码之后,再接着往下渲染页面
参考文档:MDN
输入输出语句
console.log
:控制台输出document.write
:页面输出alert
:浏览器弹出prompt
:接收输入值confirm
:返回一个布尔值,如果用户点击“确定”,返回true;如果用户点击“取消”,则返回false。
注释
- 单行注释://
- 多行注释:/**/
分号
- 可以省略,有些情况要注意,后续讲解
空格与换行
- 空格与换行不是语法的一部分