我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

JavaScript 快速入门教程_现代javascript教程

作者：我家小花儿 | 2024-05-15 01:29:15

踩

现代javascript教程

文章目录

1、JavaScript 简介
2、JavaScript 用法
- 2.1、在 `<head>` 或者 `<body>` 的 JavaScript
- 2.2、外部的 JavaScript
- 2.3、严格检查模式
3、在浏览器中运行
4、JavaScript 变量
5、JavaScript 输出
- 5.1、alert()
- 5.2、innerHTML
- 5.3、document.write()
- 5.4、console.log()
6、JavaScript 数据类型
- 6.1、字符串
- 6.2、数组
- 6.3、对象
7、JavaScript 流程控制
- 7.1、条件语句
- - 7.1.1、if 语句
  - 7.1.2、switch 语句
- 7.2、循环语句
- - 7.2.1、for 循环
  - 7.2.2、while 循环
8、ES6 Map 与 Set
- 8.1、Map 对象
- 8.2、Set 对象
9、Iterator
10、JavaScript 函数
- 10.1、函数定义
- 10.2、变量的作用域
- 10.3、方法
11、内部对象
- 11.1、Date
- 11.2、JSON
- 11.3、AJAX
12、面向对象编程
- 12.1、什么是面向对象
- 12.2、面向对象原型继承
- 12.3、面向对象class继承
- 12.4、原型链
13、JavaScript BOM
- 13.1、window对象中的属性
- 13.2、window对象中的方法
14、JavaScript DOM
- 14.1、获得DOM节点
- 14.2、更新DOM节点
- 14.3、删除DOM节点
- 14.4、插入DOM节点
- 14.5、创建DOM节点

1、JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript的前世今生

JavaScript的起源故事

JavaScript语言的历史

2、JavaScript 用法

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <head> 和 <body> 部分中。

<script>
	alert("我的第一个 JavaScript");  //弹出窗口
</script>
1
2
3

浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript 代码

那些老旧的实例可能会在 <script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

2.1、在 `<head>` 或者 `<body>` 的 JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

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

2.2、外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

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

2.3、严格检查模式

'use strict'; 严格检查模式，预防 JavaScript 的随意性导致产生的一些问题
必须写在 JavaScript 的第一行，建议用 let 声明局部变量

前提：需要支持 ES6 语法

<script>
    'use strict';
    
    /****
    ****
    ****/
</script>
1
2
3
4
5
6
7

3、在浏览器中运行

在浏览器（edge为例）中按下键盘上的 F12 或鼠标右击页面，点击 检查 进入开发者工具。
在这里插入图片描述

也可通过页面右上角菜单栏找到 “更多工具” ，点击 “开发人员工具“ 进入。

在这里插入图片描述

1、Console 窗口调试 JavaScript 代码
打开开发者工具后，我们可以在 Console 窗口调试 JavaScript代码，如下图：
在这里插入图片描述

清空 Console 窗口的内容可以按以下按钮：
在这里插入图片描述

2、snippets 脚本
在浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件：
在这里插入图片描述

如果你没看到 Snippets ，可以点下面板上到 >> 就能看到了。
在这里插入图片描述

点击 Create new snippet 后，会自动创建一个文件，你只需在右侧窗口输写代码，然后按 Command+S（Mac）或 Ctrl+S（Windows 和 Linux）保存更改即可。
保存后，右击文件名，选择 “Run” 执行代码：
在这里插入图片描述

4、JavaScript 变量

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 语句和 JavaScript 变量都对大小写敏感。

声明（创建） JavaScript 变量

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

var carname; //该变量是空的，值为 undefined
1

也可以声明变量时对其赋值：

var carname = "xiebo";
1

多个变量同时声明

一条语句中声明很多变量：

var lastname="Doe", age=30, job="carpenter";
1

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";
1
2
3

但不能同时赋值

var x,y,z=1; //x,y 为 undefined，z 为 1。
1

