サーバサイドスクリプトとクライアントサイドスクリプトを含んだ文書

授業ではプリントによって説明するが，以下のプログラムは，サーバで処理される部分とクライアントで処理される部分を含んでいる．

クライアントに送られた文字列をみるには，上記ページが表示されているときに，マウス右ボタンクリックで表れるメニューから「ソースを表示」を選択してみてほしい．JavaScriptの部分は，そのまま存在し，PHPの部分は処理された結果の文字列が入っていることが確かめられる．


<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.01 traditional//en">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf8">


</head>
<body>
PHPとJavaScriptの例

<?php
$total = 0;
for($i=1; $i<10;$i++) {
  echo $i . "+";
  $total += $i;
}
echo $i . "=";
$total += $i;
echo $total;
?>


  
  


     JavaScriptによる出力場所

</body>
</html>

実行例

htmlの文書形式の基本は

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.01 traditional//en">
<html>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

  種々ヘッダー （生に表示されるものではない，各種設定など）

</HEAD>
<BODY BGCOLOR=white>

     本文

</BODY>

である．

サーバサイドスクリプトphpを埋め込むタグ

html文書中に埋め込む開始と終りのタグ

    <?php

        phpスクリプト

    ?>

のように，<?php と ?> で囲んで記述する．

ファイルの拡張子と<?phpの省略形

html言語で書かれたファイルは，多くの場合"xxx.html", "xxx.htm"のような拡張子をつける．phpを含んだファイルは"xxx.php"とする．Webサーバプロセスは，この拡張子により内容を判断することが多い．サーバの設定によっては，<? ?>で囲まれた文字列をプログラムと解釈せず，文字列そのままをクライアントに送るようにもできる．サーバがapacheである場合，設定ファイル（httpd.confとかconf.d/php.confなど）で <code lang="PHP">

AddType application/x-httpd-php .php </example> のように指定していると，

      <?   スクリプト  ?>

と，始まりタグに"php"という文字を省いてもphpと解釈されるが，サーバでの指定が無い場合をも想定すると"<?php"と書いておくべきである．

クライアントサイドスクリプトJavaScriptを埋め込むタグ

コードの埋め込み

  <script type="text/javascript">
  <!--
      javascriptコード
  //-->
  </script>

のように<script>タグで囲む．

<!— と —> で囲むのは，htmlではコメントに相当する．javascriptを実行できないブラウザは，コメントと理解し何もしないために，これを入れる．（javascriptが解釈できるブラウザのみを想定している場合は，なくてもよいことになる．）
終了に // を入れるのは，javascriptがこれをコメント行として扱うことになる．htmlのパーサ（文法解釈器）→javascriptのパーサ→htmlのパーサと移り変わるときの冒頭の記述は，前のパーサの流儀に従うということである．

  <script type="text/javascript">
    //[![CDATA[
      javascriptコード
    //]]
  </script>

と[![CDATA ]]で囲む記述をすることも「安全のために」行われる．これはCDATA(Characterデータセクション）と呼ばれ，この中にあるメタキャラクタ"<"や"?"はメタキャラクタではなく単なる文字として扱うようにという範囲を指定する．

javascriptコードのファイルは".js"という拡張子を付けることが多い． (Google Maps APIのサンプルコードなどでは，この「セクション」開始，終了を明示している．

別ファイルからの詠み込み

  <script type="text/javascript" src="xxxx.js">
  </script>

のように，ファイル名（上の例ではxxxx.jp）を指定してjavascriptプログラムを読み込むことができる．長いプログラムの場合は，これの方が効率的である．

TOYOKI Hiroyasu
Updated: 2017-06-26

Home / ソフトウェア開発及び演習Home