Dart - インタラクティブなウェブ(js library(JsObject class, callMethod method(ユーザーの名前を受け取る関数(prompt))))

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 (著), 豊福 剛 (翻訳)、オライリージャパン)の1章(インタラクティブなウェブ)、JavaScriptマグネット(p.25)をDartで解いてみる。

その他参考書籍

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

JavaScriptマグネット(p.25)

コード

sample.dart

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

int main()
{
  // stylesheet
  smile_img.style.cursor = 'pointer';
  var smile_div_style = smile_div.style;
  smile_div_style.marginTop = '100px';
  smile_div_style.textAlign = 'center';

  window.alert('こんにちは。私は SMILEです。');
  smile_img.onClick.listen((MouseEvent event) => touchSmile());
}

DivElement smile_div = querySelector('#smile_div');
ImageElement smile_img = querySelector('#smile_img');

void touchSmile(){
  var 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';
  }
}

sample.html

  <div id="smile_div">
    <img id="smile_img"
      src="http://farm8.staticflickr.com/7455/12009424956_d02b583696_o.png"
      alt="smile"/>
  </div>