JavaScript Tools Overview

2,215 views
2,121 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,215
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Tools Overview

  1. 1. JAVASCRIPT TOOLS OVERVIEW Atlanta JavaScript Users Meeting November 15, 2010 Scott Povlot
  2. 2. TOOLS If you only have a hammer, everything looks like a nail
  3. 3. TOOL COST  Free!  Low Cost  Open Source  Public Domain  Shareware
  4. 4. TOOLS OVERVIEW  Development  Debug  Deployment
  5. 5. DEVELOPMENT
  6. 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. 7. BELOW BASIC  Notepad.exe  Features?
  8. 8. STEP UP  Notepad++  Syntax Highlighting  Backup Save  Auto Indent  Plugin integration  http://notepad-plus-plus.org/
  9. 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. 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. 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. 12. KOMODO EDIT
  13. 13. NETBEANS IDE
  14. 14. APTANA STUDIO  Demo
  15. 15. DEBUG
  16. 16. DEBUG  Mozilla Firefox  Firebug  Venkman  IE 8  Developer Tools  Chrome/Safari  Developer Tools  JavaScript Console  Other  Firebug Lite
  17. 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. 18. DEPLOYMENT
  19. 19. DEPLOYMENT  Lint  Minification
  20. 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. 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. 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. 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. 24. QUESTIONS? Scott Povlot  Twitter: @spovlot  Email: spovlot@yahoo.com

×