JavaScript基础学习总结

我就是我 2021-12-07 10:33 408阅读 0赞

### 文章目录 ###

*  JavaScript介绍
 *   *  JavaScript的作用
 *  JavaScript的使用
 *  JavaScript 显示方案
 *   *  使用 innerHTML
     *  使用 document.write()
     *  使用 window.alert()
     *  使用 console.log()
 *  JavaScript 语法
 *   *  JavaScript 变量
     *  数据类型
     *  JavaScript 比较运算符
     *  函数
     *   *  函数的定义
         *  自调用函数
         *  函数是对象
     *  JavaScript 对象
     *   *  访问对象属性
         *  访问对象方法
     *  JavaScript 事件
     *  字符串
     *   *  字符串方法和属性
         *  字符串长度
         *  查找字符串中的字符串
         *  检索字符串中的字符串
     *  数组
     *   *  添加数组元素
         *  如何识别数组
         *  删除元素和添加新元素
         *  数组排序
     *  this
     *  JavaScript 对象
     *   *  JavaScript 属性

--------------------

# JavaScript介绍 #

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

## JavaScript的作用 ##

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

# JavaScript的使用 #

在 HTML 中，JavaScript 代码必须位于 `<script>` 与 `</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) 属性中设置脚本的名称：  
例：

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

# 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 事件：

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

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

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

在下面的例子中，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"];