Javescript REVIEW

引言

JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。Javascript，从“最被误解的语言”，最后神奇地转变成为“最流行的语言”，证明它经受得起时间的考验。虽然单独来看，它的交互设计有些失败，但是加上Ajax的完美配合，javascript就成了一款轻便并且又实用的好语法。javascript因为兼容于ECMA标准，因此也称为ECMAScript。JavaScript作为一种脚本语言，已经被广泛地应用于Web页面当中，通过嵌入HTML来实现各种酷炫的动态效果，为用户提供赏心悦目的浏览效果。除此之外，也可以用于控制cookies以及基于Node.js技术进行服务器端编程。javascript是甲骨文公司的注册商标，完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型和浏览器对象模型。发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA(欧洲计算机制造商协会)的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

知识图谱

javascript 用法

如需在 HTML 页面中插入 JavaScript，请使用

会告诉 JavaScript 在何处开始和结束。之间的代码行包含了 JavaScript，脚本可位于 HTML 的或部分中，或者同时存在于两个部分中。

通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。把一个 JavaScript 函数放置到 HTML 页面的部分：

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

把 JavaScript 放到了页面代码的底部，这样就可以确保在

元素创建之后再执行脚本。也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在

javascript 输出

JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

javascript语法

1.JavaScript 字面量
在编程语言中，一个字面量是一个常量，如 3.14。
数字（Number）字面量可以是整数或者是小数，或者是科学计数(e):
3.14

1001

123e5
字符串（String）字面量可以使用单引号或双引号 :
“John Doe”

‘John Doe’
数组（Array）字面量定义一个数组：
[40, 100, 1, 5, 25, 10]
对象（Object）字面量定义一个对象：
{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
函数（Function）字面量定义一个函数：
function myFunction(a, b) { return a * b;}

2.JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：
var x, length

x = 5

length = 6

3.JavaScript 操作符

JavaScript使用算术运算符来计算值:
(5 + 6) * 10
JavaScript使用赋值运算符给变量赋值：
x = 5
y = 6
z = (x + y) * 10

4.JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。浏览器通过 JavaScript 语句明白要执行什么操作。
语句是用分号分隔：
x = 5 + 6;
y = x * 10;

5.JavaScript 关键词

JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量：
var x = 5 + 6;
var y = x * 10;

6.JavaScript 标识符

和其他任何编程语言一样，JavaScript 保留了一些标识符为自己所用。
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

7.JavaScript 注释

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

8.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 通过对象字面量赋值

9.JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘于 b 的结果
}

10.JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。

11.JavaScript 字符集

JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。

**JavaScript 中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)。
Note JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

javascript语句

javascript注释

//document.getElementById(“myH1”).innerHTML=“欢迎来到我的主页”;
/*
document.getElementById(“myH1”).innerHTML=“欢迎来到我的主页”;
document.getElementById(“myP”).innerHTML=“这是我的第一个段落。”;
*/

javascript变量

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

javascript数据类型

JavaScript 数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
实例
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = “John”; // 现在 x 为字符串

avaScript 字符串

字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
实例
var carname=“Volvo XC60”;
var carname=‘Volvo XC60’;
您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
实例
var answer=“It’s alright”;
var answer=“He is called ‘Johnny’”;
var answer=‘He is called “Johnny”’;

JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
实例
var x1=34.00; // 使用小数点来写
var x2=34; // 不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
实例
var y=123e5; // 12300000
var z=123e-5; // 0.00123
JavaScript 数字

布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
JavaScript 数组

下面的代码创建名为 cars 的数组：
var cars=new Array();
cars[0]=“Saab”;
cars[1]=“Volvo”;
cars[2]=“BMW”;
或者 (condensed array):
var cars=new Array(“Saab”,“Volvo”,“BMW”);

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 来清空变量。
实例
cars=null;
person=null;

声明变量类型
当您声明新变量时，可以使用关键词 “new” 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

javascript函数

function myFunction(a,b)
{
return a*b;
}document.getElementById("demo").innerHTML=myFunction(4,3);

 function myFunction(a,b){
if (a>b){return;//如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和}
x=a+b
}

局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
局部变量比同名全局变量的优先级高，所以局部变量会隐藏同名的全局变量。

全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
实例
//此处可使用 window.carName

function myFunction() {
carName = “Volvo”;
}

JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

javascript事件

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。
HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
单引号:

双引号:

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):
实例
The time is?
修改自身元素的内容 (使用 this.innerHTML):
实例
The time is?

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

javascript字符串

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:
实例
var answer = “It’s alright”;
var answer = “He is called ‘Johnny’”;
var answer = ‘He is called “Johnny”’;
你也可以在字符串添加转义字符来使用引号：
实例
var answer = ‘It’s alright’;
var answer = “He is called “Johnny””;

字符串长度
可以使用内置属性 length 来计算字符串的长度：
实例
var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
var sln = txt.length;

特殊字符
在 JavaScript 中，字符串写在单引号或双引号中。
因为这样，以下实例 JavaScript 无法解析：x
“We are the so-called “Vikings” from the north.”
字符串 "We are the so-called " 被截断。
如何解决以上的问题呢？可以使用反斜杠 () 来转义 “Vikings” 字符串中的双引号，如下:
“We are the so-called “Vikings” from the north.”
反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符：
转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：
代码输出
’ 单引号
" 双引号
\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = “John”
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)
实例
var x = “John”;
var y = new String(“John”);
typeof x // returns String
typeof y // returns Object
Note 不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

