【JS】JavaScript 腳本的三種使用形式：行內腳本、內部腳本、外部腳本

本文轉載自查看原文 2020-05-20 11:37 1367 000 —— html+css+js 學習筆記

JavaScript 腳本的使用形式有三種：

行內 JavaScript 腳本
內部 JavaScript 腳本
外部 JavaScript 腳本

將 js 腳本嵌入到 HTML 標簽中。

<a href="javascript:alert('請等待評選結果，謝謝！')">查看結果</a>

代碼示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style type="text/css"> img{ height:300px;
    }
  </style>
</head>
<body>
  <h1>校園評選活動</h1>
  <img alt="選手1" src="images/1.jpg" onclick="alert('你選擇了1號選手')"/>
  <img alt="選手2" src="images/2.jpg" onclick="alert('你選擇了2號選手')"/>
  <img alt="選手3" src="images/3.jpg" onclick="alert('你選擇了3號選手')"/><br />
  <a href="javascript:alert('請等待評選結果，謝謝！')">查看結果</a>
</body>
</html>

效果演示

內部 JavaScript 腳本

將 JavaScript 腳本提取出來統一放在 <script></script> 標簽中。

代碼示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  
  <script type="text/javascript">
    function addOnclickEvents(){ alert("onclick事件添加成功"); var imgs=document.getElementsByTagName("img"); imgs[0].onclick=function(){alert("你選擇了1號選手");} imgs[1].onclick=function(){alert("你選擇了2號選手");} imgs[2].onclick=function(){alert("你選擇了3號選手");} } </script>
  
  <style type="text/css"> img{ height:300px;
    }
  </style>
</head>
<body>
  <h1>校園評選活動</h1>
  <input type="button" onclick="addOnclickEvents()" value="為 <img>添加 onclick事件" /><br />
  <br />
  <img id="img1" alt="選手1" src="images/1.jpg"/>
  <img id="img2" alt="選手2" src="images/2.jpg"/>
  <img id="img3" alt="選手3" src="images/3.jpg"/><br />
  <a id="a1">查看結果</a>
  
  <script type="text/javascript">
    var a1 = document.getElementById("a1"); a1.href="javascript:alert('請等待評選結果，謝謝！')"; </script>
</body>
</html>

效果演示

注意

<head> ... <script type="text/javascript">
    var imgs=document.getElementsByTagName("img"); imgs[0].onclick=function(){alert("你選擇了1號選手");} imgs[1].onclick=function(){alert("你選擇了2號選手");} imgs[2].onclick=function(){alert("你選擇了3號選手");} </script> ... </head>

直接這么寫是不行的，因為 HTML 文檔是自上而下執行的，此時還沒有 <img> 元素。

外部 JavaScript 腳本

外部 JavaScript 腳本寫在獨立的文件中，頁面在使用某一腳本時，需要引入腳本所在文件。

代碼示例

addOnclickEvents.js 文件

/** * 為 <img> 添加 onclick 事件 */
function addOnclickEvents(){ alert("onclick事件添加成功"); var imgs=document.getElementsByTagName("img"); imgs[0].onclick=function(){alert("你選擇了1號選手");} imgs[1].onclick=function(){alert("你選擇了2號選手");} imgs[2].onclick=function(){alert("你選擇了3號選手");} } var a1 = document.getElementById("a1"); a1.href="javascript:alert('請等待評選結果，謝謝！')";

test.html 文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
  
  <style type="text/css"> img{ height:300px;
    }
  </style>
</head>
<body>
  <h1>校園評選活動</h1>
  <input type="button" onclick="addOnclickEvents()" value="為 <img>添加 onclick事件" /><br />
  <br />
  <img id="img1" alt="選手1" src="images/1.jpg"/>
  <img id="img2" alt="選手2" src="images/2.jpg"/>
  <img id="img3" alt="選手3" src="images/3.jpg"/><br />
  <a id="a1">查看結果</a>
  
  <script type="text/javascript" src="addOnclickEvents.js"></script>
</body>
</html>

文檔結構

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 腳本到底什么是腳本？ Java中使用JavaScript腳本 Shell腳本的三種執行方式 MySQL腳本中的三種循環運行shell腳本的三種方式 Django之ORM外部python腳本使用 javascript腳本中使用json2.js解析json JavaScript腳本的執行原理？ kettle JavaScript腳本