JS第一天

一、JavaScript簡介

1.1 JavaScript的用途

JavaScript用來製作web頁面交互效果，提升用戶體驗。

web前端三層來說：

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

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

行爲層    JavaScript     從交互的角度，提升用戶體驗

 

1.2 JavaScript和ECMAScript的關係

ECMAScript是一種由Ecma國際前身爲歐洲計算機製造商協會,英文名稱是European Computer ManufacturersAssociation，制定的標準。

JavaScript是由公司開發而成的，公司開發而成的一定是有一些問題，不便於其他的公司拓展和使用。所以歐洲的這個ECMA的組織，牽頭制定JavaScript的標準，取名爲ECMAScript。

簡單來說ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script（Flash中用的語言）。

 

1.3 今天的JavaScript：承擔更多責任

2003年之前，JavaScript被認爲“牛皮鮮”，用來製作頁面上的廣告，彈窗、漂浮的廣告。什麼東西讓人煩，什麼東西就是JavaScript開發的。所以瀏覽器就推出了屏蔽廣告功能。

2004年JavaScript命運開始改變了，那一年穀歌公司，開始帶頭使用Ajax技術了，Ajax技術就是JavaScript的一個應用。並且，那時候人們逐漸開始提升用戶體驗了。

 百度的智能感應 

2007年喬布斯發佈了iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網。

JavaScript在移動頁面中，也是不可或缺的。並且這一年，互聯網開始標準化，按照W3C規則三層分離，人們越來越重視JavaScript了。

2010年的時候，人們更加了解HTML5技術了，HTML5推出了一個東西叫做Canvas（畫布），工程師可以在Canvas上進行遊戲製作，利用的就是JavaScript。 

2011年，Node.js誕生，使JavaScript能夠開發服務器程序了。 

今天，JavaScript工程師是絕對的吃香，能夠和iOS、Android工程師比肩，毫不遜色的。

現在，公司都流行WebApp，就是用網頁技術開發手機應用。什麼意思呢？手機系統有iOS、安卓、windows phone。那麼公司比如說開發一個“攜程網”APP，就需要招聘三隊人馬，比如iOS工程師10人，安卓工程師10人，windows工程師10人。共30人，工資開銷大。並且，如果要改版，要改3個版本。所以，現在公司，都用web技術，用html+css+javascript技術來開發app。好處是不用招聘那麼多工程師，只需要幾個前端開發工程師即可。並且也易於迭代，就是網頁一改變，所有的終端都變了。

1.4 JavaScript非常好學

JavaScript在“對初學者友好的語言”排行榜中排名第一。

JavaScript是有界面效果的，比如你學習C語言，對不起，白底黑字。而JavaScript有絢麗的效果，效果是可見的。你的勞動，是真真正正有效果啊。

JavaScript是弱變量類型的語言，變量只需要用var來聲明。Java中變量的聲明，要根據變量是什麼類型的來聲明：

1            int a;

2            float a;

3            double a;

4            String a;

5            boolean a;

JavaScript中，只用一個：

1            var a;

 

JavaScript不用關心一些其他的事情，比如內存的釋放，指針。程序員只需要關心自己的業務，不需要關係這些雞毛蒜皮的破事兒。

 

1.5 學習內容

JavaScript分爲幾個部分：

●語言核心 - 基礎班只學習語言核心，變量、表達式、運算符、函數、if語句、for語句

● DOM - 就是控制HTML中的元素，比如讓盒子移動、變色、輪播圖。

● BOM - 就是控制瀏覽器的一些東西，比如讓瀏覽器自動滾動。

 

二、JavaScript是前臺語言，而不是後臺語言

JavaScript運行在客戶的電腦裏面，而不是服務器上，所以我們稱爲“前臺語言”。JavaScript就是一個簡單的製作頁面效果的語言，不能操作數據庫。就是服務於頁面的交互效果、美化、絢麗。

“後臺語言”是運行在服務器上的，比如PHP、ASP、JSP等等，這些語言都能夠操作數據庫，都能夠對數據庫進行“增刪改查”操作。

（Node.js除外，先別管Node.js是什麼）。

 ●比如一個圖書館，要開發“圖書借閱程序”，能夠記錄每個學生借了什麼書，有沒有按時歸還，不能

用JS開發！因爲，設計數據庫的數據記錄。

●比如，一個公司要開發“訂餐系統”，每天上午11:00統計所有的員工想吃什麼？不能用JS開發。因爲

涉及數據庫的數據記錄。

●比如，一個公司的網頁想要做的漂亮、有交互效果，絢麗。用JS開發。

三、開始寫第一個JavaScript程序

3.1 程序書寫的位置

在頁面中，<script type=”text/javascript”></script>標籤對兒，裏面就是書寫JavaScript程序的地方。

text表示什麼？純文本。沒錯，JavaScript也是一個純文本的語言。

 

3.2 alert語句

學習第一個語句，就是alert語句。

alert就是英語裏面的“警報”的意思。用途就是彈出“警告框”：

 

如果我們想彈出兩次警告框，那麼就要寫兩條語句：

3.3 語法規則

JavaScript對換行、縮進、空格不敏感。也就是說：

 

1                   <script type="text/javascript">

2            alert("今天藍天白雲");

3            alert("哈哈哈，我很高興");

4                   </script>

等價於

1                   <script type="text/javascript">

5                          alert("今天藍天白雲");

6                          alert("哈哈哈，我很高興");

2                   </script>

等價於：

1                   <script type="text/javascript">

2                          alert("今天藍天白雲");alert("哈哈哈，我很高興");

3                   </script>

 

每一條語句末尾要加上分號，雖然分號不是必須加的，但是爲了程序今後要壓縮，如果不加分號，壓縮之後將不能運行了。

 

比如，你不加分號，今後我們的程序一旦壓縮，就不能使用了：

1                   <script type="text/javascript">

2                          alert("今天藍天白雲")alert("哈哈哈，我很高興")

3                   </script>

 

所有的符號，都是英語的。比如括號、引號、分號

還有一個常見錯誤，就是script標籤寫錯了：

1                   <script type="text/javescript">

2                          alert("今天藍天白雲");

3                          alert("哈哈哈，我很高興");

4                   </script>

 

3.4 註釋

程序中，爲了便於理解、教學，我們可以寫一些給人看的東西，這些內容就是註釋，程序不會運行。

 

//表示註釋：

1                   <script type="text/javascript">

2                          //alert語句表示彈出窗口

3                          alert("你好");

4                   </script>

也可以：

1                   <script type="text/javascript">

2                          alert("你好"); //alert語句表示彈出窗口

3                   </script>

 

註釋可以很多行，但是比較麻煩：

1                   <script type="text/javascript">

2                          //alert語句表示彈出窗口

3                          //一定要注意用英語的符號啊！

4                          //千萬不要再錯了！

5                          alert("你好");

6                   </script>

等價於：

1                   <script type="text/javascript">

2                          /*

3                                 alert語句表示彈出窗口

4                                 一定要注意用英語的符號啊！

5                                 千萬不要再錯了！

6                          */

7                          alert("你好");

8                   </script>

 

總結一下：

// 單行註釋

/*

多行註釋

多行註釋

*/

 

sublime中，單行註釋的快捷鍵是ctrl+/ 。  多行註釋的快捷鍵是ctrl+shift+/

四、認識數字和字符串 - 直接量

“直接量”也稱爲“字面量”，就是看見什麼，它就是什麼。

簡單的直接量有2種：數字、字符串。

 

數值的直接量的表達非常簡單，就是寫上去就行了，不需要任何的符號：

1            alert(886);  //886是數字，所以不需要加引號。

字符串，就是人說的話，比如單詞、句子，它們不是數字。一定要加上引號。

1            alert(今天天氣很好);  //錯誤的語句，因爲沒有加上引號

控制檯報出錯誤。

正確的：

1            alert("今天天氣很好");  //今天天氣很好，是字符串，必須加上引號。

 

小練習，下面的語句是否正確：

1            alert(八八六);    //錯誤的！因爲八八六是漢字，必須加上引號

2            alert(5.67);      //正確的！因爲5.67是數字，不用加上引號

3            alert("100");     //正確的！雖然100是數字，但是可以是人說的啊，所以加上引號也正確。

