<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JavaScript &#8211; REONTOSANTA</title>
	<atom:link href="https://knowledge.reontosanta.com/archives/category/programming/javascript/feed" rel="self" type="application/rss+xml" />
	<link>https://knowledge.reontosanta.com</link>
	<description>Collection of personal knowledge</description>
	<lastBuildDate>Mon, 09 Apr 2018 05:48:11 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<atom:link rel='hub' href='https://knowledge.reontosanta.com/?pushpress=hub'/>
<site xmlns="com-wordpress:feed-additions:1">83369280</site>	<item>
		<title>JavaScriptで即時関数(function(){&#8230;})()を使う</title>
		<link>https://knowledge.reontosanta.com/archives/887</link>
					<comments>https://knowledge.reontosanta.com/archives/887#respond</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Tue, 19 Jul 2016 05:37:44 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=887</guid>

					<description><![CDATA[JavaScriptには無名関数を定義・宣言すると同時に即時実行する&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>JavaScriptには無名関数を定義・宣言すると同時に即時実行するための構文、即時関数というものがある。<br />
この即時関数を利用することで、疑似的にブロックスコープを再現できる。</p>
<p>&nbsp;</p>
<h2>即時関数の構文</h2>
<p>基本的には、以下のような構文となる。（他にも記述方法がいくつかある）</p><pre class="urvanov-syntax-highlighter-plain-tag">(function () {
  //処理を記述
})();</pre><p>また、以下のように引数を指定することもできる。</p><pre class="urvanov-syntax-highlighter-plain-tag">(function (param1, param2, ...) {
  //処理を記述
})('foo', 'bar', ...);</pre><p>その他、通常の関数と同様に戻り値を持たせることも可能である。<br />
※この場合、functionを丸括弧で括る必要はない。（理由は後述）</p><pre class="urvanov-syntax-highlighter-plain-tag">var result = function (param1, param2) {
  return param1 + param2;
}(3, 5);</pre><p>&nbsp;</p>
<div class="knowl-content" style="margin-top: 40px;" id="knowl-4052768002"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="4196732648" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><h2>functionを丸括弧で括る目的</h2>
<p>即時関数はfunctionを丸括弧で括ることで実現されているがこの目的は、「関数を式として評価させる為」である。<br />
JavaScriptにはfunction文とfunction式があり、以下のようにfunctionから始まる関数がfunction文、 式の中で関数を定義したもの（つまりfunction以外で始まるもの）がfunction式となる。</p><pre class="urvanov-syntax-highlighter-plain-tag">//function文
function func() {
}

//function式
var func = function () {
};</pre><p>因みにfunction文とfunction式では挙動が異なり、function文の場合は実行された際に関数が常に先頭に定義される。その為、function文はコード上のどの位置に存在しても対象の関数を呼び出すことができる。しかし、function式は読込まれた位置で関数が定義される為、記述位置よりも前で実行することはできない。<br />
また、function式であれば、関数呼び出しの演算子&#8221;()&#8221;をつけて関数定義と同時に関数呼び出しができる。<br />
つまり、即時関数として関数を定義する上でfunctionを丸括弧で括る目的は、関数をfunction文ではなく、function式として扱う為ということになる。<br />
戻り値を変数に代入する即時関数の場合、functionを丸括弧で括る必要がないのも既にfunction式として評価されている為である。<br />
因みにfunction文に関数呼び出しの演算子&#8221;()&#8221;をつけるとSyntax Errorとなる。</p><pre class="urvanov-syntax-highlighter-plain-tag">function (){
  console.log("foo");
}();</pre><p>これはfunction文が&#8221;}&#8221;で終わったとみなされ、以下のようなイメージで解釈される為である。</p><pre class="urvanov-syntax-highlighter-plain-tag">function (){
  console.log("foo");
}
(); // &lt;-Syntax Error</pre><p>&#8220;();&#8221;は、JavaScriptとして不正な構文となる為、ここでエラーが発生する。<br />
繰り返しになってしまうが、この挙動を回避する為にfunction式の記述にする必要があり、その方法としてfunctionを丸括弧で括る（function以外で始まる）ということに繋がる。</p>
<p>&nbsp;</p>
<h2>即時関数を利用する目的</h2>
<p>即時関数を利用する目的は、スコープを汚染せずに新たなスコープを作成することにある。<br />
JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ（ローカルスコープ）」のみであり、関数は任意にスコープを作る手段と成り得る。<br />
関数スコープの中でvarを使って定義された変数は関数の中でローカルな変数になるので、関数の外側の変数を上書きしない。<br />
再利用されることがない一連の処理の中で一時変数を使用する際、それらの変数をすべてグローバル変数とするとグローバルスコープに不要な変数が積み上がっていき、変数名のバッティング等の予期せぬトラブルが発生する可能性がある。<br />
一連の処理を即時関数で包み一時的なスコープの中で実行することで、プログラムをスコープ上のサンドボックス内で実行することになり、スコープの外側への影響を防ぐことができる。<br />
また、即時関数を利用することで関数そのものを格納する変数も必要がなくなる為、グローバルスコープを全く汚染せずに一時変数を関数スコープ内に包み込むことができる。<br />
その他、一連の処理の結果が不変で結果のみが必要な場合、その結果を得るために何度も同じ処理を実行する必要がなくなるメリットもある。</p>
<p>&nbsp;</p>
<h2>即時関数の利用イメージ</h2>
<p>＜初期化処理への利用＞<br />
ページ読み込み時の初期化処理（一度限りの実行）に利用する。</p>
<p>以下の例は、&#8221;label_date&#8221;ラベルを用意してページ読み込みと同時に日時を表示している。<br />
一時変数である&#8221;label&#8221;、&#8221;now&#8221;、そして処理そのものは初期化終了後には不要となるので、即時関数で包みグローバルスコープの汚染を回避できる。</p><pre class="urvanov-syntax-highlighter-plain-tag">document.addEventListener('DOMContentLoaded', function() {
  //初期化処理
  (function () {
      //ラベルオブジェクト取得
      var label = document.getElementById('label_date');
      //現在日時を取得
      var now = new Date();
      //ラベルに日時を設定
      label.textContent = now;
  }());
});</pre><p>以下の例は、ユーザーエージェントの判定を行っている。<br />
判定結果のみが必要であり、判定処理を即時関数とすることで、その結果を取得する為に何度も判定処理を行う必要がなくなる。</p><pre class="urvanov-syntax-highlighter-plain-tag">var device = function(u) {
  return {
    Tablet:
      (u.indexOf("windows") != -1 &amp;&amp; u.indexOf("touch") != -1 &amp;&amp; u.indexOf("tablet pc") == -1) 
      || u.indexOf("ipad") != -1
      || (u.indexOf("android") != -1 &amp;&amp; u.indexOf("mobile") == -1)
      || (u.indexOf("firefox") != -1 &amp;&amp; u.indexOf("tablet") != -1)
      || u.indexOf("kindle") != -1
      || u.indexOf("silk") != -1
      || u.indexOf("playbook") != -1,
    Mobile:
      (u.indexOf("windows") != -1 &amp;&amp; u.indexOf("phone") != -1)
      || u.indexOf("iphone") != -1
      || u.indexOf("ipod") != -1
      || (u.indexOf("android") != -1 &amp;&amp; u.indexOf("mobile") != -1)
      || (u.indexOf("firefox") != -1 &amp;&amp; u.indexOf("mobile") != -1)
      || u.indexOf("blackberry") != -1
  };
}(window.navigator.userAgent.toLowerCase());