var x = "John";
var y = new String("John");
(x === y) // is false because x is a string and y is an object.=== 为绝对相等

字符串方法
Method 描述
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将指定的 Unicode 值转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

javascript运算符

用于字符串的 + 运算符

运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 + 运算符。
实例
如需把两个或多个字符串变量连接起来，请使用 + 运算符：

txt1=“What a very”;
txt2=“nice day”;
txt3=txt1+txt2;
txt3 运算结果如下:
What a verynice day

对字符串和数字进行加法运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：
实例
x=5+5;
y=“5”+5;
z=“Hello”+5;
x,y, 和 z 输出结果为:
10
55
Hello5

javascript比较和逻辑运算符

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
运算符描述例子
&& and (x < 10 && y > 1) 为 true
|| or (x5 || y5) 为 false
! not !(x==y) 为 true
提示：JavaScript逻辑运算符的优先级是：！、&& 、||

Javascript三目运算（三元运算）语句

请使用 (condition1) ? ture-doing : else-doing; 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
实例
5 > 3 ? alert(“5大于3”) : alert(“5小于3”);

JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}

javascript For循环

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
可以在语句 1 中初始化任意（或者多个）值：
实例:
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + “
”);
}
同时还可以省略语句 1（比如在循环开始前已经设置了值时）：
实例:
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + “
”);
}

语句 3

通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i–)，或者更大 (i=i+15)。
语句 3 也可以省略（比如当循环内部有相应的代码时）：
实例:
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + “
”);
i++;
}

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：
实例
var person={fname:“John”,lname:“Doe”,age:25};

for (x in person)
{
txt=txt + person[x];
}

    var x;var txt="";var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){txt=txt + person[x];}document.getElementById("demo").innerHTML=txt;

break 为跳出循环体，continue 为结束本次循环开始下一次循环；
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：
实例
cars=[“BMW”,“Volvo”,“Saab”,“Ford”];
list:
{
document.write(cars[0] + “
”);
document.write(cars[1] + “
”);
document.write(cars[2] + “
”);
break list;
document.write(cars[3] + “
”);
document.write(cars[4] + “
”);
document.write(cars[5] + “
”);
}

javascript类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
JavaScript 数据类型
在 JavaScript 中有 5 种不同的数据类型：
string
number
boolean
object
function
3 种对象类型：
Object
Date
Array
2 个不包含任何值的数据类型：
null
undefined
typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
实例
typeof “John” // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [ 1,2,3,4] // 返回 object
typeof {name: ‘John’, age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (if myCar is not declared)
typeof null // 返回 object

请注意：
NaN（not a numer）的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是返回 Object。

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。
实例
“John”.constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2, 3,4].constructor // 返回函数 Array() { [native code] }
{name:‘John’, age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function() {}.constructor // 返回函数 Function(){ [native code] }

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：
实例
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String( 100+ 23) // 将数字表达式转换为字符串并返回

Number 方法 toString() 也是有同样的效果。
实例
x.toString()
(123).toString()
(100 + 23).toString()

将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 “false”
String(true) // 返回 “true”
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 “false”
true.toString() // 返回 “true”

将日期转换为字符串

全局方法 String() 可以将日期转换为字符串。
String(Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
Date 方法 toString() 也有相同的效果。
实例
Date().toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 “3.14”) 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number(“3.14”) // 返回 3.14
Number(" “) // 返回 0
Number(”") // 返回 0
Number(“99 88”) // 返回 NaN

一元运算符 +

Operator + 可用于将变量转换为数字：
实例
var y = “5”; // y 是一个字符串
var x = + y; // x 是一个数字
如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):
实例
var y = “John”; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)

将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字。
Number(false) // 返回 0
Number(true) // 返回 1

将日期转换为数字

全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d) // 返回 1404568027739
日期方法 getTime() 也有相同的效果
d = new Date();
d.getTime() // 返回 1404568027739

自动转换类型 Type Conversion

当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。
以下输出结果不是你所期望的：
5 + null // 返回 5 because null is converted to 0
“5” + null // 返回"5null" because null is converted to “null”
“5” + 1 // 返回 “51” because 1 is converted to “1”
“5” - 1 // 返回 4 because “5” is converted to 5

自动转换为字符串

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：
document.getElementById(“demo”).innerHTML = myVar;

// if myVar = {name:“Fjohn”} // toString 转换为 “[object Object]”
// if myVar = [1,2,3,4] // toString 转换为 “1,2,3,4”
// if myVar = new Date() // toString 转换为 “Fri Jul 18 2014 09:08:55 GMT+0200”
数字和布尔值也经常相互转换：
// if myVar = 123 // toString 转换为 “123”
// if myVar = true // toString 转换为 “true”
// if myVar = false // toString 转换为 “false”

null

在 JavaScript 中 null 表示 “什么都没有”，是一个只有一个值的特殊类型，表示一个空对象引用。
当设置为“null”时，可以用来清空对象：
var person = null; // 值为 null(空), 但类型为对象
提示：你可以使用 typeof 检测 null 返回是object

undefined

在 JavaScript 中 undefined 是一个没有设置值的变量。
如果一个变量没有设置值的话，就会返回 undefined：
var person; // 值为 undefined(空), 类型是undefined

javascript正则表达式

JavaScript 正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。
语法

/pattern/modifiers;

实例：
var patt = /w3cschool/i

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串