Java Script Hello World in Microsoft Visual Studio

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 ,

Click the mouse on the Toolbox icon on the left – the Toolbox slides

On the menu go to File/Save HTMLPage 1. htm As… (or perhaps File/Save Solution

Use Safe File As dialog box to choose location (you might make a new

Go to Start/Control Panel. Switch the View By to Small icons

On View tab of Folder Options dialog box, uncheck “Hide extensions for known file

Windows Explorer now showing file extension

Between the open and close <title> tags change the text to “Hello World”

Page so far – nothing in the “body” the title showing on the tab

Drag an Input (Button) from the Toolbox onto the page between the <body> tags.

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

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

In Design view, double click on button. Effect 1. It adds the onclick attribute

Effect 3. Makes boilerplate for function associated with onclick

Inside the function (between curly brackets) start typing the word “document”. Notice the Intelli.

After “document” type a dot (period) and start typing “get. Element. By. Id”. See

In parentheses and quotes type div. Message – it must match the id of

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

Slides: 34

Download presentation

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