Element.contentEditable
Shibuya
.JS
10 年。
世界が JavaScript の真の実力を発見するのに要した時間である。
1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、
ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。
JavaScript は、Web の「あちら側」と「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出すために、我々は Shibuya.js を結成した。
Sby.JS
JavaScript は
再発見によって生かされた
そして、今再び
これは仕様(夢)の話ではない
目の前にある実装(現実)の話だ
var editer = document.createElement('div');
// 要素を編集可能にする (文字列)
editer.contentEditable = 'true';
// 要素が編集可能か確認する (真偽値)
alert(editer.isContentEditable); // true
// HTML に直書きもできる
<div contenteditable="true"></div>
Demo
// drag イベントを監視
// IE だったら attachEvent('ondrag'
element.addEventListener('drag', function(e) {
console.log(
e.dataTransfer.getData('Text')
+ 'をドラッグ中'
);
}, false);
// dragend イベントを監視
// IE だったら attachEvent('ondragend'
element.addEventListener('dragend', function(e) {
console.log(
e.dataTransfer.getData('Text')
+ 'をドラッグ完了！'
);
}, false);
// コピーの監視
elm.addEventListener('beforecopy', function(e) {
// 残念ながらブラウザによってイベントの扱いが違う
}, false);
elm.addEventListener('copy', function(e) {
// 残念ながらブラウザによってイベントの扱いが違う
}, false);
// 切り取りの監視
elm.addEventListener('beforecut', function(e) {
// 残念ながらブラウザによってイベントの扱いが違う
}, false);
elm.addEventListener('cut', function(e) {
// 残念ながらブラウザによってイベントの扱いが違う
}, false);
// 貼付けの監視
elm.addEventListener('beforepaste', function(e) {
// 残念ながらブラウザによってイベントの扱いが違う
}, false);
elm.addEventListener('paste', function(e) {
// 残念ながらブラウザによってイベントの扱いが違う
}, false);
// オフラインモードの切り替えを監視
// ネットの接続を監視している訳ではない。
document.addEventListener('online', function(e) {
alert(navigator.onLine); // true
}, false);
document.addEventListener('offline', function(e) {
alert(navigator.onLine); // false
}, false);
// オフラインキャッシュに入れておく
navigator.offlineResources
.add('http://example.com/offline.js');
// 後で使う
document.addEventListener('offline', function(e) {
var script = document.createElement('script');
script.src = 'http://example.com/offline.js';
document.body.appendChild(src);
}, false);
<!-- Style Sheet Set "hoge" (Preferred) -->
<link rel="stylesheet" title="hoge"
href="/hoge1.css" .../>
<link rel="stylesheet" title="hoge"
href="/hoge2.css" .../>
<!-- Style Sheet Set "fuga" (Alternate) -->
<link rel="alternate stylesheet" title="fuga"
href="/fuga1.css" .../>
<link rel="alternate stylesheet" title="fuga"
href="/fuga2.css" .../>
alert(document.selectedStyleSheetSet); // hoge
alert(document.lastStyleSheetSet); // null
// CSS の有効無効を切り替える
document.enableStyleSheetsForSet('fuga');
// document.selectedStyleSheetSet = 'fuga' と同じ
alert(document.selectedStyleSheetSet); // fuga
alert(document.lastStyleSheetSet); // fuga
// Preferred alert(document.preferredStyleSheetSet); // hoge // List alert(document.styleSheetSets.length); // 2 alert(document.styleSheetSets[0]); // hoge alert(document.styleSheetSets[1]); // fuga
var style =
getComputedStyle(document.body, '');
// カスケーディングや継承を考慮した値が取れる
alert(style.display); // block
// 当たってる CSS ルールを取得する var rules = getMatchedCSSRules(elm, ''); alert(rules.length); // ルールの数 alert(rules[0].selectorText); alert(rules[0].style.color); alert(rules[1].selectorText); alert(rules[1].style.backgroundColor);
// 一行一行のボックス情報が取得できる。 var rects = elm.getClientRects(); // すべての行の左右はボーダー辺まで // 最初の行は上のボーダーを含み、 // 最後の行は下のボーダーを含む。 alert(rects[0].top); alert(rects[0].bottom); alert(rects[0].left); alert(rects[0].right);
Demo
// 要素のボーダー辺で囲まれた領域の // ボックス情報を取得を取得出来る var rect = elm.getBoundingClientRect(); alert(rect.top); alert(rect.bottom); alert(rect.left); alert(rect.right);
// 一番左上の要素を取得 var elm = document.elementFromPoint(0, 0);
// document 中の全ての div 要素を取得
var result = document.evaluate(
'//div', document, null, 6, null);
for (var i = 0; i < result.snapshotLength; i ++) {
var element = result.snapshotItem(i);
alert(element.nodeType); // 1
alert(element.nodeName); // div
}
// こんな要素を
// <div class="class1 class2">hoge</div>
// これで取得
var elm = ancestor
.getElementsByClassName('class1');
[elm1, elm2, elm3].sort(function(a, b) {
if (a.compareDocumentPosition(b) &
Node.DOCUMENT_POSITION_PRECEDING)
return 1;
else if (a.compareDocumentPosition(b) &
Node.DOCUMENT_POSITION_FOLLOWING)
return -1;
else return 0;
});
elm.textContent = '<hoge>' // ちゃんと実体参照になっている alert(elm.innerHTML); // <hoge>
document.body
.insertAdjacentElement('afterBegin', elm);
// <body>
// <- ここに挿入される
// :
// :
// </body>
var Klass = function(v) { this._value = v };
Klass.prototype = {
get value() { return this._value },
set value(v) { return this._value = v }
};
Klass.prototype.__defineGetter__(
'value2', function() { return this._value * 2 });
var methodClosure =
Klass.prototye.__lookupSetter__('value');
[4, 2, 3, 1].sort(function(a, b) a - b);
var it = ([i, j]
for each (i in [1, 2, 3])
for each (j in [4, 5, 6]))
alert(it.next()); // 1, 4
alert(it.next()); // 1, 5
var n = ([1, 2, 3].reduce(function(a, b) a + b, 0)
var shift = Array.prototype.shift;
function hoge() {
//...
var callback = shift.apply(arguments);
var self = shfit.apply(arguments);
callback.apply(self, arguments);
}
var array = [1, 2, 3, 4, 5, 6].filter(
function(i) { return i < 3 });
alert(array); // 1, 2
// alert のように実行が停止されるため、
// 以下のように復帰値を取得できる。
var value = shwoModalDialog('http://example.org/dialog.html');
// open されたほう
window.returnValue = 'hoge';
window.close();
Demo
かなりの IE の独自仕様を
HTML5 CSSOM が取り入れ
ようやく各ブラウザが
足並みを揃えだした
あとは IE 8
めっちゃ期待してます＞＜
おしまい！