当前位置：首页 > news >正文

JS基础快速入门（详细版）

news 2025/7/15 7:05:09

本文详细介绍JS基础快速入门相关内容。

本文目录

- - 1. JavaScript 命令书写方式
  - 2. JavaScript 中变量
  - 3. JavaScript 中数据类型
  - 4. JavaScript 中特殊值
  - 5. JavaScript 中控制语句和循环语句
  - 6. JavaScript 中数组
  - 7. JavaScript 中函数
  - 8. JavaScript 中 DOM 对象与 document 对象
  - 9. DOM 对象定位
  - 10. DOM 对象对标签管理

1. JavaScript 命令书写方式

内联脚本：直接将 JavaScript 代码写在 HTML 文件的 <script> 标签内。常用于简单的交互效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联脚本</title>
</head>
<body><button id="btn">点击我</button><script>const btn = document.getElementById('btn');btn.addEventListener('click', function() {alert('你点击了按钮');});</script>
</body>
</html>

外部脚本：将 JavaScript 代码写在独立的 .js 文件中，然后在 HTML 文件中通过 <script> 标签的 src 属性引入。适合大型项目，便于代码管理和复用。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部脚本</title>
</head>
<body><button id="btn">点击我</button><script src="script.js"></script>
</body>
</html>

// script.js
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {alert('你点击了按钮');
});

2. JavaScript 中变量

声明方式：使用 var、let 和 const 声明变量。var 是 ES5 及以前的声明方式，存在变量提升问题；let 和 const 是 ES6 引入的，let 用于声明可变变量，const 用于声明常量。

// var 声明
var productName = '智能手机';// let 声明
let price = 2999;// const 声明
const discount = 0.8;

变量命名规则：变量名必须以字母、下划线或美元符号开头，后面可以跟字母、数字、下划线或美元符号。

3. JavaScript 中数据类型

基本数据类型
- 数值（Number）：包括整数和浮点数，如 10、3.14。
- 字符串（String）：由零个或多个字符组成，用单引号或双引号包裹，如 '苹果'、"iPhone"。
- 布尔值（Boolean）：只有两个值 true 和 false，常用于条件判断。
- 空值（Null）：只有一个值 null，表示变量没有值。
- 未定义（Undefined）：变量声明但未赋值时，其值为 undefined。
- Symbol（ES6 新增）：表示独一无二的值。
引用数据类型
- 对象（Object）：可以包含多个键值对，用于存储复杂的数据结构。在电商系统中，可用于表示商品信息。

const product = {id: 1,name: '平板电脑',price: 1999,isOnSale: true
};

- **数组（Array）**：用于存储多个值的有序列表。

4. JavaScript 中特殊值

NaN（Not a Number）：表示不是一个有效的数字，如 0 / 0 的结果就是 NaN。可以使用 isNaN() 函数来判断一个值是否为 NaN。

const result = 0 / 0;
console.log(isNaN(result)); // true

Infinity 和 -Infinity：分别表示正无穷和负无穷，如 1 / 0 的结果是 Infinity，-1 / 0 的结果是 -Infinity。

5. JavaScript 中控制语句和循环语句

控制语句
- if - else 语句：用于根据条件执行不同的代码块。在电商系统中，可根据商品是否有库存来显示不同的提示信息。

const stock = 10;
if (stock > 0) {console.log('商品有库存');
} else {console.log('商品已售罄');
}

- **switch 语句**：用于根据不同的条件执行不同的代码块，适合多分支的情况。

const category = 'electronics';
switch (category) {case 'electronics':console.log('电子设备分类');break;case 'clothes':console.log('服装分类');break;default:console.log('其他分类');
}

循环语句
- for 循环：用于已知循环次数的情况。在电商系统中，可用于遍历商品列表。

const products = ['手机', '电脑', '平板'];
for (let i = 0; i < products.length; i++) {console.log(products[i]);
}

