熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

JavaScript教程--從入門到精通(5)

2022-06-13   來源: Javascript 

  在JavaScript中創建新對象

  使用JavaScript可以創建自己的對象雖然JavaScript內部和浏覽器本身的功能已十分強大但JavaScript還是提供了創建一個新對象的方法使其不必像超文本標識語言那樣求於或其它多媒體工具就能完成許多復雜的工作
  在JavaScript中創建一個新的對象是十分簡單的首先它必須定義一個對象而後再為該對象創建一個實例這個實例就是一個新對象它具有對象定義中的基本特征

  對象的定義
JavaScript對象的定義其基本格式如下
Function Object(屬性表)
Thisprop=prop
Thisprop=prop

th=FunctionName;
th=FunctionName;

在一個對象的定義中可以為該對象指明其屬性和方法通過屬性和方法構成了一個對象的實例如以下是一個關於University對象的定義
Function university(namecitycreatDate URL)
Thisname=name
Thiscity=city
ThiscreatDate=New Date(creatDate)
ThisURL=URL
其基本含義如下
Name-指定一個單位名稱  
City-單位所在城市  
CreatDate-記載university對象的更新日期  
URL-該對象指向一個網址

  創建對象實例
一旦對象定義完成後就可以為該對象創建一個實例了
NewObject=New object();
其中Newobjet是新的對象Object已經定義好的對象
U=New university(雲南省昆明市January ::)
U=New university(雲南電子科技大學昆明January ::htlp://wwwYNKJCN)
 
對象方法的使用
在對象中除了使用屬性外有時還需要使用方法在對象的定義中我們看到th=FunctionName語句那就是為定義對象的方法實質對象的方法就是一個函數FunctionName通過它實現自己的意圖
例在university對象中增加一個方法該方法是顯示它自己本身並返回相應的字串
function university(namecitycreateDateURL)
ThisName=Name;
Thiscity=city;
ThiscreateDate=New Date(creatDate)
ThisURL=URL
Thisshowuniversity=showuniversity;
其中Thisshowuniversity就是定義了一個方法---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){
Thislength=Size;
for(var X=; X<=size;X++)
this[X]=;
Reture this;
}
其中arrayName是定義數組的一個名子Size是有關數組大小的值(size)即數組元素的個數通過for循環對一個當前對象的數組進行定義最後返回這個數組
從中可以看出JavaScript中的數組是從到size這與其它0到size的數組表示方法有所不同當然你可根據需要將數組的下標由1到size調整到0到size-1可由下列實現:
Function arrayName (size)
For (var X=; X<=size;X++)
this[X]=;
thislenght=size;
Return this;
從上面可以看出該方法是只是調整了thislenght的位置該位置是用於存儲數組的大小的從而調整後的數組的下標將與其它語言一致但請讀者注意正是由於數組下標順序由1到size使得JavaScript中的對象功能更加強大
b創建數組實例
一個數組定義完成以後還不能馬上使用必須為該數組創建一個數組實例
Myarray=New arrayName(n);
並賦於初值
Myarray[]=字串1
Myarray[]=字串2
Myarray[]=字串3

Myarray[n]=字串n
一旦給數組賦於了初值後數組中就具有真正意義的數據了以後就可以在程序設計過程中直接引用
創建多維數組
Function creatMArray(rowcol){
var indx=;
thislength=(row*)+col
for(var x=;x<=row;x++)
for(var y=;y<=col;y++)
indx=(x*)+y;
this[indx]=;
}
myMArray=new creatMArray();
之後可通過myMArray[]myMArray[]myMArray[]myMArray[]myMArray[]myMArray[]
…來引用
內部數組
在Java中為了方便內部對象的操作可以使用窗體(Forms)框架(Frames)元素(element)鏈接(links)和錨(Anchors)數組實現對象的訪問
 anchors[]:使用《A name=anchorName》標識來建立錨的鏈接

  links[]: 使用<A href=URL>來定義一個越文本鏈接項

  Forms[]: 在程序中使用多窗體時建立該數組

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

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

  anchors[]用於窗體的訪問(它是通過《form name=form》所指定的)link[]用於被鏈接到的錨點的訪問(它是通過《a href=URL》所指定的)Forms[]反映窗體的屬性而anchors[]反映Web頁面中的鏈接屬性
有關錨數組的文檔
<HTML>
<HEAD>
<BODY>
<A NAME=MyAnchorsName> 定義第一個錨名
HTML Code
<A NAME=MyAnchorsName> 定義第二個錨名
HTML Code
<A HREF=#MyAnchorsName>建立錨的鏈接
<A HREF=#MyAnchorsName?gt; 建立錨的鏈接

