您的位置：首页 > 大数据 > 云计算

Dart云平台-DartPad

2015-09-09 23:18 597 查看

如果你想体验Dart语言，但又不想在你的电脑上安装Dart开发环境，那你可以使用Google提供的Dart云编译服务——DartPad

DartPad是一个自由、开放的源码服务，帮助开发人员学习Dart语言，进入DartPad的源代码会被发送到谷歌云计算平台上运行，服务器会将源代码进行编译并处理成JavaScript返回给浏览器，编译产生的错误和警告也会返回

DartPad的地址：https://dartpad.dartlang.org/

因为是Google提供的服务，所以你需要***才能打开该网站

打开网站后的界面是这样的

左下角的两个链接分别是Dart官方网站与Dart API参考文档

然后将以下代码分别复制到对应窗口，再点击Run运行

DART部分代码

import 'dart:html';

//声明所有元素对象
InputElement toDoInput;
UListElement toDoList;
ButtonElement deleteAll;

void main() {
  //获取所有元素
  toDoInput = querySelector('#to-do-input');
  toDoList = querySelector("#to-do-list");
  deleteAll = querySelector('#delete-all');
  //为元素对象toDoInput的变化事件添加委托处理
  toDoInput.onChange.listen(addToDoItem);
  //为元素对象deleteAll的点击事件添加处理：清除子元素
  deleteAll.onClick.listen((e) => toDoList.children.clear());
}

//元素对象toDoInput的变化事件处理
void addToDoItem(Event e) {
  //声明一个新元素对象
  var newToDo = new LIElement();
  //设置当前元素的文本为toDoInput的值
  newToDo.text = toDoInput.value;
  //为当前元素的点击事件添加处理：移除
  newToDo.onClick.listen((e) => newToDo.remove());
  //设置元素对象toDoInput的值
  toDoInput.value = '';
  //将当前元素设置为toDoList的子元素
  toDoList.children.add(newToDo);
}

HTML部分代码

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>备忘录</title>
    <link rel="stylesheet" href="todo_with_delete.css">
  </head>
  <body>
    <h2>备忘录</h2>

    <div>
      <input id="to-do-input" type="text" placeholder="需要做什么？">
    </div>

    <div>
      <ul id="to-do-list"></ul>
    </div>

    <button id="delete-all" type="button" style="float: right;">删除全部</button>

    <script type="application/dart" src="todo_with_delete.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

CSS部分代码

body {
  /*设置字体*/
  font-family: 'Open Sans', sans-serif;
  /*设置背景颜色*/
  background-color: WhiteSmoke;
  /*设置外边距*/
  margin: 15px;
}

#to-do-input {
  /*设置字体*/
  font-family: 'Open Sans', sans-serif;
  /*设置字体大小*/
  font-size: 14px;
  /*设置字体粗细*/
  font-weight: normal;
  /*设置内边距：上右下左*/
  padding: 5px 0px 5px 5px;
  /*设置宽度*/
  width: 100%;
  /*设置边框*/
  border: 1px solid Silver;
  /*设置背景颜色*/
  background-color: White;
}

#to-do-list {
  /*设置内边距*/
  padding: 0px;
  /*设置外边距*/
  margin: 0px;
  /*设置在何处放置列表项标记*/
  list-style-position: inside;
}

#to-do-list li {
  /*设置内边距：上右下左*/
  padding: 5px 0px 5px 5px;
  /*设置下边框*/
  border-bottom: 1px dotted Silver;
}

#to-do-list li:hover {
  /*设置颜色*/
  color: red;
  /*设置字体大小*/
  font-size: 18px;
  /*设置光标的类型（形状）*/
  cursor: pointer;
}

#delete-all {
  /*设置背景颜色*/
  background-color: #F8F8F8;
  /*设置边框*/
  border: 1px dotted #ccc;
  /*设置圆角边框*/
  border-radius: 1em;
  /*向右浮动*/
  float: right;
}

#delete-all:hover {
  /*设置背景颜色*/
  background-color: #ddd;
}

执行后右边的界面就会返回代码编译后的结果，如下图

一个简单的Dart项目就这样完成了，相当简单的过程，不需要在你的电脑安装任何东西，Dart官方推荐在学习时使用DartPad，在开发时使用WebStorm

WebStorm相关的传送门：/article/1488842.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航