2016年COM実験_JavaScript演習資料

Size: px

Start display at page:

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

みずきゆのもと
7 years ago
Views:

1 COM 実験 JavaScript 演習問題 2016 年 7 月 14 日 ( 木 ) 山口高平

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

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

4 HTMLとCSSとJavaScript HTML CSS JavaScript 外部ファイル CSS JavaScript HTML Webページの骨格のみを担当表現力は紙の文書と同程度 CSS Webページのデザインを担当通常はHTMLと組み合わせて用いる JavaScript Webページを動的なものにする通常はHTML と組み合わせて用いる

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を用いれば良い consoleオブジェクトのメソッド console.log(message) console.info(message) console.warn(message) console.error(message) 説明メッセージをコンソールに出力情報アイコン付きでメッセージをコンソールに出力警告アイコン付きでメッセージをコンソールに出力エラーアイコン付きでメッセージをコンソールに出力 11

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

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

14 document.body.innerhtml 要素.innerHTML: 要素内のHTML 文書を置き換える ex8-1.html, js/ex8-1.js, css/ex8.css document.body.innerhtml = '<h1>document.body.innerhtml</h1>'; const str = 'Hello, World'; document.body.innerhtml += '<p>' + str + '</p>'; document.body.innerhtml += "<p style='color: red;'>" + str + "</p>"; 14

15 文字列への変数の埋め込み (ECMAScript 2015の新機能 ) バッククォートで文字列を囲うことで, 文字列中の改行や${ 変数名 }で, 変数を埋め込むことが可能になった ex8-2.html, js/ex8-2.js, css/ex8.css const str = 'Hello, World'; document.body.innerhtml += `<p>${str}</p>`; document.body.innerhtml += `<p style='color: red;'>${str}</p>` 15

16 文字列を数値に変換する方法 parseint( 引数 ) 引数に数値文字列を渡すと整数に変換実数文字列を渡した場合, 小数点以下は無視される parsefloat( 引数 ) 引数に数値文字列を渡すと浮動小数点数に変換 Number( 引数 ) 引数に数値文字列を渡すと数値に変換数値以外の文字列を渡した場合,NaNが返る isnan( 引数 ) 引数に渡された文字列が数値文字列でない場合にtrueを返す( 数値文字列の場合はfalseを返す) ex13.html, js/ex13.js 16

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

18 オブジェクトのイメージ <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 ) ex14.html, js/ex14.js document.getelementbyid( id1 ).style.color = red ; document.getelementbyid( id1 ).innerhtml = Hello, World ;

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

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

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

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

23 テキストボックスの入力値の取得テキストボックス内に入力したデータを, ボタンが押されたらdiv 要素に出力 e-ビジネスソフトウェア:ex17-1, js/ex17-1.js 23

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

25 テキストボックスの入力値の取得 ( 簡略表記版 : ex17-2.html, js/ex17-2.js) JavaScript: js/ebsw.js function $(id) { return document.getelementbyid(id); } JavaScript: js/ex17-2.js document.addeventlistener("domcontentloaded", () => { $("btn1").addeventlistener("click", () => { $("output").innerhtml = $("input").value; }); }); 25

26 配列複数の値をまとめて扱うことが可能数値, 文字列, 真偽値などが混在可能 e-ビジネスソフトウェア: ex18.html, js/ex18.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); 26

27 JSON (JavaScript Object Notation) 連想配列添字に文字列が利用可能数値, 文字列, 真偽値, 配列, 連想配列を格納可能 e-ビジネスソフトウェア: ex19.html, js/ex19.js 初期化 let colors = { 赤色 : red, 青色 : blue }; キーの配列を取得 Object.keys(colors) => [ 赤色, 青色 ] 要素数の取得 Object.keys(colors).length => 2 要素の参照 colors[ 赤色 ] => red 要素の代入 colors[ 赤色 ] = #ff0000 要素の追加 colors[ 緑色 ] = green ; 要素の削除 delete colors[ 赤色 ]; 27

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

49 演習問題 3 ex3_delete.js

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

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

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

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

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

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

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

57 演習問題 5 関連サンプルプログラム書籍購入のサンプル1 js_sample/sample6.html js_sample/js/sample6.js 書籍購入のサンプル2 js_sample/sample7.html js_sample/js/sample7.js

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

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

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

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

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

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

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

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

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

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

2017年COM実験_JavaScript演習資料

2017年COM実験_JavaScript演習資料第 4 回 COM 実験 JavaScript 演習 2017 年 6 月 15 日 ( 木 ) 山口高平はじめに開発環境の準備 JavaScriptの復習演習問題の概要演習問題 1 演習問題 2 演習問題 3 演習問題 4 演習問題 5 レポート課題の説明目次はじめに演習を通じて HTML と JavaScript の理解を深めてもらいます HTML, CSS, JavaScript