スライドタイトルなし

Size: px

Start display at page:

Download "スライドタイトルなし"

ふじよしわくや
5 years ago
Views:

1 39 第 3 章 Web システムと画面設計 Web 情報処理システム情報処理とはクライアントサーバシステム Web 情報処理システム Web サーバの役割と設定 Baby Web Server の設定入出力画面の設計と HTML HTML タグタグの意味と書法文字の装飾段落の整形 FORM TEXT 入力 RADIO ボタン CHECK ボックス SELECT メニュー JavaScript とプログラミング X + Y = Z を計算する BMI(Body Mass Index) を計算する

情報処理システム 40 クライアントサーバシステム : 今日, 一人一台のパソコンで文書作成やデータ分析を行いつつ, LAN (Local Area Network) でサーバシステムに接続して, サーバのプログラムを使って業務を行っています. このような情報処理形態をクライアントサーバシステム (Client/Server System) と呼びます.

2 情報処理システム 40 クライアントサーバシステム : 今日, 一人一台のパソコンで文書作成やデータ分析を行いつつ, LAN (Local Area Network) でサーバシステムに接続して, サーバのプログラムを使って業務を行っています. このような情報処理形態をクライアントサーバシステム (Client/Server System) と呼びます.1980 年代前半までは汎用コンピュータに専用端末を接続して, すべて汎用コンピュータが処理する中央集中型システムが主流でした. コンピュータのダウンサイジング ( 小型高性能化 ) によって, 高性能なワークステーション (WS) がサーバとなり, パソコン (PC) がクライアントとして, それらを LAN で接続して役割分担による処理形態に変わってきたのです. さらに, 最近ではクラウドコンピュータシステムへと発展しています. インターネットの到来 :LAN にもいくつかの通信方式 ( プロトコル ) がありますが, 現在では, イーサネット (Ethernet)) が標準となり, さらに TCP/IP プロトコルが考案されインターネットとして世界の LAN を接続しました. スイスの CERN 研究所で開発された Web ブラウザと Web サーバによるによる新たな情報システムが考案され,1990 年代にインターネットが商用利用に開放されると急速に普及しました. Web 情報処理システム : 当初は HTML で記述されたファイルを,Web サーバからダウンロードして, Web ブラウザで表示するだけでしたが,Web サーバでプログラムを実行して, ユーザの要求に応じた処理結果を送り返す情報処理システムへと発展しました. データベースシステムもデータベースサーバプログラム ( 高価 ) とクライアントプログラム ( 廉価でもパソコンごとに必要 ) が連携して動作する形態から,Web ブラウザをクライアントプログラム ( パソコン標準装備 ), そして Web サーバとデータベースが連携して高度な処理を行う Web 情報処理システムへと進展してきました. マイクロソフト :Web サーバとして IIS(internet Information Server) を標準装備し, さらに ASP(Active Server Page) と ODBC(Open DataBase Connectivity) を開発して, 良くも悪くもデータベースを中核にした Web 情報処理システムをリードしました.DELL はこの方式を採用しました. 情報系システム Web サーバデータベースサーバ基幹系システム連携 (ODBC) Fire Wall Web ブラウザ ( 標準装備 ) INTERNET 専用クライアント ( 専用ソフトが必要 )

Web 情報処理システムの例 41 情報処理システムの変遷は理解できましたか? 特に, クライアントサーバシステムにおける Web 情報処理システムの特徴を理解してください.

エンドユーザが利用する Web ブラウザは無料というコストメリットだけでなく使い慣れたアプリケーションというメリットもあります. 導入教育が簡単になるのです.

データベースも MySQL などフリーソフトウェアがあり, 低コストのシステムを構築することができます. 開発環境も ASP に限らず PHP などがフリーで使えます.

Web サーバで実行するプログラムを開発することができるようになります. 閑話休題以前, 総務省と日立製作所, 凸版印刷が彦根で携帯電話を使ったユビキタスの実証実験を行った時, 携帯電話の貸出管理をどうするかが問題となりました.

