現在前端開發越來越流行，框架也越來越多，像ExtJs、JQuery、Bootstrap等。雖然入行這麽多年，但是感覺自己在前端方面還是存在基礎不牢的地方，特別是CSS和JS。因此最近打算重新閱讀這方面的經典書籍，來夯實自己的基礎。因此打算邊讀書，邊寫博客，將我自己的感覺有用的地方記下來，以加深印象。

在前端開發，人人都會遇到JavaScript，也必須了解它。在用到它之前，首先必須了解怎麽樣將其引用到自己的頁面中去。以前因為是快速開發，很少去關註這點，對JavaScript的引入，一掠而過，沒有過多關註，代碼的引入也是Ctrl+C和Ctrl+V，導致出現問題的時候，也不知道在何處，對於這一點，深以為戒。

JavaScript引入代碼的方式有2中。

一、直接引用。在HTML頁面中直接嵌入JS代碼。如：

<script type="text/javascript">

    function showMessage(){

        alert("I‘m javascript");

    }
   
</script>

當將上面的代碼插入到HTML頁面，流量器打開之後，會出現一個彈出框，裏面有條語句“I‘m javascript”。

二、以外部文件方式引用。

此時，在HTML文檔或JSP文檔中，使用如下的方式引用：

<script type="text/javascript" src="example.js"></script>

在上面的example.js中，可以將showMessage函數放入進去，這樣，就可以直接在js代碼中直接使用上面的showMessage函數了。

以上就是引入javascript代碼的2中方法。但是在使用這2種方法的時候，使用script標簽的時候，需要註意，該標簽還有其他的屬性，需要註意。

1、async：可選，表示應該立即下載腳本，在不妨礙頁面中的其他操作的前提下。該屬性只對第二種引入方法有效；

2、charset：可選，表示src屬性指定的字符集；

3、defer屬性：可選，表示腳本延遲執行，直到文檔被完全解析和顯示之後。這個屬性很有效，我就遇到過bug調試的問題。當時是需要執行另外一個文件的方法，但是卻有找不到該文件，一直報錯。後面經過排查，才知道需要將進入的腳本的屬性顯性defer設置這樣不會在其他文件未加載的時候就執行。

4、language：該屬性已經廢棄，現在大多少的瀏覽器會忽略該屬性。

5、src屬性，可選：外部javascript文件的路徑屬性；

6：type屬性：可選。目前大多少瀏覽器，默認的熟悉都是text/javascript。

JavaScript在頁面中的引用方法