Dart - async library(Timer class, Timer.periodic, Duration (setIntervalの代わり))

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) の9章(ブラウザオブジェクトモデル)、練習問第9-1、9-2、9-3、9-4、9-5をDartで解いてみる。

その他参考書籍

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

練習問第9-1、9-2、9-3、9-4、9-5

コード

sample.dart

import 'dart:html';
import 'dart:async';

void main(){
  var run = querySelector('#run'),
      clear = querySelector('#clear'),
      pre0 = querySelector('#pre0'),
      div = querySelector('#d0'),
      img = querySelector('#img0'),
      your_name = querySelector('#your_name'),
      url = 'http://sitekamimura.blogspot.com',
      title = '9-4.',
      width = 200,
      height = 200,
      toolbar = 'no',
      status = 'no',
      option = 'width=$width, height=$height, toolbar=$toolbar, status=' +
        status;
  run.onClick.listen((MouseEvent event){
    var name = your_name.value;
    if (name == null || name == ''){
      name = '匿名';
    }
    var result = '9-1.\nこんにちは、${name}さん!\n';
    result += '9.2\n';
    result += window.navigator.cookieEnabled ?
        'クッキーが利用可能に設定されています。\n' :
          'ブラウザの設定でクッキーが利用不可に設定されています。\n';
    var input = new Element.tag('input');
    var br = new Element.tag('br');
    input
      ..setAttribute('type', 'button')
      ..setAttribute('value', '開始');
    var ms = const Duration(milliseconds: 1);
    var duration = 5000;
    Timer timer;
    var n = 0;
    input.onClick.listen((MouseEvent event){
      if (input.value == '開始'){
        timer = new Timer.periodic(ms * duration, (Timer t){
            img.setAttribute('src', nextPic());
        });
        input.value = '停止';
      } else {
        timer.cancel();
        input.value = '開始';
      }
    });
    window.open(url, title, option);
    result +=  '9-4. \nブラウザでポップアップウィンドウをブロックするように設定してあったら' +
        'カスタムウィンドウは開かないかも。\n';
    div.insertBefore(input, img);
    div.insertBefore(br, img);
    pre0.text = result;
  });
  clear.onClick.listen((MouseEvent event) => pre0.text = '');
}

var pics = ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig3-hf9-xCTgWQSLPXZYrDczd9-MZtu_hyB1mO9avP-plyDVB1YQl3T0BQF7bSfReTvDEwF80m5W9U91upZcNJ5n4F_Crh4RsbjgKpAYLJ8lDF-93QqYhJ1EKUCiFiyicWMfS5nz99veg2/w650-h566-no/data-path2.png',
            'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyW7fJgAhFCbyHwlbkWEbZmizGLMRKUEIXBfzzWWdkYnZ00FevhmE8Wh_Wv4Lcu65yzJluLj2FbxEJbyrQrFKZRxLhYD-sgvymBv0Kzu3hrCM4KRYgYj39soAwDFkICwhswGEgznOrDnr-/w650-h575-no/data-path1.png',
            'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4b2BDAQTeWp8co-GMhGDPmE6NhOOImJl2KSDJ6kniS_Z3M-T25fsk6ulkU2VqBuxWOvrm9U5O-tYuF7HKYN7vL7w683oAajTKALME2HvKaE26DZT3ZDV9BzrHkx8BnIkvilXOJQizr0Jf/w650-h452-no/data-path2.png',
            'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLeZfmDqOAw7rauiVAm1jtLdl_9h2kmKv9G_nm6Wqkm4dT2uzVWJos6N1F3zdPRiIVaNL9Fss_3UN2dDRxXEFqVybVHXWWxCvJHlZXyHFmbeGcxnQTvYUMeokY7At22-G7tUsq4HhycAf/w650-h511-no/data-path1.png',
            'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAECDHtAcS2NTCSN-7Gae2Pz0z-CxXNlMqdy41PfJ8YR5Ve81ZmwtY7qDaarufDNWPT9sR0jZ4rvZMVbbAvphYHXcrSYuOGhQDeyXqTL775iA4HzoDW4_Q_Qk41mpIPXvK_DdOUI6DYjZ/w338-h519-no/controller+diagrams.png'];
int i = 0;
String nextPic(){
  var pic = pics[i];
  i += 1;
  if (i >= pics.length){
    i = 0;
  }
  return pic;
}

名前:

9-3. スライドショー

9-5. form要素にアクセスするには、id属性やclassName属性、あるいは要素のインデックスを使用すればいい。