Dart - 動的なページの作成(css(display, visibility, opacity, font-size, color, line-height))

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 (プログラミング言語)

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリージャパン、2009年、ISBN978-4-87311-425-5) の12章(動的なページの作成)、練習問第12-2.12-4.をDartで解いてみる。

その他参考書籍

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

練習問第12-2.12-4.

コード

sample.dart

import 'dart:html';

void main(){
  var run = querySelector('#run'),
      clear = querySelector('#clear'),
      pre0 = querySelector('#pre0');
  run.onClick.listen((MouseEvent event){
    var result = window.navigator.userAgent + '\n';;
    Element d0 = querySelector('#d0'),
            visibility_b = querySelector('#visibility_b'),
            visibility_d = querySelector('#visibility_d'),
            display_b = querySelector('#display_b'),
            display_d = querySelector('#display_d'),
            opacity_b = querySelector('#opacity_b'),
            opacity_d = querySelector('#opacity_d');
    d0.style.fontSize = '14pt';
    d0.style.color = 'red';
    d0.style.lineHeight = '16pt';
    visibility_b.onClick.listen((MouseEvent event){
      visibility_d.style.visibility =
          visibility_d.style.visibility == 'hidden' ? 'visible' : 'hidden';
    });
    display_b.onClick.listen((MouseEvent event){
      display_d.style.display =
          display_d.style.display == 'none' ? 'block' : 'none';
    });
    opacity_b.onClick.listen((MouseEvent event){
        opacity_d.style.opacity =
          opacity_d.style.opacity == '0' ? '1' : '0';
    });
    pre0.text = result;
  });
  clear.onClick.listen((MouseEvent event) => pre0.text = '');
}

フォントサイズ14pt、赤色,行の高さ16ptで表示するdivブロックの中のテキスト

visibility

display

opacity