JavaScript基礎速通

JavaScript基礎(速通)

-注: 此文章會持續保持更新，并非完整，

關于JavaScript語言的簡介，

JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的高級編程語言，雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式和宣告式（如函式式編程）風格，
JavaScript的標準是ECMAScript ，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準，2015年6月17日，ECMA國際組織發布了ECMAScript的第六版，該版本正式名稱為 ECMAScript 2015，但通常被稱為ECMAScript 6 或者ES6，

1.JavaScript的特點:

　　1.是一種解釋性腳本語言（代碼不進行預編譯），

　　2.主要用來向HTML（標準通用標記語言下的一個應用）頁面添加互動行為，

　　3.可以直接嵌入HTML頁面，但寫成單獨的js檔案有利于結構和行為的分離，

　　4.跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等），

　　5.Javascript腳本語言同其他語言一樣，有它自身的基本資料型別，運算式和算術運算子及程式的基本程式框架，Javascript提供了四種基本的資料型別和兩種特殊資料型別用來處理資料和文字，而變數提供存放資訊的地方，運算式則可以完成較復雜的資訊處理，

　　6.可以實作web頁面的人機互動，


2.JavaScript的常用用途:
　　1.嵌入動態文本于HTML頁面，
　　2.對瀏覽器事件做出回應，
　　3.讀寫HTML元素，
　　4.在資料被提交到服務器之前驗證資料，
　　5.檢測訪客的瀏覽器資訊，
　　6.控制cookies，包括創建和修改等，
　　7.基于Node.js技術進行服務器端編程，


好了，因為是速通，這些覆寫的也算是全面，我們大致只需要了解一下就可以了，

1. 基礎部分，(基礎語法和理論)

1.JavaScript的資料型別

　　如果是學過其他編程語言，有一定基礎的朋友們，可能對資料型別有一定的了解， 比如Java有八種常用資料型別，分別是什么? 無非就是 byte，short， int，long， double， float，char，boolean八大資料型別；在加上一些特殊的參考資料型別，Class(類)，Interface(介面)， Array(陣列)，
　　

　　但是值得一提的是什么呢，Java是一種強型別語言，而與之不同的JavaScript則是一門弱型別語言，

在這里就不得不提及一下強型別語言和弱型別語言分別是什么，
熟悉Java的朋友，可能經常會在代碼里看到 int number = 10;
或者在一個回圈控制陳述句里看到 for (int i = 0; i < 5; i++) {} ， 欸，這時候你會很好奇，這個int，到底起到了一個什么作用，這就是我們今天要談的強型別語言和弱型別語言的區別了，
在Java里，要求，在創建變數的時候，必須給變數賦予初始的資料型別，不管你有沒有給他賦值，必須給他一個對應的資料型別，(你希望這個變數接受一個什么樣的資料，你就給他一個對應的資料型別)，比如我希望你給我一個整數，呢么我可能就是int i；(未賦值)　　 這種一般都是強型別語言，

但是弱型別語言就不一樣了，

　　弱型別可以將字串 12 和整數 3 進行連接得到字串 123，然后可以把它看成整數 123，而不需要顯式轉換，弱型別有時顯得很方便，有時卻又極易出錯，

　　下面演示一串JavaScript代碼，

var a = 123;
var b = "abc";
var c = a + b;
alert(c);	// "123abc"

如上，變數a里定義了一個數字，123， 而變數b里卻定義了一個字串，“abc”，然后我讓他去做一個運算， 請問，按照一個正常的運算思路，一串文字，和一組數字，有什么運算關聯嗎？答案是:毫無關聯， 但是就是這么毫無關聯的兩個東西，你可以對他進行運算， 其實說的在準確一點，這個應該屬于拼接，如果這個時候你去用typeof(); 方法去查看一下變數c，你可能會發現他會回傳給你一個string型別，

…

有過了解后，可以正式開始，

1.JavaScript的資料型別

　　在上面我也有說過，JavaScript是一種弱型別語言，他大抵分為了以下幾類，

數值型別代表: Number，它包含了一切數字，浮點數，整數，

字符型別代表: String, 其實只要你拿雙引號抱起來，呢么他就一定是字符型別…

物件型別: Object，工廠模式、建構式模式、原型模式、組合模式（建構式與原型）、動態原型模式、寄生建構式模式、穩妥建構式模式，這幾種創建方式并沒有絕對的好與壞，不同的方式適合于不同的應用場景，

布爾型別:boolean， 只包含了兩個值 true(真) 和 false(假)，

函式型別: 用于函式的創建，Function，


在這里不得不提起一下JavaScript中的一些特殊的值:
　　　　1. undefined
　　　　2. null
　　　　3. NaN
　　這三個值在JavaScript里屬于比較特殊的幾個值，
　　　　第一個 undefined 的意思是，未定義，所有JavaScript在定義變數未賦予初始值的時候，默認值都是undefined，

