JavaScript 是一种用于网页开发的脚本语言，它主要用于增强网页的交互性和动态性。HTML 用于定义网页的结构，包括文本、图像、链接等内容，而 CSS 用于定义网页的样式，包括颜色、布局、字体等。JavaScript 通过与 HTML 和 CSS 结合使用，可以实现各种动态效果和交互功能，例如表单验证、页面动画、用户界面更新等。
HTML、CSS 和 JavaScript 通常一起使用，共同构建出现代网页的完整体验。HTML 负责网页结构，CSS 负责网页样式，JavaScript 负责网页的行为和交互。三者之间的协作使得开发者能够创建出丰富、动态、交互性强的网页。
一、引入方式
在 HTML 中引入 JavaScript 有两种常见的方式：内部引入和外部引入。
- 内部引入：在 HTML 文件的
<head>或<body>标签中，使用<script>标签来嵌入 JavaScript 代码。示例如下：<!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>// 这里写内部的 JavaScript 代码console.log("Hello, world!");</script> </head> <body><!-- 其他 HTML 内容 --> </body> </html> - 外部引入：将 JavaScript 代码保存在一个独立的 .js 文件中，然后在 HTML 文件中通过
<script>标签引入外部 JavaScript 文件。示例如下：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入外部 JavaScript 文件 --><script src="script.js"></script> </head> <body><!-- 其他 HTML 内容 --> </body> </html>
无论是内部引入还是外部引入，都可以在 HTML 文件中通过 <script> 标签来加载 JavaScript 代码，实现网页的交互和动态效果。
二、基础语法
1. 变量声明
在 JavaScript 中，你可以使用 var、let 或 const 来声明变量。
- 使用
var：在整个函数范围内声明变量，如果在函数外部声明，则为全局变量。 - 使用
let：在块级作用域内声明变量，只在声明的块中有效。 - 使用
const：在块级作用域内声明一个只读的常量。var x = 10; let y = 20; const PI = 3.14;
2. 数据类型
JavaScript 中的数据类型包括基本数据类型和复杂数据类型：
- 基本数据类型：包括数字（Number）、字符串（String）、布尔值（Boolean）、null、undefined。
- 复杂数据类型：包括对象（Object）、数组（Array）、函数（Function）等。
let numberVar = 10; let stringVar = "Hello, world!"; let booleanVar = true; let nullVar = null; let undefinedVar;
3. 运算符
JavaScript 支持多种运算符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符等。
- 算术运算符：
+、-、*、/、%等。 - 赋值运算符：
=、+=、-=、*=、/=等。 - 比较运算符：
==、===、!=、!==、>、<、>=、<=等。 - 逻辑运算符：
&&（与）、||（或）、!（非）等。let a = 10; let b = 5; let c = a + b; // 算术运算符 let d = a > b; // 比较运算符 let e = true && false; // 逻辑运算符
4.对象的创建与使用
在 JavaScript 中，对象是非常核心的数据结构，用于存储各种键值对的集合。对象可以包含多种类型的数据，包括数值、字符串、布尔值、函数、甚至其他对象。
JavaScript 对象可以通过对象字面量的方式直接定义，也可以使用构造函数来创建。
对象字面量：
let person = {firstName: "John",lastName: "Doe",age: 30,greet: function() {console.log("Hello, " + this.firstName + " " + this.lastName);}
};
构造函数：
function Person(firstName, lastName, age) {this.firstName = firstName;this.lastName = lastName;this.age = age;this.greet = function() {console.log("Hello, " + this.firstName + " " + this.lastName);};
}let person = new Person("John", "Doe", 30);
访问对象属性和方法
对象的属性和方法可以通过点符号（.）或方括号（[]）来访问。
// 使用点符号
console.log(person.firstName); // 输出 "John"
person.greet(); // 调用方法，输出 "Hello, John Doe"// 使用方括号
console.log(person['lastName']); // 输出 "Doe"
person['greet'](); // 调用方法，输出 "Hello, John Doe"
修改和添加属性
你可以通过简单的赋值操作来修改对象的属性或添加新的属性。
person.age = 31; // 修改已存在的属性
person.gender = "male"; // 添加新的属性
删除属性
使用 delete 关键字可以删除对象的属性。
delete person.age; // 删除 age 属性
对象的复杂性
对象可以包含其他对象，形成嵌套结构，也可以包含数组和函数。例如：
let person = {name: "John",address: {street: "123 Main St",city: "New York"},hobbies: ["reading", "movies"],greet: function() {console.log("Hello, I'm " + this.name);}
};console.log(person.address.city); // 输出 "New York"
person.greet(); // 输出 "Hello, I'm John"
三、函数的申明与使用
在 JavaScript 中，函数是一种执行特定任务或计算值的代码块。它们是实现代码重用、模块化和抽象化的基本工具。
函数可以通过几种不同的方式声明：
-
函数声明（Function Declaration）：
function sayHello() {console.log("Hello, world!"); } -
函数表达式（Function Expression）：
function sayHello() {console.log("Hello, world!"); } -
箭头函数（Arrow Function） - ES6 引入了箭头函数，提供了一种更简洁的方式来写函数：
function sayHello() {console.log("Hello, world!"); }调用函数
function add(a, b) {return a + b; }let result = add(5, 3); // result 将得到 8 console.log(result);4. 高阶函数
JavaScript 支持高阶函数，即函数可以接受其他函数作为参数或者返回一个函数。
function higherOrderFunction(callback) {console.log("Something before the callback.");callback();console.log("Something after the callback."); }higherOrderFunction(() => {console.log("This is the callback function."); });
![error: ‘return’ with no value, in function returning non-void [-Werror]](http://pic.xiahunao.cn/error: ‘return’ with no value, in function returning non-void [-Werror])
