1 / 17

オペレーティングシステム Ⅱ 第３回

講師　松本 章代. オペレーティングシステム Ⅱ 第３回. 本日の内容（ WebAPI ）. 前回の宿題について JavaScript とは ダイナミック HTML とは 課題： JavaScript ・ DHTML を用いた Web ページの作成. 前回の宿題. まずは「 WebAPI 」でググって Web API にどんなものがあるか調べる そのうえで「これとこれを組み合わせたらこんなサービスができるのでは？」というアイディアを２～３個提案しなさい 実現可能性は無視してよい. 前回の宿題について. 面白いアイディアがいっぱい提案された。

alaric
Download Presentation

オペレーティングシステム Ⅱ 第３回

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 講師　松本 章代 オペレーティングシステムⅡ第３回

  2. 本日の内容（WebAPI） • 前回の宿題について • JavaScript とは • ダイナミック HTML とは • 課題：JavaScript・DHTML を用いた Web ページの作成

  3. 前回の宿題 • まずは「WebAPI」でググって Web API にどんなものがあるか調べる • そのうえで「これとこれを組み合わせたらこんなサービスができるのでは？」というアイディアを２～３個提案しなさい • 実現可能性は無視してよい

  4. 前回の宿題について • 面白いアイディアがいっぱい提案された。 • 次は、各 API の入力データと出力データを意識して連携を考えてみよう。 • サイトにある情報すべてが API で提供されているとは限らない。 • 今後もアイディアがひらめいたらメモしておこう。

  5. アイディア【修正前】 Googleマップ 価格.com • 欲しい商品を最低価格で販売しているお店の場所を地図上で教えてくれるサービス

  6. 店の情報が無い・・・

  7. アイディア【修正後】 価格.com 商品検索 API ＋ 価格.com 掲示板情報取得 API ＋ Yahoo! テキスト解析Web API ＝欲しい商品を検索するとその評判情報を商品ごとにまとめて表示してくれるサービス • 「価格.com 商品検索 API」で検索キーワードから商品のプロダクトID を取得 • 「価格.com 掲示板情報取得 API」で商品のプロダクトID からクチコミ内容を取得 • 「Yahoo! テキスト解析Web API」でクチコミ内容からキーフレーズを取得 • プロダクトID ごとにグループ分けしてキーフレーズを表示

  8. JavaScript とは？ • HTML 内に埋め込めるオブジェクト指向スクリプト言語。 • Java とは別物。 • コンパイル不要。テキストエディタで書いてブラウザで読み込むだけ。お手軽。 • 一方「コンパイルエラー」が出ないのでデバッグが難しいことも。

  9. JavaScript の記述例 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>アラートのサンプル</title> <script type="text/javascript"> <!-- function eventAlert() { window.alert("DANGER!") } //--> </script> </head> <body> <h1>クリックすると・・・</h1> <form> <input type="button" value="OK" onClick="eventAlert()"> </form> </body> </html>

  10. JavaScript 部分を外部ファイルにする方法 • HTML ファイル • JavaScript ファイル • 拡張子は .js にする • タグが含まれていてはいけない <script src="XXXXXXXX" type="text/javascript"> </script>

  11. ダイナミック HTML とは • HTML をクライアント側で動的に更新する仕組み。 • JavaScriptを利用して実現する。

  12. DHTML の記述例 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>DHTML のサンプル</title> <script type="text/javascript"> <!-- function changeImage() { document.getElementById("IMG").setAttribute("src","2.jpg") } //--> </script> </head> <body> <h1>クリックすると・・・</h1> <img src="1.jpg" id="IMG"> <form> <input type="button" value="OK" onClick="changeImage()"> </form> </body> </html>

  13. 課題：JavaScript・DHTML を用いた Web ページの作成 ボタンを押したら・・・どんなことが起こったらおもしろい？ • テキストが切り替わる？ • 背景色＆文字色が変わる？ • 現在時刻によって異なる画像が表示される？ • 画像が交互に（クリックするたび）切り替わる？ ・・・・・・など、 JavaScript の簡単なサンプルを複数組み合わせて、 楽しい変化が起こるページを自由に作ってみよう。 http://www.sumnet.ne.jp/domp/jsbs/

  14. 作品の提出方法 • 作品には、簡単な説明を書いておくこと。 • Xythos にアップロードすれば外部から見られる？ • 公開できなかったらメール添付で。 • 提出期限：12月末くらい（作品制作の選択者のみ）

More Related