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

Preview:

DESCRIPTION

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

Citation preview

講師 松本 章代講師 松本 章代

2009/10/16 1

前回の宿題についてJavaScript とはダイナミック HTML とは課題:JavaScript ・ DHTML を用いた Web ページの作成

2009/10/16 2

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

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

Recommended