JavaScriptによる電卓Webアプリを作成しましょうtateyama/Lecture/...Webアプリケーション開発の準備1...

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. 相互評価


3

Webアプリケーションの開発

Webアプリケーションとは？• Webブラウザを利用して動作するユーザ対話操作のシステム

• 検索エンジン，ブログ，Twitter, など．．．• サーバとクライアントの関係に基づく，HTTPプロトコルを用いて情報交換

• クライアント側はおもに３つの言語で構成


4

https://www.htmlhifive.com/conts/web/view/study-room/introduction-to-web-applications


Webアプリケーションとは？

• クライアント側はおもに３つの言語で構成• HTML(Hyper Text Markup Language) ： ~~.html

Webページの内容として，主に文書を表現する際に利用される言語

• CSS（Cascading Style Sheets ） : ~~.css文書の体裁や見栄えを表現するために用いられるスタイルシート言語

• JavaScript : ~~.jsWebページでよく利用される動的なスクリプト言語


5


HTMLとJavaScriptの違い


6

「こんにちは，健山さん！」の表示でこんな違い

Webアプリケーション開発の準備０

1. Webアプリケーションを閲覧するための，ブラウザとして，Mozill Firefoxか Google chromeを事前にインストールしてください

私はGoogle Chrome userなので，資料はすべてGoogle Chromeを用いて作成してます

1. 用意するのは，ブラウザとテキストエディタのみでOK2. あとは，Webサイトで「Javascript ○○」と検索する努力

情報システム基礎演習B テーマ４

7

2017/9/22

Webアプリケーション開発の準備１

Webアプリケーションを作成する前に，以下の用意をまずはしましょう1. フォルダエクスプローラ上でファイルの拡張子がちゃんと表示されていること

2. 拡張子が表示されていないのであれば，拡張子を表示するように設定する1. コントロールパネルからエクスプローラオプションを選択2. 表示タブを選択し，下から３番目「登録された拡張子は表示しない」の

チェックを外し，OKボタンをクリック


8

• ．html : HTMLファイル• ．txt : Textファイル• ．ppt : PowerPointファイル

2017/9/22

Webアプリケーション開発の準備２

1. 任意のフォルダを作成英字スタートで英数字で名前を決めてください（例：JissenB）

2. １．のフォルダ上に，Webアプリケーション用のファイルを用意する1. フォルダエクスプローラ上で

右クリック→新規作成→テキストドキュメントを選択2. テキストファイルができるので，ファイル名を「index.html」へ変更3. Text Editor (Notepad, サクラエディタ,TeraPadなど)で

index.htmlファイルを開く（アイコンを右クリックで）

3. 以下の内容を記述し，保存する（文字コードをutf-8にする）


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.html2017/9/22

Webアプリケーション開発の準備２

1. WebブラウザのURLバーに，読み込むhtmlファイル（例えば index.html）をDragged and Dropでブラウザ上へ読み込み


10

マウスでURLバーへ

あとは，ファイルを更新するたびにブラウザ上から右

クリックで更新

以上で，Webアプリケーション開発の準備が完了

2017/9/22

Webアプリケーション開発の準備３（Javascript）

JavaScriptが含まれたWebアプリケーションのテンプレートファイル


11

HTML5 の宣言

<script> </script>タブ内で各Javascrip関数，処理を定義

JavascriptTemplate.html

2017/9/22

Webアプリケーション開発の準備３（Javascript）

JavaScriptが含まれたWebアプリケーションのテンプレートファイル


12

HTML5 の宣言

このように，ひとつのファイルにJavascript関数をまとめて定義もできる

tmp/JavascriptTemplate.html

2017/9/22

Webアプリケーション開発１（コンソール上の演算）

JavaScriptで実際に挙動を確認する


13

consol.log(”文字列”)で“文字列”が提示

week1/JavascriptLesson2.html

簡単な演算が可能

2017/9/22

Webアプリケーション開発１（Javascriptの実行）

Javascriptによる演算の実行1. 実行したいファイルをブラウザ上で読み込む．2. 以下の図にしたがって，デベロッパーツールを開く


14

Bodyを示す記述がないので当然空白

2017/9/22

Webアプリケーション開発１（Javascriptの実行）

Webブラウザ上でのJavaScriptの実行（Google Chromeの場合）1. 実行したいファイルをブラウザ上で読み込む．2. 以下の図にしたがって，デベロッパーツールを開く


15

Bodyを示す記述がないので当然空白

記述した演算に従った結果が出ていることを確認

どこで実行されたか確認


2017/9/22

Webアプリケーション開発２（複数のスクリプト，関数） 16

複数のスクリプトがある場合，関数がある場合，本文中ではどのようによびだすか確認

• ポイント１（ダイアログの呼び出し）• alart: 文字列のダイアログ• confirm: 確認(IF文で制御)• prompt: 文字入力による制御 prompt(“文字列”，”初期値”)

• ポイント２（本文中の関係）• 本文中の各要素に，識別のためのIDを設定する．• DOMをもちいて呼び出し（Document Object Modelling）• document.フォーム名.要素ID.value によって，

本文中の要素と関連づけをおこなう• document.getElementById(“要素名");

• 本文中の要素と関係づけ• オブジェクトを構成するので，メソッドが利用可能

• v = document.フォーム名.要素名.value• 指定されたフォームにある要素名の値取得• テキストボックスなどに利用


Webアプリケーション開発２（複数のスクリプト，関数）


17

あえてスクリプトを複数出してみる

スクリプトはこのように関数にまとめられる

week1/JavascriptLesson３.html

まずはhead部分のscript

2017/9/22

Webアプリケーション開発２（複数のスクリプト，関数）


18

フォーム名：greet要素名：NameBox

呼び出される関数（headで定義）

week1/JavascriptLesson３.html

つづいてBODY部分のscript

関連付けられた出力部

2017/9/22

Webアプリケーション開発３（数学ライブラリの導入）

Javascriptでは，Mathライブラリが用意されている


19

まずは読み込まれた文字列から数値へ変換


Mathライブラリによる数値演算（他多数あるので，色々確認する）

クリックすると関数keisan()が実行

2017/9/22

その他

課題は機能が追加できたらいいと思う

よい機能は得点高い

でも３回の講義でそこまでできるんだろうか．．．と不安

サンプルデータの置き場

Lドライブ->class->ttateyama->class->jissenB 課題１

随時更新予定

色々ご相談ください

資料も随時更新予定

気合で頑張る

みんなもがんばって


20

JavaScriptによる 電卓Webアプリを作成しましょうtateyama/Lecture/...Webアプリケーション開発の準備1...

Documents

JavaScriptによる電卓Webアプリを作成しましょうtateyama/Lecture/...Webアプリケーション開発の準備1...