前端编程艺术（3）---JavaScript

沥川同学

已于 2024-10-05 17:22:48 修改

阅读量599

点赞数 16

文章标签： javascript node.js 前端

于 2024-10-05 17:21:58 首次发布

本文链接：https://blog.csdn.net/lys20221113242/article/details/142715983

版权

1.JavaScript

JavaScript是一种脚本编程语言，通常用于为网页增加交互性和动态效果。它是一种高级语言，可以在客户端（即网页浏览器）和服务器端运行。JavaScript的设计目标是让网页和用户能够交互，动态地改变内容、样式和行为。

JavaScript的语法和结构与其他编程语言，如C语言和Java类似，易于学习和理解。它不需要编译，可以直接在网页中嵌入使用，因此被广泛应用于网页开发。

JavaScript可以用来操作网页中的HTML元素、处理用户输入、发送网络请求、验证表单、创建动画效果等。它还支持事件处理，可以对按钮点击、鼠标移动、键盘输入等用户操作进行响应。

JavaScript的特点包括：

强大的交互性：通过JavaScript，可以在用户与网页之间实现丰富的交互体验。
跨平台性：JavaScript可以在各种操作系统和浏览器中运行，无需额外配置。
轻量级：JavaScript的代码通常很小，加载速度快，不会给网页带来过多的负担。
丰富的库和框架：JavaScript拥有许多开源的库和框架，可以帮助开发人员更高效地开发和维护网页。

1.输出

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 在 head 部分添加动态内容
        document.write("标题");
    </script>
</head>
<body>
    <h1 id="h1">JavaScript</h1>
    <script>
        // 在 body 部分添加动态内容
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落</p>");
        document.getElementById("h1").innerHTML="前端编程艺术"
        window.alert(666);
        console.log(666)
    </script>
    <script src="1.js"></script>
</body>
</html>

2.变量和数据类型

在JavaScript中，变量用于存储数据值。在声明变量之前，应先使用关键字var、let或const来指定变量的作用域和特性。

JavaScript中的数据类型包括：

基本数据类型：

字符串（String）：用于表示文本数据，可以使用单引号或双引号包裹起来。
数字（Number）：用于表示数值，包括整数和浮点数。
布尔值（Boolean）：表示真（true）或假（false）。
空值（Null）：表示一个空值或无效值。
未定义（Undefined）：表示一个未被赋值的变量。

引用数据类型：

对象（Object）：表示抽象的数据集合，可以包含多个键值对。
数组（Array）：表示一组数据的集合，可以包含多个项，每个项可以是任意数据类型。
函数（Function）：是一段可重复执行的代码块，可以通过函数名来调用。

变量的赋值可以通过等号（=）来实现，例如：

var name = 'John';
let age = 25;
const PI = 3.14;

在JavaScript中，变量的数据类型可以通过typeof操作符来检查。

console.log(typeof name); // 输出 "string"
console.log(typeof age); // 输出 "number"
console.log(typeof PI); // 输出 "number"

JavaScript中的变量和数据类型是动态的，意味着同一个变量可以在不同的时候保存不同的数据类型。例如：

var x = 5;
console.log(typeof x); // 输出 "number"

x = 'Hello';
console.log(typeof x); // 输出 "string"

3.运算符

在JavaScript中，运算符用于执行各种操作，例如数学计算、逻辑判断和字符串连接等。下面是一些常见的JavaScript运算符：

算术运算符：

加法（+）：将两个值相加。
减法（-）：将一个值减去另一个值。
乘法（*）：将两个值相乘。
除法（/）：将一个值除以另一个值。
取余（%）：返回除法的余数。
自增（++）：将变量的值增加1。
自减（--）：将变量的值减少1。

赋值运算符：

简单赋值（=）：将值赋给变量。
加等于（+=）：将右侧的值加到变量上。
减等于（-=）：将右侧的值减去变量。
乘等于（*=）：将右侧的值乘以变量。
除等于（/=）：将变量除以右侧的值。
取余等于（%=）：将变量取余右侧的值。

比较运算符：

等于（==）：检查两个值是否相等。
不等于（!=）：检查两个值是否不相等。
全等（===）：检查两个值是否严格相等。
不全等（!==）：检查两个值是否不严格相等。
大于（>）：检查左侧的值是否大于右侧的值。
大于等于（>=）：检查左侧的值是否大于或等于右侧的值。
小于（<）：检查左侧的值是否小于右侧的值。
小于等于（<=）：检查左侧的值是否小于或等于右侧的值。

逻辑运算符：

