はてなブックマーク

JavaScriptのクロージャは便利だが、forなどのループ内で繰り返し呼び出したい場合は、変数のスコープに注意する必要がある。特に、ループカウンタの値を参照するようなケースでは、ループ内で擬似的にfunction()を定義して、新しいスコープを作る必要がある。 1秒ごとに何かを実行する例で考えてみる。例えば、1秒ごとに「fire! 0」「fire! 1」「fire! 2」と出力したいとする。 (例1)うまくいかない方法 function closure_sample1(){ for(var i=0;i<3;i++){ setTimeout(function(){ console.log('fire! ' + i); // メッセージ出力 },1000*i); // 1000ミリ秒ごとに処理を実行 } } この例では、タイマー自体は1秒ごとにセットされるが、メッセージの出力部分(4行目)

JavaScriptでオブジェクトの配列(普通の配列でもOK)に対し、あるプロパティの値をキーとして、条件を満たす要素のみを抽出したいときは、array.filter() メソッドを使う。(ソートしたい場合は、ここを参照。) 例えば、以下のような配列があるとする。 // JavaScript gLines = [ { ln_file: "T1301451.json" ln_key: "1301451" ln_name: "[ＪＲ]岩泉線 (茂市～岩泉) " }, { ln_file: "T1301541.json" ln_key: "1301541" ln_name: "[ＪＲ]北上線 (北上～横手) " }, { ln_file: "T1301671.json" ln_key: "1301671" ln_name: "[ＪＲ]磐越東線(ゆうゆうあぶくまライン) (いわき～郡山) " }]

JavaScript でタイマーを使う。JavaScriptでは、｢一定時間後｣に処理を行う setTimeout() と、｢一定時間ごと｣に処理を行う setInterval()の2つが用意されているが、今回は繰り返し処理を行いたいので、後者を使う。 setInterval()でやりたい処理と間隔を指定し、clearInterval()で繰り返しを中止する。 var timer; window.onload = function(){ timer = setInterval('hoge()',1000)); // 1000ミリ秒ごとに実行したい処理hoge()を登録 } function stop(){ clearInterval(timer); // 繰り返し処理を中止する } function hoge(){ // 一定時間ごとにやりたい処理 } setTimeout()を以下のよう

最近のブラウザでは、オブジェクトをJSON文字列に変換する JSON.stringify()、逆にJSON文字列をオブジェクトに変換する JSON.parse() が標準で用意されている。 JSON.stringify(value [, replacer] [, space]) space(省略可)を利用して結果文字列を整形することができる。 [以下引用] space に数を指定すると、戻り値のテキストの各レベルは、指定した数の空白でインデントされます。 space が 10 を超える場合、テキストは 10 個の空白でインデントされます。 space が空でない文字列 (‘\ t’ など) の場合、戻り値のテキストの各レベルは、その文字でインデントされます。space が 10 文字より長い文字列の場合は、最初の 10 文字が使用されます。 デフォルトで作成した例： [{"gpsDate"

駅データ.jpの路線や駅のデータは、先頭行が項目名になっているCSV形式で提供される。こういった「項目行があるCSV形式」ファイルをJSONに変換する方法。項目行で指定される項目名を、そのままJSONデータのプロパティ名として利用する。(そのため、ファイルの種類によらず汎用的に使える。) 入力データ (例) company20130120.csv company_cd,rr_cd,company_name,company_name_k,company_name_h,company_name_r,company_url,company_type,e_status,e_sort 1,11,JR北海道,ジェイアールホッカイドウ,北海道旅客鉄道株式会社,JR北海道,http://www.jrhokkaido.co.jp/,1,0,1 2,11,JR東日本,ジェイアールヒガシニホン,東日本旅客鉄道株

結論から言うと、 - Math.max.apply(null,object.map(function(o){return o.element;})) の1行で実現できる。 JavaScriptで最大値を得るには Math.max(x,y) を使う パラメータは2つに限らず複数でも可。つまり、Math.max(x,y,z)とは書けるが、配列を渡すことはできない。 配列の最大値を得るには apply() を使う 数値を格納した配列 array に対しては、Math.max.apply(null,array)とすればOK。 配列から特定の要素(の全て)を取り出すには map() を使う Array.mapは｢与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成｣する関数。 [ { "gpsDate": "2011/02/14", "gpsTime": "10:31

Google CalendarをJavaScriptで操作するには、’Google APIs Client Library for JavaScript’が有用だ。このライブラリを使うに際し、自分のアプリケーションをGoogleに登録する手順を説明する。この作業により、コードで使う「Client ID」や「API key」が入手できる。 基本的な考え方 Getting Started with the Google APIs Client Library for JavaScript セットアップ 上記ドキュメントのSetupに説明がある。 以下に具体的な手順を示す。 新しいプロジェクトを作成する APIコンソールを開くと、(少しわかりにくいが)左上のプロジェクト名の部分がプルダウンメニューになっていて、’Other prpject’ – ‘Create…’という項目がある。 使用するAP

mobile機器の画面で日付や時刻を入力するには、mobiscrollが便利だ。(PCのブラウザでももちろん使える。) 今回は、この中のdatetime コンポーネントを使ってみる。 mobiscrollのCSS/スクリプトファイルを読み込む 適宜ダウンロードしてCSS・スクリプトファイルを読み込む。CDNがあるかは不明。 <!-- HTML --> <link rel="stylesheet" href="/jslib/mobiscroll/mobiscroll.custom-2.5.0.min.css"/> <!-- mobiscrollの前にjQueryをロードする必要がある。--> <script src="/jslib/mobiscroll/mobiscroll.custom-2.5.0.min.js"></script> HTMLでコンポーネントをマークアップする <!-- H

前記事で準備が完了したので、’Google APIs Client Library for JavaScript’を使ってGoogle Calendarにアクセスしてみる。操作方法はGoogleの他のライブラリ(例えばGoogle+)と同じで、認証やメソッドの呼び出しなどは流用/共通化できる。 JavaScriptライブラリ自体のドキュメントは、固有の機能(ライブラリ自身のロードや認証)のみなので、個々のメソッドについては各ライブラリのドキュメントを参照する。 ・リファレンスはこちら。 ・参考になるページはこちら。 認証する サンプルとして挙がっている流れは以下。 [HTML] (0)Google側が提供する認証ページへの誘導ボタン(リンク)をHTMLで用意しておく [JavaScript] (1)’Client ID’と’API Key’を使って認証済かを確認する (gapi.auth.

HTMLテーブルのセルがクリックされた際、クリックされた行の情報をjQueryで得る方法。 例として以下のテーブルを想定し、td要素をクリックすると起動されるイベントハンドラを定義する。 <!-- HTML --> <table id=tblPlanSpot1> <tr> <td>A</td> <td id="a">AA</td> <td>AAA</td> </tr> <tr> <td>B</td> <td>BB</td> <td>BBB</td> </tr> </table> // JavaScript // イベントハンドラ $('#tblPlanSpot1 td').live('click',function(){ var $cur_td = $(this)[0]; // (1):セルのHTML表現 [0]をつける点に留意のこと。 var $cur_tr = $(this).pare

HTML5の機能を利用すると、ファイルの作成が非常に簡単になる。ここでは、作成したファイルをローカル環境にダウンロードすることを想定。 var jsonString = JSON.stringify(gGpsData); //ファイル化したい内容をJSON形式でシリアライズ //var jsonString = JSON.stringify(gGpsData,null,2); // 空白を入れて見やすい形式にする // タイプを指定してBlobオブジェクトを生成。対象を [ ] で囲む。 var blob = new Blob([jsonString],{type:'text/plain'}); 以前(2012年)は、Blob()ではなくBlobBuilder()を利用していた。Blobでは、対象を[]で囲んで配列にする。また、type: でMIMEタイプを指定する。 Blobへのリンクは

jQueryRotateは、画像を回転させるjQueryのプラグイン。ここからダウンロードして使う。 画像を回転させる // JavaScript $("#img").rotate(45); // 45度回転させる(負の数も指定可能) $("#img").rotate({angle:45}); // 別の記述法(パラメータ方式) 画像をアニメーション付で回転させる // JavaScript // 45度までアニメーション付で回転(所要はデフォルトの1000ミリ秒) $("#img").rotate({animateTo:45}); // 0度から45度までアニメーション付で回転(所要6000ミリ秒) $("#img").rotate({ duration:6000, angle: 0, animateTo:45 }); アニメーションに効果を加える // JavaScript $(thi