Webページで学ぶJavaScript2013 第7回

554 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
554
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Webページで学ぶJavaScript2013 第7回

  1. 1. Webページで学ぶ JavaScript 2013 第7回 tyage@KMC 7/2
  2. 2. こんばんは〜〜〜 もう、7月なんですね
  3. 3. 先週やったこと ● jQueryでプロフィールページ作ってみたり
  4. 4. 今日の予定 ● Ajaxをしましょう ● ついでにHTTP通信についてもちょっとだけ じゃあさっそく行ってみましょうか
  5. 5. JavaScriptで HTTP通信がしたい ● ブラウザ上のJavaScriptにもHTTP通信機能が 備わっており、俗にAjaxと言われています ● ブラウザ上で非同期なHTTP通信を行うことがで きて便利
  6. 6. HTTP通信? ● 僕達は、ブラウザとWebサーバーがHTTP通信 をすることでWebページを見ています ● 「http://ほげほげ〜〜」みたいなのはHTTP通 信するための宣言になってる ● Dev Toolsのネットワークタブを見てみよう!
  7. 7. よくある図 (´・ω・`)  / つ/ ̄ ̄ ̄/     ̄ ̄\/___/ 人間 ブラウザ KMCのWebサーバ
  8. 8. よくある図 (´・ω・`)  / つ/ ̄ ̄ ̄/     ̄ ̄\/___/ 人間 ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/
  9. 9. よくある図 (´・ω・`)  / つ/ ̄ ̄ ̄/     ̄ ̄\/___/ 人間 ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/ HTTPリクエストが 送られる GET / HTTP/1.1 ....
  10. 10. よくある図 (´・ω・`)  / つ/ ̄ ̄ ̄/     ̄ ̄\/___/ 人間 ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/ HTTPリクエストが 送られる GET / HTTP/1.1 .... Responseが帰って くる HTTP/1.1 200 OK ... <!DOCTYPE html> <html> ...
  11. 11. よくある図 (´・ω・`)  / つ/ ̄ ̄ ̄/     ̄ ̄\/___/ 人間 ブラウザ KMCのWebサーバ URLに http://kmc.gr.jp/ HTTPリクエストが 送られる GET / HTTP/1.1 .... Responseが帰って くる HTTP/1.1 200 OK ... <!DOCTYPE html> <html> ... Responseを解析 して表示
  12. 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. 13. Ajax ● JavaScriptではXMLHttpRequestというオブ ジェクトを使用すればHTTP通信ができます ● ただし、Same Origin Policyというセキュリティ上 の制約により、通信できない場合も ○ 同一ドメイン(正確にはオリジン)上での通信はOK ○ 異なるオリジンの場合は、サーバー側が許可していれば 通信できる
  14. 14. なんか書いてみよう ● XMLHttpRequest使ってもいいんですが、と面 倒くさいのでjQueryの機能を使いましょう ● http://api.jquery.com/category/ajax/
  15. 15. 使用例 @pastak君が作った「MOCO'Sキッチンオリーブオ イルAPI」を使用します date=の後に日付を入れるとその日のMOCO'Sキッ チンでのオリーブオイル使用量がわかる! http://pastak.cosmio. net/mocoDB/oliveAPI/getJson.php? date=2013-01-15 JSON形式で提供されているのでgetJSONが使える
  16. 16. 使用例 $.getJSON( "http://pastak.cosmio.net/mocoDB/oliveAPI/ getJson.php?date=2013-01-15", function(recipes) { console.log(recipes); } );
  17. 17. 補足 今回もjQueryを使っているので <script src="jquery.js"></script> としてjQueryのファイルを読み込みましょう また、私達が編集するJavaScriptファイルでは以下のように記述 するとよいです $(function() { // ここにプログラムを書く });
  18. 18. JavaScriptオブジェクト さっきのスクリプトで帰って来たのはオブジェクト(キーを使って 値を取ってこれるもの)です object.keyもしくはobject["key"]でプロパティを取得 recipes["2013-01-15"]でその日のレシピが取得できます ※recipes.2013-01-15はrecipes.2013 - 01 - 15となりエラー
  19. 19. JavaScriptオブジェクト var obj = { "2013-01-15": { menu: "今日のご飯", thumb: "サムネイルのURI" } }; obj["2013-01-15"] => {menu: "今日のご飯", thumb: "サムネイルのURI"}
  20. 20. JavaScriptオブジェクト for ... in構文 var key; for (key in obj["2013-01-15"]) { console.log(key); } => menu thumb
  21. 21. JavaScriptオブジェクト for ... in構文 var key; for (key in obj["2013-01-15"]) { console.log(obj["2013-01-15"][key]); } => "今日のご飯" "サムネイルのURI"
  22. 22. 使用例 $.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要素を作っておこう)
  23. 23. お疲れ様でした ● 今回作ったものは以下へアップロードしましょう ○ https://www.kmc.gr.jp/~tyage/uploader/ ● 次回は来週です

×