MW211 EXIT

devlog
JavaScript/複数クラス属性を配列化
2014年01月06日
「class="abc def ghi"」みたいに複数のクラスを定義しているタグの場合
「$(this).attr('class')」で取得できるものは、
そのものずばりその文字列(「abc def ghi」)だ。

これを配列にしてしまいたい場合は以下のようにすればよい。
┌──────────────────────────────────────┐
│var 配列 = $(this).attr('class').replace(/(^\s+)|(\s+$)/g, '')              │
│                                .split(/\s+/);                              │
└──────────────────────────────────────┘
トリムしたものを、スペースで区切っているので
万が一「class=" stu  xyz"」とか行儀の悪いクラス定義でも対応できる。
分類:JavaScript
JavaScript/ブラウザ判別法
2013年12月30日
使用されているブラウザがどれかを確認する、JavaScript関数は以下の通り。
┌──────────────────────────────────────┐
│function getBrowser() {                                                     │
│    var browser = 'unknown';                                                │
│    var userAgent  = window.navigator.userAgent.toLowerCase();              │
│    var appVersion = window.navigator.appVersion.toLowerCase();             │
│    if (userAgent.indexOf('firefox') != -1) {                               │
│        browser = 'firefox';                                                │
│    } else if (userAgent.indexOf('chrome') != -1) {                         │
│        browser = 'chrome';                                                 │
│    } else if (userAgent.indexOf('safari') != -1) {                         │
│        browser = 'safari';                                                 │
│    } else if (userAgent.indexOf('opera') != -1) {                          │
│        browser = 'opera';                                                  │
│    } else if (userAgent.indexOf('msie') != -1) {                           │
│        if (appVersion.indexOf('msie 6.') != -1) {                          │
│            browser = 'ie6';                                                │
│        } else if (appVersion.indexOf('msie 7.') != -1) {                   │
│            browser = 'ie7';                                                │
│        } else if (appVersion.indexOf('msie 8.') != -1) {                   │
│            browser = 'ie8';                                                │
│        } else if (appVersion.indexOf('msie 9.') != -1) {                   │
│            browser = 'ie9';                                                │
│        } else if (appVersion.indexOf('msie 10.') != -1) {                  │
│            browser = 'ie10';                                               │
│        } else {                                                            │
│            browser = 'ie';                                                 │
│        }                                                                   │
│    } else if (userAgent.indexOf('trident/7') != -1) {                      │
│        browser = 'ie11';                                                   │
│    }                                                                       │
│    return browser;                                                         │
│};                                                                          │
└──────────────────────────────────────┘
昔は「document.all」があること(「if (document.all)」)で、
IEを判別したりしていたが、「IE11」から「document.all」がなくなったので
その手法は使えなくなってしまった。
ついでに言えば、「IE11」から「msie」のユーザエージェント名もなくなっている。
分類:JavaScript
JavaScript/IE11でdocument.all廃止
2013年12月24日
IE11では「document.all」が廃止になった。
「document.getElementById」で代用できる。

っていうか、「document.getElementById」のIE独自路線が
「document.all」だったっていう言い方もできる。

統一されてきているみたい。
分類:JavaScript
JavaScript/substr()の負数
2013年12月23日
「substr()」メソッドに負数を指定すると、右からの切り抜きを指定できる。
┌──────────────────────────────────────┐
│('123').substr(-2)                                                  →「23」│
└──────────────────────────────────────┘

以下の省略形のようなものだ。
┌──────────────────────────────────────┐
│('123').substr(('123').length - 2)                                  →「23」│
└──────────────────────────────────────┘

ただし、これは過去にIE系ではサポートしていなかった。
IE8はダメで、IE9からはOKだ。

「slice()」メソッドなら負数を指定することができる。
┌──────────────────────────────────────┐
│('123').slice(-2)                                                   →「23」│
└──────────────────────────────────────┘
「slice()」は配列の一部として文字列を切り出すってことだ。
分類:JavaScript
JavaScript/伏せ字変換
2013年12月21日
伏せ字にしたい場合、password属性のinputタグを使えばそれを実現できるので
CSSをいじって(入力欄ぽい修飾を落として)ごまかしたところ、
横幅が可変にならない。
inputタグの入力欄なので外枠は固定で、中身が横スクロールしてしまうからだ。

