(轉)輕鬆學習JavaScript三：JavaScript與HTML的結合

時間 2019-11-24

標籤輕鬆學習 javascript html 結合欄目 JavaScript 简体版

原文原文鏈接

摘自：http://blog.csdn.net/erlian1992 javascript

HTML中的JavaScript腳本必須位於<script>與</script>標籤之間，JavaScript腳本可被放置在HTML頁面的html

<body>標籤和<head>標籤中，這種視狀況而定，通常放在<head>標籤內。java

一<script> 標籤瀏覽器

如需在HTML頁面中插入JavaScript腳本，請使用<script>標籤。<script>和</script>會告訴JavaScript在何處開始函數

和結束。<script>和</script>之間的代碼行包含了JavaScript：學習

[html] view plain copy print ?

<span style="font-size:18px;"><script type="text/javascript">
alert("歡迎來到JavaScript世界！！！");
</script></span>

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

舊的實例可能會在<script>標籤中使用type="text/javascript"。如今已經沒必要這樣作了。JavaScript是全部現代瀏覽器spa

以及HTML5中的默認腳本語言。鑑於剛剛學習JavaScript語言的可使用！.net

二<body>中的JavaScriptxml

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

實例代碼：

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript腳本語言</title>
>
</head>
<body>
<p>
JavaScript 可以直接寫入 HTML 輸出流中：
</p>
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 輸出流中使用 <strong>document.write</strong>。
若是您在文檔已加載後使用它（好比在函數中），會覆蓋整個文檔。
</p>
</body>
</html>

咱們先無論JavaScript代碼怎麼寫和怎麼運行，先來看運行結果：

三JavaScript 函數和事件

上面例子中的 JavaScript 語句，會在頁面加載時執行。一般，咱們須要在某個事件發生時執行代碼，好比當用戶

點擊按鈕時。若是咱們把 JavaScript 代碼放入函數中，就能夠在事件發生時調用該函數。

四<head>或<body>中的JavaScript

您能夠在 HTML 文檔中放入不限數量的腳本。腳本可位於 HTML 的 <body> 或 <head> 部分中，或者同時存在於

兩個部分中。一般的作法是把函數放入 <head> 部分中，或者放在頁面底部。這樣就能夠把它們安置到同一處位置，

不會干擾頁面的內容。

五<head>中的JavaScript函數

在本例中，咱們把一個JavaScript函數放置到HTML頁面的<head>部分。該函數會在點擊按鈕時被調用：

實例代碼：

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript腳本語言</title>
<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">點擊這裏</button>
</body>
</html>

運行的結果爲：

點擊按鈕後的效果爲：

六<body>中的JavaScrip 函數

在本例中，咱們把一個JavaScript函數放置到HTML頁面的<body>部分。該函數會在點擊按鈕時被調用：

實例代碼：

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript腳本語言</title>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">點擊這裏</button>
<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>

運行的結果與上述五的結果同樣！

提示：咱們把 JavaScript 放到了頁面代碼的底部，這樣就能夠確保在 <p> 元素建立以後再執行腳本。

七外部的JavaScript

咱們也能夠把腳本保存到外部文件中。外部文件一般包含被多個網頁使用的代碼。外部 JavaScript 文件的文件擴

展名是 .js。如需使用外部文件，請在 <script> 標籤的 "src" 屬性中設置該 .js 文件，若是有大量的JavaScript代碼，我

們提倡使用外部的JavaScript方式，通常咱們也採用分離的方式鏈接到HTML文檔中。

實例

HTML代碼：

[html] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript腳本語言</title>
<script type="text/javascript" src="/js/myScript.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">點擊這裏</button>
<p><b>註釋：</b>myFunction 保存在名爲 "myScript.js" 的外部文件中。</p>
</body>
</html>