Home > JavaScript

JavaScript Archive

yuga.js 0.7.1 - 優雅なWeb制作のためのJavaScript

コメントでいただいたリクエストを反映したyuga.jsの0.7.1を公開します。0.7.0からの差分は以下の通りです。

  • セルフリンク:対象の範囲を指定できるように
  • jQuery: 1.3.1に変更(1.2.6でも動作します)

上記機能が必要ない場合はバージョンアップする必要はありません。

yuga.js 0.7.1 ダウンロード

また、ドキュメントのほうにカスタムパラメータについて情報を追加しました。

http://kyosuke.jp/yugajs/

不具合、リクエストなどありましたら、この記事にコメントしていただけると助かります。

追記: jQuery 1.3系からSafari 2.0をサポートしていないようです。もしSafari 2.0での動作が必要であればSafari 2.0に対応しているjQuery 1.2.6でもyuga.js 0.7.1は動作しますのでjquery.jsを置き換えてください。

yuga.jsのドキュメントページ

yuga.jsの配布ページは長らく放置されていてblogより古いバージョンが配布されていたりとひどい状況だったわけですが、0.7.0の公開に合わせて準備していたドキュメントのページができましたのでこちらに差し替えました。urlも長くてわかりづらかったので新しくしました。前のURLは301でリダイレクトしているので自然とこちらにアクセスすることになるかと思います。

http://kyosuke.jp/yugajs/

全機能一通り書きましたのでブログからダウンロードしていまいち使い方がわからないなどという方も役に立つかもしれません。今後の予定としてはこれにカスタマイズのための情報を追記して行く予定です。誤字や意味がわからない個所などありましたらこの記事のコメントでお知らせいただけると助かります。

yuga.js 0.7.0 - 優雅なWeb制作のためのJavaScript

コメントでいただいたリクエストやちょっとした不具合を修正したyuga.jsの0.7.0を公開します。0.6.3からの差分は以下の通りです。

  • ロールオーバー:処理最適化(前回のバージョン比150%ぐらいの速度アップ)
  • セルフリンク、ロールオーバー:2重に_on, _crがつかないように調整
  • 自動thickbox:urlに?が含まれていた場合は自動でthickboxにならなくした。
  • 外部リンク:アイコン追加機能を付加(デフォルト無効)
  • 外部リンク:自分のドメインから指定されている場合外部リンクとして扱わないよう修正(主にMovable Type対策)
  • するするスクロール:対象のidがなければa要素のname属性で探すよう修正
  • するするスクロール:スクロール後にURLを本来のリンク後のものに書き換えるよう修正
  • 内部処理:url解析時、ついでにGETパラメータを扱いやすくした

yuga.js 0.7.0 ダウンロード

不具合などありましたら、この記事にコメントしていただけると助かります。

yuga.jsの機能が増えてきたので全機能のマニュアルも作っていますがなかなか進まず。。 完成したら公開します。

JavaScriptでの1文字変数名の慣習

プログラム言語には仕様にはないけど、多くのプログラマーが同じように書いている慣習があります。その中で1文字の変数名とその意味を集めてみました。(間違っていたり、これが抜けてるよ!などありましたらコメントでご指摘いただけるとうれしいです)

  • a: 一時的な配列(Array)
  • e: イベント [thx:javascripterさん]
  • i: ループの中のカウンター(indexの頭文字)
  • j: ループを2重、3重にする場合、アルファベットを順番でj,k..とiの代わりに順番に利用
  • k: ループを2重、3重にする場合、アルファベットを順番でj,k..とiの代わりに順番に利用
  • n: 一時的な数字(Number)
  • o: 一時的なオブジェクト(Object)
  • s: 一時的な文字列(String)
  • x: x座標
  • y: y座標
  • $: document.getElementById()に相当する機能を持つfunction

おまけ

  • hoge: 適当な名前の変数を宣言したいときに使われる何の意味もない名前
  • foo: 適当な名前の変数を宣言したいときに使われる何の意味もない名前(英語圏版)
  • bar: 適当な名前の変数を宣言したいときに使われる何の意味もない名前(英語圏版)

OR演算子を使ったデフォルト値の設定

コメントでe–reiさんより以下のようにOR演算子(||)についての質問をいただいたので解説してみます。

JQuery,MooTools,他多数ライブラリ内部で (例) 1 :var SomeClass = Class.create(); 2 :SomeClass.prototype = { 3 : initialize: function(options){ 4 : Object.extend( 5 : this, 6 : Object.extend({ 7 : property1: 1, 8 : property2: 2 9 : }, options || {}); 10: ); 11: } 12:}; の様なソースがあったとして、 9行目の”options || {}”様な書き方がされているのをよく見るのですが、 これはどの様な読み方なのでしょうか。

OR演算子(論理和演算子・Logical OR Operator)は通常、if文の中で左右のどちらかがtrueであればtrueと判定したい場合に使います。

if (a < 1 || b > 2) {
  //aが1未満、またはbが2より大きい場合に実行されるスクリプト
}

質問のような使い方をする場合は||の動作について知っておく必要があります。||があった場合以下のように処理されます。

  1. まずは左側の式がtrueかどうか調べる
  2. 左側の式がtrueの場合は左側の式をそのまま返す
  3. 左側の式がfalseの場合は右側の式がtrueかどうか調べる
  4. 右側の式がtrueの場合は右側の式をそのまま返す
  5. 両方ともfalseならfalseを返す

この性質を利用すると特定の変数がundefindなど設定されていなかった場合、他の値を使うということができます。

var foo = bar || 0;

このように書くとbarがtrueの場合(つまり値が設定されているなどの場合)はbarの値を、undefindなど設定されていない場合は0を使うことになります。デフォルト値を設定する際に使うと便利です。もちろん同じ式をif文を使って書くこともできますが、だいぶ長くなってしまいます。

var foo;
if (bar) {
  foo = bar;
} else {
  foo = 0;
}

質問でいただいた”options || {}”はoptionsがあればそれを使い、なければ空のオブジェクトを使うという意味になります。

参考:オライリー JavaScript 第5版 5.7.2 論理和演算子(||)

Home > JavaScript

Search
Feeds
Meta

Return to page top