Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 用法

HTML 中的腳本必須位於<script> 與</script> 標籤之間。

腳本可被放置在HTML 頁面的<body> 和<head> 部分中。


<script> 標籤

如需在HTML 頁面中插入JavaScript,請使用<script> 標籤。

<script> 和</script> 會告訴JavaScript 在何處開始和結束。

<script> 和</script> 之間的代碼行包含了JavaScript:

<script>
alert("我的第一个 JavaScript");
</script>

您無需理解上面的代碼。 只需明白,瀏覽器會解釋並執行位於<script> 和</script>之間的JavaScript 代碼

lamp 那些老舊的實例可能會在<script> 標籤中使用type="text/javascript"。 現在已經不必這樣做了。 JavaScript 是所有現代瀏覽器以及HTML5 中的默認腳本語言。


<body> 中的JavaScript

在本例中,JavaScript 會在頁面加載時向HTML 的<body> 寫文本:

實例

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

嘗試一下»


JavaScript 函數和事件

上面例子中的JavaScript 語句,會在頁面加載時執行。

通常,我們需要在某個事件發生時執行代碼,比如當用戶點擊按鈕時。

如果我們把JavaScript 代碼放入函數中,就可以在事件發生時調用該函數。

您將在稍後的章節學到更多有關JavaScript 函數和事件的知識。


在<head> 或者<body> 的JavaScript

您可以在HTML 文檔中放入不限數量的腳本。

腳本可位於HTML 的<body> 或<head> 部分中,或者同時存在於兩個部分中。

通常的做法是把函數放入<head> 部分中,或者放在頁面底部。 這樣就可以把它們安置到同一處位置,不會干擾頁面的內容。


<head> 中的JavaScript 函數

在本例中,我們把一個JavaScript 函數放置到HTML 頁面的<head> 部分。

該函數會在點擊按鈕時被調用:

實例

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

</head>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" onclick="myFunction()" >尝试一下</button>

</body>
</html>


嘗試一下»


<body> 中的JavaScript 函數

在本例中,我們把一個JavaScript 函數放置到HTML 頁面的<body> 部分。

該函數會在點擊按鈕時被調用:

實例

<!DOCTYPE html>
<html>
<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" onclick=" myFunction() ">尝试一下</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

</body>
</html>


嘗試一下»


外部的JavaScript

也可以把腳本保存到外部文件中。 外部文件通常包含被多個網頁使用的代碼。

外部JavaScript 文件的文件擴展名是.js。

如需使用外部文件,請在<script> 標籤的"src" 屬性中設置該.js 文件:

實例

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

嘗試一下»

你可以將腳本放置於<head> 或者<body>中實際運行效果與您在<script> 標籤中編寫腳本完全一致。

myScript.js 文件代碼如下:

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
lamp 外部腳本不能包含<script> 標籤。