Js(一)

JavaScript介紹

1.JavaScript是互聯網上最流行的腳本語言,這門語言可用於web和html,更可廣泛用於服務器,PC端,移動端。
2.JavaScript腳本語言
JavaScript是一種輕量級的編程語言。
JavaScript是可插入HTML頁面的編程代碼
JavaScript插入HTML頁面後,可由所有的瀏覽器執行

JavaScript實現

1.JavaScript用法
HTML中的腳本必須位於之間寫代碼
3.JavaScript使用限制
在HTML中,不限制腳本數量。
通常會把腳本放置於標籤中,以不干擾頁面內容。

JavaScript使用限制
1.JavaScript通常用來操作HTML
2.文檔輸出:
Document.write(“

this is my first JavaScript.

”);

JavaScript語法

1.js語句
JavaScript 語句向瀏覽器發出的命令。語句的作用是告訴瀏覽器該做什麼。
2.分號:
語句之間的分割是分號(;)
注意:分號是可選項,有時候看不到不以分號隔開。
3.JavaScript代碼
按照編寫順序依次執行
4.標識符
JavaScript表示符必須以字母下劃線或**美元符號 $**開始
JavaScript關鍵字

5.JavaScript對大小寫敏感
6.空格
JavaScript會忽略多餘的空格
7.代碼換行
8.保留字

JavaScript註釋
1.單行註釋 //
2.多行註釋 /**/
JavaScript變量
變量是用來存儲信息的“容器”

      例如:   var x = 10;
               var y = 10;
               var z = "Hello";

JavaScript數據類型
1.字符串 string
2.數字 number
3.布爾 boolean
4.數組 array
5.對象 object
6.空 null
7. undefined
8. 可以通過賦值爲null的方式清除變量

JavaScript語法
JavaScript運算符
1.算法運算符
+、-、*、/、++、–
2.賦值運算符
=、+=、-=、
=、/=、%=

 var j=i++; ++在後,先賦值,再運算。
 var j=++i;++在前,先運算,再賦值。

3.字符串操作
任何數據類型和字符串相加都會變成字符串類型

+符號的2種含義
①運算相加
②連接
4.比較運算符

   ==、===、!=、!==、>、<、>=、<=

5.邏輯運算符
&&與 ||或 !非
6.條件運算符:
eg:x<10?“x比10小”:“x比10大”

JavaScript條件語句

1.if…else
2.switch

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

JavaScript循環語句

1.for循環、for/in

  <script>
    var i=[1,2,3,4,5,6];
    for(var j=0;j<6;j++){
        document.write(i[j]);
    }
</script>

<script>
  var i=[1,2,3,4,5,6];
  var j;
  for(j in i){
      document.write(i[j]+"<br/>");
  }
</script>

2.while循環 先判斷再執行
3.do…while 先執行後判斷 至少執行一次

JavaScript跳轉語句

1.break
2.continue

break:從當前跳出

<script>
  for(var i=0;i<10;i++){
      if(i==5){
          break;
      }
      document.write("i="+i+"<br/>");//0 1 2 3 4
  }
</script>

continue:跳過當前

<script>
  for(var i=0;i<10;i++){
      if(i==5){
          continue;
      }
      document.write("i="+i+"<br/>");//0,1,2,3,4,6,7,8,9
  }
</script>

瞭解函數的用途概要:

1.瞭解函數
2.定義函數
3.函數調用
4.帶參數的函數
5.帶返回值的函數

1.函數
函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。

2.定義函數
(1)定義函數
function 函數名(){
函數體;(代碼塊)
}

<script>
   var a1 = 10;
   var a2 = 20;
   var sum = a1+a2;
   alert(sum);
</script>

(2)注意
JavaScript對大小寫敏感,所以這裏的function必須小寫。在函數調用時,也必須按照函數的相同名稱來調用函數。

3.函數調用
(1)函數在定義好之後,不能自動執行,需要進行調用。

   <script>
   function demo(){
       var a=10;
       var b=10;
       var sum=a+b;
       alert(sum);
   }

   function tell(){
       var n=10;
       var m=10;
       var vl = n*m;
       alert(vl);
   }
   tell();
</script>

(2).調用方式

   (1)在<script>標籤內調用。
   (2)在html文件中調用。



  <script>
      function demo(){
          var a = 10;
          var b = 20;
          var sum = a+b;
          alert(sum);
      }
    //   demo();  第一種
    </script>

<!-- 第二種 -->
<!-- <form>
    <input type="button" value="按鈕" onclick="demo()">
</form> -->

<!-- 第三種 -->
<button onclick="demo()">按鈕</button>

4.JavaScript帶參數的函數
(1).函數參數
在函數的調用中,也可以傳遞值,這些值被稱爲參數。
eg:demo(arg1,arg2);
(2).參數的個數可以任意多,每個參數通過","隔開。
(3).注意:
參數在傳遞時,其順序必須一致。
(4).參數意義:
通過傳遞參數的個數以及參數的類型不同完成不同的功能。

 <script>
   function demo(name,age){
       alert("Hello:"+name+",我的年齡是:"+age);
   }
</script>
<button onclick="demo('iwem',21)">按鈕</button>
<button onclick="demo('nam',19)">按鈕2</button>

5.帶返回值的函數
返回值
有時,我們需要將函數的值返回給調用它的地方。
通過return語句就可以實現
注意:在使用return語句時,函數會停止執行,同時返回值。

 <p id="pid"></p>
  <script>
   function demo(a,b){
       if(a>b){
           return "a比較大";
       }else{
           return "b比較大";
       }
   }
   document.getElementById("pid").innerHTML =demo(12,100900);
</script>

全局變量和局部變量

<script>
   var n=10;m=10;//全局變量   任何地方+都可以使用
   function demo(){
       var i=10;//局部變量  只能在當前函數中使用
       x=10;// 只有在調用demo後   x是  全局變量
   }
   demo();
   alert(x);
</script>

異常捕獲

1.異常
當javascript引擎執行javascript代碼時,發生了錯誤,導致程序停止執行。
2.異常拋出:
當異常產生,並將這個異常生成一個錯誤信息。
3.異常捕獲
try{
發生異常的代碼塊;
}catch(err){
錯誤信息處理;
}

4.throw語句:
通過throw語句創建一個自定義錯誤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>異常捕獲</title>
</head>
<body>
    <form>
        <input id="txt" type="text">
        <input id="btn" type="button" onclick="demo()" value="按鈕">
    </form>   
    <script>
       function demo(){
           try{
               var e = document.getElementById("txt").value;
               if(e==""){
                   throw "第一個用戶輸入異常==空";
               }
           }catch(err){
               alert(err);
           }
       }
    </script>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章