タグ

ブックマーク / amachang.hatenablog.com (16)

  • Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記

    はじめに 皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。 さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何か まず、 DOM Storage とはどんなものなのでしょうか。 とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。 さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。 では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit

    Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
  • それすぐ実行!JavaScript! - IT戦記

    思った JavaScript はすぐに実行してみましょう! ブラウザの URL 入力欄に javascript:(function() { /*実行したいコードを書く*/ })()FireBug を使ってる人は、コンソール開いて実行したいコードを書く。 たとえばこんなことができます。 これらの例は僕が日頃使っているものです。 グローバルで使える関数を列挙する(Firefox Only) FireBug用 for(var n in window) if(typeof window[n]=='function')console.log(n); URL用 javascript:(function(){var b='';for(var n in window)if(typeof window[n]=='function')b+=n+"\n";alert(b)})() Object.prototyp

    それすぐ実行!JavaScript! - IT戦記
  • Google Gears の機能のおさらいと HTML5「Client-side DB」の相互運用を考える。Client-side DB に未来はあるか? - IT戦記

    さきほど Client-side database storage について書きましたが そこで、 Client-side database storage は今は Safari からしか使うことができません しかし、 Google Gears を使ってすべてのブラウザに実装することは可能だと思います。(すでにある?) その辺りも少し調べてみたいです。 Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か? - IT戦記 と書いてから、少しだけ Google Gears が持っているクライアントサイドデータベースについて調べてみました。 Google Gears とは まず、 Google Gears について少し触れておきます。 Google Gears はブラウザの機能を拡張するためのもので、以下の機能を提供します。

    Google Gears の機能のおさらいと HTML5「Client-side DB」の相互運用を考える。Client-side DB に未来はあるか? - IT戦記
  • IT戦記 - 一行で IE の JavaScript を高速化する方法

    以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -

    IT戦記 - 一行で IE の JavaScript を高速化する方法
  • IT戦記 - XPath は実用に耐えうるかの考察と xpath.js

    背景>< Safari 3 系から DOM Level 3 XPath が実装されました!!!キタコレ!!! Firefox 2 系は DOM Level 3 XPath が実装されている。 Opera 9 系は DOM Level 3 XPath が実装されている。 XPath 1.0 in JavaScript • Cameron McCormack's blog (以下、 xpath.js)なるものがあり Internet Explorer 6 および 7 のような DOM Level 3 XPath を実装していないブラウザでもそれ相当の機能を実装することができる ということで、以下のことを試してみたい!! Safari, Firefox, Opera の XPath のパフォーマンスはどうか? xpath.js のパフォーマンスはどうか? xpath.js は XPath 1.0

    IT戦記 - XPath は実用に耐えうるかの考察と xpath.js
  • IT戦記 - JavaScript で数式パーサを書いてみた。

    背景 いままで、ちゃんとパーサというものを書いたことがなかったので勉強のためにアレコレ考えながらやってみようと思って、簡単な数式を木にするパーサを書いてみようと思ったのです>< 今回作るパーサの仕様 パースする数式の演算子は二項演算子 + - * / と単項演算子 + - だけ。 括弧とかは使わない。 演算の優先順位は * / のほうが + - より高い。つまり、 1 + 1 * 1 は 1 + (1 * 1) 単項演算子は二項演算子より優先順位が高い。つまり、 - 1 + 1 は (-1) + 1 で、作ってみた! ソースコード filter 関数とか使ってるので、 Firefox only です。 var parse = function(source) { var tokens = source.match(/[-+*/]|[^-+*/\s]+|\s+/g).filter(/^[^\

    IT戦記 - JavaScript で数式パーサを書いてみた。
  • JavaScript < jQuery < Lisp ? - IT戦記

    はじめに 僕は jQuery も Lisp も触ったことがないので、このエントリが言ってることは間違えてる可能性があります>< もし、「それ違うよ」ってのがあれば指摘してくれると嬉しいです>< そういえば 初めて dankogai さんと会ったときに「S 式とアセンブラは両極端にいながら データ==プログラム というところが同じだ」というようなことを言っていた(気がする)。 データ==プログラムというのは当にすごい データとしてプログラムを直接書き換えたりいろいろなことができる。当にすごい。 もちろん、他の言語でも、リフレクションすることや、変数やプロパティに関数を格納することでそれと似たようなことは可能だ。でもそれは、データ=プログラムとは全然違う。 バイトコード書き換えは似ているが、バイトコードの世界がデータ==プログラムなのであってその言語自体はそうじゃない。でも、バイトコードを

    JavaScript < jQuery < Lisp ? - IT戦記
  • style.cssText の使い処に関する考察 - IT戦記

    cssText って知ってますか? cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。 具体例を見てみましょう。 こんな感じの body があるときに <body style="margin: 1em; padding: 1em; border: 1em">....</body> こんな感じで使えます。 alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em' 簡単でしょう?(ボブ略 設定も出来ますよ こんな感じ // さっきの続き document.body

    style.cssText の使い処に関する考察 - IT戦記
    Cuckoo
    Cuckoo 2007/07/31
  • IT戦記 - Safari 3 に実装された、当たっている CSS ルールを全て抽出できる getMatchedCSSRules が凄い

    今日は、まだまだ Safari 3 が熱い! window オブジェクトを走査していたら、またしても面白そうな関数を見つけてしまった。 その名も getMatchedCSSRules !!! まずはデモをご覧ください 以下のブックマークレットを任意のサイトで実行すると、コンテンツの下に DOM Inspector のような要素が出現します。 そこで、要素を開いていくと Safari の場合は、どの CSS ルールが当たっているかを見る事ができます。 javascript:(function(){var d=document,s=d.createElement('script');s.className='css-inspector-script';d.body.appendChild(s);s.src='http://amachang.art-code.org/cssInspector.j

    IT戦記 - Safari 3 に実装された、当たっている CSS ルールを全て抽出できる getMatchedCSSRules が凄い
  • 濃い JavaScript のテクニック集見つけた - IT戦記

    jslibs の wiki を眺めてたら、 JavaScript のテクニック集を見つけてしまった http://code.google.com/p/jslibs/wiki/JavascriptTips 内容 Firefox 限定のテクニックも含まれてますが、 JavaScript のテッキーな書き方満載です。 例えば カンマ演算子 var a = (1, 2, 3, 4); alert(a); // 4 var b = ( a += 3, a *= 6, a ); とか、普通やらないようなこともいろいろあって楽しかったです。

    濃い JavaScript のテクニック集見つけた - IT戦記
  • Catalyst勉強会資料 - IT戦記

    けっこう前ですが、会社の勉強会で Catalyst についてやりました もったいないので、共有しときます。 http://sample.ecmascript.jp/Catalyst.ppt そんな矢先ですが、 Catalyst が 5.7 になったようですね。ちょっと調査しないと

    Catalyst勉強会資料 - IT戦記
    Cuckoo
    Cuckoo 2006/07/13
  • FireBug に JavaScript デバッガが付いて便利すぎる件について - IT戦記

    Firebug を更新したら、またもや凄いことになってました。 まずはこれを見てください。 http://sample.ecmascript.jp/20060526.htm 要は JavaScriptをステップ実行しながら結果を確認できる。 変数の値をウォッチできる。 適当にブレークポイントを貼ってスタックを追えば、他人のサイトを簡単にハックできる。 うれしい!たのしい!こんにちわ! FireBug のインストール https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843

    FireBug に JavaScript デバッガが付いて便利すぎる件について - IT戦記
  • Script.aculo.us や Rico を使う前に JavaScript Effect の仕組みについて理解しよう - IT戦記

    社外勉強会の講師をすることになりました。 テーマは「JavaScript Effect Programming」 資料を公開します。 http://Sample.ECMAScript.jp/20060329.ppt 内容は・・・ JavaScript Effect Programming Effect の仕組み クラス設計 Delay 機種依存性の解決 Busy 状態の緩和 おまけ(上の資料内容を使って実現したゲーム) http://Sample.ECMAScript.jp/20060329.html ← 昨日(というか今日)の日記の高速化バージョン ルールは、ブロックの光の移動を寸止めでクリック(or キープレス)で止める。それを繰り返す。 やっぱりあんまり昨日のと変わらないなぁ。もっと、重いプログラム書かないと・・・。

    Script.aculo.us や Rico を使う前に JavaScript Effect の仕組みについて理解しよう - IT戦記
    Cuckoo
    Cuckoo 2006/03/31
  • IT戦記

    みなさんお元気ですか?僕は少しだけ元気ではありません。じんわりとした夏の暑さを感じながらブログを書いています。 実は、数ヶ月前にスマートニュースという会社を退職しました。 しばらく無職 しばらくは就職せずに無職でいようかなと思っています。 すぐに再就職した方がいいんだろうな〜。とは思うのですが少し疲れたかも。 いい時代になったものだ 最近は AI の進化も素晴らしく、昔ソフトウェアで出来なかったことがどんどんできるようになってるなって感じます。 Rust とか、ちょうど欲しかった感じのプログラミング言語もあるし、 ChatGPT は完璧ではないけど何か新しいことを始めるときに素晴らしい洞察を与えてくれる。 時代は確実に良くなってる。そんな時代に「自分は働いていないくていいのか」と少し不安になるけれど、自由気ままにコードを書く、そんな時間が今あってのもいいのかなって思ってます。 オフトピック

    IT戦記
  • IT戦記 - Prototype.js を使った JavaScript OOP 講座 #02

    社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 今週はかなりハードボイルドで全身タイツのような忙しさなので、みんなが春を分けて楽しんでいたり、香港に行って楽しんでいる間にせこせこ資料を作っています。 はぁ。 Section 00 Prototype.js の前に JavaScript と DOM とイベントの概要 HTML は読み込まれた後、すべての情報が JavaScript のオブジェクトに変換される。 イメージ的にはこんな感じ <html> <head> <title>タイトル</title> </head> <body> : : </body> </html>↓↓↓ var document = { doc

    IT戦記 - Prototype.js を使った JavaScript OOP 講座 #02
  • 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()

    Prototype.js を使った JavaScript OOP 講座 #01
    Cuckoo
    Cuckoo 2006/03/17
  • 1