ITCS : JavaScript Tutorial
Spring 2024
Professor: Zachary Wartell
Revision: Tue Feb 6 16:05:11 2024 -0500 (git logs)
"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 Version 118.
Objectives
- Learn subset of fundamentals of JavaScript from MDN resources (as appropriate for this courses later WebGL assignments).
- Learn JavaScript debugging facilities within the Chrome Browser.
Tutorial Structure
This tutorial has 2 parts. The parts are very different in size and complexity and contain alternative options for students with prior knowledge of the Learning Objectives.
- Part 1 is required.
- Part 2: Either Option I or Option II is required
- Option I - JavaScript Tutorial: This option is for students without experience programming in JavaScript.
- Option II - Survey of Prior JavaScript Experience
This option is for students who already have significant experience programming in JavaScript.
Part 1: Git Repo Setup
- Exercise: [Create Remote Repo]
Create new remote repo on cci-git called, Create a new remote repo on cci-git called, - using the procedures of GT: Appendix Basic Git Operations.
- Now clone your remote repo:
lucretius@CCIWD-435B-1 ~/ITCS_/
$git clone https://your_user_id:your_PAT@cci-git.uncc.edu/-.git
Cloning into '-'...
warning: You appear to have cloned an empty repository.
- Create a file README.md. Add your name on the first line of the file.
Git commit the file with the commit message - git commit -m “initial README.md” .
Part 2: Option I - JavaScript Tutorial
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:
- Read through the MDN JS Guide using the Chrome browser
- While reading, type in (or copy
& paste, etc.) the Guide's code examples into the Chrome
Console.
- this lets you try out the code and demonstrates that you read the material.
- Periodically save the log file
from the Chrome Console and git commit the log file
- this records everything you did on the Console and serves as proof of completing the tutorial
- details for doing so are provided later in this document.
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 at least 90% of the example code in the listed MDN chapters. Also, regarding what is recorded in the log file:
- It is fine (and expected) for some of your coding to generate error messages in the log file.
- It is fine (and expected) for you to make 'mistakes' when learning and trying out the code examples.
- It is fine (and encouraged) for you to try out extra code
- Keep in mind, however, that your submitted log files are an official assignment, so keep any extra 'play' code professional.
Chapters and Exercises
- MDN Chapter "Introduction"
- Read all, up to section "Getting
started with JavaScript"
-
"Getting started with JavaScript"
Read just the first introductory paragraphs.-
"Opening The Console"
Follow the link and read "Opening the console in Chrome". -
"Entering and running JavaScript"
Read this subsection. -
"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"
-
"Opening The Console"
- 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:- 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:
- Create a Snippet for the Hello World code
- Copy and Paste the example code at the end of "Multi-line input in the console" in to this new Chrome Snippet.
- Evaluate that snippet on the Console
- Save the Console to a log file chapter-1-log.txt
- Verify the log file using the bash shell or your operating systems file explorer.
- add/commit the Chapter 1 log file git commit -m "-exercise chapter-1-log" .
Video Format of Instructions:
- Exercise:
"Hello World"
- Read all, up to section "Getting
started with JavaScript"
- 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:
- Open the Chapter's hyperlink in Chrome
- In Chrome, open Chrome DevTools window
- Open the Sources Panel
- Open the Snippet tab
- In the Snippet tab create a "New snippet"
- Open the Console via "Show console drawer"
- IMPORTANT: In
Console make sure "Preserve Log" is enabled.
Without this your saved log file could end up empty!
- Clear the Console log from any
console input from the prior chapters.
Instructions in Video Format:
- MDN Chapter "Grammar
and Types"
(The following assumes you setup the Chrome Console log process described above)
- 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.
- 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. - add/commit the Chapter 2 log file git commit -m "-exercise chapter-2-log" .
- Read this MDN chapter, but skip
sub-sections: "Object literals : Enhanced Object literals"
- MDN Chapter "Control
flow and error handling"
- If necessary repeat the 'Exercise: "MDN Chapter Setup Procedure" to prepare for saving the Console log for this chapter.
- 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"').
- 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" . - Save the Console to a log file chapter-3-log.txt.
Verify the log file looks roughly correct using the shell. - add/commit the Chapter 3 log file git commit -m "-exercise chapter-3-log" .
- MDN Chapter "Loops
and Iteration"
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure' in order to make sure
the necessary Chrome DevTool Panels are available.
- 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').
- 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" .
- Save the Console to a log file chapter-4-log.txt.
Verify the log file looks roughly correct using the shell. - add/commit the Chapter 4 log file git commit -m "-exercise chapter-4-log" .
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure' in order to make sure
the necessary Chrome DevTool Panels are available.
- MDN Chapter "Functions"
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure' in order to make sure
the necessary debug Panels are available.
- 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'').
- 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" .
- Save the Console to a log file chapter-5-log.txt.
Verify the log file looks roughly correct using the shell. - 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.
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure' in order to make sure
the necessary debug Panels are available.
- MDN Chapter "Expressions
and Operators"
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure'' in order to make sure
the necessary debug Panels are available.
- 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'').
- 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"
- Save the Console to a log file chapter-6-log.txt.
Verify the log file looks roughly correct using the shell. - 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
- Not like Java/C/C++: JavaScript's
=== vs ==, compare to Java ==
vs .equals
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure'' in order to make sure
the necessary debug Panels are available.
- MDN Chapter "Numbers
and Dates"
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure"'
in order to make sure the necessary debug Panels are
available.
- 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').
- 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" .
- Save the Console to a log file chapter-7-log.txt.
Verify the log file looks roughly correct using the shell. - add/commit the Chapter 7 log file git commit -m "-exercise chapter-7-log" .
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure"'
in order to make sure the necessary debug Panels are
available.
- MDN Chapter "Regular
Experssions"
- Skip this chapter for this tutorial. You can
always come back to it if needed.
- Skip this chapter for this tutorial. You can
always come back to it if needed.
- MDN Chapter "Text
formatting"
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure"'
in order to make sure the necessary debug Panels are
available.
- 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"').
- 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".
- Save the Console to a log file chapter-9-log.txt.
Verify the log file looks roughly correct using the shell. - 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.
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure"'
in order to make sure the necessary debug Panels are
available.
- MDN Chapter "Indexed
collections"
- If necessary repeat the ''Exercise: "MDN
Chapter Setup Procedure"
in order to make sure the necessary debug Panels are
available.
- 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").
- 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".
- Save the Console to a log file chapter-10-log.txt.
Verify the log file looks roughly correct using the shell. - add/commit the Chapter 10 log file git commit -m "-exercise chapter-10-log" .
- If necessary repeat the ''Exercise: "MDN
Chapter Setup Procedure"
in order to make sure the necessary debug Panels are
available.
- 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.
- 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.
- MDN Chapter: "Working
with Objects"
- If necessary repeat the ''Exercise: "MDN
Chapter Setup Procedure"'
in order to make sure the necessary Chrome DevTools Panels
are available.
- 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").
- 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" .
- Save the Console to a log file chapter-12-log.txt.
Verify the log file looks roughly correct using the shell. - 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.
- 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.
- If necessary repeat the ''Exercise: "MDN
Chapter Setup Procedure"'
in order to make sure the necessary Chrome DevTools Panels
are available.
- MDN Chapter: "Details
of the object model"
- If necessary repeat the ''Exercise:
"MDN Chapter Setup Procedure"'
' in order to make sure the necessary Chrome DevTools Panels
are available.
- 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"').
- 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" .
- Save the Console to a log file chapter-13-log.txt.
Verify the log file looks roughly correct using the shell. - 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.
- If necessary repeat the ''Exercise:
"MDN Chapter Setup Procedure"'
' in order to make sure the necessary Chrome DevTools Panels
are available.
- MDN Chapter: "Classes"
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure"'
in order to make sure the necessary Chrome DevTools Panels
are available.
- 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"').
- 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" .
- Save the Console to a log file chapter-14-log.txt.
Verify the log file looks roughly correct using the shell. - 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.
- If necessary repeat the 'Exercise:
"MDN Chapter Setup Procedure"'
in order to make sure the necessary Chrome DevTools Panels
are available.
- MDN Chapter: Equality_Comparisons_and_Sameness
- 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" ').
- Read up to but not including "Abstract equality, strict equality, and same value in the specification"
- Save the Console to a log file chapter-15-log.txt.
Verify the log file looks roughly correct using the shell. - 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;
- MDN Concurrency model and the event loop
- Read all There is no submission for this chapter, but understanding it is crucial to the following chapter's exercises.
- MDN Chapter: Using Promises
- Read up to, but not including, sub section "Chaining after a catch"
- Exercise:
- 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"').
- In Chrome open the page exercises/using promises/using-promises.html.
- Open the Chrome Developer Tools. Specifically open the Console and the "Sources" tab and study the source code, both the js and html file.
- Left clicking the mouse in the light gray canvas will draw pixels at the mouse cursor location. Try it.
- 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).
- Each of these switch case statements is enabled using one of the four radio buttons in the graphical UI.
- 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.
- 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.
- 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.
- Select Asynchronous Chained Promise radio button and press the Run Tasks 1 to 3 button.
- Save the Console to a log
file chapter-17-log.txt.
Verify the log file looks correct using the shell.
- add/commit the files git commit -m "-completed exercises using promises" .
- 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.
- Read up to but not including "Adding error handling".
- Exercise:
- Create new subdirectory called "async-await" inside your JS_tutorial directory.
- cd to async-await
- Download and copy the files
using-promises.html
and
using-promises.js
into this directory
- Git commit this with the message "-Exercise: async-await copied initial files"
- Verify that you can open the above local files in Chrome and that they work as they did in Part 17.
- 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.
- 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.
- 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.
- add/commit the files git commit -m "-exercise: async-await completed" .
Part 2: Option II - Survey of Prior JavaScript Experience
This section covers Option II for Part 2. Review the Tutorial Structure regarding the requirements for completing either Option I or Option II of Part 2.
For Part 2: Option II, you must submit a brief description of your prior experience in Javascript.
-
lucretius@monad42 ~/ITCS_course-number/data-project-name
[Use notepad or your favorite editor to edit the top-level README.md file]
notepad README.md
-
In the README.md file after the line "### JavaScript Experience":
- List all courses you already took or are currently taking where you learned Javascript.
- List any other experience you had outside of a class work where you learned Javascript.
- List all courses you already took or are currently taking where you learned Javascript.
- git commit -m '-add Prior Experience in Javascript' .
Appendix I: Rubric
Combination | Max Points | Awarded Points |
---|---|---|
0.0 |
Section | Item | Category | Link | Fraction | Points | Award | Comments |
---|
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.