Dart编程入门指南：打造跨平台应用

需积分: 10 58 浏览量更新于2024-07-17 收藏 4.48MB PDF 举报

"Dart for Absolute Beginners(Apress,2014)" 是一本针对初学者的全面指南，由谷歌Dart开发技术教程编撰而成。本书旨在帮助读者掌握Dart编程语言，一种旨在简化跨平台应用开发的技术，特别强调了其在PC、Android、iOS和Pad等设备上的兼容性。作者通过循序渐进的方式，从基础入门到高级概念，逐一展开讲解。第1章“Getting SetUp”会引导读者安装必要的开发环境和工具，确保读者能够在本地环境中顺利启动Dart编程之旅。章节中会包括配置步骤以及如何设置调试器，以便后续章节的实践操作。第二章“Your First Dart Programs”将带领新手编写首个程序，展示基本语法和结构，让读者了解如何在Dart中定义变量、控制流和执行简单逻辑。这一章节的重点是通过实例让读者熟悉Dart的基本工作原理。第三章至第五章深化编程基础知识，如“Some Programming Fundamentals”介绍数据类型、条件语句、循环等核心概念；“Five Small Programs to Showcase Fundamentals in Dart”则通过一系列小程序练习来巩固理论知识；“Functions”专门探讨函数的定义、参数传递和递归等高级功能。第六章“Data Structures”涵盖了Dart中的数据结构，如列表、集合、映射等，以及如何有效地组织和操作数据。这一部分对于理解Dart如何处理复杂的数据处理任务至关重要。第七章“How Does the Web Work?”揭示了Dart与Web技术的交互，解释了如何通过Dart进行服务器端开发以及与JavaScript的集成，为开发web应用提供框架。第八章“Using Dart to Interact with HTML”详细说明了如何使用Dart构建与HTML的交互式用户界面，这对于前端开发者来说是至关重要的技能。第九章至第十章深入讲解面向对象编程，包括“Hangman”游戏为例演示类和对象的概念，以及“Object-Oriented Programming Fundamentals”和“Object-Oriented Design”，让读者理解面向对象设计原则和实践。第十一章至第十二章扩展到更高级的Dart概念，如“Advanced Dart Concepts”可能涉及模块化、泛型、异步编程等技术，有助于提升编程效率和代码质量。第十三章“Testing Your Work”教授测试和调试策略，确保代码质量和可维护性，这是任何开发项目中不可或缺的一部分。第十四章“Concurrency”讨论多线程和并发编程在Dart中的实现，使读者能处理并行计算和高效利用系统资源。最后一章“Putting It All Together”汇总所学知识，通过一个综合项目来应用所有学到的技巧，让读者有机会实践所学，并对整个开发流程有更深的理解。 “Dart for Absolute Beginners(Apress,2014)”是一本实用的教程，适合那些希望学习Dart编程并进入跨平台应用开发领域的初学者，无论你是软件工程师、前端开发者还是对新技术感兴趣的人士，都能从中获益匪浅。

CHAPTER 2 ■ YOUR FIRST DART PROGRAMS

Your First HTML Document

Open the file helloworldfancy.html by double-clicking it in the “Files” pane (it’s within the “web” folder within

your project). Dart Editor once again may have provided you with a default implementation. Change it to look like

Listing 2-2 (if it’s blank, enter the following):

Listing 2-2. helloworldfancy.html

<!DOCTYPE html>

<html>

<head>

<title>Hello World - Fancy Example</title>

</head>

<body>

<h1>Hello, <span id="name"></span></h1>

</body>

</html>

Let’s go over this HTML line by line.

<!DOCTYPE html>

Indicates that this is an HTML document.

<html>

The <html> tag indicates the start of the HTML proper.

<head>

The <head> tag is the start of the “header” section of the document. This is an area where document setup

takes place.

This line says that this document uses the universal character encoding “UTF-8.” Don’t worry about it for now!

<title>Hello World - Fancy Example</title>

<title> defines the title of the document, which will appear in the web browser at the top of the window and as

