Kinopyo Blog

プログラマとしてRuby, Rails, iPhone, iPad,Macなどなどと向き合う日々のログポース

Archive for the ‘JavaScript’ Category

iPhone Safariキーボードの”Return”のkeydownイベントをキャッチ

2011年10月25日

Situation

iPhone Safariを使うときにあるInput boxで何か入力後”return”キーのkeydownイベントをキャッチして、何かしらのアクションを行いたい、のが目的です。よくあるのがreturnキーでformをsubmitしたり、ボタンクリックのアクションを行ったり、キーボードを隠したりするところですかね。

Keydown event

$("#one_inputbox").live('keydown', function(event) {
  var RETURN_KEY_CODE = 13;
  if (event.which == RETURN_KEY_CODE) {
    // your code here ...

    // may submit the form
    $("form").submit();

    // or simply just hide the keyboard
    $(this).blur();
  }
});
view raw gistfile1.js This Gist brought to you by GitHub.

13という数字がreturnキーのkeydown時のコードです。実はJavascript経験がある方ならすぐ分かると思いますが、13Enterキーのコードでもあります。

もう一つのTipはキーボードを隠したいときはjQueryのblur()を使えばOKです。

参考:http://stackoverflow.com/questions/5932317/how-to-capture-the-keyboard-return-event-on-iphone-browser

CoffeeScript勉強する上で役に立つebook3冊(無料)

2011年07月22日

Smooth CoffeeScript

200ページを超え、35の練習問題があります。基本文法からオブジェクト指向、モジュラリティ、そしてHTML5のCanvasとWebSocketsまで紹介されています。PDFは答えがついてあるバージョンと付いてないバージョンがあり、さらにソースコードまで。

CoffeeScript Cookbook

リファレンス参照が一目瞭然で、ebookよりは気軽く読めると思います。メタプログラミングまで書いてあります。ちなみにこれは複数の人が協力して作ったもので、githubにあるのでforkしてpullリクエストも出せます。

The Little Book on CoffeeScript

5章しかないですが、CoffeeScriptがベストプライスが書かれています。少なくとも4章のIdiomsは読んどいたほうがいいと思います。

CoffeeScriptでjQueryのdocument.readyの書き方

2011年07月09日

下記どちらもOKです。明示的に書きたいときはjQueryで。

jQuery ->
  alert "hello"

$ ->
  alert "hello"

coffee-scriptのインストール、TextMate Bundleで実行(Mac OS X)

2011年07月04日

coffee-scriptをMacportsを使ってインストールし、TextMateのcoffee-script bundleでコンパイルするメモです。

注意すべきなのはたとえターミナルでcoffeeが実行できても、TextMateはPATHをインクルードしないので(インクルードしているのは/usr/binらしい)、/usr/binにcoffeeのシンボリックを作る必要があります。

またcoffee-scriptをコンパイルするにはnodejsとnpm(Node Package Manager)が前提条件となるため、それらのインストールも必要です。

# don't forget to update your port tree first
sudo port selfupdate

# install coffee script using macport
sudo port install nodejs
node -v

# install npm - the Node Package Manager
git clone http://github.com/isaacs/npm.git
cd npm
sudo make install
npm -v

# now install coffee-script!
sudo npm install -g coffee-script
coffee -v

# because TextMate doesn't inherit your regular PATH
# you need to set a symbol link to /usr/bin
# so that you can run coffee in your textmate

which node
/opt/local/bin/node

which coffee
/opt/local/bin/coffee

cd /usr/bin
sudo ln -s /opt/local/bin/node
sudo ln -s /opt/local/bin/coffee

# install textmate coffee-script bundle
mkdir -p ~/Library/Application\ Support/TextMate/Bundles
cd ~/Library/Application\ Support/TextMate/Bundles
git clone git://github.com/jashkenas/coffee-script-tmbundle CoffeeScript.tmbundle

# now you can use command + B to compile and display javascript in your textmate!

これでtextmateでcommand + Bでコンパイル後のJavascriptが表示できるようになります!

JavaScript: カンマ区切りで数値をフォーマットする

2010年11月29日

/**
 * 数値を日本円表現にフォーマット。
 * 例:12345 -> 123,45
 *
 */
num2Currency = function(obj){

	// 画面項目の値
	var str=obj.value;
	var num = new String(str).replace(/,/g/"");
	while(num != (num =num.replace(/^(-?\d+)(\d{3})/,"$1,$2")));
	obj.value = num;

}

/**
 * 日本円表現を数値にフォーマット。
 * 例:123,45 -> 12345
 *
 */
currency2Num = function(obj){

	var str=obj.value;
	var num = str.replace(/,/g,"");
	obj.value = num;
}

jQuery1.3.2のバグ?IEで を$.trimするとき変な結果に

2010年03月10日

jQuery 1.4.2ではこれは治ったようです。

jQuery最新版をお使いの方は下記のようなバグはもう発生しません。

サンプル

※jQuery 1.3.2で発生する問題※

