JavaScript入門詳解之三種引入方式

本篇文章給大家帶來了關於的相關知識，其中詳細介紹了javaScript三種引入方式行內式，嵌入樣式、外部樣式及其使用方式；下面一起來看一下，希望對大家有幫助。

【相關推薦：、】

1.行內引入方式

寫在行內，每個標籤裡面單獨設定

通過在開標籤中的事件屬性參照js的函數

(1)寫在標籤的事件屬性當中（以on開頭的屬性），如onclick【on+事件型別】

推薦：html使用雙引號，js使用單引號

例：

<input type="button" value="點我開啟世界" onclick="alert('Hello World')" />

注：行內引入，在JS中沒用提升權重的概念，所以其不常用[基本不用]

範例如下：

<html>
  <title>js樣式內聯寫法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js內聯寫法01開始-->
    <!--當滑鼠點選圖片時跳出彈窗顯示1223-->
    <div class="img">
    單擊事件：
      <img src="images/001.jpg" onclick="alert(1223)"></img>
    </div>
  <!--js內聯寫法01結束-->
  </body>
</html>

輸出結果：

+1.gif

2.內嵌引入方式(內部引入)

寫在script標籤中

內部參照: 通過在script標籤中編寫js程式碼使用

script標籤可以寫在頁面任何位置
script標籤通常使用在body中的最後, 或者body的後面

(1)可以寫在任意地方；

當需要我們在頭部參照指令碼就放在頭部，否則則放在底部，因為放在頭部可能會影響瀏覽器渲染。

<script>
    alert('Hello World!');
</script>

注：一般在自己寫練習的時候，想偷懶不想設定js檔案時使用 [練習使用]

通常自己做專案的時候放在底部，不影響載入順序又可以和CSS檔案進行區分，並且不會影響瀏覽器渲染；若放在其他處最好用onload套起來用

範例如下：

<html>
  <title>js樣式內聯寫法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js內聯寫法02開始-->
  <div class="img">
    單擊事件：
      <img src="images/002.jpg" id='yuansu'></img>
  </div>
  <!--js內聯寫法02結束-->
  </body>
  <script>
    //js程式碼
    //找到XX元素，一般給元素加id 
    yuansuojb=document.getElementById('yuansu');    
    //給xx元素加事件
    yuansuojb.onclick=function(){
      //程式碼段
      alert(1);
    }
    //觸發事件
  </script>
</html>

輸出結果：

3.外部引入方式

在script標籤中使用src引入外部檔案

步驟:

編寫獨立的js檔案
在頁面中通過script標籤參照

(1)引入外部JS檔案的script中不可以寫程式碼

(2)利用HTML頁面程式碼結構化，把多段JS程式碼獨立至HTML頁面外面，美觀，且方便檔案複用

<script src="main.js"></script>

注：和行內樣式一樣放在底部和頭部需要分情況考慮[經常使用]

使用的是src不是href

範例如下：

將js的程式碼寫到.js的檔案中，並在HTML中參照

.html檔案內容如下：

<html>
  <title>js樣式外聯寫法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <div class="img">
    外聯寫法--單擊事件：
      <img src="images/003.jpg" id='yuansu'></img>
  </div>
  </body>
  <script src='js/index.js'></script>
</html>

.js檔案內容如下：

//js程式碼

//找到XX元素，一般給元素加id 
yuansuojb=document.getElementById('yuansu');    
//給xx元素加事件
yuansuojb.onclick=function(){
  //程式碼段
  var str="hello world !!!";
  alert(str);
}

輸出結果：

+3.gif

【相關推薦：、】

以上就是JavaScript入門詳解之三種引入方式的詳細內容，更多請關注TW511.COM其它相關文章！