the title of any bookmarks made of the page. </title> is our first closing tag. It is the space between the opening tag

and the closing tag that makes up the content of our tag. Therefore, whatever is between <title> and </title> will

appear at the top of the browser window.

www.it-ebooks.info

CHAPTER 2 ■ YOUR FIRST DART PROGRAMS

This line says that this document uses a cascading style sheet called helloworldfancy.css. Cascading style

sheets are used to organize the “look” of a web page. They define things like fonts, borders, colors, and the size of

content areas. You will notice that our link tag has two pieces of information, called rel and href. These are known

as attributes. You do not have to understand these specific attributes at this time. You will learn various attributes and

what they are used for as you learn HTML.

</head>

<body>

These lines represent the end of the header section and the beginning of the body section, respectively. The body

is where the majority of content of an HTML document is located.

<h1>Hello, <span id="name"></span></h1>

<h1> is a headline tag. It is the place for a large (as in font size, not area) block of text. <span> is a generic tag

used to organize a piece of inline content. You will see spans all over modern HTML. Our goal is to fill the span here

programmatically from Dart. This <span> tag has an attribute called id. id is a way of labeling a tag. It is especially

useful for allowing us to later reference this <span> tag from our Dart program when we need to manipulate it.

The first <input> tag creates a text box where you can enter your name. The second <input> tag creates a button

you can click. It is the type attribute that causes one <input> tag to represent a text box, while the other represents a

button. The value attribute of the latter tag specifies what the button should say, as in what text should appear within

the button.

These <script> tags tell the web browser to import and execute the Dart program that we are about to write.

The second <script> tag is for compatibility with browsers that do not have a Dart virtual machine (at the time of

writing, this is all browsers except Dartium, which comes with Dart Editor), so that they can execute the JavaScript

version of the program.

</body>

</html>

The last two closing tags indicate the ends of the body and html sections, respectively.

Wow, that was a lot of explaining for a little HTML document! In the future, we will not go over every HTML

document in such great detail. As long as you start to understand the idea of tags and attributes, you should be able

to follow along for the rest of the book. If you ever want to research specific tags or attributes, check out the HTML

resources in Appendix D.

Learning HTML will not make you a better programmer, but it will make you capable of producing nice-looking

web sites. HTML is used for displaying content—it is not used for manipulating content. There is a clear division

between what can be done with HTML and what can be done with a web programming language like Dart. The latter

goes far beyond display and into the realm of interactivity, computation, and intelligent responses to input. It was

common in the ’90s for people to confuse web designers (who knew HTML) with programmers. Don’t make that

mistake in the 21st century!

www.it-ebooks.info

CHAPTER 2 ■ YOUR FIRST DART PROGRAMS

Hello World Fancy in Dart

Our Dart program is actually much shorter than our HTML. Change helloworldfancy.dart to look like Listing 2-3.

Listing 2-3. helloworldfancy.dart

import 'dart:html';

void main() {

querySelector("#button").onClick.listen(sayHello);

}

void sayHello(MouseEvent event) {

querySelector("#name").text = (querySelector("#name_box") as InputElement).value;

(querySelector("#name_box") as InputElement).value = "";

}

import 'dart:html';

We will be using Dart’s built-in HTML library

for interacting with our HTML document from our Dart code.

import is used to include a package. A package can be thought of as a bundle of code that we want to access.

void main() {

querySelector("#button").onClick.listen(sayHello);

}

Our main function is composed of one line, which is one statement. The first part of this line,

querySelector("#button"), looks for the HTML element with the id attribute of “button.” Go back and look at our

HTML document. You will find there that the HTML attribute id is being used to define which element is the button.

The next part of the line, .onClick, says, “from the element with the id of ‘button’ that we have found, access its

property for setting what to do when it is clicked.” Notice that a dot is used as an accessor. .listen(sayHello) finally

says that when a click on this button occurs, the function sayHello() should be called. All statements in Dart end

with a semicolon. In short, this line says “when the HTML element with the id of ‘button’ is clicked, call the function

sayHello().”

