* 전체 링크
Connect Dart & HTML
Write a mini Dart app.
작은 Dart 앱 만들어보기.
To write a Dart web app, you need to have basic understanding of several topics—the DOM tree, nodes, elements, HTML, Dart language and libraries, and Dart Editor.
작은 웹 앱을 작성하기 위해서 당신은 몇개 토픽의 기초적인 이해가 필요합니다.그러한 것들은 Dom 트리, 노드 엘레먼트, html, Dart 언어와 라이브러리 그리고 마지막으로 Dart 에디터들에 대한 이해도가 조금 필요합니다.
The interdependencies are circular, but we have to begin somewhere, so we begin with a simple HTML file, which introduces the DOM tree and nodes. From there, you build a bare bones, stripped-down Dart application that contains just enough code to dynamically put text on the page from the Dart side. Though simple, this example shows you how to connect a Dart app to an HTML page and one way that a Dart app can interact with items on the page. These concepts provide the foundation for more interesting and useful web apps. 이런 기초적인 이해도는 서로 복잡하게 얽혀 있지만 우리는 어딘가에서부터 시작은 해야 합니다. 그래서 우리는,DOM 트리와 노드를 설명하기 위해, 간단한 HTML 을 가지고 시작하겠습니다. 거기에서 부터 당신은 아주 작고 Dart 쪽에서 Html 페이지에 텍스트을 동적으로 뿌려주는 그런 최소한의 기능만을 가진 Dart 앱을 개발합니다. 이 예제가 간단해 보이지만 , 이 예제는 Dart 앱이 HTML 페이지에 어떻게 연결이 되고 Dart 앱이 HTML 페이지에 있는 아이템(태그 같은 것들)과 어떻게 상호작용을 할 수 있는지를 보여줍니다. 이런 개념들은 좀 더 흥미롭고 유용한 웹 앱을 만들수 있는 기초가 됩니다.
About the DOM
DOM에 대해
The Document Object Model (DOM) represents the structure of a web document as a tree of nodes. When an HTML file is loaded into a browser, the browser interprets the HTML and displays the document in a window. The following diagram shows a simple HTML file and the resulting web browser page in Chrome.
문서 구조 모델(DOM)은 노드의 트리 구조를 이용하여 웹 문서의 구조를 나타냅니다.HTML 파일이 브라우저에 로드되어질때, 브라우저는 HTML을 해석하고 윈도우에 HTML 문서를 보여줍니다. 다음에 나오는 그림은 간단한 HTML 소스 파일과 크롬 브라우저 에서 웹 페이지가 어떻게 나오는지를 보여줍니다.
HTML uses tags to describe the document. For example, the simple HTML code above uses the <title> tag for the page title, <h1> for a level-one header, and <p> for a paragraph. Some tags in the HTML code, such as <head> and <body>, are not visible on the web page, but do contribute to the structure of the document.
HTML은 문서를 표현하기 위해 태그를 사용합니다. 예를 들면, 이 간단한 HTML 코드는 페이지의 제목을 나타내주기 위해서 <title>태그를, 1레벨의 헤더를 보여주기 위해 <h1> 태그를, 단락을 보여주기 위해 <p> 태그를 사용하고 있는 것을 보여줍니다 <head와 <body> 같은 HTML 코드의 다른 태그들은 웹 페이지에서 볼 수는 없지만 문서의 구조를 위해서는 필요합니다.
In the DOM, the document object sits at the root of the tree (it has no parent). Different kinds of nodes in the tree represent different kinds of objects in the document. For example, the tree has page elements, text nodes, and attribute nodes. Here is the DOM tree for the simple HTML file above.
DOM에서, 문서 객체는 트리구조의 최상단에 있습니다(다시 말해 부모가 없다는 뜻). 트리의 다른 노드들은 문서안에서 다른 종류의 객체를 나타냅니다. 예를 들면, 그러한 트리는 page 요소, 텍스트 노드, attribute 노드들이 있습니다. 여기에 간단한 HTML DOM 트리 구조가 있습니다.
Notice that some tags, such as the <p> paragraph tag, are represented by multiple nodes. The paragraph itself is an element node. The text within the paragraph is a text node (and in some cases, might be a subtree containing many nodes). And the ID is an attribute node.
이러한 <P> 단락 태그와 같은 일부 태그는, 다수의 노드로 표시됩니다. 단락 자체가 element 노드입니다. 단락 내의 텍스트는 텍스트 노드이다 (어떤 경우에는, 다수의 노드를 포함하는 하위 트리 일수 있음). 그리고 ID는 속성 노드입니다.
Except for the root node, each node in the tree has exactly one parent. Each node can have many children.
부모 노드를 제외하고는, 각각의 노드들은 반드시 하나의 부모만을 가집니다. 각각의 노드는 다수의 자식을 가질 수 있습니다.
An HTML file defines the initial structure of a document. Dart or JavaScript can dynamically modify that document by adding, deleting, and modifying the nodes in the DOM tree. When the DOM is changed, the browser immediately re-renders the window.
HTML 파일은 문서의 초기 구조를 정의 합니다. Dart나 자바스크립트는 동적으로, DOM 트리안에 있는 노드들을 추가하거나, 삭제하거나, 수정하는 등의 작업을 할 수 있습니다. DOM이 바뀔때 , 브라우저는 즉시 그 창을 다시 랜더링 합니다.
The diagram shows a small Dart program that makes a modest change to the DOM by dynamically changing a paragraph’s text. A program could add and delete nodes, or even insert an entire sub-tree of nodes.
이 그림은 동적으로 단락의 텍스트를 변경함으로써 DOM에 적당한 변화를 주는 작은 다트 프로그램을 보여줍니다. 프로그램은 노드를 추가하고 삭제할 수도 있고 심지어 전체 하위 트리를 추가할 수도 있습니다.
Create a new Dart app
새로운 Dart 앱 만들기.
The application you write in this tutorial is a web application. Web applications use code from the browser package to run inside of a browser, so you need to start with the supporting files and packages even for the smallest web app.
이번 튜토리얼에 만들게 될 앱은 웹 앱 입니다. 웹 애플리케이션은 브라우저 내에서 실행하는 브라우저 패키지의 코드를 사용하기 때문에 당신은 이제부터 만들게 될 작은 웹 앱에 대해서 지원되는 파일과 패키지를 사용해서 시작할 필요가 있습니다.
(Dart 에디터에서 제공하는 샘플 코드를 사용해서 웹앱을 만들라는 뜻인듯...)
In Dart Editor, create a new web application like you did in the previous tutorial, Get Started. Name the app mini.
Dart 에디터에서, 이전 튜토리얼에서 처럼 새로운 앱을 만드세요, 이름은 mini.
Edit the HTML file
HTML 파일 편집하기.
When Dart Editor created the application, it created boilerplate HTML code. Double click mini.html to open it. Then replace the code with the following, simplied HTML.
Dart 에디터가 앱을 만들때, 상용구(본본기용) HTML 코드도 같이 만듭니다. mini.html 을 더블 클릭해서 파일을 여세요. 그 다음에 다음에 나오는 간단한 HTML 코드를 넣으세요.
<!DOCTYPE html>
<html>
<head>
<title>A Minimalist App</title>
</head>
<body>
<p id="RipVanWinkle">
RipVanWinkle paragraph.
</p>
<script type="application/dart" src="mini.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
Finish your edits and save the file with File > Save.
편집이 끝나면, File > save를 사용하여 저장하세요.
About the HTML source code
HTML 소스 코드에 대해서
This HTML code is similar to the simple HTML code in the various diagrams earlier in this tutorial. Again, you can see the use of the <head>, <title>, <body>, and <p> tags. And there, in the paragraph tag, is an identifier “RipVanWinkle”. The Dart code you create in the next step uses this ID to get the paragraph element.
이 HTML 코드는 이 튜토리얼의 앞단계에 있는 다양한 그림에서 봐왔던 HTML 코드와 비슷하다. 다시, <head>, <title>, <body> 그리고 <p> 태그를 볼 수 있다. 그리고 단락 태그는 식별자인 "RipVanWinkle”가 있습니다. 다음 스텝에서 만들게 될 Dart 코드에서는 단락 요소(element)에 있는 이 ID를 사용할 것입니다.
Notice the use of the script tag. The source for a script is provided by a client-side file. The HTML code above has two scripts.
script 태그의 사용을 한 번 봐보세요. 스크립트 소스는 클라이언트쪽 파일에 의해 제공됩니다. 위의 HTML 코드는 2개의 스크립트가 있네요.
The first script includes your mini app. The type attribute specifies that the script has the type application/dart, which is a new type created by the Dart team. Currently, only the Dartium build of Chromium supports application/dart. The src attribute provides the URL to the source file of the script. In this case, it is the Dart source file mini.dart, which you provide in the next step. The Dart file should be in the same directory as its host HTML file.
첫번째 스크립트는 당신의 mini 앱에 포함되어 있습니다. type 속성(어트리뷰트)은 스크립트가 Dart 팀에 의해 새롭게 만들어진 application/dart 이라는 것을 명시합니다.현재는 크롬미움의 Dartium 빌드 버전만이 application/dart를 지원합니다.src 속성은 스크립트의 소스파일 URL을 제공합니다. 이 경우에는, 다음 스텝에서 제공될 Dart 소스파일인 mini.dart 파일입니다. Dart 파일은 호스트되는 Html 파일이 있는 같은 디렉토리에 있어야 합니다.
The second script tag is a bootstrap script that takes care of turning on the Dart VM, as well as compatibility with non-Dart browsers.
두번째 script 태그는 Dart를 지원하지 않는 브라우저와의 호환성을 위한 부트스트랩 태그입니다.
Edit Dart source code
Dart 소스코드 편집하기
Open mini.dart and modify the source code to look like this:
mini.dart 를 열고 아래처럼 소스코드를 편집하세요.
import 'dart:html';
void main() {
querySelector('#RipVanWinkle').text = 'Wake up, sleepy head!';
}
About the Dart source code
Dart 소스코드에 대해
Let’s step through the code.
코드를 분석해 봅시다.
Importing libraries
라이브러리 임포트하기.
The import directive imports the specified library, making all of the classes and functions in that library available to your program.
import 지시문은 프로그램에 해당 라이브러리의 클래스와 기능을 모두 사용할 수 있도록 지정된 라이브러리를 가져옵니다.
This program imports Dart’s HTML library, which contains key classes and functions for programming the DOM. Key classes include:
이 프로그램은 DOM을 프로그래밍 할 수 있게 해주는 주요 클래스와 함수들을 가지고 있는 Dart HTML 라이브러리를 가지고 옵니다. 주요 클래스들은 아래를 포함합니다.
Dart class | Description |
Implements a Dart Node. Dart의 Node 를 구현 | |
A subclass of Node, implements a web page element. 웹 페이지 요소를 구현 (input, selector, p, 등등) | |
Another subclass of Node. Implements the document object. 문서 객체를 구현, |
The Dart core library contains another useful class, List, a parameterized class that can specify the type of its members. An instance of Element keeps its list of child Elements in a List<Element>.
Dart 핵심 라이브러리는 또 다른 유용한 클래스인 List가 있습니다. 이 List 클래스는 멤버의 타입을 지정할 수 있습니다. 요소의 인스턴스는 List<ELEMENT>의 자식 Element의 List를 유지합니다.
Using the querySelector() function
querySelector() 함수 사용하기.
This app’s main() function contains a single line of code that is a little like a run-on sentence with multiple things happening one after another. Let’s deconstruct it.
이번 앱의 메인 함수는 여러 일들이 잇달아서 발생하는 한줄의 코드가 있습니다. 한 번 파헤쳐 봅시다.
querySelector() is a top-level function provided by the Dart HTML library that gets an Element object from the DOM.
querySelect()는 ,Dart HTML 라이브러리에서 제공되는, DOM에서 Element 객체를 가지고 올 수 있는 top-level 함수입니다.
The argument to querySelector(), a string, is a CSS selector that identifies the object. Most commonly CSS selectors specify classes, identifiers, or attributes. We’ll look at these in a little more detail later, when we add a CSS file to the mini app. In this case RipVanWinkle is the unique ID for a paragraph element declared in the HTML file and #RipVanWinkle specifies that ID.
querySelector()의 인자는, 문자열임, CSS 셀렉터의 형식입니다. 가장 일반적으로 CSS 셀렉터는 클래스, ID, 어튜리뷰트를 명시하는 것들이 있습니다. 우리는 잠시후에 작은 앱에 CSS 파일을 추가 할때 좀 더 자세하게 이것들에 대해서 볼 것입니다.
Another useful function for getting elements from the DOM is querySelectorAll(), which returns multiple Element objects via a list of elements—List—all of which match the provided selector.
DOM에서 요소를 가지고 올 수 있는 다른 유용한 함수로는 querySelectorAll() 이 있습니다. 이것은 가지고 올려고 하는 형식에 맞는 요소를 리스트 형식에 담아서 리턴합니다.
Setting the text of an Element
요소의 텍스트 세팅하기.
In the DOM, the text of a page element is contained in a child node, specifically, a Text node. In the following diagram, the node containing the string “RipVanWinkle paragraph.” is a text node.
DOM에서, 페이지 요소의 텍스트는 자식 노드안에 있습니다. 특히 텍스트 노드가 그러합니다. 다음의 그림에 있는, "RipVanWinkle paragraph” 문자열을 포함하는 노드가 바로 텍스트 노드입니다.
More complex text, such as text with style changes or embedded links and images, would be represented with a subtree of text nodes and other objects.
스타일이 바뀌거나 링크와 이미지까지 있는 좀 더 복잡한 텍스트는 텍스트 노드와 다른 객체의 서브트리로 나타날 수 있습니다.
In Dart, you can simply use the Element text property, which has a getter that walks the subtree of nodes for you and extracts their text.
Dart 에서는, 노드의 트리구조를 타고 들어가고 그것들을 추출할 수 있는 Element text 프로퍼티를 간단하게 사용할 수 있습니다.
However, if the text node has styles (and thus a subtree), getting text and then setting it immediately is likely to change the DOM, as a result of losing subtree information. Often, as with our RipVanWinkle example, this simplification has no adverse effects.
그러나, 텍스트 노드가 하위 서브 트리까지 스타일이 는 경우에는, 텍스트를 추출하고 즉시 세팅하는 작업은 DOM이 서브 트리의 정보를 잃어버릴 수 있는 가능성이 있습니다. 종종 이 예제 "RipVanWinkle” 같이 간단한 작업 경우에는 부작용이 없습니다.
The assignment operator (=) sets the text of the Element returned by the querySelector() function to the string “Wake up, sleepy head!”.
할당 연산자(=)는 querySelector() 함수에 의해 리턴데 Element의 텍스트를 "Wake up, sleepy head!”로 설정합니다.
This causes the browser to immediately re-render the browser page containing this app, thus dynamically displaying the text on the browser page.
이 작업은 브라우저가 즉시 다시 랜더링을 합니다. 그래서 동적으로 브라우저의 페이지에 바뀐 텍스트가 나타나게 되는 것이지요.
Summary of HTML and Dart connections
HTML과 Dart와의 관계 개념
This diagram summarizes the connections between mini.dart and mini.html.
이 그림은 mini.dart와 mini.html사이의 관계를 요약해서 보여줍니다.
Run the mini web app
mini 웹 앱 실행하기
In Dart Editor, select mini.html and then click the Run button 
Dart 에디터에서, mini.html을 선택하고 실행버튼인
The Dart web app changed the text in the browser window dynamically at runtime. Of course, placing text on a browser page and doing nothing else could be accomplished with straight HTML. This little app only shows you how to make a connection from a Dart app to a browser page.
이 Dart 웹 앱은 실행시점에 동적으로 브라우저에 있는 텍스트를 바꾸었습니다. 확실히, 브라우저 페이지에 있는 텍스트를 바꾸고 다른 아무런 작업을 하지 않는 것은 일반적인 HTML로도 할 수 있습니다. 이 작은 앱은 단지 당신이 Dart 앱과 브라우저 페이지가 어떻게 연결되어 있는지를 보여줄 뿐입니다.
Give the app some style with CSS
Most HTML uses cascading style sheets (CSS) to define styles that control the appearance of page elements. Let’s customize the CSS for the mini app.
대부분의 HTML은 페이지 요소의 모습을 컨트롤 하기 위해서 계단형태의 스타일 시트(CSS)를 사용합니다. mini 앱에서 CSS를 한 번 바꿔봅시다.
In Dart Editor, edit the file named mini.css and replace the contents of the file with the following CSS code:
Dart 에디터에서, mini.css 를 만들고 다음의 CSS 코드를 바꾸어보세요.
#RipVanWinkle {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-top: 20px;
background-color: SlateBlue;
color: Yellow;
}
This defines a style for the page element with the ID RipVanWinkle. To use this style sheet, edit mini.html and add the line shown in bold below:
이것은 ID가 RipVanWinkle인 페이지 요소의 스타일을 정의합니다. 이 스타일 시트을 사용하기 위해서는 아래의 진하게 된 부분을 mini.html 에 추가합니다.
Save your files and run the app again.
파일을 저장하고 앱을 다시 실행시키세ㅇ됴.
Below is the revised mini app, which is slightly more colorful but still neither interactive nor interesting.
다음은 조금 더 화려해지지만 여전히 상호작용도 없고 흥미도 끌수 없는 수정된 mini app 입니다.
About CSS selectors
CSS 셀렉터에 대해
IDs, classes, and other information about elements are established in HTML. Your Dart code can use this information to get elements using a CSS selector—a pattern used to select matching elements in the DOM. CSS selectors allow the CSS, HTML, and Dart code to refer to the same objects. Commonly, a selector specifies an ID, an HTML element type, a class, or an attribute. Selectors can also be nested.
요소들과 관련된 ID, classes 그리고 다른 정보들은 HTML 안에서 설정됩니다. Dart 코드는 CSS 셀렉터를 사용해서 요소들을 얻을 수 있는 방법을 사용할 수 있습니다. CSS 셀렉터라고 하는 것은 DOM안에서 매칭되는 요소들을 선택하기 위해 사용되어지는 패턴입니다. CSS 셀렉터 방식은 CSS, HTML 그리고 Dart 코드가 같은 객체를 참조할수 있습니다. 일반적으로, 셀렉터는 ID, 요소 타입, 클래스 또는 속성들을 지정합니다. 셀렉터들은 또 중첩될 수 있습니다.
CSS selectors are important in Dart programs because you use them with querySelector() and querySelectorAll() to get matching elements from the DOM. Most often Dart programs use ID selectors with querySelector() and class selectors with querySelectorAll().
CSS 셀렉터는 Dart 프로그램에서 중요합니다. 왜냐하면 DOM에서 원하는 요소들을 얻기 위해 querySelector()과 querySelectorAll()을 사용할 수 있기 때문입니다. Dart 프로그램에서 querySelector()을 이용해 ID 셀렉터와 querySelectorAll()을 사용해서 클래스 셀렉터가 가장 자주 쓰입니다.
Here are some examples of CSS selectors:
여기에 몇개의 CSS 셀렉터 샘플이 있습니다.
Selector type | Example | Description |
ID selector | #RipVanWinkle | Matches a single, unique element 유일한 하나만 매칭됨. |
HTML element | p | Matches all paragraphs 모든 단락 태그와 매칭 |
HTML element | h1 | Matches all level-one headers 모든 레벨1 헤더 태그와 매칭 |
Class | .classname | Matches all items with the class classname 클래스 이름이 classname 을 가지고 있는 모든 아이템 매칭 |
Asterisk | * | Matches all elements 모든 요소 매칭 |
Attribute | input[type=”button”] | Matches all button input elements input의 타입이 button인 모든 요소 매칭 |
Tip: As you saw, mini app used a CSS selector, the ID #RipVanWinkle, even when there was no CSS file. You do not need a CSS file for a Dart program. Nor do you need a CSS file to use CSS selectors. CSS selectors are established in the HTML file and used by the Dart program to select matching elements.
팁: 앞에서 본대로, mini 앱은 CSS 파일이 없을때도 ID가 RipVanWinkle인 CSS 셀렉터를 사용했습니다. Dart 프로그램에서는 CSS 파일이 꼭 필요하지는 않습니다. 또한 CSS 셀렉터를 사용하기 위해 CSS 파일도 필요없습니다. CSS 셀렉터는 HTML 파일에 설치되어 있고 찾고자 하는 요소를 선택하기 위해서 Dart 프로그램에 의해 사용되어 집니다.
Let’s look at the CSS code for mini app. The CSS file for the mini app has one CSS rule in it. A CSS rule has two main parts: a selector and a set of declarations.
mini app에서 CSS 코드를 한 번 보자. mini 앱에 있는 CSS 파일은 1개의 CSS 규칙을 가지고 있습니다. CSS 규칙은 셀렉터와 선언부의 집합이라는 2개의 주요 부분으로 나뉘어 집니다.
In 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 (.).
mini 앱에서, #RipVanWinkle 선택자 부분은 해시태그(#)에 의해표현되는 ID 셀렉터 입니다. 이것은 지정된 ID를 가지고 있는 단 하나, 유니크한 요소와 매칭됩니다. 이 예제에선 우리의 피곤한 RipVanWinkle 단란 요소가 되겠지요. RipVanWinkle은 HTML 파일에 있는 ID 입니다. 그것은 해시태그(#)를 이용해서 Dart 코드와 CSS 파일에서 참조할 수 있습니다. 클래스 이름은 HTML 안에서는 점(.) 이 없이 지정되고 CSS 파일이나 Dart 코드에서는 점(.)을 사용하여 참조 할 수 있습니다.
Between the curly brackets of a CSS rule is a list of declarations, each of which ends in a semi-colon (;). Each declaration specifies a property and its value. Together the set of declarations define the style sheet for all matching elements. The style sheet is used to set the appearance of the matching element(s) on the web page.
CSS 규칙에서 중괄호 사이에는 선언부가 됩니다. 선언부안에 선언되어 지는 것들은 세미콜론(;)으로 끝이 납니다. 각각의 선언들은 프로퍼티와 값으로 명시됩니다. 선언부에 있는 모든 세트들은 매칭되는 모든 요소에 스타일이 적용됩니다. 스타일 시트는 웹 페이지의 매칭되는 요소의 모양을 설정하는데 사용됩니다.
The CSS rule for the RipVanWinkle paragraph specifies several properties; for example, it sets the text color to Yellow.
RipVanWinkle단락을 위한 CSS 규칙은 몇 개의 프로퍼티들을 지정합니다. 예를 들어 텍스트의 색깔을 노란색으로 설정합니다.
Other resources
Dart: Up and Running provides thorough coverage of the Dart language, libraries, and tools. If a topic is not covered explicitly here, you can find the information you need there.
Dart Editor, an excerpt from Dart: Up and Running, provides details about using Dart Editor. The excerpt includes, for example, how to use Dart Editor's power features such as autocompletion and refactoring, how to set up different run-time environments, and so on.
What next?
The next tutorial, Add Elements to the DOM, shows you how to dynamically change the HTML page by adding elements to the DOM.
다음 튜토리얼은 DOM에 요소 추가하기 입니다. 다음에서는 당신이 DOM에 요소를 추가함으로서 HTML 페이지가 동적으로 어떻게 바뀌는지를 보여줄 것입니다.
'개발 > dart' 카테고리의 다른 글
| 6. Defined a Custom Element (0) | 2014.03.02 |
|---|---|
| 5. Install Shared Packages (0) | 2014.03.02 |
| 4. Remove DOM Elements (0) | 2014.03.02 |
| 3. Add Elements to the DOM (0) | 2014.03.02 |
| 1. get started (0) | 2014.03.02 |
댓글