<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Andrew R. Jones &#187; JavaScript</title>
	<atom:link href="http://andrew-jones.com/tag/js/feed/" rel="self" type="application/rss+xml" />
	<link>http://andrew-jones.com</link>
	<description>Andrew Jones' Site</description>
	<lastBuildDate>Tue, 01 Dec 2009 20:30:59 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Using a Quarter Interval with the Simile Timeline</title>
		<link>http://andrew-jones.com/2009/12/01/using-a-quarter-interval-with-the-simile-timeline/</link>
		<comments>http://andrew-jones.com/2009/12/01/using-a-quarter-interval-with-the-simile-timeline/#comments</comments>
		<pubDate>Tue, 01 Dec 2009 20:19:20 +0000</pubDate>
		<dc:creator>Andrew Jones</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Simile Timeline]]></category>

		<guid isPermaLink="false">http://andrew-jones.com/?p=434</guid>
		<description><![CDATA[The Simile Timeline allows you to make beautiful, interactive timelines for web pages using only JavaScript. It is fairly flexible and allows you to create timelines with intervals of Seconds, Hours and Days right up to Centuries and Millenniums.
However, it does not support Quarters, which is what I needed. So I have submitted a patch [...]]]></description>
			<content:encoded><![CDATA[<p>The <a href="http://www.simile-widgets.org/timeline/">Simile Timeline</a> allows you to make beautiful, interactive timelines for web pages using only JavaScript. It is fairly flexible and allows you to create timelines with intervals of Seconds, Hours and Days right up to Centuries and Millenniums.</p>
<p>However, it does not support Quarters, which is what I needed. So I have submitted a <a href="http://code.google.com/p/simile-widgets/issues/detail?id=337">patch</a> to the project, and have also been using the following code so I can use Quarters now without needing to patch my local install.</p>
<p>The code is not the most elegant, as it duplicates a lot of the code from the library, but until my patch gets incorporated it is the only way to have Quarters.</p>
<p>To use it, download the js file and include it in your web page after the timeline files. You can then use a Quarter in the same way as you would any interval, as shown below:</p>
<pre>
Timeline.createBandInfo({
    ...
    intervalUnit:   Timeline.DateTime.QUARTER,
    ...
});
</pre>
<p>Find the code on <a href="http://gist.github.com/246389">GitHub</a>, or <a style="display:none;" id="ddetlink481117908" href="javascript:expand(document.getElementById('ddet481117908'))">expand it below:</a>
<div class="ddet_div" id="ddet481117908"><script language="JavaScript" type="text/javascript">expand(document.getElementById('ddet481117908'));expand(document.getElementById('ddetlink481117908'))</script>
<script src="http://gist.github.com/246389.js"></script><br />
</div></p>
]]></content:encoded>
			<wfw:commentRss>http://andrew-jones.com/2009/12/01/using-a-quarter-interval-with-the-simile-timeline/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Working With Cookies? Get Firecookie!</title>
		<link>http://andrew-jones.com/2009/05/11/working-with-cookies-get-firecookie/</link>
		<comments>http://andrew-jones.com/2009/05/11/working-with-cookies-get-firecookie/#comments</comments>
		<pubDate>Mon, 11 May 2009 08:00:22 +0000</pubDate>
		<dc:creator>Andrew Jones</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Cookies]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://andrew-jones.com/?p=196</guid>
		<description><![CDATA[I have recently been working with cookies from JavaScript and started looking for a Firefox extension to help. I knew there would be plenty[1], so I started to try a couple. Then I stumbled on Firecookie and the search was over!
Firecooke is an extension for Firebug and is written by Jan Odvarko, who is also [...]]]></description>
			<content:encoded><![CDATA[<p>I have recently been working with cookies from JavaScript and started looking for a Firefox extension to help. I knew there would be plenty<sup>[1]</sup>, so I started to try a couple. Then I stumbled on <a href="http://www.softwareishard.com/blog/firecookie/">Firecookie</a> and the search was over!</p>
<p>Firecooke is an extension for <a href="http://getfirebug.com/">Firebug</a> and is written by <a href="http://www.softwareishard.com/blog/about/">Jan Odvarko</a>, who is also a full time contributor to Firebug. Among other things it allows you to:</p>
<ul>
<li>Browse and inspect cookies</li>
<li>Add, edit or delete cookies</li>
<li>Log cookie events</li>
</ul>
<p><a href="http://www.softwareishard.com/firecookie/images/scr-overview.png"><img src="http://www.softwareishard.com/firecookie/images/scr-overview-thumb.png" alt="" /></a><br />
<em>Screenshot taken from <a href="http://www.softwareishard.com/blog/firecookie/">http://www.softwareishard.com/blog/firecookie/</a></em>.</p>
<p>I love the way it plugs into Firebug and it provides all the functionality I needed (plus a bit more). For more information about Firecookie check out its <a href="http://www.softwareishard.com/blog/firecookie/">homepage</a>.</p>
<p>Incidentally working with cookies in JavaScript is fairly easy. For a good overview take a look at the articles by PPK over at <a href="http://www.quirksmode.org/js/cookies.html">QuirksMode</a> and by <a href="http://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">Nicholas C. Zakas</a>, or use a JavaScript library such as <a href="http://developer.yahoo.com/yui/cookie/">YUI</a> or <a href="http://plugins.jquery.com/project/cookies">jQuery</a>.</p>
<h4>References</h4><ol class="footnotes"><li id="footnote_0_196" class="footnote"><a href="http://mashable.com/2008/11/11/firefox-extensions-for-managing-cookies/">http://mashable.com/2008/11/11/firefox-extensions-for-managing-cookies/</a></li></ol>]]></content:encoded>
			<wfw:commentRss>http://andrew-jones.com/2009/05/11/working-with-cookies-get-firecookie/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Copying Objects in JavaScript</title>
		<link>http://andrew-jones.com/2009/04/20/copying-objects-in-javascript/</link>
		<comments>http://andrew-jones.com/2009/04/20/copying-objects-in-javascript/#comments</comments>
		<pubDate>Mon, 20 Apr 2009 08:00:40 +0000</pubDate>
		<dc:creator>Andrew Jones</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://andrew-jones.com/?p=156</guid>
		<description><![CDATA[The other day I got tripped up by the way JavaScript assigns variables. In many languages, assigning a variable to another variable creates a copy of the existing variable. If you wanted to make the new variable a reference to the existing variable, you would have to explicitly define that. For example, in Perl you [...]]]></description>
			<content:encoded><![CDATA[<p>The other day I got tripped up by the way JavaScript assigns variables. In many languages, assigning a variable to another variable creates a copy of the existing variable. If you wanted to make the new variable a reference to the existing variable, you would have to explicitly define that. For example, in Perl you can do the following:</p>

<div class="wp_syntax"><div class="code"><pre class="perl" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">#!perl</span>
&nbsp;
<span style="color: #b1b100;">my</span> <span style="color: #0000ff;">@array</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">my</span> <span style="color: #0000ff;">@newArray</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">@array</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;"># creates a copy of the @array</span>
<span style="color: #b1b100;">my</span> <span style="color: #0000ff;">$arrayRef</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">@array</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;"># creates a reference to @array</span></pre></div></div>

<p>In JavaScript things are a bit different. While assigning a boolean or string to a variable does make a copy of that value, assigning an array or an object to a variable actually makes a <em>reference</em> to the value. If your not careful this can easily catch you out, as you might expect to be able to change the new variable without affecting the old object.</p>
<p>Strangely, nothing exists in JavaScript that will help you clone an object. However, other people have came across this and kindly shared their solutions. The code I am now using was submitted by <a href="http://extjs.com/forum/member.php?s=4d7da2856da10dcbee8b5b4022fa3b1b&amp;u=2178">Jozef Sakalos</a> over at the <a href="http://extjs.com/forum/showthread.php?t=26644">ExtJS forums</a> and is displayed below in a more neutral namespace.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> cloneObject <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>o <span style="color: #339933;">||</span> <span style="color: #3366CC;">'object'</span> <span style="color: #339933;">!==</span> <span style="color: #000066; font-weight: bold;">typeof</span> o<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> o<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> <span style="color: #3366CC;">'[object Array]'</span> <span style="color: #339933;">===</span> Object.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">toString</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> p<span style="color: #339933;">,</span> v<span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>p <span style="color: #000066; font-weight: bold;">in</span> o<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>o.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span>p<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            v <span style="color: #339933;">=</span> o<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>v <span style="color: #339933;">&amp;&amp;</span> <span style="color: #3366CC;">'object'</span> <span style="color: #339933;">===</span> <span style="color: #000066; font-weight: bold;">typeof</span> v<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                c<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> cloneObject<span style="color: #009900;">&#40;</span>v<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                c<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> v<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">return</span> c<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>So to copy an object you can now do the following:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> array <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> arrayRef <span style="color: #339933;">=</span> array<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// reference of the array</span>
<span style="color: #003366; font-weight: bold;">var</span> newArray <span style="color: #339933;">=</span> cloneObject<span style="color: #009900;">&#40;</span>array<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// copy of the array</span></pre></div></div>

<h4 id="toc-links">Links</h4>
<ul>
<li><a href="http://my.opera.com/GreyWyvern/blog/show.dml/1725165">Article from Opera</a></li>
<li><a href="http://extjs.com/forum/showthread.php?t=26644">ExtJS Forum Post</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://andrew-jones.com/2009/04/20/copying-objects-in-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JS Syntax Highlighter Re-released as Donationware</title>
		<link>http://andrew-jones.com/2009/02/07/js-syntax-highlighter-re-released-as-donationware/</link>
		<comments>http://andrew-jones.com/2009/02/07/js-syntax-highlighter-re-released-as-donationware/#comments</comments>
		<pubDate>Sat, 07 Feb 2009 17:40:18 +0000</pubDate>
		<dc:creator>Andrew Jones</dc:creator>
				<category><![CDATA[Software]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://andrew-jones.com/?p=142</guid>
		<description><![CDATA[Earlier this week a new version of the JavaScript Syntax Highlighter by Alex Gorbatchev was released. This 2.0 version is a bit thin on new features and supported languages but does have a new home and, significantly, has been released as donationware.
History of the Project
The syntax highlighter started life as the dp.SyntaxHighlighter in 2004 and [...]]]></description>
			<content:encoded><![CDATA[<p>Earlier this week a new version of the JavaScript Syntax Highlighter by Alex Gorbatchev was released. This 2.0 version is a bit thin on new features and supported languages but does have a new home and, significantly, has been released as <a title="Donationware on Wikipedia" href="http://en.wikipedia.org/wiki/Donationware">donationware</a>.</p>
<h4 id="toc-history-of-the-project">History of the Project</h4>
<p>The syntax highlighter started life as the dp.SyntaxHighlighter in 2004 and was hosted at dreamprojections.com<sup>[1]</sup>.</p>
<p>In May 2007 the 1.5 version was released and the syntax highlighter was moved onto Google Code<sup>[2]</sup> with some good improvements. The 1.5.1 version was released in August 2007 with some bug fixes<sup>[3]</sup>, and this was the last release before the new 2.0 version this week.</p>
<p>In between the 1.5 versions and the 2.0 version there has been very little activity. Bug reports and support for more languages were posted but there was very little response from Alex Gorbatchev and the project seem stagnate<sup>[4]</sup>.</p>
<h4 id="toc-popularity">Popularity</h4>
<p>The syntax highlighter became fairly popular and is used on the site for the YUI JavaScript Library<sup>[5]</sup> and on the Mozilla Developer Center<sup>[6]</sup>.</p>
<p>There has also been plugins developed to implement the highlighter in Wordpress<sup>[7]</sup>, and I have developed a plugin for TWiki<sup>[8]</sup> and Foswiki<sup>[9]</sup> that integrates version 1.5.1 of the syntax highlighter into these platforms.</p>
<h4 id="toc-the-new-license">The New License</h4>
<p>The 2.0 version of the syntax highlighter is released under the GNU Lesser General Public License, as was the 1.5 release. However the 2.0 version has one major exception to the license which classes the software as donationware. This is the quote from the website:</p>
<blockquote><p>SyntaxHighlighter is donationware. You are allowed to download, modify and distribute the source code in accordance with LGPL 2.1 license, however <strong>if you are using SyntaxHighlighter 2.0 on your site or including it in your product, you must donate</strong>.<sup>[10]</sup></p></blockquote>
<p>Whilst many open source software developers ask for donations, this exception seems to suggest you <strong>must</strong> donate to Alex Gorbatchev if you want to use the highlighter on their site. There is no set amount that you need to donate, with Alex just stating that &#8220;you&#8217;d at least buy me a beer&#8221;<sup>[11]</sup>.</p>
<p>So while we are free to upgrade any plugins for Wordpress or Foswiki to the 2.0 version, any site that used it would be forced to pay for it. From my point of view, there is no way I would think of using the 2.0 version with this restriction. While many users may be happy to donate, by using it in my Foswiki plugin I would be forcing everyone to donate to use the plugin.</p>
<h4 id="toc-summary">Summary</h4>
<p>The JS Syntax Highlighter is a nice piece of software, but with the new release it is no longer free to use on your site or in a product. Since the 2.0 version has no big improvements over the 1.5 version released two years ago it would be hard justify paying for it, unless you really want to donate.</p>
<p>There are also many other client side syntax highlighters, such as <a title="SHJS" href="http://shjs.sourceforge.net/">SHJS</a>, <a title="Prettify" href="http://code.google.com/p/google-code-prettify/">Prettify</a> and <a title="JUSH" href="http://jush.sourceforge.net/">JUSH</a>, and since the 1.5 version is open source it would be possible to <a title="Fork on Wikipedia" href="http://en.wikipedia.org/wiki/Fork_(software_development)">fork</a> the software and continue development on it. So for me there really does not seem to be any incentive to pay for a client side syntax highlighter.</p>
<h4 id="toc-links">Links</h4>
<ul>
<li><a title="SyntaxHighlighter" href="http://alexgorbatchev.com/wiki/SyntaxHighlighter">SyntaxHighlighter</a></li>
<li><a title="Donationware on Wikipedia" href="http://en.wikipedia.org/wiki/Donationware">Donationware on Wikipedia</a></li>
</ul>
<h4>References</h4><ol class="footnotes"><li id="footnote_0_142" class="footnote">Way Back Machine: <a title="dreanprojections.com on the Way Back Machine" href="http://web.archive.org/web/20050306062439/http://www.dreamprojections.com/syntaxhighlighter/">http://web.archive.org/web/20050306062439/http://www.dreamprojections.com/syntaxhighlighter/</a></li><li id="footnote_1_142" class="footnote"><a title="http://code.google.com/p/syntaxhighlighter/wiki/Version_1_5" href="http://code.google.com/p/syntaxhighlighter/wiki/Version_1_5">http://code.google.com/p/syntaxhighlighter/wiki/Version_1_5</a></li><li id="footnote_2_142" class="footnote"><a title="http://code.google.com/p/syntaxhighlighter/wiki/Version_1_5_1" href="http://code.google.com/p/syntaxhighlighter/wiki/Version_1_5_1">http://code.google.com/p/syntaxhighlighter/wiki/Version_1_5_1</a></li><li id="footnote_3_142" class="footnote">Issues list on Google Code: <a title="http://code.google.com/p/syntaxhighlighter/issues/list" href="http://code.google.com/p/syntaxhighlighter/issues/list">http://code.google.com/p/syntaxhighlighter/issues/list</a></li><li id="footnote_4_142" class="footnote">Syntax Highlighter on YUI Home Page (still using version 1.3): <a title="http://developer.yahoo.com/yui/connection/" href="http://developer.yahoo.com/yui/connection/">http://developer.yahoo.com/yui/connection/</a></li><li id="footnote_5_142" class="footnote">Syntax Highlighter on the Mozilla Developer Center (using version 1.5.1): <a title="https://developer.mozilla.org/en/New_in_JavaScript_1.7" href="https://developer.mozilla.org/en/New_in_JavaScript_1.7">https://developer.mozilla.org/en/New_in_JavaScript_1.7</a></li><li id="footnote_6_142" class="footnote">Syntax Highlighter Plus plugin for Wordpress: <a title="http://wordpress.org/extend/plugins/syntaxhighlighter-plus/" href="http://wordpress.org/extend/plugins/syntaxhighlighter-plus/">http://wordpress.org/extend/plugins/syntaxhighlighter-plus/</a></li><li id="footnote_7_142" class="footnote">DpSyntaxHighlighter plugin for TWiki: <a title="http://twiki.org/cgi-bin/view/Plugins/DpSyntaxHighlighterPlugin" href="http://twiki.org/cgi-bin/view/Plugins/DpSyntaxHighlighterPlugin">http://twiki.org/cgi-bin/view/Plugins/DpSyntaxHighlighterPlugin</a></li><li id="footnote_8_142" class="footnote">DpSyntaxHighlighter plugin for Foswiki: <a title="http://foswiki.org/Extensions/DpSyntaxHighlighterPlugin" href="http://foswiki.org/Extensions/DpSyntaxHighlighterPlugin">http://foswiki.org/Extensions/DpSyntaxHighlighterPlugin</a></li><li id="footnote_9_142" class="footnote">SyntaxHighlighter license: <a title="http://alexgorbatchev.com/wiki/SyntaxHighlighter#License" href="http://alexgorbatchev.com/wiki/SyntaxHighlighter#License">http://alexgorbatchev.com/wiki/SyntaxHighlighter#License</a></li><li id="footnote_10_142" class="footnote">SyntaxHighlighter donate page: <a title="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate" href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate">http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate</a></li></ol>]]></content:encoded>
			<wfw:commentRss>http://andrew-jones.com/2009/02/07/js-syntax-highlighter-re-released-as-donationware/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
