TCS : JavaScript Tutorial

Fall 2021

Professor: Zachary Wartell

Revision: Mon Sep 27 14:56:23 2021 -0400 (git logs)


Creative Commons License
"ITCS : JavaScript Tutorial" by Zachary Justin Wartell is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Compatibility

This page has been tested on Chrome v93.

Objectives

  1. Learn subset of fundamentals of JavaScript from MDN resources (as appropriate for this courses later WebGL assignments).
  2. Learn JavaScript debugging facilities within the Chrome Browser.

Overview

This tutorial requires you read a subset of the "chapters" in the MDN "JavaScript Guide", at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide.   We chose a subset of chapters based on what is required to complete the first programming assignment in this course.    The MDN JavaScript Guide (abbreviated as "MDN JS Guide"), generally contains few "active learning" sections.   

Therefore to demonstrate you read the material and hence get credit for this tutorial you will have to:

Preliminaries

  1. Create a new remote repository on the Git server called "ITCS__JS_Tutorial".
    1. Remember to make your remote repository "Private" .
    2. Remember to give the TA and Professor "Reporter" Access.

  2. Now clone your remote repo:
    lucretius@CCIWD-435B-1 ~/ITCS_/
    $git clone https://cci-git.uncc.edu/your_user_id/ITCS__JS_Tutorial.git JS_Tutorial
    Cloning into 'JS_Tutorial'...
    warning: You appear to have cloned an empty repository.

  3. Inside the Tutorial README.md. Add your name on the first line of the file.

    Git commit the file with the commit message “initial README.md”

Chrome JavaScript Debugging Tutorial

Otherwise, you are strongly encouraged to read through and do Debugging Tutorials.  There is no good, automated technological way for a student to record the work they performed in this Debugging Tutorial, so no grade or credit will be given.  

Nonetheless, the guide below points you to sub-sections of the Chrome DevTool Debugging tutorials that are most fundamental for the type of programming anticipated in this course:

JavaScript Tutorial

The grading rubric for this tutorial is found in Canvas Assignment T3: Opt. I: JavaScript Tutorial.

Canvas Assignment T3: JavaScript Tutorial - Overview discusses options available for qualified students who have sufficient JavaScript experience to skip this tutorial by completing the Canvas Survey T3: Opt. II: JavaScript Experience Survey.  

Grading Criteria

Warning:   To get credit for this tutorial:  You must save the Console log files. one per Chapter (details are below).  Also, you must follow the git commit instructions for each chapter.

Your Console interactions recorded in your log file must show that you tested 90% of the example code in the listed MDN chapters.   Further, regarding what is recorded in the log file:

  • It is fine (and expected) for some of your coding to generate error messages.
  • It is fine (and expected) for you to make 'mistakes' when learning trying out the code examples :)
  • It is fine (and encouraged) for you to try out extra code --ideally this experience should feel like 'play'
    • Keep in mind, however, that your submitted log files are an official assignment, so keep any extra code 'professional'

The complete grading Rubric is in Canvas.

