Contents

Connect Dart & HTML

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

What’s the point?

  • DartPad允许您编写一个没有HTML样板的简单Dart Web应用程序.
  • Dart网络应用程序具有Dart,HTML和(通常)CSS代码.
  • Compile a web app’s Dart code to JavaScript to run the app in any modern browser.
  • 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应用程序的不同方面.

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. 选中右下角的显示Web内容复选框,以便您可以在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

该HTML代码类似于本教程前面各图中的HTML代码,但更为简单.

在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代码.

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

<!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

在迷你应用程序中,选择器#RipVanWinkle是ID选择器,如井号(#)所示; 它匹配具有指定ID的单个唯一元素,即我们现在已经厌倦的RipVanWinkle段落元素. RipVanWinkle是HTML文件中的ID. 它在CSS文件和Dart代码中使用井号(#)进行引用. 在HTML文件中指定类名,但不使用句点(.),并在CSS文件和Dart代码中使用句点(.)进行引用.

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

A declaration specifies an attribute and its value

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

Other resources

What next?

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

by  ICOPY.SITE