javascript简介

JavaScript 简介

JavaScript 是互联网上最受欢迎的编程语言之一，用于为网页添加交互性，处理数据，以及创建各种应用程序（移动应用程序，桌面应用程序，游戏等）, 这门语言可用于HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 基本特点

JavaScript 是一种轻量级的编程语言。
JavaScript 是一种解释性脚本语言（代码不进行预编译）
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
`JavaScript 很容易学习。

JavaScript组成部分

1。ECMAScript，描述了该语言的语法和基本对象。

2。文档对象模型(DOM），描述处理网页内容的方法和接口。

3。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

javascript可以做什么？

应用场景

浏览器：大部分公司的前端都在使用javascript来完成浏览器客户端的开发。

服务端：有些有大前端团队的公司开始使用nodejs做web服务端开发。

其他：JavaScript还可以运用在APP、微信小程序、桌面应用、浏览器插件开发、游戏开发、VR、AR、硬件、操作系统等领域。

第一个JavaScript程序

JavaScript 用法

在HTML中，必须在<script>和</script>标签之间插入JavaScript代码

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用<script>标签。

<script>alert("我的第一个 JavaScript");
</script>

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

JavaScript可被放置在 HTML 页面的 <body> 和 <head> 部分中。在下面的示例中，我们将其放在 <body> 标签中。

<html>
<head>
</head>
<body><script>alert("我的第一个 JavaScript");</script>
</body>
</html>

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

不过 JavaScript 可以通过不同的方式来输出数据：

使用 document.write() 方法将内容写到 HTML 文档中。
使用 window.alert() 弹出警告框。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

document.write()

将一个字符串写入到HTML文档。此功能可用于写入文本和HTML。

让我们使用JavaScript在浏览器中打印 "Hello W3Cschool!"。

<html><head> </head><body><script>document.write("Hello W3Cschool!");</script></body>
</html>

格式化文本 (Formatting Text)

我们可以使用HTML标签来格式化JavaScript中的文本。

例如，我们可以输出文本为标题。

<html><head> </head><body><script>document.write("<h1>Hello W3Cschool!</h1>");</script></body>
</html>

运行结果：

在网页中添加JavaScript

JavaScript添加到<head>

您可以在HTML文档中放置任意数量的脚本。通常，脚本标签放置在HTML文档的头部如下：

<html><head><script></script></head><body></body>
</html>

一般script标签会被放在头部或尾部。头部就是<head>里面，尾部一般指<body>里

JavaScript添加到<body>

也可以在<body> 标签中包含Javascript代码如下:

<html><head> </head><body><script></script></body>
</html>

注意: 为了使HTML显示不会被脚本加载阻止，可将脚本放在<body>元素的底部改善页面加载。

<script> 标签

<script language="javascript" type="text/javascript"></script>

注意: language 属性已弃用，不推荐使用。 type 也可以忽略不写

在下面的示例中，我们使用 alert() 函数在脚本标签内创建了一个警告框。

<html><head><title></title><script>alert("这是一个alert警告框!");</script></head><body></body>
</html>

运行结果:

外部JavaScript

JavaScript脚本也可以放在外部文件中。

在多个不同网页中使用相同的代码时，外部脚本是很实用的。

JavaScript 文件的文件后缀是 .js

下面我们创建了一个新的文本文件，并将其称为 demo.js

外部JavaScript

要使用外部脚本，请将脚本文件的名称放在<script>标签的 src（source）属性中

例子:

<html><head><title> </title><script src="demo.js"></script></head><body></body>
</html>

在 demo.js 文件中新增如下代码:

alert("这是demo.js文件的警告框");

外部脚本不能使用<script>标签包裹。

外部JavaScript

打开HTML文件,将弹出 "这是demo.js文件的警告框"

您可以在 <head> 或 <body> 中放置外部脚本引用。

无论您选择哪种，外部脚本引用的效果，与在<script>标签中直接写入代码一致。

将JavaScript放在外部文件中具有以下优点：

- 分离HTML和代码。

- 使HTML和JavaScript更容易阅读和维护。

- 缓存的JavaScript文件可以加快页面加载速度。

JavaScript 单行注释

JavaScript 注释可用于提高代码的可读性。

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头。

本例用单行注释来解释代码：

// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾。

下面的例子使用多行注释来解释代码：

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

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 引擎将其视为空语句。

;;;

上面的代码就表示3个空语句。

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

1 + 3;'abc';

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

JavaScript 变量

变量是用于存储信息的"容器",变量的值可以在整个程序中被修改。

变量声明

使用一个变量之前应先声明, 变量是使用关键字 var 来声明的。

var x;

上面的例子中，声明了变量 x。

如果没有在 var 声明语句中给 x 指定初始值，在 x 存入一个值之前， x 的初始值为 undefined。

注意: JavaScript区分大小写。例如，变量 lastName 和 lastname 是两个不同的变量。

JavaScript 使用 var 声明变量, 在支持ES6语法的JavaScript环境中还可以使用 let 声明变量.

“赋值”运算符

在JavaScript中，等号 = 称为“赋值”运算符，而不是“等于”运算符。

例如，x = y 表示将 y 的值赋给 x。

var x = 3;
var y = 4;
x = y;
// 这时 x 的值为4

如上所示, 我们还可以将变量的初始赋值和变量声明写在一起。

使用变量

让我们为变量分配一个值并将其输出到浏览器。

<html><head><script>var x = '你好 W3Cschool';document.write(x);</script></head><body></body>
</html>

使用变量在很多地方都很有用。您可能有一千行代码中多次使用了变量x。更改x的值时，所有地方的x值将自动更改。

JavaScript语句以分号分隔。

变量的命名

JavaScript是区分大小写的。例如，变量lastName和lastname是两个不同的变量。

var x = 100;
document.write(typeof X); // undefined

typeof 运算符，用来检测一个变量的类型, 返回一个字符串, 这边不理解没关系, 我们后面课程会详细介绍。

变量命名规则和规范：

规则：

1. 由字母、数字、下划线、$符号组成，不能以数字开头

2. 不能是关键字和保留字，例如：for,while,this,name

3. 区分大小写

4. 不能是算数运算符

规范：
1. 变量名必须有意义
2. 遵守驼峰命名法
3. 建议不要用$作为变量名

变量命名不允许使用连字符（-），它被保留用于减法。

变量的命名

命名JavaScript变量时还有其他一些规则：

- 您不能使用任何特殊符号，如我的#num，%num等

- 确保您不使用以下任何JavaScript保留字。

很多新手很可能去背上面的单词，从实战思维出发，我们不需要刻意去记！随着学习的深入，自然就非常熟悉了。

变量提升

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

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

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

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

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

区块

JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）。

对于var命令来说，JavaScript 的区块不构成单独的作用域（scope）。

{  var a = 1;
}
a // 1

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

JavaScript 数据类型

JavaScript 有五种基本数据类型：字符串（string）、数字（number）、布尔（boolean）、空（null）、未定义（undefined）和一种复杂数据类型：对象（object）。

JavaScript 中的变量是没有类型的，只有值才有。变量可以随时持有任何类型的值。

var hello = 'hello world';
var age = 21;
var live = true;
var girlfriend = null;
var favsong = undefined;
var Car = {'name': '奔驰','status': '漏油'
};

注意: 以上变量声明将在后面的课程中介绍

注意: 本教程遵循的是ES5规范, 在ES6中新增了一种符号(symbol) 的基本数据类型

typeof 运算符

我们可以用 typeof 运算符来查看值得类型，它返回的是类型的字符串值。

typeof undefined === "undefined" // true
typeof true === "boolean" // true
typeof 42 === "number" // true
typeof "42" === "string" // true
typeof {lift: 42} === "object" // true// ES6中新加入的类型, 了解下就好
typeof Symbol() === "symbol" // true

你可能注意到 null 类型不在此列。它比较特殊， typeof 对它的处理有问题：

typeof null === "object" // true

正确的返回结果应该是 "null", 但这个 bug 由来已久, 在JavaScript中已久存在了二十年左右, 也许永远也不会修复。

请放心：通过后面课程的学习，我们可以通过符合条件来检测 null 值得类型。

undefined 和 null

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。

var a = undefined;
// 或者
var a = null;

上面代码中，变量a分别被赋值为undefined和null，这两种写法的效果几乎等价。

在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。

if (!undefined)
{  console.log('undefined is false');
}
// undefined is false
if (!null) {  console.log('null is false');
}
// null is false
undefined == null
// true

从上面代码可见，两者的行为是何等相似！谷歌公司开发的 JavaScript 语言的替代品 Dart 语言，就明确规定只有null，没有undefined！

既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加复杂度，令初学者困扰吗？这与历史原因有关。

1995年 JavaScript 诞生时，最初像 Java 一样，只设置了null表示"无"。根据 C 语言的传统，null可以自动转为0。

Number(null)
// 0
5 + null
// 5

上面代码中，null转为数字时，自动变成0。

但是，JavaScript 的设计者 Brendan Eich，觉得这样做还不够。首先，第一版的 JavaScript 里面，null就像在 Java 里一样，被当成一个对象，Brendan Eich 觉得表示“无”的值最好不是对象。其次，那时的 JavaScript 不包括错误处理机制，Brendan Eich 觉得，如果null自动转为0，很不容易发现错误。

因此，他又设计了一个undefined。区别是这样的：null是一个表示“空”的对象，转为数值时为0；undefined是一个表示"此处无定义"的原始值，转为数值时为NaN。

Number(undefined)
// NaN
5 + undefined
// NaN

用法和含义

对于null和undefined，大致可以像下面这样理解。

null表示空值，即该处的值现在为空。调用函数时，某个参数未设置任何值，这时就可以传入null，表示该参数为空。比如，某个函数接受引擎抛出的错误作为参数，如果运行过程中未出错，那么这个参数就会传入null，表示未发生错误。

undefined表示“未定义”，下面是返回undefined的典型场景。

// 变量声明了，但没有赋值
var i;
i // undefined
// 调用函数时，应该提供的参数没有提供，该参数等于
undefinedfunction f(x)
{  return x;
}
f() // undefined
// 对象没有赋值的属性
var  o = new Object();
o.p // undefined
// 函数没有返回值时，默认返回
undefinedfunction f() {}
f()
// undefined

布尔值 (boolean)

布尔值代表“真”和“假”两个状态。“真”用关键字true表示，“假”用关键字false表示。布尔值只有这两个值。

下列运算符会返回布尔值：

两元逻辑运算符： && (And)，|| (Or)
前置逻辑运算符： ! (Not)
相等运算符：===，!==，==，!=
比较运算符：>，>=，<，<=

如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

undefined
null
false
0
NaN
""或''（空字符串）

布尔值往往用于程序流程的控制，请看一个例子。

if ('') {
console.log('true');
}// 没有任何输出

上面代码中，if命令后面的判断条件，预期应该是一个布尔值，所以 JavaScript 自动将空字符串，转为布尔值false，导致程序不会进入代码块，所以没有任何输出。

注意，空数组（[]）和空对象（{}）对应的布尔值，都是true。

if ([]) {  console.log('true');
}// true
if ({}) {  console.log('true');
}// true

数值 (number)

JavaScript 只有一种数值类型。数值可以带小数点，也可以不带：

var x1=34.00;      // 使用小数点来写
var x2=34;         // 不使用小数点来写
//这个案例中 x1 与 x2 是完全相等的

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

字符串 (string)

字符串是存储字符的变量。

字符串可以是引号中的任意文本。您可以使用 单引号 或 双引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号，只要不包含包裹字符串的引号即可：

var answer="It's alright";
var answer="He is called 'Loen'";
var answer='He is called "Loen"';

您将在本教程的高级部分学到更多关于字符串的知识。

JavaScript 字符串

使用单引号括起来的字符串中，如果要包含单引号须使用反斜杠（\）转义处理字符串中的单引号。

使用双引号括起来的字符串中，如果要包含双引号须使用反斜杠（\）转义处理字符串中的双引号。

var sayHello = '你好 W3Cschool! \'我是一名JavaScript程序员.\' ';
document.write(sayHello);

后面章节将会详细讲解转义字符的使用

算术运算符

算术运算符对数字（文字或变量）执行算术运算。

在下面的示例中，加法运算符用于确定两个数字的和。

var x = 12 + 3;
document.write(x); // -> 15

您可以根据需要或需要添加多个数字或变量。

var x = 10;
var y = x + 7 + 20 + 45 + 6548;
document.write(y);//-> 6630

乘法

乘法运算符（*）将一个数乘以另一个。

var x = 10 * 9;
document.write(x);// -> 90

除法

/ 运算符用于执行除法运算：

var x = 100 / 5;
document.write(x);// -> 20

取模运算(取余数运算)

取模数（％）运算符返回除法的余数（剩下的）。

var v1 = 5 % 3; // v1 等于 2var v2 = -11 % 5 // v2 等于 -1var v3 = 6 % 3 // v3 等于 0var v4 = 4 % 5 // v4 等于 4
var v5 = 3.5 % 2 // v5 等于 1.5

在JavaScript中，取模运算符不仅支持整数，还支持浮点数。

自增和自减

自增

自增运算符将数值增加1。

如果变量放在 ++ 之后(比如: ++x)，它返回自增后的值。

如果变量放在 ++ 之前(比如: x++)，它返回原始值，然后增加1。

var x = 3;
var y = 3;
var z = x++; // 相当于 x 先赋值给 z, 然后执行 x = x + 1 操作
var a = ++y; // 相当于 y 先执行 y = y + 1, 然后赋值给 a
// z 的值是 3, a,x,y 的值都是 4

自减

自减运算符将数值减1。

如果变量放在 -- 之后(比如: --x)，它返回自减后的值。

如果变量放置在 -- 之前(比如: x--)，它返回原始值，然后减1。

与学校数学一样，您可以使用括号更改算术运算的顺序。

如: var x = (10 +20) * 3;

三元运算符 ?:

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 ? '偶数' : '奇数');

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

比较运算符

逻辑语句中使用比较运算符来确定变量或值之间的相等或差异。返回 true 或 false。

等于（==）运算符检查操作数的值是否相等。

var num = 10;
console.log(num == 8) // -> false

使用 console.log 会在控制台中输出

在chrome浏览器中可以通过右键->检查(Ctrl+shift+I)->Console 打开控制台

或者按F12->Console 打开控制台

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

给定 x=5，下面的表格解释了比较运算符：

使用运算符时，请确保参数的数据类型相同; 数字应与数字，字符串和字符串等进行比较。

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑, 返回 true 或 false。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

逻辑“与”（and）的运算规则，左右两者同为True时，结果为True，只要有一个False，就返回False。
逻辑“或”（or）的运算规则，左右只要有一个True，就返回True，左右两者同为False时，结果为False。
逻辑“非”（not）的运算规则，对运算符右侧的值先转为布尔值，再取反。

逻辑运算符

在以下示例中，我们已将两个布尔表达式与运算符(逻辑与)相连接。

(4 > 1) && (10 < 15)

对于这个表达式，这两个条件都必须是为真。

- 第一个条件确定4是否大于1，这是为真。

- 第二个条件确定10是否小于15，这也是为真。

基于这些结果，发现整个表达式是为真的。

三元运算符

另一个JavaScript条件运算符根据一些条件为变量赋值。句法：

variable = (condition) ? value1: value2

condition 为成立, 返回 value1; condition不成立, 返回 value2

例子:

var isAdult = (age < 18) ? "未成年人": "成年人";

+=赋值运算符

"+=" 执行的是加法运算和赋值操作, 下面的表达式:

a += b;

和下面的表达式是等价的:

a = a + b;

运算符 "+=" 可以作用于数字或字符串:

var a = 5;
var b = 6;
var c = 'hello ';
var d = 'Nier';
a += b; // 等于 11
c += d; // 等于 hello Nier

其他赋值运算符

与 "+=" 运算符类似的运算符还包括 "-=", "*=", "/=", "&=" 等.

JavaScript 字符串

字符串可以存储一系列字符，如 "W3Cschool"。

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：

var coursename = "JavaScript 微课";
var coursename = 'JavaScript 微课';

你可以使用索引位置来访问字符串中的每个字符：

var character = coursename[5];

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0], 第二个为 [1], 以此类推。

特殊字符

在 JavaScript 中，字符串写在单引号或双引号中。

你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

var intro = "I'm Loen";
var answer = 'He is called "Lusi"';

你也可以在字符串添加转义字符来使用引号：

var intro = 'I\'m Loen';
var answer = "He is called \"Lusi\"";

反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符：

转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

代码	输出
\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

例如:

var intro = 'I\'m Loen \nThis is My List';

如果您使用单引号开始一个字符串，那么您也应该用单引号结束。同样的规则适用于双引号。

字符串长度

可以使用内置属性 length 来计算字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

字符串运算符

字符串最有用的运算符是使用+符号连接字符串。

+ 符号可以将多个字符串连接在一起来构建字符串，也可以通过将字符串与其他类型数据相连构建字符串：

var mystring1 = "我在 W3Cschool 学习";
var mystring2 = "JavaScript 编程语言";
document.write(mystring1 + mystring2);

在字符串中插入变量

通过使用连接运算符 + ，你可以插入一个或多个变量来组成一个字符串。

var myName = "Loen";
var myStr = "My name is "+myName+" and I am swell";

字符串的不可变性

在 JavaScript 中，字符串的值是不可变的，这意味着一旦字符串被创建就不能被改变。

例如，下面的代码：

var myStr = "Bob";
myStr[0] = "J";
// myStr 依然是 Bob

是不会把变量 myStr 的值改变成 "Job" 的，因为变量 myStr 是不可变的。

注意，这并不意味着 myStr 永远不能被改变，只是字符串字面量 string literal 的各个字符不能被改变。

改变 myStr 中的唯一方法是重新给它赋一个值，就像这样：

var myStr = "Bob";
myStr = "Job";
// myStr 值为 Job

if语句

编写代码时，经常需要根据不同的条件执行不同的操作。

您可以通过在代码中使用条件语句来执行此操作。

如果指定的条件为 true，则使用 if 来指定将执行的代码块。

if (条件) {//条件为true时要执行的代码
}

只有当指定条件为 true 时，该语句才会执行代码。

var num = 10;
if (num < 20){document.write("在W3Cschool微课学习JavaScript很简单");}

附上流程图便于理解:

if语句的应用非常广，比如常见的登录系统
if (密码正确) { //允许登录
}else{     //弹出提示：“密码不正确”
}

if语句

这是条件为 false 的另一个例子。

var num1 = 7;
var num2 = 10;
if (num1 > num2) {alert("num1比num2大");
}
alert("这是if之后的代码");

当条件为false时，将跳过警报语句，程序继续执行if语句关闭大括号之后的行。

请注意，如果是小写字母。大写字母（If或IF）将产生错误。

每天一个脱发小技巧

注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。

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

上面代码的原意是，当x等于y的时候，才执行相关语句。但是，不小心将严格相等运算符写成赋值表达式，结果变成了将y赋值给变量x，再判断变量x的值（等于2）的布尔值（结果为true）。

这种错误可以正常生成一个布尔值，因而不会报错。为了避免这种情况，有些开发者习惯将常量写在运算符的左边，这样的话，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。

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

至于为什么优先采用“严格相等运算符”（===），而不是“相等运算符”（==）。

else 语句

使用 else 语句指定一个代码块，如果条件为 false，则执行该代码块。

if (expression) {// 条件为 true 时执行
}
else {//  条件为 false 时执行
}

else 语句

下面的示例演示如何使用 if ... else 语句。

var myNum1 = 7;
var myNum2 = 10;
if (myNum1 > myNum2) {alert("myNum1 大于 myNum2");
}
else {alert("myNum1 小于 myNum2");
}

上面的例子说：

- 如果myNum1大于myNum2，则提醒"myNum1 大于 myNum2";

- 否则，提醒"myNum1 小于 myNum2"。

浏览器将打印"myNum1 小于 myNum2"，因为7不大于10。

else if 语句

如果第一个条件为 false，则可以使用 else if 语句指定新条件。

var course = 1;
if (course == 1) {document.write("<h1>HTML 教程</h1>");
} else if (course == 2) {document.write("<h1>CSS 教程</h1>");
} else {document.write("<h1>JavaScript 教程</h1>");
}

上面的代码：

- 如果 course 等于1，输出 "HTML教程" ;

- 或者 course 等于2，则输出 "CSS教程";

- 如果上述条件均不成立，则输出 "JavaScript教程";

由于 course 值为 1 所以:

else 语句总是在 if 和 else if 后面

else if 语句

当 if 与所有的 else if 条件均不成立时执行 else 语句代码块。

我们将 course 值设置为 3 时。

var course = 3;
if (course == 1) {document.write("<h1>HTML 教程</h1>");
} else if (course == 2) {document.write("<h1>CSS 教程</h1>");
} else {document.write("<h1>JavaScript 教程</h1>");
}

switch 语句

switch 语句用于基于不同的条件来执行不同的动作。

语法

 switch(n){case 1:执行代码块 1break;case 2:执行代码块 2break;default:n 与 case 1 和 case 2 都不匹配的时候执行的代码}

您可以使用多个 if ... else 语句来实现相同的结果，但是 switch 语句在这种情况下更有效。

switch 语句

实例

function myFunction()
{var x;var d=new Date().getDay(); // 获取周几的方法, 我们后面会学到switch (d){case 0:x="今天是星期日";break;case 1:x="今天是星期一";break;case 2:x="今天是星期二";break;case 3:x="今天是星期三";break;case 4:x="今天是星期四";break;case 5:x="今天是星期五";break;case 6:x="今天是星期六";break;}return x;
}
alert(myFunction()); // 使用 alert 显示函数的返回值

break 关键词

当javascript代码执行到 break 时, 将跳出 switch代码块继续往下执行。

通常情况下一个 case 中放置一个 break

default 关键词

如果 switch 中没有匹配的项,默认执行 default代码块

function myFunction(d)
{var x;switch (d){case 0:x="今天是星期日";break;case 1:x="今天是星期一";break;case 2:x="今天是星期二";break;case 3:x="今天是星期三";break;case 4:x="今天是星期四";break;case 5:x="今天是星期五";break;case 6:x="今天是星期六";break;default:x="输入的参数错误!";}return x;
}
alert(myFunction(7)); // -> 输入的参数错误

如果不需要默认操作 default 可以省略

JavaScript for 循环

循环可以将代码块执行指定的次数。

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

语法:

for (statement 1; statement 2; statement 3) {code block to be executed
}

语句 1（Statement 1）：在循环（代码块）开始之前执行。

语句 2 （Statement 2）：定义运行循环的条件（代码块）。

语句 3 （Statement 3）：在执行循环（代码块）之后每次执行。

JavaScript for 循环

我们可以这样输出数组的值(一般写法)：

<script>var cars = ['大众','奔驰','本田','丰田','特斯拉','路虎','福特'];document.write(cars[0] + "<br />"); document.write(cars[1] + "<br />"); document.write(cars[2] + "<br />"); document.write(cars[3] + "<br />"); document.write(cars[4] + "<br />"); document.write(cars[5] + "<br />");
</script>

使用for循环:

<script>
var cars = ['大众','奔驰','本田','丰田','特斯拉','路虎','福特'];
for (var i=0;i<cars.length;i++){ document.write(cars[i] + "<br />");
}
</script>

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件（i 必须小于 cars元个数）。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。

JavaScript for 循环

如果语句2返回 true，循环将重新开始，如果返回 false，循环将结束。语句2也是可选的。

如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。

语句3 也是可选的，通常用来改变初始的变量值,它可以做任何操作包括自增(i++),自减(i--),正增量(i=i+5)等任何语句。

var i = 0;
for (; i < 5; ) {document.write(i);i++;
}

JavaScript while 循环

只要指定条件为 true，循环就可以一直执行代码块。

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件){//while中的代码
}
//后续代码

条件可以是返回 true 或 false 的任何条件语句。

while 循环

实例

本例中的循环将继续运行，只要变量 i 小于 5：

<script>
var x = '', i = 0;
while (i<5){x=x + "The number is " + i + "<br />";i++;
}
document.write(x);
</script>

while 循环

如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

while(true){
// some code
}

注意: 确保 while 循环中的条件最终变为 false, 不然循环永远不会结束

使用循环语句查找通讯录

任务

1、我们有一个 contacts 数组里面存储着不同联系人的对象。

2、函数 lookUpProfile 有两个预定义参数：firstName值和prop属性。

3、该函数应检查firstName是实际联系人的firstName，给定的属性（prop）是该联系人的属性。

4、如果它们都存在，函数返回prop属性对应的值。

5、如果firstName 值不存在，返回 "No such contact"。

6、如果prop 属性不存在，返回 "No such property"。

var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];function lookUpProfile(firstName, prop){
// 在这行的下面添加代码var flagfn = 0;var flagpr = 0;for(var key in contacts){dictt = contacts[key];//   console.log(dictt.firstName)if (dictt.firstName==firstName){if(dictt.hasOwnProperty(prop)){return dictt[prop]}else{flagpr=1;}}else{flagfn=1;}}if( flagfn&&flagpr){return "No such property"}if(!flagpr && flagfn){return "No such contact"}// 在这行的上面添加代码
}var a = lookUpProfile("Akira", "address");
console.log(a)

循环语句综合实战

如果你有一个二维数组，可以使用嵌套循环的逻辑，先遍历外面的数组，再遍历里面的子数组。下面是一个例子：

var arr = [ [1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) { for (var j=0; j < arr[i].length; j++) { console.log(arr[i][j]); }
}

这样就可以一次输出 arr 中的每个子元素。请注意，对于内部循环，我们可以通过 arr[i] 的 .length 来获得子数组的长度，因为 arr[i] 的本身就是一个数组。

任务

修改函数 multiplyAll，以获得 arr 内部数组的每个数字相乘的结果 product。

function multiplyAll(arr) {
var product = 1;
// 在这行的下面添加代码
for(var i=0; i<arr.length; i++){for(var j=0; j<arr[i].length; j++){product*=arr[i][j];}
}
// 在这行的上面添加代码
return product;
}multiplyAll([[1,2],[3,4],[5,6,7]]);

do while 循环

do while 循环是 while 循环的变体。该循环会在检查条件是否为真之前，执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

do{//do的代码
}
while (条件);
// 后续代码

注意: 在do ... while循环结束时使用的分号。

实例

下面的例子使用 do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：

<script>
var x = '', i = 0;
do{x=x + "The number is " + i + "<br />";i++;
}
while (i<5);
document.write(x);
</script>

尝试一下

别忘记增加条件中所用变量的值，否则循环永远不会结束！

JavaScript Break 和 Continue 语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

Break 语句

我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。

break 语句可用于跳出循环。

continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

<script>
var x = '';
for (i = 0; i < 10; i++){if (i == 3){break;}x = x + "The number is " + i + "<br />";
}
document.write(x);
</script>

Continue 语句

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。该例子跳过了值 3：

<script>
var x = '';
for (i = 0; i <= 10; i++){if (i == 3) continue;x= "数值是： " + i + "<br />";document.write(x);
}
</script>

尝试一下

综合演练

任务

在高尔夫golf游戏中，每个洞都有自己的标准杆数par，代表着距离。根据你把球打进洞所挥杆的次数strokes，可以计算出你的高尔夫水平。

给 golfScore 函数传送2个参数，分别是标准杆数par 和挥杆次数strokes ，根据下面的表格返回正确的水平段位。

Strokes	Return
1	"Hole-in-one!"
<= par - 2	"Eagle"
par - 1	"Birdie"
par	"Par"
par + 1	"Bogey"
par + 2	"Double Bogey"
>= par + 3	"Go Home!"

par 和 strokes 必须是数字而且是正数。

function golfScore(par, strokes) {
// 在这行的下面添加代码
if(strokes==1){return "Hole-in-one!";
}
else if(strokes<=par-2){return "Eagle";
}
else if(strokes==par-1){return "Birdie";
}
else if(strokes==par){return "Par";
}
else if(strokes==par+1){return "Bogey";
}
else if(strokes==par+2){return "Double Bogey";
}
else if(strokes>=par+3){return "Go Home!";
}
return "Change Me";
//在这行的上面添加代码
}// 可以修改参数进行测试
golfScore(5, 4);

什么是JS标签？

标签（label）

JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。

label:语句

标签可以是任意的标识符，但不能是保留字，语句部分可以是任意语句。

标签通常与break语句和continue语句配合使用，跳出特定的循环。

top:  for (var i = 0; i < 3; i++){   for (var j = 0; j < 3; j++){    if (i === 1 && j === 1) break top;    console.log('i=' + i + ', j=' + j);}}// i=0, j=0// i=0, j=1// i=0, j=2// i=1, j=0

上面代码为一个双重循环区块，break命令后面加上了top标签（注意，top不用加引号），满足条件时，直接跳出双层循环。如果break语句后面不使用标签，则只能跳出内层循环，进入下一次的外层循环。

标签也可以用于跳出代码块。

foo: {  console.log(1);
break
foo;  console.log('本行不会输出');
}console.log(2);// 1// 2

上面代码执行到break foo，就会跳出区块。

continue语句也可以与标签配合使用。

top:
for (var i = 0; i < 3; i++){
for (var j = 0; j < 3; j++){     if (i === 1 && j === 1) continue top;
console.log('i=' + i + ', j=' + j);}}
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2

上面代码中，continue命令后面有一个标签名，满足条件时，会跳过当前循环，直接进入下一轮外层循环。如果continue语句后面不使用标签，则只能进入下一轮的内层循环。

JavaScript基本概念相关推荐

js基础--javascript基础概念之函数
js基础--javascript基础概念之函数引用w3c介绍: 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. JavaScript 函数语法函数就是包裹在花括号中的代码块,前面使用 ...
javascript的概念
一.了解JavaScript 页面中所有的动态效果或动态交互基本上都是基于JavaScript来实现的 1. 页面的各种动态效果 2. 对用户操作的响应 3. 对客户端数 ...
33 个 JavaScript 核心概念系列（三）: 显式 (名义) 与隐式 (鸭子）类型转换
原文地址:落明的博客一. 前言说实话,JavaScript 的类型转换是个相当头疼的问题,无论是对于初学者还是有经验的老司机.它的难处并不在于概念多难理解,而是情况多且杂,看似相同的情况结果却又出 ...
深入浅出理解Javascript原型概念以及继承机制(转)
在Javascript语言中,原型是一个经常被讨论到但是有非常让初学者不解的概念.那么,到底该怎么去给原型定义呢?不急,在了解是什么之前,我们不妨先来看下为什么. Javascript最开始是网景公司 ...
javascript 核心概念（1）-数据类型
语法 (1)到现在为止,大多数浏览器也还是支持到ECMAScript 第三版的标准. 核心概念就是一个语言的基本工作原理,涉及语法,操作符,数据类型. (2)javascript的一切--变量,函数名 ...
面试：JavaScript基础概念
文章目录 1. JS基础概念 JavaScript 常见知识总结重点 1.js的基本数据类型都有哪些 2.判断基本数据类型的方法 typeof instanceof Object.prototype ...
（3）JavaScript基本概念
需要了解的基本内容: 语法数据类型流控制语句本章将主要按照第3版定义的ECMAScript介绍这门语言的基本概念,并就第5版的变化给出说明. 3.1 语法 3.1.1 区分大小写 3.1.2 标 ...
JavaScript 核心概念之作用域和闭包
相信大家已经阅读了很多关于作用域和闭包文章,我也一样.作用域和闭包是 JavaScript 中的关键概念之一.当我阅读了<高性能的JavaScript>这本书后,我才完全理解这两个概念.所 ...
笔记JavaScript基本概念
语法 ECMAScript 的语法大量借鉴了 C 及其他类 C 语言( 如 Java 和 Perl ) 的语法. 因此 , 熟悉这些语言的开发人员在接受 ECMAScript 更加宽松的语法时 , 一 ...