Download presentation
Presentation is loading. Please wait.
1
オペレーティングシステムⅡ 第３回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/10/16
2
本日の内容（WebAPI） 前回の宿題について JavaScript とは ダイナミック HTML とは
課題： JavaScript・DHTML を用いた Web ページの作成 2009/10/16
3
前回の宿題 まずは「WebAPI」でググって Web API にどんなものがあるか調べる
そのうえで「これとこれを組み合わせたらこんなサービスができるのでは？」というアイディアを２～３個提案しなさい 実現可能性は無視してよい 2009/10/16
4
前回の宿題について 面白いアイディアがいっぱい提案された。 次は、各 API の入力データと出力データを意識して連携を考えてみよう。
今後もアイディアがひらめいたらメモしておこう。 2009/10/16
5
アイディア【修正前】 Googleマップ 価格.com 欲しい商品を最低価格で販売しているお店の場所を地図上で教えてくれるサービス
2009/10/16
6
店の情報が無い ・・・ 2009/10/16
7
アイディア【修正後】 価格.com 商品検索 API ＋ 価格.com 掲示板情報取得 API ＋ Yahoo! テキスト解析Web API ＝ 欲しい商品を検索するとその評判情報を商品ごとに まとめて表示してくれるサービス 「価格.com 商品検索 API」で検索キーワードから 商品のプロダクトID を取得 「価格.com 掲示板情報取得 API」で商品のプロダクトID から クチコミ内容を取得 「Yahoo! テキスト解析Web API」でクチコミ内容から キーフレーズを取得 プロダクトID ごとにグループ分けしてキーフレーズを表示 2009/10/16
8
JavaScript とは？ HTML 内に埋め込めるオブジェクト指向 スクリプト言語。 Java とは別物。
コンパイル不要。 テキストエディタで書いてブラウザで 読み込むだけ。お手軽。 一方「コンパイルエラー」が出ないので デバッグが難しいことも。 2009/10/16
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> 2009/10/16
10
2009/10/16
11
JavaScript 部分を 外部ファイルにする方法
HTML ファイル JavaScript ファイル 拡張子は .js にする タグが含まれていてはいけない <script src="XXXXXXXX" type="text/javascript"> </script> 2009/10/16
12
ダイナミック HTML とは HTML をクライアント側で動的に更新する仕組み。 JavaScriptを利用して実現する。
2009/10/16
13
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> 2009/10/16
14
2009/10/16
15
課題：JavaScript・DHTML を用いた Web ページの作成
ボタンを押したら・・・ どんなことが起こったらおもしろい？ テキストが切り替わる？ 背景色＆文字色が変わる？ 現在時刻によって異なる画像が表示される？ 画像が交互に（クリックするたび）切り替わる？ ・・・・・・など、 JavaScript の簡単なサンプルを複数組み合わせて、 楽しい変化が起こるページを自由に作ってみよう。 2009/10/16
16
2009/10/16
17
作品の提出方法 作品には、簡単な説明を書いておくこと。 Xythos にアップロードすれば外部から見られる？
公開できなかったらメール添付で。 提出期限：12月末くらい（作品制作の選択者のみ） 2009/10/16
Similar presentations
