JavaScript基础学习总结

---

JavaScript介绍

JavaScript 是属于 HTML 和 Web 的编程语言。HTML 定义网页的内容，CSS 规定网页的布局，JavaScript 对网页行为进行编程。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript的作用

• 能够改变 HTML 内容
• 能够改变 HTML 属性
• 能够改变 HTML 样式 (CSS)
• 能够隐藏 HTML 元素
• 能够显示 HTML 元素

JavaScript的使用

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
例：

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，可以在 HTML 文档中放置任意数量的脚本。
例：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
脚本可放置与外部文件中：

外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：
例：

<script src="myScript.js"></script>

可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
本例使用完整的 URL 来链接至脚本：

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

实例：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html> 

使用 document.write()

出于测试目的，使用 document.write() 比较方便：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html> 

在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

使用 window.alert()

使用警告框来显示数据：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html> 

使用 console.log()

在浏览器中，可使用 console.log() 方法来显示数据。
通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”
实例：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript 语法

JavaScript 的语法跟C语言，java，python等都有相似处，这里我只简单的介绍一下相关语法的使用。

JavaScript 变量

JavaScript 是弱类型的语言，定义变量时跟python有些相似，不用声明变量类型。
JavaScript 使用 var 关键词来声明变量。

在本例中，x 被定义为变量。然后，x 被赋的值是 7：

var x;

x = 7;

在JavaScript中，声明变量时若没有对变量进行初始化，它的值将是 undefined。
在 JavaScript 中，没有值的变量，其值是 undefined。

var carName;

变量 carName 在这条语句执行后的值是 undefined。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

person = undefined;          // 值是 undefined，类型是 undefined

空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。

数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 

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

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

如果对一个数和一个字符串相加，结果是字符串级联：

var x = 10;
var y = "20";
var z = x + y;           // z 将是 1020（一个字符串）

JavaScript 比较运算符

在JavaScript中 == 和 === 两个比较运算符是不一样的。

函数

函数的定义

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

实例

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}

JavaScript中函数的定义不需要指明返回值类型。

函数中的代码将在其他代码调用该函数时执行：

• 当事件发生时（当用户点击按钮时）
• 当 JavaScript 代码调用时
• 自动的（自调用）

JavaScript 函数也可以使用表达式来定义。
函数表达式可以在变量中存储：

var x = function (a, b) {return a * b};

在变量中保存函数表达式之后，此变量可用作函数：

var x = function (a, b) {return a * b};
var z = x(4, 3);

自调用函数

函数表达式可以作为“自调用”。
自调用表达式是自动被调用（开始）的，在不进行调用的情况下。
函数表达式会自动执行，假如表达式后面跟着 ()。
需要在函数周围添加括号，以指示它是一个函数表达式：

(function () {
    var x = "Hello!!";      //我会调用我自己
})();

上面的例子可以在不调用的情况下自动调用函数。

函数是对象

JavaScript 中的 typeof 运算符会为函数返回 “function”。
但是最好是把 JavaScript 函数描述为对象。
JavaScript 函数都有属性和方法。
arguments.length 会返回函数被调用时收到的参数数目：

function myFunction(a, b) {
    return arguments.length;
}

toString() 方法以字符串返回函数：

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

var txt = myFunction.toString();

JavaScript 对象

JavaScript 对象中的名称:值对被称为属性。
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。

实例：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

访问对象属性

能够以两种方式访问属性：
objectName.propertyName 或 objectName[“propertyName”]
实例：

person.lastName;

person["lastName"];

访问对象方法

通过如下语法访问对象方法：objectName.methodName()
实例：name = person.fullName();

JavaScript 事件

HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子：

• HTML 网页完成加载
• HTML 输入字段被修改
• HTML 按钮被点击
  通常，当事件发生时，用户会希望做某件事。
  JavaScript 允许在事件被侦测到时执行代码。
  通过 JavaScript 代码，HTML 允许向 HTML 元素添加事件处理程序。

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

