【網頁切版】置中 transform： translate(-50%, -50%);

.gray{
  position: relative;
  border: 1px solid black;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  background-color: rgb(247, 243, 243);
}

.red {
  position: absolute;
  width:100px;
  height: 100px;
  border: 1px solid red;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.blue {
  position: absolute;
  width:100px;
  height: 100px;
  border: 1px solid blue;
  top:50%;
  left: 50%;
}

• 會以左上角那點為50%的定位點，因此用 transform: translate(-50%, -50%) 是為了讓div往左、上偏移50%。
• position: absolute 會去抓外層的relative父元素做定位

​

【Ch3型別、值與變數】型別Type、類別Class、Wrapper、Hosting

▌型別(Type）

可以分成

• 基本型別：數字、字串、布林、null（特殊型別）、undefined（特殊型別）
• 物件型別：物件（函式＆陣列）

任何不是數字、字串、布林、null（特殊型別）、undefined（特殊型別）的都是物件。

▌類別（class）

類別是物件的子類別（subtype），以下都是一種class

• Array
• Function
• Date
• RegExp

JS是物件導向的語言，意思是說許多type都有自己的方法(method）可以用

▌Wrapper

字串雖然不是物件，但呼叫其特性的時候會被轉成「暫時的物件」（稱為Wrapper）

▌Hosting

• JS的區塊設計會有Hosting的功能

var a="global"
function hosting(){
 console.log(a) //undefined
 var a="local"
 console.log(a) // local
}

var a="global"
function hosting(){
 var a //實際上變數的宣告，會在前面出現
 console.log(a) //undefined
 a="local"
 console.log(a) // local
}

​

【Ch4運算式與運算子】forEach ＆ map ＆ filter

運算式（expression)：運算式會得出一個「值」，ＪＳ編譯器會估算（evalute)得到結果值。
運算子（operator）：可以結合運算元，變成運算式
運算元（operand）：計算元素

x * y //運算式 ; x 是運算元 ; * 是運算子

▌基本運算式

• true //估算成boolean true
• false //估算成boolean false
• null //估算成 null值
• this // 估算成current object （估算值會依據位置而不同）
• i //估算成i的value
• undefined // 全域變數

任何字出現，JS會先假設他是變數然後再去查詢他的值，如果沒有對應的，就會估算成undefined。

▌運算後指定

total + = A // total = total + A

▌初始值

• 物件（陣列）初值設定式： [ ]
• 函式定義預算式：function() { }
• 調用運算式：f(0) / new Object()

▌三元運算子

運算式a ? 運算式b : 運算式c：三元運算子

x>10 ?: x : -x //如果x>10，就回傳-x

• 如果第一個運算元估算結果是true，第二個運算元就會被估算，然後回傳
• 如果第二個運算元估算結果是false，第三個運算元就會被估算，然後回傳

▌delete

可以刪除特性（property）或是陣列元素（element）

▌void

估算運算元，丟棄，然後回傳undefiend

​

【Ch7陣列】forEach ＆ map ＆ filter

下面這些函式，基本就是傳入函式

▌forEach

• 把陣列的值取出來，弄進去函式

  var a = [1,2,3]
  var sum=0
  a.forEach(function(x){
  sum+=x*x;
  })
  console.log(sum) //14
  

▌map

• 把陣列的值對應成一個新的陣列

var a = [1,2,3]
var b=a.map(function(x){
return x*x;
})
console.log(b)   // [1,4,9]

▌filter

• 只回傳要的元素成新陣列

var a = [1,2,3]
var b=a.filter(function(x){
  return x>1
})
console.log(b)

​

【Ch7陣列】reverse & sort & concat

▌reverse

• 反轉原陣列

var a=[1,2,3]
console.log(a.reverse())   // [3,2,1]

▌sort

• 排序原陣列，如果不用引數，就用abc順序來排序

var a=["c","v","a"]
console.log(a.sort())

▌concat

• 結合兩個陣列，並回傳一個新的陣列

var a=["a","b","c"]
var b=[1,2,3]
c=a.concat(b)
console.log(c)

​

【Ch7陣列】陣列的增加刪除 push & pop / shift & unshift / join & spilt

▌push & pop ：後面

• push：在原陣列最後面加上一個元素
• pop：刪除最後面的陣列元素

var a= [1,2,3,4]
a.push(5)  // [1,2,3,4,5]
a.pop()  //  [1,2,3,4]

▌ shift() & unshift() ：前面

• shift() ：把第一個元素刪掉，並且回傳該元素
• unshift()：把元素塞到第一個前面

var a= [1,2,3,4,5];
a.shift() // a= [2,3,4,5]

var a= [1,2,3,4,5];
a.unshift(2)
console.log(a) // [2,1,2,3,4,5]

▌ join() & spilt()

join() ：把元素轉成字串，然後回傳

var a= [1,2,3,4]
var b=a.join(",")   // 1,2,3,4

spilt()：把字串切成元素，然後回傳陣列

var a= "abcd";
var b=a.split("");
console.log(b);

​

【Ch7陣列】什麼是陣列(Array)? 查詢 in / indexOf

• 陣列是一組有續集群，裡面有元素（element）跟索引（index）
• 是一種特殊的物件，Zero based 從0開始最大到2^32-2
• 元素不具型別，可以是任何型別。

▌陣列的特殊性

• 稀疏性：可以不需要擁有連續的索引index
• length：比元素還要多，可以根據需求自動擴充
• 索引可以不是數字（因為array是特殊的物件），索引如果不是數字會被轉成字串，當成特性property 去查詢這個陣列物件。

Var a=[,,]沒有元素但是會得出length=2（因為可以尾隨逗點）
Var a = new array()
Var a =new array(10) /指定元素的數量，但是此時還沒有index
console.log(a.length); //10
console.log(a[0]); //undefined

▌查詢

• instanceof Array：陣列跟物件用typeof分不出來，必須用instanceof Array查

var a = [1,2,3]
console.log(typeof a)  // object
console.log(a instanceof Array)  // trye

• X in array：可以查詢索引（也就是物件的特性）

var a= [1,2,3,5]
console.log(3 in a)   //true

• indexOf()：從前面開始找，然後回傳索引

var a = [1,2,3,4,5]
console.log(a.indexOf(1))  //0

• lastindexof()：從後面開始找，然後回傳索引

​