(J哥专享)从前端交互到数据爬存：JavaScript 与爬虫存储实战指南
一、JavaScript：让网页 “动” 起来的核心
1. JavaScript 的 “前世今生”
很多人会因为名字联想到 Java，但实际上 JavaScript 与 Java毫无关系—— 这只是早期 Netscape 公司为了借助 Java 的市场热度采用的营销策略。其发展历程清晰展现了定位的演变：从最初的 LiveScript，到更名为 JavaScript，最终成为前端浏览器的核心脚本语言。
与 HTML、CSS 并称为前端三要素的它，分工明确：
HTML 搭建网页骨架（如
等标签构成页面结构）
CSS 负责美化（通过color font-size等属性定义样式）
JavaScript 实现动态效果（如点击按钮弹出提示、页面元素加载动画等）
2. 语言特性：灵活易用的 “弱类型选手”
作为弱类型语言，JavaScript 的变量定义极为灵活 —— 只需用var关键字，变量类型会根据赋值自动变化：
javascript
var x = 100; // 此时x是number类型
x = \"hello\"; // 现在x变为string类型
x = true; // 切换为boolean类型
它的核心特性还包括：
解释执行：无需编译，浏览器直接运行
平台无关性：只要有浏览器，Windows、Mac、Linux 系统都能运行
动态性：可在运行时修改变量类型、创建对象
安全性：仅在浏览器环境运行，无法直接操作本地文件系统
3. 基础语法：快速入门的关键
注释与标识符：与 Java 一致，//用于单行注释，/* */用于多行注释；标识符由字母、数字、_、$组成（不能以数字开头，不可用关键字）。
数据类型：包含 6 种基础类型，可通过typeof运算符判断：
javascript
typeof 123; // 返回\"number\"
typeof \"abc\"; // 返回\"string\"
typeof true; // 返回\"boolean\"
函数定义：通过function关键字声明，调用时直接使用函数名：
javascript
function add(a, b) {
return a + b;
}
add(2, 3); // 调用函数，返回5
4. 引入方式：三种常用的嵌入方法
行内式：直接在 HTML 标签的onxxx属性中编写，如点击按钮弹出提示：
html
内部式：在标签内编写代码，作用于当前页面
外部式：通过引入外部 JS 文件（注意：带src属性的标签内不能再写代码）
二、爬虫数据存储：从合规爬取到高效存储
当我们需要从网页收集信息时，合规爬取与科学存储至关重要。这部分将聚焦爬虫的 “规则意识” 与数据存储的实用方法。
1. 爬虫先懂 “规矩”：Robots 协议
在爬取数据前，必须了解Robots 协议（爬虫协议）—— 这是网站通过robots.txt文件告知爬虫 “哪些页面可爬、哪些禁止” 的规则。
核心要点：
协议文件需放在网站根目录（如https://www.baidu.com/robots.txt）
基本语法由User-agent（目标爬虫）、Disallow（禁止爬取路径）、Allow（允许爬取路径）组成，例如：
plaintext
User-agent: * # 对所有爬虫生效
Disallow: /cgi-bin/ # 禁止爬取/cgi-bin/目录
Allow: /public/ # 允许爬取/public/目录
遵守建议：商业用途、大规模爬取必须严格遵守；个人学习、小规模爬取建议遵守（避免法律风险）
2. 数据存储：TXT 与 CSV 的实用技巧
爬取到数据后，选择合适的存储格式能提高后续处理效率。以下是两种常用格式的操作指南。
（1）TXT 存储：简单直接的 “记事本方案”
适合存储结构化不强的文本（如网页源码、纯文字内容），优点是兼容性强、操作简单。
Python 操作示例：
# 存储列表数据（用Tab分隔字段）
data = [\"学号\", \"姓名\", \"专业\"]
with open(\"student.txt\", \"a+\", encoding=\"utf-8\") as f:
f.write(\"\\t\".join(data) + \"\\n\") # 写入并换行
注意事项：
路径写法：可使用d:/test/、d:\\\\test\\\\或r\"d:\\test\\\"（避免转义字符问题）
编码格式：添加encoding=\"utf-8\"防止中文乱码
（2）CSV 存储：结构化数据的 “最佳拍档”
CSV（逗号分隔值）是表格数据的理想存储格式，可直接用 Excel 打开，也便于数据分析工具处理。
Python 操作（使用 csv 库）：
import csv
# 写入数据（字典方式，支持中文）
with open(\"news.csv\", \"w\", encoding=\"utf-8\", newline=\"\") as f:
fieldnames = [\"id\", \"title\", \"date\"]
writer = csv.DictWriter(f, fieldnames=fieldnames)
writer.writeheader() # 写入表头
writer.writerow({\"id\": \"1\", \"title\": \"校园新闻标题\", \"date\": \"2024-07-01\"})
进阶技巧：使用 pandas 库可更高效处理大量数据：
python
import pandas as pd
# 字典数据转CSV
data = {
\"学号\": [\"2021001\", \"2021002\"],
\"姓名\": [\"张三\", \"李四\"]
}
df = pd.DataFrame(data)
df.to_csv(\"student.csv\", index=False) # index=False去除行索引
三、实战案例：从网页爬取到数据存储
以 “爬取重庆工程学院新闻列表” 为例，完整流程如下：
1.合规检查：访问http://www.cqie.edu.cn/robots.txt，确认允许爬取新闻页面
2.爬取页面：使用 Requests 库获取网页源码
3.解析数据：用 XPath 提取新闻标题、发布时间、
4.储存数据：
1).若用 TXT：按 “标题 \\t 时间 \\t 链接” 格式写入
2).用 CSV：通过 csv 库按字段存储，便于后续用 Excel 分析
python
# 核心步骤代码示例
import requests
from lxml import etree
import csv
# 1. 爬取页面
url = \"http://www.cqie.edu.cn/html/2/xydt/\"
response = requests.get(url)
html = etree.HTML(response.text)
# 2. 解析数据
titles = html.xpath(\"//div[@class=\'news-list\']//a/text()\")
dates = html.xpath(\"//div[@class=\'news-date\']/text()\")
# 3. 存储到CSV
with open(\"cqie_news.csv\", \"w\", encoding=\"utf-8\", newline=\"\") as f:
writer = csv.writer(f)
writer.writerow([\"标题\", \"发布时间\"])
for title, date in zip(titles, dates):
writer.writerow([title.strip(), date.strip()])