void sayHello(MouseEvent event) {

This line defines the beginning of the sayHello() function. void means that this function returns nothing. The

function sayHello() takes one argument, a MouseEvent named event. This parameter

is automatically populated by

Dart when the user clicks our button. We could access this parameter to find out more about the click that occurred,

but that is unnecessary in our little program.

querySelector("#name").text = (querySelector("#name_box") as InputElement).value;

querySelector("#name").text is a way of saying “find the HTML element with the id of ‘name’ and access

its text property.” The text property is as you would expect—the actual text that is displayed on the screen for this

element. = is an assignment operator. It is used to set values. In this case we are trying to set the text of the HTML

A piece of software that does not explicitly interact with the user but rather is accessed via APIs by other developers to add

functionality to their programs. In Dart, libraries are provided via “packages.”

A variable that represents an argument provided to a function when it is called.

www.it-ebooks.info

CHAPTER 2 ■ YOUR FIRST DART PROGRAMS

element with the id of “name.” The left side of an assignment operator is always what we are assigning to, and the

right side is what we are assigning from. (querySelector("#name_box") as InputElement) is a way of saying “find

the HTML element with the id of ‘name_box’ and represent it as an InputElement.” An InputElement is a special type

of HTML element that receives input from the user. In this case, as defined in our HTML document, our “name_box”

receives text input from the user. .value accesses the value of the user’s input. This is ultimately what is assigned back

to the text of our “name” element. In short, this line says “assign the value of the HTML input element with the id of

‘name_box’ to the text property of the HTML element with the id of ‘name’.”

(querySelector("#name_box") as InputElement).value = "";

By reading over again the description of the previous line, you should be able to understand this one. In short,

“Find the HTML element with the id of ‘name_box’. Represent it as an InputElement. Set its value to be blank.” Earlier,

we learned that double quotes are used to define a string literal. Two double quotes next to each other with nothing

between them represent an empty string, a blank if you will. The goal here is to reset the text box to be blank when the

user clicks the button.

}

The last closing bracket is where the function sayHello() ends. It is also the end of our program.

For only three lines of real “meat,” our program may seem pretty complicated. This is both a testament to how

compact yet expressive the Dart programming language can be and how early we are on our journey of learning Dart.

You should now try running the program. You will notice that it automatically loads in Dartium, the Chrome-

based web browser with a built-in virtual machine for the Dart language. Play around with the result. Try entering a

name, clicking the button, erasing the name, and then clicking the button again. Why does it erase the name that was

previously displayed?

Input and Output

While seemingly obvious concepts, understanding input and output (sometimes abbreviated to I/O or IO) is

fundamental to understanding how to write a good program. In short, input is information that the computer takes in

for processing, and output is information that the computer delivers to the user.

An input device is a tool that helps the user deliver input to the computer. The input devices we’ll be using in this

book will primarily be the keyboard and the mouse. Other input devices you may be familiar with include a touch

screen, Wacom tablet, microphone, and camera. An output device does the opposite. The main output device we will

be using is the monitor (or “screen” to be more generic), but another you are surely familiar with is the printer.

When we write command-line applications with Dart, only the keyboard is used as an input device and our only

output is textual in nature. Our first HelloWorld program was such a command-line program and didn’t even take

keyboard input—it took no input at all. As we saw, print() is used in a command-line application to output text to the

user. Hello World Fancy was a web-based program with a graphical user interface

(GUI). It took input via a text box

and a button (yes, even a click of the mouse is a type of input) and delivered textual output on a web page. Did you

ever think of your headphones as an output device? You should, because they are one.

As our programs get more advanced, it will be important to think about the best ways to take input from the user

and the best ways to present output to the user. The makers of operating systems (such as Apple and Microsoft) have

guidelines about how to design user interfaces for developers of programs that run on their platforms. On the Web, it

is more of a Wild West type of atmosphere. This accounts for why some web companies spend as much on designers

as they do on developers. The entire area of input/output with regard to user interface design falls under an academic

discipline known as Human-Computer Interaction.

