// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
JavaScriptの関数を理解するために、最低限に関数の宣言、関数スコープ、グローバル/ローカル変数の操作、関数の巻き上げ、関数のクロージャ、関数の引数定義、関数の呼び出しなどを理解する必要がある
JavaScriptがオブジェクト指向言語と書かれていますが、実際にクラスの定義が見当たらず、代わりに関数(function)でオブジェクトのインスタンスを生成しています。また関数がオブジェクトのインスタンスを生成しなくてもそのままに呼び出して使用しています。
Javaプログラミングの経験があって、JavaScript関数についてあまり勉強しなくて、ある程度コーティングすることができましたが、Javaと比べて柔軟性と曖昧性の高いJavaScriptコードを自己流で書きました。小規模でデバッグがしやすく、いろいろを間違ってもうまく進んできました。
最近少し開発規模が大きくなり、JQueryも導入し、JavaScript関数について詳しく調査して、その特徴と注意点を纏めました。
function myFunc( a, b ){ return a * b ; } console.log( myFunc( 4, 5) ); // 20が表示される
var x = function( a, b ){ return a * b ; }; var z = x( 3, 4 ) ; console.log( z ) ; // 12が表示される
var myFunc = new Function("a", "b", "return a * b"); var x = myFunc( 3, 4 ) ; console.log( x ) ; // 12が表示される
(function () { // 関数名がない alert( "Hello!!" ) ; })(); // 自分自身を呼び出し、"Hello!!"が表示される
var func_var = function func_name(){ console.log( "Hello" ) ; // 関数内でその関数を呼び出し return func_name; // func_name()で記述すると、 //再帰呼び出しになり、メモリが //なくなるまでに「Hello」を表示される } // 変数の関数を呼び出し func_var(); // 関数名として呼び出し func_name(); // 当該関数名が定義されていないエラー発生
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } my_Func.call( this, 2, 3 ); // 5が表示される
function my_Func( p1, p2 ){ console.log( p1+p2 ) ; } var p_array = [5, 8] ; my_Func.apply( this, p_array ); // 13が表示されるcall(),applyの違いは直接に引数をを渡すか、引数を配列に入れて渡すのこと
var x = 10 ; // グローバル変数 function my_func( p ) { var x = p ; // 関数内のローカル変数 return console.log( "x:" + x ); } my_func( 100 ) ; // ローカル変数「x」が100になる console.log( x ); // グローバル変数「x」が10のままになる
var x = 10; // グローバル変数 function my_func( p ) { this.x = p ; // グローバル変数への参照 y = 20 ; // グローバル変数の宣言 return console.log ( "x:" + x ); } my_func( 100 ) ; // 関数内のグローバル変数「x」に100を代入する console.log( x ) ; // グローバル変数「x」が100になる console.log( y ) ; // グローバル変数「y」が20として表示される
function my_func( p ) { var x = p ; // 関数内のローカル変数 return x ; } var fun_var = my_func( 100 ) ; // ローカル変数「x」に100を100代入する console.log( fun_var.x ); // xのundefinedエラーにある
function my_func( base_counter ){ var counter = 0 ; // ローカル変数の宣言 return function count(){ // 返却インナー関数の宣言 counter ++ ; return counter + base_counter ; } } // 独立したクロージャ_1の作成 var my_counter_1 = my_func( 10 ) ; console.log( my_counter_1() ) ; // 11が表示される console.log( my_counter_1() ) ; // 12が表示される // 独立したクロージャ_2の作成 var my_counter_2 = my_func( 100 ) ; console.log( my_counter_2() ) ; // 101が表示される console.log( my_counter_2() ) ; // 102が表示される
function MyObject( p1 ){ this.a = 5; this.getValue = function() { return this.a + p1 ; } } ; var obj_1 = new MyObject(3) ; console.log( obj_1.getValue() ) ;
JavaScriptの関数が処理のプロセスとして利用され、関数内の各メンバーへのアクセスはできない。
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });
(function($){ $.fn.myplugin = function(options) { // mypluginを呼び出す時に引数:optionsとして渡す var settings = jQuery.extend({ // プラグインの初期設定 param:'value', // 任意の変数定義 }, options); // 'options'の設定を優先で、初期設定を上書き var $jquery=this; // プラグインオブジェクトを保存し、内部関数に使用させる var output={ // プラグインの本体:実行の結果 'function1':function(param){ // プラグイン内部関数: 実行の過程を記述 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; // この関数のオブジェクトの保存 }); return output; // 実行結果 }, 'init':function(){ // 初期の実行 $jquery.each(function(){ // プラグインオブジェクト内のすべての関数を実行 var _this=this; _this.$this=$(this); // 各オブジェクトへの参照 var privatefun=function(){} // 初期での準備記述 privatefun(); // 初期準備関数の実行 _this.$this.on('click',function(){ //例としての初期準備関数 //jQuery related stuffs }); }); output.function1("value"); // 最後プラグイン本体実行させる+パラメータを渡す } }; output.init(); // プラグインの実行開始 return output; // プラグインの実行結果を返す }; })(jQuery); // jQueryオブジェクトを'$'に渡す
$("#element").myplugin() ;
Javascriptの関数を使用するとき、関数内の変数定義時に、演算子「this」をつけるか否かは少し迷う(例:var name ⇒ var this.name?)。関数自体だけで言えば、変数の前に「this」をつける(例:var this.name)と「ローカル変数」と言う。変数の前に「this」をつけず(例: var name)に、「グローバル変数」と言うが、当該関数がプロトタイプのcall()/apply()メッソドを使用されると状況は変わり、演算子「this」と併用してオブジェクトの継承のような使用方法ができるようになる。
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.call(null, "111", "abc"); //「data_1:111 data_2:abc」が表示され
function data_fun(d1, d2) { this.data_1 = d1 ; this.data_2 = d2 ; console.log("data_1:"+this.data_1+" data_2:"+this.data_2); } data_fun.apply(null, ["111", "abc"]); //「data_1:111 data_2:abc」が表示され
// 継承される関数の定義 function data_fun(d1, d2) { this.data_1 = d1 ; // 例:二つのメンバーを定義 this.data_2 = d2 ; } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.name ; // "name_1" が表示される obj_1.data_1; // "data_111" が表示される obj_1.data_2; // "data_222" が表示される // もう一個新しいオブジェクトの作成 obj_2 = new obj_constructor("data_333", "data_444") ; obj_2.name ; // "name_1" が表示される obj_2.data_1; // "data_333" が表示される obj_2.data_2; // "data_444" が表示される
// 継承される関数の定義 function data_fun(d1, d2) { data_1 = d1 ; // グローバル変数の定義 this.data_2 = d2 ; // ローカル変数の定義 } // オブジェクトコンストラクタ関数の作成 function obj_constructor(p1, p2){ this.name = "name_1" ; // 継承したいメンバーを呼出し data_fun.call( this, p1, p2 ) ; } // 新しいオブジェクトの作成 obj_1 = new obj_constructor("data_111", "data_222") ; obj_1.data_1; // "undefined" が表示される <= 継承できない
// プラグインの定義 (function($) { var namespace; // 任意な名前 namespace = { // オブジェクトの定義 something : function() { // オブジェクトなインナー関数 // 処理の記述 }, bodyInfo : function() { // 別のインナー関数 // 処理の記述 } }; window.ns = namespace; // windowオブジェクトに"ns"名としてバインディング })(jQuery); // プラグインの呼び出し方 $(function() { ns.something(); // プラグインの関数を呼び出し ns.bodyInfo(); });