5、JavaScript 输出

显示数据

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

5.1、alert()

弹出警告框来显示数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        alert("我的第一个 JavaScript"); 
    </script>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

5.2、innerHTML

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
</head>
<body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">我的第一个段落。</p>
    <script>
    	document.getElementById("demo").innerHTML="段落已修改。";
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述

5.3、document.write()

可以将JavaScript直接写在HTML 文档中：

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
</head>
<body>
    <h1>我的第一个 Web 页面</h1>
    <p>我的第一个段落。</p>
    <script>
    	document.write(Date());
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述

5.4、console.log()

如果浏览器支持调试，可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

<!DOCTYPE html>
<html>
<body>
    <script>
        a = 5;
        b = 6;
        c = a + b;
        console.log(c);
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

6、JavaScript 数据类型

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

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

在这里插入图片描述

6.1、字符串

1、正常字符串使用单引号' '或双引号" "包裹
2、注意转义字符 \

\'
\n
\t
\u####	Unicode字符
\x##	Ascii字符
1
2
3
4
5

3、多行字符串编写
用 `` 包裹 (tab键上，Esc键下)

var msg = 
    `hello
	 world
	 你好`
1
2
3
4

4、模板字符串

let name = "xiebo";
let age = 18;

let msg = `hello, ${name}`;
1
2
3
4

5、字符串长度

str.length
1

6、字符串不可变
在这里插入图片描述
7、大小写转换

//方法
str.toUpperCase()	//转大写
str.toLowerCase()	//转小写
1
2
3

8、indexOf()
在这里插入图片描述

9、substring

// [) 包头不包尾
str.substring(i) 	//从第i个索引字符截取到最后一个字符的字符串
str.substring(i, j) //从第i个索引字符截取到第j-1个索引字符的字符串
1
2
3

6.2、数组

数组可以包含任意的数据类型

var arr = [1, 2, 3, 'i', true];
1

1、长度

arr.length
1

可以给arr.length赋值，改变数组的长度，多出来的元素为undefined；如果长度过小，会导致元素丢失。

2、indexOf 通过元素获得在数组中的索引

var arr = [1, 2, 3, 'i', true];
arr.indexOf(2);		//res: 1
1
2

3、slice() 截取数组，并返回一个新数组，类似于 substring

4、push、pop

push(i): 将元素i压入到数组尾部
pop(): 从数组中弹出尾部一个元素
1
2

5、unshift()、shift()

unshift(i): 将元素i压入到数组头部
shift(): 从数组中弹出头部一个元素
1
2

6、排序 sort()
原来数组的值会被修改为排序后的值

在这里插入图片描述
7、元素反转 reverse()
原来数组的值会被修改为反转后的值

在这里插入图片描述
8、concat() 数组拼接
不修改数组，会返回一个新的数组

在这里插入图片描述
9、join 连接符
打印字符串，并用特定字符串连接

在这里插入图片描述
10、多维数组

var arr = [[1, 2], [3, 4], ['A', 'b']];

console.log(arr[1][1]);	// 4
1
2
3

6.3、对象

var 对象名 = {
	属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
};

var person = {
    name: "xiebo",
    age: 19,
    email: "123456"
};
1
2
3
4
5
6
7
8
9
10
11

JavaScript 中所有键都是字符串，值是任意对象。

1、对象赋值

person.name; //"xiebo"

person.name = "xiebulou";

person.name; //"xiebulou"
1
2
3
4
5

2、当使用对象不存在的属性时，不会报错，值为 undefined

person.nnnu;	//undefined
1

3、动态删除属性，通过delete删除对象属性

delete person.name;	//true
1

4、动态添加，直接给新属性赋值即可

person.nnnu = "nnnu";
1

5、判断属性是否存在该对象中

'age' in person //true

//继承的属性也为true
'toString' in person //true
1
2
3
4

6、判断属性是否是自身有的 hasOwnProperty()

