内联JavaScript
内联JavaScript是一种直接在HTML标签中写入JS代码的方式。想象一下,你正在撰写一篇关于“网页互动”的公众号文章,你可能会提到“内联JavaScript”这个关键字。这种方式的优点是简单直接,就像在文章中嵌入一个互动的小游戏,让读者在阅读的同时也能参与进来。
<button onclick="alert('Hello, World!')">点击我</button>
内部JavaScript
内部JavaScript是将JS代码写在<script>
标签中,并放置在HTML文档的<head>
或<body>
部分。这种方式就像是你在文章中加入了一个“代码实验室”,让读者可以直接在文章内部看到代码的展示和效果。这种方式的优点是方便演示和教学。
<!DOCTYPE html> <html> <head> <title>网页互动的艺术</title> <script> function showLab() { alert('欢迎来到代码实验室!'); } </script> </head> <body> <button onclick="showLab()">进入实验室</button> </body> </html>
外部JavaScript
外部JavaScript是将JS代码写在一个单独的.js
文件中,然后通过<script>
标签的src
属性引入到HTML文档中。这种方式就像是你在文章中引用了一个“代码库”,读者可以通过链接直接访问到这个库,查看更多的代码示例和资源。这种方式的优点是方便管理和复用代码。
<!DOCTYPE html> <html> <head> <title>网页互动的艺术</title> <script src="path/to/code-library.js"></script> </head> <body> <button onclick="showLibrary()">访问代码库</button> </body> </html>
在code-library.js
文件中:
function showLibrary() { alert('欢迎来到代码库!'); }