与（&&）：如果操作数都为真，则返回真。
或（||）：如果其中一个操作数为真，则返回真。
非（！）：用于对操作数的逻辑非运算。

字符串运算符：

加号（+）：用于连接两个字符串。
赋值运算符加号（+=）：将右侧的字符串添加到左侧的字符串。

4.数组

在JavaScript中，数组是一种用于存储多个值的有序集合。数组可以包含任意类型的数据，包括数字、字符串、布尔值和其他数组等。下面是一些关于JavaScript数组的重要特性和操作：

创建数组：可以使用数组字面量（[ ]）或Array构造函数来创建数组。例如：

let arr1 = [1, 2, 3]; // 使用数组字面量创建数组
let arr2 = new Array(4, 5, 6); // 使用Array构造函数创建数组

访问数组元素：可以使用索引来访问数组元素，数组的索引从0开始。例如：

let arr = [1, 2, 3];
console.log(arr[0]); // 输出1
console.log(arr[1]); // 输出2
console.log(arr[2]); // 输出3

修改数组元素：可以通过索引来修改数组元素的值。例如：

let arr = [1, 2, 3];
arr[1] = 4;
console.log(arr); // 输出[1, 4, 3]

数组长度：可以使用length属性来获取数组的长度。例如：

let arr = [1, 2, 3];
console.log(arr.length); // 输出3

数组方法： JavaScript提供了许多内置的数组方法，用于对数组进行操作。一些常用的数组方法包括：

push()：向数组末尾添加一个或多个元素。
pop()：从数组末尾移除最后一个元素。
shift()：从数组开头移除第一个元素。
unshift()：向数组开头添加一个或多个元素。
splice()：删除、替换或添加元素。
slice()：截取数组的一部分。
concat()：合并两个或多个数组。
indexOf()：返回指定元素的索引。
sort()：对数组进行排序。
reverse()：颠倒数组中元素的顺序。
forEach()：遍历数组并对每个元素执行特定的操作。

5.函数

在JavaScript中，函数是一段可重复使用的代码块，用于执行特定的任务或计算。函数有多种作用，可以接受参数，执行一些操作，并返回一个值。以下是JavaScript函数的一些重要特性和用法：

定义函数：可以使用function关键字来定义函数。函数有一个名称和一对圆括号，括号内可以包含参数列表。函数体是一对花括号之间的代码块。例如：

function greet(name) {
  console.log("Hello, " + name + "!");
}

调用函数：可以使用函数名和传递的参数来调用函数，以便执行其中的代码。例如：

greet("Alice"); // 输出 "Hello, Alice!"
greet("Bob"); // 输出 "Hello, Bob!"

函数参数：函数可以接受零个或多个参数，这些参数可以在函数被调用时传递给它。参数可以在函数体内使用，并根据需要进行操作。例如：

function add(num1, num2) {
  return num1 + num2;
}

let result = add(5, 3);
console.log(result); // 输出 8

函数返回值：函数可以使用return语句来返回一个值，该值可以在函数被调用时被调用方接收并使用。如果函数没有明确指定返回值，则默认返回undefined。例如：

function multiply(num1, num2) {
  return num1 * num2;
}

let result = multiply(4, 5);
console.log(result); // 输出 20

函数表达式：除了使用function关键字定义函数外，还可以使用函数表达式创建匿名函数。函数表达式没有名称，并可以直接赋值给变量。例如：

let greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("Alice"); // 输出 "Hello, Alice!"

高阶函数：在JavaScript中，函数还可以作为参数传递给其他函数，或者作为其他函数的返回值。这种能力使得JavaScript支持高阶函数的概念，可以更加灵活地组织和操作代码。
内置函数： JavaScript还提供了许多内置的函数，用于执行各种常见的任务，比如字符串操作、数学计算、数组操作等。可以直接调用这些函数来完成特定的操作。

箭头函数是ES6（ECMAScript 2015）中引入的一种新的函数语法，它提供了一种更简洁的方式来定义函数。箭头函数通常用于匿名函数或回调函数的简写形式。

以下是箭头函数的一些重要特点：

箭头函数的语法：箭头函数使用箭头（=>）来分隔参数和函数体。它没有function关键字，也没有自己的this、arguments和super绑定。例如：

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
let add = (a, b) => a + b;

箭头函数的简写形式：当函数体只包含一个表达式时，可以省略花括号和return关键字。该表达式的结果将作为函数的返回值。例如：

// 传统函数
function multiply(a, b) {
  return a * b;
}

// 箭头函数
let multiply = (a, b) => a * b;

