Chapters and Exercises

1. MDN Chapter "Introduction"
   
   1. Read all, up to section "Getting started with JavaScript"
      
      
   2. "Getting started with JavaScript"
      Read just the first introductory paragraphs.
      1. "Opening The Console"
         Follow the link and read "Opening the console in Chrome".
      2. "Entering and running JavaScript"
         Read this subsection.
      3. "Multi-line input in the console"
         Skip this section because it only applies to the Firefox Browser.
         Instead read about Chrome browser Snippet feature: "Run snippets of JavaScript"
         
   3. Hello World - Return to the MDN doc's "Multi-line input in the console" sub-section. Study the example code at the end of "Multi-line input in the console".
         Do the following with this example code:
      1. Exercise:   "Hello World"
         
         Use the above Chrome Snippet and other dev tools to run the code.   Specifically do the steps list below which also presented in the video below the list.
         
         List Format of Instructions:
         
         
         1. Create a Snippet for the Hello World code
         2. Copy and Paste the example code at the end of "Multi-line input in the console" in to this new Chrome Snippet.
         3. Evaluate that snippet on the Console
         4. Save the Console to a log file chapter-1-log.txt
         5. Verify the log file using the bash shell or your operating systems file explorer.
         6. add/commit the Chapter 1 log file git commit -m "-exercise chapter-1-log" .
         
         Video Format of Instructions:
         
2. Exercise:  "Setup Procedure for remaining MDN Chapters"     
   
   For each MDN Chapter, you will save at least one Chrome Console log file with a name like chapter-2.txt    If you take a prolonged break while in you progress through a Chapter, you should save the Chapter's log file into multiple logs files, with names like chapter-2-part-1-log.txt, chapter-2-part-2-log.txt,  etc.
   
   To prepare for the next MDN chapter follow these instructions now. The step listed below are also presented in the video below the listing.
   
   Instructions:
   
   
   1. Open the Chapter's hyperlink in Chrome
   2. In Chrome, open Chrome DevTools window
   3. Open the Sources Panel
   4. Open the Snippet tab
   5. In the Snippet tab create a "New snippet"
   6. Open the Console via "Show console drawer"
   7. IMPORTANT:  In Console make sure "Preserve Log" is enabled.      Without this your saved log file could end up empty!
      
   8. Clear the Console log from any console input from the prior chapters.
      
   
   Instructions in Video Format:
   
3. MDN Chapter "Grammar and Types"
   
   (The following assumes you setup the Chrome Console log process described above)
   
   
   1. Read this MDN chapter, but skip sub-sections: "Object literals : Enhanced Object literals"
      
      While reading the chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, pretty much all the example code that the MDN chapter shows in "grey boxes" (which look like the example below).  
      
      
      
      Regarding how strict the TA will be when grading your Console log of your work review Grading Criteria.
      
      
   2. When complete with the chapter, save the Console log to a log file chapter-2-log.txt. 
      Verify the log file looks correct using the shell.
   3. add/commit the Chapter 2 log file git commit -m "-exercise chapter-2-log" .
4. MDN Chapter "Control flow and error handling"
   
   
   1. If necessary repeat the 'Exercise: "MDN Chapter Setup Procedure" to prepare for saving the Console log for this chapter.
   2. Before starting this chapter's exercise clear the Console log, in case it contains logs from previous chapters (review last step in 'Exercise: "MDN Chapter Setup Procedure"').
   3. Read all of the chapter "Control flow and error handling"
      
      While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes" .
   4. Save the Console to a log file chapter-3-log.txt.  
      Verify the log file looks roughly correct using the shell.
   5. add/commit the Chapter 3 log file git commit -m "-exercise chapter-3-log" .
