|
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\Mod09\Labfiles\Solution\Exercise 2** folder. |
16 | | -4. In Solution Explorer, expand the **ContosoConf** project, and then double-click **appcache.manifest**. |
17 | | -5. In the Code Editor window, scroll through the file and explain that it lists the items that will be cached by the web browser. |
18 | | -6. In Solution Explorer, expand the **scripts** folder, and then double-click **offline.js**. |
19 | | -7. In the Code Editor window, find the following code: |
20 | | - ```javascript |
| 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 exercise scenario for each exercise is essential reading and contains a description of what they will accomplish in the exercise. |
| 15 | +3. Start Microsoft Visual Studio. |
| 16 | +4. Browse to **Allfiles\Mod09\Labfiles\Solution\Exercise 2**, and open the **ContosoConf.sln** solution. |
| 17 | +5. In **Solution Explorer**, expand the **ContosoConf** project, and then double-click **appcache.manifest**. |
| 18 | +6. In the **Code Editor** window, scroll through the file and explain that it lists the items that will be cached by the web browser. |
| 19 | +7. In **Solution Explorer**, expand the **scripts** folder, and then double-click **offline.js**. |
| 20 | +8. In the **Code Editor** window, find the following code: |
| 21 | + ```javascript |
21 | 22 | if (!navigator.onLine) { |
22 | 23 | hideLinksThatRequireOnline(); |
23 | 24 | } |
24 | | - ``` |
25 | | -8. Explain that this statement detects whether the browser has a network connection. If it does not, the **hideLinksThatRequireOnline()** function modifies the links in the navigation bar to ensure that pages that require network connectivity (such as the **Location** and **Register** pages) do not appear. |
26 | | -9. In Solution Explorer, expand the **scripts** folder, then double-click **ScheduleItem.js**. |
27 | | -10. In the Code Editor window, find the **setStar()** function. Point out that this function saves information about sessions that the user has selected (by clicking the star icon) to local storage, and also posts this information to the web server. Similarly, the **unsetStar()** function removes information about selected sessions from local storage. In this way, the user can still record which sessions they are interested in, even if the browser does not have a network connection. |
| 25 | + ``` |
| 26 | +9. Explain that this statement detects whether the browser has a network connection. If it does not have a network connection, the **hideLinksThatRequireOnline()** function modifies the links in the navigation bar to ensure that the pages that require network connectivity (such as the **Location** and **Register** pages) do not appear. |
| 27 | +10. In **Solution Explorer**, expand the **scripts** folder, and then double-click **ScheduleItem.js**. |
| 28 | +11. In the **Code Editor** window, find the **setStar()** function. Point out that this function saves information about sessions that the user has selected (by clicking the star icon) to local storage, and also posts this information to the web server. Similarly, the **unsetStar()** function removes information about selected sessions from local storage. In this way, the user can still record which sessions they are interested in, even if the browser does not have a network connection. |
28 | 29 |
|
29 | 30 | ©2018 Microsoft Corporation. All rights reserved. |
30 | 31 |
|
|
0 commit comments