1. JAVASCRIPT TOOLS OVERVIEW
Atlanta JavaScript Users Meeting
November 15, 2010
Scott Povlot

2. TOOLS
If you only have a hammer,
everything looks like a nail

3. TOOL COST
 Free!
 Low Cost
 Open Source
 Public Domain
 Shareware

4. TOOLS OVERVIEW
 Development
 Debug
 Deployment

5. DEVELOPMENT

6. DEVELOPMENT
 Write JavaScript code
 As quickly and efficiently as possible
 Edit HTML and CSS
 At least for reference purposes
 Reference Javascript Documentation
 Core language documentation
 Jquery or other library documentation

7. BELOW BASIC
 Notepad.exe
 Features?

8. STEP UP
 Notepad++
 Syntax Highlighting
 Backup Save
 Auto Indent
 Plugin integration
 http://notepad-plus-plus.org/

9. OTHER ADVANCED TEXT EDITORS
Microsoft Windows
 PSPad
 http://www.pspad.com/
 TextPad
 http://www.textpad.com/
Apple Mac
 TextMate
 http://macromates.com/
Cross Platform (Unix, Linux, Mac, Win)
 vi/Vim
 Emacs

10. INTEGRATED DEVELOPMENT ENVIRONMENT
(IDE)
 Integrated
 Project File Management
 FTP Deployment
 Source Code Version Control
 Web Server
 Syntax Highlighting
 Error Highlighting
 Code Completion
 Debug Integration

11. INTEGRATED DEVELOPMENT ENVIRONMENT
 Aptana Studio
 Eclipse Plugin
 http://www.aptana.com/
 NetBeans IDE
 http://netbeans.org/
 Komodo Edit
 http://www.activestate.com/komodo-edit

12. KOMODO EDIT

13. NETBEANS IDE

14. APTANA STUDIO
 Demo

15. DEBUG

16. DEBUG
 Mozilla Firefox
 Firebug
 Venkman
 IE 8
 Developer Tools
 Chrome/Safari
 Developer Tools
 JavaScript Console
 Other
 Firebug Lite

17. DEBUG
 Firebug
 http://getfirebug.com/
 Features
 Inspect and edit HTML
 Tweak CSS to perfection
 Monitor network activity
 Debug and profile JavaScript
 Explore the DOM
 Execute JavaScript on the fly
 Logging for JavaScript

18. DEPLOYMENT

19. DEPLOYMENT
 Lint
 Minification

20. LINT
 What is JSLint?
 JSLint is a JavaScript program that looks for problems in
JavaScript programs. It is a code quality tool. JSLint is a
JavaScript syntax checker and validator.
 JavaScript is a sloppy language, but inside it there is an
elegant, better language. JSLint helps you to program in that
better language and to avoid most of the slop.
 Warning!
JSLint will hurt your feelings.
 JSLint
 http://www.jslint.com/
 JavaScript Lint
 http://www.javascriptlint.com/
 Google Closure Linter
 http://code.google.com/closure/utilities/

21. MINIFICATION
 Douglas Crockford’s JSMin
 http://www.crockford.com/javascript/jsmin.html
 Dean Edward’s Packer
 http://dean.edwards.name/packer/
 Online Javascript Minifier
 http://jscompress.com/
 Google Closure Compiler
 http://code.google.com/closure/compiler/
 YUI Compressor
 http://developer.yahoo.com/yui/compressor/
 Dojo ShrinkSafe
 http://shrinksafe.dojotoolkit.org/

22. SAMPLE JAVASCRIPT
/**
* Start Timer and update it
every 1/2 second
* Update the 'txt' HTML element
*/
function startTime()
{
var today=new Date();
var hour=today.getHours();
var min=today.getMinutes();
var sec=today.getSeconds();
// add a zero in front of
numbers<10
min=checkTime(min);
sec=checkTime(sec);
document.getElementById('txt').
innerHTML=hour + ":" + min +
":" + sec;
t=setTimeout('startTime()',50);
}
/**
* Check time and add zero in
from of needed
* @param {integer} i The time to
be formatted
*/
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

23. MINIFIED JAVASCRIPT
 Packer (Dean Edwards)
eval(function(p,a,c,k,e,d){e=function(c){return
c.toString(36)};if(!''.replace(/^/,String)){while(c--
){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return
d[e]}];e=function(){return'w+'};c=1};while(c--){if(k[c]){p=p.replace(new
RegExp('b'+e(c)+'b','g'),k[c])}}return p}('8 6(){2 1=d c();2 7=1.f();2
4=1.g();2 3=1.9();4=5(4);3=5(3);a.e('l').h=7+":"+4+":"+3;k=o('6()',m)}8
5(i){n(i<j){i="0"+i}b
i}',25,25,'|today|var|sec|min|checkTime|startTime|hour|function|getSeconds|docu
ment|return|Date|new|getElementById|getHours|getMinutes|innerHTML||10|t|txt|500
|if|setTimeout'.split('|'),0,{}))
 JSMin
function startTime()
{var today=new Date();var hour=today.getHours();var min=today.getMinutes();var
sec=today.getSeconds();min=checkTime(min);sec=checkTime(sec);document.getElemen
tById('txt').innerHTML=hour+":"+min+":"+sec;t=setTimeout('startTime()',500);}
function checkTime(i)
{if(i<10)
{i="0"+i;}
return i;}
 Google Closure Compiler
function startTime(){var a=new
Date,c=a.getHours(),b=a.getMinutes();a=a.getSeconds();b=checkTime(b);a=checkTim
e(a);document.getElementById("txt").innerHTML=c+":"+b+":"+a;t=setTimeout("start
Time()",500)}function checkTime(a){if(a<10)a="0"+a;return a};

24. QUESTIONS?
Scott Povlot
 Twitter: @spovlot
 Email: spovlot@yahoo.com