[html5] r3791 - [e] (0) <script> example.

[whatwg at whatwg.org]

Author: ianh
Date: 2009-09-10 02:57:57 -0700 (Thu, 10 Sep 2009)
New Revision: 3791

Modified:
   index
   source
Log:
[e] (0) <script> example.

Modified: index
===================================================================
--- index	2009-09-10 09:39:35 UTC (rev 3790)
+++ index	2009-09-10 09:57:57 UTC (rev 3791)
@@ -12345,9 +12345,50 @@
   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><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;
+ }
+</script>
+<form name="pricecalc" onsubmit="return false">
+ <fieldset>
+  <legend>Work out the price of your car</legend>
+  <p>Base cost: £52000.</p>
+  <p>Select additional options:</p>
+  <ul>
+   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
+   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
+   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
+   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
+  </ul>
+  <p>Total: £<output name=result onformchange="calculate(form)"></output></p>
+ </fieldset>
+ <script>
+  document.forms.pricecalc.dispatchFormChange();
+ </script>
+</form></pre>
 
+  </div>
+
+
+
   <h5 id=scriptingLanguages><span class=secno>4.3.1.1 </span>Scripting languages</h5>
 
   <div class=impl>

Modified: source
===================================================================
--- source	2009-09-10 09:39:35 UTC (rev 3790)
+++ source	2009-09-10 09:57:57 UTC (rev 3791)
@@ -13155,9 +13155,50 @@
   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><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;
+ }
+</script>
+<form name="pricecalc" onsubmit="return false">
+ <fieldset>
+  <legend>Work out the price of your car</legend>
+  <p>Base cost: £52000.</p>
+  <p>Select additional options:</p>
+  <ul>
+   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
+   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
+   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
+   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
+  </ul>
+  <p>Total: £<output name=result onformchange="calculate(form)"></output></p>
+ </fieldset>
+ <script>
+  document.forms.pricecalc.dispatchFormChange();
+ </script>
+</form></pre>
 
+  </div>
+
+
+
   <h5 id="scriptingLanguages">Scripting languages</h5>
 
   <div class="impl">