onLoadとDOMContentLoadedの違いと実行順序

photo by Judit Klein

いままでHTMLの読み込みが完了してから行う初期処理は、すべてonLoadイベントで行っていた。でもHTML5からはDOMContentLoadedというイベントが使えるようになったらしい。

onLoad と DOMContentLoaded

onLoadとDOMContentLoadedの1番の違いは、イベントが実行されるタイミング。

onLoad

onLoadは、すべてのリソースが読み込まれたら発火するイベント

たとえばHTMLにクッソ重い画像が含まれていた場合、その画像の読み込みが終わるまでイベントが発火しない。

DOMContentLoaded

DOMContentLoadedは、HTMLの解釈が終了した時点で発火するイベント

HTMLが読み込まれてさえいれば、リソースを読み込む前に実行される。
だからクッソ重い画像があったとしても、その読み込みを待たずして処理を続行することができる。

用途としては、リソースの読み込みは後回しにして、JavaScriptを読み込みたい時につかう。
ただし、DOMContentLoadedはHTML5から追加されたイベントのため、古いブラウザ（IE8やSafari3.1など）では使用することができないので注意。

JavaScriptでCSVファイルなどを文字化けさせずに出力する方法

JavaScriptでCSVやテキストファイルなどを出力したとき、環境や見るツールによっては文字化けしてしまう。たとえばCSVで出力して、テキストエディタでは読めるけど、Excelで開くと文字化けするなど。

結論からいうと、テキストの先頭にBOMをつければ解消される。
ということで、各ブラウザ（IE, Safari, Firefox, Chrome, Opera...）でファイルを出力するときに文字化けさせない方法をまとめる。

BOM（Byte Order Mark）とは

そもそもBOMとはなんぞや？

Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。

バイトオーダーマーク - Wikipedia

具体的に説明すると、Unicodeが登場したころ各国でいろんな文字コードが使われていた。日本ならSJIS、アメリカならASCIIといった具合に。

そこでUnicodeなのかSJIS,ASCIIなのかを明確に区別する必要があり、テキストの先頭に特定のコードを埋め込み区別できるようにしていた。そのコードがBOM。
ちなみにUTF-8の場合は「0xEF 0xBB 0xBF」という3バイトを先頭につける。

ライブラリを使わずJavaScriptでインクリメンタルサーチを実装する

インクリメンタルサーチとはキー入力ごとに自動的に検索処理を行う手法のひとつ。
ただ環境によってはライブラリが使えず、自分たちで実装する必要があったりする。
ということで、今回は素のJavaScriptのみでインクリメンタルサーチを実装する。

HTML

<input type='text' id="keyword">

<ul id="list">
</ul>

【PR】EaseUS Partition Master Freeで簡単パーティション操作

Ubuntuをインストールしてデュアルブートにするためにパーティションソフトを探していたとき、なんと偶然にもEaseUSの中のから「弊社のソフトウェア使ってみませんか？」というメールをいただいたのでさっそく使ってみた。

いままでパーティションソフトといえば、Buffalo社のDisk Formatter、Ubuntuに入ってるGparted、Windowsの標準ディスク管理ソフトの3種類なので、他社製品と比較して正直な感想を書いていく。

【JavaScript】ライブラリを使わずにプログレスバーを実装する

プログレスバーを使いたいけどそのためだけにBootstrapやjQueryを入れるのもなぁ…。
ということで、JavaScriptでプログレスバーを実装してみた。

HTML/CSS

<div class="app">
  <p>進捗: <button id="up">+</button> <button id="down">-</button></p>

  <div id="prog-bar" class="progress">
    <div class="progress-bar">
    </div>
  </div>
</div>

.progress がプログレスバーの外枠。
.progress-bar がプログレスバーの中身。
この辺はBootstrapと同じ。