# javascript
## 概念
1. window屬性:從根本來說就是一個Object,為全域變數。
2. hoisting概念:var food會提升到函式作用區域的最高處。
3. 暫時性死區(TDZ):變數food會提升到函式作用域的最高處，而在「變數food」後，「執行let food這行宣告語法」前，這段時間我們會稱為暫時性死區(TDZ)，在TDZ中，我們不能訪問food這個變數
4. 原型繼承 (Prototypal Inheritance):每個物件都有個 prototype 屬性，物件能夠繼承 prototype 上的屬性或方法。這個機制可以讓我們產生繼承自同一個 prototype 的多個物件，達到代碼復用的效果。
5. 原型(Prototypal):該物件屬於 A.__proto__ = B，即A繼承B
## 語法
### variable
https://ithelp.ithome.com.tw/articles/10240708
var宣告變數會容易導致意外汙染全域變數的問題，例如是區域變數覆蓋全域變數。
hoisting概念:var food會提升到函式作用區域的最高處。
```javascript=
var food = 'apple';
function func(){
var food
// 提升之後，因為此時未賦值
var result = 'I eat ' + food
console.log(result) // 所以會變成"I eat undefined"
// 此時才賦值
food = 'banana';
}
func();
```
let和const是區域變數，不會成為window屬性，如果未宣告就調用即報錯，const在宣告時會強迫賦值。
暫時性死區(TDZ)
```javascript=
let food = 'apple';
// 200行code之後
function func(){
//food提升到這裹，TDZ開始
let result = 'I eat ' + food //Uncaught ReferenceError: Cannot access 'food' before initialization
console.log(result)
//宣告food，TDZ結束
let food = 'banana';
}
func();
```
使用時機:
根據Google的JavaScript style guide，說明我們應該默認用const，如果該變數需要重新被賦值才用let，永遠不用var。
### new
https://www.shubo.io/javascript-new/
有點類似物件導向，宣告Cat這個function，其中kitty為其變數，kitty.name則為Kitty。
```javascript=
// Constructor
function Cat(name) {
this.name = name;//name(name)這個參數指定給name(this.name)這個屬性
}
var kitty = new Cat("Kitty");
console.log(kitty.name) // Kitty
```
### prototype
https://www.shubo.io/javascript-new/
https://www.shubo.io/javascript-prototype/
原型繼承 (Prototypal Inheritance)
每個物件都有個 prototype 屬性，物件能夠繼承 prototype 上的屬性或方法。這個機制可以讓我們產生繼承自同一個 prototype 的多個物件，達到代碼復用的效果。
如果 Cat 建構函式產生的物件都要有 speak() 方法，我們可以定義 Cat.prototype.speak()
```javascript=
// Define 'speak' method for Cat objects
Cat.prototype.speak = function() {
console.log(this.name + ": meow!");
var kitty = new Cat("Kitty");
kitty.speak(); // Kitty: meow!
};
```
## 函式
```javascript=
setTimeout(動作, 毫秒數) //幾豪秒後執行動作
dog.prototype//原型繼承ex.dog.prototype.speak代表所有的狗都會旺
dog.__proto__//原型ex:dog.__proto__代表dog是animal的一種
console.log() //印出啥
```
## Google API
### 開放原始程式碼
https://developers.google.com/maps/documentation/javascript/libraries-open-source?hl=zh-tw
### 路線規劃
https://developers.google.com/maps/documentation/javascript/directions?hl=zh-tw
https://developers.google.com/maps/documentation/javascript/reference/directions?hl=zh-tw#Place
1. 建立 DirectionsService 類型的物件
2. 呼叫 DirectionsService.route() 向路線規劃服務發出要求
3. 傳遞 DirectionsRequest 物件常值，其中包含輸入字詞與收到回應時執行的回呼方法
```javascript=
//DirectionsRequest包含以下
{
//起點:經緯度\字串EX:新竹火車站\Place物件
//Place物件，可用LatLng, String, PlaceID
//PlaceID可用Maps JavaScript API 中的 Geocoding,
//Place Search, Place Autocomplete
origin: LatLng | String | google.maps.Place, //必要
//終點:跟起點一樣
destination: LatLng | String | google.maps.Place, //必要
//交通方式:DRIVING(自駕車), BICYCLING(腳踏車),
//TRANSIT(大眾運輸工具), WALKING(走路)，TW全部支援
travelMode: TravelMode, //選用，預設自駕車
//會忽略 avoidHighways, avoidTolls, waypoints[], optimizeWaypoints
//TransitOptions 物件常值
//{
//到達時間，如果用會忽略出發時間
//arrivalTime: Date, 選用
//出發時間，如過用會忽略到達時間，如果都沒用會依照當前時間
//departureTime: Date, 選用
//指定偏好的交通方式，可包含一個或多個BUS、RAIL、SUBWAY、TRAIN、TRAM
//modes[]: TransitMode,選用
//轉成次數少(FEWER_TRANSFERS) or 較少走路(LESS_WALKING)
//routingPreference: TransitRoutePreference
//}
transitOptions: TransitOptions, //選用，如果用大眾運輸工具就會用到
//DrivingOptions 物件常值
//{
//如果要自駕車，這就是必要，可指定未來時間
//departureTime: Date,
//有bestguess(準確), pessimistic(較差的時間), optimistic(較好的時間)
//trafficModel: TrafficModel 選用
//}
drivingOptions: DrivingOptions, //選用，如果用自駕車就會用到
//單位，UnitSystem.METRIC(公里) or UnitSystem.IMPERIAL(英里)
unitSystem: UnitSystem, //選用
//控點，走哪裡會調整路線
waypoints[]: DirectionsWaypoint, //選用
//有效率的控點
optimizeWaypoints: Boolean, //選用
//提供替代路線，如果用控點就不能用
provideRouteAlternatives: Boolean, //選用
//盡可能避開渡輪
avoidFerries: Boolean, //選用
//盡可能避開高速公路
avoidHighways: Boolean, //選用
//盡可能避開收費路段
avoidTolls: Boolean, //選用
//選擇地區
region: String //選用
}
```
DirectionService呼叫後傳回DirectionResult(結果處理)和DirectionStatus(狀態)
DirectionStatus可能回傳值:
* OK //正常
* NOT_FOUND //起點或終點或控點沒辦法處理
* ZERO_RESULT //沒有符合的結果
* MAX_WATPOINTS_EXCEEDED //欄位過多，跟控點有關
* MAX_ROUTE_LENGTH_EXCEEDED //要求路線過長，太過複雜
* INVAILD_REQUEST REQUEST //無效，通常沒起點或終點
* OVER_QUERY_LIMIT //傳送太多要求
* REQUEST_DENIED //拒絕服務
* UNKNOWN_ERROR //未知錯誤
DirectionResult物件常值:
* geocoded_waypoints[]: DirectionsGeocodedWaypoint
* routes[]:DirectionsRoute
DirectionsGeocodedWaypoint物件常值:
* geocoder_status: OK or ZERO_RESULT
* partial_match:沒有傳回與原始要求完全相符的結果
* place_id
* types[]:傳回結果的「類型」，「台北」回傳「縣市」、「政治」
DirectionsRoute物件常值:
* legs[]:DirectionsLeg
* waypoint_order:控點順序
* overview_path: LatLng順暢路徑
* bounds:LatLngBounds折線範圍
* copyrights:包含這條路線中要顯示的版權文字。
* warnings[]:包含警告的陣列，以供在顯示導航路線時同時顯示。如果您沒有使用提供的 DirectionsRenderer 物件，就必須自行處理並顯示這些警告。
* fare:這條路線的總車資，大眾運輸要求傳回，currency 表示貨幣代碼，台灣為901；value 表示總車資
DirectionsLeg物件常值:
* steps[]:DirectionsStep不同步驟
* distance:涵蓋的總距離，value 表示距離；text 包含以字串形式表示的距離
* duration:總時間，value 表示所需時間；text 包含以字串形式表示的所需時間
* duration_in_traffic:考量目前路況總時間，value 表示所需時間；text 包含以字串形式表示的所需時間
* arrival_time:包含這個路段的預計到達時間，只有大眾運輸路線才會傳回這個屬性，以Time物件回傳，value 表示時間，以 JavaScript Date 物件的形式指定；text 表示時間，以字串的形式指定；time_zone 包含這個站點所在的時區
* departure_time:包含這個路段的預計出發時間，僅適用於大眾運輸路線
* start_location 起點
* end_location 終點
* start_address 起點地址
* end_address 終點地址
DirectionsStep物件常值:(只記會用到的)
* travel_mode:包含目前步驟中使用的 TravelMode。大眾運輸路線可以結合步行和大眾運輸路線
* transit 包含大眾運輸專屬資訊，例如抵達和出發時間，以及大眾運輸路線名稱
TransitDetails物件常值:
* arrival_stop:抵達車站/站點，name 轉運站/站點的名稱；location 轉運站/站點的地點
* departure_stop:到達車站/站點，name 轉運站/站點的名稱；location 轉運站/站點的地點
* arrival_time:以Time物件指定
* departure_time:以Time物件指定
* headsign:指定這條路線的行進方向
* headway:指定從目前同一站點出發的預計間隔秒數
* line:TransitLine
* num_stops:包含目前步驟中的停靠站數量，其中包含抵達站，但不包含出發站。例如，假設您的路線是從 A 站出發，途經 B、C 兩站，最後抵達 D 站，則 num_stops 會傳回 3。
TransitLine物件常值:
* name:大眾運輸路線的全名
* short_name:大眾運輸路線的簡稱。通常是一個路線編號，例如「板南線」或「237」
* agencies:TransitAgency
TransitAgency物件常值:
* name:運輸公司的名稱
* phone:運輸公司的電話號碼
* url:運輸公司的網址
* icon:這條路線相關圖示的網址
* color:這條路線常用的顏色
* text_color:這條路線常用的文字顏色
* vehicle:Vehicle
Vehicle物件常值:
* name:這條路線的交通工具名稱
* type:這條路線使用的VehicleType
* icon:此交通工具類型常用圖示的網址
* local_icon:此交通工具類型相關圖示的網址
VehicleType:
* VehicleType.RAIL 火車。
* VehicleType.METRO_RAIL 輕軌電車運輸。
* VehicleType.SUBWAY 地下輕軌電車。
* VehicleType.TRAM 地上輕軌電車。
* VehicleType.MONORAIL 單軌電車。
* VehicleType.HEAVY_RAIL 重軌電車。
* VehicleType.COMMUTER_TRAIN 通勤鐵路。
* VehicleType.HIGH_SPEED_TRAIN 高速火車。
* VehicleType.BUS 公車。
* VehicleType.INTERCITY_BUS 城際巴士。
* VehicleType.TROLLEYBUS 無軌電車。
* VehicleType.SHARE_TAXI 共乘計程車可視為一種公車，可供乘客沿路任意上下車。
* VehicleType.FERRY 渡輪。
* VehicleType.CABLE_CAR 靠電纜運作的交通工具，通常在地面上行駛。空中纜車可視為 VehicleType.GONDOLA_LIFT 類型。
* VehicleType.GONDOLA_LIFT 空中纜車。
* VehicleType.FUNICULAR 靠電纜從陡坡往上拉升的交通工具。纜索鐵路通常由兩個車廂組成，兩個車廂彼此保持平衡。
* VehicleType.OTHER 所有其他交通工具都會傳回這個類型。
### 距離矩陣
https://developers.google.com/maps/documentation/javascript/distancematrix?hl=zh-tw
https://developers.google.com/maps/documentation/javascript/reference/distance-matrix?hl=zh-tw
計價策略:傳送至距離矩陣服務的每筆查詢都有可用元素數量上限，其中「起點」數量乘以「目的地」數量就等於元素數量
### 地點搜尋(五種)
https://developers.google.com/maps/documentation/javascript/places?hl=zh-tw#place_searches
### 1.透過查詢尋找地點
### 2.透過電話號碼尋找地點
### 3.搜尋附近
呼叫服務方式
```javascript=
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
```
Input:
1. location相關
* bounds:矩形搜尋區域
* location:當rankBy以DISTANCE為優先級時，必須指定，但無法指定radius或bounds
* radius:圓心以50000m以內
2. keyword:字詞比對
3. minPriceLevel、maxPriceLevel:介於0(便宜)~4(昂貴)
4. openNow:現在是否營業中
5. rankBy:結果排列順序
* google.maps.places.RankBy.PROMINENCE(預設)(須提供radius)
* google.maps.places.RankBy.DISTANCE(須提供location)
6. type:符合指定類型的地點，只能擇一
return:
* google.maps.places.PlacesServiceStatus
* INVALID_REQUEST 無效要求
* OK 有效要求
* OVER_QUERY_LIMIT 超出配額
* REQUEST_DENIED 拒絕使用
* UNKNOWN_ERROR 伺服器錯誤
* ZERO_RESULTS 查無結果
```javascript=
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
```
* PlaceResult物件陣列(部分)
* business_status 營業狀態
* OPERATIONAL 營業中
* CLOSED_TEMPORARILY 非營業時間
* CLOSED_PERMANENTLY 永久停業
* formatted_address 只有搜尋文字會回傳
* geometry 地理位置
* location 經緯度
* viewport 優先使用可視區域
* plus_code 用經緯度表示區域
* name 地點名稱
* opening_hours 營業時間
* place_id
* types 可能有多個值
* vicinity 簡化地址
### 4.搜尋文字
### 5.Place Details 要求
基本上跟路線規劃很像
Sign in with Wallet
Connect another wallet