カテゴリー : JavaScript

[jQuery] チェック済みの checkbox の値を取得して配列へ格納する方法

jQuery で、チェック済みの checkbox の値を取得して配列へ格納する方法をメモ。

<input type="checkbox" name="seasons" value="spring"> 春
<input type="checkbox" name="seasons" value="summer"> 夏
<input type="checkbox" name="seasons" value="autumn"> 秋
<input type="checkbox" name="seasons" value="winter"> 冬

チェックされた checkbox の値を取得して、配列に格納するコードは下記の通りです。

var checkedSeasons = [];
$('[name="seasons"]:checked').each(function(){
  checkedSeasons.push($(this).val());
});

参考情報

jQueryでチェックされたcheckboxの値を取得して配列に格納する方法、また、配列をcheckboxの値に設定する方法 – knt45の日記

[CoffeeScript] object の Iterator は for of

CoffeeScript で、object のイテレータは for of らしいです。

CoffeeScript

for key of object

JavaScript

for (key in object) {
}

参考情報

javascript – for (var key in object) in CoffeeScript? – Stack Overflow

[CoffeeScript] @ と => で that = this を無くす

ここを読むんだ!

CoffeeScriptの@について再び | ひげろぐ

[jQuery] フォームの値をクリア、リセット、空にする方法

jQuery でフォームの値をクリアする方法をご紹介します。

jQuery

続きを読む

CoffeeScript のインストール方法

CoffeeScript をインストールする方法をメモ。

事前準備

npm からインストールするのが定番みたいなので、nvm と Node.js をインストールしておく。

[Node.js] バージョン管理ツール「nvm」を Mac にインストールする方法

CoffeeScript のインストール

npm install -g coffee-script コマンドでサクッとインストールする。

% npm install -g coffee-script
npm http GET https://registry.npmjs.org/coffee-script
npm http 200 https://registry.npmjs.org/coffee-script
/Users/bakorer/.nvm/v0.6.19/bin/coffee -> /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script/bin/coffee
/Users/bakorer/.nvm/v0.6.19/bin/cake -> /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script/bin/cake
coffee-script@1.6.1 /Users/bakorer/.nvm/v0.6.19/lib/node_modules/coffee-script
 
% source ~/.zshrc                                                    
 
% coffee -v
CoffeeScript version 1.6.1

カンタンですね!

参考情報

coffeescript を ubuntu 12.04 にインストール – {[Takuya71]}の日記

AndroidとiPhoneで使えるURLスキーム起動&アプリ未ダウンロードならストアへリダイレクトするJavaScriptサンプルコード

Android と iPhone で使える URL スキーム起動&アプリ未ダウンロードならストアへリダイレクトするJavaScriptサンプルコードをご紹介します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>URL scheme / Redirect Test</title>
 
    <script type="text/javascript">
    var userAgent = navigator.userAgent.toLowerCase();
 
    window.onload = function(){
 
      if (userAgent.indexOf("android") > -1) {
        // Launch myapp via URL scheme
        launch_frame.location.href= "myapp://";
 
        setTimeout(function(){
          // Open App DL page in Google Play
          location.href= "http://market.android.com/details?id=com.example.myapp";
        } , 500);
      } else if (userAgent.search(/iphone|ipad|ipod/) > -1) {
        // Launch myapp via URL scheme
        launch_frame.location.href= "myapp://";
 
        setTimeout(function(){
          // Open App DL page in iTunes Store
          location.href= "itmss://itunes.apple.com/us/app/myapp/id123456789?ls=1&mt=8";
        } , 500);
      }
 
    }
    </script>
 
  </head>
 
<body>
  <div style="width:0; height:0; overflow:hidden;">
  <iframe id="launch_frame" name="launch_frame">
  </iframe>
  </div>
</body>
 
</html>

JSONP のセキュリティについて

JSONP を使う上でのセキュリティについて気になったので、調べたサイトをメモ。

Web 2.0的アプリのセキュリティ:機密情報にJSONPでアクセスするな : アークウェブのブログ

第3回 JSONPでのクロスドメインアクセス:ここが危ない!Web2.0のセキュリティ|gihyo.jp … 技術評論社

[気になる]JSONPの守り方 - @IT

なぜJSONPだとクロスドメイン制約を超えられるのか? – 射撃しつつ前転

JSONPはセキュアでないのか? – snippets from shinichitomita’s journal

Node.js (Express) で JSONP を対応させる方法は下記が参考になります。

Express で JSONP をスマートにレスポンスする方法

[jQuery] 日時の入力フォームは2つに分けて Datepicker と Timepicker を使う

タイトルでほぼ終わってますが。

入力補助に jQuery のライブラリを使う場合、下記のようにするのが手っ取り早そう。

・日時の入力フォームは2つに分ける
・年月日のフォームには Datepicker を使う
・時刻のフォームには Timepicker を使う

年月日と時刻をひとまとめにする場合、良さそうな jQuery ライブラリが無かった。

[jQuery] フォームやリンクの二度押し・連続クリック防止

jQuery で、フォームやリンクの二度押し・連続クリックを防止する方法をメモ。

[JavaScript][jQuery] 要素 DOM の存在確認・チェック

JavaScriptで、要素 DOM の存在確認をする方法がたくさんあるので迷うけど、結論としては、

document.getElementById("id") != null

でチェックのが速くて良いみたい。

コード速度
document.getElementById("id") != null0.019ms
$("selector")[0]0.033ms
$("selector").get(0)0.040ms
$("selector").size()0.041ms
$("selector").length0.069ms
$("selector").is("*")0.169ms

・引用元:[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき はてなブックマーク - [JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき

jQueryによる要素の存在チェックまとめ: 小粋空間 はてなブックマーク - jQueryによる要素の存在チェックまとめ: 小粋空間