該文檔段建立了兩面全錨的鏈接可通過Anchors[]訪問這些錨documentAnchors[]反映第一個錨而documentAnchors[]反映第二個錨的有關信息

范例
范例一個動態文字滾動的例子

<html>
<head>
<title></title>
<script LANGUAGE=JavaScript>
 
with (topwindowlocation)
{baseURL = hrefsubstring (hreflastIndexOf (/) + )}
total_toc_items = ;
current_overID = ;
last_overID = ;
browser = navigatorappName;
version = parseInt(navigatorappVersion);
client=null;
loaded = ;
if (browser == Netscape && version >= ) client = ns;
function toc_item (img_nameicon_colwidthheight) {
if (client ==ns) {
img_prefix = baseURL + img_name;
thisicon_col = icon_col;
thistoc_img_off = new Image (widthheight);
thistoc_img_offsrc = img_prefix + _offgif;
thistoc_img_on = new Image (widthheight);
thistoc_img_onsrc = img_prefix + _ongif;
}
}
 
function new_toc_item (img_nameicon_rowwidthheight) {
toc_item [img_name] = new toc_item (img_nameicon_rowwidthheight);
}
 
function toc_mouseover (itemID) {
if (client ==ns) {
current_overID = itemID;
if (current_overID != last_overID) {
document [current_overID]src = toc_item [current_overID]toc_img_onsrc;
if (last_overID != ) {
documentimages [last_overID]src = toc_item[last_overID]toc_img_offsrc;
}
last_overID = current_overID;
}
}
}
 
function toc_mouseout () {
if (client ==ns) {
if (current_overID != ) {
documentimages [current_overID]src = toc_item [current_overID]toc_img_offsrc;
}
current_overID = ;
last_overID = ;
}
}
new_toc_item ();
<! Begin
function bannerObject(p){
thismsg = MESSAGE
thisout =
thispos = POSITION
thisdelay = DELAY
thisi =
thisreset = clearmessage}
 
function clearmessage(){
thispos = POSITION}
var POSITION = ;
var DELAY = ;
var MESSAGE = 這是一個動態JavaScript文字顯示的例子;
var scroll = new bannerObject();
function scroller(){
scrollout += ;
if(scrollpos>)
for (scrolli = ; scrolli < scrollpos; scrolli++) { scrollout += ; }
if (scrollpos>= )
scrollout += scrollmsg
else
scrollout = scrollmsgsubstring(scrollposscrollmsglength)
documentnoticeFormnoticevalue = scrollout
scrollout = ;
scrollpos;
scrollpos;
if (scrollpos < (scrollmsglength)) { scrollreset(); } setTimeout
(scroller()scrolldelay);}
</script>
</head>
<body onload=scroller() bgcolor=# link=#CCC vlink=#CCC
alink=#
text=#CCC>
<table border= cellspacing= cellpadding=>
<tr>
<td width=%><form NAME=noticeForm>
<p><input TYPE=text name=notice size= ></p>
</form>
</td>
</tr>
</table>
</center></div>
</body>
</html>

 
范例:顏色變化的例子

<html>
<head>
<script>
<!
function makearray(n) {
thislength = n;
for(var i = ; i <= n; i++)
this[i] = ;
return this;}
hexa = new makearray();
for(var i = ; i < ; i++)
hexa[i] = i;
hexa[]=a;
hexa[]=b;
hexa[]=c;
hexa[]=d;
hexa[]=e;
hexa[]=f;
function hex(i) {
if (i < )
return ;
else if (i > )
return ff;
else return + hexa[Mathfloor(i/)] + hexa[i%];}
function setbgColor(r g b) {
var hr = hex(r);
var hg = hex(g);
var hb = hex(b);
documentbgColor = #+hr+hg+hb;}
function fade(sr sg sb er eg eb step) {
for(var i = ; i <= step; i++) {
setbgColor( Mathfloor(sr * ((stepi)/step) + er * (i/step))
Mathfloor(sg * ((stepi)/step) + eg * (i/step)) Mathfloor(sb *
((stepi)/step) + eb * (i/step))); }}
function fadein() {
fade();
fade();
fade( );}
fadein();
// >
</script>
<body>
</body>
</html>

 
  本講介紹了用戶自行創建對象的方法 用戶可根據需要創建自己的對象並介紹了JavaScript中建數組的方法
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25351.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.