Your SlideShare is downloading. ×
JavaScript Tools Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JavaScript Tools Overview

1,760
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
1,760
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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