1            alert(1000);            √

2            alert("1000");      √

3            alert(我愛你)       ×

4            alert("我愛你");    √

5            alert(五百萬);      ×

6            alert("五百萬");    √

7            alert("50000000");  √

叫做alert彈出警告框。我們現在再學習一條語句：

1            console.log("今天天氣真好");

console表示“控制檯”，log就是“輸出”

表示在控制檯中輸出，控制檯在Chrome瀏覽器的F12中。控制檯是工程師、程序員調試程序的地方。我們經常使用這條語句輸出一些東西，來測試程序是否正確。

 

 

兩種語句，你只需要知道，照着寫，就能實現效果：

1            alert("哈哈");

2            console.log("哈哈");

五、變量

5.1 整體感知

就是用字母來表示數字、字符串等其他東西的，稱爲“變量”。

 

1            var a = 100;

2            console.log(a);

 

var a = 100;

這就是一個固定的寫法，就是語法。也就是說，我們使用var來定義一個變量。

var就是英語“variant”變量的縮寫。後面要加一個空格，空格後面的東西就是“變量名”，我們可以給變量任意的取名字。

var就是一個關鍵字，所謂關鍵字，就是有特殊功能的小詞語。關鍵字後面一定要有空格隔開。

等號表示賦值，會將等號右邊的值，賦給左邊的變量。

 

5.2 變量的命名規範

變量名有命名規範：

只能由英語字母、數字、下劃線、美元符號$構成，且不能以數字開頭，並且不能是JavaScript保留字。

 

下列都是非常正確的變量命名：

1            var haha = 250;

2            var xixi = 300;

3            var a1 = 400;

4            var a2 = 400;

5            var abc_123 = 400;

6            var $abc = 999;

7            var $o0_0o$ = 888;

8            var $ = 1000;

9            var _ = 2000;

10       var ________ = 3000;

下列都是錯誤的命名：

1            //var a-1 = 1000;      //不能有怪異符號

2            //var a@ = 2000;           //不能有怪異符號

3            //var 2year = 3000;     //不能以數字開頭

4            //var a￥ = 4000;       //不能有怪異符號

5            //var a*#$#$@ = 5000;   //不能有怪異符號

6            //var a b =300;          //不能有空格

 

下列的單詞，叫做保留字，就是說不允許當做變量名，不用記：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto

implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

 

大寫字母是可以使用的，並且大小寫敏感。也就是說A和a是兩個變量。

1            var A = 250;

2            var a = 888;

 

5.3 變量的定義和賦值

變量用var來定義。只有定義之後，這個變量才能夠使用。

比如，我們不設置變量，直接輸出：

1                   <script type="text/javascript">

2                          console.log(a);

3                   </script>

 

正確：

1            var a;   // 定義

2            a = 100;  //賦值

3            console.log(a);  //輸出100

 

有經驗的程序員，會把定義和賦值寫在一起：

1            var a = 100;    //定義，並且賦值100

2            console.log(a);  //輸出100

 

在JavaScript中，永遠都是用var來定義變量，這點C、Java等等既然不同。

賦值用等於號，表示等號右邊的值，賦給左邊的變量。

 

5.4 區分變量和字符串

 

1            var a = 100;

2            console.log("哥們，字母表裏面第一個字母是啥？");

3            console.log("a");    //輸出字母a

這個a在引號裏面，所以就是一個字符串“a”了，而不是一個變量。換句話說，一個變量如果想輸出保存的內容，那麼就不能加引號。

六、變量的類型

1            var a = 100;           //存放了一個數字

2            var b = "控制檯";     //存放了一個字符串

3            console.log(a);              //輸出變量a

4            console.log(b);              //輸出變量b

變量裏面能夠存儲數字、字符串。變量會自動的根據存儲的東西類型不同，來決定自己的類型。

也就是說變量有類型。

6.1 數值型

如果一個變量中，存放了數字，那麼這個變量就是數值型的。

 

1            var a = 100;                  //定義了一個變量a，並且賦值100

2            console.log(typeof a);    //輸出a變量的類型

typeof表示“某某的類型”

語法：

1            typeof 變量

 

