梳理一下JS的基本文法

標籤：

web三層結構來說

 結構層：HTML         從語義角度，描述頁面結構

 樣式層：CSS          從審美的角度，美化頁面

 行為層：JavaScript   從互動的角度，提升使用者體驗

 js:用來製作web頁面的互動效果，提升使用者體驗文法概述一、JS引入3種的方式：

  1.內嵌引入，但不建議

2.通過`<script async=‘async‘>`標籤引入，可放在head裡面，為減少載入時間，一般放在body最後

3.建議通過link引入

 <script>標記的屬性：

type="text/JavaScript"可以省略

Sync:同步，一個人有序的做多件事

Async:非同步，多個人有序的做多件事情

async=‘async‘和defer=‘defer‘都是非同步下載，區別在：

async=‘async‘是立即非同步下載外部JS，不影響頁面其它的操作，js下載完畢立即執行；

defer=‘defer‘是在js，css整個文檔都下載完後再執行，只有外部指令碼可以使用

二、五種資料類型：1.字串類型string（""）注意：引號既可以用單引號，也可雙引號 --建議單引號

• a,如果字串中有單引號，就用可引號

• b,如果字串內容中單雙引號都有，就用轉譯符,在引號前用。常用的轉譯符有：\"、換行\n、縮排\t

2.數實值型別number：沒有被引號引起來的數字：整數、負數、小數...(123),表示一種資料的量3.布爾實值型別boolean

boolean在記憶體中儲存的格式： boolean在儲存的時候會將ture轉成1，false轉成0

 

var a =ture;  

var b ="ture";

var c = a == b;

console.log(c); //輸出false

 4.undefined：聲明變數沒有賦值5、Null:空的對象特殊：NaN(not a number):number的一種。

  // 判斷NaN:IsNaN翻譯：是一個非數字：如果是數字ture

  //        var a ="abc";

  //        var b =123;

  //        console.log(a-b);

  //        console.log(isNaN(a-b)); // 輸出ture

  // 作用：用來表示數位一種不正常的狀態（一般會在計算出現錯誤時出現）。

?

// 特殊：特殊到自己都不等於自己

  var a =NaN;  

  var b =NaN;

  var c = a === b;

  console.log(c); //輸出false 

 技巧：判斷資料的類型：typeof（變數/直接量） 可省略括弧：typeof變數/直接量三、變數：用來儲存資料的記憶體

       記憶體：運行記憶體（電腦啟動並執行同時可以儲存資料，斷電後清空）  

       記憶體條：加大運行記憶體

       硬碟：儲存空間的大小 4G 32G  (斷電不會清空)

 輸出的方式：

• alert()：彈出一個提示資訊框 - 位置不能改變，不能拖動，不能關閉。其實瀏覽器的進程已經被暫停了 -- 只能在工作管理員來關閉。

• console.log() 向控制台輸出內容 作用：用於代碼的調試 應用：招聘

• prompt()輸入框：使用瀏覽器輸出自己輸入的內容

a.聲明變數：建立變數 var a

  var:聲明變數的關鍵字  a:變數名

 b.給變數賦值：a="123" =賦值運算子。作用：等號右邊結果賦值等號左邊的變數

    var a = "123" 

    var b = "456+123"

    console.log(a);  

    console.log(b)

    console.log(a+b)

 c.變數名的命名規則：

1）變數必須以字母開頭

 變數也能以 $ 和 _ 符號開頭（不過我們不推薦這麼做） 

 

class，id的命名規則：只能由英文字母、數字、底線以及串連符組成，並且數字不能放在開頭

 如果名稱以底線開頭，那麼後面直接跟數字也是可以的；class,id不可以

 

2）變數的命名，不能使用javascript中的關鍵字和保留字 關鍵字：已經被javascript內部使用過的 保留字：還未被javascript內部使用過，但可能有一天會被用到（備胎）。

3）區分大小寫

d.變數的類型由變數的賦值來決定的

 var a ="123"; 

 console.log(typeof a);  -- 控制台顯示string

 var b =123; 

 console.log(typeof b);  -- 控制台顯示numbe

 四.運算子(操作符)：1.運算子的簡寫：

    var a ;

    a = 10;

等價於 var a =10;

 2.自增自減運算子：b++;//a+=1;a=a+1

     var a = 2;

     var b = 3;

     var c = a++ + b++;

    //a++:a = a+1;

    //後加：先進行運算，再加1

    //var c = a+b;a=a+1;b=b+1;

    var d = ++a + ++b;

    console.log(a);

    console.log(b);

    console.log(c);   //輸出5

    console.log(d);   //輸出7

 3.邏輯運算子：

優先順序：!非  >  &&與 > ||或  