3 Web 情報処理システムの例 41 情報処理システムの変遷は理解できましたか? 特に, クライアントサーバシステムにおける Web 情報処理システムの特徴を理解してください. つまり, クライアント (PC) は Web ブラウザがあればよく, サーバは Web サーバとプログラム開発環境, そしてデータベースがあればよいのです. エンドユーザが利用する Web ブラウザは無料というコストメリットだけでなく使い慣れたアプリケーションというメリットもあります. 導入教育が簡単になるのです. 一方,Web サーバも Windows Server ならば IIS が利用でき,Linux ならば Apache がフリーソフトウェアとしてあります. データベースも MySQL などフリーソフトウェアがあり, 低コストのシステムを構築することができます. 開発環境も ASP に限らず PHP などがフリーで使えます. 本講義 ( データベースシステム Ⅰ) をマスターすることで, 1. Web サーバの仕組みと動作を理解する 2. Web ブラウザでデータの入出力を行う画面を設計する 3. Web サーバで実行するプログラムを開発することができるようになります. 閑話休題以前, 総務省と日立製作所, 凸版印刷が彦根で携帯電話を使ったユビキタスの実証実験を行った時, 携帯電話の貸出管理をどうするかが問題となりました. つまり A 地点で貸出した携帯電話は B 地点で返却されます ( その逆もある ). その状態の把握と携帯電話の移動配備をどうするかが問題になったのです. ゼミ生が A,B 地点でインターネットが使えるパソコンを準備して, 貸出状況管理システムを作りました. データベースもプログラムも全く知らない彼でしたが, 本講義のプリントを参考にして, クリック操作だけの非常に便利なシステムを開発しました. 宇治市での実験でも利用され, 日立製作所による実験報告書にも記載されました. この技術を知っていることで, いろいろな場面においてソリューションを提案できます. Web サーバ携帯電話貸出管理システム

データから情報へ 42 前ページで述べたように,Web 情報処理システムでは, 1. Web サーバの仕組みと動作を理解する 2.

まず, 情報処理におけるデータ ( 情報 ) の流れを下図で理解しましょう. 1.

HTTP プロトコルという仕組みで送られる. 3. サーバはデータを受信して, 計算加工したり, データベースやファイルを利用した処理をする. 4.

大事なことはデータが情報となってリターンすることです. そうでなければ情報処理にはなりません.

Web ブラウザでデータを入力できるようにするための HTML を理解する. 3. Web ブラウザに情報を表示するための HTML を理解する, 4.

4 データから情報へ 42 前ページで述べたように,Web 情報処理システムでは, 1. Web サーバの仕組みと動作を理解する 2. Web ブラウザでデータの入出力を行う画面を設計する 3. Web サーバで実行するプログラムを開発することが要求されます. まず, 情報処理におけるデータ ( 情報 ) の流れを下図で理解しましょう. 1. 左右のエンドユーザがクライアントコンピュータからデータを入力 (input) する. 2. そのデータはサーバに送信される. HTTP プロトコルという仕組みで送られる. 3. サーバはデータを受信して, 計算加工したり, データベースやファイルを利用した処理をする. 4. 結果をクライアントコンピュータに送信する. 同じく HTTP プロトコルという仕組みで送られる. 5. エンドユーザは情報を得る. 大事なことはデータが情報となってリターンすることです. そうでなければ情報処理にはなりません. それはともかくとして, 本章では以下のことを学習しましょう. 1. Web サーバを構築する. 2. Web ブラウザでデータを入力できるようにするための HTML を理解する. 3. Web ブラウザに情報を表示するための HTML を理解する, 4. ついでに JavaScript でプログラミングの勘所を理解する. Web based Client /Server System クライアントコンピュータ Web サーバコンピュータクライアントコンピュータ Data Information データ計算加工蓄積 Data Information 入力出力画面設計入力出力画面設計 HTML JavaScript Database File HTML JavaScript

