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
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Applications with DynamoDB
mza
95
6.5k
Designing Experiences People Love
moore
142
24k
Optimizing for Happiness
mojombo
379
70k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fireside Chat
paigeccino
37
3.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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