#&&操作符：求第一個運算元的布爾值，如果這個布爾值為true，那麼最終的傳回值就是第二個運算元，否則輸出第一個||操作符：求第一個運算元的布爾值，如果這個布爾值為true，那麼最終的傳回值就是第yi個運算元，否則最終的傳回值為第er個運算元。短路操作：在&&和||中，如果第一個運算元就已經能確定最終返回的結果，那麼就不會去計算第二個運算元了4.比較子(關係運算子)：

1、>

2、<

3、>=

4、<=  

5、== 是否相等，僅僅是資料的內容，沒有判斷資料的類型

6、=== 判斷是否全等

7、！= 不等於

8、！== 不全等

 5.賦值運算子：= 作用：等號右邊結果賦值等號左邊的變數6.逗號運算子： --省略var

    var a,b,c;

    a=b=c=1;

 7.條件運算子（三目運算子/三元運算子）

    結構：bolean運算式？操作一：操作二；

    var a=15;

    var b=16;

    var c=24;

   //判斷a和b的大小

    a>b?alert(a):alert(b);

   //判斷a是否大於b，如果a大於b成立，輸出a；否則輸出b  --即if else的簡寫

  //判斷a,b,c的大小

    (a > b ? a:b) > c ? alert(a > b ? a:b):alert(c);

   //先找出a和b中的大的，再與c比較

 

註：優先使用全等和不全等的操作符！

六.運算子： 

1. +號： 加號的作用:

    a,串連兩個字串，串連作用  

    b,兩個數值中間的+，是運算作用

    c,字串與數值之間的+，是串連

2.-減：兩個number間的操作

3.*乘：兩個number間的操作

4./除：兩個number間的操作

5.%取餘(模數)：兩個number間的操作

6.10取餘（模數）3

7.()作用：改變計算優先順序

8.Math對象（物件導向；萬物皆對象）萬物皆盒子

 1）Math.pow(a,b); //得到a的b次方

 2）Math.round(a); //四捨五入

 3）Math.ceil(a);  //向上取整

 4）Math.floor(a);  //向下取整

 5）Math.max(a,b,c); //取三個數中的最大值

 6）Math.min(a,b,c);  //

 7）Math.random();  //產生隨機數（0-1之間）

   拓展：產生1-50的隨機數

    var f =Math.random()*49+1;                        

    console.log(f);

 8）Math.pow(a,1/3);//立方根

    var a = Math.pow(2,10);

    console.log(a);

    var b =Math .round(3.38);

    console.log(b);

 七.運算子的優先順序

 運算子                                    描述                        

 ++ -- - + ~ ! delete new typeof void   一元運算子、返回資料類型、對象建立、未定義值    

 * / %                                  乘法、除法、模數                  

 + - +                                  加法、減法、字串串連               

 << >> >>>                              移位                        

< <= > >= instanceof                    小於、小於等於、大於、大於等於、instanceof

== != === !==                           等於、不等於、嚴格相等、非嚴格相等         

 &&                                     邏輯與                       

                                      邏輯或                       

?:                                      條件                        

=                                       賦值、運算賦值                   

 

下表按從最高到最低的優先順序列出JavaScript運算子。具有相同優先順序的運算子按從左至右的順序求值。

八.資料類型的轉換：強制轉換和隱形轉換8.1強制轉換：8.1.1 轉Number（字串/boolean）

 通過prompt輸入的資料類型是string,不管是123，還是具體的漢字

 var a=prompt("請輸入一段內容");//輸入4 

  var b =a+1;

  console .log(b);//輸出41

//想要輸出5：

var a=prompt("請輸入一段內容");

a=number(a);//將原來的字串a轉換成number類型

var b =a+1;

console .log(b);//輸出5

console.log(typeof (a));//輸出number

特點：

a,如果要轉換成數字，輸入的內容必須是純數字，否則NaN.

b、如果內容是空的，轉換成0

c、如果是小數，小數會保留

d、如果字串中包含非以上格式，則將其轉換為NaN

 8.1.2 轉Number，parseInt 轉換

    var a ="123.abc";

    a = parseInt(a);

    console.log(a);//輸出123

    console.log(typeof (a));//輸出number

特點：a、如果有小數，會直接去掉小數。

    b、如果第一個是數字，就繼續解析直至字串完畢或者遇到非數字記號為止

 8.1.3 parseFloat():轉數字

與parseInt一樣：唯一區別：能保留小數

8.1.4 boolean轉成number

    var a = true;

    a = Number(a);

    console.log(a);

    console.log(typeof (a));

8.2字串的轉換：8.2.1 數值轉字串 法一

   var a = 123;

    a = a.toString();

    console.log(a);

    console.log(typeof (a));//string

 

