JavaScript 藝術之美（一）序言和 JavaScript 語法（卞懂的學習筆記）

卞(biàn)懂發表於2018-04-17
JavaScript筆記

零、前言

錯過了今年雙十一、雙十二噹噹圖書網的半價優惠，挺遺憾，但不買書心裡又癢癢的，後來在12月13號晚上以79折買了一些JavaScript的經典書籍：《JavaScript DOM程式設計藝術(第2版)》、《 JavaScript高階程式設計(第3版)》、《鋒利的jQuery(第2版)》和幾本其他程式設計的書，因為之前JavaScript掌握得不是很好，所以得靠著幾本書來提高我對JavaScript的掌握度。
要學會一門技術的途徑挺多的：學校授課、網路(線上)視訊課程、看相關書籍等等，我比較喜歡看書和逛相關部落格，視訊課程次之（雖然我從未把一套網路課程學個徹底）,我的總結是這樣的：看視訊效果是最好的，但是不做筆記和練習程式碼基本上是學多少忘多少，再就是看視訊時會犯困和走神等等（好在可以回放），看書雖然有些地方會一時半會兒無法理解，不過多看幾遍就能看懂的，大不了上某度找找答案何嘗不是一件好事？看書好在可以在書上勾勾畫畫、做做筆記，忘了隨時想翻就翻，還可以當一本新華字典用，先用2.0倍加速把視訊過一遍，在用0.5倍速度把書裡的相關章節嚼上幾遍，嚼的同時上機實戰，這門技術不掌握也難啊（理想中狀態）！
扯了這麼多，回到正題，最近我對前端的熱度直線增長，提高我的JavaScript水平是必須的，通過看書來提高是必須的，哪叫我買下了這些書呢，記筆記和練習也是必須的，因為買不起筆記本也懶得動筆，所以我把部落格當成我的學習筆記本，把從書裡（也包括相關部落格、視訊）學到的JavaScript系列知識總結整理後寫進部落格，同時也同步到github裡，方便日後查閱和鞏固，也達到了共享的目的。然後我給我的這系列JavaScript博文暫時命名為“JavaScript藝術之美”，以章節的形式來總結知識，然後會不定期的更新系列博文以及糾正之前博文中的錯誤和新方法。當然這系列博文也會通過目錄方式用超連結聯絡起來方便跳轉，
每次更新的博文也會同步到Github上：https://github.com/bcdon/JavaScript_study

一、JavaScript 簡史

百度百科很全，移步：JavaScript 百度百科

二、在 HTML 中插入 JavaScript

// 法1.直接使用
<script>...</script>
// 法2.使用外部檔案
<script src="myScript.js"></script>
// 法3.老傳統
<script type="text/javascript">...</script>
  • 現代瀏覽器以及 HTML5 中的預設指令碼語言是 JavaScript，所以沒必要設定 type=”text/javascript”。
  • script 標籤可位於 HTML 的 body 或 head 部分，最好的做法是放在html文件最後，</body> 之前。

三、註釋

// 法1.單行註釋
/* 法2.多行註釋第一行
    第二行 */
<!-- 法3.html風格，單行註釋，一般不推薦

四、變數

  • 人們把那些會發生變化的東西稱為變數，把值存入變數的操作稱為賦值，使用 var 關鍵詞來宣告變數。
  • JavaScript允許直接對變數賦值而無需事先宣告，如果對某個變數賦值之前未宣告，賦值操作將自動宣告該變數。
// 變數宣告
    var name1;
    var name2;
// 用一條語句一次宣告多個變數
    var name1, name2;
// 先宣告後賦值
    var name1, name2;
    name1 = "value1";
    name2 = "value2";
// 一石二鳥，宣告同時賦值
    var name1 = "value1";
    var name2 = "value2";
// 也可以這樣，最佳做法
    var name1 = "value1", name2 = "value2";
  • 在JavaScript 裡變數和其他語法元素的名字都是區分字母大小寫的
  • JavaScript 語法不允許變數名中包含空格或除美元符號”$”外的標點符號。
  • JavaScript 變數名允許包含字母、數字、下劃線和美元符號“$”，第一個字元不允許是數字，能以 $ 和 _ 符號開頭（不過我們不推薦這麼做）

駝峰式和下劃線規範：

