You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Instructions/20480C_MOD11_DEMO.md
+58-58Lines changed: 58 additions & 58 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,113 +2,113 @@
2
2
3
3
# Lesson 1: Creating Interactive Graphics by Using SVG
4
4
5
-
### Demonstration: Using SVG Transformations and Events
5
+
### Demonstration: Using Scalable Vector Graphics (SVG) Transformations and Events
6
6
7
-
#### Preparation Steps
7
+
#### Preparation Steps
8
8
9
-
1.Ensure that you have cloned the 20480C directory from GitHub. It contains the code segments for this course's labs and demos. https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles.
9
+
Ensure that you have cloned the 20480C directory from GitHub (**https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles**). It contains the code segments for the labs and demos in this course.
10
10
11
11
#### Demonstration Steps
12
12
13
13
#### Transform SVG Elements
14
14
15
-
1. On the Windows 10 **Start**screen, click the **Desktop** tile.
16
-
2. On the Windows taskbar, click **Microsoft Edge**.
17
-
3. In Microsoft Edge, open the file **Allfiles\Mod11\Democode\SvgDocument.html**.
18
-
4. If a message box appears asking if you want to allow blocked content, click the **Allow blocked content** button.
19
-
5. In Microsoft Edge, click the **Transformations** button.
20
-
6. Right-click the web page in Microsoft Edge, and then click**View source**.
21
-
7. In the source window, locate the <!-- Demonstrate transformations --< comment and review the **<svg>** element:
22
-
o The <transform> elements translate the square by 200 units in the X and Y axes, scale it by a factor of 0.5, and rotate it.
15
+
1. On the **Start**menu, click the **Desktop** tile.
16
+
2. On the taskbar, click **Microsoft Edge**.
17
+
3. In Microsoft Edge, open the **Allfiles\Mod11\Democode\SvgDocument.html** file.
18
+
4. If a message box appears asking if you want to allow blocked content, click **Allow blocked content**.
19
+
5. In Microsoft Edge, click **Transformations**.
20
+
6. in Microsoft Edge, right-click the webpage, and then select**View source**.
21
+
7. In the source window, locate the **<!-- Demonstrate transformations --<** comment, and then review the **<svg>** element:
22
+
- The **<transform>** elements translate the square by **200** units in the X and Y axes, scale it by a factor of **0.5**, and then rotate it.
23
23
8. Close the source window.
24
24
25
25
#### Handle Events on SVG Elements
26
26
27
-
1. In Microsoft Edge, click the **Events** button.
28
-
2. Hover the mouse over the red shape on the left side of the window. Verify that the shape changes to a yellow fill color and a dotted green border.
29
-
3. Move the mouse off the shape. Verify that it reverts to a red fill color with no outline.
30
-
4. Hover the mouse over the blue shape on the right side of the window. Verify that the shape changes to a yellow fill color and a dotted green border.
31
-
5. Move the mouse off the shape. Verify that it reverts to a blue fill color with no outline.
27
+
1. In Microsoft Edge, click **Events**.
28
+
2. Place the mouse pointer over the red shape on the left side of the window. Verify that the color of the shape changes to yellow with a dotted green border.
29
+
3. Move the mouse pointer off the shape. Verify that its color reverts to red with no outline.
30
+
4. Place the mouse pointer over the blue shape on the right side of the window. Verify that the color of the shape changes to yellow with a dotted green border.
31
+
5. Move the mouse pointer off the shape. Verify that its color reverts to blue with no outline.
32
32
6. Click the red shape. Verify that a message box appears, indicating that the shape represents Alaska. Close the message box.
33
33
7. Click the blue shape. Verify that a message box appears, indicating that the shape represents Hawaii. Close the message box.
34
-
8. Right-click in the browser window, and then click**View source**.
35
-
9. In the source window, locate the **<!-- Demonstrate events -->** comment and review the **<svg>** element:
34
+
8. Right-click in the browser window, and then select**View source**.
35
+
9. In the source window, locate the **<!-- Demonstrate events -->** comment, and then review the **<svg>** element:
36
36
- The **<path>** elements contain the data that defines the two maps.
37
37
- Each **<path>** element responds to the **onmousedown** event and uses JavaScript code to display the appropriate message.
38
-
10. In the source window, locate the **path:hover** CSS rule near the top of the document. This CSS rule defines the style for all **<path>** elements when the user hovers over them with the mouse.
38
+
10. In the source window, locate the **path:hover**Cascading Style Sheets (CSS) rule near the top of the document. This CSS rule defines the style for all **<path>** elements when the user places the mouse pointer over them.
39
39
11. Close the source window.
40
40
12. Close Microsoft Edge.
41
41
42
-
>**Note:** The HTML document has two buttons that enable you to demonstrate transformations and events. There is a separate **<svg>** element for each part of the demonstration. When you click one of the buttons on the page, the page uses the DOM to locate the appropriate **<svg>** element for that part of the demonstration.
43
-
When you click the **Transformations** button, the web page displays two rectangles. The first rectangle is not transformed. The second rectangle has three transformations applied to it: a translation, a scale, and a skew in the X direction.
44
-
When you click the **Events** button, the web page displays two **<path>** shapes representing Alaska and Hawaii. The **onmousedown** event is handled on each shape, to display a message box when the user clicks on the shape. The web page also defines a CSS rule that changes the color of the shape when the user hovers over the shape with the mouse.
42
+
>**Note**: The HTML document has two buttons that enable you to demonstrate transformations and events. There is a separate **<svg>** element for each part of the demonstration. When you click one of the buttons on the page, the page uses the DOM to locate the appropriate **<svg>** element for that part of the demonstration.
43
+
When you click **Transformations**, the webpage displays two rectangles. The first rectangle is not transformed. The second rectangle has three transformations applied to it: a translation, a scale, and a skew in the X direction.
44
+
When you click **Events**, the webpage displays two **<path>** shapes representing Alaska and Hawaii. To display a message box when the user clicks the shape, the **onmousedown** event is handled on each shape. The webpage also defines a CSS rule that changes the color of the shape when the user places the mouse pointer over the shape.
45
45
46
46
47
47
# Lesson 2: Drawing Graphics by Using the Canvas API
48
48
49
49
### Demonstration: Performing Transformations by Using the Canvas API
50
50
51
-
#### Preparation Steps
51
+
#### Preparation Steps
52
52
53
-
1.Ensure that you have cloned the 20480C directory from GitHub. It contains the code segments for this course's labs and demos. https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles.
53
+
Ensure that you have cloned the 20480C directory from GitHub (**https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles**). It contains the code segments for the labs and demos in this course.
54
54
55
55
#### Demonstration Steps
56
56
57
57
#### Perform Simple Transformations
58
58
59
-
1. On the Windows 10 **Start**screen, click the **Desktop** tile.
60
-
2. On the Windows taskbar, click **Microsoft Edge**.
61
-
3. In Microsoft Edge, open the file **Allfiles\Mod11\Democode\CanvasDocument.html**.
62
-
4. If a message box appears asking if you want to allow blocked content, click the **Allow blocked content** button.
63
-
5. In Microsoft Edge, click the **Separate Transformations** button.
64
-
6. Right-click the web page in Microsoft Edge, and then click**View source**.
65
-
7. In the source window, locate the **demoSeperateTransformations** function and review the code:
59
+
1. On the **Start**menu, click the **Desktop** tile.
60
+
2. On the taskbar, click **Microsoft Edge**.
61
+
3. In Microsoft Edge, open the **Allfiles\Mod11\Democode\CanvasDocument.html** file.
62
+
4. If a message box appears asking if you want to allow blocked content, click **Allow blocked content**.
63
+
5. In Microsoft Edge, click **Separate Transformations**.
64
+
6. In Microsoft Edge, right-click the webpage, and then select**View source**.
65
+
7. In the source window, locate the **demoSeperateTransformations** function, and then review the code:
66
66
- The **demoSeperateTransformations** function uses the **drawShape** function to draw a triangle filled with an image of the Welsh flag.
67
-
- Before calling the drawShape function, the code transforms the context; it moves the canvas to the right and down by half the width and height of the canvas, then it scales the context by a different value in the X and Y dimensions, and then rotates the context by PI/4 radians.
67
+
- Before calling the **drawShape** function, the code transforms the context. It moves the canvas to the right and down by half the width and height of the canvas, then it scales the context by a different value in the X and Y dimensions, and then rotates the context by **pi/4** radians.
68
68
- When the **drawShape** function is called, the image is transformed according to the context settings.
69
69
70
-
>**Note:** If time allows, comment out each of the transformations and run the code again. Then uncomment each transformation one at a time, so that students can see the effects of each one.
70
+
>**Note**: If time allows, comment out each of the transformations and run the code again. Then, uncomment each transformation one at a time, so that students can see the effects of each one.
71
71
72
72
#### Perform Matrix Transformation
73
73
74
-
1. In Microsoft Edge, click the **Matrix Transformations** button.
75
-
2. In the source window, locate the **demoMatrixTransformations** function and review the code:
76
-
- This function is similar to the previous one in that it transforms the context and then calls the **drawShape** function to display the image.
77
-
- The difference is that this function uses the **transform** function to perform a matrix transformation, scaling, skewing, and translating the context in a single function call.
74
+
1. In Microsoft Edge, click **Matrix Transformations**.
75
+
2. In the source window, locate the **demoMatrixTransformations** function, and then review the code:
76
+
- This function is similar to the previous one in that it transforms the context, and then calls the **drawShape** function to display the image.
77
+
- The difference is that this function uses the **transform** function to perform a matrix transformation, and scales, skews, and translates the context in a single function call.
78
78
3. Close the source window.
79
79
4. Close Microsoft Edge.
80
80
81
-
>**Note:** When you click the **Separate Transformations** button, the web page invokes the **demoSeparateTransformations()** function. This function invokes separate transformation functions on the two-dimensional context. Explain these functions. Also point out the **save()** and **restore()** function calls, which save the initial context and then restore it at the end of the drawing operations.
82
-
When you click the **Matrix Transformations** button, the web page invokes the **demoMatrixTransformations()** function. This function performs a composite relative transformation on the coordinate system, by using the **transform()** function. The code also contains a commented-out call to **setTransform()**, to show how to perform an absolute transformation. Explain the difference between **transform()** and **setTransform()**.
81
+
>**Note**: When you click **Separate Transformations**, the webpage invokes the **demoSeparateTransformations()** function. This function invokes separate transformation functions in the two-dimensional context. Explain these functions. Also point out the **save()** and **restore()** function calls, which save the initial context, and then restore it at the end of the drawing operations.
82
+
When you click **Matrix Transformations**, the webpage invokes the **demoMatrixTransformations()** function. This function performs a composite relative transformation on the coordinate system by using the **transform()** function. The code also contains a commented-out call to **setTransform()** to show how to perform an absolute transformation. Explain the difference between **transform()** and **setTransform()**.
83
83
84
84
85
85
### Demonstration: Creating Advanced Graphics
86
86
87
-
#### Preparation Steps
87
+
#### Preparation Steps
88
88
89
-
1.Ensure that you have cloned the 20480C directory from GitHub. It contains the code segments for this course's labs and demos. https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles.
89
+
Ensure that you have cloned the 20480C directory from GitHub (**https://github.com/MicrosoftLearning/20480-Programming-in-HTML5-with-JavaScript-and-CSS3/tree/master/Allfiles**). It contains the code segments for the labs and demos in this course.
90
90
91
91
#### Demonstration Steps
92
92
93
-
1. Read the Lab Scenario to students and point out that they should read each scenario before attempting the lab for a module.
94
-
2. Point out to students that the Exercise Scenario for each exercise contains a description of what they will accomplish in the exercise, and is also essential reading.
95
-
3. Start Visual Studio, and open the **ContosoConf.sln** solution in the **Allfiles\Mod11\Labfiles\Solution\Exercise 2** folder.
93
+
1. Read the lab scenario to the students and point out that they should read each scenario before attempting the lab for a module.
94
+
2. Point out to the students that the exercise scenario for each exercise is essential reading and contains a description of what they will accomplish in the exercise.
95
+
3. Start Microsoft Visual Studio, browse to **Allfiles\Mod11\Labfiles\Solution\Exercise 2**, and then open the **ContosoConf.sln** solution.
96
96
4. On the **Debug** menu, click **Start Without Debugging**.
97
97
98
-
>**Note:** If the message **Intranet settings are turned off by default** appears, click **Don’t show this message** again.
98
+
>**Note**: If the **Intranet settings are turned off by default**message appears, click **Don’t show this message** again.
99
99
100
-
5. In Internet Explorer, on the navigation bar, click **Location**.
101
-
6. In the message box **localhost wants to track your physical location**, click **Allow once**.
102
-
7. Scroll down and point out the location map. Mention that students will implement part of this map in exercise 1.
103
-
8. In the location map, click **Room B**. Point out that that students will write code to catch the click event of the SVG element that defines the map for room B and use this event to display the sessions being held in that room.
100
+
5. In Microsoft Internet Explorer, on the navigation bar, click **Location**.
101
+
6. In the **localhost wants to track your physical location** message box, click **Allow once**.
102
+
7. Scroll down and point out the location map. Mention that the students will implement a part of this map in Exercise 1.
103
+
8. In the location map, click **Room B**. Point out that that the students will write the code to catch the **click** event of the SVG element that defines the map for room B and use this event to display the sessions being held in that room.
104
104
9. Close Internet Explorer.
105
-
10. In Solution Explorer, expand the **ContosoConf** project, and then double-click **location.htm**.
106
-
11. In the Code Editor window, find the **<svg viewBox …>** element, and explain that students will implement this element to draw venue map for Room B.
107
-
12. In Solution Explorer, expand the **scripts** folder, expand the **pages** folder, and then double-click **location-venue.js**.
108
-
13. In the Code Editor window, explain that the code in this file handles the click event for the **<svg>** element and displays the list of sessions that run in the room that the user clicked.
109
-
14. In Solution Explorer, double-click **speaker-badge.htm**.
110
-
15. In the Code Editor window, find the following section:
111
-
```html
105
+
10. In **Solution Explorer**, expand the **ContosoConf** project, and then double-click **location.htm**.
106
+
11. In the **Code Editor** window, find the **<svg viewBox …>** element, and then explain that students will implement this element to draw the venue map for Room B.
107
+
12. In **Solution Explorer**, expand the **scripts** folder, expand the **pages** folder, and then double-click **location-venue.js**.
108
+
13. In the **Code Editor** window, explain that the code in this file handles the click event for the **<svg>** element, and then displays the list of sessions that run in the room that the user clicked.
109
+
14. In **Solution Explorer**, double-click **speaker-badge.htm**.
110
+
15. In the **Code Editor** window, find the following section:
111
+
```html
112
112
<sectionclass="page-section badge">
113
113
<divclass="container">
114
114
<h1>Create your speaker badge for ContosoConf</h1>
@@ -117,8 +117,8 @@ When you click the **Matrix Transformations** button, the web page invokes the *
117
117
</canvas>
118
118
</div>
119
119
</section>
120
-
```
121
-
16. Explain that in exercise 2 students will create the **<canvas>** element in this section and use it to display the photograph of the instructor, rather than using an **<img>** element.
120
+
```
121
+
16. Explain that in Exercise 2, the students will create the **<canvas>** element in this section and use it to display the photograph of the instructor, instead of using an **<img>** element.
0 commit comments