Archive for the ‘Ajax’ Category

(約)40行で出来るXML→JSONパース

ちょっとやってて感動したので書いてみる。
XHRで取ってきたレスポンスのXMLをパースしてJSONに変換するものです。
結構仰々しいのかなぁ・・・と思いつつ書いてたらあっさりできた。時間にして20分くらい?
折角なのでちょっコードをさらしてみます。
function XMLToJSON(ajax){
if (ajax.responseXML != null)var xmlDoc = ajax.responseXML;
else {
if (window.ActiveXObject) {
var xmlDoc = new ActiveXObject(‘Microsoft.XMLDOM’);
xmlDoc.async = false;
xmlDoc.loadXML(ajax.responseText);
}
else if (window.DOMParser) var xmlDoc =  new DOMParser().parseFromString(ajax.responseText, “application/xml”);
else return;
}
var xml = xmlDoc.documentElement;
var loopParse = function(obj)
{
var res = {}, cacheTag = {};
var ob = {}, att = obj.attributes;
if (att != null && att.length != 0) {
for (var a = 0, [...]

Read the rest of this entry »

ブラウザ判定スクリプト

JavaScriptを扱う上で必須となるブラウザの判定。
一般的には、
IEなら document.all かdocument.createPopup があるかで判定、
Operaなら window.opera があるかで判定
ってやるのが簡易的でしょうか。
ただ、毎回document.allってやるってどうにも冗長な感じがしたので、
navigator.userAgentから判定するスクリプトを作ってみた。いや、作ったって言うほどすごいものでははないですね。
function Browser(){
var res = {};
var ua = navigator.userAgent.toLowerCase();
res.IE = (ua.indexOf(‘msie’, ua) != -1 && ua.indexOf(‘opera’,ua) == -1) ? true : false;
res.IE7 = (ua.indexOf(‘msie’, ua) != -1 && ua.indexOf(‘7.0′, ua) != -1 && ua.indexOf(‘opera’) == -1) ? true : false;
res.IE8 = (ua.indexOf(‘msie’, ua) != -1 && ua.indexOf(‘8.0′, ua) != -1 && ua.indexOf(‘opera’) == -1) ? true [...]

Read the rest of this entry »

今更知ったsubstr

PHPでも「substr」ってありますよね。
特定位置から先の文字列を抽出するアレです。
JavaScriptにもあります。
String.substr
見たいな感じで。
最近PHPばかり書いててJavaScriptをあんまり書かなかったせいかもしれませんが、
PHPで、
substr($str, -1);
とかやると末尾から文字を切り取りますよね。
で、JavaScript。
文字列 str = ‘abcdefg1′;
str.substr(-1, 1);
とかやると、Firefoxではちゃんと1が返ってくる。
ところがIEだと、何故かaが返ってくる。おいおい、-1を解釈しないのかよ><
意外なところでまたブラウザの違いに悩まされた。特定のIDから配列のインデックスを抽出しようとしたら、
IEは何度やってもundefined。30分はハマった。
本当に困った方ですね、IEさんは。
・・・っていうかこんな細かいところに挙動の違いが有るなんて知らなくて驚いた。

Read the rest of this entry »

関数オブジェクトを入れ子関数内からスコープを外して参照させる?

ライブラリとかを作っていると、そのクラス内で全てメソッドを共有してその関数内で処理をまとめて書くのが普通ですよね。
グローバル汚染をしないのが一般的な考え方なもんですが、ここでつまづく方が多い?というか私はすっ転びましたね。
結局は「スコープチェーン」と「参照」の問題なのですが、理解していながらも上手い解決法が見つかりませんでした。
クラス内でクロージャに押し込めた関数内では基本的にクラスのプロパティが参照できません。
例えば、
function class(){
this.num = 1;
this.func = function(){
document.getElementById(‘hogehoge’).onclick = function(){
alert(this.num);
}
this.func()
}
DOMlevel1はそろそろやめないといけないですね(笑)まぁサンプルってことで。
ドキュメントロード時にクラスを生成し、hogehogeのidが付いたものをクリックするとアラートさせるシンプルコード。
しかしこれだとアラート内はundefinedになります。クロージャを知ってたら当たり前ですが。
ドキュメント内でクラスインスタンスを生成していればそのまま変数名でアクセスでき・・・・
といったところで解決しました。
javascriptにおけるオブジェクトは全て「参照渡し」なんですよね。
ってことは、引数にクラスオブジェクトを仮想的に渡して参照させればあら不思議。
引数にはクラスのオブジェクトが「参照」されるので、そのままプロパティにアクセスできるんですね~。知らなかった。
つまり、クロージャに押し込める「前」の階層にクラスオブジェクトを参照させる変数を定義しておく。これがポイント?
function class(){
this.num = 1;
this.func = function(thisclass){
var class = thisclass;
document.getElementById(‘hogehoge’).onclick = function(){
alert(class.num);
}
this.func(this);
}
みたいな感じでやれば、クラス生成時にアラートは1と表示されます。インスタンスを格納する必要が無く、ただnewすればいいだけですね。
スコープの飛び越え、というのは少し違う気がしますが、逆にそのスコープ内にオブジェクトを持ってくる、という逆転の発想?
まぁおのおかげで一つのクラス内でクロージャも使い放題になります。イベント設定とかしてる時には特に便利。
このテの話題が少なかったのでメモ書き程度に。
クロージャは便利であり、厄介でもありますね。
※追記
function.applyでバインドして実行する方法もあるようです。こっちの方がスマートかな。
http://d.hatena.ne.jp/kminoru/20080228/1204250525

Read the rest of this entry »

第2回 デザイナーのためのプログラミング入門

プログラムは難しくありません。
日々の仕事でwebデザイン、web製作に従事されている方、趣味でホームページを製作されている方へ。
「簡単なシステムが入れられたらいいなぁ」と思う機会はありませんか?
「でも難しいからやりたくない」
そんなことはありません。プログラムは決して難しいものではありません。
その理由は・・・勉強会に来ていただければ分かります。
もちろん、「もっとCSSを覚えたい」というのでもOKです。
必要なのはやる気とPCだけです。
勉強会のタイムテーブル(第二回)
①13:00~14:00 「webデザインのための色彩講座~良い配色、悪い配色~」
講師:立川弘幸(株式会社COLOBO)
②14:10~15:10 「初めてのCodeIgniter~フレームワークを使ってみよう~」
講師:鈴木、安藤(日本CodeIgniterユーザ会)
③15:20~16:40 「デザイナーのためのプログラミング入門(第二回)」
講師:杉本吉章(日本CodeIgniterユーザ会)
16:40~17:00 質疑応答
ご自分のPCをご持参ください。
勉強会終了後、交流会を予定しております。(実費)
第二回 デザイナーのためのプログラミング入門
開催日時:2009年1月24日(土)13:00~17:00
定員:40名
参加費:無料
開催場所:愛知県勤労会館「つるまいプラザ」第一講習室
住所:愛知県名古屋市昭和区鶴舞1丁目2番32号
お申し込みは下記よりお願い致します。
http://neo-navi.net/study/

Read the rest of this entry »