5. MDN Chapter "Loops and Iteration"
   
   
   1. If necessary repeat the 'Exercise: "MDN Chapter Setup Procedure' in order to make sure the necessary Chrome DevTool Panels are available.
      
      
   2. Before starting this chapter's exercise clear the Console log, in case it contains logs from previous chapters (review last step in 'Exercise: "MDN Chapter Setup Procedure').
      
      
   3. Read this chapter.    While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes" .
      
      
   4. Save the Console to a log file chapter-4-log.txt.  
      Verify the log file looks roughly correct using the shell.
   5. add/commit the Chapter 4 log file git commit -m "-exercise chapter-4-log" .
   
   
6. MDN Chapter "Functions"
   1. If necessary repeat the 'Exercise: "MDN Chapter Setup Procedure' in order to make sure the necessary debug Panels are available.
      
   2. Before starting this chapter's exercise clear the console log file in case it contains logs from previous chapters (see last step in 'Exercise: "MDN Chapter Setup Procedure'').
      
   3. Read this chapter.    While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes" .
      
      
   4. Save the Console to a log file chapter-5-log.txt.  
      Verify the log file looks roughly correct using the shell.
   5. add/commit the Chapter 5 log file git commit -m "-exercise chapter-5-log" .
   
   
   • Language Comparison: 
     
     • Not like Java:  MDN Sections: function expressions, nested functions, closures.
7. MDN Chapter "Expressions and Operators"
   1. If necessary repeat the 'Exercise: "MDN Chapter Setup Procedure'' in order to make sure the necessary debug Panels are available.
      
   2. Before starting this chapter's exercise clear the console log file in case it contains logs from previous chapters (see last step in 'Exercise: "MDN Chapter Setup Procedure'').
      
   3. Read this chapter.  While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes"
      
      
   4. Save the Console to a log file chapter-6-log.txt.  
      Verify the log file looks roughly correct using the shell.
   5. add/commit the Chapter 6 log file git commit -m "-exercise chapter-6-log" .
   • Language Comparison: 
     • Not like Java/C/C++:   JavaScript's  === vs ==,  compare to Java == vs .equals
       
       
8. MDN Chapter "Numbers and Dates"
   
   1. If necessary repeat the 'Exercise: "MDN Chapter Setup Procedure"' in order to make sure the necessary debug Panels are available.
      
   2. Before starting this chapter's exercise clear the Console log in case it contains logs from previous chapters (see last step in 'Exercise: "MDN Chapter Setup Procedure').
      
      
   3. Read this chapter, but you may skip the sub-sections "Dates"
      
      While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes" .
      
      
   4. Save the Console to a log file chapter-7-log.txt.  
      Verify the log file looks roughly correct using the shell.
   5. add/commit the Chapter 7 log file git commit -m "-exercise chapter-7-log" .
   
   
9. MDN Chapter "Regular Experssions"
   
   • Skip this chapter for this tutorial.   You can always come back to it if needed.
     
     
10. MDN Chapter "Text formatting"
    
    
    1. If necessary repeat the 'Exercise: "MDN Chapter Setup Procedure"' in order to make sure the necessary debug Panels are available.
       
    2. Before starting this chapter's exercise clear the console log file in case it contains logs from previous chapters (see last step in 'Exercise: "MDN Chapter Setup Procedure"').
       
    3. Read this chapter -- skipping sub-sections "Internationalization".
       
       While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes".
       
       
    4. Save the Console to a log file chapter-9-log.txt.  
       Verify the log file looks roughly correct using the shell.
    5. add/commit the Chapter 9 log file git commit -m "-exercise chapter-9-log" .
    • Language Comparison: 
      • Not exactly like Java:   JavaScript's Typed Arrays. compare to Java FloatBuffer, etc.
      • Not like C/C++:    JavaScript's Typed Arrays.   In C/C++ all arrays are roughly speeaking "Typed Arrays" (compact & memory efficient and index calculation efficient). While the C++ STL vector<> is a more like similar to JavaScript standard arrays.
        
        
