2016年5月23日 星期一

JavaScript的基本概念(二) & Function的使用

JavaScript函數(function)
函數 (function) 是 JavaScript 中的功能模組,一些重複性的工作皆可放在函數之中,需要進行這些工作時,再進行呼叫相關函數即可。


基本的函數定義如下
function 函數名稱(參數列) {
   相關陳述;
}
定義函數使用關鍵字 (keyword) function ,其後空一格接函數的識別字 (identifier) 名稱與小括弧,小括弧內為可有可無的參數列 (parameter list) ,其後為成對的大括弧,大括弧裡頭放置相關的功能陳述。所謂的參數 (parameter) 係指傳遞給函數的資料,函數可依此資料進行相關工作。

程式範例1如下:


<!DOCTYPE html>

<html lang="en">
   <head>
       <meta charset="utf-8" />
       <title></title>
       <!--選擇器的取法
           id="div1" => #div1
           class="div1" =>.div1
       -->
       <style>
           #div1{
               position: absolute;
               left: 250px;
               top: 50px;
               width: 80px;
               height: 80px;
               color: #f00;
               background: #00ff21;
           }
       </style>
       
   </head>
   <body>
       <div id="div1" >
           test
       </div>
   </body>
</html>

<script>
   //把"hahaha"的值塞入"div1"的標籤內
   document.getElementById("div1").innerHTML = "hahaha";
   //1.宣告函數(無參數)
   function test() {
       window.alert("測試函數");
   };
   //呼叫函數才能執行
   window.test();


   //2.宣告函數(帶參數)
   function add(x, y) {
       var sum = x + y;
       window.alert(x + " + " + y + " = " + sum);
   }
   //呼叫函數才能執行
   window.add(3, 4);


   //3.宣告函數(帶參數、有回傳值)
   function add2(x, y) {
       var sum = x + y;
       return sum;
   }
   //把add2(3, 7)函數計算後的值塞入"div1"的標籤內
   document.getElementById("div1").innerHTML = add2(3, 7);

</script>


呈現效果:
圖一:


圖二:


圖三:


HTML 常用之使用者操作元件
凡是GUI形式(Graphical User Interface,圖形使用者界面)的程式環境幾乎都會提供一些讓使用者操作的元件(widget)[window dage],HTML環境常用的有:按鈕、文字輸入框、文字輸入區、單選項、複選項、下拉選單、上傳選單...


單選項 http://www.webtech.tw/info.php?tid=93

複選項 http://www.webtech.tw/info.php?tid=94

下拉選單 http://www.webtech.tw/info.php?tid=92


使用 CSS 語法的 position:absolute; 座標定位方法


程式範例2如下:
<!DOCTYPE html>

<html lang="en">
   <head>
       <meta charset="utf-8" />
       <title></title>

       <!--使用div 置中-->
       <style>
           .table{
               position: absolute;
               width: 300px;
               height: 500px;
               top: 50%;
               left: 50%;
               background: #e76ac2;
               margin-top: -250px;
               margin-left: -150px;
           }
       </style>
   </head>
   <body>
       <!--HTML 常用之使用者操作元件-->
       <div class="table">
           資料調查表:<br><hr>
           姓名: <input type="text" >
           <br><hr>
           性別:  男<input type="radio" value="男" name="sex">
                  女<input type="radio" value="女" name="sex">
                  X <input type="radio" value="X" name="sex">
           <br><hr>
           住址: <textarea rows="3" cols="30"></textarea>
           <br><hr>
           興趣:<br>
                <input type="checkbox" value="看書">看書<br>
                <input type="checkbox" value="打球">打球<br>
                <input type="checkbox" value="看電視">看電視<br>
                <input type="checkbox" value="購物">購物<br>
           <hr>
           居住地點:
               <select>
                   <option>台北市</option>
                   <option>新北市</option>
                   <option>桃園市</option>
                   <option>台中市</option>
                   <option>台南市</option>
                   <option>高雄市</option>
                </select>
                <br><hr>
           照片上傳:<input type="file">
           <br><hr>
           <div>
               <input type="button" value="完成">
               <input type="button" value="取消">
           </div>
           
       </div>
       
   </body>
</html>


呈現效果:


改用<table>標籤呈現資料調查表:
程式範例3如下:
作法:
1.架構階層排出來會比較好寫code
2.<table></table>內資料先做出來
3.再慢慢調樣式(css 的style)
<!DOCTYPE html>

