-
1 # 啊雄的分享
-
2 # 經典慧谷
JavaScript 程式碼可以直接包含在與標記之間放置在 HTML 的任何位置,既可以放在 head 內,也可以放在 body 內。具體用法如下:</p>
<p>其中 URL 處填寫儲存的指令碼檔名即可。這種方法的優點是當你需要修改所有 HTML 文件中的函式定義時,對指令碼庫進行修改即可,這樣便於實現網站的模組化設計。
-
3 # 教育行者何老師
這個問題,你算是問對人了。
Javascript其實可以寫在HTML的任何位置,關鍵是怎麼寫。
1.1.1. Javascript可以寫在script標籤內(內嵌方式)
script type="text/javascript"
alert("這是Javascript程式");
/script
透過type屬性告知瀏覽器標籤內容是Javascript程式碼。
1.1.2. Javascript可以寫在單獨的檔案中(外聯方式)
1.建立以.js結尾的檔案並且寫入Javascript程式碼
2.hello.js(檔名任意):
alert("這是Javascript程式");
3.在html檔案中使用Javascript程式碼檔案
script type="text/javascript" src=’hello.js’/script
1.1.3. JavaScript可以寫在HTML標籤的事件屬性中
1.1.4. Javascript可以A標籤的href屬性中
a標籤:超連結,主要用於跳轉到href屬性設定連線地址;
a可以設定href值字首以“javascript:”(字首其實叫協議,例如:thunder://xxxfasdfasd,迅雷的協議,點選這樣的連線開啟的不是頁面,而是迅雷)開頭,當用戶點選的時候就會告訴瀏覽器這不是一個連線地址,而是需要執行一段javascript程式碼。
1.1.5. script標籤的規範位置
雖然script標籤可以放在html標籤的任何位置,但是為了網頁的整體結構和開發人員多數的契約,我們應該放在如下兩個位置:
a) 所有的script標籤都應該放在頁面的head標籤中;
html
head
title文件標題/title
script src=”xxx” type=”xxx”/script
/head
/html
b) 為了讓內容優先載入顯示,提高使用者體驗,也可以把script標籤放在/body結束標籤之前。
html
head
title文件標題/title
/head
body
網頁內容...........
網頁內容...........
網頁內容...........
script src=”xxx” type=”xxx”/script
/body
/html
1.1.6. 四種方式的區別和用法
區別:
1、內嵌方式的Javascript只能夠在當前html檔案中使用;
2、外聯方式的js檔案可以被多個html頁面使用;
3、onclick是一個事件(發現什麼什麼後)屬性,只有發現後才執行;
script標籤選擇:如果一個Javascript程式碼被多個html檔案使用,請選擇外聯方式, 或者可以選擇內嵌方式,策略與css一樣。
-
4 # 生活有點淡
<script>
使用<script>元素的方式有兩種:直接在頁面中嵌入JavaScript程式碼和包含外部JavaScript檔案。
包含在<script>元素內部的JavaScript程式碼將從上至下依次解釋。直譯器會解釋到一個函式的定義,然後將該定義儲存在自己的環境當中。在直譯器對<script>元素內部的所有程式碼求值完畢之前,頁面中的其餘內容都不會被瀏覽器載入或顯示。
標籤的位置
按照傳統的做法,所有元素都應該放在頁面的<head>元素中,例如:
這樣,在解析包含的 JavaScript 程式碼之前,頁面的內容將完全呈現在瀏覽器中。而使用者也會因為瀏 覽器視窗顯示空白頁面的時間縮短而感到開啟頁面的速度加快了。
延遲指令碼(defer)
HTML 4.01 為標籤定義了 defer 屬性。這個屬性的用途是表明指令碼在執行時不會影響頁 面的構造。也就是說,指令碼會被延遲到整個頁面都解析完畢後再執行。因此,在<script>元素中設定 defer 屬性,相當於告訴瀏覽器立即下載,但延遲執行。
在這個例子中,雖然我們把元素放在了文件的<head>元素中,但其中包含的指令碼將延遲 到瀏覽器遇到</html>標籤後再執行。HTML5 規範要求指令碼按照它們出現的先後順序執行,因此第一 個延遲指令碼會先於第二個延遲指令碼執行,而這兩個指令碼會先於 DOMContentLoaded 事件 執行。在現實當中,延遲指令碼並不一定會按照順序執行,也不一定會在 DOMContentLoaded 事件觸發 前執行,因此最好只包含一個延遲指令碼。 前面提到過,defer 屬性只適用於外部指令碼檔案。這一點在 HTML5 中已經明確規定,因此支援 HTML5 的實現會忽略給嵌入指令碼設定的 defer 屬性。IE4~IE7 還支援對嵌入指令碼的 defer 屬性,但 IE8 及之後版本則完全支援 HTML5 規定的行為。
非同步指令碼(async )
HTML5 為元素定義了 async 屬性。這個屬性與 defer 屬性類似,都用於改變處理指令碼
的行為。同樣與 defer 類似,async 只適用於外部指令碼檔案,並告訴瀏覽器立即下載檔案。但與 defer 不同的是,標記為 async 的指令碼並不保證按照指定它們的先後順序執行。例如:
在以上程式碼中,第二個指令碼檔案可能會在第一個指令碼檔案之前執行。因此,確保兩者之間互不依賴 非常重要。指定 async 屬性的目的是不讓頁面等待兩個指令碼下載和執行,從而非同步載入頁面其他內容。 為此,建議非同步指令碼不要在載入期間修改 DOM。 非同步指令碼一定會在頁面的 load 事件前執行,但可能會在 DOMContentLoaded 事件觸發之前或之 後執行。支援非同步指令碼的瀏覽器有 Firefox 3.6、Safari 5 和 Chrome。
在包含外部 JavaScript 檔案時,必須將 src 屬性設定為指向相應檔案的 URL。而這個檔案既可 以是與包含它的頁面位於同一個伺服器上的檔案,也可以是其他任何域中的檔案。
所有元素都會按照它們在頁面中出現的先後順序依次被解析。在不使用 defer 和 async 屬性的情況下,只有在解析完前面<script>元素中的程式碼之後,才會開始解析後面 <script>元素中的程式碼。
由於瀏覽器會先解析完不使用 defer 屬性的<script>元素中的程式碼,然後再解析後面的內容, 所以一般應該把<script>元素放在頁面最後,即主要內容後面,</body>標籤前面。
使用 defer 屬性可以讓指令碼在文件完全呈現之後再執行。延遲指令碼總是按照指定它們的順序執行。
使用 async 屬性可以表示當前指令碼不必等待其他指令碼,也不必阻塞文件呈現。不能保證非同步腳 本按照它們在頁面中出現的順序執行。
-
5 # 大蘿蔔與小白兔
方法一:
透過外部原始檔來包含javascript,這是最正確的方式,把結構從行為中分離出來.
<head> <script type="text/javascript" src="source.js"></script> </head>
-------------------------------------------
方法二:
把嵌入式的指令碼新增到文件的<head>中, 不推薦這樣做
<head> <script type="text/javascript" > //javaScript程式碼 </script> </head>
--------------------------------------------
方法三:
把嵌入式的指令碼新增到文件的<body>中, 維一的理由是要使用document.write()方法,但我們有更好方法來替代他.
如:createElement()方法, appendChild()方法, 非EMCAscript標準的 innerHTML屬性 .
<body> <script type="text/javascript" > //javaScript程式碼 document.write("html....."); </script> </body>
-----------------------------------------------
方法四:
非官方EMCA標準的 javascript: 字首
可以成功開啟一個新的視窗.
要注意window.open()方法是有返回值的, 原先的頁面會被返回的結果覆蓋.
位址列變成:javascript:window.open("http://www.google.com");
頁面內容變成:[object Window]
所在要再包一層function(), 做到無返回值.
-
6 # 玉蜀黍芯
!DOCTYPE htmlhtmlhead meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1" title我的部落格/title script src="js/1.js"/script/head
相關內容
- div模組裡可以包含的html元素有?
- 用HTML、CSS和JavaScript寫移動應用,有哪些值得推薦的框架、工具或者庫?
- 前端學了HTML css javascript,下一步應該學什麼?
- 如果PHP不包含JavaScript的話,PHP跟JavaScript哪個難?
- 學習前端,需要對javacript深刻學習嗎?還是隻要會在html中使用javascript就行?
- web前端中html,css和JavaScript這三個的關係是怎麼樣的?
- 零基礎的如何學好HTML+CSS+JavaScript?如何堅持學習?
- 如果我瞭解HTML、CSS和JavaScript,我可以建立什麼有趣的東西?
- JavaScript該怎麼學?
在HTML包涵Javascript有四種方法:
1. 內嵌,放置在<script>和</script>標籤之間 ;
JavaScript是Web的原始指令碼語言,在預設情況下,<script>元素包含或引用JavaScript程式碼。如果要使用不標準的指令碼語言,如VBScript,就必須用type屬性指定指令碼的MIME型別
type 屬性的預設值是 ”text/javascript“。
<script>
function my(){
... ...
}
window.onload = my;
</script>
2.放置在有<script>標籤的src屬性指定的外部檔案中 ;
<script>標籤支援src屬性,這個屬性指定包含JavaScript程式碼的檔案的URL
<script src="../../scripts/my.js"></script>
3.放置自HTML事件處理程式中,該事件處理程式由onclick或onmouseover這樣的HTML屬性值指定它 ;
當指令碼所在的HTML檔案被載入瀏覽器時,這個腳本里的JavaScript程式碼只會執行一次。JavaScript程式碼可以透過把函式賦值給Element物件的屬性來註冊事件處理程式。這個Element物件表示文件裡的一個HTML元素。
<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">
4.放在一個URL裡,這個URL使用特殊的協議”javascript“協議;
在URL後面跟著一個javascript:協議限定符,是另一種嵌入JavaScript程式碼到客戶端的方式。這種特殊的協議型別指定URL內容為任意字串,這個字串是會被JavaScript直譯器執行的JavaScript程式碼。它被當作單獨的一行程式碼對待,這意味著語句之間必須用分號隔開,而註釋必須用/**/註釋代替。javascript:URL能識別的資源是轉換成字串的執行程式碼的返回值。如果程式碼返回 undefined,那麼這個資源是沒有內容的。
javascript:URL可以在可以使用常規URL的任意地方:比如<a>標記的href屬性,<form>的action屬性,甚至window.open()方法的引數。
程式碼如:
………..
</a >