Setting up your development environment

CST 214 – JavaScript Programming

Things to consider when setting up your development environment:• Operating System• Language(s) supported• Specific Features

Syntax HighlightingSyntax 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.

Code Intelligence• Auto-balancing of characters and tags• Code completion• Tracking of variables and functions• Also minimizes possible errors.

Other Features• Inline execution of code• Page templates• FTP support• Built-in debugger• Network monitor• WYSIWYG• Help system, manual, and documentation

Coding SoftwareText 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

Coding SoftwareText Editors• Komodo Edit• UltraEdit• Notepad++• EditPlus• TextMate• TextWrangler• BBEdit• Emacs• Vim

IDEs• Adobe Dreamweaver• Komodo IDE• Aptana Studio• Eclipse• NetBeans• WebStorm

What to Look For• DOM Inspector• JavaScript source viewer• Advanced JavaScript debugger• Network monitor• Error console

Good Extensions for Chrome

• Web Developer• Pendule• Firebug Lite• JavaScript Tester• Validity

Useful Add-ons for Firefox• Firebug• Web Developer• YSlow!• Greasemonkey• View Source Chart• JS View

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.

The Opera BrowserOpera is extendible but it’s built-in Dragonfly is really good. It has all the necessary features.

SafariSafari has some extensions but its Web Inspector is sufficient, similar to Opera’s Dragonfly.

JS Bin – A web based editorJS 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.

Types of errorsSyntacticalSyntactical errors prevent JavaScript from running. Caused by improper syntax. Very common for beginners. Relatively easy to find and fix.

Run-timeRun-time errors occur during execution of JavaScript. Can be caused by referencing objects or methods that don’t exist. Can be browser-specific.

LogicalLogical errors are bugs. No actual error reported, just an unexpected result. Hardest to find and fix.

Common causes of errors• Case Sensitivity• Improper Syntax• Misuse of = and ==• Referencing objects that don’t yet

exist• Treating objects as the wrong type

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

Debugging Techniques• Use external JavaScript files• Save the file and refresh the

browser.• Try a different browser.• Take a break!

Bad debugging techniques• Panicking!• Ignoring error messages• Trying random solutions• Not taking breaks

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.

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().

Editors & extensions to check out

Web-based Editorshttps://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]

IDEs (Integrated Development Enviroments)https://netbeans.org/downloads/ http://www.aptana.com/

Extensionshttp://chrispederick.com/work/web-developer/ http://getfirebug.com/

BrowsersChrome: 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

Testing various browsers, extensions and editors will help you find your favorite setup.

Good luck, and happy scripting!