2013年12月11日 星期三

Sublime Text : Zen Coding

最近三梔阳要學著用Zen Coding 來寫Code,因為真的可以加快開發的速度~所以用了一陣子的Sublime Text決定安裝一下
Sublime Text 安裝
http://www.sublimetext.com/   官方網站



啟用Package Control
https://sublime.wbond.net/installation



那我們就來看看怎麼安裝吧

1. 安裝好Sublime --> 都是一直按下一步--->啟動 Sublime Text 畫面如下


2. 安裝Package Control , 我們在sublime text畫面 按下 Ctrl + ` 
就會出現Console如(圖1),之後我們再複製Package Control官網的文字(圖2)貼上按下Enter.

圖1
圖2

3. 或是您使用Package Control 提供的手動方式安裝


4. 之後我們在Sublime Text ---> Tools ---> Command Palette


5. 按下Command Palette後彈出視窗再打上 Install Package



6. 按下之後再打上 emmet 按下 Enter 就OK了!

7. 按下 Ctrl +Shift+Enter 就可以進行預覽的輸入(不打就不會預覽)

比如說
打這段div#wrapper後按下 Tab鍵 就會出現<div id="wrapper"></div>

8. 詳細的教學和使用方使可以在下面兩個網站參考一下
http://docs.emmet.io/abbreviations/syntax/
https://code.google.com/p/zen-coding/


2013年12月9日 星期一

JavaScript-11 迴圈的控制-3

接續JavaScript-11 迴圈的控制-2
今天一起來學習
1. for ( ) { }
2. for / in
3. while
4. do while
---------------------------------------------------

3. while (條件式 ) {程式執行區塊 }

while 和 if 不同的是它將增減的部份寫在執行程式區塊內,而迴圈的執行是在開頭條件式檢查若為True就進入程式執行區塊,若為False就離開迴圈。看以下範例:
---------------------------------------------------
<script>
  
  var i=1; //宣告變數i 
  var sum=0; //宣告變數sum
  
  while(i<=6) //條件i 不可大於7,若為True就進入程式執行區塊
      {
         document.write("整數"+i+"<br/>"); //顯示所有的 i 
         sum += i; //總和 i 
         i++; // 每次迴圈遞增1
      }
      document.write("總和為:"+sum);

</script>

-----------------------------------------------------
以上Js顯示內容為:
整數1
整數2
整數3
整數4
整數5
整數6
總和為:21 


2013年12月5日 星期四

JavaScript-11 迴圈的控制-2

接續JavaScript-11 迴圈的控制
今天一起來學習
1. for ( ) { }
2. for / in
3. while
4. do while

---------------------------------------------------
2. for / in--主要是顯示物件所有的屬性

for(test in objExample)
{
  document.write("屬性:" + test + "=" + objExample[test] );
}

以上為主要架構,for in 就是類似 for 的迴圈,objExample是一個物件,test是取得屬性名稱,所以此迴圈是一個取得所有物件的迴圈。
-----------------------------------------------------<script>
     var test ;  //宣告變數test
     var objExample = new Object(); //建立一個物件指定給objExample,所以此時可以將objExample當作一個物件!
      objExample.name = "三梔阳";
      objExample.age ="不小了~";
      objExample.sex = "男孩";
      objExample.email = "githyoung@gmail.com";

     for(test in objExample) // 顯示所有物件的屬性
          {
              document.write("屬性:" + test + "=" + objExample[test]+"<br/>" );
          }

</script>
------------------------------------------------------
以上Js顯示內容為:
屬性:name=三梔阳
屬性:age=不小了~
屬性:sex=男孩
屬性:email=githyoung@gmail.com

函數和物件等之後再仔細說明吧!

2013年12月4日 星期三

JavaScript-11 迴圈的控制

接下來讓我們進入Js的迴圈控制部份。
迴圈是一種流程的控制,我們可以指定值或是設定條件來讓程式碼執行的順序不同,執行的位置不同,甚至是滿足某種條件之後才去執行。

以下是我們常見的
1. for ( ) { }
2. for / in
3. while
4. do while

---------------------------------------------------
1. for ( ) { }

<script>
     var i ;  //宣告變數i
     var sum = 0; //宣告變數sum初值為0
     for(i = 1; i<=5; i++) // i 初值為 1 , i 不大於5 , i ++為遞增每次加1
          {
              document.write(i+<br/>); //顯示i 每次的值並且換行
              sum = sum + i ; // sum的值都會加上i 的值並且累加
          }
              document.write("總和為"+sum); ////在迴圈之外並輸出sum 的值
</script>
------------------------------------------------------
以上Js顯示內容為
1
2
3
4
5
總和為15
----------------------------------------------
我們分開三段來看:

1. for ( ) 內部:使用三個分號 ";" 來區分

  •  i = 1 就是迴圈的初始值 
  •  i <= 5 就是說 我們迴圈 i 最多執行5次
  •  i ++ 的語法之前有提過就是遞增每次會加1

2. for ( ) { } 大括號內部:裡頭執行的就是迴圈的內容,所以我們顯示了 i 每進行迴圈一次的值
    還有將 i 做一個累加總和的動作給sum
3. 迴圈之外:輸出我們總和的值

大家可以把for迴圈內的值任意變換來看看結果,不過請注意的是條件別設成無窮迴圈了
也就是不要設成這樣(隨意給個例子)
 for (var i = 1 ; i <=2 ; i--)
這樣大家依照邏輯來看就知道是無限的跑迴圈~所以請各位注意囉~

2013年12月3日 星期二

JavaScript-10 流程控制-4

接續JavaScript-10 流程控制-3 
5. ?:  我們可以把  當作 if 當作else

架構:
變數 = (判斷條件) ? True : False ; 若是判斷條件是真的為True,反之為False. 
--------------------------------------------------
<script>
var IamBoy = "女孩" ; 
if (IamBoy == "男孩"
{
   document.write("我是個男孩沒錯!");
}
else 
{
   document.write("不然你是誰?"); 
}
</script>
---------------------------------------------------

以上if/else的語法就可以改寫成以下語法

<script>

var Anwser=" ";          //指定Answer當作我們輸出網頁的變數
var IamBoy = "女孩" ; //指定變數

Answer = (IamBoy =="男孩") ? " 我是個男孩沒錯" : "不然你是誰?"; 
document.write(Answer);//輸出Answer內容

</script>

以上Js語法進行執行就可以得到"不然你是誰?",

2013年12月1日 星期日

Google Adsense 啟動小經驗分享!!

最近想要啟動一下Google Adsense來玩玩看,可申請明明都符合Google Adsense開的條件但卻不能申請,網路上看了各種經驗分享也沒效!後來想想是自己最近都沒寫文章,所以想說那我開始每天一篇試試看(其實應該要怎麼做很久了><").
OK,重點是我連續發了三天的文章之後就可以申請了!
所以結論就是若您都符合Google開的條件卻不能申請時,也許是您太久沒發文章了...!(我流量都不高喔..汗).

JavaScript-10 流程控制-3

接續JavaScript-10 流程控制-2
4.switch 多個選擇中選一個的條件下

語法為:
---------------------------
switch(判斷的條件) // swith (變數1 == 變數2)的話
     {
          case "變數1":
          運行的程式碼;
       break;
          case "變數2":
          運行的程式碼;
       break;
          case "變數3":
          運行的程式碼;
       break;
          default
       運行的程式碼;
     }

switch 的架構就是我們判斷的條件只有一個邏輯或是比較運算式,寫法使用case和switch(判斷的條件/變數)是否相同來運行,而break是跳出條件的敘述,若是沒有break就會繼續往下執行程式碼.
最後一段default並非必要的程式碼,代表著若是沒有符合條件case時才執行default內的程式.
---------------------------

我們來練習一下~

<script>
       var apple = "fruit"; //指定變數
switch(apple) // 判斷apple和case是否相同
{
     case "banana":
     document.write("香蕉啦!");
     break;
     case "fruit":
     document.write("蘋果!");
     break;
     case "orange":
     document.write("橘子喔!");
     break;
     default:
     document.write("什麼都沒有!");
}
</script>

以上Js程式碼會顯示出"蘋果!".
大家也可以拿掉break來試試看會發生什麼事情~!


2013年11月28日 星期四

JavaScript-10 流程控制-2

我們接續上篇JavaScript-10 流程控制
條件結構:
1. if
2. if / else
3. if / else if
4. switch
5. ?:
以上五種是我們寫程式時使用的條件性的語法。

2. if / else 二選一的狀況下

<script>
var IamBoy = "女孩" ; // 指定變數

if (IamBoy == "男孩") //如果IamBoy變數為男孩的話,就執行{  }內的語法
{
   document.write("我是個男孩沒錯!"); // 輸出" 我是個男孩沒錯! "文字
}

else // 因為指定的變數和if { } 內要執行的語法不對,結果為false,所以我們執行else{ }內的語法
{
   document.write("不然你是誰?"); // 輸出" 不然你是誰 "文字
}
</script>

以上Js語法進行執行就可以得到"不然你是誰?".
更簡易的寫法為:

--------------------------------------------------
<script>
var IamBoy = "女孩" ;

if (IamBoy == "男孩")
   document.write("我是個男孩沒錯!");
 else
   document.write("不然你是誰?");
 </script>
-------------------------------------------------


3. if / else if  多選擇的狀況下


<script>
var Aboy = "男" ;
var Agirl = "女" ;
var Aoldman = "老頭子" ;

if (Aboy=="老頭子")
    document.write("你是男生");
else
    if (Agirl=="女")
      document.write("你是女生");
     else
         if(Aoldman=="老頭子")
            document.write("你是?");
 </script> 

以上Js語法進行執行就可以得到"妳是女生",
很簡單吧,各位可以自己自訂變數來得到想要的結果喔!



2013年11月27日 星期三

JavaScript-10 流程控制

今天介紹JavaScript的流程控制,先簡單提一下流程控制是什麼~
流程控制其實就是我們日常生活處理事情的過程和決策的方法~大致可分為三種

比如我今天要去買菜當作例子,

1. 買完青菜再買肉,接著再買飲料,按照順序一個一個的去買---循序結構
2. 因為肉今天搭配飲料比較便宜,所以我選擇先去買肉和飲料--選擇條件結構

3. 搭手扶梯去1,2,3F買東西,我們若是不離開手扶梯就會一直卡在手扶梯就像迴圈一樣~
而假設2F可以買肉所以我去了2F,所以我就結束了這個手扶梯重複迴圈。
若是我被騙了原來2F是賣菜的,那我會回到原點再去看1,3F哪層是買肉的,直到是真的我才會離開手扶梯--重複條件結構
以上三點就是簡單比喻一下有個概念,以下就進入我們主要的主題部份:


條件結構:
1. if
2. if / else
3. if / else if
4. switch
5. ?:
以上五種是我們寫程式時使用的條件性的語法。


1. if - 條件式的執行,屬於單選題,程式對了才執行我們要的結果:

<script>
var IamBoy = "男孩" ; // 指定變數

if (IamBoy = "男孩") //如果IamBoy變數為男孩的話,就執行{  }內的語法
{
   document.write("我是個男孩沒錯!"); // 輸出我是個男孩沒錯文字
}
</script>

以上Js語法進行執行就可以得到"我是個男孩沒錯!".

2013年11月25日 星期一

CSS Input type 選擇器(selector)

我們知道在寫網頁時有關文字方塊,選單,多重選單,選取方塊這些樣式是 
<input type="text" > 
<input type="password" >   
or <input type="checkbox" >  
那有沒有一種寫法可以針對所有的input type分別來做樣式的設計呢?  
有的,那就是 
input[type="text"] ,  input[type="password"]  or input[type="checkbox"]

範例:
  1. <style type="text/css" media="screen">
  2. input[type="text"] {background-color:#000000;}
  3. </style>
加上上面這段css再套用在您網頁中的
  1. <p>
  2.    <input type="text" />
  3.    <input type="password" />
  4.    <input type="checkbox" />
  5. </p>
就可以了。

總結:
1. input[type='text'] or input[type=text] 這兩種寫法也OK.
2. 具有type屬性的input元素皆適用此規則
3. Windows IE 6以下不對應,IE 7以上對應

2013年10月9日 星期三

HTML5 圖片與選單中間空白問題


在HTML5中,圖片會對齊基線再顯示,所以圖片下方都會顯示一條空白~
範例:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head></head>
  4. <body>
  5. <div id="img">
  6.   <img src="yourimg.jpg" alt="">
  7. </div>
  8. <!-- 一條空白-->
  9. <div id="nav">
  10.   <ul>
  11.         <li><a href="#">1</a></li>
  12.         <li><a href="#">2</a></li>
  13.         <li><a href="#">3</a></li>
  14.         <li><a href="#">4</a></li>
  15.   </ul>
  16. </div>
  17. </body>
  18. </html>
#img img{vertical-align: bottom;}   這時候只要加上這條CSS語法就可以解決這問題喔~~!! 

2013年9月28日 星期六

綠葉方舟

這兒還不錯,捕捉到一隻青蛙。
(photo by 三梔阳)
 這次去了綠葉方舟,位在苗栗,玩了一年的份量我! 

2013年9月11日 星期三

NHK編制:『 父與子的300日戰爭 宮崎駿 X 宮崎吾朗 』

(摘錄自父與子的300日戰爭 宮崎駿 X 宮崎吾朗 影片畫面 )

由NHK精心製作的人物故事,動畫大師宮崎駿和其兒子宮崎吾朗兩個人之間微妙的感情。
 (以下網址轉自Youtube)

(1)
https://www.youtube.com/watch?v=hPt7zxPG9g0&list=PL9F792502A9637853

 (2)
https://www.youtube.com/watch?v=sqbosenKYsA&list=PL9F792502A9637853

 (3)
https://www.youtube.com/watch?v=95ZCnOe9umA&list=PL9F792502A9637853

 (4)
https://www.youtube.com/watch?v=qcJ4imcHbFc&list=PL9F792502A9637853

 (5)
https://www.youtube.com/watch?v=k2iHojnAqq4&list=PL9F792502A9637853

誠心推薦,除了NHK好得沒話說的影片品質,還能看見動畫大師(日本人做事情的態度)他們製作動畫的用心和理念,還在低落的失落的找目標的人們XD,絕對是看了讓人振奮!

讓我套句日式說法:請一定要看看這部影片!!

2013年9月4日 星期三

Sky Dot.

(photo by 三梔阳)
只是想讓大家猜猜這張天空中的中心黑點是什麼~~

2013年7月31日 星期三

參數列表(Variable-Length Argrment Lists, 簡稱 Varargs)

參數列表(Variable-Length Argrment Lists, 簡稱 Varargs), 也稱變數長度引數表如果我們無法確定呼叫方法會傳遞幾個參數,就無法明確定義這方法的參數個數,這時我們使用 Varargs 來解決參數個數不定的問題,而參數列表對於Java來說仍視為陣列.
範例:
  1. class Varargs01 // 定義一個類別取名為Varargs01{
  2.       // 此時的String...names 就是參數列表,names會被視為陣列.  
  3.      void showOrder(String...names) 
  4. {     
  5. // 我用Order ser來顯示我點了什麼餐點
  6.                 System.out.print("Order set:"+"  "); 

  7. // 使用for-each迴圈自動走訪所有元素,這裡我們指定陣列names.
  8.                 for(String Order:names) 
  9.                         System.out.print(Order+" ");
  10.                 System.out.println(); }
  11.         public static void main(String args[]){
  12.                
  13.                // 建立一個物件給var
  14.                 Varargs01 var = new Varargs01();
  15.     
  16. /*此3個字串會自動包裝成陣列後再傳遞給(String...names)的names變數形成 
  17.        String names[] ={"Hamburger","Sandwich","Tuna Cheese"};*/
  18.            var.showOrder("Hamburger","Sandwich","Tuna Cheese");
  19.            var.showOrder("Soda","Juice");//觀念同上}
  20. }
Order set: Hamburger  Sandwich  Tuna Cheese
Order set: Soda   Juice

使用參數列表有3個限制請注意:
1.   在同一個類別內不可同時出現,因為相同類型的參數列表和陣列參數意義相同
2.  參數列表須放在所有參數的最後面如 : void showOrder(String str, String...names)
3.  1個方法只能使用1次參數列表,原因和第2點相同,編譯器會不知如何切割傳遞過來的值.

2013年6月25日 星期二

2013陳樂融/藍麗娟 人生四季講座-夏之饗宴


時間:2013年 6 月 19 日星期三 19:30   
地點:新竹市演藝廳國際演講廳  
講題:建築裡的哲思—從長城到安藤忠雄訴說的人生祕密 
主講人:新時代文化人、IC 之音《理性與感性》主持人 陳樂融 與  
《跟著安藤忠雄看建築》作者 藍麗娟  
演講內容:

陳+  城牆--長城,柏林圍牆
藍+  教堂--與大自然共生  
+  未來主義  
藍+  舊建築,老街區,新生命
陳+  後現代主義
藍+  在地建築,在地人文
陳+  解構主義
藍+  建築-一種公共藝術
陳+  住宅
藍+  醫院,醫人也醫病


這次演講的主題在於建築關於人。
各式各樣的建築,帶給我們不同的想法,而這個想法可以是你對審美觀的重新調整或是對於歷史留下來的事物多一番省思。

陳的演講所帶給我們屬於理智和反思角度的那一面去看建築,好比一個古代的建築如城牆,在中國古代的集權社會裡頭,那的確是有錢人才能留下來的東西,甚至君王,甚至我們沒能想像,那是聖賢君主犧牲多少老百姓才能有的產物。
藍則是屬於感性角度的一面並透過照片的傳達,讓我們體驗歷史的故事和建築師安藤先生創作的動機和理念。如水之教堂,光之教堂。
在其中我很想去體驗一下藍一直推薦的光之教堂靈性感受。

再來是未來主義,後現代主義,解構主義。
未來主義中我們可以思考的是當下的我們所思考的未來,以及當下的我們去看當時也許80年前人們認為的未來主義式建築,對於當下而言也許我們會認為以前的人們所認定的未來主義很怪或稀鬆平常,也可能繼承了許多未來的元素是我們熟悉的,可以是幻想出來的。
可不論如何未來的建築或是元素,基本上是我們還是要預測未來,那是需要龐大的知識庫來當作基底才能歸納或是去延伸。

後現代主義其實和未來主義在於未來主義可以天馬行空些,後現代畢竟還是停留在現代主義之後的現在,有點繞舌,不過簡單來說就是一種對於現在主義所產生的一種研究之後,而可能我就是要反對現在主義這塊既定的規範,而自成一派,而有許多學問甚至批判。

解構主義其實我覺得就是一種"怪"的現象,對立又不對立,扭曲又不扭曲,就是一種衝突的現象,你必須站在宏觀的文化去探討其本質,也許就像是本國人和外國人之間產生的衝突,但其中本質的部份卻卻不是那麼對立。

藍的部份我比較喜歡是建築師使用在地的材料,也就是透過當地的才有的材料去設計建構一個作品,如王澍的作品-中國美術學院象山校區
還有醫院的介紹,好的醫院能夠治癒人類的心,如長頸鹿兒童照護中心,在醫院放一隻長頸鹿,小朋友對於來醫院的抗拒性我相信也降低了不少。

最後~三梔阳其實很久沒聽演講了,都在學程式。偶而也要人文來攪和一下。
鼓勵大家多多接觸不一樣的世界,不一樣的角度。
這場演講很精彩,大家有空可以去Follow陳樂融下一個四季。

2013年5月5日 星期日

2013年2月3日 星期日

2013年1月23日 星期三

微望之春

跑到附近的科技大學看書時所拍,當時的陽光很薄弱。
(photo by 三梔阳)

2013年1月13日 星期日

Work Place

沉寂了一段時間~~! 三梔阳也休息了一陣子! 現在再出發!
(photo by 三梔阳)