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

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

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

一，在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)語句各自獨占一行，通?？梢允÷越Y(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)文章

最新評論