ITCS : JavaScript Tutorial

Spring 2021

Professor: Zachary Wartell

Revision: Tue Feb 23 18:24:22 2021 -0500 (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 v88.

Objectives

  1. Learn subset of fundamentals of JavaScript from MDN resources (as appropriate for this courses later D3 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 TutorialREADME.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 inCanvas 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. Reading this chapter is strongly suggested.   Just familiarize yourself with the basics for and keep it inind so you can come back to it as needed as your develop your JS experience and skillset.   There is nothing to submit for this part.

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

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.