Java Script Hello World in Microsoft Visual Studio
- Slides: 34
Java. Script “Hello World” in Microsoft Visual Studio 2012 August 2013
Start/All Programs/Microsoft Visual Studio 2012
Select “General Development Settings” click Start Visual Studio
Takes a while the first time. Close Help Content Manager dialog (in lab , you don’t have the necessary permissions)
On menu go to File/New/File
Choose HTML Page and click Open
Click the mouse on the Toolbox icon on the left – the Toolbox slides out. Click on the tack icon to “pin” it into place.
Expand the HTML portion of the Toolbox
On the menu go to File/Save HTMLPage 1. htm As… (or perhaps File/Save Solution As)
Use Safe File As dialog box to choose location (you might make a new folder) and name of file. Click Open. You might have to do the “solution” and then the file.
File created shown in Windows Explorer
Go to Start/Control Panel. Switch the View By to Small icons
Choose Folder Options.
On View tab of Folder Options dialog box, uncheck “Hide extensions for known file types”. Click OK.
Windows Explorer now showing file extension
Between the open and close <title> tags change the text to “Hello World”
Go to File/View in Browser
Page so far – nothing in the “body” the title showing on the tab bar.
Drag an Input (Button) from the Toolbox onto the page between the <body> tags. Change its id attribute to btn. Hello and its value attribute to Hello.
Drag a Div from the Toolbox onto the body
On the menu go to View/Properties Window
With the div highlighted, use the Properties window to give the div and id of “div. Message”
Same effect could be achieved by just typing in the opening <div> tag
Click on “Design” at the bottom to see the Design view – approximately what it would look like in a browser
Or you might like Split view
In Design view, double click on button. Effect 1. It adds the onclick attribute to the input element.
Effect 2. Open and close <script> tags
Effect 3. Makes boilerplate for function associated with onclick
Inside the function (between curly brackets) start typing the word “document”. Notice the Intelli. Sense help (drop-down).
After “document” type a dot (period) and start typing “get. Element. By. Id”. See Intelli. Sense. Watch capitalization. Java. Script is case sensitive.
In parentheses and quotes type div. Message – it must match the id of your <div>
Next type a dot and inner. HTML (note the Intelli. Sense).
Type an equal sign followed by “Hello World” (with quotes) and a semicolon
Save. Then File/View in Browser. Test code by clicking on button