[e] (0) <script> example.

git-svn-id: http://svn.whatwg.org/webapps@3791 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Sep 10, 2009 · ccb7a08 · ccb7a08
1 parent 11992cc
commit ccb7a08
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/index b/index
@@ -12345,6 +12345,47 @@ o............A....e
   when inserted using <code title=dom-innerHTML><a href=#dom-innerhtml>innerHTML</a></code> and <code title=dom-outerHTML><a href=#dom-outerhtml>outerHTML</a></code> attributes, they do not
   execute at all.</p>
 
+  <div class=example>
+
+   <p>The following sample shows how a script element can be used to
+   define a function that is then used by other parts of the
+   document. It also shows how a <code><a href=#script>script</a></code> element can be
+   used to invoke script while the document is being parsed, in this
+   case to initialize the form's output.</p>
+
+   <pre>&lt;script&gt;
+ function calculate(form) {
+   var price = 52000;
+   if (form.elements.brakes.checked)
+     price += 1000;
+   if (form.elements.radio.checked)
+     price += 2500;
+   if (form.elements.turbo.checked)
+     price += 5000;
+   if (form.elements.sticker.checked)
+     price += 250;
+   form.elements.result.value = price;
+ }
+&lt;/script&gt;
+&lt;form name="pricecalc" onsubmit="return false"&gt;
+ &lt;fieldset&gt;
+  &lt;legend&gt;Work out the price of your car&lt;/legend&gt;
+  &lt;p&gt;Base cost: &pound;52000.&lt;/p&gt;
+  &lt;p&gt;Select additional options:&lt;/p&gt;
+  &lt;ul&gt;
+   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=brakes&gt; Ceramic brakes (&pound;1000)&lt;/label&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=radio&gt; Satellite radio (&pound;2500)&lt;/label&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=turbo&gt; Turbo charger (&pound;5000)&lt;/label&gt;&lt;/li&gt;
+   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=sticker&gt; "XZ" sticker (&pound;250)&lt;/label&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Total: &pound;&lt;output name=result onformchange="calculate(form)"&gt;&lt;/output&gt;&lt;/p&gt;
+ &lt;/fieldset&gt;
+ &lt;script&gt;
+  document.forms.pricecalc.dispatchFormChange();
+ &lt;/script&gt;
+&lt;/form&gt;</pre>
+
+  </div>
 
 
 

diff --git a/source b/source
@@ -13155,6 +13155,47 @@ o............A....e
   title="dom-outerHTML">outerHTML</code> attributes, they do not
   execute at all.</p>
 
+  <div class="example">
+
+   <p>The following sample shows how a script element can be used to
+   define a function that is then used by other parts of the
+   document. It also shows how a <code>script</code> element can be
+   used to invoke script while the document is being parsed, in this
+   case to initialize the form's output.</p>
+
+   <pre>&lt;script>
+ function calculate(form) {
+   var price = 52000;
+   if (form.elements.brakes.checked)
+     price += 1000;
+   if (form.elements.radio.checked)
+     price += 2500;
+   if (form.elements.turbo.checked)
+     price += 5000;
+   if (form.elements.sticker.checked)
+     price += 250;
+   form.elements.result.value = price;
+ }
+&lt;/script>
+&lt;form name="pricecalc" onsubmit="return false">
+ &lt;fieldset>
+  &lt;legend>Work out the price of your car&lt;/legend>
+  &lt;p>Base cost: &pound;52000.&lt;/p>
+  &lt;p>Select additional options:&lt;/p>
+  &lt;ul>
+   &lt;li>&lt;label>&lt;input type=checkbox name=brakes> Ceramic brakes (&pound;1000)&lt;/label>&lt;/li>
+   &lt;li>&lt;label>&lt;input type=checkbox name=radio> Satellite radio (&pound;2500)&lt;/label>&lt;/li>
+   &lt;li>&lt;label>&lt;input type=checkbox name=turbo> Turbo charger (&pound;5000)&lt;/label>&lt;/li>
+   &lt;li>&lt;label>&lt;input type=checkbox name=sticker> "XZ" sticker (&pound;250)&lt;/label>&lt;/li>
+  &lt;/ul>
+  &lt;p>Total: &pound;&lt;output name=result onformchange="calculate(form)">&lt;/output>&lt;/p>
+ &lt;/fieldset>
+ &lt;script>
+  document.forms.pricecalc.dispatchFormChange();
+ &lt;/script>
+&lt;/form></pre>
+
+  </div>