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來試試看會發生什麼事情~!