Author: Mark S. Miller, Waldemar Horwat, Mike Samuel View presentation on YouTube. Download slides (OpenOffice) (PowerPoint) (PDF)
Changes to JavaScript, Part 1: EcmaScript 5
Author: Mark S. Miller, Waldemar Horwat, Mike Samuel View presentation on YouTube. Download slides (OpenOffice) (PowerPoint) (PDF)
Underscore.js
Table of Contents Collections each, map, inject, detect, select, reject, all, any, include, invoke, pluck, max, min, sortBy, sortedIndex, toArray, size Arrays first, last, compact, flatten, without, uniq, intersect, zip, indexOf Functions bind, bindAll, delay, defer, wrap Objects keys, values, extend, clone, isEqual, isElement, isArray, isFunction, isUndefined Utility uniqueId, template Collection
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
結構前から収集していた海外エントリから面白いcustom eventの使い方を紹介 - monjudoh’s diary
jQueryでは非DOMオブジェクトにもeventをbind/triggerできる Binding Events To Non-DOM Objects With jQuery この例だとwindow.location.hrefが変化しているかどうかTimerで監視し続け、 変化したタイミングで$( window.location ).trigger('change',data);で変更前後の情報を通知している。 なので、$( window.location ).bind('change',function(ev,data){});で通知を受け取る事ができる。 hashで状態を管理しているAjaxアプリで有効そうなテクニック。 select boxでcustom eventを活用 http://trulyevil.com/2009/05/07/custom-events-in-jquery/
JSONとJSONPの違い - あと味
解説は他にもたくさんありますが、私自身も使いはじめの頃、違いがよくわからなかったので。 JSONとは？ 汎用的なデータ記述方法です。こんな感じで書きます。 { 'blog' : 'あと味', 'author' : 'jdg' } まさにJavaScriptのオブジェクトですね。*1 JSONPとは？ JSONを以下のように変えたもの。 callback({ 'blog' : 'あと味', 'author' : 'jdg' }); 関数呼び出しっぽいですね。まぁ、関数呼び出しなんですけど。 どゆこと？となるポイント 見た目が関数っぽくなる意外に変更点はないように見えますが、クロスドメインでJSONを読み込む時は、なぜかJSONではなく、JSONPが使われます。（WebAPI等） また、アクセスしたらJSON形式のデータを返す単純なCGIを自分で作りたいと思った場合でも、JSONを返しても、J
YappoLogs: Ajax アプリ等の為の JavaScript コードのテストツール JSTAPd を作ってるよ
Ajax アプリ等の為の JavaScript コードのテストツール JSTAPd を作ってるよ Data::ObjectDriverをDISってる人の話題が三周目に突入した今日この頃ですが皆さんは何をDISってますか?Yappoです。 JavaScript にもテストツールが色々とあると思うんですが、 Ajax アプリの XHR リクエストとかも含めてラクチンにテストできるツールが見つからなかったので JSTAPd というツールを作りました。 http://github.com/yappo/JSTAPd 名前の通りテスト結果はTAPで出力してるのでproveコマンドとかを使ってPerlの作法でテストできます。 ブラウザの連携の設定をすれば prove -v foo/hoge.t とかをコマンドで打ち込めば勝手にブラウザ立ち上げてテストコード実行してブラウザ閉じて結果をコンソールに吐いてく
eventのグローバル通知 - monjudoh’s diary
jQuery.event.trigger(eventType); で、やる。若手ITゾンビで読んだ。 主な用途はDOM要素に紐づかないcustom eventの通知用(例：ajaxSend)と思われる。 (全DOM要素への通知って用途はあるのかな?) 実行すると、jQuery.cacheに入っている全てのオブジェクト(DOM要素に限らない)に対して、このeventを通知する。 なので、Ajax中にページ更新する際の注意点 - to-RのtipsでajaxSendをbindする対象はbodyでなくても良い。 ただし、jQuery.event.global[eventType]がtrueの場合(一度でもこのeventTypeのeventをbindしたことがある場合)のみ、この処理は行われる。 なので、例えばajaxSendを一度もbindしていなければ全cacheを舐めるような処理は行われない
Yahoo! UI Library 3（YUI3）の基本
「Yahoo! User Interface Library Ver.3」（YUI3）はYahoo!が開発した、Webのページを作成するための汎用ツールライブラリーです。オープンソースで無償で提供されており、アニメーション効果やドラッグ＆ドロップ、データ取得やイベントの応答など、多岐にわたる機能がサポートされています。今回はまずYUI3の全体像を紹介します。 はじめに Yahoo!は、米国時間9月29日に「Yahoo! User Interface Library Ver.3」（YUI3）をリリースしました。YUI3はJavaScriptやCSS（Cascading Style Sheet）で書かれた、Ajaxライブラリーです。 Yahoo!は今まで、インターネットによる情報提供のためのさまざまなツールを作成してきました。開発したツールの中でも、Webのページを作成するのに汎用的に使えるツ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
使ってはいけないjQueryの機能 5個 : tech.kayac.com - KAYAC engineers' blog
3 days ago的な時間表記をするサービスは全部嫌いです。agoです。 週末若手IT勉強会に参加させていただきjQuery 1.3.2のイベント周りを読んできたので、それを踏まえて使用すると問題の発生する可能性の高い機能を紹介します。 0 jQuery.browser 1.3からサポート外になりました。 代わりにjQuery.supportを使用しましょう。 ただ、swfの重ね合わせ問題等は単体のJSでは確認できないので、jQuery.browser無しでどう解決すればいいのかよくわかっていません。 1 getData、setDataイベント getData、setDataイベントは1.5系で削除される予定のようです 最新版のjQueryではgetData、setDataイベントが使用可能になっており、以下のようにイベントを設定できます。 $().bind('getData', fun
Ctrl + Click で検索 - f8g
テキストボックスを Ctrl + Click すると, 親 form を submit. // ==UserScript== // @name post ctrl click // @namespace d.hatena.ne.jp/arikui // @include * // @require http://gist.github.com/29681.txt // ==/UserScript== $X("//input[@type='text' or not(@type)]").forEach(function(element){ if(element.form) element.addEventListener("click", function(e){ if(e.ctrlKey) element.form.submit(); }, false); }); ALC で使おうと思ってい
もっと速くするために(文字列変換コストの抑止 + String.prototype 化による影響) - latest log
element.style.xxx にアクセスするには、"css-prop" ではなく "cssProp" の形でアクセスする必要があります。このとき行われる変換は camelize と呼ばれ、JavaScriptライブラリの多くは以下のような実装を行っているようです。 # camelize = らくだのこぶのようにする function camelize(name) { // "text-align" -> "textAlign" return name.replace(/\-(\w)/g, function(m, c){ return c.toUpperCase(); }); } その都度 camelize するのではなく事前生成しておけば速くなるのでしょうか? 比較対照が無いと寂しいので、代表的な JavaScript ライブラリのスコアも一緒に計ってみました。 テスト方法と、事前予
JavaScript Regex :: XRegExp
More regex stuff by me: • Awesome Regex List of the best regex resources • Regex+ JS regexes + future “Regular Expressions Cookbook manages to be simultaneously accessible and almost ridiculously comprehensive.” —Jeff Atwood Check out Regex+, the lightweight spiritual successor to XRegExp that once again takes JavaScript regexes to the next level. What is it? XRegExp provides augmented (and extens
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
「RESTful MVC」なアーキテクチャの話
最近、増井君と私でアーキテクチャの話をすることが多いのだが、そんなディスカッションの中で気に入っているのは左の図のようなアーキテクチャ。 もちろん、核となるのはビジネスロジックを含んだModelの部分。そこをしっかりと実装し、内部構造を隠す粒度の荒いインターフェイスを定義し、外から何をされてもデータの整合性が壊れない様にすることは何よりも大切。 そして、そのModel層へのインターフェイスを特定の言語に依存したクラスやAPIではなく、HTTP上でJSON（XMLでもかまわない）をやりとりするだけの RESTfulなWeb Serviceにすることがミソ。こうすることによりにより、どんなに締め切りに負われようが、誰がControllerを実装しようが「ずるができない」ように作っておく（ずる＝本来使うべき外部インターフェイスだけでなく、Model内部に直接アクセスして依存関係を作ってしまう事）
JavascriptとCanvasによるファミコンエミュレーター
JSNES: A Javascript NES emulator JavascriptとCanvasを使ったNES(ファミコン)エミュレーターを実装したと主張している。Chromeならば、パフォーマンスも申し分ない。 にわかに信じられないが、どうやら本物らしい。 もし本当だとしたら、本物のROMを使用しているようなので、合法ではないのであまり深く追求しないが、ソースをみる限り、本当にエミュレーターを実装しているらしい。サイトの説明によると、vNESというエミュレーターを、JavascriptとCanvasを使うように移植したのだとか。 ところで、もし本物だとして、本当に本物のカートリッジからダンプしたROMを使っているのだとして、一体どうやってJavascriptからバイナリファイルを扱うんだろうと思って調べてみた所、どうやら、バイナリファイルではなく、スラッシュ区切りの十進数文字列にして
良く訓練されたスライダー - latest log
JavaScript で作った UI 部品の話になると、 jQuery UI とか、jQuery TOOLS あるじゃん とか良く聞きますね。 jQuery UI http://jqueryui.com/demos/ ソータブルなリスト http://jqueryui.com/demos/sortable/default.html スライダー横 http://jqueryui.com/demos/slider/default.html Drag http://jqueryui.com/demos/draggable/default.html Drop http://jqueryui.com/demos/droppable/default.html jQuery TOOLS http://flowplayer.org/tools/index.html UI の話だったら、jQuery よりも
2chのレスをアンカで並びかえる - Gemmaの日記
アンカで並び替えて、例えばこのように7の次に11を表示するような処理を説明します。 さて、2chの板はこのようになっています。 アンカは、Web(網)と同様に網の目のようにリンクしています。これは有向グラフです。 有向グラフは難しい。 循環が困る。 循環は"未来へのアンカ"を無視すれば防げます。 このような未来へのアンカ>>100を無視する これで問題が無閉路有向グラフになります。 燐隊長が困る。 燐隊長は、"一番大きなアンカ"の8をとることにしましょう。 これで問題がこのような単連結無閉路有向グラフになります。 実装 var testdata = [ [], // 配列のインデックスを1から始めたいので詰め物をする [], // 1: [1], // 2: >>1 [1], // 3: >>1 [], // 4: [4], // 5: >>4 [5], // 6: >>5 [5], //
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://slowjavascript.com/
http://oldriver.org/jsmigemo/