Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Setting up your development environment

972 views

Published on

Setting up your development environment for JavaScript programming and web development.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Setting up your development environment

  1. 1. Setting up your development environment CST 214 – JavaScript Programming
  2. 2. Things to consider when setting up your development environment: • Operating System • Language(s) supported • Specific Features
  3. 3. Syntax Highlighting Syntax highlighting can be useful for debugging as it implicitly validates the syntax. Notice how the keyword Document with a capital D is not colored in the second image.
  4. 4. Code Intelligence • Auto-balancing of characters and tags • Code completion • Tracking of variables and functions • Also minimizes possible errors.
  5. 5. Other Features • Inline execution of code • Page templates • FTP support • Built-in debugger • Network monitor • WYSIWYG • Help system, manual, and documentation
  6. 6. Coding Software Text Editors • Cheaper • Simpler • Easier to master • Faster to begin using • Less demanding of the computer • Can be used for many tasks IDEs • More expensive • More complicated • Requires more computer resources • Tend to be more specific • Better code intelligence • Better debugging • Faster development once mastered
  7. 7. Coding Software Text Editors • Komodo Edit • UltraEdit • Notepad++ • EditPlus • TextMate • TextWrangler • BBEdit • Emacs • Vim IDEs • Adobe Dreamweaver • Komodo IDE • Aptana Studio • Eclipse • NetBeans • WebStorm
  8. 8. What to Look For • DOM Inspector • JavaScript source viewer • Advanced JavaScript debugger • Network monitor • Error console
  9. 9. Good Extensions for Chrome • Web Developer • Pendule • Firebug Lite • JavaScript Tester • Validity
  10. 10. Useful Add-ons for Firefox • Firebug • Web Developer • YSlow! • Greasemonkey • View Source Chart • JS View
  11. 11. Useful features of Internet Explorer • IE Developer Toolbar • Web Accessibility Toolbar IE is not as extendible. The IE Developer Tool bar is pretty good. It let’s you test running as different versions of IE. IE is best for testing final versions of code to make sure it’s compatible.
  12. 12. The Opera Browser Opera is extendible but it’s built-in Dragonfly is really good. It has all the necessary features.
  13. 13. Safari Safari has some extensions but its Web Inspector is sufficient, similar to Opera’s Dragonfly.
  14. 14. JS Bin – A web based editor JS Bin (jsbin.com) allows you to write and test JavaScript online, without creating an entire Web page. JS Bin even works with variables frameworks. A more complex alternative is jsFiddle.
  15. 15. Types of errors Syntactical Syntactical errors prevent JavaScript from running. Caused by improper syntax. Very common for beginners. Relatively easy to find and fix. Run-time Run-time errors occur during execution of JavaScript. Can be caused by referencing objects or methods that don’t exist. Can be browser-specific. Logical Logical errors are bugs. No actual error reported, just an unexpected result. Hardest to find and fix.
  16. 16. Common causes of errors • Case Sensitivity • Improper Syntax • Misuse of = and == • Referencing objects that don’t yet exist • Treating objects as the wrong type
  17. 17. Get a good text editor or IDE. Get a good development browser. Keep the error console open! Validate your JavaScript code. Practice rubber duck debugging. Good debugging techniques
  18. 18. Debugging Techniques • Use external JavaScript files • Save the file and refresh the browser. • Try a different browser. • Take a break!
  19. 19. Bad debugging techniques • Panicking! • Ignoring error messages • Trying random solutions • Not taking breaks
  20. 20. Debugging with alert() alert('Now in the XXX function!'); Alert() is simple to use and works on all browsers. But, it can become tedious and isn’t great for reporting a lot of information.
  21. 21. Debugging with console() console.log('Now in the XXX function!'); console.log('myVar is ' + myVar); The console is another, less obtrusive way to track where you are in the program, similar to alert().
  22. 22. Editors & extensions to check out Web-based Editors https://thimble.mozilla.org/ http://brackets.io/ https://jsbin.com/?html,output https://codeanywhere.com/ http://js.do/ http://codepen.io/pen/ https://jsfiddle.net/ Easy to Install Simple Editors [windows, mac, linux] http://www.vim.org/download.php [windows, mac, linux] https://notepad-plus-plus.org/ [windows] http://www.barebones.com/products/textwrangler/ [mac]
  23. 23. IDEs (Integrated Development Enviroments) https://netbeans.org/downloads/ http://www.aptana.com/ Extensions http://chrispederick.com/work/web-developer/ http://getfirebug.com/ Browsers Chrome: https://support.google.com/chrome/answer/95346? hl=en Firefox: https://www.mozilla.org/en-US/firefox/new/ Opera: http://www.opera.com/ Editors & extensions to check out
  24. 24. Testing various browsers, extensions and editors will help you find your favorite setup. Good luck, and happy scripting!

×