html嵌入javascript代碼的三種方式
一、概念
javascript是運(yùn)行在瀏覽器中的腳本語(yǔ)言，運(yùn)行在瀏覽器的內(nèi)存當(dāng)中，不需要程序員手動(dòng)編譯，編寫(xiě)玩源代碼之后，瀏覽器直接打開(kāi)解釋執(zhí)行，簡(jiǎn)稱(chēng)JS。
二、html嵌入javascript代碼的三種方式
JS是一門(mén)事件驅(qū)動(dòng)型的編程語(yǔ)言，依靠事件去驅(qū)動(dòng)，然后執(zhí)行對(duì)應(yīng)的程序。
例如：在JS中有很多事件，其中有一個(gè)事件叫做：鼠標(biāo)單擊，click，并且任何事件都會(huì)對(duì)應(yīng)一個(gè)事件句柄onclick。
1.事件句柄是以html標(biāo)簽的屬性存在的。
在按鈕標(biāo)簽中設(shè)置onclick屬性值，則點(diǎn)擊按鈕發(fā)生click事件后，注冊(cè)在onclick后面的js代碼會(huì)被瀏覽器自動(dòng)調(diào)用。
示例如下：
解釋?zhuān)海?）在JS中有一個(gè)內(nèi)置的對(duì)象window,代表瀏覽器對(duì)象（窗口），window對(duì)象有一個(gè)函數(shù)alert，用法是window.alert(“消息”)，點(diǎn)擊按鈕后彈出帶有消息的窗口，"window."可以省略不寫(xiě)直接寫(xiě)alert語(yǔ)句；
（2）java字符串可以使用雙引號(hào)，也可以使用單引號(hào)；
（3）JS的一條語(yǔ)句結(jié)束之后可以使用分號(hào)也可以不用。
（4）window.alert()語(yǔ)句在顯示窗口時(shí)并沒(méi)有執(zhí)行完，點(diǎn)擊確認(rèn)窗口消失后才執(zhí)行完（alert有阻塞當(dāng)前頁(yè)面加載的作用）。
2.腳本塊的方式
在body標(biāo)記中嵌入script標(biāo)記，JS代碼寫(xiě)在script標(biāo)記中。此時(shí)的代碼在頁(yè)面打開(kāi)時(shí)執(zhí)行，并且遵循自上而下的順序依次執(zhí)行，即代碼的執(zhí)行不需要事件。javascipt的腳本塊可以有多個(gè)，可以出現(xiàn)在任意位置。javascript可以有//開(kāi)頭的單行注釋和/**/包含的多行注釋。
示例如下：
效果如下：
刷新頁(yè)面后一直在加載頁(yè)面，也沒(méi)有顯示input標(biāo)記，點(diǎn)擊確定后頁(yè)面加載完畢：
3.引入外部獨(dú)立的.js文件
.js文件內(nèi)容與腳本塊的方式中script標(biāo)記中的內(nèi)容一致。代碼也會(huì)按照順序自上而下地執(zhí)行。同一個(gè).js文件可以被引入多次。
引入方式，在body 標(biāo)記中加script標(biāo)簽；
到此這篇關(guān)于html嵌入javascript代碼的三種方式的文章就介紹到這了,更多相關(guān)html嵌入javascript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
我想在頁(yè)面里把想要的關(guān)鍵詞加亮凸出(用顏色區(qū)分出來(lái))顯示,這樣讓客戶一眼能看到重的東西,然后在加亮的關(guān)鍵詞上可以加上超連接.請(qǐng)問(wèn)高手們?cè)趺磳?shí)現(xiàn)宋的功能.就像搜索引擎的那種..搜索關(guān)鍵詞的時(shí)候就顯示紅色的.2008-06-06
ES6代碼轉(zhuǎn)ES5詳細(xì)教程(babel安裝使用教程)
Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行，這意味著，你可以用 ES6 的方式編寫(xiě)程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持，這篇文章主要介紹了ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程),需要的朋友可以參考下2023-01-01
ES6 Set結(jié)構(gòu)的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Set結(jié)構(gòu)的應(yīng)用,結(jié)合實(shí)例形式分析了ES6 set結(jié)構(gòu)的功能、特點(diǎn)、常見(jiàn)用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
微信小程序?qū)崿F(xiàn)活動(dòng)報(bào)名登記功能(實(shí)例代碼)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)活動(dòng)報(bào)名登記,本篇將介紹使用微信小程序?qū)崿F(xiàn)發(fā)起一個(gè)活動(dòng)報(bào)名的設(shè)計(jì)，以此為基礎(chǔ)，我們可以掌握微信小程序表單的基本用法，進(jìn)而在諸如疫情信息登記、出入報(bào)備等場(chǎng)景中使用小程序進(jìn)行開(kāi)發(fā)，滿足相關(guān)的需求，需要的朋友可以參考下2022-09-09
一個(gè)小項(xiàng)目中用到，奉命進(jìn)行修改，定位到2009-03-03
javascript結(jié)合html5 canvas實(shí)現(xiàn)(可調(diào)畫(huà)筆顏色/粗細(xì)/橡皮)的涂鴉板
js+html5 canvas實(shí)現(xiàn)的涂鴉畫(huà)板特效,可調(diào)畫(huà)筆顏色|粗細(xì)|橡皮,可以保存涂鴉效果為圖片編碼，測(cè)試了下還不錯(cuò)，感興趣的朋友可以參考下2013-04-04
大家在使用微信小程序的時(shí)候會(huì)有緩存,雖然小程序的緩存數(shù)值相比APP要少的多,下面這篇文章主要給大家介紹了關(guān)于如何清除手機(jī)上小程序緩存的相關(guān)資料,需要的朋友可以參考下2022-08-08
JS操作CSS隨機(jī)改變網(wǎng)頁(yè)背景實(shí)現(xiàn)思路
JS和CSS讓頁(yè)面每次刷新隨機(jī)產(chǎn)生一張背景圖，當(dāng)然我的回答是可以的，下面是具體的實(shí)現(xiàn)思路，感興趣的朋友可以參考下2014-03-03
webpack4 配置 ssr 環(huán)境遇到“document is not defined”
這篇文章主要介紹了webpack4 配置 ssr 環(huán)境遇到“document is not defined”，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
javascript實(shí)現(xiàn)移動(dòng)的模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)的模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09