在HTML中嵌入JS代碼的3種方式總結(jié)
一，在HTML中嵌入JS代碼的第一種方式：行間事件
行間事件是指將JavaScript函數(shù)寫到HTML元素中的執(zhí)行事件。
1、JavaScript 是一種事件驅(qū)動型的編程語言，通常都是在發(fā)生某個事件的時候，去執(zhí)行某段代
碼。其中，事件包括很多，例如：鼠標(biāo)單擊事件 click，鼠標(biāo)經(jīng)過事件 mouseover 等。并且在 JavaScript 當(dāng)中任何一個事件都有對應(yīng)的事件句柄（事件發(fā)生時要進(jìn)行的操作）。
例如：click 對應(yīng)的事件句柄是 onclick，mouseover 對應(yīng)的 事件句柄是 onmouseover。
2、怎么使用 JS 代碼彈窗？
在 JS 當(dāng)中有一個內(nèi)置的 BOM 對象，可以直接拿來使用，全部小寫：window
其中 window 對象有一個方法/函數(shù)叫做 alert，這個函數(shù)專門用來彈出對話框。
window.alert('hello world!');通過下面這個代碼可以知道：JS 中的字符串可以使用單引號括起來。
(1)語句各自獨占一行，通常可以省略結(jié)尾的分號;
(2)程序結(jié)束或者右花括號(})之前的分號也可以省略;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hello1" onclick="window.alert('Hello World');" />
<input type="button" value="hello2" onclick='window.alert("Hello jQuery");
window.alert("Hello Kitty")
window.alert("你好，中國")'/>
<!-- window.可以省略 -->
<input type="button" value="Hello3" onclick="alert('你好，世界');" />
</body>
</html>二，在HTML中嵌入JS代碼的第一種方式：頁面script 標(biāo)簽嵌入，腳本塊的方式。
腳本塊的位置隨意，沒有限制！
使用工具 ，不打尖括號 <，可以出提示
<script type="text/javascript"></script>
<script src="" type="text/javascript" charset="utf-8"></script>
打了尖括號 提示無法出現(xiàn)
<script></script>
在腳本塊中，代碼執(zhí)行的順序都是從上到下的
<!-- 腳本塊的位置隨意，沒有限制！ -->
<script type="text/javascript">
alert("Page Begin")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在 HTML 中嵌入 JS 代碼的第二種方式：頁面 script 標(biāo)簽嵌入，腳本塊的方式</title>
</head>
<body>
<!-- 這個按鈕 1 會先被加載到瀏覽器內(nèi)存。 -->
<input type="button" value="按鈕 1" />
<!-- 腳本塊 -->
<!-- 一個頁面中腳本塊可以出現(xiàn)多個。 -->
<script type="text/javascript">
/*在這里直接編寫 JS 代碼，這些 JS 代碼在頁面打開的時候自上而下的順序依次逐行
執(zhí)行！*/
alert("Hello World");
alert("Hello Kitty");
alert("Hello China");
</script>
<!-- 最后加載這個按鈕 2 -->
<input type="button" value="按鈕 2" />
</body>
</html>
<script type="text/javascript">
alert("Page End")
</script>三、在 HTML 中嵌入 JS 的第三種方式：引入外部獨立的 JS 文件
這是一堆 JS 代碼，這些 JS 代碼在 HTML 引入的時候，遵循自上而下的順序依次逐行執(zhí)行
alert("Hello World")
alert("Hello Kitty")引入外部獨立的 CSS 文件，這個標(biāo)簽 link 中屬性是 href
<link rel="stylesheet" type="text/css" href=""/>
引入外部獨立的 JS 文件，script 標(biāo)簽引入 js 文件的時候，是 scr 屬性
<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
提問：JS文件能不能引入第二次？
答：能，但是引入第二次，這個操作沒有意義，測試結(jié)果：只要引入一次 JS 文件，JS 文件中的代 碼就會全部執(zhí)行一遍
<script src="../js/1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/1.js" type="text/javascript" charset="utf-8">
alert("hello world 1 這里能執(zhí)行嗎~~~~"); //這里的代碼不會執(zhí)行
</script>提問：單獨的腳本塊能執(zhí)行嗎？
答：能，經(jīng)過測試，發(fā)現(xiàn)其會不斷循環(huán)執(zhí)行。
<script type="text/javascript" >
alert("hello world 單獨的腳本塊能執(zhí)行嗎~~~~");
</script>總結(jié)
到此這篇關(guān)于在HTML中嵌入JS代碼的3種方式總結(jié)的文章就介紹到這了,更多相關(guān)HTML嵌入JS代碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
你不知道的 TypeScript 高級類型(小結(jié))
這篇文章主要介紹了你不知道的 TypeScript 高級類型(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
經(jīng)典面試題之JavaScript?for循環(huán)(var?let)
如果你也在面試找工作,那么也一定遇到過這道for循環(huán)打印結(jié)果的題,下面我們來探討下,對經(jīng)典面試題之js?for循環(huán)相關(guān)知識感興趣的朋友跟隨小編一起看看吧2023-10-10
Map是一組鍵值對的結(jié)構(gòu),具有極快的查找速度,下面這篇文章主要給大家介紹了關(guān)于JS利用map整合雙數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
在我們的日常開發(fā)過程中，我們經(jīng)常會遇到數(shù)字與字符串轉(zhuǎn)換，檢查對象中是否存在對應(yīng)值，條件性操作對象數(shù)據(jù)，過濾數(shù)組中的錯誤值，等等這類處理。本文整理出了一些常用的小技巧，希望大家能喜歡2022-06-06
如果AJAX加載的數(shù)據(jù)是一個HTML片段，而且這個HTML片段還包含腳本<script>塊，那么在你把這數(shù)據(jù)xmlHttp.responseText用innerHTML方法插入到當(dāng)前文檔一個元素中，你會發(fā)現(xiàn)AJAX加載回來的腳本根本沒有執(zhí)行。2010-01-01
這篇文章主要介紹了JavaScript獲取當(dāng)前日期是星期幾的方法,涉及javascript中g(shù)etDay函數(shù)獲取日期的技巧,需要的朋友可以參考下2015-04-04
微信小程序?qū)崿F(xiàn)點餐小程序左側(cè)滑動菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點餐小程序左側(cè)滑動菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JS實現(xiàn)的小火箭發(fā)射動畫效果,涉及javascript基于時間函數(shù)的頁面元素屬性動態(tài)變換實現(xiàn)運動效果相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了JS瀑布流實現(xiàn)方法,結(jié)合實例形式分析了javascript瀑布流加載圖片效果的實現(xiàn)原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
利用hasOwnProperty給數(shù)組去重的面試題分享
obj.hasOwnProperty(attr) 判斷是否是原型中的屬性，false就是原型中的屬性，下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-11-11