JavaScript 的基本语法
语句
JavaScript 程序的执行单位为行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句。
语句(statement)是为了完成某种任务而进行的操作,比如下面就是一行赋值语句。
var a = 1 + 3;
这条语句先用var
命令,声明了变量a
,然后将1 + 3
的运算结果赋值给变量a
。
1 + 3
叫做表达式(expression),指一个为了得到返回值的计算式。凡是 JavaScript 语言中预期为值的地方,都可以使用表达式。比如,赋值语句的等号右边,预期是一个值,因此可以放置各种表达式。
语句以分号结尾,一个分号就表示一个语句结束。多个语句可以写在一行内。
var a = 1 + 3 ; var b = 'abc';
分号前面可以没有任何内容,JavaScript 引擎将其视为空语句。
表达式不需要分号结尾。一旦在表达式后面添加分号,则 JavaScript 引擎就将表达式视为语句,这样会产生一些没有任何意义的语句。
变量
概念
变量是对“值”的具名引用。变量就是为“值”起名,然后引用这个名字,就等同于引用这个值。变量的名字就是变量名。
var a = 1;
最前面的var
,是变量声明命令。它表示通知解释引擎,要创建一个变量a
。
注意,JavaScript 的变量名区分大小写,A
和a
是两个不同的变量。
变量的声明和赋值,是分开的两个步骤,上面的代码将它们合在了一起,实际的步骤是下面这样。
var a;
a = 1;
如果只是声明变量而没有赋值,则该变量的值是undefined
。undefined
是一个特殊的值,表示“无定义”。
var a;
a // undefined
如果变量赋值的时候,忘了写var
命令,这条语句也是有效的。
var a = 1;
// 基本等同
a = 1;
但是,不写var
的做法,不利于表达意图,而且容易不知不觉地创建全局变量,所以建议使用var
命令声明变量。
如果一个变量没有声明就直接使用,JavaScript 会报错,告诉你变量未定义。
x
// ReferenceError: x is not defined
可以在同一条var
命令中声明多个变量。
var a, b;
JavaScript 是一种动态类型语言,也就是说,变量的类型没有限制,变量可以随时更改类型。
var a = 1;
a = 'hello';
php/python/js 灵活的动态语言
(java/c++静态语言)
如果使用var
重新声明一个已经存在的变量,是无效的。
var x = 1;
var x;
x // 1
上面代码中,变量x
声明了两次,第二次声明是无效的。
但是,如果第二次声明的时候还进行了赋值,则会覆盖掉前面的值。
var x = 1;
var x = 2;
// 等同于
var x = 1;
var x;
x = 2;
变量提升
JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。
var a;
console.log(a);
a = 1
上面代码首先使用console.log
方法,在控制台(console)显示变量a
的值。这时变量a
还没有声明和赋值,所以这是一种错误的做法,但是实际上不会报错。因为存在变量提升,真正运行的是下面的代码。
var a;
console.log(a);
a = 1;
最后的结果是显示undefined
,表示变量a
已声明,但还未赋值。
标识符
标识符(identifier)指的是用来识别各种值的合法名称。最常见的标识符就是变量名,以及函数名。JavaScript 语言的标识符对大小写敏感,所以a
和A
是两个不同的标识符。
标识符有一套命名规则,不符合规则的就是非法标识符。JavaScript 引擎遇到非法标识符,就会报错。
简单说,标识符命名规则如下。
- 第一个字符,可以是任意 Unicode 字母(包括英文字母和其他语言的字母),以及美元符号(
$
)和下划线(_
)。 - 第二个字符及后面的字符,除了 Unicode 字母、美元符号和下划线,还可以用数字
0-9
。
下面这些都是合法的标识符。
arg0
_tmp
$elem
π
下面这些则是不合法的标识符。
1a // 第一个字符不能是数字
23 // 同上
*** // 标识符不能包含星号
a+b // 标识符不能包含加号
-d // 标识符不能包含减号或连词线
中文是合法的标识符,可以用作变量名。
var 临时变量 = 1;
JavaScript 有一些保留字,不能用作标识符:arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
注释
源码中被 JavaScript 引擎忽略的部分就叫做注释,它的作用是对代码进行解释。JavaScript 提供两种注释的写法:一种是单行注释,用//
起头;另一种是多行注释,放在/*
和*/
之间。
// 这是单行注释
/*
这是
多行
注释
*/
此外,由于历史上 JavaScript 可以兼容 HTML 代码的注释,所以<!--
和-->
也被视为合法的单行注释。
x = 1; <!-- x = 2;
--> x = 3;
上面代码中,只有x = 1
会执行,其他的部分都被注释掉了。
需要注意的是,-->
只有在行首,才会被当成单行注释,否则会当作正常的运算。
function countdown(n) {
while (n --> 0) console.log(n);
}
countdown(3)
// 2
// 1
// 0
上面代码中,n --> 0
实际上会当作n-- > 0
,因此输出2、1、0。
window 对象的方法
window.alert(),window.prompt(),window.confirm()
window.alert()
、window.prompt()
、window.confirm()
都是浏览器与用户互动的全局方法。它们会弹出不同的对话框,要求用户做出回应。注意,这三个方法弹出的对话框,都是浏览器统一规定的式样,无法定制。
(1)window.alert()
window.alert()
方法弹出的对话框,只有一个“确定”按钮,往往用来通知用户某些信息。
window.alert('Hello World');
用户只有点击“确定”按钮,对话框才会消失。对话框弹出期间,浏览器窗口处于冻结状态,如果不点“确定”按钮,用户什么也干不了。
window.alert()
方法的参数只能是字符串,没法使用 CSS 样式,但是可以用\n
指定换行。
alert('本条提示\n分成两行');
(2)window.prompt()
window.prompt()
方法弹出的对话框,提示文字的下方,还有一个输入框,要求用户输入信息,并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。
var result = prompt('您的年龄?', 25)
上面代码会跳出一个对话框,文字提示为“您的年龄?”,要求用户在对话框中输入自己的年龄(默认显示25)。用户填入的值,会作为返回值存入变量result
。
window.prompt()
的返回值有两种情况,可能是字符串(有可能是空字符串),也有可能是null
。具体分成三种情况。
- 用户输入信息,并点击“确定”,则用户输入的信息就是返回值。
- 用户没有输入信息,直接点击“确定”,则输入框的默认值就是返回值。
- 用户点击了“取消”(或者按了 ESC 按钮),则返回值是
null
。
window.prompt()
方法的第二个参数是可选的,但是最好总是提供第二个参数,作为输入框的默认值。
(3)window.confirm()
window.confirm()
方法弹出的对话框,除了提示信息之外,只有“确定”和“取消”两个按钮,往往用来征询用户是否同意。
var result = confirm('你最近好吗?');
上面代码弹出一个对话框,上面只有一行文字“你最近好吗?”,用户选择点击“确定”或“取消”。
confirm
方法返回一个布尔值,如果用户点击“确定”,返回true
;如果用户点击“取消”,则返回false
。
var okay = confirm('Please confirm this message.');
if (okay) {
// 用户按下“确定”
} else {
// 用户按下“取消”
}
confirm
的一个用途是,用户离开当前页面时,弹出一个对话框,问用户是否真的要离开。
window.onunload = function () {
return window.confirm('你确定要离开当面页面吗?');
}
这三个方法都具有堵塞效应,一旦弹出对话框,整个页面就是暂停执行,等待用户做出反应。
事件
window
对象可以接收以下事件。
load 事件和 onload 属性
load
事件发生在文档在浏览器窗口加载完毕时。window.onload
属性可以指定这个事件的回调函数。
window.onload = function() {
var elements = document.getElementsByClassName('example');
for (var i = 0; i < elements.length; i++) {
var elt = elements[i];
// ...
}
};
上面代码在网页加载完毕后,获取指定元素并进行处理。
error 事件和 onerror 属性
浏览器脚本发生错误时,会触发window
对象的error
事件。我们可以通过window.onerror
属性对该事件指定回调函数。
window.onerror = function (message, filename, lineno, colno, error) {
console.log("出错了!--> %s", error.stack);
};
由于历史原因,window
的error
事件的回调函数不接受错误对象作为参数,而是一共可以接受五个参数,它们的含义依次如下。
- 出错信息
- 出错脚本的网址
- 行号
- 列号
- 错误对象
老式浏览器只支持前三个参数。
并不是所有的错误,都会触发 JavaScript 的error
事件(即让 JavaScript 报错)。一般来说,只有 JavaScript 脚本的错误,才会触发这个事件,而像资源文件不存在之类的错误,都不会触发。
下面是一个例子,如果整个页面未捕获错误超过3个,就显示警告。
window.onerror = function(msg, url, line) {
if (onerror.num++ > onerror.max) {
alert('ERROR: ' + msg + '\n' + url + ':' + line);
return true;
}
}
onerror.max = 3;
onerror.num = 0;
需要注意的是,如果脚本网址与网页网址不在同一个域(比如使用了 CDN),浏览器根本不会提供详细的出错信息,只会提示出错,错误类型是“Script error.”,行号为0,其他信息都没有。这是浏览器防止向外部脚本泄漏信息。一个解决方法是在脚本所在的服务器,设置Access-Control-Allow-Origin
的 HTTP 头信息。
Access-Control-Allow-Origin: *
然后,在网页的<script>
标签中设置crossorigin
属性。
<script crossorigin="anonymous" src="//example.com/file.js"></script>
上面代码的crossorigin="anonymous"
表示,读取文件不需要身份信息,即不需要 cookie 和 HTTP 认证信息。如果设为crossorigin="use-credentials"
,就表示浏览器会上传 cookie 和 HTTP 认证信息,同时还需要服务器端打开 HTTP 头信息Access-Control-Allow-Credentials
。
window.frames,window.length
window.frames
属性返回一个类似数组的对象,成员为页面内所有框架窗口,包括frame
元素和iframe
元素。window.frames[0]
表示页面中第一个框架窗口。
如果iframe
元素设置了id
或name
属性,那么就可以用属性值,引用这个iframe
窗口。比如<iframe name="myIFrame">
可以用frames['myIFrame']
或者frames.myIFrame
来引用。
frames
属性实际上是window
对象的别名。
frames === window // true
因此,frames[0]
也可以用window[0]
表示。但是,从语义上看,frames
更清晰,而且考虑到window
还是全局对象,因此推荐表示多窗口时,总是使用frames[0]
的写法。
window.length
属性返回当前网页包含的框架总数。如果当前网页不包含frame
和iframe
元素,那么window.length
就返回0
。
window.frames.length === window.length // true
上面代码表示,window.frames.length
与window.length
应该是相等的。
URL编码 实例属性
URL 实例的属性与Location
对象的属性基本一致,返回当前 URL 的信息。
- URL.href:返回整个 URL
- URL.protocol:返回协议,以冒号
:
结尾 - URL.hostname:返回域名
- URL.host:返回域名与端口,包含
:
号,默认的80和443端口会省略 - URL.port:返回端口
- URL.origin:返回协议、域名和端口
- URL.pathname:返回路径,以斜杠
/
开头 - URL.search:返回查询字符串,以问号
?
开头 - URL.searchParams:返回一个
URLSearchParams
实例,该属性是Location
对象没有的 - URL.hash:返回片段识别符,以井号
#
开头
utf编码
通过javascript进行UTF-8编码
javascript的字符集:
javascript程序是使用Unicode字符集编写的。Unicode是ASCII和Latin-1的超集,并支持地球上几乎所有的语言。ECMAScript3要求JavaScript必须支持Unicode2.1及后续版本,ECMAScript5则要求支持Unicode3及后续版本。所以,我们编写出来的javascript程序,都是使用Unicode编码的。
UTF-8
UTF-8(UTF8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,也是一种前缀码。
它可以用来表示Unicode标准中的任何字符,且其编码中的第一个字节仍与ASCII兼容,这使得原来处理ASCII字符的软件无须或只须做少部分修改,即可继续使用。因此,它逐渐成为电子邮件、网页及其他存储或发送文字的应用中,优先采用的编码。
将javascript生成的Unicode编码字符串转为UTF-8编码的字符串
如标题所说的应用场景十分常见,例如发送一段二进制到服务器时,服务器规定该二进制内容的编码必须为UTF-8。这种情况下,我们必须就要通过程序将javascript的Unicode字符串转为UTF-8编码的字符串。
转换方法
转换之前我们必须了解Unicode的编码结构是固定的。
不信可以试一试 String 的 charCodeAt 这个方法,看看返回的 charCode 占几个字节。
英文占1个字符,汉字占2个字符
然而,UTF-8的编码结构长度是根据某单个字符的大小来决定长度有多少。
下面为单个字符的大小占用几个字节。单个unicode字符编码之后的最大长度为6个字节。
因为英文和英文字符的Unicode码为0 - 127,所以英文在Unicode和UTF-8中的长度和字节都是一致的,只占用1个字节。这也就是为什么UTF8是Unicode的超集!
现在我们再来讨论汉字,因为汉字的unicode码区间为0x2e80 - 0x9fff, 所以汉字在UTF8中的长度最长为3个字节。
那么汉字是如何从Unicode的2个字节转换为UTF8的三个字节的?
例如我需要把汉字"中"转为UTF-8的编码
1、获取汉字Unicode值大小
var str = '中';
var charCode = str.charCodeAt(0);
console.log(charCode); // => 20013
2、根据大小判断UTF8的长度
由上一步我们得到汉字"中"的charCode为20013.然后我们发现20013位于2048 - 0xFFFF这个区间里,所以汉字"中"应该在UTF8中占3个字节。
3、补码
既然知道汉字"中"需要占3个字节,那么这3个字节如何得到哪?
这就需要设计到补码,具体补码逻辑如下:
具体的补位码如下,"x"表示空位,用来补位的,从后往前补。
0xxxxxxx
110xxxxx 10xxxxxx
1110xxxx 10xxxxxx 10xxxxxx
11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
HTML实体编码
单双引号
在js代码中
在js中单、双引号引起来的是字符串,如果我们要在字符串中使用单、双引号,需要反斜杠进行转义
let str='user\'s name';
// or
let str=" user's name";
// or
let str="she said:\"...\".";
如果在字符串中输出反斜杠,仍然是用反斜杠转义,即2个反斜杠输出1个反斜杠
在html代码中
html标签中,属性值通常用双引号引起来,也可以使用单引号或不用引号。
<input name=user />
<input name="user" />
<input name='user' />
这3种写法都正确,不过通常我们是选择用双引号引起来。
如果我们要在属性值中使用单、双绰号,我们不能直接写成下面这样
<input name=user'name />
<input name="user"name" />
<input name='user'name' />
这些全部是错误的。我们要像在js中对单、双引号转义一样,对属性中的单、双引号转义
在html中输出预留符号,可以使用字符实体转义的形式,这里有简单介绍:http://www.w3school.com.cn/html/html_entities.asp。即想输出一个双引号可以使用"的形式,
<input name="user"name" />
除此之外,html还支持十进制与十六进制编码的形式输出字符,如我们知道字符a的ascii码的十进制是97 十六进制是61
所以我们在页面body中输出一个字符a,有以下3种形式
<body>
a<!--直接输出-->
a<!--十进制输出-->
a<!--十六进制输出-->
</body>
同样,单双引号也有十进制(单:39,双:34)与十六进制(单:27,双:22),所以我们在属性中输出一个单引号有2种选择,十进制与十六进制
<input name='user'name' /><!--十进制-->
<input name='user'name' /><!--十六进制-->
而输出一个双引号则有3种选择
<input name="user"name" /><!--实体-->
<input name="user"name" /><!--十进制-->
<input name="user"name" /><!--十六进制-->
当js代码遇上实体编码
我们可以通过dom节点提供的事件写上调用js的代码,如点击body弹出hello这个字符串,我们可以写成
<body onclick="alert('hello')">
click here
</body>
如果我们的需求是就弹出一个双引号呢?
根据前述规则,我们要写成:
<body onclick="alert('"')"><!--这里用十进制或十六进制都可以-->
click here
</body>
当然,alert里的单引号也可以使用十进制或十六进制编码
<body onclick="alert("'")"><!--"单引号 '双引号-->
click here
</body>
这样也是可以的。
如果我们把弹双引号的需求改成单引号呢?
<body onclick="alert(''')"><!--这样html中是合法的,但js中并不合法,因为在js中,中间的单引号并没有转义-->
click here
</body>
如果我们用十进制或十六进制编码呢?
<body onclick="alert('"')"><!--这样可以吗-->
click here
</body>
这样仍然是不可以的
我们要对js字符串中的单引号进行转义,如
<body onclick="alert('\'')"><!--转义后可正确弹出-->
click here
</body>
或
<body onclick="alert('\"')"><!--转义后可正确弹出-->
click here
</body>
前面的οnclick="alert(’’’)"看起来还正常,后面的这个οnclick="alert(’"’)"就有点不直观了。因为后面这个看上去反斜杠像在转义&这1个字符,而&在js的字符串中并不需要转义的。
动态输出
如前述的alert弹出的消息,如果是一个变量控制,动态输出呢?
<body onclick="alert('${msg}')">
click here
</body>
那我们这个msg字符串就得注意了,从这个示例来看,这个动态的msg即出现在属性onclick中,也出现在alert的单引号开始的字符串中。
我们要对msg中的双引号转成"或"或",并对msg中单引号的前面加上一个反斜杠\
对msg中的反斜杠需要做double处理,因为反斜杠在html属性中并不是特殊的,但在js的字符串中是特殊的。因此正确的做法是对反斜杠及单引号前面各加上一个反斜杠
然而,你并不能保证属性是用双引号,alert中的字符串用的是单引号,因为可以写成下面这样
<body onclick='alert("${msg}")'>
click here
</body>
这种情况我们要对msg中的单引号转成'或',并对msg中双引号前面加上一个反斜杠\
我们只需要对单、双引号前面加上一个反斜杠\然后再对单、双引号实体编码即可。
在js中如果反斜杠后面跟的不需要反斜杠转义的字符,那么这个反斜杠是被丢弃的,因此像
var str="user\'s name";
单引号前面多加一个反斜杠也不要紧的。