person.hasOwnProperty('toString')	//false

person.hasOwnProperty('age')		//true
1
2
3

7、JavaScript 流程控制

7.1、条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

7.1.1、if 语句

if 语句

if (condition)
{
    当条件为 true 时执行的代码
}
1
2
3
4

if…else 语句

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}
1
2
3
4
5
6
7
8

if…else if…else 语句

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}
1
2
3
4
5
6
7
8
9
10
11
12

7.1.2、switch 语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}
1
2
3
4
5
6
7
8
9
10
11

首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行。default 关键词来规定匹配不存在时做的事情。

7.2、循环语句

7.2.1、for 循环

for 循环
语法：

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
1
2
3
4

语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

遍历数字：

for (let i= 0; i < 100; i++){
	console.log(i);
}
1
2
3

遍历数组：

var cars=["BMW","Volvo","Saab","Ford"];
for (var i = 0, l = cars.length; i < l; i++){
	document.write(cars[i] + "<br>");
}
1
2
3
4

for/in 循环
语法：

for (key in object) {
  // code block to be executed
}
1
2
3

遍历对象：

var person = { fname:"Bill", lname:"Gates", age:56 }; 
 
for (x in person)  // x 为属性名
{
    txt += person[x];
}
1
2
3
4
5
6

遍历数组：

var arr = [11, 2, 13, 4, 15];

// num 为索引
for (var num in arr) {
    console.log(arr[num]);
}
1
2
3
4
5
6

forEach 循环

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

var age = [11, 2, 13, 4, 15];

age.forEach(function (value) {
    console.log(value);
})
1
2
3
4
5

7.2.2、while 循环

while 循环
语法：

while (条件)
{
    需要执行的代码
}
1
2
3
4

遍历数字：

var i = 0;
while (i < 5)
{
    console.log(i);
    i++;
}
1
2
3
4
5
6

遍历数组：

var cars = ["BMW","Volvo","Saab","Ford"];
var i = 0;
while (cars[i]) {
	document.write(cars[i] + "<br>");
	i++;
}
1
2
3
4
5
6

do/while 循环

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

语法：

do
{
    需要执行的代码
}
while (条件);
1
2
3
4
5

遍历数字：

var i = 0;
do {
	console.log(i);
    i++;
}
while (i<5)  
1
2
3
4
5
6

8、ES6 Map 与 Set

8.1、Map 对象

由于传统的 JavaScript对象只能用字符串当做键，给开发带来很大限制，ES6增加 Map 数据结构，使得各种类型的值(包括对象)都可以作为键。

Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

Map 对象的方法和属性有：

new Map() – 创建映射。
map.set(key， value) – 为 Map 对象中的键设置值。
map.get(key) – 获取 Map 对象中键的值。
map.has(key) – 如果键存在，则返回 true。
map.delete(key) – 删除由键指定的元素。
map.clear() – 删除 Map 中的所有元素。
map.size – 返回当前元素总数。

let a = new Map([		// a => Map(2) {'name' => 'leo', 'age' => 18}
    ['name','leo'],
    ['age',18]
])

a.set(1,'aaa').set(2,'bbb');	// a => Map(4) {'name' => 'leo', 'age' => 18, 1 => 'aaa', 2 => 'bbb'}
a.get(1);	// 'aaa'
a.has(3);	// false
a.has('name');	// true
a.delete('age'); // true  a => Map(3) {'name' => 'leo', 1 => 'aaa', 2 => 'bbb'}
a.size;	// 3
a.clear();       // a => Map(0) {}
1
2
3
4
5
6
7
8
9
10
11
12

8.2、Set 对象

Set 数据结构类似数组，但所有成员的值唯一。

Set 对象的方法和属性有：

new Set() – 创建新的 Set 对象。
set.add(value) – 向 Set 添加新元素。
set.delete(value) – 删除由其值指定的元素。
set.has(value) – 如果值存在则返回 true。
set.clear() – 从 Set 中删除所有元素。
set.size – 返回元素计数。

