Contents

Connect Dart & HTML

本教程是使用dart:html库进行的基本,底层Web编程系列文章中的第一篇. 如果使用AngularDart之类的Web框架,则其中一些概念可能会有用,但可能根本不需要使用dart:html库.

What’s the point?

  • DartPad允许您编写一个没有HTML样板的简单Dart Web应用程序.
  • Dart网络应用程序具有Dart,HTML和(通常)CSS代码.
  • 将Web应用程序的Dart代码编译为JavaScript,以在任何现代浏览器中运行该应用程序.
  • HTML文件将您的Dart代码托管在浏览器页面中.
  • DOM以树/节点结构为浏览器页面建模.
  • 使用带有ID的querySelector()从DOM中获取元素.
  • CSS选择器是用于在DOM中选择匹配元素的模式.
  • 使用CSS规则为元素设置样式.

要使用Dart编写低级Web应用程序,您需要了解几个主题-DOM树,节点,元素,HTML以及Dart语言和库.

相互依赖是循环的,但是我们必须从某个地方开始,因此我们从一个简单的HTML文件开始,该文件介绍了DOM树和节点. 从那里,您可以构建一个精简的,精简的Dart应用程序,该应用程序仅包含足够的代码以从Dart一侧动态地在页面上放置文本.

尽管简单,但本示例向您展示了如何将Dart应用程序连接到HTML页面以及Dart应用程序可以与页面上的项目进行交互的一种方式. 这些概念为更有趣和有用的Web应用程序奠定了基础.

About the Dart, HTML, and CSS triumvirate

如果您使用过DartPad,那么您已经看到了DART,HTML和CSS标签,可用于编写Web应用程序的代码. 这三种语言分别负责Web应用程序的不同方面.

Language Purpose
Dart 实现Web应用程序的交互性和动态行为
HTML 描述Web应用程序页面的内容(文档中的元素和结构)
CSS 控制页面元素的外观

Dart程序可以响应诸如鼠标单击之类的事件,动态地操纵网页上的元素,并保存信息. 在部署Web应用之前,必须将Dart代码编译为JavaScript代码.

HTML是用于描述网页的语言. HTML使用标记来设置初始页面结构,在页面上放置元素,并嵌入任何脚本以实现页面交互性. HTML设置了初始文档树并指定了元素类型,类和ID,这些元素类型,类和ID允许HTML,CSS和Dart程序引用相同的元素.

CSS代表层叠样式表 ,描述文档中元素的外观. CSS控制格式的许多方面:键入面部,字体大小,颜色,背景颜色,边框,边距和对齐方式,仅举几例.

About the DOM

文档对象模型(DOM)将Web文档的结构表示为节点树. 将HTML文件加载到浏览器中时,浏览器会解释HTML并在窗口中显示文档. 下图显示了一个简单的HTML文件以及在Chrome中生成的Web浏览器页面.

A simple HTML file and its resulting web page

HTML使用标记来描述文档. 例如,上面的简单HTML代码将<title>标记用作页面标题,将<h1>用作一级标题,将<p>用作段落. HTML代码中的某些标记(例如<head>和<body>)在网页上不可见,但确实有助于文档的结构.

在DOM中,文档对象位于树的根(它没有父节点). 树中不同种类的节点代表文档中不同种类的对象. 例如,树具有页面元素,文本节点和属性节点. 这是上面的简单HTML文件的DOM树.

The DOM tree for a simple HTML file

请注意,某些标记(例如<p>段落标记)由多个节点表示. 段落本身是一个元素节点. 段落中的文本是一个文本节点(在某些情况下,可能是包含许多节点的子树). ID是一个属性节点.

除根节点外,树中的每个节点都只有一个父节点. 每个节点可以有许多子级.

HTML文件定义了文档的初始结构. Dart或JavaScript可以通过添加,删除和修改DOM树中的节点来动态修改该文档. 更改DOM后,浏览器会立即重新渲染该窗口.

A Dart program can dynamically change the DOM

该图显示了一个小型Dart程序,该程序通过动态更改段落的文本对DOM进行了适度的更改. 程序可以添加和删除节点,甚至可以插入节点的整个子树.