- **while 循环**：用于未知循环次数，只要条件为真就会一直循环。

let i = 0;
while (i < 3) {console.log('循环次数：' + i);i++;
}

- **do - while 循环**：与 `while` 循环类似，但至少会执行一次循环体。

6. JavaScript 中数组

创建数组：可以使用数组字面量 [] 或 Array() 构造函数创建数组。

// 数组字面量
const numbers = [1, 2, 3];// Array() 构造函数
const fruits = new Array('苹果', '香蕉', '橙子');

数组操作
- 访问元素：通过索引访问数组元素，索引从 0 开始。

const products = ['手机', '电脑', '平板'];
console.log(products[0]); // 手机

- **修改元素**：通过索引修改数组元素的值。

products[1] = '笔记本电脑';

- **数组方法**：如 `push()`、`pop()`、`shift()`、`unshift()`、`splice()` 等，用于对数组进行添加、删除、修改等操作。

products.push('相机'); // 在数组末尾添加元素
products.pop(); // 删除数组末尾的元素

7. JavaScript 中函数

函数定义：可以使用函数声明或函数表达式定义函数。

// 函数声明
function calculateTotalPrice(price, quantity) {return price * quantity;
}// 函数表达式
const getDiscountPrice = function(price, discount) {return price * discount;
};

函数调用：通过函数名和参数列表调用函数。

const total = calculateTotalPrice(2999, 2);
const discountedPrice = getDiscountPrice(2999, 0.8);

箭头函数（ES6 新增）：一种简洁的函数定义方式，适用于简单的函数。

const multiply = (a, b) => a * b;

8. JavaScript 中 DOM 对象与 document 对象

DOM对象：是 HTML 文档的树形结构表示，每个 HTML 元素都是一个 DOM 对象。通过 JavaScript 可以操作这些对象，实现页面的动态交互。
document 对象：是 DOM 的根对象，代表整个 HTML 文档。可以通过 document 对象访问和操作页面上的元素。

9. DOM 对象定位

通过 ID 定位：使用 document.getElementById() 方法通过元素的 id 属性获取元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通过ID定位元素</title>
</head>
<body><div id="product-info">这是商品信息</div><script>const productInfo = document.getElementById('product-info');console.log(productInfo.textContent);</script>
</body>
</html>

通过类名定位：使用 document.getElementsByClassName() 方法通过元素的 class 属性获取元素列表。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通过类名定位元素</title>
</head>
<body><div class="product">商品 1</div><div class="product">商品 2</div><script>const products = document.getElementsByClassName('product');for (let i = 0; i < products.length; i++) {console.log(products[i].textContent);}</script>
</body>
</html>

通过标签名定位：使用 document.getElementsByTagName() 方法通过元素的标签名获取元素列表。

10. DOM 对象对标签管理

修改元素内容：可以通过 textContent 或 innerHTML 属性修改元素的文本内容或 HTML 内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>修改元素内容</title>
</head>
<body><div id="product-name">原商品名称</div><script>const productName = document.getElementById('product-name');productName.textContent = '新商品名称';</script>
</body>
</html>

修改元素属性：可以通过点号或 setAttribute() 方法修改元素的属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>修改元素属性</title>
</head>
<body><img id="product-image" src="old-image.jpg" alt="原商品图片"><script>const productImage = document.getElementById('product-image');productImage.src = 'new-image.jpg';productImage.setAttribute('alt', '新商品图片');</script>
</body>
</html>

添加和删除元素：使用 createElement() 方法创建新元素，appendChild() 方法将元素添加到父元素中，removeChild() 方法删除元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>添加和删除元素</title>
</head>
<body><ul id="product-list"></ul><script>const productList = document.getElementById('product-list');const newProduct = document.createElement('li');newProduct.textContent = '新商品';productList.appendChild(newProduct);// 删除第一个商品if (productList.firstChild) {productList.removeChild(productList.firstChild);}</script>
</body>
</html>