As opposed to a command-line interface, a graphical user interface utilizes graphical elements, such as pictures, text boxes,

buttons, and menus, for human-computer interaction. It is the main interface for interacting with computers running OS X

and Windows.

www.it-ebooks.info

CHAPTER 2 ■ YOUR FIRST DART PROGRAMS

The Learning Curve

It would not be unreasonable for Hello World Fancy to have looked very intimidating to you. The goal in this chapter

is to dive into some code that “does something” to get your feet wet, even if that means you do not understand all of it.

However, the situation is not supposed to be analogous to throwing a child into a pool and telling him to “sink or swim.”

A better analogy would be giving a culinary student a piece of cake to taste before he learns all of its ingredients.

Learning how to program is like learning to speak a new language. Luckily, programming languages have much

smaller vocabularies (typically, less than 100 keywords) than human spoken languages. Learning the keywords is not

the end of the learning process, though. The other side of the coin is learning a new way of thinking.

Programming requires thinking in abstract terms. In programming, values and actions are represented by

abstract entities. A common misconception about programming is that it requires mathematical sophistication. When

learning basic programming, the ability to think abstractly is much more helpful than any knowledge of advanced

mathematics.

Since the number of actual keywords is limited, you do not have to possess a great memory either (plus you can

always look something up in this book or online). There is really just not that much to memorize. Let the computer’s

memory be the only one you worry about. That’s why reference materials were invented.

If memorization or math skills will not help you learn, then what will? How can you improve on those abstract

thinking skills? The number-one way to become a better programmer is to program. It’s the quintessential discipline

where “practice makes perfect.” You need a resource like this book to have the central concepts explained to you and

ease the initially steep learning curve. But more than anything, people who become good programmers do a lot of

programming. Don’t just do the programs in this book. Come up with some programs to do on your own as you learn

Dart. Ultimately, solving problems on your own will be both more rewarding and more educational than reading

anyone else’s code. The exercises at the end of each chapter should give you some ideas and starting points.

Summary

In this chapter, you saw your first two Dart programs. Although both were relatively simple, Hello World Fancy

incorporated HTML, user input, and events. Despite being just eight lines of code, it could seem intimidating to a

brand-new programmer. Programming has a relatively steep learning curve. The goal of the rest of this book is to ease

the incline of that curve.

eXerCISeS

1. Turn our Hello World Fancy program into a Mad Lib. You will have to add more text boxes,

buttons, and <span> tags to the HTML file. You will also have to modify the Dart source.

2. Try creating a web site about a topic of your choice in pure HTML. You can find more

information on all of the different tags in the resources in Appendix D.

3. Browse the HTML source of some of your favorite web sites. Go to them in your web browser,

and then in one of the menus, there should be an option such as “Show Page Source.”

You might not understand most of it, but see what elements correlate with things you see

on the page.

4. The first web site ever is still available! It’s straight out of the early 1990s. You can find it at

http://info.cern.ch/hypertext/WWW/TheProject.html. Go to that address in your web

browser and in the menus, find an option to “Show Page Source,” as in Exercise 3. It’s a lot

simpler, right? That site was created in 1993. It still renders fine in the latest web browser. Do

the tags look familiar? HTML hasn’t changed that much in two decades.

www.it-ebooks.info

剩余319页未读，继续阅读

laiqiuqiu

粉丝: 2
资源: 11

Dart编程入门指南：打造跨平台应用

Dart-for-Absolute-Beginners:适用于绝对初学者的Apress Book Dart的源代码-ab source code

Dart for Absolute Beginners(Apress,2014).7z

dart-for-absolute-begs:David Kopec的“ Dart for Absolute Beginners”源代码-ab source code

Dart for Hipsters

Flutter-for-Beginners:Packt发行的Flutter for Beginners

Apress.Web.Programming.with.Dart.2014

Dart 1 for Everyone(Pragmatic,2014)

Mastering Dart(PACKT,2014)

Flutter for Beginners

flutter_gradients:精选的Dart for Flutter中令人敬畏的渐变

最新资源