JavaScript初級教程(第四課)第1/2頁

來源:互聯網
上載者:User

我們已瞭解變數可是數字、字串及對象參數。還有一個Javascript的重要部分:數組。
數組是一種列表。各種列表比如名單、URL以顏色列表都可以儲存在數組中。
這裡我們產生顏色的數組:
var colors = new Array("red","blue","green");
現在你就有了一個數組,你能對它做什麼呢?數組的優點在於數組中的各個元素可以通過數字調用。第一個元素的數字是0,可以用以下方式調用:
var the_element = colors[0];
執行這一行JavaScript指令時,變數the_element所被賦予的值是字串"red" 。通過寫出數組的名稱並將數組中元素的順序號放在方括弧內就可調用數組中的該元素。數組中第2個元素的順序號是1。
一旦產生數組後,你可以添加和修改數組值。如果你打算將顏色數組的第1個元素有紅色該為紫色,你可以這樣做:
colors[0] = "purple";
數組經常用於迴圈。下面將講數組和迴圈的應用。
數組是一項非常有用的東西,因為你可以迴圈調用數組中的各個元素執行某項功能。以下是迴圈顯示一個URL數組中的各個元素的例子。
首先,要使該例子發揮作用,我們需要聲明一些變數:
var url_names = new Array("hits.org","awaken.org","bianca.com");
var a_url;
接下來,我們迴圈調用數組中的各個元素,開啟每個URL並對待使用者點擊alert框的OK按鈕:
for(loop=0; loop<url_names.length;loop++)
{
// make the name of a url, for example http://www.hits.org/
a_url = "http://www." + url_names[loop] + "/";
// open a window
var new_window=open(a_url,"new_window","width=300,height=300");
// wait for the click
alert("hit ok for the next site");
}
首先,你會注意到迴圈從0一直到url_names.length這個變數。將.length放在數組名的後面由於告訴你數組中有多少個元素。但是,注意數組元素的數目同數組最後一個元素的索引號(順序號)不同。如果數組中有3個元素,則數組的長度為3,但是數組中最後一個元素的索引號卻是array[2].。這是因為數組中第1個元素的索引號是array[0].。如果你執行數組調用時得到諸如"object not found" 的錯誤資訊,而你的代碼中有一個數組,則有可能是因為你將數組元素的索引號同數組中元素的數目混淆了。
不也許還會注意到將.length放在數組的結尾處很有點想給一個對象附加一些屬性。這是因為數組本身就是對象,而length就是數組的一項屬性。
數組術語對象的另一個表現是:你需要用新指令才能產生新的數組。在上例中,url_names = new Array(......) 實際可以解釋為:產生一個新數組,用url_names對其做一個引用。你可以注意到單詞"new" 以這種方式被應用時,就產生了一個新的對象。
迴圈中的第1行產生一個變數。其賦值為一個字串。
a_url = "http://www." + url_names[loop] + "/";
迴圈開始時,變數迴圈的初始值為0。url_names數組的第1個元素是字串"hits.org".,所以在第一次迴圈中,變數a_url等值於字串"http://www.hits.org/".。
迴圈的下一行用該URL開啟一個視窗
var new_window=open(a_url,"new_window","width=300,height=300");
由於每次開啟視窗時我們給視窗起的名稱都一樣,所以在轉到新的URL時,不會開啟許多視窗。如果我們在上例中去掉視窗名稱"new_window",則每次迴圈時就會開啟一個新視窗。
迴圈的第3行只是開啟一個alert框,並對待使用者點擊OK 按鈕。
數組還可以由於其它元素,而不只是字串。數組可以應用於JavaScript文件物件模型(Document Object Model)的各個方面。下一講將要講述這方面的知識。
下面是onClick=""連結中的代碼:
var change=prompt('Change which image (0 or 1)?','');
window.document.images[change].src='three.jpg';
本例打算用圖片交換來示範數組如何介入DOM的。試一下本例,看一下源碼。
document.image_name.src = 'some_image.gif';
為了做這事,每個圖片都需命名到。若你不知要交換的圖片名,但卻知道其在HTML頁中的順序。可以用它的DOM數來指定該圖片。
一個HTML檔案中的第一個圖片是document.images[0],第二個是document.images[1],如此類推。若你想知道一個檔案中有多少個圖片,你可檢查圖片數組長度知道:document.images.length。例如,你想改變你的網頁中所有圖形為一個Spacer GLF圖片,你可以這樣做:
for(loop=0; loop<document.images.length; loop++)
{
document.images[loop].src = 'spacer.gif';
}
清楚了吧?
好。下一講我們準備學習函數。
函數是編程需學的最後一個基本組成。所有的程式語言都是函數。函數是一些角次可調用的、無須重寫的東西。
如果你想教會自己快速閱讀並且用一個一旦點擊可告訴你目前時間的長文本連結。
例如…時間!
看源碼:
<a href="#" onClick="
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
var the_time = the_hour + ':' + the_minute + ':' + the_second;
alert('The time is now: ' + the_time);">時間!</a>
在這裡這段JavaScript的工作細節並不重要;一會我們再回來複習一下。
重要的是它太長了。若這些時間連結再有10個,你須每次剪貼這段程式。這使你的HTML既長且難看。另外,若你想改變這段程式,就必須在10個不同地方改變。
你可以寫一個函數來執行而不用作10次拷貝程式。這裡的函數使用變的即容易編輯又容易閱讀。
請看如何寫一段計時函數。
該HTML頁含有一個叫做announceTime的函數。從一個連結調用annoumnceTime:
<a href="#" onClick="announceTime();">時間!</a>
就象這樣:
下行看起來就象第二課:
<a href="#" onClick="alert('Hello!');">Hello!</a>
這稱為從一個連結調用警告對話方塊。函數就象一種方法,唯一不同的是,方法依附於一個對象。在這個警告的例子中,這個對象是一個視窗對象。
讓我們回到函數本身。如果你看看源碼,你將看到函數位於HTML檔案的頭部中。
<html>
<head>
<title>無參數函數</title>
<script langauge="JavaScript">
<!-- hide me
function announceTime()
{
//get the date, the hour, minutes, and seconds
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
//put together the string and alert with it
var the_time = the_hour + ":" + the_minute + ":" + the_second;
alert("The time is now: " + the_time);
}
// show me -->
</script>
</head>
<body>
...
</body>
</html>
好,讓我們逐行複習這個函數。首先,所有函數來自於該種格式:
function functionName(parameter list)
{
statements ...
}
函數的命名規則於變數差不多。第一個字元必須是字母或一標準符號。其餘字元可為數字或一橫線。但必須保證函數不於已定義的變數同名。否則將出現很糟糕的結果。我是用內部大寫的方式命名函數以保證它們不與字元碰巧重名。
函數名後是一組參數。本例是無參數的函數,下一例中我們再舉例描述。
參數後是函數的主體。這是一組當函數調用後是想啟動並執行語句。在下面幾個例子中,我打算利用這個報時器,所以讓我描述一下它是怎樣工作的。
第一行:
var the_date = new Date();
取得一個新的日期對象。就象你在用數組時取得一個新的數組一樣,在你要找出即時是什麼時間時你需要先取得一個日期對象。當找到了一個新的日期對象,它自動重設到當前的日期和時間。為了在對象以外得到這個資訊,你必須使用這種對象方法:
這些方法從日期對象上取得了合適的數字。
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var the_second = the_date.getSeconds();
你可能疑惑:我怎樣能假定日期對象知道何種方式?甚或我如何知道有這樣一件事可作為日期對象?這些緣由應從Javascript庫中擷取,我將盡我所能解釋內建Javascript對象,但不一定能徹底的使你清楚。
函數的其他部分就很清楚了。它以這種方式調用返回數字,把它們變成字串,並且調用警告方式以彈出一個字串對話方塊。注意你可以在函數內部調用一個方式和函數。我們將詳盡討論。
現在如果你也玩透了時間連結,你可能注意到了有些什麼不對的事。你每次可能會得到這樣的反饋:“12:12:04”,這是getSecond()將傳回值為“4”。那麼當你合成為時間時,你看到的就是the_minute+“:”+the_second得到14:4而非是我們想要的。解決它是個容易的事,需要個新的函數來修補分、秒合成值。
請看參數及傳回值。
儘管無參數的函數在減少寫源碼工作量,HTML源碼可讀性上很有用,但有參數的函數會更為有用。
上一例中,當返回的分、秒值小於10時會有問題發生。我們想要看到的秒值是04而非4。我們可以這樣做:
var the_minute = the_date.getMinutes();
if (the_minute < 10)
{
the_minute = "0" + the_minute;
}
var the_second = the_date.getSeconds();
if (the_second < 10)
{
the_second = "0" + the_second;
}
它會非常有效。但是注意,同樣的源碼你寫了兩次:若某件東西小於10,則前面加“0”。所以要考慮當用同一代碼要多次重寫時,用函數來做。本例中我寫了一個叫fixNumber的函數:
function fixNumber(the_number)
{
if (the_number < 10)
{
the_number = "0" + the_number;
}
return the_number;
}
fixNumber的參數是the_number。一個參數也是一個變數,當該函數被調用時,其參數值也被設定。在本例中,我們這樣調用函數:
var fixed_variable = fixNumber(4);
參數the_number在函數中設定為4。到現在你應該對fixNumber的主體有了一定的瞭解。它的意思是:如果變數the_number小於10,則在它的前面加一個0。這裡面新的內容是return指令:返回the_number的值。在下面的情況中就會用到return指令:
var some_variable = someFunction();
變數some_variable的值是函數someFunction() 的傳回值。在fixNumber中,我加入: return the_number,則退出函數並將返回the_number的值返回給任何一個等待被設定的變數。
所以,我這樣書寫代碼:
var fixed_variable = fixNumber(4);
the_number的初始值將通過函數調用被設定為4,然後由於4小於10,所以the_number將被改為"04"。然後the_number值被返回,而且變數fixed_variable將被設定為"04" 。
為了將fixNumber包括在原始函數announceTime()中,我添加了如下內容:
function announceTime()
{
//get the date, the hour, minutes, and seconds
var the_date = new Date();
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
var fixed_minute = fixNumber(the_minute);
var the_second = the_date.getSeconds();
var fixed_second = fixNumber(the_second);
//put together the string and alert with it
var the_time = the_hour + ":" + fixed_minute + ":" + fixed_second;
alert("The time is now: " +the_time);
}
假定時間連結被點擊時,時間為12:04:05。用new Date()獲得日期,用getHours()獲得小時,用前面所屬方法獲得分鐘,分鐘在本例中應該是4, 然後調用fixNumber,其參數為the_minute:
var fixed_minute = fixNumber(the_minute);
當fixNumber()被調用時,參數the_number被設定為the_minute。在本例中由於the_minute是4,所以the_number將被設定為4。
設定完參數後,我們進入函數主體。由於4小於10,the_number被改變為"04",然後the_number值用return指令返回。當"04"被fixNumber返回後,本例fixed_minute就等於"04"。
我們一步一步來研究該過程。假定時間為12:04:05。
我們從函數announceTime()開始
1.the_minute = the_date.getMinutes();則the_minute = 4
2.fixed_minute = fixNumber(the_minute);等於函數fixNumber()並將其值返回給fixed_minute
現在進入函數fixNumber()
3.函數fixNumber(the_number)fixNumber()用the_minute的值調用,the_minute值是4,所以現在the_number = 4
4.如果(the_number < 10) {the_number = "0" + the_number;}由於4小於10,所以the_number現在等於"04"
5.返回the_number值,退出該函數並傳回值"04"
現在已經退出函數fixTime(),所以現在我們回到announceTime()
6.該函數傳回值為"04",所以fixed_minute 現在等於"04"
該例用了一個只有一個參數的函數。實際上你可以為函數設定多個參數。下一講我們將要講多於一個參數的函數。
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.