JavaScript Tools Overview

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  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

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  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|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};

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

JavaScript Tools Overview

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Tools Overview

More from Scott Povlot

Recently uploaded

JavaScript Tools Overview