Create a new Dart app

  1. 转到DartPad.
  2. 单击" 新建键盘"按钮以撤消上次访问DartPad时可能进行的更改.
  3. Click Dart.
  4. 选择HTML (在Dart下 ),以便您可以在DartPad中编辑HTML和CSS.

Edit the HTML source code

  1. 点击HTML,在DartPad的左上角. 视图从Dart代码切换到(不存在)HTML代码.

  2. 添加以下HTML代码:

    <p id="RipVanWinkle">
      RipVanWinkle paragraph.
    </p>
  3. 单击HTML输出,以查看浏览器如何呈现HTML.

About the HTML source code

This HTML code is similar to the HTML code in the various diagrams earlier in this tutorial, but it’s even simpler.

在DartPad中,您只需要真正关心的标签-在这种情况下,为<p>. 您不需要周围的标签,例如<html>和<body>. 因为DartPad知道Dart代码在哪里,所以您不需要<script>标记.

段落标签的标识符为" RipVanWinkle". 您在下一步中创建的Dart代码使用此ID来获取段落元素.

Edit the Dart source code

  1. 点击DART,在DartPad的右上角. 视图从HTML代码切换到Dart代码.

  2. 将Dart代码更改为以下代码:

    import 'dart:html';
    
    void main() {
      querySelector('#RipVanWinkle').text = 'Wake up, sleepy head!';
    }
  3. 单击运行以执行您的代码.

HTML OUTPUT选项卡中的文本更改为"醒来,昏昏欲睡!"

About the Dart source code

让我们逐步介绍Dart代码.

Importing libraries

import指令导入指定的库,使该库中的所有类和函数可用于您的程序.

import 'dart:html';

该程序导入Dart的HTML库,其中包含用于编程DOM的关键类和函数. 关键类别包括:

飞镖类 Description
Node 实现一个DOM节点.
Element Node的子类; 实现网页元素.
Document Node的另一个子类; 实现文档对象.

Dart核心库包含另一个有用的类: List,可以指定其成员类型的参数化类. Element实例将其子元素列表保留在List <Element>中.

Using the querySelector() function

该应用程序的main()函数包含一行代码,有点像一个连续句子,其中发生了很多事情. 让我们解构它.

querySelector()是Dart HTML库提供的顶级函数,该函数从DOM获取Element对象.

querySelector('#RipVanWinkle').text = 'Wake up, sleepy head!';

querySelector()的参数(字符串)是用于标识对象的CSS选择器. 最常见的CSS选择器指定类,标识符或属性. 当我们将CSS文件添加到小型应用程序时,我们将在后面详细介绍这些内容. 在这种情况下,RipVanWinkle是HTML文件中声明的段落元素的唯一ID,而#RipVanWinkle指定该ID.

querySelector('#RipVanWinkle').text = 'Wake up, sleepy head!';

从DOM获取元素的另一个有用函数是querySelectorAll(),它通过元素列表(列表)返回多个Element对象. —全部与提供的选择器匹配.

Setting the text of an Element

在DOM中,页面元素的文本包含在子节点中,特别是在文本节点中. 在下图中,该节点包含字符串" RipVanWinkle段落". 是一个文本节点.

DOM tree for a paragraph element

更复杂的文本(例如具有样式更改的文本或嵌入的链接和图像)将由文本节点和其他对象的子树表示.

在Dart中,您可以简单地使用Element text属性,该属性具有一个getter,可以为您遍历节点的子树并提取其文本.

querySelector('#RipVanWinkle').text = 'Wake up, sleepy head!';

但是,如果文本节点具有样式(并因此具有子树),则由于丢失子树信息,获取文本然后立即对其进行设置很可能会更改DOM. 通常,就像我们的RipVanWinkle示例一样,这种简化没有不利影响.

赋值运算符(=)将querySelector()函数返回的Element的文本设置为字符串" Wake up,sleepy head!".

querySelector('#RipVanWinkle').text = 'Wake up, sleepy head!';

