1. JavaScript “Hello World” in Microsoft Visual Studio August 2012

2. Start/All Programs/Microsoft Visual Studio 2010/Microsoft Visual Studio 2010

3. Select “General Development Settings” click Start Visual Studio

4. Takes a while the first time.

5. On menu go to File/New/File

6. Choose HTML Page and click Open

7. Hover the mouse over 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.htm As… (or perhaps File/Save Solution As)

10. Use Safe File As dialog box to choose location and name of file. Click Save.

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 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 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 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. It adds the onclick attribute to the input element.

27. Effect 2. Open and close 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”. See IntelliSense. Watch capitalization. JavaScript is case sensitive.

31. In parentheses and quotes type divMessage – it must match the id of your

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