方 程 式 を 解 いてみよう! C++ から PHP + HTML + JavaScriptへ 静 岡 理 工 科 大 学 総 合 情 報 学 部 コンピュータシステム 学 科 幸 谷 智 紀 (こうや とものり) http://na-inet.jp/ 今 日 のメニュー 1. コンピュータ 環 境 と 本 日 のゴールの 確 認 2. PHPプログラムを 実 行 してみる 3. HTMLで 自 分 のホームページを 作 ってみる 4. HTMLフォームとPHPプログラムを 連 携 させる 5. 以 下,2 4を 繰 り 返 す 1. 四 則 演 算 と 平 方 根 を 計 算 するプログラム 2. 1 次 方 程 式 を 解 くプログラム 3. 2 次 方 程 式 を 解 くプログラム 6. フォーム 入 力 値 の 自 動 チェック 7. まとめ 1
1.コンピュータ 環 境 の 確 認 IDとパスワードを 使 って,ログイン ログアウト 使 用 するPCとOS PC Intel Pentium II/Intel Core i3 OS CentOS 5.5 x86_64 (Linux) 使 用 するソフトウェア GNOMEテキストエディタ ターミナル( 端 末 ) Firefox(Webブラウザ) http://192.168.1.21/ 本 日 のゴール 計 算 する 4つのFormを 作 っ て 実 行 してみる 1. HTMLフォームとPHPの 連 携 2. 四 則 演 算 と 平 方 根 の 計 算 3. 1 次 方 程 式 4. 2 次 方 程 式 2
プログラミングとは 何 か? コンピュータを 動 かす 指 令 書 スクリプト (= ソースコード) 逐 次 解 釈 しながら 実 行 インタプリタ OS ハードウェア インタプリタによるスクリプト の 実 行 :JavaScript/PHP 等 プログラム 作 成 のキホン 日 本 語 表 記 以 外 は 全 て 半 角 英 数 字! と は 同 じ 文 字 と は 同 じ 文 字 3
2.PHPプログラムを 実 行 してみる 手 順 1. GNOMEエディタでプログラムを 作 成 して 保 存 例 ) hellow.php <?php?> printf( Hellow, PHP! n ); 2. ターミナルから 実 行 のコマンドを 打 ち 込 む [tkouya@cs-room443-d01 public_html]$ php hellow.php Hellow, PHP! 画 面 に 表 示 ( 出 力 )される やってみよう(1/2) 2つの 数 (a, b)の 四 則 演 算 と 平 方 根 を 計 算 す るPHPプログラム(arith.php) <?php 処 理 手 順 ( 上 か ら 下 へ)?> 実 行 結 果 $a = 3; $b = 2; 変 数 $aという 箱 (データが 保 存 される 場 所 )が 作 られ, そこに 3 が 記 憶 される( 代 入 されるイメージ) // 足 し 算 $c = $a + $b; printf(" 加 算 : %f + %f = %f n", $a, $b, $c); 変 数 $a, $b, $cを 小 数 形 式 (%f)で 表 示 $ php arith.php 下 線 部 を 入 力 ($は 打 たない!) 加 算 : 3.000000 + 2.000000 = 5.000000 4
やってみよう(2/2) 引 き 算 ( 減 算, -(マイナス)),かけ 算 ( 乗 算, *(ア スタリスク)), 割 り 算 ( 除 算,/(スラッシュ))も 同 様 に 計 算 して 表 示 する 部 分 を 追 加 $aの 平 方 根 (sqrt($a))を 計 算 する 部 分 を 追 加 $ php arith.php 加 算 : 3.000000 + 2.000000 = 5.000000 減 算 : 3.000000-2.000000 = 1.000000 乗 算 : 3.000000 * 2.000000 = 6.000000 除 算 : 3.000000 / 2.000000 = 1.500000 平 方 根 : sqrt(3.000000) = 1.732051 1 次 方 程 式 を 解 くPHPプログラム(1/2) linear.php a * x + b = 0という1 次 方 程 式 を 解 く(a, bは 定 数 ) x = -b / a 変 数 $a, $bを 作 って, 解 $x = -$b / $aを 計 算 例 ) 3 * x + 2 = 0の 場 合 $ php linear.php (+3.000000) * x + (+2.000000) = 0 x = -0.666667 5
1 次 方 程 式 を 解 くPHPプログラム(2/2) 問 題 あり! ($a = 0の 時 を 考 えていない) $ php linear.php (+0.000000) * x + (+2.000000) = 0 PHP Warning: Division by zero in /home/tkouya/public_html/equation_php/linear.php on line 7 x = 0.000000 解 $xを 計 算 する 前 に$a をチェックする if($a!= 0) { $x = -$b / $a; printf("x = %f n", $x); } else { printf(" 解 なし! n"); } $ php linear.php (+0.000000) * x + (+2.000000) = 0 解 なし! 2 次 方 程 式 を 解 くプログラム(1/3) quad.php ax 2 + bx + c = 0を 解 の 公 式 を 使 って 解 く 判 別 式 : d = b 2 4acの 値 を 利 用 する x 1 = う 書 く? b d 2a, x 2 = b+ d 2a プログラムではど 判 別 式 d = b 2 4acが 正 (d 0)の 場 合 のみ 考 える( 実 数 解 のみ) 6
2 次 方 程 式 を 解 くプログラム(2/3) 1. 係 数 $a, $b, $cを 代 入 2 次 方 程 式 を 表 示 2. 判 別 式 $dを 計 算 3. $dの 値 が0 以 上 (if($d >= 0))の 時 は 解 の 公 式 を 使 って$x1, $x2を 計 算 して 表 示 4. それ 以 外 の 時 は, 複 素 数 解 とだけ 表 示 例 ) 3x 2 6x + 3 = 0 の 場 合 $ php quad.php (+3.000000) * x^2 + (-6.000000) * x + (+3.000000) = 0 x1 = 1.000000 x2 = 1.000000 2 次 方 程 式 を 解 くプログラム(3/3) 次 の2 次 方 程 式 の 解 を 計 算 して 値 を 確 認 せよ 1. 3x 2 +2x+1=0 2. 7x 2 +5x+2=0 3. 33x 2-96x+8=0 複 素 数 解 : x1 = (-0.333333) + (-0.471405) * I x2 = (-0.333333) + (+0.471405) * I 実 数 解 : x1 = 1.000000 x2 = -0.285714 実 数 解 : x1 = 0.085868 x2 = 2.823223 7
3.HTMLで 自 分 のホームページを 作 ってみる HTML Hyper Text Markup Language 静 的 Webページ( 動 かないWeb)を 作 成 するコ ンピュータ 言 語 の 一 種 フォーム 機 能 (ブラウザからの 入 力 受 付 )も 備 える Webプログラミングとは 何 か? (Web)ブラウザ JavaScript Flash Plug-in OS TCP/IP ハードウェア Ethernet LAN インターネット (Web)サーバ PHP OS TCP/IP ハードウェア Ethernet RDB MS (Web)クライアント(マシン) Webアプリケーション (Web)サーバ(マシン) 8
HTMLの 構 造 <html> <head> <title>webページのタイトル</title> </head> <body> Webページ 本 文 </body> </html> 静 的 Webページの 作 成 1. ホームディレクトリ 直 下 に public_html ディレクト リを 掘 り,そこへ 移 動 する 2. HTMLファイルを 作 り,public_htmlディレクトリに 保 存 する( 常 にこのフォルダに 保 存 せよ) 3. ブラウザで 表 示 して 確 認 http://192.168.1.21/~ログインid/ http://192.168.1.21/~ログインid/index.html どちらも public_html/index.html を 読 み 込 む 9
index.htmlの 作 成 <html> <head> <title> 高 校 名 自 分 の 名 前 </title> </head> <body> <h1> 自 分 の 名 前 の 作 ったもの</h1> <h2> 四 則 演 算 </h2> <form action= PHPスクリプト 名 method= GET > フォーム1 </form> <hr> この 枠 部 分 を 追 加 していく! </body> </html> 4. HTMLフォームとPHPプログラムを 連 携 させる フォームが 受 け 付 けたデータをPHPプログラムに 渡 して 処 理 さ せる 1. 次 のフォームをindex.htmlに 追 加 <h2>フォームとphpスクリプトの 連 携 </h2> <form action="get_hellow.php" method="get"> 入 力 データ: <input type="text" name="input" /><br /> <input type="submit"> </form> <hr /> 2. get_hellow.phpスクリプトを 作 成 実 行 確 認 <?php printf("%s<br /> n", $_GET["input"] );?> <a href= index.html > 戻 る</a> index.htmlへのリンク 3. ブラウザから 動 作 を 確 認! 10
やってみよう(1/2) 四 則 演 算 と 平 方 根 を 計 算 するPHPスクリプト(arith.php get_arith.php)とhtmlフォームとの 連 携 やること 1. index.htmlに$_get[ a ], $_GET[ b ]を 渡 すフォーム を 追 加 2. arith.phpをget_arith.phpにコピーし,get_arith.phpを 次 のように 変 更 $aを$_get[ a ]から,$bを$_GET[ b ]から 受 け 取 る( 代 入 する) 改 行 nを<br /> nに 変 更 (HTMLの 改 行 を 追 加 ) 最 後 にindex.htmlへのリンクを 張 る 3. 動 作 確 認 やってみよう!(2/2) 以 下 のHTMLフォームとPHPスクリプトとの 連 携 を 行 う 機 能 をindex.htmlに 追 加 せよ 1. 1 次 方 程 式 を 解 くPHPスクリプト(linear.php get_linear.php)とhtmlフォームとの 連 携 の 追 加 2. 2 次 方 程 式 を 解 くPHPスクリプト(quad.php get_quad.php)とhtmlフォームとの 連 携 の 追 加 11
quad.phpの 複 素 数 解 への 対 応 次 の 部 分 を 追 加 else { printf(" 複 素 数 解 : n"); $x1_r = -$b / (2.0 * $a); $x1_c = -sqrt(-$d) / (2.0 * $a); $x2_r = $x1_r; $x2_c = -$x1_c; printf("x1 = %f + %f * I n", $x1_r, $x1_c); printf("x2 = %f + %f * I n", $x2_r, $x1_c); } 6. フォーム 入 力 値 の 自 動 チェック 四 則 演 算,1 次 方 程 式,2 次 方 程 式 のフォー ム 入 力 値 は 数 値 でなければならない 入 力 値 のチェックはJavaScriptで 行 う 手 順 1. リセットボタンの 設 置 リセットボタンクリック 時 の 確 認 ウィンドウの 表 示 2. Submitボタンクリック 時 に 入 力 値 の 自 動 チェック 機 能 を 追 加 12
リセットボタンの 設 置 と 確 認 ウィンドウ 表 示 1. HTMLフォーム 内 (submitボタンの 横 )に <input type= reset value= リセット > を 追 加 動 作 チェック 2. リセットボタンクリック 時 (onclick)に 確 認 ウィンドウ を 表 示 させるJavaScriptを 追 加 <input value= リセット onclick= return confirm('リセットします よろしいですか?') > 3. 確 認 ウィンドウ 表 示 を 確 認 フォームデータ 入 力 値 の 自 動 チェック(1/2) 1. 以 下 の 内 容 でis_validnum.jsを 作 り,public_htmlフォ ルダに 保 存 <!-- // フォーム 内 容 チェック( 有 効 数 か? & 空 欄 になってないか?) // is_validnum(form.elements0, form.elements1,...) function is_validnum() { var i; for(i = 0; i < arguments.length; i++) { if(!isfinite(arguments[i].value)) { alert(arguments[i].name + "='" + arguments[i].value + "'は 有 効 な 数 ではありません n 修 正 して 下 さい "); return false; // フォームデータを 送 信 しない } 続 く 13
続 き フォームデータ 入 力 値 の 自 動 チェック(2/2) } else if(arguments[i].value == '') { alert(arguments[i].name + "は 空 です "); return false; // フォームデータを 送 信 しない } --> } // すべて 有 効 な 数 値 であればフォームデータを 送 信 return true; 2. SubmitボタンにJavaScriptを 追 記 <input type="submit" value=" 計 算!" onclick="return is_validnum(this.form.a, this.form.b)" /> 3. index.htmlのヘッダ(<head> </head>の 中 )に 以 下 を 追 記 <script type="text/javascript" src="is_validnum.js"></script> 7. まとめ コンピュータは,プログラム 言 語 で 記 述 されたプ ログラムでしか 動 作 させることはできない Webページは 次 のプログラムの 集 合 体 である HTML (HTMLフォームも 含 む) JavaScript PHPプログラム 次 のプログラムを 自 分 のホームページの 機 能 と して 実 現 した 四 則 演 算 と 平 方 根 の 計 算 1 次 方 程 式 の 解 の 計 算 2 次 方 程 式 の 解 の 計 算 14