如果你想体验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相关的传送门：http://blog.csdn.net/hekaiyou/article/details/46551179
时间： 2024-12-06 05:01:18