Download as PDF, PPTX
![JavaScriptオブジェクト
さっきのスクリプトで帰って来たのはオブジェクト（キーを使って
値を取ってこれるもの）です
object.keyもしくはobject["key"]でプロパティを取得
recipes["2013-01-15"]でその日のレシピが取得できます
※recipes.2013-01-15はrecipes.2013 - 01 - 15となりエラー](https://image.slidesharecdn.com/webjavascript20137-130709091741-phpapp01/75/Web-JavaScript2013-7-18-2048.jpg)
![JavaScriptオブジェクト
var obj = {
"2013-01-15": {
menu: "今日のご飯",
thumb: "サムネイルのURI"
}
};
obj["2013-01-15"]
=> {menu: "今日のご飯", thumb: "サムネイルのURI"}](https://image.slidesharecdn.com/webjavascript20137-130709091741-phpapp01/75/Web-JavaScript2013-7-19-2048.jpg)
![JavaScriptオブジェクト
for ... in構文
var key;
for (key in obj["2013-01-15"]) {
console.log(key);
}
=>
menu
thumb](https://image.slidesharecdn.com/webjavascript20137-130709091741-phpapp01/75/Web-JavaScript2013-7-20-2048.jpg)
![JavaScriptオブジェクト
for ... in構文
var key;
for (key in obj["2013-01-15"]) {
console.log(obj["2013-01-15"][key]);
}
=>
"今日のご飯"
"サムネイルのURI"](https://image.slidesharecdn.com/webjavascript20137-130709091741-phpapp01/75/Web-JavaScript2013-7-21-2048.jpg)
![使用例
$.getJSON(
"http://pastak.cosmio.net/mocoDB/oliveAPI/getJson.php?date=2013-01-
15",
function(recipes) {
for (var key in recipes) {
var recipe = recipes[key];
$("h1").text(recipe.menu);
$("img").attr("src", recipe.thumb);
}
}
);
（HTML側にh1とimg要素を作っておこう）](https://image.slidesharecdn.com/webjavascript20137-130709091741-phpapp01/75/Web-JavaScript2013-7-22-2048.jpg)
More Related Content
![HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]](https://cdn.slidesharecdn.com/ss_thumbnails/html5etc005s2-130606051334-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Webページで学ぶJavaScript2013 第7回
- 1.
- 2.
- 3.
- 4.
- 5.
- 6. HTTP通信？ ● 僕達は、ブラウザとWebサーバーがHTTP通信 をすることでWebページを見ています ● 「http://ほげほげ〜〜」みたいなのはHTTP通 信するための宣言になってる ●Dev Toolsのネットワークタブを見てみよう！
- 7. よくある図 (´・ω・｀) / つ/￣￣￣/ ￣￣＼/＿＿＿/ 人間ブラウザ KMCのWebサーバ
- 8. よくある図 (´・ω・｀) / つ/￣￣￣/ ￣￣＼/＿＿＿/ 人間ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/
- 9. よくある図 (´・ω・｀) / つ/￣￣￣/ ￣￣＼/＿＿＿/ 人間ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/ HTTPリクエストが 送られる GET / HTTP/1.1 ....
- 10. よくある図 (´・ω・｀) / つ/￣￣￣/ ￣￣＼/＿＿＿/ 人間ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/ HTTPリクエストが 送られる GET / HTTP/1.1 .... Responseが帰って くる HTTP/1.1 200 OK ... <!DOCTYPE html> <html> ...
- 11. よくある図 (´・ω・｀) / つ/￣￣￣/ ￣￣＼/＿＿＿/ 人間ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/ HTTPリクエストが 送られる GET / HTTP/1.1 .... Responseが帰って くる HTTP/1.1 200 OK ... <!DOCTYPE html> <html> ... Responseを解析 して表示
- 12. よくある図 (´・ω・｀) / つ/￣￣￣/ ￣￣＼/＿＿＿/ 人間ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/ HTTPリクエストが 送られる GET / HTTP/1.1 .... Responseが帰って くる HTTP/1.1 200 OK ... <!DOCTYPE html> <html> ... Responseを解析 して表示 ここでHTTP通信をしている
- 13. Ajax ● JavaScriptではXMLHttpRequestというオブ ジェクトを使用すればHTTP通信ができます ● ただし、SameOrigin Policyというセキュリティ上 の制約により、通信できない場合も ○ 同一ドメイン（正確にはオリジン）上での通信はOK ○ 異なるオリジンの場合は、サーバー側が許可していれば 通信できる
- 14.
- 15.
- 16.
- 17.
- 18.
- 19. JavaScriptオブジェクト var obj ={ "2013-01-15": { menu: "今日のご飯", thumb: "サムネイルのURI" } }; obj["2013-01-15"] => {menu: "今日のご飯", thumb: "サムネイルのURI"}
- 20. JavaScriptオブジェクト for ... in構文 varkey; for (key in obj["2013-01-15"]) { console.log(key); } => menu thumb
- 21. JavaScriptオブジェクト for ... in構文 varkey; for (key in obj["2013-01-15"]) { console.log(obj["2013-01-15"][key]); } => "今日のご飯" "サムネイルのURI"
- 22. 使用例 $.getJSON( "http://pastak.cosmio.net/mocoDB/oliveAPI/getJson.php?date=2013-01- 15", function(recipes) { for (varkey in recipes) { var recipe = recipes[key]; $("h1").text(recipe.menu); $("img").attr("src", recipe.thumb); } } ); （HTML側にh1とimg要素を作っておこう）
- 23.