速成 · 走进软件

#速成

这门课留下的不是一套完整课件，而是一篇理论作业、两个静态网站和一组网课练习。因此我只按现存材料恢复课程主线，不把作品里没有的内容补成“老师讲过的知识”。

一句话理解这门课

它在做两件事：先建立“软件是用来解决复杂问题的工程产物”这个认识，再用 HTML、CSS 和少量 JavaScript 做出真正可以打开的网页。

先把四个概念分开

  • 软件：不只是一段代码，还包括它要解决的问题、用户如何使用、如何维护与迭代。
  • 软件工程：用可重复、可协作的方法建造软件，而不是把“能跑”当成终点。
  • 网页结构：HTML 回答“页面上有什么”，例如标题、导航、段落、表单。
  • 网页表现与行为：CSS 决定外观，JavaScript 处理数据和交互。

静态网站是怎么转起来的

以个人网站为例，浏览器先读取 index.html，再根据 <link> 加载 CSS 和图片。用户点击 <a href="renwu.html"> 时，浏览器换到另一个 HTML 文件。

index.html
├── css/css.css
├── images/...
├── renwu.html
└── tupian.html

这个结构里，相对路径最容易出错。比如 css/css.css 是从当前 HTML 文件所在位置出发，先进入 css 文件夹，再找 css.css。

HTML 要写“意义”，不只写“样子”

网课练习中用到了 <header> 和 <nav>。它们与普通 <div> 一样都可以包住内容，但语义更清楚：

<header>
  <nav>
    <a href="index.html">首页</a>
  </nav>
</header>

语义化不会自动把页面变漂亮，它的价值是让人、搜索引擎和辅助技术都更容易理解页面结构。

一道 JavaScript 练习的算法主线

现存练习要从数组中删去重复值。当时的做法是维护一个结果数组：对每个输入元素，先在结果中查找，没见过才加入。

const result = [];
for (const value of input) {
  if (!result.includes(value)) result.push(value);
}

这种写法容易理解，但最坏情况需要反复扫描结果，时间复杂度为 O(n2)O(n^2)。现代 JavaScript 可用 Set 把编程意图写得更直接：

const result = [...new Set(input)];

最后记住的三件事

  1. 代码是软件的实现手段，不是对用户问题的全部回答。
  2. HTML、CSS、JavaScript 分别主管结构、表现和行为；出问题时先判断是哪一层。
  3. 一个小网站也要面对目录组织、链接、复用样式和代码可读性；这就是工程意识的起点。

评论