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

  1. Create a new Ruby on Rails Project named javascript_demo and run it, which will load the Ruby on Rails Welcome Page.
  2. Click the About your applications environment link which demonstrates the included JavaScript.
  3. 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
  1. 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:
<script> var sb = $("sidebar") Effect.Fade(sb) </script>
  1. Refresh the browser and watch the sidebar fade away

Go To Declaration

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

Task List

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

Type inference

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

Browser Compatibility

  1. Type
    x.hasA
    ^
  2. 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.
  3. Open Tools > JavaScript Browser Compatibility and uncheck Internet Explorer (meaning we're not concerned with IE compatibility).
  4. 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
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo