ブラウザでミニマムXML (3)：作る - 檜山正幸のキマイラ飼育記 (はてなBlog)
前回の「描く」において既に、次のメソッド群が登場しました。 document.createElement(name) document.createTextNode(data) Element#appendChild(node) （ElementクラスのappendChildメソッドの意味） Element#setAttribute(name, value) これだけあれば、要素ツリー構造を作るには十分です。が、ブラウザでは色々とやっかいなことがあります。今回は、ブラウザ特有の事情を調べます。 「作る」の内容は1回分にはおおかったので、これは前半となります。今回は、最初の注意と「オマケ」が一番役にたつかもね。 内容： 混乱しがちな概念と用語：ルート、文書ノード、文書要素 文書ノードはどうやって作る 作る例：こんなにメンドー XML DOMとHTML DOM オマケ：clearでハマった 今
Collection & Copy - JavaScriptにおける古典的継承
翻訳 原文：Classical Inheritance in JavaScript著者：Douglas Crockford ※原文のコード内に誤りがあり、このまま記述しても動作しません。著者のコメント及び補足情報は翻訳メモを参照下さい。 君は自分が利口で階級にも属さず 自由だなんて思い込んでる―John LennonJavaScriptは、クラスという概念に囚われていない言語です。JavaScriptでは、古典的な継承の代わりにプロタイプ的な継承を使用します。これはC++やJavaのような旧来のオブジェクト指向言語に長けたプログラマを当惑させるかもしれません。JavaScriptのプロトタイプ的継承が、古典的継承に比べていかに表現力が優れているかを、これから見ていきましょう。 JavaJavaScript強い型付け弱い型付け静的動的古典的プロトタイプ的クラス関数コンストラクタ関数メソッド関
最速インターフェース研究会 :: [速報] GoogleのRSSリーダー（β版）、早速真似して作ってみた
GoogleからRSSリーダーがリリースされましたね。 http://www.google.com/reader/ ソース読むのとか面倒なんで真似して作ってみました。だいたい6時間ぐらいで出来た。 http://la.ma.la/roll.html このBlogで使ってるjsファイルをちょっといじって使ったので、キャッシュ利いてて動かない場合はリロードしてみてください。 Firefoxだとアニメーションがやや重い。アニメーションを無くせばもっとサクサク動くんだけどGoogleReaderよりは軽いんじゃないかと思う。 Operaはなんかスクロールしていくと強制終了します。アニメーションさせつつ、上下の要素を継ぎ足すようにしてやれば多分大丈夫だとは思うけど面倒なので現時点ではそこまでやってない。 あとはIEとFirefoxではホイールを使ってページ切り替えられるようになっています。 Goog
最速インターフェース研究会 :: prototype.jsのObject汚染を回避する方法
かなりターゲットの狭いTips。役に立たない。 prototype.jsというRuby on Railsなんかのフレームワークで使われている有名なJavaScriptのライブラリがあって、これが色々と使えそうな処理を綺麗に詰め込んであり、デファクトスタンダート的な地位を確立しているのだけれど、ちょっと微妙だなーと思うところがあって、それはObject.prototypeを拡張してしまう点。 実際の弊害はこういう。 http://d.hatena.ne.jp/nazoking/20050425/1114374966 要は連想配列として使うときに困るって話。 多分prototype.jsはJavaScriptの側でロジックを組むことをあまり想定していないため、この辺の問題にあんまり配慮していないのではないかと思うのだけれど、とりあえず無理やり回避する方法を思いついたので書いてみる。 http:
Object オブジェクトの prototype に便利メソッドを放り込むのはやめて頂きたい - nazokingのブログ
JavaScriptの便利系ライブラリで、Object の prototypeにいろいろ放り込むのがあるけど、やめていただきたい。例えば http://prototype.conio.net/ の Object.prototype.extend とか。便利なんだけどね。 Object.prototype.extend = function(object) { for (property in object) { this[property] = object[property]; } return this; }わかる、わかるよやりたいことは。あれば確かに便利だ。そしてオブジェクト指向の考え方からして、そこにあるべきだろう。 でも、 info={name:"タロウ",tel:"090-xxx-xxx"}; for( i in info ){ document.write( i+"="+ i
はてなマップの prototype.js による Object.prototype 汚染の弊害
以前からprototype.jsでObject.prototypeが汚染されてしまうのは問題になっていた。詳しくはノゾキ日記やアルファニート2.0の人がまとめている。先日はてなマップが正常に動かなくなったときいて、そういやはてマってprototype.jsつかってるからそのせいじゃないかな、と思って昼間検証したところ(有休バンザイ！)ドンピシャだった。 で、Rails追っかけやprototype.js追っかけの人は知ってると思うんだけど、最近のprototype.js(prototype.js 1.4.0_preからかな？)ではこのObject.prototype汚染がマズイと思ったのか、Object.prototype拡張がなくなった。そのため、継承は以前では ExtendKlass.prototype = (new Klass).extend({}); と書かれていたのが、 Exten
[ajax] DOMコードジェネレータ @ ZEROBASE CAST
<div class="popup"> Let's access <a href="http://zerobase.jp/">ZEROBASE</a> & have fun. </div> キーボード入力も大丈夫。即座に下のDOMコードが変化します。 不完全なHTMLを入力すると正しい結果になりません。例えば<table>タグに囲われていない<tr>タグなど。あくまで上記テキストエリア内でDTDに反しないHTMLを入力してください。 ダウンロード ファイル dom2code.js ※気が向いたら改善しますので、ダウンロードするより、このページをブックマークするほうがおすすめです。 動作環境 WinXP(SP2)上のInternet Explorer バージョン6.0.29で動作確認しました。 動作だけなら幅広いブラウザで可能ですが、出力するDOMコードがブラウザにより異なります。というのは
Javascriptで高橋メソッド : 404 Blog Not Found
2005年10月06日13:24 カテゴリLightweight Languages Javascriptで高橋メソッド なんだか(高橋|もんた)メソッドが世界的なトレンドになっているらしい。 というわけで、みなさんも乗り遅れないように、以下のscriptで高橋メソッド化しよう！(藁) 誰でも sourceは以下のとおり。Ajax化も屁みたいなものでしょう。その辺は読者の宿題とします(爆)。 Dan the Takahashizer #!/usr/local/bin/perl use strict; use warnings; my @lines; while(<>){ chomp; push @lines, $_; } my $lines_array = join(",\n", map {qq('$_') } @lines); print <<"EOT"; <script languag
最速インターフェース研究会 :: 実践JavaScriptリファクタリング、その2
連載すんの？ リファクタリングとか嘘で実は実践ビルトインオブジェクトハックなんだけど。 例題 配列 a = [3,5,4,2,1] から一番小さな値と、一番大きな値を取り出すにはどうすればいいか。 多分昔はこんな風に書いてたと思うんですよ。 a = [3,5,4,2,1]; for(i=0;i<a.length;i++){ if(i == 0){ min = a[0]; max = a[0]; } if(min > a[i]){min = a[i]} if(max < a[i]){max = a[i]} } 模範解答として、後先考えないやり方を提示しておく。 a = [3,5,4,2,1]; min = a.sort().shift();// 1 max = a.sort().pop(); // 5 短い。ただし、これをやるとaの内容は並べ替えられて最初と最後の要素が取り除かれる。 a /
最速インターフェース研究会 :: 実践JavaScriptリファクタリング
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。 例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。 短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。 グローバル関数を定義2年前なら、多分こういう具合だった。 //ふつうに関数として定義する function x(str,num){ var tmp = ""; for(var i=0;i<num;i++){ tmp += str; } return tmp; } x("abcde",80) Stringのメソッドとして定義1年前だとこんな感じ。 //Stringのメソッドとして定義する String.prototype.x = function(num){ var tmp
YappoLogs: ページがどんなキーワードで検索されたかをTagCloud風に表示させるくっつきサービス
ページがどんなキーワードで検索されたかをTagCloud風に表示させるくっつきサービス Search Word Cloud ※11時に仕様を変更した追記を行っています。 うまい説明が思い浮かばないのですが javascriptファイルをページに貼り付けておくだけで、そのページに訪問した際に使われた検索キーワードを自動的に検知して そのキーワード達をTagCloud風に表示させる物を作ってみました。 機能は上記のものだけでいたってシンプルです。 このblogは、topの左上と各エントリの上にくっつけてます。 基本的な集計単位はURLベースなので、同一コンテンツに複数のURLが割り当てられてる時には挙動が変になるでしょう。 他にもネタがあるけど、とりあえず設置方法だけ書いておきます。 設置方法 <script src="http://swc.blogdb.jp/js/swc_init.js">
XMLHttpRequest でファイルのアップロードができないか? - naoyaのはてなダイアリー
ブックマーク経由でみかけたCodeWeb: 画像をアップロードする前にサムネイルを表示させる。 では、JavaScript を使ってファイルをアップロードする前にプレビューする方法が紹介されてました。input type="file" な input 要素の onchange ハンドラでごにょるというもの。 一方で、プレビューではなく、ファイルを追加した直後に特にボタンなどを押さず且つ画面遷移なしでファイルをアップロードできないものかと、ちょっと試行錯誤してみています。例によって XMLHttpRequest で Ajax るわけですが、残念ながらいまのところうまくいってません。 これまでに書いたコードは以下です。prototype.js を使ってます。 <input type="file" name="image" onchange=" if (this.value) { new Aja
画像をアップロードする前にサムネイルを表示させる。
ここは他所様と比べると、やってる事のレベルがと～っても低い上に説明も分かりにくく誤字脱字の多い所です。 そういう仕様なのでエラーとか出ても知りません。 対応ブラウザ： IE6.0 / IE5.5 参照画像をリアルタイムでサムネイル表示させるJavaScriptです。 画像をアップロードするまえに確認することができます。 全ブラウザで確認したわけではありませんが、どうやらIE以外はセキュリティの関係上ローカル画像は表示出来ない仕様となってるみたいです。 IE以外のブラウザは「file:///C:/Documents%20and%20Settings/」のようにsrcを書き換えないといけないみたいです。 めんどくさいから作りません。 Mozilla FirefoxではWEB上からローカル画像が参照出来ない!? 優しい方が教えてくれました。感謝。 セキュリティの観点からローカルファイルを読み込ま
Collection & Copy - JavaScriptにおける高階プログラミング
翻訳 原文：Higher Order Programming In Javascript著者：Sjoerd Visscherライセンス：クリエイティブ・コモンズ・ライセンス(帰属) 前提知識JavaScriptを使ったオブジェクト指向プログラミングの知識が必要となります。以下のWebreferenceの記事を読み、よく理解しておいてください。OOP in Javascript, part IOOP in Javascript, part IIDouglas Crockford最終更新2004/3/28はじめに高階プログラミングでは、値として関数を使うことができます。つまり引数として関数を別の関数へ渡すことも、関数を別の関数の返り値にすることもできるのです。この形式のプログラミングは、しばしば関数型プログラミングで使用されますが、「通常」のオブジェクト指向のプログラミングでも非常に有用です。
DOM Reference
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
ブラウザでミニマムXML (2)：描く - 檜山正幸のキマイラ飼育記 (はてなBlog)
とりあえずの第2回めー。なんか見出しが思いっきり短いですね。「描く」ってそれだけ。 ここでいう「描く」とは、XMLツリーの構造を見やすく視覚化することです。視覚化の対象となるDOMツリーは、もとのHTML文書の一部分だとしましょう。そして、視覚化の手段にブラウザのHTMLレンダリング機能を使います。 こういう視覚化ができないと、プログラムのテスト／デバッグがやりにくいので、まずは「描く」ことからはじめることにしたのです。 内容： DOMの知識はこれだけ 入れ子の箱で表現する 箱を作る関数を作る 要素を表現する箱 箱を実際に描く関数 試してみる 今回のまとめ 前回 - 全般的なこと、注意事項など ハブエントリ（全体目次） ●DOMの知識はこれだけ XMLやDOMの詳しい解説はしませんが、最小限のことをまとめておきます。今回使うプロパティ／メソッドは以下のものです。型の記述にはJava風の記法
サーバの負荷低減と可読性を考慮したAjaxコーディング - llameradaの日記
はてなブックマークの「おすすめ」を求めるブックマークレットでは、「はてなブックマーク」から複数回RSSファイルなどを取得します。この時、サーバへ大きな負荷を与えないよう、１つのファイルのダウンロードが終了してから、次のファイルをダウンロードするようにしています。 複数ファイルをダウンロードするAjaxの処理をコーディングするのは意外と面倒です。単純に書くならば、ファイルのダウンロード終了後の実行するイベントハンドラとして、次のファイルをダウンロードする関数を与えることになります。しかし、ダウンロードするファイル数が多数の場合、一つ一つ関数を定義するのは明らかに無駄です。こういった場合、JavaScriptでは関数がオブジェクトである点を利用して、関数オブジェクトを返す関数を定義するのが定石です。 例えば、次のようなコードが考えられるでしょう。なお、prototype.jsを前提にしています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hawk's W3 Laboratory : XML : XMLHttpRequestについて
http://www.infoaxia.com/tools/blog/archives/2005/06/mozillaxml.html
【随筆】IEでstart()という関数を実行するとエラーが発生する現象を検証 - 円い月の丸い兎 - そして誰もまるくなった -