WEB前端學習 Day 6（Javascript 初識+變數+邏輯判斷+資料型別）
什麼叫做Javascript，首先，它跟Java無關。它是一種在瀏覽器上執行的指令碼語言，用來通過邏輯判斷，迴圈操作等來控制HTML的節點，獲取HTML節點的資訊。比如說表單驗證，如果使用者沒有輸入，就要彈一個框出來告訴使用者沒有輸入。這樣的操作都是跟使用者互動的操作，這就自然要獲取使用者輸入的資訊。所以，Javascript是用來與使用者做互動的，當然也可以編寫一些外掛來實現一些動畫之類的。OK，現在就開始編寫Javascript。
首先，來看看Javascript程式碼在哪裡寫。之前有講到過HTML，有一個head標籤。head標籤裡面會用style標籤來寫css，也會用link標籤來引入外部的css。那麼Javascript是一樣的。它可以在head標籤裡用script標籤來編寫javascript程式碼。引入外部的js檔案，還是用script標籤。例如：
<html>
<head>
<script>
// 這裡是Javascript程式碼
</script>
<script src="這是一個js檔案路徑，以 .js 結尾"></script>
</head>
<body></body>
</html>OK，知道了程式碼在哪裡寫，就先來一個hello world。
<script>
alert("hello world");
</script>直接在瀏覽器裡面開啟對應的html就會彈出一個框，內容為”hello world”。alert是一個函式，它的作用就是彈框，括號裡面的成為引數，而alert的引數，就是彈出框裡顯示的內容，所以你傳入什麼它就會顯示什麼。OK，我們先來認識一下變數。
什麼叫變數，變數就是一個容器，它可以儲存資料，儲存後還可以讀取資料，並且它還可以重新儲存資料。這就使得變數的設計很全面了，它的目的是儲存資料，又可以替換它儲存的資料，又可以讀取它儲存的資料，當然還可以銷燬它的資料，這是瀏覽器做的事情，我們不需要關心，這樣的設計，就讓資料非常的靈活。可以到處放到處讀，這一點，我堅信所有的語言都一樣。OK，知道了變數的作用，看看怎麼搞一個變量出來。要想擁有一個變數，首先得宣告我需要一個變數，請瀏覽器分配給我空間用來儲存我的資料，那麼這句程式碼為var v1;這句程式碼，告訴瀏覽器我要空間給我存資料。v1 = “hello world”; 這句程式碼告訴瀏覽器，我存放字v1的資料是什麼。OK，來個完整的例子：
<script>
var v1;
v1 = "hello word";
alert(v1); // 直接使用變數名稱，就可以讀取變數裡面的資料。
</script>OK，到這裡我們會宣告變數並給變數賦值了。再來看看宣告和賦值的簡寫：
<script>
var v1 = "hello world";
//這裡把宣告操作(var v1;)和賦值操作(v1="hello word")放在了一句，變成了一句程式碼，這是一種簡寫，但是永遠永遠要記住，這句程式碼是兩句程式碼的簡寫，也永遠永遠要記住，變數永遠永遠都是先聲明後使用的。
</script OK，到這裡，知道了如何去建立和使用一個變數。
接下來，就來看看如何去判斷這個變數是否符合某一個條件，看下面的程式碼。
<script>
var age = 22;
if(age>18){
alert("成年了");
}else{
alert("未成年");
}
//用if進行判斷，注意格式。if後緊接著是一個()，也就是if(條件){處理}。這種格式應該也是非常符合邏輯的。如果 (什麼什麼成立) {就做點什麼}。 後面有一個else，這個的作用就是前面的if都不成立，就是否則，這是非常嚴密的邏輯，如果 否則。絕對不會漏掉。。所以IF這個邏輯判斷也是所有語言都會存在的，只不過格式不一樣而已。
</script>那麼有大於(>)就有小於(<)，等於(==)，大於等於(>=)，小於等於(<=)，不等於(!=)。
還有一些條件必須要同時成立或者只要其中一個成立就算成立的情況。
必須要同時成立的條件用 “&&”隔開。
只要一個成立就成立的條件用”||”隔開。這個是回車鍵上面的那個豎槓，按shift加它就可以了。
舉個栗子：
var age = 22;
var sex = "男";
if(age>18 && sex=="男"){
alert("男性並且已成年")
}
if(age>18 || sex=="男"){
alert("男性 或者 已成年");
}OK ，到這裡，知道了變數是什麼，如何去建立和使用。知道了怎麼判斷變數的內容，那麼現在就需要知道，變數裡面都可以存些什麼資料。之前我們存的”hello world”，這是一個字串。什麼叫字串，那就得看什麼是字元，理論上來講，所有可見的單個的都是字元，比如說 “你”,”我”,”a”,”1”,”，”。有一些字元怪怪的，認不得，那就是亂碼，那算不算是字元。我認為那不算了，因為它沒有被包含在unicode裡面（這是一種國際字元編碼，在java裡面，字元型的資料，只能儲存這裡面的資料。所有我認為亂碼不算字元）。知道什麼叫做字元後，那麼字串，就是一系列的字元。所有”hello”是一個字串,”world”是一個字串,”hello world”還是一個字串。這就是字串型別資料。很明顯，資料型別有很多。比如數字(number)，比如陣列(Array)，比如物件（這個後期再講）。到底有多少種資料型別，可以百度一下，反正我是不贊同百度的各種說法和官方的書法，但我也沒說法。回顧一下，我們跟 瀏覽器要變數來儲存資料的時候是用var關鍵字，整句程式碼就是var v1 = “hello word”。並沒有顯式告訴瀏覽器我存的是字串。瀏覽器是如何知道我存的就是字串？那是因為，，，給hello word打上了雙引號！！ 瀏覽器就根據這個來判斷它是什麼型別的資料了。所以，在給變數賦值時，參考以下內容：
var number1 = 1; // 建立變數並存儲數字，不要帶引號。
var string1 = “abcd”;//建立變數儲存字元或者字串，帶上引號。
var array1 = [1,2,3,4,5];//建立變數儲存資料集合，用 []。
var object1 = {“property1”:”123”};//建立變數儲存物件，用 { }
var boolean1 = true; //建立變數並存放bool型別，只能是true和false。
這裡有一個array,object,boolean。單獨抽出來講一下
array 就是陣列的意思，也就是一系列資料的組合，它用[]包起來，資料之間用逗號隔開。這就是一種資料結構，把資料按照一定的結構給儲存起來，並且提供方法去訪問資料。這就像是坐牢一樣，把牢房給定編號，把犯人壓入指定牢房。要釋放時，只要記住犯人住的牢房編號，就能很快的找到。array就是一個牢房，給了編號。比如var arr = [1,2,3];我要找到3，編號就是2，這個2是因為array是從0開始計數的，然後一個一個往後數，那麼1對應的就是0,2對應的就是1，3對應的就是2了。那麼要獲取3，就是arr[2];例如：
var arr = [1,2,3]
alert(arr[2]); // 彈出來3
alert(arr[0]);//彈出來1Object 就是物件的意思，這是非常重要的一個數據結構。它很隨意。比如一個飛機，有機翼，輪胎，發動機。可以認為一個飛機就是一個物件。用資料來表示就是：
var feiji = {“part01”:”機翼”,”part02”:”輪胎”,”part03”:”發動機”};
這就構建了一個飛機物件。OK，那現在我要獲取 機翼 ，那麼就是feiji.part01。得到的就是機翼。feiji.part02得到的就是輪胎。這就是如何去儲存一個物件和使用一個物件。這裡面牽扯了一個計算機程式設計重大的思想——面向物件。
boolean就是”是”或”否”。所以取值只能是true和false。在if ()裡面，括號裡面的最終就是算出來條件是否滿足，也就是true或false，if(true){執行}。
到這裡，知道了如何建立並使用變數，知道了用if去判斷變數的內容，知道了瀏覽器是如何識別javascript裡面的資料型別的。
這次重點在於if判斷。資料型別可以慢慢搞。嘗試根據描述做一下練習：
1）圖片檔案的字尾有png,jpeg,jpg,icon等，js檔案的字尾是js，css檔案的字尾是css。那麼，宣告一個變數，儲存圖片格式。然後判斷。
如果是圖片格式，彈框說明這是圖片檔案。
如果是js或者是css檔案，彈框說明這是前端檔案。
如果什麼都不是，彈框說明未知檔案。
2）搞一個物件來儲存一個人的性別，年齡。然後判斷：
如果年齡小於18歲並且為男性，彈框提示“騷年”。
如果年齡大於30歲並且為男性，彈框提示“大叔”。
如果年齡大於60歲並且為男性，彈框提示“大爺”。
否則是女性，彈框提示“女性”。