javascript tools overview
TRANSCRIPT
JAVASCRIPT TOOLS OVERVIEW
Atlanta JavaScript Users Meeting
November 15, 2010
Scott Povlot
TOOLS
If you only have a hammer, everything looks like a nail
TOOL COST
Free! Low Cost
Open Source Public Domain Shareware
TOOLS OVERVIEW
Development Debug Deployment
DEVELOPMENT
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
BELOW BASIC
Notepad.exe
Features?
STEP UP
Notepad++ Syntax Highlighting Backup Save Auto Indent Plugin integration
http://notepad-plus-plus.org/
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
INTEGRATED DEVELOPMENT ENVIRONMENT (IDE)
Integrated Project File Management FTP Deployment Source Code Version Control Web Server
Syntax Highlighting Error Highlighting Code Completion Debug Integration
INTEGRATED DEVELOPMENT ENVIRONMENT
Aptana Studio Eclipse Plugin http://www.aptana.com/
NetBeans IDE http://netbeans.org/
Komodo Edit http://www.activestate.com/komodo-edit
KOMODO EDIT
NETBEANS IDE
APTANA STUDIO
Demo
DEBUG
DEBUG
Mozilla Firefox Firebug Venkman
IE 8 Developer Tools
Chrome/Safari Developer Tools JavaScript Console
Other Firebug Lite
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
DEPLOYMENT
DEPLOYMENT
Lint Minification
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/
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/
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;
}
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|document|return|Date|new|getElementById|getHours|getMinutes|innerHTML||10|t|txt|500|if|setTimeout'.split('|'),0,{}))
JSMinfunction startTime(){var today=new Date();var hour=today.getHours();var min=today.getMinutes();var sec=today.getSeconds();min=checkTime(min);sec=checkTime(sec);document.getElementById('txt').innerHTML=hour+":"+min+":"+sec;t=setTimeout('startTime()',500);}function checkTime(i){if(i<10){i="0"+i;}return i;}
Google Closure Compilerfunction startTime(){var a=new Date,c=a.getHours(),b=a.getMinutes();a=a.getSeconds();b=checkTime(b);a=checkTime(a);document.getElementById("txt").innerHTML=c+":"+b+":"+a;t=setTimeout("startTime()",500)}function checkTime(a){if(a<10)a="0"+a;return a};
