34
JavaScript “Hello World” in Microsoft Visual Studio August 2012
| Date post: | 23-Dec-2015 |
| Category: |
Documents |
| Upload: | imogen-spencer |
| View: | 230 times |
| Download: | 1 times |
JavaScript “Hello World” in Microsoft Visual Studio
August 2012
Start/All Programs/Microsoft Visual Studio 2010/Microsoft Visual Studio 2010
Select “General Development Settings” click Start Visual Studio
Takes a while the first time.
On menu go to File/New/File
Choose HTML Page and click Open
Hover the mouse over 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 HTMLPage1.htm As… (or perhaps File/Save Solution As)
Use Safe File As dialog box to choose location and name of file. Click Save.
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 btnHello 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 “divMessage”
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 IntelliSense help (drop-down).
After “document” type a dot (period) and start typing “getElementById”. See IntelliSense. Watch capitalization. JavaScript is case sensitive.
In parentheses and quotes type divMessage – it must match the id of your <div>
Next type a dot and innerHTML (note the IntelliSense).
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
![DHANALAKSHMI COLLEGE OF ENGINEERING CHENNAI … · browser what to do. This JavaScript statement tells the browser to write "Hello Dolly" to the web page: document.write["Hello Dolly"];](https://static.documents.pub/doc/80x56/5f0862137e708231d421bccd/dhanalakshmi-college-of-engineering-chennai-browser-what-to-do-this-javascript.jpg)
