Permalink
Browse files

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

git-svn-id: http://svn.whatwg.org/webapps@3856 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent f587fda commit 9a3c0e0eab0f60c302fe8804bb60aca487a7b3de @Hixie Hixie committed Sep 15, 2009
Showing with 70 additions and 8 deletions.
  1. +35 −4 index
  2. +35 −4 source
View
39 index
@@ -12629,9 +12629,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
</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 @@ not-slash = %x0000-002E / %x0030-10FFFF
&lt;/noscript&gt;
&lt;/form&gt;</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>&lt;form action="calcSquare.php"&gt;
+ &lt;p&gt;
+ &lt;label for=x&gt;Number&lt;/label&gt;:
+ &lt;input id="x" name="x" type="number"&gt;
+ &lt;/p&gt;
+ <strong>&lt;input id="submit" type=submit value="Calculate Square"&gt;</strong>
+ &lt;script&gt;
+ 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>
+ &lt;/script&gt;
+&lt;/form&gt;</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>
View
39 source
@@ -13425,9 +13425,7 @@ not-slash = %x0000-002E / %x0030-10FFFF
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 @@ not-slash = %x0000-002E / %x0030-10FFFF
&lt;/noscript>
&lt;/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>&lt;form action="calcSquare.php">
+ &lt;p>
+ &lt;label for=x>Number&lt;/label>:
+ &lt;input id="x" name="x" type="number">
+ &lt;/p>
+ <strong>&lt;input id="submit" type=submit value="Calculate Square"></strong>
+ &lt;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>
+ &lt;/script>
+&lt;/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>

0 comments on commit 9a3c0e0

Please sign in to comment.