Download presentation
Presentation is loading. Please wait.
1
JavaScript “Hello World” in Microsoft Visual Studio 2012
August 2013
2
Start/All Programs/Microsoft Visual Studio 2012/Microsoft Visual Studio 2012
3
Select “General Development Settings” click Start Visual Studio
4
Takes a while the first time
Takes a while the first time. Close Help Content Manager dialog (in lab , you don’t have the necessary permissions)
5
On menu go to File/New/File
6
Choose HTML Page and click Open
7
Click the mouse on the Toolbox icon on the left – the Toolbox slides out. Click on the tack icon to “pin” it into place.
8
Expand the HTML portion of the Toolbox
9
On the menu go to File/Save HTMLPage1
On the menu go to File/Save HTMLPage1.htm As… (or perhaps File/Save Solution As)
10
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.
11
File created shown in Windows Explorer
12
Go to Start/Control Panel. Switch the View By to Small icons
13
Choose Folder Options.
14
On View tab of Folder Options dialog box, uncheck “Hide extensions for known file types”. Click OK.
15
Windows Explorer now showing file extension
16
Between the open and close <title> tags change the text to “Hello World”
17
Go to File/View in Browser
18
Page so far – nothing in the “body” the title showing on the tab bar.
19
Drag an Input (Button) from the Toolbox onto the page between the <body> tags. Change its id attribute to btnHello and its value attribute to Hello.
20
Drag a Div from the Toolbox onto the body
21
On the menu go to View/Properties Window
22
With the div highlighted, use the Properties window to give the div and id of “divMessage”
23
Same effect could be achieved by just typing in the opening <div> tag
24
Click on “Design” at the bottom to see the Design view – approximately what it would look like in a browser
25
Or you might like Split view
26
In Design view, double click on button. Effect 1
In Design view, double click on button. Effect 1. It adds the onclick attribute to the input element.
27
Effect 2. Open and close <script> tags
28
Effect 3. Makes boilerplate for function associated with onclick
29
Inside the function (between curly brackets) start typing the word “document”. Notice the IntelliSense help (drop-down).
30
After “document” type a dot (period) and start typing “getElementById”
After “document” type a dot (period) and start typing “getElementById”. See IntelliSense. Watch capitalization. JavaScript is case sensitive.
31
In parentheses and quotes type divMessage – it must match the id of your <div>
32
Next type a dot and innerHTML (note the IntelliSense).
33
Type an equal sign followed by “Hello World” (with quotes) and a semicolon
34
Save. Then File/View in Browser. Test code by clicking on button
Similar presentations