let a = new Set();
a.add(1).add(2); // a => Set(2) {1, 2}
a.has(2);        // true
a.has(3);        // false
a.delete(2);     // true  a => Set(1) {1}
a.clear();       // a => Set(0) {}

//数组去重
let a = new Set([1,2,3,3,3,3]); // a => Set(3) {1, 2, 3}
1
2
3
4
5
6
7
8
9

9、Iterator

ES6 新特性

JavaScript原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。

遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。

Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令 for...of 循环，Iterator接口主要供 for...of 消费。

遍历数组：

// for/of 是值， for/in 是下标
var arr = [3, 4, 5]
for (let x of arr) {
    console.log(x);
}
1
2
3
4
5

在这里插入图片描述

遍历 map：

var map = new Map([["tom", 18], ["xiebo", 21]], ["lili", 19]);
for (let x of map) {
    console.log(x);
}
1
2
3
4

在这里插入图片描述

遍历 set：

var set = new Set([5, 6, 7]);
for (let x of set) {
    console.log(x);
}
1
2
3
4

在这里插入图片描述

10、JavaScript 函数

10.1、函数定义

函数定义方式一：

function function_name(arg1, arg2, ...)
{
    // 执行代码
    
    return ...;
}
1
2
3
4
5
6

执行到 return 时代表函数结束，返回结果。
如果没有执行到 return 函数就结束了会返回 undefined。

函数定义方式二：
使用匿名函数定义：

let function_name = function(arg1, arg2, ...) {
    //执行代码
    return ...;
}
1
2
3
4

arguments
arguments 是JavaScript中自带的关键字，代表一个存储传递进来的所有参数的数组。

let x = function(arg) {
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
1
2
3
4
5

在这里插入图片描述

如果想对定义的参数之外的所有参数进行操作的话可以指定 ...arr_name （arr_name为存储这些参数的数组）作为参数。

let x = function(arg1, arg2, ...rest) {
    console.log(rest);
}
1
2
3

在这里插入图片描述

10.2、变量的作用域

JavaScript 局部作用域

变量在函数内声明，变量为局部变量，具有局部作用域。
局部变量：只能在函数内部访问。
函数参数只在函数内起作用，是局部变量。

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}
1
2
3
4
5

JavaScript 全局作用域
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}
1
2
3
4
5
6

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象，所以 window 对象可以调用函数内对局部变量。
**注意：**所有数据变量都属于 window 对象。

//此处可使用 window.carName
 
function myFunction() {
    carName = "Volvo";
}
1
2
3
4
5

10.3、方法

定义方法
方法就是把函数放在对象里，对象只有属性和方法。

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

person.id	//属性
person.fullName()	//方法
1
2
3
4
5
6
7
8
9
10
11

this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

显式函数绑定

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境，即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"
1
2
3
4
5
6
7
8
9
10

11、内部对象

11.1、Date

JavaScript Date 对象参考手册
基本使用

new Date() 创建对象
getFullYear() 年份
getMonth() 月份 (0~11)
getDate() 日
getDay() 星期
getHours() 时
getMinutes() 分
getSeconds() 秒
getTime() 时间戳（返回从 1970 年 1 月 1 日至今的毫秒数。）
toLocaleString() 转换为本地时间

创建Date 对象

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

有四种方式初始化日期：

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
1
2
3
4

11.2、JSON

JSON 教程

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据。

什么是 JSON?

JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言
JSON 易于理解。

语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

JSON对象

{"name":"Runoob", "url":"www.runoob.com"}
1

JSON数组

"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]
1
2
3
4
5

JSON 字符串与 JavaScript 对象的转换

JSON.parse() - 用于将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify() - 用于将 JavaScript 值转换为 JSON 字符串。

var user = {
    name: "xiebo",
    age: 3,
    sex: "男"
};

