JavaScript入門詳解三種引進方式-js教程-PHP中文網

首頁

web前端

js教程

JavaScript入門詳解三種引進方式

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 03, 2022 pm 04:39 PM

javascript

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

JavaScript入門詳解三種引進方式

【相關推薦：javascript影片教學、web前端】

1.行內引入方式

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

透過在開標籤中的事件屬性引用js的函數

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

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

例：

<input>

註：行內引入，在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="/static/imghwm/default1.png"  data-src="images/001.jpg"  class="lazy"   onclick="alert(1223)" alt="JavaScript入門詳解三種引進方式" ></img>
    </div>
  <!--js内联写法01结束-->
  </body>
</html>

輸出結果：

JavaScript入門詳解三種引進方式

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

寫在script標籤中

內部引用: 透過在script標籤中編寫js程式碼使用

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

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

當需要我們在頭部引用腳本就放在頭部，否則則放在底部，因為放在頭部可能會影響瀏覽器渲染。

<script>
    alert(&#39;Hello World!&#39;);
</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="/static/imghwm/default1.png"  data-src="images/002.jpg"  class="lazy"   id=&#39;yuansu&#39; alt="JavaScript入門詳解三種引進方式" ></img>
  </div>
  <!--js内联写法02结束-->
  </body>
  <script>
    //js代码
    //找到XX元素，一般给元素加id 
    yuansuojb=document.getElementById(&#39;yuansu&#39;);    
    //给xx元素加事件
    yuansuojb.onclick=function(){
      //代码段
      alert(1);
    }
    //触发事件
  </script>
</html>

輸出結果：

3.外部引入方式

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

步驟:

編寫獨立的js檔案
在頁面中透過script標籤引用

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

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

<script></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="/static/imghwm/default1.png"  data-src="images/003.jpg"  class="lazy"   id=&#39;yuansu&#39; alt="JavaScript入門詳解三種引進方式" ></img>
  </div>
  </body>
  <script src=&#39;js/index.js&#39;></script>
</html>

.js檔案內容如下：

//js代码

//找到XX元素，一般给元素加id 
yuansuojb=document.getElementById(&#39;yuansu&#39;);    
//给xx元素加事件
yuansuojb.onclick=function(){
  //代码段
  var str="hello world !!!";
  alert(str);
}

輸出結果：

JavaScript入門詳解三種引進方式【相關推薦：

javascript影片教學

、web前端】

以上是JavaScript入門詳解三種引進方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。