ログ日記

作業ログと日記とメモ

JavaScript

Google Closure Library を使ったJavaScriptをブラウザ無しでテストする

試行錯誤して長くかかったのでメモ。 まず、Closure Library は最初の頃はJSのファイルを羅列したhtmlを読み込んでテストする方式だったと思う。 JsUnit がその形だったかな? CIとかが手軽に出来なかった頃はそれでも問題なかった。今ではテストのハードル…

Googleアナリティクス4プロパティで使われているフロントエンドのツール

メインのプログラムは

Google Closure Library の UI と調べもの

What UI rendering systems are used by Google with closure library, and why are these not open source? goog.ui.* は古いまま更新されていない。 最近のGoogleのサービスのUIはオープンソース化されていない。 Touch support for goog.ui.menu? goog.ui…

Hasteを試したログ

GHCJSの重さが気になっていたところで、こんな記事を見かけた。 qiita.com Hasteが良さそうなので試してみる。 Hasteのプロジェクトの作り方は stack new した後に stackoverflow.com 該当箇所をここの設定に書き換える。 % stack exec haste-boot ... Insta…

GHCJSを使えるようにしたログ

github.comソースからのインストールは出来たんだけど、それをstackで使う方法が分からなかった。 エラーがややこしいので元々入っているcabalを消したりhaskell-platformを消したりしてstackだけ動いている状態にして試した。 コンパイルが1時間近くかかる…

Closure Compiler の出力するJavaScriptを ES5(旧)とES6(新)で比べる

ふと、ES6よりES5で書いた方が軽くなるかと思ったので疑問を解消するために確かめる。 ※ ES5、ES6と書きつつ、単に書き方の違いの調査になってきたので新・旧とする。 Closure Compiler と Closure Libraryをダウンロードする。 wget https://dl.google.com/…

Google Closure Tools難しい

http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/dialog.html サンプルのソースを見たら分かるけど、JavaScriptの中にHTMLを書いてる。 Google Sitesでもそうだった。しかも日本語文字列はUnicodeでエンコードしてあった。これはClosur…

Google Closure Library はフォームを使わない方針?

サンプル見てたらdivとかulとかでコンポーネントが構成されてる。 それはいいんだけど、そっからデータをポストするにはどうしたらいいのか…。 Google Closure Libraryベースで作るってことは、基本全てのデータ送信はAjaxでやるのかな? Ajaxのやり方は goo…

IE6以下の表示をまともに

メモ http://yukotan.blogspot.com/2008/01/jsie7js.html

javascriptのやっつけAOP

Function.prototype.addAfter = function (callback) { var self = this; return function () { var res = self.apply(this, arguments); if (isFunction(callback)) { callback(); } return res; } } http://d.hatena.ne.jp/brazil/20061007/1160157179 頻…

mixiが使いにくくなっている件

リニューアル?したの?最近PCから全然見てなかったからアレだけども。 mixiが非常に使いにくい。 ぱっと見は「おっ!?」となるかもしれないが、実際に操作してみると細かな点でイライラが。 JavaScript盛り沢山なおかげでページを移動するとしばらく固まる…

id名重要class名重要

デザイナはサイト全体を通して同じid名や同じクラス名を使う。 プログラマはページ単位で大ざっぱに名前を付ける。 と書いてあったのを見たことがあるけど、割と当たっているような。 スタイルシートとJavaScriptを共通化し始めたら、サイト全体が巨大なプロ…

innerHTML

JavaScriptでだいぶハマってた。 単純な文字列置換でもミスるし・・。Ajaxで取ってきたテキストがIEだとタグ名が大文字になるのね。 あとinnerHTML。 prototype.jsを使うとHTMLElementが拡張されている。 タグには _extended="true" が追加されている。 その…

JavaScriptでデザインパターンの代わり

よくJavaScriptでデザインパターンとか書いてある記事を見かけるけど、無駄に複雑になるだけで必要ないと思う。 オブジェクトの一部の関数を入れ替えたければ普通に上書きすればいいんだし。 TemplateMethodパターンの場合 MyClass.prototype.myfunc = funct…

bindとかcallとか

bindとcallって何が違うんだろうと思ったら、関数を返すか関数を実行するかが違うんだね。 で、自分のコードを見てみると Webmail.prototype.viewList = function(text, args){ var cols = document.getElementsByClassName('subject'); var webmail = this;…

prototype.jsのbind

hawkさんにコメントをいただいたのでコードの見直し。 どの部分で問題になってたのか忘れてしまったorz でも数カ所で obj.func1 = function(element){ var obj = this; Event.observe(element, 'onclick', function(e){ obj.func2(); }); } obj.func2 = func…

デフォルト動作のキャンセル

onsubmitなどでreturn false;を返すと、デフォルトの動作をキャンセルできる。 で、これもEvent.observe()では無効なのか。 同じイベントに何個でもハンドラを登録できることを考えると普通の動きなのかな。

prototype.jsで綺麗なコードを書く

hawkさんにかなり助けてもらいつつ、コードが綺麗になってきたのでまとめてみる。 Ajaxイン・アクションの復習も兼ねて。 理解できてくると段々楽しくなってくるね。ブラウザの挙動の違いは困るけどprototype.jsが結構吸収してくれてるぽい。 HTMLからJavaSc…

おとなり日記で100%を初めて見た

javascriptの作法 - $php→rails (rails に憧れる phper のブログ) まったく同じようなことで悩んでた様子だ(笑 prototype.jsのbind周辺のソースは難解だわ・・。 関係ないけど検索してたらJavaScriptでカリー化とか懐かしい記事が見つかった。 凄い言語だ…

今日のハマりどころ

prototype.jsのEvent.observe()で登録した関数内のthisの参照する実体がfirefoxとIEで違うっぽい。 onclick=function(){...} と直接代入すればthisはどちらもイベントが起きた要素になる。 連想配列をPHPのように考えてたら行き詰まった。length使えないのね…