JavaScript Basic For 6 Weeks（4/6)

介紹 JavaScript Array, Object, JSON...

Transcript

1. JavaScript Basic Rails Girls Weekly 2015-10-08 @ 五倍紅寶⽯石出礦坑 Speaker: Win Wu Week 4
2. Agenda ๏ Array 陣列 ๏ Object 物件 ๏ JSON
3. Array 陣列 陣列在 JavaScript 是⼀一種資料型態
4. Array 陣列 陣列讓我們把很多資料⼀一次存在同⼀一個變數裡 建⽴立 Array 的⽅方式可以 ⽤用 Array Literal 或是 new Array () 的⽅方式 較不建議使⽤用 new Array() 的⽅方式，參考: http://www.w3schools.com/js/js_arrays.asp
5. Array 陣列 每個資料都要以 , 隔開，並且⽤用 [ ] 中括號把資料包起來 var arrayName = [item1, item2, ...]; Array Literal
6. Array 陣列 ⽤用 new 關鍵字去建⽴立⼀一個 Array var arrayName = new Array(item1, item2); new Array()
7. Array 陣列 http://jsbin.com/ginepuyubu/edit?js,console,output 兩種建⽴立 Array 的⽅方式範例:
8. Array 陣列 取得陣列的某個值 注意 JavaScript 的 index 是從 0 開始算哦 ! arrayName[第幾個];
9. Array 陣列 更改陣列的某個值 arrayName[第幾個] = 新的值;
10. Array 陣列 得知陣列有幾個項⺫⽬目 arrayName.length
11. Array 陣列
12. Array 陣列總結 • 記住 Array 的 index 是從 0 開始 • 要注意陣列是⽤用 [ ] 包起來 • 陣列可以使⽤用的⽅方法(method)很多，像是 map, join,
 push, pop, reduce, reverse, slice, shift,
 toString …
13. Object 物件 { } 物件在 JavaScript 是⼀一種資料型態 我們⽤用⼤大括弧來表⽰示
14. Object 物件 var objectName = { }; 宣告⼀一個變數型態為 Object 會像這樣:
15. Object 物件 物件是什麼?!
16. Object 物件 真實世界中的物件，⽐比⽅方說⾞車⼦子，就是⼀一個物件。
17. Object 物件 var car = { };
18. Object 物件 var car = { }; 我們需要為這台⾞車⼦子描述更多關於他本⾝身的事情 讓這個物件的變數更加有意義。
19. Object 物件 觀察這台⾞車⼦子的『屬性』 • 顏⾊色 • 品牌 • 最⼤大⾺馬⼒力 • 排氣量 • ⻑⾧長 • 寬 • ⾼高 • ⾞車重 • …
20. Object 物件 觀察這台⾞車⼦子的『⽅方法』 • 發動 • 煞⾞車 • 熄⽕火 • 刷⾬雨刷 • …
21. Object 物件 表達這個物件的『屬性』跟『⽅方法』 將屬性跟⽅方法的定義放在 { } 裡⾯面 並且要⽤用 key : value 的⽅方式定義 每組 『key:value』要⽤用 『,』 隔開
22. Object 物件 ⽤用程式表達這個⾞車⼦子物件的『屬性』跟『⽅方法』 Practice: 屬性名稱 (Property) 屬性值 color red type Microcar age 2
23. Object 物件
24. 取得物件的屬性值 有兩種⽅方法可以存取物件的屬性值: (1) objectName.propertyName (2) objectName[“propertyName"] 例如: 取得 car 的 color 屬性值:
25. 取得/呼叫物件的⽅方法 呼叫物件的⽅方法: objectName.methodName() objectName.methodName 取得物件的⽅方法 (定義):
26. 定義物件的⼀一種⽅方式 ⽤用⼤大括弧{ }， 並且使⽤用⼀一串⽤用逗號,分隔的 key:value 對組 所定義物件的⽅方式叫做物件字⾯面值 (Object Literal)
27. 物件總結 • key 不能重複使⽤用 • value 可以是各種型別的值 (Boolean, string, integer, object, function…) • 定義物件的三種⽅方式: • 物件字⾯面值 (Object Literal) • 使⽤用 new 關鍵字建⽴立物件 • ECMAScript5 的 Object.create() http://jsbin.com/pewefifula/edit?js,console
28. Array 跟 Object 有什麼不同? Array is numbered index. Object is named index.
29. JSON JavaScript Object Notation 是由 Douglas Crockford 構想設計的 輕量級資料交換語⾔言格式。
30. JSON JSON 是獨⽴立於語⾔言的⽂文字格式。 JSON 也使⽤用於其他程式語⾔言，⼤大部份與網⾴頁開 發相關的語⾔言都有 JSON 函式庫 (像是 php 的 json_encode, json_decode)。
31. JSON 常⾒見的使⽤用情境 ⼀一般 JSON 在 web 開發上常⽤用來做前後端的資料交 換，前端發送 Request 給後端請求資料 (通常透過 AJAX)，不論是取得或是發送的資料格式都可以使 ⽤用 JSON 資料格式 (先約定)，接著就可以解析 JSON 格式裡的資料做資料呈現等等。 如果你會使⽤用 jQuery 的話，getJSON 跟 parseJSON 都是常⽤用的解讀函式。
32. JSON 常⾒見的應⽤用 • 存取 API • Single Page Application (AJAX ⾴頁⾯面) http://www.w3schools.com/js/js_json.asp
33. 如何建⽴立 JSON 字串 http://www.w3schools.com/js/js_json.asp • JSON 字串可以包含陣列 Array 或是物件 Object • 陣列可以⽤用 [ ] 來寫⼊入資料 • 物件可以⽤用 { } 來寫⼊入資料，每組 "key" : "value" ⽤用 , 區隔。名稱／值（collection）：名稱和值之間使⽤用 「:」隔開，⼤大致上跟我們平常寫 Object ⼀一樣的格式， 只是內容都是字串。
34. http://www.json-generator.com/ JSON 格式範例 JSON 格式檢查 http://jsonlint.com/ • JSON 格式沒有註解，他不是程式語⾔言，他只是⼀一種資料交換格式 • 如果想要將 JSON 格式的資料獨⽴立在⼀一隻檔案裡，副檔名為 .json
35. javascript 如何解讀 JSON http://www.w3schools.com/js/js_json.asp • JSON 格式轉 object物件來操作 : • JSON.parse (JSON格式資料) • 會回傳給你陣列或是物件 • Object 轉成 JSON 字串格式 : • JSON.stringify (object) • 將 JavaScript 值轉換成以 JavaScript 物件標 記法 (JSON) 表⽰示的字串。 week4/index.html
36. 遇到瀏覽器不⽀支援 JSON? 找 json2.js https://github.com/douglascrockford/JSON-js
37. • http://www.w3schools.com/js/js_objects.asp • http://blog.wu-boy.com/2011/04/%E4%BD%A0%E4%B8%8D %E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-json- %E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9/ • http://www.json.org/json-zh.html • http://www.json.org/ • https://msdn.microsoft.com/zh-tw/library/cc836466(v=vs. 94).aspx Reference
38. Thank you :D