HTML
<select>
	<option id="foo">&nbsp;</option>
	<option>11</option>
	<option>22</option>
</select>

<tr id="bar">&nbsp;</tr>
Javascript
var optionText = $("#foo").text();

// firefoxは0、IEは1
alert("select optionタグの をtrimした後のlength: " + $.trim(optionText).length);

var trText = $("#bar").text();

// firefoxは0、IEも0!
alert("trタグの をtrimした後のlength: " + $.trim(trText).length);

結果

selectのoptionタグのテキストにある“&nbsp;”

$.trimをかけて見ると

Firefoxはちゃんとtrimしてlengthが0になったが、

IEはtrimできずlengthが1のままです。

しかしtrタグのテキストにある”&nbsp;”をtrimすると

IEも正しくtrimしてlengthが0になるんです。。。

DEMO

jQuery最新版(1.4.2)を使うDEMO

Javascript index指定で配列の要素を削除するには

2010年03月08日

今まで全然気付かなかったんです、

JavascriptのArrayにはdeleteみたいなAPIがないことに。

配列の要素をindex指定で削除したい場合は代わりにsplice関数を使います。

splice関数

とほほからのレファレンスでは

array.splice(start, n, e1, e2, …) (N4)

0 から数えて、start 番目から n 個の要素を削除し、その代わりに e1, e2, …を値とする要素を埋め込みます。戻り値は JavaScript のバージョンによって異なります。

var xx = new Array("A", "B", "C", "D", "E", "F", "G");
xx.splice(2, 3, "c", "d", "e");   // "C", "D", "E" が小文字になります

indexで配列の要素を削除するには

myArray.splice(index, 1);

indexは削除する要素のindex、1はこの一つだけを削除する意味で

他のパラメータはいらないです。

またsplice後は配列そのものが変更されます。

スクロールを最下部に移動するJavascript

2010年03月02日

スクロールバーを最下部に移動するJavascriptです。

普通のJavascriptで書くと

function go_bottom(targetId){

    var obj = document.getElementById(targetId);

    if(!obj) return;

    obj.scrollTop = obj.scrollHeight;
}

完全にjQueryで書くとこんな感じ

function go_bottom(targetId){

   var $obj = $("#" + targetId);

    if($obj.length == 0) return;

    $obj.scrollTop($obj[0].scrollHeight);
}

これ以外はhiddenのinput項目を最下部に置いといて、

それをfocusするような技もありけど、、

Javascriptのforループのパフォーマンスのいい書き方

2010年02月22日

面白いかと思ったのでメモしときます。

普通の書き方

var rows = document.getElementsByTagName('tr');

for( var i = 0; i < rows.length; i++ ) {

   rows[i].className = 'newclass';

   rows[i].style.color = 'red';
  ...
}

効率のいい書き方

var rows = document.getElementsByTagName('tr');

for( var i = 0, row; row = rows[i]; i++ ) {

    row.className = 'newclass';

    row.style.color = 'red';
    ...
}

参考サイト:您的访问请求被拒绝 – ITeye技术社区

Javascript変数にブロックスコープはない

2010年02月12日

JavaをやってからJavascriptを触ったので、

Javascript変数にブロックレベルのスコープがないことにビックリしました。

if文ブロックか、forループブロックか関係なく、

function内に定義された変数は全て同じスコープ:functionのスコープになります。


例えば

function test(o) {

    var i = 0;                      // i is defined throughout function

    if (typeof o == "object") {

        var j = 0;                  // j is defined everywhere, not just block

        for(var k=0; k < 10; k++) { // k is defined everywhere, not just loop

            document.write(k);

        }

        document.write(k);          // k is still defined: prints 10

    }

    document.write(j);              // j is defined, but may not be initialized

}


変数kとjはそれぞれif文のブロック、forループのブロック内に定義されたが、

実はfunctionのスコープとなりfunction内ならどこでも参照できます。


これをしっかり理解しないと以下のようなミスが起こしやすいです。

var scope = "global";

function test( ) {

    alert(scope);         // Displays "undefined", not "global"

    var scope = "local";  // Variable initialized here, but defined everywhere

    alert(scope);         // Displays "local"
}

test( );


一番目のalertは”global”だと思ったらこの記事を読む価値はあるでしょう。

一番目のalertは”undefined”を表示します。

なぜならさっき言ったように変数のスコープはfunction内に跨るのです。

varで宣言する位置、順番と関係ありません。


ここではfunction内で同じ名前でscopeという変数が宣言され、

“global”の値を持つグローバル変数は上書きされました。

そして一番目のalert時のscopeは初期化されていないため、undefinedとなってしまいます。


上記のコードを書き換えると以下と同じです。

function test( ) {

    var scope;       // Local variable is declared at the start of the function

    alert(scope);    // It exists here, but still has "undefined" value

    scope = "local"; // Now we initialize it and give it a value

    alert(scope);    // And here it has a value

}

誤解を招かないように変数の宣言はfunctionの先頭に置くのが大事ですね。