DOMのinnerHTMLに流し込む - Thousand Years
Tipsです。JSmartyで処理した結果をDOMのinnerHTMLに流し込む方法のご紹介。現在、JSmarty0.4系開発中。 JSmarty#fetchの利用 tpl = new JSmarty(); tpl.assign("foo","Hello World!!"); document.getElementById('hoge').innerHTML = tpl.fetch("string:{$foo}"); PHPやっていてdisplayばかり使っているのでfetch利用わすれちゃいますが…JSmary#fetchやSmarty#fetchともにテンプレート処理してその結果を返すという仕様です。JSmartyではdisplayよりfetchのほうを多様するかと思います。 JSmarty.System.print()のハック JSmarty.System.print = funct
JavaScriptでUndoRedoするためのなにか - Thousand Years
方法論? ふとJavaScriptでUndoRedo機構がエレガントにつくれないかと思ってなんかごさごさやっていたんですがそれっぽいものができたのでアプローチをポスト。UndoRedo機構つくる為の方法論としていくつか考えてみました。 前やったことの逆算。次やることの計算(右に3px動かす。左に3px動かす。) DOMのプロパティtop:50pxとかleft:50pxとか保存して頑張る。(prop1 = { top: 50, left :50px}, prop2 = {top: 25, left : 25}) 現在の状態のDOMを保存(キャッシュ)しておき状態を復元する。 とまぁ。すぐ思い浮かぶのは1,2くらい(1と2のパターンはやれなくもないけど凄いめんどう。)今回は3のアプローチ。 element.cloneNode(flag) JavaScriptでアニメーションするにしろ新しくHT
scope chain - Thousand Years
いまさらながらスコープとスコープチェーンの話。スコープチェーンについて分かったつもりになっていたのですが以下のサンプルコードのfooの値は○○○だ！って思ってたけど違った。 foo = 'hoge'; function hoge(){ var foo = 'foo'; function foo(){}; alert(foo); // ??? }; hoge(); scope chainとLEGBルール*1 ECMAScriptの仕様書にはscope chainという用語で説明されている、要はスコープをどうやって探していくかの順番の定義。図にまとめると以下のような具合。 初めてのPythonではPythonのスコープ検知の順番をLEGBルールとして紹介している。Lはローカルスコープ。Eはエンクロージングファンクションズスコープ(JavaScriptで単にクロージャと呼ばれている。)。Gはグロ
文字列連結を素早くするオブジェクト - Thousand Years
JavaScriptの文字列連結はすればするほど長くなればなるほど重くなるっていうのは有名な話でどうしても何回も連結せざるを得ない状況(テンプレート処理)では以下のような俺オブジェクトを使って対処してきました。 ただ人間欲が出てくると replace したいとか length 取得したいよ...と思い、自分で実装する必要が出ていました。ただ String.prototype が継承できるのを思い出し作り直したのが以下のもの。 function Buffer() { var k = -1, b = []; this.append = function() { for(var i=0,f=arguments.length;i<f;i++) { if(!arguments[i]){ return; }; b[++k] = arguments[i]; }; }; function toString
JavaScript継承パターンまとめ - Thousand Years
プロトタイプ function Animal(){}; Animal.prototype = { sleep : function(){}, walk : function(){ alert('noshi, noshi') } }; function Human(){}; Human.prototype = new Animal(); new Human().walk(); // noshi, noshi もっともポピュラだと思われる。 変型プロトタイプ Human.prototype.__proto__ = Animal.prototype; new Human().walk(); // noshi, noshi ほとんどのIEを除くJavaScript処理系で実行可能。裏ワザちっく。 エクステンド /** * extend function * @param {Object} s su
innerHTMLでscriptする - Thousand Years
innerHTMLにscriptを代入しても評価されず無視されるのはIEの仕様なのでいいとしてその回避策。最近、昔あの方法で出来たんだけどいつの間にかできなくなってるコードが出てきている気がします(気のせいにしておこう)。 以下は一般的な動かないコード。 <div id="foo"></div> <script type="text/javascript"> document.getElementById('foo').innerHTML = "<script type='text/javascript'>alert('動かない')<"+"/script>"; </script> 以下は動くコード。 <div id="foo"></div> <script type="text/javascript"> document.getElementById('foo').innerHTML =
JSmartyのPlugin動作確認ページMVC版 - Thousand Years
JavaScriptでMVCなページをつくるにはどうしたらいいのだろうとあれこれ模索中なのですが一応それっぽいことが出来たので公開します。(JSmartyのPluginのオンラインデモなのでそうでもなくても公開してましたが…)VのエンジンはもちろんJSmarty利用です。方法論については後日に触れるとして、ハッシュの値によってページが切り替ります。JavaScriptオンリーです。 plugin.html plugin.html#counter plugin.html#cycle 実装の解説 実装はどうしているかというと、まずコントローラの一部を以下のように実装。location.hashの値に応じて適したモデルを返す為の処理です。例えばlocation.hashの値が#fooだとModel.Fooを返してくれます。 var Record = {}; // ハッシュの値によって適切なモデル
script要素のtextプロパティ - Thousand Years
http://d.hatena.ne.jp/brazil/20061105/1162722198 http://rails.office.drecom.jp/takiuchi/archive/100 の中で記述されているscript要素にinnerHTML突っ込んでもうまく作動しない件。僕のIE6でもできないのでMSの月例更新で仕様変更になったのかと勝手に想像しています。ただその代替手段として...以下のようにtextプロパティを利用できます。既存のscript要素にtext設定しただけでalertされます。…これってXMLHttpRequestした後にeval必要ないですね。 <script id="foo"></script> <script> foo.text = "alert(1)"; foo.text = "alert(2)"; </script>innerHTMLはMSIEの独
JavaScriptでPHPの関数を実装する - Thousand Years
JavaScriptでPHPとかの関数あったらいいなと思うときがあってJSmartyで必要になったので書きました。PHPと同名の関数のJavaScript版です。バグとかあるのは承知の上でまだ完璧に実装終っていませんが置いておきます。ご自由にどうぞ。(増えるかも) ダウンロード http://www.starmsg.net/shared/scripts/internals/php.array_values.js http://www.starmsg.net/shared/scripts/internals/php.array_map.js http://www.starmsg.net/shared/scripts/internals/php.bin2hex.js http://www.starmsg.net/shared/scripts/internals/php.nl2br.js htt
Dateオブジェクトの返す文字 - Thousand Years
今、PHPのstrftime関数*1をJavaScriptに移植しています。その為にDateオブジェクトで返される数字の範囲確認したので以下はそのまとめです。2006/10/22に調査実施しました。getYearは実装違うのgetFullYear利用したほうが無難。 IE6 Firefox Opera 備考 getFullYear 2006 2006 2006 getYear 2006 106 106 getMonth 9 9 9 1月が0。0〜11 getDate 22 22 22 1〜31 getDay 0 0 0 日曜日が0。0〜6 getHours 16 16 16 0〜23 getMinutes 42 42 42 0〜59 getSeconds 14 14 14 0〜59 getMilliseconds 203 107 22 0〜999 toString Sun Oct 22 2
JSmartyとは？ - Thousand Years
概要 JSmartyはPHPのSmartyを模したJavaScriptで動くテンプレートエンジンです。テンプレートAPI部分についてはSmartyを準拠しており、それ以外にも文字列処理が便利になるようにAPIを提供します。 デモ http://www.starmsg.net/samples/JSmarty/plugin.html ダウンロード http://code.google.com/p/jsmarty/downloads/list Hello World!! <script src="JSmarty.js"></script> <script src="JSmarty/Compiler.js"></script> var smarty = new JSmarty(); smarty.assign("foo", "Hello World!!"); smarty.display("str
DOMを利用した外部js動的ロード関数 - Thousand Years
別ドメインのファイルも読み込めるから便利かもなと。(注)load.loaded=[]をload.loaded={}に変更 function load(script) { var loaded = load.loaded; if(loaded[script]) return; var elm = document.createElement('script'); elm.type = 'text/javascript'; elm.src = script; loaded[script] = true; document.getElementsByTagName('head').item(0).appendChild(elm); }; load.loaded = {};
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
