2017年COM実験_JavaScript演習資料

Size: px

Start display at page:

Download "2017年COM実験_JavaScript演習資料"

かつかげくまじ
6 years ago
Views:

1 第 4 回 COM 実験 JavaScript 演習 2017 年 6 月 15 日 ( 木 ) 山口高平

2 はじめに開発環境の準備 JavaScriptの復習演習問題の概要演習問題 1 演習問題 2 演習問題 3 演習問題 4 演習問題 5 レポート課題の説明目次

3 はじめに演習を通じて HTML と JavaScript の理解を深めてもらいます HTML, CSS, JavaScript の基礎については,e- ビジネスソフトウェアの講義演習資料を参照してくださいドットインストールも参考になります演習問題の解答の html ファイルはレポート課題とともに提出してもらいますわからないことがあったら積極的に手を挙げて質問をしてください

4 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.

5 JavaScript 開発環境 Webブラウザ : Google Chrome テキストエディタ : Visual Studio Code ドキュメント Windows 版の Zip archive をダウンロードして, Z ドライブ以下に保存して解凍してください. Code.exe から実行できます. 5

6 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

7 JavaScript コンソール起動方法 7

8 JavaScript コンソール起動方法 8

9 JavaScript の復習 JavaScriptの書き方コンソールへの出力方法変数データ型関数 document.body.innerhtml 文字列への変数の埋め込み文字列を数値に変換する方法 document.getelementbyidメソッドイベント処理ページが読み込まれた際のイベント処理フォーム部品テキストボックスの入力値の取得配列 JSON

10 JavaScript の書き方 HTML ファイル内に書く方法 <head> タグ内に以下のように記述 <script>  </script> 別のテキストファイルに書く方法 <script src=" ファイル名.js"></script> 10

11 コンソールへの出力方法デバッグ用のコンソール出力メソッドを提供 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

12 変数データ型 ECMAScript6 からは let と const が追加された let: 再宣言不可 const: 再宣言と再代入不可変数のスコープがvarと異なる可能であれば,varよりもletとconstを利用すべき js-sample2.html, js/js-sample2.js 12

13 関数再利用可能な JavaScript コードのかたまりに名前をつけたもの js-sample3.html, js/js-sample3.js 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法関数名 ( 引数 ); let num = 関数名 ( 引数 ); 13

14 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

15 文字列を数値に変換する方法 Number( 引数 ) 引数に数値文字列を渡すと数値に変換数値以外の文字列を渡した場合,NaN が返る isnan( 引数 ) 引数に渡された文字列が数値文字列でない場合に true を返す ( 数値文字列の場合は false を返す ) js-sample5.html, js/js-sample5.js 15

16 document.getelementbyid メソッド document.getelementbyid( 引数 ) 引数で指定した要素オブジェクトを得る document.getelementbyid( 引数 ).textcontent 引数で指定した要素オブジェクトのテキストを得る document.getelementbyid( 引数 ).innerhtml 引数で指定した要素オブジェクトの HTML を得る document.getelementbyid( 引数 ).style.css プロパティ引数で指定した要素オブジェクトの CSS プロパティを得る CSS プロパティ名は, 基本的にはハイフン (-) を除去し, ハイフンの後の文字を大文字に変換したものを用いる参考 : 16

17 オブジェクトのイメージ <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 ;

18 document.getelementbyid 関数各 id に対応する要素の内容を取得してコンソールに表示 id1 の要素の内容を prompt から入力した文字列に変更 div 要素の内容を色 :red, サイズ :200%, 背景色 :lightgray, 文字列 : テストに変更 div は division の略で, 他の要素をグループ化する際などに用いられる js-sample7.html, js/js-sample7.js 18

19 イベント処理 Web ブラウザ上で, ページが読み込まれたり, ユーザからの入力があるとイベントが生成される例 : キーボードが押される, マウスがクリックされるなど addeventlistener メソッドを用いて, イベントが発生した時に処理する内容を登録しておくことができるイベント一覧主なイベント DOMContentLoaded: ページが読み込まれた時に発生 click: クリックされた時に発生 keypress: キーが押された時に発生

20 ページが読み込まれたイベントを処理する方法 js-sample8.html, js/js-sample8.js document.addeventlistener メソッド引数に DOMContentLoaded とアロー関数 (ES6 より利用可能 ) を渡す 20

21 フォーム部品 ( テキストボックスとボタン ) テキストボックス input 要素のtype 属性がtext value 属性により, ボックス内の文字列が設定取得可能例 : <input type= text /> ボタン button 要素 type 属性値として submit( 初期値 ), reset, button が指定可能 (submit はページ遷移が発生する ) ボタンの表示文字列は,button 要素の値として設定例 : <button type= button > 確認ボタン </button>

22 テキストボックスの入力値の取得テキストボックス内に入力したデータを, ボタンが押されたら div 要素に出力 js-sample9.html, js/js-sample9.js 22

23 テキストボックスの入力値の取得 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>

24 テキストボックスの入力値の取得 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

