首頁 > 開發者 > JavaScript
這樣，函數和資料成員都是用“this.”來實現。
我們自己定義一個簡單類student好了，然後再去構造它，並且實現一個輸出函數。 複製代碼 代碼如下:<script LANGUAGE="JavaScript">
<!--
function student(a,b){
this.name = a;
this.age=b;
this.output=function(){
document.write("student: "+this.name+" age: "+this.age+"</br>");
}
}
var stu1=new student("Zhan Bo",20);
var stu2=new student("Hu Yifei", 23);
stu1.output();
stu2.output();
-->
</script>
(喂這也太簡單了吧魂淡(|||￣—￣)==o(#)￣▽￣)∕ )
恩。。總之大體意思懂了就好了。。
匿名函數：
就是沒有名字的函數 function(參數表){.......} 匿名函數是用完就被拋棄(好可憐 TvT)
回呼函數：
常表現為一個函數的參數是另一個函數。其實這個狀況常遇到的，比如java裡給控制項添加一個listener的時候，listener的參數其實是個函數。
這個函數我們就可以直接在參數裡面new就可以了，就是做了個匿名函數，因為每個響應都是針對這個控制項的，因此一般不會有再次需要的情況。
不過我們舉個例子還是按正常的路子走。 複製代碼 代碼如下:<script LANGUAGE="JavaScript">
<!--
function Huidiao(a){
alert(typeof a);// for testing if the function has ran
if(typeof a=='function')
a();
}
var test=function(){
document.write("this is testing.");
}
Huidiao(test);
//-->
</script>
(非常感謝二樓Arliang 指出錯誤！)
此處注意事項：
1.typeof a的類型function是小寫，因為js大小寫敏感，所以必須注意。
2.Huidiao(test) test不需要寫出括弧，因為它的參數就僅僅是一個變數，如果寫成(test()),那麼函數會執行test();這個函數，但是Huidao函數不執行，因為test()沒有傳回值，那個麼Huidiao的參數其實是未定義的。
輸出大家都想得到的。。
然後再說一句：Javascript中沒有重載。不要癡心妄想了騷年~ㄟ(￣v￣ㄟ)
--------------------------------------------------------------------------------
接下來學習js裡面的內建對象，其實我們已經接觸過幾個了。
常用的內建對象： String Date Math Array Number Globle
String大家都很懂的，var s="xxxxx"; 或者 var= new String("xxxx"); 意思差不多，至於String裡涵蓋的一些操作函數的話。。請自行下載javascript的API文檔親，我就不給串連了親，自己搜搜吧~
提供一個線上的參考手冊串連：點這裡 http://www.jb51.net/w3school/js/jsref_obj_string.htm (這個網站不錯，有空可以看看~)
每個對象的資料成員和函數成員就都有了，老師在這裡一直講那些個函數，我都睡著了，其實根本沒必要講，用的時候看看就行了，熟了以後都不需要看就知道有什麼啦~
然後稍微說一下Array這個對象，實際上JS並沒有提供二維數組，but，我們可以通過嵌套來實現，比如
var array2=new Array(new Array(4), new Array(), new Array(1,2,3,4));
最後，除了這些常用對象外，
還有一些全域的函數和事件也需要熟悉起來，
對應到文檔裡就是function和event兩個部分。
事件處理：
事件處理是什麼我覺得應該沒有人不清楚吧，我也懶得寫概念了，因為寫了也沒人會記住的╮(╯▽╰)╭
然後，指定事件處理常式有三種方法：
第一：直接在HTML標記中指定 <標記.......事件="事件處理常式" .....>
第二：編寫特定對象特定之間的javascript <script LANGUAGE="JavaScript" for="對象" event="事件"> ........ </script>
第三：在javascript中說明 <事件主角 - 對象><事件>=<事件處理常式>;
常用的事件羅列一下：
| 滑鼠事件 | 鍵盤事件 | HTML事件 | 變動事件 |
onclick 單擊事件 ondblClick 雙擊事件 onmouseover 滑鼠移到上方 onmouseout 滑鼠離開事件 onmousedown 滑鼠按下事件 onmouseup 滑鼠放開事件 onselect 選中事件 |
onkeydown 按鍵事件 onkeypress 按下鍵事件 onkeyup 放開鍵事件 |
onload 視窗載入事件 onunload 視窗離開事件 onresize 改變視窗大小觸發事件 onabort 中斷事件 onerror 例外狀況事件 onreset 按下重設按鈕事件 onsubmit 提交事件 |
onblur 失去焦時間點事件 onfocus 獲得焦時間點事件 onchange 值改變觸發事件 |
第一種是最常用的，比如提交啊，儲存啊之類的事件，有資料庫相關操作的，都可以在script裡面完成。我相信寫過網頁的同學肯定都接觸過的，比如我們寫一個簡單的小例子： 複製代碼 代碼如下:<html>
<head>
<title>O.O</title>
<script type="text/javascript" src="js/output.js"></script>
<script LANGUAGE="JavaScript">
<!--
function alertW(){
alert("Button Clicked");
}
-->
</script>
</head>
<body>
<input type="Button" value = "HTML" onclick="alertW();" >
<!--
This is my JSP page. <br>
-->
</body>
</html>
定義一個button，然後給它一個響應事件，其實就是第一種，當然，因為這個的響應非常簡單，也可以在button控制項那裡直接這麼寫：
<input type="Button" value = "HTML" onclick="window.alert('Button Clicked')" > （這裡注意下，alert()裡面的字串用單引號，不能用雙重雙引號。）
二者效果相同的。
但對於第二種來說，用的很少，我百度了半天，查了window對象的事件，測試了許多，但是只有onload事件是可行的，代碼如下： 複製代碼 代碼如下:<script LANGUAGE="JavaScript" for="window" event="onload">
alert("load successed");
-->
</script>
然後經過我的仔細研究，許多事件，比如“onbeforeunload”等，都是只在IE中可行的，那麼我們就毫不猶豫的放棄此方法就好。知道就行了。
PS 用百度搜一下“網頁製作完全手冊”，是個CHM的協助檔案，第一個出來的 新浪檔案就可以下載，裡面東西很全，需要的話就下載來參考吧~
OK，第三種，據說在Ajax架構裡大量使用，但是作為一個不會ajax的人。。。好吧，我們慢慢學起。
第三種稍微涉及了點下一部分要說的DOM。不過木有關係，不影響大局，第三種的格式看起來比較複雜，其實很簡單。
在添加控制項的時候，給控制項一個ID，但後在javascript裡面利用ID拿到這個控制項，然後對它的各種事件進行操作，比如：
複製代碼 代碼如下:<body>這樣，我們就給text文字框添加了一個事件響應，這裡要強調一點：script響應必須寫在控制項聲明之後，否則編譯器就無法根據ID找到控制項了。
PS，其實也可以根據name找到控制項，但是還是建議用ID，因為name可以相同，id不可以相同
關於每個控制項有哪些響應，可以在之前那個網站裡翻翻，或者下載我說的那個手冊，就可以了,下面的就是那個手冊裡關於input text控制項的事件列表~當然不止這點，右邊還有下拉條的~
其實我還是比較推薦下載一下這個手冊的，挺好的一工具。
簡單介紹了事件處理後，我們學習一下Event對象
event對象代表事件狀態，如事件發生的元素，鍵盤狀態，滑鼠位置和滑鼠按鍵狀態。
在IE中可以用window.event擷取，但是FF不行，所以為了相容，採用如下策略。。程式猿們的智慧是偉大的。
複製代碼 代碼如下:function eventName(event){事件程式綁定：
<body 事件名稱="eventName(event);"></body>
因為比較抽象，我們還是寫個代碼，心裡踏實點。 複製代碼 代碼如下:<html>
<head>
<style>
<!--
.divstyle
{
position:absolute;
width:120px;
height:80px;
border:3px outset #FFFF00;
padding-left: 4px;
}
//-->
</style>
<title>testing</title>
<script type="text/javascript" src="js/output.js"></script>
</head>
<body>
<div id="fistdiv" class= "divstyle" onmousedown="clicked(event)"></div>
<script type="text/javascript">
function clicked(event){
event=event||window.event;
var s;
s="coordinate-X :"+event.clientX;
s+="\n"+"coordinate-Y: " +event.clientY;
var obj=document.getElementById("fistdiv");
obj.innerText=s;
obj.textContent=s; alert(s);
}
</script>
</body>
</html>
注意，此處感謝三樓 Aleax的協助，我直接引用他的話並給出例子，關於div中的屬性innerText：
FF裡面的innerText不可用，替代方法: textContent
IE: oDiv.innerText = aString; oDiv.innerHTML = aString;
FF: oDiv.textContent = aString; oDiv.innerHTML = aString;
由於對於不認識的語句瀏覽器會忽略，我們可以直接像我上面寫的，寫出兩行代碼來遷就這倆，同時還有另一個辦法可以讓它縮為一句，就是obj.innerHTML=s;
這裡順便說下innerText和innerHTML的差別：innerText只接受文本，然後直接輸出，但是innerHTML識別HTML語句，也就是說，如果寫
innerText="<br>Hello" ; 那麼輸出就是:<br>Hello 如果寫innerHTML="<br>Hello"那麼輸出是換行後的Hello。
事件冒泡問題
事件冒泡問題其實就是，一個操作觸發了多個響應，比如body定義了onclick的事件，body下面的div也定義了onclick事件，那點了div之後，先做了div的事件響應，然後向上冒泡，body的click事件也被觸發了。
解決的辦法也不麻煩，但是依舊要遷就IE和FF這倆好基友的矛盾：
IE裡面阻止冒泡，使用： 事件對象.cancelBubble=true;
FF裡面阻止冒泡，使用： 事件對象.stopPropagation(); （剛才查了一下，propagation [,prɔpə'ɡeiʃən] 的意思是繁殖，繁衍。。原諒我的詞彙量吧TvT）
好了為了讓這對好基友和諧相處，我們只好再做一個判斷：
當然，這個判斷要寫在下層的結點裡，比如剛才的例子裡，如果把它寫在body的click事件裡，那就是做無用功了。
--------------------------------------------------------------------------------
最後，一個小應用，是對輸入的情況判斷，我們註冊網站的時候常遇到的：
代碼如下： 複製代碼 代碼如下:<html>
<head>
<style>
<!--
#checkspan
{
display: none;
color: #ff0000;
}
//-->
</style>
<title>testing</title>
<script type="text/javascript" src="js/output.js"></script>
</head>
<body>
Input: <input type="text" onblur="blured()" id="input"><span id="checkspan"></span>
<script type="text/javascript">
function blured(){
var obj=document.getElementById("checkspan");
var s=document.getElementById("input").value;
if(s.length<5)
obj.innerHTML=" too short";
else{
obj.innerHTML=" correct";
obj.style.color="green"
}
obj.style.display="inline";
}
</script>
</body>
</html>
效果如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
