snippet: JavaScript

## 右クリック禁止

```html
<body onContextMenu="return false;">
...
</body>
```

## 元の関数を上書き、デフォルト引数

* [デフォルト引数 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Default_parameters)

```js
var parseInt_original = parseInt_original || parseInt;
// 第二引数がなければ10を指定したい
var parseInt = function(strNum, base) {
  // 引数が省略されていた場合undefinedになる。
  var base = typeof base !== 'undefined' ?  base : 10;
  return parseInt_original(strNum, base);
};

parseInt('0x20');
```

```js
var parseInt_original = parseInt_original || parseInt;
var parseInt = function(strNum, base) {
  // strNum = '0x20' が0になってしまうので判定追加
  if (typeof value === 'string') {
      return parseInt_original(strNum);
  }
  var base = typeof base !== 'undefined' ?  base : 10;
  return parseInt_original(strNum, base);
};

parseInt('0x20');
```


## 戻るで戻った時もonloadを実行させる

```js
window.onunload = function() {};
```

## radioから値取得

```java:値取得
var e = document.getElementsByName("numbers");
for ( i = 0; i < e.length; i++ ) {
    if ( e[i].checked ) {
        console.log(e[i].value);
    }
}
```

```java:チェック
var e = document.getElementsByName("numbers");
for(var i=0; i<e.length; i++) {
	if("2" == e[i].value) {
		e[i].checked = "on";
	}
}
```

## HTMLBRElement は IE8以降対応

