當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

js002-在HTML中使用JavaScript

發(fā)布時(shí)間：2025/4/9 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 js002-在HTML中使用JavaScript 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

js002-在HTML中使用JavaScript

2.1??????????? <script>元素

? 定義了以下6個(gè)屬性

async: 可選。表示應(yīng)該立即下載腳本，但不妨礙頁(yè)面中的其他操作，比如下載其他資源或者等待加載其他腳本。只對(duì)外部腳本文件有效。(異步的)

charset：可選。表示通過(guò)src屬性指定的代碼的字符集。

defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之后再執(zhí)行，只對(duì)外部腳本有效。IE7及其更早的版本也支持這個(gè)屬性。（延遲，延期）

src：可選。表示包含要執(zhí)行代碼的外部文件。

type：可選。可以看成是language的替代屬性，表示編寫代碼使用的腳本語(yǔ)言的內(nèi)同類型

<script type="text/javascript"></script>

使用<script>元素的方法有兩種在：直接嵌入Javascript代碼和包含外部Javascript文件

2.1.1直接嵌入Javascript代碼：

?????? function sayhi(){

????????????? alert("hi~");

?????? }

</script>

直接嵌入Javascript代碼時(shí)，不要再代碼中出現(xiàn)</script>，否則瀏覽器會(huì)認(rèn)為那是一個(gè)結(jié)束標(biāo)簽，通過(guò)轉(zhuǎn)義符可以解決這個(gè)問(wèn)題

有問(wèn)題：

?????? function sayhi(){

?????? ?????? alert("</script>");

?????? }

</script>

解決問(wèn)題：

?????? function sayhi(){

?????? ?????? alert("<\/script>");

?????? }

</script>

2.1.2 引入外部Javascript文件

?必須包含src屬性，這個(gè)屬性值是一個(gè)指向外部Javascript文件的鏈接。

<script type="text/javascript" src="example.js">

?????? function sayhi(){

????????????? alert("hi~");

?????? }

</script>

2.1.3標(biāo)簽的位置

一般放在頁(yè)面的<head>元素里面

<!DOCTYPE html>

<html>

?????? <head>

????????????? <title>example page</title>

????????????? <script type="text/javascript" src="example1.js"></script>

????????????? <script type="text/javascript" src="example2.js"></script>

?????? </head>

?????? <body>

???? （內(nèi)容）

?????? </body>

</html>

放在所有內(nèi)容的后面，這樣瀏覽器在解析Javascript代碼之前就把整個(gè)頁(yè)面展示出來(lái)了，這樣加快了打開(kāi)速度。

<!DOCTYPE html>

<html>

?????? <head>

????????????? <title>example page</title>

?????? </head>

?????? <body>

???? （內(nèi)容）

????????????? <script type="text/javascript" src="example2.js"></script>

?????? </body>

</html>

2.1.4延遲腳本 defer屬性 （只適用于外部文件）

在<script>元素中使用defer屬性，相當(dāng)于告訴瀏覽器立即下載，單延遲執(zhí)行。（在遇到</html>元素后才執(zhí)行）

<!DOCTYPE html>

<html>

?????? <head>

<title>example page</title>

?????? </head>

?????? <body>

???? （內(nèi)容）

</body>

</html>

在html文檔中，要把defer屬性設(shè)置為defer="defer"。

2.1.5異步腳本 async屬性，用來(lái)改變處理腳本的行為，只適用于外部腳本

<!DOCTYPE html>

<html>

?????? <head>

????????????? <title>example page</title>

????????????? <script type="text/javascript" async="async" src="example1.js"></script>

????????????? <script type="text/javascript" async="async" src="example2.js"></script>

?????? </head>

?????? <body>

?????? </body>

</html>

第二個(gè)腳本可能會(huì)在第一個(gè)腳本之前執(zhí)行，所以保證兩個(gè)腳本的不相關(guān)性很重要。

在html文檔中，要把sync屬性設(shè)置為async="async"

2.1.6在xhtml中的用法

?????? function compare(a, b){

????????????? if (a < b) {

???????????????????? alert("A is less than B");

????????????? }else if (a > b) {

???????????????????? alert("A is greater than B");

????????????? }else{

???????????????????? alert("A is equal to B");

????????????? }

?????? }

</script>

用(<)? 替換代碼中的小于號(hào)(<)

如：if (a < b)

2.2??????????? 嵌入代碼與外部文件

最好適用外部文件，外部文件有以下優(yōu)點(diǎn)：

可維護(hù)性：維護(hù)代碼比較輕松

可緩存：瀏覽器能根據(jù)具體的設(shè)置緩存連接的所有外部Javascript文件

適應(yīng)未來(lái)：

2.3??????????? 文檔模式

??? 混雜模式和標(biāo)準(zhǔn)模式

2.4??????????? <noscript>元素

? ?在以下集中情況中會(huì)顯示出來(lái)（一般放在body中）

瀏覽器不支持腳本

瀏覽器支持腳本，但是腳本被禁用

2.5??????????? ?

版權(quán)聲明：未經(jīng)作者同意，不得私自轉(zhuǎn)載。http://www.cnblogs.com/lal-fighting/

轉(zhuǎn)載于:https://www.cnblogs.com/lal-fighting/p/5139996.html

總結(jié)

以上是生活随笔為你收集整理的js002-在HTML中使用JavaScript的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。