Javascript

replace()で目から鱗

Macのウィジェットを覗き込んでたらreplace()をこんな感じにつかっているのを見つけた。 "My name is %s".replace("%s" , "hiboma"); //"My name is hiboma"printf() , sprintf()風だ

MozRepl HTMLDocumentまでのアクセス

HTMLDocument(いわゆるbodyとかdivとか)までアクセスの仕方がよくわからなかった。で、いろいろ試してたら repl> content.window.document.body [object HTMLBodyElement] repl> content.window.document.body.innerHTML='Hello World' # Hello world と表…

Plagger × MozRepl

Plaggerで取得したフィードをフィルターでJSON化してMozReplに食わせる。んでMozReplでlocation.hrefとかでどこかのページに飛ぶ。そのページには JSONを整形して見やすくするJavascript(テンプレート)を仕込んでおいて、コードが実行されるとFirefox上にフ…

MozReplをいじってみたよ // 簡単なチュートリアル

いまいち分かってないんだけど、Perlのperlsh,Pythonの対話型シェル,Rubyのirbのような使い方ができるみたいですね。Firefoxも出力にできるJavascriptシェルといった感じでしょうか。Firefoxの内部で行われているJavascriptの処理を覗き見れるシェル型のイン…

Javascriptでソースコードの色づけ

【dp.SyntaxHighlighter】 http://www.dreamprojections.com/syntaxhighlighter/ Javascriptのライブラリを使ってソースコードに色づけができます 【サンプル】 http://www.dreamprojections.com/syntaxhighlighter/Examples.aspx。行番号もついていい感じで…

はまちやリバースエンジニアリング

http://hamachiya.com/junk/mms.htmlmixiミュージックのサービスが始まったと思ったら、はまちちゃんがまたろくでもないことをしでかしたみたいなので(w)ソースを覗いてみた。(ソースは最下部に掲載) 基本はprototype.jsでXMLHttpRequestを生成している…

Yahoo! UI Library: TreeView

http://developer.yahoo.net/yui/treeview/index.html Yahoo! UI Library: TreeViewThe TreeView component is a UI Control that can be used to create a variety of hierarchical dynamic tree structures. TreeViewコンポーネントは、さまざまな形の樹形…

Yahoo! UI Library:: UI Controls :: Slider

http://developer.yahoo.net/yui/slider/index.html *本文中では、スライダーのつまみをスライダー・サムネイルと訳しています。スライダーと書いた場合、背景部分もしくは全体を指すので注意してください。 Yahoo! UI Library: SliderThe Slider component…

Yahoo! UI Library:: Event

http://developer.yahoo.net/yui/event/index.html Yahoo! UI Library:: EventThe Event Utility facilitates the creation of event-driven applications in the browser by giving you a simplified interface for subscribing to DOM events and for exam…

Yahoo! UI Library:: Drag and Dropの訳

http://developer.yahoo.net/yui/dragdrop/index.html Yahoo! UI Library: Drag and Drop The Drag and Drop component is a utility that helps you create a draggable interface efficiently, buffering you from much of the grunt work and enabling yo…

Yahoo! UI Library:: Dom の訳

訳ではメソッド名に明示的に()をつけています。プロパティや変数、オブジェクトと区別をつけるためです。 http://developer.yahoo.net/yui/dom/index.html Yahoo! UI Library: Dom The DOM Utility comprises a family of convenience methods that simplify…

Yahoo! UI Librady の訳 まとめ

Yahoo! User Interface Library 概要 【概要の前半】 【概要の後半】 Yahoo! User Interface Library::Core Utilities 【Animation】 【Connection Manager】 【Dom】 【Drag and Drop 】 【 Event】 Yahoo! User Interface Library::UI Controls 【Calender…

Yahoo! UI Library::Connection Manager の訳

http://developer.yahoo.net/yui/connection/index.htmlいわゆるAJAXを簡単に出来るようにするラッパ・クラスみたいです。prototype.jsにも似たようなクラスがありましたよね。こちらのライブラリでも非常に簡単な手続きで、Ajax通信を実現することが出来ま…

Yahoo! UI Librady::Animaton の訳

http://developer.yahoo.net/yui/animation/index.htmlとりあえず訳せるだけ、訳していきます。自分でサンプル作るのはまた後で。 ?マークが入っているところは、よく分からなかった部分です。間違っていたらごめんなさい 基本的なアニメーション イージン…

ランダムな色を、升目で表示するスクリプト

http://hiropon.sub.jp/ajax/random_color/color_maker03.html http://hiropon.sub.jp/ajax/random_color/color_maker04.html下のスクリプトを応用して見た。 長く見てると酔う。。。。二つ目のスクリプトはTDタグの幅もランダムで変化させています。TDの列…

ランダムな色を線形で表示するスクリプト

