サンデープログラマの備忘録

Javascript

2011-11-15T00:25:40+09:00

**メニュー ***tips [[Javascriptのお作法]] [[Eventの処理]] ***デザインパターン [[シングルトンパターン]]

シングルトンパターン

2011-11-15T00:24:34+09:00

[[Javascript]]でシングルトンパターンを実装する。 >function Sample() { > >　　// キャッシュされたインスタンス >　　var instance = this; > >　　// プロパティの定義 >　　this.hoge = 0; >　　this.fuga = "test"; > >　　// コンストラクタの書き換え >　　Sample = function() { >　　　　return instance; >　　}; >} 元々のコンストラクタは初回のみ呼び出され、通常通りthisを返します。２回目以降は書き換えられたコンストラクタが実行されます。ただし、この実装では最初の定義から再定義の間にプロパティを追加すると、書き換えられたコンストラクタで追加したプロパティが失われます。それを解決するのが以下の方法。 >function Sample() { > >　　// キャッシュされたインスタンス >　　var instance; > >　　// コンストラクタを書き換える >　　Sample = function Sample() { >　　　　return instance; >　　}; > >　　// プロトタイププロパティを引き継ぐ >　　Sample.prototype = this; > >　　// インスタンス >　　instance = new Sample(); > >　　// コンストラクタのポインタを再設定 >　　instance.constructor = Sample; > >　　// プロパティの定義 >　　instance.hoge = 0; >　　instance.fuga = "test"; > >　　return instance; >} これでよし。

メニュー

2011-01-18T01:59:10+09:00

**メニュー -[[トップページ]] -Tool --[[便利ツール]] -開発 --[[Eclipse]] --[[Android]] --[[Ubuntu]] --[[Javascript]] --[[JQuery]] -[[Link]] **Wiki内検索 #search() ---- &link_editmenu(text=ここを編集)

Eventの処理

2011-01-18T01:58:31+09:00

**ブラウザ上でEnter Keyを押された時の処理を制御するにはどうするの？ブラウザ上で何かキーが押された時にはeventオブジェクトが生成されます。このeventオブジェクトには様々なプロパティがあり、キーボードでのキーの動きやブラウザ上のマウスの動きを知らせてくれます。ただし、キー操作に関するイベント属性は半角英数字の入力状態を対象とするらしく、日本語入力の場合はブラウザによって挙動が大きく異なるようです。 >Opera…一切イベントが発生しない。 >FireFox…最初の入力時に onkeydown属性と onkeypress属性のイベントが一度だけ発生し、入力内容の確定時に onkeypress属性が発生します。 >IE…すべてのタイプに対して onkeydown属性と onkeyup属性が正確に毎回イベントを発生させるのですが、何故か onkeypress属性のイベントは一切発生しません。 >Safari…Safari では最初の入力時に onkeydown属性と onkeypress属性のイベントが一度だけ発生し、onkeyup属性はすべてのタイプに対して正確に毎回イベントを発生させます。参考サイト [[onkeydown属性 onkeypress属性 onkeyup属性>http://w3g.jp/xhtml/dic/onkeydown]] [[eventオブジェクト（イベント情報の取得）>http://f32.aaa.livedoor.jp/~azusa/?t=js&p=event_object]] さて、Enter Keyを押したことをどうやって知るのでしょうか？それはKey Codeをみることでわかります。 >function keyCode(e){ >　　if(document.all) >　　　　return e.keyCode; >　　else if(document.getElementById) >　　　　return (e.keyCode)? e.keyCode: e.charCode; >　　else if(document.layers) >　　　　return e.which; >} 以上の様な方法でKey Codeを取得することができます。ちなみに以下のサイトには各ブラウザでのKey Codeの一覧が載っています。 [[各ブラウザでキーコードを取得してみた>http://www.programming-magic.com/file/20080205232140/keycode_table.html]] さてリストを見るとEnterは13ですね。そこで以下のように実装します。 >function disable_enter(e) { >　　if (e.which == 13) { >　　　　return false; >　　} >　　return true; >} > >$(function() { >　　$('.noEnter').keypress(disable_enter); >}); これでEnterが無効になります。参考サイト [[サラッとjQueryプラグインを書けると(･∀･)ｲｲ!!感じ>http://sakuratan.biz/archives/1597]] 上記サイトには上のソースを[[JQuery]]のプラグインにしたものがあります。それも合わせて使ってみるといいかもしれませんね。

Javascriptのお作法

2011-01-18T01:25:32+09:00

**javascriptにはtrim関数がないそうな。スペースで空白になっている文字列をtrimしてバリデートしようと思ったら、javascriptにはtrim関数が用意されていないらしい。ネットで調べるといろいろ勉強になりますね。どうしてもtrimしたい場合はどうするか？そこで正規表現の出番なんですね。 >◯StringクラスにTrimメソッドの追加 >String.prototype.trim = function() { >　　return this.replace(/^[ ]+|[ ]+$/g, ''); >} **火狐は余計なことをしてくれてるらしい。 [[Javascript]]で次のように書いたとします。 >var array = {"A","B","C",} このような場合、通常はエラーとなるはずなんですけど、火狐はそのまま何事もなかったかのように実行してしまうそうです。そしてIEで実行したときにエラーが判明したりするわけですね。なんでなんで？と探してみるもののこうしたミスはなかなか見つかりにくいものです。実装時には気をつけて定義したいものです。また一つ賢くなりました。

JeeGooContext

2011-01-09T19:15:09+09:00

JeeGooContextは右クリックで表示するコンテキストメニューを独自実装するためのプラグインです。これはわりとわかりやすいかもしれませんね。 ***導入方法公式サイトからダウンロードし解凍後、任意のフォルダにjquery.jeegoocontext.jsファイルかjquery.jeegoocontext.min.jsファイルを配置します。また、同じフォルダ内にskinsフォルダも配置してください。このフォルダ内のファイルを使って表示をしますので。 ***実装例 HTMLのBody内にリスト構造で表示したいコンテキストメニューを作成します。 [[JQuery Plugin JeeGooContext>http://www.planitworks.nl/en/jeegoocontext]] 実装は以下のサイトが参考になります。 [[独自の右クリックメニューを導入できるJavaScript「a jQuery context menu plugin」>http://www.skuare.net/test/jeegoocontext.html]]

JsTree

2011-01-09T18:31:40+09:00

JsTreeはフォルダ構造をツリー表示するためのプラグインです。導入にはやはり手古摺りました。なんせプロパティが多いものはその意味を知るのに苦労しますね。 ***導入方法公式サイトからダウンロードし解凍後、任意のフォルダにjquery.jstree.jsファイルを配置します。また、同じフォルダ内にthemesフォルダも配置してください。このフォルダ内のファイルを使って表示を切り替えますので。 ***実装例これは後ほど書きます。主に設定するプロパティについてです。 ***XMLデータフォーマット以下の構造のXMLを読み込んでツリー表示にしてくれます。 > >　 >　　 >　　　親１ >　　 >　　 >　　　 >　　　　子 >　　　 >　　 >　 >　 >　　 >　　　親２ >　　 >　　 >　　　 >　　　　子２ >　　　 >　　　 >　　　　 >　　　　　孫１ >　　　　 >　　　 >　　 >　 > [[JsTree>http://www.jstree.com/]] 実装例は以下を参考にしてください。 [[JsTree Documentation>http://www.jstree.com/documentation]]

JQGrid

2011-01-09T17:32:39+09:00

JQGridはデータテーブルとそれを操作する機能を盛り込んだプラグインです。なかなかスタイリッシュなテーブルが作れます。ただ、情報が少なくて導入から実装にはかなり手こずりました＞＜一応、わかったところまでメモを残しておきたいと思います。 ***導入方法 UIと同じく必要な機能を選択してダウンロードします。そして任意のフォルダに以下の構成を参考に配置してください。 >C:\jqGrid\ >│ >├─css >│ │ jquery-ui.custom.css　←これはJQuery-UIのものです。 >│ │ ui.jqgrid.css >│ │ >│ └─images >｜　　　(中身はJQuery-UIのものです) >│ >└─js >　│　jquery.jqGrid.min.js >　│ >　└─i18n >　　　grid.locale-jp.js ***実装例ここは後ほど書きます。主にプロパティの備忘録です。 ***XMLデータフォーマットこんな形式のデータを読み込んでくれます。もちろんDBへアクセスして表示も出来ますが、とりあえずのプロトタイプとして使っています。 > >　 >　　data1_1 >　　data1_2 >　　data1_3 >　　data1_4 >　　data1_5 >　 >　 >　　data2_1 >　　data2_2 >　　data2_3 >　　data2_4 >　　data2_5 >　 > ***使用上の注意薬じゃないですけどｗ HTMLファイルには以下の記述を忘れないで下さい。順番もお間違えなく。この表記の順番を間違えただけでエラーに捕まってしまったのは内緒です＞＜それからJqGridはJQuery-UIのデザインを参照していますので、以下の記述も忘れずに。 [[JQuery Grid Plugin>http://www.trirand.com/blog/]] 実装はここを参考にしてください。コードもいろいろのってます。 [[JqGrid Demos>http://trirand.com/blog/jqgrid/jqgrid.html]]

JQuery

2011-01-09T16:36:49+09:00

**メニュー ***導入方法 [[JQueryを使ってリッチなクライアントを簡単に作ってみる。]] ***プラグイン [[JQuery-UIプロジェクト]] [[JsTree]] [[JQGrid]] [[JeeGooContext]]

JQuery-UIプロジェクト

2011-01-09T16:27:25+09:00

このプラグインはとても便利です。例えばドラッグ＆ドロップやリサイズ機能、他にもダイアログ表示など。その機能に関しては実際に公式サイトのデモを御覧ください。それをみればすぐにでも使ってみたくなるはずです。 ***導入方法基本的には[[JQuery]].jsと同じです。ダウンロードして任意のフォルダに配置してください。ただ、このプラグインは多機能の為、必要な機能だけを選択することも可能です。ダウンロードサイトで、必要な機能にチェックを入れてダウンロードを実行してみましょう。もちろんいろいろ試してみたい場合は全部のせでもOKですね。また、このプロジェクトの便利なところはUIデザインのテーマを選択出来ることです。少しわかりづらいかもしれませんが、ダウンロードボタンの上の方にThemeという項目があります。ここで、好きなThemeを選択してください。それだけで、Zipファイルに必要なものをまとめてくれます。さらに便利なことに、テーマをカスタマイズすることも出来るんです。こんなに便利でいいんですかね？ここで、UIのデザインを作成してダウンロードするだけで、自身のサイトに好みの機能を追加できるなんて。ぜひお試しあれ。 [[JQuery UI>http://jqueryui.com/]]