<html lang="en">
   <head>
       <meta charset="utf-8" />
       <title>資料調查表(列表顯示)</title>
       <style>
           .table{
               position: absolute;
               width: 500px;
               height: 400px;
               top: 50%;
               left: 50%;
               background: #f7d534;
               margin-top: -250px;
               margin-left: -200px;
               border-color: #0ff;
               
           }
           .table_title{
               text-align: center;
               font-size: 24px;
               height: 50px;
           }
           .row_title{
               text-align: right;
               width: 100px;
               height: 30px;
           }
           .botton{
               text-align: center;
           }
       </style>
   </head>
   <body>
       <table border="1" class="table">
           <!--8個-->
           <tr >
               <td colspan="2" class="table_title" >資料調查表</td>
           </tr>
           <tr>
               <td class="row_title">姓名: </td>
               <td>
                   <input type="text" >
               </td>
           </tr>
           <tr>
               <td class="row_title">性別:
               </td>
               <td>
                   男<input type="radio" value="男" name="sex">
                   女<input type="radio" value="女" name="sex">
                   X <input type="radio" value="X" name="sex">
               </td>
           </tr>
           <tr>
               <td class="row_title">地址:
               </td>
               <td>
                   <textarea rows="3" cols="30"></textarea>
               </td>
           </tr>
           <tr>
               <td class="row_title">興趣:
               </td>
               <td>
                   <input type="checkbox" value="看書">看書<br>
                   <input type="checkbox" value="打球">打球<br>
                   <input type="checkbox" value="看電視">看電視<br>
                   <input type="checkbox" value="購物">購物<br>
               </td>
           </tr>
           <tr>
               <td class="row_title">居住地點:
               </td>
               <td>
                   <select>
                       <option>台北市</option>
                       <option>新北市</option>
                       <option>桃園市</option>
                       <option>台中市</option>
                       <option>台南市</option>
                       <option>高雄市</option>
                   </select>
               </td>
           </tr>
           <tr>
               <td class="row_title">照片上傳:
               </td>
               <td>
                   <input type="file">
               </td>
           </tr>
           <tr>
               <td colspan="2">
                   <div class="botton">
                       <input type="button" value="完成">
                       <input type="button" value="取消">
                   </div>
               </td>
           </tr>
           
       </table>
   </body>
</html>


呈現效果:

事件觸發(event)


當視覺化的元件被使用者操作時,系統會因應元件種類與操作的方式,產生一個"事件"。事件本身也是一個物件,它標誌著使用者在元件上的動作。我們可以因應某些特定的事件做一些自動化的工作。(若沒作,事件物件會在一定的時間後系統會消滅)


事件處理模式
1.將要做的自動化工作包裝成一個函數(這個函數稱為事件處理函數)
2.在要反應事件的元件上以"事件屬性"的方式指定事件處理函數。

w3C提供處理監聽器事件的方法


程式範例4如下:
<!DOCTYPE html>

<html lang="en">
   <head>
       <meta charset="utf-8" />
       <title></title>

       
   </head>
   <body>
       name:<input type="text" id="showMessage" onclick="showMessage()" value="文字" >
       <button onclick="do_something()" class="btn">按鈕</button>
   </body>

</html>

<script>
   //設定按鈕的觸發事件
   function do_something() {
       window.alert("測試按鈕事件...");
   }
   //設定按鈕的觸發事件(取得value值)
   function showMessage() {
       var data = document.getElementById("showMessage").value;
       var showMsg = window.prompt(data, "測試文字事件");
       alert(showMsg);
       
   }

</script>

呈現效果如下:



事件進階(System)


注意!!不盡然所有的事件都是使用者操作元件造成的,有些"系統事件"是網頁運行到某種階段或發生外在環境改變時會由系統觸發,如:
window物件有一個onload事件,這個事件會在網頁下載完成時由系統觸發。


程式範例5如下:

呈現效果如下:





沒有留言:

張貼留言

[java] 條件控制

前言: 在 java 的條件控制中可分為 if-else 架構、三元運算子、switch-case 架構這三類,其中 if-else、三元運算子為條件型的判斷,條件必須為 true/false布林值;switch-case 為比對變數型的判斷,條件值比較多可以是 char、...