11. MDN Chapter "Indexed collections"
    1. If necessary repeat the ''Exercise: "MDN Chapter Setup Procedure" in order to make sure the necessary debug Panels are available.
       
    2. Before starting this chapter's exercise clear the console log file in case it contains logs from previous chapters (see last step in ''Exercise: "MDN Chapter Setup Procedure").
       
    3. Read this chapter.  While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes".
       
       
    4. Save the Console to a log file chapter-10-log.txt.  
       Verify the log file looks roughly correct using the shell.
    5. add/commit the Chapter 10 log file git commit -m "-exercise chapter-10-log" .
    
    
12. MDN Chapter "Keyed collections"
    • Skim this chapter; come back to it as needed later in the semester.   You do not have to do enter any of the code on the Console for this chapter.
      
      
13. MDN Chapter: "Working with Objects"
    
    
    1. If necessary repeat the ''Exercise: "MDN Chapter Setup Procedure"' in order to make sure the necessary Chrome DevTools Panels are available.
       
    2. Before starting this chapter's exercise clear the Console log in case it contains logs from previous chapters (see last step in '''Exercise: "MDN Chapter Setup Procedure").
       
       
    3. Read this chapter.   While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes" .
       
       
    4. Save the Console to a log file chapter-12-log.txt.  
       Verify the log file looks roughly correct using the shell.
    5. add/commit the Chapter 12 log file git commit -m "-exercise chapter-12-log" .
    • Language Comparison:
      
      • Not At All Like Java/C++:   JS uses 'prototype-based' object orientation programming.   This differs significantly from Java/C++ which are 'class-based' OOP.   If 'prototype-based' OOP is new for you, take some extra time on this Chapter.
        
        
14. MDN Chapter: "Details of the object model"
    
    1. If necessary repeat the ''Exercise: "MDN Chapter Setup Procedure"' ' in order to make sure the necessary Chrome DevTools Panels are available.
       
    2. Before starting this chapter's exercise clear the Console log in case it contains logs from previous chapters (see last step in ''Exercise: "MDN Chapter Setup Procedure"').
       
       
    3. Read this chapter.   While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes" .
       
       
    4. Save the Console to a log file chapter-13-log.txt.  
       Verify the log file looks roughly correct using the shell.
    5. add/commit the Chapter 13 log file git commit -m "-exercise chapter-13-log" .
    • Language Comparison:
      
      • Not At All Like Java/C++:   JS uses 'prototype-based' object orientation programming.   This differs significantly from Java/C++ which are 'class-based' OOP.   If 'prototype-based' OOP is new for you, take some extra time on this Chapter.
    • JavaScript Evolution Notes:
    • The "Details of the object model" chapter covers a lower level method of create class hierarchies.  This method is typically found in older JS code that a JS programmer should expect to encounter in their career.  Any code that you will write in this class, however, will use the modern syntax discussed next.
    
    
15. MDN Chapter: "Classes"
    
    1. If necessary repeat the 'Exercise: "MDN Chapter Setup Procedure"' in order to make sure the necessary Chrome DevTools Panels are available.
       
    2. Before starting this chapter's exercise clear the Console log in case it contains logs from previous chapters (see last step in 'Exercise: "MDN Chapter Setup Procedure"').
       
       
    3. Read this chapter.   While reading the Chapter, you should type in (or cut & paste), either directly into the Console or through the Snippet feature, all the example code in the "grey code boxes" .
       
       
    4. Save the Console to a log file chapter-14-log.txt.  
       Verify the log file looks roughly correct using the shell.
    5. add/commit the Chapter 14 log file git commit -m "-exercise chapter-14-log" .
    • JavaScript Evolution Notes:
    • The "Classes" chapter presents the modern syntax for class definition, inheritance and object creation.  Generally, any code that you will write in this class will use this syntax.
    
    
