一看就懂

一个网页
是怎么变出来的

拿"今晚吃海鲜报名页"当例子
讲给从来没写过一行代码的人
1

一句话

你写好一张"电子的纸",放进一台一直开着、全世界都连得上的电脑里。谁点开那个链接,谁就拿到一份一模一样的。

就这么回事。剩下的都是细节。

2

它跟微信群接龙
差在哪

以 前
群里发一条,大家复制上一条加自己名字
复制错一次后面全乱,谁带家属、谁不吃辣得往上翻聊天记录,人数得自己数
现 在
发一个链接,各填各的,名单自己长出来
人数自动加,忌口跟在名字后面,改主意点一下就改了,谁也覆盖不了谁

说白了:以前是大家轮流记账,现在是有个不会累也不会记错的人在替所有人记

3

做这张纸
用三样东西

盖房子的话:先砌墙、再刷漆、最后装开关。网页也是这三步,一步一样东西。

先砌墙
HTML
把内容按位置摆好:标题在上面、日期一块、名字一行、按钮在这儿。像毛坯房,能看出哪是门哪是窗,但灰扑扑的。
再刷漆
CSS
定颜色、字多大、圆角多圆、留多少空。同一堵墙,刷完像样了。你看到的"好看",全是这一层干的。
最后装开关
JavaScript
让它会动:点"我要去"弹出表格、填完名单当场多一行、每 20 秒自己去看看有没有新人报名。没这层就是一张死纸。

这三样都是纯文字文件,用记事本就能写。真的,不神秘。

4

可是名字
存哪儿去了

纸是发给每个人一张,可别人填的名字得进同一个本子——不然你看不见我填的。所以还得有两个角色

① 前台你手机上看到的那一张纸。负责好看、负责收你填的字。
② 后台的本子所有人填的名字都写进这一个本子,存在别人的机房里,不在你我手机上。
③ 来回跑腿你一点确认,前台把名字送到本子上;别人打开页面,前台再把整本抄一遍给他看。

这个"前台 + 本子"是租的,租金几乎为零,人少的时候一分钱不花。不用自己买电脑放家里。

5

门牌号
是怎么挂上的

东西放好了,得让人找得到。seafood.shangfei.shop 就是门牌号——shangfei.shop 这块地是我们自己的,想在上面开几个门就开几个门,今天开一个叫 seafood 的。

挂门牌只是在一个"全世界的通讯录"里登记一行:有人念这个名字,就把他带到我们那台机器上。几秒钟就生效。

所以你今天想再来一场"下周吃火锅",十分钟能再挂一个新门牌,互不干扰。

6

上线
就一句话

把写好的东西"推"上去 敲一句话,几秒钟,全世界打开就是新版本。改错了想反悔,再敲一句就退回上一版。

今天这一页,从零到能发给你,前后不到二十分钟。

7

这一页
具体在干什么

写清时间地点今晚 6 点 · 炙院大厅
收名字顺手填带几个人
自动数人头还差几个人满桌
记忌口不吃辣、要皮皮虾
改主意点一下改成"不去"
自己刷新别人报了你也看得到
8

有两件事
它故意不做

不要你登录,不要手机号 填个名字就行。它不知道你是谁,也没打算知道——本来就是熟人局,拦一道反而没人填了。

另一件:名单谁都能看见。这是故意的——报名本来就该互相看得见,不然还得有人来问"到底几个人"。

"那我也能做一个?"
能。难的从来不是写,是想清楚这张纸上该有什么、不该有什么。
今晚这一页真正花时间的,是决定"只填名字就够了"。
← 回到 ELI5 合集