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>
   結果會是：
   NCLP
   SCJP
   CCNA
   
   
   注意，陣列的index是從0開始算起。



2. 加強型的for語法：for in
   <script language="JavaScript1.2"> for (some in myCerts){ document.write(myCert[some] + "<br />"); } </script>
   結果也會是：
   NCLP
   SCJP
   CCNA
   
   跟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>
   結果會是：
   Sherri,Hotel,Oscar,function concat() { [native code] }
   透過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>
   結果會是：
   Sherri,Hotel,Oscar
   Civil,Kilo
   Sherri.Hotel.Oscar
   利用for in印出陣列元素！
   Sherri Hotel Oscar Civil Kilo
   利用傳統的for印出陣列元素！
   Sherri Hotel Oscar Civil Kilo



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>
   結果會是：
   排序前
   Fedora,Debian,CentOS,Mandriva,OpenSuSE,Ubuntu,openSolaris
   排序後
   CentOS,Debian,Fedora,Mandriva,OpenSuSE,Ubuntu,openSolaris
   排序前
   10,10,10.5,100,A100.3,500
   排序後
   10,10,10.5,100,500,A100.3
   number排序後
   10,10,10.5,100,500,A100.3
   
   
   由此可知，英文字母排序是大寫先排完之後，再排小寫。
   印出陣列時，如果小數點為0則只印出整數部份。
   數字也可以跟字串進行排序，只要符合你自己的規則即可！

卸載檔案系統

很多時候卸載檔案系統會遇到一些困難.
這篇文章提供很詳細的解說, 希望可以幫助解決一些問題!
卸載 (unmount)/退出檔案系統

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>
   結果會是：
   The present time is: 11 o'clock.
   
   如果您很習慣物件導向的語法，您還可以這樣寫：
   <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>
   結果會是：
   the random number is: 62.48492721701275.
   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>
   結果會是：
   today is working day.
   你需要特別注意的是：禮拜天是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>
   結果會是：
   now is the morning!
   
   "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>
   結果會是：
   1 2 3 4 5 6 7 8 9
   2 4 6 8 10 12 14 16 18
   3 6 9 12 15 18 21 24 27
   4 8 12 16 20 24 28 32 36
   5 10 15 20 25 30 35 40 45
   6 12 18 24 30 36 42 48 54
   7 14 21 28 35 42 49 56 63
   8 16 24 32 40 48 56 64 72
   9 18 27 36 45 54 63 72 81
   
   就是一個簡單的九九乘法表啦！（雖然）沒有排版過真的很醜！
   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>
   結果會是：
   The number is 10
   The number is 15
   The number is 20
   The number is 25
   The number is 30
   The number is 35
   The number is 40
   The number is 45
   The number is 50
   The number is 55
   



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>
   結果會是：
   The number is 10
   The number is 15
   The number is 20
   The number is 25
   The number is 30
   The number is 35
   The number is 40
   The number is 45
   The number is 50
   The number is 55
   

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>

   結果會產生： This is my first JavaScript!
   
   利用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>

   結果會產生：

   This is my first JavaScript!

   
   需注意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>

   結果會產生：
   This is my first JavaScript!Javascript is an useful script language.
   請以";"作為該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>
   結果會是：
   I am Jim T. Tang.

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



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>
   結果會是：
   I am Jim T. Tang.
   str3
   10.3
   26.5
   
   可以進行字串相接，也可以作浮點數運算。注意他雖然是script language，但定義變數名稱，變數以及指派運算子"="的中間都可以有空格。
   方法內直接填寫變數名稱會印出變數，如果用" "包住則變成字串，請注意。

Chromium for Linux

當我們談到Chrome for Linux時，就不免會看到Chromium這個字。實際上，這兩者是不同的東西：Google Chrome乃是根據Chromium這個開放原始碼的計畫去實做的。Chromium這個計畫並非以GPL授權，反之是以更自由的BSD的許可方式授權。詳細介紹可以參閱WikiPedia；版本上，Chromium每隔幾小時就會有一個更新，當測試後確定為穩定版本後，就會被Google納入Google Chrome裡，因此可以說Chrome是Chromium的穩定版本。然而，Google並沒有發布Chrome for Linux的穩定版，因此我們在linux所使用的都是Chromium for Linux，或是Google所打包的Google Chrome for Linux不穩定版(還是Chromium，只是灌上了Google的名字罷了)，請特別注意。

Google Chrome	Chromium

我們可以從Chromium開發者文件找到適合各種平台跟版本的Chromium來安裝。

Mac user	Google Chrome.dmg
Debian-lile Linux(i386)	google-chrome-unstable_current_i386.deb
Debian-lile Linux(amd64)	google-chrome-unstable_current_amd64.deb

如果您是Debian的使用者，甚至可以加入google repository到/etc/apt/soutces.list裡：

deb http://dl.google.com/linux/deb/ stable non-free

