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