箭头函数没有自己的this绑定：箭头函数没有自己的this值，它从上下文中继承this值。这意味着箭头函数中的this始终指向定义它时的对象，而不是调用它的对象。例如：

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // 这里的this指向Person对象
    console.log(this.age);
  }, 1000);
}

let person = new Person();

箭头函数没有arguments绑定：与this类似，箭头函数也没有自己的arguments对象。如果需要访问函数的参数，可以使用rest参数（...）或使用展开运算符（...）来处理参数。例如：

let sum = (...args) => {
  let total = 0;
  for (let arg of args) {
    total += arg;
  }
  return total;
};

console.log(sum(1, 2, 3)); // 输出 6

6.面向对象

JavaScript是一门面向对象的编程语言，它提供了一些内置的机制来支持面向对象编程。

JavaScript中的面向对象编程主要基于以下几个关键概念：

对象：对象是JavaScript中的基本构建块，它封装了数据和行为。对象可以具有属性和方法。属性表示对象的状态或数据，而方法表示对象的行为或操作。
类：类定义了一组共享相同属性和方法的对象的蓝图。类是一种创建对象的模板或原型。在JavaScript中，类是通过构造函数和原型来实现的。
构造函数：构造函数是一个特殊的函数，用于创建和初始化一个对象。构造函数通过使用new关键字来实例化一个对象。构造函数可以定义对象的属性和方法。
原型：原型是一个对象，它包含用于共享和继承属性和方法的对象。每个JavaScript对象都有一个原型，它可以是其他对象或null。当访问对象的属性或方法时，如果对象自身没有该属性或方法，JavaScript会沿着原型链向上查找。
继承：继承是一种机制，通过它一个对象可以从另一个对象继承属性和方法。JavaScript使用原型链来实现继承。子类可以通过将父类的原型设置为自己的原型来继承父类的属性和方法。

下面是一个简单的示例，展示了JavaScript中的面向对象编程的基本用法：

// 定义一个类
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在类的原型上添加方法
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

// 创建对象实例
let person1 = new Person("Alice", 25);
let person2 = new Person("Bob", 30);

// 调用对象的方法
person1.sayHello(); // 输出：Hello, my name is Alice
person2.sayHello(); // 输出：Hello, my name is Bob

继承和多态是面向对象编程中两个重要的概念。

继承（Inheritance）：继承是一种机制，通过它一个对象（称为子类或派生类）可以从另一个对象（称为父类或基类）继承属性和方法。继承可以使代码更加可复用和可扩展。子类可以使用父类的属性和方法，也可以根据需要重写或扩展父类的方法。

在JavaScript中，继承通过原型链来实现。子类的原型被设置为父类的实例，从而继承了父类的属性和方法。子类可以通过访问父类的原型来调用父类的方法。

下面是一个简单的继承示例：

// 定义一个父类
function Animal(name) {
  this.name = name;
}

// 父类的方法
Animal.prototype.speak = function() {
  console.log(this.name + " makes a sound.");
};

// 定义一个子类
function Dog(name) {
  Animal.call(this, name); // 调用父类的构造函数
}

// 子类继承父类的原型
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 子类的方法
Dog.prototype.speak = function() {
  console.log(this.name + " barks.");
};

// 创建对象实例
let animal = new Animal("Animal");
let dog = new Dog("Dog");

// 调用对象的方法
animal.speak(); // 输出：Animal makes a sound.
dog.speak(); // 输出：Dog barks.

在上面的示例中，我们定义了一个父类Animal和一个子类Dog。子类Dog通过调用父类的构造函数Animal.call(this, name)来继承了父类的属性name。然后，我们使用Object.create()方法将子类的原型设置为父类的实例，从而实现了继承。子类Dog可以重写父类的方法speak()，并在这个方法内部添加额外的行为。

多态（Polymorphism）：多态是指同一个操作可以有不同的表现形式。在面向对象编程中，多态性允许在不同的对象上执行相同的操作，产生不同的结果。多态性提高了代码的灵活性和可扩展性。

在JavaScript中，多态性通过对象的动态绑定来实现。不同的对象可以对同一个方法有不同的实现，当调用这个方法时，根据对象的类型确定要执行哪个实现。

下面是一个简单的多态示例：

// 定义一个父类
function Animal(name) {
  this.name = name;
}

// 父类的方法
Animal.prototype.speak = function() {
  console.log(this.name + " makes a sound.");
};

// 定义一个子类
function Dog(name) {
  Animal.call(this, name);
}

// 子类继承父类的原型
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 子类重写父类的方法
Dog.prototype.speak = function() {
  console.log(this.name + " barks.");
};

