零基础入门：Dart编程打造 web 应用全指南

2星需积分: 10 32 浏览量更新于2024-07-22 收藏 5.05MB PDF 举报

"Dart for Absolute Beginners" 是一本面向编程新手的教程，由Apress在2014年出版，旨在帮助没有任何编程背景的人学习如何创建自己的网络应用，并掌握软件开发的基本原理，特别是使用谷歌开发的创新语言Dart。这本书适合业余爱好者和专业人士，不仅教授Dart语言本身，还涵盖了Web技术的基础。 Dart作为一种新兴语言，被Google寄予厚望，它的优势在于提升Web应用的性能。与JavaScript相比，Dart提供了更好的速度、程序结构强制执行和软件重用能力。更重要的是，Dart代码可以自动转换为JavaScript，确保其在所有网页浏览器上兼容运行，这使得它在客户端Web开发领域具有竞争优势。作为一门新的起点，Dart没有过去几十年Web开发中的历史遗留问题。本书分为多个章节，循序渐进地引导读者进入Dart的世界。第一章介绍如何设置环境；第二章至第四章通过实例展示基础语法和编程概念；第五章深入探讨函数的使用；第六章和第七章讲解数据结构和Web工作原理；第八章介绍如何用Dart与HTML交互；第九章则是一个实际项目——猜字游戏，展示了如何运用所学知识。后续章节包括面向对象编程（OOP）基础、设计原则、高级Dart概念、测试技术、并发编程以及开发者工具的使用。最后一章将所有知识点整合，通过一个完整的项目来综合应用所学内容，帮助读者将理论付诸实践。 "Dart for Absolute Beginners"是一本实用的指南，对于初学者来说，它不仅提供了Dart语言的基础教育，还涵盖了Web开发的关键技能，有助于读者建立坚实的编程基础，并为进一步深入学习铺平道路。通过本书，读者不仅能掌握Dart，还能了解现代Web开发的最佳实践。

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页未读，继续阅读

vanridin

粉丝: 108
资源: 1187

零基础入门：Dart编程打造 web 应用全指南

UWP for absolute beginners

英文原版-Absolute Beginners Guide to Computing 1st Edition

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)

最新资源