前情提要

「我有问题！」

艾草：「来，请说。」

「JavaScript 到底是什麽？」

艾草：「就程序语言啊！」

「... ？ 这不是在说废话吗？」

艾草：「好吧，既然你诚心诚意的发问了。且听我娓娓道来。」

JavaScript 是什麽？

说到网页离不开 HTML 、 CSS 、 JavaScript，来介绍它们的差异吧！

HTML

写 HTML 时，其实跟写一篇文章差不多，我们会去决定一篇文章的架构，并会去区分文章的标题、段落、列表、图片等，来表示各个不同的地方。
而在网页上，我们可以透过 HTML 的不同标签来达成这个目的。

例如：撰写 h1 标签代表标题、撰写 p 标签代表段落等。

<h1>标题</h1>

<p>标题</p>

CSS

CSS 可以加入样式，例如在撰写文章时，可能会透过不同颜色的笔绘制出各种色系，像小时候会用色铅笔去为文章与画作填满色彩样式一样，而 CSS 能设定网页上的诸多样式。

例如：字体颜色、字体粗细、字体大小、背景颜色等。

h1 {
  color: red;
  font-weight: 300;
  font-size: 40px;
  background-color: #000;
}

JavaScript

刚刚的案例都是透过文章来做范例，但接下来就要提到网页与文章很不一样的地方了，而这正是 JavaScript 带来的魔法，网页可以动态与使用者互动，这是静态的文章很难做到的点，接下来让我们了解一下 JavaScript 能实现什麽功能吧！

JavaScript 实现功能

实现功能最常见的例子就是「弹跳式视窗」，相信大家对弹跳式视窗都不陌生，尤其是经历过 Window XP 弹跳式视窗後，应该听到 「登登～ 」都会有恐惧感吧！

除了弹跳式视窗外在举几个很生活化的例子，例如「购物车」：

如果大家有在电商网站上购物过的经验，一定有经历过点击购物车到结帐的流程，这一系列顾客与网页互动的效果，就是藉由 JavaScript 来实现的！

总结

HTML 、 CSS 、 JavaScript 又被称为前端三剑客，正是因为它们是网页上不可或缺的存在，又分别起着不一样的作用。

• HTML 负责网页的架构
• CSS 负责网页的样式
• JavaScript 负责让网页动起来

简单了解前端三剑客的差异後，下一篇文章来学习 JavaScript 的基础-变数与值吧！

参考文献

https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript