Javascript學習筆記

1.在HTML中添加JavaScript代碼
head或者body標簽裡,大部分代碼一般在head,函數調用在body裡。

<script language=”JavaScript[1.2|1.3]”>
JavaScript code here.
</script>

2.調用外部腳本文件

<script language=”JavaScript[version]” src=”yourfile.js”></script>

3.用腳本輸出網頁

document.write(“Whatever in HTML, i.e.
,,“+variable);

4.註釋
單行://comment here
多行:/*comment here*/

5.變量定義和賦值

var var_name=var_value;

沒有數型之分,可修改,字符串用”string”或者’string’,正則表達式用/string/。
轉義符:,退格:&#8;,換頁:f,換行:
,回車:
,制表: ,bool:true|false,空:null。

6.函數構造和使用
構造:

function func_name(para1,para2,…)
{func_body;
return ret_value;}

調用:

var var3=function func_name(var1,var2);

JavaScript嚴格區分大小寫,變量有作用域,函數體內重新聲明可避免修改全局變量。

7.運算符和程序控制語句
和C幾乎完全一樣。

8.事件句柄
JavaScript預定義關鍵字,用來處理網頁上事件的激發,即是對某個動作的反應,如:鼠標點擊,滑過,獲得焦點等。
使用舉例:

Click Here.

點擊按鈕可彈出一個窗口,內容為:Hi!。
常用句柄:
onClick,onMouseOver,onMouseOut,onLoad,onUnload,onFocus,onBlur,onChange,onSubmit,onAbort,onError,onDragDrop,onKeyDown,onKeyPress,onKeyup,onMouseDown,onMouseUp,onMouseMove,onReset,onResize,onSelect.

9.對象知識
建立對象(用構造函數):

復制代碼
function class_name(para1,para2,…)
{properties go here
this.property1=para1;
this.property2=para2;
methods go here
this.method1=normal_func_in_thispage_without_bracket;}
復制代碼

對象實例化:

var instance_of_class=new class_name(var1,var2);

建立對象(對象初始化):

instance_of_class={property1:var1,property2:var2,…} //比較適用於建立數量較少實例的對象。

10.預定義的JavaScript對象
Navigator對象:訪問客戶端瀏覽器屬性,使用方法:
屬性:navigator.property,

property主要有:
appCodeName,appName,appVersion,language,mimeTypes,platform,plugins,userAgent。
方法:navigator.method(),method()主要有:
javaEnabled(),plugins.refresh(),preference(),savePreferences()。

JavaScript有很多非常有用的預定義對象。

11.Document對象
屬性:
alinkColor,anchors,applets,bgColor,cookie,domain,embeds,fgColor,formName,forms,images,lastModified,layers,all,linkColor,links,plugins,referrer,title,URL,vlinkColor。
方法:
open(),close(),write(),writeln()。

12.Window對象
屬性:
closed,defaultStatus,frames,length,location,name,opener,parent,self,status,top。
方法:
Alert(),confirm(),find(),print(),prompt(),open(),close(),blur(),focus(),moveBy(),moveTo(),resizeBy(),resizeTo(),scrollBy(),scrollTo(),setInterval(),cleanInterval(),setTimeout(),cleanTimeout()。
其實裡面有好多方法是不適合使用的,因為涉及到對用戶窗口的操作,現在的傾向是盡量少控制用戶窗口。

13.數組的定義和操作
JavaScript裡的數組類似於對象,有屬性和方法。
定義:var array_name=new Array(elem1,elem2,…);
訪問:array_name[index]
屬性:constructor,index,input,length,prototype。
方法:concat(),join(),pop(),push(),reverse(),shift(),unshift(),slice(),splice(),sort()。

14.關聯數組
可以將兩個數組關聯起來,用一個的元素來代替另一個的索引號。
var array_name=new Array();
array_name[“Japanese”]=”Evil”;
array_name[“American”]=”Idiot”;

15.數學和日期對象
Math屬性:
E,LN10,LN2,LOG10E,LOG2E,PI,SQRT2,SQRT1_2。
Math方法:
abs(),acos(),asin(),atan(),ceil(),cos(),exp(),floor(),log(),max(),min(),pow(),random(),round(),sin(),sqrt(),tan()。
Date對象,必須先創建一個實例:var instance_name=new Date();
屬性:
constructor,prototype。
方法:
getDate(),getDay(),getHours(),getMinutes(),getMonth(),getSeconds(),getTime(),getTimezoneOffset(),getYear(),getFullYear(),parse(),setDate(),setHours(),setMinutes,setMonth(),setSeconds(),setTime(),setYear(),setFullYear(),toGMTString(),toLocalString()。

16.字符串對象
實例化:var instance_name=new String(“string”);
屬性:
constructor,length,prototype。
方法:
anchor(),big(),blink(),bold(),charAt(),charCodeAt(),concat(),fixed(),fontcolor(),fontsize(),fromCharCode(),indexOf(),italics(),lastIndexOf(),link(),match(),replace(),search(),slice(),small(),split(),strike(),sub(),substr(),substring(),toString(),toLowerCase(),toUpperCase()。

17.表單操作和框架操作
JavaScript可以使用document的屬性進行表單和框架的操作,其中表單和框架也各自有自己的屬性和方法。

18.Cookies的使用
建立:document.cookie=”your_cookies”;
其中your_cookies格式為:name:value&name:value,其中分隔符可用任何間隔符,但不能使用空格、逗號和分號。如果要使用它們,需要使用escape(var_string)將字符串轉為CGI能接受的字符代碼。
添加失效日期:在cookie裡添加一個name/value對,expires:GMTdate。
讀cookie:可直接讀,也可用unescape()轉換,然後用split()將其分割成需要的變量。

19.圖像對象
實例化:var pic_name=new Image(width,length);
屬性:
name,src,width,height,border,hspace,vspace,lowsrc,complete。

20.eval()函數
eval()可以將作為參數發給它的表達式按字符串形式求值。
eval(“1+1”)返回2;
var todo=”alert”;
eval(“window.”+todo+”(’Hi!’);”);會執行window.alert(’Hi!’);
這樣非常有利於函數的動態調用。

正則表達式
正則表達式在驗證輸入錯誤的地方有非常好和方便的用處

定義正則表達式:
var var_name=/your_pattern/flags;
也可以用構造函數來創建實例:var pattern = new RegExp(“your_pattern”);

用正則表達式測試字串,var_name.test(string)返回true|false。

標志(flags):
i:使匹配忽略大小寫
g:進行全局匹配測試
ig:在全局進行匹配測試

正則表達式對象的屬性

1.事件:即onclick=“” ,一個事件可以綁定多個函數,中間用分號隔開。

2.marquee的函數,this.stop()-暫停,this.start()-開始。

3.js中兩個常用的函數:

1

2

3

document.getElementById(“sid”);//返回id屬性值等於sid的第一個對象的引用,假如對應的為一組對象,則返回該組對象中的第一個。

document.getElementsByName(“cb”);//和getElementById()方法相似,但是它查詢元素的name屬性,而不是id屬性,另外,因為一個文檔中的name屬性可能不唯一(如HTML表單中的單選按鈕通常具有相同的name屬性)所有的getElementsByName()方法返回的是元素的數組,而不是一個元素,如果一個文檔中有兩個以上的標簽Name相同,那麼getElementsByName()就可以取得這些元素組成的一個數組。

4.常用來表示行內元素,它沒有固定樣式,隻有對它進行樣式定義時,才會有相應表現。

5.分別用span和a href制作一個點擊響應鏈接:

1

2

3

//用cursor:pointer可以定義鼠標指向鏈接時顯示手形形狀

6.定義一個點擊後可以展開相應結點的樹

js:

1

2

3

4

5

6

7

8

9

10

11

12

13

<script
language=”javascript”>

function showInfo(str){

for(var i=1;i<=3;i++)

document.getElementById(“tr”+i).style.display=”none”;//默認隱藏所有子節點

document.getElementById(str).style.display=”block”;//展開點擊結點的所有子節點

}

</script>

html:

1

2

3

4

5

6

7

8

9

10

11

12

<p
id=
"tr1" onclick="showInfo('tr1')">

<p
id=
"tr1-1">

<p
id=
"tr1-2">

<p
id=
"tr2" onclick="showInfo('tr2')">

<p
id=
"tr2-1">

<p
id=
"tr2-2">

<p
id=
"tr3" onclick="showInfo('tr3')">

<p
id=
"tr3-1">

<p
id=
"tr3-2">

7.內置的日期對象:

1

2

3

4

5

function showDate(){

var d=new Date();

d.getFullYear();//取得完整年份,若用getYear則隻顯示後兩位,如2010隻顯示10

d.getMonth()+1;//取得正確月份,在js中默認的月份按索引值

}

8.判斷電子郵件合法性:

1

2

3

4

5

verifyEmail(){

var em=document.getElementById("str").value;

if(em.indexOf("@")==-1)

alert("缺少@");

}

9.替換文本框的值:

1

2

3

4

replaceText(){

document.getElementById("money").value=document.getElementById("money").value.replace("delete","刪除");//把前者轉換為後者

}

10.正則表達式:

1

2

3

4

5

regFun(){

var pattern
= /^[0-9]$/;
//正則表達式用"/^"和"$/"包含起來

var v
=
"123456";

var flag=pattern.test(v);

}

1.js中的類用function來定義,這和java中的class是等價的

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

//js面向對象和所有面向對象語言一樣,都是通過實例化方法訪問

function HeapObj(){//protytype方法創建的對象放在堆內存中

HeapObj.prototype.username="瘋狂駭客";//普通屬性

var HeapObj.girlfriend="還沒有哦";//私有屬性,不允許子類及外部類訪問

HeapObj.cityName="福州";//靜態屬性,隻能用類名調用,調用前必須先將類實例化,如new
HeapObj(),否則瀏覽器無法正常顯示

HeapObj.prototype.sayHello=sayHello_fun;//調用外部函數

HeapObj.sayHello();

HeapObj.prototype.sayHello=function(){//動態方式創建函數,常用於重寫父類方法

alert("動態方式創建函數");

}

}

function sayHello_fun(){//函數體寫在對象外

alert("調用外部函數")

}

function childClass(){

childClass.prototype=new HeapObj();//子類繼承父類

}

function StackObj(){//this創建的對象放在棧內存中

this.name="小新";

this.age=18;

}

2.JSON對象:

1

2

3

4

5

6

7

8

9

var jobj={

name:"張三",

sex:"男",

age:33,

sayHello:function(){alert("Hello!");},//定義方法

subObj:{//定義子對象

subName:"小A";

}

}

1

3.實現一個簡單的對話框:

js:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function run(){

window.alert=function(s){//這裡的s是下面的alert("hahaha")中的字符串,作為值傳入,這裡對window對象中的alert方法進行瞭重載

var o=document.getElementById("Layer1");

o.innnerHTML=""+s;

o.style.display="block";

}

alert("haha");//調用重載後的alert函數

}

function hiddenWindow(){

var o=document.getElementById("Layer1");

o.style.display="none";

}

html:

1

<p
id=
"Layer1">

1

發佈留言