2011年04月24日

JavaScriptでfor文のちょっと変わった書き方

JavaScriptの小ネタ。
for文にちょっと工夫を入れます。
以下のコードはごく普通のfor文です。

例1:普通のfor文
for (var i = 0; i < 3; i++) {
//何かの処理
}


for文の括弧の中は三つに分かれていて、2番目(上の例だとi < 3)はループを継続する条件です。
iが0 → 条件に当てはまるので「何かの処理」を行う。
iが1 → 条件に当てはまるので「何かの処理」を行う。
iが2 → 条件に当てはまるので「何かの処理」を行う。
iが3 → 条件に当てはまらないのでfor文を抜ける。
つまり、この例だと「i < 3」かどうかという判定を4回行うことになります。

では次のような場合はどうでしょうか?

例2:ループ継続条件を関数で持ってくるfor文
for (var i = 0; i < getCount(); i++) {
//何かの処理
}


今度は「3」ではなく「getCount()」という関数になっています。
getCount()には深い意味はなく、何かの数値を取得する関数です。
例1からわかるように、getCount()は複数回呼ばれます。
1回でいいのに、何回も呼ばれて無駄だから。

なのでこうしてみました。

例3:countを外に出したfor文
var count = getCount();
for (var i = 0; i < count; i++) {
//何かの処理
}


これでgetCount()は1回しか呼ばれないようになりました。
また、以下のような書き方もできます。

例4:ちょっと変わったfor文
for (var i = 0, count = getCount(); i < count; i++) {
//何かの処理
}


カウンター変数iの隣でついでに変数countを定義しちゃうという。

例4と同様の書き方、Javaでもできます。
Javaの場合は、変数countのスコープがfor文内に限定されるので、
例3より例4のほうがより良いです。





ラベル:javascript
posted by ぺるたご at 22:21| Comment(4) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2011年04月17日

IEで、ヘッダー内でスクロールすると重い件

このネタはIE8で確認しています。

WEBサイトにヘッダー(またはフッター)を設置するとします。
で、そのヘッダーはスクロールに対して固定したいとします。
ヘッダーの中身が多いのでスクロールバーを出したいとします。
ついでに茶目っ気を出して、ヘッダーを半透明にします。
以下のような感じでしょうか。

スクロールが異常に重いヘッダー
<html>
<head>
<style>
#Header {
height: 20px;
position: fixed;
overflow-y: scroll;
filter: alpha(opacity=80);
}
</style>
</head>
<body>
<div id="Header">
ヘッダー1行目<br />
ヘッダー2行目<br />
ヘッダー3行目
</div>
</body>
</html>



こうするとヘッダーのスクロールが異常に重たくなります。
どうも「position:fixed」と「filter」を同時に指定するのが悪いみたい。
「filter」はIEの方言なので、IE以外のブラウザではこのような現象は発生しないようです。
肝心の解決策は…、残念ながら見つかりませんでした。




ラベル:CSS IE
posted by ぺるたご at 22:16| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2011年04月11日

JavaScriptのindexOf(その1)

まずは手始めにJavaScriptのネタ。

IE8では、配列の要素を検索する関数、indexOf()が実装されていません。
Chromeなんかでは実装されてるのにね。
以下のようなコードを書いてみました。
JSファイルの先頭にでもぶち込んでおきましょう。

indexOf()の実装
if (!Array.indexOf) {
Array.prototype.indexOf = function(o) {
for (var i in this) {
if (this[i] == o) {
return i;
}
}
return -1;
}
}


まず1行目でArrayクラスにindexOfが存在するかを確認します。
存在しなかったら、2行目でArrayクラスのprototypeにindexOfの実装を追加します。
これで以降、全ての配列でindexOf()を使えるようになります。

indexOf()の使い方
var array = {"a", "b", "c", "d"};
var foundIndex = array.indexOf("b");
// ↑foundIndexには1が入ります。
foundIndex = array.indexOf("e");
// ↑eは見つからないので-1が戻ります。


既存のクラスの定義を簡単に書き換えられるなんて、JavaやC#などの硬い言語からすると夢のようですね。
やりすぎると悪夢になりそうですが。






ラベル:javascript
posted by ぺるたご at 22:44| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。