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

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

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

CSD 340 (Blum)4 File/New/File

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

CSD 340 (Blum)6 HTML Page in Design View

CSD 340 (Blum)7 HTML Page in HTML View

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

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

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

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

CSD 340 (Blum)12 Result in Design view

CSD 340 (Blum)13 Result in HTML view

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

CSD 340 (Blum)15 Result in HTML view

CSD 340 (Blum)16 Click the Save File button

CSD 340 (Blum)17 Save File As Dialog Box

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

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

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

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

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

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

CSD 340 (Blum)24 Result of color selection

CSD 340 (Blum)25 Double click on button

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

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

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

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.

CSD 340 (Blum)30 The butRedIncrease_onclick() function

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.

CSD 340 (Blum)32 Event calling function

CSD 340 (Blum)33 outerHTML code

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.

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

CSD 340 (Blum)36 Add a second button.

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

CSD 340 (Blum)38 New Function

CSD 340 (Blum)39 The Green functions

CSD 340 (Blum)40 Result in Browser

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

CSD 340 (Blum)42 References Beginning JavaScript, Paul Wilton –Functions: p. 92 –Buttons: p. 195 –outerHTML: p