* [HTMLBRElement object (Internet Explorer)](https://msdn.microsoft.com/en-us/library/hh869690(v=vs.85).aspx)

# javascript 1.8

* [JavaScript 1.8 の新機能 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/New_in_JavaScript/1.8)

## onloadに処理を追加する

* [イベントに処理を追加する - JavaScript](http://www.gesource.jp/programming/javascript/20050914.html)

```js:
if (window.addEventListener) { //for W3C DOM
  window.addEventListener("load", initOther, false);
} else if (window.attachEvent) { //for IE
  window.attachEvent("onload", initOther);
} else  {
  window.onload = initOther;
}
```

## 式クロージャー

```bash:今まで
var hoge = function(x) {return x*x;}(3);
console.log(hoge);//9
```

```bash:式クロージャーを使う場合(中括弧とreturnが省略できる)
var hoge = (function(x)x*x)(3);
console.log(hoge); //9
```

# javascript 1.7

* [Latest topics > JavaScript 1.7のyield文ってなんじゃらほ - outsider reflex](http://piro.sakura.ne.jp/latest/blosxom/webtech/javascript/2006-08-07_yield.htm)
* yield と let が使えるようになる。version表記が必要。

## yield

```html:
<script type="text/javascript; version=1.7" src="xxxx.js"></script>
```

```html:
<script type="text/javascript; version=1.7">
function test() {
  yield 'hoge';
  yield 'fuga';
  yield 'piyo';
}

var generator = test();
alert(generator.next()); //hoge
alert(generator.next()); //fuga
alert(generator.next()); //piyo
alert(generator.next()); //uncaught exception: [object StopIteration]
</script>
```

## let

```js:letが無い場合、すべて6が出力される。
var list = document.getElementById("list");
var i;
for (i = 1; i <= 5; i++) {
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Item " + i));
    //let (j = i) {
        item.onclick = function (ev) {
            console.log("Item " + i + " is clicked.");
        };
    //}
    list.appendChild(item);
}
```

```js:letを使う場合、1〜5が出力される。
var list = document.getElementById("list");
var i;
for (i = 1; i <= 5; i++) {
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Item " + i));
    let (j = i) {
        item.onclick = function (ev) {
            console.log("Item " + j + " is clicked.");
        };
    }
    list.appendChild(item);
}
```


# 即時関数

* [即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）](http://analogic.jp/immediate-function/)

```js:ただの実行
(function() {
  console.log("hoge");
})();
```

```js:ただの実行2(非推奨！！)
+function() {
  console.log("hoge");
}();
```

```js:返り値をもらう場合
var result = (function (param1, param2) {
    return param1 + param2;
}(1, 2));
console.log(result); //3
```

```js:オブジェクトリテラル
var counter = (function() {
    var count = 0;
    return {
        increment: function() { 
            count += 1;
            console.log(count);
        },
        decrement: function() { 
            count -= 1;
            console.log(count);
        }
    };
}());

counter.increment(); //1
counter.increment(); //2
counter.decrement(); //1
```

* [知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て - 三等兵](http://d.hatena.ne.jp/sandai/20110824/p1)

```js:プロパティ
var hoge = {
  piyo: 123,
  fuga: 'あいうえお',
  hogera: [1,2,3],
  hogehoge: function() { return 1;}
};

console.log(hoge.piyo); //123
console.log(hoge.fuga); //あいうえお
console.log(hoge.hogera[2]); //3
console.log(hoge.hogehoge()); //1
```

```js:ただの実行3
(function(arg){alert(arg);}('良い記事'));

for(var i=0,s='ありがとう'; i < s.length; i++)(function(s) { alert(s)})(s[i]); 
```


## 即時関数その2

* [ステップアップのためのJavascriptデザインパターン入門（４） - リビーリングモジュールパターン | Yuhiisk](http://blog.yuhiisk.com/archive/2014/09/14/javascript-pattern4.html)

```js:
var MYFUNC = function() {
  var count = 0;
  function public_start(){ private_reset; }
  function private_reset(){ count=0; }
  function public_increment(){ private_increment(); }
  function private_increment(){ count++; }
  function public_get_count(){ return count; }
  return {
      start: private_reset,
      increment: public_increment,
      get_count: public_get_count
  };
}

var module = MYFUNC();
module.start();
module.increment();
module.increment();
module.increment();
module.increment();
console.log(module.get_count()); //4
module.start();
console.log(module.get_count()); //0
```


# F2キーを押すと別ウィンドウを開く

```js:
function keyDownFunc(e){
        var key_code = e.keyCode;
        // F2 = 113
        if (e.keyCode == "113") {
                window.open(location.href+"&debug=1");
        }
}
// window.attachEvent はIE用
if (window.attachEvent) {
        document.attachEvent("onkeydown" , keyDownFunc);
}
```

# 改行コードを`<br>`に置換

```js:
var str = "あい\r\nうえお";
str = str.replace(/\r\n/g,"<br>");
str = str.replace(/\r/g,"<br>");
str = str.replace(/\n/g,"<br>");
document.write(str);
```

# window.openで表示されたページから元ページの値を取得

```html:元ページ
<script>
function preview(inputname) {
	var w = 360;
	var h = 644;
	var l = (window.screen.width - w)/2;
	var t = (window.screen.height - h)/2;
	var url = 'preview.php?textareaname=' + inputname;
        var feature = 'resizable=yes, location=no, center=yes, status=no, width=' + w + ', height=' + h + ', top=' + t + ', left=' + l;
	var win = window.open(url, 'preview', feature);
}
</script>

<form name="frm1">
<textarea name="txt1">あああ</textarea>
<input type="button" onClick="preview('txt1');" value="プレビュー" />
</form>
```

```html:preview.php(window.openで開かれるページ)
<script>
var val = window.opener.document.frm1.<?php echo $_GET["textareaname"];?>.value;
val = val.replace(/\r\n/g,"<br>");
val = val.replace(/\r/g,"<br>");
val = val.replace(/\n/g,"<br>");
document.write(val);
</script>
```

# createElement

```html:
<span id="list"></span>

<script>
// <li>Item 1</li> を作成
var item = document.createElement("li");
item.appendChild(document.createTextNode("Item 1"));

// span#list 内に<li>タグを挿入
var list = document.getElementById("list");
list.appendChild(item);
</script>
```

# try..catch

* [JavaScript try-catch文 - Wikibooks](https://ja.wikibooks.org/wiki/JavaScript_try-catch%E6%96%87)

* throw で catch に渡す。

```js:
function check(num) {
  if(num!=1) { throw "error:not 1"; }
}
try {
  check(2);
} catch (e) {
  console.log(e.message);
}
```

# URLをパース

```js:
try {
    location.href.split('&').forEach(function(pair){
        var splits = pair.split('=');
        var key    = splits.shift();
        var value  = splits.shift();
        if ( key == 'action' ) {
            throw value;
        }
    });
}
catch (value) {
    console.log(value)
}
```

# IEのバージョン取得

* [IE11のuserAgent対応javascriptによるIE判定式（全バージョン対応） | Wano Developers Blog](http://developers.wano.co.jp/ie11-useragent-js%E3%81%AEie%E5%88%A4%E5%AE%9A%E5%BC%8F/)

```js:IE11まで対応
var userAgent = window.navigator.userAgent.toLowerCase();
if( userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/) ) {
    var isIE = true;
    var ieVersion = userAgent.match(/((msie|MSIE)\s|rv:)([\d\.]+)/)[3];
    ieVersion = parseInt(ieVersion);
} else {
    var isIE = false;
}
console.log(isIE);
console.log(ieVersion);
```

## IEか判定

```js:
function isIE() {
        var ua = navigator.userAgent;
        if (ua.match(/(MSIE)/i) || ua.match(/(Trident)/i)) {
                return true;
        }
        return false;
}
```


# チェックボックスのチェック全部ON/OFF

```js:
var chk1 = document.getElementsByTagName("chk1");
for(var i=0; i < chk1.length; i++){
  chk1[i].checked = true;
}
```

# match

* [String.prototype.match() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/match)
* [正規表現の文法](http://www.tohoho-web.com/js/regexp.htm)

```js:match_pattern
var str = 'see Chapter 3.4.5.1';
var re = /(chapter \d+(\.\d)*)/i;
var found = str.match(re);
console.log(found); //[ "Chapter 3.4.5.1", "Chapter 3.4.5.1", ".1" ]

var str = 'see Chapter 3.4.5.1';
var re = /chapter \d+(\.\d)*/i;
var found = str.match(re);
console.log(found); //[ "Chapter 3.4.5.1", ".1" ]
```

```js:g
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var regexp = /[A-E]/gi;
var matches_array = str.match(regexp);
console.log(matches_array);//[ "A", "B", "C", "D", "E", "a", "b", "c", "d", "e" ]

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var regexp = /[A-E]/i;
var matches_array = str.match(regexp);
console.log(matches_array);//[A]
```

# 配列、連想配列

* [JavaScript の配列と連想配列の違い - IT戦記](http://d.hatena.ne.jp/amachang/20070202/1170386546)

## 配列

```js:配列の様々な書き方
var array = ['hoge', 'fuga'];
var array = new Array('hoge', 'fuga');
var array = Array('hoge', 'fuga');
var array = []; array[0] = 'hoge'; array[1] = 'fuga';
var array = []; array['0'] = 'hoge'; array['1'] = 'hoge'

var array = { 0: 'hoge', 1: 'fuga', length: 2 };
array.__proto__ = Array.prototype;
```

```js:for
Array.prototype.hoge = function() {};

for (var i in ['a', 'b', 'c']) {
  alert(i); // 1, 2, 3, hoge が表示される
}
```

## 連想配列

```js:連想配列の様々な書き方
var obj = { hoge: 'hoge' };
var obj = { 'hoge': 'hoge' };
var obj = {}; obj.hoge = 'hoge';
var obj = {}; obj['hoge'] = 'hoge';
var obj = new Object(); obj.hoge = 'hoge';
```

```js:for..in
var hash = { hoge: 'hoge', fuga: 'fuga' }
for (var i in hash) {
  console.log(hash[i]);
}
```

## cookieに書き込みができているか確認方法

```js
document.cookie = "hoge=1; fuga=2; piyo=3;";
if(document.cookie.match(/fuga/)) {
    console.log("書き込み成功");
} else {
    console.log("書き込み失敗");
}
```