Embed Size (px)
Citation preview
COM実験 演習問題
2014年7月10日(木）
山口高平
目次 • はじめに • 演習問題１ • 演習問題２ • 演習問題２
• 演習問題ソースコード – http://www.yamaguti.comp.ae.keio.ac.jp/com2014/2014年CO
M実験_演習問題ソースコード.zip
はじめに
• 演習を通じてHTMLやJavascriptの理解を深めてもらいます • 基本的なところに不安がある人は下を参照してください
– http://www.yamaguti.comp.ae.keio.ac.jp/com実験/com2014/javascript_sample/index.html
• 演習問題の解答のhtmlファイルはレポート課題とともに提出してもらいます
• わからないことがあったら積極的に手を挙げて質問をしてください
演習問題１
• 「次へ」ボタンをクリックすると，画像１→２→３→４の順に表示が変わり，「前へ」ボタンをクリックすると，画像４→３→2→１の順に表示が変わるようにせよ – 画像１が表示された状態で「前へ」ボタンを押した場合
は「画像１」を，画像４が表示された状態で「次へ」ボタンを押した場合は「画像４」を表示すること
1.jpg (画像１） 2.jpg (画像2） 3.jpg (画像3） 4.jpg (画像4）
次へ 次へ 次へ
前へ 前へ 前へ
次へ 前へ
演習問題１
<img src="images/1.png" id="image" alt=“number”> <br> <input value=“前へ” > <input value=“次へ” >
var image_num = 1; function goNext() {
if ( ) { document.getElementById("image").src = }
} function goBack() {
if ( ) { document.getElementById("image").src = }
}
条件1
条件2
式1
式2
文字列1
文字列1
JavaScript
HTML
イベント処理１
イベント処理２
タイプ１
タイプ１
演習問題２
• リストボックスの要素を画像１～４とし，選択された画像を表示するようにせよ
画像１
画像２
画像３
画像４
リストボックス
演習問題２
<select id=“listbox“ > <option value=“value1” >画像1</option> <option value=“value2” >画像2</option> <option value=“value3” >画像3</option> <option value=“value3” >画像4</option> </select> <img src=“images/1.jpg” id=“image0“ alt=“number1”> <img src=“images/2.jpg” id=“image1“ alt=“number2”> <img src=“images/3.jpg” id=“image2“ alt=“number3”> <img src=“images/4.jpg” id=“image3“ alt=“number4”>
function showImages() { var listbox = for (i = 0; i < i++) { var img = if ( ) { } else { } }
}
JavaScript
HTML
スタイルシート１ スタイルシート１ スタイルシート１ スタイルシート１
イベント処理１ オプション１
リストボックスオブジェクトを得る リストボックスの要素数
img要素のオブジェクトを得る
式１
式２
条件1
演習問題３
• 「並べ替え」ボタンをクリックすると，画像１〜４の順番がランダムに並び替えられるようにせよ．
• 次に紹介する配列のランダム並び替え（シャッフル）を活用するとよい．
並べ変え
演習問題３ 配列並び替え
//配列arrayの定義 var array= [“1.jpg”,“2.jpg”,“3.jpg”,“4.jpg”]; //配列arrayのシャッフル array.sort( function() { return Math.random() - 0.5; } );
[配列名].sort()→配列を並べ替える関数 Math.random()→０～1の間の乱数を生成する ※今回はゲームを作れることが優先なので，中身を完璧に理解せずとも，このような機能を積極的に活用しましょう．
演習問題３ 穴埋め
<img src="images/1.jpg" id="image0" alt="number1"> <img src="images/2.jpg" id="image1" alt="number2"> <img src="images/3.jpg" id="image2" alt="number3"> <img src="images/4.jpg" id="image3" alt="number4"> <input type=“button” value=“並べ替え” ”>
var array= ["1.jpg","2.jpg","3.jpg","4.jpg"]; function shuffle() {
array.sort( function() { return Math.random() - 0.5; }
); for (i = 0; i < array.length; i++) { var img = document.getElementById("image"+i).src= }
}
JavaScript
HTML
文字列＋配列要素
イベント処理１
レポート課題の説明
テーマ l インタラクティブなゲームの作成
l アドベンチャーゲーム，クイズゲーム、 パズルゲームなど
l 注意点 l 分岐のあるシナリオ（決定木）を作成すること l CSSとJavaScriptを必ず使用すること
l 動作確認を必ずすること
●シナリオ（決定木）の例
レポートの提出 l メール宛先
l To： [email protected] l メールのsubject
l 学籍番号_氏名_COM実験 l 学籍番号，アンダーバー，「COM」は必ず半角にすること
l メールの本文 l メインのhtmlファイル名を明記
l 添付すべきファイル l wordファイル(レポート本文)
l ２～３枚程度 l ファイル名はメールのsubjectと同様にすること
l 作成したHTMLファイル（授業内で作成した演習問題のファイルも含む），CSSファイル，JavaScriptファイルや画像ファイルをzipファイルにまとめて提出 l zip名は「学籍番号_氏名.zip」 ※「＿」は半角
レポートの内容 l ゲームのタイトルと概要 l ソースコードの簡単な説明 l シナリオ
l 各シーンについて，ユーザがどの選択を行った時に，どのシーンに移動するかを説明すること
l 工夫した点 l CSSによるデザイン性
l JavaScriptによる動作性 l 入力値チェック，出力方法（Table表示など），イベント処理
（onclickなど）の利用，セレクトボックスのmultiple選択，チェックボックスのcheck数をカウントなど
l 感想
