Permalink
Browse files

[e] (0) <script> example.

git-svn-id: http://svn.whatwg.org/webapps@3791 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 11992cc commit ccb7a088a564041a9cfecc42ebbf2dfc23d8076d @Hixie Hixie committed Sep 10, 2009
Showing with 82 additions and 0 deletions.
  1. +41 −0 index
  2. +41 −0 source
View
@@ -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>
View
@@ -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>

0 comments on commit ccb7a08

Please sign in to comment.