　　　　第二個 null 的意思是，空值， 就是字面意思，里面什么都沒有，空的，

　　　　第三個 NaN的意思是，非數字，非數值的意思，它的全稱是: Not a number; (不是一個數字)

JavaScript中定義變數的格式:

var a;	// var 宣告變數名，	格式: var 變數名;
var b = 10;	// var宣告變數名，但是可以在宣告的時候直接賦值，
var a, b, c, d; // 可以同時宣告多個變數，但不建議這樣做，可閱讀性不高，

JavaScript關系比較運算
　　等于: == 是做簡單的字面比較
　　全等于: === 除了做字面值的比較之外還會比較兩個變數的資料型別 全部相等才行

// == 運算
var a = 123;
var b = "123";
if (a == b){
    alert("這是一個==的運算")// 最侄訓執行這一條陳述句，就是說回傳了True
} else {
	alert("我倆不相等");
}

// === 運算
var num = 123;
var str = "123";
if (num === str) {
	alert("我是一個===的運算");
} else {
	alert("我們不相等");// 最侄訓執行這一條陳述句，就是說回傳了false
}

JavaScript的邏輯運算
　　且運算: &&
　　或運算: ||
　　取反運算: !

// 邏輯且 &&
var number = 8;
if (number > 5 && number < 10) {
	alert("Number 大于五且小于 10");	// 最后會執行這個，
} else {
	alert("他只有一個條件符合或者兩個條件全部符合才會執行我");
}

// 邏輯或
var num = 15;
if (num < 10 || num > 13) {
	alert("num 小于十或者大于十三");	// 最后會執行這個
} else{
	alert("只需要有一個條件滿足即可回傳true，兩個條件全不滿足才會執行我");
}

// 取反運算
var num2 = 10;
if (num2 != 10) {
	alert("!= 我喜歡叫他不等于，當num2不等于10的時候才會回傳true");
} else {
	alert("所以這一次是執行我咯");	// 會執行它
}

上面的代碼大致了解了一下，這邊我們講一下具體什么是邏輯且，邏輯于，和取反，
　　1. 邏輯且 &&
　　　　字面意思，在判斷兩個條件的時候， 我們可以這樣去讀，當 a 大于 10 并且 a 還得小于15 才會回傳true，if(a > 10 && a < 15) 只有當這兩個條件全部滿足的時候，才會執行代碼塊里的陳述句，
　　　　有兩種回傳情況（第一種情況: 當運算式全為真的時候，回傳最后一個運算式的值　　第二種情況: 運算式里有一個為假的時候，回傳第一個為假的值）

　　2.邏輯或 ||
　　　　字面意思，當條件一或者條件二里有一個滿足，即回傳true，
　　3.取反
　　　　取反運算，我感覺按我的讀法讀一遍就可以走了，取一串代碼， var a = 10; if(a != 10){代碼塊} 定義一個變數a， 并且賦初值為10，如果 a 不等于 10， 呢么就回傳true，反之a 等于 10 就回傳false，


2.JavaScript陣列
　　如何定義陣列:

var array = []; // 空的陣列， 方法: var 陣列名 = [];
var array1 = [1, 2, 3] // 可以賦予初始值，在定義的同時對它賦值，

JavaScript中的陣列操作其實和Java的陣列操作很相似，

var array = []; 	// 定義一個空陣列，
array[0] = 1;		// 可以通過下標給陣列賦值，
array[2] = 3;
// 可以通過length來查看串列元素的個數，
alert(array.length);	// 請問這里應該回傳幾，	答案是 3

觀看上述代碼， 我們應該會有一個疑惑，為什么我明明通過下標添加了兩個元素，但是他卻給我回傳串列里有三個元素的長度呢， 這里就得提及一下JavaScript串列的自動擴容模式了， JavaScript語言中的陣列，只要我們通過陣列下標賦值，呢么最大的下標值，就會自動的給陣列做擴容操作；


在JavaScript中， 串列也是可以做遍歷的， 和Java的方法差不多，

var array = [0, 1, 2, 3, 4, 5, 6, 7];
for (var i = 0; i < array.length; i ++) {//應該沒人對array.length疑惑吧
	alert(array[i]);	// 根據彈窗依次輸出 0 - 7 通過下標獲取的，
}

3.JavaScript中的函式
　　關于函式的定義：
　　　　可以使用function關鍵字來定義函式，

// 定義一個函式，
function 函式名(形參串列) {
	函式體
}
// 第二種定義函式方式
var 函式名 = function(形參串列) {
	函式體
}

