PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

しじんあいきょう
7 years ago
Views:

1 情報システム基礎演習 B 2016/01/28 (Thurs.) テーマ 4 JavaScript による電卓 Web アプリを作成しましょう健山智子 ([email protected]) 広島工業大学情報学部知的情報システム学科知的情報可視化戦略研究室 (ival)

2 講義のアウトライン 2 1. グループの決定 : 1. 5 人での 6 グループ ( ランダム ) 2. Web アプリケーション 3. JavaScript の簡単な概要 2. Web 電卓アプリケーションの開発計画 1. 開発の事前準備 2. 開発の目的と計画 ( 要件定義 ) 3. 外部設計内部設計の記述 1. ユーザが操作する部分のデザイン 2. 内部処理の流れ 3. システム開発環境の用意 3. 電卓アプリケーション開発 1. 四則演算の簡単なアプリケーションの開発 2. 電卓として, 他どのような演算を可能にするか 4. レポート提出 1. グループでひとつの作品とレポートを完成 2. 相互評価

3 講義のアウトライン 3 1. 講義概要とグループの決定 : 1. 5 人グループの 6 名 ( ランダム ) 2. Web アプリケーション 3. JavaScript の簡単な概要 2. Web 電卓アプリケーションの開発計画 1. 開発の事前準備 2. 開発の目的と計画 ( 要件定義 ) 3. 外部設計内部設計の記述 1. ユーザが操作する部分のデザイン 2. 内部処理の流れ 3. システム開発環境の用意 3. 電卓アプリケーション開発 1. 四則演算の簡単なアプリケーションの開発 2. 電卓として, 他どのような演算を可能にするか 4. レポート提出 1. グループでひとつの作品とレポートを完成 2. 相互評価

4 Web アプリケーションの開発 4 Web アプリケーションとは? Web ブラウザを利用して動作するユーザ対話操作のシステム検索エンジン, ブログ,Twitter, など... サーバとクライアントの関係に基づく,HTTP プロトコルを用いて情報交換クライアント側はおもに 3 つの言語で構成

5 Web アプリケーションの開発 5 Web アプリケーションとは? クライアント側はおもに 3 つの言語で構成 HTML(Hyper Text Markup Language) : ~~.html Web ページの内容として, 主に文書を表現する際に利用される言語 CSS(Cascading Style Sheets ) : ~~.css 文書の体裁や見栄えを表現するために用いられるスタイルシート言語 JavaScript : ~~.js Web ページでよく利用される動的なスクリプト言語

6 Web アプリケーションの開発 6 HTML と JavaScript の違いこんにちは, 健山さん! の表示でこんな違い

7 Web アプリケーション開発の準備 0 1. Web アプリケーションを閲覧するための, ブラウザとして, Mozill Firefox か Google chrome を事前にインストールしてください 7 私は Google Chrome user なので, 資料はすべて Google Chrome を用いて作成してます 1. 用意するのは, ブラウザとテキストエディタのみで OK 2. あとは,Web サイトで Javascript と検索する努力

8 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.

9 Web アプリケーション開発の準備任意のフォルダを作成英字スタートで英数字で名前を決めてください ( 例 :JissenB) のフォルダ上に,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

10 Web アプリケーション開発の準備 Web ブラウザの URL バーに, 読み込む html ファイル ( 例えば index.html) を Dragged and Drop でブラウザ上へ読み込みマウスで URL バーへあとは, ファイルを更新するたびにブラウザ上から右クリックで更新以上で,Web アプリケーション開発の準備が完了

11 Web アプリケーション開発の準備 3(Javascript) 11 JavaScript が含まれた Web アプリケーションのテンプレートファイル HTML5 の宣言 <script> </script> タブ内で各 Javascrip 関数, 処理を定義 JavascriptTemplate.html

12 Web アプリケーション開発の準備 3(Javascript) 12 JavaScript が含まれた Web アプリケーションのテンプレートファイル HTML5 の宣言このように, ひとつのファイルに Javascript 関数をまとめて定義もできる tmp/javascripttemplate.html

13 Web アプリケーション開発 1( コンソール上の演算 ) 13 JavaScript で実際に挙動を確認する consol.log( 文字列 ) で文字列が提示簡単な演算が可能 week1/javascriptlesson2.html

14 Web アプリケーション開発 1 (Javascript の実行 ) 14 Javascript による演算の実行 1. 実行したいファイルをブラウザ上で読み込む. 2. 以下の図にしたがって, デベロッパーツールを開く Body を示す記述がないので当然空白

15 Web アプリケーション開発 1 (Javascript の実行 ) 15 Web ブラウザ上での JavaScript の実行 (Google Chrome の場合 ) 1. 実行したいファイルをブラウザ上で読み込む. 2. 以下の図にしたがって, デベロッパーツールを開く Body を示す記述がないので当然空白記述した演算に従った結果が出ていることを確認どこで実行されたか確認 week1/javascriptlesson2.html

16 Web アプリケーション開発 2( 複数のスクリプト, 関数 ) 16 複数のスクリプトがある場合, 関数がある場合, 本文中ではどのようによびだすか確認ポイント 1( ダイアログの呼び出し ) alart: 文字列のダイアログ confirm: 確認 (IF 文で制御 ) prompt: 文字入力による制御 prompt( 文字列, 初期値 ) ポイント 2( 本文中の関係 ) 本文中の各要素に, 識別のための ID を設定する. DOM をもちいて呼び出し (Document Object Modelling) document. フォーム名. 要素 ID.value によって, 本文中の要素と関連づけをおこなう document.getelementbyid( 要素名 "); 本文中の要素と関係づけオブジェクトを構成するので, メソッドが利用可能 v = document. フォーム名. 要素名.value 指定されたフォームにある要素名の値取得テキストボックスなどに利用

17 Web アプリケーション開発 2( 複数のスクリプト, 関数 ) まずは head 部分の script 17 あえてスクリプトを複数出してみるスクリプトはこのように関数にまとめられる week1/javascriptlesson3.html

18 Web アプリケーション開発 2( 複数のスクリプト, 関数 ) つづいて BODY 部分の script 18 week1/javascriptlesson3.html フォーム名 :greet 要素名 :NameBox 呼び出される関数 (head で定義 ) 関連付けられた出力部

19 Web アプリケーション開発 3( 数学ライブラリの導入 ) 19 Javascript では,Math ライブラリが用意されているまずは読み込まれた文字列から数値へ変換 Math ライブラリによる数値演算 ( 他多数あるので, 色々確認する ) クリックすると関数 keisan() が実行 week1/javascriptlesson5.html

20 その他 20 課題は機能が追加できたらいいと思うよい機能は得点高いでも３回の講義でそこまでできるんだろうかと不安サンプルデータの置き場 Lドライブ->class->ttateyama->class->jissenB 随時更新予定色々ご相談ください資料も随時更新予定気合で頑張るみんなもがんばって情報システム基礎演習B テーマ４課題１

コンテンツメディアプログラミング実習2

コンテンツメディアプログラミング実習2 CMP 実習 2 JavaScript + 地図を使ってみよう中村, 宮下, 斉藤, 菊池 1 必要な知識 JavaScript の基本 HTMLのどの部品なのかを指定する方法その部品にイベントを埋め込む方法それを JavaScript で記述する方法 2 要素をどうやって取得する? DOM とは Document Object Model HTML や XML の各要素についてアプリケーションから利用するための