HTML 套用 JavaScript
如果说 HTML 负责建构网页的骨架、CSS 负责网页的外观，JavaScript 就是负责网页的“动作程序”，这篇教学将会介绍 HTML 里三种套用 JavaScript 的方法。
快速导览：
所有范例可使用 JS Bin、CodePen 或 JSFiddle 进行线上实作，或使用笔记本编辑，不用安装任何软件 ( 参考：使用 HTML 编辑器 )
什么是 JavaScript？
JavaScript ( 简称 JS ) 是目前广泛被用于 HTML 的脚本语言 ( scripting language )，由于 JavaScript 的直译语言特性 ( interpreted language )，不需要事先编译，就能透过浏览器直接执行，JavaScript 时常用来处理网页的互动、网页前后端的串接...等。JavaScript 除了在网页里运行，也能应用在其他领域 ( 例如后端服务器 )。
此外，由于 JavaScrpit 的开头是 Java，也导致初次接触 JavaScript 的人常会将 JavaScript 和 Java 混淆，当 JavaScript 刚推出时，原本要命名为 LiveScript，但因为行销策略改名为 JavaScript ( 由于当时 Java 程序语言相当普及 )，便成为了混淆的主因，但 JavaScrpit 和 Java 其实没有什么关联性 ( 语法也差很多 )。
套用 JavaScript 的三种方法
要在 HTML 套用 JavaScript，有下列三种方法：
- 事件属性：在支援事件属性的元件里，可在事件属性中撰写 JavaScript。
- 内部撰写：在 HTML 里的
<script></script>标签里撰写 JavaScript。- 外部加载：透过 HTML 的
<script src="main.js"></script>标签加载外部 JavaScript 文件。
事件属性
“事件属性”方法表示“在支援事件属性的元件里，可在事件属性中撰写 JavaScript”( 参考：事件属性 )，例如下方的范例，网页打开后点击按钮，网页就会弹出一个警告视窗。
<button onclick="alert('ok');">我是按鈕</button>
内部撰写
“内部撰写”方法表示“在 HTML 里的 <script></script> 标签里撰写 JavaScript”( 通常会将 <script></script> 放在要控制元素的后方，或是 body 元素的最下方 )，例如下方的范例，网页打开后点击按钮，网页就会弹出一个警告视窗。
<button>我是按鈕</button>
<script>
document.querySelector('button').addEventListener('click',function(){
alert('ok');
})
</script>
外部加载
“外部加载”方法，表示“透过 HTML 的 <script src="main.js"></script> 标签加载外部 JavaScript 文件”( 通常会放在 <head></head> 里或 body 元素的最下方 )，例如下方的范例，网页打开后会加载外部的 main.js 文件，点击按钮，网页就会弹出一个警告视窗。
外部 main.js 内容：
document.querySelector('button').addEventListener('click',function(){
alert('ok');
})
HTML 内容：
<script src="main.js"></script>`
<button>我是按鈕</button>
小结
通常要做出比较多互动性，或要串接后端服务器的网页，内容一定少不了 JavaScript 的辅助，熟悉 HTML 和 CSS 之后，下一步就得开始熟悉 JavaScript 啰～
微信扫码关注
抖音扫码关注