首頁 > 開發者 > JavaScript

初級JavaScript學習教程（五）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
javascript|教程 　　使用JavaScript可以建立自己的對象。雖然JavaScript內部和瀏覽器本身的功能已十分強大，但JavaScript還是提供了建立一個新對象的方法。使其不必像超文本標識語言那樣，求於或其它多媒體工具，就能完成許多複雜的工作。
　　在JavaScript中建立一個新的對象是十分簡單的。首先它必須定義一個對象，而後再為該對象建立一個執行個體。這個執行個體就是一個新對象，它具有對象定義中的基本特徵。

一、對象的定義
JavaScript對象的定義，其基本格式如下：
Function Object（屬性工作表）
This.prop1=prop1
This.prop2=prop2
...
This.meth=FunctionName1;
This.meth=FunctionName2;
...
在一個對象的定義中，可以為該對象指明其屬性和方法。通過屬性和方法構成了一個對象的執行個體。如以下是一個關於University對象的定義：
Function university(name,city,creatDate URL)
This.name=name
This.city=city
This.creatDate=New Date(creatDate)
This.URL=URL
其基本含義如下：
Name－指定一個“單位”名稱。 　
City－“單位”所在城市。 　
CreatDate－記載university對象的更新日期。 　
URL－該對象指向一個網址。