console.log(device);</pre><p>＜プライベートプロパティ／メソッドの定義への利用＞<br />
JavaScriptには、privateやprotected等のアクセス修飾子が無い為、オブジェクト内に定義されたプロパティ／メソッドは、全てパブリックなものとして扱われる。<br />
しかし、即時関数とクロージャを利用することで、疑似的にプライベートなプロパティ／メソッドを実現することができる。</p><pre class="urvanov-syntax-highlighter-plain-tag">var counter = function() {
  //プライベートメンバ
  var count = 0;
  //countをクロージャで補足したincrementとshowを返す
  return {
    //加算メソッド
    increment: function() {
      count++;
    },
    //ログ出力メソッド
    show: function() {
      console.log(count);
    }
  };
}();
//メソッドの実行
counter.show(); //0が出力される
counter.increment();
counter.increment();
counter.show(); // 2が出力される
console.log(counter.count); // undefinedが出力される</pre><p>&nbsp;</p>
<h2>即時関数のいろいろな記述方法</h2>
<p>即時関数は、function式として認識させられる構文であれば記述することができる。<br />
つまり、単項演算子から始まる関数を記述すればよい。<br />
単項演算子には&#8221;+&#8221;、&#8221;-&#8220;、&#8221;!&#8221;、&#8221;void&#8221;、&#8221;typeof&#8221;等があり、これらも即時関数の記述に利用できる。</p><pre class="urvanov-syntax-highlighter-plain-tag">(function(){
  console.log("another parentheses");
}());

+function(){
  console.log("plus");
}();

-function(){
  console.log("minus");
}();

!function(){
  console.log("exclamation");
}();

void function(){
  console.log("void");
}();

