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