// 定義一個無參函式
function fun() {
	alert("這是一個無參函式");
}
fun();	// 提示窗輸出   "這是一個無參函式"

// 帶有引數的函式
function fun1(a, b){
	alert(a + b);
}
fun1(2, 5); // 提示窗輸出 a + b 的值，  7

// 函式可以自帶回傳值， 直接加return就好
function fun2(){
	return 0;
}
fun2();	// 2

對于函式了解的差不多后，我們來重點談談 函式的 arguments 隱形引數 (只在function函式內)；
　　什么是arguments 隱形引數，其實這個也是好理解的，就跟Java的可變長引數一樣，public void fun(Object …args);
可變長引數其實就是一個陣列，
呢么操作也類似于陣列，

function fun() {
	alert(arguments);
}
fun(1, 2, 3, 4, 5); // 回傳[Object Arguments]

// 既然說 跟串列操作相似，我是不是可以用 length方法 來查看它的引數數量呢，
function fun1(){
	alert(arguments.length);	// 6
}
fun1(0, 1, 2, 3, 4, 5);

// 呢我是不是可以同樣去獲取下標所對應的引數呢，
// 動手試試 是最有效的方法，
function fun2(){
	alert(arguments[0]);	// 1
	alert(arguments[3]);	// 4 
}
fun2(1, 2, 3, 4, 5, 6);

// 呢他是不是也和串列一樣 可以遍歷呢  答案是， 是的
function fun3() {
	for (var i = 0; i < arguments.length; i ++) {
		alert(arguments[i]);	// 依次視窗輸出 所有引數，
	}
}
fun3(1, 2, 3, 4, 5, 6, 7);

學了這么久了，咱們出幾個題目來綜合鞏固一下吧，

1. 計算BMI指數，
   　　具體要求分為: 定義兩個變數來存盤你的身高和體重，然后根據以下公式來計算BMI（體重除以身高的平方），
   BMI<18.5：您太瘦了，體重過輕！
   BMI為：18.5-25：恭喜您，您的身材非常好！
   BMI為：25-28：您的身材有點偏胖！
   BMI為：28-32：您是一個小胖子！
   BMI>32:您嚴重肥胖！

2.要求撰寫一個函式，計算所有引數相加的和并回傳.

~
~
~

// BMI
var height = 1.8; // 定義身高 并賦值 1.8 (單位: m)
var weight = 62; // 定義體重 并賦值 62 (單位: kg)
// 定義一個變數，來存盤計算好的值 公式(體重除以身高的平方)
var bmi = weight / (1.8 ** 2);
// 進行條件判斷BMI<18.5：您太瘦了，體重過輕！
if (bmi < 18.5) {
	alert("您太瘦了，體重過輕！");
} else if (bmi >= 18.5 && bmi < 25) {
	alert("恭喜您，您的身材非常好！");	// 最終執行了這一句，
} else if (bmi >= 25 && bmi < 28) {
	alert("您的身材有點偏胖！");
} else if (bmi >= 28 && bmi < 32) {
	alert("您是一個小胖子！");
} else {
	alert("您嚴重肥胖! ");
}

~

// 計算引數和
function sum(sum1, sum2){
	var result = 0;	// 用來接受值
	for (var i = 0; i < arguments.length; i++) {
		result += arguments[i]
	}
	return result;	// 
}
alert(sum(1, 2, 3, 4, 5, 6)); // 21

~
~

JavaScript中的自定義物件(擴展)

定義:
　　var 變數名 = new Object(); 　// 空物件(物件實體化)
　　變數名.屬性名 = 值; 　　// 定義屬性，
　　變數名.函式名 = function(){}　 // 定義函式

　　訪問:
　　　　變數名.屬性名/函式名();

截止到現在字數為: 5651字，239段落…

正在持續保持更新中…

JavaScript中的自定義物件(擴展內容):

// object 形式自定義物件
var obj = new Object();
obj.name = "Alen";
obj.age = 18;
obj.fun = function(){
	alert("姓名: " + this.name + " , 年齡: " + this.age );
}

alert(obj.name);	// Alen
alert(obj.age);		// 18
// 呼叫函式>
alert(obj.fun());	// 姓名: Alen， 年齡: 18

/*
花括號的形式自定義物件， */
	var 變數名 = {
		屬性名: 值,		// 注意是英文字符，
		屬性名: 值,
		
		函式名: function() {
			// 空物件
		}
	}

var obj = {};
	alert(typeof(obj));		// object

	var obj  = {
		name = "Alen",
		age = 18,
		fun: function(){
			alert("姓名是: " + this.name + ", 年齡是: " + this.age);
		}
	};

	alert(obj.name);	// Alen
	alert(obj.age);		// 18
	obj.fun();			// 姓名是: Alen, 年齡是: 18