HTML で JavaScript 変数の値を表示する方法。 JavaScript 変数。 PHP変数を外部JavaScriptに渡す方法
場合によっては、PHP グローバル変数を JavaScript スクリプトに渡すことが必要になることがあります。 この記事では、JavaScript で PHP 変数を使用する方法といくつかの例を説明します。
JavaScript の PHP 変数JavaScript コードに PHP 変数を含める必要があるシナリオが多数あります。 たとえば、Web サイトのページがユーザーによって要求されると、サーバー上の PHP モジュールが計算を実行し、すべてのページ変数をブラウザー ウィンドウに表示することによってページを生成します。
ページの読み込みが完了すると、(時間ベースのサーバーがない限り) ページを制御できなくなります。 ただし、ページの読み込み時に PHP 変数を JavaScript コードに渡すと、引き続き JS スクリプト内でそれらの変数を使用し、ページのレンダリングと動的動作を制御できます。
次に、JavaScript から PHP、またはその逆に変数を渡す方法を見てみましょう。
PHP変数をインラインJavaScriptに渡す方法HTML ページに JavaScript コードを含めるには、主に 2 つの方法があります。 1 つ目は、コードを同じページ、セクション、または に配置することです。 セクションにインライン JS コードがあり、PHP ユーザー名変数を JavaScript に渡したいとします。 この場合、次のコードを使用する必要があります。
var ユーザー名 = "";
アラート(ユーザー名);
...
JS で新しい変数を定義し、それをユーザー名と呼びました。 次に、この JS PHP 変数を $username 変数に割り当て、これを繰り返します。 当然のことながら、$username 変数はページのこの行より上の部分で定義されている必要があります。$username を出力する PHP コードの周囲では、JS で変数を宣言するときと同じように二重引用符 (" ) を使用していることに注意してください。 PHP 変数が数値の場合は、引用符を使用する必要はありません。 ただし、出力文字列にも引用符が含まれている可能性があり、JS コードが破損する可能性があるため、引用符を正しく使用するようにしてください。
PHP変数を外部JavaScriptに渡す方法
JS コードは、HTML ページに関連付けられた外部ファイル (script.js など) に保存することもできます。 たとえば、時間変数の値 (秒単位) を JS タイマーに渡したい場合は、次のコードを使用できます。
setTimeout(function() ( window.location.href = "/"; ), 秒 * 1000);
上記のコードでは、まず PHP 変数 $秒の値を JS 変数秒に初期化します。 この変数は DOM で使用できるようになり、プラグイン スクリプト (script.js) で使用できるようになります。 上の例では、ユーザーは次の場所にリダイレクトされます。 ホームページ指定された期間が経過した後。
ヒント: PHP および JavaScript では、コード内で変数を使用する前に必ず変数を定義してください。 そうしないと、「未定義の変数」エラー メッセージが表示され、コードは機能しません。
この章では、ActionScript を使用して情報を表示する方法について説明します。 従来、文字列「Hello World」が出力データとして使用されます。 この記事では、この行を 3 つの異なる方法で画面に表示します。
情報を出力するための最初のオプション (writeln 関数)。画面上に情報を表示する最も簡単で最も一般的な方法は、document.writeln(string) 関数です。 以下に例を示します。
< html> < head> < body> < script type= "text/javascript" >document.writeln("Hello World!");この関数を呼び出した後、以前に存在していたすべてのページ コンテンツが新しいコンテンツに置き換えられます。 この場合、「Hello World」行にあります。 したがって、すべてのコンテンツが JavaScript によって生成される場合は、ページの読み込み時にのみこの関数を使用することをお勧めします。 この機能は、サーバーへの呼び出しの数を減らす必要がある状況でも非常に役立ちます。 一度ダウンロードしたソース コード ファイルからは、いくつかのファイルが生成される可能性があります。 いろいろなページ完全自律モードで。
情報を表示するための 2 番目のオプション (アラート機能)。alert(string) 関数はコードのデバッグには非常に適していますが、最終用途には適していません。 これを呼び出すと、碑文と「OK」ボタンが表示されたウィンドウがユーザーの目の前に表示されます。 このようなポップアップは訪問者にとって非常に迷惑であり、さまざまなブラウザ プラグインによってブロックされることが多いため、実際の Web サイトでは使用しないことをお勧めします。 デバッグ用の関数の使用例:
< html> < head> < body> < script type= "text/javascript" >アラート ("Hello World!" ) ;これを実行した後、 標準ウィンドウ Windows (または Linux、または Mac OS) の場合、答えは 1 つだけです。 「OK」ボタンをクリックするまでは、ページを操作することはできません。
情報を表示するための 3 番目のオプション (getElementById 関数)。最も強力で頻繁に使用される方法は、getElementById(tagId) 関数を使用することです。
HTML コード内のすべてのものに ID パラメーターを含めることができます。 どのタグにも行が埋め込まれています (行は空でも構いません)。 タグの ID を通じてそのコンテンツにアクセスし、それに応じてタグを変更できます。 ただし、他のタグは影響を受けません。 例：
< html> < head> < body> < div id= "placeForText" > < script type= "text/javascript" >document.getElementById("placeForText").innerHTML = "Hello World!" ;このコードでは、最初のステップはドキュメントにアクセスし、次に「placeForText」と等しい ID を持つタグ要素へのポインターを取得し (getElementById("placeForText"))、次に innerHTML 関数を使用してポインターを取得します。このタグ要素の内容に。 等価性を使用して、要素のコンテンツに新しい値を割り当てます。
このアプローチは、迷惑なポップアップ メッセージがないこと、HTML ページの一部のみを編集できることという 2 つの理由から、前の 2 つのアプローチよりもはるかに優れています。 当然、この機能を使用する場合、次のオプションも可能です。
< html> < head> < body> < div id= "feedback" > < script type= "text/javascript" >document.getElementById("フィードバック").innerHTML = "こんにちは世界！" ;
このコードが実行されると、HTML タグを使用して書式設定されたテキストが要素内に挿入されます。 つまり、HTML の中に HTML を挿入します。 画面にはおなじみの「Hello World!」という文字が表示されますが、赤字で表示されます。
新規ユーザーを登録するページでも同じメカニズムが使用されます。 ページには 2 つの重要な領域があります。1 つは空白で、もう 1 つは入力が必要なフォームです。 ユーザーがフィールドをスキップしたり、間違った情報を入力してフォームをサーバーに送信しようとすると、入力されたデータを検証するスクリプトがエラーを検出し、ページの残りの部分は変更せずに空白の領域に赤いテキストを表示します。
結論。この記事では、画面上にテキスト (テキスト形式で表される数値やその他の変数) を表示するためのすべての主なオプションを検討しました。 次の記事「JavaScript チートシート #3 - 情報の入力」では、その逆のプロセスについて説明します。
次に、ユーザー イベントを処理する方法を検討しました。 今回は、いくつかのユーザー入力を取得し、それを他の入力と組み合わせて、シンプルなウェルカム ページを作成する方法を見ていきます。
Examples/js/pure_js_greating.html
Hello World 名: 姓: こんにちは!
function Say_hi() ( var fname = document.getElementById("first_name").value; var lname = document.getElementById("last_name").value; var html = "Hello " + fname + " " + lname; document.getElementById ("結果").innerHTML = html ) document.getElementById("say").addEventListener("click",say_hi);
試す！
この例では、以前よりも少しだけ HTML が増えています。 結果を表示するボタンと div に加えて、2 つの入力要素もあります。 それぞれに独自のIDが付いています。
JavaScript コードには、say_hi 関数があります。 これは、前に説明した getElementById メソッドを使用して、id first_name の入力を表す DOM 要素を取得します。 返されるオブジェクトには、ユーザーがそのフィールドに入力したテキストを返す value メソッドがあります。
このメソッドを使用して両方の入力要素の内容を取得し、結果の値を 2 つの変数 fname と lname に割り当てます。
次に、これらの変数を使用して HTML スニペットを作成し、それを新しい HTML 変数に割り当てます。次に、生成された HTML を表示するために innerHTML 属性を (以前と同様に) 設定します。 結果は次のようになります。
面倒なHTML作成
このような単純な HTML であっても + を何度も使用する必要があり、コードは非常に読みにくくなります。 要素のリストやテーブルさえも生成する、より複雑なアプリケーションを作成したい場合に何が起こるかを想像してみてください。 その場で HTML を生成して DOM に挿入するのは非常に面倒です。
Perl、Python、Ruby で書かれたバックエンドでも、同じ問題に遭遇したことがあります。 解決策は、さまざまなテンプレート エンジンを作成することでした。 基本的に、テンプレートはいくつかのプレースホルダー (キーワード) を含む HTML スニペットであり、特定の関数はこの HTML スニペット (テンプレート) といくつかのキーと値のペアをパラメーターとして受け取ります。 次に、この関数は、プレースホルダーが一致するキーの取得された値に置き換えられた新しい HTML スニペットを返します。
Web サイト開発のプロセスでは、JavaScript に何らかの値 (変数、配列) を渡す必要があることがよくあります。そのような場合、通常は次のようにアドバイスされます。
var 変数 = アラート(変数);
インラインで書かれた Javascript は複雑な感情を引き起こします。
まず、これはほとんどの場合、コードスタイルに従っていません。
親愛なる読者の皆さん、注意してください。上記の例は完全に間違っている以上のものです。すぐに警告します。これはまさにあなたがすべきではない方法です。しかし、それを正しく行う方法については、思慮深く慎重に以下を読むことができます。
しかし、たとえば、あなたが高い道徳的原則を持っていない人であれば、安全にコピーして好きなことを実行できますが、私はあなたにこれを行うようにアドバイスしたわけではなく、さらには、あなたを思いとどまらせさえしました。
私は JavaScript はファイルのみに保存すべきだと確信していますが、
html を使用すると、ブラウザによる通常のキャッシュが確保され、プロジェクト内でこのスクリプトそのものを見つけやすくなります。
しかし、PHP から値を渡しながら、同時に美しいコードを維持するにはどうすればよいでしょうか?
答えは、JavaScript で eval() を使用することです。
接続例を見てみましょう グーグルマップ.
まずはグーグルマップ（ライブラリ）を接続しましょう
DOM をロードした直後にマップ描画の開始を初期化します。
変数 $ = jQuery.noConflict(); $(document).ready(function () ( if ($("#map-canvas").length) ( functionInitialize() ( var place = eval($("#map-canvas").attr("data -place")); var pos = new google.maps.LatLng(place, place); var mapOptions = ( center: pos、zoom: 17、mapTypeId: google.maps.MapTypeId.ROADMAP、mapTypeControlOptions: ( style: google. maps.MapTypeControlStyle.DROPDOWN_MENU )、scrollwheel: false、rotateControl: true ); var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions(45); new google.maps.Marker((位置: pos、マップ: マップ )); google.maps.event.addDomListener(ウィンドウ, "ロード", 初期化));
必要なものを作成しましょう html要素
このストリートマジックの説明
js では次の行に興味があります。
Var place = eval($("#map-canvas").attr("data-place"));
$("#map-canvas").attr("data-place")
id map-canvas を持つ要素の data-place 属性を取得した後、 eval() が文字列を js コード、より具体的には配列に変換します。 角括弧があります。
HTML5 仕様によれば、ブラウザはデータで始まるタグの属性をスキップします。この属性はレンダリングには影響しませんが、その値は JavaScript で使用できます。
HTML コードは次のように変更できます。
