こんばんは。Shota(@Mii4a2501)です。
突然ですがRails Tutorial経験者の方、こんなコードを目にしたことはありませんか?
$('#micropost_picture').bind('change', function(){
var size_in_megabytes = this.file[0].size/1024/1024;
if (size_in_megabytes > 5) {
alert('Maximum file size is 5MB. Please choose a smaller file');
});
これはCarrierWaveで画像をアップロードできるようにした後、ファイルサイズの検証のために作られたjQuery文です。
ふとこのコードの意味を知りたいと思ったので一行ごとに内容を書いていこうと思います。
1行目
$('#micropost_picture').bind('change', function(){
**$('#micropost_picture')**は簡単ですね。
$はjQueryのインディケーターでid="micropost_picture"を指し示しています。
さて次のbindメソッドです。
このメソッドは第一引数にイベント('click'や'submit'など)に対し、第二引数にはコールバック関数を紐づけます。
第一引数の'change'イベントですが、意外とそのままの意味のようで、テキストボックスやチェックボックスなどのvalue値が変更される際のことを指し示すようです。
第二引数のコールバックは、通常通り上から順に処理するのではなく、紐づけられたインスタンスやイベントが呼び出されたときに参照する処理方法のことです。非同期処理で散々お世話になること間違いなしですね。例えると、関数くんAに関数くんBを呼び出してもらう感じです(間違ってたらすいません!!)
Railsを勉強している方だと、Rspecのletをイメージするとわかりやすのではないかと思います。
2行目
var size_in_megabytes = this.files[0].size/1024/1024;
var size_in_megabytes
ここも最初同様、簡単です。
varはvariable(変数)の略でそのまま変数宣言です。
jQueryのthisですが直前の$で指し示した要素を指すので、この文中では**this = $('#micropost_picture')**となります。
(ここも間違えてたらすいません。。。)
その後、files[0]でinput type="file"に入れられた画像を取得。sizeメソッドで容量を確認して1/1024^2することでbyteをMBに変換しています。
3行目
if (size_in_megabytes > 5)
条件文でおなじみifですね。
写真の容量が5MB以上の時に条件文内での処理を行います。
4行目
alert('Maximum file size is 5MB. Please choose a smaller file.');
alertはダイアログを表示する際用いるメソッドです。これも避けては通れないものの一つではないでしょうか。