// 多态性示例
let animal = new Animal("Animal");
let dog = new Dog("Dog");

function makeSound(animalObj) {
  animalObj.speak();
}

makeSound(animal); // 输出：Animal makes a sound.
makeSound(dog); // 输出：Dog barks.

在上面的示例中，我们定义了一个函数makeSound()，它接受一个Animal对象作为参数，并调用对象的speak()方法。根据传入的对象的类型，调用方法的实现不同，产生不同的结果。当我们分别将父类Animal对象和子类Dog对象传递给makeSound()函数时，实现的方法也不同，分别输出不同的结果。

7.ES6面向对象

在ES6 (ECMAScript 2015) 中，引入了一些新的语法和特性，使得面向对象编程更加简洁和易于理解。下面是ES6中面向对象编程的一些特性：

类（Class）：ES6引入了类的概念，可以使用class关键字定义一个类。类可以包含构造函数、属性和方法，通过实例化类可以创建对象。

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + " makes a sound.");
  }
}

let animal = new Animal("Animal");
animal.speak(); // 输出：Animal makes a sound.

继承：ES6中的类支持继承，可以使用extends关键字继承另一个类的属性和方法。子类可以调用父类的构造函数和方法，并可以根据需要重写或扩展父类的方法。

class Dog extends Animal {
  constructor(name) {
    super(name); // 调用父类的构造函数
  }
  
  speak() {
    console.log(this.name + " barks.");
  }
}

let dog = new Dog("Dog");
dog.speak(); // 输出：Dog barks.

super关键字：super关键字用于调用父类的构造函数或方法。在子类的构造函数中使用super关键字调用父类的构造函数，并可以传递参数。在子类的方法中使用super关键字调用父类的方法。
静态方法（Static Method）：ES6引入了静态方法的概念，可以使用static关键字定义一个静态方法。静态方法是属于类而不是实例的，通过类本身调用，而不是实例。

class MathUtils {
  static sum(a, b) {
    return a + b;
  }
}

console.log(MathUtils.sum(2, 3)); // 输出：5

Getter 和 Setter：ES6中可以使用get和set关键字定义属性的访问方法。get方法用于获取属性的值，set方法用于设置属性的值。

class Rectangle {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }
  
  get area() {
    return this._width * this._height;
  }
  
  set width(value) {
    this._width = value;
  }
  
  set height(value) {
    this._height = value;
  }
}

let rectangle = new Rectangle(5, 7);
console.log(rectangle.area); // 输出：35

rectangle.width = 10;
console.log(rectangle.area); // 输出：70

2.BOM

BOM（Browser Object Model）是浏览器对象模型的简称，它提供了一组用于操作浏览器窗口和页面内容的对象和方法。BOM是JavaScript与浏览器交互的接口，通过BOM可以获取和操作浏览器窗口、导航、历史记录、页面内容等。

BOM对象包括以下重要的对象：

window对象：window对象是BOM的顶层对象，表示整个浏览器窗口。它提供了一系列方法和属性，用于操作窗口的大小、位置、打开新窗口、关闭窗口等。

// 打开新窗口
window.open('https://www.google.com', '_blank');

// 关闭当前窗口
window.close();

// 获取当前窗口的宽度和高度
let width = window.innerWidth;
let height = window.innerHeight;

location对象：location对象用于获取和设置当前窗口的URL信息。它提供了一些属性和方法，例如获取URL的协议、主机名、路径名、查询参数等。

// 获取当前URL的主机名
let hostname = location.hostname;

// 重定向到新的URL
location.href = 'https://www.google.com';

history对象：history对象用于操作浏览器的历史记录。它提供了一些方法，例如前进、后退、跳转到指定页面等。

// 前进一步
history.forward();

// 后退一步
history.back();

// 跳转到历史记录中的某个页面
history.go(-2);

navigator对象：navigator对象用于获取浏览器的信息。它提供了一些属性，例如浏览器的名称、版本号、操作系统等。

// 获取浏览器的名称
let browserName = navigator.appName;

// 获取浏览器的用户代理字符串
let userAgent = navigator.userAgent;

1.document对象

document对象是BOM中的一部分，它表示当前HTML文档，并提供了一系列方法和属性，用于操作和操纵HTML文档的内容、结构和样式。

常见的document对象的属性和方法包括：

getElementById(): 通过元素的id属性获取对应的DOM元素。

let element = document.getElementById('myElement');

getElementsByClassName(): 通过元素的class属性获取一组DOM元素。