这将导致浏览器立即重新渲染包含此应用的浏览器页面,从而在浏览器页面上动态显示文本.

HTML and Dart connections

Dart Web应用程序在运行时会动态更改浏览器窗口中的文本. 当然,将文本放在浏览器页面上而不执行其他任何操作都可以通过直接HTML来完成. 这个小应用程序仅向您显示如何从Dart应用程序连接到浏览器页面.

在DartPad中,Dart代码和HTML代码之间唯一可见的连接是RipVanWinkle ID.

The RipVanWinkle ID is used by both Dart and HTML

要在DartPad之外运行您的应用,您需要将Dart代码编译为JavaScript. 使用webdev build命令将您的应用编译为可部署的JavaScript. 然后,您需要在HTML和生成的JavaScript之间建立另一个连接:必须在HTML中添加<script>标记,以告诉浏览器在哪里可以找到已编译的Dart代码.

这是此应用程序的完整HTML代码,假设Dart代码位于名为main.dart的文件中:

<!DOCTYPE html>

<html>
  <head>
    <title>A Minimalist App</title>
    <script defer src="main.dart.js"></script>
  </head>
  <body>
    <p id="RipVanWinkle">
      RipVanWinkle paragraph.
    </p>
  </body>
</html>

<script>元素指定已编译Dart代码的位置.

Give the app some style with CSS

大多数HTML使用级联样式表(CSS)定义控制页面元素外观的样式 . 让我们为迷你应用程序自定义CSS.

  1. 点击CSS . 视图从Dart代码切换到(不存在)CSS代码.

  2. 添加以下CSS代码:

    #RipVanWinkle {
      font-size: 20px;
      font-family: 'Open Sans', sans-serif;
      text-align: center;
      margin-top: 20px;
      background-color: SlateBlue;
      color: Yellow;
    }

HTML OUTPUT下的显示将立即更改以反映新样式,这些样式仅适用于ID为RipVanWinkle的页面元素.

About CSS selectors

ID,类和有关元素的其他信息在HTML中建立. 您的Dart代码可以使用此信息通过CSS选择器(一种用于在DOM中选择匹配元素的模式)来获取元素. CSS选择器允许CSS,HTML和Dart代码引用相同的对象. 通常,选择器指定ID,HTML元素类型,类或属性. 选择器也可以嵌套.

CSS选择器在Dart程序中很重要,因为您将它们与querySelector()和querySelectorAll()结合使用,以从DOM中获取匹配的元素. 大多数Dart程序将ID选择器与querySelector()一起使用,将类选择器与querySelectorAll()一起使用.

以下是一些CSS选择器示例:

选择器类型 Example Description
ID选择器 #RipVanWinkle 匹配单个唯一元素
HTML元素 p 匹配所有段落
HTML元素 h1 匹配所有一级​​标题
Class .classname 匹配所有具有类classname的项
Asterisk * 匹配所有元素
Attribute input[type=”button”] 匹配所有按钮输入元素

让我们看一下迷你应用程序的CSS代码. 小型应用程序的CSS文件中包含一个CSS规则. CSS规则有两个主要部分:选择器和一组声明.

The parts of a CSS rule

In the mini app, the selector #RipVanWinkle is an ID selector, as signaled by the hash tag (#); it matches a single, unique element with the specified ID, our now tired RipVanWinkle paragraph element. RipVanWinkle is the ID in the HTML file. It is referred to in the CSS file and in the Dart code using a hash tag(#). Classnames are specified in the HTML file without a period (.) and referred to in the CSS file and in Dart code with a period (.).

CSS规则的大括号之间是一个声明列表,每个声明都以分号(;)结尾. 每个声明都指定一个属性及其值. 这组声明共同定义了所有匹配元素的样式表 . 样式表用于设置匹配元素在网页上的外观.

A declaration specifies an attribute and its value

RipVanWinkle段落的CSS规则指定了几个属性. 例如,它将文本颜色设置为黄色.

Other resources

What next?

下一个教程" 将元素添加到DOM"中 ,向您展示了如何通过向DOM添加元素来动态更改HTML页面.

by  ICOPY.SITE