Example of HTMLArea 3.0

# HTMLArea 3.0

A replacement for `TEXTAREA` elements. © InteractiveTools.com, 2003-2004.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN"> <html> <head> <title>Passing parameters to JavaScript code</title> <link rel="stylesheet" href="custom.css" /> </head> <body> <h1>Passing parameters to JavaScript code</h1> <p>Sometimes we need to pass parameters to some JavaScript function that we wrote ourselves. But sometimes it's simply more convenient to include the parameter not in the function call, but in the affected HTML elements. Usually, all JavaScript calls affect some element, right? ;-)</p> <p>Well, here's an original way to do it. Or at least, I think it's original.</p> <h2>But first...</h2> <p>... an example. Why would I need such thing? I have a JS function that is called on <code>BODY</code> <code>onload</code> handler. This function tries to retrieve the element with the ID "conttoc" and, if present, it will <a href="toc.epl" title="Automatic TOC generation">generate an index</a>. The problem is, this function exists in some external JavaScript library that it's loaded in page. I only needed to pass the parameter from <em>one</em> page. Thus, it makes sense to pass the parameter from the HTML code on <em>that</em> page, not to affect the others.</p> <p>The first idea that came to me was to use some attribute, like "id" or "class". But "id" was locked already, it <em>had</em> to be "conttoc". Use "class"? It's not elegant.. what if I really wanted to give it a class, at some point?</p> <h2>The idea</h2> <p>So I thought: what are the HTML elements that do not affect the page rendering in any way? Well, comments. I mean, <em>comments</em>, HTML comments. You know, like <code>&lt;!-- this is a comment --&gt;</code>.</p> <p>Though comments do not normally affect the way browser renders the page, they are still parsed and are part of the DOM, as well as any other node. But this mean that we can access comments from JavaScript code, just like we access any other element, right? Which means that they <em>can</em> affect the way that page finally appears ;-)</p> <h2>The code</h2> <p>The main part was the idea. The code is simple ;-) Suppose we have the following HTML code:</p> <pre class="code"><span class="function-name">&lt;</span><span class="html-tag">div</span> <span class="variable-name">id=</span><span class="string">&quot;conttoc&quot;</span><span class="paren-face-match">&gt;</span><span class="function-name">&lt;</span><span class="html-tag">/div</span><span class="function-name">&gt;</span></pre> <p>and our function checks for the presence an element having the ID "conttoc", and generates a table of contents into it. Our code will also check if the "conttoc" element's first child is a comment node, and if so will parse additional parameters from there, for instance, a desired prefix for the links that are to be generated into it. Why did I need it? Because if the page uses a <code>&lt;base&gt;</code> element to specify the default link prefix, then links like "#gen1" generated by the <a href="toc.epl">toc generator</a> will not point to that same page as they should, but to the page reffered from <code>&lt;base&gt;</code>.</p> <p>So the HTML would now look like this:</p> <pre class="code"><span class="function-name">&lt;</span><span class="html-tag">div</span> <span class="variable-name">id=</span><span class="string">&quot;conttoc&quot;</span><span class="function-name">&gt;</span><span class="comment">&lt;!-- base:link/prefix.html --&gt;</span><span class="paren-face-match">&lt;</span><span class="html-tag">/div</span><span class="paren-face-match">&gt;</span></pre> <p>And our TOC generation function does something like this:</p> <pre class="code"><span class="keyword">var</span> <span class="variable-name">element</span> = getElementById(&quot;<span class="string">conttoc</span>&quot;); <span class="keyword">if</span> (element.firstChild &amp;&amp; element.firstChild.nodeType == 8) { <span class="comment">// 8 means Node.COMMENT_NODE. We're using numeric values </span> <span class="comment">// because IE6 does not support constant names. </span> <span class="keyword">var</span> <span class="variable-name">parameters</span> = element.firstChild.data; <span class="comment">// at this point &quot;parameters&quot; contains base:link/prefix.html </span> <span class="comment">// ... </span>}</pre> <p>So we retrieved the value passed to the script from the HTML code. This was the goal of this article.</p> <hr /> <address><a href="http://students.infoiasi.ro/~mishoo/">Mihai Bazon</a></address> <!-- hhmts start --> Last modified on Thu Apr 3 20:34:17 2003 <!-- hhmts end --> <!-- doc-lang: English --> </body> </html>

submit