今天，我們要介紹的是JavaScript的一個(gè)重要操作——新建文件。
在講這個(gè)操作之前，我們來看幾個(gè)例子。如果一個(gè)網(wǎng)頁需要?jiǎng)討B(tài)地輸出內(nèi)容，例如：你輸入一個(gè)數(shù)字，然后網(wǎng)頁隨即輸出對(duì)應(yīng)數(shù)字的平方值。這時(shí)我們需要JavaScript來完成這個(gè)任務(wù)。而這個(gè)JavaScript代碼就需要放在一個(gè)*.js文件中。
那么，該如何新建一個(gè)JavaScript文件呢？這里介紹兩種方法：
- 右擊鼠標(biāo)，在彈出的選項(xiàng)卡中選擇“新建” - “文本文檔”；
- 打開記事本，然后手動(dòng)保存為*.js格式。這種方式需要手動(dòng)改變文件類型，需要特別注意。
//示例一
function square (num) {
return num * num;
}我們以函數(shù)square()為例：用戶在輸入一個(gè)數(shù)字后，網(wǎng)頁會(huì)調(diào)用此函數(shù)，再將函數(shù)返回值輸出給用戶。這個(gè)函數(shù)也是demo.js文件的核心代碼，它能夠?qū)崿F(xiàn)平方的功能。
這個(gè)小demo其實(shí)很簡單，它展示了我們無論編輯什么JavaScript代碼，都是需要新建一個(gè)文件來承載這個(gè)腳本的。現(xiàn)在，我們還需要加入這個(gè)文件到我們的HTML頁面中：
<head> <title>示例</title> <script type="text/javascript" src="demo.js"></script> </head>
這個(gè)代碼放在HTML頁面的<head>標(biāo)簽中的<title>和</title>之間。它會(huì)自動(dòng)執(zhí)行文件中的JavaScript代碼。
總體來說，在HTML頁面中加入JavaScript語句需要兩個(gè)步驟：新建JavaScript文件和調(diào)用之。
為了讓大家更好地理解，我們?cè)倥e一個(gè)例子。這次，我們的目標(biāo)是為網(wǎng)頁中的某個(gè)按鈕添加一個(gè)點(diǎn)擊事件：當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，程序會(huì)彈出一個(gè)對(duì)話框提示。我們按照剛才的方法，新建一個(gè)“news.js”文件，其中加入以下代碼：
//示例二
var oBtn = document.getElementsByTagName("button")[0];
oBtn.addEventListener("click", function () {
alert("你點(diǎn)擊了這個(gè)按鈕！");
});此代碼為一個(gè)簡單的事件綁定程序，在瀏覽器加載完HTML頁面后，它會(huì)自動(dòng)為頁面的第一個(gè)按鈕添加點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊這個(gè)按鈕，一個(gè)對(duì)話框提示會(huì)彈出，顯示文字“你點(diǎn)擊了這個(gè)按鈕！”。
接下來，我們需要將該文件加入HTML頁面。在HTML頁面的<head>標(biāo)簽中，添加以下代碼：
<head> <title>演示</title> <script type="text/javascript" src="news.js"></script> </head>
這個(gè)代碼所作的事情是，在文檔加載完成后，自動(dòng)為頁面的第一個(gè)按鈕添加一個(gè)點(diǎn)擊事件。這個(gè)事件會(huì)觸發(fā)alert()函數(shù)，在屏幕上彈出提示框，告訴用戶這個(gè)按鈕已經(jīng)被點(diǎn)擊了。
以上就是新建JavaScript文件的過程。如果你想讓網(wǎng)頁在用戶與之交互的時(shí)候更加復(fù)雜、靈活，JavaScript是必不可少的一個(gè)工具。在實(shí)際開發(fā)中，如果你發(fā)現(xiàn)JavaScript代碼越來越多，并愈發(fā)混亂，那就說明你需要開始把JavaScript代碼單獨(dú)放在一個(gè)文件夾中。
希望這篇文章能對(duì)各位開發(fā)者有所裨益！