第一種：把嵌入式腳本與其他標記混合在一起添加到body標籤中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline JavaScript</title>
</head>
<body>
<h1>Inline Example</h1>
<script type="text/javascript">
//JavaScript代碼
</script>
</body>
</html>這種方式不僅反覆展開代碼，而且導致不必要的代碼複製
第二種:把嵌入式腳本添加到文檔的<head>元素中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Head JavaScript</title>
<script type="text/javascript">
//JavaScript代碼
</script>
</head>
<body>
<h1>Head Example</h1>
</body>
</html>這種方式似乎相對於第一種好一點，但任然混合了結構和行爲
第三種:通過使用外部源文件來包含JavaScript腳本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>External File JavaScript</title>
<script type="text/javascript" src="source.js"></script>
</head>
<body>
<h1>External File Example</h1>
</body>
</html>請遵循這樣一種準則，就是在任何情況下，都要把全部腳本包含在一個外部源文件中，來保證行爲和結構完全分離(不存在無法將全部腳本放到源文件中的情況)，從今天開始這樣做吧，請重新審視你的代碼，使用外部文件的另一個好處就是較少了整個頁面的大小，因爲，他們通常會被客戶的Web瀏覽器緩存起來，並且只下載一次，從而較少了每個後續頁面的加載時間。
讓我們開始從HTML中移除事件處理程序，這在一定程度上會改變你的開發思想
[url="http://www.huddletogether.com"]http://www.huddletogether.com[/url]的Lokesh Dhakar編寫的Lightbox JS。這是個圖像查看解決方案，堪稱是行爲與結構分離的典範
[align=right][b]《AdvancED DOM Scripting Dynamic Web Design Techniques》[/b]
[/align]