第 4 回 COM 実験 JavaScript 演習 2017 年 6 月 15 日 ( 木 ) 山口高平
はじめに 開発環境の準備 JavaScriptの復習 演習問題の概要 演習問題 1 演習問題 2 演習問題 3 演習問題 4 演習問題 5 レポート課題の説明 目次
はじめに 演習を通じて HTML と JavaScript の理解を深めてもらいます HTML, CSS, JavaScript の基礎については,e- ビジネスソフトウェアの講義 演習資料を参照してください ドットインストールも参考になります http://dotinstall.com/lessons/basic_javascript_v2 演習問題の解答の html ファイルはレポート課題とともに提出してもらいます わからないことがあったら積極的に手を挙げて質問をしてください
HTML と CSS と JavaScript HTML CSS JavaScript 外部ファイル CSS JavaScript HTML Web ページの骨格のみを担当 表現力は紙の文書と同程度 CSS Web ページのデザインを担当 通常は HTML と組み合わせて用いる JavaScript Web ページを動的なものにする 通常は HTML と組み合わせて用いる
JavaScript 開発環境 Webブラウザ : Google Chrome テキストエディタ : Visual Studio Code https://code.visualstudio.com/download ドキュメント https://code.visualstudio.com/docs http://www.atmarkit.co.jp/ait/articles/1507/10/news028.html Windows 版の Zip archive をダウンロードして, Z ドライブ以下に保存して解凍してください. Code.exe から実行できます. 5
Visual Studio Code お薦めショートカット ショートカットキー 説明 Ctrl + P 指定したファイルに移動 Ctrl + Shift + P コマンド パレット ( 全機能が一覧できる ) を表示 (? でヘルプ ) Ctrl + Tab / Ctrl + Shift + Tab 最近利用したファイルに移動 Ctrl + 左クリック リンク先 (JSファイル,CSSファイル, 変数, 関数など ) を開く Ctrl + Shift + O シンボル ( 変数や関数など ) に移動 F12 変数や関数の定義場所に移動 F2 シンボル名 ( 変数名, 関数名, ファイル名など ) を変更 Ctrl + O / Ctrl + S ファイルを開く / ファイルを保存 Ctrl + 1 / Ctrl + 2 / Ctrl + 3 分割したエディタを左から順番にフォーカス Ctrl + / Ctrl + W エディタを分割 / エディタを閉じる Ctrl + F 開いているファイル内の検索 Ctrl + Shift + F フォルダ内のファイルを対象に検索 Ctrl + H 開いているファイル内の文字列置換 Shift + Alt + F コードをフォーマット F8 / Shift + F8 次 ( 前 ) のエラー 警告に移動 6
JavaScript コンソール起動方法 7
JavaScript コンソール起動方法 8
JavaScript の復習 JavaScriptの書き方 コンソールへの出力方法 変数 データ型 関数 document.body.innerhtml 文字列への変数の埋め込み 文字列を数値に変換する方法 document.getelementbyidメソッド イベント処理 ページが読み込まれた際のイベント処理 フォーム部品 テキストボックスの入力値の取得 配列 JSON
JavaScript の書き方 HTML ファイル内に書く方法 <head> タグ内に以下のように記述 <script> <!-- ここにスクリプトを書く //--> </script> 別のテキストファイルに書く方法 <script src=" ファイル名.js"></script> 10
コンソールへの出力方法 デバッグ用のコンソール出力メソッドを提供 Java の System.out.println メソッドに相当 Ruby の puts メソッドに相当 Filter アイコンからエラー, 警告, メッセージ ( 情報 ), ログの表示切替が可能 通常は,console.log を用いれば良い js-sample1.html, js/js-sample1.js consoleオブジェクトのメソッド console.log(message) console.info(message) console.warn(message) console.error(message) 説明 メッセージをコンソールに出力 情報アイコン付きでメッセージをコンソールに出力 警告アイコン付きでメッセージをコンソールに出力 エラーアイコン付きでメッセージをコンソールに出力 11
変数 データ型 ECMAScript6 からは let と const が追加された let: 再宣言不可 const: 再宣言と再代入不可 変数のスコープがvarと異なる 可能であれば,varよりもletとconstを利用すべき js-sample2.html, js/js-sample2.js 12
関数 再利用可能な JavaScript コードのかたまりに名前をつけたもの js-sample3.html, js/js-sample3.js 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法関数名 ( 引数 ); let num = 関数名 ( 引数 ); 13
document.body.innerhtml 要素.innerHTML: 要素内の HTML 文書を置き換える js-sample4.html, js/js-sample4.js, css/js-sample4.css const str = 'Hello, World'; document.body.innerhtml += `<p>${str}</p>`; document.body.innerhtml += `<p style='color: red;'>${str}</p>` 14
文字列を数値に変換する方法 Number( 引数 ) 引数に数値文字列を渡すと数値に変換 数値以外の文字列を渡した場合,NaN が返る isnan( 引数 ) 引数に渡された文字列が数値文字列でない場合に true を返す ( 数値文字列の場合は false を返す ) js-sample5.html, js/js-sample5.js 15
document.getelementbyid メソッド document.getelementbyid( 引数 ) 引数で指定した要素オブジェクトを得る document.getelementbyid( 引数 ).textcontent 引数で指定した要素オブジェクトのテキストを得る document.getelementbyid( 引数 ).innerhtml 引数で指定した要素オブジェクトの HTML を得る document.getelementbyid( 引数 ).style.css プロパティ 引数で指定した要素オブジェクトの CSS プロパティを得る CSS プロパティ名は, 基本的には ハイフン (-) を除去し, ハイフンの後の文字を大文字に変換したものを用いる 参考 : http://www.w3schools.com/jsref/dom_obj_style.asp 16
オブジェクトのイメージ <body> <h1 <h1 id="id1 id="id1">hello</h1> style= color: red >Hello, World</h1> </body> H1 要素のオブジェクト 属性 : 色 (style.color): black HTML テキスト (innerhtml): Hello document.getelementbyid( id1 ) js-sample6.html, js/js-sample6.js document.getelementbyid( id1 ).style.color = red ; document.getelementbyid( id1 ).innerhtml = Hello, World ;
document.getelementbyid 関数 各 id に対応する要素の内容を取得してコンソールに表示 id1 の要素の内容を prompt から入力した文字列に変更 div 要素の内容を色 :red, サイズ :200%, 背景色 :lightgray, 文字列 : テストに変更 div は division の略で, 他の要素をグループ化する際などに用いられる js-sample7.html, js/js-sample7.js 18
イベント処理 Web ブラウザ上で, ページが読み込まれたり, ユーザからの入力があるとイベントが生成される 例 : キーボードが押される, マウスがクリックされるなど addeventlistener メソッドを用いて, イベントが発生した時に処理する内容を登録しておくことができる イベント一覧 https://en.wikipedia.org/wiki/dom_events https://www.w3.org/tr/uievents/ 主なイベント DOMContentLoaded: ページが読み込まれた時に発生 click: クリックされた時に発生 keypress: キーが押された時に発生
ページが読み込まれたイベントを 処理する方法 js-sample8.html, js/js-sample8.js document.addeventlistener メソッド 引数に DOMContentLoaded とアロー関数 (ES6 より利用可能 ) を渡す 20
フォーム部品 ( テキストボックスとボタン ) テキストボックス input 要素のtype 属性がtext value 属性により, ボックス内の文字列が設定 取得可能 例 : <input type= text /> ボタン button 要素 type 属性値として submit( 初期値 ), reset, button が指定可能 (submit はページ遷移が発生する ) ボタンの表示文字列は,button 要素の値として設定 例 : <button type= button > 確認ボタン </button>
テキストボックスの入力値の取得 テキストボックス内に入力したデータを, ボタンが押されたら div 要素に出力 js-sample9.html, js/js-sample9.js 22
テキストボックスの入力値の取得 JavaScript document.addeventlistener("domcontentloaded", () => { const button = document.getelementbyid("btn1"); button.addeventlistener("click", () => { const text = document.getelementbyid("input").value; document.getelementbyid("output").innerhtml = text; }); }); HTML <form> <input type="text" id="input" /> <button type="button" id="btn1"> 値の確認 </button> </form> <div id="output"></div>
テキストボックスの入力値の取得 JavaScript: js/com_ex.js ( 簡略表記版 ) function $(id) { return document.getelementbyid(id); } JavaScript: js/js-sample10.js document.addeventlistener("domcontentloaded", () => { $("btn1").addeventlistener("click", () => { $("output").innerhtml = $("input").value; }); }); 24
配列 複数の値をまとめて扱うことが可能 数値, 文字列, 真偽値などが混在可能 js-sample11.html, js/js-sample11.js 初期化 let colors = new Array(); let colors = [ 赤色, 青色, 緑色 ]; 要素数の取得 colors.length => 3 要素の参照 colors[0] => 赤色 要素の代入 colors[0] = red ; 要素の追加先頭 : colors.unshift( 紫色 ); 末尾 : colors.push( 黒色 ); 要素の削除 先頭 : colors.shift(); 末尾 : colors.pop(); 指定位置から指定数削除 : colors.splice(1, 2); 25
JSON (JavaScript Object Notation) 連想配列 添字に文字列が利用可能 数値, 文字列, 真偽値, 配列, 連想配列を格納可能 js-sample12.html, js/js-sample12.js 初期化 let colors = { 赤色 : red, 青色 : blue }; キーの配列を取得 Object.keys(colors) => [ 赤色, 青色 ] 要素数の取得 Object.keys(colors).length => 2 要素の参照 colors[ 赤色 ] => red 要素の代入 colors[ 赤色 ] = #ff0000 要素の追加 colors[ 緑色 ] = green ; 要素の削除 delete colors[ 赤色 ]; 26
演習問題の概要 簡易版オンライン書店サイト開発 ページ一覧 トップページ サイト管理者用 書籍登録ページ 書籍削除 ( 登録解除 ) ページ サイトユーザ用 書籍購入ページ 書籍会計ページ
演習問題 1 関連サンプルプログラム ローカルストレージへの文字列の保存と取得のサンプル js-sample13.html js/js-sample13.js ローカルストレージへの JSON の保存と取得のサンプル js-sample14.html js/js-sample14.js
ローカルストレージ ユーザのローカル環境 ( ブラウザ ) にデータを保存するための仕組み データの保存 localstorage.setitem( キー, 値 ); データの取得 localstorage.getitem( キー ); Web Storage https://www.w3.org/tr/webstorage/ モダンブラウザのストレージ容量まとめ http://www.html5rocks.com/ja/tutorials/offline/ quota-research/
演習問題 1 書籍登録ページを作成せよ js_ex/ex1_entry.html js_ex/js/ex1_entry.js 登録した書籍の表示ページを作成せよ js_ex/ex1_index.html js_ex/js/ex1_index.js
演習問題 1: 書籍登録ページ
演習問題 1: 書籍登録ページ ex1_entry.html
演習問題 1: 書籍登録ページ ex1_entry.js
演習問題 1: 登録した書籍の表示ページ
演習問題 1: 登録した書籍の表示ページ ex1_index.html
演習問題 1: 登録した書籍の表示ページ ex1_index.js
演習問題 2 関連サンプルプログラム 複数書籍の JSON 表現 js-sample15.html js/js-sample15.js
演習問題 2 書籍登録ページ ( 複数書籍対応 ) を作成せよ js_ex/ex2_entry.html js_ex/js/ex2_entry.js 登録した書籍の表示ページを作成せよ js_ex/ex2_index.html js_ex/js/ex2_index.js
演習問題 2: 書籍登録ページ ( 複数書籍対応 )
演習問題 2: 書籍登録ページ ex2_entry.html ex1_entry.html と同様
演習問題 2: 書籍登録ページ ex2_entry.js
演習問題 2: 登録した書籍の表示ページ
演習問題 2: 登録した書籍の表示ページ ex2_index.html ex1_index.html と同様
演習問題 2: 登録した書籍の表示ページ ex2_index.js
演習問題 3 関連サンプルプログラム JSON とローカルストレージのデータ削除のサンプル js-sample16.html js/js-sample16.js
演習問題 3 書籍削除ページを作成せよ js_ex/ex3_delete.html js_ex/js/ex3_delete.js
演習問題 3: 書籍削除ページ
演習問題 3 ex3_delete.js
演習問題 4 関連サンプルプログラム 複数書籍 ( 画像付 ) の表示のサンプル js-sample17.html js/js-sample17.js
演習問題 4 書籍 ( 画像付き ) 登録ページを作成せよ js_ex/ex4_entry.html js_ex/js/ex4_entry.js 登録した全書籍 ( 画像付き ) の表示ページを作成せよ js_ex/ex4_index.html js_ex/js/ex4_index.js
演習問題 4: 書籍 ( 画像付き ) 登録ページ
演習問題 4: 書籍 ( 画像付き ) 登録ページ ex4_entry.html ex1_entry.html に画像を表示するためのタグを追加
演習問題 4: 書籍 ( 画像付き ) 登録ページ ex4_entry.js
演習問題 4: 登録した全書籍 ( 画像付き ) の表示ページ
演習問題 4: 登録した全書籍 ( 画像付き ) の表示ページ ex4_index.js
演習問題 5 関連サンプルプログラム 書籍購入のサンプル 1 js-sample18.html js/js-sample18.js 書籍購入のサンプル 2 js-sample19.html js/js-sample19.js
演習問題 5 書籍登録ページを作成せよ ( 価格は文字列から数値に変換 ) js_ex/ex5_entry.html js_ex/js/ex5_entry.js 書籍購入ページを作成せよ js_ex/ex5_index.html js_ex/js/ex5_index.js 書籍会計ページを作成せよ js_ex/ex5_check.html js_ex/js/ex5_check.js
演習問題 5: 書籍登録ページ ( 価格は文字列から数値に変換 ) price : 400 price : 400
演習問題 5: 書籍登録ページ ex5_entry.html ex4_entry.html と同様
演習問題 5: 書籍登録ページ ex5_entry.js
演習問題 5: 書籍購入ページ
演習問題 5: 書籍購入ページ ex5_index.js
演習問題 5: 書籍購入ページ ex5_index.js
演習問題 5: 書籍会計ページ
演習問題 5: 書籍会計ページ ex5_check.js
演習問題 5: 書籍会計ページ ex5_check.js