二、建立對象執行個體
一旦對象定義完成後，就可以為該對象建立一個執行個體了：
NewObject=New object();
其中Newobjet是新的對象，Object已經定義好的對象。例：
U1=New university(“雲南省”，“昆明市”，"January 05,199712:00:00","http://www.YN.KM")
U2=New university(“雲南電子科技大學”，“昆明”,"January 07,1997 12:00:00","htlp://www.YNKJ.CN")
　
三、對象方法的使用
在對象中除了使用屬性外，有時還需要使用方法。在對象的定義中，我們看到This.meth=FunctionName語句，那就是為定義對象的方法。實質對象的方法就是一個函數FunctionName，通過它實現自己的意圖。
例在university對象中增加一個方法，該方法是顯示它自己本身，並返回相應的字串。
function university(name,city,createDate,URL)
This.Name=Name;
This.city=city;
This.createDate=New Date(creatDate)；
This.URL=URL；
This.showuniversity=showuniversity;
其中This.showuniversity就是定義了一個方法－－－showuniversity()。
而showuniversity()方法是實現university對象本身的顯示。
function showuniversity()
For (var prop in this)
alert(prop+="+this[prop]+"");
其中alert是JavaScript中的內建函式，顯示其字串。
　
四、JavaScript中的數組　
使用New建立數組
JavaScript中沒有提供像其它語言具有明顯的數群組類型，但可以通過function定義一個數組，並使用New對象操作符建立一個具有下標的數組。從而可以實現任何資料類型的儲存。
a、定義對象的數組
Function arrayName(size){
This.length=Size;
for(var X=; X<=size;X++)
this[X]=0;
Reture this;
}
其中arrayName是定義數組的一個名子，Size是有關數組大小的值（1-size），即數組元素的個數。通過for迴圈對一個當前對象的數組進行定義，最後返回這個數組。
從中可以看出，JavaScript中的數組是從1到size，這與其它０到size的數組表示方法有所不同，當然你可根據需要將數組的下標由１到size調整到０到size－１,可由下列實現:
Function arrayName (size)
For (var X=0; X<=size;X++)
this[X]=0;
this.lenght=size;
Return this;
從上面可以看出該方法是只是調整了this.lenght的位置，該位置是用於儲存數組的大小的。從而調整後的數組的下標將與其它語言一致。但請讀者注意正是由於數組下標順序由１到size，使得JavaScript中的對象功能更加強大。
b、建立數組執行個體
一個數組定義完成以後，還不能馬上使用，必須為該數組建立一個數組執行個體：
Myarray=New arrayName(n);
並賦於初值：
Myarray[1]=“字串１”；
Myarray[2]=“字串２”；
Myarray[3]=“字串３”；
...
Myarray[n]=“字串n”；
一旦給數組賦於了初值後，數組中就具有真正意義的資料了，以後就可以在程式設計過程中直接引用。
建立多維陣列
Function creatMArray(row,col){
var indx=0;
this.length=(row*10)+col
for(var x=1;x<=row;x++)
for(var y=1;y<=col;y++)
indx=(x*10)+y;
this[indx]=””;
}
myMArray=new creatMArray();
之後可通過myMArray[11]、myMArray[12]、myMArray[13]、myMArray[21]、myMArray[22]、myMArray[23]、
…來引用。
內部數組
在Java中為了方便內部對象的操作,可以使用表單(Forms)、架構(Frames)、元素(element)、連結(links)和錨(Anchors)數組實現對象的訪問。
　anchors[]:使用《A name=“anchorName“》標識來建立錨的連結。

　links[]: 使用<A href=”URL”>來定義一個越文本連結項。

　Forms[]: 在程式中使用多表單時,建立該數組。

　Elements[]:在一個視窗中使用從個元素時,建立該數組。

　Frames[]:建立架構時,使用該數組

　anchors[]用於表單的訪問(它是通過《form name=“form1”》所指定的),link[]用於被連結到的錨點的訪問(它是通過《a href=URL》所指定的)。Forms[]反映表單的屬性,而anchors[]反映Web頁面中的連結屬性。
有關錨數組的文檔：
<HTML>
<HEAD>
<BODY>
<A NAME=”MyAnchorsName1”> 定義第一個錨名
HTML Code
<A NAME=”MyAnchorsName2”> 定義第二個錨名
HTML Code
<A HREF=”#MyAnchorsName1”>建立錨的連結
<A HREF=”#MyAnchorsName2?gt; 建立錨的連結
….
該文檔段建立了兩面全錨的連結,可通過Anchors[]訪問這些錨。document.Anchors[0]反映第一個錨,而document.Anchors[1]反映第二個錨的有關資訊。
　
五、範例
範例1：一個動態文字滾動的例子。
test5_1.htm
<html>
<head>
<title></title>
<script LANGUAGE="JavaScript">
　
with (top.window.location)
{baseURL = href.substring (0,href.lastIndexOf ("/") + 1)}
total_toc_items = 0;
current_overID = "";
last_overID = "";
browser = navigator.appName;
version = parseInt(navigator.appVersion);
client=null;
loaded = 0;
if (browser == "Netscape" && version >= 3) client = "ns3";
function toc_item (img_name,icon_col,width,height) {
if (client =="ns3") {
img_prefix = baseURL + img_name;
this.icon_col = icon_col;
this.toc_img_off = new Image (width,height);
this.toc_img_off.src = img_prefix + "_off.gif";
this.toc_img_on = new Image (width,height);
this.toc_img_on.src = img_prefix + "_on.gif";
}
}
　
function new_toc_item (img_name,icon_row,width,height) {
toc_item [img_name] = new toc_item (img_name,icon_row,width,height);
}
　
function toc_mouseover (itemID) {
if (client =="ns3") {
current_overID = itemID;
if (current_overID != last_overID) {
document [current_overID].src = toc_item [current_overID].toc_img_on.src;
if (last_overID != "") {
document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;
}
last_overID = current_overID;
}
}
}
　
function toc_mouseout () {
if (client =="ns3") {
if (current_overID != "") {
document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;
}
current_overID = "";
last_overID = "";
}
}
new_toc_item ("1",2,120,20);
<!-- Begin
function bannerObject(p){
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage}
　
function clearMessage(){
this.pos = POSITION}
var POSITION = 50;
var DELAY = 150;
var MESSAGE = "這是一個動態JavaScript文字顯示的例子";
var scroll = new bannerObject();
function scroller(){
scroll.out += " ";
if(scroll.pos>0)
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }
if (scroll.pos>= 0)
scroll.out += scroll.msg
else
scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
document.noticeForm.notice.value = scroll.out
scroll.out = " ";
scroll.pos--;
scroll.pos--;
if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout
('scroller()',scroll.delay);}
</script>
</head>
<body bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"
alink="#008080"
text="#C0C0C0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form NAME="noticeForm">
<p><input TYPE="text" name="notice" size="40" style="background-color: rgb(192,192,192)"></p>
</form>
</td>
</tr>
</table>
</center></div>
</body>
</html>
　
範例2:顏色變化的例子。
test5_2.htm
<html>
<head>
<script>
<!--
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;}
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a";
hexa[11]="b";
hexa[12]="c";
hexa[13]="d";
hexa[14]="e";
hexa[15]="f";
function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setbgColor(r, g, b) {
var hr = hex(r);
var hg = hex(g);
var hb = hex(b);
document.bgColor = "#"+hr+hg+hb;}
function fade(sr, sg, sb, er, eg, eb, step) {
for(var i = 0; i <= step; i++) {
setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *
((step-i)/step) + eb * (i/step))); }}
function fadein() {
fade(255,0,0,0,0,255,100);
fade(0,0,255,0,255,0,100);
fade(0,255,0, 0,0,0, 100);}
fadein();
// -->
</script>
<body>
</body>
</html>
　
　　本講介紹了使用者自行建立對象的方法, 使用者可根據需要建立自己的對象。並介紹了JavaScript中建數組的方法。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript echo javascript encode javascript encodeuri
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More