JavaScript学习重点一（题点）

一、JavaScript输出（调试）

JavaScript 显示数据

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

• 使用 window.alert() 弹出警告框。（使用window.alert()）
• 使用 document.write() 方法将内容写到 HTML 文档中。（操作HTML元素）

  直接把 id="demo" 的 <p> 元素写到 HTML 文档输出中

• 使用 innerHTML 写入到 HTML 元素。（写到HTML文档）

  请使用 document.write() 仅仅向文档输出写内容。 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

• 使用 console.log() 写入到浏览器的控制台。（写到控制台）

  如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。 浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

二、 JavaScript 字面量

（在编程语言中，一般固定值称为字面量，如 3.14。）

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

3.14

1001

123e5

字符串（String）字面量 可以使用单引号或双引号:

"John Doe"

'John Doe'

表达式字面量 用于计算：

5 + 6

5 * 10

数组（Array）字面量 定义一个数组：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数：

function myFunction(a, b) { return a * b;}

JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

var x, length

x = 5

length = 6

尝试一下 »

变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。

 

	变量是一个名称。字面量是一个值。

---

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

(5 + 6) * 10

尝试一下 »

JavaScript使用赋值运算符给变量赋值：

x = 5
y = 6
z = (x + y) * 10

尝试一下 »

JavaScript语言有多种类型的运算符：

类型	实例	描述
赋值，算术和位运算符	=  +  -  *  /	在 JS 运算符中描述
条件，比较及逻辑运算符	==  != <  >	在 JS 比较运算符中描述

 

---

JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。

语句是用分号分隔：

x = 5 + 6;
y = x * 10;

 

---

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

 

和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

var 关键字告诉浏览器创建一个新的变量：

 

var x = 5 + 6;
var y = x * 10;

JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。

JavaScript 关键字必须以字母、下划线（_）或美元符（$）开始。

后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开关键字和数字）。

以下是 JavaScript 中最​​重要的保留字（按字母顺序）：

abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

---

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：

// 我不会执行

---

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

 

---

数据类型的概念

编程语言中，数据类型是一个非常重要的内容。

为了可以操作变量，了解数据类型的概念非常重要。

如果没有使用数据类型，以下实例将无法执行：

16 + "Volvo"

16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢？

"16Volvo"

你可以在浏览器尝试执行以上代码查看效果。

在接下来的章节中你将学到更多关于数据类型的知识。

---

JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

 

---

JavaScript 字母大小写

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

---

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符，包含标点等字符

三、JavaScript语句

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误 。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("你好 \
世界!");

不过，您不能像这样折行：

document.write \ 
("你好世界!");

提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

---

//单行注释，    /*   */多行注释

---

变量是用于存储信息的"容器"。

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量：

Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

在执行过以下语句后，变量 carname 的值将是 undefined：

var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo"; 
var carname;

---

 四、JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

实例

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

 

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

实例

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

JavaScript 数组

下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");

或者 (literal array):

实例