JavaScript種，只要是個數，那麼就是數值型的，無論整浮、無論大小、無論正負，都是number類型的。

“浮”就是浮點數，就是“小數”，術語叫做“浮點數”。

1                          var a = 100;                  //定義了一個變量a，並且賦值100

2                          var b = 234234234324324324; 

3                          var c = 3.234234234324324;

4                          var d = -23423432432432432;

5                          var e = -34.3423423432;

6                          var f = 0.324234234;

7             

8                          console.log(typeof a);

9                          console.log(typeof b);

10                     console.log(typeof  c);

11                     console.log(typeof  d);

12                     console.log(typeof  e);

13                     console.log(typeof  f);

 

6.2 字符串型

string就是字符串型的意思。

1            var a = "abcde";

2            var b = "傳智播客";

3            var c = "123123";

4            var d = "哈哈哈哈哈";

5            var e = "";      //空字符串

6             

7            console.log(typeof a);

8            console.log(typeof b);

9            console.log(typeof c);

10       console.log(typeof d);

11       console.log(typeof e);

 

 

6.3 連字符和加號

鍵盤上+在JS中有兩層含義：

1）連字符

2）加

 

1            console.log("我" + "愛" + "你");      //連字符，把三個獨立的漢字，連接在一起了

2            console.log("我+愛+你");                  //原樣輸出

3            console.log(1+2+3);                           //輸出6

同樣是加號，有時候表示的是連字符，有時候表示的是加號。什麼時候是連字符？什麼時候是加呢？

如果加號兩邊都是數值，此時是加。否則，就是連字符。

 

1                   <script type="text/javascript">

2                          var a = "1";

3                          var b = 2;

4                          console.log(a + b);

5                   </script>

 

1            var a = 1;              //數字

2            var b = 2;              //數字

3            console.log(a + b);

 

 

1            var a = 234234;

2            var b = 234323112;

3            console.log("a+b");                     //由於加上了引號，所以就表示原樣輸出

 

 

1            var a = 1;

2            var b = 2;

3            console.log("a" +  b);     //"a"就不是變量了！所以就是"a"+2 輸出a2

 

 

1            var a = 123;

2            var b = "123";

3            console.log(a +  "b");

 

七、變量值的傳遞

語句：

1            a = b;

將等號右邊的值，賦給左邊的變量；等號右邊的變量，值不變。

把b的值賦給a，b不變。

 

案例：

1            var a = 1;              //定義a，並且賦值1

2            var b = 2;              //定義b，並且賦值2

3            a = b;                    //就是將b的值給a，b的值不變。所以a就是2了，b是2不變。

4            console.log(a);           //2

5            console.log(b);       //2

 

 

1            var a = 1;

2            var b = 2;

3            b = a;                    //將a的值給b，a的值不變，所以b就是1了，a還是1不變

4            console.log(a);

5            console.log(b);

 

 

1            var a = 1;                     //定義a變量，值是1

2            var b = 2;                     //定義b變量，值是2

3            a = b + 3;                     //將5賦值給a，b的值還是2。

4            b = a + 4;                     //將9賦值給b，a的值還是5

5            console.log(a);              //5

6            console.log(b);              //9

 

1                                                 //a              b       c

2            var a = 1;              //1

3            var b = 2;              //1     2

4            var c = 3;              //1     2        3

5            a = b + c;              //5     2        3

6            b = c - a;              //5     -2       3

7            c = a * b;              //5     -2       -10

8            console.log(a);

9            console.log(b);

10       console.log(c);

 

 

1                                                                    //a    b      c

2                          var a = 1;

3                          var b = 2;

4                          var c = 3;              //1     2      3

5                          a = a + b;              //3     2      3

6                          b = b + a;              //3     5      3

7                          c = c + b;              //3     5      8

8                          console.log(a);   //3

9                          console.log(b);   //5

10                     console.log(c);  //8

 

 

1                                                       //a        b 

2                          var a = "1";

3                          var b = 2;           //"1"     2

4                          a = a + b;           //"12"    2

5                          b = b + a;           //"12"     "212"

6                          console.log(a);      //輸出12

7                          console.log(b);      //輸出212

 

1                                                        //a          b

2                          var a = "1";

3                          var b = 2;

4                          a = b + a;        //"21"       2

5                          b = b + a;        //"21"        "221"

6                          console.log(a);   //21

7                          console.log(b)    //221

八、運算符和表達式

8.1 數學運算符

整體感知：

我們比如要計算這個：

JavaScript中正確的表達式就是：

1            (3 + 4 * 5) / (6 + 3)

+、*、/、( 都是運算符

這個式子叫做表達式。

 

運算符有很多分類：數學運算符、邏輯運算符、自增運算符等等。我們今天只學習數學運算符。

+	加
-	減
*	乘
/	除（問號槓）
%	取餘數
(    )	括號

 

 

先算乘除、後算加減：

1            var a = 1 + 2 * 3;

2            console.log(a);

 

1            var a = 12 / 2 * 3 + 2;

2            console.log(a);

 

小括號，能夠影響計算順序。沒有中括號、沒有大括號，只有小括號。小括號能嵌套

1            var a = (1 + 2) * 3 + 3 * 5

2            console.log(a);

解：原式 = 3*3 +15

        = 9 + 15

        = 24

 

 

1            var a = ((1 + 2) * 3 + 3) * 5

2            console.log(a);

解：原式 =(3*3+3)*5

        = (9+3)*5

        = 12*5

        = 60

 

還能多個嵌套

1            var a = (6 + ((1 + 2) * 3 +  3)) * 5

2            console.log(a);

百分號是取餘數的意思

1            var a = 13 % 5;

2            console.log(a);       //輸出3

因爲13 ÷ 5 = 2 …… 3， 所以結果是3。  得幾不重要，我們關心的就是餘數。

 

1            console.log(10 % 5);

因爲10 ÷ 5 = 2 …… 0   ，所以結果是0。得幾不重要，我們關心的就是餘數。

 

1            console.log(3 % 5);

因爲3 ÷ 5 = 0 …… 3   ，所以結果是3。得幾不重要，我們關心的就是餘數。

乘、除、取餘數的運算優先級相同，誰寫在前面，先算誰。

 

1            var a = 1 + 2 * 3 % 4 / 3;

2            console.log(a);

解：原式 =  1 + 6 % 4 / 3

       =   1 + 2 / 3

       =   1 + 0.6666666666

       =   1.66666666666666

 

1            var a = (1 + 2) % 4 * 3 + 5

2            console.log(a);

解：原式 =  3 % 4 * 3 + 5

         =  3* 3 + 5

        =  14

 

 

8.2 乘方和開根號

比如：

  =  3 *3 * 3 * 3

1            var a = Math.pow(3,4);

2            console.log(a);

語法，如果想計算ab

1            Math.pow(a,b);

Math是英語“數學”，pow就是“power”乘方的意思。

開根號：

1            var a = Math.sqrt(81);

2            console.log(a);

sqrt就是英語“開根號”的意思。

九、變量格式轉換

9.1 用戶的輸入

 

1                   <script type="text/javascript">

2                          var a = prompt("哈哈請輸入點什麼東西吧");

3                          console.log(a);

4                   </script>

prompt就是專門用來彈出能夠讓用戶輸入的對話框：

 

和alert很像，又不像：

1            alert("從前有座山");                //直接使用，不需要變量

2            var a = prompt("請輸入一個數字");   // 必須用一個變量，來接收用戶輸入的值

 

用戶不管輸入什麼，都是字符串！

 

9.2 字符串→數字

方法就是：

1            parseInt(“5”);

結果就是數字5。

parse是英語裏面的轉換的意思，Int表示整數。注意拼寫：

parseInt

 

● parseInt帶有自動淨化的功能：

1            console.log(parseInt("365天每天都愛你10000次"));

  後面的中文自動消失，只保留最開頭的數字。

 

● 自動帶有截斷小數功能（取整，不四捨五入）

1            console.log(parseInt(5.8));

 

總結一下，parseInt是一個非常多功能的東西，可以將字符串轉爲數字，也可以將數字取整。

 

1            var a = parseInt(5.8) +  parseInt(4.7);

2            console.log(a);

 

1            var a = parseInt(5.8 + 4.7);

2            console.log(a);