// 对象转化为JSON字符串
var jsonUser = JSON.stringify(user);
//  {"name": "xiebo", "age": 3, "sex": "男"}


// JSON字符串转化为对象
var obj = JSON.parse('{"name": "xiebo", "age": 3, "sex": "男"}')
// {name: 'xiebo', age: 3, sex: '男'}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

11.3、AJAX

AJAX 教程

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

12、面向对象编程

12.1、什么是面向对象

面向对象不是新的东西，它只是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维护性。

面向对象编程 —— Object Oriented Programming，简称 OOP ，是一种编程开发思想。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。

面向对象的特性：

封装性
继承性
多态性

12.2、面向对象原型继承

大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript 语言的继承不通过 class，而是通过“原型对象”（prototype）实现

构造函数的问题

使用构造函数带来的最大的好处就是创建对象更方便了，但是其本身也存在一个浪费内存的问题：

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = '学生'
  this.sayHello = function () {
    console.log('hello ' + this.name)
  }
}

var p1 = new Person('王五', 18)
var p2 = new Person('李四', 16)

console.log(p1.sayHello === p2.sayHello) // => false
1
2
3
4
5
6
7
8
9
10
11
12
13

上边的代码，从表面看上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type 和 sayHello 都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存，如果实例对象很多，会造成极大的内存浪费。

更好的解决方案： prototype

Javascript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

function Person (name, age) {
  this.name = name
  this.age = age
}

console.log(Person.prototype) // => object

Person.prototype.type = '学生'

Person.prototype.sayName = function () {
  console.log(this.name)
}

var p1 = new Person(...)
var p2 = new Person(...)

console.log(p1.sayName === p2.sayName) // => true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这时所有实例的 type 属性和 sayName() 方法，其实都是同一个内存地址，指向 prototype 对象，因此就提高了运行效率。

构造函数、实例、原型三者之间的关系：
在这里插入图片描述

_proto_

这是每个对象都会有的属性，叫做 __proto__ ，这个属性会指向该对象的原型。

function F () {}
console.log(F.prototype) // => object

F.prototype.sayHi = function () {
  console.log('hi!')
}

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true
1
2
3
4
5
6
7
8
9

12.3、面向对象class继承

ES6 引入了 class 语法，本质还是原型继承

以下两种方式等价：

//使用原型
function Student(name) {
    this.name = name;
}

Student.prototype.hello = function() {
    alert("Hello")
}

//使用 class (更像Java)
class Student {
    constructor(name) {
        this.name = name
    }
    
