OLD | NEW |
1 --- | 1 --- |
2 layout: homepage | 2 layout: homepage |
3 googleapi: true | 3 googleapi: true |
4 js: | 4 js: |
5 - url: /js/display-news.js | 5 - url: /js/display-news.js |
6 - url: /js/os-switcher.js | 6 - url: /js/os-switcher.js |
7 defer: true | 7 defer: true |
8 - url: /js/editor-downloads-analytics.js | 8 - url: /js/editor-downloads-analytics.js |
9 defer: true | 9 defer: true |
10 - url: /js/front-page-analytics.js | 10 - url: /js/front-page-analytics.js |
(...skipping 26 matching lines...) Expand all Loading... |
37 <div class="row"> | 37 <div class="row"> |
38 <div class="col-md-10 col-md-offset-1"> | 38 <div class="col-md-10 col-md-offset-1"> |
39 <div class="row"> | 39 <div class="row"> |
40 <div class="col-md-4"> | 40 <div class="col-md-4"> |
41 <h2>See Dart</h2> | 41 <h2>See Dart</h2> |
42 <p class="timer"><i class="sprite-icon-timer"></i>About 5 minute
s</p> | 42 <p class="timer"><i class="sprite-icon-timer"></i>About 5 minute
s</p> |
43 <p>Dart is class based and object oriented, without being dogmat
ic.</p> | 43 <p>Dart is class based and object oriented, without being dogmat
ic.</p> |
44 <a id="see-code" href="#code"><i class="sprite-icon-triangle"></
i>See code</a> | 44 <a id="see-code" href="#code"><i class="sprite-icon-triangle"></
i>See code</a> |
45 </div> | 45 </div> |
46 <div class="col-md-4"> | 46 <div class="col-md-4"> |
47 <h2>Try Dart</h2> | 47 <h2>Write Dart</h2> |
48 <p class="timer"><i class="sprite-icon-timer"></i>About 1 hour</
p> | 48 <p class="timer"><i class="sprite-icon-timer"></i>About 1 hour</
p> |
49 <p>Write a Dart web app, even if you've never written | 49 <p>Follow this code lab to create a Dart web app, even if you've
never written |
50 a web app before. </p> | 50 a web app before. </p> |
51 <a href="/codelabs/darrrt/"><i class="sprite-icon-triangle"></i>
Write code</a> | 51 <a href="/codelabs/darrrt/"><i class="sprite-icon-triangle"></i>
Write code</a> |
52 </div> | 52 </div> |
53 <div class="col-md-4"> | 53 <div class="col-md-4"> |
54 <h2>Dive deep</h2> | 54 <h2>Dive deep</h2> |
55 <p class="timer"><i class="sprite-icon-timer"></i>About 1 day</p
> | 55 <p class="timer"><i class="sprite-icon-timer"></i>About 1 day</p
> |
56 <p>Dart has lots of <a href="#tools">tools</a>, | 56 <p>Dart has lots of <a href="#tools">tools</a>, |
57 <a href="#libraries">libraries</a>, and documentation, | 57 <a href="#libraries">libraries</a>, and documentation, |
58 plus a developer community.</p> | 58 plus a developer community.</p> |
59 <a href="/docs/"><i class="sprite-icon-triangle"></i>Learn more<
/a> | 59 <a href="/docs/"><i class="sprite-icon-triangle"></i>Learn more<
/a> |
(...skipping 25 matching lines...) Expand all Loading... |
85 </ol> | 85 </ol> |
86 <!-- Wrapper for slides --> | 86 <!-- Wrapper for slides --> |
87 <div class="carousel-inner"> | 87 <div class="carousel-inner"> |
88 <div class="item active"> | 88 <div class="item active"> |
89 <p>You can probably already read and even write Dart code. <a
href="/samples/">See more samples.</a> </p> | 89 <p>You can probably already read and even write Dart code. <a
href="/samples/">See more samples.</a> </p> |
90 <div class="code-hldr"> | 90 <div class="code-hldr"> |
91 <pre class="prettyprint lang-dart"> | 91 <pre class="prettyprint lang-dart"> |
92 import 'dart:math' show Random; // Import a class from a library. | 92 import 'dart:math' show Random; // Import a class from a library. |
93 | 93 |
94 void main() { // This is where the app starts executing
. | 94 void main() { // This is where the app starts executing
. |
95 print(new Die(<a href="#" class="dart-popover" data-toggle="popover" title="Na
med parameters" data-html="true" data-trigger="hover focus" data-content="Set th
e value of a named optional parameter. In this case, set the number of sides for
a new Die object to 12.">n:12</a>).roll()); // Print a new object's valu
e. Chain method calls. | 95 print(new Die(<a href="#" class="dart-popover" data-toggle="popover" title="Na
med parameters" data-html="true" data-trigger="hover focus" data-content="Set th
e value of a named optional parameter. In this case, set the number of sides for
a new Die object to 12.">n: 12</a>).roll()); // Print a new object's valu
e. Chain method calls. |
96 } | 96 } |
97 | 97 |
98 class Die { // Define a class. | 98 class Die { // Define a class. |
99 static Random shaker = new Random(); // Define a class variable. | 99 static Random shaker = new Random(); // Define a class variable. |
100 int sides, value; // Define instance variables. | 100 int sides, value; // Define instance variables. |
101 | 101 |
102 String toString() => '<a href="#" class="dart-popover" data-toggle="popover" t
itle="String interpolation" data-html="true" data-trigger="hover focus" data-con
tent="Use $identifier to insert the value of an identifier (in this case, the in
teger value of 'value') into a string.">$value</a>'; // Define a method usi
ng shorthand syntax. | 102 String toString() => '<a href="#" class="dart-popover" data-toggle="popover" t
itle="String interpolation" data-html="true" data-trigger="hover focus" data-con
tent="Use $identifier to insert the value of an identifier (in this case, the in
teger value of 'value') into a string.">$value</a>'; // Define a method usi
ng shorthand syntax. |
103 | 103 |
104 Die(<a href="#" class="dart-popover" data-toggle="popover" title="Optional nam
ed parameters" data-html="true" data-trigger="hover focus" data-content="Paramet
ers within curly brackets are optional. Set them by name when you call the funct
ion, method or, in this case, constructor. Here, the default value of 'n' is set
to 6.">{int n: 6}</a>) { // Define a constructor. | 104 Die(<a href="#" class="dart-popover" data-toggle="popover" title="Optional nam
ed parameters" data-html="true" data-trigger="hover focus" data-content="Paramet
ers within curly brackets are optional. Set them by name when you call the funct
ion, method or, in this case, constructor. Here, the default value of 'n' is set
to 6.">{int n: 6}</a>) { // Define a constructor. |
105 if (4 <= n && n <= 20) { | 105 if (4 <= n && n <= 20) { |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
137 class Ellipse { | 137 class Ellipse { |
138 num minorAxis, majorAxis; | 138 num minorAxis, majorAxis; |
139 // Syntactic sugar to set members before the constructor body runs. | 139 // Syntactic sugar to set members before the constructor body runs. |
140 Ellipse(this.minorAxis, this.majorAxis); | 140 Ellipse(this.minorAxis, this.majorAxis); |
141 } | 141 } |
142 </pre> | 142 </pre> |
143 </div> | 143 </div> |
144 </div> | 144 </div> |
145 <div class="item"> | 145 <div class="item"> |
146 <p>Add types to your code to help people and tools. | 146 <p>Add types to your code to help people and tools. |
147 Or don’t. You can always go dynamic.</p> | 147 Or don’t. Dart is truly dynamic.</p> |
148 <div class="code-hldr"> | 148 <div class="code-hldr"> |
149 <div class="code-hldr"> | 149 <div style="padding-top:20px;">While prototyping, code
freely without worrying about types.</div> |
150 <div class="item" style="margin-top:23px"> | 150 <pre class="prettyprint lang-dart"> |
151 Without types, code freely.<br> | 151 // A function without types. |
152 <img src="imgs/no_types.png"> | 152 recalculate(origin, offset, estimate) { |
153 </div> | 153 // ... |
154 <div class="item" style="margin-top:23px;"> | 154 } |
155 With types, learn about errors early.<br> | 155 </pre> |
156 <img src="imgs/with_types.png"> | 156 <div style="padding-top:20px;">During production, use
types to learn about errors early, |
157 </div> | 157 communicate intent, and get help with code completion.
</div> |
158 </div> | 158 <pre class="prettyprint lang-dart"> |
| 159 // A function with types (and an optional parameter). |
| 160 num recalculate(Point origin, num offset, {bool estimate: false}) { |
| 161 // ... |
| 162 } |
| 163 </pre> |
159 </div> | 164 </div> |
160 </div> | 165 </div> |
161 <div class="item"> | 166 <div class="item"> |
162 <p>Structure that scales. Organize your code with functions, | 167 <p>Structure that scales. Organize your code with functions, |
163 classes, mixins, and libraries.</p> | 168 classes, mixins, and libraries.</p> |
164 <div class="code-hldr"> | 169 <div class="code-hldr"> |
165 <img src="imgs/modular.png"> | 170 <img src="imgs/modular.png"> |
166 </div> | 171 </div> |
167 </div> | 172 </div> |
168 </div> | 173 </div> |
(...skipping 251 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
420 <b>Note:</b> | 425 <b>Note:</b> |
421 You can write Dart apps using any recent version of | 426 You can write Dart apps using any recent version of |
422 {% include os-choices.html %} | 427 {% include os-choices.html %} |
423 The Dart development tools <b>do not support Windows XP</b>. | 428 The Dart development tools <b>do not support Windows XP</b>. |
424 Dart Editor requires Java version 6 or higher. | 429 Dart Editor requires Java version 6 or higher. |
425 </aside> | 430 </aside> |
426 </div> | 431 </div> |
427 </section> | 432 </section> |
428 </div> <!-- end container --> | 433 </div> <!-- end container --> |
429 </div> <!-- end container-page --> | 434 </div> <!-- end container-page --> |
OLD | NEW |