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