Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Basic For 6 Weeks(4/6)
Search
winwu
October 07, 2015
Programming
0
730
JavaScript Basic For 6 Weeks(4/6)
介紹 JavaScript Array, Object, JSON...
winwu
October 07, 2015
Tweet
Share
More Decks by winwu
See All by winwu
Google Data Studio 分享
winwu
0
110
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
97
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
310
Google Analytics 分享 1 - 基礎知識篇
winwu
0
350
HTML_CSS_前端基礎講座-4.pdf
winwu
0
430
HTML/CSS 前端基礎講座-3
winwu
0
460
HTML/CSS 前端基礎講座-2
winwu
0
480
2016 HTML CSS 前端基礎講座-1
winwu
1
560
2016 中正大學 weic.tw - RWD
winwu
3
990
Other Decks in Programming
See All in Programming
Hack Claude Code with Claude Code
choplin
4
2k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
ニーリーにおけるプロダクトエンジニア
nealle
0
830
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
AIともっと楽するE2Eテスト
myohei
6
2.6k
XP, Testing and ninja testing
m_seki
3
240
PipeCDのプラグイン化で目指すところ
warashi
1
270
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Language of Interfaces
destraynor
158
25k
Designing Experiences People Love
moore
142
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Why Our Code Smells
bkeepers
PRO
336
57k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Building Applications with DynamoDB
mza
95
6.5k
Transcript
JavaScript Basic Rails Girls Weekly 2015-10-08 @ 五倍紅寶⽯石出礦坑 Speaker: Win
Wu Week 4
Agenda ๏ Array 陣列 ๏ Object 物件 ๏ JSON
Array 陣列 陣列在 JavaScript 是⼀一種資料型態
Array 陣列 陣列讓我們把很多資料⼀一次存在同⼀一個變數裡 建⽴立 Array 的⽅方式可以 ⽤用 Array Literal 或是
new Array () 的⽅方式 較不建議使⽤用 new Array() 的⽅方式,參考: http://www.w3schools.com/js/js_arrays.asp
Array 陣列 每個資料都要以 , 隔開,並且⽤用 [ ] 中括號把資料包起來 var arrayName
= [item1, item2, ...]; Array Literal
Array 陣列 ⽤用 new 關鍵字去建⽴立⼀一個 Array var arrayName = new
Array(item1, item2); new Array()
Array 陣列 http://jsbin.com/ginepuyubu/edit?js,console,output 兩種建⽴立 Array 的⽅方式範例:
Array 陣列 取得陣列的某個值 注意 JavaScript 的 index 是從 0 開始算哦
! arrayName[第幾個];
Array 陣列 更改陣列的某個值 arrayName[第幾個] = 新的值;
Array 陣列 得知陣列有幾個項⺫⽬目 arrayName.length
Array 陣列
Array 陣列總結 • 記住 Array 的 index 是從 0 開始
• 要注意陣列是⽤用 [ ] 包起來 • 陣列可以使⽤用的⽅方法(method)很多,像是 map, join, push, pop, reduce, reverse, slice, shift, toString …
Object 物件 { } 物件在 JavaScript 是⼀一種資料型態 我們⽤用⼤大括弧來表⽰示
Object 物件 var objectName = { }; 宣告⼀一個變數型態為 Object 會像這樣:
Object 物件 物件是什麼?!
Object 物件 真實世界中的物件,⽐比⽅方說⾞車⼦子,就是⼀一個物件。
Object 物件 var car = { };
Object 物件 var car = { }; 我們需要為這台⾞車⼦子描述更多關於他本⾝身的事情 讓這個物件的變數更加有意義。
Object 物件 觀察這台⾞車⼦子的『屬性』 • 顏⾊色 • 品牌 • 最⼤大⾺馬⼒力 •
排氣量 • ⻑⾧長 • 寬 • ⾼高 • ⾞車重 • …
Object 物件 觀察這台⾞車⼦子的『⽅方法』 • 發動 • 煞⾞車 • 熄⽕火 •
刷⾬雨刷 • …
Object 物件 表達這個物件的『屬性』跟『⽅方法』 將屬性跟⽅方法的定義放在 { } 裡⾯面 並且要⽤用 key :
value 的⽅方式定義 每組 『key:value』要⽤用 『,』 隔開
Object 物件 ⽤用程式表達這個⾞車⼦子物件的『屬性』跟『⽅方法』 Practice: 屬性名稱 (Property) 屬性值 color red type
Microcar age 2
Object 物件
取得物件的屬性值 有兩種⽅方法可以存取物件的屬性值: (1) objectName.propertyName (2) objectName[“propertyName"] 例如: 取得 car 的
color 屬性值:
取得/呼叫物件的⽅方法 呼叫物件的⽅方法: objectName.methodName() objectName.methodName 取得物件的⽅方法 (定義):
定義物件的⼀一種⽅方式 ⽤用⼤大括弧{ }, 並且使⽤用⼀一串⽤用逗號,分隔的 key:value 對組 所定義物件的⽅方式叫做物件字⾯面值 (Object Literal)
物件總結 • key 不能重複使⽤用 • value 可以是各種型別的值 (Boolean, string, integer,
object, function…) • 定義物件的三種⽅方式: • 物件字⾯面值 (Object Literal) • 使⽤用 new 關鍵字建⽴立物件 • ECMAScript5 的 Object.create() http://jsbin.com/pewefifula/edit?js,console
Array 跟 Object 有什麼不同? Array is numbered index. Object is
named index.
JSON JavaScript Object Notation 是由 Douglas Crockford 構想設計的 輕量級資料交換語⾔言格式。
JSON JSON 是獨⽴立於語⾔言的⽂文字格式。 JSON 也使⽤用於其他程式語⾔言,⼤大部份與網⾴頁開 發相關的語⾔言都有 JSON 函式庫 (像是 php
的 json_encode, json_decode)。
JSON 常⾒見的使⽤用情境 ⼀一般 JSON 在 web 開發上常⽤用來做前後端的資料交 換,前端發送 Request 給後端請求資料
(通常透過 AJAX),不論是取得或是發送的資料格式都可以使 ⽤用 JSON 資料格式 (先約定),接著就可以解析 JSON 格式裡的資料做資料呈現等等。 如果你會使⽤用 jQuery 的話,getJSON 跟 parseJSON 都是常⽤用的解讀函式。
JSON 常⾒見的應⽤用 • 存取 API • Single Page Application (AJAX
⾴頁⾯面) http://www.w3schools.com/js/js_json.asp
如何建⽴立 JSON 字串 http://www.w3schools.com/js/js_json.asp • JSON 字串可以包含陣列 Array 或是物件 Object
• 陣列可以⽤用 [ ] 來寫⼊入資料 • 物件可以⽤用 { } 來寫⼊入資料,每組 "key" : "value" ⽤用 , 區隔。名稱/值(collection):名稱和值之間使⽤用 「:」隔開,⼤大致上跟我們平常寫 Object ⼀一樣的格式, 只是內容都是字串。
http://www.json-generator.com/ JSON 格式範例 JSON 格式檢查 http://jsonlint.com/ • JSON 格式沒有註解,他不是程式語⾔言,他只是⼀一種資料交換格式 •
如果想要將 JSON 格式的資料獨⽴立在⼀一隻檔案裡,副檔名為 .json
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
遇到瀏覽器不⽀支援 JSON? 找 json2.js https://github.com/douglascrockford/JSON-js
• 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
Thank you :D