Javascript Common Mistakes<br />Dongsu Jang &lt;iolothebard at gmail.com&gt;<br />http://blog.iolo.pe.kr<br />
Unaware of:Async! Async! Async!<br />var result1, result2, result3;<br />$.ajax(..., success: function(data) { result1 = d...
Unaware of:this “this” is not the “this”<br />function test(name, button) {<br />this.name = name;<br />button.onclick= fu...
Unaware of:“not of not” is not the not of “not”<br />function test(foo) {<br />  alert(typeof(foo));<br />  alert(foo);<br...
Misunderstaning0, null, false, undefined, NaN and “”<br />function test(foo) {<br />  alert(typeof(foo));<br />  alert(foo...
Trying todeclaring block scope “var”s<br />function test() {<br />var foo = -1;<br />  for (varfoo = 0; foo &lt; 10; foo++...
Trying tooverload a function<br />function test(foo) {<br />  alert(&apos;one arg&apos;);<br />}<br />function test(foo, b...
Using escape() instead of encodeURIComponent(), encodeURI()<br />Checkout http://xkr.us/articles/javascript/encode-compare...
Unaware ofstring is not array-of-characters<br />var str = “hello”;<br />alert(str.charAt(2));<br />alert(str[2]);<br />Si...
Missing“radix” for parseInt()<br />var sum = parseInt(num1.value) + parseInt(num2.value);<br />alert(sum);<br />parseInt(&...
Sorry…it’s a comma… just a trailing comma…<br />var test = { 1, 2, 3, };<br />out.print(“{“);<br />for (int val: values) {...
Using Vanilla JavaScript<br />Checkout http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks<br />http://jquery...
Testing in one browserand expecting it to work in another<br />Checkout http://www.quirksmode.org/<br />
Not using jslint<br />Checkout http://jslint.com/<br />
The most common mistake is“using JavaScript”<br />Thanks you… ;)<br />
Upcoming SlideShare
Loading in …5
×

Javascript Common Mistakes

1,568 views

Published on

Javascript Common Mistakes

Published in: Technology
  • Be the first to comment

Javascript Common Mistakes

  1. 1. Javascript Common Mistakes<br />Dongsu Jang &lt;iolothebard at gmail.com&gt;<br />http://blog.iolo.pe.kr<br />
  2. 2. Unaware of:Async! Async! Async!<br />var result1, result2, result3;<br />$.ajax(..., success: function(data) { result1 = data; });<br />$.ajax(..., success: function(data) { result2 = data; });<br />result3 = result1 + result2;<br />But, don’t do that: “async: false”<br />
  3. 3. Unaware of:this “this” is not the “this”<br />function test(name, button) {<br />this.name = name;<br />button.onclick= function(event) {<br /> alert(&apos;hello, &apos; + this.name);<br /> };<br />}<br />
  4. 4. Unaware of:“not of not” is not the not of “not”<br />function test(foo) {<br /> alert(typeof(foo));<br /> alert(foo);<br /> if (foo) { alert(&apos;foo&apos;); }<br /> if (!foo) { alert(‘!foo&apos;); }<br /> if (!!foo) { alert(&apos;!!foo&apos;); }<br />}<br />
  5. 5. Misunderstaning0, null, false, undefined, NaN and “”<br />function test(foo) {<br /> alert(typeof(foo));<br /> alert(foo);<br /> if (foo) { alert(&apos;foo&apos;); }<br /> if (foo == null) { alert(&apos;foo == null&apos;); }<br /> if (foo === null) { alert(&apos;foo === null&apos;); }<br />}<br />
  6. 6. Trying todeclaring block scope “var”s<br />function test() {<br />var foo = -1;<br /> for (varfoo = 0; foo &lt; 10; foo++) { … }<br /> alert(foo);<br />}<br />
  7. 7. Trying tooverload a function<br />function test(foo) {<br /> alert(&apos;one arg&apos;);<br />}<br />function test(foo, bar) {<br /> alert(&apos;two args&apos;);<br />}<br />function test() {<br /> for (var i = 0; i &lt; arguments.length; i++) {<br /> alert(arguments[i]);<br /> }<br />}<br />
  8. 8. Using escape() instead of encodeURIComponent(), encodeURI()<br />Checkout http://xkr.us/articles/javascript/encode-compare/<br />Rule of thumb!<br />use encodeURIComponent()<br />use encodeURI() only if you know what it is<br />forget escape()<br />
  9. 9. Unaware ofstring is not array-of-characters<br />var str = “hello”;<br />alert(str.charAt(2));<br />alert(str[2]);<br />Similarly, NodeList is not array-of-Nodestoo!<br />
  10. 10. Missing“radix” for parseInt()<br />var sum = parseInt(num1.value) + parseInt(num2.value);<br />alert(sum);<br />parseInt(&apos;1234&apos;);<br />parseInt(&apos;01234&apos;);<br />parseInt(&apos;1234&apos;, 8);<br />parseInt(&apos;01234&apos;, 10);<br />
  11. 11. Sorry…it’s a comma… just a trailing comma…<br />var test = { 1, 2, 3, };<br />out.print(“{“);<br />for (int val: values) { out.print(i); out.print(“,”); }<br />out.print(“}”);<br />
  12. 12. Using Vanilla JavaScript<br />Checkout http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks<br />http://jquery.com/<br />http://prototypejs.org/<br />http://dojotoolkit.org/<br />and so on…<br />
  13. 13. Testing in one browserand expecting it to work in another<br />Checkout http://www.quirksmode.org/<br />
  14. 14. Not using jslint<br />Checkout http://jslint.com/<br />
  15. 15. The most common mistake is“using JavaScript”<br />Thanks you… ;)<br />

×