1. CSD 340 (Blum)1 Using Microsoft Visual Studio.NET Development Environment and Introducing Functions

2. CSD 340 (Blum)2 Go to Start/Programs/Microsoft Visual Studio.NET 2003/Microsoft Visual Studio.NET 2003

3. CSD 340 (Blum)3 First-time start up screen

4. CSD 340 (Blum)4 File/New/File

5. CSD 340 (Blum)5 New File dialog box: choose HTML Page, click Open button

6. CSD 340 (Blum)6 HTML Page in Design View

7. CSD 340 (Blum)7 HTML Page in HTML View

8. CSD 340 (Blum)8 Return to Design, place cursor over Toolbox, click on tack icon to lock in place.

9. CSD 340 (Blum)9 Click on the HTML button on the Toolbox

10. CSD 340 (Blum)10 Click on Table/Insert/Table

11. CSD 340 (Blum)11 Use the Insert Table Dialog box to select the number of rows, columns, etc.

12. CSD 340 (Blum)12 Result in Design view

13. CSD 340 (Blum)13 Result in HTML view

14. CSD 340 (Blum)14 Insert a Flow layout panel (div) in column 1 and another table (6 rows, a column) in column 2

15. CSD 340 (Blum)15 Result in HTML view

16. CSD 340 (Blum)16 Click the Save File button

17. CSD 340 (Blum)17 Save File As Dialog Box

18. CSD 340 (Blum)18 Place the cursor in the top row of the right column and the click on the Button button of the Toolbox

19. CSD 340 (Blum)19 Right click on the button and choose Properties.

20. CSD 340 (Blum)20 Change the properties of the button

21. CSD 340 (Blum)21 Highlight the div and click on the ellipsis next to the style

22. CSD 340 (Blum)22 Click on the Background button, click on the dropdown listbox next to Color

23. CSD 340 (Blum)23 Select black from the list of colors.

24. CSD 340 (Blum)24 Result of color selection

25. CSD 340 (Blum)25 Double click on button

26. CSD 340 (Blum)26 Result of double clicking: gives a boiler plate of function

27. CSD 340 (Blum)27 Declare some variables in the script region

28. CSD 340 (Blum)28 Let us define the function MakeColor()

29. CSD 340 (Blum)29 Function A function is a set of statements that we separate from the rest of the code and give a name. To execute the code we must “call” the function. It is possible to return a result (as the prompt function does). –One reason for doing this is if the same set of code might be used in a number of different colors.

30. CSD 340 (Blum)30 The butRedIncrease_onclick() function

31. CSD 340 (Blum)31 Events and Functions Another reason for a function is to have code that is executed when an event (such as the user clicking a button) is raised.

32. CSD 340 (Blum)32 Event calling function

33. CSD 340 (Blum)33 outerHTML code

34. CSD 340 (Blum)34 outerHTML versus document.write() Previously we used document.write() to add new HTML code to a page. If there is some pre-existing HTML code on the page we can change it by using the outerHTML property. –There is a similar construct known as innerHTML. The pre-existing HTML tag must have an id attribute so that we can refer to it.

35. CSD 340 (Blum)35 The div’s id attribute

36. CSD 340 (Blum)36 Add a second button.

37. CSD 340 (Blum)37 Click on the Style ellipsis, click on Position, set the Width property

38. CSD 340 (Blum)38 New Function

39. CSD 340 (Blum)39 The Green functions

40. CSD 340 (Blum)40 Result in Browser

41. CSD 340 (Blum)41 Result in Browser (II)

42. CSD 340 (Blum)42 References Beginning JavaScript, Paul Wilton –Functions: p. 92 –Buttons: p. 195 –outerHTML: p. 462 http://www.webopedia.com