[html5] r3856 - [e] (0) Elaborate on <noscript> example.

[whatwg at whatwg.org]

Author: ianh
Date: 2009-09-15 01:22:04 -0700 (Tue, 15 Sep 2009)
New Revision: 3856

Modified:
   index
   source
Log:
[e] (0) Elaborate on <noscript> example.

Modified: index
===================================================================
--- index	2009-09-15 06:41:56 UTC (rev 3855)
+++ index	2009-09-15 08:22:04 UTC (rev 3856)
@@ -12629,9 +12629,7 @@
   </dl><p class=note>All these contortions are required because, for
   historical reasons, the <code><a href=#the-noscript-element>noscript</a></code> element is handled
   differently by the <a href=#html-parser>HTML parser</a> based on whether <a href=#scripting-flag title="scripting flag">scripting was enabled or not</a> when the
-  parser was invoked. The element is not allowed in XML, because in
-  XML the parser is not affected by such state, and thus the element
-  would not have the desired effect.</p>
+  parser was invoked.</p>
 
   <p>The <code><a href=#the-noscript-element>noscript</a></code> element must not be used in <a href=#xml-documents>XML
   documents</a>.</p>
@@ -12676,10 +12674,43 @@
  </noscript>
 </form></pre>
 
-   <p>When script is enabled, a button appears to do the calculation
+   <p>When script is disabled, a button appears to do the calculation
    on the server side. When script is enabled, the value is computed
    on-the-fly instead.</p>
 
+   <p>The <code><a href=#the-noscript-element>noscript</a></code> element is a blunt
+   instrument. Sometimes, scripts might be enabled, but for some
+   reason the page's script might fail. For this reason, it's
+   generally better to avoid using <code><a href=#the-noscript-element>noscript</a></code>, and to
+   instead design the script to change the page from being a
+   scriptless page to a scripted page on the fly, as in the next
+   example:</p>
+
+   <pre><form action="calcSquare.php">
+ <p>
+  <label for=x>Number</label>:
+  <input id="x" name="x" type="number">
+ </p>
+ <strong><input id="submit" type=submit value="Calculate Square"></strong>
+ <script>
+  var x = document.getElementById('x');
+  var output = document.createElement('p');
+  output.textContent = 'Type a number; it will be squared right then!';
+  x.form.appendChild(output);
+  x.form.onsubmit = function () { return false; }
+  x.oninput = function () {
+    var v = x.valueAsNumber;
+    output.textContent = v + ' squared is ' + v * v;
+  };
+<strong>  var submit = document.getElementById('submit');
+  submit.parentNode.removeChild(submit);</strong>
+ </script>
+</form></pre>
+
+   <p>The above technique is also useful in XHTML, since
+   <code><a href=#the-noscript-element>noscript</a></code> is not supported in <a href=#the-xhtml-syntax>the XHTML
+   syntax</a>.</p>
+
   </div>
 
 

Modified: source
===================================================================
--- source	2009-09-15 06:41:56 UTC (rev 3855)
+++ source	2009-09-15 08:22:04 UTC (rev 3856)
@@ -13425,9 +13425,7 @@
   historical reasons, the <code>noscript</code> element is handled
   differently by the <span>HTML parser</span> based on whether <span
   title="scripting flag">scripting was enabled or not</span> when the
-  parser was invoked. The element is not allowed in XML, because in
-  XML the parser is not affected by such state, and thus the element
-  would not have the desired effect.</p>
+  parser was invoked.</p>
 
   <p>The <code>noscript</code> element must not be used in <span>XML
   documents</span>.</p>
@@ -13472,10 +13470,43 @@
  </noscript>
 </form></pre>
 
-   <p>When script is enabled, a button appears to do the calculation
+   <p>When script is disabled, a button appears to do the calculation
    on the server side. When script is enabled, the value is computed
    on-the-fly instead.</p>
 
+   <p>The <code>noscript</code> element is a blunt
+   instrument. Sometimes, scripts might be enabled, but for some
+   reason the page's script might fail. For this reason, it's
+   generally better to avoid using <code>noscript</code>, and to
+   instead design the script to change the page from being a
+   scriptless page to a scripted page on the fly, as in the next
+   example:</p>
+
+   <pre><form action="calcSquare.php">
+ <p>
+  <label for=x>Number</label>:
+  <input id="x" name="x" type="number">
+ </p>
+ <strong><input id="submit" type=submit value="Calculate Square"></strong>
+ <script>
+  var x = document.getElementById('x');
+  var output = document.createElement('p');
+  output.textContent = 'Type a number; it will be squared right then!';
+  x.form.appendChild(output);
+  x.form.onsubmit = function () { return false; }
+  x.oninput = function () {
+    var v = x.valueAsNumber;
+    output.textContent = v + ' squared is ' + v * v;
+  };
+<strong>  var submit = document.getElementById('submit');
+  submit.parentNode.removeChild(submit);</strong>
+ </script>
+</form></pre>
+
+   <p>The above technique is also useful in XHTML, since
+   <code>noscript</code> is not supported in <span>the XHTML
+   syntax</span>.</p>
+
   </div>