ITCS 3120 : JavaScript Tutorial

Fall 2020

Professor: Zachary Wartell

Revision: Fri Oct 30 19:27:39 2020 -0400 (git logs)


Creative Commons License
"ITCS 3120 : 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 Firefox v41 and Chrome v46.

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 if any "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_3120_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_3120/
    $git clone https://cci-git.uncc.edu/your_user_id/ITCS_3120_JS_Tutorial.git JS_Tutorial
    Cloning into 'JS_Tutorial'...
    warning: You appear to have cloned an empty repository.

  3. Inside the tutorial directory create a text file called 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

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:

The complete grading Rubric in on 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 "-execises 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 "-execises 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 "-execises chapter 5"

  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 "-execises chapter 6"

  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 "-execises chapter 7"

  8. 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-8-log.txt.  
      Verify the log file looks roughly correct using the shell.
      Git commit this chapters log file(s) with the message "-execises chapter 8"

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

  9. 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-9-log.txt.  
      Verify the log file looks roughly correct using the shell.
      Git commit this chapters log file(s) with the message "-execises chapter 9"

  10. Chapter "Keyed collections"
  11. 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-10-log.txt.  
      Verify the log file looks roughly correct using the shell.
      Git commit this chapters log file(s) with the message "-execises chapter 10"

  12. Chapter: "Details of the object model" 
    • Skip this chapter for this graded tutorial, but come back to it as needed later in the semester.
    • The first classes assignments can be completed without mastering inheritance, but later ones will require it.

Academic Integrity

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


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.