CoffeeScriptで値の比較

JavaScriptで値の変換をするときは、型まで完全に一致していることを保証するために「===」や「!==」を使用します。
CoffeeScriptでは、JavaScriptで推奨されない（暗黙の型変換が行われるため）「==」と「!=」が、型まで完全に一致していることをチェックしてくれます。また、「==」と「!=」のエイリアスとして「is」と「isnt」があるので英文のように比較を行うこともできます。

サンプル

console.log(0 == 0) # true
console.log(0 is 0) # true

console.log(0 != 0)   # false
console.log(0 isnt 0) # false

userName = 'hoge fuga'
console.log(userName == 0) # false
console.log(userName is 0) # false
console.log(userName is 'hoge fuga') # true
console.log(userName is 'user name') # false

このコードがJavaScriptに変換されると、したのコードになります。
JavaScriptのコードは、「===」と「!==」になっています。

(function() {
  var userName;

  console.log(0 === 0);

  console.log(0 === 0);

  console.log(0 !== 0);

  console.log(0 !== 0);

  userName = 'hoge fuga';

  console.log(userName === 0);

  console.log(userName === 0);

  console.log(userName === 'hoge fuga');

  console.log(userName === 'user name');

}).call(this);

[JavaScript]正規表現のプロパティ

JavaScriptで正規表現のプロパティから取得できる値のまとめ。

サンプルコート

    var p = /([a-z]+)([0-9]+)/i;

    // 現在の正規表現
    document.writeln('source = ' + p.source);
    // 文字列全体に対してマッチングするか
    document.writeln('global = ' + p.global);
    // 大文字小文字の区別
    document.writeln('ignoreCase = ' + p.ignoreCase);
    // 改行を行末と判断するか
    document.writeln('multiline = ' + p.multiline);

    // 静的なプロパティ
    var ret = 'abc123'.match(p);
    // 入力した値（abc123となる）
    document.writeln('RegExp.input = ' + RegExp.input);
    // グループ化した値の参照（$ + グループ化の位置をしめす数字を指定する。）
    document.writeln('RegExp.$1 = ' + RegExp.$1);
    document.writeln('RegExp.$2 = ' + RegExp.$2);

結果

source = ([a-z]+)([0-9]+)
global = false
ignoreCase = true
multiline = false
RegExp.input = abc123
RegExp.$1 = abc
RegExp.$2 = 123

[jQuery]拡張して関数を追加する方法

jQueryを拡張する方法。

拡張方法としては、jQueryのオブジェクトに関数を追加してあげるだけ。

jQueryオブジェクトが「$」となっているので、「$.関数名 = function(引数)」として定義してあげる。

(function ($) {
    $.showMessage = function(msg) {
        alert(msg);
    };

    console.log($.showMessage("メッセージ"));
})(jQuery);

Project Euler-Problem 1

Project Eulerなるものの存在を知ったので言語の勉強でつかってみた。

まずは、問題1をやってみた。

問題内容

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
Find the sum of all the multiples of 3 or 5 below 1000.

訳すとこんな感じ。

10未満の自然数のうち、3 もしくは 5 の倍数になっているものは 3, 5, 6, 9 の4つがあり、 これらの合計は 23 になる。
同じようにして、1,000 未満の 3 か 5 の倍数になっている数字の合計を求めよ。

解くために作ったプログラム

Scala

val ret = (0 to 999).filter(n =>{n % 5 == 0 || n % 3 == 0}).sum
println(ret)

Kotlin

Scalaと全く同じになるかなと思ったけど、sum関数がなかったので自作してみてます。

package p1

import java.util.Collection

fun Collection<Int<.sum():Int {
    var ret = 0
    for (item in this) {
        ret += item
    }
    return ret
}
fun main(args : Array<String>) {
    val result = (1..999).filter {it % 3 == 0 || it % 5 == 0}.sum()
    println("result = ${result}")
}

Java

いたって普通のコード。

package p1;

public class P1 {

    public static void main(String[] args) {
        int ret = 0;
        for (int i = 1; i <= 999; i++) {
            if (i % 3 ==0 || i % 5 == 0) {
                ret += i;
            }
        }
        System.out.println("ret = " + ret);
    }
}

javascript

とりあえず結果はあってる。

    var Num = function(s, e) {
        this.filter = function(func) {
            var arr = new Array();
            for (i = s; i <= e; i++) {
                if (func(i)) arr.push(i);
            }
            arr.sum = function() {
                var sum = 0;
                for (i = 0; i < this.length; i++) {
                    sum += this[i];
                }
                return sum;
            };
            return arr;
        }

    };

    var ret = new Num(1, 999).filter(function(val) {
        return val % 3 == 0 || val % 5 == 0;
    }).sum();
    document.write(ret);

groovy

def sum = (1..999).grep({it % 3 == 0 || it % 5 == 0}).sum()
println "sum = $sum"

[jQuery]grep関数

jQueryのgrep関数を使って、配列の内容にフィルタかけてみたメモ。

grep関数の仕様

grep(array,callback,invert)

array    -> grepをかけたい配列オブジェクト
callback -> フィルタ条件をもつ関数オブジェクト。戻り値でbooleanを返したげる。
invert   -> これをtrueにしてあげると、callback関数の条件を逆にできる。(falseのものだけをフィルタする場合は、trueにするイメージ)

例

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    (function ($) {
        // 5以下の要素のみを抽出
        var filter = $.grep(arr, function (value) {
            return value <= 5;
        });

        // 3つめのパラメータがtrueなので、6以上の要素のみが抽出される。
        var filter = $.grep(arr, function (value) {
            return value <= 5;
        }, true);

        // 以下のように正規表現も使えます。
        var ret = $.grep(["100", "200", "300"], function (value) {
            return value.match(/[12]00/);
        });
    })(jQuery);

jQueryを使うときは$の競合に気をつける

jQueryを使うときは、jQueryの別名参照の「$」を使用するけど、これの競合に注意しないといけないらしい。

例えば、こんなコードの用に「$」が既に定義されていた場合、$('body')はjQueryの呼び出しではなく、文字列変数の「$」を参照しているだけなので実行時にエラーになってしまう。（普通はこんなコードはないけど）

エラーの内容
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

この競合を解決するために、jQueryを使うときは「$」を直接使うのではなく無名関数でwrapして使ってあげるのが一般的らしい。無名関数を使った場合は、こんな感じになるようだ。
これは、無名関数で引数を1つ（この場合は「$」）受け取っている。その引数には、最後のjQueryオブジェクトを渡してあげる。
あんまり理解出来なかったが、無名関数全体を括弧で囲んであげて、最後の「(jQuery)」部分でjQueryオブジェクトを引数に指定してあげてるようだ。

[jQuery]fadeOutとfadeIn

fadeOutは対象の要素を隠してくれて、fadeInは表示してくれる。

fadeOutとfadeInの引数

1.speed

  速度を指定する。数値(ミリ秒)を指定した場合は、そのスピードで表示、非表示になります。
  文字列を指定した場合は、以下のどうさになります。ざっくり指定するにはこれですね。

  slow:ゆっくりと
  normal:普通
  fast:早く

  *この値を省略した場合は、「normal」な動作となります。

2.callback

  表示、非表示が完了したタイミングでコールバックされる関数。任意指定だから特に指定しなくても大丈夫。

---

下の例は、表示、非表示はゆっくりな動作を指定して、非表示にした場合にはボタンのラベルを「表示」にし、表示した場合には「閉じる」にしています。

<script type="text/javascript">
    $(function () {
        var button$ = $('input[type=button]');
        button$.toggle(
                function () {
                    $('div#hoge').fadeOut("slow", function() {
                        button$.val("表示");
                    });
                },
                function() {
                    $('div#hoge').fadeIn("slow", function() {
                        button$.val("閉じる");
                    });
                }
        )
    })
</script>

[jQuery]イベントに応じて要素の表示、非表示を切り替える（アコーディオン）

jQueryを使用して、要素の表示と非表示を切り替えるには、toggleやslideToggle関数を使うと簡単に実現出来ます。

toggle関数は、引数を指定しないで呼び出してあげるとその要素の表示(show)と非表示(hide)を繰り返してくれます。
slideToggle関数を使うと、非表示にするときには徐々に消えていき、表示するときにはにょきにょきでてきます。

引数なしでtoggleとslideToggleを使ってみる

以下のhtmlをdiv部分をボタンクリックイベントで表示、表示を切り替えてみましょう。

<input type="button" value="表示・非表示切り替え" id="btn">

<div id="view">
この部分の表示、非表示を切り替えます。
</div>

toggle関数を使用すると、非常に簡単に表示、非表示を切り替えられますね。

$(function () {
    $('input#btn').click(function () {
        $('div#view').toggle();
    });
})

slideToggleもtoggleと使い方は基本的に同じ。

$(function () {
    $('input#btn').click(function () {
        $('div#view').slideToggle();
    });
})

表示、非表示の速度を変えてみる

toggleとslideToggleの引数には、ミリ秒と速度を示す文字列を指定出来ます。

ミリ秒を指定した場合は、その時間をかけて非表示になったり表示したりしてくれます。
文字列は、「Slow」、「Normal」、「Fast」の3種類が指定できまる。
以下のように、文字列通の動作をします。ミリ秒指定と比べるとかなりおおざっぱな感じですね。
* Slow:ゆっくりした動作
* Normal:普通の動作
* Fast:早い動作

使い方の例。この例だと2秒間かけて表示と非表示されます。

$(function () {
    $('input#btn').click(function () {
        $('div#view').slideToggle(2000);
    });
})

文字列指定の場合は、こんな感じです。

$(function () {
    $('input#btn').click(function () {
        $('div#view').toggle('fast');
    });
})

[jQuery]class属性の操作

jQueryを使用して、html要素のclass属性を操作する方法

class属性に、任意のクラスを追加

addClassメソッドを使用して、クラスを追加出来る。

以下の例では、input要素すべてに「className」というクラスを追加しています。

$(function () {
  $('input').addClass('className');
});

複数のクラスを追加したい場合には、スペースで区切って複数のクラス名を列挙してあげるとよい。
もしくは、addClass('class1').addClass('class2')のようにメソッドチェイン呼び出しにしてあげるとよい。
個人的には、後者の方が好み。いくつのクラスが追加されてるか分かるし、クラス名を単独になるから可読性高くなるし。

class属性から、任意のクラスを削除

removeClassメソッドを使用して、クラスを削除することが出来る。

基本的な使い方は、addClassと同じ。

以下の例では、input要素から「className」というクラスを削除しています。

$(function () {
  $('input').removeClass('className');
});

イベントを拾ってclassの有無を切り替える

イベントに応じて特定のクラスを削除したり、追加したりする方法。
例えば、input:textにフォーカスがあたっている場合、背景色を変更するクラスを追加して、フォーカスが外れた場合に削除したりする場合に使える。
addClassとremoveClassを組み合わせて使用したら出来るけど、toggleClassというメソッドが用意されているので、こちらを使った方が見通しがよくなる。

この例は、フォーカスがあたった場合と外れた場合に、changeTextColorファンクションを呼び出しています。
呼び出し先のメソッドでは、toggleClass('active')となっているので、「active」クラスがあればクラス属性から削除され、なければ追加されます。

$(function () {
  $('input:text').focusin(changeTextColor).focusout(changeTextColor);
});
function changeTextColor() {
  $(this).toggleClass('active');
}

指定されたクラスがclass属性にあるかチェック

hasClassメソッドを使用してテストできる。

$(function () {
  $('input').hasClass('className');
});

[jQuery]テーブルの行の背景色を交互に変更する方法

trのoddとevenでひろってきて、cssで背景色を変えることが出来る。
テーブルのレコードを表すtrタグと、奇数(odd)、偶数(even)番目を表すselectorを
組み合わせて使うことで割と簡単に実現出来る。

    $(function() {
        // trの中で奇数番目のものを対象にする
        $('tr:odd').css({
            backgroundColor:'#aaaaaa'
        });
        // trの中で偶数番目のものを対象にする
        $('tr:even').css({
            backgroundColor:'#ffffff'
        });
    });

[JavaScript]checkboxのチェックをクリアする

特定のdiv要素のボタンがクリックされたら、そのdiv要素内のcheckboxのチェックを外す方法。

jQueryを使うとこんな感じで出来るみたい。

[JavaScript]文字列のtrim

jQueryのtrim関数を使用してtrimできる。

// jQueryのtrim関数を使用してtrimする。
$.trim("trimしたい文字列");

JavaScript本格入門を読んだよ

JavaScriptを使う必要に迫られたので、読んでみた。
JavaScript書くなんてかなり久しぶりでちゃんと理解しとかないとと思い、Amazonレビューでも良さげそうだったこの本にしてみた感じです。



読んでみた感じは、内容はそんなこくないとは思うけど、図とかを使い端的に説明していて非常に分かりやすかったかなと思います。
ただ、サブタイトルにあるajaxやjqueryだったりの部分は、この本で学ぶのは期待しない方がよいと思います。
あくまでも、ajaxってなに？どんなことができるの？ってことを知れたり、jqueryを使うとどれぐらい簡単にajaxを実現出来るかを知れる程度だと思います。
（jqueryの専門書が出てる訳で、この本だけでjqueryも理解出来るって思う方が間違ってると思います。）

[JavaScript]フォーカスが外れたタイミングで合計を自動計算

フォーカスが外れたタイミングで、任意のinputの値を合計してinputタグのvalue属性に出力してみた。

JavaScriptのソース。いけてるかどうかは分かりませんが・・・

$(':input[class*=autoSum-]').focusout(
    function () {
      var classes = $(this).attr('class').match(/autoSum-[^ ]*/g);
      for (var i = 0; i < classes.length; i++) {
        var className = classes[i];
        className.match(/autoSum-(.*)/);
        var target = RegExp.$1;
        var inputs = $(':input[class*=' + className + ']');
        var total = 0;
        for (var j = 0; j < inputs.length; j++) {
          var inputVal = inputs[j].value;
          if (inputVal != undefined && inputVal != '' && !isNaN(inputVal)) {
            total += parseInt(inputVal);
          }
        }
        $('input:[class*=total-' + target + ']').val(total);
      }
    }
);

上記のJavaScriptを使って、合計を自動設定するhtmlの例