<?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>PlanetB &#187; javascript</title>
	<atom:link href="http://www.planetb.ca/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.planetb.ca</link>
	<description></description>
	<lastBuildDate>Sat, 31 Dec 2011 23:31:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>How to Create an iPhone App Showcase Screenshot</title>
		<link>http://www.planetb.ca/2011/10/how-to-create-an-iphone-app-showcase-screenshot/</link>
		<comments>http://www.planetb.ca/2011/10/how-to-create-an-iphone-app-showcase-screenshot/#comments</comments>
		<pubDate>Sun, 16 Oct 2011 17:28:02 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[ad]]></category>
		<category><![CDATA[FileReader]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[screenshot]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://www.planetb.ca/?p=569</guid>
		<description><![CDATA[From http://www.tabletbucks.com/create-an-iphone-app-screenshot-to-showcase-your-app/]]></description>
			<content:encoded><![CDATA[<p><em>From <a href="http://www.tabletbucks.com/create-an-iphone-app-screenshot-to-showcase-your-app/">http://www.tabletbucks.com/create-an-iphone-app-screenshot-to-showcase-your-app/</a></em></p>
<p><center><iframe width="560" height="315" src="http://www.youtube.com/embed/UtJSkP6ICJk" frameborder="0" allowfullscreen></iframe></center></p>
]]></content:encoded>
			<wfw:commentRss>http://www.planetb.ca/2011/10/how-to-create-an-iphone-app-showcase-screenshot/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating a PlayBook App from Old Content &#8211; Awesome RPS</title>
		<link>http://www.planetb.ca/2011/05/creating-a-playbook-app-from-old-content-awesome-rps/</link>
		<comments>http://www.planetb.ca/2011/05/creating-a-playbook-app-from-old-content-awesome-rps/#comments</comments>
		<pubDate>Fri, 06 May 2011 19:16:57 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[Awesomesauce]]></category>
		<category><![CDATA[BlackBerry]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[PlayBook]]></category>
		<category><![CDATA[App]]></category>
		<category><![CDATA[game]]></category>
		<category><![CDATA[playbook]]></category>
		<category><![CDATA[rock paper scissors]]></category>
		<category><![CDATA[SDK]]></category>
		<category><![CDATA[WebWorks]]></category>

		<guid isPermaLink="false">http://www.planetb.ca/?p=541</guid>
		<description><![CDATA[Spurred by a comment left on a previous blog post about ridiculously simple Javascript Rock Paper Scissors game, I thought I&#8217;d see how quickly I could turn the web version of the game into a self-contained app for the BlackBerry PlayBook. And it took virtually no time at all.  The most difficult part was creating [...]]]></description>
			<content:encoded><![CDATA[<p>Spurred by a comment left on a <a href="http://www.planetb.ca/2011/02/javascript-rock-paper-scissors/">previous blog post</a> about ridiculously simple Javascript Rock Paper Scissors game, I thought I&#8217;d see how quickly I could turn the web version of the game into a self-contained app for the BlackBerry PlayBook.</p>
<p>And it took virtually no time at all.  The most difficult part was creating the icon and splashscreen.  The rest was just as easy as making the background black and centering the content on the PlayBook screen.</p>
<p><center><iframe width="480" height="390" src="http://www.youtube.com/embed/kipVwz1-jKM" frameborder="0" allowfullscreen></iframe></center></p>
]]></content:encoded>
			<wfw:commentRss>http://www.planetb.ca/2011/05/creating-a-playbook-app-from-old-content-awesome-rps/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Javascript Rock Paper Scissors</title>
		<link>http://www.planetb.ca/2011/02/javascript-rock-paper-scissors/</link>
		<comments>http://www.planetb.ca/2011/02/javascript-rock-paper-scissors/#comments</comments>
		<pubDate>Sat, 12 Feb 2011 22:42:18 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[game]]></category>
		<category><![CDATA[rock paper scissors]]></category>
		<category><![CDATA[stupid]]></category>

		<guid isPermaLink="false">http://www.planetb.ca/?p=519</guid>
		<description><![CDATA[I was going through some old code of mine and, among other things, came across this Javascript Rock Paper Scissors game I made several years ago. Too much fun!]]></description>
			<content:encoded><![CDATA[<p>I was going through some old code of mine and, among other things, came across this Javascript Rock Paper Scissors game I made several years ago.  Too much fun!<br/><br/></p>
<p><center><iframe src="/projects/rps/rps.html" style="width:500px;height:350px;border:none;"></iframe></center></p>
]]></content:encoded>
			<wfw:commentRss>http://www.planetb.ca/2011/02/javascript-rock-paper-scissors/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Random Flickr Image Slider Puzzle Using Canvas Tags</title>
		<link>http://www.planetb.ca/2010/06/random-image-slider-puzzle-with-canvas-tag/</link>
		<comments>http://www.planetb.ca/2010/06/random-image-slider-puzzle-with-canvas-tag/#comments</comments>
		<pubDate>Sat, 26 Jun 2010 00:32:24 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[Canvas Tag]]></category>
		<category><![CDATA[coding fun]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[Random Flickr Image]]></category>
		<category><![CDATA[slider puzzle]]></category>

		<guid isPermaLink="false">http://www.planetb.ca/?p=237</guid>
		<description><![CDATA[Your browser does not support iframes. I put this together a couple of months ago, with the intention to do something else with it, but I haven&#8217;t. So I&#8217;m just going to publish in this here blog. It&#8217;s a slider puzzle game thingy done with a bunch of HTML5 canvas tags and some seriously hard [...]]]></description>
			<content:encoded><![CDATA[<p><center><br />
<iframe src ="/projects/Canvas-Slider-Puzzle/" frameborder="0" scrolling="no" width="325" height="540"></p>
<p>Your browser does not support iframes.</p>
<p></iframe><br />
</center><br />
I put this together a couple of months ago, with the intention to do something else with it, but I haven&#8217;t.  So I&#8217;m just going to publish in this here blog.<br />
<br/>It&#8217;s a slider puzzle game thingy done with a bunch of HTML5 canvas tags and some seriously hard to follow javascript.  It uses random images from Flickr (taken real-time from the recent interesting pictures page).  I wanted to provide creds for all the photographers, as I should, but alas I am too unmotivated to take that piece on.  </p>
<p>Have fun.  </p>
<p>Personally, I have yet to solve a puzzle.<br/><br />
Link to <a href="http://www.planetb.ca/2010/07/how-to-load-random-flickr-images-with-php/">PHP Code to load random Flickr images</a>.<br />
<br/></p>
]]></content:encoded>
			<wfw:commentRss>http://www.planetb.ca/2010/06/random-image-slider-puzzle-with-canvas-tag/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Ajax Made Easy &#8211; the Power of jQuery</title>
		<link>http://www.planetb.ca/2008/11/ajax-made-easy-the-power-of-jquery/</link>
		<comments>http://www.planetb.ca/2008/11/ajax-made-easy-the-power-of-jquery/#comments</comments>
		<pubDate>Wed, 26 Nov 2008 03:56:01 +0000</pubDate>
		<dc:creator>Jamie</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[E4X]]></category>
		<category><![CDATA[ECMAScript]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[xml]]></category>
		<category><![CDATA[xmlhttprequest]]></category>

		<guid isPermaLink="false">http://www.planetb.ca/?p=71</guid>
		<description><![CDATA[Ajax &#8211; Asynchronous Javascript and XML. It&#8217;s more a technique than anything else. While senior management may consider Ajax to be fancy animations and &#8220;rich&#8221; internet applications, fundamentally, the term Ajax simply refers to exploiting a browser&#8217;s ability to background load XML from other URL&#8217;s. Loading XML Asynchronously In the past, I&#8217;ve implemented Ajaxiness by [...]]]></description>
			<content:encoded><![CDATA[<p><span style="font-size:15pt;font-weight:bold;">Ajax</span> &#8211; <strong>A</strong>synchronous <strong>Ja</strong>vascript and <strong>X</strong>ML.  It&#8217;s more a technique than anything else.  While senior management may consider Ajax to be fancy animations and &#8220;rich&#8221; internet applications, fundamentally, the term Ajax simply refers to exploiting a browser&#8217;s ability to background load XML from other URL&#8217;s.</p>
<h2>Loading XML Asynchronously</h2>
<p>In the past, I&#8217;ve implemented Ajaxiness by creating XMLHttpRequest objects (or Microsoft.XMLHTTP objects fo IE):</p>
<pre class="brush: javascript">
var request = (document.all)?new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;):new XMLHttpRequest();
request.onreadystatechange = function(){
	if(request.readyState == 4)
		alert(&quot;Document loaded&quot;);
};
request.open(&quot;GET&quot;, &quot;test.xml&quot;, true);
request.send(&quot;&quot;);
</pre>
<p>The above code just loads an xml file, test.xml, and alerts the user when the load is finished.  It&#8217;s as simple an Ajax example as it gets.  Fully cross-browser compliant (as much as necessary anyway). From there, you could use your browser&#8217;s ridiculous XML parsing capabilities which isn&#8217;t the same between browsers and with much trial and error and a whack of frustration, implement some client-server Ajax and maybe pull data into a grid or something.  </p>
<p>As I&#8217;ve said, I&#8217;ve done it this way.  But it&#8217;s insane.  In this day and age of the wheel already having been invented over and over, the time needed to implement the core cross-browser Ajax functions should be zero.  In fact, the addition of a particular library to your script can not only make cross browser Ajax and DOM\XML processing worry free, it can make your scripting days a hell of a lot easier in general.</p>
<p>That incredible library is&#8230; <span style="font-size:20pt;font-weight:bold;">jQuery</span>.</p>
<p>With jQuery, the above code becomes a one liner (sorta anyway):</p>
<pre class="brush: javascript">
$.ajax({
  url: &quot;test.xml&quot;,
  success: function(retxml){
    alert(&quot;Document loaded&quot;);
  }
});
</pre>
<h2>ECMAScript for XML (E4X)</h2>
<p>ECMAScript is javascript.  They&#8217;re one and the same.  In 2004, a standardized extended version of ECMAScript was published that elegantly treated xml as a primitive data type.  Doing so makes traversing an XML or DOM document a breeze.  Firefox and Safari both support this standard.  So does Adobe Flash\Flex actionscript.  Unfortunately (and unsurprisingly) IE doesn&#8217;t and from what I&#8217;ve read, MS doesn&#8217;t intend to change that.   This being the case, combined with the utterly depressing fact that IE is so incredibly popular, means that using E4X in any script is likely a poor choice for the time being (unless, of course, you choose not to support IE &#8211; good luck with that).</p>
<h2>jQuery &#8211; the E4X Alternative</h2>
<p>So for now, until either Dell&#8217;s stop being shipped with IE as the default browser or Microsoft decides to incorporate more of the browser standards, we&#8217;re squeezed out from using xml as a primitive data type.  While this no doubt sucks, <b>jQuery</b> again comes to the rescue.</p>
<p>Suppose the following XML file named test.xml :</p>
<pre class="brush: xml">
&lt;Provinces&gt;
	&lt;Province name=&quot;Ontario&quot;&gt;
		&lt;Cities&gt;
			&lt;City&gt;Kitchener&lt;/City&gt;
			&lt;City&gt;Guelph&lt;/City&gt;
			&lt;City&gt;Toronto&lt;/City&gt;
		&lt;/Cities&gt;
	&lt;/Province&gt;
&lt;/Provinces&gt;
</pre>
<p>We can easily load the file and traverse all City elements as follows:</p>
<pre class="brush: javascript">
$.ajax({
  url: &quot;test.xml&quot;,
  success: function(retxml){
    $(retxml).find(&quot;City&quot;).each(function(){
    	alert(&quot;City: &quot; + $(this).text());
    })
  }
});
</pre>
<p>Easy peasy&#8230;</p>
<p>jQuery not only enables easy Ajax, it also has many other cool features like fading and sliding elements and animation support that would certainly feed management&#8217;s buzz word frenzy.</p>
<p>For more information about jQuery, check out the homepage, <a href="http://jquery.com/">http://jquery.com/</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.planetb.ca/2008/11/ajax-made-easy-the-power-of-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