ということで、関数で変換するものを作ってみた。
┌──────────────────────────────────────┐
│function omission(inWord) {                                                 │
│    var outWord = '';                                                       │
│    for (var i = 0; i < inWord.length; i++) {                               │
│        outWord += '●';                                                    │
│    }                                                                       │
│    return outWord;                                                         │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/他のjsファイルを読み込む方法
2013年12月05日
あるjsファイルにて、他のjsファイルをインクルードみたいにして読み出す方法。

「document.write()」でインクルードを書いてしまえばよい。
┌───────────────────────────────── [ある.js]┐
│document.write('<script type="text/javascript" src="他の.js"></script>');   │
└──────────────────────────────────────┘

上記のようにすることにより
┌──────────────────────────────────────┐
│<script type="text/javascript" src="ある.js"></script>                      │
└──────────────────────────────────────┘
だけで、
┌──────────────────────────────────────┐
│<script type="text/javascript" src="ある.js"></script>                      │
│<script type="text/javascript" src="他の.js"></script>                      │
└──────────────────────────────────────┘
と同じになる。
分類:JavaScript
JavaScript/比較
2013年09月06日
┌───┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐
│      │true│false    1│   0│  -1│'1' │'0' │'-1' '文字' ''  │null│[]  │{}  │NaN │undefined
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│true  │ ○ │ × │ △ │ × │ × │ △ │ × │ × │ × │ × │ × │ × │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│false │ × │ ○ │ × │ △ │ × │ × │ △ │ × │ × │ △ │ × │ △ │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│     1│ △ │ × │ ○ │ × │ × │ △ │ × │ × │ × │ × │ × │ × │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│     0│ × │ △ │ × │ ○ │ × │ × │ △ │ × │ × │ △ │ × │ △ │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│    -1│ × │ × │ × │ × │ ○ │ △ │ × │ △ │ × │ × │ × │ × │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│'1'   │ △ │ × │ △ │ × │ △ │ ○ │ × │ △ │ × │ × │ × │ × │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│'0'   │ × │ △ │ × │ △ │ × │ × │ ○ │ × │ × │ × │ × │ × │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│'-1'  │ × │ × │ × │ × │ △ │ △ │ × │ ○ │ × │ × │ × │ × │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│'文字'│ × │ × │ × │ × │ × │ × │ × │ × │ ○ │ × │ × │ × │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│''    │ × │ △ │ × │ △ │ × │ × │ × │ × │ × │ ○ │ × │ △ │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│null  │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ ○ │ × │ × │ × │ △ │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│[]    │ × │ △ │ × │ △ │ × │ × │ × │ × │ × │ △ │ × │ ○ │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│{}    │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ ○ │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│NaN   │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ × │
├───┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
undefined  × │ × │ × │ × │ × │ × │ × │ × │ × │ × │ △ │ × │ × │ × │ ○ │
└───┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┘
  ○=厳密な比較で一致、○△=緩やかな比較で一致、×=不一致
分類:JavaScript
HTML/画面の遷移方法いろいろ
2013年08月22日
画面の遷移方法をまとめた(jQueryを使用)。

(1) アンカーリンクを使う方法
  ┌────────────────────────────────────┐
  │<a href="遷移先.htm">遷移!</a>                                         │
  └────────────────────────────────────┘
(2) window.open()を使う方法
  ┌────────────────────────────────────┐
  │<input type="button" value="遷移!"/>                                   │
  ├────────────────────────────────────┤
  │$(':button[value="遷移!"]').click(function() {                         │
  │    window.open('遷移先.htm', '_top');                                  │
  │});                                                                     │
  └────────────────────────────────────┘
(3) POST送信を使う方法
  ┌────────────────────────────────────┐
  │<form method="post" action="遷移先.htm">                                │
  │<input type="submit" value="遷移!"/>                                   │
  │</form>                                                                 │
  └────────────────────────────────────┘
(4) POST送信を使う方法(jQueryで向き先変更)
  ┌────────────────────────────────────┐
  │<form method="post" action="ダミー.htm">                                │
  │<input type="button" value="遷移!"/>                                   │
  │</form>                                                                 │
  ├────────────────────────────────────┤
  │$(':button[value="遷移!"]').click(function() {                         │
  │    $('form').attr('action', '遷移先.htm');                             │
  │    $('form').submit();                                                 │
  │});                                                                     │
  └────────────────────────────────────┘
分類:JavaScript、HTML
JavaScript/一文字ずつ処理
2013年08月17日
文字列を一文字ずつ切り出して処理をする場合には、「.substr()」メソッドを使う。
┌──────────────────────────────────────┐
│for (var i = 0; i < 文字列.length; i++) {                                   │
│    一文字 = 文字列.substr(i, 1);                                           │
│}                                                                           │
└──────────────────────────────────────┘

裏技的には、「.split('')」メソッドを使って配列に分割してしまう手もある。
┌──────────────────────────────────────┐
│var 配列 = 文字列.split('');                                                │
│for (var i = 0; i < 配列.length; i++) {                                     │
│    一文字 = 配列[i];                                                       │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/inArray関数
2013年08月13日
jQueryの…
┌──────────────────────────────────────┐
│$.inArray(要素, 配列);                                                      │
└──────────────────────────────────────┘
上記をJavaScript関数で代用する方法。
┌──────────────────────────────────────┐
│function inArray(要素, 配列) {                                              │
│    for (var key in 配列) {                                                 │
│        if (key == 要素) {                                                  │
│            return true;                                                    │
│        }                                                                   │
│    }                                                                       │
│    return false;                                                           │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
前へ 1 2 3 4 5 6 7 8 9 次へ