欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在HTML中嵌入JS代碼的3種方式總結(jié)

 更新時(shí)間：2022年11月16日 10:03:22   作者：innocence_123  
現(xiàn)在的前端JavaScript可以說(shuō)是異常火爆,即使并不準(zhǔn)備向前端發(fā)展,但是對(duì)前端的一些基礎(chǔ)知識(shí)還是必須有所了解的,先這篇文章主要給大家介紹了關(guān)于在HTML中嵌入JS代碼的3種方式,需要的朋友可以參考下

一，在HTML中嵌入JS代碼的第一種方式：行間事件

行間事件是指將JavaScript函數(shù)寫(xiě)到HTML元素中的執(zhí)行事件。

1、JavaScript 是一種事件驅(qū)動(dòng)型的編程語(yǔ)言，通常都是在發(fā)生某個(gè)事件的時(shí)候，去執(zhí)行某段代
碼。其中，事件包括很多，例如：鼠標(biāo)單擊事件 click，鼠標(biāo)經(jīng)過(guò)事件 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ì)象，可以直接拿來(lái)使用，全部小寫(xiě)：window

其中 window 對(duì)象有一個(gè)方法/函數(shù)叫做 alert，這個(gè)函數(shù)專(zhuān)門(mén)用來(lái)彈出對(duì)話框。

window.alert('hello world!');

通過(guò)下面這個(gè)代碼可以知道：JS 中的字符串可以使用單引號(hào)括起來(lái)。

(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)簽嵌入，腳本塊的方式。

腳本塊的位置隨意，沒(méi)有限制！

使用工具 ，不打尖括號(hào) <，可以出提示

<script type="text/javascript"></script>
<script src="" type="text/javascript" charset="utf-8"></script>

打了尖括號(hào) 提示無(wú)法出現(xiàn)

<script></script>

在腳本塊中，代碼執(zhí)行的順序都是從上到下的

<!-- 腳本塊的位置隨意，沒(méi)有限制！ -->
<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">
/*在這里直接編寫(xiě) JS 代碼，這些 JS 代碼在頁(yè)面打開(kāi)的時(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>

提問(wèn)：JS文件能不能引入第二次？

答：能，但是引入第二次，這個(gè)操作沒(méi)有意義，測(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>

提問(wèn)：?jiǎn)为?dú)的腳本塊能執(zhí)行嗎？

答：能，經(jīng)過(guò)測(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)文章

最新評(píng)論