• 每当页面加载时应该做的事情
• 当页面被关闭时应该做的事情
• 当用户点击按钮时应该被执行的动作
• 当用户输入数据时应该被验证的内容
• 等等

在下面的例子中，onclick 属性（以及代码）被添加到 <button> 元素：

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

字符串

JavaScript 字符串是引号中的零个或多个字符。

var x = "Bill Gates"

字符串方法和属性

原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）。

但是通过 JavaScript，方法和属性也可用于原始值，因为在执行方法和属性时 JavaScript 将原始值视为对象。

字符串长度

length 属性返回字符串的长度：
实例：

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

查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
实例：

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");

检索字符串中的字符串

search() 方法搜索特定值的字符串，并返回匹配的位置：

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");

indexOf() 与 search()区别在于：

• search() 方法无法设置第二个开始位置参数。
• indexOf() 方法无法设置更强大的搜索值（正则表达式）。

数组

在 JavaScript中，数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。
所有数组也有属性和方法。

var x = cars.length;   // length 属性返回元素的数量
var y = cars.sort();   // sort() 方法对数组进行排序

添加数组元素

向数组添加新元素的最佳方法是使用 push() 方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // 向 fruits 添加一个新元素 (Lemon)

也可以使用 length 属性向数组添加新元素，即通过下标直接访问添加：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

如何识别数组

常见的问题是：我如何知晓某个变量是否是数组？
问题在于 JavaScript 运算符 typeof 返回 “object”。
为了解决这个问题，ECMAScript 5 定义了新方法 Array.isArray()：

Array.isArray(fruits);     // 返回 true

删除元素和添加新元素

pop() 方法从数组中删除最后一个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

push() 方法（在数组结尾处）向数组添加一个新的元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度。

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

数组排序

sort() 方法以字母顺序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

reverse() 方法可以反转数组中的元素。
默认地，sort() 函数按照字符串顺序对值进行排序。
该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。
不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。
正因如此，sort() 方法在对数值排序时会产生不正确的结果。
我们通过一个比值函数来修正此问题：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 

使用相同的技巧对数组进行降序排序：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a}); 

this

JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：

• 在方法中，this 指的是所有者对象。
• 单独的情况下，this 指的是全局对象。
• 在函数中，this 指的是全局对象。
• 在函数中，严格模式下，this 是 undefined。
• 在事件中，this 指的是接收事件的元素。

JavaScript 对象

有不同的方法来创建对象：

• 定义和创建单个对象，使用对象文字。
• 定义和创建单个对象，通过关键词 new。
• 定义对象构造器，然后创建构造类型的对象。

在 ECMAScript 5 中，也可以通过函数 Object.create() 来创建对象。

创建对象最简单的方法：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

使用 JavaScript 关键词 new创建对象：
下面的例子也创建了带有四个属性的新的 JavaScript 对象：

var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue"; 

通过对象构造器创建：
例如：
首先定义构造器

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

通过 new 关键词调用构造器函数可以创建对象：

var myFather = new Person("Bill", "Gates", 62, "blue");

JavaScript 提供用于原始对象的构造器：

var x1 = new Object();    // 一个新的 Object 对象
var x2 = new String();    // 一个新的 String 对象
var x3 = new Number();    // 一个新的 Number 对象
var x4 = new Boolean();   // 一个新的 Boolean 对象
var x5 = new Array();     // 一个新的 Array 对象
var x6 = new RegExp();    // 一个新的 RegExp 对象
var x7 = new Function();  // 一个新的 Function 对象
var x8 = new Date();      // 一个新的 Date 对象

JavaScript 属性

访问对象属性的语法是：

objectName.property           // person.age

或者：

objectName["property"]       // person["age"]

或者：

objectName[expression]       // x = "age"; person[x]

添加新属性：
假设 person 对象已存在，那么可以直接为其添加新属性：

person.nationality = "English";

删除属性
delete 关键词从对象中删除属性：

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
delete person.age;   // 或 delete person["age"];