PHPとjavascriptの連携、PHPの変数を別ファイルのjavascriptで受け取る方法
同一ページ上でPHP、HTML、javascriptを記述
1~4行目 : PHPの記述
6~21行目 : HTMLの記述
14~18行目 : javascriptの記述
以下のように、index.htmlのファイルに3言語(PHP,HTML,javascript)を書くことができます。
<?php
// PHPの変数を宣言
$name = "Takuro";
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>PHP javascript</title>
</head>
<body>
<script>
// PHPの変数を受け取る
const name = "<?php echo $name?>";
console.log(name);
</script>
</body>
</html>PHPファイル、javascriptファイルを分けて記述
それぞれを別ファイルに記述する時は注意が必要です。
PHPファイル (function.php)
<?php
$name = "takuro";
?>HTMLファイル (index.html)
1~3行目 : PHPファイルの呼び出し
5~20行目 : HTMLの記述
14~16行目 : javascriptの記述。これを忘れるとエラーが出ます。
17行目 : 別のjavascriptファイルを呼び出す
<?php
require('./function.php');
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- ここを忘れないように -->
<script>
const name = "<?php echo $name?>";
</script>
<script src="./script.js"></script>
</body>
</html>javascriptファイル (script.js)
コンソールで確認すると変数の値が取得できているはずです。
console.log(name);
まとめ
-
同一ページ内
- HTMLの前にPHPを記述
- </body>タグ前にjavascriptを記述し、受け取る
-
ファイルをそれぞれ分ける
- requireでPHPファイルを呼び出す
- </body>タグ前にjavascriptを記述し、受け取る
- その下に別のjavascriptファイルを読み込み、 PHPの変数を受け取る
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを２つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript（Object.entries）を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク
