javascript development tools front-end development
TRANSCRIPT
![Page 1: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/1.jpg)
JavaScript Development Tools
Front-End Development
![Page 2: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/2.jpg)
JS Development Tools
• In order to work with JavaScript, we need to set up a couple of tools
• Many tools available; we wil go for a quite simple setup:– Aptana Studio 3– Firefox browser, with– Firebug extension
![Page 3: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/3.jpg)
Aptana Studio 3
• We need a tool for creating and editing HTML and JavaScript files (not compiling)
• In principle, we could just use Notepad…• We will only use Aptana Studio for– Creating and editing (smart editor)– Launching websites to Firefox
![Page 4: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/4.jpg)
Aptana Studio 3
• Aptana Studio 3 is free, just download and install
• Go to www.aptana.com, download and install the version for your OS
![Page 5: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/5.jpg)
Aptana Studio 3
![Page 6: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/6.jpg)
Aptana Studio 3
Open a file:File | Open File
![Page 7: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/7.jpg)
Aptana Studio 3
![Page 8: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/8.jpg)
Aptana Studio 3
• The Aptana Studio editor provides ”smart” facilities like:– Color coding of page elements– Auto-generation of closing tags– Auto-completion for JavaScript methods,
properties, etc..– …and probably a lot of other stuff we are not
really going to use
![Page 9: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/9.jpg)
Aptana Studio 3
If you do not like the default color scheme:Choose Themes (the ”color-wheel” icon), and choose a different theme. Current theme is greyed out
![Page 10: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/10.jpg)
Firefox Browser
• Aptana Studio cannot ”run” (display) a website for you – we need a browser for that
• What to choose…• We will use Firefox, mainly because
of the Firebug plug-in (later)• Go to www.firefox.com, and install
Firefox on your PC
![Page 11: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/11.jpg)
Firefox Browser
• Once you have installed Firefox, you can set it as the default browser used by Aptana Studio
• This is done by choosing the menu Run, and then Run Configurations
![Page 12: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/12.jpg)
Firefox Browser
1) Select ”Web Browser”…
2) Click ”New Launch Configuration”
![Page 13: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/13.jpg)
Firefox Browser
1) Enter a name for the new Run configuration 2) Browse to the
Firefox executable3) Leave rest as-is…
![Page 14: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/14.jpg)
Firefox Browser
• When we now wish to run (display) a website, we should:– In the editor, go to that .html page which is the
main page of the website (in our examples, we will typically only have only .html page)
– Choose the menu Run, then Run (or Ctrl + F11, or click the green ”Run” icon)
![Page 15: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/15.jpg)
Firefox Browser
![Page 16: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/16.jpg)
Firefox Browser
• NOTE: A classic mistake:– You edit some JavaScript (a .js file)– You save, and wish to see the website…– …so you click Run, while displaying the .js file in
the editor– This will NOT launch the website, but just show
the JavaScript directly in the browser– REMEMBER to shift to the .html page in the editor
![Page 17: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/17.jpg)
Firebug extension
• If we always created error-free websites, this would be all we needed…
• Aptana Studio cannot really help us with ”dynamic” errors, i.e. JavaScript errors
• The Firebug extension to Firefox can help us with this!
• Go to getfirebug.com , and install Firebug
![Page 18: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/18.jpg)
Firebug extension
• Once Firebug is installed, you can start it in Firefox by:– Pressing F12, or– Clicking on the Firebug icon in the upper right
corner
![Page 19: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/19.jpg)
Firebug extension
• You can display the Firebug window either as part of the browser window, or in a separate window (I prefer at the bottom of the screen )
![Page 20: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/20.jpg)
Firebug extension
![Page 21: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/21.jpg)
Firebug extension
We can show/inspect various webpage element, like e.g. JavaScript
![Page 22: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/22.jpg)
Firebug extension
We can even debug JavaScript, using breakpoints, single-stepping, etc.
![Page 23: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/23.jpg)
Firebug extension
In the Watch window, we can observe values of variables, etc (also mouse-over)
![Page 24: JavaScript Development Tools Front-End Development](https://reader036.vdocuments.net/reader036/viewer/2022062322/56649da25503460f94a8fac7/html5/thumbnails/24.jpg)
Try it out!
• Make sure you have all the below installed:– Aptana Studio 3– Firefox browser– Firebug extension
• Do JavaScript Exercise 01 (see class website)