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