
<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>PHP, Web and IT stuff &#187; gotchas</title>
	<atom:link href="http://www.webdigi.co.uk/blog/tag/gotchas/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webdigi.co.uk/blog</link>
	<description>Little words of wisdom</description>
	<lastBuildDate>Sat, 04 Sep 2010 22:35:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Javascript Gotchas listed to help avoid mistakes</title>
		<link>http://www.webdigi.co.uk/blog/2009/javascript-gotchas-listed-to-help-avoid-mistakes/</link>
		<comments>http://www.webdigi.co.uk/blog/2009/javascript-gotchas-listed-to-help-avoid-mistakes/#comments</comments>
		<pubDate>Thu, 21 May 2009 15:53:17 +0000</pubDate>
		<dc:creator>iphp</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[gotchas]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.webdigi.co.uk/blog/?p=361</guid>
		<description><![CDATA[A gotcha in programming is something unexpected although a documented feature of a computer system and not a bug. These gotchas throw beginners off Javascript programming and send some people running and screaming. In my opinion, Javascript is one of the most widespread languages as it is available on all browsers but one of the least learned languages.  Let&#8217;s [...]]]></description>
			<content:encoded><![CDATA[<p>A gotcha in programming is something unexpected although a documented feature of a computer system and not a bug. These gotchas throw beginners off Javascript programming and send some people running and screaming. In my opinion, Javascript is one of the most widespread languages as it is available on all browsers but one of the least learned languages.  Let&#8217;s start with basic ones.</p>
<p><strong>1. Floating point arithmetic</strong></p>
<p>This can be a major cause of frustration for people who are new to Javascript and are trying to perform some kind of mathematical computation.</p>
<pre name="code" class="jscript">
&lt;br /&gt;&lt;br /&gt;
&lt;script&gt;&lt;br /&gt;&lt;br /&gt;
alert(0.02 / 0.1);  //0.19999999999999998 &lt;br /&gt;&lt;br /&gt;
alert(1.14 * 100);  //113.99999999999999    ;)&lt;br /&gt;&lt;br /&gt;
&lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
</pre>
<p>
This is where the Math.round() functions come in handy</p>
<p><span style="font-weight: bold;">2. Plus operator overloading </span></p>
<p>The plus operator stands for both arithmetic operations and also string concatenation. This is convenient if used correctly. Lets take a look</p>
<p>
<pre name="code" class="jscript">
&lt;br /&gt;&lt;br /&gt;
&lt;script&gt;&lt;br /&gt;&lt;br /&gt;
var msg, one=&quot;1&quot;;&lt;br /&gt;&lt;br /&gt;
msg = 2 + &quot;1&quot;; // msg = &quot;21&quot;&lt;br /&gt;&lt;br /&gt;
msg = 2 + one; // msg = &quot;21&quot;&lt;br /&gt;&lt;br /&gt;
msg = 1 + 1 + 1 + &quot; musketeers&quot;; // msg = &quot;3 musketeers&quot;&lt;br /&gt;&lt;br /&gt;
msg = &quot;Bond &quot; + 0 + 0 + 7; //msg = &quot;Bond 007&quot;  &lt;br /&gt;&lt;br /&gt;
&lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
</pre>
<p> <br />
The above behaviour is because the operations are performed left to right. If we use parantheses the behaviour will change based on the order of the string or number in it.</p>
<p><span style="font-weight: bold;">3. Semicolon insertion at line feed</span></p>
<p>Javascript automatically inserts ; at a line feed. Lets see this in action with a simple example:</p>
<p>
<pre name="code" class="jscript">
&lt;br /&gt;&lt;br /&gt;
&lt;script&gt;&lt;br /&gt;&lt;br /&gt;
function returnSame(a){&lt;br /&gt;&lt;br /&gt;
   return                 //Inserts semi-colon to convert to return;&lt;br /&gt;&lt;br /&gt;
   a                      //a becomes a; - Unreachable&lt;br /&gt;&lt;br /&gt;
}&lt;br /&gt;&lt;br /&gt;
alert(returnSame(2));  //Output is undefined&lt;br /&gt;&lt;br /&gt;
&lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
</pre>
<p>
The magical semicolon insertion can get things complicated while creating objects using object literals</p>
<p><strong>4. typeof operator</strong></p>
<p>typeof is a unary operator. The results are not one would normally expect. It suprisingly evaluates null to &#8221;object&#8221;. </p>
<p>
<pre name="code" class="jscript">
&lt;br /&gt;&lt;br /&gt;
&lt;script&gt;&lt;br /&gt;&lt;br /&gt;
var obj={};  //object created using object literal&lt;br /&gt;&lt;br /&gt;
var arr=[];  //array created by array literal&lt;br /&gt;&lt;br /&gt;
alert(typeof(obj));   //object  - Good&lt;br /&gt;&lt;br /&gt;
alert(typeof(arr));   //object  - Bad&lt;br /&gt;&lt;br /&gt;
alert(typeof(null));  //object  - Ugly!  ;)&lt;br /&gt;&lt;br /&gt;
&lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
</pre>
<p> <br />
It should only be used to distingush objects from other primitive types.</p>
<p><span style="font-weight: bold; ">5. false, null, undefined, NaN, Infinity</span></p>
<p>They stand for different things although they might look similar or at times look redundant. Javascript uses three primitive datatypes numbers, strings and boolean. In addition it has two trivial datatypes undefined and null. Both null and undefined are equal according to the equality operator (==)</p>
<p>
<pre name="code" class="jscript">
 &lt;br /&gt;&lt;br /&gt;
&lt;script&gt;&lt;br /&gt;&lt;br /&gt;
var a;&lt;br /&gt;&lt;br /&gt;
alert (a);    //undefined&lt;br /&gt;&lt;br /&gt;
alert (1/0);  //Infinity&lt;br /&gt;&lt;br /&gt;
alert (0/0);  //NaN&lt;br /&gt;&lt;br /&gt;
0/0 == 0/0;   //false - a NaN != NaN&lt;br /&gt;&lt;br /&gt;
alert (b);    //error&lt;br /&gt;&lt;br /&gt;
&lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
</pre>
<p> </p>
<p><span style="font-weight: bold;">6. String replace only replaces first occurence</span></p>
<p>Unlike PHP or other languages, string replace in Javascript only replaces the first occurence of a string by default.</p>
<p>
<pre name="code" class="jscript">
&lt;br /&gt;&lt;br /&gt;
&lt;script&gt;&lt;br /&gt;&lt;br /&gt;
var nospace = &quot;I dont need spaces&quot;.replace(&quot; &quot;,&quot;_&quot;);&lt;br /&gt;&lt;br /&gt;
alert(nospace);    //I_dont need spaces   - Only first occurence&lt;br /&gt;&lt;br /&gt;
var nospace = &quot;I dont need spaces&quot;.replace(/ /g,&quot;_&quot;);&lt;br /&gt;&lt;br /&gt;
alert(nospace);    //I_dont_need_spaces&lt;br /&gt;&lt;br /&gt;
&lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
</pre>
<p> </p>
<p><span style="font-weight: bold;">7. ParseInt function</span></p>
<p>This is used to convert a string into an integer. The function does accept two arguments and the second argument specifies the radix. The radix here for decimal is10. If no radix argument is passed the parseInt function tries to guess the base and in this case because the string starts with 0, it is parsed as an <span style="text-decoration: underline;">octal </span>number.</p>
<pre name="code" class="jscript">
&lt;br /&gt;&lt;br /&gt;
&lt;script&gt;&lt;br /&gt;&lt;br /&gt;
var str = &quot;017&quot;;&lt;br /&gt;&lt;br /&gt;
var strInt = parseInt(str);      //strInt = 15  ;)&lt;br /&gt;&lt;br /&gt;
var strInt = parseInt(str,10);   //strInt = 17&lt;br /&gt;&lt;br /&gt;
&lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
</pre>
<p><strong>Please share your Javascript Gotcha&#8217;s using the form below:<br />
<span style="font-weight: normal;">(note use &amp;lt; and &amp;gt;</span> </strong>to get past the comment filter for &lt; and &gt;)</p>
<p><strong><br />
</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webdigi.co.uk/blog/2009/javascript-gotchas-listed-to-help-avoid-mistakes/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
	</channel>
</rss>