    hello() {
        alert("Hello")
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var st1 = new Student("xiaohong")
var st2 = new Student("xiaoming")
console.log(st1.hello() == st2.hello()) // => true
1
2
3

12.4、原型链

JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……

如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了Object.prototype的属性。这就是所有对象都有valueOf和toString方法的原因，因为这是从Object.prototype继承的。

那么，Object.prototype对象有没有它的原型呢？回答是Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。

Object.getPrototypeOf(Object.prototype)
// null
1
2

读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overriding）。

注意，一级级向上，在整个原型链上寻找某个属性，对性能是有影响的。所寻找的属性在越上层的原型对象，对性能的影响越大。如果寻找某个不存在的属性，将会遍历整个原型链。

原型链例图：
在这里插入图片描述

13、JavaScript BOM

浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。

window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象。

13.1、window对象中的属性

属性	描述
closed	返回窗口是否已被关闭
defaultStatus	设置或返回窗口状态栏中的默认文本
document	对 Document 对象的只读引用
frames	返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 <frame> 或 <iframe> 标签
history	对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL
innerHeight	返回浏览器窗口的高度，不包含工具栏与滚动条
innerWidth	返回浏览器窗口的宽度，不包含工具栏与滚动条
localStorage	在浏览器中以键值对的形式保存某些数据，保存的数据没有过期时间，会永久保存在浏览器中，直至手动删除
length	返回当前窗口中 <iframe> 框架的数量
location	引用窗口或框架的 Location 对象，该对象中包含当前 URL 的有关信息
name	设置或返回窗口的名称
navigator	对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息
opener	返回对创建此窗口的 window 对象的引用
outerHeight	返回浏览器窗口的完整高度，包含工具栏与滚动条
outerWidth	返回浏览器窗口的完整宽度，包含工具栏与滚动条
pageXOffset	设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
pageYOffset	设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
parent	返回父窗口
screen	对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息
screenLeft	返回浏览器窗口相对于计算机屏幕的 X 坐标
screenTop	返回浏览器窗口相对于计算机屏幕的 Y 坐标
screenX	返回浏览器窗口相对于计算机屏幕的 X 坐标
sessionStorage	在浏览器中以键值对的形式存储一些数据，数据会在关闭浏览器窗口或标签页之后删除
screenY	返回浏览器窗口相对于计算机屏幕的 Y 坐标
self	返回对 window 对象的引用
status	设置窗口状态栏的文本
top	返回最顶层的父窗口

13.2、window对象中的方法

方法	描述
alert()	在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
atob()	解码一个 base-64 编码的字符串
btoa()	创建一个 base-64 编码的字符串
blur()	把键盘焦点从顶层窗口移开
clearInterval()	取消由 setInterval() 方法设置的定时器
clearTimeout()	取消由 setTimeout() 方法设置的定时器
close()	关闭某个浏览器窗口
confirm()	在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup()	创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus()	使一个窗口获得焦点
getSelection()	返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle()	获取指定元素的 CSS 样式
matchMedia()	返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果
moveBy()	将浏览器窗口移动指定的像素
moveTo()	将浏览器窗口移动到一个指定的坐标
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
print()	打印当前窗口的内容
prompt()	显示一个可供用户输入的对话框
resizeBy()	按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo()	将窗口的大小调整到指定的宽度和高度
scroll()	已废弃。您可以使用 scrollTo() 方法来替代
scrollBy()	将窗口的内容滚动指定的像素
scrollTo()	将窗口的内容滚动到指定的坐标
setInterval()	创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout()	创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop()	停止页面载入
postMessage()	安全地实现跨源通信

14、JavaScript DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

在这里插入图片描述

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

14.1、获得DOM节点

想通过 JavaScript，操作 HTML 元素，必须首先找到该元素。

有三种方法实现：

通过标签名找到 HTML 元素 document.getElementsByTagName(tag_name)
通过 id 找到 HTML 元素 document.getElementById(id_name)
通过类名找到 HTML 元素 document.getElementsByClassName(class_name)

（参数要加引号）

<body>
    <h1>标题一</h1>
    <p id="p1">文本1</p>
    <p class="p2">文本2</p>
    
    <script>
    	//对应 css 选择器，获得 DOM 节点
        var h1 = document.getElementsByTagName('h1');	//返回的是数组
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');	//返回的是数组
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

14.2、更新DOM节点

<body>
    <h1>标题一</h1>
    <p id="p1">文本1</p>
    <p class="p2">文本2</p>

    <script>
        //对应 css 选择器，获得 DOM 节点
        var h1 = document.getElementsByTagName('h1');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName('p2');
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

改变文本：

p1.innerText = "123"	//改变文本的值
p2[0].innerHTML = "<strong>456</strong>"  //可以解析HTML文本内容
1
2

效果：
在这里插入图片描述

改变属性：

如需改变 HTML 元素的属性，使用这个语法：

document.getElementById(id).attribute=新属性值
1

修改了 <img> 中的 src 属性

<body>
    <img src="smiley.gif" width="160" height="120">
    <img id="image" src="smiley.gif" width="160" height="120">
    <script>
    	document.getElementById("image").src="landscape.jpg";
    </script>
    <p>脚本将第二个图片修改为 landscape.jpg</p>
</body>
1
2
3
4
5
6
7
8

效果：
在这里插入图片描述

改变 CSS：

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property="新样式"
1

如下对 css 修改：

p1.style.color = "red";
p2[0].style.fontSize = "60px";
1
2

效果：
在这里插入图片描述

14.3、删除DOM节点

删除节点的步骤：先获取父节点，再通过父节点 removeChild(self_name) 删除自己。

<body>
    <div id="father">
        <h1>标题一</h1>
        <p id="p1">文本1</p>
        <p class="p2">文本2</p>
    </div>
    
    <script>
        var son = document.getElementById('p1');
        var father = son.parentElement;	// 获取son节点的父节点
        father.removeChild(son);
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

如下，p1被删除：
在这里插入图片描述

也可用父亲的孩子数组删除，但是删除后节点排列会动态更新：

<body>
    <div id="father">
        <h1>标题一</h1>
        <p id="p1">文本1</p>
        <p class="p2">文本2</p>
    </div>
    
    <script>
        var father = document.getElementById("father");
        father.removeChild(father.children[0]);
        father.removeChild(father.children[1]);
        father.removeChild(father.children[2]);
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后是这样的效果：
在这里插入图片描述
由于运行到 father.removeChild(father.children[2]); 时数组里只有一个节点，所以出现了报错。

14.4、插入DOM节点

<body>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
</body>
1
2
3
4
5
6
7
8

将 js 节点插到 list 节点中：

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);	//追加子元素
</script>
1
2
3
4
5

在这里插入图片描述

向前插入节点

包含目标节点的节点.insertBefore(newNode, targetNode)

<body>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
    
