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)文章
利用Math.js解決JS計(jì)算小數(shù)精度丟失問(wèn)題
電商系統(tǒng)中訂單、庫(kù)存中有數(shù)字等加減乘除算術(shù),下面這篇文章主要給大家介紹了關(guān)于利用Math.js解決JS計(jì)算小數(shù)精度丟失問(wèn)題的相關(guān)資料,mathjs是一個(gè)前端在計(jì)算上面必定會(huì)用到的類(lèi)庫(kù),需要的朋友可以參考下2022-04-04gridpanel動(dòng)態(tài)加載數(shù)據(jù)的實(shí)例代碼
這篇文章介紹了gridpanel動(dòng)態(tài)加載數(shù)據(jù)的實(shí)例代碼,有需要的朋友可以參考一下2013-07-07javascript 從if else 到 switch case 再到抽象
大家覺(jué)得在接手遺留代碼時(shí),見(jiàn)到什么東東是最讓人感到不耐煩的?復(fù)雜無(wú)比的 UML ?我覺(jué)得不是。2010-07-07JavaScript調(diào)用后臺(tái)的三種方法實(shí)例
這篇文章介紹了JavaScript調(diào)用后臺(tái)的三種方法實(shí)例,有需要的朋友可以參考一下2013-10-10深入淺析JavaScript中prototype和proto的關(guān)系
prototype,每一個(gè)函數(shù)對(duì)象都有一個(gè)顯示的prototype屬性,而proto每個(gè)對(duì)象都有一個(gè)名為_(kāi)proto_內(nèi)部隱藏屬性。本文給大家介紹JavaScript中prototype和proto的關(guān)系,需要的朋友參考下2015-11-11javascript 操作Word和Excel的實(shí)現(xiàn)代碼
javascript 操作Word和Excel的實(shí)現(xiàn)代碼, 需要的朋友可以參考下。2009-10-10使用Bootstrap美化按鈕實(shí)例代碼(demo)
這篇文章主要介紹了使用Bootstrap美化按鈕實(shí)例代碼(demo),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02