JS的基础知识

最新推荐文章于 2024-07-08 18:01:35 发布

MHguitar

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量581

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/MHguitar/article/details/122417664

版权

语句

JavaScript程序的执行单位为行（line)，也就是一行一行地执行。一般情况下，每一行就是一个语句。语句(statement)是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。

var a = 1 + 3;

1＋3叫做表达式(expression)，指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值;后者则是为了得到返回值，一定会返回一个值。凡是JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预期是一个值，因此可以放置各种表达式。语句以分号结尾，一个分号就表示一个语句结束。多个语句可以写在一行内。

var a = 1 + 3; var b = "abc";

分号前面可以没有任何内容，JavaScript引擎将其视为空语句。

表达式不需要分号结尾。一旦在表达式后面添加分号，则JavaScript引擎就将表达式视为语句，这样会产生一些没有任何意义的语句。

1+3;
"abc";

上面两行语句只是单纯地产生一个值，并没有任何实际的意义。

变量

变量是对“值"的具名引用。变量就是为“值"起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。

var a = 1;

上面的代码先声明变量a，然后在变量a与数值1之间建立引用关系，称为将数值1“赋值”给变量a。以后，引用变量名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

上面代码直接使用变量x，系统就报错，告诉你变量x没有声明。可以在同一条var命令中声明多个变量。

var a,b;

JavaScript是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。

var a =1;
a='hell0";

上面代码中，变量a起先被赋值为一个数值，后来又被重新赋值为一个字符串。第二次赋值的时候，因为变量a已经存在，所以不需要使用var命令。

如果使用var重新声明一个已经存在的变量，是无效的。

var x = 1;
var X;
x //1

上面代码中，变量x声明了两次，第二次声明是无效的。

但是，如果第二次声明的时候还进行了赋值，则会覆盖掉前面的值。

var x = 1;var x = 2;
//等同于
var x= 1;
var x;
x = 2;

变量提升

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升(hoisting)。

console. 1og(a);
var a = 1;

上面代码首先使用console.log方法，在控制台(console)显示变量a的值。这时变量a还没有声明和赋值，所以这是一种错误的做法，但是实际上不会报错。因为存在变量提升，真正运行的是下面的代码。

var a;
conso1e. 1og(a);
a =1;

最后的结果是显示undefined，表示变量a已声明，但还未赋值。

标识符

标识符(identifier)指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript语言的标识符对大小写敏感，所以a和A是两个不同的标识符。

标识符有一套命名规则，不符合规则的就是非法标识符。JavaScript引擎遇到非法标识符，就会报错。简单说，标识符命名规则如下。

第一个字符，可以是任意Unicode字母(包括英文字母和其他语言的字母)，以及美元符号（$）和下划线(_)。
第二个字符及后面的字符，除了Unicode字母、美元符号和下划线，还可以用数字0-9。

注释

源码中被JavaScript引擎忽略的部分就叫做注释，它的作用是对代码进行解释。JavaScript 提供两种注释的写法:一种是单行注释，用 // 起头;另一种是多行注释，放在 /* 和 */ 之间。

此外，由于历史上JavaScript 可以兼容HTML代码的注释，所以 也被视为合法的单行注释。

区块

JavaScript使用大括号，将多个相关的语句组合在一起，称为“区块”(block)。对于var命令来说，JavaScript的区块不构成单独的作用域(scope)。

{
	var a = 1;
}
a //1

上面代码在区块内部，使用var命令声明并赋值了变量a，然后在区块外部，变量a依然有效，区块对于var命令不构成单独的作用域，与不使用区块的情况没有任何区别。在JavaScript 语言中，单独使用区块并不常见，区块往往用来构成其他更复杂的语法结构，比如for、 if、 while、function等。

条件语句

JavaScript提供if结构和switch结构，完成条件判断，即只有满足预设的条件，才会执行相应的语句。

if语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是JavaScript的两个特殊值，true表示“真”，fa1se表示“伪"。

if(布尔值)
	语句;
//或者
if(布尔值)语句;

上面是if结构的基本形式。需要注意的是，“布尔值"往往由一个条件表达式产生的，必须放在圆括号中，表示对表达式求值。如果表达式的求值结果为true，就执行紧跟在后面的语句;如果结果为false，则跳过紧跟在后面的语句。

if (m=== 3)
m = m + 1;

上面代码表示，只有在m等于3时，才会将其值加上1。
这种写法要求条件表达式后面只能有一个语句。如果想执行多个语句，必须在if的条件判断之后，加上大括号，表示代码块(多个语句合并成一个语句)。