let elements = document.getElementsByClassName('myClass');

getElementsByTagName(): 通过元素的标签名获取一组DOM元素。

let elements = document.getElementsByTagName('div');

querySelector(): 通过CSS选择器获取匹配的第一个DOM元素。

let element = document.querySelector('.myClass');

querySelectorAll(): 通过CSS选择器获取匹配的所有DOM元素。

let elements = document.querySelectorAll('.myClass');

createElement(): 创建一个指定的HTML元素。

let element = document.createElement('div');

appendChild(): 在指定元素的子节点列表末尾添加新的子节点。

let parent = document.getElementById('parentDiv');
parent.appendChild(element);

removeChild(): 从指定元素的子节点列表中移除一个子节点。

let parent = document.getElementById('parentDiv');
parent.removeChild(element);

innerHTML: 获取或设置元素的HTML内容。

let element = document.getElementById('myElement');
let htmlContent = element.innerHTML;
element.innerHTML = '<span>New content</span>';

style: 获取或设置元素的样式属性。

let element = document.getElementById('myElement');
element.style.color = 'red';

3.DOM

DOM（Document Object Model，文档对象模型）是一种用于表示和操作HTML、XML文档的API（Application Programming Interface，应用程序编程接口）。

DOM将HTML、XML文档表示为一个由节点（Node）组成的树状结构。每个节点都代表文档中的一个部分，例如元素、属性、文本等。节点之间通过父子关系和兄弟关系相互连接，形成了文档的结构。

常见的DOM节点类型包括：

元素节点（Element Node）：表示HTML或XML文档中的元素，例如<div>、<p>等。
文本节点（Text Node）：表示HTML或XML文档中的文本内容。
属性节点（Attribute Node）：表示HTML或XML文档中元素的属性，例如id、class等。
注释节点（Comment Node）：表示HTML或XML文档中的注释内容。

通过DOM，我们可以使用一些API来访问和操作这些节点，例如：

getElementById(): 通过元素的id属性获取对应的DOM元素。
getElementsByClassName(): 通过元素的class属性获取一组DOM元素。
getElementsByTagName(): 通过元素的标签名获取一组DOM元素。
querySelector(): 通过CSS选择器获取匹配的第一个DOM元素。
querySelectorAll(): 通过CSS选择器获取匹配的所有DOM元素。
createElement(): 创建一个指定的HTML元素。
appendChild(): 在指定元素的子节点列表末尾添加新的子节点。
removeChild(): 从指定元素的子节点列表中移除一个子节点。
innerHTML: 获取或设置元素的HTML内容。
style: 获取或设置元素的样式属性。

通过这些API，我们可以动态地操作和修改HTML、XML文档的结构、内容和样式，实现动态页面的效果和交互。

4.JSON

JSON（JavaScript Object Notation，JavaScript对象表示法）是一种轻量级的数据交换格式。它是基于JavaScript的一个子集，可以用来表示结构化数据。

JSON使用键值对的方式来表示数据。一个JSON对象由一对花括号包围，键值对之间使用逗号分隔。键是一个字符串，值可以是字符串、数字、布尔值、数组、对象或null。

下面是一个简单的JSON对象的例子：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "hobbies": ["reading", "painting", "playing guitar"],
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "country": "USA"
  }
}

在上面的例子中，键是字符串，值可以是字符串、数字、布尔值、数组、对象或null。键值对之间使用逗号分隔，对象的键和值之间使用冒号分隔。

在JavaScript中，可以使用JSON对象来处理JSON数据。JSON对象提供了两个核心方法来处理JSON数据：JSON.parse()和JSON.stringify()。

JSON.parse(): 该方法用于将JSON字符串解析为JavaScript对象。
```
var jsonStr = '{"name": "John", "age": 30, "isStudent": false}';
var jsonObj = JSON.parse(jsonStr);

console.log(jsonObj.name); // 输出: John
console.log(jsonObj.age); // 输出: 30
console.log(jsonObj.isStudent); // 输出: false
```
在上面的例子中，JSON.parse()将JSON字符串解析为JavaScript对象，并存储在jsonObj变量中。我们可以通过访问对象的属性来获取相应的值。
JSON.stringify(): 该方法将JavaScript对象转换为JSON字符串。
```
var obj = {
  name: "John",
  age: 30,
  isStudent: false
};

var jsonString = JSON.stringify(obj);

console.log(jsonString); // 输出: {"name":"John","age":30,"isStudent":false}
```
在上面的例子中，JSON.stringify()将JavaScript对象obj转换为JSON字符串，并存储在jsonString变量中。