JavaScript おれおれ Advent Calendar 2011 – 9日目 例えばドラッグ＆ドロップで移動して、移動先の座標を25px単位にしたい、とか。 要は単位数の整数倍になればいいので、何倍か（係数）を調べて、それを整数化し、単位数で乗じれば、ぴったり倍数になります。 var source = 123; // 元の値 var unit = 25; // 単位 var result = Math.trunc(source / unit) * unit; // 結果 => 100 console.log(source, "→", result);

これだけで実数→整数も文字列→整数も行けますし、文字列が"12a"でも"xxx"でもNaNにもなりません。 ビット演算はOR|の他にAND&とXOR^、単項のNOT~がありますが、JavaScriptではいずれも辺々を数値化し整数化してから、演算を実行します。 また0はビットが全てゼロですから、それとのORを取っても元の数値と同じ数値が返ってきます。こうして、結果的に整数化する事ができました。 ぱっと見は分かりづらいので、コメントを書くとか、まあ工夫してください。

JavaScript おれおれ Advent Calendar 2011 – 5日目 1、2、3、ダー！！（←繰り上がりました） 世の中には基数というものがありまして、数値は9の次が10になる10進数だけでなく、7の次が10になる8進数、9の次がAで、B、C、D、E、Fときてようやくその次に10になる16進数、かと思えば1の次がいきなり10になる2進数と、様々に表現されます。 それを相互に変換する仕組みを考えます。 流れ まず数値（number型の値）はあくまで「数値」であり、その表現方法たる基数とは無縁です。（何進数で言い表しても、目の前のりんごの数は変わらないでしょ？） だので、当然の事ですが、任意の基数で表現する場合は文字列（string型の値）とします。基数を変換する場合は一度基数を捨てて数値としてから、それを目的の基数で表現しなおす、というようにします。 まとめると、こういう流れ

JavaScript おれおれ Advent Calendar 2011 – 4日目 <input />の入力値は文字列なので、数値として扱うには変換してやる必要がありますね。そんなときには組み込み関数であるparseInt()が便利です。 var numText = document.getElementById('num').value; var num = parseInt(numText); console.log(num);

JavaScript おれおれ Advent Calendar 2011 – 2日目 ※飛べません。 今日はちょっと挑戦的な記事。僕の理解が足りてないかも。 世の中には「カリー化」という技術があります。 カリー化 – Wikipedia 関数を分解して、引数がひとつの関数の入れ子にする事です。fn(a, b, c)がfn(a)(b)(c)になります。よくわからんと思うのですが、ちょいと実例を見てみましょう。 まず、二つの引数を取る関数を考えます。ちょうど昨日やったゼロフィルを関数化します。 function fillZero(digits, num) { var text = ""; for (var i = 0; i < digits-1; i++) { text += "0"; } return (text + num).slice(-digits); }

