社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 今週はかなりハードボイルドで全身タイツのような忙しさなので、みんなが春を分けて楽しんでいたり、香港に行って楽しんでいる間にせこせこ資料を作っています。 はぁ。 Section 00 Prototype.js の前に JavaScript と DOM とイベントの概要 HTML は読み込まれた後、すべての情報が JavaScript のオブジェクトに変換される。 イメージ的にはこんな感じ <html> <head> <title>タイトル</title> </head> <body> ： ： </body> </html>↓↓↓ var document = { doc
社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基本的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()
以前、「Greasemonkeyでprototype.jsやscript.aculo.usを使う方法」を紹介しました。しかし、Greasemonkey内でprototype.jsが利用できるようになった恩恵を十分に受けられていませんでした。つまり、Greasemonkeyで提供されているGM_xmlhttpRequest()が可能にする「異なるドメインとの非同期通信」からの恩恵です。そこで今回は、Greasemonkey内で使えるようになったprototype.jsをさらにパワーアップし、クロスドメインAjaxができるようにしてみたいと思います。 問題 厄介な問題は、GM_xmlhttpRequest()はFirefoxやInternet Explorerなどで提供されているXMLHttpRequestとインタフェースが全く違うということです。 GM_xmlhttpRequest()は単な
はてなブックマーク件数を blog に貼り付けるウィジェット 2006-02-27-1: [JavaScript][Ajax][Ruby][Code] ウィジェットというほどのものではないけど，はてなブックマーク件数を簡単に blog に貼り付けることが出来る部品を作ってみました． はてなブックマーク件数とは以下の画像の赤枠のようなものです． この赤枠の中で囲まれた部品を blog に貼り付けることが出来ます． このウィジェットの使い方はとても簡単で <link rel="stylesheet" type="text/css" href="./styles/hatebu-count.css" /> <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" s
prototype.js 1.5.0_pre0 の $$() のデモ 2006-02-26-1: [JavaScript] prototype.js 1.5.0_pre0 から $$() という関数が使えるようになりました． これは，CSS のようなのセレクタを使って要素を指定できるもので，ChangeLog によると $$('div#page p.summary img').each(Element.hide) これで，id が page な div の孫要素で，class が summary の p の孫要素 img が選択できます． 早速，これを使って，フォームの入力項目の disable を切り替えるデモを作ってみました． - prototype.js 1.5.0_pre0 の $$() のデモ http://pocari.org/demo/prototype-1.5.0_pre0
WEB+DB PRESS Vol.31 に prototype.js の記事を執筆しました。 Ajaxというキーワードが与えられたことで、JavaScriptでユーザビリティの高いサイトを構築しようという流れが出ています。もともと枯れた技術であったこともあり、蓄積されたさまざまなノウハウを活かしたライブラリやフレームワークなどの環境が急速に整いつつあります。本特集では、こうしたAjaxに関する最新の開発手法や環境について、言語別の現状も踏まえつつ解説をしていきます。 prototype.js を使って Ajax のコードを書くのをゴールに、まずは Ajax のおさらいに始まって、JavaScript の OO、prototype.js を使った Class-Style OO を解説して、締めに prototype.js による Ajax アプリケーションについて解説してみました。僕が担当し
JSON を Template-Toolkit で展開する Jemplate という記事を書いたんですが、Jemplate を使うと何がいいかってのをもう少し詳しく書いてみます。 Jemplate は TT で JavaScript 上の JSON を展開できるんですが、それだけ聞いてもしかすると「これで普段サーバーサイドでやってるテンプレートの展開をクライアントサイドに持って行けて負荷がクライアントに移ってウマー」っていうのが使いどころのようにも思えちゃいますけど、そうじゃない。検索エンジンに引っかからなくなったりとか、アプリケーションの使い勝手が悪くなったりとか色々弊害があります。 そうじゃなくて、Jemplate は JavaScript のためのテンプレートとして使います。 試しに Catalyst で簡単なアプリケーションを作ってみました。ちょっと動かしておく環境がないのでソース
Greasemonkeyでprototype.jsやscript.aculo.usが使えたら便利だろうな、と考えたことのある開発者は少なくないのではないでしょうか。ちょっとそんなアイデアを試してみたことのある方ならわかると思うのですが、Greasemonkeyでそういった外部JavaScriptライブラリは簡単には使えません。案外ハードルが高いです。 Googleで調べていたら、面白い解決方法が見つかったので紹介します。 Loading External JavaScript Libraries in Greasemonkey このブログで解説されているアプローチを用いれば、Greasemonkeyで外部JavaScriptライブラリが使えるようになります。 ポイントは、 外部ライブラリがロードされるまで待ち続ける制御構造 unsafeWindowを経由して外部ライブラリにアクセス といっ
Greasemonkeyでprototype.jsやscript.aculo.usを使う方法 - Accept Thingsを参考にスクリプト同士を連携させてみた。 unsafeWindow経由でfunction自体もやり取りできるようなので、もっと色々できそう。 hbcomment.user.js gb.user.jsに以下の2行を追加する必要あり。 12行目あたり a.setAttribute("href", "http://b.hatena.ne.jp/entry/"+link.href); a.appendChild(document.createTextNode(""+count+" user"+(count>1?"s":""))); a.className = "hbusers"; // 追加 39行目あたり while (m = pattern.exec(response.r
最新が 1.5.0_pre0 になってたので調査 (自分用のメモなので読みにくくてもゴメンなさいってことで) Prototype.js 1.4.0 からの変更点 CHANGELOG より String.prototype.truncateを追加 String.prototype.gsub, String.prototype.sub, String.prototype.scan を追加。 Template クラスを追加。 $$ 関数を追加。 Selector クラスを追加。 Element.childOf を追加。 String.prototype.inspect を修正。 String.prototype.strip を追加。 String String.prototype.truncate 文章を短くする。 var text = 'とっても長い文章です。読むのがわずらわしいです。概要だけ
先日このブログで公開したばかりの、「ライブドア事件」専用トラックバック・ステーションであるが、毎回ページが開かれるたびにデータベースにアクセスする仕組みで作ったのだが、そんな作りのままではトラフィック増には耐えられない。そこで、良く出来たブログ・サービス（例えばMT）の様に、変更があったときに（つまり、トラックバックが送られてきた時に）、データベース上のデータからHTMLページを生成しておき、閲覧時にはそれを返すように変更することにした。 その作業を進めているときに、この手法の一つの欠点に気が付いた。MovableType がしているように、ヘッダーも含めた全HTMLページを生成するようにしておくと、その中にスタイルシート（CSS）へのリンクを埋め込むことになるので、スタイル（見た目）が固定化されてしまうのである。これでは面白くない。そこで、複数のスタイルシートを用意しておき、閲覧時に動的
AJAX Tutorial with Prototype Updated on November 17, 2023 By Pete Freitag Here's the AJAX prototype example that I used in my AJAX presentation today. I wanted to give an example of a good use of AJAX, and at the same time keep it simple. So I thought a good example would be to build a zip code verifier. As soon as the person enters the zip code it makes a request to the server to see if the zip c
$A $A という関数を使うと、Array もどきオブジェクト(NodeList や Arguments など)を Array オブジェクト化することができる。便利だが、この関数を Enumerable インタフェースを実装するために使用するのは、あきらかにおかしい。 そこで、以下のようなものを定義してみる。 var $E = Enumerable.from = function(iterable) { iterable._each = Array.prototype._each; Object.extend(iterable, Enumerable); return iterable; };これを、 $A(〜).each とかしてるところに使う。 $E(〜).each こうする。 $E の実行速度は $A の 7 〜 4 倍です。 with(Element) effects.js の w
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
prototype.jsのものすごく簡単な使い方。 はてなダイアリーの方にprototype.jsでHTMLを汚さないロールオーバースクリプトというエントリーを書いたのだが、prototype.jsの入手方法やらすごく簡単な使い方がないようなので、書いてみます。 prototype.jsはJavaScriptのライブラリ（中身はJavaScriptです)で、これを使うとJavaScriptを組むのがかなり楽になるというものです。話題のAjaxのプログラミングも簡単にできます。 ライブラリは、 http://prototype.conio.net/ からダウンロードできますが、TOPページにあるファイルはちょっと古いものなので、Browse the darcs repositoryというリンクを辿り、 http://dev.conio.net/repos/prototype/dist/ から
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く