Dart - ページの部品をかき集める(CSSとDOMによるスタイルの変更(className属性))

Dart: Up and Running
(O'Reilly Media)
Kathy Walrath Seth Ladd (著)
[Kindle版]
このブログでの感想

開発環境

• OS X Mavericks - Apple (OS)
• Dart Editor (開発環境)
• Dartium | Dart/ Structured web apps (ブラウザ, Dart VM 用 (Chromium with the Dart VM))
• Safari (ブラウザ, JavaScript 用)
• Dart (プログラミング言語)

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福 剛 (翻訳)、オライリージャパン)の8章(ページの部品をかき集める)、自分で考えてみよう(p.373)をDartで考えてみる。

その他参考書籍

• What is Dart? [Kindle版] (O'Reilly Media) Kathy Walrath Seth Ladd (著) このブログでの感想

自分で考えてみよう(p.373)

コード

sample.dart

import 'dart:html';

void main() {
  int i = 0;
  int j = 0;
  int k = 0;
  decision1.onClick.listen((MouseEvent event) {
    replaceNodeText('scenetext', 'シーン説明' + ((){
      i += 1;
      return '$i';
    })());
    replaceNodeText('decision1', '決定1: ' + ((){
      j += 1;
      return '$j';
    })());
  });
  decision2.onClick.listen((MouseEvent event) {
    replaceNodeText('scenetext', 'シーン説明' + ((){
      i += 1;
      return '$i';
    })());
    replaceNodeText('decision2', '決定2: ' + ((){
      k += 1;
      return '$k';
    })());
  });
  int n = 0;
  decisions.forEach((SpanElement span){
    n += 1;
    span
        ..onMouseOver.listen((MouseEvent event) =>
            span.className = 'decisionhover')
        ..onMouseOut.listen((MouseEvent event ) =>
          span.className = 'decision');
  });
}

SpanElement decision1 = querySelector('#decision1');
SpanElement decision2 = querySelector('#decision2');
List<SpanElement> decisions = [decision1, decision2];

void replaceNodeText(String id, String new_text) {
  Node node = querySelector('#$id');
  Text text_node = new Text(new_text);
  while (!node.childNodes.isEmpty) {
    node.childNodes.first.remove();
  }
  node.append(text_node);
}

シーン説明

決定1 決定2