JavaScript的第一課---如何放置JavaScript(Part 3)

目錄 : 網頁設計學習課程參考

除了我們在Part 2中所介紹的把JavaScript放在HTML檔中的<script></script>區段之中外, 我們還可以把JavaScript放在HTML檔之外的JavaScript檔裏, 然後再在HTML檔裏引用. 這種方式對會在多個HTML檔中共同會用到的JavaScript會較容易維護. 如果我們把JavaScript檔獨立出來而不直接放在HTML檔內,我們只要在一處地方修改即可. 如果不把JavaScript檔獨立出來則所有用到的網頁都要開啟進行修改, 相當麻煩.

首先我們建立一個資料夾, 以便集中存放所有JavaScript檔. 我們在Aptana的左側專案瀏覽器中, 在我們的Workspsace中建立子檔案夾. 點選Workspace LearningJavaScript, 按下滑鼠右鍵, 然後點新建 > 資料夾, 如下圖



在出現的視窗中把資料夾命名為Scripts, 並下完成鍵.



在Aptana的左側專案瀏覽器中, 點選Scripts, 按下滑鼠右鍵, 然後點新New From Template > JavaScript > JavaScript Template, 如下圖


隨即出現如下畫面.


把檔案重新命名為lesson5.js, 並下完成鍵.


在lesson5.js中輸入下列程式碼

document.write("This is Lesson 5.");


回到lesson5.html中, 刪除<body></body>內未端之<script></script>, 只留下檔案上方之<script></script>. 在開始<script>內加入src=""如下圖. Aptana隨即跳出視窗供我們選擇資料夾或檔案.
請選擇Scripts.


Aptrana立刻把所選資料夾相對路徑寫入src屬性內. 請在src屬性後加入/, 如下圖


在跳出視窗中選擇Scripts資料夾內之lesson5.js.

預覽lesson5.html, 畫面如下圖. 可見lesson5.html順利叫用lesson5.js內之JavaScript.


如已在<script>內加入src屬性引用外部JavaScript檔, 則<script><script>內縱使加入JavaScript程式碼也不會被執行.我們在<script><script>內加入

document.write("Hi");


預覽lesson5.html, 畫面中可見沒有出現Hi字串.




留言