直接調用.toString方法可以將內容直接轉成字串

8.2.2 數值轉字串 法二

  var a = 123;

    a = string(a);

    console.log(a);

    console.log(typeof (a));//string

 

直接將要轉的內容放在string後的括弧中

區別：一是直接調用這個變數對象的方法, 第二個是強制轉換

8.2.3 boolean轉string

    var a = true;

    a = Boolean(a);

    console.log(a);

    console.log(typeof (a));

  注意：除了false、Null 字元""、0、NaN、undefined在轉換時會轉成false，其餘都會轉成true

 8.3隱式轉換：不通過程式猿去寫固定代碼，瀏覽器可以直接進行轉換8.3.1隱式轉換成Number:直接在要轉換的內容前加上+-*\%

  +a a-0 a*1 a/1 a%1

    var a = "123";

    a = +a;

    b = a\1;

    console.log(a);

    console.log(b);

    console.log(typeof (a));

    console.log(typeof (b));

8.3.2 隱式轉換成string:直接在要轉換的內容hou加上""

   var a = 123;    a = a + "";    console.log(a);

8.3.3 隱式轉換成boolean:直接將a = !！a;或者！a九、代碼注釋：

源碼中被JavaScript引擎忽略的部分就叫做注釋，它的作用是對代碼進行解釋。Javascript提供兩種注釋：一種是單行注釋，用 // 起頭；另一種是多行注釋，放在 /* 和 */ 之間。

只有在js建立的時間，在函數時，推薦使用多行注釋/** */。其餘時間多行注釋易出現問題

註：雖然js代碼雖然對空格、換行、縮排不敏感，但一定要注意書寫。建議既加分號，又換行 - 可讀性更強一、流程式控制制：1、if結構 ：用於判斷某些條件是否執行

  if_else: 可以判斷2個條件  if_else if_else 判斷多個條件    var a = prompt("帶了多少錢");    if(a>300){        console.log("你的錢超過了300，請吃飯");    }   else if(a>200){       console.log("你的錢不夠300，夠200，請吃快餐");     }   else{        console.log("明天記得帶夠");    }    console.log("程式結束")2016.10.13 18:06:39 2016.10.13 18:06:41 2016.10.13 18:06:43 2016.10.13 18:06:44 

注意：

• 大括弧後不能加分號

• 程式運行到if之後，判斷if括弧裡的條件，如果條件滿足，則執行內容；如果不滿足，就不會執行；只會執行一個！

#注意：

• a、大括弧後不能加分號；

• b、代碼不支援連寫：90<pj<100,只能90<pj&&pj<100;

2、switch case結構:作用是與else if是一樣的，

   var a = prompt("請輸入今天星期幾對應的數字");    switch (a) {        case "1":            alert("您輸入的是星期一");            break;        case "2":            alert("您輸入的是星期二");            break;        case "3":            alert("您輸入的是星期三");            break;        case "4":            alert("您輸入的是星期四");            break;        case "5":            alert("您輸入的是星期五");            break;        case "6":            alert("您輸入的是星期六");            break;        case "7":            alert("您輸入的是星期日");            break;        default:            alert("你輸入什麼鬼");    }

二、控制台的sources看源碼

a，開啟要查看的頁面b,打斷點，重新整理頁面，會發現命中了斷點c，滑鼠放在變數名上，會發現輸入值

 

JS背景

-1995年，Netscape公司開發一個指令碼語言，叫LiveScript,用於做驗證的。為了推廣，利用當時最火的Java詞彙，改名JavaScript.-netscapt是第一款瀏覽器

• 03年以前，牛皮癬廣告，很被排斥

• 04年Google用js技術來做ajax技術

• 07年，喬布斯發布第一代蘋果，移動端頁面開始發展

• 10年，html5推出畫布--做遊戲。例：切水果

• 11年，node.js誕生，js從移動端鋪開伺服器端

瀏覽器是如何工作的：

http://www.2cto.com/kf/201202/118111.html

瀏覽器引擎，用來查詢和操作渲染引擎

渲染引擎：用來顯示請求的內容，負責解析html和css

Javascript interpreter：js解析器，負責執行js

notworking網路：負責發送網路請求

JavaScript語言：

1. 是世界上用的最多的指令碼語言。指令碼語言：不需要編譯，直接運行時邊解析邊執行的語言

   編譯：一次性把所有代碼轉換成cpu可以看懂的語言，一行一行執行

   解釋：一行一行解析，解析一行執行一行

2. js是一種用戶端的指令碼語言

js組成：ECMAScript、DOM、BOM

• ECMAScript:js的文法規範

• DOM：js操作網頁上元素的API

• BOM:JS操作瀏覽器部分功能的API

梳理一下JS的基本文法