3374财神网站港彩

1.3 JavaScript在HTML中的應用

通過前面的介紹，我們知道JavaScript主要是用來嵌入HTML中使用的，那么到底怎么使用呢？JavaScript在HTML中的應用是很靈活的，但大致上有下面三種使用方式。

JavaScript代碼是可以直接在HTML中編寫的，怎么編寫的，其實很簡單，我們只要提供一對<script>…</script>即可，在這對標記中編寫的代碼瀏覽器就不會把它認為是HTML代碼了，當然，在實際編寫時，在這對標記中還有其他一些屬性，如表1-1所示。

微課1-2 JavaScript在HTML中的應用

表1-1 <script>標記屬性說明

常用的在HTML中嵌入腳本的語法格式如下。

提示

例如：使用Dreamwaver工具編寫案例，在HTML中直接嵌入JavaScript腳本，在頁面上彈出窗口顯示“Hello！歡迎來到JavaScript世界”，如圖1-8所示，顯示結果如圖1-9所示。

圖1-8 在HTML中直接嵌入JavaScript腳本

圖1-9 顯示結果

鏈接外部的JavaScript腳本文件是通過<script>...</script>標記的“src”屬性來實現，實現步驟如下。

（1）建立一個JavaScript文件，JavaScript文件的擴展名是.js，并且在單獨建立JavaScript文件時不需要添加<script>...</script>標簽，直接寫文件內容即可，如下代碼所示。

alert("Hello，歡迎來到JavaScript世界！");

（2）將建立好的以.js為擴展名的文件保存到鏈接它的HTML文件相同的目錄下。（3）在HTML文件中使用<script>標簽的“src”屬性鏈接該文件，如下代碼所示。

例如，在HTML文件hello.html的同一路徑下創建一個JavaScript文件“hello.js”，然后使用<script>標簽的“src”屬性鏈接該文件，如圖1-10所示。

圖1-10 鏈接外部的JavaScript

提示

在使用<script>標簽的“src”屬性鏈接外部.js文件時，外部.js文件要同HTML文件在同一目錄下，因為“src”的路徑文件一般使用相對路徑來實現。

有時我們需要使用JavaScript代碼實現一個簡單的頁面效果，那么我們可以直接在標簽中使用。有如下兩種方式。

（1）使用“javascript:”調用

我們在HTML代碼中，使用“javascript:”的方式來調用簡單的JavaScript語句，如圖1-11所示。

圖1-11 使用“javascript:”方式調用

（2）結合事件調用

JavaScript支持很多的事件，例如鼠標單擊、鼠標滑過、按下鍵盤等。我們將JavaScript代碼與事件結合，實現一些特效，如下代碼所示。