JavaScriptDemo

JavaScript Demo (5 Minutes)

Description

This demo highlights some of JavaScript editing features coming in NetBeans 6.1. I use a Ruby on Rails project for the demo because Rails projects come bundled with the Prototype & Scriptaculous JavaScript libraries.

Product Versions Supported

6.1

Points to Hit

The points your demo gets across

Demo Prep

None

Gotchas

Things that may go wrong

Demo

Code-completion

Create a new Ruby on Rails Project named javascript_demo and run it, which will load the Ruby on Rails Welcome Page.
Click the About your applications environment link which demonstrates the included JavaScript.
Open index.html and review its contents.

The bulk of the file is style information, which you can collapse
The prototype.js and effects.js external script references
The about() JavaScript function
The various named elements: page, sidebar, sidebar-items, content, header, about, about-content, getting-started

Just before the closing <body> tag, add the following:

```
<sc
```
^ - to complete <script> and the closing </script> tag
```
var sb = $("
```
^ - NetBeans provides code-completion for the named elements in the file. Select sidebar.
```
Effect.
```
^ - look at all the possible effects. Select one such as Fade
The code should look as follows:

Refresh the browser and watch the sidebar fade away

Go To Declaration

Ctrl-click the Fade function to navigate to its declaration in effects.js
Highlight the element argument to show Mark Occurrences
Instantly rename the element argument to something else

Task List

Open the Task List to see the warning hints (6 for effects.js at the time of this writing)
Double-click one such as "Code has no side effects" - this often times just a semi-colon.
Mouse over the light-bulb to see the balloon tip.
Delete the semi-colon to clear the warning.
Show that alt-Enter can be used to disable the hint

Type inference

Anywhere effects.js type:
```
foo = "A String"
```
```
bar.
```
^ - show the code-completion for bar - including Prototype methods
```
bar = foo
```
```
bar.
```
^ - Notice how now only String methods are provided.

Browser Compatibility

Type
```
x.hasA
```
^
Notice the code completion for hasAttribute() has a strike-through and the Internet Explorer icon is grayed out as hasAttribute() isn't supported by IE.
Open Tools > JavaScript Browser Compatibility and uncheck Internet Explorer (meaning we're not concerned with IE compatibility).
Return to the code completion for hasAttribute() and notice the strike-through has gone away.

Demo Cleanup

These are the necessary steps to take in order to successfully run the demo again on the same machine.

Delete the JavaScriptDemo project
Turn IE back on in the Browser Compatibility dialog

Retrieved from "http://wiki.netbeans.org/JavaScriptDemo"