JavaScript small note

JavaScript small note

- 10月 01, 2015

變數 var varName = ...;

注解 // ... , /* ... */

條件 IF/ELSE 同C 一樣有 ?: 可以用

選擇 SWITCH/CASE 同C 但是case內同可以用字串

迴圈 FOR/LOOP WHILE/LOOP DO/WHILE/LOOP 同C

FOREACH for(var X in Y) { ... }

陣列 Array

使用：
- var varArray = [data1, data2, data3, ...]; # data之間可以不同形態。
- var varArray = new Array();
- var tmp = varArray[n]; # 取值。

多維陣列：
- var varArray = [ [1,2,3], [4,5,6], [7,8,9]]; # 宣告一個二維3*3的陣列。
- var tmp = varArray[n1][n2]; # 取值。

console.log(varArray); # [ data1, data2, data3, data4, ... ]

varArray.push(data); # 加一個元素到varArray最後面。

varArray.length # 回傳陣列有幾個元素。

for (var key in varArray) { console.log(varArray[key]); } # 用foreach走訪陣列。

字串 String

var varString = "Test String"; # 宣告。

var firstChar = varString[0]; # 用[n]來取得第n個字元。

varString = varString + " yeah!"; # 字串連接用 '+' 。

string.length # 回傳字串長度。

"cats".substring(1,3) # 從cats中位置1開始抓元素直到位置3之前(at)。

string.toLowerCase() # 回傳字串小寫。

string..toUpperCase() # 回傳字串大寫。

數字 digit

Math.random() # 產生一個0到1(不含)之間的亂數。

Math.floor(digit) # 回傳無條件捨去的digit。

函數 Function

宣告：
- var functionName = function(argument) {
  
  ....
  
  }; #注意這邊需要分號
- functionName(argument) {
  
  ....
  
  }

其他函數

confirm(string) # 跳出一個示窗並顯示string、確定按鈕、取消按鈕。確定回傳true，取消回傳false。

prompt(string [, string2]) # 跳出一個示窗並顯示string、輸入文字欄位(text)(string2為預設文字)、確定按鈕、取消按鈕。確定回傳使用者輸入的文字，取消回傳null。

console.log(data) # 把data輸出到console中。

isNaN(data) # 判斷是否.不是數字(Not-a-Number).。不是數字回傳true，是數字回傳false。

typeof(data) #回傳data的資料型態。

物件導向

宣告

var varObject = new Object(); # 宣告一個空的物件(使用new的方式)。

var varObject = {} # 與上一行一樣宣告一個空物件。

var varObject = { # 宣告一個物件並給與一些初始屬性，函式。

key: value,

key: value,

key: value,

functionName: function(arguemnt) { ... }

};

/--------

var varObject = new Object();

varObject.key = value;

varObject.functionName = function(argument) { ... } #這邊只有varObject有functionName這個方法，其他Object()沒有，

...

var varObject = { # 物件裡面是可以有物件的

bill: {}

};

/--------

var varObject = new Object();

varObject.bill = new Object();

宣告，使用建構子

宣告
- function Person(name, age) { # 這邊以人(Person)物件為例。
  
  this.name = name;
  
  this.age = age;
  
  this.functionName = function() {
  
  ....
  
  };
  
  }
  
  var SkyNimo = new Person("SkyNimo", 22); # 建立物件
- prototype(原型) 那如果要再給Person加方法呢？(全部宣告在Person會告成記憶體浪費，我們可以只挑有用的在後來再加入到Person中)
  
  Person.prototype.functionName = function() {...}

public private

function Person(first,last,age) {

this.firstName = first; # public

this.lastName = last; # public

this.age = age; # public

var bankBalance = 7500; # private

this.functionName = function() { ... } # public

var functionName = function() { ... } # private

}

取屬性值/修改屬性值/新增屬性

存取方法有二種 # 給值時若屬性不存在則自動新增該屬性並給值。
1. varObject.name = data;
2. varObject['name'] = data;
  - 應用：利用變數存取不同的值。
    
    var N = 'name';
    
    var[N] = data;
    
    N = 'birthday';
    
    var[N] = data;

用foreach 走訪Object。
- var varObject = new Object();
  
  varObject.key1 = data1;
  
  varObject.key2 = data2;
  
  ...
  
  --->
  
  for (var key in varObject) {
  
  console.log(varObject[key]); # 注意！這邊只能用varObject[key]而不能用varObject.key。
  
  }

給方法

方法

為varObject新增一個方法。
- var varObject = new Object();
  
  varObject.functionName = function (...) {...}

物件公用的方法 # 使用this
- var functionName = function (...) {
  
  return this.age; # 哪個物件呼叫這個方法，this就是哪個物件，也就是說這個function會回傳呼叫物件的age屬性的值。
  
  }
- 使用方法:
  - var object1 = new Object(); # 建立object1物件。
    
    object1.age = 66; # object1的age設為66。
    
    var object1.functionName = functionName; # 設object1的functionName方法為我們剛剛建立的方法。
    
    console(object1.functionName()); # 之後就可以使用了，這邊是輸出到console。

函數

Object.hasOwnProperty(string) # return true/false 查看該物件是否有此成員(變數 or 函式)。

繼承 inheritance

ChildObject.prototype = new ParentObject(); # ChildObject繼承ParentObject。這行應要寫在ChileObject建構子之外。

留言