當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

js002-在HTML中使用JavaScript

發布時間：2025/4/9 javascript 27 豆豆

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

js002-在HTML中使用JavaScript

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

? 定義了以下6個屬性

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

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

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

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

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

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

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

2.1.1直接嵌入Javascript代碼：

?????? function sayhi(){

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

?????? }

</script>

直接嵌入Javascript代碼時，不要再代碼中出現</script>，否則瀏覽器會認為那是一個結束標簽，通過轉義符可以解決這個問題

有問題：

?????? function sayhi(){

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

?????? }

</script>

解決問題：

?????? function sayhi(){

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

?????? }

</script>

2.1.2 引入外部Javascript文件

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

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

?????? function sayhi(){

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

?????? }

</script>

2.1.3標簽的位置

一般放在頁面的<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>

???? （內容）

?????? </body>

</html>

放在所有內容的后面，這樣瀏覽器在解析Javascript代碼之前就把整個頁面展示出來了，這樣加快了打開速度。

<!DOCTYPE html>

<html>

?????? <head>

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

?????? </head>

?????? <body>

???? （內容）

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

?????? </body>

</html>

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

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

<!DOCTYPE html>

<html>

?????? <head>

<title>example page</title>

?????? </head>

?????? <body>

???? （內容）

</body>

</html>

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

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

<!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>

第二個腳本可能會在第一個腳本之前執行，所以保證兩個腳本的不相關性很重要。

在html文檔中，要把sync屬性設置為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>

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

如：if (a < b)

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

最好適用外部文件，外部文件有以下優點：

可維護性：維護代碼比較輕松

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

適應未來：

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

??? 混雜模式和標準模式

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

? ?在以下集中情況中會顯示出來（一般放在body中）

瀏覽器不支持腳本

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

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

轉載于:https://www.cnblogs.com/lal-fighting/p/5139996.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。