| OLD | NEW |
|---|
| 1 --- | 1 --- |
| 2 layout: default | 2 layout: default |
| 3 title: "Embedding Dart in HTML" | 3 title: "Embedding Dart in HTML" |
| 4 description: "In this article by Sigmund Cherem and Vijay Menon, find out how yo
u'll be able to embed Dart directly on HTML pages." | 4 description: "In this article by Sigmund Cherem and Vijay Menon, find out how yo
u'll be able to embed Dart directly on HTML pages." |
| 5 | 5 |
| 6 --- | 6 --- |
| 7 <h1> Embedding Dart in HTML </h1> | 7 <h1> Embedding Dart in HTML </h1> |
| 8 | 8 |
| 9 <p> | 9 <p> |
| 10 <em>Written by Sigmund Cherem and Vijay Menon<br> | 10 <em>Written by Sigmund Cherem and Vijay Menon<br> |
| (...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 111 <li> All script tags with the 'application/dart' MIME type in the page | 111 <li> All script tags with the 'application/dart' MIME type in the page |
| 112 can be loaded asynchronously/concurrently. | 112 can be loaded asynchronously/concurrently. |
| 113 (That is, HTML5 async and defer tags are hints | 113 (That is, HTML5 async and defer tags are hints |
| 114 that do not affect semantics.) | 114 that do not affect semantics.) |
| 115 </li> | 115 </li> |
| 116 <li> Dart code executes only after the page is parsed. | 116 <li> Dart code executes only after the page is parsed. |
| 117 Dart programmers can assume that the DOM is fully loaded. | 117 Dart programmers can assume that the DOM is fully loaded. |
| 118 </li> | 118 </li> |
| 119 </ol> | 119 </ol> |
| 120 | 120 |
| 121 <aside class="note"> | 121 <aside> |
| 122 <b>Note:</b> | 122 <div class="alert alert-info"> |
| 123 We are considering allowing Dart code to run as soon as a script is loaded | 123 <strong>Note:</strong> |
| 124 (for example, like JavaScript with HTML5 async attributes). | 124 We are considering allowing Dart code to run as soon as a script is loaded |
| 125 This would allow running a script before the DOM is fully loaded, | 125 (for example, like JavaScript with HTML5 async attributes). |
| 126 but we would still preserve the asynchronous semantics we support today. | 126 This would allow running a script before the DOM is fully loaded, |
| 127 but we would still preserve the asynchronous semantics we support today. |
| 128 </div> |
| 127 </aside> | 129 </aside> |
| 128 </section> | 130 </section> |
| 129 | 131 |
| 130 | 132 |
| 131 <section> | 133 <section> |
| 132 <h3> No inline event listeners </h3> | 134 <h3> No inline event listeners </h3> |
| 133 | 135 |
| 134 <p> | 136 <p> |
| 135 We disallow inline event listeners of the form: | 137 We disallow inline event listeners of the form: |
| 136 </p> | 138 </p> |
| (...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 181 <p> | 183 <p> |
| 182 In contrast to the previous example, the following is an error: | 184 In contrast to the previous example, the following is an error: |
| 183 </p> | 185 </p> |
| 184 {% highlight html %} | 186 {% highlight html %} |
| 185 <html> | 187 <html> |
| 186 <body> | 188 <body> |
| 187 <script type='application/dart'> | 189 <script type='application/dart'> |
| 188 void hello(String text) { | 190 void hello(String text) { |
| 189 HTMLElement element = document.getElementById('message'); | 191 HTMLElement element = document.getElementById('message'); |
| 190 element.innerHTML = text; | 192 element.innerHTML = text; |
| 191 } <span class="beware">// This tag triggers a warning as no main() is defi
ned.</span> | 193 } // This tag triggers a warning as no main() is defined. |
| 192 </script> | 194 </script> |
| 193 <script type="application/dart"> | 195 <script type="application/dart"> |
| 194 void main() { | 196 void main() { |
| 195 hello('Hello from Dart'); <span class="beware">// hello() will not resol
ve.</span> | 197 hello('Hello from Dart'); // hello() will not resolve. |
| 196 } | 198 } |
| 197 </script> | 199 </script> |
| 198 <div id="message"></div> | 200 <div id="message"></div> |
| 199 </body> | 201 </body> |
| 200 </html> | 202 </html> |
| 201 {% endhighlight %} | 203 {% endhighlight %} |
| 202 | 204 |
| 203 <aside class="note"> | 205 <p> |
| 204 <b>Note:</b> | 206 Each Dart script in the page runs in its own isolate, |
| 205 (1) Each Dart script in the page runs in its own isolate, | 207 and exactly one <code>main()</code> should exist per script. |
| 206 and (2) exactly one <code>main()</code> should exist per script. | 208 </p> |
| 207 </aside> | |
| 208 | 209 |
| 209 <p> | 210 <p> |
| 210 To incorporate external code, | 211 To incorporate external code, |
| 211 use a <code>#source</code> or <code>#import</code> directive instead. | 212 use a <code>#source</code> or <code>#import</code> directive instead. |
| 212 For example, suppose the file <code>Hello.dart</code> | 213 For example, suppose the file <code>Hello.dart</code> |
| 213 defines the <code>hello()</code> method shown above. | 214 defines the <code>hello()</code> method shown above. |
| 214 Then the following executes as expected: | 215 Then the following executes as expected: |
| 215 </p> | 216 </p> |
| 216 | 217 |
| 217 {% highlight html %} | 218 {% highlight html %} |
| 218 <html> | 219 <html> |
| 219 <body> | 220 <body> |
| 220 <script type='application/dart'> | 221 <script type='application/dart'> |
| 221 #source(Hello.dart) | 222 #source(Hello.dart) |
| 222 void main() { | 223 void main() { |
| 223 hello('Hello from Dart'); | 224 hello('Hello from Dart'); |
| 224 } | 225 } |
| 225 </script> | 226 </script> |
| 226 <div id="message"></div> | 227 <div id="message"></div> |
| 227 </body> | 228 </body> |
| 228 </html> | 229 </html> |
| 229 {% endhighlight %} | 230 {% endhighlight %} |
| 230 </section> | 231 </section> |
| 231 | 232 |
| 232 | 233 |
| OLD | NEW |
|---|
Chromium Code Reviews
