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