if (m=== 3) {
	m+= 1;
}

建议总是在if语句中使用大括号，因为这样方便插入语句。
注意，if后面的表达式之中，不要混淆赋值表达式(=)、严格相等运算符（=-=）和相等运算符(==)。尤其是赋值表达式不具有比较作用。

var x= 1;
var y = 2;
if (x = y){
	console. 1og(x);
}
// "2"

上面代码的原意是，当x等于y的时候，才执行相关语句。但是，不小心将严格相等运算符写成赋值表达式，结果变成了将y赋值给变量×，再判断变量x的值（等于2)的布尔值（结果为true)。
这种错误可以正常生成一个布尔值，因而不会报错。为了避免这种情况，有些开发者习惯将常量写在运算符的左边，这样的话，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。

if (x = 2) {//不报错
if (2 = x) {//报错

if…else结构

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

if (m === 3) {
	//满足条件时，执行的语句
}else {
	//不满足条件时，执行的语句
}

上面代码判断变量m是否等于3，如果等于就执行if代码块，否则执行else代码块。
对同一个变量进行多次判断时，多个if…else语句可以连写在一起。

if (m === 0){
	//...
}else if (m=== 1) {/
	//...
}else if (m === 2) {
	// ...
}else {
	/ / ...
}

else代码块总是与离自己最近的那个if语句配对。

var m = 1;var n = 2;
if (m !== 1)
if (n === 2) console.1og( " he11o ');
else console.log( 'wor1d ');

上面代码不会有任何输出，else代码块不会得到执行，因为它跟着的是最近的那个if语句，相当于下面这样。

if (m !== 1) {
	if (n=== 2) {
		conso1e.1og ( ' he11o ');
	}else {
		conso1e. 1og( ' wor1d ' );
	}
}

如果想让else代码块跟随最上面的那个if语句，就要改变大括号的位置。

if(m !== 1) {
	if (n === 2) {
		console. 1og( ' he11o ' );
	}
}else {
	conso1e.1og( 'wor1d ' );
}
/ / wor1d

switch结构

多个if…else连在一起使用的时候,可以转为使用更方便的switch结构。

switch (fruit) {
	case "banana" :
		// ...
		break;
	case "apple" :
		//...
		break;
	default:// ...
}

上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

var x =1;
switch (x) {
	case 1:
		console.1og( 'x等于1');
	case 2:
		conso1e.1og( 'x等于2 ');
	default:
		console.1og( 'x等于其他值');
}
//x等于1
//x等于2
//x等于其他值

上面代码中，case代码块之中没有break语句，导致不会跳出switch结构，而会一直执行下去，像下面这样。

switch (x){
	case 1:
		console.1og('x等于1');
		break;
	case 2:
		console.1og( 'x等于2');
		break;
	default:
		console.1og( 'x等于其他值');
}

switch语句部分和case语句部分，都可以使用表达式。

switch (1 + 3){
	case 2 +2:
		f();
		break;
	default:
		neverHappens();
}

上面代码的default部分，是永远不会执行到的。
需要注意的是，switch语句后面的表达式，与case语句后面的表示式比较运行结果时，采用的是严格相等运算符(===)，而不是相等运算符（==)，这意味着比较时不会发生类型转换。

var x = 1;
switch (x){
	case true :
		conso1e.1og( 'x 发生类型转换');
		break;
	default:
		conso1e.1og( 'x没有发生类型转换');
}
// ×没有发生类型转换

上面代码中，由于变量x没有发生类型转换，所以不会执行case true的情况。这表明,switch语句内部采用的是"严格相等运算符”.

三元运算符 ?:

JavaScript还有一个三元运算符(即该运算符需要三个运算子) ?:，也可以用于逻辑判断。

(条件)?表运式1 ︰表达式2

上面代码中，如果“条件"为true，则返回“表达式1"的值，否则返回“表达式2"的值。

var even = (n % 2 === 0) ? true : false;

上面代码中，如果n可以被2整除，则even等于true，否则等于false。它等同于下面的形式。

var even;
if (n %2 === 0){
	even = true;
}else {
	even = false;
}

这个三元运算符可以被视为if…else…的简写形式，因此可以用于多种场合。

var myvar;
console.log(
	myvar ?
	'myvar has a value' :
	' myvar does not have a value'
)
// myvar does not have a value

上面代码利用三元运算符，输出相应的提示。

var msg = '数字' +n+ '是' +(n % 2 === 0 ?'偶数’:'奇数');

上面代码利用三元运算符，在字符串之中插入不同的值。

循环语句

while循环

while语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while(条件)
	语句;
//或者
while(条件)语句;

while语句的循环条件是一个表达式，必须放在圆括号中。代码块部分，如果只有一条语句，可以省略大括号，否则就必须加上大括号。

whi1e(条件){
	语句;
}

下面的例子是一个无限循环，因为循环条件总是为真。

while (true) {
	console. 1og( ' He11o，wor1d ');
}

for循环

for语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件。它的格式如下。

for(初始化表达式;条件;递增表达式)
	语句
//或者
for(初始化表达式;条件;递增表达式){
	语句
}

for语句后面的括号里面，有三个表达式。
初始化表达式 (initialize)∶确定循环变量的初始值，只在循环开始时执行一次。
条件表达式(test):每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
递增表达式(increment):每轮循环的最后一个操作，通常用来递增循环变量。

do…while循环

do. …while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

do
	语句
while(条件);

//或者
do {
	语句
}while(条件);

break和continue语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。break语句用于跳出代码块或循环。

for (var i = o; i < 5; i++) {
	conso1e.1og(i);
	if (i === 3)
		break;
}

continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。

var i = 0;
while (i < 100){
	i++;
	if (i % 2 === 0) continue;
	console.1og( 'i 当前为: ’+ i);
}

上面代码只有在i为奇数时，才会输出i的值。如果i为偶数，则直接进入下一轮循环.如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。

表单标签

表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。

表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。

<form>标签用来定义一个表单，所有表单内容放到这个容器元素之中。

<form>
  <!-- 各种表单控件-->
</form>

<fieldset>标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。

<form>
  <fieldset>
    <p>年龄：<input type="text" name="age"></p>
    <p>性别：<input type="text" name="gender"></p>
  </fieldset>
</form>

上面代码中，两个输入框是一组，它们的外面会显示一个方框。

<fieldset>有以下属性。

disabled：布尔属性，一旦设置会使得<fieldset>内部包含的控件都不可用，都变成灰色状态。
form：指定控件组所属的<form>，它的值等于<form>的id属性。
name：该控件组的名称。

<legend>标签用来设置<fieldset>控件组的标题，通常是<fieldset>内部的第一个元素，会嵌入显示在控件组的上边框里面。

<fieldset>
  <legend>学生情况登记</legend>
  <p>年龄：<input type="text" name="age"></p>
  <p>性别：<input type="text" name="gender"></p>
</fieldset>

上面代码中，这个控件组的标题会，嵌入显示在<fieldset>的上边框。

<input>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。

它有多种类型，取决于type属性的值，默认值是text，表示一个输入框。

<input>
<!-- 等同于 -->
<input type="text">

上面代码会生成一个单行的输入框，用户可以在里面输入文本。

<input>的属性非常多，有些属性是某个类型专用的，放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。

autofocus：布尔属性，是否在页面加载时自动获得焦点。
disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。
form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<form>内部。
list：关联的<datalist>的id属性，设置该控件相关的数据列表，详见后文。
name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。
readonly：布尔属性，是否为只读。
required：布尔属性，是否为必填。
type：控件类型。
value：控件的值。

<button>标签会生成一个可以点击的按钮，没有默认行为，通常需要用type属性或脚本指定按钮的功能。

<button>点击</button>

上面代码会产生一个按钮，上面的文字就是“点击”。

<button>内部不仅放置文字，还可以放置图像，这可以形成图像按钮。

<button name="search" type="submit">
  <img src="search.gif">搜索
</button>

<button>具有以下属性。

autofocus：布尔属性，表示网页加载时，焦点就在这个按钮。网页里面只能有一个元素，具有这个属性。
disabled：布尔属性，表示按钮不可用，会导致按钮变灰，不可点击。
name：按钮的名称（与value属性配合使用），将以name=value的形式，随表单一起提交到服务器。
value：按钮的值（与name属性配合使用），将以name=value的形式，随表单一起提交到服务器。
type：按钮的类型，可能的值有三种：submit（点击后将数据提交给服务器），reset（将所有控件的值重置为初始值），button（没有默认行为，由脚本指定按钮的行为）。
form：指定按钮关联的<form>表单，值为<form>的id属性。如果省略该属性，默认关联按钮所在父表单。
formaction：数据提交到服务器的目标 URL，会覆盖<form>元素的action属性。
formenctype：数据提交到服务器的编码方式，会覆盖<form>元素的enctype属性。可能的值有三种：application/x-www-form-urlencoded（默认值），multipart/form-data（只用于文件上传），text/plain。
formmethod：数据提交到服务器使用的 HTTP 方法，会覆盖<form>元素的method属性，可能的值为post或get。
formnovalidate：布尔属性，数据提交到服务器时关闭本地验证，会覆盖<form>元素的novalidate属性。
formtarget：数据提交到服务器后，展示服务器返回数据的窗口，会覆盖<form>元素的target属性。可能的值有_self（当前窗口），_blank（新的空窗口）、_parent（父窗口）、_top（顶层窗口）。

<select>标签用于生成一个下拉菜单。

<label for="pet-select">宠物：</label>
<select id="pet-select" name="pet-select">
  <option value="">--请选择一项--</option>
  <option value="dog">狗</option>
  <option value="cat">猫</option>
  <option value="others">其他</option>
</select>

上面代码中，<select>生成一个下拉菜单，菜单标题是“–请选择一项–”，最右侧有一个下拉箭头。点击下拉箭头，会显示三个菜单项，供用户点击选择。

下拉菜单的菜单项由<option>标签给出，每个<option>代表可以选择的一个值。选中的<option>的value属性，就是<select>控件发送的服务器的值。

<option>有一个布尔属性selected，一旦设置，就表示该项是默认选中的菜单项。

<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

上面代码中，第二项Second Value是默认选中的。页面加载的时候，会直接显示在下拉菜单上。

<select>有如下属性。

autofocus：布尔属性，页面加载时是否自动获得焦点。
disabled：布尔属性，是否禁用当前控件。
form：关联表单的id属性。
multiple：布尔属性，是否可以选择多个菜单项。默认情况下，只能选择一项。一旦设置，多数浏览器会显示一个滚动列表框。用户可能需要按住Shift或其他功能键，选中多项。
name：控件名。
required：布尔属性，是否为必填控件。
size：设置了multiple属性时，页面显示时一次可见的行数，其他行需要滚动查看。

<option>标签用在<select>、<optgroup>、<datalist>里面，表示一个菜单项，参见<select>的示例。

它有如下属性。

disabled：布尔属性，是否禁用该项。
label：该项的说明。如果省略，则等于该项的文本内容。
selected：布尔属性，是否为默认值。显然，一组菜单中，只能有一个菜单项设置该属性。
value：该项提交到服务器的值。如果省略，则等于该项的文本内容。

<optgroup>表示菜单项的分组，通常用在<select>内部。

<label>宠物：
  <select name="pets" multiple size="4">
    <optgroup label="四条腿的宠物">
      <option value="dog">狗</option>
      <option value="cat">猫</option>
    </optgroup>
    <optgroup label="鸟类">
      <option value="parrot">鹦鹉</option>
      <option value="thrush">画眉</option>
    </optgroup>
  </select>
</label>

上面代码中，<select>是一个下拉菜单，它的内部使用<optgroup>将菜单项分成两组。每组有自己的标题，会加粗显示，但是用户无法选中。

它的属性如下。

disabled：布尔设置，是否禁用该组。一旦设置，该组所有的菜单项都不可选。
label：菜单项分组的标题。

<datalist>标签是一个容器标签，用于为指定控件提供一组相关数据，通常用于生成输入提示。它的内部使用<option>，生成每个菜单项。

<label for="ice-cream-choice">冰淇淋：</label>
<input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">

<datalist id="ice-cream-flavors">
  <option value="巧克力">
  <option value="椰子">
  <option value="薄荷">
  <option value="草莓">
  <option value="香草">
</datalist>

上面代码中，<input>生成一个文本输入框，用户可以输入文本。<input>的list属性指定关联的<datalist>的id属性。<datalist>的数据列表用于输入建议，用户点击输入框的时候，会显示一个下拉菜单，里面是建议的输入项。并且还会自动匹配用户已经输入的字符，缩小可选的范围，比如用户输入“香”，则只会显示“香草”这一项。

注意，<option>在这里可以不需要闭合标签。

<option>标签还可以加入label属性，作为说明文字。Chrome 浏览器会将其显示在value的下一行。

<datalist id="ide">
  <option value="Brackets" label="by Adobe">
  <option value="Coda" label="by Panic">
</datalist>

上面代码的渲染结果是，Chrome 浏览器会在下拉列表显示value值（比如Brackets），然后在其下方以小字显示label值（比如by Adobe）。

<textarea>是一个块级元素，用来生成多行的文本框。

<textarea id="story" name="story"
          rows="5" cols="33">
this is a string.
</textarea>

上面代码会生成一个长度为5行，宽度为33个字符的文本框。

该标签有如下属性。

autofocus：布尔属性，是否自动获得焦点。
cols：文本框的宽度，单位为字符，默认值为20。
disabled：布尔属性，是否禁用该控件。
form：关联表单的id属性。
maxlength：允许输入的最大字符数。如果未指定此值，用户可以输入无限数量的字符。
minlength：允许输入的最小字符数。
name：控件的名称。
placeholder：输入为空时显示的提示文本。
readonly：布尔属性，控件是否为只读。
required：布尔属性，控件是否为必填。
rows：文本框的高度，单位为行。
spellcheck：是否打开浏览器的拼写检查。可能的值有true（打开），default（由父元素或网页设置决定），false（关闭）。
wrap：输入的文本是否自动换行。可能的值有hard（浏览器自动插入换行符CR + LF，使得每行不超过控件的宽度），soft（输入内容超过宽度时自动换行，但不会加入新的换行符，并且浏览器保证所有换行符都是CR + LR，这是默认值），off（关闭自动换行，单行长度超过宽度时，会出现水平滚动条）。

<output>标签是一个行内元素，用于显示用户操作的结果。

<input type="number" name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="result">20</output>

该标签有如下属性。

for：关联控件的id属性，表示为该控件的操作结果。
form：关联表单的id属性。
name：控件的名称。

<progress>标签是一个行内元素，表示任务的完成进度。浏览器通常会将显示为进度条。

<progress id="file" max="100" value="70"> 70% </progress>

该标签有如下属性。

max：进度条的最大值，应该是一个大于0的浮点数。默认值为1。
value：进度条的当前值。它必须是0和max属性之间的一个有效浮点数。如果省略了max属性，该值则必须在0和1之间。如果省略了value属性，则进度条会出现滚动，表明正在进行中，无法知道完成的进度。

<meter>标签是一个行内元素，表示指示器，用来显示已知范围内的一个值，很适合用于任务的当前进度、磁盘已用空间、充电量等带有比例性质的场合。浏览器通常会将其显示为一个不会滚动的指示条。

<p>烤箱的当前温度是<meter min="200" max="500"
  value="350"> 350 度</meter>。</p>

上面代码会显示一个指示条，左侧表示200，右侧表示500，当前位置停留在350

注意，<meter>元素的子元素，正常情况下不会显示。只有在浏览器不支持<meter>时才会显示。

该标签有如下属性。

min：范围的下限，必须小于max属性。如果省略，则默认为0。
max：范围的上限，必须大于min属性。如果省略，则默认为1。
value：当前值，必须在min属性和max属性之间。如果省略，则默认为0。
low：表示“低端”的上限门槛值，必须大于min属性，小于high属性和max属性。如果省略，则等于min属性。
high：表示“高端”的下限门槛值，必须小于max属性，大于low属性和min属性。如果省略，则等于max属性。
optimum：指定最佳值，必须在min属性和max属性之间。它应该与low属性和high属性一起使用，表示最佳范围。如果optimum小于low属性，则表示“低端”是最佳范围；如果大于high属性，则表示“高端”是最佳范围；如果在low和high之间，则表示“中间地带”是最佳范围。如果省略，则等于min和max的中间值。
form：关联表单的id属性。

Chrome 浏览器使用三种颜色，表示指示条所处的位置。较好情况时，当前位置为绿色；一般情况时，当前位置为黄色；较差情况时，当前位置为红色。

<meter id="fuel" name="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

上面代码中，指示条可以分成三段：0 ～ 32，33 ～ 65，66 ～ 100。由于optimum属性是80，因此66 ～ 100是较好情况，3 ～ 65是一般情况，0 ～ 32是较差情况。浏览器因此会根据value属性，将当前位置显示为不同颜色，小于33时显示红色，大于65显示绿色，两者之间显示黄色。

MHguitar

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JS的基础知识

语句JavaScript程序的执行单位为行（line)，也就是一行一行地执行。一般情况下，每一行就是一个语句。语句(statement)是为了完成某种任务而进行的操作，比如下面就是一行赋值语句。var a = 1 + 3;1＋3叫做表达式(expression)，指一个为了得到返回值的计算式。语句和表达式的区别在于，前者主要为了进行某种操作，一般情况下不需要返回值;后者则是为了得到返回值，一定会返回一个值。凡是JavaScript 语言中预期为值的地方，都可以使用表达式。比如，赋值语句的等号右边，预
复制链接

扫一扫