[Day 4] 阿嬷都看得懂的 CSS, JavaScript 在干嘛

阿嬷都看得懂的 CSS, JavaScript 在干嘛

那麽,我们要怎麽看 CSS 扮演的角色呢?

许多时候,我们的 CSS 会放在 <head> 这个 HTML 标签中。刚好,Apple 这个网页的主要 CSS 就是放在 head 当中。所以,想看这个网站中 CSS 的影响,就删除 <head> 这个 HTML 标签就可以罗!(甜笑)

那麽,就让我们 剥光 我是说,洗净苹果这位美人的铅华:

找到 <head> 这个 HTML 标签 (会在整份 HTML 的顶部),并且按照前面描述过的方式删除。我们就会看见网页素颜的样子罗!

到这边,我们已经介绍了 HTML 与 CSS 这两个前端工程师告诉浏览器怎麽渲染出网页的语言了:

  • HTML 标签用来告诉浏览器,网页里哪些元素
  • CSS 用来告诉浏览器,这些元素的样式

那麽,使用 HTML 和 CSS,我们就已经可以制作出精美网页了对吗?

对的--前提是,这个网页完全不会和使用网页的人互动。注意,我这里说的「互动」,是指在同个网页中,使用者做了某些动作後,网页也会相应发生改变。那麽,怎麽样算是「同个网页」呢?仔细观察网址列,假使网址列中的网址都没有变化,我们就算是「同个网页」。

反过来说,当我们点选了某个按钮,或某段文字,结果网址列中的网址改变了,所以整个网页也跟着改变,这样并不算是在同个网页中发生的改变,也就不算这个网页有和使用网页的人产生互动喔!

如果某个网页并未和使用网页的人产生互动,我们把这种网页称作「静态网页」,指需要 HTML 和 CSS 就可以制作出来;毕竟,只要告诉浏览器网页有哪些元素,这些元素又长怎样,静态网页的任务就完成了。

你会说,这样很好啊!我们怎麽会需要网页和使用者互动呢?难道网页还会和使用者聊天交朋友吗?

回答这个问题之前,先让我们回到刚刚被剥光的苹果网页:

有没有发现素颜的苹果网页长得有点奇怪?底下那个「快速连结」啦、「寻找直营店」啦、「Apple 直营店线上选购」、「配件」这些元素,都没在原本的网页上出现啊!

不,其实那些元素早就出现了,只是我们暂且看不见而已。让我们重新整理,帮苹果网页重新恢复存在 CSS 的样貌。然後,点选页面右上角的放大镜:

有没有发现这些元素出现了!

但是网址列中的网址都完全没有改变喔!因此,我们刚刚和苹果网页这位美人产生了一次互动喔!是不是令人脸红心跳呢!

那麽,这样的互动是怎麽产生的呢?让我们稍微揣测看看。现在的线索有:

  1. 这些元素原本就存在於网页上;不过,
  2. 我们原本看不见这些元素;直到
  3. 我们按下放大镜按钮後,我们才看见这些元素。

阿嬷们都去玩过游乐园的鬼屋吗?如果担心煞到,可以叫乖孙去再告诉我们就好。在鬼屋当中假扮幽灵的工作人员,原本就存在那个角落,只是因为某些障眼法,我们看不见那些工作人员。直到我们走过了某个转角,或者碰触了某项道具,那些工作人员才按照设定好的脚本,消除那些障眼法,让他们从看不见的状态,突然变成看得见了。

在苹果网页的互动中,前端工程师也使用了类似的策略。

  1. 这些元素原本就存在於网页上

这句话的意思,其实就是

  1. 在网页上这些元素;

前端工程师怎麽跟浏览器说这些元素呢?很好,就是使用 HTML 标签。而

  1. 我们原本看不见这些元素

这句话的意思,其实就是

  1. 这些元素长得像这样--处於看不见的状态;

聪明的阿嬷们可以想到,这就是前端工程师使用 CSS 告诉浏览器的事情罗~接着前端工程师使用设定好的脚本,让这些元素在

  1. 我们按下放大镜按钮後,我们才看见这些元素。

也就是说,

  1. 我们按下放大镜按钮後,这些元素长得像这样了--处於看得见的状态;。

这表示,在前端工程师设定好的脚本中,只要使用者按下放大镜按钮,这些元素的 CSS 就被改变了。当然,我们有些方法,可以使用 CSS 设定这些 CSS 的改变方式,但是相对来说比较局限。这些互动,通常都还是必须依赖 JavaScipt 进行,尤其如果这些互动牵涉到一些网页内容相关的运算,例如数字计算啦、规划路线等等。

而这个我反覆提到,前端工程师给予浏览器的设定好的脚本,就是使用 JavaScript 这个语言来做沟通的喔!只有透过这个设定好的脚本,网页才可能和使用者产生互动,这都是 JavaScript 的功劳喔!

最後,就让我们稍微统整这 3 个语言的主要功能吧:

  • HTML 标签用来告诉浏览器,网页里哪些元素
  • CSS 用来告诉浏览器,这些元素的样式
  • JavaScript 用来告诉浏览器,在使用者做出某些行为後,这些元素如何改变。

小作业:打开脸书,我们来帮乖孙的贴文点赞!在点赞的时候,你觉得 HTML、CSS、JavaScript 各自的功能是什麽呢?


<<:  电子书阅读器上的浏览器 [Day19] 翻译功能 (I) 支援 Onyx 内建翻译

>>:  [Day 5] Vue的数据与方法

24 - 建立结构化的 Log (2/4) - Elasticsearch Ingest Pipeline 资料 Index 前的转换好帮手 - 基本介绍

建立结构化的 Log 系列文章 (1/4) - Elastic Common Schema 结构化 ...

建立你想要的文化(4)- 推动

有清楚说明自己的思路与原则 主管需要练习如何能清楚沟通自己的思路与原则。如果他们都只听到最後的决策,...

如何在Python GUI 中随时记录log并显示在UI上呢?

生活中的每个细节,有些人习惯使用图像的方式做纪录;有些人更喜欢使用文字去做纪录。 那在资讯领域中呢?...

使用WiringPi

昨天写了 "利用网页浏览器执行Raspberry Pi的程序" 很直觉地想把讯息...

Day-20 OOP与抽象类别

JavaScript是一套透过原型链(prototype)实作的物件导向程序设计(Object-or...