JavaScript練習筆記(5)

捕捉異常-- try catch以及throw
如果您熟悉java，一定會對於java嚴謹的try catch控制感到佩服（或是厭煩）。事實上，對於異常的捕捉是非常重要的控制，幸好javascript也沿襲這個優點。

1. 簡單的try catch
   <script language="JavaScript1.2"> function showMessage(){ try{ alertt("hello world!!!");//故意寫錯方法！ }catch(Error){ content = "很抱歉，這個頁面可能有誤！\n"; content+= "請通知管理員此問題，\n"; content+= "或者幾分鐘後再試！"; alert(content); } } </script> <input type="button" value="try catch測試" onclick="showMessage()"/>
   結果會是：
   



2. 多加一點花樣！改用confirm()方法
   <script language="JavaScript1.2"> function showMessage2(){ try{ alertt("hello world!!!");//故意寫錯方法！ }catch(Error){ content = "很抱歉，這個頁面可能有誤！\n"; content+= "請通知管理員此問題，\n"; content+= "或者幾分鐘後再試！"; if( confirm(content)){ document.location.href="http://maxsolars.blogspot.com"; }else{ document.location.href="http://maxubuntu.blogspot.com"; } } } </script> <input type="button" value="try catch進階測試" onclick="showMessage2()"/>
   結果會是：
   

利用document.location.href來指定重新導向的位置。


3. 拋出自定例外(錯誤)
   在java裡，只有例外(或異常)可以處理，錯誤是無法處理的；在javascript的世界裡，所有的例外都可以處理，而且自訂例外--簡直比喝水還簡單呢！
   <script language="JavaScript1.2"> function showMessage3(){ var dia = prompt("what OS do you use?"); try{ if(dia == "xp" || dia == "windows"){ throw "suck"; }else if(dia == null || dia == ""){ throw "noinput"; }else{ throw "cool"; } }catch(excp){ if(excp == "suck"){ alert("Oh, you are really suck..."); }else if(excp == "noinput"){ alert("please input the OS name\nyou are using!"); dia = prompt("what os do you use?"); }else{ alert("hi, you are using "+dia); } } } </script> <input type="button" value="自訂例外" onclick="showMessage3()" />
   結果會是：
   
   
   所拋出的是一個例外的字串，而非例外類別。

JavaScript練習筆記(4)

在講到物件之前，我們先從陣列這個重要功能開始講起。

1. 建立你的第一個array！
   <script language="JavaScript1.2"> var myCerts = new Array(); //建立一個myCert陣列物件，並依序把陣列值填上。 myCerts[0] = "NCLP"; myCerts[1] = "SCJP"; myCerts[2] = "CCNA"; for (i= 0; i< myCerts.length; i++){ document.write(myCerts[i] + "<br />"); } </script>
   結果會是：
   
   
   注意，陣列的index是從0開始算起。



2. 加強型的for語法：for in
   <script language="JavaScript1.2"> for (some in myCerts){ document.write(myCert[some] + "<br />"); } </script>
   結果也會是：
   
   跟Java的foreach語法有些不同，但是用意是類似的。傳統的for可以讓你從陣列中依序、依間隔撈出想要的元素值；而for in(或是foreach)語法雖然比較簡單，但是卻只能「每一個」都取出。



3. 陣列相加
   JavaScript的陣列相加非常容易，他把陣列當成字串方式來處理！
   <script language="JavaScript1.2"> var arr1 = new Array(3); arr1[0] = "Sherri"; arr1[1] = "Hotel"; arr1[2] = "Oscar"; var arr2 = new Array(2); arr2[0] = "Civil"; arr2[1] = "Kilo"; document.write(arr1.concat(arr2)); </script>
   結果會是：
   
   透過concat()方法，javascript會幫我們補上一個","作間隔。



4. 把陣列轉成字串列印--join()並切割--split()
   <script language="JavaScript1.2"> //沿用上一個arr1跟arr2物件 document.write(arr1.join()+"<br />");//把arr1變成字串印出，元素預設以","分隔 document.write(arr2.join()+"<br />"); document.write(arr1.join(".")+"<br />"); //把arr1變成字串印出，元素改用"."作分隔 var arr3 = new Array(); //建立一個新的arr3陣列物件，要把arr1與arr2合併為arr3 arr3 = arr1.concat(arr2).join(" ").split("\\s+");/*先組成一個字串，利用空白分隔， 再利用split()方法搭配regular expr.將字串差成陣列，再指派給arr3。*/ document.write("利用for in印出陣列元素！<br />"); for (x in arr3){ document.write(arr3[x]); //利用上個例子所學的for in把陣列元素一個一個印出來。 } document.write("<br />利用傳統的for印出陣列元素！<br />"); for(i = 0; i< arr3.length; i++){ document.write(arr3[i]); } </script>
   結果會是：
   



5. 排序陣列元素--sort()並自訂排序方法
   <script language="JavaScript1.2"> function sortMean( numA, numB){ return numA - numB; } var arr4 = new Array(7); //來一個純英文的字串陣列！ arr4[0] = "Fedora"; arr4[1] = "Debian"; arr4[2] = "CentOS"; arr4[3] = "Mandriva"; arr4[4] = "OpenSuSE";arr4[5] = "Ubuntu"; arr4[6] = "openSolaris"; var arr5 = new Array(6); //來一個英文與數字夾雜的陣列！ arr5[0] = 10; arr5[1] = 10.0; arr5[2] = 10.5; arr5[3] = "100"; arr5[4] = "A100.3"; arr5[5] = 500; document.write("排序前<br/>"); document.write(arr4 + "<br/>");//我的天阿，竟然可以直接印出陣列！ document.write("排序後<br/>"); document.write(arr4.sort() + "<br/>"); //依英文字買排序 //列印arr5 document.write("排序前<br/>"); document.write(arr5 + "<br/>");//我的天阿，竟然可以直接印出陣列！ document.write("排序後<br/>"); document.write(arr5.sort() + "<br/>"); //依英文字買排序 document.write("number排序後<br/>"); document.write(arr5.sort(sortMean) + "<br/>"); //依英文字買排序 </script>
   結果會是：
   
   
   由此可知，英文字母排序是大寫先排完之後，再排小寫。
   印出陣列時，如果小數點為0則只印出整數部份。
   數字也可以跟字串進行排序，只要符合你自己的規則即可！

JavaScript練習筆記(3)

彈出式對話方塊

1. Confirm Box(確認方塊)
   <script language="JavaScript1.2"> function showConfirm(){ var r = confirm("選擇確定或取消"); if (r == true) { alert("你剛了確定"); }else { alert("你剛按了取消"); } } </script> <input type="button" onclick="showConfirm()" value="點我以顯示對話方塊" />
   結果會是：
   



2. Alert Box(警告方塊)
   <script language="JavaScript1.2"> function showAlert(){ alert("嗨，我是Alter Box!!!"); } </script> <input type="button" onclick="showAlert()" value="點我以顯示警告方塊" />
   結果會是：
   
   警告方塊只是一個提醒，沒有更多的互動功能。



3. Prompt Box(訊息提示方塊)
   <script language="JavaScript1.2"> function showPrompt(){ var name=prompt("請輸入你的瀏覽器名稱","Mozilla Firefox"); if (name != null && name !=""){ if(name == "IE" || name == "Internet Explore"){ alert("請勿再使用如此封閉的軟體！"); }else{ alert("您的瀏覽器是："+name+"，歡迎你！"); } }else{ alert("請乖乖輸入瀏覽器名稱！"); } } </script> <input type="button" onclick="showPrompt()" value="點我以顯示提示方塊" />
   結果會是：
   
   prompt()方法可以接受兩個參數：第一個是「提示方塊的title」，第二個是方塊的預設值。



4. 方法的應用。談到方法，就不得不提到變數。在方法內宣告的為區域變數，生命有要範圍僅在方法的{ }內；方法外的變數為全域變數，所以方法都可以使用。
   <script language="JavaScript1.2"> var aNum = 10; //全域變數 function multiple(num1, num2){ alert("the value is: "+num1*num2) } function showDialog(){ var value1 = prompt("請輸入第一個值");//區域變數 var value2 = prompt("請輸入第二個值");//區域變數 if (value1 != null && value1 != "" && value2 != null && value2 != "") { alert("the value is: " + multiple(value1, value2)); }else if (value1 != null && value1 != "") { //若value2是空值 alert("the value is: " + multiple(value1, aNum)); }else if (value2 != null && value2 != "") {//若value1是空值 alert("the value is: " + multiple(aNum, value2)); }else{ alert("the value is: " + multiple(aNum, aNum)); } } </script> <input type="button" onclick="showDialog()" value="點我以顯示自訂對話方塊" /><br/>
   結果會是：
   
   

JavaScript練習筆記(2)

流程控制與迴圈
上一篇筆記裡忘記提到：JavaScript是區分大小寫，所以跟Java的使用相同！
如果你有任何一種語言的撰寫經驗，這一篇只要輕鬆看過就好！

1. 你的第一個物件以及簡單的if判斷式：
   <script type="text/javascript"> var mydate=new Date(); var mytime=mydate.getHours(); if (mytime < 10){ document.write("<b>Good morning</b>, present time is:"+mytime+" o'clock."); }else{ document.write("<b>The present time is: </b>"+mytime+" o'clock."); } </script>
   結果會是：
   
   
   如果您很習慣物件導向的語法，您還可以這樣寫：
   <script type="text/javascript"> var mytime=new Date().getHours(); if (mytime < 10){ document.write("<b>Good morning</b>, present time is:"+mytime+" o'clock."); }else{ document.write("<b>The present time is: </b>"+mytime+" o'clock."); } </script>
   這種方法非常簡潔有力，也不會很難理解，建議大家使用。



2. Math類別都有一個random()的方法，蠻好玩的！
   <script type="text/javascript"> var rdn=Math.random(); if ((rdn*100+1) >50) { document.write("the random number is: "+(rdn*100+1)+"."); }else if((rdn*100+1) < 10){ document.write("the random number is: "+(rdn*100+1)+" which is between 50 and 10."); }else{ document.write("the random number is less than 10 !"); } </script>
   結果會是：
   
   Math.random()會創造出一個範圍大於等於0到小於1的小數，語法跟java幾乎一樣，太好了。


3. 簡單條件判斷式：(condition)? A : B
   當condition為true時，回傳A, 否則回傳B。適用於僅兩種可能性時，比if的語法簡單多了。
   <script language="javascript"> var myDay = new Date().getDay(); //theDay接收今天是一週的第幾天 var str1="today is weekend."; var str2="today is working day."; (myDay == 6 || myDay == 0 ) ? document.write(str1): document.write(str2); </script>
   結果會是：
   
   你需要特別注意的是：禮拜天是0，禮拜一是1，禮拜六是6，非常好記。



4. switch case條件判斷式：
   <script language="JavaScript1.2"> //我明確指定javascript的版本為1.2 var thisTime=new Date().getHour(); switch(thisTime){ case 1,2,3,4,5,6: document.write("now is the mid-night!"); break; case 7,8,9,10,11: document.write("now is the morning!"); break; case 12,13: document.write("now is the noon!"); break; case 14,15,16,17: document.write("now is the afternoon!"); break; default: document.write("now is the night!"); //break; } </script>
   結果會是：
   
   
   "break;"的重要性我就不重複提了，default值可以不用再寫"break;"，因為他是最後會執行的程式碼。要小心.getHours()是有s的阿！



5. 關於 邏輯運算子的一點提醒：假設x=5, y=25:
   

   邏輯運算子	簡單描述	範例
   &&	and	(x < 10 && y > 20)為真
   ||	or	(x==5 || y==5) 為假
   !	not	!(x==y) 為真

   在JavaScript裡沒有所謂的鬆散判斷"&"或是"|"。在Java裡， (x < 10 && y > 20)與 (x < 10 & y > 20)解讀上是不相同的。"&&"是聰明的邏輯運算子，假設前者已為false，則後續的比較必定為false，馬上就能回傳所定義的值；"||"也是假設前者已經是true，則總體必然為true，後續就可以不用在比下去了。
   JavaScript都是嚴謹的邏輯判斷式，對於script language來說更能提昇效率。
   


6. 來個簡單的for迴圈吧：
   <script language="JavaScript1.2"> var i, j; //不指定初值 for(i=1; i<10; i++){ for(j=1; j<10; j++){ document.write(i*j+" "); } document.write("<br/>"); } </script>
   結果會是：
   
   就是一個簡單的九九乘法表啦！（雖然）沒有排版過真的很醜！
   for迴圈還有加強型的for-in(Java裡為foreach)，我們講到陣列之後再回過頭來提一次。



7. 來個簡單的while迴圈吧！
   <script type="text/javascript"> var count=0; var i=10; while (count<10){ document.write("The number is " + i); document.write("<br />"); i+=5; count++; } </script>
   結果會是：
   



8. 先作一次再說的do-while迴圈
   <script language="JavaScript1.2"> var count=0; var i=10; do{ document.write("The number is " + i); document.write("<br />"); i+=5; count++; }while (count<10) </script>
   結果會是：
   

JavaScript練習筆記(1)

What is Javascript?
根據Wikipedia對於JavaScript的定義："JavaScript是一種廣泛用於客戶端Web開發的腳本語言，常用來給HTML網頁添加動態功能，比如響應使用者的各種操作。它最初由網景公司的Brendan Eich設計，是一種動態、弱型式、基於原型的語言，內建支援類。以它為基礎，制定了ECMAScript標準。"

您也應該知道，其實Javascript與Java是沒有任何關係的。Javascript最早是Netscape的Brendan Eich所開發的；後來的歷史我並不清楚，最後則又被SUN給買去。"JavaScript最初的確是受Java啟發而開始設計的，而且設計的目的之一就是「看上去像Java」[2]，因此語法上有很多類似之處，許多名稱和命名規範也借自Java。"

就我自己認為，Javascript包涵了物件化與非物件化的撰寫風格，想要踏入真正純物件化程式語言的世界(例如java)，可以先從javascript感覺那一點點味道。
另外，JavaScript與JScript是不同的喔！JScript是微軟為了對抗JavaScript所開發的，副檔名也取為.js。

初試啼聲

1. 欲在網頁裡使用javascript，必須網頁內宣告，例如：

   <body> <script type="text/javascript"> //<script language="javascript"> 這種寫法也很常見！ document.write("This is my first JavaScript!"); </script> </body>

   結果會產生：
   
   利用document.write()將內容寫入網頁。


2. 你也可以把javascript分開乘另一個檔案，只要用src導入即可：

   <body> <script type="text/javascript" src="abc.js"> </script> <p>繼續其他內容...</p> </body>



3. 你也可以在javascript內使用html語法：

   <body> <script type="text/javascript"> document.write("<b><i><h1>This is my first JavaScript!</h1></i></b>"); </script> </body>

   結果會產生：
   需注意html的語法要包在" "裡面，在外面接受的就是javascript的語法喔！



4. 如果你熟悉程式語言的話，沒有用{ }控制區塊是很痛苦的，幸好javascript也有區塊的功能：

   <body> <script type="text/javascript">{ document.write("This is my first JavaScript!"); //document.write("Javascript is an useful script language."); document.write("Javascript is an useful script language."); } </script> </body>

   結果會產生：
   
   請以";"作為該script statement的結尾，養成好習慣。另外JavaScript也利用//作為單行註解，利用/*...*/作為多行註解，



5. JavaScript未必只能在body內宣告。你可以把他宣告在<head>裡，並且在<body>內呼叫javascript的方法：

   <head> <script type="text/javascript"> function alterMessage(){ alert("您是透過IE瀏覽本站，請改用Firefox以得到最佳瀏覽效果！"); } </script> </head> <body onload="alertMessage()"> 其他內容... </body>

因為是宣告在<head>裡，所以這裡看不出效果。利用function宣告一個方法；在這裡我習慣採用JavaBeans的命名方式，方法採用camel case命名方式，並且在html的body內利用onload叫出此自訂方法。


6. JavaScript使用變數可說相當單純，不用宣告變數的類別；但你還是需要知道他是有類別的區分的：

   <script type="text/javascript"> var str1="I am"; var str2="Jim T. Tang."; var str3=str1+" "+str2; document.write(str3); </script>
   結果會是：
   

   利用+作為串接符號，真是很方便。



7. 更多變數混用並疊加：

   <script type="text/javascript"> var str1="I am"; var str2="Jim T. Tang."; var int1=5; var flt1=5.3; var str3=str1+" "+str2; var str4=int1+flt1; document.write(str3); document.write("<br/>"); document.write(str4); document.write("<br/>"); document.write(int1*flt1); </script>
   結果會是：
   
   
   可以進行字串相接，也可以作浮點數運算。注意他雖然是script language，但定義變數名稱，變數以及指派運算子"="的中間都可以有空格。
   方法內直接填寫變數名稱會印出變數，如果用" "包住則變成字串，請注意。