16. MDN Chapter: Equality_Comparisons_and_Sameness 
    
    1. Before starting this chapter's exercise clear the Console log in case it contains logs from previous chapters (see last step in 'Exercise: "MDN Chapter Setup Procedure" ').
    2. Read up to but not including "Abstract equality, strict equality, and same value in the specification"
    3. Save the Console to a log file chapter-15-log.txt.  
       Verify the log file looks roughly correct using the shell.
    4. add/commit the Chapter 15 log file git commit -m "-exercise chapter-15-log" .
    • Language Comparison::
    • Java: Consider difference between == and .equals() method.
    • C++: Consider the difference between apply == to comparing two pointers versus comparing the deferenced value of the two pointers, e.g.
      int a=10, b=10;
int *pa = &a, *pb = &b;
cout << "pa == pb" << (pa == pb) << endl;
cout << "*pa == *pb" << (*pa == *pb) << endl;
    
    
17. MDN Concurrency model and the event loop
    1. Read all  There is no submission for this chapter, but understanding it is crucial to the following chapter's exercises.
18. MDN Chapter: Using Promises
    
    1. Read up to, but not including, sub section "Chaining after a catch"
    2. Exercise:
       
       1. Before starting this chapter's exercise clear the Console log in case it contains logs from previous chapters (see last step in 'Exercise: "Chapter Setup Procedure"').
       2. In Chrome open the page exercises/using promises/using-promises.html.
       3. Open the Chrome Developer Tools.  Specifically open the Console and the "Sources" tab and study the source code, both the js and html file.
       4. Left clicking the mouse in the light gray canvas will draw pixels at the mouse cursor location.   Try it.
       5. In the file using-promises.js, examine the switch statement. Study the differences between how the first four different versions of the execution sequence of "doTask1, doTask2 and doTask3" are implemented (ignore the fifth switch case statement for now).
       6. Each of these switch case statements is enabled using one of the four radio buttons in the graphical UI.
       7. Select Synchronous radio button and press the Run Tasks 1 to 3 button. Attempt to draw in the canvas with the mouse while watching the Console debug output for messages about the completion of Task 1 through 3.
       8. Select Asynchronous radio button and press the Run Tasks 1 to 3 button. Attempt to draw in the canvas with the mouse while watching the Console debug output for messages about the completion of Task 1 through 3.
       9. Select Asynchronous Inline Callbacksradio button and press the Run Tasks 1 to 3 button. Attempt to draw in the canvas with the mouse while watching the Console debug output for messages about the completion of Task 1 through 3.
       10. Select Asynchronous Chained Promise radio button and press the Run Tasks 1 to 3 button.
       11. Save the Console to a log file chapter-17-log.txt.
             
           Verify the log file looks correct using the shell.
           
       12. add/commit the files git commit -m "-completed exercises using promises" .
19. UDN-MDN: Making asynchronous programming easier with async and await
    

    Note: The official MDN docs for the above material appears to no longer have the above chapter. The above link goes to a website with a backup of the older MDN content.

    1. Read up to but not including "Adding error handling".
    2. Exercise:
       
       1. Create new subdirectory called "async-await" inside your JS_tutorial directory.
       2. cd to async-await
       3. Download and copy the files using-promises.html and using-promises.js into this directory
          
       4. Git commit this with the message "-Exercise: async-await copied initial files"
       5. Verify that you can open the above local files in Chrome and that they work as they did in Part 17.
       6. In the .js file add a new case to the switch statement , case 5.   In the .html file, add another radio button to the GUI to cause execution of this case statement.
       7. For case 5 create a new version of the the doTask1,doTask2,doTask3 sequence similar to case 4 (that used Promises) but not write a new function that uses the async and await mechanisms to call the doTask1_Async, doTask2_Async, and doTask3_Async and mimic the same functionality as the case 4 example with that used Promises, but instead using the async and await JavasScript construct.   Use the section you read "Rewriting promise code with async/await" as a guide towards doing this.
       8. Debug and verify that your new case 5 async-await code products the same behavior on the Console and in the drawing program as the case 4 Promise code.
       9. add/commit the files git commit -m "-exercise: async-await completed" .