2013年11月12日火曜日

開発環境

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリージャパン、2009年、ISBN978-4-87311-425-5) の9章(ブラウザオブジェクトモデル)、練習問第9-1、9-2、9-3、9-4、9-5をDartで解いてみる。

その他参考書籍

練習問第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属性、あるいは要素のインデックスを使用すればいい。

0 コメント:

コメントを投稿