    <script>
        var js = document.getElementById('js');
        var ee = document.getElementById('ee');
        var list = document.getElementById('list');
        list.insertBefore(js, ee);
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

14.5、创建DOM节点

可以通过 document.createElement(tag_name) 创建一个标签。

创建一个新标签实现插入：

<body>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
    
    <script>
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        
        var newP = document.createElement('p');
        newP.id = 'newP';
        newP.innerHTML = "hello,world";
        js.append(newP);
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

还可以使用 setAttribute(属性,属性名) 来为创建的节点设置属性：

// 创建一个Style标签
var myStyle = document.createElement('style'); // 创建一个空style标签
myStyle.setAttribute('type', 'text/css');	//设置属性
myStyle.innerHTML = 'body {background-color: chartreuse;}'; //设置标签内容
1
2
3
4

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/570987

JavaScript 快速入门教程_现代javascript教程

文章目录

1、JavaScript 简介

2、JavaScript 用法

2.1、在 <head> 或者 <body> 的 JavaScript

2.2、外部的 JavaScript

2.3、严格检查模式

3、在浏览器中运行

4、JavaScript 变量

5、JavaScript 输出

5.1、alert()

5.2、innerHTML

5.3、document.write()

5.4、console.log()

6、JavaScript 数据类型

6.1、字符串

6.2、数组

6.3、对象

7、JavaScript 流程控制

7.1、条件语句

7.1.1、if 语句

7.1.2、switch 语句

7.2、循环语句

7.2.1、for 循环

7.2.2、while 循环

8、ES6 Map 与 Set

8.1、Map 对象

8.2、Set 对象

9、Iterator

10、JavaScript 函数

10.1、函数定义

10.2、变量的作用域

10.3、方法

11、内部对象

11.1、Date

11.2、JSON

11.3、AJAX

12、面向对象编程

12.1、什么是面向对象

12.2、面向对象原型继承

12.3、面向对象class继承

12.4、原型链

13、JavaScript BOM

13.1、window对象中的属性

13.2、window对象中的方法

14、JavaScript DOM

14.1、获得DOM节点

14.2、更新DOM节点

14.3、删除DOM节点

14.4、插入DOM节点

14.5、创建DOM节点

2.1、在 `<head>` 或者 `<body>` 的 JavaScript