getScriptとは
- ここで説明する getScript とは次の語句からなるjQueryの関数です。
- get
- 読み: ゲット
意味: 取得する - script
- 読み: スクリプト
意味: 台本、脚本、原稿、 ITの分野では簡易プログラムの意味
getScript関数の概要
この関数は、非同期通信による scriptファイルのインポートを行うことができます。
これは、 $.ajax() の短縮形関数です。
構文
サンプルを見る前に構文を確認しておきます。
- url : ファイルのURLを記述します。
- textCode : ファイルのスクリプトコードを文字列として返します。
- textStatus : ファイルの読込みの成功を文字列として返します。
- jqxhr : XHRのレスポンスを返します。
- => {Some processing} : 読込み成功時に実行されるコールバック関数を記述します。
$.getScript(url [, (textCode, textStatus, jqxhr) => {Some processing}]);上記の構文は以下の簡潔な $.ajax() 関数と同じです。
$.ajax({
url: url,
dataType: "script",
success: callback
});
サンプルコードと実行結果
サンプルの準備として、このページとは別に jap-today.js という名のスクリプトを記述したファイルを用意しました。
ここでは、 jap-today.js ファイルを getScript() を使って読込みます。 読込みが成功した時点で jap-today.js に記述されている japToday() 関数を呼び出して実行します。
別ファイル: jap-today.js
function japToday(){
let objDate = new Date();
let arrDayName = new Array('日','月','火','水','木','金','土');
return (
objDate.getFullYear() + "年"+
(objDate.getMonth()+1) + "月"+
objDate.getDate() + "日"+
" (" + arrDayName[objDate.getDay()] + "曜日)"
);
}
- 詳細な説明は割愛します。(関数です。呼び出すと今日の日付を日本語の表記で返します。)
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div><output id="idOutput">innerText</output></div>
<div><button id="idButton">Click</button></div>
<script>...</script>
</body>
- 06: output (id="idOutput" を持つ要素です。結果を表示するための要素とします。)
- 07: button (id="idButton" を持つ要素です。このボタンをクリックすることで script の 02~10 のコードが実行されます。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$.getScript(
"jap-today.js",
function(textCode, textStatus, jqxhr){
$("#idOutput").text(japToday());
$("#idButton").text(textStatus).prop("disabled",true);
}
);
});
</script>
- 02-10: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
- 03-09: $.getScript() (スクリプトファイルを読込みます。)
- 04: "jap-today.js" (構文でいう url の部分です。ファイルのurlを指定します。)
- 05-08: function(){処理} (通信が成功したときに実行されるコールバック関数です。)
- 06: japToday() (この時点で、既に関数を記述してある jap-today.js の読み込みが成功しているので japToday() を実行することができます。)
- 07: text(textStatus) (textStatus は通信が成功したときに取得される「成功」を表すコールバック値です。これを text()メソッドでボタンのテキストに設定します。)
- 07: prop("disabled",true) (呼び出し元の要素を無効に設定します。)
結果: id="idOutput"
実行: id="idButton"