宣告變數用下劃線連結多個單詞，函式名、方法名和物件屬性名命名首選駝峰格式

五、資料型別

在宣告變數的同時宣告變數的資料型別，這種做法稱為 型別宣告，必須明確型別宣告的語言稱為強型別語言，JavaScript不需要進行型別宣告，因此它是一種弱型別語言。

1.字串

字串由零個或多個字元構成，必須包在單引號或雙引號內：

var mood = "happy";
var mood = `happy`;

有的情況下需要在字串裡對字元進行轉義，在JavaScript裡用反斜線對字串進行轉義：

var mood = `don`t ask`;

2.數值

JavaScript 只有一種數字型別。數字可以帶小數點(浮點數)，也可以不帶(整數)：

var x1 = 34.00;        //使用小數點來寫
var x2 = 34;              //不使用小數點來寫

在有關數值的前面加上一個減號“-”表示他是一個負數：

var x1 = -34.00;          //負浮點數
var x2 = -34;             //負整數

極大或極小的數字可以通過科學（指數）計數法來書寫：

var y = 123e5;             // 12300000
var z = 123e-5;           // 0.00123

3.布林值

布林（邏輯）只有兩個可選值：true 或 false。

var x = true;
var y = false;

六、陣列

陣列是指用一個變數表示一個值的集合，集合中的每個值都是這個陣列的一個元素。
陣列可以用關鍵字 Array 宣告，同時還可以指定陣列初始元素個數（陣列的長度）：

var my_array = Array(4);      //指定長度，不必須
var my_array1 = Array();      //不指定長度

向陣列中新增元素操作稱為填充：

var cars = new Array();
cars[0] = "Audi";    //陣列的下標是從0開始計數的
cars[1] = "BMW";
cars[2] = "Volvo";

宣告陣列的同時對他進行填充，用逗號把各個元素隔開：

var cars = new Array("Audi","BMW","Volvo");

甚至用不著明確表明是在建立陣列，需用一對方括號把各個元素的初始值括起來：

var cars = ["Audi","BMW","Volvo"];

陣列元素不必非得是字串：

var cars = ["Audi", 1998, false];   // 3種資料型別，依次為 字串、數值、布林值
// 還可以是變數
var name1 = "John";
cars[0] = name1;  // 把cars陣列的第一個元素賦值為字串"John"
// 陣列元素的值還可以是另一個陣列的元素
var name1 = ["Audi","BMW","Volvo"];
cars[1] = name1[2];      // 把name1陣列的第3個元素值"Volvo"賦給cars的第二個元素

陣列還可以包含其他陣列，陣列中的任何一個元素都可以把一個陣列作為它的值：

var cars = ["Audi", 1998, false];
var name1 = [];
name1[0] = cars; // name1陣列的第一個元素值是cars陣列

通過name1陣列獲得cars陣列裡的某個元素：name1[0][0] 的值是字串”Audi”，name1[0][1] 的值是數值 1998，name1[0][2] 的值是布林值 false。

關聯陣列：

可以通過在填充陣列時為每個新元素明確地給出下標來改變這種預設行為，在新元素給出下標時不必侷限於使用整數數字，可以用字串：

var cars = new Array();
cars["name"] = "Audi";
cars["year"] = 1998;
cars["living"] = false;

在JavaScript中，所有的變數實際上都是某種型別的物件。

七、物件

JavaScript 中的所有事物都是物件：字串、數字、陣列、日期，等等。物件是擁有屬性和方法的資料，物件也是使用一個名字表示一組值，每個值都是物件的一個屬性：

person=new Object();   // 建立物件使用Object關鍵字
person.firstname="Bill";  // 使用點號獲取屬性
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

花括號語法建立物件：

var person={firstname="Bill",lastname="Gates",age=56};

屬性是與物件相關的值，方法是能夠在物件上執行的動作。
下面用person物件填充cars陣列,使用 cars[0].firstname得到值”Bill”：

var cars = new Array();
var person={firstname="Bill",lastname="Gates",age=56};
cars[0] = person;

下面將cars陣列也宣告為物件:

var cars = {};
var person={firstname="Bill",lastname="Gates",age=56};
cars.firstCars = person;

使用 cars.firstCars.firstname得到值”Bill”,依次類推。

相關文章