slayeroffice | tools | Mouseover DOM Inspector v2.0 Help
Mouseover DOM Inspector v2.0.2 Help Overview The Mouseover DOM Inspector, or MODI for short, is a favelet (also known as a bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document. Browsers currently supported are Firefox, Mozilla, Netscape 8, Opera 7.5+ and MSIE6+ on all of their respective Operating Systems. To begin using the Mouseover DOM
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
ドキュメントオブジェクトモデル（DOM） - とほほのWWW入門
DOMとは 要素（エレメント）を参照する document.getElementById(id) element.getElementsByTagName(tagName) element.getElementsByClassName(className) element.getElementsByName(name) element.querySelector(selector) element.querySelectorAll(selector) element.childNodes element.parentNode element.firstChild element.lastChild element.previousSibling element.nextSibling 要素リストから要素を取り出す 要素内の文字を参照する 属性を参照・設定する 要素の属性値を参照する 属性値
Google の検索語入力領域を大きくする Greasemonkey Script - peanutsjamjam's diary
Googleの検索語を入れるところ、もうちょっと大きければいいな、と思って作ってみた。Greasemonkey スクリプトの練習も兼ねて。 var elems, elem; elems = document.evaluate( "//input[@type='text' and @name='q']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i < elems.snapshotLength; i++) { elem = elems.snapshotItem(i); elem.size=100; }インストール用スクリプトとスクリーンショット。 やっていることは、Google から送られてくる HTML 中の type=text で、かつ、name=q な input
構造から振る舞いを分離するBehaviour.js - dann's blog
http://bennolan.com/behaviour/ 今まではHTMLのタグ中にイベントハンドラが埋まってしまい、構造と振る舞いの分離が行われていませんでした。Behaviour.jsを使うと、構造から振る舞いを分離することができます。 公式サイトより例を引用します。 ◇ Behaviourを使わない場合 <li> <a onclick="this.parentNode.removeChild(this)" href="#"> Click me to delete me </a> </li>◇ Behaviourを使う場合 HTML <ul id="example"> <li> <a href="/someurl">Click me to delete me</a> </li> </ul>Javascript var myrules = { '#example li' : func
Prototype.js を使った JavaScript OOP 講座 #01
社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基本的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()
JavaScriptとCSSによるブロック崩しの作成：CodeZine
はじめに JavaScriptを使ってWeb上で動作するゲームプログラムを作ろうとしたとき、多くの描画に関連する制限に衝突します。DHTMLを駆使しても、イメージをピクセル単位で処理したり、クライアントアプリケーションのように豊富なコントロールを自由に配置したりすることはできません。しかし、スクリプトからHTMLオブジェクトのスタイル属性を変更することで、HTML文書上の文字やイメージを、かなり高い自由度で動かすことができるようになります。 例えば、一般的なゲームを開発する場合、イメージの重ね合わせや、イメージの上に文字を表示させるというテクニックは当然のように必要となります。スクリプトからHTMLドキュメントにアクセスするだけでは、文字やイメージの配置を細かく指定することはできませんが（ブラウザのレイアウトに依存）、スタイルシート（CSS）を駆使すると、HTMLオブジェクトをドキュメント
prototype.jsを読んでみる (1) — ありえるえりあ
prototype.jsを頭から地道に読んでます。 AJAX周りに入る直前までしか読み終わっていませんが、これはなかなか。 [注意] prototype.jsは1.4.0_rc2を使ってますが、この文章には一部、1.3.1のコードが混じっています。 2005-1-15 長いので、本文を追記に移動 ついでにカテゴリをJavaScriptに変更 var Prototype = { Version: '1.4.0_rc2', emptyFunction: function() {}, K: function(x) {return x} } Prototype.Versionでprototype.jsのバージョンが取得できる。 emptyFunctionは何もしない関数のオブジェクト。 alert = Prototype.emptyFunction;とかすると、alert()を呼び出しても何も起き
川o・-・）＜2nd life - bookmarkletの文字数制限を無くす
bookmarkletを作るとき、IEでは500文字ちょい、Firefoxでは2000文字ぐらい(?)の文字数制限がある。また、作った後に一行にまとめたり、デバッグしたりも大変面倒。でもそれがとても簡単な方法でどうにでもなることをインターフェイス！インターフェイス！の人に教わった。 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://example.com/example.js";document.body.appendChild(s)})(); createElementでscript要素を作って、その中にhttp://example.com/example.jsとソースを指定することによってそのJSを実行できる。WinIEとFirefoxでは確認済み。
prototype.js v1.5.0 の使い方
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
Behaviour : Using CSS selectors to apply Javascript behaviours
Behaviour.js is deprecated Behaviour.js was my library for doing unobtrusive javascript using a combination of a CSS Selector library and some simple javascript. This functionality has now been adopted and improved upon by all the major javascript libraries. I personally use Jquery, which through the .live() method, let's you do all of the functionality of Behaviour.js, but including automatically
CMS researcher - Greasemonkeyでprototype.jsやscript.aculo.usを使う方法
Greasemonkeyでprototype.jsやscript.aculo.usが使えたら便利だろうな、と考えたことのある開発者は少なくないのではないでしょうか。ちょっとそんなアイデアを試してみたことのある方ならわかると思うのですが、Greasemonkeyでそういった外部JavaScriptライブラリは簡単には使えません。案外ハードルが高いです。 Googleで調べていたら、面白い解決方法が見つかったので紹介します。 Loading External JavaScript Libraries in Greasemonkey このブログで解説されているアプローチを用いれば、Greasemonkeyで外部JavaScriptライブラリが使えるようになります。 ポイントは、 外部ライブラリがロードされるまで待ち続ける制御構造 unsafeWindowを経由して外部ライブラリにアクセス といっ
「AJAX」人気、開発ツールキットのメーカーの競争を促進
インタラクティブなウェブサイトが人気を博していることを受け、ソフトウェア企業間の競争が促進されている。各社とも現在、独自の開発ツールキットを市場に投入し始めている。 Sun Microsystemsもこうした企業の1社である。同社は米国時間1月24日にAJAXスタイルの開発の高速化を約束するウェブアプリケーション開発ツール「Java Studio Creator 2」を発表した。IBMもこの競争に仲間入りしようとしており、来週にはAJAX用ツールの販売およびAJAX関連の開発者コミュニティを構築する計画を発表するとみられている。 AJAXという言葉は2005年2月、JavaScript、XMLなどのウェブ技術の組み合わせを表現するために作られた。ますます多くの開発者が、ウェブサイトに双方向性を加え、初代のブラウザの制限を排除するために、このようなグループ化されたツールを利用するようになって
ツールチップテキストを簡単実装 : Tooltips.js:phpspot開発日誌
Tooltips.js (c)Matthias Platzer, based on script.acolo.us and prototype.js Tooltips.js depends on the latest versions of prototype.js and script.aculo.us from SVN. アンカー<a>タグにカーソルを合わせた時に、ツールチップテキストを表示するためのライブラリ。 prototype.js と script.aculo.us をベースに作成されているようです。 ダウンロード: tooltips.js
prototype.js で遊んでみた
先日このブログで公開したばかりの、「ライブドア事件」専用トラックバック・ステーションであるが、毎回ページが開かれるたびにデータベースにアクセスする仕組みで作ったのだが、そんな作りのままではトラフィック増には耐えられない。そこで、良く出来たブログ・サービス（例えばMT）の様に、変更があったときに（つまり、トラックバックが送られてきた時に）、データベース上のデータからHTMLページを生成しておき、閲覧時にはそれを返すように変更することにした。 その作業を進めているときに、この手法の一つの欠点に気が付いた。MovableType がしているように、ヘッダーも含めた全HTMLページを生成するようにしておくと、その中にスタイルシート（CSS）へのリンクを埋め込むことになるので、スタイル（見た目）が固定化されてしまうのである。これでは面白くない。そこで、複数のスタイルシートを用意しておき、閲覧時に動的
hxxk.jp - はてなの「プロフィール画像設定機能の追加」に対して Greasemonkey スクリプトを修正した
はてなのいくつかのサービスにプロフィール画像が出現 はてなダイアリー日記 - プロフィール画像設定機能の追加について はてなブックマーク日記 - プロフィール画像設定機能の追加について この機能追加自体に関しては特に私からはコメントはありません。 今日になってはてなブックマークのエントリページが賑やかになっていて、「何だ何だ !? 」という感想は抱きましたが。 「全てのサイトをはてブ化する」 Greasemonkey スクリプトが使えなくなった 以前 Going My Way: すべてのサイトをはてなブックマークと結びつけるGreasemonkeyスクリプト経由でいぬビーム - 全てのサイトをはてブ化するという Greasemonkey スクリプトを知り、手軽にブックマークコメントをチェックできるということで重宝していました。 のように、本来なら「ブックマークしているユーザ数」を表示して、
JavaScriptっぽい。 JavaScript OOPなリンク集
とりあえず自分で書いたのも含めて、後でゆっくり読みたいものなどを片っ端からリンク。選出基準は適当です。 JavaScriptっぽい。 prototype覚書 GAC なぜなにGAC->フォーラム->【JavaScript】 Functionで遊ぼう [教えて！goo] クラスの継承の仕方 オブジェクト（Object）（とほほ） JavaScript, Neo-Generation/Function 自作オブジェクトで複数のメソッドを呼び出したい Virgo - JavaScript - ユーザ定義オブジェクト ECMAScriptチュートリアル ECMAScript - on Surface of the Depth - Effective JavaScript - Dynamic Scripting オブジェクトなJSの基礎講座 プロトタイプチェインについての覚書（ECMAScript,
Ajaxを勉強しよう
このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。 Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。 Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。 Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 第一章 Ajaxって？ AjaxとRIA AjaxとDHTML AjaxとFlash Ajaxに必要な知識と技術 Aja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一撃必殺JavaScript日本語リファレンス
11月11日の技術勉強会 - はてな技術発表会日記 - 機能変更、お知らせなど