var cars=["Saab","Volvo","BMW"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

JavaScript 对象 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔： var person={firstname:"John", lastname:"Doe", id:5566}; 上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。 空格和折行无关紧要。声明可横跨多行： var person={ firstname : "John", lastname  : "Doe", id        :  5566 }; 对象属性有两种寻址方式： name=person.lastname; name=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

声明变量类型 当您声明新变量时，可以使用关键词 "new" 来声明其类型： var carname=new String; var x=      new Number; var y=      new Boolean; var cars=   new Array; var person= new Object;   JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

五、JavaScript 对象

对象也是一个变量，但对象可以包含多个值（多个变量）。

var car = {type:"Fiat", model:500, color:"white"};

在以上实例中，3 个值 ("Fiat", 500, "white") 赋予变量 car。

在以上实例中，3 个变量 (type, model, color) 赋予变量 car。

 

	JavaScript 对象是变量的容器。

对象属性

可以说 "JavaScript 对象是变量的容器"。

但是，我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

 

	JavaScript 对象是属性变量的容器。

对象方法 对象的方法定义了一个函数，并作为对象的属性存储。 对象方法通过添加 () 调用 (作为一个函数)。 该实例访问了 person 对象的 fullName() 方法: 实例 name = person.fullName(); 如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回： 实例 name = person.fullName;   JavaScript 对象是属性和方法的容器。

访问对象方法

你可以使用以下语法创建对象方法：

methodName : function() { code lines }

你可以使用以下语法访问对象方法：

objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。

有多种方式可以创建，使用和修改 JavaScript 对象。

同样也有多种方式用来创建，使用和修改属性和方法。

---

六、JavaScript函数

带有返回值的函数 有时，我们会希望函数将值返回调用它的地方。 通过使用 return 语句就可以实现。 在使用 return 语句时，函数会停止执行，并返回指定的值。 语法 function myFunction() {     var x=5;     return x; } 上面的函数会返回值 5。 注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。 函数调用将被返回值取代： var myVar=myFunction(); myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。 即使不把它保存为变量，您也可以使用返回值： document.getElementById("demo").innerHTML=myFunction(); "demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。 您可以使返回值基于传递到函数中的参数： 实例 计算两个数字的乘积，并返回结果： function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3); "demo" 元素的 innerHTML 将是： 12 在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的： function myFunction(a,b) { if (a>b) { return; } x=a+b } 如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

向未声明的 JavaScript 变量分配值 如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。 这条语句： carname="Volvo"; 将声明 window 的一个属性 carname。 非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。 var var1 = 1; // 不可配置全局属性 var2 = 2; // 没有使用 var 声明，可配置全局属性 console.log(this.var1); // 1 console.log(window.var1); // 1 delete var1; // false 无法删除 console.log(var1); //1 delete var2; console.log(delete var2); // true console.log(var2); // 已经删除 报错变量未定义

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。 以下实例中 carName 在函数内，但是为全局变量。 实例 // 此处可调用 carName 变量 function myFunction() {                     carName = "Volvo";                     // 此处可调用 carName 变量 }

 

HTML 中的全局变量 在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。 //此处可使用 window.carName function myFunction() { carName = "Volvo"; }   你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。 局部变量，包括 window 对象可以覆盖全局变量和函数。

七、JavaScript事件

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击

<button οnclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>

<button οnclick="this.innerHTML=Date()">现在的时间是?</button>                 //代码将修改自身元素的内容 (使用 this.innerHTML):

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JavaScript 可以做什么? 事件可以用于处理表单验证，用户输入，用户行为及浏览器动作: 页面加载时触发事件 页面关闭时触发事件 用户点击按钮执行动作 验证用户输入内容的合法性 等等 ... 可以使用多种方法来执行 JavaScript 事件代码： HTML 事件属性可以直接执行 JavaScript 代码 HTML 事件属性可以调用 JavaScript 函数 你可以为 HTML 元素指定自己的事件处理程序 你可以阻止事件的发生。 等等 ...

 八、JavaScript具体语法

JavaScript 字符串 你也可以在字符串添加转义字符来使用引号： var x = 'It\'s alright'; var y = "He is called \"Johnny\""; 反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符： 代码 输出 \' 单引号 \" 双引号 \\ 反斜杠 \n 换行 \r 回车 \t tab(制表符) \b 退格符 \f 换页符 字符串长度 可以使用内置属性 length 来计算字符串的长度： var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length; 字符串可以是对象 通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John" 但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John") 实例 var x = "John"; var y = new String("John"); typeof x // 返回 String typeof y // 返回 Object  不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：   var x = "John";               var y = new String("John"); (x === y) // 结果为 false，因为 x 是字符串，y 是对象 === 为绝对相等，即数据类型与值都必须相等。 字符串属性和方法 原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。 原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。 字符串方法我们将在下一章节中介绍。 字符串属性 属性 描述 constructor 返回创建字符串属性的函数 length 返回字符串的长度 prototype 允许您向对象添加属性和方法   字符串方法 更多方法实例可以参见：JavaScript String 对象。 方法 描述 charAt() 返回指定索引位置的字符 charCodeAt() 返回指定索引位置字符的 Unicode 值 concat() 连接两个或多个字符串，返回连接后的字符串 fromCharCode() 将 Unicode 转换为字符串 indexOf() 返回字符串中检索指定字符第一次出现的位置 lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置 localeCompare() 用本地特定的顺序来比较两个字符串 match() 找到一个或多个正则表达式的匹配 replace() 替换与正则表达式匹配的子串 search() 检索与正则表达式相匹配的值 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分 split() 把字符串分割为子字符串数组 substr() 从起始索引号提取字符串中指定数目的字符 substring() 提取字符串中两个指定的索引号之间的字符 toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 toLowerCase() 把字符串转换为小写 toString() 返回字符串对象值 toUpperCase() 把字符串转换为大写 trim() 移除字符串首尾空白 valueOf() 返回某个字符串对象的原始值

JavaScript 运算符 运算符 描述 例子 x 运算结果 y 运算结果 在线实例 + 加法 x=y+2 7 5 实例 » - 减法 x=y-2 3 5 实例 » * 乘法 x=y*2 10 5 实例 » / 除法 x=y/2 2.5 5 实例 » % 取模（余数） x=y%2 1 5 实例 » ++ 自增 x=++y 6 6 实例 » x=y++ 5 6 实例 » -- 自减 x=--y 4 4 实例 » x=y-- 5 4  两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串 JavaScript 比较 和 逻辑运算符   比较运算符 比较运算符在逻辑语句中使用，以测定变量或值是否相等。 x=5，下面的表格解释了比较运算符：   运算符 描述 比较 返回值 实例 == 等于 x==8 false 实例 » x==5 true 实例 » === 绝对等于（值和类型均相等） x==="5" false 实例 » x===5 true 实例 » !=  不等于 x!=8 true 实例 » !==  不绝对等于（值和类型有一个不相等，或两个都不相等） x!=="5" true 实例 » x!==5 false 实例 » >  大于 x>8 false 实例 » <  小于 x<8 true 实例 » >=  大于或等于 x>=8 false 实例 » <=  小于或等于 x<=8 true 比较和逻辑运算符用于测试 true 或者 false。 如何使用 可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动： 逻辑运算符 逻辑运算符用于测定变量或值之间的逻辑。 if (age<18) x="Too young";   给定 x=6 以及 y=3，下表解释了逻辑运算符： 运算符 描述 例子 && and (x < 10 && y > 1) 为 true || or (x==5 || y==5) 为 false ! not !(x==y) 为 true  条件运算符 如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。 voteable=(age<18)?"年龄太小":"年龄已达到";

For/In 循环 JavaScript for/in 语句循环遍历对象的属性： function myFunction(){     var x;     var txt="";     var person={fname:"Bill",lname:"Gates",age:56};      for (x in person){                                 //x为属性名         txt=txt + person[x];     }     document.getElementById("demo").innerHTML=txt; }

JavaScript 标签 正如您在 switch 语句那一章中看到的，可以对 JavaScript 语句进行标记。 如需标记 JavaScript 语句，请在语句之前加上冒号：       label: statements break 和 continue 语句仅仅是能够跳出代码块的语句。 语法:       break labelname;       continue labelname; continue 语句（带有或不带标签引用）只能用在循环中。 break 语句（不带标签引用），只能用在循环或 switch 中。 通过标签引用，break 语句可用于跳出任何 JavaScript 代码块： typeof 操作符 你可以使用 typeof 操作符来检测变量的数据类型。 实例 typeof "John"                // 返回 string  typeof 3.14                  // 返回 number typeof false                 // 返回 boolean typeof [1,2,3,4]             // 返回 object typeof {name:'John', age:34} // 返回 object null 在 JavaScript 中 null 表示 "什么都没有"。 null是一个只有一个值的特殊类型。表示一个空对象引用。   用 typeof 检测 null 返回是object。   你可以设置为 null 来清空对象: 实例 var person = null;           // 值为 null(空), 但类型为对象   你可以设置为 undefined 来清空对象: 实例 var person = undefined;     // 值为 undefined, 类型为 undefined undefined 在 JavaScript 中, undefined 是一个没有设置值的变量。 typeof 一个没有值的变量会返回 undefined。 实例 var person;                  // 值为 undefined(空), 类型是undefined 任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined. 实例 person = undefined;          // 值为 undefined, 类型是undefined undefined 和 null 的区别 实例 null 和 undefined 的值相等，但类型不等： typeof undefined             // undefined typeof null                  // object null === undefined           // false null == undefined            // true