var now = new Date(); var timeText = [ now.getHours(), now.getMinutes(), now.getSeconds(), now.getMilliseconds() ].join(':'); console.log(timeText); 結果はこう 17:2:27:87 ですが、本当はこう 17:02:27:0087 したいですよね。この先頭をゼロ0で埋めるってのがゼロフィルです。 やり方はいろいろあるんですが、 .slice()に負数を与えるのが綺麗で良いです。 var now = new Date(); var timeText = [ ("0" + now.getHours()).slice(-2), ("0" + now.getMinutes()).slice(-2), ("0" + now.getSeconds()).s

概要 「トップに戻る」ボタンが、画面をスクロールすると表示されるようになります。 ダウンロード jQuery.gpTop-1.0.zip [57KB] 基本的な使い方 .gpTop()を実行すると、画面のスクロールを監視し、1画面分以上スクロールされていたら表示、そうでなければ非表示にします。 デモ デモ1 : 基本的なもの Demo 1 画面をスクロールすると、右下に「トップに戻る」ボタンが表示されます。 リファレンス .gpTop([settings]) settings … {Object} 設定。以下のキーと値を持てる: duration… {Number} 表示、非表示のフェード時間。初期値は200。 hide($el, duration) … {Function} 表示する関数。 show($el, duration) … {Function} 表示する関数。 その他 ライセン

jQueryを使うと要素を探したりスタイルを変更したりってのが簡単なんですが、それ以外に「地味に便利」な機能がたくさんありますよね。 その中から、変数の中身の種類を判定するメソッドのシリーズを紹介します。 jQuery.is – Search Results – jQuery API ちなみに .is()というものもありますが、今回は関係ありません。 jQuery.isFunction() 関数であればtrueを返します。 個人的には一番頻繁に使います。使いどころとしては、オプションでコールバック関数を受け付ける場面でしょう。与えられたものが本当に関数であれば実行する、変なものが渡されたときは無視する、というように使えます。 JavaScriptの型の扱いはゆるいと良く言われますが、関数じゃないものに括弧()をくっつけても実行できなくてエラーになってしまいますので。 jQuery.isEm

こんなに短いコードですが、jQueryプラグインを作る上で忘れられない、5つのポイントがあります。 $がjQueryである事を期待しない。 jQuery.fnにメソッドを定義する。 実行コンテキストthisはjQueryオブジェクト。 .each()を使って処理する。 thisをreturnする。 他のプラグインと併用し、$がjQueryを指していない場合も考慮して、直接$は使いません。全体を無名関数にして、その引数としてjQueryを$という名前で受け取るようにしましょう。 jQuery.fnのプロパティとして関数を設置しておくと、それが$(elem)のメソッドとして呼び出せるようになります。またその際の「実行コンテキスト」つまりthisは、当然ですがメソッドを呼び出しているjQueryオブジェクトになります。このときに複数の要素を内包している場合がある（$('.hoge')を想像してく

概要 テキストの入力値変更を監視します。JavaScriptが提供するchangeイベントはフォーカスが外れたタイミングで発火しますが、jQuery.gpObserveTextを使うとリアルタイムでtextchangeイベントが発火するようになります。 ダウンロード jQuery.gpObserveText-1.0.zip [53KB] 基本的な使い方 テキストエリアに対して.gpObserveText()を実行すると監視を開始します。その後textchangeイベントを拾ってください。 $(elem) .gpObserveText() .bind("textchange", listener); デモ デモ1 : 基本的なもの Demo 1 テキストエリアに入力中の文字数を表示します。 値はリアルタイムで更新されます。 リファレンス .gpObserveText([listener])

概要 お知らせ的なものを簡単に表示するプラグインです。要素を作る手間すら不要です。 ダウンロード jQuery.gpMsg-1.0.zip [53KB] 基本的な使い方 jQuery.gpMsg()に対し任意の文字列を与えて下さい。 $.gpMsg("Your message."); デモ デモ1 : 基本的なもの Demo 1 ボタンを押すとメッセージを表示します。 連打しても重ならずに表示できます。 メッセージは一定時間経過で消えます。 ×ボタンを押しても消せます。 リファレンス $.gpMsg(message, [settings]) message … {String} 表示する文字列。 settings … {Object} 設定。以下のキーと値を持てる: classes … {String} メッセージ要素に追加するクラス名。空白で区切って複数指定できる。 direction

概要 対象を画面に収まる位置へ移動させます。ダイアログやコンテキストメニューなどを表示する際の座標計算を省略できます。 ダウンロード jQuery.gpInside-1.0.zip [127KB] 基本的な使い方 .gpInside()を実行すると、画面のサイズや要素の位置を取得し、はみ出していた場合は収まる位置へ移動させます。 $(elem).gpInside(); デモ デモ1 : 基本的なもの Demo 1 画面をクリックすると、クリックした右下にブロックが表示されます。 ブロックがはみ出す場合は座標が調整されます。 TypeでCenterをすると、画面の中央に表示されます。 TypeでContextmenuをするとクリックした右下に表示されますが、はみ出す場合は左や上に表示されます。 デモ2 :コンテキストメニューとダイアログ Demo 2 右クリック等で表示されるコンテキストメニ

全国のWeb屋さんは好むと好まざるとに関わらず、IEに対応するためにあれこれ環境を揃えたりしておられると思います。で、実際に環境をを作ろうとしてみたら各種IEのダウンロード先がバラバラでどこからダウンロードしていいかわからない……という経験もあるのではないでしょうか。 なんかもうそういうのが面倒なので、fuckin’ IEシリーズのダウンロード先をまとめておきます。 IE 7 : ダウンロード詳細 Windows XP 向け Windows Internet Explorer 7 IE 8 : Internet Explorer 8 のダウンロード – Microsoft Windows IE 9 : Internet Explorer 9 の各言語のダウンロード – Microsoft Windows IE 9はWindows Vista/7専用です。XPでも使いたい方はこちらの記事をど

元ネタはこちら： 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス 細部にこだわったWebデザインって？ ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。 グラデーションを加える 1pxのラインを加える シャドウを加える ノイズを加える レタープレス効果 元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。 デモ 先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。） 「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript,

OS X Lionが登場しましたが、いかがお過ごしでしょうか。僕はまだ入手していませんが、人に見せてもらってちょっと欲しくなりました。 まあそれは置いておいて、MacのDockって便利ですよね。そのDock風のユーザー体験を、JavaScriptなしで作ってみました。 Chrome, Safari … 一番綺麗に動きます。 Firefox … 鏡面反射がない以外は十分に動きます。 Opera … Firefoxと同程度なのですが、素早く動かしたときに何故か描画が崩れるようです。 IE … お察しください。 追記 : Firefox対応版を作って下さった方がいます！　（20:34） -moz-element(with SVGmask)で Fxでもreflection (forked: CSSだけでMacのDockみたいなの – jsdo.it – Share JavaScript, HTML

width:100%はよく使いますが、height:100%はあまり使いませんね。というか使えない場面がほとんどなんですが、じゃあ使うにはどうするか、というお話です。 サンプル まずは実際に指定してみたものをご覧ください。 CSSでheightの相対値を指定する 親要素に設定があれば指定できる 基本的には親要素に高さが指定されていれば、高さを相対値で設定できるという解釈で良いと思います。

先日jQuery 1.6がリリースされましたが、案の定.attr()関連で議論になったようで、一週間後に後方互換を保つ更新が行われました。 jQuery: » jQuery 1.6.1 Released 1.6の更新内容は先日の記事をご覧頂ければ。 jQuery1.6の更新内容をまとめたよ。 | Ginpen.com 更新内容 jQuery 1.6では.prop()メソッドの追加と.attr()メソッドの変更があり、これが「属性」と「プロパティ」の差、及び関係性についての議論を引き起こしました。結果として、1.6.1では後方互換を保つよう修正される事になりました。 つまり1.5.2から（1.6を飛ばして）1.6.1へバージョンアップする際は、.attr()関連のコードは変更が不要です。 なお.date()の方は1.6のリリースノートの通りの動作のままである事に注意してください。 前回(1.

昨日jQuery1.6が公開されたので、その内容をまとめてみました。 jQuery: » jQuery 1.6 Released だいたい原文にそってますが、翻訳ではありません。 追記 : data()の扱いが誤っていたので修正しました。キーをキャメルケースにする必要があるとしていましたが、引数を与えずにマップを得た場合の話で、引数にキーを与えて個別に取得する場合は過去のコードと互換性があります。thanks @GeckoTang !（23:11） 変更点 既存コードに影響がある変更がいくつかあります。 data属性の自動マッピング ハイフン “-” を含む名前のとき、$element.data()に引数を与えずに得たマップのキーはキャメルケースに変換されるようになりました。 var $div = $('<div data-abc-xyz="123" />'); var data = $d