Skip to content
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...
Hixie committed Sep 15, 2009
1 parent f587fda commit 9a3c0e0eab0f60c302fe8804bb60aca487a7b3de
Showing with 70 additions and 8 deletions.
  1. +35 −4 index
  2. +35 −4 source
39 index
</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>
&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>


39 source
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>
&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.
You can’t perform that action at this time.