削除された内容 追加された内容
Ef3 (トーク | 投稿記録)
## PHP/反復 {{---}} while, for, foreach
タグ: 2017年版ソースエディター
Ef3 (トーク | 投稿記録)
→‎JavaScriptとPHPの連携: 「連携」としていますが、PHPのスクリプトからJSのスクリプトに値やタイミングを渡す意味の連携ではありません。fetch API のエンドポイントのコードのような実際の「連携」の例が望まれます【削除】
タグ: 2017年版ソースエディター
34 行
※ ここには作成途中などで、どの単元に入れたらいいか分からない単元を書きます。単元が完成したら、目次中の適する単元に移動したり、あるいは既存の単元に適するものがなければ単元を新規作成してください。
 
== 脚註 ==
=== JavaScriptとPHPの連携 ===
<references />
;※ 「連携」としていますが、PHPのスクリプトからJSのスクリプトに値やタイミングを渡す意味の連携ではありません。
PHP上でJavaScriptの命令を書き込む場合、たとえば下記のようになる。
 
==== 基本 ====
<syntaxhighlight lang="PHP">
<?php
print "
<script>
alert('Hello World!');
</script>
";
?>
</syntaxhighlight>
<!-- 初学者に向けて全体像を分かり易くするため、意図的にファイル分離せずにHTML中でスクリプトを書いています。なので上記コードはファイル分離しないでください。-->
 
これをそのまま、test.php などとしてwebサーバにアップロードして [http://localhost/test.php localhost/test.php ] などにアクセスすれば、ブラウザ上でアラート(これはJavaScriptの機能)が実行されて表示される。
 
 
documentwrite などを使うには、下記のようにします。print よりも echo を用いるほうが安全に成功します。
 
<syntaxhighlight lang="PHP">
<?php
echo <<<EOM
<script>
document.write("asdf");
</script>
EOM;
?>
</syntaxhighlight>
 
表示結果
asdf
 
==== 画像や動画など ====
上述のような方法で、下記のように図形なども表示させることが可能です。(下記コード内部のJavaScript部分は、[[HTML/HTML5#簡単な動画の例]] からの引用です。)
 
;静止画のコード例
<syntaxhighlight lang="PHP">
<?php
echo <<<EOM
 
 
<!DOCTYPE html>
<html lang="ja">
<head>
<title>簡単なページ</title>
</head>
<body>
 
<canvas id="canvas" width="320" height="240">
</canvas>
 
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,200)";
ctx.fillRect(100, 100, 200, 200);
</script>
 
</body>
</html>
EOM;
?>
</syntaxhighlight>
 
実行結果は、もし実行に成功すれば、webブラウザでのアクセス時に青い四角が表示されます。
 
アニメーションの表示は、PHP側で処理すると通信に負担が掛かってしまうので、JavaScript側で処理させましょう。(下記コード内部のJavaScript部分は、[[HTML/HTML5#簡単な動画の例]] からの引用です。)
 
;動画のコード例
<syntaxhighlight lang="PHP">
<?php
echo <<<EOM
<!DOCTYPE html>
<html lang="ja">
<head>
<title>簡単なcanvasアニメ</title>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
<script>
var cvs = document.getElementById("canvas"); // canvas要素の作成
var ctx = cvs.getContext("2d"); // コンテキストの取得 // なお、以降cvsは使わない
 
var count = 0; // 時間を数えるためのカウンター
 
 
var dummy = function draw() { // var でメモリなど確保しないと後工程が上手く行かない。
/* 背景色 */
ctx.clearRect(0,0,600,500); // clearRect プロパティにて範囲指定で消せる
/* 描画オブジェクト */
ctx.fillStyle="#00F";// 青い四角をこれから動かす
ctx.fillRect(50 + count,30, 40, 40); // fillRectで四角を描画できる
if(count < 300){
count++; // 単なるインクリメント
} // if count の終わり
// 追加
if(count > 150){
clearInterval(kakuho);
} // if count の終わり
// 上記を追加
} // function の終わり
 
// 下記コードが追加された
var kakuho = setInterval(dummy,10); // setInterval の終わり // var で確保しないと clear で止まらない場合あり
</script>
</body>
</html>
 
EOM;
?>
</syntaxhighlight>
 
実行結果は、もし実行に成功すれば、webブラウザでのアクセス時に青い四角のアニメーション(始点の左から、右にむかってアニメーションします)が表示されます。
 
 
[[Category:PHP|*]]