|
6 | 6 |
|
7 | 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 | | -1. Read the Lab Scenario to students and point out that they should read each scenario before attempting the lab for a module. |
14 | | -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. |
15 | | -3. Start Visual Studio and open the **ContosoConf.sln** solution in the **Allfiles\Mod07\Labfiles\Solution\Exercise 1** folder. |
16 | | -4. In Solution Explorer, expand the **ContosoConf** project, expand the **scripts** folder, and then add a new Javascript File **ScheduleList.js**. |
17 | | -5. In the Code Editor window, add a **constructor** to this class. Mention that the purpose of this constructor is to create and initialize new instances of **ScheduleList** type. |
18 | | -6. In Solution Explorer, in the **scripts** folder, expand the **pages** folder, and then double-click **schedule.js**. |
19 | | -7. In the Code and Text Editor window, find the variables and functions, and point out how to refactor them as properties and methods in **ScheduleList** class. |
20 | | -8. In the Code and Text Editor window, replace the code which creates LocalStarStorage and invokes **startDownlaod** method with creation of **ScheduleList** class and invocation of refactored method. |
| 13 | +1. Read the lab scenario to the students and point out that they should read each scenario before attempting the lab for a module. |
| 14 | +2. Point out to the students that the scenario for each exercise contains a description of what they will accomplish in the exercise, and is also essential reading. |
| 15 | +3. Start Microsoft Visual Studio and then from the **Allfiles\Mod07\Labfiles\Solution\Exercise 1** folder, open the **ContosoConf.sln** solution. |
| 16 | +4. In **Solution Explorer**, expand the **ContosoConf** project, expand the **scripts** folder, and then add a new Javascript file named **ScheduleList.js**. |
| 17 | +5. In the **Code Editor** window, add a constructor instance to this class. Mention that the purpose of this constructor is to create and initialize new instances of the **ScheduleList** type. |
| 18 | +6. In **Solution Explorer**, in the **scripts** folder, expand the **pages** folder, and then double-click **schedule.js**. |
| 19 | +7. In the **Code and Text Editor** window, find the variables and functions, and point out how to refactor them as properties and methods in the **ScheduleList** class. |
| 20 | +8. In the **Code and Text Editor** window, replace the code which creates **LocalStarStorage** and invokes **startDownlaod** method with creation of the **ScheduleList** class and invocation of the refactored method. |
| 21 | +8. In the **Code and Text Editor** window, replace the code which creates **LocalStarStorage** and invokes **startDownlaod** method with creation of the **ScheduleList** class and invocation of the refactored method. |
21 | 22 | 9. On the **Debug** menu, click **Start Without Debugging**. |
22 | 23 |
|
23 | | ->**Note:** If the message **Intranet settings are turned off by default** appears, click **Don’t show this message** again. |
| 24 | +>**Note**: If the **Intranet settings are turned off by default** message appears, click **Don’t show this message again**. |
24 | 25 |
|
25 | | -11. In Internet Explorer, in the navigation bar, click **Schedule**, and explain that the **Schedule** page uses the **ScheduleList** object to fetch session data for display. |
| 26 | +11. In Internet Explorer, in the navigation bar, click **Schedule**, and explain that the **Schedule** page uses the **ScheduleList** object to fetch the session data for display. |
26 | 27 | 12. Close Internet Explorer. |
27 | 28 |
|
28 | 29 | ©2018 Microsoft Corporation. All rights reserved. |
|
0 commit comments