CSD 340 (Blum) 1

Using Visual Studio 2005

CSD 340 (Blum) 2

Start/Microsoft Visual Studio 2005/Microsoft

Visual Studio 2005

CSD 340 (Blum) 3

Choose the type of project you are most likely to be writing

CSD 340 (Blum) 4

Warning to the impatient: starting Visual Studio for the first time at a particular computer can take a few minutes.

CSD 340 (Blum) 5

File/New File

CSD 340 (Blum) 6

Select the HTML Page Template and click Open

CSD 340 (Blum) 7

File/Save HTMLPage1.htm As … (only use Save as some single files like this, never for anything more complicated)

CSD 340 (Blum) 8

Use Save in drop-down, New Folder button (if needed) and File name TextBox to determine name and location of file.

CSD 340 (Blum) 9

Add an HTML comment with your name. HTML comments begin with "<!--", end with

"-->" and generally do not contain "--" or ">".

CSD 340 (Blum) 10

Add a meta tag. Note the IntelliSense drop-down list of options.

CSD 340 (Blum) 11

There is also IntelliSense for the tag attributes, choose name.

CSD 340 (Blum) 12

Finish the meta tag. Notice the color coding brown for tag name, red for attribute name,

blue for attribute value, green for comment.

CSD 340 (Blum) 13

If one places the cursor in or between the body tags, then the document’s properties appear in the Properties Window.

If the Properties Window is not present go to View/Properties Window on the menu.

One can view the properties of other items by selecting them from the Properties Window’s drop-down list.

CSD 340 (Blum) 14

Place the cursor in the BgColor TextBox,

then click on the ellipsis button that appears.

CSD 340 (Blum) 15

Use the Color Picker dialog box to select a color.

CSD 340 (Blum) 16

Note the corresponding change in the HTML Source Code.

CSD 340 (Blum) 17

Click on the Design tab at the bottom to get a sense of what the page will look like.

CSD 340 (Blum) 18

Enter some instructions at the top.

CSD 340 (Blum) 19

Click on the ellipsis that results when the cursor is placed next to Text in the document’s properties.

CSD 340 (Blum) 20

Choose a color for the text.

CSD 340 (Blum) 21

Note the message suggesting that what we have done is old fashioned. Let’s redo it.

CSD 340 (Blum) 22

Click on the ellipsis button that appears when the cursor is placed next to Style.

CSD 340 (Blum) 23

Click on Background and then ellipsis

CSD 340 (Blum) 24

Choose color.

CSD 340 (Blum) 25

Choose Font and then click the ellipsis button next to Color.

CSD 340 (Blum) 26

Choose a color and click OK.

CSD 340 (Blum) 27

Change the size of the font. If one is happy with the sample text, click OK.

CSD 340 (Blum) 28

Delete the “old” code.

CSD 340 (Blum) 29

Click the Save button.

CSD 340 (Blum) 30

On the Design tab, click on Layout/Insert Table

CSD 340 (Blum) 31

Use the Insert Table dialog to assign the table properties. Click Cell Properties.

CSD 340 (Blum) 32

Set the Cell properties.

CSD 340 (Blum) 33

Result in Design

CSD 340 (Blum) 34

Result in Source.

CSD 340 (Blum) 35

Place the cursor inside the first cell and double click on the Image button on the

Toolbox.

If you don’t have the Toolbox, go to View/Toolbox.

To keep the Toolbox in place, click on the icon that looks like a tack (look near the top of the Toolbox).

CSD 340 (Blum) 36

One should be able to click on the ellipsis button that appears after placing the cursor in the Src TextBox, but I had problems which I reported to IT.

CSD 340 (Blum) 37

Go to Source and type the file name including the extension. The file should be in the same folder as Memory.htm.

CSD 340 (Blum) 38

It’s too big, better add a width attribute.

CSD 340 (Blum) 39

Added image attributes.

<img src="Memory.gif" id="Card11" width="100" alt="memory card image"/>

width: To control the size of the image. (There is also a height attribute, but if only the width is assigned, the aspect ratio of the original image will be maintained.)

id: So we can distinguish one thing from another.

alt: Some text in case an image cannot be found. May also be used by visually impaired users.

CSD 340 (Blum) 40

Result in Design. Next copy image code into each cell. The ids must be changed.

No two ids can be the same.

CSD 340 (Blum) 41

Result of adding image tags to each cell.

CSD 340 (Blum) 42

Result in Design.

CSD 340 (Blum) 43

Adding a click event to the image tag. Now when user clicks the first image The function FlipCard11 is called. We must now define it!

CSD 340 (Blum) 44

Start adding a script tag in the <head> region.

CSD 340 (Blum) 45

Write an alert just to test the calling of the function.

CSD 340 (Blum) 46

CSD 340 (Blum) 47

Security message about scripts

CSD 340 (Blum) 48

Security Warning (Cont.)

CSD 340 (Blum) 49

Result of user clicking on first image.

CSD 340 (Blum) 50

Replace test code with more realistic code

CSD 340 (Blum) 51

New result of user clicking.

CSD 340 (Blum) 52

Add a double click event for the first card.

CSD 340 (Blum) 53

Add a function to “handle” the double click event.

CSD 340 (Blum) 54

A possible, but tedious way to continue.

• To finish the game, one could write 17 more click functions and 17 more double click functions. But there’s a better way using arguments.

CSD 340 (Blum) 55

Add arguments to function calls.

CSD 340 (Blum) 56

Add arguments to the function definitions

CSD 340 (Blum) 57

The benefit of arguments

• The benefit of the arguments is now the function definition is generic – it does not specifically refer to the image id, and it does not specifically refer to the image file name.

• This way we can use the same function definition and just get the desired changes in behavior by calling the function with different arguments.

CSD 340 (Blum) 58

New function call, old function definition.

CSD 340 (Blum) 59

References

• http://www.java2s.com/Code/JavaScript/Language-Basics/CallingaFunctionfromanEventHandler.htm