W3C home > Mailing lists > Public > public-html-diffs@w3.org > September 2009

hixie: <script> example. (whatwg r3791)

From: poot <cvsmail@w3.org>
Date: Thu, 10 Sep 2009 18:53:53 +0900 (JST)
To: public-html-diffs@w3.org
Message-Id: <20090910095354.23F0B2BC04@toro.w3.mag.keio.ac.jp>
hixie: <script> example. (whatwg r3791)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2960&r2=1.2961&f=h
http://html5.org/tools/web-apps-tracker?from=3790&to=3791

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2960
retrieving revision 1.2961
diff -u -d -r1.2960 -r1.2961
--- Overview.html	10 Sep 2009 09:35:07 -0000	1.2960
+++ Overview.html	10 Sep 2009 09:53:29 -0000	1.2961
@@ -10941,7 +10941,47 @@
   </div><p class="note">When inserted using the <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> method,
   <code><a href="#script">script</a></code> elements execute (typically synchronously), but
   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.<h5 id="scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</h5><div class="impl">
+  execute at all.<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><h5 id="scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</h5><div class="impl">
 
   <p>A user agent is said to <dfn id="support-the-scripting-language">support the scripting language</dfn>
   if <var><a href="#the-script-block-s-type">the script block's type</a></var> matches the <a href="#mime-type">MIME type</a> of a
Received on Thursday, 10 September 2009 09:54:30 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Saturday, 18 December 2010 06:14:13 GMT