Web サーバの構築 43 本講義では,Micro Soft 社製 IIS 互換の Baby Web Server(free software) を利用します. 以下の手順で Web サーバを構築しましょう. 1. Pablo Software Solutions(http://Web.pablosoftwaresolutions.com/) にアクセス. 2.

exe" をダブルクリックして起動する. "Web Server Started " と表示されれば OK! 7. Web サーバのホームディレクトリを設定するために,"Settings" をクリック (2). "C: WebPages" が標準になっているが, 適宜変更する. 大学では "X: WebPages" とする. 8.

5 Web サーバの構築 43 本講義では,Micro Soft 社製 IIS 互換の Baby Web Server(free software) を利用します. 以下の手順で Web サーバを構築しましょう. 1. Pablo Software Solutions( にアクセス. 2. トップページを一通り読み,"Downloads" をクリック (1). 3. "Baby Web Server 2.7.2" をクリック. 4. "Download Baby Web Server 2.7.2" をクリックしてダウンロードする. 5. 圧縮されているので展開する."babyweb.exe" が Web サーバプログラムである. 6. "babyweb.exe" をダブルクリックして起動する. "Web Server Started " と表示されれば OK! 7. Web サーバのホームディレクトリを設定するために,"Settings" をクリック (2). "C: WebPages" が標準になっているが, 適宜変更する. 大学では "X: WebPages" とする. 8. この Web Server へのアクセス URL 個人のローカルな PC のとき第 5 演習室の PC のとき *** はディスプレイに表示されている 1 漢字のファイル名や漢字のタグ名は処理できないので注意しよう. 例 :HTML ファイル, ASP ファイル, 画像ファイル <INPUT TYPE="TEXT" NAME=" 氏名 " > 2 Default Page の意味を理解しよう. Default Page はホームディレクトリとも言う Web Server はこのディレクトリ内に要求された HTML ファイルなどがあるものとみなして探しに行く

ボディ部文章全体ヘッダ部演習内容 44 メタボで知られるようになった BMI(Body Mass Index) を計算する例題を通して HTML の基本タグから JavaScript の初歩を演習しましょう. 参考 http://taniac.shiga-u.jp/example/bmi/bmi07.html 本講義全体を通して使用する HTML タグを以下のように整理して理解してください.

6 ボディ部文章全体ヘッダ部演習内容 44 メタボで知られるようになった BMI(Body Mass Index) を計算する例題を通して HTML の基本タグから JavaScript の初歩を演習しましょう. 参考本講義全体を通して使用する HTML タグを以下のように整理して理解してください. HTML の構造定義 :, 文字の装飾 :<H1>, <H2>, <FONT > 段落の整形 : <BR>, <HR>, <CENTER> 画像表示 :<IMG SRC= > 表の作成 :<TABLE> リンク :<A HREF= > データ入力 :<FORM> HTML タグ記述のきまり HTML(Hyper Text Markup Language) はハイパーテキスト ( テキストあるいは画像や音声データを相互に関連づけた一つのディジタル文書のこと ) を整形する記号の集まりで, 一般に HTML タグと呼ばれる. タグは,<FONT SIZE= > のように < > で囲んで区別する. また, タグの有効範囲を示すために, 範囲の終わりには,</FONT> のように対応するタグに " / " を付けた終了タグを記述する.  で囲まれた文書はコメントとなり実際には表示されない. コメントは複数行にまたがってもよい. 次の例のように記述内容を説明することで, 理解しやすくなる. HTML の基本構造  <TITLE>BMIの計算 </TITLE>  <SCRIPT Language="JavaScript"> function f_bmi( hikisu ) { : </SCRIPT>  <CENTER> <FORM Name="bmi_window"> <TABLE Border="1" BGColor="pink"> <CAPTION>BMIの計算 </CAPTION> : </TABLE> </FORM> </CENTER> BMI07.html アクセスと URL(Universal Resource Location) HTMLファイルはWebサーバに置き,Webブラウザで表示する. 1 前ページのSettingsで指定した "Web Pages" フォルダに HTMLファイルを保存する. 例 bmi.html 2 Webブラウザでアクセスする.

BMI -1-45 順を追って画面を作っていきましょう. Webpages フォルダ内に bmi フォルダを作成して, ここへ bmi 関連の HTML ファイルを保存することにしましょう. 第 1 段階は "bmi01.html" とします. 字下げ, 改行, 注釈を入れて, テキスト構造を見やすくなるようにするとよいですね. bmi01.html <!

7 BMI 順を追って画面を作っていきましょう. Webpages フォルダ内に bmi フォルダを作成して, ここへ bmi 関連の HTML ファイルを保存することにしましょう. 第 1 段階は "bmi01.html" とします. 字下げ, 改行, 注釈を入れて, テキスト構造を見やすくなるようにするとよいですね. bmi01.html  <TITLE>BMI の計算 </TITLE>   <H1>BM の I 計算 </H1> <H2> データ入力 </H2> 身長 (cm):<br> 体重 (kg) :<BR> 性別 : <P> 入力したら計算ボタンを押して下さい. 結果が表示されます. </P>  ポイント : 1. 実行には, 次のように URL を打ち込む. ただし,Web サーバがスタートしていること. *** は利用している PC のディスプレイに書いてある番号を入力する. 2. テキストファイルでは, 半角空白で字下げをしたが, 結果には反映されない. 3. <H1>BMI の計算 </H1> <Hn> は見出しを意味する.<H1> から <H6> まである.<H1> は大見出し. <H1> と <H2> では図のように文字サイズも異なる. 4. <BR> は改行を行う. Break の略. リターンキーによるテキストファイルでの改行は反映されない. 5. <P> から </P> は段落を表す. Paragraph の略. 6. <! から --> は注釈で, 表示されない. 説明書きである. 7. 計算ボタンはまだない.

8 BMI 第 2 段階は "bmi02.html" とします. 身長, 体重, 性別のデータ入力枠を作成してみましょう. <FORM> <INPUT TYPE= > タグをマスターしよう. bmi02.html  <TITLE>BMI の計算 </TITLE>   <H1>BMI の計算 </H1> <H2> データ入力 </H2> <FORM Name="BMI_Keisan"> 身長 (cm):<input Type="text" Name="height" Size="8"><BR> 体重 (Kg): <INPUT Type="password" Name="weight" Size="8">(<BR> 性別 :<INPUT Type="radio" Name="sex" Value=" 男 "> 男 <INPUT Type="radio" Name="sex" Value=" 女 "> 女 <BR> <P> 入力したら計算ボタンを押して下さい. 結果が表示されます. </P> <INPUT Type="button" Name="keisan" Value=" 計算 " > <INPUT Type="reset" Name="reset" Value=" リセット "> </FORM>  text password radio Baby Web Server では漢字で " 身長 " と記述できない NAME タグの漢字は処理できない! ポイント : データ入力画面は <FORM> タグで作成する. 入力に応じたタグの使い方をマスターしよう. 1 身長 :<INPUT Type="TEXT" Name="height" Size="8"> 最大 8 桁 (Size) の文字列 (TEXT) を入力. このデータの名札 (Name) は "height" とする. 身長が 175cm と入力されると,"height=175" と記録される. 2 体重 : <INPUT Type="password" Name="weight" Size="8"> 最大 8 桁 (Size) の非表示文字 (password) を入力. このデータの名札 (Name) は "weight" とする. 体重が 72Kg と入力されると,"weight=72" と記録される. Password タイプは, 画面表示がとマスクされる. 本来はパスワードのような見られたくない文字列を入力するためのものである. 3 性別 :<INPUT Type="radio" Name="sex" Value=" 男 "> 男 <INPUT Type="radio" Name="sex" Value=" 女 "> 女 <BR> 図のように男女どちらかのラジオボタンをマウスで選択する方法である. 男が選択された場合は,"sex= 男 " と記録される. 4 <INPUT Type="button" Name="keisan" Value=" 計算 " > 図のように計算ボタンが作成される. 5 <INPUT Type="reset" Name="reset" Value=" リセット " > リセットボタンは, 入力されたデータを一括消去するだけ.

BMI -3-47 第 3 段階は "bmi03.html" とします. <INPUT TYPE="checkbox"> をマスターしよう. bmi03.html <!-- ヘッダの開始 --> text password <TITLE>BMIの計算 </TITLE> checkbox <!-- ヘッダの終了 --> <!

9 BMI 第 3 段階は "bmi03.html" とします. <INPUT TYPE="checkbox"> をマスターしよう. bmi03.html  text password <TITLE>BMIの計算 </TITLE> checkbox   <H1>BMIの計算 </H1> <H2> データ入力 </H2> <FORM Name="BMI_Keisan"> 身長 (cm):<input Type="text" Name="height Size="8""><BR> 体重 (Kg): <INPUT Type="password" Name="weight" Size="8">(<BR> 性別 :<INPUT Type="checkbox" Name="sex" Value=" 男 "> 男 <INPUT Type="checkbox" Name="sex" Value=" 女 "> 女 <BR> <P> 入力したら計算ボタンを押して下さい. 結果が表示されます. </P> <INPUT Type="button" Name="keisan" Value=" 計算 " > <INPUT Type="reset" Name="reset" Value=" リセット "> </FORM>  ポイント : データ入力画面は <FORM> タグで作成する. 入力に応じたタグの使い方をマスターしよう. 1 性別 :<INPUT Type="checkbox" Name="sex" Value=" 男 "> 男 <INPUT Type="checkbox" Name="sex" Value=" 女 "> 女 <BR> 図のように男女のチェックボックスをマウスで選択する方法である. 男が選択された場合は,"sex= 男 " と記録される. しかし, チェックボックスは両方にチェックを入れることができる. したがって, 項目を複数選択する場合に利用すべきである. 2FORMタグによってデータが送信されるイメージを理解しよう次のようにパッケージの名前と内容物でイメージするとよい 1. パッケージに一つのデータがある場合パッケージの名前 (sex) 保存されたデータ ( 男 ) 2. パッケージに 2 つ以上のデータがある場合パッケージの名前 (sex) 保存されたデータ ( 男, 女 )

BMI -4-48 第 4 段階は "bmi04.html" とします. プルダウンメニューから選択する <SELECT> をマスターしましょう. bmi04.html <!-- ヘッダの開始 --> <TITLE>BMIの計算 </TITLE> text password <!

10 BMI 第 4 段階は "bmi04.html" とします. プルダウンメニューから選択する <SELECT> をマスターしましょう. bmi04.html  <TITLE>BMIの計算 </TITLE> text password  SELECT <H1>BMIの計算 </H1> <H2> データ入力 </H2> <FORM Name="BMI_Keisan"> 身長 (cm):<input Type="text" Name="height" Size="8"><BR> 体重 (Kg):<INPUT Type="password" Name="weight" Size="8"><BR> 性別 : <SELECT Name="sex"> <Option Value=" 男 "> 男 </Option> <Option Value=" 女 "> 女 </Option> </SELECT> <P> 入力したら計算ボタンを押して下さい. 結果が表示されます. </P> <INPUT Type="button" Value=" 計算 " Name="keisan"> <INPUT Type="reset" Value=" リセット " Name="reset"> </FORM> ポイント : 1 性別 : <SELECT Name="sex"> <Option Value=" 男 "> 男 </Option> <Option Value=" 女 "> 女 </Option> </SELECT> Option で設定されたデータがプルダウンメニュで表示される. 同時に複数選ぶように設定することもできる. <SELECT Name="sex" Multiple> 注意 :<Option> 男 </Option> のように "Value" 句を省略している例があるが省略しないこと! 考察 : 右図は Yahoo の路線を指定する画面である. タグがどのように利用されているか確認してみよう.

BMI -5-49 第 5 段階は "bmi05.html" とします. TABLE タグを使って表示をきれいにしましょう. <TABLE> をマスターしましょう. bmi05.

11 BMI 第 5 段階は "bmi05.html" とします. TABLE タグを使って表示をきれいにしましょう. <TABLE> をマスターしましょう. bmi05.html <TITLE>BMIの計算 </TITLE> <FORM Name="BMI_Keisan"> <TABLE Border="1"> <CAPTION>BMIの計算 </CAPTION> 行行 <TD ColSpan="2" Align="center"> 基礎データ </TD> 列 <TD Align="center"> 身長 (cm)</td> <TD><INPUT Type="text" Name="height" Size="8"></TD> <TD Align="center"> 体重 (kg)</td> <TD><INPUT Type="password" Name="weight" Size="5"></TD> <TD Align="center"> 性別 </TD> <TD> <SELECT Name="sex"> <Option Value=" 男 "> 男 </Option> <Option Value=" 女 "> 女 </Option> </SELECT> </TD> </TABLE> <P> 入力したら計算ボタンを押して下さい.<BR> 結果が表示されます. </P> <INPUT Type="button" Value=" 計算 " Name="keisan"> <INPUT Type="reset" Value=" リセット " Name="reset"> </FORM> CAPTION ColSpan TR, TD TR, TD TR, TD ポイントちょっと難しく見えますが, 表の構造 ( 外枠, 行, 列 ) とタグを対応づけて理解しよう. 1 <TABLE> </TABLE> で一つのテーブル枠を指定し, 2 で行を示し TR : Table Rowの略 3 <TD> </TD> で列の項目を表す TD : Table Dataの略 4 <CAPTION></CAPTION> は表見出し Caption : 表題, タイトル 5 <TH> というのがあり, 列見出しに使う. TH : Table Headerの略 6 <TABLE Border= 外枠の太さ CellSpacing= 罫線の太さ > : 太さはピクセル数で指定する 7 <TR Align={left, center, right VAlign={top, middle, bottom>:{ 内のどれかを指定する 8 <TD Align={ 同上 VAlign={ 同上 Bgcolor= 背景色 > ColSpan= 結合する列のセル数 RowSPan= 結合する行のセル数 > : ちょっと複雑な表組みができる

12 ポイントプログラム ( 関数 ) を実行する方法とデータの受け渡しの仕組みを理解しよう. 1. プログラムは [ 計算 ] というボタンがクリックされた時に動作する. < Input Type="button" Value=" 計算 " onclick="keisan(this.form)"> "onclick" を JavaScript のイベントハンドラといい,[ 計算 ] ボタンがクリックされると "keisan" という関数が実行される. カッコ内の "this.form" を引数といい, この <FORM> 内の "Name" で指定されたラベルとデータが引き渡される. この例では, X=10,Y=20 となる. 実は HTML の "<FORM>" タグは JavaScript の Form オブジェクトとみなされる. 2. <SCRIPT Language="JavaScript"> の書き方も上の例を参考にすること. <! >( コメント ) で囲むこともあるが,JavaScript が使えない Web ブラウザのためである. 本テキストでは, そのようなブラウザは少数であることと, 見やすくするために省いた. 3. 関数は実行される行より前になければならない. 上の例では部に書いている. 書き方は "function" で始まり, 関数名と "( )" 内に引数を書く. "{" から "" の間にスクリプト ( プログラム ) を書く. function keisan( Hikisu ) { Hikisu.Z.value=parseInt(Hikisu.X.value) + parseint(hikisu.y.value) "Hikisu.X.value" は受け取った引数 ( オブジェクト ) の中からラベル ( プロパティ )X を探し出し, その値 (value) を取り出す. このままでは文字列なので計算ができるように " parseint( )" 関数で数値データに変換する.X と Y を足し算して, その結果を "Z" に代入する. 関数は必要な数だけ定義ができる. BMI 第 6 段階は "bmi06.html" とします. これまでは, データを入力して計算ボタンをクリックしても計算されませんでした. 計算するにはプログラムが必要です. JavaScript でプログラムを作ってみましょう. 次の X+Y=Z という例で仕組みを理解しましょう. bmi06.html <TITLE>JavaScript</TITLE> <SCRIPT Language="JavaScript"> function keisan( Hikisu ){ Hikisu.Z.value=parseInt(Hikisu.X.value) + parseint(hikisu.y.value); </SCRIPT> JavaScript の腕試し Hikisu Z=30 Hikisu X=10 Y=20 Z=? <FORM Name="X+Y=Z"> <Input Type="text" Name="X" Size="5"> + <Input Type="text" Name="Y" Size="5"> = <Input Type="text" Name="Z" Size="5"> <HR Align="left" Width="150"> <Input Type="button" Value=" 計算 " onclick="keisan( this.form )"> <Input Type="reset" Value=" 消去 "> </FORM> 帰り this.form Z=30 行き this.form X=10 Y=20 Z=?

$プログラムの 3 大構造の一つです. 3 大構造 : 連接, 判断, 反復 bmi07.html( ヘッダ部 ) <TITLE>BM I の計算 </TITLE> <SCRIPT Language="JavaScript"> function f_bmi(hikisu){ // 受け取ったデータの前処理 v_height$

13 BMI 最終段階として,BMI を計算してメタボ評価をしてみましょう. "bmi05.html" を拡張して, "bmi07.html" とします. 行数 ( 命令ステップ ) が多いのでヘッダ部とボディ部に分けて表示します. 穴が開いている部分は各自で考えましょう. BMI= 体重 (Kg) 身長 (m) 2 計算は簡単ですが, メタボ評価するために if 命令を使います. プログラムの 3 大構造の一つです. 3 大構造 : 連接, 判断, 反復 bmi07.html( ヘッダ部 ) <TITLE>BM I の計算 </TITLE> <SCRIPT Language="JavaScript"> function f_bmi(hikisu){ // 受け取ったデータの前処理 v_height = parseint(hikisu.height.value ) / ; v_weight = parseint(hikisu.weight.value); v_bmi = / Math.pow(, 2); // 性別ごとに BMI に応じた判定をする if( hikisu..value == " 男 " ) { if( v_bmi < 20 ) { v_msg=" やせぎみです. もっと食べても大丈夫です."; else if( v_bmi < 25 ) { v_msg=" いい感じです.BMI が 22 のとき最も病気の少ない状態と言われていてます."; else if( v_bmi < 30 ) { v_msg= " ちょっと肥満です. 高血圧高中性脂肪血症になりやすいので気をつけましょう!"; else{ v_msg= " 高肥満です. 食生活の改善, 適度な運動をしましょう!"; else{ if( v_bmi < 18.5 ) { v_msg=" やせぎみです. 過度なダイエットに注意しましょう."; else if( v_bmi < 24 ) { v_msg=" いい感じです. 太り気味と思っているでしょうが, 最も病気の少ない状態です."; else if( v_bmi < 30 ){ v_msg=" 軽度の肥満です. 高血圧高中性脂肪血症になりやすいので気をつけましょう!"; else{ v_msg =" 高肥満です. 食生活の改善, 適度な運動をしましょう!"; // 判定結果を出力フォームに返す hikisu.bmi.value = v_bmi; hikisu.advice.value = v_msg; </SCRIPT> 原始的デバッグ : 次のステートメントを挿入して実行位置を表示する document.write(" ここは実行したよ!<BR>");

BMI -7-52 1. ヘッダ部のスクリプトの意味はわかりましたか? 2. // で始まる行は注釈です. 3. If( 条件式 ) { 真の時の処理 else { 偽の時の処理が基本形ですが, さらに条件分岐しているため複雑に見えますね. 論理構造を整理してください. bmi07.

14 BMI ヘッダ部のスクリプトの意味はわかりましたか? 2. // で始まる行は注釈です. 3. If( 条件式 ) { 真の時の処理 else { 偽の時の処理が基本形ですが, さらに条件分岐しているため複雑に見えますね. 論理構造を整理してください. bmi07.html( ボディ部 ) <FORM Name="bmi_window"> <TABLE Border="1"> <CAPTION>BMI の計算 </CAPTION> <TD ColSpan="2" Align="center"> 基礎データ </TD> <TD Align="center"> 身長 (cm)</td> <TD><INPUT Type="text" Name="height" Size="8"></TD> <TD Align="center"> 体重 (kg)</td> <TD><INPUT Type="password" Name="weight" Size="5"></TD> <TD Align="center"> 性別 </TD> <TD> <SELECT Name="sex"> <Option Value=" 男 "> 男 </Option> <Option Value=" 女 "> 女 </Option> </SELECT> </TD> </TABLE> <P> 入力したら計算ボタンを押して下さい.<BR> 結果が表示されます. </P> <INPUT Type="button" Value=" 計算 " onclick="f_bmi( this.form )"> <INPUT Type="reset" Value=" リセット " > <TABLE Border="1"> <CAPTION>BMI 判定結果 </CAPTION> <TD>BMI = <INPUT type="text" Name="bmi" Size="24"></TD> <TD><TEXTAREA Rows="5" Cols="40" Name="advice"></TEXTAREA></TD> </TABLE> </FORM> 課題このようなデザインにしてみよう! <CENTER> <TABLE BGColor="pink"> <HR Width=200> <TEXTAREA> は任意の行と列の窓枠を作るときに使います. ここでは, Rows=5 で 5 行, Cols=40 で 40 文字と指定しています

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合

スライド タイトルなし

スライドタイトルなし