Chapters and Exercises

  1. MDN Chapter "Introduction"
    1. Read all, up to the of section "Getting started with JavaScript"

    2. Read "Getting started with JavaScript" with the following adjustments:

      • Instead of reading sub-sections "The Web Console" and "Scratchpad":    (1)  review the prior tutorial in this course regarding using the Chrome Console and (2) instead of using Firefox's "Scratchpad" you will use Chrome's Snippet feature.   The Snippet feature is discussed at this link: https://developers.google.com/web/tools/chrome-devtools/snippets.

    3. Return to the MDN article and read the "Hello World" example and do the following exercise:
      1. Exercise:   "Hello World"

        Use the above Chrome DevTools (Snippet's, etc.) to run the code in sub-section "Hello world".   Specifically do the following (see also the video below):

        1. create a Snippet for the Hello World code
        2. evaluate that snippet on the Console
        3. save the Console to a log file chapter-1-log.txt
        4. verifying the log file using the shell
        5. git commit the Chapter 1 log file with message:   "-exercise chapter-1-log"

        The video below illustrates the above instructions:
  2. MDN Chapter "Grammar and Types"

    Before reading this chapter perform the following exercise:

    1. Exercise:  "Chapter Setup Procedure"     

      You will be saving at least one Chrome Console log file for each MDN Chapter.  

      If you take a prolonged break in your progress in the middle of a Chapter, 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.

      You should setup for each chapter as follows (see also the video below):

      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.

      The video below illustrates the above instructions:
    2. Read all of the MDN chapter, with the following exceptions:  you may skip reading the sub-sections in the "Skip" list below.  

      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 code boxes" (which look like the example below).   Regarding how strict the TA will be when grading your Console log see Grading Criteria.


      1. Skip Subsection:   Object literals : Enhanced Object literals

    3. Save the Console to a log file chapter-2-log.txt.
       
       
      Verify the log file looks correct using the shell.

      Git commit this chapters log file(s) with the message "-exercises chapter 2"

  3. MDN Chapter "Control flow and error handling"

    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').
    3. Read all of this chapter.

      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 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.
      Git commit this chapters log file(s) with the message "-exercises chapter 3"
  4. MDN Chapter "Loops and Iteration"

    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').

    3. Read all of this chapter.  

      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 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.
      Git commit this chapters log file(s) with the message "-exercises chapter 4"

  5. MDN Chapter "Functions"
    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').
    3. Read all of this chapter.  

      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 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.
      Git commit this chapters log file(s) with the message "-exercises chapter 5"

    • Language Comparison Notes
      • Not like Java:  MDN Sections: function expressions, nested functions, closures.
  6. MDN Chapter "Expressions and Operators"
    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').
    3. Read all of this chapter, but you may skip reading the sub-sections in the "Skip" list below.  

      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 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.
      Git commit this chapters log file(s) with the message "-exercise chapter 6"

    • Language Comparison Notes
      • Not like Java/C/C++:   JavaScript's  === vs ==,  compare to Java == vs .equals

  7. MDN Chapter "Numbers and Dates"
    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').

    3. Read all of this chapter, but you may skip reading the sub-sections in the "Skip" list below.  

      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 in the "grey code boxes".

      1. Skip sub-section: Dates

    4. Save the Console to a log file chapter-7-log.txt.  
      Verify the log file looks roughly correct using the shell.
      Git commit this chapters log file(s) with the message "-exercises chapter 7"

  8. MDN Chapter "Regular Experssions"
    • For the tutorial skip this; just make a mental note, that JS like nearly all other imperative programming languages has regex operators builtin.

  9. MDN Chapter "Text formatting"

    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').
    3. Read all of this chapter, but you may skip reading the sub-sections in the "Skip" list below.  

      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 in the "grey code boxes".

      1. Skip sub-section: Internationalization

    4. Save the Console to a log file chapter-9-log.txt.  
      Verify the log file looks roughly correct using the shell.
      Git commit this chapters log file(s) with the message "-exercises chapter 9"

    • Language Comparison Notes
      • 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 basically "Typed Arrays" (compact & memory efficient and index calculation efficient).

  10. MDN Chapter "Indexed collections"
    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').
    3. Read all of this chapter. 

      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 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.
      Git commit this chapters log file(s) with the message "-exercises chapter 10"

  11. 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.

  12. MDN Chapter: "Working with Objects"

    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').

    3. Read all of this chapter.  

      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 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.
      Git commit this chapters log file(s) with the message "-exercises chapter 12"

    • Language Comparison Notes:
      • 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.

  13. MDN Chapter: "Details of the object model"
    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').

    3. Read all of this chapter.  

      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 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.
      Git commit this chapters log file(s) with the message "-exercises chapter 13"

    • Language Comparison Notes:
      • 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.

  14. MDN Chapter: "Classes"
    1. If necessary repeat the 'Exercise: "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: "Chapter Setup Procedure"').

    3. Read all of this chapter.  

      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 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.
      Git commit this chapters log file(s) with the message "-exercises chapter 14"

    • 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.

  15. MDN Advanced 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: "Chapter Setup Procedure"').
    2. Reading 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.
      Git commit this chapters log file(s) with the message "-exercises chapter 14"

    • Language Comparison Notes::
      • In Java consider difference between == and .equals() method.
      • In C++ consider the different between apply == to comparing two pointers versus comparing the deferenced value of the two points, e.g.
        int a=10, b=10;
        int *pa = &a, *pb = &b;
        cout << "pa == pb" << (pa == pb) << endl;
        cout << "*pa == *pb" << (*pa == *pb) << endl;

  16. MDN Concurrency model and the event loop
    1. Read all  (there is nothing to submit for this chapter)
  17. MDN Advanced 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 read will draw pixels at the mouse cursor location.   Try it.
      5. Examine the switch statement in file using-promises.js . Study the differences between how the first four different versions of the 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 the4 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.

        Git commit this chapters log file(s) with the message "-exercises chapter 17"

  18. MDN: Making asynchronous programming easier with async and await
    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. From the JS tutorial page, download and copy the files using-promises.html and using-promises.js into this directory
        Git commit this with the message "-Exercise: CH18: copied initial files"
      4. Verify that you can open the above local files in Chrome and that they work as they did in Part 17.
      5. 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.
      6. 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.
      7. 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.
      8. Git commit with the message "-Exercise: CH18:  async-await example

Academic Integrity

See the course syllabus regarding partial credit and the late penalty policy.  

  • This is an individual assignment.   Each student must write and submit their own unique code, logs, answers, etc.
  • However, feel free work together in pairs or groups and discussing the readings and concepts.


Cheating in any form is subject to disciplinary action (UNCC Catalog, pages 275-278).

The TA will be running the submitted code through various plagiarism detection software such as TurnitIn.

If you have questions about whether using a particular resource or collaborative strategy is acceptable or not, email the TA and/or Professor.