JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

jQueryでdocument.ready関数の外側にグローバル変数を作成する方法

jQueryでグローバル変数を作成するには、変数を<script>〜</script>タグ内のトップレベル、つまり$(document).ready()関数の外側で宣言します。こうすることで変数はグローバルスコープを持ち、ページ内のどの関数からでもアクセスできるようになります。

逆に、変数宣言を$(document).ready()のコールバック関数内に書いてしまうと、その変数はローカルスコープに閉じ込められ、ボタンのonclickハンドラなど外部から参照できなくなるため注意が必要です。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button onclick="createGlobalVariable()">checkGlobalVariable</button>
<script>
   var globalVariable;
   $(document).ready(function() {
      function initializeGlobalVariable() {
         globalVariable = [{
            "name":"John",
            "age":23
         }];
      }
      initializeGlobalVariable();
   });
   function createGlobalVariable() {
      if (globalVariable.length) {
         console.log('The Global variable name is='+globalVariable[0].name+" The Global variable age is="+globalVariable[0].age);
      }
   }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html」（例：index.html）として保存し、ファイルを右クリックします。次に、VS Codeエディターのメニューから「Open with Live Server」を選択してください。

出力結果

プログラムを実行すると、まず次のような画面が表示されます。

jQueryでdocument.ready関数の外側にグローバル変数を作成する方法

その後、ボタン「checkGlobalVariable」をクリックすると、コンソールに次の出力が出力されます。

jQueryでdocument.ready関数の外側にグローバル変数を作成する方法

  1. JavaScriptでドキュメントの読み込み状態（readyState）を確認する方法

    JavaScriptでドキュメント（ページ）の読み込みが完了しているかどうかを確認するには、document.readyStateプロパティを使用します。このプロパティは、現在のドキュメントの読み込み状況に応じて以下の3つの文字列を返します。loading … ドキュメントがまだ読み込み中の状態interactive … ドキュメントの解析は完了したが、画像などのサブリソースは still 読み込み中の状態complete … ドキュメントとすべてのサブリソースの読み込みが完了した状態以下は、ボタンをクリックしたタイミングでdocument.readyStateの値を判定し、ページの読み込み状

  2. 【Python入門】関数内でグローバル変数を使う方法をわかりやすく解説

    「グローバル」と「ローカル」という用語は、スクリプトやプログラム内における変数の有効範囲（スコープ）を表します。グローバル変数とはプログラムのどこからでもアクセスできる変数のことで、ローカル変数はその変数が定義された範囲（関数の中など）からしかアクセスできません。ローカル変数には、グローバルな位置からアクセスすることはできない点に注意しましょう。 グローバル変数とは、関数の外側で定義・宣言された変数のことで、プログラム内のどこからでも自由に利用できます。 ただし、関数のスコープ内に同じ名前の変数が定義されている場合は、グローバル変数の値ではなく、関数内で定義された値が優先して出力されます。 例