Dart - ブラウザを調べる(clientHeight)

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 (著), 豊福剛 (翻訳)、オライリージャパン)の3章(ブラウザを調べる)、自分で考えてみよう(p.103)をDartで解いてみる。

その他参考書籍

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

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

コード

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>sample</title>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body>
  <div id="smile_div">
    <img id="smile_img"
      src="http://farm8.staticflickr.com/7455/12009424956_d02b583696_o.png"
      alt="smile" />
  </div>
  <script type="application/dart" src="sample4.dart"></script>
  <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
  <script src="../packages/browser/dart.js"></script>
</body>
</html>

sample.css

#smile_div{
    margin-top: 100px;
    text-align: center;
}
#smile_img{
    cursor:pointer;
}

sample.dart

import 'dart:html';
import 'dart:js' as js;
import 'dart:async' as async;

void main(){
  smile_img.onClick.listen((MouseEvent ) => touchSmile());
  resizeSmile();
  greetUser();
}

ImageElement smile_img = querySelector('#smile_img');
BodyElement body = querySelector('body');
String user_name = '';

void greetUser() => window.alert('こんにちは、私は SMILE です。');
void touchSmile(){
  if(user_name != ''){
    window.alert('$user_nameさん、声をかけてくれてありがとう。');
  } else {
    user_name = js.context.callMethod('prompt', ['あなたのお名前は？']);
    if(user_name != ''){
     window.alert('はじめまして、$user_nameさん。');
     smile_img.src = 'http://farm4.staticflickr.com/3799/12008611555_9737b8ac4b_o.png';
    }
    var t = new async.Timer(new Duration(minutes:5),
          () => smile_img.src =
      'http://farm8.staticflickr.com/7455/12009424956_d02b583696_o.png');
  }
}

void resizeSmile(){
  smile_img.style.height = '${(body.clientHeight - 100) * 0.9}px';
}

完成ページ

Kamimura's blog

2014年1月22日水曜日

Dart - ブラウザを調べる(clientHeight)

0 コメント:

コメントを投稿