javaScript學習基礎篇(1)(陣列)

由於專案需要，開始進入js的學習過程。

js的簡單定義：javaScript的簡寫形式，是一種指令碼語言,廣泛用於客戶端Web的開發，常用來給HTML網頁新增動態功能。

javaScript基本語法

• javaScript的輸入輸出：

<!--內容的輸入-->
  <script type="text/javascript">
      document.write("<h1>這是h1標籤</h1>");
      document.write("<h2>這是h2標籤</h2>");
      document.write("<h3>這是h3標籤</h3>");
  </script>

  <!--修改標籤內容-->
   <p id="tip">這是預設文字</p>
  <script type="text/javascript">
      document.getElementById("tip").innerHTML = "zww";
  </script>

• javaScript的常量,變數 ：

   <!-- 常量,變數 ,計算-->
   <script type="text/javascript">
       var i = 10;
       var j = 20;
       var m = i+j;
       document.write("the result is:"+m);
   </script>
   <br>
   <!-- 字串和數字-->
   <script type="text/javascript">
       var i = "hello";
       var j = 20;
       var m = i+j;
       document.write("the result is:"+m);
   </script>
   <br>
   <!-- 字串和bool-->
   <script type="text/javascript">
       var i = "hello";
       var j = true;
       var m = i+j;
       document.write("the result is:"+m);
   </script>

• 陣列

<!-- 陣列 -->
   <script type="text/javascript">
       var arr = ["a","b","c"];
       document.write("array[0]="+arr[0]);

       document.write("<br/>");
       var arr1 = new Array;
       arr1[0]  = "ab";
       document.write("array1[0]="+arr1[0]);

       var arr2 = new Array("abc","abcd");
       document.write("array2[0]="+arr2[0]);
   </script>

陣列的連線

<script>
    var a = ['a','b'];
    var b = ['c','d'];
    document.write(a.concat(b));
</script>

陣列的排序

<script>
//    排序
var a = ['5','4',3,1,'2'];
document.write(a.sort(function(a,b){
    return a-b;
}));
</script>

陣列的追加

<script>
    var arr = new Array('a','b');
    arr.push('c')
    document.write(arr);
</script>

<br>

陣列的翻轉

<script>
//    陣列的翻轉
var arr = new Array('a','b','d');
document.write(arr.reverse());
</script>

• 迴圈

<!-- 迴圈 -->
   <script type="text/javascript">
        // for迴圈
        for (var i = 0; i<10; i++) {
            document.write("row = "+i);
        }
        document.write("<br/>");
        // while
        var j = 0;
        while(j < 10 ){
            document.write("row = "+j);
            j++;
        }
        document.write("<br/>");

       // do-while
       var z = 0;
       do{
           z++;
           document.write("row = "+z);
       }while(z<10);

        // for in
        document.write("<br/>")
        var arr = ["a","b","c","dd"];
        for(var v in arr){
            document.write(v +" ");
        }
   </script>

• javaScript的運算：

<p>i = 10;j=10;i+j=?</p>
   <p id="sumid"></p>
   <button onclick="sum()">結果</button>
   <script type="text/javascript">
       function sum(){
           var i=10;
           var j = 10;
           var m = i+j;
           document.getElementById("sumid").innerHTML = m;
       }
   </script>

• javaScript判斷物件是否相等：

<script type="text/javascript">
       var i = "10";
       var j = 10;
       //值判斷
       document.write(i == j);
       document.write("<br/>");
       //值和型別判斷
       document.write(i === j);
       document.write("<br/>");
       document.write(i <= j);
   </script>

• javaScript switch

<script type="text/javascript">
       var i = 5;
       switch (i){
           case 1:
               document.write("i= 1");
               break;
           case 2:
               document.write("i= 2");
               break;
           case 3:
               document.write("i= 3");
               break;
           default :
               document.write("條件不滿足");
               break;
       }
   </script>

• javaScript 函式

   <!--函式-->

   <script type="text/javascript">
       //無參函式
       function demo(){
           var a = 10;
           var b = 20;
           var sum = a+b;
           alert("a+b= "+sum);
       }
       //有參函式
       function demo1(a,b){
           var sum = a+b;
           alert(sum);
       }
       //有返回值的函式
       //有返回值
       function demo3(){
           return "你好啊";
       }
       var a = demo3();
       alert(a);

   </script>
   <form>
       <input type="button" value="btn" onclick="demo()">
   </form>

• javaScript 全域性變數和區域性變數
  什麼是變數：
        變數是用來儲存資料的。

  變數的命名規範：
      （1）變數只能由英文字母，數字，下劃線以及英文$符組成，並且數字不能放在名稱的開頭。
        （2）變數的命名不能使用JavaScript中的關鍵字和保留字。
          關鍵字：已經被JavaScript內部使用過的。
          保留字：還沒有被JavaScript內部使用，但是可能有一天被使用到的。

  • 宣告變數
    var num ;
  • 給變數賦值
    num = “hh”; //賦值運算子

<script type="text/javascript">
       var n = 10;m = 20;//全域性變數
       function vale(){
           var x = "a";//區域性變數
           y = "b"; //全域性變數
       }
       vale();
       alert(y);
   </script>

• javaScript的異常捕獲
  將異常程式碼包裹在 try{}catch(err){ }內，在try內丟擲異常，在catch捕獲異常進行處理。

    <script type="text/javascript">
       function demo(){
           try{
               alert("scuess");
           }catch(err){
               alert("error = "+err);
           }
       }
   </script>

   //demo
   <form>
       <input type="text" id="text">
       <input type="button" id="btn" onclick="check()" value="按鈕">

   </form>
   <script type="text/javascript">
       function check(){
           try {
               var value = document.getElementById("text").value;
               if (value == "") {
                   throw "請輸入內容";
               }
           }catch (err){
               alert(err);
           }
       }
   </script>