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以上對應