Setting up your development environment
-
Upload
nicole-ryan -
Category
Education
-
view
947 -
download
5
Transcript of Setting up your development environment
![Page 1: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/1.jpg)
Setting up your development environment
CST 214 – JavaScript Programming
![Page 2: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/2.jpg)
Things to consider when setting up your development environment:• Operating System• Language(s) supported• Specific Features
![Page 3: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/3.jpg)
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.
![Page 4: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/4.jpg)
Code Intelligence• Auto-balancing of characters and tags• Code completion• Tracking of variables and functions• Also minimizes possible errors.
![Page 5: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/5.jpg)
Other Features• Inline execution of code• Page templates• FTP support• Built-in debugger• Network monitor• WYSIWYG• Help system, manual, and documentation
![Page 6: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/6.jpg)
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
![Page 7: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/7.jpg)
Coding SoftwareText Editors• Komodo Edit• UltraEdit• Notepad++• EditPlus• TextMate• TextWrangler• BBEdit• Emacs• Vim
IDEs• Adobe Dreamweaver• Komodo IDE• Aptana Studio• Eclipse• NetBeans• WebStorm
![Page 8: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/8.jpg)
What to Look For• DOM Inspector• JavaScript source viewer• Advanced JavaScript debugger• Network monitor• Error console
![Page 9: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/9.jpg)
Good Extensions for Chrome
• Web Developer• Pendule• Firebug Lite• JavaScript Tester• Validity
![Page 10: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/10.jpg)
Useful Add-ons for Firefox• Firebug• Web Developer• YSlow!• Greasemonkey• View Source Chart• JS View
![Page 11: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/11.jpg)
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.
![Page 12: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/12.jpg)
The Opera BrowserOpera is extendible but it’s built-in Dragonfly is really good. It has all the necessary features.
![Page 13: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/13.jpg)
SafariSafari has some extensions but its Web Inspector is sufficient, similar to Opera’s Dragonfly.
![Page 14: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/14.jpg)
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.
![Page 15: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/15.jpg)
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.
![Page 16: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/16.jpg)
Common causes of errors• Case Sensitivity• Improper Syntax• Misuse of = and ==• Referencing objects that don’t yet
exist• Treating objects as the wrong type
![Page 17: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/17.jpg)
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
![Page 18: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/18.jpg)
Debugging Techniques• Use external JavaScript files• Save the file and refresh the
browser.• Try a different browser.• Take a break!
![Page 19: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/19.jpg)
Bad debugging techniques• Panicking!• Ignoring error messages• Trying random solutions• Not taking breaks
![Page 20: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/20.jpg)
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.
![Page 21: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/21.jpg)
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().
![Page 22: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/22.jpg)
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]
![Page 23: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/23.jpg)
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
![Page 24: Setting up your development environment](https://reader035.fdocuments.in/reader035/viewer/2022070513/5887cd2a1a28abeb738b614f/html5/thumbnails/24.jpg)
Testing various browsers, extensions and editors will help you find your favorite setup.
Good luck, and happy scripting!