今日の技術

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

isNaN は引数が数値として解釈できないかどうか、ですが、
数値として判断できるかどうかのほうが直感でわかりやすいと思います。
!isNaN なわけですが、使いづらいです。
「数値として判断できないの否定」となります。

そこで、isFinite があります。こちらのほうが素直に使えます。

isNaN('aaa') !== isFinite('aaa')
isNaN('12') !== isFinite('12')

{a8.net http://books.livedoor.com/item/1826530}

---

isNaN 関数は、引数が数値として解釈できるかを返します。
まずは isNaN(0) これは false ですね。
続いて isNaN("aiueo") これは true ですね。
さらに isNaN(true) これはfalse です。

意外だったのは isNaN(undefined) は false ですが、
isNaN(null) は true なんですね。
引数指定にご注意を。

---

{a8.net http://books.livedoor.com/item/1934172}

広域変数は、window オブジェクトで定義される変数で、
どのスコープからも参照できる、便利な変数です。

ただし、変数を参照する際に、window オブジェクトまでたどってから参照されるので、
処理は遅くなります。

また、他のスクリプトからも使用される可能性が高いので、
競合する可能性もあります。

それでも JSONP など、広域変数を使ったアクセスは必要だと思いますので、
ここでは、参照されづらい広域変数ということで考えてみました。

まずは、パスをそのまま登録する場合。

window['http://localhost/test.js'] = 'aaa';

スクリプトを指すことによって URL を一意にすることができるので、
他スクリプトとの競合が無くなります。
また、window[] の形式は window.property のような形式では取得できない
文字列を指定することができます。

それでも、同一スクリプト内で、複数の広域変数を定義する可能性があります。
上述の場合は、window['httpp://localhost/test.js'] の下に
プロパティを定義することも可能ですが、ここでは

window[(new Date()).getTime()];

のように、経過時間を数値に変換した結果を使用することができます。
この場合、 window.123456789 のような形式はアクセスすることができませんので、
より競合しづらい形式となるので、他スクリプトと競合する可能性が少なくなります。

---

{a8.net http://books.livedoor.com/item/1792718}

{a8.net http://books.livedoor.com/item/1826530}

---

今回は、対象オブジェクトのプロパティ存在チェックについて書きます。

以前に、ブラウザ判定のときに使える、プロパティ有無の記事で、
以下のような記述をしていました。

if(obj.prop !== undefined){
}

null 値の排除もできているので完璧だと思ったのですが、
唯一、undefined 値を代入されたときに対応できませんでした。

現在、既存ページを HTML5 に向けた取組を行なっており、
属性の存在チェックが、より重要になってきました。
たとえば、placeholder 属性の定義が無い場合は、
placeholder 機能を実現するための javascript コードを実行するようにしています。

ということで、今度は属性コレクションの存在を問うようにしてみました。

if(name in obj){
}

これであれば、undefined 値が代入されても問題ありません。

---

{a8.net http://books.livedoor.com/item/1882568}

汎用関数を作っていると、現在の関数の状況を把握するために、
arguments.callee や this キーワードなども使ってみたくなります。
t
his キーワードについては、取り扱いが難しいほうだと思います。

原則、関数のインスタンスが属しているオブジェクトです。
だいたいのケースでは、this == window です。

要素に attachEvent や addEventListener で割当てられたときは、
this == 要素になりますが、要素の onclick に直接割当てた場合は
this == window になるようです。

このように、取り扱いが難しい this ですが、コントロールすることができます。
関数オブジェクトに apply メソッドを使用します。

FUNC.apply(THIS, [ARG1, ARG2]);

FUNC は関数オブジェクト。
THIS は this にしたいオブジェクト。
ARG1, ARG2 は本来の FUNC 関数に渡す値を配列にして指定します。

---

{a8.net http://books.livedoor.com/item/3019928}

{a8.net http://books.livedoor.com/item/3481813}

---

今回は、意外に便利な this キーワードについて紹介します。

this は関数内で、簡単にいうと、今の自分をあらわすときに使います。
基本的には作成されたインスタンスのことをあらわします。

従って、通常の関数の場合は window オブジェクトになることがほとんどです。
以下で確認することができます。

alert(this.toString())

これを、より汎用性のある方法で活用してみましょう。

まず、this で、今現在のオブジェクトを参照するようにします。

function test() {
 alert(this.toString());
}

test が属するインスタンスのソースコードを返す関数です。
これを呼出す際に、インスタンスを作成できるようにしましょう。

function instance() {
 this.test = function() {
  alert(this.toString());
 }
}
var ins = new instance();
ins.test();

さらに、呼出元を変更する際には、関数オブジェクトに対して、apply を使用します。
第一引数は this にするオブジェクトです。
ちなみに、第二引数は本来の関数の引数の配列です。

var ins = new instance();
ins.test.apply(document);

汎用性の高い関数、ライブラリなどを作成する際は、このようなテクニックがあれば、
比較的簡単に実装できるのではないでしょうか。

---

{a8.net http://books.livedoor.com/item/1752906}

{a8.net http://books.livedoor.com/item/3481813}実際のところ、typeof 演算子があれば事足りるのかもしれませんが、
どうも文字列で判定するのがしっくりとこなかったので、
プロパティ等で判定できるかどうかを考えてみました。
まずは数値。
これは isNaN がいいかなと思います。
ただし、オブジェクトの既定のプロパティが数値だった場合など、
判定を間違うことがあると思います。

var exp = 0;
alert(isNaN(exp));

余談ですが、数値やブール型に toString が使えます。

var exp=123;
alert(exp.toString());
var exp = false;
alert(exp.toString());

次に文字列。これは、文字列オブジェクトについてくるメソッドの存在確認を行なえばいいかなと思います。

var exp = "";
alert(!!exp.replace);

次に配列オブジェクト。一番使う join でいいと思います。

var exp = [];
alert(!!exp.join));

ちなみに select 要素の場合、selectedIndex や options で判定できます。

var exp = document.createElement('select');
alert(exp.selectedIndex !== undefined);

input タグは、方法を探しましたが、type で判断するしかなさそうです。
type は小文字変換をして、将来の仕様に合わせます。

var exp = document.createElement('input');
exp.type = 'radio';
alert(exp.type.toLowerCase());

---

{a8.net http://books.livedoor.com/item/3481813}

今回は、メニューの作り方を解説します。

ソフトキーを押したときに、画面左下、または右下に項目選択できるインターフェースを実装します。

いろいろな実装方法がありますが、今回の方法がいちばん汎用性がありそうだったので、
考え方だけ載せておきます。

メニュークラスは Graphics を使用して描きますので、Canvas をベースにします。

class Menu extends Canvas {
}

コンストラクタでは、メニューを開いたときのソフトキーの設定を行ないます。
引数に、親画面の Canvas を指定します。これは後で役に立ってきます。
今回は、右ソフトキーに「閉」を設定します。

private Canvas canvas;
Menu(Canvas canvas){
 this.canvas = canvas;
 setSoftLabel(Canvas.SOFT_KEY_1, null);
 setSoftLabel(Canvas.SOFT_KEY_2, "閉");
}

表示時にはメニューに対して、setCurrent を実行するわけですが、
そうすると背景の画面が消えてしまいます。
Canvas は透過できないようなので、ここをフォローする必要があります。

どうするかというと、メニュー描画時に、親画面を描画してからメニューを描画します。

public void paint(Graphics graphics) {
 this.canvas.paint(graphics);
}

親画面は Canvas なので、paint を実装しています。ここに、現在の Graphics オブジェクトを
引数として渡します。
repaint だと、現在の Graphics に描画してくれません。
親画面の paint が終われば、あとはフィルターをかけて少々暗くするなり、
メニューを引き立つ処理をしてから、メニューを描画すればよくなります。

メニューを閉じる場合は、引数の Canvas に setCurrent すれば解決です。

Display.setCurrent(canvas);

---

{a8.net http://books.livedoor.com/item/1980769}
{a8.net http://books.livedoor.com/item/3215952}

cookie 情報の読書きを行なうときに必要となるエンコード、デコード。
javascript では、escape / unescape という、便利な関数があります。

この便利な関数ですが、ひとつだけ注意しなければなりません。

以下のソースを見てください。

alert(typeof unescape(undefined));

undefined を unescape して、その型をアラートする文ですが、
unescape は、undefined を "undefined" と、文字列に変換してしまいます。
従って、処理結果は "string" です。

このように、文字列関連の関数は、予期しない結果が返ってくることになりますので、
出力はよくチェックしましょう。
特に、undefined をアラート表示しても、"undefined" の文字列をアラート表示しても、
見た目は同じようにしか見えませんので、要注意です。

---

{a8.net http://books.livedoor.com/item/1991891}
{a8.net http://books.livedoor.com/item/1929799}

javascript の配列で苦労したことについて書きます。


配列(Array オブジェクト)は、簡単にいうと、インデックスで管理された値のリストです。
以下のような文法で使用します。

// arr = new Array() でも可
var arr = [];
// 最初の配列に 'AAA' を定義
arr.push('AAA');
// 5番目の要素に 'BBB' を定義
arr[5] = 'BBB';

参考までに、上記のように突然5番目に値を設定すると、
1〜4までの配列(0 は push で定義済)が undefined で定義されます。

ここで勘違いされがちなのが、文字列も配列の添字として定義できると思ってしまうことです。

// 上記の続き
arr['abc'] = 'def';

これは、arr オブジェクトの abc 属性を拡張して 'def' 文字列を格納したにすぎません。
arr.abc = 'def' と同じ意味です。
従って、arr.length の内容には反映されません。

var arr2 = [];
arr2['abc'] = 'def';
// length = 0 と表示される
console.log(arr2.length);

ただし、for in は属性についても表示してくれます。

// 上記の続き
for(var itm in arr) {
 console.log(itm + '=' + arr[itm]);
}

---

{a8.net http://books.livedoor.com/item/3481813}