javascript
❗HTML引入JavaScript的三种常用方式汇总❗
引言
JavaScript是一門(mén)腳本語(yǔ)言，雖然名字里有Java，但是和Java沒(méi)有一點(diǎn)關(guān)系，它原名是LiveScript；現(xiàn)在的前端JavaScript可以說(shuō)是異常火爆，但是博主本人并不準(zhǔn)備向前端發(fā)展，但是對(duì)前端的一些基礎(chǔ)知識(shí)還是必須有所了解的；
上一篇博客：?HTML引入CSS的三種常用方式匯總? 已經(jīng)介紹了HTML嵌入CSS的三種方式，這里就來(lái)介紹HTML如何嵌入JavaScript；
ps：由于作者規(guī)劃以后往java后端發(fā)展，所以對(duì)于前端的知識(shí)只是了解了部分主要內(nèi)容，以應(yīng)用為主，所以如果有錯(cuò)誤請(qǐng)各位及時(shí)指正！
事件句柄
JS是一門(mén)事件驅(qū)動(dòng)型的編程語(yǔ)言，依靠事件去驅(qū)動(dòng)，然后執(zhí)行對(duì)應(yīng)的程序；
這里就拿鼠標(biāo)點(diǎn)擊（click）事件來(lái)舉例子；
每個(gè)每個(gè)事件都會(huì)有對(duì)應(yīng)的事件句柄，就比如這個(gè)click例子，事件句柄為：onclick
注：事件和事件句柄的區(qū)別是：事件句柄 是在 事件 單詞前添加一個(gè)on
而且事件句柄是以HTML標(biāo)簽的屬性存在的；
所以我們這個(gè)例子要實(shí)現(xiàn)的功能就是：用戶點(diǎn)擊以下按鈕，彈出消息框
那么如何通過(guò)點(diǎn)擊按鈕這個(gè)事件彈出消息框呢？
??????在JS中有一個(gè)內(nèi)置的對(duì)象叫做window，全部小寫(xiě)，可以直接拿來(lái)使用，window代表的是瀏覽器對(duì)象；
??????window對(duì)象有一個(gè)函數(shù)叫做:alert，用法是：window.alert("消息");這樣就可以彈窗了；
示例如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>HTML中嵌入JS代碼的第一種方式</title></head><body><input type="button" value="hello" onclick="window.alert('hello zhangsan')window.alert('hello lis')window.alert('hello wangwu')"/><!-- window. 可以省略。--><input type="button" value="hello" onclick="alert('hello zhangsan')alert('hello lis')alert('hello wangwu')"/></body> </html>腳本塊
這種方法和之前CSS總結(jié)中提到的內(nèi)部CSS樣式很像，也很簡(jiǎn)單
格式為：
示例如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>HTML中嵌入JS代碼的第二種方式</title><!--腳本塊可以出現(xiàn)在任何地方，這里就不一一示范了，感興趣可以自己嘗試--><script type="text/javascript">/*暴露在腳本塊當(dāng)中的程序，在頁(yè)面打開(kāi)的時(shí)候執(zhí)行，并且遵守自上而下的順序依次逐行執(zhí)行。（這個(gè)代碼的執(zhí)行不需要事件）*/window.alert("head............");//alert函數(shù)會(huì)阻塞整個(gè)HTML頁(yè)面的加載</script></head><body><!--注意觀察按鈕1，2的出現(xiàn)時(shí)機(jī)，可以直觀體會(huì)到j(luò)s自上而下執(zhí)行效果--><input type="button" value="我是一個(gè)按鈕對(duì)象1" /><script type="text/javascript">window.alert("Hello World!");window.alert("Hello JavaScript!");</script><input type="button" value="我是一個(gè)按鈕對(duì)象2" /></body> </html>引入外部獨(dú)立的js文件
為了讓HTML頁(yè)面和js腳本更好的分離，可以將js腳本單獨(dú)保存到一個(gè)*.js的文件中，然后在HTML中導(dǎo)入即可，
導(dǎo)入的語(yǔ)法如下：<scrip type="text/javascript" src="test.js"></script>
再次強(qiáng)調(diào)：結(jié)束部分</script>一定要有，否則網(wǎng)頁(yè)不會(huì)顯示！
還有一點(diǎn)：一定要注意區(qū)分，在CSS中引入文件通過(guò)link，使用的是href="URL(統(tǒng)一資源定位器)"
????????????????????????????????????????????????????????????????????????????????????而JS使用的是src="URL(統(tǒng)一資源定位器)"
千萬(wàn)不要弄混！
js代碼：
window.alert("hello js!"); window.alert("hello js!"); window.alert("hello js!"); window.alert("hello js!"); window.alert("hello js!"); window.alert("ending");html代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>HTML中嵌入JS代碼的第三種方式：引入外部獨(dú)立的js文件</title></head><body><!--這里就導(dǎo)入了js01文件，并運(yùn)行--><script type="text/javascript" src="js01.js">// 這里寫(xiě)的代碼不會(huì)執(zhí)行，執(zhí)行的是js01文件// window.alert("Test");</script><script type="text/javascript">alert("hello jack!");</script></body> </html>總結(jié)
匯總一下這三點(diǎn)：
- 事件句柄
- 腳本塊
- 引入外部獨(dú)立的js文件
JS的內(nèi)容相對(duì)CSS和HTML還有很多，這也只是一個(gè)起點(diǎn)，希望我們能一起加油！
歡迎大家的點(diǎn)評(píng)！
總結(jié)
以上是生活随笔為你收集整理的❗HTML引入JavaScript的三种常用方式汇总❗的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ❗HTML引入CSS的三种常用方式汇总❗
- 下一篇： 在 Eclipse 上建立一个 JSP