JavaScriptによる
電卓Webアプリを作成しましょう
健山智子
([email protected])
広島工業大学 情報学部 知的情報システム学科
知的情報可視化戦略研究室（iVaL）
2016/01/28 (Thurs.)情報システム基礎演習Ｂ
テーマ４講義のアウトライン
1. グループの決定： 1. ５人での６グループ（ランダム） 2. Webアプリケーション 3. JavaScriptの簡単な概要 2. Web電卓アプリケーションの開発計画 1. 開発の事前準備 2. 開発の目的と計画（要件定義） 3. 外部設計・内部設計の記述 1. ユーザが操作する部分のデザイン 2. 内部処理の流れ 3. システム開発環境の用意 3. 電卓アプリケーション開発 1. 四則演算の簡単なアプリケーションの開発 2. 電卓として，他どのような演算を可能にするか 4. レポート提出 1. グループでひとつの作品とレポートを完成 2. 相互評価 2017/9/22 情報システム基礎演習B テーマ４ 2講義のアウトライン
1. 講義概要とグループの決定： 1. ５人グループの６名（ランダム） 2. Webアプリケーション 3. JavaScriptの簡単な概要 2. Web電卓アプリケーションの開発計画 1. 開発の事前準備 2. 開発の目的と計画（要件定義） 3. 外部設計・内部設計の記述 1. ユーザが操作する部分のデザイン 2. 内部処理の流れ 3. システム開発環境の用意 3. 電卓アプリケーション開発 1. 四則演算の簡単なアプリケーションの開発 2. 電卓として，他どのような演算を可能にするか 4. レポート提出 1. グループでひとつの作品とレポートを完成 2. 相互評価 2017/9/22 情報システム基礎演習B テーマ４ 3Webアプリケーションの開発
Webアプリケーションとは？ • Webブラウザを利用して動作するユーザ対話操作のシステム • 検索エンジン，ブログ，Twitter, など．．． • サーバとクライアントの関係に基づく，HTTPプロトコルを用いて情報交換 • クライアント側はおもに３つの言語で構成 2017/9/22 情報システム基礎演習B テーマ４ 4 https://www.htmlhifive.com/conts/web/view/study-room/introduction-to-web-applicationsWebアプリケーションの開発
Webアプリケーションとは？
• クライアント側はおもに３つの言語で構成
• HTML(Hyper Text Markup Language) ： ~~.html
Webページの内容として，主に文書を表現する際に利用される言語
• CSS（Cascading Style Sheets ） : ~~.css
文書の体裁や見栄えを表現するために用いられるスタイルシート言語
• JavaScript : ~~.js
Webページでよく利用される動的なスクリプト言語
2017/9/22 情報システム基礎演習B テーマ４
Webアプリケーションの開発
HTMLとJavaScriptの違い
2017/9/22 情報システム基礎演習B テーマ４
6
Webアプリケーション開発の準備０
1. Webアプリケーションを閲覧するための，ブラウザとして，
Mozill Firefoxか Google chromeを事前にインストールしてください 私はGoogle Chrome userなので，
資料はすべてGoogle Chromeを用いて作成してます 1. 用意するのは，ブラウザとテキストエディタのみでOK 2. あとは，Webサイトで「Javascript ○○」と検索する努力 情報システム基礎演習B テーマ４ 7 2017/9/22
Webアプリケーション開発の準備１
Webアプリケーションを作成する前に，以下の用意をまずはしましょう 1. フォルダエクスプローラ上でファイルの拡張子がちゃんと表示されていること 2. 拡張子が表示されていないのであれば，拡張子を表示するように設定する 1. コントロールパネルからエクスプローラオプションを選択 2. 表示タブを選択し，下から３番目「登録された拡張子は表示しない」の チェックを外し，OKボタンをクリック 情報システム基礎演習B テーマ４ 8 • ．html : HTMLファイル • ．txt : Textファイル • ．ppt : PowerPointファイル 2017/9/22Webアプリケーション開発の準備２
1. 任意のフォルダを作成 英字スタートで英数字で名前を決めてください（例：JissenB） 2. １．のフォルダ上に，Webアプリケーション用のファイルを用意する 1. フォルダエクスプローラ上で 右クリック→新規作成→テキストドキュメントを選択 2. テキストファイルができるので，ファイル名を「index.html」へ変更 3. Text Editor (Notepad, サクラエディタ,TeraPadなど)でindex.htmlファイルを開く（アイコンを右クリックで） 3. 以下の内容を記述し，保存する （文字コードをutf-8にする） 情報システム基礎演習B テーマ４ 9 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8">
<title>Welcome to JavaScript </title> </head> <body> Webページを表示する <body> </html> HTML5 の宣言 Webページ上で 実際に表示 Webページ表示の 設定について定義 index.html 2017/9/22
Webアプリケーション開発の準備２
1. WebブラウザのURLバーに，読み込むhtmlファイル
（例えば index.html）をDragged and Dropでブラウザ上へ読み込み
情報システム基礎演習B テーマ４ 10 マウスでURLバーへ あとは，ファイルを更新す るたびにブラウザ上から右 クリックで更新 以上で，Webアプリケーション開発の 準備が完了 2017/9/22
Webアプリケーション開発の準備３（Javascript）
JavaScriptが含まれたWebアプリケーションのテンプレートファイル 情報システム基礎演習B テーマ４ 11 HTML5 の宣言 <script> </script>タブ内で 各Javascrip関数，処理を定義 JavascriptTemplate.html 2017/9/22Webアプリケーション開発の準備３（Javascript）
JavaScriptが含まれたWebアプリケーションのテンプレートファイル 情報システム基礎演習B テーマ４ 12 HTML5 の宣言 このように，ひとつのファイルに Javascript関数をまとめて定義もできる tmp/JavascriptTemplate.html 2017/9/22Webアプリケーション開発１（コンソール上の演算）
JavaScriptで実際に挙動を確認する 情報システム基礎演習B テーマ４ 13 consol.log(”文字列”)で “文字列”が提示 week1/JavascriptLesson2.html 簡単な演算が可能 2017/9/22Webアプリケーション開発１ （Javascriptの実行）
Javascriptによる演算の実行 1. 実行したいファイルをブラウザ上で読み込む． 2. 以下の図にしたがって，デベロッパーツールを開く 情報システム基礎演習B テーマ４ 14 Bodyを示す記述が ないので当然空白 2017/9/22Webアプリケーション開発１ （Javascriptの実行）
Webブラウザ上でのJavaScriptの実行（Google Chromeの場合） 1. 実行したいファイルをブラウザ上で読み込む． 2. 以下の図にしたがって，デベロッパーツールを開く 情報システム基礎演習B テーマ４ 15 Bodyを示す記述が ないので当然空白 記述した演算に従った結 果が出ていることを確認 どこで実行されたか確認 week1/JavascriptLesson2.html 2017/9/22Webアプリケーション開発２（複数のスクリプト，関数）
16 複数のスクリプトがある場合，関数がある場合， 本文中ではどのようによびだすか確認 • ポイント１（ダイアログの呼び出し） • alart: 文字列のダイアログ • confirm: 確認(IF文で制御) • prompt: 文字入力による制御 prompt(“文字列”，”初期値”) • ポイント２（本文中の関係） • 本文中の各要素に，識別のためのIDを設定する．• DOMをもちいて呼び出し（Document Object Modelling） • document.フォーム名.要素ID.value によって， 本文中の要素と関連づけをおこなう • document.getElementById(“要素名"); • 本文中の要素と関係づけ • オブジェクトを構成するので，メソッドが利用可能 • v = document.フォーム名.要素名.value • 指定されたフォームにある要素名の値取得 • テキストボックスなどに利用 2017/9/22 情報システム基礎演習B テーマ４