如果您並非Debian-like的linux，可以到build.chromium.org下載每幾小時更新的「免安裝」版本：相較於以上是由Google官方所打包，這個版本就是最純的Chromium For Linux的版本了。

小結：
1. Chromium For Linux一開始就會偵測系統其他的瀏覽器，並且詢問是否要自動匯入到Chromium裡，很方便也很貼心。
2. 我所安裝的Chromium for Linux(from build.chromium.org)還是無法顯示含flash以及java的網頁，除非啟動時加入--enable-plugins。可以參考Google Chrome Linux 已經堪用了一文，裡面有網友熱心提供的一些建議參數可以使用。
3. Chromium for Linux還沒有實做出privacy feature，因此不建議一般人使用。
4. 尚未支援列印功能。

延伸閱讀：最友善IE版本！

the picture is cited from DeadDog.

gmail專屬圖示

很多人不敢在個人網站上光明正大的擺上自己的email，甚至是作一個連結放在html原始裡都不敢，原因是因為網路上蒐集email的機器人程式實在是太多了！一個比較好的解決方式是：把自己的email作成圖示吧！

於是我搜尋"email +icon +generator"，真的出現一個網站可以自訂我們的email圖示，而且不只gmail呢！各位可以利用services.nexodyne.com來產生自己的email圖示喔！

不過！由於網頁是php寫的，我實在不敢保證這過程中我們的emial information會不會被偷偷存下來...如果有疑慮的看官還是別輕易嘗試吧！

完成後我的email圖示如下：

GSAS on Linux安裝筆記

第一次接觸到gsas這套自由軟體，是在成大地科系跟龔老師的高壓礦物研究室學來的。很幸運能夠幫忙開發轉換gsas格式的小程式，僅以此篇作筆記。

一、What's GSAS?
GSAS (General Structure Analysis System)是一套可以藉由中子繞射(neutron diffraction)以及X-ray資料來分析結構模型的一套系統。她可以分析單晶繞射、粉末繞射 (Rietveld analysis)，或者兩者同時分析。 愧於筆者並非本領域出身，請詳見該網站的介紹。 作者是Allen C. Larson and Robert B. Von Dreele，Los Alamos National Laboratory。gsas並非開放原始碼軟體，作者也在首頁上說明別寫信跟他要原始碼。

二、下載及安裝
GSAS是一個文字介面(console mode)的程式，想要使用圖形介面還需安裝 EXPGUI；作者建議我們可以安裝bundle的版本：GSAS+EXPGUI。對於Linux的使用者，可以直接下載：

wget -c ftp://ftp.ncnr.nist.gov/pub/cryst/gsas/LINUX_gsas+expgui.tar.gz

假設把gsas放在/opt裡：

tar zxvf LINUX_gsas+expgui.tar.gz -C /opt

此時你需要以root權限設定一些變數：

echo " alias gsasgui=\"/opt/gsas/tcltk84+ /opt/gsas/expgui/expgui\"" >> /etc/skel/.bashrc

echo "export GSASHOME=\"/opt/gsas\"" >> /etc/skel/.profile
echo "export GSAS=\"/opt/gsas/exe\"" >> /etc/skel/.profile

有些linux版本(如RedHat系)可能是/etc/skel/.bash_profile，請自己留意。 最後，你需要在.profile裡對PATH作最後的修正：

export PATH="$HOME/bin:$PATH:$GSAS:$GSASHOME"

正規的Linux設定裡，.bashrc裡規範alias、終端機格式等；在.profile裡規範環境變數、區域變數，因此強烈建議依照筆者的設定方式去設定。 設定完成後，請使用者將/etc/skel裡的設定檔覆蓋到家目錄下即可：

cp /etc/skel/.bashrc ~/
cp /etc/skel/.profile ~/

設定在/etc/skel的好處在後續的維護上，往後新增使用者完全不必在設定一次。

你也可以參考for unix的教學。網站上的教學把alias設定在.profile裡，是違背當初設計的精神的；因此這樣設定雖然不會有誤，但還是強烈建議各位設定在.bashrc，而非.profile。

三、進階設定
使用者可以客製化自己的EXPGUI設定，請參考這裡。
    請養成閱讀manual的好習慣，這裡有最新的手冊可以下載。

四、轉換小程式--JRaw2Gsas
我有為成大地科系高壓礦物實驗室寫了一個開放原始碼的小程式--JRaw2Gsas(The Java Raw to Gsas Transforming Program)，各位可以到我的協作平台下載使用。不過功能只能轉換成大地科系的兩台X-ray機器，其他的可不保證喔！
這是我寫的第一個圖形程式，也是第一個考過SCJP後寫的小程式，我很高興！雖然功能很簡單，但是我還是把原始碼跟各位分享；只是諸位如果利用我的code修改後，還是要再使用GPL發佈出來唷！