制作可分享的搜索页面是一门面向具备 HTML、CSS 和 JavaScript 基础的学习者的前端实践课程。你将制作虚构本地活动网站 Fieldnote 的搜索页，让另一浏览器上下文打开链接时，看到相同的筛选条件、结果顺序和结果页码。
两个引导实验先展示正常的分享视图，再逐步实现基于 URL 的搜索状态和浏览器导航。独立挑战将同样的机制应用到另一期活动目录，改变类别和每页条目数。每个实验均提供独立的起始文件与数据。
你将学到什么
完成本课程后，你将能够：
- 对准备好的活动目录进行筛选、排序和分页，让每条记录的内容始终对应其稳定 ID，包括标题相同的活动；
- 使用
URL和URLSearchParams读取并规范化q、category、sort和page，处理空格、&、字面量+、未知值和无效页码； - 保持已提交的筛选条件、可见控件、结果和分享链接一致，并合理呈现空结果与分页边界；
- 使用
pushState、replaceState和popstate，在刷新以及真实的后退、前进导航中恢复已提交视图，避免增加多余的历史记录； - 在干净的浏览器上下文中打开真实分享链接，核对相同顺序的记录，同时保留当前路径、无关查询参数和片段标识。
本课程适合谁
本课程适合准备将浏览器状态、JavaScript 数据处理与实用搜索界面结合起来的学习者。
前置要求： 基本终端与路径操作、HTML 表单、CSS 布局和可见焦点，以及 JavaScript 对象、数组、函数、DOM 选择与操作和事件。你应能编辑并保存项目文件。引导实验会在挑战之前讲授 URL 编码、filter/sort/slice、数组复制、稳定记录身份与浏览器历史。无需 React 或后端编程知识。
学习环境： LabEx 提供准备好的浏览器编程环境、静态网站与合成活动数据。你实现浏览器端 JavaScript，服务器仅负责提供文件。网站标签和运行输出保留英文。
常见问题
我会制作搜索后端或保存访客偏好吗？
不会。筛选、排序和分页都在浏览器中处理准备好的本地数据。URL 承载已提交视图，因此另一浏览器无需依赖首个浏览器保存的本地状态。
尚未提交的修改会怎样？
点击 Search 提交之前，控件中的修改只是草稿。刷新会恢复 URL 中的已提交状态。你还会练习放宽过严的搜索条件，以及处理已说明的默认值或页码纠正；没有匹配项是有效结果。
本课程能发布永久链接吗？
不能。分享范围限于正在运行且获授权的实验及其可用访问路由。链接不会延长 VM 寿命，不保证在不同实验 VM 之间可用，也不会将页面发布到互联网。生产部署和完整无障碍认证不在本课范围内。