http://hiropon.sub.jp/ajax/random_color/color_maker01.html布団に入る前に思いついた、ゴミスクリプト。 ランダムに色を表示させられたら綺麗かなぁとやってみたら、スペクトルみたいな模様を描くスクリプトが出来ました。単線的な表示なので、もうちょっ…

10進数から16進数へと変換、文字列を取得

(255,255,255)を(FF,FF,FF)に変換したいときなんぞに使うライブラリ。コードはオラ本から丸写し。組み込みメソッドにありそうなものですが・・・ function dec2Hex(dec){ dec = parseInt(dec , 10); if(! isNaN(dec)){ hexChars = "0123456789ABCDEF"; if( dec …

フォームの簡易的な動的チェック

http://hiropon.sub.jp/ajax/0208-3.html数値かどうかを簡単にチェックする(厳密にはチェックできるようにはなっていないです)。無いよりはあったほうがいい 程度の方法。 入力された値が数値であればvalidのサインを出し、数値以外であればbadのサインを出…

クリップボードのデータ

http://hiropon.sub.jp/ajax/0208-2.html一時期、セキュリティの問題として議論にあがったclipboardDataクラスです。 クリップボードのデーターを読み書きできるメソッドを用意している。サイトの訪問者のクリップボードのデーターがいつの間にか抜くという…

一度押したボタンを一定時間使えなくするスクリプト

簡単な機能だし、実装しているサイトはたくさんある。のだけど、イマイチ理解できてなかった。「指定した時間ごとに関数を呼び出す」というヘンチクリンなsetInterval関数とそれの解除の組み合わせ方が肝だったのだと分かりました。http://hiropon.sub.jp/aj…

ドラッグして移動できる子ウィンドウ

http://hiropon.sub.jp/ajax/0206-3.html子ウィンドウの[close]ボタンのある、緑色のバーをドラッグすると、ウィンドウを移動させることが出来るようになりました。あまり早く動かすと駄目です。ゆっくりで・・・ウィンドウをマウスの動きに同期させて動かすス…

メモ

XMLHttpRequestは自サイト以外のサーバーにリクエストを送ることが出来ない。なので、Amazon Webサービスなどの外部データーを引っ張ってくる場合は、中継となるCGIを噛ませてあげるといいとのこと。 もうちょとAjax / DHTML のサンプルをかじったら中継のCG…

フェードアウトする子ウィンドウ

http://hiropon.sub.jp/ajax/0206-2.html一個前のサンプルに、フェードアウトのアニメーションを導入したもの。 setInterval関数で、徐々に透明度を下げていくスクリプトを実行させる こんなアニメーション効果を入れるにはsetIntervalをうまく使えばいいみ…

子供ウィンドウにデータを読み込ませる

http://hiropon.sub.jp/ajax/0206-1.html今、眠いのであとで 付随メモを・・・ lightbox.jsの仕組みが少しずつ見えてきた感じがする スタイルシートの値を動的に変更することで、簡易的なアニメーション効果を演出することが出来る という例。 filter , Opacity…

ラジオボタンを使ったAjax手法

http://hiropon.sub.jp/ajax/0204-2.htm↓スクリプトの応用編。ラジオボタンを搭載することで選択肢が広がる。 ・e.target と e.srcElement ・IDにハードコードされない、URL取得用のスクリプトを作ればもっと幅が広がりそうサンプルのスクリプトは『AJAX Web…

AjaxとDOMイベントハンドリングモデル

ほとんどアクションしないけど…http://hiropon.sub.jp/ajax/0204-1.htmhttpトランザクションを担当する関数、イベント・リスナー設定を担当する関数、コールバック関数、トリガーとなる関数がキレイに分離された汎用性の高いコードになりました。他の用途に…

イベントとリスナー

DOMイベントモデルイベントハンドラをHTML中に記述しないで、Javascript側から「イベント」と「リスナー」をセットしてあげる ↓ Javascript と HTML コードの切り離し より細かいイベント制御 addEventListener , attachEvent イベントオブジェクト e が…

XHTMLの約束

DTD宣言をする タグは階層化する タグ名と属性名は小文字 終了タグ は必須 属性の値は""で囲むこと checked="checked" とすること 開始タグと終了タグ ワンセットのタグ br や hr validでsemanticなHTMLを

メモ innerHTML outerHTML

要素を取得してHOGE.innerHTML - タグの中身だけ ・・・玉子の中身だけ HOGE.outerHTML - タグ自身も含む ・・・玉子の殻も含むこのプロパティは テキストとタグ。HTMLとして解釈される類似element.innerText element.outerTextこのプロパティは単純なテキストとし…

メモ arguments

arguments関数の引数を保持しているオブジェクト。Perlの@_ か。・arguments.length ・arguments[i] みたいに利用する *arguments.callee は 関数自身のオブジェクトを参照する. *arguments.caller は 引数を渡したオブジェクトを格納.無いときはnullこの…