Code Archive Skip to content Google About Google Privacy Terms
Welcome to Tori's Eye! Tori's eye is a Twitter visualization tool, inspired by papercraft and origami. It's a visual and technical experiment implemented using only standard XHTML/CSS and Javascript. What does it do? Enter a word in the search box and then catch some birds with your mouse to read the tweet they're carrying. Tori's Eye fetches the latest tweets containing the word you input from Tw
今回は、画像のロールオーバーを、今まで説明してきたように、クラスを使いながら作ってみます。リンクにマウスオーバー(及びフォーカス)されると、中にある画像のsrcの "_normal." を、 "_over." に変更してセットし、マウスアウト(及びブラー)されると、これと逆のことをします。 サンプルとソース サンプルその1 <ul> <li><a class="rollover" href="http://diablo.com"><img src="diablo_normal.gif" alt="Diablo" /></a></li> <li><a class="rollover" href="http://hoge.com"><img src="hoge_normal.gif" alt="HOGE" /></a></li> <li><a class="rollover" href="ht
先日、「JavaScriptのオブジェクトについて考察してみた - あと味」を書いてから、chikuraさんからコメントいただいたり、id:dankogaiさんから「404 Blog Not Found:javascript - にはクラスはない」という記事で言及いただいたり、JavaScript: The Good Partsを読み返したりした結果、newについて調べたいという衝動にかられましたので、その調べた結果を書いてみたいと思います。 newを調べようと思ったキッカケを整理 まずは、そのキッカケから整理します。 chikuraさんのコメントより 押さえるべきポイントは、new演算子の際に何が行われるか?だと思うので、こちらのページもぜひ読んでみてください。 JavaScript の new 演算子の意味: Days on the Moon http://nanto.asablo.j
javascriptでゴリゴリコードを書いていると、最近のライブラリではコールバック関数を渡すのがけっこう日常茶飯事なようで、コールバック関数を渡すのはいいが、その関数に引数を渡してあげたい!!ってことがよくあるのですよ。 今までなんとか引数は諦めてしのいでたけど、どうも納得がいかないんで調べてみた。 例えばとあるボタンのイベントハンドラで、クリックした際にhogeというfunctionが実行されるようにしたいってな場合は、こんな感じで書きます。 var hoge = function(evt) { alert("hogehoge" + evt); } btn3 = document.getElementById("btn3"); btn3.addEventListener("click", hoge, true); しかしこの「addEventListener」に引数を渡したくて、こんな
関数オブジェクトにあると便利なんじゃないかと思ったメソッドを適当に生やしてみた。 // 関数を合成するメソッド Function.prototype.compose = function(a) { var self = this; return function() { return self(a.apply(null, arguments)); }; }; // 合成する順番を逆にした以外はcomposeと同じ Function.prototype.prepose = function(a) { var self = this; return function() { return a(self.apply(null, arguments)); }; }; // カリー化する Function.prototype.bind = function() { var base = []; fo
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScript関連で、とてつもなく興味深いことがらをメモ書きとして。 Rhino JavaのJavaScript実装。Rhino。これいれれば、ツールとか簡単な処理もJavaScriptで作れるな。 サイコロ回転エフェクト JavaベースのJavaScriptインタプリタ。[JavaScript] Animation.Cube - サイコロ回転エフェクト (rotating cube animation) 何かサービスに組み込めそうなのと、このロジックを知りたい。数式苦手>
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
昨日の「プログラマのためのJavaScript (11):継承についてもう少し」に、いくつかのコメントをいただきました。そのなかで、nanto_viさんに素晴らしいヒントを提供していただいたので紹介し、クラス(もどき)の継承への補足とします。 まずは、nanto_viさんが教えてくれたコードを再掲: var Traits = function () {}; Traits.prototype = SuperClass.prototype; SubClass.prototype = new Traits(); Traitsは一時的なコンストラクタですが、SuperClassのトレイツ(共通性質の定義)をそのまま持ち、余分な(おそらくは弊害を生むであろう)初期化実行コードは持たないものです。(こんなトリックがあったんだ、フーム、ムムム。) この手続きを関数にしてみます。(ちなみに、名前exten
JavaScript における new 演算子の動作は大まかにいって以下のとおりである。(new F() とした場合。) 新しいオブジェクトを作る。 1 で作ったオブジェクトの [[Prototype]] 内部プロパティ (__proto__ プロパティ) に F.prototype の値を設定する。 F.prototype の値がオブジェクトでないのなら代わりに Object.prototype の値を設定する。 F を呼び出す。このとき this の値は 1 で作ったオブジェクトとし、引数には new 演算子とともに使われた引数をそのまま用いる。 3 の返り値がオブジェクトならそれを返す。そうでなければ 1 で作ったオブジェクトを返す。 ここで「オブジェクトである」というのはプリミティブ値 (文字列、数値、真偽値、undefined 、null) ではないということだ。new Stri
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
今回から「BK通信」(ビーケーツウシン)と題して、連載することになった高林と申します。以前連載していた「プログラミングの光景」ではデバッグ、コードレビューといった大きなテーマを取り上げましたが、今回の連載では日常的に遭遇するチマチマした「バッドノウハウ」(Bad Knowhow)について書いていきたいと思います。 バッドノウハウとは? バッドノウハウとは、筆者が2003年に作った造語です。元の定義は以下のようなものです。 計算機を使っていると、何でこんなことを覚えないといけないのだろうか、とストレスを感じつつも、それを覚えないとソフトウェアを使いこなすことができないためにしぶしぶ覚えなければならない、といった類いのノウハウは多い。そうした雑多なノウハウのことを、本来は知りたくもないノウハウという意味で、私はバッドノウハウと呼んでいる。 一方、「はてなキーワード」にある定義は簡潔ですっ
document.createEventとdispatchEvent、addEventListenerを使ってイベントドリブンに書いたJavaScriptがオレブーム(ただし、IE非対応*1 )なので、軽く紹介してみたいと思います。 具体的には、AutoPatchWork (Google Chrome Dev用のextension)をイベントドリブンで実装しています。 AutoPatchWork.jsが2009/06/11 21:00時点のソース(id:nanto_viのコメントをうけて#を.に変更済み)。シンプルさを重視しているので、324行と短めです(CSSは別ファイルですが)。 window.addEventListener('scroll', check_scroll, false); window.addEventListener('AutoPatchWork.request',
http://ss-o.net/json/ 以下に対して、.htaccessで Header append Access-Control-Allow-Origin: *という指定をして、ヘッダーにAccess-Control-Allow-Originをつけているので、(*はすべてのドメインからのリクエストを許可) http://ss-o.net/json/wedataAutoPagerize.json http://ss-o.net/json/wedataLDRize.json などのファイルについてはFirefox3.5、Safari4、Google Chrome 2、IE8*1などのブラウザではクロスドメインでXMLHttpRequestを投げることができます。 サンプルコード javascript:(function(){ var xhr=window.XDomainRequest?
2009年06月15日05:00 カテゴリLightweight Languages javascript - undefined may not be undefined これを受けて、nullとundefinedについてさらに調べたのですが.... 404 Blog Not Found:javascript - にはクラスはない typeofでプリミティブかどうか判定する方法ですが、typeof null == "object"なのでその判定が必要だと思います。 とんでもないことを再?発見しちゃいました。 undefinedはただのグローバル変数 定数じゃないんですね。 だから、以下が動いちゃう。 p(undefined); undefined = !undefined; p(undefined); NaNとInfinityもただのグローバル変数 以下も動いてしまいます>< p(NaN
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く