25 配列複数の値をまとめて扱うことが可能数値, 文字列, 真偽値などが混在可能 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

26 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

27 演習問題の概要簡易版オンライン書店サイト開発ページ一覧トップページサイト管理者用書籍登録ページ書籍削除 ( 登録解除 ) ページサイトユーザ用書籍購入ページ書籍会計ページ

28 演習問題 1 関連サンプルプログラムローカルストレージへの文字列の保存と取得のサンプル js-sample13.html js/js-sample13.js ローカルストレージへの JSON の保存と取得のサンプル js-sample14.html js/js-sample14.js

29 ローカルストレージユーザのローカル環境 ( ブラウザ ) にデータを保存するための仕組みデータの保存 localstorage.setitem( キー, 値 ); データの取得 localstorage.getitem( キー ); Web Storage モダンブラウザのストレージ容量まとめ quota-research/

30 演習問題 1 書籍登録ページを作成せよ js_ex/ex1_entry.html js_ex/js/ex1_entry.js 登録した書籍の表示ページを作成せよ js_ex/ex1_index.html js_ex/js/ex1_index.js

31 演習問題 1: 書籍登録ページ

32 演習問題 1: 書籍登録ページ ex1_entry.html

33 演習問題 1: 書籍登録ページ ex1_entry.js

34 演習問題 1: 登録した書籍の表示ページ

35 演習問題 1: 登録した書籍の表示ページ ex1_index.html

36 演習問題 1: 登録した書籍の表示ページ ex1_index.js

37 演習問題 2 関連サンプルプログラム複数書籍の JSON 表現 js-sample15.html js/js-sample15.js

38 演習問題 2 書籍登録ページ ( 複数書籍対応 ) を作成せよ js_ex/ex2_entry.html js_ex/js/ex2_entry.js 登録した書籍の表示ページを作成せよ js_ex/ex2_index.html js_ex/js/ex2_index.js

39 演習問題 2: 書籍登録ページ ( 複数書籍対応 )

40 演習問題 2: 書籍登録ページ ex2_entry.html ex1_entry.html と同様

41 演習問題 2: 書籍登録ページ ex2_entry.js

42 演習問題 2: 登録した書籍の表示ページ

43 演習問題 2: 登録した書籍の表示ページ ex2_index.html ex1_index.html と同様

44 演習問題 2: 登録した書籍の表示ページ ex2_index.js

45 演習問題 3 関連サンプルプログラム JSON とローカルストレージのデータ削除のサンプル js-sample16.html js/js-sample16.js

46 演習問題 3 書籍削除ページを作成せよ js_ex/ex3_delete.html js_ex/js/ex3_delete.js

47 演習問題 3: 書籍削除ページ

48 演習問題 3 ex3_delete.js

49 演習問題 4 関連サンプルプログラム複数書籍 ( 画像付 ) の表示のサンプル js-sample17.html js/js-sample17.js

50 演習問題 4 書籍 ( 画像付き ) 登録ページを作成せよ js_ex/ex4_entry.html js_ex/js/ex4_entry.js 登録した全書籍 ( 画像付き ) の表示ページを作成せよ js_ex/ex4_index.html js_ex/js/ex4_index.js

51 演習問題 4: 書籍 ( 画像付き ) 登録ページ

52 演習問題 4: 書籍 ( 画像付き ) 登録ページ ex4_entry.html ex1_entry.html に画像を表示するためのタグを追加

53 演習問題 4: 書籍 ( 画像付き ) 登録ページ ex4_entry.js

54 演習問題 4: 登録した全書籍 ( 画像付き ) の表示ページ

55 演習問題 4: 登録した全書籍 ( 画像付き ) の表示ページ ex4_index.js

56 演習問題 5 関連サンプルプログラム書籍購入のサンプル 1 js-sample18.html js/js-sample18.js 書籍購入のサンプル 2 js-sample19.html js/js-sample19.js

57 演習問題 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

58 演習問題 5: 書籍登録ページ ( 価格は文字列から数値に変換 ) price : 400 price : 400

59 演習問題 5: 書籍登録ページ ex5_entry.html ex4_entry.html と同様

60 演習問題 5: 書籍登録ページ ex5_entry.js

61 演習問題 5: 書籍購入ページ

62 演習問題 5: 書籍購入ページ ex5_index.js

63 演習問題 5: 書籍購入ページ ex5_index.js

64 演習問題 5: 書籍会計ページ

65 演習問題 5: 書籍会計ページ ex5_check.js

66 演習問題 5: 書籍会計ページ ex5_check.js

2016年COM実験_JavaScript演習資料

2016年COM実験_JavaScript演習資料 COM 実験 JavaScript 演習問題 2016 年 7 月 14 日 ( 木 ) 山口高平はじめに開発環境の準備 JavaScriptの復習演習問題の概要演習問題 1 演習問題 2 演習問題 3 演習問題 4 演習問題 5 レポート課題の説明目次はじめに演習を通じてHTMLとJavaScriptの