typeof function(){
  console.log("typeof");
}();</pre><p>上記は、全て動作する。<br />
但し、丸括弧を利用した場合は戻り値に変化がないが、&#8221;+&#8221;、&#8221;-&#8220;の場合は戻り値がnumber型にキャストされ、&#8221;!&#8221;の場合は戻り値がbool型にキャストされ、&#8221;void&#8221;の場合は戻り値が常に&#8221;undefined&#8221;となる。<br />
因みに&#8221;new&#8221;も単項演算子であるが、スコープ内でのthisの示すものが変わってくるので即時関数を記述する目的での使用は控えた方が良いかと思われる。</p>
<p>&nbsp;</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-2169710975"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-3104399204"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/887/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">887</post-id>	</item>
		<item>
		<title>JavaScriptにおけるObject.createの引数</title>
		<link>https://knowledge.reontosanta.com/archives/864</link>
					<comments>https://knowledge.reontosanta.com/archives/864#respond</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Mon, 04 Jul 2016 00:08:43 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=864</guid>

					<description><![CDATA[ECMAScript5で定義されたObject.createを利用す&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>ECMAScript5で定義されたObject.createを利用するとコンストラクタ関数とnew演算子を利用する方法以外でオブジェクトを生成することができる。</p>
<h2>Object.createを利用する</h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var Dog = {
  name: "REON",
  method: function(){
    console.log( "My name is " + this.name);
  }
};
// 新しいオブジェクトを生成
var dog = Object.create(Dog);
// 新しいオブジェクトのメソッドの実行
dog.method();</pre><p>上記のようにObject.createに元となるオブジェクトをプロトタイプとして渡すことで、新しいオブジェクトを生成することができる。<br />
但し、そもそもコンストラクタ関数が無いのでコンストラクタ引数に初期値を与えることができない。</p>
<p>&nbsp;</p>
<div class="knowl-content" style="margin-top: 40px;" id="knowl-3973056918"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="4196732648" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><h2>Object.createの第二引数</h2>
<p>Object.createを利用する上でコンストラクタ引数に相当するものは、第二引数になる。</p><pre class="urvanov-syntax-highlighter-plain-tag">Object.create(proto [, propertiesObject ])</pre><p>尚、Object.createの第二引数は以下のように形式が厳密に定義されている。</p><pre class="urvanov-syntax-highlighter-plain-tag">{
  "プロパティ名": {
    value        : "値",
    writable     : true,
    configurable : false,
    enumerable   : false,
    get          : function(){},
    set          : function(){},
  }
}</pre><p><table id="tablepress-23" class="tablepress tablepress-id-23">
<thead>
<tr class="row-1">
	<th class="column-1">フィールド</th><th class="column-2">既定値</th><th class="column-3">内容</th>
</tr>
</thead>
<tbody class="row-striping row-hover">
<tr class="row-2">
	<td class="column-1">value</td><td class="column-2">undefined</td><td class="column-3">プロパティの値。データディスクリプタのみ。</td>
</tr>
<tr class="row-3">
	<td class="column-1">writable</td><td class="column-2">false</td><td class="column-3">trueの場合、値を変更可能。データディスクリプタのみ。</td>
</tr>
<tr class="row-4">
	<td class="column-1">configurable</td><td class="column-2">false</td><td class="column-3">trueの場合、ディスクリプタ変更や、オブジェクトからプロパティ削除が可能。</td>
</tr>
<tr class="row-5">
	<td class="column-1">enumerable</td><td class="column-2">false</td><td class="column-3">trueの場合、対応するオブジェクトのプロパティ列挙に現れる。</td>
</tr>
<tr class="row-6">
	<td class="column-1">get</td><td class="column-2">undefined</td><td class="column-3">Getter関数。アクセサディスクリプタのみ。</td>
</tr>
<tr class="row-7">
	<td class="column-1">set</td><td class="column-2">undefined</td><td class="column-3">Setter関数。アクセサディスクリプタのみ。</td>
</tr>
</tbody>
</table>
<!-- #tablepress-23 from cache --></p>
<p>上記の規定に従い、オブジェクト生成時に初期値を与えてみる。</p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var Dog = {
  name: "REON",
  method: function(){
    console.log( "My name is " + this.name);
  }
};
// 新しいオブジェクトを生成（第二引数で初期値の指定やメソッドの追加ができる）
var dog = Object.create(Dog, {
  name: {
    value: "SANTA"
  },
  bark: {
    value: function() {
      console.log(this.name + " is barking.");
    }
  }
});
// 新しいオブジェクトのメソッドの実行
dog.method();
dog.bark();</pre><p>上記の例では、プロトタイプに定義したnameの値がオブジェクト生成時に指定した値に書き換わっている。<br />
また、同時に新しいメソッド（bark）を追加している。<br />
尚、nameプロパティを書き換え可能にするには、&#8221;{value: &#8220;SANTA&#8221;, writable: true}&#8221;のようにwritableフィールドにtrueを設定する必要がある。<br />
同様にプロパティ列挙に表示したい場合やプロパティの削除を可能にしたい場合も、対応するフィールドの設定をtrueに変更する必要がある。</p>
<p>&nbsp;</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-1622596561"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-3666212684"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/864/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">864</post-id>	</item>
		<item>
		<title>JavaScriptにおける「this」が指し示すもの</title>
		<link>https://knowledge.reontosanta.com/archives/854</link>
					<comments>https://knowledge.reontosanta.com/archives/854#respond</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Mon, 13 Jun 2016 00:32:38 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=854</guid>

					<description><![CDATA[JavaScriptにおける「this」は、「呼び出し元」で指し示す&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>JavaScriptにおける「this」は、「呼び出し元」で指し示すものが変わってくる。<br />
基本的に以下の4種類のパターンが存在する。</p>
<ul>
<li>関数呼び出し（グローバルオブジェクト）のパターン</li>
<li>メソッド呼び出し（所属オブジェクト）のパターン</li>
<li>コンストラクタ呼び出し（インスタンス自身）のパターン</li>
<li>apply/call呼び出し（強制変更）のパターン</li>
</ul>
<p>&nbsp;</p>
<h2>関数呼び出し（グローバルオブジェクト）のパターン</h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">// 関数定義
function func() {
    this.value= "foo";
    console.log(this);
    console.log(this.value);
}
// 関数呼び出し（thisはグローバルオブジェクトを指す）
func();</pre><p>この場合、「this」は「グローバルオブジェクト」を指す。<br />
つまり、「value」は「グローバル変数」になる。</p>
<p>&nbsp;</p>
<div class="knowl-content" style="margin-top: 40px;" id="knowl-1335962271"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="4196732648" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><h2>メソッド呼び出し（所属オブジェクト）のパターン</h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var myObject = {
  value: "bar",
  method: function() {
    console.log(this);
    console.log(this.value);
  }
}
// メソッド呼び出し（thisは所属オブジェクトを指す）
myObject.method();</pre><p>この場合、「this」はメソッド「method」が所属しているオブジェクトである「myObject」を指す。<br />
因みに以下のようにメソッド呼び出しの中で関数呼び出しをした場合でも関数内の「this」はグローバルを指してしまう為、関数呼び出し時の「this.value」は「undefind」となる。</p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var myObject = {
    value: "bar",
    method: function() {
        console.log(this);
        console.log(this.value);
        // 関数定義
        function method() {
            console.log(this);
            console.log(this.value);
        }
        // 関数呼び出し
        method();
    }
};
// メソッド呼び出し
myObject.method();</pre><p>尚、「this」を別の変数（下記の例では「self」）に格納しておくことで、この問題を解決することができる。</p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var myObject = {
    value: "bar",
    method: function() {
        // thisを別の変数に格納
        var self = this;
        console.log(this);
        console.log(self);
        console.log(self.value);
        // 関数定義
        function method() {
            console.log(this);
            console.log(self);
            console.log(self.value);
        }
        // 関数呼び出し
        method();
    }
};
// メソッド呼び出し
myObject.method();</pre><p>&nbsp;</p>
<h2>コンストラクタ呼び出し（インスタンス自身）のパターン</h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">// 関数定義（コンストラクタ呼び出しを期待）
function MyObject(value) {
    this.value = value;
    this.increment = function() {
        console.log(this);
        this.value++;
    };
}
// インスタンス生成
var myObject = new MyObject(0);
// インスタンス生成時の値（0）が出力される
console.log(myObject.value);
// インスタンスのメソッド呼出し
myObject.increment();
// インスタンスのメソッド実行後の値（1）が出力される
console.log(myObject.value);
// インスタンスのメソッド呼出し
myObject.increment();
// インスタンスのメソッド実行後の値（2）が出力される
console.log(myObject.value);</pre><p>この場合、関数にnew演算子をつけてコンストラクタ呼び出しにてインスタンスを生成している為、「this」は生成されるインスタンス自身となる。<br />
尚、new演算子をつけなかった場合、つまり関数呼び出しとなった場合は、「value」、「increment」共にグローバル変数として定義される。<br />
※慣例として関数をコンストラクタ呼び出しで利用する場合、他の関数と区別しやすくする目的で関数名の先頭を大文字とする。</p>
<p>&nbsp;</p>
<h2>apply/call呼び出し（強制変更）のパターン</h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var myObject = {
  value: "foo",
  method: function() {
    console.log(this);
    console.log(this.value);
  }
};
var newObject = {
  value: "bar"
};
// メソッド呼び出し
myObject.method();
// thisの指すオブジェクトを差し替えてメソッド呼び出し
myObject.method.apply(newObject);
myObject.method.call(newObject);</pre><p>この場合、「this」の指すオブジェクトを「newObject」に差し替えてメソッドが呼び出される為、「newObject」の「value」の値が出力される。<br />
「apply/call」を利用すると「強制的にthisの差し替え」ができる。<br />
「apply/call」の第一引数は、「this」に指定したいオブジェクトになる。<br />
尚、「apply」と「call」の違いは、第二引数の指定の仕方になる。</p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var myObject = {
  method: function(value1, value2) {
    console.log(this);
    console.log(this.value + value1 + value2);
  }
};
var newObject = {
  value: "foo"
};
// オブジェクトを差し替えてメソッド呼び出し
myObject.method.apply(newObject, ["bar", "baz"]);
myObject.method.call(newObject, "bar", "baz");</pre><p>出力結果は、「apply」と「call」共に同じになる。<br />
「apply」は第二引数に配列をとり、配列の中身が引数として渡される。<br />
「call」は、第二引数以降がそのままの形で渡される。</p>
<p>&nbsp;</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-1752730884"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-392546113"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/854/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">854</post-id>	</item>
		<item>
		<title>JavaScriptにおける継承</title>
		<link>https://knowledge.reontosanta.com/archives/882</link>
					<comments>https://knowledge.reontosanta.com/archives/882#comments</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Wed, 01 Jun 2016 06:08:03 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=882</guid>

					<description><![CDATA[JavaScriptのオブジェクトは、他のオブジェクト（またはnul&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>JavaScriptのオブジェクトは、他のオブジェクト（またはnull）をプロトタイプとして利用することができる。<br />
オブジェクトのプロパティが参照された際、そのプロパティをオブジェクト自身が保持していなければ、代わりにプロトタイプのプロパティが参照される。<br />
さらにプロトタイプのオブジェクトがそのプロパティを保持していない場合には、プロトタイプのプロトタイプを参照する。（nullに行き着くまで繰り返す）<br />
このようにオブジェクトが他のオブジェクトのプロトタイプとして連鎖していく仕組みをプロトタイプチェーン(prototype chain)と呼ぶ。<br />
JavaScriptでは、このプロトタイプチェーンを利用して継承を行う。</p>
<p>&nbsp;</p>
<h2>コンストラクタ関数とnew演算子のみで継承</h2>
<p>まずは、シンプルに基底となるオブジェクト（コンストラクタ）を元に新しいオブジェクト（インスタンス）を生成する方法で継承をしてみる。<br />
※途中に出てくる&#8221;arguments&#8221;オブジェクトは、関数呼び出しのタイミングで生成されて呼び出し元から与えられた引数の値を配列で保持している特別なオブジェクト</p><pre class="urvanov-syntax-highlighter-plain-tag">//基底オブジェクトを定義（プロトタイプ）
function Pet(name) {
  //--コンストラクタの処理を定義--
  //プロパティを設定
  this.name = name;
  this.age = 0;
  console.log("基底オブジェクトのコンストラクタ");
}
//基底オブジェクトのプロトタイプにメソッドを追加
Pet.prototype.countAge = function () {
  this.age += 1;
};

//新しいオブジェクト（Cat）を定義
function Cat(name) {
  //基底オブジェクトのコンストラクタ呼び出し
  Pet.apply(this, arguments);
  //自身のコンストラクタの処理を定義
  console.log("Catオブジェクトのコンストラクタ");
}
//基底オブジェクトを継承
Cat.prototype = new Pet();
//新しいオブジェクト（Cat）のプロトタイプにメソッドを定義
Cat.prototype.sleep = function () {
  console.log(this.name + " is sleeping.");
};

//Catオブジェクトを利用してインスタンス生成
console.log("-----Cat-----");
var cat = new Cat("santa");
cat.countAge();
cat.sleep();
console.log(cat.name + " is " + cat.age + " y.o.");</pre><p>上記のコードで継承を行っている部分は、&#8221;Cat.prototype = new Pet();&#8221;にあたる。<br />
うまく動作するように見えるが、実際に実行すると&#8221;&#8212;&#8211;Cat&#8212;&#8211;&#8220;の出力の前に&#8221;基底オブジェクトのコンストラクタ&#8221;が出力される。<br />
これは、&#8221;Cat.prototype = new Pet();&#8221;のタイミングで基底オブジェクトのコンストラクタが実行されてしまう為である。<br />
これを回避する為には、以下のように継承部分を変更する必要がある。</p><pre class="urvanov-syntax-highlighter-plain-tag">//基底オブジェクトを継承
var Func = function () {};
Func.prototype = Pet.prototype;
Cat.prototype = new Func();
Cat.prototype.constructor = Cat;</pre><p>まず、ダミーのオブジェクト&#8221;Func&#8221;を定義する。<br />
次に&#8221;Func&#8221;のプロトタイプに基底オブジェクトのプロトタイプを設定する。<br />
さらに新しいオブジェクト&#8221;Cat&#8221;のプロトタイプに&#8221;Func&#8221;から生成したインスタンス（つまり基底オブジェクトのプロトタイプ）を設定する。<br />
最後に新しいオブジェクト&#8221;Cat&#8221;のプロトタイプに自身のコンストラクタを設定する。<br />
これで継承時に基底オブジェクトのコンストラクタが実行されることがなくなる。</p>
<p>&nbsp;</p>
<div class="knowl-content" style="margin-top: 40px;" id="knowl-2617979685"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="4196732648" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><h2>Object.createを利用して継承</h2>
<p>上記の継承をECMAScript5で定義されたObject.createを利用すると以下のように表すことができる。（新しいオブジェクト&#8221;Cat&#8221;のほかに別のオブジェクト&#8221;Dog&#8221;も追加している）</p><pre class="urvanov-syntax-highlighter-plain-tag">//基底オブジェクトを定義（プロトタイプ）
function Pet(name) {
  //--コンストラクタの処理を定義--
  //プロパティを設定
  this.name = name;
  this.age = 0;
  console.log("基底オブジェクトのコンストラクタ");
}
//基底オブジェクトのプロトタイプを拡張
Pet.prototype = Object.create(Object.prototype, {
  //プロパティの設定を拡張
  name: {
    writable: true
  },
  age: {
    writable: true
  },
  //自身のコンストラクタをセット
  constructor: {
    value: Pet,
    enumerable: false,
    writable: true,
    configurable: true
  },
  //メソッドを定義
  countAge: {
    value: function () {
      this.age += 1;
    }
  }
});

//新しいオブジェクト（Cat）を定義
function Cat(name) {
  //基底オブジェクトのコンストラクタ呼び出し
  Pet.apply(this, arguments);
  //自身のコンストラクタの処理を定義
  console.log("Catオブジェクトのコンストラクタ");
}
//基底オブジェクトのプロトタイプの継承と拡張
Cat.prototype = Object.create(Pet.prototype, {
  //自身のコンストラクタをセット
  constructor: {
    value: Cat,
    enumerable: false,
    writable: true,
    configurable: true
  },
  //メソッドを定義
  sleep: {
    value: function () {
      console.log(this.name + " is sleeping.");
    }
  }
});

//新しい別のオブジェクト（Dog）を定義
function Dog(name) {
  //基底オブジェクトのコンストラクタ呼び出し
  Pet.apply(this, arguments);
  //自身のコンストラクタの処理を定義
  console.log("Dogオブジェクトのコンストラクタ");
}
//基底オブジェクトのプロトタイプの継承と拡張
Dog.prototype = Object.create(Pet.prototype, {
  //自身のコンストラクタをセット
  constructor: {
    value: Dog,
    enumerable: false,
    writable: true,
    configurable: true
  },
  //メソッドを定義
  bark: {
    value: function () {
      console.log(this.name + " is barking.");
    }
  }
});
//Catオブジェクトを利用してインスタンス生成
console.log("-----Cat-----");
var cat = new Cat("santa");
cat.countAge();
cat.sleep();
console.log(cat.name + " is " + cat.age + " y.o.");
//Dogオブジェクトを利用してインスタンス生成
console.log("-----Dog-----");
var dog = new Dog("reon");
dog.countAge();
dog.bark();
console.log(dog.name + " is " + dog.age + " y.o.");</pre><p>Object.createの第一引数に基底オブジェクトのプロトタイプを、第二引数に新しいオブジェクト自身のコンストラクタを指定して生成したオブジェクトを新しいオブジェクトのプロトタイプに設定している。（メソッドなどを追加する場合も第二引数に列挙する）<br />
Object.createでオブジェクトを生成する際には、コンストラクタは実行されないので継承時に基底オブジェクトのコンストラクタが実行されることはない。</p>
<p>&nbsp;</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-2082303675"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-2299501315"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/882/feed</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">882</post-id>	</item>
		<item>
		<title>JavaScriptでクラスを定義する</title>
		<link>https://knowledge.reontosanta.com/archives/861</link>
					<comments>https://knowledge.reontosanta.com/archives/861#respond</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Mon, 16 May 2016 04:30:52 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=861</guid>

					<description><![CDATA[JavaScriptでクラス（的なもの）を定義してみる。 プロトタイ&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>JavaScriptでクラス（的なもの）を定義してみる。<br />
プロトタイプベースのオブジェクト指向言語であるJavaScriptには、JavaやC#のようなクラスベースのオブジェクト指向言語とは違い、クラスベースのオブジェクト指向言語でいうところの意味でのクラスは存在しない為、関数オブジェクトをクラスに見立てて疑似的にクラスを定義することになる。<br />
尚、この場でのクラスの定義は「特定のプロパティ（メソッドとメンバ変数）を持つオブジェクト」とする。<br />
※ECMAScript6には、クラス定義が実装されているがここでは触れていない。</p>
<p>&nbsp;</p>
<h2>オブジェクトリテラルでクラスを定義</h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var myObject = {
    name: 'myObject',
    method: function() {
        console.log('Hello! ' + this.name);
    }
};
// メンバ変数の参照
console.log(myObject.name);
// メソッドの実行
myObject.method();</pre><p>JavaScript での最も単純なクラスの定義は、オブジェクトリテラルを使用してオブジェクトを定義する形になる。<br />
尚、あるオブジェクトを元に新しいオブジェクトを生成する場合は、ECMAScript5で規定された「Object.create」を利用して元のオブジェクトをプロトタイプとすることで実現できる。</p><pre class="urvanov-syntax-highlighter-plain-tag">// オブジェクト定義
var myObject = {
    name: 'myObject',
    method: function() {
        console.log('Hello! ' + this.name);
    }
};
// ECMAScript5規定のObject.createが未定義の場合、Object.createを定義する
if (typeof Object.create !== 'function') {
    Object.create = function(o) {
        var F = function() {};
        F.prototype = o;
        return new F();
    };
}
// 新しいオブジェクトを生成
var newObject = Object.create(myObject);
// 新しいオブジェクトのメンバ変数の値を変更
newObject.name = 'newObject';
// 新しいオブジェクトのメンバ変数の参照
console.log('---newObject---');
console.log(newObject.name);
// 新しいオブジェクトのメソッドの実行
newObject.method();
// 元のオブジェクトのメンバ変数の参照
console.log('---myObject---');
console.log(myObject.name);
// 元のオブジェクトのメソッドの実行
myObject.method();</pre><p>&nbsp;</p>
<div class="knowl-content" style="margin-top: 40px;" id="knowl-3103730142"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="4196732648" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><h2>コンストラクタでクラスを定義</h2>
<p></p><pre class="urvanov-syntax-highlighter-plain-tag">// コンストラクタ定義（関数定義）
function MyClass() {
    //　newを使用してインスタンスを生成すると暗黙的にthisオブジェクトが生成される
    //var this = {};
    
    // メンバ変数定義
    this.name = 'no_name';
    // メソッド定義
    this.method = function() {
        console.log('Hello! ' + this.name);
    };
    
    //　newを使用してインスタンスを生成すると暗黙的にthisオブジェクトがreturnされる
    //return this;
}
// インスタンス生成
var newObject = new MyClass();
// メソッド実行
console.log(newObject.name);
newObject.method();</pre><p>オブジェクトリテラルではなく、JavaやC#等のクラスベースでのオブジェクト指向のようにクラスを定義する場合は上記のようになる。<br />
そもそもJavaScriptにクラスの概念が無い為、関数定義をnew演算子を使用して呼び出すことでコンストラクタとして働かせ、これをクラスと呼ぶ。<br />
コンストラクタはインスタンスが生成された時に実行される関数のことであり、関数なので引数を与えることもできる。<br />
尚、new演算子を使用しインスタンスを生成するとJavaScriptでは暗黙的に関数内で「this」という空オブジェクトの生成とそのオブジェクトのreturnの2行が追加される。<br />
この為、thisキーワードを使用してメンバ変数を定義することができる。（this.XXX）<br />
また、コンストラクタとしての関数内でthis以外のオブジェクトでreturnを使用するとthisが復帰されなくなってしまう為、コンストラクタとしての関数内ではreturnを使用しない。<br />
その他、メンバ変数に無名関数として処理を代入すれば、インスタンスメソッドとして機能する。<br />
但しこの場合、インスタンスが生成される度にインスタンスが定義され、メモリ領域を圧迫する。<br />
この問題は、prototypeを利用することで解決できる。<br />
※慣例として関数をコンストラクタ呼び出しで利用する場合、他の関数と区別しやすくする目的で関数名の先頭を大文字とする。</p>
<p>&nbsp;</p>
<h2>prototypeを使う</h2>
<p>prototypeは、関数オブジェクトが定義されると自動的に生成されるメンバ変数である。<br />
prototypeは、空オブジェクトへの参照を保持しており、インスタンス内に存在しないメンバ変数が参照された場合、prototypeを参照する。<br />
つまり、prototypeのプロパティは関数オブジェクト自身の親への参照のようなものと捉えることができる。</p><pre class="urvanov-syntax-highlighter-plain-tag">// 中身が空のクラスを定義
function MyClass(){
}
// 定義したクラスのプロトタイプにプロパティを定義
MyClass.prototype.method = function() {
    console.log('Hello!');
};
// インスタンス生成
var newObject = new MyClass();
// メソッド実行
newObject.method();</pre><p>上記の例は、中身が空のクラスを定義し、そのクラスのprototypeに対してmethodプロパティを定義することで、newObjectインスタンスからmethodプロパティを呼び出している。<br />
prototypeは、MyClassクラスの親のようなものであり、prototypeにプロパティを定義することでMyClassのインスタンスであるnewObjectからもmethodを呼び出すことができる。<br />
また、このようにprototypeにクラス共通のプロパティを定義をすることで、インスタンス生成の度にインスタンスメソッドが保持されることが無くなり、メモリ領域の圧迫を軽減できる。</p>
<p>&nbsp;</p>
<h2>改めてJavaScriptでのクラス定義の基本</h2>
<p>基本的にJavaScriptでクラスを定義する際には、prototypeに汎用的な関数やクラス共通の変数を定義し、それ以外の変数はメンバ変数としてクラス内に定義することに規定すると理解しやすい。</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-1580534089"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-4167811918"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/861/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">861</post-id>	</item>
		<item>
		<title>JavaScriptでゼロパディング（前0埋め）を行う</title>
		<link>https://knowledge.reontosanta.com/archives/907</link>
					<comments>https://knowledge.reontosanta.com/archives/907#respond</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Mon, 02 May 2016 00:29:42 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=907</guid>

					<description><![CDATA[JavaScriptでゼロパディング（前0埋め）を行うには、slic&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>JavaScriptでゼロパディング（前0埋め）を行うには、sliceを利用すると簡単に実現できる。</p>
<h2>サンプル</h2>
<p>例えば、2桁に合わせる場合は、以下のようにする。</p><pre class="urvanov-syntax-highlighter-plain-tag">var num = 3;
console.log(('0' + num).slice(-2));</pre><p></p>
<ul>
<li>&#8220;&#8216;0&#8217; + num&#8221;で元の値の左に&#8221;0&#8243;を付加する。（元の値が&#8221;3&#8243;であれば&#8221;03&#8243;となる）</li>
<li>&#8220;slice(-2)&#8221;で右から2文字を切り出す。（&#8221;03&#8243;を右から2文字切り出すと&#8221;03&#8243;となる）</li>
</ul>
<p>元の値が&#8221;12&#8243;の場合、&#8221;0&#8243;を付加して&#8221;012&#8243;となり右から2文字切り出して結果は、&#8221;12&#8243;となる。</p>
<p>3桁、4桁も同様に&#8221;&#8217;00&#8217; + num.slice(-3)&#8221;や&#8221;&#8216;000&#8217; + num.slice(-4)&#8221;とすればよい。</p>
<p>&nbsp;</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-2860926623"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-2873737309"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/907/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">907</post-id>	</item>
		<item>
		<title>Javascriptで選択肢入力チェック</title>
		<link>https://knowledge.reontosanta.com/archives/475</link>
					<comments>https://knowledge.reontosanta.com/archives/475#respond</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Fri, 05 Jun 2015 04:26:59 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=475</guid>

					<description><![CDATA[Javascriptでチェックボックス、ラジオボタンの選択肢が入力さ&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>Javascriptでチェックボックス、ラジオボタンの選択肢が入力されているかどうかをチェックする方法。</p><pre class="urvanov-syntax-highlighter-plain-tag">// チェック結果の判定
if(selectCheck(document.getElementsByName("abc")) == false) {
	alert("選択してください");
	return false;
}

//-------------------------------------------------------------------------------
// 選択肢入力チェック
//-------------------------------------------------------------------------------
function selectCheck(selectList) {
	var rtn = false;
	for(var i = 0; i &lt; selectList.length; i++) {
		if(selectList[i].checked) {
			rtn = true;
			break;
		}
	}
	return rtn;
}</pre><p>&nbsp;</p>
<p>&nbsp;</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-1909476819"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-1779090631"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/475/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">475</post-id>	</item>
		<item>
		<title>Javascriptで入力オブジェクトの有効／無効切り替え</title>
		<link>https://knowledge.reontosanta.com/archives/472</link>
					<comments>https://knowledge.reontosanta.com/archives/472#respond</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Fri, 05 Jun 2015 04:26:12 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=472</guid>

					<description><![CDATA[Javascriptで入力オブジェクト（テキストボックス、チェックボ&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>Javascriptで入力オブジェクト（テキストボックス、チェックボックス、ラジオボタン、リストなど）の有効／無効を切り替える方法。</p><pre class="urvanov-syntax-highlighter-plain-tag">// 無効とするオブジェクト
var invalidList = [ "text1", "checkbox1", "radio1" ];
changeDisabled(invalidList, true);

// 有効とするオブジェクト
var validList = [ "text2", "checkbox2", "radio2" ];
changeDisabled(validList, false);

//-------------------------------------------------------------------------------
// 有効／無効設定
//-------------------------------------------------------------------------------
function changeDisabled(list, flag) {
	for (var i = 0; i &lt; list.length; i++) {
		var elemList = document.getElementsByName(list[i]);
		for (var j = 0; j &lt; elemList.length; j++) {
			// テキストエリアの場合は値をクリア
			if (elemList[j].nodeName == "TEXTAREA") {
				elemList[j].value = "";
			}

			// テキストタイプの場合は値をクリア
			if (elemList[j].type == "text") {
				elemList[j].value = "";
			}

			// チェック状態を解除
			elemList[j].checked = false;

			// 有効／無効切り替え
			elemList[j].disabled = flag;
		}
	}
}</pre><p>&nbsp;</p>
<p>&nbsp;</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-1925426912"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-2386192845"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/472/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">472</post-id>	</item>
		<item>
		<title>Javascriptで入力チェック（半角英数字）</title>
		<link>https://knowledge.reontosanta.com/archives/469</link>
					<comments>https://knowledge.reontosanta.com/archives/469#respond</comments>
		
		<dc:creator><![CDATA[mogice]]></dc:creator>
		<pubDate>Fri, 05 Jun 2015 04:25:51 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<guid isPermaLink="false">http://knowledge.reontosanta.com/?p=469</guid>

					<description><![CDATA[Javascriptで正規表現を利用した半角英数字のチェックを行う方&#46;&#46;&#46;]]></description>
										<content:encoded><![CDATA[<p>Javascriptで正規表現を利用した半角英数字のチェックを行う方法。</p><pre class="urvanov-syntax-highlighter-plain-tag">// 入力チェック結果の判定
if(inputCheck(document.getElementsByName("abc")[0].value) == false) {
	alert("半角英数字で入力してください");
	return false;
}

//-------------------------------------------------------------------------------
// 入力チェック（半角英数字のみ）
//-------------------------------------------------------------------------------
function inputCheck(val) {
	if (val.match(/[^A-Za-z0-9]+/)) {
		//半角英数字以外の文字が存在する場合、エラー
		return false;
	}
	
	return true;
}</pre><p>&nbsp;</p>
<p>&nbsp;</p>
<div class="knowl-after-content-ad" style="margin-top: 40px;" id="knowl-4021802565"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="2719999442" 
data-ad-format="auto"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div><div class="knowl-after-content-relation" id="knowl-1293172440"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8913642688016174" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-8913642688016174" 
data-ad-slot="7848218644" 
data-ad-format="autorelaxed"></ins>
<script> 
(adsbygoogle = window.adsbygoogle || []).push({}); 
</script>
</div>]]></content:encoded>
					
					<wfw:commentRss>https://knowledge.reontosanta.com/archives/469/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">469</post-id>	</item>
	</channel>
</rss>
